请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 25199|回复: 0
收起左侧

[设计经验] 数据展示页面设计[含9P]

[复制链接]
发表于 2017-11-15 09:59:55 | 显示全部楼层 |阅读模式
最近在研究AI智能分析,做了如下设计。
以每周耳机使用频率的数据为例。

                                                       
1.选取想要表达的产品。

首先选择一张合适的背景图片,我是做耳机数据的,所以选了一张颜色较为干净的图片作为背景。如果你对其他产品情有独钟,也可以选取该元素的图片。




2.确定好设计的色调。

选取好图片元素之后,需要结合自己需要设计的方向调整色调。情感化尽量选用红、黄等暖色;文艺风格选取明度较低的蓝或灰色色;我这次设计风格偏向科技感选取紫色。




3.确定功能分区。

先把title bar的名称、icon添加进来。iOS设计规范 title bar的高度为128px。




4.添加元素。

添加日期的元素,用两种不同的字号区分【具体日期】与【星期几】。当天的下面有紫色圆点作为标签。选中当天日期被白色圆圈包住。




5.增加数据分布曲线。

先用直线工具画出直线,再用钢笔工具添加描点编辑曲线。

之后选择【图层样式】渐变叠加。渐变颜色尽量选用相近的几种颜色,有色彩倾向变化而不是明度变化。我选用的是绿色变蓝色再变紫色。



6.丰富画面。

仅靠线段来支撑画面过于单薄,加入面形渐变丰富画面。

给其中某天叠加一条渐变。

先给图层增加一个从透明度100%~0%的渐变,创建一个文件夹把刚刚的图层放进去,再加一个绿色到蓝色的渐变。




7.增加线段及描点。

增加线段的目的是让用户更好的聚焦某时段数据的涨跌幅。

增加描点,给用户反馈选中的数据区域是哪里。




8.增加光感细节。

单纯的线段会觉得突兀。增加发光效果突出样式。

发光效果是通过高斯模糊制作的。不要直接在图层样式增加发光效果,不自然。




9.增加按钮。

按钮采用蓝紫渐变的形式,增加高光及反光的阴影效果。增强点击欲望。




以上为我们本次设计的简单教程,如需获得更细致的操作流程。请关注QQ群树莓学院:485633288。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:像素,分辨率和适配
下一篇:如何设计一本大家都喜欢的毕业纪念册
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表