編者按：今天文章和大家聊聊伯斯塔爾法則與系列位置效應(yīng)。在設(shè)計(jì)中如何運(yùn)用這些原則，以及有什么注意要點(diǎn)呢，這篇文章為你答疑解惑。

往期回顧：

1. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：美即好用效應(yīng)》
2. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：多爾蒂門檻》
3. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律》
4. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：希克定律》
5. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：雅各布定律》
6. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：簡(jiǎn)潔法則》
7. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：鄰近性》
8. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：相似性》
9. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：連通性》
10. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：同域原則、米勒定律》
11. 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：奧卡姆剃刀》

伯斯塔爾法則?Postel’s Law

? 1. 簡(jiǎn)介說明

理論表述

接受多變，輸出保守。

理論背景

該原理也被稱為魯棒性原理（Robustness Principle），1980 年，Jonathan Bruce Postel 在他編寫的最早期的 TCP 協(xié)議規(guī)范中有提到：

Be conservative in what you send, be liberal in what you accept.

對(duì)發(fā)送的內(nèi)容保持謹(jǐn)慎，對(duì)接收的內(nèi)容保持自由。（直譯）

至此之后，該原理便被稱為伯斯塔爾法則（Postel’s Law），廣泛應(yīng)用于計(jì)算機(jī)協(xié)議以及系統(tǒng)控制理論中。雖然最近幾年計(jì)算機(jī)界中出現(xiàn)了一些質(zhì)疑伯斯塔爾法則的聲音，但這并不妨礙其核心思想被應(yīng)用于 UI/UX 的領(lǐng)域。

該原理表達(dá)的最核心思想是：系統(tǒng)/產(chǎn)品應(yīng)保有一定程度的容錯(cuò)能力。

? 2. 設(shè)計(jì)案例

允許用戶進(jìn)行任何操作，即便是錯(cuò)的或無效的

正如 Lyle Mullican 在《Your Website has Two Faces》中寫到的，應(yīng)用（或Web）應(yīng)當(dāng)具備兩幅面孔，一幅給人看，一幅給機(jī)器看。

在給人看的那幅面孔中，應(yīng)用必須接受用戶所有形式的，或錯(cuò)的、或?qū)Φ?、或無效的操作。而在給機(jī)器看的那幅面孔中則必須把用戶輸入的那些「不靠譜兒」的命令轉(zhuǎn)譯成機(jī)器看得懂的內(nèi)容。

人的思維和機(jī)器的運(yùn)行模式截然不同，人對(duì)任意信息的理解和記憶都偏向于模糊的、可變的和多意的。比如人對(duì)數(shù)字「9」的記憶可以是「9」、「九」、「nine」、「IX」、「玖」等等，而機(jī)器只認(rèn)二進(jìn)制「1001」，但你的系統(tǒng)絕對(duì)不能只允許用戶輸入「1001」。

而在設(shè)計(jì) UI 界面時(shí)，我們也應(yīng)當(dāng)包容用戶進(jìn)行的所有可能的操作，他們可能會(huì)在搜索框里輸入任何奇奇怪怪的內(nèi)容，但你的產(chǎn)品不能因?yàn)檩斎氲膬?nèi)容奇怪而崩潰、閃退、強(qiáng)制報(bào)錯(cuò)。

案例1：淘寶搜索的各種自糾正

即便我輸入的是「phone」、「iphonw」，甚至是「pingguishouji」（注意我輸入的是 pinggui），它依然能夠給我想要的結(jié)果，當(dāng)然這需要貝葉斯方法的協(xié)助，但我們不需要去了解背后實(shí)現(xiàn)的概率論原理，我們只需要知道這個(gè)結(jié)果是符合伯斯塔爾法則的。

另一方面，法則中的容錯(cuò)性同樣體現(xiàn)在搜索的結(jié)果中，用戶輸入的是錯(cuò)誤的信息沒錯(cuò)，系統(tǒng)沒有崩潰也沒錯(cuò)，但是還不夠。我們還需要在一定程度上智能修正用戶可能輸入錯(cuò)誤的信息，并預(yù)測(cè)他們的真實(shí)意圖。幫助用戶修正信息和操作，是今后發(fā)展的必然趨勢(shì)。

