本文以界面设计为主题，介绍了界面设计中各个部分的内容和设计要点，以及如何优化界面设计。

1.什么是界面设计？

用户和软件系统交换信息的媒介。

1.1 接口设计概述

1.1.1 需要考虑的问题

1.1.2 所谓的界面设计

1.1.2 四大重点

1.2 软件界面是什么？

1.2.1 不仅仅是计算机屏幕上的窗口、表格和网页？

一切能让用户通过视觉、听觉，甚至嗅觉和触觉等感知软件相关信息的媒介，以及能让软件系统通过动作、声音，甚至眼睛和思维等接收用户信息和指令的媒介，都属于软件界面的输入范围。

1.2.2 不仅仅单方面的输出，还需要对方的反馈？

界面是人与计算机交互的通道。人机交互最常见的方式是动作和视觉的结合。人通过敲击键盘、点击鼠标等方式向计算机发送信息和指令，计算机将处理结果反馈到显示器上，让用户看到。交互不仅是人与计算机的交互，也是计算机与人的交互。

1.2.3 不是所有与软件系统相关的输入和输出都需要软件接口？

比如传感器、RFID阅读器、接到计算机指令后采取行动的机械臂、加热或者喷水的装置等等，这些都是输入设备，不需要输入接口，这是机器和机器之间的交互。

1.2.4 界面不仅仅是一个图形界面？

一般分为字符界面和图形界面，所谓字符界面就是操作系统或者应用软件的界面，所有的操作都用字符来实现，没有图形。

dos系统是典型的字符界面。

图形界面是由各种可视化程度非常强的组件（如窗口、文本框、按钮等）构成的界面形式。

2.界面设计基础 2.1以人为本

界面作为人机交互的界面，应该强调“以人为本”。毕竟机器运转速度很快，没有感情，不知疲倦，很少出错，但人就不同了。人的计算能力差（相对于机器而言），容易无聊，容易疲劳，容易出错。所以界面设计应该强调以用户（人）为中心，而不是以机器为中心。以人为本的软件应该做到以下几点：

2.1.1 不要让用户难以学习

操作界面简洁，降低学习成本，只需简单培训即可，具有引导式操作和帮助提示。

2.1.2 不要让用户感到无聊

2.1.3 不要让用户感到害怕

2.1.4 不要让用户感到难以捉摸

2.1.5 不要让用户感到不安全

应有严格的权限分配，即使出现权限冲突，也应给予相关用户提示信息（例如，该用户填写的日志是否需要让其他人查看）；

2.2 原型设计

2.2.1 产品原型

基础架构的建立、功能模块的划分、样式与颜色值的确定、功能逻辑的动态交互、基础字段与数据优先级的展现，高度还原用户需求。

2.2.2 数据原型

数据之间的关联性验证了产品原型内的功能逻辑。

2.2.3 原型设计方法

原型设计的方法有很多种，这里简单介绍一下，供大家在工作中参考。

2.2.3.1 手绘方法

使用方法：用纸笔画出界面草图，或者用电脑上的画板画出界面图或者思维导图，很原始。

使用阶段：此类概要设计是在需求分析前期与用户快速沟通时进行的，主要确定项目的基本需求和功能，为后续工作提供数据基础。

2.2.3.2 工具设计方法

使用方式：Word、PPT等都可以作为原型设计工具，还有专门用于设计界面的图形模板，可以制作出非常逼真的设计稿，而且比手绘更易于维护。

使用阶段：和用户确定一些主要的需求和功能后（一般用于那些界面不是太复杂，交互过程少的报表功能，主要在数据展示方面）。

2.2.3.3 专业原型工具设计方法

如何使用：专业的原型设计工具设计软件有很多，比如RP（推荐）、GUI、XD等，不仅可以制作出非常逼真的软件模拟效果，还可以画出几乎每一个与软件界面相关的细节，菜单是怎么显示的，包含哪些界面，界面需要显示哪些元素，用户进行操作后界面如何反应等。

使用阶段：与用户确定业务需求（包括数据原型）后，完成最终的原型设计。

2.2.3.4 研发工具设计方法

使用方法：一些快速开发工具也可以用于原型设计，例如VB等。

