移动端网站设计参考规范（初稿）

找了一些这方面的资料，都是零零散散的，东西太多看起来比较累人，所以把一些有用的实际数据提炼了出来，仅供参考。

一、约定规范

1. 团队内部使用相同版本Photoshop，Illustrator

2. 文件命名规范“版本号+页面内容+修改最新序号”（例：1.0_产品列表01.psd)

3. PSD文件,图层分组命名，保持一个清晰的图层结构

二、布局

设计稿尺寸

1. 设计师按宽度750px*1334px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做

2. 等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图

3. 生成@3x切图资源，以及宽度750px的设计标注图。

组件化

1. 网页一般有头部、底部、侧边栏、搜索框，导航，多形态按钮，分页，遮罩层，输入框等。
   以及一些业务上的价格组件，产品组件，表格组件，可复用的地方请组件化。

2. 按钮的形态多变，设计按钮在悬浮、单击、禁用等情况下的样式。按钮的颜色，大小，直角圆角保持可控类型数量。

字体

1. 字体采用冬青黑或者华文黑体。

2. 模块栏目字体32px，小标题和正文字体28px或30px,名称和标注22px或24px,提醒文字18px。

3. 默认行高32×1.6=52px

4. – 价格文字：#CC0000
   – 默认文字：#333333

– 次要文字：#666666
– 辅助文字：#999999

颜色

1. 设计使用256web安全色，PS中RGB/8位

2. 背景色分割线
   – 背景颜色：#EEEEEE

– 分割线 ：#E5E5E5
– 深分割线：#CCCCCC

三、注意细节

1. 适配内容变化（文字长度，图片尺寸），屏幕尺寸

2. 考虑真实场景下的用户体验，无图，无数据，以及错误异常的情况

3. 图片最大宽度建议700px。

4. 所有网页用到的同一张图保持相同宽高比，宽高均为偶数像素。

5. 图片优化和压缩。使用web格式输出图片，在保证图片不失真的情况下尽量输出最小容量的图片。

四、相关工具

1. 字体图标 阿里巴巴矢量图标库

2. 线框图工具 摩客

3. 标注和测量工具 马克鳗

4. 切图工具1 ASSISTOR PS

5. 切图工具2 Cutterman

6. 设计 Sketch

五、参考文章

1. ios&安卓设计标准规范

2. 一套完整的UI设计规范手册（IOS版）

3. iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

4. 还原活的设计