這些內(nèi)容來自Tumblr的一個(gè)博客,Little Big Detail。那邊的用戶提交了很多Web和App產(chǎn)品中設(shè)計(jì)用心的小細(xì)節(jié),可以說,包括一些精妙的微交互模式,一些小小的情感化元素,我很喜歡,于是就挑出一些自己覺得有點(diǎn)意思的,匯總成文,童鞋們感受一下。
1、Google驗(yàn)證
用戶點(diǎn)擊驗(yàn)證碼后系統(tǒng)會(huì)自動(dòng)對其進(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)伸展或收縮,用來提示當(dāng)前閱讀的部分在全文當(dāng)中的位置。
5、MailChimp
注冊時(shí),如果你填寫的用戶名已經(jīng)被占用了,系統(tǒng)會(huì)問你是否有個(gè)邪惡雙胞胎。
6、Chrome
無法找到頁面時(shí),會(huì)提供一個(gè)與你輸入的URL非常相似的正確網(wǎng)址建議。
7、Medium
在小引用中,選擇一段文字后,出現(xiàn)的上下文工具當(dāng)中,雙引號圖標(biāo)只有一半是高亮的;而對大引用來說,這里的高亮狀態(tài)是完整的。
8、Turtable.fm
訂閱方案的選擇,使用了滑塊模式;小猴的表情會(huì)隨著你愿意支付的金額而動(dòng)態(tài)的產(chǎn)生變化。
9、Google圖片搜索
在加載完整圖片的過程中,縮略圖下方會(huì)展示一個(gè)進(jìn)度條。
10、Hipmunk
如果用戶輸入了過去的時(shí)間,會(huì)報(bào)錯(cuò)”我們尚未提供時(shí)空回朔的旅行服務(wù)”。
11、Chec
直接使用更有意義、更有上下文關(guān)聯(lián)感的語句來呈現(xiàn)選項(xiàng)(交互選項(xiàng)擁有高亮背景)。
12、Wikipedia
在文章中點(diǎn)擊引用內(nèi)容時(shí),頁面底部會(huì)展示內(nèi)容來源的相關(guān)信息。
13、Google Maps
會(huì)顯示當(dāng)前地圖當(dāng)中區(qū)域的即時(shí)天氣信息。
14、Any.do Cal
會(huì)顯示兩個(gè)事件之間的間隔時(shí)間。
15、Pinterest
忘記登錄密碼時(shí),收到的密碼重置郵件來自ohno@pinterest.com。
16、Forbes
熱門文章列表中,每個(gè)條目都有白色的背景條,以展示這些文章的受歡迎程度(點(diǎn)擊量)。
17、Close.io
當(dāng)你從其他地方直接復(fù)制了”John Smith” <john@example.com>這種形式的郵箱信息,并粘貼到Close.io的郵箱地址輸入框中,信息會(huì)被自動(dòng)分割,其中的姓名會(huì)被自動(dòng)填寫到Name輸入框,郵箱則留在郵箱地址輸入框。
18、Podio
創(chuàng)建新組織時(shí),系統(tǒng)會(huì)根據(jù)你填寫的組織名稱自動(dòng)推薦相關(guān)的logo供選擇。
19、Litmus
當(dāng)你準(zhǔn)備取消服務(wù)時(shí),頁面中的垃圾桶里會(huì)出現(xiàn)你曾經(jīng)使用Litmus發(fā)起過的調(diào)研郵件實(shí)際截圖。
20、OS X Finder
在通過”Alt+拖拽”復(fù)制一個(gè)包含年份數(shù)字的文件夾時(shí),新文件夾當(dāng)中的年份會(huì)自動(dòng)加1。
21、Campaign Monitor
向賬戶中新增管理員時(shí),確認(rèn)按鈕當(dāng)中會(huì)自動(dòng)包含新增的管理員名字,例如”添加Sally”。
22、Last.fm
在你更新了地區(qū)信息之后,系統(tǒng)會(huì)自動(dòng)更新時(shí)區(qū)和國家信息,并且通過反饋信息向你告知這些信息已經(jīng)根據(jù)新的地區(qū)自動(dòng)更新過了。
23、500px
照片頁的快捷鍵說明當(dāng)中,F(xiàn)鍵的圖標(biāo)上有一個(gè)突起樣式,和真實(shí)鍵盤的F按鍵相同。
24、Timehop
當(dāng)你瀏覽到界面底部時(shí),如果繼續(xù)滾屏,就會(huì)看到吉祥物小恐龍只穿底褲的樣子。
25、Dropbox
當(dāng)你通過某個(gè)鏈接來到一個(gè)已經(jīng)被移除的共享文件夾時(shí),出錯(cuò)提示頁面中的Dropbox logo會(huì)變成糾結(jié)的Escher立方體。
26、Google Calendar
提示信息條中”撤銷”按鈕會(huì)在整個(gè)提示條消失之前首先淡出。
27、Pinterest
如果你曾經(jīng)pin過某張圖片,那么再次試圖pin它的時(shí)候,系統(tǒng)會(huì)提示你之前已經(jīng)在某個(gè)畫板中pin過這張圖了。
28、OS X
當(dāng)系統(tǒng)檢測到你正在使用沒有觸控功能的鼠標(biāo)時(shí),每個(gè)窗口中都會(huì)自動(dòng)呈現(xiàn)側(cè)邊滾動(dòng)條。
29、Goodreads
如果你正在瀏覽Web開發(fā)或UX方面的書籍,頁面右側(cè)就會(huì)出現(xiàn)Goodreads自家的相關(guān)職位招聘信息。
30、iOS7的控制中心
打開手電筒后,其高亮狀態(tài)的圖標(biāo)上,手電筒的開關(guān)也是處于”打開”的位置。
31、iOS7
鎖屏?xí)r,狀態(tài)欄上文字與圖標(biāo)的尺寸比平時(shí)更大。
32、iOS 7 的Safari
“閱讀列表”圖標(biāo)里的眼鏡變成了喬布斯的經(jīng)典樣式。
33、Optimizely
白金會(huì)員擁有直接聯(lián)系Optimizely CEO的專享特權(quán)。
34、Gmail
在多人郵件中添加新的聯(lián)系人之后,TA的名字比其他聯(lián)系人的字色要深。
35、Speaker Deck
在某套幻燈片的縮略圖上橫向移動(dòng)鼠標(biāo),即可按順序一頁一頁的預(yù)覽該幻燈片當(dāng)中的內(nèi)容。
36、Projecto
如果在郵寄地址中留下了英國的地址,系統(tǒng)就會(huì)以古板的英國紳士的口吻向你告知進(jìn)口稅方面的問題。
37、Youtube
當(dāng)視頻處于播放狀態(tài)時(shí),瀏覽器標(biāo)簽當(dāng)中會(huì)出現(xiàn)一個(gè)代表”播放中”的三角圖標(biāo)。
38、Dropbox
當(dāng)你被邀請到一個(gè)新的共享文件夾時(shí),文件夾的圖標(biāo)當(dāng)中會(huì)有一個(gè)微笑的表情。
39、App Store
如果沒有打分就直接發(fā)表評論的話,系統(tǒng)會(huì)通過彈出框告知,并在其中直接提供打分功能。
40、Chrome
當(dāng)你正在使用語音搜索功能時(shí),瀏覽器標(biāo)簽當(dāng)中的favicon會(huì)變成一個(gè)帶紅點(diǎn)的樣式,表明系統(tǒng)當(dāng)前正在監(jiān)聽。
41、Press Café
鼠標(biāo)懸停在”營業(yè)/打烊”狀態(tài)標(biāo)識上時(shí),氣泡中會(huì)顯示距離”打烊/營業(yè)”的時(shí)間,精確到分鐘。
42、Kayak
篩選航班信息時(shí),你可以通過點(diǎn)擊某個(gè)篩選條件中的”only”來取消選中其他條件,只讓這一條處于選中狀態(tài)。
43、Chrome
在頁面上搜索內(nèi)容時(shí),如果搜索結(jié)果所處的位置正好被Chrome的搜索欄遮擋住,那么搜索欄會(huì)自動(dòng)移到旁邊。
44、Gmail
如果郵件需要用戶執(zhí)行某些特定的行為,例如”RSVP(回復(fù)確認(rèn))”、”確認(rèn)訂閱”、”跟蹤包裹”等等,那么用戶可以在收件箱的郵件列表當(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
頁面的favicon會(huì)隨著當(dāng)前系統(tǒng)狀態(tài)的不同而發(fā)生變化。
48、Facebook
訪問自己配偶的頁面時(shí),會(huì)看到”TA已與你成婚”。
49、Amazon Kindle
產(chǎn)品頁的照片中,護(hù)照與Kindle書上面的文字會(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
用戶準(zhǔn)備清除瀏覽數(shù)據(jù)時(shí),Chrome會(huì)首先提示用戶,以后可以使用隱身模式瀏覽網(wǎng)頁,這樣就無需手動(dòng)清空數(shù)據(jù)了。
54、PSN
“變形金剛:賽博坦的隕落”游戲的新聞郵件中,如果圖片默認(rèn)沒有被加載,空缺的部分會(huì)拼合成博派的logo。
55、Tumblr
如果用戶上傳了一張超大寬幅的圖片,Tumblr會(huì)自動(dòng)將文案中的”照片”一詞變?yōu)?rdquo;全景圖(panorama)”。
56、Headline Shirts
如果用戶在購物車頁面滯留超過45秒,Headline Shirts就會(huì)為其打折,折扣會(huì)在10分鐘內(nèi)有效;如果超過10分鐘沒有使用,他們還會(huì)送出可供將來使用的優(yōu)惠碼。
57、Tumblr for Android
長按”創(chuàng)建”按鈕,可以在照片和文本內(nèi)容之間選擇。
58、YouTube
Favicon可以動(dòng)態(tài)的體現(xiàn)出”緩沖中”、”播放中”和”暫停播放”的狀態(tài)。
59、谷歌地圖iPhone版
雙擊地圖之后就可以通過單指來進(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)。