知識(shí)金礦軟件界面設(shè)計(jì)方法及設(shè)計(jì)思考

◆張晉心

知識(shí)金礦軟件界面設(shè)計(jì)方法及設(shè)計(jì)思考

◆張晉心

（四川大學(xué)錦城學(xué)院 四川 610000）

教育是我們生活工作中必不可少的一個(gè)組成部分，傳統(tǒng)的線下教育依舊有著一些不足之處，老師只能在有限的時(shí)間內(nèi)對(duì)孩子進(jìn)行有限地指導(dǎo)，成績(jī)差一點(diǎn)的許多孩子疑惑之處老師沒(méi)那么多時(shí)間來(lái)一個(gè)個(gè)解答，家長(zhǎng)對(duì)孩子的學(xué)習(xí)進(jìn)度掌握十分有限。他們都需要一個(gè)網(wǎng)絡(luò)上的平臺(tái)來(lái)解決這些問(wèn)題。本文針對(duì)以上現(xiàn)狀，設(shè)計(jì)了一套中小學(xué)生線上教育輔助平臺(tái)，解決了老師、同學(xué)、家長(zhǎng)對(duì)于學(xué)習(xí)教育的困擾。

UI；原創(chuàng)；視覺(jué)設(shè)計(jì)；界面設(shè)計(jì)完整流程

1 引言

知識(shí)金礦是一款原創(chuàng)教育類型APP軟件平臺(tái)。在這里，你可以選擇作為一名優(yōu)秀的講師，知識(shí)金礦為你提供傳播知識(shí)的平臺(tái)；在這里，你也可以選擇作為一名勤奮的學(xué)生，知識(shí)金礦為你提供奮勇拼搏的助力；在這里，你也可以選擇作為一名關(guān)愛(ài)孩子的家長(zhǎng)，知識(shí)金礦為你提供督促了解孩子的途徑。

2 場(chǎng)景預(yù)設(shè)與需求分析

場(chǎng)景一：賈老師是一名中學(xué)語(yǔ)文老師，一共教了三個(gè)班，每個(gè)班都有些同學(xué)的成績(jī)不太理想，也提出希望老師給他們補(bǔ)課，可是又有規(guī)定不能給學(xué)生補(bǔ)課，光是課堂時(shí)間又無(wú)法很好地幫助到這些學(xué)生去提升自己的成績(jī)，賈老師為此十分煩惱。

需求分析：賈老師需要更多的一些給這些同學(xué)上課的時(shí)間或是平臺(tái)。

場(chǎng)景二：小明同學(xué)是一名成績(jī)中等偏下的中學(xué)生，十分想提升自己的成績(jī)，可是自己天賦不足，自己努力并未取得很好的效果，于是希望老師給他補(bǔ)課，可是老師拒絕了，并叫他可以課余時(shí)間多去找老師。小明知道有這想法的同學(xué)并不止他一個(gè)課余時(shí)間并不夠老師給這么多同學(xué)進(jìn)行講解。

需求分析：對(duì)于小明這位中學(xué)生來(lái)說(shuō)課余時(shí)間本就稀少，課余時(shí)一個(gè)老師會(huì)被多名學(xué)生圍繞，線下的時(shí)間對(duì)于老師與學(xué)生來(lái)說(shuō)都是不夠的。此時(shí)一個(gè)線上的平臺(tái)能在很大程度上解決這個(gè)問(wèn)題。

場(chǎng)景三：劉女士是一名普通上班族，孩子在上小學(xué)成績(jī)不理想，作為一名母親想時(shí)刻督促著孩子的學(xué)習(xí)，但又不好每天都給老師打電話，詢問(wèn)孩子總是問(wèn)不出個(gè)所以然來(lái)，只能靠看孩子每天帶回家的作業(yè)與隔一段時(shí)間與老師的交流來(lái)了解孩子。怎么才能更好地督促著孩子學(xué)習(xí)？她心里為之困擾著，這也是很多家長(zhǎng)的煩惱。

需求分析：作為一名上班族線下時(shí)刻關(guān)注著孩子明顯是不太現(xiàn)實(shí)的，而一個(gè)線上的平臺(tái)便能解除劉女士的困擾，同時(shí)也能使家長(zhǎng)更能了解孩子的校園生活。

