向莎士比亞學(xué)習(xí)!你值得掌握的網(wǎng)頁(yè)設(shè)計(jì)焦點(diǎn)法

2013-10-8    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/hocus-focus-importance

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

打造焦點(diǎn):網(wǎng)頁(yè)設(shè)計(jì)中的重心

在莎士比亞那個(gè)時(shí)代,觀眾是非常不給面子的,品味也不是很高,簡(jiǎn)而言之,那時(shí)的觀眾是一群沒(méi)有耐心、根本不懂文學(xué)的群眾。

他們辛勤的工作一天后,他們來(lái)劇院想要找點(diǎn)樂(lè)子和刺激,沒(méi)錯(cuò),他們想要的就是娛樂(lè)。
莎士比亞之前的劇作家往往不受待見(jiàn),有時(shí)候觀眾甚至?xí)鹊共?、砸?chǎng)子,因?yàn)樗麄冇X(jué)得戲劇太爛了,根本無(wú)法讓他們感受到一絲一毫的樂(lè)趣,而且也抓不住他們的心。

莎士比亞就在這種大環(huán)境下崛起,雖然有著極高的藝術(shù)涵養(yǎng),卻能得到貧民窟的贊歌,他的策略就是:用情節(jié)、用戲劇抓住觀眾的注意力 。
他的作品短小精悍,戲服華麗,音樂(lè)優(yōu)美,對(duì)白幽默詼諧、構(gòu)思精巧。

時(shí)至今日,科技創(chuàng)新日新月異,文明高速發(fā)展,然而,現(xiàn)在的觀眾,依然還是沒(méi)有耐心,正如莎士比亞時(shí)代的觀眾一樣。

Focal Points Useful Tips

打造焦點(diǎn)的幾條小建議

注意力是個(gè)很抽象的名詞,而捕捉注意力更是如同”老虎吃天”一樣,無(wú)從下手,跟其他媒體一樣,用戶在瀏覽網(wǎng)頁(yè)設(shè)計(jì)時(shí),用戶的注意力也非常不易捕捉。

用戶很嚴(yán)厲,很不留情面,他們從一個(gè)網(wǎng)頁(yè)跳到另一個(gè)網(wǎng)頁(yè),只為尋求自己需要的信息,如果你的網(wǎng)頁(yè)無(wú)法吸引他們,1秒鐘之內(nèi)就會(huì)被他們關(guān)閉,他們會(huì)覺(jué)得你的網(wǎng)頁(yè)沒(méi)什么用,只不過(guò)浪費(fèi)流量浪費(fèi)時(shí)間罷了。

本文,我建議各位設(shè)計(jì)師采用莎士比亞的手段,來(lái)取悅觀眾,來(lái)增添一些富有吸引力的元素,這就是我說(shuō)的:網(wǎng)頁(yè)設(shè)計(jì)中的”焦點(diǎn)”。

所謂焦點(diǎn),值得是網(wǎng)頁(yè)設(shè)計(jì)中最卓越的部分,能夠迅速引起用戶的注意,引導(dǎo)用戶下一步操作。焦點(diǎn)抓人眼球,在眾多元素中脫穎而出。

焦點(diǎn)對(duì)于網(wǎng)頁(yè)的瀏覽者來(lái)說(shuō),具有一種不可抗拒的魔力,焦點(diǎn)包含著重要的信息。在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)置焦點(diǎn),這句話聽(tīng)起來(lái)依然很抽象,感覺(jué)很虧難。

但是看看下面的幾條小建議,我保證你會(huì)有所收獲。

布局(熱區(qū))

網(wǎng)頁(yè)設(shè)計(jì),元素和空間排列的一種游戲。對(duì)于焦點(diǎn)來(lái)說(shuō),位置至關(guān)重要。有些網(wǎng)站雖然試圖打造焦點(diǎn),但是布局失誤,這就導(dǎo)致了焦點(diǎn)不再是”焦點(diǎn)”。

顯而易見(jiàn)的是,焦點(diǎn)應(yīng)該放在最顯眼的位置(或者用戶瀏覽最頻繁的位置)。那么該要如何正確布置焦點(diǎn)的位置呢?最簡(jiǎn)單的辦法是,設(shè)計(jì)師把焦點(diǎn)放置在”用戶最容易注意到的位置”即可。

Placement

然而,并不是所有的設(shè)計(jì)師都經(jīng)驗(yàn)豐富,都能直接判斷出用戶瀏覽熱點(diǎn)在何處。因此需要一種更科學(xué)、更形象的方法來(lái)檢測(cè),例如可用性測(cè)試。在運(yùn)營(yíng)網(wǎng)站之前,如果設(shè)計(jì)師可以對(duì)一群用戶進(jìn)行可用性測(cè)試,那么他便會(huì)明確的知道這些用戶對(duì)網(wǎng)站的想法,大致了解用戶的瀏覽熱區(qū)。

