本節書摘來異步社群《網站設計 開發 維護 推廣 從入門到精通》一書中的第1章，第1.3節，作者：何新起 ,婁彥傑，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
網頁設計要講究編排和布局，雖然網頁設計不同于平面設計，但它們有許多相近之處，應加以利用和借鑒。為了達到最佳的視覺表現效果，應講究整體布局的合理性，使浏覽者有一個流暢的視覺體驗。
網頁在設計上與平面設計有許多共同之處，如報紙等，是以也要遵循一些設計的基本原則。熟悉一些設計原則，再對網頁的特殊性作一些考慮，便不難設計出美觀大方的頁面來。網頁頁面設計有以下基本原則，熟悉這些原則将對頁面的設計有所幫助。
1．主次分明，中心突出
在一個頁面上，必須考慮視覺的中心，這個中心一般在螢幕的中央或者在中間偏上的部位。是以，重要的文章和圖像一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的内容，這樣在頁面上就突出了重點，做到了主次有别。
2．大小搭配，互相呼應
較長的文章或标題，不要編輯在一起，要有一定的距離；同樣，較短的文章，也不能編排在一起。對待圖像的安排也是這樣，要互相錯開，使大小圖像之間有一定的間隔，這樣可以使頁面錯落有緻，避免重心的偏離。
3．圖文并茂，相得益彰
文字和圖像具有一種互相補充的視覺關系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖像太多，缺少文字，必然會減少頁面的資訊容量。是以，最理想的效果是文字與圖像的密切配合，互為襯托，既能活躍頁面，又使頁面中有豐富的内容。
4．簡潔一緻
保持簡潔的常用做法是使用醒目的标題，這個标題常常采用圖形表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字型和顔色的數目。一般每頁使用的字型不超過三種，一個頁面中使用的顔色隻需兩三種。
要保持一緻性，可以從頁面的排版下手：各個頁面使用相同的頁邊距、文本；圖形之間保持相同的間距；主要圖形、标題或符号旁邊留下相同的空白。
5．網頁布局時的一些元素
格式美觀的正文、和諧的色彩搭配、較好的對比度、具有較強可讀性的文字、生動的背景圖案、大小适中的頁面元素、布局勻稱、不同元素之間有足夠空白、各元素之間保持平衡、文字準确無誤、無錯别字、無拼寫錯誤。
6．文本和背景的色彩
考慮到大多數人使用256色顯示模式，是以一個頁面顯示的顔色不宜過多。主題顔色通常隻需要兩三種，并采用一種标準色。
1.3.2 點、線、面的構成
在網頁的視覺構成中，點、線和面既是最基本的造型元素，又是最重要的表現手段。在布局網頁時，點、線、面是需要最先考慮的因素。隻有合理安排好點、線、面的互相關系，才能設計出具有最佳視覺效果的頁面，充分表達出網頁的最終目的。網頁設計實際上就是處理好三者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。
1．點的視覺構成
在網頁中，一個單獨而細小的形象可以稱之為點，如一個漢字可以稱為一個點。點也可以是一個網頁中相對微小單純的視覺形象，如按鈕、logo等。圖1-6所示為點的視覺構成。
點是構成網頁的最基本機關，起到讓頁面活潑生動的作用。使用得當，甚至可以起到畫龍點睛的作用。
一個網頁往往需要由數量不等、形狀各異的點來構成。點的形狀、方向、大小、位置、聚集、發散，能夠給人帶來不同的心理感受。
2．線的視覺構成
點的延伸形成線，線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、品質和情緒。線是分割頁面的主要元素之一，是決定頁面形象的基本要素。線分為直線和曲線兩種。線的總體形狀有垂直、水準、傾斜、幾何曲線、自由線這幾種。
線是具有情感的。如水準線給人開闊、安甯、平靜的感覺；斜線具有生動、不安、速度和現代感；垂直線具有莊嚴、挺拔、力量和向上的感覺；曲線給人柔軟流暢的女性特征；自由曲線是最好的情感抒發手段。将不同的線運用到頁面設計中，會獲得不同的效果。
水準線的重複排列形成一種強烈的形式感和視覺沖擊力，能夠讓人第一眼就産生興趣，達到了吸引通路者注意力的目的。
自由曲線的運用，打破了水準線的莊嚴和單調，給網頁增加了豐富、流暢、活潑的氣氛。水準線和自由曲線的組合運用，形成新穎的形式和不同情感的對比，進而将視覺中心有力地襯托出來。圖1-7所示為使用線條布局的網頁。
3．面的視覺構成
面是點和線的組合，具有一定的面積和品質，占據的空間更多，因而相比點和線來說視覺沖擊力更大、更強烈。
面的形狀可以大概分為以下幾種。
幾何型的面：方形、圓形、三角形、多邊型的面在頁面中經常出現。圖1-8所示為使用圓角矩形的網頁。
有機切面：可以用弧形相交或者相切得到。
不規則形的面和意外因素形成的随意形面。
面具有自己鮮明的個性和情感特征，隻有合理地安排好面的關系，才能設計出充滿美感、藝術而實用的網頁。