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

   来看看高手是怎么做的!今天搜集了一组值得同学们借鉴学习的图文混排优秀案例,为了同学们能有所收获,案例都附有到位的分析,几乎每个案例都有特别的排版技巧,对提升版式设计能力很有帮助,来学习咯。

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

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

  Nature House

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


  The Tech Beach

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


  Anyi Lu

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


  Moon Camp

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


  Zizzi Ristorante

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


  LUKE BEARD

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


  ZULU & ZEPHYR

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


  Tomas Jasovsky

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


  M-Power Yoga

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


  Segno

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


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

时间: 2024-10-01 19:09:22

如何让图文混排好看又好用?的相关文章

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

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

折角式精典的网页图文混排

图文混排的效果不错,和大家分享.以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

WPS图文混排长文档中插入空白页

WPS的图文混排特点就是页面对象(非随文对象)居多,而页面对象不会随正文变化而移动.这样就有一个问题,那就是已经排好版的一个文档(内含大量页面对象),作者想在中间添加一些内容的话,就要重新排版.WPS 2002以上版本有一个新功能可以解决这个问题,举例说明如下: 假如有一个排好版的文档,一共五页,每页都有若干页面对象,如果现在想在第二页后面插入一个空白页用于输入新内容,就可以在第三页的页首插入一个分页符,你会发现第三页以后的所有文字和对象都依次后移了一页. 另外,对于此特性另有辅助功能热键:Ct

Word2013新工具:图文混排编辑更加轻松简单

以前我们在Word文档中尝试移动图像或者图表时常常会碰到各种莫名其妙的位置偏差问题,令人抓狂,在新版的Word2013中专门针对这个用户抱怨颇多的问题提供了一些方便图片控制和操作的新功能.一起来详细了解一下. "布局选项"按钮,可以方便用户在文档编辑时快速选择和改变图片布局. 实时布局,方便用户在对图片做移动.调整大小或者旋转时实时看到文档的新布局效果. 对齐参考线,帮助用户在调整图文时更加直观地查看重要区域是否对齐. "布局选项"按钮 我们在Word2013的文档

WPS图文混排长文档中怎样插入空白页

  WPS我们常常使用,用它来制作文档,写文章等等.但是,你又对它了解多少呢,它的所有应用功能你都清楚吗?今天就给大家来介绍一点. WPS Office wps的图文混排特点就是页面对象(非随文对象)居多,而页面对象不会随正文变化而移动.这样就有一个问题,那就是已经排好版的一个文档(内含大量页面对象),作者想在中间添加一些内容的话,就要重新排版.WPS 2002以上版本有一个新功能可以解决这个问题,举例说明如下: 假如有一个排好版的文档,一共五页,每页都有若干页面对象,如果现在想在第二页后面插入

Word2013中最为全面的图文混排攻略

  图文混排,相信熟悉Word的朋友肯定不会对这个词语感到陌生.图文混排应用到各个领域,最为常见的是一些杂志.报刊,图文混排,重点是这个"混"字,合理的对图片进行版式布局,能够为文档增色不少!下面,小编就来分享一篇图文混排的实例. 什么是图文混排? 顾名思义,所谓图文混排,就是将文字与图片混合排列,文字可在图片的四周.嵌入图片下面.浮于图片上方等. 实例演示 ①我们启动Word2013,首先复制一段文字进去,光标定位到需要插入图片的地方,单击菜单栏--"插入"--&

Android中使用TextView实现图文混排的方法_Android

向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到<img>标签. <img>只有一个src属性,该属性原则上应该指向一个图像地址或可以找到某个图像资源的唯一标识.但要注意的是,系统并不会直接根据src属性所指的值自动获取和显示图像,这一切都需要我们去做.说白了,src属性指的是什么只有开发者自己知道.开发者需要告诉系统src属性到底指的是什么,然后系统才会知道怎么做. 解析src属性值需要ImageGetter对象的getDrawable方法来完成.

winform图文混排-C# winform程序图文混排文章的添加、删除、编辑、展示

问题描述 C# winform程序图文混排文章的添加.删除.编辑.展示 有一个winform程序需要添加图文混排文章,文章来源于word,使用什么方式可以进行文章添加,并如何取出文章内容,通过何种形式保存入数据库.在文章展示时候,又如何从数据库取出展示到winform程序界面中.另外程序功能还提供对于这个图文混排文章的编辑功能. (注:数据库采用SQL 2008数据库.文章中图片文字搭配方式文章不同排版方 方式也不同.不建议使用任何第三方付费插件) 解决方案 最简单的是用richtextbox或

我在android中集成了mupdf,但图文混排的pdf不能解析图片,只显示了文字

问题描述 我在android中集成了mupdf,但图文混排的pdf不能解析图片,只显示了文字 你好,我用官方的 .so 文件,集成到android里面,现在能打开pdf文件,可是图文混排的图全部没有了,只有文字解析,而且没有很好的适应一页,明显下面还有文字没有显示,请指教 另外解析了一个xps文件,结果格式完全不对,图片还漂移 请指教,谢谢