視覺層(ceng)次(ci)結(jie)構對于良好的(de)網(wang)頁設計(ji)至關(guan)重要(yao)。 這是使您的(de)網(wang)站(zhan)有效(xiao)實(shi)現(xian)其目標(biao)的(de)主要(yao)原則之一。 視覺層(ceng)次(ci)結(jie)構背(bei)后(hou)有許多理(li)論(lun)，這些(xie)理(li)論(lun)也(ye)非常重要(yao)，因此需要(yao)大(da)量(liang)研究(jiu)和工(gong)(gong)作才能(neng)理(li)解其工(gong)(gong)作原理(li)和原因。 知道它(ta)可以幫助您使用(yong)它(ta)。
網頁設計
1.設計是交流的一種形式
設(she)(she)計(ji)(ji)(ji)的核心(xin)是(shi)一種視覺(jue)傳(chuan)達(da)形式。 這是(shi)關(guan)于通過視覺(jue)媒(mei)體(ti)與他人(ren)交流想法(fa)。 所有形式的設(she)(she)計(ji)(ji)(ji)都(dou)是(shi)如此。 信息(xi)產業設(she)(she)計(ji)(ji)(ji)學院的網頁(ye)設(she)(she)計(ji)(ji)(ji)尤其如此。 由(you)于人(ren)們(men)實(shi)際上(shang)是(shi)視覺(jue)思(si)想家(jia)，因此許多信息(xi)無法(fa)很好地傳(chuan)達(da)。 我(wo)們(men)不只是(shi)處理數據。 人(ren)們(men)不僅(jin)看到(dao)事物。 取(qu)而(er)代之(zhi)的是(shi)，人(ren)類根據“視覺(jue)關(guan)系”來組織他們(men)所看到(dao)的東西。
2.視覺等(deng)級制(zhi)度的興起
我(wo)們(men)(men)為什么(me)從關系(xi)的(de)(de)(de)(de)角(jiao)度(du)將自己(ji)視(shi)(shi)為研究(jiu)。 人類(lei)學家認為，狩(shou)獵和收集歷史遺跡有助(zhu)于我(wo)們(men)(men)的(de)(de)(de)(de)遠(yuan)古祖先(xian)生存。 一種實用(yong)的(de)(de)(de)(de)，學術性(xing)較低的(de)(de)(de)(de)方法是(shi)，這(zhe)只(zhi)是(shi)我(wo)們(men)(men)的(de)(de)(de)(de)大腦(nao)了解信息的(de)(de)(de)(de)一種方法。 我(wo)們(men)(men)將相似(si)的(de)(de)(de)(de)元素組合(he)在一起，并將它(ta)們(men)(men)組織成有意義(yi)的(de)(de)(de)(de)模(mo)式，我(wo)們(men)(men)可(ke)以簡單地使(shi)用(yong)它(ta)們(men)(men)。 無論您如(ru)何看待人腦(nao)使(shi)用(yong)的(de)(de)(de)(de)視(shi)(shi)覺層次結(jie)構(gou)，它(ta)都是(shi)一種傳(chuan)達(da)我(wo)們(men)(men)組織和使(shi)用(yong)的(de)(de)(de)(de)信息的(de)(de)(de)(de)非常有效的(de)(de)(de)(de)方式。
3.視覺層(ceng)次結構(gou)工具
既然您已經了解了視覺層次(ci)結構是(shi)用(yong)于傳達信(xin)息的(de)有(you)用(yong)工(gong)具，那么如何作為Web設(she)計人員來創建它呢(ni)？ 實現它的(de)工(gong)具非常簡單(dan)易學(xue)。 您需要做的(de)就(jiu)是(shi)弄清楚如何使(shi)用(yong)它們。
尺寸
本質上(shang)，較大的對象在(zai)大喊(han)。 他們(men)要(yao)(yao)求(qiu)人們(men)更多地關(guan)注他們(men)。 在(zai)視(shi)覺上(shang)，觀看(kan)者的眼睛(jing)自然(ran)會被(bei)更大的物(wu)體吸(xi)引。 這是可用于(yu)可視(shi)化組織的最強大的工具(ju)之一(yi)。 將大小與(yu)重要(yao)(yao)性(xing)相關(guan)聯。 通常(chang)(chang)，最大的元素(su)應該是最重要(yao)(yao)的，而最小的元素(su)通常(chang)(chang)是最不重要(yao)(yao)的。
顏色
顏色(se)(se)(se)(se)(se)(se)既是一種(zhong)組(zu)織(zhi)工(gong)具(ju)，也是在網頁設(she)計(ji)中增加個(ge)性(xing)的一種(zhong)方式(shi)。 粗體和對比色(se)(se)(se)(se)(se)(se)需要觀看者的注意力和焦點。 最適(shi)合用(yong)(yong)于按鈕和超鏈接(jie)。 作(zuo)為(wei)增加個(ge)性(xing)的工(gong)具(ju)，您(nin)可(ke)以(yi)(yi)(yi)以(yi)(yi)(yi)更復雜(za)的方式(shi)使用(yong)(yong)顏色(se)(se)(se)(se)(se)(se)。 有趣，明亮的色(se)(se)(se)(se)(se)(se)彩可(ke)以(yi)(yi)(yi)使頁面令人興奮(fen)，同時聲(sheng)稱色(se)(se)(se)(se)(se)(se)彩可(ke)以(yi)(yi)(yi)營造出舒(shu)緩的感覺(jue)。 顏色(se)(se)(se)(se)(se)(se)非常重要。 它可(ke)以(yi)(yi)(yi)傳達品(pin)牌(pai)（即百事可(ke)樂藍色(se)(se)(se)(se)(se)(se)，麥當勞黃(huang)色(se)(se)(se)(se)(se)(se)）或可(ke)以(yi)(yi)(yi)用(yong)(yong)作(zuo)符號（即熱情的紅色(se)(se)(se)(se)(se)(se)）。 您(nin)甚(shen)至可(ke)以(yi)(yi)(yi)應用(yong)(yong)顏色(se)(se)(se)(se)(se)(se)作(zuo)為(wei)對視覺(jue)層(ceng)次(ci)結構中的信息進行分類的一種(zhong)方式(shi)。
字形
當您(nin)想創(chuang)(chuang)(chuang)建視覺層次時(shi)，選擇適合您(nin)設計的字(zi)體(ti)(ti)很重要(yao)。 不僅字(zi)體(ti)(ti)本(ben)身很重要(yao)，而且字(zi)體(ti)(ti)的使用方式也很重要(yao)。 您(nin)使用的重量(liang)和(he)(he)樣(yang)式與放(fang)置它們(men)的網(wang)站區(qu)域一樣(yang)重要(yao)。 要(yao)組織重要(yao)內(nei)容(rong)，請(qing)嘗試使用各(ge)種(zhong)(zhong)字(zi)體(ti)(ti)大(da)小和(he)(he)粗細。 在某些情況下，斜體(ti)(ti)也可(ke)(ke)以(yi)達到目的。 您(nin)可(ke)(ke)以(yi)使用各(ge)種(zhong)(zhong)大(da)小，粗細和(he)(he)間距(ju)的文(wen)本(ben)在網(wang)站上(shang)創(chuang)(chuang)(chuang)建字(zi)體(ti)(ti)層次結構(gou)。 網(wang)站上(shang)是(shi)否(fou)使用單(dan)個(ge)字(zi)體(ti)(ti)都沒(mei)關系(xi)。 通過(guo)使用尺(chi)寸和(he)(he)重量(liang)的變化，您(nin)不僅可(ke)(ke)以(yi)吸引人(ren)們(men)對(dui)更重要(yao)元素(su)的關注，還可(ke)(ke)以(yi)創(chuang)(chuang)(chuang)建一個(ge)整體(ti)(ti)結構(gou)以(yi)使訪(fang)問者易于閱讀和(he)(he)理解(jie)。
空格(ge)處
在仔(zi)細使(shi)用(yong)視覺層次結構的(de)(de)所有步驟中，請確保保留空白(bai)。 您需要(yao)給內(nei)容提供喘息的(de)(de)空間(jian)(jian)(jian)。 負空間(jian)(jian)(jian)是(shi)視覺設計的(de)(de)重要(yao)組成部分。 空間(jian)(jian)(jian)的(de)(de)定(ding)義與(yu)積極利用(yong)空間(jian)(jian)(jian)同等重要(yao)。 通常將空白(bai)簡(jian)單(dan)地定(ding)義為“頁(ye)面(mian)上(shang)各種(zhong)內(nei)容之間(jian)(jian)(jian)的(de)(de)空間(jian)(jian)(jian)”，但(dan)是(shi)這種(zhong)額外的(de)(de)空間(jian)(jian)(jian)并(bing)不總(zong)是(shi)白(bai)色的(de)(de)，這導致更(geng)(geng)多(duo)的(de)(de)人稱(cheng)其為“負空間(jian)(jian)(jian)”。 空白(bai)本質(zhi)上(shang)使(shi)您能(neng)(neng)夠確定(ding)所構建的(de)(de)網站的(de)(de)哪些特(te)定(ding)功能(neng)(neng)應(ying)比其他功能(neng)(neng)更(geng)(geng)好。 由于這種(zhong)歡迎布(bu)局，訪問者更(geng)(geng)有可能(neng)(neng)在網站上(shang)停留更(geng)(geng)長(chang)的(de)(de)時間(jian)(jian)(jian)。 空間(jian)(jian)(jian)給您帶來清新的(de)(de)感覺，同時也(ye)突出(chu)了(le)重要(yao)元素(su)。 太多(duo)的(de)(de)擁擠和(he)混(hun)亂將驅散觀眾，因為他們不了(le)解什么才是(shi)真正(zheng)重要(yao)的(de)(de)。
人眼和掃描模式
人(ren)眼以可(ke)預測(ce)的(de)方式工作。 它們將自動吸引(yin)某些興趣點。 其中一些確實取決于(yu)個人(ren)，但是(shi)大多(duo)數人(ren)會遵(zun)循(xun)特(te)定的(de)，可(ke)預測(ce)的(de)趨勢，即他們如何(he)查看包(bao)括網站在內的(de)所有內容。
F模式
這是大(da)多數人(ren)用于博客或(huo)Wiki等文(wen)本(ben)豐(feng)富的(de)網(wang)站的(de)掃描模(mo)式。 閱讀(du)(du)器首先掃描頁面左側(ce)的(de)垂直線(xian)，以找到該段落的(de)前幾(ji)個句(ju)子中(zhong)的(de)關鍵字(zi)或(huo)其(qi)他興趣(qu)點。 讀(du)(du)者一(yi)旦發現有趣(qu)的(de)東西，便開始以水平線(xian)正常(chang)閱讀(du)(du)文(wen)本(ben)。 整體(ti)模(mo)式類似于字(zi)母F（或(huo)E）。
Z型
此掃(sao)描模(mo)式(shi)用(yong)于(yu)不(bu)在文本中心的(de)頁面。 閱讀(du)器首先掃(sao)描頁面頂部的(de)水(shui)平線。 這通常是由于(yu)菜(cai)單欄的(de)緣故，但這也是從左到右閱讀(du)的(de)習(xi)慣。 一(yi)(yi)旦(dan)眼(yan)睛到達水(shui)平線的(de)末端，它將向左和向左移(yi)動，從左向右移(yi)動另一(yi)(yi)個閱讀(du)習(xi)慣，然(ran)后重(zhong)新開始。 該模(mo)式(shi)類似于(yu)字母(mu)Z。這是在網站(zhan)(zhan)的(de)可視層次結構(gou)中使(shi)用(yong)的(de)有用(yong)模(mo)型。 它符(fu)合許多基(ji)本的(de)網站(zhan)(zhan)設計要(yao)求：號召性(xing)用(yong)語，視覺層次結構(gou)和品牌。 對于(yu)那些簡單性(xing)是首要(yao)任務，號召性(xing)用(yong)語是頁面主要(yao)目的(de)的(de)時代，這確(que)實非常重(zhong)要(yao)。 它為(wei)簡單的(de)網站(zhan)(zhan)帶來(lai)了秩序感(gan)。 但是，復雜的(de)內容在Z模(mo)式(shi)下不(bu)能(neng)很好(hao)地工作，而(er)F模(mo)式(shi)可能(neng)是更好(hao)的(de)選擇。
蘇公網安備32030302000492號
