交互設(shè)計(jì)師必須知道的五大交互設(shè)計(jì)流程

時(shí)間：2022-05-29 15:27:01 | 來源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 15:27:01 來源：網(wǎng)絡(luò)營(yíng)銷

交互設(shè)計(jì)又稱互動(dòng)設(shè)計(jì)，從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)。同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充，交互設(shè)計(jì)還涉及到多個(gè)學(xué)科，以及和多領(lǐng)域多背景人員的溝通。

其實(shí)，交互設(shè)計(jì)需要做的事情也不是一成不變的，它會(huì)隨每個(gè)交互設(shè)計(jì)師的工作內(nèi)容差異而不同，具體到每個(gè)項(xiàng)目也會(huì)有區(qū)別。下面我就在億企邦上分享下我是怎樣做交互設(shè)計(jì)及做交互設(shè)計(jì)的五大流程，方式不一定合適所有的交互設(shè)計(jì)師，但卻能說明一些你想要了解的問題。

一、發(fā)現(xiàn)用戶需要，建立明確需求

發(fā)現(xiàn)用戶需要的方式有很多種，我們可以在用戶反饋里收集到許多用戶提出的想法，他們希望我們能提供幫助解決問題的產(chǎn)品；我們也可以主動(dòng)去觀察一些生活中的信息，為靈感的迸發(fā)做儲(chǔ)備。

比如說網(wǎng)頁(yè)的隱形加載機(jī)制項(xiàng)目，有不少用戶跟我們反應(yīng)說，他們有時(shí)因?yàn)榫W(wǎng)站的圖片太多或太大，會(huì)導(dǎo)致網(wǎng)站頁(yè)面加載慢，同時(shí)在加載的過程中頁(yè)面顯示都空白的，所以希望能提供一個(gè)專業(yè)的隱形加載機(jī)制功能，能夠幫助他們有效的展示頁(yè)面的顯示情況。

確認(rèn)了用戶的這一需要，我們的產(chǎn)品同事就會(huì)組織立項(xiàng)，把用研和設(shè)計(jì)組的同事呼喚過來一起進(jìn)行調(diào)研（具體可查看億企邦的《交互設(shè)計(jì)的三大隱形機(jī)制：加載、刷新和緩存》相關(guān)介紹），確定我們的目標(biāo)用戶。

用研組會(huì)通過問卷調(diào)查等方式盡可能多的去收集信息，交互設(shè)計(jì)師也會(huì)參與分析調(diào)研，組織會(huì)議幫助用研組完善信息，我們會(huì)采取一些有趣的方式，比如一堆人在一起頭腦風(fēng)暴，大家回憶各種相關(guān)的生活場(chǎng)景，然后把一些關(guān)鍵詞記錄下來。

這一步我們的目的是要知道：用戶想要什么？

通過這些步驟我們提煉出一些最重要的功能需求，接著產(chǎn)品組會(huì)整理出需求文檔，設(shè)計(jì)師就位。

二、提出設(shè)計(jì)方案

通過調(diào)研，我們得到了大量數(shù)據(jù)信息，并建立了明確的需求，下一步就是開始提設(shè)計(jì)方案。

這個(gè)階段我會(huì)做一些概念設(shè)計(jì)，類似于做實(shí)物產(chǎn)品時(shí)設(shè)計(jì)一個(gè)水杯，我會(huì)描述它說：我要設(shè)計(jì)一個(gè)旅行用的水杯，它能疊成一個(gè)小圓盤，喝水的時(shí)候只需要把小圓盤的圓心部分往下按，就能變成一個(gè)杯子。

互聯(lián)網(wǎng)產(chǎn)品也是這樣，需要賦予它一個(gè)概念，例如日程管理：這是一個(gè)專業(yè)的日程管理功能，通過使用它，我們可以有效的管理自己每天的日程和時(shí)間，以提高工作效率，并且不會(huì)再錯(cuò)過每個(gè)重要的約會(huì)！

這些文字并不一定非是交互設(shè)計(jì)師所總結(jié)，但是交互設(shè)計(jì)師必須要做到對(duì)產(chǎn)品心里有數(shù)，明確我們要做什么。

同時(shí)需要進(jìn)行的還有初稿設(shè)計(jì)，在這里我所謂的初稿，并不一定是嚴(yán)格要求中的交互原型，可以是用工具軟件把主要的頁(yè)面流程做出來，也可以手繪草圖，只要能清晰表達(dá)設(shè)計(jì)構(gòu)思的，什么樣的方式都可以。

三、制作設(shè)計(jì)原型

制作設(shè)計(jì)原型，也就是常說的交互稿，區(qū)別于做設(shè)計(jì)方案時(shí)的初稿，這份交互稿我會(huì)盡可能細(xì)致的把流程和具體操作形式表達(dá)出來。

考慮到做交互是一個(gè)迭代過程，億企邦會(huì)在設(shè)計(jì)稿的首頁(yè)為設(shè)計(jì)的產(chǎn)品做一份交互更新日志，記錄下交互更新時(shí)間、版本名稱、更新類型、更新內(nèi)容、參考需求文檔與交互負(fù)責(zé)人。如下圖所示：

