以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。

有時(shí)，優(yōu)化網(wǎng)站或移動(dòng)應(yīng)用的界面會(huì)讓用戶感到瓦解。人們可能會(huì)對(duì)新的配色方案、元素的定位或其他類似的東西感到失望。顯然，用戶這樣的反應(yīng)并不是你所期望的界面優(yōu)化。

即使是像Facebook、Instagram和Spotify這樣的大型成功公司，也經(jīng)常受到負(fù)面的反饋。例如，在 2017 年 2 月，Spotify更新了它的網(wǎng)頁播放器，引入了新的布局、新的搜索功能和帶藝術(shù)范的頁面。

這一改變導(dǎo)致許多用戶在社交媒體上表達(dá)了本身的不滿。一位推特用戶甚至寫道： “哦，太酷了，他們升級(jí)了Spotify網(wǎng)頁播放器，讓它變得更糟糕了! ”太棒了!”

那么，如安在你改變UI界面的時(shí)候，不會(huì)讓用戶不滿意呢?下面，我們一起來看看有哪些技能可以幫你在改變產(chǎn)品界面的同時(shí)，又能使你的用戶對(duì)此改變感到滿意。

人們是如何感知信息的

現(xiàn)如今，界面有了多樣性，用戶每次遇到新的(或更新的)界面都必需學(xué)習(xí)。因此，要用戶花時(shí)間尋找功能時(shí)就會(huì)讓他們感覺不愉快。

阿爾托大學(xué)(Aalto University)比來進(jìn)行了一項(xiàng)研究，他們對(duì)視覺搜索進(jìn)行了建模，試圖找出人們是如何獲取新的或改變的界面。

結(jié)果，研究人員認(rèn)為，用戶快速學(xué)習(xí)的關(guān)鍵在于三個(gè)因素：長(zhǎng)期記憶，短期視覺記憶和眼球運(yùn)動(dòng)。知道人們?nèi)绾胃兄曈X信息使UI / UX設(shè)計(jì)人員能夠創(chuàng)建出不妨事礙用戶找到本身想要功能的高效界面(和微調(diào)的UI界面)。

包孕尼爾森諾曼集團(tuán)(Nielsen Norman Group)在內(nèi)的多家研究公司對(duì)人們是如何瀏覽一頁的信息以及他們的眼睛如何移動(dòng)的問題進(jìn)行了研究。據(jù)該小組的研究表白，用戶通常在閱讀或不雅觀察內(nèi)容時(shí)遵循以下三種模式。

古騰堡圖表

古騰堡圖表反映了西方的閱讀文化： 從上到下，從左到右。按照古騰堡圖表，頁面上的信息應(yīng)該被分成四個(gè)象限，讓用戶更容易感知豐富的文本內(nèi)容：

古騰堡圖介紹了內(nèi)容擺列原理，闡明了如何讓用戶更容易找到相關(guān)內(nèi)容。

如你所見，用戶選擇先瀏覽左上角的象限;這個(gè)象限被稱為主視覺區(qū)。你應(yīng)該把你的關(guān)鍵內(nèi)容，好比標(biāo)題和標(biāo)識(shí)表記標(biāo)幟，放在這個(gè)位置。

接下來，用戶的眼睛移動(dòng)到強(qiáng)烈的休閑區(qū)域。可考慮在本區(qū)域中提供某種后續(xù)內(nèi)容，例如你之前表達(dá)的想法的圖片說明。

然后，用戶就會(huì)進(jìn)入弱的休閑區(qū)，這個(gè)區(qū)域不太可能會(huì)引起人們的注意。它是用戶在閱讀路途上的“休息”區(qū)域。最后，在右下角的一個(gè)終端區(qū)域?qū)⒁龑?dǎo)用戶得出合乎邏輯的結(jié)論。建議將CTA(行為召喚)在此區(qū)域中以文本、視頻或鏈接的形式出現(xiàn)。

在界面上使用古登堡圖表可讓用戶駕馭閱讀節(jié)奏和增強(qiáng)對(duì)閱讀的理解。這種模式還能讓你洞察到在那些最有可能被閱讀或注意的地方放置重要元素。

F模式

F模式體現(xiàn)元素在頁面上的類似F的定位。據(jù)尼爾森·諾曼(Nielsen Norman)的研究顯示，人們通過橫向移動(dòng)眼睛開始接觸內(nèi)容。接下來，他們掃描一條垂直線，試圖找到他們感興趣的點(diǎn)，如果他們找到他們想看的內(nèi)容，他們會(huì)繼續(xù)橫向?yàn)g覽內(nèi)容。

Nielsen Norman對(duì) 200 名參與者進(jìn)行了研究，結(jié)果顯示其中一種流行的瀏覽內(nèi)容模式是F型的。

為了提高用戶體驗(yàn)，可以使用諸如要點(diǎn)、排版、彩色按鈕、高亮文本等元素。這些元素賦予界面視覺權(quán)重，，并指出頁面中重要的點(diǎn)。

使用F模式可以確保頁面上有一個(gè)高效的視覺層次結(jié)構(gòu)，這樣用戶就可以快速瀏覽內(nèi)容并快速找到相應(yīng)問題的解決方案。

例如，Medium之前的布局利用了F模式，將主要內(nèi)容(博客文章)放在左邊，同時(shí)把側(cè)邊欄放在右邊。側(cè)邊欄中包羅了非主要內(nèi)容，但仍然是相關(guān)內(nèi)容，包孕每日摘要、標(biāo)簽和“關(guān)于我們”和“使用條款”的鏈接。

Medium之前的排版就是F模式的鮮明案例

現(xiàn)如今，Medium已經(jīng)沒在使用帶有圖片預(yù)覽和大標(biāo)題的經(jīng)典線程模式。相反，新的博客文章以列表形式顯示，因此他們將用戶的注意力吸引到文章的作者，而不但僅是圖片預(yù)覽。

Z模式

Z模式被非官方認(rèn)為是登陸頁面的王者，因?yàn)樗w了視覺層次結(jié)構(gòu)，內(nèi)容結(jié)構(gòu)和CTA等重要方面。與更適合文本或展現(xiàn)繁重內(nèi)容頁面的F模式差別，Z模式有效地將用戶的注意力集中在帶最小副本的登錄頁面上。

你可能已經(jīng)猜到，這個(gè)模式代表了用戶眼睛的類似于z圖案的移動(dòng)。

簡(jiǎn)約的界面可以從Z模式中獲益，它以一致的布局和視覺上令人滿意的內(nèi)容結(jié)構(gòu)為用戶帶來愉悅。

在使用z模式設(shè)計(jì)時(shí)，應(yīng)遵循以下結(jié)構(gòu)：

1.頂部的水平線應(yīng)該包孕醒目的內(nèi)容和元素，好比logo和導(dǎo)航欄(這樣用戶很快就能拜候網(wǎng)站的相應(yīng)頁面)。

2.遵循經(jīng)典的講故事方式，對(duì)角線應(yīng)該向用戶介紹主要內(nèi)容，包孕主要內(nèi)容，吸引注意力的圖片，幻燈片等。

3.最后，一條較低的水平線應(yīng)該有一個(gè)CTA(行為召喚)，它可以刺激用戶執(zhí)行某些動(dòng)作，好比注冊(cè)、訂閱或購(gòu)買。

底部線條：

標(biāo)簽：鹽城 林芝 東營(yíng) 九江 烏魯木齊