UI交付开发效率
2021-03-19 16:58:04 1 举报AI智能生成
UI设计师提供哪些资源和标注来提高开发人员的工作效率
作者其他创作
大纲/内容
标注
距离
绝对距离
（元素相对于画布的绝对位置）
相对距离
图像或者文本到边界的距离
图像到图像的距离
图像到文本块的距离
文本块到文本块的距离
居中的元素
标注左右或者上下是一样的数值
注意事项
优先使用居中类来标注位置信息
可伸缩的容器均需要标注最大与最小尺寸
尺寸
图片、图标 的大小尺寸
字体大小、多行文本的文本行高（1.5倍1.8倍行高等）
样式
字体类型；字体颜色；文字阴影的颜色大小和阴影的偏移方向
边框(border)的大小、颜色、不透明度
内外阴影X轴偏移 Y轴偏移、 距离和阴影大小
渐变色值和渐变角度
圆角大小
特别注意：
1、样式里面的 图层混合只能是正常模式；
2、效果使用图片的 形式的则不需要提供这些样式信息
设计稿的效果图必须符合UI设计标准；
设计稿与UI设计标准冲突的时候前端这里默认以设计稿为准。
设计稿与UI设计标准冲突的时候前端这里默认以设计稿为准。
多状态
涉及到多态的按钮或者图片图标，需要提供各种状态的样式标注或者图片资源（默认态、悬浮态、点击态、禁用态）
图片资源
固定图片
位图的：icon、装饰图、背景图
- 图标在场景中处于同组件的图标（含多态：默认态、悬浮态、点击态、禁用态），提供的图标必须是尺寸大小一致，图标中心内容位置一致（避免同类图标排列时候个别有错位视觉）
可做成矢量图的（iconfont形式的图标）：适用于图标是单一配色的需要切换图标颜色的
宽高可自适应、或者需要拆分重组 的图片
横向扩展的
左中右三部分，中间部分可平铺
纵向扩展的
上中下三部分，中间部分可平铺
水平垂直方向均可扩展的
带修饰元素的聊天窗气泡
带方向元素的提示气泡与面板
以上均需要标注出完整容器的最小宽度、高度
图像、图片的层叠关系
切一张图；还是多张图上下层叠
展示类图形
固定容器类
图像在容器中等比显示
宽度或者高度撑满容器边界之后多余的进行裁切处理
在容器中水平垂直居中，根据比例不同可能出现上下留白或者左右留白
图像在容器中非等比显示
拉伸强制撑满容器
约定尺寸
图像资源强制跟容器尺寸一致（前端会使用拉伸来展示）
非固定容器（大背景图展示方案）
高分屏下背景图的展示方案
4:3、16:10、16:9等比例的屏幕下的背景图展示效果图
建议背景图额外的延伸区域可以使用纯色、渐变色或者重复可平铺图案平滑衔接
国际化
最大支持几个中文字符或者标明父容器可支持的最大宽度
几行之后超出出现省略号
容器宽高是否随着文本拉伸扩展、已经拉伸扩展的规则
以上国际化规则原则上是原型稿中要体现
标准与标注的迭代
UI稿版本意识：修改文件不应覆盖原版本文件，而应新建文件，后缀加修改日期(在文件内备注新版涉及的修改内容)，并及时通知前端更新
0 条评论
下一页
