新手設計師成長日記 - 空間(space)

Hello各位朋友大家好，還記得我嗎？

上週我們談到簡單的配色問題，今天我們要來討論物件與物件之間的空間。

通常我們最剛開始在排一個 Layout 的時候，物件跟物件之間的空間，會依照自己的喜好，或者看起來還不錯喔，就排了。

有時候甚至物件跟物件之間的空間會有小數點，這時候就會讓工程師很頭痛 ，但我們在排版的時候通常都會因為開心而亂排（或者是用滑鼠在亂拖動一通，喬到一個好位置就放在那了，憑感覺）。

這時候就會出現超級亂七八糟的數字，你如果拿這張圖標記好出去給工程師看，他大概會哭吧，或者直接不理你取整數。

給大家看一下錯誤範例：

大家可以看到第二張圖片，我的資訊離上方顯示資訊的地方比較遠，卻離下方Button比較近，超詭異。然後 Button 位置離上方內容的距離，雖然看起來好像差不多，但其實每張圖都不太一樣，這樣會造成許多困擾。

所以為了設計師跟工程師之間的溝通順暢，以物件與物件的距離，必須被規劃清楚。

所謂規劃清楚是什麼意思咧？

給大家看一張範例：

我的 App layout 物件跟物件之間的距離，總共就這幾種，會依照關聯性、重要性、視覺流暢度來排版。

像是按鈕如果至於最下方，那在他上方的資料跟他的距離我就會定義M or L 也就是24 or 36的距離。

如果是資料與資料之間的距離，就會依造關聯性，讓他只有4 or 6 的空隙。

當空間的距離定義好，你之後再排版的時候也不會隨便依照自己的喜好亂排，工程師跟使用者在看你的圖也會覺得有邏輯以及依據。

雖然使用者當下不會有感覺，但是我一直在提倡的就是，「當使用者沒感覺就代表這件事情是對的」，如何讓你的app內容空間(space)是合理而且適當的，在動手排版之前，把間隙定義清楚吧！

給大家看一下簡單的範例～

希望大家知道排版空間(space)的重要性，並且在之後遇到這類的問題能夠再也不疑惑！

今天就講到這邊～～我們下次再見喔！

如果喜歡我們的文章，請給我們一個❤，同時也歡迎分享給你的朋友，最後別忘了Follow我們的Facebook粉絲頁和Publication，我們將持續為你分享設計知識與靈感，有任何建議或合作需求也歡迎來信: aapdgo@gmail.com 😊

— —

AAPD是 As A Product Designer 的簡寫，我們希望提供產品設計師所需要的各種資訊，並且致力在平台上創造更多的交流與互動。我們關注於UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等並分享這些資訊，期望降低每位設計師成長的過程中所遇到的阻礙。我們期待這裡成為一個設計知識的媒介，讓每一位來到這裡的人都可以得到滿滿的收穫，並且讓每一位身為產品設計師的人都能為自己正在創造的事物感到驕傲。