• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 从交互角度,分析为什么我沉迷抖音,却不想刷微视?

从交互角度,分析为什么我沉迷抖音,却不想刷微视?

作者:Elaine Zhu 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App分析,交互设计,信息层级,用户体验,竞品分析,经验分享等相关知识,Elaine Zhu希望在学习及工作中可以帮助到您

Elaine Zhu :最近已经是个抖友了!每天抖音中毒停不下来。

因为微视是腾讯力推的产品,出于好奇也下载了。作为交互设计师,我抱着一种公平的心态来看待这两款软件,没有先入为主,丝毫不偏颇的去刷视频,抖音依旧使我中毒,微视却让我刷不下去。

作为只刷视频不创作的用户,影响体验的两大方面是:视频内容和交互细节。但内容分析起来水太深了,牵涉很多运营问题,我也不专业,因此我们只讨论交互细节。

一、首页的视觉焦点是最大的问题

你可以拿两个手机,同时打开微视和抖音,在小小一块屏幕上,抖音很容易聚焦在视频本身,而微视很容易聚焦到头像区域,或者被拍摄 icon 吸引,原因如下。

首先是头像区域的位置,抖音的头像区域在右侧,用户看视频时往往会忽略此位置,专注于视频内容;而微视的头像区域在页面左下角,非常抢眼,视觉焦点很容易就被抢占,而忽略视频内容本身。

其次信息组成,抖音的头像区域只显示头像和关注按钮,且组合设计占位小,而用户名显示在页面右侧,虽然将用户信息分开了,但不影响视频浏览;而微视将头像、关注 icon、用户名、作品数量、大V标志等信息全部聚合在了一起,虽然这些信息之间确实关系紧密,但有些信息用户其实并不关心,这样设计还占了较大位置,用户浏览视频时,也很容易被头像区域吸引而忽略了视频内容本身。

拍摄 icon 设计的太过抢眼,又一个抢占视觉焦点的元素。

二、更小的 icon 和文案

和抖音相比,微视的跟拍、点赞、评论、转发、音乐等 icon 太紧凑,点击热区更小,很担心误触。

视频要配着辅助文案一起看才爽,但是微视辅助文案的字号……用户名比你大,经纪人名字和你一样大,挑战的名称(起床真的很难吗)也和你一样大,音乐名称也和你一样大,辅助文案已经被淹没的没有重点了,还能一起爽吗?

经纪人,这个文案信息用户并不关心,这个经纪人不是说视频作者是个明星,就是个热门推手,如果你想让自己的视频上热门,找经纪人就对了。对于视频作者来说,当然很重要,但对于普通用户来讲毫无用处。

三、评论页面无趣

评论页面的重要程度,仅次于首页,要知道看网友抖机灵是人生一大乐趣!但微视的评论我真的看不下去。

抖音的评论浮层的展示规则为:点赞最多的的评论/回复排名在前,可以看到更多的抖机灵的回复。

微视的规则是:点赞最多的评论显示在前,如果该评论有回复,回复展示在评论下方,所以经常能看到像上图这样的情况-评论浮层全都是没什么趣味的回复,这点真的可以改一下。

总结

大部分用户都和我一样,只是享受浏览内容的乐趣而不去创作,对于这部分用户来讲,首页和评论页面非常重要,微视可以针对这两个页面重点优化:

  • 让用户关注视频内容本身,其次是辅助文案的易读性。这是最高优先级,其他的用户信息,音乐信息等都是次要的,可以降低优先级或者转移。
  • icon 的设计应该符合用户操作习惯,icon 太小,会让用户操作时因担心误触发而心理负担过重。
  • 评论页面排序规则改为点赞最多的「评论/回复」排序在前即可。

不是说微视要完全抄抖音的设计,而是认为在这些交互细节上可以进行优化。

欢迎关注作者的微信公众号:交互笔记

jhbjqr

「App分析让你对产品理解更深刻」

  • 《超过5000字的产品笔记,揭秘微信读书是如何让人上瘾的!》
  • 《用苏宁金融的案例,教你学会分析一款App》
  • 《腾讯的设计到底好在哪?高手是从这3个维度分析的!》
  • 《那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书》
  • 《用百度外卖的案例,教你学会分析移动端产品的方法!》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 这些设计细节,决定了谁月薪5000谁月薪50000!
  • 如何做好电商类App?来看这份对新版淘宝的设计思考!
  • 从交互角度,分析为什么我沉迷抖音,却不想刷微视?
  • Facebook 产品设计师:如何提高自己的设计审美?
  • 美团打车推出之际,来聊聊分时租赁的共享汽车
  • 用苏宁金融的案例,教你学会分析一款App
  • 那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书

相关文章

  • 2018-08-23将爱豆的照片转成人物插画?这可能是最简单的方法!
  • 2018-08-23跟随这10个趋势,你可以在2018年设计出出众的网页
  • 2017-08-06页面出现滚动条的时候如何让滚动条不影响页面宽度
  • 2018-08-232017年最后几个月,网页设计师值得注意的趋势
  • 2017-08-06更受欢迎 更具创造性的深底色网页设计实例
  • 2018-08-23用快看漫画的实战案例,带你掌握完整全面的产品设计流程
  • 2018-08-23交互基础小课堂!目标导向设计之「定义交互设计框架」
  • 2018-08-23你的文案太平了?四个窍门让文案“活”起来!
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:需求的等级
  • 2017-08-06手机网页web app 图片为何不清晰非常之模糊的原因

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 没有人带,设计师该如何自我成长(一)
    • 什么情况下使用table 什么情况下使用css(经验分享)
    • UX专家如何做设计评审?来看这份深度总结!
    • 格式塔原理中的接近性原则是如何影响排版设计的?
    • 创业公司精雕细琢的17个优秀网页设计
    • 双11干货!写给运营视觉设计师的交互小技巧
    • 如何做图标改版设计?来看58 App的实战案例!
    • UCenter Home 站点添加统计代码
    • 腾讯好文!如何设计内容精确、体验友好的Dashboard?(上篇)
    • React 5 生命周期

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有