WEB前端——UI设计对接规范

一、网页宽度及内容范围宽度

a)  解决PC端不同分辨率问题常见方法是把网页的内容范围设计在 1200px、1000px、990px和800px，这种方法会出现四套设计稿，给设计师带来较大的工作量，根据权威性的百度统计数据可以看出近24个月国内主流的显示屏分辨为：1920*1080和1366*768这两种，就是说只需要适应最大分辨率和最小分辨率就能满足大部分用户的需求；

i.  常规下拉式长页面

1.  屏幕分辨率：1920*1080、1440*900、1600*900、1280*800和1366*768

    正文：宽度1200px （保持与画布呈水平居中）

    一屏：高度900px

2.  屏幕分辨率：1024*768

    正文：宽度990px （保持与画布呈水平居中）

    一屏：高度900px

b)  还有其他分辨率前面数字比后面少的都是移动访问PC网站的产生的流量（例如：360*640），当移动端访问PC端时，为了适配移动端，我们采取的方法是把PC端网页按比例缩放至网页宽度等于设备宽度、或缩放至内容区域宽度，视情况而定；

                                             

二、板块设计

a)  版块风格：

    板块可以具有自己独立的风格，建议所有版块上的保持控件风格统一，功能一致，以便提高重用性；

b)  头部、脚部设计

i.  头部：

    高度：不能超过屏幕高度的五分一；

    风格：各版块保持统一头部，一个网站最多不要超过过三种不同的头部；

ii. 脚部：

    高度：不能超过屏幕高度的五分一；

    风格：各版块保持统一脚部，一个网站只能一种脚部（颜色可以例外）；

三、文字

a)  推广设计（专题）：

    推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做在图片上，不需要考虑用户的设备中有没有包含该字体。

b)  产品设计：

    产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择用户设备里自带的字体来进行设计。

c)  网页文本字使用规范：

i.  中文字体：

文本字一律采用14px字体，黑体一般很少做正文，主要用做标题、重点突出文字。建议使用14px + 20px字体的混合搭配，避免大面积使用加粗字体，字体请使用系统自带字体。

ii. 英文字体：

英文字体从9px开始就能清晰显示，选择空间大。10px、11px、12px、13px都是常见的字体大小，字体请使用系统自带字体。例：Tahoma、Arial、Verdana

例：

四、控件

    例如：

a)  按钮：

i.  控件系统：按钮的样式统一

ii.  解决开发效率、代码冗余问题

 

五、动画

    例如：

a)  火柴人 每个关节独立成一个图层，前端能做出更生动的动画

b)  背景图按元素需分层清晰，以京东的专题页的banner为例；

    

六、设计稿输出

a)  设计稿目录结构：

    JPEG：文件夹下存放每一个页面的定稿

    PSD：文件夹下存放PSD源文件

b)  PSD文件命名：

    PSD文件要统一命名，最终确认、废弃的稿件要分别标记。

命名准则：版块名称 + 内容页面 + 制作日期 + ABCD表示第几稿（PSD源文件、JPEG输出稿统一使用）

例如：环保回收 20170224-A

      环保回收 20170224-B

      环保回收-一键回收 20170224-A

      环保回收-一键回收 20170225-最终确认

      以此类推……

c)  参考线：最终提交给切图技术的源文件中，只能保留有效的参考线。（作用是确保设计、开发、动画能够准确无误的制作以及位置不出错。）

d)  PSD分组、细化：

    页面PSD里，每个版块对应一个组，多余没用的图层能删就删。每个版块的标题、图片、作品、按钮、文字等都用组别归类命名好。

●  整个页面PSD组别分类

●  单个组别的图层细化

e)  导航、选项卡按钮分组：

一般的按钮有三种状态：默认、经过、点击后

如果按钮有点击效果，请把点击前和点击后的效果都做出来，以分组的形式归类好，命名标示清楚；

分组方法一：每个组分别为一个整体的切换效果。（通用类型、少按钮状态）

 

 

 

 

 

分组方法二：将点击前、点击后的效果单独抽离分组。（适用于简单、多按钮状态）

七、 其他

 

*以上信息来源于网络