寫給 UI 設計實習生的成長指南（中篇）

作為一名在互聯(lián)網行業(yè)摸爬滾打好多年的一位 UI 設計師，也在團隊里帶過眾多 UI 設計師和實習生，所以深刻認識到無論于團隊還是實習生個人來說，制定這個《實習生入職白皮書》是相當必要的。

于團隊：高效的管理+高質的項目輸出
于實習生：快速了解團隊+學習系統(tǒng)性知識+質量完成工作
于個人：作為一名前輩對后浪的社會責任+致力于提高國內互聯(lián)網設計環(huán)境的理想

掌握基礎知識（入職前）

1. 閱讀并掌握設計基礎原則

學會站在巨人的肩膀上成長，多讀書和多沉淀對剛入行的新人的成長是至關重要的。

入職前必讀書籍：

《寫給大家看的設計書》

了解設計的基礎原則，雖然是很多年前關于平面的書籍，但是依然適用于 UI 界面設計之中。即便很多理論知識是大家很了解的，但是在運用中卻沒法及時運用。基礎原則將會成為后續(xù)檢驗設計合格與否的基礎標準。

《一個 APP 的誕生》

是對落地化移動端項目設計流程的入門書籍，因為大部分的新人在入行之前很難有接觸落地項目的經驗，大都停留于學校的小組項目設計或自發(fā)的 Redesign，這些與公司的落地化項目還是有一定的經驗知識差。所以，提前形成項目設計的流程意識，為后續(xù)工作打好理論知識。

沉淀讀書筆記（按照章節(jié)）

沉淀是與自己意識交流的一個過程，辯證和有效的知識吸收是與前人的思維對話，形成沉淀的習慣是諸位未來是否在專業(yè)或思維上進步的驗證，有著各方面的意義與價值。就如現(xiàn)在，你與我也在一番對話…

設計 4 大基礎原則

先了解當下設計的目的為何？當下互聯(lián)網環(huán)境的特殊性在于效率至上，而界面視覺設計傳達上也為此服務。

提高人機交互下的界面操作效率，減少人機交互時間，設計讓人的時間釋放出來做更多有意義的事（陪伴家人，和朋友的交流，感受自然的美妙……）

情感化設計，針對哪些必須長期在人機交互下的用戶提供高效的服務外，同時注意情感化設計的注入，讓人與機的交流不至于枯燥無味的人文情感關懷。

設計的目的為何？如何發(fā)揮設計的價值？是在做設計過程中需要一直在心里發(fā)問的命題。

1. 親密性原則（擅于使用間距處理信息分組關系）

親密性為彼此相關的元素歸組在一起，成為一個視覺單元。「親密性」有助于組織信息，減少混亂，為讀者提高清晰的結構。

2. 對齊原則（像素眼的養(yǎng)成是 UI 設計師的基本素養(yǎng)）

任何元素都不能在頁面上隨意安放，每一項都應當與頁面上的某個內容存在某種視覺聯(lián)系。對齊原則不僅僅是對用戶視覺瀏覽習慣的考量，還是對頁面中信息組織的考量。

利用對齊，符合用戶的視覺慣性，降低用戶閱讀負擔；利用不同的對齊形式，能有效組織信息，讓頁面規(guī)整有序、嚴謹美觀。

3. 重復（擅于分析頁面層級結構，對層級的定義與劃分）

重復原則是指：版面中的視覺要素要重復出現(xiàn)，可以重復顏色、字體、圖形、形狀、材質、空間關系等。運用「重復原則」把同一級別的文字設置為相同的文字樣式，增加條理性，加強統(tǒng)一性。在頁面上重復使用可以定義不同層級的字體、字號、字重。可以很直觀地把大量的信息分為四個信息層級：主標題、小標題、正文、輔助說明文字。

4. 對比（對主要信息的強調處理方法）

「對比」強調事物之間的差異性，在設計時要避免頁面上的視覺元素太過相似，如果元素之間是為了有所不同，那么加大反差，確保對比明顯、頁面清晰是很有必要的。可以突出重點，豐富畫面層次，打破呆板、活潑生動。

2. 掌握基礎設計軟件+快捷鍵

