一、初級(jí) UI 的技能困境

很多設(shè)計(jì)師工作了幾年但依舊進(jìn)步緩慢，始終在底層打轉(zhuǎn)找不到提升的方式，比如在下圖發(fā)文前社群里一個(gè)同學(xué)的疑問：

雖然很多同學(xué)不想安于現(xiàn)狀，但對(duì)職業(yè)的上升沒有太多的認(rèn)識(shí)和經(jīng)驗(yàn)，所以會(huì)陷入糾結(jié)，或選擇了一些錯(cuò)誤的方法，即使耗費(fèi)了很多時(shí)間也處于原地踏步的階段。

本質(zhì)上的問題——想的太多，做的太少！UI 設(shè)計(jì)師本身囊括的技能和花活不少，進(jìn)階可以深入體驗(yàn)、交互、產(chǎn)品的分析類技能，擴(kuò)展的可以延伸到面、字體、合成、AI 繪圖等。原則上說每個(gè)技能對(duì)于 UI 設(shè)計(jì)師來講都有價(jià)值，都有學(xué)習(xí)他們的理由和應(yīng)用場(chǎng)景。但還是那句話，主次的問題……

很多進(jìn)階的能力在前期沒有發(fā)揮的余地，如果基礎(chǔ)技能也不足以支撐這些進(jìn)階的想法，那它們就更沒有價(jià)值。而擴(kuò)展型的技能是用來錦上添花的，如果基礎(chǔ)能力不足，那就是 shi 上雕花……

初級(jí) UI 因?yàn)楣ぷ鞯年P(guān)系做的雜，會(huì)負(fù)責(zé)各種零碎的、和 UI 不相關(guān)的工作，所以自然而然會(huì)把這些納入職業(yè)增長(zhǎng)的考量因素里。并且其它方向真學(xué)起來也不容易，往往投入多，見效慢，我們就不得不面對(duì)性價(jià)比的問題，花那么多時(shí)間學(xué)某某技能，值得嗎？雖然情況會(huì)有很多，不能一概而論，但我只想給還在糾結(jié)的同學(xué)一個(gè)回答 —— 不值得。

經(jīng)歷越多越能明白一件事，對(duì)未來的判斷是需要經(jīng)驗(yàn)和信仰支撐的，如果你們既沒經(jīng)驗(yàn)又沒信仰，就會(huì)質(zhì)疑所有職業(yè)規(guī)劃上決策，用各種問題去辯駁和拷打它們，直到說服自己這么做沒意義。畢竟只處于職業(yè)初級(jí)階段，你們要做的是把問題簡(jiǎn)化，而不是一直問題復(fù)雜到無法應(yīng)對(duì)，自己嚇自己，把大好人生給內(nèi)耗完了。

我對(duì)于初級(jí) UI 的建議，就是建立一個(gè)簡(jiǎn)單的、有效的邏輯，認(rèn)可它，篤信它，根據(jù)它的指示實(shí)踐就行了，這是高效的根本。而這套邏輯很簡(jiǎn)單，即做好 UI 設(shè)計(jì)師的本職工作 —— 界面設(shè)計(jì)，通過提升界面設(shè)計(jì)能力來實(shí)現(xiàn)職業(yè)的上升和進(jìn)步。因?yàn)檫@個(gè)邏輯太直白太基礎(chǔ)，就算是新人大多也對(duì)它不屑一顧。即便剛接觸 UI 也能說出界面設(shè)計(jì)不重要，對(duì)于 UI 設(shè)計(jì)來說最重要的是產(chǎn)品思維、體驗(yàn)設(shè)計(jì)之類的話。這些理念在互聯(lián)網(wǎng)行業(yè)屬于"政治正確"的口號(hào)，無可辯駁，但是它們都是有前置條件的，就是你的界面起碼得做到及格線以上的水平，否則這些口號(hào)就只是一些假大空的囈語。

界面設(shè)計(jì)做好難嗎？真不難。但是能做到及格水平的 UI 設(shè)計(jì)師不及半數(shù)，能做到優(yōu)秀的估計(jì)只有一成不到。這個(gè)比例是遠(yuǎn)遠(yuǎn)比你們想的低的，如果有在自己公司招聘初級(jí)設(shè)計(jì)師時(shí)檢查過他們的簡(jiǎn)歷，就一定對(duì)這個(gè)問題深有體會(huì)。沒有招聘經(jīng)驗(yàn)也沒關(guān)系，到站酷等網(wǎng)站在作品中打開全部推薦這一級(jí)和最近更新，你們會(huì)發(fā)現(xiàn)絕大多數(shù)作品集的質(zhì)量低到令人發(fā)指，甚至工作了一兩年移動(dòng)端規(guī)范都搞不明白……

