iT邦幫忙

ui/ux相關文章
共有 165 則文章

技術 新手指南:快速掌握UI/UX設計及實用工具推薦

在當今這個數位化的時代,UI/UX設計的重要性日益凸顯,它不僅關乎產品的視覺呈現,更影響著用戶體驗的質量。因此,許多設計新手都積極尋找能快速上手並提升設計效率的...

鐵人賽 SideProject30 DAY 19

技術 營養師不開菜單的第十九天 - Next.js 實作 - Link In Bio Tool 畫面設計與整體規劃

前言 在前15篇章節中,已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品,我...

鐵人賽 自我挑戰組 DAY 5

技術 【Day5】競品分析 — 作品集首頁

來到第五天,我先針對昨日分享會,近一步迭代了 UserStoryMapping 的概念,設立了三種指標,分別為: 網頁的易閱性:作品集網頁的基本盤,易閱性將綜...

鐵人賽 SideProject30 DAY 4

技術 Wireframe 製作

一個全面的設計流程:從初步設計到最終階段 草稿和低保真(Low-Fidelity)線框圖:初步構思並繪製基本界面。 回顧和反饋:收集意見並進行調整。 高...

鐵人賽 Modern Web DAY 2

技術 #01 網頁的基本名詞:UI/UX?切版&切圖?前端&後端?靜態&動態?RWD or Mobile First?

