UE设计规范总结

1、目录1UI/UE设计什么2设计规范介绍3制定标准的意义4设计软件5设计规范标准6总结UI/UE设计什么UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。UE设计一般指游戏设计或游戏相关设计，还有网站的ue设计，其实就是UserExperience的缩写。用户体验（userexperience）是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，包括情感、信仰、 爱好、认知印象、生 理和心理反应，以及 接受的问题

2、疑惑和 BUG的程度。设计规范介绍设计规范是适用于人机交互界面设计师、用户体验设计师，前台技术工程师，发布人支持人员以及运维编辑人员的参考。贯穿以用户为中心的设计指导方向，根据界面的特点统一的规范，以达到提升用户体验，控制产品设计质量，提高效率的目的。制定标准的意义操作方便沟通便捷省时省力统一：设计风格；色彩；布局。舒适：色彩搭配；结构布局；操作流程。美观：整体效果的美观。便捷：能点选就不输入；能少层级就不多； 界面元素一目了然。设计软件Photoshop、Illustrator 、PageMaker、 CorelDraw、Freehand等。PhotoshopIllustratorCorel

3、Draw设计师常用的软件：PS：刚开始做设计的时候很纠结选择哪款设计软件，其实一个作品好与不好不关乎你用的是什么软件，只要你熟练任何一个软件都能设计出好的作品。所以希望看到这里的新手朋友们不要再纠结用什么软件设计，只要能表达出想要的东西都是好作品。设计分类及标准手机客户端设计PAD客户端设计软件UI设计Web设计u主题鲜明u形式与内容统一u强调整体u减少层次WEB设计要求及原则WEB设计的特点l交互性：及时交互，主动交互l持续性：信息的技续更新l多维性：源于超链接，导航清晰l多媒体：综合运用多媒体元素l布局不可控： 操作系统不同、浏览器种类与版本不同、屏幕大小与分辨率不同。Web设计的标准网页

4、宽度如果是1280的分辨率，网页设置成1258的宽度会安全一些，正文宽度设计为980px，涉及到有背景图案的专题页时，宽度可设置成1440px，正文宽度设计为980px。颜色设计时请使用256Web安全色，在photoshop新建文件中最好选择RGB/8位，因为其他模式的色域很宽，颜色范围很广，在不同显示屏失色现象较为严重些。活动专题可根据需求进行调整。网页正文一律采用宋体12号(12px)字体，标题采用黑体。建议使用12号+14号的混合搭配。英文字体从9px开始就能清晰显示，选择空间很大。10px/11px/12px/13px都是常见的字体大小，字体请使用系统自带字体。例：TahomaAri

5、alVerdana版块排版在视觉上尽量符合纵向分割，横向模块间距统一，纵向可根据页面需求适当区分。栏目间距8px-10px产品宽度160px 产品间距30px-40px（PS：间距40px应用于二级类目，间距30px应用于三级类目）字体字号页面布局网页栅格产品栅格WEB设计的标准表单边框默认颜色：#A0A0A0 输入框高度：20px居中字体大小：12px/14px（可选）6pxu简洁u易于操作u避免输入u信息扁平化u增强交互WEB设计要求及原则手机客户端操作平台介绍不同的平台手机的设计风格、操作方式、硬件配置都存在很大的差异。个平台都有各自的设计指南（UI Style），其对应的手机的硬件也有

6、各自的特点， 如iPhone的home键，Android 的back键，blackberry的滚轮等等。特别提一下Palm，Palm的web OS真的值得手机交互设计师研究一下（手机 Palm pre）。因此，在设计上，不仅要了解平台的设计指南，同时需要考虑平台的硬件特征，使自己设计的应用不仅符合平台的交互特性，并能兼容平台上硬件使用习 惯，提高应用的可用性。当前的主流平台主要包括iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。IPHONE界面尺寸PS：我在设计时一般参考iPhone的尺寸进行设计，其他系统的手机尺寸也遵循了 iPhone的设

7、计原则，技术只需要在原效果图对其进行同比例缩放即可。IPHONE图标尺寸PAD客户端操作平台介绍当前的主流平台主要包括iOS、Android、Win Phone7等。尺寸尺寸 基本分为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按钮分别放置在窄的两侧。

8、总的趋势：数量有1个的，3个的，4个的，但绝大多数都放置在屏幕窄的一侧，很少把物理按键分散放置的。 屏幕默认方屏幕默认方 向向 水平方向的居多，仅三星为代表的7寸屏默认竖直方向。PAD屏幕分辨率及尺寸IPAD界面尺寸IPAD界面尺寸手机/PAD客户端字体标准 文本字体 标题 大小:28像素 字体:微软雅黑 颜色: #505050 内容 大小:22像素 字体:微软雅黑 颜色: #6e6e6e 时间 大小:16像素 字体:微软雅黑 颜色: #828282 菜单 大小:36像素 字体:宋体字 PS：合适的字体设置可以减少了用户视觉上的干扰、增强了引导性，让原本“拥挤”了的各种内 容和信息的界面显得更

9、加地“透气”。软件UI通用设计原则字体使用原则界面配色原则按钮设计原则文本校验原则兼容性和个性化原则字体使用原则中文字体l 同级菜单，字体大小格式统一。l 使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般采 用14px。l 推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩云、 隶书。英文字体l 默认字体使用“Tahoma”，大小12px。标题字体使用“Trebuchet MS。”l 表单字段名左对齐，或者中线对齐。文字对齐原则l 主色调+次主色调+辅色。l 要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用蓝色； 环保软件易用用绿色。l 界面配色

10、要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字l 同一页面，不宜采用3种以上颜色。l 链接应该有3种颜色：未点击，点击中，点击后。界面配色原则按钮设计原则宜使用圆角图标、渐变效果。图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。图标树的大小是16px，树的大小适合宽度为210px。保持与系统整体特点以及风格一致。使用让用户容易联想到的事物，按钮能清晰表达意思。内页中按钮使用平面效果、不使用三维效果图。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按 钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大

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