Rayking

关于我

产品的未来是人

我的手机

标签:短视频

广州某天蓝蓝

标签:好图

京东购物清单背面

copy一个,放款业务流程p2p—来自老熊

标签:产品流程

晓林哥偶遇

四五月应该是搞大事情的日子
自励志故事

标签:Next

Tina:



看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢?

首先,我们先来认识一下产品的五个用户体验的要素

 

 

用体验的五个层面分为:战略层、范围层、结构层、框架层、表现层

五个层面自上而下地建设,具备基本的双重性、用户体验的要素和应用这些要素。

所谓战略层,即为产品目标、用户需求,通俗来讲,经营者想从网站上得到什么,用户想从网站上得到什么?

所谓范围层,即功能规格和内容需求,其意义在于这是一个有价值的过程,同时能够产生有价值的产品。比如,提供用户可以保存之前的邮寄地址功能。

结构层,即交互设计、信息架构层,其目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点:理解用户的工作方式、行为和思考模式。

框架层,即界面设计、导航设计、信息设计层。

界面设计是用来确定界面空间元素以及位置,提供用户完成任务的能力,通过它,用户能真正的接触到那些“在结构层的交互设计中”确定的具体功能。

导航设计:呈现信息的一种界面形式,提供给用户区某个地方的能力。

信息设计:呈现有效地信息沟通,表达想法,它是这个层面中范围最广的一个要素。

实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起,形成一个统一的、有内在凝聚力的架构的地方。

  1. 通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。

线框图的好处是可以确定一个建立在基本概念结构上的架构,同时指出了视觉设计应该前进的方向。

表现层,即为视觉设计。界面设计考虑可交互元素的不足,导航设计考虑在产品中引导用户移动的元素安排,信息设计考虑传达给用户的信息要素的排布,解决并弥补“产品框架层的逻辑排布”的感知呈现问题。

评估一个页面的视觉设计的简单方法:终于眼睛。一个成功的设计有2个重要的特点:

  1. 遵循的是一条流畅的路径;在不需要太多细节来吓到用户的前提下,它为用户提供有效选择的、某种可能的“引导”。

所以,我们的设计师应该怎么做呢?

读懂原型图 

  • 读懂PRD。确保在需求理解上,与PM保持一致;查找漏洞。人无完人,在成熟的PM,也难免有疏漏。找出遗漏,与PM反馈、沟通;提出产品新想法。读PRD时,总会有一些产品的好想法冒出来,及时与PM和团队沟通;开始构思交互。

草图快速沟通 

通过草图,快速将“产品关键流程”、“关键交互界面布局”呈现纸面,以此与PM、技术沟通至达成共识;目的是为了:

  • 再次扫遗漏;收拢想法。这个阶段,产品设计基本定型;达成共识。确保让产品、设计、技术队要做的事情有一致的理解,PM需更新PRD、技术开始做开发准备。

Axure线框图表现产品流程、界面 

包含:产品流程图、全部的页面原型。

Axure让团队对产品的理解无异议,对最终的产品有直观的了解。这个阶段,产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。

视觉设计 

