网页设计中的不对称设计技巧【附12个精美示例】

　　不对称是对称的反面，但并不意味着不对称就缺少平衡与和谐。不对称的设计技术可以在视觉上引人入胜，为内容创建出重要程度不同的差异性。这篇文章分享一组鼓舞人心的例子，介绍了不对称设计在网页中的使用技巧。

您可能还喜欢

• 10套精美的免费网站后台管理系统模板
• 35个立体动感的视差滚动效果网站作品
• 13套非常精美 Web 应用程序图标素材
• 10个精美的 HTML5 商业网站设计案例
• 30佳别出心裁的企业网站设计优秀作品
• 25个优秀的国外单页网站设计作品欣赏

 

　　大多数人想到的对称性都是一种自然发生的现象，其实不对称也是一种自然现象，例如人都是显性的左撇子或右撇子。不对称设计的用途也非常广泛，常用来突出重点，让人的视线自然的被吸引到焦点上面。

不对称设计的应用

　　什么样的项目可以受益于非对称设计？简单地说，几乎所有的项目都可以。这项技术如果能够合理运用，将会给项目增强对比度和差异性。其关键是要元素的组织和排布以达到非对称的平衡。

　　在网页设计中，对称通常都是指水平对称，而不对称都是指首屏部分的内容，即用户不用拖动滚动条就能看到的那部分。最常用的不对称设计都是把对称的元素组合在一起，重新排布，下面是几个不对称设计的示例。

 

 

 

 

图片和文本的不对称设计

　　让不对称设计达到平衡的方法之一是配对不同的元素，如 图像和文本。这是一种常用的技术，众多设计师都在使用。

　　这种技术的秘诀就在于你如何把二者结合起来，需要的只是一张图片和几句话，不多图片和文字必须是 互补的。这种技术关键要素之一是如何链接文本和图像。文字和图片是表示同样的事情吗？它们存在关联吗？字体的大小是否能体现图像的权重？

 

 

 

梦想天空博客关注 前端开发技术，展示最新 HTML5和 CSS3应用，分享实用的 jQuery插件，推荐 网页设计案例。

 

 

 

图片和空白的不对称设计

　　空白通常搭配一些重的元素（图片或文字）以创造出重量或运动感。空虚的空白和页面其它部分的丰满形成强烈的 对比。

　　另一种创建不对称性的方法是遮挡部分 可视区域。使用侧边栏和色块是做到这一点的简单方法。通常在使用这个技巧的时候，虽然这样的设计在网站的局部具有鲜明的对称感，但总体看是不对称的。

 

 

 

 

颜色在不对称设计中的应用

　　不对称也可以通过颜色的使用来创建。鲜明的 对比色调，例如白色和黑色的或者调色板上的其它对立颜色，能然人感觉到失去平衡。

　　非对称的彩色图案也自然会有一种奇怪的平衡感。在许多物种中，雄性动物几乎都有 完全对称的颜色标记，而雌性动物则很少有（这种自然现象被认为是生物进化的自然选择。） 另一种常用的方法是创建一个色彩多种多样的项目，而和它搭配的项目则它含有很少或根本没有颜色。

 

 

写在最后

　　不对称设计可能会非常棘手，但成功的设计也非常美丽。我喜欢不对称设计，同时更喜欢不对称设计中出其不意的平衡。最好的不对称设计是搭配合适的图像和文字以创建平衡，在屏幕上创造一个独特的从图像到文字的视线移动路径。

您可能还喜欢

 

• 25个以全屏照片为背景的精美网页作品
• 30个与众不同的国外优秀网站设计案例
• 让人惊叹的国外创意404错误页面设计
• 16个精美的HTML5作品集网站设计案例
• 10套精美的免费网站后台管理系统模板

 

本文链接： 创建偏离中心的平衡：在网页设计中使用不对称性

编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接