建議收藏起來，方便隨時查看～

  用戶頭像篇

關(guān)于用戶頭像這個板塊的信息，如果采用昵稱向上對齊，ID向下對齊的方式，兩塊內(nèi)容就會很分散，不夠聚焦。

如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來會感覺頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對比更明顯，頁面看起來也會更精致。

當(dāng)用戶使用手機(jī)注冊登錄后，新用戶沒有頭像的情況下，就要給一個默認(rèn)頭像，或者使用品牌IP形象，增加用戶的品牌記憶。

  按鈕篇

當(dāng)一個頁面有兩個操作按鈕時，可以區(qū)分出來一個最重要的按鈕，引導(dǎo)用戶更容易去進(jìn)行選擇。

當(dāng)彈窗背景是白色的時候，會有點(diǎn)空蕩的感覺，顯得細(xì)節(jié)不夠，可以為背景豐富細(xì)節(jié)，增加耐看程度。

當(dāng)使用亮色按鈕時，如果文字也比較亮，識別度就會很差。識別度對比一定要明顯，亮底暗字，暗底亮字，畫面一定不能出現(xiàn)識別模糊的情況。

登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊按鈕呈現(xiàn)置灰狀態(tài)，給人不可點(diǎn)擊的感覺。輸入信息后，激活登錄按鈕高亮狀態(tài)，這樣可以更清晰地引導(dǎo)用戶操作下一步。

在這樣的登錄狀態(tài)中，輸入后與未輸入的文字顏色需要給予一定的區(qū)分，這樣便于用戶區(qū)分哪些是填寫和未填寫的。在輸入框可以增加對應(yīng)的icon ，讓整體感覺更豐富。

  卡片排版篇

關(guān)于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會讓畫面太過沉重。

在圖文式卡片排版的場景中，圖片占比內(nèi)容區(qū)域大，能起到突出重點(diǎn)的作用。

右圖內(nèi)容少的時候使用的是黃金分割比法則 0.618:1的比例。當(dāng)內(nèi)容多的時候，左圖的布局也不錯，瀑布流排下去能避免過于死板。

卡片上有過多的小標(biāo)簽時，可以加一個淡色的底，這樣不會給人文案很多的感覺，整體視覺不會很分散，且層級更加分明，讓用戶更快速的找到自己需要的信息。

卡片背景直接排上文案，背景會顯得很空，沒有層次和細(xì)節(jié)。所以在做背景的時候，適當(dāng)加上一些細(xì)節(jié)，就會顯得耐看很多。

文案直接加在圖片上時，要去對應(yīng)地處理圖片，例如給圖片加一個蒙版，這樣就不會導(dǎo)致文字的顏色和圖片疊加在一起看不清的情況。

在做效果圖的時候，有圖片需要添加到設(shè)計稿中，盡量選擇搭配起來比較和諧的圖片，比如：飽和度、色相、亮度等盡量保持差不多的感覺，這樣看起來會增加設(shè)計稿中的整體一致。

在有多個板塊需要做成滑動的時候，需要留出一個被遮住的板塊，代表還有內(nèi)容可以滑動。在左圖中，多個板塊剛好做成一個寬度的內(nèi)容，那么用戶不知道后面還有內(nèi)容可以滑動。

  文字排版篇

文字行間距的把控，對于較大的文字，行間距通常來說采用文字大小1.5倍的間距，文字較小時使用1.2倍的間距會比較合適。通常情況下，我會設(shè)置比1.5倍還大一些的間距，文字行間距太小不易于用戶閱讀，可適具體情況而定。

當(dāng)主標(biāo)題和副文案一樣長的時候，整體會顯得很呆板，且看著是一團(tuán)字的感覺，這時就可以讓標(biāo)題和副標(biāo)題之間產(chǎn)生長短不一的顯示，就不會那么呆板。

在卡片上排列信息時，需要用到線條的時候，線太深給人感覺分割會很明顯，把線的顏色調(diào)淺，有一點(diǎn)感覺在會比較好。

接著上面的信息排列，另一種方案是可以把線去掉，增加上下兩者的間距，擴(kuò)大留白也可以起到拉開信息之間的板塊區(qū)分，讓整個畫面更加簡潔和干凈。

信息已填寫與未填寫的一個區(qū)分，已填寫過的信息用深一些的顏色，未填寫的信息用淺一些的顏色，這樣利于用戶更快速找到需要修改和填寫的信息。

對于導(dǎo)航選中的欄目，選中的信息顯示和其他的欄目對比要拉開。對比弱的話，用戶一眼看不出來當(dāng)前選擇的導(dǎo)航欄目是哪一個。針對選中的欄目，可以根據(jù)品牌形象去做延展，建立品牌認(rèn)知感。

