前言

上篇文章我們從圖標造型、卡片造型和 banner 造型三大模塊對設(shè)計中造型進行了剖析，本篇文章接上篇文章從按鈕造型、瓷片區(qū)和導(dǎo)航繼續(xù)對造型進行剖析。

一、造型的定義

造型要素指構(gòu)成形體的基本知覺元素。包括形態(tài)、肌理、色彩三個部分?！竵碓窗俣劝倏啤?/p>

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

二、元素造型刨析

1. 按鈕造型

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

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

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

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

3）標簽按鈕：用于在頁面上顯示標簽的按鈕，例如用于分類或?qū)Ш健?/p>

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

5）開關(guān)按鈕：用于控制開關(guān)狀態(tài)的按鈕，例如開關(guān)燈、開關(guān)聲音等。

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

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

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

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

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

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

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

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

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

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

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

③按鈕設(shè)計應(yīng)遵循以下設(shè)計原則：

1）一致性

“一致性是最強大的可用性原則之一：當(dāng)事物始終表現(xiàn)相同時，用戶不必擔(dān)心會發(fā)生什么?！?—雅各布·尼爾森（Jakob Nielsen）

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

2）無障礙設(shè)計

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

3）可用性（Usability）

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

4）視覺美觀

按鈕的設(shè)計應(yīng)該與整體的頁面風(fēng)格和品牌形象相協(xié)調(diào)，并能夠提供良好的用戶體驗。

5）響應(yīng)式設(shè)計

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

6）創(chuàng)新

人總是喜新厭舊的，創(chuàng)新不但可以避免“同質(zhì)化”，而且還能達到吸睛效果，這是體現(xiàn)設(shè)計師價值所在。

2. 瓷片區(qū)

瓷片區(qū)是以圖片加文字方式呈現(xiàn)的運營位，視覺外觀看上去就像一塊塊瓷片貼在版面上，故名“瓷片區(qū)”。像淘寶、京東、美團等 APP 都有用到。目前，在資訊、理財?shù)软撁嬉矔?jīng)?？吹?，起到導(dǎo)流作用。

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

①按設(shè)計風(fēng)格：

1）實物類

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

2）插畫類

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

②按顏色類型：

1）低飽和度

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

2）高飽和度

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

3）簡約類

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

③設(shè)計要點：

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

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

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

2）主元素

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

3）背景和輔助元素

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

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

4）布局排版

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

以下是結(jié)合四要素找的素材對比：

后續(xù)會根據(jù)本文介紹，會專門出一期瓷片區(qū)不同風(fēng)格對比設(shè)計方法，敬請期待！

結(jié)語

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

黑方塊