UI 設計師需要掌握基礎的設計軟件：Sketch/AI/PS/XD/AE/C4D

Sketch 快捷鍵

PS 快捷鍵(AI/XD 幾乎相同)

3. 深讀設計規(guī)范

作為一名 UI 設計師需要具備基礎的設計規(guī)范知識。基于各個平臺和各個優(yōu)秀的設計規(guī)范，在此基礎上辯證的學習及使用，打牢基礎的實戰(zhàn)技能。

iOS 設計規(guī)范

IOS： https://developer.apple.com/ios/

Android 控件規(guī)范

• Material Design： https://material.io/components
• Ant Design： https://mobile.ant.design/components/white-space-cn/

Web 端控件規(guī)范

• Material Design： https://material.io/design
• Microsoft Design： https://www.microsoft.com/design

#基于開發(fā)對接的設計規(guī)范#

• antdesign： https://ant.design/components/layout-cn/
• element： https://element.eleme.cn/#/zh-CN/component/installation
• youzan： https://youzan.github.io/vant/#/zh-CN/tree-select

小程序設計規(guī)范

微信小程序： https://developers.weixin.qq.com/miniprogram/dev/framework/

入職前練習題（入職前必做）

入職前進行設計練習和同個設計的不同風格擴展思維的訓練，提前進入設計狀態(tài)。所有練習題在入職日提交給設計審核并作后續(xù)的修改。

1. 輸出 3 套不同風格圖標設計

我的/主頁/數(shù)據(jù)/管理/設置

2. 輸出 3 套不同風格的占位圖設計

暫無結果/加載失敗

3. 輸出 1 套 APP 設計主界面

工具類/社交類/音樂類

4. 輸出 1 套 web 設計主界面

工具類：數(shù)據(jù)/列表/列塊…#官網類#大屏展示類

入職第一日：軟件與插件安裝

1. 基礎軟件安裝

• Sketch
• Adobe：AI/PS/XD/AE/
• C4D：（學生版，自行官網用學生證下載，一年免費使用）

2. 插件安裝

藍湖插件：Sketch/PS/XD/（藍湖：上傳設計及切圖，用于多方協(xié)同）

必備協(xié)同基礎知識

1. iconfont 圖標庫使用方法

iconfont 是阿里巴巴旗下的一個在線圖標庫，支持矢量圖標的上傳和下載。

iconfont 使用場景：

1. 設計中需要快速使用到圖標，可搜索并下載所需的 SVG 格式 icon，方便在設計中靈活更改
2. Web 端的項目需要，將設計圖中的圖標上傳至項目文件夾，方便前端下載和使用。

iconfont 圖標制作要求

1. icon 必須以填充方式輸出
2. 不可為描邊，需輪廓化
3. 使用整數(shù)值
4. 不可用漸變和透明度

Iconfont 項目新建

1. 選擇資源管理
2. 選擇我的項目
3. 選擇新建項目文件夾
4. 輸入項目名稱后新建
5. 添加成員
6. 輸入成員昵稱（昵稱需要確認是否本人）
7. 管理員可進行人員權限分配

Iconfont 圖標上傳要求

多色 icon：選擇保留顏色提交（可保留設計樣式）

單色 iocn：選擇去除顏色提交（1.統(tǒng)一上傳后的視覺觀感。2.防止白色 icon 上傳后不方便預覽）

2. 郵件的正確使用

郵件發(fā)送必須為公司郵箱，不可使用個人郵件

一經發(fā)送不可撤回更改，內容需確認無誤

3. 圖標的設計與切圖

圖標的網格和參考線：

放大四倍進行圖標設計。如果我們想設計一個 48dp 的圖標，那么我們可以把畫布放大到 400％（192 x 192 dp）來設計，這時可以顯示 4dp 的邊緣。通過保持這個比例，任何變化都將按比例放大或縮小，這樣可以在畫面恢復到 100％（48dp）時保持鋒利的邊緣和正確的對齊。

圖標邊距：

圖標應該留出一定的邊距，保證不同面積的圖標視覺顯示一樣大。如果多個圖標具有類似的邏輯層級，且同時在界面出現(xiàn)，注意它們的大小應盡量相等。

解決視覺差：

