整体到细节的交互设计规划

《整体到细节的交互设计规划》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、整体到细节的交互设计规划Bysuerb0n2012/08/04•LeaveaComment•In管理方法LetsZoomin整体到细节的交互规划2012年初，我负责了对公司“深度匹配”产甜进行了一次全而的用八体验规划，对产品整体的设计开展提供了用户视角的依据。过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分享一下这个设计推导过程。新设计师在进行交互设计时，很容易直接进入具体的界而层的设计思考，而整个过程中的询期推导过程却很容易被忽略，在这个案例屮会着重前期推导的部分。基于提炼的方法论先放出一张我在设计过程中捉炼的设计思、维完整的流程图，案例中的整个设计规划过

2、程也基于该图的阶段过程展开，本文范围主要针对概念到定义页而的这部分。概念分析—定义流程_►页面_►功能分解—士兀素实现达到应用组合价值◄—定义目的定义任务定义组件◄—定义元素用户价值页面关系框架横块结构规范（迭代）上图可以看出我们的整个转化过程涉及产品从概念到元索的始终，不同阶段的侧重点和冃的备不相同，且每个阶段的转化节点都基于客观实际的实线关联，以保证由始至终的需求转化不失真。以此來看，整个设计过程就是i个不断Zoomin（放人聚焦）的过程，基于用八本源需求不断具体化。在验证我们的设计是否符合冃标的时候，我们也需要不断的Zoomout（缩小），从更整体视角去俯视。接下

3、来我们开始看这个设计过程。全局OK,我们首先來看一下用八在外贸中的主要行为，用八需求的基本概念是什么？下图可以看到，买家和卖家首先要达成订单意向，然后买家得到货物，卖家得到货款，这样就完成了外贸的整个过程，我们的网站服务也是基这个模式展开。买家达成订单意向卖家交易让我们Zoomin—下..“深度匹配”是什么？我们定义它的冃标是：促成买家卖家达成订单意向，简单说就是撮合服务。这是买卖家在外贸行为小的首要的一环。用户用户目标深度匹配产品目标买家找到满意的卖家建立高效的匹配通道卖家找到满意的买家买家达成订单意向卖家当我们的用户目标和产品目标清楚之示，怎么做?让我们继续Zoom

4、in..基于外贸专家提供的一些依据，我们以外贸过程中的川户行为建立起对应的产品川户行为概念模型，这样以来用户在整个过程中，主路径、任务目标就非常清晰了，交互设计后续展开有了基木骨架。买家❶张贴1报价•<1砂采购据求多个卖家达成订单意向指定卖家继续Zoomin..对应上图的纯用户行为视角，再稍微细化一下，把他转化为产品的用户行为流程图，把抽象的信息结构化。比如，上图中报价只是一个箭头表示信息流买家，而实际的网站行为中，报价需耍买家主动去査看。所以该行为被结构化成一个标准网站行为术语“査看”。整体着眼,我们可以观察到不同用户的目标，行为，产牛的信息，以及Z间的关联和流向。I

5、SAM冋上图已经很清楚的描述了该产殆屮的用户行为逻辑，但是作为设计的需求还是不够具体。我们还得继续Zoomin..我们把这些结构化的信息基于用户情景转化为页面架构关系，如下图。注：因为一些原因,我们隐去了图片中的部分名称。任务逻辑列表编笹页11目标页面主行为主路径3CI丁XT—a买家Link列表列表aaion摆表单3C：€>c洋甘"•G-列表dXiX1卖家公共主贡上图中，和前一张图进行对照，Z前结构化的行为和信息，被转化成了不同的页面来进行承载，而本身的逻辑关系依然没变化，和之前完全一致。（仅因为用户的管理需求增加了管理部分）我们可以观察到不同的用户冇完全不同的情景和操

6、作页面，同时Z间的信息乂是互相关联的，整个流程最终能到达目标闭环。PS：基于这个图，我们可以观察岀用户的页而环境应分为不同的角色独立展开•.继续Zoomin...接卜•來，我们要对所有的页面进行一卜归纳如ho注：因为一些原因，我们隐去了具体页面名称。搜索（ext.Landing页管理（exte产品核心页面去掉了那些箭头联系后，我们单独來看这些页而，是不是发现很有规律，非常的有结构？整理卜•來，页面需求非常清晰了（可以评估工作量啦•.哈哈），如F•主页•表单•操作提示•详细页面•收件箱•列表•编辑页在这个基础上，我们根据每个页面本身的形态来定制统一框架，再基于页面承载的信

7、息和功能进行布局，整个交互设计就己经基本0K了。当然在具体的页面中还会有更加细化的设计,我们町以依据我们的设计组件和设计规则來完成，在这里就不展开赘述了总结回顾刚才的这个过程，会发现，我们的交互设计就是一个不断基于需求的本源Zoomin的一个推导过程，在这个过程中，每个细化过程都基于上一步的清晰hl标开展，环环相扣。这样的方法可以让我们设计的每个步骤都有系统化的支撑，不会偏离主要的目标。在设计工作结束示，我们再通过Zoomout的方式来反向验证，来检验最终的设计是否符合了最初的设计口标。（想让我演示一下Zoomout的童鞋，请把本文倒序阅