扁平化网页的设计方法-页面空间的运用

这两年的时间内扁平化网页越来越受到大部分人的喜爱,很多企业也想向这方面发展,在扁平化的设计中有一个重要的项目就是页面上空间的运用,今天我们就给大家讲讲网站设计中扁平化网站的设计技巧。
        当一个元素使用不对称的空间,它对周围的其他元素。它会显得更加有活力,如果你设计一个网页,一个链接或按钮的要求比别人更多的关注领域是特别有帮助的。

今天我们要仔细看看不对称表示通过对比,间距和布局。我们观察对比思考,如何关注空间的驱动器。

不对称也可以关注内部关系如图像缩略图或文本对齐。例如,一个图像画廊缩略图可以展示5里中间的拇指略大于其他人,主要是用来捕获注意。不对称是伟大的关注一个特定的区域在页面或页面中的特定元素。

而且,就像我们描述的免费电子书人眼的Web UI设计,在不对称时候,不对称的缘故是有用的。

让我们仔细看看不对称表示通过对比,看间距和布局。

观察对比

通过去除杂念,你强迫用户只关注什么是立即可见的。

你可能将影响到这些地区的设计背景梯度甚至jQuery的动画。这些效果可以用在一个或两个元素使他们从别人的立场。

我们最喜欢的一本影响生活在主页的例子素描由波希米亚编码。主页将黑暗与光明的颜色融合成一个统一的布局对比。

在头的部分,你会发现有两个按钮:一个免费试用和其他购买软件。两个按钮是蓝色的,采取了相同数量的空间。然而,免费试用按钮用一个“空”的背景,这是通常被称为幽灵按钮。上层的黑暗头,免费试用按钮似乎失去焦点的背景。

因为购买按钮用淡蓝色的背景和白色文字,它代表了坚强,大声对黑暗的背景。当快速扫描你的眼睛在头部,这是很明显的购买按钮,立即吸引了你的注意力。这是通过色彩的选择造成的但也从白色空间之间的元素的添加。

垂直和水平的白色空间的使用按钮出现在标题文本分离。由于一个按钮比其他明亮,自然是因为有足够的空间和方式,没有多少人注意捕获。
你可以在页脚区看到一个类似的按钮风格:

在这种情况下,用户只可以选择提交他们的电子邮件或隐瞒信息。

因为草图要你提交你的电子邮件后尽可能快地键入,间距更严格的输入框和提交按钮之间。这是因为当你降低Fitts定律的距离(和大小是固定的),你的速度就要元素之间的时间。

最后,注意输入形成不对称的大小相比,提交按钮也吸引你的眼睛到页面的一部分,而这正是素描的希望。

使用白色空间你的优势吸引到特定的页面元素,流浪的眼睛。实验发现什么是最好的,尽量的A / B的间距不同值的测试方法不同。

这里是从素描的网站收集到的一些一般的笔记:

  • 对比并不总是指颜色。它也可以指不同的元素空间,尺寸,和网页上的其他元素的相对位置。
  • 空的空间可以是明显的或不明显的依赖于上下文。
  • 周围的元素,其他元素的天然的知名度起到了很大的作用。
  • 对称创造记忆与和谐,而不对称的关注。相应的平衡。

空间驱动的注意

你可以找到一个稍微不同的例子在主页,为iPad数字绘画工具。通过浏览网页,你会发现整个布局是黑暗和功能大大超大的页面元素。

设计演示如何把焦点集中到奇异的元素在一个非常大的页面。截图,演示绘画,和特征都拿出自己的部分。
空格分隔的文本和视觉内容。本设计是在其使用的文字颜色区分标题特别注意(高对比度)和一般网页文字(低对比度)。

通过将一页分成几部分,你创造了一个天然的内容层次。然后将这些部分具有独特风格(全屏背景,超大字体,APP截图)的分歧更加明显。

记住,不是所有的网站可以从内容大部门效益,这似乎是一个非常流行的趋势之间的设计。看起来很棒当正确执行。

交替布置

表面上,交流内容似乎讨厌因为你强迫读者的目光跳跃。但由于内容是隔开的那么好,它更容易阅读z-pattern可能比你想象的。

该模式也迫使游客停留在他们的脚趾因为设计不是填鸭式的信息。当然,这种模式只可能因为雅致的白色空间划分出路径扫描。

看网页Wunderlist,我们可以看到这种非对称的图案在白色的空间出现。不对称的间距是认真执行,使它看起来有趣而不被激怒。

我们可以从网站设计模式的使用空间展示Wunderlist学到很多:

    • 不对称,其目的试图提请注意到页面的某些地区时。
    • 在一个重复的图案成为对称不对称。
    • 文字或图形之间的空间格局也将出现一个大的模式。
    • 白色的空间要浏览的内容更容易和更可预见的。
