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