第一次想创意,双手冒汗,献丑了!

用户头像
深圳/学生/2年前/4817浏览
第一次想创意,双手冒汗,献丑了!
今天给大家分享一些设计技巧, 都是我们在实际项目中总结出来的,希望对大家有所帮助!
主要分为以下三点:
1.图标疏密性
2.卡片设计灵感转化
3.如何给设计加创意
接下来我们直接进入正题!
01 图标疏密性
大家在做图标的时候,一定要注意图标的疏密统一性。
我们来看这样一组图标,整体看上去这小质感还不错,但是你会发现有两个图标看着很别扭。比如说第一排的「楼房」图标,第二排的「垃圾桶」图标,很明显看出比其余的图标要密集一些。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg2OTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
尤其是「楼房」图标加了四道杠,显得更密集。
那如果我们把这四道杠变成了两道,你看这疏密是不是一下就感觉和其余图标更统一了呢?
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg2OTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再比如这个「垃圾桶」图标,相比于同一排的其它图标,它的中间明显有点空,那我们是不是可以在这个里边给它加上一笔?
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这样调整完,你再把所有图标排列一起,整个就感觉非常统一了,所以大家在做图标的时候一定得注意疏密统一性。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
02 卡片设计灵感转化
再来看个案例,这是我们前段时间的项目,一个钱包页面,先上优化前后的对比图给大家看看。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
发给客户后,对设计的卡片提出了一些意见,对方希望突出卡片中的「钻石」和「金币」这两个元素,不想要「余额」。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
于是,就去寻找了一些概念稿作为参考。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
有很多同学老说概念稿没有用,今天告诉大家这概念稿怎么去用。
直接看下面这张图。上部分是参考,下面是根据参考做出来的改版。
卡片这部分我们主要就是挖掘它两个参考点:一个是上边是有颜色卡片,下边是白色卡片,这一点我们借鉴过来;第二个点是它有大数字,那我们也把大数字做出来。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
其次,我们可以根据自己的理念给它加一些小异形,它上面没有,我们有一些小异形。而且,我们左上角加入了一个图标,也可以跟它拉开一个差异化。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
整个设计的灵感就是从这些参考中得来的,所以大家以后不要再说什么概念考没有价值了,我们是可以借鉴里边的某一些点的。
03 如何给设计加创意
很多同学做图形的时候一点细节都没有,其实我告诉大家一个招,你就把图形给做成异形就完事了。
1.变换圆角大小
但是异形有很多种方式,比如说下面这个卡片,做的时候把左上和右下的圆角变得很大, 其余两个圆角很小,它就产生了一种差异的感觉,对不对?就不是四个角都是一样的。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3Mjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
2.做挖空处理

你可以直接把某一个角落给它挖掉一块,让它形成一个异形,比如下面这两张图。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
3.做倾斜效果
你可以给卡片直接整一个小斜度,让卡片的一条边倾斜起来,你看下面这张图,是不是感觉也有点差异化?
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3MzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
4.做内部异形

比如下面这张图,你可以在内部做一些小差异,在打折按钮中间做一个闪电的符号。这种异形就属于内部异形,直接将信息分成了两个小块,以后遇到此类需求,大家都可以尝试用一下这种方法。
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3NDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
5.跟IP结合
你可以用基础图形跟你的吉祥物相互结合,你看下面这张页面,直接把吉祥物跟这个图形相结合,是不是瞬间很有亮点,这效果不就出来了?
第一次想创意,双手冒汗,献丑了!(图ZMTQ4MTg3NDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
当你还在为做图形没有创意和设计感的时候,以上这几种方式大家都可以用一下。
100
举报
|
84
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D渐变流体抽象矢量UI背景图
Security Camera UI kit
我的钱包-UI界面设计-app
钱包ui模板
【新年UI图标】银行卡icon
【新年UI图标】积分icon
【新年UI图标】礼物/活动icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
高级表盘系列UI源文件
【新年UI图标】体育icon
高级感金属拟物 UI设计组件库
UI 登录界面设计模板包
UI界面 组件
新能源APP应用UIKit
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
智能家居中心 简约 UI设计组件库
UI应用平面图标
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】相机icon
【新年UI图标】活动icon
手表表盘UI系列
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册