Showing – Readymag

Readymag 是一个网站构建工具。对比 Wix 和 Squarespace,它更贴近 Cargo 的特异气质,但又没有「剑走偏锋」。

下面是用户使用的网站和官方提供的模板对比图。

我是 Cargo Collective 时代的用户,那时的 Cargo 免费版即可使用 css 自定义功能,给我留下了很深的印象。时过境迁,今天的主角 Readymag 在组件定制交互上同样让我觉得值得为之一写。所以这次不会过多谈及 Readymag 的其他体验,只提组件方面。而「为之一写」也并非都是取长,它也有缺陷,更多的是独特和巧妙。

栅格

网页设计的第一步,设置栅格。点击右二图层图标,就能看到 Grids & Guides 设置项。如下图。

一个缺点是,「图层」图标并没有状态变化,左一的图标也并非出于激活状态的意思,这样混乱的显示常常误导我这样的新用户。上方蓝色部分整合了大量信息,分别为栅格预设切换、主体宽度、栅格数量、栅格间距、纵向网格设置、间距设置,下面的 H G S X B 代表是否显示相应元素。其中 Guides (H) 和 Grid (G) 是互斥的,这里也没有体现。

通过上图各交互区域的面积大小,可以清除地区分开主要和次要信息。设计人员深谙格式塔法则,但并没有做好一致性原则。如上图中&右所示,鼠标拖动增加减少数值的滑动反向不尽相同,按照一致性,8 和 64 字样也应该是横向滑动。整体看起来也并非最优解,比如纵向网格设置和间距设置可以再拓展一下,H G S X B 也没有必要做成键盘按键的样式,众多设计工具的属性选择器都可以满足这些信息的交互,但 Readymag 最终依然选择了这样的方式,可能正是我在开头所说的「特异性」。

字体选择

字体设置部分是此文的成因,里面藏有丰富的设置:

左上角浮窗里,除了预设样式(H1)外,最明显的就是选择字号(左侧)和行距(右侧)的表现。与以往看到的输入字号再输入行距不同,两者在一条滑轨上。被设置了上下限,当变为蓝色时,两者绑定,相当于行距被设置了固定的倍数;当两者断开变为黑色时(如图左下),便不相互影响。

这种交互直观吗?比起都是数值的世界当然更直观一些。但是好用吗?未必。因为两者数值都是取整,所以绑定后的行距倍数肯定会因为调整不同字号后而被破坏。此刻就需要解绑,重新微调行距或字号。另外底部横向滑动还可以设置字距。这一切都给我留下了深刻的印象。

此外还有一些 opentype 特性选项、对齐方式、(按词?)分栏、字形列表等功能。如上图其他部分所示。

意外的是 Readymag 的字体也相当丰富,包含了 Google Font、TYPE.TODAY、Adobe Typekit、webtype 四个字库。筛选方式也和 I love typography 的 CEDARS+ 有异曲同工之处。

媒体与图形

刚刚我们还在管中窥豹,现在是时候放眼望去 Readymag 了。

这是 Readymag 所能添加的组件菜单——去他的易读性,符号即是一切。你还能从 Readymag 的 /learn 界面看到它们的调性 ↓

好在他们都配有 label 文字,不至于在一开始就措手不及。

下图为插入图片(picture)、图形(shape)、视频(video)和音乐(music)时的工具栏。

你可以看到 Readymag 对每一项嵌入内容都做了定制,但图片所拥有的边框、圆角和透明度却没有在视频和音乐中体现(图形可以通过设置颜色),定制也是有限度的。

再有一些通用的功能,比如图层叠加顺序、锁定以及下图中的一些:

动画、旋转、常驻位置(与响应式有关)和链接、锚点、跳转种种功能,五脏俱全。但在后续的动画(Animate)制作上,Readymag 有点「乱了手脚」。

如上图制作 Hover 动效,从上到下依次是:

  • 交互触发动作
  • 触发对象(Self 指自己)
  • 当前步骤(可添加多个)
  • 延迟和持续时间
  • 一块展示动效方式(Effect)和加速曲线的区域
  • 设置单次或无限循环
  • 预览
  • 添加下一个交互触发动作

