在線學習類App界面視覺層級表現特點研究

金 晶

（杭州職業技術學院，浙江 杭州 310018）

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

一、界面視覺層級作用與表現

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

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

圖1 界面信息的視覺層級

（二）界面視覺層級的表現

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

二、在線學習類App界面視覺層級表現特點分析

優化App界面視覺層級設計以期提升用戶的學習效率是在線學習類App界面設計的主要任務，綜合《中國大學慕課》《騰訊課堂》和《超星學習通》三種在線學習類App，分別對界面結構以及界面細節視覺層級的表現特點進行分析。

（一）界面結構的視覺層級

界面結構的視覺層級指的是通過對文字、圖片等信息元素的組織和編排，搭建合理的信息結構，展現所需傳達的信息。在線學習類App的界面結構根據不同的產品定位有所差異，但總的來說都是以歸納整理信息內容，為用戶提供多種查找課程信息的導航分類模塊為主。

1．中國大學慕課App

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

2．騰訊課堂App

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

3．超星學習通App

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

（二）界面細節層級劃分

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

1．文字層級劃分

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

在超星學習通App中，課程信息模塊的文字細節層級只有字號設置了層級，字重無層級。文字細節層級過于簡單會顯得界面較為單調，用戶在瀏覽時雖然能夠很直觀地了解到界面中信息內容，但是卻無法快速地獲取細節信息，增加了用戶的使用負擔，降低了學習效率。

2．顏色層級劃分

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

三、總結

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

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

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

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

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