上帝公式
Do you ever walk into a room cluttered with discarded papers and leftover takeout and feel comfortable?
您是否曾经走进过乱七八糟的房间?
Yes, you might if you’re a sophomore at college. That’s just dorm life. Back in the late 90’s to early 2000’s websites were messy roommates, so clutter was in vogue. Sites with banner ads flashed everywhere, reminding you of the halogen glow of 80’s Hong Kong. If a site wasn’t Ad-heavy, it had text spilling off the pages.
是的,如果您是大学二年级的学生,可能会。 那只是宿舍生活。 早在90年代末至2000年代初,网站都是杂乱的室友,所以杂乱无章。 带有横幅广告的网站到处闪烁,让您想起80年代香港的卤素灯。 如果某个网站不是广告繁重的网站,它的文字就会从页面上溢出。
Now, if you compare almost any current website to another website made fifteen years ago, the biggest difference you’ll notice is the amount of white space.
现在,如果您将几乎任何当前网站与15年前创建的另一个网站进行比较,您会注意到的最大区别就是空白量。
The Nielsen eye-tracking study, conducted in 2005, confirms the importance of whitespace. It found that whitespace allowed participants to increase their reading pace and comprehend more of the text. In this age of information, it’s important that readers feel that a website is a reliable source of information. Internet users no longer have to be convinced of the importance of websites, now we’re connoisseurs.
2005年进行的尼尔森(Nielsen)眼动追踪研究证实了空白的重要性。 研究发现,空白允许参与者提高阅读速度并理解更多文本。 在这个信息时代,让读者感到网站是可靠的信息来源非常重要。 现在,我们成为行家,互联网用户不再必须相信网站的重要性。
Designers have had to clean up websites to keep up with the new trend of minimalism. To continue with the sophomore analogy, it’s as if website designers finally rented their first apartment and went on an IKEA binge. They then became vegetarian, eschewing the fatty distraction of graphics and links for a clean content-focused look.
设计师不得不清理网站以适应极简主义的新趋势。 继续用大二的类比,似乎网站设计师终于租了他们的第一套公寓,然后进行了宜家狂欢。 然后,他们成为素食主义者,避免了图形和链接的过多干扰,以使内容清晰可见。
Now that web designers have embraced whitespace, all websites that use whitespace are user friendly, right?
现在,Web设计人员已经接受了空格,所有使用空格的网站都是用户友好的,对吗?
Not exactly. The problem is that not all websites are created equally. A blog about RV’s doesn’t have to display much information besides the article’s title and some text. On the other hand, news websites like Yahoo! Are still trapped by the need to deliver on-going news on a bevy of subjects. The impulse to fit everything into the home page still stifles the page’s breathing room.
不完全是。 问题在于并非所有网站都是平等创建的。 关于RV的博客除了文章标题和一些文本外,无需显示太多信息。 另一方面,新闻网站如Yahoo! 仍然被大量主题不断发布新闻的需求所困。 将所有内容都放入首页的冲动仍然扼杀了该页面的呼吸空间。
Take the New York Time’s website as an example.
以《纽约时报》的网站为例。
The design is supposed to mimic the fold of a newspaper, but what you get is a lot of noise. The Opinion section defeats the marginal attempt at whitespace. According to the Nielsen study, more often than not, our eyes are not even going to go there, so why detract from the valuable content?
该设计本来可以模仿报纸的折叠,但是您得到的却是很多杂音。 “意见”部分击败了对空白的边际尝试。 根据尼尔森(Nielsen)的研究,通常我们的眼睛甚至不去那里,所以为什么要贬低有价值的内容呢?
There are so many news websites that have done a better job of curating their content for their respective audiences. Here are a few of them:
有那么多新闻网站在为各自的受众策划内容方面做得更好。 这里有几个:
BBC
英国广播公司
The BBC website is the best news website on the web from a design perspective(Yahoo! And New York Times should take notes). A user can scan the page at a glance and catch the most important news of the hour. This organization is achieved using well-measured gutters (web design speak for space between content).
从设计角度来看,BBC网站是网站上最好的新闻网站(Yahoo!和《纽约时报》应做笔记)。 用户可以一目了然地扫描页面,并捕获该小时中最重要的新闻。 这种组织是通过使用经过精心测量的装订线(网页设计代表内容之间的空间)来实现的。
The layout that the web designers used is called the GEL Grid, built with flexbox. BBC outsourced its layout on Github so if you’re looking to implement their design into your own website, you should check it out.
网页设计师使用的布局称为GEL网格,它是用flexbox构建的。 英国广播公司在Github上将其布局外包了,因此,如果您希望将其设计实施到自己的网站中,则应进行检查。
Huffington Post-
赫芬顿邮报-
The Huffington Post is not a real news organization, one can argue. Whether that is true or not, the point here is that the website’s design focus on placing its freshest content right at the top-center of the home page. Top stories fall right into the F shape that most of us read in. starting from the left side of the page. The site’s origination as a blog keeps it grounded and relatable, as opposed to a news site like CNN where text flows under mismatched headlines.
有人可以说,《赫芬顿邮报》不是一个真正的新闻机构。 不管是真的,还是这里的重点是网站的设计着重于将其最新鲜的内容放在首页的顶部中心。 从页面左侧开始,我们大多数人都读入的F形故事成为热门故事。 该网站最初是博客,因此使其与时俱进,而与CNN这样的新闻网站相反,新闻的标题不匹配。
The Atlantic
大西洋组织
Similar to Huff Post, The Atlantic uses whitespace to move its content towards the center page. Though The Atlantic is a bit bloated with content, unlike the New York Times, it varies the way its content is displayed while keeping text size relatively large for readability.
类似于《霍夫邮报》,《大西洋》使用空格将其内容移向中心页面。 尽管《大西洋》的内容有点unlike肿,但与《纽约时报》不同的是,它改变了其内容的显示方式,同时保持相对较大的文本大小以提高可读性。
Tech Crunch-
科技紧缩
TechCrunch, the popular tech news website, redesigned their website in 2016 with an innovative user experience. Articles return you to the main feed when you’re finished with them, allowing for a seamless experience. The designers understood that web surfers these days are content-skimmers. So aside from letting user effortlessly exit articles with an exit button and a transition, the designers organized the main content on the left side of the page.
热门的科技新闻网站TechCrunch在2016年以创新的用户体验重新设计了其网站。 完成文章后,您可以将它们带回到主供稿,从而获得无缝的体验。 设计师了解,如今的网络冲浪者是内容收集者。 因此,除了让用户轻松地通过退出按钮和过渡退出文章外,设计人员还在页面左侧组织了主要内容。
The sticky navigation bar makes category selection a painless process.
粘性导航栏使类别选择过程轻松自如。
AP news
美联社新闻
AP News’ design is highly economical. To avoid the problem of clutter, the designers filed all of the news site’s categories under the Topics tab. The only gripe about the tab design is its far right position. It’s easy to miss, especially if the feature content contains the most polarizing man on Earth.
AP News的设计非常经济。 为了避免混乱的问题,设计人员将所有新闻站点的类别都归档在“主题”选项卡下。 标签设计的唯一缺点是其最右边的位置。 很容易错过,特别是如果专题内容包含地球上两极分化最强的人。
Other than the misaligned tab, the content is a breeze to navigate through. Like TechCrunch, the latest content gets exclusive space, allowing a user to scroll down effortlessly without worrying about missing content along the way.
除了未对齐的选项卡之外,其他内容都很容易浏览。 像TechCrunch一样,最新内容具有排他空间,允许用户毫不费力地向下滚动,而不必担心沿途缺少内容。
Wired
有线
Though Wired is considered a magazine, it beefs its featured content with reels of tech and culture news. There is an elegance to Wired’s design that is unmatched by most news sites. The card design maximizes the amount of whitespace available which in turn draws more attention to the content.
尽管《连线》被认为是一本杂志,但它通过科技和文化新闻来增强其特色内容。 Wired的设计具有优雅,这是大多数新闻网站所无法比拟的。 卡片设计可最大程度地利用空白,从而引起更多对内容的关注。
News websites make for great case studies when it comes to modern content organization. News sites are often the most category-rich and information heavy websites out there which makes designing clean user experiences a tough undertaking. When the goal of whitespace is to minimize distractions, simply adding margins to the sides of the page isn’t enough to create an elegant design. When you know that a user’s attention span is so precious, why spam them with needless content? By subtracting weak content and promoting the most valuable content using negative space, we create a richer experience for all users.
对于现代内容组织,新闻网站提供了很好的案例研究。 新闻网站通常是其中类别最丰富,信息最繁重的网站,这使得设计干净的用户体验成为一项艰巨的任务。 当空白的目标是最大程度地减少干扰时,仅在页面两侧添加页边空白不足以创建优雅的设计。 当您知道用户的注意力范围如此宝贵时,为什么还要向他们发送不必要的内容? 通过减少薄弱的内容并使用负数空间宣传最有价值的内容,我们为所有用户创造了更丰富的体验。
翻译自: https://uxdesign.cc/thank-god-for-white-space-ed29cfc1692d
上帝公式
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274674.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!