轩枫阁

首页 / UI设计 (第2页)

图片模糊滤镜效果实现方案

前言

最近很流行图片高斯模糊处理,让网站的图片看起来有高大上的效果。应用点:如网站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  周二

前端设计类书籍推荐

前言

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

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

推荐书籍

在你身边,为你设计

23039670-1_w_1

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

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

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

2014/10 06  周一

网页设计新趋势!你听说过“幽灵按钮”吗?

前言

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

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

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

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

2014/09 20  周六

渐变设计的艺术

渐变的艺术

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

效果类渐变

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

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

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

查看全文

2014/07 01  周二

Google首页纪念现代舞先驱玛莎·葛兰姆的跳舞小人动画

前言

2011年5月11日,是美国现代舞大师玛莎葛兰姆(Martha Graham)的117岁诞辰,玛莎葛兰姆大师独创了玛莎葛兰姆式的舞蹈技法,以收与放为技巧充分展现舞者的感情,成为现代舞的创立人之一。GOOGLE为了纪念现代舞先驱,用巧妙的技术和奇特的创意在首页创建了一副跳舞的图。

效果图

M5X60F01010P00004U1

整个动画实际上是由155张小图片做出来的(GOOGLE的设计师太NB了),就像放电影那样 查看全文

2014/01 02  周四

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]