iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
2

在「Functional map 與 UI flow」篇中,介紹過了應該要給工程師的文件~
而在「溝通篇(那些難以啟齒的事)」篇裡,提到了一個在文件篇外的詞-- Prototype

今天就來玩一下Prototype的工具「InVision」吧!


其實sketch裡面也有prototype工具
但通用性比較低, 也沒有線上發佈版 ,所以目前我還是使用其他工具來製作!
(2018.12.10更正:有線上發佈版,登入sketch cloud即可分享prototyping給其他人)

InVision官網

剛接觸InVision已經離現在有段時間
那時候只用來做跳頁和幾個比較簡單的轉場
一段時間沒見,InVision做了很大的改版,可以設定的東西更多了!
突然覺得我又成了新手...果然還是得不斷使用才能跟著進步/images/emoticon/emoticon69.gif

與Zeplin的差異

之前曾經介紹過Zeplin!
原文:與工程師的協作之路-工具篇(Zeplin)

Zeplin和InVision雖然非常相似,也有好幾個重疊的功能~
例如評論、CSS、邊界間距...等,真的很像!
不過我感覺方向是不太一樣的!

Zeplin主要還是著重在畫面版控與style guideline,雖然也有一點prototyping能力,但感覺沒有InVision那麼強~
但是要論整理能力,真心推Zeplin~!顏色可以做命名,還能整理出各種字級與元件!外掛也多 擴充性強~

Zepline畫面
(某專案Zeplin中的design guideline)

不過如果你希望能更著重一些畫面反饋與互動,那可以嘗試看看InVision!
(市面上prototype工具很多,每一種都玩一下~然後選出最適合你們團隊溝通的工具吧!)

基礎介面介紹

太多強大的新功能等待研究...
不過還是可以先執行一些基本的功能~

在畫面上按下(+)號可以新增一個專案!(免費版單次只能使用一個專案!官方釋出的範例專案不在此限)

點下時它會問你是要開啟哪一種專案,可以選擇:

  • Prototype原型:我目前使用的,也是今天會帶大家新增的項目
  • Freehand手繪稿:可以線上畫出手稿wireframe,更快速溝通
  • Board:他感覺比較像是一個概念,支援拖曳以迅速構出一個畫面(我還沒玩過)

新增專案畫面

Board因為沒有真正玩過,所以目前比較不好說他有什麼優缺點~
手繪稿倒是蠻有趣的,但用滑鼠畫的話有些人可能會覺得不好掌控,大家可以去試試看!

我之前主要使用的功能是Prototype!
選擇這個之後,可以從sketch或photoshop中匯入設計稿
匯入之後長這樣:
匯入InVision畫面

記得!想要demo的流程,每個會經過的畫面都要記得做進去~不然你會沒地方可以連...

你可以邀請你的團隊加入這個project,他同時提供了類似Trello的專案管理工具,成員評論和成員活動也拉出頁籤,讓溝通更好管理!
另外,他也有支援slack外掛,每當有更新畫面或是新的評論,都會及時通知。

設定動線與轉場

將畫面都上傳之後,點入你想編輯動線的頁面,在置底工具欄你會看到這些圖示:

InVision置底工具欄

眼睛表示預覽的畫面,因為分享連結給別人的時候,是看不見底下這條工具欄的
所以這邊是讓你預視一下別人會看到的樣子!也讓你自己可以戳戳看設定是不是你要的!

第二個框是這個畫面主要的功能,透過圈選範圍來做設置(連到哪、怎麼過場)
可以連到專案裡的其他頁面,也可以直接給連結。

InVision設定過場

第三個那個有點像訊息的icon則是留下評論~
第四個則是看他的尺寸間距設定,這部分跟Zeplin有重疊,不過sketch匯入之後可以看到sketch裡的圖層分配,蠻酷的~很適合在設計與設計間溝通時使用!
第五個像時鐘icon的,是類版控,可以讓你看到前幾次修改的畫面預覽圖,才不會發生...

PM「這裡之前是長這樣嗎...你是不是有改?」
Designer「沒有啊,一直都長這樣。」
PM「沒有?怎麼可能...咦?總覺得不一樣吧~不要騙我~~你改成xxx好了」
Designer「之前是你說要這樣子的耶!」
PM「哪可能?沒吧?」

/images/emoticon/emoticon16.gif
你知道,有些需求到最後都有如羅生門...某些人總是說「才沒有這回事!」
當初到底是被鬼控制講出違背心意的話、還是那段時間被外星人綁架了根本不在地球,地球上的是冒牌貨!?
總之就是對自己講過的話、下過的評論完全沒任何印象=.=

大家可以試試看這個官方範例版(但連結不確定有效多久就是了...)
如果以上這個連結真的失效~大家就自己玩玩看吧!


一段時間沒有碰,真的改版蠻多的,很多新東西可以玩~

想當初我還寫信跟他們提建議(用我超廢到笑的英文...)
沒想到他們不但用心地跟我來來回回幾封信,還差點要打電話給我
只好很坦白跟他們說我英文不好只能書信,但未來如果有可以改善的地方會再通知他們...

這次看了一下,還真的有改善我提的地方(好感動...)
真希望我英文可以練好一點QQ
差點就可以認識外國帥哥 咳咳,不是~是國際交流!!!

對了對了~
他們還出了一款叫做「InVision Studio」的東西!裡面可以設定更多的頁面動畫和轉場時間demo!!
但我還沒練起來...有機會再分享給大家喔!!!


上一篇
與工程師的協作之路-色彩篇(網頁色碼)
下一篇
與工程師的協作之路-初窺Git
系列文
學什麼就寫什麼,知道什麼就分享什麼31

尚未有邦友留言

立即登入留言