

首页  思维导图  详情



UI交付开发效率

2021-03-19 16:58:04   1  举报





AI智能生成

UI设计师提供哪些资源和标注来提高开发人员的工作效率

前端开发

UI规范

设计规范

开发规范

提高效率

模版推荐

作者其他创作

大纲/内容

标注

距离

绝对距离

（元素相对于画布的绝对位置）

相对距离

图像或者文本到边界的距离

图像到图像的距离

图像到文本块的距离

文本块到文本块的距离

居中的元素

标注左右或者上下是一样的数值

注意事项

优先使用居中类来标注位置信息

可伸缩的容器均需要标注最大与最小尺寸

尺寸

图片、图标的大小尺寸

字体大小、多行文本的文本行高（1.5倍1.8倍行高等）

样式

字体类型；字体颜色；文字阴影的颜色大小和阴影的偏移方向

边框(border)的大小、颜色、不透明度

内外阴影X轴偏移 Y轴偏移、距离和阴影大小

渐变色值和渐变角度

圆角大小

特别注意：

1、样式里面的图层混合只能是正常模式；

2、效果使用图片的形式的则不需要提供这些样式信息

设计稿的效果图必须符合UI设计标准； 设计稿与UI设计标准冲突的时候前端这里默认以设计稿为准。

多状态

涉及到多态的按钮或者图片图标，需要提供各种状态的样式标注或者图片资源（默认态、悬浮态、点击态、禁用态）

图片资源

固定图片

位图的：icon、装饰图、背景图

<ul><li>图标在场景中处于同组件的图标（含多态：默认态、悬浮态、点击态、禁用态），提供的图标必须是尺寸大小一致，图标中心内容位置一致（避免同类图标排列时候个别有错位视觉） </li></ul>

可做成矢量图的（iconfont形式的图标）：适用于图标是单一配色的需要切换图标颜色的

宽高可自适应、或者需要拆分重组的图片

横向扩展的

左中右三部分，中间部分可平铺

纵向扩展的

上中下三部分，中间部分可平铺

水平垂直方向均可扩展的

带修饰元素的聊天窗气泡

带方向元素的提示气泡与面板

以上均需要标注出完整容器的最小宽度、高度

图像、图片的层叠关系

切一张图；还是多张图上下层叠

展示类图形

固定容器类

图像在容器中等比显示

宽度或者高度撑满容器边界之后多余的进行裁切处理

在容器中水平垂直居中，根据比例不同可能出现上下留白或者左右留白

图像在容器中非等比显示

拉伸强制撑满容器

约定尺寸

图像资源强制跟容器尺寸一致（前端会使用拉伸来展示）

非固定容器（大背景图展示方案）

高分屏下背景图的展示方案

4:3、16:10、16:9等比例的屏幕下的背景图展示效果图

建议背景图额外的延伸区域可以使用纯色、渐变色或者重复可平铺图案平滑衔接

国际化

最大支持几个中文字符或者标明父容器可支持的最大宽度

几行之后超出出现省略号

容器宽高是否随着文本拉伸扩展、已经拉伸扩展的规则

以上国际化规则原则上是原型稿中要体现

标准与标注的迭代

UI稿版本意识：修改文件不应覆盖原版本文件，而应新建文件，后缀加修改日期(在文件内备注新版涉及的修改内容)，并及时通知前端更新

 Collect

Get Started

1-1-2 开发人员数据仓库用例图

 Collect

Get Started

开发人员知识地图

 Collect

Get Started

软件开发人员职责

 Collect

Get Started

开发人员工作流程





0 条评论

下一页