Text 用於顯示文字，若是要讓使用者輸入文字呢？這時就會需要表單元件 TextField。在看完跟 Text 相關的元件後，我們接著看 TextField。今...
前言 在開賽前，先來做個小小的自我介紹好了！目前是火箭隊的網頁設計組，加入火箭隊前有上過六角學院的UI課程（上課前完全是0基礎 ><!!!），但卻從...
大綱 前半段都在設計，今天開始就要進行切版了！(緊張!!!)那我們header的部分分成heroheader和navbar，今天的任務是切「Heroheader...
Navigation 人們通常會忽略navigation，直到這個navigation不符合預期為止，所以要好好設計啊 有三種navigation 結構：...
前面完成了「Carousel」區塊，今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight：Regular F...
大綱 前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷...
https://codepen.io/hereiscasio/pen/dgKWEX?editors=1010 Used UI Component ( #1 )...
https://codepen.io/hereiscasio/full/XWryZQO Used UI Component ( #3 ) #1 Tooltip...
雖然 Jetpack Compose 可以從 Android 近乎無痛的用於 Desktop 開發，但實務上 Mobile 平台和 Desktop 環境還是有許...
📌 前言 在開發 ERP 系統時，選擇介面形式（Windows、Web、Mobile App）並不是單純的技術選擇，而應從實際使用情境與企業流程的複雜度出發，做...
上一篇我們大概提到Sketch跟網頁切版的Html、css概念很像，今天我們則是先來看看Symbol的部分。 Symbol特色 1：替換 替換這個功能，就是讓我...
在實作 Desktop App 時，有一種很特別的 UI 是 Tray，也就是在功能列上的小圖示。許多 App 會把一些小工具收在 Tray 裡，方便使用者可以...
https://codepen.io/hereiscasio/pen/dybrvBV Used UI Component ( #0 ) UI 圖來源見此 Di...
今天依舊完美的脫稿演出 一個禮拜就這樣過了一大半，我相信一定是我的懶惰症候群又發作了(´・ω・)つ旦不知不覺就漸漸到了晚上，練完舞，回到家就已經十點了哈哈哈經歷...
https://codepen.io/hereiscasio/pen/yRxWpb?editors=1010 Used UI Component ( #1 )...
Sketch應該是這三個軟體(Figmas、Adobe XD)中最成熟的設計工具了，但是只有mac系統可以使用的sktech，到底是怎麼持續處於領先的王者地位呢...
https://codepen.io/hereiscasio/pen/mzvMdy?editors=1010 Used UI Component ( #3 )...
https://codepen.io/hereiscasio/pen/dybLbVd?editors=1010 Used UI Component ( #3...
指南閱讀聲明：此系列文章非教學指南文，無從0開始可以學會的加持作用。 對於UI設計師而言，最重要的工具不外乎就是UI設計軟體了。但是因為有太多個UI設計軟體了，...
https://codepen.io/hereiscasio/pen/eYOomxO?editors=1010 Used UI Component ( #1...
在看完 UI 外層的 Window 及 MenuBar 後，接下來持續往內看其他元件。在刻 UI 時，最常需要處理的應該就是「文字」吧？今天的耕讀筆記就以 Te...
https://codepen.io/hereiscasio/pen/BaBMYEj Used UI Component ( #1 ) #1 Buttons:...
https://codepen.io/hereiscasio/pen/mzKZzx?editors=1000 Used UI Component ( #2 )...
https://codepen.io/hereiscasio/pen/eYYOYVJ?editors=1010 跟之前做的 Google Alert 一樣，今...
在刻 UI 時，最常使用的元件除了文字以外，也很常用「圖片」！今天的耕讀筆記就以 Image 元件為主軸，研究一下其用法及相關設定。 Image 元件 在 UI...
前面完成了「CTA」區塊，今天來完成「Footer」的區塊。 數據收集 Footer的樣式 Background-color：$Secondary...
來到我開發之旅的第二週！在第一週，成功地從零到一，搭建並打通了n8n後端與Flutter前端的數據橋樑。 本週的進行主軸，是將極簡App塑造一個優雅的「肉體」，...
設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗，另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網，目前好像沒辦法切出超出視...
雖然看了這麼多元件，但在實作 UI 時，通常會組合多個元件，為了讓 UI 清楚、易懂、好看，如何排版元件就變得很重要了！若讀者曾自行把多個元件放在 Window...
在研究 Compose 元件時，讀者應該有發現，每個元件都有 modifier 這個參數，有時要改變元件的外觀或行為時，就得透過這個參數。但到底 Modifie...
聖佑
烙詩
HANA APP
Casio
ALian
阿褚
Sonia
iThome鐵人賽
看影片追技術