图文搭配,网页不累

   从过去到现在,设计师们总是对方位性的问题格外敏感,可能还有些轻微的强迫症。比如有的网页设计师特别偏好黄金比例的使用,从而忽视了用户的视觉感官体验。

  其实,所有的法则或规律都需要设计师们的弹性使用,生搬硬套可能只会适得其反。以下是AnyForWeb为大家搜集的值得借鉴的图文混排案例,供大家评论欣赏。

  1.第一个案例是AnyForWeb为Nature House设计的图文交错的一种新形式。案例图片中的每一个字母或是小图片都会随着鼠标的悬停产生效果,由图变字,这样的设计不仅让图文之间的搭配变得更加生动,也增加了用户浏览时的趣味性。


  2.The Tech Beach的网站背景利用了Metro的设计风格,担心太规整?所以设计师将透明度较高的泼墨形状色块放在页面中间位置,文字重点和logo浮在色块上方。这样的图文搭配模式能让用户很自然的领会浏览时的先后顺序。


  3.Anyi Lu的巧妙之处在于留白部分。案例网页中的留白在中间的位置,看似文字和图片被一分为二了,但从心理角度上来说,这样做其实更加能激发用户连结图和字之间联系的好奇心、在单色底色的映衬下,幽灵按钮的设计也变得很抢眼,更有利于用户点击。


  4.Moon Camp彻底把文字和图片混合在一起。这种做法成功与否不仅取决于整体页面的布局,色彩的搭配也是个很关键的因素。网页色调属于昏暗系,所以设计师选择了星空色作为字体的颜色,与网站风格吻合,文字的不规则排列也让网站多了一份神秘感。


  5.Zizzi Ristorante的网站第一眼可能会觉得有些凌乱,但用户的视线最终还是会聚集到枚红色框内的内容上。单从布局上来说,这个网站并没有什么过人之处,但仔细一看,我们不难发现其实网站中图片的占比很少,按照常规的做法,页面会变得很单调,因此,设计师最后用一些色块或是图形巧妙地化解了这个不足,无形中完成了图片与文字之间的完美合作。


  6.LUKE BEARD的网站几乎没有什么布局可言,左边文字右边图片,仅此而已,但一些小设计让整个页面变得精致起来。图片中人物的视线向文字流去,沿着视觉流向来排布信息是很多国外网站惯用的布局手法。图片会引导用户去看文字内容,两者之间形成一种默契的逻辑关系。


  7.ZULU & ZEPHYR的网站运用的是对比布局法。大海和天空在色彩上形成了一种对比,起到了互相烘托并且增强效果的作用。他们之间的对比让页面中央的文字引起了用户的注意。用图来衬托文字,让画面充满了产生了一种别样的韵律。


  8.Tomas Jasovsky网站中的图文看起来似乎置身于两个图层中,也许若隐若现的内容才是设计师想表达的重点。


  9.M-Power Yoga的网站图片为用户带来了一种垂直和水平的双向平衡感,这样的图片能让用户更加心平气和的认真阅读页面中的文字。


  10.Segno的网站无论从图片内容或是色调上都充满了神秘感。对称的设计也显得比较讨巧,文字在页面居中的位置,给了用户最佳的浏览体验。


  在网页设计中,文字内容和图片的比重占了很大一部分,但差不多的信息量,呈现在网页上的效果却会大相径庭。如何将这些内容和元素安置在最合适的位置,也许是这其中很主要的原因。

时间: 2024-10-27 14:05:19

图文搭配,网页不累的相关文章

图文搭配网页不累!如何让图文混排好看又好用?

图文搭配网页不累!如何让图文混排好看又好用? 时间:2014-11-03 18:47 来源:优设网 作者:佚名 编者按:来看看高手是怎么做的!今天搜集了一组值得同学们借鉴学习的图文混排优秀案例,为了同学们能有所收获,案例都附有到位的分析,几乎每个案例都有特别的排版技巧,对提升版式设计能力很有帮助,来学习咯. 从过去到现在,设计师们总是 对方位性的问题格外敏感,可能还有些轻微的强迫症.比如 有的网页设计师特别偏好黄金比例的使用,从而 忽视了用户的视觉感官体验. 其实,所有的法则或规律都需要设计师们

