网页设计——大图片的应用

趣达 · 发表于 2015-7-16 17:32:46

您需要登录才可以下载或查看，没有账号？注册加入

×

现在几乎每家每户都有电脑，每当我们打开浏览器，都会看到各式各样的图片。现在图片有一种趋势：使用大图，尤其是电子商务类的网站。接下来，我会介绍一些大图的技巧和编排。

概述

大图片的应用在电子商务的网站里又有一个新的名词——首屏大图。从字面上可以理解为，页面里最具焦点、代表性的图片，而且强调的是大。首屏大图的形式有很多，例如：图文图片、图片轮播、视频、Flash、动图。以下讲解的内容主要侧重于淘宝电子商务类的网站。

先晒几张精美大图

这两张都是以建筑物为主，都带有文字，属于图文图片，色调偏暗，通过背景凸显文字，将文字与图片处理的恰到好处。

大图窍门：

1.干净。无论是图片还是文字都要设计的简洁明快，并且和其他图片形成对比，产生强烈的聚焦感，一张色彩繁多、杂乱无章的图片是让人很倒胃口的。（第一和第二的对比）

2.鲜明的标题和字体。鲜明的字体很容易吸引人们的眼球，促使人们去浏览文字的内容，快速地抓住中心和重点。

3.注重细节和适当的留白。细节图片看起来很有质感，有种逼真的效果，很是生动。

白色象征着干净、畅快、朴素、雅致，留白表示无元素、无装饰、空白状态。白色与留白相结合显得十分纯洁、小清新。留白可以衬托中心、平衡布局。

4.关于字体。虽然鲜明的字体很突出，但是要考虑好字体与背景的融合度，否则会适得其反哦，所以色彩搭配时很重要的哦。还有一点是，字体是不可以遮挡图片中的人和关键部分（会失去美感）

5.手机端的扁平化设计。之所以说是手机端，是因为更适用于手机端，当然PC也是可以使用的，看起来有股淡淡的小清新味。扁平化设计元素上强调抽象、极简、符号化，能直接表达自身的信息。好处是：界面干净整齐,降低功耗，延长待机时间和提高运算速度。

小结

看到这里，不知道你们有没有一些许启发呢？图片也是有灵魂的，我们可以将想要表达的内容通过图片展现出来，而大图的精髓是：视觉冲击大，集中注意力。

设计免费学习关注微信：great_idea和qduckcn

对平面设计网页设计 UI设计美术手绘感兴趣的，可以到群 186828000一起学习

兰日竹加 · 发表于 2015-7-25 19:39:17

-------------------------------end---------------------------------
帮你end 看我多好来么么吧
我会告诉你我电脑里有这几张图片吗

兰日竹加 · 发表于 2015-7-25 09:08:20

-------------------------------end---------------------------------
帮你end 看我多好来么么吧
我会告诉你我电脑里有这几张图片吗

jik;l · 发表于 2015-7-16 19:28:21

哦～～

大牙 · 发表于 2015-7-16 21:28:35

真是汗啊我的家财好少啊加油

消失?埃 · 发表于 2015-7-16 22:16:29

真是汗啊我的家财好少啊加油

不如愛自己ら · 发表于 2015-7-17 11:04:52

哦～～

开裆裤男 · 发表于 2015-7-17 12:07:56

真是汗啊我的家财好少啊加油

的克荷兰 · 发表于 2015-7-17 13:52:41

真是汗啊我的家财好少啊加油

大声道 · 发表于 2015-7-17 14:00:22

真是汗啊我的家财好少啊加油

huoxv · 发表于 2015-7-17 14:11:02

真是汗啊我的家财好少啊加油

威龙巡洋舰 · 发表于 2015-7-17 14:29:19

真是汗啊我的家财好少啊加油

站长推荐 /1