編輯導(dǎo)語：用戶界面改版在一定程度上可以更深層次地滿足用戶多元需求，建立與用戶之間的良好互動，進(jìn)而提升用戶留存與轉(zhuǎn)化。本篇文章里，作者以基金直銷APP為例，總結(jié)了如何針對性進(jìn)行用戶界面改版的方法，一起來看一下。

上篇我們講到資管機(jī)構(gòu)用戶界面改版的必要性，在用戶界面改版時，要想根據(jù)自身情況找準(zhǔn)正確的改版方向，輸出并施行一套適合公司戰(zhàn)略且有效果的直銷平臺方案。

要想達(dá)到這樣的效果，需要系統(tǒng)地進(jìn)行用戶界面測評。本文我們以基金直銷APP為例，來討論如何針對性地進(jìn)行測評改版。

一、用戶界面測評及必要性

用戶界面測試英文名為User interface testing，簡稱UI測試，測試用戶界面的功能模塊的布局是否合理，整體風(fēng)格是否一致和各個控件的放置位置是否符合客戶使用習(xí)慣，更重要的是操作是否便捷、導(dǎo)航是否簡單易懂、界面中文字是否正確、命名是否統(tǒng)一、頁面是否美觀、文字及圖片組合是否完美等等。

優(yōu)秀的產(chǎn)品設(shè)計離不開專業(yè)的用戶界面測評，用戶界面測評可以為基金直銷平臺帶來諸多好處，我們來逐一分析。

1）建立公司品牌

目前資管平臺的直銷APP同質(zhì)化較為嚴(yán)重，對于對基金行業(yè)并無系統(tǒng)認(rèn)知的普通基民來說，難以建立品牌認(rèn)知。因此需要通過直銷平臺差異化的設(shè)計建立基民對品牌的認(rèn)知，而專業(yè)的用戶界面測評能夠在設(shè)計時考慮品牌的認(rèn)知問題，有利于直銷平臺承接品牌認(rèn)知的功能。

2）提高開發(fā)效率

在互聯(lián)網(wǎng)企業(yè)在開發(fā)產(chǎn)品時，常常出現(xiàn)因設(shè)計不規(guī)范或設(shè)計稿無法落地等導(dǎo)致在開發(fā)環(huán)節(jié)中不斷返工，從而降低了產(chǎn)品的開發(fā)效率。但如果在產(chǎn)品開發(fā)前進(jìn)行專業(yè)的用戶界面測評則可以避免此類問題。

3）提升用戶體驗

產(chǎn)品要想提升用戶留存和轉(zhuǎn)化，離不開平臺優(yōu)秀的用戶體驗。用戶界面測評可以讓設(shè)計師從用戶的角度出發(fā)查漏補(bǔ)缺，通過提高app的美觀性和流暢性，滿足用戶需求，與用戶產(chǎn)生共鳴；同時，通過對比同類型產(chǎn)品的同一功能，進(jìn)行細(xì)致的評審分析來發(fā)現(xiàn)自家產(chǎn)品的優(yōu)化點，從而提升產(chǎn)品的用戶體驗。

二、用戶測評流程

1. 依原則測評

首先，我們根據(jù)先前總結(jié)的且行之有效的通用設(shè)計理論對基金直銷平臺的UI界面進(jìn)行評估。

1）用戶界面基本原則

用戶界面基本原則是在進(jìn)行界面設(shè)計可遵循的行之有效的基本原則，將其作為界面測評的依據(jù)可以設(shè)計出精美好用的用戶界面，具體的原則如下。

易用性：屏幕上的按鈕、菜單項名稱應(yīng)該易懂，用詞準(zhǔn)確，沒有模糊的、容易導(dǎo)致歧義的用語，要與同一界面上的其他按鈕、菜單項易于區(qū)分，能望文知意最好。

一致性：在整個UI設(shè)計中保持一致的語言、布局和設(shè)計規(guī)律，使整個用戶體驗會顯得更加“通透”，一致的設(shè)計能夠讓用戶對于你的設(shè)計模式更快認(rèn)知、熟悉，并且在此基礎(chǔ)上快速適應(yīng)整體的體驗。美觀與協(xié)調(diào)性原則：界面大小應(yīng)該適合美學(xué)觀點，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。

