你值得掌握的网页设计焦点法

   打造焦点:网页设计中的重心

  在莎士比亚那个时代,观众是非常不给面子的,品味也不是很高,简而言之,那时的观众是一群没有耐心、根本不懂文学的群众。

  他们辛勤的工作一天后,他们来剧院想要找点乐子和刺激,没错,他们想要的就是娱乐。

  莎士比亚之前的剧作家往往不受待见,有时候观众甚至会喝倒彩、砸场子,因为他们觉得戏剧太烂了,根本无法让他们感受到一丝一毫的乐趣,而且也抓不住他们的心。

  莎士比亚就在这种大环境下崛起,虽然有着极高的艺术涵养,却能得到贫民窟的赞歌,他的策略就是:用情节、用戏剧抓住观众的注意力 。

  他的作品短小精悍,戏服华丽,音乐优美,对白幽默诙谐、构思精巧。

  时至今日,科技创新日新月异,文明高速发展,然而,现在的观众,依然还是没有耐心,正如莎士比亚时代的观众一样。

  网页设计高手之路系列:

  网页设计师应该知道的网格系统

  如何有效布局信息繁杂的网站?

  尝试网页设计中不对称的美


  打造焦点的几条小建议

  注意力是个很抽象的名词,而捕捉注意力更是如同”老虎吃天”一样,无从下手,跟其他媒体一样,用户在浏览网页设计时,用户的注意力也非常不易捕捉。

  用户很严厉,很不留情面,他们从一个网页跳到另一个网页,只为寻求自己需要的信息,如果你的网页无法吸引他们,1秒钟之内就会被他们关闭,他们会觉得你的网页没什么用,只不过浪费流量浪费时间罢了。

  本文,我建议各位设计师采用莎士比亚的手段,来取悦观众,来增添一些富有吸引力的元素,这就是我说的:网页设计中的”焦点”。

  所谓焦点,值得是网页设计中最卓越的部分,能够迅速引起用户的注意,引导用户下一步操作。焦点抓人眼球,在众多元素中脱颖而出。

  焦点对于网页的浏览者来说,具有一种不可抗拒的魔力,焦点包含着重要的信息。在网页设计中设置焦点,这句话听起来依然很抽象,感觉很亏难。

  但是看看下面的几条小建议,我保证你会有所收获。

  布局(热区)

  网页设计,元素和空间排列的一种游戏。对于焦点来说,位置至关重要。有些网站虽然试图打造焦点,但是布局失误,这就导致了焦点不再是”焦点”。

  显而易见的是,焦点应该放在最显眼的位置(或者用户浏览最频繁的位置)。那么该要如何正确布置焦点的位置呢?最简单的办法是,设计师把焦点放置在”用户最容易注意到的位置”即可。


  然而,并不是所有的设计师都经验丰富,都能直接判断出用户浏览热点在何处。因此需要一种更科学、更形象的方法来检测,例如可用性测试。在运营网站之前,如果设计师可以对一群用户进行可用性测试,那么他便会明确的知道这些用户对网站的想法,大致了解用户的浏览热区。

  建议使用测试法,因为直觉有时候也不准。

  焦点出现的频率

  根据热区,完成布局之后,另一个问题又浮出水面:一个网站需要多少个焦点呢?

  如果回到几年前,你问网页设计师这个问题,他们往往会回答:一个焦点就够了。因为那时候的网页的长度有限,不像现在,各种垂直视差滚动、横轴滚动,造成了页面近乎”无限”长。

  倘若现在还只设置一个焦点,便有点荒唐了。而且,不光是主页面要有焦点,子页面也要有焦点。


  焦点的数目取决于内容和网站类型。

  例如,一个页面由一张大图,一大段文本构成,用来说明网站的意图。不过,我推荐使用至少三个以上的视觉焦点,穿插其中,来保证内容传递的效率。

  一个以上的视觉焦点能够更好的解释内容,大图用来冲击视觉,文本用来详细解释。

  打造焦点需要的元素

  知道大方向的建议后,我们来看看一些具体的细节——元素

  1、文本与字体

  文本与字体元素是攫取用户注意力的一大因素。若想吸引用户,文本字体必须创新、与众不同。


  使用合适的字体,佐以恰当的颜色、尺寸、留白,这样文字便成为了视觉焦点,用户打开网页便注意到了字体,见上图效果。

  2、图片,图像和插画

  一图胜千言,图像的信息量巨大。具有”行为召唤”效应的按钮和动画也很值得采用。


  插画和图标也可以用来阐述网站的主题,让图片有一种人性化的质感,用户便忍不住要触摸操作一番。

  3、留白

  极简主义是趋势,周围的”无”衬托了中间的”有”,用户自然会注意到”有”。直截了当的让用户注意焦点元素。至于留白怎么做?多跟苹果学学吧,苹果的设计非常简洁,苹果深谙留白之道。


  焦点突出的网页设计案例

  看了上面几条建议和细节后,是不是感触很多?感觉就跟吃完了饭一样,需要点餐后点心,最后的回味一番?好吧,这里是一些小小的收集,均是一些焦点突出的网页设计。

  他们向你展示了焦点设置的多样性和种种可能。无论是留白也好,图像也好,字体也好,颜色也好,他们合理利用元素,精巧的设置焦点,让用户对网站产生认可。

  KOA WATER


  IPOLECAT


  RIDE FOUR EVER


  WRIST


  GRIND SPACES


  THE PETE DESIGN


  MOSNE


  JEREMY LEVINE


  CARAMEL BUDGIE


  FK AGENCY


  总结

  对于网页设计师来说,焦点设置是一种技巧,更好的传达信息,更能留住用户,有点像魔法。同时也需要练习和技巧。

  希望这些建议能够对你有所帮助,祝你的网页能更快的吸引用户!赶紧到你的下一个项目里试试吧。

