【正文】 結(jié)束 判段 文檔 動作產(chǎn)生的方向 可能發(fā)生的動作 1） 登錄 用戶在登錄時，如果沒有注冊則阻止登錄，提示用戶先注冊，注冊成功則進入私有頁面，注冊失敗則停留在注冊頁面；若用戶名密碼錯誤，提示重新輸入，若輸入正確則進入私有頁面 。交互流程如圖 65： 開 始公 開 頁 面相 冊創(chuàng) 建 相 冊添 加 相 冊名 稱管 理 相 冊 （ 數(shù)目 已 更 新 ）是 否 保 存上 傳 相 片管 理 相 冊（ 再 更 新 ）結(jié) 束是否 圖 65 創(chuàng)建相冊 流程 圖 6） 創(chuàng)建群組 進入我的公開頁面群組頁簽，點擊創(chuàng)建新群組 ,隨即打開“創(chuàng)建群組”頁面，此時鍵入群組名稱，確定后，頁面將切回群組頁簽，此時“群組”版塊已更新，剛剛創(chuàng)建的群組名稱顯示在此版塊。 解決 ： 在每次用戶輸入信息后，都自動即時校驗用戶所輸入的信息是否正確，避免用戶全部提交后才發(fā)現(xiàn)問題，需要全部重寫。 解決 ： 制作成點擊后可迅速打開或折疊的面板，通過折疊區(qū)域分類儲藏信息。 設(shè)計成果圖： 圖 69 圖 69 添加內(nèi)容版塊 設(shè)計源代碼： 表 62 表 62“添加內(nèi)容”可折疊版面的交互設(shè)計 footnote label interaction specification 1 OnClick: Case 1: Set 添加內(nèi)容 1 state to 分類 Hide 分類 panel 右邊跳轉(zhuǎn)至分類狀態(tài) 2 OnClick: Case 1: Set 添加內(nèi)容 1 state to 重要 跳轉(zhuǎn)至 “最重要的 ``狀態(tài) 3 OnClick: Case 1: Set 添加內(nèi)容 1 state to 下載 Hide 下載等待 右側(cè)跳轉(zhuǎn)狀態(tài) 3)自動填充 問題： 用戶在選擇某個名稱，如人名，地名時，需要輸入他們的完整名 稱。 設(shè)計原因： 便于幫助用戶查找信息，幫助其記憶。 設(shè)計原因： 通過燈箱效果，掩蓋頁面信息，使頁面顯得不冗雜，更加美觀 。 設(shè)計成果圖： 圖 612 圖 612 相冊 設(shè)計源代碼 ： 表 67 表 67“豆腐干”模式的 交互設(shè)計 Footnote Label Interactions 1 OnClick: Case 1: Set 大圖 state to State1 2 OnClick: Case 1: Set 大圖 state to 2 3 OnClick: Case 1: Set 大圖 state to 3 4 OnClick: Case 1: Set 大圖 state to 4 5 OnClick: Case 1: Set 大圖 state to 5 6） 直接編輯 問題 ：用戶想要在頁面上直接編輯某輕量級的文字，而不需要切換頁面。可以用 對比 鮮明的顏色，形狀，大小或字體。 設(shè)計成果圖： 圖 614 圖 614 頁簽 設(shè)計源代碼： 表 69 表 69 頁簽切換操作的 交互設(shè)計 Footnote Label Interactions Specification 1 OnClick: Case 1: Set 頁簽 state to 交友 可切換 2 OnClick: Case 1: Set 頁簽 state to 娛樂 3 新聞標題 OnClick: Case 1: Set 頁簽 state to 新聞 4 OnClick: Case 1: Set text on widget 頁面名稱 equal to Show 燈箱 點擊增加頁簽 8） 評論框 問題： 用戶希望對他所了解的事物從不同方面進行評價。 設(shè)計原因： 公開頁面的日志是用戶最希望與他人分享的信息，目前博客中盛行。對文章進行評論。而且他們上網(wǎng)總是會進入個人門戶去瀏覽信息，希望一站式解決一切網(wǎng)絡(luò)生活。 解決 ： 橫或縱向排布頁簽，頁簽下的模塊內(nèi)容隨著頁簽的不同而改變 ， 在不切換頁面的前提下分類查看用戶所需的信息。 設(shè)計原因： 使用“豆腐干”，可以使用戶快速瀏覽數(shù)量較多的圖片，對圖片有初步的印象。 應(yīng)用： 用戶在添加頁簽的時候，將出現(xiàn)燈箱效果 ，彈出命名頁簽 窗口，此時的頁 面其余部分均至于陰影之下，也不可點擊，只能聚焦到添加窗口。 應(yīng)用： 在聯(lián)系人版塊，用戶可自行輸入名稱搜索聯(lián)系人，但由于每個用戶都可能存在多個聯(lián)系人，所以應(yīng)想法盡可能的減少用戶的記憶負擔(dān)。不僅可以幫助用戶快速找到自己想要的信息，而且可以保持界面的整潔 。 設(shè)計成果圖： 圖 68 圖 68 用戶名密碼校驗 設(shè)計源代碼： 表 61 表 61 即時校驗 footnote label interaction specification 1 ｙ OnKeyUp: Case 1 (If length of value of widget ｙ is greater than 10): Set y1 state to ２ Case 2 (Else If True): Set y1 state to １ Case 3 (If text on widget ｙ equals tianlina): Set y1 state to 重復(fù)名 鍵入，不超過 10 位 2 ｍ OnKeyUp: Case 1 (If length of value of widget ｍ is less than 6): Set m1 state to 2 Case 2 (Else If True): Set m1 state to 1 至少六位 3 ｑ OnKeyUp: Case 1 (If text on widget ｑ does not equal text on widget ｍ ): Set q1 state to 2 Case 2 (Else If True): Set q1 state to 1 密碼應(yīng)該一致 4 OnClick: Case 1 (If length of value of widget ｙ is less or equals 10 and length of value of widget ｍ is greater or equals 6 and text on widget ｑ equals text on widget ｍ ): Open 注冊成功 in Current Window Case 2 (Else If True): Set ２ state to State1 成功即跳轉(zhuǎn)頁面，失敗顯示 “錯誤 ” 2)可折疊版面 問題： 用戶在查看信息或功能時，只需查看某一部分的信息。以下將對本課題中重點的交互模式設(shè)計進行介紹。交互流程如圖 64： 公 開 頁 面結(jié) 束開 始寫 文 章發(fā) 表 文 章 存 為 草 稿文 章 歸 檔 （ 數(shù)目 已 更 新 ）草 稿 （ 數(shù) 目 已更 新 ） 圖 64 撰寫文章 流程圖 5） 創(chuàng)建相冊 進入公開頁面選擇相冊，點擊創(chuàng)建相冊，將出現(xiàn)創(chuàng)建窗口，此時鍵入相冊名，確定后即創(chuàng)建好相冊。以下， 分別 對兩類設(shè)計 進行詳細介紹。 交互設(shè)計是一種如何讓產(chǎn)品易用 ， 有效而讓人愉悅的技術(shù) 。 圖 521 發(fā)信息前 圖 522 發(fā)信息后 缺點 2 描述： 注冊過程需要填入郵箱，但注冊成功并不需要郵箱，這就難免使某些用戶利用他人郵箱進行不良行為，給他人帶來困擾，影響網(wǎng)站形象。 圖 511 未移動前 圖 512 拖放過程（樣圖） 缺點 1 描述： 標簽頁名稱只能點擊，不可直接修改 。 圖 51 增加內(nèi)容前 圖 52 增加內(nèi)容 后 優(yōu)點 2 描述：可以浮動文字的形式顯示信息。仍有無數(shù)網(wǎng)站在完善的需求分析和內(nèi)容設(shè)計之后 ， 同樣 敗在交互設(shè)計環(huán)節(jié)。除了可以在公開頁面自由添加模塊，同時它還具有寫博和群組討論的功能，集合了博客、社區(qū)、個性化主頁于一體。當我們把這些需求轉(zhuǎn)變成網(wǎng)站應(yīng)該給用戶提供什么樣的內(nèi)容和功能時，戰(zhàn)略便轉(zhuǎn)變成了范圍，需求便轉(zhuǎn)變成了功能模塊。 2) 用戶 D 在給頁面添加內(nèi)容時，添加版塊覆蓋了原有頁面的部分內(nèi)容，以至于用戶在添加內(nèi)容時，看不到被添加進去的內(nèi)容置于頁面哪個版塊，即添加是否成功。 2) C 用戶在查看自己近期概況時發(fā)現(xiàn)有很多無用的信息，一些無關(guān)緊要的細微變動都會出現(xiàn)在近況當中。 2) B 用戶剛注冊為會員，希望進入頁面可以瀏覽的內(nèi)容比游客身份更多，但是由于自己未添加版塊或好友等，目前能查看的內(nèi)容仍然與游客身份差不多。 2) A 用戶不能很快的找到注冊向?qū)?。 （ 1）用戶實例 圖 33 吳越 （ 2）用戶需求 功能需求： ① 除網(wǎng)站推薦內(nèi)容之外，網(wǎng)站提供搜索工具，方便用戶自主進行個性化搜索； ② 在網(wǎng)頁上給好友發(fā)信息，有利于網(wǎng)絡(luò)信息及時分享。 （ 1）用戶實例 圖 32 林楠 （ 2） 用戶需求 功能需求： ① 網(wǎng)站可以無限添加頁簽，且可為網(wǎng)站頁面添加個性化標題； ② 建議網(wǎng)站能建立私有頁面，用 以保 存用戶隱私，公開頁面供他人光顧。 姓名： 所在城市： 網(wǎng)齡（年）： 李菁菁 杭州 5 職業(yè) 每天上網(wǎng)時間 上網(wǎng)主要工作 大學(xué)生 不定 娛樂、交友 交互需求： ① 應(yīng)該盡可能幫助用戶避免要求他們記住各種信息，例如好友搜索，最好可以通過信息引導(dǎo)； ② 要在用戶完成某項操作后進行提示，系統(tǒng)給予反饋，使他們知道自己是否達成目標； ③網(wǎng)站內(nèi)隨處有信息提示； ④ 當 使用過程出現(xiàn)錯誤，能明確指出錯誤原因，并使用戶能理解。而白領(lǐng)階層中男性女性的需求又頗具差異，需區(qū)別對 待。只有明確了雙方的需求，才能以此為指引，設(shè)計出更加適應(yīng)用戶和網(wǎng)站開發(fā)者的功能模塊及交互行為。 如前所述，交互原型設(shè)計的最大目標便是獲得良好的用戶體驗。但是擁有良好用戶體驗的網(wǎng)站并不很多，許多網(wǎng)站正掙扎在生死存亡的邊緣。 以更進一步明確他們的功能和交互需求。而個人門戶網(wǎng)站，是用戶忠誠度最高的一類網(wǎng)站，良好的交互設(shè)計必將帶來更高的用戶粘性。個人門戶具備門戶的全部特征，同時能夠?qū)崿F(xiàn)個性化定制，實現(xiàn)內(nèi)容、社區(qū)、應(yīng)用的有機整合。在日常的工作，學(xué)習(xí)，生活中，每人每天需要接觸不同的網(wǎng)站，點擊進入數(shù)十個門戶。 因此，本課題主要從獲取良好用戶體驗方面研究 個人門戶類網(wǎng)站的交互設(shè)計。通過個人門戶，用戶可以根據(jù)個人喜好，自由的添加內(nèi)容，布局頁面 .個人門戶是互聯(lián)網(wǎng)發(fā)展的必然趨勢。 對某頁面進行編輯，可以設(shè)定加密訪問，用戶可以選擇公開的頁面和私人所有的頁面。 只 能 選 擇網(wǎng) 站 內(nèi)的 主題，用戶被局限在網(wǎng)站推出的內(nèi)容中。 本課題選擇 axure這一新興原型設(shè)計工具，同時避開了 Word、 Visio、 Dreamweave等對交互表達不好、 不利于演示 、操作難度大、需要 html 知識 等劣勢 。 收集相關(guān)材料，撰寫網(wǎng)站規(guī)劃書。 相關(guān)網(wǎng)站交互 模式的體驗 ： 繼承優(yōu)秀的 HCIPattern，找出人機交互設(shè)計上存在的不足。 關(guān)于網(wǎng)站內(nèi)容設(shè)計目標：對于網(wǎng)站內(nèi)容設(shè)計，要符合 個性化門戶的獨特之處，在 內(nèi)容 上有一定 的創(chuàng)新，使整個內(nèi)容也能跟上步伐， 更加個性化 。 二． 研究內(nèi)容 研究方向 本課題主要研究 并體驗 以下幾方面 內(nèi)容 ： 個人門戶類網(wǎng)站 、 axure 原型設(shè)計工具的具體應(yīng)用 、 交互設(shè)計 ，原型設(shè)計法 。但是擁有良好用戶體驗的網(wǎng)站并不很多，許 多網(wǎng)站正掙扎在生死存亡的邊緣。 互聯(lián)網(wǎng)的發(fā)展，已到了個性化的時代， 因此 ，個人門戶 將 是互聯(lián)網(wǎng)發(fā)展的必然趨勢。而同一類型的門戶網(wǎng)站 ,用戶可能選擇多個進入瀏覽。 目前， 對 交互設(shè)計的 研究 非常多 ，主要為了增強用戶體驗， 本設(shè)計希望 基于原型設(shè)計 把 個人門戶類 網(wǎng)站優(yōu)秀的 交互設(shè)計特征予以整合展現(xiàn)， 以尋求對 交互設(shè)計 的更深理解。在 整個課題進程中，提升 網(wǎng)站交互分析、 文筆、審美、用戶心理分析、及運用原型設(shè)計工具的能力。通過個人門戶，用戶可以根據(jù)個人喜好