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

0 評論 5641 瀏覽 0 收藏 11 分鐘

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

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

 

產(chǎn)品陣容強(qiáng)大的Adobe帝國在CreativeSuite 3發(fā)布的時(shí)候?yàn)槠煜氯慨a(chǎn)品Logo進(jìn)行一個(gè)色環(huán)劃分圖,很好的呈現(xiàn)出各產(chǎn)品logo的色彩關(guān)系和一個(gè)完整的用色體系。

 

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

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

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

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

 

■ 在圖標(biāo)的分類上,我們將網(wǎng)站圖標(biāo)分為以下三類:

一??產(chǎn)品圖標(biāo) (Logo)

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

產(chǎn)品圖標(biāo)設(shè)計(jì)原則:

1 能很好的詮釋出該產(chǎn)品所承載的功能 和 所要向用戶傳達(dá)的產(chǎn)品價(jià)值和形象;

2 圖形容易被用戶所記憶、熟知,而且有較強(qiáng)的排它性(不易和其它圖標(biāo)混淆)。

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

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

功能、工具圖標(biāo)設(shè)計(jì)原則:

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

2 視覺體驗(yàn)統(tǒng)一,視覺語言自成體系;

一個(gè)功能模塊里面的圖標(biāo)尺寸要有較好的視覺平衡性;

一功能模塊內(nèi)甚至整個(gè)產(chǎn)品的圖標(biāo)的質(zhì)感、色彩飽和度要統(tǒng)一;

成套的多個(gè)圖標(biāo)內(nèi),圖形語義要有較好的一致性。

3 需要注意圖標(biāo)各層面意義上的繼承性問題,避免讓用戶造成識(shí)別上的困難。

三??圖形符號

一般表現(xiàn)為直接的操作按鈕或標(biāo)明該操作的輔助標(biāo)識(shí)符號,圖形表現(xiàn)為簡潔明了,用色簡潔、扁平。

 

■ 在整站圖標(biāo)尺寸規(guī)格方面,雖然Web 頁面的圖標(biāo)不需要像操作系統(tǒng)或者客戶端軟件那樣,對圖標(biāo)尺寸有著

嚴(yán)格的尺寸限制,但為了網(wǎng)站的視覺體驗(yàn)的規(guī)范性和統(tǒng)一性,“我的阿里”圖標(biāo)規(guī)范中根據(jù)以往圖標(biāo)各尺寸的使

用情況來約定3種常用尺寸:48×48 pix 、32×32 pix 、16×16 pix,

以后整站的圖標(biāo)根據(jù)各自的位置和需要,將有序的根據(jù)規(guī)則加上相應(yīng)尺寸的圖標(biāo),這樣網(wǎng)站在圖標(biāo)符號展示層

面上將會(huì)給用戶留下一個(gè)規(guī)范、專業(yè)的印象。

 

■ 在圖標(biāo)的設(shè)計(jì)過程中還需要注意下面這些問題:

上圖第一排藍(lán)色的4個(gè)圖標(biāo)看起來會(huì)顯得大小尺寸參差不齊,這是因?yàn)殡m然覺得尺寸可以是一樣的,但是外輪廓飽滿的實(shí)心圖形在給人的視覺感受上會(huì)產(chǎn)生放大效應(yīng),而第二排深色的4個(gè)圖標(biāo)大小看起來則會(huì)更加協(xié)調(diào)一些。在下圖可以看到,外輪廓飽滿的圖形進(jìn)行了一定的邊緣收縮,來與其它圖形達(dá)到視覺均衡。

這要求設(shè)計(jì)圖標(biāo)在符合約定的圖標(biāo)尺寸的同時(shí),需要注意多個(gè)圖標(biāo)的視覺均衡問題,在制作成套圖標(biāo)的時(shí)候,根據(jù)這個(gè)規(guī)律來選擇留白的空間比例。

此外單個(gè)圖標(biāo)要很好的把握外輪廓與圖形形狀的均衡關(guān)系,構(gòu)成圖標(biāo)的圖形需要盡量的接近一個(gè)正方塊,使得圖形飽滿、平衡。

 

■ 在我的阿里應(yīng)用圖標(biāo)風(fēng)格表現(xiàn)方面為了使原來的各業(yè)務(wù)、應(yīng)用圖標(biāo)和將來新增的圖標(biāo)能夠?qū)崿F(xiàn)非常好的統(tǒng)一性,我們做出了包括圖標(biāo)視角、構(gòu)成元素、光源質(zhì)感、倒角這些方面的約束:

圖標(biāo)的繪制視角為所組成物體的正前視角,在必要情況下可以有一定角度的俯視角。這樣是既在大原則上保證了整體的統(tǒng)一性,但規(guī)則也不至于太過僵硬,仍有相當(dāng)?shù)目臻g讓設(shè)計(jì)師去發(fā)揮創(chuàng)意。

整個(gè) icon 元素為? 3個(gè)以下,最多為3個(gè)元素構(gòu)成 ,組合方式以一個(gè)主體元素? 配合一個(gè)(最多兩個(gè))輔助元素。避免眾多的圖標(biāo),各自的圖形符號多寡不一,避免在圖形組合方式上造成的不統(tǒng)一。

圖標(biāo)的光源方向是正上方,圖標(biāo)顏色漸變方向是垂直方向的線性漸變,顏色從上到下由淺到深。圖標(biāo)的顏色漸變幅度較小,偏扁平感,漸變幅度不要太大以至質(zhì)感過重。

應(yīng)用圖標(biāo)約定的三種不同尺寸icon 的倒角的大小,以便在集中展示的時(shí)候在細(xì)節(jié)支出依然有良好的一致性。

經(jīng)過以上這樣一套設(shè)計(jì)指南的規(guī)范、約定能盡可能的保證原來老圖標(biāo)和后期新增加的都能有一個(gè)規(guī)則可尋,對整個(gè)網(wǎng)站整個(gè)產(chǎn)品的品質(zhì)方面,用戶友好性方面能起到一個(gè)積極的作用。

這里只從應(yīng)用圖標(biāo)這一切入點(diǎn)介紹了產(chǎn)品視覺元素統(tǒng)一性的解決方案,當(dāng)然網(wǎng)站還有其它各類控件模塊,同樣也需要實(shí)現(xiàn)類似的標(biāo)準(zhǔn)化統(tǒng)一體驗(yàn),后面仍有許多工作需要開展。

來源:http://www.aliued.cn

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!