【正文】 。 盡量重復(fù)以上的交互體驗(yàn)過程，盡可能的完善網(wǎng)站交互功能。 （ I google）缺陷 1 缺陷 2 缺陷 3 頁面里每個(gè)小版塊可編輯的范圍很小，甚至無法編輯 刪除頁面中某一版塊時(shí)無確認(rèn)鍵，很容易使用戶出錯(cuò)。于是，一種致力于幫用戶解決所有網(wǎng)絡(luò)生活問題的網(wǎng)站出現(xiàn)了 —— 個(gè)人門戶。我們生活的方方面面都已更多的依賴于網(wǎng)絡(luò)。 我們往往用“用戶粘性”這一標(biāo)準(zhǔn)來衡量一個(gè)網(wǎng)站設(shè)計(jì)的成敗。因此，目前，個(gè)人 門戶類網(wǎng)站層出不窮，甚至打出了 ，一批批個(gè)性化門戶網(wǎng)站紛紛上線，都希望在這段肥地分得一杯羹。 成功的交互設(shè)計(jì)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”，即知道網(wǎng)站開發(fā)者與用戶雙方的期許和目標(biāo)。 （ 1）用戶實(shí)例 圖 31 李菁菁 （ 2） 用戶需求 功能需求： ① 通過網(wǎng)絡(luò)聯(lián)絡(luò)老朋友， 結(jié)交新朋友 ； ② 關(guān)注各式新聞資訊，特別是娛樂、健身類； ③ 網(wǎng)頁主題可選擇任意更換。他們通常喜歡網(wǎng)絡(luò)也給予他們更多的自主，他們喜歡探索， 他們比女性不能忍耐，希望能第一時(shí)間運(yùn)用網(wǎng)站各項(xiàng) 功能， 他們不夠細(xì)心，往往容易出錯(cuò)，因此更需要網(wǎng)站有強(qiáng)大的糾錯(cuò)和彌補(bǔ)犯錯(cuò)失誤的功能。 場(chǎng)景二 用戶 B ：新注冊(cè)的用戶 問題： 1) B 用戶剛注冊(cè)為會(huì) 員，登錄私有頁面發(fā)現(xiàn)沒有任何頁簽或模塊，失去了興趣，同時(shí)，此時(shí)也找不到方向去馬上添加頁簽。 場(chǎng)景四 用戶 D： 網(wǎng)站的 普通用戶 問題： 1) 用戶 D 在頁面瀏覽時(shí)，希望將自己珍藏的優(yōu)秀的頁面與朋友一起分享，但是不知道怎樣去分享。公開頁面，主要提供給其他用戶瀏覽。 Netvibes（ ） 優(yōu)點(diǎn) 1 描述： 添加內(nèi)容時(shí)，以下拉框形式彈出“添加內(nèi)容”模塊（如下圖 ），而無需跳轉(zhuǎn)頁面。 修改 ： 發(fā)完信息后，頁面仍停留在發(fā)信息版塊，以便用戶繼續(xù)給其他人發(fā)送信息。這兩方面都是我們?cè)谶M(jìn)行交互產(chǎn)品設(shè) 計(jì)時(shí)必須重點(diǎn)考慮的，因?yàn)樗紭O大的影響著用戶體驗(yàn)的過程。因此，本網(wǎng)站所使用的交互模式也均是經(jīng)過分析選擇、體驗(yàn)對(duì)比而定的。折疊區(qū)域分類儲(chǔ)藏信息，隱藏不必要的信息。設(shè)置逃逸出口，使用戶可以隨時(shí)放棄任務(wù)，回到原來頁面 。 設(shè)計(jì)成果圖： 圖 613 圖 613 編輯標(biāo)題 設(shè)計(jì)源代碼： 表 68 表 68 直接編輯的 交互設(shè)計(jì) Footnote Label Interactions 1 編輯了 OnKeyUp: Case 1: Set value of variable OnLoadVariable equal to text on widget 編輯了 and text on widget 標(biāo)題了 equal to [[OnLoadVariable]] OnLostFocus: Case 1: Set 空間標(biāo)題 state to 標(biāo)題 7)頁簽 問題： 用戶 需要在所有信息中找到自己想要的那一種類的信息。 應(yīng)用： 在我的公開頁面，自己可以發(fā)布文章，供來訪者閱讀，同時(shí)他們可以添加評(píng)論。 解決 ： 提供評(píng)論版塊。在可讀的地方，直接寫入，即編輯。 設(shè)計(jì)成果圖： 圖 610 圖 610 搜索聯(lián)系人版塊 設(shè)計(jì)源代碼： 表 6表 6表 65 表 63 自動(dòng)填充 設(shè)計(jì) 1 footnote label interaction specification 1 1 OnKeyUp: Case 1 (If text on widget 1 equals 李 ): Set 2 state to 2 Case 2 (Else If text on widget 1 equals 李小 ): Set 2 state to 3 Case 3 (Else If text on widget 1 does not equal 李 ): Set 2 state to 1 OnFocus: Case 1 (If text on widget 1 equals 李 ): Set 2 state to 2 Case 2 (Else If text on widget 1 equals 李小 ): Set 2 state to 3 OnLostFocus: Case 1: Set 2 state to 1 鍵入李、或李小、或非 ”李 “人名，自動(dòng)填充 表 64 自動(dòng)填充 設(shè)計(jì) 2 footnote label interaction 1 m1 OnChange: Case 1 (If selected option of m1 equals 李安 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李雪 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李玉 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小龍 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李大鎏 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小琳 ): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小雙 ): Set text on widget 1 equal to selected option of m1 表 65 自動(dòng)填充 設(shè)計(jì) 3 footnote label interaction 1 m2 OnChange: Case 1 (If selected option of m2 equals 李小琳 ): Set text on widget 1 equal to selected option of m2 Case 1 (Else If selected option of m2 equals 李小雙 ): Set text on widget 1 equal to selected option of m2 Case 1 (Else If selected option of m2 equals 李小龍 ): Set text on widget 1 equal to selected option of m2 4)光 箱 問題： 用戶需要在不切換頁面的同時(shí)，達(dá)到對(duì)某個(gè)動(dòng)作指示信息強(qiáng)烈的關(guān)注 。 應(yīng)用： “添加內(nèi)容”板塊，有三個(gè)種類可選擇，“分類添加”、“最重要的添 加”、“下載添加”。交互流程如圖 66： 開 始公 開 頁 面是 否 保 存群 組 （ 數(shù) 量 已 更新 ）結(jié) 束是群 組創(chuàng) 建 群 組添 加 群 名 稱否 圖 66 創(chuàng)建群組 流程圖 7） 發(fā)帖 用戶進(jìn)入自己的群，在帖子區(qū)域，點(diǎn)擊“發(fā)帖”，彈出編輯框，寫好編輯內(nèi)容后，確認(rèn)發(fā)送帖子，此時(shí)頁面回轉(zhuǎn)至帖子版塊，在帖子版塊下的“最新回復(fù)”欄將看到剛剛發(fā)送的帖子題目，且置頂。 總論 在本次設(shè)計(jì)過程中， 交互設(shè)計(jì) 將分成兩部分予以呈現(xiàn)和解釋。 修改 ： 可直接在網(wǎng)頁上配置模塊 。在理論與實(shí)際的結(jié)合之上，才能為最終的交互設(shè)計(jì)打下堅(jiān)實(shí)的基礎(chǔ)。 經(jīng)過需求分析我們 得到了 網(wǎng)站 初步的功能模塊，再輔之以場(chǎng)景分析，最終完善了各項(xiàng)功能， 于是便對(duì)網(wǎng)站各項(xiàng)功能（ 內(nèi)容 ） 進(jìn)行了如下設(shè)計(jì)。 解決： 1) 在添加內(nèi)容區(qū)域推出下載 widget 版塊，根據(jù)自己的了解輸入網(wǎng)址，下載自己需要的 widget 添加到頁面。包括使用官方博客的鏈接，公開頁面的體驗(yàn)等，都是拉近用戶的方式。 交互需求： ① 網(wǎng)站注冊(cè)時(shí)僅填寫最少量信息，注冊(cè)結(jié)束登錄后再完善個(gè)人資料； ② 以下拉或彈出窗口的形式， 防止總是跳轉(zhuǎn)頁面，信息盡量在一個(gè)頁面顯示。并根據(jù)各自特點(diǎn)，著重描述他們對(duì)功能和交互模式的不同需求。交互設(shè)計(jì)處于結(jié)構(gòu)層。 本課題選擇 axure 這一新興原型設(shè)計(jì)工具，避開了 Word、 Visio、 Dreamweave等對(duì)交互表達(dá)不好、不利于演示、操作難度大、需要 html 知識(shí)等劣勢(shì)。 交互原型設(shè)計(jì)的重要性 在交互產(chǎn)品設(shè)計(jì)實(shí)踐中，設(shè)計(jì)師非常關(guān)注影響用戶行為與習(xí)慣的各種因素。此過程同時(shí)結(jié)合了對(duì)幾個(gè) 個(gè)人門戶網(wǎng)站 的體驗(yàn)，去粗取精、最后整 合 優(yōu)秀的交互模式于自己設(shè)計(jì)之中。 添加好友模塊，接收對(duì)方申請(qǐng)，只能選“同意并添加對(duì)方為好友”，用戶非常被動(dòng)。 設(shè)計(jì)成果的表現(xiàn)形式為 RP 文件的動(dòng)態(tài)交互原型，及對(duì)應(yīng)的電子商務(wù)規(guī)劃設(shè)計(jì)文檔。列出網(wǎng)站的優(yōu)缺點(diǎn)對(duì)照表 （見表 1） 。 通過對(duì)比分析， 設(shè)計(jì)更加完善的交互模式， 提升用戶體驗(yàn)的滿意度。在交互設(shè)計(jì)中， 一般把這樣的幫助我們與未來產(chǎn)品進(jìn)行交互， 從而獲得第一手體驗(yàn)， 并發(fā)掘新思路的裝置，稱之為“原型” 。在 整個(gè)課題進(jìn)程中，提升 網(wǎng)站交互分析、 文筆、審美、用戶心理分析、及運(yùn)用原型設(shè)計(jì)工具的能力。而同一類型的門戶網(wǎng)站 ,用戶可能選擇多個(gè)進(jìn)入瀏覽。但是擁有良好用戶體驗(yàn)的網(wǎng)站并不很多，許 多網(wǎng)站正掙扎在生死存亡的邊緣。 關(guān)于網(wǎng)站內(nèi)容設(shè)計(jì)目標(biāo)：對(duì)于網(wǎng)站內(nèi)容設(shè)計(jì)，要符合 個(gè)性化門戶的獨(dú)特之處，在 內(nèi)容 上有一定 的創(chuàng)新，使整個(gè)內(nèi)容也能跟上步伐， 更加個(gè)性化 。 收集相關(guān)材料，撰寫網(wǎng)站規(guī)劃書。 只 能 選 擇網(wǎng) 站 內(nèi)的 主題，用戶被局限在網(wǎng)站推出的內(nèi)容中。通過個(gè)人門戶，用戶可以根據(jù)個(gè)人喜好，自由的添加內(nèi)容，布局頁面 .個(gè)人門戶是互聯(lián)網(wǎng)發(fā)展的必然趨勢(shì)。在日常的工作，學(xué)習(xí)，生活中，每人每天需要接觸不同的網(wǎng)站，點(diǎn)擊進(jìn)入數(shù)十個(gè)門戶。而個(gè)人門戶網(wǎng)站，是用戶忠誠度最高的一類網(wǎng)站，良好的交互設(shè)計(jì)必將帶來更高的用戶粘性。但是擁有良好用戶體驗(yàn)的網(wǎng)站并不很多，許多網(wǎng)站正掙扎在生死存亡的邊緣。只有明確了雙方的需求，才能以此為指引，設(shè)計(jì)出更加適應(yīng)用戶和網(wǎng)站開發(fā)者的功能模塊及交互行為。 姓名： 所在城市： 網(wǎng)齡（年）： 李菁菁 杭州 5 職業(yè) 每天上網(wǎng)時(shí)間 上網(wǎng)主要工作 大學(xué)生 不定 娛樂、交友 交互需求： ① 應(yīng)該盡可能幫助用戶避免要求他們記住各種信息，例如好友搜索，最好可以通過信息引導(dǎo)； ② 要在用戶完成某項(xiàng)操作后進(jìn)行提示，系統(tǒng)給予反饋，使他們知道自己是否達(dá)成目標(biāo)； ③網(wǎng)站內(nèi)隨處有信息提示； ④ 當(dāng) 使用過程出現(xiàn)錯(cuò)誤，能明確指出錯(cuò)誤原因，并使用戶能理解。 （ 1）用戶實(shí)例 圖 33 吳越 （ 2）用戶需求 功能需求： ① 除網(wǎng)站推薦內(nèi)容之外，網(wǎng)站提供搜索工具，方便用戶自主進(jìn)行個(gè)性化搜索； ② 在網(wǎng)頁上給好友發(fā)信息，有利于網(wǎng)絡(luò)信息及時(shí)分享。 2) B 用戶剛注冊(cè)為會(huì)員，希望進(jìn)入頁面可以瀏覽的內(nèi)容比游客身份更多，但是由于自己未添加版塊或好友等，目前能查看的內(nèi)容仍然與游客身份差不多。 2) 用戶 D 在給頁面添加內(nèi)容時(shí)，添加版塊覆蓋了原有頁面的部分內(nèi)容，以至于用戶在添加內(nèi)容時(shí)，看不到被添加進(jìn)去的內(nèi)容置于頁面哪個(gè)版塊，即添加是否成功。除了可以在公開頁面自由添加模塊，同時(shí)它還具有寫博和群組討論的功能，集合了博客、社區(qū)、個(gè)性化主頁于一體。 圖 51 增加內(nèi)容前 圖 52 增加內(nèi)容 后 優(yōu)點(diǎn) 2 描述：可以浮動(dòng)文字的形式顯示信息。 圖 521 發(fā)信息前 圖 522 發(fā)信息后 缺點(diǎn) 2 描述： 注冊(cè)過程需要填入郵箱，但注冊(cè)成功并不需要郵箱，這就難免使某些用戶利用他人郵箱進(jìn)行不良行為，給他人帶來困擾，影響網(wǎng)站形象。以下， 分別 對(duì)兩類設(shè)計(jì) 進(jìn)行詳細(xì)介紹。以下將對(duì)本課題中重點(diǎn)的交互模式設(shè)計(jì)進(jìn)行介紹。不僅可以幫助用戶快速找到自己想要的信息，而且可以保持界面的整潔 。 應(yīng)用： 用戶在添加頁簽的時(shí)候，將出現(xiàn)燈箱效果 ，彈出命名頁簽 窗口，此時(shí)的頁 面其余部分均至于陰影之下，也不可點(diǎn)擊，只能聚焦到添加窗口。 解決 ： 橫或縱向排布頁簽，頁簽下的模塊內(nèi)容隨著頁簽的不同而改