零基礎學網頁UI設計（人人都是設計師）

《零基礎學網頁UI設計（人人都是設計師）》是2020年清華大學出版社出版的圖書，作者是胡雪梅。

基本介紹

• 中文名：零基礎學網頁UI設計（人人都是設計師）
• 作者：胡雪梅
• 出版社：清華大學出版社
• ISBN：9787302551331

內容簡介

現如今，各種通信與網路連線設備和大眾生活的聯繫日益密切。UI是用戶與機器設備進行互動的平台，人們對各種類型UI的要求越來越高，從而推動了UI設計的飛速發展。

　　為適應廣大UI設計者的需求，《零基礎學網頁UI設計/人人都是設計師》介紹如何設計既美觀又符合要求的UI。

　　本書主要依據初學者學習UI設計的普遍規律安排內容，由淺入深地講解初學者需要掌握和感興趣的基礎知識與操作技巧，全面解析各個知識點。

　　本書結合實例進行講解，詳細介紹了製作的步驟和軟體的套用技巧，使讀者能輕鬆地學習並掌握。

　　本書從學習者的角度考慮，讓不同程度的讀者更有針對性地學習內容，有效幫助UI設計愛好者提高操作效率。

　　《零基礎學網頁UI設計/人人都是設計師》的知識點結構清晰、內容針對性強、實例精美實用，適合大部分UI設計愛好者與設計專業的大中專學生閱讀。另外，隨書附贈教學PPT課件、所有案例的教學微視頻和素材，用於補充書中遺漏的細節內容，方便讀者學習和參考。

　　讀者對象：

　　本書適合UI設計專業、網頁設計專業和平面設計專業的相關在校學生，以及大部分網頁UI設計人員和網頁UI設計愛好者閱讀。

　　本書配有教學PPT，需要的老師請登錄清華大學出版社官網，搜尋到本書頁面即可下載。

圖書目錄

目錄

第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