基于手機(jī)APP界面設(shè)計(jì)中的色彩應(yīng)用研究

2024-10-23    藍(lán)藍(lán)小助手

這是一封來自過去的信、最近收拾以前的電腦。看到了我曾經(jīng)大學(xué)畢業(yè)的論文分享給你們看看。當(dāng)然論文里有部分東西和我們現(xiàn)在是有不同的。但是我想到了那句話諺語、授人以魚不如授人以漁‌。文章里的魚和現(xiàn)在不一樣、但里面的漁和現(xiàn)在是一樣的。也可以考古一下幾年前APP界面的樣子。哈哈哈
 
1、界面設(shè)計(jì)的概論
1.1、
界面設(shè)計(jì)定義
界面設(shè)計(jì)即UI(User Interface)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。讓軟件變得有個(gè)性有品位還要讓軟件變得簡(jiǎn)單自由,并可以體現(xiàn)軟件的定位和特點(diǎn),這才是一個(gè)好的UI設(shè)計(jì)。軟件設(shè)計(jì)可分為兩個(gè)部分:編碼設(shè)計(jì)與UI設(shè)計(jì)。UI的本意是用戶界面,是英文User和 Interface的縮寫。從字面上看是用戶與界面2個(gè)部分組成,但實(shí)際上還包括用戶與界面之間的交互關(guān)系。
 
在這個(gè)電子產(chǎn)品飛速發(fā)展的時(shí)代里,界面的設(shè)計(jì)也越來越受到人們的重視和關(guān)注,隨之而來UI設(shè)計(jì)師或者叫UI工程師的行業(yè)火熱起來,它是以前美工這個(gè)行業(yè)的升華。手機(jī)App的界面設(shè)計(jì)就像一個(gè)產(chǎn)品的賣點(diǎn)一樣,一個(gè)優(yōu)秀的界面設(shè)計(jì)是一款A(yù)pp的必不可少的因素。一個(gè)界面設(shè)計(jì)的成功與否也不是因?yàn)槟硞€(gè)人而來確定的,是由它的用戶的反饋來判斷一個(gè)界面設(shè)計(jì)成功與否。
 
1.2、
色彩對(duì)手機(jī)App界面設(shè)計(jì)中的影響
自80年代蘋果公司重做了圖形的設(shè)計(jì)增強(qiáng)了用戶界面的可視性。拓寬易用性UI 向前前進(jìn)了一大步取得了歷史性的飛躍。同時(shí)也將色彩的搭配和文字的可閱讀性變?yōu)榻缑嫔实闹匾h題。
 
從心里學(xué)的角度分析,人的第一感覺是視覺,而色彩則是對(duì)視覺影響最大的因素。色彩是我們?cè)O(shè)計(jì)的界面給用戶的第一視覺因素。不同的色彩在用戶眼里會(huì)產(chǎn)生不同的色彩語言和產(chǎn)品訴求,例如從色相上說紅色:紅色讓人感到緊張感興奮、藍(lán)色:讓人感到安靜、嚴(yán)謹(jǐn)、科學(xué)、而黑色:讓人感覺壓抑、悲傷等。
 
在人機(jī)交互的界面中充斥著非常多的信息,如何把這些信息規(guī)整的處理,來實(shí)現(xiàn)人機(jī)之間更好的界面交互,這是色彩在UI設(shè)計(jì)中的重要地位之一。用戶可以通過顏色信息實(shí)現(xiàn)與軟件更豐富的交互。從而用色彩來滿足受眾的心理訴求在 UI設(shè)計(jì)時(shí),App性質(zhì)差異,依據(jù)用戶群的不同,甚至是在軟件使用時(shí)的交互信息的特異而變換不同色彩。由此可以看出色彩在UI設(shè)計(jì)中的重要性。從整體的色調(diào)到色彩語言,從背景色到每個(gè)元素的顏色都為界面的整體性專業(yè)性提供了重要的保障同時(shí)也是一款A(yù)pp能夠成功的保障。
 
