中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

理解人眼的閱讀習慣，才能做出更加合理有效的設(shè)計。

要創(chuàng)造正確的視覺層次，你就要理解我們的眼睛如何處理信息，UXPin的Chris Bank說。

一個藝術(shù)大師除了要具備創(chuàng)造力，還要考慮一些細節(jié)問題，比如寫作、用色、尺寸、包含哪些內(nèi)容，可能更重要的是舍棄哪些。這可不是容易的事，所以我們才會對達芬奇和梵高這樣的大師推崇備至。

網(wǎng)頁UI設(shè)計師也應(yīng)該如此。這本免費電子書網(wǎng)頁UI最佳實戰(zhàn)中討論過，網(wǎng)站也是視覺藝術(shù)的一種形式，以它獨有的方式，它要遵循很多傳統(tǒng)藝術(shù)形式的規(guī)則。這是審美的科學，摻雜了一些商業(yè)準則，非比尋常的網(wǎng)站界面，必須讓人感覺毫無壓力、引人入勝。

本文中，我們首先看看視覺層次是什么，如何創(chuàng)造，然后我們再了解它如何在視線的自然運動中發(fā)揮作用。

組織視覺

Luke Wroblewski，專欄作家兼雅虎產(chǎn)品設(shè)計高級主管，在他的的文章通過視覺層次溝通中闡釋了網(wǎng)站界面的視覺表現(xiàn)在以下方面的重要性：

通知用戶——像一只無形的手，界面應(yīng)該引導用戶一步步采取行動，卻不會讓用戶感到壓迫。比如當你向下滾動，支付服務(wù)商Square引導你了解它的價值所在，每一步都有相關(guān)的引導號召你采取行動。

傳達內(nèi)容之間的關(guān)聯(lián)——界面展現(xiàn)內(nèi)容的方式，應(yīng)該符合用戶對信息的優(yōu)先級理解。例如，人氣設(shè)計網(wǎng)站Abduzeedo在頂部包含了清晰的分類，推薦內(nèi)容在中間，底部則是詳細的分類。

影響情緒——人們?nèi)ゲ宛^可不只是為了食物果腹。他們要的是口味、質(zhì)感、外觀，還有令人難忘的環(huán)境。界面設(shè)計也一樣，而且假如你建立了積極的情緒響應(yīng)，人們可能更容易諒解網(wǎng)站的缺點。比如Wufoo就是個完美案例，界面非常實用且令人愉悅。

你的UI設(shè)計，最終目標是要解答以下三個問題：

• 這是什么？（有用）
• 如何使用？（易用）
• 關(guān)我什么事？（渴望）

人眼的可預(yù)見性

不論是角落的匆匆一瞥，還是對某個路人的仔細打量，人的視線總是自動聚集在某些特定的興趣點上。雖然這點因人而異，多數(shù)人還是容易遵循某種明確的走向——也包括如何瀏覽網(wǎng)站。

在一篇關(guān)于視覺原則的文章中，99Designs的設(shè)計專欄作家，Alex Bigman，談到了在左向右閱讀的民族中，兩種占據(jù)主導地位的閱讀模式。我們依次來看看。

01. F模式

通常體現(xiàn)在文字密集的網(wǎng)站中，比如博客，讀者首先沿著左側(cè)的文字垂直向下瀏覽，從每段的前幾句尋找他感興趣的關(guān)鍵詞或要點，F(xiàn)模式由此得來。

當讀者找到了喜歡的東西，他們就開始正常閱讀，構(gòu)成了水平線。結(jié)果就導致了看似字母F或E的路徑。CNN和NYTtimes兩者都使用了F模式。

Nielson Norman Group的Jakob Nielson進行了一次易讀性研究，基于232名用戶瀏覽上千個網(wǎng)站，還有F模式涉及實踐的詳盡說明用戶很少逐字逐句閱讀。

• 前兩段最重要，應(yīng)該包含你的營銷妙語。
• 起始段、副標題、重點列表中要帶有誘人的關(guān)鍵詞。

它會如何影響網(wǎng)站的界面設(shè)計？請看下圖。

圖中可以看到，數(shù)秒鐘內(nèi)就能看到最重要的內(nèi)容，下方立馬接上更詳細的內(nèi)容（還有行動號召），方便快速瀏覽。

對于想要嵌入廣告和行動號召，又不希望內(nèi)容被淹沒的網(wǎng)站，F(xiàn)模式非常有幫助。切記，永遠是內(nèi)容為王，側(cè)邊欄的存在是加深用戶的參與。和其他所有模式一樣，F(xiàn)模式是一套指導方針——而非模版——因為讀過F中的頭幾行之后，F(xiàn)模式可能會讓人感覺枯燥。

02. Z模式

Z模式瀏覽發(fā)生在不以文字為核心的網(wǎng)站中。讀者首先瀏覽頁面頂部的一條橫線，不論是因為菜單欄，還是出于在頂部從左至右瀏覽一遍的習慣。當視線到達盡頭，它會飛速向左下移動（這也是出于閱讀習慣），在頁面下方部分重復水平方向上的搜尋。

Z模式幾乎可以運用于任何網(wǎng)站界面，因為它滿足了網(wǎng)站的核心需要，比如層級、品牌、行動號召。Z模式對于簡潔至上、核心是行動號召的界面效果最佳。

在一個內(nèi)容復雜的網(wǎng)站中強行使用Z模式，或許不如F模式來得奏效，但Z模式有助于帶來一些秩序，導致布局的簡化（還有轉(zhuǎn)化率的上升）。牢記以下幾則要點：

背景——分離背景，讓用戶的視線停留在網(wǎng)站結(jié)構(gòu)內(nèi)。

1號點——這是你logo的最佳位置。

2號點——增加一個彩色的次要行動號召，有助于順著Z模式引導用戶。

頁面中央——頁面中央的焦點輪播圖能把頂部與底部區(qū)域分離開，引導視線順著Z模式流動。

3號點——增加圖標，從此處開始，順著橫軸移動，能將用戶引導至4號點的最終行動號召。

4號點——這里就是終點了，是你主要行動號召的最理想位置。

預(yù)測用戶的視線如何移動能帶來巨大的優(yōu)勢。在頁面上排布元素之前，通過優(yōu)先級找出最重要和最無關(guān)緊要的元素。一旦你知道要給用戶看什么，將它們置于各種模式的“熱點區(qū)”，創(chuàng)造正確的交互，簡直易如反掌。

你甚至還能在整個頁面中貫穿和延伸Z模式，如果你覺得在行動號召之前還有更多有價值的主張，可以重復運用1-4號點。

原作者：Chris Bank

翻譯：IFEC譯文團隊、譯者十萬個為什麼

來源：UI中國（微信公眾號：uicner）