iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 72 瀏覽

鐵人賽 Mobile Development DAY 2

砍掉重練啦!UI/UX設計師莫名其妙ㄉ潛水App挑戰計畫系列第 2 篇

技術 #Day02 #序曲我是誰我在哪我要做什麼?

【參加動機】嗨呦~大家好我是Jasmine (｡･ω･｡)ﾉ今天來跟大家說一下我會參加Mono Sparta計畫的源起好惹! 第一次的招募說明會是辦在201...

Jasmine ‧ 2019-09-18 ‧團隊溫泉泡起來♨️

1 Like 1 留言 3256 瀏覽

鐵人賽 Modern Web DAY 3

「用 Adobe Xd 進行 UI 使用者介面設計」- Riven 系列第 3 篇

技術 3分鐘認識 Adobe Xd (操作工具篇)

準備開始囉嗨囉，我是 Riven 今天要用大概 3 分鐘的閱讀時間，一起快速認識 Adobe Xd 這個新的 UI/UX 設計軟體中，有哪些基本卻很重要的工...

Riven 林育正 ‧ 2019-09-04

1 Like 1 留言 2535 瀏覽

鐵人賽 Modern Web DAY 1

「用 Adobe Xd 進行 UI 使用者介面設計」- Riven 系列第 1 篇

技術關於這次 30 天的日更「用 Adobe Xd 進行 UI 使用者介面設計」系列

關於作者嗨囉，我是 Riven。數位遊牧型態的設計師；喜歡在社群上分享設計上的觀察與技巧，撰寫的文章在 Medium 上被選為 #Desgin 領域 Top...

Riven 林育正 ‧ 2019-09-02

1 Like 1 留言 1099 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 DAY 30-Daily UI 007 Setting 實作分享(prototype)(三)

終於到最後一篇了！今天要把剩下的部分都分享完。第三個場景有三個地方要設定，返回鍵和切換按鍵前兩天都介紹過了，所以今天針對新增 link 的按鍵做分享。點擊...

小貓 ‧ 2018-11-14

1 Like 0 留言 615 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 DAY 29-Daily UI 007 Setting 實作分享(prototype)(二)

接續著第二個場景，把下面所有細項設定拉進新的滾頁容器層，讓他們可以滑動。在 name 的框新增“輸入”物件，在默認文本打上要輸入的內容，並把顏色、字體、字重...

小貓 ‧ 2018-11-13

1 Like 0 留言 652 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 DAY 28-Daily UI 007 Setting 實作分享(prototype)(一)

終於進入最後一個分享作品的 prototype 了，一樣把全部的 Artboard 都各別匯進場景裡。第一個場景要觸發的按鍵有以下三個。 Personal...

小貓 ‧ 2018-11-12

