专业创造价值,服务赢取未来!我们专注于中小企业网站建设服务13年-亚网互联!
返回资讯中心当前所在位置:首 页 > 资讯中心 >设计视界 > 网页设计之2015国外最新流行的首屏10大图文混排技巧

网页设计之2015国外最新流行的首屏10大图文混排技巧

网页设计之2015国外最新流行的首屏10大图文混排技巧发布时间 : 2015-09-09    作者 : 亚网互联    浏览 : 2413

图文混排是设计中极为重要的一项技术,同时它也极难达到完美的境界。当然,在国内的话,可能客户会把你的设计当成是“偷工减料”~

图文混排是深圳网站建设、网页设计中极为重要的一项技术,同时它也极难达到完美的境界。要在网页首屏中呈现出完美的混排效果,你需要一张完美的照片,和足够出彩的文字排版。如果你准备接受挑战,那么请看接下来这10条技巧吧。

1、强化对比

Packdog

深圳网页设计-图文混排技巧-色彩搭配

Wearetelegraph

深圳网页设计-图文混排技巧-文字可读

首先网页首屏中的文字必须具备可读性才行,所以你需要确认文字与背景之间的色彩搭配能让用户看得清楚。当你选择一个暗色调的背景,那么你需要使用白色或者浅色的的文字,而当背景比较素雅的时候,文字可以使用深色,这就是我所说的强化对比。

当然,对比不仅限于色彩,文字同样存在对比。文字与图像相互配合,才能达到出人意表的效果。例如第一个案例,Packdog网站的设计,大图作为背景,用色浓郁,文字则正好相反,轻薄而大小错落。这些对比强烈的元素组合在一起令人印象深刻。

2、令文字成为图片的一部分

meandmyselfportfolio

深圳网页设计-图文混排技巧-令文字成为图片的一部分

toast

深圳网页设计-图文混排技巧-文字和图片相契合

有的时候你需要让文字成为图片的一部分,甚至让文字成为图像本身来达到效果。当然这种处理方式所需的条件比较苛刻。要么你使用足够清爽简单的图片来和文字进行搭配,或者使用原本就包含图片的文字(当然,你也可以将文字妥妥儿地P到图片中的主体上,文字的角度、形变和纹理一定要融入进去)。

3、沿着视觉流向排布

Bradhogan

深圳网页设计-图文混排技巧-沿视觉流向排布
Workdiary

深圳网页设计-图文混排技巧-沿视觉流向排布

沿着视觉流向来排布信息是一项重要的技巧。文字与图片发生逻辑关系,两者相辅相承,所以此时文字不能覆盖到图片的主体部分——比如需要展示的人物,或者产品本身。

信息按照视觉流向排布的时候,图片中的主体会引导你去观看文字信息。这两个案例都使用了这种技巧,文字都是沿着人物的面目朝向或者眼神指向来排布的。

4、模糊背景

helloniche

深圳网页设计-图文混排技巧-背景模糊

wallmob

深圳网页设计-图文混排技巧-背景模糊

模糊背景是一种非常简单的处理手法。PS可以很轻易地模糊照片,而照片的模糊带来的直接效果就是让产品本身更加突出,以上的两个案例就是如此,亚网互联官方网站建设策划时内页的Banner图也是采用这种模式,突出重点。

5、将文字置于框中

tradestoneconfections

深圳网页设计-图文混排技巧-框住文字
tnvacation

深圳网页设计-图文混排技巧-框住文字

当照片中光影交叠,色彩丰富的时候,将文字置于框中会是个不错的选择。根据文字和图片的形态选择圆框或者方框,然后设置好色彩,确保对比度。适当地调整透明度,让框、文字于图片完美地糅合到一起。

6、将文字置于背景中

squareup

深圳网页设计-图文混排技巧-文字与背景相溶

caitlinwicker

深圳网页设计-图文混排技巧-文字与背景相溶

比起置于前景的文字,将文字融入背景也许是更有意思的”花招”。文字常常易于融入到纯色背景中,还能确保可读性。并不需要太复杂的技巧和改动,你就可以让文字自然地融入背景,你所需要的仅仅只是微妙的阴影效果,正如上述的案例。

