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

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

1、Google驗證

用戶點擊驗證碼后系統(tǒng)會自動對其進行復制（便于后續(xù)的粘貼操作）

 

2、Gumroad

聚焦到CVC安全碼字段時，右上方的信用卡圖標會自動翻轉并提示安全碼的位置。

 

3、Google Docs

準備為某段文字添加連接時，系統(tǒng)會基于選中的文字自動提供URL建議。

 

4、New Republic

頂部固定的標題欄當中有一條細紅線(進度條)，可以隨著滾屏而自動伸展或收縮，用來提示當前閱讀的部分在全文當中的位置。

 

5、MailChimp

注冊時，如果你填寫的用戶名已經被占用了，系統(tǒng)會問你是否有個邪惡雙胞胎。

 

6、Chrome

無法找到頁面時，會提供一個與你輸入的URL非常相似的正確網址建議。

 

7、Medium

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

 

8、Turtable.fm

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

 

9、Google圖片搜索

在加載完整圖片的過程中，縮略圖下方會展示一個進度條。

 

10、Hipmunk

如果用戶輸入了過去的時間，會報錯"我們尚未提供時空回朔的旅行服務"。

 

11、Chec

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

 

12、Wikipedia

在文章中點擊引用內容時，頁面底部會展示內容來源的相關信息。

 

13、Google Maps

會顯示當前地圖當中區(qū)域的即時天氣信息。

 

14、Any.do Cal

會顯示兩個事件之間的間隔時間。

 

15、Pinterest

忘記登錄密碼時，收到的密碼重置郵件來自ohno@pinterest.com。

 

16、Forbes

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

 

17、Close.io

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

 

18、Podio

創(chuàng)建新組織時，系統(tǒng)會根據(jù)你填寫的組織名稱自動推薦相關的logo供選擇。

 

19、Litmus

當你準備取消服務時，頁面中的垃圾桶里會出現(xiàn)你曾經使用Litmus發(fā)起過的調研郵件實際截圖。

 

20、OS X Finder

在通過"Alt+拖拽"復制一個包含年份數(shù)字的文件夾時，新文件夾當中的年份會自動加1。

 

21、Campaign Monitor

向賬戶中新增管理員時，確認按鈕當中會自動包含新增的管理員名字，例如"添加Sally"。

 

22、Last.fm

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

 

23、500px

照片頁的快捷鍵說明當中，F(xiàn)鍵的圖標上有一個突起樣式，和真實鍵盤的F按鍵相同。

 

24、Timehop

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

 

25、Dropbox

當你通過某個鏈接來到一個已經被移除的共享文件夾時，出錯提示頁面中的Dropbox logo會變成糾結的Escher立方體。

 

26、Google Calendar

提示信息條中"撤銷"按鈕會在整個提示條消失之前首先淡出。

 

27、Pinterest

如果你曾經pin過某張圖片，那么再次試圖pin它的時候，系統(tǒng)會提示你之前已經在某個畫板中pin過這張圖了。

 

28、OS X

當系統(tǒng)檢測到你正在使用沒有觸控功能的鼠標時，每個窗口中都會自動呈現(xiàn)側邊滾動條。

 

29、Goodreads

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

 

30、iOS7的控制中心

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

 

31、iOS7

鎖屏時，狀態(tài)欄上文字與圖標的尺寸比平時更大。

 

32、iOS 7 的Safari

"閱讀列表"圖標里的眼鏡變成了喬布斯的經典樣式。

 

33、Optimizely

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

 

34、Gmail

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

 

35、Speaker Deck

在某套幻燈片的縮略圖上橫向移動鼠標，即可按順序一頁一頁的預覽該幻燈片當中的內容。

 

36、Projecto

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

 

37、Youtube

當視頻處于播放狀態(tài)時，瀏覽器標簽當中會出現(xiàn)一個代表"播放中"的三角圖標。

 

38、Dropbox

當你被邀請到一個新的共享文件夾時，文件夾的圖標當中會有一個微笑的表情。

 

39、App Store

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

 

40、Chrome

當你正在使用語音搜索功能時，瀏覽器標簽當中的favicon會變成一個帶紅點的樣式，表明系統(tǒng)當前正在監(jiān)聽。

 

41、Press Café

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

 

42、Kayak

篩選航班信息時，你可以通過點擊某個篩選條件中的"only"來取消選中其他條件，只讓這一條處于選中狀態(tài)。

 

43、Chrome

在頁面上搜索內容時，如果搜索結果所處的位置正好被Chrome的搜索欄遮擋住，那么搜索欄會自動移到旁邊。

 

44、Gmail

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

 

45、Tumblr

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

 

46、Google

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

 

47、GitHub System Status

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

 

48、Facebook

訪問自己配偶的頁面時，會看到"TA已與你成婚"。

 

49、Amazon Kindle

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

 

50、Google Docs

當前文檔的匿名瀏覽者會被分配到不同的動物名字與圖標。

 

51、iOS7

主屏上的時鐘圖標可以動態(tài)的顯示當前實際時間。

 

52、iOS7

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

 

53、Google Chrome

用戶準備清除瀏覽數(shù)據(jù)時，Chrome會首先提示用戶，以后可以使用隱身模式瀏覽網頁，這樣就無需手動清空數(shù)據(jù)了。

 

54、PSN

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

 

55、Tumblr

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

 

56、Headline Shirts

如果用戶在購物車頁面滯留超過45秒，Headline Shirts就會為其打折，折扣會在10分鐘內有效；如果超過10分鐘沒有使用，他們還會送出可供將來使用的優(yōu)惠碼。

 

57、Tumblr for Android

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

 

58、YouTube

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

 

59、谷歌地圖iPhone版

雙擊地圖之后就可以通過單指來進行縮放操作。

 

60、IA Writer

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

 

原文地址：beforweb
作者：C7210

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