1 Like 0 留言 355 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 DAY 27-Daily UI 007 Setting 實作分享(三）

今天會把最後的 Artboard 都分享完，那第三個 Artboard 是點開 link 選項的頁面，可以增加或關閉社群平台連結。一樣把上方的 Setting...

小貓 ‧ 2018-11-11

1 Like 0 留言 544 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 DAY 26-Daily UI 007 Setting 實作分享(二）

今天換分享第二個 Artboard ，這一頁是做 personal information 的細項設定。上面的 setting 部分一樣保留複製過來，細項的設...

小貓 ‧ 2018-11-10

1 Like 0 留言 566 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 DAY 25-Daily UI 007 Setting 實作分享(一）

這次的 Setting 是延續上一次的 User Profile做的設定，風格跟用色會統一跟 User Profile 一樣，針對 User Profile 的...

小貓 ‧ 2018-11-09

0 Like 0 留言 463 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 DAY 24-Daily UI 006 User Profile 實作分享（prototype）(四)

今天接續著做場景2，這一頁要做的效果是點擊頭像可以放大頭像查看，一樣對頭像添加單擊觸發，把場景3的物件複製過來，先做頭像放大的部分。把放大的頭像照片複製一個，...

小貓 ‧ 2018-11-08

0 Like 0 留言 422 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 DAY 23-Daily UI 006 User Profile 實作分享（prototype）(三)

昨天已經把底部色塊放大了，接下來就是要讓他消失，那這部分會用到的“透明度動作”昨天已經有介紹過了，就讓大家自己動手做做看囉！那這邊為了讓底部色塊和封面有無縫接...

小貓 ‧ 2018-11-07

1 Like 0 留言 526 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 DAY 22-Daily UI 006 User Profile 實作分享（prototype）(二)

上一篇做到移動頭像，接下來就換其他物件的設定。名稱、簡介和頭像的做法一樣，設定好可以看一下效果如何，確定OK後可以把場景2複製過來的物件刪除。這邊補充一下，從...

小貓 ‧ 2018-11-06

0 Like 0 留言 527 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 DAY 21-Daily UI 006 User Profile 實作分享（prototype）(一)

今天又要進入用ProtoPie實作prototype的部分了，那一樣開啟 Adobe XD 和 ProtoPie 把所有場景都匯入，然後就開始第一個場景的設定囉...

小貓 ‧ 2018-11-05

1 Like 0 留言 366 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 DAY 20-Daily UI 006 User Profile 實作分享（二）

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

小貓 ‧ 2018-11-04

2 Like 0 留言 636 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 DAY 19-Daily UI 006 User Profile 實作分享（一）

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

小貓 ‧ 2018-11-03

2 Like 0 留言 609 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

小貓 ‧ 2018-11-02

1 Like 0 留言 630 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

小貓 ‧ 2018-11-01

0 Like 1 留言 623 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 DAY 16-ProtoPie 工具及場景介紹

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

小貓 ‧ 2018-10-31

2 Like 0 留言 2035 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

小貓 ‧ 2018-10-30

1 Like 0 留言 562 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 DAY 14-Daily UI 002 Checkout 實作分享（四）

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

小貓 ‧ 2018-10-29

1 Like 0 留言 446 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 DAY 13-Daily UI 002 Checkout 實作分享（三）

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

小貓 ‧ 2018-10-28

1 Like 0 留言 557 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 DAY 12-Daily UI 002 Checkout 實作分享（二）

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

小貓 ‧ 2018-10-27

1 Like 0 留言 948 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 DAY 11-Daily UI 002 Checkout 實作分享（一）

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

小貓 ‧ 2018-10-26

3 Like 2 留言 1485 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 DAY 10-線上設計師平台介紹-Lymma

前一篇終於做完了Daily UI 001 Sign Up，那這一篇來介紹一下線上設計師平台-Lymma，大家熟悉的Dribbble、Behance是國外著名的設...

小貓 ‧ 2018-10-25

1 Like 0 留言 1345 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 DAY 09-Daily UI 001 Sign Up 的實作分享(Prototype)

上一篇已經介紹過設定框裡的功能，那我們開始製作 Sign Up的prototype吧。這次的Sign Up是很簡單的兩頁切換，我想要讓使用者可以隨意切換Sig...

小貓 ‧ 2018-10-24

1 Like 0 留言 3742 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 DAY 08-Adobe XD Prototype模式介紹

上一篇已經把介面設計好了，那我們今天先來介紹Adobe XD 的prototype。一樣打開Adobe XD，看到左上角會有 Design 和 Prototy...

小貓 ‧ 2018-10-23

1 Like 0 留言 1112 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 DAY 07-Daily UI 001 Sign Up 實作分享（三）

上一篇已經把基本的物件都做好了，可以來做美化設計了！首先我想幫Sign Up加陰影，讓他比較有空間立體感，選擇Sign Up物件，在狀態列的shadow打勾...

小貓 ‧ 2018-10-22

1 Like 0 留言 972 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 DAY 06-Daily UI 001 Sign Up 實作分享（二）

上一篇提到了畫icon，這邊示範一下三個icon的畫法。 Username 拉一個正圓形當頭，拉一個橢圓形做身體，再拉一個方形，把橢圓和方形選起來按“減去上層”...

小貓 ‧ 2018-10-21

3 Like 0 留言 1153 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 DAY 05-Daily UI 001 Sign Up 實作分享（一）

終於把Adobe XD大致上介紹完了，今天就要來進入正題了！第一個作品也是我接觸 UI/UX 做的第一個作品，做得比較簡單，剛好可以當超級入門的分享XDD，那...

小貓 ‧ 2018-10-20

1 Like 2 留言 2320 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 DAY 04-Adobe XD 工具介紹及基本操作（二）

上一篇介紹完工具列各個工具的功能及操作，這一篇就來介紹一下狀態列和基本操作。 1.對齊可以選擇多個物件進行不同的對齊方式。 2.Repeat Grid 可以...

小貓 ‧ 2018-10-19

技術 #Day02 #序曲 我是誰我在哪我要做什麼?