以用户为中心的产品界面设计流程和方法

第32 卷第1期Vol.32,No.1 2019 年1月Development & Innovation of Machinery & Electrical Products J%H.,2019

文章编号：1002-6673 (2019) 01-031-04

以用户为中心的产品界面设计流程和方法

林影丽李德杰2,郭隆健1

(1.山东电子职业技术学院，山东济南250014; 2.大唐环境产业集团股份有限公司，北京100097)

摘要：以用户为中心的设计方法主张在产品的界面设计中，处处以用户为中心。通过用户分析界定出产品的使用概念；通过模型设计来获取设计灵感，把握设计方向；通过使用性测试对设计方案进行评估。这个面向用户的循环往复的设计过程会降低制作成本，优化产品功能。

关键词：用户界面设计；使用性测试

中图分类号：TP311 文献标识码：A d〇i:10.3969/j.issn.1002-6673.2019.01.010

User Centered Product Interface Design Process and Method

LIN$ing-Li1，LI De-jie2，GUO Long-Jian1

(l.S handong C ollege o f E lectronic T ech en o lo g y，Jinan Shandong250014，C h in a；

2.D atang E nvironm ental Industry G roup C o.，L td.，B eijing100097，C h in a)

Abstract：U ser C en tered D esign focuses on end users，no m atter w hat the p roduct is.U ser profiting and task analysis w ill help to set up the concept design；fast prototype show s alternative design and dem onstration；usability test is an efficient w ay to pinpoint the shortcom ings o f de-sign and to m ake appropriate m odifications before release.B y follow ing the iterative process，designers can m ake w ell-in fo rm ed decision，so as to create and refine the user interface.

Key words：user interface design；usability testing

0引言

以用户为中心的产品界面设计不仅要使其功能符合

用户要求，外观满足用户心理，而且要传递相关信息，这

就需要人与产品之间存在一个相互作用的界面，提供各

种线索和信息，使用户明白产品被用来做什么，以及如何

操作产品。

产品界面的设计应当从用户的要求出发。设计师首

先要人们的为，和经验水平，并由用

户的这些行为特点和验来决定人机界面，以人机

界面设计的流程和方法来指导产品界面的设计。产品界：面的设计应当适应人的理解和操作过程，减少用户的学

习过程，减少因为沟通渠道不畅而导致的操作出错。以用

户为中心的设计，个：①用户；②用

户界面设计;③构建用户界面;④验证用户界面的。

修稿日期：2018-11-06

作者简介：林影丽（1973-)，女，山东莱州人，副教授，硕士。主要从事机械制造及其自动化研究及教学工作。已发表论文5篇；：李德杰（1971-)，男，山东青岛人，工程师，本科。主要从事物料输送设计和项目执行工作。

用户界面设计的每个阶段自身都是循环重复的，一个完整的设计，是四个阶段按照一定的顺序循环的过程。没有用户反馈进行考察并改进，是不可能

产的设计的。

1用户分析

以用户为中心的设计是为了满足用户的期望而非设计师本人的需求。对用户的全方位研究，将直接影响产品的功能、造型及界面设计，的重要因素。用户：界定、用户、/工作流程分析、用户需求分析、工作环境。

1.1目标群体（Target Group)界定

界定的，就用户的共同特质，并发掘其购买的动机和理由。一般做法是：

(1) 设立一个门接触用户。这个小组成员来自

客服、培训及市场部门。

(2)目标群体的假设。初步准备用户和潜在用户的名单，应不同类型的用户及其特征；讨论典型用户的特征假设。

(3)目标群体假设的论证。通过问卷及焦点小组的调

系统界面设计规范

B/S 系统界面设计规范 1.引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受，提升B/S产品的质量。 1.1. 编写目的广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。 1.3. 定义术语定义：效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。容器：即HTML 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为单元格是放置图片的容器。样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则总体目标以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种

移动界面设计——移动设备的特点

