网页美工设计

网页设计师必须要学习的视觉层级技巧

编辑：时间：2018-03-09 08:42:09

　　5、使用黄金比例

　　我们最新的文章中专门有一篇是介绍黄金比例在设计中的运用。不同尺寸的元素有一个精确的比例在审美上被认为是看起来最舒服的，这个比例是1:1.618，经常被绘制成一个贝壳形的螺旋，你可能看到过。

　　设计师在绘制草稿阶段就经常使用黄金比例，这有助于规划排版架构，以适合的比例缩放用户界面元素，使用户看起来舒适。

　　6、使用网格

　　网格是个用于设计不同阶段的关键工具，也包括建立视觉层级的阶段。网格有助于组织组件，使它们以合适的尺寸和比例呈现，而且能帮助设计师有效处理负形，因为网格展示了元素是否按比例放置。

　　7、添加一些颜色

　　颜色的选择和组合对视觉层级来说很有必要，因为它们能帮助用户识别核心元素。颜色有它们自己的层级，在用户心里具有影响力。有像红色、橙色这样很强的颜色，也有像白色、米色这样很弱的颜色。强烈的颜色很容易被注意到，所以设计师经常用来突出元素，增强对比。

　　把一种颜色运用到几个元素上，你会发现它们在某种程度上是有联系的。比如，如果你选择了一个红色购买按钮，当用户需要的时候，能凭直觉找到。

　　8、注意字体

　　视觉层级包括一个核心分支叫做排版层级。通过修改和组合文字，排版层级旨在形成起最有意义、最突出文字信息和普通文字信息之间对比。通过调节字体大小、颜色、字重和对齐关系来实现字体的转换。不同的字体能将文字信息分割成不同的层级，以便用户可以逐渐感知信息。不过，字体尽量控制在3种以内，因为使用太多字体会显得页面很杂乱，设计不协调。

　　9、Web三层级和移动两层级

　　如上所说，不同的字体形成了排版的优先级，排版层级由标题、次标题、文本、按钮和说明文字等构成。有3个排版优先级：第一、第二和第三层级。第一级包含最大的类型，旨在把用户注意力吸引到屏幕的核心信息。第二级提供容易浏览的文本元素，帮助用户引导到内容上。第三级适用于正文文本，通过相对小的类型展示一些额外的数据。

　　很多情况下，web产品包括3个层级，因为能展示更多的信息。另一方面，在移动端设计上建议设计师保留2个层级。小屏不能为3个层级提供足够空间，所以像次标题这种第2层级的元素要放在一边，让页面设计更加简洁。

2/3 首页上一页 1 2 3 下一页尾页

<< 上一篇：响应式网页设计的9项基本原则

>> 下一篇：网页设计中的css用法特点注意事项

推荐资讯