向我们的用户传达各种信息:图形化设计的元素(3)

拿什么样的精神来导演联想？！设计原则（心法）

1. 我们第一眼让用户看到的线索，一定要清晰凸出。

要放进一张图的信息，至少会以一个贯穿整体的线索关联。这条线索很多时候也是这个图的主题。信息的组织 就要靠这条线索了。

如“设计师的一天”，线索就是自始至终一天的时间，所以我就按照钟表的刻度来对应每个时段会做的事，还标出了四个时间关键点。

说到这儿，要讲一个小案例：

这是某好友“与我的故事”模块，旨在告诉我该好友与我有什么共同点，当然实际是希望制造完善资料和互动的机会。

大家也可以体验一下，它藏在QQ2011正式版下，对方的资料卡窗口中。

要说的是，最初的方案不是彩虹桥，是一棵友谊树，请看：

设计师最初的想法是两好友间的友谊树，树根上抽象伸展出根系，每个根枝的末端指向一个属性，寓意为养分供给着友谊树成长。当属性相同时根系显绿色，当属性不同时根系灰显。两人相同的属性越多寓意养分越多、树根绿的越多，树木就越茂盛。

初期交互过程中的演化：

越来越规矩、简单。

但为了组织一堆数据而抽象出来的“友谊树”却愈发弱小了。设定的最弱到最强的表现是：

最弱的时候是只有两片叶子的芽，却要拖着好大一坨“树根”。

按照交互的方案表达，线条简洁，颜色单纯，很平的感觉比较轻量。

但是灰色与绿色的根掺杂在一起并不好辨识，而且当灰色过多时 无法很好收敛可能给用户造成的负面情绪。

更让人紧张的是，视觉处理过程中，为了避免不和谐的页面分隔，去掉了“地平线”的感觉，分隔地上、地下的界限已不在，小芽就被膨胀扩张的根条淹没，整体的表达不再浅显贴切。

此时呈现出来的结果，已让人较难联想到图的线索，和背后真正的意思了……

后来立意改变，采用彩虹桥寓意两人的友谊，向天空升起一个个属性泡泡。相同的属性越多，彩虹桥跨过的弧度越大。未跨过的部分渐变至偏白的低饱和度，如此一来，主体目标够大，属性相同的程度很容易辨识，页面的色彩也饱满了起来，并且规避了不和谐的页面分割，算是比较成功的一次优化了。