正文

交互設(shè)計(jì)基本流程（交互設(shè)計(jì)基本流程包括）

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

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

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

本文目錄:

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

交互設(shè)計(jì)基本流程（交互設(shè)計(jì)基本流程包括）

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

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

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

3.寫交互文檔

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

5.跟進(jìn)項(xiàng)目，解決文檔的紕漏

二、UI 設(shè)計(jì)的整個(gè)工作流程是怎樣的？

一.UI設(shè)計(jì)參與完成的流程。

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

UI設(shè)計(jì)參與完成的流程大致為：

1. 參與需求評(píng)審，理解PRD

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

3. 交互設(shè)計(jì)

4. 視覺設(shè)計(jì)

5. 視覺評(píng)審（視覺稿確定過后）

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

在工作過程中，可能會(huì)組織團(tuán)隊(duì)成員對(duì)設(shè)計(jì)方案、項(xiàng)目進(jìn)行復(fù)盤，這樣細(xì)致的分工會(huì)把每個(gè)環(huán)節(jié)都打磨得非常到位。我們?cè)賮砑?xì)分工作中的每一步，具體的工作內(nèi)容是什么？

1.參與需求評(píng)審，理解PRD

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

在這個(gè)過程中UI設(shè)計(jì)需要：

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

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

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

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

在這個(gè)過程中UI設(shè)計(jì)需要：

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

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

3. 交互設(shè)計(jì)

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

在這個(gè)過程中UI設(shè)計(jì)需要：

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

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

4.視覺設(shè)計(jì)

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

在這個(gè)過程中UI設(shè)計(jì)需要：

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

（2）完成所有界面的視覺設(shè)計(jì)，交出最終的視覺稿。

5. 視覺評(píng)審

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

在這個(gè)過程中UI設(shè)計(jì)需要：

（1）針對(duì)提出的問題，對(duì)界面進(jìn)行不斷的完善。

（2）參與視覺評(píng)審全過程。

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

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

6. UI走查、驗(yàn)收

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

在這個(gè)過程中UI設(shè)計(jì)需要：

（1）不斷完善界面設(shè)計(jì)。

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

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

三、怎樣做一個(gè)完整的交互設(shè)計(jì)流程

有什么具體要求嗎？

四、交互設(shè)計(jì)做什么

Ⅰ、先了解一下交互設(shè)計(jì)的基本概念：

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

Ⅱ、交互設(shè)計(jì)在項(xiàng)目流程中的位置和任務(wù)：

項(xiàng)目前期的流程和節(jié)點(diǎn)：

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

Ⅲ、交互設(shè)計(jì)的具體職能：

從上圖中可以看出，交互設(shè)計(jì)主要干三件事：

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

①定義部分需求

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

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

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

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

②定義框架

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

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

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

1.關(guān)于結(jié)構(gòu)導(dǎo)航的設(shè)計(jì)

把我們的產(chǎn)品想象成一個(gè)巨大的圖書館，我們需要幫助用戶（有目的性的、目的不明確的，無目的性的）尋找他們感興趣的圖書，怎么幫助用戶準(zhǔn)確的尋找完成目標(biāo)任務(wù)，這就是導(dǎo)航設(shè)計(jì)。導(dǎo)航的設(shè)計(jì)任務(wù)一般在新項(xiàng)目或重構(gòu)項(xiàng)目。

導(dǎo)航大概可以分為三種類型：結(jié)構(gòu)導(dǎo)航、關(guān)聯(lián)導(dǎo)航、可用性導(dǎo)航

在框架設(shè)計(jì)的階段，交互設(shè)計(jì)師主要關(guān)注于結(jié)構(gòu)導(dǎo)航的設(shè)計(jì)。

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

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

回到第一個(gè)增值服務(wù)頁面的例子（虛擬案例，非真實(shí)案例）：

將需求梳理后（怎么梳理，請(qǐng)google抽屜整理法），我們可以確認(rèn)全局導(dǎo)航：

再詳細(xì)規(guī)劃局部導(dǎo)航：

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

2. 關(guān)于流程的設(shè)計(jì)

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

虛擬案例：

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

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

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

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

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