大屏设计及其布局

合抱阴阳

已于 2024-09-27 08:51:42 修改

阅读量840

点赞数 24

文章标签： microsoft

于 2024-09-27 08:48:10 首次发布

本文链接：https://blog.csdn.net/weixin_42496466/article/details/142583771

版权

大屏设计通常指的是为大型显示屏（如会议室、指挥中心、展览厅等场所的显示器）创建视觉内容的过程。这些显示屏往往用于展示关键指标、实时数据流、业务概览或复杂的可视化信息。良好的大屏设计不仅要美观，还要确保信息传达的有效性和易读性。以下是大屏设计及布局的一些关键要素：

1. 目标和受众

•明确目标：确定大屏的主要用途，比如监控、汇报、展示还是互动。

•了解受众：考虑观众的需求和背景，以便提供相关且易于理解的内容。

2. 内容规划

•优先级排序：将最重要的信息放在最显眼的位置。

•简洁清晰：避免过多的文字描述，使用图表、图形和简短的标题来传达信息。

•实时更新：对于需要显示实时数据的大屏，确保系统能够快速准确地更新信息。

3. 布局原则

•网格系统：利用网格帮助组织屏幕上的元素，保持一致性。

•对齐与间距：保证各个元素之间的对齐方式一致，适当留白以提高可读性。

•视觉层次：通过大小、颜色和对比度建立清晰的信息层级结构。

4. 视觉设计

•色彩选择：选择适合环境照明的颜色方案，同时考虑色盲用户的体验。

•字体选择：选用清晰易读的字体，并注意文字大小，尤其是在远距离观看时。

•动画与过渡：适度使用动画效果可以吸引注意力，但应避免过度干扰主要信息。

5. 技术实现

•分辨率与比例：根据实际使用的屏幕尺寸调整设计，确保内容在不同分辨率下都能良好显示。

•响应式设计：如果大屏内容也需要在其他设备上查看，确保设计具有一定的适应性。

•性能优化：考虑到大屏可能需要处理大量数据或复杂图像，优化加载速度和渲染效率至关重要。

6. 用户交互

•触摸交互：如果支持触摸操作，确保界面元素足够大，方便手指点击。

•遥控操作：对于非触控的大屏，可以通过遥控器或其他输入设备进行控制。

•语音控制：集成语音识别技术，增加用户体验的便捷性。

7. 测试与反馈

•用户测试：邀请真实用户参与测试，收集反馈并据此改进设计。

•迭代优化：基于用户反馈不断调整和完善设计。

大屏设计是一个综合性的过程，涉及多个学科的知识，包括但不限于UI/UX设计、数据可视化、软件开发等。一个成功的大屏设计应当既能够有效地传递信息，又能在视觉上给人留下深刻印象。如果你有具体的设计场景或需要更详细的指导，请告诉我更多细节，我会提供更具针对性的建议。

大屏布局设计及实现

1、整体设计

2、设计头部

示例代码实现：

<div class="head">
  <h1>森林防火系统</h1>
  <div class="time" id="time">2024.09.22 11:40:51</div>
</div>

3、设计主体

示例代码：

<div class="mainbox">
<!--  <div id="map_container"></div>-->
  <ul class="clearfix" style="height: 100%;">
    <li>
      <div class="boxall " style="height: calc(33% - 15px)">
        <div class="tit01">
          开启注册监听
        </div>
        <div class="boxnav" id="echarts1" _echarts_instance_="ec_1726971748102" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
          <fieldset class="login">
<!--            <legend>开启注册监听</legend>-->
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">服务器IP</td>
                <td><input id="serverip" type="text" class="txt" value="10.33.12.59" /></td>
                <td class="tt">端口</td>
                <td><input id="serverport" type="text" class="txt" value="9500" /></td>
              </tr>
              <tr>
                <td colspan="4">
                  <input type="button" value="开启注册监听" onclick="startRegisterListen()" />
                </td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall " style="height: calc(33% - 15px);">
        <div class="tit01">登录</div>
        <div class="boxnav" id="echarts2" _echarts_instance_="ec_1726971748103" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
          <fieldset class="login">
