App項目實戰之路(三):原型篇

時間 2019-11-17

標籤 app 項目實戰之路原型简体版

原文原文鏈接

原創文章，轉載請註明：轉載自Keegan小鋼前端

並標明原文連接：http://keeganlee.me/post/practice/20160814數據庫

微信訂閱號：keeganlee_me後端

寫於2016-08-14微信

原本，我是沒打算寫原型篇的，但考慮到關注個人人中也有部分產品狗，更重要的是，我一直認爲，不懂產品設計的程序猿不是優秀的產品經理。並且，應該也有很多程序猿想往產品經理的方向發展的。因此，最後決定獻醜了。post

原型設計工具

作原型設計，首先，固然是要講講工具。作原型設計的工具備不少，功能最強大的應該就屬 Axure PR 了，不過上手不容易啊。對於想快速開發一個原型但又沒那麼多時間去學習設計工具的我來講，只能說，Axure不適合我。好在，上手容易的設計工具仍是有的。學習

POP - Prototyping on Paper

POP 是一款App，操做很是簡單，先用手機拍下草圖原型，而後開始編輯原型裏的哪一個區域(好比按鈕)連接到哪一個頁面，添加跳轉連接，以後就變成可演示的交互原型了。

POP 並不提供設計原型的任何UI組件，只提供了能在圖片上設置任意點擊區域並添加連接到其餘頁面(其實就是另外一張圖片)。對於從草圖開始設計原型的人來講，這款App真是再適合不過了。

固然，侷限性也很明顯。首先，原型圖只能經過其餘方式完成。其次，交互很是有限，只能實現頁面間的跳轉，其餘交互好比同一頁面內的交互就別想了。最後，它只適用於App原型。

墨刀

墨刀是一款在線的原型設計工具，上手也很簡單，網站也提供了新手教程。墨刀的功能比 POP 就強大多了，除了支持手機App原型設計，也支持平板和網頁。本項目的原型就是用墨刀設計的。

墨刀吸引個人第一個優勢就是提供了不少方便的組件庫。有一些單獨的組件如文字、按鈕、圖片、圖標、輸入框、單選框、多選框、開關、標題欄、搜索欄、標籤等等，一拖即用，很方便。尤爲是圖標，墨刀提供了不少經常使用的圖標，很是方便。除了單獨的組件，墨刀還提供了母版和組合。默認母版有輪播圖和下拉菜單，默認組合有彈出框、列表項、Action Sheet、日曆等，都是一拖即用的。不夠用的話還能夠自定義新的母版和組合。

墨刀吸引個人第二個優勢就是對組件的屬性設置也比較全。就拿按鈕來講吧，能夠設置背景色、前景色、邊框、陰影、透明度、位置、寬高、旋轉角度、圓角半徑、圓形或正方形，還能夠設置按鈕的文字屬性，包括文字的背景色、文本顏色、字體大小、字體樣式、陰影、對齊方式，最後，也能夠設置按鈕的圖標，不過圖標只能保持在文字左邊，沒法調整位置。有了這些屬性，就能夠很方便地將組件設計爲本身滿意的樣子了，組件也能夠作得差很少接近最終的UI了，便是說能夠作到高保真原型。

不過，這裏要提一下，我並不建議產品經理們作原型時作到高保真。除了個別狀況，好比須要給高層管理或客戶演示用的原型；又或者是創業團隊裏缺少有經驗的UI設計師，甚至尚未UI設計師；又或者是像我同樣的我的開發者，什麼都要本身來的。通常狀況下，只要完成低保真或中保真原型便可。

墨刀吸引個人第三個優勢就是對交互的支持很是好。墨刀除了支持頁面間的交互，還支持頁面內的交互。並且，頁面內的交互不是經過複製頁面來實現，而是經過爲同個頁面添加多個不一樣狀態，實現狀態的切換。例如，點擊主頁右下角的加號按鈕，會在加號按鈕上方滑動出兩個子按鈕，而且加號按鈕本身會旋轉變成關閉的叉號；再點擊，兩個子按鈕會滑動收回下方，叉號再旋轉變回加號。

不過，墨刀的免費版不支持導出和多人協做，圖片儲存不能超過100M。不過好在支持分享。其餘人根據分享的二維碼或分享連接就能夠查看到可運行的原型了。

Mockplus

Mockplus 也是一款不錯的快速原型設計工具，和墨刀同樣，也提供了不少組件庫和圖標庫，甚至比墨刀還多。上手也一樣簡單，也是一拖即用。

不過，Mockplus 對於一些經常使用的組件的封裝程度卻不如墨刀，例如標題欄不能直接設置標題、標籤欄不能直接設置圖片、也找不到設置圓形圖片的方法、文字按鈕也不能支持添加圖標等。

Mockplus 在交互方面也是不足，頁面內的交互設計只能複製頁面，沒墨刀方便。其實，Mockplus 也有狀態的概念，不過不是頁面狀態，而是組件狀態，但目前我只在按鈕組件有看到狀態的設置屬性，能夠設置正常、選中、焦點三種狀態。

其餘工具

除了 Axure PR 和上面介紹的三款，還有不少其餘的設計工具，好比 Balsamiq Mockups，之前的同事用過，我很喜歡它的手繪風格。不過，Mockups就不是免費的了，但能夠試用。固然，網上也有破解版。

