本篇重點 設計精稿 ( Mockup ) 在繪製設計精稿 ( Mockup ) 之前... 網格系統 ( Grid System ) 是什麼 ?...
上一篇已經把基本的物件都做好了，可以來做美化設計了！ 首先我想幫Sign Up加陰影，讓他比較有空間立體感，選擇Sign Up物件，在狀態列的shadow打勾...
小貓
‧
2018-10-22
講完了Auto layout能做到的幾個功能，接下來換針對Figma的Component來學習，希望之後要實作的話，回來都能看得懂 :D 那就， Compon...
終於到最後一篇了！今天要把剩下的部分都分享完。 第三個場景有三個地方要設定，返回鍵和切換按鍵前兩天都介紹過了，所以今天針對新增 link 的按鍵做分享。 點擊新...
小貓
‧
2018-11-14
雖然我是機車族，但就如同前面提過的，在路上時我總會不自覺觀察周遭的狀況，尤其是停等紅燈的時候。 今天我們來看看身為一個公車族有多麼辛苦吧！下面這個新聞畫面，相...
講到大學分組作業，幾乎每個人都遇過團隊合作上的問題。 但是感覺自己大學上軟體工程學到的多半是綜觀的概念，比較少人在提團隊的實質做法，所以就想說藉這個機會紀錄一...
透過Prototype的呈現可以讓團隊清楚了解版面設計與呈現方式，但要怎麼讓效果照預期的呈現，就需要應用學過的各種功能了，所以今天就來紀錄幾個常見的互動方式。...
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
終於把Adobe XD大致上介紹完了，今天就要來進入正題了！第一個作品也是我接觸 UI/UX 做的第一個作品，做得比較簡單，剛好可以當超級入門的分享XDD，那我...
小貓
‧
2018-10-20
前言 不知不覺鐵人賽也接近尾聲，要講的最後一個元件是 Tab，也是一種導航切換畫面的元件，圍繞在同一主題上。在大多數的 App 都能看到，包裹著相關性高或相同應...
昨天我們了解到 Platform guidance 平台指導，Android 系統的狀態欄、指紋及觸覺設計指南，在狀態欄內應顯示的圖示及功能，還有區塊的建議尺寸...
在開始畫設計稿之前，我們要先確認一下我們的字級以及主色以及輔色等等。這邊我套用去年自製的 Design Guideline Template 來定義簡單的設計規...
昨天我們了解 Material 的基本介紹，今天讓我們一起來看看 Material 的指標項目吧。 Material 主要分成Foundation (基礎)與...
Day 5 - 內部會議 : 這客戶 Navigation 上面有哪些? 卡片建議不要超過 3 個 每個行業都有屬於自己的專業術語，不管在哪一公司要聽懂內部用語...
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
延續上一篇 UI/UX 設計師的「設計參考」整理方法！今天會分享一些，工作三年來時常拿出來參考的視覺網站。 多數會以 耐看、簡約、實用性 為主，單純好看的視覺網...
本篇重點： 設計規範製作 切圖 ( Slice ) 的格式與命名 設計標註檔 1、設計規範製作 依內容詳細程度，從精簡到完整分為三種類別：介...
接續著第二個場景，把下面所有細項設定拉進新的滾頁容器層，讓他們可以滑動。 在 name 的框新增“輸入”物件，在默認文本打上要輸入的內容，並把顏色、字體、字重、...
小貓
‧
2018-11-13
昨天我們了解到 Material Theming 主題，提供了一套基本的主題樣式，在設計時可以觀察 Material 主題樣式的細節，甚至可以直接下載修改為符合...
昨天我們了解到 Platform guidance 平台指導，Android 系統的圖示、介面導覽、通知，在圖示的章節中把圖示細分為四層元素，在每一層元素上依照...
大綱 Alert dialog Simple dialog Confirmation dialog Full-screen dialog Anatomy Ke...
上一篇提到了畫icon，這邊示範一下三個icon的畫法。 Username拉一個正圓形當頭，拉一個橢圓形做身體，再拉一個方形，把橢圓和方形選起來按“減去上層”，...
小貓
‧
2018-10-21
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
今天終於要換到下一個作品了，這次要介紹的作品是Daily UI 002 的Checkout，先給大家看一下，這次的購物頁面會做五個頁面，還會模擬購買的過程，這次...
小貓
‧
2018-10-26
昨天我們了解到 Platform guidance 平台指導，子母畫面模式可讓兩個活動同時顯示在螢幕上，執行兩種不同的應用程式活動，也可以調整子母畫面的畫面尺寸...
前言 是一個作為導航工具的組件，能讓用戶隨時展開或收起，與 Bottom Navigation 相同都是作為跳轉畫面的元件，但應用上有些不同，上幾篇我有提到 B...
昨天分享的是「網站收集頁」，主要用途在於大範圍的尋找視覺參考網站。當一個客戶有指定風格，或是老闆認為該客戶的產業性質，也許更適合走某種設計風格時，我們也會整理出...
上一篇已經導入檔案了，那這邊先來介紹介面的部分。 1.物件工具區可以新增多種物件的工具，有圖片工具、視頻工具、圖形工具、文本工具、容器層工具。 2.場景區可以設...
小貓
‧
2018-10-31
昨天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動，透過不同手勢類型可以執行不同的任務指令，並依照應用程式預設好的狀態與產品進行...
前言 今天來討論前端RWD的套件、表格的套件、圖表的套件分別有哪些好用的、可以當作參考。目前js相關的前端套件非常多，使用者可以依據自己的需求進行選擇，有些為擴...
tedkuo
Chloe
Wen Chien
vosscg0822
Yvonne_Zhong
Edmond
Jade Chang
GG
JYHsu
iThome鐵人賽
看影片追技術