6. 同色系辅色延展定义
同色系是指在色环上相距不超过45度的两种颜色,在主色的同色系范围内,我们可以选择主色的同色系范围内的颜色来丰富产品配色,可以选出同色系颜色作为延展色使用。
四、设计单元1. 设计语言概述
结合产品风格定位,视觉语言使用柔和圆角为基础。
圆角风格更接近目前主流视觉风格,圆角的包容性更强,复用场景丰富,更容易达成统一性。同时延续外销“地球”的视觉符号,综上,整体搜索、名站、卡片、以及btn、均采用圆角为基础进行统一设计。
2. 信息认知简化
我们希望用户更专注于内容,因此对承载内容的容器、卡片信息的构成及样式进行了简化设计。
采用卡片的形式,卡片可以较好的聚合信息,使信息流内信息展示更清晰。
卡片结构上,本次采用更清晰的大图样式,阅读清晰可见,文字信息部分,允许展示更多文案,以解决用户看不全标题文案的痛点。
3. 整体视觉感知全面优化(卡片信息与背景的关系)
当一部分元素处在明确的边界区域内,则用户感知这些元素是一个整体,聚合在一起。
为使整体视觉风格轻量化,背景底色不宜过重,达到卡片聚合的目的,对卡片进行统一的0.5px的浅描边,达到明确边界的同时,不过度表现,与背景产生过强的分割感,使整个卡片与背景有即清晰又相对统一的视觉效果。
4. 天气模块全新icon
天气模块延续简化处理的方式。
和旧版本中,面性的,多色的icon相比,更清晰,安静。不过度抢掉头部模块视觉吸引,可以满足用户对天气信息使用的功能。