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

什么是視覺一致性？

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

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

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

1. 品牌色

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

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

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

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

2. 色彩比例

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

3. 材質

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

4.排版

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

5.圖標

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

6.品牌輔助圖形

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

7.圖層樣式

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

8.畫風

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

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

分享文章：淺談多終端產品視覺一致性
文章出自：http://www.rwnh.cn/news31/169831.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、虛擬主機、微信小程序、品牌網(wǎng)站建設、搜索引擎優(yōu)化、外貿建站

廣告

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