UX用户体验设计 ·

UI/UX 设计原则-视觉指示在现实生活中的延伸

视觉指示(Visual Indicators) 可以让某些物品在芸芸众生之中突显出来。它们不会要求用户采取行动,而是让某些值得注意的事项,获得关注的沟通工具。指示不会一直显示,只在某些条件下才会出现。指示可能会用图示、排印风格、放大、颜色变化和动画等方式传达讯息。

在互联网的世界,到处都可以看到指示的范例。比如Gmail ,用回纹针显示带有附件的邮件,还有用黄色五角星标示已经收藏起来的讨论。Todoist 的使用者用勾选框的颜色来区分优先顺序,而且也很容易看出哪些有备忘记录。iOS 的App 在下载更新时,图示会覆盖一层进度指示,让使用者知道还要下载多久。

我喜欢研究UX 和ui界面设计,是因为原则和元素可以延伸出互联网产品本身。我们的周围到处都有像直观功能(affordance) 和符号(signifier) 的指示,传达它们所代表物体的信息。最明显的视觉指示方式是加上文字,例如超市里,把东西标上「打八折!」的标签。

在这篇文章里,我们将举一些现实生活中的例子,没有文字的指示,而是颜色、方向和姿态等来给出视觉指示

状态指示

系统状态提示是Jakob Nielsen的用户界面设计的10个易用性法则之一,其中提到:任何系统都要一直让使用者知道现在发生什么事情。在现实世界,到处可见以视觉指示传达状态的情况,而且用途相似。

物品:信箱

指示:旗标位在「往上」的位置[收信/寄信的状态]

对象:邮差

信息:「嘿,这里有信件要寄!」

物品:餐厅帐单

指示:卡片伸出帐单夹[结帐状态]

对象:服务生

信息:「可以进行结帐了!」

 

物品:飞机引擎

指示:旋转中的螺旋图像[运转/关闭状态]

对象:机场地勤人员

信息:「小心!这架飞机的引擎启动了。」

 

进度指示

还要[增加] 多少,[此物品] 才会[完成]?进度指示用来传达用户距离流程结束还剩多少时间或步骤,这在互联网产品里很常见。而在现实世界,它们以显眼的记号传达某种状态还剩下多少份量或时间,或是还要多少行动。

物品:书

指示:插在某一页的书签[进度]

对象:读者

信息:「这本书你大约已经看完一半啦。」

物品:脚踏车煞车皮

指示:沟槽的消耗量[剩下可用量]

对象:脚踏车骑行者

信息:「上面的沟槽几乎不见了。该换煞车皮咯!」

物品:牛油果

指示:梗底下的颜色[成熟度颜色]

对象:正在购物的人

信息:咖啡色=「我已经熟透了或者被碰伤了。」绿色=「我熟了,可以吃了!」

 

个人喜好

我一直在寻找能够让问题在提出之前就获得答案的创意方式。事先预测人们在寻找的物品,就可以免于造成潜在的困惑。我发现以下指示所传达的讯息,可以不说出任何一个字,就有助于区分其他人和我自己之间的界线。

物品:啤酒罐

指示:把罐子凹下去[所有权]

信息:「这不是你的啤酒。」

补充一下:酒杯上的装饰小物(还有毛巾上的吊饰 )都是相同的手法!

物品:餐厅的茶壶

指示:摆放位置,还有把茶盖斜放[空的/满的状态]

对象:服务生

信息:「茶壶已经空了。请帮我们再倒些水。」

物品:有领子的衬衫

指示:衣架钩子的摆放方式[干净/穿过的状态]

对象:我自己!

信息:钩子向外=「衬衫是干净的。」钩子向内=「这件衬衫至少穿过一次了。」

 

这些指示并不会明讲自己是什么东西。但是,只要在正确的情境之下,这些视觉线索可以帮助使用者辨别出物品的不同之处。至于使用者依赖这些传递信息的行为,则要看当下的需求或最终目标。不管是在互联网或现实世界里,视觉指示都随时在旁提供协助。

参与评论