“ 當(dāng)用戶(hù)打開(kāi)一個(gè)新站點(diǎn)時(shí)，他的焦點(diǎn)很寬泛；當(dāng)用戶(hù)專(zhuān)注一項(xiàng)任務(wù)時(shí)，他的焦點(diǎn)就會(huì)聚焦?！逗?jiǎn)約至上》”

作為一名UI，深刻的意識(shí)到交互的東西是輔助UI的一個(gè)利器。當(dāng)你知道他存在的價(jià)值以及目的，就知道他應(yīng)該存在在哪個(gè)位置，不是哪好看就放在那里。充電中~本篇就對(duì)我了解到的交互和UI的東西做個(gè)總結(jié)，分享給大家。

01

—

讓功能容易找到

現(xiàn)實(shí)中的一些例子，很好的驗(yàn)證了上述《簡(jiǎn)約至上》里面的論點(diǎn)。下圖是大家比較熟悉的一些例子。當(dāng)我們對(duì)某步操作出現(xiàn)困惑的時(shí)候，就會(huì)想去尋求解決辦法，好的交互是站在用戶(hù)的前面替用戶(hù)考慮問(wèn)題。出現(xiàn)了問(wèn)題，讓用戶(hù)第一時(shí)間知道錯(cuò)在哪怎么修改，只有看到了問(wèn)題才有可能被改正。

當(dāng)操作出現(xiàn)問(wèn)題的時(shí)候，用戶(hù)會(huì)過(guò)于關(guān)注屏幕上的問(wèn)題區(qū)域，首先要做到的就是讓用戶(hù)看到你提供的解決方案的入口，形式有icon、文字、文字+icon等等。不難理解，當(dāng)操作失誤時(shí)會(huì)有Tips提示，比如“您的賬號(hào)輸入有誤”等等，這些tips一定都是存在該問(wèn)題的周?chē)ㄉ厦妗⑾旅?、右邊，有的還會(huì)直接滾動(dòng)到該問(wèn)題出現(xiàn)的位置）；當(dāng)然也有反面例子，大家在平常操作有沒(méi)有遇到過(guò)明明都填寫(xiě)好了一切，點(diǎn)擊下一步的時(shí)候一直不跳轉(zhuǎn)頁(yè)面，多次點(diǎn)擊后才發(fā)現(xiàn)格式輸入有誤，原因可能是你在中間操作沒(méi)有關(guān)注到沉在底部一閃而過(guò)而且?guī)в型该鞫鹊膖oast提示?。ù颂幾⒁獠皇撬械膖oast都不允許放在底部，也是要根據(jù)情況來(lái)，例如郵箱的狀態(tài)提醒就在下面）

還要注意克制和隱藏，不能通篇都是提供解決方案的入口，這樣會(huì)影響用戶(hù)的操作。一個(gè)典型的例子，在網(wǎng)頁(yè)上搜索一篇文章，假想一下，如果在通篇出現(xiàn)英文的地方都出現(xiàn)icon提示，這就是一個(gè)過(guò)度設(shè)計(jì)的界面。首先文章的內(nèi)容肯定是第一位的，設(shè)計(jì)者目的就是想讓用戶(hù)通篇無(wú)障礙的閱讀文章，幫用戶(hù)直接翻譯好這個(gè)交互算是一個(gè)加分項(xiàng)。

但是用錯(cuò)的話(huà)還不如不用，假如通篇都是提示幫助的icon，不僅會(huì)影響到用戶(hù)的閱讀，反而還增加了閱讀的難度。當(dāng)出現(xiàn)一個(gè)不認(rèn)識(shí)的單詞，操作順序一定是先復(fù)制-然后再粘貼搜索-返回文章，所謂站在用戶(hù)前面去考慮問(wèn)題，當(dāng)用戶(hù)在進(jìn)行第一步復(fù)制的時(shí)候就替用戶(hù)考慮好后續(xù)的解決方案，預(yù)先猜想用戶(hù)遇到可能出現(xiàn)的問(wèn)題，比如這個(gè)單詞的出現(xiàn)，在文中未做任何標(biāo)記，只有在復(fù)制的時(shí)候才會(huì)出現(xiàn)幫助提醒，畢竟不是所有人都需要這個(gè)提醒，這樣做不僅不會(huì)打擾到用戶(hù)還巧妙的做了用戶(hù)分類(lèi)，如下圖大家可以去體驗(yàn)一下，目前市面上的瀏覽器基本都實(shí)現(xiàn)了該操作。

02

—

常用的部分定律總結(jié)

定律部分參考
https://www.zcool.com.cn/article/ZMTA0NDU3Mg==.html（站酷h梓暄）

1.費(fèi)茨定律

從一個(gè)任意位置移動(dòng)到一個(gè)目標(biāo)位置所需要的時(shí)間與兩個(gè)位置的距離和目標(biāo)大小有關(guān)。離目標(biāo)位置距離越遠(yuǎn)時(shí)間越長(zhǎng)，反之亦然；目標(biāo)面積越大，我們定位到目標(biāo)所花費(fèi)的時(shí)間就越短，反之亦然。在我們頁(yè)面設(shè)計(jì)中，目標(biāo)大小的設(shè)置要在合適的范圍之內(nèi)，越大越容易點(diǎn)擊，越小則容易誤操作和點(diǎn)擊無(wú)效；比如一些小的文字鏈接，在跟開(kāi)發(fā)小哥哥對(duì)接的時(shí)候需要注明熱區(qū)的大小范圍，適當(dāng)性的放大焦點(diǎn)可點(diǎn)擊的范圍。

目的：提高產(chǎn)品可用性中的效率指標(biāo)，幫助用戶(hù)更快的完成某項(xiàng)任務(wù)；

應(yīng)用：例如CTA按鈕的位置、一些決策性按鈕等等~

思考：是不是所有的按鈕都要離內(nèi)容區(qū)域距離越近越好呢？當(dāng)然不是，在部分的操作頁(yè)面中不難發(fā)現(xiàn)，有一些按鈕就永久性的固定出現(xiàn)在一些邊角旮旯的地方，這當(dāng)然不是設(shè)計(jì)師的失誤，是有意而為之，有意識(shí)的將一些操作放在相對(duì)不容易碰到，距離比較遠(yuǎn)，不容易感知的地方，就是為了延長(zhǎng)用戶(hù)的感知時(shí)間，感知時(shí)間越長(zhǎng)，操作成本越高，用戶(hù)在做決策之前心里就有了一個(gè)默認(rèn)答案，從而降低了誤操作的可能性。

2.?？朔▌t

人們對(duì)于每個(gè)選項(xiàng)認(rèn)知處理的時(shí)間約是0.155秒，選擇越多，做出選擇所花的時(shí)間就越多。

如果是有5個(gè)選項(xiàng)，反應(yīng)時(shí)間則大約需要2.36秒。這個(gè)跟后續(xù)的米勒定律和奧卡姆剃刀原理都有關(guān)系。

3.奧卡姆剃刀原理

這個(gè)就可以寬泛的理解為極簡(jiǎn)原理，不管是從實(shí)體、視覺(jué)或者認(rèn)知上，不必要的元素會(huì)降低設(shè)計(jì)的效率，剔除設(shè)計(jì)中的多余元素，讓設(shè)計(jì)更加嚴(yán)謹(jǐn)和純粹。在這里作者想到一個(gè)設(shè)計(jì)中經(jīng)常出現(xiàn)的詞語(yǔ)--信噪比(相關(guān)信息和無(wú)關(guān)信息的比例）。

4.米勒定律

人短時(shí)間的記憶模塊廣度為7-2~7+2之間，記憶信息超出了該范圍就很容易出錯(cuò)。大腦短時(shí)間的記憶容量約為7，接受新鮮事物的記憶容量最多不會(huì)超過(guò)9。（悄咪咪的BB~我目前短時(shí)間的記憶能力在3~5個(gè)，哈哈哈，極限了！）

目的：降低記憶成本，減少用戶(hù)的認(rèn)知負(fù)荷，提高信息的易讀性。

思考：APP中底部標(biāo)簽欄的個(gè)數(shù)就是一個(gè)很好的例子，為什么只放幾個(gè)，為什么不放一排然后左右滑動(dòng)呢？最常見(jiàn)的個(gè)數(shù)一般都在3~5個(gè)，很少見(jiàn)有7個(gè)的例子，PC端導(dǎo)航一般不超過(guò)9個(gè)，超過(guò)的都可以用所謂的“聚會(huì)按鈕”或者“更多”。（下面純屬我猜想，胡說(shuō)八道昂）米勒定律的提出時(shí)間也是上個(gè)世紀(jì)的1956年，那個(gè)時(shí)候沒(méi)有這么多的電子輻射，人們不通宵打游戲，不吃外賣(mài)，可能脫發(fā)也沒(méi)有那么快吧……，總之就是記憶力會(huì)很好的感覺(jué)，咳咳~調(diào)查了幾個(gè)身邊的小伙伴，沒(méi)錯(cuò)，我們的記憶廣度3-2~3+2之間……)

