給開發人看的UI設計

• 🖼?序言
• 🎨 一、背景
• • 1. 想做一個好的作品
  • 2. 沒有專業UI
• 🧵二、功能導向
• • 1. 設計中最重要的事
  • 2. 例子闡述
  • 2. 簡約設計
  • 3. 設計簡單的、完整的功能
• 🧶三、設計原則
• • 1. 層級
  • • （1）層級是什么
    • （2）舉例闡述
  • 2. 一致性
  • • （1）定義
    • （2）舉例闡述
    • （3）總結
  • 3. 番外 - 《寫給大家看的設計書》
• 🧷四、設計體系
• • 1. 布局
  • • （1）居中放
    • （2）多列布局
  • 2. 間距
  • • （1）間距的定義
    • （2）間距的一些規范
    • • 1）間距——選項
      • 2）間距——多留白些
      • 3）間距——表達關聯關系
  • 3. 文字
  • • （1）文字的定義
    • （2）文字的一些規范
    • • 1）文字——選項設計
      • 2）文字——對齊
      • 3）文字——行高
  • 4. 色彩
  • • （1）顏色選項——灰色
    • （2）顏色選項——主題色
    • （3）顏色選項——功能色
    • （4）使用色盤
    • （5）使用顏色的注意事項
  • 5. 深度
  • • （1）例子闡述
    • （2）陰影選項
• 🐾五、實用技巧
• • 1. 圖片上的層級
  • • （1）增加蒙層
    • （2）給文字加陰影
  • 2. 用戶頭像
  • 3. 強調線
• 🖌?六、資源
• • 1. 譯作推薦
  • 2. 書籍推薦
  • 3. tailwindcss
• ??七、結束語
• 彩蛋 One More Thing
• • （：往期推薦
  • （：番外篇

🖼?序言

對于開發人來說，不單單要會寫代碼，有良好的用戶體驗思想也是非常重要的。畢竟，開發完的內容是要給用戶來使用的，而不是自己隨心所欲覺得哪里想添加個內容就哪里添加。

因此呢，在下面的這篇文章中，將學習給開發人看的 UI 設計。一起來了解吧~

🎨 一、背景

在講解本文之前，先給大家拋個問題：前端為何要學習基本的 UI 設計原則和實踐套路呢？

1. 想做一個好的作品

• 入行前端的同學，有不少小伙伴是被其「所見即所得」的開發體驗所吸引；此外，就是能夠開發一款自己有用、愛用的應用出來，并分享給其他人使用。
• 而現在市面上，已經有足夠多的課程，能夠讓前端以「全棧」的姿態獨立開發一款能用的產品出來。但當頁面模塊變得復雜起來時，僅僅依賴一些 UI 組件庫，已經不能讓產品維持在「好用」的狀態。
• 追求極致的「全棧」定義，或許應當包含「設計」的角色。

2. 沒有專業UI

• 你的團隊里可能會有 UI 角色，但不一定專業；
• UI 給出的設計稿，許多時候只是靜態的、僅體現某一交互切面的；
• 很多交互體驗細節，只有在前端擺弄一個 Button 的位置和多場景狀態時，才能被捕捉到；
• 在大廠里，許多 B 端產品時沒有專職 UI 的角色的；前端可能要對產品最終呈現出的形態負責。

🧵二、功能導向

1. 設計中最重要的事

功能導向可以說是設計中最重要的事了，可以說，把功能做好，或許是最重要的設計原則。

2. 例子闡述

我們來看一個例子：

下面先看 Google 近20年來首頁的變遷，從左到右，分別是1998、2005、2015年，如下圖所示：

現在，我們來看2021年的，如下圖所示：

大家可以看到，從一開始的內容堆疊，到最后的只顯示一個搜索框，把用戶最想要的內容顯示出來了。或許，這就是功能導向的一個典型例子。

2. 簡約設計

