iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

UI/UX/ProtoPie入門-喵喵設計師的學習日記 系列

以Adobe XD和ProtoPie這兩個設計軟體來介紹分享UI/UX設計入門,用幾個Daily UI的作品來介紹分享一下軟體的實際操作及功能、特效的應用。

鐵人鍊成 | 共 30 篇文章 | 32 人訂閱 訂閱系列文 RSS系列文
DAY 11

DAY 11-Daily UI 002 Checkout 實作分享(一)

今天終於要換到下一個作品了,這次要介紹的作品是Daily UI 002 的Checkout,先給大家看一下,這次的購物頁面會做五個頁面,還會模擬購買的過程,這次...

2018-10-26 ‧ 由 小貓 分享
DAY 12

DAY 12-Daily UI 002 Checkout 實作分享(二)

昨天做完第一個Artboard購物車的頁面,今天要繼續分享第二個Artboard結帳頁面的設計了。 新增一個Artboard,把也會出現在第二個Artboard...

2018-10-27 ‧ 由 小貓 分享
DAY 13

DAY 13-Daily UI 002 Checkout 實作分享(三)

上一篇已經完成前兩個Artboard,這一篇會繼續做下一個Artboard的分享。 這個Artboard是想要設計成點開付款方式的VISA會變大展開成一張VIS...

2018-10-28 ‧ 由 小貓 分享
DAY 14

DAY 14-Daily UI 002 Checkout 實作分享(四)

這一篇會把剩下的 Artboard 做完,上篇的 VISA 完成了,今天繼續做 PayPal 的部分。用昨天的 Artboard 直接複製一樣的一個,滑鼠按著...

2018-10-29 ‧ 由 小貓 分享
DAY 15

DAY 15-ProtoPie 軟體介紹和檔案導入

今天要介紹的軟體是 ProtoPie,他最初就是以 “ 打造設計師可輕鬆上手的工具”為目標,是目前唯一支持無程式碼調用感應器並製作跨平台互動的原型工具,可支援...

2018-10-30 ‧ 由 小貓 分享
DAY 16

DAY 16-ProtoPie 工具及場景介紹

上一篇已經導入檔案了,那這邊先來介紹介面的部分。 1.物件工具區可以新增多種物件的工具,有圖片工具、視頻工具、圖形工具、文本工具、容器層工具。 2.場景區可以設...

2018-10-31 ‧ 由 小貓 分享
DAY 17

DAY 17-Daily UI 002 Checkout 實作分享 (Prototype)( 一 )

上一篇已經介紹怎麼新增場景,今天就來分享實際操作的過程。 基本上就是對一個物件設定觸發指令,觸發動作如下圖,有基本的手勢性單擊、雙擊等,還有其他條件性觸發、鼠標...

2018-11-01 ‧ 由 小貓 分享
DAY 18

DAY 18-Daily UI 002 Checkout 實作分享 (Prototype)( 二 )

轉場到場景2後,要模擬打資料後的樣子,那模擬的頁面都已經有另外做好了,點擊訂購人的填寫框會轉場到已經填寫好資料的頁面。 點一下旁邊會讓鍵盤退下去,那這邊就選擇訂...

2018-11-02 ‧ 由 小貓 分享
DAY 19

DAY 19-Daily UI 006 User Profile 實作分享(一)

耶耶,又進入下一個作品了,這次介紹的作品是 Daily UI 006 的 User Profile,那這個作品走的感覺是比較像 Instagram 那樣,可以發...

2018-11-03 ‧ 由 小貓 分享
DAY 20

DAY 20-Daily UI 006 User Profile 實作分享(二)

這一篇就接續上一篇的內容,繼續介紹。 第二個Artboard就是主要的用戶資訊頁面,上面可以放圖片當作 banner,也壓個透明度底的顏色色塊當濾鏡。 頭貼可以...

2018-11-04 ‧ 由 小貓 分享