【科技按】：“為了創(chuàng)建合適的視覺層次，你需要了解我們的眼睛是如何搜集信息的?！?/p>

創(chuàng)新互聯(lián)公司專注于海拉爾企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,成都商城網(wǎng)站開發(fā)。海拉爾網(wǎng)站建設(shè)公司,為海拉爾等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

今天科技給大家?guī)淼倪@篇文章中，來自科技的網(wǎng)站設(shè)計師從理論和實踐兩個角度介紹了網(wǎng)頁UI設(shè)計中的視覺層次問題。一個好的藝術(shù)家不僅需要擁有創(chuàng)造力，同樣也需要考慮諸如主題、顏色、大小、內(nèi)容等諸多細節(jié)內(nèi)容，或許還有一件更重要的事——如何留白。這不是件容易的事情，同時也是為何我們?nèi)绱顺绨葸_芬奇和梵高的原因。網(wǎng)頁UI設(shè)計師同樣需要考慮這些問題。就像在我給你推薦的那本電子書中說得那樣，網(wǎng)頁作為一種新的視覺形式，有它的獨特性，但它同時也必須遵守傳統(tǒng)藝術(shù)形式的法則，它是美學(xué)原則和商務(wù)需求的統(tǒng)一。一個杰出的網(wǎng)頁界面必須顯得輕松又吸引人。

在這片文章中，科技將*先介紹什么是視覺層次和如何實現(xiàn)它，然后我們將會看到它是如何遵照人眼自然移動的規(guī)律來運作的。

視覺組織

在這篇文章中（與視覺層次的對話）中，本書的作者同時也是成都網(wǎng)站建設(shè)的產(chǎn)品設(shè)計，解釋了對于網(wǎng)頁的視覺呈現(xiàn)，有哪些元素是必要的：

提醒用戶——做一只看不見的手，網(wǎng)頁的布局應(yīng)當能指導(dǎo)瀏覽者進行瀏覽同時，避免讓讀者感覺難以忍受。比如，在線支付網(wǎng)站通過引導(dǎo)你滾動鼠標來完成支付過程，同時使用恰當?shù)脑嵝涯惝斍八幍牟襟E。 交互性的內(nèi)容聯(lián)系——網(wǎng)頁的內(nèi)容應(yīng)當依據(jù)瀏覽者的信息優(yōu)先順序進行呈現(xiàn)。比如，在人氣火爆的設(shè)計網(wǎng)站中，頂部是大致的分類，中間是詳細的個案展示，較底部則是詳細的分類目錄。 創(chuàng)造情緒化的印象——人們到餐廳里吃飯不僅僅是為了填飽自己的肚子而已，他們同樣對食物的味道，口感，賣相都有要求，甚至還包括良好的用餐氛圍。網(wǎng)站設(shè)計也是如此，特別是人們很可能會原諒你網(wǎng)頁上的一些缺點——如果你能夠傳達一種積極的情緒。

事實上，UI設(shè)計的目標歸結(jié)起來就是為了解決以下這三個問題：

這是什么（有用性） 我應(yīng)該如何使用（可用性） 我為什么要關(guān)心這個（使用愿望） 目光的移動是可預(yù)見的

不管是墻角處一閃而過的東西還是大街上從你面前款款走過的美女，你的眼睛很自然地就會聚焦在它（或許是你）感興趣的地方，不是嗎？雖然有些情況下因人而異，但大部分人的注意力轉(zhuǎn)移都會有明確的趨勢，在瀏覽網(wǎng)頁時也一樣。（在下面的視覺熱點圖中你能很明顯地看出人的注意力是如何發(fā)生轉(zhuǎn)移的）

在一篇有關(guān)視覺原理的文章中，成都網(wǎng)站設(shè)計師討論了兩種占主導(dǎo)性的閱讀方式，不過這里討論的兩種方式僅僅是對于書寫習(xí)慣是從左至右的民族而言的（阿語系人民表示抗議），讓我們來逐一看下。

F型布局（樹形模式）

對于典型的文字占主體地位的網(wǎng)頁（比如博客），設(shè)計的時候都會采用F型的布局模式。瀏覽者們*先會掃描一下頁面左邊，豎直方向上的文字信息，來尋找令他們感興趣的話題或者段落的起始句子。

