灵感相关网站
底部
通常高度为50px
文字
字体
阿里巴巴普惠体
大小
- 大标题：34
- 标题1：28
- 标题2：22
- 标题3：20
- 标题：18
- 正文：16
- 小标题：15
- 标注1：13
- 标注2：12
行高
通常为1-1.6，字号越小，行高越大，字号越大，行高越小
以12号字体，行高1.6（20pt）为基准
图标
系统图标为24x24，内边距为2，安全区域为20
实践规范
- tabBar图标：总大小24px*24px，内图标20px*20px，未选择颜色#ddd，或者填充方案
- tabBar字体：10px，选中颜色#333，未选中颜色#999
- tabBar高度：50px
- 页面距离手机左右两侧边距：14px
- 页面距离顶部边距：44px
- 如果使用卡片式，背景建议颜色：#F6F7FB
- 间距通常采用8px、16px、24px，统一，一致性原则
- 重要文字颜色：#333
- 普通文字颜色：#777
阴影
#8a9bc5
透明度30%
投影距离不要太小、可以吸取背景色加深界面设计和优化技巧
- 配色黄金比例：6:3:1，主色调60%，辅助色30%，点缀色10%
- 阴影根据产品色和背景色来调整
- 突出重要信息，是界面看起来干净，同时节约用户视觉时间，改善用户体验
- 在需要选择的地方，例如会员等使用卡片来帮助用户做出明智的选择
- 考虑层级关系，按项目的重要性和权重关系排序，建立视觉关系
- 在设计个人资料等卡片时，可以采用元素重叠方式，如把头像和背景重叠，并加上白边
- 对于文案较少的设计，如果单纯文字表达比较苍白，考虑加入图案或插件加强表达
- 图标大小一致性，包含类型、粗细等都需要一致，不成比例的图标，可以使用底部圆解决
- 单选个数小于5时采用按钮选择，大于7时使用下来菜单
- 善用图表，产品信息为数字或比分比时，多尝试使用图表展示，能给用户带来直观的视觉体验
- 背景为纯色较为单调时可加入渐变色或几何图形来增加高级感，使背景更饱和
- 产品出现多个按钮时，使用不同的颜色或样式，以强调按钮的优先级，创建层次结构
- 后台系统图标类颜色选择明快轻盈的，避免低饱和度，看起来暗淡无光
- 善用留白，保留文字之间的呼吸感，主次分明，更具有易读性和辨识度
- 视觉对其，有些字母或图标存在视觉偏向，更应注重视觉上的对其
- 对于可点击的卡片，优先使用按钮来提示用户可以点击
- 选择合适的字体，能影响文本的调性
- 金刚区图标采用超椭圆效果更好
- 瀑布流的信息，尽可能较少线的使用，增大间距保持留白
- 中英文字体不要混用，中文可采用思源黑体、苹方，英文可采用Roboto、Arial
- 多余表单数据使用面性展示不使用线分隔更舒适、更干净
- 层级要清晰，文案信息较多时，通过字号、粗细、颜色来优化页面，使其版面更加分明
- 背景信息与文案相融时，使用渐变蒙版解决，增加文字的可读性