面對內(nèi)容過多的場景，分別將兩組信息排在畫面里，例如左圖，會感覺整個畫面信息很多，而且很分散。

在右邊的排版中，加了一層背景包裹起來分別對應(yīng)的信息時，會讓信息層級更加分明。

圖標(biāo)和文字搭配的情況下，為圖標(biāo)加一個底色，可以讓該頁面圖標(biāo)的大小視覺保持一致，也會給予其重心的承載作用。

在需要突出信息的時候，左圖的排版方式并沒有達(dá)到需要突出的信息，看不到重要的信息。如前面所說，在做信息層級的時候?qū)Ρ纫欢ㄒ_，才能突出最重要的信息，讓用戶一眼get到主要信息。

文案信息板塊的排版，當(dāng)文案層級對比不是很明顯的時候，如第三種，居中排列文案，會使閱讀體驗(yàn)很差，視覺參差不齊的循環(huán)。當(dāng)文案層級比較明顯的時候，居中對齊也是一種比較好的方式。

當(dāng)文案標(biāo)題需要加硬投影的時候，亮字下應(yīng)該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會出現(xiàn)標(biāo)題文案識別不清晰，對比度不足。

最后

以上就是全部的UI/UX設(shè)計技巧，希望通過這些技巧能夠讓你對界面設(shè)計加入更多思考，打造更好用的產(chǎn)品！

另外推薦大家去「下雨天DS」主頁查看更多內(nèi)容：myandy.zcool.com.cn

慢慢來比較快，如覺得有幫助，

前半部分從字體的最基本屬性（字族、字號、字重、大小寫等）說起，熟悉字體的那些特征，了解字體在界面中的作用，以及iOS與Android系統(tǒng)字體的使用規(guī)范。

字體基礎(chǔ)知識

字體是界面設(shè)計的基石

字體是排版中最重要的元素，對用戶的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來說，設(shè)計師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來已久，從最早的羅馬字體到現(xiàn)在蘋果手機(jī)中的SF-UI字體，經(jīng)歷了許多設(shè)計上的變革。而中文字體的發(fā)展并沒有西文字體那么順利，數(shù)量上也遠(yuǎn)遠(yuǎn)落后于其他字體。但中國設(shè)計正在崛起，我們也看到越來越多的設(shè)計團(tuán)隊(duì)和設(shè)計師加入字體設(shè)計的隊(duì)伍，數(shù)量上正在呈指數(shù)級別增加。

設(shè)計是一門非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過了將近千年的發(fā)展和演變，有非常多的專業(yè)知識。像平面設(shè)計一樣，在UI設(shè)計中字體的使用也有相應(yīng)的規(guī)范，設(shè)計師應(yīng)懂得這些基礎(chǔ)知識，才能將字體為自己所用。

本篇就從我們常用的設(shè)計軟件（sketch、Figma、P hotoshop）字符面板開始，來聊聊有關(guān)字體與排版應(yīng)用方面的知識。

字體的那些屬性

• Font 中文翻譯為「字型」，是指字的粗細(xì)、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。
• Typeface 中文翻譯為「字體」，是指一整套的字形，一個或多個字型的多尺寸的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。
• Glyph 中文翻譯為「字形」，是指單個字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達(dá)的意思，例如漢字中的「令」字，第三筆可以是一點(diǎn)或一撇， 最末兩筆可以作「ㄗ」或「マ」。

Font和Typeface常常被混淆使用，其實(shí)可以這樣理解，前者指一種設(shè)計，后者指具體的產(chǎn)品。

1. 族類 GenericFamily

族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。

而這些眾多字體又可分為「襯線體」和「無襯線體」。

襯線體

宋體就是襯線體，特點(diǎn)就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細(xì)有所不同。在傳統(tǒng)的正文印刷中，普遍認(rèn)為襯線字體能帶來更加的可讀性。常見的襯線體有宋體、Times New Roman、Georgia等。

襯線體一般在APP中比較少見，文字閱讀類偏愛這種襯線體，例如「單讀」，大標(biāo)題用的是「華康標(biāo)宋體」、正文內(nèi)容用的是「蘋方-纖細(xì)」而英文用的是「XCross Traditional Bold」

黑體

黑體是無襯線字體，特點(diǎn)是筆畫沒有額外的裝飾，且筆畫的粗細(xì)差不多。相比嚴(yán)肅的襯線體，簡單干凈的無襯線體給人一種休閑輕松的感覺。因此大多數(shù)App都是使用黑體作為默認(rèn)字體。如冬青黑體、思源黑體、Myriad等。

2. 字族 FontFamily

一個族類包含不同的字體，然而一個字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會發(fā)現(xiàn)超過40多個前綴是Helvetica的字族。這是為了協(xié)助人們在不同的使用場景下表達(dá)合適的意思。

知識點(diǎn)：

基本字族包括細(xì)體、標(biāo)準(zhǔn)、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個著作」的含義。

例如：「若我們能以滿懷新鮮的眼神去觀照日常，「設(shè)計」的意義定會超越技術(shù)的層面，為我們的生活觀和人生觀注入力量。」（引自原研哉的《設(shè)計中的設(shè)計》）

3. X-height（X字高）

在西文字體中，x高度是指字母的基本高度，就是基線和主線之間的距離。它指一個字體中小寫字母的x高度，在現(xiàn)代字體設(shè)計領(lǐng)域，x高度代表了一個字體的設(shè)計因素，因此在一些場合字母x本身并不完全等于x字高。

除了字母a、c、e、m、n、o等高度一樣，還有一些小寫字母的字高都比x字高要大，并分為兩類：一是含有升部的字母，字母筆畫含有向上部分，如字母b、d、h；另一類是含有降部的字母，字母的筆畫向下超過了基線，如字母g、p、q。

4. 字號 Font-size

字號就是字體大小，通常在網(wǎng)頁端使用px作為字號的單位。移動端興起后，iOS字體單位是pt，Android是sp。

以iOS為例，正文字號不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來獲得更好的易讀性的同時，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因?yàn)檫^重的字體會太過醒目，影響其他內(nèi)容的顯示效果。

當(dāng)字體大小為12-18pt時，建議使用Regular，18-24pt時，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過32pt時，建議使用Ultralight。

字號大小決定了信息的層級和主次關(guān)系，合理有序的字號設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗(yàn)。

設(shè)計中的最小字號

我們都知道在界面設(shè)計中最小字號不能低于20px，那是因?yàn)?，正常情況下，在手機(jī)距離眼睛30cm左右，使用視角計算公式，我們能識別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。

字號的基數(shù)關(guān)系

我們在做設(shè)計時，字號的單位最好使用一個基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實(shí)我們在做移動端設(shè)計時，單位需要遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來進(jìn)行計算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會導(dǎo)致字號過多，且2號字體的差異化不大。所以在字號方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。

5. 字重 FontWeight

Weight，中文翻譯為「字重」，是指字體筆畫的粗細(xì)，字體中很重要一個概念，不同字重傳遞出來視覺感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠商劃分字重各有不同，例如「蘋方」字體就有6種不同的字重。

一般都有細(xì)體、正常、粗體三種基本字族。在應(yīng)用場景上，通?！讣?xì)體」多用于超大號字體；「正常」用于正文內(nèi)容；「粗體」表示強(qiáng)調(diào)，多用于標(biāo)題；

兩種字重屬性

輕字重：傳遞出輕盈放松的視覺感受，常配合粗的字重使用，在一些輔助信息，說明文案時候使用；

重字重：視覺感受莊重，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，頁面大標(biāo)題，數(shù)字，引導(dǎo)行動操作點(diǎn)上等；

例如百度網(wǎng)盤「發(fā)現(xiàn)」頁就用了Regular、Medium、Semibold三種字重以拉開信息層次對比；

知識點(diǎn)：

需要注意的是：在進(jìn)行界面設(shè)計時，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會模糊不清，合理的方式是使用字體本身的字重來控制粗細(xì)。

注意超細(xì)體的字體

字重超細(xì)的字體要謹(jǐn)慎使用。如果你設(shè)計的文本是裝飾性倒還好，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機(jī)屏幕上看起來會非常糟糕。

6. 字色 FontColor

字色即文字對應(yīng)的顏色，不做過多解釋。需要大家注意的是 遠(yuǎn)離純黑色和純灰色！

純黑色就像沒有生命力的深淵，能吞噬所有細(xì)節(jié)，使用戶陷入冷冰冰的極端情緒中。純黑色還會與白色產(chǎn)生強(qiáng)烈的對比度，看久了就會感覺疲勞，讓用戶產(chǎn)生焦慮情緒。

還有就是真實(shí)世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會讓頁面看上去死氣沉沉的。例如iOS系統(tǒng)「設(shè)置」頁面背景色就是加入了白色的低飽和度藍(lán)色，看上去柔和自然。

7. 字符樣式 FontStyle

除了以上幾個最常用的文字屬性外，還有幾個使用頻率比較低的字體設(shè)置。例如帶下劃線的、刪除線的文本?！赶聞澗€文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線文本」一般會出現(xiàn)在商品櫥窗的現(xiàn)價、原價

例如「CCtalk」的課程現(xiàn)價和原價的區(qū)分，原價用刪除文本，「微信讀書」文章底部「加入書架 隨時閱讀」就是帶鏈接的下劃線文本。

8. 字符選項(xiàng) Text options