使用阶段：在确定用户的业务需求后，这种设计方式需要有一定编程经验的开发人员，或者懂前端、做过前端编程的产品经理、设计师的参与，这样才能发挥出这种设计方式的优势。但这种设计方式相对于其他设计方式，显然灵活性较差，局限性较大，所以一般不采用。

注意：相比于原型设计工具，这种方式有一个巨大的优势，就是在设计过程中可以编写一些简单的代码，通过这些代码的执行，让表达形式更加灵活，更真实地体现人机交互过程。缺点就是对于设计师来说下拉优化软件，需要有使用这种工具进行开发的经验，否则学习起来还是很麻烦的，至少比学习原型设计工具要难一些（这里产品经理或者设计师需要有一定的编程经验（懂前端或者做过前端编程））。

2.3 快速成型模型

软件开发模型有很多，比如瀑布模型、螺旋模型等，这里给大家介绍一种开发模型——快速原型开发模型，这种模型对于一般的管理软件来说，是非常适合的。快速原型开发的主要特点就是在开发之前，系统地设计界面原型，一般会使用专业的原型设计工具进行设计，所以速度很快，等用户确认之后，开发人员再根据原型进行开发。

2.3.1 一般步骤

这个模型一般要经历如下几个步骤：

从这些步骤我们可以看出，这种模式的优势主要体现在两个方面：

首先，在设计阶段，可以最大程度地让用户参与到软件设计工作中，充分表达自己的意见，从而大大降低偏离用户需求的风险。没有界面原型，普通用户根本不知道软件会是什么样子，设计阶段也很难提出自己的意见，直到软件开发完成后才发现这个不对，那个不对。软件开发者自然明白，这是非常致命的。

第二，在开发阶段，由于设计人员提供了系统界面原型，开发人员很容易了解设计人员的想法。如果没有界面原型，即使设计人员把自己的设计思路阐述清楚，把文档写完整，也可能会被开发人员误解。相信大部分软件从业者都深有体会。

2.3.2 注意事项

通过界面原型设计加强与用户的沟通需要注意以下几点：

2.3.2.1 与用户的沟通要有个限度，沟通太多太少都不好，可能会起到相反的效果。

在设计过程中，多与用户沟通，但不要纠缠他们，要求他们确认每个字段的名称和位置。这往往表明设计师对自己的设计结果不自信。

2.3.2.2 用户意见很重要，但不一定正确，要有自己的立场。

设计一个好的界面，设计师应该比用户更专业，要考虑更多相关的方面，应该引导和帮助用户，而不是被用户牵着鼻子走。

2.3.2.3 从用户意见而不是解决方案中寻找问题，明确自己的立场

当谈到用户意见时，你需要从根本上了解用户为什么会提出这样的意见，反映了什么问题，进而分析如何解决这些问题，而不是依靠用户来提出解决方案——设计界面的人是你，而不是用户。

2.3.2.4 不同项目可以采用不同的审查方法举一反三

根据不同的客户、团队、业务需求，可以采用不同的方式评审界面原型，复杂的可能需要开一个大型评审会，简单的可能只需要在用户办公室一两个人讨论，有些非常简单的，甚至可以通过QQ、微信远程截几张图，就能沟通清楚。

3.界面设计流程 3.1界面设计的五要素

3.1.1 入口设计

用户登录系统之后，如何打开自己需要的功能界面是入口设计需要考虑的问题。

当然，很多时候由于开发团队的技术、能力、产品框架的限制，设计师的发挥空间有限，虽然这常常让设计师感到压抑，但也降低了入门设计的难度。

3.1.1.1 功能菜单

最常见的进入方式就是功能菜单，菜单区域可以通过顶部下拉的方式展开，也可以通过左侧的树节点进行加载，用户点击需要的菜单即可进入功能界面。

3.1.1.2 工作台

可以为用户建立一系列的工作台，工作台中列出了用户最需要的信息、最常用的功能、需要处理的任务等。用户登录系统后，通过某种方式打开工作台，或者系统自动打开属于当前用户的工作台。用户可以通过工作台完成与某一业务领域相关的大部分工作。

3.1.1.3 九宫格

