小扣子

现在,软件应用大都选用图表规划来可视化各类软件数据,成功简化界面规划的一起,也大幅提高其用户体会。试想,如若市场上的各种监控、金融、保健以及旅行类软件应用,不再运用此类直观吸睛的图表规划,整个软件应用的用户体会该多糟糕啊!

 

更甭说,此类图表规划, 为规划师们供给了更多随心发明和自我表达的空间, 其联动动效和交互规划,也为规划师们供给了更多界面提高和优化的或许性,规划师们也的确宠爱于在其实践的规划中,添加各类图表规划。

这也就解说了为什么现在图表会广泛呈现在各类软件(包含Web和App)规划之中。

可是,Web和App规划之中的图表品种繁复,例如常见的饼形图、条形图、折线图、时刻表、示意图、流程图、直方图、散点图、点图等等,作为规划师和开发人员,终究怎么才干完美规划和复原此类图表规划呢? 不必忧虑!持续阅览,咱们必定会找到想要的答案。

正如乔布斯所说的那样:

“规划不应该只是逗留于外观和个人感觉怎样,而应该更垂青其功用怎么。”

所以,图表的规划也不应该只是逗留于视觉展现,其功用性和有用性也需求考虑在内。

虽然,各类图表大多是度量衡、条件、规矩以及相关运算成果的调集和呈现。可是,移动端和Web端软件应用的图表规划要求却大不相同。导致这些不同的中心要素便是常见的屏幕尺度、设备数据处理才干以及相关技术性约束等等。

此外,由于图表只是只是整个Web/App规划中极小的一部分,一般只需求产品团队中的一名规划师、产品一切者或事务剖析师即可轻松完结。可是,关于开发人员而言,由于数据和用户状况的多变性,完成和复原此类图表规划却非常苦楚。

优异的图表事例

总归,无论怎么,小编期望以下共享的相关图表规划的套路和技巧,可以协助咱们有用防止和处理相关规划问题和痛点:

 

1. 是否真的需求图表规划进行数据展现?

在部分规划情境里,相较于杂乱多变的图表呈现,直接数字展现,更能有用的削减界面搅扰,招引和留住用户。所以,详细的事例规划过程中,规划师需求留意考虑实践规划情境,是否真实需求图表进行数据展现,以有用防止虚有其表的状况呈现。

 

2. 是否挑选正确的图表类型展现相关软件数据?

规划时,也需求屡次检查和承认:挑选的图表类型是否可以完美呈现各类软件数据。为保证挑选的图表类型精确无误,可以测验经过移动设备翻开此图表规划进行测验。看看, 作为用户,你是否可以轻松了解图表上展现的一切信息。

并且,需求留意的是:必定情境下,运用2-3个图表别离展现相关数据,会比只是运用单个图表愈加简练直观。

比方,在详细的规划中,规划师可经过杰出展现每个图表规划,并以滑动的方法进行切换的规划技巧,愈加直观炫酷的展现各种软件数据, 轻松处理单个图表规划导致的过度杂乱的问题。并且,为保证每次切换或滑动的过程中,用户可以天然的聚集当时图表,其它图表规划也最好做通明虚化处理。

 

3. 图表配色是否契合规划情境?是否可以激起用户的情感认同?

图表规划中,不同数据的颜色调配,也需求规划师慎重挑选。例如,赤色并不合适调配添加势头杰出的数据。而为愈加直观展现数据添加进展和梯度改变,调配渐变色会愈加合适。

 

4. 表格规划的条件和约束有哪些?

每个图表规划的意图都是经过愈加直观明晰的视觉方法向用户展现各类数据。为保证这一意图顺利完成,规划交给时,规划师需求向开发人员供给对应图表的信息、完成条件以及规划约束等细节,例如各类数据对应的称号、时刻区间、图表数据核算公式等,然后保证图表规划得到完美完成和复原。

 

5. 是否需求添加图表图例,协助用户了解?

图表,用于展现简略数据时,明晰直观,恰当有用。 可是,当图表需求展现更多杂乱数据,例如需求比照数据,乃至触及一些额定核算时,为防止给用户形成困惑,规划师就需求考虑是否添加必定图例解说和引导用户。当然,图例规划中,也需求留意相应阐明文字的长度。由于移动端的可展现数据的界面相对较小,过长的文本规划反倒会影响到整个图表的布局。

 

6. 怎么展现图表中的大数据?

固然,规划过程中,规划师大都乐意选用一些简练干练的方法展现图表中各种数据(例如运用一些简略干练的标题、文字描述、地址以及契合设备屏幕尺度和布局的占位符等等)。可是,实践规划过程中,实际往往不会尽善尽美。比方,当规划移动端界面图表时,由于手机屏幕展现空间相对有限,触及的部分大数据就需求恰当简化瘦身之后,再进行展现。当然,为完成数据的简化瘦身,也可结合图表图例进行规划。

 

7. 假定需求一起展现最大和最小值,怎么规划图表,才干做到漂亮而不突兀?

假定,咱们需求规划一个别离展现99%、 0.75%、 0.25%三种软件数据的饼图,怎么规划才干使整个图表漂亮而和谐? 这是需求规划师提早就考虑到的问题。

 

8. 假设图表中部分数据由于某些原因缺失时,图表应该怎么呈现?

比方,规划师可以直接躲藏图表相关部分,或许直接将其显现为灰色,并符号为“0”或直接添加问号进行展现。

 

