UI設(shè)計(jì)要素有哪些?詳細(xì)介紹設(shè)計(jì)風(fēng)格和色彩搭配

在進(jìn)行UI設(shè)計(jì)時(shí)，往往需要設(shè)計(jì)師對(duì)UI設(shè)計(jì)要素進(jìn)行整體把控，才能設(shè)計(jì)出優(yōu)秀的設(shè)計(jì)作品。在UI設(shè)計(jì)要素中設(shè)計(jì)風(fēng)格和色彩搭配尤為重要，下面將對(duì)這兩種設(shè)計(jì)要素進(jìn)行詳細(xì)講解。

一、 設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格可以理解為美的不同視覺(jué)表現(xiàn)形式。在UI設(shè)計(jì)中，統(tǒng)-設(shè)計(jì)風(fēng)格能給用戶呈現(xiàn)整體一致的視覺(jué)體驗(yàn)，既有利于傳達(dá)產(chǎn)品整體的品牌形象，又方便設(shè)計(jì)團(tuán)隊(duì)制定設(shè)計(jì)規(guī)范，減少設(shè)計(jì)風(fēng)格不一致帶來(lái)的溝通成本。因此確定設(shè)計(jì)風(fēng)格往往是UI設(shè)計(jì)的第一步工作。確定設(shè)計(jì)風(fēng)格主要包括以下幾個(gè)步驟。

1. 尋找產(chǎn)品特性

每個(gè)產(chǎn)品都有自己的特性，表現(xiàn)產(chǎn)品特性的詞匯也有很多，例如柔美、輕巧、陽(yáng)剛、張揚(yáng)、熱情、神秘、高貴、環(huán)保、科技、時(shí)尚等，每個(gè)產(chǎn)品特性都會(huì)有著對(duì)應(yīng)的視覺(jué)語(yǔ)言。

2. 確定主色調(diào)

在進(jìn)行UI設(shè)計(jì)時(shí)，必須為產(chǎn)品確定一個(gè)主色調(diào)，然后根據(jù)主色調(diào)搭配不同的輔助色，設(shè)計(jì)各種顏色控件。主色調(diào)是視覺(jué)風(fēng)格中的靈魂，更是一種可以強(qiáng)化的視覺(jué)識(shí)別信號(hào)，讓用戶只通過(guò)主色調(diào)就能識(shí)別產(chǎn)品的特性。

3. 選擇圖標(biāo)和字體

在UI設(shè)計(jì)中，設(shè)計(jì)風(fēng)格還反映在圖標(biāo)和字體的選擇上。例如，纖細(xì)的圖標(biāo)和字體顯得設(shè)計(jì)高雅適用于高端類產(chǎn)品，而卡通圖標(biāo)和字體更適用于少兒類型產(chǎn)品的界面設(shè)計(jì)。然而困擾設(shè)計(jì)師的是移動(dòng)端系統(tǒng)自帶的中文較少，而且沒(méi)什么特色。因此內(nèi)嵌字體成為些追 求完美的設(shè)計(jì)師的首選。

4. 排版設(shè)計(jì)

排版設(shè)計(jì)是指在有限的版面空間，將UI設(shè)計(jì)元素按照所要表現(xiàn)的設(shè)計(jì)風(fēng)格進(jìn)行編排組合，形成一個(gè)富有藝術(shù)美的整體形象。

二、 設(shè)計(jì)色彩

色彩是UI設(shè)計(jì)中一個(gè)很重要的元素，作為最直觀的視覺(jué)信息，無(wú)時(shí)無(wú)刻不影響著用戶的體驗(yàn)。下面將具體介紹色彩的基礎(chǔ)知識(shí)和搭配方法。

1. 認(rèn)識(shí)色彩

在UI設(shè)計(jì)中，色彩可以歸納為四種，分別為主色、背景底色、輔助色和點(diǎn)綴色，具體介紹如下。

1) 主色