有了功能基礎之后，我們就可以來畫原型了，那么這里我想要介紹的是一些簡單的創作工具。

我們可以選擇像紙、筆或者excalidraw這樣可以立刻上手的工具是比較好的。糙一點的設計筆觸可以讓你不會過于追求完美，或者說是過于「追求設計」。

我們應該要迅速把框架搭好了，設計細節可以后面再補充。說白了，「功能優先」始終貫穿在設計 & 開發流程中。

當然，你也可以使用如 figma 、 Axure 之類的更專業的原型設計工具。但作為開發，建議先使用最基本的筆觸和組件，克制使用顏色設計簡單的、完整的功能優先關注功能。

3. 設計簡單的、完整的功能

我們在進行功能設計時，要先以 MVP 版本功能來作為設計目標。所謂 MVP ，即 Minimum Viable Product ，即最簡化可實行產品。

我們來看一個例子：

• 一個聯系人列表，是否要考慮超過 2000人的展示情況？如何優化交互？
• 數據不存在時，根據不同的錯誤情況，應該如何準備錯誤信息展示，和用戶引導？
• 一個圖片上傳模塊，其復制粘貼、拖拽、 點擊選擇文件上傳，這些路徑是否 MVP 版本都要做，是否都要先做好布局和引導設計？
• 在開局期間，我們要時刻提醒自己，優先把用戶關鍵路徑上的主流場景設計完成，迅速迭代其基本具有的能力。
• 這就好比開發一個游戲，我們總想著游戲各種花式的玩法。但我們在開發前應該先考慮的點是，如何先讓游戲開始，這就是最簡單的功能。讓游戲開始了，我們才能給后面的內容迭代和升級。

來看一個留言功能，如下圖所示：

大家可以看到，短短幾句話，簡明扼要的概括出來最完整的功能，把 MVP 的內容給體現出來了。

🧶三、設計原則

1. 層級

（1）層級是什么

• 層級，是你可能唯一需要關心的原則。
• 一個產品要好用，就要讓用戶很容易地，抓到產品重點。
• 在重點里，用戶能自在地進入沉浸式閱讀、和使用的狀態；
• 當用戶想探索其他內容時，ta 能輕松地識別網站的次要板塊還有哪些，焦點能迅速轉移，并迅速沉浸；
• 輔助提示信息，精確而又不會打擾各主要模塊的呈現。

（2）舉例闡述

比如，大家可以來看下面這兩個網站。你覺得那張圖片展示了更好的閱讀體驗呢？

相信很多小伙伴內心的答案都是第二張圖片。在第一張圖片當中，內容沒有怎么體現出分層，而是一整張圖片黑黑白白的，也不知道哪里是重點。而在第二章圖片中，明顯上面藍色方框內的內容第一眼就抓住了用戶的眼球，很清晰的讓用戶了解到這張圖的用意在哪。

所以你說，哪一張的閱讀體驗更好呢？

2. 一致性

（1）定義

所謂一致性，指的是用戶在站點的各個角落，觀察到顏色、間距、陰影、位置、字體和字重的應用，且都在一套有限的框架里，一套能夠迅速建立親切感的框架內。

什么意思呢？

（2）舉例闡述

以飛書文檔為例，我們來進行一個說明：

當頁面中，主要的交互和視覺元素都采用同一主題色（圖中為藍色）來表示時，用戶可以迅速知道：

• 頁面中有哪些元素是可交互的
• 我需要的提示信息在哪

---

再比如下面這張圖：

在這張圖中，表單中 label 和輸入框之間、以及輸入項之間有序且固定的間距，可以幫助用戶迅速識別當前填寫的表單項是什么內容、以及穩定地將視線移動到下一個表單項上。

（3）總結

通過上面的例子，相信大家對設計的一致性也有了一定的了解。

所以，能否克制，且重復、精確地運用著擬定好的設計體系，會在方方面面上影響著一個站點的質感，同時這也是體現專業性的考量。