案例2：bilibili 安卓端頭部可觸發(fā)側(cè)邊欄的區(qū)域

Bilibili 的安卓端設(shè)計(jì)的也很有意思，頭部區(qū)域除了「搜索欄」和其他幾個(gè)按鈕之外，任意地方點(diǎn)擊都能夠進(jìn)入側(cè)邊欄，即使沒有點(diǎn)擊到「三條杠」，因?yàn)檫@三條杠實(shí)在是太小了，用戶極有可能沒有點(diǎn)擊到，所以干脆擴(kuò)大了可觸發(fā)的熱區(qū)。

對(duì)用戶可以進(jìn)行的操作定義邊界

可是有時(shí)候我們就是不希望用戶輸入那些奇奇怪怪的內(nèi)容，進(jìn)行那些奇奇怪怪的操作啊。

是的，我們不希望用戶任性的隨意執(zhí)行「rm -rf」，我們不希望用戶輸入數(shù)字的時(shí)候輸入單詞或是中文，所以我們需要對(duì)用戶的可操作邊界給出明確的定義。

案例3：步進(jìn)器輸入時(shí)的鍵盤

在進(jìn)行純數(shù)字輸入時(shí)，淘寶會(huì)強(qiáng)制鍵盤只顯示數(shù)字鍵盤，這是一種明確的邊界定義。當(dāng)然你也許會(huì)說還能輸入符號(hào)。沒錯(cuò)，的確可以輸入符號(hào)，輸入符號(hào)淘寶不會(huì)崩潰，但會(huì)提示數(shù)量超出范圍。

案例4：用戶名/昵稱的邊界定義

另一個(gè)典型的例子就是設(shè)定用戶名。一般情況下應(yīng)用或者產(chǎn)品都會(huì)非常明確的提示用戶用戶名應(yīng)該使用什么樣的格式，比如幾位字符，字母開頭，能不能用特殊符號(hào)，可以使用哪幾個(gè)符號(hào)等等。

如果操作是錯(cuò)的，及時(shí)給出反饋

但是定義邊界明顯還不夠，就算給了邊界，用戶還是可以隨心所欲的輸入。用戶能在淘寶輸入購買 999 個(gè) iPhone，能在設(shè)定用戶名時(shí)輸入任意字符，哪怕是邊界之外的。

這時(shí)候就需要及時(shí)的反饋。及時(shí)的意思是指，就在用戶的錯(cuò)誤操作之后立馬反饋。

案例5：淘寶提示超出范圍

淘寶會(huì)提示我買 999 臺(tái) iPhone 是不可能的，我沒那么多錢，立刻就阻止了我買 999 臺(tái) iPhone 的沖動(dòng)。

案例6：用戶名設(shè)定提示

用戶名是否可用的提示通常分為兩種，一種是在用戶輸入用戶名后實(shí)時(shí)顯示該用戶名是否可用，哪里不可用等；第二種是用戶點(diǎn)完提交才會(huì)提示用戶名設(shè)定錯(cuò)誤。兩者相比來說，第一種的反饋更加及時(shí)，體驗(yàn)感會(huì)更好一點(diǎn)。

? 3. 注意事項(xiàng)

實(shí)際上輸出保守通常是指程序?qū)θ说拿婵卓梢员砻嫘ξ?，但是?duì)機(jī)器的必須一絲不茍，即：對(duì)「機(jī)器」或「系統(tǒng)」輸出的命令須嚴(yán)格、嚴(yán)謹(jǐn)，所以伯斯塔爾法則不僅是 UX 原理，也是程序員的法則。

但我們也可以稍微引申一下：界面對(duì)用戶輸出的內(nèi)容同樣不能隨心所欲。確保用戶所看到的界面整潔有序，并且保證他們能夠輕易找到自己想看到的內(nèi)容。

反面案例1：Amino，過于奔放的視覺輸出

? 4. 小結(jié)

