數位產品的 UI 設計原則(下)

將設計著重在「使用者需求」才是最高遵循的原則

MiChang
MZ-UXUI
5 min readApr 15, 2017

--

Image Curtesy: Unsplash.com

承上篇,數位產品的 UI 設計的原則(上)提到了傳統設計師的盲點與侷限,以及重視使用者的觀念、善用適合的工具、符合基本的規範、為使用者尋找合適的介面呈現方式等幾點,這篇接著討論了介面的樣式層級、易用通用性以及 Prototype 的必要。

6. 定義介面的層級與樣式

綜觀產品的層級思考,以及介面元件的一致性是最重要的設計原則

介面最重要的是「一致性」的定義,必須考慮易讀、易用性,統一元件、色彩與文字的層級與樣式是最基本也是最重要的,各種元件的間距、元件的樣式、色彩的規範、文字的樣式層級、表單的介面…等等。
舉例來說,按鈕 / 連結的樣式在整個產品 / 全站上可能只有三至四種,但不僅僅是「樣式上」定義,使用意義上極為重要,什麼時候要用主要的按鈕呢?我們如果試著定義按鈕的層級可能如下:

  • 主要按鈕(第一級):第一主色、文字可能是第三級、外距數值可能會與其他主要元件的間距一致…
  • 次要按鈕(第二級):第一主色邊框搭配白色底色
  • 第三、四級按鈕:第二色或改變尺寸、改用文字連結等等

而一般來說主要按鈕(第一級)是 CTA(Call to action)類型,也就是需要誘發用戶進行最重要的動作時,必須要給予的一個操作介面;而次要按鈕通常是必要但不是最立即需被注意到的;第三四級可能就需要更加弱化,這種層級上的思考及展現是 UI 設計師必須要具備的。
而元件樣式並非僅針對單一場景作定義,比如上述的按鈕 / 連結的設計思考及決定,必須綜觀地考量到整個產品會有哪些觸發動作的層級,才能夠回過頭來去「針對層級」做進一步的樣式定義,而這也是最考驗介面設計師的地方。

7. 兼顧易用性與通用性

不要老想著發明新東西

我們 UX 夥伴 Zac 最常說的一句話「不要老想著發明新東西啊!」

沒錯,一個產品設計的創新是有其必要性,但這創新的精神並不需要徹底實踐在每一個設計決定與細節上,如果為了創新而把 App 或 Mobile site 的 Navigation 放在左邊或右邊,的確創新但佔空間、不好使用也不通用,而且在 Native App 還違反了基本的規則。
適時的創新通常是概念上,但還是得考慮易用性,且能夠讓使用者能夠在一兩次就學習起來。比如常見的漢堡選單,已經算是相當通用的 UI 設計元件,也不只一兩次聽到使用者表示不懂那是什麼,但他們依舊可以透過學習進而理解,當找不到要去哪裡,手指去畫面四處點擊時,該圖像會觸發的下一個動作是展開選單的動作,因此這個圖像所觸發的結果是可以容易被學習的

8. Prototype 在開發過程中的必要性

需要快速的測試市場,那麼就先把個人堅持放一邊吧!

有些設計師無法在設計尚未完整時,就把作品搬出來給人看,但如果要使用 Prototype 快速的測試市場,那麼就必須先把個人的堅持丟到一邊,上面說過了,重點永遠不是「你認為」產品怎麼樣才完整,而是使用者「懂不懂」跟「願不願意」繼續使用產品
UX 研究產生了結論,並且定義了 IA,挑選基礎架構設計中最重要的一兩條動線來做 Prototype 並進行使用者測試,即便結果出乎意料,也來得及在產品完整或正式推出前能夠調整到最符合市場的需求。而這個方式遠比要設計師做到自己最滿意、或是最符合 Product Owner 期待的產品,花了一年半載全部開發完才上線,然後發現使用者根本不買單還要來的實際多了。

9. 不能忽略內容的重要性

雖然是使用介面的設計,但內容的易讀性也不能忽略,介面與內容是息息相關的,甚至內容也是介面的一部分
例如當設計的產品是以文字內容為主,在研究結果後會知道在設計時必須要兼顧的文字表現以及格式有哪些,比方字型的挑選、文字層級與顏色的關聯性、字級大小的排列、圖片與圖說的搭配、引言的易讀性、重要文字的區隔與凸顯…等等,都會影響到使用者在閱讀時的感受與理解程度。

10. 善用生活與美感經驗

不斷的學習與感受

身為 UI 設計師可能會為各種不同的產品深入研究與設計,因此平常充實自己絕對有其必要性。如果對於某一個主題比較有共鳴或較為熟知,或自己也是使用者之一,那麼在設計起來也許會更有熱情,以及更能理解使用者在使用時的心情,他們想要從中得到什麼,也許能做出更貼和使用者的介面。
不過也曾經碰過本來對該產品沒興趣的設計師,因為接觸後反而引發興趣去學習或深入了解該服務內容的情況。多看看各式各樣的產品設計並深入體驗,對於充實自己還是有非常大的幫助,不論是設計的敏銳度、通用的 Design Pattern、最新的設計趨勢…等等,以及市面上各種付費或免費的資源、教學文章等等,並且不要抗拒去看看各種領域的新趨勢,不同體驗與知識對於設計產品時都可能會有意想不到的幫助

總結

數位產品的 UI 設計與以往的網頁設計還有很大的不同,那就是:

產品上線以後只是起點而非終點,因為沒有不迭代的產品

因此對 UX / UI 來說,重視使用者的體驗與感受永遠都是最重要的事情,所以如果哪一天 Product Owner 或是各方的 Stakeholder 為了某個功能的去留或樣式而意見相左的時候,不妨直接拿著半成品去問問看路人也許會有突破性的意見!

也感謝我的 UX 夥伴 Zac 能夠在這麼多次實作裡帶我去領略使用者經驗對於介面設計的重要性,以及累積這麼寶貴的經驗與心得,建議 UI 設計師們不妨有機會跟著 UX 設計師去做使用研究以及訪談,相信也會得到很多意想不到到的收穫!

--

--

MiChang
MZ-UXUI

Hi! I'm Mi Chang, I'm a user interface and website designer!