前言

上篇文章我們從圖標造型、卡片造型和 banner 造型三大模塊對設計中造型進行了剖析，本篇文章接上篇文章從按鈕造型、瓷片區和導航繼續對造型進行剖析。

一、造型的定義

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

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

二、元素造型刨析

1. 按鈕造型

在 UI 設計中，按鈕（Button）是一種常見的界面元素，用于觸發特定操作或執行特定功能。用戶可以通過點擊按鈕與應用程序進行交互。

①按照熟知的按鈕功能類型分：

1）CTA 按鈕：CTA，即“Call to Action”的縮寫，意思是行為召喚。用來執行特定的操作，例如“預定”、“加入購物車”、“聯系我們”等等這類有行為召喚的交互。

2）懸浮按鈕：用于在頁面上懸浮顯示的按鈕，通常用于提供額外的功能或操作。

3）標簽按鈕：用于在頁面上顯示標簽的按鈕，例如用于分類或導航。

4）命令按鈕：用于執行特定操作的按鈕，例如保存、編輯、刪除等。

5）開關按鈕：用于控制開關狀態的按鈕，例如開關燈、開關聲音等。

6）表格按鈕：用于在表格中添加交互功能的按鈕，例如用于排序、篩選或操作數據。

7）選擇按鈕：我們常用的復選框，單選就是，或者一個大的選框。

②按鈕從視覺上可以分為五大類：

1）文字按鈕：純文字按鈕，網頁首頁大多為了追求簡潔而采用加黑加粗的文字按鈕。APP 純文字按鈕主要是為了弱化視覺層級。

2）面型按鈕：填充一個形狀，形狀可以是正方形，圓形，帶圓角的或者其它造型，視覺層級強。有些按鈕為了追求獨特性，例如“登錄”，會采用漸變、彌散投影等設計手法。

3）線性按鈕：也稱作描邊按鈕或者鏤空按鈕，比較單一，視覺層級相對于面型按鈕弱一級。

4）圖標按鈕：圖標按鈕以特定視覺圖形來表達命令屬性，提升界面整潔度，很多導航欄都會使用到它。因為圖標按鈕體積較小，布局靈活，且圖標形式給了設計師更多表現空間，所以它是 Ui 設計中很容易出彩的地方。但需要注意的是，由于沒有文字元素，圖標按鈕容易出現用戶理解上的偏差，因此設計師在設計時需要做用戶測試，以確定圖標是否符合用戶視覺預期。

5）圖標+文字按鈕：圖標+文字相較于圖標按鈕會更清晰，在金剛區、功能列表等經常會用到。我們在設計常用功能圖標時，應盡量選擇圖標+文字，避免用戶看不懂圖標語義，而增加使用成本。

6）修飾性按鈕：這類按鈕需要很強的視覺，通常用在運營插畫上，限制比較小，UI 設計師可以根據主題率性發揮。

（注意：為了區分面型按鈕，這里刻意將其獨立出來，前面的面型按鈕更多的是扁平化風格，這里的修飾性按鈕則可以是輕擬物、玻璃擬態、擬物風、3D 風格等等，目的是為了在烘托視覺氛圍，吸引用戶點擊。）

面型按鈕、線性按鈕和文字按鈕，這三種我們經常會在同一卡片里同時用到，對于三者使用我們需要根據交互權重層級來選擇，如下圖：

③按鈕設計應遵循以下設計原則：

1）一致性

“一致性是最強大的可用性原則之一：當事物始終表現相同時，用戶不必擔心會發生什么。” —雅各布·尼爾森（Jakob Nielsen）

一致性提高了速度和準確性，有助于避免錯誤。我們需要保障普通按鈕在顏色、圓角、文字、間距、大小等保持一致。

2）無障礙設計

按鈕的大小和位置應該使其容易點擊，目標區域大小是影響可訪問性的因素之一，其他是字體大小，顏色和對比度。

3）可用性（Usability）

