导演别人的联想 —— 图形化设计- 内涵容不得牵强

honghu2

导演他人的遐想 —— 图形化设计- 内在容不得牵强


　　遐想，不是说lenovo哦~ 是说人们的一种生理勾当，这类生理勾当让人对世界有了天然的理解和表达。　　@经%OS717%由%OS717%过%OS717%程对天%e8YbR%然@界事物的理解、抽象演变，人们缔造出不少图形、文字来表达各类意思，向别人通报信息。　　人们不竭堆集履历，遐想履历的特色不竭被深化、强化，促使表达者的设计勾当不竭成长。　　到现在，咱们已可以明白应用古人总结的遐想纪律（类似遐想、靠近遐想、比拟遐想、因果遐想）来发挥设计，向咱们的用户转达各类信息。　　但是…… 　　他人心中的遐想勾当，咱们有多大的节制能力呢？　　咱们可以有，咱们必需有！ 　　本文如下将分享三个问题：　　甚么工具让人们遐想？  图形化设计的元素（砖瓦）　　用甚么法子导演人们的遐想？  设计进程（技术）　　拿甚么样的精力来导演遐想？  设计原则（心法）



　　图形化设计 的“亲戚”不少，如信息图表设计、信息可视化设计、视觉转达设计 等等。　　咱们可以说他们都与图有关，与意思、数据或逻辑有关。归根结柢  他们都是要把信息直观、正确、快速、清楚的转达给人们，以得到理解和共识，乃至快速的被记着。 　　为了让人们能真的依着导演去遐想，准确理解咱们的意思，咱们必要钻研熟悉如下内容：



　　咱们通经常使用分歧的视觉元素，代表分歧的数据和信息维度，将这些带成心义的元素组织在图中，经由过程节制一个或多个元素变量，来表现数据信息间的联系关系。







　　分歧的信息 合适分歧的图形化设计      1. 简略的方针 — 图象表征





2. 简略的意思　　便可以像上文中例1和例2那样，用根本的柱状图（或饼状图等）、简便的图示，便可以解决问题了。

