60個以小見大的設計細節 (上)

0 評論 7970 瀏覽 8 收藏 10 分鐘

這些內容來自Tumblr的一個博客,LittleBigDetail。那邊的用戶提交了很多Web和App產品中設計用心的小細節,可以說,包括一些精妙的微交互模式,

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

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

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” <john@example.com>這種形式的郵箱信息,并粘貼到Close.io的郵箱地址輸入框中,信息會被自動分割,其中的姓名會被自動填寫到Name輸入框,郵箱則留在郵箱地址輸入框。

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

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

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

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

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

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

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

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

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

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

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

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

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

原文來自:beforweb

60個以小見大的設計細節系列

60個以小見大的設計細節(下篇)

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!