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

産品原型和UI設計在時間上存在交叉，一旦變更又存在聯動變更，導緻很忙很亂。

如何通過時間—質量—資源“三角”為原則，協調二者的關系?

一、産品原型和UI設計的邊界

産品設計方面，UI、UE、UX、IA、ID等概念傻傻分不清楚，并且國内外或不同公司的定義不同。

一般而言：

UI：User Interface 用戶界面。主要關注産品視覺呈現的效果。就是界面元素是什麼，形狀、顔色、尺寸，放在哪裡。

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

IA：信息架構（IA），就是App的整體結構。即将内容分開并歸類。包括設計網站地圖、層次結構、分類、導航和元數據。

ID (Interaction Design) 交互設計，就是用戶與産品之間如何交互。緻力于在人與産品/服務之間建立一種有效的關系，把複雜的任務變簡單。讓用戶覺得設計直觀、可用、易用。

不同公司對上述職位的配置、分工粗細不同。分工細緻有助于術業專攻，但是也增加了溝通成本。分工過粗的有助于統籌規劃，但容易跑偏。

而實際工作中，往往并沒有那麼複雜。上述各種設計中，真正要輸出物，并且絕不可缺少的是産品原型設計（PRD）和UI設計稿。交互設計常常蘊含在二者之中（也可以單獨存在）。

而UE、IA更多是一種全局指導思想，是上述設計的參考依據。

所以實際工作中，我們默認設計師的工作範疇，就包含了UI、UE、ID、IA。我們粗略地用UI設計師代稱這個職位。

另一側，産品經理的工作範疇，主要是負責用戶需求整理、規劃、功能篩選、商業模式、運營模式探索、版本叠代時間規劃、敏捷開發功能點描述等。

如果是Web端的産品，交互相關的東西會涉及的比較少。由于産品經理洞悉各個功能點，倘若對原型設計較為精通，那麼既有利于開發人員了解功能點，又能減少與交互設計師溝通的時間，如此可以大大提升工作效率。

如果是移動端的産品，交互相關的東西會涉及的比較多。倘若産品經理操刀交互細節，可能幹擾交互設計師。所以這個時候可以考慮将交互的細節分給交互設計師來主導，自己隻給必要的參考意見，全心全意規劃功能。

二、産品原型和UI設計的工序

産品經理要做産品原型圖，然後UI設計師要畫UI圖，這兩者存在依從性，甚至出現并行。

即使工作很久的産品經理，很多也沒有固定的套路究竟如何安排輸出順序，尤其是在交互、UI、測試、前端開發、後端開發混在一起，項目又緊張的時候。常常是“船到橋頭自然直”的心态。

首先，産品經理一定要在最短的時間内制作出人能看懂的原型，反複讨論，反複修改，留給設計師足夠的時間。

其次，從工序安排上，核心要點都是把風險大的工作前置。目前主要兩種流程：

1. 産品原型——UI設計——研發

（1）具體内容

原型評審（UI參加），UI出設計稿，UI評審，進入開發。

（2）場景

這種模式适合産品需求比較明确、研發沒有風險、主要的不确定性在交互、視覺的情況。

2C 産品比較适合這種方式，适合職能型組織結構。

2. 産品原型——研發——UI設計——研發

（1）具體内容

原型評審（UI參加），進入開發——UI出設計稿——UI評審——UI重構（前端開發還原設計）

（2）場景

這種模式适合産品需求隻有部分明确、研發存在較大風險的項目。

項目從 0 到 1 時比較适合這種方式，适合項目型組織結構。

三、産品原型和UI設計的常見問題

1. 産品經理不畫保真原型圖

如果不畫産品原型，交互搞不懂産品，UI搞不懂交互，技術搞不懂UI背後的邏輯，領導看不到産品經理的思路。

但産品原型過于細緻，就會本末倒置，浪費時間！到頭來該想的沒想清楚，該理的沒理順，反倒埋線禍害。

産品經理可以從設計這個事情上抽出精力，把80%時間花在調研和規劃上。整理思維腦圖，頭腦風暴之後，優化思維腦圖，然後出草圖即可。

盡可能将邊界說清楚，把設計權給到UI。

産品經理做站在上帝身邊的人，為這個産品設定遊戲運轉規則，把用戶的需求鍊接起來，推動産品運轉。

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

該問題的衡量點是：

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

如果隻是變更了邏輯關系，UI可能就不用動。比如說，這個頁面需要搜索功能嗎，搜索頁面需要曆史紀錄，還是熱門搜索标簽。

UI不是照搬的原型。UI設計師最忌諱的是UI的效果圖完全照搬原型圖，這樣原型圖和UI的區别隻是黑白照和彩色照的區别。

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

3. UI設計的組件化

設計師在設計的時候應該有UI組件化和規範化的思維。

有時候設計UI的時候，我們更改元素屬性很簡單，但是在開發那邊，可能要改很多的代碼。

而組件化，類似一種面向對象的思維，不需要設計很細碎的元素，隻需要複用現有的或者做細小改動即可。

4. 産品經理的需求應笃定

産品原型和UI設計之間的矛盾在于時間緊張，比如一審原型後，UI是否開工，是否得返工。

所以一切問題的根源在于對需求的變更。而需求變更是團隊所有角色擔憂的。

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

這種不穩定可能來自業務不穩定、甲方變更、調研不清晰等。但帶來的團隊負擔都屬于産品經理的責任。

頻繁變更之下，開發可以先按産品原型開發，最後UI在變更設計。甚至可以灰度發布之後再找時間做最終的設計還原，統一進行更換皮膚。

#專欄作家#

唧唧歪歪PM，公衆号：唧唧歪歪PM（ID：jjyypm），人人都是産品經理專欄作家，2019年年度作者。《後端産品經理寶典》作者，藥學碩士轉行互聯網産品多年；熟悉跨境電商業務，醫藥領域；擅長大型後台體系，社交APP。

本文原創發布于人人都是産品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部