1.1 移動端UI設計基礎

想要設計出好的移動UI作品，首先要了解移動UI的基礎知識，包括移動UI設計的概念、移動UI的平臺、移動UI的設計流程、移動UI的常用設計工具，以及移動端與PC端UI設計的區別等。

通過了解移動UI設計的基礎知識，可以幫助設計師從本質上理解UI設計的內容和原理，從而充分發揮設計師個人的設計理念，最終設計出更多既符合行業需求，又滿足用戶需求的UI作品。

1.1.1 了解移動UI設計

UI是User Interface的簡稱，翻譯為“用戶界面”。簡單來說，UI設計是對軟件的人機交互、操作邏輯和界面美觀的整體設計。而移動UI設計通常是對智能手機、智能手表和平板電腦等移動電子設備中的應用程序的界面設計。圖1-1所示為常見的移動電子設備。

移動電子設備中的應用程序就是大眾口中經常提到的App。App是Application的縮寫，主要是指安裝在智能手機上的軟件，用來完善原始系統的不足和個性化，為用戶提供更豐富的使用體驗。圖1-2所示為當當網和小紅書的App首頁。

用戶在選擇移動端軟件時，通常會選擇UI視覺效果更美觀且具有更好的用戶體驗的應用軟件。目前市場上的移動應用軟件非常多，但這些軟件良莠不齊，界面各異。如何滿足用戶要求，如何使自己的軟件盈利，都是設計師需要考慮的問題。

1.1.2 iOS系統與Android系統

為移動設備設計UI界面，會受到移動設備采用的系統的影響。目前常見的智能手機和平板電腦系統平臺為iOS系統和Android系統，而目前常見的智能手表系統平臺為Wear OS系統和Watch OS系統。

iOS系統

iOS系統是由蘋果公司開發的一款操作系統，目前主要應用在iPhone、iPod touch和iPad等設備上。它以Darwin為根底，最初被命名為iPhone OS，在2010年6月7日召開的WWDC大會上宣布將其改名為iOS。

從2010年開始，蘋果公司逐步完善并發布iOS系統，截至2020年7月，最新的iOS系統版本為iOS 14。圖1-3所示為iOS 6和iOS 14的系統界面。

相對于Android系統而言，iOS系統具有穩定、安全性高、整合度高和應用質量高等特點。

● 穩定

iOS系統是一個完全封閉的系統，不開源，但是這個系統擁有嚴格的管理體系和評審規則。由于iOS系統閉源的緣故，更多的系統進程都在蘋果公司的掌控之中，因此系統運行較為流暢和穩定。不會出現Android系統那樣后臺程序繁多并影響系統響應速度的現象。

● 安全性高

對于用戶來說，保障移動電子設備的信息安全具有十分重要的意義，不管是企業信息、客戶信息和個人照片，還是銀行信息或者地址等，都必須保證其安全。蘋果公司對iOS系統采取了封閉的措施，并建立了完整的開發者認證和應用審核機制，導致惡意程序基本沒有入侵的機會。

iOS設備使用嚴格的安全技術和功能，使用起來十分方便。iOS設備上的許多安全功能都是默認的，無須對其進行大量的設置，而且某些關鍵功能，如設備加密，則不允許配置，這樣就會避免出現用戶意外關閉這項功能的情況。

● 整合度高

iOS系統軟件與硬件的整合度相當高，大大降低了它的分化性，在這方面iOS系統遠勝碎片化嚴重的Android系統。同時整合度高也增加了整個iOS系統的穩定性，經常使用iPhone的用戶會發現，手機很少出現死機和無響應的情況。

● 應用質量高

作為目前最為流行的移動端操作系統之一，iOS系統與Android系統一樣，也擁有大量的用戶及開發人員。但由于iOS系統的封閉性和審查制度，iOS系統中的應用相對于Android系統來說，無論是界面設計還是操作流暢方面，質量都會高一些。

Android系統

Android公司于2003年在美國加州成立，2005年被Google公司收購。Android是一種以Linux為基礎的開放源碼操作系統，主要應用于手持設備。2010年年末的數據顯示，僅正式推出兩年的操作系統Android已經超越了塞班系統，一躍成為全球最受歡迎的智能手機操作系統。

開發者使用甜點的名稱為Android系統的各個版本進行命名，從Andoird 1.5發布開始，作為每個版本代表的甜點尺寸越變越大，并按照26個字母進行排序。

從Android 1.5開始到Android 9.0，依次為紙杯蛋糕、甜甜圈、松餅、凍酸奶、姜餅、蜂巢、果凍豆、奇巧巧克力、棒棒糖、棉花糖、牛軋糖、奧利奧、派。圖1-4所示為Google公司總部甜點廣場的Android版本雕塑。但是從Android Q開始，不再采用“首字母+甜點”的命名方式，而是直接采用數字，如Android Q被命名為Android 10。

