Categories
Web Design

Refactoring UI 讀書摘要

Refactoring UI: The Book 蠻不錯的一本 PDF 小書,講網頁的 UI 設計。特別是前幾章講 Hierarchy, Layout, Text 的部分,工程師也很適合了解一下。

Starting from Scratch

  • 先決定好功能、再畫圖
  • 先畫草圖,細節之後補
  • Agile way 設計
  • 選擇 Personality: 字型、顏色、圓角、語言
  • 選擇要有 system 限制:顏色、大小…etc

Hierarchy

  • 元素的階層很重要,除了用大小之外,還有很多方式可以看出有階層
  • font-weight 跟顏色,例如 主內容深色、次內容灰色、更淺的灰放第三層
  • 有顏色的背景上,不要用灰色字,應用背景色的淺色版來做 次內容
  • 要加強的內容,除了本身顏色或大小之外,也可以弱化其他部分,例如 tabs 變淺
  • 資料不一定都需要有 label ,如果 context 本身或加上句子就不需要了。例外是在規格表上則需要 label。
  • h1 不一定要最大,要看 app 的需求
  • weight 跟 對比的平衡: icon 通常沒 weight,只能降低對比。匡線若淺色太不明顯,可以 weight 粗一點
  • 按鈕設計: 次要按鈕可用低對比顏色、不重要按鈕只用連結就好了

Layout & Space

  • 留白很重要,秘訣是先多留空,再砍空白。而不是先不留白,再加空白
  • spacing 要有系統: 4,8,12,16,24,32,48,64,96, 128,192,256,384,512,640,748
  • 不需要填滿整個螢幕。如果內容就沒這個多,不如內容就限制 max-width,這樣比較好閱讀。hedaer 沒關係仍可以 full-width
    • 也可以用 RWD 雙欄設計
  • Grid 系統不是萬能,例如側欄 sidebar 內容就沒這個多,應該固定寬度,而不是用浮動
  • 元素的大小在桌機、手機上不是每個都 Scale 一樣的。例如標題 2.5em 在桌機OK、手機上就太大了。按鈕大小跟裡面的字型大小也有一樣的考量。
  • 用上下留白不同來區隔內容

Text

  • 文字大小要有系統,建議 12, 14, 16, 18, 20, 24, 30, 36 ,48 ,60, 72px
    • 不要用 em 你會得到小數px,用 px 或 rem,
  • 文章的文字寬度要限制,建議 20-35em (45~75 characters)。即使文字混著圖片或其他元件也一樣。
  • 字型大小不同的文字,應用 baseline 對齊
  • line-height 行高有比例的,一般來說是 1.5,但不是絕對的:
    • 內容比較寬、可以考慮用 2 倍
    • 字型大小越小,則需要大一點例如 1.75 來讓眼睛能看到。如果字很大例如標題,則 1 倍就夠清楚區隔了
  • 不是說連結都需要有顏色: 在幾乎每個都可以點的內容之中,可以用不同字型、深一點的顏色、或是一點 weight、或 underline、或 hover 變色或 underline 即可
  • 文字對齊一般是 置左
    • 置中對標題或短字很好,但長文章不要置中。還是想要置中的話,可以把字改短到兩行。
    • 數字要置右
    • 模仿印刷設計(雜誌、新聞等)的 justified text 要用 hyphenate,不然會留白會很奇怪
  • Letter spacing 文字間距。通常字型設計的時候有偏好適合標題或內文、原本適合內文字型拿來放標題,會太寬,要調小
    • 原本適合標題的字型,通常不適合內文,即使調大間距
    • 全部大小的字,文件間距適合大一點

Color

  • Hex, RGB 常見,但推薦用 HSL
  • 光靠 color palette 選幾個顏色是不夠的,你需要很多顏色,分成
    • 灰色,用在文字、背景、表單等等: 8-10 種
    • 主色調: 1~2種,深淺 5-10種,用在 active 導覽元素、overall look
    • 強調色: 黃色、粉紅、藍綠色 來強調刪除、緊告、成功訊息
  • 是先定義好 shades,先找到最深、最淺
  • 別讓亮度蓋過飽和度。顏色的感知亮度 != HSL 的亮度
  • 灰色不一定要純灰,加上顏色飽和度會更cool
  • 親和力設計不代表會很醜
  • 不要只依賴顏色,可以加上 icon 或是 contrast,照顧色盲用戶

Depth

  • 如何設計浮起或凹下的元素
  • 用陰影傳達浮起要注意: 小陰影for按鈕、中陰影for dropdown、大陰影 for modal dialog。設計陰影系統,五種就好。
    • 陰影可以搭配互動,例如用戶點擊按鈕、拖拉
  • 兩層陰影效果
  • flat designs 不用陰影也可以創造深度,用跟背景顏色的深淺差異、或是 solid 陰影線
  • 用圖層重疊的方式也可以創造深度

Images

  • 用好照片: 請專業拍、或是買圖庫
  • 如何拯救設計標題文字在圖片時,文字看不清楚: 圖片加黑色半透明、或是降低圖片對比、或是單色調圖片、或是文字加陰影
  • 東西有大小 : 不要放大 icon、不要縮小 screenshot (可截圖 smaller screen 或 partial,或是移除文字用示意圖)、不要縮小 icon (for favicon)
  • 小心用戶上傳的內容: 控制大小比例裁切、小心 avatar 背景,例如剛好白色跟背景一樣 (可加上 box 陰影 或半透明匡線)

Touches

  • 可以讓預設樣式更有設計感,例如 bullets 改用 icon、blockquote 加上 quote 視覺、特別 link 加上特別樣式、表單的 checkbox, radio buttons 客製化
  • 用簡單的顏色 border 就可以加強重點,例如 上匡線、active navigation 的下匡線、警告的左匡線、layout 上匡線等等
  • 設計太平的話,可以裝飾背景加上顏色或 patterns 或特別圖片,特別是 panel
  • 設計 empty state
  • 表格匡線 borders 用少一點: 可用不同的背景色、加上額外的間隔,就可以拿到 border 線
  • 跳出固定思維:
    • dropdown 可以分欄、加上文字描述跟顏色 icon
    • 表格如果不需要排序,可以加上 第二列文字、可以有圖片、顏色label
    • radio button 可以變成 button groups 按鈕

Leveling Up

  • 觀察別人的設計
  • 重建自己的 UI

Leave a Reply

Your email address will not be published. Required fields are marked *