iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
自我挑戰組

介面設計流程與開發2 系列

以Daily UI 的題目作為範例,從設計到切版實作,完整介紹介面設計的整體流程,並且分享實作時遇到的問題、我們如何解決問題、小技巧、心得...等。

鐵人鍊成 | 共 30 篇文章 | 42 人訂閱 訂閱系列文 RSS系列文 團隊網路無國界
DAY 21

色彩與使用者行為引導,以Daily UI 04- Calculator為例 3/3

色彩除了與視覺美感有相關之外,也可以利用色彩特性來引導行為的先後順序。關於色彩特性的介紹,在「淺談色彩意象與色彩搭配,以Daily UI 02- Credit...

2018-01-09 ‧ 由 Anny Cheng 分享
DAY 22

切版-以Daily UI 04- Calculator為例 1/2

經過前三篇詳細介紹計算機設計的相關資訊及概念後,今天要以設計的畫面進行切版,此專案因為在數字按鈕的部分有等分的排列方式,故同樣以 Bootstrap4 架構進行...

2018-01-10 ‧ 由 Anny Cheng 分享
DAY 23

切版-以Daily UI 04- Calculator為例 2/2

昨天分享了以 Daily UI04-Calculator 計算機 UI 的切版 HTML 架構,基本的雛形已經出現了,今天主要從調整樣式的方向和大家分享,目前為...

2018-01-11 ‧ 由 Anny Cheng 分享
DAY 24

淺談APP介面設計規範,以Daily UI 07- Setting為例1/3

設計規範的重要性 「沒有規矩不成方圓」一語點出規範的重要,各行各業都有制定的規矩,如同做設計也一樣,平面設計做圖的尺寸、該如何設定的解析度…等規定。 那麼APP...

2018-01-12 ‧ 由 Anny Cheng 分享
DAY 25

Android尺寸單位,以Daily UI 07- Setting為例2/3

介面設計規格 在設計完介面後,會需要一份介面設計的規格說明給開發者,即為UI Layout spec,包括了位置、顏色、字級等樣式資訊,開發者會依照這份資料開發...

2018-01-13 ‧ 由 Anny Cheng 分享
DAY 26

使用元件的概念做設計,以Daily UI 07- Setting為例3/3

元件運用概念 設計規範中的數值並非絕對,尤其在Android中很有彈性,各家的App bar高度也不一定都是制定的56dp,不要被設計規範的限制而讓自己的創意有...

2018-01-14 ‧ 由 Anny Cheng 分享
DAY 27

切版-以Daily UI 07- Setting為例1/2

列表出現於 APP 或網頁的比例非常高,這篇就來分享如何建立列表基本 HTML 架構,以「使用元件的概念做設計,以Daily UI 07- Setting為例3...

2018-01-15 ‧ 由 Anny Cheng 分享
DAY 28

切版-以Daily UI 07- Setting為例2/2

接續「切版-以Daily UI 07- Setting為例1/2」的切版說明,這篇持續以切版樣式 SCSS 內容和大家分享。 SCSS 變數設定 此案例同樣也須...

2018-01-16 ‧ 由 Anny Cheng 分享
DAY 29

介面設計流程與開發-結語

鐵人賽說長不長、說短不短的就來到了倒數第二天,這28天來我們共針對六個主題進行 UI、UX 及切版的經驗與心得分享,不僅是做了學習紀錄,也在分享過程中得到許多收...

2018-01-17 ‧ 由 Anny Cheng 分享
DAY 30

介面設計流程與開發-心得與未來期許

心得 本身背景是平面設計、視覺設計,在學習UI、UX的路上,初期先是透過相關書籍、網路文章自行學習,近期則就讀於【國北|玩具與遊戲設計碩士班】,藉由指導教授認識...

2018-01-18 ‧ 由 Anny Cheng 分享