主色指設(shè)計(jì)時(shí)的主要顏色，包括大面積的背景色、裝飾圖形顏色等構(gòu)成視覺(jué)中心的顏色。主色是配色中的中心色，主要是由頁(yè)面中整體欄目或中心圖像所形成的中等面積的色塊，主色在頁(yè)面配色中具有重要地位，通常形成視覺(jué)中心。主色的選擇通常有兩種方式，一是選擇與背景底色呈對(duì)比的色彩，二是選擇與背景底色、輔助色相近的色相顏色或者鄰近色。

主色是決定畫面風(fēng)格趨向的色彩，主色有可能不僅僅只是一種顏色。主色的選擇過(guò)程稱為定色調(diào)，它的成敗直接影響到視覺(jué)傳達(dá)的效果，還會(huì)影響到使用者的情緒。因此確定主色是設(shè)計(jì)中非常關(guān)鍵的一步。

2) 背景底色

背景底色對(duì)界面整體空間效果的影響比較大，由于占據(jù)的面積最大，支配著整個(gè)空間的效果，所以是配色的重點(diǎn)。背景底色常使用的顏色主要包括白色、淺灰色等。

3) 輔助色

頁(yè)面中除了具有視覺(jué)中心作用的主色之外，還有作為呼應(yīng)主色而產(chǎn)生的輔助色，輔助色的作用是使畫面更完美更豐富。輔助色的視覺(jué)重要性和體積僅次于主色和背景底色，常常用于陪襯主色，使主色更突出。輔助色常用于頁(yè)面中較小的元素，如按鈕等。

4) 點(diǎn)綴色

點(diǎn)綴色通常用來(lái)打破單調(diào)的頁(yè)面整體效果，營(yíng)造生動(dòng)的空間氛圍。所以選擇較鮮艷的顏色，常以對(duì)比色或高純度色彩加以表現(xiàn)。點(diǎn)綴色的應(yīng)用面積越小，色彩越強(qiáng)，點(diǎn)綴色的效果才會(huì)越突出。點(diǎn)綴色通常在色彩組合中占據(jù)的面積較小，視覺(jué)效果較為醒目，主要用在提示性的小圖標(biāo)或者需要重點(diǎn)突出的圖形中。

2. 顏色分類

顏色分類方式有很多種，但是在UI設(shè)計(jì)中，往往更注重受眾的感受，會(huì)根據(jù)受眾的心理感受，將顏色分為暖色調(diào)、冷色調(diào)以及中性色調(diào)。

1)暖色調(diào)顏色

暖色包含紅色、橙色、黃色以及這三種顏色衍生的同類色。它們分別是烈焰、落葉以及日出和日落的顏色，象征活力、激情和積極。在UI設(shè)計(jì)中，通常使用暖色來(lái)體現(xiàn)激情、快樂(lè)、熱忱和活力的主題內(nèi)容。

(1)紅色:是熱烈、沖動(dòng)、強(qiáng)有力的色彩。紅色可以傳達(dá)有活力、積極、熱誠(chéng)、溫暖、前進(jìn)等含義的主題形象與精神，此外紅色也常用來(lái)作為警告、危險(xiǎn)、禁止等標(biāo)識(shí)用色。在UI設(shè)計(jì)中，紅色是一種很重的色彩，如果在設(shè)計(jì)中使用過(guò)多，會(huì)產(chǎn)生一種壓倒性的感官效果，尤其是使用純紅色時(shí)。如果設(shè)計(jì)師想在設(shè)計(jì)中添加力量和激情的感覺(jué)，紅色就是一種非常 不錯(cuò)的顏色。

(2)橙色:是一種充滿生氣和活力的顏色。橙色象征著收獲、富足和快樂(lè)。在Ul設(shè)計(jì)中，橙色不像紅色那樣強(qiáng)烈，但也能獲取觀眾的注意力。

(3)黃色:是最明亮、最具活力的暖色。黃色象征著快樂(lè)、希望，此外黃色也用來(lái)象征虛偽、欺騙。

2)冷色調(diào)顏色

冷色調(diào)顏色包含青色和藍(lán)色。相對(duì)暖色調(diào)而言,冷色調(diào)強(qiáng)度要弱。通常給人感覺(jué)是舒緩、放松，甚至有一點(diǎn)冷淡。

