Day 16. UX/UI 设计流程之四: Wireflow,并以 Axure RP 实作 (下)

我们平常可能不太会注意到,ajax 网页、APP 里的每一个页面,其实不是单一静态的,而是伴随着多种不同状态。

想想看当我们在用 Line 传讯息的时候,网路突然断掉,此时画面是不是会有网路连线不稳的提示让使用者知道?在使用 Facebook 观看自己首页墙时,若向下拉,是不是也会有转圈的小动图,提示我们现在正在读取新的资料中?

这些其实都是在同一个页面上,但需多种状态的表现。由於它就像在同一个页面上不断堆叠多个状态,所以设计师们又把它称做 UI Stack。

UI stack

在画 Wireflow 的时候,我们都需要注意每个 Wireframe 页面,都会需要考量到基本至少六种状态应该如何呈现,这个阶段就先规划好,在之後 GUI 设计时才能有所依据。
https://ithelp.ithome.com.tw/upload/images/20211001/20105528EoZlUCWSOA.png

这六种基本状态分别是:

(1) 理想状态 (Ideal State)

  • 充满八、九成资料,一般情况下的状态
  • 在做个别 Wireframe 设计最一开始时,最容易想到的画面

(2) 空白状态 (Empty State)

  • 使用者第一次进入,尚无资料时。例如:相簿第一次使用,没有任何照片时
  • 使用者自己将所有资料都删除之後
  • 查询或搜寻不到相关资料的时候。例如:用 Linkin 查无此人时。

(3) 极限状态 (Max/Min State)

  • 资料极多的时候,超过之後版面如何呈现。例如 google 查的关键字,当回传结果太多时。
  • 资料最大值/最小值的时候,画面如何呈现。例如部落格每篇文章的标题字数太多时,会以 "…" 取代最後面的字。

(4) 错误状态 (Error State)

  • 任何事件导致出错时的状态如何呈现。例如 Youtube 影片版权有问题的黑屏。
  • 要怎麽翻译成使用者懂的概念回应让他知道现在发生什麽事,有什麽他能做的事?例如当帐号密码连续输入错误时,提示使用者可以使用「忘记密码」功能。

(5) 读取中状态 (Loading State)

  • 当读取比较花时间的时候,不让使用者以为故障了的系统回馈设计。
  • 当读取时间太久时,降低使用者不耐烦的呈现手法

(6) 局部资料状态 (Partial State)

  • 资料只有一、二成时的状态
  • 优雅引导使用者让他知道如何让资料更充足。例如 有趣简单的插图式引导。
  • 诱发动机让使用者有欲望补足资料。例如不经易地暗示理想状态画面的样子

绘制各种状态的 Wireframe 例子供大家参考如下:
https://ithelp.ithome.com.tw/upload/images/20211001/20105528BAEZgAGLFZ.png

特定媒介的额外状态描述

除了上述六种状态外,特定的载体媒介,可能还会有它自己额外专属的互动状态。比如网页媒介的悬停 (Hover)、智慧音箱的声音状态 、VR 机器的凝视 (gaze) 等等。当要设计的 Wireflow 不是行动装置的时候,要特别注意这些额外的状态该如何呈现,应该也需要一起规划至 Wireflow 中。

Wireflow 的重要性

Wireflow 是产品的关键蓝图,一般以单纯的线框及基本形状来绘制。有了它,就算没有美美的精稿 GUI 设计,也足以向利害关系人表达产品是怎麽让使用者操作、如何与使用者互动的。在极端情况下,甚至工程师也已经可以使用原生元件,直接透过 Wireflow 搭建出产品雏型,进行 MVP 开发了呢!不过一般正常情况下,还是会往下一个设计阶段走,也就是 GUI (Graphic User Interface)。


<<:  [Day 16] 从头开始-从入门到 Swift 语法梳理

>>:  Day 16: 物件导向设计、函数式设计 (待改进中... )

资料驱动的元件

资料驱动绘制 (Model-driven Rendering) 英雄列表范例已经初步展示过 List...

[2020铁人赛Day30]糊里糊涂Python就上手-体验 OpenCV 人脸辨识

今日目标 轻松小品,来点 OpenCV 人脸辨识的实作 What is OpenCV? OpenCV...

Render Props ( Day20 )

「render prop」这个词指的是一种用一个其值为函式的 prop 来在 React comp...

卡夫卡的藏书阁【Book6】- Kafka 实作新增 Topic

IT 这行真的学无止境,理想上可以主动追技术,比被技术追上好 “I am free and tha...

day 4 I'm your father, coroutine父子继承关系

上面讲到job会由系统分配,但为什麽我们又能把job当作参数传入coroutine呢? 继承 在前面...