探析以用戶為中心的UI設(shè)計(jì)

李迪雅

摘 要：探討UI設(shè)計(jì)如何提升產(chǎn)品的用戶體驗(yàn)，以達(dá)到更好的人機(jī)交互，從而達(dá)到產(chǎn)品整體使用感受的提升。從用戶體驗(yàn)和UI設(shè)計(jì)的核心定義出發(fā)，介紹了用戶體驗(yàn)及UI設(shè)計(jì)的職能以及二者的關(guān)系。通過對(duì)案例的研究分析，總結(jié)出以用戶為中心的UI設(shè)計(jì)原則，以明確UI設(shè)計(jì)的本質(zhì)是以用戶為中心。

關(guān)鍵詞：UI設(shè)計(jì)；用戶體驗(yàn)；界面設(shè)計(jì)

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

一、UI設(shè)計(jì)概述

（一）UI設(shè)計(jì)的職能

UI設(shè)計(jì)師的職能大體包括三方面：

1.用戶研究

用戶研究是進(jìn)行UI設(shè)計(jì)的前期準(zhǔn)備，主要目的是在產(chǎn)品有了明確的市場定位后，明確產(chǎn)品的目標(biāo)用戶，了解目標(biāo)用戶需求以定義產(chǎn)品設(shè)計(jì)的導(dǎo)向。通過對(duì)用戶的知覺特征、任務(wù)操作特征、認(rèn)知心理特征的分析，以明確用戶痛點(diǎn)，進(jìn)而細(xì)化產(chǎn)品概念。

2.交互設(shè)計(jì)

交互設(shè)計(jì)（Interaction Design），是定義和設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使其互相配合，從而共同達(dá)成某種目的。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和“用戶體驗(yàn)”兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求[1]。

產(chǎn)品和用戶之間的互動(dòng)是情感交流的過程，也是信息交換的體現(xiàn)。交互設(shè)計(jì)以實(shí)現(xiàn)產(chǎn)品的易用性以及良好的用戶體驗(yàn)為目標(biāo)，能夠更好地實(shí)現(xiàn)人與產(chǎn)品之間的交流與互動(dòng)[2]。

在設(shè)計(jì)流程中，交互設(shè)計(jì)的工作是在明確用戶需求后，準(zhǔn)確定位用戶痛點(diǎn)，以用戶需求為中心進(jìn)行交互動(dòng)作的整體設(shè)計(jì)，進(jìn)而設(shè)計(jì)出一套完整規(guī)范、交互動(dòng)作流暢的交互原型。

3.界面設(shè)計(jì)

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

（二）UI設(shè)計(jì)的特點(diǎn)

UI設(shè)計(jì)作為一個(gè)新的設(shè)計(jì)領(lǐng)域，既與視覺設(shè)計(jì)、產(chǎn)品設(shè)計(jì)息息相關(guān)，又不盡相同。UI設(shè)計(jì)為產(chǎn)品用戶界面的整體設(shè)計(jì)，集用戶研究、交互設(shè)計(jì)和界面設(shè)計(jì)為一體，既要兼顧產(chǎn)品界面的實(shí)用性與美觀性，更要注重產(chǎn)品人機(jī)交互帶來的良好用戶體驗(yàn)，優(yōu)秀的UI設(shè)計(jì)考驗(yàn)設(shè)計(jì)師對(duì)視覺設(shè)計(jì)創(chuàng)意與想法、對(duì)人機(jī)交互的清晰認(rèn)知以及對(duì)用戶需求的準(zhǔn)確理解。

（三）UI設(shè)計(jì)與用戶體驗(yàn)的關(guān)系

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

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

二、案例研究——好奇心日?qǐng)?bào)UI設(shè)計(jì)的用戶體驗(yàn)元素分析

（一）界面分析

好奇心日?qǐng)?bào)的LOGO為黑底上面一個(gè)黃色的Q，Q既可指代Question，也可指帶“好奇心”中的“奇”。圖標(biāo)簡潔不花哨，黑底黃字視覺沖擊力很大，容易抓住眼球，在花樣繁多的新聞?lì)恆pp中吸引用戶的視線。

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

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

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

（二）競品分析

1.今日頭條

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

2.澎湃新聞

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

（三）總結(jié)

《好奇心日?qǐng)?bào)》的成功證明了一個(gè)產(chǎn)品在戰(zhàn)略階段就應(yīng)該考慮用戶體驗(yàn)，產(chǎn)品從始至終考慮用戶需求，抓住用戶痛點(diǎn)，才有吸引用戶的資本，而在后期維護(hù)與產(chǎn)品迭代時(shí)更要時(shí)刻注意用戶體驗(yàn)并及時(shí)做出反饋，以良好的體驗(yàn)感和優(yōu)質(zhì)的內(nèi)容留住用戶[5]。

三、以用戶為中心的UI設(shè)計(jì)原則

（一）可用性原則

產(chǎn)品的設(shè)計(jì)要清晰明了。當(dāng)用戶打開一個(gè)app，卻不知如何下手，那么就算這個(gè)app設(shè)計(jì)的再漂亮也是失敗的。設(shè)計(jì)要清晰明了，讓用戶一看便知如何操作的界面才是好的界面設(shè)計(jì)。

（二）易用性原則

產(chǎn)品的易用體現(xiàn)在交互層級(jí)的簡單高效。交互層級(jí)太過復(fù)雜會(huì)讓用戶產(chǎn)生厭煩感，比如一個(gè)兩步就能做完的交互動(dòng)作，為了顯示設(shè)計(jì)師的界面美觀硬是用四五步繞個(gè)大圈子才做完。設(shè)計(jì)的最終目的是為了服務(wù)于用戶，為了其他忽略用戶體驗(yàn)就有些舍本逐末了。

（三）一致性原則

完整的界面必定是一致的，進(jìn)行設(shè)計(jì)之前列好規(guī)范會(huì)讓界面的美觀大大增加，用戶體驗(yàn)也會(huì)很好。人是很敏感的動(dòng)物，很容易在同類的物品中發(fā)現(xiàn)異類，并且會(huì)不習(xí)慣，如果一個(gè)app每個(gè)頁面的前進(jìn)、后退、進(jìn)入、退出都長得不一樣，那么用戶在使用過程中會(huì)極其別扭，從而產(chǎn)生排斥心理。

四、結(jié)語

在用戶界面設(shè)計(jì)中，UI設(shè)計(jì)的本質(zhì)是考慮用戶需求。用戶的敏感、挑剔決定了產(chǎn)品若想脫穎而出，必須使用戶感到舒適并不會(huì)厭倦，這就考驗(yàn)設(shè)計(jì)師對(duì)用戶體驗(yàn)的體會(huì)以及創(chuàng)新的能力了。

所以，一個(gè)好的產(chǎn)品，首先要有好的用戶體驗(yàn)，其次要有反應(yīng)快速的用戶追蹤，最后還需要適當(dāng)?shù)膭?chuàng)新使用戶眼前一亮。

參考文獻(xiàn)：

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

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

[3]魏瑋，宮曉東.基于用戶體驗(yàn)的人機(jī)界面發(fā)展趨勢[J].北京航空航天大學(xué)學(xué)報(bào)，2011，（07）：868-871.

[4]唐納德·A·諾曼.設(shè)計(jì)心理學(xué)[M].北京：中信出版集團(tuán)，2015.

[5]黃晟.基于用戶體驗(yàn)的APP設(shè)計(jì)研究[D].陜西科技大學(xué)，2012.

作者單位：

武漢東湖學(xué)院