很长一段时间,网页界面是平衡,比例和对称性被认为是良好品味和伟大设计属性的标志。每个人都在努力实现细节的完全和谐和平衡。但情况发生了变化。有很多尝试接受混乱。
这些日子里,我们目睹了另一种将混乱转化为优势的企图,以不平衡的布局和构图为代表。下面的例子中的设计者明智地选择了解决方案,显然考虑到了过去的错误。但是,他们并不害怕将未探索的方法与独特而杰出的设计相结合。
如何创建不平衡布局
不平衡的布局,很像混乱本身,可以通过多种方式创建。最简单的方法就是让你的想象力疯狂起来,并希望它不会导致灾难。显然,这条道路并不适合每个人。有时最好遵循一般惯例,并从他人成功采用的模式中学习。这些成熟和“成熟”的方法包括:
走出界限
使用单方面的组织
操作空间
重叠块
混合文本和视觉效果
采用非传统网格
混合文本块和视觉效果
当然,实现不平衡布局的一个简单方法是稍微玩一下。将设计的两个主要组成部分 - 文本块和视觉材料 - 混合并匹配,直到获得所需的效果。忘记对称和平衡的一般规则; 享受创造不寻常的过程。如果你喜欢小孩的步骤,只需从最小的改变开始,例如将一侧的内容稍微偏移或稍微偏高一些,以避免水平面的一致性。
如何做到这一点,Nett是一个代表性的例子,并且仍然是和谐的。
走出想象的边界
“哦,那可以很容易地安排; 难以做到的是强制所有UI元素留在期望的网格内。“
然而,走出想象的界限并不像听起来那么容易。事实上,这是棘手的,因为你需要伪造它。主要的绊脚石是为了避免结构崩溃并使其按照你想要的方式行事。
Crestyl制造的码头是固定技术的码头之一。
这里,一个图像在网格内; 另一个不是。主要标题下的字幕紧贴边框,而正下方的主要文字块则使用左侧的一些空格。感觉这个设计需要一些工作来完成平整和调整。但是,所有这些微小的明显差异都有效地形成了完整的组合。因此,该网站以优雅的方式感到非凡。
忘记经典网格的规则
非传统电网可以帮助达到预期的效果。忘记严格的习惯组织的行和列; 只要将块放在任何你想要的地方。有一点需要记住的是,当你正在搞定位时,考虑创建一个视觉路径。通过这种方式,您将设法设置焦点,并轻松引导用户从一个点到另一个点,就像Heartbeat所做的那样。
单面组织
如果你没有心情进行实验并找到适合这种趋势的特殊方式,那么你可以假装从未听说过像Maison Vignaux这样的中心布局,并且他的投资组合部分。他将内容放在页面的两侧,并保持中间不变,并带来一个非常有趣的结果。
添加空间
深思熟虑使用白色空间是任何良好用户体验的核心。对大多数问题来说,这是一个几乎普遍的答案。不平衡的布局是没有空白的。差距是负责设计工作的元素之一。
不要害怕尝试它。按照Upperquad的例子。在这里,自由空间是情况之王。这个空间不会将用户推开; 相反,它创造了一种特别的天赋。
让块稍微重叠
重叠技术是多层设计的更简单,更优雅和更微妙的版本,采用这种趋势的方式面临更少的挑战。只要记住保持平坦并避免像Esbeginnt那样的skeuomorphism。
在上面的网站中,由于图片部分重叠,文本块和相关图片不会形成一个区域。然而,一切都看起来很好,感觉和谐,热情洋溢。
使趋势最大化的提示
享受多层次的美学
简而言之,多层次美学是一种尝试视觉混沌的尝试。显然,不平衡的布局似乎是它的理想合作伙伴。这两个概念都反对习惯秩序。
这些设计毫不费力地引起注意,为项目增添了诱人和挑衅的气质。但是,就像在现实生活中一样,很难在他们身上戴上缰绳,让他们感觉到自己的感觉。
Trevarefabrikken成功找到了这两个概念之间的关键。球队已经打赌精确块,整洁的背景,平坦的风格和一堆空间。
用一个说明性的方法形成一个串联
只有一个小小的错误,一切都可能出错。不是每个人都可以掌握说明性方法,特别是在布局不平衡的情况下。这两个概念都应该谨慎对待。成功的关键是要记住,衡量是一个宝藏。看一看代表性例子Fitness Body Star。
不平衡的布局,重重图案的背景和分散在整个屏幕中的装饰元素的和谐融合使得设计如此独特。每一个细节都像手套一样。该网站看起来简直太棒了。
充满视差和3D渲染
通过谨慎地重新创建视差效果,一切都看起来更好。它增加了难以抵制的交互性的微妙感觉。这同样适用于逼真的渲染,其中人造环境看起来如此温暖,并且诱惑你只是想触摸它们。这些元素完美配合不平衡的布局。
Copperstyle抽奖活动成功地采用了这种方法,在印刷术中使用了一些谨慎应用的不平等。结果令人印象深刻。
结论
本能地在设计中寻求对称性。这是不平衡布局不总是为用户工作的原因之一。尽管如此,情况有所改善。
由于修改和增强的解决方案,我们的趋势比以往更好。设计师已经采取了很好的措施,并且投身于提供新的前景和实现有趣的设计。