調整面積，解決視覺差。形態(tài)不一的圖標會導致一定的視覺差，以下為不同形狀的參考寬距。

*調節(jié)不同形態(tài) icon 視覺差例子：

統(tǒng)一圖標的設計 DNA 原則

01 圖標的類型：

Material Design 把圖標分為填充圖標（Filled）、線性圖標（Outlined）、圓角圖標（Rounded）、雙調圖標（Two-Tone）、尖角圖標（Sharp）。無論什么類型的圖標都要統(tǒng)一圖標的設計 DNA，如線的粗細，圓角的大小，圖標的角度，圖形的結合形式等等…

例：線性圖標

02 描邊粗細統(tǒng)一

圖中的圖標使用了 2dp 的描邊以保持圖標的一致性。如沒有特殊原因，不要使用一種以上的描邊粗細，保證圖標視覺上的統(tǒng)一。

icon 的切圖

一. 移動端的切圖：iOS、Android

視覺圖標要和切圖本身四周留有間距，保證級別 icon 尺寸統(tǒng)一。或著整個切圖還要和周圍保持距離（通常兩倍），開發(fā)不給力的時候直接輸出大面積空白即可，這樣就算他再馬虎不給你留間距，你的切圖也沒有問題。

*例子：同類 icon 保持統(tǒng)一尺寸

01 sketch 制作移動端切圖

1. 使用形狀工具
2. 畫出需要切圖區(qū)域
3. 將區(qū)域形狀和需輸出的 icon 編組
4. 選擇導出區(qū)域圖層
5. 將區(qū)域形狀透明度調整為“0”
6. 選擇需要切圖的元素/分組
7. 將區(qū)域形狀與相對應的素材編組 - 添加導出標記

02 PS 制作移動端切圖

方法一：

1. 使用形狀工具
2. 畫出需要切圖區(qū)域
3. 將區(qū)域形狀和需輸出的 icon 編組
4. 將區(qū)域形狀透明度調整為“0”
5. 選擇需要切圖的元素/分組
6. 使用藍湖插件切圖標記

方法二：

1. 選擇需要切圖的元素/分組
2. 將確定好的長寬數(shù)值輸入對應框內
3. 點擊標記為切圖

03 XD 制作移動端切圖

1. 使用形狀工具
2. 畫出需要切圖區(qū)域
3. 選擇導出區(qū)域形狀圖層
4. 將區(qū)域形狀透明度調整為“0”
5. 將區(qū)域形狀與相對應的素材編組 - 添加導出標記

二. Web 端的切圖

Web 端 icon 為方便開發(fā)使用與后期 UI 維護管理，需要將 iocn 上傳至 iconfont（阿里巴巴圖標庫），上傳至圖標庫需使用 svg 格式。一般將 icon 使用 AI 進行重新繪制導出，為保證 icon 同級別大小統(tǒng)一，需要將畫板進行獨立輸出。

*注意事項：

無論在 Ai，Ps，Sketch，XD 中繪制矢量圖標，圖標邊緣必須貼緊像素邊緣，否則會出現(xiàn)顯示模糊情況，從而降低設計質量。

三. 點九切圖法

點九是 Andriod 平臺開發(fā)里的一種特殊的圖片形式，文件擴展名為：.9.png。比如有一個氣泡 bubble，那么它的.9 切圖命名格式就是：bubble.9.png。這種圖片能告訴程序這個圖片哪部分可以被拉伸，哪部分不要拉伸。我們要做的就是使用 Photoshop 的鉛筆工具，把鉛筆設置成 1px 大小，透明度 100%，顏色選擇#000000 純黑色，然后在我們的切圖邊緣畫出 1 像素的橫豎線，然后把這張圖命名后綴加上.9，就和系統(tǒng)打好了暗號了。后續(xù)，開發(fā)人員在開發(fā)環(huán)境就可以設置哪些部分可以拉伸哪些需要保留了。噢對了，我們畫的黑色「暗號」是不會顯示給用戶的。

關于圖標的設計原則：

結語

以上分享了我的《UI 實習入職白皮書 2.0》1～4 章節(jié)，主要針對一些基礎知識的總結和整理，希望能給 UI 新手和管理者一些受用。