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