首頁 > 網頁教程 > 設計分享 > 垂直電商APP首頁設計總結

江苏十一选五今天的:垂直電商APP首頁設計總結

時間:2017-08-22    來源:優設網

江苏十一选五开奖公告 www.ervgn.com 上一篇文章我介紹了B2C綜合類電商App首頁設計,得到了非常多的關注。這篇介紹垂直類電商的首頁設計。

上篇回顧:《超全面!可能是最詳細的電商首頁設計總結》

那么首先讓我們了解下什么是垂直類的電商。

B2C垂直電商細分

淘寶的商品品類(SKU)是以數十億計的,天貓和京東也應該在數千萬的級別。海量的商品品類、魚目混雜的商家以及參差不齊的商品為消費者的購物帶來了極大的選購時間成本。消費者在這樣的購物環境中找到適合自己的商品有時并不比大海撈針容易多少,而其中假冒偽劣商品的大量存在更是增加了購物的難度。

相對于B2C綜合商城的廣而博,還有一種小而美電商形態叫做B2C垂直電商,就是只專注售賣一個或者多個相關品類的電商。鑒定一個電商是否垂直,就是能否找到一個共同屬性的用戶群體。比如女性,文藝青年等。垂直電商的價值就在于其站在獨立第三方的角度,從海量的商品中為消費者做了一次精選,平臺需要為這些商品做信用背書,所以這些商品基產品質量也相對有保證,能通過口碑逐漸地在消費者中間建立信任感。

模式優缺點:

垂直類電商優點是:面對的客戶群體有一致的屬性。有了這個大的前提,那么很容易知道客戶在哪里,他們喜歡和關注什么,可以有針對性的精準營銷。而且客戶群體的集中和專一,會讓其更有歸屬感。

垂直類電商缺點是:商品品類單一,用戶重復購買率低。就是用戶想買其他商品你這里沒有的賣,那么用戶可能選擇綜合類B2C電商平臺。所以垂直類電商在發展到一定程度后,業績增長會遇到天花板,于是就開始擴充品類,走大而全的道路。又會遭到大的B2C商城的競爭。不管是從商品還是價格的角度上來說,淘寶、天貓以及京東這些綜合類的B2C電商,都存在大量的商品可以替代垂直類電商。

常見的垂直電商App

B2C垂直里面,一些應用的商品品類比較多。比如母嬰電商這個大的垂直分類,里面有服飾、鞋子、奶粉等多個小的品類。這些應用相當于垂直電商里的綜合類。

綜合類的垂直電商

因為品類比較多,所以頁面承載的信息密度比較高。所以頁面設計采用類似綜合B2C商城的設計。

△貝貝和聚美優品首頁

垂直電商里還有一些垂直細分類。例如各種鞋子和襪子、奢侈品類、食品類、箱包、水果類、鉆戒和珠寶類、酒、養生保健品類、禮品玩具類、鮮花商城、居家類、汽車用品、藥店等。

這些細分類隨著時間有的逐漸消逝,如賣鞋子的樂淘。而留下來各種時尚潮品的綜合推薦類、家居類居多。這些垂直細分的商品品類不是很多,所以頁面設計大多采用大的留白簡約型設計。本節文章重點去分析推薦一些垂直細分類的電商。

垂直電商App的首頁結構

垂直電商的用戶,可能購物的目的性不是很明確,一般都會以逛為主,通過逛發現自己喜歡的一些商品完成購買行為。所以首頁會放置各種形式的商品推薦。推薦形式一般有

  • 品類或者品牌中熱門單品的推薦。
  • 以專題形式的某一類商品的集中推薦,以商品推薦為主。
  • 如果有達人推薦的子頻道,會在首頁有露出,通過一些意見領袖的推薦,
  • 知識庫,我的理解還是一種專題的合集,比如什么場合適合穿什么衣服,什么季節適合吃什么,如何選擇合適的鍋。當然這些知識里面少不了各種商品的推薦。
  • 其他一些各種小頻道欄目的露出。

因為綜合類電商平臺??槎?,每個??槎伎贍艽郵裟掣霾棵?,需要平衡各種部門事業部的利益。設計師設計的頁面體現的是各種協調的意志。而垂直類電商的??橄啾染蛻俚畝?,設計師有更多自由去考慮各種??櫚納杓莆侍?。知道了垂直類電商的首頁的內容組成,我們開始看垂直類電商的具體??樽槌?。

???:標題欄

每個應用都有一個標題欄,這成了App的標準設計了。標題欄上一般會有三個重要的元素組成:logo圖形或者文字、搜索頁的入口、購物車的圖標。

視覺設計1:品牌logo

標題欄放置的Logo文字會進行字體設計,垂直類電商一般會非常重視品牌的露出,所以這里不會使用系統默認的字體,而是貼圖使用設計好的Logo文字或者Logo圖形。

△造作標題欄使用了logo圖形,其他使用了字體設計的logo

視覺設計2:搜索入口

