互動Demo設計:互動設計心得經驗分享

來源:互聯網
上載者:User

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

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

  這裡簡單分享下自己在項目過程中的互動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時,只需要調出需要的控制項即可,這可以大大的提高你的效率。

  關於原型控制項,每個原型工具都有,可以網上搜尋或者調用下他們分享的。但個人建議,還是根據DPL,製作一套自用標準的控制項陳列庫。

  五、善用master,提高效率

  大量的頁面進行統一的更新也是相當麻煩的一件事。在製作時,直接用master製作複用的模組,來取代複製黏貼,在需要調整時,只需要調整master檔案即可。

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

  六、版本存檔也很重要

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

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。