Ps和Sketch都有文字（字符）選項(xiàng)一欄，主要針對西文字母大小寫格式變換的設(shè)置。最常見有默認(rèn)大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標(biāo)」和「下標(biāo)」。

• 默認(rèn)大小寫：即正常大小寫格式，軟件不做干預(yù)；
• 全部大寫：如果輸入的是小寫字母，選擇這個選項(xiàng)，軟件會強(qiáng)制把小寫改為大寫；
• 全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個選項(xiàng)，軟件會強(qiáng)制把所大寫改為小寫；
• 小型大寫字母：這個選項(xiàng)比較特殊，所謂「小型大寫」就是，在字號一樣的情況下，與小寫字母一樣高，外形與大寫字母保持一致。

注意英文大寫

純大寫的字母文本本身不太適合大篇幅閱讀，會加大閱讀障礙，用的時候注意要額外拉開字母之間的字間距，提升可讀性。

9. 全角與半角 Full-width and half-width

全角是指一個字符占用兩個標(biāo)準(zhǔn)字符的位置。中文字符、全角的英文字符、國標(biāo)GB2312-1980中的圖形符號、特殊符號都是全角字符。半角是指一個字符占用一個標(biāo)準(zhǔn)字符的位置。

通常情況下，英文字母、數(shù)字、符號等都是半角字符。半角和全角主要是針對標(biāo)點(diǎn)符號來說的，因?yàn)檎Ｇ闆r下沒有打全角英文的需求。

知識點(diǎn)：

在設(shè)計作品時也一定要記得中文搭配全角符號，英文使用半角符號。否則會出現(xiàn)諸如「你好.」或者「t h a n k s?！惯@樣的錯誤?？砂存I盤「capslock」鍵切換全角和半角。這個小知識點(diǎn)雖然非?；A(chǔ)，卻也是設(shè)計中經(jīng)常出錯的地方。

iOS與Android

眾所周知，iOS和Android兩大陣營都有各自的設(shè)計系統(tǒng)，要作出符合平臺規(guī)范的設(shè)計，設(shè)計師應(yīng)熟讀各平臺的設(shè)計規(guī)則。因?yàn)楸酒灾v字體為主，我們就來看看iOS和Android各自字體的規(guī)范是什么樣的。

1. iOS字體規(guī)范

可用字體

在iOS系統(tǒng)規(guī)范中，中文字體是「蘋方」字體。英文字體是「San Francisco」也簡稱「SF-UI」，英文還有另外一個襯線體「NewYork」。除了在iOS和Mac OS上，還單獨(dú)為Watch OS單獨(dú)對字體進(jìn)行了調(diào)整，命名為 San Francisco Compact。

字體設(shè)置

因?yàn)樵谟⑽淖煮w下，字體環(huán)境比較復(fù)雜，為了讓字體在任何地方看起來都最佳，蘋果官方針對不同字號開發(fā)了兩套「SF-UI Text」和「SF-UI Pro」字體，而每套字體下面又分為Text（文本模式）與Display（展示模式）兩種屬性，Text只有6個字重，而Display則有9個字重。

這么多類型的字體我們該怎么用呢？iOS的建議是，在字號小于20pt時，使用SF-UI Text，大于或等于20pt時，則使用SF-UI Display。這需要我們在界面設(shè)計時手動切換。

對于「NewYork」，小于20點(diǎn)的文本使用小號，20到35點(diǎn)之間的文本使用中號，36到53點(diǎn)之間的文本使用大號，54點(diǎn)或更大的文本使用特大號。

蘋方字體提供了6個字重供設(shè)計開發(fā)者使用。所以從iOS11開始，iOS使用Semibold中粗體、大字號作為界面的標(biāo)題變的更為流行起來，較為明顯的有 iOS 中的一些原生APP，比如App Store、Apple Music…

知識點(diǎn)：

在iOS中，默認(rèn)字體單位是「pt」，正文字號不應(yīng)小于11pt，建議在15-18pt之間。在使用較大的字體來獲得更好的易讀性同時，也應(yīng)該相應(yīng)地減小字體的字重，因?yàn)檫^重的字體會太過醒目厚重，影響其他內(nèi)容的顯示效果。

iOS更全面的文字設(shè)置

動態(tài)類型可以通過讓讀者選擇他們喜歡的文本大小來提供額外的靈活性，除了標(biāo)準(zhǔn)的動態(tài)類型大小之外，iOS系統(tǒng)還為有閱讀大字體的需求的用戶提供了許多字號上的調(diào)整（可在系統(tǒng)字體顯示大小設(shè)置）

iOS「顯示與亮度」下設(shè)置「文字大小」模式

「蘋方」和「SF-UI」字體可在iOS規(guī)范網(wǎng)站免費(fèi)下載

