三个维度解析一个产品的交互设计


作者:飞起就是一jio

链接:http://www.jianshu.com/p/ad13cebe513b

本文以“微信首页”为例,用三个维度系统地解析一个产品的交互设计的方方面面

首先我们来做个互动,请各位看官打开自己的微信,然后看到你的微信首页:

三个维度解析一个产品的交互设计

然后花1分钟时间仔细观察看到了什么,越详细越好。

好了,观察的差不多了,我大概简单地罗列一下,如下图:

三个维度解析一个产品的交互设计

整理一下:

未读消息数、消息红点、头像、联系人名称、最新消息、消息列表、底部标签栏、搜索框、添加、头部导航栏、等等……

不知道各位看到的是不是和我上述所罗列的一样呢?如果是一样的,我想说的是您的确拥有一双善于观察的眼镜。

然而,事情并不是这么简单,表面上似乎你已经看到了所有的元素,事实上这些只不过就是看到的冰山上面的一角,真正隐藏在下面的部分才是其最核心和本质的东西。而作为产品和交互,你需要看到更多更深层次的内容,下面让我们重新看一下这个页面:

三个维度解析一个产品的交互设计

下面我就告诉各位该用什么思路和方法来窥探其真正隐藏在背后那些内容:

1、分析其框架与布局

框架是一个产品的筋和骨,它是整个产品的基础,我们现在把整个页面全部拆解下来,这里拆解开就可以很清晰了,整个页面由4个区域组成,从上到下依次为导航栏区-搜索操作区-内容区(消息列表区)-底部导航栏区;依此继续拆解,导航栏区依旧可以拆解为状态栏-标题-添加;消息列表可以拆解为头像-红点(数字)-联系人名称-最新消息-时间;将整个页面不停地拆解,直到最小拆解单位。

当你把所有元素都拆解开来之后,就可以开始更加深入的思考:每个元素存在这里的意义,比如为什么搜索区会在内容区的顶部?为什么搜索区在默认状态下是不展示的,而是需要用户手动向下滑出?为什么在导航栏的右上角放个添加图标?消息列表为什么头像都放左边?头像为何不像QQ那样用圆形?不停地问为什么,你会发现很多细节都值得琢磨。

2、思考其流程与逻辑

当我们拆解完所有的元素后,我们需要开始思考元素与元素之间的关系,将其串联起来就是流程,流程和逻辑就像是产品的心脏和血液,使得每个元素之间完美连接起来。比如这里我看到有一个搜索框,你所需要思考的不仅仅单纯这个控件的样式而已,你真正需要考虑的是用户在使用这个功能的时候需要操作的整个流程有哪些,假如此刻我想搜索一个公众号,那么我就会考虑怎么一步步引导用户完成目标:点击搜索框-跳转搜索界面-输入搜索结果-点击确定-展示搜索结果-选择想要的公众号-点击进入完成;在这一系列的过程中可能就需要思考怎么优化体验,比如是否可以缩短操作流程、是否可以减少用户的输入内容、怎样能够快速让用户找到搜索结果等等……

3、罗列其状态与规则

状态代表了一个产品的心情和情绪,这里的状态指的是各个元素在不同状态所呈现出来不同的样式。可以大致归纳为:角色、时间、场景

角色状态是指不同的用户身份所呈现的不同的页面状态,主要有登录用户与游客、男性与女性、会员用户与普通用户等等。比如电商类app未登录前会给你推荐一些当前的热门,而当你登录后就会根据你的浏览记录推荐符合你口味的产品;再比如微信的摇一摇界面就根据了男性和女性做了区别;

三个维度解析一个产品的交互设计

时间状态是指在不同的时间段,页面的展示也并不是一层不变的,最常见的就是电商类应用里面,商品详情页里面,当前可以购买的商品当一段时间后由于某种原因(比如下架了)就不能购买了,所以在这个地方按钮的状态会发生变化,从可点击变为不可点击状态;

三个维度解析一个产品的交互设计

场景状态即在不同的场景下,页面状态也会呈现符合当前场景下的展示规则,其类型相对较多,比如没有网络,网络中断,内容被清空,夜间模式与白天模式,手机横屏等等…...

三个维度解析一个产品的交互设计

微信首页的未读消息展示也跟场景有关,当有未读消息时候展示未读消息数并该条消息置顶,当看过后数字消失,新的消息置顶;这里就需要思考消息列表置顶规则是什么;还有订阅号的未读消息展示为何只用红点而不用数字;未读消息大于99条怎么展示;大于1000又怎么展示;等等这些不同场景下的状态都是交互需要考虑的。

最后,总结一下交互分析的3个维度

1、框架与布局:一个产品的筋与骨,只有了解其框架,才能真正明白其核心与本质;

2、流程与逻辑:一个产品的心脏与血液,流程好坏决定用户是否用你的产品最重要的原因;

3、状态与规则:代表产品的心情与情绪,好的状态展示能让你的产品真正的“活”起来;

按照这几个维度分析下来是不是觉得更清晰了呢?只有更全面地了解其背后的业务逻辑我们才能在设计的时候更加有理有据,正如开头的微信的例子,或许下次有人问你为什么微信看起来设计的那么普通,然而体验却做的如此成功,你可以告诉他其实只是你表面看着它很普通而已,而设计最高的境界就是让用户感受不到任何刻意的设计~

(待续......)

关注UI设计达人』

看更多精选UI设计文章

↓↓三个维度解析一个产品的交互设计

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

(0)
TinadminTinadmin
上一篇 2017-08-04 15:34
下一篇 2017-08-04 15:36

相关推荐

  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02
  • 【交互设计】Dribbble上的 UI 大神MIKE作品欣赏

    Dribbble 上的UI 大神MIKE作品欣赏幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片…

    2017-08-04
  • 产品经理的末路,交互设计的穷途

    2016年上半年我跟进了几个项目,“开始众筹”、“finger”、“分答”和“袋鼠云”,“袋鼠云”是企业级服务,前面三个是toC的服务,在为这些老板提供支持的时候,问他们需要什么人才,都说需要技术大牛和运营大神,没有一个提…

    2017-08-02
  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05
  • 交互设计中的心理学

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

  • 交互设计五要素

    在交互设计中,我们要了解这一过程的流程是什么?总体可以分为五个要素:目的、用户、场景、媒介、行为。1、目的:首先要弄清楚,这个产品或功能的目的是什么?目的是为了解决用户的某个需求或者给公司带来价值,这…

  • 交互设计用户模型建立

    点击信息与交互设计关注我们!Persona交互设计用户模型建立:一、什么是用户模型?Persona([pə:'səunə]):(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实…

    2017-08-01
  • 如何避免交互设计中的「刻板印象 」

    之所以有“刻板印象”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象”。那到底该如何避免它的消极作…

    2017-08-01
  • 如何应对交互设计中的技术实现问题

    数十万互联网从业者的共同关注!作者: 山晓,作者授权早读课转载。公众号:LEX设计生(ID:Lex-design)编辑:Dva技术实现是交互设计的last but not the least环节,甚至有时应该是设计优先考虑的问题,毕竟…

    2017-08-02
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04