31 lines
1.1 KiB
Markdown
31 lines
1.1 KiB
Markdown
|
---
|
|||
|
|
title: Visual Hierarchy
|
|||
|
|
localeTitle: 可视层次结构
|
|||
|
|
---
|
|||
|
|
## 可视层次结构
|
|||
|
|
|
|||
|
|
可视层次结构是内容的组织和表示。您可以使用视觉层次结构来关注用户的注意力并显示最重要信息的位置。
|
|||
|
|
|
|||
|
|
在创建内容的可视层次结构时，您需要记住的是它们都是相对的。您要突出显示的部分应该从内容的其他部分中脱颖而出。
|
|||
|
|
|
|||
|
|
您可以通过多种方式实现可视化层次结构，包括（但不限于）：
|
|||
|
|
|
|||
|
|
* 尺寸
|
|||
|
|
* 颜色和对比度
|
|||
|
|
* 标题和副标题
|
|||
|
|
* 活版印刷
|
|||
|
|
* 白色或空白
|
|||
|
|
* 质地
|
|||
|
|
* 位置
|
|||
|
|
* 方向
|
|||
|
|
* 总体布局
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
创建可视层次结构的工具： [Design School博客](https://designschool.canva.com/blog/visual-hierarchy/)
|
|||
|
|
|
|||
|
|
6 Visual Cierarchy原理： [99个设计博客](https://99designs.com/blog/tips/6-principles-of-visual-hierarchy/)
|
|||
|
|
|
|||
|
|
案例研究 - 使用Visual Hierarchy改进页面： [博客](http://blog.formedfunction.com/post/3029763425/on-visual-hierarchy)
|
|||
|
|
|
|||
|
|
添加可视层次结构： [中等](https://medium.com/designed-thought/8-ways-to-add-visual-hierarchy-8820be73218a/)
|