整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
海電商是海外的增長機(jī)會(huì)點(diǎn)，本文將先介紹獨(dú)立站這股出海電商新趨勢，然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個(gè)方面與電商平臺(tái)的差異性，最后基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。
隨著國內(nèi)市場飽和，越來越多的公司轉(zhuǎn)向海外尋找新的增長機(jī)會(huì)，其中出海電商成為了最大的市場之一。2021年底艾媒咨詢顯示出海電商市場中，中國企業(yè)在海外的獨(dú)立站數(shù)量已達(dá)20萬+，所占份額從2016年9.8%提升至2021年25.6%，預(yù)計(jì)2025年將會(huì)到達(dá)50%。
什么是獨(dú)立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價(jià)的鋪貨型公司，但難見起色，之后成功轉(zhuǎn)向于依靠流量運(yùn)營和供應(yīng)鏈體系的品牌型公司，通過自己站點(diǎn)直接和用戶鏈接并發(fā)生交易。
本文將先介紹獨(dú)立站這股出海電商新趨勢，然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個(gè)方面與電商平臺(tái)的差異性，最后我們基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。
海外電商市場集中度低，亞馬遜封號(hào)熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺(tái)轉(zhuǎn)向獨(dú)立站。
根據(jù)下面頭豹研究院整理的19年各國電商占比圖可看出，中國平臺(tái)電商占比整體電商市場高達(dá)86%，而歐美國家占比為60%。同時(shí)中國自有品牌占比1%，而歐美國家平均占比高達(dá)24%。可見歐美電商市場平臺(tái)占比低，難以形成壟斷，同時(shí)自有品牌占有率高，因此品牌獨(dú)立站在海外有更優(yōu)質(zhì)的發(fā)展環(huán)境。
亞馬遜等海外平臺(tái)政策逐漸收緊，2021年亞馬遜封號(hào)潮迫使眾多國內(nèi)商家倒閉關(guān)店。同時(shí)對(duì)于新手，平臺(tái)入場門檻越發(fā)變高：注冊(cè)方式受限，通過率低以及中國賬號(hào)易被封號(hào)。與之相對(duì)是機(jī)會(huì)越發(fā)變少，平臺(tái)上流量爭奪和價(jià)格戰(zhàn)越發(fā)激烈，作為新人店鋪想在平臺(tái)獲得較好的曝光和推薦現(xiàn)在可能性極低。
近年來無數(shù)資本開始涌入獨(dú)立站。shopify作為頭部獨(dú)立站服務(wù)商股價(jià)從2019到2022上漲近10倍，22年獨(dú)立站領(lǐng)頭羊Shein市值高達(dá)千億美金, 拼多多9月上線Temu對(duì)標(biāo)Shein作為公司重點(diǎn)項(xiàng)目。這些都預(yù)示越來越多商家和公司開始關(guān)注并入局獨(dú)立站。
下圖分別是國外頭部平臺(tái)亞馬遜和獨(dú)立站Shein的首頁。亞馬遜顯得規(guī)整，統(tǒng)一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認(rèn)為自由，是獨(dú)立站和平臺(tái)本質(zhì)上的差異點(diǎn)。
為什么獨(dú)立站可以這么自由呢？
因?yàn)楠?dú)立站擁有獨(dú)立域名和頁面, 并由商家獨(dú)立設(shè)計(jì)、運(yùn)營來打造品牌。商家對(duì)于獨(dú)立站每一個(gè)環(huán)節(jié)都擁有絕對(duì)的自主權(quán)，同時(shí)帶來特定優(yōu)勢：
但獨(dú)立站的模式并不適用于所有的出海商家：
獨(dú)立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務(wù)商，比如跨境支付、倉儲(chǔ)和配送能力。而在信息流層面，更多在于商家對(duì)于用戶的觸達(dá)和轉(zhuǎn)化，這也是作為設(shè)計(jì)師可以參與并發(fā)力的點(diǎn)。
那么獨(dú)立站針對(duì)的用戶會(huì)具有什么樣的特征？國泰君安證券曾經(jīng)專門研究過Shein的用戶，主要為20-35追求時(shí)尚個(gè)性的白領(lǐng)女士，該類群體追求個(gè)性化和潮流同時(shí)注重商品性價(jià)比。因此我們認(rèn)為追求個(gè)性化，同時(shí)付費(fèi)能力相對(duì)有限的年輕人更傾向于在獨(dú)立站進(jìn)行交易。
獨(dú)立站對(duì)于用戶而言，存在觸達(dá)(多渠道)—認(rèn)知(物料+站點(diǎn))—消費(fèi)(站點(diǎn)轉(zhuǎn)化到完成交易)—傳播(多渠道)等觸點(diǎn)，在這些觸點(diǎn)打動(dòng)用戶的關(guān)鍵在于品牌認(rèn)知和主觀認(rèn)同。整個(gè)過程中，設(shè)計(jì)一方面可以在認(rèn)知階段從視覺層面通過物料、站點(diǎn)、推文傳遞品牌感知，另一方面可以在消費(fèi)階段從交互層面通過互動(dòng)、服務(wù)來建立連接和粘性。
我們認(rèn)為獨(dú)立站和平臺(tái)本質(zhì)的差異在于獨(dú)立站將商品內(nèi)容化。平臺(tái)就像貨架上擺滿各類型商品，需要用戶快速找到并進(jìn)行交易。而獨(dú)立站把商品內(nèi)容化，慢慢建立形象并輸出內(nèi)容從而和用戶建立情感聯(lián)系。那下文接著就將從導(dǎo)航、交易流程、視覺三個(gè)方面來分析兩者基于貨架和內(nèi)容體驗(yàn)上的差異性。
01.導(dǎo)航
從導(dǎo)航結(jié)構(gòu)來看，平臺(tái)更為強(qiáng)調(diào)搜索將其置于頂部，同時(shí)強(qiáng)調(diào)分類的快速篩選。而獨(dú)立站弱化搜索來節(jié)省縱向空間，頂部放置公告欄來定期公布優(yōu)惠信息。分類若較少，分類導(dǎo)航會(huì)置于products頁面下，采用頁面導(dǎo)航。分類較多則會(huì)將頁面導(dǎo)航換為分類導(dǎo)航，形成三層導(dǎo)航結(jié)構(gòu)。
然后對(duì)于導(dǎo)航路徑，平臺(tái)有兩種設(shè)計(jì)：
獨(dú)立站依據(jù)分類的層級(jí)和個(gè)數(shù)會(huì)有面包屑和樓梯變種的設(shè)計(jì)：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類的名稱和圖片。
02.交易流程
我們認(rèn)為雖然現(xiàn)在電商出現(xiàn)直播電商，內(nèi)容社區(qū)等新形式，但核心交易流程都較為固定：首頁—搜索/瀏覽—商品列表頁—商詳頁—轉(zhuǎn)化(購物車/付款)。
來到電商網(wǎng)站的用戶，可分為搜索型和瀏覽型。搜索型用戶會(huì)直接通過搜索到達(dá)商品列表頁，然后通過篩選條件找到心儀的商品進(jìn)入到商詳頁，最后選擇直接購買或者加入購物車來達(dá)成轉(zhuǎn)化。而對(duì)于瀏覽型用戶，區(qū)別在于他可能通過首頁的推薦商品、推薦分類等模塊來到達(dá)商品列表頁而非搜索。因?yàn)槭醉摫旧碇皇亲鳛槿肟冢虼私酉聛韺乃阉?瀏覽、列表、商詳、購物車/轉(zhuǎn)化來進(jìn)行分析。
平臺(tái)對(duì)于搜索框的處理較類似，將其置于頁面的中心，差異性在于點(diǎn)擊搜索框后是否會(huì)出現(xiàn)熱門搜索和搜索歷史來幫助用戶進(jìn)行決策。而獨(dú)立站都會(huì)弱化搜索框，將其置于頂部功能區(qū)。原因在于獨(dú)立站本身品類和SKU相對(duì)平臺(tái)較少，搜索的頻率需求不明顯。點(diǎn)擊獨(dú)立站搜索功能后，有兩種設(shè)計(jì)：品類較少會(huì)出現(xiàn)氣泡，同時(shí)下方顯示熱門和模糊搜索結(jié)果；品類較多出現(xiàn)大氣泡，在頁面中部強(qiáng)化搜索區(qū)。
那從瀏覽行為來看，平臺(tái)首頁有三個(gè)入口：
其中頭部的分類導(dǎo)航、商品分類和商品卡片可通用到所有平臺(tái)設(shè)計(jì)，而首屏banner旁的分類多出現(xiàn)于國內(nèi)平臺(tái)的設(shè)計(jì)中目的是提高商品分類的曝光率。而對(duì)于獨(dú)立站，只有商品分類和商品卡片入口依然存在。
獨(dú)立站另外有兩個(gè)入口：
設(shè)計(jì)目標(biāo)在于將更多分類和商品信息前置，縮短最終到達(dá)商品的路徑。
商品列表頁核心部分在于篩選+商品卡片，用戶通過對(duì)應(yīng)的篩選條件最后選擇到滿意的商品卡片。
平臺(tái)篩選區(qū)普遍使用左右結(jié)構(gòu)的設(shè)計(jì)，左邊的篩選區(qū)加上右邊的商品列表，篩選區(qū)默認(rèn)主動(dòng)展開常用而收起低頻篩選項(xiàng)。篩選項(xiàng)較多情形下操作效率較高，但占據(jù)空間大同時(shí)影響整體視覺效果。
而獨(dú)立站篩選區(qū)有兩種設(shè)計(jì)：
對(duì)于商品卡片，平臺(tái)和獨(dú)立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個(gè)數(shù)的同時(shí)瀏覽效率較高。而從細(xì)節(jié)上來看，平臺(tái)會(huì)有較多信息來強(qiáng)調(diào)信任感，因?yàn)槠脚_(tái)本身商品都由第三方商家提供，所以得給予用戶足夠信任。而獨(dú)立站之所以不強(qiáng)調(diào)，因?yàn)樗ㄟ^品牌建設(shè)來給予用戶信任感，所以獨(dú)立站放大圖片面積，縮小信任相關(guān)文字信息。獨(dú)立站另一個(gè)特征在于，條目列表頁就有較多轉(zhuǎn)化入口，基本可以直接加入購物車/詳情，來最終縮短用戶的決策路徑。
獨(dú)立站和平臺(tái)商詳頁最大區(qū)別在于首屏的信息結(jié)構(gòu)，獨(dú)立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區(qū)，而信息聚焦于最核心的款式和價(jià)格，轉(zhuǎn)化區(qū)域吸底目的為了強(qiáng)化轉(zhuǎn)化率+占用過少空間。然后平臺(tái)首屏分為三塊，將轉(zhuǎn)化區(qū)置于頁面的右方來強(qiáng)化用戶首屏下的轉(zhuǎn)化率，缺點(diǎn)在于用戶下滑到頁面下方時(shí)無法進(jìn)行轉(zhuǎn)化操作。有的平臺(tái)會(huì)將右邊轉(zhuǎn)化區(qū)懸浮，缺點(diǎn)在于會(huì)壓縮下方的商品詳細(xì)信息區(qū)。
平臺(tái)有兩個(gè)常見的轉(zhuǎn)化操作：購物車和購買，而越來越多的獨(dú)立站開始用心愿單的功能來替代原來的購買操作，其中心愿單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本，促進(jìn)更多轉(zhuǎn)化。接下來主要從心愿單，購物車，付款頁來進(jìn)行分析。
03.視覺
基于我們的設(shè)計(jì)經(jīng)驗(yàn)，網(wǎng)站的視覺設(shè)計(jì)一般有三個(gè)對(duì)應(yīng)的難點(diǎn)：品牌—如何突出網(wǎng)站品牌特色，形成差異化；節(jié)奏—如何合理排列不同視覺元素，形成視覺動(dòng)線和層級(jí)；創(chuàng)新—如何突破簡單的頁面框架限制。那下文就將基于這三點(diǎn)來分析：
（1）品牌：形成品牌感的本質(zhì)在于“形+色“，如何通過色彩和圖形來形成差異性。
這方面獨(dú)立站和平臺(tái)的差異性并不大，都是基于自身的logo品牌，提取出對(duì)應(yīng)的基本型、色彩以及感覺。然后將其運(yùn)用到網(wǎng)站設(shè)計(jì)上，比如運(yùn)營類的icon，插圖，banner以及頁面組件類如按鈕，標(biāo)簽和搜索框等。獨(dú)立站對(duì)比下延伸場景更為豐富，因?yàn)檫\(yùn)營圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。
（2）節(jié)奏：左邊是平臺(tái)首頁的布局節(jié)奏，視覺動(dòng)線都是從上往下，然后每行從左到右，變化較少。然后從視覺層次來看，除了首屏的banner區(qū)域會(huì)有不同的版式突出視覺重點(diǎn)，下面的排版節(jié)奏都較為平均，只偶爾變化來避免節(jié)奏的重復(fù)。
右邊是獨(dú)立站，可以看到視覺動(dòng)線會(huì)從頂部banner區(qū)開始，從頁面中間往下，到了后面部分才開始從左到右。從視覺層次來看，它延長頂部banner區(qū)的視覺重點(diǎn)，在首屏以下位置才開始弱化內(nèi)容。而獨(dú)立站下方內(nèi)容也基于其多元的內(nèi)容載體來采用不同的排版方式，豐富整體層次。目的在于在首屏強(qiáng)化對(duì)于用戶的視覺吸引力，保持用戶高度的專注。
（3）創(chuàng)新：想要突破單調(diào)的網(wǎng)站首頁設(shè)計(jì)，一般會(huì)選擇頭部banner和非核心信息區(qū)入手。獨(dú)立站因?yàn)槠漕^部banner區(qū)的所有運(yùn)營圖自己提供，可以通過不同配色和排版來避免的重復(fù)實(shí)現(xiàn)創(chuàng)新。另一方面，獨(dú)立站非核心信息區(qū)內(nèi)容較為豐富：比如品牌故事，博客文章，合作伙伴，對(duì)應(yīng)信息區(qū)都會(huì)有特定的布局創(chuàng)新。
第三部分本文將基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享獨(dú)立站設(shè)計(jì)避坑點(diǎn)。
出海易是去年百度B2B下面孵化新業(yè)務(wù)，它致力于幫助企業(yè)一站式出海，目前在4月已經(jīng)推出出海易SAAS產(chǎn)品并正式售賣。基于我們目前設(shè)計(jì)經(jīng)驗(yàn)和思考，如下圖獨(dú)立站設(shè)計(jì)有七類問題需要注意。
而接下來將從中選出信息缺失、圖片質(zhì)量、移動(dòng)端體驗(yàn)、國內(nèi)外體驗(yàn)差異這四類我們?cè)诔龊Ｒ讟I(yè)務(wù)實(shí)踐中完整體現(xiàn)的問題來分析。
之前提到過，獨(dú)立站相比平臺(tái)一大特色就是信息豐富且多元。但作為服務(wù)商，實(shí)際會(huì)接觸到不少初次嘗試出海的中小企業(yè)，這些商家由于自身經(jīng)驗(yàn)不足，提供的信息和物料出現(xiàn)缺失現(xiàn)象。那作為設(shè)計(jì)師面對(duì)這樣的情形，應(yīng)該如何設(shè)計(jì)以補(bǔ)救呢？
（1）商品圖片缺失：首先在SAAS后臺(tái)上傳圖片的部分設(shè)置了圖片的必填項(xiàng)，另外設(shè)置提示文字來吸引用戶上傳更多圖片。從商詳頁的排版來看，商品和商品縮略圖上下排列，這樣在商品圖只有一張的情形下，可隱藏縮略圖的內(nèi)容，不會(huì)對(duì)整體視覺效果產(chǎn)生較大影響。
（2）公司信息缺失：在每個(gè)信息模塊，給予商家調(diào)整模塊數(shù)量的自由度。商家可自由添加信息卡片的數(shù)量，一個(gè)，二個(gè)，三個(gè)，或者直接隱藏該模塊。針對(duì)不同數(shù)量的信息模塊，也設(shè)計(jì)對(duì)應(yīng)樣式來滿足商家需求。
獨(dú)立站一大亮點(diǎn)在于高質(zhì)量商品圖片，作為設(shè)計(jì)師當(dāng)然會(huì)設(shè)想商家能提供下圖左邊的圖片。但放到實(shí)際場景下商家提供的圖片質(zhì)量和效果都不可控，往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質(zhì)量很難滿足現(xiàn)有獨(dú)立站對(duì)于圖片的要求，因此從設(shè)計(jì)側(cè)通過以下三個(gè)設(shè)計(jì)策略來進(jìn)行補(bǔ)救：
設(shè)計(jì)策略1：設(shè)計(jì)統(tǒng)一且規(guī)格有限的展現(xiàn)容器
設(shè)計(jì)正方形容器，所有圖片都會(huì)自動(dòng)縮放到容器區(qū)域下，來保證不同圖片尺寸下整體視覺上的一致性。
設(shè)計(jì)策略2：設(shè)計(jì)特定的卡片樣式
對(duì)于商品卡片會(huì)有多種處理方法，樣式1直接給圖片固定底色，來形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過較大的間隔來進(jìn)行整體的區(qū)分。
樣式1這樣通過固定底色的模式對(duì)于圖片本身要求過高。而像樣式2和3只通過間距區(qū)分會(huì)帶來問題，實(shí)際下的商品圖片有的有底，有的沒底，容易產(chǎn)生不一致的場景。因此最后實(shí)際設(shè)計(jì)樣式直接給了整體背景底色，然后用白色的卡片來區(qū)分商品，同時(shí)縮小了圖片所占的面積來避免圖片質(zhì)量差的影響。
設(shè)計(jì)策略3：上傳給予規(guī)范提示和案例
SAAS后臺(tái)會(huì)設(shè)計(jì)對(duì)應(yīng)的尺寸提示，在用戶編輯上傳圖片前，頁面會(huì)有對(duì)應(yīng)默認(rèn)圖來暗示用戶合理的圖片樣式，給到商家配色和尺寸參考。
國外PC還是用戶主要購物方式，因此獨(dú)立站設(shè)計(jì)以PC為主。但隨著國外移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)端也成了商家必須要布局的部分。無論對(duì)于設(shè)計(jì)師還是開發(fā)，重新設(shè)計(jì)開發(fā)并維護(hù)PC和移動(dòng)兩套成本都巨大，因此自適應(yīng)成了這個(gè)階段下較優(yōu)選擇。下面將會(huì)分享下自適應(yīng)設(shè)計(jì)下的一些細(xì)節(jié)。
（1）導(dǎo)航區(qū)：PC端的頁面導(dǎo)航和功能區(qū)處于頁面頂部，然后是商品分類。在wise端，很難在首頁進(jìn)行復(fù)雜的頁面切換，因此將其置于左上角的抽屜下，而搜索和切換語言使用了模態(tài)的氣泡設(shè)計(jì)，更符合用戶手機(jī)端下的聚焦單一任務(wù)的使用習(xí)慣。
（2）篩選區(qū)：PC端分類篩選區(qū)在左側(cè)，默認(rèn)顯示一級(jí)分類，點(diǎn)擊展示二級(jí)分類。在wise端，將分類篩選置于商品列表區(qū)上方來留出更多展示空間，默認(rèn)收起然后以模態(tài)氣泡的形式展開。
因?yàn)楠?dú)立站針對(duì)海外用戶，所以和國內(nèi)電商設(shè)計(jì)相比有兩個(gè)問題需要注意：
（1）語言：不同國家語言會(huì)導(dǎo)致排版差異，同樣的文字在不同語言下的字符數(shù)差距較大。然后同時(shí)會(huì)帶來視覺動(dòng)線上的差別，比如下圖是中東等巴基斯坦等國家所使用的烏爾都語，該語言會(huì)帶來視覺動(dòng)線從右往左的變化。另外要考慮到不同語言下字段長度的適配情況，在排版時(shí)候盡量上下排布避免左右排布。
（2）體驗(yàn)：國內(nèi)外用戶本身操作習(xí)慣上存在差異，比如左邊是一個(gè)國內(nèi)常見的電商設(shè)計(jì)，圖片切換在主圖的下方，通過點(diǎn)擊圖片進(jìn)行切換，主要是為了留出更多的橫向空間給商品信息，但這種小圖切換然后大圖預(yù)覽由下往上的視覺動(dòng)線影響了視覺體驗(yàn)，主要是給商品信息的展示效率讓步。而右邊是國外常見的體驗(yàn)方式，商品信息較為省略，圖片切換在左圖的左側(cè)，為了從左到右更好的視覺動(dòng)線和體驗(yàn)。同時(shí)當(dāng)你hover到對(duì)應(yīng)圖片的時(shí)候，主圖也會(huì)隨之切換進(jìn)行預(yù)覽，優(yōu)化了對(duì)應(yīng)切換體驗(yàn)。
隨著全球電商的迅速發(fā)展和出海熱潮的加劇，獨(dú)立站會(huì)逐漸成為出海商家國外品牌推廣、營銷、客戶關(guān)系維護(hù)的重要抓手，同時(shí)也會(huì)給更多具有特色和渴望創(chuàng)新的設(shè)計(jì)師們，更廣闊展現(xiàn)自身才華的空間和機(jī)會(huì)。乘風(fēng)潮頭立，啟航正當(dāng)時(shí)，獨(dú)立站期待你的加入。
作者：商業(yè)用戶體驗(yàn)部
來源公眾號(hào)：百度MEUX（ID：baidumeux），百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
天想分享的界面模式它好像很次要，經(jīng)常被埋沒，但當(dāng)我們迷失在信息洪流中時(shí)，我們不得不使用它——我們最熟悉不過的篩選組件。
不妨回想一下，在日常生活中，我們是怎樣尋找信息的？可以想象以下場景：當(dāng)我們看完一本書后，覺得一句話說得特別好，想再回味一下，這時(shí)會(huì)怎么做？當(dāng)然，最直接的方式是從頭翻一遍直到找出原話（如果這本書足夠薄），這是我們最本能的尋找信息方式：直接查找。
然而，書一般很厚，直接查找顯然不切實(shí)際，但我可以根據(jù)那句話的大概意思判斷其在書中哪一章哪一節(jié)，再定位到該小節(jié)查找原句。這是我們尋找信息的第二種方式：按分類查找。
再假如，我在讀書時(shí)已經(jīng)做了標(biāo)記（畫下劃線并寫筆記），那么我就可以直接查找?guī)в袠?biāo)記的句子，這種尋找信息的方式可以定義為：按標(biāo)記查找。
綜上，在尋找信息時(shí)，我們會(huì)有三種行為模式：直接查找、按信息分類查找、按信息的標(biāo)記查找；而這三種行為模式剛好對(duì)應(yīng)著三種界面模式：搜索、導(dǎo)航和篩選。
顯然，在尋找信息時(shí)，搜索是最直接的界面模式，但由于信息實(shí)在太復(fù)雜既多層級(jí)又多維度，搜索無法覆蓋所有場景，所以才有了導(dǎo)航和篩選模式，去收窄信息范圍，提高尋找的效率。
那么導(dǎo)航跟篩選有什么區(qū)別？如果是一個(gè)低層級(jí)信息界面的話，兩者幾乎沒有區(qū)別，如圖1，兩種界面模式都好理解，只是操作上稍有不同。
圖1
但如果是一個(gè)多層級(jí)信息界面的話，單純地使用一種界面模式，可能會(huì)有非常詭異的現(xiàn)象發(fā)生。圖2左的紅框內(nèi)的信息分類維度不同于父級(jí)，而且沒有真正的父子關(guān)系，這種導(dǎo)航會(huì)讓用戶很疑惑。
圖2右的紅框內(nèi)的分類有強(qiáng)關(guān)聯(lián)關(guān)系，一旦切換了分類選項(xiàng)，另一個(gè)分類則會(huì)完全不同，這種篩選同樣也會(huì)讓用戶很疑惑。
圖2
通過對(duì)比可以發(fā)現(xiàn)篩選有以下特性：
事先解釋幾個(gè)名詞，因?yàn)橄挛臅?huì)經(jīng)常提及，如圖3：
圖3
上文說過，在低層級(jí)的界面，篩選和導(dǎo)航?jīng)]有清晰的界限，所以用于導(dǎo)航的界面模式也可以用來篩選信息。
比如，頁簽式篩選、同類型的有標(biāo)簽形式、切換按鈕形式、縱向頁簽形式等等，它們都同屬一類模式。
優(yōu)勢在于用戶可以快速切換篩選項(xiàng)目并在首屏即可了解篩選項(xiàng)有哪些。但缺陷也很明顯，維度單一難以駕馭復(fù)雜的信息，所以也衍生了二級(jí)頁簽，橫縱向頁簽同時(shí)使用等解決方案，如圖4；第二個(gè)缺點(diǎn)是，它可展示的篩選項(xiàng)有限，當(dāng)篩選項(xiàng)目過多時(shí)，盡管采用可滾動(dòng)的方法，使用效率也會(huì)大大降低。
圖4
矩陣式的篩選模式常見于信息密集型的產(chǎn)品，比如電商、視頻網(wǎng)站、O2O平臺(tái)等等，如圖5。
相對(duì)于頁簽式篩選，矩陣式可以承載更多維的信息，并且在選中多個(gè)選項(xiàng)后，用戶仍能清晰知道他的選中項(xiàng)是什么、備選項(xiàng)有哪些，理解成本低。但矩陣式占用太多頁面空間，導(dǎo)致首屏內(nèi)容呈現(xiàn)量大打折扣，所以在某些場景下，會(huì)被折疊起來。
圖5
下拉式篩選在移動(dòng)端很常見，是一個(gè)非常靈活的篩選模式，能與其他界面模式如搜索和排序等完美兼容，如圖6。
而且通過多個(gè)下拉的組合可以應(yīng)對(duì)多維的信息篩選，還有，對(duì)篩選項(xiàng)的數(shù)據(jù)格式也能很好兼容，比如日期，地址，時(shí)間等。
當(dāng)然，缺點(diǎn)在于篩選項(xiàng)隱藏較深，加大了操作門檻，對(duì)于一些高頻的篩選操作不夠友好，而且用戶難以知道備選項(xiàng)有什么。
圖6
常見于B端產(chǎn)品，其交互方式與表單輸入非常類似，形式簡單容易理解，如圖7。
可以兼容多種數(shù)據(jù)格式（數(shù)字、文本、標(biāo)簽、布爾值、枚舉值等），便于從各個(gè)維度篩選，應(yīng)對(duì)各種復(fù)雜的篩選情況。但需要配合鍵盤輸入，操作比較繁瑣，同樣占用較多空間。
圖7
從嚴(yán)格意義來講，浮層式不算是一種篩選模式，它是一個(gè)放置篩選組件的載體，但這種組合方式會(huì)帶來不同操作體驗(yàn)，如圖8。
由于界面空間有限，篩選類型多樣，篩選組件經(jīng)常沒有地方可放置，而浮層式正可解決此問題，而且浮層可以兼容任何形組件及各種組件組合。但，與此同時(shí)放置在浮層里的組件也更難被用戶發(fā)現(xiàn)。
圖8
常見于PC端，而且B端產(chǎn)品使用較多，移動(dòng)端則很少見，是浮層式的升級(jí)版，因?yàn)槊娣e更大，可承載的內(nèi)容更多，各種組件可以任性放置。
但彈窗式會(huì)有很強(qiáng)的打斷感，讓用戶感到不流暢。篩選與內(nèi)容分別位于界面的不同層，有較強(qiáng)的割裂感。
折疊式是浮層式的精簡版，折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間，針對(duì)有更多篩選需求的用戶也有更好的引導(dǎo)性。
篩選模式差不多以上幾種，當(dāng)然，對(duì)于一個(gè)復(fù)雜的頁面，不可能用一種篩選模式就可以搞定；所以能經(jīng)常看到各種篩選模式的變體和組合，如圖9。
圖9
那么到底什么情況下使用何種篩選模式？我們?cè)谠O(shè)計(jì)篩選的時(shí)候可以如何思考？顯然，使用頻率和界面空間是兩個(gè)非常重要的評(píng)判維度，除此之外，我們還可以以可見性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。
使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素，我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。同理，對(duì)于篩選模式，我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。
例如，高頻使用的條件優(yōu)先使用頁簽式篩選或矩陣式篩選，或者將低頻使用的條件收納在浮層式篩選里。
如去哪兒APP中，同樣是時(shí)間篩選組件，訂火車票的界面與訂酒店的界面卻截然不同，如圖10。
雖然在預(yù)定前用戶都已經(jīng)有較明確的目的，但車票供給量少，當(dāng)天車票很容易被搶光，所以用戶妥協(xié)并切換到前后一天的概率會(huì)比較大；但酒店的供給量大很多，酒店全滿的情況少很多，此場景下用戶更換時(shí)間的概率就少得多。
所以訂車票界面的時(shí)間組件使用了頁簽式篩選，而訂酒店界面則使用了下拉篩選。頻率除了影響使用什么模式外，還會(huì)影響篩選條件及篩選項(xiàng)的排列順序，這里就不多敘述了。
圖10
上文已提及，一些界面模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況，而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。但一些容易被忽略的可用性問題也會(huì)隨之產(chǎn)生。
既然說到可見性，不妨展開講講。可見性是一項(xiàng)重要的設(shè)計(jì)原則之一（想了解更多的設(shè)計(jì)原則可以參考我的另外一篇文章）。
一個(gè)明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？針對(duì)篩選模式的可見性，我們可以分三個(gè)要點(diǎn)去考慮：篩選條件本身的可見性、篩選項(xiàng)的可見性和選中項(xiàng)的可見性；用戶越難發(fā)現(xiàn)，即可見性越低。
通常，我們都可以以使用頻率來決定篩選條件的可見程度，但有時(shí)候也會(huì)失效；因?yàn)檎缟衔乃峒埃搅撕Y選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對(duì)信息的需求就越不一致。
比如，挑一件衣服，有人希望按品牌篩選、有人希望按價(jià)格、有人希望按顏色，我們很難判斷哪個(gè)頻率更高。面對(duì)這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會(huì)使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。
篩選項(xiàng)的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見嗎？對(duì)于這個(gè)問題，可直接以篩選項(xiàng)的多少去決策（少則可見，多則不可見），比如一些B端產(chǎn)品，如果將備選項(xiàng)都全平鋪出來可能一個(gè)屏幕都放不下，所以只能將所有篩選項(xiàng)收起。
但這是一種極端的情況，缺乏說服力。我們可以再分兩點(diǎn)去考慮：
第一，用戶對(duì)備選項(xiàng)是否足夠熟悉？比如對(duì)于一個(gè)尺碼的下拉框，我很清楚自己能選擇什么，但對(duì)于一個(gè)衣服風(fēng)格的下拉框，由于我對(duì)風(fēng)格不熟悉，不能預(yù)判這個(gè)篩選條件能起什么作用，很可能會(huì)將其忽略
第二，我們是否期望備選項(xiàng)能被用戶選中？比如，電商產(chǎn)品將品牌的備選項(xiàng)平鋪出來，可以增加品牌的曝光度，這無疑是一個(gè)可帶來利益的隱形廣告位。
選中項(xiàng)的可見性，即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。我們也可以從兩種情況考慮。
首先，用戶如何落地到此頁面？如果用戶落地到這個(gè)頁面時(shí)，系統(tǒng)已經(jīng)默認(rèn)了一些選中項(xiàng)，那么這種狀態(tài)必須能讓用戶感知。這種情況很好決策。
其次，如果用戶落地到此頁面時(shí)沒有默認(rèn)選中項(xiàng)，我們可以思考用戶是否需要回看選中項(xiàng)。試想一下，當(dāng)我們?cè)谑状魏Y選后即可找到目標(biāo)，那么我們就不需要回看選中項(xiàng)，因?yàn)槟繕?biāo)已經(jīng)達(dá)到。只有當(dāng)首次篩選找不到目標(biāo)時(shí)，才會(huì)有可能回看選中項(xiàng)。
但這時(shí)仍需分不同情況：當(dāng)找我們不到目標(biāo)時(shí)，可能會(huì)有怎樣的心理活動(dòng)？假如目標(biāo)是相對(duì)模糊的，如“我想看看近期有什么好萊塢科幻電影”，那么我會(huì)按國家、時(shí)間和電影類型三個(gè)維度去篩選，當(dāng)沒有發(fā)現(xiàn)合適的電影時(shí)，就會(huì)想：“為什么找不我想要的電影呢？”然后想：“是不是篩選條件設(shè)置錯(cuò)了？”或者想“是不是篩選范圍太窄了？”又或者想“要不換換別的電影看吧”。
無論哪種反應(yīng)，我都需要回看選中項(xiàng)，并對(duì)其修改。但如果用戶目標(biāo)非常明確，如“我就想看今年的奧斯卡最佳電影”，假如篩選結(jié)果為空，我就會(huì)認(rèn)為電影還沒上架。盡管沒有找到目標(biāo)，但我的任務(wù)也已經(jīng)結(jié)束，所以回看選中項(xiàng)的可能性也不大。
可見，在一些場景下，信息可見的重要性會(huì)相對(duì)較弱，如圖11，如此一來設(shè)計(jì)就可以在其它地方上做更多的嘗試。
圖11
數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會(huì)有性能問題。在不同場景下，用戶會(huì)發(fā)生不同的行為，對(duì)性能的要求也會(huì)不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會(huì)帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會(huì)即時(shí)刷新，而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒有“確認(rèn)”按鈕。這分別對(duì)應(yīng)著兩種不同的場景。
第一種場景，如B端產(chǎn)品中的查詢報(bào)表場景。我需要找出符合條件A、B、C的所有信息，并進(jìn)行對(duì)比分析，那么我就會(huì)設(shè)置篩選條件A、B、C后一并篩選出來，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認(rèn)”按鈕的篩選模式更符合此場景。反而即時(shí)刷新會(huì)在我設(shè)置篩選條件時(shí)造成干擾。
另外一種場景，常見于B端產(chǎn)品中的查詢列表場景。如果我想找到信息α，通過篩選A后得出10個(gè)信息，那么憑肉眼即可找出信息α，任務(wù)結(jié)束，但如果篩選A后得出1000個(gè)信息，我可能會(huì)再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。
換句話說，這時(shí)候我的心理模式是即時(shí)滿足的，只要信息縮窄到一定范圍我就會(huì)停止添加篩選條件，否則我會(huì)繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場景，但與此同時(shí)就需要考慮到性能問題。
另外，我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。變更頻次是指用戶反復(fù)使用篩選的次數(shù)，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次，而這兩種情況對(duì)性能的要求是不同的。
還是以報(bào)表和列表為例，在列表中，雖然很大概率會(huì)使用篩選來尋找信息，但由于用戶是即時(shí)滿足的，而且滿足即可，所以不會(huì)重復(fù)變更篩選條件。
而在報(bào)表中，雖然用戶會(huì)一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會(huì)高頻更換篩選項(xiàng)，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競品的日活月活等數(shù)據(jù)時(shí)，是不是會(huì)高頻地切換數(shù)據(jù)來分析比對(duì)？所以，高頻次的篩選就會(huì)對(duì)性能有更強(qiáng)的要求，而為了避免性能問題，往往也會(huì)加上“確認(rèn)”按鈕。
最難解決的其實(shí)是用戶的認(rèn)知問題，尤其在模式相對(duì)固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。
以我個(gè)人為例，騰訊視頻的搜索，其實(shí)已經(jīng)可以部分替代篩選的功能：當(dāng)我搜索“2016 喜劇”時(shí)，能搜出16年的喜劇電影，而不僅僅是標(biāo)題有“2016喜劇”字段的視頻，如圖12。
然而在我日常使用的時(shí)候，我還是按以前的老路，通過篩選來找電影，因?yàn)樵谖业恼J(rèn)知里，搜索就只能按電影名找出電影，不能通過分類來尋找。這種認(rèn)知可能需要我刻意地練習(xí)才能改變。
所以，用戶的認(rèn)知仍然是高不可攀，在我們想出一些創(chuàng)新性的篩選模式時(shí)，不要忽略用戶的認(rèn)知。
圖12
本文從各個(gè)維度分享了自己對(duì)于篩選這一界面模式的思考，但仍有一些思考點(diǎn)尚未提及，比如拓展性、排版布局和信息層級(jí)等等，由于篇幅限制只能止步于此。
我更想強(qiáng)調(diào)的是，本文通篇以可用性的角度去思考難免有失偏頗，在實(shí)際業(yè)務(wù)中我們還應(yīng)以在產(chǎn)品的角度分析并得出最合適的方案。
作者：genrry，公眾號(hào)：設(shè)計(jì)師阿余。熱愛設(shè)計(jì)，關(guān)注用戶體驗(yàn)，分享設(shè)計(jì)思考。
本文由 @genrry 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
蔚云管平臺(tái)的應(yīng)用中心為客戶提供了基于業(yè)務(wù)角度的云上資源管理能力，極大降低了維護(hù)與管理成本。上一篇文章我們已經(jīng)詳細(xì)介紹了應(yīng)用中心的自定義模板，本篇文章將詳細(xì)介紹客戶構(gòu)建好符合自身需求的應(yīng)用中心模板后，如何對(duì)應(yīng)用進(jìn)行管理，打造一套體系化的運(yùn)維管理流程，從而簡化運(yùn)維，讓管理變得更加輕松。
應(yīng)用管理從業(yè)務(wù)出發(fā)，以應(yīng)用為起點(diǎn)進(jìn)行操作、資源、環(huán)境和信息的管理，幫助企業(yè)進(jìn)行應(yīng)用的統(tǒng)一納管并通過視圖化頁面清晰明了地展示，從應(yīng)用維度劃分企業(yè)業(yè)務(wù)系統(tǒng)，為信息管理和業(yè)務(wù)管理實(shí)現(xiàn)流程體系化、規(guī)范化、線上化、明確化、可視化提供強(qiáng)有力的支撐。其中核心建設(shè)場景包括標(biāo)準(zhǔn)化應(yīng)用域管控、多云應(yīng)用數(shù)據(jù)融合、智能化應(yīng)用檢索、獨(dú)立應(yīng)用統(tǒng)一操作門戶、配置信息標(biāo)準(zhǔn)化界面及獨(dú)立應(yīng)用多環(huán)境納管等，幫助企業(yè)時(shí)刻掌握應(yīng)用全方位的情況。
應(yīng)用管理對(duì)接CMDB進(jìn)行多云15類基礎(chǔ)常用資源的管理，并進(jìn)行可視化展示。聯(lián)蔚云管平臺(tái)不僅支持用戶應(yīng)用標(biāo)準(zhǔn)化模板，也支持用戶自定義應(yīng)用模板。用戶在應(yīng)用中心模板頁面編輯成功后，短時(shí)間內(nèi)便可生成配置并賦權(quán)到應(yīng)用環(huán)境。此時(shí)，再新建應(yīng)用系統(tǒng)時(shí)便可以編輯和添加預(yù)設(shè)的應(yīng)用模板信息，結(jié)合資源環(huán)境快速創(chuàng)建應(yīng)用環(huán)境。
在應(yīng)用管理頁面，點(diǎn)擊“新建應(yīng)用系統(tǒng)”，進(jìn)入新建應(yīng)用系統(tǒng)頁面，頁面主要分為七大模塊，依次為：標(biāo)簽、基礎(chǔ)信息、負(fù)責(zé)人信息、項(xiàng)目信息、關(guān)聯(lián)其他設(shè)備、供應(yīng)商信息、其他信息，可以點(diǎn)擊收起或展開。頁面右側(cè)有錨點(diǎn)導(dǎo)航，默認(rèn)為展開狀態(tài)，點(diǎn)擊“收起”，導(dǎo)航收起，點(diǎn)擊“回到頂部”回到頁面最上方。
點(diǎn)擊標(biāo)簽?zāi)K下的下拉選擇框，為應(yīng)用選擇相應(yīng)的標(biāo)簽，在基礎(chǔ)信息模塊依次填寫相應(yīng)的信息；點(diǎn)擊“添加負(fù)責(zé)人信息”按鈕，在彈窗內(nèi)依次填寫相應(yīng)的信息，點(diǎn)擊“確定”按鈕便可以為應(yīng)用系統(tǒng)添加一條負(fù)責(zé)人信息；點(diǎn)擊“添加項(xiàng)目信息”，在彈窗內(nèi)依次填寫相應(yīng)的信息，點(diǎn)擊“確定”按鈕便可以為應(yīng)用系統(tǒng)添加一條項(xiàng)目信息。點(diǎn)擊“確定”按鈕保存頁面填寫的信息并返回應(yīng)用管理頁面，此時(shí)頁面顯示新增的應(yīng)用系統(tǒng)。點(diǎn)擊“取消”按鈕不保存頁面填寫的信息直接返回應(yīng)用管理頁面。
應(yīng)用中心頁面
新建應(yīng)用系統(tǒng)頁面
新建應(yīng)用系統(tǒng)頁面
已創(chuàng)建的應(yīng)用系統(tǒng)可通過點(diǎn)擊“詳情”查看應(yīng)用系統(tǒng)的各種信息，也可以點(diǎn)擊“修改”進(jìn)行編輯，例如負(fù)責(zé)人信息、項(xiàng)目信息等。在應(yīng)用管理頁面選擇一個(gè)應(yīng)用，點(diǎn)擊“…”，選擇“詳情”，進(jìn)入應(yīng)用詳情頁面，可查看應(yīng)用的各項(xiàng)基本信息；選擇“修改”，進(jìn)入修改應(yīng)用詳情頁面，可對(duì)應(yīng)用的各項(xiàng)基本信息進(jìn)行修改；選擇“刪除”，彈窗提示，點(diǎn)擊“確定”刪除相應(yīng)的應(yīng)用。
應(yīng)用中心-應(yīng)用管理頁面
應(yīng)用管理頁面中可以通過選擇優(yōu)先級(jí)、更新時(shí)間及標(biāo)簽來篩選需要的應(yīng)用，例如點(diǎn)擊“全部、高、中、低”，頁面中應(yīng)用系統(tǒng)將按照優(yōu)先級(jí)顯示。點(diǎn)擊“最近7天、最近30天”，以及點(diǎn)擊日歷掛件，手動(dòng)選擇開始時(shí)間、結(jié)束時(shí)間，篩選想要查看的應(yīng)用系統(tǒng)。點(diǎn)擊“高級(jí)篩選”按鈕，頁面展開高級(jí)篩選條件,手動(dòng)輸入“應(yīng)用編號(hào)”、“應(yīng)用名稱”、“負(fù)責(zé)人”設(shè)置相關(guān)的篩選條件，點(diǎn)擊“查詢”按鈕進(jìn)行搜索。點(diǎn)擊“重置”按鈕，設(shè)置的查詢條件，恢復(fù)默認(rèn)狀態(tài)。再次點(diǎn)擊“收起篩選”高級(jí)篩選條件收起。
應(yīng)用中心-應(yīng)用管理頁面-高級(jí)篩選
簡而言之，聯(lián)蔚云管平臺(tái)以應(yīng)用為中心，以用戶為主導(dǎo)地開展云管運(yùn)維。讓企業(yè)對(duì)應(yīng)用做到統(tǒng)一管理，時(shí)刻掌握應(yīng)用的全方位情況。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
