上帝公式_感谢上帝的空白

上帝公式

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年代香港的卤素灯。 如果某个网站不是广告繁重的网站,它的文字就会从页面上溢出。

Image for post

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年前创建的另一个网站进行比较,您会注意到的最大区别就是空白量。

Image for post

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.

以《纽约时报》的网站为例。

Image for post

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)的研究,通常我们的眼睛甚至不去那里,所以为什么要贬低有价值的内容呢?

Image for post

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

英国广播公司

Image for post

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-

赫芬顿邮报-

Image for 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-

科技紧缩

Image for post

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

美联社新闻

Image for post

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

有线

Image for post

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,一经查实,立即删除!

相关文章

figma下载_在Figma上进行原型制作的各种触发选项

figma下载Prototypes are model versions of digital products. They’re used to measure usability by testing with potential users of a product. When making prototypes with Figma, it is necessary that the actions that trigger reactions aren’t strangers and th…

通过动画让你深入理解 ES modules

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

海量数据处理之倒排索引

前言:本文是对博文http://blog.csdn.net/v_july_v/article/details/7085669的总结和引用 一,什么是倒排索引 问题描述:文档检索系统,查询那些文件包含了某单词,比如常见的学术论文的关键字搜索。 基本原理及要点&#…

ux和ui_如何为您的UX / UI设计选择正确的原型制作工具

ux和uiAll UX/UI designers might encounter the situation of creating prototypes for wireframes or visual designs. In some cases, you may also receive the need to craft motion designs, for instance, animating icons or illustrations.所有UX / UI设计人员都可能遇…

Vue 性能指标逐渐开始反超 React 了!

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

figma下载_我如何使用Figma,CSS Grid和CSS Flexbox构建登录页面

figma下载I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about one thing, that is, how difficult would it be to expre…

2022年Web平台的新动态

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

【逃离一线】被裁后的面经与感慨

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

使命召唤ios_使命召唤的精巧UI:战地

使命召唤iosWith over 50 million players worldwide it’s safe to say Warzone has become a global sensation. Featuring cross-platform play, multiple game modes, customisation and wealth of features too long to mention here — it’s captured its audience and …

深入浅出 package.json,目测大多数人不了解它

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

鲸鱼网络连接_登陆鲸鱼:在网络上读书,第1部分

鲸鱼网络连接I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in va…

2022年值得使用的 Node.js 框架

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

更改apk安装包对android系统等级要求

此篇文章解决的为问题: █问题1.系统等级与apk等级不匹配. █问题2.更改api等级后的签名问题. 1.工具准备: 解压缩tool.zip文件夹: 2.开始反编译apk安装包 3.切换目录到tool目录下: 4.反编译: apktool.bat d 待编译apk目录名 存放编译后的文件目录 apktool.bat d Onenote_v14.…

推荐一个前端技术选型神器!真好用~

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

静态原型设计 加载中_见解1:原型设计有助于填补静态设计留下的空白。

静态原型设计 加载中In April 2015, I joined the Disney Parks creative team to design mobile experiences for the happiest place on Earth. I learned a lot from a diverse group of humble, creative, and smart people.2015年4月,我加入了迪士尼公园创意团…

最优资产组合步骤_重新设计投资组合网站之前,请按照以下5个步骤进行操作

最优资产组合步骤The portfolio website is one of the most important assets for a designer. Without it, it can be tough to find your next job or client.作品集网站是设计师最重要的资产之一。 没有它,很难找到下一份工作或客户。 The temptation is high …

裁员潮之下,13次面试拿下字节前端岗offer!

|前言很多粉丝私信,这两个月求职没有往年那么好跳,还有不少粉丝已经收到公司的“优化”通知下面分享一位粉丝的最近的面试经历,在疫情裁员潮的环境下,经历了成长、膨胀、闭关打磨等一系列的跌宕起伏,最终拿下字节总包5…

hdu 1754/zstu 3121 I Hate It(线段树)

http://acm.hdu.edu.cn/showproblem.php?pid1754 http://acm.zstu.edu.cn:8080/JudgeOnline/showproblem?problem_id3121 (1)线段树的基本操作:建树,查询,更新。 (2)重新写一遍时,…

sketch放入app组件_使用Sketch App设计CSS网格

sketch放入app组件首先定义您的网格 (Start by defining your grid) Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we…

鲜为人知的CSS实用技巧

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…