(1)青色:是堅(jiān)實(shí)、強(qiáng)硬的冷色調(diào)顏色，介于藍(lán)色和綠色之間，圖1-48所示的某品牌啤酒網(wǎng)站，就使用青色作為主色調(diào)，象征著沉穩(wěn)、踏實(shí)。在UI設(shè)計(jì)中，青色適于表現(xiàn)深沉、可靠的感覺(jué)。

(2)藍(lán)色:是一種安靜的冷色調(diào)顏色，象征著沉穩(wěn)和智慧。因此-些科技類的企業(yè)網(wǎng)站通常使用藍(lán)色作為主色調(diào)。圖1-49所示為某電器企業(yè)網(wǎng)站，該網(wǎng)站使用藍(lán)色作為主色調(diào)。

3)中性色調(diào)

中性色通常用作設(shè)計(jì)作品的背景色。包含黑色、白色、灰色、綠色和紫色五種顏色。在UI設(shè)計(jì)中，中性色的含義以及給人的心理感受容易受到周圍暖色和冷色的影響。

(1)黑色:作為設(shè)計(jì)中使用最廣泛的顏色之一，黑色象征著權(quán)威、高雅、低調(diào)和創(chuàng)意，此外也象征著執(zhí)著、冷漠和防御，是設(shè)計(jì)中的百搭顏色。

(2)白色:同樣是設(shè)計(jì)中使用最廣泛的顏色之一， 象征著純潔、神圣、善良。此外白色還象征著恐怖和死亡。在UI設(shè)計(jì)中，通常用白色作為主色調(diào)，配合大范圍的留白彰顯格調(diào)。

(3)灰色:是一種理性高雅的顏色，象征著誠(chéng)懇、認(rèn)真、沉穩(wěn)、嚴(yán)謹(jǐn)。在UI設(shè)計(jì)中，灰色和黑色、白色一樣，同樣是使用最廣泛的顏色，是設(shè)計(jì)中的百搭色。

(4)綠色:是給人實(shí)全感的概色，象征者自由、和平，新鮮、生命、健康。在UI設(shè)計(jì)中綠色常作為安全殺毒軟件，或環(huán)保健康類界面的主色調(diào)。

(5)紫色:是一種高貴的顏色，象征著神秘、奢華和浪漫。在UI設(shè)計(jì)中，深紫色給人一種富有和奢華的感受。

3. 顏色搭配基礎(chǔ)

在UI設(shè)計(jì)中，如果對(duì)色彩搭配沒(méi)有把握，可以參考以下三種方法。

1) 參考同類界面設(shè)計(jì)

根據(jù)產(chǎn)品所涉及的行業(yè)、風(fēng)格和定位去尋找同類型界面的色彩搭配組合。如科技風(fēng)一般采用藍(lán)、白、灰為主;女性主題經(jīng)常以粉色、紫色或柔和的米色為主;美食類主題多以橙色或黃色為主。

2)三色搭配原則

三色搭配原則是指在設(shè)計(jì)作品中，單個(gè)界面的顏色應(yīng)保持在三種以內(nèi)(這里的顏色指色相)。如果超過(guò)三種，就會(huì)產(chǎn)生眼花繚亂的感覺(jué)。

3)借助配色軟件

如果覺(jué)得上述方法無(wú)法滿足需求，還可通過(guò)配色網(wǎng)站進(jìn)行配色，通過(guò)這種方法獲得的色彩組合都符合色彩搭配規(guī)范，省時(shí)省力。例如，Color Scheme Designer 3、Colour Lovers等都是一些非常實(shí)用的配色利器。

猜你喜歡：

交互設(shè)計(jì)有什么原則?

設(shè)計(jì)原則有哪些？盤點(diǎn)那些深入人心的設(shè)計(jì)原則

UI設(shè)計(jì)是什么?UI設(shè)計(jì)師有哪些職能？

傳智教育UI設(shè)計(jì)培訓(xùn)班