那些让你拍大腿的设计细节
阿禅 Jason Ng
读完本文
大约需要
我有一个习惯，看到不错的 UI 设计和交互设计，都会截图或做成 GIF 图保存下来，以便日后参考。
我打算经常分享我看到的那些让我有「拍大腿」欲望的设计，可能这些设计最早并不全原创于我保存下来的 app，但这并不影响我们对 UI 细节的欣赏。
一个产品之所以能吸引用户，除了核心的内容或功能满足用户需求之外，UI 有时起到的不止画龙点睛的作用，比如你做了一个跟穿衣相关的 app，UI 设计非常粗糙，内容再好，用户也不会认同产品的品味。
而在这个看脸的世界，好的设计会让用户眼前一亮，可能使本来对产品兴趣不大的人，也有兴趣点开，并看个究竟。
1
Bilibili 登录密码框
经常看二次元动漫、鬼畜或者搞笑视频的人们应该对「Bilibili」都很熟悉，它的手机端登录界面非常有趣，当输入光标跳转到密码框时，背景图片中的两个小人会蒙起眼睛，表示不偷看用户的密码，完全保密，看起来相当诙谐。
2
Instagram 主界面中的商标
这个设计最早在 Mobile Safari 里见到，Instagram 参考了这种做法。
在 Instagram 的主界面中，按照正常浏览的顺序向上划屏，界面顶部的 Instagram 商标和私信按钮会按照屏幕滚动的幅度进行等比例缩小，同时保证在相对位置上的居中，直到屏幕滚动到一定程度，商标和私信按钮就会消失不见。
这样，就能保证用户在浏览时，空间充足。
3
iPhone 关机滑动条
其实版本 7 之后， iOS 还是保留了一些拟物化设计，或暗示。
比如，在 iPhone 关机的操作中，从左向右划动关机条，屏幕的透明度会等比例下降，同时降低屏幕亮度，表示了即将进入关机状态的过程，看起来就好像老旧的灯泡要熄灭一样。划到右侧尽头不要松手，朝着反方向再次划动，屏幕会由暗变亮，透明度也会相应提高，有一种起死回生的感觉。
4
旧版 UBER 登录界面
大多数软件的登录界面都会比较普通，可能只会有几个动效或者直接放一张图片，而在 UBER 的上一个大版本中，有一个很简单的视频嵌入在登录界面里。
它用光点代表车，线代表路，光点在各种线之间来回运动，表示了车辆在城市中穿梭。之后还会用点阵拼出一个某些地点在波动的世界地图，意味着当前地点有人叫车。在输入账号密码时看到这个视频，应该是对自己能在全球各地快速输送乘客有充足的信心吧。
5
虾米音乐横屏界面
很久没见拟物化设计了，有时重新看到，会眼前一亮。
在虾米音乐中，播放音乐时将手机横置，可以看到界面变成了复古的卡带风格，还原度接近百分之百，在欣赏音乐的同时顺便怀旧，也是一件很美的事。
6
MediumEditor 网页动效
MediumEditor 是一个模仿 Medium 的开源编辑器，它的官网在展示编辑器功能上花了功夫。表面上看，官网貌似把编辑器的工具条截图放到首页，但实际上，当你高亮选择首页的文字时，这个看似截图的工具条会「飘」到文字上方 — 它是真的工具条。你可以在工具条上开始格式化高亮的文字。当你编辑完，工具条会重新「飘」回去，继续「伪装」成一张截图。
7
Enjoy 搜索框
Enjoy 是国内一家推荐品质美食的 app 。刚开始用 Enjoy 时还在抱怨它没有搜索功能，不能按照地址来搜索不错的饭馆，但是后来发现它的搜索框并不在屏幕顶部或是右上角等常规位置，而是在 banner 下方，是一个不算很显眼的位置。但是将整个页面向上划动一部分到搜索框被状态栏遮盖住的时候，搜索框就会出现在整个界面的最上方了，有点意思。
8
Telegram 快捷自拍
即时通讯软件 Telegram 在前段时间的一次更新中加入了一个彩蛋式的功能。在聊天界面中，长按左下角的附件按钮，即可快速弹出自拍界面。这个功能并没有写在更新报告里，就像朋友圈长按相机按钮能发文字，都是让用户自行发现，发现后，用户会对这种细节产生极大的好感。
9
Fantastical 的两种视图切换
Fantastical 是 iOS 上最好用的日历软件之一，主界面的上半部分是一整个月的日历，而下方则是具体的日历事项。但这么大一块区域被日历所占用是相当浪费的，事实上我们并不一定每天都有安排，我们有时可能只需要按事项来查看，而不需要看到日历。Fantastical 并不是用按钮来做这两种模式的切换，而是，在日历区域里向下划动，这样即可在两种视图之间切换，切换时的动画也是很顺畅。
10
1Password 解锁上锁动画
作为一款知名的密码管理工具，安全性当然是最让用户看重的优势，它的设计同样值得称赞。在 Mac 客户端中进行解锁时，1Password 的图标像是金库大门上的那道锁一样旋转，而它两侧的元素就像是自动门一样向两侧打开。在进行锁定操作时，这些动画会反向播放。这种做法，让用户通过类比已经熟知的场景产生安全感。
11
Gestimer 拖动操作
这是一个 Mac 端的计时器软件，操作很简单，只有一个动作，就是从状态栏将它的图标向屏幕下方拖动，拖动的距离越长，则设定的时间就越久。
12
Sketch 拖动修改参数
Sketch 是一款矢量图绘制工具，现在越来越多的设计师在设计 app UI 时都优先考虑使用 Sketch。我在绘制产品原型时也用 Sketch，它有一个细节让我非常感动。
在很多绘图的软件中，想要重新设置某些元素的数值，往往都是在数字框中填写相应数字。而在 Sketch 中，每个能填写数值的地方，光标都能变成拖拽柄，用户可以左右拖动进行无级调解。
13
音乐备忘录的声音采集反馈
Apple 官方制作了一款可以随时采集灵感的音乐备忘录，在录音时，屏幕下方会显示对应的声波图形，而在屏幕正中的那个圆圈并不单纯是一个按钮。每当有一个声音被采集时，这个按钮周围就会出现一个越来越大的圆圈，就像水波纹那样，而且可以和声波图形相互对应，看起来很舒服。
14
Google I/O 时间
Google 一向是一家设计能力超强的公司，在 Google I/O 主页上，现在还保留着一块正计时的区域。这里的动效和颜色变化，充分体现了这家公司设计制作能力的强大，有兴趣的话不妨可以去仔细看看，学习一下。
15
Tweetbot 切换主题
Tweetbot 是目前最好用的第三方 Twitter 客户端，一度被认为是 iOS 开发中的标杆。在切换主题时，只需要用双指在屏幕中上下划动，就可以切换白天主题和黑暗主题。在切换的过程中，可以发现有一条很明显的分界线在屏幕上滑动，分割开了白天部分和黑夜部分，很有意思。
16
开眼主页
开眼是一个有意思小视频的聚集地，在它的主页中，第一屏的背景就是很多有意思的视频，其中大多数为延时摄影和慢动作视频。而这一屏的信息则是它的宣传标语以及 iOS 和 Android 版本的下载链接，感觉光是这一个页面就能看五分钟都没问题。
17
Apple Online Store 购物车
在 Apple 的网站买东西，当挑选好物品将它添加到购物车时，可以发现原本背景为纯白的「购物袋」的图标上会多一个蓝点，表示购物车中已经有物品了，走之前记得付款。
18
DaisyDisk 扇形图
大家通常不会把电脑中的硬盘分区想象成扇形结构，可是这个主要功能是清理文件的软件还真的这样做，用扇形表现出已经用了多少空间、硬盘还剩多少空间。硬盘外的每一部分圆环区域都代表一部分文件所占的容量，处在同一个圆环上的不同部分表示在目录树中同一层级的，而外环则表示下一级。
19
一炮怎么够
今天先分享这么多，请等待第二炮。
或许这种 UI 和交互细节的分享应该以群的形式进行，如果你经常发现这些能让你拍大腿的细节，愿意和其他人分享，且想获得其他人的分享，可以回复关键词「拍大腿」，近期我拉个群。