看下面這張圖：

3. 番外 - 《寫給大家看的設計書》

這里給大家補充一本書 ——《寫給大家看的設計書》，這本書應該是不少人的設計啟蒙書。

在這里，我簡單介紹下《寫給大家看的設計書》四大原則：

• 對比： 如果兩個元素內涵不同，請讓它們截然相同；
• 重復： 設計的視覺要素應當在整個作品中重復出現；
• 親密性： 彼此關聯的元素應當靠近和放置在一起；
• 對齊： 任何元素都不能隨意安放，應當總是與另外至少一個元素有視覺上的關聯。

---

這四大原則，就與前面我們總結的兩大原則相呼應上了。來看下具體的關聯：

• 層級，就是親密性+對比的目標。讓用戶抓重點、切視線，又快又穩。
• 一致性，就是對齊+重復，克制用戶視線所感受的尺度，迅速與網站設計語言建立熟悉感。

書中還有更多關于四原則的解釋和其他排版設計的技巧，這里也推薦給大家延伸閱讀。

🧷四、設計體系

1. 布局

（1）居中放

我們先來介紹一個最基本的布局技巧，內容居中放。

如果你是遵循「功能導向」，邊開發基礎能力邊設計迭代的開發過程，那么前期你的功能應當是比較簡單的。單列式的居中布局，應該能滿足你的需求。

比如像下面這樣：

很多場景下，居中放也是很有意義的。除非大屏瀏覽是你的核心場景，不然一般來說，你的內容寬度應該在 600 ~ 800px 之間，類似一本書的寬度。

像下面這樣：

（2）多列布局

多列布局的核心也是保持內容的一個合適寬度，維持可讀性。

一般規則是：主要內容列彈性收縮（可以有最小寬度），次要列固定寬度。

如下圖所示：

2. 間距

（1）間距的定義

保證元素間有基本的間距，是最基本的設計技巧。

如下圖所示：

（2）間距的一些規范

現在我們來看一些關于間距的規范。

1）間距——選項

基于 4px 的倍數，設計出數十種間距的選項。如下圖所示：

現在，我們來說明一下這十種設計選項的一些具體內容：

• 設計體系，除了滿足「一致性」原則以外，它同時也是幫設計者提前設計好選項。
• 有了這些選項，我們在具體場景中可以逐個嘗試，來試出最優解。
• 比起每次都拍腦門決策，現在變成在選項里調優，能極大地加快設計的步伐。

來看一個 button 的例子：

大家可以看到，我們把圖標以 4px 的倍數進行增長，慢慢地變得越來越飽和，越來越好看。基于 4px 的選項，我們是不是就更加加快了我們的設計步伐了呢。

---

觀察這數十種間距的選項，我們可以發現這是一個類似指數增長的圖表📈。這是因為兩個相鄰間距，在大尺度上，要比小尺度里拉的更開，才能在視線里體現出間距的差距。

我們用一張圖來比較一下大小尺度里的區別：

大家先看左邊的內容，在小尺度里， 4px 的差距就是 20% 的增幅；再看右邊的內容，右圖 500px 的尺度中， 20px 的增長只有提升 4% 的效果。

2）間距——多留白些

這是一個間距設計技巧：安排元素時建議先大大的留空，也就是「從松到緊」來調試間距。如下圖所示：

---

我們來對上面這組圖進行一個比較。

由緊到松類型👇

先來看一張圖：

這張圖是由緊到松，那么你的思維是「嘗試把無關的元素拉開」，而且是「從整體到局部」的 方向，這就不太好操作。

舉個例子：

你想先拉開每個段落間距 10px，再調段落內標題與內容的間距 4px，但發現拉的不夠開；這時要回過頭將段落間間距拉到 20px，這樣段落內才好安排 10px 的間距……

由松到緊類型👇

先來看一張圖：

由松到緊，這就簡單一些：關注的是「哪些元素相關」，把它們拉在一起，然后是「從局部到整體」調優。

