通通玩blend美工(7)——简约而不简单的块

简介: 原文:通通玩blend美工(7)——简约而不简单的块      最近在研发一个WPF快速开发框架,满脑子都是各种逻辑各种模式,写一篇比较休闲娱乐的博客,宣泄下我对美工的热爱。   我一直以来有意无意在手机应用或者各种网站上看到这么一种风格按钮,明明很简单,却有一种很清新感觉。
原文: 通通玩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

  

 

 

 

 

  

目录
相关文章
|
12天前
好看的粒子特效代码
好看的粒子特效代码,鼠标可以拖住旋转或者放大,喜欢的话可以拿去使用
24 2
|
前端开发 JavaScript
想要字体图标设计师却给了SVG?没关系,自己转
本文为Varlet组件库源码主题阅读系列第三篇,读完本篇,你可以了解到如何将`svg`图标转换成字体图标文件,以及如何设计一个简洁的Vue图标组件。
140 0
|
前端开发
脑洞大开:如何使用CSS实现自定义圆角虚线框
在CSS中,我们常用`border`来表示一个元素的边框样式,也可以使用`border`来绘制简单的分割线。最近遇到一个项目,需要用虚线来显示元素的边框。初步一看,这不很简单嘛,一行代码搞定`border: 1px dashed #ccc`。自我感觉良好,结果UI的同事直接提刀来了,“这是我想要的效果吗,我要的是……”。没办法,还是老老实实想办法解决自定义的虚线边框。
983 1
脑洞大开:如何使用CSS实现自定义圆角虚线框
|
机器学习/深度学习 安全 Android开发
搞颜色指南|巧用色彩搭配,制作吸睛网站。
建站|全网最系统的色彩搭配指南,教你制作吸睛网站
433 0
|
安全 C# 存储
通通玩blend美工(5)——旋转木马,交互性设计
原文:通通玩blend美工(5)——旋转木马,交互性设计       这一篇偏向于逻辑的比较多,放在这个系列里会不会欠妥呢?在中国交互性设计也是美工的份内职责哦~   所以没有blend基础的人也可以看懂这篇文章,不过要用到初中的几何知识哦~亲     相信很多人都在手机或者网页上或者K...
1011 0
通通玩blend美工(3)——可爱的云
原文:通通玩blend美工(3)——可爱的云   好久没有写这个系列的博客了,这里给个电梯吧,照顾新来的同学~~ 通通玩blend美工(1)——荧光Button 通通玩blend美工(2)——时钟     目前我在广州出差,一直细雨绵绵,闷得慌,仰望天空,大雾笼罩,看不见蓝天白云甚至太阳,怪不得昆明的房价涨这么高...... 最终效果如下: ←是不是很想把它捧在手里,来清爽一下,北方的同学也可以先放冰箱里,夏天再用。
932 0
通通玩blend美工(2)——时钟
原文:通通玩blend美工(2)——时钟 谢谢大家对我上一篇Blend的支持:通通玩blend美工(1)——荧光Button 再接再厉再来一篇~~! 这篇是建立在已经看得懂上一篇为基础来写的,有些细节我就不说了,截了这么多张图....写起来很累的.... 最终效果如下:     哇居然这么大...有点刷屏的嫌疑..     1.总体思路  分析上面效果--表盘+环形数字+时针+阴影各种logo装饰 表盘:由一些同心圆叠在一起,不同的圆用不同的渐变来填充背景以造成层次效果。
1077 0
通通玩blend美工(1)——荧光Button
原文:通通玩blend美工(1)——荧光Button   最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...)   看着各位大虾出系列文章貌似挺好玩的,本人耍了2个月的Wpf,有点见解,希望各位看官笑纳。
1054 0
|
关系型数据库 C#
通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~
原文:通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~       2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香慢慢烧完的Loading动画呢?     刚经历了某甲方高强度一个月的洗礼后,这几天刚好闲下来,这个问题又浮现在我脑海里。
984 0