隨著智能終端的多樣化和快速普及，越來越多的產(chǎn)品都面臨著多終端的挑戰(zhàn)。那么視覺設(shè)計師應(yīng)該如何去把控好多終端產(chǎn)品的設(shè)計？如何讓多終端 的產(chǎn)品做到具備一致的品牌識別性？這是我想跟大家一起探討的話題。首先對于“一致”一詞，本人詮才末學(xué)，只能說是在自己目前的層次上去解釋這詞，請不吝賜 教，相信探討完后會讓我更上一個層次。

什么是視覺一致性？

一致，即整體、統(tǒng)一。在我看來，它與對比是形成了互斥的矛盾關(guān)系，但兩者同時也是相輔相成的。因為兩者的和諧存在，才能形成所謂的美感。物質(zhì)形態(tài)如 果在形成中缺少了對比那會顯得枯燥乏味，如果缺少了一致也會顯得雜亂無章，所以兩者是不可或缺，但需要調(diào)和。所以說，美就像是走在鋼索上的人，兩邊都是陷 阱，要走下去就必須保持兩邊的平衡。

籠統(tǒng)上講，視覺一致性就是通過視覺層次、比例、顏色、質(zhì)感、排版等在設(shè)計上達(dá)到一致性。我們也可以從生活中找到些體現(xiàn)一致性的例子，而視覺一致性可以提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶的認(rèn)知成本。

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

我不是一個網(wǎng)游愛好者，但對游戲界面略有研究。當(dāng)你在玩2D的阿拉德歐式風(fēng)格的游戲，途中突然彈出一個3D的很唯美的又帶有東方古典風(fēng)的廣告彈窗， 肯定會覺得很不和諧吧。當(dāng)你使用游戲中的充值幣時，細(xì)心點你會發(fā)現(xiàn)消耗充值幣的動畫與消耗游戲幣、消耗體力等消耗類的動畫效果是一致的。其實每一款好的游 戲界面都必須做到相關(guān)元素一致性、風(fēng)格一致性、色彩搭配一致性等，這樣才會給用戶帶來好的體驗。

還有就是你?？吹降南盗袕V告，他們系列感也是可以通過好些方式（畫面表現(xiàn)手法，內(nèi)容板式，slogan的位置等）來體現(xiàn)出視覺一致性，讓用戶可以直觀出同一個產(chǎn)品的系列廣告。

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

1. 品牌色

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

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

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

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

2. 色彩比例

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

3. 材質(zhì)

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

4.排版

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

5.圖標(biāo)

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

6.品牌輔助圖形

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

7.圖層樣式

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

8.畫風(fēng)

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

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

轉(zhuǎn)自：騰訊ISUX