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

2013-10-8    藍藍設計的小編

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

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

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

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

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

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

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

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

Focal Points Useful Tips

打造焦點的幾條小建議

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

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

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

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

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

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

布局(熱區(qū))

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

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

Placement

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

建議使用測試法,因為直覺有時候也不準。

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

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

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

Frequency

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

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

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

打造焦點需要的元素

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

1、文本與字體

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

Text and Typography

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

2、圖片,圖像和插畫

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

Graphics, Images and Illustrations

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

3、留白

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

White Space

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

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

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

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

總結

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

 

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

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