這應(yīng)該是新年之前最后一篇文章了，應(yīng)很多設(shè)計(jì)師同學(xué)的要求，趕緊寫了一篇測(cè)試題的文章。

在上一篇文章中我們講到，如果面試官最后跟你說了類似“我們有這個(gè)職位的試題”或者“我們會(huì)把試題留給你”這樣的話，那么恭喜你，你通過了第一輪。接下來就是HR或者面試官會(huì)把試題打包成zip、rar或者pdf格式發(fā)送到你作品集上的郵箱里。收到郵件后，認(rèn)真讀要求；認(rèn)真讀要求；認(rèn)真讀要求！！特別是紅色標(biāo)注的文字，有些設(shè)計(jì)師不看要求就直接去做，這樣適得其反。那么試題的郵件是什么樣的呢？就是下圖：

為什么要參加筆試？

對(duì)于公司

考察應(yīng)聘者的真實(shí)能力。近些年，假簡(jiǎn)歷太多了。如果沒有筆試，應(yīng)聘者所做的工作與簡(jiǎn)歷相差甚遠(yuǎn)，那么對(duì)公司來說成本會(huì)很高。這方面主要考慮的是公司的人力資源成本。

為了自己

在筆試的過程中，你可以了解到相關(guān)的業(yè)務(wù)，包括你對(duì)產(chǎn)品的理解，架構(gòu)，對(duì)產(chǎn)品的熟悉程度，檢查產(chǎn)品的流程，還可以幫助團(tuán)隊(duì)解決沒有發(fā)現(xiàn)的問題。如果你在筆試過程中發(fā)現(xiàn)了問題，然后提出來給筆試，這也是你能力的體現(xiàn)嗎？

之前也接到過測(cè)試題，也有同學(xué)找我看測(cè)試題，我也把測(cè)試題發(fā)給面試官過。初級(jí)設(shè)計(jì)師的測(cè)試題大部分基本就是一張圖片，就是jpg格式發(fā)的，怎么說呢？我個(gè)人不建議這么做，太簡(jiǎn)單了。如果我是面試官，我會(huì)想看你對(duì)一個(gè)產(chǎn)品或者需求的整體思考和理解。測(cè)試題其實(shí)也是一種需求，所以最好的方式就是以pdf的形式提交，如果你會(huì)做動(dòng)畫的話（前提是動(dòng)畫效果細(xì)膩不僵硬；如果你的動(dòng)畫很僵硬或者只是動(dòng)一下，那么就不建議做了，暴露了你的不足），那就以pdf+mp4的形式提交吧。

設(shè)計(jì)工具

對(duì)于 UI 測(cè)試，國(guó)內(nèi)大部分大公司都在用 +Blue Lake，不過也有一些大公司開始用 figma。我也是最近才接觸到 figma，體會(huì)到了它的強(qiáng)大，未來的趨勢(shì)幾乎就是 figma。那么我先簡(jiǎn)單說一下 figma 的強(qiáng)大之處：

1.缺點(diǎn)

我用了兩年了，問題太多了。第一，更新太頻繁，組里每個(gè)同學(xué)用的版本都不一樣，互相傳源文件的話，你用的是老版本就吃虧了，打不開！而且源文件太大的話，傳輸速度太慢，有時(shí)候會(huì)因?yàn)榫W(wǎng)絡(luò)問題中斷，影響效率。第二，有時(shí)候太卡，導(dǎo)致軟件崩潰，之前的努力全都白費(fèi)了。第三，上傳到Blue Lake之后，Blue Lake新版本的鏈接14天后就會(huì)失效，難道還要再給一次嗎？項(xiàng)目太多了，找了好久，效率又低了，對(duì)吧？

2. Figma 的優(yōu)勢(shì)

第一，速度快，其實(shí)界面跟XD差不多，從來沒有卡過。第二，可以多人同時(shí)在線編輯，這幾乎是Figma最大的優(yōu)勢(shì)了，其他設(shè)計(jì)軟件都做不到多人同時(shí)在線編輯，方便實(shí)時(shí)反饋和信息收集，提升團(tuán)隊(duì)溝通成本。第三，只需要一個(gè)軟件，就可以完成PM需求-UX交互-UI設(shè)計(jì)-研發(fā)的流程，是不是很棒？

