现实生活中的视觉符号

将 UX 和界面设计原则扩展到数字产品之外

视觉符号(Visual indicators)用于使物体更加醒目,它们不需要用户采取主动行动,而是充当一种「通信工具」来提示需要注意的事情。

视觉符号并不总是存在,它们一般会在某些特定条件下出现。为了完成传达,符号可以采用图标、印刷风格、尺寸、颜色变化或者动画等形式。

在数字世界中,符号无处不见。比如:

  • Gmail 使用回形针图标来显示包含附件的邮件,黄色星号用于标记保存
  • Todoist 用户通过复选框的颜色指示项目的优先级,并能轻易地看到评论历史记录
  • 更新 App 时,进度指示器覆盖 iOS 上的 App 图标,以此显示剩余下载时间

UX 和 界面设计工作中很有趣的一点是,它的原理和元素不仅限于数字产品,在我们周围的世界同样有迹可循。例如,可视指示符可以用来传达有关它们所代表的实体信息,最常见的一种方式是「添加文本」,超市中促销用的「降价 20%」就是一例。

当然,对于非文本指示符,还有使用颜色、方向甚至移动来进行信息传达, 而不仅仅是添加文字。


状态

「系统状态的可见性」是 Jakob Nielsen 10 种用户界面设计可用性启发之一,其中规定任何系统应该始终让用户了解正在发生的事情。

在现实物理世界中也具有类似的,视觉符号是沟通的常用手段。

  • 项目: 邮箱

  • 符号: 标记在「向上」的位置

  • 对象: 邮政工作者

  • 信息: 这里有邮件需要收集

  • 项目: 餐厅账单

  • 符号: 卡片出现在账单钱包 [支付状态]

  • 对象: 等待员工

  • 信息: 付款方式已准备好

  • 项目: 飞机涡轮发动机

  • 符号: 运动中的螺旋图形 [开/关状态]

  • 对象: 机场地勤人员

  • 信息: 小心!这架飞机的发动机正在运转。

  • 备注: 这个符号也有助于规避鸟类!


进程

数字产品中的进度指示器非常普遍,用于传达用户距离结束还剩余多少时间或步骤。在物理世界中,它们表现为传达剩余增量或时间的标记,直到达到状态或需要采取行动。

  • 项目:

  • 符号: 将书签放置在特定页面中 [完成进度]

  • 对象: 读者

  • 信息: 看看你还剩多少页就看完这本书了

  • 项目: 自行车刹车片

  • 符号: 凹槽磨损量 [可用剩余量]

  • 对象: 骑自行车的人

  • 信息: 这些磨损沟槽几乎消失了。需要更换新的刹车片了!

  • 项目: 鳄梨

  • 符号: 茎干下面的颜色 [Ripeness Spectrum]

  • 对象: 顾客和商家

  • 信息: 绿色 = 已经成熟,可以吃了;棕色 = 熟透了


其他

生活中一些不经意的小事其实也利用了视觉符号传达的功用,比如预测人们可能会寻找什么,然后利用这个信息来设计一个符号去消除可能的混乱,从而在不用说一句话的前提下就完成了信息的传递。

  • 项目: 啤酒罐

  • 符号: 瓶身上用力挤压的凹陷 [代表所有权]

  • 对象: 任何可能错拿我啤酒的人

  • 信息: 这不是你的啤酒。

  • 项目: 餐厅茶壶

  • 符号: 盖子的倾斜放置 [Empty / Full Status]

  • 对象: 服务员

  • 信息: 茶壶空了,可以帮我加点水吗?

  • 项目: 衣领

  • 符号: 衣架挂钩朝向 [清洁/穿过状态]

  • 对象: 我寄几!

  • 信息: 衣架朝外 = 这件衬衫很干净。 衣架朝内 = 至少穿了一次。

像这样的符号还有很多,在正确的情境下,这些视觉线索可以帮助用户区分一个项目的不同状态,用户利用这个信息做什么取决于他们的即使需求或最终目标。

不论在数字世界或者物理世界中,简明的视觉符号都能提供直观清晰的帮助。


原文链接:An exploration of visual indicators in real life

我的知乎:@Aceyclee | 我的微博:@Aceyclee

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容