Saga

对于新手引导那部分不能同意更多

木木:

创新总是很少，互相借鉴总是特别多，我们一起来看看那些被滥用但有时并没那么好的设计，给大家敲响警钟，参考无罪，但是多独立思考，自主设计。

好，进入正题。

问题1：看不懂的图标

因为有限的屏幕空间，似乎尽可能使用图标代替文字来节省空间是个无需考虑的真理。图形显然占用更少的空间，他们无视多语言，而且用户很很习惯，不是么？几乎所有应用都是这么做的。

如果你从来都没有用过谷歌翻译，你认为点击这个鬼画符似的图标会发生什么呢？

还有这个。坨式导航给人眼前一亮的感觉，但是如果是用户不太熟悉的图标，这无疑加大了他们的认知负荷。他们可能会去思考，会花一段时间来学习，来记住这些图标的含义。

对于复杂的功能，应该始终配有合适的文字。在这种情况下，图标仍然很有用，因为图形可以提高菜单的可发现性，可以在界面中形成一个合适的触摸区域，并且能够增加应用的个性。 

小结：基础功能可以用图标来代替，复杂的功能需要有文字（如果你非要使用图标，请进行可用性测试。）

问题2：基于手势的菜单

当2007年苹果推出iPhone时，多点触控技术渐渐成为主流，用户也逐步认知到操作不是只有点击那么单一的，他们还可以进行缩放、滑动等。

关于手势，你需要知道的第一件事就是它总是隐藏的，需要用户去记。就像汉堡菜单的情况：如果你把某个选项藏起来，使用它的人将会变少。

还有，手势有着图标同样的问题：有一些用户熟知的手势操作，比如点击、缩放和滚动，同样在不同的应用中都有需要用户自己去发现并且学习的手势操作。

在Apple Mail里，邮件上右划调出"标记为已读"（“微信”为左划）

同样的手势在Mailbox里确是"将邮件存档"

还有，“摇一摇”也许有不同的功用，iOS里是撤销，Google Maps里是发送反馈。

小结：别忘了手势也是隐藏操作，是需要用户花费精力去记住的东西。假如是在Tinder（美国版陌陌，探探），你也许可以去教会整个世界右划会发生什么——但是也仅限于手势是你应用理念的重要组成部分。

问题3：一打开应用就是引导

引导页，是进来很火热的UX话题，指的是用户与应用的首次邂逅。在大多数情况下，引导页就是给用户显示一些新手指引，解释界面： 

（dcovery应用的引导）
为什么说这是一个糟糕的设计呢？因为许多用户都会跳过这种介绍，他们就是想马上开始使用。就算他们注意到你的引导，他们也会很快在关掉之后就忘得一干二净。（尤其是界面里塞得满满的都是信息）同样重要的是：界面中加入引导并不一定能让用户更易上手，记住:用户界面就像讲笑话，如果需要去解释笑点，那么你懂的。

引导流程有许多其他设计的可能，也会更好用。比如Slack，通过第一屏的交互给用户创造一些情境。 简单地介绍自己，聚焦在给用户带来的好处而不是介绍界面和功能。

还记得Mailbox和Apple Mail的手势区别么？ 我们来看看Mailbox是怎么逐步带用户上路的：用户在真实使用app前，就会看到这个引导的流程，并尝试所有的手势。

小结：在设计半透明遮罩+引导前，先停下来想想用户在首次使用时将会碰到什么。多想想使用场景。大部分的情况下，你总是有更好的方法来欢迎你的用户的。

问题4：创意十足但然并卵的空白页

空白页是常常会被一些经验不足的设计师忽视的地方。然而，它们在整体的用户体验中扮演着重要的角色。

有时设计师看到错误信息或是空白状态是个空的画布时，会认为这是做些创意的绝好机会。以Google Photos的空白页举例：

乍一看，似乎设计得很棒，对么？ 层级清晰，符合规范，图片设计得也很美

但是再一看，你会发现有许多奇怪的地方：

为什么有个搜索按钮在空白页上？难道要在没有内容的内容里搜索么？

第二，界面中最为醒目的元素，图标显然是不能点击的（然而许多用户会尝试去点它）。

提示说我应该去顶上找到“+”，这超奇怪。为什么这个提示里不能带个添加按钮呢？如果是想让用户熟悉添加按钮在哪儿，那为什么不标个箭头指示呢？而让用户自己去找。

上面这个空白状态页的设计显然不能帮助用户理解情景：

什么是集锦？有什么用？为什么我一个都没有？我能做些什么（如果我需要做些什么的话）？

小结：别忘了空白页的设计（类似的还有web上的404页面）不仅是视觉设计和品牌表现，更是可用性的表现。好好的设计一下。

问题5：过度设计

如果最终界面看上去不够让人兴奋，不足以让人觉得与众不同，设计师往往容易觉得自己做错了什么或是少做了什么，他人也时常会以“缺乏设计感”作为评价。其实对于多数类型的产品界面来说，清晰、准确、一目了然的信息呈现方式比过分纠结的视觉风格要重要的多。所谓过度的外观设计，即包括过度复杂的风格化，也包括过度简约，或是其他任何一种忽视产品特性及信息权重而一味追求某种风格的设计思路。

