【UI界面养成记之按钮篇】

测码奔腾永无BUG

因为要考虑到大部分易友没有接触过设计，所以这组件这部分我主要以讲解扁平化为主。


需要准备两个设计软件：photoshop、Illustrator
这两个软件可以在网上找，个人推荐用cc2018或以上版本，如果找不到可以加我的交流群：910387038，到群文件里下载。









因为要弄按钮，按钮一般带图标，找图标在百d找肯定不行，图片质量一般都很差。


所以个人推荐一个比较好的网站：阿里巴巴矢量图标库：www.iconfont.cn
可以直接去搜索相关的图标，而且提供矢量图、PNG、SVG等格式下载，赶紧收藏吧。









在扁平化风格中要避免使用宋体、楷体等偏老式的字体，因为这样会瞬间拉低整个画面的档次，因为扁平化风格是现代的风格，体现出活力、潮流、简洁感。









以下是我总结的几种常用的扁平按钮设计方法，大家可以参考一下，这些基本都是要用photoshop或者Illustrator画的，图标那些可以去阿里巴巴矢量图标库下载。
单单扁平化就有这么多种方法，还怕界面弄得不好看么？









当然，要想界面好看，颜色也非常关键，所以我们需要了解下，虽然我在上一期没有详细说明颜色的运用，但这期要用到了，我们要先了解下颜色的含义，了解含义之后才能更好的进行配色。


红——热情，爱情，活力，积极





橙——爽朗，精神，无忧，活力，高兴





黄——快乐，开阔，光明，智慧





绿——冷静，诚实，广泛，和谐





蓝——深远，忠实，理想，沉着





紫——神秘，高尚，优雅，浪漫



白——清洁，纯洁，公正，正派



灰——沉着，悲哀，不安，忧愁





黑——严肃，不安，阴沉，死亡





了解颜色的含义之后我们就可以对其进行配色和选色了，这时候又有一个好用的网站来了——优设网配色导航：https://color.uisdc.com/pick.html
它里面有很多主流配色、传统色以及渐变配色，点击后即可复制色值，赶快收藏吧



看完之后如果有说明不懂的，或是有什么疑问可以加群：910387038来提问

渡不得……

闭群了吗 进不了

魑魅帅比

新技能已get√

superlu

新技能已get√

266558

学习中，感谢分享。

勾栏听曲

你这太专业了，面向想学设计的人还可以，论坛里绝大多数人都不会有兴趣学习配色这些，不如直接教ps画软件背景，按钮这些，对多数人会有用，关注的人会更多。比如你之前的窗口，这次的按钮，点进来的人都只是想知道怎么做出来的

测码奔腾永无BUG

雨天真美 发表于 2020-11-5 17:43
最后一排图标的阴影效果是PS里的投影吗

ps和ai都可以弄啊，我这个是用ai弄的

雨天真美

最后一排图标的阴影效果是PS里的投影吗