↓ 今日學習重點 ↓ 理解網頁設計師、工程師常用的詞彙是什麼? 網頁的基本名詞 UI/UX? UI/UX 分別代表使用者介面設計(User Inte...

鐵人賽 Modern Web DAY 2

技術 【Day02】網頁的基礎設計理論

所謂:「知己知彼,百戰不殆。」,在設計一個網頁之前,先充分了解其外部的各項特性,才能避免在實作時因千萬頭緒使您一時無從下手,而陷入窘境。 因此,本篇將為您介紹在...

鐵人賽 Modern Web DAY 30

技術 Day 30 【職涯之路】HELLO , 業界!

歐耶~我們終於來到鐵人賽的最後一篇了!經歷了前面的生活觀察、自我提升的成長之路、職場的溝通眉角~如果你正在考慮踏上UX這條路,那麼非常歡迎你! 今天我們就來聊聊...

鐵人賽 Mobile Development DAY 29

技術 Day 29 - Tabs ( Design )

前言 不知不覺鐵人賽也接近尾聲,要講的最後一個元件是 Tab,也是一種導航切換畫面的元件,圍繞在同一主題上。在大多數的 App 都能看到,包裹著相關性高或相同應...

鐵人賽 Modern Web DAY 29

技術 Day 29 【職涯之路】如何與工程師協作?

在某公司的一場溝通訓練課程中, 一位企劃起身表示他在工作上遇到的問題,他大聲的說:「希望工程師可以講人話!不要每次都講那些我聽不懂的東西。」 現在想想,我...

鐵人賽 Mobile Development DAY 27

技術 Day 27 - Navigation drawer (Design)

前言 是一個作為導航工具的組件,能讓用戶隨時展開或收起,與 Bottom Navigation 相同都是作為跳轉畫面的元件,但應用上有些不同,上幾篇我有提到 B...

鐵人賽 Modern Web DAY 27

技術 Day 27 【職涯之路】開始找工作可以嗎?我還缺少什麼呢?

先說結論:可以。XDDD 這系列文章我不斷強調的核心理念就是「先做再說」,所以你問我可不可以...我都會跟你說「可以」。 不過我完全明白那種「好像還沒準備好,到...

鐵人賽 Modern Web DAY 26

技術 Day 26 【職涯之路】如何開始累積作品?

許多想轉職的人都會問:我應該怎麼開始累積作品?我怎麼知道我的作品好不好?業界看不看? 一樣回到我這系列文章一開始說的:先做就對了。不過,問了這個問題的你,或許...

鐵人賽 Mobile Development DAY 25

技術 Day 25 - Bottom Navigation ( Design )

前言 Bottom Navigation 通常作為主畫面的元件之一,位於畫面底部,能讓用戶操作並進行各個畫面的導航,是個以操作體驗與畫面跳轉為重的組件 Bo...

鐵人賽 Modern Web DAY 24

技術 Day 24 【當你活成那個樣子,你就已在前進】

今天是第二十四天,我們前面討論了觀察、輸入、輸出,鐵人賽也即將進入最後尾聲,接下來的章節,會開始與大家聊聊職涯! 很多人詢問要怎麼轉職到自己想走的道路上,我懂...

鐵人賽 Mobile Development DAY 23

技術 Day 23 - Bottom Sheet ( Design )

前言 Bottom Sheet 算是比較近期 App 非常熱門的應用設計,從底部彈跳出視窗。通常會搭配在 more action,提供用戶與當前情境畫面的細部操...

鐵人賽 Modern Web DAY 23

技術 Day 23 【嘗試開始】人物誌這黨事

我在前面的文章「Day 18 【習慣培養】輸入 - 聽、看」中提過,看動漫也是一種觀察的方法!通常動漫角色的人物刻劃都很鮮明生動,你可以從角色的時空背景、經歷、...

鐵人賽 Modern Web DAY 22

技術 Day 22 【嘗試開始】用爆便利貼!

我曾經在一個專案中想導入便利貼分類法時被一個行銷領域的同事說:「天啊!好不環保!」(笑) 想想確實,用了一堆紙都只寫幾個字,真的是蠻浪費的!幸好現在有線上白板了...

鐵人賽 Mobile Development DAY 21

技術 Day 21 - Cards ( Design )

前言 Card 的設計,已經廣泛出現在我們的應用程式中,例如 ig、facebook 等等,是一種元件配置的設計方式,並非只是單純一個元件 Cards - D...

鐵人賽 Modern Web DAY 21

技術 Day 21 【嘗試開始】市面工具也太多!到底怎麼選?

某一次我到日本去自助旅行的時候,因為不會日文,英文也沒好到哪裡去,而且對方是漁民老太太,他也不懂英文...但我想要找某一種食物,所以我就...用畫的。結果對方還...

鐵人賽 Mobile Development DAY 19

技術 Day 19 - Dialogs ( Design )

前言 Dialog 比起上一篇提到的 Snackbar,更為顯著且出現時會阻擋用戶操作 Dialogs - Design 分為下面幾個段落來介紹 Usag...

鐵人賽 Modern Web DAY 19

技術 Day 19 【習慣培養】輸出 - 說、寫

了解了「輸入」的各種管道,今天我們要來聊聊「輸出」!通常,很多人會遇到的問題都是卡在輸出,這邊會有一個心理上比較高的檻,但跨過這段,你就真的可以學會了! |你...

鐵人賽 Mobile Development DAY 18

技術 Day 18 - SnackBars ( Design & Implementation)

前言 Snackbar,是很常見的應用通知設計,位於應用程式的底部,提供用戶目前操作的任何相關訊息。由於 Snackbar 實作的篇幅較少,就一起講解 大綱...

鐵人賽 Modern Web DAY 18

技術 Day 18 【習慣培養】輸入 - 聽、看

既然上一篇講到我們需要觀察、輸入、輸出,前面也帶大家一起觀察生活中的細節將近半個月,那麼今天就來分享有哪些管道可以讓我們「輸入」吧! |Youtube 頻道...

鐵人賽 Modern Web DAY 17

技術 Day 17 【觀察了一堆...然後呢?】

鐵人賽終於來到一半了...太感動~前面我們觀察了15天生活裡的日常細節,算一算也半個月了呢!(用上班日的話超過半個月XD這樣算起來是不是比較開心!!) 今天想...

鐵人賽 Mobile Development DAY 16

技術 Day 16 - Progress indicators ( Design )

前言 用來通知用戶正在進行的進程狀態,例如 加載應用程序、提交表單或保存更新應用程序的狀態並指示可用的操作,例如用戶是否可以離開當前屏幕。在進行異步或初始化時常...

鐵人賽 Modern Web DAY 16

技術 Day 16 【生活觀察】使用者習慣性

這系列文章,一直不斷重複提到的概念,就是 使用者的行為與判斷,通常來自過去的使用經驗 。 理解這樣的概念之後,身為UX相關從業人員,就可以知道「我,並不代表所有...

鐵人賽 Modern Web DAY 15

技術 Day 15 【生活觀察】吃個早餐也能淚牛滿面

今天要來跟大家分享一個「 點早餐,從開始到放棄 」的故事。 某天早上,我與朋友路過一家沒有吃過的早餐店,看裡面沒什麼人,所以就拿了點餐單開始選要吃的早餐。 沒...

鐵人賽 Mobile Development DAY 15

技術 Day 15 - Divider ( Design & Implementation )

前言 Divider 是能將要在 UI 呈現的重點內容,更加清晰且顯眼地表達。在我們想呈現列表形式的資料時,透過 Divider 的劃分,讓用戶能明顯辨識之間的...