Zi 字媒體

詳細解析60個以小見大的設計細節心得 這一次的教學是屬於設計理論領域中的設計理論的相關教學。 文章出處是來自優設的設計理論類文章，寫教學的作者是佚名，感謝佚名提供設計理論的實作教學。 教學大綱: 這些內容來自Tumblr的一個博客，Little Big Detail。那邊的用戶提交了很多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 忘記登錄密碼時，收到的密碼重置郵件來自[email protected]。 16、Forbes 熱門文章列表中，每個條目都有白色的背景條，以展示這些文章的受歡迎程度(點擊量)。 17、Close.io 當你從其他地方直接複製了”John Smith” 這種形式的郵箱信息，並粘貼到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的控制中心 打開手電筒后，其高亮狀態的圖標上，手電筒的開關也是處於”打開”的位置。 31、iOS7 鎖屏時，狀態欄上文字與圖標的尺寸比平時更大。 32、iOS 7 的Safari “閱讀列表”圖標里的眼鏡變成了喬布斯的經典樣式。 33、Optimizely 白金會員擁有直接聯繫Optimizely CEO的專享特權。 34、Gmail 在多人郵件中添加新的聯繫人之後，TA的名字比其他聯繫人的字色要深。 35、Speaker Deck 在某套幻燈片的縮略圖上橫向移動鼠標，即可按順序一頁一頁的預覽該幻燈片當中的內容。 36、Projecto 如果在郵寄地址中留下了英國的地址，系統就會以古板的英國紳士的口吻向你告知進口稅方面的問題。 37、Youtube 當視頻處於播放狀態時，瀏覽器標籤當中會出現一個代表”播放中”的三角圖標。 38、Dropbox 當你被邀請到一個新的共享文件夾時，文件夾的圖標當中會有一個微笑的表情。 39、App Store 如果沒有打分就直接發表評論的話，系統會通過彈出框告知，並在其中直接提供打分功能。 40、Chrome 當你正在使用語音搜索功能時，瀏覽器標籤當中的favicon會變成一個帶紅點的樣式，表明系統當前正在監聽。 41、Press Café 鼠標懸停在”營業/打烊”狀態標識上時，氣泡中會顯示距離”打烊/營業”的時間，精確到分鐘。 42、Kayak 篩選航班信息時，你可以通過點擊某個篩選條件中的”only”來取消選中其他條件，只讓這一條處於選中狀態。 43、Chrome 在頁面上搜索內容時，如果搜索結果所處的位置正好被Chrome的搜索欄遮擋住，那麼搜索欄會自動移到旁邊。 44、Gmail 如果郵件需要用戶執行某些特定的行為，例如”RSVP(回復確認)”、”確認訂閱”、”跟蹤包裹”等等，那麼用戶可以在收件箱的郵件列表當中直接完成相關的確認操作。 45、Tumblr “動態(Activity)”按鈕上的曲線圖是真實數據曲線的縮略版本。 46、Google 搜索”kerning”時，搜索結果中該單詞的字符間距會變大(確保字母r與n不會被誤讀為m)。 47、GitHub System Status 頁面的favicon會隨着當前系統狀態的不同而發生變化。 48、Facebook 訪問自己配偶的頁面時，會看到”TA已與你成婚”。 49、Amazon Kindle 產品頁的照片中，護照與Kindle書上面的文字會根據你所在的地區不同而變化。 50、Google Docs 當前文檔的匿名瀏覽者會被分配到不同的動物名字與圖標。 51、iOS7 主屏上的時鐘圖標可以動態的顯示當前實際時間。 52、iOS7 天朝版本的iOS7官方介紹視頻中，Twitter和Facebook的圖標被替換為新浪微博和騰訊微博。 53、Google Chrome 用戶準備清除瀏覽數據時，Chrome會首先提示用戶，以後可以使用隱身模式瀏覽網頁，這樣就無需手動清空數據了。 54、PSN “變形金剛：賽博坦的隕落”遊戲的新聞郵件中，如果圖片默認沒有被加載，空缺的部分會拼合成博派的logo。 55、Tumblr 如果用戶上傳了一張超大寬幅的圖片，Tumblr會自動將文案中的”照片”一詞變為”全景圖(panorama)”。 56、Headline Shirts 如果用戶在購物車頁面滯留超過45秒，Headline Shirts就會為其打折，折扣會在10分鐘內有效;如果超過10分鐘沒有使用，他們還會送出可供將來使用的優惠碼。 57、Tumblr for Android 長按”創建”按鈕，可以在照片和文本內容之間選擇。 58、YouTube Favicon可以動態的體現出”緩衝中”、”播放中”和”暫停播放”的狀態。 59、谷歌地圖iPhone版 雙擊地圖之後就可以通過單指來進行縮放操作。 60、IA Writer 選中一段文字后，底部狀態欄會顯示這段文字相關的統計數據，例如包含的單詞量、字符數量以及閱讀這段文字花費的大致時間。另外，這些統計數字擁有和選中文字相同的背景色，便於在認知上建立關聯. –本文轉載自 http://www.missyuan.net 教學網 — 文章永久連結為: 詳細解析60個以小見大的設計細節心得