網站設計分析：關於交互Demo設計的一些建議

　　為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果，進行更有效的溝通;提供直觀的產品設想，說明用戶將如何與產品進行交互，在交互設計的過程中一定會產出各種各樣的產出物，如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。

　　這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。

　　　Axure

　　制作交互Demo的軟件有很多，個人比較喜歡且習慣的就是Axure。Axure操作簡單明了，對於初學者來說，非常容易上手;它也擁有強大的交互演示動作，對於高級使用者來說，制作非常高保真的演示Demo, 也是非常有成就感的。

　　　　Balsamiq

　　提供了豐富的手繪風格的web常用元件，能創建接近於紙上手繪的原型，讓人有眼前一亮的感覺，個人建議初稿方案的時候可以考慮用這個更能吸引人。

　　　Mockups

　　與Balsamiq 風格相似，而 Mockups最大的特色是網頁版，無需下載安裝，可以基於web的存儲在任意電腦上聯機打開。

　　其他還有一些工具，就不做介紹了，因為個人也沒有使用過，比如：

　　Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader…

　　每個軟件都是各有特色，也有利弊，但軟件都只是工具，用哪個都無妨，只要符合自己的習慣就好，關鍵是產出物。

　　　相對中保真的交互Demo

　　工具之後，就是Demo稿的設計了。在平常的項目中，我基本上都是使用Axure 工具，也是大家常用的工具。而交互Demo也只要出到相對中保真的狀態即可，所謂的相對中保真，就是產出交付物中能體現出用戶在每個頁面上期望看到的內容，以及這些內容在頁面上的相對優先級，並要提供流程說明和操作方式及響應狀態的表述。

　　不是粗糙的草稿方案，也不要出太高保真的視覺效果。草稿方案，可以用手繪或者接近手繪效果的工具(balsamiq、Mockups)，不見得都需要用axure; 而高保真的原型需要花費更多的精力，也不夠高效，除非是用於匯報演示方案、或是為可用性測試制作高保真原型。

　　　一、遵守柵格規范

　　很多新人交互設計師都比較容易忽略這一點，沒有按照柵格規范來布局，這樣容易導致的結果就是：視覺設計師在按照柵格排版時，發現在交互稿中能排下的內容，在視覺稿中排不下了，這樣就還得返回去改交互稿，或是需要重新設計布局。

　　所以要養成習慣，在設計初時，一定要先根據柵格進行布局，同時也要保證交互稿中的字號、間距盡量符合視覺要求(比如間距最小10像素等)，以免給視覺造成不必要的困擾。

　　　二、不要使用截圖與顏色

　　有些產品人員或設計師為了能方便，拼湊各種競品的截圖，組成一個頁面。這樣即不規范，也大大降低了交互稿的檔次，還會對視覺設計師也有一定的干擾，個人是非常厭惡的。

　　另外，交互階段的產出方案，應該更聚焦在信息布局、內容層次、操作流程。不太建議在交互稿上使用色彩(除了文字或特殊狀態)，避免對視覺設計師造成不必要的干擾。如果真的有一些關於想法，可以通過文字描述，或者直接告訴視覺設計師需要營造什麼樣的氛圍，達到什麼效果。

　　讓色彩、質感、具體形勢交給視覺設計師，多點空間讓視覺設計師去盡情發揮。

　　三、不要沉迷於復雜的交互動作效果

　　Axure提供了豐富的動作腳本支持，使得動態模擬真實界面交互變成可能, 能實現狀態切換、時間動畫以及其他一些驚人的小玩意。

　　但有時候我們需要思考，在日常項目中是否需要花費這麼多的精力和時間?

　　這也取決於於這個原型是用於什麼情境。如果原型是用以進行早期的可用性測試，或為爭取資源的高保真演示匯報Demo，也許需要我們快速產出接近於實際界面的可操作效果。

　　而如果只是用於流程中的交互物，提供給視覺設計師或前端工程師進行開發，那麼過度的設計和效果只能是浪費精力。

　　　四、一定要有一套屬於自己的控件庫

　　把常用的控件、功能組建、圖標、標注等制作成通用的標准小單元，插入到部件庫(widgets)，在制作交互Demo時，只需要調出需要的控件即可，這可以大大的提高你的效率。

　　關於原型控件，每個原型工具都有，可以網上搜索或者調用下他人分享的。但個人建議，還是根據自己的習慣或產品設計規范，制作一套自用的標准控件庫。

　　五、善用master，提高效率

　　大量的頁面進行統一的更新也是相當麻煩的一件事。在制作時，直接用master制作復用的模塊，來取代復制黏貼，在需要調整時，只需要調整master文件即可。

　　master是Axure提供的類似於自定義組件的功能，你可以在master設計常用的交互組件，然後在不同的頁面引用，如頁面頭尾、菜單等會在大部分頁面公用內容，非常適合做成master，然後在各個界面中拖曳相應到指定位置。這樣當這些共用內容需要修改時，只需修改mater即可。

　　六、版本存檔也很重要

　　Demo，跟實際產品一樣，是會迭代和不斷被修改的，所以，一定要記得存檔。即使是在同一個原型上做修改，也一定要做記錄，這對後續回顧很重要。

　　後話：交互Demo設計，是每個交互設計師最最基本的技能，這也是一個梳理思路很好的方式，但不是唯一的形勢，Axure也不是唯一工具。只要能清晰表達產品思路、界面UI、流程邏輯及交互狀態的好用工具都是值得去嘗試的。

　　(原文鏈接：http://heyuchan.com/?p=529)