设计经验分享:漂亮又特别的网页按钮

网页制作Webjx文章简介:作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法。

作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法。

经常有同学问我一些关于按钮设计的问题,怎么样做些漂亮又特别的按钮,我常常会告诉他们怎么画按钮的技法。但是我觉得一个设计师的成长都离不开自己对设计方法的总结。画按钮的技法在网上能找到很多,但是很少有人讲按钮设计的方法论,所以今天我把自己总结的按钮设计的方法和大家一起分享。(既然是按钮设计的方法分享,所以我在画案例的时候略显粗糙了,还请大家多多包含)

一个漂亮的按钮,我们要看他的表现方式、形态、质感是否符合整个界面所要传达的整体风格是值得每一个设计师去重视的。随着网络媒体的发展。各行各业都在网络媒体上来展示自己,也相继出现了许多行业界面,那么这些界面的设计风格肯定不会千篇一律,那么涉及到的按钮设计也是各有风格的。

“艺术来源于模仿”,“设计来源于生活”。这两句话对我在学设计的时候起到很大的作用,我在画按钮的时候主要从生活中发现自己需要的元素。下面我就举例来谈谈我的方法。

首先,我们知道按钮在效果表现上很大一部分我们是从质感的表现上来识别的,比如我们最常见VISTA风格的按钮就是从玻璃质感上变现。大家可以看我找的玻璃瓶素材,很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。

这里我做了一个实例分析

玻璃瓶素材

A按钮我是完全按照玻璃瓶质感的方式来画的;

B按钮是我经过我对光规律的观察而总结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。

下面一种是我们经常所见的苹果风格的按钮设计,这种风格的按钮也是我们在生活中经常能见到的,键盘手机就经常采用这种设计方式,但是随着触摸屏手持设备的普遍,绝大数的键盘界面都采用模仿原来手机实物键盘的设计方式,这样是为了让用户对界面产生亲切感,同时这样的设计也看起来更加简洁美观。

键盘素材

C按钮是我参照键盘的质感做的样稿,

D按钮是我选择了同一色相不同明度和纯度所做的按钮,之所以列举这个列子,是为了说明我们在做这种风格的按钮设计的时候,一定要把握住一个很重要的问题,那就是一定是在同一种色相中拉渐变,这样的按钮效果才自然,当然除了设计师追求一些不一样的效果。

从这张色谱,大家可以看出色相的微妙关系。有利于我们做渐变类型的按钮。

E按钮就是我采用的45度角径向渐变的按钮,是为了说明渐变方式不同最后按钮的最后出现的效果也会不同,就这一点我们设计师可以设计出很多不同形式的按钮。

其它的我会根据我生活中的观察来和大家分享一些生活中的按钮设计,如图所示这个按钮设计是我仿常见的复印机上面的按钮来设计的,这种按钮的设计方法也很简单,但是效果很好。同时也加强了用户对界面的亲切感,更加有利于用户的使用。如下图:

下面这个按钮是我们常见的开关按钮,我只是按照开关的样式,粗糙的画了一个实例,为的就是说明其实在做按钮设计的时候我们参考的实物是很多的,多观察周围的实物往往会得到一些意想不到的收获,并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。如下图:

我觉得界面设计师在做界面设计的时候应该多观察生活中看到的物品,这些都能给界面设计师很大的启发。这篇博文希望得到抛砖引玉的作用,希望大家多多发表自己在做按钮设计的时候总结的方法论。希望和大家一起共同成长!

时间: 2024-08-30 02:24:12

设计经验分享:漂亮又特别的网页按钮的相关文章

网页设计经验分享;没有CSS时网页的可看性

文章简介:网页设计经验分享;没有CSS时网页的可看性. 先上示例,首页酒店模块的效果图如下: 代码结构如下: <dl>< dt>酒店</dt>< dd>北京</dd>< dd>上海</dd>< /dl>< ul>< li>北京酒店列表</li>< li>北京酒店列表</li>< li>上海酒店列表</li>< li>

网站导航设计经验分享:清晰的导航能够让页面简单易用

