一.确定背板设计
1.两位一体【物理圆角映射到设计层变为容器圆角,最大限度地在扁平化的设计理念中保留物理现实的影子】
注意背板设计带来的留白率
削弱页面分割,减少页面留白率,避免卡片套卡片套卡片的复杂层级,在保留圆角特性的基础上最大程度的维系了页面的通透,提供沉浸式的视觉体验。
考虑移动端的适应性
背板卡片可以帮助隐藏后层的辅助信息,背板卡片激活时,后层被遮挡的与背板卡片相关的信息则会以更自然,更符合物理现实的形式展现出来,更易被理解。
2.一体多位【建立通用单元背板容器,结构性地兼容不同的业务状态,以此将差异有效控制于基础背板容器中】
背板容器化
针对不同的业务属性的背板矩阵也将信息层级收口为视觉框架,并根据不同的业务属性灵活组装,进行容器框架内的业务自适应,做到了丰富的产品视觉呈现形式。
基因渗透
通过颜色、Logo等层面延展品牌的表达,为了能更全面地传达,在背板设计中可以提炼圆角作为全局可视化视觉载体进行延续设计,一个圆角的延展,可以演变出不同的形状,当这些延续了视觉DNA的空间沿用到每一个诸如:图标、按钮、图片等功能化控件中时,不但在提升整体印象,当看到这种圆润设计的形状或使用这些功能元素时,就会想到品牌。
二.细节
1.颜色系统
2.图标系统
3.文字系统
4.交互系统
自然的色块引导
添加关键联动元素
场景化的动效
图标的微动效
三.科学管理
1.团队组建
洞见需求——找到设计抓手(内容吸引 / 架构升级)——设计解决方案落地(信息结构优先级 / 背板容器场景化升级 / 动态内容立体呈现 / 个性化算法推荐 / 动态视差BANNER / 增加体验落地可能性 / 效果评估)——增加体验落地可能性
个性化推荐=长浏览+搜索+收藏+加购+下单+支付