前言

隨著移動網絡的發展，越來越多的人開始使用手機和平板電腦瀏覽互聯網。作為網頁設計師，需要快速準確地完成網站、網頁的UI設計。而Photoshop等專業軟件在制作移動端網站頁面時，稍顯煩瑣。此時，Sketch的出現大大增強了移動端網頁設計的便捷程度。

Sketch作為一個為UI(User Interface)設計而生的工具，全矢量、輕量級、像素級精準，非常適合做移動端的UI設計和簡單的扁平圖標設計。Sketch界面簡潔，功能清晰，沒有懸浮面板。Sketch界面的畫布可無限延伸，不受圖形尺寸限制。讀者可以通過直接拖曳的方式，快速完成網站界面的UI設計與制作。Sketch自帶的大量模板，可以讓讀者將工作重點放在設計上，而不用考慮不同的系統規范。Sketch提供了便捷的導出方式，可以讓讀者任意導入符合要求的UI素材。

本書將以案例實戰的方式，讓讀者快速掌握UI設計要求和Sketch的基本操作。本書也對Xcode交互動畫制作進行了講解，幫助讀者了解UI交互的制作方法和技巧。

來，跟隨本書一起開啟這趟美妙的移動UI與交互設計之旅吧！

本書的結構與內容

本書采用商業案例帶動基礎知識的形式，由淺入深地講解了Sketch各方面的知識點和應用技巧。全書共分為8章，采用逐級滲透的講解方法，全面地向讀者講解Sketch在PC端和移動端網站UI設計中的應用。

第1章　網頁UI設計入門。主要講解了UI設計的發展史、網頁UI設計制作的流程、UI設計的注意事項和配色對于UI設計的影響等內容。

第2章　初識Sketch。主要講解了Sketch的安裝與啟動、了解Sketch界面、設置Sketch的快捷鍵、新建和保存Sketch文件、使用Sketch畫板和使用Sketch模板等內容。

第3章　繪制線框原型。主要講解了線框原型的基本概念、繪制線框原型的注意事項、圖層面板的使用、圖層類型、圖層調整以及繪制計步App線框圖等內容。

第4章　使用Sketch繪制圖標。主要講解了矢量工具的使用、路徑的使用、使用“形狀”繪制圖標、使用“蒙板”繪制圖標、添加陰影效果為圖標添加質感、Android圖標設計準則、圖標設計的三大原則以及極簡化設計等內容。

第5章　Android UI設計。主要講解了組件的編輯及使用、應用Sketch UI設計、移動App UI設計、Android系統UI設計、“文本”命令、“文本”檢查器以及繪制Android信息界面等內容。

第6章　iOS UI設計。主要講解了iOS系統界面讀者元素、iOS系統UI設計規范、iOS系統UI設計原則、iPhone X的App UI設計、iOS App UI設計模板、iOS UI設計規范和移動App設計過程中的要點等內容。

第7章　PC端UI設計。主要講解了PC端和移動端網頁設計的區別、鉛筆工具和剪刀工具、PC端網頁UI設計原則、PC端網頁UI設計要點以及PC端網頁UI設計風格等內容。

第8章　UI的輸出與交互設計。主要講解了圖標的輸出、UI界面的輸出、UI設計的交互以及Sketch插件的安裝與使用等內容。

本書版面結構說明

為了達到使讀者輕松自學，深入了解Sketch功能的目的，本書設計了“知識點講解”“操作案例”“提示”和“知識點睛”等小項目。

1.知識點講解。當前標題下知識點的詳細講解，常常伴有圖片注解等信息，不僅豐富了圖書頁面結構，還可以幫助讀者快速接受新知識。

2.操作案例。通過實際動手操作，更加快速地掌握學習到的知識。由于操作案例的步驟較少，更利于讀者迅速掌握知識點，同時在每個案例的操作步驟前帶有本案例的設計分析和色彩分析，更利于讀者對案例的掌握和理解。

3.提示。包含了Sketch的各種使用技巧和操作過程中的注意事項。

4.知識點睛。匯集了大量技術性提示和相關知識點的補充講解，有利于讀者進一步了解UI設計。

本書適用人群

本書適用于有一定移動網頁設計基礎的設計初學者及網頁設計愛好者，也可以作為專業網站UI設計人員以及相關專業人員的參考圖書，同時還可以作為相關專業在校學生及教師參考用書。

本書配套資源

本書為讀者提供了配套教學視頻、素材、源文件、PPT教學課件等資源，讀者可到人郵教育社區（http://www.ryjiaoyu.com）上免費下載。