新聞發(fā)布系統(tǒng)用戶界面設(shè)計(jì)

1、<p><b>　　新聞發(fā)布系統(tǒng)</b></p><p><b>　　用戶界面設(shè)計(jì)報(bào)告</b></p><p><b>　　版 本 歷 史</b></p><p><b>　　目 錄 </b></p><p><b>　　0. 文檔介紹

2、5</b></p><p>　　0.1 文檔目的5</p><p>　　0.2 文檔范圍5</p><p>　　0.3 讀者對(duì)象5</p><p>　　0.4 參考文獻(xiàn)5</p><p>　　0.5 術(shù)語(yǔ)與縮寫解釋5</p><p>　　1. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范6&

3、lt;/p><p>　　1.1：易用性：6</p><p>　　1.2易用性細(xì)則6</p><p>　　2. 界面的關(guān)系圖和工作流程圖6</p><p>　　2.1前臺(tái)管理界面功能一覽6</p><p>　　2.2 后臺(tái)管理員界面功能一覽7</p><p>　　2.3 界面關(guān)系及工作流程

4、7</p><p>　　2.3.1用戶界面關(guān)系7</p><p>　　2.3.2后臺(tái)管理界面關(guān)系8</p><p><b>　　3. 界面關(guān)系9</b></p><p>　　3.1 登錄界面9</p><p>　　3.1.1 登錄界面視圖9</p><p>　　3

5、.1.2 登錄界面功能一覽9</p><p>　　3.2 用戶瀏覽新聞主界面10</p><p>　　3.2.1 主界面視圖10</p><p>　　3.3用戶新聞管理界面15</p><p>　　3.3.1 新聞發(fā)布界面16</p><p>　　3.3.2 新聞管理頁(yè)面17</p><

6、p>　　3.3.3 新聞管理功能一覽17</p><p>　　3.3.4當(dāng)日新聞一覽頁(yè)面錯(cuò)誤!未定義書簽。</p><p>　　3.3.5 新聞統(tǒng)計(jì)量頁(yè)面17</p><p>　　3.3.6 文章是否允許評(píng)論頁(yè)面錯(cuò)誤!未定義書簽。</p><p>　　4 后臺(tái)管理頁(yè)面18</p><p>　　4.1管理

7、員管理18</p><p>　　4.1.1添加用戶頁(yè)面18</p><p>　　4.1.2 添加用戶頁(yè)面功能一覽19</p><p>　　4.1.3 管理用戶頁(yè)面19</p><p>　　4.2類別管理19</p><p>　　4.2.1 添加欄目頁(yè)面19</p><p>　　4.2

8、.2添加欄目功能一覽20</p><p>　　4.2.3欄目管理頁(yè)面20</p><p>　　4.2.4 欄目管理功能一覽20</p><p>　　4.2.5添加子類頁(yè)面21</p><p>　　4.2.4 添加類別功能一覽21</p><p>　　4.2.5分類管理頁(yè)面21</p><

9、p>　　4.2.6類別管理功能一覽22</p><p><b>　　5 日志管理22</b></p><p>　　5.1 用戶日志管理頁(yè)面22</p><p>　　5．2新聞日志管理頁(yè)面錯(cuò)誤!未定義書簽。</p><p>　　6新聞評(píng)論管理22</p><p>　　7 文章審核管理

10、23</p><p><b>　　0. 文檔介紹</b></p><p><b>　　0.1 文檔目的</b></p><p>　　新聞發(fā)布系統(tǒng)《用戶界面設(shè)計(jì)報(bào)告》。是為了開發(fā)新聞發(fā)布系統(tǒng)而編寫，主要面向系統(tǒng)分析員、程序員、測(cè)試員、實(shí)施員和最終用戶。</p><p>　　本說(shuō)明書是整個(gè)軟件開發(fā)的依

11、據(jù)，它對(duì)以后階段的工作起指導(dǎo)作用。本文也是項(xiàng)目完成后系統(tǒng)驗(yàn)收的依據(jù)。</p><p><b>　　0.2 文檔范圍</b></p><p>　　本文檔主要包含以下幾部分：</p><p><b>　　1. 文檔介紹</b></p><p><b>　　2. 界面設(shè)計(jì)規(guī)范</b>