9. 如若用户并未供给相关图表数据时,又该怎么规划?

此刻,一般来说,规划师可事先为图表添加一个空白状况的规划。而它可以是一个没有任何数据的空白图表规划,也可以是带有特别占位符的图表规划。总归,规划师可以根据需求进行挑选。

 

10. 图表X轴和Y轴应该怎么规划和建立?

众所周知,这类图表元素的规划,应该由用户的详细数据而定。为保证最终的规划真实准的确用,规划师需求向开发人员批注怎么核算X轴和Y轴相关数据以及图表轴上有必要有多少刻度等重要信息。

 

11. 是否选用渐变色视觉化图表中数据的梯度改变?

比方,当图表中数字大于 2000时, 图标选用赤色渐变色进行展现。当数据数字小于 2000时, 则可运用橙色进行展现。

 

12. 假若用户无权限检查相关图表数据时, 又该怎么规划?

此刻,规划师则需求为该图表添加一个制止检查的状况规划。

 

13. 图表在加载状况下,又该怎么呈现?

关于部分图表而言,数据展现,需求必定时刻从后台检索或核算相关数据。这时,为防止给用户带来欠安的用户体会,就需求规划师添加一个图表加载状况的规划,以明晰奉告用户:正在为你加载相关数据。

 

14. 图表是静态,动态,仍是呼应式的规划?

关于这类问题, 不同的规划项目,会有不同的状况, 需求规划师因状况而定。例如呼应式图表规划,需求规划师向开发人员供给多套不同设备或体系的相关规划数据,以便利开发人员进一步规划和执行。

 

15. 当用户单击、双击或长按图表时,又应该给用户怎样的反应?

一般来说,单击图表区域,可以切换全屏,检查图表细节。双击,则可扩展图表。长按,则可聚集并杰出展现图表特定区域。

 

16. 是否可检查图表前史数据?

一般来说,简略滑动图表页面或轻按相关按钮,即可检查相应图表的前史数据。值得留意的是:规划师需求给图表数据添加一个时限,并非一切的前史信息都可检查。

 

17. 是否需求杰出展现对用户重要的数据?

比方,以当今盛行的瘦身类卡路里盯梢软件为例,假如用户达到了每日热量(即卡路里)约束的90%,规划师则可在每日热量盯梢图表中,将相关展现项目和超出部分的数据添加,运用橙色进行杰出展现。然后,在超越100%之后,选用赤色进行符号,以显现用户现已远远违背规则饮食(即每日卡路里的约束)。

 

18. 是否需求为图表添加动效?

图表数据也可动态展现。比方,柱形图,一次展现一条。饼形图,一次展现一部分,以添加界面趣味性和灵动性。

 

19. 图表数据展现是否遵从特定的次序?

如若规划师期望按升序展现用户数据时,则需求在交给的过程中,向开发工程师明晰提出这一规划需求。

 

20. 用户是否可以自定义图表数据?

一般来说,用户可自由挑选需求显现或杰出展现的图表信息。

优异的图表事例

期望以上剖析的相关规划技巧和套路可以协助咱们成功优化Web/App规划中图表的外观和用户体会。总归,在详细的图表规划过程中,规划师和开发人员需求从不同的视点进行考虑:

  • 产品视点(考虑图表规划是否契合产品特征、风格以及品牌形象)
  • 用户视点(考虑用户是否可以轻松获取和了解图表呈现的相关数据)
  • 开发视点(考虑图表规划是否可以完美的完成和复原)

事实上,图表规划中,最简略呈现的问题便是:构图漂亮炫酷、数据直观明晰,却唯一忽视了用户的真实需求。如若规划师期望可以防止这类问题的呈现,规划图表时,请紧记以上问题和套路。

当然,如若你以为你的图表规划已然白璧无瑕时,也不要忘掉测验运用不同的数据体系(比方巨细数据集、数据缺失等等)进行测验,以保证在各种状况下,图表对用户而言,都是可读、可辨认、可了解的。

正如《小王子》作者Antoine de Saint-Exupery 所说的那样:

“完成完美,并非无以复加,而是毫无冗繁。”

从规划中删去不必要的元素或内容,不只可以简化规划自身,还可以有用提高其用户体会。

总归,期望以上介绍的图表规划技巧和套路,可以协助广阔规划师和开发人员处理必定规划问题和痛点的一起,成功打造最佳的Web/App规划。

 

原文地址:UX Planet

译文地址:Mockplus

作者:dashdevs. sci-tech crew

译者:摹客Mockplus

 

转载请注明:明升m88.com网 » 最全UI图表规划技巧和套路,分分钟打造最优规划

登录保藏
 
你或许喜爱的:
免费图标有许多,便是为了不必画吗?瞎扯!免费图标有许多,便是为了不必画吗?瞎扯!
微信授权登录中的冷艳规划微信授权登录中的冷艳规划
聊一聊交互中的“咱们来找茬”聊一聊交互中的“咱们来找茬”
你真的会规划小标签吗?你真的会规划小标签吗?
用户访谈——哪些准则简略却有用用户访谈——哪些准则简略却有用
产品图标 - 谷歌 Material 标准产品图标 – 谷歌 Material 标准
规划言语 - 挑选器规划言语 – 挑选器
标示新方法,「主动+手动」标示标示新方法,「主动+手动」标示
怎么让按钮规划的更诱人怎么让按钮规划的更诱人
全栈规划师有必要具有的Mac软件引荐全栈规划师有必要具有的Mac软件引荐