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

往期回顧：

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

伯斯塔爾法則?Postel’s Law

? 1. 簡介說明

理論表述

接受多變，輸出保守。

理論背景

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

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

對發送的內容保持謹慎，對接收的內容保持自由。（直譯）

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

該原理表達的最核心思想是：系統/產品應保有一定程度的容錯能力。

? 2. 設計案例

允許用戶進行任何操作，即便是錯的或無效的

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

在給人看的那幅面孔中，應用必須接受用戶所有形式的，或錯的、或對的、或無效的操作。而在給機器看的那幅面孔中則必須把用戶輸入的那些「不靠譜兒」的命令轉譯成機器看得懂的內容。

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

而在設計 UI 界面時，我們也應當包容用戶進行的所有可能的操作，他們可能會在搜索框里輸入任何奇奇怪怪的內容，但你的產品不能因為輸入的內容奇怪而崩潰、閃退、強制報錯。

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

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

另一方面，法則中的容錯性同樣體現在搜索的結果中，用戶輸入的是錯誤的信息沒錯，系統沒有崩潰也沒錯，但是還不夠。我們還需要在一定程度上智能修正用戶可能輸入錯誤的信息，并預測他們的真實意圖。幫助用戶修正信息和操作，是今后發展的必然趨勢。

案例2：bilibili 安卓端頭部可觸發側邊欄的區域

Bilibili 的安卓端設計的也很有意思，頭部區域除了「搜索欄」和其他幾個按鈕之外，任意地方點擊都能夠進入側邊欄，即使沒有點擊到「三條杠」，因為這三條杠實在是太小了，用戶極有可能沒有點擊到，所以干脆擴大了可觸發的熱區。

對用戶可以進行的操作定義邊界

可是有時候我們就是不希望用戶輸入那些奇奇怪怪的內容，進行那些奇奇怪怪的操作啊。

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

案例3：步進器輸入時的鍵盤

在進行純數字輸入時，淘寶會強制鍵盤只顯示數字鍵盤，這是一種明確的邊界定義。當然你也許會說還能輸入符號。沒錯，的確可以輸入符號，輸入符號淘寶不會崩潰，但會提示數量超出范圍。

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

另一個典型的例子就是設定用戶名。一般情況下應用或者產品都會非常明確的提示用戶用戶名應該使用什么樣的格式，比如幾位字符，字母開頭，能不能用特殊符號，可以使用哪幾個符號等等。

如果操作是錯的，及時給出反饋

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

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

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

淘寶會提示我買 999 臺 iPhone 是不可能的，我沒那么多錢，立刻就阻止了我買 999 臺 iPhone 的沖動。

案例6：用戶名設定提示

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

? 3. 注意事項

實際上輸出保守通常是指程序對人的面孔可以表面笑嘻嘻，但是對機器的必須一絲不茍，即：對「機器」或「系統」輸出的命令須嚴格、嚴謹，所以伯斯塔爾法則不僅是 UX 原理，也是程序員的法則。

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

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

? 4. 小結

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

系列位置效應 Serial Position Effect

? 1. 簡介說明

理論表述

用戶更容易記住系列中出現的第一項（首因效應）和最后一項（近因效應）。

理論背景

系列位置效應（Serial Position Effect）是一種心理學現象，它由兩部分組成：首因效應（The Primacy Effect）和近因效應（The Recency Effect）。1913 年，德國心理學家 Hermann Ebbinghaus 在對自己的研究中發現當自己回憶一系列項目時，回憶的準確性會隨著項目在列表中位置的改變而改變，于是他創造了「系列位置效應」這個詞匯。

在隨后幾十年里，Deese、Kaufman、Bennet 和 Murdock 對近因效應和首因效應進行了更為詳細和深入的研究。

研究結果表明，人們回憶一系列單詞的準確性和單詞在系列中的位置關系如下表格所示：

? 2. 設計案例

首因效應和近因效應雖然整合在了系列位置效應中，但是針對這兩者分開進行解釋或許對我們在設計中應用系列位置效應更有幫助。

首因效應

系列中最開始的幾個項目能夠更有效、更長久地儲存在長期記憶之中，并能夠快速回憶出來。

所以如果一個系列是快速出現的，首因效應的影響就小得多，畢竟沒有充足的時間進行長期記憶；而如果一個系列出現緩慢或是頻繁重復出現的，首因效應的影響將會大幅增加。這就是為什么我們永遠只記得四六級詞匯的第一個詞是 abandon，而記不住第二個詞是什么。

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

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

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

近因效應

系列中最近出現的幾項（多數情況下是最后幾項）更容易儲存在我們的短期記憶中。

近因效應受時間因素的影響比較大，信息在短期記憶中存在的時間本身就不長（數十秒），如果有外部的干擾，時間則會更短。

案例2：造作、網易嚴選商品詳情頁

所以為了防止用戶忘記把商品放入購物車，電商 APP 會把「加入購物車」等操作的按鈕固定在屏幕下方的右側，而不會出現在內容的序列當中，因為屏幕底部永遠是用戶最近能夠看到的地方。

案例3：豆瓣、twitter

所以一些社交類 APP 為了讓用戶輕易地記住發布動態按鈕在哪里，會把這個按鈕懸浮在屏幕的右下角，也是一樣的道理。

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

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

案例4：設計中的首位和末位

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

不光是整個界面的布局，對于更加細分的組件設計來說，系列位置效應的影響也是不容許忽視的。

案例5：島讀、微信讀書

島讀的卡片標題是豎向的，所以會放在右上側，微信閱讀的標題是橫向的，所以會放在左上側。

? 3. 注意事項

注意點1：快速瀏覽過程中，首因效應影響有限

之前談到，在快速出現的系列中，首因效應的影響是十分有限的，因為它主要依靠的并不是短期記憶而是長期記憶。所以，如果一個 feed 需要被用戶快速瀏覽，那么它的標題必然需要有額外的視覺吸引力，比如顏色加深、字體加大、字重加重，或者添加別的輔助元素等等。

反面案例1：ONE

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

注意點2：近因效應的時限很短

依然是之前提到的一個點，近因效應主要依靠的是短期記憶，所以它的時效性尤為強烈，假如我們需要某一樣元素充分發揮近因效應的作用，要么縮短與之關聯的決策所需要花費的時間，要么讓它永遠處于近因效應的位置。

反面案例2：少數派付費內容詳情頁

以少數派的付費內容詳情頁為例，頁面的第一屏如左側頁面所示，沒什么毛病，購買按鈕在近因位置無疑，但是當我往下滑動，查看詳情的時候問題就出現了，購買按鈕不見了，在之后相當長的一段時間里（因為詳情還是挺長的，需要花費數分鐘去閱讀），我都沒有再見到過這個按鈕，直到詳情結束它才又一次出現在頁面底部。但萬一我在詳情中部就決定購買呢？這樣我就又要經歷「回憶數分鐘前的近因按鈕」的過程，而這無疑是增加用戶記憶負擔的。

? 4. 小結

• 在一連串的內容當中，用戶更容易記住第一個和最后一個；
• 首因效應作用于長期記憶，近因效應作用于短期記憶。

歡迎關注作者的微信公眾號：「超人的電話亭」