編輯導(dǎo)語：產(chǎn)品原型和UI設(shè)計(jì)在時(shí)間上存在交叉，一旦UI改動，原型可能也要改，但是這樣會讓產(chǎn)品經(jīng)理又累又被動，有沒有什么好的方法來解決呢？對此，本篇文章的作者給出了答案，如果你感興趣的話，那就一起來看看吧。

產(chǎn)品原型和UI設(shè)計(jì)在時(shí)間上存在交叉，一旦變更又存在聯(lián)動變更，導(dǎo)致很忙很亂。

如何通過時(shí)間—質(zhì)量—資源“三角”為原則，協(xié)調(diào)二者的關(guān)系?

一、產(chǎn)品原型和UI設(shè)計(jì)的邊界

產(chǎn)品設(shè)計(jì)方面，UI、UE、UX、IA、ID等概念傻傻分不清楚，并且國內(nèi)外或不同公司的定義不同。

一般而言：

UI：User Interface 用戶界面。主要關(guān)注產(chǎn)品視覺呈現(xiàn)的效果。就是界面元素是什么，形狀、顏色、尺寸，放在哪里。

UE or UX：User Experience 用戶體驗(yàn)。即用戶對產(chǎn)品的主觀感受。通過提高產(chǎn)品的可用性、易用性、交互過程中的愉悅程度，來提高用戶滿意度的過程。

IA：信息架構(gòu)（IA），就是App的整體結(jié)構(gòu)。即將內(nèi)容分開并歸類。包括設(shè)計(jì)網(wǎng)站地圖、層次結(jié)構(gòu)、分類、導(dǎo)航和元數(shù)據(jù)。

ID (Interaction Design) 交互設(shè)計(jì)，就是用戶與產(chǎn)品之間如何交互。致力于在人與產(chǎn)品/服務(wù)之間建立一種有效的關(guān)系，把復(fù)雜的任務(wù)變簡單。讓用戶覺得設(shè)計(jì)直觀、可用、易用。

不同公司對上述職位的配置、分工粗細(xì)不同。分工細(xì)致有助于術(shù)業(yè)專攻，但是也增加了溝通成本。分工過粗的有助于統(tǒng)籌規(guī)劃，但容易跑偏。

而實(shí)際工作中，往往并沒有那么復(fù)雜。上述各種設(shè)計(jì)中，真正要輸出物，并且絕不可缺少的是產(chǎn)品原型設(shè)計(jì)（PRD）和UI設(shè)計(jì)稿。交互設(shè)計(jì)常常蘊(yùn)含在二者之中（也可以單獨(dú)存在）。

而UE、IA更多是一種全局指導(dǎo)思想，是上述設(shè)計(jì)的參考依據(jù)。

所以實(shí)際工作中，我們默認(rèn)設(shè)計(jì)師的工作范疇，就包含了UI、UE、ID、IA。我們粗略地用UI設(shè)計(jì)師代稱這個職位。

另一側(cè)，產(chǎn)品經(jīng)理的工作范疇，主要是負(fù)責(zé)用戶需求整理、規(guī)劃、功能篩選、商業(yè)模式、運(yùn)營模式探索、版本迭代時(shí)間規(guī)劃、敏捷開發(fā)功能點(diǎn)描述等。

如果是Web端的產(chǎn)品，交互相關(guān)的東西會涉及的比較少。由于產(chǎn)品經(jīng)理洞悉各個功能點(diǎn)，倘若對原型設(shè)計(jì)較為精通，那么既有利于開發(fā)人員了解功能點(diǎn)，又能減少與交互設(shè)計(jì)師溝通的時(shí)間，如此可以大大提升工作效率。

如果是移動端的產(chǎn)品，交互相關(guān)的東西會涉及的比較多。倘若產(chǎn)品經(jīng)理操刀交互細(xì)節(jié)，可能干擾交互設(shè)計(jì)師。所以這個時(shí)候可以考慮將交互的細(xì)節(jié)分給交互設(shè)計(jì)師來主導(dǎo)，自己只給必要的參考意見，全心全意規(guī)劃功能。

二、產(chǎn)品原型和UI設(shè)計(jì)的工序

產(chǎn)品經(jīng)理要做產(chǎn)品原型圖，然后UI設(shè)計(jì)師要畫UI圖，這兩者存在依從性，甚至出現(xiàn)并行。

即使工作很久的產(chǎn)品經(jīng)理，很多也沒有固定的套路究竟如何安排輸出順序，尤其是在交互、UI、測試、前端開發(fā)、后端開發(fā)混在一起，項(xiàng)目又緊張的時(shí)候。常常是“船到橋頭自然直”的心態(tài)。

首先，產(chǎn)品經(jīng)理一定要在最短的時(shí)間內(nèi)制作出人能看懂的原型，反復(fù)討論，反復(fù)修改，留給設(shè)計(jì)師足夠的時(shí)間。

其次，從工序安排上，核心要點(diǎn)都是把風(fēng)險(xiǎn)大的工作前置。目前主要兩種流程：

1. 產(chǎn)品原型——UI設(shè)計(jì)——研發(fā)

（1）具體內(nèi)容

原型評審（UI參加），UI出設(shè)計(jì)稿，UI評審，進(jìn)入開發(fā)。

