优漫动游:从Figma中学习如何做交互设计?

  近一年来,Figma可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在Axure 9.0和Figma中切换使用,深刻的感受到了设计细节带来的体验差异化。今天小编就通过一些细节亮点,总结下工具软件的体验设计的几个原则。

优漫动游:从Figma中学习如何做交互设计?_第1张图片

  事先声明,本文不是对比软件工具孰优孰劣,仅仅是为了探讨设计技巧,简洁化设计——降低信息噪点,效率设计——提高用户行为效率、可视化设计——减少用户思考成本。希望对你有所帮助。


  一:简洁化设计

  在工具软件中,对象的属性栏应该是用户的高频操作区域。

  整体布局上,Figma和Axure基本一致,都是包含了3个模块。可以设置对象的各种属性、交互效果设计等。而基础属性模块更是用户操作的重中之重。

  不过Figma属性栏通过信息分级展示、内容精简、有序布局等设计方法,带给用户更好的体验。

  1、分级展示,隐藏不必要的内容

  创建元素时,Figma属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息,描边、投影、导出等设置项只显示标题,内容全部隐藏不展示,保证了操作信息的所见即所得。当用户增加设置项时,系统都会给出默认设置,用户根据需要只要修改内容即可。

  另外Figma还采用了交互操作,减少页面的信息量。例如可下拉的选项默认不展示下拉按钮,而是在鼠标悬停时展示,从而让原本信息繁杂的页面变得更加清爽。

你可能感兴趣的:(前端,ui,html)