UI设计 - 轩枫阁 – 前端开发

前言

最近很流行图片高斯模糊处理，让网站的图片看起来有高大上的效果。应用点：如网站Banner、大气背景图等。模糊背景（blurred backgrounds）是一个很常见的设计效果，也被称为背景虚化，在网页和App的设计中屡见不鲜。虚化的界面设计直观的给人一种干净自然的视觉感受，因此，模糊背景的基调会使整个界面看起来更柔美。合理运用虚化背景可以将界面效果提高一个档次。

案例素材

背景虚化案例

优秀案例参考：http://www.uisdc.com/blurred-background-website-design

国外优秀案例：http://www.onextrapixel.com/2013/12/06/effective-use-of-blurred-images-in-web-design/

透明效果网站：http://www.uisdc.com/transparency-website-design

背景图片资源

模糊图片下载：http://vdisk.weibo.com/s/dt23BkiXHbFmp

150+背景素材：http://vdisk.weibo.com/s/aj4Q1htdUrYaV

模糊景观背景：http://vdisk.weibo.com/s/aj4Q1hteoqwVO

模糊材质纹理：http://pepsized.com/100-free-blurry-textures/

实现方案

方案一：图片高斯模糊

直接利用PS处理图片，使图片高斯模糊，调节参数可达到不同效果。查看全文

2014/10 07 周二

前言

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

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

前言

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

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

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

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

2014/09 20 周六