目錄

1.應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范...........................................1

1.1文檔目的........................................................1

1.2文檔范圍........................................................1

1.3讀者對(duì)象........................................................1

1.4參考文獻(xiàn)........................................................1

1.5術(shù)語(yǔ)與縮寫解釋..................................................2

2.界面的關(guān)系圖和工作流程圖........................................2

2.1登錄界面關(guān)系圖..................................................2

2.2活動(dòng)工作流程圖..................................................3

2.3樂(lè)約界面ER圖：.................................................4

3.界面設(shè)計(jì)............................................................4

3.1樂(lè)約主界面......................................................4

3.2樂(lè)約子界面.......................................................6

3.2.1樂(lè)約子界面1：發(fā)布需求界面.............................6

3.2.2樂(lè)約子界面2：會(huì)話界面..................................7

3.2.3樂(lè)約子界面3：查看對(duì)方資料版塊.......................7

3.2.4樂(lè)約子界面4:線上有約子界面............................8

3.2.5樂(lè)約子界面5：返回需求大廳子界面.......................9

3.2.6樂(lè)約子界面6：校內(nèi)資訊界面...........................10

3.2.7樂(lè)約子界面7：校內(nèi)活動(dòng)界面..........................11

3.2.8樂(lè)約子界面8：社團(tuán)資料界面.............................12

3.2.9樂(lè)約子界面9：簽到版界面............................13

3.2.10樂(lè)約子界面10：活動(dòng)庫(kù)版子界面.......................14

3.2.11樂(lè)約子界面11：個(gè)人資料界面.......................15

3.2.12樂(lè)約子界面12：我的活動(dòng)子界面.......................17

4.美學(xué)設(shè)計(jì)..........................................................17

4.1闡述界面的布局及理由...........................................17

4.2闡述界面的色彩及理由...........................................17

1.應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范

應(yīng)當(dāng)遵循簡(jiǎn)單明了、易操作、友好性的界面風(fēng)格設(shè)計(jì)。

1.1文檔目的

本文檔是樂(lè)約項(xiàng)目界面設(shè)計(jì)說(shuō)明書(shū)，主要闡述了樂(lè)約項(xiàng)目的界面設(shè)計(jì)：登

錄系統(tǒng)界面、活動(dòng)信息界面、交友平臺(tái)界面等。

1.2文檔范圍

1.2.1遵循的界面設(shè)計(jì)規(guī)范

1.2.2界面關(guān)系圖

1.2.3主界面視圖

1.2.4子界面視圖

1.2.5工作流程圖

1.3讀者對(duì)象

用來(lái)給開(kāi)發(fā)人員參考和用戶人員參看。

1.4參考文獻(xiàn)

[l]ShaHowayAlan,JamesRTrott.設(shè)計(jì)模式精解[M].熊節(jié),譯.北京:清華大學(xué)出

版社，2004.