按鈕應該易于辨識和使用，文字內容應該簡潔明了，能夠清晰明確地傳達按鈕功能。按鈕的位置和布局也應該符合用戶直覺和使用習慣。

4）視覺美觀

按鈕的設計應該與整體的頁面風格和品牌形象相協調，并能夠提供良好的用戶體驗。

5）響應式設計

按鈕應該能夠適應不同屏幕尺寸和設備類型，以確保在不同設備上的用戶體驗。

6）創新

人總是喜新厭舊的，創新不但可以避免“同質化”，而且還能達到吸睛效果，這是體現設計師價值所在。

2. 瓷片區

瓷片區是以圖片加文字方式呈現的運營位，視覺外觀看上去就像一塊塊瓷片貼在版面上，故名“瓷片區”。像淘寶、京東、美團等 APP 都有用到。目前，在資訊、理財等頁面也會經常看到，起到導流作用。

從設計的角度來看，瓷片區是一種非常靈活的元素，可以根據不同運營需求和產品特點進行定制。從而提高產品用戶黏性和轉化率。

①按設計風格：

1）實物類

這種風格通常使用真實商品或服務圖片，直觀地展示產品或服務特點，吸引用戶注意力。我們常見的電商、外賣、旅游等產品類型，可以突出產品的真實感和可信度，喜迎用戶點擊了解的欲望。

2）插畫類

這種風格的瓷片區通常使用插畫圖形，以展示特定的主題或傳達某種情感。它不僅起到引流作用，而且極大地豐富了頁面，讓整個頁面更加美觀。多適用于金融、教育等產品類型。

②按顏色類型：

1）低飽和度

背景采用低飽和度顏色設計，顏色更柔和耐看，弱化整個瓷片區層級，常見于 B 端設計。

2）高飽和度

背景采用高飽和度設計，強化視覺，吸引用戶注意，提高整個瓷片區層級。

3）簡約類

這類風格背景大多采用白色或者淺灰色，外加簡單的插畫元素，減少視覺干擾，讓整體顯得簡約、干凈上檔次。

③設計要點：

1）標題（主標題、副標題和按鈕）

好的文案起到吸睛的效果。UI 設計師則要注意文案的排版技巧，要特別注意主標題和副標題的對比與層級。（注意：運營提供文案時最好主、副標題一起提供，同時注意字段不易過長，言簡意賅）

按鈕可有可無，按鈕的樣式可以豐富整個卡片，但也會讓狹小的卡片略顯擁擠，要學會取舍。

2）主元素

主元素是瓷片區靈活所在，人的第一眼首先會被主元素吸引，因此設計主元素的時候一定要注意它的準確度、美觀度、清晰度、舒適度和設計感。

3）背景和輔助元素

背景起到定位整張頁面視覺風格的作用，我們在設計頁面時，要特別考慮是采用高飽和度還是低飽和度，或者簡約白底；不同的背景色調給人整體感覺是不一樣的，要結合整體設計風格和行業背景去定義。

輔助元素對瓷片區起到修飾作用，我們可以用簡單的幾何圖形、律動的線條等等進行修飾，讓主元素和背景層更加融合，提升美感。

4）布局排版

布局排版根據瓷片區個數，靈活排版，某一個板塊需要強調，可以通過放大面積進行設計，這樣要比中規中矩等分的瓷片區排版更加靈活，讓頁面充滿律動感。如下圖，4 個模塊的瓷片區，布局排版至少有六種排法，所以設計師在設計的時候，要充分發揮想象力，避免同質化。

以下是結合四要素找的素材對比：

后續會根據本文介紹，會專門出一期瓷片區不同風格對比設計方法，敬請期待！

結語

以上是從按鈕造型和瓷片區造型對“影響視覺設計好壞的六要素（構、形、色、文、質、韻）之造型篇（下）”作了剖析，希望對大家在設計這兩大模塊的時候有所幫助，如有其它見解歡迎在下方留言，互相探討。