綜上知識(shí)金礦所存在的用戶對(duì)象的使用場(chǎng)景和基于此的需求分析，做出了以下設(shè)計(jì)思考：在設(shè)計(jì)中為了接近知識(shí)，學(xué)習(xí)教育主題，色彩主要為（藍(lán)色 rgb：#b8e2ee；灰色 rgb：#a5a8ab；白色 rgb：#ffffff）。設(shè)計(jì)中，為了貼近教學(xué)的嚴(yán)謹(jǐn)，設(shè)計(jì)顏色主要以簡(jiǎn)潔（白、灰）為主，再輔以一些藍(lán)色（在我看來(lái)藍(lán)色代表著廣闊，與知識(shí)的繁多無(wú)邊相切合），字體為微軟雅黑與Adobe 黑體 Std。同時(shí)logo也是藍(lán)色的，一個(gè)行楷的藍(lán)色“知”字在一個(gè)球體的透明晶石中，既符合知識(shí)金礦這主題，也使得看起來(lái)不過(guò)于古板。當(dāng)然這也只是最基礎(chǔ)的主題樣式，設(shè)置里也可以對(duì)主題進(jìn)行更改，并不是死板的只能使用一個(gè)主題。

3 設(shè)計(jì)詳細(xì)說(shuō)明

3.1 登錄頁(yè)及整體頁(yè)面布局

登錄頁(yè)及頁(yè)面整體布局：登錄頁(yè)主要包含了賬號(hào)，密碼，注冊(cè)，立即注冊(cè)，忘記密碼，三方登錄功能（QQ與微信登錄），頁(yè)面整體以文字、輸入框、按鈕和logo為主，第三方登錄是為了方便用戶使用已有的微信或QQ賬號(hào)進(jìn)行登錄，以避免花費(fèi)更多的時(shí)間去注冊(cè)一個(gè)新的賬號(hào)。軟件界面整體布局以750*1334px的iphone 7為原型模板，最小參考邊距30px，內(nèi)容間距以此為基準(zhǔn)，總體主要頁(yè)面13頁(yè)。

3.2 首頁(yè)面

主頁(yè)面功能分區(qū)從上到下依次包含：頭像、熱門、關(guān)注（頂部標(biāo)簽選中時(shí)顏色加深并加了黑色短下劃線），搜索圖標(biāo)，消息圖標(biāo)，課程分類（推薦、語(yǔ)文、數(shù)學(xué)、英語(yǔ)、文綜），輪播圖，熱門的課程，下部導(dǎo)航（首頁(yè)，課程，成績(jī)，我的）。點(diǎn)擊頭像進(jìn)入個(gè)人資料的編輯頁(yè)面；點(diǎn)擊搜索圖標(biāo)會(huì)出現(xiàn)搜索框，并自動(dòng)獲取用戶輸入焦點(diǎn)，和直接顯示的搜索框操作復(fù)雜度一樣，但是隱藏搜索框可以使畫面顯得更加簡(jiǎn)潔；有新消息時(shí)，消息圖標(biāo)右上角會(huì)出現(xiàn)包含數(shù)字的小紅點(diǎn)提示（超過(guò)99條會(huì)顯示為99+）；輪播圖時(shí)將今日最熱門、最受歡迎的課程進(jìn)行置頂推薦；課程分類：點(diǎn)擊科目跳轉(zhuǎn)至課程頁(yè)；熱門課程中將包含課程的名字、老師、老師所處學(xué)校和課程價(jià)格以及已購(gòu)人數(shù)，點(diǎn)擊進(jìn)入該課程詳細(xì)頁(yè)面；下部導(dǎo)航主要為展示了軟件的主要頁(yè)面構(gòu)成，用戶點(diǎn)擊相應(yīng)文字則會(huì)進(jìn)入對(duì)應(yīng)的主要頁(yè)面，首頁(yè)、課程、成績(jī)、我的為一級(jí)頁(yè)面。同時(shí)，處于哪個(gè)頁(yè)面該頁(yè)面的對(duì)應(yīng)導(dǎo)航方塊將會(huì)呈現(xiàn)淺灰色并底部會(huì)有一個(gè)灰色小圓點(diǎn)。

3.2 課程頁(yè)面

課程頁(yè)面包含：全部、視頻、直播、練習(xí)等，課程分類（語(yǔ)、數(shù)、外、文等文字圖標(biāo)以及省略號(hào)）為您推薦、參與最多、最新發(fā)布、更多，推薦的課程的圖片全部是綜合性的，點(diǎn)擊可直達(dá)相應(yīng)課程；而視頻、直播、練習(xí)、請(qǐng)?jiān)甘菃我坏哪K，也就相當(dāng)于為用戶提供過(guò)濾功能；點(diǎn)擊省略號(hào)展示所有可選科目，點(diǎn)擊科目跳轉(zhuǎn)到課程頁(yè)，再次點(diǎn)擊省略號(hào)收起展示塊；為您推薦是軟件根據(jù)你的信息綜合所有課程推薦覺(jué)得適合你的課程；參與最多是一些參與學(xué)生數(shù)最多的課程；最新發(fā)布即實(shí)時(shí)發(fā)布的課程（優(yōu)先推薦學(xué)生的老師以及學(xué)生所關(guān)注老師的最新發(fā)布），課程下方有課程的價(jià)格。