再說簡(jiǎn)單點(diǎn)，多數(shù)初級(jí) UI 設(shè)計(jì)師的界面設(shè)計(jì)能力差到?jīng)]有討論任何其它職業(yè)規(guī)劃的必要，絕大多數(shù)初級(jí)設(shè)計(jì)師甚至連間距都控制不好，稍微復(fù)雜點(diǎn)的圖標(biāo)都畫不出來！而你們?cè)诔跫?jí)階段要做的，就是狠狠地提升相關(guān)能力，你可以找很多理由來強(qiáng)調(diào)其它能力的重要性，但你永遠(yuǎn)沒辦法更改它是整個(gè)職業(yè)存在的原因。缺乏其它技能可能給我們帶來一些職業(yè)上的阻力和可能性，但足夠優(yōu)秀的界面設(shè)計(jì)能力可以給你帶來更多的可能和機(jī)會(huì)。說白了，就是把職業(yè)前期發(fā)展邏輯簡(jiǎn)化成一力降十會(huì)（很應(yīng)景），以力破敲，讓其它方面的缺陷在你的核心能力面前都顯得不那么重要。

順帶多提一句，很多初級(jí)設(shè)計(jì)師覺得界面設(shè)計(jì)本身重要性不高，去提升各種其它技能，但界面都做不好普遍其它技能水平也不怎么樣……就是廣而不精，兩頭不討好。不要把自己走馬觀花淺學(xué)的眾多技能當(dāng)成優(yōu)勢(shì)，這只是讓自己去適配初級(jí)的工作崗位和低端的工作環(huán)境而已！

二、界面臨摹的方式解析

那怎么提升界面設(shè)計(jì)的能力？

臨??！

臨摹！

臨?。?/p>

這個(gè)必須要說三遍，過去我們分享了很多界面設(shè)計(jì)的技巧還有方法，但不管怎么輸出怎么分享，對(duì)大多數(shù)同學(xué)來說提升都是有限的，因?yàn)槲覀儼l(fā)現(xiàn)很多同學(xué)的界面提升的過程真的只是用看的……技巧再有用光看不練也白搭。而以真實(shí)項(xiàng)目或者改版項(xiàng)目的界面為對(duì)象并不合適，因?yàn)橛刑囝~外需要考慮的問題，比如產(chǎn)品需求、用戶體驗(yàn)、交互方式等等。被這些事情干擾想要心無旁騖的做界面是不可能的，所以要跳出這個(gè)范疇。而臨摹就是最好的實(shí)踐途徑，它的作用也越來越被新人低估，而即使有同學(xué)想要做臨摹練習(xí)也會(huì)陷入應(yīng)該臨摹什么如何臨摹的疑問中，所以我要對(duì)臨摹界面做一次具體的分享。

首先是臨摹的選題，在 UI 行業(yè)盛行臨摹的時(shí)期，主要的臨摹對(duì)象是追波的飛機(jī)稿。因?yàn)楫?dāng)時(shí)國(guó)內(nèi)應(yīng)用、案例普遍設(shè)計(jì)質(zhì)量低下，而追波上的設(shè)計(jì)稿看起來充滿創(chuàng)意和設(shè)計(jì)性，能帶來很強(qiáng)的視覺沖擊，所以成為了普遍的選擇對(duì)象，這種慣性甚至保持到了現(xiàn)在。

但時(shí)代已經(jīng)變了，不客氣的說追波上的飛機(jī)稿這 10 年都沒什么太大的進(jìn)步，畢竟這些飛機(jī)稿都是新手（國(guó)外的）才會(huì)去上傳的練習(xí)。先不說設(shè)計(jì)得好不好看，很多界面是完全脫離可用規(guī)范當(dāng)平面設(shè)計(jì)做的，這種臨摹只會(huì)起到反效果。而國(guó)內(nèi) UI 行業(yè)在這 10 年已經(jīng)卷出新高度，很多上線的界面放過去完全就是飛機(jī)稿不會(huì)開發(fā)出來，而且已經(jīng)完全和國(guó)外的設(shè)計(jì)脫軌走出自己的設(shè)計(jì)行情了，這個(gè)在之前的分享里已經(jīng)提過。

再臨摹國(guó)外飛機(jī)稿顯然是沒有太大意義的，一方面它們的質(zhì)量不夠好漏洞百出，另一方面這些設(shè)計(jì)風(fēng)格顯然跟不上國(guó)內(nèi)招聘和項(xiàng)目的真實(shí)需求，做多了只會(huì)產(chǎn)生負(fù)面影響。所以，要進(jìn)行臨摹，就不要舍近求遠(yuǎn)去找一些國(guó)外的作品，而是直接聚焦在 —— 已上線應(yīng)用界面。這些大廠的應(yīng)用大家手機(jī)里肯定都有裝，沒有裝也可以去應(yīng)用商店下，其中優(yōu)質(zhì)的界面非常多，你沒有任何找不到優(yōu)秀的線上項(xiàng)目界面的理由。

應(yīng)用頁面太多找起來很費(fèi)事頁不要緊，直接從這些復(fù)雜的主頁開始臨摹起，不管是生活還是電商、理財(cái)、視頻類的應(yīng)用，首頁作為門面都花了很大力氣去設(shè)計(jì)和調(diào)整，非常具有參考性。

解決了選題，下一個(gè)問題就是如何臨??？

