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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

好處：

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

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

方法：

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

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

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

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

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

交互設(shè)計(jì)文檔都給誰(shuí)看呢？請(qǐng)看下圖：

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

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

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

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

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