@BeForWeb ：這些內(nèi)容來(lái)自Tumblr的一個(gè)博客，Little Big Detail。那邊的用戶(hù)提交了很多Web和App產(chǎn)品中設(shè)計(jì)用心的小細(xì)節(jié)，可以說(shuō)，包括一些精妙的微交互模式，一些小小的情感化元素，我很喜歡，于是就挑出一些自己覺(jué)得有點(diǎn)意思的，匯總成期，童鞋們感受一下。

說(shuō)到細(xì)節(jié)，Dribbble上的設(shè)計(jì)師都非常有匠人精神。
你可以來(lái)這兒瞧瞧Dribbble上超詳細(xì)的業(yè)界頂級(jí)設(shè)計(jì)師及作品合集

1、Google驗(yàn)證

用戶(hù)點(diǎn)擊驗(yàn)證碼后系統(tǒng)會(huì)自動(dòng)對(duì)其進(jìn)行復(fù)制（便于后續(xù)的粘貼操作）

 

2、Gumroad

聚焦到CVC安全碼字段時(shí)，右上方的信用卡圖標(biāo)會(huì)自動(dòng)翻轉(zhuǎn)并提示安全碼的位置。

 

3、Google Docs

準(zhǔn)備為某段文字添加連接時(shí)，系統(tǒng)會(huì)基于選中的文字自動(dòng)提供URL建議。

 

4、New Republic

頂部固定的標(biāo)題欄當(dāng)中有一條細(xì)紅線(進(jìn)度條)，可以隨著滾屏而自動(dòng)伸展或收縮，用來(lái)提示當(dāng)前閱讀的部分在全文當(dāng)中的位置。

 

5、MailChimp

注冊(cè)時(shí)，如果你填寫(xiě)的用戶(hù)名已經(jīng)被占用了，系統(tǒng)會(huì)問(wèn)你是否有個(gè)邪惡雙胞胎。

 

6、Chrome

無(wú)法找到頁(yè)面時(shí)，會(huì)提供一個(gè)與你輸入的URL非常相似的正確網(wǎng)址建議。

 

7、Medium

在小引用中，選擇一段文字后，出現(xiàn)的上下文工具當(dāng)中，雙引號(hào)圖標(biāo)只有一半是高亮的；而對(duì)大引用來(lái)說(shuō)，這里的高亮狀態(tài)是完整的。

 

8、Turtable.fm

訂閱方案的選擇，使用了滑塊模式；小猴的表情會(huì)隨著你愿意支付的金額而動(dòng)態(tài)的產(chǎn)生變化。

 

9、Google圖片搜索

在加載完整圖片的過(guò)程中，縮略圖下方會(huì)展示一個(gè)進(jìn)度條。

 

10、Hipmunk

如果用戶(hù)輸入了過(guò)去的時(shí)間，會(huì)報(bào)錯(cuò)"我們尚未提供時(shí)空回朔的旅行服務(wù)"。

 

11、Chec

直接使用更有意義、更有上下文關(guān)聯(lián)感的語(yǔ)句來(lái)呈現(xiàn)選項(xiàng)(交互選項(xiàng)擁有高亮背景)。

 

12、Wikipedia

在文章中點(diǎn)擊引用內(nèi)容時(shí)，頁(yè)面底部會(huì)展示內(nèi)容來(lái)源的相關(guān)信息。

 

13、Google Maps

會(huì)顯示當(dāng)前地圖當(dāng)中區(qū)域的即時(shí)天氣信息。

 

14、Any.do Cal

會(huì)顯示兩個(gè)事件之間的間隔時(shí)間。

 

15、Pinterest

忘記登錄密碼時(shí)，收到的密碼重置郵件來(lái)自ohno@pinterest.com。

 

16、Forbes

熱門(mén)文章列表中，每個(gè)條目都有白色的背景條，以展示這些文章的受歡迎程度(點(diǎn)擊量)。

 

17、Close.io

當(dāng)你從其他地方直接復(fù)制了"John Smith" <john@example.com>這種形式的郵箱信息，并粘貼到Close.io的郵箱地址輸入框中，信息會(huì)被自動(dòng)分割，其中的姓名會(huì)被自動(dòng)填寫(xiě)到Name輸入框，郵箱則留在郵箱地址輸入框。

 

18、Podio

創(chuàng)建新組織時(shí)，系統(tǒng)會(huì)根據(jù)你填寫(xiě)的組織名稱(chēng)自動(dòng)推薦相關(guān)的logo供選擇。

 

19、Litmus

當(dāng)你準(zhǔn)備取消服務(wù)時(shí)，頁(yè)面中的垃圾桶里會(huì)出現(xiàn)你曾經(jīng)使用Litmus發(fā)起過(guò)的調(diào)研郵件實(shí)際截圖。

 