2、色彩在手機(jī)App界面設(shè)計(jì)中的應(yīng)用分析及色彩感受
2.1、
色彩應(yīng)用分析
自2013年之后隨著蘋果引領(lǐng)的扁平化風(fēng)格的興起,扁平化設(shè)計(jì)風(fēng)格席卷了全球設(shè)計(jì)領(lǐng)域。即蘋果之后Windows8的界面也有了新的突破以色塊與高度概括的幾何圖形樣式的按鈕相結(jié)合的視覺效果呈現(xiàn)。之后Google公司的 Android 系統(tǒng)界面也進(jìn)行了扁平化的風(fēng)格設(shè)計(jì),雖然沒有完全扁平化,但是已經(jīng)拋棄了原有的3D效果的做法。這些新的風(fēng)格設(shè)計(jì)簡(jiǎn)潔明了,使色彩在界面設(shè)計(jì)中的應(yīng)用和圖標(biāo)圖標(biāo)的設(shè)計(jì)都開啟了扁平化的趨勢(shì)。扁平化的風(fēng)格以迅雷不及掩耳之勢(shì)在互聯(lián)網(wǎng)時(shí)代蔓延開來,同時(shí)這種設(shè)計(jì)風(fēng)格對(duì)界面設(shè)計(jì)尤其是手機(jī)App界面設(shè)計(jì)也帶來了革命性的巨大影響。色彩也在界面設(shè)計(jì)中變得不可或缺,尤其是在手機(jī)App界面設(shè)計(jì)中。
 
目前階段,主流的App界面設(shè)計(jì)方面,抄襲相當(dāng)嚴(yán)重,色彩運(yùn)用方面相互參考的太多。例如微信和支付寶這兩款A(yù)pp應(yīng)用是我們?cè)谏钪虚L用的兩款知名App而且都是兩家大公司旗下的,而支付寶的設(shè)計(jì)風(fēng)格和整體色調(diào)幾乎是完全臨摹的微信的色調(diào)配色。這件事情在設(shè)計(jì)界引起了很大的一場(chǎng)風(fēng)波,這就是設(shè)計(jì)抄襲事件。最終支付寶在自身聊天交友方面付出了慘痛的代價(jià),可謂自己的聊天功能形同虛設(shè)。還有花樣繁多,琳瑯滿目的類似案例。如果想在這樣相互抄襲競(jìng)爭(zhēng)激烈的情況中脫穎而出,只有在界面的形象主色調(diào)和用戶群上下工夫,并要運(yùn)用獨(dú)特的營銷,獨(dú)特的風(fēng)格來展示和推廣應(yīng)用。使應(yīng)用的風(fēng)格變成一種特有的,獨(dú)具一格的,如圖1。
 
圖1
圖1
 
色彩擁有的刺激性和強(qiáng)烈?guī)敫?,我們可以利用這一特性使用戶增強(qiáng)對(duì)應(yīng)用的記憶力。運(yùn)用色彩來增加UI設(shè)計(jì)界面的附加價(jià)值。利用豐富的色彩搭配來滿足用戶在色彩選擇時(shí)的多樣性和普遍性。在一些界面設(shè)計(jì)中利用豐富的視覺體驗(yàn)來增加在用戶心中的附加值。
 
利用色彩的情感語言使App的用戶的情感得到宣泄,并起到App在情感上的共鳴。色彩的運(yùn)用不光在視覺上能給用戶帶來強(qiáng)烈的刺激和印象,也要能運(yùn)用色彩的特性讓使用者在情感和App形象上產(chǎn)生共鳴。最終就會(huì)達(dá)到我們的用戶群使用我們的應(yīng)用的目的。個(gè)性的色彩運(yùn)用可以讓UI設(shè)計(jì)界面在方寸之間盡顯魅力,使用戶可以在短時(shí)間內(nèi)對(duì)App產(chǎn)生印象,可以給用戶產(chǎn)生情感的共鳴,更可以方便信息的傳遞實(shí)現(xiàn)更好的交互。
 
