如大家所見拔创,@少數(shù)派Matrix 官方微博發(fā)起了一個(gè)自詡為「行為藝術(shù)」的活動(dòng):每天一個(gè)細(xì)節(jié)設(shè)計(jì)。截止目前富蓄,已經(jīng)進(jìn)行了一周剩燥,不管出不出意外都會(huì)繼續(xù)進(jìn)行下去。
每周一立倍,我們會(huì)把發(fā)布在微博的細(xì)節(jié)設(shè)計(jì)進(jìn)行一個(gè)匯總灭红,整理成文。這是第一周的匯總口注,共計(jì) 9 個(gè)細(xì)節(jié)設(shè)計(jì)变擒。
點(diǎn)按屏幕時(shí)的水波紋效果、浮動(dòng)的水珠:Timely
Timely 是一款精致的時(shí)鐘應(yīng)用寝志,像這類小工具娇斑,很難在功能上進(jìn)行創(chuàng)新,因此比拼的就是顏值和細(xì)節(jié)了材部,而 Timely 絕對(duì)稱得上是「小而美」應(yīng)用的一個(gè)代表毫缆。
在應(yīng)用界面,屏幕底部會(huì)時(shí)不時(shí)會(huì)冒出一些水珠乐导,大小不一苦丁,像極了海底水草旁奔向水面的水泡,切換主題時(shí)物臂,水珠也會(huì)隨著變色旺拉。如果你見過 Flyme 的充電界面产上,那對(duì)于這個(gè)小細(xì)節(jié)可能不會(huì)陌生,二者非常相似蛾狗。除此之外晋涣,當(dāng)點(diǎn)按屏幕時(shí)。也有相應(yīng)的水波紋效果淘太。
如果以上兩點(diǎn)打動(dòng)了你姻僧,下載使用后或許還會(huì)更多的細(xì)節(jié),靜態(tài)圖片是完全無法展現(xiàn)它的美的蒲牧。這里賣一個(gè)關(guān)子:它設(shè)置鬧鐘的交互也和常規(guī)鬧鐘大不相同撇贺,具體如何設(shè)置,感興趣的自行下載吧冰抢。
曲線救國松嘶,截圖分享:淘寶
鑒于大家都知道的一個(gè)事實(shí),機(jī)智的淘寶在檢測(cè)到用戶截屏后挎扰,會(huì)彈出一個(gè)頂部橫幅提醒用戶是否要分享給微信翠订、微博(看到分享給微博用戶這里……我承認(rèn)我笑了……)用戶,點(diǎn)擊「是的」遵倦,寶貝信息就會(huì)自動(dòng)復(fù)制到剪貼板中尽超,當(dāng)另外一個(gè)用戶將該內(nèi)容復(fù)制到剪貼板然后進(jìn)入淘寶時(shí),淘寶會(huì)提醒用戶打開該寶貝梧躺,也算是曲線救國了似谁。
不過,鑒于支付寶 9.0 的驚艷改版掠哥,我們有理由相信巩踏!或許不久的未來,淘寶也會(huì)引入社交功能续搀,當(dāng)需要分享時(shí)塞琼,心中默念「分享給小李,分享給小李禁舷,分享給小李」彪杉,小李的淘寶就會(huì)收到提醒「親 ~ 小王給你分享了一個(gè)寶貝,快來查看叭榛了!」
把熒幕形象搬進(jìn)電影票選座:格瓦拉@電影
《滾蛋吧在讶!腫瘤君》是一部立志把觀眾看哭的電影,講述了……
使用 格瓦拉 購買電影票進(jìn)行選座時(shí)霜大,選中的座位會(huì)標(biāo)記為熒幕形象的卡通頭像构哺,吳彥祖、白百合、腫瘤君曙强,讓選座這個(gè)乏味的事情也稍微有趣了一些残拐。
字幕和底欄聯(lián)動(dòng):網(wǎng)易公開課
不知道大家在看視頻時(shí)有沒有遇到這樣一個(gè)痛點(diǎn):當(dāng)我們打開全屏模式但底欄還未隱去時(shí),字幕就活生生的被遮擋住了碟嘴,錯(cuò)過了關(guān)鍵一句溪食,可能就得回調(diào)幾秒,非常影響體驗(yàn)娜扇。下圖為搜狐視頻的截圖:
針對(duì)這種情況错沃,網(wǎng)易公開課會(huì)使字幕會(huì)和底欄進(jìn)行聯(lián)動(dòng),底欄未隱去時(shí)雀瓢,字幕也會(huì)相應(yīng)的上移一段距離枢析,這個(gè)痛點(diǎn)也就解決了。需要說明的是:網(wǎng)易公開課的 網(wǎng)站 和 移動(dòng)端應(yīng)用 均支持這個(gè)特性刃麸。
Chrome 的兩個(gè)小細(xì)節(jié)
Chrome 是很多用戶的默認(rèn)瀏覽器醒叁,但這兩個(gè)細(xì)節(jié)或許有些人還不知道。因?yàn)槠^長泊业,投稿者將它寫成了一篇文章發(fā)在了 Matrix 社區(qū)把沼,閱讀原文:《Chrome 的兩個(gè)小細(xì)節(jié)》。
搖一搖界面:微信
不同性別的用戶吁伺,微信搖一搖界面的手模是不同的饮睬,女性用戶展現(xiàn)的是 Rock 的手勢(shì),不知道這其中有什么深意篮奄。
登錄界面的心理安慰:Readme & bilibili
在 Readme 網(wǎng)站的登錄頁面上续捂,有一個(gè)小貓頭鷹,當(dāng)用戶輸入密碼時(shí)宦搬,這個(gè)貓頭鷹會(huì)閉上眼睛,以表示對(duì)隱私的保護(hù)劫拗,非臣湫#可愛,讓人忍不住在賬號(hào)和密碼輸入框間多切換幾次页慷。
國內(nèi)也有一些應(yīng)用跟進(jìn)了這個(gè)細(xì)節(jié)憔足,Bilibili 就是一個(gè)例子,只不過登錄界面上的吉祥物換成了 B 站的 2233 娘酒繁。
單擊頂欄回到頂部的防誤觸:Instapaper滓彰、Moke、VVebo
單擊頂欄回到頂部幾乎已經(jīng)是標(biāo)配了州袒,在方便快速回到頂部的同時(shí)也增加了誤觸的幾率揭绑,針對(duì)這種情況,Instapaper、墨客他匪、VVebo 都有相應(yīng)的解決辦法菇存。
- Instapaper:回到頂欄后,頁面頂部會(huì)有一個(gè) bar 供用戶選擇是「留在頂部」還是「返回到位置」邦蜜。
- Moke:當(dāng)點(diǎn)擊頂欄回到頂部后依鸥,用戶可以通過搖一搖回到上次瀏覽位置。
- VVebo:點(diǎn)擊頂欄回到頂部悼沈,再次點(diǎn)擊頂欄就會(huì)回到上次瀏覽位置贱迟。
Tab 標(biāo)簽切換也能玩出新花樣:出發(fā)吧
在 出發(fā)吧 這款應(yīng)用中,當(dāng) Tab 標(biāo)簽位于「行程」時(shí)絮供,展示的樣式如下:
當(dāng) Tab 標(biāo)簽位于「我」時(shí)衣吠,展示的樣式如下:
像不像一個(gè)(被砍掉雙臂)的半身雕塑版「大白」?
事實(shí)上杯缺,在之前的版本中蒸播,Tab 標(biāo)簽中的「個(gè)人」更像大白,起碼是有胳膊的......
以上就是第一周的匯總萍肆,共計(jì) 9 個(gè)細(xì)節(jié)設(shè)計(jì)袍榆。有的細(xì)節(jié)設(shè)計(jì)僅僅是養(yǎng)眼,你可以說它是無用的塘揣,但有的細(xì)節(jié)的的確確提高了實(shí)用效率包雀、優(yōu)化了使用體驗(yàn),不管怎樣亲铡,正是因?yàn)檫@些細(xì)節(jié)才写,讓它們不再是一具沒有溫度的行尸走肉。
如果你有好的細(xì)節(jié)設(shè)計(jì)的例子奖蔓,也歡迎投稿 @少數(shù)派Matrix赞草,我們會(huì)在微博正文及每周匯總文章中注明投稿者 ID。
- 關(guān)聯(lián)閱讀:No detail can be too detailed:你不知道的 App 細(xì)節(jié)設(shè)計(jì)(二)
注:本文首發(fā)于少數(shù)派吆鹤,點(diǎn)我 前往原文查看 :-)