界面导航
不管是在原型模式还是UI模式中,界面整体布局都大致相同,包括顶部工具工具条、左侧的设计内容管理面板和右侧属性面板及交互面板。原型模式和UI模式的界面有一些区别,本文我们主要认识下摹客UI模式的界面。
顶部工具条
快速添加
可以快速添加内容。
容器
用于创建画板容器、列表容器和分区,可以快速搭建页面的结 构。
形状
包括矩形、圆形、多边形等基本形状工具。可以快速创建常见的几何形状。
钢笔和铅笔
用于绘制自定义形状。可以创建直线、曲线和复杂的路径。
文本
用于添加和编辑文本内容。
组件
用于添加单个和多个组件,以及状态。
布尔运算
通过对形状进行组合、相交、相减等操作,创造出复杂的图形。
编辑图层
用于对形状图层进行矢量编辑。
蒙版
用于创建蒙版,可以显示图层的特定部分,通过使用填充的alpha通道或形状来遮盖上面的层。
小摹AI
摹客特色的AI功能,包括AI妙想、AI妙设和AI小查,可以生成PRD文档、高保真设计、检查界面的规范。
左侧面板
页面
页面可以理解为一个包含多个设计元素的容器,它为设计提供了一个特定的空间范围,类似于传统文档中的一页或者一个独立的设计场景。
图层
图层以面板的形式展示,用户可以在图层面板中查看、选择、创建、删除和管理图层。每个图层都有自己的名称、可见性图标、锁定图标等属性,方便用户识别和操作。
资源
资源是指在设计过程中的组件、样式、图标等可以重复利用和管理的各种元素,包括本地资源和其他项目中的已发布资源,可以大大提高团队的工作效率。
图标
内置了上万个图标,支持搜索和一键替换。
右侧属性面板
布局设置区
对齐方式
可以选择容器内各元素的对齐方式,包括左对齐、居中对齐、右对齐等。如果选择多个容器,则对它们自身之间参照于上级容器进行调整。
位置和大小
精确显示元素的X和Y坐标值,方便进行精准定位。同时可以调整元素的宽度、高度、旋转角度和倒角值。
自动布局
能够根据内容自动调整容器大小和元素排列。可以设置自动布局的布局方向、对齐方式,以及元素的间距和边距等数值。便于适应不同屏幕尺寸,保持设计的一致性。
布局网格
是一组水 平和垂直的线条,有三种模式(网格、行、列)可以选择,用于在设计界面中划分空间,为元素的放置提供参考,帮助实现更精确、更一致的布局。
约束
用于控制元素在调整大小时的行为,例如固定宽高比、水平或垂直方向的拉伸限制等。
外观设置区
不透明度
调整元素的可见性和不透明度,从完全透明到完全不透明之间进行设置,以实现不同的视觉层次。
填充
可以为形状、文本等元素设置填充颜色。支持纯色填充、渐变填充等多种方式,并且可以通过颜色选择器选取或输入具体的颜色值。
描边
设置元素的边框属性,包括边框颜色、粗细、样式(如实线、虚线等)。
已选颜色
展示当前选中页面的所有颜色,便于快速编辑界面中的颜色,也可以快速应用颜色资源。
效果
添加各种视觉效果,如外阴影、内阴影、模糊等。可以调整效果的强度、颜色、偏移量等参数,以实现丰富的视觉效果。
文本设置区
字体
选择不同的字体类型,摹客3支持多种系统字体和自定义上传的字体。
字号、字重
设置文字的大小、粗细程度。
行高、字间距、段落间距
调整文本行与行之间的距离、字与字之间的距离以及段落之间的距离。