“ 當用戶打開一個新站點時，他的焦點很寬泛；當用戶專注一項任務(wù)時，他的焦點就會聚焦。《簡約至上》”

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

01

—

讓功能容易找到

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

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

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

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

02

—

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

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

1.費茨定律

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

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

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

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

2.?？朔▌t

人們對于每個選項認知處理的時間約是0.155秒，選擇越多，做出選擇所花的時間就越多。

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

3.奧卡姆剃刀原理

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

4.米勒定律

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

目的：降低記憶成本，減少用戶的認知負荷，提高信息的易讀性。

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

應(yīng)用：把一大串數(shù)字斷開的設(shè)計，輸入電話號碼3-4-4的斷點設(shè)計、錢數(shù)金額3位一斷、銀行卡號4位一斷，目的就是為了降低記憶成本，提高信息的易讀性，從而達到視覺防錯的作用。

5.席克定律

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

應(yīng)用：默認值的設(shè)置，方便用戶選擇；多層級的菜單導航等等。

思考：大家有沒有也同樣疑惑過這個問題，一個登陸頁面，輸入手機號和驗證碼是分開的兩個頁面，這樣不是增加了頁面的數(shù)量，不是更繁瑣了嗎？

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

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

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

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

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

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

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

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

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

大家不妨來看個例子：

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

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

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

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

03

—

Banner樣式怎么使用

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

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

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

Eg : 1.兩邊留白/滑動

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

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

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

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

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

3.通欄展示，大包大攬

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

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

4.自帶BGM

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

5.作為BGM

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

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

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

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