詳細設計方案 - 界面設計說明

詳細設計方案界面設計說明2016.09

界面設計方案總述基本設計思路是所有的查詢操作只通過一個文本框進行輸入，如果不進行精確類別選擇，將提供指定城市內的全局數(shù)據(jù)的模糊查詢。界面總覽展示的地圖為右上城市列表中所選的城市的地圖的全市總覽。登入時默認城市為上海。城市列表效果說明城市列表應該按省份分開顯示。效果示意如下：內部同時提供搜索框，幫助迅速定位城市。效果示意如下：定位完城市后，城市列表則收起。效果示意如下：查詢框效果說明查詢框分為搜索輸入框、類別選擇菜單欄、輸入提示框、結果展示框4大部分組成。搜索輸入框用于接收用戶輸入的查詢關鍵詞。該輸入框一直處于顯示狀態(tài)。效果示意：標注①所示的為關鍵字輸入框。所有需要搜索的內容在此輸入。該文本框主要為接收用戶所輸入的查詢關鍵字。當在查詢框輸入內容后，該文本框末尾處將出現(xiàn)一個“X”的清除按鈕控件，點擊該按鈕可以快速清除文本框中內容。參見示意圖。在輸入內容時候，如果匹配到相關結果，將會在該文本框底部彈出輸入提示框。效果示意如下：如果無匹配結果，則不彈出“輸入提示框”。如果用戶在該輸入框中輸入內容后，可以通過點擊“回車鍵”激活查詢（相當于點擊“搜索按鈕”），結果將顯示在“結果展示框”內。標注②為類別菜單通知欄。該通知欄用于提示用戶當前進行的搜索類別為何種類別。同時當用戶進行搜索的時候，所要進行的搜索方式也據(jù)此決定。此處的圖標由用戶在“類別選擇菜單”中所點選的決定。用戶在“類別選擇菜單”中點選菜單后，其對應的圖標也會顯示在此。標注③為搜索按鈕。點擊該按鈕后，如果“關鍵字輸入框”內有輸入的內容，則將激活查詢，否則將不會做任何動作。類別選擇菜單欄用于給用戶選擇所要進行的查詢方式。本菜單欄默認為隱藏。（建議菜單通過數(shù)據(jù)接口獲得）效果示意：該菜單默認選擇為“定位搜索”。目前該菜單欄僅包含兩級菜單選擇。父菜單菜單名菜單級別是否可點選備注定位搜索1是全局搜索。定位搜索下的所有類別數(shù)據(jù)搜索。定位搜索地名地址定位2是老系統(tǒng)中的“地標查詢”+“地名地址查詢”+“地表查詢”交叉路口查詢2是原來的“地址定位”道路查詢2是4s店查詢2是修理廠查詢2是區(qū)域搜索查勘區(qū)查詢1否返修區(qū)查詢2是當鼠標略過可點選菜單時，應有突出效果（鼠標突出效果），鼠標移開時，突出效果清除。當點選任一可點選菜單后，整個“類別菜單欄”將隱藏。同時，所點選的菜單的圖標會顯示在“搜索輸入框”的“類別菜單通知欄”內。點選時，不會觸發(fā)調用查詢接口，故將不會彈出“輸入提示框”，以及“結果展示框”。如果點選時，“搜索輸入框”中有輸入的內容，該內容將保持。當該菜單欄彈出的時候，需要突出顯示和“搜索輸入框”內的“類別菜單通知欄”中圖標一致的菜單（通知欄突出效果）。該突出效果，與之前的鼠標略過的突出效果需進行區(qū)別。如果鼠標略過的菜單和通知欄中的菜單一致，則突出效果使用通知欄突出效果。關于菜單欄的隱藏與現(xiàn)實本菜單欄默認為隱藏。僅在以下情況時顯示：1、文本框無輸入內容，且鼠標左鍵點擊文本框的時候2、鼠標點擊或略過“類別菜單通知欄”的時候當菜單處于顯示狀態(tài)時，隱藏的條件設定如下：1、鼠標點擊查詢框組件以外的任意處2、用戶點選了該菜單中的任意一個可以點選的菜單3、文本框輸入內容發(fā)生變化時，菜單欄隱藏輸入提示框該提示框主要為配合用戶在“搜索輸入框”中輸入內容時，根據(jù)相關接口返回的結果進行輸入結果提示。本提示框默認為隱藏。效果示意：提示框中的顯示的內容組成為：地名+地址+所屬行政轄區(qū)（省市區(qū)）。提示框中的內容默認只顯示12條，超出部分將不顯示。該提示框的內容需要支持鼠標選擇，以及鍵盤中的“↑”、“↓”鍵的選擇，選擇時應有突出效果（選擇突出效果），同時地圖上的需要進行標注，并顯示對應的地名。當選中時（鼠標點擊或鍵盤回車點擊），本提示框消失，同時彈出“結果展示框”。此外需要根據(jù)選中數(shù)據(jù)在地圖上進行標注，當前地圖的級別變更為最大級別，并且在氣泡框內顯示明細信息（地名、地址、所屬行政轄區(qū)（省市區(qū)）、聯(lián)系方式等）。效果示意：當“搜索輸入框”的內容被清除時，本輸入提示框隱藏。當點擊“搜索輸入框”內的查詢按鈕時，本輸入提示框隱藏。當“搜索輸入框”的內容發(fā)生變更時，本輸入提示框激活。結果展示框該展示框根據(jù)點擊查詢按鈕后所得到的結果進行展示。本展示框默認為隱藏。效果示意：結果框中每條記錄的信息將更多（地名，地址、所屬行政區(qū)、聯(lián)系方式等）。所有結果將會顯示，一頁只顯示10條，超出部分通過分頁處理。根據(jù)每頁的結果，地圖上全部對其進行標注。該結果框的內容需要支持鼠標選擇，以及鍵盤中的“↑”、“↓”鍵的選擇，選擇時應有突出效果（選擇突出效果），同時地圖上的標注需要區(qū)別顯示。當選中時（鼠標點擊或鍵盤回車點擊），當前地圖的級別變更為最大級別，并且在標注上彈出氣泡框內顯示明細信息（地名、地址、所屬行政轄區(qū)（省市區(qū)）、聯(lián)系方式等）。此時，結果框中其他未被選中的