詳細(xì)設(shè)計(jì)方案 - 界面設(shè)計(jì)說明

詳細(xì)設(shè)計(jì)方案界面設(shè)計(jì)說明2016.09

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