互聯網開(kāi)發&品牌全案設計(jì)
12年(nián) 實戰經驗,品質服務
有(yǒu)時(shí)候設計(jì)的(de)微(wēi)妙之處就(j€iù)是(shì)你(nǐ)覺得(de)這(zhè)個(gè)好(hǎo),但(dàn)是(shì)卻說(shuō)™不(bù)出一(yī)個(gè)所以然,這(zhè)是(shì)需要(yào)深入思考并分(fēn)析問(wèn)題才能(néng)驗證自(zì)己的(de)感覺。π蘇州網站(zhàn)建設在建設網站(zhàn)時(shí),基本都(dōu)是(shì)以左圖右文(wén)字結構呈現(xiàn)新↑聞列表的(de)。
配圖是(shì)不(bù)包含信息量的(de),而人(rén)的(de)視(shì)覺習(xí)慣從(cóng)左側開(kāi)♣始,左圖右文(wén)字的(de)視(shì)覺動線是(shì)一(yī)個(gè)連續的(de)「Z」,而非一(yī)條向下(xià)的(de)直線,既然配圖不(bù)包含信息量,那↑(nà)麽把它挪到(dào)右側,也(yě)就(jiù)不(bù)會(huì)對(duì)視(shì)覺動線形成幹擾,方便用(yλòng)戶快(kuài)速(豎直)地(dì)浏覽文(wén)章(zhāng)标題。同時(shí)還(hái)能(₹néng)對(duì)左側列表和(hé)右側欄進行(xíng)分(fēn)隔。 起初我大(dà)概也(yě)算(su♥àn)被說(shuō)服了(le),畢竟「圖片的(de)信息量」一(yī)聽(tīng)就(jiù)覺得(de)好(hǎo)高(gāo)大(dà)上(shàng),好(hǎo)像很(hěn)有(÷yǒu)道(dào)理(lǐ)的(de)樣子(zǐ)。 直到(dào)最近(jìn),網站(zhàn)臨近(jìn)上(shàng)線,首頁也(yě)早已成型,故而長(cháng)時(sh£í)間(jiān)觀察的(de)機(jī)會(huì)逐漸多(duō)了(le)起來(lái),久而久之,便發現(xiàn)其中的(de)「不(b✘ù)對(duì)勁」:
1、「信息量」的(de)确不(bù)假,但(dàn)信息量再低(dī),圖片終歸是(shì)圖片,終歸要( yào)比文(wén)字抓人(rén)眼球,因而右圖左文(wén)字結構下(xià)的(de)用(yòng)戶的(de)視(sh∏ì)覺動線隻會(huì)是(shì)一(yī)個(gè)從(cóng)标題到(dào)配圖再到(dào)标題的(de)加寬版的(dπe)「Z」。 因此把标題和(hé)配圖分(fēn)這(zhè)麽開(kāi),可(kě)能(néng)的✘(de)結果往往是(shì)「累感不(bù)愛(ài)」,于是(shì)便快(kuài)速(豎直)隻浏覽标題/配圖了(le)事(shì),畢竟路(lù)程太長(cháng)了(l±e)。
2、而在左圖右文(wén)字結構下(xià),盡管視(shì)覺動線仍時(shí)不(bù)時(shí)呈「Z」型,但(dàn)比起右圖γ左文(wén)字結構,路(lù)程顯然要(yào)短(duǎn)得(de)多(duō)。即便用(yòng)戶隻是≤(shì)快(kuài)速掃視(shì)配圖/标題,也(yě)很(hěn)容易通(tōng)過餘光(guāng)觀察or快(kuài)速切換到(dào)相(xiàng)應的(de)标題/配↕圖。
3、此外(wài),從(cóng)宏觀布局角度而言,左圖右文(wén)字結構下(xià),标題可(kě)以處在網頁的('de)水(shuǐ)平中部區(qū)域,不(bù)至于讓人(rén)覺得(de)網頁太寬,眼球要(yào)跑好(hǎo)遠(yuǎn)。加之左側配圖與右側欄所形成☆的(de)壁壘在視(shì)覺上(shàng)營造出了(le)邊界感,使得(de)新聞部分(fēn)看(kàn)起來(lái)會(hu✘ì)短(duǎn)些(xiē)。 或者說(shuō),它就(jiù)像一(yī)個(gè)漢堡一(yī)樣,把最美(měi)味的(de)部分(fēn)夾在了(le)中間(j↑iān),這(zhè)在某種意義上(shàng)恰恰突出了(le)新聞內(nèi)容; 而右圖左文(wénφ)字結構,正如(rú)BOSS所想要(yào)的(de)那(nà)樣,對(duì)左右進行(xíng)了(le)分( fēn)隔——事(shì)實是(shì)咱們網站(zhàn)右側欄的(de)內(nèi)容确實和(hé)别人(rén)家(jiā)新聞博客太不(bù)一(yī)樣,做(zu↕ò)一(yī)些(xiē)區(qū)隔多(duō)少(shǎo)也(yě)是(shì)需要(yào)的(de)—•—但(dàn)這(zhè)種結構卻是(shì)把用(yòng)戶最關心的(de)部分(fēn)甩在了(le)左側,因而右©側欄也(yě)就(jiù)離(lí)用(yòng)戶更遙遠(yuǎn)了(le),這(zhè)恐怕不(bù)是(shì)初衷。
4、最後,左圖右文(wén)字結構下(xià),眼球從(cóng)标題向右移動至₹配圖時(shí),右側是(shì)沒有(yǒu)邊界的(de),換言之,此時(shí)用(yòng)戶将下(xiàπ)意識地(dì)面臨:①看(kàn)右側欄 or ②折回看(kàn)下(xià)一(yī)篇 2個(gè)選擇; 而左圖右文(wén)字結構呢(ne)?正如(rú)第2點所述≈,眼球可(kě)以輕松地(dì)在配圖和(hé)标題之間(jiān)來(lái)回擺動,而不(bù)至于分(fēn)心至距離(lí)較≠遠(yuǎn)的(de)右側欄,因而從(cóng)局部關系上(shàng)來(lái)看(kàn),也(yě)是(shì)左圖右文(wén)字結構更勝一(yī)₽籌。