三鑽石設計流程? Why the double diamond isn’t enough它的出現是基於雙鑽石設計流程定義不夠明確，分工也不夠清楚，因此誕生了升級...
a4
‧
2022-09-18
大綱 會分為下面幾個段落來介紹 Simple Using in layout in code add a icon Text Button in...
進入職場，難免都會遇到最晚下班、負責關燈關門的時候。你是否和我一樣經常在那邊「玩電燈」呢ＸＤ？這個按鈕對應那個最遠的燈，旁邊按鈕卻是控制頭頂上的這盞！？ 即...
不確定各位有沒有見過，像下圖這樣的洗臉盆？ 我曾在某次出遊中，入住一家飯店，該飯店廁所的洗臉盆就像這樣，而且清潔人員還很貼心（？）的按下按鈕（儲水狀態），我...
前言 觸控手機問世的那一刻，Button 就成了每個應用程式中不可或缺的元件。這也是我想把它擺到第一位來介紹的主因，作為 Mobile 移動端的開發工程師，都無...
你是否經常因為搞不清楚「這扇門怎麼開」而躊躇在店家門口呢？ 或是直接撞爆店家的玻璃門？在我書架上的其中一本書《不是你太笨，是爛UI的錯！》中有很多這樣的例子 -...
來到我們的第一個小觀察，在你的日常生活中，是不是常見到腳踏車與行人、汽機車，人車爭道呢？ 在我所工作與生活的雙北地區，是很常看到腳踏車有時候把自己當人（騎在人行...
前言 大家好！我是Dolly，今年第一次參加IThome鐵人賽，大學的背景是資管系，在學期間也輔系設計系，與UIUX的初次接觸是在學校的兩門課上： 第一次是大學...
前言 由於 Material Design 大多數的篇幅都注重在介紹 UI / UX 還有在 Android 中有哪些實用的元件 所以對前端工程師最大的好處應該...
首發的封面圖，其實今天是員工旅遊最後一天，八點半才回到家的我，經過這三天的健行，現在隨時躺下就能睡著，但還是努力爬起來發文... ｜來點前言 恩...假設你真的...
相信大家使用網站時，一定會遇到大大小小固有或彈出的提示框，這次的主題就是他！提示框在用戶經驗上會以內容的輕重程度做不同類型的變化，因此不管是建議、推廣，到提醒、...
在UI出圖之前，我們先確認好目前的 wireframe 是完整的。接下來只要依照 wireframe 來實作ＵＩ的部分即可： 以登入為例： 接下來就一張一張把...
在開始畫設計稿之前，我們要先確認一下我們的字級以及主色以及輔色等等。這邊我套用去年自製的 Design Guideline Template 來定義簡單的設計規...
要開始畫一個LOGO之前我習慣先簡單列出一些主題文字。這次要做的是一個旅遊包包整理APP所以我列出下面這些文字。 戶外旅遊 打包行李 確認的 輕巧的 快速的...
開始畫圖之前，先確認好要使用的UI framework，來確認可以使用什麼元件。才不會有實作畫面很困難的問題。這邊提供幾個元件來給大家參考： 以下是我使用過的：...
開始打程式前，網頁設計是不可或缺的環節！ 網站介面設計，稱為UIUX設計UI指使用者介面(User Interface)、而UX是使用者經驗(User Expe...
認識過網站的基礎後，接下來可以多觀察生活中的範例做練習，選擇幾個成效不錯的網站去做比較與分析，以下整理出電商網站比較常見的八個特點，大家可以搭配做參考，規劃出更...
隨著開發的功能愈來愈多，工具列的空間已不足以將所有的功能都顯示在上面；而且也不是每個功能都是使用者會常用的功能。為了要解決這個問題，我打算改造工具列，讓使用者可...
工程師不在乎設計細節怎麼辦!? 設計師需要學前端技術面嗎!? 專案中如果碰到不在意間格距離、顏色色碼、按鈕大小等設計細節的工程師，我們可以試著透過以下的方式來溝...
與工程師溝通有互動效果的介面要注意什麼 !? 互動效果相較靜態的設計稿實作時間比較久、建置成本高，需要考量不同層面的問題，像是效能、支援度等。 建議在設想時：...
要注意什麼，才能更順利地提供可執行的設計稿 !? 一、參考熱門的設計框架、典範大廠的 Web 框架或工程師習慣的框架 例如：boostrap、material...
今天是雙十連假的最後一天～也是鐵人賽接近尾聲的倒數第 5 篇～今天就來講講跟設計師的溝通之術吧！ 前言 原本是個坐在位置上，每天打開 Jira 檢視今日任務，做...
接下來，會就六角學院 UI 設計入門 課程中，針對團隊合作時會碰到的情境稍作討論。 設計稿再好看也沒用 !? 工程師說太難做不出來 QQ 團隊的發揮，需要建立、...
進行六角學院開設的 UI 設計入門學習第 25 天，稍微從 wireframe 下一個階段開始來做一些回顧。 【Day 07】設計流程：繪製 Mockup 設計...
本篇重點 原型設計 ( Prototype ) 種類與技巧 原型設計 ( Prototype ) 原型設計是對產品會如何運作的模擬，能在產品正式...
本篇重點： 設計規範製作 切圖 ( Slice ) 的格式與命名 設計標註檔 1、設計規範製作 依內容詳細程度，從精簡到完整分為三種類別：介...
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
前言 今天來討論前端RWD的套件、表格的套件、圖表的套件分別有哪些好用的、可以當作參考。目前js相關的前端套件非常多，使用者可以依據自己的需求進行選擇，有些為擴...
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...
iThome鐵人賽
看影片追技術
看更多
vosscg0822
Wen Chien
Dolly
atain880625
Edmond
Daniel Kao
tedkuo
小學生
JYHsu