UE设计规范总结

目录1UI/UE设计什么2设计规范介绍3制定标准的意义4设计软件5设计规范标准6总结UI/UE设计什么•UI即UserInterface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。•UE设计一般指游戏设计或游戏相关设计，还有网站的ue设计，其实就是UserExperience的缩写。用户体验（userexperience）是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，包括情感、信仰、爱好、认知印象、生理和心理反应，以及接受的问题疑惑和BUG的程度。设计规范介绍设计规范是适用于人机交互界面设计师、用户体验设计师，前台技术工程师，发布人支持人员以及运维编辑人员的参考。贯穿以用户为中心的设计指导方向，根据界面的特点统一的规范，以达到提升用户体验，控制产品设计质量，提高效率的目的。制定标准的意义操作方便统一：设计风格；色彩；布局。舒适：色彩搭配；结构布局；操作流程。美观：整体效果的美观。便捷：能点选就不输入；能少层级就不多；界面元素一目了然。设计软件Photoshop、Illustrator、PageMaker、CorelDraw、Freehand等。PhotoshopIllustratorCorelDraw设计师常用的软件：PS：刚开始做设计的时候很纠结选择哪款设计软件，其实一个作品好与不好不关乎你用的是什么软件，只要你熟练任何一个软件都能设计出好的作品。所以希望看到这里的新手朋友们不要再纠结用什么软件设计，只要能表达出想要的东西都是好作品。设计分类及标准手机客户端设计PAD客户端设计软件UI设计Web设计主题鲜明形式与内容统一强调整体减少层次WEB设计要求及原则WEB设计的特点交互性：及时交互，主动交互持续性：信息的技续更新多维性：源于超链接，导航清晰多媒体：综合运用多媒体元素布局不可控：操作系统不同、浏览器种类与版本不同、屏幕大小与分辨率不同。Web设计的标准网页宽度•如果是1280的分辨率，网页设置成1258的宽度会安全一些，正文宽度设计为980px，涉及到有背景图案的专题页时，宽度可设置成1440px，正文宽度设计为980px。颜色•设计时请使用256Web安全色，在photoshop新建文件中最好选择RGB/8位，因为其他模式的色域很宽，颜色范围很广，在不同显示屏失色现象较为严重些。活动专题可根据需求进行调整。网页正文一律采用宋体12号(12px)字体，标题采用黑体。建议使用12号+14号的混合搭配。英文字体从9px开始就能清晰显示，选择空间很大。10px/11px/12px/13px都是常见的字体大小，字体请使用系统自带字体。例：Tahoma\Arial\Verdana版块排版在视觉上尽量符合纵向分割，横向模块间距统一，纵向可根据页面需求适当区分。栏目间距8px-10px产品宽度160px产品间距30px-40px（PS：间距40px应用于二级类目，间距30px应用于三级类目）字体字号页面布局网页栅格产品栅格WEB设计的标准表单边框默认颜色：#A0A0A0输入框高度：20px居中字体大小：12px/14px（可选）6px简洁易于操作避免输入信息扁平化增强交互WEB设计要求及原则手机客户端操作平台介绍•不同的平台手机的设计风格、操作方式、硬件配置都存在很大的差异。个平台都有各自的设计指南（UIStyle），其对应的手机的硬件也有各自的特点，如iPhone的home键，Android的back键，blackberry的滚轮等等。特别提一下Palm，Palm的webOS真的值得手机交互设计师研究一下（手机Palmpre）。因此，在设计上，不仅要了解平台的设计指南，同时需要考虑平台的硬件特征，使自己设计的应用不仅符合平台的交互特性，并能兼容平台上硬件使用习惯，提高应用的可用性。当前的主流平台主要包括iOS、Android、Symbian、Blackberry、WinPhone7、WebOS等。IPHONE界面尺寸PS：我在设计时一般参考iPhone的尺寸进行设计，其他系统的手机尺寸也遵循了iPhone的设计原则，技术只需要在原效果图对其进行同比例缩放即可。IPHONE图标尺寸PAD客户端操作平台介绍•当前的主流平台主要包括iOS、Android、WinPhone7等。尺寸基本分为3个尺寸，5寸（dellstreak），7寸（多），10寸（多）。屏幕分辨率800×480和1024×600的居多屏幕比例16:10,17:10，都不是传统的4:3的比例，这和iPad比较大的区别物理按键数量和位置1.1.类似iPad的单主屏键，位于窄侧的正中2.AndroidPad的多按钮，位于窄侧靠上位置3.aigoPade700按钮分别放置在窄的两侧。总的趋势：数量有1个的，3个的，4个的，但绝大多数都放置在屏幕窄的一侧，很少把物理按键分散放置的。屏幕默认方向水平方向的居多，仅三星为代表的7寸屏默认竖直方向。PAD屏幕分辨率及尺寸IPAD界面尺寸IPAD界面尺寸手机/PAD客户端字体标准文本字体标题大小:28像素字体:微软雅黑颜色:#505050内容大小:22像素字体:微软雅黑颜色:#6e6e6e时间大小:16像素字体:微软雅黑颜色:#828282菜单大小:36像素字体:宋体字PS：合适的字体设置可以减少了用户视觉上的干扰、增强了引导性，让原本“拥挤”了的各种内容和信息的界面显得更加地“透气”。软件UI通用设计原则字体使用原则界面配色原则按钮设计原则文本校验原则兼容性和个性化原则字体使用原则中文字体同级菜单，字体大小格式统一。使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般采用14px。推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩云、隶书。英文字体默认字体使用“Tahoma”，大小12px。标题字体使用“TrebuchetMS。”表单字段名左对齐，或者中线对齐。文字对齐原则主色调+次主色调+辅色。要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用蓝色；环保软件易用用绿色。界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字同一页面，不宜采用3种以上颜色。链接应该有3种颜色：未点击，点击中，点击后。界面配色原则按钮设计原则•宜使用圆角图标、渐变效果。•图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。•图标树的大小是16px，树的大小适合宽度为210px。•保持与系统整体特点以及风格一致。•使用让用户容易联想到的事物，按钮能清晰表达意思。•内页中按钮使用平面效果、不使用三维效果图。•按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别。•按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击时状态。•按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功能时，也应该提供鼠标悬停提示信息。•操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按钮和帮助按钮向右对齐。•折叠菜单的标题栏应该做成”展开/折叠”的响应区域，方便鼠标点击。•有图标和功能说明文字的，实现点击图片和说明文字，都可以达到预期的页面。•相同功能按钮的描述一致性文本校验原则•必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。若必输项未填写完毕或者填写不符合规则就提交，应给出说明信息并能自动获得焦点。•非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显示为Null）。•焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提示，引导用户更正。•身份证号、电子邮箱地址等特定字段的格式须符合需求的规定。•所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从当前输入框移开。若用户在输入字符达到最大允许的长度后继续输入，则不再响应超出字符。（粘贴超出给出提示）•密码输入框内容显示为”*”或者”•”。•用户名输入框应注明是否允许输入汉字等。•日期显示格式为：yyyy-mm-dd。尽量使用时间控件，并屏蔽手动输入。如果允许手动输入，则不允许字符串、汉字、特殊字符等。不允许截止日期小于开始日期。•没有类型限制的输入区域，应可录入汉字、字母、数字、*&%$#@!~等所有类型字符。•数值字段只能输入0~9，视情况决定是否可以输入”-”以及”.”。兼容性和个性化原则