零基礎學網頁UI設計（簡體書）

現如今，各種通信與網絡連接設備和大眾生活的聯系日益密切。UI是用戶與機器設備進行交互的平臺，人們對各種類型UI的要求越來越高，從而推動了UI設計的飛速發展。為適應廣大UI設計者的需求，《零基礎學網頁UI設計/人人都是設計師》介紹如何設計既美觀又符合要求的UI。本書主要依據初學者學習UI設計的普遍規律安排內容，由淺入深地講解初學者需要掌握和感興趣的基礎知識與操作技巧，全面解析各個知識點。本書結合實例進行講解，詳細介紹了制作的步驟和軟件的應用技巧，使讀者能輕松地學習並掌握。本書從學習者的角度考慮，讓不同程度的讀者更有針對性地學習內容，有效幫助UI設計愛好者提高操作效率。《零基礎學網頁UI設計/人人都是設計師》的知識點結構清晰、內容針對性強、實例精美實用，適合大部分UI設計愛好者與設計專業的大中專學生閱讀。另外，隨書附贈教學PPT課件、所有案例的教學微視頻和素材，用於補充書中遺漏的細節內容，方便讀者學習和參考。讀者物件：本書適合UI設計專業、網頁設計專業和平面設計專業的相關在校學生，以及大部分網頁UI設計人員和網頁UI設計愛好者閱讀。本書配有教學PPT，需要的老師請登錄清華大學出版社官網，搜索到本書頁面即可下載。

前　言

隨著信息量不斷增加，人們的生活越來越離不開軟件，提到軟件就不得不說圖形用戶界面。圖形用戶界面是用戶與各種機器和設備進行交互的平臺，一款好的用戶界面設計應該同時具備美觀與易操作兩個特點。

零基礎學網頁UI設計主要采用理論知識與操作案例相結合的方法，介紹使用Photoshop CC 2019進行網頁UI設計所需的基礎知識和操作技巧。

內容安排

零基礎學網頁UI設計共分為5章，采用少量基礎知識與大量應用案例相結合的方法，循序漸進地介紹使用Photoshop CC 2019進行網頁UI設計的操作方法與技巧。各章的具體內容如下。

第1章　網頁UI設計初體驗：主要介紹UI設計相關的理論知識，包括了解網頁UI、網頁UI設計分類、網頁UI的構成元素、網頁UI制作流程、網頁UI的設計風格以及設計網頁常用軟件等內容。這些知識可以幫助讀者初步了解UI設計及相關軟件，為更深入的學習建立良好的開端。

第2章　網頁UI中的元素設計初體驗：主要介紹網頁UI中元素設計的知識和相應的制作技巧，包括網頁中的文字設計、網頁中的圖片設計、網頁中的圖標設計、網頁中的Logo設計和網頁中的導航設計等內容。希望通過本章的學習，讀者能掌握網頁UI的元素設計，這對以後的學習至關重要。

第3章　網頁布局與版式設計：主要介紹如何設計網頁中的布局與版式，包括了解網頁布局、常見的網頁布局方式、網頁布局形式的藝術表現、網頁留白設計的8個關鍵點、移動端網頁元素設計和移動端網頁的布局設計等內容。經過本章的學習，讀者應該熟悉網頁常用布局方式的設計要點。

第4章　配色設計在網頁中的作用：主要介紹一些網頁配色設計相關的基礎知識和操作技巧，包括理解色彩、網頁配色的基本要素、網頁的基礎配色方法、網頁中的文字配色設計、網頁元素的色彩搭配和網頁配色技巧等內容。

第5章　網頁中的廣告設計：主要介紹網頁界面中的廣告設計樣式和設計思路，包括網頁廣告概述、移動端網頁常見的廣告樣式、移動端網頁廣告的設計思路、PC端網頁廣告的常用樣式和PC端網頁廣告的特點等內容。本章的重點內容是網頁廣告的設計思路和特點。

零基礎學網頁UI設計特點

零基礎學網頁UI設計采用理論知識與操作案例相結合的方式，全面介紹網頁UI設計的設計規範和設計原則。

·通俗易懂的語言

零基礎學網頁UI設計采用通俗易懂的語言全面地介紹網頁UI設計所需的基礎知識和操作技巧，確保讀者能夠理解並掌握相應的功能與操作。

·基礎知識與實戰案例結合

零基礎學網頁UI設計擯棄了傳統教科書式的純理論教學，采用少量基礎知識和大量實戰案例相結合的講解模式。書中所使用的案例都具有很強的商業性和專業性，不僅能夠幫助讀者強化知識點，而且對開拓思路和激發創造性有很大的幫助。

·技巧和知識點的歸納總結

零基礎學網頁UI設計在基礎知識和實戰案例的講解過程中給出了大量的提示和技巧，這些信息都是根據作者長期的UI設計經驗與教學經驗歸納出來的，可以幫助讀者更準確地理解和掌握相關的知識點和操作技巧。

·二維碼微視頻和PPT課件等輔助學習

為了拓寬讀者的學習渠道，增強讀者的學習興趣，零基礎學網頁UI設計“練一練”欄目配有對應二維碼微視頻。讀者掃描下方二維碼可下載和使用零基礎學網頁UI設計實例相關素材、教學微視頻和PPT課件，使讀者能將學到的知識快速應用於實際工作中。同時，零基礎學網頁UI設計提供的教學PPT課件可方便老師輕松教學。

微視頻 素材 PPT課件

讀者物件

零基礎學網頁UI設計適合UI設計愛好者和想進入UI設計領域的讀者朋友，以及設計專業的大中專學生閱讀，同時對專業設計人員也有很高的參考價值。希望讀者通過對零基礎學網頁UI設計的學習，能夠早日成為優秀的UI設計師。

零基礎學網頁UI設計在寫作過程中力求嚴謹，但由於時間有限，疏漏之處在所難免，望廣大讀者批評指正。

編者

目錄

第1章　網頁UI設計初體驗 001

1.1?了解網頁UI 002

1.1.1?什麼是網站 002

1.1.2?什麼是網頁UI設計 002

1.2?網頁UI設計分類 003

1.2.1?按瀏覽終端不同進行劃分 003

1.2.2?按內容功能不同進行劃分 004

1.3?網頁UI的構成元素 008

1.3.1?網頁中的配色設計 008

1.3.2?網頁中的文字 009

1.3.3?網頁中的圖像 009

1.3.4?網頁中的富媒體 010

1.4?網頁UI制作流程 011

1.4.1?前期策劃 011

1.4.2?交互設計 012

1.4.3?視覺設計 013

1.4.4?開發測試 014

1.4.5?運營維護 015

1.5?網頁UI的設計風格 015

1.5.1?擬物化風格 015

1.5.2?扁平化風格 016

1.5.3?極簡化風格 017

1.5.4?3D風格 017

1.5.5?插畫風格 018

1.5.6?無邊框風格 019

1.5.7?縱向分割風格 019

1.5.8?超級版頭風格 020

1.6?設計網頁常用軟件 020

1.6.1?Photoshop CC 021

1.6.2?Axure RP 9 022

1.6.3?Adobe XD 023

1.6.4?Px Cook 024

1.7?舉一反三—分析運動服飾類網頁 025

1.8?本章小結 025

第2章　網頁UI中的元素設計初體驗 026

2.1?網頁中的文字設計 027

2.1.1?文字在網頁中的應用 027

2.1.2?網頁中文字的設計規範 030

2.2?網頁中的圖片設計 034

2.2.1?常用圖片格式 034

2.2.2?圖片模式 035

2.3?網頁中的圖標設計 036

2.3.1?認識網頁圖標 036

2.3.2?移動端圖標設計 038

2.3.3?網頁中的按鈕 043

2.4?網頁中的Logo設計 044

2.4.1?網頁Logo的表現形式 044

2.4.2?網頁Logo的設計規範 045

2.4.3?網頁Logo的設計特點 049

