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

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

2016.09

界面设计方案

总述

基本设计思路是所有的查询操作只通过一个文本框进行输入，如果不进行精确类别选择，将提供指定城市内的全局数据的模糊查询。

界面总览

展示的地图为右上城市列表中所选的城市的地图的全市总览。登入时默认城市为上海。

城市列表效果说明

城市列表应该按省份分开显示。

效果示意如下：

内部同时提供搜索框，帮助迅速定位城市。

效果示意如下：

定位完城市后，城市列表则收起。

效果示意如下：

查询框效果说明

查询框分为搜索输入框、类别选择菜单栏、输入提示框、结果展示框4大部分组成。

搜索输入框

用于接收用户输入的查询关键词。该输入框一直处于显示状态。

效果示意：

标注①所示的为关键字输入框。所有需要搜索的内容在此输入。

该文本框主要为接收用户所输入的查询关键字。

当在查询框输入内容后，该文本框末尾处将出现一个“X”的清除按钮控件，点击该按钮可以快速清除文本框中内容。参见示意图。

在输入内容时候，如果匹配到相关结果，将会在该文本框底部弹出输入提示框。效果示意如下：

如果无匹配结果，则不弹出“输入提示框”。

如果用户在该输入框中输入内容后，可以通过点击“回车键”激活查询（相当于点击“搜索按钮”），结果将显示在“结果展示框”内。

标注②为类别菜单通知栏。

该通知栏用于提示用户当前进行的搜索类别为何种类别。同时当用户进行搜索的时候，所要进行的搜索方式也据此决定。

此处的图标由用户在“类别选择菜单”中所点选的决定。用户在“类别选择菜单”中点选菜单后，其对应的图标也会显示在此。

标注③为搜索按钮。

点击该按钮后，如果“关键字输入框”内有输入的内容，则将激活查询，否则将不会做任何动作。

类别选择菜单栏

用于给用户选择所要进行的查询方式。本菜单栏默认为隐藏。

（建议菜单通过数据接口获得）

效果示意：

该菜单默认选择为“定位搜索”。

目前该菜单栏仅包含两级菜单选择。

当鼠标略过可点选菜单时，应有突出效果（鼠标突出效果），鼠标移开时，突出效果清除。

当点选任一可点选菜单后，整个“类别菜单栏”将隐藏。同时，所点选的菜单的图标会显示在“搜索输入框”的“类别菜单通知栏”内。点选时，不会触发调用查询接口，故将不会弹出“输入提示框”，以及“结果展示框”。如果点选时，“搜索输入框”中有输入的内容，该内容将保持。

当该菜单栏弹出的时候，需要突出显示和“搜索输入框”内的“类别菜单通知栏”中图标一致的菜单（通知栏突出效果）。该突出效果，与之前的鼠标略过的突出效果需进行区别。如果鼠标略过的菜单和通知栏中的菜单一致，则突出效果使用通知栏突出效果。

关于菜单栏的隐藏与现实

本菜单栏默认为隐藏。仅在以下情况时显示：

1、文本框无输入内容，且鼠标左键点击文本框的时候

2、鼠标点击或略过“类别菜单通知栏”的时候

当菜单处于显示状态时，隐藏的条件设定如下：

1、鼠标点击查询框组件以外的任意处

2、用户点选了该菜单中的任意一个可以点选的菜单

3、文本框输入内容发生变化时，菜单栏隐藏

输入提示框

该提示框主要为配合用户在“搜索输入框”中输入内容时，根据相关接口返回的结果进行输入结果提示。本提示框默认为隐藏。

效果示意：

提示框中的显示的内容组成为：地名+地址+所属行政辖区（省市区）。

提示框中的内容默认只显示12条，超出部分将不显示。

该提示框的内容需要支持鼠标选择，以及键盘中的“↑”、“↓”键的选择，选择时应有突出效果（选择突出效果），同时地图上的需要进行标注，并显示对应的地名。

当选中时（鼠标点击或键盘回车点击），本提示框消失，同时弹出“结果展示框”。此外需要根据选中数据在地图上进行标注，当前地图的级别变更为最大级别，并且在气泡框内显示明细信息（地名、地址、所属行政辖区（省市区）、联系方式等）。

效果示意：

当“搜索输入框”的内容被清除时，本输入提示框隐藏。

当点击“搜索输入框”内的查询按钮时，本输入提示框隐藏。

当“搜索输入框”的内容发生变更时，本输入提示框激活。

结果展示框

该展示框根据点击查询按钮后所得到的结果进行展示。本展示框默认为隐藏。

效果示意：

结果框中每条记录的信息将更多（地名，地址、所属行政区、联系方式等）。

所有结果将会显示，一页只显示10条，超出部分通过分页处理。

根据每页的结果，地图上全部对其进行标注。

该结果框的内容需要支持鼠标选择，以及键盘中的“↑”、“↓”键的选择，选择时应有突出效果（选择突出效果），同时地图上的标注需要区别显示。

当选中时（鼠标点击或键盘回车点击），当前地图的级别变更为最大级别，并且在标注上弹出气泡框内显示明细信息（地名、地址、所属行政辖区（省市区）、联系方式等）。此时，结果框中其他未被选中的结果将隐藏，只保留显示选中的记录并显示更为明细的信息，但同时需要留有返回按钮回到之前的查询结果列表。

效果示意：

当“搜索输入框”的内容被清除时，本结果展示框隐藏。

当“搜索输入框”的内容发生变更时，本结果展示框隐藏。