教育APP的界面分析設(shè)計

頁共23頁1緒論1.1研究背景于2021年2月發(fā)表的《第47次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截至到2020年度，中國網(wǎng)民數(shù)量達(dá)近10億，其中95%為使用手機上網(wǎng)的人群。這也說明移動互聯(lián)網(wǎng)的發(fā)展伴隨著智能應(yīng)用的變革而蓬勃發(fā)展。APP(APP是application的縮寫，是智能手機的應(yīng)用）在網(wǎng)絡(luò)上如日中天；而“互聯(lián)網(wǎng)+”，更是改變了許多產(chǎn)業(yè)的發(fā)展模式。教育部在2015年5月出臺的《關(guān)于加強高等學(xué)校在線開放課程建設(shè)應(yīng)用與管理意見》指出，《高校在線開放課程》（簡稱MOOC）建議高校積極構(gòu)建在線開放教學(xué)體系和教學(xué)平臺，加大公開開放教學(xué)建設(shè)的實施力度，開發(fā)“MOOC”學(xué)生和在線教學(xué)應(yīng)用。當(dāng)前，通過APPStore、各類應(yīng)用商城能搜索到各類教育類APP，盡管數(shù)量很多，但是也能發(fā)現(xiàn)存在的問題如低效、同質(zhì)化設(shè)計、內(nèi)容界面設(shè)計復(fù)雜等。因此，本文基于用戶體驗對網(wǎng)絡(luò)教學(xué)APP進行了深入探討。1.2研究的目的和意義(1)充分利用學(xué)校資源，對網(wǎng)絡(luò)教學(xué)的發(fā)展起到一定的輔助作用，提高了高校的教學(xué)水平。(2)為在線教育提供更豐富、專業(yè)的在線平臺，提升全民教育質(zhì)量。(3)為教育APP的設(shè)計、特別是高校教育APP的設(shè)計、開發(fā)、實踐提供更具專業(yè)的參考。1.3研究現(xiàn)狀移動互聯(lián)網(wǎng)時代促使移動端APP數(shù)量和內(nèi)容不斷創(chuàng)新。特別是在文化創(chuàng)新上，APP設(shè)計者們更加重視了app獨特性的設(shè)計，對用戶的使用感愈發(fā)重視。《UI演進—移動設(shè)備人機交互界面設(shè)計》這本書中，作者從產(chǎn)品化的角度討論了手機的交互概念設(shè)計和產(chǎn)品特點，并討論了其設(shè)計的可行性和實現(xiàn)方法。文章認(rèn)為可視化是一種讓用戶更直接地看到產(chǎn)品的媒介，是一種有意義的交流過程。文章結(jié)合實例對手機界面進行了初步的分析、研究、數(shù)據(jù)整理和評價。目前我國相關(guān)專業(yè)的畢業(yè)論文大多集中在應(yīng)用程序的界面設(shè)計上，如《手機攝影軟件界面設(shè)計研究》和《手機用戶注意力設(shè)計》等書籍中，均是從用戶的角度對移動終端用戶的交互產(chǎn)生了影響進行研究。另一部分是研究主要是集中于界面中的特定的視覺元素。以《中國畫元素在用戶界面創(chuàng)新設(shè)計中的應(yīng)用研究》為例，介紹了如何運用中國畫這一視覺元素?；诜枌W(xué)和設(shè)計心理學(xué)的界面圖標(biāo)視覺設(shè)計與應(yīng)用研究，從設(shè)計、功能和情感三個方面闡述圖標(biāo)的設(shè)計、功能和情感，探討圖標(biāo)設(shè)計的設(shè)計原則，探討圖標(biāo)的發(fā)展方向設(shè)計。1.4研究方法(1)文獻檢索法在前期的準(zhǔn)備工作主要是通過在知網(wǎng)、百度搜索等平臺去閱讀手機界面設(shè)計、用戶體驗、高校在線教育APP等相關(guān)書籍和文獻資料，學(xué)習(xí)相關(guān)的基礎(chǔ)知識，對所要解決的問題有一個較為深入的認(rèn)識；(2)分析歸納法本文的中期研究主要是利用手機下載和使用大量高校網(wǎng)絡(luò)教學(xué)APP，搜集市面上各種高校網(wǎng)絡(luò)教學(xué)APP的界面設(shè)計特點，并對其界面的優(yōu)勢和缺陷進行了分析，并指出了由于視覺效果差而造成的用戶體驗降低的原因。(3)案例分析法本文結(jié)合具體案例，綜合對比分析在教育APP界面各模塊的設(shè)計和功能模塊等，結(jié)合視覺層級關(guān)系等相關(guān)所學(xué)，指出在教育APP設(shè)計上的相關(guān)建議。1.5展示平臺技術(shù)介紹（1）AxureRPAxureRP是一個可以滿足設(shè)計師們需求，設(shè)計功能和界面可以快速的創(chuàng)建應(yīng)用軟件的線框圖、流程圖、原型和規(guī)格說明文檔的專業(yè)快速原型設(shè)計工具，它可以支持很多人在同一時間一起工作和版本控制管理（2）HTMLHTML5中用一個新的標(biāo)簽＜canvas＞的定義來進行圖像的處理，＜canvas＞標(biāo)簽提供了一個2DProgrammaticAPI可以以較低的存儲代價來處理圖像。用API不僅可以繪制圖像，且可以做圖像分析和處理。＜canvas＞只是作為HTML頁面上的一個元素，如果需要對圖像進行操作就必須要借助canvas的API。（3）CSSCSS（CascadingStyleSheets，層疊樣式表），它是表現(xiàn)HTML或XML等文件樣式的語言。可以用CSS，來定做、修改優(yōu)化網(wǎng)頁的顯示效果，還可以產(chǎn)生濾鏡、圖像淡化、淡入淡出等漸變，而且可以完成簡單的交互設(shè)計，用來提提高前端的樣式美觀。CSS與結(jié)構(gòu)碼HTML／XHTML這兩個的結(jié)合，可以實現(xiàn)“結(jié)構(gòu)碼”和“表現(xiàn)碼”的分離，減小了維護站點外觀的工作難度，并且因為簡化了HTML文檔，從而縮短了瀏覽器的加載時間。（4）JavaScriptJavaScript最初用途是圖標(biāo)檢驗，現(xiàn)在發(fā)展成一種功能齊全的編程語言，可以處理復(fù)雜的交互與計算，擁有匿名、閉包函數(shù)甚至某類計算機程序的編寫，可以同瀏覽器幾乎所有部分完成互動設(shè)計。一般會將JavaScript與ECMAScript認(rèn)為相同，但JavaScript其實要更加的豐富，除了包含ECMAScript、DOM外，還有BOM（瀏覽器對象模型），利用BOM能對瀏覽器的窗口和框架進行操作。JavaScript是一種動態(tài)類型、弱類型、基于原型的語言，所以它不擁有空間命名、引入模塊、私有成員、編譯執(zhí)行等特征，因此在開發(fā)時必須注意使用。2教育APP設(shè)計概述2.1在線教育APP的發(fā)展概況在線教育可以說是互聯(lián)網(wǎng)時代才產(chǎn)生的，有學(xué)者也稱之為“在線教育”、“E-Learning”或“在線學(xué)習(xí)”，由此可見在線教育是一種統(tǒng)稱。在線教育最早是在1999年的美國在線學(xué)習(xí)會議上提出的，是在網(wǎng)絡(luò)電子技術(shù)的支持和實現(xiàn)下，通過網(wǎng)絡(luò)、廣播電視等電子媒體進行的學(xué)習(xí)和教學(xué)。在美國2000年教育部頒發(fā)《教育技術(shù)白皮書》提出“在線教育是一種以互聯(lián)網(wǎng)為媒介的教學(xué)方式”，它以互聯(lián)網(wǎng)為基礎(chǔ)，利用互聯(lián)網(wǎng)開展相關(guān)的教學(xué)活動。在線教育相比于線下教育，最大的特點在于學(xué)習(xí)的自主性、教學(xué)形式的多樣化且智能化、學(xué)習(xí)資源豐富。在線教育能充分利用互聯(lián)網(wǎng)資源，和在線應(yīng)用設(shè)計的智能性，為學(xué)生用戶提供更為個性化和豐富的資源。同時，在線教學(xué)不再是傳統(tǒng)的“被動”教學(xué)方式。它要求用戶具有更強的自我意識，能夠隨時隨地完成教學(xué)任務(wù)。師生、學(xué)生與學(xué)生之間可以在互聯(lián)網(wǎng)上進行深入的互動和交流，利用大量的信息進行教學(xué)反饋。2.2在線教育類APP的發(fā)展現(xiàn)狀1999年以來，我國在高等職業(yè)教育中大力發(fā)展網(wǎng)絡(luò)教育。但由于多媒體輔助教學(xué)技術(shù)水平低、成本高，尚未實現(xiàn)規(guī)?；l(fā)展。在互聯(lián)網(wǎng)信息化和國外在線教學(xué)發(fā)展的帶動下，我國在線教學(xué)發(fā)展迅速，技術(shù)日趨成熟。2002年，麻省理工學(xué)院為公眾推出了一系列免費的在線教育項目。隨著在線育資源的快速發(fā)展，人們可以在互聯(lián)網(wǎng)上使用更多優(yōu)質(zhì)的教育信息?？珊箤W(xué)院、coursera和EDX等互聯(lián)網(wǎng)教育公司正在崛起。在2010年后，在線教育亦或者在線輔導(dǎo)呈現(xiàn)井噴式發(fā)展。特別是在我國中小學(xué)培訓(xùn)APP上，因為課堂教育的改革，很多家長為了讓自己的小孩在學(xué)生上能更具有競爭力，往往通過線上教育的方式安排各種培訓(xùn)。正是因為各類家長需求的增加，在線教育的內(nèi)容設(shè)計和渠道愈發(fā)多樣化。如以培訓(xùn)為主的新東方、中工教育、華圖教育等，或傳統(tǒng)高校北大、清華等國內(nèi)學(xué)校，均成為了在線教育的主要來源。在不同的行業(yè)中，我們均可以找到優(yōu)質(zhì)的針對性在線教學(xué)資源。其中，職業(yè)院校和外語專業(yè)是在線教學(xué)領(lǐng)域規(guī)模最大的兩個領(lǐng)域。隨著在線教育的快速發(fā)展，許多教育APP進入了大眾的視野。用戶可以根據(jù)自己的需求選擇不同的APP。2.3在線教育類APP存在的問題在線教學(xué)應(yīng)用APP數(shù)量龐大，但仍存在很大的問題。例如，很多同類型APP應(yīng)用內(nèi)容同質(zhì)化強，獨立設(shè)計APP產(chǎn)量低；綜合類應(yīng)用APP雖然教學(xué)資源豐富，但綜合教育內(nèi)容來看與課堂教育內(nèi)容無法完全整合，缺乏傳統(tǒng)教師課堂備述的針對性。在傳統(tǒng)教學(xué)中，學(xué)生的上課時間均被學(xué)校合理的安排，教師會針對每堂課設(shè)計教學(xué)內(nèi)容。但是在線教學(xué)則以學(xué)生的主觀能動性和積極性為主。目前，大多數(shù)在線教學(xué)應(yīng)用提供的學(xué)習(xí)資料較長，缺乏全面的教學(xué)計劃。大量長期、多視頻的學(xué)習(xí)項目，降低了學(xué)習(xí)積極性，進而降低了教學(xué)質(zhì)量。然而，在目前的網(wǎng)絡(luò)教學(xué)應(yīng)用中，用戶可以在有限的時間內(nèi)完成自己的學(xué)習(xí)，但用戶的學(xué)習(xí)頻率、進度都比較慢。這是因為很多在線教育企業(yè)內(nèi)容生產(chǎn)能力低，對用戶需求缺乏了解，缺乏教學(xué)實踐。在線教學(xué)應(yīng)用APP的界面設(shè)計是與用戶交流的產(chǎn)物，是用戶對應(yīng)用的第一印象的主要來源，會影響用戶對應(yīng)用的理解和使用。一個優(yōu)秀的應(yīng)用頁面會吸收用戶的視線和提升好感度。簡潔、高效、有核心內(nèi)容的頁面能讓用戶快速獲取信息，特別是符合用戶使用習(xí)慣的頁面設(shè)計，能很好地引導(dǎo)用戶進行使用，并快速了解相關(guān)功能，從而提高產(chǎn)品的品牌知名度。手機用戶產(chǎn)品的關(guān)鍵是設(shè)計好的界面和功能組件的合理展示。但在線教學(xué)應(yīng)用APP的界面設(shè)計存在識別率低、視覺層次不規(guī)則、操作體驗差等問題。一些在線教學(xué)應(yīng)用APP缺乏趣味性和交互性，用戶體驗單調(diào)。另外，用戶體驗慢，用戶接受度差。因此，下載的在線教學(xué)應(yīng)用APP不會被學(xué)生所經(jīng)常使用。2.4高校在線教育APP界面設(shè)計的復(fù)雜性和重要性隨著互聯(lián)網(wǎng)的發(fā)展、智能手機的普及和人們的學(xué)習(xí)需求增加，各種在線教學(xué)軟件已經(jīng)通過手機這一媒介滲透到人們的日常生活中。清晰的應(yīng)用界面能讓使用者快速了解到該頁面想要傳遞的信息，也能讓用戶了解到該頁面內(nèi)容與自己的需求的匹配度。手機用戶產(chǎn)品的關(guān)鍵是設(shè)計好的界面，并將功能組件的合理展示。高校網(wǎng)絡(luò)教學(xué)應(yīng)用APP的界面設(shè)計與網(wǎng)絡(luò)教學(xué)應(yīng)用完全不同。既要考慮學(xué)校教學(xué)設(shè)計初衷，又要符合學(xué)校的實際形象，促進高校在線教學(xué)的應(yīng)用，提高學(xué)生的粘性。由于在線教學(xué)App內(nèi)容豐富、交互性強、趣味性好，需要引入不同頁面之間的過渡動態(tài)效果、聲音特效、界面設(shè)計元素等內(nèi)容，這對高校在線教學(xué)App界面的整體設(shè)計提出了更高的要求。.特別是不同高校在教學(xué)內(nèi)容設(shè)計上有其獨有的教學(xué)設(shè)計，而且在面對社會對高校學(xué)生所具備的素養(yǎng)標(biāo)準(zhǔn)下，高校教學(xué)APP設(shè)計在內(nèi)容豐富程度上更需要進行精心設(shè)計。由于其教學(xué)信息的復(fù)雜性，也決定了界面設(shè)計中面臨著諸多困難。高校在線教育APP不僅要合理清晰地呈現(xiàn)信息層次和視覺層次，還要考慮視覺美感和流暢度。2.5基于用戶體驗的高校在線APP設(shè)計流程以上五種用戶體驗本質(zhì)上是產(chǎn)品開發(fā)和設(shè)計，相互獨立。本文結(jié)合相關(guān)所學(xué)知識以及學(xué)者們研究，認(rèn)為高校在線教育APP的設(shè)計流程如下：項目溝通、需求研究與功能改造、交互設(shè)計、可用性測試、迭代測試。項目溝通，即APP設(shè)計者、產(chǎn)品經(jīng)理、運營人員等需要通過溝通，了解各自的任務(wù)，同時反饋出高校在線教育APP設(shè)計的進度，確認(rèn)項目立項。只有不斷的溝通，才會讓需求更加明確，推動設(shè)計進度，也能更符合使用者的習(xí)慣。需求研究與功能改造，即在設(shè)計過程中，要知道每個版塊功能的目的，以及功能設(shè)計邏輯。為了更好的視線需求和功能，也需要APP方運營者通過訪談、問卷調(diào)查等方式，了解產(chǎn)品目標(biāo)用戶的使用習(xí)慣、需求、偏好等。最后對用戶需求進行篩選，最終得到高校在線教學(xué)應(yīng)用需要設(shè)計主要功能。在交互設(shè)計中生產(chǎn)線的設(shè)計是從用戶角色出發(fā)進行功能設(shè)計、信息框架的構(gòu)建來完成的。一般而言畫一個簡單的草圖，以便以后修改。進行計算機仿真設(shè)計，得到較為精確的樣機，可用于高校在線教育APP初步實驗中。在視覺設(shè)計上，產(chǎn)品與用戶交互更加直接，既能展示產(chǎn)品的主要信息，又能為用戶提供更好的視覺體驗。UI作為品牌傳播的主要手段，在APP的設(shè)計上應(yīng)繼承UI設(shè)計的主色彩和設(shè)計元素。視覺設(shè)計的基本原則必須符合用戶的使用習(xí)慣和心理特點，才會更容易被用戶接受?？尚行詼y試主要是對設(shè)計功能進行測試。主要是從用戶角度出發(fā)，確認(rèn)APP各個頁面的使用體驗感、功能之間切換的邏輯、功能開發(fā)的必要性等?？尚行詼y試的目標(biāo)主要是對APP進行上線優(yōu)化，盡量切合用戶需求，提示APP的滿意度。迭代設(shè)計就是不斷的改進在APP開發(fā)和使用過程中發(fā)現(xiàn)的問題，可以最大限度地提高在線教學(xué)軟件的質(zhì)量。3教育APP實例分析3.1評價標(biāo)準(zhǔn)制定內(nèi)容在一系列實驗中，A.侗威奧證實了“信息以視覺和聽覺兩種方式存儲”。關(guān)于如何選擇信息，美國著名傳播專家施拉姆曾指出“選擇的可能性=獎勵的安全性/支付的金額”他指出，增加金額的支付或降低成本可以增加選擇特定信息傳播的可能性?；诖死碚摚疚恼J(rèn)為在高校在線教育APP的設(shè)計上，也要選擇設(shè)計免費教學(xué)和付費教學(xué)。當(dāng)然，這兩種的需求設(shè)計都需要符合用戶。如果一味追求付費，會丟失基礎(chǔ)用戶群體；如果全是免費內(nèi)容，內(nèi)容的精細(xì)程度上會沒有競爭力。這就需要對付費和免費的選擇上進行考量。為了在APP上有效傳遞教學(xué)信息，降低教職工的能耗，需要對APP上的各種元素進行適當(dāng)?shù)恼{(diào)整，使其符合學(xué)生的學(xué)習(xí)習(xí)慣，便于學(xué)生接受和理解。在討論多媒體教學(xué)的教育功能時，LK提出了利用多媒體技術(shù)進行人機交互的方法，包括文本、背景和圖標(biāo)。在教學(xué)應(yīng)用中，文本主要起到傳遞教育信息的作用，文本設(shè)計的正確與否對教學(xué)應(yīng)用的質(zhì)量有重要影響。為了傳達(dá)教育信息，我們需要充分考慮文本組合效果的大小和空白，以防止學(xué)生只關(guān)注文本的作用而忽視文本所傳達(dá)的信息。教學(xué)應(yīng)用的界面環(huán)境雖然不能直接將教學(xué)內(nèi)容傳遞給學(xué)生，但是環(huán)境的設(shè)置也會對學(xué)生的教學(xué)效果產(chǎn)生一定的影響。如果用戶在應(yīng)用程序中設(shè)置的顏色過多或顏色不當(dāng)，會導(dǎo)致學(xué)生視覺疲勞，影響他們對教學(xué)信息的理解。教育應(yīng)用程序是一種教育軟件，是一種教育學(xué)生的手段。界面設(shè)置應(yīng)考慮學(xué)生的思維習(xí)慣、視覺習(xí)慣和使用習(xí)慣。熟悉的事物更容易吸引他們的注意力。人的視覺區(qū)域應(yīng)該是視覺從左到右、從上到下，并且容易區(qū)分明亮的顏色。人的精力是有限的，連續(xù)高強度的學(xué)習(xí)會給學(xué)生帶來身心疲勞。這種行為會直接影響學(xué)生對教育APP展示內(nèi)容的學(xué)習(xí)和吸收。一旦違反這種行為，就會增加學(xué)生的外在認(rèn)知負(fù)荷，導(dǎo)致學(xué)生無法專注于學(xué)習(xí)信息，從而降低學(xué)習(xí)效果。教育應(yīng)用在視覺習(xí)慣、思維習(xí)慣和使用習(xí)慣的設(shè)計上不斷交互，達(dá)到最佳的交流效果。本文以人機工程學(xué)原理為第一指標(biāo)，視覺效果和操作人機工程學(xué)為第一指標(biāo)，以視覺效果區(qū)域、內(nèi)容分類、文字、圖標(biāo)、背景和操作方式為主要內(nèi)容，通過對比、重復(fù)、逼近，分組等方法，建立了適合教學(xué)應(yīng)用的界面設(shè)計評價標(biāo)準(zhǔn)，并給出了具體內(nèi)容。見表3-1，并闡述了標(biāo)準(zhǔn)的具體內(nèi)容。其中評價標(biāo)準(zhǔn)中各項指標(biāo)的具體內(nèi)容為:一級指標(biāo)二級指標(biāo)思維工效最佳視覺區(qū)內(nèi)容分類圖標(biāo)位置圖標(biāo)樣式視覺工效文字大小文字間留白背景樣式背景顏色搭配操作工效操作模式3.1.1符合“最佳視覺區(qū)”的標(biāo)準(zhǔn)尼爾森在2006年進行的眼動追蹤實驗查看了232位用戶的觀察數(shù)據(jù)。結(jié)果表明，他們在不同網(wǎng)站和作業(yè)上的閱讀路徑呈“F”形。第一步是水平掃描，F(xiàn)字的頂部，然后垂直向下。但向下的閱讀內(nèi)容比第一頁少得多。然后是閱讀中間、進而閱讀下一頁。測試表明，起初用戶的閱讀是瀏覽整個頁面，沒有突出的動作；其次，最重要的信息應(yīng)該包含在前兩段中；第三，當(dāng)垂直閱讀最左邊的信息時，用戶會注意到標(biāo)題、段落等重要內(nèi)容。因此，設(shè)計者應(yīng)根據(jù)用戶的閱讀習(xí)慣設(shè)計教學(xué)應(yīng)用的界面，將主要信息放入用戶的可視區(qū)域，即F字形。3.1.2內(nèi)容分類明顯的標(biāo)準(zhǔn)本文整理的內(nèi)容分級評價，是將相似內(nèi)容進行分類后，不同類型的表現(xiàn)形式是否要突出顯著。根據(jù)視覺感知的注意力理論，設(shè)計頁面可以通過大小和顏色的對比來吸引用戶的注意力。頁面內(nèi)容按不同顏色的色塊、不用顏色的線條進行區(qū)域的分割以作為內(nèi)容的分類。在這種情況下，不同區(qū)域的顏色可以是互補的或色彩對比的，這樣分類的重點更加明顯，從而吸引學(xué)生的注意力。3.1.3圖標(biāo)位置和樣式一致的標(biāo)準(zhǔn)一些實驗表明，在人機交互中，感知物體和搜索物體的效果與熟悉度有關(guān)。因此，在用戶界面上使用的圖標(biāo)和按鈕應(yīng)盡可能與用戶自身的體驗一致。即在教學(xué)軟件設(shè)計中，具有相同功能的圖標(biāo)或按鈕可以保持不變。當(dāng)用戶根據(jù)自己的經(jīng)驗使用圖標(biāo)或按鈕時，會讓學(xué)生在短時間內(nèi)回憶起類似的動作以便減少他們的反應(yīng)時間。3.1.4文字大小適中的標(biāo)準(zhǔn)字體大小取決于它們的表示方式。如果文本以磅為單位，則其真實大小為1/72英寸。如果用多媒體來表示文字，那么文字是用像素來表示的，因為文字的顯示是由像素組成的。對于傳統(tǒng)的文字顯示方式，推薦的字體大小為4-5磅。這個數(shù)字在教學(xué)應(yīng)用中也很常見。一般來說，重點是8-14磅，其他5-8磅。由于不同多媒體的屏幕像素密度不同，使用不同的多媒體形式會導(dǎo)致文字大小發(fā)生變化，增加了頁面上字體呈現(xiàn)的層次感。本文采用基于數(shù)值表示的方法將文本量轉(zhuǎn)換為數(shù)值尺度。例如，字體大小是圖標(biāo)或按鍵字體大小的2~3倍，圖標(biāo)或按鍵字體大小的1~5倍。3.1.5文字間有留白的標(biāo)準(zhǔn)在界面設(shè)計中，人們往往追求簡潔，摒棄大量重疊的視覺元素，用簡潔的方法清晰地傳達(dá)視覺信息。文本是教學(xué)應(yīng)用中最重要的表達(dá)形式。因此，在教學(xué)應(yīng)用中，用戶可以通過閱讀大量的文本來學(xué)習(xí)，文本的選擇將在他們的學(xué)習(xí)中發(fā)揮重要作用。文字布局過于緊湊，容易造成用戶視覺疲勞。因此，文章之間應(yīng)該有空格。3.1.6背景樣式一致的標(biāo)準(zhǔn)教學(xué)應(yīng)用需要使用大面積的背景色。當(dāng)用戶學(xué)習(xí)某個教學(xué)應(yīng)用程序時，他們將面對所有的網(wǎng)頁，每個網(wǎng)頁上都有大量的內(nèi)容展示。當(dāng)所有網(wǎng)頁都有不同的背景時，人們會產(chǎn)生錯覺。因此，對于教育應(yīng)用來說，背景顏色和樣式應(yīng)該同色系。3.1.7背景顏色適中的標(biāo)準(zhǔn)在教學(xué)應(yīng)用的界面中，色彩的協(xié)調(diào)和搭配是最重要的。一般來說，一個網(wǎng)頁應(yīng)該使用三種以上的顏色，選擇一種作為主色，并使用適當(dāng)?shù)念伾M合來體現(xiàn)教學(xué)應(yīng)用的設(shè)計。顏色的搭配要注意整體的和諧與突出。簡而言之，網(wǎng)頁的顏色組合應(yīng)該讓用戶感到舒適。此外，文本和背景之間的顏色匹配是關(guān)鍵。根據(jù)視覺感知理論，人們對刺激的感官反應(yīng)是有限的。當(dāng)使用者超過可接受的限度時，他會減少對身體的刺激，從而達(dá)到協(xié)調(diào)和平衡。因此，背景色彩選擇上嘗試使用互補色，并在文本和背景之間使用相反的顏色。3.1.8操作模式設(shè)置的標(biāo)準(zhǔn)使用教學(xué)應(yīng)用時，用戶可以手動操作各種組件，但活動空間有限，不能無限擴展。隨著手機變得越來越大，用戶使用手機變得越來越困難。因此，在教學(xué)APP的操作中，我們需要考慮學(xué)生的使用情況，比如單手、左掌、橫屏、豎屏等等。在安卓市場、豌豆應(yīng)用下載平臺中，筆者選擇了教育、教學(xué)進行關(guān)鍵詞搜索，篩選出30個教學(xué)應(yīng)用程序，并簡要說明其功能和分類。詳見表3-2。根據(jù)教育應(yīng)用的服務(wù)對象，應(yīng)用可以分為三類。第一類主要是學(xué)生，包括中小學(xué)生和大學(xué)生。二是注重技術(shù)培訓(xùn)。表3-2:教育APP介紹3.2.數(shù)據(jù)分析(1)樣本數(shù)據(jù)分析根據(jù)作者提出的評價標(biāo)準(zhǔn)，本文從最佳視覺區(qū)域、內(nèi)容分類、圖標(biāo)風(fēng)格、圖標(biāo)位置、文字大小、文字空白、背景風(fēng)格、背景顏色和操作方式九個方面進行了詳細(xì)研究，結(jié)果見表3-3(教育APP界面設(shè)計評價的內(nèi)容分析中，1代表符合，0代表不符合):表3-3：樣本數(shù)據(jù)分析教學(xué)應(yīng)用設(shè)計方面，教學(xué)應(yīng)用25款，占比83.7%；其中，教學(xué)應(yīng)用軟件25款，占比88.3%；其中應(yīng)用13個，占比74.3%，說明教學(xué)應(yīng)用的設(shè)計幾乎沒有考慮學(xué)生的思維和體驗。在教學(xué)應(yīng)用界面中，相同位置的圖標(biāo)有14個，占比60.7%。本文根據(jù)用戶需求，將30款教學(xué)應(yīng)用分為兒童學(xué)習(xí)、技能學(xué)習(xí)和學(xué)生學(xué)習(xí)三類，以全面了解各類教學(xué)應(yīng)用的發(fā)展現(xiàn)狀?！缎“帻垺贰ⅰ敦愅蕖吠{、《咪咕星寶》、《兔兔》童謠、愛奇藝動漫之家》6首以上童謠；技能培訓(xùn)APP有4本如駕考詞典、駕校一次過（保證版）、普通話測試和輪換測試；學(xué)生教育應(yīng)用包括作業(yè)指導(dǎo)、猿搜索題目、粉筆和考試、網(wǎng)易有道詞典、阿凡達(dá)、日常練習(xí)、金山詞霸、百度翻譯、分詞、作業(yè)、互動動作、扇貝口語、流利的英語、優(yōu)化網(wǎng)絡(luò)、中文大學(xué)MOOC、新概念英語、猿題庫等。(2)兒童學(xué)習(xí)類教育APP數(shù)據(jù)分析6款兒童學(xué)習(xí)類教育APP分析結(jié)果見表3-4表3-4:兒童學(xué)習(xí)類教育APP分析三款適合孩子學(xué)習(xí)類APP，占據(jù)了50%的比例。也就是說，一半以上的童學(xué)習(xí)類APP在設(shè)計時都會注意到使用者的視覺喜好，而在界面上有兩款兒童學(xué)習(xí)APP，占據(jù)了33%的比例，也就是說一多半的孩子學(xué)習(xí)APP并沒有區(qū)分出具體的類別。(3)技能培訓(xùn)類教育APP數(shù)據(jù)分析4款技能培訓(xùn)類教育APP分析結(jié)果見表3-5表3-5:技能培訓(xùn)類教育APP分析技能培訓(xùn)應(yīng)用中，只有背景顏色適中的比例為100%。在圖標(biāo)和留白上，均占比50%，就是說大部分技能培訓(xùn)APP都會有相同的圖案；中等字體的技能培訓(xùn)類APP也有3款，占總數(shù)的75.0%。但是在單手和左手操作模式上，比例為0%，可見在行為習(xí)慣的使用觀察上，單手和左手操作被忽略了。20款學(xué)生學(xué)習(xí)類教育APP分析結(jié)果見表3-6表3-6：學(xué)生學(xué)習(xí)類教育APP分析18款學(xué)生的教學(xué)APP在優(yōu)化視覺區(qū)上使用了內(nèi)容分類設(shè)計，占據(jù)了90.0%的比重，這意味著，大部分的學(xué)生在使用這些APP的時候，都會注意到用戶的思考方式。綜上，對30款A(yù)PP的數(shù)據(jù)對比分析可以發(fā)現(xiàn)，它們在接口的設(shè)計上有相似之處，但也有各自的缺陷。4教育APP界面設(shè)計4.1界面布局4.1.1界面布局的常見類型交互設(shè)計會對界面設(shè)計產(chǎn)生一定的影響。所以在界面設(shè)計之前，通常會有一個整體的設(shè)計方案（各個部分的位置和整體的內(nèi)容），但更多細(xì)節(jié)的補充，需要設(shè)計師自己去勾畫創(chuàng)作。高校在線教學(xué)應(yīng)用APP的界面布局主要集中在屏幕、文字和圖像三個方面。合理的界面設(shè)計可以提高用戶的易用性和美觀性。在智能手機應(yīng)用的界面布局中，要特別注意各種尺寸顯示屏下的設(shè)計，以保證各類智能手機上顯示的均勻性。目前在線教學(xué)應(yīng)用的界面設(shè)計中，常見的界面布局如下：(1)列表式圖4-1列表式界面在課堂演示中，經(jīng)常使用清單布局將大量課程從上到下排列，有些課程以圖形方式呈現(xiàn)，這是展示所學(xué)內(nèi)容的好方法。界面的設(shè)計是自上而下的視覺過程，更有意義；網(wǎng)頁上顯示的信息通常通過顏色和排列來區(qū)分。新東方在線、有道學(xué)校、網(wǎng)易公開課的成績以表格形式呈現(xiàn)，供用戶瀏覽。(2)陳列館式圖4-2陳列館式界面陳列館式行形式靈活，可按重要性隨意分配；簡化版比列表形式在同一界面層次上放置了更多的內(nèi)容。布局的布局通常在顯示類中，與屏幕融合得很好，但由于界面內(nèi)容過多，屏幕會顯得雜亂無章。圖4.2顯示不同板塊的關(guān)卡界面。借鑒陳列館設(shè)計，可以讓課程更加直觀，讓用戶清楚地了解課程的內(nèi)容和類別。(3)選項卡式布局圖4-3選項卡式布局選項卡式布局的特點就是，無論身在何處，選擇卡都有一個快速開關(guān)和一個按鈕。對于規(guī)模較大、層次較高的高校在線教學(xué)應(yīng)用，可以清晰的展示門戶的位置，讓用戶可以在不同的門戶之間跳轉(zhuǎn)，操作更加方便。圖4.3顯示了可汗學(xué)院、網(wǎng)易公開課和種子評分系統(tǒng)，所有這些都以標(biāo)簽的形式出現(xiàn)。每一層都有導(dǎo)航欄，用戶可以輕松切換不同的功能，降低了操作難度，縮短了操作周期。一個有序完整的在線教學(xué)應(yīng)用的布局是界面之間的整體規(guī)劃，而不是一個獨立的實體。用戶可以看到在使用過程中可以遵循視覺路線，從而可以快速輕松地執(zhí)行相應(yīng)的動作。以上設(shè)計僅為高校網(wǎng)絡(luò)教學(xué)應(yīng)用設(shè)計提供參考。隨著高校在線教學(xué)應(yīng)用的不斷拓展，部分頁面布局呈現(xiàn)出多種布局形式的結(jié)合與并存，呈現(xiàn)出更多的信息。4.1.2界面布局的基本原則和方法(1)跟隨視覺軌跡，充分利用最佳視野。人眼的運動不是隨機的。運動是由視覺運動引起的，其軌跡遵循平滑的路徑?？v觀整個界面，上下兩部分讓用戶可以在比較大的區(qū)域內(nèi)連續(xù)觀察。由于關(guān)鍵信息處于最佳視圖中，用戶可以在短暫的停頓后快速捕獲關(guān)鍵信息。(2)對不同用戶界面上的視覺元素進行分組、分層和對齊，以實現(xiàn)整個界面的平面布局。手機界面的布局結(jié)構(gòu)按照可視化原理將各種視覺元素分成若干組，通過統(tǒng)一的標(biāo)準(zhǔn)化流程提高界面的整體性。可以建立視覺邊界框和背景區(qū)域以增強數(shù)據(jù)包的可見性。或者，利用“完形”原理，將各種視覺元素的排列組合成一個整體。同時，可以將相同的視覺元素組合起來，增強組合效果。在手機的接口布局中，主接口和從接口分為中繼線和從中繼線。需要保證主干部分的層次清晰，可以根據(jù)位置和大小在界面設(shè)計中體現(xiàn)出來。在不同界面的跳轉(zhuǎn)設(shè)計上，需要注意區(qū)分主次頁面的對應(yīng)關(guān)系，保證了整個畫面的流暢度。4.2圖標(biāo)圖標(biāo)反映了人們對事物的整體認(rèn)識，具有很強的認(rèn)知能力，而圖形符號則是對事物的高級視覺表達(dá)。優(yōu)秀的圖形設(shè)計可以提高用戶的視覺和視覺效果，與用戶進行良好的交互，用圖形傳達(dá)信息；在應(yīng)用界面上，圖標(biāo)設(shè)計包括：應(yīng)用啟動圖標(biāo)、界面內(nèi)部圖標(biāo)、工具欄圖標(biāo)等。4.2.1啟動圖標(biāo)及設(shè)計方法在線教育APP的啟動圖標(biāo)會出現(xiàn)在每個APP商店中，就像學(xué)校的logo一樣成為了APP的代表形象。優(yōu)質(zhì)的圖標(biāo)會激發(fā)你對程序的理解并促使你下載它，這就是圖標(biāo)UI設(shè)計的意義所在。學(xué)校在線教學(xué)應(yīng)用的啟動圖標(biāo)可參照?；罩匦轮谱?。大學(xué)標(biāo)志具有一定的歷史和知名度。對于學(xué)校來說，它本身就可以吸引更多用戶的注意力，并獲得更多的下載和應(yīng)用。因此，我們可以從以下幾個方面考慮適合大學(xué)生的在線教學(xué)應(yīng)用的圖標(biāo)創(chuàng)新設(shè)計：(1)簡單形式由于應(yīng)用程序啟動按鈕的大小有限，需要設(shè)計簡單，易于使用者識別和記憶。(2)增強色彩對比不同的手機界面如圖4.5所示，由于屏幕背景不同，每個應(yīng)用的啟動圖標(biāo)會有很大差異。由于啟動時環(huán)境是可變的，所以渲染效果會隨著背景的變化而變化，導(dǎo)致圖標(biāo)在啟動時的顯示效果會受到背景顏色的影響。而僅僅設(shè)計簡單的背景色或照片，展示效果并不顯著，但設(shè)計過于豐富的在色彩和視覺元素豐富的照片，啟動圖標(biāo)的識別率同樣也會大大降低。因此，啟動按鈕的顏色不僅可以吸引用戶的注意力，還可以增強與各種背景的視覺效果，讓用戶輕松找到它。(3)預(yù)防措施隨著智能手機顯示技術(shù)的不斷發(fā)展，用戶對界面性能的理解越來越高，對界面各個元素的品質(zhì)提出了新的要求。雖然啟動圖標(biāo)在手機屏幕上占用的空間很小，但它的設(shè)計并不好，很可能會被其他圖像覆蓋。因此，對啟動圖標(biāo)的細(xì)致處理、對圖案形狀的多重解讀、對圖像呈現(xiàn)的精心打磨，都會讓整個啟動設(shè)計更加引人注目。4.2.2APP內(nèi)部界面的圖標(biāo)設(shè)計及方法應(yīng)用程序中除了啟動圖標(biāo)外，還有很多圖標(biāo)，其中大部分顯示為頁面，也有一些是工具欄。根據(jù)網(wǎng)頁內(nèi)容的規(guī)劃，在設(shè)計網(wǎng)頁時，應(yīng)注意圖標(biāo)之間視覺風(fēng)格的一致性。圖標(biāo)在形狀、顏色和排列上統(tǒng)一，使用戶能夠更好地記住和熟練使用界面。圖4.6顯示了可汗學(xué)校的移動界面和內(nèi)容?？珊勾髮W(xué)有許多教學(xué)大綱。因此在教學(xué)內(nèi)容的圖標(biāo)設(shè)計中，通過圖形化的方法，學(xué)生可以減少他們在APP頁面的視覺混亂。同時，他們還可以通過簡單的圖文進行講解。此外，通過簡單的圖形和文字的設(shè)計，用戶可以輕松記住圖形。在APP的使用過程中，學(xué)生可以養(yǎng)成習(xí)慣。圖標(biāo)識別不如文字清晰，但視覺直觀且豐富，因此圖標(biāo)識別在手機界面中意義非凡。一個好的圖標(biāo)可以讓用戶從小就了解它的象征意義和功能，并形成記憶和利于使用習(xí)慣的培養(yǎng)。4.3色彩隨著智能手機顯示能力和色彩表現(xiàn)能力的不斷提升，高校在線教學(xué)應(yīng)用的色彩優(yōu)化勢在必行。色彩在高校網(wǎng)絡(luò)教學(xué)應(yīng)用APP中的應(yīng)用，就是根據(jù)用戶的特點合理規(guī)劃各個界面的色彩，把握主要色彩并對相應(yīng)信息進行強調(diào)和分類。4.3.1色彩的視覺感知與心理呈現(xiàn)對于大學(xué)生在線教學(xué)應(yīng)用用戶而言，設(shè)計色彩對人們心理認(rèn)知的影響。用戶的特點和需求決定了他們的選擇。相應(yīng)的配色與學(xué)校在線教學(xué)應(yīng)用的定位和學(xué)校現(xiàn)有視覺基因的應(yīng)用密切相關(guān)?！吧X效應(yīng)”是指：看到各種顏色時，會有各種感覺和聯(lián)想；人們在看到或記住某種顏色時，能自發(fā)地、真誠地描述這種顏色所引起的各種感受。人們很容易感受到顏色帶來的心理和情緒變化。在人們的思想和情感中，不同的顏色在人們的精神和情感上具有相似性，如紅色代表著興奮、熱情、熱情和大膽；另一方面，綠色讓人聯(lián)想到自然，讓人感覺清新、年輕；橙色讓人感覺充滿活力和年輕。在界面設(shè)計中，色彩是盡量使用相同色系。比如京東閱讀（左）和常規(guī)的閱讀界面（右）多為灰色，更適合應(yīng)用的定位。4.3.2色彩在高校在線教育APP界面設(shè)計中的運用在一個界面中，顏色的組合在產(chǎn)品的最終呈現(xiàn)中起著重要的作用，所以要正確使用顏色，突出重要信息，并清晰地描繪出來。首先，要注意色彩之間的協(xié)調(diào)。通常，在界面中，在選擇顏色時，會根據(jù)主色選擇合適的顏色。在此基礎(chǔ)上，根據(jù)不同的手機界面尺寸進行顏色劃分，通過顏色對比實現(xiàn)不同區(qū)域之間的對比。由于屏幕尺寸的限制，顯示信息存在一定的缺陷，所以在使用色塊分割界面時，要注意不同顏色的色差，調(diào)整亮度、純度、色相的顏色以獲得一致美觀相片。注意不同顏色之間的區(qū)別。即使是單一的界面，適當(dāng)?shù)厥褂脤Ρ壬突パa色也會給畫面帶來層次感和空間感。4.4文字在高校在線教育APP的界面設(shè)計中，文字作為高校在線教育APP比不可少的視覺元素之一，幾乎會出現(xiàn)在高校在線教育APP的各個界面。雖然文字對于人的視覺吸引力遠(yuǎn)不如圖片、圖形來得直觀、強烈，但是文字對信息的高效、精確傳達(dá)是圖形、圖片無法取代的；在高校在線教育APP的界面設(shè)計中有自己獨特的作用。文字在高校在線教育APP的界面上，通過字體、字號大小的不同，以及字距、行距的調(diào)整使得界面內(nèi)容與設(shè)計形式達(dá)到高度一致，帶給用戶良好的信息識別體驗。4.4.1字體字體是影響文本元素的主要因素。高校在線教學(xué)應(yīng)用的字體選擇是基于用戶對文本元素的感知和學(xué)校與生俱來的視覺基因。不同的字體匹配高校在線教學(xué)應(yīng)用的風(fēng)格。在移動端應(yīng)用中，常用的漢字有Microsoft、Bold、ChineseBold、AppleBold、TimesNewRoman等，而英文字符則比較多樣化，主要是Bold等。對于高校在線教學(xué)應(yīng)用來說，字體的選擇對于豐富文本內(nèi)容至關(guān)重要。由于粗細(xì)結(jié)構(gòu)的線性特色，不同的字體有自己獨特的風(fēng)格。他們的組合帶來了不一樣的感覺。在用戶使用中，多種字體的使用可以提供多層次的信息，為用戶提供舒適的視覺體驗。字體可以分為兩種類型：襯線字體和無襯線字體。常見的中文界面通常是白色的，而無襯線的則是黑色的。從圖中可以看出，字體的結(jié)構(gòu)進行了一定程度的修改，垂直和粗細(xì)有所不同。無襯線體位更加和諧，構(gòu)圖和線條排列沒有太多變化。對于高校在線教學(xué)應(yīng)用中的文本界面，無襯線圖比襯線圖更顯眼，適合文章標(biāo)題。襯線可用于某些正文文本內(nèi)容。4.4.2字號在界面設(shè)計中，字體大小直接關(guān)系到界面布局和信息層次。重要信息通常以大字體顯示，而可以省略的不太重要的信息以較小的文本分隔。同時，在字體大小的情況下，要根據(jù)文字的顏色進行調(diào)整，以達(dá)到更好的視覺體驗。如圖4.13中，三個不同的界面，雖然標(biāo)題的字體和副標(biāo)題的字體是相似的，但是通過調(diào)整標(biāo)題字號的大小，改變副標(biāo)題中字體的顏色，讓標(biāo)題傳達(dá)的信息更加突出了。4.4.3字距和行距在對大量文本數(shù)據(jù)進行整理的過程中，文本間距的分布是由于文本間距和行間距的不同造成的，對用戶的文本閱讀影響很大。單詞之間的間距與人們在水平移動時創(chuàng)建的視覺流一致。單詞之間的距離越大，越容易讀得越快。行距對閱讀速度有很大影響。行距越大，用戶的轉(zhuǎn)換越精確。行距越短，閱讀負(fù)擔(dān)越大。由于信息所承載的信息采用了不同的字距和行距，因此易于擴展。在高校在線教學(xué)應(yīng)用的界面設(shè)計中，尤其是在文字信息量較大的情況下，要注意排版和文字間距。為方便讀者，將信息量過大的文本信息分成若干部分。4.4.4文字色彩在界面上，還可