Week 11 — Learn UI Design| 設計UI小技巧: 善用透明度來凸顯現在狀態或重要資訊

看到這標題，可能會先想說 「你在共殺毀? 可以說人話嗎XDDD」，一樣話不多說，直接先秀出圖片，馬上就能瞭！

第一眼先注意到通常都是那個綠色方塊(大家都灰色，就你不一樣是綠色!!!)
如果你第一眼也是先注意到那個綠色方塊，那恭喜你已經掉入設計師為你所佈好的陷阱裡了哦！

綠色方塊就代表標題的「現在狀態」或「重要資訊」，而周圍的灰色方塊(設定透明度)就是用來凸顯綠色方塊。

或許這樣說還是不夠清楚，直接在下面做出實際繪製UI的例子：
假如今天在做一個有三個步驟動作的介面，使用者目前停留在第一步驟的頁面，而UI設計師在設計這個介面的重點是：讓使用者很清楚的知道目前自己做到哪一個步驟，總共有幾個步驟的頁面要完成。

設計方法就是把「非目前狀態」或「非重要資訊」的顏色調成半透明色，然後用比較鮮艷的顏色來凸顯現在的狀態或想讓使用者注意到的重要資訊。
(使用的軟體：Adobe Xd)

--------------------------------- 本週UI練習 --------------------------------

使用工具:Adobe Xd, ProtoPie

#032 | Daily UI_Favorites

Unsplash是一個免費下載素圖的網站
也是我設計UI慣用的好地方!

但覺得在"最愛收藏"的功能使用起來不太方便
點選完喜歡的照片後，還要去Profile裡面找
所以改成當點選完喜歡照片後，直接出現在右邊(若覺得占版面可以隱藏起來)
這樣就可以一邊瀏覽一邊看自己剛剛選了哪幾個喜歡的照片

p.s附上Unsplash的網址:
https://unsplash.com/

#033 | Daily UI_Info Card

線上學語言時，顯示出老師的資訊供學員挑選時做參考。