設計開發前的產品原型圖

設計開發前的產品原型圖？

 

原型圖的繪製並不是爲畫圖而畫，我們在畫原型圖的同時相當於對產品進行初次設計，將產品經理提供的需求融合在界面中。原型圖的設計是一個對整體的把控和思考的過程，前期確定好產品原型，後期在設計和開發的時候能減少失誤。

一些新手設計師對整個產品開發的流程最初的認識：產品經理（原型圖）—設計師（設計稿）—開發（代碼編寫）。之前我在製作的時候經常性出現尷尬問題：產品經理不給原型圖，這樣直接導致做設計的時候我既需要考慮產品交互又需要考慮頁面實現效果，加長了設計週期，並且出現多次返工修改的現象。後期經理做了流程上的規範後，才找到開發的正確打開方式。

所以，接下來分享一下正確產品的思路，希望能幫助更多設計師更好的理解產品和更規範的思維方式。

 

一、原型圖

目前無論是產品經理和交互設計師繪製的原型圖包括兩類：低保真原型圖和高保真原型圖，兩者的具體差別請自行參考度娘。今天主要說一下低保真原型圖，就目前製作情況來看，低保真原型操作快速方便，也能達到用戶對產品的期望和要求。

二、如何做？

下面我以前不久做好的錢管家APP爲例，原型圖製作工具我習慣選擇Axure PR，如下圖：

爲了保證整體視覺感受，將所有需求按照模塊進行了分類，並在主頁下的子文件中命名單獨的模塊，鼠標選中子頁面，單擊文字即可重新命名。如下圖：

依次下去，將你所做的項目模塊歸納整理後，雙擊進入到對應的子頁面進行編輯。然後運用組件庫的元件進行繪製，博主的組件庫分爲兩類：一是在線下載實的用元件庫，一是平時作圖積累下來自己定義的元件。這樣在有足夠的元件情況下，能做到快速開發的效果，節省開發時間。

三、架構規範（重點）

1.保證每個框架位置的準確性。

2.做到有評有據。

3.符合交互運作規律。

4.根據設計規範來推導原型的規範，都是相同的道理。

做設計的都知道，從基本的點線面出發，每個元素都要考慮整體性，所以這裏畫的原型圖，不是簡單的根據產品經理提供的需求文檔隨便畫畫，不考慮交互和產品的特性，便會出現下面的如下圖誤區：

單看挑不出毛病，但是融入到後臺數據後，發現他們不能在忘記密碼頁面以原手機號接收驗證碼。所以又做出了調整，下圖是效果圖：

所以有時候你的原型圖不僅要符合產品、設計的理念，同時又要滿足前端後臺的可實施性。由此可見，原型圖的繪製，是一個對整體把控的預演，後期雖然也能在設計稿中優化修改，但前期如果定好了基調，後期無論是設計還是開發，都會省事不少。

而且做這類原型圖最大的好處（於我而言）就是，再也不用擔心產品經理時不時的需求更改，畢竟在原型圖裏更改比在設計稿調整簡單的多。

博主這次的原型圖先暫時以模塊來劃分，目前還沒以流程箭頭串聯起來，在我們還沒有做交互跳轉的時候，流程線無疑是最佳選擇，以下是加了流程線的效果圖。

本次教程就到這了，下期繼續分享乾貨！