<!--            <legend>登录</legend>-->
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">IP地址</td>
                <td><input id="loginip" type="text" class="txt" value="192.168.3.108" /></td>
                <td class="tt">端口号</td>
                <td><input id="port" type="text" class="txt" value="37777" /></td>
              </tr>
              <tr>
                <td class="tt">协议类型</td>
                <td>
                  <select id="protocolType" class="sel" onchange="changeProtocol(this.value);">
                    <option value="0">TCP</option>
                    <option value="2">SERVER_CONN</option>
                    <option value="4">UDP</option>
                    <option value="3">组播</option>
                  </select>
                </td>
                <td class="tt">超时时间</td>
                <td><input id="loginTimeout" type="text" class="txt" value="5" /></td>
              </tr>
              <tr>
                <td class="tt">用户名</td>
                <td><input id="username" type="text" class="txt" value="admin" /></td>
                <td class="tt">密码</td>
                <td><input id="password" type="password" class="txt" value="@555340hxsb" /></td>
              </tr>
              <tr>
                <td class="tt">RTSP端口</td>
                <td colspan="2"><input id="rtspport" type="text" class="txt" value="80" />（可选参数）</td>
                <td colspan="4">
                  <input type="button" class="btn" value="登录" onclick="clickLogin();" />
                  <input type="button" class="btn" value="退出" onclick="clickLogout();" />
                </td>
              </tr>
              <tr>
                <td class="tt">已登录设备</td>
                <td>
                  <select id="ips" class="sel" onchange="switchDeviceInfo(this.value);"></select>
                </td>
                <td class="tt">通道列表</td>
                <td>
                  <select id="channels" class="sel"></select>
                </td>
              </tr>
              <tr>
                <td class="tt">窗口分割数</td>
                <td colspan="2">
                  <select id="wndNum" class="sel2" onchange="changeWndNum(this.value);">
                    <option value="1">1x1</option>
                    <option value="2" selected>2x2</option>
                    <option value="3">3x3</option>
                    <option value="4">4x4</option>
                    <option value="5">5x5</option>
                    <option value="6">6x6</option>
                  </select>
                </td>
                <td colspan="4">
                  <input type="button" class="btn" value="全屏" onclick="clickFullScreen();" />
                </td>
              </tr>
              <tr>
                <td class="tt">窗口分割自定义</td>
                <td colspan="2">
                  <select id="wndRow" class="sel2" onchange="changeWndRow(this.value);">
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                  </select>
                </td>
                <td colspan="2">
                  <select id="wndCol" class="sel2" onchange="changeWndCol(this.value);">
                    <option value="1" selected>1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                  </select>
                </td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall " style="height: calc(34% - 15px);">
        <div class="tit01">预览</div>
        <div class="boxnav" id="echarts3" _echarts_instance_="ec_1726971748104" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
          <fieldset class="preview">
<!--            <legend>预览</legend>-->
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt" colspan="1">码流类型</td>
                <td colspan="1">
                  <select id="streamtype" class="sel2" onchange="changeStreamType(this.value);">
                    <option value="1">主码流</option>
                    <option value="2">子码流</option>
                  </select>
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td class="tt" colspan="1">播放窗口选择</td>
                <td colspan="1">
                  <select id="winMode" class="sel2" onchange="changeWinMode(this.value);">
                    <option value="0">选中窗口</option>
                    <option value="1">指定窗口</option>
                  </select>
                </td>
                <td>
                  <select id="winIndex" class="sel2" onchange="changeWndIndex(this.value);">
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay();" />
                </td>
                <td>
                  <input type="button" class="btn" value="停止预览" onclick="clickStopRealPlay();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="播放所有" onclick="clickStartAllRealPlay();" />
                </td>
                <td>
                  <input type="button" class="btn" value="关闭所有" onclick="clickStopAllRealPlay();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="开始对讲" onclick="clickStartVoiceTalk();" />
                </td>
                <td>
                  <input type="button" class="btn" value="停止对讲" onclick="clickStopVoiceTalk();" />
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="开启智能" onclick="enableIVS();" />
                </td>
                <td>
                  <input type="button" class="btn" value="停止智能" onclick="disableIVS();" />
                </td>
                <td>
                </td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
    </li>
    <li>
      <div class="boxall " style="height: calc(66% - 15px); padding: 0;">
        <div class="boxnav" id="videoM" style="height: 100%; cursor: default; background-color: rgb(0, 0, 1);">
          <div id="divPlugin" class="plugin"></div>
        </div>
      </div>
      <div class="boxall " style="height: calc(34% - 15px);">
        <div class="tit01">回放</div>
        <div class="boxnav" id="echarts4" _echarts_instance_="ec_1726971748105" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
          <fieldset class="playback">
