怎么在保证认知的前提下,设计一个视觉有趣味的 UI
迷你设计课
下面这个热力图设计错了,但可以改好
错误是给每个小“块”随机赋予了 5 种不同形状,按照直觉,每种形状会代表一个信息,实际上这些形状不表示任何信息
这么说有点抽象,类比一下,你可以把这个热力图看作一个月历,每天的日期上都插了 1~5 朵数量不等的小红花……结果发现小红花的数量没有任何意义
为什么会有这么违背认知习惯的荒谬设计?为了增加设计的趣味(aka 让人觉得设计师很有创造力)
设计师故意把 Figma logo 拆分成 5 个独立的视觉元素/5 种形状(注),用在热力图里,乍一看就比 GitHub 那种传统小方块组成的热力图更有意思
这里我就不评价这种设计思路的优劣了,你们随便聊吧。既然我是设计顾问,我的工作是给出解决办法。怎么既在 Figma 工作时间的热力图里展示 Figma 视觉元素、增加热力图的视觉情趣,同时又不违背常识、妨碍用户认知,最简单的一种方式是利用动画
比如说:热力图载入时,每个“小块”每秒随机显示 10 次、每次显示 5 种形状之一,而后按照日期顺序,每个日期对应的“小块”逐一固定下来显示成一个圆形“小块”……最后所有“小块”稳定显示一个清晰、易于识别、信息完整而不存在误导的热力图
从逻辑上说,这个动画是利用动画、静止图案的差别,刻意在信息架构上增加了一层,把纯视觉的刺激和实际的信息(即每个“小块”的颜色深度)做了区隔,或者说把装饰性、趣味感的过场动画在视觉上强化,但在信息架构上弱化,让它们只刺激视觉,而不影响认知
趣味和逻辑并不冲突,如果你想清楚的话
注:还好 Figma logo 能拆分成几何图案,你试试拆分法拉利的 logo?一个马脑袋、四条马腿、一条马尾巴、内脏不知道怎么处理……