也有人提出使用 Sketch 作原型設計。無能否認，Sketch 也是能夠設計原型的，PS、AI 等工具也一樣能夠。至於交互，用標註的方式就行了。但這些工具，確切地說，更適合用來作 UI 設計，而不是原型設計。作原型設計，要求的就是可以快速看到效果，不僅是界面效果，還有交互效果。用UI設計工具來作，一是很難達到快速的要求，二是交互效果等於沒有。

設計原型以前

在開始設計原型以前，我還有一些話須要嘮叨一下。

首先，要肯定好原型的受衆，是給UI設計師看的，仍是給開發人員看的，抑或是給老闆或客戶看的。不一樣受衆決定了原型設計須要作到什麼程度。通常來講，若是受衆是UI設計師或開發人員，那最多隻要中保真原型便可；若是受衆是老闆或客戶，那可能就須要提供更多視覺細節的高保真原型了。

其次，要梳理好功能需求。梳理功能需求時，要以核心功能爲主，儘可能作減法，而不是作加法。

就舉個人項目的栗子，個人App中有一個須要給程序猿設置技術標籤的需求。如今看看加法怎麼作。首先，技術標籤能夠分爲三大類：移動端、前端、後端。接着，移動端的技術標籤有Android、iOS、Windows、React Native，Android根據語言還能夠再分出Java和Kotlin，iOS則能夠再分出Objective-C和Swift。前端標籤能夠有HTML、CSS、JavaScript、React、AngularJS、Vue等等。後端標籤則能夠添加更多了，數據庫方面的MySQL、MongoDB、Redis等，語言方面的Java、PHP、Golang、Python、Node.js等，其餘的像Nginx、Docker、Spark、Spring等等。若是要把全部技術標籤都包含進來，真的太多太多了。那麼，再看看減法怎麼作。標籤只要三個就夠了：移動端、前端、後端。爲何呢？由於初期用戶量不會不少，產生的內容也不會太多，不必分那麼細那麼多標籤，三大類標籤就已經足夠知足需求。

再舉多一個栗子，咱們公司目前正準備作一款新的金融產品，時間比較緊，核心功能只有一個，那就是要能實現交易。產品經理給咱們演示原型時，包含了一些核心功能以外的輔助性功能，好比資訊、統計用戶看漲看跌的機率、風險提醒、修改用戶頭像暱稱等，結果全部這些不影響直接交易的功能所有砍掉了。另外，有一些界面流程也進行了簡化。

對需求作減法，就是要思考如何簡單快速地知足目標。將核心需求看作一條鏈子，那麼，要判斷某個功能點是否是必需的，只要思考下若是把這個功能點去掉，鏈子會不會斷就知道了。

設計原型

設計原型時須要謹記一點：我是在設計原型，不是設計UI。設計原型的過程，也是一個梳理產品思路的過程，也是一個迭代的過程，從總體到局部逐漸細化的過程。總體上主要就是產品的信息架構，如功能結構、導航結構，局部上主要就是頁面佈局和交互，如內容編排、頁面切換、按鈕點擊等。

我設計原型時，和設計原型以前的需求分析同樣，也喜歡作減法。儘可能減小頁面層級、頁面數量、頁面交互，儘可能使得信息扁平化。例如，用戶登陸和註冊，我在一個頁面搞定。

直接以本人的項目爲例，簡單講講我是怎麼進行原型設計的。

首先，對功能需求進行分類。根據我前一篇文章肯定的功能需求，我整理出瞭如下的信息結構：

登陸註冊
- 手機號註冊
- 手機號登陸
- Github登陸
發佈內容
- 發佈問題
- 發佈分享
展現內容
- 關注之猿的內容
- 同棧之猿的內容
  - 移動端
  - 前端
  - 後端
用戶中心
- 我的信息
- 我發佈的內容
- 我關注的內容
- 我關注的人
- 關注個人人
- 個人消息

接着，肯定有哪些頁面。登陸註冊須要爲一頁，首頁以展現內容爲主，同時須要添加發布內容和用戶中心的兩個入口。關注之猿和幾個同棧之猿，能夠設爲幾個Tab。用戶中心的每個子項均可以各成一頁。發佈問題和發佈分享也能夠各爲一頁。

而後，將內容進行佈局排版。排版時，也不須要想太多，只要把同一層級的內容用最簡單的方式放一塊兒就行了。記住，不要去想怎樣佈局纔好看，那是UI設計時才須要考慮的。最後，我設計的首頁以下圖：

最後，就是對各個子頁面的設計了，也使用和首頁相同的設計流程。頁面太多，就再也不貼出來了。

在整個原型設計的過程當中，還須要不斷對一些細節進行調整和補充。若是你的原型設計完以後須要整理成需求文檔提交給開發人員看的，那麼，設計頁面時，建議同時也能夠思考下一些數據邊界和交互細節的問題，並批註在頁面旁邊，這樣，後續整理需求文檔時就會方便不少。可能有些人習慣在整理需求文檔時纔來思考這些問題，但這樣的話很容易有遺漏，甚至可能根本不記得這個事。因此，設計時先思考，後面整理文檔時再檢查有沒有遺漏，這樣，設計出來的產品就會嚴謹不少。

下圖就是個人登陸頁面以及旁邊的批註：