发现好设计│产品体验总结(一)

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
1902 0 3 2019-05-21

随着互联网时代的发展,互联网用户越来越注重产品硬核功能与产品体验,UI设计师在用户体验上应该承担起更大的责任。

这是在第一季度时提倡团队小组共同开启的一项自我驱动学习的主题之一。每周产品体验总结产品体验、产品亮点为出发点,企图总结优秀的产品里那些亮眼的“设计”:战略机制、产品功能、交互设计、信息排布、视觉设计。



一、NOMO


NOMO是一款注重质感表现的产品,从启动图标的背景处理上就使用纹理感很强的质感。在扁平化设计盛行下,拟物化页面是它的差异化特色,同时极简的页面设计让产品保持极大用户人群的审美。


Image title


质感


为了进一步展示NOMO的质感,首页的拍摄展示区并非全屏,而是设计在一个带质感的相机框内。


页面去除了所有按钮文字,仅用图标来表示按钮的功能,由于NOMO是一款拍摄产品,功能上学习成本自然不高,用户人群定位上也主要为年轻人,所以去除文字设计是成立的。


NOMO把首页按钮全部设计在下方,并通过位置与大小、颜色展示它们之间的关系层级和引导用户操作。


Image title


页面切换


由于NOMO是没有顶栏底栏的,而且购买页高度相对比较长,为了让用户能够快速切换回首页,因此购买页区域上方保留部分首页底部,用户点击首页屏内容能够快速切换回首页,节省去了用户先滑动回购买页面顶部,才能回到首页的繁琐操作。


产品调性


产品页面采用大面积低纯色彩来拜托颜色给人带来的心理影响,从而表现出产品的极简调性;再采用能够与深灰产生强烈冲击力的黄色突出关键信息,让产品信息层次,信息引导特别明显与突出。最后配上每一款相机的精美配图,从而展示出产品的极致精美感。


Image title



二、摩拜单车


摩拜单车这几年的确给我们带来了不少便利:大学生团队骑行,工作族短途骑行…其在产品设计上也是惟妙惟肖。


渐进式交互


在用户使用完产品时收集用户多项反馈是一件比较考验设计的事情,部分用户对突如其来的一大堆表单会感到厌恶,部分用户会选择关闭产品,也会有大部分用户愿意完成简单的表单填写,渐进式交互可以尽可能让更多的用户填写体验反馈,从而让产品得到更加有效的数据支持。


Image title



三、火箭闹钟


一款适合起床苦难症用户的产品。常规的手机闹钟产品是模拟真实闹钟产品,使用闹铃结合震动来唤醒用户,闹钟容易被关闭并让部分用户会感到乏味,又因为晚起而错过了出门的最佳时间而懊悔。


火箭闹钟在这基础上结合了手机加速计、重力计、摄像头,以及麦克风来增加关闭闹钟的多样性,既增加了关闭闹钟的复杂程度,其关闭闹钟的游戏形式却又增加产品的趣味性,让用户在醒来的那一刻又爱又恨。其精美的界面主题与壁纸也是非常值得学习。


Image title



四、Health Mate


心率传感器


移动硬件本身自带着很多不同的传感器,如光线传感器可自适应调节屏幕亮度,磁场传感器能提供指南针功能等。心率传感器可以是Apple watch具有突破性功能之一,Health Mate通过在手机上结合闪光灯与摄像头记录查看手指血管收缩扩张,从而实现此功能。加班严重和酒场应酬较多的朋友们可以多测试下自身的心率,心率低于100属于正常情况,健壮的人常保持在50-60,高心率就要注意身体健康了。


Image title



五、30天天气预报


一款提供全国各地的天气小程序,大部分的天气产品选择把设计的时间和精力放在界面视觉或者各种非气温、晴雨上让产品锦上添花。30天天气预报小程序的昨日天气也是产品亮点之一。


昨日天气


用户常常会忘记昨天的天气温度数值,却会深刻地记得昨天穿了什么衣服,昨天的穿衣是冷还是热。30天天气与预报小程序直观地放出昨天气温与当日气温数值,用户可以通过对比两个数值进行添衣或减衣,从而进行合适穿衣。


Image title

Image title



六、pendo笔记


时间管理


