菜单 关闭

谁先来?布局还是内容?

通过 苏珊·法雷尔10月11日,二千零一十五

总结:尽可能为内容安装灵活的模板,以避免页面布局尴尬和困难。设计时经常测试,manbetx官方网站手机版并计划扩大规模。


这取决于…

当你有了现有的内容,是时候重新设计网页了,manbetx官方网站手机版内容优先策略只是一个事实。重新设计网站以manbetx官方网站手机版获得出色的移动体验时,最好使用渐进式增强和响应式设计,manbetx官方网站手机版基于满足用户需求的优化内容。在大公司里,然而,工作的划分可能意味着设计布局开始于实际信息元素的大小已知之前-可manbetx官方网站手机版能是因为文本尚未写入,或者内容审计是并行进行的。

不幸的是,当容器和内容物结合在一起时,意外的结果会导致尴尬的解决方法,昂贵的返工,或者切割所有内容以适合。为了避免这些常见问题最好是 manbetx官方网站手机版相互设计布局和内容。

CNN主页布局
CNN使用了一个不可原谅的网格。虽然看起来不错,对于大多数网站来说,剪切所有内容以适应网格框可能太麻烦了。

容器优先方法的问题

空占位符

模板或CMS可能包含不在每个页面上或对组织没有意义的内容的占位符。在设计过程中填充这些内容会导致空的,manbetx官方网站手机版以后不再需要的空间。“lorem ipsum”必须死。

为了自身的利益保持一致

锁定步骤一致性可能导致页面无法使用,内容冗余或不相关。例如,如果模板有3层标题,内容有2层标题,您不应该仅仅因为其中一个标题的空间存在而重复它,然而,把它留白可能看起来很尴尬。AS托格说,“最重要的一致性是与用户期望的一致性."

带有占位符文本的对话框
当发生占位符或冗余问题时,如有可能,更改模板。如果标题是空的,它可能会崩溃。如果改变模板没有意义,也许可以考虑使用具有两层标题的模板,并选择在内容中创建另一级标题。

避免占位符的暴政,尤其是在使用现成的平台时。根据需要定制。

结垢问题

当内容大小与需要进入的空间不匹配时,就会出现缩放问题。常见问题包括:

  • 当导航放大或本地化时,布局元素不能正常增长。导航元素的数量最终会破坏页面布局,或者新的东西被塞进快速链接或A资源菜单。
  • 内容太大或太小,无法分配空间,导致视觉故障。
  • 图像脱离了框架元素,或者必须以太小的尺寸显示才能获得良好的可读性或最佳的享受。

我们所做的许多主要的Web重新设计都是由于扩展问manbetx官方网站手机版题而需要的。.规模化的解决方法往往演变成无用的方式,就像厨房里的垃圾抽屉。

新西兰先驱报
新西兰先驱报有一个垂直灵活的布局,其中的列是相互独立的。这一报纸时代的版面惯例为每一篇文章提供了不同数量的文本、摘要和图片标题。

意外的约束

有时会制作占位符内容以适应建议的布局模板,因此,一些关于事物外观的早期假设最终会成为任意约束。

烘焙布局限制示例:

  • 所有图像标题必须是2行长。
  • 所有摘要必须是一个段落,有5行。
  • 添加句子有时会强制另一页。
  • 缺少内容类型会导致人们必须单击的空白页。
  • 菜单项或标题可以是一个或两个单词长,但不是三。
  • 如果不干扰其他页面元素,则无法更改列宽。
  • 更改浏览器字体大小会导致整个页面看起来断开。

广告的问题

广告到处移动,大小也在改变。从前,所有的广告都是一定大小的横幅矩形。后来它们的尺寸不同了,然后它们几乎变成了方形。他们曾一度游过这一页。后来他们占据了中间页。manbetx官方网站手机版需要他们的设计持续多年的设计师不应该围绕广告尺寸设计布局。

广告假装是内容。有时,它们会潜伏在滚动条附近,捕捉零散的点击和点击。(不要试图欺骗人们点击广告.这是失去游客的好方法。)

广告不是最重要的内容。当广告看不见时,有些模板看起来很可笑,这是一个很好的迹象,表明所有的广告都会让他们看起来更糟。如果你主要为广告设计版manbetx官方网站手机版面,你可能已经停止关注你的网站访问者所展示的东西:内容。

广告使人们下意识地忽视了他们。 广告盲区能在广告附近做任何东西(或任何看起来像的东西)能够做广告)几乎看不见给你的观众。

在版面中没有真正的内容之前,您不能测试这些类型的广告问题。

