如大家所见,@少数派Matrix 官方微博发起了一个自诩为「行为艺术」的活动:每天一个细节设计。截止目前,已经进行了一周,不管出不出意外都会继续进行下去。

每周一,我们会把发布在微博的细节设计进行一个汇总,整理成文发布在 Matrix 社区。这是第一周的汇总,共计 9 个细节设计。

点按屏幕时的水波纹效果、浮动的水珠:Timely

Timely 是一款精致的时钟应用,像这类小工具,很难在功能上进行创新,因此比拼的就是颜值和细节了,而 Timely 绝对称得上是「小而美」应用的一个代表。

在应用界面,屏幕底部会时不时会冒出一些水珠,大小不一,像极了海底水草旁奔向水面的水泡,切换主题时,水珠也会随着变色。如果你见过 Flyme 的充电界面,那对于这个小细节可能不会陌生,二者非常相似。除此之外,当点按屏幕时。也有相应的水波纹效果。

如果以上两点打动了你,下载使用后或许还会更多的细节,静态图片是完全无法展现它的美的。这里卖一个关子:它设置闹钟的交互也和常规闹钟大不相同,具体如何设置,感兴趣的自行下载吧。

276469.jpg

投稿:@RemyDesign

曲线救国,截图分享:淘宝

鉴于大家都知道的一个事实,机智的淘宝在检测到用户截屏后,会弹出一个顶部横幅提醒用户是否要分享给微信、微博(看到分享给微博用户这里... 我承认我笑了...)用户,点击「是的」,宝贝信息就会自动复制到剪贴板中,当另外一个用户将该内容复制到剪贴板然后进入淘宝时,淘宝会提醒用户打开该宝贝,也算是曲线救国了。

276475.jpg

不过,鉴于支付宝 9.0 的惊艳改版,我们有理由相信!或许不久的未来,淘宝也会引入社交功能,当需要分享时,心中默念「分享给小李,分享给小李,分享给小李」,小李的淘宝就会收到提醒「亲 ~ 小王给你分享了一个宝贝,快来查看叭!」

投稿:@龙爪槐守望者

把荧幕形象搬进电影票选座:格瓦拉@电影

《滚蛋吧!肿瘤君》是一部立志把观众看哭的电影,讲述了............. 

使用格瓦拉购买电影票进行选座时,选中的座位会标记为荧幕形象的卡通头像,吴彦祖、白百合、肿瘤君,让选座这个乏味的事情也稍微有趣了一些。

5666.jpg

字幕和底栏联动:网易公开课

不知道大家在看视频时有没有遇到这样一个痛点:当我们打开全屏模式但底栏还未隐去时,字幕就活生生的被遮挡住了,错过了关键一句,可能就得回调几秒,非常影响体验。(下图为搜狐视频的截图)

8777.jpg

针对这种情况,网易公开课会使字幕会和底栏进行联动,底栏未隐去时,字幕也会相应的上移一段距离,这个痛点也就解决了。需要说明的是:网易公开课的网站和移动端应用均支持这个特性。

899.jpg

Chrome 的两个小细节

Chrome 是很多用户的默认浏览器,但这两个细节或许有些人还不知道。因为篇幅较长,投稿者将它写成了一篇文章发在了 Matrix 社区,原文阅读:Chrome 的两个小细节

5666666666666666666.jpg

投稿:@KKKove

摇一摇界面:微信

不同性别的用户,微信摇一摇界面的手模是不同的,女性用户展现的是 ROCK 的手势,不知道这其中有什么深意。

276484.jpg

登录界面的心理安慰:Readme & bilibili

Readme 网站的登录页面上,有一个小猫头鹰,当用户输入密码时,这个猫头鹰会闭上眼睛,以表示对隐私的保护,非常可爱,让人忍不住在账号和密码输入框间多切换几次。

221799.gif


国内也有一些应用跟进了这个细节,bilibili 就是一个例子,只不过登录界面上的吉祥物换成了 B 站的 2233 娘。

276487.jpg

单击顶栏回到顶部的防误触:Instapaper Moke VVebo

单击顶栏回到顶部几乎已经是标配了,在方便快速回到顶部的同时也增加了误触的几率,针对这种情况,Instapaper、墨客、VVebo 都有相应的解决办法。

  • Instapaper:回到顶栏后,页面顶部会有一个 bar 供用户选择是「留在顶部」还是「返回到位置」。
  • Moke:当点击顶栏回到顶部后,用户可以通过摇一摇回到上次浏览位置。
  • VVebo 时:点击顶栏回到顶部,再次点击顶栏就会回到上次浏览位置。


276490.jpg

投稿:@觉主好难养

Tab 标签切换也能玩出新花样:出发吧

在「出发吧」这款应用中,当 Tab 标签位于「行程」时,展示的样式如下:

9999.png

当 Tab 标签位于「我」时,展示的样式如下:

5666.png

像不像一个(被砍掉双臂)的半身雕塑版「大白」?

事实上,在之前的版本中,Tab 标签中的「个人」更像大白,起码是有胳膊的......

90000.png


877777_看图王.jpg

以上就是第一周的汇总,共计 9 个细节设计。有的细节设计仅仅是养眼,你可以说它是无用的,但有的细节的的确确提高了实用效率、优化了使用体验,不管怎样,正是因为这些细节,让它们不再是一具没有温度的行尸走肉。


如果你有好的细节设计的例子,也欢迎投稿,我们将会在微博正文以及每周的汇总文章总标注投稿人。