網頁交互設計流程

1、交互設計的設計流程

一個完整的設計流程是怎樣的?

以下是一個範例:

一、寫問題腳本(Problem Scenario):羅列人物角色在使用產品時可能遇到的問題,可以整理成一個故事便於別人理解

基於你對人物角色(Persona)的理解,你應該已經可以設想出他們在使用產品中可能遇到的問題了。你可以為每一個人物角色(Persona)列一個問題單,也可以把它們整理到一個簡短的故事裡。

二、寫動作腳本(Action Scenario):像寫故事一樣,寫人物角色在使用你設計好的產品時,發生的細節。注意,這個時候你的交互方案的概念模型已經基本成型了,這個概念模型是通過解決問題腳本里的問題而得出的。

首先你要為已列出的問題想好可能的解決方案,然後寫一個簡短的故事把這些解決方案囊括進去。寫成故事的好處是代入感較強,對別人來說容易理解。國內比較推崇故事版,但是把所有情景畫出來的效率是非常低的。

三、畫線框圖(Framework):這個線框圖是通過把動作腳本里的概念模型轉化成視覺模型得到的。

這個時候你對你的交互方案已經有了一個比較抽象的想法了,現在只要把它具象化就好了。線框圖大家都比較了解,這里就不多說了。

四、製作原型(Prototype):做出來好像可以用的東西,有很多原型工具可以利用。

就算沒有程序員幫忙,可以使用的原型工具還是很多的。不論用什麼手法,哪怕是PPT或者PDF,只要做出一個可以交互的東西就行了。一個原型是不可能實現所有功能的,所以你要確定幾個可以走通的任務。例如能夠成功在知乎里發布一個問題等。

五、專家評測(Expert Evaluation):至少兩名設計師或對交互設計比較了解的人通過反復測試原型。找到問題後修改線框圖並更新原型。

原型完成後召集至少兩三個設計師或者對交互比較了解的人,使用並評測原型。你可以將原型所關注的幾個任務列出來,以免專家不知道原型哪部分可交互哪部分不可交互。

比較常用的評測方法是啟發式評估法(Heuristic Evaluation),而這種方法比較常見的標準是尼爾森交互設計法則(Nielsen Heuristic)。以下是十條尼爾森交互設計法則(Nielsen Heuristic):

1、系統狀態是否可見(Visibility of system status)

2、系統是否符合現實世界的習慣(Match between system and the real world)

3、用戶是否能自由地控制系統(User control and freedom)

4、統一與標准(Consistency and standards)

5、錯誤防範(Error prevention)

6、減輕低用戶的記憶負擔(Recognition rather than recall)

7、靈活性和效率(Flexibility and efficiency of use)

8、美觀簡潔(Aesthetic and minimalist design)[page]

9、幫助用戶認知、了解錯誤,並從錯誤中恢復(Help users recognize, diagnose, and recover from errors)

10、幫助文檔(Help and documentation)

如何做啟發式評估法(Heuristic Evaluation)?很簡單,專家們各自將自己發現問題列出來,並將之與對應的法則相關聯,或者根據法則來查找問題,然後專家們分別給自己的問題打分。專家們完成自己的問題列表後,一起討論,將問題整合起來。

流程中常用的打分方法如下:

4分–問題太過嚴重,一旦發生用戶的進程將會終止並且無法恢復3分–問題較為嚴重,很難能恢復

2分–問題一般嚴重,但是用戶能夠自行恢復,或者問題只會出現一次

1分–問題較小,偶爾發生,並且不會對用戶的進程產生太大影響0分:不算問題

記住:評測完後別忘記修改你的線框圖和原型!

六、用戶評測(User Evaluation):讓用戶使用原型,可以給他們一些任務去完成。根據用戶在使用過程中的問題和建議進行進一步修改。

原型通過專家評測後,你可以找一些典型用戶使用原型。你可以把任務列給他們,讓他們自己嘗試完成任務。中間遇到的問題可以記錄下來,設計師通過觀察來進行評分。

比較常用的用戶評測方法是Think Aloud(對不起沒有找到合適的翻譯)。做法也很簡單,你讓用戶使用原型完成指定的幾個任務,讓他們在使用過程中將他們的每一步和心中的想法說出來。如果他們忘

記說或者不知道該怎麼說,你可以適當提問。與此同時,你要將屏幕和聲音錄下來,可以用錄屏軟體或攝像頭。完成後,你回放這些視頻,把觀察到的問題和用戶報告的問題全部記錄下來,與交互法則關聯並且打分。

