前端的革命：物联网时代的网页UI设计

当英国技术专家凯文·阿什顿（Kevin Ashton）在1999年创造了“ 物联网”这个术语时，他可能没有料到这个术语在未来几年会如此受欢迎。如今，生活在物联网中的愿景已经成为现实。

据估计，到2020年，全球将有约500亿台物联网设备投入使用，人们的手机已经能够随时接到基于位置的提醒通知。

万物互联

根据Statista的统计（见下图），到2020年，物联网市场预计将达到4570亿美元。这将是一个惊人的增长，因为2017年物联网市场规模仅1940亿美元。那么，物联网如何变得如此受欢迎？答案是：它能实现万物互联。

前端工程师和网页设计师的新时代

我们正在进入一个前端网页设计的新时代，网站的设计需要考虑到智能设备的功能。物联网将把电子商务网站设计提升到一个新的水平：

1.网页设计将变得更加复杂

网站设计将变得更加复杂，因为现在设计师必须考虑设计前端接口，方便人们轻松地与其他智能设备进行通信。接口需要简洁明了，以便用户可以轻松地与诸如照相机，传感器，冰箱，洗衣机和其他智能设备进行通信。

将花费更多时间来测试设计，配置网络和管理服务器。该设计应该灵活且易于适应通过物联网连接的一系列设备。

2.需要强大的后端通信框架

后端数据库需要很强大，因为从每个用户对应的物联网设备获得的数据必须根据需要安全地保存和访问。

了解大多数顶级框架（如Physical Web，Open Remote，Open Hab，Lelylan，Eclipse，KAA IoT，ZETTA和Open Connectivity Foundation）对于构建有效数据，用户和设备交互的强大框架非常必要。

3.桌面将死亡，移动UI优先，移动用户体验将是关键

用户体验将成为关键所在，桌面设计为移动端设计让位。简单性将是关键，因为简单的设计将更容易在移动设备上加载。因此，在设计中将优选可以增强用户体验和提升个性化的少而精的功能。

将来，每个物联网设备都将通过智能手机连接，因此，设计人员必须创建可以在所有智能手机屏幕上平滑访问的设计，不受智能设备屏幕大小和交互功能的限制，从而大大简化与智能设备的互动。

4.网站速度依然将发挥决定性作用

与web时代类似，页面加载速度依然将是关键，因为与IoT设备进行通信并不容易，并且交互将花费大量时间。设计人员必须尽可能地提高页面加载速度，以便为设备通信和数据共享挤出时间。

以下是设计人员必须采取的一些步骤，以便改善页面加载时间：

• 最大限度地减少重定向的次数。
• 创建并测试在移动设备上加载速度更快的AMP页面。
• 减少图像数量。
• 最小化JS和CSS文件的数量。
• 利用浏览器缓存的强大功能。
• 禁用图像的热链接。
• 删除所有未使用的插件。
• 通过在.htaccess文件中添加以下代码来启用Keep-Alive：

<ifModule mod_headers.c>
Header set Connection keep-alive
</ ifModule>

• 修复所有损坏的链接以改善用户体验并控制爬虫开销（频次）。
• 利用CDN减少服务器负载。
• 借助缓存插件并保持数据库清洁。

5.安全性将成为主要的设计考虑因素

相比传统web系统，黑客攻击智能设备和发出虚假订单变得容易。因此，安全性将成为主要的设计考虑因素。

采用安全设计方法是必要的，以便开始每一个设计都要牢记安全性。以下是安全的网站设计需要遵循的一些步骤：

• 规划设计并确定可以引发漏洞的流程。该网站设计的想法应该是完美的，其中定义了网站的目标，勾画出客户的产品路径是非常重要的。
• 从早期开始运行测试，以便尽早修复任何错误或缺陷。
• 采用模型 – 视图 – 控制器框架，有效地将用户界面与底层数据模型相关联。

• 设计一个简单的网站，尽量减少附加组件和插件的使用。
• 利用Cloudflare等Web应用程序防火墙，即使在攻击开始之前，也可以帮助增强网站的安全性。
• 使用SSL证书创建加密连接并构建信任。

6. JavaScript将使前端交互更容易

JavaScript将是最受追捧的语言，它将使设计人员能够有效地与智能设备进行交互，并使前端交互尽可能顺畅。

JavaScript是一种事件驱动语言，正因为如此，可以在智能设备发生交互或数据库中记录数据的同时执行命令。对于事件驱动语言，每个连接的设备将监听其他事件并相应地做出响应。

此外，可以实现多任务同时运行，而无需等待一个任务完成再执行下一个。有了更好的内存管理和大量的库和插件，JavaScript是每个Web开发人员应该在物联网时代锁定语言。

结论

网站设计师应该清楚地意识到，物联网时代网站设计正面临一次重大前端革命。灵活，用户友好和整洁的界面是当今设计的核心需求，甚至用最轻量化的文本展示所有信息。物联网时代，全新一代网页设计师将成为宠儿。

英文原文链接：Readwrite