UI设计规范总结

PC设计规范

1、页面尺寸：

建画布一般1920px*1080px(高度建议可自定)建议视觉中心网站宽度1000px以内，推荐尺寸960px，如果超出1000px，推荐尺寸1200px。（两边需留白，目的自适应）；建议网站高度控制在2-3屏内，大概高度控制在2000px以内为宜。一般一屏高度在710px以内,否则需要下滑，不下滑会看不到下方内容。

2、字号：

安卓中文常用微软雅黑，英文常用HelveticalNeue，中文备选字体：方正兰亭黑；英文备选字体Helvetica、Arial、DIN

IOS常用字体：苹方

字号大小：

中文：最低12px起步，12、14……偶数递增

H1标题字36px,行间距60px,   H2副标题字24px,行间距40px,  正文14、16px,行间距24px,修饰提示性文字12px,行间距20px。行间距=行高-字号（行高一般为20px）

【常用字号18-22px】

英文：最低10px起步，10、12……偶数递增

字体颜色：

常规颜色：#666666（常用大面积范围文本子，在列表中标题字呈现加粗）

重要文字：#333333（常用于标题和关键性文字）

警示文字：#ff0000(常用于提示性文字，警示文字)

次级文字：#999999（常用于帮助信息，不需太在意的文字）

3、网页栅格:

（常规中间区域1000px、工具类产品1200px）

4、产品栅格:

一般为W=(A*n)-i    (W为网页宽度，A为元素快+间隙，n为元素块数）

5、信息表单:

两个输入框间距一般为10px,提示框与本体的输入框为5px,文本与文本的间距为18px

6、bar:

所有Bar运用文字为宋体，12号字体Bar高度为25px，14号Bar高度为30px

7、button:

 

 

APP设计规范

1、首先是状态栏的大小，也就是手机最上端显示电量条那里的文字大小，22px；

2、在状态栏下方是导航栏，导航栏的文字大小值不是固定的，范围是32-36px，一般会用34px较多一点，不过也根据不同APP自行调整；

3、内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px，所有的大小都是偶数的，不要用奇数的字号大小；

4、手机页面的最下方的是标签栏，就比如微信最下方的四个小图标（我、发现、通讯录和微信），这里的文字大小为20px；

5、对于文章列表型的字号大小，一般主标题、副标题、提示性文案大小分别为34px、28px、24px，像作者是某某某，就是属于提示性文案了；

6、搜索框是很常见的一个控件，一般搜索框的高度做成58px，里面的文字，一般是“搜索”2个字，字号是28px；

【字号一定要是偶数的，在app 中】

 

 

工作经验常见问题总结

1、设计需求分析

eg：拿到需求文档最好先开会讨论接需求、明白需求方向、要求、目的

2、APP、PC端设计时前后一致性（统一性）问题：

eg:弹窗的关闭设计位置、样式保证整个系统内前后一致（可根据比重、优先级调节大小）

3、交互设计

eg：鼠标三态效果、鼠标移入移出、悬浮、点击

4、规范性问题

eg：app、pc页面字体板式，参考上述设计规范

5、层级、优先级

eg：标题与正文的颜色与字号应该有视觉差异、突出优先级排列

（eg很多、不一一列举）