大多數垂直類電商,更希望于用戶瀏覽推薦內容,購買推薦活動商品。而不是直接通過搜索去找到相應商品,去完成購買行為。所以垂直類電商App會有意識的弱化商品搜索。不同于B2C綜合類電商導航欄上醒目的搜索欄,美食電商Enjoy和興趣導購life首頁,直接在導航欄右側放置了一個搜索圖標。

△美食電商Enjoy和興趣導購life首頁

如果你的商品品類并不是很多,那么用戶通過關鍵詞搜索很難搜到東西。所以一些應用干脆把搜索和商品分類頁進行結合設計。例如造作點擊搜索,進入的搜索頁就是商品的分類頁。

△造作的首頁和分類頁

有的垂直類電商品類并不多,所以干脆直接去掉了搜索入口。在2016年的唯品會的App甚至極端的去掉了搜索功能,希望用戶在頁面可以停留更長的時間。這種想法顯然有點一廂情愿,因為唯品會的品類可不少,這樣的設計遭到了很多用戶的反對。在最新版本的唯品會又悄悄的把搜索功能加了回來。所以留不留搜索入口還是要看你的品類是否足夠豐富。

???:分類???/h4>

由于垂直電商的品類不是那么多。子頻道也有限,所以不需要和綜合類電商一樣,用圖標的形式作為??榭燜偃肟?,而是直接設計為Tab標簽欄的設計形式,放置在標題欄下面,方便用戶快速瀏覽切換。

視覺設計1:底部標簽欄

Tab標簽欄如果類別比較多的時候采用橫滑的設計形式。如果應用的頻道比較少,例如造作應用,甚至可以直接把標簽欄設計在底部,相當于整個底部標簽欄的作用,當然底部標簽欄重要的“我的”???,入口放置在頂部標題欄上。

△造作首頁底部標簽欄

視覺設計2:滑動隱藏標簽欄

一些垂直類電商的首頁設計形式單一,完全由banner圖構成。用戶向上滑動頁面,標題欄會自動隱藏,讓用戶有更大的頁面顯示面積。例如Life應用,至于向上滑動多少像素開始隱藏標題欄,你需要給程序員定義出高度。

△Life 滑動隱藏標簽欄

良倉的首頁并沒有采用這種滑動隱藏標題欄的設計,我猜測因為良倉的底部欄目太多,沒有給購物車留下一個單獨的位置。所以可能為了強調購物車的全局顯示,所以固定欄頂部標簽欄。

當然我認為這種想法可能也說不通,因為首頁是不太可能促成交易行為,更多是引流的作用。我認為良倉底部的分享是一個很雞肋的功能,本質就是一些美圖商品推薦而已,如果把這個頻道降級放進其他位置,把這個位置留給購物車。我估計設計師就可以舒心的使用隱藏標題欄設計。

△良倉固定的標簽欄

???:橫幅廣告

由于垂直類電商的信息密度低,所以有足夠大的空間去放置Banner。Banner的常見比例有16:9和1:1兩種。也就是750*422和750*750。一般Banner圖片設計還是以750寬度的iphone6/7為基準。至于更大尺寸的iphone6/7plus還是使用這個圖片,因為從節省帶寬的角度完全沒必要那么大的尺寸。2X的Banner圖給3X用也是足夠的。

那么圖片的比例什么時候使用16:9,什么時候使用1:1了?還是從內容的角度進行分析。

視覺設計1:16:9的Banner圖

如果你的應用展示的Banner圖是類似專題性質的。圖片只是一個參考作用,用戶是不能從大圖看到更多商品信息,需要更多文字說明來輔助閱讀,圖片比例選擇使用16:9。例如旅游的產品圖片就適合選用16:9。比如首頁你要做一個歐洲的路線,你只放巴黎的埃菲爾鐵塔的圖片,那么提供信息量是遠遠不夠的,必須加上德法意深度10日游的文字說明。例如造作展示的都是家居套裝專題,而不是具體某個家居的單品。所以使用16:9 Banner圖片比例。

△造作首頁的16:9 Banner圖

視覺設計2:1:1的Banner圖

如果你的應用展示的Banner圖是類似商品性質的。圖片具有重要的參考作用,用戶通過觀看精美的圖片,不用太注重文字內容的,就可以吸引點擊。圖片比例選擇使用4:3。例如最美有物的Banner圖是以說明單個商品為主,不需要太多文字,用戶也能看的明白,簡單的說有圖片就夠了,所以圖片比例選擇4:3。

△ 最美有物的1:1 Banner圖

???:卡片化內容推薦

垂直類電商,首頁需要放置各種專題推薦,來導購各種商品。各種編輯精選,達人推薦,熱賣商品。對于用戶來說本質就是推薦商品。所以用戶并不在乎你的內部各種叫法分類。那么一些電商直接打破了那種綜合B2C電商的豆腐塊做法。而是用了卡片化設計。各種推薦內容就是一個個卡片設計,這種設計的優點就是足夠精簡,看起來有格調感。缺點就是信息密度很低,容納不了足夠多的信息。

