長(zhǎng)春工業(yè)大學(xué) 藝術(shù)設(shè)計(jì)學(xué)院 劉香漁 居全偉
摘要：研究極簡(jiǎn)主義在高校慕課APP界面設(shè)計(jì)中的運(yùn)用。文章結(jié)合案例闡述極簡(jiǎn)主義在高校慕課APP界面設(shè)計(jì)中的運(yùn)用：界面布局、界面中的“隱藏”信息、簡(jiǎn)約的圖標(biāo)設(shè)計(jì)中的運(yùn)用。結(jié)合調(diào)查問(wèn)卷結(jié)果分析，總結(jié)出極簡(jiǎn)主義的設(shè)計(jì)風(fēng)格符合高校學(xué)生的心理訴求，用戶使用體驗(yàn)在APP界面設(shè)計(jì)中具有重要作用。
關(guān)鍵詞：高校慕課 界面設(shè)計(jì) 極簡(jiǎn)主義
中圖分類號(hào)：J05 文獻(xiàn)標(biāo)識(shí)碼：A
文章編號(hào)：1003-0069(2017)11-0128-02
Abstrac t：Study on the application of minimalism in the design of the APP interface of mooc. This paper discusses the application of minimalism in the design of the APP interface of the mooc in universities: interface layout, "hidden" information in the interface, and the application of simple icon design. Based on the analysis of questionnaire results, the author summarizes that the design style of minimalism accords with the psychological appeal of college students, and the user experience plays an important role in the design of the APP interface.
Keywords：Moos The APP interface design Minimalism
引言
“慕課”打破了傳統(tǒng)的高等教育模式，“慕課”利用交互式技術(shù)，使得全球數(shù)百甚至數(shù)千萬(wàn)的學(xué)生，能夠通過(guò)互聯(lián)網(wǎng)免費(fèi)觀看到來(lái)自世界各地的、知名院校的、一流教師的課程及演講。“極簡(jiǎn)主義”能使用戶在較短的時(shí)間快讀瀏覽界面中的相關(guān)信息，節(jié)約了用戶的瀏覽及接受信息的時(shí)間，給用戶帶來(lái)便利。
一、極簡(jiǎn)主義在高校慕課APP界面設(shè)計(jì)中的運(yùn)用
（一）界面布局的極簡(jiǎn)設(shè)計(jì)
界面布局顧名思義就是對(duì)頁(yè)面的文字、圖形或表格進(jìn)行排布、設(shè)計(jì)。優(yōu)秀的布局，需要對(duì)頁(yè)面信息進(jìn)行完整的考慮。既要考慮用戶需求、用戶行為，也要考慮信息發(fā)布者的目的、目標(biāo)。
“移動(dòng)圖書館”慕課APP的主界面布局采用宮格式布局，將主界面中展示的各個(gè)信息功能進(jìn)行整齊排列，每個(gè)信息功能展示在相應(yīng)的宮格中，整個(gè)界面簡(jiǎn)約直觀。“中國(guó)大學(xué)MOOC”的主界面布局采用的是宮格布局與矩陣布局相結(jié)合的布局形式，分學(xué)科按鈕版塊采用的是宮格布局，“推薦課程”、“精彩討論”等版塊布局采用的是矩陣式布局，矩陣式布局是將各個(gè)信息用矩形圖片展示，這些矩形圖片以相對(duì)較規(guī)則的形式進(jìn)行排列。
宮格布局和矩陣布局是高校慕課APP界面設(shè)計(jì)中的常用布局，這兩種布局形式讓界面顯得整潔，界面布局本身并沒有成為突出的元素，這樣的設(shè)計(jì)能夠減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)，將最主要的信息直觀地在主界面中展現(xiàn)。
（二）主界面中的“隱藏”信息
打開慕課APP軟件應(yīng)用的主界面之后，通常情況下主界面中的各個(gè)版塊的信息內(nèi)容是靜止，由于手機(jī)屏幕的尺寸大小制約，不可能將APP應(yīng)用軟件中的所有功能、信息完全在主界面中展現(xiàn)，一些次要功能、信息就會(huì)被“隱藏”起來(lái)，想要瀏覽或是應(yīng)用這些“隱藏”起來(lái)的功能、信息，是需要用戶進(jìn)行一些手勢(shì)動(dòng)作的操作，也就是交互設(shè)計(jì)，這種設(shè)計(jì)是對(duì)有限的主界面空間的一種延伸和拓展。將這些功能、信息的隱藏，也是對(duì)主界面空間設(shè)計(jì)的一種簡(jiǎn)化。
1.“切換隱藏”的運(yùn)用
“移動(dòng)圖書館”、“中國(guó)大學(xué)MOOC”兩款高校慕課APP的主界面，這兩款高校慕課APP應(yīng)用軟件主界面的最上方版塊就是運(yùn)用了“切換隱藏”，“切換隱藏”是將幾個(gè)平行信息在同一個(gè)信息板塊中循環(huán)滾動(dòng)顯示，使用戶可以不用任何手勢(shì)操作在同一個(gè)版塊位置瀏覽到更多的隱藏信息。“移動(dòng)圖書館”的“切換隱藏”版塊的右下角有四個(gè)圓點(diǎn)，相對(duì)應(yīng)的是四個(gè)界面信息，當(dāng)切換到相應(yīng)界面信息的時(shí)候，對(duì)應(yīng)的圓點(diǎn)著色，而其他圓點(diǎn)為白色。該板塊的交互操作通常為自動(dòng)與手動(dòng)相結(jié)合的操作，當(dāng)用戶沒有看清切換界面的信息時(shí)，便可以手動(dòng)滑動(dòng)切換這些信息。“中國(guó)大學(xué)MOOC”的“切換隱藏”版塊與“移動(dòng)圖書館”的“切換隱藏”版塊的切換原則類似，不同點(diǎn)是信息界面切換相對(duì)應(yīng)的不是圓點(diǎn)，而是短橫線。
“切換隱藏”在慕課APP界面中的應(yīng)用能夠在有限的空間中展示更多的信息內(nèi)容，自動(dòng)切換也省去了用戶繁瑣的操作。
2.“抽屜隱藏”的運(yùn)用
“抽屜隱藏”所隱藏起來(lái)的信息功能通常是次級(jí)信息功能，這種“隱藏”的形式類似于推拉抽屜的動(dòng)作模擬，用戶可以通過(guò)點(diǎn)擊抽屜隱藏按鈕或者滑動(dòng)屏幕來(lái)打開或隱藏“抽屜隱藏”中的信息功能。在“移動(dòng)圖書館”高校慕課APP主界面的左上角，人物頭像即是“抽屜隱藏”界面的開關(guān)按鈕，點(diǎn)擊人物頭像按鈕時(shí)，主界面向右滑動(dòng)，“隱藏”在“抽屜”中的“我的收藏”等次級(jí)信息顯示出來(lái)，再次點(diǎn)擊人物頭像，“抽屜”即被關(guān)閉，相關(guān)信息再次隱藏。另外一種操作是直接向右滑動(dòng)主界面，隱藏的“抽屜”顯示出來(lái)，向左滑動(dòng)主界面，“抽屜”關(guān)閉被隱藏。
“抽屜隱藏”的設(shè)計(jì)常被用在導(dǎo)航信息布局中，該設(shè)計(jì)不僅節(jié)省了界面空間，而且不影響用戶對(duì)于界面正文信息的閱讀和瀏覽，可以說(shuō)“隱藏”在“抽屜”中的功能信息是對(duì)主界面內(nèi)容的一種延伸。
3.“按鈕隱藏”的運(yùn)用
“按鈕隱藏”所隱藏起來(lái)的是主界面中的一些未能完全展現(xiàn)的信息，通過(guò)點(diǎn)擊“按鈕”打開全新的頁(yè)面，頁(yè)面中會(huì)顯示相對(duì)較全面的相關(guān)信息。在“中國(guó)大學(xué)MOOC”的主界面中，在中間部分版塊為按學(xué)科分類的課程按鈕，有考研、經(jīng)濟(jì)管理、外語(yǔ)等不同的學(xué)科按鈕，在該版塊的右下角的按鈕為“更多”，點(diǎn)擊“更多”按鈕，即打開了顯示全部按學(xué)科分類課程的界面。再例如“中國(guó)大學(xué)MOOC”主界面中的“合作高校”版塊內(nèi)容，由于主界面空間有限，只能顯示部分合作高校，該版塊的右上角的按鈕為“查看全部”，點(diǎn)擊該按鈕即是打開了顯示145所合作高校的界面。
“按鈕隱藏”的設(shè)計(jì)同樣節(jié)省了主界面空間，將更廣闊、更全面的信息“隱藏起來(lái)”通過(guò)點(diǎn)擊按鈕來(lái)顯示，“隱藏”在“按鈕”中的功能信息是對(duì)主界面內(nèi)容的一種拓展。
（三）簡(jiǎn)約的圖標(biāo)能提高識(shí)別度
1. APP應(yīng)用圖標(biāo)的扁平化設(shè)計(jì)
扁平化設(shè)計(jì)是一種極簡(jiǎn)的視覺表達(dá)方式，隨著移動(dòng)智能手機(jī)APP應(yīng)用圖標(biāo)設(shè)計(jì)風(fēng)格的演變歷程，扁平化設(shè)計(jì)常常與擬物化設(shè)計(jì)形成對(duì)立面。扁平化設(shè)計(jì)在過(guò)去的幾年當(dāng)中經(jīng)歷了積極而快速的發(fā)展，扁平化設(shè)計(jì)已經(jīng)應(yīng)用到越來(lái)越多的平面設(shè)計(jì)領(lǐng)域。現(xiàn)如今，扁平化設(shè)計(jì)已經(jīng)應(yīng)用到的網(wǎng)頁(yè)和UI設(shè)計(jì)當(dāng)中，甚至已經(jīng)成為了主流設(shè)計(jì)方向。扁平化設(shè)計(jì)在慕課APP圖標(biāo)設(shè)計(jì)中的應(yīng)用，更加提高了圖標(biāo)相對(duì)應(yīng)的功能的辨識(shí)度。
2. 形象的圖形能夠塑造辨識(shí)度
高校慕課APP應(yīng)用圖標(biāo)的設(shè)計(jì)首先是要與智能手機(jī)系統(tǒng)的風(fēng)格相統(tǒng)一，其圖標(biāo)的圖案設(shè)計(jì)是簡(jiǎn)約明了的，運(yùn)用簡(jiǎn)單的圖形及明快的色彩來(lái)提高該APP的獨(dú)有特點(diǎn)，用戶在即將要對(duì)某一高校慕課APP進(jìn)行應(yīng)用時(shí)，首先會(huì)觀看圖標(biāo)的形狀及圖標(biāo)下方的APP名稱，并且有意識(shí)地將圖標(biāo)及文字進(jìn)行關(guān)聯(lián)，而在第二次及以后的使用中，可以忽略文字直接從簡(jiǎn)潔形象的圖標(biāo)來(lái)辨識(shí)該款慕課APP應(yīng)用。
為我國(guó)目前高校學(xué)生使用率較高的三款高校慕課APP應(yīng)用軟件，首先是“移動(dòng)圖書館”，其圖標(biāo)為紅色背景、白色圖案，圖像的主體是拖著尾巴的五角星。“移動(dòng)圖書館”是北京超星集團(tuán)旗下的一款高校教育APP應(yīng)用，如果使用者對(duì)該款A(yù)PP的創(chuàng)作來(lái)源有所了解的話，就會(huì)形象地從圖標(biāo)中的主體圖案“拖著尾巴的五角星”中的“五角星”與集團(tuán)名稱“超星”進(jìn)行相關(guān)聯(lián)，從而辨識(shí)該圖標(biāo)。即使不了解該款A(yù)PP的開發(fā)來(lái)源，從圖標(biāo)中“拖著尾巴”的五角星，能夠與該圖標(biāo)下方文字中的“移動(dòng)”進(jìn)行相關(guān)聯(lián)，來(lái)識(shí)別該圖標(biāo)。
第二款A(yù)PP應(yīng)用是“樹下”，其圖標(biāo)為白色的背景，左上角為大小交錯(cuò)的半圓形組成的綠色圖形，其圖形的形狀是“樹蔭”的形象表達(dá)，在“樹蔭”下方是七棵小樹，排列方式是中間高，兩側(cè)低，顏色是紅色、黃色、藍(lán)色、綠色四種顏色的交錯(cuò)排列，這七棵小樹的是“學(xué)習(xí)者”的形象表達(dá)，每一名“學(xué)習(xí)者”都是一棵在“樹蔭”下茁壯成長(zhǎng)的“小樹”，該款高校慕課APP應(yīng)用軟件的圖標(biāo)的圖案設(shè)計(jì)與其應(yīng)用軟件的名稱“樹下”有較強(qiáng)的呼應(yīng)。
第三款A(yù)PP應(yīng)用為“中國(guó)大學(xué)MOOC”，是由網(wǎng)易公司與教育部愛課程網(wǎng)攜手推出的在線教育平臺(tái)，該款A(yù)PP應(yīng)用軟件匯集了眾多名校課程資源，用戶可以在線進(jìn)行課程的學(xué)習(xí)，也可以在線進(jìn)行考試測(cè)試。其圖標(biāo)同樣用白色作為背景，圖標(biāo)中間由綠色及藍(lán)色的兩個(gè)相交的菱形組成，菱形的上下邊緣是向上彎曲的曲線，整體外觀形象是一本翻開的書本，兩個(gè)菱形的相交使用戶聯(lián)想到學(xué)科的交叉，而“中國(guó)大學(xué)MOOC”正是一款課程的種類較全面，覆蓋面廣的應(yīng)用軟件。
在APP界面中導(dǎo)航欄的每一個(gè)按鈕，通常都會(huì)對(duì)應(yīng)一個(gè)相關(guān)的功能，與APP應(yīng)用軟件圖標(biāo)類似，導(dǎo)航欄中的按鈕的圖標(biāo)設(shè)計(jì)的簡(jiǎn)約處理，同樣能夠便于用戶的認(rèn)知與識(shí)別圖標(biāo)。相似的APP應(yīng)用軟件，在其導(dǎo)航欄中，通常會(huì)有幾個(gè)相似的功能按鈕，例如“我的”或是“用戶”盡管功能的名稱有些差異，但他們的功能是相似的，因此在相似功能按鈕的圖標(biāo)設(shè)計(jì)也是相似的。分別為學(xué)堂在線、中國(guó)大學(xué)MOOC、慕課網(wǎng)，三款慕課APP應(yīng)用軟件的首頁(yè)導(dǎo)航欄，從圖片對(duì)比中可以看到，學(xué)堂在線中的“用戶”功能、中國(guó)大學(xué)MOOC中的“我的學(xué)習(xí)”功能，以及慕課網(wǎng)中的“我的”功能是相似功能，他們的圖標(biāo)設(shè)計(jì)都運(yùn)用線條勾勒人物頭像的極簡(jiǎn)形象，盡管每款軟件的設(shè)計(jì)風(fēng)格有所區(qū)別，但這一功能相對(duì)應(yīng)的圖標(biāo)形象基本是一致的。當(dāng)用戶想要應(yīng)用該功能的時(shí)候，腦海中就會(huì)出現(xiàn)人物頭像的形象，形成一種條件反射，正應(yīng)為是運(yùn)用線條的極簡(jiǎn)設(shè)計(jì)，使用戶能夠用極短的時(shí)間對(duì)功能圖標(biāo)進(jìn)行認(rèn)知及快速記憶，再加上其功能位置都是在最右側(cè)，能夠有助于用戶的認(rèn)知習(xí)慣與意識(shí)形態(tài)的養(yǎng)成，從而提高了軟件功能的使用效率，也節(jié)省了用戶的使用時(shí)間。
二、慕課APP的極簡(jiǎn)主義設(shè)計(jì)符合高校學(xué)生的心理訴求
為了能夠更加準(zhǔn)確地了解高校學(xué)生使用慕課APP的使用情況，邀請(qǐng)112名高校學(xué)生填寫調(diào)查問(wèn)卷，進(jìn)行調(diào)研。高校慕課APP使用情況越來(lái)越普及，64%的學(xué)生認(rèn)為應(yīng)該以課堂式教學(xué)為主，網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)教學(xué)輔助，18%的學(xué)生認(rèn)為兩種教學(xué)模式各占一半。慕課學(xué)習(xí)已經(jīng)成為高校學(xué)生學(xué)習(xí)的一種必不可少的學(xué)習(xí)方式，盡管有些課程是學(xué)校要求的必修慕課課程，但在調(diào)查問(wèn)卷中高校學(xué)生對(duì)建設(shè)高校慕課學(xué)習(xí)平臺(tái)建設(shè)是否有必要的統(tǒng)計(jì)顯示，58%的學(xué)生認(rèn)為是有必要的。
從高校慕課APP界面設(shè)計(jì)方面的調(diào)查來(lái)看，學(xué)生對(duì)logo及界面設(shè)計(jì)的美觀與否的關(guān)注程度已經(jīng)超過(guò)了對(duì)學(xué)習(xí)軟件的課程內(nèi)容級(jí)師資團(tuán)隊(duì)的關(guān)注程度。高校學(xué)生對(duì)慕課APP界面的設(shè)計(jì)風(fēng)格要求是要簡(jiǎn)約清晰。
在高校學(xué)生對(duì)界面設(shè)計(jì)關(guān)心的方面調(diào)查中，對(duì)界面的操作是否簡(jiǎn)便、快捷，界面的信息傳遞是否清晰、明確這兩個(gè)選項(xiàng)的比重較高，除此之外，高校學(xué)生對(duì)使用界面的心情是否愉悅也占較高比重。通過(guò)調(diào)查問(wèn)卷的結(jié)果分析來(lái)看，高校學(xué)生對(duì)高校慕課APP界面極簡(jiǎn)設(shè)計(jì)的要求，不僅僅是界面外觀的極簡(jiǎn)設(shè)計(jì)，還包括操作的便捷性，高校學(xué)生使用慕課APP應(yīng)用軟件進(jìn)行學(xué)習(xí)時(shí)，簡(jiǎn)潔直觀的操作界面是能夠提高學(xué)生的操作效率的，教育學(xué)習(xí)APP軟件與娛樂(lè)、購(gòu)物、聊天等其他APP軟件不同，教育學(xué)習(xí)APP軟件更應(yīng)該去除界面中的繁瑣設(shè)計(jì)及復(fù)雜的操作，高校慕課APP界面設(shè)計(jì)應(yīng)該簡(jiǎn)約直觀，將用戶更多的時(shí)間和精力用在學(xué)習(xí)知識(shí)方面，而不是把時(shí)間和精力浪費(fèi)在信息量較多的界面信息瀏覽以及繁瑣的操作上，以簡(jiǎn)單精致、人性化的設(shè)計(jì)強(qiáng)化情感體驗(yàn)，提高用戶的學(xué)習(xí)效率。
結(jié)論
極簡(jiǎn)主義在高校慕課APP界面設(shè)計(jì)中的運(yùn)用，它不僅是簡(jiǎn)單地將界面外觀設(shè)計(jì)得簡(jiǎn)潔直觀，而是通過(guò)應(yīng)用軟件的性質(zhì)定位、用戶群體分析、用戶操作習(xí)慣、用戶使用感受等諸多方面的綜合考慮。交互設(shè)計(jì)在高校慕課APP界面設(shè)計(jì)中具有重要作用，其目的就是為了提高用戶使用應(yīng)用軟件的體驗(yàn)。而用戶使用體驗(yàn)對(duì)于高校慕課APP應(yīng)用軟件的重要性，則決定了應(yīng)用軟件的開發(fā)設(shè)計(jì)者在設(shè)計(jì)規(guī)劃產(chǎn)品時(shí)，必然要重視交互設(shè)計(jì)。
參考文獻(xiàn)
[1] 張穎.移動(dòng)UI完美設(shè)計(jì)法則[M].北京：機(jī)械工業(yè)出版社，2015:62-65
[2] 朱曉陽(yáng)，朱華，歐永和. 極簡(jiǎn)主義在手機(jī)APP啟動(dòng)圖標(biāo)設(shè)計(jì)中的運(yùn)用[J].包裝工程，2014（8）:14-17.
[3] 羅婧瑄. 極簡(jiǎn)主義在扁平化風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用與研究[D].西北師范大學(xué).2015:28-29.
[4] 杜鶴民. 基于極簡(jiǎn)主義的泛扁平化設(shè)計(jì)研究[J].包裝工程，2017（04）143-145.
[5] 徐孟瑾,朱華.極簡(jiǎn)主義在APP界面設(shè)計(jì)中的原則探討[J].設(shè)計(jì)，2016（07）:30-31.
[6] 張?zhí)焖籼m川. 論極簡(jiǎn)主義風(fēng)格平面設(shè)計(jì)的表現(xiàn)手法[J].設(shè)計(jì)，2015（19）：78-79.
[7] 辛欣，李娜.北京工業(yè)大學(xué)耿丹學(xué)院校園APP交互及界面設(shè)計(jì)[J].設(shè)計(jì)，2015（03）：12-13.
[8] 王卓. App界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法研究[J].藝術(shù)科技，2016（08）：75.