正文

交互設計基本流程（交互設計基本流程包括）

發(fā)布時間：2023-04-28 13:17:36 稿源：創(chuàng)意嶺閱讀： 695

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于交互設計基本流程的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務客戶遍布全國，設計相關業(yè)務請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、整個交互設計師的工作流程有哪些內(nèi)容
2、UI 設計的整個工作流程是怎樣的？
3、怎樣做一個完整的交互設計流程
4、交互設計做什么

交互設計基本流程（交互設計基本流程包括）

一、整個交互設計師的工作流程有哪些內(nèi)容

1.接受產(chǎn)品經(jīng)理下發(fā)的產(chǎn)品需求文檔和產(chǎn)品流程圖

2.分析需求整理成低保真原型圖，細化流程，明確功能板塊

3.寫交互文檔

4.將低保真原型圖給開發(fā) 后臺和視覺設計師，將交互文檔給后臺和開發(fā)

5.跟進項目，解決文檔的紕漏

二、UI 設計的整個工作流程是怎樣的？

一.UI設計參與完成的流程。

UI設計的工作流程會根據(jù)公司性質、規(guī)模、項目性質、項目規(guī)模、UI職能要求等的不同有所區(qū)別。

UI設計參與完成的流程大致為：

1. 參與需求評審，理解PRD

2. 用戶調(diào)研、情緒板梳理（主要針對一些對體驗、視覺要求很高的產(chǎn)品，需要更加多關注人的設計，不是必要流程）

3. 交互設計

4. 視覺設計

5. 視覺評審（視覺稿確定過后）

6. UI走查、驗收（開發(fā)提測后，發(fā)布前）

在工作過程中，可能會組織團隊成員對設計方案、項目進行復盤，這樣細致的分工會把每個環(huán)節(jié)都打磨得非常到位。我們再來細分工作中的每一步，具體的工作內(nèi)容是什么？

1.參與需求評審，理解PRD

一個項目全員開始動工，應該就是從需求評審開始。在產(chǎn)品理清楚需求后，會輸出PRD或者原型草圖，依據(jù)PRD或者原型草圖來和項目組的全體成員澄清需求。在需求澄清會中，項目組成員會對需求、操作流程、業(yè)務邏輯等提出不同的問題，產(chǎn)品完善問題。需求澄清不會一次就讓項目組全體成員清晰的明確所有需求，產(chǎn)品會根據(jù)大家的疑惑去不斷完善需求內(nèi)容，在多次的需求澄清后，大家達成一致的共識，正式開始動工。

在這個過程中UI設計需要：

（1）反復和產(chǎn)品溝通，確認，協(xié)助產(chǎn)品給出原型草圖。

（2）協(xié)助產(chǎn)品明確產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運行方式等。

2. 用戶調(diào)研、情緒板梳理

產(chǎn)品、UI、UE等相關人員會依據(jù)產(chǎn)品的定位、競品分析、目標用戶的使用場景、需求、心理等提出用戶的研究報告。

在這個過程中UI設計需要：

（1）參與討論，輸出紙稿線框稿、用工具制作線框圖。

（2）協(xié)助產(chǎn)品初擬產(chǎn)品設計方向和思路，提出可用性設計建議。

3. 交互設計

交互設計階段一般由交互設計師（UE）和產(chǎn)品一起制定，根據(jù)可用性分析結果制定交互方式、操作流程、跳轉流程等。在線框圖階段去設計交互流程，可以減少由于交互流程改變而帶來的視覺設計的改變。這個階段會輸出原型圖，以支持后面做詳細的視覺設計。很多公司沒有專職的交互設計師，交互設計由產(chǎn)品或者UI完成。

在這個過程中UI設計需要：

（1）這個過程，UI可以依據(jù)上一個流程中的輸出，初步設計產(chǎn)品的風格，然后和產(chǎn)品不斷推敲。

（2）原型設計的不斷完善，紙質草圖-線框圖-低保真-高保真（高保真原型成本較高，很多小規(guī)模的公司都不做高保真原型設計）。

4.視覺設計

視覺設計階段，UI根據(jù)界面原型，對界面原型進行視覺效果的處理。該項目組的UI在明確界面風格、要求后，開始制作所有界面的視覺設計

在這個過程中UI設計需要：

（1）確定整個界面的風格、界面、窗口、圖標、色調(diào)、按鈕的表現(xiàn)。

（2）完成所有界面的視覺設計，交出最終的視覺稿。

5. 視覺評審

在視覺稿確定之后，UI設計組針對界面做一致性測試、簡潔性測試、美觀度測試、用戶體驗測試、行業(yè)標準測試等。然后召集項目組所有人員召開原型的可用性測試評審會，發(fā)現(xiàn)可用性問題并提出修改意見。當視覺評審過了之后，配合技術部門實現(xiàn)界面設計的實際效果。

在這個過程中UI設計需要：

（1）針對提出的問題，對界面進行不斷的完善。

（2）參與視覺評審全過程。

（3）配合技術部門實現(xiàn)界面設計的實際效果，給出最后的界面效果圖，標注好距離、尺寸、顏色、文字大小等。

（4）輸出前端開發(fā)工程師需要的切圖。

6. UI走查、驗收

在發(fā)布前，測試會針對可用性、用戶體驗、測試界面等對設計問題進行一下回饋，在依據(jù)這些問題把設計工作進行細節(jié)調(diào)整。再正式發(fā)布之后，收集市場上真實的用戶體驗并記錄，為下個版本提供強有力的市場需求。

在這個過程中UI設計需要：

（1）不斷完善界面設計。

（2）UI人員把可行性建議進行完善，不斷總結以備以后產(chǎn)品設計升級。

