UI设计规范V1.0-2

1、PSA 设计规范 V1.0 ISOFTSTONE 2016/04/06目录一、 基础规范01 网页宽度02 网页主题色03浏览器兼容性04 搜索框设计规范 基础规范 应用场景05 页码设计规范 普通页码翻页 小型页码翻页06 文字的编排与设计 文字大小 文字颜色 文字行距 英文字体规范 文字链接二、参考指南01 页面修饰 简单的光影效果 质感的表现 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用04 图标表意07 整齐的概念和应用08 模块化表现09 页脚信息一、网页宽度最新显示器分辨率比例调查：备注：1.正常情况下：960px1200px，页面居中显示。不过现在显示屏的分辨率一般

2、在1024以上比如现在的笔记本的分辨率一般是1336*768新液晶显示屏的分辨率也都已经达到了1440*900所以现在设计的话一般是960px,980px,1000px,1024px，1200px2.根据屏幕分辨率调用不同的样式，设定两个页面宽度。一般1000px和1200px，分辨率大于等于1280就用1200px宽度的。3.最好的做法就是做成自适应的！（推荐）任何大于1024的分辨率都能满屏显示，自适应对页面WEB前端及扩展要求很高。 目前主流分辨率：1920*1080在此状态下，默认使用 1200px 的网页宽度，页面居中显示。二、网页主题色PSA主题色有主题色有6种，产品的主题色应和种

3、，产品的主题色应和PSA的主题色对应。的主题色对应。备注：各别产品有特殊情况另议。三、浏览器兼容网页兼容浏览器网页兼容浏览器浏览器分为：IE内核浏览器和非IE内核浏览器。IE内核内核：搜狗、遨游、360、世界之窗等等基本都是基于IE内核构建。非非IE内核：内核：火狐、谷歌浏览器、safair（苹果浏览器）、Opera我们的产品需要兼容以下浏览器：IE8及以上，360浏览器，火狐浏览器，谷歌浏览器运营同学：查看配置页面在主流浏览器上是否正常开发同学：自测功能点在主流浏览器上是否准确前端同学：开发|测试时校验页面在主浏览器上是否一致测试同学：验证功能点在主浏览器上是否正常备注：客户特殊要求除外。四

4、、搜索框设计规范1.基础规范 文本框a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b. 搜索组件中使用的文本框必须为单行文本框c. 文本框的长度不得少于130个像素 高度不得低于18个像素 帮助信息 - （目前产品的搜索没有这么复杂，下面搜索框仅供参考）a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等，b.“限定标签提示”一般放在搜索框的上面c. “热门关键词提示”一般放在搜索框下面d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输

5、入关键词”这样的提示不应出现. 四、搜索框设计规范d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 搜索按钮a. 搜索按钮一般包含图标形式和文字形式两种b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素c. 搜索button规范文字为“搜索”避免采用其他描述。比如：同一个web产品中搜索的位置和表现形式尽量保持一致四、搜索框设计规范2. 应用场景 强表现方式： 加大搜索框的显示，输入框内采用大字体（14号） 突出搜索button的表现，更直观，更有点击欲 位置放在页头的中间并明显标示四、搜索框设计规范 输入框内采用小字体（12号）长度大约以刚好放完提示文字为基准 弱

6、化搜索button的表现，可考虑用icon代替搜索框通常放在页头的右上角2. 应用场景 弱表现方式： 搜索框弱显示五、页码设计规范1.普通页码翻页的表现方法： 页码由三部分构成： 一为页码状态区，表明页码在当前第几页位置以及共有多少页； 二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区，三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示五、页码设计规范 链接页码为简明独立，不加任何修饰的数字形式 链接颜色由当前页面设计决定 数字大小建议为12-14px ,以易于点击为原则.2. 小型页码翻页的表现方法： 五、页码设计规范2.案例 (颜色根据产品主题色定义)六、文字的编排与设计1.文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不