发布时间：2023-10-27 02:42来源：www.sf1369.com作者：宇宇
设计分屏布局时需要注意的事项
如果您正在考虑为您的网站使用分屏组件，那么在设计时应当牢记这三个提示。
1、移动友好。拆分屏幕组件确实有一个优点：它们不太适合移动设备。很难让他们做出响应并适应更小的屏幕，你几乎肯定不得不缩小到更温和的东西顷芹派，可能需要比平常更多的代码，所以请确保你采取移动优先的方法。
2、没有好的原因，不分割屏幕。你应该首先考虑你的网站是否需要一个分屏组件。当然，它是'趋势'，它看起来很酷，但单是没有足够的理由还是不要轻易尝试它。
3、是否值得额外的工作使组件响应？
你的用户有足够的趋势意识来欣赏布局，还是会混淆它们？是否有足够的负空间使布局工作？你是否有可能将你的用户的首则注意力分成两半，更单一的焦点会是一个更好的结果吗？如果任何这些答案是否定的，那么你应该投票反对这个想法。
4、利用负空间
桌面网站水平显示，但是当使用分屏布局时，每个组件在主视口中雀贺成为一种垂直视口。因此，有更多的机会来探索显示内容的新方法。 这绝对是一个有创意的机会，所以坚持你的创意上限！
为什么了解网页布局很重要？ 网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。
这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！
卡片式布局被Pinterest、脸书和推特等网站所使用，它非常适合在新闻网站和博客上使用，因为 卡片式布局可以在页面上放置大量内容，同时又保持每部分内容各不相同。
卡片式布局主要有两种形式：
网页中每个卡片的尺寸相同，卡片的排列非常标准，例如dribbble、UI中国的网页布局；
使用不同尺寸的卡片组成页面的布局，卡片间没有固定的排序，例如铅昌仿Pinterest、花瓣的页面布局。
当两个元素在页面上具有相等的权重时， 分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。
分屏设计特别适合电子商务网站上的产品页面。 产品图片需要在页面上突出显示，但价格、规格、购物车按钮等信息也要显示。
随着移动设计的盛行，大标题排版变得流行槐纤起来。大号字体在标题中特别流行，在一些网站的正文中也能看到。
较大的文本更具可读性，可以改善使用体验。 另外它还提供了强大的视觉效果，因此这种布局在极简主义设计中特别受欢迎。
个性化算法推荐可以根据每个人的喜好量身定制数字体验。 人工智能技术的发展让算法变得更易用，能精确分析用户的喜好。
根据用户之前的订阅习惯，Netflix可以为用户个性化推荐他们最有可能观看的电影。
像Medium这样的网站会基于用户以前阅读和喜欢的内容，向他们展示很多同类型的文章。
网格为设计提了视觉上的平秩序感， 以一种平衡且有组织的方式呈现内容，使内容更易于人们使用。
在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。
杂志和期刊的布局方式影响了网络杂志的版面设计。 这些网页布局很适合有大量内容的网站，尤其是每天都需要更新内容的网站。
单页布局将网站的所有主要内容放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。
对于内容稀疏的网站，单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择，比如交互式儿童读物。
F型和Z型布局是指用户的视线如何在页面上移动，即用户如何扫描内容。F型布局有非常明确的视觉层次结构，因此适合迅返内容更多的页面。
Z型布局将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。
在设计中，不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。
由于不对称会产生动态的、充满活力的视觉印象，因此对那些想要传达这种形象的品牌来说是非常有用的。
这种布局的优点在于完全专注于内容，没有视觉上的混乱。
干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”，无论它们包含什么设计形式。
导航标签适合用于包含少数项目的菜单，否则导航会显得很混乱。
轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。
好的网页设计具有很强的适应性并且对用户来说始终是友好的。
遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。
精彩推荐：
1、聊聊卡片式设计的运用
2、案例分析：栅格系统的布局设计
3、如何设计深色模式？这3点因素需要考虑
4、深度解析：服务蓝图的应用逻辑 设计
设计出不同凡响的网站是许多设计师一直追求的事情，所以大家着迷各种时尚的元素，漂亮的配色，流行的趋势，复古的样式，等等。经过时间验证的经典设计、固定的搭配是不错的选择，而逐步展露头角的新趋势，则能更好的满足这一需求。
一种全新的设计手法，融合了最新的设计技巧，展现和前人不同的气场，用更现代的气质来承载内容，这样的伍州网站无疑会更加吸引用户，让访客难以忘怀。今天要聊的三种设计趋势其实已经出现一阵子了，但是作为一种相对综合的设计手法，他们并没有引起广泛的。只需要使用现有的元素、色彩和排版手法，就可以实现这三种设计效果，但是它们不论是从美学特征上，还是从功能性上，都不输于其他的趋势。有兴趣么？不妨来看看吧。
双色调配色方案
双色调配色已经存在很长的一段时间了，单我们几天所说的双色调方案是在全屏设计背景下，加入渐变效果和高冲击力视觉设计下的双色调配色方案。在扁平化的大势之下，Spotify 大范围使用双色调配色，将这一设计手法推到了潮头。
那么双色调配色具体是怎么一回事呢？
简单说来，是两种色彩来构成者手一套配色。最常见的双色调配色会选择互补色来进行组合。在更复杂的场合中，会使用其他的组合来营造特定的感觉，打破约定俗成的配色风格，可能会有惊喜。
大多数双色调效果是使用一个色彩鲜艳的色调叠加在照片上实现的，强化深浅色彩对比，从而营造出色彩冲击力。Shopify 对于这种手法的运用非常的纯熟，在恰当的排版设计搭配下，将数十位设计师照片以这种独特的方式展现出来。
从技术的角度上来看，双色调配色可以同许多其他的设计手法、技术一同搭配使用，比如全屏设计，比如响应式设计，比如插画，正如同上面的那些案例中的诸多技术一样。除了独特的视觉效果，它可以用来强调，对比。这是一种非常强的表现手法，用的时候记得适量使用。
分屏式设计
分屏式的网页设计案例正在成倍增长。从技术上来讲，这类网页的设计师喜欢将屏幕均分为并排的两个区块，两者尺寸大小都一样，有的时候还会加上轮廓来强调区域的概念。
这样设计的效果是很酷炫的，在代码编写到位的情况下，网页在桌面端打开的时候，两个区块并排显示，而在移动端上，并排的区块智能地以上下堆叠的形式呈现出来。
分屏是设计的使用其实是可以嵌套细分的，它可以是简单的对半分，也可以套个栅格，无限分割下去，这样的案例非常的多。被划分的区块可以承载相似的、对比的内容，也可以承载截然不同的媒体类型，而栅格式细分的区首橘嫌块还能帮助网站的设计者探索用户真正感兴趣的内容。
分屏式设计对用户是友好的，和响应式设计可以很好地结合起来，同时还可以加入更多的新技术和设计手法。
下面是一些高效分屏的技巧：
·当你没有太强的视觉设计之时，注意字体和色彩的搭配
·吸引用户的注意力让他们从左向右看，从而引导用户的视觉运动。
·使用色块来分割屏幕，为主要信息留下足够的空间，确保整体的可读性。
·将分屏视作为超大的卡片。将不同的内容制作成更小的区块，在大的卡片中组成马赛克。
·尽量确保每个区块中内容的简单易读。
你可能在其他地方看到过这个趋势：文字排版被延伸到了共享的设计空间。在绝大多数的网站中，图像、背景和文字是最主要的元素，它们要么相互嵌套有机组合，要么相互分离。
但是越来越多的设计师开始试图打破元素之间的界限，不同类型的视觉元素打破固有的位置，进入其他元素的空间，堆叠，交叉，错落。看起来还是非常有趣的。
但是考虑到整体的可读性，这种设计还是相当具有挑战性的。
要使用这种设计技巧，最好搭配以简单的排版。文字应当同其他的元素有足够的对比性，从而确保它在横跨多个不同元素的时候，保持基本的可读性和辨识度。这也使得绝大多数这类网站都倾向于使用黑色和白色的文字。
字体尺寸也是一个值得注意的属性，它和色彩控制同样重要。你还需要注意文本部分在不同尺寸的屏幕上的显示和运动，也就是响应式变化中的断点。
在诸多设计案例中，最值得注意的是Deux Huit Huit 。横跨首页主图的文字的运动方式，当它穿越图片、背景的时候，是如何确保它的可读性的。
各种各样的设计趋势很多，许多趋势在你刚刚了解它们的时候就已经过时了，那些真正站得住脚的趋势大多能同其他的技术、趋势、设计手法能很好的兼容、搭配。而今天我们所说的三个趋势正好符合这一特征，它们能够兼容现代的风格，流行的布局与开发框架，更重要的是它们能看，够看，好看，也不会破坏你的审美。
实现它们并不难，更新、替换、删除也不是麻烦的事情，如果你看厌了现在的网站首页，不妨试试这些新东西，也许能让你心情更好，让用户获得惊喜。
webdesignerdepot
译文地址：优设
作者：Carrie Cousins
优设译文：@陈子木
