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

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

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

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

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

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

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

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

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

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

Focal Points Useful Tips

打造焦點的幾條小建議

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

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

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

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

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

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

布局(熱區(qū))

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

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

Placement

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

建議使用測試法,因為直覺有時候也不準(zhǔn)。

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

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

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

Frequency

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

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

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

打造焦點需要的元素

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

1、文本與字體

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

Text and Typography

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

2、圖片,圖像和插畫

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

Graphics, Images and Illustrations

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

3、留白

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

White Space

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

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

他們向你展示了焦點設(shè)置的多樣性和種種可能。無論是留白也好,圖像也好,字體也好,顏色也好,他們合理利用元素,精巧的設(shè)置焦點,讓用戶對網(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è)計師來說,焦點設(shè)置是一種技巧,更好的傳達(dá)信息,更能留住用戶,有點像魔法。同時也需要練習(xí)和技巧。

 

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

日歷

鏈接

個人資料

存檔