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

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

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

來源:http://www.uisdc.com/hocus-focus-importance

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

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

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

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

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

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

Focal Points Useful Tips

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

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

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

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

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

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

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

布局(熱區(qū))

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

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

Placement

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

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

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

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

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

Frequency

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

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

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

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

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

1、文本與字體

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

Text and Typography

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

2、圖片,圖像和插畫

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

Graphics, Images and Illustrations

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

3、留白

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

White Space

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

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

他們向你展示了焦點(diǎn)設(shè)置的多樣性和種種可能。無論是留白也好,圖像也好,字體也好,顏色也好,他們合理利用元素,精巧的設(shè)置焦點(diǎn),讓用戶對網(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é)

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

 

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

日歷

鏈接

個人資料

存檔