億企邦覺得對(duì)于這份更新日志的意義在于：

1、更新時(shí)間：便于全程跟蹤記錄項(xiàng)目，掌握每個(gè)時(shí)間點(diǎn)。

2、版本名稱：便于項(xiàng)目參與人員查找上一版本的交互稿。

3、更新類型：了解每次更新需求的性質(zhì)。

4、更新內(nèi)容：清晰呈現(xiàn)每一次更新的內(nèi)容，并提供一個(gè)直接去到更新頁(yè)面的鏈接，這樣在進(jìn)行迭代時(shí)我們的伙伴不用一頁(yè)頁(yè)去尋找更新點(diǎn)。

5、參考需求文檔：便于項(xiàng)目參與人員查找對(duì)應(yīng)的需求文檔。

6、交互負(fù)責(zé)人：記錄每次迭代的交互負(fù)責(zé)人，并能方便工作交接。

交互稿的制作過程，一般是要先做原型的，像一些視覺比較成熟且相對(duì)穩(wěn)定的產(chǎn)品，我會(huì)偏向做高保真模型，我們會(huì)整理一個(gè)控件庫(kù)，這樣能提高制作效率；做一個(gè)全新項(xiàng)目時(shí)，黑白稿線稿都是可用的方式，如果交互設(shè)計(jì)師能對(duì)大概的視覺效果有把握，也能做得精致些。同時(shí)，也要保證頁(yè)面的合理性（比如我曾在億企邦發(fā)布的一篇關(guān)于網(wǎng)頁(yè)分頁(yè)導(dǎo)航的問題，具體可查看《網(wǎng)站分頁(yè)導(dǎo)航的10大交互設(shè)計(jì)因素》相關(guān)介紹），這些我想大家都很了解，所以不多說了。

四、制作交互設(shè)計(jì)說明

之所以把這部分內(nèi)容提出來單獨(dú)寫一段，是因?yàn)橹昂秃芏嘧鼋换サ呐笥延懻撨^該怎樣做好交互說明，大家各有看法，很難找到這部分工作的衡量標(biāo)準(zhǔn)。

交互說明書在整個(gè)設(shè)計(jì)過程中，也許只會(huì)占用小部分工作量，但是作用不小，它能幫助我們減少溝通成本，輔助交互稿描述設(shè)計(jì)理念，表達(dá)交互流程，更細(xì)致的展現(xiàn)我們的設(shè)計(jì)。

與做設(shè)計(jì)稿不同，個(gè)人認(rèn)為，交互說明這部分工作，需要我們更多了解它作說明的對(duì)象，即產(chǎn)品經(jīng)理、視覺設(shè)計(jì)師、開發(fā)人員的需求，從而達(dá)到真正的“輔助”效果，而不是盲目憑自己主觀去長(zhǎng)篇大論，否則我們要為此花費(fèi)時(shí)間，而且這部分工作只能沉積為一堆我們自己欣賞毫無意義的文字。

為此我曾與合作過的各組同事進(jìn)行溝通，提煉出一些他們對(duì)交互說明的需求，不求全面，但求能說明一些問題。

1、交互說明最好是圖文并茂（all）

其主要作用就是便于閱讀和理解。

2、頁(yè)面跳轉(zhuǎn)的說明（產(chǎn)品&程序）

頁(yè)面跳轉(zhuǎn)是涉及多個(gè)頁(yè)面關(guān)系的操作，產(chǎn)品人員在看交互稿時(shí)，會(huì)更多去關(guān)注多個(gè)目的性的任務(wù)操作流程，而對(duì)頁(yè)面跳轉(zhuǎn)的記憶是有限的，所以需要頁(yè)面跳轉(zhuǎn)說明。

3、交互說明能否考慮與產(chǎn)品需求文檔結(jié)合（產(chǎn)品）

開發(fā)文檔會(huì)涉及產(chǎn)品概念、技術(shù)方案、業(yè)務(wù)執(zhí)行角色等內(nèi)容，和交互設(shè)計(jì)稿有著緊密關(guān)聯(lián)，所以，億企邦覺得交互說明書與開發(fā)文檔是可以相互做補(bǔ)充，整理成一份文檔，這樣也能避免工作內(nèi)容重復(fù)。

4、對(duì)交互稿中不明顯的交互動(dòng)作或隱藏的設(shè)置項(xiàng)作說明（產(chǎn)品&視覺&頁(yè)面構(gòu)架）

細(xì)節(jié)和動(dòng)作需要描述清楚，比如說鼠標(biāo)focus、click的動(dòng)作，或click后是loading還是跳轉(zhuǎn)，這些平時(shí)都是開會(huì)上討論，但是參與項(xiàng)目的人員不一定都能記住，所以會(huì)需要在交互說明書里做說明，并需要考慮到頁(yè)面構(gòu)架組需要預(yù)留適應(yīng)變化的結(jié)構(gòu)。

