响应式设计的到来对网站设计师意味着什么?
2022-04-25•
围观热度 798•网站专题
显而易见,响应式网站设计(RWD)这个术语在网站领域越来越流行。当你在Twitter、脸书或微博等社交媒体上搜索#响应式网站设计时,你会发现很多内容优质、泛泛而谈的文章,这是新概念逐渐成熟的现象。如今RWD无处不在,甚至在杂志界,它也有点名气。我一个做杂志出版商的朋友最近参加了一个会议,会上很多新兴杂志的著名编辑都提到了未来网站发展的趋势,谈到了响应式网页设计。编辑可能不是网站建设的专业人士,但他们都知道“响应式网站设计”(RWD)。
响应式设计正在蓬勃发展,人们创建网站的方式已经改变。随着RWD成为网页设计的一部分,网页设计师的工作方式必须改变。因此,我们需要为响应式网站设计建立一些准则。
不要停留在“软应对”上。当用户要求你测试一个响应式网站时,你会怎么做?更改窗口大小,观察布局如何变化。在这种情况下,大多数设计师或开发者可能会使用手机或平板电脑访问、旋转显示方向,或者测试页面加载速度。这是因为他们整天都在调整浏览器,很容易形成这种想法。但用户是另一种存在。当你作为用户访问时,你不会在意网站布局是否流畅。你只是希望能够尽快找到你想要的信息。
所以在这里,我想告诉大家,响应式网站设计不仅要注重版面的响应性,还要注重网站内容的选择,不要仅仅停留在“软响应”上。“软响应”是指网站的线性缩放,以及在不同屏幕上的大小变化。软应对远远不够。在设计网站时,我们需要有一个核心,围绕这个核心,我们可以根据不同屏幕上的功能加载更多内容。以栗子为例。如果网站需要为IE7做一个手机元素(如App宣传页),那么手机元素就是你需要重点关注的核心。最好是围绕手机元素设计屏幕或者其他元素,根据不同的屏幕进行合理布局。
不要投机取巧。响应式设计非常复杂。我们都希望有一些技巧或者方法可以让它变得简单一些,但是这个真的不存在,或者说还没有出现。大多数负责开发响应性的设计师仍然需要认真负责,在交付新内容或其他活动时添加工作流。以我的一个朋友为例。首先,她用Photoshop做了一张与电脑兼容的设计图。但是在完成了一些设计页面之后,我想让网站在平板电脑或者智能手机上看起来不错,所以我做了一些设计图。但在把结果展示给用户后,有些地方需要根据用户的需求进行创造性的调整,新的设计图纸是不可避免的。这样算下来,差不多有50个PSD文件。她花了很长时间来调整页面布局。
如果增加了新的设计,就需要更多的时间,而且可能会造成前后框架或者布局的不一致。建议:最好的处理方法之一是向客户展示原型线框。这样就只能谈布局而不是按框图设计了。ZURB的Foudation是制作线框的好工具。
拥抱变化,迎接挑战。第一次构建响应式网站时。我只用了Photoshop和GoLive工具,现在至少要用六个。我仍然使用Photoshop来创建页面中的图形元素,但页面中的其他设计元素主要使用Sublime Text 2,我使用iOS 6中包含的Safari浏览器开发者工具来查看制作的页面元素。另外我用Codekit编译预处理的CSS(比如LESS或者Sass)和版本控制工具Git设置命令行。
响应式网页设计意味着设计风格的改变。与在Photoshop中绘制整个页面相比,使用Samantha Warren的Style Tiles工具可以更清晰地表达视觉设计。通过设计一个视觉品牌和各种布局的网页界面元素,你也可以根据布局直接改变设计来创建一个响应式的网页原型。
CSS预处理器对任何响应式设计工作都有很大的帮助。简单来说,预处理者可以降低网站建设的复杂度,减少CSS解释过程中很多风格的重复继承。对于这个工具,我个人更喜欢SCSS。当然少也是不错的选择,它有更完善的文档。
牢记响应式设计的原则。网站应该能够访问并为任何可以访问互联网的设备提供友好的体验,无论是固定设备还是移动设备,无论屏幕是大是小。——蒂姆·伯纳斯·李
HTML和CSS本身就是响应式的。自HTML诞生以来,网站一直试图变得更加灵活,以适应所有可以访问互联网的硬件设备。并不是以前设计师和开发者倾向于固定的布局,现在变了。这是因为在网站上强加固定的大小会限制它在不同设备上提供的用户体验。
这就是响应式网站设计所具备的,把用户放在第一位。创建一个为用户服务的网站,确保用户在任何情况下都能方便地访问内容。做一个能适应小屏幕的网站只是一个开始。