阿禅 Jason Ng:那些让你拍大腿的设计细节

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看152 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 152|回复: 2
收起左侧

阿禅 Jason Ng:那些让你拍大腿的设计细节

[复制链接]
young 发表于 2016-8-29 17:25:19 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
本帖最后由 young 于 2016-8-29 17:35 编辑


我有一个习惯,看到不错的 UI 设计和交互设计,都会截图或做成 GIF 图保存下来,以便日后参考。

我打算经常分享我看到的那些让我有「拍大腿」欲望的设计,可能这些设计最早并不全原创于我保存下来的 app,但这并不影响我们对 UI 细节的欣赏。

一个产品之所以能吸引用户,除了核心的内容或功能满足用户需求之外,UI 有时起到的不止画龙点睛的作用,比如你做了一个跟穿衣相关的 app,UI 设计非常粗糙,内容再好,用户也不会认同产品的品味。

而在这个看脸的世界,好的设计会让用户眼前一亮,可能使本来对产品兴趣不大的人,也有兴趣点开,并看个究竟。




1、Bilibili 登录密码框

经常看二次元动漫、鬼畜或者搞笑视频的人们应该对「Bilibili」都很熟悉,它的手机端登录界面非常有趣,当输入光标跳转到密码框时,背景图片中的两个小人会蒙起眼睛,表示不偷看用户的密码,完全保密,看起来相当诙谐。

阿禅 Jason Ng:那些让你拍大腿的设计细节 1

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 1





2、Instagram 主界面中的商标

这个设计最早在 Mobile Safari 里见到,Instagram 参考了这种做法。

在 Instagram 的主界面中,按照正常浏览的顺序向上划屏,界面顶部的 Instagram 商标和私信按钮会按照屏幕滚动的幅度进行等比例缩小,同时保证在相对位置上的居中,直到屏幕滚动到一定程度,商标和私信按钮就会消失不见。

阿禅 Jason Ng:那些让你拍大腿的设计细节 2

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 2


这样,就能保证用户在浏览时,空间充足。




3、iPhone 关机滑动条

其实版本 7 之后, iOS 还是保留了一些拟物化设计,或暗示。

比如,在 iPhone 关机的操作中,从左向右划动关机条,屏幕的透明度会等比例下降,同时降低屏幕亮度,表示了即将进入关机状态的过程,看起来就好像老旧的灯泡要熄灭一样。划到右侧尽头不要松手,朝着反方向再次划动,屏幕会由暗变亮,透明度也会相应提高,有一种起死回生的感觉。

阿禅 Jason Ng:那些让你拍大腿的设计细节 3

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 3





4、旧版 UBER 登录界面

大多数软件的登录界面都会比较普通,可能只会有几个动效或者直接放一张图片,而在 UBER 的上一个大版本中,有一个很简单的视频嵌入在登录界面里。

它用光点代表车,线代表路,光点在各种线之间来回运动,表示了车辆在城市中穿梭。之后还会用点阵拼出一个某些地点在波动的世界地图,意味着当前地点有人叫车。在输入账号密码时看到这个视频,应该是对自己能在全球各地快速输送乘客有充足的信心吧。

阿禅 Jason Ng:那些让你拍大腿的设计细节 4

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 4





5、虾米音乐横屏界面

很久没见拟物化设计了,有时重新看到,会眼前一亮。

在虾米音乐中,播放音乐时将手机横置,可以看到界面变成了复古的卡带风格,还原度接近百分之百,在欣赏音乐的同时顺便怀旧,也是一件很美的事。

阿禅 Jason Ng:那些让你拍大腿的设计细节 5

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 5





6、MediumEditor 网页动效

MediumEditor 是一个模仿 Medium 的开源编辑器,它的官网在展示编辑器功能上花了功夫。表面上看,官网貌似把编辑器的工具条截图放到首页,但实际上,当你高亮选择首页的文字时,这个看似截图的工具条会「飘」到文字上方 — 它是真的工具条。你可以在工具条上开始格式化高亮的文字。当你编辑完,工具条会重新「飘」回去,继续「伪装」成一张截图。

阿禅 Jason Ng:那些让你拍大腿的设计细节 6

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 6





7、Enjoy 搜索框

Enjoy 是国内一家推荐品质美食的 app 。刚开始用 Enjoy 时还在抱怨它没有搜索功能,不能按照地址来搜索不错的饭馆,但是后来发现它的搜索框并不在屏幕顶部或是右上角等常规位置,而是在 banner 下方,是一个不算很显眼的位置。但是将整个页面向上划动一部分到搜索框被状态栏遮盖住的时候,搜索框就会出现在整个界面的最上方了,有点意思。

阿禅 Jason Ng:那些让你拍大腿的设计细节 7

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 7





8、Telegram 快捷自拍

即时通讯软件 Telegram 在前段时间的一次更新中加入了一个彩蛋式的功能。在聊天界面中,长按左下角的附件按钮,即可快速弹出自拍界面。这个功能并没有写在更新报告里,就像朋友圈长按相机按钮能发文字,都是让用户自行发现,发现后,用户会对这种细节产生极大的好感。

阿禅 Jason Ng:那些让你拍大腿的设计细节 8

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 8





