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 最终依然选择了这样的方式，可能正是我在开头所说的「特异性」。

字体选择

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