視頻是老師發(fā)布的一些視頻，直播是正在直播的老師，練習(xí)便是你的練習(xí)以及其他老師發(fā)布在平臺(tái)上的一些習(xí)題。課程的購(gòu)買有課程詳細(xì)信息，章節(jié)內(nèi)容，同時(shí)頁(yè)面有播放按鈕，可以試看，并且有購(gòu)買人針對(duì)該課程的評(píng)價(jià)，每節(jié)課還有購(gòu)課人針對(duì)問(wèn)題的討論。

3.3 成績(jī)頁(yè)面

成績(jī)頁(yè)面主要分為兩大塊：

（1）線上成績(jī)，即你的各科老師給你布置在網(wǎng)絡(luò)上的作業(yè)與任務(wù)的成績(jī)與進(jìn)度，以及你所選課程的成績(jī)與進(jìn)度。

（2）線下成績(jī)，是各科老師錄入的你的線下的成績(jī)，并且是將習(xí)題一同上傳的。兩者都有成績(jī)的排名，這樣來(lái)激勵(lì)同學(xué)們的競(jìng)爭(zhēng)心，這些也只有自己與老師家長(zhǎng)能看見(jiàn)。這樣的好處便是你可以很好地針對(duì)你所做習(xí)題進(jìn)行改正，同時(shí)也方便老師家長(zhǎng)對(duì)你的問(wèn)題做出指導(dǎo)。

3.4 我的頁(yè)面

該頁(yè)面最上方為個(gè)人頭像昵稱、用戶id、學(xué)校、年級(jí)、班級(jí)，下方依次是：關(guān)注/好友、我的收藏、我的課程、我的成就、已購(gòu)課程、學(xué)習(xí)記錄、年級(jí)、關(guān)聯(lián)賬號(hào)、購(gòu)物車、積分商城、設(shè)置以及銜接下部導(dǎo)航的意見(jiàn)反饋。點(diǎn)擊各個(gè)選項(xiàng)可進(jìn)入進(jìn)行操作編輯，設(shè)置功能包含傳統(tǒng)的用戶賬號(hào)安全設(shè)置，信息安全設(shè)置，需要進(jìn)行個(gè)人綁定操作。同班同學(xué)將自動(dòng)添加為好友，家長(zhǎng)學(xué)生老師賬號(hào)將自動(dòng)互相關(guān)注，同時(shí)作為老師登錄這個(gè)頁(yè)面會(huì)多一個(gè)發(fā)布選項(xiàng)來(lái)讓老師發(fā)布課程視頻及習(xí)題。我的收藏主要用于學(xué)生發(fā)現(xiàn)好的課程習(xí)題時(shí)將其收藏起來(lái)避免丟失；成就系統(tǒng)是當(dāng)你達(dá)成一定條件時(shí)會(huì)有勛章以及獎(jiǎng)勵(lì)贈(zèng)送；學(xué)習(xí)記錄是你的學(xué)習(xí)的過(guò)程時(shí)間等的記錄無(wú)法刪除，這樣能使家長(zhǎng)更好的督促孩子的學(xué)習(xí)；積分是購(gòu)買課程贈(zèng)予的積分以及獎(jiǎng)勵(lì)的積分所消費(fèi)的地方；年級(jí)是錄入你的學(xué)習(xí)年級(jí)班級(jí)等的地方。

該項(xiàng)目為我第一個(gè)獨(dú)立的完整界面設(shè)計(jì)，在制作時(shí)也參考了網(wǎng)絡(luò)上的一些其他軟件的設(shè)計(jì)規(guī)范與好的思路，我個(gè)人認(rèn)為這是一個(gè)能讓自己進(jìn)步，能更好完成這個(gè)軟件設(shè)計(jì)的一個(gè)相對(duì)嚴(yán)謹(jǐn)?shù)淖龇?。同時(shí)在這一步上也加上自己的思維創(chuàng)新。包括一些細(xì)節(jié)設(shè)計(jì)，搭配都盡量地把自己的想法給體現(xiàn)出來(lái)。我也正學(xué)著去創(chuàng)立一個(gè)完全屬于自己的獨(dú)特風(fēng)格以避免于大眾化。整套設(shè)計(jì)，從最初的原型，logo，產(chǎn)品圖標(biāo)，到最后的視覺(jué)設(shè)計(jì)，一款完整的界面應(yīng)當(dāng)是有著一個(gè)明確的視覺(jué)主方向，我也是努力地朝這個(gè)方向去發(fā)展，這是在設(shè)計(jì)過(guò)程中需要注重的。同時(shí)在此之外，一個(gè)軟件還需要好的交互才能使得用戶有著更好的體驗(yàn)，我還需要更努力地去創(chuàng)新設(shè)計(jì)與完善交互才能使得自己取得更大的進(jìn)步。