【正文】 12):1718[24] 改進(jìn)Web 應(yīng)用的用戶體驗(yàn)[J].電腦知識(shí)與技術(shù), 2007(3) : 13,81附錄A：各功能模塊核心代碼附A1：狀態(tài)回復(fù)字?jǐn)?shù)統(tǒng)計(jì)部分核心代碼function maxLimit(){ var num=$(this).val().substr(0,140)。參考文獻(xiàn)[1] G Cormode，B．Krishnamurthy．Key differences between and [J]，F(xiàn)irst Monday,13(6)，2656[2] Tim O39。另外，好友搜索功能僅靠一個(gè)搜索框?qū)崿F(xiàn)，并未提供專門的搜索頁面，系統(tǒng)應(yīng)該根據(jù)好友提供的地點(diǎn)，性別等內(nèi)容所轄搜索范圍，實(shí)現(xiàn)組合查詢等高級(jí)搜索。當(dāng)系統(tǒng)中用戶越來越多，不可避免地造成狀態(tài)內(nèi)容多而雜，而由于SNS社區(qū)的定位本來應(yīng)該是用戶產(chǎn)生內(nèi)容，管理員不宜對(duì)內(nèi)容本身做過多地限制，這使得如何保持本系統(tǒng)最初的生活資訊平臺(tái)定位成為需要進(jìn)一步思考的問題。這樣不可避免地涉及到用戶隱私保護(hù)的問題，這也是現(xiàn)今SNS網(wǎng)站遇到的共同問題。本系統(tǒng)不僅僅將設(shè)計(jì)局限于視覺效果方面，更多地考慮用戶在使用方面的心理，習(xí)慣，經(jīng)驗(yàn)等多方面特征，以設(shè)計(jì)出符合目標(biāo)用戶群體的界面。，對(duì)實(shí)際效果做了展示詳細(xì)，描述了留言回復(fù)，表單驗(yàn)證，日歷控件，特效插件的設(shè)計(jì)思路和具體實(shí)現(xiàn)方法，并結(jié)合用戶界面設(shè)計(jì)原則對(duì)各功能進(jìn)行了評(píng)價(jià)。為了使開發(fā)人員更注重于業(yè)務(wù)邏輯設(shè)計(jì)，系統(tǒng)在后端技術(shù)方面采用J2EE輕量級(jí)框架技術(shù)SSH框架。介紹了本系統(tǒng)前端所采用的主要技術(shù)，HTML+CSS+JQuery實(shí)現(xiàn)頁面布局和視覺效果。：以武漢大學(xué)學(xué)生為主要對(duì)象的社區(qū)，利用其現(xiàn)實(shí)聯(lián)系，為其提供生活資訊。接下來簡要概括了SNS網(wǎng)站的功能特點(diǎn)，即自我展示和與好友的互動(dòng)。前端界面設(shè)計(jì)方面，本系統(tǒng)努力遵循UI設(shè)計(jì)的理念，重視UI設(shè)計(jì)的七個(gè)原則，為用戶提供最好的用戶體驗(yàn)。第五章 總結(jié)與展望 總結(jié)本系統(tǒng)總體框架為Ajax+SSH，Ajax主要用來實(shí)現(xiàn)前臺(tái)和后臺(tái)的交互，在前端的設(shè)計(jì)和實(shí)現(xiàn)方面，主要采用HTML+CSS，使用Javascript作為連接Ajax各部分的腳本語言。最后，可以通過speedView和speedRemove兩個(gè)函數(shù)對(duì)圖片的運(yùn)動(dòng)速度進(jìn)行控制。在本例中，對(duì)照片滑動(dòng)效果起作用的參數(shù)是marginTop，marginLeft，top，left，width，height和padding七個(gè)屬性，通過設(shè)定合適的值，實(shí)現(xiàn)了較為理想的效果。由于對(duì)圖片大小進(jìn)行了修改，對(duì)圖片的動(dòng)畫效果函數(shù)animate（params, [duration], [easing], [callback])）中的相應(yīng)參數(shù)也應(yīng)做修改。css文件中對(duì)圖片定義了一個(gè)hover類，決定鼠標(biāo)懸停時(shí)的樣式，js代碼中，采用addClass（）函數(shù)將hover類添加到圖片中，圖片即放大。所有照片被放在divcontainer中，用ul元素以列表形式展現(xiàn)，通過設(shè)置ul中l(wèi)i元素的float屬性，使其并排排列，通過定義container和每張圖片的尺寸，決定每行顯示的圖片數(shù)量。照片墻右邊的圖片是一幅空白頭像，等候新用戶注冊(cè)，鼠標(biāo)移動(dòng)到上面以后，提示“馬上注冊(cè)”，點(diǎn)擊即進(jìn)入注冊(cè)頁面，如圖（b）所示。照片墻采用jQuery插件來實(shí)現(xiàn)。在SNS社區(qū)中，頭像是展示一個(gè)用戶個(gè)人風(fēng)采最直接的手段，用戶在社區(qū)中活動(dòng)時(shí)，也常常通過頭像來辨認(rèn)好友。 照片展示特效隨著前端技術(shù)的快速發(fā)展，網(wǎng)站的風(fēng)格漸漸多樣化，特別是針對(duì)年輕人的網(wǎng)站，更是越來越追求視覺上的美感。 功能模塊的界面設(shè)計(jì)評(píng)價(jià)日歷控件避免了用戶進(jìn)行錯(cuò)誤輸入，并且將本來依靠鍵盤輸入的內(nèi)容轉(zhuǎn)換成可視化的鼠標(biāo)點(diǎn)擊，更易于使用，并且方便系統(tǒng)數(shù)據(jù)庫錄入數(shù)據(jù)采取統(tǒng)一的格式。： 活動(dòng)發(fā)起頁面的日歷控件效果控件對(duì)當(dāng)前日期后的三個(gè)月給出了展示，方便用戶查看，用戶填寫了開始時(shí)間后，選擇結(jié)束時(shí)間時(shí)，開始時(shí)間之前的內(nèi)容自動(dòng)設(shè)為不可選狀態(tài)，有效避免了不合法輸入。在該文件用來顯示年月下拉框的_generateMonthYearHeader函數(shù)中，將10相應(yīng)地改為50，下拉框中可供選擇的年份即從1961年開始，基本可以滿足系統(tǒng)目標(biāo)群體的需求。另外，為了使日歷控件的風(fēng)格和網(wǎng)站整體風(fēng)格一致，還需引用主題包，在開發(fā)包中加入redmond這一主題包，再引用其css即可：link rel=stylesheet href=./themes/redmond//使用時(shí)，將生日的輸入框id設(shè)為datepicker，并在header添加如下代碼，即可顯示下拉模式的日歷控件：$(function() { $( datepicker ).datepicker({ changeMonth: true, changeYear: true })。例如，年份月份的選擇有默認(rèn)的逐月選擇模式，適合選擇靠近當(dāng)前日期的時(shí)間，還提供了以下拉方式選擇年份和月份的模式，方便用戶選擇較大范圍內(nèi)的日期，本系統(tǒng)視實(shí)際需求使用不同樣式。使用時(shí)，首先在網(wǎng)頁中加載開發(fā)包中 jQuery 核心庫文件，再按需加載 、 及各組件代碼文件，如設(shè)置可視組件外觀需同時(shí)加載 CSS 主題文件。3. 組件間相對(duì)獨(dú)立，可按需加載，避免浪費(fèi)帶寬拖慢網(wǎng)頁打開速度。 jQuery UI介紹jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對(duì)話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。 日歷控件系統(tǒng)中有多處地方需要用戶輸入日期，日期的格式多種多樣，為了避免因?yàn)楦袷交蛘咂渌`輸而對(duì)后臺(tái)處理數(shù)據(jù)所造成影響，本系統(tǒng)提供日歷控件，用戶只用點(diǎn)擊日期，輸入框中即自動(dòng)填進(jìn)標(biāo)準(zhǔn)格式的內(nèi)容。： 添加管理員在注冊(cè)功能模塊中，根據(jù)鼠標(biāo)停留的區(qū)域給用戶響應(yīng)的提示，用戶輸入錯(cuò)誤時(shí)，系統(tǒng)給出紅色輸入框的提示，用戶只需再次輸入即可，與error tolerance原則相符合。在管理員子系統(tǒng)中，添加管理員時(shí)系統(tǒng)會(huì)檢測新加的管理員的用戶名是否已被占用。new一個(gè)正則表達(dá)式對(duì)象，傳到pattern參數(shù)中的是輸入框中定義的reg屬性的值，objVallue則是用戶輸入的內(nèi)容，通過test（）函數(shù)判斷二者是否匹配，以此決定change_error_style（obj,msg,action_type）和change_tip（obj,action_type）的action_type參數(shù)的值。attributes是一個(gè)字符串，指定了正則表達(dá)式的模式或其他正則表達(dá)式。RegExp是JS的正則表達(dá)式對(duì)象，有pattern和attribute兩個(gè)參數(shù)，參數(shù)HandlerOut觸發(fā)的函數(shù)較為簡單，將pvtip用removeClass函數(shù)去掉即可。bgiframe（）是jQuery一款插件中提供的函數(shù)，用來解決 IE6 zindex 的問題，如果網(wǎng)頁上有浮動(dòng)區(qū)塊和下拉選單重疊時(shí)，在IE6會(huì)看到下拉選框總是把浮動(dòng)區(qū)塊覆蓋住，無論怎么調(diào)整 zindex 都是沒用的，而用 bgiframe 就可以輕松解決這個(gè)問題。詳細(xì)代碼如附A4所示。用戶鼠標(biāo)點(diǎn)擊輸入框外的區(qū)域時(shí)，blur事件被觸發(fā)，調(diào)用相關(guān)函數(shù)，判斷輸入框中的內(nèi)容是否合法，這里可以采用正則表達(dá)式來判斷，如果不合法，通過改變輸入框的樣式進(jìn)行提示。系統(tǒng)實(shí)現(xiàn)用戶輸入時(shí)的提示和輸入后的驗(yàn)證。 功能模塊的界面設(shè)計(jì)評(píng)價(jià)系統(tǒng)對(duì)用戶的輸入控制在140字以內(nèi)，spantextCount的設(shè)計(jì)對(duì)用戶進(jìn)行實(shí)時(shí)的提醒，顯示剩余字?jǐn)?shù)，方便用戶控制輸入，和UI設(shè)計(jì)原則的suitability for the task和Selfdescriptiveness的內(nèi)涵符合。}最后點(diǎn)擊提交按鈕觸發(fā)submit事件，將textlimit中的內(nèi)容通過DOM操作，顯示在頁面上。值得一提的是，需要用replace函數(shù)將html頁面的表情代碼替換為圖片，以方便顯示在網(wǎng)頁上。用戶點(diǎn)擊表情按鈕，onclick事件被觸發(fā)，調(diào)用show（）函數(shù)，并定義其樣式，繪制出表情面板，再用append函數(shù)將其追加至html文檔中，與此同時(shí)用相關(guān)函數(shù)控制表情面板的顯示位置。每次textlimit的keyup事件被觸發(fā)，則調(diào)用maxLimit函數(shù)。系統(tǒng)對(duì)用戶輸入的內(nèi)容限制在140字以內(nèi)，用戶輸入時(shí)，系統(tǒng)自動(dòng)顯示當(dāng)前輸入字?jǐn)?shù)。當(dāng)用戶點(diǎn)擊回復(fù)框時(shí)，如果當(dāng)前textlimit的值為默認(rèn)title值，則自動(dòng)清空。核心代碼見附A1。 狀態(tài)回復(fù)功能模塊具體實(shí)現(xiàn)這一功能模塊將box和fb兩個(gè)元素放進(jìn)layout這個(gè)塊級(jí)元素中，方便迭代，：（a）（b）（c） 狀態(tài)回復(fù)功能模塊圖示（a）中可以看到，當(dāng)用戶尚未點(diǎn)擊輸入框時(shí)，恢復(fù)按鈕，表情按鈕等均未顯示，而是通過預(yù)先顯示“添加回復(fù)”字樣對(duì)用戶進(jìn)行提示。 狀態(tài)回復(fù)功能模塊實(shí)現(xiàn)思路為了節(jié)省頁面空間，狀態(tài)的回復(fù)框在用戶點(diǎn)擊之前為收起狀態(tài)，用戶點(diǎn)擊后展開，根據(jù)用戶的輸入情況顯示已輸入字?jǐn)?shù)和最大輸入字?jǐn)?shù)，用戶通過點(diǎn)擊表情按鈕，插入表情，點(diǎn)擊回復(fù)按鈕，輸入框中的內(nèi)容即顯示在頁面上。為了提供更活潑的交流方式，回復(fù)中可添加表情。下一章將對(duì)這些技術(shù)的具體實(shí)現(xiàn)進(jìn)行詳細(xì)講解。 系統(tǒng)核心技術(shù)系統(tǒng)的前端開發(fā)部分主要采用jQuery框架實(shí)現(xiàn)頁面的動(dòng)態(tài)效果，并采用Ajax技術(shù)與服務(wù)器進(jìn)行交互，提供良好的用戶體驗(yàn)。 軟件接口操作系統(tǒng)：windows xp/NT/2000以及以上版本、Linux系統(tǒng)；數(shù)據(jù)庫：MySql；瀏覽器：，或Firefox，chrome等；Web服務(wù)器：Tomcat；分辨率：最佳效果1024*768分辨率；開發(fā)工具：MyEclipse+Tomcat+MySql，Dreamweaver CS5；開發(fā)語言：JAVA，Javascript；建模工具：Rational Rose；圖片處理：Adobe PhotoShop CS5。 系統(tǒng)界面展示 系統(tǒng)登錄界面 系統(tǒng)首頁 用戶接口本系統(tǒng)基于B/S模式，提供給用戶的操作界面主要有：用戶登錄、注冊(cè)頁面（系統(tǒng)首頁），用戶首頁，個(gè)人主頁，日志頁面，相冊(cè)頁面，收藏頁面，群組頁面，好友頁面。10：分享管理：用戶可以分享瀏覽的日志、相冊(cè)、照片、收藏、帖子，分享的信息出現(xiàn)在自己以及所有好友的新鮮事中。A向B申請(qǐng)加為好友，B同意好友申請(qǐng)，則A和B互相成為對(duì)方的好友。用戶可以創(chuàng)建、解散群組，管理員可以解散群組。交易雙方在線上聯(lián)系，線下交易。5. 照片管理：所有照片統(tǒng)一組織在相冊(cè)下，用戶可以上傳、刪除、編輯、查看、分享照片，管理員可以查看、刪除照片。：用戶可以發(fā)表日志，編輯日志，查看和刪除日志。（4）站內(nèi)信：用戶可以寫站內(nèi)信給所有人（包括好友和非好友），也可以以站內(nèi)信的形式回復(fù)自己收到的站內(nèi)信。個(gè)人資料包括昵稱、真實(shí)姓名、性別、生日、學(xué)院、專業(yè)、郵箱、電話、愛好、頭像、星座、省份、城市等。個(gè)人狀態(tài)的格式為中英文、常用字符、可選表情，長度限度為140個(gè)字符。（2）用戶通過輸入用戶名和密碼登陸系統(tǒng)，如果不正確，彈出提示信息，要求重新輸入，如果正確，登錄成功。這些項(xiàng)目為必填項(xiàng)目，其他的用戶信息可以在注冊(cè)登錄以后，從個(gè)人資料 系統(tǒng)功能圖管理模塊中修改。管理員：登錄后臺(tái)管理系統(tǒng)，可以對(duì)內(nèi)容進(jìn)行添加、刪除、修改、查找等基本功能，管理、維護(hù)網(wǎng)站。后臺(tái)包括對(duì)用戶發(fā)布的內(nèi)容進(jìn)行查找，刪除等操作，維護(hù)和管理系統(tǒng)。： SSH結(jié)構(gòu)圖第