2.2、色彩感受
2.2.1、色彩的誤區(qū)
人們對(duì)色彩的直觀感受充斥著一些非常獨(dú)特的效應(yīng)。有一些很有趣的事情一些畫家在自己做畫的時(shí)候,通常只使用少數(shù)的幾種顏色。人類會(huì)看到一些缺乏顏色,成缺乏顏色就是純度低和明度低的顏色或者一些中性色。
 
在一幅畫中如果只有白色黑色黃色紅色,那么人們的眼睛自動(dòng)會(huì)把黑色和紅色混合成一種紫色相近的混色,黃色和黑色會(huì)混合成為一種暗綠色的色調(diào),灰色就會(huì)變成偏冷調(diào)子的冷色系藍(lán)色。當(dāng)空間不同顏色的點(diǎn)靠得很近,以至于人眼對(duì)它們所張的視角小于最小分辨角時(shí),人眼就不能分辨出它們各自的顏色所感覺到的只是它們的混合色。
 
從物理學(xué)的角度來講這是一種人類肉眼所造成的顏色誤區(qū)。就是因?yàn)檫@種有趣的誤區(qū)性,給色彩的使用帶來了新的發(fā)展歷程和不同的色彩心理感受。在美術(shù)和設(shè)計(jì)中所提到的色彩感覺,如色彩的偏向,或偏紫偏藍(lán),冷暖的變化都或多或少與人們自身的色彩誤區(qū)和色彩心理感受有一定的關(guān)系。
 
2.2.2、色彩的情感
我們通常會(huì)把色彩分為冷色系和暖色系。暖色系是包括紅橙黃這三種顏色和他們的混色。他們分別是象征著火焰,果實(shí),還有夕陽的顏色。他們通常還象征著運(yùn)動(dòng),積極,活力和激情。
 
在這三種顏色中紅色和黃色是都屬于三原色是通過任何其它顏色不能混合而得到的顏色。這就證明真正的暖色是紅色和黃色。我們運(yùn)用紅橙黃在設(shè)計(jì)中體現(xiàn)出活力快樂,激情的主調(diào)來。
 
在手機(jī)App界面設(shè)計(jì)中紅色可以激發(fā)人們的購買欲望,所以很多的購物App界面中對(duì)紅色的運(yùn)用特別重要。例如京東App在其界面中以紅色調(diào)為主色調(diào)其購物按鈕主要都為紅色。同時(shí)紅色又是誘惑性最高的顏色,所以秒殺和搶購一般也會(huì)運(yùn)用紅色系的顏色來進(jìn)行設(shè)計(jì),如圖2。
圖2
圖2
 
冷色系的顏色包括藍(lán)色,綠色,紫色,這些顏色在視覺上相對(duì)于暖色系的顏色來說強(qiáng)度要弱。他們是水,夜,自然的代表色,給人的感覺是舒服,放松,有時(shí)還會(huì)有冷漠的感覺。藍(lán)色是其中唯一的原色,是通過其他任何顏色無法混合而來的,其他的兩種顏色都是通過其他色混合而來。一部分冷色是由冷暖色混合而來的他們繼承了一些暖色的性質(zhì)。再設(shè)計(jì)中冷色系的顏色可以營造出冷靜,嚴(yán)謹(jǐn)?shù)臍夥铡?/div>
 
一些科技公司對(duì)冷色系比較偏好一點(diǎn),正因?yàn)槔渖档念伾梢誀I造出專業(yè)專注的嚴(yán)謹(jǐn)?shù)男睦锔惺?。例如King Root應(yīng)用在手機(jī)UI設(shè)計(jì)中。其界面運(yùn)用了藍(lán)色系的主色風(fēng)格,體現(xiàn)出產(chǎn)品在Root方面的專業(yè)性和專注感。
 