“九宫格”界面就是把三行三列的九个格子拼在一起的界面，比如键盘上的数字小键盘，手机输入法里的九宫格键盘。后来，凡是这种格子的界面布局，就习惯称为九宫格或N格。九宫格在智能手机上非常流行。由于空间有限，在三行三列的每个格子里放置一个命令图标是比较合理的。后来，随着手机屏幕越来越大，自然而然地排列的图标也越来越多。现在，越来越多的PC软件采用这种方式作为功能入口。

3.1.1.4 弹出菜单

当用户点击某个区域或者进行某个操作时，会弹出菜单，用户点击菜单即可进入功能界面。这种进入方式在C/S系统中比较常见（很多使用C/S软件的用户习惯在任意地方点击鼠标右键，试试能不能弹出来），在B/S系统中并不像在C/S系统中那么常见。

3.1.1.5 快捷方式

对于一些非常常用的功能，可以通过快捷方式建立快速访问，比如将功能图标放在面板上，允许用户创建功能收藏夹，或允许用户输入字符命令等。

3.1.2 主要功能界面设计

用户通过菜单或其他进入方式打开某个功能点后，系统加载的使用该功能点的主界面，从该界面可以获得对各个子功能的入口。

对于有些复杂的功能点采用“查询式”的界面作为主界面，似乎是大多数管理软件的设计习惯。

例如，用户从菜单中打开了“客户管理”功能点，系统加载客户列表，显示当前客户，并在界面上方放置“添加客户”、“删除客户”、“编辑客户”等功能按钮。主功能界面一般分为菜单区、功能按钮区、查询条件区、记录展示区、明细展示区等各个区域，各种组件放置在这些区域中。这些区域的布局在本书中称为界面结构。下面介绍一些常用的界面结构。

3.1.2.1 查询条件如上，查询结果如下

这是最常见的查询界面，用户在上面的查询条件区中输入查询条件，点击“查询”按钮，系统就会在下面的列表中显示符合条件的搜索结果。

3.1.2.2 左侧显示大项，右侧显示查询结果

当用户点击左侧的某项主要内容时，系统便会在右侧加载该项主要内容下的信息。列表上方还可放置查询条件区域，方便用户进行更精准的搜索。

3.1.2.3 左侧为树结构，右侧为查询结果

当用户点击树形展开按钮时，树形结构将展开。当用户点击树形结构中的某个节点时，系统会在右侧的列表中加载属于该节点的相关信息。列表上方可以有一个查询条件区域。

3.1.2.4 主表在顶部/左侧，子表在底部/右侧

3.1.2.5 树形列表

列表展示的信息具有层级关系，用户可以通过点击节点来展开或折叠记录信息。

3.1.2.6 分类列表

表格是分层的，当用户点击主表中的某条记录时，页面会展开，显示子表中的记录。

3.1.2.7 日历

日历结构用于展示与日期紧密相关的信息，例如计划、任务、日志、资源使用情况、工作轮班、课程安排等。一般包括日视图、周视图、月视图。

3.1.2.8 总结

这里介绍的是主功能界面设计中常用的一些界面结构。实际工作中，根据客户、开发团队、设计师的不同，自然还会有各种其他结构，比如门户式结构（在主功能界面展示大量的说明、参考、帮助、提示、汇总信息）、图表结构（在主功能界面组合报表图表）等。作为设计师，要尊重客户的需求、行业规范、团队传统，但不必被这些框架所束缚，要做一个有想法的设计师。

3.1.3 表单布局设计

表单上的组件可以分为三类：

3.1.3.1 平铺

把这个界面需要的所有组件按顺序摆放在界面上，让用户打开界面就能看到所有的组件。显然这种方式只适合组件较少的界面，如果组件太多，这种方式会让用户感到头晕。用户一般比较容易接受同一区域内7到10个信息点，如果同一界面上的数据元素数量超过这个数量，就应该考虑其他布局方式。

3.1.3.2 分组

分组布局可以理解为平铺布局的一种优化，用户打开界面的时候，依然能看到所有的组件，但是这些组件被分成了若干个组。在这种布局形式下，虽然界面上的组件很多，但是因为是分组的，所以用户接收到的第一个信息点就是组信息，这对用户来说有一个层层的思考过程。这样一来，界面上就可以摆放更多的组件了。

