本文总结了最近网页设计领域比较热门的几种技术，代表了一定的趋势，设计师们要跟市场接轨，紧跟潮流的脚步，可以阅读这篇总结，肯定大有裨益。

腾讯cdc：技术的革新带动了设计行业的的迅猛发展，这使得设计师和开发者有了更广阔的的探索天地。而网页设计也越发不再那么循规蹈矩，许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时，不妨也来看看现阶段网页设计大致的趋势和风格吧。

我不敢大言不惭的说这就是网页设计的必然趋势，这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的思路和想法。

01. 响应式网页设计（Responsive Web Design）

现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。

除了多终端的多样化，我们还可以看到我们的电脑屏幕，手机屏幕都在不断变大，而在对未来生活的预测、概念设计里，”屏幕”%

Queen译者注：随着平板电脑市场的迅猛增长，你可曾考虑到网站在平板上的用户体验？本文给出了6个提升网站平板体验的简易技巧，让你花小气力，出大成果，可谓事半功倍。要不你试试看。
原文链接：the-pursuit-of-tappiness

在这篇文章发布时，仅在美国就有近7000万的平板电脑用户，这比前一年的数据增加了一倍。这意味着，美国近30％的互联网用户使用平板设备上网浏览。2011年到2012年间，电子商务网站在平板电脑上的交易量增长了348％，第一次超越智能手机的交易量。由于平板市场很年轻，其未来的发展空间必定很大。
这一趋势传递了一个强烈的信号：如果你的网站还没有针对平板电脑进行设计的话，现在是时候优先考虑其在平板电脑上的可用性了。否则，忽略这一点可能会对网站的整体转化率，回访量，销售量等带来负面影响。

什么是”点击愉悦感”（tappiness）？

当一个网站具有”点击愉悦感”时，用户在手机或平板设备进行访问的操作将变得容易而愉快。点击愉悦感包括巧妙使用的空间，易于阅读的文本，符合逻辑的交互线索，和大尺寸的点击目标，这些让访问者浏览网站时充满信心。

本设计中，大字体和大点击目标的体验很好，即使在平板电脑上缩小后，体验依然不错。
而在另一些设计中，文字太小无法阅读，链接太接近容易误操作，无形中增加了操作时间、复杂度以及体验上的挫败感。糟糕的体验下，用户将快速流失。

本设计中的小字体和小触摸目标被证明在平板电脑上难以阅读和使用。
一种理想选择可能是：重新设计你的网站，让它能针对各种不同设备进行自适应布局，但时间和成本可能会使你无法完成这样的全面翻新。然而你还有其他选择。本文给出一些技巧和方法，能快速帮助你提升网站的平板用户体验，只需几个简单的变化，你今天就可以做到！

推荐一 ：（5星）

Smashing Magazine

网站的精选文章比较综合，包括Design, Coding, Mobile, Word Press等，整体质量很高，非常适合用户体验从业人员持续关注。

推荐理由：

1. 对于设计师而言，DESIGN, MOBILE, UX DESIGN这三个tag的内容都很棒；
2. 文章总体质量非常高，篇幅虽长，但很成体系；
3. 订阅者超过1,100,000，用户活跃度高，每篇文章的回复都很专业；
4. 超过1,700篇原创文章，890位作者，他们均有多年从业经验；
5. eBooks中很多优秀书籍免费。

随着CSS的广泛应用，透明元素在网页设计中大量采用。

通过添加透明效果，可以增添页面的对照感和可读性，同时对整体的效果妨碍又不大，可谓一举两得。

一般来说，采用透明效果显示区块、展现数据，透明效果出现在很多辅佐元素当中，这样前景元素就显得非常突出。
让我们来看看透明效果，这种优雅而又华丽的效果。

Wavefront

整体构成比较不拘一格，音乐节一般的氛围。霓虹色彩，半透明区块，让色彩更加动感，很好的支持了主题。

Advies

