iT邦幫忙

ui相關文章
共有 230 則文章
鐵人賽 Modern Web DAY 10

技術 Day10. User Story 與 UX / UI 設計流程

當概念驗証過有價值且方向大致正確後,就會開始撰寫 User Story,然後進入正式的 UX/UI 設計流程。 什麼是 User Story User Sto...

鐵人賽 自我挑戰組 DAY 14
一起用python寫UI 系列 第 14

技術 Day14 用python寫UI-聊聊Scale

今天邁入第14天了,耶~~~今天的內容我也是很喜歡,尤其是自己調整背景顏色的實作,真的覺得非常有趣~ ♠♣今天的文章大綱♥♦ Scale常用參數 用Frame...

鐵人賽 自我挑戰組 DAY 13
一起用python寫UI 系列 第 13

技術 Day13 用python寫UI-聊聊Frame

今天學校放假,但是有老師說要上課,所以下午還是沒有放到假(T_T),但其實有放假跟沒放假好像沒什麼差別,反正都是遠距上課(¬‿¬),不過只遠距到這禮拜啦,下禮拜...

鐵人賽 自我挑戰組 DAY 12
一起用python寫UI 系列 第 12

技術 Day12 用python寫UI-聊聊選項鈕與核取方塊checkbox

今天要講到我最喜歡的部分,選項鈕與核取方塊checkbox,覺得做出選項鈕去選很好玩,很像在做測驗。 ♠♣今天的文章大綱♥♦ 選項鈕常用參數 實作選項鈕...

鐵人賽 Modern Web DAY 11

技術 【設計+切版30天實作】|Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢?

設計大綱 在上一篇設計「Reviews」這個區塊時,有提到切版時可能會有「切不出來」的情況發生,所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是!...

鐵人賽 Modern Web DAY 10

技術 【設計+切版30天實作】|Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊

設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗,另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網,目前好像沒辦法切出超出視...

鐵人賽 Modern Web DAY 9

技術 【設計+切版30天實作】|Day9 - 把Bootstrap預設的Carousel新增變化

設計大綱 一個平台要成功,當然少不了圖片/照片的介紹(很愛看圖的懶人XD),所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。Bootstrap...

鐵人賽 Modern Web DAY 8

技術 【設計+切版30天實作】|Day8 - 看起來簡單但不單調的steps設計

設計大綱 稱讚完平台的優點後,接下來的區塊就要向使用者介紹使用的流程,但因為現代人都很懶得看很冗長的「說明書」,所以使用流程會採用簡約的方式去做介紹。 因為上面...

鐵人賽 Modern Web DAY 7

技術 【設計+切版30天實作】|Day7 - 設計出無外框式的三欄式pros區塊

設計大綱 上一個區塊賣完小廣告後,今天馬上就給它塞個平台的優點進來,這樣可以讓使用者有「感同身受」的感覺,同時也能讓他們覺得「哇!好像真的很棒唷!」。 「優點」...

鐵人賽 Modern Web DAY 6

技術 Day 6 - 原型 (5): 帖子頁的元件組合

前言 利用剛設計好的帖子頁元件, 組合成帖子頁。 元件組合 建立一個屬於帖子頁的frame 先在Pages/Blog中, 按一下主頁的frame, 再按快捷...

鐵人賽 Modern Web DAY 6

技術 【設計+切版30天實作】|Day6 - 設計出背景上又有背景的吸睛小廣告

設計大綱 上一個區塊設計了使用者的「痛點」,因此接下來的區塊想要做一個「平台的小廣告」,讓使用者了解到我們這個平台可以幫助他們解決問題。由於上一個區塊並不是滿版...

鐵人賽 Modern Web DAY 5

技術 【設計+切版30天實作】|Day5 - 做出3欄式「痛點」設計

設計大綱 早安!今天來設計痛點,這邊我想要做三欄式,列出三個他們目前主要可能會遇到的問題,再加上圖片,讓使用者有感到身受的感覺。另外,因為Grid system...

鐵人賽 Modern Web DAY 2

技術 Day 02 - 行前說明 — 網頁微切版架構 和 UI 元件

作為正式開始的第一篇要來講的是很基礎的網頁切版和怎麼去看網頁中有哪些元件,會分兩部分: 網頁微切版架構:讓還不太熟網頁的人理解一般網頁 UI 的架構大概會怎麼...

鐵人賽 Mobile Development DAY 5

技術 Dungeon Mizarka 005

UI版面配置 幾近年的FPDC遊戲,單角色的控制多以First Preson Shooter玩法為主要類型,而FPS的遊戲,手裡拿裝備,如劍、盾,是很直覺的呈現...

鐵人賽 Modern Web DAY 5

技術 Day 5 - 原型 (4): 帖子頁元件

前言 今天要完成帖子頁的元件設計。 帖子頁的元件 帖子 基本上可以用回主頁的帖子元件, 這裡只是少了READ MORE, 還有把內容全部顯示出來。 回覆...