20、OS X Finder

在通過(guò)"Alt+拖拽"復(fù)制一個(gè)包含年份數(shù)字的文件夾時(shí)，新文件夾當(dāng)中的年份會(huì)自動(dòng)加1。

 

21、Campaign Monitor

向賬戶(hù)中新增管理員時(shí)，確認(rèn)按鈕當(dāng)中會(huì)自動(dòng)包含新增的管理員名字，例如"添加Sally"。

 

22、Last.fm

在你更新了地區(qū)信息之后，系統(tǒng)會(huì)自動(dòng)更新時(shí)區(qū)和國(guó)家信息，并且通過(guò)反饋信息向你告知這些信息已經(jīng)根據(jù)新的地區(qū)自動(dòng)更新過(guò)了。

 

23、500px

照片頁(yè)的快捷鍵說(shuō)明當(dāng)中，F(xiàn)鍵的圖標(biāo)上有一個(gè)突起樣式，和真實(shí)鍵盤(pán)的F按鍵相同。

 

24、Timehop

當(dāng)你瀏覽到界面底部時(shí)，如果繼續(xù)滾屏，就會(huì)看到吉祥物小恐龍只穿底褲的樣子。

 

25、Dropbox

當(dāng)你通過(guò)某個(gè)鏈接來(lái)到一個(gè)已經(jīng)被移除的共享文件夾時(shí)，出錯(cuò)提示頁(yè)面中的Dropbox logo會(huì)變成糾結(jié)的Escher立方體。

 

26、Google Calendar

提示信息條中"撤銷(xiāo)"按鈕會(huì)在整個(gè)提示條消失之前首先淡出。

 

27、Pinterest

如果你曾經(jīng)pin過(guò)某張圖片，那么再次試圖pin它的時(shí)候，系統(tǒng)會(huì)提示你之前已經(jīng)在某個(gè)畫(huà)板中pin過(guò)這張圖了。

 

28、OS X

當(dāng)系統(tǒng)檢測(cè)到你正在使用沒(méi)有觸控功能的鼠標(biāo)時(shí)，每個(gè)窗口中都會(huì)自動(dòng)呈現(xiàn)側(cè)邊滾動(dòng)條。

 

29、Goodreads

如果你正在瀏覽Web開(kāi)發(fā)或UX方面的書(shū)籍，頁(yè)面右側(cè)就會(huì)出現(xiàn)Goodreads自家的相關(guān)職位招聘信息。

 

30、iOS7的控制中心

打開(kāi)手電筒后，其高亮狀態(tài)的圖標(biāo)上，手電筒的開(kāi)關(guān)也是處于"打開(kāi)"的位置。

 

31、iOS7

鎖屏?xí)r，狀態(tài)欄上文字與圖標(biāo)的尺寸比平時(shí)更大。

 

32、iOS 7 的Safari

"閱讀列表"圖標(biāo)里的眼鏡變成了喬布斯的經(jīng)典樣式。

 

33、Optimizely

白金會(huì)員擁有直接聯(lián)系Optimizely CEO的專(zhuān)享特權(quán)。

 

34、Gmail

在多人郵件中添加新的聯(lián)系人之后，TA的名字比其他聯(lián)系人的字色要深。

 

35、Speaker Deck

在某套幻燈片的縮略圖上橫向移動(dòng)鼠標(biāo)，即可按順序一頁(yè)一頁(yè)的預(yù)覽該幻燈片當(dāng)中的內(nèi)容。

 

36、Projecto

如果在郵寄地址中留下了英國(guó)的地址，系統(tǒng)就會(huì)以古板的英國(guó)紳士的口吻向你告知進(jìn)口稅方面的問(wèn)題。

 

37、Youtube

當(dāng)視頻處于播放狀態(tài)時(shí)，瀏覽器標(biāo)簽當(dāng)中會(huì)出現(xiàn)一個(gè)代表"播放中"的三角圖標(biāo)。

 

38、Dropbox

當(dāng)你被邀請(qǐng)到一個(gè)新的共享文件夾時(shí)，文件夾的圖標(biāo)當(dāng)中會(huì)有一個(gè)微笑的表情。

 

39、App Store

如果沒(méi)有打分就直接發(fā)表評(píng)論的話，系統(tǒng)會(huì)通過(guò)彈出框告知，并在其中直接提供打分功能。

 

40、Chrome

當(dāng)你正在使用語(yǔ)音搜索功能時(shí)，瀏覽器標(biāo)簽當(dāng)中的favicon會(huì)變成一個(gè)帶紅點(diǎn)的樣式，表明系統(tǒng)當(dāng)前正在監(jiān)聽(tīng)。

 

