UI

版式設(shè)計(jì)UI

是user

interface

(用戶界面)的簡稱，本節(jié)我們主要介紹應(yīng)用軟件的UI版

式設(shè)計(jì)。此處我們講的UI版式設(shè)計(jì)是指對(duì)

應(yīng)用軟件的操作邏輯、界面的版式設(shè)計(jì)。

好

的UI版式設(shè)計(jì)不僅讓應(yīng)用軟件變得有個(gè)

性、有品位，還讓應(yīng)用軟件操作起來簡單、

方便，可充分提升軟件用戶的體驗(yàn)，如圖

5-7-1所示。

UI

版式設(shè)計(jì)一

、UI版式設(shè)計(jì)的概念圖5~7-

1

應(yīng)用軟件UI

版式設(shè)計(jì)二、UI

版式設(shè)計(jì)的原則1.簡易性UI版式設(shè)計(jì)應(yīng)方便用戶使用和了解產(chǎn)品，使用戶能快速上手操作，減少發(fā)生用戶選擇錯(cuò)誤情況的可能性。2.一致性用戶界面的結(jié)構(gòu)必須清晰且一致，版式設(shè)計(jì)風(fēng)格必須與產(chǎn)品內(nèi)容相統(tǒng)一。

UI版式設(shè)計(jì)3.色彩搭配舒適用戶界面的色彩搭配要考慮到應(yīng)用軟件的使用場景、使用對(duì)象以及想要營造的氛圍等。

4.人性化高效率和用戶滿意是UI版式設(shè)計(jì)的人性化體現(xiàn)。

UI版式設(shè)計(jì)三、UI常見版式1.九宮格版式九宮格版式主要運(yùn)用在以分類為主的一級(jí)頁面中，能起到劃分頁面功能的作用。采用九宮

格版式的界面信息布局更為規(guī)范，用戶使用起來非常方便，應(yīng)用和功能會(huì)顯得明確、突出，

如圖5-7-2所示。

UI

版式設(shè)計(jì)

UI版式設(shè)計(jì)SmartGift圖5

-

7

-

2

采用九宮格版式的用戶界面ProprshopfxchangecodeBrowse

Movies

to

MakeALLCATEGORIESX

UI

版式設(shè)計(jì)2.放射狀版式放射狀版式有凸顯中間內(nèi)容或功能點(diǎn)的作用。在強(qiáng)調(diào)核心功能點(diǎn)時(shí)，可以以主要功能點(diǎn)為

中心，將其他的功能點(diǎn)或內(nèi)容呈放射狀編排，從而引導(dǎo)用戶的視線，使其將目光聚集在想要

突出的功能點(diǎn)上，如圖5-7-3所示。

UI版式設(shè)計(jì)圖5-

7-

3

采用放射狀版面的用戶界面Breakfast

AmazingMealtimeLunchnin

UI

版式設(shè)計(jì)3.三角形版式三角形版式主要運(yùn)用在文字與圖標(biāo)的編排中，能讓界面保持平衡、穩(wěn)定。從上至下的三角

形構(gòu)圖，能把信息羅列得更為規(guī)整。在用戶界面中，采用三角形版式設(shè)計(jì)的版面大多是圖在

上、字在下，這樣用戶閱讀起來更為舒服，且重點(diǎn)突出，如圖5-7-4所示。個(gè)人所得稅美麗修行一鍵臺(tái)錄密碼

請輸入密碼請按住滑塊，拖動(dòng)到最右邊掃臉登錄|找回密碼微信登錄登錄注冊

UI版式設(shè)計(jì)圖

5

-

7

-

4

采用三角形版式的用戶界面換個(gè)登錄方式<返回更多

UI

版式設(shè)計(jì)4.列表式版式列表式版式是指在用戶界面中以列表形式展示各項(xiàng)信息的版面形式。列表式版式常用在通

信類、電商類、新聞自媒體類、應(yīng)用下載類等軟件用戶界面中。在采用列表式版式的用戶界

面中，軟件用戶可通過滑動(dòng)列表來瀏覽各項(xiàng)信息，用戶界面信息層次清晰，瀏覽方便，如圖

5-7-5所示。用戶注冊手機(jī)號(hào)碼停用、注銷或無法接收短信的。如何修…如何注冊成為互聯(lián)網(wǎng)平臺(tái)用戶?個(gè)人用戶在注冊時(shí)，如遇本人身份證成手機(jī)號(hào)碼被人占用…用戶語到交管張戶被鎖定或者停用時(shí)該如何處理?備案非本人機(jī)動(dòng)車流程圖解業(yè)務(wù)指南事故快處流程圖解滿分學(xué)習(xí)考試流程圖解駕駛?cè)藢忩?yàn)流程圖解這空鐵聯(lián)運(yùn)訂單計(jì)次·定期票訂單約車訂單1閱出站引導(dǎo)服務(wù)訂單

UI版式設(shè)計(jì)汽車票訂單5旅游訂單收入納稅明細(xì)查詢已申報(bào)收入的查詢及異議申訴申請開具納稅記最綜合所得年度匯算居民個(gè)人綜含所得年度匯算申報(bào)(儀取得境內(nèi)綜合

所得適用》餐飲

·特產(chǎn)訂單保險(xiǎn)訂單酒店訂單鐵水聯(lián)運(yùn)訂單專項(xiàng)附加扣除填報(bào)子女教育、繼續(xù)教育等專項(xiàng)附加扣除的填報(bào)圖5-

7-

5

采用列表式版式的用戶界面火車票訂單

溫警提示待支付

已支付

候補(bǔ)訂單本人車票辦事網(wǎng)點(diǎn)

咨詢電話△◎申頒免檢合格標(biāo)志流程解鐵路會(huì)員

我

的鐵路商城訂單四收起人5.彈窗式版式彈窗式版