iT邦幫忙

ui相關文章
共有 230 則文章
2 Like 0 留言 1572 瀏覽
鐵人賽 Modern Web DAY 26
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 26 篇

技術 【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

前面完成了「Carousel」區塊，今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight：Regular F...

烙詩 ‧ 2021-10-10 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 1 留言 4243 瀏覽
鐵人賽 自我挑戰組 DAY 24
一起用python寫UI 系列 第 24 篇

技術 Day24 用python寫UI-聊聊Text(一)

今天放假好開心，睡超飽的ヾ(^▽^)))， 但是還是要起床發文啦~Text顧名思義就是可以輸入文字，鍵一個框框，就可以把文字輸入到裡面了。 ♠♣今天的文章大綱♥...

Firenze ‧ 2021-10-09
0 Like 0 留言 998 瀏覽
鐵人賽 Mobile Development DAY 27
FPS dungeon crawler game devlog 系列 第 27 篇

技術 Dungeon Mizarka 027

持續調整UI。今天加了不少動態的呈現效果，利用Tween的方法將原先靜態的UI調整後，看起來不像之前這麼死板。但呈現上若不是用影片，圖片是很難看出它動態呈現的細...

ApprenticeGC ‧ 2021-10-09
1 Like 0 留言 4229 瀏覽
鐵人賽 Modern Web DAY 25
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 25 篇

技術 【設計+切版30天實作】｜Day25 - Carousel區塊 - 把Carousel Caption和Indicators改成心目中理想的模樣

前面完成了「Steps」區塊，今天來完成「Carousel」的區塊。 數據收集 margin-top : 96px Carousel底下Backg...

烙詩 ‧ 2021-10-09 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1247 瀏覽
鐵人賽 Modern Web DAY 24
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 24 篇

技術 【設計+切版30天實作】｜Day24 - Steps區塊 - 如何做出漸層背景？

前面完成了「Pros」區塊，今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight：Medium Font-size：24p...

烙詩 ‧ 2021-10-08 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 2533 瀏覽
鐵人賽 自我挑戰組 DAY 23
一起用python寫UI 系列 第 23 篇

技術 Day23 用python寫UI-聊聊Menu

第一次壓線發文耶，今天真的有點忙，到現在才發文。Menu就是功能表的表單，通常都會在介面的最上面，是很常見的工具喔~ ♠♣今天的文章大綱♥♦ Menu基本參數...

Firenze ‧ 2021-10-08
0 Like 0 留言 798 瀏覽
鐵人賽 Mobile Development DAY 25
FPS dungeon crawler game devlog 系列 第 25 篇

技術 Dungeon Mizarka 025

今天難得有足夠的時間可在Dungeon的專案進行調整，本來是想將時間花在整理行為的部份，但一直覺得目前的UI需要先行進入到下個階段，最後還是把時間投入到UI的修...

ApprenticeGC ‧ 2021-10-07
1 Like 0 留言 1149 瀏覽
鐵人賽 Modern Web DAY 23
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 23 篇

技術 【設計+切版30天實作】｜Day23 - Pros區塊 - 看似無邊框的三欄式卡片，到底要對準哪條欄位？

前面完成了小廣告區塊，今天來完成「平台好處 - pros」的區塊。 數據收集 card標題的樣式 Font-weight：Bold Font-siz...

烙詩 ‧ 2021-10-07 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 3760 瀏覽
鐵人賽 自我挑戰組 DAY 22
一起用python寫UI 系列 第 22 篇

技術 Day22 用python寫UI-聊聊Progressbar

我覺得Progressbar超可愛，這個就很適合用在要做測驗之類的介面上。 ♠♣今天的文章大綱♥♦ Progressbar常用參數 動畫設計 Progress...

Firenze ‧ 2021-10-07
2 Like 0 留言 1301 瀏覽
鐵人賽 Modern Web DAY 22
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 22 篇

技術 【設計+切版30天實作】｜Day22 - 設計小廣告 - 背景上又有背景到底怎麼切！

前面完成了「PainPoints」，今天來完成這一塊「小廣告」的區塊。 數據收集 Content標題的樣式 Font-weight：Bold Fon...