时间: 2024-11-03 13:13:14

扁平化网页的设计方法-页面空间的运用的相关文章

用扁平化的界面设计吸引用户

在传统的网页开发乃至现在针对移动设备所做的设计,复杂炫目的效果对产品而言未必是一个好的选择. 尤其在移动设备上,过于复杂的效果非但很少能为应用吸引用户,反而时常让用户在视觉上产生疲劳,对产品界面中最基本的功能产生认知上的障碍.因此我们在设计中就需要参考“扁平化”的美学.UI界面设计 什么是扁平化设计 在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更“平”的界面.北京UI设计 Layervault的设计师Allen Grinshte

数组扁平化的五种方法

数组扁平化概念 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5] 实现 1. reduce 参数 callback 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数: accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方).currentValue数组中正在处理的元素.index 可选数组中正在处理的当前元

自适应网页的设计方法分享

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座内容简要的整理一下. 1.在HTML头部增加viewport标签. 在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放.代码如下: <meta name="viewport" content="width=dev

关于扁平化界面风格的设计美学讨论

这是一篇关于视觉方面的小文章,关于扁平化与拟物化风格的讨论.有不少朋友来发表各自的看法,说明这确实是大家都蛮关心的设计问题.大家的观点虽然不同,但都有一定的道理,都能看出发表论调的设计师的思考和激情.有人说了你怎么这么没节操呢,你到底觉得哪种好?我要说的是,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题:脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立. 说的具体些,远的不讲,单说Bef

最新出炉:25套扁平化风格的图标【免费下载】

大家都知道,扁平设计是现在网页设计领域的最新趋势.对于扁平设计的网页界面,几乎所有的网页设计元素,例如按钮,图标,导航栏等都是扁平风格的. 那么什么是扁平设计呢?扁平化网页设计是指设计形式摒弃了各式各样的纹理背景,摒弃文字阴影,盒阴影等等.扁平化设计将继续影响 Web 和移动设计行业.在这里, 25套免费的扁平图标为您未来的项目提供很好的素材. 您可能感兴趣的相关文章 让人爱不释手的13套精美网页图标素材 分享25套非常漂亮的免费网页图标素材 网页素材大宝库:50套精美的图标素材 分享20个非常

关于扁平化视觉设计趋势的一些小分享

本文来自网易云社区 作者:刘戈 作为视觉设计师来说,能设计出一款赏心悦目.走在设计潮流前线而又有自己品牌设计基因的产品是每个人心目中的追求.如果提到当今移动产品UI设计风格趋势时,相信不少设计师心目中的答案是扁平化设计.无可否认,在2013年扁平化设计风格全面普及以来至今,扁平化依旧是移动产品设计的主流方向,但众多产品使用扁平化设计的同时会使得产品之间的视觉差异越来越小,设计师如何把自己的产品设计做得与众不同,让自己产品于同类竞品中脱颖而出就变得尤为关键,这要求设计师时刻要保持设计上的创新,而创

Docker扁平化网络设计与实现的方法步骤详解

研发背景 众所周知,Docker容器跨主机互访一直是一个问题,Docker官方为了避免网络上带来的诸多麻烦,故将跨主机网络开了比较大的口子,而由用户自己去实现.目前Docker跨主机的网络实现方案也有很多种,主要包括端口映射.ovs. fannel等. 但是这些方案都无法满足我们的需求:端口映射服务内的内网IP会映射成外网的IP,这样会给开发带来困惑,因为他们往往在跨网络交互时是不需要内网IP的:而ovs与fannel则是在基础网络协议上又包装了一层自定义协议,这样当网络流量大时,却又无端的增加

扁平化设计的流行配色方案

扁平化设计的流行配色方案 扁平化设计从2012年开始就已经流行起来,我觉得flat design有点类似极简主义设计,同样是追求简洁.简约,不同的是,扁平化设计是一项运用简单效果,或者是刻意进行一个不使用三维效果的设计方案.一个好的扁平化设计必然不可能出现阴影.浮雕和渐变等效果. 扁平化设计看上去非常简单.直观,并且使用方便,所以在手机界面和网页设计中变得越来越受欢迎. 让我们来学习一下,如何进行扁平化设计吧. 什么是扁平化设计?<探讨扁平化设计之美><使用扁平化设计的网页设计欣赏>

扁平化设计2.0

时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 1)没有多余的效果,例如投影.凹凸或渐变等 2)使用简洁风格的元素和图标 3)大胆丰富且明亮的配色风格 4)尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些"规范"开始松懈了