【智能家居控制中心交互设计实践案例分析9300字】

智能家居控制中心交互设计实践案例分析目录TOC\o"1-2"\h\u9680智能家居控制中心交互设计实践案例分析 1250051.1智能家居控制中心交互设计 166991.2智能家居小屏交互界面设计 3124551.3智能家居小屏交互界面设计展示 7247681.4智能家居手机端APP交互界面设计 1270361.5智能家居手机端APP交互界面设计展示 17228171.6设计评估 28根据以上的设计调研以及设计研究，智能家居控制中心设备主要有两种形式，一种是墙面式小屏控制中心，另一种是手机端APP控制中心。二者之间相辅相成、互相协作，可以共同对家中设备发送指令。根据交互设计原则分别对墙面式小屏和手机端APP控制中心进行交互界面设计。1.1智能家居控制中心交互设计将用户在现实生活中的动作行为进行提取融入到人机交互动作中，用户在现实生活中对智能家居产品的操作动作保留控制中心中对设备的调控动作，而并非只是点击形式的“开或关”，例如窗帘的开关动作多为“推”、“拉”，使得窗帘沿着窗轨滑动，在人机交互界面中也应该采用“滑动”的操作形式对窗帘进行调控。对用户的行为动作目的进行分析，将之运用到控制中心的交互设计中。具体分析如下表：表5-1用户动作行为提取Table5-1Useractionbehaviorextraction表格来源：作者自绘目标现实生活中操作动作控制中心调控手势目的交互设计转化打开窗帘/拉上窗帘甩、拉，使窗帘滑动滑动调节室内光线图标开合变化开窗/关窗推、拉，是窗户移动滑动流通空气图标开合变化开灯/关灯按压开关点击调节室内光源图标亮度变化听歌点击点击休闲放松图标随音乐律动跳动开电扇按压、旋钮点击使温度降低、获得凉意图标扇叶转动开空气净化器点击开关点击使空气清新图标扇叶吹风动态模拟开扫地机器人按压开关点击打扫卫生图标旋转模拟扫地机器人运行状态表5-2用户行为目的转化Table5-2Transformationofuserbehaviorpurpose表格来源：作者自绘目标现实生活中操作动作目的交互设计转化丢垃圾投、拿住后松开、甩把不要的东西丢掉删除设备或删除场景时有抛物线式动画看书翻页手指捏、搓阅读下一页，获取信息滑动查看更多信息开门/关门扭、转、推进入到其它空间滑动进入其他房间对用户的以上动作行为进行分析提取，将用户的自然动作融入到控制中心中，使用户在操作时具有一定的亲切感。将用户的动作语义进行交互转化，使用户与控制中心之间产生更加自然流畅的交互动作。1.2智能家居小屏交互界面设计1.2.1智能家居小屏信息架构根据市场调研及用户调研，确立智能家居小屏的主要功能。智能家居小屏主要是在墙面上，用户不方便长时间面对墙对其进行操作，因此只提取主要功能进行设计。首页主要显示时间、日期、天气等重要信息，以及回家场景模式、离家场景模式的选择。左滑翻页可以进行不同的场景模式选择，只提供选择，不可编辑场景。因为墙面式小屏尺寸较小，操作区域小，不适合容纳太多的设备操作内容，再者用户长时间站立操作很容易产生疲惫感，因此将此功能放置在手机端APP中。左滑翻页可以对客厅主要设备进行调节，例如背景音乐播放、切歌，窗帘开合程度，灯的亮度及冷暖度，窗户的开合等（此处只能对智能家居系统中已有线路设备进行调节，后期用户自己添加的设备不会再此显示）。此外针对两种特殊情况进行信息架构。图5-1智能家居小屏信息架构Figure5-1Smarthomesmallscreeninformationarchitecture图片来源：作者自绘1.2.2智能家居小屏交互结构层次方案（低保真原型图）根据低保真原型图可看出智能家居小屏的主要功能和虚拟按键的分布与位置。在设计过程中可以观察到设计的不足，可以及时加以改进，避免出现使用频率不高但却显示在主要页面的区域。结构层次图可以展示出大致的交互方式，左滑翻页进入不同功能页面，下拉显示消息通知及设置等功能界面，有人按门铃自动跳出门铃响动页面，用户可以查看来访人员以及对话、一键开门等功能。语音控制界面当其检测到固定词语与指令时自动跳出，无人说话时隐藏。图5-2智能家居小屏交互结构层次图Figure5-2Smarthomesmallscreeninteractionstructurehierarchy图片来源：作者自绘1.2.3智能家居小屏界面视觉体验设计方案基于用户和视觉体验要素设计视觉体验方案，智能家居小屏是面向所有在家居空间中的用户，并无特定的用户和年龄段。在设计的时候需要考虑的更加全面，符合众多用户的需求。（1）色彩设计：智能家居小屏是富含科技感的设备，同时又是在家庭中使用的设备，家居生活应该是温馨的，智能家居设备目的在于为用户提供保护和服务。因此智能家居小屏基底背景为黑色（R：0，G：0，B：0），设备区域背景色白色（R：255，G：255，B：255，A：15）未开启图标区域底色黑色（R：0，G：0，B：0，A：33），开启后图标区域底色蓝色（R：59，G：134，B：248），图标颜色白色（R：255，G：255，B：255），按键状态显示选用温暖的中黄色（R：237，G：172，B：17）。图5-3色彩方案示例Figure5-3Colorschemeexample图片来源：作者自绘（2）文字设计：智能家居小屏界面设计中采用统一的字体——思源雅黑字体。这款字体适用度高，在界面设计中能够轻易的调整字号与间距，达到最佳的界面展示效果。辨识度高，不会造成文字变形，而且字形规整，可以向用户准确地传达信息。字体的颜色与背景色差别最大的白色，清晰明确的展示文字信息。（3）图标设计：图标设计应该简洁明了，选用扁平化以及线条型的图标，直观的展现出家居设备的状态。抛弃利用透视、纹理、渐变等效果繁琐冗余的装饰。动态图标的效果可以让用户更直观的了解设备的工作状态，动静结合使界面丰富且功能明显。图标设计根据家居产品的特色进行简化设计，充分发挥了图标在界面设计中隐喻性，使用户能够快速识别出当前设备以及所展现的功能，让“信息”作为核心被凸显出来，减少用户的认知负担。图标设计与文字设计相互结合，相互搭配，能够快速识别出传递的信息。图标的设计风格与界面整体互相融合，在保持整体性的同时起到加深界面形象和主题的作用。（4）版面设计：智能家居系统功能强大，且设备繁多，在设计用户所能接触到的控制中心时需要展示大量的数字信息和文字信息。所以其它现有的智能家居小屏设计也较为复杂，页面展示功能多，交互层级复杂。此次设计实践将会摒弃传统智能家居小屏复杂的操作方式，尽量减少交互层级，只将必要的功能展示到页面中。做到简单大方，尽量降低用户的认知负担。版面构成简洁、功能区域划分明确是智能家居小屏界面设计的主要目标。1.3智能家居小屏交互界面设计展示（1）智能家居小屏主页面展示智能家居小屏主页面显示的内容应该简洁明确，为用户快速提供所需的信心。因智能家居小屏多数位处于玄关地带，离门口较近，在用户回家或者离家使用频次最高，因此在界面中只显示当日日期、时间、天气、空气状况的信息，以及回家、离家两种场景模式。在原有的页面设计（如图5-4所示）中还增加了接听门铃的功能区域，当有人来访时，门铃图标通过声音以及抖动对用户进行提示，用户可以点击进行对来访人员的查看与对话。但在后续设计中发现此功能区域的显示在没有人员来访时并不会起到任何有功能性的作用，因此删除此区域，现主页面只保留时间、日期等信息展示以及两种场景模式选择（如图5-5所示）。改为当有客来访时，门铃抖动页面弹出（如图5-6所示）。在最大程度上减少界面的区域浪费，也一定程度上减少了用户的认知负担和误操作行为。图5-4原智能家居小屏主页面设计Figure5-4Originalsmarthomesmallscreenmainpagedesign图片来源：作者自绘图5-5现智能家居小屏主页面设计Figure5-5Smarthomesmallscreenmainpagedesign图片来源：作者自绘现智能家居小屏主页面设计只保留了重要信息部分，两种场景选择的开启和关闭模式也很明显的具有颜色差异性，方便用户能够快速了解到当前家庭所使用的场景模式是什么。在页面右侧具有向右的箭头标志，不但可以提示用户如何操作，也可以让用户知道在此页面右侧还具有其它页面，左滑可以进行翻页。图5-6门铃抖动弹出页面Figure5-6Doorbelljitterpopuppage图片来源：作者自绘页面弹出时门铃图标抖动，并发出提示音，在页面上方现在日期、天气信息。在门铃标志上方显示时间，方便用户快速的了解到客人来访时间。大面积的门铃图标显示，方便用户接听，点击门铃即可连接门口监控，快速查看来访人员。图5-7门铃接听页面Figure5-7Doorbellansweringpage图片来源：作者自绘门铃接听页面（如图5-7所示），上方状态栏与之前相同，屏幕中出现门口监控的画面，用户按下绿色对话键可以与来访人员进行交流，用户挂断即可返回主页面，同时用户选择直接按下左侧蓝色开门键打开大门，也可以自行去打开门。（2）智能家居小屏场景页面展示场景页面呈宫格式排列布局，主要提供设定好的场景模式给用户选择（如图5-8所示），用户可以根据自己的喜好进行场景选择，此页面只提供模式选择，不提供模式编辑，模式的编辑或增加需要在手机端APP中进行设置。图5-8场景选择页面Figure5-8Sceneselectionpage图片来源：作者自绘用户在进行场景模式选择后，选中的模式图标背景变为蓝色，滑动模块变为黄色已开启状态，与其它未选择模式具有明显的差异，方便让用户了解到当前家居环境正在使用的模式。（3）智能家居小屏设备管理页面展示设备管理页面与场景选择模式采用一样的宫格式布局（如图5-9所示），风格统一，整体简洁，具有一致性。图5-9设备管理页面Figure5-9Devicemanagementpage图片来源：作者自绘如图5-9所示，设备在关闭和开启状态时有着明显的区别，主要在其图标的改变，音乐模式的开启，图标会随着音乐律动进行上下晃动，动态的效果展示不仅使用户一眼看成其状态的不同，也为交互形式增添了乐趣。客厅灯打开后图标变成具有光感的黄色，还有三种光的冷暖色可供选择。客厅窗帘的开启可按住长条模块进行滑动，在滑动的同时进行百分比分析，可供用户选用合适的打开程度。在开启后窗帘图标从闭合状态变为开启状态，具体如上图所示。在具有开合限制的设备调节中，如窗户，只采用开或关的滑块进行调节，不使用百分比进行调节。图标与窗帘原理一致，开和关时的图标不同。此设计也应用到手机端APP中。（4）智能家居小屏其它页面展示在场景选择页面和设备调节页面的右上角有个语义为“设置”的图标，点击后会出现更多信息的页面（如图5-10所示），此页面也可以通过在任意页面中使用“下拉”手势唤醒，页面出现后“上划”即可返回上一级页面。页面内容主要要消息通知、设置、关于此设备等信息。图5-10更多信息页面Figure5-10Moreinformationpage图片来源：作者自绘智能家居小屏设备还有其必不可少的语音交互形式，在语音交互技术的发展下，用户可以不用喊出设备固定名称来进行唤醒设备执行指令，直接在可检测到的范围内说出指令即可（如图5-11所示）。当然用户也可以进行设备名称设置，在喊出固定名称后在进行指令命令，以防用户在交谈过程中被设备误识别。当指令执行完后一段时间内没有接受到指令，此页面自行返回主页面。图5-11语音交互页面Figure5-11Voiceinteractionpage图片来源：作者自绘1.4智能家居手机端APP交互界面设计1.4.1智能家居手机端APP信息架构智能家居小屏的功能被减少，则手机端APP的功能就会有一定的增多，且APP操作空间大，受限情况较少。此次设计主要操作都将在APP中完成对家居设备的调节，因此APP的信息架构就要逻辑清楚，条例分明。如图5-12所示，智能家居APP主要分为八大功能模块，然后再进行细分，加入新功能设计。图5-12智能家居APP信息架构Figure5-12SmarthomeAPPinformationarchitecture图片来源：作者自绘1.4.2智能家居手机端APP交互结构层次方案（低保真原型图）根据低保真原型图（如图5-13所示）可看出智能家居APP的主要功能和虚拟按键的分布与位置。以及八大模块的排列及其交互方式。图5-13智能家居APP交互结构Figure5-13Interactionstructureofsmarthomeapp图片来源：作者自绘1.4.3智能家居手机端APP界面视觉体验设计方案智能家居手机端APP界面设计相对于智能家居小屏界面设计考虑的要更加全面，智能家居家庭是针对所有年龄段用户，但智能家居APP是使用者以青年、中年人居多。所以在智能家居手机端APP的界面设计中更要具有针对性。（1）色彩设计：手机端APP主要以大面积白色（R：255，G：255，B：255）为主题色搭配不同功能区域的浅灰色（R：239，G：239，B：239）、灰色（R：215，G：215，B：215）。状态显示与智能家居小屏选用一致的中黄色（R：237，G：172，B：17），当前选择项目字体为青年人、中年人接受度较高的蓝色（R：18，G：159，B：250）。设备功能区域中工作设备背景为白色（R：255，G：255，B：255）加灰色边框（R：187，G：187，B：187），指示灯颜色为鲜亮的绿色（R：89，G：255，B：178）。设备刷新状态时有短暂的深灰色背景（R：116，G：116，B：116）的刷新页面出现。设备异常状态时背景呈现浅红色（R：255，G：145，B：145），同时指示灯为正红色（R：255，G：0，B：0）。图5-14色彩方案示例Figure5-14Colorschemeexample图片来源：作者自绘（2）文字设计：智能家居手机端APP界面设计中采用统一的字体——苹方字体。这款字体较与小屏使用的思源雅黑字体更加的细腻、简约，更加适用于手机端分辨率高的细腻页面。文字信息以黑色（R：0，G：0，B：0）和浅灰色（R：131，G：131，B：131）为主，部分文字为蓝色（R：18，G：159，B：250），突出当前页面所在区域。字体在主题色的衬托下，与具有低饱和度色彩图标相搭配，能够快速给用户提供有效信息。（3）图标设计：手机端APP图标设计与智能家居小屏图标设计都选用了扁平化以及线条型的图标，不同的是色彩上的区别，小屏设备图标以白色为主，手机端APP图标多以低饱和度的色彩进行设计（如图5-15所示）。低饱和度的图标与干净的白色底色相搭配使APP整体风格简约清爽，页面信息明确。图标选用与物品一致，加以简洁的文字说明，不会给用户造成认知负担。图5-15图标设计示例Figure5-15Icondesignexample图片来源：作者自绘（4）版面设计：智能家居系统是包含了众多设备组成的生态链，在设计智能家居小屏时简化了功能也减少了交互层级，所以用户就要靠APP来进行对家庭设备的控制与调节。因此APP的功能变多，那么所展示的内容就会变多，就需要进行对所有功能的主要次要级区分，将主要功能放大，次级归纳管理。使用整齐的宫格式排列，可以使页面内容清晰，一目了然。

