保定设计网站:如何在移动响应管理空白布局

2019.08.22 保定设计网站

91

空白是一个至关重要的设计工具 你是否意识到这一点。 许多设计师调整页面元素,直到他们“看起来很好”。 通常这会导致自然 平衡的空白 从直觉页面之间的部分。

但是当你进入响应设计这个问题就有点棘手。 空白需要调整在不同的断点为所有用户创建一个无缝体验。

这可以用许多不同的技术,我想最好的。 所有现代的网站 充分响应 因此,毫无疑问,响应设计是很重要的。 唯一的问题是如何处理空白,这样所有的用户都拥有一个很棒的经验。

重新排列的导航

自然每一个设计师考虑的第一件事就是如何处理导航菜单。

如果一个网站有几十个链接你真的没有太多选择。 保定设计网站可以使用一个选择或输入字段隐藏菜单 three-bar汉堡图标。

这里有一个例子,顶部导航甚至不调整。 一旦你的浏览器窗口点击某个断点的链接自动隐藏到一个菜单,取而代之的是一个汉堡图标。

但要注意各个环节之间的额外的空格补充道。 这通常是一种常见的技术,一个伟大的想法空间移动链接手指叩击。

在线HTML电子邮件模板编辑器

与 明信片 你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。 现在试一试 免费!

了解更多其他产品

保定设计网站大多数网站重新排列他们的几次导航,最后定居在three-bar图标。 例如 Dorigati 使用一个宽屏导航菜单,最终分解成一个网格系统。

然后在960 px断点整个布局变化从顶部标题栏导航。 图标和链接都重新整理自己变成新栏。

一旦你去更小的导航链接最终回到前一个隐藏的汉堡菜单。 这是一个非常复杂的解决方案,但它提供了一个更自然的体验不同浏览器的决议。

记住如果导航是足够小,那么你甚至不需要汉堡包。 通常是一个好主意,以避免隐藏菜单在可能的情况下,这样一个解决方案 神学院 将适合较小的网站菜单。

所有的链接仍可见但他们重新安排到不同的宽度。 字体大小会减少并最终链接是挤在一起。

只要游客仍然可以浏览网站,点击正确的链接你可以一样挤在一起。

从水平到垂直之间的转变

空白在桌面布局移动在整个页面。

但当你处理较小的设备你应该更关心的垂直空间。 这定义了内容的速度和智能手机和平板电脑的自然“流”决议,长于宽。

在 Jisc 你会注意到有许多横向的页面部分。 一旦你缩放页面所有这些小块元素彼此滴下。

一页部分将理想横跨整个宽度320 px的智能手机屏幕。 但响应布局需要更多的垂直元素之间的负空间创建垂直流动。

的想法 负空间 网站设计中是强大的。 你需要这个空间分解页面的部分,让文本块呼吸。 没有人喜欢阅读的文本。

这是真的与企业网站和博客 Mashable 。 当你在一个桌面整个主页跨越3 - 4列的内容。

但响应用户需要的简化版本 真的 长列。

所有其他列可以降低杆柱下,也可以是隐藏的响应页面。 每个网站都有不同的解决方案。

但当你把白色空间垂直移动你总是需要考虑。

水平应该由一个元素。 你应该专注于你需要多少空间页面的元素和其他部分之间。

字体大小与间距

一些设计可以靠传统字体大小相同。 但是如果你有超大号的标题或小段文本然后你将需要调整大小在特定的断点。

有很多你可以做的 负责排版 除了典型的上浆性能。 您还可以调整行高,字母间距,颜色和文本两个街区之间的利润率。

下一个Web的桌面布局有很多头和顶部导航之间的空白。 但他们的移动响应布局大大缩短这个空间。

同时,标题文本也减少了在大小间距的段落。

你必须信任你的直觉时移动排版。 试着感觉出看起来最好和试图实现这一点。

也考虑到你的网站 的行为 在手机屏幕上。 阿格拉文化 有一系列的图像块在悬停显示文本。

但由于移动用户不能自动悬停文本显示过去的某个断点。 它似乎是一个小问题,但是这是一个很大的影响在移动体验。

空白页之间增加部分给狡猾的内容区域的假象。

这可以看到同样的效果 卡通频道的页面 他们有一个导航图标。

过去某个断点CN标志缩减的主要链接。 你会发现链接的图标将缩小,完全失去小屏幕上的图标。

的确,图形 可以改善 导航。 但只有这么多的空间移动,你必须明智的。

当新款类型总是考虑水平和垂直空间的问题。 移动用户得到一个可行的解决方案,即使页面必须大大延长就拥有一切。

新款的图片

另一个考虑是使用宽屏图像。 因为大多数显示器都是宽屏的web已经适应了包括图像通常是更广泛的比高。

移动响应网站要么缩小这些图像或重新排列它们地合适。

UPP Broadgate公园 有一个有趣的解决方案,顶部标题图像垂直调整大小以适应。 图像幻灯片是建立适合屏幕的宽度,但任何屏幕小于500 px加长的形象。

这增加了大量的垂直空间的页面可以好如果你正在寻找。

我承认这是一个很难完成的策略。你需要知道你的图像大小和焦点的图像进行适当的调整。

但是如果你愿意付出努力最终会导致更大的经验。

保定设计网站在其他情况下你会选择隐藏长图片和完全删除它们的移动体验。 的 黄金岛 网站使用这种技术在顶部标题幻灯片。

页面上的所有其他图像得到重新排列成一列添加空格。 但由于旋转木马不会增加太多的用户体验可以为移动用户隐藏。

考虑你想要如何处理图片和你需要多少空间。 缩略图画廊可能比一个幻灯片或靠近了股票的照片。

每个场景都是不同的所以愿意尝试不同的策略来看看效果最好。

结束

空白是网页设计的一个至关重要的方面,它起着很大的作用 内容流 为响应网站。 大多数设计师可以通过眼睛估计空白值,但它有助于理解 为什么 你添加空白成一个设计。

如果你认为相关的任何趋势或小贴士制定响应空白随时掉下面的评论。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP