目錄

1.應當遵循的界面設計規范...........................................1

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

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

1.3讀者對象........................................................1

1.4參考文獻........................................................1

1.5術語與縮寫解釋..................................................2

2.界面的關系圖和工作流程圖........................................2

2.1登錄界面關系圖..................................................2

2.2活動工作流程圖..................................................3

2.3樂約界面ER圖：.................................................4

3.界面設計............................................................4

3.1樂約主界面......................................................4

3.2樂約子界面.......................................................6

3.2.1樂約子界面1：發布需求界面.............................6

3.2.2樂約子界面2：會話界面..................................7

3.2.3樂約子界面3：查看對方資料版塊.......................7

3.2.4樂約子界面4:線上有約子界面............................8

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

3.2.6樂約子界面6：校內資訊界面...........................10

3.2.7樂約子界面7：校內活動界面..........................11

3.2.8樂約子界面8：社團資料界面.............................12

3.2.9樂約子界面9：簽到版界面............................13

3.2.10樂約子界面10：活動庫版子界面.......................14

3.2.11樂約子界面11：個人資料界面.......................15

3.2.12樂約子界面12：我的活動子界面.......................17

4.美學設計..........................................................17

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

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

1.應當遵循的界面設計規范

應當遵循簡單明了、易操作、友好性的界面風格設計。

1.1文檔目的

本文檔是樂約項目界面設計說明書，主要闡述了樂約項目的界面設計：登

錄系統界面、活動信息界面、交友平臺界面等。

1.2文檔范圍

1.2.1遵循的界面設計規范

1.2.2界面關系圖

1.2.3主界面視圖

1.2.4子界面視圖

1.2.5工作流程圖

1.3讀者對象

用來給開發人員參考和用戶人員參看。

1.4參考文獻

[l]ShaHowayAlan,JamesRTrott.設計模式精解[M].熊節,譯.北京:清華大學出

版社，2004.

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

版社，2012

I

1.5術語與縮寫解釋

無

2.界面的關系圖和工作流程圖

2.1登錄界面關系圖

樂約系統

前臺客戶端后端服務器

基礎模塊管理員模塊

用

戶

注

卷

欄

欄

接

發

信

用

信

冊

錄

目

收

布

息

目

戶

息

模

模

報

欄

欄

審

管

瀏

塊

塊

名

目

目

理

模

核

覽

塊

圖2-1登錄界面關系圖

2

2.2活動工作流程圖

a聯系人信息

-是否登錄

L

是

顯示聯系人信息

提交

尋求成功

結束

圖2-2活動工作流程圖

3

2.3樂約界面ER圖:

3.界面設計

3.1樂約主界面

（1）繪制首頁界面的視圖:

4

金陵科技學院

官方推薦

今日熱門最新活動每周排行

品牌欄目

首頁校內資訊我的

圖3-1樂約首頁界面

（2）功能和操作方式:

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

主界面中，用戶對用戶模式下活動模塊我們分為了學習、運動、娛樂、公益四

個版塊，學習對應的又有晨讀、閱讀、復習、課程設計、項目小組、考研同步

等子模塊；運動版塊有乒乓球、羽毛球、籃球、網球、跑步、騎行等子模塊。

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

②、以運動版塊為例，運動欄目下選擇籃球，點擊下發“+”號可發布需求，

點擊右側發布需求者的頭像可進入右側會話版，進行線上交流；點擊對方頭像，

可查看對方的個人資料。通過線上交流，雙方可約定線下活動見面的時間、地

點進行線下活動。

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

④、點擊重新登陸，則鏈接到登陸子界面，管理員可以重新登陸系統。

5

⑤、點擊關閉系統，可以關閉系統。

3?2樂約子界面

3.2.1樂約子界面1：發布需求界面

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

需求大廳

b7籃球響應

什么時間，什么地點□

□

□

□

⑥:發布需求溫馨提示

圖3-2-1發布需求子界面

（2）說明子界面1中所有對象的功能和操作方式

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

方式：由主界面進入需求大廳，在里面進行查看和增添活動需求。

6

3.2.2樂約子界面2：會話界面

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

XXX

圖3-2-2會話子界面

（2）說明子界面2中所有對象的功能和操作方式

功能：進行簡單的線上的社交交流

方式：由主界面進入會話界面，進行相關的操作

3.2.3樂約子界面3：查看對方資料版塊

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

7

昵稱:XXX

性別:XXX

年級:XXX

專業:XXXX

興趣:XXXX

信譽度：100

圖3-2-3查看對方資料版塊子界面

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

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

方式：點擊詳情，則跳轉到明細子界面，可以展示該用戶詳細信息;

點擊返回，即可回到主界面。

3.2.4樂約子界面4:線上有約子界面

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

8

XXX

約嗎？

vesno

兩人都選“yes”清除發

布消息

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

（2）說明子界面4中所有對象的功能和操作方式

功能：確認是否線下見面，約定一下

方式：消息框點擊

3.2.5樂約子界面5：返回需求大廳子界面

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

9

Back

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

功能：返回活動需求界面，發送需求

方式：點擊發送需求

3.2.6樂約子界面6：校內資訊界面

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

10

金陵科技學院校內

校園活動例制J

新鮮事更多

火拉覽球賽，

妁你來報名/

大學里竟有麻將比賽！你會參加嗎？

首頁校內資訊我的

圖3-2-6校內資訊界面

（2）說明子界面6中所有對象的功能和操作方式

功能：整合校內資源，并友好的進行修改完善

方式：進入樂約系統，選擇校內資訊的互相傳看一個

3.2.7樂約子界面7：校內活動界面

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

II

Back

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

功能：查看報名活動信息，提建議，分享活動

方式：點擊查看進入

3.2.8樂約子界面8：社團資料界面

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

12

3社團

金科XX社團社團號

主頁|相冊

1.社團哪

社:團類型

社團級SU

社團簡介

負責成員:

社長；XX

圖3-2-8社團資料子界面

（2）說明子界面8中所有對象的功能和操作方式

功能：查看報名活動信息，分享活動

方式：點擊查看進入

3.2.9樂約子界面9：簽到版界面

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

13

簽到表

XXX到了缺勤