2014年界面设计的14个趋势

2014-2-3    蓝蓝设计的小编

发贴:蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的   BS界面设计 、 cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 平面设计服务

原文:333cn.com  

如果您想订阅本博客内容,每天自动发到您的邮箱中,   请点这里 

  时光飞逝,转眼到了2014年,那么在2014年界面设计将会有怎样的发展与变革呢?我试图预测一下。交互/界面设计伴随移动互联网一直保持着告诉的发展,每一年,都有新的东西出现,真令人振奋。


1.应用主题化

  上一代iPhone的硬件,色彩选择非常审慎,依然遵循iPhone传统的黑白。而去年5C的发布,宣告了苹果的一种新选择,他们在iPhone采用了类似iPod一般的鲜活色彩,这在iPhone设备配色上,可不常见。

  经验设备的色彩丰富了,那这对于应用设计又有什么影响呢?迄今为止,还没有设计师针对5C的不同颜色,为一款应用设计不同的主题。过去只有黑白,现在一下有了绿、蓝、黄、红,设计师完全可以针对不同的配色,设计出不同的应用色彩主题,这是个很好的切入点,能够为用户打造出无缝式的用户体验。

  伟大的设计是隐形的,苹果在iOS及其体系中,一直努力的打造一种“无形的、但是又不可缺少、日常使用的”用户体验,第三方应用打造的用户体验往往却不是这样,第三方应用总是需要用户一直与其交互,而毫无疑问,无形的用户体验是一种趋势。第三方应用也同样应该遵循这一理念。

  在Dribbble上,我们很少可以看到多彩的界面设计,往往是黑白主导。但是各位不妨想想,一些具有购买力,买的起5S的用户,却买了5C,这是为什么?因为他们追求那种鲜活的色彩感与年轻化的时尚感。如果你手持一款骚蓝的5C,里面的界面设计却是枯燥的黑白色调,你还会感到有趣吗?

  应用主题化能够让应用更好的适合iPhone这个微生态系统,达成更贴心的用户体验。而目前,却很少有人注意到这一点。

  两个在这方面做得还不错的应用是Fantastical和Tweetbot 3.0。很多应用注意到了为Retina屏而升级,这种根据硬件而升级界面的理念还不错,但是却鲜有应用为了适配设备色彩而升级。而且Fantastical和Tweetbot 3.0只有两种配色方案:深色和浅色。

  今年希望能够看到变化,希望能看到设计师的作品越来越多彩,能够根据硬件设备的配色来调整应用界面的配色,从而达到更适配、更灵活的用户体验。

2.色彩将凸显其功能性

  随着界面设计的发展,整体的设计风格正在向极简的方向前进。越来越要求设计基础,这时候,色彩站出来了。

  在设计中,色彩的心理学作用经常被提及,但是鲜有设计师去认真研究这玩意儿。好看是他们对色彩的唯一要求。然而,我们每天都需要接触应用,应用的色彩毫无疑问的会对我们的体验造成影响。

  USA Today的重设计令人惊艳。色彩承载更多的功能,不同的色彩代表不同的新闻种类,提高报纸的可读性,减少用户的认知负载。

  纸媒已经开始行动,界面设计同样需要形同。当我们迈过拟物设计年代,不再沉溺于元素的写实化时,我们必须把目光转移到色彩上面去。极简设计缺乏具体的实物联系,在隐喻上也不及拟物设计,但是我们可以通过色彩,来提高界面的可用性与用户操作效率。Mailbox和Shake在这方面做得就很棒。(上图Mailbox)

  Mailbox利用颜色来暗示邮件的状态。归档是绿色,删除是红三色,添加提醒是黄色,棕色是制定列表。而红、绿、蓝这三种颜色的使用非常符合人们的日常认知——红绿灯。

  而Elevatr采用了另外一种方式,Elevatr是一款效率应用,能够帮助你规划工作,提出理念和目标,以便日常提醒。在Elevatr中有5中不同的颜色。从淡蓝色到橙色,非常简单,而且步骤很明晰,从理念到市场推广到产品到商业模式再到执行,面面俱到。(下图Elvatr)

  随着界面的不断简化,色彩将承载一部分功能性,让用户更有效率的工作。

