网页大图片应用技巧浅析 - 腾讯ISUX

用图像创造场景感,增强用户的真实体验,近些年来,图片作为背景填充整个屏幕的设计越来越广泛,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景,特别是企业品牌宣传、产品介绍等等。

在设计网页过程中,需要用到大量的图片,而且找到的图片大多风格迥异、无品牌感,那么如何找到合适而又能正确地应用图片呢?

如何正确应用图片

整理了一些经验总结供大家参考:

1.提炼关键词寻找图片

首先需要提炼产品特性关键词,通过关键词的形式寻找合适的图片。

上图是google云盘官网banner背景为一张在飞机向外看的图片,不难发现用这种比拟手法来表现云盘的口号“随时随地使用”,在任何时候、任何地点都可以使用文件。换位思考,假如我们来设计google云盘官网,首先提炼出关键词:随时随地、自动同步、超大空间等等,用最能突出特点和有代表性的关键词来寻找合适的图片。

上图是IBM旗下的MobileFirst产品,其主要为用户移动应用从创建到维护推出的一体化解决方案为广大用户提供更便利服务,那么根据项目提炼出关键词:手机、用户,该网站用了一张人拿着手机进行使用的图片,目的是为了突出项目的业务特点。

上图分别为苹果官网、研究无线电技术企业——高通的网站中运用的图片同样也是通过产品特点提炼的关键词来完成图片的选用。

2.图片品牌化

什么是图片品牌化?通过关键词寻找到的图片进行深度加工处理,使之在项目中运用到的图片都是一整套的、风格统一的,比如可以在图片的色调、色彩饱和度与特色风格上做调整等等,下面举几个案例。

Google Drive官网摘取出来的图片,这些图片不难发现无论在色调、色彩饱和度上是一致的,特点是低饱和度、颜色深沉和图片噪点,颜色上新颖有特色、风格上具有明显的品牌统一性。

上图为SAP公司官网的系列图片,作为全球最大的B2B企业为各行各业、不同规模的其他企业提供解决方案,正如它运用不同行业场景的图片一样:色彩丰富、但色调又不过于鲜艳,它们所有用到的图片都有这些特点。

美国高通网站的品牌宣传图片让人印象深刻,品牌特点独树一炽,颜色上运用冷暖搭配,加以渐变效果巧妙地叠加于图片上,虽然颜色种类不多,但能在风格、品牌上具有强烈的统一性,让人对品牌辨识度有更加深刻的记忆性。

项目实践

去年做了几个腾讯云的项目改版,尝试新的风格探索,排版上采用了大图片为背景。设计过程中考虑到产品的长远发展,通过研究后发现图片统一风格在产品品牌推广上有着非常重要的作用,通过几经打磨快速整理了实现方案。腾讯云线上新版本的页面图片已经实现了统一风格。

总结

大图片作为背景的设计风格,这种设计方式虽然非常强有力地抓住用户的注意力,能准确应用图片而达到更大的体验效果是非常重要的,如果去掌握,了解项目背景,利用关键词的方式寻找更合适的图片,此外还需关注用户对产品的印象程度,那么图片的品牌化就显得格外重要,把产品所用的图片设计为一整套统一的风格出来的效果是不可估量的。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (http://isux.tencent.com/image-application.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2015-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

【作品赏析】简单、直观、明了,这就是最好的设计

用户界面设计对于一个电商网站的成功是至关重要的,相对而言,人们更愿意浏览简洁美观的网页,所以,好的界面设计能够为网站吸引更多用户人群。 这是一个以滑板为主的电商...

3317
来自专栏BestSDK

ManoMotion推出免费3D手势识别SDK ,兼容原生ios和安卓

作为一家计算机视觉技术公司,ManoMotion在日前正式推出了旗下的软件开发套件。之前,ManoMotion与他们的客户是一对一的合作模式进行的,在SDK发布...

4347
来自专栏代码GG之家

SDL是什么,能干什么,为什么我们要学习它?

关于SDL,在简介里面,有一些概念,但是很多人还是留言,不清楚到底是个什么。这节,我简单总结下: 我们如何将一张图显示在屏幕上。这里简单的分为几个部分,硬件屏幕...

3008
来自专栏腾讯社交用户体验设计

教你爱的正确姿势-QQ红包520项目总结

813
来自专栏PHP技术

四招让你的网站“重获新生眼前一亮”

原文出处: teamtreehous - Kendra Gaines 译文出处:小米粥 我们都想拥有很棒的网站,想让其他人在看到我们的网站时眼前一亮。 如...

2539
来自专栏phodal

如何为技术博客设计一个推荐系统(中):基于 Google 搜索的半自动推荐

与统计学相比,基于内容来向用户推荐相似的内容,往往更容易获得。对于推荐来说,则有两种方式: 手动推荐 自动推荐 (PS:我承认,这句话说了等于没说。) 如下图所...

2096
来自专栏知晓程序

如何教熊孩子好好做人?这款小程序肯定有效

小程序体验师:郑旭光 教育孩子,是每个家长最头疼的事情。怎样才能轻轻松松教会孩子做事呢?

441
来自专栏企鹅号快讯

JavaScript能做什么?

JavaScript除了做前端开发,还能做什么? 很多朋友学习的第一门编程语言就是JavaScript,学习的过程中一定会思考这个问题:“JavaScript除...

1976
来自专栏PPV课数据科学社区

工具 | 17款工具,让你的数据更美观

想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。 有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。 并不是所有的工具都适...

2678
来自专栏互联网杂技

来自谷歌的5项Material设计规范

在2014年的I/O大会上,谷歌推出了Material Design。但一直以来,设计师们各行其是。今天一起来看谷歌官方的设计规范。 ? 谷歌推出了全新的设计语...

2775

扫码关注云+社区