原始垂直布局和新水平布局的區(qū)別
       當(dāng)一個大型的網(wǎng)站最近公布了其新的水平設(shè)計，我絕對喜歡它。 布局是現(xiàn)代和優(yōu)雅的，直觀地認(rèn)為，比以前的“老式”的垂直布局頁面更具吸引力和成功。 然而，通過回顧過渡之前和之后客戶活動的熱圖，發(fā)現(xiàn)我完全錯誤。

　　該公司的目標(biāo)是讓訪客閱讀盡可能多的文章，并接觸大量的內(nèi)容。 網(wǎng)站不會播放任何廣告，所以所有指標(biāo)都直接反映訪問者與網(wǎng)頁上實際文章和內(nèi)容的關(guān)系。

　　如下圖所示，原始主頁列出了長排列表中的文章，而將A / B測試的一部分顯示為百分之五十的新布局包含了橫向排列的相同文章。
       原始垂直布局：

       新水平布局：

　　有趣的是，湛江網(wǎng)站設(shè)計游客的水平布局遠(yuǎn)遠(yuǎn)低于原來的垂直布局。 下面的熱圖表示用戶的鼠標(biāo)移動和滾動范圍，顯示訪問者在原始主頁上比新的水平滾動向下滾動了34％，因此也在原始布局中徘徊，交互和點擊更多的文章，而不是在新的布局上。 事實上，用戶幾乎沒有暴露于橫向布置的文章。 為什么會這樣呢？

　　在左側(cè)的原始版本中，訪問者收到了垂直列的一瞥，表明有更多的內(nèi)容等待下面，并有一個完整的滾動體驗被探索。相比之下，較新的水平布局沒有指示有更多的向下滾動 - 游客認(rèn)為這是頁面的結(jié)尾，并將文章保留隱藏和未開發(fā)。此外，即使訪問者向下滾動，在頁面任何一點顯示的每個水平行都可能被誤認(rèn)為頁面的結(jié)尾，而垂直封裝總是表示更多的內(nèi)容等待在下面。

　　這種行為可以在觀察和心理層面進(jìn)行解釋。上面的示例演示了垂直布局之間的差異，這種布局鼓勵滾動（從而揭開和吸引更多內(nèi)容）以及不會觸發(fā)滾動的水平布局。心理見解。術(shù)語“對象識別”表示我們解釋對象意義的方式。對象的識別對于我們的生存至關(guān)重要，因為我們必須先確定對象，然后才能推斷出它們的相關(guān)特征和喜好。一旦我們確定一個蘋果，我們立即知道它是可食用的。一旦我們識別出一只狼，我們就知道不要打擾它。這個過程只需要少量的輸入。我們的系統(tǒng)通過“模板匹配”來確認(rèn)，允許我們立即將字母“B”確定為字母表的一部分，而不是抽象的形狀。

　　新水平布局帶來的效果

　　例如，當(dāng)我們看下圖時，我們會自動將其解釋為三角形，而不是三個角度。這表明我們的大腦首先看到一個對象的整體形式，之后才開始挑選細(xì)節(jié)。

　　基于格式塔的“關(guān)閉法則”，即使只顯示了一小部分形狀，我們的思維往往會完成不完整的形狀和創(chuàng)造精神對象。我們的想法是通過忽略差距和完成輪廓線來形成我們頭腦中已經(jīng)表現(xiàn)的形狀。

　　關(guān)閉法的一個很好的例子是Kanisza三角形，如下所示。這種幻覺，最初由意大利心理學(xué)家Gaetano Kanizsa在二十世紀(jì)五十年代探索過，展示了我們?nèi)绾慰吹絻蓚€重疊的三角形，即使圖像中沒有完整的三角形。

　　這就解釋了為什么水平布局不起作用。其結(jié)構(gòu)意味著關(guān)閉，并且頁面底部更典型的模式。當(dāng)我們看到封閉的水平結(jié)構(gòu)時，格式塔的關(guān)閉定律就開始了，我們體驗到一個完全封閉的形狀。因此，我們不會尋找更多的信息，最終可以俯瞰頁面的其余部分。

　　其他有問題的布局。水平布局只是與我們的自然對象識別過程相沖突的網(wǎng)站設(shè)計的一個例子。例如，這是最近重新設(shè)計的Pinterest主頁：

　　你可以看到，它顯示了一個iPad和iPhone，它們都在頁面底部被切斷，從而產(chǎn)生了其他圖像（以及潛在的其他內(nèi)容）隱藏在折疊之下的印象。這自動提示我們向下滾動 - 但是無法向下滾動，讓我們感到沮喪和焦慮。如果頁面更長，這將是導(dǎo)致訪問者向下滾動的好方法，因為每個人都希望看到一個完整的形狀。Pinterest已經(jīng)將頁面更新為非常漂亮，時尚和動態(tài)的外觀，解決了這個問題。

　　當(dāng)我們在頁面上遇到元素時，我們的頭腦同樣困惑，因為它們的按鈕狀形狀（例如，帶有文字的小矩形，看起來像是一個動作）。當(dāng)元素不可點擊，結(jié)果只是一個簡單的圖像，我們不可避免地會感到煩惱。當(dāng)我們了解基礎(chǔ)模式時，我們很容易填補(bǔ)空白并排除元素的表面含義。問題是網(wǎng)站界面通常缺少任何視覺提示，表明正在采用什么模式。幫助你的訪問者了解你網(wǎng)站元素的表面含義將影響他們?nèi)绾闻c頁面進(jìn)行交互 - 更重要的是，它們對它們的感受如何。因此，通過確保表面元素可以快速準(zhǔn)確地解釋，使的訪問者感覺到與您的產(chǎn)品交互感到很好，至關(guān)重要。

　　設(shè)計互動體驗的方式必須考慮到我們的認(rèn)知系統(tǒng)的局限性。至于湛江網(wǎng)站制作必須注重的細(xì)節(jié)，你在網(wǎng)站上使用建立的交互設(shè)計模式越多，訪問者的理解就越好，他們將擁有更多的體驗。