UIUX — 如何提升界面的易讀性
今天想跟大家聊聊關於「易讀性」的話題。UI UX 設計的基礎就是要滿足可用性及易用性，這篇將會對於界面上資訊的傳遞，分享一些原理跟設計技巧，讓用戶能一目了然。
我們將通過三個部分，帶你一步一步了解如何提升界面的易讀性。
了解產品的閱讀需求
基本原則與原理
實際應用手法
了解產品的閱讀需求
首先你需要先了解 視覺層級 ( Visual Hierarchy ) 的概念，視覺層級是運用大小、色彩、佈局、字體…等元素來區分資料的重要度，幫助用戶更輕鬆的瀏覽產品或是引導觀看的焦點，而根據不同的閱讀需求，我們也會使用不同的層級結構。
我們可以根據用戶閱讀的目的需求分為三種類型：
- 須要快速鎖定主要內容
- 有較多的資訊需要閱讀，但鎖定的內容比較平均
- 大量瀏覽同類型的內容
這種類型通常有明確的 CTA ( Call to Action ) ，會用比較大的對比，去強化需要被用戶閱讀的內容。
用戶不需要鎖定特定內容的情況下，資訊主次比較平均，會運用適當的視覺層級來區分主次，但反差不會太大。
這類型的資訊沒有需要特別突出的內容，更強調的是讓用戶沈浸式閱讀，所以會用反差比較小的視覺層級去展現。
我們可以根據閱讀需求去區分資訊主次，進而去考慮怎麼規劃層級結構，讓使用者可以更容易地吸收資訊。
基本原理與原則
認識完視覺層級及不同的閱讀需求，接著我們來聊聊如何強化資訊吧！
這個可以從了解人類的視覺搜尋 ( visual search ) 系統開始。在你的經驗中是不是也有碰過這種狀況，在人群中尋找自己的朋友，有時候找得很快，但有時候卻得花一些時間，你有想過這兩種情況的差異嗎？
從這張圖你應該就不難發現其中的差異。
按照目前的一些研究，目前有兩種搜尋理論被確認：
- 平行搜尋 ( Parallel Search )：干擾物的數量，不影響受試者找到目標所需花費的時間。
- 序列搜尋 ( Serial Search )：受試者找到目標的時間，隨干擾物變多而增加。
以上圖為例，黑色向上的箭頭就是「目標物」，而黑色向下及白色向下的箭頭就是「干擾物」。在平行搜尋 ( 最下面那張 ) 的情況下，不論增加多少干擾物( 向下的白色箭頭)，找到目標物的時間並不會有太大的差異；而在序列搜索 ( 中間那張 ) 時，當干擾物 ( 向下的黑色箭頭 ) 增加的時候，也會增加找到目標物的難度。
善用基本特徵的平行搜尋
在實驗中，也發現了一些基本特徵 ( Basic Feature ) 能在視覺神經的前端就被過濾辨識，不需要注意力介入就能夠輕易分辨，很容易就被搜尋出來。這些基本特徵有以下四種：
- 顏色
- 大小
- 線段方向
- 運動
當你在設計包含大量資料的界面時，就可以利用這些容易辨識的基本特徵，去增強視覺層次，元素的對比愈強，用戶愈能快速的獲得想得到的資訊，不同訊息的反差愈大，愈是能增強資訊的傳遞，是縮短用戶接收資訊耗費時間的關鍵，也減輕使用者的認知負擔。
實際應用手法
現在我們有了視覺層級的概念，也知道可以運用基本特徵來強化重要的資訊，接著來看看一些在界面設計上實際應用的手法吧！
大小
愈大的東西愈容易吸引目光，我們經常會把重要的操作及內容放大展示，把元素放大便可以簡單地讓你的設計重點變得清晰，甚至是可以超過由上往下由左而右的閱讀習慣，快速的吸引到用戶的眼球。
在設計網頁時，我們常會運用大字體的排版，不僅使畫面的視覺層次更豐富，也增加設計感，大字體排版也是近年流行的網頁設計趨勢。
顏色
明亮的顏色特別容易吸引目光，所以紅色及黃色就是常用在交通號誌上的顏色。但如果你想把所有明亮的顏色都用到界面上，你就必須注意這將會影響到整體的視覺層次，盡量用少的顏色，並且用於關鍵操作，才能有效地引導用戶。
在顏色的運用，另外一個關鍵就是「對比度」，不論是冷暖或亮暗的對比都能夠有效的吸引眼球。
文字
可以在想要強調的部分，使用不同的字體，但要切記不要使用太多字體，免得畫面變得太過雜亂，也需要注意選擇的字體是否容易辨識，一般來說一個數位產品中使用 1~2 種字體就夠了。
除了利用字體，我們更常利用字號、字色、字重的對比，來區分資訊的主次。
一般會分為主標題 ( Heading)、副標題 ( Subheading )、內文 ( Body ) 等等，視產品需求，可以再細分為主標題 1 、主標題 2 …等等。
排版
運用排版來強調視覺層級，主要的手法就是留白的運用，透過留白來產生層級關係。掌握一個簡單的原則：「有關聯的內容離得比較近」，就能夠達到資訊分層的效果。
利用線段或卡片來區分資訊也是很常使用的手法。
不過如果想要讓界面更加乾淨利落，運用適當留白去取代線段或形狀等元素，會是更好的方法喔！
結語
這些手法其實就是利用基本特徵，去加強或減弱元素的對比，呈現出理想的視覺層級，幫助用戶瀏覽你的界面。設計最重要的目的就是達到跟用戶的有效溝通，了解用戶的需求及目的，將複雜的資訊分類並轉化編排成容易閱讀的內容，就是設計師的重要工作了！
未來 PeerOne Technology 還會繼續分享一些設計上的小技巧，敬請期待！
