网页大图片应用技巧浅析

标签: 视觉设计 图片应用 技巧 视觉 | 发表时间:2015-03-11 10:17 | 作者:leey
出处:http://isux.tencent.com

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

图1

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

如何正确应用图片

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

1 .提炼关键词寻找图片

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

QQ截图20150106144641

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

{7101B016-4F1A-4D88-B17C-2AD8109BBF35}

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

apple

QQ截图20150310173705

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

2. 图片品牌化

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

google-Drive

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

SAP

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

qualcomm

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

项目实践

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

配图2

总结

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

 

 

 

相关 [网页 图片 应用] 推荐:

网页大图片应用技巧浅析

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
用图像创造场景感,增强用户的真实体验,近些年来,图片作为背景填充整个屏幕的设计越来越广泛,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景,特别是企业品牌宣传、产品介绍等等. 在设计网页过程中,需要用到大量的图片,而且找到的图片大多风格迥异、无品牌感,那么如何找到合适而又能正确地应用图片呢.

Chrome网页应用开发教程

- tiger - 互联网的那点事
发布时间:2011年2月1日. 发布源:How-Tos(OhBoard). 我花了10天时间开发了OhBorad,这个小巧的白板应用. 12月12日,我萌生了想法,12月22日我赚到了第一笔钱3.99美金. 所以在这里和大家分享一下这个开发指南. 如果你打算自己做Chrome网页应用,那么你可幸运了.

图片类应用如何盈利?

- - 极客公园-GeekPark
[核心提示]图片分享开启的读图时代引起多方势力角逐,但至今也没有有效的盈利模式出现. 图片类应用可以怎样盈利,以及图片应用还可以创新出怎样的新形式,也是值得我们讨论的话题. 当Instagram被天价收购时,人们似乎以为读图时代已经结束,再也不会有超越 Instagram 成就的机会出现. 但随着 Flickr 对移动端的重视、Google 收购 Snapseed 并将其免费、Twitter 移动应用增加滤镜功能,以及一个又一个新兴图片类工具或社区的崛起,读图时代也许才刚刚开始.

网页设计中图片格式的选择技巧

- - 优设(UISDC)
网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤. 选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用…」的功能.

解析web网页并保存页面中的图片

- - Marshal's Blog
这个功能,是很多类似爬虫的应用需要实现的. 如果使用node.js,你会惊讶的发现,这个任务实现起来很容易,就象写嵌入在页面中的javascript一样. 建议没接触过node.js的,可以先看看 node.js能干什么. ,里面已经包含了最简单的解析web网页的功能. 这次做的是更具体的事情,我想把维基百科的坦克词条文章抽取出标题和一个图片:.

介绍几个java把网页报存为图片的框架

- - CSDN博客Web前端推荐文章
用java实现java截图倒不难,原理吗就是把当前屏幕存成一个图,然后获取鼠标拉去的想去位置然后把截取的图保存到panel里边,再生成图片即可:示例代码就不展示了,网上很多. 下边说几个将网页保存为图片的框架:. 我说这个就是原声的java代码进行封装的一个jar包. 效果非常差,代码就不贴了网上好多.

网页应用和原生应用的战斗

- - 陈轶的盛夏厅
Darling Fireball写了一篇不错的文章:. 我做了一下简单的翻译,有些地方是意译,虽然我希望信达雅,但是很多地方为了好玩,我连“信”都放弃了. 马克安德森给你出了一个思考题. 设想我们生活在一个只有平板和智能手机的世界里面. 有一天,你第一次见到了一个接在27寸显示器的上网本. 你会发现,平板/手机上有的东西,上网本里面都有,甚至更多;你甚至不需要下载应用,更新应用,一切都是最新的版本,触手可及.

处理网页图片最常见的10个错误及其解决方案

- - 极客521 | 极客521
对于任何一个现代网站来说图片都是最重要的部分. 当前,据统计图片已经占到网站总带宽的60%. 在一个图像丰富的社交网站上使用类图钉的布局,这个数字能高达85%. 对于高流量的网站,带宽很可能要为你的IT花费负主责,轻松超越虚拟主机和存储花费. 另外,如此大量的流量需要花时间,所以在浏览你的网站时,访问者很可能要花很长时间来等待图片的载入.

Site2Pic – 在线网页截图 | 小众软件 > 在线应用

- KiVEN - 小众软件
Site2Pic 在线网页截图,并生成地址供分享. 虽然这个服务让网页上的汉字都变了口,对于聪明人来说,还是偶有妙用. 访问:Site2Pic | 来自小众软件. ©2011 Thruth for 小众软件 | 原文链接 | 1 留言 | 加入我们 | 投稿 | 订阅指南. JPEGmini – 图像在线减肥.

软件应用的丰富网页摘要

- rokey - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发表者:Alejandro Goyen,产品经理. 原文:Introducing: Application Rich Snippets. 发布时间:2011年9月27日 下午 03:01:00. 丰富网页摘要可以帮助用户更为迅速地确定某一网站是否包含他们感兴趣的信息. 我们先前已为购物、食谱、评论、视频以及活动推出了丰富网页摘要,不久前,又推出了音乐丰富网页摘要.