iT邦幫忙

鐵人檔案

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

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

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

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

介面設計流程與開發-我們的30天

前言鐵人賽是需要鼓足勇氣、做好準備才敢參加的比賽,由於太艱難容易使人放棄,所以有一起督促前進的夥伴是非常重要低!初次參賽的我們,決定先挑戰順利完成30天學習記錄...

2017-12-20 ‧ 由 Anny Cheng 分享
DAY 2

新手UI起手式,以Daily UI 01-Sign up為例 1/3

前言大部分的UI設計師應該都挑戰過Daily UI,除了可以累績作品之外,另一方面也可以訓練設計師如何在短時間整理並思考使用者需求,進而完成介面設計。今日挑選D...

2017-12-21 ‧ 由 Anny Cheng 分享
DAY 3

新手UI起手式,以Daily UI 01-Sign up為例 2/3

前言上一篇文章分享了在設計前可以如何開始進行的簡單流程,這一篇文章將延續Daily UI 01-Sign up的UI設計的設計思維和UI繪製的細節。如果沒看的上...

2017-12-22 ‧ 由 Anny Cheng 分享
DAY 4

新手UI起手式,以Daily UI 01-Sign up為例 3/3 - 其他搭配軟體

前言完成介面設計後,再來就是要切圖、給尺寸規格、說明文件…等資料給前端工程師進行切版實作,除了給文件之外,還要與工程師溝通與討論實作的可能性,以免兩方想的不一樣...

2017-12-23 ‧ 由 Anny Cheng 分享
DAY 5

切版起手式,以Daily UI 01-Sign up為例 1/2

前言前三篇介紹了以 Daily UI-Sign Up為例設計的畫面相關細節,此時前端工程師就會從設計師手中拿到設計稿(如 Zeplin)等資訊,將視覺畫面進行「...

2017-12-24 ‧ 由 Anny Cheng 分享
DAY 6

切版起手式,以Daily UI 01-Sign up為例 2/2

前言昨天簡單介紹了切版的先備知識後,今天以套用 Bootstrap4 切版為主軸,說明如何在 Bootstrap4 基礎下,設定自己的主題色,以及運用 Boot...

2017-12-25 ‧ 由 Anny Cheng 分享
DAY 7

Sketch vs. Photoshop 哪個才適合UI設計?

「一定要使用Sketch?一定要買Mac才可以?Sketch跟Photoshop哪個好呢?」UI設計的軟體到底要用哪個呢?這應該是剛踏入UI設計的初學者都會有的...

2017-12-26 ‧ 由 Anny Cheng 分享
DAY 8

UI設計的使用軟體挑選-為什麼使用Sketch?

前言上一篇簡單的比較Sketch和Photoshop兩個軟體,也有提到Sketch絕非UI設計唯一的軟體,例如:Photoshop、illustrator、Ad...

2017-12-27 ‧ 由 Anny Cheng 分享
DAY 9

如何定義介面應該有什麼功能,以Daily UI 41-Workout Tracker為例 1/3

介面為何 介面是使用者與裝置溝通的媒介,但不一定是以實體呈現,有可能是看不到的,像是以語音為主的介面(Voice UI,VUI),應用於Amazo智慧揚聲器Ec...

2017-12-28 ‧ 由 Anny Cheng 分享
DAY 10

淺談文字設計,以Daily UI 41-Workout Tracker為例 2/3

文字的力量文字不只是單純告訴內容含意,也會因為字體的形象帶給使用者視覺聯想,表達出設計的個性。設計師常藉由字型去呈現不同視覺效果,如果要在短時間內改變固有的設計...

2017-12-29 ‧ 由 Anny Cheng 分享