iT邦幫忙

#介面設計相關文章
共有 29 則文章
鐵人賽 Modern Web DAY 2
30天UIUX自學之路 系列 第 2

技術 Day 02 介面設計工具簡介 來製作登入畫面吧!

鐵人賽的第二天,DailyUI挑戰的第一天,題目是SIGN UP(登入畫面),元素會有註冊/登入/透過FB等帳號連結登入、帳號密碼輸入欄位、登入按鈕等等,登入頁...

鐵人賽 Modern Web DAY 4
30天UIUX自學之路 系列 第 4

技術 Day 04 來做Landing page吧!

今日的發現:發現做daily ui的好處,它有非常多樣性的UI設計題目,像是昨天DAY2是設計信用卡確認頁面(關於金融)、今天Landing page(關於行銷...

鐵人賽 Modern Web DAY 3
30天UIUX自學之路 系列 第 3

技術 DAY3 信用卡付款介面製作

Daily UI第三日,先來說明前面未說明的UI/UX介紹。 使用者介面 (User Interface, UI)使用者在使用數位產品的流程中,使用到的操作介面...

鐵人賽 Modern Web DAY 11
30天UIUX自學之路 系列 第 11

技術 Day11 讓頁面連動起來 !製作Prototype

何謂Prototype?Wireframe框架稿畫完之後,我們開始用figma設計出介面,什麼是Prototype呢?Prototype是產品的原型設計,當我們...

鐵人賽 Modern Web DAY 27
30天UIUX自學之路 系列 第 27

技術 Day27 使用者流程圖Userflow與Wireframe

來到Day27了,進入倒數階段衝衝衝!今天要來研究的是Userflow(使用者流程)及Wireframe(線框圖)。 使用者流程 Userflow 將使用者在使...

鐵人賽 Modern Web DAY 5
30天UIUX自學之路 系列 第 5

技術 Day 05 來做計算機吧

今天的Dailyui主題是計算機,在思考如何畫框前,我先思考使用者情境: 我平常會使用手機計算機的時候幾乎都是在超商買東西,結帳前先計算錢是否帶的足夠,而且時常...

鐵人賽 Modern Web DAY 29
30天UIUX自學之路 系列 第 29

技術 Day29 Protoype介紹與UI/UX資源分享

Wireframe做完之後,我們要把APP介面做的更進階與真實,接著來介紹prototype、MockUp、UserTest,並且與大家分享一些關於UI/UX學...

鐵人賽 Modern Web DAY 8
30天UIUX自學之路 系列 第 8

技術 Day08 製作設定頁面

今日小觀察:想不到自己能夠堅持到第八天(汗顏),今日接續著昨天製作的個人profile,做設定頁面,觀察許多app,設定底下幾乎是使用條列式的方式做排版,並且每...

鐵人賽 Modern Web DAY 30
30天UIUX自學之路 系列 第 30

技術 Day30 參加鐵人賽讓我學到的3件事

喔耶~經過了30天的挑戰鐵人賽終於結束了,好刺激、好好玩啊!這是這次的成果發表圖!使用Photoshop製作! 今天我要跟大家分享參加IT鐵人賽我學習到的3件...

鐵人賽 Modern Web DAY 26
30天UIUX自學之路 系列 第 26

技術 Day26 學習資訊架構與建立功能規格表

耶!來到第26天!今天先思考一個日常購物情境,我記得平常要去賣場購物時,我都會先在家列好要買的清單,進去賣場就查看天花版的吊牌,吊牌上都會明確寫出商品的分類,像...

鐵人賽 Modern Web DAY 9
30天UIUX自學之路 系列 第 9

技術 Day09 製作error404畫面

今天的DailyUI題目為製作ERROR404畫面,這個畫面會出現的情境在於伺服器無法提供使用者訊息時會出現。 體驗情境:雖然這是個平常網站如果沒問題鮮少會遇到...

鐵人賽 Modern Web DAY 24
30天UIUX自學之路 系列 第 24

技術 Day24 實作前一定要先做研究分析!

今天進入DAY24,昨天規劃完我們的專案流程後,要開始進行專案的「前置作業」了。 需求分析競品分析根據網路上的資料,競品分析做一些該產品相關的產業分析,並且看市...

鐵人賽 Modern Web DAY 12
30天UIUX自學之路 系列 第 12

技術 Day12 flash Message製作

今天Daily UI的主題是Flash Message,我想做的是登入後的跳轉頁面,像是登入成功/登入失敗的介面,廢話不多說馬上開始! 首先點擊Figma上面的...

鐵人賽 Modern Web DAY 14
30天UIUX自學之路 系列 第 14

技術 Day14 私訊頁面製作

今天是Day14,題目是Direct Messaging(私訊),收到題目第一件事就是,先開始聯想生活使用情境:打開我的LINE、FB Messenger、IG...

鐵人賽 Modern Web DAY 15
30天UIUX自學之路 系列 第 15

技術 Day15 建立計時器的Dark/Light Mode 頁面

今天是Day15,也進行了比賽的一半,我決定把dailyUI14、15結合在一起做,今天的主題是「倒數計時器」,也練習明天的題目「開關」,於是我要在倒數計時器頁...

鐵人賽 Modern Web DAY 10
30天UIUX自學之路 系列 第 10

技術 Day10 來做音樂播放器!

今天的Daily UI題目是做一個Music Player,此次的作業我參考了SPOTIFY的音樂播放介面安排架構,聽音樂時除了音樂好聽很重要之外,我覺得播放跟...

鐵人賽 Modern Web DAY 18
30天UIUX自學之路 系列 第 18

技術 Day18 來做圖表吧!

今天來到了挑戰的第18天!時光匆匆,從一開始不斷增加天數,到現在好像準備要倒數進入尾聲,今天的Daily UI題目為Analytics Chart(分析圖表)。...

鐵人賽 Modern Web DAY 23
30天UIUX自學之路 系列 第 23

技術 Day23 開始吧!我的Side Project

來到了第23天,在實作之前我們必須了解前面的流程是什麼,才方便做時程的規劃與安排,然而在規劃之前,我們應該要先看清楚題目是什麼,因為數位產品的題目是很多樣化的,...

鐵人賽 Modern Web DAY 6
30天UIUX自學之路 系列 第 6

技術 Day06 設計APP ICON

今天要做的是icon,對於figma按鈕好像還有點不熟悉,找不太到ps一些功能的對應(像是相加相減圖形的按鈕),看來這是未來能夠多琢磨的,此外,對於做icon真...

鐵人賽 Modern Web DAY 20
30天UIUX自學之路 系列 第 20

技術 Day20 今天來做Location Tracker

今天的Daily UI題目為:Location Tracker,我決定來做去年F2E的題目「自行車地圖資訊整合網」,將Google地圖結合在網站上,今天學習網路...

鐵人賽 Modern Web DAY 7
30天UIUX自學之路 系列 第 7

技術 Day07 製作profile介面設計

今天終於來到挑戰的第七天了,果然堅持才是最困難的事情啊! 今天的主題式個人profile頁面,這就讓我想到每次開IG跟FB看別人的個人頁面,雖然兩者都算是社群網...

鐵人賽 Modern Web DAY 13
30天UIUX自學之路 系列 第 13

技術 Day13 製作電商購物產品頁

今天是教師節也是Daily UI第13日,除了祝老師教師節快樂外,今天要來製作「電商購物產品頁面」(E-Commerce Shop-Single Item),我...

鐵人賽 Modern Web DAY 16
30天UIUX自學之路 系列 第 16

技術 Day16 彈出式頁面製作

今天的題目是Pop-Up/Overlay,是一種彈出視窗,以我們日常生活的體驗來說,可能是在使用需要開啟GPS的APP,他就會跳出一個「非滿版」的彈出示畫面,提...

鐵人賽 Modern Web DAY 22
30天UIUX自學之路 系列 第 22

技術 Day22 開往系統性思維的道路吧!

根據網路的文章,「人類養成習慣需要21天」,這21天我每天徜徉在UI/UX的海洋裡游泳,晚上十點就習慣開啟IT鐵人發文的頁面,一路實作跟寫作到23:59分發文,...

鐵人賽 Modern Web DAY 21
30天UIUX自學之路 系列 第 21

技術 Day21 Home monitoring Dashboard介面製作

今天的Daily UI題目為 Home monitoring Dashboard,是關於智慧家電的題目,在幾年前開始流行物聯網(IOT)的相關產品,智慧家電讓我...

鐵人賽 Modern Web DAY 28
30天UIUX自學之路 系列 第 28

技術 Day28 開始做設計吧!

今天來到了第28天,經過前面的流程後,我們今天要來進行更詳細的設計流程了!昨天已經製作了低擬真線框圖(Low-fidelity),接著與大家分享設計高擬真線框圖...

鐵人賽 Modern Web DAY 25
30天UIUX自學之路 系列 第 25

技術 Day25 定義使用者故事及人物誌撰寫練習

經過昨天搜尋各家的APP,並且將使用者留言資訊整理成底下的三點,並且接著思考要如何撰寫使用者故事及人物誌。 發現問題: 系統當機:系統穩定度方面的問題。 客服...

鐵人賽 Modern Web DAY 17
30天UIUX自學之路 系列 第 17

技術 Day 17 E-mail Receipt頁面製作

今天要做的是Email Receipt,我們購買商品之後,系統會寄一封信到信箱確認訂單內容,等到我們付完款項後,就會有發票,這個Email Receipt就是我...

鐵人賽 Modern Web DAY 19
30天UIUX自學之路 系列 第 19

技術 Day19 建立LeaderBoard頁面

今天是DailyUI第19天,題目是LeaderBoard(排行榜),先前的UI我大多都做的是Mobile App的格式,現在開始要來練習畫網頁了,並且要開始思...