3.1.3.3 动态加载

动态加载是一种灵活的布局方式，当用户打开界面时，并不是所有的组件都显示出来，只有当满足某些条件或者用户进行某些操作时，才会显示相关的组件。在这种布局形式下，由于部分组件被隐藏，更便于安排界面空间，当用户打开界面时，只看到一部分组件，更容易把握重点。

3.1.3.4 表格

表格布局是最常见的一种形式，以一些电子表格软件为代表。这种布局形式在管理软件中也很常见，一般用于快速录入信息。但如果每条记录需要录入的信息很多，或者字段间的控制关系强，这种方式就不太适合。

3.1.3.5 标签页

Tab页布局可以说是分组布局和动态加载布局的延伸，设计师在考虑使用Tab页布局的时候，往往是因为界面空间的问题，在有限的空间里无法放置所需的组件，所以将组件分组放置在不同的Tab页中，用户可以切换到不同的Tab页进行操作。

3.1.3.6 混合

当需要一次输入或编辑大量信息时，在一个表单中使用多种布局也很常见。

3.1.3.7 注意事项

3.1.4 操作设计

对于查询界面来说，由于不需要将数据写入数据库，数据的组织和校验过程较少，人机交互过程非常简单——用户输入条件后，系统从数据库中读取数据，然后加载到界面中。

而对于表单式的界面，或者说表单与查询相结合的界面，由于系统可能会提供很多对用户操作过程中的数据校验、辅助输入、确认提醒等的支持（这里特指用于添加、编辑数据的表单），所以往往会有非常复杂的人机交互要求。

一个复杂的表单界面可能会提供大量的子功能，这些子功能一般通过按钮、链接、命令图标、键盘快捷键、鼠标单击、鼠标双击、鼠标右键、离开某个组件、进入某个组件等方式提供给用户，用户执行操作后，会触发系统运行某个程序。

有时候，一个看似简单的界面其实隐藏着很多子功能，有些功能用户甚至可能注意不到。比如，当用户在文本框中输入数据并离开时，系统会验证输入数据的合法性。这个验证过程其实也是一个子功能，只是不那么明显而已。如果用户输入的数据是合法的，他甚至可能感觉不到系统做了这个验证工作。

3.1.4.1 面向数据库的写操作

例如，用户输入员工信息后，点击“保存”按钮，这个“保存”操作就会把员工信息保存到数据库中。

3.1.4.2 不改变数据库数据的操作

它可能只是从数据库读取数据()，甚至可能和数据库中的数据毫无关联，除了系统维护信息（如操作日志）外，该操作不会引起数据库中存储的数据的任何改变。

3.1.5 消息设计

当用户在界面上进行操作时，友好的系统会根据需要向用户反馈执行状态，这就是所谓的“消息”——系统带给用户的关于计算机内部结构的信息。

有些消息只是简单的告诉用户程序执行的状态，比如常见的告诉用户某条记录保存成功的提示消息；而有些消息则用来接受用户的额外指令，比如要求用户确认是否删除某条记录的提示消息。

系统反馈给用户的消息可以采用多种方式来表现，例如弹出消息框、显示在固定区域、写入日志文件等。

当然，消息不能狭义地理解为一段文字，有时系统会通过组件形状、位置、颜色、字体等的变化来向用户传达信息，这是很常见的，设计师需要确定何时、如何向用户传递消息。

3.1.5.1 消息弹出框

用户执行操作后，系统响应触发事件，执行程序。在程序运行过程中或运行结束后，弹出对话框告知用户程序运行状态或请求用户干预，这就是消息弹窗。

3.1.5.2 信息区

在某个区域可以设计一个消息区，如果在程序执行过程中有什么消息需要告知用户，就可以把该消息写入消息区，用户需要的话可以到消息区查看这类消息，如果用户不想查看这类消息，也不会对后续的工作造成任何不良影响。有些软件会设计一个消息浮动框，该浮动框在显示一段时间后会自动消失，不需要用户干预。这也可以理解为消息区的一种特殊形式，弹出框需要用户进行额外的操作，而消息区则不需要。

3.1.5.3 日志

