5种设计大型视图的方法

网页设计师通常都是大局观的人，因为他们喜欢在他们面前有真正的大屏幕。它很方便，而且让你觉得很专业。在我生命的这个阶段，我认为我也不可能回到只有一台显示器的时代。然而，我发现许多网站并没有达到大屏幕的潜力，甚至没有达到高清手机的潜力。这是因为我们生活在一个以移动为先的世界，以移动为先的人。他们去遥远的异国他乡，比如“外面”，所以他们必须随身携带他们的屏幕。外部的人几乎直接或间接地支付我们的账单，我们必须让他们能够在这些小屏幕上真正使用我们的网站。这一切都很好，而且不会很快改变。但大屏幕也不会消失。人们仍然在办公室、家里、咖啡店里用笔记本电脑和台式电脑工作。人们仍然有“家庭电脑”在家里。电脑游戏玩家是存在的，他们正在购买一些最大的屏幕，就在摄影师和摄像师旁边。这些人的体验通常是专为中到小屏幕设计的。这可能不会破坏他们的体验，但是为什么他们不应该有一个适合他们需要的体验呢?除此之外，如果不去玩的话，那些额外的屏幕空间还有什么用呢?下面是一些利用大屏幕的方法，以及一些例子:字面上的大图片人们试图利用空白空间的最常见的方法之一是把图片放在里面。我们都见过十万亿网站(我可能有点夸张)使用一些图片作为背景，特别是在主页的“英雄”部分。这是无处不在。你做过，很有可能，上帝知道我也做过。这并不是最糟糕的方式，也不是最好的。尽管图像压缩越来越好，但这些图像仍然会在带宽、缓存或不缓存方面影响您。如果您想为自己和CDN省去一些麻烦，请使用SVG。我知道，我一直这么说，但它真的很有效，很神奇。有关如何使用简单SVG图像填充空间，同时保持带宽和呈现成本较低的示例，请参见bebold。我们都知道响应式设计是如何工作的，对吧?使用CSS网格会简单很多。我一直在用它做个人项目，但它真的改变了一切。那些前端开发人员几十年来一直在尝试的杂志式布局?现在他们很容易。一件容易的事。已经开始阅读教程了。在剩下的时间里，为什么不看看当中央包装div宽度超过1200像素时可以做些什么呢?可能会很有趣。要获得一个绝对漂亮的(如果有些带宽过重)示例，请参见seedlip3。响应类型，但是，嘿，有时你不想花那么多时间在图片上。也许你只是想要大文本。尽管如此，多年来我们已经对响应式布局进行了多次迭代。更难的是按屏幕分辨率上下伸缩字体，使其看起来自然流畅。当然，您可以通过几十个媒体查询来实现这一点(如果您像我一样懒的话，也可以通过两个这样的查询)，但是如果我们想以一种简单的方式来实现这一点，CSS calc函数已经为您介绍过了。当然,克里斯Coyier一直在写关于这个自2012年以来,但浏览器支持并不总是达到标准。我很喜欢迈克Foskett Fluid-responsive字体大小计算器使用的技术,它允许您指定一个最大的字体大小,可以计算出所有在雷姆和ems,如果这是你想要的方式。有关实际使用的技术的示例，请参阅关于css - bits的任何文章。只是把更多的东西放在屏幕上作为一个公开的极简主义者，我不喜欢只是用信息轰炸用户。然而，有时这正是他们想要和需要的。这种方法最清晰的用例是仪表板风格的用户界面和普通的旧式电子商务。在这两种情况下，如果您没有为功能和/或产品使用最大的潜在空间，那么当用户不想慢下来时，您实际上是在让他们慢下来。大多数仪表盘设计人员已经，嗯…然而，我看到越来越多的电子商务网站模板试图将产品塞进大屏幕上的小区域，这对我来说毫无意义。例子:我不知道……亚马逊?我不打算把它们联系起来。无论如何，他们最终会得到我们的流量。实际上，前面提到的种子唇对这个部分也很有效。现在，我反对这种方法的地方是在新闻网站上，他们似乎普遍同意我的观点。虽然有些仍在使用全屏，但它们使内容足够大，使视图中没有太多内容

Web designers have typically always been big-picture people, in that they like having really big screens in front of them. It’s convenient, and it makes you feel very professional. At this point in my life, I don’t think I could go back to having just one monitor, either. And yet, I find that many websites don’t live up to the potential promised by big darned screens, or even that presented by phones with HD resolutions.This is because we live in a mobile-first world, with mobile-first people. They go to far off and exotic places like “outside”, so they have to carry their screens around with them. Outside people pretty much pay our bills—whether directly or indirectly—and we have to make websites they can actually use on those small screens.That is all well and good, and it’s not going to change any time soon. But big screens aren’t going anywhere, either. People still work in offices, at home, and in coffee shops with laptops and desktops. People still have “the family computer” at home. PC gamers exist, and they’re buying some of the biggest screens, right alongside photographers and videographers.These people are often left with experiences designed for mid-range to small screens. This likely doesn’t break the experience for them, but why shouldn’t they have an experience tailored to their needs? Besides, what is all that extra screen space there for, if not to play with it? Here are a few ways to take advantage of the bigger screens, along with some examples:1. Literal Big PicturesOne of the most common ways people try to use up the empty space is to put pictures in it. We’ve all seen the ten-trillion websites (I may be exaggerating) that use some stock photo as a background, particularly in the “hero” section on the home page. This is everywhere. You’ve done it, most likely, and God knows I’ve done it.It is not altogether the worst way to go about it, and it’s not the best. While image compression is getting better and better, those images will still hit you in the bandwidth, caching or no caching. If you want to save you and your CDN some trouble, go with SVG. I know, I keep saying this, but it really works, and it works wonders. See bebold for a picture-perfect (heh) example of how to use simple SVG imagery to fill up some space while keeping the bandwidth and rendering costs light.2. Scaling the LayoutSo we all know how responsive design works, right? Well, it’s gotten a lot easier with CSS Grid. I’ve been experimenting with it for personal projects, and goddamn but it truly changes everything. Those Magazine-type layouts that front-end developers have been trying to make work for decades? They’re easy now. Easy. Go read a tutorial already.With all that time you have left over, why not see what you can do when you let the central wrapping div go wider than 1,200 pixels? It could be fun. For an absolutely gorgeous (if somewhat bandwidth-heavy) example, see Seedlip.3. Responsive TypeBut hey, sometimes you don’t want to bother so much with pictures. Maybe you just want big darned text. We’ve had various iterations on the responsive layout for years, though. What has been harder is scaling our typography up and down by screen resolution in a way that seems natural and fluid. Sure, you can do it with a few dozen media queries (or like two, if you’re lazy like me), but the CSS calc function has us covered if we want to do it the easy way.Sure, Chris Coyier has been writing about this since 2012, but the browser support hasn’t always been up to par. I quite like the technique used by Mike Foskett’s Fluid-responsive font-size calculator, which allows you to specify a maximum font-size, and can calculate everything in rems and ems, if that’s the way you want to go.For an example of the technique in action see any article on CSS-Tricks.4. Just put More Stuff on the ScreenAs an avowed minimalist, I’m not a huge fan of just bombarding the user with information in general. However, there are times when this is exactly what they want and need. The clearest use cases for this approach are in dashboard-style user interfaces, and plain old e-commerce. In either of these cases, if you’re not using the maximum potential space for functionality and/or products, you’re actually slowing the user down when they may not want to be slowed down.Most dashboard designers are already, well…on board. However, I’m seeing more and more ecommerce site templates trying to cram products into small areas on big screens, and that makes little sense to me.Example: I dunno… Amazon? I’m not going to link that. They’re going to get our traffic eventually in any case. Actually, the aforementioned Seedlip works very well for this section, too.Now where I object to this approach is on news sites, and generally they seem to agree with me. Although some are still using up the full screen, they make the content big enough that there’s not too much in the viewport at any one time, encouraging you to scroll down and really pick and choose your articles. Sure, they do it to display more ads, but this might be one of the few times ads have actually helped to improve an experience. Kind of.5. VideoAnd lastly, a real no-brainer. I’m not actually sure anyone’s doing this one wrong. Still… if you’re going to use video extensively on your site anyway, and you’re not too fussed about bandwidth, go big. It’s video, that’s what it’s for. If nothing else, at least give people the option to watch your videos in full-screen mode. For examples of this tip in action, see just about any filmmaker’s site. Here’s one: +Ring.