值得注意的是,很多人更習慣給出建議而不是提出問題,例如「這個按鈕應該更大一點,這樣才看的到」。這時,你該記錄下來的是「按鈕不夠引人注意」。

來源：分享一個完整的交互設計流程

2、一個完整的UI設計，需要那些過程

1、確認目標用戶：

在UI設計過程中，需求設計角色會確定軟體的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。

2、採集目標用戶的習慣交互方式：

不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源於其原有的針對現實的交互流程、已有軟體工具的交互流程。

當然還要在此基礎上通過調研分析找到用戶希望達到的交互效果，並且以流程確認下來。

3、提示和引導用戶：

軟體是用戶的工具。因此應該由用戶來操作和控制軟體。軟體響應用戶的動作和設定的規則。對於用戶交互的結果和反饋，提示用戶結果和反饋信息，引導用戶進行用戶需要的下一步操作。

4、一致性原則：

軟體中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。

例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那麼該目標需要貫徹軟體（軟體包）整體，而不是局部。

5、可用性原則：

軟體要為用戶使用，用戶必須可以理解軟體各元素對應的功能。

比如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。

(2)網頁交互設計流程擴展資料

UI設計師的職能大體包括三方面：

一是圖形設計，軟體產品的「外形」設計。

二是交互設計，主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計，並且確立交互模型，交互規范。

三是用戶測試/研究，這里所謂的「測試」，其目標恰在於測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶問卷的形式衡量UI設計的合理性。

如果沒有這方面的測試研究，UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判，這樣就會給企業帶來極大的風險。

3、一個完整的交互設計流程是怎樣的

一般交互設計的流程是：
1. 了解用戶的活動及目的；
2. 定義活動中的行內為與問題；
3. 定義設計的目標容；
4. 設計方案，反復精化；
5. 確認設計方案對用戶活動的影響。

設計工具與方法
強調區分設計流程和設計工具、設計方法的原因是：
- 設計流程沒有規定使用的工具或方法。
- 設計方法和工具是為了解決設計過程中的挑戰提供的解決思路和框架。
- 設計師應當根據情況來選擇適合情況的工具和方法。

具體，自己慢慢研究。

4、一個完整的交互設計包括哪些流程

完整的交互設計流程主要分為八個方面：定性研究、確定人物角色、寫問題腳本、寫動作腳本、畫線框圖、製作原型、專家評測、用戶評測。
如果你想要知道具體怎麼做，請繼續看。
一、定性研究（Qualitative Research）：
無論你用何種形式做調查，你的目的是了解用戶的五個方面：
1、行為（Activities）：例如UI設計者用戶多久用一次、一次用多久？
2、態度（Attitudes）：例如UI設計者用戶怎樣看待產品的？
3、資質（Aptitudes）：例如UI設計者用戶的學歷怎樣？
4、動力（Motivation）：例如UI設計者用戶為什麼用？
5、技能（Skills）：例如UI設計者用戶對使用相關產品是否熟悉？
二、確定人物角色（Persona）：
如果你的定性研究有所成功，這時你應該對你的用戶有所了解了。根據上文中的五個方面，你需要挑揀出最典型的一個或幾個形象。例如UI設計者的人物角色可能有：剛剛畢業的大學生、沒有考上大學的高中畢業生、想要提升自己的上班職工、想要轉型的平面設計師……
你不但要確定這些人物角色（Persona）的主要特點，還要確定他們的需求和目的。為了增加真實性，可以給人物角色（Persona）取名字，選一張照片，細化他們的背景資料。
三、寫問題腳本（Problem Scenario）：
基於你對人物角色（Persona）的理解，你應該已經可以設想出他們在使用產品中可能遇到的問題了。你可以為每一個人物角色（Persona）列一個問題單，也可以把它們整理到一個簡短的故事裡。
四、寫動作腳本（Action Scenario）：
首先你要為已列出的問題想好可能的解決方案，然後寫一個簡短的故事把這些解決方案囊括進去。寫成故事的好處是代入感較強，對別人來說容易理解。國內比較推崇故事版，但是把所有情景畫出來的效率是非常低的。
五、畫線框圖（Framework）：
此時你的交互方案已經有了抽象的想法，現在只要把它具象化就可以了。
六、製作原型（Prototype）：
就算沒有程序員幫忙，可以使用的原型工具還是很多的。例如Axure RP和Pencil Project都比較有名，國內也有不少。不過我只用過InVision，感覺還可以。不論用什麼手法，哪怕是PPT或者PDF，只要做出一個可以交互的東西就行了。
一個原型是不可能實現所有功能的，所以你要確定幾個可以走通的任務。例如能夠成功在知乎里發布一個問題等。
七、專家評測（Expert Evaluation）：
原型完成後召集至少兩三個設計師或者對交互比較了解的人，使用並評測原型。你可以將原型所關注的幾個任務列出來，以免專家不知道原型哪部分可交互哪部分不可交互。
比較常用的評測方法是啟發式評估法（Heuristic Evaluation），而這種方法比較常見的標準是尼爾森交互設計法則（Nielsen Heuristic）。以下是十條尼爾森交互設計法則（Nielsen Heuristic）：
1、系統狀態是否可見（Visibility of system status）
2、系統是否符合現實世界的習慣（Match between system and the real world）
3、用戶是否能自由地控制系統（User control and freedom）
4、統一與標准（Consistency and standards）
5、錯誤防範（Error prevention）
6、減輕低用戶的記憶負擔（Recognition rather than recall）
7、靈活性和效率（Flexibility and efficiency of use）
8、美觀簡潔（Aesthetic and minimalist design）
9、幫助用戶認知、了解錯誤，並從錯誤中恢復（Help users recognize, diagnose, and recover from errors）
10、幫助文檔（Help and documentation）

