早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。 但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。 这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；其目的就是希望能和大家一起探讨一下这个问题，希望能供大家参考，起到抛砖引玉的作用。 另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我也尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。

1.工作流程 下图，是整个开发过程中与界面设计相关的主要流程工作。 从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。 在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层的设计开发。
2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。 本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。
3.界面设计原则 在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。 一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。 ·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。 ·界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。 B/S构架适用原则 ·页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。 ·屏幕适应：Web界面需要适应不同用户屏幕大小。 ·浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来的客户端不同效果。 ·最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。 ·禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。 ·避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免。 本系统应用原则 ·瘦客户端要求：由于客户应用环境配置大多较低，除服务器可单独配置较灵活外，应该保证瘦客户端，使用户容易使用。例如尽量不要使用复杂的JS脚本和HTC组件，不要在客户端使用IE整合XML/XSLT等等。 ·大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持，为避免水平滚动，应尽可能获取大的屏幕水平空间。 ·桌面面板导航简化操作：为了实现方便简捷的用户操作，应该保证用户绝大多数操作可通过首页桌面面板的导航来实现。 ·用户自适应定义：提供较多的可订制功能，尤其对桌面面板提供强大的定制功能；使用户能够将最常用的功能定义到桌面面板，每次登录即可直接使用，简化用户操作。 ·用户常用操作记录定义：对某些需定义操作的功能如查询、搜索等，提供系统自动记忆和客户定制功能，系统可自动记忆用户前1~3次操作，或者用户可自定义操作记录，方便以后使用。 ·大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持，为避免水平滚动，应尽可能获取大的屏幕水平空间。
4.系统分析 在概要设计过程中，界面设计人员需要浏览需求分析报告，了解用户的工作流程，和整个系统功能，再根据这些原始需求功能，归纳整理分析，并针对用户交互设计需要，提出意见，参与系统设计。 其中包括对原始功能的分类归纳，提出系统交互需要的新功能，对用户功能实现的优先级进行定义等等。 例如，提出用户自定义快捷面板功能，常用操作自动记录功能等，需要在概要设计时尽早提出，以方便作好系统规划。 另外，需要对整个系统中的常见功能有比较清晰的了解，归纳整个系统界面交互中常见的交互形式，例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等；只有清晰的了解整个系统需求，才能较好的把握整个界面设计的统一性。当然，这也和界面设计人员的经验有很大关系。
5.主界面设计 设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。 该主界面包含以下部分 用户信息区域 显示当前用户信息 用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板 用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板 功能树隐藏 可水平扩展页面空间 桌面面板用户帮助导航 用户登录时可根据用户类型，自动加载相关使用帮助或导航 主任务通知区域 通知用户系统业务流程中的待办事宜；通知用户办公系统相关信息。 用户快捷面板 为了能方便快捷的访问系统功能，避免每次访问树形菜单较深级次的繁琐操作，用户可将通过导航栏中的收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现。 用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板，例如：最新完成报告察看、报告搜索、检验流程察看等等

B/S系统界面设计与开发详解相关推荐

  1. 一个Web系统OA界面设计和开发

    早在中国IT业方兴未艾之时,计算机应用系统主要以功能实现为主,几乎没有界面设计这个概念.时至今日,随着计算机和网络的不断普及,社会信息化程度日益加深,用户和市场的不断成熟,人们已经不仅仅满足于&quo ...

  2. 酒店点餐系统开发详解（一）

    酒店点餐系统开发详解 --前言 信息管理系统老师让我们分组做一个信息管理系统,以让我们熟悉一下项目开发的过程,并以此锻炼自己的能力.说实话,刚开始做的时候也感觉很没底,因为我不知道这个项目最终能否成功 ...

  3. EasyPR中文开源车牌识别系统 开发详解

     在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao ...

  4. Android 系统（252）---Android:BLE智能硬件开发详解

    Android:BLE智能硬件开发详解 目录 前言 BLE是个什么鬼 BLE中的角色分工 主要的关键词和概念  GATT(Generic Attribute Profile ) Characteris ...

  5. 基于SSM框架的杰森摄影工作室选片系统的设计和开发论文

    基于SSM框架的杰森摄影工作室选片系统的设计和开发 摘 要 面对巨大的市场和激烈的竞争,摄影/照相馆行业商家必须紧跟行业发展的步伐,导入新的经营理念和推广方式,才不至于在激烈的市场竞争中被淘汰出局.信 ...

  6. 基于web的在线考试系统的设计与开发

    欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye2 在线考试系统的设计与开发 目录 TOC 1-3 第一章 绪论 1 1.1在线考试系统的研究背景 ...

  7. 酒店点餐系统开发详解（三）

    酒店点餐系统开发详解(三) --通信模块设计 注:本系统通信实现采用CSocket类 在上一节的数据流图中可以看到顾客(点餐)终端和厨师(任务分配)终端之间有数据的流动,这看起来好像二者是直接进行的通 ...

  8. 酒店点餐系统开发详解（五）

    酒店点餐系统开发详解(五) --任务分配设计 本系统从公平的角度,采取"先来先服务"原则为厨师分配做菜任务,但是顾客在点菜时可能出现指定了某个厨师做某道菜的情况,所以本系统针对未指 ...

  9. 酒店点餐系统开发详解（四）

    酒店点餐系统开发详解(四) --数据库模块设计 在本系统中每个模块与数据库的一系列查询.插入.删除等操作是通过类CDatabaseOperation进行的,所有的数据库操作都封装在这个类中.数据库功能 ...

  10. VB通用C++试题库系统的设计与开发

    word完整版可点击如下下载>>>>>>>> VB通用C++试题库系统的设计与开发(论文+源代码).rar-VB文档类资源-CSDN下载1.资源内容:毕 ...

最新文章

  1. python将二维列表内容写入和读取.txt文件
  2. Java遇见HTML——JSP篇之JSP指令与动作元素
  3. CentOS 7 的初始化
  4. 几种不伤身体的速效减肥秘方 - 生活至上，美容至尚！
  5. Date 和 SimpleDateFormat 类表示时间
  6. 经典KMP算法C++与Java实现代码
  7. 长连接和Keepalive
  8. Jsoup 数据修改
  9. 美国人教你这样用Google，你真的会变特工！
  10. Javascript根据属性从对象数据中删除元素
  11. 如何查看android虚拟机的目录及文件
  12. 带标签的 break 和 continue (Java)
  13. 39基础数据结构：动态数组
  14. Coverity 配置coverity扫描python静态代码检测
  15. wiz为知笔记docker部署与数据迁移
  16. VM+Lamp环境搭建
  17. MySQL八股文连环45问,你能坚持第几问？
  18. 家庭用药助手：丁香园推出面向大众家庭用户的药品信息服务工具
  19. 谷歌 I/O 深度解析：Android Jetpack 最新变化
  20. 21秋北京中医药大学《有机化学Z》平时作业1

热门文章

  1. 机票大讲堂之机票的秘密
  2. 五、信息安全术语中英文词条对照表
  3. matlab特定颜色提取
  4. Zabbix 2.2 安装图解教程
  5. python发送cmd命令_python 执行终端/控制台命令的例子 如何使用python在同一个控制台发送cmd命令...
  6. 数字IC-1.2 用CMOS管构建逻辑门电路 及 逻辑化简方法（与、或、非、与非、或非）
  7. 创作的第一个智能婚恋系统源代码，类似于百合网。
  8. 万能弹窗代码，能突破大部分弹窗拦截插件
  9. Nginx之13运筹帷幄 - (VeryNginx)
  10. laravel数据迁移