1.5智能家居手机端APP交互界面设计展示此次智能家居手机端APP交互界面设计以iPhone12（390*844）为机型进行设计。（1）智能家居手机端APP标志展示智能家居APP的logo设计需要围绕设计主旨来进行，此次设计就是在界面优化以及新功能增加的基础上让用户感受到智能家居带来的便捷及温暖，因此logo主要选用了暖黄色与只能中黄色，以几何和线条元素够了出房子的形象，做上方的圆带表着太阳，也表示着智能家居所带来的温暖。底部有着“smarthome”的文字，其中对字母“A”进行了变形设计，使其像一个房屋的形象（如图5-16）。图5-16APP标志设计Figure5-16Applogodesign图片来源：作者自绘（2）智能家居手机端APP登录页面展示根据logo设计以及前期的色彩视觉方案进行欢迎页和登录页面的设计（如图5-17所示），首次登录使用手机号码注册，之后设置密码等。图5-17APP登录页面Figure5-17Apploginpage图片来源：作者自绘（3）智能家居手机端APP主页面展示智能家居手机端APP主页面主要有四个模块部分组成，如图5-18所示。图5-18APP主页面模块区分Figure5-18ModuledifferentiationofAPPmainpage图片来源：作者自绘主页面个功能区详解（如图5-19所示），页面采用宫格式排列，整齐有序。图5-19APP主页面功能区详解Figure5-19Appmainpagefunctionarea图片来源：作者自绘主页面高保真原型图如图5-20所示：点击我的家庭即在左侧滑入我的家庭等信息（如图5-21所示），该页面与右下角我的进入的页面功能相同。当有消息通知时，消息通知图标为黄色并且晃动，没有消息提示时则为灰色。点击添加即可选择添加场景或添加设备（如图5-22所示）。场景模式选择，当前模式呈黄色并在第一位展示，方便用户知道家庭目前使用的场景模式。下方设备区域可以根据房间进行选择，当前房间为蓝色字体显示，如“客厅”。设备分为四种不同的状态，用户可以更好的查看设备状态。（1）设备正常工作状态：图标颜色亮起，并在右上方有绿色提示灯亮起，灯光、窗帘等设备在打开时会显示百分比，不同的百分比程度其图标颜色也不相同（如图5-23中的客厅吊灯与沙发落地灯显示）其它设备贼用语言描述状态“开”。长按设备即可进入设备编辑模式。（2）设备刷新：这种状态存在于设备经过其它方式调节后打开APP时出现，及时的更新家中设备的状态。（3）设备为工作状态：背景区域与图标及文字都显示灰色，提示灯也是灰色，单击即可开启设备。（4）设备故障：当设备出现故障时，背景呈现红色，并出现红色三角形提示标志，提醒用户该设备异常，需要用户查看或者进行售后维修。新功能设计：在设备区域最后一格加入添加设备功能模块，单击即可快速将设备添加至当前房间。长按设备，设备功能小模块进行抖动并且右上角出现红色删除标志，即可对当前房间内设备进行排序或者删除设备（如图5-23所示）。图5-20APP主页面Figure5-20Appmainpage图片来源：作者自绘图5-21APP我的家庭页面Figure5-21Appmyhomepage图片来源：作者自绘图5-22APP添加页面Figure5-22Appaddpage图片来源：作者自绘图5-23排序设备Figure5-23Sortingdevice图片来源：作者自绘（4）智能家居手机端APP场景页面展示在我的场景功能模块中，进行左右滑动即可查看不同的场景模式，选择其中某一场景模式进行切换时，新选中的场景模式将排在第一位（如图5-24所示，从休闲场景模式切换为回家场景模式）。图5-24场景模式切换Figure5-24Scenemodeswitch图片来源：作者自绘点击更多场景可以进入我的场景界面中，可以长按对该模式进行编辑，长按设备即可调节设备，点击右上角保存即可完成场景模式编辑（过程如图5-25所示）。图5-25场景编辑Figure5-25Sceneediting图片来源：作者自绘新功能设计（如图5-26所示）：用户在满足了自身的生活需求时，往往会上升至精神层面的需求，因此用户可以定制只属于自己的独立场景模式，该场景模式称为“私密场景”，在添加场景中有两个选项，一种为普通场景模式，另一种为私密场景模式。在添加私密场景模式前用户要设置该场景的密码，并且在每次选择或编辑此场景模式时都需要输入正确的密码才可以进行下一步操作，即使是家庭共享账号也有足够的隐私性，可以拥有属于自己的独立空间。图5-26添加私密场景Figure5-26Addsecretscenes图片来源：作者自绘（5）智能家居手机端APP设备管理页面展示如图5-27所示，在进行调节设备时图标会跟随用户的操作而改变，就是将用户的操作对现实家居环境中的影响在控制中心页面中展现，将用户与系统之间的友好交互投放至界面交互中，也能让用户对自己的操作给现实空间环境所带来的改变有一定的预估判断。用户选择删除设备时，设备调节区域的消失模拟用户在真实空间丢掉不用的东西的行为动作，删掉设备与丢掉具有想通处，所以在删除设备后页面会向左下角移动缩小并消失，随之转换到上一级页面。图5-27设备调节变化Figure5-27Changeofequipmentregulation图片来源：作者自绘新功能设计（如图5-28）：用户在自己添加新设备后，往往图标或者图片显示与整体风格不融合，或者不显示图标等。在此次研究设计中，针对这一问题提出解决办法，用户在添加设备时可以自定义设备名称与图标，可以在APP提供的图标数据库中进行选择，也可以从手机相册中导入图标，保持整体APP风格的统一性。图5-28添加设备流程Figure5-28Adddeviceprocess图片来源：作者自绘（6）智能家居手机端APP信息中心页面展示信息中心主要有三种形态标志，第一种：无消息通知时，图标为黑色。第二种：有消息通知时，图标变为黄色并且晃动进行提示，点击进去可以看到详细的消息记录（如图5-29左所示）。第三种：遇到危险报警信息时（如图5-29右所示），图标变为红色三角形危险标志，并不断急促的闪烁，通知主页面弹出一直闪烁的危险报警信息，同时手机发出强烈震动提示音。只有用户操作了危险信息下方的两种选项其一，APP才能恢复正常使用。图5-29消息中心提示Figure5-29Messagecentertips图片来源：作者自绘（7）智能家居手机端APP安防监控页面展示安防功能从用户调研结果来看，是大部分人所关注的一个功能，因此单独做出功能模块，在导航栏中设立“安防监控”功能（如图5-30所示），可以在统一页面中观看到家中所有实时监控画面，也可以选择其中一个监控进行查看，可以选取时间段查看并倍速播放，可以保存监控画面图片或视频，也可以通过监控摄像头对家中进行实时对话交流。图5-30安防监控模块Figure5-30Securitymonitoringmodule图片来源：作者自绘（8）智能家居手机端APP自动化设置页面展示自动化设置与目前现有其它智能APP的自动化功能相比更加全面和人性化，自动化设置主要分为两种，一种是联动设置，另一种是定时设置（如图5-31）。目前联动设备一般靠传感器完成，当传感器检测到用户设定的状态就会发出报警，比如现有的下雨自动关窗、火警报警等。图5-31自动化设置Figure5-31Automationsettings图片来源：作者自绘新功能设计：此次研究在理论支持并可行的基础上做出大胆的自动化设置设计。在全屋智能家居设备兼容且能进行发送连续指令的前提下，那么用户就可以根据其自身的生活习惯对家中的智能设备进行不同组合方式的联动设置。比如在洗衣机洗完以后后，用户打开洗衣机门的同时晾衣架就缓缓落下，完成衔接自然无缝隙的设备之间联动（如图5-32所示），同时能更好的服务于用户，让用户更加有体验感。根据用户调研结果显示，老人摔倒报警以及婴儿哭泣提醒是用户比较希望拥有的功能，这在现有的技术中就可以实现，用户也可以将其看做一种联动，当动作一安防监控检测到老人摔倒、婴儿哭泣的状态时，则引发动作二发送危险警报信息或发出提示音并打开父母卧室床头灯且亮度不超过20%，以防夜间强光对眼睛的伤害。图5-32添加自动化联动设置Figure5-32Addautomationlinkagesettings图片来源：作者自绘定时设置就较为简单易懂，选择某一设备设置其在某一时间段进行工作（如图5