不仅仅需要设想理想的场景

当一名产品设计师没有考虑到某种场景时,整个产品的 UI 会变得"awkward". 这意味着沿着某条线遵循的逻辑规则被打破了。

这个规则就是"UI Stack".

The UI Stack

ui-stack.jpg

基本上,你处理的每个产品的页面都有5个状态,如上图所示。

遵循 UI Stack 的规则和5个状态,可以设计出人性化的一致性界面。

Ideal State

理想的页面状态是我们首次建立的,因为这是我们想要给用户看得最多的状态。

Empty State

空白状态有3个版本,第一是用户第一次使用你的产品所看到的内容;第二是当用户清除屏幕中的数据时所看到的;第三是没有任何东西出现,比如,搜索结果。大多数时候,处理这种状态,要么出格,要么没有应对措施。

用户第一次使用产品时,你需要用直白的语言鼓励他进行下一步操作,并让他了解下一步操作的结果。还可以利用产品本身的内容指导用户怎么做。或者,检测用户的操作进程,并适当回应,比如用户停留某页面太长时间,可以在线询问是否需要帮助。

第二种空白状态就是当用户清空数据,这时候需要你奖赏用户或者引导用户进一步操作。第三种是有时候用户在搜索时,没有出现结果。我们需要避免出现这样的情况,搜不到时可以提供另一个选项。

Error State
用户在操作过程中,也会偶然出现错误提示。特别是在用户输入表单信息时,要做到保护用户输入内容的完整安全。另外出现的错误提示要易懂,下图windows是个反例。

Partical State
除了出现理想状态和错误状态外,有时还会出现部分状态,例如只显示几个数据或图片,你要避免用户在个这阶段退出产品。

Loading State
还有网页在 loading 状态时,可以用 skeleton screens 代替空白区域。另外可以用工程技巧,提升用户对产品的感知速度,比如点赞这个交互动作。

所以不仅要设计出理想的状态,还要应对其它四种状态,并相互间流畅地运做。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,870评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,192评论 4 61
  • 前段时间,新闻客户端“今日头条”被各种媒体(传统媒体、网络媒体)围攻,争议的焦点是版权和所谓智能推荐。传统媒体当然...
    赵赛坡阅读 743评论 2 16
  • 在现场,会引发全场共鸣的,依然是那些老歌。看来我的男神还是不可避免地吃老本儿了,没关系,连太阳都分盛衰期呢,像雨果...
    杨一同学阅读 295评论 0 2
  • 天马的商家们 谙熟中国人喜好热闹的特点 毫不吝啬的将临街的音响 开到最大
    绿毛水怪T阅读 274评论 0 0