學(xué)會(huì)微信小程序的設(shè)計(jì)與實(shí)現(xiàn)

甘藝垚　蔡永香　王薈奧

摘要：為了滿足學(xué)會(huì)的信息移動(dòng)化需求，該文在調(diào)查了當(dāng)前學(xué)會(huì)的信息化建設(shè)現(xiàn)狀、移動(dòng)端應(yīng)用等信息的基礎(chǔ)上，提出一套基于微信小程序開發(fā)的移動(dòng)端設(shè)計(jì)方案，并以中國(guó)地球物理學(xué)會(huì)水利電力分會(huì)的特定需求為例實(shí)現(xiàn)了水電分會(huì)微信小程序。經(jīng)測(cè)試，水電分會(huì)小程序能夠及時(shí)傳遞學(xué)會(huì)動(dòng)態(tài)信息給會(huì)員，達(dá)到宣傳學(xué)會(huì)，服務(wù)社會(huì)的目的，對(duì)水電分會(huì)會(huì)員間的信息交流具有實(shí)際應(yīng)用價(jià)值。

關(guān)鍵詞：學(xué)會(huì);信息化建設(shè);微信小程序;設(shè)計(jì)方案;水電分會(huì)

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）04-0007-03

Abstract： In order to meet the needs of information mobility of academy. Based on the investigation of the information construction status quo of the current society and the application of mobile terminal， this paper proposes a mobile terminal design scheme based on WeChat small program development， and a WeChat small program of the hydro-electric branch of Chinese geophysical academy as an example. Through the test， the small program can timely convey the dynamic information of the academy to the members， so as to achieve the purpose of propagating the academy and serving society. It has practical application value for the information exchange among the members of the hydro-electric branch.

Key words： academy; information construction; WeChat small program; design scheme; hydro-electric branch

1 背景

學(xué)會(huì)是由科技工作者自愿組成的科技學(xué)術(shù)性團(tuán)體， 是科技發(fā)展的必然產(chǎn)物。其根本任務(wù)是科研、學(xué)術(shù)交流， 促進(jìn)學(xué)科發(fā)展， 發(fā)現(xiàn)、培養(yǎng)、推薦人才， 促進(jìn)科技成果轉(zhuǎn)化，代表科技工作者與政府溝通， 反映科技工作者心聲， 維護(hù)科技工作者權(quán)益[1]。據(jù)2020年6月中國(guó)科學(xué)技術(shù)協(xié)會(huì)官網(wǎng)顯示，各級(jí)科協(xié)所屬學(xué)會(huì)29675個(gè)，其中中國(guó)科協(xié)所屬全國(guó)學(xué)會(huì)210個(gè)，省級(jí)科協(xié)所屬省級(jí)學(xué)會(huì)3848個(gè)。近年來(lái)，為了響應(yīng)國(guó)家政策，促進(jìn)學(xué)會(huì)交流與發(fā)展，很多學(xué)會(huì)都建設(shè)了自己的信息化平臺(tái)。大部分學(xué)會(huì)建設(shè)有門戶網(wǎng)站，便于發(fā)布通知、共享信息，為會(huì)員提供一個(gè)相互交流的平臺(tái)。但由于移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，人們通過(guò)手機(jī)來(lái)獲取信息已成為一種必然的趨勢(shì)，學(xué)會(huì)會(huì)員之間的交流也有基于移動(dòng)方式的需求，僅僅門戶網(wǎng)站已經(jīng)不滿足現(xiàn)今的發(fā)展需求了，因此開發(fā)信息交流移動(dòng)端是目前學(xué)會(huì)信息化建設(shè)的新目標(biāo)。

目前移動(dòng)端選型主要有H5頁(yè)面、App和微信小程序。H5頁(yè)面開發(fā)效率高，但是其加載速度慢，兼容性差，容易受到不同機(jī)型等因素的影響;App兼容性好，加載速度快，但是其開發(fā)周期長(zhǎng)，開發(fā)成本高，如果全面覆蓋移動(dòng)終端需要開發(fā) 2-3 種類型，并且迭代更新麻煩[2];微信小程序開發(fā)維護(hù)成本低，且兼容性好，加載速度快，相較于另外兩種移動(dòng)應(yīng)用更純粹、更流暢、更易得，其中更純粹指的是使用小程序可以拋去以往互聯(lián)網(wǎng)產(chǎn)品的煩瑣程序，更流暢指的是相對(duì)于網(wǎng)站、H5、App等，小程序的用戶體驗(yàn)感更優(yōu)，更易得表現(xiàn)為線上線下觸手可得、隨時(shí)可用[3]。故本文基于微信小程序?yàn)閷W(xué)會(huì)移動(dòng)端建設(shè)提出一套合理可行的方案，并以中國(guó)地球物理學(xué)會(huì)水電分會(huì)的特定需求為例設(shè)計(jì)開發(fā)水電分會(huì)微信小程序。