怎么办

  • 创建灵活的布局。不用说,这些天,但我们仍然看到许多死板的设计。manbetx官方网站手机版今天的屏幕尺寸千差万别响应式网页设计manbetx官方网站手机版.适应性和响应性设计能够更优雅地容纳内容,manbetx官方网站手机版但是,它们不会让您免于缺乏实际内容的测试。
  • 为了成功,你的布局,导航,文本容器必须在设计过程中和部署后很长时间内都很灵活manbetx官方网站手机版.
  • 使用渐进增强原则为设计manbetx官方网站手机版可达性以及跨平台兼容性。
  • manbetx官方网站手机版使用现有内容进行设计。如果您正在重新设计并且您manbetx官方网站手机版有内容(甚至过时的内容),你可以从这个开始。无论如何,如果你正在设计一个大manbetx官方网站手机版尺寸的系统,你需要使设计与内容以及manbetx官方网站手机版内容与设计相匹配,因为网站的设计和内容必须共同成长。manbetx官方网站手机版
  • 如果你还没有内容,借一些类似的媒体从其他来源把它装进线框里,原型,和其他模型。你也可以打印出来,剪掉它,并重新排列表中的内容项,以想象页面布局应该如何处理它。这个练习还可以帮助您更好地理解您需要处理的内容类型,以便使网站在您的行业中具有竞争力和可比性。
  • 只有在必要时才使用占位符,然后才在低保真线框设计的第一阶段进行通信。manbetx官方网站手机版
  • 计划接受任何可预测的未来发展。你的设计可manbetx官方网站手机版能会意外地延续几十年,比你现在想象的还要长。问问你自己,当带宽更好时,该组织希望发布什么?当巨大的白板尺寸的显示器和小巧的智能手表更常见时?数码助理什么时候给人看书?你的移动第一网站需要什么?你的中文B2B网站需要什么?也许你现在需要更多的模板来避免以后的昂贵的重新设计。manbetx官方网站手机版
  • 考虑未来的内容类型和显示大小,以及重新调整内容用途的有用方法。所有那些昨天的固定宽度的表格布局必须被替换或处理。轨道含量,一篇文章分开的清单,指出网站内容正被拉入各种其他容器中。例如,人们和应用程序经常使用浏览器插件重新格式化页面,以避免不良的布局和文本处理,这样他们可以更容易地阅读文章。manbetx官网手机登陆同样地,通过以各种方式嵌入内容,网站可能会包含大量其他文档。可嵌入性和共享计划.
  • 计划扩大规模。尽量不要限制文本的长度或项目的数量超过您必须限制的范围。计划适应比您自己的首选大小更大的字体大小。计划更多一切,尤其是导航。
  • 记录您的设计决策。manbetx官方网站手机版明确设计假manbetx官方网站手机版设和权衡;因此,涉众可以做出明智的选择,要么限制内容,要么留出时间让布局更加多样化。考虑是否需要在模板的样式指南或模式库中提及这些约束及其设计结果。manbetx官方网站手机版
  • 提前和经常测试.从建议的布局开始,并用实际内容进行测试,随时随地修改设计。manbetx官方网站手机版
  • 注意在内容大小和位置上可能出现的问题
    • 固定宽度任何东西
    • 将自动换行的元素
    • 内容领域中图像和视频的多方面比率
    • 这个完整性错觉假地板)由水平元素引起
    • 看起来拥挤或破碎的内容
    • 没有足够的周围空间的交互式触摸目标
  • 确保你知道你的布局会发生什么。什么时候:
    • 导航项数量或长度增加
    • 朗读书页的人屏幕阅读器软件
    • 跨平台查看页面,包括在移动设备上
    • 内容类型(广告,视频,文本)更改大小或形状
    • JavaScript闪光灯,和WebFonts被关闭
    • 形式,打印收据和其他关键项目
  • 测试边缘案例.创建外观也很好的布局:最小的,最大的,最长的,最忙的,大多数图像,所有文本,图表和图表,信息图形,长标题,缩进列表,段落列表,拉引号,帮助,程序,任何广告类型,形式,等等。
  • 在尽可能多的平台和显示尺寸上测试布局.你不可能总是一个设计都适合所有人,manbetx官方网站手机版但是,如果你在开始构建之前仔细考虑最棘手的内容,你可能会避免制作3个版本的网站。
Android碎片-屏幕大小变化
就像这个可怕的提醒各种安卓屏幕尺寸在报告中开放信号显示,内容设计的灵活性manbetx官方网站手机版是唯一的出路。
  • 翻译草稿布局以查看中断。使用真实的文本并将其翻译成德语和具有不同字符集的语言,看看会发生什么。这个练习有助于测试拟合极限。它还可以帮助您检查您的布局如何传达人们应该做什么以及页面如何以视觉方式流动。
谷歌翻译-nng希腊语
许多人使用翻译引擎来阅读网页。使用谷歌翻译 或者类似的东西,看看建议的布局对您的全球观众有多好。

底线

不可能在每个版面中容纳所有可能的内容类型或大小,当然。通过思考未来的用途以及人们喜欢和重新利用您的内容的方式,然而,您应该能够获得有用的布局,这些布局在未来几年都会有效。在设计期间调试布局将节省大量的复制时间,并在以后重manbetx官方网站手机版新设计资金。

相关课程

缩放用户界面