文章描述:网站导航设计经验分享:清晰的导航能够让页面简单易用. 导航是互联网产品中应用最广泛的基础元素之一,引导用户了解到网站的内容结构进而找到所求.作为基础控件,导航看起来简单,但却是产品设计中最复杂繁琐的一部分.因为我们想要让网站结构更清晰.想要向用户传达所有的信息,所以就赋予了导航越来越多的内容,使他们庞大异常,十分纠结.简化了,用户无法了解到页面结构以及自己的处境,产生困惑:复杂了,导航臃肿不堪,层峦叠嶂,既不美观也不好用. 那么,在清晰的信息架构下能不能让导航尽可能的更轻便.更灵动,是

交互设计经验分享:WEB拖放交互设计

文章描述:交互设计经验分享:WEB拖放交互设计.   开篇呈上赵本山和宋丹丹的小品笑话:  要把大象放进冰箱总共分几步? 把大象塞进冰箱要3步:1 把冰箱门打开:2 把大象装进去:3 把冰箱门带上. 这虽是一则脑筋急转弯的笑话,但却提炼出我们生活中将一个物体放进另外一个物体里通常有的3个步骤. 1.    虚实结合的世界  随着信息化时代的到来,我们的生活不仅局限于可触摸的自然环境,而且拓展到无形的虚拟环境中.继而,真实生活中的行为,如购物.交友.娱乐,也会映射到虚拟环境里.虚拟世界中,鼠标.键

设计经验分享:如何设计文字标志

上文:设计经验分享:怎样才能设计最成功的标志 [译者的话] 虽然在我们网站已经有很多篇谈论标志设计的文章,但对我们有帮助的文章不怕多.在设计一个标志时我们或许会认为"创意"是最重要的,但事实上,有一些基本原则比创意更重要.这些原则对于日后设计一个成功的标志是必不可少的. 如何设计文字标 文字标是指不包含图形的标志,设计这种标志其实可以很简单! 一个标志如果不包含图形或图片即称之为文字标,这类标志设计起来相对比较容易.文字标是使用最广泛的一类标志,事实上,很多国际性大公司都在使用这种标志

远程接口设计经验分享

远程接口设计经验分享 写在前边 分布式架构是互联网应用的基础架构,很多新人入职以来就开始负责编写和调用阿里的各种远程接口.但如同结婚一般,用对一个正确的接口就如同嫁一个正确的人一样,往往难以那么顺利的实现,或多或少大家都会在这个上边吃亏. 每年双十一系统调用复盘的时候,我都会听到以下声音 你们调我的接口报错了竟然不会自己重试? 我的返回值应该从这里取 我返回isSuccess() == true,不代表业务成功,你还需要判断ERROR_CODE 这个ERROR_CODE没说全部都要重试啊! 这个

触屏手机网页产品设计用户体验设计经验分享

文章描述:历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 上篇包括以下一些内容: >>精神与基础 何谓高端--高端设计精神 平台间平衡 不同分辨率及比例间移植 浏览器框架 >>设计"泛"过程 移动场景下的用户需求 少即是多的设计原则 界面气质 -------

研究内容界面的交互心理设计经验分享

文章描述:内容首页设计经验. 前些日子,有位老同事来和我讨论频道首页的设计,这才想起来我原来是做媒体的,以前还画过不少内容页面原型.悲惨的是,我对内容页面的理解在转型产品后才渐渐成熟,以前画的那些都挺平庸.做媒体的又有几个人去研究内容界面的交互心理呢? 过去从实践与反省中得来的经验之谈,不妨讲讲. 1.定位 第一条和界面设计没关系,和定位有关系.做网媒最大的陷阱就是"贪",从平媒转网媒的人尤其贪,觉得内容容量无限大,转载成本无限低,什么东西都想往里边塞.但你的推广位是有限的,最多20条

[精华]web架构设计经验分享!

经验|经验分享|精华|设计|web架构 本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化 一的架构,希望设计出具有无比扩展

网页设计经验分享:网站的设计流程

文章描述:网页设计流程-实例说明. 对于很多刚入行的网页设计来说,总有很多迷惘和不安,特别是在设计过程中,遇到反复修改,更是有想揍人的冲动,有句话怎么说来着,每一次网页设计师背后,都有一群指点江山的大神.这里,就说一下我过往的一些经验,以及一个网站的设计流程,尽量让更多的新人少走弯路,踏入网页设计这一行业. 注明: 本文来自站酷网 - 由半醉人间 原创