页面中含有很多透明条纹，中间的大区块既不影响背景图像的效果，也能很好的展现信息。

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场，走过两旁堆满商品的走道之后，左转右转，看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台，一个笑容甜美的收银人员对你温柔的问好，并接过你手中的果酱，告诉你价钱，帮你包装，然后找给你零钱和发票并且愉快的说再见。

现在你来到一个购物网站，在首页看到许多特价商品，你点选了食品的分类选项，来到果酱的分类。稍微看了一下果酱的介绍文章，然后点击鼠标把果酱放到购物车中，并点选结账：结果出现的是一个冷淡又死气沉沉的表单（Form）。

表单绝对是网站中用户和系统互动的最主要的元素，网站透过表单向用户提出问题，用户则透过表单向网站表达他的想法。标单又可以细分成三种元素：1、说明目的的标签；2、提供响应的输入方块或选单；3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生，他的服务应该要符合下面几个项目：

揭开iOS7扁平化的外衣，深入探索苹果的新式设计语言，一起来猜想一下新的设计风格是如何在iWatch iTv iCar上实现。

当谈到Jony Ive，我们就不得不谈到他在iOS7上的大改造，普遍看法是，这种改变仅仅是外观上的改变，换汤不换药。

iOS7的神秘面纱于2013年6月揭开，设计灵感来自德国已故传奇设计师Otl Aicher。
Jony Ive在iOS上决定采用扁平化风格，这就意味着以下几点风格的转变：

1、用色愈发大胆、鲜艳；
2、界面会拥有更多的留白空间，让元素更好的呼吸；
3、字体运用会更加优雅灵活；
4、即将使用大量的几何形状。

这就是Jony Ive摒弃拟物设计的原因。iOS7的推出，也可以看成是Jony Ive对拟物设计的宣战。

iOS7的扁平化设计非常”万金油”，不但适应了今天的iPhone以及iPad设备，也能够应用于未来的iWatch,iTV,iCar等设备。

D.A：我们都知道不管网页还是移动应用，响应速度都是最重要的体验指标之一，并且移动应用的网络环境不稳定，速度的体验显得尤为重要。其实速度优化不仅是程序员的事，设计，也能够让App变得更快。

1.后台执行

这是一条很通用，也容易理解的方法。用户不会愿意盯着进度条傻傻地等待，除了”取消”没有其他选择。在系统处理一些网络任务的时候，完全可以允许用户做一些其他的事情。

各大平台的发微博，都采用了后台执行。云阅读的离线下载也采用后台执行。

而微博的看长图(或视频)，是个反例。网络不给力时，要么等待1分钟让图加载完，要不就只好放弃看图。为什么不能让图加载的同时，用户可以看其他微博呢？

2.在载入前显示内容

客户端与web的一个不同点，客户端的显示内容包括本地数据和网络数据两部分。在设计界面时，将更多的信息放在本地，在网络数据未载入时即显示本地数据，让用户产生一种”已经载入一半了”的错觉，即使最终的耗时一样，心理感受也会更快。当然把数据过多地写在本地，会牺牲一些灵活性，需要根据具体情况考虑。

越来越多的传统企业拥抱移动互联网，以补充完善原有渠道的目标推出自有企业的品牌app，比如传统杂志社设计一款电子杂志app、传统实体店商家推出电子商城app。这些传统的做法已经司空见惯，让我们看看品牌大牛们有哪些不务正业的新玩法。

本文不谈趋势、不谈技术，也不涉及广告营销思路。通过分析研究以下八大品牌app案例的设计表现手法，总结出一些品牌app创新设计要点，希望与大家进行交流探讨。

【案例一】UNIQLO——清新型格的数字化生活工具

UNIQLO是一个拥有出色创新基因的日本服装品牌，UNIQLO品牌所倡导的Life Wear（服适人生）哲学——“Clothes for a better life, for everyone, every day”不是单纯将“衣食住行”的“衣”作为一种时尚，而是创造丰富人们日常生活的衣服，基于这个概念发表的各种数字化生活工具被归类为“UNIQLO LIFE TOOLS”，下面就来介绍一下这些apps——UNIQLO WAKE UP、UNIQLO CALENDAR和UNIQLO RECIPE。

