在群里，會(huì)給大家看一些作品，有的我會(huì)指出一些問(wèn)題，有閑暇時(shí)間我也有去改，從中發(fā)現(xiàn)了很多問(wèn)題，其中排版上面的問(wèn)題很多，很多細(xì)節(jié)的地方不到位或許就是和大神的區(qū)別吧；今天的文章講到web設(shè)計(jì)和平面的關(guān)系以及網(wǎng)頁(yè)中幾個(gè)必要的構(gòu)成元素，如果你是剛?cè)朐O(shè)計(jì)的同學(xué)看了會(huì)對(duì)你有幫助，如果知道也不妨多看看

、

首先我們來(lái)看下什么是排版，排版，是指將文字、圖片、圖形等可視化信息元素在版面布局上調(diào)整位置、大小，是使版面布局條理化的過(guò)程（百度百科的，多精辟）排版幾乎應(yīng)用在所有的平面設(shè)計(jì)當(dāng)中，報(bào)刊、書(shū)籍雜志，同樣用在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，但由于網(wǎng)頁(yè)的特性，它會(huì)比平面排版更為復(fù)雜，更具挑戰(zhàn)性

雖然說(shuō)承載物在變,交互在變,技術(shù)也在變，但是基本的原則不會(huì)變，網(wǎng)頁(yè)排版依然要遵循平面構(gòu)成的基本原則——重復(fù)與交錯(cuò)、節(jié)奏與韻律、對(duì)稱(chēng)與均衡、對(duì)比與調(diào)和、比例與適度、變異與秩序、虛實(shí)與留白、變化與統(tǒng)一，在這些的基礎(chǔ)上，去深入理解頁(yè)面的功能和內(nèi)容，使之形式更好的體現(xiàn)主題思想，去考慮不同的分辨率、不同的設(shè)備環(huán)境下的呈現(xiàn)效果

網(wǎng)頁(yè)設(shè)計(jì)涉及到平面中的圖片、文字、色彩搭配，還有網(wǎng)頁(yè)所需要的導(dǎo)航菜單，表單，同時(shí)還有音頻、視頻、各種js樣式讓網(wǎng)頁(yè)更加生動(dòng)，交互更好，這么多的東西，怎么去排版？我老板說(shuō)了要高大上，logo要大，那么我們要做的就是將信息內(nèi)容有效的組織、排布，使其規(guī)范有序、清晰明確，同時(shí)還好用，讓老板讓用戶(hù)都爽，今天一起來(lái)看圖片、文字、顏色、表單四部分內(nèi)容

1. 圖片：

我做設(shè)計(jì)的時(shí)候把圖片分為兩種，一種是配圖，就是那種很cool，很nice，我很喜歡的圖，放在頁(yè)面中填充頁(yè)面的缺失，讓頁(yè)面更均衡，或者背景比較單調(diào)用圖片添加一些質(zhì)感和層次感，就是用來(lái)搭配頁(yè)面的，這樣的頁(yè)面很多，隨便一找就好了，第二種也是我覺(jué)的很重要的一種，我叫做關(guān)鍵圖，就像AE里面的關(guān)鍵幀一樣重要，我們找的圖要符合產(chǎn)品的氣質(zhì)，要用圖去解釋文字，要讓我們的圖片會(huì)說(shuō)話，要讓用戶(hù)第一眼知道這個(gè)網(wǎng)頁(yè)是做什么的，這樣的圖怎么去找呢

1. 提煉產(chǎn)品特性的關(guān)鍵詞，通過(guò)關(guān)鍵詞的形式尋找合適的圖片（這里的關(guān)鍵詞不是一個(gè)而是多個(gè)，中文不行可能英文就可以）

2. 圖片品牌化（找到的圖片進(jìn)行色調(diào)、色彩飽和度與特色風(fēng)格處理，使之在項(xiàng)目中運(yùn)用到的圖片都是一整套的、風(fēng)格統(tǒng)一的）

