前言

隨著科技的發(fā)展，手機(jī)與人們生活的聯(lián)系日益密切。手機(jī)中的軟件系統(tǒng)是用戶直接操作的對(duì)象，它以精美的視覺(jué)效果和便捷的操作為用戶所青睞，進(jìn)而促進(jìn)了移動(dòng)UI設(shè)計(jì)行業(yè)的興盛。

本書(shū)主要講解在iOS和Android兩種操作系統(tǒng)中設(shè)計(jì)與制作App的UI設(shè)計(jì)相關(guān)知識(shí)，采用全流程設(shè)計(jì)的方式，由淺入深地講解初學(xué)者需要掌握的基礎(chǔ)知識(shí)和操作技巧，全面解析各種元素的具體繪制方法，并在知識(shí)點(diǎn)后銜接相關(guān)案例，使讀者能夠輕松理解知識(shí)點(diǎn)。

內(nèi)容安排

全書(shū)共8章，每章包含的主要內(nèi)容如下。

第1章 關(guān)于移動(dòng)UI設(shè)計(jì)，內(nèi)容包括了解移動(dòng)UI設(shè)計(jì)、移動(dòng)UI的系統(tǒng)分類、移動(dòng)UI設(shè)計(jì)流程、移動(dòng)UI設(shè)計(jì)原則和移動(dòng)UI設(shè)計(jì)流程的職位劃分等。

第2章 移動(dòng)UI策劃與原型設(shè)計(jì)，內(nèi)容包括確定移動(dòng)UI目標(biāo)用戶、完成移動(dòng)UI策劃書(shū)、了解思維導(dǎo)圖、繪制思維導(dǎo)圖的常用軟件、繪制移動(dòng)UI思維導(dǎo)圖、繪制移動(dòng)UI草圖、了解原型設(shè)計(jì)、繪制原型的常用軟件和繪制移動(dòng)UI原型圖等。

第3章 優(yōu)秀的移動(dòng)UI色彩搭配，內(nèi)容包括認(rèn)識(shí)色彩、了解色彩搭配方法與配色方法、構(gòu)建移動(dòng)UI顏色系統(tǒng)和移動(dòng)UI色彩搭配的注意事項(xiàng)等。通過(guò)對(duì)本章內(nèi)容的學(xué)習(xí)，讀者可以了解并掌握為移動(dòng)UI進(jìn)行配色設(shè)計(jì)的方法與技巧。

第4章 出色的移動(dòng)圖標(biāo)設(shè)計(jì)，內(nèi)容包括初識(shí)App圖標(biāo)、圖標(biāo)設(shè)計(jì)常用軟件、熟悉圖標(biāo)柵格系統(tǒng)、圖標(biāo)設(shè)計(jì)形式、App圖標(biāo)的分類、圖標(biāo)尺寸和圖標(biāo)組設(shè)計(jì)規(guī)范等。

第5章 移動(dòng)App的UI設(shè)計(jì)，內(nèi)容包括移動(dòng)UI的基本元素、常見(jiàn)的UI設(shè)計(jì)軟件、移動(dòng)UI的設(shè)計(jì)基礎(chǔ)、移動(dòng)UI的字體規(guī)范、移動(dòng)UI圖片尺寸規(guī)范和移動(dòng)App內(nèi)容布局等。通過(guò)對(duì)本章內(nèi)容的學(xué)習(xí)，讀者可以了解并掌握移動(dòng)UI設(shè)計(jì)的方法與技巧。

第6章 移動(dòng)App交互設(shè)計(jì)，內(nèi)容包括了解UI交互設(shè)計(jì)、常見(jiàn)的交互設(shè)計(jì)軟件、交互設(shè)計(jì)的基本流程、移動(dòng)UI交互的類型、動(dòng)效在UI中的作用和交互設(shè)計(jì)需要遵循的習(xí)慣等。通過(guò)對(duì)本章內(nèi)容的學(xué)習(xí)，讀者可以認(rèn)識(shí)并了解移動(dòng)App中的交互設(shè)計(jì)。

第7章 適配與輸出移動(dòng)UI設(shè)計(jì)，內(nèi)容包括標(biāo)注的重要性、常見(jiàn)的標(biāo)注軟件、標(biāo)注移動(dòng)UI、移動(dòng)UI標(biāo)注規(guī)范、輸出與適配iOS UI設(shè)計(jì)和輸出與適配Android系統(tǒng)UI設(shè)計(jì)等。通過(guò)對(duì)本章內(nèi)容的學(xué)習(xí)，讀者可以了解并掌握標(biāo)注和輸出不同操作系統(tǒng)的移動(dòng)UI的方法與技巧。

