• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[心得技巧] 详细解析UI设计中按钮的高级设计技巧

详细解析UI设计中按钮的高级设计技巧

千库网
虽说这篇与上一篇标题相同,但内容完全不同。这篇讲的更细化,实操性更强。
来源:站酷    作者:Lawrence_V

虽然说这篇与上篇的标题相同,但内容却是完全不同的。这篇讲的更细化,实操性更强。另外呢,设计语言这个系列我写的较为随意,不像写平面设计知识那样更严谨,如果哪里有讲的不对的地方,也希望大家多多批评,多多指点。当然也要感谢大家的支持,感谢你们。

目录

1.解构按钮
2.网格基数
3.按钮的宽高
4.按钮的曲率
5.按钮中添加字符
6.按钮中添加功能

1.解构按钮

首先得先解构一个按钮,把按钮中各个元素都提取出来。按钮的绘制过程:先设一个网格基数(一般为4px) - 绘制一个宽与高存在比例关系的矩形(固定宽度的情况下) - 添加字符(中英文) - 添加按钮(功能) - 调整距离(字符/按钮与矩形之间的距离) -完成。下图就是一个按钮的线稿与正常按钮的对比图。



2.网格基数

绘制一个按钮的第一步,就是设置网格基数。如果网格基数不设置4px而设置3px,那当我们画一个高度为45px的时间选择器时,得知右面“上”的图标高度就是45/2=22.5px,这里出了小数点,22.5px中包含7个网格位,并多出了1.5个px,即22.5-21(3x7网格位)=1.5px的空位,1.5px



我把图上按钮中为“上”的这个图标拆解出来,再来分析它。图标宽高为22.5px,多出了1.5px的。如果宽高为21px,就刚好是7个网格位。所以说把网格的基数设为3px,在绘制模块时会出现小数位,小数位不满一个网格位,则网格基数设为3px就是不规范的。



规范的尺寸有16px、24px、32px、48px等,都是4的倍数。不管是前端制作,切图还是设计都比较精确的。

3.按钮的宽高

当我们绘制按钮并选择宽高时,要看它的字数是“固定的”还是“随之变化的”。字数固定指的是像“确认按钮”这样永远都只有两个字的情况。而随之变化指的是,按钮的宽度要随着字数的变化而变化。在字数固定的情况下,按钮的宽高可以采用倍数关系,即按钮“宽80px/高40px“的两倍。



但要注意的是,在按钮宽度随着字符数的变化而变化时,按照比例来绘制按钮的宽高,造成的视觉效果不理想,就可以不采用倍数关系,直接用网格基数来绘制按钮。例如:按钮“宽88px/高32px”。



绘制矩形要像人体比例那样,具有隐性的比例关系。这种比例关系直观上是看不出来的,但身体比例和谐的人,看上去就是有一定的美感的。我们做设计语言也一样,看上去这个按钮很普通,但实际是很多规则约束出来的。

4.按钮的曲率

按钮的曲率要针对不同的业务需求选用不同的数值。如果统一了按钮曲率,当对应很多高度与间距不同的产品时,会造成几个产品中按钮曲率不和谐的问题。间距和高度越大的产品,按钮的曲率就越接近直角矩形,差异性也越来越小。但在同一个产品时,曲率的变化幅度也不要太大,这样就会失去一致性。



这里拿上一章提到的4/6/8来举例吧(4/6/8数值递增为2像素),当按钮高度为32px时,可以采用4px的曲率,当按钮高度为40px时,采用6px的曲率,当按钮高度为48时,采用8px的曲率,以此类推。



那如果随着按钮的高度的增加,不做曲率的变化,按钮就会越来越接近直角矩形。按钮高度越高,这种感觉就越强烈。所以我个人建议,在不同的业务需求中,运用不同的曲率更合适一些。



在相同产品中采用不同的曲率,这时按钮做小规律的变化是没有问题的。如果按钮曲率递增过大,那就会造成所有按钮缺失统一性,曲率变化太大每个按钮的独立性就会变强,他们之间的差异化就会更明显,所以从视觉上看上去就不像是一个组件中规范出来的。

5.按钮中添加字符

在按钮中添加字符,要注意的是字符与按钮边框之间要留多少距离就可以了,问题不大。但它们之间的距离不能过少,太少就会显得很挤,给人感觉很小气。也不能太大,太大给人感觉字符上下有种压迫感。距离还需要设计师自己根据自身审美去控制。



6.按钮中添加功能

在按钮中添加功能,这里的“功能”指的就是“图标”,加了图标的按钮就变成了“功能按钮”。绘制功能按钮跟添加字符类似,但绘制功能按钮会考虑视觉差与平衡性的问题,就稍微麻烦一些。



以上这种方法是错误的,如果按水平垂直方向进行对齐,会产生视觉差,就是失去了视觉平衡性。字符和图标需要转化为颜色的灰阶度,才能测出它们的重量,才能知道它们从视觉上看谁轻谁中。测试得知,字符的颜色灰阶度,要大于图标的颜色灰阶度,造成视觉不平衡。



解决这个问题的方式,是看哪边的视觉不平衡,就手动调整使他保持平衡。如果字符这边重了,就在字符与按钮之间加一些留白,如果图标这边看上去重了,就在图标这边加一些留白。



当我们学会了如何保持按钮的视觉平衡,就要再严谨一些。因为方便大家的理解,上图中按钮是去了外边框直接放上去的,那真正在做组件时,下图这种方法才是规范的。如图所示:



最后让我们上一张对比图,对比一下规范的按钮与不规范的按钮。



大家看到这里,就说明本章的内容讲完了。大家有什么疑问或不解留言给我,比较难理解的知识部分,我会在下章节做补充,另外也会为大家解答。

谢谢阅读

感谢支持

好的作品(有规则有逻辑)与不好的作品(无规则无逻辑),他们从视觉的差异并不是很大。大家看问题不要看表象,形式主义缺乏内涵。当然从心理学角度讲人们很确实容易受“美好事物”的影响,但大家要理性看待问题,不能过于感性,寻找作品中的主观唯心主义,学习作品中好的一面,并运用到自己的设计思维当中。

好的作品经得住时间的考验,而那些形式主义只存于某时某刻,止步不前并永不前进。

图怪兽

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.