移动界面设计——移动设备的特点对于设计而言，“适合”才是最好的。所以，当在考虑产品的设计和开发时需要明白，在此之前需要做到了解用户，才是产品在后期进行分析用户的痛点，功能的确定延展以及视觉设计风格确定的根本。那么，就产品而言，需要确定的是用户本身的生活以及工作习惯，包括痛点和需求以及当前用户人群的特点，并且还需要确定当前用户在使用这款产品的时候所处的环境差异，在什么环境中使用这款产品的几率较多? 这也是设计师在设计产品之前需要考虑的问题，例如是室内环境占主导还是室外环境占主导?网络运行环境是稳定的 Wifi 环境，还是户外，公共场合居使用流量的情况居多，一般在这种情况当中，通常用户在使用产品时的网络环境是不够稳定的，所以这就会影响的产品应该是以图片文字推送为主，还是以视频为主。甚至用户在进行信息输入时是保持传统的文字输入为主，还是需要加入语音输入来减小用户对于产品的操作成本，产品背景色是深色还是浅色为主，是否需要调取极速模式来应对一些特殊的网络环境等等。的产品都会被这些因素所影响，所以当设计和规划一款产品之前，需要考虑的方面是很多的，包括用户，也包括使用环境方面。那么其中一个重要的因素，就是的产品所存在的终端以及硬件。图 1-24 手势操作对于产品而言，它所存在的终端不同，用户在操作产品时的交互方式也会有很大的区别，对于移动互联这个时代来说，人们使用的终端更多是以智能手机为主来进行使用，当用户在进行人机交互时，其实更多是通过手指和屏幕的操作来进行的。其中，手势操作是最为常见的，也是最普遍的。(如图 1-24) 那么，随着智能手机为第三方应用(Application)提供的功能接口越来越丰富，传统的交互方式也在发生着不断的变化和更新。除了传统的手指点击之外，现有的交互方式中也加

产品UI设计规范

产品UI设计规范一、为什么要做设计规范？（why）如果说工作两年我养成了什么习惯的话，那一定是在做任何需求之前，都先问问自己“为什么要做这件事”。整理规范也是一样，做之前先要想清楚为什么要做规范？清楚的了解做一件事的价值有助于我们产生心理认同，从而更好的实施。 1.保证平台统一性统一性是交互设计的一个基本原则，在一个长期迭代多人合作的项目中，不同的设计师会负责不同的模块，每个人都有各自的思路，就有可能会对相同的元素做出了不同的方案，对于用户来说容易造成困惑，对品牌整体形象的建设也没有好处。所以对于较大型的产品，最好有设计规范来定义基本的元素，帮助众多设计师一起做出有统一性的产品。 2. 提升团队工作效率对于同一个基本元素，如果没有设计规范，交互设计师需要设计一次交互方式，视觉设计师需要设计一次外形，UI开发同学需要开发一次，每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范，只需设计一次，团队中任何一个设计师需要用的时候直接拿来用就可以了，也不需要再进行视觉和开发，极大的提升了效率。 3. 打磨细节体验在整理每个元素的规范时，设计师都需要对其场景、状态考虑清楚。在整理的过程中，经常会发现一些以前没注意到的问题，并进行优化。把一个小元素单独拎出来仔细考量，写成一篇完整规范的过程，其实就是在打磨细节的过程。二、什么时候做设计规范？（when）虽说最理想的情况是在做设计前把设计准则、风格、规范都定义清楚，但在实际项目中很少能有条件这样做。项目初期总是小步快跑、先上再说，产品在不断试错的同时设计也是在不断试错，在一开始就能定义一个完全“正确”的规范其实是不太现实的。

BS系统界面设计与开发详解

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

从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层的设计开发。 2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对*作接口，直接点击高于右键*作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少*作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的*作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。

界面设计风格

界面设计规范 1.引言 (2) 1.1概述 (2) 1.2信息位置的安排原则 (2) 2.规范基本规定 (4) 2.1环境 (4) 2.2文字与颜色 (4) 2.3数据格式与显示 (4) 2.4 键盘控制与无鼠标操作 (4) 3.窗口控件 (5) 3.1 MDI与SDI (5) 3.2 快闪窗口（SPLASH） (6) 3.3 登录窗口（LOGIN） (7) 3.4关于窗口（ABOUT） (8) 3.5 响应窗口（RESPONSE） (8) 3.6 系统主窗口 (9) 3.7 业务办理类窗口 (10) 3.8 数据查询类窗口 (12) 4.数据窗口控件 (14) 5.菜单控件 (17) 6. 按钮控件 (17) 7. 输入域 (17) 8. 帮助 (17)