7、将字体放大,信息着重渲染

plainmade

深圳网页设计-图文混排技巧-文字放大

当你不知道要怎么处理素材的时候,试着放大吧。这不仅仅针对图片,它还适用于文字的处理,放大的元素更容易抓住用户的眼球。正如上述的两个案例,放大的咖啡豆强化了对比,放大的文字则极具冲击力。

8、强烈、恰到好处的色彩对比

knucklesindustries

深圳网页设计-图文混排技巧-色彩对比

storyandheart

深圳网页设计-图文混排技巧-色彩对比

通过色彩对比可以提高整个首屏的趣味性。以上的两个案例中,一个降低了背景图的色彩对比度,令文字更加突出,而另一个则让这种对比出现在文字内。两种方法同样有效。

9、具有引导因素的配色(调色)

winshape

深圳网页设计-图文混排技巧-色彩调配

brandvillage

深圳网页设计-图文混排技巧-色彩调配

通过调色让照片的色彩更适宜文字呈现是最近越来越流行的玩儿法。虽然这种方式有点投机取巧,但是它可能带来极其惊艳的效果。

调色的时候,尽可能选择与图片相近的色彩来调整,确保图片中的内容能够透过又不影响文字的阅读就好了。要掌握好这一”花招”你可能需要尝试不同的色彩,”玩坏”好几张图片才行。不知道用什么色彩?试试从你最喜欢的颜色开始吧。

10、简化

keepsareal



那些历久弥新的平面设计向我们证明了“保持简洁”也是一种有效的设计手段。玩儿太多花哨可能会适得其反,简洁地将图文放到一起可能就很和谐了。处理图像的时候,使用简单直观的排版和清晰明了的照片,确保照片是最重要的组成部分,文字与图片主体之间没有阻碍和干扰,并且文字清晰可读。

写在最后:

说句实在话,这种网页设计的风格,就亚网互联小编从事行业十余年的经验来看,至少目前为止,还是比较难让国内有网站建设需求的企业用户青睐的,为什么呢?国内更多的注重的是产品图片,一大堆使劲儿往首页塞,特别是有些所谓做SEO的网页,整个企业网站首页,基本上是一条一条的资讯,这是很伤害用户体验的,建议大家看了这十大流行风格,可以融入到自己的风格中,让设计水平更上一步喔~

其他人还阅读了该篇文章:2015年网站设计十大趋势分析

您可能感兴趣的文章:公司网站建设注意事项    |    企业网站建设套餐    |    企业手机网站制作    |    企业网站如何优化    |    企业网站改版收费

关于我们 / About Us
深圳网站建设办公环境 深圳市博士通科技有限公司旗下“亚网互联·中国(www.800535.com)”是一家一站式中小企业网络运营方案提供商,全国统一服务热线 :0755-89812581 ; 亚网互联总部位于深圳,业务涵盖域名注册,空间购买,深圳网站建设,网站建设和改版,微信公众号运营,百度竞价托管,网站优化推广引流,手机网站建设,小程序开发,购物网站开发,企业邮箱申请等服务。和传统网络公司不同的是,亚网互联在网页设计风格上独树一帜,领先行业率先推出宽屏企业网站设计风格,围绕客户需求的同时兼具行业潮流设计网站,让网站在新式设备上获得更好地展示效果;历经14年网站建设企业网站制作经验积累,客户遍及深圳,广州,成都,香港等地,涉及办公,装饰,电子,物流等不同行业... > > > 详 情
联系我们 / Contact Us
深圳市  龙华新区
工业西路  龙胜时代大厦  1102 室
0755 - 业务咨询
89812581
售后QQ : 1227522459
E-mail : service@800535.com
© 2004-2018 深圳市博士通科技有限公司 版权所有( 粤ICP备15005241号-2 )  网站常年法律顾问:朱运德律师   
logo
做个企业网站多少钱?点击QQ图标,马上知道答案!
logologologo
咨询热线:0755 - 898 12581