10 條數位產品 UI 設計原則:產品上線後只是起點、使用者需求最高!

文:MiChang – UI 設計師(MZ UIUX Studio

「原來使用者並不一定是我們所想像的樣子。」

在網頁設計中打滾了十多年後,帶著視覺設計與前端設計的一把老骨頭正式的來到了介面設計。很多站在前端的設計師、開發者應該不免有過這樣的經驗:跟 Project manager 一起討論「介面」以及「效果」該怎麼呈現。

視覺設計師多半是考慮風格與美觀度;前端設計師考慮在網頁上能否忠實呈現視覺設計;前端開發者則是實現互動效果與以及重視效能,而不管怎麼樣,這些專業最大的共同點在於,這些都是他們「自身」的能力與觀點。

「我覺得這樣比較漂亮」、「這個效果比較炫」、「老闆比較喜歡這個風格」、「客戶習慣用那支手機跟這個瀏覽器」、「我不會寫那個效果」、「時間來不及開發這麼複雜的動態」……。

那麼到底誰考慮過使用者的想法呢?當然現實有太多必須妥協的因素,而且不停上演著。但為了想要更了解實際的使用者經驗感受,並且不侷限於在各種能力上的技能不足,於是我們現在更專注在使用者介面上,想讓產品介面設計可以更貼近使用者。

而與 UX 夥伴在了解使用者的過程中也體會到了與以往不同的感受、以及學習到了不同於以往的經驗,在過程中也有許多衝擊。

1. 在介面設計之前

使用經驗訪談與研究結果,是使用者介面設計的前哨站。

開始設計之前必須考慮到產品的使用者,會使用該產品的人並不是 Product Designer、也不是 Product Manager,更不是 Product Owner,在 UX 進行使用者訪談以及取得結論前,必須先與 Product Owner 了解他們為產品本身定義的使用者族群、年齡層、偏向的性別 ……,也許更進一步的興趣、喜好等等,當然也有可能最開始的推測不見得是完全正確的。

所以取得使用者經驗的研究結果非常重要,且必須有專業的 UX 夥伴能夠從使用者訪談過程中去挖掘他們內心的渴望、心理狀態、在乎的事情、使用的習慣、與產品互動的方式等等,並搭配各種 UX 方法論從中研究並整理歸納出結論。

2. 把自己放在使用者後面吧!

你在意的事情,使用者可能根本一點不在意,甚至沒注意到。

在開始正式接觸並設計 UI 的過程,必須拋棄很多個人的「觀點」與「看法」,重點不是我們的感受,不是「我覺得」、「我認為」,而是「使用者」的感受。即便做了使用者訪談與研究,經歷方法論分析得到結論,並開始針對研究結果進行設計之後,接著再拿 Prototype 到市場上做測試,有時還是可能會被狠狠的打臉,質化分析研究後進行的設計並透過觀察來歸納得到結論,這整個過程實在不容易,而且可能有著血淋淋的結果。

檢視整個設計過程發現,也許在長時間的討論以及設計下,還是主觀的決定多,並逐漸偏離了市場,而這件事情也很值得我們去重視,這也是在每一次的產品設計中可以不斷學習到的地方。

這麼說並不是鼓勵設計師拋棄自己的主觀與專業,而是根據使用者的偏好與需求,用自己的專業將整個介面設計做出最適合使用者的產品。

3. 善用適合的工具

如果可以,就用 Sketch 吧! 

UI 設計師最常用的工具大概就是 Sketch 了。他最棒的地方是可以讓你重複使用元件而不必老是複製一樣的圖層,一個樣式改了就可以全部套用所有設定。

而且目前市面上的 Prototype 工具都圍繞著 Sketch 產生了各種大大小小的外掛,包含圖型運用、表單模組、模組元件、線上協作、內容生成、前端生成…等,也有很多設計師熟知的國外團隊開發的外掛,UXPin、inVision、Design+code、Flinto、Prott、Zeplin ……,一個團隊甚至會陸續開發各式各樣的外掛。

免費、付費的輔助工具非常多,從中去挑選適合搭配 Sketch 作業的工具,在很多文章、線上線下課程都有介紹,這邊就不多提了。重點是我們得要突破語言(多為國外資源)與系統(目前支援 mac)的界線才能取得這些珍貴的資源。

4. 符合基本的規則與規範

通常在對 Product Owner 進行訪談時,就已經能夠得到你需要針對什麼樣的產品來做設計,當然也有例外啦。Website、Mobile site、Native app、HTML5 app ……,設計前要取得使用者研究結論以外,還必須確認開發時要符合的作業系統以及瀏覽的裝置及媒介,Native app 對設計師來說比較需要學習系統給予的規範與文件如 Android 以及 iOS 都有相對應的 Guideline,在針對不同系統的設計上才能夠取得規範基礎。

Website 與 HTML5 app 相對來說輕鬆許多,雖然不需要強制遵循 UI Guideline,但若是 Web View,仍需進一步考慮在不同系統以及裝置的情況下,設計出使用者易用及符合通用規範的設計,比如多選的表單不會使用 radio button 來呈現。

5. 全域的設計方向制定

為使用者尋找合適的介面呈現方式

我們取得 UX 研究結果以及設定的人物誌(Persona),瞭解使用者的需求與偏好、使用行為、與產品的互動、期待產品帶來的價值,接著可以開始去尋找並且制定適合的介面設計,也許也能從類似族群使用的產品去尋找設計上的靈感,比如約飯局 App 能夠從交友 App 或平台得到一些想法上的刺激。

另外例如運動類型的產品,需要透過系統追蹤並倒出資料以即時反饋給使用者,那麼在追蹤資料、圖像、數據的顯示與重要程度就會遠遠超過其他資料,資料視覺化的呈現就相對重要。

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

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

 

介面最重要的是「一致性」的定義,必須考慮易讀、易用性,統一元件、色彩與文字的層級與樣式是最基本也是最重要的,各種元件的間距、元件的樣式、色彩的規範、文字的樣式層級、表單的介面 …… 等等。

舉例來說,按鈕 / 連結的樣式在整個產品、全站上可能只有三至四種,但不僅僅是「樣式上」定義,使用意義上極為重要,什麼時候要用主要的按鈕呢?我們如果試著定義按鈕的層級可能如下:

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

而一般來說主要按鈕(第一級)是 CTA(Call to action)類型,也就是需要誘發用戶進行最重要的動作時,必須要給予的一個操作介面;而次要按鈕通常是必要但不是最立即需被注意到的;第三四級可能就需要更加弱化,這種層級上的思考及展現是 UI 設計師必須要具備的。

而元件樣式並非僅針對單一場景作定義,比如上述的按鈕 / 連結的設計思考及決定,必須綜觀地考量到整個產品會有哪些觸發動作的層級,才能夠回過頭來去「針對層級」做進一步的樣式定義,而這也是最考驗介面設計師的地方。

7. 兼顧易用性與通用性

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

沒錯,一個產品設計的創新是有其必要性,但這創新的精神並不需要徹底實踐在每一個設計決定與細節上,如果為了創新而把 App 或 Mobile site 的 Navigation 放在左邊或右邊,的確創新但佔空間、不好使用也不通用,而且在 Native App 還違反了基本的規則。

適時的創新通常是概念上,但還是得考慮易用性,且能夠讓使用者能夠在一兩次就學習起來。比如常見的漢堡選單,已經算是相當通用的 UI 設計元件,也不只一兩次聽到使用者表示不懂那是什麼,但他們依舊可以透過學習進而理解,當找不到要去哪裡,手指去畫面四處點擊時,該圖像會觸發的下一個動作是展開選單的動作,因此這個圖像所觸發的結果是可以容易被學習的。

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

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

有些設計師無法在設計尚未完整時,就把作品搬出來給人看,但如果要使用 Prototype 快速的測試市場,那麼就必須先把個人的堅持丟到一邊,上面說過了,重點永遠不是「你認為」產品怎麼樣才完整,而是使用者「懂不懂」跟「願不願意」繼續使用產品。

UX 研究產生了結論,並且定義了 IA(Information Architecture),挑選基礎架構設計中最重要的一兩條動線來做 Prototype 並進行使用者測試,即便結果出乎意料,也來得及在產品完整或正式推出前能夠調整到最符合市場的需求。而這個方式遠比要設計師做到自己最滿意、或是最符合 Product Owner 期待的產品,花了一年半載全部開發完才上線,然後發現使用者根本不買單還要來的實際多了。

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

雖然是使用介面的設計,但內容的易讀性也不能忽略,介面與內容是息息相關的,甚至內容也是介面的一部分。

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

10. 善用生活與美感經驗

不斷的學習與感受

身為 UI 設計師可能會為各種不同的產品深入研究與設計,因此平常充實自己絕對有其必要性。如果對於某一個主題比較有共鳴或較為熟知,或自己也是使用者之一,那麼在設計起來也許會更有熱情,以及更能理解使用者在使用時的心情,他們想要從中得到什麼,也許能做出更貼和使用者的介面。

不過也曾經碰過本來對該產品沒興趣的設計師,因為接觸後反而引發興趣去學習或深入了解該服務內容的情況。多看看各式各樣的產品設計並深入體驗,對於充實自己還是有非常大的幫助,不論是設計的敏銳度、通用的 Design Pattern、最新的設計趨勢…等等,以及市面上各種付費或免費的資源、教學文章等等,並且不要抗拒去看看各種領域的新趨勢,不同體驗與知識對於設計產品時都可能會有意想不到的幫助。

總結

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

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

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

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

本文由  MiChang  授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為:《數位產品的 UI 設計原則 》;圖片來源:pexels, CC Licensed)

——

延伸閱讀

設計師自學完全手冊,讓你從零基礎到成為專業設計師
為什麼 iOS 系統就是比 Android 美?因為兩者的設計理念天差地別啊
UI 設計師推薦:13 本今年該看的產品設計、工作管理書單
堅持夢想不是偉大是固執!史丹佛最熱門課程教你用設計學「設計你人生」


321 倒數 ,2020 只剩 3 年,區塊鏈、5G、AI 技術將成熟到位。
從產業到社會,台灣沒剩多少時間準備。

12/9 TechOrange、BuzzOrange「CONNECT 2020」年度產業論壇,連結未來改革能量

點關鍵字看更多相關文章: