典型在線教育App產(chǎn)品設計風格分析與思考

劉婧 肖楓濤 陸海葉 吳燕

[摘? ? ? ? ? ?要]? 首先歸納了App產(chǎn)品基本的風格設計，對其中關鍵的色彩設計、布局設計進行了細化描述。以此為基礎，對目前廣泛流行的四款在線教育App產(chǎn)品——學習強國、中國大學MOOC、得到、喜馬拉雅進行了對比分析，并提出了進一步的思考與建議。

[關? ? 鍵? ?詞]? 在線教育;App;界面設計;布局設計;色彩設計

[中圖分類號]? TP311? ? ? ? ? ? ? ? [文獻標志碼]? A? ? ? ? ? ? ? ?[文章編號]? 2096-0603（2021）03-0234-03

一、前言

移動互聯(lián)網(wǎng)技術催生了數(shù)以千萬計的App，僅2019年App的總下載量就超過了2040億次，推動了人們的生活、工作、學習、娛樂發(fā)生了翻天覆地的變化。與傳統(tǒng)PC桌面版的應用軟件不同，手機屏幕的尺寸更加小巧、界面大小更加多樣、人機交互方式更為多元，但首先對用戶產(chǎn)生影響的就是其風格設計。App的風格設計既要保證用戶擁有流暢的操作感受，又要滿足審美需求、內(nèi)容呈現(xiàn)需求和適應操作習慣需求。在線教育App因為要承載多樣化的學習內(nèi)容，在設計上更要降低由于內(nèi)容學習給自身帶來的心理成本，讓用戶能夠更容易產(chǎn)生認同感，進而增強學習動力。因此，App在啟動設計時，首先便應該定下整個App的設計風格，這樣可以方便設計團隊制定設計規(guī)范，減少設計風格不一致帶來的溝通成本;反應App自身特性和所面向人群特點，形成認同感;適應用戶已經(jīng)形成的感官習慣和操作習慣，降低用戶未來的使用成本。

二、App設計風格的主要類型

App設計風格是傳達給使用者的一種整體的視覺感受，主要包括色彩搭配、頁面布局和交互設計。通常，App的設計風格是通過對主要頁面進行設計而體現(xiàn)的，在一定程度上體現(xiàn)了2/8法則。App風格主要包括：扁平化風格、三維設計風格、漸變風格等[1][2][3]。具體如下：

1.扁平化風格

扁平化設計是App的主流設計風格，又可細分為極簡設計風格、Material Design和微軟產(chǎn)品的metro風格。扁平化設計風格的App，界面美觀、簡約大方、條理清晰;設計元素上抽象、極簡、符號化，能夠更加凸顯App的文字圖片等信息內(nèi)容。

2.三維設計風格

應用3D手法使App設計有關內(nèi)容更加有縱深感，增強了界面的趣味性、美觀性，能更好地反映App特性和調性，常用于游戲App界面。

3.漸變風格

漸變風格的運用范圍很廣，它可以當作背景使用，也可以在Logo或者按鈕上使用，多為大撞色的使用，能更好地營造氛圍和提升產(chǎn)品氣質，同時使得界面充滿時尚性、動感性。

下面重點就設計風格中的色彩搭配和頁面布局進行分析，關于交互設計，因為涉及內(nèi)容多，另文分析。

三、App設計風格中色彩設計應用原則

色彩設計是影響App設計風格表現(xiàn)的重要因素。合理靈活地運用色彩搭配，不僅可以更好地呈現(xiàn)視覺效果，還可以提升界面感染力、引起用戶共鳴，高效表達App的情感化設計，助力App成為銜接設計者和用戶的情感橋梁。但色彩設計也需要遵從以下原則：

1.符合App自身定位

色彩本身自帶聯(lián)想性，會自主傳達出其定勢或者習慣的特點，進而直接影響人的情緒。如紅色表示熱情和莊嚴，在黨政類App中廣泛應用，和文化母體契合;橄欖綠往往和軍隊相關，深藍色往往和科技相關。在進行色彩設計時，要結合需求分析和定位分析，明確App定位，盡量采取該定位已經(jīng)形成的關聯(lián)色，可便于用戶快速地了解App的主題定位，從潛意識開始就獲得用戶的認可。

