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