但最終還是取決于團(tuán)隊(duì)使用什么設(shè)計(jì)軟件。

比如你要做一道關(guān)于音樂APP首頁改版的測(cè)試題，你不應(yīng)該一拿到題目就開始畫圖，首先要明確哪個(gè)前提？

1. 仔細(xì)思考

拿到筆試題后，先看需求，我們做筆試題其實(shí)就是在做一個(gè)需求，然后粗略的瀏覽一下原型結(jié)構(gòu)，明確需求之后就可以開始做了。這里需要強(qiáng)調(diào)的一點(diǎn)是：看完需求如果有疑問，一定要主動(dòng)跟面試官溝通，不要裝作不知道，自以為是，導(dǎo)致提交的提示問題不盡人意。不要害羞，主動(dòng)大膽的表達(dá)自己的困惑。

2. 品牌顏色

不要改別人的品牌色，用自己想要的顏色就行，沒給顏色值就打開APP用吸管吸就行，品牌色是體現(xiàn)APP屬性最重要的方式之一，不要隨意改。

3.分析原型

不要做原型美工，就是照搬別人的原型，然后加點(diǎn)顏色看看。UI 有什么用？你需要梳理交互邏輯、跳轉(zhuǎn)邏輯、功能。原型中功能點(diǎn)的擺放位置有沒有最優(yōu)解？比如：

我們需要在原型設(shè)計(jì)的基礎(chǔ)上，設(shè)計(jì)出能夠解決用戶問題的UI設(shè)計(jì)，也就是所謂的最優(yōu)解：

4. 不要隨意添加或刪除內(nèi)容

不要添加或刪除別人的試題，哪怕是一句也不行！！如果你真的有自己的創(chuàng)意，建議你先根據(jù)別人的想法做一個(gè)版本，然后再根據(jù)自己的創(chuàng)意再做一個(gè)版本，并解釋一下為什么這么做）

5. 先考慮視覺效果還是先考慮實(shí)施效果？

只要仔細(xì)看題目就可以了，一般題目里都會(huì)寫上，比如會(huì)有幾個(gè)關(guān)鍵詞，如果有“大膽表達(dá)”、“不拘泥于現(xiàn)有的視覺形式”、“突破現(xiàn)有風(fēng)格”這樣的詞，那么就可以適當(dāng)?shù)卦谝曈X層面上突破一下，這就意味著你可以充分發(fā)揮自己的設(shè)計(jì)優(yōu)勢(shì)，在目前的測(cè)試圖片頁面進(jìn)行視覺上的突破。

那么考試題目應(yīng)該詳細(xì)到什么程度呢？我覺得主要應(yīng)該由以下幾個(gè)部分組成，也可以理解為好幾頁。順序如下：

步驟 1：尋找競(jìng)爭(zhēng)對(duì)手

找到市面上排名前三的音樂APP，然后截取首頁，分析它們的視覺和功能特點(diǎn)。請(qǐng)注意：目的是做競(jìng)品分析，不是叫你抄襲他們的設(shè)計(jì)。你需要分析他們哪些地方做得好，哪些地方做得不好。其實(shí)找競(jìng)爭(zhēng)對(duì)手的過程也是一個(gè)熟悉的過程，除了國(guó)內(nèi)排名前三的APP，也可以找國(guó)外的做分析，這是一個(gè)必須的過程。在文檔中粘貼圖片的時(shí)候，也要注意排版，不要隨便貼上去。要知道考題不只是頁面，處處都體現(xiàn)著一個(gè)設(shè)計(jì)師的基本功。

第二步：制作精美的東西

根據(jù)題目，為什么要單獨(dú)講繪制圖標(biāo)（分為菱形區(qū)域和導(dǎo)航區(qū)域）呢？這里要提的一點(diǎn)是：圖標(biāo)一定要畫得好、精致。圖標(biāo)是體現(xiàn)UI設(shè)計(jì)師基本功的重要一點(diǎn)，千萬別去下載，有時(shí)候下載的可能還不是一模一樣的！UI筆試題一定要有圖標(biāo)部分，是否突出、是否吸引眼球都會(huì)在這里體現(xiàn)出來，比如我自己的排版：