當然，以上談到的UI設計工作只是一個大致的流程，一個項目UI參與的流程肯定是會依據(jù)公司性質、規(guī)模、項目性質、人員配比等不同，所做的工作有所縮減或精分。

三、怎樣做一個完整的交互設計流程

有什么具體要求嗎？

四、交互設計做什么

Ⅰ、先了解一下交互設計的基本概念：

交互設計是一種目標導向設計，所有的工作內(nèi)容都是在圍繞著用戶行為去設計的。交互設計師通過設計用戶的行為，讓用戶更方便更有效率的去完成產(chǎn)品業(yè)務目標，獲得愉快的用戶體驗。

Ⅱ、交互設計在項目流程中的位置和任務：

項目前期的流程和節(jié)點：

職能的細化就是為了讓產(chǎn)品在每個專業(yè)環(huán)節(jié)都做到極致，提高競爭力。如果是為了走流程，每個環(huán)節(jié)都是任務式的交付，臃腫的分工除了增加成本和拖慢項目進度，沒有實際意義。所以交互設計需要做的足夠好，才能將這份工作做的有意義。

Ⅲ、交互設計的具體職能：

從上圖中可以看出，交互設計主要干三件事：

①定義部分需求 ②定義信息架構和操作流程 ③ 組織頁面元素，制作原型demo

①定義部分需求

以前的慣性思維是需求應該由產(chǎn)品人員負責，設計人員只是實現(xiàn)和改善界面體驗。而產(chǎn)品的真正需求不僅僅來源于業(yè)務，還包括使用者的情感需求。在情感分析方面，交互專業(yè)是具有優(yōu)勢的，舉個例子：

一個增值服務的宣傳模塊，業(yè)務模型可能是這樣子：

考慮到情感因素后，需求模型會不斷完善：

上圖僅僅是舉個例子，真正的產(chǎn)品人員不會將業(yè)務模型想的如此簡單。舉這個例子就是想說明一下產(chǎn)品的需求設計不僅僅是業(yè)務模型，還需要考慮用戶情感、用戶行為和運營數(shù)據(jù)。當產(chǎn)品人員考慮不周全的時候，交互設計師有責任對需求進行修訂和完善，這樣的目標導向設計才是完整的。

②定義框架

這部分的內(nèi)容屬于交互設計師的核心工作內(nèi)容，也就是我上一章節(jié)所講的框架設計階段。這個階段的產(chǎn)出質量直接影響到業(yè)務目標和轉化率。如果框架混亂，接下來的界面怎么優(yōu)化都是無效的。這好比大型超市的走道設計，如果路線規(guī)劃的不好，再多再大的指引圖標都是低效的。交互設計做什么？讓用戶快速完成目標，提升操作效率，這才是框架設計的意義所在。

破洛洛文章簡介：本章主要詳述一下交互設計的職能——交互設計師具體做哪些內(nèi)容？

什么是框架設計呢？這要分成兩部分內(nèi)容：

1.關于結構導航的設計

把我們的產(chǎn)品想象成一個巨大的圖書館，我們需要幫助用戶（有目的性的、目的不明確的，無目的性的）尋找他們感興趣的圖書，怎么幫助用戶準確的尋找完成目標任務，這就是導航設計。導航的設計任務一般在新項目或重構項目。

導航大概可以分為三種類型：結構導航、關聯(lián)導航、可用性導航

在框架設計的階段，交互設計師主要關注于結構導航的設計。

結構導航分兩種：全局導航與局部導航。全局導航一般是指無聯(lián)系的信息結構做的一級大分類，方便用戶以最快速的方式了解整個網(wǎng)站有什么大概內(nèi)容。而局部導航則關注于用戶最方便的快捷操作和業(yè)務引導操作。

交互設計師的首要任務就是將業(yè)務內(nèi)容信息組織分類，劃分出主次關系，根據(jù)業(yè)務目的和用戶習慣定義規(guī)劃全局導航和局部導航的設計。那應該怎么規(guī)劃呢？

回到第一個增值服務頁面的例子（虛擬案例，非真實案例）：

將需求梳理后（怎么梳理，請google抽屜整理法），我們可以確認全局導航：

再詳細規(guī)劃局部導航：

局部導航的層級可以不斷往下延伸，通過樹形目錄或面包屑的方法幫助用戶瀏覽時不至于迷路。

2. 關于流程的設計

之前的案例我們已經(jīng)基本上確認了模塊需求有哪些頁面，頁面大概會放什么內(nèi)容。但真實的用戶任務并不是在一個頁面上完成的，這時候我們就需要通過流程的方式把任務變得清晰和包容用戶的各種誤操作。

虛擬案例：

在流程的規(guī)劃設計中要遵循：1.以業(yè)務目的為主要導向；2.兼容到用戶的習慣；3.盡量讓流程做減法，多一個流程就會丟一部分用戶；4.任務是連貫和清晰的；5.考慮實現(xiàn)方式的復雜程度；歡迎補充…

③組織頁面元素，制作原型demo

經(jīng)過了需求的完善和框架的設計，之前的這些工作還是停留在抽象的想法階段，怎么把想法轉達給項目組的其他人員呢？交互還需要把想法和規(guī)劃表達出來，那么最好的方式就是制作原型Demo。把Demo做出來，讓產(chǎn)品，開發(fā)，測試直觀的看到產(chǎn)品的雛形，再廣泛的接受意見，對原型進行不斷的修正，改進，做簡單的用戶測試繼續(xù)挖掘情感需求。

那么怎么去組織頁面元素，制作原型Demo？哪些表現(xiàn)層面是交互設計師該重點表達的內(nèi)容呢？原型的制作又有哪些章法可循呢？這個。.還是等下一個章節(jié)再講吧！

以上就是關于交互設計基本流程相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。