在線學(xué)習(xí)類App界面視覺(jué)層級(jí)表現(xiàn)特點(diǎn)研究

金 晶

（杭州職業(yè)技術(shù)學(xué)院，浙江 杭州 310018）

隨著互聯(lián)網(wǎng)的發(fā)展，教育形式在近幾年快速更新，人們開(kāi)始逐漸通過(guò)互聯(lián)網(wǎng)的方式進(jìn)行在線學(xué)習(xí)。在線學(xué)習(xí)類App滿足了學(xué)生泛在學(xué)習(xí)的需求，使得學(xué)生可以在任何地方、任何時(shí)刻進(jìn)行學(xué)習(xí)。但是，這也導(dǎo)致了學(xué)習(xí)時(shí)間碎片化、學(xué)習(xí)情境復(fù)雜化等問(wèn)題，如何通過(guò)App中的視覺(jué)元素提高用戶在線學(xué)習(xí)時(shí)的注意力，讓學(xué)生快速、高效的獲取信息從而提高學(xué)習(xí)效率，是設(shè)計(jì)師需要重點(diǎn)關(guān)注的問(wèn)題[1]。目前在線學(xué)習(xí)類App的界面設(shè)計(jì)風(fēng)格多樣，大多數(shù)都沒(méi)有關(guān)于運(yùn)用界面視覺(jué)元素提升用戶注意力的研究，設(shè)計(jì)師僅僅只是停留在視覺(jué)上的美觀程度。文章通過(guò)對(duì)《中國(guó)大學(xué)慕課》《騰訊課堂》和《超星學(xué)習(xí)通》三種在線學(xué)習(xí)類App的分析比較，以此探究在線學(xué)習(xí)類App界面視覺(jué)層級(jí)表現(xiàn)特點(diǎn)，為在線學(xué)習(xí)類App的界面設(shè)計(jì)提供可行性參考。

一、界面視覺(jué)層級(jí)作用與表現(xiàn)

（一）界面視覺(jué)層級(jí)的概念及作用

手機(jī)界面本身是二維的，但是其內(nèi)容有著邏輯上的信息結(jié)構(gòu)和層級(jí)關(guān)系，從而形成了界面信息的視覺(jué)層級(jí)，如圖1。根據(jù)視覺(jué)思維的特征，用戶在短時(shí)間內(nèi)只能對(duì)有限的信息進(jìn)行處理[2]。因此，通過(guò)界面信息組織制造清晰的視覺(jué)層級(jí)，可以使用戶在使用過(guò)程中順其自然的理解產(chǎn)品的邏輯結(jié)構(gòu)和層次關(guān)系，從而提高用戶在線學(xué)習(xí)時(shí)的注意力，提高學(xué)習(xí)效率[3]。

圖1 界面信息的視覺(jué)層級(jí)

（二）界面視覺(jué)層級(jí)的表現(xiàn)

界面視覺(jué)層級(jí)是通過(guò)視覺(jué)元素的選擇和組織，提高用戶對(duì)關(guān)鍵信息內(nèi)容的辨識(shí)度，從而達(dá)到界面信息清晰、視聽(tīng)有效的呈現(xiàn)，基本的界面視覺(jué)元素有文字、圖片和色彩[4]。文字作為界面信息主體，能夠讓用戶接收到界面中所要表達(dá)的內(nèi)容，想準(zhǔn)確有效地傳達(dá)信息，就必須考慮文字編排的視覺(jué)層級(jí)，給予用戶簡(jiǎn)潔明了的文字信息傳達(dá)效果。圖片在界面中主要起到裝飾和說(shuō)明的作用，可以幫助用戶對(duì)界面中文字內(nèi)容進(jìn)行理解，對(duì)圖片的位置、比例等進(jìn)行編排，從而創(chuàng)造清晰的視覺(jué)層級(jí)，提高用戶的識(shí)別效率。色彩能夠有效感染用戶的情緒，運(yùn)用色彩的對(duì)比可以區(qū)分界面中信息的主次關(guān)系，使用戶更快地接收到界面想要傳達(dá)的內(nèi)容[5]。

