廣州十大網(wǎng)頁(yè)設(shè)計(jì)視覺排版技巧

 視覺語(yǔ)言可看做另一種溝通交流的方式。語(yǔ)言涉及口語(yǔ)或書面語(yǔ)的交流，而視覺語(yǔ)言則更進(jìn)一步，與特定的群體相聯(lián)系。從顏色到風(fēng)格再到照片或插圖的類型，各種元素構(gòu)成了一個(gè)品牌或公司的形象。這些視覺元素以人們理解的結(jié)構(gòu)化和傳統(tǒng)化方式將群體聯(lián)系在一起。
 

　1.創(chuàng)建配色方案 

優(yōu)秀的配色方案是用戶識(shí)別的強(qiáng)大工具。使用一致的品牌顏色來建設(shè)網(wǎng)站等其他設(shè)計(jì)產(chǎn)品，用戶能更好的識(shí)別出特定品牌。他們不會(huì)迷失在浩瀚的網(wǎng)絡(luò)世界里，因?yàn)槟阋呀?jīng)直觀地告訴他們，他們正在與哪個(gè)網(wǎng)站或品牌互動(dòng)。

品牌的配色方案不應(yīng)該只使用在品牌網(wǎng)站上。它需要被廣泛并統(tǒng)一地應(yīng)用在品牌宣傳的活動(dòng)中，如線上廣告、社交媒體、戶外廣告、包裝、名片等。進(jìn)一步講，優(yōu)秀的配色方案能提升品牌價(jià)值。想一想麥當(dāng)勞快餐店線上線下統(tǒng)一的配色方案:黃色和紅色。顏色代表幸福(黃色)和饑餓(紅色)。

     2. 可信且可靠

視覺語(yǔ)言只有在用戶接納的情況下，才會(huì)最大程度地發(fā)揮作用，它要給人可靠的感覺。所以，整個(gè)視覺語(yǔ)言需要和你的品牌定位、氣質(zhì)表里合一，而不能讓設(shè)計(jì)和產(chǎn)品、企業(yè)的氣質(zhì)割裂開來。

你能想象沒有主角的芝麻街會(huì)是怎樣的一種氣場(chǎng)么？
整個(gè)品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來的，每一個(gè)細(xì)節(jié)的設(shè)計(jì)都是圍繞著這些角色來創(chuàng)建的。注意網(wǎng)站中角色和其他視覺元素之間的映射關(guān)系，它們讓用戶清晰地感知到角色和整體設(shè)計(jì)之間的關(guān)系是表里如一的，這使得整個(gè)網(wǎng)站的設(shè)計(jì)更容易為用戶所接受，視覺語(yǔ)言在此發(fā)揮了作用。

　3.創(chuàng)建排版層級(jí)

與你的品牌選擇字體同樣重要的是如何正確使用它們。字體層次結(jié)構(gòu)為您與用戶交談奠定了基調(diào)，如耳語(yǔ)(小字體)或?qū)λ麄兇蠛?大字體)。

創(chuàng)建字體層級(jí)的訣竅在于，每一層都應(yīng)該與前一層和后一層有足夠的不同，這樣就很容易看到文本的變化。有一個(gè)獨(dú)特的字體層級(jí)規(guī)范，字體的大小和粗細(xì)都是標(biāo)準(zhǔn)化的。這種標(biāo)準(zhǔn)化還擴(kuò)展到配色方案和空間間距，以構(gòu)建完善的視覺語(yǔ)言。
 

   4. 創(chuàng)建組件庫(kù)

從按鈕、圖標(biāo)再到卡片，你應(yīng)當(dāng)創(chuàng)建出一整套可用的、風(fēng)格一致的UI組件庫(kù)。

同樣功能的控件，在頁(yè)面不同的地方、或者不同的頁(yè)面上有著截然不同的風(fēng)格，是讓人迷惑而糟心的。一個(gè)好的組件庫(kù)，應(yīng)當(dāng)包含全部常用的UI組件，以及針對(duì) iOS 和 Android 平臺(tái)所適配之后的UI組件。雖然構(gòu)建組件庫(kù)本身的工作量并不小，但是在完成之后，能讓后續(xù)的工作事半功倍。

　5.創(chuàng)建網(wǎng)格系統(tǒng)