現(xiàn)今所有的顏色幾乎都有自己所表達(dá)的情感,和代表的心里感覺。如同紅色活力,速度,緊迫感;黃色:青春,樂觀,豁達(dá);藍(lán)色:信任,安全,神秘,有底蘊(yùn);綠色:生命力,天然,輕松;橙色:積極,進(jìn)取,活力;粉色:浪漫,女人,可愛;黑色:影響力,前衛(wèi),嚴(yán)肅;紫色:高貴,冷艷,誘惑。
 
每一種顏色的情感不是一成不變的,隨著飽和度和明度的變化顏色的情感也會(huì)出現(xiàn)不一樣的變化,色彩傳達(dá)出來的感受也會(huì)完全不同。色彩之間的搭配不同所傳達(dá)出來的感受也會(huì)發(fā)生變化。色彩搭配時(shí)同種顏色站的比例不一樣也會(huì)影響到顏色所表達(dá)出來的情感。隨著歷史的發(fā)展一下顏色的情感也會(huì)發(fā)生變化,地區(qū)的不同色彩的情感也存在著差異,如同在中國古代黃的是最高貴的顏色而在西方高貴的顏色則是紫色。
 
3、手機(jī)APP界面設(shè)計(jì)色彩應(yīng)用方法
3.1色彩風(fēng)格搭配應(yīng)用方法
我們所做的產(chǎn)品是有確定的使用人群的有一定的方向的,整個(gè)社會(huì)是有不同的人群組成的因?yàn)槭艿降奈幕潭群蜕畋尘暗牟煌援a(chǎn)生了很大的差異,在不同的年齡段,不同的性別,不同的地域,不同的國家和民族對(duì)色彩的感受是截然不同的。
 
所以在手機(jī)UI設(shè)計(jì)中要根據(jù)自身產(chǎn)品應(yīng)用的方向行業(yè)和使用的人群以及地域和年齡段去確定我們的色彩應(yīng)用風(fēng)格和色調(diào)。錯(cuò)誤的色彩搭配雖然有美感但是手機(jī)App界面設(shè)計(jì)不僅僅是為了美感而去設(shè)計(jì)的。擁有美感的配色應(yīng)對(duì)不適當(dāng)?shù)姆较蛞矔?huì)適得其反。如同你不可能在一款餐飲App中全部運(yùn)用冷色系的色彩。
 
在一款PIG醫(yī)生這款A(yù)pp中主要是經(jīng)營的在線寵物豬醫(yī)院和相關(guān)產(chǎn)品的商城。其主要配色以暖色調(diào),點(diǎn)綴冷色。色彩豐富甜美符合養(yǎng)寵物豬的使用者的性格,冷色是體現(xiàn)出此App的專業(yè)性。暖色系甜美的配色符合一個(gè)購物的App的配色風(fēng)格,如圖3。
圖3PIG醫(yī)生
圖3PIG醫(yī)生
 
3.2、
色彩情感屬性應(yīng)用方法
在App界面設(shè)計(jì)中,創(chuàng)造獨(dú)有的氣質(zhì)和氣氛,可通過良好的色彩審美根據(jù)其色彩感情做出選擇,色彩色調(diào)也用以表現(xiàn)復(fù)雜多變的人類感情。比如:以不同色調(diào)為主的色彩、會(huì)有醒目的設(shè)計(jì)感覺,而且風(fēng)格非常鮮明,有助于表現(xiàn)激烈、沖動(dòng)的思想感情。
 
