排版|粘性标题?界面设计?诀窍都在这里了( 三 )


排版|粘性标题?界面设计?诀窍都在这里了
文章插图
该设计使用 3 列网格。每个文本元素都与网格线对齐。左侧边栏中的图标之间使用一致的填充单位(垂直空白分隔元素),而双重相同单位用于分隔分组。小写字母区分了WRITTEN BY 的标题,超宽敞的前导使设计感觉通风且易于使用。
1)对齐到网格
首先,有一个列网格(上图中的粉红色线)。列网格提供对象对齐的垂直锚定线。
由于侧边栏内容与最左边的网格线左对齐,所以设计看起来很清晰,侧边栏内容很容易浏览。文章文本也与列网格线左对齐。在你的设计中,设置一个列网格并使不同页面和元素的对齐方式保持一致。
2)排版差异
Medium 使用同一字体系列中的不同字体样式(小写字母、粗体、斜体、下划线)和颜色的细微变化(黑色与灰色)来区分不同类型的内容。
虽然太多的多样性会破坏一致性并使设计看起来很随意,但 Medium 的变体是一致且有目的的。
例如,WRITTEN BY中的小写字母表示它是一个节标题。根据经验,确定排版系统并将你的设计限制在 1-2 种字体;使用相同的类型变体即斜体、粗体、字母。
3)字距调整和跟踪调整
设计师要考虑字体之间由于其特殊形状而产生的尴尬间距。字距调整通常应用于较大的文字类型,如标题,其中空格更明显。
间隙通常出现在形成一个角度的字母周围,如 W、Y、V 或 T。虽然大多数字体系列会自动调整字距调整,但也要考虑手动调整大标题或字母之间的明显间距。
总的来说,这些设计细节使设计美观,同时实现了网页的主要目的——易于阅读。
2. 层次结构和颜色第二个例子来自维生素公司Ritual.com。这种设计使用层次结构、颜色和图像来创造有吸引力的视觉体验。
排版|粘性标题?界面设计?诀窍都在这里了
文章插图
Ritual 的设计利用比例和颜色来创建页面层次结构
排版|粘性标题?界面设计?诀窍都在这里了
文章插图
此设计以 3 条锚线为中心内容。每个产品的标题、图像、描述和按钮都以其中一行为中心。调色板是有限的——由原蓝色和黄色制成。这种类型的调色板允许内容(蓝色)和号召性用语(黄色)之间形成鲜明对比。
1)精致调色板
仅限于两种基本颜色:蓝色和黄色,经典互补色。
所选择的特定蓝色和黄色有助于提高设计的吸引力——黄色不太亮,蓝色足够暗,可以在白色背景上阅读。
如果黄色和蓝色是主要颜色(青色和荧光笔黄色),那么设计看起来更像是 90年代初期的网站设计。
在为你的设计选择色调时,请切换不同的颜色,看看哪些颜色搭配起来看起来不错。远离荧光色,从原色稍微调整颜色将会优化你的颜色选择。例如,上面的屏幕截图已被更改(如下)以展示。
排版|粘性标题?界面设计?诀窍都在这里了
文章插图
这张经过修改的图像不仅让设计看起来不那么精致,而且黄色按钮变得更难阅读。
我们喜欢使用Adobe Color来获得调色板灵感。如果你喜欢另一个网站上的颜色,请试着找出为什么——是特定的颜色组合、色调还是饱和度?
通过将调色板限制为几种颜色,可以将重点放在设计上,因为要考虑的元素很少,所以干扰更少。该设计将创造更强大的品牌代表性。
清晰的视觉层次,视觉层次结构引导眼睛并指示重要的页面元素。
在这个例子中,眼睛首先吸引到最大的排版元素大标题。然后我们的注意力转移到黄色图像和添加到购物车按钮上。