2.適應不同受眾特點

色彩設計伴隨用戶年齡段呈現(xiàn)不同需求[4]，也伴隨男性、女性性別不同呈現(xiàn)不同偏好。色彩設計需結合用戶分析，按照二八法則和奧卡姆剃刀原理，確定主要用戶群體和其偏好，以此為基礎進行色彩選擇、搭配和設計。

3.滿足“總體協(xié)調，局部對比”

色彩設計一般包含一個主色和若干個輔色。單一顏色設計時可通過選定色相，調整純度，使色彩具有層次感。在進行兩種或兩種以上色彩搭配設計時，選擇色環(huán)相鄰的進行搭配，可以使得設計更加高效穩(wěn)定。

4.合理布局色彩

沒有條理的色彩分布會提高用戶認知和使用成本。應合理使用大、小色塊，確定色塊面積和布局。大色塊烘托主題和氣氛，小色塊用于點綴。色彩的面積比例應能促進色彩分層布局，幫助用戶建立視覺層級關系，降低用戶成本。

5.兼顧各界面內(nèi)和切換時的一致性

App往往有多個界面，多界面內(nèi)色彩設計要遵從相對統(tǒng)一。同時，App各界面切換時，要符合色彩心理學和動態(tài)色彩的視知覺特性[5]，形成更加科學的色彩配色方案，為用戶帶來更豐富的視覺感受。

四、App設計風格中頁面布局的主要方式

手機屏幕尺寸有限，使得頁面的布局方式對App視覺效果會產(chǎn)生更大的影響。頁面的布局，也是App風格設計中涉及內(nèi)容組織提煉的重要內(nèi)容，合理布局不僅能帶來好的視覺效果，而且能夠將App的內(nèi)容更加便捷高效地呈現(xiàn)給用戶。目前廣泛使用的布局方式有：

1.列表式布局

該布局使得信息可以縱向無限伸展，也便于用戶理解信息層級關系，常在信息瀑布流或者導航欄等場景中使用。但此種布局，用戶往往難以記住整體信息架構，每次操作需從頭開始，操作時間較長，容易使用戶感覺到單調和疲倦。

2.分欄標簽式布局

通常有上、下分欄，左側和上側分欄，上下分欄居多。上欄通常作為內(nèi)容分類，多為多級分類。下欄作為App整體場景、應用領域或者主題等區(qū)分。通常會形成下欄作為第一級，上欄分別作為第二、三級的多級分類體系。下欄的分類往往較少，一般不多于5個，但也不少于3個。上欄往往較多。

3.網(wǎng)格式布局

常用的有四宮格、六宮格、九宮格和十宮格，多采用圖標+文字上下或左右并排的方式顯示。進入具體功能頁路徑短，而且能夠使App的重點內(nèi)容和主要功能更加凸顯。但同時顯示信息有限，次級入口不容易顯示，功能層級多的App反而容易導致操作時間長。

4.卡片式布局

該布局可使各部分操作相對獨立，瀏覽體驗較好。但同時也無法承載過多的信息。

5.多面板式布局

可設計成多選多面板和單選多面板。多選多面板就是多個面板可以同時打開瀏覽內(nèi)容，單選多面板是只可以一次性查看一個面板上的內(nèi)容。該布局中每個面板上的內(nèi)容呈現(xiàn)有限，需要避免在面板內(nèi)重新分類顯示，否則會增強操作復雜性。

6.復合式布局

組合使用上述布局方式，但一般不超過2～3種。

五、典型的在線教育App設計風格分析

（一）學習強國界面風格

1.色彩搭配

