產(chǎn)品經(jīng)理的基本功：如何學(xué)會交互設(shè)計？

有idea，知道功能，如何設(shè)計？

在我們的日常生活中，往往會因?yàn)橛龅狡孑夂筒凰氖聝憾a(chǎn)生解決問題的idea，由于知道問題的源頭，所以通常也能說出幾個功能需要改變，但是只是停留在知道和想到，而不能設(shè)計出解決方案，對于產(chǎn)品經(jīng)理而言是不ok的。產(chǎn)品經(jīng)理的工作職責(zé)核心就是把idea設(shè)計為產(chǎn)品，解決問題！

譬如，我們都應(yīng)該遇到過如下左圖的插座，很囧的是，我們竟然無法同時插入兩孔和三孔的插頭，敢問先森你這設(shè)計是給人用的么？作為產(chǎn)品汪，我們不會坐以待斃，我們會用自己的“專業(yè)”設(shè)計能力把它改變成醬紫（如下右圖），當(dāng)當(dāng)當(dāng)，哇靠，醬紫一做，是不是很牛逼，是否解決你的痛點(diǎn)啦？

所以為了讓用戶喜歡，我們需要設(shè)計，設(shè)計分三類：行為設(shè)計、形式設(shè)計、內(nèi)容設(shè)計。其中，行為設(shè)計就專指：交互設(shè)計，形式設(shè)計包括界面設(shè)計與風(fēng)格設(shè)計，內(nèi)容設(shè)計包括信息架構(gòu)設(shè)計、文案設(shè)計、動畫制作與 音效設(shè)計。

到底什么是交互設(shè)計呢，官方這么解釋，提供給你作為參考：

以人的需求為導(dǎo)向，理解用戶的期望、需求、理解商業(yè)、技術(shù)以及業(yè)內(nèi)的機(jī)會與制約?；谝陨系睦斫?，對于用戶產(chǎn)品使用行為的優(yōu)化設(shè)計，交互設(shè)計關(guān)注的是“用戶場景”和“用戶心理”，設(shè)計的對象是“用戶行為”，達(dá)成的目標(biāo)是“能用、易用、想用”。

說了這么多，你肯定心里會想產(chǎn)品經(jīng)理為什么要學(xué)交互設(shè)計呢？從我的觀察看，原因有兩個：

現(xiàn)在的產(chǎn)品經(jīng)理都需要綜合素質(zhì)強(qiáng)，樣樣都能干，才能更佳清晰的表達(dá)自己的想法；

充當(dāng)交互設(shè)計師的角色，才能變得更強(qiáng)，當(dāng)公司人員不夠或者沒有交互設(shè)計師一角的時候，或者不想和交互設(shè)計師撕逼，產(chǎn)品經(jīng)理需要能獨(dú)當(dāng)一面。so，對于產(chǎn)品經(jīng)理來說，設(shè)計需要自己來做，并且需要知道交互設(shè)計的流程，熟練使用交互設(shè)計工具。

知道為什么設(shè)計，那么到底如何設(shè)計呢？

工具就是拿來提升工作效率的，工欲善其事，必先利其器。首先安利幾個交互設(shè)計工具，如下圖所示：

然后安利交互設(shè)計的流程，如下圖所示：

當(dāng)產(chǎn)品經(jīng)理在做產(chǎn)品之前，都需要了解產(chǎn)品要做成什么樣子，做任務(wù)分析，然后了解產(chǎn)品功能的邏輯并梳理頁面流程，接著需要考慮頁面布局，用原型設(shè)計來表達(dá)你自己對產(chǎn)品的規(guī)劃和想法，并在原型設(shè)計里添加設(shè)計說明，類似代碼的注釋。

任務(wù)分析：對照著功能需求，對用戶操作任務(wù)進(jìn)行分析梳理，給出FeatureList，寫明主要任務(wù)及子任務(wù)；

頁面流程：決定界面的信息架構(gòu)與操作邏輯，主要表現(xiàn)形式為流程圖

頁面布局：對頁面進(jìn)行拆解與重組，確定結(jié)構(gòu)與分塊，分塊要合理并具備邏輯性與視覺感

原型設(shè)計：完成具體頁面的設(shè)計，界面元素的表現(xiàn)，原型設(shè)計圖分低保真和高保真兩類

設(shè)計說明：對頁面設(shè)計進(jìn)行的補(bǔ)充描述及詳細(xì)說明

弄清楚如何設(shè)計了，我們就來聊聊交互設(shè)計做什么吧？

首先，我們聊交互設(shè)計在產(chǎn)品各個階段的作用吧。

產(chǎn)品初期：交互設(shè)計關(guān)注重點(diǎn)：快速產(chǎn)品定位風(fēng)格樣式，快速交付主要功能頁面（小版本）快速上線；

產(chǎn)品中期：交互設(shè)計關(guān)注重點(diǎn)：頁面與交互操作的深度設(shè)計，完善功能實(shí)現(xiàn)效果；

產(chǎn)品后期：交互設(shè)計關(guān)注重點(diǎn)：穩(wěn)定版本迭代，操作體驗(yàn)一致性與頁面邏輯優(yōu)化。

然后，我們聊交互設(shè)計涉及的各種定律和知識，可查看系列文章：

《細(xì)節(jié)體驗(yàn)｜你離用戶只差一個好的交互》

《用好的交互設(shè)計來管理復(fù)雜－“Tab”》

最后，我們聊移動端交互設(shè)計的基礎(chǔ)知識：

多端設(shè)計：統(tǒng)一性、創(chuàng)新性

好處：

品牌基因，提高產(chǎn)品關(guān)聯(lián)性

提高使用效率，降低學(xué)習(xí)成本，便于管理

方法：

產(chǎn)品與系統(tǒng)、平臺之間要統(tǒng)一

企業(yè)多產(chǎn)品線全局規(guī)劃

多尺寸設(shè)計：兼容適配＋高效設(shè)計

觸控設(shè)計：優(yōu)化體驗(yàn)＋移動交互

知道交互設(shè)計具體做什么了，我們就要畫畫圖寫寫文檔咯

交互設(shè)計文檔都給誰看呢？請看下圖：

那么，交互設(shè)計文檔的作用又是什么呢？一份詳盡的交互設(shè)計文檔，將很多產(chǎn)品細(xì)節(jié)都用圖視和文字的形式固定下來，起到了規(guī)范的作用，有助于團(tuán)隊(duì)成員的溝通，降低溝通成本。究竟一份交互設(shè)計文檔需要哪些內(nèi)容呢？一般來講，一份交互設(shè)計文檔大致需要7個部分，分別是：

1.文檔封面、版本紀(jì)錄

2.模塊清單、業(yè)務(wù)流程、原型設(shè)計、錯誤處理

現(xiàn)在，對于職責(zé)和崗位的分工，有可能會變得越來越模糊。擁有一份較好的交互設(shè)計文檔，會是產(chǎn)品經(jīng)理的法寶之一。未來，對于一名優(yōu)秀的產(chǎn)品經(jīng)理，是需要交互設(shè)計、項(xiàng)目管理、產(chǎn)品管理、用戶研究等多方面的素質(zhì)和要求的，所以沒事兒多畫畫交互圖，多體驗(yàn)產(chǎn)品，一定對你的產(chǎn)品生涯幫助不少。

作者：Mandy權(quán)，微信公眾號：PMandyQ，一名快樂的產(chǎn)品經(jīng)理！