你知道原型是什麼嗎

爲了討論方便，有必要先作一個簡單的定義。

這裏的原型指的是對最終產品各頁面上內容的簡單呈現，一般不會設置顏色和

字體，也不含圖片。這裏的原型，也一般被稱做線框圖、示意圖、藍圖。在一

些極端的狀況下，原型圖每每能夠先被抽象成一個個的模塊組合，而後再去細

化每一個模塊中的內容極其展現形式。

原型的主要做用是爲了溝通最初的產品設想。原型圖展現的是內容和結構及粗

線條的佈局，而不是視覺設計。

必定程度上，原型圖是爲了說明用戶將如何與產品進行交互，其主要受衆是團

隊裏的工程師與設計師。原型圖必定要體現出用戶在每一個頁面上指望看到的內

容，以及這些內容在頁面上的相對優先級。一般狀況下，原型圖在紙上呈現，

也可使用一些特定的軟件進行製做，常見的包括 Axure、Visio 等。

因此，根據這個定義和解釋。咱們接下來討論的問題，主要是圍繞着 Web 網站

和 APP 的原型設計進行的。
關於原型的精細程度

業界廣泛的認知是，原型作相對中保真便可。中保真的原則是，對照原型，團

隊的設計師和工程師可以明白咱們要作的是一件什麼事情及這件事的重點就可

以了。

固然，還存在另一個觀點，原型，必須是要高保真的。對於這個觀點，我的

持保留意見。高保真的原型須要花費更多的精力，同時，不夠敏捷。
關於原型繪製工具

在程序員的世界裏，終極問題是，什麼是最好的語言？在前端工程師的世界裏

，終極問題是，什麼是最好的瀏覽器？在產品經理和交互設計師的世界裏，終

極問題是，什麼是最好的原型工具？

基本上，不存在絕對好用的工具，徹底取決與本身的愛好與使用是否順手。關

於原型繪製工具，網絡上有不少人總結了不少不一樣的工具，你可自行選擇。我

我的使用的比較順手的是 Axure。

哦，對了，實際上最好用的原型設計工具，最後，我發現，是紙和筆。在快捷

酒店管家的實際項目運做中，咱們更多的是運用白板來繪製原型，而後將通過

討論經過的原型用手機拍下來作記錄存檔。
關於 Axure 的使用

一、千萬不要去學習複雜的交互動做！

首先，在 Axure 裏使用複雜的交互會上癮，這將大大的浪費你的時間；其次，

設計師和工程師都不會看你的複雜交互動做的，他們只以爲這是個圖形而已；

第三，若是你真想學，爲何不去學 DIV+CSS 呢？

二、若是你確實須要表達一個複雜的交互，能夠考慮將這個交互拆解了表述

典型的好比一個輸入框的不一樣狀態。能夠拆解爲，得到焦點激活輸入框 – 正

在輸入中 – 輸入完成激活提交按鈕 – 點擊提交按鈕完成提交。

這種拆解的方式，雖然看上去會佔篇幅，可是卻實在是最容易被理解的，連流

程圖都能省略了。

三、能夠考慮將需求文檔與Axure原型結合起來

只是說能夠，沒說必定要這麼作。這是我一直在使用的一種方式，我本身以爲

效果還不錯，詳細的能夠參考「基於 Axure 的 PRD 協做」，再也不贅述。

四、必定要有一套屬於本身的控件庫

控件庫，簡單理解就是將產品拆解成不少的小零件，當你須要的時候，將這些

零件進行組裝便可。這能夠大大的提升你的原型製做效率。

關於原型控件，每一個原型工具都有，你能夠本身網上搜索。在實際運用的過程

中，你能夠根據本身的須要對這些控件作修改，以後能夠再次使用。

五、原型的版本存檔一樣重要

原型，跟實際產品同樣，是會迭代和不斷被修改的，因此，必定要記得存檔。

即便是在同一個原型上作修改，也必定要作記錄，這對後續回顧很重要。
最後，原型設計，是每一個交互設計師和產品經理最最最基本的技能，也是一個

梳理思路很好的方式。
有關Axure的課程，請前往：http://www.elsyy.com/course/5065
《Axure RP7.0從入門到精通》