9、Fantastical 的两种视图切换

Fantastical 是 iOS 上最好用的日历软件之一,主界面的上半部分是一整个月的日历,而下方则是具体的日历事项。但这么大一块区域被日历所占用是相当浪费的,事实上我们并不一定每天都有安排,我们有时可能只需要按事项来查看,而不需要看到日历。Fantastical 并不是用按钮来做这两种模式的切换,而是,在日历区域里向下划动,这样即可在两种视图之间切换,切换时的动画也是很顺畅。

阿禅 Jason Ng:那些让你拍大腿的设计细节 9

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 9





10、1Password 解锁上锁动画

作为一款知名的密码管理工具,安全性当然是最让用户看重的优势,它的设计同样值得称赞。在 Mac 客户端中进行解锁时,1Password 的图标像是金库大门上的那道锁一样旋转,而它两侧的元素就像是自动门一样向两侧打开。在进行锁定操作时,这些动画会反向播放。这种做法,让用户通过类比已经熟知的场景产生安全感

阿禅 Jason Ng:那些让你拍大腿的设计细节 10

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 10





11、Gestimer 拖动操作

这是一个 Mac 端的计时器软件,操作很简单,只有一个动作,就是从状态栏将它的图标向屏幕下方拖动,拖动的距离越长,则设定的时间就越久。

阿禅 Jason Ng:那些让你拍大腿的设计细节 11

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 11





12、Sketch 拖动修改参数

Sketch 是一款矢量图绘制工具,现在越来越多的设计师在设计 app UI 时都优先考虑使用 Sketch。我在绘制产品原型时也用 Sketch,它有一个细节让我非常感动。

在很多绘图的软件中,想要重新设置某些元素的数值,往往都是在数字框中填写相应数字。而在 Sketch 中,每个能填写数值的地方,光标都能变成拖拽柄,用户可以左右拖动进行无级调解。

阿禅 Jason Ng:那些让你拍大腿的设计细节 12

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 12





13、音乐备忘录的声音采集反馈

Apple 官方制作了一款可以随时采集灵感的音乐备忘录,在录音时,屏幕下方会显示对应的声波图形,而在屏幕正中的那个圆圈并不单纯是一个按钮。每当有一个声音被采集时,这个按钮周围就会出现一个越来越大的圆圈,就像水波纹那样,而且可以和声波图形相互对应,看起来很舒服。

阿禅 Jason Ng:那些让你拍大腿的设计细节 13

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 13





14、Google I/O 时间

Google 一向是一家设计能力超强的公司,在 Google I/O 主页上,现在还保留着一块正计时的区域。这里的动效和颜色变化,充分体现了这家公司设计制作能力的强大,有兴趣的话不妨可以去仔细看看,学习一下。

阿禅 Jason Ng:那些让你拍大腿的设计细节 14

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 14





15、Tweetbot 切换主题

Tweetbot 是目前最好用的第三方 Twitter 客户端,一度被认为是 iOS 开发中的标杆。在切换主题时,只需要用双指在屏幕中上下划动,就可以切换白天主题和黑暗主题。在切换的过程中,可以发现有一条很明显的分界线在屏幕上滑动,分割开了白天部分和黑夜部分,很有意思。

阿禅 Jason Ng:那些让你拍大腿的设计细节 15

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 15





16、开眼主页

开眼是一个有意思小视频的聚集地,在它的主页中,第一屏的背景就是很多有意思的视频,其中大多数为延时摄影和慢动作视频。而这一屏的信息则是它的宣传标语以及 iOS 和 Android 版本的下载链接,感觉光是这一个页面就能看五分钟都没问题。

阿禅 Jason Ng:那些让你拍大腿的设计细节 16

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 16





17、Apple Online Store 购物车

在 Apple 的网站买东西,当挑选好物品将它添加到购物车时,可以发现原本背景为纯白的「购物袋」的图标上会多一个蓝点,表示购物车中已经有物品了,走之前记得付款。

阿禅 Jason Ng:那些让你拍大腿的设计细节 17

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 17





18、DaisyDisk 扇形图

大家通常不会把电脑中的硬盘分区想象成扇形结构,可是这个主要功能是清理文件的软件还真的这样做,用扇形表现出已经用了多少空间、硬盘还剩多少空间。硬盘外的每一部分圆环区域都代表一部分文件所占的容量,处在同一个圆环上的不同部分表示在目录树中同一层级的,而外环则表示下一级。

阿禅 Jason Ng:那些让你拍大腿的设计细节 18

阿禅 Jason Ng:那些让你拍大腿的设计细节 - 敏捷大拇指 - 阿禅 Jason Ng:那些让你拍大腿的设计细节 18





19、一炮怎么够

今天先分享这么多,请等待第二炮。

或许这种 UI 和交互细节的分享应该以群的形式进行,如果你经常发现这些能让你拍大腿的细节,愿意和其他人分享,且想获得其他人的分享,可以回复关键词「拍大腿」,近期我拉个群。

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

rightnow 发表于 2016-8-29 21:10:33 | 显示全部楼层
有意思!收集得不错~~~
射鸡狮 发表于 2016-8-29 21:46:03 | 显示全部楼层
这些开发是锦上添花啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