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

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

什么是視覺一致性？

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

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

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

1. 品牌色

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

　　目前市場(chǎ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è)計(jì)師下的功夫。

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

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

2. 色彩比例

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

3. 材質(zhì)

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

4.排版

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

5.圖標(biāo)

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

6.品牌輔助圖形

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

7.圖層樣式

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

8.畫風(fēng)

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

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

分享文章：淺談多終端產(chǎn)品視覺一致性
文章出自：http://muchs.cn/news31/169831.html

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

廣告

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