前言

對于視覺設(shè)計(jì)師來說，頁面設(shè)計(jì)的好壞主要取決于六大要素，它們分別為：構(gòu)圖、元素造型、配色、文字設(shè)計(jì)、質(zhì)感肌理和頁面所蘊(yùn)含的韻味。

本篇文章將通過上下兩部分講解，上篇主要從圖標(biāo)造型、卡片造型和 banner 造型出發(fā)剖析，下篇將從按鈕造型、TAB 造型、輪播點(diǎn)造型、標(biāo)簽造型等對其剖析。

那么什么是造型呢？

一、造型的定義

造型要素指構(gòu)成形體的基本視覺元素。包括形態(tài)、肌理、色彩三個(gè)部分。「來源百度百科」

本文基于視覺設(shè)計(jì)，將造型定義為頁面里組成元素的形態(tài)，像圖標(biāo)造型、卡片造型、banner 造型、按鈕造型、TAB 造型、輪播點(diǎn)造型、標(biāo)簽造型等，這也是構(gòu)成整個(gè)頁面里的基本組成元素。（本篇文章將質(zhì)感和顏色單獨(dú)列出與造型并列，是為了方便講解 UI 視覺設(shè)計(jì)）

二、元素造型剖析

1. 圖標(biāo)造型

說起圖標(biāo)造型，大家首先要洞悉圖標(biāo)設(shè)計(jì)風(fēng)格，根據(jù)類型主要可以分為五大類：1 擬物化風(fēng)格、2 扁平化風(fēng)格、3 輕擬物化風(fēng)格、4 新擬態(tài)風(fēng)格、5 玻璃擬態(tài)風(fēng)格，這里不再做細(xì)講。

從每一類的圖標(biāo)造型分析來看，圖標(biāo)造型必須遵循以下原則：

①統(tǒng)一性

設(shè)計(jì)的統(tǒng)一性無論交互設(shè)計(jì)還是 Ui 視覺設(shè)計(jì)，都是一個(gè)極其重要的設(shè)計(jì)原則，它可以保證多元素組件構(gòu)圖后的整體協(xié)調(diào)性、統(tǒng)一性，避免讓用戶產(chǎn)生錯(cuò)亂感，同時(shí)還可以提高工作效率。這里，為了達(dá)到圖標(biāo)造型設(shè)計(jì)的統(tǒng)一性，我們必須遵循風(fēng)格統(tǒng)一、大小統(tǒng)一、形狀統(tǒng)一（圓角、線寬、角度等）、層次統(tǒng)一等（顏色目前不在造型里面，后面會從設(shè)計(jì)整體風(fēng)格分析）如下圖：

為了保障不同造型圖標(biāo)大小統(tǒng)一，建議大家可以采用標(biāo)準(zhǔn)化的關(guān)鍵線作圖，如下圖：

②語意精準(zhǔn)/可識別性

一個(gè)好的圖標(biāo)必須清晰明了地傳達(dá)出它的語義，讓用戶一眼識別它想要表達(dá)的含義，圖標(biāo)應(yīng)盡可能簡化，便于清晰表達(dá)其含義，增強(qiáng)識別性，避免讓用戶看不懂圖標(biāo)、看起來費(fèi)力或者對于圖標(biāo)和文字產(chǎn)生分歧，增加使用成本。

③均衡性

均衡性是指不同元素組合分布均衡，讓設(shè)計(jì)對象整體看起來更加和諧舒適。

均衡性也是構(gòu)圖三大設(shè)計(jì)原則之一，對于圖標(biāo)設(shè)計(jì)同樣需要滿足均衡性。這里你可以將圖標(biāo)當(dāng)作小的一個(gè)構(gòu)圖，圖標(biāo)里的一筆一畫、點(diǎn)綴元素都可以當(dāng)作一個(gè)更小單元來設(shè)計(jì)。

這里需要特別注意 物理中心 和 視覺中心，那什么是物理中心和視覺中心呢？

物理中心

物理中心一般指物體的重力中心，或者幾何中心，但設(shè)計(jì)軟件里，我們選中的卻是圖形外的矩形選框，此時(shí)默認(rèn)的中心點(diǎn)是矩形的中心點(diǎn)而不是選中圖形的中心點(diǎn)。

視覺中心

"視覺中心"一詞一般出現(xiàn)于視覺藝術(shù)類的領(lǐng)域中，而且有兩種不同的理解。

a.指平面藝術(shù)（如繪畫）中的主體，比如達(dá)·芬奇的《最后的晚餐》中的主體耶穌。這里的視覺中心的含義是指，在畫面中，以構(gòu)圖、色彩等畫面元素所表現(xiàn)出來的畫面的主要元素；

b.指人的視野在一個(gè)平面中的中心點(diǎn)。通常，人的視覺中心會在物理中心的偏上方?！竵碓窗俣劝倏啤?/p>

物理中心對齊不意味著視覺中心對齊 ，尤其一些不規(guī)則圖形，如下圖：

④關(guān)聯(lián)性/品牌性

一個(gè)好的圖標(biāo)設(shè)計(jì)應(yīng)該關(guān)聯(lián)其品牌，將品牌核心元素融入圖標(biāo)設(shè)計(jì)，不僅能讓圖標(biāo)出彩，更能增強(qiáng)產(chǎn)品的識別度，宣傳公司形象。

⑤創(chuàng)新

創(chuàng)新是體現(xiàn)設(shè)計(jì)師價(jià)值重要因素，設(shè)計(jì)出的圖標(biāo)不僅要符合圖標(biāo)設(shè)計(jì)原則，同時(shí)我們也應(yīng)該避免同質(zhì)化。另外，人類喜新厭舊，同質(zhì)化的圖標(biāo)無法讓人耳目一新，只有創(chuàng)新才能讓圖標(biāo)眼前一亮，達(dá)到吸睛效果。

2. 卡片造型

卡片是指一種獨(dú)立的設(shè)計(jì)模塊，通常使用矩形視覺元素呈現(xiàn)，類似于一張小卡片，其中承載特定的信息或功能，當(dāng)然有些卡片為了追尋特定目的會標(biāo)新立異，會采用不規(guī)整設(shè)計(jì)。

常見的卡片造型有以下幾種：

①全屏卡片

整個(gè)屏幕就是一張大的卡片，卡片內(nèi)的元素通過就近原則進(jìn)行設(shè)計(jì)。全屏卡片相比較多張卡片設(shè)計(jì)會更加簡潔、大氣，過多的卡片分割會使整個(gè)頁面變的復(fù)雜，記住一條原則：東西分割的越多頁面越復(fù)雜，大家設(shè)計(jì)頁面風(fēng)格的時(shí)候就可以從全屏一張大的卡片和多張矩形卡片組合去設(shè)計(jì)。

②矩形卡片

Ui 界面常用的一種設(shè)計(jì)元素，通過矩形卡片區(qū)分不同功能模塊。這種卡片設(shè)計(jì)會使層級更加清晰，但我們應(yīng)該避免同一個(gè)頁面有過多的卡片，需要適度。

③不規(guī)則卡片

不規(guī)則卡片可以是圓形，橢圓形，扇形等等不規(guī)則形狀，設(shè)計(jì)師設(shè)計(jì)卡片時(shí)常常會采用矩形卡片，不規(guī)則卡片則會讓人耳目一新，尤其在排版方面，通過不同規(guī)則的卡片造型可以達(dá)到標(biāo)新立異的效果。

④裝飾性卡片

這類卡片通常用于宣傳頁，廣告詳情頁，特色活動推薦，通過卡片獨(dú)特的造型、配色起到烘托主題的作用，有著強(qiáng)烈的視覺沖擊力。

卡片設(shè)計(jì)原則：

a. 明確目的

設(shè)計(jì)的功能模塊是用于區(qū)分功能模塊還是起修飾作用，也就是要明確卡片使用場景與功能需求相匹配。

b. 易讀性

卡片必須簡單明了，它承載信息的背景元素，我們設(shè)計(jì)不能喧賓奪主，過分的裝飾會消弱承載內(nèi)容，我們要掌握這個(gè)度。同時(shí)應(yīng)該注意簡潔，清晰的表現(xiàn)形式和有層次的布局，以便用戶快速理解和處理。

c. 一致性

卡片在整體設(shè)計(jì)上應(yīng)該保持一致性，不同類型的卡片之間應(yīng)該有明顯區(qū)別，但是相同類型的卡片應(yīng)該具有統(tǒng)一的樣式和呈現(xiàn)效果，推動品牌識別度和信任感。

d. 響應(yīng)式設(shè)計(jì)

在適配原則上，卡片應(yīng)該在不同大小屏幕設(shè)備上做到自適應(yīng)，通過調(diào)整字體大小和間距等，做到響應(yīng)式設(shè)計(jì)，讓用戶獲得一致性視覺體驗(yàn)。

3. Banner 造型

Banner 橫幅廣告（Banner Ad.）是網(wǎng)絡(luò)廣告最早采用的形式，也是最常見的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁上的矩形公告牌，當(dāng)用戶點(diǎn)擊這些橫幅的時(shí)候，通?？梢枣溄拥綇V告主的網(wǎng)頁?！竵碓窗俣劝倏啤?/p>

①矩形 banner

最常見的一種，通常是矩形形狀。這里有卡片矩形造型樣式和沉浸式矩形造型樣式兩種?？ㄆ?banner 相比較沉浸式 banner 比重、層級會更弱，兩種不同的造型會帶給用戶不一樣的視覺感受。

②垂直 banner

垂直 banner 通常比橫幅 banner 更窄，長度也較長。某寶、某東首頁瀑布流就是如此。

③不規(guī)則 banner

它的形狀是異形，多用于電商，起到烘托活動的效果。

④橫幅 banner

也叫橫幅廣告，它通常比矩形 banner 更長，可以橫跨整個(gè)網(wǎng)頁。

⑤彈出式 banner

彈出式 banner 是指在用戶點(diǎn)擊或?yàn)g覽網(wǎng)頁時(shí)自動彈出展示的廣告。它的造型可以根據(jù)主題自由發(fā)揮，但要注意建立組件規(guī)范。

以上是幾種常見的 banner 造型，但隨著設(shè)計(jì)的進(jìn)步，可能還會出現(xiàn)新的 banner 樣式。

選擇 banner 造型，我們要根據(jù)實(shí)際情況、比重等級靈活運(yùn)用，不同地方的 banner 側(cè)重點(diǎn)不同，對于用戶的視覺體驗(yàn)也不同，并且還關(guān)系到運(yùn)營的廣告投放效果，大家靈活運(yùn)用。

結(jié)語

以上是從圖標(biāo)造型、卡片造型和 banner 造型對"影響視覺好壞的六要素之造型篇（上）"作了剖析，希望對大家在設(shè)計(jì)這三大模塊的時(shí)候有所幫助，下一篇將繼續(xù)從按鈕造型、TAB 造型、輪播點(diǎn)造型、標(biāo)簽造型等方面對造型篇剖析，如有其它見解歡迎在評論區(qū)留言！

作者：兆日 UCD