设计规范概念及主流平台设计规范

一、什么是设计规范？

1.概念

概念

2.为谁服务？

服务

3.好处

（1）控制设计质量

（2）提高设计效率

---

二、主流系统平台IOS的设计规范

1、IOS系统中ICON的设计规范

2、IOS系统中文字的设计规范

3、IOS系统中配色的设计规范 

4、点击区域

【1】状态栏目和导航栏

【2】内容视图

【3】产品行为或显示的信息按钮、输入框

【4】临时视图：临时向用户提供重要信息，提供额外功能和选项

5、UI交互手势概述

6、UI的动画概述

UI动画的用途是传递状态

通过视觉化方式向用户呈现操作结果

---

三、主流系统平台IOS的设计规范

【计量单位】

1、安卓系统中ICON的设计规范

安卓是开源的系统ICON更多元化

2、安卓系统中字体的设计规范

3、安卓系统中配色的设计规范

相似色的渐变（基础色）

强调色

主题色

主题色

4、点击区域

视觉设计可以小于48DP，但点击范围围48DP

5、交互手势

6、动画规范

---

四、Web&H5页面设计规范

1、网页Web尺寸

分析：网易和腾讯作为门户类网站，以及淘宝、知乎主页996像素

结论：过大大多网页以1000像素为界限，为了在小屏幕上也可以浏览

2、网页Web主流浏览器

3、网页Web手势操作

4、Html5页面（手机页面）

【1】H5页面的界面尺寸非常多，如何解决屏幕适配问题？
答：以响应式网站的方法，增加不同屏幕的兼容性

【响应式设计】

列如Behance，岁屏幕尺寸变化适配屏幕

【临界点】

页面尺寸发生的变化范围就是临界点

已知宽度范围，可得出临界点，知道宽度范围处于某一个点时，页面信息如何清晰展示

宽度变宽——展示信息变多

宽度变窄——展示信息缩减

【栅格】

将页面变成几栏、几块——页面占比

12栅格在各类页面下的展示：

【2】h5页面动效设计

H5界面要少用与浏览器页面本身有冲突的操作

【3】使用Naive App的UI控件

facebook的Naive App的UI控件（左）和webUI控件（右）

---

五、移动端设计规范

1、主流操作软件

【1】ps

【2】AI

【3】Sketch

2、如何做设计规范？

（1）制定规范的时机

（2）规范文档分为哪几部分？

【UI规范例子】——网易考拉

1.色彩规范

控制辅助色数量

---

2.控件规范

---

3.文字和排版的规范

点击色为客户端主色调

字体小更精致

一般文字规范

一般文字配色规范（统一)

快速标注工具：MARKMAN

六、切图的基本规范

1、概念

2、哪些内容需要切图？

3、切图图片输出要求

4、切图尺寸

5、快速切图方法

6、切图命名规范

导航栏下按钮的命名各式

7、安卓设计中如何做.9.png切图？

用于安卓开发的一种特殊的图片格式

可以设定图形中可拉伸和不可拉伸区域

1、2标识了可以拉伸的区域

3、4标识了内容区域

拉伸后的效果

修改内容的横向尺寸后，文字不再贴边

将拉伸的点点在透明区域，这样拉伸就不会再拉伸icon，而是透明背景

8、如何做.9.png切图？

(1)可使用Draw9-patch

(2)用PS存为普通PNG格式

画布大小上下左右各留出一个像素

用像素铅笔工具，颜色纯黑

上下左右分别画点

保存时把后缀名改为.9.png

9、.9.png切图注意事项

七、如何做Web端设计规范？

1、色彩规范

2、图标规范

3、控件规范

4、排版规范

先标注一下文字上下和左右间距

5、字体规范

八、设计规范注意事项

1、规范设计的详尽程度

2、实际工作中UI规范的使用

3、UI规范的更新和拓展