注重細節! 那些小處見大的設計細節大集合
一個能滿足用戶任務需要的產品只能算是一個合格的產品,能超出用戶預期的才是一個優秀的產品。
來自早讀課的一篇文章,把beforweb.com上連載翻譯的9篇《那些小處見大的設計細節》呈現給大家。C7210大神絕壁是業界良心典范,大家走過路過不要錯過!

1.Google驗證(Google Authenticator) – 用戶點擊驗證碼后系統會自動對其進行復制(便于后續的粘貼操作)。

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

3.Google Docs – 準備為某段文字添加連接時,系統會基于選中的文字自動提供URL建議。

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

5.MailChimp – 注冊時,如果你填寫的用戶名已經被占用了,系統會問你是否有個邪惡雙胞胎。

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

7.Medium – 在小引用中,選擇一段文字后,出現的上下文工具當中,雙引號圖標只有一半是高亮的;而對大引用來說,這里的高亮狀態是完整的。

8.Turtable.fm – 訂閱方案的選擇,使用了滑塊模式;小猴的表情會隨著你愿意支付的金額而動態的產生變化。

9.Google圖片搜索 – 在加載完整圖片的過程中,縮略圖下方會展示一個進度條。

10.Hipmunk – 如果用戶輸入了過去的時間,會報錯“我們尚未提供時空回朔的旅行服務”。

11.Chec – 直接使用更有意義、更有上下文關聯感的語句來呈現選項(交互選項擁有高亮背景)。

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

13.Google Maps – 會顯示當前地圖當中區域的即時天氣信息。

14.Any.do Cal – 會顯示兩個事件之間的間隔時間。

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

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

17.Close.io – 當你從其他地方直接復制了“John Smith”

18.Podio – 創建新組織時,系統會根據你填寫的組織名稱自動推薦相關的logo供選擇。

19.Litmus – 當你準備取消服務時,頁面中的垃圾桶里會出現你曾經使用Litmus發起過的調研郵件實際截圖。

20.OS X Finder – 在通過“Alt+拖拽”復制一個包含年份數字的文件夾時,新文件夾當中的年份會自動加1。


1.Campaign Monitor – 向賬戶中新增管理員時,確認按鈕當中會自動包含新增的管理員名字,例如“添加Sally”。

2.Last.fm – 在你更新了地區信息之后,系統會自動更新時區和國家信息,并且通過反饋信息向你告知這些信息已經根據新的地區自動更新過了。

3.500px – 照片頁的快捷鍵說明當中,F鍵的圖標上有一個突起樣式,和真實鍵盤的F按鍵相同。

4.Timehop – 當你瀏覽到界面底部時,如果繼續滾屏,就會看到吉祥物小恐龍只穿底褲的樣子。

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

6.Google Calendar – 提示信息條中“撤銷”按鈕會在整個提示條消失之前首先淡出。

7.Pinterest – 如果你曾經pin過某張圖片,那么再次試圖pin它的時候,系統會提示你之前已經在某個畫板中pin過這張圖了。

8.OS X – 當系統檢測到你正在使用沒有觸控功能的鼠標時,每個窗口中都會自動呈現側邊滾動條。

9.Goodreads – 如果你正在瀏覽Web開發或UX方面的書籍,頁面右側就會出現Goodreads自家的相關職位招聘信息。

10.iOS7的控制中心 – 打開手電筒后,其高亮狀態的圖標上,手電筒的開關也是處于“打開”的位置。

11.iOS7 – 鎖屏時,狀態欄上文字與圖標的尺寸比平時更大。

12.iOS7的Safari – “閱讀列表”圖標里的眼鏡變成了喬布斯的經典樣式。

13.Optimizely – 白金會員擁有直接聯系Optimizely CEO的專享特權。

14.Gmail – 在多人郵件中添加新的聯系人之后,TA的名字比其他聯系人的字色要深。

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

16.Projecto – 如果在郵寄地址中留下了英國的地址,系統就會以古板的英國紳士的口吻向你告知進口稅方面的問題。

17.Youtube – 當視頻處于播放狀態時,瀏覽器標簽當中會出現一個代表“播放中”的三角圖標。

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

19.App Store – 如果沒有打分就直接發表評論的話,系統會通過彈出框告知,并在其中直接提供打分功能。

20.Chrome – 當你正在使用語音搜索功能時,瀏覽器標簽當中的favicon會變成一個帶紅點的樣式,表明系統當前正在監聽。


1.Press Café – 鼠標懸停在“營業/打烊”狀態標識上時,氣泡中會顯示距離“打烊/營業”的時間,精確到分鐘。

2.Kayak – 篩選航班信息時,你可以通過點擊某個篩選條件中的“only”來取消選中其他條件,只讓這一條處于選中狀態。

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

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

5.Tumblr – “動態(Activity)”按鈕上的曲線圖是真實數據曲線的縮略版本。

6.Google – 搜索“kerning”時,搜索結果中該單詞的字符間距會變大(確保字母r與n不會被誤讀為m)。

7.GitHub System Status – 頁面的favicon會隨著當前系統狀態的不同而發生變化。

8.Facebook – 訪問自己配偶的頁面時,會看到“TA已與你成婚”。

9.Amazon – Kindle產品頁的照片中,護照與Kindle書上面的文字會根據你所在的地區不同而變化。

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

11.iOS7 – 主屏上的時鐘圖標可以動態的顯示當前實際時間。

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

13.Google Chrome – 用戶準備清除瀏覽數據時,Chrome會首先提示用戶,以后可以使用隱身模式瀏覽網頁,這樣就無需手動清空數據了。

14.PSN – “變形金剛:賽博坦的隕落”游戲的新聞郵件中,如果圖片默認沒有被加載,空缺的部分會拼合成博派的logo。

15.Tumblr – 如果用戶上傳了一張超大寬幅的圖片,Tumblr會自動將文案中的“照片”一詞變為“全景圖(panorama)”。

16.Headline Shirts – 如果用戶在購物車頁面滯留超過45秒,Headline Shirts就會為其打折,折扣會在10分鐘內有效;如果超過10分鐘沒有使用,他們還會送出可供將來使用的優惠碼。

17.Tumblr for Android – 長按“創建”按鈕,可以在照片和文本內容之間選擇。

18.YouTube – Favicon可以動態的體現出“緩沖中”、“播放中”和“暫停播放”的狀態。

19.谷歌地圖iPhone版 – 雙擊地圖之后就可以通過單指來進行縮放操作。

20.IA Writer – 選中一段文字后,底部狀態欄會顯示這段文字相關的統計數據,例如包含的單詞量、字符數量以及閱讀這段文字花費的大致時間。另外,這些統計數字擁有和選中文字相同的背景色,便于在認知上建立關聯。
