孟旭　趙樹(shù)繁

摘 要：當(dāng)今時(shí)代是快速發(fā)展的互聯(lián)網(wǎng)時(shí)代，人們使用并逐漸依賴各種移動(dòng)互聯(lián)網(wǎng)產(chǎn)品，對(duì)其界面設(shè)計(jì)及交互形式的要求也越來(lái)越高?；ヂ?lián)網(wǎng)企業(yè)為滿足用戶越來(lái)越高的需求，不斷加快產(chǎn)品迭代的速度，對(duì)產(chǎn)品設(shè)計(jì)標(biāo)準(zhǔn)有了新的要求。一款成功的產(chǎn)品設(shè)計(jì)，應(yīng)具備良好的使用功能、極好的表現(xiàn)形式。色彩是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品中最直觀的表現(xiàn)形式，應(yīng)在服從功能的基礎(chǔ)上，體現(xiàn)時(shí)代韻味，滿足人們的心理及情感需求。本文從色彩的角度分析icon設(shè)計(jì)應(yīng)注重功能，從功能出發(fā)，多種形式服從功能，這樣產(chǎn)品才能達(dá)到設(shè)計(jì)的目的。

關(guān)鍵詞：形式；功能；手機(jī)UI；icon

1 定義及發(fā)展

“形式服從功能”法則在《通用設(shè)計(jì)法則》一書中包含兩種詮釋：一個(gè)是美感性詮釋（設(shè)計(jì)注重功能，美感屬次要考慮）；另一個(gè)是描述性詮釋（美感來(lái)自于純粹的功能，沒(méi)有其他多余的裝飾）。兩種詮釋都強(qiáng)調(diào)了功能的重要性，形式次之。

2 形式和功能之間的關(guān)系

正確處理好形式和功能之間的關(guān)系是手機(jī)icon設(shè)計(jì)中的首要任務(wù)，形式是產(chǎn)品的表現(xiàn)形態(tài)，包括造型、顏色、展現(xiàn)效果，功能是產(chǎn)品某種特定功效和性能。本文中的形式是手機(jī)icon色彩的呈現(xiàn)形式，功能為icon使用色彩的目的、作用以及所要達(dá)到的一種效果。功能和形式相互作用，相互影響，形式是功能的載體和外在表現(xiàn)。icon的形式來(lái)源于功能，會(huì)受到功能的影響和約束。功能對(duì)產(chǎn)品形式的約束非常松散，滿足同一功能的形式多種多樣，并且形式會(huì)隨著時(shí)代的發(fā)展不斷發(fā)生改變，以適應(yīng)人們不斷變化的審美需求。

人們認(rèn)識(shí)和研究事物的過(guò)程都是從簡(jiǎn)單到復(fù)雜再到簡(jiǎn)單的過(guò)程，無(wú)論是簡(jiǎn)單還是復(fù)雜，都是事物的形式，都是為功能服務(wù)，設(shè)計(jì)作品也是一樣。隨著時(shí)代的變化和人們認(rèn)知的增強(qiáng)，形式會(huì)改變，但所要表達(dá)的意思及達(dá)到的功效是相同的、固定的。如圖1為畢加索畫的牛的演變過(guò)程，隨著對(duì)牛更深層次的理解及自己造詣的提高，繪牛從寫實(shí)到抽象演變，但畫面始終能夠解讀為牛，充分說(shuō)明形式上的復(fù)雜簡(jiǎn)單最終的落腳點(diǎn)是在牛的表達(dá)上。

再如圖2為鬧鐘的多種形式，設(shè)計(jì)者最初設(shè)計(jì)的鬧鐘是擬物化風(fēng)格，寫實(shí)為主，盡可能還原真實(shí)鬧鐘的形態(tài)。隨著時(shí)代的發(fā)展以及人們認(rèn)知的不斷增強(qiáng)，開(kāi)始向扁平化的設(shè)計(jì)風(fēng)格轉(zhuǎn)化，但鬧鐘展現(xiàn)時(shí)間的功能始終沒(méi)變，用最簡(jiǎn)單的形式把時(shí)間信息更直觀地表現(xiàn)出來(lái)，減少了認(rèn)知障礙。

3 “形式服從功能”原則在icon中的應(yīng)用

（1）色彩能夠清楚表達(dá)icon的語(yǔ)義。色彩本身并不具有特定的語(yǔ)義，是人們長(zhǎng)時(shí)間通過(guò)對(duì)事物的認(rèn)知、學(xué)習(xí)、記憶、聯(lián)想把顏色轉(zhuǎn)化成了特定的指向，就像我們的名字一樣，說(shuō)出名字就能想到特指的人。icon通過(guò)形狀、色彩兩種形式表達(dá)語(yǔ)義。在眾多APP軟件中，很多icon色彩并不是隨意賦形，而是具有特定的語(yǔ)義指向、產(chǎn)品的特殊定位，能夠讓用戶潛意識(shí)地聯(lián)想產(chǎn)品，在聯(lián)想的過(guò)程中將色彩符號(hào)轉(zhuǎn)化成特定的語(yǔ)義。在實(shí)際項(xiàng)目中，筆者也運(yùn)用了色彩的語(yǔ)義表達(dá)，借鑒氣象災(zāi)害中的四個(gè)等級(jí)的顏色，將其運(yùn)用到監(jiān)控系統(tǒng)的產(chǎn)品設(shè)計(jì)中去。監(jiān)控系統(tǒng)分為正常、警告、危險(xiǎn)、嚴(yán)重四個(gè)等級(jí)，與氣象災(zāi)害的四個(gè)等級(jí)相吻合。正常相對(duì)容易理解，代表色彩為綠色。筆者選取藍(lán)、橙、紅三個(gè)等級(jí)顏色讓用戶更容易認(rèn)知監(jiān)控等級(jí)，減少學(xué)習(xí)成本，同時(shí)藍(lán)橙、紅綠為互補(bǔ)色，起到對(duì)比作用，加強(qiáng)表現(xiàn)效果。