<!--            <legend>回放</legend>-->
            <div id="tabs_playback">
              <ul style="display: none;">
                <li><a href="#tabs-1">按文件播放</a></li>
                <!--
                <li><a href="#tabs-2">按时间播放</a></li>
                <-->
              </ul>
              <div id="tabs-1">
                <table width="100%" cellpadding="0" cellspacing="3" border="0">
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="查询录像状态" onclick="clickSearchRecordStatus();" /></td>
                    <td>
                      <!--年份信息-->
                      <select id="recordStatus_year" class="sel">
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020" selected>2020</option>
                        <option value="2021" selected>2021</option>
                      </select>
                      <!--月份信息-->
                      <select id="recordStatus_month" class="sel">
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">录像状态</td>
                    <td>
                      <select id="record_Status" class="sel">
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">码流类型</td>
                    <td>
                      <select id="record_streamtype" class="sel">
                        <option value="0">所有码流</option>
                        <option value="1">主码流</option>
                        <option value="2">子码流</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">开始时间</td>
                    <td>
                      <input id="starttime" type="text" class="txt" value="2020-09-04 00:00:00" />（时间格式：2013-11-11 12:34:56）
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">结束时间</td>
                    <td>
                      <input id="endtime" type="text" class="txt" value="2020-09-04 23:59:59" />
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">定位时间</td>
                    <td>
                      <input id="locatetime" type="text" class="txt" value="" />（时间格式：2013-11-11 12:34:56）
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      查询：<input type="button" class="btn2" value="开始搜索" onclick="clickStartRecordSearch();" />
                      查询句柄:<input id="recordQueyrHandle" type="text" class="txt" value="0" />
                      <input type="button" class="btn2" value="继续搜索" onclick="clickNextRecordSearch();" />
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <!--录像信息-->
                      录像信息：
                      <select id="recordInfor">
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <input type="button" class="btn2" value="开始回放" onclick="clickStartPlayback();" />
                      <input type="button" class="btn2" value="停止回放" onclick="clickStopPlayback();" />
                    </td>
                  </tr>
<!--                  <tr>-->
<!--                    <td colspan="2">-->
<!--                      <input type="button" class="btn" value="暂停" onclick="clickPause();" />-->
<!--                      <input type="button" class="btn" value="恢复" onclick="clickResume();" />-->
<!--                      <input type="button" class="btn" value="单帧" onclick="clickPlayOneFrame()" />-->
<!--                      <input type="button" class="btn" value="慢放" onclick="clickPlaySlow();" />-->
<!--                      <input type="button" class="btn" value="快放" onclick="clickPlayFast();" />-->
<!--                    </td>-->
<!--                  </tr>-->
                </table>
              </div>
              <div id="tabs-2">
              </div>
            </div>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
    </li>
    <li>
      <div class="boxall " style="height: calc(33% - 15px);">
        <div class="tit01">
          <div>
            热成像
          </div>
        </div>
        <div class="boxnav citylist str_wrap str_vertical" style="display: block;">
          <fieldset class="Thermal">
            <legend>热成像</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">点测温</td>
                <td class="tt">
                  <input type="button" class="btn2" value="开启" onmousedown="clickenableCheck(true)"></td>
                <td><input type="button" class="btn2" value="关闭" onmousedown="clickenableCheck(false)"></td>
                <td class="tt">温度</td>
                <td colspan="3"><input id="Temper" type="text" class="txt" value=""/></td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall " style="height: calc(33% - 15px);">
        <div class="tit01">
          <div>
            云台
          </div>
        </div>
        <div class="boxnav citylist str_wrap str_vertical" style="display: block;">
          <fieldset class="ptz">
