UI 設(shè)計中色彩在少兒編程產(chǎn)品中的應(yīng)用探索

肖璇/廣州工商學(xué)院

0 引言

隨著現(xiàn)代信息技術(shù)的迅猛發(fā)展，人工智能迅速躋身技術(shù)創(chuàng)新的第一梯隊。2017 年7 月，國務(wù)院印發(fā)《新一代人工智能發(fā)展規(guī)劃的通知》提出：“實施全民智能教育項目，在中小學(xué)階段設(shè)置人工智能相關(guān)課程，逐步推廣編程教育，鼓勵社會力量參與寓教于樂的編程教學(xué)軟件、游戲的開發(fā)和推廣[1]。”在此背景下，各地方企業(yè)紛紛響應(yīng)國家政策，針對中小學(xué)的編程產(chǎn)品也越來越多。少兒編程產(chǎn)品作為中小學(xué)生學(xué)習(xí)編程時的重要工具，其用戶體驗和學(xué)習(xí)效果受到廣泛關(guān)注。其中，UI 設(shè)計作為影響用戶體驗的關(guān)鍵因素之一，而色彩作為UI設(shè)計中的重要元素，對吸引用戶的注意力和引導(dǎo)用戶，提升產(chǎn)品的趣味性等方面都具有重要作用。因此，探索UI 設(shè)計中色彩在少兒編程產(chǎn)品中的應(yīng)用具有重要意義。

1 色彩在UI 設(shè)計中的作用

1.1 吸引注意力和引導(dǎo)用戶

色彩，作為視覺元素中重要元素，具有強(qiáng)大的吸引力，能夠吸引用戶的注意和引導(dǎo)用戶。通過巧妙地運(yùn)用色彩，設(shè)計者可以有效地傳達(dá)信息，引導(dǎo)用戶跟隨設(shè)計者的思路去瀏覽和使用，從而達(dá)到設(shè)計者預(yù)期的設(shè)計效果。在UI 設(shè)計中，可以通過色彩來突出界面中的重要元素，一方面吸引用戶的注意，另一方面方便用戶快捷地操作界面。例如，一個顯眼的操作按鈕可以使用鮮艷的顏色或強(qiáng)烈的對比色來突出其重要性。導(dǎo)航欄則可以通過使用明顯的色彩編碼或漸變色來區(qū)分不同的導(dǎo)航選項，使用戶可以輕松地識別和導(dǎo)航到所需的內(nèi)容。警告提示用戶可以使用醒目的顏色和字體來引起用戶的注意，及時提醒他們注意重要信息或進(jìn)行必要的操作。

1.2 傳達(dá)信息和情緒

顏色在UI 設(shè)計中有舉足輕重的作用，梵高曾認(rèn)為繪畫中的色彩高于一切[2]。色彩語言是一種具有情感表達(dá)能力的元素，它可以通過不同的組合和排列方式來傳遞出不同的信息[3]。不同的色彩帶給人的情緒感受是不同的，色彩通過視覺感官直接作用于人的感官，刺激人的神經(jīng)，進(jìn)而在情緒心理上產(chǎn)生影響。設(shè)計師需要深入了解色彩的心理效應(yīng)和象征意義，結(jié)合產(chǎn)品的特點和目標(biāo)用戶群體的需求，巧妙地進(jìn)行色彩的規(guī)劃和設(shè)計。通過不同的色彩的合理運(yùn)用，給用戶傳達(dá)對應(yīng)的信息，創(chuàng)造出符合用戶需求的優(yōu)秀UI 設(shè)計。在UI 設(shè)計中，紅色通常代表“停止”，而綠色則代表“開始”。同時，色彩還可以引發(fā)特定的情緒反應(yīng)。例如，暖色調(diào)（如紅色和橙色）可以引發(fā)興奮和熱情的情緒，而冷色調(diào)（如藍(lán)色和紫色）可以帶來平靜和放松的感覺。像購物類、音樂類APP 產(chǎn)品，通常采用紅色或者橙色，以此來激發(fā)用戶的激情和活力，吸引用戶消費(fèi)和體驗，而教育類、科技類APP 通常采用藍(lán)色作為主色調(diào)，給人一種平靜、專注、嚴(yán)謹(jǐn)?shù)臍庀?，這樣的顏色會有利于提高用戶的專注度。

1.3 引導(dǎo)視覺層次

