前言 利用剛設計好的帖子頁元件, 組合成帖子頁｡ 元件組合 建立一個屬於帖子頁的frame 先在Pages/Blog中, 按一下主頁的frame, 再按快捷...
設計大綱 上一集設計完header的滿版背景後，今天會設計Navigation bar。Navbar在網頁來說也是蠻重要的一個元件，通常會有LOGO、常用按鈕或...
設計UI總共有三種方法去定位個元件在視窗內的位置，分別是pack方法、grid方法跟place方法，我會分成三篇文章來跟大家做介紹，今天就先來聊聊pack方法。...
前言 今天要完成帖子頁的元件設計｡ 帖子頁的元件 帖子 基本上可以用回主頁的帖子元件, 這裡只是少了READ MORE, 還有把內容全部顯示出來｡ 回覆...
今天要介紹視窗設定，會分成三個部份來講，建立視窗、設定視窗大小跟視窗的其他基本設定，那我們不多說就直接開始吧~(@^0^@)/ ♠♣今天的文章大綱♥♦ 建立視...
設計大綱 今天來設計Landing page的header。這次想要做的是一個滿版的header，在header裡面會有標題、內容、以及input（提供使用者填...
作為正式開始的第一篇要來講的是很基礎的網頁切版和怎麼去看網頁中有哪些元件，會分兩部分： 網頁微切版架構：讓還不太熟網頁的人理解一般網頁 UI 的架構大概會怎麼...
UI版面配置 幾近年的FPDC遊戲，單角色的控制多以First Preson Shooter玩法為主要類型，而FPS的遊戲，手裡拿裝備，如劍、盾，是很直覺的呈現...
Hi 大家好，我是Rson，一位在科技業的互動介面設計師。在過去的專案及產品經歷中，累積了一些心得、檢討與領域知識，希望透過IT鐵人賽這個平台的寫作，將這幾年...
前言 今天就把剛完成的元件組合成一個頁面吧。 框架 (Frame) 我先以桌面顯示器為目標, 建立一個桌面的框架作為頁面的外殼, 其解析度為1440x1024。...
哈囉，大家好，我是即將要升大三的老屁股Ψ(￣∀￣)Ψ，在一切因緣際會下決定要做用python寫UI這個主題，剛好對 Python 的語法也有一些經驗，所以就這樣...
簡介 今天會講一下在設計前要怎麼建立環境，畢竟在設計前還是要先備好畫布嘛，但畫布的尺寸要怎麼挑選呢？所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap...
前言 在開賽前，先來做個小小的自我介紹好了！目前是火箭隊的網頁設計組，加入火箭隊前有上過六角學院的UI課程（上課前完全是0基礎 ><!!!），但卻從...
前言 我先建立一個原型(Prototype), 用來釐清這個WebApp的功能跟UI界面。 建立原型所用到的工具是Figma, 它有免費版本, 功能應該足以應付...
大家好，我是YIYI，今天我要來介紹Whimsical。 關於Whimsical 在介紹如何使用前，先來說一下Whimsical是甚麼~Whimsical是一個...
大家好，我是YIYI，今天我要來和大家聊聊為什麼需要規格表簡介架構圖。 為什麼需要規格表? 規格表就像是在讀書時所制定的讀書計畫表，也就是規劃未來要做的事情。有...
我比較熟悉的ui是qt的，但是框架類似，下面就分幾步講解，我是如何在一個自動化項目中使用UI的：首先新建一個ui項目，項目的ui設計的部分，應該是交由ui設計或...
實際使用了Sketch、Figma、Adobe XD 以後，雖然Adobe XD的部分都沒有在這邊有詳細的操作，因為在習慣用Sketch之後發現Adobe XD...
今天試著全用Figma做一個UI設計，無論是插圖或是icon都是在Figma內畫出來，Figma的畫筆不會不好用但是在使用上還是會比較習慣Illustrator...
Figma的Layout Grid就是跟Sketch的Grid System一樣的東西，但是Figma有一個特別的地方，就是除了可以像我們熟知的建立在Frame...
塞這主題是為了完整性但我其實沒什麼資格來介紹這兩大topic就是所以只會從工程師的觀點來講連假偷懶一點吧 ＵＩ是 user interface所以通常是與客戶接...
前面幾篇我們提到Smart Layout的小技巧和後續小延伸，可以大概思考一下其實如果再結合普通配置的Symbols，其實可以延伸的還滿多的喔～ 像我在專案中就...
Symbol特色 3：Nested Symbols Nested Symbols不僅是Symbol中最經典的功能，也是能將我們的設計系統活用的重要角色。 我們提...
我們昨天實際用 Artboards(畫布) 是 html 的環境、Symbol 是 class的連結想像，並進一步以Symobls的替換為例，不過並不是只有單純...
上一篇我們大概提到Sketch跟網頁切版的Html、css概念很像，今天我們則是先來看看Symbol的部分。 Symbol特色 1：替換 替換這個功能，就是讓我...
今天我們來介紹 Android TV 的 UI 組成，以及有什麼方法可以讓你的 APP 曝光率增加唷 首頁 上圖是 Android TV 的首頁可以看到所有內容...
Sketch應該是這三個軟體(Figmas、Adobe XD)中最成熟的設計工具了，但是只有mac系統可以使用的sktech，到底是怎麼持續處於領先的王者地位呢...
差不多該進入 Android TV 開發的主題了雖說 Android TV 和 Android Phone 都是 Android 系統但是還是有些地方需要去考慮...
從2019的年度設計工具調查與google爬文中，大概可以歸類出3大軟體的幾個重點和疑問： Sketch 目前似乎是市占率最高的軟體，為什麼只有mac的系統可...
指南閱讀聲明：此系列文章非教學指南文，無從0開始可以學會的加持作用。 對於UI設計師而言，最重要的工具不外乎就是UI設計軟體了。但是因為有太多個UI設計軟體了，...
tlyau62
烙詩
Firenze
parkerhiphop027
ApprenticeGC
Rson Wilson
YIYI
guopengzhen
ALian
Mike Fang
lionlions
iThome鐵人賽
看影片追技術