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

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

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

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

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

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

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

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

　　■ 在圖標的分類上，我們將網站圖標分為以下三類：

一 產品圖標 (Logo)

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

　　產品圖標設計原則：

　　1 能很好的詮釋出該產品所承載的功能 和 所要向用戶傳達的產品價值和形象;

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

二 產品界面中的功能、工具圖標

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

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

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

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

　　一個功能模塊里面的圖標尺寸要有較好的視覺平衡性;

　　一功能模塊內甚至整個產品的圖標的質感、色彩飽和度要統(tǒng)一;

　　成套的多個圖標內，圖形語義要有較好的一致性。

　　3 需要注意圖標各層面意義上的繼承性問題，避免讓用戶造成識別上的困難。

三 圖形符號

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

　　■ 在整站圖標尺寸規(guī)格方面，雖然Web 頁面的圖標不需要像操作系統(tǒng)或者客戶端軟件那樣，對圖標尺寸有著嚴格的尺寸限制，但為了網站的視覺體驗的規(guī)范性和統(tǒng)一性，“我的阿里”圖標規(guī)范中根據以往圖標各尺寸的使用情況來約定3種常用尺寸：48×48 pix 、32×32 pix 、16×16 pix，以后整站的圖標根據各自的位置和需要，將有序的根據規(guī)則加上相應尺寸的圖標，這樣網站在圖標符號展示層面上將會給用戶留下一個規(guī)范、專業(yè)的印象。

　　■ 在圖標的設計過程中還需要注意下面這些問題：

　　上圖第一排藍色的4個圖標看起來會顯得大小尺寸參差不齊，這是因為雖然覺得尺寸可以是一樣的，但是外輪廓飽滿的實心圖形在給人的視覺感受上會產生放大效應，而第二排深色的4個圖標大小看起來則會更加協(xié)調一些。在下圖可以看到，外輪廓飽滿的圖形進行了一定的邊緣收縮，來與其它圖形達到視覺均衡。

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

　　此外單個圖標要很好的把握外輪廓與圖形形狀的均衡關系，構成圖標的圖形需要盡量的接近一個正方塊，使得圖形飽滿、平衡。

　　■ 在我的阿里應用圖標風格表現(xiàn)方面為了使原來的各業(yè)務、應用圖標和將來新增的圖標能夠實現(xiàn)非常好的統(tǒng)一性，我們做出了包括圖標視角、構成元素、光源質感、倒角這些方面的約束：

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

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

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

　　應用圖標約定的三種不同尺寸icon 的倒角的大小，以便在集中展示的時候在細節(jié)支出依然有良好的一致性。

　　經過以上這樣一套設計指南的規(guī)范、約定能盡可能的保證原來老圖標和后期新增加的都能有一個規(guī)則可尋，對整個網站整個產品的品質方面，用戶友好性方面能起到一個積極的作用。

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

網頁標題：產品中圖形語言規(guī)范化的意義與過程
文章源于：http://www.bm7419.com/news15/170765.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、關鍵詞優(yōu)化、網站內鏈、面包屑導航、網站維護、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)