互動設計原則(上)

Ming
Jul 30, 2021

--

前陣子整理了一下關於 UI/UX 相關的設計原則,發現有很多定律都能套用在現在的介面上,背後的解釋也有重疊之處,我也就每個定律增添了實例,方便思考~這次分為上下篇,希望內容精簡好吸收👍

1/ Fitts’ Law / 菲茨定律(費茨法則)
由心理學家 Paul Fitts 於 1954 年提出,指手點動作到目標的時間,與「和目標位置的距離」和「目標大小有關」

● 按鈕在合理範圍下,可點擊區域越大,越容易操作
● 螢幕邊角常放置選單或按鈕元素,因為用戶最後絕對會停在這個地方,無法再超出去了

Dcard的編輯按鈕就設置在螢幕右下角

● 右鍵操作欄更快速讓用戶對想操作的目標進行動作

手機長按Gmail會跑出快速選單

2/ Hick’s Law / 席克定律(希克法則)
由英國心理學家 William Edmund Hick 與美國心理學家 Ray Hyman 共同提出,又稱 Hick-Hyman 法則。主要在講一個人面臨的選擇越多,所需要作出決定的時間就越長

● 做好選單的分類索引,而不是把全部分類都匯集在第一個頁面,避免使用者一次接收太多選項
● 讓用戶知道進行度與完成度,例如同樣內容分成三個頁面,比全部塞在一個頁面中,用戶完成度會更高

目前我做的wireframe就是遵照此定律

3/ 神奇數字 7±2 法則
和席克定律類似,1956 年由美國認知心理學家 George Armitage Miller 對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項訊息,在記憶了 5–9 項資訊後人類的頭腦就會開始出錯。

● 例如網頁導覽列區塊通常不超過9個(有些會用滑動方式、「更多」按鍵來藏多出來的功能選項)

dribble的網頁導覽列有5個選項

● App下方 tab bar不超過5個(不過最近發現Facebook 新增第六個「功能表」)

OpenPoint 的tab bar 有5個選項

4/ The Law Of Proximity 接近法則
根據格式塔(Gestalt)心理學,也就是我們熟知的完形心理學,指當對象離得太近的時候,意識會認為它們是相關的

● 輸入框和按鈕靠近,則視為同一個區塊
● 商品頁面中,每個單品與其說明靠近,自成一個區塊

二拾衫官網頁面,每個商品自成一格

了解定律之後,重點是如何將觀念融會貫通並運用在設計上,其實有些都蠻直覺的,看似簡單的設計原來悄悄影響著我們閱讀的舒適度、使用的有效性等等!敬請期待下一篇~👋

--

--

Ming

對於人的故事充滿好奇心, 重視自我成長、心靈對話, 喜歡唱歌、抹茶、貓。