【導讀】人門戶類網(wǎng)站的基本特征。其中重點對網(wǎng)站的交互原型進行設(shè)計。既可作為其他交互產(chǎn)品設(shè)計時的參照，也可啟發(fā)其他信息系統(tǒng)的交互設(shè)計。在整個課題進程中，提升網(wǎng)站交互分析、文筆、審美、用戶心。理分析、及運用原型設(shè)計工具的能力。隨著互聯(lián)網(wǎng)的發(fā)展，門戶網(wǎng)站的興起，人們的生活發(fā)生了劃時代的轉(zhuǎn)變?；畹姆椒矫婷娑家迅嗟囊蕾囉诰W(wǎng)絡(luò)。據(jù)一項數(shù)據(jù)調(diào)查，目前中國青年層每日平均。使用戶在交互過程中獲得良好的體驗。一系列的裝置，以不斷驗證想法，評估其價值，并為進一步設(shè)計深入提供基礎(chǔ)與靈感。并發(fā)掘新思路的裝置，稱之為“原型”。因此，目前，個人門戶。秀的交互模式，并予以整合，同時對不足之處進行改進，集合在自己的原型設(shè)計中。終設(shè)計出一個更具良好用戶體驗的個性化門戶網(wǎng)站交互原型。最后完成一個完整的基于axure的網(wǎng)站交互原型及網(wǎng)站。至色彩，也必將對交互體驗帶來好處，原型版式將會更加自由，開闊及個性。

　　

