大廠案例!PC端地圖頁面交互設(shè)計規(guī)范復(fù)盤
設(shè)計規(guī)范與產(chǎn)品相似,會有不同的發(fā)展階段,不同階段下的規(guī)范覆蓋內(nèi)容不盡相同。隨著物流業(yè)務(wù)場景的多樣變化,便于用戶更可視化獲取和操作信息的地圖頁面變得復(fù)雜多樣,本文基于新衍生出的物流業(yè)務(wù)場景,對地圖交互規(guī)范升級進(jìn)行了分析總結(jié)與反思,以期實現(xiàn)設(shè)計提效和保證產(chǎn)品一致性。
一、背景與意義
隨著物流場景業(yè)務(wù)的不斷變化,許多后臺系統(tǒng)中都融入了地圖的展示和操作,便于用戶更可視化獲取和操作信息。這意味著地圖的設(shè)計形式越來越多樣化,地圖交互規(guī)范的 1.0 版本已經(jīng)無法覆蓋大部分用戶場景,因此需要結(jié)合新衍生出的物流業(yè)務(wù)場景對地圖交互規(guī)范進(jìn)行升級。本次升級將對產(chǎn)品設(shè)計、研發(fā)開發(fā)和用戶使用上都產(chǎn)生積極作用:
- 產(chǎn)品設(shè)計:保障產(chǎn)品內(nèi)不同模塊的設(shè)計一致性,同時提高不同設(shè)計師間的設(shè)計、協(xié)作效率
- 研發(fā)開發(fā):通過定義的標(biāo)準(zhǔn)規(guī)范,提高流程、組件的復(fù)用率,提高整體開發(fā)效率
- 用戶使用:讓用戶能夠在產(chǎn)品全局感受到統(tǒng)一且完整的體驗,降低使用成本和學(xué)習(xí)難度
二、洞察與分析
設(shè)計規(guī)范與產(chǎn)品相似,會有不同的發(fā)展階段,不同階段下的規(guī)范覆蓋內(nèi)容不盡相同。我們要搭建合理的設(shè)計規(guī)范,需要觀內(nèi)視外,以原子設(shè)計理論為指導(dǎo)原則,通過回溯過往設(shè)計內(nèi)容,定義規(guī)范分類,明確內(nèi)容優(yōu)先級(覆蓋面廣、復(fù)用率高),沉淀優(yōu)化成完整的交互規(guī)范,然后再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗,進(jìn)一步優(yōu)化流程和效率。
1. 現(xiàn)狀及業(yè)務(wù)場景特殊性分析
通過收集整理業(yè)務(wù)場景下不同頁面流程,與先前 1.0 版本進(jìn)行差異性對比,我們明確了需要增加或優(yōu)化升級的核心模塊:
(1)地圖頁面布局
隨著 B 端場景演變的多樣化復(fù)雜化,我們發(fā)現(xiàn),地圖頁面布局愈發(fā)呈現(xiàn)不定式,目前已經(jīng)衍生有"左側(cè)面板+地圖底圖、右側(cè)面板+地圖底圖、左右兩側(cè)雙面板+地圖底圖、左側(cè)雙面板+地圖底圖"等多重布局樣式,這影響著地圖頁面的一致性,對于開發(fā)資源來說也是一種浪費。
(2)頁面要素尺寸
當(dāng)前用戶使用設(shè)備屏幕的分辨率不一,小屏用戶占比依舊不少,甚至有的用戶系統(tǒng)頁面默認(rèn)按照 150%顯示,這就要求我們在設(shè)計地圖頁面中關(guān)注小屏分辨率,既要保證用戶可以看清頁面面板中的信息,也要保證地圖區(qū)域足夠大以支撐在地圖區(qū)域中的交互操作。因此,對于地圖頁面要素的尺寸規(guī)定具有必要性。
(3)地圖底圖下鉆
最常見的地圖下鉆場景是"連續(xù)性下鉆",即通過鼠標(biāo)滾輪、觸控面板手勢、放大縮小按鈕等方式實現(xiàn)地圖底圖的連續(xù)放大縮小,但此種下鉆交互只能覆蓋一部分常規(guī)業(yè)務(wù)場景,對于我司的多級業(yè)務(wù)區(qū)域劃分"區(qū)域-戰(zhàn)區(qū)-片區(qū)-營業(yè)部"來說不具有操作便捷性,當(dāng)前需要配合地址選擇器交互來實現(xiàn)到特定某一層級的下鉆。
(4)基礎(chǔ)控件與組件
場景的多樣化帶來了基礎(chǔ)控件與組件的升級,如點元素中重合點新場景以及點與面板聯(lián)動交互、線元素中飛線關(guān)系場景、面元素中的多重?zé)崃D等。
2. 競品分析
在定義規(guī)范時,可以站在前人肩膀上,常規(guī)規(guī)范可以快速對比參考,以保證用戶習(xí)慣延續(xù)性,具有業(yè)務(wù)場景特性的可以集合業(yè)務(wù)綜合考慮,這樣可以使整個規(guī)范制定效率更高,科學(xué)性、指導(dǎo)性更強。
我們對地圖類競品的下鉆交互、頁面布局、面板操作等功能層、表現(xiàn)層進(jìn)行了對比分析,競品主要包括:配送運輸類產(chǎn)品,例如順豐、三通一達(dá)、美團(tuán)、滴滴等;地圖服務(wù)類,如高德地圖、騰訊地圖、百度地圖、蘋果地圖、必應(yīng)地圖、谷歌地圖等;使用地圖服務(wù)的其他各類產(chǎn)品,如購房租房類產(chǎn)品(自如、鏈家、安居客、貝殼)、出行旅游類(攜程、南方航空、大眾點評、58 同城、馬蜂窩)等。
通過分析我們得出:
三、洞察與分析
1. 規(guī)范普適性
(1)正向梳理現(xiàn)有產(chǎn)品的設(shè)計形式,抽離相同點
輸出規(guī)范前先梳理各個產(chǎn)品線中的業(yè)務(wù)需求,統(tǒng)計場景類型,找到相同點,其中包括用戶目標(biāo)的相同點、操作的相同點等。此處需要注意的是,規(guī)范定義的是覆蓋面廣、復(fù)用率高的通用場景,因此需要明確規(guī)范的邊界,有的放矢,明確規(guī)范內(nèi)容的優(yōu)先級,而不是事無巨細(xì)。
(2)反向套用設(shè)計規(guī)范至業(yè)務(wù)需求,判斷規(guī)范的適用性
輸出規(guī)范后以現(xiàn)有的業(yè)務(wù)需求為例,看規(guī)范是否能適配需求。
(3)前瞻性設(shè)計,提升規(guī)范的拓展性
進(jìn)行設(shè)計規(guī)范定義時,既要貼合當(dāng)前業(yè)務(wù)場景,覆蓋當(dāng)前場景需要,也需要富有前瞻性,發(fā)掘出可能衍生出的潛在用戶場景和需求,便于后續(xù)更好的復(fù)用和迭代。
2. 界面易用性
(1)優(yōu)化信息架構(gòu),保證信息易讀性
地圖類頁面與其他頁面的最大差異就是信息的展示空間被壓縮,此時我們也應(yīng)當(dāng)保證信息的易讀性,通過對信息架構(gòu)的梳理幫助用戶高效明確的或許信息
(2)狀態(tài)可感知,防止用戶迷失
用戶與地圖頁面交互時應(yīng)當(dāng)即時展示出當(dāng)前的狀態(tài),例如正在查看的信息,已經(jīng)篩選的信息等,讓用戶能感知到當(dāng)前處在什么環(huán)節(jié)及什么狀態(tài)中。
(3)操作直接,提升交互的自然度
地圖的展示也是一種信息可視化的方式,應(yīng)當(dāng)提供對地圖直接操作的方式,例如地圖的縮放、信息的下鉆等,提升人機交互的自然性和直觀性。
(4)原控件的沿襲,貼近用戶認(rèn)知
地圖頁面是根據(jù)業(yè)務(wù)的變化新衍生出來的頁面,在原來的后臺系統(tǒng)中存在較少,在設(shè)計過程中我們需要盡量保持與其他頁面控件/組件的一致性,或基于原控件/組件進(jìn)行簡單的變形,降低用戶的首次學(xué)習(xí)成本。
3. 使用高效性
(1)減少頁面跳轉(zhuǎn),提升沉浸感
在用戶進(jìn)行任務(wù)處理的過程中應(yīng)當(dāng)盡量減少對用戶的打斷性,包括彈窗、浮層、抽屜的出現(xiàn)關(guān)閉或頁面間的跳轉(zhuǎn)等,尤其在地圖頁面中用戶常常需要將地圖與信息對照查看,所以減少頁面跳轉(zhuǎn)就變得尤為重要。如不得已要有頁面跳轉(zhuǎn)時應(yīng)當(dāng)為用戶提供清晰可見的返回路徑,避免用戶的迷失
(2)減少視線橫跳,關(guān)聯(lián)信息就近展示
我們在業(yè)務(wù)場景和競品分析中發(fā)現(xiàn)常有地圖類的頁面將地圖放在中間,屏幕左右兩側(cè)放信息面板。這種方式的好處是將地圖放在中心位置,信息布局看起來也比較均衡對稱,但缺點是用戶查看信息常常需要在面板間橫跳,信息瀏覽視線較為混亂和冗長。因此當(dāng)容器面板上的信息具有關(guān)聯(lián)性時,我們應(yīng)當(dāng)通過設(shè)計減少用戶的視線橫跳,提升用戶的信息閱讀效率。
四、設(shè)計方案
1. 地圖頁面布局
在設(shè)計布局前整理地圖頁面的要素,我們研究后發(fā)現(xiàn) B 端物流場景中地圖頁面要素可以分為:導(dǎo)航欄、地圖展示、信息或操作面板、查詢或篩選區(qū)域、地圖圖例、地圖常用操作(包含縮放、全屏等)以及地圖的工具欄等。確定頁面要素后將 B 端物流系統(tǒng)的地圖類頁面用戶場景進(jìn)行歸類,我們將其總結(jié)為輔助查看場景和操作配置場景兩大類:
輔助查看場景:輔助用戶更直觀的獲取信息。例如物流場景中末端快遞站點對所屬各路區(qū)作業(yè)情況的監(jiān)管,通過地圖能知道各路區(qū)的相對位置,路區(qū)的實際面積,路區(qū)的作業(yè)量等信息。
操作配置場景:用戶直接在地圖上進(jìn)行相關(guān)操作。例如快遞站點的管理者對所屬路區(qū)進(jìn)行自定義的范圍規(guī)劃和繪制等。
(1)單面板布局
單面板布局是從以上兩大場景入手,分析了每個場景中地圖的作用、用戶的行為和視線流后將地圖的要素進(jìn)行布局設(shè)計。地圖頁面中最重要的兩個元素是面板以及地圖,在輔助查看場景中地圖主要起到輔助性作用,用戶還是以面板中的信息為主,因此遵循 F 型視線流將面板置于左側(cè)地圖置于右側(cè),用戶進(jìn)入頁面后優(yōu)先獲取面板中的信息再對照地圖進(jìn)行查看。在操作配置場景中用戶主要是在地圖上進(jìn)行可視化的繪制操作等,用戶會以地圖為主,因此將地圖置于左側(cè)面板置于右側(cè)。與此同時,頁面的頂部區(qū)域用于查詢欄和工具欄的展示,頁面的底部區(qū)域用于圖例的展示,地圖的常用操作區(qū)域位于地圖區(qū)域的右下角。
此外,由于這類頁面中地圖占據(jù)了一部分頁面空間,導(dǎo)致其他信息展示空間變小,因此我們可以在用戶進(jìn)入頁面時讓側(cè)邊導(dǎo)航欄自動收起,放大頁面展示區(qū)域,讓用戶更好的獲取信息。
(2)雙級面板布局
在實際的業(yè)務(wù)場景中避免不了會出現(xiàn)信息較多的場景,此時為了減少頁面的跳轉(zhuǎn)可以采用雙級面板的布局方式。設(shè)計師可以通過對信息架構(gòu)的梳理,將優(yōu)先級較高的信息優(yōu)先在第一級面板上展示出來,其余信息暫時隱藏,用戶通過點擊等交互可以展開詳情信息的面板對其余信息進(jìn)行查看。需要注意的是,當(dāng)有雙級面板時應(yīng)當(dāng)注意詳情面板的展開關(guān)閉與面板的展開收起做交互方式的區(qū)分,避免用戶產(chǎn)生困惑。如下圖所示,我們可以通過點擊第一級的信息展開詳情面板,點擊詳情面板右上角關(guān)閉,面板的收起是對兩級面板的統(tǒng)一收起。
2. 頁面元素尺寸
在 B 端場景中部分用戶的電腦默認(rèn)按照 150%顯示,這使得在小屏電腦上設(shè)計的面板變得過大會導(dǎo)致地圖展示區(qū)域過小,因此,頁面元素尺寸的規(guī)范有助于適配不同分辨率的屏幕,特別是最小分辨率設(shè)備,保證信息易讀。通過行業(yè)實踐經(jīng)驗、競品要素尺寸對比分析以及結(jié)合實際的使用場景,我們對頁面要素尺寸進(jìn)行了界定:
對于單級信息面板:
單塊信息面板的寬度比例在頁面整體寬度的 25%-30%之間,地圖區(qū)域在頁面整體寬度的 50-55%之間,根據(jù)場景適當(dāng)留大地圖區(qū)域,不建議地圖區(qū)域小于 50%。
對于兩級信息面板:
(1)每級面板的寬度比例在頁面整體寬度的 25%-30%之間,兩級面板的總寬度占頁面整體寬度的 50%以內(nèi)
(2)地圖區(qū)域?qū)挾日柬撁嬲w寬度的 50%以上,根據(jù)場景適當(dāng)留大地圖區(qū)域,不建議地圖區(qū)域小于 50%
3. 地圖下鉆
在我們實際業(yè)務(wù)場景中,除了連續(xù)性縮放地圖底圖場景,我們還存在著特殊業(yè)務(wù)場景,例如當(dāng)前我們的網(wǎng)點是按區(qū)域-戰(zhàn)區(qū)-片區(qū)-營業(yè)部多級劃分的,因此用戶想要下鉆到某一特定層級地圖頁面時,例如海淀片區(qū),就很難通過連續(xù)縮放下鉆的方式快速觸達(dá),而且實現(xiàn)某一特定層級的快速切換也是不易的。梳理地圖下鉆場景下用戶的需求,我們發(fā)現(xiàn)有以下幾點:
- 滿足用戶常規(guī)或特定層級的下鉆/上卷訴求;
- 明確告訴用戶當(dāng)前所處的"層級位置";
- 可以讓用戶快捷切換其他地區(qū);
對于下鉆上卷需求,我們規(guī)范了兩種交互以滿足不同場景需要,
(1)常規(guī)的以鼠標(biāo)滾輪、縮放按鈕或觸控手勢為主的連續(xù)性下鉆交互:
- 鼠標(biāo)滾輪操作:滾輪向上滑動可從鼠標(biāo)中心點放大地圖;滾輪向下滑動可從鼠標(biāo)中心點縮小地圖。
- 觸控板操作:雙指捏合或同時向上移動縮小地圖,雙指擴張或同時向下移動放大地圖。
- 頁面按鈕:點擊地圖右下角「+-」按鈕,可從屏幕中心點位置整體放大縮小。
(2)通過點擊交互實現(xiàn)的層級式下鉆和上卷:
- 對于地圖底圖的信息呈現(xiàn)上我們進(jìn)行了視覺降噪,可以使用戶聚焦視線在核心區(qū)域;
- 各層級圍欄進(jìn)行明確劃分,當(dāng)鼠標(biāo) hover 到某一區(qū)域時,該區(qū)域會高亮凸顯出來,點擊該區(qū)域就可以下鉆,點擊邊界圍欄外的空白區(qū)域就可以上卷;
- 除此之外,為了用戶可以知道自己所處的位置和快速切換其他區(qū)域,我們將面包屑和選擇器進(jìn)行了結(jié)合優(yōu)化,輔助用戶快速導(dǎo)航。
五、總結(jié)反思/設(shè)計要點
在進(jìn)行地圖規(guī)范定義過程中,除了對設(shè)計過程進(jìn)行把控和沉淀,我們也要關(guān)注規(guī)范設(shè)計完成后的效果監(jiān)控,實現(xiàn)完整設(shè)計閉環(huán)。
(1)持續(xù)跟進(jìn)規(guī)范使用效果
設(shè)計規(guī)范是不斷迭代生長的,它會隨著業(yè)務(wù)場景的變化而逐漸優(yōu)化完整,因此,我們完成設(shè)計規(guī)范的定義僅僅是階段性成果,我們還需要階段性的回顧規(guī)范,遇到規(guī)范未能覆蓋或無法指導(dǎo)設(shè)計的地方,可以展開新一輪的提煉、總結(jié)、沉淀,再反哺規(guī)范,形成正向循環(huán)促使設(shè)計和規(guī)范不斷完善。
(2)關(guān)注文檔使用便捷性
我們輸出設(shè)計規(guī)范是為了保證產(chǎn)品設(shè)計的一致性,同時也是為設(shè)計師提供設(shè)計工具和指導(dǎo),提高設(shè)計效率,因此在輸出設(shè)計規(guī)范文檔時還需要考慮設(shè)計師使用文檔的便捷性,即如何讓設(shè)計師可以快速從文檔中找到并且使用需要的內(nèi)容。
(3)降本提效
當(dāng)我們完成了設(shè)計規(guī)范定義后,可以和研發(fā)側(cè)溝通,將常用組件封裝成標(biāo)準(zhǔn)組件。這一步是非常關(guān)鍵也是重要的一步,這將大大提高我們后續(xù)的組件復(fù)用率,保證設(shè)計還原度,降低重復(fù)性走查的耗時。
作者:京東JellyDesign
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)