5、產(chǎn)品風(fēng)格定位（視覺）

商務(wù)風(fēng)？休閑風(fēng)？視覺需要一個(gè)準(zhǔn)確的產(chǎn)品風(fēng)格定位。這部分工作不一定是由交互人員來確定，但在產(chǎn)品孕育階段中，設(shè)計(jì)稿討論以及不定時(shí)更新的數(shù)據(jù)調(diào)查，會(huì)使得產(chǎn)品風(fēng)格定位漸漸明確，視覺的同事更多是參與設(shè)計(jì)階段的工作，這就需要交互人員將這些信息在交互說明中記錄下來，以輔助視覺完成。

6、極限狀態(tài)（前端）

比如一個(gè)列表最長(zhǎng)和最短顯示。

7、異常/出錯(cuò)情況說明（程序）

這一點(diǎn)在交互稿制作和與產(chǎn)品溝通過程中容易被忽略。

有的設(shè)計(jì)師會(huì)疑惑：為什么我做的設(shè)計(jì)說明書會(huì)沒人看？我寫的很詳細(xì)了，但是他們還是會(huì)問我一堆設(shè)計(jì)的問題！甚至，問我為什么要做這個(gè)文檔？

在這些情況面前，設(shè)計(jì)師應(yīng)該做些思考，我們所制作的這份說明是否真正解決問題了呢？

一些基本的邏輯判斷和文字內(nèi)容（具體可查看億企邦的《如何個(gè)性化設(shè)計(jì)字體的風(fēng)格》相關(guān)介紹），產(chǎn)品人員已在需求文檔中列出且在交互稿中已清晰呈現(xiàn)，例如原型中完整呈現(xiàn)的設(shè)置內(nèi)容，或一個(gè)單選復(fù)選關(guān)系，這些內(nèi)容我們?cè)倩〞r(shí)間去大篇描述，并無太大意義。

所以，億企邦的理解是，交互說明并不一定是一份文本，它不該是設(shè)計(jì)師的舞文弄墨，更不該流于形式做交互設(shè)計(jì)原型的復(fù)制品。

我們可以在交互原型上注釋，在圖上寫說明，或者是在和項(xiàng)目組發(fā)郵件時(shí)寫為郵件內(nèi)容，當(dāng)然也可以是word文檔，PPT…。

總之，我們要做到的是真正解決問題，讓交互說明書成為幫助項(xiàng)目中各組成員之間進(jìn)行有效溝通、輔助理解設(shè)計(jì)內(nèi)容從而達(dá)到提高項(xiàng)目效率的工具，并在需要的時(shí)候被制作。

五、用戶測(cè)試與評(píng)估

產(chǎn)品基本功能實(shí)現(xiàn)后，我們會(huì)做用戶測(cè)試，設(shè)計(jì)是很主觀的，并且會(huì)受各種因素影響，所以我們的產(chǎn)品難免會(huì)存在一些意料之外的問題，通過招募用戶來使用我們的產(chǎn)品，我們能收集到一些使用場(chǎng)景中發(fā)現(xiàn)問題的反饋，并把這些整理成優(yōu)化點(diǎn)，完善我們的產(chǎn)品。

同時(shí)交互設(shè)計(jì)師也要多用自己的產(chǎn)品，保證上線內(nèi)容與設(shè)計(jì)保持一致。

這就是我對(duì)自己交互工作的一個(gè)相對(duì)完整的描述，我的感覺是，這是一份很有意思的工作，因?yàn)槲易约阂彩且粋€(gè)用戶，我會(huì)在使用產(chǎn)品的過程中發(fā)現(xiàn)這樣那樣的問題，所以我也自然而然的想去解決這些問題，并在尋求方法中得到一定的積累。

然而，這也確實(shí)是一份很需要花心思的工作，設(shè)計(jì)方式自由，但是設(shè)計(jì)內(nèi)容需嚴(yán)謹(jǐn)，疏忽了一個(gè)問題，就有可能為產(chǎn)品帶來極大的負(fù)面影響，甚至失去用戶的青睞。

要讓我們的產(chǎn)品保持良性發(fā)展，就要求設(shè)計(jì)師們不斷探索優(yōu)秀的設(shè)計(jì)方法。

億企邦點(diǎn)評(píng)：

交互設(shè)計(jì)師不能依靠市場(chǎng)調(diào)查出的用戶需求來做事，因?yàn)檫@些是最低的要求，只能保證我們不犯錯(cuò)，我們要發(fā)現(xiàn)用戶潛意識(shí)里的渴望。我們要主動(dòng)的去發(fā)現(xiàn)用戶的需求，然后用各種方法滿足用戶的需求。所以，這就要求交互設(shè)計(jì)師通常是超級(jí)敏感的，具有很強(qiáng)的觀察能力，創(chuàng)造能力以及表達(dá)能力。因?yàn)槲覀冋嬲O(shè)計(jì)的，是那些不可言說的感受。