視覺設計1:橫向卡片

想去應用采用了橫向大卡片的設計。啟動畫面推薦的商品,通過一個動畫切換直接顯示在了首頁的默認第一個卡片。通過這種強調的手法,讓用戶足夠聚焦。這個橫向卡片有一個缺點就是可容納信息量不能太大,所以只適合做單一類型的內容卡片。如果試圖在卡片上加上各種復雜的??檳諶?。一旦卡片過多,用戶在橫向滑動卡片的時候,容易失去位置感。我在哪個???,我剛才看的??樵諛睦?,用戶容易產生困惑,這是一個魚與熊掌不可兼得的問題。

△想去的啟動頁和首頁卡片化設計

視覺設計2:縱向卡片

另外一種大卡片設計就是縱向卡片,最美有物的首頁卡片是縱向滑動的。同橫向滑動相比,滑動的易用性略好于橫向滑動,因為用戶也更習慣于上下滑動。縱向滑動的信息承載度更低于橫向滑動,因為需要頁面需要留出足夠的區域,去放置更多前后卡片,去營造卡片的上下立體感。這樣的立體設計可以給予用戶更好的位置感。因為設計可用區域小,所以更多通過精心標題設計去吸引用戶點擊。

△最美有物的首頁卡片化設計

???:樓層Banner

之前我們說過垂直細分類的頻道分類可能沒有那么多,所以不需要像B2C綜合類電商那么復雜的設計形式??贍苤苯右緣ヒ壞淖ㄌ釨anner形式展現,從上到下都是Banner形式的樓層。

視覺設計1:圖片的比例

因為Banner設計的形式比較單一,采用圖片+文字的視覺樣式。每個樓層就是一個小???,那么??橛肽?櫓淶娜綰甕ü泳跏侄謂星至??Life應用采用了1+N的設計形式。設計樣式上,Life上半部分大Banner加半透明黑底,下半部分用白色背景,有一個白色上三角,這樣很清晰讓用戶明白,下半部分的商品是從屬于上半部分的專題。

△Life的樓層Banner

Life上半部分Banner采用了750*400PX的分辨率, 與16:9相比扣除了22px,沒有采用16:9的原因是,是因為上半部分與下半部分之前有30px的留白,為了不讓整個Banner太高浪費面積,所以取整選了400PX高度。

下半部分Banner采用了176*176PX(1:1)的小圖。這樣圖片比例符合之前分析的專題圖適合16:9,商品圖適合用1:1。這樣的大小比例看起來可以讓版塊之前區分的很清楚。當然如果下半部分圖片一定要使用小圖,否則看起來層次就混亂,。例如男衣邦的首頁,上圖和下圖的比例看起來非常的接近。??椴憒吻值木筒皇欠淺:?。

△男衣邦的樓層Banner

相關推薦
電商設計:5個快速進階的電商Banner設計技巧
從人性的角度,揭露電商Banner設計背后的14個秘密
電商設計:韓國電商BANNER的構圖/配色/元素/應用分析
電商產品設計感想:你真的認識購物車嗎?
電商商品詳情頁如何通過設計提升轉化率?
電商設計教程:電商APP首頁設計總結
電商設計:用可視化編輯,解構看起炫酷的專題頁面
設計一個優秀的電商網站需注意那些方面?
分享:如何才能讓你的設計作品耐看?
案例分析社交型網站首頁設計的優秀設計原則
網頁設計教程分享—能影響觀眾的網站首頁設計10個要點
網站首頁的幻燈片輪播圖點擊率低的原因分析
教程:網頁首圖設計7個技巧分享
騰訊CDC:泛泛而談界面中的斑馬紋設計
簡單而又不單調的網頁視覺設計技巧
如何杜絕網頁設計中視噪對用戶的影響
如何讓手繪應用于視覺設計中而增強親和力和感染力
網頁視覺設計如何針對用戶有效表達信息
網站頁面設計中光的特效設計引導用戶視覺焦點
網頁PS設計教程:手把手教你制作漂亮的商業模板
網頁PS設計教程:手把手教你制作WordPress新聞博客模板
網頁設計教程:5個原則助你設計一個成功的購買按鈕
從網站可用性的角度深入分析蘋果和微軟官網設計的優劣
20個精致漂亮的視頻播放器界面設計欣賞及點評
視覺設計:頁面構建的審圖與細節
視覺設計之材質繪制的色彩理論
網站設計之10個兒童網站分析及設計特點總結
網頁配色經驗分享:疊柔配色技巧及圖解分析
工具型網站設計及典型案例分析
深入探討圖片格式與網頁設計的那點事兒
分享:網頁核心內容對視覺表現的影響
響應式網頁設計正成為移動互聯網大勢所趨
20個超棒的photoshop網頁設計教程分享
淺談界面設計中的結構設計

精彩推薦

熱門教程