步驟 3：開始繪制

首先我們需要搭建一個(gè)大框架，從頂部狀態(tài)欄到底部導(dǎo)航欄，下面是一些統(tǒng)一：

1.如果沒有特殊要求，一般用x尺寸來明確狀態(tài)欄、內(nèi)容區(qū)域、底部導(dǎo)航欄的高度（底部導(dǎo)航有3-5個(gè)圖標(biāo)，對(duì)齊關(guān)系要分布均勻）

2. 頁邊距sketch 圖標(biāo)打組，通常為16或20。

3、統(tǒng)一字體粗細(xì)、行高、間距（以2x圖片為例，字號(hào)最小一般為24，以4為單位逐漸增大，所以是24、28、32，注釋最小約為20，特殊情況除外。間距一般以8、8、16、24等倍數(shù)增大。）

4.統(tǒng)一卡片（卡片圓角、卡片間距）

5.統(tǒng)一標(biāo)題與正文的字體和間距（標(biāo)題一般都是醋酸加上去的，字體大小沒有固定的樣式，根據(jù)具體需要而定。）

在制作圖片的過程中，我們盡量考慮哪些地方可以發(fā)揮創(chuàng)意，比如融入一些最近流行的毛玻璃圖標(biāo)風(fēng)格。

特別注意以下幾點(diǎn)：當(dāng)我們把界面制作完之后sketch 圖標(biāo)打組，最好把界面中的一些要點(diǎn)，以及自己在封裝的時(shí)候是怎么想的，最好用簡(jiǎn)短的文字描述清楚，有理有據(jù)，把情況說清楚，讓面試官一眼就看明白。

步驟 4：找到圖片

這一步可以和第三步并行做，俗話說三分畫七分展示，那么界面可以說是三分設(shè)計(jì)七分圖片，尤其是音樂界面有專輯圖片，所以找一些高級(jí)的圖片來提升高級(jí)感。這就涉及到一個(gè)審美的問題了，有人會(huì)問我怎么提升審美？其實(shí)提升審美，一方面需要在基本功到位的情況下，隨著經(jīng)驗(yàn)的提示去提升；如果你不是專業(yè)人士，那么可以下載一些好的APP，或者有一本好的設(shè)計(jì)雜志，或者用Eagle收集很多精美的圖片來提升自己的審美。下面我放上我做的幾個(gè)APP界面，圖片能不能撐起整體的質(zhì)感呢？下面是我做的一些UI：

上述UI設(shè)計(jì)里的圖片能不能支撐起整個(gè)UI的質(zhì)感呢？

第五步：細(xì)節(jié)決定成敗

在軟件里畫完界面之后，一定要在手機(jī)上預(yù)覽一下，這里可以下載，F(xiàn)igma 可以在這里下載，直接搜就可以了，PS 好像也有。最笨的辦法就是導(dǎo)出 2x 圖，在手機(jī)上看最終效果，檢查一些 UI 細(xì)節(jié)。那么需要檢查的細(xì)節(jié)在哪里呢？

1. 字體大小和粗細(xì)（除特殊情況外，字體大小最多不超過 3 種，字體粗細(xì)最多不超過 2 種）

2、間距是否均勻。

3、檢查卡片四角是否均勻。

4、檢查金剛區(qū)域圖標(biāo)或者導(dǎo)航圖標(biāo)視覺權(quán)重是否一致。

5、整體品牌色彩滲透是否足夠？

6. 有沒有什么創(chuàng)意點(diǎn)（一個(gè)就夠了）

第六步：試題包裝（尺寸1920*1080）

制作出炫酷的界面后，故事還沒結(jié)束。你需要對(duì)它進(jìn)行包裝，讓它看起來完整、專業(yè)，并證明你對(duì)面試是真誠(chéng)和認(rèn)真的。如何包裝？控制在 10 頁以內(nèi)即可。以下是包裝流程：

1. 封面（1頁）

封面主要考查你的排版能力和視覺基礎(chǔ)，個(gè)人認(rèn)為還是以簡(jiǎn)單為好，不要太復(fù)雜。

