前言

對于視覺設計師來說，頁面設計的好壞主要取決于六大要素，它們分別為：構圖、元素造型、配色、文字設計、質感肌理和頁面所蘊含的韻味。

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

那么什么是造型呢？

一、造型的定義

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

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

二、元素造型剖析

1. 圖標造型

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

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

①統(tǒng)一性

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

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

②語意精準/可識別性

一個好的圖標必須清晰明了地傳達出它的語義，讓用戶一眼識別它想要表達的含義，圖標應盡可能簡化，便于清晰表達其含義，增強識別性，避免讓用戶看不懂圖標、看起來費力或者對于圖標和文字產生分歧，增加使用成本。

③均衡性

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

均衡性也是構圖三大設計原則之一，對于圖標設計同樣需要滿足均衡性。這里你可以將圖標當作小的一個構圖，圖標里的一筆一畫、點綴元素都可以當作一個更小單元來設計。

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

物理中心

物理中心一般指物體的重力中心，或者幾何中心，但設計軟件里，我們選中的卻是圖形外的矩形選框，此時默認的中心點是矩形的中心點而不是選中圖形的中心點。

視覺中心

"視覺中心"一詞一般出現于視覺藝術類的領域中，而且有兩種不同的理解。

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

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

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

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

一個好的圖標設計應該關聯(lián)其品牌，將品牌核心元素融入圖標設計，不僅能讓圖標出彩，更能增強產品的識別度，宣傳公司形象。

⑤創(chuàng)新

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

2. 卡片造型

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

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

①全屏卡片

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

②矩形卡片

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

③不規(guī)則卡片

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

④裝飾性卡片

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

卡片設計原則：

a. 明確目的

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

b. 易讀性

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

c. 一致性

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

d. 響應式設計

在適配原則上，卡片應該在不同大小屏幕設備上做到自適應，通過調整字體大小和間距等，做到響應式設計，讓用戶獲得一致性視覺體驗。

3. Banner 造型

Banner 橫幅廣告（Banner Ad.）是網絡廣告最早采用的形式，也是最常見的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網頁上的矩形公告牌，當用戶點擊這些橫幅的時候，通常可以鏈接到廣告主的網頁?！竵碓窗俣劝倏啤?/p>

①矩形 banner

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

②垂直 banner

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

③不規(guī)則 banner

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

④橫幅 banner

也叫橫幅廣告，它通常比矩形 banner 更長，可以橫跨整個網頁。

⑤彈出式 banner

彈出式 banner 是指在用戶點擊或瀏覽網頁時自動彈出展示的廣告。它的造型可以根據主題自由發(fā)揮，但要注意建立組件規(guī)范。

以上是幾種常見的 banner 造型，但隨著設計的進步，可能還會出現新的 banner 樣式。

選擇 banner 造型，我們要根據實際情況、比重等級靈活運用，不同地方的 banner 側重點不同，對于用戶的視覺體驗也不同，并且還關系到運營的廣告投放效果，大家靈活運用。

結語

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

作者：兆日 UCD