5、怎麼做好網站頁面交互性

交互性從本質上來說，就是網站能夠知道用戶想什麼，進而引導用戶快速找到相關的內容。這看起來有點智能化，對於網頁設計者而言，似乎自身的能力難以達到，因為這會涉及到大數據，會涉及到用戶行為的捕捉，也就是說需要大量的智能化設計工作。對於一個網頁設計工作者而言，顯然不具有這樣的能力。
可是這並不表明網頁設計者就不能夠設計出良好的交互性頁面，讓用戶一打開網頁就能快速定位相應的內容，從而提升網站的用戶體驗，實際上只需要從以下幾點進行設計就能夠實現。
第一，讓logo、按鈕和鏈接都顯著起來。現在很多網頁設計者在設計網頁時，往往喜歡將這些標識變得模糊，為的就是讓頁面看起來混為一體，看起來整個頁面非常的美觀，可是卻往往讓用戶難以進行點擊。尤其是一些按鈕上的文字或者按鈕設計，基本上就是以超鏈接且無明顯標識的形態出現，當用戶進行投票或者參選時，很難查找。還有就是一些表單的填寫，以及相應的提示都相對缺乏，這些都會極大的影響到用戶的交互，進而導致用戶在網站上消耗太多不必要的時間。
那麼如何讓這些素材變得清晰呢?我們可以參考一些門戶網站，比如網易，之前的首頁超鏈接下面都有下劃線，現在首頁上已經沒有下劃線，可是當我們滑鼠滑過之後，卻能夠清晰的出現下劃線，這樣就能夠給出明顯的信號。這種設計既能夠增強網頁的美觀性，又不會影響到網頁的交互。
第二，適當隱藏不需要的彈窗。現在有些網站為了增加網頁內容的展示量，或者為了增加一定的廣告點擊率，往往會設置很多彈窗，而且大多分在網頁的兩側，尤其是當網頁設計進入到寬頻時代之後，在1024*768的網頁設計面積下，兩旁會留下較大的留白，於是很多網站開始增加相應的彈窗，為用戶提供各種各樣的廣告。在不影響到用戶體驗的前提下，這么設計無可厚非。但是有的網站當用戶在使用傳統的4:3比例的屏幕打開網頁時，依然會彈出相應的廣告頁面，此時顯然就不合適了，應該給予隱藏設計，除了用戶想要看看什麼內容，需要滑鼠滑過才能顯示，劃出之後又能夠隱藏，這可以有效提升網頁的交互性。
當然在某些情況下，還要適當的展現一些彈窗，尤其是用戶在操作網站，比如填寫相應的表單，處理相關的數據時，一旦發現用戶的操作存在錯誤，就可以實時的彈出相應的解決問題的彈窗，此時會快速幫助用戶解決問題，進而贏得用戶的好感。
第三，讓網頁的導航變得清晰。有些網站設計人員往往認為導航對於網站的重要性不強，所以在設計上相對隨意，甚至將網頁導航的相關信息放在不顯眼的位置。而事實上，很多首次來到一個新網站的用戶，往往會優先關注網頁上的導航，然後據此尋找相應的內容。所以讓網頁的導航變得清晰同樣非常重要。在這里還要提出一點，為了讓網頁導航變得更加快速，在網頁上增添搜索框，實現網站內部的搜索同樣非常重要，這也是增強網頁交互性的重要措施、
總而言之，雖然大數據、智能化能夠提升網頁的交互能力，通過用戶行為分析來和用戶進行智能交互。不過我們在網頁設計過程中，同樣需要可以和用戶進行交互的元素，然後據此來優化交互效果，從而提升用戶的體驗度，那麼就算是沒有引入那些高科技，也能夠讓自己的網站變得具有良好的交互性，進而提升網站的服務水平

