绵羊音乐
广州/设计爱好者/1年前/131浏览
版权
绵羊音乐
A.产品目标
B.产品元素
1.logo
2.色彩规范
2.1主色调选取原则
2.2主色、辅助色、点缀色使用原则
3.图标规范
●
标签栏规范
底部栏:设计四个图标
所有底部栏icon由简易线条构成,与产品调性相符,不会使用户眼花缭乱。
将其分为“选中”和“未选中”状态,选中状态和未选中状态会有一个基本的颜色区分。
如图:第一行为选中状态,第二行为未选中状态;
尺寸均为16×16px。
顶部栏:设计三个图标
从左至右分别为:个人中心,心灵诊疗室,搜索icon。
●
功能入口规范
位于 个人中心 板块,同样所有icon由简易线条构成,均与 用户个人 有紧密联系。
尺寸均为22×22px
●总结
根据产品调性,所有icon以最大简洁化为特征,避免用户选择歌曲或者模块时感觉繁杂,在数量上、线条设计上均遵循此原则。
其中,差异化的特色心里诊疗室模块icon为自己设计的小羊标志,绿色清新的设计吸引用户点击进入,舒缓心情。
4. 字体规范+尺寸大小规范及应用场景。
基于iPhone 13mini(375×812pt)型号设计,选用了阿里巴巴普惠体,其有先进的字体渲染技术,可以很好的实现跨平台兼容。
5. 栅格系统+栏高、边距等尺寸规范说明
布局规范
布局采用卡片式设计+圆角设计的方式,视觉上圆润舒适根据格式塔原则,用留白的方式划分。
间距规范
卡片距离两侧页边距为12pt,模块间距均以4pt为倍数,
所用间距有4pt、8pt、12pt、16pt、20pt、24pt。
圆角规范
卡片圆角尺寸为了统一视觉,均为16pt。
图例:
C. 产品高保真原型图
●主核心业务页面&板块文字解释说明
●页面展示
2
举报
声明
收藏
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
登录注册
2登录即可同步推荐记录哦
收藏登录即可加入我的收藏
评论登录即可评论想法
分享分享





































































































