基于教育資源共享APP界面的可用性研究

遲瑞豐 李慧斌 湯雨墨

摘要：資源共享已經(jīng)成為當(dāng)今社會(huì)信息互通的主要方式，依托于互聯(lián)網(wǎng)，線下資源可以被有效整合。這些被整合的互聯(lián)網(wǎng)資源需要通過某種媒介方式呈現(xiàn)給廣大網(wǎng)民們，APP就是眾多媒介工具的一種。對于APP界面的良好設(shè)計(jì)，直接關(guān)乎到用戶的體驗(yàn)，因此需要設(shè)計(jì)人員從優(yōu)秀的APP中提取共性設(shè)計(jì)或者是其他APP界面能夠復(fù)用的設(shè)計(jì)來提高APP設(shè)計(jì)的品質(zhì)。

關(guān)鍵詞：資源共享；APP界面；UI設(shè)計(jì)；UE設(shè)計(jì)；交互設(shè)計(jì) 文獻(xiàn)標(biāo)識(shí)碼：A

中圖分類號(hào)：TP311 文章編號(hào)：1009-2374（2016）17-0006-03 DOI：10.13535/j.cnki.11-4406/n.2016.17.003

1 概述

教育資源是一個(gè)長期積累形成的包括教育素材、教育技能、教育知識(shí)、教育理念、教育心得等多種形式信息資源的集合。互聯(lián)網(wǎng)時(shí)代的興起，賦予了教育資源一種新的載體，如何將教育資源與網(wǎng)絡(luò)有效的結(jié)合，打造“互聯(lián)網(wǎng)+教育資源”的新型信息共享平臺(tái)，對于整個(gè)教育網(wǎng)絡(luò)有著劃時(shí)代的意義。手機(jī)APP作為資源發(fā)布共享的媒介，用戶已經(jīng)習(xí)慣使用APP作為操作某一或者多種功能的互聯(lián)網(wǎng)工具。APP的UI與UE設(shè)計(jì)直接關(guān)乎到用戶使用APP的體驗(yàn)以及操作的流暢性，對于APP界面的可用性分析也愈發(fā)重要，一個(gè)優(yōu)質(zhì)的APP界面很大程度從用戶角度出發(fā)，提供給用戶最大的操作體驗(yàn)；同樣一個(gè)好的設(shè)計(jì)也能夠被復(fù)用，如何使得APP界面具有高可用性已經(jīng)成為評價(jià)一個(gè)APP成功與否的重要標(biāo)志。

2 猿題庫APP介紹

猿題庫作為一款手機(jī)端的做題軟件，一方面覆蓋了初高中所有的知識(shí)點(diǎn)，提供給初高中學(xué)生課前課后的同步練習(xí)，使得他們能夠提前預(yù)習(xí)課前的重要知識(shí)點(diǎn)，可以在教師授課以后幫助他們完成對當(dāng)前知識(shí)點(diǎn)的鞏固；另一方面提供了歷年的中考與高考真題與解析，能夠幫助學(xué)生們了解考試中各個(gè)知識(shí)點(diǎn)的占比，能夠做到側(cè)重點(diǎn)的復(fù)習(xí)。當(dāng)然猿題庫還包含了很多統(tǒng)計(jì)分析，能夠幫助學(xué)生評估當(dāng)前的能力等。猿題庫作為一款信息資源類的共享平臺(tái)，不僅僅在功能上具有市場上同類軟件無法比擬的優(yōu)勢，在APP界面的設(shè)計(jì)上也比較新穎，APP圖標(biāo)比較醒目，提示的標(biāo)語也比較詼諧，給學(xué)生營造出輕松自由的學(xué)習(xí)氛圍。

3 APP運(yùn)行的主流平臺(tái)

目前猿題庫支持兩種流行的移動(dòng)應(yīng)用平臺(tái)，分別是Android平臺(tái)和IOS平臺(tái)。

3.1 Android平臺(tái)

Android平臺(tái)是基于Linux的開源操作系統(tǒng)，用于移動(dòng)設(shè)備以及一些大屏幕應(yīng)用，Android系統(tǒng)分四層，分別是應(yīng)用層、框架層、系統(tǒng)library、核心linux層。