二、在線學(xué)習(xí)類App界面視覺(jué)層級(jí)表現(xiàn)特點(diǎn)分析

優(yōu)化App界面視覺(jué)層級(jí)設(shè)計(jì)以期提升用戶的學(xué)習(xí)效率是在線學(xué)習(xí)類App界面設(shè)計(jì)的主要任務(wù)，綜合《中國(guó)大學(xué)慕課》《騰訊課堂》和《超星學(xué)習(xí)通》三種在線學(xué)習(xí)類App，分別對(duì)界面結(jié)構(gòu)以及界面細(xì)節(jié)視覺(jué)層級(jí)的表現(xiàn)特點(diǎn)進(jìn)行分析。

（一）界面結(jié)構(gòu)的視覺(jué)層級(jí)

界面結(jié)構(gòu)的視覺(jué)層級(jí)指的是通過(guò)對(duì)文字、圖片等信息元素的組織和編排，搭建合理的信息結(jié)構(gòu)，展現(xiàn)所需傳達(dá)的信息。在線學(xué)習(xí)類App的界面結(jié)構(gòu)根據(jù)不同的產(chǎn)品定位有所差異，但總的來(lái)說(shuō)都是以歸納整理信息內(nèi)容，為用戶提供多種查找課程信息的導(dǎo)航分類模塊為主。

1．中國(guó)大學(xué)慕課App

在中國(guó)大學(xué)慕課App中，界面結(jié)構(gòu)利用了格式塔理論中主體與背景原理，通過(guò)模塊內(nèi)尺寸比例劃分決定了信息的優(yōu)先視覺(jué)層級(jí)，分為以圖為主和以文字為主兩種形式的導(dǎo)航分類模塊。如最近直播導(dǎo)航分類模塊通過(guò)突出課程名稱等文字信息，告知用戶該模塊的課程信息，使用戶能夠快速定位到需要學(xué)習(xí)的課程。而編輯推薦導(dǎo)航分類模塊則是通過(guò)突出課程封面圖片幫助用戶理解課程特點(diǎn)，從而區(qū)分各個(gè)課程信息模塊。每個(gè)導(dǎo)航分類下課程信息模塊采用一致的排列布局，利用格式塔理論中相似性原理和接近性原理拉開(kāi)模塊內(nèi)課程信息間的距離，并組合相關(guān)聯(lián)的信息元素，形成了清晰的界面視覺(jué)層級(jí)。此外，中國(guó)大學(xué)慕課App中利用格式塔理論中的連續(xù)性原理將處于屏幕邊緣的卡片做部分遮擋處理，暗示用戶在屏幕之外還有更多的課程信息可用手指去滑出操作，巧妙地向用戶解釋了界面的結(jié)構(gòu)層級(jí)，又無(wú)形地拓展了有限的界面空間。

2．騰訊課堂App

在騰訊課堂App中，每個(gè)導(dǎo)航分類模塊雖然同樣采用一致的排列布局，但是其中的圖文比例都各不一致，包含多種不同的組織方式。如直播好課、行業(yè)小零識(shí)和小編優(yōu)選等導(dǎo)航分類是以圖片為主體組成的課程信息模塊，其中在行業(yè)小零識(shí)導(dǎo)航分類中，利用主體與背景原理在模塊尺寸大小上形成對(duì)比。此外，干貨集錦、實(shí)用經(jīng)驗(yàn)和學(xué)員故事等導(dǎo)航分類是以文字為主體組成的課程信息模塊，引導(dǎo)用戶進(jìn)行點(diǎn)擊學(xué)習(xí)。在騰訊課堂App中界面結(jié)構(gòu)的組織方式較為復(fù)雜，視覺(jué)層級(jí)過(guò)多，容易干擾用戶視線，影響界面信息的準(zhǔn)確表達(dá)和用戶學(xué)習(xí)時(shí)的注意力。

