【前端GUI】——網站設計的重要知識點總結&思惟導圖（一）

前言：網頁美術設計具備四大特色，分別爲交互性、整合性、多維性以及動態性。完整的網頁設計既須要試聽元素，也須要版式設計，以求有效的傳達信息。在設計的時候，設計者要學會利用框架，也要學會打破框架。

---

1、優秀網頁設計的特徵

 

 

 

一、主題信息傳達明確

      單純、簡練、清晰和精確

• 符合視覺習慣和邏輯規律、文本條理化、樣式化處理
• 形式美法則，圖片色彩版式條理化（空間層次，主從關係，視覺秩序）

1. 整齊排列
2. 切割
3. 總體性和多邊性

二、網站內容與視覺形式統一

• 內容：功能主題文本、圖片、視頻
• 形式：版式風格、設計語言
• 形式美：對比與調和、對稱與平衡、節奏與韻腳、留白、美感
• 將內容元素歸類組合是顯示內容的一種方式

1. 結構統1、和諧、關係清晰、突出主次、對稱/對齊
2. 採用倒金字塔的形式：結論在開頭，具體分層次

三、鮮明的總體設計風格

• 以網頁的設計爲標準，能夠評測基於網站性質和功能的使用性、構建策略、構建方法等，並觀察其效果。

1. 細節要素：結構、板式佈局、形態、圖形、色彩、動態效果
2. 設計首創性、多樣性、實驗性：設計策略、網頁主題、網頁要素
3. 網頁的主要信息及功能的差別性

 

2、網頁設計中的佈局

 

 

一、連接方式

• 樹狀連接結構

1. 位置明確
2. 不易相互跳轉
3. 適合小型

• 星狀連接結構

1. 樞紐鏈接
2. 隨時跳轉
3. 例如：門戶網站

• 兩者結合爲宜

二、排版

• 信息分出主次

1. 首頁應具有的信息：頁頭、頁尾、Email地址、聯繫信息、版權信息

• 藉助工具

1. grid（網格類工具）
2. Frame（框架結構）- 分類
3. Layer層 - 佈局設計
4. Table表格定位 - 分辨率問題

• 字體

1. 通常最小12像素  微軟雅黑  特別狀況能夠到10像素
2. 16*16點陣的仿宋字體   一行排列不超過35個字
3. 行距合理  字體風格不要太多種（不超過3種）

 

3、網頁設計中的創意

 

 

一、首創性

• 懷疑因子
• 抵抗因子
• 自變因子

二、牽連性

• 縱向牽連
• 逆向牽連
• 橫向牽連

三、多向性

• 散發機制
• 換元機制
• 創優機制

四、躍進性

• 加大思惟推理活動的跨度

五、綜合性

• 雜交能力
• 統攝能力
• 辯證分析能力

 

4、網頁設計中的幾何圖形

 

 

一、點

• 無序/規律  →  造成線
• 定向排列 →  韻律感
• 分散定向排列的點 → 面
• 大小不一，沿着相對方向聚合 → 動態效果
• 大小相同位置整齊 → 均衡
• 發射狀 → 活潑輕鬆
• 網頁中任何單獨而細小的部件，文件/按鈕/圖形均可以視爲點，不單單限於圖形
• 注重情感：

1. 水平對稱並置  → 嚴謹和理性
2. 曲線散點 → 自由輕鬆浪漫

二、線

• 線的聯想——平穩、不穩定、條理、圓潤
• 線的種類：直線、折線、拋物線、自由曲線、複合線、垂直、水平、傾斜、幾何、自由線
• 線的疏密變化：

1. 等距等粗
2. 粗細不一樣，距離不一樣   →  空間感
3. 粗細相同，距離不一樣  →  縱深感
4. 密集排列 →  造成面

• 線的做用：

1. 串聯
2. 分割版面

• 文字也是線
• 活用斜線是一個活躍頁面，豐富版式的技能
• 注重情感：

1. 銳角 → 動盪 速度
2. 平行 → 規律 平穩
3. 垂直 → 莊嚴挺拔向上
4. 曲線 → 流暢柔美

三、面

• 注重情感：

1. 幾何面 → 規則、平穩、理性
2. 天然型 → 生動、厚實（例如水果、蔬菜、人，與矢量的單薄產生強烈的反差）
3. 偶然型 → 自由、活潑、哲理性（例如水、火、手撕狀，聯想；偶然型還能夠破邊）
4. 人造型 → 富含哲理（與幾何形造成反差）

 

---

 注：轉載請註明出處