header_v0.7.32

UI设计师懂点前端知识是提高效率的开始(按钮样式篇)

315天前发布

原创文章 / 多领域 / 观点
rikkiyun 原创,如需商业用途或转载请与rikkiyun联系,谢谢配合。

作为一名曾经是做策划和推广后来转行做UI设计在工作中随时切换UI和前端和交互和产品的做过2个大项目及多个小项目的我见过很多新手UI在实战项目中常犯的基础错误想在这里跟大家谈谈一个UI设计懂前端的好处~

这是按钮样式篇~

UI设计师(以下简称UI,毕竟5个字太长了-_-|||)能设计出很多好看的画面布局、按钮样式、背景大图等,前端会根据UI所设计的样式去进行排版布局,看起来是这样美好,但相信很多UI都会遇到过设计的样式跟前端做出来的是两回事,究竟是谁的错?


我们举个栗子


8ab15871cce3a801219c77815a32.jpg


相信很多UI都对弥漫阴影爱不惜手,简直是做界面必备样式,但往往前端接到你的切图后就吵架了,下面有几钟切图方式,看看你中招了没。


bae95871d107a8012060c8df4dc7.jpg


其实还有一种切图1的延伸,就是把按钮的名字如“确定”都写在按钮上,UI看似很完美,字体也能保证不出错,小页面这么做也没太多问题,但如果这个按钮涉及多次使用的话...


你看,那位前端的40米大刀在蠢蠢欲动~


相对正确切图方式


b1cd5871d2eca801219c77c0ae4c.jpg


按钮左边把圆角跟整个投影切出来,右边同样操作,中间只需切宽为1px,高为按钮到投影的距离,三段式切图,最后保存为png(或gif)格式,分别命名为btn_left.png、btn_right.png、btn_center.png,然后前端会将左按钮放左边,右按钮放右边,中间按钮按横向无限扩展,想多长就多长,想多粗就多粗,能伸能缩才是好按钮...


还有一种做法就是...放弃等高线的设置吧...直接标记按钮宽高,把ps里投影设置的角度、大小、距离、扩展、透明度、颜色值也标记上就OK了。


如角度为135(光线从左上角射入),大小为10px,扩展为2px,距离为4px,颜色为255 76 106,透明度为75%,那么前端则相应可设置成:box-shadow: 4px 4px 10px 2px rgba(255,76,106,0.75)


box-shadow: (投影)

4px(X轴,向右移4px) 

4px(Y轴,向下移4px) 

10px(投影模糊大小) 

2px(投影实色扩展) 

rgba(255,76,106,0.75)(最后的0.75是透明度为75%,如果是1就是透明度100%)


在HTML的世界里,样式规范到了CSS3才有圆角啊投影啊这些设置,以前没有CSS3的时候做按钮都是三段式切图...做个按钮多麻烦...但大家不要以为CSS3是万能,请看下图。


ba725871d8a3a801219c775af2f2.jpg


box-shadow是CSS3里的一个属性,圆角border-radius也是,还有很多老式浏览器是不支持的,特别是IE6,简直是前端的噩梦,如果你们公司要求页面要兼容IE6、7、8,恭喜你,你将会跟前端有很多可吵架的地方,最后是UI妥协降低设计要求还是前端妥协加班加点为了你的不规则布局或另类按钮样式的实现,就要看你是不是他的真爱了。


如果是移动端的页面,那前端就倒不必考虑那么多,因为手机浏览器基本都是webkit内核,webkit是谷歌浏览器chrome的内核,iOS和Android的主流浏览器和原生浏览器都是webkit内核,而CSS3是能兼容到webkit内核的。当然,被世人遗忘了的windows phone系统内核是IE10或IE11,也是能兼顾CSS3的。


而PC端的浏览器除了IE6 7 8外,IE9也需要注意一下,其他的主流浏览器都能较好地兼顾CSS3。


说了那么多,你只要记住2点:


1、移动端的扁平化按钮样式只要不搞太特别的处理,一般前端都能通过代码敲出来,你是图都不用切,标记一下就可以;

2、PC端的按钮样式要看项目是否支持IE6 7 8 9,如果需要支持,那还是按三段式切图,或者直接一个长方形扁平按钮,如果不需要支持,请看上一条建议。


至于什么是一般前端都能通过代码敲出来的按钮呢,如下图。


96185871e1fba8012060c8d7d497.jpg


大致上就这么几种吧~总的来说,扁平化的按钮基本都没问题,渐变也没问题,噢,对了,渐变也是CSS3的属性,再提一次:


圆角、投影、渐变,都是CSS3的东西,移动端通用,PC端的IE6 7 8 9不能使用,就算有插件可以支持IE6 7 8 9,但也不能完美兼容,若必须使用,请切图,至于三段式还是整个按钮切,看按钮的使用频率。


好了,大家都知道现在是用户体验至上的大产品时代,用户体验好与坏,良好的交互是必不可少的。


再跟各位UI说说关于按钮的另一件事情,一个按钮在PC端是有5种存在方式:普通(normal)、点击(active)、经过(hover)、失效(disabled)、曾点击过(visited),在移动端因为没有鼠标,所以不存在经过(hover),而曾点击过(visited)也比较少用。


没错,一个按钮至少要设计3种状态!至于你用什么展现形式,各位可自行思考,但我可以给各位没接触过前端又没见过这种神奇的动画按钮的UI们打开新世界的大门:


c0485871e6f5a8012060c8fc7dbe.jpg

预览传送门



8c105871e7bba8012060c870361f.jpg

预览传送门


前端可是有大量的插件可以使用,就算不使用,研究过CSS3动画的前端也可以自己写出来,只是费时间而已。但有个问题,使用插件的按钮固然好看,但有可能需要引用几个文件才能使用动画效果,值不值得使用,看项目需求吧~假如是做平台型的,建议去研究各大电商平台的按钮都是怎么实现的,假如是企业站,尽管用,大量用,甲方会觉得这个设计师真牛逼(前端:%$#&*%#&%)


假如你没看这篇文章前对前端各种实现不了有很多怨言,现在请多多体谅他们吧~





第一次写经验文章

写得不好看不懂觉得啰嗦觉得理论沉闷觉得无聊觉得看不看都无所谓的UI们

你能把我怎样呢

-_-

51
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功