就像服装和发型会变，网页设计的风格也在变。对于背景来说，趋势的变化尤其突出。
目前，大量的网站在首屏采用了大图。一些背景是清晰、写实的（如照片和插图），而另一些则可能是抽象隐晦的。大尺寸的、虚化或模糊的图也随处可见。
色块背景也很流行，但已经不是通常那种永不过时的黑和白。很多设计师使用强烈、浓重的颜色来帮助网站内容从背景中突显出来。
什么样的背景最适合你的网站，这并没有一定之规，但确实有一些共同的要素：
互联网背景的内容应该有目的性。
背景应该与你的品牌风格一致。
背景之上的文字内容应该易于阅读(无论是颜色、反差还是尺寸大小。) 背景的主题在整个网站内应该连贯一致。
背景应该能很快下载并且不会让你的网站变得缓慢甚至卡死。
最后，图案和纹理也用得很多。不过形状的大小最近改变了不少。越来越多的网站在背景中采用大块的图案，而此前曾经流行的则是小的图案。大面积的图案与低反差的内容带来一种很微妙的感觉。细微的纹理背景也非常流行，用以给设计增添真实的感觉。
清晰的图像
使用逼真、清晰的图像从来不会过时，但是流行与否则取决于使用的方法。越来越多的此类图像现在是直接作为背景，而不是作为其它背景之上的照片。插图也日渐流行。同样，色彩是非常重要的，因为它决定了插图的品质。
模糊或虚化的图像
使用虚化或模糊图的情况会有些复杂。它只有在图片本身品质很好的情况下才会带来好的效果，如果为了掩饰图片质量的低劣而去虚化，效果会适得其反。一般我们需要要很清楚为什么要把一张图虚化。有时候非常明显的模糊会有很好的效果（像 Humaan 网站中柔化的山峰），而有时候只需要轻微的虚化就足够了（上方 We Make 网站）。
图案或纹理
不要担心采用浓烈的图案背景。大块的、重复拼接的图案现在随处可见。细腻的纹理可以给设计增加真实感。此类流行设计的关键在于恰当的反差对比。请看 Alfred 网站的紫色，你可能要仔细地查看才能注意到背景中交叉的图案。
色块
明亮的颜色正在开始流行并越来越引起注意。大量设计师选择利用颜色来创造出深度和对比。
黑或白
黑和白是经典的背景色，用起来也简单。你可以很容易为字体产生对比效果（即使是很小的字），并且永不过时。如果加上一些细微的空间处理，黑色或是白色背景便会看起来更时尚。Foundry Co. 用到了线条来起强化的作用，而 Designing Monsters 在黑暗色调上用了大面积的对比色（黑白反差）。
小结
背景可以决定网站设计的基调。当然，在选择背景主题时，要考虑到你的内容。要记住网站设计中最重要的原则：让你的网站容易读懂。不要觉得有任何束缚。以上的这些例子中，那些最能在视觉中引起兴趣的网站不光采用了独特的背景，大多还采用了第二级的背景，比如在色块上方的照片，而文字又在两者之上。

一、有时候，图片是决定网站风格定位的很大因素，如下案例所示，只需要加入一张充满文艺气息的图片就能自然的提升整个网页的档次。这类型的网页设计一般都没有什么极具创意的布局排版，功能内容也做的尽量简单，就为了衬托这一份独特的极简。
二、Krystalrae是一个极具个性化的网站，纵观全局，每一屏的网页都呈现出了截然不同的风格。设计师正是利用了用户对新鲜事物的偏爱，所以把每个网页都以一种全新的样式展现在用户面前，让用户对之后的内容产生期待。
三、Studiotoole是一个漫画涂鸦风格的网站，网站用凌乱体现出了一种独特的设计风格。这种手法其实对网页设计师来说并不陌生，用图片的形式开传达含义或情感应该是设计师比较擅长的部分，这样的设计能让页面更加情节化，让用户更容易投入到网页环境中。
四、样的网站首页一定能让用户欲罢不能。手绘风格的网页设计可能会让你觉得不实用，与其他风格之间的搭配会显得格格不入，但看了下面的案例之后，你会发现真的多虑了。设计师将导航元素也融入了手绘画面中，功能和场景之间毫无违和感，让用户仿佛置身于网页插画中。
五、图片的吸引力总是强过文字，但清晰的粗体大字也能起到类似的效果。Atlassian的网站并没有因为首屏只有文字而降低趣味性，文字内容的颜色以鲜亮为主，排列流向也同时突出了网站的逻辑层次。
六、清真实大图的使用在网页设计领域为很多设计师津津乐道。但如此简单的设计和布局着实少了一些吸引人的设计元素，难免会让网页整体看起来有些严肃。要改变这一不足其实很简单，将主文字设置为粗大的字体就能很有效的缓解这个问题，图片始终比大段文字更吸引人。

