现阶段,主流原型设计工具主要有:Sketch、Adobe XD、Pixso、即时设计等。
其中Sketch的特点及使用方法如下:
1、特点:UI使用体验出色,画布不限大小,每个图层均支持多种填充模式。同时,具有实用的文字渲染与文本样式,以及文件导出工具。
2、使用方法:在Sketch之中,左侧窗口会列出文件中的所有图层,而右侧的检查器可以用以调整被选中图层的内容,中间为画布显示区域。在Sketch里每个对象都有自己的图层,编组和画板能有效管理内容,通过工具栏中的insert按钮,可以添加新的涂层。在Sketch之中,提供了多种不同的基本图形,只需通过工具栏中的添加(lset)>图形(Shape)按钮,便可以开始创作。Sketch同时支持多种文本样式,可以让多个文本图层使用共同的字体,大小,和字间距等。在Sketch之中,可以将任何图层变成一个扁平的位图,通过进入图层>将选区变成位图。同时,Sketch里的画布尺寸是无限的,可以用无限精准的分辨率无关模式来查看画布,或者打开像素模式来查看每一个像素导出后的样子。在Sketch之中,点击工具栏中的导出按钮时,Sketch会为你列出画布、画板、切片中所有可导出的图层,用户可以通过选择,从中导出部分或全部的图层。
Adobe XD的特点及使用方法如下:
1、特点:结合了设计原型与建立原型的功能,提供工业级性能的跨平台设计产品。支持静态编译高效准确的完成,及框架图到交互原型的转变。
2、使用方法:拖拽组件进入画布,创建在整个XD文档内或多个文档之间重复使用的设计元素,将更改从主组件推送到所有实例,并覆盖任何单个实例的属性。通过创建组件的变体形成不同状态,可以映射不同类型的用户交互。通过右键单击图像,可以实现对于图像的直接编辑,然后单击“保存”,可以将更改自动更新。同时,Adobe XD支持内容布局,可识别不同对象之间的关系,并在向组中添加或更换对象时,对组进行自动调整,并且Adobe XD可以根据不同的屏幕大小轻松调整对象组或组件大小,保持对象之间的相对位置和比例不变。Adobe XD具有Adobe Fonts集成功能,能够有效避免缺失字体情况的出现,而且可以利用画板参考线、布局网格、微移和重新调整大小快捷方式,以及相对测量功能,设计体验的布局并进行对齐。同时,Adobe XD支持导入并使用Sketch和常用Adobe设计应用程序中的文件,导入时,文件会自动转换为XD文件,无需从头开始。而且,Adobe XD支持重复网格功能,可以通过选择一个设计元素,根据需要次数快速复制该元素,更新一个元素以修改整个网格,调整元素之间的填充,并且放置一个TXT文件以将数据导入到网格中,通过连接画板交流用户体验的流程和感受,借助一系列的触发器和操作来定义体验。同时,Adobe XD还支持在桌面应用程序上进行更改,然后在设备上测试这些更改,确保保真度和可用性。而且Adobe XD允许快速添加对叠加在内容上的菜单、对话框、虚拟键盘和其他可视元素的支持,可以自动生成动画,创建画板之间的微交互。复制一个元素并更改其属性,还可以可向原型中添加声音效果和其他音频文件打造多感官体验,并且让元素始终处于同一位置,在查看者进行滚动操作时,使其位置保持不变。
Pixso的特点及使用方法如下:
1、特点:Pixso的文件存储在云端,可以随时随地通过浏览器访问; Pixso 内调整画布大小并不会损失图片质量,导出时选取合适的尺寸即可。
2、使用方法:进入 Pixso 工作台,点击【导入文件】,可快速准确地导入Figma、 Axure、 Sketch 文件。在Pixso之中,按A或F在右侧的属性面板中查看所有画板选项,选择适合的尺寸建立画布,并以实际像素大小开始工作。在设计前,需要先建立5栏引导栅格,并且在右侧的栅格属性菜单中调整列与行,以及是否固定等属性,并根据需要设置边距,可以设置多个网格并将其存储为样式,使布局适应各种设备。在Pixso工作台界面的左侧可以找到图层面板,每添加的新元素,就会自动创建一个图层,用户可以通过在左侧栏之中拖放,来重新排列图层或对图层进行分组。Pixso 使用矢量网格方法,用来创建复杂的形状,同时提供组件等辅助原型设计、页面交互等操作。如需绘制更复杂的形状,可点击 P ,或从顶部菜单中选择【钢笔】,在不同方向进行分叉,轻松实现复杂图形的设计,完成后按【Enter】自动闭合路径。
即时设计的特点及使用方法如下:
1、特点:即时设计是一款轻量化,综合型的国产界面设计工具,符合国内设计师的使用习惯,提供了全中文的操作环境。可以实现从界面原型设计到界面开发代码的一站式完成,同时在此之中,提供了上百个可用于软件界面设计的实用插件工具,以及上万条可用于界面设计的设计素材,比如图片素材,插画素材,图标素材等。
2、使用方法:即时设计是一款基于 Web 端运行的轻量化设计工具,因此在浏览器中搜索“即时设计”进入官网并登录账号后即可正常使用。同时,即时设计还是对设计师个人免费开放的设计工具,所以提供的插件工具和设计素材可在站内直接使用,而无需付费下载。