一直在等

ui设计之路:

“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义。”——保罗·兰德(Paul Rand)

7.让次要操作在次要位置

 画面在包含一个主要动作的同时,可以有多个次要动作,但尽量不要让它们喧宾夺主!就像你写一篇文章的目的,是为了让人可以阅读可以了解,而不是为了人们能够把它转载在社交网络上……让次要得动作放在次要的位置,削减它们的视觉冲击力,或是在主要动作完成后再显示它们。

 8.提供自然而然的下一步操作

 很少有交互是故意被放在最后的,所以要为用户精心设计交互的下一步操作。你要预期用户下一步的交互是怎样的,并且通过设计将其实现。就像我们的日常谈话,要为深入交谈开一个好头。当用户已经完成要做的操作后,别让它们不知所措的停留在那……提供自然而然的下一步,帮助他们完成操作。

 9.界面外观遵循用户行为

 人总是对符合期望的行为最感舒适。当某人或某件事的行为始终按照我们所期望的那样去进行时,我们会感觉到和他们之间的关系不错。因此,设计出来的元素,看起来,应该像它们本身特征一样。在具体操作中,这意味着,用户只要看到这个界面元素,就应该能猜测出这个元素是做什么的。如果看起来是个按钮,它就应该有按钮的功能,不要在基本的交互问题上耍小聪明……把你的创造力留到更高层次的需求上吧。

 10.前后一致的重要性

 遵循上一规则,画面中,视觉元素的外观不应该是一样的,除非他们的功能相近。如果是功能相同或相近的元素,那么它们外观就应该是类似的,反之,如果元素各自的功能不同,那么它们的外观也应该不同。为了保持一致性,新手设计师通常在会把相同的视觉处理 (重用代码) 方式用在,应该用不同的视觉处理方式的元素上。

 11.强烈的视觉层次会让效果更好

 强烈的视觉层次会让画面有清晰的浏览次序。也就是说,当用户每次都用相同的顺序浏览同样的东西,微小的视觉层次令使用者不知道哪里才是需要注意的重点,最后只会让用户感到困惑和混乱。在不断变化的设计环境中,保持强烈的视觉层次是很困难的,因为所有元素视觉上的重量是相对的:当所有文字都是粗体,那就没有所谓的"粗体"了。如果要在画面中添加一个视觉强烈的元素时,设计者应该要重新调整页面上所有元素的重量分配,来达到强烈视觉层次的效果。大多数人都不会注意到视觉重量这一点,但它其实是强化(弱化)设计的最简单的方法。

 12.巧妙的布局减轻用户认知负担

 正如约翰 前田(John Maeda)在他《Simplicity》书中所说的,恰当地编排画面上的元素能够以少见多,帮助他人更加快速简单地理解你设计的界面,因为你已经用你的设计清楚的说明了她们彼此之间的关系。用方位和方向上的编排可以自然地将相同的元素联系在一起。通过对内容的巧妙编排,可以减轻用户的认知负担,他们不再需要花时间去思考元素之间的关联,因为你已经做好了。不要迫使用户去思考……用你的设计直接呈现给他们看。

 13.重点不要总是用颜色来强调

物体的色彩会随光线改变而改变。艳阳高照下与夕阳西下时,同一棵树,也会呈现不同的景象。在自然世界中,色彩很容易受环境影响而改变,所以在设计时,色彩不应该占很大的比重。作为辅助,我们可以用高亮的颜色,吸引注意力,但这不是区别这些的唯一方法。在长篇阅读或是长时间对着电脑屏幕的情况下,可以使用柔和的背景,降低亮度,当然也可用活泼亮丽的色彩当背景,但是要确保适合你的读者。

 

关于动效设计:给物体的移动增加细节

嘀——嘀嘀:

刚开始做动效的时候总会觉得自己做出来的效果“硬邦邦”的,很假。后来慢慢做多了之后也总结了一些经验。目前我在光线和粒子的运用上还比较一般,对于运动的动效还有点感觉。另外以运动为主的动效运用范围也更广阔,游戏和互联网领域都会用到。


所以这次以最简单的位移运动为例分享一下吧。



 




第一层:遵循基本的物理规律


1.起步加速——匀速——减速——停止


 


2.回弹


 


这两者是最常用的做法,应用在频率较高、重要性较低的辅助性动效较多,如面板的出现。前者的存在感相对弱一点,适合平滑的动效风格和体量感较轻的视觉元素;而后者由于出现了运动方向的改变,所以存在感更强,适合活泼、Q弹、体量感更强的界面风格。


举个例:科幻风格的全息投影面板出现的时候一般就不会用回弹的动效,因为全息投影的面板是没有重量的,所以不会出现走过头再弹回来的情况。


 


第二层:增加更丰富的物理规律


1.多次回弹


 


在回弹的基础上再加回弹,风格显得更Q弹,在动画最后的抖动也会进一步加强这个元素的存在感。




2.通过倾斜来做回弹




这个动画其实是把物体的材质也考虑到动效里去了,来回的倾斜呈现出一种很Q弹的材质,比起单纯的整体运动而言,倾斜的加入可以使动画更活泼。


 


3.翻转






这三个动画都描述了一种比较硬但重量较轻的材质,翻转的最后落地的那一下会对这个元素有一个强调的作用


 


小结:


这几个动画对物理规律应用得更多,动画的存在感也更强烈,这种程度的动效适合作为整个屏幕的焦点,用到非循环播放的动效中,如升级动画


 


第三层:增加故事性


如果说前两层是要求设计师对生活中物体的运动规律有细心的观察然后复刻到动效设计中的话,第三层则需要在设计中增加创意,把动效的各个控件看做演员,为他们注入性格。


 


1.灵感来自很多动画里的奔跑过程,尤其是猫和老鼠


 




2.灵感来自某个舞蹈动作


 




3.这个动效里我尝试增加Y轴上的运动,并试图把跳跃的动作做得轻盈一点,但没有运动曲线的帮助似乎还是没能达到十分轻盈的感觉


 




4.设计这个动效时,我在脑子里给这个方块加了很多重量,然后自己脑补一下要把这么重的一块东西移到那个位置,会是怎样的过程


 




小结:


增加了故事性的动效不一定非常有存在感,这和设计师注入到动效里的具体是什么故事以及动效和界面设计的结合度有关:


1.在游戏中我们经常会设计一些故事性较强的界面(例如炉石的匹配对手界面),在这样的界面中,故事性和界面设计紧密结合,动效主要是为故事性服务的,可能只要做到合理的物理规律就已经能很好地符合界面的故事性;

2.而在另外一些界面中,界面本身没有设计太多的故事性,但又需要一些细节去丰满整个界面,这时就需要动效本身的故事性。比较典型的例子是loading,或者一些按钮上的小动效。



----


这篇只是讲了怎么增加细节,但什么时候做到第一层就“够了”,什么时候要做第二第三层,如何根据不同的使用场景和界面风格去选择不同程度的动效,这还是需要更深入地探讨的。对于这一点,我自己最近在尝试用“节奏”的概念去整理,整出个结果再写新东西吧。