2 需求分析

在對(duì)當(dāng)前部分學(xué)會(huì)的信息化平臺(tái)進(jìn)行調(diào)研的基礎(chǔ)上，我們分析總結(jié)出學(xué)會(huì)微信小程序的用戶主要是學(xué)會(huì)會(huì)員以及游客，其用戶需求大致如表1所示。

按照用戶的需求，我們可以分析出該小程序的功能需求包括：

1） 信息展示功能：展示學(xué)會(huì)介紹、學(xué)會(huì)通知、學(xué)會(huì)新聞、學(xué)術(shù)交流、獎(jiǎng)勵(lì)信息、期刊信息、學(xué)會(huì)成果和入會(huì)途徑等信息;

2） 資料下載功能：學(xué)術(shù)會(huì)議附件、期刊數(shù)據(jù)、成果數(shù)據(jù)等的下載;

3） 信息查詢功能：通過(guò)關(guān)鍵詞檢索所需要的信息;

4） 會(huì)員登錄功能：會(huì)員登錄查看會(huì)員服務(wù);

5） 信息收藏功能：會(huì)員收藏信息。

3 功能設(shè)計(jì)

按照用戶的需求，學(xué)會(huì)微信小程序的功能設(shè)計(jì)為兩部分：通用功能及個(gè)性化功能。通用功能包括最新信息輪播圖、學(xué)會(huì)介紹、各類信息查看展示、信息查詢;個(gè)性化功能有會(huì)員登錄、收藏下載、個(gè)性化界面管理等;并將這兩部分功能分別在首頁(yè)和個(gè)人中心兩個(gè)頁(yè)面中實(shí)現(xiàn)。該設(shè)計(jì)的功能結(jié)構(gòu)如圖1所示。

4 系統(tǒng)架構(gòu)設(shè)計(jì)

要開發(fā)實(shí)現(xiàn)上述功能，系統(tǒng)可以采用三層架構(gòu)。三層架構(gòu)分別為表現(xiàn)層，服務(wù)層和數(shù)據(jù)層。其中表現(xiàn)層為通過(guò)HTML+CSS+JS搭建的Web應(yīng)用和基于微信小程序搭建的移動(dòng)應(yīng)用，用于展示系統(tǒng)數(shù)據(jù);基于SSM框架搭建的Java程序作為服務(wù)層，鏈接表現(xiàn)層與數(shù)據(jù)層;數(shù)據(jù)層使用MySQL搭建系統(tǒng)數(shù)據(jù)庫(kù)，實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)管理的功能。其技術(shù)架構(gòu)如圖2所示。

5 界面設(shè)計(jì)

手機(jī)應(yīng)用界面設(shè)計(jì)中要顧及兩個(gè)方面，界面視覺(jué)設(shè)計(jì)及用戶體驗(yàn)設(shè)計(jì)[4]。在界面視覺(jué)設(shè)計(jì)上，學(xué)會(huì)微信小程序選取了白色作為背景顏色，白色百搭，可以跟各種色系按風(fēng)格需要搭配起來(lái)，并且最為簡(jiǎn)潔干凈，有利于內(nèi)容的獲取;界面整體采用扁平化設(shè)計(jì)風(fēng)格，扁平化設(shè)計(jì)是近年來(lái)非常流行的新設(shè)計(jì)風(fēng)格，其主要特點(diǎn)是簡(jiǎn)約直觀[5];首頁(yè)頁(yè)面的設(shè)計(jì)主要以輪播圖和信息模塊組成，輪播圖上方占三分之一，剩下的部分為排列整齊的信息模塊;個(gè)人中心頁(yè)面分區(qū)設(shè)計(jì)為按列表模式排列的功能模塊;整體清新簡(jiǎn)潔，美觀大方，這樣的設(shè)計(jì)可以使得用戶更加迅速的進(jìn)行信息交換，喚起用戶的使用欲望。在用戶體驗(yàn)設(shè)計(jì)方面，小程序設(shè)計(jì)信息模塊管理功能，會(huì)員可以自己設(shè)置首頁(yè)展示模塊，定制自己專屬的小程序界面，只保留自己感興趣的信息模塊，隱藏不需要的信息模塊;此外還有收藏與查看下載列表，保留用戶的瀏覽歷史記錄等，也是基于用戶體驗(yàn)的設(shè)計(jì)。