（2）劃分功能區(qū)。手機(jī)APP界面包含很多功能模塊，各模塊icon會(huì)填充不同的顏色，按功能區(qū)分類成組排布，使功能區(qū)劃分更加直觀明確，減少用戶的學(xué)習(xí)成本和認(rèn)知負(fù)荷，提高閱讀效率。好的icon風(fēng)格設(shè)計(jì)一定要保持一致，這樣才能保證設(shè)計(jì)的統(tǒng)一性。頁(yè)面功能區(qū)隨著導(dǎo)航欄圖標(biāo)的切換不斷發(fā)生變化，且同一類別的圖標(biāo)放在一起，使功能區(qū)劃分更加直觀。

（3）引導(dǎo)功能。icon發(fā)展至今分為兩種形態(tài)：功能icon、軟件icon。其交互的形式經(jīng)歷了多個(gè)階段，從最初的點(diǎn)擊無(wú)任何效果的切換跳轉(zhuǎn)到現(xiàn)在很多設(shè)計(jì)產(chǎn)品的動(dòng)效切換，最終目的是為了增強(qiáng)用戶與產(chǎn)品的互動(dòng)，達(dá)到很好的交互。從色彩的角度出發(fā)，icon的交互形態(tài)（點(diǎn)擊前后反應(yīng)）大致分為三種：線線之間切換、面面之間切換、線面之間切換。根據(jù)產(chǎn)品的形態(tài)和產(chǎn)品定位選擇某種切換方式，其主要目的是進(jìn)行視覺(jué)引導(dǎo)。形式上為負(fù)形icon，具有很好的設(shè)計(jì)感，輕表達(dá)；另外一種為正形icon，面積比較大，比負(fù)形的視覺(jué)注意力強(qiáng)，與負(fù)形在一起使用，能夠很好地調(diào)動(dòng)用戶的視線流，提高學(xué)習(xí)效率，使其在最短的時(shí)間內(nèi)獲知最多的頁(yè)面交互形式。

（4）強(qiáng)調(diào)功能。在icon設(shè)計(jì)中，重要的信息或者有意讓用戶觀察到的信息，可以采用“萬(wàn)綠叢中一點(diǎn)紅”方式去強(qiáng)調(diào)，吸引用戶注意力，讓用戶很直觀容易地獲取信息。在色彩方面常用的方法為提高明度、增加對(duì)比度等。以微信為例，導(dǎo)航欄icon選中狀態(tài)為綠色，有消息時(shí)采用互補(bǔ)色紅色，增強(qiáng)對(duì)比效果，給用戶產(chǎn)生強(qiáng)烈的視覺(jué)刺激，吸引用戶視線，用戶可以很直觀地獲取發(fā)現(xiàn)中的新項(xiàng)目，從而增加點(diǎn)擊欲望。如果沒(méi)有紅色或者采用其他顏色，效果會(huì)大打折扣。

（5）協(xié)調(diào)功能。線型圖標(biāo)飽和度低，面型圖標(biāo)飽和度高，飽和度高的有前進(jìn)感，飽和度低的有后退感，兩者放在一起具有一定的層次感。在我們平常使用的微信界面，發(fā)現(xiàn)圖標(biāo)與其他三個(gè)圖標(biāo)顏色不同，飽和度高的綠色表現(xiàn)出當(dāng)前頁(yè)面為發(fā)現(xiàn)頁(yè)面，達(dá)到了圖標(biāo)語(yǔ)義傳達(dá)的功能。全部為綠色，會(huì)產(chǎn)生視覺(jué)疲勞，而灰色、銀色為中性色，能夠協(xié)調(diào)其他顏色，使圖標(biāo)更加統(tǒng)一。

4 結(jié)語(yǔ)

本文通過(guò)實(shí)例對(duì)手機(jī)APP中icon色彩的運(yùn)用進(jìn)行研究，分析出色彩在icon設(shè)計(jì)中的重要性，總結(jié)出色彩運(yùn)用到icon中的幾種功能。如果說(shuō)icon顏色、形狀、交互狀態(tài)屬于“形式”，那么用戶需求就是最根本的“功能”?！靶问椒墓δ堋敝械男问讲⒉皇且环N，功能的表現(xiàn)可以為多種形式，但形式的展現(xiàn)一定要服從于功能，根據(jù)功能的需要，選擇合適的形式。

參考文獻(xiàn)：

[1] 立德威爾（美），霍頓（美），巴特勒（美）.通用設(shè)計(jì)法則[M].朱占星，薛江，譯.北京：中央編譯出版社，2013.

[2] 泰德維爾（美）.界面設(shè)計(jì)模式（第二版）[M].蔣芳，等，譯.北京：電子工業(yè)出版社，2013.

[3] Smashing Magazine .眾妙之門網(wǎng)站UI設(shè)計(jì)之道[M].賈云龍，王士強(qiáng)，譯.人民郵電出版社，2012.

[4] 約瑟夫·阿爾伯斯.色彩構(gòu)成[M].李敏敏，譯.重慶：重慶大學(xué)出版社，2012：33-47.

作者簡(jiǎn)介：孟旭（1990—），男，山東棗莊人，北京郵電大學(xué)數(shù)字媒體與設(shè)計(jì)藝術(shù)學(xué)院設(shè)計(jì)藝術(shù)學(xué)專業(yè)2014級(jí)碩士研究生。