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

使用者介面設計與網頁或視覺、平面設計最不一樣的地方是,重視使用者經驗。

Image Curtesy: Unsplash.com
「原來使用者並不一定是我們所想像的樣子。」

在網頁設計中打滾了十多年後,帶著視覺設計與前端設計的一把老骨頭正式的來到了介面設計。很多站在前端的設計師 / 開發者應該不免有過這樣的經驗,跟 Project manager 一起討論「介面」以及「效果」該怎麼呈現,視覺設計師多半是考慮風格與美觀度、前端設計師考慮在網頁上能否忠實呈現視覺設計、前端開發者則是實現互動效果與以及重視效能,而不管怎麼樣,這些專業最大的共同點在於,這些都是他們「自身」的能力與觀點。
「我覺得這樣比較漂亮」、「這個效果比較炫」、「老闆比較喜歡這個風格」、「客戶習慣用那支手機跟這個瀏覽器」、「我不會寫那個效果」、「時間來不及開發這麼複雜的動態」…,那麼到底誰考慮過使用者的想法呢?當然現實有太多必須妥協的因素,而且不停上演著。但為了想要更了解實際的使用者經驗感受,並且不侷限於在各種能力上的技能不足,於是我們現在更專注在使用者介面上,想讓產品介面設計可以更貼近使用者。
而與 UX 夥伴在了解使用者的過程中也體會到了與以往不同的感受、以及學習到了不同於以往的經驗,在過程中也有許多衝擊。

​1. ​在介面設計之前

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

開始設計之前必須考慮到產品的使用者,會使用該產品的人並不是 Product Designer、也不是 Product Manager,更不是 Product Owner,在 UX 進行使用者訪談以及取得結論前,必須先與 Product Owner 了解他們為產品本身定義的使用者族群、年齡層、偏向的性別…,也許更進一步的興趣、喜好等等,當然也有可能最開始的推測不見得是完全正確的。
所以取得使用者經驗的研究結果非常重要,且必須有專業的 UX 夥伴能夠從使用者訪談過程中去挖掘他們內心的渴望、心理狀態、在乎的事情、使用的習慣、與產品互動的方式等等,並搭配各種 UX 方法論從中研究並整理歸納出結論。

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

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

在開始正式接觸並設計 UI 的過程,必須拋棄很多個人的「觀點」與「看法」,重點不是我們的感受,不是「我覺得」、「我認為」,而是「使用者」的感受。即便做了使用者訪談與研究,經歷方法論分析得到結論,並開始針對研究結果進行設計之後,接著再拿 Prototype 到市場上做測試,有時還是可能會被狠狠的打臉,質化分析研究後進行的設計並透過觀察來歸納得到結論,這整個過程實在不容易,而且可能有著血淋淋的結果。
檢視整個設計過程發現,也許在長時間的討論以及設計下,還是主觀的決定多,並逐漸偏離了市場,而這件事情也很值得我們去重視,這也是在每一次的產品設計中可以不斷學習到的地方。
這麼說並不是鼓勵設計師拋棄自己的主觀與專業,而是根據使用者的偏好與需求,用自己的專業將整個介面設計做出最適合使用者的產品。

3. 善用適合的工具

如果可以,就用 Sketch 吧!
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 來呈現。(易用與通用性請見數位產品的 UI 設計原則(下)

5. 全域的設計方向制定

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

我們取得 UX 研究結果以及設定的人物誌(Persona),瞭解使用者的需求與偏好、使用行為、與產品的互動、期待產品帶來的價值,接著可以開始去尋找並且制定適合的介面設計,也許也能從類似族群使用的產品去尋找設計上的靈感,比如約飯局 App 能夠從交友 App 或平台得到一些想法上的刺激。
另外例如運動類型的產品,需要透過系統追蹤並倒出資料以即時反饋給使用者,那麼在追蹤資料、圖像、數據的顯示與重要程度就會遠遠超過其他資料,資料視覺化的呈現就相對重要。