直观、连贯、流畅

INFO

YTUI 结合了我多年来对 UI/UX 的心得，以及对产品与技术的理解，是一次思想、经验、技术的汇聚。
致力让用户收获直观、连贯、流畅的使用体验。
好的设计，从理念到实践，处处是细节。

何为 YTUI「易他的用户界面」？

直观、连贯、流畅。

一、直观

YTUI 的设计初衷，是减少用户的推理和思考过程，任何情况下都能做到一目了然。

清晰的层级

同一屏幕中，用户能够直接体现各层级的叠加关系。 每一层级都有其独特的样式，用户能从外观上辨认出各个层级。 同一屏幕（Screen）范围内最多有三个层级。 各层级依据固定的顺序出现：Page > Layer > Box。

一致的后退逻辑

要做到一致的后退逻辑，核心是拥有一条以 UI 历史记录为基础的「交互链」。

若用户单次/多次触发后退功能：

• 同一层级下的内容（例如多个同级页面），可以按先后出现的次序，依次后退至上一次展现的内容。
• 同一屏幕内的层级，用户可以按相同的操作路径，逐级后退至上一层级。

后退功能的触发点，可以是各层级顶部区域的返回按钮，也可以是安卓系统的返回键。 无论后退功能以何种形态展现和触发，它的行为逻辑都是一致的，即遵循交互链一步一步地退回。

友好直观的提示

当用户执行了某项操作，此后的错误信息或提示信息，应在触发该项操作的元素原位置或附近显示。 出现提示后，该提示应一直保持显示状态，在用户主动进行其它操作前，不自动消失。 具有相关性的提示，应集中在同一区域内显示。严禁在屏幕各处乱放提示的情况。

强化可交互元素

强化可交互元素，是为了让用户更直观的了解到 UI 上有哪些可交互元素。 具体来说，最终要的达到的效果是：用户只观察某元素的外观，不借助上下文作推测，不借助鼠标指针等工具经过时的效果，也可知道该元素是否可以交互（例如点击/触摸）。

一个可交互的元素，具备以下一种或多种特性：

• 外观为区块状（例如与父元素背景色不同）。
• 文字为偏蓝色或主题色，且明显区别于网页正文颜色。
• 带有指示性或功能性图标。

二、连贯

连贯的变化

当用户主动与某元素进行交互时，能看到作用于该元素的连贯变化。 例如：用户点击一个 "查看详情" 的按钮后，能看到该按钮连贯变化成一个含有详情内容的弹框。

继续看个造成割裂感的反例：某用户点击按钮后，页面忽然蹦出了一个弹框或抽屉，该用户下意识迟疑了一下。

当然单从可用性的角度来出发，这样的交互其实已经足够了。用户可以通过推理得出：

这个东西的出现，是因为我刚才点击了查看详情的按钮，所以该东西里面的内容就是我想要找的。好，那我接下来阅读一下里面的内容，看是不是跟我推理的一样。

若用户经过多次的训练，该推理可以完全不费时，成为一种直觉和本能，不会有过多割裂感。

但是，此处引发思考一：

若用户属于以下特性的群体（例如较晚接触互联网时代的前辈们）：

• 不常接触虚拟用户界面，不常与 UI 打交道。
• 不擅于用手机等电子设备。

他们在本反例场景中，是否会有割裂感？是否会顿挫几秒无所适从？

思考二：

如何在不"训练"用户的情况下，消除这种割裂感，让用户感觉得心应手？

连贯的切换

无论是父子层级的切换，还是同级之间切换，必然需要有关键元素作为触发点。

因此 UI 在切换时，应着重强调关键元素：

• 若切换父子层级内容，直接通过变换关键元素的方式，形成连贯的切换效果。
• 若切换同级内容，则需突出显示两个同级内容的桥接点，达成两个同级内容间的连贯切换。

思考以下场景

如果用户中途有事，中断了一段时间再使用手机，还会记得屏幕上显示的某个弹窗或抽屉，之前是怎么打开如何打开的吗？以下是该用户此时的心里对话：

"如果我现在关闭了它，找不回来怎么办？"

"好，先关掉试试吧。"

（此时弹窗已关闭，UI 上显示的是一个充满内容的的页面）

"糟糕，现在页面上那么多链接，那么多按钮，那么多可交互元素，我到底是点击哪里，才能重新打开刚看到的内容啊？"

（用户崩溃中......）

三、流畅

影响流畅感受的关键因素

用户是否有流畅的感受，与其焦虑感密切相关。

减少用户在使用 UI 时的焦虑感，是提高流畅度的关键。

用户的焦虑感来自于两个方面：

• 对于时间感知上的焦虑。例如页面空白很长时间、页面卡顿、网络加载很慢等等。
• 对于陌生事物的情绪上的焦虑。例如界面很复杂盯了半天才找到需要的东西、某功能的逻辑很复杂不知道怎么用等等。