首頁技術文章正文

UI設計如何確定設計風格和設計色彩?

更新時間:2021-11-26 來源:黑馬程序員 瀏覽量:

IT培訓班

在進行UI設計時,往往需要設計師對UI設計要素進行整體把控,才能設計出優(yōu)秀的設計作品。在UI設計要素中設計風格色彩搭配尤為重要,下面將對這兩種設計要素進行詳細講解。


一、 設計風格

設計風格可以理解為美的不同視覺表現形式。在UI設計中,統(tǒng)-設計風格能給用戶呈現整體一致的視覺體驗,既有利于傳達產品整體的品牌形象,又方便設計團隊制定設計規(guī)范,減少設計風格不一致帶來的溝通成本。因此確定設計風格往往是UI設計的第一步工作。確定設計風格主要包括以下幾個步驟。

1. 尋找產品特性

每個產品都有自己的特性,表現產品特性的詞匯也有很多,例如柔美、輕巧、陽剛、張揚、熱情、神秘、高貴、環(huán)保、科技、時尚等,每個產品特性都會有著對應的視覺語言。


2. 確定主色調

在進行UI設計時,必須為產品確定一個主色調,然后根據主色調搭配不同的輔助色,設計各種顏色控件。主色調是視覺風格中的靈魂,更是一種可以強化的視覺識別信號,讓用戶只通過主色調就能識別產品的特性。


3. 選擇圖標和字體

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


4. 排版設計

排版設計是指在有限的版面空間,將UI設計元素按照所要表現的設計風格進行編排組合,形成一個富有藝術美的整體形象。

UI設計要素

二、 設計色彩

色彩是UI設計中一個很重要的元素,作為最直觀的視覺信息,無時無刻不影響著用戶的體驗。下面將具體介紹色彩的基礎知識和搭配方法。


1. 認識色彩

在UI設計中,色彩可以歸納為四種,分別為主色、背景底色、輔助色和點綴色,具體介紹如下。


1) 主色

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

主色是決定畫面風格趨向的色彩,主色有可能不僅僅只是一種顏色。主色的選擇過程稱為定色調,它的成敗直接影響到視覺傳達的效果,還會影響到使用者的情緒。因此確定主色是設計中非常關鍵的一步。


2) 背景底色

背景底色對界面整體空間效果的影響比較大,由于占據的面積最大,支配著整個空間的效果,所以是配色的重點。背景底色常使用的顏色主要包括白色、淺灰色等。


3) 輔助色

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


4) 點綴色

點綴色通常用來打破單調的頁面整體效果,營造生動的空間氛圍。所以選擇較鮮艷的顏色,常以對比色或高純度色彩加以表現。點綴色的應用面積越小,色彩越強,點綴色的效果才會越突出。點綴色通常在色彩組合中占據的面積較小,視覺效果較為醒目,主要用在提示性的小圖標或者需要重點突出的圖形中。


2. 顏色分類

顏色分類方式有很多種,但是在UI設計中,往往更注重受眾的感受,會根據受眾的心理感受,將顏色分為暖色調、冷色調以及中性色調。


1)暖色調顏色

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

(1)紅色:是熱烈、沖動、強有力的色彩。紅色可以傳達有活力、積極、熱誠、溫暖、前進等含義的主題形象與精神,此外紅色也常用來作為警告、危險、禁止等標識用色。在UI設計中,紅色是一種很重的色彩,如果在設計中使用過多,會產生一種壓倒性的感官效果,尤其是使用純紅色時。如果設計師想在設計中添加力量和激情的感覺,紅色就是一種非常 不錯的顏色。

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

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


2)冷色調顏色

冷色調顏色包含青色和藍色。相對暖色調而言,冷色調強度要弱。通常給人感覺是舒緩、放松,甚至有一點冷淡。

(1)青色:是堅實、強硬的冷色調顏色,介于藍色和綠色之間,圖1-48所示的某品牌啤酒網站,就使用青色作為主色調,象征著沉穩(wěn)、踏實。在UI設計中,青色適于表現深沉、可靠的感覺。

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


3)中性色調

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

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

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

(3)灰色:是一種理性高雅的顏色,象征著誠懇、認真、沉穩(wěn)、嚴謹。在UI設計中,灰色和黑色、白色一樣,同樣是使用最廣泛的顏色,是設計中的百搭色。

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

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


3. 顏色搭配基礎

在UI設計中,如果對色彩搭配沒有把握,可以參考以下三種方法。


1) 參考同類界面設計

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


2)三色搭配原則

三色搭配原則是指在設計作品中,單個界面的顏色應保持在三種以內(這里的顏色指色相)。如果超過三種,就會產生眼花繚亂的感覺。


3)借助配色軟件

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



猜你喜歡:

21個UI設計技巧【UI設計干貨】

用戶界面設計的10大原則

化妝品廣告如何設計?有什么設計思路?

黑馬程序員UI設計培訓班

分享到:
在線咨詢 我要報名
和我們在線交談!