有前面两个“扫清障碍”的过程,这个阶段,视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下,视觉包括:

  • 风格探索;关键页面的视觉设计;关键交互动画表现(如果无法口头项技术表达动画效果时,给出一个“活的”效果,是非常直观的。

视觉素材输出、设计文件标注 

每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具,Cutteran、Assistor PS是很方便的切图工具。

开发后期,细节跟进 

与开发跟进细节,是设计过程的一部分。在我们团队,完全依靠规范作业、设计文件标注(不和开发人员说一句话),能够确保80%的交互、视觉细节能够被还原。剩下的20%,就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中,一定要预留这个时间。主要包括:边距、字体、界面动画的数值微调。

原文链接:一个完整的交互设计流程——我是UE网

此为高保真原型链接

标签:原型































bluelovemagic:

【文章摘要】人的思考过程,是一个奇妙的过程,思维在脑海里流窜,横冲直撞又反复纠缠,最后扭成一团麻。所以常常会有人抱怨,脑袋里很乱,想不出头绪。这是因为,大部分人的思考过程都是杂乱无序的,没有逻辑的,最后也没法形成有效的沉淀,更无法找到清晰的结论。

人的思考过程,是一个奇妙的过程,思维在脑海里流窜,横冲直撞又反复纠缠,最后扭成一团麻。所以常常会有人抱怨,脑袋里很乱,想不出头绪。这是因为,大部分人的思考过程都是杂乱无序的,没有逻辑的,最后也没法形成有效的沉淀,更无法找到清晰的结论。那么本文要讲述的,就是怎样把思维进行可视化的规整,最终系统化的沉淀下来,找到其中有价值的方向。其实这种可视化的规则,不止可以用工作中,用在生活中也一样。

大部分人脑力最活跃的时候,往往是睡觉前、蹲厕所时,这时候你的脑袋里就像纪录片一样闪回各种生活片段,也会自我探讨很多人生问题,但是当别人问你,刚才你都想了些什么?你会发现你突然脑袋一片空白,我刚才在想什么?好像想了很多,却又都不记得了。除非在这漫无目的的脑力激荡中,你产生了让自己信服的idea,否则你很难记住自己都想了什么,所以大部分人这种碎片化的时间,都是毫无价值的浪费了。

逻辑好的人,往往善于归纳总结,把复杂包裹起来,把整理后的闪光点暴露出来,就像集线器,把各种线索都收纳到盒子里,把重要的插头暴露出来。

领导讲话,都喜欢讲3点。这并不是信手拈来那么简单,这需要提前做好充沛的准备。很多说3点的人,都是提前思考过的,有备而来的。当然也不排除有些人天赋秉异,可以在极端的时间内,快速的思考并总结,提练出有价值的3点来。这是很难的事情,我也极少这么做,但是为了体现我自己很有逻辑,有时候我会这么说,这件事情,可以总结成如下几点,第一点,第二点,第三点……能说几点说几点,但是随时可以见好就收。

我这里有一个面试的时候,我会问的比较有代表性的逻辑问题,请说出你的三个优点,每个优点说三个例子,每个例子不超过一句话。这要求应聘者在极短的时间内总结并提炼,是非常考验逻辑的。

设计中的思维可视化,是从无序到有序的思考过程。不是所有的人都是天生就有很好的逻辑的,但是好在,逻辑是可以训练的,只要你懂的把自己的思维进行可视化的展示、分析和整理。

漫思维模型是大部分人大部分时间的思维模型,从一个想法漫入进来,思绪进过各种游弋,然后再散漫的发散,如果有幸从中间找到一些价值点,那也只能说是幸运。不过像头脑风暴(Branstorming)这种依赖脑力激荡的思考方式,倒是也适用于这种漫思维模型,因为头脑风暴确实是需要从无限可能性中去寻找方向。所以这种思维模型也不是一无是处,只是适用的场景不同,也不需要可视化出来。

聚思维模型是少量善于逻辑分析的人的思维模型,他们善于先自我发散,再筛选可能,然后聚合成靠谱方向,再具体细化。思维是一个漏斗,最后沉淀下来的想法,是经层层筛选的。而能控制自己从发散中提炼的人,是善于控制思维的人,这种人完全可以不依赖思维可视化,就想清楚很多事情。

但是事实是大部分是无法做到发散后合理提炼和归纳的,所以这种情况下,还是依赖于方法来进行思维可视化,可视化之后,就方便归纳、整理、提炼、细化了。

下面是思维可视化的4类模型——1.放射状规整(思维导图、鱼骨图) 2.层次化规则(架构图、组织结构图) 3.线性化规整(路径图、时间线) 4.矩阵式规则(SWOT分析、商业模式画布)

1. 放射状规整

让思维从一个点出发,形成放射状的发散。这种规则方式,主要是用来整理多种可能性,便于发散思维,并可以对每种可能性进行深入挖掘。

思维导图(MindMap)是一种将放射性思考具体化的方法,是最简单又最有效的思维整理方式,也是世界范围内应用最广的思维工具。我们知道放射性思考是人类大脑的自然思考方式,每一种进入大脑的资料,不论是感觉、记忆或是想法——包括文字、数字、符码、香气、食物、线条、颜色、意象、节奏、音符等,都可以成为一个思考中心,并由此中心向外发散出成千上万的关节点,每一个关节点代表与中心主题的一个连结,而每一个连结又可以成为另一个中心主题,再向外发散出成千上万的关节点,呈现出放射性立体结构。

鱼骨图(Cause and Effect Diagrams),又名因果图,是一种发现问题“根本原因”的分析方法。是由日本管理大师石川馨先生所发明出来的,故又名石川图。其特点是简捷实用,深入直观。它看上去有些象鱼骨,问题或缺陷(即后果)标在”鱼头”外。在鱼骨上长出鱼刺,上面按出现机会多寡列出产生生产问题的可能原因,有助于说明各个原因之间如何相互影响。

2. 层次化规整

层次化规则,是用来挖掘结构关系,并层层深入审视事物的状况。

架构图(Org Charts)是一个思维可视化工具,它通过树状图的方式对一个事物的结构进行逐层分解,一般是从父级向子集深挖。虽然拓扑的方式与思维导图类似,但是架构图不是为了发散思维而存在的,而是为了探讨组织结构关系而存在的,所以层级的重要性不容小视,一般都是自上而下去严谨的拓扑,不做无价值的拓展。

这种层次结构图是用来展示清晰的分组信息,表达清晰的组织结构关系的。

3.线性化规整

线性化的规则方式,一般都有一条清晰的主线,这条主线可以串起整个思考过程。比如是时间为轴,比如设定好起点和终点后中间所能发生的所有的事情,比如围绕某个用户目标而产生的任务流等。

路径图(Roadmap)是一种任务走查方法,设定好用户目标,起点和终点,排查中间会发声的所有的事情,为每个重要的关键结点进行设计。这种思维可视化方式一般用在目标导向的事情中,确定达成目标的多种可能路径,并选择其中最短路径。

时间线(Timelines)是用来描述在一个时间段里面,发生的所有里程碑性质的事情的,也可以用来基于时间线制定项目计划。过去放在时间线横轴左边,未来放在时间线右边,所有基于时间结点发声的事情和计划发生的事情要进行特别标注。这种方式很用来做里程碑图或者项目计划。

4. 矩阵式规整

另外一种结构化的思考方式就是矩阵式规则,先想清楚需要思考的事情的几大纬度,然后把纬度沉淀成矩阵,再往矩阵里去补充具体内容,这种方式很使用用来做突显内容的探讨。

SWOT分析是一种常用的战略分析工具,SWOT分析代表分析企业优势(strength)、劣势(weakness)、机会(opportunity)和威胁(threats)。因此,SWOT分析实际上是将对企业内外部条件各方面内容进行综合和概括,进而分析组织的优劣势、面临的机会和威胁的一种方法。 可以通过分析帮助企业把资源和行动Focus在自己的强项和有最多机会的地方。

商业模式画布包含9个构成模块,重要伙伴、关键业务、核心资源、价值主张、客户关系、渠道通路、客户细分、成本构成、收入来源。按照这9模块来思考内容,就可以很方便的绘制出你的项目的商业模式,帮助投资人理解你的项目全景。商业模式计划书也适合用在个人身上,只是9各构成模块做了一些调整而已,我也在百度MUX内部带领小伙伴们一起做个个人商业模式的设定,帮助小伙伴们找到自己的优势和劣势,学习型项目和主导型项目。

最后想说,最高级的思维方式是,所有的发散、总结、沉淀都在脑海内部形成,但是大部分都达不到这种牛逼的程度,所以我们不得不利用可视化的方式,训练自己的思维方式。另外即使你思考方式很牛,如果你不能可视化的给他人呈现出来,也很难保证普通人能很好的理解你。所以不管是思维牛人还是思维普通人,都需要知道怎么把自己的思维可视化出来。

再总结一下思维可视化的4类模型——1.放射状规整(思维导图、鱼骨图) 2.层次化规则(架构图、组织结构图) 3.线性化规整(路径图、时间线) 4.矩阵式规则(SWOT分析、商业模式画布)。其实模型还有千千万,具体情况具体采用不同模型,或者发明创造新的思维模型,全靠悟性了。

 


© Rayking | Powered by LOFTER