6、一個完整的交互設計流程是怎樣的?

    我想在的答案上做一些補充。

    在我的定義中，的答案更多是交互計劃進程中會利用的部分要領及東西。

    交互計劃的流程

    交互計劃的東西是人的活動，辛朝陽老師的《交互計劃：從物理邏輯到舉動邏輯》中有細致的敘述。

    以是交互計劃的流程是：

    1.相識用戶的活動及目標；

    2.定義活動中的舉動與題目；

    3.定義計劃的目標；

    4.計劃方案，重復精化；

    5.確認計劃方案對用戶活動的影響。

    對應的答案：

    ①、②、④聚焦在相識用戶是誰、他們怎樣利用產品？（活動和舉動是什麼）、為何如許利用？（目標和生理模型）【流程1】

    ③、④存眷定義用戶活動的詳細舉動和題目，定義計劃目標也通常在這個進程中完成。【流程2、3】

    ⑤、⑥、⑦是通過原型東西和專家經歷舉行方案計劃和精化。【流程4】

    ⑧是藉助測試用戶來觀察確認方案對用戶活動的終極影響是否到達盼望的計劃目標。【流程5】

    計劃東西與要領

    誇大區分計劃流程和計劃東西、計劃要領的緣故起因是：

    -計劃流程沒有規定利用的東西或要領。

    -計劃要領和東西是為了辦理計劃進程中的挑釁提供的辦理思路和框架。

    -計劃師應當根據環境來選擇得當環境的東西和要領。

    舉2個常見的例子：

    故事板

    雷同的媒介。故事版不會直接資助計劃師得到更好的方案，但可以資助計劃師在團隊討論時更正確地雷同發明的題目及計劃目標。它更多是一個雷同東西。要是只是一個人私家來做計劃決定計劃，故事板是不必要利用的；

    要是整個團隊雷同精良，想像力精良，縱然是團隊雷同也是可以不必要故事板的；

    要是在多次雷同中發明團隊中差別的角色對題目的明白是有困難的，那故事板大概可以改進這類題目。

    原型

    通過原型可以更好和更遍及地查驗方案。原型計劃有很多東西，紙面原型是此中一種。它既是計劃東西，也是雷同東西。

    要是計劃師本身舉行計劃，大略的紙面原型，乃至在頭腦中想像的原型都可以資助計劃師舉行方案推敲；

    要是必要相識團隊乃至用戶對差別方案的反饋，那就必要相對高精度的原型，電子稿大概可利用的原型；

    要是只是討論那個方案更優，只必要將相幹流程原型化即可討論；

    要是必要思量方案的可行性等題目，就必須將全部的流程都轉化成原型來討論；

    如今交互計劃的媒介已經不范圍在人機界面上，而是擴展到產品、環境以及人身上。這也是如今在流程和東西上討論比較多的此中一個緣故起因。

7、交互設計過程中的步驟有哪些

一、定性研究(Qualitative Research)：針對可能使用你的產品的人，可以是問卷、訪談……
二、確定人物角色(Persona)：即產品的典型用戶，可以有一種或幾種。例如知乎可以有一個人物角色叫CEO。
三、寫問題腳本(Problem Scenario)：羅列人物角色在使用產品時可能遇到的問題，可以整理成一個故事便於別人理解。
四、寫動作腳本(Action Scenario)：像寫故事一樣，寫人物角色在使用你設計好的產品時，發生的細節。注意，這個時候你的交互方案的概念模型已經基本成型了，這個概念模型是通過解決問題腳本里的問題而得出的。
五、畫線框圖(Framework)：這個線框圖是通過把動作腳本里的概念模型轉化成視覺模型得到的。
六、製作原型(Prototype)：做出來好像可以用的東西，有很多原型工具可以利用。
七、專家評測(Expert Evaluation)：至少兩名設計師或對交互設計比較了解的人通過反復測試原型。找到問題後修改線框圖並更新原型。
八、用戶評測(User Evaluation)：讓用戶使用原型，可以給他們一些任務去完成。根據用戶在使用過程中的問題和建議進行進一步修改。

8、網站交互設計需要注意的幾個方面

1、網站設計內容問題

內容是所有網站的靈魂，也是客戶關心的東西，打開網際網路看看企業網站，我們很容易發現，大多數中小企業網站欄目劃分趨於一致：公司簡介、產品介紹、聯系方式等，在版式設計上也基本上是上下分欄、左右分欄等方式，在內容上要從客戶考慮，要了解客戶想從你頁面上了解些什麼，總之要貼近客戶。2、網站設計技術問題