2.競(jìng)爭(zhēng)產(chǎn)品分析（1-2頁）

把你研究的過程寫在對(duì)試題的前提下，以及得出的分析結(jié)論（必須是正確的結(jié)論），盡量簡(jiǎn)潔，不要寫太多冗余的文字，控制在2頁以內(nèi)就好。

3.標(biāo)準(zhǔn)化（1-2p）

放上你制作的一些精美的圖標(biāo)，比如金剛區(qū)域圖標(biāo)、功能圖標(biāo)等；然后加上一些輔助線，以證明專業(yè)性。同時(shí)，還可以放上一些顏色規(guī)范、字體規(guī)范、網(wǎng)格規(guī)范等。

4.主界面（需添加分析，2-3p）

- 先把設(shè)計(jì)出來的界面，然后在這個(gè)頁面上添加一些你的想法。也就是說，在這個(gè)頁面上，解釋一下你為什么這么做，提供一些理論基礎(chǔ)，加入一些站在用戶角度的思考點(diǎn)。

-如果測(cè)試郵件給你發(fā)的是舊頁面，并要求你修改設(shè)計(jì)，那么你可以把這個(gè)頁面左右布局，左邊是舊頁面，右邊是新設(shè)計(jì)的頁面。左右對(duì)比可以讓面試官一眼就看出區(qū)別。同時(shí)，你還應(yīng)該放一些文字說明，解釋一下設(shè)計(jì)中哪些部分好，為什么這樣做。

5. 頁面單獨(dú)包裝（1p）

你可以下載一些設(shè)計(jì)精良的原型，將你設(shè)計(jì)的頁面進(jìn)行封裝，并在真實(shí)的場(chǎng)景中模擬使用場(chǎng)景。

6. 最后一頁 (1p)

也就是“謝謝”、“期待您的聯(lián)系”之類的字眼，為了清楚起見，最好從封面開始，到中間一頁，再到最后，每頁都要與第一頁顏色相關(guān)，有始有終，版式設(shè)計(jì)要精美。

步驟 7：導(dǎo)出文件命名

在軟件中寫完之后，我們需要將其整合成PDF格式，推薦使用Adobe，自帶壓縮功能，最好保證在10M以內(nèi)，5M以內(nèi)為佳，文件名為：試題名稱-名稱-日期。

Adobe的壓縮方式，如下圖：

步驟 8. 發(fā)送電子郵件

你以為第 7 步就結(jié)束了嗎？你大錯(cuò)特錯(cuò)了！第 7 步也很重要，一定要寫標(biāo)題。有的同學(xué)不寫標(biāo)題；有的不寫正文；有的甚至寫了標(biāo)題和正文，卻忘了上傳附件。所以具體步驟應(yīng)該是這樣的：

-郵件標(biāo)題：******測(cè)試題目

-文本格式（參考）：

你好，筆試題目在附件中，請(qǐng)查收下載~

期待加入***公司設(shè)計(jì)部，謝謝~

記得上傳附件！記得上傳附件！記得上傳附件！

步驟 9：通過微信/電話/短信建立溝通

這一步就是最后一步了！面試官真的太忙了，一天篩選幾百份作品集不說，估計(jì)一個(gè)加急的招聘日至少要面試5個(gè)人，從早忙到晚。這里我建議，如果你加了微信，發(fā)郵件后可以直接微信通知面試官，如果沒有，郵件里肯定有電話，所以不建議打電話，直接發(fā)短信告知就行。如果2天沒回復(fù)，可以打電話問問情況。

筆試基本就是這樣，如果你各方面都考到了，專業(yè)技能也不錯(cuò)，溝通能力也到位，那么剩下的就看運(yùn)氣了。其實(shí)面試和筆試，運(yùn)氣都起很大作用。所以不要因?yàn)槊嬖嚮蛘吖P試沒通過就覺得自己不夠好。如果你真的有能力達(dá)到要求，但是沒通過，那么不是你的問題，而是公司、部門、面試官的問題。好公司那么多，總有一個(gè)會(huì)成功的~

如有侵權(quán)請(qǐng)聯(lián)系刪除！