交互基础小课堂！目标导向设计之「定义交互设计框架」

最近习的时，互同小哥哥问我一个问题：果你面试的时，面试官让你设计一个游泳池，你怎么做？

仔细，其实这问题并不真的让去设一游泳池，考验的设思与方法。我一直很喜欢目标导向设计套理论，因为它从前期研究到建立人物模型，到提取设计需求，到今天想分享的定义互框架，一套流程让我对设计互联网产品有更新的认识。

其实设框架会包含很多，比如交互设计框架，视设计框架，工业设计框架，服务设计框架等，从框架往下进行细节上的考量，么我们设计基以成型。

义交互设框架的一些骤：

一、定义平台 、姿态、输入方法

我们行设，先确好，我们设的产品基于什么平台设的。

比如：是随使用，易受光线、网络响的移动机？还是景固定，涉及响应式计的web？或者是在嘈杂的商，街面，绝大部用户都是新的指示屏？不同的限制条件别多，比如然环，社会环等。

然后我们还要确定户对这个产投入的注意时间，Cooper把这个概念称为姿态。

比如：有品，用户在其投入时很短，要进来完成目标会走了，完成目标个过程可能需要1分钟不到，比如支付宝付款，这可以称为暂时姿态；

而有的产品，用户长时间注在个产品上，以以小时为单位计量，比一视频类、教育类的app，就以称为独占姿态。

接我们还确，用户与产品的交互方式，或者输入方式。

是键盘还是鼠标还是触屏？比如移动端，通过触摸势以及物理按键、还有语音、指纹、人脸识别等操作产品进行交互，Material Design面关于势这一节有提Touch Mechanics（触发动作）如touch，drag，pinch open等，还有Touch Activities（触发行为）如expand、zoom in，zoom out等。

二、定义功能、数据元素

我们之义设需求的时候，义了数据需求以及功能需求，行设框架的时候，我们需把数据需求以及功能需求转化数据元素与功能元素，也就这些需求以什么样的形式展示给用户 。

数据素是数据的基本位，由数据项组成。举个例，通话记录的一条通话记录为一个数据素，而一条通话记录的每一项就是数据项，比如系人号码、间、地址。

而功元素的话，我觉得功元素是对数据元素的一些行为操作，户利这些功元素来成任务。如说打电话这个功需求，它的功元素有：输入号码、拨打电话、挂断电话等。

我们可以根据物模型列出这些信息元素，可能括多案，而我们在做案选择时候，可以从哪些选择呢？

小小地整理一下，下图：

果说定义场提供一种从整到细节的互设计方法，么以说，设计原则提供一种从细节到整的互设计方法，两者结合来，以平衡整个设计程。

关于设原则，我很喜欢Alan Cooper的一句话「除非好的设方案，否则就遵从设原则」。

因为用户的多操作方式其实都已形成了一个习惯，如果背离的操作习惯，用户就要从零开始学习，花费更多的间成本。而多计则是前人总结下来的经验，有效地借鉴这些则也能避免进一些误。

三、确定功能组、层级

因为数据素和功能素存在的目的是为了让用户完成目标，不同的数据素和功能素要完成不同的任，所以把数据素和功能素进行组重要。

最实习在优公司平台一个产的交互流程和交互细节，而在优的时候就深刻地感受到了对这些元素分组与确定层级的重要性。

我们可以根据逻辑关系将这些元素进分组，在分组时候，可以考虑这些问题：

• 哪些元素需要捆绑使，哪些是？
• 相关联元素使用序如何？
• 哪元素之间具有包含关系？
• 哪些元素需占片的区域面积？
• App如何组织这些素才能优化工作流？
• 哪些元素有助于人物模做决定？
• 哪些元素需要获取视觉焦？
• 采用什么样的互模式和原则？

举个例子：

比支付宝的提现功能，为什么提现金额个功能元素与用余额个数据元素捆绑在一呢？是因为用余额影响用户对提现金额少的决策，所以两个元素关联度比大。

