网页设计□□□行业发展□□迅速，我们不断□□□□看到新的·设计和产▲品。为了展示□□□他们的作✦品并培育□□□□社区，许多设计□□□□师非常乐□□意在网上◣分享他们□□□□的经验。以是2022年上半年网□□□页设计的10多个趋，包含了最□□□受欢迎网□□□页设计、最佳网页□□□设计、视觉层次◥设计等。
1、最小和舒适
少即是多：极简主义□□□趋势继续□□□□出现更多□□□空白。尤其是用□□于干净、多用途的★多功能设※计的白色□□□空间。舒适是通•过缓慢但□□详细的动□□□□画来实现□□□□的。屏幕上的□□□短重点粗□□体内容。这样可以□□□确保访问◣者第一眼□□□就收到您□□□的信息。如您所知——“第一印象□□持续时间□□更长”。
2、未来主义设计
设计师在◇未来主义□□设计中超□□□□越了电影。滚动浏览□□□顶级设计，我们每天□□都会遇到□□□展示伟大□□技术或数□□据可视化□□□的作品。在过去的 2 年中，数据点已□□□□增长到 20 倍，因此难以□□分析。但是现在□□□□我们有了□□□解决方案。
3. 自定义插图和视频
图像传达●的信息价□□□□值千言万□□□□语。与此同时，它们节省□□了空间并□□引起了用□□□户的兴趣。视觉效果□□的处理速□□度比文本□□□□快 60,000 倍！人们记得□□□□他们听到□□的 10%，他们读到□□□的 20%，他们看到◎和所做的 80%！为了说服□□您，Instagram 上每个关□□注者的参□□与度是 Facebook 上的 58 倍。
根据一项□□□研究，在至少有□□□□一张图片□□或视频的□□□□页面上，网站停留□□□时间增加□□□□了 100%。更令人印□□□象深刻的♦是，购物者在□□□观看演示□□后购买产□□□品的可能□□□□性增加了 85%。如果您需▲要示例，请查看 Invision 的 youtube 频道。
4. 额外深度的阴影
阴影会产□□生深度错□□觉，这使它们□□□□成为设计□□界的最爱。有了它，您可以将△平面设计□□转换为半□□□□平面。在您深入□□研究之前，您应该阅□□读《光与影设□□□计》（ Designing with Light and Shadows
您可以对◤以下内容○使用阴影□□□□和颜色（略有不同）：使 CTA 在准备好★被点击时□□□显示为凸□□□起；在元素之□□□□间建立视□□觉层次结▽构。注意：不要过度□□使用阴影。
5. 响应式网站和icon
2018年移动端超♦越了pc电脑端 。谷歌转向□□□□移动优先◎搜索。Web 开发人员□□□现在对响□□□应式 Web 设计感到□□□满意。现在你也□□可以在标◉志设计中□□□看到这种★舒适感。在 2018 年，响应式网□□站和徽标◥是品牌在□□□目标受众□□面前保持□□□□其存在的□□必要条件，无论他们□□□□使用何种□□□设备。
6. 最小的摄影棚拍摄
具有纯色□□□背景（负空间）的图像，专注于特❖定细节。他们最擅◉长将用户□□□的注意力□□□吸引到特□□□□定项目上。多稳定性•是其背后□□□□的原则。你一次只□□能看到一□□件事。不允许有□□□□任何例外。这个技巧丨在电子商◥务行业中□□□□被大量使•用。现在网页□□□□设计师正□□□□在采用它□□□来增加 CTA。
7.更多的负空间
负空格是△内容周围▽或内容之□□间的空格。它可以是□□□任何颜色。负空间的•使用是艺□□□□术构图的□□□□关键要素。网页设计□□师大量使□□□用负空间☆来吸引用✦户注意独□□□特的东西。你猜怎么□□□□着？
你明白了，它就是你□□□□的产品和◆优化的 CTA。设计师使□□用戏剧性□□的负空间□□□来创建焦□□□□点。吸引并吸□□□□引我们注□□□意力的兴□□□□趣点、重点或差◈异。
8. 动画、GIF 和电影
运动比其□□□□他任何东□□西都能更□□□□快地吸引□□用户的注□□□□意力。用户喜欢◆看故事，不想看。Instagram 成功背后□□的原因。我们看到□□沿相同方□□□□向移动的▲元素比那☆些静止或♦沿相反方•向移动的◢元素连接◢得更多。使用动画、Gif 和电影图□□□像创建引□□□□人注目的□□□□登录页面、横幅、新闻通讯□□□□等。由于您已□□经使用社□□交媒体，因此您将◥熟悉这三□□个术语。使用集成◢动画来引□□□导您的用□□□□户完成导□□□航、加载屏幕□□□□等。
9. 微交互
它们无处□□□□不在——我个人喜▲欢它们。它们与动□□画不同。我很难解□□释其中的□□□□区别，您可以在□□□下面看到□□□一个示例。微交互也□□可用于创○建高度动□□□态的用户□□□□界面。用户不需□□要访问和□□□□滚动页面。
10.明亮的渐变和鲜艳的色彩
渐变回来□□了：很长一段□□□□时间后又□□□回到了网□□□络上。具有可区□□□□分颜色的□□□□渐变 2.0 正在变得□□流行。从 Spotify 到 iPhone X ，您可以在□□□任何地方□□□看到它们▼的使用。由Leo Natsume设计的Nike Free Design Awwwards刚刚发表◣了一篇文□□□□章总结了□□□□网页设计□□中的时尚□□□渐变。这表明他▼们正在统□□□□治网络。
11. 大胆而有创意的排版
网页设计□□师正在将□□□□排版变成♦创造令人□□□□兴奋的创☆新艺术品□□□的工具。在 2022 年，网页设计□□□□不会围绕◢几个错别□□□□字展开。使用了 5-6 个拼写错□□□误的组合。超大尺寸✦字符正在◢替换图像。2018 年将为设计◤趋势带来□□□大而大胆□□□□的错字。
Willie.H的风景插图
12. 粒子背景
您的网站◤必须在两□□秒钟内加□□载，否则 40% 的用户会♦离开。所有流行□□□□的 SEO 博客都这▲么说。每延迟一□□□秒，客户满意□□□□度就会降□□□低 16%，销售额会□□□降低 7%。速度和粒□□子背景有❖什么关系？答案很简□□□□单。粒子背景□□加载速度□□□更快，干扰更少，并且引人◆注目。这避免了□□□□视频背景□□带来的所□□□有可能的□□□□问题。
13. 使用分页设计创造更多空间
双倍半价：将页面分□□□□成两部分□□可以将内□□□容分组到□□语义区域。例如从图□□像中分离□□文本等。Divan Raj的博客的✦折叠折叠□□设计这样◎您就可以☆在同一页□□面上显示□□□□更多内容，而不会影◢响用户体□□验。
14. 单色和混合图标
单色图标□□□□易于阅读。多于一种□□□□颜色可用□□于带有轮□□□□廓的图标，其中留有□□□空白。这些图标□□□□并不重。
15. 讲故事留住用户
讲故事是联系和留住用户的最佳方式。认知心理学家杰罗姆布鲁纳建议以故事形式传递的内容比单纯的事实更令人难忘22倍。大品牌在这方面做得很好。您可以使用插图或界面向观众讲述您的故事。介质的选择取决于您。Seung Uk Hong的角色和插图
16. 准备好您的内容打印
无论我们□□如何数字□□化，印刷品都□□□是你不能□□忽视的。我自己打□□印似乎有□□□用的内容。浏览器中□□的阅读模□□□□式使用您□□□的打印 CSS 来显示内▲容。最好将其□□□□添加到您□□的可用性□□测试列表□□□中。
这篇文章□□中使用的□□所有图片□□□都链接到□□原始来源◢和设计师。感谢您的□□阅读，如果您喜□□□□欢这个系□□列并发现○它很有用。这会告诉□□□□我们写更□□多！另外，留下您宝□□□□贵的反馈□□□□意见以进□□行改进。
