界面设计的行业标准总结-- WEBUI设计的相关行业标准

界面设计的行业标准总结-- WEBUI设计的相关行业标准

WEBUI的特点：

1.         感官体验：呈现给用户视听上的体验，强调舒适性

2.         交互体验：呈现给用户操作上的体验，强调易用、可用性

3.         浏览体验：呈现给用户浏览上的体验，强调吸引性

4.         情感体验：呈现给用户心理上的体验，强调友好性

5.         信任体验：呈现给用户的信任体验，强调可靠性//我的批注:这点感觉和界面的关系不大，可靠性不住要是靠界面的设计来保证的，也就是后主要是“后台”质量来保证的。当然“信任体验”的确很重要，不能让用户老担心，这次还会不会出错，特别是有较多信息输入交互时，用户又多次遇到不可靠性的问题之后是很担心的！

 

2.1  WEBUI整体标准的制定

WEBUI的整体标准也从以下四个方面入手：

1.         规范性

2.         合理性

3.         一致性

4.         界面定制性

一、WEBUI的设计规范

WEBUI也要遵循一致性的准则，其目的与GUI一致：

1.         便于用户操作

2.         使用户感觉到统一、规范，在使用软件的过程中愉快轻松的完成操作，提高对软件的认知  

//我的批注：我觉得“统一性”是最关键的和必须的。包括的大到界面的风格，小到按钮的位置和 大小，包括按钮在页面中位置和按钮之间的相关位置，比如在确认消息页面里“确定”和“取消”按钮，谁前谁后必须一致。

3.         降低培训、支持成本，不必花费较多的人力对客户进行逐个指导//我的批注：这个也很重要，但需要从多个方面去努力，包括功能和界面，如果功能本身很复杂，易用那也很难！

二、WEBUI布局的合理性

    WEBUI界面的合理性直接影响到软件系统的可用性，下面将从几个方面讲述WEBUI的布局特点：

    1.设计风格：符合目标客户的审美习惯，并具有一定的引导性//我的批注：引导性如何保证？我觉得也是操作要连贯，一个业务目的尽可能在一个界面里连贯的完成，另外就是“提示”或者“帮助”要合理，要能清楚的给予引导，特别是有分支时！

    2. 页面布局：重点突出，主次分明，图文并茂 //我的批注：风格一致很关键，在业务系统中，图文并茂估计是做不到，简单是美，未必一定要很多图片来烘托！

    3. LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间//我的批注：需要把握一个合理的度，如果是一个业务系统，logo倒不是问题！ 

    4.页面导航：导航条清晰明了、突出，层级分明//我的批注：菜单的组合很重要，但很多的时候我们是按功能组合的，要保证用户能快速的进入他需要的任何一个功能，也要做到，在任何的一个页面，用户可以容易知道“我在哪”!功能复杂的话，可以使用功能地图或者站点地图的方式，用户能快速的检索到需要的入口！菜单组合的风格要一致，也不要什么都把功能树里放，“多了就复杂”。

    5.图标使用：简洁、明了、易懂、准确，与页面整体风格统一 //我的批注：风格一致很关键，另外所有的按钮的图标含义要对，要清楚，最好是有意思，能“按图索骥”，不同功能的按钮，图标也不能一样，比如不能“确认”按钮和“取消按钮”都是同样的图标！

    6.图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远

 //我的批注:不能过多，不能喧宾夺主！

    7.动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览//我的批注:先进去很重要，节奏要合适，不能太慢，慢了用户会失去耐心，尤其是现在的时代，大家都有几分浮躁，普遍缺少耐心，快了用户可以多看几遍问题不到，慢了不行！

    8.页面色彩：遵循GUI界面颜色标准，主色调+辅助色不超过三种颜色 //我的批注:不能超过三个色系，一般是不是外面应该比里面要深？色彩也是风格中的重要元素，也必须一致、统一！

    9.页面底色：所选颜色不能干扰主体页面的阅读//我的批注:要绿叶还是要红花，谁重要的问题！ 

三、WEBUI风格的一致性

WEBUI的一致性与GUI大同小义，也指相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致，但不同的是WEBUI对浏览器有一定的要求。 //我的批注:字体、标签风格、颜色、术语、显示错误信息等方面确保一致，也要包括弹出窗体的相对位置！

1. 在不同分辨率下的美观程度

   WERUI要求所有页面要在800*600，1024*768两种分辨率下运行通过//我的批注：现在的要求可能不止这么简单了吧，还有其它更高的分辨率，800*600基本上很少用户了，我觉得更加重要的是宽屏和窄屏的问题，开发人员的屏宽都不一致，更合乎我们的用户！

