一个WEB系统的界面设计和开发 —— 一个经验级人物的文章

一个WEB系统的界面设计和开发

                                                                                                   —— 一个经验级人物的文章

       早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。

        以下是一个设计师他参加一个面向质检行业的Web系统界面设计和开发工作的过程，他同时承担了系统开发和界面设计工作。工作内容：

• 在需求分析阶段，参与了对客户的访问和调研；
• 在概要设计阶段，参与了部分系统设计分析工作；
• 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
• 在代码开发阶段，参与了系统表现层的设计开发。   

一般适用原则

·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。

·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。

·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。

·实时帮助原则：用户需要能随时响应问题的用户帮助。

·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。

·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。

·界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。

B/S构架适用原则

·页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。

·屏幕适应：Web界面需要适应不同用户屏幕大小。

·浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来的客户端不同效果。

·最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。

·禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。

·避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免。  

Demo开发

Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。