iT邦幫忙

ui/ux相關文章
共有 199 則文章
鐵人賽 IT 管理 DAY 10

技術 [Day10-討論階段] 終於可以開始切版!但到底要看哪一版 final_last_finalfinal?💥

(圖片來源:DRBARTPM.COM) Mockup 的具象讓人看到更多可能 當然沒那麼簡單定版⋯ 利害關係人們看了 UI Mockup 後,因為近一步推進到實...

鐵人賽 自我挑戰組 DAY 30

技術 DAY30#運用ChatGPT安排自學計畫心得

開賽前就決定好,第30天要來寫有關利用ChatGPT輔助學習的心得,畢竟現在獲取資訊的方式相較過去方便許多,學習新事物的來源也更廣泛,但是要怎麼吸收使用還是要看...

鐵人賽 自我挑戰組 DAY 29

技術 DAY29#UI/UX設計學習目錄

從開賽到現在不知不覺快要30天了,除了學習之外,複習跟統整也是一樣重要的,所以今天我想把過去這幾天寫的內容歸納一下,方便之後回頭看不用亂找 :D 那就, 理論...

鐵人賽 IT 管理 DAY 5

技術 [Day5-討論階段] 參與草稿(Wireframe)的討論,之後會更好做事!

專案啟動 這裡的啟動指的是需求進到設計,開始討論前台畫面時。設計師們在此階段會出 Wireframe 草稿(什麼是 Wireframe?請看下一篇),幫助需求對...

鐵人賽 自我挑戰組 DAY 28

技術 DAY28#設計迭代 (Design Iteration)

一個產品開發、設計往往不是一蹴而就的事,總是要經歷不斷的調整,今天就針對這部分簡單做個筆記。 那麼, 設計迭代(Design Iteration)   很早之...

鐵人賽 IT 管理 DAY 2

技術 [Day2-介紹] UI/UX 設計師是做什麼的?

UI/UX 設計師、產品設計師 近十年來,隨著產品開發的發展,和日漸增加對使用者洞察的需求,台灣各家公司的產品開發團隊中開始加入了新角色:UI/UX 設計師,有...

鐵人賽 自我挑戰組 DAY 27

技術 DAY27#實作練習-6_購物網站Prototype

根據那個階層圖表示,網頁視覺設計的Mockup完成之後,就是製作prototype的開始,也許會有沒想到的部分,但還是先嘗試看看吧! 那就, 頁面分述 首頁...

鐵人賽 自我挑戰組 DAY 26

技術 DAY26#實作練習-5_購物網站Mockup

在設計UI元件的時候,就已經開始思考網站雛型可能會長怎樣,不過我不是學設計的,要有很美觀的畫面會有點困難。 但還是,嘿嘿, Mockup   依據那時候設計元...

鐵人賽 自我挑戰組 DAY 25

技術 DAY25#實作練習-4_網站UI元件設計

原本今天的預期規劃是要完成Mockup,但對目前的我來說有點太吃力了,所以就著重在設計網站元件吧! 那麼, UI元件設計   從DAY24製作的小農網站wir...

鐵人賽 自我挑戰組 DAY 24

技術 DAY24#實作練習-3_繪製網站Wireframe

目前小農購物網站的進度,已經從user story進展到UI flow,那接下來,就開始依據前一天繪製的內容,來製作每個介面的wireframe吧! 那麼,...

鐵人賽 自我挑戰組 DAY 23

技術 DAY23#實作練習-2_操作邏輯流程 (Logic Flow)

在決定要製作一個簡易的小農購物網站後,回頭找了之前寫過的筆記,在DAY6那天,有截圖一個UI設計流程的階層圖,昨天已經完成有關User story的部分。 那就...

鐵人賽 自我挑戰組 DAY 22

技術 DAY22#實作練習-1_創建使用者故事/旅程

在歷經前面20天左右的UI/UX學習之後,接下來要準備嘗試實作練習,作為學習計畫的收尾。 那麼, 創建使用者故事   假設有一位臺灣在地的A小農,他希望透過網...

鐵人賽 自我挑戰組 DAY 21

技術 DAY21#使用者體驗要素(Elements of UX)

這陣子為了熟悉Figma的操作,在UI設計方面著墨許多,今天就來針對UX的相關知識來學習。 那麼, 使用者體驗要素   相信在學習UI/UX設計的過程,一定會...

鐵人賽 自我挑戰組 DAY 20

技術 DAY20#網頁基本結構與行動裝置設計準則

一個舒適的網頁可以讓使用者盡情瀏覽資料,所以學習一個網頁的基本結構是很重要的,而UX設計能進一步優化使用者的體驗感受。 那就, 網頁基本結構   一個網頁結構...