應(yīng)用層主要是隨著Android版本發(fā)布，打包的Android手機(jī)端常見應(yīng)用，如通訊錄、短信、日歷等。

框架層是支撐應(yīng)用層的一系列服務(wù)，主要由內(nèi)容提供器、資源管理器、通知管理器以及活動(dòng)管理器等組成。

系統(tǒng)library主要是平臺(tái)包含的一些c/c++類庫，這些類庫供給框架層使用。

核心linux層的服務(wù)依賴于Linux內(nèi)核，如安全性、內(nèi)存管理、進(jìn)程管理、網(wǎng)絡(luò)協(xié)議棧和驅(qū)動(dòng)模型。Linux內(nèi)核也同時(shí)作為硬件和軟件棧之間的抽象層。

3.2 IOS平臺(tái)

IOS平臺(tái)是由蘋果公司研發(fā)的移動(dòng)操作系統(tǒng)，支持iphone、ipad等蘋果設(shè)備，IOS在設(shè)計(jì)上加強(qiáng)了安全性設(shè)計(jì)，為手機(jī)提供了內(nèi)置的安全機(jī)制，一方面防止惡意軟件和病毒；另一方面對用戶隱私進(jìn)行保護(hù)。此外，IOS支持多語言，可以在多國語言之間進(jìn)行切換，十分適用于商務(wù)使用。蘋果最大的亮點(diǎn)在于整個(gè)高層的應(yīng)用界面設(shè)計(jì)，給用戶流暢的操作感覺以及極高的操作

體驗(yàn)。

4 可用性分析

4.1 界面元素分析

猿題庫的界面由多種組件元素構(gòu)成，大體上可以歸納為兩種類型的元素：一種是功能性元素；另一種是頁面展示級(jí)別的元素。所謂的功能性元素主要是實(shí)現(xiàn)APP相關(guān)功能的通用組件，該類組件根據(jù)APP運(yùn)行的平臺(tái)不一致而呈現(xiàn)多樣化的特征，但是總體功能上保持一致。另外，頁面布局有樣式類別的元素，該類元素主要是構(gòu)建APP界面前端樣式，包括APP配色、圖標(biāo)按鈕、頁面UI切圖等。

4.1.1 功能型組件。猿題庫包含的功能性組件主要包括分頁組件、搜索組件、列表組件、下拉組件、選擇組件、文本框、tabpanel等，這些組件與數(shù)據(jù)組件綁定，為猿題庫APP提供功能上的便利。

分頁組件主要是APP端用于顯示多條記錄，但是單頁面無法全顯示的情況下所使用的組件。該組件通常的顯示形式，是在用戶執(zhí)行下拉操作的時(shí)候，加載下頁數(shù)據(jù)信息。

搜索組件是搜索框，用戶輸入熱門詞，關(guān)鍵詞或者歷史記錄，完成對應(yīng)的查詢操作。

列表組件一方面用于分頁時(shí)的數(shù)據(jù)列表展示；另一方面用于檢索的數(shù)據(jù)列表展示，列表組件是數(shù)據(jù)綁定的載體。

下拉組件用于展開或隱藏具體數(shù)據(jù)，下拉組件是點(diǎn)擊下拉圖標(biāo)后，展開具體的內(nèi)容，點(diǎn)擊折疊后，將具體的內(nèi)容隱藏。

選擇組件包含多選和單選，用于數(shù)據(jù)的選擇，對于多選框組件，用戶可以勾選多個(gè)感興趣的條目；對于單選框組件，用戶有且只能勾選單個(gè)條目。

文本框組件是提供給用戶輸入的區(qū)域，用戶可以在該區(qū)域輸入對應(yīng)的內(nèi)容，文本框組件主要用于登陸、注冊、搜索以及一些需要填寫表單內(nèi)容的場景。

Tabpanel是多面板組件，每個(gè)面板可以包含對應(yīng)的面板內(nèi)容，用戶可以點(diǎn)擊上面的tab子單元進(jìn)行面板間的切換。

4.1.2 展示型組件。猿題庫展示型組件包含引導(dǎo)頁、圖標(biāo)按鈕、頁面排版、APP配色。

引導(dǎo)頁面主要是剛安裝完APP后，打開APP后首先展示給用戶的APP介紹界面，用戶可以等引導(dǎo)頁輪播完畢，然后點(diǎn)擊進(jìn)入也可以直接跳過引導(dǎo)頁面。

