@Ericlee的腦洞 授權MICU設計釋出
www。zcool。com。cn/article/ZMTIxODQ0NA==。html
——————————————————————-
本篇是作者親身經歷並且撰寫，希望能幫到更多的UI設計碰壁的人～
乾貨提前
收藏
！公眾號改版後推送不會按順序展示。把咱們
設為星標
，每一期乾貨經驗與方法，都會被微信置頂！
點選下方，即可關注星標
超30000+大廠設計師已星標
如果面試官最後跟你說類似“我們這個崗位有測試題需要做”或者“我們會留測試題給你”的話術，那麼恭喜你，一面通過了。接下來就是hr或者面試官會把測試題打包成zip或者rar或者pdf的格式發到你作品集上的郵箱，收到後郵件後，仔細閱讀要求；仔細閱讀要求；仔細閱讀要求！！特別是標紅的文字，有的設計師不看要求直接就去做，反而適得其反。那麼測試題的郵件具體長什麼樣子呢，就是下面這個圖：
為什麼要做筆試題呢？
對於公司來說
考察面試者的真實能力，近些年陸陸續續作品集造假太多了，如果沒有筆試題，面試者進入公司做的東西和作品集相差甚遠，那麼公司付出的成本會是很多很多。這方面主要考慮的是公司人力成本。
對於自身而言
在做筆試題的過程中，可以瞭解到相關業務，包括對產品的理解，架構，熟悉產品，走查產品的過程，還能夠幫助團隊未發現的問題，自己在做筆試題的過程中發現後，提案到筆試題中，是不是也是一個能力的展現呢。
之前也收到過測試題，也有同學讓我看過測試題，同時也給面試者發過測試題。大多數初級設計師的測試題基本就是一張圖片，jpg的格式就發過去了，怎麼說呢，個人不太建議這麼做，太簡單了。如果我是面試官，我希望看到的是你全域性的一個思考以及對一個產品或者需求的理解，其實測試題也是一個需求，那麼最好的方式就是以pdf的形式提交，如果會做動畫（前提是動畫效果細膩入微，不生硬；如果你的動畫比較硬或者只是會動，那麼不建議去做，這樣暴露了你的短板），那麼就是pdf+mp4的形式提交。
設計工具
UI做測試題的話，現在國內大廠基本都在用sketch+藍湖，但是部分大廠已經開始用figma了，我也是近期才接觸figma，已經體驗到了它的強大，未來趨勢差不多也是figma沒跑兒了，那麼簡要的說一下figma的強大在哪兒：
1.sketch缺點
之前用了兩年sketch，毛病太多；第一，更新太頻繁，組內每個同學使用的版本都不一樣，如果互傳原始檔的話，版本低的是不是很吃虧，打不開！而且原始檔過大的話，傳輸速度太慢，有時候因為網路問題中斷，影響效率。第二，有時候太卡了，導致軟體崩潰，你之前做的都白做了。第三，上傳藍湖後，新版的藍湖14天后，連結失效，是不是還得重新給？專案多了，找半天，效率又低了吧？
2.figma優勢
第一，快速；其實介面和xd用起來有點類似那種感覺，而且至今不會卡死。第二，同時多人線上編輯，這幾乎是figma最大的優勢了，沒有哪個設計軟體是同時多人線上編輯的，便於實時反饋資訊，收集資訊，加強團隊溝通成本。第三，只需要一個軟體，就能完成PM需求 - UX互動 - UI設計 - 研發的過程，是不是很爽。
不過最後還是要迎合團隊用什麼設計軟體。
比如你要做一個某音樂類app的首頁改版設計的測試題，切忌拿到題目馬上開始擼圖。首先要明確哪個前提？
1.充分的進行思考
拿到筆試題，首先先看需求，我們做筆試題其實也是在做一個需求，然後大致瀏覽一下原型圖結構，明確需求後，再開始做。這裡需要強調一點是：如果看需求後有疑問，一定要去和麵試官主動溝通，不要不懂裝懂，自以為是，結果提交上去的提示題不盡人意，切忌不要害羞，要主動大膽的去表明自己的困惑。
2.品牌色
切忌改人家的品牌色，是什麼顏色就用什麼顏色，如果沒有給你提供色值，你就開啟app用吸管吸就行。品牌色是體現一個app屬性最終要的途徑之一，不要隨意改動。
3
.分析原型圖
切忌做原型的美工，意思就是你把人家的原型圖照搬過來，上個色就完事了，那還要ui幹啥！你需要梳理當中的互動邏輯以及跳轉邏輯，還有功能，原型圖中功能點的擺放是否還有最優解法，舉個例子：
我們要針對原型圖的設計，來設計可以解決使用者問題的UI設計，也就是所謂的最優解法：
4.不要隨意增刪東西
不要增加和刪除人家測試題裡的東西，一個都不行！！如果實在有自己的創意點，建議你按照人家的出一版，隨後將你的創意點再出一版，而且要說明為啥這麼做）
5.視覺第一還是落地第一
這個仔細審題就行，一般題目裡會寫到，比如有幾個關鍵詞會體現：如果出現類似“大膽發揮”、“不拘泥於現有視覺形式”、“突破當前風格”這種，那麼你就可以適當的去突破一下視覺層面的東西，這個的意思就是讓你充分發揮自己的設計優勢，在當前測試圖頁面上做個視覺突破。
那麼測試題應該具體細化到什麼程度呢？個人認為主要要做以下幾個部分，也可以理解成幾個頁面，順序是這麼來的：
第一步：找競品
找市面上音樂類app top前三，然後把首頁截圖下來，分析他們的視覺特性和功能特性；要注意：目的是做競品分析，不是讓你去抄他們的設計，要分析它們哪裡做的好，哪裡做的不好；其實找競品的過程也是給自己一個熟悉的過程，除了國內top三外，國外的也可以找出來進行分析，這是一個必要的過程，往文件內貼圖的時候，也要注意一下排版，不要隨隨便便就放上去了，要知道，測試題不光看頁面，任何地方都在體現著一名設計師的基本功。
第二步，做一些精緻的東西
根據題目，繪製icon（分金剛區和導航區），為什麼要單獨拿出來說呢？這裡要提的一點是：icon一定要好好畫，而且要精緻，icon是體現UI設計師基本功的一個重要的點，切忌不要去下載，有時候你下載的未必統一！UI的筆試題，肯定有icon的部分，是否出彩，是否能博人眼球，在這裡會體現一下，比如我自己的排版：
第三步：開始做圖
首先要搭大框架，從頂部狀態列一直到底部導航欄，這裡要做幾個統一：
1。如果沒有特別的要求，一般用iPhone x尺寸來做，明確好狀態列、navbar、內容區、底部導航欄的高度（底部導航3-5個圖示，要分佈好對齊關係）
2。頁面邊距，一般都是16或者20。
3。統一字型字重行高間距（以2倍圖為例，一般最小字號24，以4逐漸遞增，那麼就是24、28、32這樣，最小注釋差不多就是20的樣子，特殊情況除外。間距一般是8的倍數遞增，8、16、24 以此類推。）
4。統一卡片（卡片圓角、卡片間距）
5。統一標題與正文的字型與間距（標題一般是加醋，字號沒有固定樣式，看具體需求。）
做圖的過程中，我們儘量去考慮哪些地方可以考慮有一些創意，比如最近流行的毛玻璃icon風格，就可以融入一些等等。
特別注意的是：我們在做完介面的時候，最好在包裝的時候，寫明介面裡的一些點，你是如何思考的，最好用簡短的文案描述清楚，有理有據，說明情況，可以讓面試官一目瞭然。
第四步，找圖
這步可以和第三步並行。俗話說三分在畫，七分在表。那麼介面可以說是三分在做，七分在圖了，特別是音樂類這些有專輯圖的介面裡，所以找一些高階感的圖來提升品質感，這裡就會涉及一個審美的問題，可能又有人問我怎麼來提升審美？其實提升審美一方面是基本功到位的情況下，隨著閱歷的提示而提升；如果不是科班出身，那麼可以下載幾個好的app、或者有好的設計雜誌、或者用eagle可以收藏很多精美的圖片來提升自己的審美感。下面我放幾個自己做的app介面，圖是不是可以撐起來整體質感呢？下面放一些我自己做的UI：
以上UI設計裡的圖片，是不是可以撐起來整個UI的質感呢？
第五步，細節決定成敗
大家在軟體裡做完介面後，一定要在手機裡預覽一下，sketch可以從applestore裡下載mirror，figma可以在applestore裡下載figma，直接搜就行；ps好像也有，最笨的辦法就是匯出2倍圖在手機裡檢視最終效果，來走查一些UI細節問題那麼需要走查的細節都有哪兒呢？
1。字型字號字重（字號不要超過3種，字重不要超過2種，特殊情況除外）
2。間距是否統一。
3。卡片圓角是否統一。
4。金剛區icon或者導航icon視覺重量是否一致。
5。整體品牌色滲透是否足夠。
6。是否有創意點（一個即可）
第六步，測試題包裝（尺寸1920*1080）
牛逼的介面做完了，那麼並不是就完事了，需要進行包裝一下，顯得完整、專業一些，證明你的態度也是很誠懇並且也是對本次面試的一種認真。那麼如何包裝呢？控制在10頁內就行，以下是包裝過程：
1.封面（1頁）
封面主要考驗你的版式能力和視覺基礎，個人認為簡潔就好， 不用做的特別複雜～
2.競品分析（1-2頁）
把你做測試題前提調研的過程，得出的分析結論（一定是正確的結論）放進去，簡單一些，不用寫太多冗餘的文字。控制在2頁就行。
3.規範類（1-2p）
放一些你做的精緻圖示，出彩的東西，比如金剛區圖示，功能類圖示；然後再加一些輔助線，證明專業性。同時可以放一些顏色規範，字型規範，柵格規範等等。
4.主介面（要加分析，2-3p）
-先放設計好的介面，這一頁要加一些你的思考，也就是說在這個頁面裡，你為什麼這麼做，一些理論依據，可以加一些站在使用者角度思考的點。
-如果測試題郵件裡發了舊的頁面，讓你改版設計，那麼這一頁你可以左右佈局，左邊放舊頁面，右邊放新設計的頁面，形成左右對比可以讓面試官一眼能看出來差異，同時也要放一些文案說明，寫一下哪兒設計的好，為什麼這麼做。
5.頁面單獨包裝（1p）
可以下載一些精緻度很高的樣機，把你設計的頁面包裝一下，模擬真實場景下的使用情景。
6.尾頁（1p）
也就是“謝謝”“期待您的聯絡”這類的話語，明確一點就是：最好從封面開始到中間頁到結束，每頁都要與首頁的顏色有關聯，有始有終，版式設計上要講究。
第七步，匯出-檔案命名
我們在軟體裡做完後，需要整合成pdf形式，推薦adobe Acrobat，裡面自帶壓縮，最好保證在10M內，5M內極佳。檔案命名為：測試題名字-姓名-日期。
Adobe acrobat的壓縮方式，下圖：
第八步，傳送郵件
以為第七步就完事了對嗎？那大大錯了！第七步也是很重要的，標題這塊，一定要寫，有的同學不寫標題；還有的不寫正文；更離譜的寫了標題正文，附件竟然忘了上傳。。。那麼具體應該是這樣的：
-郵件標題：******測試題
-正文格式（參考）：
您好，筆試題在附件中，請查收下載～
期待加入***公司**設計部，謝謝～
記得要上傳附件！
記得要上傳附件！
記得要上傳附件！
第九步，微信/電話/簡訊建立溝通
這才是最後一步！面試官真的是太忙了，一天篩幾百份作品集不說，估計急招一天至少面試5個人，從早到晚，很忙很忙，這裡我建議如果加了微信，發完郵件直接微信告知，如果沒有，郵件裡必然有電話號，那麼我不建議打電話，發簡訊告知即可，如果2天內沒回復，可以打個電話問問情況。
關於筆試題基本就是這些情況，做到面面俱到，專業能力沒問題，溝通能力到位，那麼剩下的就看運氣了，其實面試和筆試題，有一部分真的是運氣成分佔了很多，所以大家不要覺得一次的面試失敗或者筆試題失敗就覺得自己不行，如果自己真的能力達到要求了，卻沒有透過，那麼就不是你自己的問題了，就是公司或者部門以及面試官那邊的問題。好的公司這麼多，總有一個會成功的～
彩蛋福利：
贈送大家“高階作品包裝素材”
感興趣的小夥伴可以都拿去！
領取方式如下：
1。文章底部點個 在看
2。新增小編微信，備註 作品包裝 ，小編會將下載地址發給你。
已有小編微信的，無需重複新增
提前加好友，領福利更快捷