2.5?網頁中的導航設計 050

2.5.1?網頁導航概述 050

2.5.2?導航菜單在網頁中的位置布局 051

2.6?舉一反三—設計制作一款簡約Logo 059

2.7?本章小結 059

第3章　網頁布局與版式設計 060

3.1? 了解網頁布局 061

3.1.1?網頁布局的目的 061

3.1.2?網頁布局的操作順序 063

3.2?常見的網頁布局結構 063

3.2.1?“國”字型 063

3.2.2?拐角型 064

3.2.3?標題正文型 065

3.2.4?左右分割型 065

3.2.5?上下分割型 065

3.2.6?綜合型 067

3.2.7?封面型 068

3.3?網頁布局形式的藝術表現 069

3.3.1?分割構成 069

3.3.2?對稱構成 071

3.3.3?平衡構成 072

3.4?網頁留白設計的8個關鍵點 076

3.5?移動端網頁元素設計 078

3.5.1?界面尺寸 078

3.5.2?組件尺寸規範 079

3.5.3?移動端網頁的邊距設計 080

3.6?移動端網頁的布局設計 083

3.6.1?列表式布局 083

3.6.2?陳列館式布局 086

3.6.3?宮格式布局 090

3.6.4?卡片式布局 091

3.7?舉一反三—設計一款三欄式布局網頁 091

3.8?本章小結 092

第4章　配色設計在網頁中的作用 093

4.1?理解色彩 094

4.1.1?色彩屬性 094

4.1.2?顏色模式 095

4.1.3?Web安全顏色 098

4.1.4?十六進制顏色碼 098

4.2?網頁配色的基本要素 100

4.2.1?網頁主題色 100

4.2.2?網頁背景色 100

4.2.3?網頁輔助色 101

4.2.4?網頁強調色 101

4.3?網頁的基礎配色方法 104

4.3.1?單色 104

4.3.2?類似色 104

4.3.3?補色 104

4.3.4?鄰近補色 105

4.3.5?無彩色 105

4.4?網頁中的文字配色設計 106

4.4.1?背景與文字配色 106

4.4.2?鏈接文字 109

4.5?網頁元素的色彩搭配 110

4.5.1?網頁Logo和廣告配色 110

4.5.2?網頁導航配色 112

4.6?網頁配色技巧 113

4.6.1?突出主題的配色技巧 113

4.6.2?整體融和的配色技巧 117

4.6.3?整理出色的配色方案 119

4.7?舉一反三—一款居家生活網頁的配色設計 122

4.8?本章小結 122

第5章　網頁中的廣告設計 123

5.1?網頁廣告概述 124

5.1.1?網頁廣告概念 124

5.1.2?網頁廣告的特征 124

5.1.3?設計出色的網頁廣告樣式 125

5.2?移動端網頁常見的廣告樣式 126

5.2.1?Banner廣告 126

5.2.2?開屏廣告 130

5.2.3?信息流廣告 130

5.2.4?插屏廣告 131

5.2.5?視頻貼片廣告 135

5.3?移動端網頁廣告的設計思路 135

5.3.1?Banner廣告的設計思路 136

5.3.2?開屏廣告的設計思路 136

5.3.3?信息流廣告的設計思路 137

5.3.4?插屏廣告的設計思路 138

5.3.5?視頻貼片廣告的設計思路 139

5.4?PC端網頁廣告的常用樣式 139

5.4.1?文字廣告 139

5.4.2?Banner廣告 140

5.4.3?對聯式浮動廣告 143

5.4.4?網頁漂浮廣告 143

5.4.5?彈出廣告 143

5.5?PC端網頁廣告的特點 144

5.5.1?傳播範圍廣泛 145

5.5.2?富有創意、感官性強 145

5.5.3?直達產品核心消費群 145

5.5.4?節省成本 146

5.5.5?具有強烈的互動性 146

5.5.6?準確統計廣告效果 147

5.6?舉一反三—設計制作APP開屏廣告 150

5.7?本章小結 150