淺談多終端產(chǎn)品視覺一致性

　　隨著智能終端的多樣化和快速普及，越來越多的產(chǎn)品都面臨著多終端的挑戰(zhàn)。那么視覺設計師應該如何去把控好多終端產(chǎn)品的設計?如何讓多終端的產(chǎn)品做到具備一致的品牌識別性?

什么是視覺一致性？

　　一致，即整體、統(tǒng)一。在我看來，它與對比是形成了互斥的矛盾關(guān)系，但兩者同時也是相輔相成的。因為兩者的和諧存在，才能形成所謂的美感。物質(zhì)形態(tài)如果在形成中缺少了對比那會顯得枯燥乏味，如果缺少了一致也會顯得雜亂無章，所以兩者是不可或缺，但需要調(diào)和。所以說，美就像是走在鋼索上的人，兩邊都是陷阱，要走下去就必須保持兩邊的平衡?；\統(tǒng)上講，視覺一致性就是通過視覺層次、比例、顏色、質(zhì)感、排版等在設計上達到一致性。我們也可以從生活中找到些體現(xiàn)一致性的例子，而視覺一致性可以提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶的認知成本。

　　好比你進去LouisVuitton的店鋪時，你不可能會看到有Chanel或者其他品牌風格的包包羅列在里面吧，LouisVuitton同一個系列的包，從手提包到肩包到行李箱，雖然產(chǎn)品上略有不同，但它們的細節(jié)和氣質(zhì)都是一致的，標識圖形、埃爾澤菲爾字體以及顏色已經(jīng)形成了其品牌的識別符號。甚至其衍生產(chǎn)品也都保留著LV獨有的氣質(zhì)。

　　視覺設計師如何把控好多終端產(chǎn)品的設計? 首先各終端的設計師必須要有同一個設計策略和了解產(chǎn)品的大局觀，在處理各種系統(tǒng)之間細微的差別時，負責各終端的設計師必須保持緊密溝通，保證在不同設備和平臺上(甚至在各個端發(fā)展的不同階段)建立一個平衡點，并同時也能利用、發(fā)揮起不同平臺的優(yōu)勢，讓產(chǎn)品在不同終端有其最好的呈現(xiàn)。 當然這些都只是前提，具體我概括出了幾點：

1. 品牌色

　　色彩是每款成功產(chǎn)品使用的最主要的手段之一，它是最容易吸引用戶的，成功的產(chǎn)品往往都是會巧妙的運用它獨有的品牌色。利用色彩刺激用戶的視覺，增強對產(chǎn)品的記憶力，讓色彩在用戶的腦海中形成一種強勢的語言。

　　目前市場上存在不少成功互聯(lián)網(wǎng)產(chǎn)品的品牌色讓用戶記憶猶新。比如說Evernote的生命綠，騰訊的科技藍，Path的激情紅，F(xiàn)acebook的安全藍，Yahoo的智慧紫。。。這些產(chǎn)品是如何讓用戶記住他們的顏色?當然，不可否認設計師下的功夫。

　　當初Facebook的設計師選用這種象征力量、可靠的藍色，最主要是因為創(chuàng)辦人Mark Zuckerberg是紅綠色盲，只能辨認出藍色，所以成就今天Facebook經(jīng)典的品牌色。無論是在官網(wǎng)、移動應用程序、LOGO、各類彈窗、按鈕、圖標、線條，甚至連某些樣式的投影都夾雜著細微的藍色投影，巧妙的被運用在Facebook中。

　　除了品牌色需要被大范圍的運用在產(chǎn)品的各個角落上，還需要有一些輔助色來適當?shù)拇钆?，才不會顯得單調(diào)。而大多數(shù)用戶的記憶是有限的，絕不能給產(chǎn)品增添亂七八糟的輔助色來模糊用戶對產(chǎn)品品牌色的認知。所以無論是在哪個平臺，品牌色以及輔助色需要一致，但有些時候因為一些因素的干擾，還是需要看具體情況再對品牌色或輔助色進行細微的調(diào)整，以達到最貼切的狀態(tài)，不贊成設計師一眛為了追求一致而一致。

2. 色彩比例

　　用戶在體驗產(chǎn)品時，色彩比例會是用戶首先可以直觀到的內(nèi)容之一，如果說在多終端的各種界面上色彩比例視覺上給人印象是均勻的話，即使人們在觀察不同的終端界面時，也會覺得視覺已達到了一致性。但有的時候多終端并沒有達到色彩比例一致性時，其實是因為設計師缺少在空間上對顏色與顏色間色彩差異的度量，這樣會導致色彩比例在多終端上呈現(xiàn)的準確性。因此，在色彩比例的計算上不能簡單的根據(jù)顏色的具體比例來定義，而要根據(jù)設計師火眼精“睛”的辨別能力來辨別出大致的顏色比例。

3. 材質(zhì)

　　材質(zhì)的增添使產(chǎn)品更顯豐富，讓產(chǎn)品顯得更加個性化。 精美的Wunderlist在設計上確實下足了功夫，這也是它一直受歡迎的原因之一。在各終端中都運用了一致的木塊材質(zhì)作為其背景，與LOGO上布條紋理形成呼應，簡約又別具一格的材質(zhì)風格，給產(chǎn)品加分不少。材質(zhì)的一致是很有必要的，至于有沒必要全平臺都使用材質(zhì)，這個得看各個平臺的需要和設計師的設計思路，比如Evernote，在iPhone、iPad、Mac和Android都使用了黛藍色的小顆粒材質(zhì)，PC和Web卻沒有這個材質(zhì)的出現(xiàn)，但并不顯得唐突。