Flyby是一個(gè)藥品網(wǎng)站，它的藥品可以分解酒精誘導(dǎo)的毒素，并自然補(bǔ)充丟失的維生素，礦物質(zhì)和氨基酸的膠囊（我沒(méi)有在打廣告哈）不看文字，淡藍(lán)色的背景，一杯可能檸檬水吧可能，原諒我沒(méi)文化，還有綠色的樹(shù)葉，膠囊，很明顯了已經(jīng)，如果我們?nèi)プ鲞@樣的網(wǎng)站，提取的關(guān)鍵詞：健康、藥品、保護(hù)、health等等，用最能突出特點(diǎn)和有代表性的關(guān)鍵詞來(lái)尋找合適的圖片

Primary是賣(mài)女孩兒的網(wǎng)站，哇哈哈，一本正經(jīng)的胡說(shuō)，這是高級(jí)床上用品和床墊設(shè)計(jì)的網(wǎng)站，整個(gè)畫(huà)面很溫馨，很柔軟，根據(jù)項(xiàng)目可以提煉出：舒適、溫馨、柔軟等等，讓產(chǎn)品特點(diǎn)更加突出

2.文字

通過(guò)對(duì)字號(hào)、字體、字色、粗細(xì)、間距、行距等屬性來(lái)體現(xiàn)出內(nèi)容的層次結(jié)構(gòu)，同時(shí)，字體本身的視覺(jué)特性和品質(zhì)影響著信息傳遞的質(zhì)量，襯線體、無(wú)襯線體、手寫(xiě)體、幾何特征的英文字體，哥特體每種字型都散發(fā)獨(dú)特的情感或個(gè)性，搭配不同的視覺(jué)元素會(huì)給人不同的感受，增進(jìn)文字排版技巧的最佳方式之一，就是觀察其他設(shè)計(jì)師的作品是如何運(yùn)用文字排版，這需要不斷地練習(xí)并培養(yǎng)判斷的眼光。

3.顏色

每個(gè)人對(duì)顏色不同程度的理解，影響到設(shè)計(jì)頁(yè)面的表現(xiàn)，熟練地運(yùn)用色彩搭配，會(huì)讓設(shè)計(jì)作品事半功倍。一張優(yōu)秀的設(shè)計(jì)作品，色彩搭配一定和諧得體，令人賞心悅目，我這里就不過(guò)多的去講色相和色調(diào)和色彩構(gòu)成的知識(shí)了，但這是必須掌握和熟練應(yīng)用的

我常用的取色的方法有兩個(gè)，第一個(gè)就是基于品牌的顏色主導(dǎo)畫(huà)面，第二種是從圖中找到適合的顏色，圖片的像素過(guò)于密集，顏色很多，怎么做呢，復(fù)制圖片之后執(zhí)行濾鏡>像素化>馬賽克，之后去吸取顏色，做一些簡(jiǎn)單的調(diào)整，我這里做了一個(gè)簡(jiǎn)單的示范：

4.表單

精心的表單排版，能讓用戶(hù)感到心情舒暢，愉快地注冊(cè)、付款和進(jìn)行內(nèi)容創(chuàng)建和管理，首先把文案的結(jié)構(gòu)關(guān)系梳理好，如果內(nèi)容過(guò)多，可以借助思維導(dǎo)圖、XMind等工具做一些結(jié)構(gòu)圖，之后運(yùn)用文字層級(jí)關(guān)系，顏色把內(nèi)容分層級(jí)，必要的時(shí)候可以用icon或者圖案讓表單更豐富，視覺(jué)上更突出

總結(jié)：

老板說(shuō)的炫酷、高大上，我覺(jué)得是非設(shè)計(jì)出身的領(lǐng)導(dǎo)對(duì)設(shè)計(jì)師做的不完整不合理的頁(yè)面提出非專(zhuān)業(yè)的需求，因?yàn)樗X(jué)得不好又說(shuō)不上哪里不好，SO，就會(huì)提出一些類(lèi)似這樣的需求

Web設(shè)計(jì)中排版很重要。好的排版設(shè)計(jì)，不但要美觀，更多的是要將信息內(nèi)容有效的組織、排布，使其規(guī)范有序、清晰明確，便于用戶(hù)高效、準(zhǔn)確獲取相關(guān)信息，讓W(xué)eb設(shè)計(jì)更友好、易用、真實(shí)可信。