3.应用的深度与层次

  随着iOS7的变革——视觉上的扁平化暂且不谈——引发了一种层次感的变革,第三方应用应该遵循这一点。

  屏幕往往是平面的,这其中的界面往往很难体现层级感。但是通过一些小技巧、小暗示,可以打造出层次感。

4.视差

  很多人认为这只不过是小花招,不过我认为视差效果很不错,为界面添加了更多的可能性和趣味性。

  第三条是给界面添加一种视觉层级感,而视差却能为这些层级添加新式交互方式。倘若两者结合,真是潜力无穷

  Hatch为什么精品?除了有神级设计师David Lanham的鼎立相助,层级效果+视差效果的双重配合打造了一种的沉浸式用户体验。

  游戏App Store要12元,但是很值,各位不妨下载下来研究一下David Lanham的设计,和整体的效果。

  网页设计的案例是Medium,在一些文章中会有图像,当你滚动时,图像会变得越来越模糊,

  已经到了2014,很多网页都采用了视差滚动效果,但是移动UI中并不常见。充分发掘你的想象与潜力,尝试一下。

  最明显的例子便是iOS的主屏幕,除了上下左右的“X-Y轴变化”,还提供了一种伪3D的感觉,通过动效,让打开文件夹和应用的感觉像是“Z轴移动

  如果你仔细观察主屏幕,你会发现,3个层面是可以Z轴移动的,壁纸界面、文件夹和应用。

  这只是3D层级的一个小小应用,还有更多的可能性有待探索,至今我尚未看到有应用利用这一特性,但是我估计,这是个很好的挖掘点。

5.模糊,更多的模糊

  无需过多解释,越来越多的界面设计采用了模糊背景。这是一种符合逻辑且体验自然的设计解决方案,能够保持界面简约,同时保持元素的层级感,应该也是iOS7的初衷吧。

  Rdio在这方面比iOS7先行一步。漂亮的专辑封面模糊为背景,显示播放列表,既能体现美学造诣,又能体现实际功能感。

  很多设计师只是为了模糊而模糊,却没有考虑到模糊对于层级感塑造的重要性,这一点值得注意。

  随着CSS3的深入学习,相信模糊效果会更容易打造。

6.导航系统的进一步实验


Navicon式导航

  侧拉菜单导航?顶部固定导航?Navicon导航?

  iOS7对于界面设计的冲击可不止是扁平化,想想上文提到的层级感、模糊效果、视差,这些都可以作为导航的辅助手段。未来的趋势是没有导航,自然交互。诸君可尽情思考,如何利用界面效果更自然的引导用户,而不是利用文本、标签、图标来导航。

7.动效/转换效果的进一步发展

passit-final.gif


  除了干净、简约,界面还需要能够流畅运转,切换自然。

  推荐个在这方面做得不错的应用:Metrics应用,Squarespace出品,非常的简约,而转换效果异常的流畅。

  很难用语言去描述,各位不妨下载一下,观察一下。这种效果能带来愉悦的用户体验。

  而CSS3在这方面也功能强大,网页设计中的动效相信会越来越多。

8.注重细节

  小细节关乎成败,交互设计的小细节会产生蝴蝶效应,影响用户的使用体验。用户的品味越来越高了,界面不但要好看、能用,而且还要有效、有趣、有意思。

  比方说Medium这个网站,你可能会忽略一个小细节,在文章标题的后面,会给出文章阅读所需大致时间,比方说“4分钟阅读”,正是众多这样的小细节,打造了Medium的完美阅读体验。

  还有一个是iA.net。在阅读他们的博客时,滑动栏会弹出气泡,提示阅读完本文还需多少时间。


  iA和Medium做的都是小细节,但是对于阅读体验来说,真的是大优化。如果你时间不够充裕,你又不知道读完本文需要多久时,这些小细节就很有用。

  阅读细节只不过是众多细节的一类,如果你能更多的思考用户需求,更细腻的观察界面设计的目的,你会找到很多可以添加的小细节。更细腻的体验,由你来创造。