[2J張燕，洪蕾，鐘睿，李慧等編著.軟件工程理論與實(shí)踐.北京：機(jī)械工業(yè)出

版社，2012

I

1.5術(shù)語(yǔ)與縮寫解釋

無(wú)

2.界面的關(guān)系圖和工作流程圖

2.1登錄界面關(guān)系圖

樂(lè)約系統(tǒng)

前臺(tái)客戶端后端服務(wù)器

基礎(chǔ)模塊管理員模塊

用

戶

注

卷

欄

欄

接

發(fā)

信

用

信

冊(cè)

錄

目

收

布

息

目

戶

息

模

模

報(bào)

欄

欄

審

管

瀏

塊

塊

名

目

目

理

模

核

覽

塊

圖2-1登錄界面關(guān)系圖

2

2.2活動(dòng)工作流程圖

a聯(lián)系人信息

-是否登錄

L

是

顯示聯(lián)系人信息

提交

尋求成功

結(jié)束

圖2-2活動(dòng)工作流程圖

3

2.3樂(lè)約界面ER圖:

3.界面設(shè)計(jì)

3.1樂(lè)約主界面

（1）繪制首頁(yè)界面的視圖:

4

金陵科技學(xué)院

官方推薦

今日熱門最新活動(dòng)每周排行

品牌欄目

首頁(yè)校內(nèi)資訊我的

圖3-1樂(lè)約首頁(yè)界面

（2）功能和操作方式:

①、主界面是一系列鏈接，可以跳轉(zhuǎn)到其他子界面。

主界面中，用戶對(duì)用戶模式下活動(dòng)模塊我們分為了學(xué)習(xí)、運(yùn)動(dòng)、娛樂(lè)、公益四

個(gè)版塊，學(xué)習(xí)對(duì)應(yīng)的又有晨讀、閱讀、復(fù)習(xí)、課程設(shè)計(jì)、項(xiàng)目小組、考研同步

等子模塊；運(yùn)動(dòng)版塊有乒乓球、羽毛球、籃球、網(wǎng)球、跑步、騎行等子模塊。

娛樂(lè)版塊有棋牌、電影、美食等子模塊。公益主要就是志愿活動(dòng)與打掃等等。

②、以運(yùn)動(dòng)版塊為例，運(yùn)動(dòng)欄目下選擇籃球，點(diǎn)擊下發(fā)“+”號(hào)可發(fā)布需求，

點(diǎn)擊右側(cè)發(fā)布需求者的頭像可進(jìn)入右側(cè)會(huì)話版，進(jìn)行線上交流；點(diǎn)擊對(duì)方頭像，

可查看對(duì)方的個(gè)人資料。通過(guò)線上交流，雙方可約定線下活動(dòng)見(jiàn)面的時(shí)間、地

點(diǎn)進(jìn)行線下活動(dòng)。

③、點(diǎn)擊修改密碼，則鏈接到修改密碼界面，管理員可以修改自己的登陸密碼。

④、點(diǎn)擊重新登陸，則鏈接到登陸子界面，管理員可以重新登陸系統(tǒng)。

5

⑤、點(diǎn)擊關(guān)閉系統(tǒng)，可以關(guān)閉系統(tǒng)。

3?2樂(lè)約子界面

3.2.1樂(lè)約子界面1：發(fā)布需求界面

（1）繪制子界面1的視圖：

需求大廳

b7籃球響應(yīng)

什么時(shí)間，什么地點(diǎn)□

□

□

□

⑥:發(fā)布需求溫馨提示

圖3-2-1發(fā)布需求子界面

（2）說(shuō)明子界面1中所有對(duì)象的功能和操作方式

功能：填寫自己的需求，并發(fā)布出去

方式：由主界面進(jìn)入需求大廳，在里面進(jìn)行查看和增添活動(dòng)需求。

6

3.2.2樂(lè)約子界面2：會(huì)話界面

（1）繪制子界面2的視圖:

XXX

圖3-2-2會(huì)話子界面

（2）說(shuō)明子界面2中所有對(duì)象的功能和操作方式

功能：進(jìn)行簡(jiǎn)單的線上的社交交流

方式：由主界面進(jìn)入會(huì)話界面，進(jìn)行相關(guān)的操作

3.2.3樂(lè)約子界面3：查看對(duì)方資料版塊

（1）繪制子界面3的視圖

7

昵稱:XXX

性別:XXX

年級(jí):XXX

專業(yè):XXXX

興趣:XXXX

信譽(yù)度：100

圖3-2-3查看對(duì)方資料版塊子界面

(2)說(shuō)明子界面3中所有對(duì)象的功能和操作方式

功能：列表顯示用戶的基本信息;

方式：點(diǎn)擊詳情，則跳轉(zhuǎn)到明細(xì)子界面，可以展示該用戶詳細(xì)信息;

點(diǎn)擊返回，即可回到主界面。

3.2.4樂(lè)約子界面4:線上有約子界面

(1)繪制子界面4的視圖:

8

XXX

約嗎？

vesno

兩人都選“yes”清除發(fā)

布消息

圖3-2-4線上有約板塊子界面

（2）說(shuō)明子界面4中所有對(duì)象的功能和操作方式

功能：確認(rèn)是否線下見(jiàn)面，約定一下

方式：消息框點(diǎn)擊

3.2.5樂(lè)約子界面5：返回需求大廳子界面

（1）繪制子界面5的視圖:

9

Back

(2)說(shuō)明子界面5中所有對(duì)象的功能和操作方式

功能：返回活動(dòng)需求界面，發(fā)送需求

方式：點(diǎn)擊發(fā)送需求

3.2.6樂(lè)約子界面6：校內(nèi)資訊界面

(1)繪制子界面6的視圖:

10

金陵科技學(xué)院校內(nèi)

校園活動(dòng)例制J

新鮮事更多

火拉覽球賽，

妁你來(lái)報(bào)名/

大學(xué)里竟有麻將比賽！你會(huì)參加嗎？

首頁(yè)校內(nèi)資訊我的

圖3-2-6校內(nèi)資訊界面

（2）說(shuō)明子界面6中所有對(duì)象的功能和操作方式

功能：整合校內(nèi)資源，并友好的進(jìn)行修改完善

方式：進(jìn)入樂(lè)約系統(tǒng)，選擇校內(nèi)資訊的互相傳看一個(gè)

3.2.7樂(lè)約子界面7：校內(nèi)活動(dòng)界面

（1）繪制子界面7的視圖：

II

Back

(2)說(shuō)明子界面7中所有.對(duì)象的功能和操作方式

功能：查看報(bào)名活動(dòng)信息，提建議，分享活動(dòng)

方式：點(diǎn)擊查看進(jìn)入

3.2.8樂(lè)約子界面8：社團(tuán)資料界面

(1)繪制子界面8的視圖：

12

3社團(tuán)

金科XX社團(tuán)社團(tuán)號(hào)

主頁(yè)|相冊(cè)

1.社團(tuán)哪

社:團(tuán)類型

社團(tuán)級(jí)SU

社團(tuán)簡(jiǎn)介

負(fù)責(zé)成員:

社長(zhǎng)；XX

圖3-2-8社團(tuán)資料子界面

（2）說(shuō)明子界面8中所有對(duì)象的功能和操作方式

功能：查看報(bào)名活動(dòng)信息，分享活動(dòng)

方式：點(diǎn)擊查看進(jìn)入

3.2.9樂(lè)約子界面9：簽到版界面

（1）繪制子界面9的視圖：

13

簽到表

XXX到了缺勤