用户界面

用户界面

无框界面时代或将到来:无框界面优劣浅谈

交流wtyg 发表了文章 • 0 个评论 • 57 次浏览 • 2017-01-24 12:02 • 来自相关话题

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。





那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。





掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?





但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。





发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015





不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。





无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
  查看全部
6362076364736241566999690.jpeg

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。

6362076364739361575243027.jpg

那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。

6362076364744041589257120.png

掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?

6362076364748721598973040.png

但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。

6362076364751841592514549.png

发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015

6362076364754961609757886.png

不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。

6362076364759641614771978.png

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
 

案例分析:聊聊扁平化设计的六点优势

交流adminjzw 发表了文章 • 0 个评论 • 56 次浏览 • 2017-01-18 06:00 • 来自相关话题

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





扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。





Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”





Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955





Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955





Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。





GIF for the Weather App

扁平化设计最基本、最突出的特征包括:

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则





Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。





设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。





UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。





Pull To Refresh





Portrait vs Landscape interaction





GIF for Pull Down





Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。





The set of flat icons





Flat icons applied in Veggie App





Flat icons and tabs design for Blog App





Flat icons applied in Saily App





Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。





Cafe Coupon App





Weather App





Moneywise App





Illustration for SwiftyBeaver





Timeline App





Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。





Free Colorful Wallpapers





Free Space Wallpapers





Star Wars Rogue One





Underwater Explorer





Halloween Haunted Castle





Rio 2016





Californication Bus





San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。





Tales of the Jazz Age Book Cover





Pikachu Poster





Muscles Magazine





Suicide Squad Poster





Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。





Logo mascot for Saily App





Logo lettermark for PassFold





Logo design for Andre





Logo for Design4Users





Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

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

VA1yScFBJBhNhHRGB56H.jpg

扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。

ovaXdsyrPaed0HeE4zm5.jpg

Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”

VctR5IlQNBoDpbJwcJLc.jpg

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

0geqrBEASUf1X7oW9mT9.jpg

Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955

LpxltRhqNUMvirUVpccL.jpg

Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。

DufX84FkS806RGZG3Z9h.gif

GIF for the Weather App

扁平化设计最基本、最突出的特征包括

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则

qeP04fZumELiPOQPylQl.gif

Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。

cdwhRTKKKzQTCOMSgOaP.jpg

设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。

kpAlH27i1HkdQtLqYSjs.jpg

UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。

J026IYeXXjXqJRfqg7WV.gif

Pull To Refresh

AjlEKMzTRyGdsS64PHgo.gif

Portrait vs Landscape interaction

YkCuj9R06IKIHDeeZTKF.gif

GIF for Pull Down

LtclmavCC4OvdOI1w1PS.gif

Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。

UtnQ8qgDoTNbyjrc3FIi.jpg

The set of flat icons

3awr5xisfgmzdOM17goZ.jpg

Flat icons applied in Veggie App

pyTnlhSJbCwx84gFRCHQ.jpg

Flat icons and tabs design for Blog App

YmsaZWied3aRf0EnRBsl.jpg

Flat icons applied in Saily App

xiJCBAVhnGO5IlGfCA9g.jpg

Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。

0e5HIXACkYI4x40JXIE4.gif

Cafe Coupon App

Uao2dHMduQSqpm2ondZe.jpg

Weather App

zELEPuEA4XsybrTbXkp7.jpg

Moneywise App

OUmjWUlwGA8bYqGuRJUV.jpg

Illustration for SwiftyBeaver

Z91xUJPAEijOXQKDXImq.gif

Timeline App

NWKL93uZdpw26auhW5tR.jpg

Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。

pRteKEcssaYy2qEw5O5M.jpg

Free Colorful Wallpapers

1TwpXwmViRlatk52MfHc.jpg

Free Space Wallpapers

LZ41vqQwD8Xfagkwrs1s.jpg

Star Wars Rogue One

G5SOrXdvwnJ5gmGjsznh.jpg

Underwater Explorer

4IfyPXB54v9WOCYycPVq.jpg

Halloween Haunted Castle

SuQj98Ej5OByqrFQ5iSF.jpg

Rio 2016

kaixiZXuuCY8fNbcBuyb.jpg

Californication Bus

z6ycJBBja7HmQYEDcmam.jpg

San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。

