關於交互Demo設計的一些建議

2021-01-19 人人都是產品經理

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

這裡簡單分享下自己在項目過程中的交互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)

相關焦點

  • 寶沃黃超俊:智能座艙人機互動參數化設計研究
    我是來自寶沃汽車的黃超俊,一直致力於人機工程、人機互動設計和前瞻技術落地的研究,今天我跟大家分享的主題是智能座艙人機互動參數化設計的研究。主要分為3個方面,分別是智能座艙人機互動的設計框架,人機互動設計的參數化設計,智能座艙人機互動未來的挑戰。
  • 卡內基梅隆大學互動設計專業全面解析
    互動設計專業是CMU的一門強勢學科,並且也是眾多藝術留學生的選擇。接下來,大家就一起來了解一下關於卡內基梅隆大學互動設計專業的介紹吧!Arts學院下面的一個設計系,在設計系中,CMU的互動設計研究生專業 根據學生不同的基礎設置了3個不同的學位: 1)互動設計專業MPS學位,學制1年「Master of Professional Studies」 2)互動設計專業MDes學位,學制2年「Master of Design」 3
  • 汽車人機互動設計,業內人士是怎麼看的?
    前幾天,車轍君參加了一場由汽車財經網與同濟大學"創業谷"舉辦的首屆"中國汽車互動設計(國際)論壇",非常有幸聽到了來自全球各領域專業人士對汽車互動設計在行業發展應用的看法,也大概了解到了現階段汽車互動設計的一個概況,借著這個機會,願結合自己對汽車互動設計對智能汽車影響的一點看法和大家分享一下。
  • Apple 的設計哲學:交互篇
    蘋果是一家為數不多以設計驅動的公司。如今,當我們談論起產品設計、談論起用戶體驗,總是離不開蘋果,它所堅持的設計哲學是對細節和質量的極致追求。下面,我就帶大家看看 Apple 在交互方面做的努力。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    本文總結了一些在互動設計中重要的理論要點,並針對各理論要點展開描述相應的設計策略。相對於物理世界中的摩擦現象,認知摩擦則是因為信息化程度的不斷加深,由信息膨脹導致人機互動界面設計不良的一種現象。
  • 一文讀懂,語音互動設計流程
    國際的一些大公司已經做了很好的示範了,比如:亞馬遜,谷歌等等,都會有設立專門的職位,做一些專門的研究,當然近期國內的相關招聘也會看到有相關的職位,且薪資不低。那麼接下來會個大家詳細的分享VUI(語音互動設計師Voice User Interfaces)。
  • 信息維度與互動設計原理
    互動設計(Interaction Design)是人事物之間交換物質、交流信息、交通能量、交感語言的過程規劃與構想表達。包含交互載體,交互內容和交互功能 3 個要素,互動設計需要達成用戶體驗與可用性兩大目標。具體包含人機互動、數據自交互、人與環境交互三大類。互動設計方法有以技術為支撐的目標驅動設計方法,以人為中心的情境預演設計方法,以意義為中心的願景內驅設計方法等。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    交互稿是否只需包含設計方案即可?其實不然。:記錄了交互稿更新的信息,方便他人查看,同時也保障了規範性;設計過程:包含需求信息、設計資料記錄、設計過程記錄三方面信息,目的是讓自己的設計過程更加結構化,也方便以後回溯設計、總結設計;交互稿:交互稿的主體,內含流程圖、界面圖、設計說明等;廢紙簍:用於存放廢棄的頁面,以防後期用到;
  • 譯文|如何通過聲音設計增強移動交互?
    本文主要關注交互式聲音設計,這還是一個鮮為人知的學科領域,那如何通過聲音設計增強移動交互呢?當我和別人討論聲音設計及它在Facebook所扮演的角色時,很多人一開始是看起來一臉茫然的。「聲音?Facebook?」他們問道。我個人是可以理解他們的,大多數時候,對於我們聽到的聲音,人們不會有意識地去思考其背後的意義。
  • 互動設計:網易雲音樂的抱一抱功能
    二、雙指交互是不是個好設計?儘管作為一個產品小白,琢磨了一圈沒有想明白怎麼抱抱,還去百度了教程才知道怎麼抱,大多數用戶可能並沒有我這樣的好奇心,可能也不會使用這個功能。但我們仍然不能說直接下定論說這是個不好的設計,畢竟產品設計本身是有自己的產品定位和用戶場景需求的,也許我根本不是目標用戶,那麼用這個設計攔住我就是大成功的。
  • 互動設計的最後一公裡(一)——動效設計
    隨著設計工具逐漸遷移到sketch上,其最基本的頁面點擊跳轉卻不能實現,只能進行靜態頁面展示,若設計師工作時間充足一些,或許會進行頁面之間的流轉箭頭指示。對於那些對產品以及業務不是很了解的團隊成員來說,其一直會處於懵懂狀態,甚至會在眾多的靜態頁面中迷失,大大降低了交互稿的可讀性。
  • 習慣養成APP的互動設計&視覺設計
    本文通過展示UI設計稿、需求分析報告和互動設計文檔,全面詳解養成APP的交互體驗與視覺設計。前言「學樹」(Habitree)是9月時從互動設計到UI設計獨立完成的一個個人項目,也是第一次挑戰時間管理類應用這個有趣的領域。雖然最終因為種種原因很遺憾沒有順利地交付開發和實際上線,但設計階段還是已經有一個相對完整的階段性成果的,在此分享給大家。
  • 從互動設計到產品設計到服務設計,變遷是怎麼發生的?
    2009-2018這十年間,我們經歷了互動設計熱、產品設計熱以及近兩年的服務設計熱。這些變遷背後的原因是什麼?一、互動設計1. 互動設計的時代特點互動設計在國內的興起應該要從十年前說起,也就是2009年。其實互動設計並不是什麼新詞,在國外已經存在了幾十年了。為什麼2009年突然火了呢?因為移動網際網路出現了。
  • 超全面的交互自學指南
    身邊有些朋友想要學習互動設計,又怕平時工作瑣碎學不好,問到我該如何學習和開展互動設計工作?互動設計的市場與發展又是如何?於是乎做了一些線上研討跟問卷調查,並圍繞初學者或想要深入學習的同學,寫下了這篇觀念和建議,希望能夠有所幫助。
  • HCI互動設計留學-年薪百萬的交互專業有哪些學校可以申?
    因此,近年來與「萬物互聯」時代發展所匹配的專業變得異常火爆,比如說越來越火的互動設計以及相關專業。 但是國外院校對互動設計專業劃分太細,再加上國內相關信息的比較稀少,很多同學在選擇時往往困難重重,我們最近也收到了很多HCI 的offer,所以對這些 offer做了一些梳理,也為大家稍稍整理了一些HCI和國外相關推薦項目的乾貨內容,希望能對你有幫助~
  • 關於AD轉換設計的一些經驗總結
    看到一片關於AD轉換設計中的基本問題整理博文,特地轉載過來和大家共分享。  23.關於運算放大器的阻抗匹配在設計中,需要如何注意?  只有在高速的情況下才需要考慮阻抗匹配。  24.電源精度會導致ADC的精度提不上去嗎?  有可能。具體要看你ADC的位數和PSRR這個參數。如果位數很低如10bit,你用再低噪聲的電源也只能是10bit精度。
  • 以在線協作文檔為例的情境交互體驗淺析與設計實例 - 人人都是產品...
    本文將以在線協作文檔為例,分析其情景交互體驗,希望對你有幫助。筆者以 「在線文件存儲和文檔創作」 的場景為例,進行關於在線協作文檔的情境交互研究。為了得到這些知識,我們需要去進行包括情境調研、用戶訪談在內的一些手段來獲得最初的用戶原始數據,之後我們將得到的用戶原始數據作為用戶事實,以不同的身份(設計、營銷、開發、數據建模)對每一個事實做出相應的解讀,以此來推理和說明用戶的行為和體驗,並嘗試得到關於這些行為和體驗是如何揭示用戶相關活動的結構的一些結論。
  • 老齡化產品設計(二):老年人產品的顏色、圖像、排版、交互、導航設計
    筆者在《老齡化產品設計(一):老人的身體機能有哪些改變》一文分析了老年人視覺、聽覺、觸覺等感官特徵的一些變化,總結了注意、記憶、思維等認知特徵的一些特點。本文與大家一起探討下老齡化產品設計有哪些關注的點。
  • 「硬核」同為DH軟尾的閃電DEMO和YT TUES之間存在多大差異
    關於軟尾自行車懸掛的類型,我們在之前的文章中也有做過解釋。那麼一量全避震的軟尾自行車,我們都需要從哪些數據來做考量和分析,才能做出合適自己的選擇呢?在今天的這篇文章裡,通過國外同行的一些數據分析,我們來看一下,同樣作為DH自行車的S-Work demo和YT tues(同為2016款)的這輛量車,雖然看似相同,但是實際的風格卻是大相逕庭。
  • 收錄美國15校 · 最強互動設計專業全攻略
    我曾就藝術設計留學行業內對互動設計的盲區專門有寫過一篇文章,即《讀懂互動設計專業的四大方向》,從「互動設計專業的四大方向」、「代表院校」和「作品展示」三個方面詳細解釋過互動設計專業的分類,旨在告訴每位學生 / 潛在的申請者都應該: