淺談“形式服從功能原則”在移動終端icon設計中的應用

孟旭　趙樹繁

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

關鍵詞：形式；功能；手機UI；icon

1 定義及發展

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

2 形式和功能之間的關系

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

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

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

3 “形式服從功能”原則在icon中的應用

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

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

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

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

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

4 結語

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

參考文獻：

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

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

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

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

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