1.引言用户界面是应用系统的外在表现，是用户工作的接口，它的质量会直接影响系统的友好性与可用性。本规范用于说明进行管理信息系统（MIS）设计开发时，所应遵循的用户界面开发规范，旨在描述设计怎样的界面风格，为用户所接收。该规范主要针对PowerBuilder开发工具的进行设计。由于PowerBuilde所倡导并提供的风格是基于图形化用户界面GUI的，是与Windows的界面风格相一致的，因此该规范同样可以适用于其他的前台开发工具。系统界面如果采用WEB页面的方式，则设计原则另行规定。规范中未做声明的内容，以满足开发总则为准。 1.1概述有资料调查结果显示，用户希望的最佳屏幕特点为： ●一个规整、清晰、毫不混乱的外观。 ●对于将要显示的内容以及对其将进行的操作有一个明确的提示。 ●所希望的信息出现在其应该出现的位置。 ●清楚地指明标题、小标题、数据、指示、选择等各种项目的关系。 ●平白、简单的文字。 ●通过简单的途径找到系统所含内容及得到它的方法。 ●明确地指出什么时候某个操作能引起数据或系统运行的永久性改变这样就要求我们所设计的用户界面，应满足如下基本要求： *充分性：用户界面应充分满足功能要求 *一致性：用户界面应满足一致性要求，包括本模块内与分系统之间 *简洁性：用户界面在满足功能的前提下应尽量保持简洁 *合理性：用户界面的布局与设置应满足合理的功能要求美观性：用户界面应满足美观性要求 1.2信息位置的安排原则 1.在屏幕左上角提供明显的起动点。 2.在屏幕上为诸如菜单、按钮、错误信息、标题、数据区等特定信息保留特定的区域，并使这些区域在所有屏幕上保持一致。 3.对各种区域的编排应保持均衡、规整、对称、简明、比例协调、整体性。 ●屏幕标题位于上中部，有利于产生对称感；菜单置于屏幕顶部，仅在标题之下；按钮置于屏幕底部，在信息区之下。

图形图像用户界面设计

实习报告课程名称多媒体实验实习题目图形图像用户界面设计专业通信工程班级通信（2）班学号学生姓名实习成绩指导教师吴娱 2011年5月

图形图像用户界面设计一、实验目的了解句柄图形的基本概念，掌握图形用户界面的基本设计方法。二、实验要求上机完成实验题目，独立完成实验报告。三、实验内容设计简单的图像用户界面。四、实验步骤 1、在MATLAB的命令窗口（Command Window）中运行guide命令：打开GUIDE界面，如下：然后，选择空模板（Blank GUI），点击OK，即可打开GUIDE的设计界面，如下：

如下：单下添加菜单项：“打开”、“保存”、“退出”。如下：

文件，所有的程序都是要写在这个M文件里面的。在编程中，每一个鼠标动作都对应一个Callback函数。那么菜单项也是如此。在界面上，单击鼠标右键选择“Property Inspector”，即可打开属性窗口。当点击不同的控件时，其对应的属性都会在这里显示，根据需要可以进行修改。最主要的属性莫过于Tag属性和String属性。设置当前的Figure窗口的Tag属性为：figure_pjimage，窗口的标

题（Name属性）为：图像处理实例。如下：然后，点击工具栏的保存按钮。之后，点击工具栏的运行按钮（Run）。程序运行时的样子，是这样的：文件下面的菜单项和快捷键我们都能看见，但是我们没有写程序，所以就算点也没有什么响应。还有如果不想设置快捷键，可以在Menu Editor中设置，只要把其选择为Ctrl+none就行了。这样的话，

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

一个Web系统的界面设计和开发1.工作流程（下图，是整个开发过程中与界面设计相关的主要流程工作）从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层的设计开发。

2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。 ·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例

实验一：图形用户界面设计

实验一图形用户界面设计一实验目的和要求 1）熟悉图形用户界面的设计原则遵循用户友好原则、一致性原则、帮助和提示等原则设计用户界面。 2）利用一种设计工具完成图形化的用户界面设计二实验内容与步骤（一）实验内容利用常用的设计工具（UI界面设计工具GUI Design Studio）完成一个通用图形用户界面设计，要遵循界面设计的一般原则（一致性、快捷方式、提供错误处理），注意颜色的使用，学会图标、按钮、屏幕布局、菜单和对话框的设计。软件的界面如同人的脸一样,软件界面的好坏决定了用户对软件的第一印象。设计好的界面能够引导用户自己完成相应的操作，起到引导作用。设计合理的界面能给用户带来轻松愉悦的感受。一些专家指出：对于用户，人机界面就是系统本身。这充分说明了软件界面设计的重要性。请完成各自的系统用户界面的设计。（二）实验步骤 1．设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色； 2．设计不同形式的菜单，完成对不同对话框的调用； 3．提供简单的错误处理、联机帮助。 GUI Design Studio主界面

三界面示例1、登录界面 2、主界面

3、聊天界面 4、QQ空间界面

四实验总结 1．界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致。 2．颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用；若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。 3．图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼镜对色彩和网点的空间混合效果，做出精彩图标。 1）设计按钮应该具有交互性，应该有3到6种状态效果（点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态），按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。 2）设计屏幕布局（Layout）时应该使各功能区重点突出，应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化。 3）菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。设计菜单界面时应注意一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单。 4）在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。

图书管理系统界面设计