圖標(biāo)按鈕包括操作按鈕和菜單按鈕兩大類；操作按鈕是指一些界面的功能操作入口，這些按鈕在猿題庫中設(shè)計(jì)的比較直觀簡潔，使學(xué)生用戶能夠明確具體的功能用途，此外功能交互接口也比較輕松。

菜單按鈕主要是底部的菜單欄，底部菜單欄主要由四個(gè)版塊組成，分別是練習(xí)、試卷、發(fā)現(xiàn)、我四大菜單導(dǎo)航按鈕，圖標(biāo)設(shè)計(jì)比較簡潔，但不乏靈動(dòng)。

頁面排版或者可以說是APP界面布局，猿題庫采用了上下布局、列表布局、tab布局、卡片式布局的方式。上下布局即面板分為上下兩部分，上面是猿題庫APP的廣告或者輪播圖，下部區(qū)域?yàn)橘Y源操作按鈕集合；列表式布局是指數(shù)據(jù)的排列方式按照列表的方式一條條往下排列；tab布局是指按照tab項(xiàng)的選擇進(jìn)行選擇對應(yīng)的顯示內(nèi)容，只有被選中的tab項(xiàng)才能顯示；卡片式布局是指面板上是田字格類似的排列。頁面排版會(huì)影響用戶的視覺體驗(yàn)，猿題庫APP應(yīng)用規(guī)避了傳統(tǒng)APP布局的緊湊性，數(shù)據(jù)排列的混亂性，做到一目了然，各頁面組件間比較松散，但又不失功能。

猿題庫的配色有兩種模式，分別是強(qiáng)光和弱光模式，這是充分考慮到手機(jī)屏幕對孩子視力的傷害，做出人性化的設(shè)計(jì)，能夠一定程度上緩解學(xué)生的視力疲勞。整體的APP色調(diào)以冷色調(diào)為主，分別是藍(lán)、灰、黑、白，強(qiáng)光模式下是淺藍(lán)，且高亮，試題習(xí)題背景為白色，字體為黑色；弱光模式下為暗色調(diào)的藍(lán)，文字背景為灰色，字體為白色。

從猿題庫APP的整體展示組件設(shè)計(jì)來看，一個(gè)APP界面展示組件的設(shè)計(jì)不需要太過復(fù)雜，圖標(biāo)的設(shè)計(jì)不應(yīng)與功能不適配，使得APP用戶不了解具體圖標(biāo)對應(yīng)哪些功能。APP的整體布局應(yīng)當(dāng)不要過于冗余或緊湊，切莫是功能的堆積；APP的色調(diào)或者配色應(yīng)當(dāng)結(jié)合用戶的使用習(xí)慣，或者是人機(jī)工程的角度，給用戶身心上以良好的應(yīng)用體驗(yàn)。

4.2 用戶交互分析

猿題庫的用戶角色為學(xué)生用戶，包括初中生和高中生兩種角色用戶，定位比較明確，主要是面向?qū)W生升學(xué)壓力最大的中高考。

用戶交互主要是初高中學(xué)生對于應(yīng)用的使用，學(xué)生在進(jìn)入APP后進(jìn)行注冊，并選擇是高考還是中考，如果選擇高考，對應(yīng)的操作APP界面是高中生的操作界面；如果選擇的是中考，對應(yīng)的界面為初中生界面。

4.2.1 與教材的結(jié)合練習(xí)。對于用戶進(jìn)行注冊后會(huì)讓你選擇中考年份、所在學(xué)校等，然后進(jìn)行教材內(nèi)容的學(xué)習(xí)。教材的分類包括主干學(xué)科以及副學(xué)科，在首頁下顯示的主干學(xué)科包括語文、數(shù)學(xué)、英語，通過點(diǎn)擊更多的按鈕可以設(shè)置首頁顯示的關(guān)注學(xué)科，點(diǎn)擊相應(yīng)的學(xué)科可以進(jìn)行對應(yīng)教材的課前知識(shí)點(diǎn)預(yù)習(xí)以及對于課后知識(shí)點(diǎn)的歸納，學(xué)生可以及時(shí)主動(dòng)地掌握和歸納主要知識(shí)點(diǎn)。所有的練習(xí)都有時(shí)效性，學(xué)生用戶可以在相應(yīng)的時(shí)間完成練習(xí)內(nèi)容，并和自己的學(xué)習(xí)伙伴進(jìn)行分享。

