投稿
本文以“微信首页”为例，天辰iOS版APP下载用三个维度系统地解析一个产品的交互设计的方方面面
首先我们来做个互动，请各位看官翻开本人的微信，然后看到你的微信首页：
然后花1分钟时间认真察看看到了什么，越细致越好。
好了，察看的差不多了，我大约简单地罗列一下，如下图:
整理一下：
未读音讯数、音讯红点、头像、联络人称号、最新音讯、音讯列表、底部标签栏、搜索框、添加、头部导航栏、等等……
不晓得各位看到的是不是和我上述所罗列的一样呢？假如是一样的，我想说的是您确实具有一双擅长察看的眼镜。
但是，事情并不是这么简单，外表上似乎你曾经看到了一切的元素，事实上这些只不过就是看到的冰山上面的一角，真正躲藏在下面的局部才是其最中心和实质的东西。而作为产品和交互，你需求看到更多更深层次的内容，下面让我们重新看一下这个页面：
下面我就通知各位该用什么思绪和办法来窥探其真正躲藏在背后那些内容：
1、剖析其框架与规划
框架是一个产品的筋和骨，天辰iOS版APP下载它是整个产品的根底，我们如今把整个页面全部拆解下来，这里拆解开就能够很明晰了，整个页面由4个区域组成，从上到下依次为导航栏区-搜索操作区-内容区（音讯列表区）-底部导航栏区；依此继续拆解，导航栏区照旧能够拆解为状态栏-标题-添加；音讯列表能够拆解为头像-红点（数字）-联络人称号-最新音讯-时间；将整个页面不停地拆解，直到最小拆解单位。
当你把一切元素都拆解开来之后，就能够开端愈加深化的考虑：每个元素存在这里的意义，比方为什么搜索区会在内容区的顶部？为什么搜索区在默许状态下是不展现的，而是需求用户手意向下滑出？为什么在导航栏的右上角放个添加图标？音讯列表为什么头像都放左边？头像为何不像QQ那样用圆形？不停地问为什么，你会发现很多细节都值得揣摩。
2、考虑其流程与逻辑
当我们拆解完一切的元素后，我们需求开端考虑元素与元素之间的关系，将其串联起来就是流程，流程和逻辑就像是产品的心脏和血液，使得每个元素之间圆满衔接起来。比方这里我看到有一个搜索框，你所需求考虑的不只仅单纯这个控件的款式而已，你真正需求思索的是用户在运用这个功用的时分需求操作的整个流程有哪些，假设此刻我想搜索一个公众号，那么我就会思索怎样一步步引导用户完成目的：点击搜索框-跳转搜索界面-输入搜索结果-点击肯定-展现搜索结果-选择想要的公众号-点击进入完成；在这一系列的过程中可能就需求考虑怎样优化体验，比方能否能够缩短操作流程、能否能够减少用户的输入内容、怎样可以快速让用户找到搜索结果等等……
3、罗列其状态与规则
状态代表了一个产品的心情和心情，这里的状态指的是各个元素在不同状态所呈现出来不同的款式。能够大致归结为：角色、时间、场景
角色状态是指不同的用户身份所呈现的不同的页面状态，主要有登录用户与游客、男性与女性、会员用户与普通用户等等。比方电商类app未登录前会给你引荐一些当前的抢手，而当你登录后就会依据你的阅读记载引荐契合你口味的产品；再比方微信的摇一摇界面就依据了男性和女性做了区别；
时间状态是指在不同的时间段，页面的展现也并不是一层不变的，最常见的就是电商类应用里面，商品详情页里面，当前能够购置的商品当一段时间后由于某种缘由（比方下架了）就不能购置了，所以在这个中央按钮的状态会发作变化，从可点击变为不可点击状态；
场景状态即在不同的场景下，页面状态也会呈现契合当前场景下的展现规则，其类型相对较多，比方没有网络，网络中缀，内容被清空，夜间形式与白昼形式，手机横屏等等…...
微信首页的未读音讯展现也跟场景有关，当有未读音讯时分展现未读音讯数并该条音讯置顶，当看过后数字消逝，新的音讯置顶；这里就需求考虑音讯列表置顶规则是什么；还有订阅号的未读音讯展现为何只用红点而不用数字；未读音讯大于99条怎样展现；大于1000又怎样展现；等等这些不同场景下的状态都是交互需求思索的。
最后，总结一下交互剖析的3个维度
1、框架与规划：一个产品的筋与骨，只要理解其框架，才干真正明白其中心与实质；
2、流程与逻辑：一个产品的心脏与血液，流程好坏决议用户能否用你的产品最重要的缘由；
3、状态与规则：代表产品的心情与心情，好的状态展现能让你的产品真正的“活”起来；
依照这几个维度剖析下来是不是觉得更明晰了呢？只要更全面地理解其背后的业务逻辑我们才干在设计的时分愈加有理有据，正如开头的微信的例子，或许下次有人问你为什么微信看起来设计的那么普通，但是体验却做的如此胜利，你能够通知他其实只是你外表看着它很普通而已，而设计最高的境地就是让用户感受不到任何刻意的设计~
网友回应