孟旭　趙樹繁

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

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

1 定義及發(fā)展

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)語

本文通過實例對手機APP中icon色彩的運用進行研究，分析出色彩在icon設(shè)計中的重要性，總結(jié)出色彩運用到icon中的幾種功能。如果說icon顏色、形狀、交互狀態(tài)屬于“形式”，那么用戶需求就是最根本的“功能”。“形式服從功能”中的形式并不是一種，功能的表現(xiàn)可以為多種形式，但形式的展現(xiàn)一定要服從于功能，根據(jù)功能的需要，選擇合適的形式。

參考文獻：

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

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

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

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

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