1005 – UI 版面設計小補帖

Share This Post

ㄧ、裝置與頁面斷點

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

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

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

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

關於平台佈局的單位

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

二、排版方式與設計原則

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

Untitled

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

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

( 可參考各家裝置平台官方規範作為設計依據 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),白球還是會被大腦歸為一個整體。

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

Untitled

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

2. PROXIMITY 相近

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

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

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

Untitled

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

3. CONTINUATION 連續

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

Untitled
Untitled

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

4. CLOSURE 封閉

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

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

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

Untitled

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

5**. FIGURE-GROUND 主體-背景**

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

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

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

Untitled

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

三、字體的選擇

Untitled

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

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

字距及行距

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

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

Untitled

字級

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

Untitled

12px 為網頁中最小使用的字級

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

Untitled
Untitled

四、顏色的使用

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

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

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

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

Untitled

五、圖片及圖表

Untitled
Untitled
Untitled
Untitled
善用無版權圖庫資源:Unsplash

善用無版權圖庫資源:Unsplash

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

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

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

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

圖標資源:Heroicons.Fontawsome

圖標資源:Heroicons.Fontawsome

善用靈感網站:

Behance

Dribbble

Pinterest

Siteinspire

Awwwards

App Fuel

UI/UX Patterns

訂閱研究文章

Get updates and learn from the best

More To Explore

Commitizen

前言: 現今軟體功能複雜與龐大,在開發過程中,不管單人開發還是多人協作,對所編寫的代碼與代碼版本管控都是必須的

NFC x Mifare

實作紀錄 readMifare readNdef 知識補充 手機NFC隱含攻擊弱點 掌握原理避免無線盜刷 MI

Scroll to Top