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

随着时代和技术的发展,网页设计 的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计 的唯一标准,静态页面设计在整个设计流程中所占的比重也逐步降低,正如同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

相关推荐

  • 成都UI-UE交互设计免费试听课了解一下!

    周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需求大,要求也越来越高,所以,培训,是提高水平...

    2018-04-17
  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 为了色盲用户的友好体验,你应该注意五点

    世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

    2017-05-05
  • 对于交互、视觉设计师来说,至少要了解的产品知识

    之前在设计体系规划里面有提到过,产品常识也是我们需要了解的内容,其中产品定位就是最基础,也是最重要的一个概念,因为项目后期的所有工作都是围绕产品定位所展开的。比如还是上面那个例子,使用人群是单身男女,我们将使用人群细分为:18-25岁、25-35岁、35-45岁和45岁以上的单身男女。最后将目标用户定为25-35岁的单身男女,当然为什么选取这部分人群需要一些理由,比如这部分群体的经济比较独立,年龄更适合步入婚姻的殿堂等等。比如我们的主要功能是即时通讯,那即时通讯会分为很多使用场景,比如上下班的路上、睡觉前,起床后等等。比如产品的特色是“更容易约会成功”,那为了达成这个大的产品目标,我们需要细化,将其分解成多个小的用户目标,如快速看到周围单身异性的信息状态、快速了解周围哪些异性对自己有兴趣等等。

    2017-05-09
  • 一份全面系统的渐变色自学指南

    踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

    2017-05-22
  • 12个线框图示例,来自Dribbble的UX设计师分享。

    在设计过程的最初阶段,我们知道很有可能直接选择word或邮件原始需求。但是,用线框技术解决问题有很多好处,它可以节省时间,更易于发现可用性问题,并让设计人员专注于创造可靠的用户体验

    2017-12-26
  • 输入#号交互,还能变出什么花儿来?

    输入#号后,在键盘之上即刻出现一个半浮层。你可以在当前界面继续打字,或者选择半浮层中的搜索结果。当你想查看更多向上滚动时,才会推入一个新页面。

    2017-05-23
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 总结:常见的4条用户体验误区

    近年用户体验的概念越来越火热,从事互联网人张口闭口就谈用户体验,用户体验的概念离我们每个人那么的近。但是用户体验是人人都可以做好的吗?答案是否定的,就像人人都是产品经理一样,能做产品经理的依旧是少数,把产品经理做好的更是凤毛麟角。本篇文章总结4条我遇到的用户体验误区。如果一个流程的信息量是12个单位。x*y=12(x=单位页面的信息量  y=路径深度)例如微信发朋友圈即使断网情况下,当用户在点击发送时,朋友圈立刻就显示数据,给用户反馈是动态发送成功,其实是假数据显示,在这个时候后台还在上传。断网场景极少,朋友圈这个设计满足绝大部分用户的操作顺畅,用户体验良好。不为了极少数使用场景而做真数据展示给用户,那样的话给绝大部分用户感觉加载过慢导致不好的体验。

    2017-04-29
  • 关于2017年的设计趋势,国外已经有了这13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。“庆祝成功自然无可厚非,但学习并反思失败更加重要。” ——比尔·盖茨“他们是种异常必要的无谓存在,他们因为需要被呵护而带给人恰到好处的慰藉。”“差劲的设计团队提供用户要求的UX。伟大的设计团队提供用户需要的UX。”“对于一个优秀的UX设计师来说,他/她最大的责任就是使用户在使用产品 的时候能产生信任感。”“一件好产品就如一部伟大的电影。”“我们逐渐发现这些智能小助手(AI)之间的合作能力可能并没有想象中那么强大。”“Material Design将会目睹它所倚仗的‘笔’与‘纸’之间的枪战——它会发现它的立身之本在面对未来强大多元的互联网时不堪一击。”——Chase Buckley(独立UX设计师)“与真实的纸不同的是,我们的数字材料可以随意伸缩与变形。纸质材料有物理表面与边界。是那些缝隙与阴影告诉你这一切,赋予了你能触碰到的东西意义。”

    2017-05-18