色彩在視覺層次中扮演著至關(guān)重要的角色，它通過不同的明暗、對比度和飽和度等特性，引導(dǎo)用戶視線，決定用戶先看什么，再看什么，從而實現(xiàn)有效的信息傳遞和引導(dǎo)。通過巧妙地運(yùn)用色彩，能在UI 設(shè)計中創(chuàng)建不同地層次結(jié)構(gòu)，強(qiáng)調(diào)重要的元素，弱化次要信息，使其他元素往后退。例如，在UI 界面設(shè)計中，明亮的色彩通常會吸引我們的注意力，成為視覺焦點。而較暗或飽和度較低的顏色可能會被視為背景，為前景元素提供對比和視覺層次。通過巧妙地調(diào)整色彩的飽和度、明度和對比度，設(shè)計者可以迅速給用戶一個視覺層次分明的UI 界面，以便提高UI 產(chǎn)品的可讀性和易用性，使用戶能夠更輕松地理解和使用產(chǎn)品，從而提升用戶體驗。

2 少兒編程產(chǎn)品中色彩的應(yīng)用特點

2.1 色彩的認(rèn)知度

在設(shè)計開發(fā)少兒編程產(chǎn)品時，應(yīng)充分考慮少兒的認(rèn)知特點和心理需求，運(yùn)用合適的色彩搭配來進(jìn)行開發(fā)設(shè)計，以方便少兒理解和操作界面，并激發(fā)他們的學(xué)習(xí)興趣和創(chuàng)造力，從而提高少兒的編程能力。

少兒對色彩的認(rèn)知度相對較低，而使用鮮艷的色彩對比可以突出界面的重點和操作按鈕，使少兒能夠更加容易地識別和操作系統(tǒng)。因此，在少兒編程產(chǎn)品的UI 設(shè)計中，應(yīng)盡量使用對比度明顯、易于區(qū)分的色彩。此外，應(yīng)該考慮少兒的心理特點和認(rèn)知能力，在設(shè)計時可以結(jié)合他們自身的生活經(jīng)驗和興趣相關(guān)的色彩和圖案。例如，使用鮮艷自然色彩可以激發(fā)少兒的興趣和想象力，幫助他們更好地理解和操作產(chǎn)品。

2.2 色彩的偏好

在少兒編程產(chǎn)品的UI 設(shè)計中，了解少兒的色彩偏好具有重要意義。根據(jù)少兒的心理特征和喜好，少兒往往對鮮艷、明亮的色彩表現(xiàn)出濃厚的興趣，這些色彩不僅能吸引他們的眼球，更能激發(fā)他們的好奇心和探索欲望，因此選擇鮮艷明亮的色彩可以增加他們對產(chǎn)品的興趣和好感度。例如，可以使用鮮艷的紅色、綠色、藍(lán)色等色彩來增加少兒的興趣和參與度。也可以通過調(diào)研和分析來確定少兒偏好的色彩組合，以便更好地滿足他們的需求。在確定好少兒偏好的色彩組合后還應(yīng)該確保界面的整體色調(diào)的和諧統(tǒng)一。

2.3 色彩的象征意義

色彩不僅具有視覺效果，還具有豐富的象征意義。在少兒編程產(chǎn)品的UI 設(shè)計中，巧妙地利用色彩的象征意義可以更好地傳達(dá)產(chǎn)品理念和功能。例如，綠色常常被視為安全、通過、完成的象征，而紅色則常常被視為危險、錯誤、停止和警告的象征（圖1）。在設(shè)計界面時，當(dāng)少兒完成一個任務(wù)或通過一個關(guān)卡時，可以使用綠色的背景或按鈕來表達(dá)“通過”的含義；當(dāng)學(xué)生遇到錯誤或需要停止操作時，可以使用紅色的背景或按鈕來表達(dá)“錯誤”或“停止”的含義，這樣的色彩提示可以使得少兒更快地理解和掌握相關(guān)的概念和操作。

圖1 色彩的象征意義 （圖片來源：網(wǎng)絡(luò)）

3 應(yīng)用探索

3.1 結(jié)合兒童自身特點，利用色彩給編程產(chǎn)品賦能

少兒編程產(chǎn)品的目的在于培養(yǎng)少兒的創(chuàng)造力和創(chuàng)新思維能力，使他們學(xué)會構(gòu)建自己的想法并將其實現(xiàn)。在少兒時期，少兒對世間萬物充滿著好奇心，特別是對浩瀚的宇宙、神秘的太空等概念有著與生俱來的喜愛和向往（圖2）。因此，在進(jìn)行少兒編程產(chǎn)品UI 設(shè)計時，可以將浩瀚的宇宙這個元素加入其中，能夠極大地吸引少兒的注意力，激發(fā)他們強(qiáng)烈的好奇心和探索欲望。

圖2 結(jié)合兒童自身特點，利用色彩給編程產(chǎn)品賦能 （圖片來源：網(wǎng)絡(luò)）

