站長資訊平臺

產(chǎn)品中圖形語言規(guī)范化的意義與過程

2019-04-03 來源：阿里巴巴UED

現(xiàn)在隨著互聯(lián)網(wǎng)企業(yè)的發(fā)展與業(yè)務的拓展，隨著時間的推移，一個公司的產(chǎn)品可能將越來越豐富多樣，同樣每一個產(chǎn)品隨不斷的功能完善和擴展，隨著一個產(chǎn)品的“長大”產(chǎn)品內(nèi)所需要用到的圖標也必然會越來越多，這時候眾多產(chǎn)品形象的呈現(xiàn)、產(chǎn)品內(nèi)圖標等視覺原素的表現(xiàn)，如何能與整個產(chǎn)品或公司的戰(zhàn)略計劃相適應，這時候在圖形語言的視覺呈現(xiàn)，語義表達、識別性等層面就需要作一個全面細致的考慮了。

我們來看幾個典型的例子，回顧一下 Adobe 產(chǎn)品系列的成長過程，從2005年 Adobe 收購了原最大的競爭對手Macromedia公司后，它的產(chǎn)品線得到了極大豐富，而后在2002年Adobe確立了 Creative Suite概念后，后續(xù)的新產(chǎn)品持續(xù)推出，龐大的產(chǎn)品線以一種什么樣的展現(xiàn)方式呈現(xiàn)在用戶面前便成為了一項非常重要的課題。下圖中我大致的列了一下Adobe產(chǎn)品logo的一個進化轉(zhuǎn)變過程：

產(chǎn)品陣容強大的Adobe帝國在CreativeSuite 3發(fā)布的時候為旗下全部產(chǎn)品Logo進行一個色環(huán)劃分圖，很好的呈現(xiàn)出各產(chǎn)品logo的色彩關(guān)系和一個完整的用色體系。

我們再看一個例子，Apple公司在2010年和2011年先后將itunes與App store的Logo作出了比較重大的調(diào)整，到Max OS Lion版本時，兩大平臺級的產(chǎn)品新形象同時展現(xiàn)在用戶Mac的Dock上。雖無準確的官方答案，但從一個是整個Apple產(chǎn)品資源應用來源和一個是娛樂內(nèi)容來源的的兩個具有類似性質(zhì)的商業(yè)平臺產(chǎn)品來看，它們顯然是被Apple寄予相當大期望，在感觀上看來，它們在被賦予更厚重、大氣的形象這一改變，能夠很好的服務于其公司的商業(yè)戰(zhàn)略。

另外itunes 10的發(fā)布后側(cè)欄的圖標全部變成了單色，這一變化我認為是為了突出Store的資源核心區(qū)域，強調(diào)產(chǎn)品的平臺性，和上述的分析一樣，這個視覺表現(xiàn)層面的調(diào)整同樣是為了整個產(chǎn)品的資源商業(yè)戰(zhàn)略服務的。

那現(xiàn)在回到我們自己的產(chǎn)品，現(xiàn)在“我的阿里”作為一個網(wǎng)商用戶的得力助手，用戶的家，“我的阿里”內(nèi)容與應用在日益的增長，系統(tǒng)越來越龐大，同樣網(wǎng)站的視覺的圖形語言的整理，解決原來積累已久的視覺表現(xiàn)“亂象”也日益的緊迫。

在“我的阿里”視覺元素整理的第一步，眾多應用圖標是頭一個切入點，我們從圖標的含義，分類，尺寸規(guī)格、設計規(guī)則，風格表現(xiàn)等幾個方面進行一個整體方向的規(guī)劃，總結(jié)一套設計指南。

■ 在圖標的分類上，我們將網(wǎng)站圖標分為以下三類：

一產(chǎn)品圖標（Logo）

它是一款產(chǎn)品在品牌層面上的定義，指一個產(chǎn)品系統(tǒng)形象、定位和訴求的集中圖形化表現(xiàn)，產(chǎn)品圖標（Logo）起到產(chǎn)品或公司識別推廣作用，通過形象的圖形標識讓用戶認識、記住并熟識一個產(chǎn)品。

產(chǎn)品圖標設計原則：

1 能很好的詮釋出該產(chǎn)品所承載的功能和所要像用戶傳達的產(chǎn)品價值和形象；

2 圖形容易被用戶所記憶、熟知，而且有較強的排它性（不易和其它圖標混淆）。

二產(chǎn)品界面中的功能、工具圖標

在一個產(chǎn)品界面中，用概括精煉的形象來表示某一類功能或操作集合的功能性圖形標識，常會有成組有規(guī)律的在某一功能模塊中出現(xiàn)。色彩造型表現(xiàn)可以精致富有表現(xiàn)力，也可以簡潔明了，質(zhì)感單純。

功能、工具圖標設計原則：

1 表意清晰明了，采用大家均已接受的特定含義的元素圖形；

2 視覺體驗統(tǒng)一，視覺語言自成體系；