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