• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析60個以小見大的設計細節心得




    詳細解析60個以小見大的設計細節心得

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

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


    設計理論教學開始

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

    1、Google驗證

    用戶點擊驗證碼后系統會自動對其進行複製(便於後續的粘貼操作)

    詳細解析60個以小見大的設計細節心得

    2、Gumroad

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

    詳細解析60個以小見大的設計細節心得

    3、Google Docs

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

    詳細解析60個以小見大的設計細節心得

    4、New Republic

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

    詳細解析60個以小見大的設計細節心得

    5、MailChimp

    註冊時,如果你填寫的用戶名已經被佔用了,系統會問你是否有個邪惡雙胞胎。

    詳細解析60個以小見大的設計細節心得

    6、Chrome

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

    詳細解析60個以小見大的設計細節心得

    7、Medium

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

    詳細解析60個以小見大的設計細節心得

    8、Turtable.fm

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

    詳細解析60個以小見大的設計細節心得

    9、Google圖片搜索

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

    詳細解析60個以小見大的設計細節心得

    10、Hipmunk

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

    詳細解析60個以小見大的設計細節心得

    11、Chec

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

    詳細解析60個以小見大的設計細節心得

    12、Wikipedia

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

    詳細解析60個以小見大的設計細節心得

    13、Google Maps

    會顯示當前地圖當中區域的即時天氣信息。

    詳細解析60個以小見大的設計細節心得

    14、Any.do Cal

    會顯示兩個事件之間的間隔時間。

    詳細解析60個以小見大的設計細節心得

    15、Pinterest

    忘記登錄密碼時,收到的密碼重置郵件來自[email protected]

    詳細解析60個以小見大的設計細節心得

    16、Forbes

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

    詳細解析60個以小見大的設計細節心得

    17、Close.io

    當你從其他地方直接複製了”John Smith” 這種形式的郵箱信息,並粘貼到Close.io的郵箱地址輸入框中,信息會被自動分割,其中的姓名會被自動填寫到Name輸入框,郵箱則留在郵箱地址輸入框。

    詳細解析60個以小見大的設計細節心得

    18、Podio

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

    詳細解析60個以小見大的設計細節心得

    19、Litmus

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

    詳細解析60個以小見大的設計細節心得

    20、OS X Finder

    在通過”Alt+拖拽”複製一個包含年份數字的文件夾時,新文件夾當中的年份會自動加1。

    詳細解析60個以小見大的設計細節心得

    21、Campaign Monitor

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

    詳細解析60個以小見大的設計細節心得

    22、Last.fm

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

    詳細解析60個以小見大的設計細節心得

    23、500px

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

    詳細解析60個以小見大的設計細節心得

    24、Timehop

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

    詳細解析60個以小見大的設計細節心得

    25、Dropbox

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

    詳細解析60個以小見大的設計細節心得

    26、Google Calendar

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

    詳細解析60個以小見大的設計細節心得

    27、Pinterest

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

    詳細解析60個以小見大的設計細節心得

    28、OS X

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

    詳細解析60個以小見大的設計細節心得

    29、Goodreads

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

    詳細解析60個以小見大的設計細節心得

    30、iOS7的控制中心

    打開手電筒后,其高亮狀態的圖標上,手電筒的開關也是處於”打開”的位置。

    詳細解析60個以小見大的設計細節心得

    31、iOS7

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

    詳細解析60個以小見大的設計細節心得

    32、iOS 7 的Safari

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

    詳細解析60個以小見大的設計細節心得

    33、Optimizely

    白金會員擁有直接聯繫Optimizely CEO的專享特權。

    詳細解析60個以小見大的設計細節心得

    34、Gmail

    在多人郵件中添加新的聯繫人之後,TA的名字比其他聯繫人的字色要深。

    詳細解析60個以小見大的設計細節心得

    35、Speaker Deck

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

    詳細解析60個以小見大的設計細節心得

    36、Projecto

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

    詳細解析60個以小見大的設計細節心得

    37、Youtube

    當視頻處於播放狀態時,瀏覽器標籤當中會出現一個代表”播放中”的三角圖標。

    詳細解析60個以小見大的設計細節心得

    38、Dropbox

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

    詳細解析60個以小見大的設計細節心得

    39、App Store

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

    詳細解析60個以小見大的設計細節心得

    40、Chrome

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

    詳細解析60個以小見大的設計細節心得

    41、Press Café

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

    詳細解析60個以小見大的設計細節心得

    42、Kayak

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

    詳細解析60個以小見大的設計細節心得

    43、Chrome

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

    詳細解析60個以小見大的設計細節心得

    44、Gmail

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

    詳細解析60個以小見大的設計細節心得

    45、Tumblr

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

    詳細解析60個以小見大的設計細節心得

    46、Google

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

    詳細解析60個以小見大的設計細節心得

    47、GitHub System Status

    頁面的favicon會隨着當前系統狀態的不同而發生變化。

    詳細解析60個以小見大的設計細節心得

    48、Facebook

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

    詳細解析60個以小見大的設計細節心得

    49、Amazon Kindle

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

    詳細解析60個以小見大的設計細節心得

    50、Google Docs

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

    詳細解析60個以小見大的設計細節心得

    51、iOS7

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

    詳細解析60個以小見大的設計細節心得

    52、iOS7

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

    詳細解析60個以小見大的設計細節心得

    53、Google Chrome

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

    詳細解析60個以小見大的設計細節心得

    54、PSN

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

    詳細解析60個以小見大的設計細節心得

    55、Tumblr

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

    詳細解析60個以小見大的設計細節心得

    56、Headline Shirts

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

    詳細解析60個以小見大的設計細節心得

    57、Tumblr for Android

    長按”創建”按鈕,可以在照片和文本內容之間選擇。

    詳細解析60個以小見大的設計細節心得

    58、YouTube

    Favicon可以動態的體現出”緩衝中”、”播放中”和”暫停播放”的狀態。

    詳細解析60個以小見大的設計細節心得

    59、谷歌地圖iPhone版

    雙擊地圖之後就可以通過單指來進行縮放操作。

    詳細解析60個以小見大的設計細節心得

    60、IA Writer

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

    詳細解析60個以小見大的設計細節心得

    — —

    文章永久連結為: 詳細解析60個以小見大的設計細節心得