應(yīng)用：把一大串?dāng)?shù)字?jǐn)嚅_(kāi)的設(shè)計(jì)，輸入電話(huà)號(hào)碼3-4-4的斷點(diǎn)設(shè)計(jì)、錢(qián)數(shù)金額3位一斷、銀行卡號(hào)4位一斷，目的就是為了降低記憶成本，提高信息的易讀性，從而達(dá)到視覺(jué)防錯(cuò)的作用。

5.席克定律

用戶(hù)面臨選擇的數(shù)量越多，用戶(hù)做出選擇所花費(fèi)的時(shí)間就越長(zhǎng)。選項(xiàng)與選項(xiàng)之間一定存在某種聯(lián)系，沒(méi)有必要把全部的選項(xiàng)都展示出來(lái)，可以進(jìn)行同類(lèi)分組或者多層級(jí)分布，這樣效率會(huì)更高一些。大家可以做一些優(yōu)質(zhì)的問(wèn)卷調(diào)查體驗(yàn)下選項(xiàng)之間的聯(lián)系和關(guān)系。

應(yīng)用：默認(rèn)值的設(shè)置，方便用戶(hù)選擇；多層級(jí)的菜單導(dǎo)航等等。

思考：大家有沒(méi)有也同樣疑惑過(guò)這個(gè)問(wèn)題，一個(gè)登陸頁(yè)面，輸入手機(jī)號(hào)和驗(yàn)證碼是分開(kāi)的兩個(gè)頁(yè)面，這樣不是增加了頁(yè)面的數(shù)量，不是更繁瑣了嗎？

這個(gè)原理就是秉承“一個(gè)頁(yè)面只做一件事的原則”，雖然分頁(yè)展示但是在用戶(hù)體驗(yàn)上是不是感覺(jué)相對(duì)輕松，而且更容易將用戶(hù)的注意力集中到該步驟來(lái)，排除了其他信息帶來(lái)的干擾。

包含一些隱藏的頁(yè)面，都是為了減輕用戶(hù)在感知和視覺(jué)上的壓力。在做問(wèn)卷調(diào)查的時(shí)候最容易出現(xiàn)這個(gè)交互，當(dāng)我們打開(kāi)某個(gè)問(wèn)卷調(diào)查，大概一看只有幾個(gè)選項(xiàng)，大部分情況下我們都會(huì)選擇做，但是里面暗含玄機(jī)，在快做完的時(shí)候，觸發(fā)到某個(gè)選項(xiàng)，下面又是一堆題目。

所以說(shuō)席克定律不僅僅是要求數(shù)量少，最重要的是要讓用戶(hù)感覺(jué)他是少的，容易的，他們才會(huì)聚焦去做這件事情，所以在設(shè)計(jì)的時(shí)候我們會(huì)選擇分頁(yè)，按步驟操作等等，都是為了讓用戶(hù)感覺(jué)它是少的，想必沒(méi)有人會(huì)喜歡一股腦填寫(xiě)一堆堆數(shù)據(jù)文字吧，輸入的成本更高，后臺(tái)還要考慮容錯(cuò)性，開(kāi)放的輸入條件也不利于一些數(shù)據(jù)的統(tǒng)計(jì)。

首因效應(yīng)：相對(duì)于中間位置，我們往往會(huì)對(duì)開(kāi)頭的事物記憶猶新。

新近效應(yīng)：相對(duì)于中間位置，我們更容易記住末尾的物體。二者綜合可以理解為我們的大腦更加容易記住開(kāi)頭和結(jié)尾的東西(與舊腦效應(yīng)也有關(guān)系）。

舉例：大家可以回憶一下淘寶的詳情頁(yè)，開(kāi)頭一般都是產(chǎn)品展示；中間部分都是尺寸規(guī)格；最后一般都是價(jià)格說(shuō)明和購(gòu)買(mǎi)說(shuō)明。

信噪比：相關(guān)信息和無(wú)關(guān)信息的比例

MVP原則：它可以理解為一個(gè)產(chǎn)品的更新迭代過(guò)程，不同階段MVP的特點(diǎn)有所不同，關(guān)注的目標(biāo)也不同。

新舊腦效應(yīng):新腦=理性腦,主要用來(lái)思考和處理理性數(shù)據(jù)；舊腦（也稱(chēng)為“爬行腦”，是因?yàn)檫@樣的腦形態(tài)依然存在于今天的爬行動(dòng)物中) 用來(lái)做決策,直接或間距的接受來(lái)自腦和其他神經(jīng)的輸入,并觸發(fā)決策。舊腦喜歡開(kāi)頭和結(jié)尾的東西，通常會(huì)忽略中間的內(nèi)容；我們的視覺(jué)神經(jīng)直接與舊腦相連，所以舊腦對(duì)視覺(jué)刺激會(huì)在1毫秒左右做出反應(yīng)。

大家不妨來(lái)看個(gè)例子：

大家會(huì)不會(huì)也有這樣的疑惑：為什么“挑選服務(wù)”會(huì)放在中間？“查看物流”反而沒(méi)有和之前的功能一樣放在中間？這樣不就違反了一致性？是失誤嗎？

答案揭曉：（作者的一些推論和思考哈，不是官方數(shù)據(jù)）

1.是利用人們的行為習(xí)慣，也就是“舊腦”給出的決策，當(dāng)我們?cè)诓榭从唵蔚臅r(shí)候，大多數(shù)情況下是查看物流，三個(gè)按鈕中，中間這個(gè)按鈕的轉(zhuǎn)換率是大概率超過(guò)其他兩個(gè)的，當(dāng)我們買(mǎi)了很多東西，一路就這么順著點(diǎn)過(guò)來(lái)，到鞋子這塊你不由得點(diǎn)錯(cuò)，有時(shí)候已經(jīng)看到他是“挑選服務(wù)”了，查看物流在左，這個(gè)手還是不由自主的點(diǎn)了中間這個(gè)按鈕，表示已經(jīng)多次干過(guò)這種事情~（哈哈哈，我可能是個(gè)順拐~）

2.為啥要放中間，這就是設(shè)計(jì)者的一點(diǎn)點(diǎn)小心思了，“勤鴿”是阿里旗下的一個(gè)專(zhuān)門(mén)提供上門(mén)取鞋洗鞋的服務(wù)，類(lèi)似淘寶中連接咸魚(yú)的接口“賣(mài)了換錢(qián)”類(lèi)似，給產(chǎn)品更多的曝光機(jī)會(huì)，讓你在慣性操作之中發(fā)現(xiàn)這個(gè)產(chǎn)品，與其放在首頁(yè)的金剛區(qū)，不如放在他應(yīng)該出現(xiàn)的位置，這樣既不會(huì)打擾，反而更能被記住。

03

—

Banner樣式怎么使用

作為UI,我們不僅僅只是規(guī)定一個(gè)banner的位置和大小,更要從全局的角度考慮banner的樣式和交互。在眾多APP中，banner樣式有后面帶背景的，有通欄展示的，有等寬于內(nèi)容的，有大圓角的有方的…，是因?yàn)楹每磫幔?/p>

Why : 大家在前期做東西的時(shí)候，一定會(huì)遇到這種情況，有兩種方案PlanA和PlanB，A的美觀(guān)度＞B的，但是B卻偏偏獲選了，why? 因?yàn)樵贚eader的眼中 合適（利益）＞美觀(guān)，他們會(huì)考慮合適的展位和大小，決定了被看見(jiàn)的概率，這些都是跟利益點(diǎn)掛鉤，Leader的思維是很商業(yè)化的。這就好比明星為什么都想占C位，只有被看到才有話(huà)題度，如果該明星跟品牌氣質(zhì)不符，就算流量再多也不會(huì)聘用一樣的道理。

Do : 在做之前，我們一定要搞清楚一個(gè)問(wèn)題，本次更新Banner的意義，是為了新功能的宣傳還是單純的廣告位，還是二者都有，那我們就得考慮一下，在寸土寸金的頁(yè)面上，banner位是否需要增大或者減小比例，這樣做是否會(huì)影響到下面內(nèi)容的展示，總的來(lái)說(shuō)就是衡量一下banner和下面內(nèi)容的比重，誰(shuí)更重要些，這也決定了banner應(yīng)該怎么設(shè)計(jì)。

