前言
在现代社会中，地球人口逐渐老龄化，残疾人口逐年增加。无障碍设计已经不再是仅仅为了少数人考虑，而是需要考虑到更多人的需求。前端工程师除了要考虑到网站的美观和交互性，还需要考虑到无障碍的使用体验。
门作为建筑物的重要组成部分之一，也需要我们的关怀。本文将介绍一扇有温度的无障碍房门的设计思路和实现过程。
房门的设计要求
按照无障碍设计的原则，一扇有温度的无障碍房门需要满足以下要求：
- 可以通过键盘或者单手手势控制门的开启和关闭。
- 在门前需要有足够的空间供残疾人或者携带较大物品的人进出。
- 需要提供足够的提示信息，告知用户门的状态。
同时，为了让这扇房门更具有设计感，我们还需要实现以下要求：
- 当门关闭时，门把手颜色为灰色，当门打开时，门把手颜色为黄色。
- 当有人经过门口时，门上自动显示当前温度。
- 进出门的声音需要具有温馨感。
设计思路
控制
我们可以通过使用键盘事件或者单手手势事件来实现门的开启和关闭。对于键盘事件，我们可以通过监听键盘的 Enter 键和 Space 键来控制门的开启和关闭；对于单手手势事件，我们可以通过监听手势的横向划掉和纵向划下来关门和开门。
-- -------------------- ---- -------
------------------------------------ ------- -- -
-- ----------- --- ------- -- ---------- --- -------- -
------------
-
--
--- ------------ -----------
--------------------------------------- ------- -- -
----------- - ------------------------
----------- - ------------------------
--
------------------------------------- ------- -- -
----- --------- - -------------------------------
----- --------- - -------------------------------
----- ------- - --------- - -----------
----- ------- - --------- - -----------
-- ------------------ - ------------------ -
-- -------- - -- -
-----------
- ---- -
----------
-
- ---- -
-- -------- - -- -
-----------
- ---- -
----------
-
-
--空间
为了满足残疾人或者携带较大物品的人进出门的需求，我们需要在门前预留足够的空间。这里我们可以使用 CSS 中的 padding 属性来调整门的大小，从而预留空间。
.door {
position: relative;
width: 200px;
height: 400px;
margin: auto;
background-color: #f2f2f2;
padding: 80px 40px;
}提示
为了让用户知晓当前门的状态，我们可以使用 aria-label 属性来给门把手添加提示信息。同时，在门关闭时，我们给门把手设置了灰色背景色；在门打开时，我们给门把手设置了黄色背景色。
<button class="door-handle" aria-label="门把手"> </button>
-- -------------------- ---- ------- ------------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ----- ------- ----- -------------- ---- ----------------- ----- - ----------------- - ----------------- -------- -
温度显示
为了让用户知晓当前室内温度，我们可以通过在门上显示温度数字来实现。这里我们使用了 OpenWeatherMap 提供的 API 来获取当前城市的天气信息。
-- -------------------- ---- -------
----- ------- - --------------
----- ------- - --------------
----- --- - --------------------------------------------------------------------------------------------------------
----------
-------------- -- ----------------
---------- -- -
----- ----------- - -------------------------
---------------------------------------------------------- ------ -------------- -----
--进出门声音
为了让进出门的声音具有温馨感，我们使用了 Howler.js 库来播放声音。这里我们使用了一个简单的 wav 格式的音频文件。
const sound = new Howl({
src: ['door.wav']
})
sound.play()总结
通过本文的介绍，我们了解了如何设计一扇有温度的无障碍房门。无障碍设计不仅仅是为了少数人考虑，更是需要我们关注到更多人的需求。我们需要在前端开发中注重用户体验，并遵循无障碍设计的原则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648325ee48841e989429a41b