增強(qiáng)色調(diào)對(duì)比弱的色彩,可以表達(dá)統(tǒng)一和諧的視覺效果,效果成熟,沉穩(wěn)有助于表現(xiàn)雅性,高貴。提高色彩明度有高明度的色彩為主調(diào),可表現(xiàn)快速,明朗、明快、的意象情感,降低色彩明度以低明度色調(diào)為主的色彩,可表現(xiàn)沉重深度、莊嚴(yán),沉穩(wěn)的情感基調(diào)。營造強(qiáng)烈的視覺感受可以用單一高純度的色調(diào)為主色調(diào),在富于生氣與活力的同時(shí)在視覺上可產(chǎn)生強(qiáng)烈的刺激,而且還可使設(shè)計(jì)產(chǎn)生輕松,單純,艷麗的效果和感受。
 
而以低純度色調(diào)為主的色彩,是可表達(dá)溫柔含蓄、和氣、樸實(shí)的情感基調(diào)。色彩越鮮艷,明朗、到位,就越能準(zhǔn)切的表達(dá)其設(shè)計(jì)的主題界面的美感和訴主訴求,明確的傳達(dá)應(yīng)用的思想態(tài)度與情感就能夠讓使用的同時(shí)既得到便捷的信息傳遞又得到了沒得感受還和應(yīng)用所要表達(dá)的情感產(chǎn)生共鳴。再有App界面設(shè)計(jì)中的色彩要層次豐富不但要自身有美感還有利用色彩來輔助交互更簡(jiǎn)潔的處理信息的傳遞,運(yùn)用色彩來傳達(dá)情感,使設(shè)計(jì)的界面附帶感情,也使App界面會(huì)深入微妙,獲得成功。
 
在蘑菇街App界面設(shè)計(jì)中,因?yàn)槟⒐浇质且患覍iT做女孩子服裝等產(chǎn)品的購物App,其標(biāo)志為梅紅色為背景,其移動(dòng)端的界面設(shè)計(jì)也以高明度的色調(diào)為主界面中的icon點(diǎn)綴高明度的冷色系顏色做平衡,使App夠年輕化,表達(dá)明朗明快,年輕時(shí)尚符合App使用者的年齡段。因?yàn)槠涫鼙姷哪挲g一般在15歲到30的年輕女性。其配色利用色彩的情感屬性表達(dá)出了其自身甜美,時(shí)尚年輕,明快的感覺符合其使用人群,如圖4。
圖4蘑菇街
圖4蘑菇街
 
3.3、色彩整體色調(diào)應(yīng)用方法
手機(jī)UI設(shè)計(jì)中界面的整體性是一個(gè)App成功的關(guān)系因素,在設(shè)計(jì)之初就要選擇好界面乃至整個(gè)App的一個(gè)或者幾個(gè)標(biāo)準(zhǔn)色和幾個(gè)預(yù)備的輔助色,通常一個(gè)界面上的顏色不能過多,要有層次明確主次,色彩過多主次不分的話會(huì)給人以雜亂的感覺。
 
在App設(shè)計(jì)中整體的風(fēng)格要從LOGO貫穿整個(gè)界面到每一個(gè)icon的配色。這樣才能夠設(shè)計(jì)出一系列的風(fēng)格統(tǒng)一,顏色和諧的界面。
 
在手機(jī)UI設(shè)計(jì)中有同種色應(yīng)用:同種色搭配是首先要選擇一個(gè)基準(zhǔn)色彩調(diào)整其透明度和飽和度,或者加深或變淡色彩來得到更多的色彩。這樣色彩即統(tǒng)一又富有變化。
 
鄰近色搭配,鄰近色是色環(huán)上相鄰的顏色,例如綠色與藍(lán)色,紅色與黃色,利用鄰近色可以避免界面設(shè)計(jì)的錯(cuò)亂,易于達(dá)到界面統(tǒng)一的效果。對(duì)比搭配,這樣的搭配最能體現(xiàn)色彩的情感,視覺沖擊力也是最強(qiáng)。一般會(huì)以一個(gè)顏色為主點(diǎn)綴其對(duì)色。暖色系的色彩應(yīng)用,暖色系的色彩應(yīng)用通常也會(huì)搭配冷色系的顏色。冷色系的顏色搭配,一般白色搭配更出效果,主要表達(dá)寧靜,高冷清涼。
 
