近年越發(fā)覺得如果 UI 設(shè)計師完全沒有平面的基礎(chǔ)，視覺表現(xiàn)能力上就會極度匱乏，是無法應(yīng)對實際工作需要的。

這種匱乏表現(xiàn)在方方面面，做一個字段多的組件排列得非常奇怪，設(shè)計項目展示的時候內(nèi)容十分局促，做作品集封面的時候放飛自我……

所以考慮了很久，還是覺得需要做一個系列，針對平面入門的知識點(diǎn)進(jìn)行輸出，讓大家不會被這些必備基礎(chǔ)拖后腿。

下面是正文內(nèi)容。

平面設(shè)計是什么

首先我們要具體定義一下，平面設(shè)計是什么。平面設(shè)計（ Graphic Design ）也叫做「視覺傳達(dá)」，是大學(xué)設(shè)立的平面專業(yè)名稱。

它是一個囊括非常多細(xì)分類目的綜合學(xué)科，主要包含字體、版式、廣告、品牌、包裝、運(yùn)營等類目。是經(jīng)歷數(shù)個世紀(jì)的發(fā)展和洗禮擴(kuò)充而成的，所以我們用一個時間線來簡單做個掃盲。

在 「上古時期」 印刷和造紙術(shù)普及后，書報的印刷就需要對字體、版式進(jìn)行功能性的設(shè)計，滿足閱讀的需要，這就是平面設(shè)計的雛形。

工業(yè)革命時期，平面設(shè)計的任務(wù)就是滿足資本擴(kuò)張的需要，提高信息傳播效率，應(yīng)用更多元的視覺元素，減少文字?jǐn)?shù)量，增加用戶對所傳達(dá)信息的理解和興趣。

隨著資本主義的升級，企業(yè)開始進(jìn)一步追求對消費(fèi)者的影響力，而這種影響力被抽象成 「品牌」 的概念，于是平面設(shè)計開始注重更抽象的標(biāo)識、視覺系統(tǒng)，也就是現(xiàn)在我們所說的品牌視覺設(shè)計。

二戰(zhàn)結(jié)束以后，美國經(jīng)濟(jì)的騰飛和全球化的熱潮，使得消費(fèi)主義興盛，廠商和企業(yè)開始更注重商品的外觀和樣式，除了工業(yè)設(shè)計以外，包裝和圖形的設(shè)計也得到飛速的發(fā)展，成為一個重要的門類。

最后，進(jìn)入20世紀(jì)末尾，互聯(lián)網(wǎng)的發(fā)展使得平面內(nèi)容的載體發(fā)生根本性的變化，從三維空間的實體轉(zhuǎn)變成由數(shù)據(jù)轉(zhuǎn)化成的像素點(diǎn)陣圖。平面廣告的多媒體化，甚至可以讓消費(fèi)者參與到信息傳達(dá)的互動過程中，我們也叫它 —— 運(yùn)營設(shè)計。

上面提到的這些類目都是平面設(shè)計的一部分，你既可以只專精一個領(lǐng)域，也可以雨露均沾。平面設(shè)計只是一個泛指，我們學(xué)習(xí)平面設(shè)計，就是作用到其中的某個類目中去。

值得關(guān)注的問題是，平面設(shè)計的發(fā)展是完全伴隨著商業(yè)社會的發(fā)展而興盛的，用一句話來描述它 —— 平面設(shè)計就是通過編排內(nèi)容元素去傳達(dá)語義信息的商業(yè)行為。傳達(dá)語義信息，就是它和攝影、涂鴉、插畫、圖案藝術(shù)的本質(zhì)。

比如下圖是應(yīng)用了 Gary Oldman 的海報和他的攝影照片，具備了語義信息，那就是平面設(shè)計而不是攝影了。

UI 設(shè)計師和平面的糾葛

我們都知道 UI 設(shè)計和平面設(shè)計也是有區(qū)別的，最大的不同點(diǎn)是 UI 元素設(shè)計出來是和用戶互動的，并且它的載體完全在電子屏幕和系統(tǒng)中。所以 UI 的設(shè)計需要比平面多考慮關(guān)于交互、規(guī)范、體驗、開發(fā)邊界等問題。

但是！除了一些思考方式的不同以外，UI 在界面視覺設(shè)計上使用的技能，還是包含在平面設(shè)計的體系之內(nèi)。比如上方 UI 界面的案例，使用的排版、配色技巧，都只是平面的知識點(diǎn)內(nèi)容。

如果平面的基礎(chǔ)排版能力過關(guān)，掌握 UI 的相關(guān)規(guī)范以后就可以很快上手，在不考慮交互的前提下設(shè)計出類似追波主頁的界面是信手拈來的。所以優(yōu)秀的視覺設(shè)計師偶爾做做 UI 界面會造成一種對 UI 設(shè)計師 「降維打擊」 的錯愕。

好的平面視覺能力，不一定能做出體驗優(yōu)異的界面，但良好的體驗中一定包含優(yōu)秀的平面視覺。學(xué)習(xí) UI 的界面設(shè)計其實就是在掌握平面基礎(chǔ)的一個過程，它是我們做出優(yōu)秀產(chǎn)品的必要非充分條件。

再者，UI 設(shè)計師的職業(yè)輸出內(nèi)容并不僅僅只有 UI 界面而已，雖然它最重要，但圍繞項目展開的輸出成果還包含項目的評審展示、規(guī)范文檔、PPT 等等。

沒有基本的平面能力，這些工作就會做得一團(tuán)糟，甚至粗糙得讓開發(fā)同事覺得你擔(dān)不起設(shè)計師這個稱號，叫美工都嫌是贊譽(yù)了。

還有，在目前 UI 的職業(yè)發(fā)展中，在轉(zhuǎn)成管理崗脫離一線之前，基本不可能只負(fù)責(zé) UI 有關(guān)的設(shè)計而已，還需要處理大量的運(yùn)營設(shè)計需求，以及企業(yè)的日常需求。

比如最讓 UI 設(shè)計師深惡痛絕的 Banenr、H5 頁面設(shè)計。

再到讓我們無法回避的企業(yè)內(nèi)部物料的設(shè)計，比如名片、紙杯、折頁、展架等。

除了實際和工作內(nèi)容，對于設(shè)計師身份最重要的證明，就是作品集了。但無論是哪個行業(yè)要設(shè)計作品集，本質(zhì)上都是通過平面技巧來完成的。

在室內(nèi)、建筑、服裝等行業(yè)，高級設(shè)計師或工作室的作品集通常會制作成一套畫冊，通過外包給平面設(shè)計師來完成，比如下面這種。

但對于 UI 設(shè)計師來說，讓我們的作品集經(jīng)他人之手產(chǎn)出是不可能的，需要我們自食其力。所以如何來完成作品集基本頁面內(nèi)容的設(shè)計，對項目的包裝，就成為每個 UI 設(shè)計師都需要面對的問題。

而作品集中，對項目的包裝（Zhuang B），會對自身水平的展現(xiàn)起決定性作用，無論是在 Behance 還是站酷，能上首頁的先不論實際界面專業(yè)度如何，展示的高大上是必不可少的。

這種現(xiàn)象的形成，好壞的影響都有，但不管怎么分析，實事擺在那里，不能將自己的作品、業(yè)務(wù)能力通過良好的平面技巧輸出，那么對面試官來說就是 「弱雞」、「菜鳥」、「新手」 還是別的什么不好的身份。

設(shè)計師終究是以 「色」 示人的行當(dāng)，視覺效果太差，就沒人在意你的想法和實際成果，這時別埋怨馬老板們只看得上花枝招展的妖艷JH，而忽視你有趣的靈魂（前提是你有的話）。

學(xué)習(xí) 「茶藝」，刻不容緩吶！

知道平面能力對于 UI 設(shè)計師來說有多重要了嘛？

結(jié)尾

本篇先做個掃盲，到下一篇開始就會針對平面的一些理論作出說明，正式講解有關(guān)平面的知識點(diǎn)。也希望大家可以重視這個問題。

來不及看下期的同學(xué)也可以先看這兩篇：

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」