UNIQLO WAKE UP

作为一个工具型应用，UNIQLO WAKE UP的欢迎语 “在随着天气而变化的音乐声中开始新的一天，分享您的起床信息” 道出了它与其他闹钟app的不同。它集天气、音乐、社交功能为一体，把起床和天气联系起来，配以的美妙女声播报，原创背景音乐则是由世界知名音乐人Cornelius和菅野洋子合作完成。

小伙伴们可去官网感受下：http://www.uniqlo.com/wakeup/cn/pc/index.html?high=true

打开app默认的是天气/时钟界面，清新明亮的大色块平铺十分迷人，不同天气会自动切换不同背景色和音乐。

在设计网页和程序界面的时候，为了确保每一个像素的颜色、纹理和位置都准确地呈现，大多数设计师都会被搞得疲惫不堪。一不小心，一些很常用的操作像移动、旋转和粘贴就会让你的辛勤劳动付之东流。但是，如果能对你的工作流程做些小小的改动，就能在项目中始终保持作品的高质量。

像素完美之旋转

如果你不够小心，那么在Photoshop中旋转图层就会使像素遭到明显的破坏，出现模糊。

使用自由变换工具（或其他工具）把图层旋转90度或270度后，像素最终的显示效果将取决于图层的尺寸。如果图层的宽和高都是偶数，你就可以幸免于难。如果图层的宽和高都是奇数，也不会有问题。但是如果图层的宽是奇数，高是偶数或者宽是偶数，高是奇数，那么你将会看到如下情景：

本例中原始图层的尺寸为20×9像素：偶数×奇数。尽管位图和矢量图层在旋转后的效果不一样，但两者都变得不可用了。这是由于图层旋转的中心点没有落在某个像素边界上导致的。

一种解决方法

当图层的宽高为奇数×偶数或偶数×奇数时，旋转后就会出现问题。因此，我们需要某种方法来保证图层的宽高是偶数×偶数或奇数×奇数。也许你所想到的解决方法就是给要旋转的图层增加一个正方形的位图蒙版或者添加更多的像素。除此之外，你还可以通过在另外一个图层上绘制一个正方形后跟原始图层同时旋转来解决这个问题。

总而言之，只要图层的宽高是偶数×偶数或者奇数×奇数就可以了。

一种更简单的方法

在使用自由变换工具时，把旋转的中心点挪到左上角（或其他任意一个顶角）就能确保它会落在某个像素的边界上，这样便能保证每次旋转后的结果都是完美的。为此，你需要在选择自由变换工具后在参考点设置按钮上单击下任意顶角再进行旋转。这是目前为止最简单有效的方法。

在QQ群与群友交流时，聊到网站如何做关键词评估，交谈中说到关键词的搜索量、商业价值、竞争程度三个方面的评估。关键词评估是关键字进行详细的评估是否具备优化的可行性，并从中选择高搜索量、高相关性、低竞争的关键词。

搜索量
搜索量是关键词日搜索的检索量，搜索量的高低决定着竞争度的大小。检查关键词的搜索量常用工具是百度指数、谷歌关键字工具等，如搜索“邮件营销”关键词是181（29/7）。

商业价值
关键词商业价值指关键词在行业中的地位，以及能给商家带来的回报作为衡量标准，通常使用在搜索引擎竞价上。进入百度推广账户，使用估算工具查询关键词预估价格。如预估“邮件营销”排名前三名的价格是7元。

关键词竞争度
关键词竞争是搜索结果中参与优化该关键词的页面有多少，网站有多少。例如搜索“邮件营销”这个关键词，返回的结果有2520000个页面，前三页直接使用首页优化的网站有11个网站，竞争程度是比较大的。

网络上有一个计算关键词竞争度的公式：关键词竞争度=关键词搜索量*10000/关键词相关页面数量。得到的结果越大，代表关键词竞争越不激烈，越容易优化，反之，结果越小，相对竞争度越激烈，越不容易优化。如以“邮件营销”举例，搜索量是181，相关页面是2520000，181*10000/2520000=0.72，该关键词较难优化。