初识XD
Adobe XD 是一款专为UI界面设计和网页设计打造的矢量设计软件,同时支持Windows和Mac OS 操作系统,能够在同一个软件里完成设计和交互,支持打开与编辑PSD,SKETCH及AI等格式的文件,能够一键切图和导出标注。其拥有简洁,高效,快速,学习成本低的特点,已成为众多UI设计师青睐的工具之一。
XD的部分功能
XD支持一键切换“设计模式”和“原型模式”。
XD中的“重复网格”功能能大大减少设计人员的工作量。
XD支持使用插件。
位图与矢量图的区别
位图图像也被称为点阵图像或绘制图像,用线段和曲线描述图像,矢量可以是一个点或一条线。位图图像表现出来的色彩比较丰富,颜色信息较多,所占空间也较大。
矢量图像根据几何特性来绘制图形,用线段和曲线描述图像,矢量可以是一个点或一条线。矢量图像只能靠软件生成,矢量图像文件占用内存空间较小。矢量图形表现出来的色彩较单一,所占空间也较小。
XD的操作界面和功能展示
在设计模式下,主界面的内容包含有1.工具栏,2.资源/图层面板,3.画布,4.画板,5.属性检查器。
在原型模式下,主界面右侧为交互的功能,选中一个画板,当其出现蓝色带箭头线条时拖至另一个画板,可以通过界面右侧的交互功能实现两个画板之间的有关联系。
XD部分功能操作展示
在设计模式下,使用椭圆工具于画板上添加一个圆形(按住shift键拖动工具可画出正圆),选中图形,即可使用界面右侧工具,点击重复网格,可看到此时图形被绿色的框架选中,点击右方或下方的按钮拖动即可实现图形的重复。于两个图形之间加以点击,可看到蓝色的距离线,拖动即可实现两个图形间的间距调整。
在设计模式下,选中所需要操作的图形,使用界面右侧的色彩工具进行填充。
阅读XD相关书籍后的调整
通过阅读相关书籍以及查阅相关视频,对初始的作品进行了修改,细化了部分页面。对原型模式下的操作有了更多了解后,也使得修改后的作品 页面间的交互丰富起来。
阅读后的感受
《界面设计与原型制作教程》这本书内容丰富,讲解细致,配图贴切,非常适合初学者入门。部分事例的引用能够很好的激发读者学习xd的兴致,于我而言,这本书教给了我很多xd相关知识,也令我体会到设计的快乐和成就感。