　　元素的間距和位置與元素本身一樣重要。你的視覺形象是清晰而有條理的，還是有點(diǎn)混亂?創(chuàng)建網(wǎng)格系統(tǒng)能優(yōu)化視覺形象。網(wǎng)格化的版面結(jié)構(gòu)提供了與整個(gè)工程團(tuán)隊(duì)合作的可能性。從而快速生產(chǎn)出適合所有平臺(tái)的產(chǎn)品。如果您是從信息流的角度創(chuàng)建概念設(shè)計(jì)，那么創(chuàng)建網(wǎng)格系統(tǒng)的方法將更加有用。

    6. 建立柵格來規(guī)范內(nèi)容之間的空間關(guān)系

視覺元素之間的位置關(guān)系，和它們本身的設(shè)計(jì)是同等重要的。如果你希望整個(gè)設(shè)計(jì)在細(xì)節(jié)上是清晰明確的，那么柵格會(huì)給你想要的。

柵格賦予了UI界面元素以模塊化的清晰結(jié)構(gòu)，這使得整個(gè)設(shè)計(jì)團(tuán)隊(duì)能在此基礎(chǔ)上更好地合作。這使得產(chǎn)品能夠快速清晰地輸出到不同的平臺(tái)上。如果你是基于某個(gè)想法來構(gòu)建概念設(shè)計(jì)，那么這種方法更加實(shí)用有效。

簡(jiǎn)而言之，柵格讓視覺呈現(xiàn)的復(fù)雜度降低了。

    7. 強(qiáng)調(diào)圖片的風(fēng)格和特征

在諸多圖形化的元素當(dāng)中，圖片和插畫是視覺性最突出的元素，這也是整個(gè)視覺語(yǔ)言當(dāng)中最重要的因素之一，因?yàn)樗鼜哪撤N意義上是和品牌關(guān)系最緊密的素材。

構(gòu)成視覺語(yǔ)言涉及到圖片素材的方方面面，構(gòu)圖、色彩、濾鏡，甚至相關(guān)動(dòng)效的細(xì)節(jié)。

下面的網(wǎng)頁(yè)設(shè)計(jì)，即使它們并不是同期設(shè)計(jì)也不是服務(wù)于相同的功能，但是很明顯插畫所采用的視覺風(fēng)格是一致的，并且每幅插畫當(dāng)中都使用了共同的元素：熱氣球。

這一元素和品牌本身是有著緊密關(guān)聯(lián)的，而用戶也可以從這些插畫圖片的內(nèi)容，迅速意識(shí)到品牌本身的一些概念。

   8. 讓視覺和文本內(nèi)容匹配起來

視覺語(yǔ)言并不是只涉及到視覺元素，文本并不是與之割裂的，在設(shè)計(jì)的時(shí)候，兩者需要合理地配合，在體驗(yàn)上達(dá)成一致，傳達(dá)一致的信息。

在下面的這個(gè)網(wǎng)站當(dāng)中，整體設(shè)計(jì)呈現(xiàn)出非常明顯的女性化的特征，文本內(nèi)容在表達(dá)方式和調(diào)性上和整體的視覺語(yǔ)言保持著一致，并沒有出現(xiàn)兩者沖突或者競(jìng)爭(zhēng)的狀況。

    9. 落實(shí)到具體標(biāo)準(zhǔn)文檔當(dāng)中

整個(gè)視覺語(yǔ)言在構(gòu)建起來之后，需要保持各方面的一致性，在具體設(shè)計(jì)的時(shí)候，則得有一份詳實(shí)具體的設(shè)計(jì)文檔供整個(gè)設(shè)計(jì)團(tuán)隊(duì)和利益相關(guān)人員，作為參考。所以，完成整個(gè)設(shè)計(jì)之后，將整個(gè)視覺語(yǔ)言相關(guān)的內(nèi)容和素材制作成設(shè)計(jì)風(fēng)格指南，和整個(gè)品牌的設(shè)計(jì)規(guī)范統(tǒng)一到一起。

10. 為動(dòng)效設(shè)定規(guī)則

動(dòng)畫效果同樣是要遵循一些規(guī)則的。是快速移動(dòng)還是慢速移動(dòng)，是懸停觸發(fā)還是自動(dòng)運(yùn)行？

這些動(dòng)效的運(yùn)動(dòng)規(guī)則其實(shí)是有著明顯的視覺識(shí)別度的，就像日漫和美漫在視覺和運(yùn)動(dòng)規(guī)則上存在差別一樣。

就像下面的動(dòng)效，它大體上做著勻速的圓周運(yùn)動(dòng)，速度適中，其中有些元素并沒有完全按照?qǐng)A周運(yùn)動(dòng)。那么想想看，是否所有的做圓周運(yùn)動(dòng)的物體都和它一樣呢？它們是否會(huì)帶來不一樣的視覺觀感呢？