我用Axure画了一个富文本编辑器,还带交互
最近尝试用Axure RP复刻了一个富文本编辑器,不仅完整还原了工具栏的各类功能,还通过交互设计实现了靠近真实编辑器操作体验。整个设计过程聚焦功能还原与交互流畅性,终极成果令人惊喜。https://i-blog.csdnimg.cn/direct/662c081ac8bf48ad9650fb0959a83130.gif
编辑器采取经典的三区布局:顶部工具栏集成了标题、字体、字号、颜色、配景色、排序、对齐、心情、图片、视频等功能;中央编辑区域支持多行文本输入;底部状态栏实时体现字数统计。为高度仿真操作体验,险些所有工具都进行了交互设置。
工具栏设计摒弃了传统按钮的单一形式,采取动态面板与下拉组件联合。好比「标题」按钮点击后展开H1-H5等级及正文选择,每个选项鼠标移入和单击时都添加了交互效果;字体选择下拉列表选择,利用动态面板可滚动选项;颜色选择器集成文本色与配景色双模式。排序和对齐功能利用图标化按钮等效果。
别的还有多媒体插入模块,模拟图片、视频的添加和上传功能。心情面板采取欣赏器兼容的字体心情,这些功能通过交互设计,实现了靠近真实场景的交互反馈。
原型优化方面,将尝试工具栏功能区交互与编辑区交互联动,实现靠近真实的富文本编辑器效果。通过公道组合Axure的动态面板、中继器、变量等功能,设计师完全可以在不编写代码的情况下,创造出媲美真实产物的交互体验。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]