絮絮叨叨 Axure
做產(chǎn)品以來一直使用 Axure 作為原型生產(chǎn)工具，而且只做靜態(tài)頁面，頁面元件基本都是官方自帶，顏色幾乎都是黑、白、灰，偶爾會使用大號或紅色字體表示強調(diào)，藍色字體表示文字鏈接。
做靜態(tài)頁面可以按照層級結(jié)構(gòu)設置目錄，每個目錄下的各頁面及狀態(tài)在 Axure 中平鋪展開，按照正確的排版及編號列出（這是個細活兒），這對需求講解及后面的設計開發(fā)及測試都很方便，因為圖片永遠比文字直接。
至于原型界面的元件及顏色堅持簡單，主要為了不妨礙設計師的思考，作為一個 #FFFFFF 的設計小白，自認為沒有設計師專業(yè)，當然設計師出了初稿之后，你可以根據(jù)初稿的設計圖給出自己的建議。
說了這么多應該能把懶癌晚期這事兒蓋過去了，其實 Axure 很強大，豐富的第三方元件庫、高度可定義的原件屬性及樣式，再配以動態(tài)面板和中繼器，完全可以做出能拿去圈錢的高保真原型，但在工作中顯得有點臃腫多余。
如果自己想做下頁面樣式或交互效果，也別再折騰 Axure 了，試試操作更簡單、功能更強大的 Sketch 和 Principle 吧，這兩個工具相似的地方很多，各自的專業(yè)性也很強，Sketch + Principle 絕對是神器組合！
有關(guān) Sketch 和 Principle 的介紹太多，這里不做搬運工。下面以一個簡單實例按照自己的理解說明，先看下最終效果：
Sketch
Sketch 中的每個頁面也是由多個自定義模塊組成，然后組合在一起輸出一個頁面。
- 啟動 Sketch 后默認已有一個 Page1，一個 Page 內(nèi)可做多個頁面或設計元件；
- 在 Page 操作面板插入一個 Artboard，每個 Artboard 表示一個頁面；
- 可自定義 Artboard 大小或在右側(cè)直接選設備尺寸，此處選擇 iPhone6；
- Artboard 背景可使用圖片或自己設計，然后在 Artboard 中拖入元件；
- Sketch 已有豐富的元件庫，可以按需調(diào)整或直接使用。
為了在 Principle 中制作交互效果，在作圖時把需要作為觸發(fā)事件的模塊和頁面拆分，在 Sketch 中分開輸出圖片。做完后 Sketch 面板及輸出效果如下：
Principle
使用 Principle 時可將圖片拖入操作面板，也可直接導入 Sketch 的設計圖?？芍苯訉氲膱D是在 Artboard 上的圖。
- 啟動 Principle 后默認已有一個 Artboard，我把 Artboard 定義為 Principle 中的單位，每個 Artboard 表示一個頁面；
- 可自定義 Artboard 大小或在左側(cè) Size Presets 選設備尺寸，此處選擇iPhone6；
- 將 Sketch 導出的首頁元素拖入同一個 Artboard 中：頁面、咖啡杯、四個方形組合；
- 可以看到頁面長度、四個方形組合寬度超出 Artboard 尺寸，我們也確實需要滑動效果；
- 頁面下方城市列表過長需要上下滑動（垂直），將頁面 Vertical 設置為 Scorll；
- 四個方塊組合需要左右滑動（水平），將四個方形組合 Horizontal 設置為 Scorll；
- 發(fā)現(xiàn)頁面、四個方形組合超出 Artboard 的部分均收回，只顯示 Artboard 大小視圖。
- 首頁只有點擊咖啡杯跳到 Drink 頁的觸發(fā)事件，選中咖啡杯，點擊右側(cè)「閃電」選擇事件鏈接（拖動箭頭）到下個頁面，效果如下：
- 點擊『+』出現(xiàn)三個選項的效果是做了兩張前后對比圖，把兩張圖中的觸發(fā)事件分別鏈接到另一個頁面；
- 觸發(fā)事件的類型確定后，頁面上方會出現(xiàn)多條箭頭，每個箭頭代表一個觸發(fā)事件，接下來選中箭頭開始調(diào)試交互細節(jié)，如頁面跳轉(zhuǎn)效果、觸發(fā)事件后其他元素移動的速度、軌跡效果等；
- 整個過程中面板右上角一直有個預覽窗，可以一邊制作一邊在預覽窗操作查看交互效果，還可以將操作過程錄制成 gif 或 mov 格式的視頻。
同時，Sketch 和 Principle 都是 Mac 平臺收費工具，提供一定時間試用期，都提供 iOS 版本 APP，可在手機上實時預覽效果，不同的是iOS版本 Sketch Mirror 價格 ￥30、Principle 免費。
熟悉設計和交互是產(chǎn)品必備的素養(yǎng)，至少不必讓設計師和開發(fā)一直為你的 YY “先做出來看看效果”買單，
如果你能看到這里，希望能解決你的一些問題或疑惑。