你可能会奇怪为什么中间会多出一块深色区域……我也没搞清楚。总之一到这边就失去了 Readymag 的风格,变得割裂。实际上可能是这样的:

  • 交互触发动作 | 当前步骤
  • 触发对象
  • 动效方式
  • 加速曲线
  • 持续和延迟时间
  • 循环设置
  • 预览
  • 添加下一个交互触发动

此结构依从使用 Figma Prototype 时的习惯编制。

轮播图

Slideshow 已经是如今网页里的常用元素。

Readymag 为轮播模块提供了丰富的定制,从计数到箭头样式,从缩略图到播放方式。从箭头的备选样式可以看出,Readymag 对图形符号有着相当的追求。

按钮

按钮同时配有默认和鼠标经过样式,图标是固定选择的,无法自己上传。

按钮同时也有上面说的动画(Animate)属性,但不用担心里面的 hover 选择器和这里的冲突。如上图所示的 hover 主要是颜色方面的定制,并未涉及坐标、缩放或旋转等属性。但如此一来依然让我「不太放心」——这样分散功能是不适合的。

说起按钮的设置方式,另一个更好的案例是 Whimsical。Readymag 这里提供了基线偏移固然不错,但是却把字体等文字设置和按钮外形混在一起,导致信息过多不易使用。

代码与热区

Readymag 支持代码——并不是语法格式化后的,而是实际可运行的代码。

Widget Code 负责插入一些 </iframe> 组件,比如 Figma 文件。Project Code 则会影响网站全局的样式,比如在头部加入 Google Analytics 验证,或者是在 CSS 里设置新的组件样式。当然这么好用还带有一定风险的功能,不是免费的。

Hotspot 翻译成热区有点不太准确,这里更多的是充当一个小 Tips 弹窗。

弹窗里可以选择插入图片和文字,可以选择弹出位置以及本身的符号。个人认为比较遗憾的是浮窗只能依靠符号主体触发,而无法在其他元素中实现相关样式。

表单

作为一款 low-code 工具,Readymag 能加入数据表单是件不太容易的事。

表单字段包括文本、数字、姓名、邮件、电话号码、下拉菜单(单选)、复选框(多选)、文件(额外付费)。但这里有一个致命的缺点是,placeholder 和表单的 label 是一体的,在填入文字后,两者都变得不可见,这是相当常见的 UX 错误。

除了和按钮菜单一样,全都叠在一起之外,一些图示也不是那么清晰,比如第一行我做了一些修改:

虽然原本的(before)图示更接近真实的排版,但我认为它很难让人感知到,这是把竖排表单改为横排表单的选项。我的修改一种是调转横线方向,虽然实际不会变成这样,但是指明了方向性;另一种是让图示变得统一,用长宽相似的图形使用户认知到这一变化历程。

Twitter 和 Facebook

社会化评论同样不可少,不过我并没有试过直接使用这两者的 widget。

Readymag 已经集成了大部分代码内容,只需要最基本的账号信息就可以使用,降低了很多门槛。如果哪个建站工具比这个还要复杂,那就是不及格(不友好)了。

总结

Readymag 还拥有一些更高级的功能,例如 shot(可手势控制的序列帧)、移动端布局(自适应)等,以及几乎完全可视化的间距(margin、padding)调整。

这里是模板:https://readymag.com/templates

这里是案例:https://readymag.com/examples

自然,我们以取其精华的心态看待这类产品时,确实可以学到很多。不仅仅是落地到 UI 上,还有其设计思维的独特性,足够带来很多启发。正如字号与行距的设置一样,抽象出了两者数值间的「绑定」关系,再依据「绑定」这个概念去创造出新的交互。Readymag 并不完美,但却令人印象深刻;在大家都不完美的时候,它站了出来。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 注销 /  更改 )

Google photo

您正在使用您的 Google 账号评论。 注销 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close