用这个交互模型工具,让你的设计过程更加体系化

2017/10/31

网易UEDC – 崇书庆:本文介绍了一套交互设计模型工具(GUCDR模型 + 画布)。使用这个工具,可以让设计工作更加结构化地展开,设计过程更加体系化。它就像菜谱,有了菜谱做出来的菜一般不会太难吃。

GUCDR下载:http://pan.baidu.com/s/1jIf6d0a

一. 疑问:我的设计完整么?

我的设计过程完整么?

「用户画像、场景剧本、同理心地图、用户体验地图、可用性测试、用户访谈、竞品调研、数据分析」这些是不是应该都做一遍我的设计才完整?但笔者从来没有遇到过时间如此充裕的项目,在真实的工作中做「全套」几乎是不可能的。

那么到底什么样的设计过程算是完整的呢?

私以为,设计完整性的标准不在于方法的使用,而在于推导过程的合理性。详细而言就是,从原始信息到设计方案的推导过程在逻辑结构上是完整的,在因果关系上是合理的。为了达到这种「推导合理」,笔者总结了一套模型工具-GUCDR模型。套用这个模型便可以得到相对完整的设计推导过程,它可以很方便地组织交互设计工作-从需求梳理到设计落地。

二. 初识:GUCDR模型主干

GUCDR模型植根于数个设计模型,并不是完全创新的模型。笔者设计它的目的是在交互工作中可以直接拿来套用,可以把它看做是一个实用工具

如上图,这是一个非常简单的模型主干:所有设计均起始于「目的」,可能是商业目的或其他目的。然后经过「设计、最终、落地」为产品。用户条件是设计前须介入的两个重要因素。具体而言,只有“用户”使用产品并完成某些行为,才可能达到最初的「目的」。而设计总是戴着脚镣跳舞,也就是“条件”,譬如技术限制,譬如成本限制。

三. 主体:模型画布工具

为了让模型直接可用,我们将「模型主干」细化为「GUCDR画布工具」在实际工作中,只要能够回答画布中的每个点,即可形成完整的设计推演过程。在具体的项目中,有些点是已知的有些点是未知的。已知的点当然无需讨论,未知的点则需要我们通过一些方法去解答,比如各类调研方法、数据分析方法、设计方法等。如果项目资源有限,也可以使用“问问相关人员”这类更经济的方法。值得注意的是,不一定要回答模型中所有的问题点,可以依据情况取舍。

下面我们对画布中的内容进行相对详细的解释:

1. 目的

这部分的信息理应来源于需求方。但鉴于很多需求是模糊的,比如“我想做一个用户评价功能”,所以设计师在设计前需要通过“需求梳理”、“需求沟通”等方式获得这些信息。

a. 项目目的

  • 目的定义:为什么要做这个项目?比如“提高下单成功率”。
  • 目标用户:相对粗粒度的用户信息。
  • 用户价值:这个项目的用户价值是什么?比如“优化下单体验”。
  • 价值策略:目的实现策略,通过“优化下单体验”,提高“下单成功率”。

b. 项目目标

目标是可量化的目的。项目目标同样是需求方提供,数据化表达的形式为佳。量化的目标可以更容易推导出设计目标,比如某次运营活动,投放200W流量,曝光率目标是500W,获取新用户5W,成单50W元。通过这些目标可以确定设计上的分享率目标、跳出率目标、转化率目标、购买率目标等等。

当然,项目目标的完成情况不完全取决于设计,更取决于运营、产品、市场环境等多种因素。优质的200W流量和劣质的200W流量,对应的转化率必然是不一样的。所以,设计目标的制定需要考虑多种因素,比较简单的方法是参考以往的数据。

方法参考:需求评审、需求梳理、需求沟通;

2. 用户

a. 用户信息

  • 用户类型:细粒度的用户分类、组成比例,信息组织原则以“可建立用户画像”为基准。
  • 基础信息:地区、年龄、性别、职业、来源渠道、访问频率、消费额度等。
  • 特征信息:爱好、生活观念、审美倾向、行为方式、消费习惯等。

方法参考:查看后台数据、查阅历史资料、问卷、访谈、用户测试、用户画像等。