1、将复杂操作转移给系统
每一个过程都有其固有的复杂性，无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿消失，只能设法调整、平衡。复杂性存在一个临界点，超过了这个点，过程就无法再简化了，你只能将固有的复杂性从一个地方转移到另一个地方。比如想要做菜就一定要洗菜切菜，这个复杂过程是无法跳过的，但我们也可以购买洗好切好的蔬菜，将复杂转移给商家。
在交互设计中，如果已经到了这个临界点怎么办？我们可以将复杂操作从用户转移给系统，让机器代替用户进行操作。
在Google Map中，如果用户想查询线路，就一定要输入起点和终点，这是无法省略的过程。但是在查询路线时，Google Map会利用定位功能自动将起点定位为“我的位置”，减少用户的操作。
其实将复杂操作转移给系统，就是让机器变得更智能，这是科技发展以来人们一直在做的一件事。无论是记录用户名和密码、自动识别用户IP所在的城市、自动补全等常见的交互设计细节，还是Google Glass智能眼镜、可以自动驾驶的智能汽车等高科技产品，都是增加了工程师的工作量，将复杂转移给系统，来让软件变得更加简单好用，让数以万计的用户减少额外的付出。
2、减少冗余步骤和干扰项
人们在处理信息、学习规程和记忆细节方面的能力是有限的，选项越多，步骤越长，用户需要耗费的注意力和理解力就越多。一个人面临的选择越多，所需要做出决策的时间就越长。复杂的操作流程，也往往来源于冗余的步骤和干扰项。
下图分别是微信付款和支付宝付款的界面。两个界面都是让用户输入六位数密码，唯一的区别就在于支付宝在输入密码后，要点击一下确定才能支付，而微信输入密码后直接支付。虽然只是一个操作上小小差异，但在感受上，还是会觉得微信的体验更流畅。
多一次操作，意味着多一次注意力的转移，减少一个不必要的步骤，会让用户操作起来觉得轻松很多。
还有这么一个例子：一位哥伦比亚大学教授在一个超级市场设立了一个免费品尝的展位。在第一个星期六，提供了24种口味的果酱供人们品尝，而另一个周六则仅提供6种口味。出人意料的是，在有24种口味的展示上，有60％的顾客停在了展位并参与了免费品尝活动，在他们中有3%的人购买了商品；在只有6种口味的展示中，有40%的顾客参与了免费品尝活动，但在这些人中却有30%的人购买了产品。后者的转换率是前者的10倍！
提供很多选项看似可以给用户更多选择，让他们可以掌控局面，但如果超过了一定的界限，特别是在很多选择都很类似的情况下，反而会给用户带来负担。
下图为两款闹钟应用，一款提供了非常强大的功能，在设置闹钟时可以有多种重复方式：每天、每周的某些日子、每周的某些日子和第N组节假日、仅第N组节假日、每隔N日、每月的某一日、每月第N周的某日……另一款只是简单的让用户选择每周几重复。如果是你，会喜欢哪款呢？
设置第一款闹钟时我几乎要疯掉，如此多的选项让我无所适从，操作效率大大降低了。我根本搞不清楚“每周的某些日子和第N组节假日”是什么意思，也不觉得把闹钟设置为“起床闹钟”、“午睡闹钟”、“下班闹钟”有什么意义，只要它在设定的时间能够响就可以了。而在使用第二款时会觉得简单明了，很容易操作。
3、简化操作方式
回忆一下，几年前我们是怎样使用手机的？想要选择一个功能，需要用“方向键”上下左右来回移动，当焦点移动到要选择的功能时，再按下“确认键”。而现在，我们使用智能手机时，想要选择哪个应用，只需直接用手指点击就可以了，操作流程大大简化了。
以前我们在浏览网页时，看到一个想去了解更多的词会怎样呢？我在一篇文章中看到一本书，叫做《超级整理术》，我并不清楚这本书讲了什么内容，想去了解一下。于是我选中这几个字，点击鼠标右键复制，在浏览器中新建一个标签页，打开Google，在搜索栏中右键粘贴，点击搜索按钮。经过这一系列的操作之后，我终于在搜索结果页中看到关于这本书的简介、评价、购买信息等等。其实这整个过程也只是会耗费几十秒的时间，操作起来并不会觉得太难。直到有一天，我在使用Chrome浏览器的时候发现，在复制操作的下方，有一个“用Google搜索‘xxx’”的选项，只需点击这一选项，浏览器就会自动弹出一个标签页，把我要的结果搜索出来。“选中—右键复制—新建窗口—打开网站—粘贴—搜索”这一复杂的过程就变成了“选中—右键点击Google搜索”，只需两步轻松完成任务。
4、优化操作过程
上学的时候，每次使用学校教务处系统都是一种煎熬。当我填完一个长长的表单，认真核实所填的学生信息，填好验证码，点击提交后，突然系统提示验证码填写错误，之前填写的项被全部清空了。我要再次返工填写表单，这次会比第一次更加小心翼翼，生怕填错一个选项，但是填完后又出现弹出框，告知我填写学号需要区分大小写，关掉错误提示后又是一次清空……
操作中得不到反馈，发生错误后重新填写，比操作流程的冗余更加可怕。这些细节的不足，也增加了操作的复杂性。用户本来只需填写一次表单，在填写错误时只需修改一个选项，可是由于设计的不足，用户需要反复填写两次甚至三次表单，这也大大增加了操作的复杂性。界面中各种小细节的不足，就像公路上的减速带，会降低用户的效率。
提供合适的首选项、适时帮助、及时反馈、提供合理的默认值，等等这些细节的优化，可以帮助用户防止出错，使他们能够更快更顺畅地完成任务。
苹果系统iOS在更新系统时，会提前检测用户的电量，如果电量不足以支撑完成更新，会提示用户将iPad插上电源再来更新。试想一下，如果没有这个提醒会怎样呢？用户花费了大量的时间下载更新，在安装到一半时因为没电而关机，用户需要连接电源再次重新更新。更新的过程虽然没有冗余步骤，但因为缺少预先提示而导致的重复操作也会使操作流程变复杂。
因为简化复杂操作流程而获益的产品比比皆是：快捷支付使得很多支付类应用的支付成功率大大提高；手机快速注册、使用其他社交网站账号登录也使很多网站的注册转化率提升很多。如果一款产品以简化为初衷进行交互设计，给用户一个简便直接的操作流程，用户必然会喜欢你的产品。

