如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

設(shè)計風(fēng)格是一種很虛的東西，對于大部分的 UI 設(shè)計師來說，都是如此。

相信很多人都是在一家小型的互聯(lián)網(wǎng)公司做設(shè)計，估計還是公司唯一的設(shè)計師，同時對設(shè)計風(fēng)格又拿捏不定，總感覺是跟著產(chǎn)品經(jīng)理或老板的思路去做設(shè)計。比如老板的要求是“大氣”，誰 TM 知道這“大氣”指的什么鬼？

即使花了不少時間去研究其他公司的產(chǎn)品，依然做不出領(lǐng)導(dǎo)滿意的視覺稿，最后還被各個崗位的同事指點著去修改你一把屎一把尿喂大的稿子。

我上面也說了，其實這種事情（講述設(shè)計風(fēng)格）對于視覺設(shè)計師而言是一種很常見的現(xiàn)象。我身邊也同樣有很多設(shè)計師出現(xiàn)這個問題，不知道如何向領(lǐng)導(dǎo)或客戶講述自己的設(shè)計風(fēng)格。

說個現(xiàn)象，仔細(xì)想想自己是不是這樣的：我們在做視覺評審的時候，設(shè)計師講述的常常是文字對齊、線條、高斯模糊、圖片大小等視覺表現(xiàn)，有時候甚至沉醉于 icon 的角度及尺寸的問題。面對于產(chǎn)品經(jīng)理與程序員的質(zhì)疑只能說：我覺得這樣更好看、這樣比較適合我們產(chǎn)品的風(fēng)格…之類的話。要知道，這些理由在如今這個以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的互聯(lián)網(wǎng)時代已顯得蒼白無力。

實話實話，想要把設(shè)計風(fēng)格講清楚，的確不是一件容易的事。但絕對要避免從感性的角度來闡述事實的這種習(xí)慣，畢竟現(xiàn)在的移動產(chǎn)品從視覺表現(xiàn)力方面正在逐步降低要求，這種環(huán)境的變化也是要求視覺設(shè)計師應(yīng)該主動去加強設(shè)計思路的原因。

為什么要用這個顏色，為什么要用線條、模糊、留白、卡片、陰影…說這么多干嘛？別人能懂？即使聽懂了，他也會從他的角度來告訴你：那我覺得這個陰影不要會更好。你怎么回復(fù)？

就像我說的，如果你針對你設(shè)計的視覺稿進(jìn)行這種細(xì)致問題的解答，那么永遠(yuǎn)都不會有規(guī)范型的答案。視覺風(fēng)格講的是一個整體感受，這就需要我們從更高一個層面來解釋這個問題。

接下來我將從以下 5 個維度來說說視覺設(shè)計師講述設(shè)計風(fēng)格的方法：

1. 產(chǎn)品全局色系
2. 系統(tǒng)圖標(biāo)
3. 字體規(guī)范
4. 圖片的使用
5. 視覺操作引導(dǎo)

1. 產(chǎn)品全局色系

從全局色系的角度出發(fā)。如果你仔細(xì)分析過那些優(yōu)秀的 App，你會發(fā)現(xiàn)它們的顏色使用的是非常謹(jǐn)慎的。當(dāng)中絕大部分都只會用 3 到 4 個顏色用于突出信息的層次。就好比我之前寫的那篇配色文章《零基礎(chǔ)小白利用谷歌這個神器，也能成為配色達(dá)人！》一樣，由主色、強調(diào)色、輔助色組成的整體色系，即一個產(chǎn)品的色彩風(fēng)格。

這里需要注意的是，我們在闡述頁面色彩的時候，不應(yīng)該說：我認(rèn)為紅色比黃色更適合。而是結(jié)合這幾種顏色組成的全局色系來說明這幾個顏色的搭配能突出需求方想要的“時尚”或“大氣”的要求。

這么做的好處是，需求方會認(rèn)為你的說明非常的專業(yè)，不會隨意修改你的 Idea 。更重要的是，你可以掌握主動權(quán)，而不是以“我認(rèn)為”的方式作為被動方。

2. 系統(tǒng)圖標(biāo)

說到圖標(biāo)，相信很多設(shè)計師都是去 Iconfont 等網(wǎng)站下載，籌齊一套直接使用。我之前也說過，系統(tǒng)圖標(biāo)的設(shè)計是考驗一個設(shè)計師功底的重要條件，所以自己設(shè)計圖標(biāo)非常重要。

一款 App 需要一套易于識別的 Icon 來輔助信息展示，因此圖標(biāo)的風(fēng)格能夠突顯出這款產(chǎn)品的整體風(fēng)格。那么在講述的過程中，你需要說明的是為什么你會使用這套線性 Icon 或填色 Icon，以及它所能展示的信息為何能夠更符合你產(chǎn)品的風(fēng)格。

