ㄧ、裝置與頁面斷點


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

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

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 倍之間,依據使用的字體與整體的感覺做點微調。

字級
列出文字大小與字的文字級數,並在相對應的使用情境採用合適的字級大小。 ex. 大標 , 次要標題 , 小標 , 段落 , 內文 , 標籤 …

12px 為網頁中最小使用的字級
字重,英文名為Font Weight ,用來標明相同字體的不同粗細。 常見的字重類型如下,有特細 – 中等 – 常規(一般) – 粗 – 超級粗之類的,但不一定你使用的字體有這麼多種字重。


四、顏色的使用


接近口語所說的顏色,但就技術層面來說,一個顏色除了色相之外,還有彩度和明度。






顏色靈感工具:coolor , Adobe color , Tailwind

五、圖片及圖表





善用無版權圖庫資源:Unsplash


我們可以在用戶輸入完成某個欄位資料時,就立即給予訊息回饋,提示用戶目前的操作是否正確或者哪裡待改進,省掉用戶點擊確定後才發現操作錯誤,還得回頭去找哪些地方出了差錯,因而產生體驗上的挫敗感。

在空白頁的狀態下,我們可以透過提示性語言告知用戶如何操作;也可以加入引導按鈕,引導用戶執行相關內容的新增操作。https://haughty777.medium.com/ui-ux設計小細節-錯誤-異常狀態的ui好設計-上-aab1eb41521a

圖標資源:Heroicons.Fontawsome
善用靈感網站: