零基礎學網頁 UI 設計

胡雪梅

  • 零基礎學網頁 UI 設計-preview-1
  • 零基礎學網頁 UI 設計-preview-2
  • 零基礎學網頁 UI 設計-preview-3
零基礎學網頁 UI 設計-preview-1

買這商品的人也買了...

商品描述

現如今,各種通信與網絡連接設備和大眾生活的聯繫日益密切。
UI是用戶與機器設備進行交互的平台,人們對各種類型UI的要求越來越高,
從而推動了UI設計的飛速發展。
為適應廣大UI設計者的需求,《零基礎學網頁UI設計》介紹如何設計既美觀又符合要求的UI。
《零基礎學網頁UI設計》主要依據初學者學習UI設計的普遍規律安排內容,
由淺入深地講解初學者需要掌握和感興趣的基礎知識與操作技巧,全面解析各個知識點。
全書結合實例進行講解,詳細介紹了製作的步驟和軟件的應用技巧,使讀者能輕鬆地學習並掌握。
《零基礎學網頁UI設計》從學習者的角度考慮,讓不同程度的讀者更有針對性地學習內容,
有效幫助UI設計愛好者提高操作效率。
《零基礎學網頁UI設計》的知識點結構清晰、內容針對性強、
實例精美實用,適合大部分UI設計愛好者與設計專業的大中專學生閱讀。
另外,隨書附贈教學PPT課件、所有案例的教學微視頻和素材,
用於補充書中遺漏的細節內容,方便讀者學習和參考。
學者需要掌握和感興趣的基礎知識與操作技巧,全面解析各個知識點。
全書結合實例進行講解,詳細介紹了製作的步驟和軟件的應用技巧,使讀者能輕鬆地學習並掌握。
零基礎學網頁UI設計從學習者的角度考慮,讓不同程度的讀者更有針對性地學習內容,
有效幫助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.43D風格017
1.5.5插畫風格018
1.5.6無邊框風格019
1.5.7縱向分割風格019
1.5.8超級版頭風格020
1.6設計網頁常用軟件020
1.6.1Photoshop CC 021
1.6.2Axure RP 9 022
1.6.3Adobe XD 023
1.6.4Px 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.3Web安全顏色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.1Banner廣告126
5.2.2開屏廣告130
5.2.3信息流廣告130
5.2.4插屏廣告131
5.2.5視頻貼片廣告135
5.3移動端網頁廣告的設計思路135
5.3.1Banner廣告的設計思路136
5.3.2開屏廣告的設計思路136
5.3.3信息流廣告的設計思路137
5.3.4插屏廣告的設計思路138
5.3.5視頻貼片廣告的設計思路139
5.4PC端網頁廣告的常用樣式139
5.4.1文字廣告139
5.4.2Banner廣告140
5.4.3對聯式浮動廣告143
5.4.4網頁漂浮廣告143
5.4.5彈出廣告143
5.5PC端網頁廣告的特點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
收起全部↑