我们平常可能不太会注意到,ajax 网页、APP 里的每一个页面,其实不是单一静态的,而是伴随着多种不同状态。
想想看当我们在用 Line 传讯息的时候,网路突然断掉,此时画面是不是会有网路连线不稳的提示让使用者知道?在使用 Facebook 观看自己首页墙时,若向下拉,是不是也会有转圈的小动图,提示我们现在正在读取新的资料中?
这些其实都是在同一个页面上,但需多种状态的表现。由於它就像在同一个页面上不断堆叠多个状态,所以设计师们又把它称做 UI Stack。
在画 Wireflow 的时候,我们都需要注意每个 Wireframe 页面,都会需要考量到基本至少六种状态应该如何呈现,这个阶段就先规划好,在之後 GUI 设计时才能有所依据。
这六种基本状态分别是:
(1) 理想状态 (Ideal State)
(2) 空白状态 (Empty State)
(3) 极限状态 (Max/Min State)
(4) 错误状态 (Error State)
(5) 读取中状态 (Loading State)
(6) 局部资料状态 (Partial State)
绘制各种状态的 Wireframe 例子供大家参考如下:
除了上述六种状态外,特定的载体媒介,可能还会有它自己额外专属的互动状态。比如网页媒介的悬停 (Hover)、智慧音箱的声音状态 、VR 机器的凝视 (gaze) 等等。当要设计的 Wireflow 不是行动装置的时候,要特别注意这些额外的状态该如何呈现,应该也需要一起规划至 Wireflow 中。
Wireflow 是产品的关键蓝图,一般以单纯的线框及基本形状来绘制。有了它,就算没有美美的精稿 GUI 设计,也足以向利害关系人表达产品是怎麽让使用者操作、如何与使用者互动的。在极端情况下,甚至工程师也已经可以使用原生元件,直接透过 Wireflow 搭建出产品雏型,进行 MVP 开发了呢!不过一般正常情况下,还是会往下一个设计阶段走,也就是 GUI (Graphic User Interface)。
<<: [Day 16] 从头开始-从入门到 Swift 语法梳理
>>: Day 16: 物件导向设计、函数式设计 (待改进中... )
资料驱动绘制 (Model-driven Rendering) 英雄列表范例已经初步展示过 List...
今日目标 轻松小品,来点 OpenCV 人脸辨识的实作 What is OpenCV? OpenCV...
「render prop」这个词指的是一种用一个其值为函式的 prop 来在 React comp...
IT 这行真的学无止境,理想上可以主动追技术,比被技术追上好 “I am free and tha...
上面讲到job会由系统分配,但为什麽我们又能把job当作参数传入coroutine呢? 继承 在前面...