【正文】 下載添加”。利用可折疊版面，在查看其中一個項目時，隱藏其它的項目。當切換到“分類瀏覽”版面時，隱藏其余版塊?？烧郫B版面可以使幾種內(nèi)容相互切換，而不需占用空間。折疊區(qū)域分類儲藏信息，隱藏不必要的信息。不僅可以幫助用戶快速找到自己想要的信息，而且可以保持界面的整潔 。 設(shè)計原因： 由于分類信息較多，如此設(shè)計可以節(jié)省網(wǎng)頁空間，美觀。 設(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)自動填充 問題： 用戶在選擇某個名稱，如人名，地名時，需要輸入他們的完整名 稱。但往往由于信息量過大，用戶會時常忘記此類名稱。因此在輸入的時候可能時常出錯，甚至會由于遺忘而帶來苦惱。 解決 ： 根據(jù)用戶輸入的內(nèi)容，顯示與用戶輸入的內(nèi)容相匹配的建議列表。同時根據(jù)用戶繼續(xù)輸入的內(nèi)容繼續(xù)縮小或者擴大建議列表。便可避免用戶輸入錯誤，并可以讓用戶更快更方便的找到所要的名稱。 應(yīng)用： 在聯(lián)系人版塊，用戶可自行輸入名稱搜索聯(lián)系人，但由于每個用戶都可能存在多個聯(lián)系人，所以應(yīng)想法盡可能的減少用戶的記憶負擔。利用自動填充功能，可以進行關(guān)鍵字匹配， 如 輸入“李”，自動匹配李姓聯(lián)系人的名字 ，由此 引導和提示用戶需要 的信息，協(xié)助用戶記憶。 設(shè)計原因： 便于幫助用戶查找信息，幫助其記憶。 設(shè)計成果圖： 圖 610 圖 610 搜索聯(lián)系人版塊 設(shè)計源代碼： 表 6表 6表 65 表 63 自動填充 設(shè)計 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 鍵入李、或李小、或非 ”李 “人名，自動填充 表 64 自動填充 設(shè)計 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 自動填充 設(shè)計 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)光 箱 問題： 用戶需要在不切換頁面的同時，達到對某個動作指示信息強烈的關(guān)注 。 解決 ： 使用燈箱效果。將目的窗口以外的主頁蒙上陰影，讓用戶的注意力集中在目的窗口的當前任務(wù)。同時設(shè)置任務(wù)標題，提示用戶當前任務(wù)是做什么的。設(shè)置逃逸出口，使用戶可以隨時放棄任務(wù)，回到原來頁面 。 應(yīng)用： 用戶在添加頁簽的時候，將出現(xiàn)燈箱效果 ，彈出命名頁簽 窗口，此時的頁 面其余部分均至于陰影之下，也不可點擊，只能聚焦到添加窗口。在命名 頁簽窗口可鍵入頁簽名，確認即為添加，取消則還原 。 設(shè)計原因： 通過燈箱效果，掩蓋頁面信息，使頁面顯得不冗雜，更加美觀 。 設(shè)計成果圖： 圖 611 圖 611 添加頁簽版塊 設(shè)計源代碼： 表 66 表 66 燈箱效果的 交互設(shè)計 Footnote Label Interactions Specification 1 OnClick: Case 1: Hide Panel 2 OnClick: Case 1: Set value of variable OnLoadVariable equal to text on widget 頁面名稱 and text on widget 新增 tab equal to [[OnLoadVariable]] Set 第四個 state to 新增 , 頁簽 state to 其他 Hide 燈箱 添加一個新頁簽 3 OnClick: Case 1: Hide 燈箱 隱藏 “新建頁簽 ” 5)“ 豆腐干 ”模式 問題： 如網(wǎng)站聚合圖片類應(yīng)用網(wǎng)站時，需將圖片顯示在更新條目上。想要給瀏覽者展示圖片、視頻或者網(wǎng)頁，但由于頁面加載時間的原因，不想將完整尺寸的圖片、視頻或網(wǎng)頁成列出來。 解決 ： 陳列出較小尺 寸的圖片、視頻或網(wǎng)頁。點擊查看原來或交大尺寸的圖片。 應(yīng)用： 在相 冊版塊，可點擊小圖查看大圖。 設(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） 直接編輯 問題 ：用戶想要在頁面上直接編輯某輕量級的文字，而不需要切換頁面。在可讀的地方，直接寫入，即編輯。 解決 ： 讓用戶不切換頁面，也不需要彈出窗口，直接在當前頁面需要編輯的地 方點擊編輯，并保存或者取消。 應(yīng)用： 在頁面標題處，點擊原來標題，即可進行修改， 在可點的地方 即可編輯 。 設(shè)計原因： 標題更改對用戶來講是一次很平常的事情，因此不應(yīng)該過于程序復雜，直接編輯便于用戶的多次更改 。 設(shè)計成果圖： 圖 613 圖 613 編輯標題 設(shè)計源代碼： 表 68 表 68 直接編輯的 交互設(shè)計 Footnote Label Interactions 1 編輯了 OnKeyUp: Case 1: Set value of variable OnLoadVariable equal to text on widget 編輯了 and text on widget 標題了 equal to [[OnLoadVariable]] OnLostFocus: Case 1: Set 空間標題 state to 標題 7)頁簽 問題： 用戶 需要在所有信息中找到自己想要的那一種類的信息。 解決 ： 橫或縱向排布頁簽，頁簽下的模塊內(nèi)容隨著頁簽的不同而改變 ， 在不切換頁面的前提下分類查看用戶所需的信息。 當前選定的類別 應(yīng)該區(qū)別于其他頁簽?？梢杂?對比 鮮明的顏色，形狀，大小或字體。最好是建立必要的對比， 尤其是為每個頁簽命不同的名稱。 應(yīng)用： 本網(wǎng)站主要的應(yīng)用便是頁簽。網(wǎng)站屬于個人門戶網(wǎng)站，通過頁簽用戶可以方便自由添加版塊。用戶可以對自己添加的內(nèi)容進行分類，便于日后分類查看，個人門戶將會擁有各種不一樣的信息，用戶可隨時添加或刪除頁簽。 設(shè)計原因： 個人門戶網(wǎng)站的用戶往往是無規(guī)律的添加各式的內(nèi)容，特別需要頁簽進行分類導航。而且他們上網(wǎng)總是會進入個人門戶去瀏覽信息，希望一站式解決一切網(wǎng)絡(luò)生活。因此，他們不希望網(wǎng)頁經(jīng)常跳動影響他們的使用。 設(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） 評論框 問題： 用戶希望對他所了解的事物從不同方面進行評價。 解決 ： 提供評論版塊。此評論的結(jié)果必須置于低于上一次的評論處，或處于最高處，以顯示其為最近評論，要 略高于評論框本身。 突出了新的意見和滾動頁面這一立場，以便它清楚地表明，評論已添加。 同時 評論不應(yīng)只顯示自己的意見，而且 包括 時間和日 期，這 也可被稱之為 張貼海報 。 應(yīng)用： 在我的公開頁面，自己可以發(fā)布文章，供來訪者閱讀，同時他們可以添加評論。對文章進行評論。在評論框外可以看到最近的幾條評論，也可以顯示自己發(fā)出后的評論狀態(tài)。 設(shè)計原因： 公開頁面的日志是用戶最希望與他人分享的信息，目前博客中盛行。所以添加評論框必不可少，而不只是自己可以評論，用戶還希望可以查看他們的評論，以及自己發(fā)出評論后的狀態(tài)，因此如此設(shè)置。 設(shè)計成果圖： 圖 615 圖 615 評論框 設(shè)計源代碼： 表 610 表 610