b. 用户场景

  • 场景类型:不同用户有不同场景,同一用户也有不同场景,列出所有场景后进行筛选合并,得到主次辅场景。
  • 场景描述:可以通过文字剧本或者流程节点的方式描述场景,回答:什么人?在什么情况下?有什么动机和行为?有什么担忧和阻碍?有什么感受和结果?此步骤是设计灵感的重要来源之一。
  • 用户诉求:用户想要什么?场景描述中定有涉及,可从场景描述中剥离出来。
  • 担忧阻碍:用户担心什么,会遇到什么问题?场景描述中定有涉及,可从场景描述中剥离出来。

方法参考:场景剧本、故事板、同理心地图、用户体验地图、访谈、观察、用户测试等。

3. 条件

条件,就是设计的脚铐:

a. 资源

指此次项目的资源信息,例如“时间排期”、“开发资源”、“渠道资源”等,此部分仅作了解即可。

b. 限制

指此次项目的各类限制,例如“注册必须填写公司名称等多项信息(业务限制)”、“webview无法调用邮箱类型键盘(技术限制)”、“原先产品中的红色不代表警告含义(历史继承性限制)”。

方法参考:需求评审、需求沟通、技术沟通、竞品调研、历史版本调研等。

4. 设计

设计部分从设计目标到设计策略到设计点,应当是一个巨大的树形图,如下:

a. 设计目标

设计目标建立在项目目标和用户目标(用户目标就是用户的诉求、担忧、阻碍)基础上,比如“某问答类产品”改版的部分设计目标是:

  • 提高用户活跃度
  • 提高提问数量
  • 提高回答率
  • 提高提问者和回答者体验

方法参考:需求沟通+树形图推导等。

b. 设计策略

设计策略建立在设计目标的基础上,每个目标可能有多个策略。比如上文中的“提高回答率”这条设计目标可能有以下策略:

  • 提高回答者触达率
  • 提高回答者打开意愿
  • 提高回答者回答意愿

制定设计策略的前提是充分了解“用户”、“场景”、“条件”,这些是设计策略的信息源,也是设计策略合理性的筛选器。

方法参考:树形图推导等。

c. 设计方案

每个策略都会延伸出多个设计点,所有可执行的设计点生成了设计方案。比如上文中的“提高回答者回答意愿”这个设计策略,可能对应以下设计点:

  • 在问题前加上「提问者昵称和头像」,造成「私信感」。
  • 将「奖励信息」附在问题上。
  • 把女性提问的问题推送给男性。

想要得到「设计点」,同样需要充分结合「用户、场景、条件」。仅仅通过“推导”和“脑补”是不够的,这是决定设计合理性的重要一环,也是新手很容易犯错的地方。最后需要补充的一点是:设计点简单相加无法直接得到设计方案,这期间还需要通过“信息设计”、“任务流程设计”、“界面推敲”等几个环节,才可以将设计点串联在一起变为设计方案。

方法参考:树形图推导、脑暴、焦点小组、设计内审、MVP+简要测试等;

5. 落地

a. 设计确认

设计确认有很多方式,比如走查、评审、用户测试等。

b. 设计实施

设计实施是重要的环节,设计效果的评判永远以线上产品为准,而不是设计稿。此部分可能含有:视觉对接、开发对接、跟进辅助、线上走查验收等等。

c. 结果验证

在产品上线后,需要统计线上数据、用户评价、利益相关者评价等信息。对照项目目标和设计目标,评判设计成果。并记录相关问题,为下次迭代做好准备。

四. 如何使用:5个步骤

  • 下载GUCDR模型画布工具;
  • 对照画布中的每个点,在文档编辑器中依次回答,或直接在脑海中回答;
  • 标记暂时无法回答的点,这些点便是设计完整性中的或缺点;
  • 汇总所有做过标记的点,按照画布中的数字顺序,并结合文中提供的“参考方法”规划设计工作(需求沟通、用户调研、数据分析、竞品分析等);
  • 按照以上步骤完成,将会一定程度上保障整个设计的完整性。在诸如作品集、设计汇报等需要系统性呈现设计过的场景中,也可以很方便地按照GUCDR的模型进行方案阐述。

五. 备注和下载

  • GUDCR模型工具尤其适合对设计系统性缺乏认知和掌控力的新手设计师
  • 使用此模型可以让设计变得有体系,但「设计得有体系」不等同于「设计得对」
  • 不是非要完全解答模型中的每个点,对于某些项目,有些点没有必要解答
  • 这个模型工具,是设计方法的容器,在使用过程中应该根据需要将设计方法放到这个容器中

欢迎关注作者「网易UEDC」的微信公众号:

「设计工具,理论至上」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/gucdr-interaction-model-tool

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里