时间管理是每一个人都需要掌握的技能,很多人总感觉一天忙碌不止却没把时间放在重要的事情上,有些人总因为各种临时的安排打乱自己的计划,许多行业大佬对时间的把控实际上都是非常严格的,甚至精确到秒。艾维利时间法是记录每天待办的从重要等级排序的前6件事情,这样可以保证每天大部分的时间可以投入在有意义的事情上,用户可以在peode笔记记录下每一天的待办事情,让自己的时间有序排期,从而管理自己的时间。


Image title


自嘲式邀请


由于产品刻意在功能上隐藏了操作的文字,尽可能使用icon来表达按钮,让页面上的文字更加聚焦于待办事项内容本身,对于新用户存在一定的学习成本。为了消除用户体验挫败感,产品在用户首次使用功能时运用了不少“漫游探索邀请弹窗”,帮助用户熟悉产品功能,但频繁的“漫游探索邀请弹窗”也会打断用户心留体验,因此为了让用户更加能够接受弹窗内容,产品使用自嘲式文案,增加产品乐趣。


Image title



七、微信


操作反馈


由于收款码与付款码给用户带来的是财产流失与财产流入的重要操作,于是微信对于收款码与付款码截屏进行与其它页面区别对待。

用户在截屏“付款二维码”时存在财产安全威胁,二维码能够被成功地截取了下来,并且有效,图片被他人拿走使用会造成财产损失;所以微信会立马识别截屏操作并把二维码换成了安全提醒“请不要将付款吗送给他人…”,直到用户进行下一步交互。

而用户在截屏“收款二维码”对用户是有利操作,于是微信则给出了额外使用提示“可保存手机并打印……”方便用户使用收款码。


Image title


社交情面


微信对用户操作私隐是极其保护的,聊天信息不会显示已读未读,删除好友对方不会收到提醒,退出群聊系统不会收到提示。旧几个版本的微信在用户退出群聊时,系统会显示XX已退出了群聊,特别是一些人数较少的群,一度造成了退群的人高冷,留在群的人尴尬局面,用户多数情况会选择碍于情面在群里逗留,反而在体验上感到不适。当然,产品还是希望能够尽可能维护社交关系与对不可逆的操作进行提醒,因此每一次退出与删除都需要二次确认。


Image title



八、Shyscnner天巡


一款机票、酒店、租车比价且可以预定的一体化应用程序。查全年机票最好用了╮(╯▽╰)╭


数据可视化图表


在查阅机票时可通过点击选择时间查看全年图表,图表以柱状统计图形式展示(适合多数值对比),用户能够通过图表预览全年价格变动曲线(由此可以判断旅游旺淡季度)。方便用户对全年价格进行判断。


Image title


情感化插画


一款app最让人感到有温度的地方常常是一句文案,一句提示,一幅插画。产品在“行程”功能上绘制了一个画面感十足的gif动图,内容是一个人躺在沙发上畅想下一次行程的画面,与用户此时此刻躺在某个地方上使用这款产品形成呼应。


Image title



九、IDEAT 理想家


一款渗透设计、家居、艺术与风尚的产品,产品IDEAT功能主要为用户推荐极具创意作品,每一期都有来自不同国家的艺术家们表达他们对品牌与设计结合的理解,其创意非常值得我们学习,平时在碎片化时间下观赏作品,也是一种享受。


Image title



十、蚂蚁庄园


游戏机制


从小鸡饲料任务、运动会、装扮任务可以看出,蚂蚁庄园并不是一款盈利游戏产品,游戏内部的道具都可以通过非消费行为获取。最简单的玩法是做饲料任务领取饲料喂养小鸡,操作过程不超过30s,释放用户投入时间。大胆猜测游戏目的是为了搭建平台好友连接,增加好友在平台上的互动;另外日常任务机制增加用户使用支付宝产品频率与黏性,培养用户每日使用产品的习惯。


Image title


截图弹窗


当用户使用截图功能时候,庄园会判断用户截图可能是为了进行游戏反馈,因此右侧弹出一个反馈便捷入口。


Image title


文案设计


