通通玩blend美工（7）——简约而不简单的块

 

---

 

　　最近在研发一个WPF快速开发框架，满脑子都是各种逻辑各种模式，写一篇比较休闲娱乐的博客，宣泄下我对美工的热爱。

　　我一直以来有意无意在手机应用或者各种网站上看到这么一种风格按钮，明明很简单，却有一种很清新感觉。一种独特的质感，让你很想去触摸。看了 万仓一黍 分享的

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

有了启发，这种配色这种质感，就是一直以来我想要的感觉。于是就产生了这个正则表达式替换测试工具

 　　　

效果：

 别点了，这只是WPF应用程序的截图，在移植到silverlight的时候，水印字总是会出现黑色的描边，而且是有的地方有有的地方木有。以我对silverlight的理解我就果断放弃了。文章最后提供了exe的下载及源码，有兴趣的可以下回去玩玩。

 

 　

 

1.总体思路

---

　　下面我就来分析一下，为什么这些块怎么会这么有质感。　　

　　仔细观察下，

　　1：的地方有一团白色的阴影，我的理解是：在现实中，我们对材质的区分，基本都是通过材质的光泽来区分的，金属反光很强、塑料制品的反光就比较柔和、朦胧。所以我认为，要做得有质感，首先就得光泽定位好。

　　2：的地方有一团阴影，现实中常见的物品都不会有绝对的平整，观察一下桌子上的书本纸张的边缘，是不是根据纸张的不平整阴影有深有浅。

　　人对新事务的第一印象，首先都会来源于生活中的常识。只要做得越接近常识，浅意识就会告诉你它就是某类东西，包括那类东西的其他属性，比如：手感啊、温度啊什么的。作为一名用户，他不会关心光泽啊、阴影啊什么的，感觉好就是好作品，如果能勾起用户初恋的感觉，那就牛掰了。

　　（个人理解，仅供参考...貌似我应该买本心理学的书籍看看）

 

 

 

2.详细设计

---

 　　整个界面都是由几个一样风格的块组成的，这里我们就来画一个块。

　　首先，拖入一个块，填充颜色(#FF4C9EC0)

　　添加一个阴影让它看起来有立体感一点

 　　画两个黑块，等下模糊了用来做不平整的阴影。

　　改变一下层叠顺序

　　添加一个模糊效果

　　接下来画出上面的光泽

　　先把方块再复制一份

　　对其应用渐变填充，参数如下

都为白色，右边那个点的透明度为0

添加上水印字

果断对Grid右键，构成TextBox控件吧。 

后台代码，简单得不能再简单了，每个按钮一句话。看源码吧

 

 

后记

---

　　这篇博客在这个系列里技术方面确实难度低了点。但是在另外一个层面来说对交互设计的理解升华到了主导用户心里的阶段。（其实是本人童心未泯，十分中意这种效果，很想拿出来和同样喜欢这种效果朋友分享o(∩_∩)o ）

　　程序下载：

　　http://files.cnblogs.com/tong-tong/Regex.rar

　　想要免费样式的就果断下载源码咯：

　　http://files.cnblogs.com/tong-tong/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7.rar