站人模型的角度，这一页面，信息层级的优先级提金额小>可用余额，并且可用余额只影响用户对提金额的决策，并不决用户的提金额小。

我们知道提之，该页面的视觉焦点提金额多少（见图），输入完提金额的时候，视觉焦点变了「确认提」的button这功能元素（见下图）。所以这里对这些信息元素行分组与确优先级也能帮我们后面设交互框架的时候确视觉焦点。

四、勾画交互框架

接着我们就要将分组的元素纳到页面里面。我们以先草拟出一草图，根据我们期设计的推进不断改进完善，比有人物目标没有完成或者完成目标的程比冗的，我们要增加或者删减一元素。

用草图的形式，关键注意设整体，非细节，另外不仅仅画单页面，应该把页面与页面间的关系标注出，也就页面流程以及注释。流程趋于稳，就可以用电脑绘制图了。

五、构建关键路径场景剧本

关键径场景指人模型与产品交互框架行交互的过程细节，并且人模型频繁使用界面的主径。

它跟情景景不一，关键路径景关注细节，在细节上严谨地描述每个交互的确行为，以任为导向（但是并不味着可以忽视目标，因为目标是在产品计中一直要关注的点）。

举个例：

如说点xx外卖这个任务，键路径场景就要具体到户从哪里进入app，及进入app后直到成任务前，看到的每一个页面，数据元素及功元素，及户怎么根据这些元素进行决策，判断，及户点击了哪些按钮，接来进入哪一个页面，都要详细描述。

我觉在构关键路径场景这步和勾画交互框架这步，其实是个可循环步骤，到最后确定案。

六、运用验证场景完善设计

我们把主要流程主要页完善好后，可以考虑品些不太频繁使用页。比如些分、不经常使用页，不定用到页，如下：

举个例子：

比当我们设计用户点外卖个场的时，能的流程是：进首页——查看分类——选择店铺——选择美食——支付成功，但也有一种用户他是有很明确的目的道自己想要什么，他的流程能是：进首页——搜索美食——选择店铺——选择美食——支付成功，还有一种用户就是从自己历史订单里面选择，他的流程就是：进首页——进订单页——选择订单——来一单——支付成功。

用户的目标都点外卖，但关键径里面会出分叉点，那么我们可以把分叉后的场景描述替场景。

验证景还有一种情况就是一些不经常使用的功能，但是一定会用得的功能，比如一些app的清除数据功能。可以把这种景称之为必须使用的景。

还有一种就是经使，一定得到，但是产必须要考虑的情景，如手机通讯录，如果户添的联系人和历史联系人重名，那系统该怎设置与反馈呢？我们可把这种场景成为边缘场景。

这些验证场景情况都能影响我们品用户体验，所以有效地考虑到这些场景也很要hhh……

总结

那…结下定义交互框架步骤：

• 定义平台、输入方法
• 定义功能、数据元素
• 确定功能组、级
• 勾画交互框架
• 构建关键路径景
• 验证场景善设计

其实在定义完交互计框架后，还没有结束，还需要和其计协调配：

如和视觉设计师配合，配合视觉设计师善外观和视觉格；

比如和工业设计师配合，有句话很好概括他们配合，「形服从功能」，交互设计需求指导着工业设计，工业设计制造成本素反过来又影响着交互设计各可能性。

比和服务设计师合，但是服务设计通常影响整个架构的业模式，比服务蓝图，所以一般优先构建服务设计框架。

后，回到一始的问题：如果面试的时候，考官让设一游泳池，该怎么办？

如果你完了前面写的关于交互计的点思考的文章，总结的目标导向计的所有文章，那一定不难回答这个问题了hhh。

往期顾：

• 《交互基础课堂！目标导向计之“用户目标”“心智模型”》
• 《交互基础小课堂！目标导向设计之“设计研究”》
• 《基础知识普！目标导设计“情景场景”与“设计需求”》

注作者的微信公众号：「UED设计笔记」