- 设计准则
- 设计风格
- 控件
- pile of React
- 组件规范
- 定制主题
- 多语言
- components 组件
- score
- Anime
- picker
- dialog
- slider
- Form 表单
- fragment
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Figure 商业插图
图标定义
- “现代商业插图”是为企业或产品传递商品信息,集艺术与商业的一种图像表现形式。
- 商业活动要求把所承载的信息准确、明晰地传达给观众,希求人们对这些信息正确接收、把握,并在让观众采取行动的同时使他们得到美的感受,因此说它是为商业活动服务的。
- 命名
- 商业插图遵循统一命名规则,即 类型_位置_名称
- 例:pic_page01_rocket
- 适用范围
- 内容表意复杂,且需要被进一步解释/营造气氛
- 多用于页面
- 绘制限制
- 保持简洁:设计应遵循“扁平”、“轻质感”的设计理念
- 科技画风:配图美术风格尽量偏向科技风格的场景化叙述
- 表意精准:页面设计基于自身场景表达情况下,优先解决功能需求
- 情感融合:在满足功能引导的基础上考虑更多情感化设计的引入
- 主图
- 用色:品牌色面积占比不超过10%,且在元素关键位置上(只有一处展现)
- 图形设计以#D1D8DF为基础色,面积占比40%-80%
- 透视:前景图形只限于使用10、20、30、45度的旋转角度
- 质感:不能出现明显的立体结构与光影关系的表达手法
- 认知:图形以表达功能性的日常物体为主
- 背景
- 用色:背景图元素颜色偏中灰调,淡色为主
- 透视:背景的图形组合需要前后交错叠加,有一定景深关系
- 质感:新增背景的图形美术手法需要参照示意:渐变虚化处理
- 认知:背景配合主图,增强画面氛围,且两者表意需要有一定关联性
- 尺寸
- 图形设计整体尺寸140px*140px,背景尺寸100px*140px
- 图形设计不能超过最大外边界,建议四周留10px
- 文本
- 一级: 字号:16px,色值:#333333,字数:建议不折行,小于12字
- 二级: 字号:14px,色值:#999999,字数:建议每行小于14字
- 布局
- A=(C-B)/3,图形永远满足此公式
- 表格内容区最大高度750px,即A=(750-B)/3
- 普通场景配图:
- 特殊场景-404配图:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论