美文网首页@IT·互联网@产品
现实生活中的视觉符号

现实生活中的视觉符号

作者: Aceyclee | 来源:发表于2018-03-21 14:26 被阅读0次

将 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

相关文章

  • 现实生活中的视觉符号

    将 UX 和界面设计原则扩展到数字产品之外 视觉符号(Visual indicators)用于使物体更加醒目,它们...

  • 视觉符号

    怎么样保证你的广告费不浪费,除了广告创意本身之外,还有个前提是永远要有一个自己的视觉符号,这个视觉符号很多企业都没...

  • 视觉符号!

    品牌营销中,何为“视觉符号”? 通俗一点来讲就是“你设计的产品logo、产品包装、吉祥物、以及代表品牌传播的形状、...

  • #曾小清读书笔记#78连载【构建品牌符号的五大路径之视觉】

    我们通常说的符号,大多是指视觉符号。 一般来说,品牌符号还是遵循视觉第一的原则,我们记得的品牌,多半都是先有视觉印...

  • 第三章、找到文化原力,创意购买指令:购买指令——标识符号创意

    标识符号创意 标识是品牌理念的象征,是品牌符号的核心。好的标识设计就是超级视觉符号,自带流量。视觉符号关键在于高度...

  • 06|11视觉化

    001+视觉化 练习+重点符号+划掉符号 学会给“信息归类”,就已经开始入门视觉化了。视觉引导更重要的还是思想的表...

  • 【视觉笔记六】5要素之项目符号

    简单的项目符号: 可添加变化变形为 在视觉笔记中的应用 项目符号是标记同层信息的符号,把内容按逐条排列,起到美化作...

  • 孙伟:演讲用的梗

    符号分为语言符号,符号。符号,视觉符号,语言符号 团队裂变一对多列面。 裂变有趣裂变! 存量用户,增量用户, 频率...

  • 《设计学概论》笔记-第五章第一节01

    第一节 视觉传达设计 一、什么是视觉传达设计 (一)几个概念 1、视觉符号: 广义的符号:是利用一定媒介来代表或指...

  • 品牌就是符号

    建立品牌就是建立符号,商品也是符号 符号是指一切具有现代意义的视觉形象听觉符号触觉符号味觉符号和嗅觉符号。 商品与...

网友评论

    本文标题:现实生活中的视觉符号

    本文链接:https://www.haomeiwen.com/subject/zldgqftx.html