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


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

相关推荐

  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

  • 超全面!聊天机器人的界面交互设计实战经验总结

    最近在做智投App的机器人Neo的原型设计,是一个chatbot 聊天机器人 ,整理了一下关于 聊天机器人 设计的一些心得。一. 背景:这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息…

    2017-08-02
  • 2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 实例分享:交互设计如何赋予产品安全感

    作者:高广淦全文共 4235 字,阅读需要 8 分钟—— BEGIN ——做互联网金融交互设计的这两年,也算是用过上百款竞品了。尤其是一开始做设计的时候,满世界的下载注册体验竞品,以至于我这两年的投资收益还是很可观的,…

    2017-08-04
  • iOS10 交互设计启示

    导读:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验。本文作者是蘑…

    2017-08-04
  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03
  • iOS 10 交互设计指南

    几乎所有的iOS应用都由UIKit framework中定义的组件构成,了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中提供更好的帮助。UIKit提供的UI组件分为以下4种类型:栏包含了上下文信息来指引用户…

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

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

    2017-08-02
  • 职业病又犯了,我从交互设计角度分析了《得到》App…

    我是《逻辑思维》的 期期都听 忠实听众,也许有很多人对老罗不置可否,但我自己是非常喜欢的,可能也是由于我知识结构和老罗相差太远,但我一点也不觉得丢脸,谁叫他比我 老 大呢。以前我们都知道,喜马拉雅是逻辑…

    2017-08-04
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01