扁平化設計：斜陰影
常常在扁平化的 icon 上看到斜陰影效果，要製作這個效果有很多種方式。網路上的教學文也很多種，我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。（沒辦法、現在就是流行扁平化、厚度、斜陰影。）
扁平化設計：厚度
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔，可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要，細細一條就能帶給人「厚度」和「轉折」的視覺效果。
扁平化設計：折頁
翻頁效果也是很常見的扁平化小技巧，簡單幾個步驟就能完成了。請接著扁平化設計：高光、陰影
繼續做喔！
扁平化設計：高光、陰影
有了基本雛型後可以開始添加細節，從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性，扁平化設計將視覺元素抽掉很多，高光、漸層、陰影等基本組成因此變得更重要，更需要注意每 1px 的細部處理。
扁平化設計：基本雛型
扁平化設計是現在最流行的設計趨勢，比起擬物風，扁平化設計去除大部份的材質和光影變化，但仔細觀察，仍保有許多細節。無論是陰影、漸層、高光、立體感等，並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧，只要會用「形狀圖層」就好。為了因應各種尺寸的 icon，我習慣盡可能用向量來製圖。
各式按鈕背景：進階篇
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影，為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景：基本篇
製作～
各式按鈕背景：基本篇
最常見的按鈕就是個長條型的色塊，配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化，在視覺上更顯精緻。可接著各式按鈕作法：文字篇
的步驟接著做。
各式按鈕作法：文字篇
在 App 裡，許多操作方式都需要透過「按鈕」，本篇將介紹如何在Photoshop作出各種樣式按鈕上的「文字」。包含立體凸起、或是凹陷的質感。按鈕本身的作法也有很多種表現形式，將另開一篇專講背景製作。
各種狀態與突發狀況
即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解，但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況，這是為什麼呢？有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。這會導致開發時程延後，因為訂定的規則不夠準確而再次召開討論會議確認細節。甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。
Portrait 和 Landscape，談螢幕方向
直式螢幕稱為「Portrait」，橫式螢幕「Landscape」，頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。不管是 iPhone、iPad、還是 iPod，它們都是長方形的，一般情況下會直式使用，但某些情況就會轉成橫式更為合適，最明顯的例子就是遊戲類。什麼情況下會轉橫使用？橫式和直式的頁面樣子是否會不同？要怎麼調整呢？從 iOS 內建的 App 就可以發現數種切換模式與其代表的功能。
App 切圖檔案命名方式
一個 App 通常會有很多張切圖，不管是 iPhone 需要 1x、2x 圖檔，Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔，檔名的命令方式就需要雙方統一格式方便大家作業。
改不停的設計與加班
台灣是個很不尊重專業的地方，尤其是設計這個行業。相較之下，沒什麼人敢第一時間質疑醫師開的藥方，也沒幾位敢對著律師嗆聲說法條引用錯誤，更不會有人衝進廚房搶大廚的鏟子煮給他看。做設計做久了，從沒被客戶改稿改超過 5 次以上的人真的需要燒香拜佛感謝老天保祐。（相信一定有人被客戶搶過滑鼠，建議改用 Wacom 繪圖板，就算客戶跟你搶筆也會因為不懂使用而馬上還你，擺在桌上看起來專業唬人好用。）
文章分類
