【正文】 在評(píng)論框外可以看到最近的幾條評(píng)論，也可以顯示自己發(fā)出后的評(píng)論狀態(tài)。因此，他們不希望網(wǎng)頁經(jīng)常跳動(dòng)影響他們的使用。 當(dāng)前選定的類別 應(yīng)該區(qū)別于其他頁簽。并選擇自己感興趣的圖片，點(diǎn)擊查看圖片的原始尺寸。在命名 頁簽窗口可鍵入頁簽名，確認(rèn)即為添加，取消則還原 。利用自動(dòng)填充功能，可以進(jìn)行關(guān)鍵字匹配， 如 輸入“李”，自動(dòng)匹配李姓聯(lián)系人的名字 ，由此 引導(dǎo)和提示用戶需要 的信息，協(xié)助用戶記憶。 設(shè)計(jì)原因： 由于分類信息較多，如此設(shè)計(jì)可以節(jié)省網(wǎng)頁空間，美觀。例如網(wǎng)站中 ” 最新的widget” 列表，用戶只需要查看最新關(guān)于新聞的 widget。 1）即時(shí)校驗(yàn) 問題： 用戶有時(shí)要輸入很多信息，但最后提交時(shí)，只要有一個(gè)信息錯(cuò)誤有可能要全部重新 填寫。然后再往相冊(cè)中上傳相片，最后得到更新后的相冊(cè)。 用戶使用流程的交互設(shè)計(jì) 下面將對(duì)設(shè)計(jì)中幾處主要的流程型 交互模式進(jìn)行介紹。因此 它 的設(shè)計(jì)應(yīng)該盡可能使產(chǎn)品易用，使用戶愉悅。 修改： 不填寫郵箱，或者設(shè)置成到郵箱中激活賬號(hào) 圖 523 注冊(cè)過程 是我的 ()： 優(yōu) 點(diǎn) 1 描述 ： 將“ 好友動(dòng)態(tài) ” “大家動(dòng)態(tài)”等信息雜糅進(jìn)同一模塊，節(jié)省 了網(wǎng)頁空間，看起來簡潔美觀。 修改 ： 點(diǎn)擊 標(biāo)題， 可直接修改名稱 。如圖， 當(dāng)鼠標(biāo) 懸浮于某位置 時(shí)， 可顯示更多隱藏內(nèi)容 ,以浮動(dòng)文字的方式顯示。 因此， 為避免這一現(xiàn)象，獲得 更加實(shí)際的、 良好的交互體驗(yàn)， 在交互設(shè)計(jì)之前 對(duì) 同類 競爭網(wǎng)站的分析 就顯得頗為 重要。 功能模塊介紹 （ 1） 首頁 圖 42 首頁 在首頁，網(wǎng)站主要添加以下幾方面內(nèi)容： ① 了解一下：“了解一下”提供鏈接到網(wǎng)站官方博客，以使用戶更多的了解網(wǎng)站信息； ② 網(wǎng)站介紹版塊：以小黑板形式，形象的展示網(wǎng)站主要提供的內(nèi)容和功能； ③ 登錄：用于注冊(cè)用戶登錄；另外添加“記住密碼”功能，便于 再次訪問， “忘記密碼”幫助用戶找回密碼； ④ 注冊(cè)：“立即注冊(cè)”按鈕，引導(dǎo)非會(huì)員用戶進(jìn)入注冊(cè)頁面； ⑤ 瀏覽一下：為游客提供瀏覽功能，不注冊(cè)即可體驗(yàn)?zāi)J(rèn)公開頁面的部分功能； ⑥ 功能簡介：提供鏈接到官方博客的功能介紹頁面； ⑦ 最新動(dòng)態(tài)：顯示最新的網(wǎng)站動(dòng)態(tài)，如某個(gè) widget 新上線等信息； ⑧ 活躍用戶：顯示網(wǎng)站近期活躍會(huì)員，其他用戶可點(diǎn)擊瀏覽該用戶公開頁面，或加其為好友。從設(shè)計(jì)程序上看，功能模塊設(shè) 計(jì)是交互設(shè)計(jì)的基礎(chǔ)，為其提供內(nèi)容上的支持。 3) 用戶 D 只能偶爾利用少量時(shí)間使用網(wǎng)站，但是覺得要進(jìn)入網(wǎng)站才能查找最新的信息，比較浪費(fèi)時(shí)間，還經(jīng)常進(jìn)入網(wǎng)站發(fā)現(xiàn)不了什么有用的信息。包括朋友的近況變動(dòng) 也是大量冗雜的信息堆積在版塊中，占據(jù)位置。 3） B 用戶初次進(jìn)入私有頁面，不清楚自己應(yīng)該干什么。 3) A 用戶在注冊(cè)的時(shí)候覺得過程非常麻煩，要填的信息過多，打算放棄注冊(cè)。 交互需求： ① 網(wǎng)站添加的部分模塊在網(wǎng)頁內(nèi)可直接編輯，使搜看起來更直觀； ② 網(wǎng)站可以不用注冊(cè)先行體驗(yàn)部分功 能； ③ 應(yīng)該方便用戶取消某個(gè)操作，增加有撤銷和恢復(fù)的功能，防止一失足成千古恨。 姓名： 所在城市： 網(wǎng)齡（年）： 林楠 上海 10 職業(yè) 每天上網(wǎng)時(shí)間 上網(wǎng)主要工作 基層管理人員 6 工作聯(lián)絡(luò)、收看新聞 交互需求： ① 網(wǎng)站注冊(cè)程序不要那么繁瑣； ② 界面更加簡潔，不要經(jīng)常進(jìn)行頁面跳轉(zhuǎn)。 （ 3）網(wǎng)站規(guī)劃 對(duì)此類用戶網(wǎng)站擬實(shí)現(xiàn) —— 功能模塊： ① 推出“聯(lián)系人”版塊，里面收錄“用戶好友”，同時(shí)可以“搜索好友”； ② 網(wǎng)站提供各種推薦的 widgets，且歸類便于用戶搜索添加； ③ 推出多種網(wǎng)頁主題供用戶選擇添加。本網(wǎng)站的用戶群主要定位為這三種。 網(wǎng)站需求分析 本課題網(wǎng)站并非商業(yè)性網(wǎng)站，不具商業(yè)目的?！?Ajax 之父”Jesse James Garrett 把用戶體驗(yàn)分解為五大要素：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。針對(duì)這一普遍現(xiàn)象，我們來尋求改進(jìn)。 原型開發(fā)工具 axure 簡介 Axure 是一種原型設(shè)計(jì)工具，它 能 夠 幫助網(wǎng)站設(shè)計(jì)者，快捷而簡便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋 的 頁面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁文件和規(guī)格文件，以提供演示與開發(fā)。因此，交互設(shè)計(jì)在個(gè)人門戶類網(wǎng)站中的重要性不言而喻，個(gè)人門戶網(wǎng)站應(yīng)更加注重交互設(shè)計(jì)。通過個(gè)性化的呈現(xiàn)擴(kuò)展用戶利 用互聯(lián)網(wǎng)的能力 ， 節(jié)約用戶利用互聯(lián)網(wǎng)的時(shí)間成本 。據(jù)一項(xiàng)數(shù)據(jù)調(diào)查，目前中國青年層每日平均訪問網(wǎng)站數(shù)達(dá) 12個(gè)之多，其中涉及新聞?lì)悺蕵奉?、生活類、交友類等不同類型的門戶網(wǎng)站。全文正文分為五大篇章：需求分析、功能模塊設(shè)計(jì)、交互設(shè)計(jì)、競品分析、界面設(shè)計(jì)。 我們往往用“用戶粘性”這一標(biāo)準(zhǔn) 來衡量一個(gè)網(wǎng)站設(shè)計(jì)的成敗。 在“好友管理”里面，獨(dú)特的推出“好友動(dòng)態(tài)屏蔽”按鈕，獨(dú)具特色。 （ ivibes）亮點(diǎn) 1 亮點(diǎn) 2 亮點(diǎn) 3 對(duì)某一頁簽或小版塊，都可以（通過、 twitter 等形式）根據(jù)用戶興趣分享給其它人。 更利于各種交互功能的實(shí) 現(xiàn)及用戶體驗(yàn)。 圖 1研究步驟 、研究方法、工具 本次 設(shè)計(jì)使用網(wǎng)站 原型設(shè)計(jì) 方法，利用 axure 原型設(shè)計(jì)工具 進(jìn)行原型和交互設(shè)計(jì) 。選擇“雅蛙”“ I google” “ vibes”等 個(gè)性化 理念的 門戶 網(wǎng)站 或個(gè)人門戶網(wǎng)站 進(jìn)行重點(diǎn)交互體驗(yàn)。 本課題 的創(chuàng)新之處 打造一個(gè)優(yōu)秀交互模式 集中 的應(yīng)用平臺(tái)。 重點(diǎn)是在對(duì) 交互設(shè)計(jì) 概念的理解之上， 通過對(duì)比 分析國內(nèi)外幾家 個(gè)人門戶類 網(wǎng)站，提取出他們優(yōu)秀的設(shè)計(jì)，并進(jìn)行其它的改進(jìn)，再加入自己的創(chuàng)意于本設(shè)計(jì)，以最終 設(shè)計(jì)出一個(gè) 更具良好用戶體驗(yàn)的 個(gè)性 化門戶 網(wǎng)站交互 原型 。 針對(duì)這一普遍現(xiàn)象，我們來尋求改進(jìn)。 原型設(shè)計(jì) 在交互產(chǎn)品設(shè)計(jì)中的作用 在交互產(chǎn)品設(shè)計(jì)實(shí)踐中，設(shè)計(jì)師 更加關(guān)注影響用戶行為與習(xí)慣的各種因素，如何使用戶在交互過程中獲得良好的體驗(yàn)。正如許多用戶會(huì)同時(shí)擁有“土豆”和“優(yōu)酷”，光臨“天涯社區(qū)”之后再去“百度貼吧”等等。 既可作為其他 交互 產(chǎn)品設(shè)計(jì)時(shí)的參照，也可啟發(fā)其他信息系統(tǒng)的交互設(shè)計(jì)。 同時(shí)，也希望在設(shè)計(jì)過程中，自身獲得 對(duì)用戶體驗(yàn)的全面把握，以及 axure 原型設(shè)計(jì)工具的熟練運(yùn)用。 正因?yàn)橐l繁光臨不同的網(wǎng)站，花費(fèi)大量時(shí)間，于是，一種致力于幫用戶解決所有網(wǎng)絡(luò)生活問題的網(wǎng)站出現(xiàn)了 —— 個(gè)人門戶。為此，設(shè)計(jì)團(tuán)隊(duì)往往需要根據(jù)創(chuàng)意概念構(gòu)建出一系列的裝置，以不斷驗(yàn)證想法，評(píng)估其價(jià)值，并為進(jìn)一步設(shè)計(jì)深入提供基礎(chǔ)與靈感。 網(wǎng)站的成功與用戶 體驗(yàn)息息相關(guān)，而用戶 體驗(yàn)便來自于交互設(shè)計(jì)的結(jié)果。 擬解決的主要問題 本課題意在 通過對(duì) 交互設(shè)計(jì) 理念的理解分析，對(duì)比 各類個(gè)人門戶 網(wǎng)站的交互 原型設(shè)計(jì)，對(duì) 個(gè)人門戶網(wǎng)站的 交互 原型予以優(yōu)化。本課題將在進(jìn)行各類網(wǎng)站的交互體驗(yàn) 之后，集合各模塊的優(yōu)秀設(shè)計(jì)，再注入作者的創(chuàng)新來進(jìn)行交互的研究設(shè)計(jì)。收集優(yōu)秀的交互設(shè)計(jì)模式。 選擇 axure 原型設(shè)計(jì) 工具的原因 ： Axure 可快速繪制 網(wǎng)站構(gòu)架圖，而且可以讓構(gòu)架圖中的每一個(gè)頁面節(jié)點(diǎn)，直接連接到對(duì)應(yīng)網(wǎng)頁 。 選擇 axure 作為設(shè)計(jì)工具，希望在工程訓(xùn)練的同時(shí)，達(dá)到對(duì)這一新興工具 的熟練運(yùn)用。 注冊(cè)過程，可選擇選項(xiàng)“不用在公開資料中顯示我的年齡”，這點(diǎn)極好的抓住了用戶心理。 (雅蛙） 缺陷 1 缺陷 2 缺陷 3 在“搜索圈子”模塊，只有輸入圈子名才能搜索，應(yīng)該進(jìn)行分類引導(dǎo) 在對(duì)“我的好友”發(fā)信息時(shí)，當(dāng)發(fā)送完成，頁面跳轉(zhuǎn)至 “發(fā)信箱”頁面，不 利于繼續(xù)發(fā)送。而個(gè)人門戶網(wǎng)站，是用戶忠誠度最高的一類網(wǎng)站，良好的交互設(shè)計(jì)必將帶來更高的用戶粘性。圍繞著建設(shè)用戶體驗(yàn)的流程順序，從戰(zhàn)略層（需求分析） 、范圍層 （功能模塊設(shè)計(jì)） 、結(jié)構(gòu)層 （交互設(shè)計(jì)） 、框架層 （界面設(shè)計(jì)）至下而上對(duì)網(wǎng)站原型做出了全面的規(guī)劃、并重點(diǎn)對(duì)交互模式進(jìn)行了設(shè)計(jì)。而同一類型的門戶網(wǎng)站 ,用戶可能選擇多個(gè)進(jìn)入瀏覽。 互聯(lián)網(wǎng)的發(fā)展，已到了個(gè)性化的時(shí)代， 因此 ，個(gè)人門戶 將 是互聯(lián)網(wǎng)發(fā)展的必然趨勢(shì)。 原型設(shè)計(jì)法介紹 原型 (prototype)即把系統(tǒng)主要功能和接口通過快速開發(fā)制作為 “ 樣本 ” ， 以可視化的形式展現(xiàn)給用戶，及時(shí)征求用戶意見，從而明確無誤地確定用戶需求。 本次設(shè)計(jì)使用原型設(shè)計(jì)方法，利用 axure 原型設(shè)計(jì)工具，因其具有以下諸多優(yōu)勢(shì)： Axure 可快速繪制 網(wǎng)站構(gòu)架圖，而且可以讓構(gòu)架圖中的每一個(gè)頁面節(jié)點(diǎn)，直接連接到對(duì)應(yīng)網(wǎng)頁 ； Axure 內(nèi)建了許多會(huì)經(jīng)常使用到的 widget 元件，例如：按鈕、圖片、文字面板、選擇鈕、下拉式菜單 等； Axure 快速建立流程圖就像建立 線框圖一樣容易， Flow Widget 中有設(shè)計(jì)流程圖時(shí)會(huì)經(jīng)常用到的形狀，您可以輕松在流程之間加入連接線并設(shè)定連接的格式 ； 其中 大多數(shù)的 widget 可以對(duì)一個(gè)或多個(gè)事件產(chǎn)生動(dòng)作，包括 OnClick、 OnMouseOver 和 OnMouseLeave 等 ； Axure 可以將 wireframe，輸出成符合 InterExplorer 或 Firefox 等不同瀏覽器的 HTML prototype； Axure RP 可以輸出 Word 的格式的文件，規(guī)格文件包含了目錄、網(wǎng)頁清單、網(wǎng)頁 和附有注解的 Master、 Annotation、 Interaction 和 Widget 特定的資訊，以及結(jié)尾文件，規(guī)格的內(nèi)容與格式也可以依據(jù)不同的閱讀對(duì)象來變更 。 網(wǎng)站的成功與用戶體驗(yàn)息息相關(guān)，而用戶體驗(yàn)便來自于交互設(shè)計(jì)的結(jié)果。用戶體驗(yàn)就是在這五個(gè)層面上一步步建設(shè)起來的。此次網(wǎng)站交互原型設(shè)計(jì)以獲取良好的用戶體 驗(yàn)為目標(biāo)。以下以具體實(shí)例的方式，對(duì)不同用戶進(jìn)行了需求分析。 交互模式 ： ① 在“聯(lián)系人”版塊進(jìn)行好友搜索時(shí)，利用下拉框分類制作好友各項(xiàng)信息，以引導(dǎo) 用戶搜索；好友搜索也通過關(guān)鍵字匹配，協(xié)助用戶記憶； ② 在用戶操作某項(xiàng)任務(wù)過程中，隨時(shí)顯示完成情況。 （ 3） 網(wǎng)站規(guī)劃 對(duì)此類用戶網(wǎng)站擬實(shí)現(xiàn) —— 功能模塊： ① 網(wǎng)站設(shè)置“添加標(biāo)簽頁 ” 按鈕，在同一張頁面中可添加標(biāo)簽且為各標(biāo)簽頁設(shè)置名稱； ② 網(wǎng)站將采取分開建立私有頁面和公開頁面的形式。 (3)網(wǎng)站規(guī)劃 對(duì)此 類 用戶網(wǎng)站擬實(shí)現(xiàn) —— 功能模塊： ① 推出“谷歌搜索”欄，以便用戶通過搜索自己感興趣的頁面，不局限姓名： 所在城市： 網(wǎng)齡（年）： 吳越 深圳 12 職業(yè) 每天上網(wǎng)時(shí)間 上網(wǎng)主要工作 營銷經(jīng)理 4 工作聯(lián)絡(luò)、收看新聞 于網(wǎng)站的推薦； ② 推出給好友發(fā)信息版塊，可選擇自己網(wǎng)內(nèi)好友及時(shí)發(fā)送信息 。 解決： 1) 在首頁添加多處游客可點(diǎn)擊的鏈接，首先使他們有一種親近的心理狀態(tài)。 解決： 1）在注冊(cè)的時(shí)候，推出用戶喜歡的類別選項(xiàng)，根據(jù)用戶的選擇，在其第一次登錄頁面時(shí)就可呈現(xiàn)出用戶所喜歡的內(nèi)容，以保持用戶興趣。 3) C 用戶在使用公開頁面時(shí)，需要與朋友共享很多個(gè)人的照片與視頻，數(shù)量巨大，在一個(gè)頁簽里面難以容納。 解決： 1) 在頁簽編輯版塊里面，選擇分享頁簽，可以通過郵件，微博客等分享給好友，他們可以通過鏈接查看你供分享的頁簽。從廣義的交互設(shè)計(jì)來看，貼近用戶的功能模塊設(shè)計(jì)也是達(dá)到良好交互的目的。 （ 2） 我的私有頁面 圖 43 我的私有頁面 我的私有頁面提供以下幾方面內(nèi)容： ① 添加內(nèi)容：此版塊提供用戶給頁面添加內(nèi)容，包括“分類瀏覽 widget” “添加最重要的 widget” 、“下載最新的 widget” 三塊，可以通過網(wǎng)站推薦，自主搜索等形式添加應(yīng)用模塊到頁面； ② 資料：即個(gè)人的信息中心，包括姓名、性別、公開頁面地址等，重點(diǎn)推出用戶狀態(tài)描述，用戶可以就自己的 心情添加一句話，可供互相瀏覽； ③ 近況：包括個(gè)人最近的公開或私人活動(dòng)，以及朋友動(dòng)態(tài)； ④ 聯(lián)系人：包括好友、關(guān)注者、尋找朋友和邀請(qǐng)好友； ⑤ 頁面設(shè)置：此版塊包括頁面語言、主題及壁紙的更換等； ⑥ 添加（更改）頁面標(biāo)題版塊：可在此處添加、更改頁面標(biāo)題； ⑦ google 搜索版塊：在此處可通過谷歌搜索需要的信息； ⑧ 頁簽版塊：此 版塊是此頁最重要區(qū)域，放置用戶添加的各項(xiàng) widget。通過競品體驗(yàn)，取其精華、去其糟粕。 圖 53 鼠標(biāo) 移入 前 圖 54 鼠標(biāo)移入后 缺點(diǎn) 1 描述 :“個(gè)人狀態(tài)” 部分 只可讀，不可寫入 ，鼠標(biāo)點(diǎn)擊時(shí)不可直接修改。 圖 513 重命名 頁簽 圖 514 點(diǎn)擊即可修改（樣圖） 缺點(diǎn) 2 描述： 不能直接在網(wǎng)頁上配置模塊 。 圖 524 點(diǎn)擊“好友動(dòng)態(tài)” 后 圖 525 點(diǎn)擊“大家動(dòng)態(tài)”后 缺點(diǎn) 1 描述： 主頁醒目處的文字圖片，可讀取，不可點(diǎn)擊進(jìn)入 。交互設(shè)計(jì)要滿足各交互流程更加簡潔易用，界面呈現(xiàn)更加令人愉悅，從而才可帶來和保持較好的交互體驗(yàn)。 基本形狀示意： 開始 模塊或動(dòng)作