界面设计

本文将表述我对这个问题的回答——“作为体验或界面设计师，如何得知什么时候、什么地方用动效来提升可用性？”Z Yuhan：这篇文章真的超级难翻译啊，原文的描绘非常细腻隐晦，大部分句子根本没法直译，只能理解后用中文的表达方式重新造句，幸好我的翻译水平也有进步啦～大家要是发现有什么问题，不论是翻译还是错字，欢迎评论我指正 : )

这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

约在10年之前，在用户界面使用的动效，大部分是一些广告和闪烁的弹窗。然而到了今天，已经发生了翻天覆地的变化。设计不仅是外形和感觉，设计关乎如何运作。

只要你的设计涉及到人与界面之间的交互，这八大规则在设计过程中至关重要。“这个功能减轻了焦虑，因为用户知道即便操作失误，之前的操作也可以被撤销，鼓励用户去大胆放手探索。”

对于设计师来说，文字是一个可以很好提升产品用户体验的武器，希望这篇文章能够给各位设计师带来收获。

之前写过类似的文章，想写的东西太多，结果什么都没讲明白。所以重新写一套入门的教程，分「了解交互设计」、「交互设计的职能范围」、「交互设计的常用方法」……几个章节把我对这门行业的理解和经验做个分享。

这两年随着自媒体时代到来，越来越多的设计师开始注重个人品牌运营，比如发作品到各大平台，总结项目经验，翻译国外文章等等。无论哪种方式，对提升国内设计学习氛围都大有裨益。

WWDC 2017 上发布了全新的 iOS 11 ，系统本身在设计上就有了诸多变化和更新：信息更扁平的控制中心、WP 风格的大标题、截图编辑功能、相机直扫二维码等等。不过，作为一名电商设计师和 App 爱好者，此次更新最让我感兴趣的莫过于 App Store 的“改头换面”了。

空状态，或称零数据状态，很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下，因为从表现上来看，空状态给人的感觉就是临时性的，有些微不足道。“用户会尝试多个同类app，然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app，一旦用户决定保留超过7天，那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候，人们放弃一款产品的原因其实都是我们可控的，例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

在很多人眼里，Google的产品一直与优雅设计无关。但现在，搜索巨人比其他互联网巨头都懂得如何打造一款设计优雅的软件（互联网）产品，如果你不相信这个判断，不妨放下你对苹果产品的钟爱，做个深呼吸，好，现在我们来对比一下Google与苹果在移动操作系统的设计：Android vs iOS。

在设计过程中，如何最佳地搭配颜色，诱导用户视线？是不是在为图标选择什么颜色而烦恼，反反复复地尝试，总不能达到想要的效果。是不是总在羡慕“别人家的设计”，而苦于无从下手？其实所有的颜色都有些小规律，今天@Micu设计 就和大家聊一聊“色”。

注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂弹跳背后的物理理论：球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球随着升高逐渐减低速度，直到它耗费掉所有的反作用力，最终到达反弹的最高点。它在顶部停留一微秒，直到重力把它拉下来，使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤，这样我们就可以重新创造它。注：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来，从而更容易读懂动画。注意：这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告诉你，当一个物体开始减速然后加速时，这一过程被称为渐慢(ease-out)，因为它的姿态在“缓慢输出”。但是，在软件产业（CSS动画，Adobe Edge等），这一过程被称为渐快(ease in)！我不确定这一不同之处是怎么来的，但是不幸的是，这就是它的形成过程。所以，当你在阅读一篇文章时，而这篇文章把它们把“渐快”称为“渐慢”，那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
0.2  :  68
0.3  : 102
0.4  : 136
0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
0.2  :  10
0.3  :  36
0.4  :  87
0.5  : 170注意：你会在软件中看到更多用于设置缓冲的选项，例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择，但是概念是相同的。只需记住——缓和的程度越高，你就会得到更多的缓和度。并不是规则，只是工具（There are no rules. Only tools）- Glenn Vilppu

设计风格的配色除了要注意男女性的喜好差别，还应该重视通过冷暖色彩+明暗亮度搭配表现给用户的印象和心理感受。详见《色彩在移动APP设计中的应用》

在上篇《APP界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！

控件作为组织界面最基础的元素，相信大家都不会陌生，今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面，再用三大输入法的控件作为实际案例解说，全文干货满满，来收！扩大词汇量有助于提高你在某种语言上的表达能力，扩大「设计词汇量」可以帮助你更好地进行设计。但要记住，界面设计真正的艺术在于：解决正确的问题。

“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体（文字的精确定义）、看不见的宏观文字布局（文字的运用方式）、还有由交互设计和信息架构组成的隐形世界。最少的输入，最丰富的输出，界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样，我们并不会试图找到完美的解决方案，但会寻找最佳的两全之策。”