支付宝首页banner位频繁看到蚂蚁庄园的提示:你的小鸡快饿晕了,瞬间激发起用户的母爱之心。玩过小鸡小游戏的用户应该清楚每次喂食只能坚持4-5小时,长期没有喂食小鸡便会跑到好友庄园偷食,可能会遇到驱赶或者殴打。文案从母爱角度切入直戳人心,让用户忍不住点进去喂一次食。


Image title



十一、KFC


亮度传感器


在平常使用手机时,如果开启智能亮度调节后,屏幕会根据周围光线而调整屏幕亮度。在KFC室内时屏幕亮度一般在30-50%,产品为了让优惠券代码更容易被仪器识别扫描,在用户点开展示码页面时屏幕会自动调节亮度至90%。


Image title



十二、喜马拉雅APP


视觉调性


首页banner背景会随着滑动而改变,这样能保持页面视觉统一。

内容主打页使用多彩icon增加画面色彩,提现产品活力。

已选未选分类在字体上加强大小区别,解决多内容混乱问题。


Image title


数据学习


猜你喜欢模块底部放置“换一批”按钮,即可对用户兴趣进行学习,也可以防止内容不匹配而导致用户流失。

内容瀑布流处提供单独删除按钮。


小细节


首页活动悬浮按钮在用户滑动页面时为半透明状态,减少按钮给用户带来的干扰,同时使悬浮按钮有关闭按钮。


Image title



十三、多闪APP


行为判断:返回顶部


当用户在瀑布流预览较下再往上回翻时,系统会判断用户是否想返回顶部,在手势常用区域旁出现一键返回顶部按钮,供用户使用,解决安卓无返回顶部功能,iOS可直接触控状态栏。再次往下滑动按钮则消失。


Image title


使用场景:深色背景


产品页面整体采用深灰色背景,可以最大程度降低躲在被子里或者是习惯夜晚关灯看手机的用户们用眼疲劳度。


Image title


其它


提供卡通人物形象定制功能,类似QQ秀;

与聊天页面突出红包、表情、图片视频、比心等按钮,弱化发信息功能;

深色+多彩icon、多彩图案,传递出产品充满活力、内容丰富的调性;

非好友短视频去除点赞数、评论,降低他人影响,让小众视频也能获取流量(但会不会因为视频质量参差不齐而影响体验)


Image title



十四、开言英语


短视频引导


产品引导页采用短视频片段,让用户感受产品的“环境”与“氛围”,从而增加用户首次体验沉浸感。


定制化设计

 - 调查测试


为了更好地区分用户的英语水平,首次体验产品时使用短视频积极推荐用户进行测试,为用户提供匹配的学习材料。


 - 关闭按钮


悬浮广告关闭按钮:极大程度避免用户因为广告干扰而产生的厌恶感。广告用户两不误

单项内容关闭按钮:大部分内容类产品都会有的操作,从学习难度、主题、历史记录3个角度收集用户数据,为每个用户打造定制化课程。


Image title


操作减琐

 - 播放按钮


产品把播放按钮放置在“发现”一级页面,便捷用户对某FM试听,增加用户试听率。


 - 小提示


文章增加了时间与难度提示,方便用户在一级页面时便可进行初步筛选。


Image title


行为判断

 - 播放隐藏


产品在上滑时隐藏播放栏,减少用户干扰;在用户再次下滑回看内容时,播放栏才从下方滑出,供给用户操作。


成就感设计


在用户学习完时生成一张大图,配上精美的图片背景与用户学习数据,鼓励用户对外展示产品使用成就。


Image title


层次感


半透明插图:若隐若现的插图增加了渐变背景的层次感;

弥散阴影:增加按钮层次感;

卡片背景:增强内容模块,增加页面层次感。


Image title


插画


空状态插画,增强品牌调性,提升产品情感化。

大banner插画,增加产品治愈感,提升产品亲和力。


Image title



十五、Peace


情感化插画


一款帮助冥想、睡眠、情绪自愈的产品,2018年app store年度最佳UI设计,产品在引导页、一级页面、页面背景、页面头图、类别配图、内容页面……每一处采用精心设计的情感化插画,让人沉溺在精美的画面与音频当中,简直就是追求极致页面的UI设计师心中的福音。


Image title



十六、Pixaloop


短视频引导页


