一个视觉交互设计失败的案例
最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。
好看的设计未必好用
我负责的是一款秀场类产品,近期要在移动端中添加一个模块,模块主要的功能是展示主播的录播视频。下面展示一下原型图和效果图的对比。
原型图
效果图
我的原型图中,采用了最简单常用的布局方式,而UI设计师拿到需求以后,觉得这样做实在死板,想做一些和其他竞品的差异化。所以,将视频封面放在了右边,视频标题、主播名称、点赞数放在了左边。当效果图出来时,我第一眼感觉是漂亮,精致,整体效果非常不错。领导看了以后,也觉得视觉效果很棒。于是,效果图一稿便通过审核,步入开发。
然而,在开发完成以后,我看着手机上的测试版,效果并不尽如人意。首先,成品并没有效果图那么漂亮。在仔细对比后才发现,原来效果图漂亮的原因,很大程度上是因为摆放的图片非常漂亮。而实际产品中的主播,并没有那么好看。这导致了看到实际产品后,有较大的落差感。
所以,建议UI设计师在出效果图的时候,尽量摆放产品真实的内容图片。效果图并不需要做得有多漂亮,而是需要在产品开发前,模拟产品的真实样子,保证产品内容在最差的情况时,依然能有良好的视觉体验。
除了视觉落差感以外,我在深度体验产品时感觉到有些别扭。所有该显示的信息都显示出来了,那别扭的问题一定是出现在布局上面。我开始翻看竞品,想寻找问题所在。
拿YY神曲的页面来说,虽然信息比较多,显得有些杂乱,但是并没有别扭的感觉。那为什么信息左右调换位置,就会产生别扭的感觉呢?
YY神曲
我开始寻找将图片右置的相关产品,比如:今日头条、ZAKER、一点资讯、央视新闻、腾讯新闻等。看完以后,发现采用这种布局方式的,大多是新闻类的APP。
于是,我第一次开始深入地分析页面布局问题。
首先分析:为什么新闻类的APP的图片要放在右边?
如上图所示,每条信息的元素有:新闻标题、新闻来源、点击次数、热度以及新闻图片。
那这些元素对于用户来说,优先级是什么样的呢?首先,拿新闻来说,标题的优先级是非常高的,用户判断是否看这个新闻的第一元素通常都是标题。这是很早以前用户阅读报纸时就养成的习惯。基于这个原因,新闻类APP标题的优先级大于图片的优先级是没有问题的。
那现在回过头来再看看我自己的APP,分析一下用户的阅读顺序。
首先要说的是对于秀场类产品,图片绝对是第一视觉焦点。用户筛选信息,绝不会逐字逐句浏览,而是大脑进行关键信息检索,过滤次要信息。用户“第一视觉区域”是没有问题的,用户第一眼看这个页面肯定是被此区域吸引。接着用户扫视“①版块分类”的标题栏后,下面重点来了。
用户视线会扫描整块信息条,图片肯定是第一优先级的信息,用户通过图片来判断:1、足够吸引,点击进入;2、有点吸引,需要查看此视频的其他信息来判断;3、完全不吸引,跳转下一条信息。
抛开第一种情况,当用户觉得此视频封面是自己稍微感兴趣的东西,那么用户需要阅读其他信息来确定自己是否喜欢。此时用户的视线由“②视频封面”跳转到“③视频标题”然后向下扫视其他“④次要信息”。如果在判断此视频自己没兴趣后,用户会继续向下扫视,焦点又会跳到下一条信息的“⑤视频封面”。然后重复以上路径,循环扫视。
最后导致的结果就是:用户以从右往左的一种顺序浏览内容,违反从左往右的阅读习惯。
总结:
其实,在产品设计中,追求创新、追求差异化是非常值得鼓励的事情。但有时候为了寻找差异化,而导致用户使用成本增加是需要产品经理细细斟酌的事情。在某一行业尚未成熟时,创新一款APP是比较简单的,因为行业内并没有一个大致的标准,也没有太多用户习惯的需要注意。但当行业趋于成熟,众多产品涌现时,任何一点点微创新都难能可贵。
在这里还想说一个问题,就是大家在效果图审核时,常常会说:我感觉这个页面有点别扭,我觉得这个交互动画有点不舒服。这到底是为什么呢?这种别扭到底是怎么产生的呢?我想这种别扭一定是视觉或交互传达出的信息有悖于个人的日常感知。如果有一个页面,很多人都觉得别扭的话,那很可能是某个地方设计有问题。也许有些问题是显而易见的,也许有些问题是深层次的问题。如果是深层次问题就需要产品、UI设计师或者交互设计师细致地去寻找问题。存在的问题并不可怕,最可怕的是问题隐藏起来,而产品经理却毫无感知。
http://www.taodudu.cc/news/show-546559.html
相关文章:
- 职场社交:做职场版微信不如做职场版微博
- 好产品自己会说话
- 产品经理应该掌握的信息架构知识
- 浅谈所谓的产品「用户画像」
- 关于“中国大妈”的用户画像
- 叮当快药产品体验报告
- 家庭厨房,如何共享美食?|回家吃饭产品分析
- 原创译文 | 通过设计让学习变轻松
- 预算为0如何拉用户?类类教你5个独门绝技,并说说一些陷阱!
- 日本推出罩杯测量APP,罩杯大小一夹便知!
- 老友会 | 情怀与时光不期而遇的深情大趴(现场快讯)
- 互联网产品策划经验总结(用户端产品)
- 如何更快的发现新APP,不会错过新的趋势
- 微信红利末期,新媒体运营除了打造10W+还应该做什么?
- musical.ly体验-这款国产外销的APP凭什么登上美国榜首?
- PMCAFF高端俱乐部首次集结,最顶级产品人的私密俱乐部!
- 年终福利 | 京东虚拟平台团队问答专场
- PMCAFF产品经理与融资7500万的故事
- 这封信里面,藏了300万数字货币
- 12小时紧急策划 复盘一篇10W+的诞生全历程
- 三点钟群分享:全球虚拟礼物赠送平台项目落地经验
- 微信的公众号为什么不做分类?
- PMCAFF要搞一场区块链产品大会,各大厂全都来了!
- 做产品16年总结9条心得
- 了解这些设计原则,助你打造最佳用户体验
- 今年世界杯的广告有毒,创意总监都该被fire
- 10次迭代9次delay??拒绝项目延期,这里有一整套方法!
- 大话PM | 产品经理必备利器——UML
- 快头条月增迅猛超微视 三四线城市“流量炼金”的上限在哪?
- 好友圈的场景有哪些特点,该如何设计?
一个视觉交互设计失败的案例相关推荐
- 北京视觉ui设计培训内容介绍
ui设计的日常从业内容包含网页界面设计.图标设计.交互设计等,虽然现在国内的ui设计处于急速发展阶段,但是只要大家去认真观察就会发现,除了一些行业top级人士所做设计之外,其他ui设计呈现出大同小异的 ...
- 交互设计必备的10个网站|每一个都是精挑细选,请低调使用
我来啦,给大家分享一些个人觉得比较好的设计网站: 为了帮助你快速的获得设计灵感,我准备了一份设计师必备素材库大礼包,包含多个APP设计.电商设计.HTML5.插画.logo设计.ICON等行业优秀作品 ...
- 交互设计中的5项视觉指导原则
我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至 ...
- 交互设计|抖音为什么是上滑查看下一个视频
去年求职的时候,作为一个产品新人,每次体验产品更多的是关注产品的设计细节,总是会觉得xx功能体验特别好,xx界面设计非常合理,xx细节引导非常场景化,非常贴心.但对于产品如何和用户发生交互,交互如何让 ...
- Axure 9 案例教程进阶篇之课程简介(带你玩转高交互设计)
前言 在Axure 9 实战案例专栏基础篇中 (了解更多>>),我们讲解了基本元件.动态面板.交互事件与母版等4章实战案例,相信学习过的同学,实战能力提高不少了吧:那么在进阶篇中,我们将主 ...
- 合创视觉科技交互设计学的是什么东西?
首先我们先理解什么是交互?当人和一件事物(人,机器,系统,环境等等)发生双向信息交流和互动,就是一种交互行为.那么交互设计可以简单的理解为人与事物之间互动方式的设计. 交互设计这个专业术语 ...
- 【游戏交互设计】如何用交互思维,打造一个更有代入感的“游戏开端”?
更多秋招干货,上网易游戏学院app查看!https://game.academy.163.com/ssi/app/?referrer=csdn 本文为网易游戏学院<游戏交互设计趋势研究>专 ...
- 一个好玩的偏视觉交互的前端开发工具箱 / 套件 - Uix Kit 3 发布
?分享点有趣的东西(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做UI出生,开发只是业余爱好,仅仅作为平时工作的需要.杂七杂八会一些前后端开发.并非职业码农! 一个BBoy ...
- 一个好玩的偏视觉交互的前端开发工具箱 / 套件 - Uix Kit 3 更新啦
很久没来社区啦,来学习活跃下 ?分享点有趣的东西(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做 UI 出生,开发只是业余爱好,仅仅作为平时工作的需要.杂七杂八会一些前后端 ...
最新文章
- wxHtml 示例:帮助测试
- 高德地图AmapSDKDemo运行
- 集合判断哪非空 、2个集合取交集/并集/差集
- 使用 imitator 实现前后端分离开发中的数据模拟与静态资源映射
- Andoid Activity.getWindowManager().getDefaultDisplay().getWidth()已被废弃
- java 多态利弊 及 父子类转换条件
- python怎样安装wordcloud(词云)文件
- contos7 配置 python3环境 支持微信公众号开发
- 微信小程序PHP注册,微信小程序 教程之注册页面
- 【PYTHON】tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失...
- Ext.TabPanel学习
- 读书笔记:忍耐的艺术
- EntityFramework之领域驱动设计实践(五)
- 用Scipy理解Gamma函数
- getElementsByTagName用法详解
- 量化对冲基金的国内发展史
- html页面加载有时没有网样式,网站css样式不加载是什么原因?
- Rosetta Stone的第二遍学习总结
- python求向量函数的雅可比矩阵_python – scipy中最小二乘函数的雅可比行列式的方法签名...
- 几乎必问,Spring 面试题开胃菜
热门文章
- 4/8 Serverless 技术实践营成都站持续报名中
- 透过 3.0 Preview 看 Dubbo 的云原生变革
- 阿里开源分布式限流框架 -Sentinel Go 0.3.0 发布,支持熔断降级能力
- log4jdbc oracle,通过weblogic配置log4jdbc数据源,在项目中使用该数据源,输出sql
- js轮播图片小圆点变化_原生js实现轮播图(两种方法)
- vuex的命名空间有哪些_vuex模块化和命名空间的实例代码
- opencv 人脸识别_人工智能-OpenCV+Python实现人脸识别(视频人脸检测)
- python预测随机数据_随机森林预测
- php创蓝253四要素认证_PHP下基于创蓝253接口的短信发送
- 【杂谈】追着光、靠近光、成为光、散发光