12、</p><p><b>　　3. 界面關(guān)系圖</b></p><p><b>　　4. 主界面說(shuō)明</b></p><p><b>　　0.3 讀者對(duì)象</b></p><p>　　本文檔的讀者主要包含以下幾類：</p><p><b>　　

13、1. 界面設(shè)計(jì)人員</b></p><p><b>　　2. 美工人員</b></p><p><b>　　3. 編碼人員</b></p><p><b>　　4. 測(cè)試人員</b></p><p><b>　　0.4 參考文獻(xiàn)</b><

14、/p><p>　　提示：列出本文檔的所有參考文獻(xiàn)（可以是非正式出版物），格式如下：</p><p>　　[標(biāo)識(shí)符] 作者，文獻(xiàn)名稱，出版單位（或歸屬單位），日期</p><p><b>　　例如：</b></p><p>　　[AAA] 作者，《立項(xiàng)建議書》，機(jī)構(gòu)名稱，日期</p><p>　　[SP

15、P-PROC-SD] SEPG，系統(tǒng)設(shè)計(jì)規(guī)范，機(jī)構(gòu)名稱，日期</p><p>　　0.5 術(shù)語(yǔ)與縮寫解釋</p><p>　　1. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范</p><p>　　界面是軟件與用戶交互的最直接的層，界面的好壞決定用戶對(duì)軟件的第一印象。而且設(shè)計(jì)良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)У淖饔谩?lt;/p><p><b&g

16、t;　　用戶原則:</b></p><p><b>　　1.1：易用性：</b></p><p>　　按鈕名稱應(yīng)該易懂，用詞準(zhǔn)確，屏棄模棱兩可的字眼，要與同一界面上的其他按鈕易于區(qū)分，能望文知意最好, 理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。</p><p><b>　　1.2易用性細(xì)則：&l

17、t;/b></p><p>　　1):完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離。</p><p>　　2):按功能將界面劃分局域塊，用Frame框括起來(lái),并要有功能說(shuō)明或標(biāo)題。</p><p>　　3):界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。 </p><p>　　4)

18、:同一界面上的控件數(shù)最好不要超過(guò)10個(gè)，多于10個(gè)時(shí)可以考慮使用分頁(yè)界面顯示。</p><p>　　5):復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。</p><p>　　6):復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。</p><p>　　7):選項(xiàng)數(shù)相同時(shí)多用選項(xiàng)框而不用下拉列表框。</p><p>　　8):界面空間較小時(shí)使用下拉框而

19、不用選項(xiàng)框。</p><p>　　9):選項(xiàng)數(shù)較少時(shí)使用選項(xiàng)框，相反使用下拉列表框。</p><p>　　10):專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語(yǔ)，通用性界面則提倡使用通用性詞眼。</p><p>　　2. 界面的關(guān)系圖和工作流程圖</p><p>　　2.1前臺(tái)管理界面功能一覽</p><p>　　表 2-1 新聞

20、發(fā)布系統(tǒng)客戶端界面一覽表</p><p>　　2.2 后臺(tái)管理員界面功能一覽</p><p>　　表 2-2 新聞發(fā)布系統(tǒng)服務(wù)器端界面一覽表 </p><p>　　2.3 界面關(guān)系及工作流程</p><p>　　2.3.1用戶界面關(guān)系</p><p>　　圖2-1新聞發(fā)布系統(tǒng)客戶端界面關(guān)系及工作流程圖</p>

21、;<p>　　2.3.2后臺(tái)管理界面關(guān)系</p><p>　　圖2-1新聞管理系統(tǒng)服務(wù)器端界面關(guān)系及工作流程圖</p><p><b>　　3. 界面關(guān)系</b></p><p><b>　　3.1 登錄界面</b></p><p>　　3.1.1 登錄界面視圖</p>

22、<p>　　圖 3-1新聞發(fā)布系統(tǒng)登錄界面login.jsp</p><p>　　注：新聞發(fā)布系統(tǒng)登錄頁(yè)面</p><p>　　1：管理員可登錄到后臺(tái)管理頁(yè)面。</p><p>　　2：注冊(cè)用戶前臺(tái)登陸到主頁(yè).</p><p><b>　　3：驗(yàn)證碼驗(yàn)證</b></p><p>　　4：