不同的顏色帶給人的感受是不同的，了解不同顏色所代表的含義和情感，能夠有效地幫助我們更好地選擇和應(yīng)用。像藍(lán)色代表平靜和冷靜，紫色代表神秘和高貴，跟少兒編程產(chǎn)品所要傳達(dá)出的神秘感和培養(yǎng)少兒編程能力的冷靜思維方式匹配度很高。因此在UI 設(shè)計的色彩的選擇上，可以巧妙地運(yùn)用深紫色、深藍(lán)色作為背景色，使整個產(chǎn)品自帶有神秘氣息，激發(fā)少兒的探索欲，以此來吸引少兒來加入到編程產(chǎn)品的設(shè)計中。

少兒的心理特點和認(rèn)知能力使他們對色彩的反應(yīng)比成人更加敏感和直接。因此，鮮艷的色彩對比更容易吸引他們的眼球，并幫助他們更容易操作系統(tǒng)。但是，少兒APP 產(chǎn)品開發(fā)的界面視覺設(shè)計中也并不是色彩越多越好，因為色彩本身比較明亮鮮艷，如使用過多，極易使視覺過度緊繃[4]。例如，在進(jìn)行少兒編程產(chǎn)品UI 設(shè)計時，可以采用黃色、橙色作為UI 設(shè)計中產(chǎn)品的主要顏色。一方面，黃色和紫色、橙色和藍(lán)色互為對比色，彼此互補(bǔ)，這樣鮮艷的對比色能夠幫助少兒快速地操作系統(tǒng)；另一方面，編程本身是很嚴(yán)謹(jǐn)、很嚴(yán)肅的，而深紫色和深藍(lán)色等冷色調(diào)能夠傳達(dá)出一種穩(wěn)重和嚴(yán)肅感。黃色和紫色、橙色和藍(lán)色的搭配跟整個編程產(chǎn)品傳達(dá)出來的氣息非常相符。此外，合理地搭配產(chǎn)品的色彩也能幫助少兒培養(yǎng)嚴(yán)謹(jǐn)?shù)倪壿嬆芰ΑＷ詈?，深紫色、深藍(lán)色等深色背景上的黃色、橙色等亮色文本通常比淺色背景上的深色文本更容易閱讀。這樣的色彩搭配可以提高可訪問性。為文本添加對比色背景或使用特定的顏色來表示重要信息，方便兒童快速聚焦重要信息。

3.2 結(jié)合編程產(chǎn)品特點，利用色彩激發(fā)少兒情感共鳴

編程本身具有很強(qiáng)的邏輯性和嚴(yán)謹(jǐn)性，這也是國家鼓勵社會力量參與寓教于樂的編程教學(xué)軟件、游戲的開發(fā)和推廣的重要原因，因為它能很好地培養(yǎng)少兒的邏輯思維能力和創(chuàng)造力。但是，對于少兒來說，單純地運(yùn)用文字和指令來學(xué)習(xí)編程太過于枯燥乏味，很難激發(fā)學(xué)生的學(xué)習(xí)欲望和學(xué)習(xí)興趣點。而常規(guī)的界面設(shè)計太過復(fù)雜無法滿足少兒真正的學(xué)習(xí)需求，同樣不能吸引少兒的學(xué)習(xí)樂趣。因此，在少兒編程產(chǎn)品的UI設(shè)計中，巧妙地利用色彩激發(fā)少兒的情感共鳴，能讓原本枯燥無味略顯生硬的編程內(nèi)容，變成一個有溫度的編程產(chǎn)品。

色彩具有強(qiáng)大的視覺語言，能夠傳遞不同的情感，從而極大地激發(fā)少兒的情感共鳴。在進(jìn)行少兒編程產(chǎn)品UI 設(shè)計時，可以利用色彩給人傳遞出不同的情感特征將不同的色彩與編程任務(wù)和訓(xùn)練場景相結(jié)合。例如，少兒在進(jìn)行闖關(guān)編程訓(xùn)練時，利用沉穩(wěn)干凈的藍(lán)色，以便讓少兒能夠穩(wěn)定發(fā)揮，從而闖關(guān)成功；當(dāng)少兒完成一項編程任務(wù)時，界面中可以呈現(xiàn)一個亮麗的綠色背景，以表達(dá)“你太棒啦”的情感；當(dāng)少兒在編程中遇到困難時，可以使用溫暖的橙色來表示對少兒的關(guān)心和鼓勵的情感，希望他們再接再厲，不畏艱難，勇往直前；當(dāng)少兒成功解決編程難點時，界面中可以使用明亮的黃色來表達(dá)成功的喜悅和興奮的情感。運(yùn)用色彩對應(yīng)的情感特征可以讓少兒在學(xué)習(xí)編程的過程中真正地體會到樂趣和成就感，從而提高學(xué)習(xí)編程積極性和參與度。