<!--            <legend>云台</legend>-->
            <div id="tabs_ptz">
              <ul>
                <li><a href="#tabs-1">云台控制</a></li>
                <li><a href="#tabs-2">预置点</a></li>
                <li><a href="#tabs-3">巡航路线</a></li>
                <li><a href="#tabs-4">巡航预置点</a></li>
                <li><a href="#tabs-5">线扫</a></li>
                <li><a href="#tabs-6">巡迹</a></li>
              </ul>
              <div id="tabs-1">
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                  <tr>
                    <td>
                      <input type="button" class="btn" value="左上" onmousedown="mouseUPLeftPTZControl(true);" onmouseup="mouseUPLeftPTZControl(false);" />
                      <input type="button" class="btn" value="上" onmousedown="mouseUpPTZControl(true);" onmouseup="mouseUpPTZControl(false);" />
                      <input type="button" class="btn" value="右上" onmousedown="mouseUPRightPTZControl(true);" onmouseup="mouseUPRightPTZControl(false);" />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="button" class="btn" value="左" onmousedown="mouseLefPTZControl(true);" onmouseup="mouseLefPTZControl(false);" />
                      <input type="button" class="btn" id="openPtzLocate" value="开启" onclick="openPtzLocate();" />
                      <input type="button" class="btn" id="closePtzLocate" value="关闭" onclick="closePtzLocate();" />
                      <input type="button" class="btn" value="右" onmousedown="mouseRightPTZControl(true);" onmouseup="mouseRightPTZControl(false);" />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="button" class="btn" value="左下" onmousedown="mouseDownLeftPTZControl(true);" onmouseup="mouseDownLeftPTZControl(false);" />
                      <input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(true);" onmouseup="mouseDownPTZControl(false);" />
                      <input type="button" class="btn" value="右下" onmousedown="mouseDownRightPTZControl(true);" onmouseup="mouseDownRightPTZControl(false);" />
                    </td>
                  </tr>
                </table>
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                  <tr>
                    <td class="tt">云台速度</td>
                    <td>
                      <select id="ptzspeed" class="sel">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4" selected>4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                      </select>
                    </td>
                  </tr>
                </table>
                <table cellpadding="0" cellspacing="3" border="0">
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn(true)" onmouseup="PTZZoomIn(false)"></td>
                    <td><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout(true)" onmouseup="PTZZoomout(false)"></td>
                  </tr>
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn(true)" onmouseup="PTZFocusIn(false)"></td>
                    <td><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut(true)" onmouseup="PTZFoucusOut(false)"></td>
                  </tr>
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="PTZIrisIn(true)" onmouseup="PTZIrisIn(false)"></td>
                    <td><input type="button" class="btn2" value="光圈-" onmousedown="PTZIrisOut(true)" onmouseup="PTZIrisOut(false)"></td>
                  </tr>
                </table>
              </div>
              <div id="tabs-2">
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                  <tr>
                    <td class="tt">预置点列表</td>
                    <td>
                      <select id="presetList" class="sel">
                      </select>
                    </td>
                  </tr>
                </table>
                <table cellpadding="0" cellspacing="3" border="0">
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="获取" onmousedown="GetPresets()"></td>
                    <td><input type="button" class="btn2" value="定位到" onmousedown="GotoPreset()"></td>
                  </tr>
                  <tr>
                    <td class="tt"><input type="button" class="btn2" value="增加" onmousedown="SetPreset()"></td>
                    <td><input type="button" class="btn2" value="删除" onmousedown="RemovePreset()"></td>
                  </tr>
                </table>
              </div>
              <div id="tabs-3">
                <table cellpadding="0" cellspacing="3" border="0" >
                  <tr>
                    <td class="tt">巡航组</td>
                    <td>
                      <select id="tourIndex" class="sel">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                      </select>
                    </td>
                    <td class="tt">1~8</td>
                    <td class="tt">
                      <input type="button" class="btn2" value="开始" onmousedown="clickstartTour()"></td>
                    <td><input type="button" class="btn2" value="停止" onmousedown="clickstopTour()">
                    </td>
                  </tr>
                  <tr>
                    <td class="tt">通道列表</td>
                    <td>
                      <select id="channels1" class="sel"></select>
                      <input type="button" class="btn3" value="按通道巡航" onmousedown="clickchannelstartTour()"></td>
                    </td>
                  </tr>
                </table>
              </div>
              <div id="tabs-4">
              </div>
              <div id="tabs-5">
              </div>
              <div id="tabs-6">
              </div>
            </div>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall " style="height: calc(34% - 15px);">
        <div class="tit01">
          <div>
            预警列表
          </div>
        </div>
        <div class="boxnav citylist str_wrap str_vertical" style="display: block;">
          <fieldset class="operate">
            <!--            <legend>订阅事件</legend>-->
            <table>
              <tr>
                <td><input id="subscribeEventName" type="text" class="txt" value="FireWarning" /></td>
                <!--					<td>					-->
                <!--						<input type="button" class="btn3" value="订阅" onclick="clickSubScribeEvent();" />-->
                <!--					</td>-->
                <!--					<td>					-->
                <!--						<input type="button" class="btn3" value="取消订阅" onclick="clickUnSubScribeEvent();" />-->
                <!--					</td>				-->
              </tr>
              <tr>
                <td style="width:100%"><div id="eventMessage" class="opinfo"></div></td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="boxfoot"></div>
      </div>
    </li>
  </ul>
</div>

如果对您有所帮助，请点赞打赏支持！

技术合作交流qq：2401315930

最后分享一下地图下载器设计及下载地址：

链接：https://pan.baidu.com/s/1RZX7JpTpxES-G7GiaVUxOw
提取码：61cn

地图下载器代码结构设计及功能实现_地图下载管理器解析-CSDN博客