網(wǎng)址：https://developer.apple.com/fonts/

2. Android字體規(guī)范

可用字體

在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，聯(lián)合了Adobe設(shè)計發(fā)布了「思源黑體」(Noto)來作為中文默認(rèn)字體，「Roboto」為英文字體。

字體類型

思源黑體，英文名為「NotoSans CJK」。該字體不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分滿足了設(shè)計的要求。

英文「Roboto」字體，只有6個字重，視覺語言與思源黑體Noto保持一致。該字體具有「現(xiàn)代的」和「平易近人」的氣質(zhì)，是「Material Design」設(shè)計風(fēng)格下的推薦字體。

字體設(shè)置

Material Design字體規(guī)范，字體類型比例支持的十三種樣式的組合。它包含可重用的文本類別，每種類別都有預(yù)期的應(yīng)用程序和含義。

注：Web瀏覽器根據(jù)根元素大小計算REM（根em大?。?。 現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)值為16px，因此轉(zhuǎn)換為SP_SIZE / 16 = rem。

△Material Design設(shè)計類型比例。（字母間距值與Sketch兼容。）

知識點(diǎn)：

值得注意的是，在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式是：

px = sp*ppi/160 ，sp = px / (ppi / 160)

以iPhone7為例，尺寸是750×1334，密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px

「思源黑體」和「Roboto」字體可在GoogleFonts免費(fèi)下載，并且可以商用。

網(wǎng)址：http://www.googlefonts.cn/

3. 話題擴(kuò)展

值得一提的是，越來越多的手機(jī)廠商，為了能夠強(qiáng)化自身的品牌形象，推出了定制款的字體。

比如小米的「小米蘭亭」：

OPPO的「OPPO Sans」：

三星的「SamsungOne」：

字體基礎(chǔ)知識小結(jié)

正如開頭所說，文字是界面中最核心的元素，字體作為基本語言，是設(shè)計中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計中占比（約 80%）最大的內(nèi)容，所以我們一定要熟練掌握，接下來將從文字行高、字間距、行間距等說起，圍繞字體排版繼續(xù)聊。

]]> http://m.createwh.com/53886.html/feed 0 http://m.createwh.com/53665.html http://m.createwh.com/53665.html#respond Fri, 07 Aug 2020 01:23:10 +0000

設(shè)計：Fons Hickmann

有人可能會說，并沒什么明顯的問題啊，產(chǎn)品和賣點(diǎn)都很突出、排版清晰整潔、各元素對比很鮮明、色彩與產(chǎn)品調(diào)性也是相符的，要不把字體再設(shè)計一下？把圖片再修漂亮一點(diǎn)。以上說的這些觀點(diǎn)都是對，但是你們有沒有發(fā)現(xiàn)一個問題，就是這些觀點(diǎn)的關(guān)注點(diǎn)都是在一些具體的細(xì)節(jié)上，比如排版、配色、字體設(shè)計、修圖等方面，卻沒有從整體去評估這件作品是否有完成設(shè)計需求，可不可以讓它的效果變得更好。產(chǎn)品主圖的首要目的是要吸引消費(fèi)者的注意，而上圖在這一方面做得明顯不夠，因?yàn)樗炔皇呛芷粒曈X沖擊力又不太強(qiáng)；既沒有與同類產(chǎn)品的主圖有明顯差別，也沒什么意思，這樣的設(shè)計通常很難讓客戶買單，就算客戶買單了實(shí)際效果也不會太好。而如果我們在設(shè)計形式做一點(diǎn)更改，比如像下圖這樣，不是直接的羅列文字和圖片，而是把設(shè)計形式與產(chǎn)品的屬性結(jié)合起來，是不是就比上圖更新穎、更有趣了一點(diǎn)。

這里并沒把功夫花在字體設(shè)計上，因?yàn)楸匾圆淮蟆Ｋ哉f，不論是做設(shè)計還是看設(shè)計，我們都應(yīng)該要遵循從大到小、從整體到局部的過程，先保證有一個好的大方向，再去完善細(xì)節(jié)。具體如何做呢？接下來我將從四方面來詳細(xì)闡述。

◇◆  一、準(zhǔn)確傳達(dá)訴求  ◆◇

這是平面設(shè)計最重要也是最基本的原則，卻經(jīng)常會被很多設(shè)計師忽略，所以我們可以看到很多作品花里胡哨，卻連自己想要傳達(dá)什么信息都沒講清楚，或者會讓人產(chǎn)生誤解，這是很可笑的。那么想要準(zhǔn)確傳達(dá)訴求該怎么做呢？

1.信息要便于閱讀

