典型在線教育App產(chǎn)品設(shè)計(jì)風(fēng)格分析與思考

劉婧 肖楓濤 陸海葉 吳燕

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

[關(guān)? ? 鍵? ?詞]? 在線教育;App;界面設(shè)計(jì);布局設(shè)計(jì);色彩設(shè)計(jì)

[中圖分類號(hào)]? TP311? ? ? ? ? ? ? ? [文獻(xiàn)標(biāo)志碼]? A? ? ? ? ? ? ? ?[文章編號(hào)]? 2096-0603（2021）03-0234-03

一、前言

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

二、App設(shè)計(jì)風(fēng)格的主要類型

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

1.扁平化風(fēng)格

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

2.三維設(shè)計(jì)風(fēng)格

應(yīng)用3D手法使App設(shè)計(jì)有關(guān)內(nèi)容更加有縱深感，增強(qiáng)了界面的趣味性、美觀性，能更好地反映App特性和調(diào)性，常用于游戲App界面。

3.漸變風(fēng)格

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

下面重點(diǎn)就設(shè)計(jì)風(fēng)格中的色彩搭配和頁(yè)面布局進(jìn)行分析，關(guān)于交互設(shè)計(jì)，因?yàn)樯婕皟?nèi)容多，另文分析。

三、App設(shè)計(jì)風(fēng)格中色彩設(shè)計(jì)應(yīng)用原則

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

1.符合App自身定位

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

2.適應(yīng)不同受眾特點(diǎn)

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

3.滿足“總體協(xié)調(diào)，局部對(duì)比”

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

4.合理布局色彩

沒有條理的色彩分布會(huì)提高用戶認(rèn)知和使用成本。應(yīng)合理使用大、小色塊，確定色塊面積和布局。大色塊烘托主題和氣氛，小色塊用于點(diǎn)綴。色彩的面積比例應(yīng)能促進(jìn)色彩分層布局，幫助用戶建立視覺層級(jí)關(guān)系，降低用戶成本。

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

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

四、App設(shè)計(jì)風(fēng)格中頁(yè)面布局的主要方式

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

1.列表式布局

該布局使得信息可以縱向無(wú)限伸展，也便于用戶理解信息層級(jí)關(guān)系，常在信息瀑布流或者導(dǎo)航欄等場(chǎng)景中使用。但此種布局，用戶往往難以記住整體信息架構(gòu)，每次操作需從頭開始，操作時(shí)間較長(zhǎng)，容易使用戶感覺到單調(diào)和疲倦。

2.分欄標(biāo)簽式布局

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

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

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

4.卡片式布局

該布局可使各部分操作相對(duì)獨(dú)立，瀏覽體驗(yàn)較好。但同時(shí)也無(wú)法承載過多的信息。

5.多面板式布局

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

6.復(fù)合式布局

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

五、典型的在線教育App設(shè)計(jì)風(fēng)格分析

（一）學(xué)習(xí)強(qiáng)國(guó)界面風(fēng)格

1.色彩搭配

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

2.頁(yè)面布局

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

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

（二）得到、中國(guó)大學(xué)MOOC界面風(fēng)格

1.色彩搭配

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

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

2.頁(yè)面布局

中國(guó)大學(xué)MOOC、得到界面布局主要采用多面板式、上＼下標(biāo)簽式相結(jié)合的復(fù)合式布局。下標(biāo)簽為功能導(dǎo)航，上標(biāo)簽為每一項(xiàng)主要功能的次級(jí)分類。

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

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

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

（三）喜馬拉雅界面風(fēng)格

1.色彩搭配

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

2.頁(yè)面布局

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

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

六、小結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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

編輯 李建軍