前言

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

一、造型的定義

造型要素指構(gòu)成形體的基本知覺(jué)元素。包括形態(tài)、肌理、色彩三個(gè)部分?！竵?lái)源百度百科」

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

二、元素造型刨析

1. 按鈕造型

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

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

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

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

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

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

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

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

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

②按鈕從視覺(jué)上可以分為五大類：

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

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

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

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

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

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

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

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

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

1）一致性

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

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

2）無(wú)障礙設(shè)計(jì)

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

3）可用性（Usability）

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

4）視覺(jué)美觀

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

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

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

6）創(chuàng)新

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

2. 瓷片區(qū)

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

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

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

1）實(shí)物類

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

2）插畫(huà)類

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

②按顏色類型：

1）低飽和度

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

2）高飽和度

背景采用高飽和度設(shè)計(jì)，強(qiáng)化視覺(jué)，吸引用戶注意，提高整個(gè)瓷片區(qū)層級(jí)。

3）簡(jiǎn)約類

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

③設(shè)計(jì)要點(diǎn)：

1）標(biāo)題（主標(biāo)題、副標(biāo)題和按鈕）

好的文案起到吸睛的效果。UI 設(shè)計(jì)師則要注意文案的排版技巧，要特別注意主標(biāo)題和副標(biāo)題的對(duì)比與層級(jí)。（注意：運(yùn)營(yíng)提供文案時(shí)最好主、副標(biāo)題一起提供，同時(shí)注意字段不易過(guò)長(zhǎng)，言簡(jiǎn)意賅）

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

2）主元素

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

3）背景和輔助元素

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

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

4）布局排版

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

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

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

結(jié)語(yǔ)

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

黑方塊