时间: 2024-09-10 22:50:15

你值得掌握的网页设计焦点法的相关文章

20个2013年最值得关注的网页设计趋势

在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇想法.在今天这篇文章中,我将与大家分享2013年里20多种网页设计的全新趋势走向. 设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈.观念上这些趋势代表了在网页设计社区最受喜爱的点子.可是当提到设计团队时,就会想到设计师拥有他们独立的观点,所以要有保留的接受这些想法. 1.响应式布局 响应式

网页设计一致性:设计风格与品牌形象视觉和交互

文章描述:网页设计的目标是将网页和用户连结,通过设计(顺手的导航.流畅的交互)让用户对网站产生信任.尽管网页设计以功能性为主,但依然可以为用户提供优良的用户体验. 网页设计的要点之一便是一致性,设计师首先需要了解一致性,然后再致力于构建页面元素之间的联系.网页设计的目标是将网页和用户连结,通过设计(顺手的导航.流畅的交互)让用户对网站产生信任.尽管网页设计以功能性为主,但依然可以为用户提供优良的用户体验. 客户,用户以及一致性: 具备一致性特质的网页能够帮助推广品牌.清晰传递信息.客户在意的是设

2016 年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步蜕变成为主流.作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们总结出了以下16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户

2016年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们可以总结出下面16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用

再战明年!2016年最值得关注的16个网页设计趋势

设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主 流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们可以总结出下面16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户

网页设计:20个值得关注的作品集网站案例

作品是展示个人才能的最佳方式,像设计,摄影这些创造性的职业特别需要有个人作品集网站,让你以个性方式展示自我并呈现你的作品给读者和潜在的客户.同时,这些网站中汇集的优秀设计作品和教程也是其它人获取灵感的很好的来源.今天,本文与大家分享20个制作精美的作品集网站案例,希望能带给你灵感. 01. Web Craftman 02. Nick Jones 03. Peter Solowski 04. Roxannecook 05. Frederic Christian 06. Arun 07. Made

25个巧用字体排版帅气的优秀网页设计

  虽然排版是网页设计 中极为重要的组成部分,但是绝大多数的网站并未在排版上做过专门的设计和调整. 事实上,在我看来我们日常访问的许多网站在排版设计上并无亮点,这也是为什么,当我们发现这些在排版设计上用心雕琢的网站的时候,会由衷地感受到喜悦和别样的幸福感. 如果你厌倦了无处不在的宋体.雅黑.Arial和Helventica,那么你应该会喜欢接下来的案例,这些巧用字体排版帅气的优秀网站会再次扩充你的网页收藏夹. 1. V02 Group 雅致的文字排版悬浮在半空中,和背景融为一体,这种设计除了众所

那些意境情怀俱佳的咖啡类网页设计

  音乐可以穿越时光,而美食可以跨越国界,它们和好设计一样,都无需语言来赘述.在过去的几年中,那些设计优秀的餐馆.酒吧类网站开始抓住更多设计师的眼睛和吃货的胃,成了"唯有爱与美食不可辜负"的真实注脚. 新鲜精致的美食与优雅的环境无缝融合,搭配的字体和色彩让你的饥饿感止不住地翻涌起来,你的胃口和情绪会被这些精心设计的网站完全调动起来.优设曾经发过设计优异的美食和美酒类的网站,今天我们来看看这类网站的另外一个重要分支:咖啡类网页设计. 在美国,平均每个人每年会喝500~700杯咖啡,在中国

尝试网页设计中不对称的美

  随着审美的不断提高,越来越多的设计具有一种不对称的美感.越来越多的设计师将视觉重点放置到偏离视觉中央的位置,通过不对称性来吸引用户注意,打造一种特殊的"视觉路径". 过于对称的设计,无法更自然高效的组织侧边栏.导航条等界面元素,对称设计提供的空间也往往有限.而非对称性具有一种视觉上的张力,将某种特殊的感觉转化为用户的兴趣.尽管非对称设计在布局调整上稍有难度,而且也会造成一种不平衡的感觉.然而用非对称性设计取代对称性设计,利大于弊,提供了更多的"可能".这也是网页