在网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台，目的是帮助突出网站的内容。网页设计中总结出来的色彩搭配法则如下：
法则一：色彩的黄金法则 60：30：10
这是一个很基本的法则。设计师都知道60：30：10，主色彩是60%的比例，次要色彩是30%的比例，辅助色彩是10%的比例。比如一个男士的上装，打一个比方，外套可以用60%，那么衬衫是30%，领带就是10%。如果室内空间的话，墙壁用60%的比例，家居床品、创联之内就是30%。那么10%就是小的饰品和艺术品，这个法则是黄金法则，在任何时间任何地方都是非常正确的。
这个法则在后面讲到的很多法则都可用到，世界最好的设计基本上都脱不了这个法则，这是很简单的道理，但我们往往都会忽略它。有一双会发现色彩的眼睛很重要。我们经常去旅游，也拍了很多照片，更多人会热衷于对美景的赞叹和对当地的风土人情的介绍，但是很少人对色彩有分析。其实60：30：10多少也是得到了自然界的启发。我想在我们整个自然生涯中，旅行就是很好的色彩课。  
法则二：选择配色方案
选择配色方案，也就是说，我们一般两种选择，一种是补色的搭配，一个是叫类色搭配，学过美术都知道，色盘上面，两个颜色相对的就是补色的搭配，类似的颜色就是类色搭配。我们一般在需要营造那种活泼的有动感的空间的时候，选择红与绿、蓝与绿。那么类似色是相近的，比如黄与绿、蓝与紫。
法则三：勿忘黑色
现在我们看到很多所谓现代简约风格都会利用黑色，但是要灵巧运用黑色，而不是用太多的黑色。黑色能够让任何一个色彩看起来干净，但它本身并不是一个重点，它能够给家庭营造一种对比平衡。巧妙的运用黑色，可以是一个黑色的箱子，画框，做一种点缀，效果是十分不错的。
法则四：听从自然的教导只要是在地球上，你看到地球是什么颜色，是大地土壤，中间是群山。它是介于深和浅之间。我也看到很多人的很多作品，如果没有遵循这个法律，非常会不舒服。像这个图片眼睛往下看的，应该是以黑色为主，顶棚尽量是白色。这样人类会感觉很舒适很踏实，这是给我们最好的提示。
法则五：从图案中提取色彩
我们在做家庭室内设计的时候，最好是在家里面寻找一个比较突出的饰品，哪怕是一个配饰。突出的饰品要有色彩，黑色或者白色。其他的色彩最好是围绕从主要的空间寻找来色彩展开，比如说选择的花卉都是带有酒红色的色调，这个空间就显得比较协调。
法则六：流动色彩
其实这个大家都知道，一个色彩，一套房子里面，这么多房间你让一个色彩在每个空间不断的重复，当然是重复在不同的物品上来，这叫流动色彩。也可以是同样的绿色，到你的卧室里面，你的窗帘也可以用到同样的颜色。这个道理很简单，它可以让整个空间统一起来，这是一个非常简单的方法。
法则七：色彩的反差
其实它指的是色彩，应该是叫色度，它不仅仅是指的深浅的问题。就是说当颜色对比越强烈的时候，它给人更加正规，一般用到客厅、餐厅，需要跟外面的人见面的时候，比较适合。如果色差比较小，比较接近，就适合于比较轻松、随意的空间，像卧室里面不要用色差很大的色彩，那样会让人很难安静下来。
法则八：触动人心的色彩
色彩会直接或间接地影响人的情绪、精神和心理活动，应用到室内装饰中，色彩的功能就是能满足视觉享受、调节人们心理情绪、调节室内光线强弱、体现人们的生活习惯。只要是人类都会对颜色有感觉。蓝色你会想到天空大地，****会让你联想到太阳等等。在室内设计，你会把本人的对色彩的感觉考虑进去，这会让很多人设计师忽略的。天空是很热烈的，所以它不适合于放到卧室里面，会让人很难入睡，卧室里面应该不用蓝色这种让人很难安静的色彩。
法则九：色彩的季节性
以秋天的色彩为例，所谓秋天的色彩，秋天是一个万物开始进入冬季，所以它是一个萧瑟的，不适于活动的生长的环境，如果你希望家庭需要这种让人安静的氛围，用秋天的色彩，类似芥末黄、褐色这种比较老气的颜色，很适合卧室、书房。，春天是万物生长的季节，所以春天色彩的颜色自然也是鲜明、醒目，充满活力。它适合的空间比如说餐厅，用春天色彩，粉红色、果绿色，给人的感觉很活泼。色彩的季节性也是自然的法则之一。
法则十：光与色彩
家的每一个空间在不同的季节中，根据它所处的位置，它的功能会不同。你经常在白天使用，它大部分是通过自然光来照明，晚上主要是以人工照明为主，如果空间处在南向就是以自然光为主，那么北向主要是以折射为主。你把一个色彩或一个物质放到阳光下、白炽灯下都不同。
为了推动了你对Web的配色方案的理解，最?好的事情就是抓住自己喜欢颜色，你可以用取样器(浏览器扩展Colorzilla)，并用它来?研究经验丰富的设计师是怎么做到的丰富的色彩搭配的。当你在浏览互联网的时候，看到一个很大的配合突破，你可以用颜色取样器看看在页面上使用的颜色的配色方案。你甚至可以尝试每个色相，看看哪些饱和度和亮度水平效果最好吧。另外要注意它的颜色组合的和谐度。

