设计有三个窗口的框架结构网页_聊聊软件产品的交互设计和易用性原则

今天准备聊下软件产品的交互设计和易用性方面的话题。当我们做一个互联网SaaS类应用产品的时候，实际上整体产品设计不仅仅是简单的UI和模板配色，更加重要的即是基于业务场景和目标驱动的交互设计。

交互设计更加体现了在整个产品设计中的动态部分内容。

交互设计概述

交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。

交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

在《交互设计实用指南》里指出，交互设计应当是创造承接人类与计算机之间的界面即人机界面(Human-Computer Interface。交互设计的出发点在于研究用户和计算机交流(dialog)的时候，人的心智模型和行为模型，并在此研究基础上，设计界面信息及其交互方式，用人机界面将用户的行为翻译给计算机，将计算机的行为翻译给用户，来满足人对软件使用的需求。

所以，交互设计一方面，是面向用户的，这时交互设计所追求的既是可用性(Usability)，这也是交互设计的目的所在；交互设计的另一个方面是面向计算机实现的，这时我们关注于“软件工程化”。

在交互设计中，可用性设计是一个关键内容， 可用性指的是一个产品可以被特定的用户在特定的使用情况中，有效、高效并且满意得达成特定目标的程度(ISO9241)。其本身可以理解为有效，高效和满意三个递进层次。

有效性：有效性是指用户完成特定任务和达到特定目标时所具有的正确和完整度。如果用户不能完成他们的目的，那么无论体验是长时段，容易还是复杂，这个产品可能都没有意义。

高效性：高效性是指用户在完成特定任务和达到特定目标的容易程度和时间长短。这可能会牵涉到许多因素。例如，我们的软件启动速度太慢，处理速度太慢，这会影响到软件的高效。再比如，在一个呼叫中心使用一个更高效的呼叫中心系统，可能造成操作员每天能够处理更多的电话数。

满意度：满意度是指用户在使用软件产品过程中所感受到的主观满意度和接受程度。在用户能够有效、高效地使用软件的基础上，给予用户一些更多地“体验”，考虑那些更多内涵。这也是我们交互设计真正的水平所在。例如：我们需要避免用户出错，也同时能够提高方法让他们从错误中恢复；我们需要让软件易学，以便让新手快速成长为中间用户，让需要的中间用户成为专家；我们需要做精美的页面让用户喜欢；我们需要塑造我们的品牌风格，让用户“膜拜”……

交互设计就是设计软件上可提供的交互方式，来满足人对使用软件的三个递进层次的需求。

也就是说，首先，应当保证软件的有效性，如非有效，一切皆空。接着，保证软件的高效性，软件虽然已经完成了他的目标，那么是不是可以在这个基础之上，缩短完成目标的时间长度或者是降低认知成本等，最终达到提高生产力的目的。

在完成了这两点之后，我们可以继续考虑提高软件的满意度，这里可以通过一些视觉的提升、品牌效应和创造新的体验(苹果一直是这方面的好例子) 等方法来提高软件的满意度。

用户体验五层模型

谈交互设计一般会谈到用户体验的五层模型，从抽象到具体分别是战略层，范围层，结构层，框架层和表现层。战略层往往由公司最高层负责和制定。第二层范围层，是具体设计软件相关的功能和内容，该层往往由公司的产品部门负责和实施。第三层是结构层，包含交互设计和信息架构是主要内容，该层也是交互设计师最为关注的重点，一般交给公司的UED部门执行并负责。第四层为框架层，主要是完成交互产品的可视化工作，包括界面设计和导航设计和信息设计工作。最顶层为表现层，主要涉及到APP的视觉设计、动画转场、多媒体和文字排版等具体呈现的形态。

对于视觉设计，UI和配色等往往一般有专门的美工或视觉设计工程师，因此对于交互设计工程师来说重点还是在框架和结构层。交互设计要解决的核心问题还是基于业务场景和目标，如何构建一个合适的框架结构，以方面最终的用户基于这个框架结构快速的完成目标。

易用性和交互设计关系

对于软件产品的易用性，也可以理解为前面交互设计谈到的可用性。即主要解决有效，高效和满意三方面的问题。交互设计和易用性的关系，可以理解为交互设计是一个业务目标驱动的动态过程，而易用性是最终的产品交互设计输出的结果。

没有结合交互设计的易用性输出，往往更多仅仅是点上的改变，而结合交互设计的易用性输出才是围绕业务场景和目标这个线和面上的改变。

所以谈交互设计的时候往往比谈易用性的范畴更大。在06年我在新浪博客就总结过软件易用性改进方面的一些内容，具体如下：

//软件的智能和记忆功能1.用户登录界面最好有用户名和ID的记忆，焦点直接定位到密码输入框2.单据录入界面最好有保存和载入默认值的功能3.单据搜索界面可以保存用户自定义的各种搜索条件组合4.用户调整过的GRID的列宽，窗口的位置可以自动记忆5.系统可以根据用户的使用频度对相关功能进行自动的优先级排序6.系统能够记忆不同用户的使用偏好，使用系统的固有模式和常用的自定义设置 //减少不必要的重复交互1.减少不必要的各种操作，能够点一次鼠标或敲一次键盘完成的绝不作出两次或多次。2.提示信息要适度，太多不好，太少也不好。3.数据项完整性校验问题要注意光标焦点自动定位到错误处4.完整业务功能不要让用户在多个窗口切换多次才能够完成。尽量减少这种切换。5.为了方便用户切换窗口，相关的表单最好都作为非模式的形式。6.相同的信息不要让用户在系统中多处或多次录入，保证入口的唯一性7.系统要尽可能根据用户已经录入信息自动获取其它附属信息，而不需要用户重复的选择或录入。 //导航和界面跳转1.表单新弹出对话框，对话框再弹出对话框的这种层次要控制在3层以内。2.所有的非模式活动窗口最好有类似桌面任务栏一样的停靠方式，方便切换窗口3.系统可以支持用户自己定义常用功能和菜单4.对于常用功能应该提供便捷的快捷键和工具栏按钮5.对于系统中提供的各种业务和表单功能能够让用户便捷挑转到帮助信息上6.对表单和界面联动和交互的时候要注意相关界面数据的自动刷新7.一个窗口中最多不要出现超过三个的GRID控件8.BS方式不要左右滚屏。CS模式既要避免左右滚屏也要避免上下滚屏9.需要根据业务查看需求和数据的展现需求来选择合适的界面控件 //系统性能和健壮性方面的1.系统中相关的耗时操作都必须必须转变鼠标为等待状态2.系统耗时操作超过30秒的最好能够提供给用户相关的进度条功能3.系统耗时功能超过2分钟的最好能够设计为异步多线程的方式进行处理4.系统应用有友好的完整性和约束校验的提示信息，方便用户修改录入数据5.在系统出现异常情况下应该有友好的统一的提示信息，同时后台应该记录详细的异常日志 //界面友好性和易用性方面的1.表单应该能够根据屏幕分辩率自动适应。在界面上让用户一次能够看到足够多的信息2.表单应该支持Tab键功能，顺序为从左到右，从上到下。3.常用的表单应该同时支持键盘操作和鼠标操作。4.界面上控件的布局应该间距适当，标签和控件对齐，有适当的录入提示信息。5.界面的配色应该尽量简单，尽量少使用各种刺眼的颜色6.用户看到表单后应该就基本清楚相关功能，表单要尽量自我解释，不要设计过多的隐含在界面里面功能 //数据的录入和检索1.根据业务需要选择适合的数据录入控件2.数据录入控件应该有完备的数据完整性和一致性校验功能3.系统应该提供用户暂时保存录入数据的功能4.能够自动获取数据不要让用户再去录入，能够选择录入数据不要让用户手工录入5.数据检索条件应该适中，不应太多也不应太少。检索支持组合条件检索。6.为了满足不同需求检索可以提供简单检索和高级检索多种方式。7.应该在第一时间提供给用户检索数据，因此检索功能存在性能问题时候要考虑分页。8.在检索功能较耗时的时候应该提供给用户相关的进度条显示进度9.表格最好能够提供行显示和列显示等多种显示模式，方面用户查看数据

当然这个总结更多的是面向传统BS端软件应用的，那么对于移动互联网和手机端应用软件，实际上核心思路虽然相同，但是具体的交互设计和易用性设计出现了很大的变化。对于这块网上也有专门的文章进行总结。

而对于交互设计和易用性，今天还是结合我们自己的软件研发的一些情况，对里面经常出现的一些交互设计和易用性问题进行总结和思考。

交互设计和易用性核心是什么

最近我一直在思考一个问题，就是交互设计和易用性的核心究竟是什么？我们可以听到很多和易用性相关的一些说法，包括了UCD用户为中心，目标导向，可视化设计，信息架构分层，UI界面设计，减少记忆等很多内容。

但是真正交互设计的核心仍然是我前面谈到的一句话，即：

交互设计核心是深刻理解业务场景和用户需求，然后设计最合适的通达需求的路线。这就已经解决了可用和高效的问题，其次就是注意整体风格，配色，一致性等静态设计，以获取更好的一个使用体验感受，达成使用产品过程愉悦。

简单来说交互设计需要完成从业务场景到业务功能实现之间的映射，而这个映射的另外一个关键就是角色，不同的角色往往驱动了不同场景下不同的功能点和内容的编排。

角色是一个抽象的概念，比如我们常说的审批者，普通员工，管理者，财务会计，项目经理等。一个人员本身又可能拥有多重角色，比如张三既是一个普通执行者，同时也是一个管理者或审批者。由于存在这种组合，也导致整体的交互设计或功能设计会变动更加复杂。

对交互设计的一些举例说明

在这篇文章我不准备再去讲解太多交互设计理论或易用性原则的内容，而是结合这些原则举一些实际的场景和例子来说交互设计和易用性设计。

功能满足粗粒度特性

在谈SOA架构和接口服务设计的时候，经常会谈到服务具备粗粒度特性，即任何一个服务都是满足某一个业务场景需求而设计实现的，同时仅仅提供消费者需要的内容，屏蔽任何和需求无关的实现细节，内部的复杂性不要暴露给客户。

即使我只想看到我希望的内容，其他都是干扰。

举一个简单的例子，采购系统提供了供应商信息模糊查询功能，任何需要查询供应商都可以通过该功能，该功能有诸多的模糊查询条件，供应商信息查询结果也会显示基本信息，地址信息，扩展明细表格信息。

但是有一个业务场景很简单，即仅仅通过供应商编号，快速的查询到供应商的名称，组织结构代码，法人代表，联系人姓名和电话。

如果这个功能使用场景相当大，按粗粒度原则就应该单独设计和实现一个独立的小功能，这个小功能一方面可以减少信息过载，同时本身也保证其他信息安全，同时由于返回信息量小可以实现更加高性能的查询响应速度。

操作入口和首页设计

“操作入口明确”，就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”，指的是产品内部不同模块之间的转接元素，例如在Web产品中，按钮控件、输入框、文字链等都属于操作入口；“明确”指的是入口的视觉感是清晰的、可识别的；“合理”是指入口的出现是符合用户操作逻辑的，适时的。

任何一个APP类应用可以看到，首页都是最关键的一个设计页面。因为所有的用户在登录进入到APP后，首先看到的就是首页这个界面。

首页的设计不是简单的堆放几个快捷图标，给出几个统计分析图表，而是真正要从业务场景和角色驱动去思考，一个用户在登录进来就最希望做什么事情？那么这个事务就必须显示最方便，最容易达到的地方。

一个报销APP来说，对于普通员工登录后最想做的事情就是报销，那么报销的核心功能必须放在首页最显眼的地方，而不是放在任何二级目录下。

其次，一个用户兼顾了多个角色的时候需要同时考虑如何设计多角色兼顾的首页和展现，比如一个管理者登录报销系统，本身有单据报销的需求，也有单据审批的需求。那么就必须考虑两者如何更好的整合展现。

首页对每一个APP应用来说都相当珍贵，不应该浪费掉绝佳的内容展现机会，一个好的首页一定会促进内容的消费和使用，同时也提升整个APP应用的粘性。

APP端和PC端独立设计

对于一个SaaS类应用，如果同时存在APP端和PC端两个入口，那么即使对于同样的功能实现也需要分开独立设计。要知道同样的功能内容展现形式，交互方式，在APP上都和PC端存在巨大的差别，完全不能用同样的一套标准或思路进行设计和实现。

举一个最近看到的例子进行说明

一个申请单的创建功能，在设计PC端的时候设计了一个通过excel批量导入数据的功能。而在APP端却完全照搬这个功能，那就是一个完全的反例，也是脱离使用场景的产物。

试想以下，APP端本身就不适合Excel处理和编辑，难度在APP端进行申请单创建的适合，我们还先在PC端处理好Excel，再将Excel发送到APP端，然后在APP端进行导入。如果有问题又需要在PC端进一步修改再同步到手机上。

显然上面这个场景本身就不存在，APP端本身也不应该设计上面这种功能。

效率和易用性有时反而是矛盾

最近看到一个PC端的功能实现，整体采用了向导式的设计风格，看起来挺不错，每一个步骤都有详细的说明和提升，即使第一次操作这个功能也可以无须他人帮助完成。

Don't Make me think，这是在产品易用性设计中经常谈到的。但是不思考并不代表用户就是傻瓜，而是应该尽量通过引导的方式减轻用户的记忆负担。

什么是记忆负担？

一个功能如果你一个月才用一次，那么下次再使用的时候很可能有些操作步骤或录入要求你无法记忆清楚了。但是如果一个功能你天天用，每天还用上100次，在这种场景你是不存在任何记忆负担的说法的。

比如上面的功能，这个功能仅仅是给企业的财务人员用，而不是面向所有用户使用，财务人员每天可能都用这个功能进行成本核算相关工作，功能使用频度相当高。

那么我们向导式设计反而是糟糕的设计。

即由于采用向导式设计，反而导致一张单据的处理会增加20秒的时间，如果1天财务人员要处理100张单，那么就会多花半个小时的时间。

这反而极大的牺牲了功能的易用性和使用效率。

单功能设计到多功能协同

在前面谈交互设计核心的时候就谈到，交互设计往往需要基于场景来进行多功能间的动态协同设计。实现各个功能点之间基于业务场景的自衔接。

要做到这点，一个交互设计师或需求人员必须深刻的理解业务场景。任何一个功能都不应该是孤立存在的，而是为了一个业务场景或目标的达成。

还是拿一个报销系统来举例。该系统提供了出差申请，在线预计酒店机票，出差报销等诸多的业务功能点。而一个员工要出差的场景为：

• 首先提交出差申请单，出差申请等待主管领导审批
• 领导审批通过后，进行机票预订，进行酒店预计
• 出差返回后进行报销

那么如果考虑场景下的多功能协同则是，当提交了出差申请审批通过后，是否会快速的引导我进入到机票预订界面，还是我要找半天机票预订在哪里？其次，出差申请已经填写了出差的地点和日期，当进入到机票预订界面的时候是否可以快速的对地点，日期等进行默认输入，而减少输入工作量。最后在我基于某次出差申请进行报销的时候，是否会自动的对出差期间发生的机票，酒店，打车等费用进行自动的归集，而不再需要我手工导入。

当谈到这些内容的时候就可以看到，即使对于一个最简单的出差场景，都可以做大量的场景分析，基于场景来分析功能点之间如何协同，如何更加自动化和智能化的衔接。

易用性和软件智能化

对于整个软件易用性设计，一个很大的发展趋势就是向智能化方向发展。

比如首页的快捷功能入口，不是简单固定快捷功能，也不是让用户自己去定制快捷功能，而是应该系统自动去分析哪些是用户最常用的功能，然后将常用功能列出。

比如一个APP提供搜索功能，一般都有搜索历史现实，方便我们用已经搜索过的历史查询条件进行快捷的搜索，这个功能本身可以提高效率并减少记忆。

但是这个功能不是简单将所有的搜索历史排列出来，而是应该分析哪些才是用户经常大量搜索和使用的查询条件，只有这些搜索条件才是最需要展现出来的。而不是展现出大量的搜索历史，让用户陷入到信息冗余中。

如果定义一个新词的话，即AI-Usability，智能化易用性。

有些易用性，高效和方便性并不是一开始就设计出来的或者固化的，而是系统能够智能分分析用户的行为操作，然后给出优化后的易用性调整设计。

举个简单例子来说，如果系统记录到大量用户都在使用搜索功能的时候，需要不断的调整搜索条件，反复搜索往往才能最终找到需要的目标内容。那么这个功能的易用性就是值得优化的，而优化的点正好是对用户行为的详细分析后才能够给出。

通过软件智能化分析和学习，不仅仅是提供类似历史记录，系统猜，商品推荐等简单的易用性能力，更加重要的是能够面向不同的用户群体和使用行为分析，给出实际的功能重组和功能编排设计上的优化。