9.Snapchat引领的崭新内容模式——阅后即焚

  往事不堪回首,翻开你的QQ空间、人人、豆瓣,看看几年前的照片和博文,恨不得钻到墙眼里面去。于是你果断点击了删除,避免让这些黑历史被人发现。

  但是有用吗?一些工具还是能够查看之前的页面存档。

10.传感器设计

  越来越多的硬件设备加入了传感器,不充分利用起来可真是浪费。

  5S的A7芯片导致了手机计算功能的跃进,而且能与传感器更好的结合。

  最出名的可能是Moves,告诉你每天的活动量。让你的日常生活充满了故事性,提供分析。通过分析,你可以分析自己的每一天,然后作出调整,改善健康。

  而智能手表也参与了进来,更多的传感器整合入其中,能够阅读手机上的信息。

  可穿戴设备这一热点趋势,将使得更多的设计师关注和传感器有关的设计。

  谁没有青葱岁月,但是人都会成长,审视过去会觉得很尴尬。传统的内容模式未免有些不合时宜了。

  而Snapchat开启了一种新的内容模式,理念很简约:拍照,加注释,限定时间,发布。超过限定时间,照片就自动删除了。你那些贱朋友再也黑不到你的黑历史,再也无法再网上公开黑你了!

  而另外一种是Peek应用,和Snapchat相比,更注重文本信息的隐私保护,同样的阅后即焚。

11.专用页面

  我自己也不知道这种趋势是怎么来的,但是这个我颇为喜欢。这个理念是,当网站拥有一些不错的优质内容时,它不会按照传统的方式发表。而是专门给这些内容设计一个页面,专门摆放此类内容。

  Snowfall,Ny Times,SB Nation都采用了这种模式,有兴趣可以看看SB Nation2013的年度专题页。

  这是一种很有趣的实验,能够打造有特点的故事,能够持续搜集某一类信息。而且整个页面还从属于网站。

12.浏览器与系统的进一步整合

  OS X Mavericks中再度提倡了一种老式理念,但是采用了新的执行方法。就是能够通过Safari推送网站的内容更新通知。一旦新内容发布时,用户就能接受到通知。

  我每天都看的网站有两个:9to5 Mac和NY Time。而现在只需要通过小Safari对话框提示,就能接受信息通知。非常便捷。

  其实没什么特别的,和RSS阅读器差不多,很高兴在系统级界面中看到这点改动,确实优化了很大一部分人的使用体验。

13.产品配合应用

  你发现没有,现在但凡是有点档次的公司,推出产品时,都会相应的推出应用。

  我相信这个趋势会在2014年持续下去。

  当然,也有反其道行之的,推出产品以配合固有的应用。比如说FiftyThree的推出的Pencil,就是为了配合Paper 应用。

  硬件结合软件,整合出更美好的使用体验。本来就应该这样。

  不过目前我看到推出产品以配合应用的只有FiftyThree出的Pencil产品,这是个热点,不容错过。

14.完完全全的体验 

  综上所述,不管是技术、理念、交互设计、产品设计,其实都是为了用户体验而量身打造。

  如果希望让他们的硬件隐形,但用户依然可以与之交互。而Dieter Rams也希望能够打造隐形的设计。

  过去的十年里,一切均是围绕体验展开。沉浸式、无干扰、隐形,一直是这几年来体验设计的关键词。

  所以,2014年界面设计的终极趋势是——围绕用户体验而展开的设计。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档