啟動圖標為紅色背景，白色字體鏤空，圖標飽和度和明度雙高吸引用戶眼球，界面色彩搭配主要采用紅色、白色，在界面背景、課程海報、界面按鈕等元素中大量應用，紅色大色塊烘托主題和氣氛，白色主要用于內(nèi)容背景色，體現(xiàn)平臺相關內(nèi)容的嚴肅性。色彩搭配，符合整個“宣傳”主題的同時，也更易于全體黨員及全社會這個廣大的目標用戶群體接受和使用。

2.頁面布局

界面主要采用列表式、上＼下標簽式相結合的復合式布局，其中下標簽為功能導航，共計5個標簽，操作選擇速度快;上標簽為每一項主要功能的次級分類，左右滑動進行切換，非常便捷;功能標簽“百靈”“電臺”采用1級上標簽進行分類，“學習”“電視臺”采用2級上標簽進行分類;每類中間內(nèi)容均采用列表式布局，上下滑動進行選擇瀏覽，這也契合平臺上新聞要聞、政策法規(guī)解讀、會議精神等內(nèi)容需要篇幅式呈現(xiàn)的特點。

總的來說，學習強國App界面簡約大方，操作使用便捷;其色彩搭配迎合目標用戶群體，主題突出顯著;其復合式的布局方式，對內(nèi)容進行合理分類，邏輯嚴密，用戶學習使用容易掌握平臺內(nèi)容的整體架構。不足之處是，上標簽欄的“頻道”太多，達到近40個，而且部分頻道也有次級分類，這樣，用戶對某個頻道某項分類感興趣，操作步驟多容易忘記，可以在平臺添加頻道下次級分類的收藏功能，更便于用戶使用。

（二）得到、中國大學MOOC界面風格

1.色彩搭配

中國大學MOOC：整個界面色彩搭配與啟動圖標的白、藍、綠整體一致，每個界面選用色彩少，顯得清晰簡潔;在每類內(nèi)容卡片式布局中，卡片背景普遍使用漸變色，不僅賦予強烈的個性，而且和用戶之間產(chǎn)生足夠的情感共鳴。甚至借助漸變色來作為視覺引導，主功能“首頁”下“國家精品課程”界面，頂部卡片大量使用藍色，通過深淺漸變創(chuàng)造出方向性，引導用戶向特定的地方瀏覽。

得到：以橙色選擇了App主色，背景以白色作為底色，讓整個App內(nèi)容表現(xiàn)得更加清晰，內(nèi)容中使用了一些高級灰的色彩進行搭配，讓整個界面看起來更加和諧，對背景和主題色調進行融合，使App的主色調也包含了產(chǎn)品需求的意義。

2.頁面布局

中國大學MOOC、得到界面布局主要采用多面板式、上＼下標簽式相結合的復合式布局。下標簽為功能導航，上標簽為每一項主要功能的次級分類。

中國大學MOOC：功能導航標簽3個，其中“首頁”為主功能標簽，包含5個次級分類，其布局方式較為復雜，除了次級分類“精選”總體采用多面板式布局，各面板采取網(wǎng)格、卡片、列表等布局方式;其余4個次級分類，均采用頂部卡片式布局，主要對相關重點課程進行宣傳;下方為網(wǎng)格式布局，主要陳列出各項課程海報;用戶在選擇課程時，呈現(xiàn)上直觀醒目。其余兩個功能導航標簽“我的學習”“賬號”功能設置簡單，為列表式布局。

得到：功能導航標簽5個，其中“發(fā)現(xiàn)”“已購”采用上標簽布局對次級內(nèi)容進行分類，“學習計劃”為卡片式布局、“知識城邦”為多面板布局、“我的”為多面板、網(wǎng)格相結合布局方式。主功能標簽“發(fā)現(xiàn)”包含11個次級分類，每級分類布局方式大體相同，均采用卡片、網(wǎng)格、多面板的布局方式。

