移动端的时代要如何重塑网页设计流程?

随着时代和技术的发展,网页设计 的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计 的唯一标准,静态页面设计在整个设计流程中所占的比重也逐步降低,正如同Stephen Hay所说,我们所设计的不再是单纯的页面,而是包含诸多组件的一整个系统。

随着时代和技术的发展,网页设计的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计的唯一标准,静态页面设计在整个设计流程中所占的比重也逐步降低,正如同Stephen Hay所说,我们所设计的不再是单纯的页面,而是包含诸多组件的一整个系统。

瞬息万变的不仅仅是内容和信息,用户所用的设备和内容呈现的模式也在快速改变着,这些都与网页设计息息相关,也没有任何迹象表明这种改变会变缓。而我们的设计作为载体和呈现的载体,理应走在它们的前面。

之前的网页设计流程在今天看来已经无法应付这一切了,修整刻不容缓。敏捷开发、团队协作和适应性调整都已经是设计过程的最前沿,设计和开发之间的界限越来越模糊了。

移动端优先

移动端的时代要如何重塑网页设计流程?

移动端优先,这句口号已经喊了好几年了,真正有远见卓识的网页设计师应该很清楚这句话远不止于口号那么简单。移动端优先必然会牵涉到设计流程,我们应当从小屏幕着手,先设计简单的布局,然后为其增加复杂度,以其为基础,为更大的屏幕来进行设计。

随着移动端设备的用量超越PC,移动端的网页浏览无疑已经成为用户获取信息的主要渠道,移动端优先的设计自然应该成为常态。

除非你的网站情况非常特殊,或者你拥有极具说服力和特殊的数据支撑你的想法,移动端优先的设计符合逻辑也有道理。

相比于为小屏幕去降低整个设计的复杂性,为移动端先做好适配再提升其复杂度,是更容易的。回想一下按照之前的流程来设计网页吧,我们总是疲于应对客户的要求,在后期还要来回调整设计和代码。未完成的页面和不够易用的移动端页面,填不完的坑。

桌面端的页面总是先做完,而在此基础上修改出来的移动端页面,似乎总有点粗制滥造的感觉。

那么我们就不要将”移动端优先”当作一句简单的口号好了!从现在开始真正意义上为移动端的小屏幕开始做设计!

搭建而非拆卸

移动端的时代要如何重塑网页设计流程?

设计是一个积累的过程,每一个进步都是在前一步的完成和胜利的基础上,逐步建立起来的。

基于小屏幕的设计规划是符合逻辑的。我更倾向于一砖一瓦地搭建,而非做好了再一点一滴地拆卸下来。

我能想到最好的类比是“原子设计”,这种设计方法是通过逐步提升复杂度来构建事物。简而言之,借助这种思路是这样做设计的:

  1. 确定基本的排版组合、尺寸大小和色彩使用
  2. 基于这些基本的设定,确定诸如表单字段和标签等小元素的设计
  3. 基于以上的设计,完善诸如完整的联系人表单的大的元素的设计
  4. 将这些已经构建好的网页元素搭建成为页面(诸如联系我们页面)
  5. 重复以上过程

就是这些不起眼的元素构建起了你的页面,也正是这样简单的方式,同样可以完成之前看起来复杂无比的页面设计。只要你用好这个设计流程,它所带来的可能性是无限的。

比起一开始就操刀设计页面,完成 这些“砖瓦”的设计更容易上手也更便捷,整个设计流程从移动端过度到桌面端也更加完美流畅。想想在这个过程中,你和你的客户所需要专注的事情吧,无非是持续不断地添加细节就好了。

不要局限于断点

移动端的时代要如何重塑网页设计流程?

在探讨响应式网页设计的设计过程之时,我们花费了大量的时间在断点的媒体查询和为现有硬件设备做设计的平衡之上。造成这个局面的主要症结,就是网站的内容。

如果可能的话,尽量在设计后期的时候,同内容和营销团队密切合作,在内容的结构和划分上多花心思,防止最终在这个问题上影响网页的设计,出现意外。

即便是如此,从设计之初到设计后期乃至整个页面上线,网页内容都可能是一直处于变动当中。标题越来越长,图片更换,区块被替换,等等等等。

“如果可能的话,尽量使用真实的内容来进行设计。”

一个真正精心设计的系统应该是可以收放自如的。所以,如果真的将营销和内容团队提供的Word文档转化成为一个可靠的页面,这样的事情不应该令你头疼。

虽然有些细节的处理上确实需要多加注意,但是我的经验告诉我,其实并不要想复杂了,也不要想多了。绝大多数时候,一个紧凑而聪明的设计风格指南(Style Guide)能让所有的事情水到渠成。

测试和实现

移动端的时代要如何重塑网页设计流程?

进行原型设计确实很不错,但是原型设计的问题也在于,它还是一种“闭门造车”的设计,并没有在真正的用户那里得到验证。

在真实的设备上同用户分享设计,借此可以获得最好的设计反馈。即使你仅仅只是画了线框图,也能在真实的设备上同用户进行测试沟通。

测试响应式的设计,应该是一个宽泛而多样的过程。找台智能手机,把你的设计稿放进去,问问不做设计的同事和朋友,让他们看看这样的设计是否可行。接下来再换上iPad和桌面端设备,一步一步来。

全新的世界

从一个全新的角度来看待复杂的问题,我们所要面临的一切似乎都是新的。提升团队成员的合作紧密度,模糊团队界限可以让整个设计过程都快起来。我们的设计应该不断适应新的需求和新的状况,因为我们的内容、业务和这个世界的变化更快。

 

译文来自:优设

原文地址:invisionapp

译者:@陈子木

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32493/

(0)
CatherineCatherine
上一篇 2017-06-05
下一篇 2017-06-05

相关推荐

  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • Axure RP 8.0软件安装教程

    软件链接:Axure RP 8(32、64位)链接:https://pan.baidu.com/s/1pMubgLl密码:0nb1软件介绍Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装教程共享软件库1.点击历史信息,查看更多内容2.长按右...

    2018-03-04
  • 如何在Sketch中快速创建调色板?

    今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

    2018-04-17
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05
  • 案例分析:聊聊扁平化设计的六点优势

    著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

    2017-05-10
  • 产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 这是我作为交互设计师一年来的总结

    毕业后加入百度成为一名交互设计师已经整整一年了,现在把一些和工作、职场的相关经历和感受写下来。希望能对即将踏进职场的学弟学妹有所帮助。

    2017-05-22
  • 你的产品有没有为老年人考虑?

    原文:smashingmagazine 木为艾欧网-交互学堂翻译 如果你在科技行业工作,很容易忘记,年长的人存在。大多数技术工人真的很年轻,所以很容易看到为什么大多数技术是为年轻人设计的。 考虑到这一点:到2030年,在美国19%…

    2015-02-08
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07