軟件工程_04 原型設計

本文轉載自查看原文 2022-04-15 13:43 1216

1. 什么是原型設計
2. 幾款優秀的原型設計工具推薦
3. 基於DevBefore的“高校二手交易平台”原型設計實戰（快速構建）

1. 什么是原型設計

在UI設計中，原型設計並非是自己可有可無的工作環節。很多UI設計師存在一個誤區，認為原型設計是他人的工作，而自己是負責實現的。事實上，這種想法不利於自己的成長和職業發展。今天設計達人和大家分享原型設計的概念和意義，以及如何做出好的原型設計，希望大家對原型設計有更為全面的認識。

一個好產品，離不開好的原型設計。大到產品的整體架構，小到一個功能點的設計，都起源於原型設計。UI設計師的未來職業發展方向之一是全鏈路設計師或者產品設計師，而優秀的原型設計能力就是必備技能之一。
在這里插入圖片描述

1.1 基礎認知

1.1.1 什么是原型

原型是對一個產品的可視化呈現，主要傳達一個產品的信息架構、內容、功能和交互方式。

它是產品功能和內容的示意圖，一般包括線框圖以及交互說明。原型是產品設計初期供整個團隊參考、討論、評估的主要依據。之前講過的需求文檔也包含對功能和內容的說明，但原型並不是簡單地把需求文檔圖形化。

如果在需求分析的前期，設計師能夠和產品經理等人員一同進行產品定位、競品分析和用戶研究等工作，再根據研究結果、項目資源等情況來篩選和分析需求，加上自己的思考和設計方法，把需求轉化為設計方案，再細化成線框圖和交互說明，最后形成一份能讓雙方達成共識的原型文檔。那么設計師接下來的工作就會比較順利地進行下去，並且在團隊中的話語權也會逐步提升。

1.1.2 為什么要畫原型

原型具有快速創建、聚焦易用性、修改成本低等不可取代的優勢。

快速創建是指設計師不需要考慮太多細節和視覺表現手法，可以快速出圖；聚焦易用性是指將產品設計的重點放到功能的易用性上，不會被視覺設計所干擾；修改成本低，是指線框圖比視覺設計稿更容易、更快速地修改，耗時短，效率高。

對於設計師來說，一個好的設計想法，如果沒有清晰、標准的表達方式，其效果會大打折扣。由於原型可以被快速創建、快速修改的特性，使得產品設計團隊能夠把多種設計方案種做直觀的對比試驗，可以快速地進行可用性測試並直接地獲得反饋，輕松修改或者放棄某些設計方案。

對於項目組來說，原型是項目開發的標准和依據，通過設計原型，項目組人員能夠更高地理解產品邏輯，將需求具體化，從而可以量化地評估視覺設計與開發的排期。在這里要注意的是，原型的使用者不僅僅是視覺設計師和開發工程師，還有測試人員，可能有市場人員、甚至法務人員等各種不同職能的人員，為了讓這么多種不同的角色都能理解你的設計方案，原型務必要表達得直觀、清楚、規范。
在這里插入圖片描述

1.2 進階理念

1.2.1 從最簡單的開始

很多設計師，當接到一個龐大需求的時候，總是沒有思路，以至於遲遲不想打開軟件。由於需求太多太復雜，給了設計師太多的壓力。其實，萬丈高樓平地起，任何復雜的產品，都是從基本功能開始的。在這里，有一些很簡單的步驟，可以讓你快速起步：

頁面上要放置什么功能或內容；
排列這些功能的優先級；
如何表現這些功能的優先級；
依次設計每個部分的具體內容，逐漸增加細節。

1.2.2 不要過分追求精致

設計精致的原型圖固然很好，我們都喜歡精細打磨的設計。但是在設計初期，最好不要陷入作圖的細節里，人的注意力是有限的，我們應該重點關注功能的位置、類別、順序、層次，頁面的邏輯關系。有很多優秀的設計師是使用紙和筆快速開始的，在初始的階段，最重要的是想法，而線框圖的精致程度，不應當成為這一階段所追求的目標。

1.2.3 目的是討論和優化

幾年之前，我參加了阿里某產品設計師的一次講座，他的觀點之一就是：在產品設計的前期不要怕改稿，原型圖就是用來修改的。

我相信大部分設計師，都不喜歡改稿，但是我們制作原型的目的就是以此為依據進行討論、修改。否則到了視覺設計、甚至到開發階段再修改，成本會比修改原型大很多。其實設計原型的階段，有一大半時間是要花在討論、評審和優化上，這也是原型設計的意義所在。

1.2.4 人人都要畫原型圖

一般的產品部門有產品經理、交互設計師、UI設計師這三個角色。當然很多公司沒有專職的交互設計，只有產品經理和UI設計師，UI設計師同時承擔着交互設計的工作。

