第一次做界面,面试官说我做的太平,没亮点,献丑了!

用户头像
深圳/学生/1年前/7708浏览
第一次做界面,面试官说我做的太平,没亮点,献丑了!
UI 设计界面不像运营视觉的页面,它没有那么多强视觉、花里胡哨的东西,我们大多时候需要在排版上发力,整合组织信息,只为了能更好地的服务用户使用页面中的功能。
在保证做好这几点之后,当然在页面上还可以增加更多的设计细节,那怎么去丰富这些特别的设计细节呢?这里就跟大家分享三个方法,分别是异形、破界、分割。
01 异形
将常见的图形做一些变换,让它的形状不常规,是丰富页面设计细节快速又有效的方式。
这里分享四种异形卡片的做法:
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
1. 图形缺角:
往往在矩形卡片右上角挖掉任意图形,并且在挖掉后,再填充上其他修饰物,来让排版更平衡
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MjA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
上面的两种挖出形状后,填上的都是装饰物,当然我们也可以填主体物,这种方式就经常可见在 会员卡片、弹窗上
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MjQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
2. 缺角不一:
其实就是矩形卡片的四个角圆角大小不一,呈现出来的效果,去丰富设计细节
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5Mjg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MzI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
3. 斜切角:
将矩形卡片斜切,变成平行四边形
可以是整张页面这样被斜切开
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5MzY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
也可以是单个卡片做成斜切的
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NDA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
或者是三张斜切并排的
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NDQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
4. 品牌形状:
将品牌logo或者吉祥物形状融入到卡片的设计中,以此来达到异形、设计感的目的
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NDg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
02 破界
在页面中我们往往会用卡片或者色块将页面划分出不同的界域。
一个界域一块信息,但是会有一些物体突破自己原本所在的界域,到别人的地盘去,这种现象就是破界。
1. 物体破界:
我们先来看一个非常常见的破界方式,物体破界,这种方式会使得破界的物体特别突出、强调
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这种破界方式也经常用在做弹窗的视觉上
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NjA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
当然物体破界,并不只出现在卡片的上半部,大家可以根据自己物体在卡片上的摆放位置,想想看它是否可以破界而出
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NjQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
2. 图形破界:
在卡片的基础上再叠一个图形破出,这个图形能够帮助你承载一些信息内容,丰富设计形式。
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5Njg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NzI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
当然你也可以不止用1次破界,用2次以上的破界去增加更多的设计感。
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5NzY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
相信大家已经了解了两种破界的形式,在之后的设计中更要活用起来,跟死板的设计说拜拜!
03 分割
大家在做标签的时候会怎么做呢?比如下方这个商品,需要将「3折,立省30元」这段文字做成标签
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5ODA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
最直接的就是这种方式,谁都能想到:
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5ODQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
但是仅一层标签,在设计形式上有些单调,所以我们不妨对标签进行分割
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5ODg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
其实到这一步标签基本上就做好了,也没啥大问题,但是如果想要把细节做得更好一些,我们可以把中间的分割做一些差异。
比如说分割线做成闪电的形状:
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5OTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
不只是标签,活学活用,这种分割方式也可以用在按钮处
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODI5OTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
还有一种标签的分割样式也是比较常见的⬇️
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODMwMDA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
大家也可以基于产品风格、调性,自己想一些分割方式,比如之前做的像素风格页面,在分割这块就联想到用像素块进行表达。
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODMwMDQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
总之,分割设计样式是多种多样的,大家可以多多尝试多多联想!
总结
以上总结的这些丰富设计细节的方法——
异形、破界、分割
,既可以单个使用,也可以组合使用
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODMwMDg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第一次做界面,面试官说我做的太平,没亮点,献丑了!(图ZMTQ4ODMwMTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
以上就是本次UI界面的设计小细节分享,我攒了好久的参考图,希望能帮大家解决一些设计不够丰富的问题。
398
举报
|
528
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】相机icon
高级表盘系列UI源文件
【新年UI图标】礼物/活动icon
【新年UI图标】美食icon
【新年UI图标】体育icon
UI 登录界面设计模板包
Security Camera UI kit
智能家居中心 简约 UI设计组件库
【新年UI图标】旅行icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新能源APP应用UIKit
【新年UI图标】积分icon
3D渐变流体抽象矢量UI背景图
钱包ui模板
【新年UI图标】活动icon
UI应用平面图标
【新年UI图标】银行卡icon
我的钱包-UI界面设计-app
森系3D渐变流体抽象矢量UI背景图
盲盒APP UI设计
新拟态风格 UI设计组件库
手表表盘UI系列
高级感金属拟物 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册