UE设计规范总结

1、 目录目录 1UI/UEUI/UE设计什么设计什么 2设计规范介绍设计规范介绍 3制定标准的意义制定标准的意义 4设计软件设计软件 5 设计规范标准设计规范标准 6总结总结 UE设计规范总结 UI/UEUI/UE设计设计什么什么 UIUI即即User Interface(User Interface(用户界面用户界面) )的的 简称简称。UI设计是指对软件的人机 交互、操作逻辑、界面美观的整 体设计。好的UI设计不仅是让软 件变得有个性有品味，还要让软 件的操作变得舒适、简单、自由， 充分体现软件的定位和特点。 UEUE设计一般指游戏设计或游戏设计一般指游戏设计或游戏 相关设计，还有网站的相关

2、设计，还有网站的ueue设计，设计， 其实就是其实就是UserExperienceUserExperience的缩写。的缩写。 用户体验（userexperience）是指 用户访问一个网站或者使用一个 产品时的全部体验。他们的印象 和感觉，包括情感、信仰、 爱好、认知印象、生 理和心理反应，以及 接受的问题疑惑和 BUG的程度。 UE设计规范总结 设计规范设计规范介绍介绍 设计规范是适用于人机交互界面设计师、用户体验设计师，前台技术 工程师，发布人支持人员以及运维编辑人员的参考。贯穿以用户为中 心的设计指导方向，根据界面的特点统一的规范，以达到提升用户体 验，控制产品设计质量，提高效率的目的

3、。 UE设计规范总结 制定标准的制定标准的意义意义 操作 方便 沟通 便捷 省时 省力 统一：设计风格；色彩；布局。 舒适：色彩搭配；结构布局；操作流程。 美观：整体效果的美观。 便捷：能点选就不输入； 能少层级就不多； 界面元素一目了然。 UE设计规范总结 设计软件设计软件 Photoshop、Illustrator、PageMaker、 CorelDraw、Freehand等。 PhotoshopIllustrator CorelDraw 设计师常用的软件：设计师常用的软件： PS：刚开始做设计的时候很纠结选择哪款设计软件，其实一个作品好与不好不关乎你 用的是什么软件，只要你熟练任何一个软

4、件都能设计出好的作品。所以希望看到这里 的新手朋友们不要再纠结用什么软件设计，只要能表达出想要的东西都是好作品。 UE设计规范总结 设计分类及标准设计分类及标准 手机客户端设计手机客户端设计 PADPAD客户端设计客户端设计软件软件UIUI设计设计 WebWeb设计设计 UE设计规范总结 u主题鲜明 u形式与内容统一 u强调整体 u减少层次 WEBWEB设计要求及原则设计要求及原则 UE设计规范总结 WEBWEB设计的特点设计的特点 l交互性：及时交互，主动交互 l持续性：信息的技续更新 l多维性：源于超链接，导航清晰 l多媒体：综合运用多媒体元素 l布局不可控： 操作系统 不同、浏览器种类与

5、版本不同、 屏幕大小与分辨率不同。 UE设计规范总结 WebWeb设计设计的标准的标准 网页宽度网页宽度 如果是1280的分辨率，网页设置成1258 的宽度会安全一些，正文宽度设计为 980px，涉及到有背景图案的专题页时， 宽度可设置成1440px，正文宽度设计为 980px。 颜色颜色 设计时请使用256Web安全色，在 photoshop新建文件中最好选择RGB/8位， 因为其他模式的色域很宽，颜色范围很 广，在不同显示屏失色现象较为严重些。 活动专题可根据需求进行调整。 UE设计规范总结 网页正文一律采用宋体12号(12px)字体，标题采用黑体。建议使用12号+14号的混 合搭配。 英

6、文字体从9px开始就能清晰显示，选择空间很大。10px/11px/12px/13px都是常 见的字体大小，字体请使用系统自带字体。例：TahomaArialVerdana 版块排版在视觉上尽量符合纵向分割，横向模块间距统一，纵向可根据页 面需求适当区分。 栏目间距8px-10px 产品宽度160px 产品间距30px-40px（PS：间距40px应用于二级类目，间距 30px应用于三级类目） 字体字号 页面布局 网页栅格 产品栅格 WEBWEB设计设计的标准的标准 UE设计规范总结 表单表单 边框默认颜色：#A0A0A0 输入框高度：20px居中 字体大小：12px/14px（可选） 6px

7、UE设计规范总结 u简洁 u易于操作 u避免输入 u信息扁平化 u增强交互 WEBWEB设计要求及原则设计要求及原则 UE设计规范总结 手机客户端操作平台介绍手机客户端操作平台介绍 不同的平台手机的设计风格、操作方式、硬件配置都存在很大的差异。 个平台都有各自的设计指南（UI Style），其对应的手机的硬件也有各自 的特点， 如iPhone的home键，Android 的back键，blackberry的滚轮等等。 特别提一下Palm，Palm的web OS真的值得手机交互设计师研究一下（手 机 Palm pre）。因此，在设计上，不仅要了解平台的设计指南，同时需 要考虑平台的硬件特征，使自