不同的色調(diào)也能表達(dá)不同的情感屬性，這點在少兒編程產(chǎn)品中尤為重要。例如，在進(jìn)行編程競技比賽的過程中，少兒需要集中精力去完成比賽任務(wù)，而運(yùn)用沉著冷靜的藍(lán)色可以營造出一種平靜、專業(yè)的氛圍，可以讓少兒全身心投入到比賽的過程中。此外，沉著冷靜的藍(lán)色也能夠減少激烈的比賽帶給他們的緊張情緒，幫助他們保持冷靜，以便他們更好地應(yīng)對比賽，同時也能讓少兒在比賽的過程中感受到比賽的專業(yè)度和編程的嚴(yán)肅性。而在比賽結(jié)束后，界面中則可以呈現(xiàn)出鮮亮的紅色以此來表達(dá)比賽結(jié)束后歡樂激動的場景。紅色具有強(qiáng)烈的視覺沖擊力，不僅能夠吸引少兒的注意，還能夠讓少兒第一時間感受到比賽帶給他們的快樂和興奮。同時，紅色還能傳達(dá)出熱情、洋溢的情感屬性，能讓少兒感受到自己的辛勤努力得到了巨大的認(rèn)可和肯定，這種正向的反饋能夠極大地激發(fā)少兒的內(nèi)驅(qū)力，激勵他們在未來的時間里花更多的精力和汗水在少兒編程上。

3.3 結(jié)合游戲化元素，利用色彩引導(dǎo)少兒操作流程

從少兒身心發(fā)展要求來說，少兒編程學(xué)習(xí)的重點在于趣味性、知識性和技能性。中心思想是在游戲娛樂中培養(yǎng)孩子的興趣愛好，讓孩子主動愛上編程，由淺入深[5]。因此，在進(jìn)行少兒編程產(chǎn)品設(shè)計的時候，可以巧妙地利用這一點，將相對枯燥和理性地編程內(nèi)容融入游戲化的元素，以吸引少兒的注意力，激發(fā)少兒學(xué)習(xí)編程的積極性。例如，在少兒編程產(chǎn)品中可以設(shè)置一個類似作品站的模塊，少兒在制作完一個編程項目后可以將自己的作品發(fā)布到作品站，所有參與過編程項目的少兒都可以在作品站中看到自己作品的積分和排名。這種類似于游戲中的積分榜、等級等元素不僅可以激勵少兒創(chuàng)作出更好的作品，提升少兒的參與度和競爭意識。同時，作品站也能夠為少兒提供一個互動交流分享的學(xué)習(xí)平臺，少兒不僅可以瀏覽和欣賞其他少兒的編程作品，還能夠通過查看和分析其他優(yōu)秀編程作品，學(xué)習(xí)到新的編程技巧和思路，從而提交自己的編程水平。此外，作品站還能提供一個向其他同學(xué)展示自己作品的機(jī)會，能夠讓少兒獲得更多的自信心和成就感。

這種類似作品站的模塊帶有一點游戲化的元素，在設(shè)計游戲化元素的時候也可以通過使用特定的色彩來突出顯示，引導(dǎo)少兒操作流程。在少兒編程UI 設(shè)計的過程中，可以運(yùn)用不同的色彩來區(qū)分不同的編程等級，給少兒提供一種直觀的視覺提示，幫助他們了解自己的學(xué)習(xí)進(jìn)度和目標(biāo)。比如，在初級階段我們可以使用明亮的顏色來吸引少兒的注意力，隨著少兒編程能力的不斷提升，對應(yīng)在編程UI 設(shè)計中的界面也會有對應(yīng)的色彩變化，可以逐漸過渡到更加深沉的色彩，以便展示他們的成長和進(jìn)步。通過這樣的色彩的變化能夠讓少兒看到自己的成長軌跡，就如同升級打怪一樣，從而增強(qiáng)對編程產(chǎn)品的興趣，讓他們感受到滿足感和成就感。色彩的變化能讓少兒直觀地看清楚自己編程能力的提升，能極大地增加少兒編程的自信心，為他們以后繼續(xù)學(xué)習(xí)編程埋下希望的種子。

4 結(jié)語

少兒時期是人生中非常重要的階段，他們正處在各方面發(fā)展的特殊時期，一款好的APP 產(chǎn)品能夠培養(yǎng)少兒各方面的綜合能力，對少兒的全面發(fā)展具有重要作用。因此，設(shè)計師在進(jìn)行少兒編程產(chǎn)品的UI 設(shè)計中，在保證少兒能夠?qū)W到有用的編程知識的同時一定要密切關(guān)注少兒的自身的發(fā)展特點，抓住少兒的好奇心，在潛移默化的設(shè)計中不斷培養(yǎng)和提高少兒的感知能力和審美能力，讓少兒在輕松愉快地氛圍中學(xué)習(xí)編程，學(xué)會編程，提高審美。