ㄧ、裝置與頁面斷點

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

參考文章連結：https://devfacts.com/media-queries-breakpoints-2022/

關於平台佈局的單位

web 用 CSS pixel , iOS 用 iOS pt , Android 用 dp 把握原則：用正確的單位進行版面的佈局，不需要去糾結螢幕的硬體解析度。

二、排版方式與設計原則

設計時應着重於「簡約」而非「簡單」，也就是在有限的手機螢幕中，界面的層級關係應該主次分明，有條理性 ; 同時根據用戶的視覺規律習慣，給界面進行合理的空間佈局和定位，突出界面的核心和重點，方便用戶以最短的時間快速清晰地識別出想傳達訊息和操作功能。

原則一、讓使用者在點擊區域更容易點選

我們在做一些輸入框、按鈕等點選區域的時候，假設你設計元件特別小的情況下，使用者點擊會更加費時。在使用外部裝置點選則更加費時 (例如用滑鼠點選東西)，所以在設計時可將點擊反應熱區做大一些，使用者在點選時就會更加容易、方便。

( 可參考各家裝置平台官方規範作為設計依據 ex. Material Design )

原則二、適當地將文字描述轉換圖形展示

文字與圖形的排列會使設計更具層次，將介面上的內容做優先順序的區分。文字與圖形之間的對齊、間距、顏色明暗、尺寸大小等，都是需要很精準的設置才能使畫面更加俐落簡潔(俗話說的好：魔鬼藏在細節中)。也能提高使用者在瀏覽的可讀性。與所有內容全部放在同一層次的設計相較，清楚分級分類也能讓介面別具特色。

https://miro.medium.com/max/1400/1*NtLzIB4qWYGky7rC84uy2A.jpeg

原則三、將相關的功能分類而非毫無章法

在產品當中會有許多系列相關的功能，將類似這樣的系列功能分組為類，可以加快使用的流暢性(刪除放在畫面最左邊、新增放畫面最下方這種事大概不會發生吧)。將這些類似功能的元件放在一起符合邏輯認知，別再讓使用者多想多做多錯是優化設計時的原則之一。（維持介面設計的一致性)

https://miro.medium.com/max/1400/1*GP_CS63EDzuRmwKZCwrvmA.jpeg

by Medium APP

原則四、系統化的色彩配置勝過五顏六色

我們需要進行色彩設計時，常常在運用時發現很難做出恰到好處的和諧感。也許是對於色彩認識不足，容易因主觀的去過度使用，整體看起來就會覺得沒有系統，像是七彩霓虹燈灌入我們的設計中(笑)。在色彩的設定上，我們儘可能設定一種顏色作為此設計的基底，另外再選擇最多兩種顏色作為輔助色就好，避免在介面上的顏色太多太複雜。當然也可以選擇無彩度色(近黑/灰/白)的搭配，在需要使用者關注的元件上使用色彩即可。

原則五、仍遵循約定準則不要再重新設計

回到原本的主題，在每次的經驗累積，逐漸會形成設計的準則。遵從介面設計的某些約定俗成的原則，使用者用起來就會很順暢、方便。如果我們要打破常規，就可能要提高一些學習成本。所以除非我們有明確目標，才進下一步去思考如何創新，否則參考一些設計 Guideline，仍有避免不必要錯誤的好處。

視覺法則 – 格式塔原則

1. SIMILARITY 相似

個別相似的物體會被視為整體的一部份。相似特徵的物體，不論是它的形狀、顏色、大小、排列方式…等等，只要相似，我們的視覺就會認為是一個整體。

上圖中可以看出外觀特徵相似的個體(不同顏色)，可以分別視為一個整體，即使打亂順序(B)，白球還是會被大腦歸為一個整體。

在左圖中，可以看出左邊一排圓形的圖片，可以視為一個整體，每一張圓形圖片都代表一個聯絡人，所以在這個介面上，就可知道這些資訊的整體性。而右下方的圓形元件，是Floating Action Button

2. PROXIMITY 相近

當個別的物體距離相近，我們的視覺會將他視為一個整體。

上圖A中，個體之間左右間距較小，圖B則是上下間距較小，構成了圖A是每一橫排為一個整體，圖B則是每一直排為一個整體的視覺效果。

透過物體與物體間距的控制，可以知道資訊排列越是接近，他們的關係就越是強烈，可以視為一個整體，如果距離較遠，就可以視為與其他個別的整體。很常應用在排版之間關係的操作。

3. CONTINUATION 連續

連續的個別物體，形成的視覺動線，會視為一個整體。就算被中斷，我們的大腦仍然會判定為一個整體，因為我們的視覺容易感知連續的形式，而非離散的片段。

左圖紅框的部份，會看到數個灰色的點點，在介面設計上我們稱它為「Slider Dot Navigation」，通常是用來做侷部畫面的導覽切換，這就是連續性的應用，在些灰點在連續排列的情況下，我們會將視為一個整體，而非單純的灰、黃點，它會透過動態(自動換圖)的方式來提醒使用者，畫面是可以進行切換的。

4. CLOSURE 封閉

當我們的視覺感知到物體是不完整的，但我們大腦仍會將不完整的資訊填滿，並將視為一個整體。

上圖看起來像是圓形2蓋在圓形1上面，但事實上，圓形1不是一個完整的圓型，可能也不是一個圓形，但我們的大腦會自動把圖1，填補成一個完整的圓型，這個原則充份解釋了整體大於個體加總的核心概念。

左圖中畫面的下方，我們知道可以繼續瀏覽，但為什麼會知道畫面可以延續？因為封閉的原則，我們知道下面的卡片只有顯示到一半，但人類的眼睛會自然填補失去的資訊，意識到下方還有沒看完的資訊，所以繼續下滑直到資訊結束。

5. FIGURE-GROUND 主體-背景

在整體的視覺條件下，某個物體相較於其他物體來的明顯，我們會大腦會將它判定為主體，而將他以外的物體視為背景。

上圖右上角的藍綠色圓形，明顯突出於其他灰色的圓形，因此它為主體，而灰色的圓形則為背景。

對話框(Dialog) 或稱為 Modal ，很常應用在在介面或網頁設計上，因為要突顯這塊的資訊，所以在背景蓋上一層半透明的黑色，此時使用者就會意識到這個對話框是主體，而其他區域則是背景。

三、字體的選擇

「襯線體 Serif」如新細明體、Times New Roman等，適合一行或是超過一行的字，襯線會讓這些字有小小的腳，帶領讀者的視線從一個字母連接到下一個字母。這樣就看起來好像字母之間有某種隱形的連結一樣，適合用在比較稠密的排版，幫助讀者把視線保留在句子上。同時襯線體會有各種的線條粗細，設計者相信這樣可以協助讀者辨認字母或是(中文)單字。

「非襯線體Sans Serif」通常比較大也比較粗，同時大體上每個筆劃的粗細是相同的，沒有所謂的襯線（ “San Serif” 裡面的Sans指的是「沒有」的意思），例子如微軟正黑體、思源黑體 Noto sans , Roboto 等等皆是。很多人相信非襯線體比較不適合密集地在字裏行間閱讀，但適合立即性的辨認，因此常用於簡短而突然出現的地方，如看板、大標題、副標題或附註等。

字距及行距

字距：字與字的距離行距：行與行的距離這兩者的距離都會影響閱讀的感覺，尤其是行距，太近的時候會讓人不好區分到底哪個才是行？而字距則是在能表現出獨特的節奏感。那我該如何決定行距該使用多少呢？

我個人常用的比例是文字的 1.4 至 2 倍之間，依據使用的字體與整體的感覺做點微調。