遲瑞豐 李慧斌 湯雨墨
摘要:資源共享已經成為當今社會信息互通的主要方式,依托于互聯網,線下資源可以被有效整合。這些被整合的互聯網資源需要通過某種媒介方式呈現給廣大網民們,APP就是眾多媒介工具的一種。對于APP界面的良好設計,直接關乎到用戶的體驗,因此需要設計人員從優秀的APP中提取共性設計或者是其他APP界面能夠復用的設計來提高APP設計的品質。
關鍵詞:資源共享;APP界面;UI設計;UE設計;交互設計 文獻標識碼:A
中圖分類號:TP311 文章編號:1009-2374(2016)17-0006-03 DOI:10.13535/j.cnki.11-4406/n.2016.17.003
1 概述
教育資源是一個長期積累形成的包括教育素材、教育技能、教育知識、教育理念、教育心得等多種形式信息資源的集合。互聯網時代的興起,賦予了教育資源一種新的載體,如何將教育資源與網絡有效的結合,打造“互聯網+教育資源”的新型信息共享平臺,對于整個教育網絡有著劃時代的意義。手機APP作為資源發布共享的媒介,用戶已經習慣使用APP作為操作某一或者多種功能的互聯網工具。APP的UI與UE設計直接關乎到用戶使用APP的體驗以及操作的流暢性,對于APP界面的可用性分析也愈發重要,一個優質的APP界面很大程度從用戶角度出發,提供給用戶最大的操作體驗;同樣一個好的設計也能夠被復用,如何使得APP界面具有高可用性已經成為評價一個APP成功與否的重要標志。
2 猿題庫APP介紹
猿題庫作為一款手機端的做題軟件,一方面覆蓋了初高中所有的知識點,提供給初高中學生課前課后的同步練習,使得他們能夠提前預習課前的重要知識點,可以在教師授課以后幫助他們完成對當前知識點的鞏固;另一方面提供了歷年的中考與高考真題與解析,能夠幫助學生們了解考試中各個知識點的占比,能夠做到側重點的復習。當然猿題庫還包含了很多統計分析,能夠幫助學生評估當前的能力等。猿題庫作為一款信息資源類的共享平臺,不僅僅在功能上具有市場上同類軟件無法比擬的優勢,在APP界面的設計上也比較新穎,APP圖標比較醒目,提示的標語也比較詼諧,給學生營造出輕松自由的學習氛圍。
3 APP運行的主流平臺
目前猿題庫支持兩種流行的移動應用平臺,分別是Android平臺和IOS平臺。
3.1 Android平臺
Android平臺是基于Linux的開源操作系統,用于移動設備以及一些大屏幕應用,Android系統分四層,分別是應用層、框架層、系統library、核心linux層。
應用層主要是隨著Android版本發布,打包的Android手機端常見應用,如通訊錄、短信、日歷等。
框架層是支撐應用層的一系列服務,主要由內容提供器、資源管理器、通知管理器以及活動管理器等組成。
系統library主要是平臺包含的一些c/c++類庫,這些類庫供給框架層使用。
核心linux層的服務依賴于Linux內核,如安全性、內存管理、進程管理、網絡協議棧和驅動模型。Linux內核也同時作為硬件和軟件棧之間的抽象層。
3.2 IOS平臺
IOS平臺是由蘋果公司研發的移動操作系統,支持iphone、ipad等蘋果設備,IOS在設計上加強了安全性設計,為手機提供了內置的安全機制,一方面防止惡意軟件和病毒;另一方面對用戶隱私進行保護。此外,IOS支持多語言,可以在多國語言之間進行切換,十分適用于商務使用。蘋果最大的亮點在于整個高層的應用界面設計,給用戶流暢的操作感覺以及極高的操作
體驗。
4 可用性分析
4.1 界面元素分析
猿題庫的界面由多種組件元素構成,大體上可以歸納為兩種類型的元素:一種是功能性元素;另一種是頁面展示級別的元素。所謂的功能性元素主要是實現APP相關功能的通用組件,該類組件根據APP運行的平臺不一致而呈現多樣化的特征,但是總體功能上保持一致。另外,頁面布局有樣式類別的元素,該類元素主要是構建APP界面前端樣式,包括APP配色、圖標按鈕、頁面UI切圖等。
4.1.1 功能型組件。猿題庫包含的功能性組件主要包括分頁組件、搜索組件、列表組件、下拉組件、選擇組件、文本框、tabpanel等,這些組件與數據組件綁定,為猿題庫APP提供功能上的便利。
分頁組件主要是APP端用于顯示多條記錄,但是單頁面無法全顯示的情況下所使用的組件。該組件通常的顯示形式,是在用戶執行下拉操作的時候,加載下頁數據信息。
搜索組件是搜索框,用戶輸入熱門詞,關鍵詞或者歷史記錄,完成對應的查詢操作。
列表組件一方面用于分頁時的數據列表展示;另一方面用于檢索的數據列表展示,列表組件是數據綁定的載體。
下拉組件用于展開或隱藏具體數據,下拉組件是點擊下拉圖標后,展開具體的內容,點擊折疊后,將具體的內容隱藏。
選擇組件包含多選和單選,用于數據的選擇,對于多選框組件,用戶可以勾選多個感興趣的條目;對于單選框組件,用戶有且只能勾選單個條目。
文本框組件是提供給用戶輸入的區域,用戶可以在該區域輸入對應的內容,文本框組件主要用于登陸、注冊、搜索以及一些需要填寫表單內容的場景。
Tabpanel是多面板組件,每個面板可以包含對應的面板內容,用戶可以點擊上面的tab子單元進行面板間的切換。
4.1.2 展示型組件。猿題庫展示型組件包含引導頁、圖標按鈕、頁面排版、APP配色。
引導頁面主要是剛安裝完APP后,打開APP后首先展示給用戶的APP介紹界面,用戶可以等引導頁輪播完畢,然后點擊進入也可以直接跳過引導頁面。
圖標按鈕包括操作按鈕和菜單按鈕兩大類;操作按鈕是指一些界面的功能操作入口,這些按鈕在猿題庫中設計的比較直觀簡潔,使學生用戶能夠明確具體的功能用途,此外功能交互接口也比較輕松。
菜單按鈕主要是底部的菜單欄,底部菜單欄主要由四個版塊組成,分別是練習、試卷、發現、我四大菜單導航按鈕,圖標設計比較簡潔,但不乏靈動。
頁面排版或者可以說是APP界面布局,猿題庫采用了上下布局、列表布局、tab布局、卡片式布局的方式。上下布局即面板分為上下兩部分,上面是猿題庫APP的廣告或者輪播圖,下部區域為資源操作按鈕集合;列表式布局是指數據的排列方式按照列表的方式一條條往下排列;tab布局是指按照tab項的選擇進行選擇對應的顯示內容,只有被選中的tab項才能顯示;卡片式布局是指面板上是田字格類似的排列。頁面排版會影響用戶的視覺體驗,猿題庫APP應用規避了傳統APP布局的緊湊性,數據排列的混亂性,做到一目了然,各頁面組件間比較松散,但又不失功能。
猿題庫的配色有兩種模式,分別是強光和弱光模式,這是充分考慮到手機屏幕對孩子視力的傷害,做出人性化的設計,能夠一定程度上緩解學生的視力疲勞。整體的APP色調以冷色調為主,分別是藍、灰、黑、白,強光模式下是淺藍,且高亮,試題習題背景為白色,字體為黑色;弱光模式下為暗色調的藍,文字背景為灰色,字體為白色。
從猿題庫APP的整體展示組件設計來看,一個APP界面展示組件的設計不需要太過復雜,圖標的設計不應與功能不適配,使得APP用戶不了解具體圖標對應哪些功能。APP的整體布局應當不要過于冗余或緊湊,切莫是功能的堆積;APP的色調或者配色應當結合用戶的使用習慣,或者是人機工程的角度,給用戶身心上以良好的應用體驗。
4.2 用戶交互分析
猿題庫的用戶角色為學生用戶,包括初中生和高中生兩種角色用戶,定位比較明確,主要是面向學生升學壓力最大的中高考。
用戶交互主要是初高中學生對于應用的使用,學生在進入APP后進行注冊,并選擇是高考還是中考,如果選擇高考,對應的操作APP界面是高中生的操作界面;如果選擇的是中考,對應的界面為初中生界面。
4.2.1 與教材的結合練習。對于用戶進行注冊后會讓你選擇中考年份、所在學校等,然后進行教材內容的學習。教材的分類包括主干學科以及副學科,在首頁下顯示的主干學科包括語文、數學、英語,通過點擊更多的按鈕可以設置首頁顯示的關注學科,點擊相應的學科可以進行對應教材的課前知識點預習以及對于課后知識點的歸納,學生可以及時主動地掌握和歸納主要知識點。所有的練習都有時效性,學生用戶可以在相應的時間完成練習內容,并和自己的學習伙伴進行分享。
4.2.2 分析歷年試題。學生用戶可以從APP平臺獲得熱門、推薦以及一些名校對應學科的期中期末考試試卷,APP界面以頁碼式的形式逐頁展示考試的內容,由于手機屏幕大小的尺寸限制,每頁的內容沒有放置過多,這樣一方面可以直觀地體現考題;另一方面可以減輕學生答題的壓力。當學生答題完畢后,提交試卷,并能查看相應的試題統計以及計分。
4.2.3 與猿題庫配套的APP使用。學生在做題過程中遇見疑難問題可以通過猿題庫的其他兩個輔助平臺對學生用戶進行支持,一方面學生可以通過在線輔導APP,咨詢線上的一些名師,由名師給出當前題型主要考核的知識點;另一方面可以通過拍照的方式通過各大搜索引擎完成對該題型的詳細解答。
4.3 APP界面設計的規范
APP界面設計必須遵從一定的規范,只有規范的界面設計,才能使APP應用趨于產品化;只有產品化的設計,才能推動APP應用的市場運作。無論對于Android端應用還是IOS應用都應遵循下列界面設計規范,在這里需要指出的是猿題庫的界面設計規范適用于所有Android和IOS設備。
4.3.1 尺寸與分辨率的設計。由于現在移動端設備迭代的速度很快,各式各樣的手機屏幕尺寸,導致沒有一個合規性的設計能夠滿足所有的手機適配,因此對于APP界面的適配性必須要根據不同的移動設備進行適配性的設計。這樣說的含義并不是說設計人員需要針對每個尺寸設計一套完整UI設計,一般只要做標準的Android和IOS的尺寸設計即可,如IOS的尺寸可以按640*960或640*1136來設計。
4.3.2 界面基本組成元素。一般APP應用界面由四個元素組成,即狀態欄、導航欄、主菜單欄、內容單元。
狀態欄就是APP界面首頁最頂端的顯示信號、電量、區域選擇等的區域;導航欄就是頁面間轉頁、APP應用名稱等顯示的區域,主菜單欄位于屏幕的最下方,用于全局的轉頁;最后對于內容單元就是APP中數據的裝載單元。這些區域的高度都需要根據屏幕尺寸進行高度的規范性定義。
4.3.3 字體大小。對于Andorid來說字體為Droid sans fallback,對于IOS來說字體英文為HelveticaNeus,中文,Mac下用的是黑體-簡,Window下用的是華文黑體。
4.4 用戶體驗分析
UE是User Experience用戶體驗,有兩個維度:一個是流程上交互的流暢度;另一個是界面設計的流暢度,兩個方面都強調一個流暢度的觀點。對于一個用戶來說單單是一個維度考慮,過多地關注界面,反而會丟失功能操作的便捷,反之亦然。猿題庫的界面設計從首頁到各個子頁面界面布局很簡單,功能點突出,首頁主要是針對兩個角色用戶的主干學科的練習選擇,然后從首頁進入對應的學期訓練,對于菜單欄上的試卷按鈕,使得首頁跳轉到歷年真題以及名校試卷等界面等,從整個APP界面的流轉上來分析是十分流暢的。此外各個主要的APP功能點也是很有條理性的進行羅列,功能點不是太冗余,各個功能或者子功能的入口單一,沒有出現多入口出口的現象,使得功能的操作性簡易化。
5 結語
猿題庫從APP上線至今,用戶基數迅速增長,也完成多輪投資,較市面上其他信息分享類APP應用來說,無論從APP界面設計、用戶操作體驗,還是從整體的資源共享,無一不從用戶的角度出發,切實地為莘莘學子提供了課前課后測試、歷年資源分析、隨堂筆記等,使得學生用戶能夠在一個比較寬松的互聯網媒介上完成對知識的學習和鞏固,此外結合當下時興的大數據分析,為廣大學生用戶提供知識點的全方位剖析。
對于日后的APP界面分析應當遵從設計從簡、設計與功能一致以及基于用戶使用體驗的三大設計原則,在整體設計風格上應當簡便化,業務操作應當形成有效閉環,功能操作應當避免繁瑣化;在設計與功能的權衡上,好的設計應當以功能為基礎,畢竟一個APP應用如果過于形式化設計,就無法切實地留住用戶,但是設計也必須為功能服務,兩者相輔相成,畢竟應用太功能化,沒有良好的設計,也是會使得用戶流失;任何外觀設計和功能設計的出發點都應該以用戶為中心,設計人員應該從用戶的角度分析APP應用的使用場景、業務流程以及用戶在使用過程中的應用體驗,這是對用戶來說最吸引他們的所在。
從猿題庫的APP界面設計來看,設計人員可以利用工程化、模式化的思想,將該APP界面中值得借鑒的部分或者組件進行良好的定義,以使得在今后的設計過程中進行高效復用,減少APP界面設計的重復勞動,加快設計的效率和質量。
參考文獻
[1] JeffJohnson.認知與設計:理解UI設計準則[M].北京:人民郵電出版社,2011.
[2] 比爾·莫格里奇.關鍵設計報告―改變過去影響未來的交互設計法則[M].北京:中信出版社,2011.
[3] 史蒂文·赫勒,埃莉諾·佩蒂特.三十四位頂尖設計師的思考術[M].北京:中信出版社,2011.
[4] 貍雅人.Photoshop智能移動終端APP界面設計[M].北京:人民郵電出版社,2013.
(責任編輯:黃銀芳)