当多个瓷片区同屏出现时,机械的横排布局极易引发视觉疲劳。
我们可以选取 1-2 个高频功能放大尺寸,让模块形成“大-中-小”有节奏感的布局,既能强化信息层级,又能激活页面节奏感:
当基础布局已经优化完成后,如何进一步赋予瓷片区记忆点?
方法 1:倾斜
我们可以把卡片相邻的两条边都做出倾斜效果,打破常规的视线流,吸引用户注意力:
方法 2:异形
让卡片脱颖而出的不止倾斜,我们还可以给卡片做出异形效果,用「不规则」的图形激活用户感官敏锐度:
我们也可以结合行业属性设计特殊的异形效果,例如为快递行业设计出邮票的异形效果:
除以上两种形式外,我们还可以结合品牌图形,在卡片上延续品牌基因,例如马蜂窝的社区卡片,就用蜂窝的六边形作为卡片的形状:
如果想让瓷片区更吸睛,我们可以用破型的方法增强瓷片区的视觉冲击力,其核心逻辑是通过有节制的打破边界,制造“元素呼之欲出”的视觉张力:
除了直接破型以外,我们还可以在卡片内部制造形状,让元素突破形状,这样不会打破整体的布局,也能营造视觉冲击力:
通过有策略的层级叠加,可让瓷片区在有限区域内体现出空间感,增强瓷片区的吸引力,达成既满足功能需求,又能营造视觉冲击力的效果:
接下来从背景层、中间层、内容层三个层次拆解瓷片区的空间感是如何设计出来的,首先是背景层,背景层作为最底层,只需要和页面有区分即可:
第二层要做的就是中间层,中间层要放的是视觉元素,用来制造视觉兴趣点,引导初步注意力:
第三层就是内容层,这一层的核心是确保信息层级清晰明确:
加上之后,我们可以看到内容层的背景有点普通,我们可以结合上面说过的知识点,给卡片加一点倾斜:
这样具备三个层次的瓷片区就做好了,我们还可以按照这个方法延展出其他的瓷片区:
瓷片区优化有 4 个小技巧:
① 我们可以根据瓷片区数量灵活排版,选取 1-2 个核心功能放大展示,让模块形成“大-中-小”有节奏感的布局:
② 用倾斜、异形的效果让卡片更有差异化:
③ 通过让元素打破边界的方式制造视觉冲击力:
④ 通过打造空间感的方式,增强瓷片区的吸引力:
转载自:https://www.uisdc.com/ui-design-hacks
咨询相关问题或预约面谈,可以通过以下方式与我们联系
业务热线:
178 6662 5335
185 6288 7528
至上UI设计,隶属于青岛至上视界互联科技有限公司,成立于2018年7月。专注于建站和UI视觉设计,致力于创造令人难忘的用户体验,用设计来打动每位用户的心,从而为产品赋予更多价值。遵循用户体验至上,品质至上,服务至上的理念,至上UI设计已为上百家企业提供设计服务,有着成熟的服务经验。
扎实的专业素养
资深的项目经验
精准的需求沟通
完善的售后服务
高效的执行力
规范的设计流程
严守进度与质量
对设计执着的追求与热爱
企业品牌网站
响应式网站
网页UI定制设计
移动端UI设计
系统软件界面设计
数据可视化大屏设计
图标定制设计
落地页设计
青岛UI设计界面设计丨山东UI设计界面设计丨青岛网页设计丨烟台UI设计界面设计丨济南网页设计丨济南UI设计界面设计丨泰安UI设计界面设计丨潍坊UI设计界面设计丨青岛网站设计