第8章 設(shè)計(jì)與制作移動(dòng)App項(xiàng)目，本章通過(guò)全流程的方式完成美妝電商App項(xiàng)目和美食外賣App項(xiàng)目的制作，使讀者充分體驗(yàn)全流程方式設(shè)計(jì)與制作移動(dòng)UI的樂(lè)趣和成就感。

本書(shū)根據(jù)讀者對(duì)知識(shí)理解的不同深度，以實(shí)際工作流程為講解過(guò)程，按照策劃、配色、設(shè)計(jì)、制作、標(biāo)注、切圖和適配的步驟進(jìn)行講解，真正做到為讀者考慮，讓不同層次的讀者都能有針對(duì)性地學(xué)習(xí)相關(guān)內(nèi)容，并有效幫助UI設(shè)計(jì)愛(ài)好者提高操作速度與工作效率。

本書(shū)知識(shí)結(jié)構(gòu)清晰，內(nèi)容有針對(duì)性，案例精美實(shí)用，適合大部分UI設(shè)計(jì)愛(ài)好者與各院校設(shè)計(jì)相關(guān)專業(yè)的學(xué)生閱讀。本書(shū)隨書(shū)附贈(zèng)書(shū)中所有案例的教學(xué)視頻、素材和源文件，用于補(bǔ)充書(shū)中部分細(xì)節(jié)內(nèi)容，方便讀者學(xué)習(xí)和參考。

本書(shū)特點(diǎn)

本書(shū)采用“知識(shí)點(diǎn)+案例”的教學(xué)方式，向讀者全面地介紹不同類型移動(dòng)UI設(shè)計(jì)的相關(guān)知識(shí)和所需的操作技巧。本書(shū)的主要特點(diǎn)如下。

● 語(yǔ)言通俗易懂

本書(shū)采用通俗易懂的語(yǔ)言向讀者全面介紹各種類型移動(dòng)App UI設(shè)計(jì)所需的基礎(chǔ)知識(shí)和操作技巧，讓讀者能夠理解并掌握相應(yīng)的功能與操作。

● 基礎(chǔ)知識(shí)與操作案例結(jié)合

本書(shū)摒棄了傳統(tǒng)教科書(shū)式的純理論式教學(xué)，采用“理論知識(shí)+操作步驟”的講解模式。

● 使用當(dāng)前新技術(shù)與軟件

本書(shū)案例使用的軟件與目前該行業(yè)使用的軟件一致，如使用制作軟件Adobe XD和Axure RP 10來(lái)完成移動(dòng)UI的原型展示、使用Illustrator CC和Photoshop CC完成移動(dòng)UI的圖標(biāo)制作、使用Photoshop CC和Adobe XD完成多個(gè)案例的UI設(shè)計(jì)和交互設(shè)計(jì)的制作，并使用PxCook完成標(biāo)注和切圖操作。

● 利用多媒體輔助學(xué)習(xí)

為了拓展讀者的學(xué)習(xí)方式和增強(qiáng)讀者的學(xué)習(xí)興趣，本書(shū)提供所有案例的相關(guān)素材、源文件和教學(xué)視頻，請(qǐng)讀者前往人郵教育社區(qū)下載（www.ryjiaoyu.com）。讀者可以參考本書(shū)案例實(shí)現(xiàn)相應(yīng)的效果，并將所學(xué)知識(shí)與技巧快速應(yīng)用于實(shí)際工作中。

本書(shū)適合UI設(shè)計(jì)愛(ài)好者、移動(dòng)UI設(shè)計(jì)和欲進(jìn)入U(xiǎn)I設(shè)計(jì)領(lǐng)域的讀者，以及設(shè)計(jì)相關(guān)專業(yè)院校的學(xué)生閱讀，同時(shí)本書(shū)對(duì)專業(yè)設(shè)計(jì)人員也有很高的參考價(jià)值。希望本書(shū)能夠幫助讀者早日成為優(yōu)秀的UI設(shè)計(jì)師。由于編寫(xiě)水平有限，書(shū)中疏漏之處在所難免，望廣大讀者批評(píng)指正。

編者

2021年9月