設計案例排版（以個人書架業務為例）

2023-07-23 04:20:35 3

原型圖到底該怎麼畫？這是大多產品經理入門時遇到的問題。有人會把原型圖畫成一幅精美的設計圖；也有人在紙上手繪線框圖；甚至有人不畫圖直接就進入開發了。本文作者從自身工作經驗出發，結合實際業務對如何設計原型圖進行了分析。
一、業務說明
上一篇文章我結合業務總結了頁面流程圖的畫法，今天依舊結合個人書架的業務來說說原型圖的設計方法，也算是一個工作流程的梳理吧。
首先了解下需求：家裡孩子的書太多，該怎麼歸納和整理?
1. 需求分析
目標用戶定位：學齡前和中小學生的家長（包括中小學有自主能力的學生）
使用場景分析：
場景1：家裡有個學齡前的小寶寶，家長給賣了很多繪本，這些繪本有些是講親情的有些是培養情商的，家長想建立個分類進行歸納，在親子閱讀的過程中創建閱讀主題環境
場景2：上小學三年級的學生家裡有很多課外書，讀過的沒讀過的放在一起，需要進行歸類學習，同時讀過的書也需要隨時記錄讀書筆記加強沉澱
2. 痛點分析
家長不知道孩子具體有什麼書，哪些讀過哪些沒讀；孩子讀過的書積累的知識和想法缺少輸出的環境
頁面流程圖說明:
這個頁面流程圖說明了需求的業務邏輯，用戶需要通過App掃描圖書背後條形碼識別圖書信息，根據圖書信息判斷是否已經加入過書架然後跳轉到相對應的頁面並展示相關元素，這個邏輯在上一篇頁面流程圖的文章裡已經說過了這裡就不再重複了。
那業務邏輯已經清晰了，下一步就該進入原型圖的設計了，在這之前，先來了解一下原型圖的概念
二、原型圖設計
原型圖就是在產品成型之前的一個簡單框架，將頁面的重要元素和功能模塊簡單豪邁的進行布局和排版，加入點擊交互事件形成的產品最初始的設計圖。說到這裡其實就可以將原型圖分為靜態原型和交互原型。
1. 靜態原型
以頁面流程圖中–1.書架首頁—為例，該頁面的主要模塊是展示已加入的圖書列表和掃一掃按鈕，那麼在靜態頁面中就要展示這兩個元素。先看已加入的圖書列表，在頁面流程圖的設計中已經思考了頁面應該放什麼，這個模塊就該考慮用戶想在這個模塊中看到什麼，考慮的是視覺效果和頁面體驗的問題。
比如圖書列表首先應該包含圖書列表的名稱，是否需要背景圖，是否應該顯示該列表中的圖書數量等等，需要掃碼這些都是靜態原型中產品經理應該思考和與設計UI溝通的問題。
2. 交互原型
「互動設計(英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。互動設計努力去創造和建立的是人與產品及服務之間有意義的關係。交互系統設計的目標可以從」可用性」和」用戶體驗」兩個層面上進行分析，關注以人為本的用戶需求。」
關於對互動設計的解釋我們看到了「可用性」和「用戶體驗」，這兩點就是交互的意義。「可用性」是指需求邏輯和功能邏輯的跳轉對於用戶來說是有效的，也就是說符合用戶使用需求的。「用戶體驗」是指用戶使用的實際感受。這兩者是相輔相成的，當然可用性是一個系統的基礎條件，只有滿足可用性的基礎上才能去談用戶體驗，所以產品在設計原型的時候一定要分清主次，先把握需求的完整性再去關注用戶體驗。
現在來看加上交互的原型，當點擊左上角「掃一掃」時跳轉到打開相機的頁面，而點擊列表時進入列表詳情頁面，這就是原型的交互。還包括點擊時的提示、彈出、展開等等。
三、原型的作用
1. 驗證用戶需求和反饋，向相關方展示需求的視覺效果
當客戶表述需求時往往說的只是一個個分散的點，產品經理要做的就是將這一個個點具像成可視化的閉環。那在這個過程中就會存在比如客戶表達的不全面或者產品經理沒有理解客戶的真實意圖（這裡就突出需求挖掘和需求分析的重要，不對需求層面進行說明了），所以就需要通過原型圖向用戶展示需求的視覺效果，讓用戶直觀的看到最終呈現和操作流程，就會更加有效的驗證用戶需求，得到直接和具體的反饋
2. 幫助更好的與團隊成員溝通
原型圖對用戶是一個展示作用，對於執行團隊更是產品經理闡釋和說明需求的有利工具。讓團隊明白要做什麼，藉助原型圖對產品功能進行一一說明。產品經理的職責就是幫助團隊做正確的事，明確目標才能根據各自的崗位職責進行模塊的開發。
四、原型的要求
1. 說明業務邏輯和頁面元素
原型最基本的要求就是要說明業務邏輯和頁面元素，使閱讀對象明白這到底是一個什麼產品，通過靜態原型和交互原型完整的展示出用戶需求。原型是業務需求的階段的最後一步，也是至關重要的一步。
2. 原型不是設計圖
原型同樣是進入開發階段的第一步，將功能邏輯和頁面需求完整的展示出來。但原型圖並不是設計圖，不需要太過完美追求高保真，清楚明白即可。原型好壞的判斷依據是產品經理思維邏輯和需求理解的產出結果，而不是畫原型的能力，我一直認為專業的事情應該讓專業的人做，如果對於頁面設計上有想法可以和UI進行溝通，不必過於追求高保真而因此浪費時間和精力。
五、原型的步驟
1. 手繪線框圖
整理好頁面流程圖後，基本的大框就出來了，這時候可以趁著思路用筆在紙上簡單用線條勾勒原型的樣子，幫助進一步理清思路。不知道別的產品經理會不會這樣，我一般是習慣現在紙上畫畫，通過手繪能更容易打開思維，進行更深一步的思考。
2. 使用工具整理完整原型圖
使用常見的原型圖工具即可，比如Axure、墨刀等。將畫在紙上的線條通過原型工具中的按鈕、圖標icon等元素展示出來，這時候會更加清楚想要什麼效果。關於原型軟體的使用以快速高效為主，軟體只是畫原型的工具，會使用多個軟體也只是多一項硬技能，對於工具的使用個人認為能說明意圖即可，產品經理更多的還是應該提升自身軟技能比如思維、溝通等等。
原型是考量產品經理能力的重要標準之一，但我們要做的並不只是「畫」好原型圖，而是要「做」好原型圖，讓原型圖真正發揮作用。
本文由 @花卷er 原創發布於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。
,