a.重點(diǎn)信息要突出。將標(biāo)題、標(biāo)題中的關(guān)鍵字、價格、優(yōu)惠信息、活動時間、電話號碼等，用大一點(diǎn)的字號、粗一點(diǎn)的字體突出，不僅能提升其傳達(dá)率，還能使文字排版更有張弛。比如下面這則海報：

從總體來看，版面下方的主題被重點(diǎn)突出，上面的信息相對弱化。

從局部來看，在主題中，設(shè)計師又特別突出了“該你上場”這幾個字，這么處理會便于讀者快速了解海報的核心內(nèi)容。

b.信息分類明確。在一張海報中，信息可能會有很多，如主題、副標(biāo)題、小標(biāo)題、內(nèi)文、時間、地址、電話等信息，這時就要將它們進(jìn)行合理的分類，以免信息太過繁雜、相互干擾，影響閱讀。例如下圖的信息就很明顯地被分成了五大塊，可以讓讀者很清晰地閱讀、理解版面上的信息。

在這里，設(shè)計師合理運(yùn)用了間距的關(guān)系，以及統(tǒng)一各同類信息的排版方式、元素、色彩等，來達(dá)到版面中各信息的統(tǒng)一與區(qū)隔。

除了以上這兩點(diǎn)外，把文字對齊排列、保證字體的識別性以及文案的正確閱讀順序等等，都能提升信息的易閱讀性。

2.創(chuàng)意簡單、準(zhǔn)確

創(chuàng)意可以使設(shè)計變得更有趣、更有內(nèi)涵，但創(chuàng)意也會在一定程度上提高理解的門檻，所以在商業(yè)設(shè)計中的創(chuàng)意一定要簡單且準(zhǔn)確。比如下圖是我早前做的一則冰箱廣告，想表達(dá)該冰箱保鮮功能好的訴求，雖然創(chuàng)意很有趣，但老實(shí)說理解起來會有一點(diǎn)難度。

下圖的海報同樣也是要表現(xiàn)冰箱保鮮功能效果好，但該創(chuàng)意更直觀，所以理解起來會簡單很多，而且形式上也并不是太常規(guī)。

3.配圖與主題相符

圖片是設(shè)計的主要構(gòu)成元素，它不僅能使版面更好看、增強(qiáng)視覺沖擊力，而且圖片本身也能夠傳遞信息，幫助受眾理解。當(dāng)然，前提是你配的圖片在調(diào)性和寓意上要與主題相符，如果只是覺得圖片好看就放上去是不可取的。

以上是給同一個主題配上不同畫面的兩個設(shè)計方案，很明顯左圖比右圖在調(diào)性上和元素內(nèi)容上要更符合主題的需求。

◇◆  二、設(shè)計調(diào)性與主題相符  ◆◇

1.字體相符

特別是標(biāo)題字體，由于字號一般比較大，占的空間也比較大，它的風(fēng)格會影響到整個畫面的調(diào)性，所以你要有能力評判什么樣的主題、畫面，適合使用什么類型的字體，這一點(diǎn)你可以去看看同類產(chǎn)品、品牌設(shè)計的做法。

在logo設(shè)計中字體調(diào)性也要與品牌和圖形相符，下圖是一個互聯(lián)網(wǎng)品牌的Logo，它的圖形是由幾何色塊組合成的一只鳥，那它的標(biāo)準(zhǔn)字用什么類型的字體更合適呢？通過對比我們可以看出左圖的字體比右圖的字體更合適一些，因?yàn)榍罢叩娘L(fēng)格與圖片的調(diào)性更統(tǒng)一。

2.顏色相符

色彩本身是具有一定寓意的，所以在搭配顏色時，要選擇與主題寓意相近的色彩。例如下圖是一則境外銀行卡的banner，主題和配圖都跟旅游相關(guān)，而背景卻用了玫紅色，雖然紅色、藍(lán)色、白色搭配在一起很漂亮，但在調(diào)性上與旅游不相符，因而不是一個好的選擇。

所以我重新搭配了一個寓意自然、純凈的藍(lán)色背景。

3.風(fēng)格相符

設(shè)計的風(fēng)格有很多，但并不是使用什么樣的風(fēng)格都行，例如目標(biāo)消費(fèi)群是年輕女生的面膜包裝設(shè)計適合使用二次元風(fēng)格。

而以中老年人為目標(biāo)消費(fèi)群體的保健品包裝就不大適合這種風(fēng)格，它比較適合的是中國風(fēng)和復(fù)古風(fēng)。

嬰兒奶粉的廣告一般會用寫實(shí)或插畫風(fēng)格，以表現(xiàn)產(chǎn)品健康、天然的特質(zhì)。

而藝術(shù)感比較強(qiáng)、色彩比較濃重的波普風(fēng)就不適合該類品牌的設(shè)計。