6 應(yīng)用實(shí)例

基于上述設(shè)計(jì)方案，以中國(guó)地球物理學(xué)會(huì)水電分會(huì)（以下簡(jiǎn)稱水電分會(huì)）的特定需求為例，進(jìn)行了水電分會(huì)微信小程序的設(shè)計(jì)開發(fā)。水電分會(huì)是中國(guó)地球物理學(xué)會(huì)下屬的多部門、跨地區(qū)的群眾性學(xué)術(shù)團(tuán)體，學(xué)會(huì)宗旨是：為水利電力行業(yè)地球物理技術(shù)發(fā)展服務(wù)、為廣大技術(shù)人員服務(wù)、為推動(dòng)水利電力行業(yè)地球物理技術(shù)進(jìn)步服務(wù);組織水利電力領(lǐng)域地球物理技術(shù)人員開展國(guó)際、國(guó)內(nèi)學(xué)術(shù)/技術(shù)交流、舉辦專業(yè)技術(shù)培訓(xùn)等相關(guān)活動(dòng);促進(jìn)研究成果的應(yīng)用和轉(zhuǎn)化等。

我們?cè)谡{(diào)研學(xué)會(huì)平臺(tái)用戶一般需求的基礎(chǔ)上，還針對(duì)水電分會(huì)用戶進(jìn)了細(xì)致地溝通交流，獲取其個(gè)性化的需求，歸納總結(jié)出水電分會(huì)小程序的大致需求如下：

1） 學(xué)會(huì)動(dòng)態(tài)信息展示：通知公告、分會(huì)新聞和獎(jiǎng)勵(lì)動(dòng)態(tài)等動(dòng)態(tài)信息的展示;

2） 學(xué)術(shù)交流信息展示：學(xué)術(shù)會(huì)議、年會(huì)和紀(jì)念活動(dòng)信息展示以及附件的下載;

3） 分會(huì)刊物介紹：刊物簡(jiǎn)介、出版刊物、編委會(huì)介紹，投稿須知信息展示以及出版刊物下載等;

4） 科普宣傳：科普宣傳和科普知識(shí)的信息展示;

5） 表彰獎(jiǎng)勵(lì)信息展示：獎(jiǎng)項(xiàng)介紹和贊助單位信息展示;

6） 產(chǎn)品信息展示：會(huì)員單位及會(huì)員的發(fā)明專利、技術(shù)革新和儀器設(shè)備的信息展示;

7） 會(huì)員風(fēng)采作品展示：會(huì)員作品，包括散文、詩(shī)歌、美圖和視頻等作品的展示;

8） 學(xué)會(huì)介紹：學(xué)會(huì)組織機(jī)構(gòu)、管理細(xì)則和自律公約的信息展示;

9） 登錄：會(huì)員登錄獲取會(huì)員服務(wù);

10） 查看瀏覽歷史：會(huì)員可以查看自己的瀏覽歷史;

11） 查看收藏：會(huì)員可以收藏信息，并隨時(shí)在我的收藏中查看;

12） 查看已下載資料：會(huì)員下載的數(shù)字資料可以在已下載資料列表中查看;

13） 個(gè)性化界面管理：會(huì)員可以自定義首頁(yè)展示信息模塊，形成自己的個(gè)性化模塊界面。

在仔細(xì)分析上述需求的基礎(chǔ)上，我們基于前面的一般性功能結(jié)構(gòu)圖，對(duì)水電分會(huì)小程序功能進(jìn)行了細(xì)化設(shè)計(jì)，其功能設(shè)計(jì)模塊見圖3。

按照前面的系統(tǒng)架構(gòu)與界面設(shè)計(jì)方案，我們根據(jù)水電分會(huì)的特定需求進(jìn)行了功能的編碼實(shí)現(xiàn)，最終實(shí)現(xiàn)了水電分會(huì)小程序。小程序分為兩個(gè)導(dǎo)航欄頁(yè)面：首頁(yè)和我的頁(yè)面。首頁(yè)主要是信息模塊展示和信息查詢，無(wú)論是會(huì)員還是游客都可以訪問(wèn)查看;我的頁(yè)面為會(huì)員功能頁(yè)面，會(huì)員登錄之后可獲得一些個(gè)性化的服務(wù)。

1） 首頁(yè)頁(yè)面如圖4所示，上部分為信息輪播圖，其圖片與網(wǎng)頁(yè)端首頁(yè)圖片相同且同步更新;下部分為排列整齊的模塊按鈕，分別是：聚焦動(dòng)態(tài)、學(xué)術(shù)交流、分會(huì)刊物、科普?qǐng)@地、表彰獎(jiǎng)勵(lì)、產(chǎn)品展示、知味煙火、關(guān)于分會(huì)、信息查詢;

