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


作者:飞起就是一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

相关推荐

  • iOS10交互设计启示

    数十万互联网从业者的共同关注!作者:MOGU_Dribbbler。作者授权早读课发表,转载请联系作者。来源:站酷。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com背景前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势…

    2017-08-04
  • 初步谈谈iOS11的交互设计

    这是一篇很赶的文章。源于我看到iOS11的介绍后的一些想法,希望能在此跟大家聊聊。从iOS11的更新中我们可以看到苹果的两个方向:1、提升iOS的生产力;2、应用之间更加的无缝衔接和单应用的无声扩张。我们来看第一个…

    2017-08-01
  • 交互设计必杀技:如何做一名高效的“陪产婆”

    数十万互联网从业者的共同关注!作者:臭脸任。作者授权早读课发表,转载请联系作者。微信公众号:臭脸任的慢生活(ID:choulianren-renyi)欢迎投稿到早读课,投稿邮箱:mm@zaodula.com问题起源于臭脸君开始转战给i…

    2017-08-01
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 交互设计技巧:创造好的用户体验(1)(翻译)

    点击上方「人人都是产品经理」立即关注一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。译者:@谢尔鱼 译文地址:http://goodui.org/翻译并授…

    2017-08-01
  • 近五年新起的十大热门职业,交互设计5年增长了22倍!

    6,交互设计师/用户体验师
    5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了。

    交互专题 2016-10-25
  • 【交互】做上进的设计师,交互设计大趋势!

    一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。|…

    2017-08-01
  • 从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货

    在日内瓦车展上,有那么几个品牌的展台格外引人关注,捷豹路虎就是其中之一。不少人是冲着前几天刚刚发布的路虎揽胜星脉来的,作为一辆真正全新的车型,同时又是揽胜家族的第四款产品,它受到关注几乎是必然。大家…

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

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

    2017-08-02