淺談皮具類購(gòu)物APP界面布局

吳杏麟

(廣東職業(yè)技術(shù)學(xué)院，廣東 佛山 528041)

1 界面布局的兩個(gè)方面

手機(jī)APP的界面布局主要關(guān)系到兩個(gè)方面，分別是使用者的眼睛與使用者的手；對(duì)于使用者眼的方面，手機(jī)軟件的布局會(huì)直接影響使用者的視覺注意力；而在另一方面，手機(jī)界面的布局則直接影響到使用者手對(duì)程序的操作，這兩方面影響著使用者的使用體驗(yàn)。

在使用者使用手機(jī)端軟件時(shí)通常會(huì)被視覺注意力所吸引，從而使眼球跟隨著其視線走動(dòng)。如果將使用者視覺步驟做分解拆分出一個(gè)慢動(dòng)作的話，也就是說(shuō)用戶的眼睛會(huì)首先主要到的是屏幕的哪一個(gè)點(diǎn)，下一步用戶又會(huì)將視覺移動(dòng)到哪一個(gè)點(diǎn)上，并且視覺注意力在每個(gè)地方所停留的時(shí)間也會(huì)有所不一樣。視覺停留時(shí)間的長(zhǎng)短也是一個(gè)需要研究與考慮的地方。在人機(jī)工程學(xué)理論當(dāng)中，人的視覺運(yùn)動(dòng)規(guī)律為：

1.人的眼睛做水平方向運(yùn)動(dòng)時(shí)必定會(huì)比眼睛垂直方向運(yùn)動(dòng)時(shí)要快，就是人會(huì)先看到水平方向的物體，再而看到垂直方向的物體；

2.人的視線一般習(xí)慣于從做往右和從上至下的運(yùn)動(dòng)，看圓的物體時(shí)，總是沿著順時(shí)針?lè)较蛞苿?dòng)；

3.眼睛垂直運(yùn)動(dòng)比水平運(yùn)動(dòng)更容易產(chǎn)生疲勞感；對(duì)水平方向的尺寸與比例的顧忌比垂直要精確精準(zhǔn)得多；

4.當(dāng)人的眼睛偏離視線中心是，人眼對(duì)四個(gè)象限的觀察依次是：1.左上、2.右上、3.左下、4.右下；

5.眼睛是人機(jī)體的一部分，難免會(huì)有惰性，看單純的形態(tài)會(huì)比看復(fù)雜的形態(tài)順眼和舒適；

由上述規(guī)律可見，在進(jìn)行界面布局設(shè)計(jì)時(shí)，將要把頁(yè)面最重要信息放置在屏幕的上半部分，將一些次要信息放置在屏幕的下半部分。給最重要的信息提供足夠的界面空間，同時(shí)確保重要信息獲得的速度和準(zhǔn)確性，盡量做到減少用戶視覺疲勞感。

眼睛將所看到的視覺信息傳輸?shù)酱竽X，大腦根據(jù)信息則對(duì)手下達(dá)操作的指令，所以在界面設(shè)計(jì)中，也需要充分考慮到人手指所運(yùn)動(dòng)的范圍以及其運(yùn)動(dòng)的軌跡。根據(jù)文獻(xiàn)研究以及現(xiàn)場(chǎng)實(shí)際用戶研究，發(fā)現(xiàn)當(dāng)使用者在單手拿手機(jī)時(shí)，只能用拇指對(duì)屏幕進(jìn)行操作，而平常人拇指的平均寬度大約為15MM。長(zhǎng)度一般在55-60MM。拇指的活動(dòng)軌跡為以虎口為圓心軸，手指為半徑45°扇形面積。如圖1所示。

在此區(qū)域外，則需要用雙手才能進(jìn)行操作，為降低操作難度，在此區(qū)域放置重要信息最為合適。

2 首頁(yè)頁(yè)面布局

對(duì)于首頁(yè)來(lái)說(shuō)，最重要最需呈現(xiàn)給用戶看的就是APP所涉及的功能，同時(shí)也是整個(gè)APP的導(dǎo)航欄。根據(jù)上述理論，所以APP首頁(yè)應(yīng)該將重要功能分區(qū)放置此區(qū)域，同時(shí)運(yùn)用眼球運(yùn)動(dòng)規(guī)律以及手指活動(dòng)區(qū)域進(jìn)行布局，將APP核心信息放置頁(yè)面中央?yún)^(qū)域，這種類型的構(gòu)圖能讓用戶在使用中更加方便，信息也能更加明確和突出，而且此區(qū)域也屬于方便單手操作區(qū)域。如圖2所示。

圖1 單手手指操作范圍

圖2 淘寶購(gòu)物APP首頁(yè)

3 底部導(dǎo)航欄設(shè)計(jì)

在設(shè)計(jì)底部菜單欄時(shí)，應(yīng)遵循人機(jī)交互設(shè)計(jì)的功能性原則。功能性原則要求在進(jìn)行人機(jī)交互設(shè)計(jì)時(shí)，根據(jù)不同的功能區(qū)分，以功能為集合對(duì)象實(shí)施管理。如“新浪微博”的內(nèi)容便是以“首頁(yè)”、“消息”、“發(fā)現(xiàn)”、和“我”這四個(gè)功能加以區(qū)分和管理，用戶可以在底部欄上隨意切換不同的頁(yè)面，同時(shí)在底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)上，采用響應(yīng)式設(shè)計(jì)。即用戶選擇哪個(gè)頁(yè)面，與之所對(duì)應(yīng)的圖標(biāo)則會(huì)有顏色上的區(qū)分，以淘寶首頁(yè)為例，當(dāng)用戶選擇首頁(yè)時(shí)，首頁(yè)的屋子圖標(biāo)則會(huì)顯示橙色，告知用戶所在的地點(diǎn)，防止迷失方向。而微博底部導(dǎo)航欄設(shè)計(jì)則是采用線條與實(shí)心設(shè)計(jì)，當(dāng)用戶選擇頁(yè)面時(shí)，當(dāng)前頁(yè)面所對(duì)應(yīng)的圖標(biāo)則會(huì)變?yōu)閷?shí)心黑色，其余未被選擇的則為線條圖標(biāo)。通過(guò)這種方式進(jìn)行對(duì)比區(qū)分，讓用戶一目了然，使APP交互更加流暢。

小結(jié)

根據(jù)以上研究結(jié)果，對(duì)于皮具類垂直購(gòu)物APP，在首頁(yè)雙手操作區(qū)域應(yīng)當(dāng)放置皮具分類選項(xiàng)，供消費(fèi)者直觀體驗(yàn)，并放置一些系統(tǒng)推薦或者通過(guò)大數(shù)據(jù)后臺(tái)計(jì)算出來(lái)的消費(fèi)者所喜好的產(chǎn)品，為消費(fèi)者提供直接的購(gòu)買建議。而在底部導(dǎo)航欄中，應(yīng)當(dāng)放置購(gòu)物過(guò)程中幾個(gè)維度的頁(yè)面，例如首頁(yè)、購(gòu)物車、訂單、物流等信息，讓消費(fèi)者在使用過(guò)程中可以隨意切換，并且方便使用。