2） 點(diǎn)擊首頁(yè)任一模塊按鈕，可以跳轉(zhuǎn)到相應(yīng)頁(yè)面，以點(diǎn)擊科普?qǐng)@地模塊為例，圖5為跳轉(zhuǎn)到科普?qǐng)@地信息列表頁(yè)?？破?qǐng)@地又包含了科普宣傳與科普知識(shí)兩部分內(nèi)容，點(diǎn)擊上方導(dǎo)航欄可進(jìn)行列表內(nèi)容的切換。點(diǎn)擊列表中的標(biāo)題跳轉(zhuǎn)至信息詳情頁(yè)面，如圖6所示，登錄用戶還可進(jìn)行頁(yè)面收藏;

3） 圖7為資料下載頁(yè)面，用戶登錄后，點(diǎn)擊標(biāo)題或者圖片可以進(jìn)行該數(shù)據(jù)下載;

4） 切換到我的頁(yè)面會(huì)彈出會(huì)員登錄框，會(huì)員登錄后界面如圖8所示，點(diǎn)擊列表功能按鈕可以跳轉(zhuǎn)到相應(yīng)的功能界面;

5） 個(gè)性化界面管理如圖9所示，勾選的模塊會(huì)顯示，不勾選的模塊就會(huì)在首頁(yè)隱藏。

經(jīng)測(cè)試，該小程序基本滿足了當(dāng)前水電分會(huì)信息移動(dòng)化發(fā)展需求，能夠及時(shí)傳遞學(xué)會(huì)動(dòng)態(tài)信息給會(huì)員，達(dá)到了宣傳學(xué)會(huì)，服務(wù)社會(huì)的目的。按照用戶的反饋，水電分會(huì)小程序后續(xù)可以進(jìn)一步對(duì)小程序進(jìn)行優(yōu)化，如添加會(huì)議報(bào)名功能和支付功能等，提高小程序的實(shí)用性，節(jié)約學(xué)會(huì)資源，提高學(xué)會(huì)活動(dòng)組織效率。

7 結(jié)束語(yǔ)

本文在調(diào)查了當(dāng)前學(xué)會(huì)的信息化建設(shè)、移動(dòng)端應(yīng)用等信息的基礎(chǔ)上對(duì)學(xué)會(huì)微信小程序進(jìn)行了需求分析，在此基礎(chǔ)上進(jìn)行系統(tǒng)設(shè)計(jì)、功能設(shè)計(jì)和界面設(shè)計(jì)，形成了一套完整的設(shè)計(jì)方案。最終以中國(guó)地球物理學(xué)會(huì)水利電力分會(huì)的特定需求為例實(shí)現(xiàn)了水電分會(huì)微信小程序，促進(jìn)了水電分會(huì)信息化建設(shè)，該方案也可作為其他學(xué)會(huì)信息化建設(shè)的參考。

參考文獻(xiàn)：

[1] 宋秀芳.簡(jiǎn)述學(xué)會(huì)與行業(yè)協(xié)會(huì)的區(qū)別[J].學(xué)會(huì)，2003（8）：36.

[2] 趙巖.基于微信平臺(tái)的高校微應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)[D].長(zhǎng)春：長(zhǎng)春工業(yè)大學(xué)，2020.

[3] 楊啟，張麗萍.從互聯(lián)網(wǎng)生態(tài)看微信小程序的發(fā)展[J].新聞?wù)搲?017（2）：22-24.

[4] 劉慶立，丁勤林，楊東潤(rùn).淺談高校實(shí)驗(yàn)管理手機(jī)應(yīng)用程序界面及功能設(shè)計(jì)[J].藝術(shù)科技，2017，30（7）：53-54.

[5] 楊楚喬.淺析“扁平化設(shè)計(jì)”在交互設(shè)計(jì)中的應(yīng)用[J].大眾文藝，2020（3）：74-75.

【通聯(lián)編輯：謝媛媛】