3.较繁杂的逻辑或内容　　如表达咱风月们这里“设计师的一天” ( 原图过大，这里缩小了一点放上来）

　　哈哈~ 能列出这里统共说了哪些信息点么？　　……　　总之，各类元素的搭配和操纵，要按照现实必要来兼顾放置，要做到每一个细节都是有事理的公道的放置。



1. 咱们第一眼让用户看到的线索，必定要清楚凸出。　　要放进一张图的信息，最少会以一个贯串总体的线索联系关系。这条线索不少时辰也是这个图的主题。信息的组织  就要靠这条线索了。　　如“设计师的一天”，线索就是自始至终一天的时候，以是我就依照钟表的刻度来对应每一个时段会做的事，还标出了四个时候关头点。　　说到这儿，要讲一个小案例：



　　这是某老友“与我的故事”模块，旨在奉告我该老友与我有甚么配合点，固然现实是但愿制造完美资料和互动的机遇。　　大师也能够体验一下，它藏在QQ2011正式版下，对方的资料卡窗口中。　　要说的是，最初的方案不是彩虹桥，是一棵交情树，请看：

　　设计师最初的设法是两老友间的交情树，树根上抽象舒展出根系，每一个根枝的结尾指向一个属性，寄意为营养供应着交情树发展。当属性不异时根系显绿色，当属性分歧时根系灰显。两人不异的属性越多寄意营养越多、树根绿的越多，树木就越蕃芜。　　早期交互进程中的演勤信软件园变：

　　愈来愈端正、简略。　　但为了组织一堆数据而抽象出来的“交情树”却愈发弱小了。设定的最弱到最强的表示是：

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

　　依照交互的方案表达，线条简便，色彩纯真，很平的感受比力轻量。　　可是灰色与绿色的根搀杂在一块儿其实不好辨识，并且当灰色过量时  没法很好收敛可能给用户酿成的负面情感。

　　更让人严重的是，视觉处置进程中，为了防止不调和的页面分开，去掉了“地平线”的感受，分开地上、地下的界线已不在，小芽就被膨胀扩大的根条浸没，总体的表达再也不浅近贴切。　　此时显现出来的成果，已让人较难遐想到图的线索，和暗地里真实的意思了……



　　厥后立意扭转，采纳彩虹桥寄意两人的交情，向天空升起一个个属性泡泡。不异的属性越多，彩虹桥跨过的弧度越大。未跨过的部门渐变至偏白的低饱和度，如斯一来，主体方针够大，属性不异的水平很轻易辨识，页面的色采也丰满了起来，而且规避了不调和的页面朋分，算是比力乐成的一次优化了。

回过甚来总结：　　主题的线索，是人们对号入坐开展遐想理解的起头。若是他人连线索也就是你这些信息的组织方法 都没看懂，那就没法子遐想到你图中的逻辑，这个图就白做了。

　　咱们为了将一堆复杂信息简便、清晰的表达，把他们按一个线索组织起来。　　有时会为这个线索凝炼出一个主体（好比上面所说的“交情树”、“彩虹桥”），来承载这些信息的逻辑瓜葛。　　所凝炼之主体，是第一个要站出来的，从它起头，用户才在察看这些信息与它的联系关系性中，更好去理解信息和逻辑。　　若是为了凸出信息而凸出信息，那还凝炼出来这个主体干甚么呢？　　以是说，遐想的进程必要次序，必要导演！

2. 咱们放置的“剧情”，必定要合适人们的认知理解 和客观纪律，靠近真实糊口履历。

　　好比，关于对色彩的感受：　　色彩 在利用的时辰，是应用人们的生理感知纪律，来增强人们的遐想和理解。　　如橙色 是暖的对应到热的活泼的；　　蓝色 是冷的、安静的，对应到不活泼的。　　那末橙色到蓝色的过渡渐变，天然成为人们的一个理解思绪，他会很自发的感觉到你的意思。

　　好比，关于事变成长的次序：　　在阐明流程的时辰，假设咱们图中的主角是一个水龙头，用它来串连流程，那就是　　从把手起头，挨次颠末扭转点、龙头、出水口，终极走到流出的水点。　　不成能倒着来，不然不合适客观究竟的逻辑次序。

　　好比，关于一种@近%h4妹妹5%况@的持续性遐想

　　在QQ相干设计的现实项目中，咱们凡是是将某用户小我的信息自力显现出来，但咱们又常常筹算让用户与其别人的图表碰着一块儿 比力，然后让他们感觉到此中的纷歧样  和兴趣。那就有一个问题了—— 如安在用户没有瞥见其别人的图表时，就可以充实感觉到他本身的图表是在甚么阶段或档次呢？否则怎样让他自动去比力？　　来看案例 ：

　　这是QQ表面图形化表达设计中的一个进程方案（终极飞机掉了）。  　　咱们的本意是给“用户QQ的价值”一个具象的依靠，同时知音色交友足用户间的强弱比拟表达。　　一起头我想用一个水果篮表达，价值越高 则水果种类越丰硕、数目越多，如许用户看到本身篮子里的工具  会相瞄准确的感受到本身的QQ是甚么环境，有无让他愉快。　　可是这个设法品牌持续性未顾及到，实现也有坚苦，未便后台画图，若是纯贴图的话，视觉设计师的事情量也会枉然增大很多，是以抛却了。 　　厥后想到分歧体魄的动物 ——感觉与咱们的品牌联系关系性太差，当用户仅看到本身的图表时，自力的动物之间 在状况上没有天然的持续，让用户较难想象与其别人有很明白的可比性。　　想到分歧巨细的鸟（就是上面阿谁） —— 在物种上连结了一致，形成为了形象间必定的持续性，但仍是与咱们的品牌联系关系性太差。　　终极决议用分歧春秋阶段的QQ企鹅 —— 总算紧扣上了咱们本身的品牌，而且从幼儿到青丁壮间的状况过渡具备很好的持续性、强联系关系，当用户仅看到本身的图表时，无论显现何种时代的企鹅，他都能遐想到对应的状况。而且很轻易延展的想到另有甚么样的状况，他要做些甚么才可以晋升本身QQ的整体价值。　　视觉同窗所绘的小企鹅初稿：

　　总之，在逻辑表达的任何一个细节  都要尽可能的挨近实事。这就是说，图形化设计的内在容不得牵强。



结语：　　在今朝的事情中，咱们尚未碰着很是繁杂、巨大的数据体系必要对其做可视化设计表达。　　以前接触过的项目中，id.qq.com新版首页的小我QQ表面、老友视图统计（春秋散布、性别散布、地区散布），客户端老友资料卡“与我的故事”（老友同属性）等等，也都是表达较简略的信息组。（说真话这些需求处置的都还比力粗浅，不外起首，简略管用就好~）设计进程中咱们走过弯路，有过纠结，此处就谨作为前车可鉴，以供厥后者辨析参考。

　　以上文中给您供给了一些关头词，不期望一篇文章就可以催化出一批大牛。　　想领会更多 您就先baidu百科拼集一下，再渐渐拓宽、深刻，搜查您渴求的常识。　　最后，等待您的厚积薄发！

over ^^

附题外嘲笑话一枚：当我用“遐想”一词 去搜刮我必要的图片素材时……我解体了。

(本文出自Tencent CDC Blog，转载时请注明来由)