3．超星學(xué)習(xí)通App

在超星學(xué)習(xí)通App中，每個(gè)導(dǎo)航分類下課程信息模塊同樣采用一致的排列布局，并且只有一種組織形式，即左文右圖，圖文在模塊中的占比較為一致，如圖4。超星學(xué)習(xí)通App中界面結(jié)構(gòu)的視覺(jué)層級(jí)較為簡(jiǎn)單，過(guò)少的視覺(jué)層級(jí)也會(huì)影響到界面信息的有效傳達(dá)，使得用戶無(wú)法快速準(zhǔn)確地找到所需的信息，降低用戶的學(xué)習(xí)效率。

（二）界面細(xì)節(jié)層級(jí)劃分

界面結(jié)構(gòu)的視覺(jué)層級(jí)能夠幫助用戶準(zhǔn)確定位所需要的課程信息，但是如果用戶需要進(jìn)一步了解課程內(nèi)容則需要花更多的時(shí)間去瀏覽課程簡(jiǎn)介、教師姓名、直播時(shí)間等細(xì)節(jié)輔助信息，容易造成用戶查找信息困難、注意力不集中等問(wèn)題。因此，設(shè)計(jì)師需要對(duì)細(xì)節(jié)輔助信息的字重、字號(hào)、顏色等進(jìn)行細(xì)微的調(diào)整和區(qū)分，制造清晰的界面細(xì)節(jié)層級(jí)，讓用戶快速、高效的獲取信息從而提高學(xué)習(xí)效率。

1．文字層級(jí)劃分

在中國(guó)大學(xué)慕課App和騰訊課堂App的課程信息模塊中，根據(jù)文字信息主次關(guān)系分別對(duì)字號(hào)、字重進(jìn)行了細(xì)節(jié)層級(jí)劃分。通過(guò)文字細(xì)節(jié)層級(jí)的劃分，突出各模塊的課程名稱，并區(qū)分各個(gè)課程信息模塊內(nèi)的信息主次關(guān)系，幫助用戶識(shí)別信息的重要性順序。其中，騰訊課堂App的字號(hào)、字重根據(jù)需要突出的功能點(diǎn)采用了不同的細(xì)節(jié)層級(jí)劃分，過(guò)于細(xì)膩的細(xì)節(jié)層級(jí)雖然能夠展示每個(gè)導(dǎo)航模塊內(nèi)的信息，但是當(dāng)用戶在瀏覽整個(gè)界面時(shí)無(wú)法突出界面中的主體信息，不利于用戶獲取信息。

在超星學(xué)習(xí)通App中，課程信息模塊的文字細(xì)節(jié)層級(jí)只有字號(hào)設(shè)置了層級(jí)，字重?zé)o層級(jí)。文字細(xì)節(jié)層級(jí)過(guò)于簡(jiǎn)單會(huì)顯得界面較為單調(diào)，用戶在瀏覽時(shí)雖然能夠很直觀地了解到界面中信息內(nèi)容，但是卻無(wú)法快速地獲取細(xì)節(jié)信息，增加了用戶的使用負(fù)擔(dān)，降低了學(xué)習(xí)效率。

2．顏色層級(jí)劃分

在中國(guó)大學(xué)慕課、騰訊課堂和超星學(xué)習(xí)通三種在線學(xué)習(xí)類App中，對(duì)提示文字、標(biāo)簽、價(jià)格等重點(diǎn)信息均使用了飽和度和明度較高的顏色。其中在價(jià)格信息上，中國(guó)大學(xué)慕課和騰訊課堂都使用了暖色系，突出課程優(yōu)惠賣點(diǎn)，引導(dǎo)用戶進(jìn)行選購(gòu)。通過(guò)顏色的細(xì)節(jié)層級(jí)對(duì)比，強(qiáng)化了界面的主要信息。在課程名稱、教師姓名、學(xué)習(xí)人數(shù)等需要用戶進(jìn)行閱讀的文字信息上，使用同色系不同明度，通過(guò)黑白灰明度層級(jí)對(duì)比表達(dá)信息的主次關(guān)系，使閱讀的順序一目了然。