4.2.2 分析歷年試題。學(xué)生用戶可以從APP平臺(tái)獲得熱門、推薦以及一些名校對應(yīng)學(xué)科的期中期末考試試卷，APP界面以頁碼式的形式逐頁展示考試的內(nèi)容，由于手機(jī)屏幕大小的尺寸限制，每頁的內(nèi)容沒有放置過多，這樣一方面可以直觀地體現(xiàn)考題；另一方面可以減輕學(xué)生答題的壓力。當(dāng)學(xué)生答題完畢后，提交試卷，并能查看相應(yīng)的試題統(tǒng)計(jì)以及計(jì)分。

4.2.3 與猿題庫配套的APP使用。學(xué)生在做題過程中遇見疑難問題可以通過猿題庫的其他兩個(gè)輔助平臺(tái)對學(xué)生用戶進(jìn)行支持，一方面學(xué)生可以通過在線輔導(dǎo)APP，咨詢線上的一些名師，由名師給出當(dāng)前題型主要考核的知識(shí)點(diǎn)；另一方面可以通過拍照的方式通過各大搜索引擎完成對該題型的詳細(xì)解答。

4.3 APP界面設(shè)計(jì)的規(guī)范

APP界面設(shè)計(jì)必須遵從一定的規(guī)范，只有規(guī)范的界面設(shè)計(jì)，才能使APP應(yīng)用趨于產(chǎn)品化；只有產(chǎn)品化的設(shè)計(jì)，才能推動(dòng)APP應(yīng)用的市場運(yùn)作。無論對于Android端應(yīng)用還是IOS應(yīng)用都應(yīng)遵循下列界面設(shè)計(jì)規(guī)范，在這里需要指出的是猿題庫的界面設(shè)計(jì)規(guī)范適用于所有Android和IOS設(shè)備。

4.3.1 尺寸與分辨率的設(shè)計(jì)。由于現(xiàn)在移動(dòng)端設(shè)備迭代的速度很快，各式各樣的手機(jī)屏幕尺寸，導(dǎo)致沒有一個(gè)合規(guī)性的設(shè)計(jì)能夠滿足所有的手機(jī)適配，因此對于APP界面的適配性必須要根據(jù)不同的移動(dòng)設(shè)備進(jìn)行適配性的設(shè)計(jì)。這樣說的含義并不是說設(shè)計(jì)人員需要針對每個(gè)尺寸設(shè)計(jì)一套完整UI設(shè)計(jì)，一般只要做標(biāo)準(zhǔn)的Android和IOS的尺寸設(shè)計(jì)即可，如IOS的尺寸可以按640*960或640*1136來設(shè)計(jì)。

4.3.2 界面基本組成元素。一般APP應(yīng)用界面由四個(gè)元素組成，即狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容單元。

狀態(tài)欄就是APP界面首頁最頂端的顯示信號(hào)、電量、區(qū)域選擇等的區(qū)域；導(dǎo)航欄就是頁面間轉(zhuǎn)頁、APP應(yīng)用名稱等顯示的區(qū)域，主菜單欄位于屏幕的最下方，用于全局的轉(zhuǎn)頁；最后對于內(nèi)容單元就是APP中數(shù)據(jù)的裝載單元。這些區(qū)域的高度都需要根據(jù)屏幕尺寸進(jìn)行高度的規(guī)范性定義。

4.3.3 字體大小。對于Andorid來說字體為Droid sans fallback，對于IOS來說字體英文為HelveticaNeus，中文，Mac下用的是黑體-簡，Window下用的是華文黑體。

4.4 用戶體驗(yàn)分析