烙詩 ‧ 2021-10-06 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 5053 瀏覽
鐵人賽 自我挑戰組 DAY 21
一起用python寫UI 系列 第 21 篇

技術 Day21 用python寫UI-聊聊PanedWindow & Notebook

PanedWindow有點像frame，但裡面可以放很多子控建，Notebook就是有很多分頁的感覺，可以切換頁面。 ♠♣今天的文章大綱♥♦ PanedWin...

Firenze ‧ 2021-10-06
1 Like 0 留言 1151 瀏覽
鐵人賽 Modern Web DAY 21
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 21 篇

技術 【設計+切版30天實作】｜Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱 昨天完成header的部分了，所以接下來就會進入main的部分，今天要完成的是「PainPoints」的區塊。（如下圖） 數據收集 標題的樣式 F...

烙詩 ‧ 2021-10-05 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
0 Like 0 留言 5702 瀏覽
鐵人賽 Modern Web DAY 19
網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法 系列 第 19 篇

技術 Day 19. UI 設計軟體- Figma 簡介與優勢

前二篇解釋了 GUI Design 階段的重點，也提到此時花費設計師的工時相當可觀。功欲善其事，必先利其器，挑選一個稱手、效率高的設計軟體就很重要。目前 GUI...

Rson ‧ 2021-10-04
1 Like 0 留言 5853 瀏覽
鐵人賽 自我挑戰組 DAY 20
一起用python寫UI 系列 第 20 篇

技術 Day20 用python寫UI-聊聊Combobox

Combobox就是組合框，是tkinter.ttk的空件，所以要先import才可以用。他跟openmenu很像，也是一種下拉式選單。 ♠♣今天的文章大綱♥♦...

Firenze ‧ 2021-10-05
1 Like 0 留言 2602 瀏覽
鐵人賽 自我挑戰組 DAY 19
一起用python寫UI 系列 第 19 篇

技術 Day19 用python寫UI-聊聊OptionMenu

OptionMenu就是下拉式選單的概念，可以有不同的設定方法，可以設成有預設選項的，也可以獲得選好的內容顯示在python shell上面。 ♠♣今天的文章大...

Firenze ‧ 2021-10-04
1 Like 0 留言 8202 瀏覽
鐵人賽 Modern Web DAY 20
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 20 篇

技術 【設計+切版30天實作】｜Day20 - Navigation bar - 打破預設的navbar排版

大綱 昨天完成了header的下半部分，今天的任務就要來完成header的上半部分 —— Navigation bar！廢話不多說，馬上開始吧！ 數據收集 n...

烙詩 ‧ 2021-10-04 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
0 Like 0 留言 1256 瀏覽
鐵人賽 Modern Web DAY 17
30天打造品牌特色電商網站 系列 第 19 篇

技術 30天打造品牌特色電商網站 Day.19 文字的排版

字距、行距、與其他物件的距離，調整適當能讓使用者有舒服的體驗，而良好的排版能引導使用者優先接收整個畫面的重要資訊。 字與字的距離 字距：通常不太調動，不過想...

atain880625 ‧ 2021-10-03
1 Like 0 留言 1622 瀏覽
鐵人賽 Modern Web DAY 19
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 19 篇

技術 【設計+切版30天實作】｜Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader？

大綱 前半段都在設計，今天開始就要進行切版了！(緊張!!!)那我們header的部分分成heroheader和navbar，今天的任務是切「Heroheader...

烙詩 ‧ 2021-10-03 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 3417 瀏覽
鐵人賽 自我挑戰組 DAY 18
一起用python寫UI 系列 第 18 篇

技術 Day18 用python寫UI-聊聊Listbox與事件綁定

今天延續昨天的Listbox做一些更進階的操作，加入刪除、項目的排序和拖曳項目，這些都是平常常會用到的。 ♠♣今天的文章大綱♥♦ 加入和刪除 項目排序 拖曳項...

Firenze ‧ 2021-10-03
0 Like 0 留言 3135 瀏覽
鐵人賽 Modern Web DAY 17
網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法 系列 第 17 篇

