对网站设计师来说,响应式设计的到来究竟意味着什么?

发布日期:2017-06-16
浏览次数:17
  
“网站设计师思考”的图片搜索结果
 
响应式网站设计(RWD)这个术语在网站领域越来越流行,这一点显而易见。当你在社交媒体如Twitter、Facebook或微博上等搜索#响应式网站设计时,你会找到很多文章,有优质的内容,也有泛泛而论的空谈,这就是新概念逐渐成熟的一种现象。曾经Ajax(一种网页开发技术)也是如此,现在却几乎无人问津了。
RWD如今到处都是,就连在杂志界也有点名气。我有一个做杂志出版的朋友最近参加了一个会议,会议上很多有名的新兴杂志编辑都提到了未来网站发展的趋势,谈到了响应式Web设计。杂志编辑可能在网站建设方面并不专业,但是也都知道这个词“响应式网站设计”(RWD)。
响应式设计蒸蒸日上,人们创建网站的方式已经改变。而且随着RWD成为Web设计的常规部分,网页设计师的工作方式也要做出改变。因此我们需要确立一些关于响应式网站设计的准则。
 
 
 

1. 不要停留在“软式响应"

当用户要求你对某个响应式网站进行测试时,你会怎么做?改变窗口大小,观察布局怎么变化?在这种情况下,大部分设计或开发人员可能就会使用手机或者平板访问,旋转显示方向,或测试页面加载速度。这是因为他们整天都在调整浏览器,很容易形成这种想法。但是用户是另一种存在,当你作为用户进行访问时,你不会关心网站布局是否流畅,你只希望能够尽快找到自己想要的信息。
 
因此在这里,我想要告诉大家响应式网站设计不仅仅需要关注布局的响应式,还应留意网站内容的取舍,不要只停留在"软式响应"上。“软式响应”是指网站的线性缩放,在不同尺寸屏幕上的大小的改变。软式响应远远不够,设计网站时我们还需要有一个核心,在不同的屏幕上围绕这个核心按照功能适量加载更多内容。举个栗子来说,假如网站需要为IE7制作一个手机元素(如App宣传页面),那么手机元素就是你需要重点关注的核心,最好围绕手机元素对屏幕或其他元素进行设计,根据不同的屏幕作出合理的布局。
 
 
 

2. 不要投机取巧

响应式设计很复杂。我们都希望这有一些能够让它更加简单的技巧或方法,但这真的没有,或者说目前还没有出现。大多数负责开发响应式的设计师还是需要兢兢业业,在做新内容交付或是其他活动时做好工作流程的添加。以我的一个朋友为例。她是先在Photoshop里做了一个符合PC端的设计图。但完成一些设计页面以后,又想要网站在平板或智能手机上呈现良好,因此又制作了一些设计图。不过向用户展示成果后,一些地方需要根据用户需求做出创意性的调整,新的设计图又是不可避免的了。这样一算,已经差不多有50个PSD文件了。她需要花不少时间来调整页面布局。
如果是添加新设计,就更会消耗时间,还有可能造成前后框架或布局的不一致。建议:最好的处理方式之一就是向客户展示原型线框图。这样就可以照着框图只讲布局不谈设计。Foudation by ZURB是很一种比较好的线框图制作工具。
 
 
 

3. 拥抱变化,迎接挑战

在第一次构建响应式网站时。我仅使用了Photoshop和GoLive两个工具,但现在却至少要用6个。我仍然使用Photoshop创建页面中的图形元素,但页面中的其它设计元素主要使用Sublime Text 2,并且使用iOS 6自带的Safari浏览器开发者工具查看生产的页面元素。另外,我还使用Codekit来编译pre-processed CSS(比如LESS或Sass),使用版本控制工具Git设置命令行。
 
响应式Web设计意味着设计方式的改变。相对于在Photoshop中画出整个页面,使用Samantha Warren’s Style Tiles工具可以更清晰的表达视觉设计。通过设计一个Web在多种布局下的视觉品牌和界面元素,你还可以根据布局直接改变设计来创建响应式的Web原型。
CSS pre-processors对于任何响应式设计的工作都有巨大的帮助。简单的说,pre-processors可以降低网站构建的复杂性并且在CSS解释执行的过程中减少了许多样式重复继承的工作。针对这方面的工具,我个人更喜欢SCSS,当然LESS也是一个很好的选择,它还有更加完善的文档。
 
 
 

4. 牢记响应式设计原则

网站应该能够为任何可访问互联网的设备访问并提供友好的体验,无论是固定设备还是移动设备、不管屏幕是大还是小。——Tim Berners Lee
HTML和CSS本身就是响应式的。自HTML诞生以来,网站就试图变得更加灵活,来适应一切可以访问互联网的硬件设备。并不是说以前设计者和开发者趋向于固定的布局,现在却改变了,而是因为给网站强制加上固定的大小会限制它在不同设备端提供的用户体验。
 
 
 

总结

响应式网站设计是一个将你如何表达抽象为你表达什么的设计原则,例如,NPR最近迁移到一个API驱动的内容模型中,通过使用API提供相应的内容方式,NPR可以在app和网站上形成一致的表现,唯一需要修改只有表现层。
这就是响应式网站设计具备的一切,弄清楚设计师想表达什么,并且通过它驱动实现如何表达,设计出迎合用户需求并赏心悦目的效果。
这就是响应式网站设计具备的一切,以用户为先。创建为用户服务的网站,保证用户在任何情况下都可以轻松实现内容的访问。做一个可以适应小屏幕的网站仅仅是个开始。
 
 
出自:开源中国社区 Oschina.net

登录后即可发表评论,立即登录.