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

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

相关推荐

  • 设计方法论:一种统一图标大小的方法

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下。需要注意的是,方法有很多,这只是提供一种可行的方法,可供参考,有什么问题可以留言讨论。

    2017-05-18
  • 做好用户体验,掌握这些要素就够(一)

    我在人人都是产品经理这个平台上,没看到更全面概括原则与思想的文章,所以我想在这系统的说说。考虑到篇幅太长,用户看的可能会比较费劲,所以我会分成几篇文章来讲。

    2017-05-19
  • 交互设计,应该从哪学起?

    交互设计行业感觉很火嘛,我也很有兴趣,甚至想转型做交互设计,需要具备什么条件吗?什么职业都可以转型做交互设计吗?网络上很多培训内容都太宽泛,我到底该学什么呢?想职业转型,想拿到高薪,想提升生活品质,如果只是停留在“想”,永远都不会获得成功。不如从今天、从此刻开始,开启你的交互设计之路,从职业规划到求职面试,本课程带你走上职场进阶的坦途。课程139课时,超过1500分钟,800MB课程资料,全面讲解交互设计知识!商业实战案例,1年私人顾问...

    2018-01-30
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 星环AI部门招聘 | 春风十里,星环有你

    星环简介星环科技是全球领先的大数据与人工智能基础平台供应商,专注于提供企业级容器云计算、大数据和人工智能核心平台的研发和服务,打造大数据和人工智能生态的“中国心”。公司以上海为总部,以北京、广州、多伦多为区域总部,并在南京、郑州、成都设有支持中心,同时在深圳、天津、武汉等地设有办事机构。经过多年自主研发,星环科技建立了四条产品线:一站式大数据平台Transwarp Data Hub(TDH)、基于容器的云操作系统Transwarp Op...

    2018-04-02
  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 交互设计师的60日计划之第六天

    今天去公司加了一天班,然而并没有做完该做的事情。恰好昨天看了一篇有关拖延症的文章,今天加班的过程中发觉自己已经病入膏肓...有deadline的东西可以做完,没有deadline的东西永远都做不完,这是一件很可怕的事情…

    交互专题 2015-08-20
  • 交互新人的踩坑史:入职3个月,我总结了这4点经验

    新人入职3个月,有幸参与到一个新项目,感觉既充满机遇又面临挑战。在与项目一起成长的时间里,踩了很多坑,趁此机会记录下来,希望对跟我一样的交互新人有所帮助。

    2017-05-16
  • App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12
  • 交互设计连载1:什么是交互设计?

    三年前...当时我还是一名刚入行的UI设计师。在一个无聊的周末,看到一篇介绍交互设计的文章,一时间特别兴奋。这篇文章大致告诉了我什么是交互,什么是交互设计。从那以后,我把注意力的侧重点逐渐往交互上靠拢,以至于后来有机会转行成为了一名交互设计师。下面po出这篇文章:《从零开始成为优秀的交互设计师》,可以去网上搜一下这篇文章,干货满满。回到主题,什么是交互设计呢?交互设计英文称之为Interaction Design。你来我往视为交互。你点...

    2018-02-07