熟悉性：熟悉性的重要目標(biāo)是要讓用戶能夠憑借直覺來操作UI界面，用戶自然地理解其中的內(nèi)容，操作自然便捷，用用戶熟悉的界面模式來進(jìn)行設(shè)計，可以讓用戶更快地上手操作。

層次感：層次感幫助用戶專注重要的內(nèi)容，避免讓界面中每個內(nèi)容都看起來很重要而產(chǎn)生的信息過載，將不同大小和顏色的元素相互搭配形成層次感，將復(fù)雜的結(jié)構(gòu)簡單化，有輕重緩急地呈現(xiàn)給用戶。

響應(yīng)性：響應(yīng)性即當(dāng)用戶與界面進(jìn)行交互時，系統(tǒng)及時告知用戶的操作是否成功，避免因不夠快速的響應(yīng)而讓用戶感到沮喪。如當(dāng)用戶點擊一個按鈕，按鈕的狀態(tài)變化可以讓用戶及時知曉他們操作的結(jié)果。

安全感：用戶能自由地作出選擇，且所有選擇都是可逆的，在用戶作出危險的選擇時有信息介入系統(tǒng)的提示，這樣會讓用戶會覺得很安全，自己的權(quán)益不會遭到損失。

人性化：高效率和用戶滿意度是人性化的體現(xiàn)，應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。

記憶負(fù)擔(dān)：人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度，人類的短期記憶有限且極不穩(wěn)定，24小時內(nèi)存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

2）其他原則

在用戶界面測評時，除了以上用戶界面的基本原則以外，我們還將一些視覺理論作為補(bǔ)充，來滿足不同項目的不同需求。