當瀏覽者找到了他喜歡的東西的時候，他們就開始閱讀了，他們的視線向水平方向上轉(zhuǎn)移。較終的結(jié)果就是他們的視線熱點圖會呈現(xiàn)字母F或E的形狀。CNN和NYTimes兩個新聞網(wǎng)站用的就是F型布局?？萍纪瓿闪艘豁椈?32名瀏覽者者和數(shù)千個頁面訪問的檢驗試驗，并且列出了以下幾條關(guān)于F型布局的實踐要點：

瀏覽者很少會逐字逐句地閱讀。 頭兩段是較重要的，應(yīng)該足夠博人眼球。 起始段落，小標題得足夠有噱頭。

這些要點如何幫助你完成界面設(shè)計？請看下圖：

你可以在這幅圖中看到，較主要的信息都能一眼看見，而更加細節(jié)的東西通過引導(dǎo)都能馬上定位。

F型布局結(jié)構(gòu)對于那些包含廣告，或者呼告和內(nèi)容沒太大關(guān)系的頁面很適用。記住，內(nèi)容為王。F型布局是一種引導(dǎo)方式，而不是一種萬用藥——瀏覽者很快就會在看過幾個這樣的F型頁面布局之后開始感到無趣，用內(nèi)容——而不是布局方式——抓住他們。

Z型布局（對角模式）

Z型布局主要會用于非文本主導(dǎo)的頁面閱讀。瀏覽者*先瀏覽橫貫頁面頂部的水平標題欄目（不管是因為它是菜單欄，還是因為你從左到右的閱讀習(xí)慣）。當視線到達這一行的末尾的時候，它就會轉(zhuǎn)而向左下方（同樣是基于你的閱讀習(xí)慣），然后橫向地閱讀底部的部分。

這種Z型布局格式可以應(yīng)用于幾乎所有的網(wǎng)頁界面，因為它強調(diào)了現(xiàn)在網(wǎng)頁設(shè)計的核心需求，如：層次感，品牌感和交互。Z型布局對于那些要求界面簡潔明快，網(wǎng)頁間跳轉(zhuǎn)由交互性設(shè)計負責(zé)實現(xiàn)的網(wǎng)頁，是非常適合的。

想要在Z型布局界面中塞入復(fù)雜的信息，就不如改用F型布局來得好一些。但是Z型布局帶來的好處就是結(jié)構(gòu)的簡潔和有秩序。這里有幾條實操經(jīng)驗，你較好牢牢記住它們：

背景：將背景和要呈現(xiàn)的內(nèi)容作對比，以便于瀏覽者能夠關(guān)注你的內(nèi)容框架。 點1：為你的Logo找到一個顯眼的位置，比如說這里。 點2：在這些位置添加一些鏈接或交互性元件來幫助瀏覽者更好的瀏覽網(wǎng)頁。 網(wǎng)頁的正中間：一個帶著幾行文字的精美圖片可以將網(wǎng)頁的上部和下部區(qū)分開來，并且瀏覽者的注意力能按照我們設(shè)想的Z字線路轉(zhuǎn)移。 點3：增加要點（內(nèi)容），并沿著水平軸向擴展，將瀏覽者的目光引導(dǎo)到你在點4放置的的主要呼告上。 點4：這里是重點，一個為你的主要呼告（捐款，加盟，注冊等）預(yù)留的理想的位置。

科技（成都網(wǎng)站設(shè)計）總結(jié)：

能夠預(yù)測瀏覽者目光所至，能夠為你帶來巨大的好處。在組織你頁面上的元素之前，對它們排列優(yōu)先順序。一旦你明確了你想呈現(xiàn)給瀏覽者的東西，剩下的工作就是簡單的將它們放置在這兩種模式的熱點上。如果你感覺需要在提出你的主要呼告之前提供給用戶更多的信息，你甚至可以將Z模式拓展到整個頁面上，將我列舉的步驟重復(fù)若干次，事實上，很多網(wǎng)頁現(xiàn)在都在這么干。

【干貨超多的精品好文合集】：

深度介紹網(wǎng)站交互式設(shè)計！
《漲姿勢！值得了解的交互設(shè)計五大支柱》

超酷炫的網(wǎng)站設(shè)計！
《給跪了！絕對值得體驗的較佳炫酷網(wǎng)站》

網(wǎng)站導(dǎo)航設(shè)計效果！
《腦洞大開！舒服的圓形導(dǎo)航網(wǎng)站設(shè)計》

新聞標題：推薦：如何用網(wǎng)站抓住客戶的目光
當前地址：http://m.rwnh.cn/article10/eippdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)