最美UI

ui设计临摹!数据展示页面设计

最近在研究AI智能分析,做了如下设计。

以每周耳机使用频率的数据为例。

1.选取想要表达的产品

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

2.确定好设计的色调

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

3.确定功能分区

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

4.添加元素

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

5.增加数据分布曲线

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

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

6.丰富画面

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

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

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

7.增加线段及描点

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

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

8.增加光感细节

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

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

9.增加按钮

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

来源:树莓学院

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
下一篇
一个图形,可以演变出多少风格?