① 尼爾森F型視覺模型(視覺流）

尼爾森F型視覺模型由 Jakob Nielsen于2006年提出，即：“人們在第一次觀看頁面時，視線會呈F的形狀關(guān)注頁面?！毕葟捻敳块_始從左到右水平移動，目光再下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個F形狀，此時我們的閱讀速度較慢，更為系統(tǒng)和條理性。

根據(jù)尼爾森F模型，我們可以得出幾個心理暗示：用戶快速掃視時，具體的文字并不重要；多用小標(biāo)題、短句引起閱讀者注意；將重要的內(nèi)容放在最上邊。

② 格式塔原則

格式塔原則即人在觀看事物時眼腦是共同作用的，不是一開始就區(qū)分事物的各個部分，而是將各個部分組合起來，使之成為一個更易于理解的整體。常用于設(shè)計中的信息結(jié)構(gòu)與界面布局，使之更加合理性。

③ 文字排版四大原則

文字排版決定了整個頁面的風(fēng)格傾向，也是最能體現(xiàn)UI設(shè)計細(xì)節(jié)的地方。合理、清晰的文字排版可以使界面更加有設(shè)計感。

1. 親密原則：指相關(guān)的部分組織在一起，安排好他們之間的間距與主次。要想使得文字與文字之間閱讀流暢與美觀，就要分清主次，調(diào)整好組與組之間的間距。
2. 對比原則：對比分為大小對比、粗細(xì)對比，顏色對比，該原則可以使界面主次分明，突出重點。
3. 對齊原則：該原則使界面上的元素都與另一個元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。
4. 重復(fù)原則：即相似原則，對重復(fù)出現(xiàn)的內(nèi)容賦予相同的屬性，遵循設(shè)定好的規(guī)律來將元素重復(fù)使用可以使頁面達(dá)到統(tǒng)一效果。

2. 總結(jié)問題

其次，在依據(jù)上述理論進(jìn)行專業(yè)的界面測評后，根據(jù)測評結(jié)果整理出界面的諸多問題，在對問題進(jìn)行優(yōu)先級區(qū)分后，方可產(chǎn)出界面的優(yōu)化方向。

根據(jù)以往的案例分析，我們匯總了資管機(jī)構(gòu)線上直銷平臺界面普遍存在的問題，以便更好地為不同的項目提供解決方案。目前界面普遍存在主次層級不清晰、信息表達(dá)不明確、信息架構(gòu)不合理、界面不美觀等問題。

1）主次層級不清晰

基金直銷平臺產(chǎn)品功能入口普遍較多，僅僅采用宮格的形式平鋪所有功能入口，會導(dǎo)致層級不夠清晰簡潔，無法突出核心功能入口，更不利于功能擴(kuò)展；同時，用戶在瀏覽時需要跳躍著閱讀圖標(biāo)下方的文字，入口過多會降低用戶讀取效率。

2）信息表達(dá)不明確

當(dāng)產(chǎn)品功能過多時，用戶無法預(yù)知點擊某個按鈕會發(fā)生什么，用戶可能需要經(jīng)過試錯才明確這些信息的含義，這樣很容易導(dǎo)致用戶量的降低。

3）信息架構(gòu)不合理

信息架構(gòu)的不合理無法讓用戶快速找到自己想觸達(dá)的模塊，甚至使用戶在操作時猶豫，難以找到自己想要的功能；合理的模塊入口應(yīng)滿足用戶的心理模型、滿足用戶預(yù)期。

4）界面不美觀

互金直銷平臺的界面常因模塊過多而使得界面的信息視覺不流暢、規(guī)范不統(tǒng)一、信息層級不夠清晰、信息分類不夠明確等等，這很容易造成界面的不美觀。

3. 提出優(yōu)化方案

最后，通過以上環(huán)節(jié)發(fā)現(xiàn)的問題定義用戶界面的優(yōu)化方向，根據(jù)改版分析出的常見問題，我們梳理出以下幾個優(yōu)化方向的例子：

1）優(yōu)化信息層級

通過對信息層級的優(yōu)化可以使界面主次分明，方便用戶快速查找到自己想要的功能，一般使用以下幾個方法來優(yōu)化信息層級。

① 進(jìn)行信息梳理

為了能夠有效地對界面中的信息層級進(jìn)行劃分，首先要做的就是梳理信息，對頁面內(nèi)的信息先進(jìn)行組織歸納，將同類信息或者關(guān)聯(lián)性強(qiáng)的信息組織到一起。

② 加強(qiáng)信息之間的對比

對頁面內(nèi)的信息完成梳理之后，借鑒親密性原則對信息進(jìn)行設(shè)計；親密性有助于信息的統(tǒng)一性，符合用戶最同類信息順延閱讀的心智模型，減少視覺混亂，為用戶帶來了提供一個邏輯清晰的信息結(jié)構(gòu)系統(tǒng)；最后使用對比原則，先后按照大小對比、字重對比、色彩對比、字體對比等方式對信息進(jìn)行進(jìn)一步加強(qiáng)。

③ 視覺流

通過視覺流的原則，來審視自己的設(shè)計是否符合用戶自左到右，自上到下的閱讀習(xí)慣。

2）遵從環(huán)境貼切原則

在界面中盡量使用用戶熟悉的語言、文字、語句，或者其他用戶熟悉的概念。界面中的信息盡量貼近真實世界，讓信息更自然，邏輯上方可容易被用戶理解。

3）提升界面美感

根據(jù)平臺的品牌調(diào)性從形、色、字、構(gòu)、質(zhì)等方面來提升界面的美感，通過定義平臺的主要用戶人群來把握界面的風(fēng)格走向，并通過融入最新的UI設(shè)計風(fēng)格和平臺的vi元素，來提升界面的品牌調(diào)性。

樹木的向上生長離不開樹苗時期的方向確立，用戶界面測評正是為產(chǎn)品的改造塑就一個支撐架，只有發(fā)揚(yáng)優(yōu)點，完善缺點，打造特點，才能使產(chǎn)品更符合用戶的心里預(yù)期，更多人選擇和認(rèn)可你的產(chǎn)品。

同時，未來金融APP的用戶更多的基于年輕化的用戶，這個群體崇尚創(chuàng)新，對傳統(tǒng)的金融行業(yè)來說，需要在各個方面都讓用戶感知到創(chuàng)新的元素。

所以，除了按照文中所描述的方法對產(chǎn)品進(jìn)行用戶界面測評外，還需著眼于未來，融入更多創(chuàng)新的想法，在追求完美中不停地完善，才能創(chuàng)造出大眾買單、用戶體驗良好的金融產(chǎn)品。

本文由 @道樂研究院 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議