软件工程（课程设计）题目：图书管理系统—界面设计学院河北大学工商学院学科门类工学专业软件工程学号 2012484331 姓名梁雪山指导教师王思乐 2014年12月7日

河北大学学年论文（课程设计）任务书（指导教师用表）

河北大学学年论文（课程设计）成绩评定表学院：河北大学工商学院

一、引言 1、编写目的编写本文档的目的是根据系统分析工程师和客户沟通的结果，对用户需求进行了全面细致的分析，深入描述《图书管理系统》软件的功能，确定该软件设计的限制和定义软件的其他有效性需求。该需求规格说明书的读者对象为本图书管理系统软件小组的研发工程师、测试工程师、销售工程师，版权归XXX所有，严禁外传。 2、背景随着社会信息量的与日俱增，作为信息存储的主要媒体之一图书，数量、规模比以往任何时候都大的多，不论个人还是图书管理部门都需要使用方便而有效的方式来管理自己的书籍。在计算机日益普及的今天，对个人而言若采用一套行之有效的图书管理系统来管理自己的书籍，会方便许多。对图书管理部门而言，以前单一的手工检索已不能满足人们的要求，为了便于图书资料的管理需要有效的图书管理软件。图书管理系统软件LMS V1.0是一套功能比较完善的数据管理软件，具有数据操作方便高效迅速等优点。该软件采用功能强大的数据库软件开发工具进行开发，具有很好的可移植性，可在应用范围较广的DOS、WINDOWS系列等操作系统上使用。除此以外，LMS V1.0可通过访问权限控制以及数据备份功能，确保数据的安全性。 3、定义 LMS：Library Management System 图书交流系统 4、参考资料《软件工程导论》（第五版）作者：张海藩清华大学出版社《软件界面设计》杨培添电子工业出版社二、项目概述 1、面向的用户该系统主要面向的是学生、教师等读者，图书管理员和超级管理员。 2、实现目标对已经设计出的功能在界面上形成对应的物理按键。确保界面美观，程序

移动界面设计——移动设备APP的特点

移动界面设计——移动设备APP的特点以智能手机为例，通常在使用智能手机的时候是以竖屏并且更多是以单手进行操作。那么对于的智能手机屏幕来说的话，通常会以屏幕上半部分为眼部热区，下半部分为手部操作热区这两个区域来进行区分。所以，会通常把展示类型的信息，例如 banner 图，logo 等视觉元素放在上半部分的眼部热区进行展示，对于一些重要的操作和点击按钮会放在手机的中下部分，方便用户的手指点击。例如在有些 APP 当中，已经开始逐步将返回到上一级的“返回键“以及部分重要操作放在屏幕下方来进行展示。(如图 1-31 a 所示)以及也会经常发现手机移动产品的登录页面其输入框和按钮也会放置在屏幕中线以下来进行展示。(如图 1-31 b 所示) 图 1-31 a 返回键及重要操作图 1-31 b 登录页面另外还有一些特点总结如下: a)操作界面精致、界面操作性高,所以这也就需要设计师能够在手机屏幕大小，信息合理完整的传递和用户阅读，界面视觉效果的美观留白以及功能区域划分之间寻求平衡。 b)记忆负担尽量减少、尊重用户操作习惯,在使用移动端设备进行操作的时候，要求在使用产品的时候尽量减少用户的操作时间成本。以及增加产品的易学习型，并且能够尊重用户所形成的操作习惯，能够保证快速，智能，高效的完成用户需求。

c)设计风格和版本的一致性,在设计应用视觉效果的时候，不同的应用以及不同的系统要区别使用的视觉元素的风格，不要混合使用。同时也要注意版本更新过程当中视觉风格的延续以及重要功能操作图标要保持其一致性，保留产品核心功能以及遵循用户之前的操作习惯，所以当产品界面的视觉设计接近尾声时，通常要根据产品的视觉来总结“产品视觉规范性说明文档“来保证产品视觉风格的一致性。手机应用通常以页面刷新的方式为主，由于屏幕较小，所以对于手机应用的信息展示来说，通常都要以新的页面展示为主。那么列表页跳转到详情页就是一个很典型的例子。例如，社交平台中从好友列表进入到好友详情页面的时候，由于手机屏幕较小以及竖屏使用的情况，这两个功能页面通常会分别在两张页面进行展示，如果这两层信息放在一个屏幕中显示又势必会遮盖当前页面住更多的有效信息，所以把这种方式称为“页面刷新“或者”页面跳转“。(如图 1-32) 图 1-32 页面刷新/页面跳转页面跳转过于频繁的话，会无形中增加产品的点击深度，耗费用户更多的时间成本。所以面对这样的情况，IOS 系统当中结合苹果手机的屏幕特性加入了 3D touch 这样交互方式，来减少页面跳转。其目的也是为了寻求在页面刷新，信息展示和传递以及提升界面操作效率之间寻求平衡。属于是一种全新的人机交互方式。

