探析以用戶為中心的UI設計

李迪雅

摘 要：探討UI設計如何提升產品的用戶體驗，以達到更好的人機交互，從而達到產品整體使用感受的提升。從用戶體驗和UI設計的核心定義出發，介紹了用戶體驗及UI設計的職能以及二者的關系。通過對案例的研究分析，總結出以用戶為中心的UI設計原則，以明確UI設計的本質是以用戶為中心。

關鍵詞：UI設計；用戶體驗；界面設計

隨著社會收入水平的增加，人們開始不滿足于產品的基本功能，要求更加舒適的使用感、更加優美的外觀，以用戶為中心、以人為本越來越被重視，于是“用戶體驗”這個詞被越來越多地提出來。用戶體驗（UE）是指用戶在產品使用過程中建立起來的一種純主觀的感受。而用戶體驗設計（UED）則包括了前期用戶研究、中期UI設計以及后期產品迭代等等。“UI”即User用戶和Interface界面的縮寫。所以，UI設計，即用戶界面設計，是指對用戶界面的界面美觀、操作邏輯以及人機交互進行整體設計。好的UI設計不僅要讓產品變得美觀實用，更加要讓產品的操作簡單舒適，充分體現產品的定位和特點。

一、UI設計概述

（一）UI設計的職能

UI設計師的職能大體包括三方面：

1.用戶研究

用戶研究是進行UI設計的前期準備，主要目的是在產品有了明確的市場定位后，明確產品的目標用戶，了解目標用戶需求以定義產品設計的導向。通過對用戶的知覺特征、任務操作特征、認知心理特征的分析，以明確用戶痛點，進而細化產品概念。

2.交互設計

交互設計（Interaction Design），是定義和設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使其互相配合，從而共同達成某種目的。交互系統設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析，關注以人為本的用戶需求[1]。

產品和用戶之間的互動是情感交流的過程，也是信息交換的體現。交互設計以實現產品的易用性以及良好的用戶體驗為目標，能夠更好地實現人與產品之間的交流與互動[2]。

在設計流程中，交互設計的工作是在明確用戶需求后，準確定位用戶痛點，以用戶需求為中心進行交互動作的整體設計，進而設計出一套完整規范、交互動作流暢的交互原型。

3.界面設計

UI即 User Interface（用戶界面）的簡稱，UI設計最終的表達方式也終將歸于對用戶界面的詮釋與表達。當設計師需要把人、動作、工具或媒介、目的和場景等五要素合理整合到一起去完成一個界面并使用戶獲得良好的使用體驗時，他所遵循的規律必然有別于產品設計師，后者考慮的主要是如何合理運用結構、材料、色彩等物理屬性去實現產品的某項功能，而前者則需要考慮用戶主觀因素與產品的適應性[3]。

（二）UI設計的特點

UI設計作為一個新的設計領域，既與視覺設計、產品設計息息相關，又不盡相同。UI設計為產品用戶界面的整體設計，集用戶研究、交互設計和界面設計為一體，既要兼顧產品界面的實用性與美觀性，更要注重產品人機交互帶來的良好用戶體驗，優秀的UI設計考驗設計師對視覺設計創意與想法、對人機交互的清晰認知以及對用戶需求的準確理解。

（三）UI設計與用戶體驗的關系

《設計心理學》一書中曾提到過這樣一個故事：作者的一位朋友在歐洲時曾被困在某城市的郵局門道里出不來，最后是外面的人推開了旋轉門才得以出去，其實被困住的原因很簡單，只是由于門上的機關太過隱蔽，作者的朋友沒有看到，才導致他沒有找到開門的正確方法。設計人員只注重了門的美觀性，卻沒有注重門的實用性，導致用戶在使用過程中不得其門而入[4]。

這個例子恰好說明了雖然UI設計更加注重界面的設計，但用戶的使用感也是包括在界面之中的，產品的便捷性、易用性，包括用戶使用時界面結構與界面色彩的舒適度都與UI設計息息相關。好的設計不僅要有美觀的外表，更要有讓用戶能夠看懂的操作以及使用過程中舒適的感覺。

二、案例研究——好奇心日報UI設計的用戶體驗元素分析

（一）界面分析

好奇心日報的LOGO為黑底上面一個黃色的Q，Q既可指代Question，也可指帶“好奇心”中的“奇”。圖標簡潔不花哨，黑底黃字視覺沖擊力很大，容易抓住眼球，在花樣繁多的新聞類app中吸引用戶的視線。