而不是糾結(jié)這個圖標(biāo)的尺寸是多大，或者適不適合它所表達(dá)的意思，因為這些東西是在你講述設(shè)計風(fēng)格之前就應(yīng)該定好的，它們由設(shè)計師來做決策，并不是在講述設(shè)計風(fēng)格的時候再去說明的（假如你在面試的時候如果說這些，面試官會覺得你的設(shè)計認(rèn)知非常的基礎(chǔ)）。

3. 字體規(guī)范

字體是 App 界面中最重要的信息組成部分，相信這句話大部分都會認(rèn)同，這也是大家一直爭論為什么英文字體的排版比中文字體排版更好看的原因之一。

我們經(jīng)常聽到如：這個產(chǎn)品看上去很簡潔、舒服、重點突出，而這其中最主要的原因就是文字的排版。

一般來說，我們會從產(chǎn)品的字體、字號、顏色等來說明字體規(guī)范，再重點去關(guān)注標(biāo)題、文本信息以及引導(dǎo)信息的字體字號，通過設(shè)計對信息進(jìn)行層次的區(qū)分，希望借此來引導(dǎo)用戶的視覺焦點。

所以在說明設(shè)計風(fēng)格時，要著重去提字體規(guī)范這塊。

4. 圖片的使用

圖片是 App 信息組成的重要元素，它的風(fēng)格會很大程度上影響整體風(fēng)格。所以每次有人給我發(fā)設(shè)計稿，叫我給點建議的時候，我都會說，先把重復(fù)的圖片和文字修改了。一張設(shè)計稿，不要用同一張圖片填充所有位置（同樣不要用一句話填充所有文本段落）。

假如你在做日系風(fēng)的外賣產(chǎn)品，你的圖片風(fēng)格就要統(tǒng)一，不要用百度上隨便找的快餐圖來作為視覺稿的展示。很多人以為這個不重要，認(rèn)為這是后期開發(fā)再確定的事情，現(xiàn)在就是隨便找張圖去填充下。要知道，一張視覺稿能不能通過領(lǐng)導(dǎo)的審核，這些細(xì)節(jié)都很重要（即使對自己來說，也應(yīng)該提升自身要求去作圖）。

所以在講述設(shè)計風(fēng)格的時候，圖片是起到至關(guān)重要的作用的。也許你想表達(dá)日系優(yōu)雅風(fēng)，結(jié)果在別人看來你所展示的卻是阿富汗田園風(fēng)。

5. 視覺操作引導(dǎo)

我們期望的用戶操作，最終目標(biāo)是將其引導(dǎo)至我們想讓他去的地方。對于電商類產(chǎn)品來說，這個目標(biāo)也許是下單付款；對于社交類產(chǎn)品來說，這個目標(biāo)也許是發(fā)送信息等等。

一款產(chǎn)品，每個頁面都會有許多個行動點，設(shè)計師要做的，是將其進(jìn)行層級的區(qū)分，即有主次感。好比廣告，這些金主巴不得整個頁面填滿他們的廣告，但是大家都知道這不可能，所以每個頁面都需要進(jìn)行合理的引導(dǎo)設(shè)計。

也許你覺得，視覺操作引導(dǎo)跟設(shè)計風(fēng)格沒什么關(guān)系，那你就錯了。操作引導(dǎo)很大程度上會影響視覺風(fēng)格的走向，如果我們要引導(dǎo)用戶去執(zhí)行某個操作，那么以上說到的所有元素所組成的框架，都需要重新修改。

所以你知道有多重要了么？當(dāng)你描述完所有元素之后，最后說到視覺操作引導(dǎo)，那它們自然而然的就形成了這么一個頁面，不需要過多的花哨說法，只要你前面說的四個維度順暢且合理，那最后這個框架在需求方看來是無懈可擊的，更不會輕易的讓你修改當(dāng)中的元素。

小結(jié)

雖然我只做了五個維度的說明，但相信大家已經(jīng)知道如何去講述設(shè)計風(fēng)格的方法論。當(dāng)然也不僅僅是從這五個維度出發(fā)去說明，要講述的維度其實還有很多，這就需要大家自己去研究了。

通過這一系列的梳理，我們知道如何找到影響設(shè)計風(fēng)格的關(guān)鍵因素。剩下的就是由你來告訴需求方，這些點形成了我們的設(shè)計風(fēng)格。至于怎么說，上面寫的很清楚了，好好思考下。

找準(zhǔn)方向與維度，從大方向去講解你的設(shè)計風(fēng)格，只要你執(zhí)行了，那它就不是什么困難的事情了。

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)