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

金 晶

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

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

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

（一）界面視覺層級的概念及作用

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

圖1 界面信息的視覺層級

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

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

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

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

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

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

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

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

2．騰訊課堂App

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

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

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

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

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

1．文字層級劃分

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

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

2．顏色層級劃分

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

三、總結(jié)

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

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

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

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

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