UI｜介面設計圖鑑：你知道這些設計的名字嗎？——圖像篇
還記得當年剛開始學 UI/UX 設計的時候，常常心中有畫面但卻不知道那個畫面叫什麼名字，導致想估狗參考資料的時候都找不到，還得問比較資深的工程師才有答案。
離開第一間新創公司之後，又輾轉經歷了以英語為主溝通的團隊，還有現在待的外商公司，就更常需要知道各種元件的名稱或程式語言了。
知道這些 UI 效果的名稱或是通用說法，在溝通上會精準很多。除了可以避免掉許多文字上很虛幻的形容，如果在外商要和外國籍工程師溝通，也會更加輕而易舉。
所以，今天就來整理 UI 設計師專用圖鑑之第一篇：圖像篇！
▍Single Image 單一圖像
先從單一圖像開始，下方對照圖歡迎收藏 ❤️ 圖像的呈現有很多種，這邊列舉的是四種最常見的用法：
相信有帥貓貓當範例已經很清楚了，不過下面還是來解釋解釋！
1. 不按比例縮放 → 360*360
第一種方式「不按比例縮放」最大的問題就是圖片會變形，也就是說只要圖片的長寬和 view 的長寬不同，圖片就會被壓扁或是拉高。在 iOS、Android 和 CSS 各自的寫法為：
iOS：
UIViewContentModeScaleToFillAndroid：
ImageView.ScaleType FIT_XYCSS：
object-fit:fill
大部分情況下鮮少被使用，因為會讓圖片失真，不過有些老舊的 UI 還是會看到這種設計。
2. 等比例縮放 → 長邊撐滿
等比例長邊撐滿最大的優點就是可以完整呈現每一張圖片的內容，完全不會裁減任何一邊。在 iOS、Android 和 CSS 各自的寫法為：
iOS：
UIViewContentModeScaleAspectFitAndroid：
ImageView.ScaleType CENTER_INSIDECSS：
object-fit:contain
舉個例子大部分的 lightbox 都有這樣的效果（圖例為 facebook），這種設計通常都是用在需要完整瀏覽內容、不能裁減本體時廣泛使用。
3. 等比例縮放 → 短邊撐滿
等比例短邊撐滿應該是最常出現的設計，出沒於文章縮圖、個人頭像、頂條 banner 等等，實用性高、視覺效果佳，唯一的缺點就是會裁減掉上下或左右其中兩邊的物件內容。在 iOS、Android 和 CSS 各自的寫法為：
iOS：
UIViewContentModeScaleAspectFillAndroid：
ImageView.ScaleType CENTER_CROPCSS：
object-fit:cover
一般基本上都用於縮圖，用意是讓形形色色不同大小尺寸的圖片可以統一大小和形狀，但是相對而言就大幅犧牲了物件內容的完整性囉～
4. 不縮放 → 原始大小居中顯示
特別直爽的一種方式，原始圖片多大多小反正完全不縮放顯示下去就對了！在 iOS、Android 和 CSS 各自的寫法為：
Android：
ImageView.ScaleType CENTERCSS：
object-fit:none
缺點當然就是如果圖片爆大，就只會看到帥貓貓的鼻子；如果圖片奈米小，就填不滿畫面（老實說個人覺得是個爆幹難用的設計欸，有人要分享一下這個平常會用在什麼情況嗎）。
▍Image Grid 圖像列表
接下來是多張圖像排列，共有 5 種最常見通用的排列組合：
1. Standard Grid（又稱 Standard Image List）
Standard 就是標準的意思，顧名思義 Standard Grid 就是最標準的格子狀排列。因為設計單純、變化簡單，所以可能也是對於工程師來說最容易寫的排列方式。
因為太多產品都有用，所以就不舉例了。來講個比較特別一點的做法，就是 Macbook 的 Finder。
Finder 裡面的檔案縮圖雖然乍看之下似乎尺寸不一，但其實可以用很簡單的方式做出來。只要用 Standard Grid + 長邊撐滿就可以做出一樣的效果了～是不是超級簡單？
2. Woven Image List
Woven 就是「編織」的意思，Woven Image List 就是在同一個 grid 裡面用兩種不同的長寬尺寸（通常為一直一橫）形成類似編織狀的圖樣排列。由於本身的排列效果就帶有一定的繁複程度，所以通常個人會比較推薦用在色調相似、畫面單純的圖像上。
3. Quilted Image List
Quilt 是被子、棉被的意思，特指拼布做的薄被，而 Quilted Image List 就是像拼布一樣用大小不一的矩形區塊形成的圖像排列。通常用來對特定圖像做強調，用尺寸的反差區分內容物的不同層級，達到視覺引導的效果。
代言人是 Instagram 的 Explore 以及 iOS 的 Photo Library，針對特定影像給予較大的篇幅，用特大的區塊強調精選內容，都是為了區分不同層級的差異。
4. Masonry Grid（又稱 Masonry Image List）
Masonry 是石工、磚瓦工技術，也就是把石塊或磚塊層層堆砌的意思。Masonry Grid 的概念就是將畫面直向等分為數列，並把圖像以固定寬的方式向下排。這個方法會做出一種錯綜的堆疊感，好處是可以完整呈現內容，而壞處則是畫面可能會因為圖像尺寸不一顯得混亂。
代言人是 Pinterest 和 Issuu，以及許多以圖像為主的內容平台，都採用 masonry 的方式排列。特別要注意的點，是 masonry 主要適合用於有大量內容的地方，尤其是如果圖像多到可以做 infinite scrolling，會是最適合的。
原因是因為圖像尺寸不一的關係，masonry grid 滑到底的時候會看到最底下其實是參差不齊的（如圖）。因此如果內容不夠多，或是打算做分頁設計，那麼 Masonry Grid 就不適合囉～
5. Justified Masonry Grid（又稱 Justified Image List）
Justified Masonry Grid 就是橫向的 masonry。原本 masonry 讓圖像等寬向下排列，justified 的版本就是改為等高向右排列，且限制每一排的圖片加起來總寬要等於 view 的寬度。這個方法完美解決了 masonry 到最底下會參差不齊的問題，又能夠完整呈現所有圖片的內容，是一個很優雅的設計。
代言人是 Facebook 的相簿和 Google 搜尋的圖片結果，兩者都是採用 Justified Masonry Grid，可以顯示各種不同長寬比例的圖片結果，又保持畫面的整齊劃一。
所以橫向 masonry 一定比直向好嗎？個人覺得不一定，我推薦的做法是根據裝置的方向做設計。比方說網頁和手機都要做一個相簿功能，可以選擇在手機上用直向的 masonry，在 web 做橫向的 justified masonry。配合裝置的方向設計，可以最大化介面上的空間，在視覺上也會比較順眼。
以上就是這次的「UI 介面設計圖鑑」，希望對各位設計師有一些幫助～如果有任何問題也歡迎留言詢問！那麼我們下次見～ 👋
↓↓ 如果喜歡這篇文章，請幫我掌聲鼓勵鼓勵～也歡迎追蹤，我會不定時發布新文章！👏👏👏