软件界面设计

软件界面设计界面的说法以往常见的是在人机工程学中。人机界面是指人机间相互施加影响的区域，凡参与人机信息交流的一切领域都属于人机界面。而设计艺术是研究人一物关系的学科，对象物所代表的不是简单的机器与设备，而是有广度与深度的物；这里的人也不是生物人，不能单纯地以人的生理特征进行分析。人的尺度，既应有作为自然人的尺度，还应有作为社会人的尺度；既研究生理、心理、环境等对人的影响和效能，也研究人的文化、审美、价值观念等方面的要求和变化。设计的界面存在于人一物信息交流，甚至可以说，存在人物信息交流的一切领域都属于设计界面，它的内涵要素是极为广泛的。可将设计界面定义为设计中所面对、所分析的一切信息交互的总和，它反映着人一物之间的关系。一、设计界面的存在美国学者赫伯特．A．西蒙提出：设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。所以设计是把握人工物内部环境与外部环境接合的学科，这种接合是围绕人来进行的。人是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对象的物则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用的功能、材料的质地，也包含着对传统思考、文化理喻、科学观念等的认知。任何一件作品的内容，都必须超出作品中所包含的那些个别物体的表象。分析物也就分析了设计界面存在的多样性。为了便于认识和分析设计界面，可将设计界面分类为： 1)功能性设计界面接受物的功能信息，操纵与控制物，同时也包括与生产的接口，即材料运用、科学技术的应用等等。这一界面反映着设计与人造物的协调作用。 2)情感性设计界面即物要传递感受给人，取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情，而不是个人的情感抒发。设计?quot;投入热情，不投入感情，避免个人的任何主观臆断与个性的自由发挥。这-界面反映着设计与人的关系。 3)环境性设计界面外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在，环境的物理条件与精神氛围是不可忽缺的界面因素。应该说，设计界面是以功能性界面为基础，以环境性界面为前提，以情感性界面为重心而构成的，它们之间形成有机和系统的联系。二、设计界面存在的方法论意义当机械大工业发展起来的时候，如何有效操纵和控制产品或机械的问题导致了人机工程人体工学也进一步地扩大到人的思随着体力的简单劳动转向脑力的复杂劳动，二战后，学。．维能力的设计方面，使设计能够支持、解放、扩展人的脑力劳动。在目前的知识经济时代，在满足了物质需求的情况下，人们追求自身个性的发展和情感诉求，设计必须要着重对人的情感需求进行考虑。设计因素复杂化导致设计评价标准困难化。一个个性化的设计作品能否被消费者所认同?新产品开发能不能被市场所接受?在目前，我国大部分企业实力还并不强大，设计开发失利承受力还不很强的情况下，如何系统地、有根据地认识、评价设计，使其符合市场，就需要对设计因素再认识。利用界面分析法，正是使设计因素条理化，避免将人作为生物人的片面和走出笼统地说设计＝科学十艺术的简单误区。现代的人机工程学和消费心理学为设计提供了科学的依据，它们的成功就在于实验、调查和数理表述，是较为可系的。同样对设计艺术而言，进行设计界面的分析，也要有生理学、心理学、文化学、生物学、技术学学科基础。从理论上来说，它要直接建立在信息论和控制论的基础之上。

移动界面设计论文

中北大学软件学院人机交互论文专业软件工程课程名称人机交互学号姓名

移动界面之手机短信界面设计近年来，随着计算机网络与移动通信借助层出不穷的新技术得到了迅猛发展。互联网与移动通信更是作为迈向信息社会的两个重要标志，它们分别满足人们对信息资源的丰富性以及信息获取方式的灵活性与移动性的需求。随着互联网的应用已渗透到商务、购物、娱乐以及信息获取等日常生活、工作的各个领域，人们已经习惯于移动通讯方式，手机的出现更为人们的日常生活带来了极大的便利。根据移动界面原则，本文介绍了手机短信界面的设计原则、过程以及可用性评估：一、手机交互界面设计原则手机用户界面设计的一个中心问题就是让手机用户界面达到便于用户使用。手机提供新功能、个性化服务的同时也增加了交互界面的复杂性，因此，手机视觉界面设计应遵循易识别、易理解、降低用户认知负担的设计原则。操作流程应简单、方便、高效。操作方式应符合人的心理和生理习惯。但是手机交互界面的设计也不能纯粹追求易用和高效率，同时要体现出情感化和人性化；其次，要注意细节的设计，让用户在细节之中体会到新功能、新技术的趣味性。在设计优秀的交互产品中发现，易用、高效与人性化、趣味性并不矛盾，比如， iPhone、iPod、android的交互界面设计，不仅高效易用，且操作的同时颇具趣味性。

