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