技術 Day 17. UX/UI 設計流程之五：GUI Design (上)

規劃設計完 Wireflow 產出關鍵藍圖規格稿之後，基本上已經完成了整個產品的骨架。接著就是要根據 UX Persona 的輸入，以此目標族群會喜愛的視覺風格...

Rson ‧ 2021-10-02
1 Like 0 留言 4145 瀏覽
鐵人賽 自我挑戰組 DAY 17
一起用python寫UI 系列 第 17 篇

技術 Day17 用python寫UI-聊聊Listbox基本操作

Listbox表單是可以顯示很多選項的空件，一次可以執行一個或多個。 語法:Listbox( master, option, ... ) ♠♣今天的文章大綱♥♦...

Firenze ‧ 2021-10-02
2 Like 0 留言 9149 瀏覽
鐵人賽 自我挑戰組 DAY 16
一起用python寫UI 系列 第 16 篇

技術 Day16 用python寫UI-聊聊Binding events

綁定事件就是可以回傳在執行時的動作位置，雖然說有很多的不同事件可以使用，但是要注意，當滑鼠與鍵盤同時綁定時會出現小陷阱，下面會有實例跟大家說明要怎麼解決這個問題...

Firenze ‧ 2021-10-01
1 Like 0 留言 3614 瀏覽
鐵人賽 Modern Web DAY 18
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 18 篇

技術 【設計+切版30天實作】｜Day18 - Bootstrap的客製化

大綱 上一篇把環境都建立完成後，今天要來做客製化，但在這之前，先來說明一下為什麼要客製化，以及為什麼會把客製化放在前面。 由於這一次的挑戰是以設計師角度去做，因...

烙詩 ‧ 2021-10-02 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1882 瀏覽
鐵人賽 Modern Web DAY 17
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 17 篇

技術 【設計+切版30天實作】｜Day17 - Bootstrap的環境建立

大綱 要切版前當然是要先來建立環境，所以我們下一篇再來做客製化！那環境要怎麼建立？其實還蠻簡單的！只要跟著下面的步驟去做，很快就會上手啦！不過先說明一下，這篇文...

烙詩 ‧ 2021-10-01 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1589 瀏覽
鐵人賽 Modern Web DAY 16
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 16 篇

技術 【設計+切版30天實作】｜Day16 - 進入切版前的前置作業之列出設計稿上的數據

大綱 前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷...

烙詩 ‧ 2021-09-30 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 2869 瀏覽
鐵人賽 自我挑戰組 DAY 15
一起用python寫UI 系列 第 15 篇

技術 Day15 用python寫UI-聊聊Spinbox

第15天~~~完成了一半的鐵人賽，之後也要繼續加油!今天要講的內容是Spinbox，後面有幾個實例的練習，可以一起做做看喔! ♠♣今天的文章大綱♥♦ Spin...

Firenze ‧ 2021-09-30
1 Like 0 留言 1353 瀏覽
鐵人賽 Modern Web DAY 15
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 15 篇

技術 【設計+切版30天實作】｜Day15 - 來個完美的簡約風Footer結束這回合

設計大綱 Landing Page的主要色都偏深色，另外CTA也有用主要色作為背景顏色了，所以這邊的Footer就決定用淺色的Secondary-color來作...

烙詩 ‧ 2021-09-29 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1173 瀏覽
鐵人賽 Modern Web DAY 14
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 14 篇

技術 【設計+切版30天實作】｜Day14 - 簡約CTA的用處及設計的注意事項

設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然，另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...

烙詩 ‧ 2021-09-28 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1196 瀏覽
鐵人賽 Modern Web DAY 13
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 13 篇

技術 【設計+切版30天實作】｜Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形＋背景顏色＋陰影。今天想來做點不一樣的，所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...

烙詩 ‧ 2021-09-27 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1148 瀏覽
鐵人賽 Modern Web DAY 12
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 12 篇

技術 【設計+切版30天實作】｜Day12 - 怎麼讓使用者選中您想要他選的Plans設計？

設計大綱 今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用...

烙詩 ‧ 2021-09-26 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19793 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