UE是User Experience用戶體驗(yàn)，有兩個(gè)維度：一個(gè)是流程上交互的流暢度；另一個(gè)是界面設(shè)計(jì)的流暢度，兩個(gè)方面都強(qiáng)調(diào)一個(gè)流暢度的觀點(diǎn)。對于一個(gè)用戶來說單單是一個(gè)維度考慮，過多地關(guān)注界面，反而會(huì)丟失功能操作的便捷，反之亦然。猿題庫的界面設(shè)計(jì)從首頁到各個(gè)子頁面界面布局很簡單，功能點(diǎn)突出，首頁主要是針對兩個(gè)角色用戶的主干學(xué)科的練習(xí)選擇，然后從首頁進(jìn)入對應(yīng)的學(xué)期訓(xùn)練，對于菜單欄上的試卷按鈕，使得首頁跳轉(zhuǎn)到歷年真題以及名校試卷等界面等，從整個(gè)APP界面的流轉(zhuǎn)上來分析是十分流暢的。此外各個(gè)主要的APP功能點(diǎn)也是很有條理性的進(jìn)行羅列，功能點(diǎn)不是太冗余，各個(gè)功能或者子功能的入口單一，沒有出現(xiàn)多入口出口的現(xiàn)象，使得功能的操作性簡易化。

5 結(jié)語

猿題庫從APP上線至今，用戶基數(shù)迅速增長，也完成多輪投資，較市面上其他信息分享類APP應(yīng)用來說，無論從APP界面設(shè)計(jì)、用戶操作體驗(yàn)，還是從整體的資源共享，無一不從用戶的角度出發(fā)，切實(shí)地為莘莘學(xué)子提供了課前課后測試、歷年資源分析、隨堂筆記等，使得學(xué)生用戶能夠在一個(gè)比較寬松的互聯(lián)網(wǎng)媒介上完成對知識(shí)的學(xué)習(xí)和鞏固，此外結(jié)合當(dāng)下時(shí)興的大數(shù)據(jù)分析，為廣大學(xué)生用戶提供知識(shí)點(diǎn)的全方位剖析。

對于日后的APP界面分析應(yīng)當(dāng)遵從設(shè)計(jì)從簡、設(shè)計(jì)與功能一致以及基于用戶使用體驗(yàn)的三大設(shè)計(jì)原則，在整體設(shè)計(jì)風(fēng)格上應(yīng)當(dāng)簡便化，業(yè)務(wù)操作應(yīng)當(dāng)形成有效閉環(huán)，功能操作應(yīng)當(dāng)避免繁瑣化；在設(shè)計(jì)與功能的權(quán)衡上，好的設(shè)計(jì)應(yīng)當(dāng)以功能為基礎(chǔ)，畢竟一個(gè)APP應(yīng)用如果過于形式化設(shè)計(jì)，就無法切實(shí)地留住用戶，但是設(shè)計(jì)也必須為功能服務(wù)，兩者相輔相成，畢竟應(yīng)用太功能化，沒有良好的設(shè)計(jì)，也是會(huì)使得用戶流失；任何外觀設(shè)計(jì)和功能設(shè)計(jì)的出發(fā)點(diǎn)都應(yīng)該以用戶為中心，設(shè)計(jì)人員應(yīng)該從用戶的角度分析APP應(yīng)用的使用場景、業(yè)務(wù)流程以及用戶在使用過程中的應(yīng)用體驗(yàn)，這是對用戶來說最吸引他們的所在。

從猿題庫的APP界面設(shè)計(jì)來看，設(shè)計(jì)人員可以利用工程化、模式化的思想，將該APP界面中值得借鑒的部分或者組件進(jìn)行良好的定義，以使得在今后的設(shè)計(jì)過程中進(jìn)行高效復(fù)用，減少APP界面設(shè)計(jì)的重復(fù)勞動(dòng)，加快設(shè)計(jì)的效率和質(zhì)量。

參考文獻(xiàn)

[1] JeffJohnson.認(rèn)知與設(shè)計(jì)：理解UI設(shè)計(jì)準(zhǔn)則[M].北京：人民郵電出版社，2011.

[2] 比爾·莫格里奇.關(guān)鍵設(shè)計(jì)報(bào)告―改變過去影響未來的交互設(shè)計(jì)法則[M].北京：中信出版社，2011.

[3] 史蒂文·赫勒，埃莉諾·佩蒂特.三十四位頂尖設(shè)計(jì)師的思考術(shù)[M].北京：中信出版社，2011.

[4] 貍雅人.Photoshop智能移動(dòng)終端APP界面設(shè)計(jì)[M].北京：人民郵電出版社，2013.

（責(zé)任編輯：黃銀芳）