8、己设计的应用不仅符合平台的交互特性， 并能兼容平台上硬件使用习 惯，提高应用的可用性。当前的主流平台主 要包括iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。 UE设计规范总结 IPHONEIPHONE界面尺寸界面尺寸 PS：我在设计时一般参考iPhone的尺寸进行设计，其他系统的手机尺寸也遵循了 iPhone的设计原则，技术只需要在原效果图对其进行同比例缩放即可。 UE设计规范总结 IPHONEIPHONE图标尺寸图标尺寸 UE设计规范总结 PADPAD客户端操作平台介绍客户端操作平台介绍 当前的主流平台主要包括iOS、Android、Wi

9、n Phone7等。 UE设计规范总结 尺寸尺寸 基本分为3个尺寸，5寸（dell streak），7寸（多），10寸 （多）。 屏幕分辨率屏幕分辨率 800480和1024600的居多 屏幕比例屏幕比例 16:10,17:10，都不是传统的4:3的比例，这和iPad比较大的 区别 物理按键数量物理按键数量 和位置和位置 1.1. 类似iPad的单主屏键，位于窄侧的正中 2. Android Pad的多按钮，位于窄侧靠上位置 3. aigo Pad e700按钮 分别放置在窄的两侧。 总的趋势：数量有1个的，3个的，4个的，但绝大多数都 放置在屏幕窄的一侧，很少把物理按键分散放置的。 屏幕默认

10、方屏幕默认方 向向 水平方向的居多，仅三星为代表的7寸屏默认竖直方向。 PADPAD屏幕分辨率及尺寸屏幕分辨率及尺寸 UE设计规范总结 IPADIPAD界面尺寸界面尺寸 UE设计规范总结 I IPADPAD界面尺寸界面尺寸 UE设计规范总结 手机手机/PAD/PAD客户端字体标准客户端字体标准 文本字体 标题 大小:28像素 字体:微软雅黑 颜色: #505050 内容 大小:22像素 字体:微软雅黑 颜色: #6e6e6e 时间 大小:16像素 字体:微软雅黑 颜色: #828282 菜单 大小:36像素 字体:宋体字 PS：合适的字体设置可以减少了用户视觉上的干扰、增强了引导性，让原本“拥

11、挤”了的各种内 容和信息的界面显得更加地“透气”。 UE设计规范总结 软件软件UIUI通用设计原则通用设计原则 字 体 使 用 原 则 界 面 配 色 原 则 按 钮 设 计 原 则 文 本 校 验 原 则 兼 容 性 和 个 性 化 原 则 UE设计规范总结 字体使用原则字体使用原则 中文字体中文字体 l 同级菜单，字体大小格式统一。 l 使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般 采 用14px。 l 推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华 文彩云、 隶书。 英文字体英文字体 l 默认字体使用“Tahoma”，大小12px。标题字体使用“Tr

12、ebuchet MS。” UE设计规范总结 l 表单字段名左对齐，或者中线对齐。 文字对齐原则文字对齐原则 l 主色调+次主色调+辅色。 l 要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用 蓝色； 环保软件易用用绿色。 l 界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色 文字 l 同一页面，不宜采用3种以上颜色。 l 链接应该有3种颜色：未点击，点击中，点击后。 界面配色原则界面配色原则 UE设计规范总结 按钮设计原则按钮设计原则 宜使用圆角图标、渐变效果。 图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。 图标树的大小是16px

13、，树的大小适合宽度为210px。 保持与系统整体特点以及风格一致。 使用让用户容易联想到的事物，按钮能清晰表达意思。 内页中按钮使用平面效果、不使用三维效果图。 按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内 按 钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显 示位置要统一。功能差异大的按钮应该有所区别。 UE设计规范总结 按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标 放在 上面但未点击的状态；点击时状态；不能点击时状态。 按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不 足以 准确传达按钮的功能时，也应该提供鼠标悬停提示信息。

14、操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设 置功 能按钮和帮助按钮向右对齐。 折叠菜单的标题栏应该做成” 展开/折叠”的响应区域， 方便鼠标点击。 有图标和功能说明文字的， 实现点击图片和说明文字， 都可以达到预期的页面。 相同功能按钮的描述一致性 UE设计规范总结 文本校验原则文本校验原则 必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。 若必输项未填写完毕或者填写不符合规则就提交，应给出说明信息并能自 动获得焦点。 非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显 示 为Null）。 焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提 示， 引导用户更正。 身份证号、电子邮箱地址等特定字段的格式须符合需求的规定。 所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从 当 前输入框移开。若用户在输入字符达到最大允许的长度后继续输入， 则不再响应超出字符。（粘贴 超出给出提示） 密码输入框内容显示