智能手機(jī)的應(yīng)用帶動(dòng)了APP的研發(fā)和推廣，手機(jī)的ui設(shè)計(jì)也跟著不斷加深。作為移動(dòng)端的主要代表，手機(jī)的ui設(shè)計(jì)內(nèi)容有哪些呢？今天就讓faceui為大家介紹移動(dòng)ui設(shè)計(jì)的工作內(nèi)容有哪些，移動(dòng)ui設(shè)計(jì)的內(nèi)容布局。

　　關(guān)于移動(dòng)ui設(shè)計(jì)

　　移動(dòng)端的UI設(shè)計(jì)，是區(qū)別于PC端UI設(shè)計(jì)的一種叫法。移動(dòng)UI設(shè)計(jì)師是從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。

　　設(shè)計(jì)從工作內(nèi)容上來說分為3大類別，即研究工具，研究人與界面的關(guān)系，研究人。 與之相應(yīng)， UI設(shè)計(jì)師的職能大體包括三方面：

　　1、圖形設(shè)計(jì)，即傳統(tǒng)意義上的“美工”。當(dāng)然，實(shí)際上他們承擔(dān)的不是單純意義上美術(shù)工人的工作，而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。

　　2、交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。

　　圖片來源于網(wǎng)絡(luò)

　　3、用戶測(cè)試/研究，這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過以目標(biāo)用戶問卷的形式衡量UI設(shè)計(jì)的合理性。如果沒有這方面的測(cè)試研究，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來評(píng)判，這樣就會(huì)給企業(yè)帶來極大的風(fēng)險(xiǎn)。

　　移動(dòng)ui設(shè)計(jì)的內(nèi)容布局

　　在 APP 的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

　　1、列表式布局

　　列表式布局方式非常普遍，隨便打開一個(gè) APP，基本都存在這種布局方式，其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

　　以我們最常用的微信和 QQ 為例，其「信息」頁(yè)面都是采用的列表式布局，在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px，最大的高度要視內(nèi)容的多少而定。

　　圖片來源于網(wǎng)絡(luò)

　　2. 卡片式布局

　　形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富。

　　在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。

　　雙欄卡片的布局形式，比較常見于以圖片信息為主導(dǎo)的App。例如一些商城的商品陳列頁(yè)面。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

　　以上就是faceui為大家介紹的關(guān)于移動(dòng)ui設(shè)計(jì)的相關(guān)內(nèi)容。移動(dòng)端的ui設(shè)計(jì)，其設(shè)計(jì)的頁(yè)面布局跟PC端有很大的不同，要充分考慮用戶的使用習(xí)慣，進(jìn)行合理的設(shè)計(jì)。