网络在2019年已满30岁。在过去的三十年中，它改变了我们的世界，这是其他任何技术都没有的。它使我们有能力建立我们从未想过的经验。作为创建者蒂姆·伯纳斯·李（Tim Berners-Lee）的诞辰纪念日，他说：“网络已经变成了公共广场，图书馆，医生办公室，商店，学校，设计工作室，办公室，电影院，银行，还有更多。”
但是不幸的是，网络的许多负面影响也已经发展，这是任何人都无法预料的。与往常一样，强大的力量伴随着巨大的责任-2020年，更多的设计师和开发人员将这一点铭记在心，并专注于修复Web。
提供全方位服务的创意机构上野（Ueno）的创始人兼设计总监Haraldur Thorleifsson叹息道： “我们之所以出售网络，是因为它可以使我们团结在一起。“但我认为它在许多方面都相反。我们之间的联系越来越少，越来越孤立。我们已经消除了所有的情感，只专注于功能方面，我担心，如果我们不放松，它将导致我们不断走下更糟的道路。我的希望是，我们可以使人们重新回到网络上，并且它将开始真正兑现最初使我们所有人如此兴奋的承诺。”
我的希望是，我们可以增加对网络的感觉，并且网络将开始真正兑现最初使我们所有人如此兴奋的承诺。
哈拉杜尔·索里??夫森
对于今年的年度趋势，我们将探讨设计和开发方面的进展，这些进展将有助于建立更好的网站，无论是进一步创造力还是实施道德规范。同时，我们着眼于最先进的技术和流程，这些技术和流程将帮助您建立在繁忙且始终保持联系的世界中脱颖而出并引起用户注意的体验。
我们还在本文底部提供了2019年以来的Web设计趋势预测，因此您可以了解这些年份的比较情况以及我们的预测结果。向前跳以阅读它们。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益共享的机会，发展业务的工具以及充满激情的商业社区。
1.算法设计
设计越来越自动化。但是，这并不意味着网页设计师已经过时了。算法可以帮助我们腾出一些时间，因此我们可以花更多的钱进行创意。
“我们一直有兴趣在最近的一个想法是利用这齐头并进与创建标识系统的自定义工具，解释说：” 马丁·布拉沃，创始人设计系统国际，在设计的交叉和运行的技术设计工作室软件。
这些工具具有通过使某些方面自动化而使其他方面对设计师的创造力开放的潜力来增强设计过程。这种组合的方法具有双重好处：使设计师摆脱了跟踪指南的负担，释放了时间和精力让他们专注于创意方面，也使我们设??计了无法用传统工具执行的系统。”
这种结合的方法具有双重好处，即使设计师摆脱了跟踪指南的负担，从而释放了时间和精力让他们专注于创新方面。
马丁·布拉沃（MartínBravo）
马丁和他的商业伙伴Rune Madsen是免费阅读的数字书籍《编程设计系统》的作者，他指出，并非必须使用Photoshop，InDesign或Figma之类的工具来创建所有内容。相反，我们可以设计将传统工具与定制的，特定于项目的工具相结合的工作流，从而使团队能够更快地工作并获得更好的结果。
例如，当二人在智利圣地亚哥的一个新的电子音乐场所从事标识项目时，他们为营销团队构建了一个定制生成器，以快速设计使用其新品牌系统的促销资产。它可以在所有应用程序中保持一致性，并减轻设计人员的负担，使其专注于品牌的创意方面。
网站设计趋势：图稿生成器
基于网络的电子音乐场所Noa Noa的自定义图稿生成器使设计师能够在短时间内创建数百种营销资产。
2.投机设计
对于面向未来的数字设计会议New Adventures的设计师兼总监Simon Collison来说，Web不再像是一个开放的空间，可以进行大胆的视觉和互动创意。因此，他正在超越自己的舒适范围，转向投机性设计和能启发未来思维的主题。
他解释说：“这种兴趣使我相信，如果设计愿意负责任地发展，那么它将为未来提供很大的帮助。” “投机性设计是富有想象力的研究，是设计假设性破坏的机会，以及在我们发现新信号和新叙事的假设条件下的机会。如果未来不确定，那么我们必须推测。”
对于Simon来说，这种方法是开放的。“代替网页设计当前对自助式设计系统的痴迷，投机性设计朝外寻找生活系统。这项工作既具有创新性，又具有开拓性，但也具有包容性-从业者渴望聆听和学习可能受益于新技术或受其折磨的人们。我最近参加了在马德里举行的以期货为中心的会议，大多数发言者都参考了涉及普通百姓和不同社区的案例研究。这是进入不确定性的更符合道德和包容性的途径；以目的为导向的项目，可以减轻伤害并改善生活。”
这是进入不确定性的更符合道德和包容性的途径；以目的为导向的项目，可能减轻伤害并改善生活。
西蒙·科里森
西蒙承认，随着越来越多的设计师涉足并可能“夸大”投机设计，该领域存在合理的关注，它像设计思维一样被误解，廉价化，包装化和商品化。但是，作为前艺术家，他被这种跨学科的实践所吸引。
他解释说：“它为数字和数据从业人员提供了一个新的开放式空间，可以与艺术家，建筑师，作家，演员等进行协作。” “这为新体验提供了原型，可为有价值的对话提供信息，其中每个人都是利益相关者，尤其是那些将使用或受新技术影响的人。这是一项包容性创新，可以尽早发现问题，并在造成危害之前突出意外后果。这就是我们将道德规范付诸实践的方式，如果认真执行，这项工作可能只会使世界变得更好。”
以下视频中的项目设想了电动汽车的智能充电站，该项目说明了为什么投机性工作对于减轻危害和尽早实施道德有帮助：
3.浏览器中的机器学习
在2019年，围绕机器学习的炒作很多，但它逐渐但稳步地进入了前端开发领域。埃莉诺Haproff ，开发人员和机器学习爱好者，笔记如何库，如TensorFlow.js和Brain.js取得了运行机器学习在浏览器中成为现实。现在，您可以在浏览器中训练模型，重新训练现有模型或运行预先训练的模型。
她发现：“浏览器是使用机器学习的好地方。” “它非常易于访问，可在所有设备上使用，并且与摄像机，麦克风，GPS，文本，鼠标输入等的访问具有高度的交互性。这些输入的数据可以通过机器学习模型运行，以增强应用程序并添加新功能。”
由Eleanor与Asim Hussain和Osama Jandali共同构建的aijs.rocks网站展示了许多有趣且富有创造力的应用程序，它们在浏览器中运行机器学习，例如Deep Drum来生成连续的鼓模式，以及Teachable Machine，您可以在其中教机器识别图像并播放声音。
除了浏览器的高度分布式，高度交互性之外，在客户端运行机器学习还有其他好处。
Eleanor指出：“对于应用程序开发人员而言，这无需花太多时间，因为他们不必处理用户数据处理。” “例如，这个明确的内容检查应用直接在用户设备上查看内容。而且，不向服务器端发送用户数据对隐私具有重要意义，这对于处理敏感数据（例如以健康为中心的应用程序）尤其重要。”
另外，不向服务器端发送用户数据对隐私具有重要意义，这对于处理敏感数据（例如以健康为重点的应用程序）尤其重要。
埃莉诺·哈普洛夫（Eleanor Haproff）
Eleanor建议探索可通过TensorFlow.js获得并可以通过CDN加载的许多预训练模型。还要检查她的CodePen，它将数据从设备的相机传递到称为“ MobileNet”的图像检测模型，并输出可以识别的内容：
4.使网站响应用户的情况
我们可以很快建立一个网站，该网站可以根据用户的设备，环境或输入做出反应和响应，无论是出于娱乐目的还是提高可用性和可访问性。
前端开发人员Mandy Michael一直在尝试一系列新的传感器API，这些API使我们能够利用设备定位和语音识别等功能在网络上创建新的，有用的，令人兴奋的体验。她最喜欢的是环境光传感器（目前在Google Chrome中受支持），她预测到2020年我们会看到更多的传感器。
“环境光传感器可以在手机，笔记本电脑和电视等各种设备中找到，” Mandy解释说。“它用于感应房间中的环境光量。一个常见的用例是在弱光环境下调暗屏幕亮度，以减轻眼睛疲劳。”
首先，Mandy建议先创建一个新实例，该实例将使我们能够访问“ AmbientLightSensor”对象，然后再使用“ onReading”事件处理程序从传感器的“ illuminance”属性中获取读数。例如：
如果 （ 'AmbientLightSensor' 在 窗口 ） {
const sensor = 新的 AmbientLightSensor （）；
传感器。onreading = （） => {
如果 （ 传感器。照度 < 20 ） {
元素。风格。setProperty （'--bg' ， 'black'）;
} 其他 {
元件。风格。setProperty （'--bg' ， 'blue'）;
}
} ;
传感器。开始（）;
}
查看原始GitHub 托管于?的ambient-light-simple-demo.js
该API还可以用于根据用户所在房间的当前光照水平在网络上创建更具沉浸性和吸引力的故事讲述。或者您可以提高低光照下文本的可读性。在以下示例中，使用可变字体根据检测到的光量更改字体粗细。
5.可持续性设计
可持续的用户体验和设计是几年前首次出现在我们的榜单上的，但是自那以后，它的发展势头迅猛，这在一定程度上要归功于《灭绝叛乱》之类的运动。
“在过去的一年中，这似乎是气候变化的公众参与，终于变得越来越普遍，大多数行业现在似乎正在采取措施，以减轻灾难性影响，”发现杰罗姆·图尔，在WordPress的机构高级开发人员全麦数字和贡献者在可持续发展的网络宣言。
“网络制造商还意识到，他们掌握着一个不断发展，渴望能源的行业的束缚。预报员预测，到2030年，信息和通信技术可能占能源消耗的8％至21％，因此，提供网络产品的任何人都有责任在其设计和实施中考虑能源的使用。”
提供Web产品的任何人都有责任在其设计和实现中考虑能耗。
杰罗姆·图尔
Jerome警告说，失控数据传输的最大罪魁祸首是过大和未压缩的图像、,肿的外部脚本以及自动播放视频。从UX和环境的角度来看，如果页面上有很多资产，则使用延迟加载至关重要。在后端，缓存可以极大地减少服务器负载。”
Jerome指出，下一个重大挑战是让更多的客户意识到这一问题，以便他们要求开发商提供低碳网站，并要求托管服务提供商提供可再生能源。
网页设计趋势：碳计算器
Wholegrain Digital创建了一个碳计算器，用于估算网站的碳排放。有关该工具第2版的详细信息，请参见Jerome的博客文章。
您可能还会喜欢： 可持续用户体验：设计师如何帮助对环境产生积极影响。
6.即时性设计和用户研究的兴起
我们生活在一个充满干扰的世界中，无休止的网站和应用流争夺我们的注意力。学习如何抓住并保持这种注意力，以及最大限度地增加用户在我们的数字产品上花费的时间，正变得越来越困难，但在最佳网站设计中就越来越重要。
2020年，网页设计师需要解决时，这些需求发生的情况下用户的迫切需求，”建议UX研究员维克多Yocco，作者的思维设计。“我看到这种情况以几种方式发生。首先，使用位置或其他上下文数据来浮现与用户所发生的事情有关的体验。其次，在综合经验中，跨行业提供服务的增加。为了有效地设计即时性，将更加关注用户研究。”
2020年，网页设计师需要在用户需求出现时解决他们的迫切需求
维克多·约科（Victor Yocco）
举例来说，维克多（Victor）指出了2019年的一些大型发布活动，大型公司开始提供附加服务：具有信贷和银行业务的苹果，谷歌在医疗保健领域的合作以及Facebook将约会服务推向美国市场。这些公司探索了新的设计领域，因为他们发现有机会在需要时向用户提供产品或服务。
Victor预测，到2020年，这些跨服务合作伙伴关系和机会将更多，例如银行和工作，房地产搜索引擎和抵押贷款人，约会应用程序和餐厅预订系统。
他认为：“关键在于这些体验如何与用户实时互动。” “它们无缝吗？他们在正确的时间交付吗？要知道这一点，我们将看到关键用户研究的持续扩展。Analytics（分析）可以通过使用，转换，删除和基本页面统计信息来告诉我们部分故事。仍然需要定性研究来告诉我们用户如何需要我们产品的故事。或者，如果他们这样做的话。”
因此，2020年将是用户研究的重要一年。大小公司将承担专门研究人员的角色，以提供合理的投资回报。
网页设计趋势：苹果信用卡
苹果声称其服务将因其易用性，费用低廉和每日现金返还而彻底改变信用卡。
7.无障碍进入主流
用户体验设计策略师，用户体验和网站设计机构truematter的负责人Dean Schuster预测，使残疾人可以访问网络已经持续了几年，但它有望在2020年实现重大突破。
“在2019年，美国最高法院维持了所有站点都符合W3C的Web内容可访问性指南（WCAG） AA标准的想法，” Dean指出。“这意味着必须使所有人都能使用网站。”
对于使用屏幕阅读器或不容易使用鼠标的用户，网站现在必须正常工作。要建立WCAG AA标准，需要对规范进行测试，但是还需要技巧和理解。仅仅因为一个站点符合规范并不意味着它容易为视力低下或身体有缺陷的人使用。与往常一样，Dean建议，最好是与真实用户（在这种情况下为残疾人）测试工作。
他建议：“现在是Web设计师和开发人员使网站真正可用的时候了。” “在美国，这已不再是一种选择，而是一项法律要求。这意味着网络专业人员也必须成为可访问性专家。这种过渡已经开始，并将在2020年加速。”
现在是Web设计人员和开发人员使网站真正可用的时候了。
迪恩·舒斯特
网站设计趋势：辅助功能演示
Dean的代理商truematter在UX Columbia举行的可访问性演示，演示了各种可访问性工具的工作原理。
您可能还会喜欢： 通用设计：11个实用技巧，使您的网站和应用程序更易于访问。
8.考虑到认知差异的设计
无障碍获取和包容性设计也越来越关注神经多样性和认知障碍。这些方面的设计可能很困难，因为残疾人（即使很普遍）也更隐蔽并且需要更难理解。但是，当您设计用于即时性（请参见上文）和关注时间跨度较短的产品时，也会改善患有ADHD等疾病的人的用户体验。因此，在2020年，我们将更多地考虑用户的情绪，以改善尽可能多的人的体验。
UX和感官设计顾问Alastair Somerville解释说：“人们对做某事的期望或做事的感觉会影响我们设计交互的方式。” 情感是意义制定和采取行动的核心。关键问题是当他们限制用户认知时：随着交互过程中记忆和思维模型变得不可访问，似乎显而易见的事情变得不可想象。”
人们在期待做某事时的感受或做事时的感受会影响我们设计交互的方式。
阿拉斯泰尔·萨默维尔
Alastair建议在交互设计和信息架构中提供明确的方向，因为模棱两可和选择过多会产生压力。
他建议：“帮助用户提出问题，问自己想要做的事情。” “确保引起情绪的通知采取明确的措施。如果没有提供下一步，请不要引起注意。”
使多动症患者更容易获得信息的其他技巧包括：通过在悬停图标上添加文本标签来突出显示重要内容，包装文本而不是将其截断，使用运动增强理解并让人们自己定制体验。
在Inclusive Design 24中观看Elizabeth Schafer关于此主题的演讲：
9.隐私保护
网站设计和技术工作室Faculty的创始人克里斯·希弗莱特（Chris Shiflett）认为，保护隐私对于在日益不信任和动荡的网络上建立信任至关重要。
他发现：“尽管大型科技公司滥用隐私已有一段时间，但随着消费者变得越来越聪明和警惕，我们正受到关注。” “就解决方案而言，GDPR是一个良好的开端，但仍有许多工作要做。”
在解决方案方面，GDPR是一个良好的开端，但仍有大量工作要做。
克里斯·史弗莱特
克里斯（Chris）建议检查一下Web合同，其中万维网的创建者蒂姆·伯纳斯·李（Tim Berners-Lee）在其中创建了框架，以帮助政府和公司尊重和保护人们的在线隐私和数据。另一个值得参考的框架是“ 隐私设计”，最初是在1990年代制定的。
克里斯说：“作为互联网的创造者，我们应该使用此类指南来指导我们自己的项目。” “有前途的工具来帮助我们做到这一点，从不断增长的少数深渊分析到Commento。”
克里斯（Chris）的工作室Faculty还创建了一份文档，概述了那些为网络构建者的良好工作标准。
另一方面，作为消费者，克里斯建议使用并支持以隐私为中心的工具，例如Firefox（包括其多帐户容器），Keybase和不包含隐私，这是Mozilla提供的有关安全的，可与互联网连接的产品的指南。
网站设计趋势：网络合同
Web合同包括公司尊重和保护人们的隐私和个人数据以建立在线信任的原则。
您可能还会喜欢： 在电子商务网站和应用程序上建立信任的10种方法。
10.更少的JavaScript
在2017年的清单中，我们预测“甚至会有更多的JavaScript”，实际上JavaScript现在无处不在。它创造了丰富的交互式体验，并为整个Web应用程序提供了强大的动力。但是，越来越多的人越来越负责任地使用JavaScript，只有在必要时才使用JavaScript，因为这会影响性能。
SEO技术顾问Jamie Alberico解释说：“您的收件箱中有很多供应商在宣传使用JavaScript解决方案来监视，个性化和测试您的内容选项的产品。” “我与知名网站合作，在那里购买了每一个尖端的铃铛和改变游戏规则的哨子。所有这些小工具都无法解决问题：JavaScript的decade废。”
Jamie指出JavaScript是您网站上最昂贵的资源，并且比喻说依靠decade废的JavaScript功能在客户端上执行有效，并将decade废放在用户的标签上。
她警告说：“无礼的客人很快就受到欢迎。” “我们是受邀使用用户设备的客人，因此无法保证会再次邀请。依靠提供快速的，以用户为中心的体验的网站将取代缓慢而成熟的网站。”
依靠提供快速的，以用户为中心的体验的网站将取代缓慢的市场。
杰米·阿尔贝里科（Jamie Alberico）
杰米（Jamie）认为，有些网站会将JavaScript归咎于一切邪恶的根源，但试图将JavaScript淘汰掉可能是“错误的喜剧”，并且可能直到2021年才投入生产。其他网站将翻倍并添加更多内容。监视和测试其网站的JavaScript。
杰米预测：“ 2020年设计的最大赢家将是那些优先回答用户意图的人。” “我们可以通过在重要时刻加载重要内容来实现这一目标。”
观看Stuart Langridge的演讲，内容可能不像您被告知的那么多：
11.静态站点
该JAMstack（其代表JavaScript，API和标记）是眼下的一个热门话题。但这不仅是静态网站的幻想吗？
“静态站点听起来像是我们正在倒退，建立简单的站点，没有任何动态。” Patterson Agency的前端技术负责人，Vue School的老师Debbie O'Brien承认。“但是静态是新的动态。多亏了Nuxt，Gridsome，Next，Gatsby，Eleventy等框架，我们可以像构建单页应用程序一样进行开发，但实际上是将页面生成为静态页面。”
Debbie解释说API对于动态内容起着关键作用。它们使我们能够添加从身份验证到付款方式的所有内容，甚至可以调用无头CMS（请参见下文），这使静态网站与单页应用程序一样动态。
“这意味着我们将两全其美”，黛比解释说。“我们获得了交互性和动态站点以及出色的性能，特别是因为可以将静态站点托管在Netlify和Vercel等静态托管服务上。哦，我有提到成本优惠吗？托管静态站点是免费的，因为您不需要服务器！”
哦，我有提到成本优惠吗？托管静态站点是免费的，因为您不需要服务器！
黛比·奥布莱恩（Debbie O'Brien）
Debbie认为JAMstack是提高网站性能的关键，并指出，即使Google Chrome浏览器也在投入时间和金钱，以确保静态网站生成器不受影响。
观看Debbie在来自JAMstack Conf旧金山的静态站点上的演讲：
您可能还会喜欢： 如何使用JAMstack构建快速而安全的网站。
12.无头建筑
与JAMstack相关的是无头架构，即将前端表示层与站点的后端数据层分离的想法。这意味着内容是通过Web服务或API从数据库传递到您喜欢的任何前端框架的。
“无头方法正变得越来越流行，因为整体解决方案提供了对源代码和技术路线图的更少控制，” 新兴公司Bumped的资深前端工程师Heidi Olsen解释说，她正在帮助建立一个设计系统来弥合本机之间的差距。和DOM。“这可能会对寻找技术资源以长期支持该平台产生影响。Monolith解决方案还经常使用资源密集型插件和未优化的脚本，这会影响页面加载和网站速度。”
2020网站制作中13个必然的趋势 除了可以完全控制网站的构建方式之外，您还可以从一个数据源跨多个渠道提供内容。Heidi指出，这些渠道可以包括您的网站，博客，电子邮件，推送，SMS甚至是移动应用程序。这可以帮助缓解内容不一致的情况，并可以使针对全球市场的本地化内容的工作量减小。
“您应该选择断开Web应用程序的耦合并采取无脑的方法，您需要从要说的内容入手，而不是要如何呈现它，” Heidi建议。“问谁是您的受众群体，他们需要什么内容，以及可以通过哪些渠道吸引他们。这将帮助您了解所需的服务，从而可以构建稳定，可扩展的后端。”
如果您选择断开Web应用程序的耦合并采取无脑的方法，则需要从要说的内容开始，而不是要如何展示它。
海蒂·奥尔森（Heidi Olsen）
从WebCamp Zagreb观看Heidi关于无头架构和网站未来的演讲：
13.与大技术的互动
罗布·福特（Rob Ford）的著作《网络设计：1990年当今数字世界的演变》中提出的网络设计时间表最终导致需要考虑到2020年最佳网络设计的真正含义。罗伯发现绝大多数网站采用模板样式。 ，以适应需求驱动的世界，人们期望以快速且可识别的格式访问信息。
他指出：“在某些方面，Instagram是当今的网站，许多人都需要它。” “但是，我们绝对会看到尖端微型站点的回归。但是下一个大趋势仍然不是在台式机上，也不是在移动设备上，而是在与大型技术的人机交互中：无论是大型设备，逃生室还是AR世界。”
但是下一个大趋势仍然不是在台式机上，也不是在移动设备上，而是在与大型技术的人机交互中：无论是大型安装，逃生室还是AR世界。
罗伯·福特
罗布（Rob）认为，品牌不再需要创建出色的网站，因为这种情况正在其他地方发生，因此他担心该网站将长期保持千篇一律，一些微小的细分受众群从现在和现在偶尔的出色网络体验中受益然后。
网站设计趋势：尽我所能
PUMA在上海最繁忙的地区之一安装了Run My Way设备：路人走上跑步机，通过三个虚拟环境为自己的定制化身供电。
网络的下一步是什么？
随着网络的成熟，我们作为设计人员和开发人员必须对使用它承担更多责任。趋势不仅涉及只有特权用户才能访问的最新框架或沉浸式3D体验。它涉及趋势如何适应整体情况，以及我们如何为尽可能多的用户（尽可能多的用户）改善体验。本文显示了自动化，机器学习，包容性设计和用户研究中的一些令人兴奋的趋势，以及超越了短暂的视觉设计趋势的诸如投机设计之类的方法。我们希望至少其中一些趋势会在未来12个月内产生影响，以便我们可以构建所需的网络。
