UI设计师的产品体验日记 04 期

1年前发布

原创文章 / 多领域 / 观点
黑马青年 原创,如需商业用途或转载请与黑马青年联系,谢谢配合。

UI设计师的产品体验日记,希望可以带给大家更多帮助,在描述上面如有疑问欢迎大家留言指正。


01、Video Lab 的音乐编辑模块

Video Lab 的添加音乐功能选择直接在音乐库界面展示编辑模块内容,让用户在试听音乐时可自由编辑内容音乐的长短,达到想要的效果。


该产品解决方案与市面上其他视频剪辑产品相比,在去掉反复在选区试听界面来回的繁琐操作之后,使产品更加轻便好用。

——小菜包o 摘录




02、QQ 底部标签栏消息 icon 交互小心思

手机版的 QQ 在 iOS 8.0 版本更新后,不仅设计风格更加简洁清爽,在底部标签栏常用功能“消息”模块的 icon 设计上面也蕴含了交互小心思。


当你用手指轻滑 icon 时,会出现不同的搞怪表情,增强产品趣味性。当用户滑动浏览消息列表内容后进行操作,还具备置顶的功能。作为设计师我们在进行产品设计的时候,所谓的增强用户体验,需要从细微的地方带给用户不一样的体验。

——Daisy 摘录




03、RK Cam 拍照模板功能设计

RK Cam 在拍照时,拍摄按钮的左侧提供了快捷排版的功能操作,点击进入排版选项,用户可自行挑选适合的模版。选择对应的模板后,在拍摄过程中会进行提示当前为模版中的哪个位置。


该产品的解决方案不仅可以直接享用滤镜,还可以直接帮助排版,这个操作为喜欢排版照片的用户提供了极大的便利。

——小菜包o 摘录




04、Alook 浏览器不一样的体验

第一次打开 App 会给用户进行弹窗引导,以此来强调产品的服务功能,便于用户了解产品,更易上手。


这款浏览器在观看视频时会自动悬浮,并配有浏览器自带的倍速等功能,而且可以类似直播那样的后台播放(只有声音),可以满足视频播放的多种需求。


另外还设计了移动端和 web 端互换的小工具,满足一些电脑版排版和功能略有不同的网站呈现,用户可以根据需求进行切换,目前大部分浏览器还没有这个功能设置。

——阿玉儿 摘录




05、QQ 语音进度条的贴心功能设计 

众所周知,常见的语音消息都是点击收听,再次点击停止。腾讯 QQ 本次更新之后,语音进度条的功能设计进行了优化提升。除了播放/暂停操作外,可以拖动游标进行进度控制,对于语音过长时,用户可以挑选重点倾听,节省时间成本。


视觉呈现上采用更加清晰的声纹波段,既能很好的展示进度信息,又能让用户都能对语音进度有更直观化的操作,增强用户体验。 

——飞鹰创意之旅 摘录




06、看理想-看见另一种可能

整个产品设计界面排版极简化,色彩搭配清新高级。没有过多的装饰,每一张插图都是为内容而服务,整体调性文艺、富有内涵。


滑动阅读文章时,上下两个部分功能将会隐藏,排除一切干扰用户阅读的因素,提升用户阅读时的效率。

——小菜包o 摘录




07、ETC 车宝 App 广告位交互小细节

在体验 ETC 车宝首页时,广告位的设计与众不同。当处于首屏时,内部广告折叠展示,可左右滑动切换,当屏幕上拉时,折叠广告将全部展开显示。下拉回到顶部时,即自动折叠恢复最初界面样式。


这样的交互处理可以更大程度的增强首屏利用率,可以露出更多不同板块信息。当屏幕发生变化时,板块内部信息再全部展示,也不会被忽略,还能增强用户操作趣味性。

——飞鹰创意之旅 摘录




08、每日优鲜 App 隐藏的会员权益

在体验每日优鲜产品时,进入我的页面,点击任一区域下拉,即可出现隐藏的 7 大会员权益,松开后内容自动上移覆盖。


很小的交互细节,抓住了用户的心里,直接展示出来可能会被忽略,一个小的交互可以引起用户的注意。一般看到需要收费开通会员,很多用户都不会去点击,如果用户优先看到会员权益,可能会勾起开通会员的欲望,从而达到引导的目的。另外也减少了页面的跳转,减少了用户的操作成本,因而提升用户体验。

——飞鹰创意之旅 摘录




09、Forest 通过游戏让你专注于学习

这是一款不仅限于游戏的产品,当你想专心投入学习,又想要防止自己玩手机时,可以在 forest 中选择种下一棵树,设定好时间,在规定时间内不玩手机这棵树就会成功生长。


在种树过程中,树会随着时间的推移,在不同阶段呈现出不同的外形(树苗苗→小树→中等的树

→大树),如果你在期间玩手机这棵树就会死掉,通过趣味性的小游戏,让你可以专心投入学习。

——CoolG 摘录




10、花生地铁 人性化的到站提醒

乘坐地铁的时候由于时间较长,我们都会拿起手机玩游戏、看小说、看新闻、看电视剧等等。因此,经常容易错过换成或者坐过站。


在花生地铁产品中,新增了到站提醒功能,可以点击进入界面进行设置你的回家和上班站点,还可以设置换乘站提醒,这样你就可以肆无忌惮的玩手机或者美美的睡上一觉了。这个设计解决方案,从用户的角度出发,非常具有人性化,体验极佳。


在设计表现上面,选择城市界面中,热门城市利用地标的插画来表现。在切换城市界面中,城市是由地铁的标志来表现。不单单是直接的文字信息传递,增加了趣味性,加深了对各地方地铁标志与地标的记忆性。

——凉沐橙 摘录




11、英语流利说 知识星球探索

从打开 App 开始产品的引导做得都非常不错,整个界面布局设计简洁清爽,信息引导处理使得用户可以很快探索到自己喜欢的内容。


左上角的“我的知识星球”版块,置于左上角,虽然不是最突出的,但是也能引发用户的好奇欲,很想看看这个版板是干什么的。点击进入之后,就是一个惊喜,用户可以一边学习一边游戏,一次不一样的体验之旅。

——碎碎的蓝 摘录




12、腾讯翻译君 同声传译的人性化设计

对于很多英语不好的用户来说,借助翻译工具是非常便利的选择。在体验腾讯翻译君 App 的时候,同声传译的人性化设计印象比较深刻。


进入到腾讯翻译君产品首页,点击右上角的图标即可在展开的功能中进入到同声传译模式。在界面中通过语音翻译后,可以通过点击右上角的图标进行上屏旋转。这种交互形式的运用,使得用户在与他人对话场景中沟通更加方便顺畅,满足了用户使用时的心理需求。

——Rachel酱 摘录




13、开言英语,注重用户反馈,精准推送内容

这是一款提供优质语言学习的 App,注重用户反馈,精准地推送用户更感兴趣的学习内容。在首页中对推荐课程板块的设计,用户在关闭不感兴趣的内容时,会弹出反馈信息标签,为用户精准地屏蔽相关联的内容信息。后期可以推送更加精准的服务,避免用户被过多的无用信息所干扰。


该功能也有不少产品使用,但是一些产品无法做到真正的屏蔽,特别是在一些娱乐类产品的游戏广告推送中。希望更多产品可以真正的做到增强用户体验,不然一个好的功能就只能是形同虚设。

——Seem 摘录




14、关于鼓励用户发图的设计技巧

社交产品的粘性离不开良好的社交氛围与用户有趣的内容产出,图片/视频内容相较于文字内容来说,更能增强用户的关注度,引发用户之间的互动。


如何友好地鼓励用户产出带图的内容,飞聊(左)和 soul(右)团队的解决方案值得参考。在点击发表之后,屏幕上方一部分空间作为文字输入区域,下方作为插入内容区域优先调出相册。相比直接全屏调出相册或者直接弹出键盘,这种巧妙的设计方式保留了用户发表内容的多样选择,而非强制打开选择相片or手动关掉。这样的设计解决方案更友好地鼓励用户产出带图的内容,也更加便于用户操作。

——虫尾巴 摘录




15、印象,推广位的更多场景展示

在 App 中,推广信息的展示通常在引导页、闪屏、首页 banner 、弹窗等等场景中较为常见,更好的推广位挖掘是商家进行产品设计会考虑的一个点。


在印象 App 登录注册界面设计中,加入了轮播 banner 来向用户传达产品的服务和理念,不仅可以向新用户推广活动,还可以展示一些刺激用户注册的福利策略。

——虫尾巴 摘录




16、Picsew App 的长截图和长图拼接

Picsew 是一款很实用的长截图和长图拼接工具,可以自动识别多张图片的重合部分,并拼接成长截图,并且可以手动移动拼接位置。


可以对合成的长截图进行裁剪、加马赛克等操作,拼接完成后,删除来源图片这个功能很贴心。而且还有多种插件,并且可以添加水印,受到众多互联网资讯博主推荐。

——阿玉儿 摘录




17、虎嗅 App 小图标新玩法

虎嗅是一款科技头条新闻热点资讯产品,在底部标签栏 icon 设计上面尝试了新的玩法。资讯 icon 在进行页面下拉刷新时,icon 会伴随着微动效;24小时 icon 会有一个红点在描边内部绕着环形进行运动,经过测试发现红点运行一周刚好是 1 分钟,以此来体现时间的流动性,突出该功能下的服务特色。


一枚小小的 icon 设计隐含了对功能的深度诠释,所谓的体验设计就是一起去探索细微之处的深度设计解决方案。希望在今后的产品迭代中,可以发现更多产品在细节上面的探索。

——黑马青年 摘录




18、轻听英语,更加友好的听力提升体验

轻听英语是一款提升你英语听力能力的产品,界面设计简洁精致,界面配色活力清新。图标设计上面表现也值得学习,可视化识别度高,简洁易懂。


在跟读时点击上方的闹钟 icon,可以定时停播。下方数字为快慢跟读,满足用户的不同需求。在跟读时可以根据自己的专业情况进行中英切换,方便更好的进行内容跟读与理解。

——Shadow 摘录




19、Ultralight App 与众不同的调色面板

