iT邦幫忙

ui/ux相關文章
共有 33 則文章
鐵人賽 Mobile Development DAY 2

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

技術 DAY 07-Daily UI 001 Sign Up 實作分享(三)

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

鐵人賽 Modern Web DAY 6

技術 DAY 06-Daily UI 001 Sign Up 實作分享(二)

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

鐵人賽 Modern Web DAY 5

技術 DAY 05-Daily UI 001 Sign Up 實作分享(一)

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

鐵人賽 Modern Web DAY 4

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

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