搜狐交互設計師:我常用的一套交互設計工具

2 評論 16019 瀏覽 615 收藏 10 分鐘

剛開始接觸交互設計往往會面臨自己的想法找不到合適的方法輸出。所以完成基本工作同時也在積極尋找、學習適合自己又和工作環境相匹配的工具。與團隊成員配合的時候沒有人會在意你是用什么工具,成員們只想看到設計師產出的輸出物。這個時候針對不同任務類型和團隊大小找到合適的工具可以讓設計師迅速輸出團隊想要的結果輸出物,事半功倍。

隨著移動互聯網的快速發展,很多針對移動端開發的工具層出不窮,這些工具的小、快、針對性強的特點在一定程度上對產統設計工具造成一定的沖擊。

下面介紹自己常用的一套設計工具和在配合項目使用過程中的心得:

Axure

雖然現在很少用到了,但作為步入互聯網第一個接觸的軟件要紀念一下。功能大而全,有豐富的控件可以調用(網上對于Axure的控件資源很多),通過簡單的邏輯關系組合出豐富的動畫(8.0在動效制作有大幅提升)。但正是因為它的大而全使其在移動端設計上不夠靈活,功能多而復雜。軟件自身的設計不符合設計師工作習慣,當元素多時繪圖面板非?;靵y,產出物死板不美觀。當然Axure可以做出高保真界面,但相比于Sketch要花費很大成本,如果未能多去建立母版,之后的二次三次修改成本很高。大部分產品經理在Axure上圖配文并生成html作為文檔傳遞給下一工作流程上的組員。

繪制高、低保真網頁原型圖;可作為產品、交互文檔輸出工具

Sketch

完全針對移動端設計而生的軟件。界面干凈直觀,分層的概念符合設計師工作習慣,當界面復雜時明確的圖層與分組使元素控件管理起來非常方便。Artboard、Symbol和Text style 的運用簡化了重復內容調用的工作也減輕了后續修改工作,圖配文的文檔輸出管理好過Axure。第三方插件的開發和控件庫資源使設計更方便,還有很多其他的小功能,比如Share(用其他電腦可以實時觀看設計進度),自己還要邊使用邊發現。與Axure對比,前者更適合網頁原型設計而后者更傾向于移動端產品。國外Sketch已經有取代Ps、Axure的趨勢了,國內也開始普及,一些公司團隊強行統一使用Sketch。

繪制高、低保真移動端原型圖;繪制圖標、視覺設計稿;可切圖輸出;可作為交互文檔和視覺設計說明文檔的輸出工具

Omni Graffle

一款流程圖工具。流程圖無非就是圖和線的排布,自己也有用過Ai、Sketch畫流程圖。但當要修改時會很混亂,線要重新畫,版面要重新布置。而Graffle專為流程邏輯而設計,移動圖時線也隨之移動,線的屬性可更改,排版非常方便。圖層的設計方便管理界面元素,很清楚認識到哪些元素是并列關系,哪些元素是父子集關系。交互的流程,功能的結構,組織的關系,凡是涉及到關系邏輯的設計Graffle是我用過最好用的流程設計軟件。

產品功能需求邏輯圖;產品頁面交互邏輯圖

graffle 2016-01-09 上午10.22.24副本

Page Flow

Keynote

普遍當作匯報演講的軟件,其實還可以用來輸出原型演示視頻。在開發過程中設計師很多時候不能通過靜止的圖像清晰地向工程師傳達交互過程,此時需要制作動畫原型來展示方案。制作動畫需要安排好展示邏輯,設置很多動效參數,有時甚至涉及到動效變化曲線,這些復雜的邏輯參數增加了制作成本。工程師只想看到簡單的演示,他們并不care你這個交互反饋是否有spring,delay了零點幾秒,這時可以使用keynote制作動效視頻。首先畫草圖排好展示順序和時間,在keynote上列出展示頁面,用神奇移動和自帶控件動畫將頁面聯系起來。

同時本身的圖文編輯屬性、分頁展示屬性、可插入原型演示動畫的特點使keynote可作為交互文檔和設計規范文檔的輸出工具

制作簡單交互動效視頻;撰寫交互文檔;撰寫設計規范

報錯

報錯提示交互

Pixate和Quartz Composer-Origami

兩者都是交互原型制作工具,可生成模擬器或者mirror到手機上,更直觀地推敲設計交互原型。前者被Google收購已經免費,最大的特點是運用了圖層概念,將交互手勢、動畫直接添加到圖層上,并用base on將頁面聯系起來。后者是Facebook在蘋果原生Quartz Composer動畫設計軟件上的插件,大大降低了設計使用門檻。特點是模塊化,用編程的邏輯制作動畫。不同的交互手勢和動效樣式有各自的一個模塊,用線將模塊聯系起來,軟件的動效調用基本源于FB的Pop Animation庫。兩者學習成本很高,尤其后者,頁面多、交互多時制作面板非常復雜,但做出的動效精確優美。可適用于個別頁面中少數重要、精確的交互原型制作。

制作精準的交互動效原型

Scroll

復雜的Scroll交互動效(臨摹)

Principle

剛出來不久的原型制作軟件。操作界面和Sketch很相像,通過不同交互手勢將頁面連接起來,最大的特點是可視化程度高。在Sketch中制作的高保真原型圖可直接拖拽到Principle中,為圖片自身和圖片之間賦予交互,mirror到手機上,用來匯報自己制作的demo非常方便。通過animate和drivers也可制作出略復雜帶有條件語句的動畫,但并不能和Pixate、QC-Origami相比擬。用Principle直接將手機連接到投影上展示demo,其他手機裝上Principle后可打開用郵件收到的demo文件,評審更直觀,省去了匯報過程中很多文字描述

制作簡單交互原型;制作全局原型演示

principle2016-01-09 上午10.20.29副本

制作交互原型演示

未命名

對頁面上簡單交互Mirror到手機上進行推敲

工具只是工具而已

以上是自己從原型圖、交互原型展示到文檔輸出經常使用的一系列軟件。工具只是高效地將我們的想法用最合適的方式完整無缺地展示出來,便于別人理解與存檔。根據不同場景和輸出物選擇恰當工具,工具自身并沒有優劣。如果繪制擬物風格界面、圖標,Sketch在Ps和Ai面前就顯得力不從心;在大團隊里文檔輸出用Indesign就比用Axure等輸出的文檔更正規,更有利于存檔和日后查看,形成公司團隊的知識庫。

自己在剛做工業設計時常糾結與工具,看到別人優秀的作品總是把重點放到“這是用什么渲染的?這個模型有什么軟件建立的?”而忽略了使用者的創意和想法。那時也學習了不少軟件(Ps、Alias、Showcase、Keyshot等等),現在回想起來留下的更多是工業設計的想法思維。希望大家能清楚認識工具的意義,找到并掌握一套自己順手的工具,更重要還是要看使用者達出來的創意想法,切不可糾結于工具。

 

作者:@米_亓

原文地址:http://www.miyuhao.com/2016/01/09/129/

本文由@米_亓 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. ??

    來自上海 回復
  2. ?

    來自重慶 回復