与众不同的调色面板,摆脱常规的横排方式,提升了纵向空间利用率。缩小操作区扩大预览区,控件的意思传达清晰明了。


将 RGB 三个通道内容直接展示给用户,用户可以在拖动控件的同时看到图片的预览,以便达到自己想要的效果。


裁剪面板提供不同的比例大小,滑动轴左右波动进行旋转,将两个功能完美融合在一个面板中。

——小菜包o 摘录




20、大麦 App,Banner 图设计的空间感

大麦是一款专注于展览、演唱会等门票贩卖的产品,在首页的设计中,其中 Banner 图的交互处理采用了一定的透视效果,与市面上常见的平铺展现方式形成差异化,使人眼前一亮。 


底部 tab 栏首页的 icon 首屏状态下以 logo 形式展示,强化了品牌传播。当页面滑动到一定程度的时候,首页的 icon 变为置顶操作。方便用户进行快速置顶,也更好的提高了空间利用率。

——橙子_C 摘录




21、Luckin Coffee 空界面的新玩法

Luckin Coffee 瑞幸咖啡 App 设计整体配色主要使用了蓝+白的品牌色,底部标签栏的首页 icon 设计采用了品牌 logo 的运用,强化了品牌记忆。


在订单列表空状态的设计中,除了常规的情感化处理以外,在右下角设计了一个免费送咖啡的提示。以一杯咖啡的造型进行设计提示,有别于传统的优惠券样式陈列,也能更加生动有趣。在空界面的处理上面新增运营策略,以优惠福利的形式提升用户的注册转化。

——Daisy 摘录




22、探图,发送按钮的显示与隐藏

探图是一个摄影社区的产品,在作品详情界的设计中,底部评论区域的设计包含:评论框、收藏与分享图标。当用户进行评论操作时,收藏和分享图标直接变成发送按钮。当用户输入完自己的评论内容后,直接点击按钮就可以发送,方便快捷。


发送按钮的设计替代了原本功能在当前位置不可用的状态,也不会占用界面其余空间,增加了版面的利用率,给用户也带来更便捷的操作。

——凉沐橙 摘录




23、淘宝,以缺货通知增进销售概率

描述:以前缺货的商品,尺码置灰不可选中,现在虽然是置灰状态却可以选中,选中后确定按钮变成了“缺货中,提醒掌柜补货”。 


To B 隐形预售:根据用户需求进行补货,能有效控制库存和成本,挽留因为暂时缺货流失的客户,增进销售概率。


To C 能及时收到商品补货通知,买到心仪的商品,提升购买体验。

——是石头吖 摘录




24、淘宝,帮我选

淘宝新增了个帮我选功能,可以从最近浏览、购物车、收藏夹、已购买中选择5件商品,邀请好友帮忙选择。对于一些选择困难症的用户,这个功能可以收集到更多朋友的建议,因而更快的做出选择。


这个功能增加了淘宝的社交属性,一般淘宝好友很少,可以通过微信、QQ 等其它社交软件邀请朋友来选择,也变相的为软件进行引流,将其好友关系引入淘宝中。

——是石头吖 摘录




25、QQ 音乐中的歌手选择

在体验 QQ 音乐 App 时,在歌手的选择界面,网上滑动的过程中,界面右侧会出现歌手名字的首字母。用户可以点击自己要搜索的歌手的字母,就很容易找到相关的歌手。该解决方案节省了用户的操作时间成本,简化了搜索功能。

——凉沐橙 摘录




26、喜马拉雅产品中的两个小提示

在体验喜马拉雅 App 时,在收听领好礼界面中,左上角有一个领奖提示按钮,用户可以打开,当领奖时间到的时候,手机就会提示,用户就不会错过领奖时间。该设计非常人性化,给用户带来了方便,同时也提高了该功能的使用率。


在播放界面中,右上角的助眠模式开启之后,可以防止用户在睡着后忘记关闭手机,导致一夜没电。

——凉沐橙 摘录




27、小睡眠,给你一个婴儿般的好睡眠

白天模式下,配色非常小清新,运用比较多的卡片布局,且都做了较为明显的圆角处理,整个视觉感舒适、自然,符合产品定位与调性。


切换夜间模式(可手动切换,也可设置时间段自动切换到对应模式)后,页面背景变为深色,且图片、文字和深色背景的对比度较弱,增加了光线较暗场景下的舒适感,助于你更快的进入睡眠状态。

——小明同学 摘录




28、58 同城租房信息录入如何减少弹窗调出次数

58 同城租房 App 中,在录入租房信息时,有很多的条件选择及信息录入,而且单个选项会有多个分级(如选择地址:省/市/区县)。在进行设计的时候将多个分级放在同一选项,多个选项放在同一弹窗,有效的避免了选项太多造成的信息混乱,同时也解决了因多次弹窗给用户带来操作上的不便。

——飞鹰创意之旅 摘录



本期的产品体验日记分享到此结束,希望抛砖引玉,可以看到更多伙伴去发现更多好玩的设计。

本文由团队成员整理编辑,发布于站酷,仅作为学习交流,勿做他用。

156
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息