0BPIkAWzvhvY63x7bWYN.jpg

Tales of the Jazz Age Book Cover

TinZvOWqGIf87ZE6Iy4h.jpg

Pikachu Poster

vUv6COWehLyjNW3gt4fj.jpg

Muscles Magazine

hH1bt1cBq3X2vekN36fF.jpg

Suicide Squad Poster

qqoTa1uiKUvLemGMrTD7.jpg

Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。

uKLgUYHx5on34JCtxF0l.jpg

Logo mascot for Saily App

Nj9TbBMsRqf9go4JzzHy.jpg

Logo lettermark for PassFold

ixbJlQ45qsNNDoAvyW2I.jpg

Logo design for Andre

xmFaH47d660oDeW4Faqj.jpg

Logo for Design4Users

QNV8zfWKSI7ej73X6eJu.jpg

Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

译文地址:http://www.uisdc.com/flat-design-history-benefits
 

2017 年网页设计的十大趋势

资讯xgzx 发表了文章 • 0 个评论 • 67 次浏览 • 2017-01-13 01:06 • 来自相关话题

又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。





随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。





因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。





虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。





随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。





5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。





Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。





通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面





不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!





10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
  查看全部
又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。

148412844951480877.PNG

随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。

148412845846651370.PNG

因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。

148412844909962354.PNG

虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。

148412844947940988.GIF

随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。

148412844919266719.PNG

5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。

148412845014743223.PNG

Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。

20170113010715.jpg

通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面

148412845299045912.PNG

不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!

20170113010911.jpg

10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
 

超赞!人气超高的HTML5特效排行榜TOP10

交流xgzx 发表了文章 • 0 个评论 • 65 次浏览 • 2017-01-07 03:42 • 来自相关话题

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票










百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独










简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字










百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上










全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天










什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆










虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿










祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?










“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒










整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久










长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设 查看全部
现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票

20170107034222.jpg


1483601575848.png

百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独

1483601575910.jpg


1483601575980.png

简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字

1483601575909.jpg


1483601575588.png

百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上

1483601575242.jpg


1483601575911.png

全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天

20170107034742.jpg


1483601575438.png

什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆

1483601575297.jpg


1483601575261.png

虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿

1483601575144.png


1483601575407.png

祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?

1483601575693.jpg


1483601575545.png

“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒

1483601575869.jpg


1483601575919.jpg

整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久

1483601575255.jpg


1483601575455.png

长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设

减少认知过载:塑造更好的用户体验

交流adminjzw 发表了文章 • 2 个评论 • 115 次浏览 • 2017-01-05 05:18 • 来自相关话题

设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读:

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载:

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆:

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:





搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文:

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源:

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用:

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因:

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作:

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!





(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案:

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。)





让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。