建議使用測(cè)試法,因?yàn)橹庇X(jué)有時(shí)候也不準(zhǔn)。

焦點(diǎn)出現(xiàn)的頻率

根據(jù)熱區(qū),完成布局之后,另一個(gè)問(wèn)題又浮出水面:一個(gè)網(wǎng)站需要多少個(gè)焦點(diǎn)呢?
如果回到幾年前,你問(wèn)網(wǎng)頁(yè)設(shè)計(jì)師這個(gè)問(wèn)題,他們往往會(huì)回答:一個(gè)焦點(diǎn)就夠了。因?yàn)槟菚r(shí)候的網(wǎng)頁(yè)的長(zhǎng)度有限,不像現(xiàn)在,各種垂直視差滾動(dòng)、橫軸滾動(dòng),造成了頁(yè)面近乎”無(wú)限”長(zhǎng)。

倘若現(xiàn)在還只設(shè)置一個(gè)焦點(diǎn),便有點(diǎn)荒唐了。而且,不光是主頁(yè)面要有焦點(diǎn),子頁(yè)面也要有焦點(diǎn)。

Frequency

焦點(diǎn)的數(shù)目取決于內(nèi)容和網(wǎng)站類型。

例如,一個(gè)頁(yè)面由一張大圖,一大段文本構(gòu)成,用來(lái)說(shuō)明網(wǎng)站的意圖。不過(guò),我推薦使用至少三個(gè)以上的視覺(jué)焦點(diǎn),穿插其中,來(lái)保證內(nèi)容傳遞的效率。

一個(gè)以上的視覺(jué)焦點(diǎn)能夠更好的解釋內(nèi)容,大圖用來(lái)沖擊視覺(jué),文本用來(lái)詳細(xì)解釋。

打造焦點(diǎn)需要的元素

知道大方向的建議后,我們來(lái)看看一些具體的細(xì)節(jié)——元素

1、文本與字體

文本與字體元素是攫取用戶注意力的一大因素。若想吸引用戶,文本字體必須創(chuàng)新、與眾不同。

Text and Typography

使用合適的字體,佐以恰當(dāng)?shù)念伾?、尺寸、留白,這樣文字便成為了視覺(jué)焦點(diǎn),用戶打開(kāi)網(wǎng)頁(yè)便注意到了字體,見(jiàn)上圖效果。

2、圖片,圖像和插畫(huà)

一圖勝千言,圖像的信息量巨大。具有”行為召喚”效應(yīng)的按鈕和動(dòng)畫(huà)也很值得采用。

Graphics, Images and Illustrations

插畫(huà)和圖標(biāo)也可以用來(lái)闡述網(wǎng)站的主題,讓圖片有一種人性化的質(zhì)感,用戶便忍不住要觸摸操作一番。

3、留白

極簡(jiǎn)主義是趨勢(shì),周圍的”無(wú)”襯托了中間的”有”,用戶自然會(huì)注意到”有”。直截了當(dāng)?shù)淖層脩糇⒁饨裹c(diǎn)元素。至于留白怎么做?多跟蘋(píng)果學(xué)學(xué)吧,蘋(píng)果的設(shè)計(jì)非常簡(jiǎn)潔,蘋(píng)果深諳留白之道。

White Space

焦點(diǎn)突出的網(wǎng)頁(yè)設(shè)計(jì)案例

看了上面幾條建議和細(xì)節(jié)后,是不是感觸很多?感覺(jué)就跟吃完了飯一樣,需要點(diǎn)餐后點(diǎn)心,最后的回味一番?好吧,這里是一些小小的收集,均是一些焦點(diǎn)突出的網(wǎng)頁(yè)設(shè)計(jì)。

他們向你展示了焦點(diǎn)設(shè)置的多樣性和種種可能。無(wú)論是留白也好,圖像也好,字體也好,顏色也好,他們合理利用元素,精巧的設(shè)置焦點(diǎn),讓用戶對(duì)網(wǎng)站產(chǎn)生認(rèn)可。

KOA WATER

Koa Water

IPOLECAT

iPolecat

RIDE FOUR EVER

Ride Four Ever

WRIST

Wrist

GRIND SPACES

Grind Spaces

THE PETE DESIGN

The Pete Design

MOSNE

Mosne

JEREMY LEVINE

Jeremy Levine

CARAMEL BUDGIE

Caramel Budgie

FK AGENCY

FK Agency

總結(jié)

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō),焦點(diǎn)設(shè)置是一種技巧,更好的傳達(dá)信息,更能留住用戶,有點(diǎn)像魔法。同時(shí)也需要練習(xí)和技巧。

 

原文地址:onextrapixel
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB

分享本文至:

日歷

鏈接

個(gè)人資料

存檔