產品經理進行需求確認，交互設計師其實在做一種需求翻譯的工作，將產品的商業需求，進行具象化，並加入一些用戶視角，設計線出框圖。最后由UI設計師產出高保真視覺圖。這三種角色，在實際工作中，都應該通過畫原型圖，來優化自己的設計。但是，他們畫原型圖的重點是不同的。

作為產品經理，畫原型圖有時是不可以避免的，產品經理需要通過畫原型來細化思路，理清產品的功能點、內容塊和業務流程，幫助自己寫好需求文檔，以便更好傳達自己的需求給其他人員。還有一些概念性項目，需要根據原型來讓老板認可並做決定。

而作為交互設計師，在畫原型圖是需要重點關注一下幾點：

目標和流程——根據需求和目標，分析用戶的操作流程，並且盡可能地簡化操作流程；
布局和結構——內容或功能分為幾類，應該采用哪種布局，使其更加易用；
位置和順序——各個版塊內容應該按照怎樣的順序進行排列，來引導用戶的行為；
層次和輕重——各版塊、內容的層次該怎樣區分，優先級應該如何排序。

到了視覺階段，UI設計師不管接到多么精致的線框圖原型，也需要重新進行思考，不要當原型上色師。我們需要結合目標用戶特征、需求以及當下設計趨勢，進行產品的風格定位。有些時候要改變原型的位置和結構，以達到更好的效果。

要注意的是在修改之前，要同產品經理和交互設計師保持溝通，通過一些自己畫的視覺原型圖，向他們表達一些視覺設計上的想法，畢竟每個角色都會有自己的知識盲區。當你的修改意見取得了其他人的認可，就可以根據這一版本的原型，進入視覺設計的階段。
在這里插入圖片描述

1.3 設計實踐

1.3.1 原型設計的步驟

① 建立控件庫

控件是指界面中所有的最小元件。

例如：按鈕、圖標、文本框、單選框、復選框、開關、圖片占位符等控件。

② 建立組件庫

組件是一種功能模塊，它能夠被重復使用，從而提升設計效率，並且可以保持界面的一致性和規范性。

例如：圖文列表、圖文卡片、表格、篩選條件、文件上傳、系統反饋、彈出框等組件。

③ 繪制流程圖

流程圖表達的是一個用戶的操作過程，通常我們基於普通用戶，如果時間和資源允許，也可以繪制特殊用戶的操作流程圖。流程圖的作用在於梳理和規范流程，在繪制流程圖時，我們要注意邏輯的清晰和完整，每一個流程分支都代表着用戶的一個決策節點，需要我們進行深入地思考和設計。

④ 設計關鍵頁面

例如：首頁、詳情頁、個人中心、設置等頁面

⑤ 設計輔助頁面

例如：注冊登陸頁、找回密碼等頁面

⑥ 設計關鍵功能故事板

故事板，顧名思義就是講故事的板子。故事板可以幫助我們將用戶角色，使用場景和使用流程串聯起來，將抽象的體驗過程具象成圖文結合的形式，使團隊成員可以通過某個角色來觀察我們關鍵功能的使用場景，並觀察用戶的操作的流程，使產品設計師能夠對用戶體驗進行更直觀和深入的挖掘和思考。

故事板三要素：角色、場景、情節。角色要說明包含幾類用戶群體；場景要說明包括幾種使用場景；情節要說明用戶目標、觸發事件、行為流程和行為結果。

⑦ 原型注釋與交互說明

原型設計文檔必須包含清晰的注釋和交互說明。控件的不同狀態、鏈接的指向、頁面的跳轉、操作的結果、報錯信息及其展示方式等交互說明內容，都需要在原型注釋中用文字准確的描述出來。

1.3.2 原型設計的注意事項

我們在做原型設計時，要把原型的閱讀者想象成對產品和設計一無所知的人，該怎樣圖文並茂的展示產品的邏輯和功能，才能夠讓其通過原型來理解這個產品，需要注意以下幾點：

使用灰度線框圖：顏色和視覺效果會影響大家對易用性的判斷；
清晰地展示流程：順暢的操作流程是產品易用性最基本的標准。
關鍵功能要有故事板：角色、場景、情節，使團隊人員更快、更好地理解產品。
要有注釋和說明：圖文並茂更能准確傳達設計方案與想法。
一致性和規范性：優秀原型的元素、組件、頁面甚至是文案用語的調性都規范一致的。

以上內容來自zcool（站酷）博主UX_Milk的文章
轉載來源：https://www.shejidaren.com/prototype-design-in-ui.html

2. 幾款優秀的原型設計工具推薦

2.1 Axure RP

Axure RP是一款專業設計師不容錯過的原型設計工具，設計師可以用它快速創建應用軟件或Web線框圖、流程圖、原型和規格說明文檔。作為一款專業的設計工具，它能快速、高效的創建原型，但對於新手來說，需要投入較高的學習成本。個人認為，這款軟件強大之處在於事件交互上面。至於界面UI效果相對后面介紹的相對較差一些，需要個人一點一點調試。雖然上手難度比較大，但是作為老牌的原型設計工具，個人是最值得推薦的一款工具。

2.2 碼前

碼前，DevBefore，https://www.devbefore.com。一個人輕松搞定「需求+產品+UI」所有設計工作；只需簡單勾選、無需專業技能，零基礎使用。

碼前DevBefore是是2021年12月份款發布的UI設計平台，到現在才不到半年，這款年輕的原型設計工具有什么特殊呢？

如果說Axure是Photoshop的話，那么碼前就是美圖秀秀，它們的區別就好像專業的和業余的。Axure優點是專業，但它的缺點也是專業性，因為Axure適合專業的人群使用它，對於小白來說上手難度太大，而碼前是一個提供了簡潔的風格，有豐富的模板，極簡的操作性。

在工程化的角度，碼前更全面一些，就如它的名字 “准備好編碼前的一切”
一站式在線設計平台——碼前可以一站式完成編碼前所有設計工作，需求梳理+原型設計+ui設計一個人統統搞定。而Axure一般都是搭配Sketch的，這對windows系統的用戶很不友好。

碼前免費使用，是互聯網產品人提升工作效率的神器，海量需求模板庫覆蓋各個行業，一鍵生成產品需求導圖，可根據需求在線編輯；需求導圖一鍵生成產品原型，不用為設計原型圖而苦惱；在線ui設計，支持Sketch導入，一鍵切圖和標注。

2.3 墨刀

墨刀（https://modao.cc/brand）致力於簡化產品制作和設計流程，采用簡便的拖拽連線操作，作為一款在線原型設計軟件，墨刀支持雲端保存，實時預覽，一鍵分享，及多人協作功能，讓產品團隊快速高效地完成產品原型和交互設計。

墨刀與Axure一樣是使用人群特別龐大的工具，操作也簡單，還有大量的素材庫和模板庫，就是價格優點貴，我個人感覺它比Axure操作性更強，上手也比較容易。

2.4 Mockplus

在這里插入圖片描述

Mockplus（https://user.mockplus.cn/choose-product）也是一個UI設計的一站式平台，有專業版，有協作版，還有UI設計。它的基礎版免費使用，操作簡單，.上手快，交互簡單(只需拖曳就可以)，功能多樣，組件資源豐富，預覽方式和導出類型多樣；有原型演示，可以幫助前端設計師、后端程序員更好地理解你的原型產品。mockplus有組件庫和圖標庫，界面設計較為方便。我個人感覺它比墨刀更容易上手一些，設計原型更容易一些。
當然它也有一些缺陷，比如不支持鼠標懸停，手機預覽不是很清楚，日歷表組件是靜態的，表格功能還需要完善。

總結

工具	類型	功能	素材與模板庫	協作與分享	生產效率	價格	上手難度
Axure	軟件	強大	無	支持	低	適中	專業級
墨刀	網頁	較強	豐富	支持	較高	有免費版和終身版	容易
Mockplus	一站式	較強	豐富	支持	較高	免費	容易
碼前	一站式	較強	較少	支持	高	僅個人版免費版	小白級

看個這個總結，對於非專業的我來說，還是Mockplus和DevBefore對我比較友好，建議專業的人群還是Axure和墨刀更合適，當然也可以都學學。

3. 基於DevBefore的“高校二手交易平台”原型設計實戰（快速構建）

“高校二手交易平台”的原型設計

3.1 快速入門碼前

碼前的設計界面如圖，
在這里插入圖片描述
在頂部有 需求——原型——UI 的一條龍選項卡。

在左上角有新手指導，可以讓你1分鍾內上手DevBefore。

3.2 需求梳理

在設計原型之前，我們應該先清晰有哪些需求，或者說我們這個“高校二手交易平台”應當有哪些功能。

DevBefore已經集成了需求梳理這個功能，為了快速設計出一個原型，我們直接用這個工具邊分析邊梳理需求。我認為，邊想邊做效率能更高點哦。

我們選擇需求梳理，可以看到高校二手交易平台的項目名，雙擊它：
在這里插入圖片描述
然后會有彈窗，在這里可以添加功能模塊

參考淘寶App，一個交易系統應該有首頁、搜索、商品分類、用戶、支付、消息等這些最基本的模塊。
對於用戶，應該有注冊/登錄模塊，二手交易平台用戶即是買家又是賣家，所以還應該有個我的閑置，可以上傳物品圖片、定價等。
當用戶點擊進入某個商品時，應該有購物車之類的功能，有購買的選項，還有與賣主咨詢的功能，為了增加互動性，用戶可以在商品下評論。