(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案:

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。





(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。





(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。





(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。





(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案:

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。





(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。





许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。





(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法:

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。





(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。





(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面:

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。





(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案:

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。





(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。





任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。





(Image: Slack)

6.不易寻找到的页面:

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。





(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。





(Image: Mojo Yogurt)

解决方法:

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。





1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。





(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。





比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。





(右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性:

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。





SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案:

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。





(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。





附言:

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
  查看全部
设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:

953085.jpg

搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!

953101.jpg

(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。

953102.jpg

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。

953103.gif

(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

953104.jpg

(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

953106.jpg

(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。

953107.jpg

(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

953108.jpg

(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。

953109.jpg

(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。

953110.jpg

许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。

953111.jpg

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

953112.jpg

(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

953113.jpg

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。

953114.jpg

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

953115.jpg

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

953116.jpg

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。

953117.jpg

(Image: Slack)

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

953119.jpg

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。

953120.jpg

(Image: Mojo Yogurt)

解决方法

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

953121.jpg

1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

953129.jpg

(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。

953135.jpg

比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。

953138.jpg

右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。

953144.jpg

SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。

953146.jpg

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。

953147.jpg

附言

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
 

一个良好的用户界面应该具备的八个特性

交流adminjzw 发表了文章 • 0 个评论 • 170 次浏览 • 2016-12-02 14:22 • 来自相关话题

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用,对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面,但是究竟什么才是一个良好的界面?一个有价值的用户界面应该具有那些特性?





以下八个特性是一个良好的用户界面所必须的:

清楚、简明、熟悉、易响应、一致、吸引力、高效、宽容

1.  Clear / 清楚的

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。





这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。





不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar / 熟悉

许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。





熟悉就是,跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中

GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive / 易响应

易响应意味着两件事。首先,易响应意味着快速。如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快,反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。





易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈,或许可以把按钮上的文字改成“正在加载…”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent / 一致

之前我谈过关于上下文的重要性,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。





一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive / 吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。





谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient / 高效率

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在,‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效?差不多,但不完全。





你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现?实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving / 宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。





一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动?当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。例如,试图使一个界面清晰,您可能会增加太多的描述和解释,即最终使整个界面变得大而笨重。缩减容量,努力使事情简洁可能产生相反的效果,使东西模糊不清。实现一个完美的平衡需要的技能和时间,解决方案根据不同的案例也并不一样。

来源:思维网 查看全部
当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用,对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面,但是究竟什么才是一个良好的界面?一个有价值的用户界面应该具有那些特性?

201506300904359662.png

以下八个特性是一个良好的用户界面所必须的:

清楚、简明、熟悉、易响应、一致、吸引力、高效、宽容

1.  Clear / 清楚的

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。

201506300904561714.png

这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。

201506300905183234.png

不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar / 熟悉

许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。

20150630090539942.png

熟悉就是,跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中

GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive / 易响应

易响应意味着两件事。首先,易响应意味着快速。如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快,反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。

201506300905572320.png

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈,或许可以把按钮上的文字改成“正在加载…”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent / 一致

之前我谈过关于上下文的重要性,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。

201506300906109987.png

一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive / 吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

201506300906291241.png

谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient / 高效率

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在,‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效?差不多,但不完全。

201506300906456582.png

你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现?实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving / 宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。

201506300907033691.png

一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动?当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。例如,试图使一个界面清晰,您可能会增加太多的描述和解释,即最终使整个界面变得大而笨重。缩减容量,努力使事情简洁可能产生相反的效果,使东西模糊不清。实现一个完美的平衡需要的技能和时间,解决方案根据不同的案例也并不一样。

来源:思维网

2017 年网页设计的十大趋势

资讯xgzx 发表了文章 • 0 个评论 • 67 次浏览 • 2017-01-13 01:06 • 来自相关话题

又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。





随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。





因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。





虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。





随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。





5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。





Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。





通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面





不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!





10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
  查看全部
又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。

148412844951480877.PNG

随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。

148412845846651370.PNG

因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。

148412844909962354.PNG

虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。

148412844947940988.GIF

随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。

148412844919266719.PNG

5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。

148412845014743223.PNG

Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。

20170113010715.jpg

通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面

148412845299045912.PNG

不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!

20170113010911.jpg

10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
 

超赞!人气超高的HTML5特效排行榜TOP10

交流xgzx 发表了文章 • 0 个评论 • 65 次浏览 • 2017-01-07 03:42 • 来自相关话题

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票










百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独










简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字










百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上










全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天










什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆










虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿










祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?










“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒










整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久










长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设 查看全部
现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票

20170107034222.jpg


1483601575848.png

百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独

1483601575910.jpg


1483601575980.png

简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字

1483601575909.jpg


1483601575588.png

百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上

1483601575242.jpg


1483601575911.png

全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天

20170107034742.jpg


1483601575438.png

什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆

1483601575297.jpg


1483601575261.png

虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿

1483601575144.png


1483601575407.png

祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?

1483601575693.jpg


1483601575545.png

“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒

1483601575869.jpg


1483601575919.jpg

整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久

1483601575255.jpg


1483601575455.png

长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设

减少认知过载:塑造更好的用户体验

交流adminjzw 发表了文章 • 2 个评论 • 115 次浏览 • 2017-01-05 05:18 • 来自相关话题

设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读:

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载:

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆:

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:





搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文:

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源:

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用:

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因:

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作:

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!





(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案:

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。)





让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。





(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案:

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。





(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。





(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。





(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。





(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案:

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。





(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。





许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。





(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法:

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。





(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。





(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面:

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。





(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案:

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。





(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。





任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。





(Image: Slack)

6.不易寻找到的页面:

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。





(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。





(Image: Mojo Yogurt)

解决方法:

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。





1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。





(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。





比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。





(右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性:

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。





SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案:

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。





(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。





附言:

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
  查看全部
设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:

953085.jpg

搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!

953101.jpg

(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。

953102.jpg

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。

953103.gif

(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

953104.jpg

(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

953106.jpg

(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。

953107.jpg

(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

953108.jpg

(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。

953109.jpg

(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。

953110.jpg

许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。

953111.jpg

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

953112.jpg

(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

953113.jpg

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。

953114.jpg

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

953115.jpg

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

953116.jpg

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。

953117.jpg

(Image: Slack)

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

953119.jpg

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。

953120.jpg

(Image: Mojo Yogurt)

解决方法

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

953121.jpg

1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

953129.jpg

(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。

953135.jpg

比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。

953138.jpg

右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。

953144.jpg

SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。

953146.jpg

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。

953147.jpg

附言

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
 

无框界面时代或将到来:无框界面优劣浅谈

交流wtyg 发表了文章 • 0 个评论 • 57 次浏览 • 2017-01-24 12:02 • 来自相关话题

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。





那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。





掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?





但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。





发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015





不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。





无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
  查看全部
6362076364736241566999690.jpeg

什么是无框界面

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程才刚刚开始。

我曾在之前的《[译文] 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。

6362076364739361575243027.jpg

那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要随时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

下图:上面的是原版界面,下面的是我修改的无框版。我这个修改主要只是将框去掉而已,然后为了配合无框风格对细节做了一些修改,目的仅仅是为了对比同一个界面在有框和无框两种情况下看起来有什么不同。

6362076364744041589257120.png

掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议
视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,都视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题,在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性,毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?

6362076364748721598973040.png

但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。

6362076364751841592514549.png

发展了好久,终于在一两年前,咱们学会了用色块取代边线。

下图:Instagram 2015

6362076364754961609757886.png

不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面时代了。

6362076364759641614771978.png

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救不了;而能自成一派的优秀设计师并不需要受到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

作者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/24771017
 

案例分析:聊聊扁平化设计的六点优势

交流adminjzw 发表了文章 • 0 个评论 • 56 次浏览 • 2017-01-18 06:00 • 来自相关话题

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





扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。





Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”





Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955





Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955





Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。





GIF for the Weather App

扁平化设计最基本、最突出的特征包括:

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则





Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。





设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。





UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。





Pull To Refresh





Portrait vs Landscape interaction





GIF for Pull Down





Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。





The set of flat icons





Flat icons applied in Veggie App





Flat icons and tabs design for Blog App





Flat icons applied in Saily App





Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。





Cafe Coupon App





Weather App





Moneywise App





Illustration for SwiftyBeaver





Timeline App





Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。





Free Colorful Wallpapers





Free Space Wallpapers





Star Wars Rogue One





Underwater Explorer





Halloween Haunted Castle





Rio 2016





Californication Bus





San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。





Tales of the Jazz Age Book Cover





Pikachu Poster





Muscles Magazine





Suicide Squad Poster





Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。





Logo mascot for Saily App





Logo lettermark for PassFold





Logo design for Andre





Logo for Design4Users





Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

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

VA1yScFBJBhNhHRGB56H.jpg

扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。

ovaXdsyrPaed0HeE4zm5.jpg

Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”

VctR5IlQNBoDpbJwcJLc.jpg

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

0geqrBEASUf1X7oW9mT9.jpg

Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955

LpxltRhqNUMvirUVpccL.jpg

Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。

DufX84FkS806RGZG3Z9h.gif

GIF for the Weather App

扁平化设计最基本、最突出的特征包括

1、简单的元素和形状
2、极简风
3、强功能性
4、大胆而易读的排版
5、清晰而严谨的视觉层次
6、关注细节
7、明亮的色彩和对比度明显的视觉感知
8、避免使用纹理、渐变和复杂的样式
9、采用栅格、几何特征以及视觉平衡的原则

qeP04fZumELiPOQPylQl.gif

Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

1、可读性和易读性
2、通过形状、色彩和字体来呈现清晰的视觉层次
3、有效的支持web和移动端的导航设计
4、自适应性,适合响应式设计
5、在各种屏幕上都具备良好的可读性
6、对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。

cdwhRTKKKzQTCOMSgOaP.jpg

设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。

kpAlH27i1HkdQtLqYSjs.jpg

UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。

J026IYeXXjXqJRfqg7WV.gif

Pull To Refresh

AjlEKMzTRyGdsS64PHgo.gif

Portrait vs Landscape interaction

YkCuj9R06IKIHDeeZTKF.gif

GIF for Pull Down

LtclmavCC4OvdOI1w1PS.gif

Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。

UtnQ8qgDoTNbyjrc3FIi.jpg

The set of flat icons

3awr5xisfgmzdOM17goZ.jpg

Flat icons applied in Veggie App

pyTnlhSJbCwx84gFRCHQ.jpg

Flat icons and tabs design for Blog App

YmsaZWied3aRf0EnRBsl.jpg

Flat icons applied in Saily App

xiJCBAVhnGO5IlGfCA9g.jpg

Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。

0e5HIXACkYI4x40JXIE4.gif

Cafe Coupon App

Uao2dHMduQSqpm2ondZe.jpg

Weather App

zELEPuEA4XsybrTbXkp7.jpg

Moneywise App

OUmjWUlwGA8bYqGuRJUV.jpg

Illustration for SwiftyBeaver

Z91xUJPAEijOXQKDXImq.gif

Timeline App

NWKL93uZdpw26auhW5tR.jpg

Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。

pRteKEcssaYy2qEw5O5M.jpg

Free Colorful Wallpapers

1TwpXwmViRlatk52MfHc.jpg

Free Space Wallpapers

LZ41vqQwD8Xfagkwrs1s.jpg

Star Wars Rogue One

G5SOrXdvwnJ5gmGjsznh.jpg

Underwater Explorer

4IfyPXB54v9WOCYycPVq.jpg

Halloween Haunted Castle

SuQj98Ej5OByqrFQ5iSF.jpg

Rio 2016

kaixiZXuuCY8fNbcBuyb.jpg

Californication Bus

z6ycJBBja7HmQYEDcmam.jpg

San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。

0BPIkAWzvhvY63x7bWYN.jpg

Tales of the Jazz Age Book Cover

TinZvOWqGIf87ZE6Iy4h.jpg

Pikachu Poster

vUv6COWehLyjNW3gt4fj.jpg

Muscles Magazine

hH1bt1cBq3X2vekN36fF.jpg

Suicide Squad Poster

qqoTa1uiKUvLemGMrTD7.jpg

Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。

uKLgUYHx5on34JCtxF0l.jpg

Logo mascot for Saily App

Nj9TbBMsRqf9go4JzzHy.jpg

Logo lettermark for PassFold

ixbJlQ45qsNNDoAvyW2I.jpg

Logo design for Andre

xmFaH47d660oDeW4Faqj.jpg

Logo for Design4Users

QNV8zfWKSI7ej73X6eJu.jpg

Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

原文作者:Tubik Studio

原文地址:https://uxplanet.org/flat-design-history-benefits-and-practice-c2b092955f14#.o9x80frf4

翻译:@陈子木

译文地址:http://www.uisdc.com/flat-design-history-benefits
 

2017 年网页设计的十大趋势

资讯xgzx 发表了文章 • 0 个评论 • 67 次浏览 • 2017-01-13 01:06 • 来自相关话题

又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。





随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。





因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。





虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。





随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。





5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。





Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。





通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面





不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!





10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
  查看全部
又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。

148412844951480877.PNG

随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工 Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。

148412845846651370.PNG

因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。

148412844909962354.PNG

虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。

148412844947940988.GIF

随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。

148412844919266719.PNG

5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。

148412845014743223.PNG

Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。

20170113010715.jpg

通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面

148412845299045912.PNG

不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!

20170113010911.jpg

10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

译者:IT程序狮 / 原文作者: Thomas Peham
 

超赞!人气超高的HTML5特效排行榜TOP10

交流xgzx 发表了文章 • 0 个评论 • 65 次浏览 • 2017-01-07 03:42 • 来自相关话题

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票










百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独










简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字










百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上










全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天










什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆










虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿










祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?










“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒










整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久










长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设 查看全部
现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽!

-------------------------

提示:图片只是效果截图,查看完整效果可以扫一扫下面的二维码哦!

1. 粒子特效

星际传奇:这是探索宇宙的门票

20170107034222.jpg


1483601575848.png

百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

2. SVG路径动画

元小望:SVG练习NO.1_描述孤独

1483601575910.jpg


1483601575980.png

简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷!

3. 序列帧动画

大众点评:我们之间只有一个字

1483601575909.jpg


1483601575588.png

百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何?

4. 全线性动画

腾讯UP大会:生命之下,想象之上

1483601575242.jpg


1483601575911.png

全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天

20170107034742.jpg


1483601575438.png

什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆

1483601575297.jpg


1483601575261.png

虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

7. 3D

康师傅:2015最飞羊的新春祝愿

1483601575144.png


1483601575407.png

祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

8. 点击碎屏

大众点评:这个陌生来电你敢接吗?

1483601575693.jpg


1483601575545.png

“点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

9. 长按逐字

韩寒再谈一加:1步1步看清韩寒

1483601575869.jpg


1483601575919.jpg

整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

10.滑动触发

腾讯视频:这一幕你期待已久

1483601575255.jpg


1483601575455.png

长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

来源:优设

减少认知过载:塑造更好的用户体验

交流adminjzw 发表了文章 • 2 个评论 • 115 次浏览 • 2017-01-05 05:18 • 来自相关话题

设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读:

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载:

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆:

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:





搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文:

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源:

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用:

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因:

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作:

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!





(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案:

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。)





让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。





(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案:

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。





(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。





(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。





(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。





(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案:

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。





(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。





许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。





(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法:

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。





(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。





(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面:

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。





(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案:

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。





(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。





任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。





(Image: Slack)

6.不易寻找到的页面:

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。





(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。





(Image: Mojo Yogurt)

解决方法:

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。





1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。





(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。





比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。





(右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性:

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。





SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案:

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。





(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。





附言:

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
  查看全部
设计不是美工,想成为优秀的设计师怎么能不懂点心理学?

导读

文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

作者介绍了认知超载和工作记忆这两个心理学概念在交互设计中的重要作用,并列举了在设计过程中因为忽视了用户的认知特点可能会犯得错误,并给出了相应的解决方案。因为原文里反复提到了上面两个概念,所以我先简单解释一下二者的含义,也方便大家更好的理解文章的内容。

认知超载

认知负荷指在工作记忆中脑力使用的总量。当外界信息量超出大脑接收处理的阈值时,就会出现认知超载的情况。通俗来说,人脑跟电脑一样,处理信息的能力是有极限的,如果超过了一定数量,就会变慢,最后死机,这就是认知超载。

工作记忆

工作记忆指的是一个容量有限的系统,运用听觉、视觉系统来暂时保持和存储外界信息,也叫短期记忆,是外界信息和长期记忆之间的接口。简单来说,工作记忆是长期记忆的先遣小分队。

下面一张图来直观表达外部信息/认知超载/工作记忆三者之间剪不断理还乱的孽缘:

953085.jpg

搞清楚认知超载和工作记忆的概念后就可以正式进入正文了~~~

正文

所谓最好的用户体验就是能让用户毫无察觉,在界面上的操作如行云流水般顺畅。用户们越少去思考界面布局,他们就会越多得将关注点放在要完成的目标上。而作为设计师,你的工作就是帮助用户全神贯注的完成任务而不被多余的因素打扰。

复杂的界面会迫使用户去解决那些无足轻重的问题。用户在填写选项、界面和导航等地方感觉到困惑时就会中断他们思考的过程,将他们的注意力从网络情境拖拽回现实情境。这种过度的思考就被称为认知超载。

认知负荷的科学根源

1980年,澳大利亚教育心理学家John Sweller将认知负荷应用到了教学设计中。他旨在寻找对于各类学生来说最好的知识记忆方式。虽然这些理论最初是应用在教育领域的,但它们也同样适用于交互设计中。接下来我会解释这个技术如何用来减少用户的烦恼。

设计中的应用

著名作家Steve Krug就是将认知负荷理论最广泛的运用到了网页设计当中。他的书“Don't Make Me Think”被许多设计师当做业界圣经。

在他书里提到的观点中,以下我非常赞同的:

1、每一个页面都要清晰明了,因为用户从网站其他页面进入网站的可能性和从首页进入网站的可能性一样大。

2、用户很有可能放弃——也就是说,比起最好的解决方案,采取能够最早解决问题的方案。

3、当一个具有一般互联网经验的用户可以用这套系统来完成他们的目标之时,系统达到可用性就可以了。

4、用户通常会采用一个心态:“要么快要么就去死”。

5、即便从未使用过,屏幕上一个可以看见的home键将会给用户带来安慰。

综合来讲,每当用户浏览网站必须停下来进行思考时,即使一瞬间,他们的工作记忆也是超负荷的。问题类似于: “这个可以点么?” “Home键在哪儿” “我改怎么保存?”,这些都会毁了用户的体验。

认知过载的最主要的几个原因

有很多设计元素都对用户大脑施加了潜在的负荷,与此同时,外界环境中会有更多的因素超出设计师们的控制范围。比方一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰——这些都会消耗他们的工作记忆。

同时,每个用户因为个体差异,会有着不同的工作记忆能力。比起细心谨慎的用户来说,不拘小节的用户会比较容易地将精力集中在你的网站上,而不经常上网的用户会比经常上网的用户思考的要多。即便我们不能量化认知负荷,我们依旧可以归纳出那些经常在设计中出现的错误。下面,我将对最常见的几种错误分类说明并给出解决方案。

1.多余的动作

用户所进行的每一个步骤都会增加到他们的认知负荷中。过多不必要的动作会破坏用户的思路,甚至有可能激怒他们。因为他们的工作记忆都集中在完成特定的目标上,多余的动作会迫使他们投入更多的精力,这就会增加工作记忆的负担。最终就会耗尽用户的耐性,掀桌子走人。

为了使认知负荷最小化,速度和步骤是需要注意的基本事项。用户希望在一种轻快活泼且有目的性的节奏中完成他们的任务,所以撇开一切拖后腿的废物吧!

953101.jpg

(Image: Touch of Modern)

用户希望知道在他们提交邮箱地址之前他们要进入的是什么网站,但Touch of Modern不告诉用户任何信息却要求他们在第一时间进行注册!这个强制且多余的动作将会吓跑许多潜在用户。

解决方案

这里有个找出多余步骤的方法:列出用户必须要完成的每一步任务。举个发邮件的栗子吧:

1、点击“邮件”图标

2、点击到“发送给”的输入框

3、填写邮箱地址

4、点击“主题”输入框

5、等等吧啦吧啦吧…….

点击“邮件”图标 点击到“发送给”的输入框 填写邮箱地址 点击“主题”输入框 等等吧啦吧啦吧…….现在,我们回头来看这些步骤并找出多余的动作。第二步完全可以删除,因为你可以让光标自动停在“发送给”这一栏而不用让用户自己动手点击。

这会为他们减去不必要的麻烦,虽然看起来微不足道,但你所删减的每一步都是胜利。(这和最近非常流行的微交互设计概念有些不谋而合,微小而不引人注意,并为用户提供平滑、自然的感觉。

953102.jpg

让我们来看看谷歌的首页。光标一开始就出现在搜索栏里面,所以用户们需要做的就是打字。这些细小的交互行为可以为整体的体验加分,所以不要忘记它们。

2.过度的刺激

凌乱冗杂的界面会分散用户注意力,增加工作记忆的负荷从而会妨碍他们去实现目标。就像当很多人同时跟你讲话时一样,你会很难集中精力,当网页上充斥着许多照片,动画,图标,广告,字体和刺眼的亮色时,你同样也很难集中注意力。每一种多余的元素,特别是视觉上的抢眼,都会分散用户的注意力。

要记住的是:在用户实现目标之前,工作记忆都需要将额外的刺激进行归类处理,注意力的每一次分散,都会占用用户的一份工作记忆。

953103.gif

(Image: LINGsCARS)

LINGsCARS就是个极端的例子,你可以看到对比强烈的颜色和动效冲击着人们的感官。在电脑屏幕上,即便处于两个不同位置但却同时进行的动效依旧会对用户造成过度刺激,产生威胁。

解决方案

首先,避免一切不必要的元素。我们仅需保留通常情况下必要的元素,来减少加载时间并简化交互体验。一项关于“美学是如何影响用户对网站第一印象”的研究发现,比起视觉复杂的网站,用户更倾向于视觉简易的网站。

同样,你也可以进行内容区分从而达到平衡的效果。过多的同质化内容(只有照片或只有文本)会让用户感到烦躁。所以,将视觉信息加以综合——图片,视频,信息图表综合到一起从而达到页面的和谐,使它便于用户理解。

影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

953104.jpg

(Image: IMDb)

当你总结出一个页面的必要元素,将这些元素以便于用户快速理解的方式组织起来。运用对称式或非对称式布局来展示信息以便于用户更快速的理解,也就是说,让大脑少费劲儿。对称式布局或有趣的非对称布局不仅能带来视觉享受,而且它们的结构可以使界面易于交互。

下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

953106.jpg

(Image: Groupon)

对称式并不仅仅是将相同的布局放在两侧,它是用来平衡视觉重量和视觉方向。从这点来讲,非对称性布局依旧可以表现的具有组织性,就像OTHR所做的那样。

953107.jpg

(Image: OTHR)

减少页面多余的元素仅仅只胜利了一半,革命尚未成功,大家不要忘了,还要将这些元素以简洁明了的布局方式呈现出来。

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

953108.jpg

(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。

953109.jpg

(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。

953110.jpg

许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。

953111.jpg

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

953112.jpg

(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

953113.jpg

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。

953114.jpg

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

953115.jpg

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

953116.jpg

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。

953117.jpg

(Image: Slack)

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

953119.jpg

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。

953120.jpg

(Image: Mojo Yogurt)

解决方法

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

953121.jpg

1.索引卡片上的内容    2.预先设定的分类   3.将索引卡片放置在相应的分类中。

(Image: Rosenfeld Media)

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

953129.jpg

(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。

953135.jpg

比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。

953138.jpg

右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。

953144.jpg

SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。

953146.jpg

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。

953147.jpg

附言

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。
来源:http://www.ui.cn/detail/200862.html
 

一个良好的用户界面应该具备的八个特性

交流adminjzw 发表了文章 • 0 个评论 • 170 次浏览 • 2016-12-02 14:22 • 来自相关话题

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用,对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面,但是究竟什么才是一个良好的界面?一个有价值的用户界面应该具有那些特性?





以下八个特性是一个良好的用户界面所必须的:

清楚、简明、熟悉、易响应、一致、吸引力、高效、宽容

1.  Clear / 清楚的

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。





这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。





不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar / 熟悉

许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。





熟悉就是,跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中

GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive / 易响应

易响应意味着两件事。首先,易响应意味着快速。如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快,反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。





易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈,或许可以把按钮上的文字改成“正在加载…”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent / 一致

之前我谈过关于上下文的重要性,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。





一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive / 吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。





谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient / 高效率

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在,‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效?差不多,但不完全。





你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现?实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving / 宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。





一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动?当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。例如,试图使一个界面清晰,您可能会增加太多的描述和解释,即最终使整个界面变得大而笨重。缩减容量,努力使事情简洁可能产生相反的效果,使东西模糊不清。实现一个完美的平衡需要的技能和时间,解决方案根据不同的案例也并不一样。

来源:思维网 查看全部
当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用,对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面,但是究竟什么才是一个良好的界面?一个有价值的用户界面应该具有那些特性?

201506300904359662.png

以下八个特性是一个良好的用户界面所必须的:

清楚、简明、熟悉、易响应、一致、吸引力、高效、宽容

1.  Clear / 清楚的

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。

201506300904561714.png

这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。

201506300905183234.png

不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar / 熟悉

许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。

20150630090539942.png

熟悉就是,跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中

GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive / 易响应

易响应意味着两件事。首先,易响应意味着快速。如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快,反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。

201506300905572320.png

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈,或许可以把按钮上的文字改成“正在加载…”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent / 一致

之前我谈过关于上下文的重要性,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。

201506300906109987.png

一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive / 吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

201506300906291241.png

谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient / 高效率

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在,‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效?差不多,但不完全。

201506300906456582.png

你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现?实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving / 宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。

201506300907033691.png

一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动?当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。例如,试图使一个界面清晰,您可能会增加太多的描述和解释,即最终使整个界面变得大而笨重。缩减容量,努力使事情简洁可能产生相反的效果,使东西模糊不清。实现一个完美的平衡需要的技能和时间,解决方案根据不同的案例也并不一样。

来源:思维网