手机是一种移动设备，交互界面的设计要考虑到手机的两大特征：移动性和便携性。由于手机大小的局限性，必须考虑到用户使用手机时空间的限制，不能在同一界面呆的时间太久，所以界面要体现简洁、易理解、使用户一目了然、提高操作效率的设计原则。对于用户常用的几个操作界面，要尽量简化，使用户操作更加方便快捷。总之，手机交换界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则。二、移动界面开发工具 1、手机采用J2ME架构。Java ME 以往称作J2ME（Java Platform，Micro Edition），是为机顶盒、移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台，包括虚拟机和一系列标准化的Java API。J2ME 在设计其规格的时候，遵循着「对于各种不同的装置而造出一个单一的开发系统是没有意义的事」这个基本原则。于是 JAVA ME 先将所有的嵌入式装置大体上区分为两种 :一种是运算功能有限、电力供应也有限的嵌入式装置；另外一种则是运算能力相对较佳、并且在电力供应上相对比较充足的嵌入式装置。手机采用的是第一种装置。 2、手机操作系统采用嵌入式linux开发手机联盟（OHA）开发的Android平台。Android是一种以Linux为基础的开放源代码操作系统，主要使用于便携设备。三、手机短信界面设计

GUI界面设计

4.2 图形用户界面的打开和初步设计在Matlab命令行运行guide命令打开图形用户启动界面GUIDE Quick Start对话框，选择Blank GUI(Default)，单击“OK”按钮，新建一个图形用户界面设计界面，如图4-1所示。图4-1 图形用户界面的新建根据本实验的具体要求和图形用户界面的设计原则，将主界面命名为“kaishi”，如图4-2Static Text，双击控件可引出图形窗和相应控件的属性编辑框“Property Inspector”，其属性设置为欢迎进入数字基带传输系统的仿真，字体大小可设置为16号，另外在工作区放置两个“Push Button”按钮，分别双击这两个控件可引出图形窗和相应控件的属编辑框“Property Inspector”，在String一栏中修改各个控件的名称分别为进入和关闭，字体大小可设置为16号。如图4-3示的主界面和属编辑框“Property Inspector”。

图4-2 总界面图4-3 设置开始界面

4.3 主界面的激活和回调函数的生成经以上操作后，工作台上所制作的界面外形及所含构件已经符合设计要求，但这个界面各构件之间的通讯还没有建立，为此必须激活处理。激活方式为：选中其中的一个控件，如“眼图”控件，右击控件选择“View Callback”中的“callback”可出现一个可以(待填写回调指令的)M函数文件的文件编辑器界面，在待填写回调指令处填写语句figure(yantu)，其余控件依此类推分别在指令处填写figure(digital)，figure(digital_receive)，figure(mjcr)，figure(raise)，figure(partrespond)其中digital，digital_receive，mjcr，raise，yantu，partrespond为显示数字基带传输过程中各过程波形的图形用户界面，这样就和其他的子界面之间建立了通信，回调函数如下填写： function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) figure(digital) 回调函数编写完成后，点击保存按钮进行保存，点击工作台上的“Activate Figure”工具图标，便可以看到链接关系，如图4-4示。图4-4 写完成的总界面

网站(产品)设计流程图

每个产品主要经过以下几个阶段：可行性评估主要执行人员：UI、UE、需求部门、程序部需沟通人员：销售部当产品经理确定基本的思路后,会先会跟我们沟通，并说明这个产品的思路、受众及一些自己的想法．接着会拿来一个结构图来和我们探讨实现方面的可行性。我们也会准备相关资料与其进行沟通，主要会从数据报告、功能性及可行性三方面下手，在探讨的同时会指出功能或结构上的一些问题，并提出改善方案，这步一定得仔细，UI、UE深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很容易.但如果在可行性评估上出现隐患,余下的其它工作也将会遇到诸多问题。我们主要从以下三方面进行评估: ?数据报告通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析报告中指出相应的问题。

?功能性站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上的问题。 ?可行性每个产品初期都是感性的，但在不能保证每个功能都能按原有思路进行实现，具体还需要和相关技术人员进行探讨、碰撞后形成最终的产品思路。二产品原型主要执行人员：UI、UE、需求部门需沟通人员：程序部、销售部在产品原型方面,主要指的是黑白稿或线稿，除了颜色基本采用黑白的形式，最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度, 广告的形式,导航基本样式,各内容的区域的表现形式等… 当经过可行性评估阶段后,产品经理的思路和自己也基本达成共识，接下来将进行原型设计，我将主要分为三个步骤来实现： 1) 纸稿