23、忘記密碼通過(guò)郵箱找回</p><p>　　3.1.2 登錄界面功能一覽</p><p>　　3.2 用戶瀏覽新聞主界面</p><p>　　3.2.1 主界面視圖</p><p>　　圖 3-1聞發(fā)布系統(tǒng)用戶瀏覽新聞主界面－index.html</p><p>　　注：用戶瀏覽新聞主頁(yè)面</p><

24、p>　　1：熱點(diǎn)新聞：顯示今日的熱點(diǎn)新聞。點(diǎn)擊可瀏覽新聞詳細(xì)內(nèi)容。</p><p>　　1：沒(méi)有注冊(cè)的用戶可以點(diǎn)擊注冊(cè)進(jìn)行用戶注冊(cè)。</p><p>　　2：注冊(cè)的用戶可以點(diǎn)擊修改進(jìn)行我的資料修改。</p><p>　　3：所有用戶都可以瀏覽某個(gè)欄目下的新聞。</p><p>　　4：點(diǎn)擊頻道可以查看當(dāng)前欄目的所有類別。</p&g

25、t;<p>　　圖 3-2 聞發(fā)布系統(tǒng)查看更多類別界面－newsinclass.html</p><p>　　查看某欄目下所有類別頁(yè)面：顯示新聞欄目下的所有新聞?lì)悇e。</p><p>　　1：點(diǎn)more可以瀏覽類別下更多的新聞。</p><p>　　2：直接點(diǎn)擊新聞標(biāo)題可以瀏覽新聞詳細(xì)內(nèi)容。</p><p>　　圖 3-3 聞發(fā)

26、布系統(tǒng)查看某個(gè)類別所有新聞界面－news.jsp</p><p>　　查看某個(gè)類別下的所有新聞:當(dāng)點(diǎn)擊某個(gè)類別時(shí)，顯示某個(gè)類別下的所有新聞，用戶可以點(diǎn)擊新聞標(biāo)題查看新聞詳細(xì)內(nèi)容。</p><p>　　圖 3-4 聞發(fā)布系統(tǒng)用戶個(gè)人信息－user_modpass.jsp</p><p>　　1:用戶資料修改頁(yè)面：</p><p>　　用戶可以修

27、改自己的資料，其中：1：用戶名不能輸入非法字符，如“*”。</p><p>　　2：原密碼不能為空。</p><p>　　3：新密碼不能為空。</p><p>　　在頁(yè)面通過(guò)javascript驗(yàn)證，可以讓其用戶名不含非法字符，原密碼，新密碼不為空。如果用戶修改電話號(hào)碼，Email,QQ,出生日期。則驗(yàn)證這些輸入的合法性，電話號(hào)碼是否都是數(shù)字，Email是否符合格式

28、，如 xiaoming@sina.com 等。</p><p>　　用戶注冊(cè)頁(yè)面：未注冊(cè)的用戶可在此注冊(cè)，成為新聞發(fā)布系統(tǒng)的注冊(cè)新用戶。</p><p>　　如圖可知，1:用戶輸入的用戶名不能為空且不能包含非法字符.</p><p>　　2:密碼及確認(rèn)密碼均不能為空。</p><p>　　3:當(dāng)用戶輸入電話號(hào)碼，Email,QQ,出生日期時(shí)驗(yàn)

29、認(rèn)其輸入是否有效.</p><p>　　4:當(dāng)用戶點(diǎn)擊注冊(cè)時(shí)，在后臺(tái)驗(yàn)認(rèn)其用戶名是否存在，若存在則提示用戶“用戶名已存在”</p><p>　　圖 3-7 聞發(fā)布系統(tǒng)提示用戶注冊(cè)成功－user_inserted.htm</p><p>　　注：當(dāng)用戶注冊(cè)成功時(shí)，跳轉(zhuǎn)到login.jsp；</p><p>　　圖 3-6 新聞發(fā)布系統(tǒng)新聞內(nèi)容界

30、面</p><p>　　注：新聞詳細(xì)內(nèi)容頁(yè)面.用戶可以查看新聞的詳細(xì)內(nèi)容.</p><p>　　圖 3-7 聞發(fā)布系統(tǒng)發(fā)布新聞評(píng)論界面</p><p>　　1：評(píng)論人可以為空。</p><p>　　圖3-7聞發(fā)布系統(tǒng)查看評(píng)論頁(yè)面-commentcontent.htm</p><p>　　注：用戶點(diǎn)擊“查看評(píng)論”可以查看

