松果

UI设计工作中,我们都会接触到 “后台数据管理系统” 的界面设计,你是否又想起了那些重复的表单,生硬的图表,繁杂的数据百分比,以及研发同事面对设计图中可视化图表时,那冲动的眼神和手中的40米大刀。

 

阅读本文,我将与你分享:

  1. 避免重复造”轮子”,与工程师一起效率工作;
  2. 找一个好“轮子”,你应该知道的这些数据可视化网站;

  3. 一些经验分享和Sketch Dashboard文件共享;

 

避免重复造轮子

现在各个端口的设计语言已经相当成熟,大胆的去使用那些你能找到的源文件和组件,复用它们,并逐渐形成自己的组件库;

尊重并充分了解我们的行业规范,将创意发挥在更有价值的地方,避免在一些无效细节上,浪费设计和研发成本,甚至挑战用户习惯。

在项目设计初期,我们便应该与研发同事达成共识,在一套他们或彼此都熟悉的规则上展开设计是一个不错的方法!

但是,一些规则是我们前期必须提前给出的(间距字号颜色等等,我们搭配的每一只猿不一定都是老司机),这能极大的节省我们后期走查中花费的时间成本。

 

*推荐参考的设计语言及规范:

1. AntDesign,普遍研发同事都熟悉的一套设计语言及组件

https://ant.design/components/radio-cn/

 

这是一套完善的解决方案,详细的阅读它的设计语言,对后台系统设计接触不多的朋友,熟悉规则能让你更快上手。

 

 

你还可以在AntDesign PRO 中查看这些方案的实现效果(左右拉伸边界,查看它们如何自适应的)

Antdesign 的设计语言与组件已经整理相对比较完善,不过多浏览其他的设计语言,熟百家之长总是好的。

 

2.UIkit ,这是一款轻量级前端框架,你可以浏览它的丰富组件,并且熟悉研发队友们常提到的组件名称。

https://getuikit.com/docs/tab

 

3.Element,这是一套基于Vue2.0的桌面端组件库,查看它的设计指南和组件库!多多益善,如果你想将其中的组件复用在自己的设计中,别犹豫,将代码复制给你的小伙伴,他会喜欢上你的贴心!

https://element.eleme.io/#/zh-CN

 

找到轮子,你得知道哪些我们能实现

在我们与伙伴达成“共识”后,我们能很轻松的推进工作。

作为一枚设计师,我们在设计中,总是灵感爆棚,希望作品与众不同,且眼前一亮!

但限制我们的,多是研发的时间成本,以及前端小哥的实现能力,我们的很多想法会被产品和开发扼杀,即使某一些确实很棒;作为同事,我们需要换位考虑研发伙伴的工作量,以一个较低的代价实现我们想要的效果,在这个时候,有现成的的组件能使用时,那真是极好的!

 

*推荐参考的海量组件库:

1.Echarts,当你的项目中拥有许多表格时,你一定会常常用到的网站,拥有异常丰富的组件库,大胆的挑选想要的效果!

http://echarts.baidu.com/examples/#chart-type-treemap

 

找到符合你预期的样式,并告诉你的开发伙伴!

 

如果你有一定的代码基础,去尝试更改想要的颜色搭配!

 

2.HighCharts,国际友人们喜欢用的组件库!浏览它,有许多你希望实现的效果都包含在内

https://www.highcharts.com/

 

3.D3,专业且强大…你可以经常浏览它并找寻灵感,它的所有东西看起来都足够的酷..but,这里的东西对你的研发伙伴也有一定的技术要求…

https://d3js.org/

 

 

一些经验分享:

1. 临门第一脚:屏幕设计尺寸问题

许多的新手喜欢文的问题,如果你的用户群体较为“保守”,和你的伙伴约定最小宽度“1200px”(2018年这已经足够了)进行设计,并且在设计中注意响应式布局,并且明确的告诉你的研发伙伴适应规则。but,你最好使用dp作为单位,以确保你的页面在不同屏幕看起来都一毛一样;

 

2. 数据的可视化

“一图顶千言”,没有多少运营,运维人员喜欢长时间盯着一串串的表格和数字找寻问题,有“目的性”的图表是他们的最爱,但记得他们需要有完整数据的导入导出,即使他们并不常用…

 

3. 复杂的权限分配问题

一个后台系统中总会有很的角色设置和权限分配,在前期充分考虑到使用的人群,注意布局的合理性不会因为缺失或者 多了某几块内容而尴尬…

 

4. 针对结果进行展示

后台系统中,包含有各种繁杂的数据结果,尝试隐藏过程,但需要让用户能快速找到它的来源和计算方式;

 

5. 不要放弃那些表单样式设计

那些重复的表单也可以设计搭配得很清爽…不要放任研发伙伴自行决定…

 

6. 快速的绘制表单的方法

你肯定讨厌很多的表单,哪怕借助插件进行表单的绘制也让我们头疼,有效的办法是在Number/Excle 进行编辑,然后复制粘贴到你的sketch/Ps中…这很迅速,但记得修改它的细节…

最后,我们追求美,但不代表我们应该追求一些高风险的视觉图表,找到合适的方法,完成你的工作,这是我们团队的使命和目标,切记和你的同事保持紧密的联系沟通,UI的及时走查是界面高还原的有效保障….如果可以…请坐到前端旁边…就像产品喜欢坐在你身旁一样…. :)

 

*一些 Sketch Dashboard 素材资源分享:

https://pan.baidu.com/s/1-ZFZ_FpvWBDC4KwWP7UfwA

密码:dtg5

 

最后,希望我的文章能带给大家帮助,也欢迎各位在下方留言,将你喜欢或常用的资源分享给我。祝各位工作顺利!

 

原文地址:BorderDesign(公众号)

作者:BurningMountain

转载请注明:学UI网 » 合理复用组件,解锁数据图表设计新姿势

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
七分钟了解一款思路很新颖的设计工具:Phase七分钟了解一款思路很新颖的设计工具:Phase
后台设计无从下手?微信后台用这7点教会你!后台设计无从下手?微信后台用这7点教会你!
三步让你的Sketch 学会自动排版插件:Paddy三步让你的Sketch 学会自动排版插件:Paddy
五分钟了解谷歌全栈设计师打造的 Sketch 插件:Sketch Material五分钟了解谷歌全栈设计师打造的 Sketch 插件:Sketch Material
两分钟了解全世界最快的 Sketch 插件:Runner两分钟了解全世界最快的 Sketch 插件:Runner
两分钟认识一款把 Sketch 变成 Principle 的插件:Diya两分钟认识一款把 Sketch 变成 Principle 的插件:Diya
大企业工作台如何提升上下游协作效率?大企业工作台如何提升上下游协作效率?
Keynote 5分钟制作可互动原型Keynote 5分钟制作可互动原型
2018年你用对合适的原型工具了吗?2018年你用对合适的原型工具了吗?
2018年最好用的网站设计工具集锦2018年最好用的网站设计工具集锦