360电脑门诊解疑难杂症 图文搭配更直观

对于绝大多数入门级电脑用户来说,因无法准确的用文字描述电脑故障,导致无法通过网络查找到相应解决方案的情形较为常见.为此,360安全卫士于近期更新了"电脑门诊"界面,给每一个电脑故障解决方案都增加了缩略示意图,以便于用户根据图片中显示的问题现象,更精准快捷地找到解决方案. 图1:新增电脑故障示意图极大地方便了入门级用户 当用户根据自己的需求选择相关选项时,可以看到360"电脑门诊"用卡片式界面呈现风格和图文搭配的方式,更为形象直观地描述常见电脑故障.用户只需按图索骥,

百度UEditor编辑器使用教程与使用方法(图文)_网页编辑器

我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web

【算法】8 图文搭配诠释三种链表及其哨兵

三种链表的介绍 原谅我拙劣的绘图能力,花了半天终于还是决定从网上找来了这三张图,因为环形链表的弧形箭头难以完美的展现出来. 以下3张图片来自Wikipedia. 大家看着图片应该也都知道这分别是哪种链表了.那么链表到底是什么呢? 它和前面的栈和队列一般,都是基本的数据结构,其中的各个对象按线性顺序排列.大家应该注意到了图中的大黑点,有些C/C++编程基础的同学肯定能够猜到链表是通过各个对象里的指针来指向下一个对象的,相比,数组则是通过下标来进行索引. 为了让大家加深印象,我们来联系到生活中的实例

网页设计教程:网站背景中的他!她!它!

以人物肖像作为网页背景在国内的网页设计中并不多见,但却是国外网站很热衷的一件事情,这看似大胆并且冒险,实则能在无形中大大的提升网页的用户体验. 笔者曾经在<图文搭配,网页不累>的案例中提到,视觉引导对于首次访问网站的用户非常重要.当用户来到一个完全陌生的页面,网站必须予以合理的引导,这样才能让用户有继续浏览点击的方向. 人物背景网页设计的好处不仅如此,以下是笔者为大家收集的各种相关案例,让我们在案例中继续探索. 1.第一个案例是笔者为OYAMA定制的官方网站.从首屏设计上就不难看出网站需要表现

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

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

网页设计心得:网页设计中的细节表达

     天下难事,必做于易;天下大事,必做于细.--老子    设计中的细节表达,能够体现一个人的创新意识和能力.注重细节,能够让你去挖掘出更深层次的内涵.从而在侧面大幅度提升作品的影响力.让设计更具说服力. 细致入微    在写作中,使用细节来渲染.突出人物的形象.性格,是一种很常见同时很有效的方法.细节贵在传神,传神而突出.可以用来烘托气氛.衬托环境.突出人物性格:在产品中可以提升用户舒适度,提升用户的安全感:在生活中,细节可以让人感动.    这里并不是把细节给神化了.无论你是大开大合,

如何让图文混排好看又好用?

  来看看高手是怎么做的!今天搜集了一组值得同学们借鉴学习的图文混排优秀案例,为了同学们能有所收获,案例都附有到位的分析,几乎每个案例都有特别的排版技巧,对提升版式设计能力很有帮助,来学习咯. 从过去到现在,设计师们总是对方位性的问题格外敏感,可能还有些轻微的强迫症.比如有的网页设计师特别偏好黄金比例的使用,从而忽视了用户的视觉感官体验. 其实,所有的法则或规律都需要设计师们的弹性使用,生搬硬套可能只会适得其反.以下是AnyForWeb为大家搜集的值得借鉴的图文混排案例,供大家评论欣赏. Nat

网页设计就是戴着锁链跳舞

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在网页设计初期,我们会先收集大家对设计方向的期许,我们经常收集到这样的建议: 产品经理:要易用,要简洁 设计总监:要特色,要亮点 部门经理:要大气,要统一 -- 设计师要三头六臂,左右逢源,顾此又顾彼. 首先,对网站而言,视觉和体验是一体的,相辅相成携手共赢.视觉上的统一要求体验上的一致,体验上的创新也要求视觉上的突破,然而某些需求的字眼本身就是自相矛盾或难以捉摸的,如何又简洁又特色又兼顾统一?对工具类网站的设计,大方向是力求简洁精炼的,作为辅助手