众所周知，交互设计是产品经理的必备技能，对一款产品进行交互设计分析，也是产品经理的日常工作之一。那么对于互联网产品来说，我们应该如何对其进行交互设计分析？选取的维度，关注的重点又有哪些？下文我以抖音播放主页为例，说说我的看法。
交互设计是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，它的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。
综上所述，我们如果想要对一款产品进行交互设计分析，不能光着眼于产品本身，而脱离其用户。产品是为用户提供服务的，而产品的交互设计就是为用户更好的使用产品或其中的某些功能而存在。如果我们单纯只看产品，就会陷入知其然不知其所以然的困境。只有结合产品用户的性质和使用场景，再加上产品本身的特性进行分析，我们才能深入理解为什么要这么对产品的交互功能进行这样的设计，产出的分析文档才能更加深入。
如果我们想要深入分析抖音的交互设计，那么用户使用场景和产品特性分析就必不可少。因为抖音的交互设计都是为突出产品特性和优势或者方便用户在场景中使用这些功能而设计的。理解这些我们就能知道交互设计背后的意义。
目标用户为一二线城市，90后白领，学生。用者人群可以分为两大类：内容创造型，主要是通过该平台展现自己；满足自身的表现欲和观看潜水型，主要是通过该平台来消耗碎片化时间来获得乐趣，并观看评论，和好友分享。
（1）只观看用户
随时随地，在碎片化的休闲时间观看，从而得到放松。
（2）拍摄视频记录生活用户
在旅游，聚会或遇见有意思的事情时，拍摄视频进行分享。
（3）PGC，MCN制作者
音乐爱好者团队，进行充分设计，多人拍摄精致高质量视频，并进行后期处理。
（1）短视频比图文更为丰富生动、比直播和长视频门槛低效率高，无疑是各大巨头需要争抢的流量入口
（2）即拍即传，可操作性强。 短视频通过应用快速拍摄和制作，并利用应用提供的滤镜、特效等辅助工具剪辑和美化作品，入门门槛低，让小白也能制作显得专业化的内容。
（3）即时观看，传播性强。 短小精悍，可以有效利用观看者的时间碎片直接播放，用户只需要几分钟就可观看视频，播放量更容易上升。
（4）能有效利用社交，激发参与和分享。 用户观看、评论、传播视频作品打破时间和地点上的限制，可快速参与到视频的观赏和讨论中；高播放量和评论也反向激励创作者产出更好作品，社交渠道的分享，为用户的分享欲提供了便捷的传播渠道。
（5）更加沉浸式的体验。 从文字到图片，最终到视频，人们的视听体验被全方位调动。视频除了继承图文的优势，还通过调动用户的视觉和听觉，带来更加沉浸式的体验，单条视频内容比单条资讯更能够黏住用户。
（6）消费的时间更加碎片化了，长视频不适合碎片化消费；消费的场景更加丰富了，原来必须坐在客厅或者电脑前观看，现在随时随地刷。
进行上述分析之后，我们完成了交互设计的“背景调研”，但是还有一个更重要的问题就是选取分析的维度。因为交互设计比较杂乱，直接对映入眼帘的每个元素进行分析，容易产生东说一嘴西说一句的问题，最后产出的文档也杂乱无章。那么应该采用什么思路和方法呢？
框架是一个产品的筋和骨，它是整个产品的基础，当你把所有元素都拆解开来之后，就可以开始更加深入的思考：每个元素存在这里的意义，比如为什么搜索区会在内容区的顶部？为什么搜索区在默认状态下是不展示的，而是需要用户手动向下滑出？为什么在导航栏的右上角放个添加图标？消息列表为什么头像都放左边？头像为何不像QQ那样用圆形？不停地问为什么，你会发现很多细节都值得琢磨。
当我们拆解完所有的元素后，我们需要开始思考元素与元素之间的关系，将其串联起来就是流程，流程和逻辑就像是产品的心脏和血液，使得每个元素之间完美连接起来。比如这里我看到有一个搜索框，你所需要思考的不仅仅单纯这个控件的样式而已，你真正需要考虑的是用户在使用这个功能的时候需要操作的整个流程有哪些。在这一系列的过程中可能就需要思考怎么优化体验，比如是否可以缩短操作流程、是否可以减少用户的输入内容、怎样能够快速让用户找到搜索结果等等……
状态代表了一个产品的心情和情绪，这里的状态指的是各个元素在不同状态所呈现出来不同的样式。可以大致归纳为：角色、时间、场景。
角色状态是指不同的用户身份所呈现的不同的页面状态，时间状态是指在不同的时间段，页面的展示也并不是一层不变的，场景状态即在不同的场景下，页面状态也会呈现符合当前场景下的展示规则，其类型相对较多，比如没有网络，网络中断，内容被清空，夜间模式与白天模式，手机横屏等等……
由于只对抖音播放主页进行交互设计分析，所以不再考虑第三种使用场景及视频拍摄和后期视频处理方面用户需求。 根据上述使用场景以及短视频自身特点，抖音播放主页的交互设计满足如下用户需求：
4.1 快速观看，更加沉浸式的体验
抖音采用进入APP默认启动播放交互形式，给用户即时浸入的创新体验，结合抖音音乐短视频的特点，动听的音乐在用户碎片化的休闲时间进入APP时可以快速激发用户兴趣，增加用户粘性。
缺点： 由于进入即进行播放，而且抖音使用时经常在上班路途或者其他无wifi区域，每次都有模态对话框提醒，打断用户观看。可以改为非模态上方tag方式提醒，在用户观看的同时提醒用户在非wifi环境。
抖音中播放主页的交互方式都彰显方便快捷的特点，如：下拉切换下一条视频，双击点赞，单击继续/暂停播放，左滑查看用户首页，由于用户需求本来就是在零散时间使用，所以交互方式不能耽误用户时间，浪费用户学习精力，否则很容易让用户放弃。
抖音中，用户首页，快捷关注，赞，评论，分享，旋转音乐光盘等按钮垂直排列在视频播放主页右侧。按钮较大，占据位置明显，播放超过两次视频分享按钮变为朋友圈图标，关注者视频播放下方出现用户评论字样，鼓励用于进行社交操作，这解决了用户希望社交，观看评论，进行分享的需求，也与短视频适合分享，快速传播的特点契合。并且内容制作者收到用户评论点赞的正向鼓励，也可以激发他们的创作激情。
抖音中使用上下双tag和右侧评论栏收起，左下部分以文本方式展示主题，创作者注释，音乐原声等。无论是分享，社交，介绍，查看音乐，自己创作，所有内容基本可以在首页找到，这也符合用户操作简单，功能路径短的需求。虽然稍显杂乱但是配合音乐带来的用户体验，以及较为时尚的视觉效果（黑色的主题色及留声机等），削弱了凌乱的感觉。同时视觉效果符合年轻人的审美观念和目标用户契合。
抖音在播放界面除了加入点赞，关注等选项，对用户进行个性化分析外，长按界面可以选择不感兴趣，以后减少类似视频播放，增加推荐精准度。同时在播放界面用户可以通过选择推荐，附近，关键字搜索，关注，同背景音短视频等多种方式，进行多维度的视频搜索。更加精准化的个性化推荐和良好的内容分发，解决了用户想要看自己喜欢的视频，避免无谓的时间浪费的需求，增加用户粘性。同时这也是头条旗下产品的最重要特点。
本文由 @五星小兵 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来源于网络
说明：喜欢翻译国外交互设计体验设计网站优秀文章案例，仅供互相学习探讨，翻译有版权，表述包含译者个人理解，如有错误，请多指正~
“Are home page carousels actually helpful to users? ……(此处省略一万字)The short answer is that home page carousels can work, but in practice the vast majority of implementations perform poorly with end users……(此处省略一万字)But saying that home page carousels should never be used doesn’t fully align with our seven years of large-scale usability testing — at least in an e-commerce context.”
简单来说，作者想说的是：使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。
遵守本文中提到的10个轮播图设计原则可以提使用高轮播图时的用户体验，如果在做设计时不能很好地注意这10个体验方面的细节原则，那么最好少用轮播图设计。
在这篇文章中，作者首先会通过实例来过一遍10个轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，以及在文章最后列举出一种相比于轮播图更好更易用的展示方式。
在美国一份针对50家顶级零售电商网站的统计中发现轮播图被广泛运用于电商网站：PC端52%的电商网站使用轮播图，而与此同时移动端56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)
这篇文章的重点旨在讲如何通过设计和交互细节使首页轮播图更加user-friendly，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：
如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 — 轮播内容应与网站主题相关如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 — 轮播图内容不能过于商业化轮播图的一个主要优势就是可以放专门设计过的和大文件的图片 — 大文件和那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象 — 在用户快速决定停留或者离开之前增加用户在首页的驻足时间 — 轮播图片要精心设计那么，怎样在实际运用中做好轮播图设计呢，作者将10原则分成了四个部分来进行阐述：
大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。
因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。
我们之前做的轮播图可用性研究(仔细安排每一帧的展示内容和顺序)，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。
两条原则：
原则1： 轮播图的展示顺序特别是第一帧非常重要；原则2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：
原则1：自动轮播不要太快——
如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播的太快那么用户就会因为不感兴趣的轮播内容而被骚扰。
轮播图的展示时间应该根据轮播图的文案内容来决定 — 尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。
其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。
原则2：用户hover内容时应该暂停自动轮播——
Web information seeking and interaction 指出用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：
当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣；当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ；如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。原则3：用户有任何主动交互行为时应该停止自动轮播——
当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。
点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时(轮播图)应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。
原则1：轮播图控件提示当前图片所在帧数位置——
提示用户有更多帧数的图片，让用户有更多探索的可能；提示用户轮播图到底有多少帧图片；当轮播图自动播放到最后一帧时提示用户将循环到第一帧。比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。
原则2：轮播图控件允许用户进行前后帧内容的切换——
这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：
展示部分下一帧或前一帧图片；根据所识别的背景图片的颜色和明度进行相应的颜色改变。通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。
除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。
首先，它结合了位置感知和手动切换的控件为一个整体的UI组件；其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么因而可以让用户更有效的进行跨帧的切换。触屏设备上的轮播图与PC端有着很大的不同 — 之前列举的PC端上的交互逻辑在移动设备上是无效的并且有很多新的规则：
原则1：移动端没有hover状态因此尽量避免自动轮播——
hover状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有hover状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了 — 自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。
原则2：移动端支持滑动操作——
用户在触屏设备上的操作预期就是滑动来进行导航切换传统的轮播图操作控件同样重要(如进行前后切换的箭头和让用户感知位置的小点)原则3：移动端屏幕的图片需要特别优化——
许多在PC端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差；移动端用户对加载较慢的轮播图更没有耐心( 用户在PC端可以边花费1到5秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图)现在我们来总结一下：
单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：
它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用；它高度符合用户与首页的交互方式(70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站)；相比于使用轮播图要遵守的那10条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。原文作者：Christian Holst
原文地址链接：https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/
本文由 @ vanhelsinglhj 翻译发布于人人都是产品经理。未经许可，禁止转载。
题图来自 pexels，基于CC0协议
相关问答
交互设计学科主要课程包括界面设计、互动媒体设计、计算机与设计、用户模型的设计、信息架构设计、平面设计、产品设计、信息图表设计、创意思维、...
交互设计,又称互动设计,(英文InteractionDesign,缩写XD或者IaD),是定义、设计人造系统的行为的设计领域。其重点就是“交互体验”。引自百科的定义...
学习动画的同学应该都知道迪士尼的动画设计12原则吧?虽然这些原则最初是应用在动画设计当中,但是实际上在如今的UI界面当中,同样是适用,并且效果拔群的。...结...
两个层面上分析关注以人为本的用户需求交互设计的思维方法建构于工业设计以用户为中心的方法,同时加以发展,更多地面向行为和过程,把产品看作一个事件,强调...
优秀网页设计的5条原则:1.建站目的是基础网站的消息传递和号召性用语(CTA)是支持其目标的关键。建站的目的可以很简单,如促进购买、讲述公司故事或提供教...
对于交互设计方向的研究生来说,建议考虑以下几个方面:1.专业排名:选择排名靠前的学校,可以获得更好的教学资源和学习环境。2.师资力量:选择有优秀...
目前国内大部分高校都开设交互设计相关专业,一本院校不错的有:清华大学美术学院信息艺术设计系、同济大学工业设计系、湖南大学工业设计等;二本有广...
2、信息的时效性。Web站点上的信息是动态的。经常更新的,一般各信息站点都会尽量保证信息的时效性。3、Web的可设计性。Web成为Internet第一种适用于图像设计...
减少障碍是最大限度的减少用户在设计过程中能给予用户在使用产品过程中所产生的沮丧感。其中,同理心是设计的关键:你应该对于用户可能碰到的问题有所预测,识别...
大师的选择:三星S90D和索尼A80L,工业设计谁能称雄?评论5电视行业的下一个十年:科技领跑行业观影体验再上新台阶评论6玄派玄智星2024-青锋评测锐龙赋能高...