提升設(shè)計(jì)能力的臨摹，絕對(duì)不是照著界面畫一遍該畫的東西畫完就行了，也不是要把原圖疊在畫布上畫得一模一樣，而是要在臨摹過程中，發(fā)現(xiàn)設(shè)計(jì)的細(xì)節(jié)，理解原設(shè)計(jì)的優(yōu)點(diǎn)，甚至是能夠找出原設(shè)計(jì)的缺陷并去微調(diào)它們。以一個(gè)新的課程臨摹案例舉例，餓了么主頁剛開始臨摹你就會(huì)發(fā)現(xiàn)左上角的分頁標(biāo)題和下方的元素是不對(duì)齊的。而這可不是設(shè)計(jì)或開發(fā)還原的問題，而是對(duì)齊了就會(huì)因?yàn)橄路绞谴髨A角而產(chǎn)生視覺差顯得文本更靠左。

而在列表標(biāo)簽選項(xiàng)組件中，隱藏著非常細(xì)微的差異，就是上間距大于下間距，因?yàn)闃?biāo)簽控制的是下方的列表所以應(yīng)用了親密性原則。

再到底部的卡片組件，這種組件直接臨摹的結(jié)果一定很不好，你會(huì)發(fā)現(xiàn)你很難控制卡片的高度，且卡片內(nèi)元素底部很難對(duì)齊。所以仔細(xì)思考它的設(shè)計(jì)應(yīng)該是先完成右側(cè)的內(nèi)容確定高度，然后再填充左側(cè)的方形封面圖，下方的面板再和右側(cè)內(nèi)容對(duì)齊。

當(dāng)然完成這些臨摹首先要掌握標(biāo)準(zhǔn)的 UI 界面設(shè)計(jì)方法，僅靠軟件掌握的部分肯定是不夠的，并且要把臨摹界面和圖標(biāo)、動(dòng)效兩個(gè)技能分開。上面列舉的幾個(gè)小點(diǎn)只是冰山一角，更多的大家可以直接看課程內(nèi)容。當(dāng)你掌握一定的技巧和基礎(chǔ)再去臨摹，才有發(fā)現(xiàn)問題并思考的能力，而因?yàn)槭桥R摹要還原它們，你就不得不關(guān)注細(xì)節(jié)，不用像素級(jí)的檢查模式去看這些界面，你就絕對(duì)不會(huì)去關(guān)注這些細(xì)節(jié)，也就錯(cuò)過了大量提升認(rèn)知的機(jī)會(huì)。

除了臨摹的方法，再往后就是臨摹的頻率。對(duì)于新人而言，一開始的臨摹速度必然是比較慢的，可能幾天才能臨摹一個(gè)界面，但隨著經(jīng)驗(yàn)的增長(zhǎng)你的效率會(huì)越來越高，以上面頁面為例的話，就應(yīng)該是個(gè)一兩個(gè)小時(shí)就能做完的級(jí)別。而你們真的迫切想提升，那就以天為單位練習(xí)，定一個(gè)臨摹的頁面總量，比如一百個(gè)頁面，在接下來的兩三個(gè)月內(nèi)把它們臨摹完。這是個(gè)很簡(jiǎn)單粗暴的練習(xí)模式，可以很負(fù)責(zé)任的說效果拔群，遠(yuǎn)遠(yuǎn)比你們想象的有用，認(rèn)真臨摹完的結(jié)果可以讓你在完成后脫胎換骨，超過 9 成的在職 UI 設(shè)計(jì)師。

但很遺憾很少有人能達(dá)成這樣的目標(biāo)，因?yàn)槎鄶?shù)人掌握了軟件以后就看不上臨摹了，興沖沖的去學(xué)習(xí)其它的東西，即使他們的界面設(shè)計(jì)水平還是一塌糊涂。而做項(xiàng)目還是自己構(gòu)思的頁面雖然也會(huì)有提升，但就像前面說的，這個(gè)設(shè)計(jì)過程還有很多別的干擾，對(duì)于界面的提升效率非常有限。而上面放的已經(jīng)上線的界面可以作為一種評(píng)判標(biāo)準(zhǔn)，如果你自己設(shè)計(jì)的界面還沒有這些界面設(shè)計(jì)的水平好，證明你離做好界面還有差距，達(dá)不到一個(gè)專業(yè) UI 設(shè)計(jì)師應(yīng)該具備的基礎(chǔ)水平。

不要以自己看著覺得湊合的設(shè)計(jì)當(dāng)成是合理有效的，在中高端的招聘中這些大廠項(xiàng)目界面的輸出質(zhì)量是底線，你離它們還有多遠(yuǎn)？如圖已經(jīng)工作了幾年還做不到，那就只能說連界面設(shè)計(jì)的入門都還沒有。

談卷？談體驗(yàn)？談交互？談產(chǎn)品思維？

……升職加薪？

結(jié)尾

最近也仔細(xì)思考了下一些學(xué)員界面始終做不好的問題，我分享再多經(jīng)驗(yàn)技巧也沒用，因?yàn)榫毜貌粔蚨啵覜]有按對(duì)的方式練習(xí)。所以干脆我自己完整的把這些臨摹的過程復(fù)現(xiàn)一遍，仔細(xì)指出和講解這些細(xì)節(jié)，帶他們做一遍。

作者：超人的電話亭