4.排版

　　版式的一致性可以很好的將用戶在體驗各終端產(chǎn)品時來感知該產(chǎn)品無意識地傳達給用戶的一致性體驗。好比上面這款Pinterest的產(chǎn)品，它是全球大的圖片社交分享網(wǎng)站。Pinterest采用的是瀑布流的形式來展現(xiàn)圖片內(nèi)容，無需用戶翻頁，新的圖片不斷自動加載在頁面底端，讓用戶不斷的發(fā)現(xiàn)新的圖片。這種獨具風格的版式在各終端上都能很好的體現(xiàn)出該產(chǎn)品的特點。除此之外，有的產(chǎn)品還可以通過文字的左/右對齊，大小字號字體的穿插等的版式設計來將多終端的設計統(tǒng)一起來。

5.圖標

　　圖標這塊我認為各個平臺需要達成一致性，圖標的太多樣化即不利于產(chǎn)品品牌形象的發(fā)展，也會消耗不必要的資源，如果產(chǎn)品是在快速發(fā)展的情況下，圖標達成一致不僅不會影響整體美觀也提高了效率。 Google的圖標一直在引領(lǐng)著潮流，新版的圖標遵循著化繁為簡的原則，避免了圖標太過喧賓奪主而干擾到用戶的注意力。這里我找了些Google的圖標作為例子。

6.品牌輔助圖形

　　在設計一款產(chǎn)品的多終端界面時，有的時候不妨將該產(chǎn)品品牌的象征符號、圖形、字體等元素結(jié)合起來設計，這樣使得用戶產(chǎn)生對該品牌有一定的品牌認知外也可以體現(xiàn)出多終端的視覺一致性。像上面舉例的優(yōu)衣庫例子，該品牌的LOGO主要是一個紅色的方形，佐藤可士和在設計這個品牌時所定義的品牌符號就有方形的紅色塊，紅色字等，而在優(yōu)衣庫多終端的設計時適當?shù)膶⒓t色，方塊等元素的加入，也是一個不錯的體現(xiàn)多終端視覺一致性的方式。

7.圖層樣式

　　由于移動端與PC端的分辨率大小不一，相同元素的圖層樣式一般會差不多，這樣視覺上給人的感覺才是一致的。舉個簡單例子，就像在手機上我們經(jīng)常會給字體添加兩像素的高光效果，增強樣式的效果，但在PC上可能就會換成一像素的高光效果，這樣反而顯得精致些。所以不同平臺相同元素的樣式需要遵循一致性，而這里說的一致性是需要根據(jù)不同平臺做一些微調(diào)整。近一年關(guān)于Twitter的改版和一些新聞的報道可以看出Twitter越來越重視一致性的問題。這里我簡單列舉Twitter在其Web版和Android上樣式的處理，從整體上看TAB切換的視覺表現(xiàn)是保持一致的，但設計師在根據(jù)不同平臺而做了一些細微的調(diào)整，比如色值的差異、內(nèi)陰影的差異和一像素分割線的差異等。

8.畫風

　　多終端的設計有些也會通過一些獨特的畫風來體現(xiàn)視覺的一致性，而各式各樣的畫風，它不但是視覺傳達的方式，更重要的是信息傳播的載體，是運用圖像對所表達的內(nèi)容做出藝術(shù)化的解釋，出色的畫風能準確的抓住和控制用戶群的注意力。插圖可以應用在各式各樣的方法中，給產(chǎn)品帶來不同的感受。把藝術(shù)好的融入品牌中，Dropbox是最具代表性的例子之一。 Dropbox的創(chuàng)始人Houston曾經(jīng)分享時說過他們產(chǎn)品中的所有插圖其實都是他的高中同學畫的，而且不是美術(shù)專業(yè)，無心插柳也好，有意栽培也好，正是因為這種火柴人風格和簡單的蠟筆配色，形成了今天Dropbox的一大亮點。縱觀整個產(chǎn)品，這種簡約、友好、個性及現(xiàn)代風格的插圖一直出現(xiàn)在手機上的閃屏、PC上的引導頁、官網(wǎng)、運營中，向用戶傳遞了Dropbox的精神，并引領(lǐng)后者輕松愉快的了解 Dropbox。

　　或許難免有人會提出"只有量身打造的衣服，才是最貼身的"的論點。當然不可否認，尺寸顏色、材質(zhì)可以有所區(qū)別，但最主要還是要告訴用戶：這是一個牌子的衣服。只要保證了這個前提，設計師當然可以針對不同用戶群去設計不同款式的衣服。所以跨多終端的產(chǎn)品也要針對不同平臺去做最合適的設計，這就考究設計師是否對產(chǎn)品本身的視覺語言和品牌識別有足夠的了解。 這里我們需要搞清楚如何讓一致性的視覺設計提供好的體驗，而不是一昧的追求統(tǒng)一，我認為必須在具體場景下去更好地運用和遵循這個原則。 如果說一致是全局的，那對比就是局部的?？缃K端的一致需要找到一個平衡點，過多會顯得奇異、格格不入，而我們更需要的是在差異中尋找一致，需要針對各終端的具體情況去考量，看需要怎樣的一個方式來統(tǒng)一該產(chǎn)品多終端的視覺一致性。當然這些都只是個人的一些想法和思路，可以當作以后在推動此類一致性設計的一些參考。

新聞名稱：淺談多終端產(chǎn)品視覺一致性
轉(zhuǎn)載注明：http://muchs.cn/news/169831.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、動態(tài)網(wǎng)站、標簽優(yōu)化、面包屑導航、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設

廣告

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