1.1 了解UI設(shè)計(jì)

UI設(shè)計(jì)即為用戶界面設(shè)計(jì)（User Interface）。UI設(shè)計(jì)的種類很多，按照應(yīng)用的領(lǐng)域不同可以分為網(wǎng)頁設(shè)計(jì)、手機(jī)界面設(shè)計(jì)、軟件界面設(shè)計(jì)和游戲界面設(shè)計(jì)4類。不同種類的UI有著不同的設(shè)計(jì)要求，例如手機(jī)界面設(shè)計(jì)由于受到屏幕大小的限制，具有其獨(dú)有的特征和設(shè)計(jì)準(zhǔn)則。

1.1.1 什么是UI設(shè)計(jì)

UI設(shè)計(jì)是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對軟件界面進(jìn)行美化、優(yōu)化和規(guī)范化的設(shè)計(jì)分支。具體包括啟動(dòng)界面設(shè)計(jì)、框架設(shè)計(jì)、按鈕設(shè)計(jì)、面板設(shè)計(jì)、菜單設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、滾動(dòng)條和狀態(tài)欄設(shè)計(jì)等，如圖1-1所示。

1.1.2 手機(jī)UI與平面UI的區(qū)別

手機(jī)UI設(shè)計(jì)是平面UI設(shè)計(jì)中的一支分支。與其他類型的UI設(shè)計(jì)相比，手機(jī)UI的平臺主要應(yīng)用于在手機(jī)的APP/客戶端上，因此對于手機(jī)的型號和尺寸有嚴(yán)格的限定。

由于手機(jī)UI的獨(dú)特性，使得很多平面設(shè)計(jì)師需要重新調(diào)整審美基礎(chǔ)。比如手機(jī)UI通常對尺寸有嚴(yán)格要求、對控件和組件類型有特殊要求等

但是，很多設(shè)計(jì)師不能夠合理布局，不能夠?qū)⒕W(wǎng)站設(shè)計(jì)的構(gòu)架理念合理地轉(zhuǎn)化到手機(jī)界面的設(shè)計(jì)上。設(shè)計(jì)師會(huì)覺得手機(jī)界面限制非常多，覺得創(chuàng)意性發(fā)揮空間太小，表達(dá)的方式也非常有限，甚至很死板。但真實(shí)的情況并不是這樣，通過了解手機(jī)的空間有多少，合理創(chuàng)意，一樣可以完成優(yōu)秀的UI設(shè)計(jì)。當(dāng)然也要注意，手機(jī)UI設(shè)計(jì)受到手機(jī)系統(tǒng)的限制。所以在開始設(shè)計(jì)手機(jī)UI時(shí)，一定要先確認(rèn)最終使用的系統(tǒng)。

1.1.3 手機(jī)UI設(shè)計(jì)的特點(diǎn)

與其他類型的軟件界面設(shè)計(jì)相比，手機(jī)UI設(shè)計(jì)有著更多的局限性和其獨(dú)有的特征，這種局限性主要來自手機(jī)屏幕尺寸的局限。這就要求設(shè)計(jì)師在著手設(shè)計(jì)制作之前，必須先對相應(yīng)的設(shè)備進(jìn)行充分地了解和分析。

總體來說，手機(jī)界面設(shè)計(jì)具有以下4個(gè)特征。

·手機(jī)的顯示屏相對較小，能夠支持的色彩也比較有限，可能無法正常顯示顏色過于豐富的圖像效果，這就要求界面中的元素要處理得盡可能簡潔。當(dāng)前流行的扁平化風(fēng)格可以說將此貫徹到了極致。

·手機(jī)界面交互過程不宜設(shè)計(jì)得太復(fù)雜，交互步驟不宜太多。這可以提高操作便利性，進(jìn)而提高操作效率。

·不同型號的手機(jī)支持的圖像格式、音頻格式和動(dòng)畫格式不一樣，所以在設(shè)計(jì)之前要充分收集資料，選擇盡可能通用的格式，或者對不同型號進(jìn)行配置選擇。

·不同型號的手機(jī)屏幕比例不一致，所以設(shè)計(jì)時(shí)還要考慮圖片的自適應(yīng)問題和界面元素圖片的布局問題。

通常來說，制作手機(jī)UI界面時(shí)會(huì)按照最常用、最大尺寸的屏幕進(jìn)行制作，然后分別為不同尺寸的屏幕各制作一套圖，這樣就可以保證大部分的屏幕都可以正常顯示。