• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 58内部方法!一个更适合产品迭代的卡片创意法

58内部方法!一个更适合产品迭代的卡片创意法

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,经验分享,设计迭代等相关知识,希望在学习及工作中可以帮助到您

58UXD:交互设计师常常需要进行迭代设计,在已有的产品框架上发现问题,优化体验,更好地达成产品目标。

但随着产品逻辑和使用场景越来越丰富多样,直接面对着一个个设计细节去发现问题,解决问题,往往会忽视全局,顾此失彼,错过许多解决核心问题的可能性。

为此,我们琢磨试验出一个更适合产品迭代的卡片创意法。它可以:

  • 让我们站在更全局的视角发现问题
  • 让我们的创意发散过程更聚焦高效
  • 让每个人在协同设计中发挥更大的能量

前期准备:

大白板、笔、三种颜色的便利贴,我们选择黄红绿三种颜色,具体用法会在后文提到。

Step1:准备任务×场景画板

对希望迭代的产品模块,归纳其核心任务流程,作为X轴。

整理不同的典型场景,作为Y轴。

画在大白板上,成为之后做分析创意的画板。

这个步骤中值得注意的是“核心任务流程”的归纳,需要我们抓住需求的本质,提炼出更贴近本质的任务,而非具体的行为任务。

例如,我们在对转转APP的消息功能做迭代分析时,如果把任务流程按照实际情况,便会整理为:

收到消息通知→打开消息通知→查看消息→回复/其它操作

这样的任务分析会把我们的思路限制在已有的解决方案里,影响我们理解消息功能的本质,并发散新的满足需求的方式。于是,我们把消息功能背后的需求本质理解为“当有一些信息需要让用户知道并作出反应时的解决方案”,把任务流程归纳为:

接收(告知用户有消息需要了解)→阅读(了解更多消息详情)→反应行为

典型场景便是整理出这个产品模块会涉及到的主要使用场景,供我们逐个分析和发散创意。例如,转转APP的消息功能涉及的主要场景可以分为:商品留言、商品私信、订单消息等等。

Tips:每次选择一个典型场景进行深入的分析和创意可能会收获更多。

画板准备好后,就可以开始运用卡片做分析和创意了。我们准备了3种颜色卡片,分别命名为:

  • Now卡(黄色):用来表达现在的流程和方案
  • Problem卡(红色):用来写现在的问题
  • Better卡(绿色):用来写问题的优化方案和其它任何新的创意

Step2:贴Now卡

用Now卡在画板上贴出目前的流程和方式,帮助所有人在分析问题和产出创意前,可以共同了解整体情况和全部体验节点。

Tips:主持人可以提前整理出Now卡,并在会上进行说明,提高效率。

Step3:贴Problem卡和Better卡

用15-20min,所有人各自在Problem卡上写下目前流程和各个节点的体验问题,在Better卡上写下可以解决这些问题的创意。之后,每个人讲解自己卡片上内容并贴到画板上的对应位置。

Tips:主持人提前收集更多问题素材,并在会上进行介绍,可以让Problem卡片更真实有效,比如:数据分析报告、用户研究报告、合作方的问题收集等。

Step4:再贴一轮Better卡

再用15-20min,所有人再次发散创意并写在Better卡上,这一次的创意主要集中在:1)上一轮从其他同学的讲解中获得的启发;2)当前流程之外的新的可能、新的方式。之后,同样是每个人讲解自己卡片上内容并贴到画板上的对应位置。

Step5:整理小结

经过大概1.5小时的创意游戏,我们会获得比较全面的体验问题和很多可能的迭代创意。对这些收获进行整理,能为实际的迭代设计工作提供有效的支持。

这个卡片创意法也还在迭代优化中,欢迎大家用自己正在设计的产品试玩儿,并把感受和建议告诉我们哟。

欢迎关注58UXD 的公众号:

「国内各大互联网公司的内部教程」

  • 《腾讯内部分享!一个工作坊的完整设计流程剧透》
  • 《内部传统项目!揭秘FACEBOOK 设计互评的实战过程》
  • 《内部教程!超实用6步透视网易设计规范(附完整PDF下载)》

优设大课堂

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2018-08-23趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?
  • 2017-08-06网站设计经验 建设网站常犯错误汇总
  • 2018-08-23干货超多!6个值得关注的设计类公众号推荐
  • 2018-08-23是什么设计方法,让网易设计师都认同用它做出来的用户画像?
  • 2018-08-23我用这个极限推敲法,有效推进视觉设计
  • 2018-08-23用一篇文章,帮你掌握基础实用的动效技能
  • 2018-08-232018年值得设计师学习的六大视觉设计趋势
  • 2018-08-23交互基础小课堂!移动端的导航设计模式
  • 2017-08-06浮动菜单,可实现上下滚动的效果
  • 2017-08-06如何用JavaScript获取/计算页面元素的offset

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 泼辣修图开源图标免费下载+10秒做故障效果的PS动作
    • 腾讯超全干货!如何快速有效的发散思维?
    • 能让你顺利过稿的结对设计方法,原来这么易懂!
    • 如何把设计技巧融入进用户体验?来看高手的方法!
    • 从四大维度,全方位剖析APP应该如何设计好「分享功能」
    • 从这4个角度,做出情感化设计的产品
    • 资讯类产品阅读列表的交互设计思考与经验分享
    • 腾讯高级设计师:交互知识树系列之如何积累交互模型?
    • 平面作品太单调?三招提升设计层次感!
    • 老板让我点评这个UI设计,但我不知道从哪说起…

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有