2014-2-3 蓝蓝设计的小编
发贴:蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原文:333cn.com
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
时光飞逝,转眼到了2014年,那么在2014年界面设计将会有怎样的发展与变革呢?我试图预测一下。交互/界面设计伴随移动互联网一直保持着告诉的发展,每一年,都有新的东西出现,真令人振奋。
上一代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.动效/转换效果的进一步发展
除了干净、简约,界面还需要能够流畅运转,切换自然。
推荐个在这方面做得不错的应用:Metrics应用,Squarespace出品,非常的简约,而转换效果异常的流畅。
很难用语言去描述,各位不妨下载一下,观察一下。这种效果能带来愉悦的用户体验。
而CSS3在这方面也功能强大,网页设计中的动效相信会越来越多。
8.注重细节
小细节关乎成败,交互设计的小细节会产生蝴蝶效应,影响用户的使用体验。用户的品味越来越高了,界面不但要好看、能用,而且还要有效、有趣、有意思。
比方说Medium这个网站,你可能会忽略一个小细节,在文章标题的后面,会给出文章阅读所需大致时间,比方说“4分钟阅读”,正是众多这样的小细节,打造了Medium的完美阅读体验。
还有一个是iA.net。在阅读他们的博客时,滑动栏会弹出气泡,提示阅读完本文还需多少时间。
iA和Medium做的都是小细节,但是对于阅读体验来说,真的是大优化。如果你时间不够充裕,你又不知道读完本文需要多久时,这些小细节就很有用。
阅读细节只不过是众多细节的一类,如果你能更多的思考用户需求,更细腻的观察界面设计的目的,你会找到很多可以添加的小细节。更细腻的体验,由你来创造。
9.Snapchat引领的崭新内容模式——阅后即焚