集团旗下网站: 奇酷集团 | 迈领人才网 | 奇酷方舟
全国咨询热线:400-807-8991
您现在所在的位置:首页 >关于奇酷 > 行业动态 > 奇酷UI图表设计技巧打造最优设计师

奇酷UI图表设计技巧打造最优设计师

来源:奇酷学院 发表于:

奇酷学院-UI培训_UI培训班_UI设计_UI设计培训班

  1. 是否真的需要图表设计进行数据展示?
  在部分设计情境里,相较于复杂多变的图表呈现,直接数字展示,更能有效的减少界面干扰,吸引和留住用户。所以,具体的案例设计过程中,设计师需要注意考虑实际设计情境,是否真正需要图表进行数据展示,以有效避免华而不实的情况出现。
奇酷UI图表设计技巧打造最优设计师
  2. 是否选择正确的图表类型展示相关软件数据?
  设计时,也需要多次查看和确认:选择的图表类型是否能够完美呈现各类软件数据。为确保选择的图表类型准确无误,可以尝试通过移动设备打开此图表设计进行测试。看看, 作为用户,你是否能够轻松理解图表上展示的所有信息。
  比如,在具体的设计中,设计师可通过突出展示每个图表设计,并以滑动的方式进行切换的设计技巧,更加直观炫酷的展示各种软件数据, 轻松解决单个图表设计导致的过度复杂的问题。而且,为确保每次切换或滑动的过程中,用户能够自然的聚焦当前图表,其它图表设计也最好做透明虚化处理。
  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. 图表数据展示是否遵循特定的顺序?
  如若设计师希望按升序展示用户数据时,则需要在交付的过程中,向开发工程师明确提出这一设计需求。
  总之,希望以上介绍的图表设计技巧和套路,能够帮助广大设计师和开发人员解决一定设计问题和痛点的同时,成功打造最佳的Web/App设计。
  以上就是奇酷为大家分享的“奇酷UI图表设计技巧打造最优设计师”谢谢大家观看,如果对UI设计感兴趣的话,想学UI设计培训的,也可以在线咨询,我们将竭诚为你解答。