教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時(shí)間:2021年11月24日18時(shí)27分 來源:傳智教育 瀏覽次數(shù):

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

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

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


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

在進(jìn)行UI設(shè)計(jì)時(shí),必須為產(chǎn)品確定一個(gè)主色調(diào),然后根據(jù)主色調(diào)搭配不同的輔助色,設(shè)計(jì)各種顏色控件。主色調(diào)是視覺風(fēng)格中的靈魂,更是一種可以強(qiáng)化的視覺識(shí)別信號(hào),讓用戶只通過主色調(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)自帶的中文較少,而且沒什么特色。因此內(nèi)嵌字體成為些追 求完美的設(shè)計(jì)師的首選。


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

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

UI設(shè)計(jì)要素

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

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


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

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


1) 主色

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

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


2) 背景底色

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


3) 輔助色

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


4) 點(diǎn)綴色

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


2. 顏色分類

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


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

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

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

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

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


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

冷色調(diào)顏色包含青色和藍(lán)色。相對(duì)暖色調(diào)而言,冷色調(diào)強(qiáng)度要弱。通常給人感覺是舒緩、放松,甚至有一點(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)深沉、可靠的感覺。

(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)灰色:是一種理性高雅的顏色,象征著誠懇、認(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ì)色彩搭配沒有把握,可以參考以下三種方法。


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

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


2)三色搭配原則

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


3)借助配色軟件

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

好口碑IT培訓(xùn)



猜你喜歡:

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

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

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

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

0 分享到:
和我們?cè)诰€交談!