在餓了么App中主色調(diào)是湖藍(lán)色,這款應(yīng)用是一個(gè)網(wǎng)上訂餐的App以湖藍(lán)色為主色調(diào)這種偏中性的色彩表現(xiàn)自身的專業(yè)性,還有其用戶群多為學(xué)生族和上班族,色彩明亮洋溢著青春的年輕,青春的氣息,同時(shí)點(diǎn)綴了其他暖色系的色彩做icon協(xié)調(diào)整體的界面色彩平衡從而也把這個(gè)界面的色調(diào)調(diào)和成為一個(gè)暖色調(diào)的點(diǎn)餐界面。其整體的色調(diào)就是以對(duì)比的用色方式以一個(gè)顏色為主要風(fēng)格色,點(diǎn)綴其對(duì)色,如圖5。
 
圖5餓了么
圖5餓了么
 
3.4、色彩獨(dú)特性應(yīng)用方法
我們?cè)谧匀唤缈吹降纳适怯邢薜模绹囊晃恍睦韺W(xué)家曾提出,同一顏色和效果出現(xiàn)的頻率太高就會(huì)產(chǎn)生膩的感覺。App界面設(shè)計(jì)色彩要勇于創(chuàng)新,只有不斷的創(chuàng)新才能在眾多的App中脫穎而出,給用戶留下深刻的印象。作為現(xiàn)在因智能手機(jī)的普及而繁榮的App應(yīng)用,一個(gè)優(yōu)秀的獨(dú)特的界面色彩運(yùn)用甚至比其自身的某些功能還要重要。作為一個(gè)App界面只有不斷的融入新的色彩元素推陳出新,更新迭代才能迎合當(dāng)下使用人群的審美要求。
 
在這個(gè)App界面設(shè)計(jì)互相抄襲的時(shí)期,只有打破常規(guī)特立獨(dú)行的選擇配色才能出奇制勝。才會(huì)形成自己獨(dú)特的風(fēng)格,才能讓使用者在應(yīng)用時(shí)更好的記住我們的App,才能給用戶留下深刻的印象。打破常規(guī),推陳出新才能事半功倍達(dá)到想要的富有藝術(shù)感的手機(jī)App界面設(shè)計(jì)。
 
色彩的積極運(yùn)用是一個(gè)App界面的一個(gè)重要前提,好的App必須由好的創(chuàng)意來進(jìn)行表達(dá),而好的創(chuàng)意一定有一個(gè)獨(dú)特的好的色彩應(yīng)用方案,不落俗套與眾不同。好的獨(dú)特的配色方案會(huì)在App界面美感上吸引受眾從而達(dá)到想要的結(jié)果。
 
小咖秀App中的配色就是特立獨(dú)行的典型案例,小咖秀是一款視頻拍攝軟件,同類型的有秒拍,快手等,這些應(yīng)用都是用的亮色或者甜美的顏色為自己手機(jī)端UI設(shè)計(jì)的色彩風(fēng)格,而小咖秀的誕生打破了這一常規(guī),小咖秀整體的設(shè)計(jì)風(fēng)格和配色風(fēng)格是深色接近黑色,而且運(yùn)用原色做點(diǎn)綴,加以其他洋溢著青春氣息的輔助色來進(jìn)行應(yīng)用。這種配色風(fēng)格打破了在他之前的秒拍和快手的色彩風(fēng)格,利用深色里加一下純度比較高的顏色,在色彩應(yīng)用上別具一格,從而取得了成功,如圖6。
圖6小咖秀


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYzMjA4OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

image.png

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

image.png

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

 

 

日歷

鏈接

個(gè)人資料

存檔