卡片设计成这样能落地吗?程序员都提离职了!

Recommanded by editor
深圳/学生/211天前/3600浏览
卡片设计成这样能落地吗?程序员都提离职了!Recommanded by editor
每天被产品经理催着改瓷片区?
瓷片区总被说‘不够精致’?​​
用户反馈“页面太乱找不到重点”?
瓷片区是一种在APP设计中常见的运营位,怎么把瓷片区设计的精致呢?今天教大家4个可复用的
「隐形公式」
提高瓷片区精致度,快来看看吧!
卡片设计成这样能落地吗?程序员都提离职了!
Collect
公式一:排版
当多个瓷片区同屏出现时,机械的横排布局极易引发视觉疲劳。
我们可以选取1-2个高频功能放大尺寸,让模块形成
“大-中-小”
有节奏感的布局,既能强化信息层级,又能激活页面节奏感:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
公式二:倾斜与异形
当基础布局已经优化完成后,如何进一步赋予瓷片区记忆点?
方法1:倾斜
我们可以把卡片相邻的两条边都做出倾斜效果,打破常规的视线流,吸引用户注意力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
方法2:异形
让卡片脱颖而出的不止倾斜,我们还可以给卡片做出异形效果,用「不规则」的图形激活用户感官敏锐度:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
我们也可以结合行业属性设计特殊的异形效果,例如为快递行业设计出邮票的异形效果:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
除以上两种形式外,我们还可以结合品牌图形,在卡片上延续品牌基因,例如马蜂窝的社区卡片,就用蜂窝的六边形作为卡片的形状:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
公式三:破界
如果想让瓷片区更吸睛,我们可以用破型的方法增强瓷片区的视觉冲击力,其核心逻辑是通过有节制的打破边界,制造“元素呼之欲出”的视觉张力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
除了直接破型以外,我们还可以在卡片内部制造形状,让元素突破形状,这样不会打破整体的布局,也能营造视觉冲击力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
公式四:打造多层次空间感
通过有策略的层级叠加,可让瓷片区在有限区域内体现出空间感,增强瓷片区的吸引力,达成既满足功能需求,又能营造视觉冲击力的效果:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
接下来从背景层、中间层、内容层三个层次拆解瓷片区的空间感是如何设计出来的,首先是背景层,背景层作为最底层,只需要和页面有区分即可:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
第二层要做的就是中间层,中间层要放的是视觉元素,用来制造视觉兴趣点,引导初步注意力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
第三层就是内容层,这一层的核心是确保信息层级清晰明确:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
加上之后,我们可以看到内容层的背景有点普通,我们可以结合上面说过的知识点,给卡片加一点倾斜:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
这样具备三个层次的瓷片区就做好了,我们还可以按照这个方法延展出其他的瓷片区:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
总结
瓷片区优化有4个小技巧:
1、我们可以根据瓷片区数量灵活排版,选取1-2个核心功能放大展示,让模块形成“大-中-小”有节奏感的布局:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
2、用倾斜、异形的效果让卡片更有差异化:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
3、通过让元素打破边界的方式制造视觉冲击力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
4、通过打造空间感的方式,增强瓷片区的吸引力:
卡片设计成这样能落地吗?程序员都提离职了!
Collect
86
Report
|
164
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一些芯片美术设计
Homepage recommendation
相关收藏夹
文章
文章
文章
文章
作品收藏夹
排版 版式
排版 版式
排版 版式
排版 版式
作品收藏夹
文章
文章
文章
文章
作品收藏夹
ui
ui
ui
ui
作品收藏夹
文章
文章
文章
文章
作品收藏夹
设计思路
设计思路
设计思路
设计思路
作品收藏夹
大家都在看
Log in