12个值得学些的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酱 摘录

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

原创： 黑马家族

公众号：行设视觉