《好奇心日報》的主色為黑黃搭配，黃色給人活潑、有趣的感覺，而黑色則讓人覺得沉穩，黃色與黑色搭配既能展現屬于年輕人的活力，又不會給人太過跳脫，不夠穩重的感覺。好奇心日報的歡迎頁面為大面積的黑色上點綴少量的黃色LOGO，這樣既保證了界面的簡潔，也避免了黑色過于沉悶的弊端，并且也造成了足夠的視覺沖擊力。

《好奇心日報》的排版采用了N字形列表式圖文1：1的縱向排列，期間穿插橫向的小版塊，列表式的排版能夠更好地凸顯文章的標題，使用戶能夠毫不費力地捕捉文章所要表達的中心思想。N字形布局對用戶有著縱向引導作用，使用戶的重點在左側文字標題，有利于使用者快速抓取文章內容。閱讀內頁的布局摒棄了一切不必要的繁雜內容，使用戶能夠集中注意力在文章內容上，文末的標簽及推薦也沒有與文章毫無關聯的情況出現。

《好奇心日報》極其注重細節：將大部分功能整合到底部懸浮菜單內，首頁僅僅留下NEWS和LAB兩個部分，懸浮菜單的原型仍然是抽屜式或者漢堡式菜單，但放在底部更加便于操控，瀏覽新聞時上滑菜單消失，下滑菜單出現，在閱讀體驗上更加舒適；下拉刷新Gif選用了畫風清新可愛的素描動圖，加深了使用時的情感體驗；過渡Gif也同樣的素描手寫風格，應用在文章加載里，能有效緩解用戶在等待文字、圖片加載時的焦慮。

（二）競品分析

1.今日頭條

今日頭條的座右銘是“我們不生產新聞，我們只做大數據的搬運工”。這句話雖是玩笑居多，但想要靠算法取勝的今日頭條，只讓我們感受到了遍地的八卦新聞，首頁充斥著“UC震驚體”與大量的廣告，真正可以看的內容寥寥無幾，對閱讀內容有質量要求的用戶肯定會轉移向垂直專業的新聞app。

2.澎湃新聞

由紙媒體過渡的新媒體，內容比較正式，打開后一股“老干部”氣息撲面而來，適合平時有看紙媒體習慣、關注時政的用戶。交互設計方面有著紙媒過渡的app的通病，用戶體驗不算好，若再不改進恐怕會流失不少用戶。

（三）總結

《好奇心日報》的成功證明了一個產品在戰略階段就應該考慮用戶體驗，產品從始至終考慮用戶需求，抓住用戶痛點，才有吸引用戶的資本，而在后期維護與產品迭代時更要時刻注意用戶體驗并及時做出反饋，以良好的體驗感和優質的內容留住用戶[5]。

三、以用戶為中心的UI設計原則

（一）可用性原則

產品的設計要清晰明了。當用戶打開一個app，卻不知如何下手，那么就算這個app設計的再漂亮也是失敗的。設計要清晰明了，讓用戶一看便知如何操作的界面才是好的界面設計。

（二）易用性原則

產品的易用體現在交互層級的簡單高效。交互層級太過復雜會讓用戶產生厭煩感，比如一個兩步就能做完的交互動作，為了顯示設計師的界面美觀硬是用四五步繞個大圈子才做完。設計的最終目的是為了服務于用戶，為了其他忽略用戶體驗就有些舍本逐末了。

（三）一致性原則

完整的界面必定是一致的，進行設計之前列好規范會讓界面的美觀大大增加，用戶體驗也會很好。人是很敏感的動物，很容易在同類的物品中發現異類，并且會不習慣，如果一個app每個頁面的前進、后退、進入、退出都長得不一樣，那么用戶在使用過程中會極其別扭，從而產生排斥心理。

四、結語

在用戶界面設計中，UI設計的本質是考慮用戶需求。用戶的敏感、挑剔決定了產品若想脫穎而出，必須使用戶感到舒適并不會厭倦，這就考驗設計師對用戶體驗的體會以及創新的能力了。

所以，一個好的產品，首先要有好的用戶體驗，其次要有反應快速的用戶追蹤，最后還需要適當的創新使用戶眼前一亮。

參考文獻：

[1]李世國，顧振宇.交互設計[M].北京：中國水利水電出版社，2012.

[2]李靜，李世國.從交互設計的視角探索人與產品的情感交流[J].包裝工程，2008，（09）：151-153.

[3]魏瑋，宮曉東.基于用戶體驗的人機界面發展趨勢[J].北京航空航天大學學報，2011，（07）：868-871.

[4]唐納德·A·諾曼.設計心理學[M].北京：中信出版集團，2015.

[5]黃晟.基于用戶體驗的APP設計研究[D].陜西科技大學，2012.

作者單位：

武漢東湖學院