ui统一培训

WEB类软件UI规范介绍说明总师办娄月2014.111UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析1UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析UI统一规范概述公司现阶段存在多种WEB产品和基于WEB的现场项目，从单个软件本身来讲，UI已经基本趋于规范。但从公司整体WEB产品角度看，还有很多UI设计过程有待统一。基于以上现状，目前最合适的办法是使用一套有参考性的设计准则，并结合实际项目，对各种场景规范进行逐渐补充，使得所有WEB软件能从公司产品层面进行统一。通过遵循统一设计准则，能使得开发人员更容易设计出界面风格一致化的软件。同时遵循统一的操作规范，可以以标准化的方式设计界面，提高工作效率。1UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析用户界面设计准则的比较下表列出了两类最著名的业界通用用户界面设计准则：Shneiderman（1987）；Shneiderman&Plaisant（2009）Nielsen&Molich①力争一致性②提供全面的可用性③提供信息充足的反馈④设计任务流程以完成任务⑤预防错误⑥允许容易的操作反转⑦让用户觉得他们在掌控⑧尽可能减轻短期记忆的负担①一致性和标准②系统状态的可见性③系统与真实世界的匹配④用户的控制与自由⑤错误预防⑥识别而不是回忆⑦使用灵活高效⑧具有美感的和极简主义的设计⑨帮助用户识别、诊断错误，并从错误中恢复⑩提供在线文档和帮助基本设计准则根据公司WEB类软件产品化的要求，结合业界通用的规范，我总结了以下适合改进我们产品UI现状的基本设计准则：一致性原则易用性原则用户为主导原则高响应度交互原则一致性原则一致性：无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，实现开发、设计和使用的一致。以达到界面直观，软件对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。优点：用户使用起来能够建立起精确的心理模型，使用熟练了一个系统界面后，切换到另外一个系统界面能够很轻松的推测出各种功能。降低培训、支持成本，支持人员不用费力逐个指导。给用户统一感觉，不觉得混乱，心情愉快，支持度增加。易用性原则保证一个应用程序、WEB服务或者设备对其用户展现一套尽量小的、易用的和任务相关的概念。以下有助于达到易用性：用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。按功能将界面划分局域块，用容器框括起来,并带功能说明或标题。复选框和选项框按选择几率的高底而先后排列。专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词语。用户为主导原则明确用户是软件的中心，界面的设计和功能的操作方式始终以用户的角度考虑实现。为了促进学习，交互系统应提供低风险的环境，使得用户不怕探索，愿意尝试新东西。例如应实现以下几点：尽可能防止出错。停用不合理命令。向用户清晰的展示他们做了什么（比如，不小心删除了一段文字），这样错误就容易被发现。让用户能轻松地撤销、反转或者修正错误。高响应度交互原则响应度与性能相关，但又不一样：性能是以单位时间里的计算次数来衡量的，响应度是以服从用户在时间上的要求及用户满意度来衡量的。高响应度的交互系统并不一定是高性能的，高响应度的系统即使无法立刻完成用户的请求，也能要用户了解状况。它们对用户的操作和执行情况提供反馈，并且根据人类感觉、运动和认知的时长来安排反馈的优先顺序。具体应该做到：高响应度交互原则立刻告知已经接受到你的输入；对操作需要多长时间完成提供一定的指示；0-5秒鼠标显示成为沙漏；5秒以上显示处理窗口，或显示进度条；在等待时允许你去做其他事情；对最常见的用户请求做出预期；高响应度交互原则响应度差的系统无法达到人们对时间的要求，无法与用户保持一致。不能对用户操作做出及时的反馈，用户就不能确定他们做了什么或者系统在做什么。用户在无法预期的时间里等待，还不知道得等上多久。用户的工作空间也被严重的限制。下面是一些响应度差的具体例子。高响应度交互原则对于按下按钮、滑动滚动条或者操作某对象的反馈迟缓；耗时的操作阻断其他活动，还不能被取消；对长时间运行的操作需要多长时间不提供任何线索；执行用户没有请求的系统后台任务而忽略用户输入；1UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析界面规格分辨率2014年8月使用率2014年8月占有率1366*76822.74%25.14%1440*90020.89%20.20%1024*76817.61%17.17%1920*108014.41%14.24%1280*8005.94%6.20%1280*10244.80%4.64%1680*10504.13%3.97%1280*7683.00%3.32%800*6002.33%1.17%1152*8642.13%2.02%使用率：是指该屏幕分辨率使用者当日浏览量占网民浏览总量的比例。占有率：是指用该屏幕分辨率的独立访客数在总独立访客数中所占的比例。界面规格根据CNZZ数据中心对国内网民上网终端分辨率的统计分析，1024*768、1440*900、1366*768呈现增长趋势，而1280*800、1680*1050、800*600、1152*864分辨率趋势恰好相反。为适应主流分辨率的大部分设备，窗口的规格不要超过1024*768，以免出现“窗体级”滚动条或者覆盖屏幕现象。整体页面效果必须通过排序前3位分辨率下测试，大部分辨率下UI界面中列表和表单实现自适应。正常屏幕下，默认打开的页面建议不出现底部滚动条。布局框架布局框架以布局49为例：留白留白是设计元素和排列方式之间间距，是一种常用的视觉表现手段。合理利用留白可以使页面透气，舒畅，便于用户的浏览体验，从而提升设计的品质。设计规范：区块间距统一为5的倍数，10px为最佳，最大不能超过25px；阴影包含在间距内，无需例外再增加间距；内容间距不能大于区块间距；留白具体参数：使用范围建议间距最佳间距区块与区块5px、10px、15px、20px、25px10px内容与区块5px、10px、15px10px内容与内容5px、10px10px段落与内容5px、10px、15px10px段落与段落5px、10px、15px10px12px行间距16px、18px、20px、22px、24px20px14px行间距20px、22px、24px、26px24px留白示例：框架颜色为了保证与集团VI的一致性，所以本公司WEB类软件的默认框架采用与集团VI同色系的主色。中控集团的VI主色色值为#00529C，饱和度较高，在浏览时更易于吸引注意，但作为被用户长期使用的工业软件同样也容易引起视觉疲劳，所以本公司WEB类软件采用了与集团VI同色系降低饱和度的色值为#2c7dbc的主色。两者对比如下图：框架颜色框架颜色文字颜色一般性页面基本执行此标准，遵循有规律的原则。文字需要添加个性色时，可在正常状态下局部定义，鼠标移入时状态应该保持与规范统一。常用区块颜色此标准为非强制性标准，在不知道用什么颜色时候用此标准。字体中英文字体大小均为偶数。需要更大字号时可以根据偶数原则自定义。此规范只用于HTML代码使用的字体。规范：字体控件对齐表单控件标签左对齐。表单按钮控件右对齐。列表控件的表头内容（水平/垂直）居中对齐。列表内容如果定长，则居中显示；如果为不固定的中英文内容，则为居左显示；如果数值形式，则居右显示。控件对齐控件对齐存在树型控件和其他控件的情况，树型控件统一左对齐。弹出框和消息框无特殊情形，页面居中呈现，多重弹出每层往右下移动表头距离。带图标按钮，统一图标放置在按钮前面。界面工具条(Toolbars)统一放置于顶部，弹出框按钮统一放置于底部。成排的按钮之间的距离应该统一，并且统一对齐方式。控件对齐1UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析登陆框用户名、密码宽度应该上下对齐。输入框上下对齐。鼠标点击登录按钮应该显示手型。默认值打开一个新界面，光标默认停留在第一个待输入的文本框中。当选择下拉框不存在默认值时，则默认为“请选择”。当存在默认值时，请绑定显示默认值。输入框限制只允许输入数字的输入框请控制不允许输入其它字符，而不是输入非法值后给予提示。只允许输入日期、时间的输入框请给予格式化，而不是输入非法值后再给予提示或根本没有提示。当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示。对非法字符的控制。限制不可以输入或提交时给予提示。（如’、”、、）必填值界面的必填项必须以*(红色)号标识出来。当必选项没有填写时以最后提交时弹出信息的方式来提示，确定后光标停留在第一个待输入的文本框中。提示语提示信息中标点符号请统一为全角符号。提示信息如有主语，请统一为“您”。复杂的操作在成功后给予提示信息。需要后续操作的操作在成功后给予提示信息。提示信息不易太长，宽度不能操过当前窗口的1/2，当超过此比例时，请视具体情况进行换行。当功能按钮为图片按钮时，光标停留需给予浮动提示信息。提示语提示语窗口嵌套如果存在多层嵌套窗口，每层窗口弹出时都自动往右下移动一点点，以保证不遮盖上层窗口标题为准。窗口嵌套层次最好不超过三层。其它规范表单内部行与行的距离应保持相同。表单内业务区分比较大的输入项应分组呈现，即分块显示有明细业务区别的内容。表单内金额字段应以千分位符分割。表单文字避免使用粗体和斜体。表单内有上下关联关系的控件，应该按照关系前后放置。列表一般不放置操作按钮，操作功能统一由Toolbar实现。列表内部内容如果长度比较大时，显示固定宽度后，其余部分以“……”替换，光标停留后支持浮动显示全部内容。表单应用在进行一般页面设计时推荐执行此标准，遵循有规律的原则。1UI统一概述2UI统一化基本设计原则3界面设计规范4控件交互设计规范5特定场景分析普通列表和编辑场景一般业务都包含列表界面，没有特殊情况下，列表由三块内容组成：工具条、内嵌查询区域、列表区域（包括分页控件）。其中内嵌查询的高度，根据控件数量自动设置，列表Grid的高度自适应页面剩余高度。普通列表和编辑场景普通列表和编辑场景如果编辑功能不复杂，建议使用弹出窗口进行编辑（如下图）。一般弹出层为模态窗口，窗口大小建议按照4:3（3:4）比例，以达到协调的视觉效果。弹出窗口功能按钮应放于右下角，靠右对齐。一般弹出窗口的尺寸是固定的，内部控件可以不用自适应（固定尺寸），输入内容比较多的控件可以占多列或者多行，但是保证整体效果合理。普通列表和编辑场景普通列表和编辑场景对于业务比较复杂的编辑，建议以整页跳转进行设计，内部以工具条进行功能按钮布局。控件宽度需要根据页面大小进行自适应。多Tab页编辑场景针对主表&多明细表的业务场景，建议采用多Tab页方式进行设计，Tab页包含各个明细的内容，标头置于工具条下。各个Tab页内控件高度自适应。树控件和列表场景很多业务场景需要列表控件&树控件进行一些数据过滤，设计时应按照软件操作习惯，将树置于左边，宽度以可以显示三级目录为准。右侧区域一般是数据展示类控件，其宽度自适应整个页面的宽度。树控件和列表场景树控件和列表场景还有一类编辑界面，通过树控件进行主表过滤，主表&明细一起编辑的业务场景，可以采用如下界面进行设计。结语界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象：设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用，同时如同人的面孔，“俊俏的脸”具有吸引用户的直接优势；设计合理的界面能给用户带来轻松舒适的感受甚至是愉悦的感觉。希望大家