2.在不同版本浏览器上的运行

  例如要求在IE5.0，5.5以及6.0下运行通过而不发生错误//我的批注：有点落后了吧？IE至少都9了，更何况还有其它的浏览器，但对几种主流的浏览器和版本支持要做好！

3.在不同厂商的浏览器上运行 //我的批注：嗯，主要就那么几家，IE必须是保证没有问题的！

  例如软件系统可以在IE、Firfox、Google等浏览器上正常运行

4.WEBUI的菜单、地址栏、图标、状态栏等风格、位置要一致//我的批注：web下不是很重要吧，都在浏览器里！

5.遵循GUI风格一致性的2-9所规定的一致性

四、WEBUI的可定制性

WEBUI的可定制性大致可分为以下几个特性：

1.界面元素可定制

  允许用户定义工具栏、状态栏、地址栏等是否显示，工具栏显示在界面上的位置；允许用户定义菜单的位置等。 //我的批注：我觉得不重要！

2.工具栏可定制

  不同用户对常用工具的使用是不同的，因此允许用户建立新的工具栏，选择要显示的工具栏，定制工具栏上的按钮等功能在软件系统中经常被用到 //我的批注：我觉得不重要！

 

2.2  WEBUI所包含各类元素标准的定制

WEBUI所包含各类元素：

在WEBUI中页面所包含元素与GUI有所不同，大至分为页面、界面控件、菜单、图标、鼠标、文字、帮助，见下图2-1为WEBUI的基本页面构成 //我的批注：鼠标需要注意什么呢？提示？

一、WEBUI页面的标准

根据WEBUI的特性，下面列出十六个点来分别描述页面的制定：

    1.页面大小：适合多数浏览器浏览，如15寸、17寸、19等显示器

    2.按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击 //我的批注：很重要，Axure有些做的就不好，我的分辨率算主流的了，但有时下面的按钮看不到，所以最开始以为是不需要“保存”，Axure是自动保存的呢！

    3.点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读

//我的批注：在业务系统或产品里，主要是查询后列表，最好能通过颜色表示哪些用户刚刚打开过，另外，行里之间最好是两种相似的颜色交替，光标移上去之后应该有所变化！

4.错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作//我的批注：告诉用户哪粗了，另外，最好有同样错误能一并告诉，加入界面中又都个必填项，不能用户点击一次“保存”，提示一个未填项！当然，页面验证做的好的话，应该不会有这个问题！

    5.显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径//我的批注：业务系统里，其实主要是操作的层级（如果有多个步骤），用户倒不关系页面的层面！网站类的当然就不一样了，看到自己的希望的栏目，往往想看看其它的东西！

    6.栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥 //我的批注：业务系统里，主要是功能模块！

    7.栏目的层级：最多不超过三层，导航清晰

    8.内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆

    9.页面的长度：设置一定的页面长度，避免页面过长而影响阅读 //我的批注：业务系统里，则更加重要，不用老让用户去拉！如果太多需要填的东西，可以是tab页，，或者是下页，或者自动把之前的收起来，或者按用户交互的节奏自动引导滚动！

    10.分页浏览：对于较长的内容可以进行分页浏览

    11.表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制 //我的批注：在下拉项目的默认方面也要主要把握啊！

    12.页面速度：正常情况下,尽量确保页面在5秒内打开，对于大型软件可以适当的延长等待时间 //我的批注：最好是3s以内！

    13.页面刷新：尽量减少页面的刷新率，或采用无刷新技术//我的批注：web2.0了，要好些了！ 

    14.新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能 //我的批注：是自己加关闭按钮呢？还是浏览器的“x”？要选择好！我倾向于是自己加关闭按钮，浏览器的那么关闭太小了感觉！

    15.网页地图：为用户提供清晰的网页指引 //我的批注：业务系统中主要是功能地图！

    16.可以复用一些GUI窗口的相关标准，如菜单、标签、按钮的位置、字体、颜色等标准

二、WEBUI其他元素的标准

WEBUI的其他元素的制定标准，包括界面控件、菜单、图标、鼠标、文字、帮助信息等与GUI一致，并且可根据具体情况酌情予以改变。

本文出自 “楚楚” 博客，请务必保留此出处http://38453.blog.51cto.com/28453/203118，原文信息：

原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。 http://38453.blog.51cto.com/28453/203118