31、某條新聞的所有評(píng)論。</p><p>　　3.3用戶新聞管理界面 </p><p>　　圖 3-8 新聞發(fā)布系統(tǒng)用戶登錄頁(yè)面－index.jsp</p><p>　　新聞發(fā)布管理頁(yè)面：注冊(cè)用戶登錄后就時(shí)入到新聞發(fā)布系統(tǒng)新聞管理頁(yè)面：用戶可以進(jìn)行的操作有：</p><p><b>　　1：類別管理</b></p>

32、;<p><b>　　2：新聞管理</b></p><p><b>　　3：欄目管理</b></p><p><b>　　4：用戶管理</b></p><p><b>　　5：評(píng)論管理</b></p><p><b>　　6：日志管

33、理</b></p><p><b>　　7：版權(quán)信息</b></p><p>　　3.3.1 新聞發(fā)布界面</p><p>　　圖 3-9 新聞發(fā)布系統(tǒng)新聞發(fā)布頁(yè)面 –info_add.html</p><p>　　新聞發(fā)布頁(yè)面：注冊(cè)用戶可以在此發(fā)表新聞</p><p>　　3.3.2

34、 新聞管理頁(yè)面</p><p>　　圖 3-10 新聞發(fā)布系統(tǒng)-新聞管理頁(yè)面-info_manager.jsp</p><p>　　新聞管理頁(yè)面：用戶可以對(duì)新聞進(jìn)行管理：1：可以修改發(fā)布的新聞。</p><p>　　2：可以對(duì)發(fā)布的新聞進(jìn)行刪除：用戶一條一條的刪除新聞，也可以批量刪除新聞.</p><p>　　3：可以據(jù)新聞標(biāo)題，新聞內(nèi)容，關(guān)

35、鍵字進(jìn)行新聞的檢索。</p><p>　　5:所有新聞分頁(yè)顯示，每個(gè)頁(yè)面只能顯示八條新聞。</p><p>　　3.3.3 新聞管理功能一覽</p><p>　　1：用戶可以瀏覽當(dāng)日發(fā)表的并通過(guò)管理員審核的當(dāng)日新聞。</p><p>　　2：點(diǎn)擊新聞標(biāo)題可以查看新聞的詳細(xì)內(nèi)容。</p><p>　　3.3.5 新聞統(tǒng)計(jì)

36、量頁(yè)面</p><p>　　圖3-12新聞發(fā)布系統(tǒng)-新聞統(tǒng)計(jì)量頁(yè)面</p><p>　　用戶可以查看每條新聞的點(diǎn)擊量包括年，月，日，總的點(diǎn)擊量。也可按年，月，日將其重新排序顯示.</p><p><b>　　4 后臺(tái)管理頁(yè)面</b></p><p><b>　　4.1管理員管理</b></p&

37、gt;<p>　　4.1.1添加用戶頁(yè)面</p><p>　　用戶添加頁(yè)面-User_add.jsp</p><p>　　用戶添加頁(yè)面：后臺(tái)管理員可以添加用戶。</p><p>　　1：添加的用戶名不能為空且不能包含非法字符，如 “*”。</p><p><b>　　2：密碼不能為空。</b></p&

38、gt;<p><b>　　3：滿足各類驗(yàn)證</b></p><p>　　注：上述操作均可以使用javascript腳本驗(yàn)證實(shí)現(xiàn).</p><p>　　4.1.2 添加用戶頁(yè)面功能一覽</p><p>　　圖3-15新聞發(fā)布系統(tǒng)-用戶添加頁(yè)面</p><p>　　4.1.3 管理用戶頁(yè)面</p>

39、<p>　　圖 3-15 新聞發(fā)布系統(tǒng)-管理用戶頁(yè)面</p><p>　　管理用戶頁(yè)面：管理員可以對(duì)用戶進(jìn)行管理，包括</p><p>　　1：用戶鎖定 由于某些原因管理員可以鎖定用戶使其不能再登錄新聞發(fā)布系統(tǒng)新聞管理頁(yè)面。</p><p>　　2：用戶審核 由于管理員添加的用戶默認(rèn)是通過(guò)審核的，而前臺(tái)注冊(cè)用戶是未通過(guò)審核的，所以在此要求管理員對(duì)新注冊(cè)

