排版|粘性标题？界面设计？诀窍都在这里了( 三 ) kube|业务|华为云|原生|数字化

文章插图
Ritual 的设计利用比例和颜色来创建页面层次结构

文章插图
此设计以 3 条锚线为中心内容。每个产品的标题、图像、描述和按钮都以其中一行为中心。调色板是有限的——由原蓝色和黄色制成。这种类型的调色板允许内容（蓝色）和号召性用语（黄色）之间形成鲜明对比。
1）精致调色板
仅限于两种基本颜色：蓝色和黄色，经典互补色。
所选择的特定蓝色和黄色有助于提高设计的吸引力——黄色不太亮，蓝色足够暗，可以在白色背景上阅读。
如果黄色和蓝色是主要颜色（青色和荧光笔黄色），那么设计看起来更像是 90年代初期的网站设计。
在为你的设计选择色调时，请切换不同的颜色，看看哪些颜色搭配起来看起来不错。远离荧光色，从原色稍微调整颜色将会优化你的颜色选择。例如，上面的屏幕截图已被更改（如下）以展示。

文章插图
这张经过修改的图像不仅让设计看起来不那么精致，而且黄色按钮变得更难阅读。
我们喜欢使用Adobe Color来获得调色板灵感。如果你喜欢另一个网站上的颜色，请试着找出为什么——是特定的颜色组合、色调还是饱和度？
通过将调色板限制为几种颜色，可以将重点放在设计上，因为要考虑的元素很少，所以干扰更少。该设计将创造更强大的品牌代表性。
清晰的视觉层次，视觉层次结构引导眼睛并指示重要的页面元素。
在这个例子中，眼睛首先吸引到最大的排版元素大标题。然后我们的注意力转移到黄色图像和添加到购物车按钮上。
标题中的混合排版处理：“Essential for women ”，是为了强调产品的重要性以及它们是为女性定制的事实。
在您自己的设计中，混合类型处理时，请务必：
① 在一个标题中最多使用两种不同的字体处理方式
对最重要的词使用粗体或下划线，对次要的词使用斜体。少即是多——例如，如果“women”也有下划线，设计就会显得随意。它将与“Essential”的大胆处理竞争并破坏阅读等级。
② 保持页面样式一致
由于“Essential”在此标题中以粗体显示，因此应在“Essential for man ”类别登录页面上以粗体显示。阅读标题后，我们的注意力转移到大型产品图片和黄色的“添加到购物车”按钮上。
③ 使用高质量的图像
图像可以为产品描述添加有价值的信息。照片的直接风格，没有多余的杂乱来分散产品注意力，也会影响整体视觉设计。
图像背景与产品的背景无缝融合，使页面看起来很精致。设计中的照片应该帮助用户直观地理解产品或概念，而不仅仅是装饰。
为了提升设计美感，可以让图像将它们的背景颜色与其周围空间的背景颜色相匹配来融入设计的其余部分。
3. 一致性第三个例子来自Spotify移动应用程序。这种设计有效地利用了视觉处理的一致性，在整个应用程序中创造了一个有凝聚力的聆听体验。

文章插图
Spotify 应用程序使用自定义图稿、颜色和间距的一致性来创建凝聚力，同时保持应用程序多个区域的清晰度。

文章插图
视觉一致性是 Spotify 精美外观的主要贡献者。有对齐、排版和填充的一致性，以及流派艺术作品的一致性。这种一致性的一个例外是流行播放列表和下方图块（中间屏幕）之间的间距，这与Classic Rock和下方图块（右屏幕）之间的间距不匹配。理想情况下，这两个地方的间距也应该保持一致。间距清楚地建立了分组，而颜色区分流派。
1）一致的视觉处理
当视觉元素不一致或零星使用时，设计将看起来很不专业且缺乏修饰。在Spotify 中，许多视觉元素在应用程序的不同区域保持一致。

在所有应用程序屏幕上，列之间的间距大小都相同。
在流派中，顶部网格线和排版处理保持一致。虽然渐变颜色因流派而异，但仍保持一致的色调和饱和度。
每个类别都有一个带有自定义艺术品的磁贴。虽然每个类别都有特定的颜色和图形，但图块在布局和层次结构上是一致的。

例如，每个类别的名称（例如，搜索屏幕上的流行、摇滚）在每个图块上的位置相同。磁贴中的图像（即专辑封面）始终在右侧，从磁贴上渗出。这些细节使整体设计感觉有凝聚力。