iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1

上一篇已經把介面設計好了,那我們今天先來介紹Adobe XD 的prototype。

一樣打開Adobe XD,看到左上角會有 Design 和 Prototype的選項,目前我們是在 Design 的模式,那現在就按”Prototype”切換到做prototype的模式。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491GV10sPAZl4.png

可以看到工具列的工具變少了,狀態列也不見了,在Prototype的模式只能作頁面切換的設計、移動物件和編輯文字,其他物件的調整設定都要切換回Design。

可以看到第一個Artboard的右上角有一個藍底白色的home鍵,就是代表第一個Artboard是首頁的意思,如果我們想把第二個Artboard改成首頁的話,就點選第二個Artboard,會看到他的左上角也出現一個灰色的home鍵,點選他就會變成藍色,這樣首頁就換成是第二個Artboard了。

點擊想要連結的物件,這時候會他的右邊會跑出藍底白色的箭頭,按著箭頭拉到想要連結到的頁面後會跳出設定框,先來介紹一下設定框的功能。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491RLZW86Ai3b.png

Trigger是觸發,現在只有最基本的Tap(點擊)
https://ithelp.ithome.com.tw/upload/images/20181023/20112491O9amofiDGl.png

Action是觸發後的動作,Transition是基本的切換到連結頁面,Overlay是把選擇連結的頁面覆蓋在原本的頁面上,Previous Artboard是返回前一頁,通常在設定“上一頁”鍵時才會選這個選項。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491xMkBsEBtDV.png

Destination是連結的頁面,在拖拉箭頭時他就會自動設定,也可以在這手動更改。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491NYYbrTRmNX.png

Animation是切換的轉場動畫,預設的Dissolve是溶解,效果就像淡入的感覺,下面分別是Slide滑入和Push推入,兩者不同的地方是Slide是連結頁滑進來蓋住原本的頁面,而Push是連結的頁面把原本的頁面推出去,方向都可以自己選擇。
https://ithelp.ithome.com.tw/upload/images/20181023/201124919XBiHC3S3S.png

Easing是緩動,分別是緩出、緩進、緩進緩出或是無,是緩動函數基本的三個效果。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491mEcTW49Q37.png
https://ithelp.ithome.com.tw/upload/images/20181023/20112491Zb96ihXIuR.png

Duration是動作時間,設定的時間越短,切換得越快,反之則越慢。
https://ithelp.ithome.com.tw/upload/images/20181023/201124915fJww2EtfH.png

Preserve Scroll Position是保留滾輪滑動的位置,他會記住原本頁面滾動的距離,點到連結頁時也會直接跳到跟前一頁一樣的滾動距離。
https://ithelp.ithome.com.tw/upload/images/20181023/20112491HUrQsm3Ws6.png

那這篇先介紹到這裡,下一篇會實作Sign up 的Prototype,掰囉喵!


上一篇
DAY 07-Daily UI 001 Sign Up 實作分享(三)
下一篇
DAY 09-Daily UI 001 Sign Up 的實作分享(Prototype)
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30

尚未有邦友留言

立即登入留言