• 允許用戶的任何操作，必要時(shí)給出操作邊界；
• 無效或錯(cuò)誤操作及時(shí)給出反饋。

系列位置效應(yīng) Serial Position Effect

? 1. 簡(jiǎn)介說明

理論表述

用戶更容易記住系列中出現(xiàn)的第一項(xiàng)（首因效應(yīng)）和最后一項(xiàng)（近因效應(yīng)）。

理論背景

系列位置效應(yīng)（Serial Position Effect）是一種心理學(xué)現(xiàn)象，它由兩部分組成：首因效應(yīng)（The Primacy Effect）和近因效應(yīng)（The Recency Effect）。1913 年，德國(guó)心理學(xué)家 Hermann Ebbinghaus 在對(duì)自己的研究中發(fā)現(xiàn)當(dāng)自己回憶一系列項(xiàng)目時(shí)，回憶的準(zhǔn)確性會(huì)隨著項(xiàng)目在列表中位置的改變而改變，于是他創(chuàng)造了「系列位置效應(yīng)」這個(gè)詞匯。

在隨后幾十年里，Deese、Kaufman、Bennet 和 Murdock 對(duì)近因效應(yīng)和首因效應(yīng)進(jìn)行了更為詳細(xì)和深入的研究。

研究結(jié)果表明，人們回憶一系列單詞的準(zhǔn)確性和單詞在系列中的位置關(guān)系如下表格所示：

? 2. 設(shè)計(jì)案例

首因效應(yīng)和近因效應(yīng)雖然整合在了系列位置效應(yīng)中，但是針對(duì)這兩者分開進(jìn)行解釋或許對(duì)我們?cè)谠O(shè)計(jì)中應(yīng)用系列位置效應(yīng)更有幫助。

首因效應(yīng)

系列中最開始的幾個(gè)項(xiàng)目能夠更有效、更長(zhǎng)久地儲(chǔ)存在長(zhǎng)期記憶之中，并能夠快速回憶出來。

所以如果一個(gè)系列是快速出現(xiàn)的，首因效應(yīng)的影響就小得多，畢竟沒有充足的時(shí)間進(jìn)行長(zhǎng)期記憶；而如果一個(gè)系列出現(xiàn)緩慢或是頻繁重復(fù)出現(xiàn)的，首因效應(yīng)的影響將會(huì)大幅增加。這就是為什么我們永遠(yuǎn)只記得四六級(jí)詞匯的第一個(gè)詞是 abandon，而記不住第二個(gè)詞是什么。

當(dāng)然還不僅于此，有注意過 Web 界面的左上角擺放的是什么嗎？

案例1：web 版 behance、dribbble、花瓣、pinterest 界面

多年使用 Web 的經(jīng)驗(yàn)以及記憶會(huì)告訴我們這里大概率會(huì)是一個(gè) logo，并且這個(gè) logo 還能回到首頁。這種固定的設(shè)計(jì)和操作模式每次都是首先出現(xiàn)在我們的視野里，并已儲(chǔ)存在了長(zhǎng)期記憶之中，我們能在第一時(shí)間反應(yīng)出來這里是什么東西，有什么作用。此外，將 logo 放置在首因的位置還能很好地提升品牌形象的識(shí)別度和記憶度。

近因效應(yīng)

系列中最近出現(xiàn)的幾項(xiàng)（多數(shù)情況下是最后幾項(xiàng)）更容易儲(chǔ)存在我們的短期記憶中。

近因效應(yīng)受時(shí)間因素的影響比較大，信息在短期記憶中存在的時(shí)間本身就不長(zhǎng)（數(shù)十秒），如果有外部的干擾，時(shí)間則會(huì)更短。

案例2：造作、網(wǎng)易嚴(yán)選商品詳情頁

所以為了防止用戶忘記把商品放入購物車，電商 APP 會(huì)把「加入購物車」等操作的按鈕固定在屏幕下方的右側(cè)，而不會(huì)出現(xiàn)在內(nèi)容的序列當(dāng)中，因?yàn)槠聊坏撞坑肋h(yuǎn)是用戶最近能夠看到的地方。

案例3：豆瓣、twitter

