图片格式与设计那点事儿（7）
作者：平四 来源：taobaoUED 发布时间：2011-01-06 12:17:00
标签：图片,格式,设计,jpg,png
3、思考与实践
什么样的设计更适合web页面？
慎用较“重”的视觉设计元素
Web2.0时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。
“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的html和css知识（尤其是CSS3实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。
下面这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。
如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。
例如在下面这个例子中，第一个Banner应用了更适合PNG格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。
当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？
0
投稿猜你喜欢
- 如果有一个字符串 eg: "sun,star,moon,clouds",想要在MS SQL中根据给定的分隔符',
- 我就废话不多说了，大家还是直接看代码吧~# 用一行代码实现for循环初始化数组o = 10b = [ o + u for u in rang
- 这篇文章主要介绍了python基于event实现线程间通信控制,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,
导语前段时间不是制作了一款升级版本五子棋的嘛！但是居然有粉丝私信我说：“准备拿到代码玩一下ok过去了！太难了准备放收藏夹落灰q@q~”所噶，- 相信大家在爬虫中都设置过请求头 user-agent 这个参数吧？ 在请求的时候，加入这个参数，就可以一定程度的伪装成浏览器，就不会被服务器
- 引言自ChatGPT出现，各种基于它的软件扩展纷至沓来，目前Word支持ChatGPT的add-in有两款，可以通过:插入->获取加载
- 根据Nicholas的说法，有四种代码会拖慢脚本的运行，并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 最近在看《深度学习：基于Keras的Python实践（魏贞原）》这本书，书中8.3创建了一个Scikit-Learn的Pipeline，首先
- 思路：利用time函数返回的时间字符串与指定时间字符串做比较，相等的时候执行对应的操作。不知道大家的思路是什么，感觉这样比较耗CPU。。。。
- 本文实例为大家分享了python图书管理系统的具体代码，供大家参考，具体内容如下实现语言：python图形框架：DTK+2.0数据库框架：S
- 这是第二天了，工作之余和女朋友一起学Python3，代码都是她敲的，有点辣眼睛，仅做参考。1.题目：输入“姓名”，输出“你好，姓名”有关安装
- 1 获取jobs的当前任务状态server_1 = jenkins.Jenkins('http://％s:％s@192.168.37
- ptb数据集是语言模型学习中应用最广泛的数据集，常用该数据集训练RNN神经网络作为语言预测，tensorflow对于ptb数据集的读取也定义
- 本文实例为大家分享了js实现圆形菜单选择器的具体代码，供大家参考，具体内容如下代码：<head> <style
- RGB图像转灰度图RGB图像转换为灰度图时通常使用：进行转换，以下尝试通过其他对图像像素操作的方式将RGB图像转换为灰度图像。#includ
- 前言：这个系列的专栏是为了保持 Python 手感而创建的，也可以用来学习 Python，因为存在知识跨越难度，所以先学习滚雪球系列为佳。二
- 一、 collections 中 defaultdict 的使用1.字典的键映射多个值将下面的列表转成字典l = [('a'
- 集合（set）是一个无序的不重复元素序列。可以使用大括号 { } 或者 set() 函数创建集合，注意：创建一个空集合必须用 set() 而
- 前言文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。通过网上爬虫获取了全国所
- 网页编程中，在与数据库打交道的时候我们经常会碰到乱码的经常。本文就将介绍一种ASP读取MySQL数据库出现乱码的解决办法。情景再现：使用My
