童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

7月15日 听雨眠投稿
  2012年初,我负责了对公司“深度匹配”产品进行了一次全面的用户体验规划,对产品整体的设计开展提供了用户视角的依据。过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分享一下这个设计推导过程。
  新设计师在进行交互设计时,很容易直接进入具体的界面层的设计思考,而整个过程中的前期推导过程却很容易被忽略,在这个案例中会着重前期推导的部分。
  
  基于提炼的方法论
  先放出一张我在设计过程中提炼的设计思维完整的流程图,案例中的整个设计规划过程也基于该图的阶段过程展开,本文范围主要针对概念到定义页面的这部分。
  上图可以看出我们的整个转化过程涉及产品从概念到元素的始终,不同阶段的侧重点和目的各不相同,且每个阶段的转化节点都基于客观实际的实线关联,以保证由始至终的需求转化不失真。
  以此来看,整个设计过程就是一个不断Zoomin(放大聚焦)的过程,基于用户本源需求不断具体化。在验证我们的设计是否符合目标的时候,我们也需要不断的Zoomout(缩小),从更整体视角去俯视。
  接下来我们开始看这个设计过程。
  全局
  OK,我们首先来看一下用户在外贸中的主要行为,用户需求的基本概念是什么?
  下图可以看到,买家和卖家首先要达成订单意向,然后买家得到货物,卖家得到货款,这样就完成了外贸的整个过程,我们的网站服务也是基于这个模式展开。
  让我们Zoomin一下。。
  “深度匹配”是什么?我们定义它的目标是:促成买家卖家达成订单意向,简单说就是撮合服务。这是买卖家在外贸行为中的首要的一环。
  当我们的用户目标和产品目标清楚之后,怎么做?
  让我们继续Zoomin。。
  基于外贸专家提供的一些依据,我们以外贸过程中的用户行为建立起对应的产品用户行为概念模型,这样以来用户在整个过程中,主路径、任务目标就非常清晰了,交互设计后续展开有了基本骨架。
  继续Zoomin。。
  对应上图的纯用户行为视角,再稍微细化一下,把他转化为产品的用户行为流程图,把抽象的信息结构化。比如,上图中报价只是一个箭头表示信息流买家,而实际的网站行为中,报价需要买家主动去查看。所以该行为被结构化成一个标准网站行为术语“查看”。整体着眼,我们可以观察到不同用户的目标,行为,产生的信息,以及之间的关联和流向。
  上图已经很清楚的描述了该产品中的用户行为逻辑,但是作为设计的需求还是不够具体。
  我们还得继续Zoomin。。
  我们把这些结构化的信息基于用户情景转化为页面架构关系,如下图。注:因为一些原因,我们隐去了图片中的部分名称。
  上图中,和前一张图进行对照,之前结构化的行为和信息,被转化成了不同的页面来进行承载,而本身的逻辑关系依然没变化,和之前完全一致。(仅因为用户的管理需求增加了管理部分)我们可以观察到不同的用户有完全不同的情景和操作页面,同时之间的信息又是互相关联的,整个流程最终能到达目标闭环。
  PS:基于这个图,我们可以观察出用户的页面环境应分为不同的角色独立展开。。
  继续Z
  接下来,我们要对所有的页面进行一下归纳如下。注:因为一些原因,我们隐去了具体页面名称。
  去掉了那些箭头联系后,我们单独来看这些页面,是不是发现很有规律,非常的有结构?整理下来,页面需求非常清晰了(可以评估工作量啦。。哈哈),如下
  主页
  表单
  操作提示
  详细页面
  收件箱
  列表
  编辑页
  在这个基础上,我们根据每个页面本身的形态来定制统一框架,再基于页面承载的信息和功能进行布局,整个交互设计就已经基本OK了。当然在具体的页面中还会有更加细化的设计,我们可以依据我们的设计组件和设计规则来完成,在这里就不展开赘述了
  总结
  回顾刚才的这个过程,会发现,我们的交互设计就是一个不断基于需求的本源Zoomin的一个推导过程,在这个过程中,每个细化过程都基于上一步的清晰目标开展,环环相扣。这样的方法可以让我们设计的每个步骤都有系统化的支撑,不会偏离主要的目标。在设计工作结束后,我们再通过Zoomout的方式来反向验证,来检验最终的设计是否符合了最初的设计目标。(想让我演示一下Zoomout的童鞋,请把本文倒序阅读)