41、Press Café

鼠標(biāo)懸停在"營(yíng)業(yè)/打烊"狀態(tài)標(biāo)識(shí)上時(shí)，氣泡中會(huì)顯示距離"打烊/營(yíng)業(yè)"的時(shí)間，精確到分鐘。

 

42、Kayak

篩選航班信息時(shí)，你可以通過(guò)點(diǎn)擊某個(gè)篩選條件中的"only"來(lái)取消選中其他條件，只讓這一條處于選中狀態(tài)。

 

43、Chrome

在頁(yè)面上搜索內(nèi)容時(shí)，如果搜索結(jié)果所處的位置正好被Chrome的搜索欄遮擋住，那么搜索欄會(huì)自動(dòng)移到旁邊。

 

44、Gmail

如果郵件需要用戶(hù)執(zhí)行某些特定的行為，例如"RSVP(回復(fù)確認(rèn))"、"確認(rèn)訂閱"、"跟蹤包裹"等等，那么用戶(hù)可以在收件箱的郵件列表當(dāng)中直接完成相關(guān)的確認(rèn)操作。

 

45、Tumblr

"動(dòng)態(tài)(Activity)"按鈕上的曲線圖是真實(shí)數(shù)據(jù)曲線的縮略版本。

 

46、Google

搜索"kerning"時(shí)，搜索結(jié)果中該單詞的字符間距會(huì)變大(確保字母r與n不會(huì)被誤讀為m)。

 

47、GitHub System Status

頁(yè)面的favicon會(huì)隨著當(dāng)前系統(tǒng)狀態(tài)的不同而發(fā)生變化。

 

48、Facebook

訪問(wèn)自己配偶的頁(yè)面時(shí)，會(huì)看到"TA已與你成婚"。

 

49、Amazon Kindle

產(chǎn)品頁(yè)的照片中，護(hù)照與Kindle書(shū)上面的文字會(huì)根據(jù)你所在的地區(qū)不同而變化。

 

50、Google Docs

當(dāng)前文檔的匿名瀏覽者會(huì)被分配到不同的動(dòng)物名字與圖標(biāo)。

 

51、iOS7

主屏上的時(shí)鐘圖標(biāo)可以動(dòng)態(tài)的顯示當(dāng)前實(shí)際時(shí)間。

 

52、iOS7

天朝版本的iOS7官方介紹視頻中，Twitter和Facebook的圖標(biāo)被替換為新浪微博和騰訊微博。

 

53、Google Chrome

用戶(hù)準(zhǔn)備清除瀏覽數(shù)據(jù)時(shí)，Chrome會(huì)首先提示用戶(hù)，以后可以使用隱身模式瀏覽網(wǎng)頁(yè)，這樣就無(wú)需手動(dòng)清空數(shù)據(jù)了。

 

54、PSN

"變形金剛：賽博坦的隕落"游戲的新聞郵件中，如果圖片默認(rèn)沒(méi)有被加載，空缺的部分會(huì)拼合成博派的logo。

 

55、Tumblr

如果用戶(hù)上傳了一張超大寬幅的圖片，Tumblr會(huì)自動(dòng)將文案中的"照片"一詞變?yōu)?全景圖(panorama)"。

 

56、Headline Shirts

如果用戶(hù)在購(gòu)物車(chē)頁(yè)面滯留超過(guò)45秒，Headline Shirts就會(huì)為其打折，折扣會(huì)在10分鐘內(nèi)有效；如果超過(guò)10分鐘沒(méi)有使用，他們還會(huì)送出可供將來(lái)使用的優(yōu)惠碼。

 

57、Tumblr for Android

長(zhǎng)按"創(chuàng)建"按鈕，可以在照片和文本內(nèi)容之間選擇。

 

58、YouTube

Favicon可以動(dòng)態(tài)的體現(xiàn)出"緩沖中"、"播放中"和"暫停播放"的狀態(tài)。

 

59、谷歌地圖iPhone版

雙擊地圖之后就可以通過(guò)單指來(lái)進(jìn)行縮放操作。

 

60、IA Writer

選中一段文字后，底部狀態(tài)欄會(huì)顯示這段文字相關(guān)的統(tǒng)計(jì)數(shù)據(jù)，例如包含的單詞量、字符數(shù)量以及閱讀這段文字花費(fèi)的大致時(shí)間。另外，這些統(tǒng)計(jì)數(shù)字擁有和選中文字相同的背景色，便于在認(rèn)知上建立關(guān)聯(lián).

 

原文地址：beforweb
作者：C7210

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量61萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：