一般來說，偏松也比偏緊好。從一開始就留些空間吧。

3）間距——表達關聯關系

• 除了方便閱讀，間距也是最合適表達關聯關系的工具。
• 如下圖所示，圖中的間距差異設計，表明了每個章節的起點，以及標題與段落的關聯性。

• 同時，如下圖所示，挨得太緊的行高和列表項間距，會讓用戶難以判斷閱讀時的停頓點在哪，當前列表項是否已經結束。
• 間距是遠比色塊、邊框、分界線之類的更適合用來表達關聯關系的工具。值得多加練習運用。

3. 文字

（1）文字的定義

文本是站點的主要內容載體；字體設計自然也是重中之重。

既然我們在講設計體系，以一致性為目標。那么同樣地，我們也要把站點所使用的字號、字重等范圍框定在數十個選項中。

數十個是個 magic number，大部分情況下應該都能滿足。只要場景夠特殊，特殊字體完全可以再加。

（2）文字的一些規范

1）文字——選項設計

相比于間距設計，字號大小我們有一個明顯的適合閱讀的字號范圍，如 12 ~ 20px 。那么我們會更多在這個范圍內設置字體選項。

來看下選項設計的10大范圍，如下圖所示：

但是呢，僅通過字號來設置層級，很快就會捉襟見肘。因此我們要結合字重 & 顏色（灰度），你會更加地游刃有余。

字重是 css 自帶的，用好常用的 3、4 個尺度就好了。

來看一個例子：

大家可以看到，在右邊的這張圖當中，我們適當的使用了字重和顏色，以使得頁面的內容更突出，內容更為飽和。

2）文字——對齊

不同字號大小的字體間如何對齊呢？我們應該要基于 baseline 對齊，就是文本的下邊緣。

baseline 是一個字符的重心；重心對齊了，用戶在移動視線時就能有平穩的閱讀體驗。

來看一個例子：

3）文字——行高

基本上，對于所有的文本設計來說，其意圖都是為了保持良好的閱讀體驗，那么行高也不例外。

具體到設計哲學，就是：行高和字號大小大致成反比，目標是用戶在視線換行時有穩定的下移體驗。

4. 色彩

現在，到顏色部分了，誰不愛顏色呢？同樣地，與上面一樣的歸納步驟，我們來對顏色進行一個歸納。

（1）顏色選項——灰色

在你的色彩庫中，應該要有10種左右的灰色來提供使用，并且這些顏色從文字到背景都用得上。如下圖所示：

（2）顏色選項——主題色

大部分站點都少不了一兩個貫穿全局的主題色；它出現在按鈕、logo、背景、各種修飾元素之上，是品牌的記憶元素。如下圖所示：

（3）顏色選項——功能色

有一些常見的顏色，被廣泛地用來表達某些固定的語義信息。

紅色，傳達錯誤信息，或提示危險操作。

黃色，表示警告。

綠色，表示一些積極的變化，以示成功或增長的信息。

如下圖所示：

（4）使用色盤

前面我們準備好了這么多由深入淺的顏色，那該如何使用呢？

我們可以作為前景和背景色來使用。主要標題可以用最亮的白色；次要標題挑一個背景顏色的淺色版本。

如下圖所示：

---

再來看另外一種用法，即淺色背景深色前景的用法。淺色色塊相較于白色背景對比度不大，適合不用過于搶奪眼球的場景。如下圖所示：

（5）使用顏色的注意事項

顏色雖好，但使用不當會很容易打破頁面層級的平衡。來看一個例子：

還有一種情況是，色盲的用戶消費不了顏色，顏色在不同的文化中可能表示不同的含義。如下圖：

大家可以看到，在上面這張圖中，左上角的圖是我們普通用戶所看到的圖，而左下角的圖是色盲用戶所看到的圖。

5. 深度

（1）例子闡述