鐵人賽 Modern Web DAY 4

技術 【設計+切版30天實作】|Day 4 - 參考Bootstrap畫出理想的header(下集)

設計大綱 上一集設計完header的滿版背景後,今天會設計Navigation bar。Navbar在網頁來說也是蠻重要的一個元件,通常會有LOGO、常用按鈕或...

鐵人賽 Modern Web DAY 1

技術 Day1. 用戶體驗設計三大類職能

Hi 大家好,我是Rson,一位在科技業的互動介面設計師。在過去的專案及產品經歷中,累積了一些心得、檢討與領域知識,希望透過IT鐵人賽這個平台的寫作,將這幾年...

鐵人賽 自我挑戰組 DAY 11
一起用python寫UI 系列 第 11

技術 Day11 用python寫UI-聊聊變數類別

今天要講的是tkinter的變數類別,tkinter 的控制變數可以在某些控見執行的時候,更改內容,有四種控制變數的類別,分別為:Boolean() 布林值變...

鐵人賽 自我挑戰組 DAY 10
一起用python寫UI 系列 第 10

技術 Day10 用python寫UI-聊聊文字方塊Entry

耶~~~終於邁入第十天,完成了三分之一,今天要來講文字方塊,普遍常會看到的用法會在輸入號密碼的時候,但其實也可以用在很多地方,像是當成算運算式的工具,今天就會舉...

鐵人賽 自我挑戰組 DAY 9
一起用python寫UI 系列 第 9

技術 Day9 用python寫UI-聊聊Message & Messagebox

在處理一些短訊息的時候可以用 Message 的功能,這個功能跟 Label 有點類似,不一樣的地方是 Message 會自動分行;在python Tkinte...

鐵人賽 自我挑戰組 DAY 8
一起用python寫UI 系列 第 8

技術 Day8 用python寫UI-聊聊功能鈕Button

Button()方法有在前兩天的時候提了一些,今天會更詳細的介紹Buton()的使用方法(o゜▽゜)o☆ 語法格式:Button ( master, optio...

鐵人賽 自我挑戰組 DAY 5
一起用python寫UI 系列 第 5

技術 Day5 用python寫UI-聊聊視窗控件配置管理員-place方法

今天要介紹place()方法,這個方法用到的機會比較少,將父容器左上角定為原點,直接指定控件要放的地方,所以缺點就是如果有一個控件要改位置,其他也必須一起改,因...

鐵人賽 自我挑戰組 DAY 4
一起用python寫UI 系列 第 4

技術 Day4 用python寫UI-聊聊視窗控件配置管理員-grid方法

今天要介紹的是grid()方法,這個方法就像表格式排版,控件是依據指定的索引位置, 放入表格中,很適合用來處理複雜的頁面,一個網格row 跟 column 只能...

鐵人賽 自我挑戰組 DAY 3
一起用python寫UI 系列 第 3

技術 Day3 用python寫UI-聊聊視窗控件配置管理員-pack方法

設計UI總共有三種方法去定位個元件在視窗內的位置,分別是pack方法、grid方法跟place方法,我會分成三篇文章來跟大家做介紹,今天就先來聊聊pack方法。...

鐵人賽 自我挑戰組 DAY 7
一起用python寫UI 系列 第 7

技術 Day7 用python寫UI-聊聊標籤Label方法(二)

今天要主要會介紹幾個 widget 的共通方法,後面的部分會介紹如何在介面上加上圖片還有其他幾個實用的方法~ ♠♣今天的文章大綱♥♦ widget的共通方法...

鐵人賽 Modern Web DAY 3

技術 【設計+切版30天實作】|Day3 - 參考Bootstrap畫出理想的header(上集)

設計大綱 今天來設計Landing page的header。這次想要做的是一個滿版的header,在header裡面會有標題、內容、以及input(提供使用者填...

鐵人賽 Modern Web DAY 2

技術 【設計+切版30天實作】|Day2 - 開始設計前的環境建立 (Adobe XD)

簡介 今天會講一下在設計前要怎麼建立環境,畢竟在設計前還是要先備好畫布嘛,但畫布的尺寸要怎麼挑選呢?所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap...

鐵人賽 Mobile Development DAY 5

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 05】

大家好,我是YIYI,今天我要來介紹Whimsical。 關於Whimsical 在介紹如何使用前,先來說一下Whimsical是甚麼~Whimsical是一個...

鐵人賽 Modern Web DAY 1

技術 【設計+切版30天實作】|Day1 - 開賽宣言

前言 在開賽前,先來做個小小的自我介紹好了!目前是火箭隊的網頁設計組,加入火箭隊前有上過六角學院的UI課程(上課前完全是0基礎 ><!!!),但卻從...

鐵人賽 Mobile Development DAY 4

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 04】

大家好,我是YIYI,今天我要來和大家聊聊為什麼需要規格表簡介架構圖。 為什麼需要規格表? 規格表就像是在讀書時所制定的讀書計畫表,也就是規劃未來要做的事情。有...