一个完整的交互设计流程是怎样的?

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

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

看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素

 

 

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

看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

读懂原型图

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

草图快速沟通

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

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

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

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

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

视觉设计

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

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

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

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

开发后期,细节跟进

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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10942/

(0)
iouedioued
上一篇 2015-11-19
下一篇 2015-11-19

相关推荐

  • 悬浮动效常见的几种玩法

    动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。

    2017-05-05
  • 设计法则 | 实例解析「交互设计七大定律」在设计中的应用(下篇)

    资深交互小菜鸟,交流可加微信:Mandy8888-上篇内容笔者介绍了「交互设计七大定律」的前五个,接下来笔者将剩下两个定律为大家做个实例分析~~《设计法则 | 实例解析「交互设计七大定律」在设计中的应用(上篇)》六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介复杂度守恒定律(Law of conservation of complexity)由Larry Tes...

    2018-01-30
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • 【译文】“防止用户犯错:避免有意识的错误”

    西南航空的手机网站对已经过去的日期使用了灰色的背景,使你明白在预订一个航班时这些日期是不可选择的。不幸的是,对下个月的日期也使用了相同的设计,这意味着不可选。Polarr是IOS系统里很受欢迎的照片编辑工具。右侧的编辑控件(温度,色调等)需要你点击那个方块,然后向左或向右滑动而改变参数。然而,这些控件并没有展示出用户应该如何与其互动,所以新手用户很可能需要试错几次才能明白应该如何正确的使用这些功能。另外的一个交互困难就是:由于控件在屏幕的最右侧,你可以很轻松的向左滑动而减少参数数值,但水平空间有限,当你想向右滑动增加参数数值就会存在困难。IOS 8中,为帮助视力不好的用户阅读体验,提供放大显示图标和文字的功能。但是改变变焦需重新启动手机,这是一个重功能,需要花费一些时间,所以IOS系统会在你使用这个功能前,预览变焦完成后的样子。这个体贴的预览功能可以帮你评估出你是否真的需要操作变焦。Hipmunk提供快速浏览恢复选择机票过程的所需信息,甚至是被打断。在预订过程中的第二步,它清楚地显示了旅行的日期,在机场的问题,最便宜的出发程已被选中,以及用户被要求再选择一个回程航班。即使注意力分散了一段时间后,用户可以简单地恢复这个过程,而不会不小心偏离原本对航班的计划和要求或尝试重复已经完成的步骤。苹果新出的图片软件运用了一个很传统的对话框确认用户是否真的想删除最近爬山旅途中的照片,并且通过highlight 24张照片表示删除范围。更好的是,确认删除操作的按钮清楚地标示是删除,而不是一般的确认。Gmail 提供对破坏行为很有帮助的撤销功能,如误删了92封邮件。这个功能被证明是非常有用的,Gmail现在支持在发送email中允许点击发送键30秒内中撤销。Tweeter的字符限制条件很有名气,他们在用户超过那个字符限制前就会提示用户剩余的字符数。当一个tweet过长是,他会显示出超过的字符,高亮出那些超出的字符,并且使发送键不可使用,以让用户明白他们需要如何修复错误。

    2017-05-30
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • 交互设计中的心理学

    整理认知心理学中对交互设计(用户研究)有所启发的一些知识点(参考《认知与设计——理解UI设计准则》)包括:中央凹与边界视野——如何呈现信息以获取注意力格式塔原理——如何处理不同界面元素的关系时间感知——如何让…

  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的。包括:1、交互流程设计;2、风格定位;3、功能icon设计;4、界面视效整体优化;5、应用icon设计。   来源:G-UIDEA

    2016-05-06
  • Axure学习笔记 | 初识Axure

    本文结构:辰安笔记—01—说点题外话唠叨之语:这个是我在B站上看学习视频自己整理的笔记。话说我的学习笔记基本上是从视频上扒下来,然后加入一些自己的思考。我在规划做分享Axure的时候也想过,网上资源那么多,我做这个有必要吗?有用吗?思考一番,做这件事情虽然艰苦,费力不讨好,但是有收益。我现在就是把自己当作一个产品来打造。通过这些事情有以下收益:1.对自己来说,知识更加系统,当然也可能会让我更加僵化,这个我会注意;2.对招聘者来说,TA可...

    2018-04-29