總的來說，兩個App界面風格接近，布局方式相同，界面選用色彩少，清晰簡潔，次級分類均采用了2～3種布局方式，每類頁面排版上較為統(tǒng)一，呈現(xiàn)整體一致的視覺效果，用戶體驗好。中國大學MOOC兩個功能導航標簽“我的學習”“賬號”功能，過于簡單，可以增加筆記、收藏、訂閱等功能，進一步提升用戶的學習體驗。得到主功能標簽“發(fā)現(xiàn)”包含次級分類太多，每類布局方式較多，顯得復雜，用戶易產(chǎn)生視覺疲勞，短時間無法在腦海中形成信息框架。

（三）喜馬拉雅界面風格

1.色彩搭配

界面色彩除了橙紅色，每個界面均采用以外，剩下顏色搭配選擇沒有固定，根據(jù)不同的內(nèi)容分類搭配相適應的顏色，比如“民間鬼故事”，其界面整體使用暗紅和黑色，呈現(xiàn)一種陰森的氛圍，突出主題;其次，每一項內(nèi)容點進去頁面背景色均采用純色，文字均為白色，顏色的選擇均與內(nèi)容相適應，如“3D大自然睡前曲”背景采用綠色等;顏色的設置契合目標群體，如主功能“首頁”下次級分類“兒童”“少兒教育”中高純度的明亮顏色使用較多，符合兒童群體喜好。

2.頁面布局

界面布局與得到較為接近，功能導航采用下標簽式布局，功能次級分類采用上標簽式布局，每類內(nèi)容總體為多面板布局，各面板又采用網(wǎng)格、卡片、列表等布局方式。亮點在部分收聽內(nèi)容通過卡片式布局較獨立、突出，點進去對相關內(nèi)容采用旋轉木馬式布局，整個頁面展示一項內(nèi)容，整體性強、聚焦度高，通過手勢滑動查看更多內(nèi)容也較為方便。

總的來說，喜馬拉雅界面美觀，色彩搭配突出主題，引發(fā)用戶情感共鳴，但非內(nèi)容頁面使用顏色過多（>3種），會分散用戶的注意力，拉低使用體驗;頁面布局，邏輯清晰，內(nèi)容整合合適，次級分類界面布局統(tǒng)一，但受內(nèi)容類別過多的客觀因素，主功能“首頁”包含次級分類過多（23類），用戶操作上會繁瑣一些，也不易形成信息框架。

六、小結

App的風格設計相對獨立，有自身的設計理論和實踐做法支撐，但同時也和App本身的產(chǎn)品設計、內(nèi)容設計、用戶分析、需求分析等密切相關、相互關聯(lián)。設計App的風格時，要充分考慮到用戶的認知成本、操作成本和傳播成本等，同時要兼顧顯式的視覺體驗層到隱式的情緒傳達層，更要考慮到目標受眾已經(jīng)形成的視覺習慣、認知習慣、使用習慣，從更大層面上講，要充分體現(xiàn)受眾群體所接受的文化母體的影響。未來的在線教育類App的風格設計，應協(xié)同產(chǎn)品設計、內(nèi)容設計和反饋設計，要能促使用戶在使用App過程中感受到情感共鳴、人文關愛和學習樂趣，提升在功能操作和教育資源學習中的愉悅感、趣味感和成就感，從教育的本質屬性出發(fā)，助力App更加便捷高效地推動人在知識儲備、認知能力和內(nèi)在深層次的改變和提升。

參考文獻：

[1]廖磊，桑振.試析手機App設計中的扁平化設計風格[J].工業(yè)設計，2016（9）：116，118.

[2]徐孟瑾，朱華.極簡主義在App界面設計中的原則探討[J].設計，2016，238（7）：32-33.

[3]王洋，呂曦.以用戶體驗為中心的不同終端下同一App界面差異化設計[J].現(xiàn)代裝飾（理論），2015（4）：114-115.

[4]譚妍珺.淺談不同年齡階段對包裝設計的需求[J].藝術品鑒，2017（10）.

[5]高玉嬌，覃京燕，陶晉.手機App交互設計中動態(tài)色彩的視知覺研究[J].包裝工程，2016，37，326（8）：134-137.

編輯 李建軍