以上图页面当中的导航为例。这个网站默认是不展示导航的，只在左上角提供了一个汉堡包图标，整个首屏就是一张漂亮的照片。如今这种风格的Web页面不在少数，无论其内容类型是不是真正适合，一律在头部放置一张硕大的图片，而重要的导航元素则默认隐藏到了汉堡包图标背后。

可用性是交互设计的基石，可发现性则是产品应该永远向用户敞开的大门。对很多产品来说，全局统一默认呈现的导航结构是界面当中最重要的元素。如果你为了追求某种风格的表达而使用户需要花费时间和注意力才能有幸发现导航菜单，并且还要花费额外的交互成本才能使用，那么用户绝不会爱上你的这种风格表达方式。

除了视觉风格方面的问题以外，在交互层面同样需要对“度”的把握，例如在移动app当中避免过多的定制化手势运用，避免在形式上过于创新以至于对用户的认知负荷带来极大挑战的互动模式，避免对原本适用的设计模式进行无意义的改造。

小结：我们所做的这类设计，最终是为了成就产品、服务用户；至于你设计的界面能在Dribbble上收到多少赞，这事并没那么重要。就像我们用Uber不是因为它界面有多么的好看，而是它能便宜且快捷的帮我们打到车而已。（普通用户可能不太懂界面美观，他们更喜欢实用性）这不代表界面不重要，界面UI就像是餐厅的门面，交互设计就是餐厅里面的服务。

问题6：Material Design的悬浮按钮

错点1：干扰视觉

FABs （Floating Action Button，浮动操作按钮）视觉突出——它确确实实在其它所有UI 原素的上方，例如，添加一个FAB按钮尤其会影响到那些旨在提供的沉浸式体验的应用程序（或屏幕）。Google Photos 就是其中一个例子。

在Gallery 视图中，有提供浮动Search 按钮，但问题是：当我打开照片应用时，我只是想…浏览我的照片。

浮动Search按钮就这样打断了用户沉浸式的体验，变成了app的主要操作目的，诚然，智能搜索是GooglePhotos 提供的独特的功能，但这就意味着需要给它一个顶级的、持续出现的理由吗？（我以为不是的）

错点2：挡住重点区域

如果你看看Photos的截图（紧凑视图下），会意识到右下角那个Search浮动按钮会占据缩略图50% 的空间，很显然已经大到足以覆盖掉照片中一张甚至两张脸。

当你想看看屏幕上最后一行第四个缩略图时，还需要额外的滚动，这甚至不是最坏的情况。

用户木木遇到了一个问题，FAB 按钮掩盖了Favourite按钮以及屏幕上的时间戳，这说明了一个所有App在列表页面都会遇到的问题，当列表中的最后一项不能在进行进一步滚动时，则更加是一个问题。但也不是完全行不通，如果“+”确实是个高频操作的话，对于这点我做出了以下解决方案

（1）条目右边不放重要信息，不放可操作按钮

（2）最后一个条目留出空白区域（貌似安卓比较麻烦）

（3）FAB属于可可动状态，当用户往上翻阅时，FAB往下消失，当用户向下翻阅时候，FAB出现

错点3：可能不经常使用

在做UX设计时，一定要记住二八法则非常有用，其中指出，用户80％的时间将会使用20％的功能，换句话说，我们应该不遗余力的去设计那些用户大部分时间使用的几个重要功能。

FAB 实际上做到了这一点——理论上来讲。但是，如果『进阶操作』没有被用户经常使用呢？以Google的Gmail 应用为例：

Gmail应用的FAB是写邮件按钮，这表明主要操作是创建一封电子邮件。

但是，这是真的吗？

多项研究表明，在移动设备上，至少50%的用户是读邮件，撰写邮件方面，小到没有数据表明。换句话说，作为我们的日常经验也会证实，大多数用户倾向于使用他们的电子邮件 App 来阅读电子邮件。就算是写，主要操作实际上是回复电子邮件，而不是撰写一封新的邮件。

当然，并不是所有采用Material Design 的应用中的FAB都降低了体验，Google Maps 是一个很棒的例子，用户在地图上的主要动作是获得方向，FAB 这样做非常有意义，做了它该做的事。

小结：我们做FAB的时候真的需要考虑到用户的真实使用场景。（不仅是这个，所有的设计都需要）在 Photos 中，用户想『查看』照片；在Gmail中，用户想要『阅读』他们的电子邮件；在 Facebook App中，用户想『看』朋友们的状态......

质疑一切

设计组件和最佳案例仍然是你最好的设计伙伴。但是请谨记应用和应用是不同的，用户和用户也是不同的。某个设计在别人的应用中能很好的解决问题但也许在你的应用中就不行。设计并不是均码内衣。还有，你也不知道人家的应用这么设计的深层原因。

所以请独立思考，自主设计，自己去研究。