轩枫阁

前言

2014年，Google推出影响全球设计趋势的materialDesign，接着苹果推出ios8和两台影响ios屏幕适配的大屏手机。

1.大屏手机的普及化

首先让我们看一眼友盟的数据

Android

查看全文

前言

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。

你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章

事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and :after。但是，就本文而言，我们将把我们探讨的范围限制在:before 和 :after这两个元素上。因此，本文中的“伪元素”将特指这两个伪元素（:before 和 :after），我们将从基础入手，来研究这个独特的主题。 查看全文

前言

前端开发工程师介于设计师和后台开发中间，其实也算是视觉系，其中很多人同时也是很棒的设计师。那么无论是设计师本身，还是前端开发工程师，多读些设计类的书会是很好的，因为设计紧紧联系着用户体验。

设计属于所有人，也意在为所有人使用，这既是设计的价值，也是设计的责任。

推荐书籍

在你身边，为你设计

本书是腾讯核心部门之一CDC的设计经验总结和分享，并含有常规的交互设计、用户体验方面的设计法则，图文并茂，展现交互、视觉、用户体验设计的结合，体现当今着重体验的设计感受。本书内容包括：设计理念、设计方法、用户研究、体验设计、设计流程和工具，以及团队成长与管理等方面的知识与经验分享。

苹果的产品设计之道：创建优秀产品、服务和用户体验的七个原则

腾讯CDC官网：http://cdc.tencent.com/ 查看全文

前言

透明按钮，顾名思义，也就是在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。国外的设计师称之为“幽灵按钮”（Ghost Buttons），盛赞这种按钮通透简约，贴合整体风格又不失神韵，别具魅力。这种按钮的设计早已有之，但是在iOS和安卓双双风格转向之后，它携了扁平之风雷，成了网页设计的新趋势，拥有类似设计的网页设计作品入雨后春笋一般，映入眼帘。

网页按钮设计中的“幽灵”

说透明按钮是“幽灵”并没有错，“薄”和“透”是这种设计的最大特色。不设底色不加纹理，按钮仅有一层薄薄的线框标明边界，确保了它作为按钮的功能性，又达成了“纤薄”的视觉美感。置于按钮之后的背景往往相对素雅，或加以纯色，或高斯模糊，或色调沉郁，这使得即使有按钮也不影响观看全图，背景得以呈现又不影响按钮的视觉表达，双方相互映衬而达成微妙的平衡。有意思的是，设计师在使用这种搭配之时，比起以往有了更多的自由。一则方式简单，二者处理起来并不复杂，得心应手。二则易于调整，想突出背景，只需强化图片清晰度和色彩明暗饱和，将按钮挪到视觉焦点之外，按钮内用以更加纤细的字体即可；若想突出功能，引导用户，只需加强背景模糊程度，降低明度，将标题、文案、按钮置于焦点，按钮中的字体可以适当加粗，色彩可以用得更加跳脱，稍加调整就可臻于高大上。

所以，用此来做网页设计，不难，而作为大势所趋，你也可以轻易拿下，不是么？闲话少叙，先上案例。 查看全文

渐变的艺术

渐变是PS里的基本功能。PS渐变工具中设置好两端不同的颜色，简单一拉就就会产生渐变，还需要研究吗？实际上如何选用合适的渐变是一个设计师的基本功，也是一个界面好的开始，更是一门艺术。

效果类渐变

根据应用场景层面把界面设计分2类：效果类界面和应用类界面

效果类渐变，例如网站专题，娱乐性的软件操作界面，单一界面用户停留时间不会太长，界面需要追求华丽的效果，夺人眼球，所以需要华丽的渐变搭配。

• 效果类界面使用的渐变具有饱和度高，渐变跨度大的特点
• 渐变亮部暗部色调可不一致
• 渐变塑造的质感比较厚重

查看全文