首先應該說明的是，我們並非鼓動企業在自己的網站中加大技術含量。實際上，最重要的是所使用技術在多大程度上實現了預期的功能，或者說所要的功能需要什麼樣的技術實現比較經濟劃算。而我們在與企業接觸中，常常碰到這種情況：網站中使用了先進的技術，當然進行了大筆的投資，但實際上所實現的功能通過其他方式，很低的投入就可以實現！但是企業並不了解這些。3、網站設計交互問題

您的網站是否實現了與客戶的交互，在多大程度上實現了這一功能，值得您仔細考慮，在我們接觸的客戶中，甚至有的客戶抱怨：他的信箱至今還沒有收到mail！經過我們的檢查，是因為留言簿中有關信息提交的設置有問題！使得與客戶之間的交流出現很大的問題，這也是很多企業應該注意的問題。另外在設計上應注意什麼

1，對每一個超級鏈接點擊之後採用新開窗口還是直接跳轉，必須認真對待。如果用戶點擊一個link之後是要放棄當前頁面開始新的體驗，則應用直接跳轉。如果用戶點擊link是要了解更多的信息，但是當前頁面的信心仍然有用，則應新開窗口。

2，在每一個用戶可能需要幫助的地方提供幫助信息或幫助按鈕。完善的幫助系統是一個產品，網站成功很重要的因素。

3，承諾問題，不要輕易對你的用戶承諾什麼，但是一旦承諾了，就要盡最大努力去兌現。在首頁規劃和網站設計中最為突出的問題是：1）首頁規劃和欄目設置不合理。主要表現在欄目設置有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息。2）重要信息不完整問題。企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，但為數不少的企業對這些重要信息不完整，尤其是產品介紹過於簡單，有些甚至沒有公布任何聯系方式；上述幾個問題只是企業網站設計問題中的部分問題，還有考慮瀏覽目標群體，從營銷方式設計都應該是現在企業網站所在考慮的問題。每一個細微的不足和問題，都有可能失去用戶，或者根本無法獲得被用戶發現的機會，結果最明顯的表現就是訪問量很小，或者由於得不到有價值的信息和服務，訪問者的轉化率很低，無法取得最終的收益。

9、什麼才是網站正確的交互設計方式

交互指的是產品與它的使用者之間的互動過程，而交互設計師則是秉承以用戶為中心的設計理念，以用戶體驗度為原則，對交互過程進行研究並開展設計的工作人員。

交互設計（InteractionDesign）是指設計師對產品與它的使用者之間的互動機制進行分析、預測、定義、規劃、描述和探索的過程，即定義人造物的行為方式。作為一門關注交互體驗的新學科在二十世紀八十年代產生了，它由IDEO的一位創始人比爾·莫格里奇在1984年一次設計會議上提出，他一開始給它命名為「軟面（SoftFace）」，他後來把它更名為「Interaction Design」――交互設計

交互設計師善於表達，以網頁語言表達產品所要告訴用戶的信息，同時顯示用戶的操作功能。

所以，凡是涉及到表達、傳達的問題，都可以找交互設計師來做，也應該由交互設計師來做。產品經理考慮要做什麼產品才有價值，交互設計師考慮怎麼把這個想法最有效的轉化成一系列的界面展現給用戶。除了展現，還有和用戶的交互。這個展現、交互的過程就需要一定的表達能力。這種表達能力並不是我們平時所特指的口頭表達，而是使用網頁語言表達。我們經常會討論一個按鈕的位置，討論某個狀態下游標的樣式，討論應該寫成「登錄」而非「登陸」等等：這些都是網頁語言表達。

10、交互設計的功能結構和交互流程設計是怎樣的?

（1）產品概念模型分析。從產品功能邏輯入手，結合對常見軟體的經驗積累和競爭產品的認識，加上對用戶的理解，為產品設計一個盡量接近用戶對產品運行方式理解的概念模型，成為產品設計的基礎框架。（2）功能結構圖。在產品概念模型的基礎上豐富交互組件，並理順交互組件之間的結構關系。（3）使用場景分析。模擬典型用戶執行關鍵功能達到其目標的使用場景。（4）交互流程分析。模擬在上述概念模型和功能結構決定的產品框架之中，支持使用場景的關鍵操作過程，如點擊鏈接的步驟和導向性指示。（5）產出物。形成產品設計文檔的交互設計部分.長春、世紀、教育學習更多迎請UI設計的知識。