40、的用戶進(jìn)行審核。如上圖所示：通過(guò)審核的用戶顯示已審核。而未通過(guò)審核的用戶則要等待管理員審核。</p><p><b>　　4.2類別管理</b></p><p>　　4.2.1 添加欄目頁(yè)面</p><p>　　圖 3-15 新聞發(fā)布系統(tǒng)-添加欄目頁(yè)面</p><p>　　欄目添加頁(yè)面：管理員可以添加欄目。</p&

41、gt;<p>　　1：填寫的欄目名稱不能為空且不能包含非法字符</p><p>　　2：欄目描述不能為空且不能包含非法字符。</p><p>　　3：欄目順序?yàn)閺臄?shù)據(jù)庫(kù)讀出的不用管理員添加的，要想修改欄目順序要到欄目管理中修改。</p><p>　　4：只允許添加八個(gè)欄目，若滿八個(gè)再添加則會(huì)提示管理員不能再添加.</p><p>

42、;　　4.2.2添加欄目功能一覽</p><p>　　4.2.3欄目管理頁(yè)面</p><p>　　圖 3-15 新聞發(fā)布系統(tǒng)-欄目管理頁(yè)面</p><p><b>　　欄目管理頁(yè)面：</b></p><p>　　1：用戶可以在此修改欄目的名稱，描述，及順序。此處欄目順序可以重復(fù)。在前臺(tái)顯示時(shí)若欄目順序相同則按添加時(shí)間順序

43、顯示欄目。(若輸入不是數(shù)字則提示“只能輸入數(shù)字”)</p><p>　　2：更改完要修改的內(nèi)容，點(diǎn)擊“修改” 可以修改欄目。</p><p>　　3：當(dāng)點(diǎn)擊刪除時(shí)，首先要檢查其下是否有類別，若有類別則不能刪除，提示管理員“您只能刪除空類別”。</p><p>　　4.2.4 欄目管理功能一覽</p><p>　　4.2.5添加子類頁(yè)面<

44、/p><p>　　圖 3-16 新聞發(fā)布系統(tǒng)-添加類別頁(yè)面</p><p>　　類別添加頁(yè)面：管理員可以添加欄目下的類別</p><p>　　1:類別名稱不能為空且不能包含非法字符。</p><p>　　2：分類描述不能為空且不能含有非法字符。</p><p>　　3：分類順序只能為數(shù)字。</p><p

45、>　　4：在后臺(tái)按類別順序顯示類別。</p><p>　　4.2.4 添加類別功能一覽</p><p>　　4.2.5分類管理頁(yè)面</p><p>　　圖 3-17 新聞發(fā)布系統(tǒng)-添加類別頁(yè)面</p><p>　　管理員可以對(duì)類別進(jìn)行管理：</p><p>　　1：修改要進(jìn)行修改的類別的內(nèi)容，點(diǎn)擊修改。</

46、p><p>　　2：分類名稱不能為空。</p><p>　　3：選擇類別所屬的欄目。</p><p>　　4：填寫要更改的順序。若輸入不是數(shù)字則提示“只能輸入數(shù)字”</p><p>　　5：點(diǎn)擊刪除時(shí)：先檢查類別下是否有新聞，若有新聞則不能刪除。</p><p>　　4.2.6類別管理功能一覽</p><

47、;p><b>　　5 日志管理</b></p><p>　　5.1 用戶日志管理頁(yè)面</p><p>　　圖 3-19 新聞發(fā)布系統(tǒng)-日志管理頁(yè)面</p><p><b>　　6新聞評(píng)論管理</b></p><p><b>　　新聞評(píng)論管理：</b></p>

48、<p>　　1：管理員可以查看所有的新聞評(píng)論。</p><p>　　2：管理員可以檢索某條新聞的所有評(píng)論。</p><p>　　3：管理員可以刪除或批量刪除新聞評(píng)論。</p><p><b>　　7 文章審核管理</b></p><p>　　管理員可以對(duì)用戶發(fā)布的新聞進(jìn)行審核，只有通過(guò)審核的新聞才能被用戶看到