鐵人賽 自我挑戰組 DAY 19

技術 DAY19#Figma的網格系統 (Grid System)

好幾天之前在鐵人賽開始的DAY2,與排版相關的文章裡有提到網格系統(grid system)的概念,那今天就針對它學習吧。 來吧! 網格系統 (Grid Sy...

鐵人賽 自我挑戰組 DAY 18

技術 DAY18#響應式網頁設計與行動優先設計

UI設計的部分學習了好幾天,也大改特改過ChatGPT的規劃。那今天呢,就來學習在規劃網站的時候應該要有的幾個概念。 那麼, 響應式網頁設計(Responsi...

鐵人賽 自我挑戰組 DAY 17

技術 DAY17#Prototype常見互動製作

透過Prototype的呈現可以讓團隊清楚了解版面設計與呈現方式,但要怎麼讓效果照預期的呈現,就需要應用學過的各種功能了,所以今天就來紀錄幾個常見的互動方式。...

鐵人賽 自我挑戰組 DAY 16

技術 DAY16#將表單成果製作成Portotype

還記得我在DAY14那天用Figma設計了UI元件與表單,既然都有一個比較完整的設計稿了,不如直接拿它練習製作成Portotype吧! 開練開練, Proto...

鐵人賽 自我挑戰組 DAY 15

技術 DAY15#Figma的Portotype介紹

一般設計出來的線框稿或平面稿是不能互動的,這時候就需要製作可以模擬操作的Prototype(原型),來確認按鈕連結與預期效果。 那就, 操作總覽   切換到P...

鐵人賽 自我挑戰組 DAY 14

技術 DAY14#設計UI元件與製作表單

前面幾天學了很多有關於Figma的功能,今天就來嘗試看看設計UI元件,然後再製作表單試試看吧! 那就, 設計UI元件   為了練習我這邊先設計可能會用到的元件...

鐵人賽 自我挑戰組 DAY 13

技術 DAY13#Component的其他屬性介紹

Component的property(屬性)除了Variant,還有其他三種,分別是Boolean、Instance swap和Text,將這些功能統一彙整在這...

鐵人賽 自我挑戰組 DAY 12

技術 DAY12#Component + Variant 操作 - Input

原以為需要再找資料來學習input的variant,沒想到直接打開Figma重新做一遍,欸?可以了耶?完全不知道昨天怎麼了。 但還是紀錄一下吧, Compon...

鐵人賽 自我挑戰組 DAY 11

技術 DAY11#Component + Variant 操作 - Button

前一天關於Component的功能認識中有提到,透過「/」命名方式能將物件分類,並快速置換Instance的組成。後來,在2020年底,Figma推出一個新功能...

鐵人賽 自我挑戰組 DAY 10

技術 DAY10#Figma的Component功能認識

講完了Auto layout能做到的幾個功能,接下來換針對Figma的Component來學習,希望之後要實作的話,回來都能看得懂 :D 那就, Compon...

鐵人賽 自我挑戰組 DAY 9

技術 DAY9#Figma的Auto layout功能認識

在之前第一次製作wireframe的時候有說到一個功能,叫做Auto layout,非常非常容易在使用Figma的過程會使用到。 那就, Auto layou...

鐵人賽 自我挑戰組 DAY 8

技術 DAY8#Figma的基礎工具操作

ChatGPT的安排是,實際去製作一個簡單的wireframe之後,接著才是學習一些Figma的常用工具,有點像是體驗完後有個初步印象,再深入學習的感覺。 那就...

鐵人賽 自我挑戰組 DAY 7

技術 DAY7#使用Figma製作wireframe

上一篇講述有關UI設計流程與wireframe的概念,接下來可以開始學習接觸相關UI設計軟體,目前主流軟體有:Sketch、Adobe XD、Figma,關於這...

鐵人賽 自我挑戰組 DAY 6

技術 DAY6#Wireframe的學習

前幾天,ChatGPT主要安排了與設計基礎和使用者相關的學習內容。接下來,我將展開與wireframe相關的學習,相信搜尋過UI/UX設計的人一定會接觸到這部分...

鐵人賽 自我挑戰組 DAY 5

技術 DAY5#How to 設計?

上一篇針對使用者的部分,分享了如何研究他們的方法,接下來回到UI和UX設計本身,身為一個什麼都不懂的人,又要從哪裡開始構思設計呢? 那就, 設計思考   在搜...

鐵人賽 自我挑戰組 DAY 4

技術 DAY4#使用者研究與使用者旅程

我們在上一篇記錄了有關於UI和UX的分別,今天筆記的著重點會比較偏向UX的部分,也就是學習有關如何研究我們的「使用者」。 老樣子, 使用者研究   產品最終的...