随着互联网时代的发展,互联网用户越来越注重产品硬核功能与产品体验,UI设计师在用户体验上应该承担起更大的责任。
这是在第一季度时提倡团队小组共同开启的一项自我驱动学习的主题之一。每周产品体验总结产品体验、产品亮点为出发点,企图总结优秀的产品里那些亮眼的“设计”:战略机制、产品功能、交互设计、信息排布、视觉设计。
一、NOMO
NOMO是一款注重质感表现的产品,从启动图标的背景处理上就使用纹理感很强的质感。在扁平化设计盛行下,拟物化页面是它的差异化特色,同时极简的页面设计让产品保持极大用户人群的审美。
质感
为了进一步展示NOMO的质感,首页的拍摄展示区并非全屏,而是设计在一个带质感的相机框内。
页面去除了所有按钮文字,仅用图标来表示按钮的功能,由于NOMO是一款拍摄产品,功能上学习成本自然不高,用户人群定位上也主要为年轻人,所以去除文字设计是成立的。
NOMO把首页按钮全部设计在下方,并通过位置与大小、颜色展示它们之间的关系层级和引导用户操作。
页面切换
由于NOMO是没有顶栏底栏的,而且购买页高度相对比较长,为了让用户能够快速切换回首页,因此购买页区域上方保留部分首页底部,用户点击首页屏内容能够快速切换回首页,节省去了用户先滑动回购买页面顶部,才能回到首页的繁琐操作。
产品调性
产品页面采用大面积低纯色彩来拜托颜色给人带来的心理影响,从而表现出产品的极简调性;再采用能够与深灰产生强烈冲击力的黄色突出关键信息,让产品信息层次,信息引导特别明显与突出。最后配上每一款相机的精美配图,从而展示出产品的极致精美感。
二、摩拜单车
摩拜单车这几年的确给我们带来了不少便利:大学生团队骑行,工作族短途骑行…其在产品设计上也是惟妙惟肖。
渐进式交互
在用户使用完产品时收集用户多项反馈是一件比较考验设计的事情,部分用户对突如其来的一大堆表单会感到厌恶,部分用户会选择关闭产品,也会有大部分用户愿意完成简单的表单填写,渐进式交互可以尽可能让更多的用户填写体验反馈,从而让产品得到更加有效的数据支持。
三、火箭闹钟
火箭闹钟在这基础上结合了手机加速计、重力计、摄像头,以及麦克风来增加关闭闹钟的多样性,既增加了关闭闹钟的复杂程度,其关闭闹钟的游戏形式却又增加产品的趣味性,让用户在醒来的那一刻又爱又恨。其精美的界面主题与壁纸也是非常值得学习。
四、HealthMate
心率传感器
移动硬件本身自带着很多不同的传感器,如光线传感器可自适应调节屏幕亮度,磁场传感器能提供指南针功能等。心率传感器可以是Applewatch具有突破性功能之一,HealthMate通过在手机上结合闪光灯与摄像头记录查看手指血管收缩扩张,从而实现此功能。加班严重和酒场应酬较多的朋友们可以多测试下自身的心率,心率低于100属于正常情况,健壮的人常保持在50-60,高心率就要注意身体健康了。
五、30天天气预报
昨日天气
用户常常会忘记昨天的天气温度数值,却会深刻地记得昨天穿了什么衣服,昨天的穿衣是冷还是热。30天天气与预报小程序直观地放出昨天气温与当日气温数值,用户可以通过对比两个数值进行添衣或减衣,从而进行合适穿衣。
六、pendo笔记
自嘲式邀请
由于产品刻意在功能上隐藏了操作的文字,尽可能使用icon来表达按钮,让页面上的文字更加聚焦于待办事项内容本身,对于新用户存在一定的学习成本。为了消除用户体验挫败感,产品在用户首次使用功能时运用了不少“漫游探索邀请弹窗”,帮助用户熟悉产品功能,但频繁的“漫游探索邀请弹窗”也会打断用户心留体验,因此为了让用户更加能够接受弹窗内容,产品使用自嘲式文案,增加产品乐趣。
操作反馈
社交情面
八、Shyscnner天巡
一款机票、酒店、租车比价且可以预定的一体化应用程序。查全年机票最好用了╮(╯▽╰)╭
数据可视化图表
情感化插画
一款app最让人感到有温度的地方常常是一句文案,一句提示,一幅插画。产品在“行程”功能上绘制了一个画面感十足的gif动图,内容是一个人躺在沙发上畅想下一次行程的画面,与用户此时此刻躺在某个地方上使用这款产品形成呼应。
九、IDEAT理想家
十、蚂蚁庄园
游戏机制
截图弹窗
当用户使用截图功能时候,庄园会判断用户截图可能是为了进行游戏反馈,因此右侧弹出一个反馈便捷入口。
文案设计
支付宝首页banner位频繁看到蚂蚁庄园的提示:你的小鸡快饿晕了,瞬间激发起用户的母爱之心。玩过小鸡小游戏的用户应该清楚每次喂食只能坚持4-5小时,长期没有喂食小鸡便会跑到好友庄园偷食,可能会遇到驱赶或者殴打。文案从母爱角度切入直戳人心,让用户忍不住点进去喂一次食。
十一、KFC
亮度传感器
在平常使用手机时,如果开启智能亮度调节后,屏幕会根据周围光线而调整屏幕亮度。在KFC室内时屏幕亮度一般在30-50%,产品为了让优惠券代码更容易被仪器识别扫描,在用户点开展示码页面时屏幕会自动调节亮度至90%。
十二、喜马拉雅APP
视觉调性
首页banner背景会随着滑动而改变,这样能保持页面视觉统一。
内容主打页使用多彩icon增加画面色彩,提现产品活力。
已选未选分类在字体上加强大小区别,解决多内容混乱问题。
数据学习
内容瀑布流处提供单独删除按钮。
小细节
首页活动悬浮按钮在用户滑动页面时为半透明状态,减少按钮给用户带来的干扰,同时使悬浮按钮有关闭按钮。
十三、多闪APP
行为判断:返回顶部
当用户在瀑布流预览较下再往上回翻时,系统会判断用户是否想返回顶部,在手势常用区域旁出现一键返回顶部按钮,供用户使用,解决安卓无返回顶部功能,iOS可直接触控状态栏。再次往下滑动按钮则消失。
使用场景:深色背景
产品页面整体采用深灰色背景,可以最大程度降低躲在被子里或者是习惯夜晚关灯看手机的用户们用眼疲劳度。
其它
与聊天页面突出红包、表情、图片视频、比心等按钮,弱化发信息功能;
深色+多彩icon、多彩图案,传递出产品充满活力、内容丰富的调性;
十四、开言英语
短视频引导
产品引导页采用短视频片段,让用户感受产品的“环境”与“氛围”,从而增加用户首次体验沉浸感。
定制化设计
-调查测试
为了更好地区分用户的英语水平,首次体验产品时使用短视频积极推荐用户进行测试,为用户提供匹配的学习材料。
-关闭按钮
单项内容关闭按钮:大部分内容类产品都会有的操作,从学习难度、主题、历史记录3个角度收集用户数据,为每个用户打造定制化课程。
操作减琐
-播放按钮
产品把播放按钮放置在“发现”一级页面,便捷用户对某FM试听,增加用户试听率。
-小提示
行为判断
-播放隐藏
产品在上滑时隐藏播放栏,减少用户干扰;在用户再次下滑回看内容时,播放栏才从下方滑出,供给用户操作。
成就感设计
在用户学习完时生成一张大图,配上精美的图片背景与用户学习数据,鼓励用户对外展示产品使用成就。
层次感
半透明插图:若隐若现的插图增加了渐变背景的层次感;
弥散阴影:增加按钮层次感;
卡片背景:增强内容模块,增加页面层次感。
插画
空状态插画,增强品牌调性,提升产品情感化。
大banner插画,增加产品治愈感,提升产品亲和力。
十五、Peace
一款帮助冥想、睡眠、情绪自愈的产品,2018年appstore年度最佳UI设计,产品在引导页、一级页面、页面背景、页面头图、类别配图、内容页面……每一处采用精心设计的情感化插画,让人沉溺在精美的画面与音频当中,简直就是追求极致页面的UI设计师心中的福音。
十六、Pixaloop
短视频引导页
Pixaloop是一款强大的视频合成app,考虑到并不是每个人都有编辑视频的基础,产品在引导页处采用短视频代替新手教程,并在产品里设置“说明书”功能,尽可能降低用户对功能不了解而产生使用挫败感。再次感叹功能实在太强大,如果仅仅是因为不会使用而错失这么好的合成功能便可惜了。
十七、walkup
成就感体系
Walkup核心玩法“环游世界”,用户选择从地图上的一个洲的第一个城市开始,通过收集每日行走步数转化成能量,然后消耗能量让自己的定位从一个城市到达另一个新的城市并即时反馈,让用户保持一定频率感受成就感,这与大部分产品的勋章系统体系是一致的。不同的是产品偏目标导向,在第一个城市时便告知抵达第二个城市的进度,因此还设计了每日打卡、限时挑战、随机事件、道具商店等方式,让能量可以从多个机制中获取,消除用户抵达下一个城市前的迫切心情。
治愈系设计
十八、小鸟壁纸
Z轴空间折叠样式
从一级页面“挑选壁纸”跳转到“调整颜色”二级页面采用非加载形式页面跳转,跳转动效以伪三维空间样式展现,丰富产品视觉细节。
局部操作
产品是以挑选壁纸调整颜色做为主要核心功能,因此限制了用户对鸟类造型的改动,放大用户对画面颜色的支配,用户可以对主体的每一个细节图层包括背景进行HSB调色(色阶,纯度,明度),这样便可以对一款插画调节成少女色系,直男色系……
营销方式
产品采用免费版插画(8款)+付费版插画(32款)进行组合,先让用户使用免费版插画进行调色功能和壁纸保存等体验,觉得效果不错后再进行付费(而不是像购买付费app一样使用前就已经需要付费,如果达不到用户预期估计评分区是一团糟)
产品会记录下用户每一次保存过的壁纸记录,方便用户下次再次进行调整。
用户能够壁纸大小,旋转壁纸,如对调整不满意还可以进行还原。
产品不需要进行账号注册,以appstore账号为购买单位。
十九、单向历
2016年曾风靡一时网红日历APP,出自于著名文艺中年许知远之手。创始者不多介绍,其主持的访谈节目“十三邀”也是卓尔不群。
小而美产品
-交互上(iOS)仅有5种手势
功能仅有4个
查看日历+选择日期+每日载录+商城跳转
产品功能与交互都是十分地克制。
文艺感
页面信息层顺序:当月日期号-宜忌词-每日摘录-当月筛选-详细日期-商城-其它。
产品在体现核心功能“当日日期”时,马上把信息重点放到了“宜忌词”与“每日摘录”,一个词“宜明媚”“忌虚头巴脑”,一句话“像三月的风扑击明亮的草垛……刚好戳中用户的小情绪。
排版布局使用老黄历朴实风,配上大面积的深色背景与衬线体英文,让页面感官游离于传统于脱俗之间。