（2）場景

這種模式適合產(chǎn)品需求比較明確、研發(fā)沒有風(fēng)險(xiǎn)、主要的不確定性在交互、視覺的情況。

2C 產(chǎn)品比較適合這種方式，適合職能型組織結(jié)構(gòu)。

2. 產(chǎn)品原型——研發(fā)——UI設(shè)計(jì)——研發(fā)

（1）具體內(nèi)容

原型評審（UI參加），進(jìn)入開發(fā)——UI出設(shè)計(jì)稿——UI評審——UI重構(gòu)（前端開發(fā)還原設(shè)計(jì)）

（2）場景

這種模式適合產(chǎn)品需求只有部分明確、研發(fā)存在較大風(fēng)險(xiǎn)的項(xiàng)目。

項(xiàng)目從 0 到 1 時(shí)比較適合這種方式，適合項(xiàng)目型組織結(jié)構(gòu)。

三、產(chǎn)品原型和UI設(shè)計(jì)的常見問題

1. 產(chǎn)品經(jīng)理不畫保真原型圖

如果不畫產(chǎn)品原型，交互搞不懂產(chǎn)品，UI搞不懂交互，技術(shù)搞不懂UI背后的邏輯，領(lǐng)導(dǎo)看不到產(chǎn)品經(jīng)理的思路。

但產(chǎn)品原型過于細(xì)致，就會本末倒置，浪費(fèi)時(shí)間！到頭來該想的沒想清楚，該理的沒理順，反倒埋線禍害。

產(chǎn)品經(jīng)理可以從設(shè)計(jì)這個事情上抽出精力，把80%時(shí)間花在調(diào)研和規(guī)劃上。整理思維腦圖，頭腦風(fēng)暴之后，優(yōu)化思維腦圖，然后出草圖即可。

盡可能將邊界說清楚，把設(shè)計(jì)權(quán)給到UI。

產(chǎn)品經(jīng)理做站在上帝身邊的人，為這個產(chǎn)品設(shè)定游戲運(yùn)轉(zhuǎn)規(guī)則，把用戶的需求鏈接起來，推動產(chǎn)品運(yùn)轉(zhuǎn)。

2. 如果原型變動，那么UI一定變動嗎？

該問題的衡量點(diǎn)是：

1. 溝通效率；
2. 原型改動范圍；
3. 部門工作流程。

衡量權(quán)重占比：從解決問題看，溝通效率和原型改動范圍最高。從長期看，部門工作流程很重要。

如果只是變更了邏輯關(guān)系，UI可能就不用動。比如說，這個頁面需要搜索功能嗎，搜索頁面需要?dú)v史紀(jì)錄，還是熱門搜索標(biāo)簽。

UI不是照搬的原型。UI設(shè)計(jì)師最忌諱的是UI的效果圖完全照搬原型圖，這樣原型圖和UI的區(qū)別只是黑白照和彩色照的區(qū)別。

UI設(shè)計(jì)師需要從視覺的角度考慮如何美觀有效的呈現(xiàn)頁面內(nèi)的功能信息和頁面間的邏輯。他們可能需要從對比，留白，視覺層級等方面提升頁面的美感和清晰。

3. UI設(shè)計(jì)的組件化

設(shè)計(jì)師在設(shè)計(jì)的時(shí)候應(yīng)該有UI組件化和規(guī)范化的思維。

有時(shí)候設(shè)計(jì)UI的時(shí)候，我們更改元素屬性很簡單，但是在開發(fā)那邊，可能要改很多的代碼。

而組件化，類似一種面向?qū)ο蟮乃季S，不需要設(shè)計(jì)很細(xì)碎的元素，只需要復(fù)用現(xiàn)有的或者做細(xì)小改動即可。

4. 產(chǎn)品經(jīng)理的需求應(yīng)篤定

產(chǎn)品原型和UI設(shè)計(jì)之間的矛盾在于時(shí)間緊張，比如一審原型后，UI是否開工，是否得返工。

所以一切問題的根源在于對需求的變更。而需求變更是團(tuán)隊(duì)所有角色擔(dān)憂的。

走到需求變更這一步，很明顯需求存在需求方案不穩(wěn)定性。

這種不穩(wěn)定可能來自業(yè)務(wù)不穩(wěn)定、甲方變更、調(diào)研不清晰等。但帶來的團(tuán)隊(duì)負(fù)擔(dān)都屬于產(chǎn)品經(jīng)理的責(zé)任。

頻繁變更之下，開發(fā)可以先按產(chǎn)品原型開發(fā)，最后UI在變更設(shè)計(jì)。甚至可以灰度發(fā)布之后再找時(shí)間做最終的設(shè)計(jì)還原，統(tǒng)一進(jìn)行更換皮膚。

#專欄作家#

唧唧歪歪PM，公眾號：唧唧歪歪PM（ID：jjyypm），人人都是產(chǎn)品經(jīng)理專欄作家，2019年年度作者?！逗蠖水a(chǎn)品經(jīng)理寶典》作者，藥學(xué)碩士轉(zhuǎn)行互聯(lián)網(wǎng)產(chǎn)品多年；熟悉跨境電商業(yè)務(wù)，醫(yī)藥領(lǐng)域；擅長大型后臺體系，社交APP。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。