三、總結(jié)

綜上所述，在綜合分析了《中國(guó)大學(xué)慕課》《騰訊課堂》和《超星學(xué)習(xí)通》三種在線學(xué)習(xí)類App的界面視覺(jué)層級(jí)表現(xiàn)特點(diǎn)后，針對(duì)界面視覺(jué)層級(jí)設(shè)計(jì)特點(diǎn)及不足之處將在線學(xué)習(xí)類App的設(shè)計(jì)要素歸納為以下四個(gè)方面：

（一）利用分組、對(duì)齊優(yōu)化界面結(jié)構(gòu)，簡(jiǎn)化歸納視覺(jué)層級(jí)。在移動(dòng)端有限的界面中包含了大量的課程信息，通過(guò)對(duì)共性的元素進(jìn)行信息分組，表示同組信息具有相似的功能，利于用戶快速理解各組信息之間的邏輯關(guān)系。同時(shí)，利用位置距離實(shí)現(xiàn)信息關(guān)系的表達(dá)，形成明確的視覺(jué)層級(jí)，使用戶更加容易查找和明確課程信息，更有效地完成學(xué)習(xí)任務(wù)。

（二）通過(guò)視覺(jué)對(duì)比加強(qiáng)界面視覺(jué)層級(jí)。通過(guò)尺寸對(duì)比突出重要的課程模塊以及模塊內(nèi)的主體信息，引導(dǎo)用戶的視線營(yíng)造視覺(jué)層級(jí)，幫助用戶理解課程信息之間的主次關(guān)系。同時(shí)，通過(guò)顏色對(duì)比突出各課程模塊內(nèi)的提示信息，在色彩屬性上色相的層級(jí)高于飽和度，飽和度高于明度，因此根據(jù)色相、飽和度和明度分別對(duì)不同層級(jí)的提示信息進(jìn)行顏色層級(jí)劃分，幫助用戶識(shí)別信息的重要性順序。在課程模塊內(nèi)的閱讀文字信息上，運(yùn)用同色系不同明度，明度對(duì)比越強(qiáng)，視覺(jué)層級(jí)越高，明度對(duì)比越弱則越低，使用戶閱讀的順序一目了然。

（三）通過(guò)視覺(jué)提示設(shè)計(jì)加強(qiáng)同級(jí)界面的結(jié)構(gòu)關(guān)系。人們傾向于感知連續(xù)的形式，將零散的信息認(rèn)知成一個(gè)相互聯(lián)系的整體。在App導(dǎo)航分類下包含了多個(gè)課程信息模塊，設(shè)計(jì)師可以利用連續(xù)性原則設(shè)計(jì)視覺(jué)提示，如視覺(jué)要素部分遮擋等設(shè)計(jì)手法，引導(dǎo)用戶操作并掌握界面結(jié)構(gòu)關(guān)系，從而創(chuàng)造視覺(jué)層級(jí)，降低用戶的學(xué)習(xí)成本，也拓展了有限的界面空間。

（四）易讀的文字層級(jí)設(shè)計(jì)。文字除了傳遞信息的重要功能外，文字樣式屬性還可以細(xì)化界面視覺(jué)層級(jí)，從而實(shí)現(xiàn)易閱讀的目的。根據(jù)課程信息主次關(guān)系對(duì)文字層級(jí)進(jìn)行劃分，采用不同字號(hào)和字重，通過(guò)文字量化設(shè)計(jì)，構(gòu)建易讀的文字視覺(jué)層級(jí)，使用戶能快速準(zhǔn)確地接收到最想獲取的信息，提高學(xué)習(xí)效率。