Eg : 1.兩邊留白/滑動(dòng)

與下面內(nèi)容區(qū)域等寬，距離屏幕兩邊都有留白，現(xiàn)在A(yíng)PP的流行趨勢(shì)。風(fēng)格簡(jiǎn)約，頂部看著會(huì)比較透氣，與下面內(nèi)容銜接的整體性比較好。

這種樣式通常還有一種展示方案，就是多個(gè)展示。左右兩邊各露出一部分，讓用戶(hù)直接感知到這里的交互和豐富的內(nèi)容。

2.去掉頂部banner，中下部分放置廣告位

這得看產(chǎn)品的定位和盈利點(diǎn)或者交互等等方面綜合考慮。比如說(shuō)如果產(chǎn)品本身就是一個(gè)工具類(lèi)的app,用戶(hù)進(jìn)來(lái)只是為了完成某項(xiàng)任務(wù)而進(jìn)行的操作,那么banner本身的意義就不大。我們平常經(jīng)常用到的釘釘,釘釘上放置一個(gè)廣告位和淘寶上面放置的廣告位,你更愿意看哪個(gè)?

從另一個(gè)角度看，Banner稍微往下放一些是為了更好的被看見(jiàn)。banner的展示剛好落在視覺(jué)中心的位置，更容易被發(fā)現(xiàn)。

3.通欄展示，大包大攬

這類(lèi)banner是最規(guī)規(guī)矩矩的一類(lèi)，割裂感比較強(qiáng)，但是設(shè)計(jì)感不是很強(qiáng)。為了給下面功能爭(zhēng)取更大的空間，設(shè)計(jì)師一般發(fā)揮的空間就是變形，做個(gè)弧度等等。為什么說(shuō)大包大攬？在這類(lèi)banner上可以承載狀態(tài)欄和導(dǎo)航欄，也可以包含搜索等功能，所以對(duì)于banner本身內(nèi)容來(lái)講，層級(jí)就比較低了。

banner在設(shè)計(jì)的時(shí)候，下面的內(nèi)容模塊一般不會(huì)采用卡片式的設(shè)計(jì)，多會(huì)采用色塊或者間距進(jìn)行分割，不然會(huì)有頭重腳輕的感覺(jué)。

4.自帶BGM

這種banner在電商行業(yè)應(yīng)用的比較多，目的就是為了營(yíng)造氛圍和代入感。這類(lèi)可以融合1又可以融合3的樣式。背景可以隨著banner的顏色更改變化，視覺(jué)上比較飽滿(mǎn)和靈動(dòng)，又能很好的壓得住頭部的位置，就算內(nèi)容部分過(guò)于花哨也能鎮(zhèn)得住場(chǎng)子。

5.作為BGM

這類(lèi)banner剛好和4的展示換了個(gè)位置，毋庸置疑，它承載的功能優(yōu)先級(jí)是大于banner自身的，優(yōu)點(diǎn)就是將頁(yè)面整體連接起來(lái)。

作者碎碎念：大家有沒(méi)有發(fā)現(xiàn)，除了電商類(lèi)的展位，現(xiàn)在banner做的越來(lái)越瘦小了，優(yōu)先級(jí)越來(lái)越低了。打開(kāi)APP,大家已經(jīng)習(xí)慣了先點(diǎn)跳過(guò)再點(diǎn)x的操作習(xí)慣，沒(méi)有人會(huì)等3S一過(guò)的banner信息，被看見(jiàn)也全靠緣分。代替出現(xiàn)了“新手引導(dǎo)”、“上線(xiàn)功能引導(dǎo)”、“塢窗”以及動(dòng)效，目的都是變著花樣的吸引用戶(hù)的注意。但是Banner還是有它不可動(dòng)搖的理由，Banner只有在合適的位置才能發(fā)揮它的巨大作用，所以大家在做的時(shí)候還是要多方面深層次的綜合考慮再來(lái)定位它。

本次更新就結(jié)束啊，這篇寫(xiě)的模塊相對(duì)獨(dú)立一些，磨了很久，最近也在充電和總結(jié)中，會(huì)一直給大家輸出的。

文章來(lái)自社區(qū)簽約作者：HL.Zhang