大多数软件都会将系统运行过程中的一些重要信息以日志的形式记录下来，日志信息可以直接保存在数据库中，也可以写入某些日志文件（通常是文本格式）。

日志信息可以包括很多的内容，比如用户在什么时候进行了什么操作，向数据库提交了哪些数据，产生了什么重要影响，耗费了多少时间，占用了多少资源等等。

这些信息一般是管理员用来监控、分析、跟踪、调试系统的。系统日志的记录过程对普通用户来说是透明的，运行过程中普通用户是感受不到的。日志也是一种系统消息，但是它不是面向普通用户的，而是面向开发者或者管理员的。

3.1.5.4 其他方法

系统还有各种其他方式向用户提供反馈，例如改变颜色、字体、图像，或者发出某种声音或振动（手机）。

一般来说，这些方式反馈的信息比较简单，只是让用户知道他们的操作对系统产生了影响，或者让用户知道系统正在处理等等。

例如：用户点击某个链接后，链接文字会变成其他颜色，告诉用户该链接已被点击；用户上线QQ时，头像会由灰色变为浅色，通过头像的变化告诉用户用户已成功上线；当用户执行某个操作时，系统需要较长时间处理，为了让用户知道系统正在处理，以及处理的大概进度，会显示进度条，让用户根据进度条判断还需要等待多长时间。

4. 界面优化 4.1 概述

好的界面永远是以人为本的，易学、易用、健壮、交互性强。本节将从这些方面来探讨如何优化用户界面。

当然这些方面不只是跟界面有关，功能才是基础，没有好的功能，谈这些也没什么意义。

4.1.1 及时性

顺应潮流，设计符合时代。比如现在流行的设计理念是扁平化、轻量化，那么跟随主流的软件设计是最好的选择。我们来举个反例，当一个系统满足易学、易用、健壮、交互四个要素，但设计风格却是几十年前的，今天的用户会接受吗？当然不会，也不会有那么多老系统被翻新。

4.1.2 易学性

优化易学性是指让软件更易于用户学习，一个易学的软件可以大大增加用户使用的兴趣，并降低软件的总成本。

可以从以下几个方面考虑如何优化可学习性：

4.1.3 可用性

软件的可用性是指用户是否能够高效、方便、快捷地使用该软件。

显然，易学性是可用性的一部分。难以学习的软件不容易使用。但为了清晰起见，本书将可用性和易学性分为两个独立的概念：易学性针对的是尚未学习软件（或软件中的某个功能）的新用户，而可用性针对的是已经学习软件并能熟练操作的有经验的用户。

根据学习曲线下拉优化软件，用户在使用软件功能时，刚开始工作效率较低，随着学习内容的增多，使用频率的提高，工作效率会越来越高，但达到一定程度后，会趋向于一个稳定值（当然，这个值对于不同的用户根据其理解程度、学习能力等不同而不同），当使用软件处理工作的效率达到这个值时，该用户就被称为老用户。

为了提高软件的可用性，可以考虑以下优化原则：

4.1.4 稳健性

软件的健壮性是指当出现某些异常情况时，软件的处理方法的完善程度。这些异常情况包括很多方面，比如断电、断网、宕机、黑客攻击、资源耗尽、用户操作失误等等。

断电、断网等异常情况不在本书的讨论范围内，这里说的健壮性是指用户操作，是指如何利用软件功能来预防用户可能出现的操作失误。

为了提高功能的健壮性，一般可以从这几个步骤逐步考虑：防止用户犯错→让用户少犯错→犯错之后容易发现错误→允许用户改正错误→减少用户错误的影响。

4.1.5 互动性

为了防止用户犯错误，提高软件功能的灵活性，让用户更加放心，系统在执行过程中需要与用户进行交流下拉词工具【64xl.com霸屏技术在此】百度多少搜索才能出下拉词，让用户知道程序什么时候开始执行，执行过程中发生了什么事情，执行的结果是什么等等。所谓交互性，是指系统在执行过程中，能否以友好的方式与用户进行交流，让用户获得应该知道的系统信息，让系统获得应该用户提供的信息。

为了使系统具有良好的交互性，可以从以下几个方面考虑：

5. 结论

基础设施、数据验证、功能逻辑、动态交互四位一体的思路是对设计的最好诠释。