制造深度的技巧，八成與陰影設計有關。

深度補充了間距，從另一個維度上體現了層級。這是為什么？

這種深度的感官來自日常生活。平時我們是怎么感受平面上的深度的？答案是：自上而下的光照打 。

在平面上所造成的陰影。模擬這個現象，我們便可以實現網頁元素的「深度」體驗。

來看一個例子：

大家可以看到，在上面的這張圖中，它的的光就是自上而下的光照打。

（2）陰影選項

下面我們來看一些常見的陰影選項。如下圖所示：

看了上面的一些常見選項后，我們現在來梳理各種大小的陰影所造成的影響。具體如下：

• 小的陰影可以使元素略微突出，但不至于搶奪眼球。
• 中等陰影適用于小型彈出的模塊，如下拉框。
• 最深的陰影則用于徹底地將模塊與頁面區分開來的場景。

如下所示：

🐾五、實用技巧

1. 圖片上的層級

如果我們遇到圖片上的色塊斑駁不一，難以找到合適的前景色。這個時候我們應該咋辦哩？

比如下面這張圖：

下面我們來介紹解決這種問題的幾種方法。

（1）增加蒙層

我們可以通過增加蒙層，來顯示圖片的層級。如下圖所示：

（2）給文字加陰影

除此之外呢，你可以選擇給文字加上陰影。 css 可以輕松地做到，只增加文字部分的對比度，而不影響整張圖片的閱讀體驗。

如下圖所示：

2. 用戶頭像

不管是在什么樣的 app ，我們基本上都有上傳圖片的環節。那么，如何使得在任何的情況下，都能夠清晰地展示用戶頭像里面的內容會是一個問題。

我們先來看這張圖：

大家可以看到，在上面的這張圖中，有一些用戶頭像出現了空白，這樣間接地會使得我們不清楚整個用戶頭像實際上的尺寸是多少。

由小伙伴可能會首先想到，加個 border 。但加個 border 呢，又有點差強人意了，不一定能搭配好。

有個好方法就是，加點內陰影。相當于圈用戶頭像的外層做邊框，這就非常精巧了。

3. 強調線

有時候，我們會很喜歡把表格類的設計給加上一些邊框和分界線，但是這似乎看起來 a little 土。如下左圖所示：

大家可以看到，加了邊框，就很像傳統的 table 一樣，有一點點不美觀。

所以呢，如上邊右圖一樣，我們可以用陰影或者不同的背景塊來代替邊框。這樣，間距其實也就清晰了，所以我們也就不需要什么分界線了。

🖌?六、資源

1. 譯作推薦

在上面的這篇文章中，大部分內容來自于下面這篇譯作。想深入了解的同學可以進一步觀看。

給開發看的 UI 設計 · 語雀

2. 書籍推薦

前面我們也稍微提到過這本書，這里推薦給大家👉寫給大家看的設計書(第4版) (豆瓣)

3. tailwindcss

tailwind 的 utility class 設計，深度實踐了本文所講的設計體系。

它的官網里面還有很多設計資源👉taildinwcss 設計框架，大家可以進一步學習查看。

同時呢，小伙伴們還可以了解來自 tailwind 作者的著作，Refactoring UI，它是本文的基礎。

??七、結束語

在上面的文章中，我們講到了 UI 設計與前端的關系，同時呢，還講到了設計中的一些功能導向，以及設計原則，設計體系。最后，我們還講到了處理圖片和表格的一些實用性技巧。

到這里，關于給開發人看的 UI 設計講解就結束啦！希望對大家有幫助~

彩蛋 One More Thing

（：往期推薦

👉值得關注的HTML基礎知識

👉css還只停留在寫布局？10分鐘帶你探索css中更為奇妙的奧秘！

（：番外篇

• 關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~
• 如果這篇文章對你有用，記得留個腳印jio再走哦~
• 以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的前端只是切图仔？来学学给开发人看的UI设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。