Pixaloop是一款强大的视频合成app,考虑到并不是每个人都有编辑视频的基础,产品在引导页处采用短视频代替新手教程,并在产品里设置 “说明书” 功能,尽可能降低用户对功能不了解而产生使用挫败感。再次感叹功能实在太强大,如果仅仅是因为不会使用而错失这么好的合成功能便可惜了。


Image title



十七、walkup 


成就感体系


Walkup核心玩法“环游世界”,用户选择从地图上的一个洲的第一个城市开始,通过收集每日行走步数转化成能量,然后消耗能量让自己的定位从一个城市到达另一个新的城市并即时反馈,让用户保持一定频率感受成就感,这与大部分产品的勋章系统体系是一致的。不同的是产品偏目标导向,在第一个城市时便告知抵达第二个城市的进度,因此还设计了每日打卡、限时挑战、随机事件、道具商店等方式,让能量可以从多个机制中获取,消除用户抵达下一个城市前的迫切心情。


Image title


治愈系设计


Walkup考虑到用户使用场景为刚刚运动完那一时间段,于是运用了大量的精美插画让产品变得治愈,并附带优美旋律的纯音乐让用户心情变得愉悦,每一个城市、每一次启动页都是不同的精美的插画,其用心十分打动人。


Image title



十八、小鸟壁纸


Z轴空间折叠样式

从一级页面“挑选壁纸”跳转到“调整颜色”二级页面采用非加载形式页面跳转,跳转动效以伪三维空间样式展现,丰富产品视觉细节。


Image title


局部操作


产品是以挑选壁纸调整颜色做为主要核心功能,因此限制了用户对鸟类造型的改动,放大用户对画面颜色的支配,用户可以对主体的每一个细节图层包括背景进行HSB调色(色阶,纯度,明度),这样便可以对一款插画调节成少女色系,直男色系……


Image title


营销方式


产品采用免费版插画(8款)+付费版插画(32款)进行组合,先让用户使用免费版插画进行调色功能和壁纸保存等体验,觉得效果不错后再进行付费(而不是像购买付费app一样使用前就已经需要付费,如果达不到用户预期估计评分区是一团糟)


Image title


小细节


产品会记录下用户每一次保存过的壁纸记录,方便用户下次再次进行调整。

用户能够壁纸大小,旋转壁纸,如对调整不满意还可以进行还原。

产品不需要进行账号注册,以app store账号为购买单位。


Image title



十九、单向历


2016年曾风靡一时网红日历APP,出自于著名文艺中年许知远之手。创始者不多介绍,其主持的访谈节目“十三邀”也是卓尔不群。


小而美产品

-交互上(iOS)仅有5种手势


左右滑动切换前后一天日历,滑动到当天为最右,上滑分享保存,下滑筛选当月日期,再次下滑进入年月日选择;主页右上角跳转商城。


功能仅有4个


查看日历+选择日期+每日载录+商城跳转

产品功能与交互都是十分地克制。


Image title


文艺感


文艺感来源之一:信息层设计

文艺感来源之二:视觉元素组合(色彩+字体+布局)


页面信息层顺序:当月日期号-宜忌词-每日摘录-当月筛选-详细日期-商城-其它。


产品在体现核心功能“当日日期”时,马上把信息重点放到了“宜忌词”与“每日摘录”,一个词“宜明媚”“忌虚头巴脑”,一句话“像三月的风扑击明亮的草垛……刚好戳中用户的小情绪。


排版布局使用老黄历朴实风,配上大面积的深色背景与衬线体英文,让页面感官游离于传统于脱俗之间。


Image title



二十、关于外卖产品的“选择困难症”


1.总是打开外卖平台却不知道选什么菜品

2.经常性不知不觉时间已经过去了半小时

3.周末点个外卖却在平台里逛了一小时


席克定律


指一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。它的数学公式是:反应时间 T=a+b log2(n)。在我们的设计中如果给用户的选择更多,那么用户所需要做出决定的时间就越长。


所谓的外卖选择困难症,无非是产品在衡量商家利益与点餐用户两者的平衡问题,当然在平台也需要更多的商家入驻来建立平台壁垒,搭建行业帝国,因此,不要在选择上耗费更多的时间,毕竟时间才是真正宝贵的东西嘛。






全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票