內(nèi)容簡介

《APP UI設(shè)計之道》是全面學(xué)習(xí)APP UI設(shè)計和Photoshop使用方法與技巧的快速入門與提高教程， 內(nèi)容包括Photoshop系統(tǒng)的使用基礎(chǔ)、APP UI設(shè)計基礎(chǔ)、APP中的光影設(shè)計、APP中的字體設(shè)計、簡約Icon設(shè)計、三維Icon設(shè)計、多種圖形設(shè)計、控件設(shè)計、界面設(shè)計、導(dǎo)航設(shè)計等。

在內(nèi)容安排上，為了使讀者更快地掌握軟件的基本功能，書中結(jié)合大量的UI實例講解Photoshop 軟件中一些抽象的概念、命令和功能。在寫作方式上，《APP UI設(shè)計之道》緊貼軟件的實際操作界面，使用軟件中真實的對話框、操控板和按鈕等進(jìn)行講解，使初學(xué)者能夠直觀、準(zhǔn)確地操作軟件進(jìn)行學(xué)習(xí)，從而盡快上手，提高學(xué)習(xí)效率。

《APP UI設(shè)計之道》內(nèi)容全面，條理清晰，實例豐富，講解詳細(xì)，適合UI設(shè)計愛好者閱讀，也可供想進(jìn)入UI設(shè)計領(lǐng)域的讀者朋友，以及設(shè)計專業(yè)的大中專學(xué)生閱讀。

 

前言

我國互聯(lián)網(wǎng)行業(yè)目前已經(jīng)進(jìn)入高速發(fā)展階段，各行各業(yè)都在進(jìn)軍互聯(lián)網(wǎng)行業(yè)，互聯(lián)網(wǎng)產(chǎn)業(yè)的規(guī)模在不斷擴(kuò)大，用戶體驗越來越受到重視。隨著技術(shù)領(lǐng)域的發(fā)展，產(chǎn)品的人性化意識日趨增強(qiáng)，UI 設(shè)計師也成了這兩年的緊俏職業(yè)。

現(xiàn)在手機(jī)屏幕越來越大，各種智能設(shè)備的發(fā)展，對軟件界面設(shè)計的要求也越來越高。APP 界面設(shè)計已不僅滿足于追求時髦的人的手機(jī)炫酷，已經(jīng)成為企業(yè)形象宣傳的一把利器。鑒于此，APP 應(yīng)用公司越來越重視界面設(shè)計的個性化、時尚化與服務(wù)化。

用戶對APP 界面設(shè)計的要求是不斷變化的，近幾年的發(fā)展趨勢主要是要求簡潔和易用，扁平化已成為最火的發(fā)展趨勢。簡潔設(shè)計旨在通過清晰的視覺交流來解決用戶的問題，而簡單的用戶界面結(jié)合強(qiáng)大的可用性，會令用戶印象深刻。一個簡單易用的應(yīng)用也能更容易地傳播和推廣。

本書匯集作者在手機(jī)APP 界面設(shè)計方面的豐富經(jīng)驗，詳細(xì)講解APP 手機(jī)界面設(shè)計知識，從寫實到新潮，從質(zhì)感到流行，從圖標(biāo)到整體商業(yè)案例系統(tǒng)，手把手教您學(xué)會APP 界面的創(chuàng)意設(shè)計。

通過閱讀本書，讀者可以快速了解以下內(nèi)容：

快速認(rèn)識并了解UI 設(shè)計。

快速掌握圖標(biāo)制作基礎(chǔ)。

學(xué)會制作寫實APP 圖標(biāo)。

快速掌握iOS新潮扁平風(fēng)的設(shè)計技法。

學(xué)會質(zhì)感APP 的表現(xiàn)手法。

熟練掌握個性化字體設(shè)計的方法。

掌握真正的手機(jī)APP 界面商業(yè)案例設(shè)計的技巧。

本書采用最新版本軟件Photoshop CC 2017 來制作和講解，Photoshop 作為目前非常流行的一款設(shè)計軟件，憑借其強(qiáng)大的功能和易學(xué)易用的特性，深受廣大設(shè)計師的喜愛。同時，本書并不局限于具體的軟件版本，而同樣適合于CS、CS2、CS3、CS4、CS5、CS6 版本，所以讀者完全不用擔(dān)心會被軟件版本所困擾。

本書內(nèi)容全面、結(jié)構(gòu)清晰、實例新穎，采用理論知識與操作案例相結(jié)合的教學(xué)方式，全面地向用戶介紹了手機(jī)APP UI 界面設(shè)計所需的基礎(chǔ)知識和操作技巧，綜合實用性較強(qiáng)，可確保用戶能夠理解并掌握相應(yīng)的功能與操作。讀者可登錄http://www.tup.com.cn 下載本書案例素材文件。

本書主要由華北理工大學(xué)的甘霖、李雪老師編寫，其中第1、2、3、4、7、8、11 章由甘霖老師編寫，第5、6、9、10 章由李雪老師編寫。楊宇璇、張婷、封素潔、代小華、封超等也參與了本書的編寫。由于作者水平所限，本書錯誤在所難免，敬請廣大讀者批評指正。