投诉 评论 转载

新浪微博“微吧”产品设计思路如果说形式和风格只是设计的一件外衣,那么解决问题的理念才是支撑它的灵魂!什么是微吧7月24号微吧产品正式上线。作为微博今年推出的一个重要产品,在起初接到这个品……手把手教你设计移动软件应用商城2011年各大移动应用商店迅速崛起,群雄割据。在移动应用商店的基础上,软件商店也悄然形成。这些软件、应用类商店形式多样、风格迥异。一些成功的应用商店都已然向“shoppingm……整体到细节的交互设计规划2012年初,我负责了对公司“深度匹配”产品进行了一次全面的用户体验规划,对产品整体的设计开展提供了用户视角的依据。过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分……白鸦:腾讯微信产品设计的几个阶段以下文章内容来自《白鸦的博客》Guang。com创始人;UCDChina发起人;贝塔。朋友发起人;5G咨询合伙人;专注于互联网产品设计;Blogge。他在博客上分享了关于微信的……浅谈阿里巴巴国际站改版打开阿里巴巴的国际站,一股小心清席来,完全是我喜欢的风格,相信大部分海外买家也很喜欢现在的新风格,融入了很多国际化的元素以及色彩搭配。我忍不住想写一篇文章来纪念一下这次的改版,……浅谈抽屉式导航设计Web端设计很多时候是在考虑如何将操作展示给用户,而mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来。这种隐藏实际上是对核心功能的一种突出。导航始终是产品设计……浅谈极简风格在设计中的运用现代城市生活中我们每天要面对嘈杂拥堵的街道和地铁,各式各样的广告,处理各种邮件和信息。于是我们内心追求一种体验那就是极简,像大家家喻户晓的品牌如:MUJI无印良品、苹果、宜家家……Banner设计“点横竖撇捺”文字,这种与人类历史几乎同步的信息表达形式,同样也是视觉传达设计中最重要、最基础的元素之一。她的历史沿革应该已经有非常多的同学做过分享介绍,这里就不再赘述。我想讲述的是字体在网……以行为为中心的设计世界上很多东西不是在以用户为中心的设计方法的指导下被设计出来的,不过这些东西仍然工作得很好。例如汽车,通过差不多的操作装置,全世界的人都能学会驾驶。再看看我们身边的各种产品,包……非设计师谈设计(一):胖胡斐谈Apple改版设计是一件好像人人都能看懂的东西,所以常有设计师抱怨“老板指手划脚”、“客户不懂装懂”。我们认为,设计是一门综合性极强的学科。可以说,它就是人人都能看懂,只不过,大家都是从自己……响应式网页设计需要考虑的5大预算因素【编者按】本文作者BFrost,纽约数字互动广告公司RGA的移动web战略家和设计师、前端开发工程师。作者主要对响应式网站和单独的移动网站进行了简单的比较,并总……爱奇艺WP7改版项目总结从设计角度来看,此次改版主要以视觉风格为主,辅以架构和交互细节的调整。不便细说,省略几百字,简要的总结为:遵循Metro视觉风格特点围绕WP7特性做设计优化架……
互联网产品的价值流动:价值流、工作流和信息流如何设计好消费向app产品用打酱油的故事教你做流程说明电商生态最后一公里:B端产品国际版体验设计实例分析:不同平台的购物车设计京东内部资料:用户体验提升模型3款产品实例分析:如何搭建用户激励体系之“活跃”指标设计师都应该掌握的设计理论知识什么是“高级感”的设计?阿里实战案例解析:设计思维的“破”与“立”聊聊产品增长:以NeoWorld的现象级用户转化为例关于排版,给你几个甲方不怼你的理由!(三)

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界