一般情况下结构图都是采用word文档描绘，我选择笔和纸的方式，主要还是比较方便、易修改，有任何突发的思路只需要擦一下，就可以直接在已有的基础上进行调整，由于之前的讨论没有实物参照，在这个环节你一定会发现更多有趣的问题。 2) 线稿、黑白稿

系统界面设计

系统界面设计实例姓名：曹爽班级：9班学号：201208240901 设计的系统名称：个人日常事务管理系统针对用户群是：广大电脑用户（有一定的电脑操作基础），officer和广大学生。一、系统需求分析（The system requirement）针对officer和学生们的需求分析，从我自身分析：对于我日常的安排我平时会用专门的记事本记录和更改，对于日常各种事务可能会冲突或不变携带，现在针对这些需求，设计出符合此人群适合的一款系统来帮助人们更好的安排日程和完成工作。此系统是要面向个人的，同企业系统相比，此软件要力求操作简单，效率要高效，由于针对的人群是officer和大学生，这些人都是年轻的一代人，对计算机和系统都比较了解，而且倾向于华丽的界面，但是该系统同时要解决高效，较少的操作较快地达到用户的需求。由于工作原因或计算机系统崩溃等用户在本机保存的日程安排等数据可能丢失的情况，同时，有些情况下可能无法连接网络，此系统应支持 1.、本机数据保存。2、可以上传到服务器数据库，用户注册可获得免费的空间，用户注册后，只要登录就能在随时随地获得自己的日程安排等信息。二、系统功能定义（The function definitions）个人日常事务管理系统用户注册登录主要功能实现软件设置、帮助用户登录界面主界面（导航）用户注册登录子界面（功能）

实现功能（主界面导航）：一、工作台（主要功能）： 1、待办事件 2、日程安排 3、效率评估 4、通讯录 5、定时提醒二、通行路线：可以和平时安排联系起来，可以提前安排好行车路线三、天气情况和日程安排联系起来，提醒用户天气状况，便于用户及时修改自己的日程安排。四、桌面图标将桌面快捷方式整理到这里，这是方便用户的一个小工具，此功能为了挽留用户，功能太单一，用户可能会流失。三、界面设计和标准（The Principles）风格设计分析：针对用户年轻，更加偏好色彩丰富，但是针对于此软件要求的功能应符合操作简单。则主要用鼠标点击操作就可以方便的查看用户的日程安排信息。虽然要追求界面的时尚和华丽，但是界面过于艳丽，容易导致用户视觉疲劳。则轻松的淡彩色为主配色，灰色系为主。用户导航显示：简单明了，文字描述要明了，通过文字和图标配合示意，用户看到按钮，可以快速的明白此按钮功能。布局应该满足用户习惯，结合广大软件按钮布局方式。为了保持界面在设计过程中，要求各个界面的风格的统一，先做出表格，列出界面制作统一的原则和规范。框体颜色外边框输入框按钮登陆界面蓝色，淡色，40% 灰色，淡色，30% 线条，淡色，50% 灰白色，80% 主界面线条，淡色，50%灰色，淡色，30%线条，淡色，50%灰白色，80% 子界面线条，淡色，50%灰色，淡色，30%线条，淡色，50%灰白色，80%文字部分标题文字输入框文字菜单文字帮助文字字体微软雅黑加粗微软雅黑微软雅黑微软雅黑大小小四五号五号五号颜色黑色灰色，50% 黑色黑色

界面设计(参考)

界面设计 (一)界面设计（15分）新建表单myform001，表单的标题为“假期旅游”，在表单中添加四个标签（Label1、Label2、Label3、Label4），标签label4的背景色为RGB(100,200,200),字体颜色为RGB(200,0,0)两个文本框（Text1、Text2），一个下拉式组合框（Combo1），一个命令按钮（Command1），一个图像控件（Image1）。要求标签Label1、Label2、Label3的标题文字分别为“姓名”、“性别”、“旅游目的地”，运行时在文本框Text1、Text2中分别输入姓名和性别，通过属性窗口将Combo1数据值的源内容设置为“桂林，青岛，西安，海南岛”，指定Image1控件显示的图片内容，图像采用变比例填充，高120，宽200。当改变下拉组合框的值时，在标签Label4中显示“姓名”+空格+“性别”+空格+“旅游目的地”，单击“退出”按钮，则结束表单的运行。所有字体采用隶书，16号字。表单设计图如下：注意：表单设计中，不需要设置事件代码，控件和属性必须设置，在属性窗口选择相关属性，则在窗口下面会有说明。 (二)界面设计（10分）新建表单myform001，表单的标题为“学生基本情况”，在表单中添加五个标签（Label1、Label2、Label3、Label4、label5），标签的标题文字分别为“学号”、“姓名”、“年龄”、“省份”、“备注”，三个文本框（Text1、Text2、text3），一个下拉式组合框（Combo1），一个命令按钮组包括五个命令按钮，按钮的标题分别为“首记录”，“上一条”，“下一条”，“末记录”，

