《WEB UI设计》网页视觉设计规范
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
英文字体从9px开始就能清晰显示，选择空间很大。10px-16px都是常见的字体大小。 英文字体请使用自带字体。例如。Tahoma、Arial、Verdana 注：随着H5的流行，可以加载非系统默认的字体显示。建议加载非字体字体，最好选 择英文字体加载，不要选择中文，因为中文相对于英文来说要大很多。会增加网站加 载时间。
表单
表单
BAR
TAB样式
留白
板块之间距离为整数值最好，方面前端同学操作计算。
BUTTON
阴影
容器
图文
标准意义
1. 统一识别 规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避免用户 在浏览时理解困难。
2. 节约资源 除活动推广等个性页面外，设计其他页面使用本规范标准能极大地减少设计时间， 达到节约资源的目的。
3. 重复利用 使用属性单元，页面新建时可执行此标准重复使用，减少无关信息，就是减
网页布局
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
网页栅格
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
产品栅格
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
பைடு நூலகம் 网页颜色
设计时请使用256WEB安全色，在ps中，选择RGB/8位，其他模式的色域很宽，颜色 范围很广，在不同显示屏会有失色现象。 活动专题页可不按此规范执行。
字体字号
网页正文采用微软雅黑，或宋体，12/14 px 字体大小，随着浏览器变大，扁平化设计 流行，以前适用的12PX 宋体，渐渐被大字号的字体替代。但是主流网站现在依旧适用 12px 系统默认字体。 标题使用 14、16 、18号字体
WEB UI设计
网站视觉设计规范
规范介绍
适用于WEB产品线的人机交互界面设计方面的指导手册。 贯穿以用户为中心的设计指导方向，根据WEB产品的特点指定除的一套规范，以达到 提升用户体验，控制产品质量，提高设计效率的目标。
谁去读设计规范
该设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员， 运营编辑人员的参照。
少对主题信息传达的干扰，利于阅读与信息传递。
4. 上手简单 再招收、加入新设计师或前段时，查看标准能使工作上手时间更快，减少出
错。
网页宽度
随着浏览器高清4K显示器的出现，pc端的网页宽度也随之变化。 所以如果是1280的分辨率，网页设计宽度最好为整数，正文宽度设计1000px， 涉及到有背景图案的专题页面，可设置快读为，1200px；背景颜色可平铺至1280宽 度。 同理，如果1440的分辨率，正文宽度为了向下兼容，依旧设置为1000px； 设计专业页面可设置为1200；背景颜色可平铺至1440宽度。 同理其他依照这个设计也是可以的。 如有客户需要，按照产品经理的要求去做即可。
表单
表单
BAR
TAB样式
留白
板块之间距离为整数值最好，方面前端同学操作计算。
BUTTON
阴影
容器
图文
标准意义
1. 统一识别 规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避免用户 在浏览时理解困难。
2. 节约资源 除活动推广等个性页面外，设计其他页面使用本规范标准能极大地减少设计时间， 达到节约资源的目的。
3. 重复利用 使用属性单元，页面新建时可执行此标准重复使用，减少无关信息，就是减
网页布局
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
网页栅格
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
产品栅格
板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当分区。 要符合网页栅格原则。
பைடு நூலகம் 网页颜色
设计时请使用256WEB安全色，在ps中，选择RGB/8位，其他模式的色域很宽，颜色 范围很广，在不同显示屏会有失色现象。 活动专题页可不按此规范执行。
字体字号
网页正文采用微软雅黑，或宋体，12/14 px 字体大小，随着浏览器变大，扁平化设计 流行，以前适用的12PX 宋体，渐渐被大字号的字体替代。但是主流网站现在依旧适用 12px 系统默认字体。 标题使用 14、16 、18号字体
WEB UI设计
网站视觉设计规范
规范介绍
适用于WEB产品线的人机交互界面设计方面的指导手册。 贯穿以用户为中心的设计指导方向，根据WEB产品的特点指定除的一套规范，以达到 提升用户体验，控制产品质量，提高设计效率的目标。
谁去读设计规范
该设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员， 运营编辑人员的参照。
少对主题信息传达的干扰，利于阅读与信息传递。
4. 上手简单 再招收、加入新设计师或前段时，查看标准能使工作上手时间更快，减少出
错。
网页宽度
随着浏览器高清4K显示器的出现，pc端的网页宽度也随之变化。 所以如果是1280的分辨率，网页设计宽度最好为整数，正文宽度设计1000px， 涉及到有背景图案的专题页面，可设置快读为，1200px；背景颜色可平铺至1280宽 度。 同理，如果1440的分辨率，正文宽度为了向下兼容，依旧设置为1000px； 设计专业页面可设置为1200；背景颜色可平铺至1440宽度。 同理其他依照这个设计也是可以的。 如有客户需要，按照产品经理的要求去做即可。