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

于團(tuán)隊(duì)：高效的管理+高質(zhì)的項(xiàng)目輸出
于實(shí)習(xí)生：快速了解團(tuán)隊(duì)+學(xué)習(xí)系統(tǒng)性知識(shí)+質(zhì)量完成工作
于個(gè)人：作為一名前輩對(duì)后浪的社會(huì)責(zé)任+致力于提高國內(nèi)互聯(lián)網(wǎng)設(shè)計(jì)環(huán)境的理想

掌握基礎(chǔ)知識(shí)（入職前）

1. 閱讀并掌握設(shè)計(jì)基礎(chǔ)原則

學(xué)會(huì)站在巨人的肩膀上成長(zhǎng)，多讀書和多沉淀對(duì)剛?cè)胄械男氯说某砷L(zhǎng)是至關(guān)重要的。

入職前必讀書籍：

《寫給大家看的設(shè)計(jì)書》

了解設(shè)計(jì)的基礎(chǔ)原則，雖然是很多年前關(guān)于平面的書籍，但是依然適用于 UI 界面設(shè)計(jì)之中。即便很多理論知識(shí)是大家很了解的，但是在運(yùn)用中卻沒法及時(shí)運(yùn)用?；A(chǔ)原則將會(huì)成為后續(xù)檢驗(yàn)設(shè)計(jì)合格與否的基礎(chǔ)標(biāo)準(zhǔn)。

《一個(gè) APP 的誕生》

是對(duì)落地化移動(dòng)端項(xiàng)目設(shè)計(jì)流程的入門書籍，因?yàn)榇蟛糠值男氯嗽谌胄兄昂茈y有接觸落地項(xiàng)目的經(jīng)驗(yàn)，大都停留于學(xué)校的小組項(xiàng)目設(shè)計(jì)或自發(fā)的 Redesign，這些與公司的落地化項(xiàng)目還是有一定的經(jīng)驗(yàn)知識(shí)差。所以，提前形成項(xiàng)目設(shè)計(jì)的流程意識(shí)，為后續(xù)工作打好理論知識(shí)。

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

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

設(shè)計(jì) 4 大基礎(chǔ)原則

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

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

情感化設(shè)計(jì)，針對(duì)哪些必須長(zhǎng)期在人機(jī)交互下的用戶提供高效的服務(wù)外，同時(shí)注意情感化設(shè)計(jì)的注入，讓人與機(jī)的交流不至于枯燥無味的人文情感關(guān)懷。

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

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

親密性為彼此相關(guān)的元素歸組在一起，成為一個(gè)視覺單元?！赣H密性」有助于組織信息，減少混亂，為讀者提高清晰的結(jié)構(gòu)。

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

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

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

3. 重復(fù)（擅于分析頁面層級(jí)結(jié)構(gòu)，對(duì)層級(jí)的定義與劃分）

重復(fù)原則是指：版面中的視覺要素要重復(fù)出現(xiàn)，可以重復(fù)顏色、字體、圖形、形狀、材質(zhì)、空間關(guān)系等。運(yùn)用「重復(fù)原則」把同一級(jí)別的文字設(shè)置為相同的文字樣式，增加條理性，加強(qiáng)統(tǒng)一性。在頁面上重復(fù)使用可以定義不同層級(jí)的字體、字號(hào)、字重?？梢院苤庇^地把大量的信息分為四個(gè)信息層級(jí)：主標(biāo)題、小標(biāo)題、正文、輔助說明文字。

4. 對(duì)比（對(duì)主要信息的強(qiáng)調(diào)處理方法）

「對(duì)比」強(qiáng)調(diào)事物之間的差異性，在設(shè)計(jì)時(shí)要避免頁面上的視覺元素太過相似，如果元素之間是為了有所不同，那么加大反差，確保對(duì)比明顯、頁面清晰是很有必要的?？梢酝怀鲋攸c(diǎn)，豐富畫面層次，打破呆板、活潑生動(dòng)。

2. 掌握基礎(chǔ)設(shè)計(jì)軟件+快捷鍵

UI 設(shè)計(jì)師需要掌握基礎(chǔ)的設(shè)計(jì)軟件：Sketch/AI/PS/XD/AE/C4D

Sketch 快捷鍵

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

3. 深讀設(shè)計(jì)規(guī)范

作為一名 UI 設(shè)計(jì)師需要具備基礎(chǔ)的設(shè)計(jì)規(guī)范知識(shí)。基于各個(gè)平臺(tái)和各個(gè)優(yōu)秀的設(shè)計(jì)規(guī)范，在此基礎(chǔ)上辯證的學(xué)習(xí)及使用，打牢基礎(chǔ)的實(shí)戰(zhàn)技能。

iOS 設(shè)計(jì)規(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ā)對(duì)接的設(shè)計(jì)規(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

小程序設(shè)計(jì)規(guī)范

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

入職前練習(xí)題（入職前必做）

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

1. 輸出 3 套不同風(fēng)格圖標(biāo)設(shè)計(jì)

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

2. 輸出 3 套不同風(fēng)格的占位圖設(shè)計(jì)

暫無結(jié)果/加載失敗

3. 輸出 1 套 APP 設(shè)計(jì)主界面

工具類/社交類/音樂類

4. 輸出 1 套 web 設(shè)計(jì)主界面

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

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

1. 基礎(chǔ)軟件安裝

• Sketch
• Adobe：AI/PS/XD/AE/
• C4D：（學(xué)生版，自行官網(wǎng)用學(xué)生證下載，一年免費(fèi)使用）

2. 插件安裝

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

必備協(xié)同基礎(chǔ)知識(shí)

1. iconfont 圖標(biāo)庫使用方法

iconfont 是阿里巴巴旗下的一個(gè)在線圖標(biāo)庫，支持矢量圖標(biāo)的上傳和下載。

iconfont 使用場(chǎng)景：

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

iconfont 圖標(biāo)制作要求

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

Iconfont 項(xiàng)目新建

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

Iconfont 圖標(biāo)上傳要求

多色 icon：選擇保留顏色提交（可保留設(shè)計(jì)樣式）

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

2. 郵件的正確使用

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

一經(jīng)發(fā)送不可撤回更改，內(nèi)容需確認(rèn)無誤

3. 圖標(biāo)的設(shè)計(jì)與切圖

圖標(biāo)的網(wǎng)格和參考線：

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

圖標(biāo)邊距：

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

解決視覺差：

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

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

統(tǒng)一圖標(biāo)的設(shè)計(jì) DNA 原則

01 圖標(biāo)的類型：

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

例：線性圖標(biāo)

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

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

icon 的切圖

一. 移動(dòng)端的切圖：iOS、Android

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

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

01 sketch 制作移動(dòng)端切圖

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

02 PS 制作移動(dòng)端切圖

方法一：

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

方法二：

1. 選擇需要切圖的元素/分組
2. 將確定好的長(zhǎng)寬數(shù)值輸入對(duì)應(yīng)框內(nèi)
3. 點(diǎn)擊標(biāo)記為切圖

03 XD 制作移動(dòng)端切圖

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

二. Web 端的切圖

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

*注意事項(xiàng)：

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

三. 點(diǎn)九切圖法

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

關(guān)于圖標(biāo)的設(shè)計(jì)原則：

結(jié)語

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