网页设计最新趋势

 菜单
  就像段落一样，菜单的大小也大大增加了，你还记得那些2005年带有像素字体的小菜单吗？看起来令人难以置信的是，在几年的时间里，我们已经达到了规模如此相反的一端，时尚是如此变化多端～
  在这种情况下，菜单的大小也受移动模式的影响。在移动界面的设计中，全屏覆盖菜单的使用是常见的，因为界面是基于触摸的，并且较小的触摸目标对于用户而言比较大的触摸目标更难。
  它不仅仅是大小，还有装饰元素，悬停和所有类型的微观互动和效果。
  Bersi Serlini菜单与悬停效果在菜单的启示
  用插图塑造一个独特的声音
  插图是作为一个不同的元素，因为它在文化上提醒我们艺术的独特性。近年来插画在科技行业蓬勃发展的时代，Slack、Airbnb、Mailchimp、Dropbox和WeTransfer等公司都展示了来自不同设计师和艺术家的作品，让用户在等待的过程中更加愉悦，同时也传达了情感和品牌价值。
  更多案例:Illustrations for Slack,Mailchimp,Kikk 2018,Airbnb.design
  如今，与知名插画家合作是一种常见的现象，在设计系统中，插画经常被用作传达信息的一种额外表达方式，我们可以在Slack和Glitch的例子中看到这一点。
  更多案例:Gucci glasses,GLITCH,Mariano Pascual,Eat Genesis

  变量的字体
  可变字体目前没有足够的浏览器支持，但应该在我们的技能列表中学习。可变字体是OpenType字体规范的发展。一个字体文件可以包含多种字体变体。使用CSS可以访问这些变化和样式之间的动画转换。
  在这个例子中，可以看到一个可变字体，我们可以修改weight和serif的参数，这不仅允许创建动画，还允许创建字体的多种变体。
  Variable Fonts，Variable fonts guide
  可以通过压缩或扩展CSS中的字体轴来实现一般的动画，但是它的其他属性将由字体设计器决定。David Berlow设计的Decovar是一个很好的例子，它是一种多风格的装饰性变量字体，用于参数化多个属性。
  基于排版的布局
  排版一直是设计的基础，但现在我们拥有高度的自由，表达和实验，排版正在占据其应有的位置。
  目前，字体的发展趋势很有个性，但这并不是说要选择字体或它们的组合，而是使用“单词”作为美学和语义的主要元素。文字现在在设计中有了实体的存在，这是一个结构元素，其余的组成部分围绕着它流动。
  “与其说是选择字体或它们的组合，不如说是使用“单词”作为美学和语义的主要元素。”
  排版突出显示的用途和效果之一是将字体作为图形元素处理，应用变形、效果和动画，以及将不同的样式和权重与粗体、斜体、衬线、无衬线相结合，并在同一段落中愉快地概述了所有这些元素。
  更多案例：Beyond Beauty,Agnes Lloyd Platt,Louis Ansa,Aristide Benoist
  修饰、扩充和大段文字
  段落不再受简单列分布或包装几何形式的限制。未来的段落设计是更大的，充满了悬停，表情符号，图片，样式的变化，和陌生的分布。
  动画：次要元素和有机运动
  动画次要元素是在不消耗过多资源的情况下在视觉上丰富网站的方法，这可能导致加载时间增加。这些动画通常构成微交互的一部分，创造流畅的用户体验。
  借助Lottie和Bodymovin等工具，流畅，有机和更复杂的动画栩栩如生。当然，CSS和Javascript为动画界面提供了许多可能性，它们提供了很多参数控制，缓和曲线，混合模式，滤镜，svg变形等，但需要很多技巧。
  使用有机变形动画的矢量元素，在界面和微交互中模仿液体或粘性效果，当然排版也不能免除这些类型的动画和变换！
  可爱的微交互和迷你游戏
  正如之前提到的，需要以更通俗的方式表达，这是许多品牌的声音和基调的一部分。这种需要在一般文本，微观图和动画微交互中的小细节中体现出来。
  在UI动画和微交互中的Femme插图微交互
  更进一步，增添一丝幽默和趣味，我们发现迷你游戏，作为一种资源，用于在内容加载时让用户更加愉快，同时展示设计师或开发人员的技能，他们与用户建立密切和有趣的联系。
  野蛮主义和主义
  在我们的布局、文本和交互中流动，风格已经逐渐完善，为了界面的可用性而逐渐完善。
  Search filter and colorful product scroll navigation In Brutalism
  图像效果、变形和波浪效果
  “GLSL着色器意味着，创建的所有页面都必须在某个地方包含某种扭曲或影响。”
  Zoom transition In Filters and Effects
  按住
  这是有史以来最隐蔽的导航。永远不会有更令人不舒服的互动，当你次看到它时看起来很有趣但是当新奇用完时它就不再有趣了。在可发现性方面的按住是一个糟糕的决定。总之，虽然它已经在一些实验性的网站上出现过，但它不应该成为一个共同的趋势。
  独立设计师时代+创意开发者
  在这些独立设计师或创意开发人员中，发现基于细微交互方式的图像，排版和小细节的最小组合。
  自定义光标和鼠标效果
  自定义光标已经发展并且被用作新奇事物，通常根据它们重叠的元素混合效果来修改光标的颜色和不透明度。这些“反应性游标”响应于其他元素或用户的动作而改变形状，大小，不透明度，颜色或动画。有机运动是光标复出中看到的另一个共同特征。
  排版跟随光标-ContraryCon In Hovers，Cursors和Cute Interactions

  混合滚动
  我们一直看到的最常见的事情是使用长滚动的布局，但是使用分割的部分，而不是纯粹的“单页面布局”，内容的某些部分是分开的。他们还保留了诸如视差之类的微妙效果，当然还有大量使用滚动触发动画和滚动显示的内容。
  在badass.shoes-up.com中，我们看到了不同方向的滚动的说明性示例。它的导航结合了垂直滚动和水平滚动的单页布局。
  在导航中混合水平和垂直滚动
  1配色方案
  这种趋势是配色方案本身以及它作为主要设计元素的使用方式-谈论的是具有在整个产品体验中始终如一地应用的个性的配色方案。
  一般来说，我们看到的方案有两种或三种原色和各种二次色。饱和和柔和的色彩相结合，为醒目的高对比度效果让路。背景中有许多简单大胆的颜色与摄影，排版和插图相结合的例子。
  Frans Hals Museum by Build in Amsterdam
  混合2d和3d元素
  3D动画在过去几年中对设计产生了很大的影响。Blender或Cinema 4D等软件使其可供大量广告素材使用。VR，AR和3D打印正在重新激活3D数字内容的制作。
  视差效果使用由不同Z轴的2D平面构建的假3D。在CSS动画中很常见的是模仿这种三维效果。这种趋势的基本思想是搜索对比度，平面颜色上方的3D元素或2D平面创建3D假场景，为几乎单一的图像提供位置。
  编辑风格的布局
  由于CSS网格和flexbox的逐步标准化，我们正在实现更“自由”的布局，这些布局不受限于必须在其响应断点的不同列中重新构建的网格。我们应该放弃响应式网页设计的幻想，没有人希望单个设计能够以灵活的方式响应10个设备。
  AI，PWA，用户体验写作，语音界面等等......
  1用户体验写作，微观和品牌个性
  在过去几年中，我们目睹了公司,企业的信息和交流方式发生了重大变化，语音和语调已成为基础。品牌正在尝试使用更人性化的口语-更能让人联想到与朋友交谈而不是与客户打交道。
  以前看不见的微缩胶片现在具有专为品牌设计的声音和色调，并经过精心设计，以保持整个用户体验的风格和连贯性。
  幽默是这里的关键，因为它是一种与用户同情并在网站上花费时间尽可能愉快的特殊方式。
  用户体验师扮演着非常重要的角色，负责使网站易于理解，帮助用户完成任务，在尝试实现其主要目标时发现他们遇到的界面，内容和其他所有内容，这通常是消费产品或服务。
  1PWA是新的响应式网页设计
  我们可以正式说PWA是新标准，类似于新的响应式网页设计，因为它们代表了进步。移动版本不是简化版本，它是一种不同的体验，可以进行优化以获得良好的性能，索引和转换。
  渐进式网络应用程序允许开发人员和设计人员使用全屏和自定义导航栏，自动更新，不加载其他URL的部分之间的过渡，主屏幕中的访问图标以及能力，基于典型的本机应用程序体验的Web技术创建应用程序脱机工作并接收通知。
  但的是，他们保持搜索引擎优化和索引等网络应用程序的积极特征，与Google Developers Team合作阅读我们的书“渐进式网络应用程序-移动网络的未来”。
  设计系统
  随着越来越多的公司意识到使品牌的每一个数字表现形式具有可扩展性和凝聚力的好处，设计系统将继续普及。它们是设计团队的基本工具，允许开发人员之间的沟通。
  一个设计系统是一个宣言的设计的各个方面，并在创建新的内容重用元素和隐含的过程迭代任务。它涉及诸如复制，声音和音调，动作等的书写风格之类的点。设计系统伴随着风格指南和模式或组件库。
  模式库收集图形用户界面的所有元素，如按钮，表单字段，警报，每个元素的悬停状态等。
  该风格指南收集的排版，重量和尺度，利润率，填充，网格，图标和调色板的所有用途。这些定义包括应用于每个元素的CSS样式，因此可以与前置者直接通信，并且更容易进行未来的更改。
  AI Everywhere，设计隐私和安全
  人工智能算法只需要100个喜欢就像你的母亲一样准确地预测你的个性。中国人工智能公司SenseTime一直在大规模扫描和分类人口，他们甚至设法通过实时面部识别系统在音乐会上扣留违法者。AI已经无处不在，因此我们确实需要在人工智能的所有用途中设计隐私，安全和透明度。
  我们已经看到了黑暗模式的情况，我们可以在这种情况下与机器人交谈，或者让AI助手在没有意识到的情况下执行我们的个人任务。大公司正在申请专利制度以优化其宣传回报，以不加区分和不安全的方式使用我们的个人详细信息，而机器人也被用于通过操纵选举等来影响公众舆论。
  正如在电子书“AI驱动设计”中看到的那样，有很多AI出错的例子。但是，另一方面，我们有许多积极的例子，例如LYNA，它使用谷歌计算机视觉来检测乳腺癌，正确识别99％的病例中的转移模式，而人类病理学家发现的这一比例为62％。
  通过Web技术进行机器学习
  通过机器学习了解什么是模型？如何从ML开始？它是如何训练的，如何实施它？幸运的是，今年已经充满了人工智能网络实验的例子。TensorFlow.js是一个非常强大的工具，基于Node.js.可以使用现有的javascript ML模型，甚至创建自己的模型，通过使用来自直接连接到浏览器的传感器的数据训练或重新训练现有模型。
  移动镜子。根据您的动作查找图像
  虚拟助手
  今年，虚拟助手已经抵达群众，并将自己定位为消费产品。Siri和Google智能助理已广泛应用于移动设备，并已转变为即将成为必不可少的电器。Google Home，尤其是Alexa正在开发庞大的生态系统，使我们能够与他们进行互动并将其整合到我们的产品和服务中。
  根据亚马逊的这份报告，从2018年9月1日开始，已经开发了超过50,000个Alexa技能。
  由于移动设备是我们用来访问互联网的主要设备，因此演进到语音命令界面将是一个简单而自然的下一步。在移动键盘上引入文本既复杂又繁琐，并且会产生许多错误。
  未来是3D
  在过去的几年里，3D资源的股票和社区已经大大增加，他们的未来更加光明。这是因为移动应用程序市场的游戏创建，通过Cinema 4D，Blender和Unity等工具轻松实现，3D打印的出现成为其增长的另一个触发因素。今天有许多社区，例如Sketchfab提供了大量资源来下载，购买和销售可用于任何媒体，WebGL，游戏和3D打印的模型。使用VR工具创建了无限的场景。
  增强现实转型和内容创作者的天堂
  现在我们面临着一个重要的挑战，即为我们新的增强世界提供高质量的内容。对于我们来说，作为数字创意，它是一个神话般的情况。“未来得到增强”，我们周围的每个元素都将拥有各种各样的信息，我们用不同的信息层和互动复制世界。
  诸如AR，VR及其融合混合现实（MR）和扩展现实（XR）等技术将添加更多层信息，这些信息在设计界面和内容方面需要大量工作。简而言之，是创作者的黄金机会。
  更少的应用程序和更多的平台集成
  虚拟助手减少了必须管理的应用和平台的数量。很快将拥有“技能”和更全面的任务，这将节省大量时间。通过API与所有这些平台进行通信，并向未来展望内容将更加独立于设计。
  语音命令接口
  语音命令接口或会话设备是相关的，因为它们减少了交互的时间和精力。使用语音命令，我们可以登录到平台，省去了记住和输入密码，浏览应用程序，了解其界面，内容结构等等的麻烦，很快我们就能够配置数百个动作并使用简单的单词作为一个触发器。
  视觉搜索
  相机是新的搜索框，许多应用程序最终将推出已在Snapchat，Pinterest Lens，AliExpress和Google Lens中找到的搜索系统。
  2014年，亚马逊凭借其Flow功能成为视觉搜索领域的先驱。目前无效的Flow使用图像识别来寻找产品。
  作为AR早期采用者，Snapchat不会错过视觉搜索。2018年9月，它宣布与亚马逊进行战略合作的新功能。这个新的Snapchat功能允许用户使用相机“扫描”条形码。当结果为肯定时，其他产品信息将以亚马逊卡的形式与其他类似产品和购买按钮一起显示或“增加”。