相對于iOS系統來說，Android系統具有系統開源、跨平臺性及應用豐富等特點。

● 系統開源

Android系統的底層使用Linux內核和GPL許可證，也就意味著相關的代碼必須開源。開源能夠帶來快速流行的能力與較低的學習成本，各個手機廠商無須自行開發手機操作系統，因此紛紛采用Android系統，甚至各家廠商可以按照自己的目的進行深度定制。例如三星的One UI系統、小米的MIUI系統和錘子的Smartisan OS系統，如圖1-5所示。

開源促進了學習研究社區的迅速興起，相比iOS系統，Android系統的開源對于開發者來說，是一個更適合研究與修改的系統，同時還不受不開源系統的限制。

開源帶來的另一個優勢就是降低了手機廠商的成本。除去操作系統開發的高成本，Android系統廠商的手機價格可以控制在很低的水平；或者在同樣價位中相對iOS系統手機擁有更高端的硬件配置。因此在中低端市場，Android系統手機有著絕對的市場占有率；在高端市場與iOS系統手機相比，同樣毫不遜色。

● 跨平臺性

由于使用Java對Android系統進行開發，所以Android系統繼承了Java跨平臺的優點。任何Android應用程序幾乎無須修改就能運行于所有的Android設備上。簡單來說，就是Android系統允許廠商將五花八門的App應用到移動設備中，移動設備不僅包括智能手機，也包括平板電腦、智能手表、電視和各種智能家居等。

Android系統的跨平臺性也極大地方便了龐大的應用開發者群體。同樣的應用，對不同的設備編寫不同的程序是一件極其浪費勞動力的事情，而Android系統的出現很好地改善了這一狀況。

● 應用豐富

操作系統代表著一個完整的生態圈，而一個只有系統沒有應用的“空殼”，即使設計得再好，也很難成為主流的操作系統。

Android系統由于其本身的特點及Google公司的大力推廣，很快就吸引了開發者的注意。時至今日，Android系統已經積累了相當多的應用。豐富的應用使得Android系統更加流行，從而吸引更多的開發者開發出更多、更好的應用，形成良性循環。

Wear OS系統和Watch OS系統

由于Google公司與蘋果公司在智能手機市場的強大控制力和智能穿戴設備的興起，分別由兩家公司開發的用于智能穿戴設備的Wear OS系統和Watch OS系統也開始走進大眾的視野。

● Wear OS

Wear OS系統是Android系統的一個分支版本，專為智能手表等可穿戴智能設備而設計，首個預覽版本于2014年3月公布。圖1-6所示為Google智能手表。

● Watch OS

Watch OS是蘋果公司基于iOS系統開發的一套用于Apple Watch智能手表的操作系統。在2014年9月的iPhone 6發布會上，蘋果公布了一款全新產品——Apple Watch，并運行基于iOS的Watch OS操作系統。圖1-7所示為蘋果智能手表。

1.1.3 移動端與PC端UI設計的區別

PC端UI設計是指電子計算機中所有軟件的用戶界面設計。而移動端UI設計主要是指智能手機和平板電腦中所有App的界面設計。從設計載體的角度來說，兩者在屏幕尺寸、設計規范和交互操作上都有很大的不同。

屏幕尺寸不同

移動設備的屏幕一般都比較小，受不同系統的限制，每一個頁面中所擺放的內容也較少，需要通過多層級的方式擴充內容。而PC端UI設計則沒有這個顧慮，每一頁中都可以盡量多放東西，從而減少層級。

例如PC端的京東頁面，整個頁面尺寸較大，可擺放內容的空間也大，用戶只需要通過二級頁面就可以看到想要的內容，如圖1-8所示。

移動端的京東App層級較多，有5個大的層級，用戶想要找到感興趣的商品，往往需要一層一層地查找。圖1-9所示為點擊了“京東到家”圖標后進入了“京東到家”頁面。

設計規范不同

PC端UI通常使用鼠標操作，而移動端UI則使用手指操作。鼠標操作的精度非常高，而手指操作的精確度則相對較低。因此PC端UI的圖標一般都比較小，而移動端UI的圖標則要大很多。圖1-10所示為微信PC端和移動端界面對比。

交互操作不同

PC端UI中可以展現的UI交互操作習慣更多，如單擊、雙擊、按住、移入、移除、右擊和滾輪等多種操作；而移動端UI的功能相對較弱，只能實現點擊、按住和滑動等操作。

例如移動端愛奇藝視頻，左邊上下滑動可以調整亮度，右邊上下滑動可以調整聲音，最下面左右滑動可以調整視頻的進度，雙擊可以暫停播放。圖1-11所示為移動端的愛奇藝UI界面。

PC端的愛奇藝視頻則可以通過單擊、雙擊、右擊和滾輪進行多種操作。圖1-12所示為PC端的愛奇藝UI界面。