在群里，會給大家看一些作品，有的我會指出一些問題，有閑暇時間我也有去改；
從中發現了很多問題，其中排版上面的問題很多，很多細節的地方不到位或許就是和大神的區別吧；
今天的文章講到web設計和平面的關系以及網頁中幾個必要的構成元素，如果你是剛入設計的同學看了會對你有幫助，如果知道也不妨多看看
首先我們來看下什么是排版，排版，是指將文字、圖片、圖形等可視化信息元素在版面布局上調整位置、大小，是使版面布局條理化的過程（百度百科的，多精辟）排版幾乎應用在所有的平面設計當中，報刊、書籍雜志，同樣用在網頁設計當中，但由于網頁的特性，它會比平面排版更為復雜，更具挑戰性
交互性(可操作、即時響應、狀態變化，要求不但美觀更要易用)
呈現媒介（PC、手機、平板、電視、投影等，需要考慮呈現尺寸及色彩）
技術性（HTML和CSS的不斷升級，對Web排版的支持更加優秀和高效）
多媒體（文字、圖片、視頻）?
雖然說承載物在變,交互在變,技術也在變，但是基本的原則不會變，網頁排版依然要遵循平面構成的基本原則——重復與交錯、節奏與韻律、對稱與均衡、對比與調和、比例與適度、變異與秩序、虛實與留白、變化與統一，在這些的基礎上，去深入理解頁面的功能和內容，使之形式更好的體現主題思想，去考慮不同的分辨率、不同的設備環境下的呈現效果
網頁設計涉及到平面中的圖片、文字、色彩搭配，還有網頁所需要的導航菜單，表單，同時還有音頻、視頻、各種js樣式讓網頁更加生動，交互更好，這么多的東西，怎么去排版？我老板說了要高大上，logo要大，那么我們要做的就是將信息內容有效的組織、排布，使其規范有序、清晰明確，同時還好用，讓老板讓用戶都爽，今天一起來看圖片、文字、顏色、表單四部分內容
1. 圖片：
我做設計的時候把圖片分為兩種，一種是配圖，就是那種很cool怎么讓web頁面風格統一，很nice，我很喜歡的圖，放在頁面中填充頁面的缺失，讓頁面更均衡，或者背景比較單調用圖片添加一些質感和層次感，就是用來搭配頁面的，這樣的頁面很多，隨便一找就好了，第二種也是我覺的很重要的一種怎么讓web頁面風格統一，我叫做關鍵圖，就像AE里面的關鍵幀一樣重要，我們找的圖要符合產品的氣質，要用圖去解釋文字，要讓我們的圖片會說話，要讓用戶第一眼知道這個網頁是做什么的，這樣的圖怎么去找呢
1. 提煉產品特性的關鍵詞，通過關鍵詞的形式尋找合適的圖片（這里的關鍵詞不是一個而是多個，中文不行可能英文就可以）
2. 圖片品牌化（找到的圖片進行色調、色彩飽和度與特色風格處理，使之在項目中運用到的圖片都是一整套的、風格統一的）
Flyby是一個藥品網站，它的藥品可以分解酒精誘導的毒素，并自然補充丟失的維生素，礦物質和氨基酸的膠囊（我沒有在打廣告哈）不看文字，淡藍色的背景，一杯可能檸檬水吧可能，原諒我沒文化，還有綠色的樹葉，膠囊，很明顯了已經，如果我們去做這樣的網站，提取的關鍵詞：健康、藥品、保護、等等，用最能突出特點和有代表性的關鍵詞來尋找合適的圖片
是賣女孩兒的網站，哇哈哈，一本正經的胡說，這是高級床上用品和床墊設計的網站，整個畫面很溫馨，很柔軟，根據項目可以提煉出：舒適、溫馨、柔軟等等，讓產品特點更加突出
2.文字
通過對字號、字體、字色、粗細、間距、行距等屬性來體現出內容的層次結構，同時，字體本身的視覺特性和品質影響著信息傳遞的質量，襯線體、無襯線體、手寫體、幾何特征的英文字體，哥特體每種字型都散發獨特的情感或個性，搭配不同的視覺元素會給人不同的感受，增進文字排版技巧的最佳方式之一，就是觀察其他設計師的作品是如何運用文字排版，這需要不斷地練習并培養判斷的眼光。
3.顏色
每個人對顏色不同程度的理解，影響到設計頁面的表現，熟練地運用色彩搭配，會讓設計作品事半功倍。一張優秀的設計作品，色彩搭配一定和諧得體，令人賞心悅目，我這里就不過多的去講色相和色調和色彩構成的知識了，但這是必須掌握和熟練應用的
我常用的取色的方法有兩個，第一個就是基于品牌的顏色主導畫面，第二種是從圖中找到適合的顏色，圖片的像素過于密集，顏色很多，怎么做呢，復制圖片之后執行濾鏡>像素化>馬賽克，之后去吸取顏色，做一些簡單的調整，我這里做了一個示范：
4.表單
精心的表單排版，能讓用戶感到心情舒暢，愉快地注冊、付款和進行內容創建和管理，首先把文案的結構關系梳理好，如果內容過多，可以借助思維導圖、XMind等工具做一些結構圖，之后運用文字層級關系，顏色把內容分層級，必要的時候可以用icon或者圖案讓表單更豐富，視覺上更突出
總結：
老板說的炫酷、高大上，我覺得是非設計出身的領導對設計師做的不完整不合理的頁面提出非專業的需求，因為他覺得不好又說不上哪里不好，SO，就會提出一些類似這樣的需求
Web設計中排版很重要。好的排版設計，不但要美觀，更多的是要將信息內容有效的組織、排布，使其規范有序、清晰明確，便于用戶高效、準確獲取相關信息，讓Web設計更友好、易用、真實可信。
以上內容基于本人工作中的思考以及看到學到的東西，部分圖片來源自網絡，如有侵權，告知刪除