編 者

 

 

目 錄

第1 章 Photoshop 系統(tǒng)的使用基礎(chǔ)             1

1.1 Photoshop 的安裝、卸載、啟動和退出          2

1.1.1 安裝Photoshop      2

1.1.2 卸載Photoshop      2

1.1.3 啟動Photoshop      2

1.1.4 退出Photoshop      3

1.2 圖形圖像文件的基本操作    4

1.3 Photoshop 系統(tǒng)界面調(diào)整   8

1.3.1 界面組成部分      9

1.3.2 調(diào)整界面        14

第2 章 APP UI 設(shè)計基礎(chǔ)      15

2.1　APP UI 設(shè)計概述       16

2.1.1 UI 設(shè)計概述       16

2.1.2 APP 概述         16

2.1.3 Photoshop 軟件      17

2.1.4 APP UI 設(shè)計必備技術(shù)    18

2.2　APP UI 界面設(shè)計團(tuán)隊與流程            20

2.2.1　APP 界面設(shè)計者與產(chǎn)品團(tuán)隊          20

2.2.2　APP 界面設(shè)計與項目流程          21

2.2.3　視覺設(shè)計        22

2.3　APP UI 界面設(shè)計理論     23

2.3.1　用戶操作習(xí)慣      23

2.3.2　界面布局        23

2.3.3　操作簡單        28

2.3.4　在操作方式上創(chuàng)新    29

2.3.5　在設(shè)計中投入情感    29

2.3.6　APP UI 的配色理論    29

2.4　APP UI 界面設(shè)計技巧     33

2.4.1 完整的APP UI 設(shè)計流程          34

2.4.2 圖標(biāo)設(shè)計的流程     37

2.4.3 讓圖標(biāo)更具吸引力    37

第3 章 APP 中的光影設(shè)計     39

3.1　玻璃質(zhì)感圖標(biāo)設(shè)計       40

3.1.1 設(shè)計構(gòu)思        40

3.1.2 操作步驟        40

3.2　牛仔褲質(zhì)感設(shè)計        49

3.2.1 設(shè)計構(gòu)思        49

3.2.2 操作步驟        49

3.3 木紋質(zhì)感設(shè)計         64

3.3.1 設(shè)計構(gòu)思        64

3.3.2 操作步驟        64

3.4　絢麗光線界面設(shè)計       94

3.4.1 設(shè)計構(gòu)思        94

3.4.2 操作步驟        94

3.5　UI 設(shè)計師必備技能：顏色搭配            102

3.5.1　簡約配色設(shè)計     102

3.5.2　混合特效設(shè)計     103

3.5.3　具體案例       104

第4 章 APP 中的字體設(shè)計    105

4.1　斜面浮雕字體設(shè)計      106

4.1.1 設(shè)計構(gòu)思       106

4.1.2 操作步驟       106

4.2　鉆石字體設(shè)計        112

4.2.1 設(shè)計構(gòu)思       112

4.2.2 操作步驟       113

4.3　立體巖石材質(zhì)字體設(shè)計    118

4.3.1 設(shè)計構(gòu)思       118

4.3.2 操作步驟       118

4.4　 UI 設(shè)計師必備技能：文字設(shè)計           126

4.4.1　字號設(shè)計       126

4.4.2　UI 文字設(shè)計標(biāo)準(zhǔn)    127

第5 章 APP 中的簡約Icon設(shè)計            129

5.1　聯(lián)系人圖標(biāo)設(shè)計       130

5.1.1 設(shè)計構(gòu)思       130

5.1.2 操作步驟       130

5.2　搜索圖標(biāo)設(shè)計        132

5.2.1 設(shè)計構(gòu)思       132

5.2.2 操作步驟       133

5.3　照相機(jī)圖標(biāo)設(shè)計       135

5.3.1 設(shè)計構(gòu)思       135

5.3.2 操作步驟       135

5.4　鬧鐘圖標(biāo)設(shè)計        140

5.4.1 設(shè)計構(gòu)思       140

5.4.2 操作步驟       140

5.5　簡約平面圖標(biāo)整套設(shè)計    150

5.5.1 設(shè)計構(gòu)思       150

5.5.2 操作步驟       151

5.6　設(shè)計師必備技能：圖標(biāo)大小選擇            163

第6 章 APP 中的三維Icon設(shè)計            165

6.1　音樂圖標(biāo)設(shè)計        166

6.1.1 設(shè)計構(gòu)思       166

6.1.2 操作步驟       166

6.2　錄音器圖標(biāo)設(shè)計       172

6.2.1 設(shè)計構(gòu)思       172

6.2.2 操作步驟       173

6.3　電話簿圖標(biāo)設(shè)計       177

6.3.1 設(shè)計構(gòu)思       177

6.3.2 操作步驟       177

6.4　立體勾選框圖標(biāo)設(shè)計     182

6.4.1 設(shè)計構(gòu)思       182

6.4.2 操作步驟       182

6.5　實體手機(jī)設(shè)計        188

6.5.1 設(shè)計構(gòu)思       188

6.5.2 操作步驟       188

6.6 UI 設(shè)計師必備技能：圖標(biāo)的設(shè)計            202

6.6.1 表現(xiàn)形態(tài)       202

6.6.2 圖標(biāo)特性       203

6.6.3 圖標(biāo)設(shè)計的構(gòu)思    204

第7 章 APP 中的多種圖形設(shè)計  205

7.1　二維碼掃描圖形設(shè)計     206

7.1.1 設(shè)計構(gòu)思       206

7.1.2 操作步驟       206

7.2　徽標(biāo)圖形設(shè)計        210

7.2.1 設(shè)計構(gòu)思       210

7.2.2 操作步驟       210

7.3　個性條形碼設(shè)計       218

7.3.1 設(shè)計構(gòu)思       218

7.3.2 操作步驟       218

7.4　夏日海景宣傳海報設(shè)計    222

7.4.1 設(shè)計構(gòu)思       222

7.4.2 操作步驟       222

7.5 UI 設(shè)計師必備技能：構(gòu)圖技巧            231

7.5.1 粗細(xì)對比       231

7.5.2 遠(yuǎn)近對比       231

7.5.3 疏密對比       231

7.5.4 動靜對比       231

7.5.5 中西對比       232

7.5.6 古今對比       232

第8 章 APP 中的控件設(shè)計    233

8.1 立體旋鈕設(shè)計        234

8.1.1 設(shè)計構(gòu)思       234

8.1.2 操作步驟       234

8.2　開關(guān)按鈕設(shè)計        243

8.2.1 設(shè)計構(gòu)思       243

8.2.2 操作步驟       243

8.3　金屬質(zhì)感旋鈕設(shè)計      250

8.3.1 設(shè)計構(gòu)思       251

8.3.2 操作步驟       251

8.4 進(jìn)度按鈕設(shè)計        260

8.4.1 設(shè)計構(gòu)思       260

8.4.2 操作步驟        260

8.5 透明界面按鈕設(shè)計      266

8.5.1 設(shè)計構(gòu)思       266

8.5.2 操作步驟       266

8.6 滑動控件設(shè)計        287

8.6.1 設(shè)計構(gòu)思       287

8.6.2 操作步驟       287

8.7　UI 設(shè)計師必讀：如何設(shè)計按鈕            292

8.7.1　關(guān)聯(lián)分組       292

8.7.2　層級關(guān)系       292

8.7.3　善用陰影       292

8.7.4　圓角邊界       293

8.7.5　強(qiáng)調(diào)重點(diǎn)       293

8.7.6　按鈕尺寸       293

8.7.7　表述必須明確     294

第9 章 APP 中的界面設(shè)計    295

9.1　Loading 游戲加載界面設(shè)計            296

9.1.1 設(shè)計構(gòu)思       296

9.1.2 操作步驟       296

9.2　日歷和撥號界面設(shè)計     304

9.2.1 設(shè)計構(gòu)思       304

9.2.2 操作步驟       304

9.3　清新主題的對話框設(shè)計    326

9.3.1 設(shè)計構(gòu)思       327

9.3.2 操作步驟       327

9.4　個性化報錯界面設(shè)計     333

9.4.1 設(shè)計構(gòu)思       333

9.4.2 操作步驟       334

9.5 UI 設(shè)計師必備技能：界面設(shè)計            343

9.5.1 清晰地展現(xiàn)信息層級  343

9.5.2 采用一致的設(shè)計語言  344

9.5.3 在細(xì)節(jié)上給予驚喜   344

第10 章 APP 中的導(dǎo)航設(shè)計   345

10.1　導(dǎo)航欄設(shè)計        346

10.1.1 設(shè)計構(gòu)思       346

10.1.2 操作步驟       346

10.2　透明列表界面設(shè)計     349

10.2.1 設(shè)計構(gòu)思       350

10.2.2 操作步驟       350

10.3　設(shè)置界面設(shè)計       359

10.3.1 設(shè)計構(gòu)思       360

10.3.2 操作步驟       360

10.4　扁平化手機(jī)界面的設(shè)計   365

10.4.1 設(shè)計構(gòu)思       366

10.4.2 操作步驟       366

10.5 UI 設(shè)計師必備技能：UI 設(shè)計原則           373

10.5.1 可視性        373

10.5.2 反饋         374

10.5.3 限制         374

10.5.4 映射         374

10.5.5 一致性        374

10.5.6 啟發(fā)性        374

第11 章 APP 綜合案例設(shè)計   375

11.1　引導(dǎo)界面設(shè)計       376

11.1.1 設(shè)計構(gòu)思       376

11.1.2 操作步驟       376

11.2　登錄/ 注冊界面的設(shè)計   381

11.2.1 設(shè)計構(gòu)思       381

11.2.2 操作步驟       381

11.3　扁平化選擇列表設(shè)計    385

11.3.1 設(shè)計構(gòu)思       385

11.3.2 操作步驟       385

11.4　歡迎界面的設(shè)計      389

11.4.1 設(shè)計構(gòu)思       389

11.4.2 操作步驟       389