4.形式相符

形式對設(shè)計的氣質(zhì)和吸引力有很大的影響，例如以文字作為主題搭建場景的設(shè)計形式，比較適合主題類海報，或者產(chǎn)品是服務(wù)的海報設(shè)計，但不太適合做以實(shí)物產(chǎn)品為主的海報設(shè)計，因?yàn)樵撔问經(jīng)]法突出產(chǎn)品。

還有下圖這種發(fā)散構(gòu)圖的形式，適合表現(xiàn)比較酷、比較熱鬧的主題，但不太適合表現(xiàn)溫馨、安靜等主題。

5.版式相符

不同的排版方式也是有調(diào)性差別的，比如下圖是一則蘋果電子手表的輪播圖，圖片部分給人的感覺比較高大上，所以文字的排版像下圖一樣簡簡單單就可以了。

而如果像下圖一樣用藍(lán)色塊將文字突出，并且刻意的與logo錯位排版，反而給人很low的感覺，與品牌以及圖片調(diào)性都不匹配。

6.元素相符

即使是表現(xiàn)統(tǒng)一內(nèi)容的元素，其調(diào)性也是會有很大差別的，比如由于五官、發(fā)型、著裝、表情的不同，會導(dǎo)致模特的氣質(zhì)也有很大差別，有的會偏向樸實(shí)、有的比較商務(wù)、有的比較潮、有的比較冷酷、有的比較溫暖等等，我們再給畫面搭配模特時也要選擇氣質(zhì)匹配的。例如下圖的氛圍比較時尚，所以應(yīng)該搭配一個外表看起來比較潮的模特。

而下圖的模特穿著比較職業(yè)，所以不太適合用在這里。

◇◆ 三、形式要有吸引力  ◆◇

做好了前兩點(diǎn)還僅僅是把設(shè)計做對了而已，想要做好，表現(xiàn)形式很關(guān)鍵。文章開頭列舉的例子之所以中規(guī)中矩，就是因?yàn)楸憩F(xiàn)形式太普通，蔥爺通過總結(jié)發(fā)現(xiàn)，優(yōu)秀的表現(xiàn)形式必須滿足有趣、新穎、視覺沖擊力強(qiáng)，這三者中的至少一個條件。

1.有趣

設(shè)計形式有趣的作品相比無趣的作品更有活力，更能獲得受眾的好感，所以有趣也是評判設(shè)計好壞的一個重要指標(biāo)。我們可以通過圖形創(chuàng)意、擬人、增加互動、使用小孩或動物元素等方式，來增加設(shè)計的趣味性。

▲上圖采用擬人的手法來增添趣味性。

▲上圖把可愛的emoji表情與人物結(jié)合，表現(xiàn)手法新穎而有趣。

▲上圖把文字當(dāng)成實(shí)物來與圖片元素發(fā)生互動，也挺有意思。

2.新穎

如果你總是用很常規(guī)、很老的表現(xiàn)形式做設(shè)計，不僅會很無聊，而且很難起到好的效果，因?yàn)榭蛻艉拖M(fèi)者都已經(jīng)視覺疲勞了。所以每次做設(shè)計的時候，不要總想著按按最常見、自己最熟悉的方式來做，而是要想想怎么帶給受眾新的視覺體驗(yàn)，我們可以跨行業(yè)去找參考，很多在其他行業(yè)比較常見的形式，在本行業(yè)中可能還是香餑餑，也可以多運(yùn)用當(dāng)下比較流行的一些表現(xiàn)形式。

▲用真實(shí)人物與黑白漫畫結(jié)合起來是比較新穎的一種設(shè)計形式。

▲爆炸貼其實(shí)是虛擬的一個東西元素，把它當(dāng)成實(shí)物表現(xiàn)出來也是很新穎的做法。

3.視覺沖擊力強(qiáng)

由于消費(fèi)者每天接觸到的設(shè)計、廣告非常多，所以只有你的設(shè)計視覺沖擊力很強(qiáng)時，才有可能吸引到消費(fèi)者的注意力。想要有強(qiáng)烈的視覺沖擊，一個重要的手段就是在設(shè)計中創(chuàng)造強(qiáng)烈的對比，比如大小對比、色彩對比、空間對比、風(fēng)格對比等等。

▲上圖主要為色彩對比與質(zhì)感對比

▲上圖為空間對比，前面的老虎由于離鏡頭非常近，所以有很強(qiáng)的親近感。

還有一種形式的視覺沖擊也很強(qiáng)，就是創(chuàng)造一種全新的視覺，比如下圖把立體字當(dāng)成披風(fēng)一樣與前面的人物結(jié)合起來，就是以前沒有過的做法，所以視覺沖擊力也很強(qiáng)。