用户界面设计实例

用户界面设计实例 ● 设计的系统名称：个人日常事务管理系统 ● 针对用户群是：广大电脑用户（有一定的电脑操作基础），officer 和广大学生。一、系统需求分析（The system requirement ）针对officer 和学生们的需求分析，从我自身分析：对于我日常的安排我平时会用专门的记事本记录和更改，对于日常各种事务可能会冲突或不变携带，现在针对这些需求，设计出符合此人群适合的一款系统来帮助人们更好的安排日程和完成工作。此系统是要面向个人的，同企业系统相比，此软件要力求操作简单，效率要高效，由于针对的人群是officer 和大学生，这些人都是年轻的一代人，对计算机和系统都比较了解，而且倾向于华丽的界面，但是该系统同时要解决高效，较少的操作较快地达到用户的需求。由于工作原因或计算机系统崩溃等用户在本机保存的日程安排等数据可能丢失的情况，同时，有些情况下可能无法连接网络，此系统应支持 1.、本机数据保存。2、可以上传到服务器数据库，用户注册可获得免费的空间，用户注册后，只要登录就能在随时随地获得自己的日程安排等信息。二、系统功能定义（The function definitions ）个人日程管理系统主要是提供个人时间日程安排系统软件，它具有相当方便的操作接口，让用户能够对所安排的行程一目了然，除去主要功能还附带了更多功能和小工具，安排的行程可以生成通行路线，并会根据天气预报提醒当天安排是否影响。而且用户可以注册，注册后用户有更多的服务，安排的日程数据可以保存到本地同时可以更新到服务器，这样用户就算到外地也可以随时查看自己的日程安排，同时其他功能有：时钟提醒、通讯录、效率评估等。实现功能（主界面导航）：个人日常事务管理系统

界面设计模块

界面设计模块一、界面设计模块：本章讲解界面的设计方法以及基本的界面创建方法，如果需要创建类似的界面，可以在这些基础之上进行修改。用户界面是一个应用程序最重要的部分，对用户而言，界面就是应用程序，他们感觉不到幕后正在执行的代码。无论花多少时间和精力来编制和优化代码、代码编写得如何出色、运行性能如何高，用户总是要与应用程序界面进行交互操作，而不是与代码进行交互操作，应用程序的可用性在很大程序上仍然依赖于界面的好坏。因此，界面设计是软件设计的一个重要方面。 1、界面设计原则在设计应用程序用户界面的过程中，需要时时想到用户。一般需要遵守一下原则：（1）界面设计初步规划：设计一个应用程序界面时，应该先对整个系统界面进行初步规划。考虑应该使用单文档还是多文档样式，需要多少个不同的窗体，菜单中将包含什么命令，要不要使用工具栏重复菜单的功能，提供什么对话框与用户交互，需要提供什么样的帮助。（2）符合Windows界面准则：随着Windows操作系统的使用用户的增加，用户更容易接受基于Windwos的应用程序。如果创建的界面与此相差太远的话，不容易让人接受。比如菜单的设计，大多数基于Windows的应用程序都遵循这样的标准，即“文件”菜单在最左边，然后是“编辑”、“工具”等可选菜单，最右边是“帮助”菜单。如果把“帮助”菜单放在最前面，便会降低应用程序的可用性。子菜单的位置也很重要，用户本期望在“编辑”菜单下找到“复制”、“剪贴”与“粘贴”等子菜单，若将它们移到“文件”菜单下会使用户不可理解。（3）使用颜色：一般来说，最好采用一些柔和的、中性化的颜色。（4）选取字体：一般来说，使用标准的Windows字体，如Arial、New Times Roman、System 等。如果用户的系统没有包含指定的字体，系统会使用替代的字体，其效果可能与设想的完全不一样。大多数情况下，不应当在应用程序中使用两种以上的字体。注意不要在应用程序中使用太多的字体，也不要设置太小的字体，以免影响用户阅读。（5）合理的控件布局，保持界面的简明 2、初始屏幕窗体设计初始屏幕又称为Splash窗体。Splash窗体的主要作用如下：