什么是网站的转化率？
转化率(Conversion Rate)是指访问某一网站的访客中，转化的访客占全部访客的比例。其中的“转化”，可以是从单纯地访问网站转变成网站会员(即注册会员)的行为;可以是网站会员从零购买经历转变成有购买经历的会员的行为:可以是从单纯的网站访客转变成参加网站活动的访客的行为;可以是邮件营销中的潜在客户转变成产品正式客户的行为;当然也可以是点击了网站上某种广告的行为……
对网络营销站点来说，转化率越高，则营销效果越好;反之，营销效果就越差。
转化率实际上是一个比值，它等于产生转化行为的访问数除以总访问人数。即
转化率=产生转化行为的人如总访问人数
从上面的公式可知:
在访问人数相同的情况下，产生转化行为的访客越多，则转化率越高;
在产生转化行为的访客相同的情况下，访问人数越少，则转化率越高。
这就得出一个很关键的指标:如何让更多的访问者来访问网站，并且同时让越来越多的访客产生转化行为?

一、什么是卡片
卡片是含有图片和文字在内的小矩形模块，它是用户了解更多细节信息的「入口」。要平衡界面的美学和可用性，卡片基本是一个默认选择。因为卡片用起来非常方便，还可以展示包含不同元素的内容。
1.内容架构卡片
将内容划分成多个有意义的部分，这样还节省了一定的屏幕空间。类似于「字词句段篇」的组成形式，卡片也是由最小信息单元组成，并汇总形成连贯的整体内容。卡片组成示例。图片来源：Material Design像 Facebook 这类大企业，其采用卡片驱动型的界面用于台式桌面、手机网页及 app 客户端时，卡片布局就被认作设计环节中的核心了。Facebook 充分利用了盒子风格的设计(即卡片——译者注)，将信息归类，哪怕是在怎么也滑动不到底端的页面上。
2.完美的拟物
在用户界面加入卡片设计可谓完美的拟物，它们看起来就像日常生活中真实存在的卡片。卡片其实在手机设备出现前就已经存在了，比如名片、棒球卡、扑克卡等等。卡片日趋成为使用较广泛的一种交互模型。因此，对用户而言，其更能凭直觉认识到，这些卡片就代表真实生活中的某物。
3.视觉享受
研究发现图片可以提升青岛网站建设的网页或 app 的整体设计，因为图片可以快速有效地吸引用户的注意力。基于卡片的设计通常主要依靠视觉设计，而使用大量图片就是卡片设计的一大亮点。所以，加入图片也使得基于卡片的设计更加引人入胜。
二、如何设计卡片
在同一页面布局中，卡片宽度应保持不变，但高度可以相应调整。卡片最大高度限于该平台可用空间的高度，但也可以临时延伸。例如，在显示评论框的时候。卡片高度既可固定，又可调整。
从设计角度来看，卡片各角最好是圆角，并且最好稍有一点阴影。圆角使卡片看起来更像一个内容块，阴影则可以反映出深度。圆角和阴影。
这些元素在没有分散用户注意力的前提下，能给设计带来一些视觉亮点。另外，还能给人一种卡片像是要从页面中跳出来的感觉。除此之外，还可以加入动画和动效。
卡片的优势设计恰当的话，卡片可以提升 app 的用户体验感。因为其功能性以及外形的原因，它们成了用户界面的一个增值元素，对用户来说，也更能凭直觉交互。