详细设计方案 - 界面设计说明

详细设计方案界面设计说明2016.09

界面设计方案总述基本设计思路是所有的查询操作只通过一个文本框进行输入，如果不进行精确类别选择，将提供指定城市内的全局数据的模糊查询。界面总览展示的地图为右上城市列表中所选的城市的地图的全市总览。登入时默认城市为上海。城市列表效果说明城市列表应该按省份分开显示。效果示意如下：内部同时提供搜索框，帮助迅速定位城市。效果示意如下：定位完城市后，城市列表则收起。效果示意如下：查询框效果说明查询框分为搜索输入框、类别选择菜单栏、输入提示框、结果展示框4大部分组成。搜索输入框用于接收用户输入的查询关键词。该输入框一直处于显示状态。效果示意：标注①所示的为关键字输入框。所有需要搜索的内容在此输入。该文本框主要为接收用户所输入的查询关键字。当在查询框输入内容后，该文本框末尾处将出现一个“X”的清除按钮控件，点击该按钮可以快速清除文本框中内容。参见示意图。在输入内容时候，如果匹配到相关结果，将会在该文本框底部弹出输入提示框。效果示意如下：如果无匹配结果，则不弹出“输入提示框”。如果用户在该输入框中输入内容后，可以通过点击“回车键”激活查询（相当于点击“搜索按钮”），结果将显示在“结果展示框”内。标注②为类别菜单通知栏。该通知栏用于提示用户当前进行的搜索类别为何种类别。同时当用户进行搜索的时候，所要进行的搜索方式也据此决定。此处的图标由用户在“类别选择菜单”中所点选的决定。用户在“类别选择菜单”中点选菜单后，其对应的图标也会显示在此。标注③为搜索按钮。点击该按钮后，如果“关键字输入框”内有输入的内容，则将激活查询，否则将不会做任何动作。类别选择菜单栏用于给用户选择所要进行的查询方式。本菜单栏默认为隐藏。（建议菜单通过数据接口获得）效果示意：该菜单默认选择为“定位搜索”。目前该菜单栏仅包含两级菜单选择。父菜单菜单名菜单级别是否可点选备注定位搜索1是全局搜索。定位搜索下的所有类别数据搜索。定位搜索地名地址定位2是老系统中的“地标查询”+“地名地址查询”+“地表查询”交叉路口查询2是原来的“地址定位”道路查询2是4s店查询2是修理厂查询2是区域搜索查勘区查询1否返修区查询2是当鼠标略过可点选菜单时，应有突出效果（鼠标突出效果），鼠标移开时，突出效果清除。当点选任一可点选菜单后，整个“类别菜单栏”将隐藏。同时，所点选的菜单的图标会显示在“搜索输入框”的“类别菜单通知栏”内。点选时，不会触发调用查询接口，故将不会弹出“输入提示框”，以及“结果展示框”。如果点选时，“搜索输入框”中有输入的内容，该内容将保持。当该菜单栏弹出的时候，需要突出显示和“搜索输入框”内的“类别菜单通知栏”中图标一致的菜单（通知栏突出效果）。该突出效果，与之前的鼠标略过的突出效果需进行区别。如果鼠标略过的菜单和通知栏中的菜单一致，则突出效果使用通知栏突出效果。关于菜单栏的隐藏与现实本菜单栏默认为隐藏。仅在以下情况时显示：1、文本框无输入内容，且鼠标左键点击文本框的时候2、鼠标点击或略过“类别菜单通知栏”的时候当菜单处于显示状态时，隐藏的条件设定如下：1、鼠标点击查询框组件以外的任意处2、用户点选了该菜单中的任意一个可以点选的菜单3、文本框输入内容发生变化时，菜单栏隐藏输入提示框该提示框主要为配合用户在“搜索输入框”中输入内容时，根据相关接口返回的结果进行输入结果提示。本提示框默认为隐藏。效果示意：提示框中的显示的内容组成为：地名+地址+所属行政辖区（省市区）。提示框中的内容默认只显示12条，超出部分将不显示。该提示框的内容需要支持鼠标选择，以及键盘中的“↑”、“↓”键的选择，选择时应有突出效果（选择突出效果），同时地图上的需要进行标注，并显示对应的地名。当选中时（鼠标点击或键盘回车点击），本提示框消失，同时弹出“结果展示框”。此外需要根据选中数据在地图上进行标注，当前地图的级别变更为最大级别，并且在气泡框内显示明细信息（地名、地址、所属行政辖区（省市区）、联系方式等）。效果示意：当“搜索输入框”的内容被清除时，本输入提示框隐藏。当点击“搜索输入框”内的查询按钮时，本输入提示框隐藏。当“搜索输入框”的内容发生变更时，本输入提示框激活。结果展示框该展示框根据点击查询按钮后所得到的结果进行展示。本展示框默认为隐藏。效果示意：结果框中每条记录的信息将更多（地名，地址、所属行政区、联系方式等）。所有结果将会显示，一页只显示10条，超出部分通过分页处理。根据每页的结果，地图上全部对其进行标注。该结果框的内容需要支持鼠标选择，以及键盘中的“↑”、“↓”键的选择，选择时应有突出效果（选择突出效果），同时地图上的标注需要区别显示。当选中时（鼠标点击或键盘回车点击），当前地图的级别变更为最大级别，并且在标注上弹出气泡框内显示明细信息（地名、地址、所属行政辖区（省市区）、联系方式等）。此时，结果框中其他未被选中的