所以一些社交類 APP 為了讓用戶輕易地記住發(fā)布動(dòng)態(tài)按鈕在哪里，會(huì)把這個(gè)按鈕懸浮在屏幕的右下角，也是一樣的道理。

首因和近因在界面中的位置

在界面設(shè)計(jì)中，首位和末位通常是指左上和右下，而在版式設(shè)計(jì)中，除了左上和右下，還可以是右上和左下。

案例4：設(shè)計(jì)中的首位和末位

人的閱讀習(xí)慣對(duì)「首位」和「末位」是有影響的，尤其是中國(guó)周圍這一片受中華文化影響頗深的人民群眾，會(huì)自動(dòng)在橫向閱讀模式和縱向閱讀模式無縫切換。所以在進(jìn)行設(shè)計(jì)，尤其是版式設(shè)計(jì)時(shí)，需要注意我們自帶的這種天賦。

不光是整個(gè)界面的布局，對(duì)于更加細(xì)分的組件設(shè)計(jì)來說，系列位置效應(yīng)的影響也是不容許忽視的。

案例5：島讀、微信讀書

島讀的卡片標(biāo)題是豎向的，所以會(huì)放在右上側(cè)，微信閱讀的標(biāo)題是橫向的，所以會(huì)放在左上側(cè)。

? 3. 注意事項(xiàng)

注意點(diǎn)1：快速瀏覽過程中，首因效應(yīng)影響有限

之前談到，在快速出現(xiàn)的系列中，首因效應(yīng)的影響是十分有限的，因?yàn)樗饕揽康牟⒉皇嵌唐谟洃浂情L(zhǎng)期記憶。所以，如果一個(gè) feed 需要被用戶快速瀏覽，那么它的標(biāo)題必然需要有額外的視覺吸引力，比如顏色加深、字體加大、字重加重，或者添加別的輔助元素等等。

反面案例1：ONE

而今天的反面案例 ONE 就是一個(gè)非常典型的為了文藝范兒，故意把標(biāo)題做的又輕又細(xì)的應(yīng)用。標(biāo)題符合首因效應(yīng)的位置要求是沒錯(cuò)，但是在快速瀏覽的過程中，首因效應(yīng)的作用十分有限，導(dǎo)致這么細(xì)的標(biāo)題依然沒辦法被用戶很好地注意和記住。

注意點(diǎn)2：近因效應(yīng)的時(shí)限很短

依然是之前提到的一個(gè)點(diǎn)，近因效應(yīng)主要依靠的是短期記憶，所以它的時(shí)效性尤為強(qiáng)烈，假如我們需要某一樣元素充分發(fā)揮近因效應(yīng)的作用，要么縮短與之關(guān)聯(lián)的決策所需要花費(fèi)的時(shí)間，要么讓它永遠(yuǎn)處于近因效應(yīng)的位置。

反面案例2：少數(shù)派付費(fèi)內(nèi)容詳情頁

以少數(shù)派的付費(fèi)內(nèi)容詳情頁為例，頁面的第一屏如左側(cè)頁面所示，沒什么毛病，購買按鈕在近因位置無疑，但是當(dāng)我往下滑動(dòng)，查看詳情的時(shí)候問題就出現(xiàn)了，購買按鈕不見了，在之后相當(dāng)長(zhǎng)的一段時(shí)間里（因?yàn)樵斍檫€是挺長(zhǎng)的，需要花費(fèi)數(shù)分鐘去閱讀），我都沒有再見到過這個(gè)按鈕，直到詳情結(jié)束它才又一次出現(xiàn)在頁面底部。但萬一我在詳情中部就決定購買呢？這樣我就又要經(jīng)歷「回憶數(shù)分鐘前的近因按鈕」的過程，而這無疑是增加用戶記憶負(fù)擔(dān)的。

? 4. 小結(jié)

• 在一連串的內(nèi)容當(dāng)中，用戶更容易記住第一個(gè)和最后一個(gè)；
• 首因效應(yīng)作用于長(zhǎng)期記憶，近因效應(yīng)作用于短期記憶。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」