webui设计规范及设计应遵循的基本原则介绍

在设计一个web界面时，我们应当遵循各种规范与原则，只有在这样的框架下，设计出足够吸引人的作品，我们的产品才会久盛不衰。那么下面faceui就为大家带来webui设计规范及设计应遵循的基本原则介绍，希望能够对你有所启发。

　　webui规范介绍

　　网页视觉规范目的

　　适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。

　　视觉规范的对象

　　适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等

　　规范的含义

　　1．【统一识别】规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。

　　2．【节约资源】除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。

　　3.【重复利用】相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。

　　UI基本设计标准

　　一、尺寸

　　画布建立尺寸宽度：1920px

　　分辨率：72像素/尺寸

　　颜色模式：RGB

　　网页内容安全宽度：≤1200px（只适用于门户网站）

　　首屏内容建议高度：800px（只适用于门户网站）

　　二、字体（web）

　　中文字体：微软雅、英文字体：Aerial Tacoma

　　消除锯齿的方式为：Windows LCD

　　建议大小：建议使用16号+14号+12号字体的混合搭配（具体项目可根据实际情况灵活调整）

　　字体间距：间距一般根据字体大小选1-1.5倍最为行距，段落间距一般选择1.5-2倍字体大小。如选用12px像素字体，则行间距为12点-18点，段落间距为18-24点。

webui设计规范（图片来自网络）

　　应该遵循的基本原则

　　①显示信息一致性的原则

　　无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。

　　这样得到的好处：

　　用户使用起来能够建立起精确的心里模型，使用熟练了一个系统界面后，切换到另外一个系统界面能够很轻松的推测出各种功能。

　　降低培训、支持成本，支持人员不用费力逐个指导。

　　给用户统一感觉，不觉得混乱，心情愉快，支持度增加。

　　②以用户为主导原则

　　明确用户是所有系统处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。

　　③易用性原则

　　用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。

　　完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。

　　完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

　　按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。

　　界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。

　　界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

　　同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。

　　分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab

　　默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。

　　可写控件检测到非法输入后应给出说明并能自动获得焦点。

　　复选框和选项框按选择几率的高底而先后排列。

　　复选框和选项框要有默认选项，并支持Tab选择。

　　专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

　　④鼠标与键盘一致性原则

　　尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成。但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。

　　⑤系统响应时间原则

　　系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：

　　0-5秒鼠标显示成为沙漏；

　　5秒以上显示处理窗口，或显示进度条；

　　一个长时间的处理完成时应给予完成警告信息。

　　⑥出错信息和警告原则

　　出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和警告应该遵循以下原则：

　　信息以用户可以理解的术语描述；

　　信息简明扼要，指出出错原因并提供解决办法提示。

webui设计规范（图片来自网络）

　　⑦信息显示原则

　　信息显示遵循以下原则：

　　只显示与当前用户语境环境有关的信息；

　　不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；

　　使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户

　　不必再参考其它信息源；

　　产生有意义的出错信息；

　　使用缩进和文本来辅助理解；

　　使用窗口分隔控件分隔不同类型的信息；

　　高效地使用显示器的显示空间，但要避免空间过于拥挤。

　　⑧数据输入原则

　　数据输入遵循以下原则：

　　尽量减少用户输入动作的数量；

　　维护信息显示和数据输入的一致性；

　　交互应该是灵活的，对键盘和鼠标输入的灵活性提供支持；

　　在当前动作的语境中使不合适的命令不起作用；

　　让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序

　　（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；

　　为所有输入的动作提供帮助；

　　消除冗余输入。可能的话提供默认值、绝不要让用户提供程序中可以自

　　动获取或计算出来的信息。

　　⑨合理性原则

　　屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引

　　用户注意力的位置，在放置窗体时要注意利用这两个位置。

　　⑩美观与协调性原则

　　界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

　　长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

　　布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。

　　按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

　　按钮的大小要与界面的大小和空间要协调。

　　避免空旷的界面上放置很大的按钮。

　　放置完控件后界面不应有很大的空缺位置。

　　字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。

　　前景与背景色搭配合理协调，反差不宜太大。常用色考虑使用Windows界面色调。

　　如果使用其他颜色，主色要柔和，具有亲和力，坚决杜绝刺目的颜色。

　　大型系统常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

　　界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

　　如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。

　　通常父窗体支持缩放时，子窗体没有必要缩放。

　　如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

　　关于webui设计规范的内容暂且就为大家介绍到这里，在学习到新的知识之后，我们一定要善于实践，这样才能更快进步。如果各位对相关内容感兴趣，可以长期关注faceui。