◇◆ 四、細(xì)節(jié)到位  ◆◇

一件作品如果能夠做好前面三條，就應(yīng)該是一件不錯的作品了，過稿的成功率也會比較高，但想要更上一層樓就得靠細(xì)節(jié)的執(zhí)行了，這一點(diǎn)很考設(shè)計師的功底，所以很多新手在細(xì)節(jié)方面都處理不好，奇怪的是他們都很喜歡把精力用在細(xì)節(jié)的處理上。好吧，既然如此，蔥爺也來說幾個在設(shè)計中要注意的細(xì)節(jié)。

1.文字行距

行距是很小的東西，但在排版中很關(guān)鍵，以下圖的名片設(shè)計為例，左右兩個方案除了行距有點(diǎn)差別，其他地方都是一樣的，但是明顯可以感覺到，右圖的排版比左圖要舒服很多？這就是行距的作用。

從下圖中我們可以看出，其實(shí)左右圖方案在文字行距的控制上非常講究。

一般來說，正文的行間距至少要大于字間距三倍以上，而且不同信息之間的行距要大于同類信息之間的行距。

2.裝飾元素

裝飾元素可以豐富版面、增添氛圍，而且還可以增加設(shè)計的精致感，下圖是一則banner，整體感覺還是比較大氣的的，但總感覺少了點(diǎn)什么東西，對，就是裝飾元素，所以中間白色塊部分顯得很單調(diào)。

而下圖的解決方案是在人物后面以及其他空白的地方增加了一點(diǎn)裝飾的圖形和文字，感覺是不是好多了。

注意，裝飾元素的調(diào)性要與畫面相符，且不能干擾主要元素。

3.保證元素與版面的關(guān)聯(lián)性

版面中的任何一個元素都不應(yīng)該是獨(dú)立存在的，它一定在某方面與版面中的其他元素存在關(guān)聯(lián)，比如位置、顏色、字體、輪廓、邏輯等方面。

例如上圖大大小小的元素有很多，但是各元素之間的關(guān)系我們通過下圖就可以看出來。主要是排版位置與色彩的關(guān)聯(lián)。

4.背景的處理

以海報設(shè)計為例，背景一般需要起到以下三個作用：1.突出主體；2.增添整體的氛圍；3.使設(shè)計更精致、更有品質(zhì)感。

上圖的背景只使用了兩個色彩相近的色塊，感覺非常單調(diào)，主體也沒有得到明顯的突出，并且視覺上左輕右重不平衡。

在上圖的方案中，背景中的大色塊改成了漸變灰色，人物與前面的色塊得到了有效突顯；并且把人物素材二次使用疊印在背景中，增添了背景的豐富性以及與主體的關(guān)聯(lián)。

5.各元素之間的統(tǒng)一協(xié)調(diào)性

一件完整的設(shè)計作品通常是由多個不同的元素組成的，而這些元素組合在一起是否統(tǒng)一和諧，則決定這件作品給人的舒適度。比如下圖就結(jié)合了很多的元素，雖然很節(jié)制地控制了顏色的數(shù)量，但整體給人的感覺還是不太和諧。

認(rèn)真觀察我們就可以發(fā)現(xiàn)上圖的元素組合有以下幾個問題（如下圖所示）：

• 標(biāo)1的地方把高矮建筑左右分布，視覺不平衡；
• 標(biāo)2的地方把小樹放在最左邊，視覺不平衡；
• 標(biāo)3的地方都是單獨(dú)放一個元素，太孤立；
• 標(biāo)4的地方人物擋住無限符號右邊孔的空間太多，不透氣。
• 標(biāo)5的三個元素以飄在空中的方式結(jié)合進(jìn)來顯得太隨意，不自然。

所以我在此基礎(chǔ)上做了一些調(diào)整：

• a.讓所有元素盡量在一個矩形內(nèi)，這樣整體看起來會比較平衡；
• b.把扎堆在一起的建筑采用三角形構(gòu)圖排列，平衡性更好；
• c.把孤立的元素與其他元素并在一起；
• d.人物往中間移動，使其既要平衡畫面又不要擋住無限符號的孔太多；
• e.給飄散的幾個Icon增加了光線，讓它們更自然地融入主體。

結(jié)語

終于寫完啦！由于本文討論的是一個大而全的話題，信息量很大，幾乎涵蓋了所有設(shè)計中比較關(guān)鍵的問題，所以也沒法把每個問題都說得很細(xì)，但核心觀點(diǎn)就是一句話：大感覺比細(xì)節(jié)更重要，先把大感覺做對了、做好了，再去打造細(xì)節(jié)。

原文地址：蔥爺（公眾號）

作者：蔥爺

02.

03.

04.

05.

06.

07.

08.

設(shè)計：Sweety & Co.