设计总结：图表设计二三事

2017-10-25 08:01:37 来源：易采站长网友投稿作者：人人都是产品经理

　　文章从四个圆里切进，对图表设想做了相干总结，期望可以给您带去启示。

　　用户正在利用产物历程中，会打仗到年夜量的数据。实在数据对用户去道便是笔墨战数字的组开，年夜脑处置杂文本的速率比力缓。比方我们去看一收球队的手艺统计，场均116.7分，28.3助攻，45.0篮板…那些数据关于我们去道皆是热冰冰的，我们很易快速的理解其背后的寄义。

　　图表的呈现能够协助我们对数据停止可视化处置，提拔了数据的可读性。果为比拟于杂文本，用户处置图形疑息的速率要快很多。

　　正在那里我们利用的是雷达图，球队各项次要统计了如指掌。

　　常睹图表品种

　　那末怎样才气设想出用户合意的图表呢?要答复那个成绩，尾先我们要晓得今朝常睹的图表品种有哪些。

　　合线图，直线图，饼图，环状图，条状图，雷达图，舆图等能够道是我们今朝最多见的图表款式了。详细到每种图表合用于表示甚么范例的数据我那里便没有多道了，数教教师该当皆道过，明天次要去道图表设想。

　　我们能够从以下四个维度去分析图表设想：可读性，分歧性，视觉层级战美妙性。

　　可读性

　　图表设想的初志便是为了让用户不计其数的数据中摆脱出去，图表需求协助用户更好的”读与”数据，以是正在那里我将可读性放正在图表设想的尾要地位。

　　图表的可读性次要留意以下三面。配色，笔墨战群组。

　　配色

　　图表的配色那里次要去道布景色，普通去道，图表的布景色我们能够分为深色战淡色。淡色布景的图表更有益于用户浏览，能够有用的进步数据的可读性。

　　能够有人会问了，既然淡色布景更有益于浏览，那末我们便能够间接下结论了“图表布景一概利用淡色”，为何借要思索深色呢?

　　那是果为有的界里内容过少，为了使界里看起去没有那末单调，我们会利用深色布景。果为界里内容自己便少，用户一眼便能看完，以是深色布景对可读性影响没有年夜。可是我们要记着，当数据过量的时分，必需利用淡色布景。

　　笔墨

　　关于疑息的读与，图表能够快速可是没法做到精确，那便是图表要辅以笔墨阐明的意义地点。

　　笔墨的可读性次要表现正在字体(衬线字体战非衬线字体)，字号，配色战排版。以排版为例，用户的浏览风俗是从左往左，从上往下，也是我们常道的Z型浏览形式。那种形式下，左对齐的笔墨排布便十分有益，用户能够偶然识的回到段降左端，开端新一止的浏览。而居中战左对齐使得段降每止左真个地位皆纷歧样，用户每次皆要无意识的寻觅开端地位，浏览起去会很乏。

　　上里道到了用户阅读风俗，接下去再给各人分享另外一个简单被我们无视用户阅读风俗。我们正在设想饼状图的时分，份额最年夜的部门该当安排正在12面钟标的目的，果为用户皆风俗从12面钟的地位开端阅读。其他的部门按从年夜到小顺次排，逆时针顺时针皆能够。

　　群组

　　群组的设想理念跟卡片式设想相相似，皆是对疑息停止朋分让用户更简单消化。以转账功用为例，关于支款人疑息，我们能够利用右边的列表款式逐条展现，实在那样做成绩也没有年夜，并且借费事。可是那种展现方法属于毫无主次的陈展出一切疑息，用户没法明白劣先级。正在那个界里中，用户最体贴的是支款人疑息，而支款人疑息顶用户的存眷重面顺次是支款人姓名>支款账号>开户止。假如用右边的列表款式，劣先级那个维度便没法表现。

　　那末我们能够对疑息停止分组整开，将支款人姓名，账号，开户止整开到一同，借经由过程利用icon去协助用户快速定位重面疑息，提拔浏览速率。

　　分歧性

　　一款产物中所呈现的图表必定没有行一种，为了消弭差别范例图表给用户带去的认知承担，我们能够经由过程给图表增加不异的设想元从来成立图表的分歧性本则。那些不异的设想元素能够是布景色，排版，题目款式等。

　　以咕咚为例，那内里呈现的几种图表款式皆是比力同一的。

　　视觉层级

　　差别的数占有差别的主要水平，我们能够经由过程配色，群组，字体，间距等脚法去使图表的视觉条理分隔，有助于用户关于数据的沉重缓慢有一个曲不雅的判定。

　　比拟于淡色，深色布景更能吸收用户的留意力。

　　美妙性

　　实在假如一个图表能够满意以上的三个前提曾经能够道是相称没有错了，可是我们要更进一步，从美妙性的角度再对图表停止提拔。好的图表该当是具有好感的，最好具有风趣，共同等要素。那样才能够吸收用户的留意力，让他们念看个终究。看到出格出彩的图表款式，用户以至会来分享。虎扑做的“数读NBA”便是一个十分好的例子。

　　如今我们能够看到一些图表会引进一些动效，动效能够好化界里，风趣的动效借能够起到文娱用户的做用，可是动效会低落减载速率。好比下圆的一个电子支据动绘，那个动绘看起去很酷炫，可是它的存正在使得用户需求4秒钟才气看到买卖细节。那个等候工夫隐然超越了用户的内心预期。以是正在动效的利用上，我们必然要找到一个均衡面。