2017-8-14 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
這篇介紹垂直類電商的首頁(yè)設(shè)計(jì)。那么首先讓我們了解下什么是垂直類的電商。
淘寶的商品品類（SKU）是以數(shù)十億計(jì)的，天貓和京東也應(yīng)該在數(shù)千萬(wàn)的級(jí)別。海量的商品品類、魚(yú)目混雜的商家以及參差不齊的商品為消費(fèi)者的購(gòu)物帶來(lái)了極大的選購(gòu)時(shí)間成本。消費(fèi)者在這樣的購(gòu)物環(huán)境中找到適合自己的商品有時(shí)并不比大海撈針容易多少，而其中假冒偽劣商品的大量存在更是增加了購(gòu)物的難度。
相對(duì)于B2C綜合商城的廣而博，還有一種小而美電商形態(tài)叫做B2C垂直電商，就是只專注售賣一個(gè)或者多個(gè)相關(guān)品類的電商。鑒定一個(gè)電商是否垂直，就是能否找到一個(gè)共同屬性的用戶群體。比如女性，文藝青年等。垂直電商的價(jià)值就在于其站在獨(dú)立第三方的角度，從海量的商品中為消費(fèi)者做了一次精選，平臺(tái)需要為這些商品做信用背書(shū)，所以這些商品基產(chǎn)品質(zhì)量也相對(duì)有保證，能通過(guò)口碑逐漸地在消費(fèi)者中間建立信任感。
模式優(yōu)缺點(diǎn)：
垂直類電商優(yōu)點(diǎn)是：面對(duì)的客戶群體有一致的屬性。有了這個(gè)大的前提，那么很容易知道客戶在哪里，他們喜歡和關(guān)注什么，可以有針對(duì)性的精準(zhǔn)營(yíng)銷。而且客戶群體的集中和專一，會(huì)讓其更有歸屬感。
垂直類電商缺點(diǎn)是：商品品類單一，用戶重復(fù)購(gòu)買率低。就是用戶想買其他商品你這里沒(méi)有的賣，那么用戶可能選擇綜合類B2C電商平臺(tái)。所以垂直類電商在發(fā)展到一定程度后，業(yè)績(jī)?cè)鲩L(zhǎng)會(huì)遇到天花板，于是就開(kāi)始擴(kuò)充品類，走大而全的道路。又會(huì)遭到大的B2C商城的競(jìng)爭(zhēng)。不管是從商品還是價(jià)格的角度上來(lái)說(shuō)，淘寶、天貓以及京東這些綜合類的B2C電商，都存在大量的商品可以替代垂直類電商。
常見(jiàn)的垂直電商App
B2C垂直里面，一些應(yīng)用的商品品類比較多。比如母嬰電商這個(gè)大的垂直分類，里面有服飾、鞋子、奶粉等多個(gè)小的品類。這些應(yīng)用相當(dāng)于垂直電商里的綜合類（圖1-1）。
|
品類 |
名稱 |
|
母嬰 |
貝貝網(wǎng)、蜜芽、孩子王 |
|
化妝品 |
聚美優(yōu)品，樂(lè)蜂網(wǎng) |
|
品牌折扣 |
唯品會(huì)、聚美優(yōu)品、楚楚街 |
|
女性導(dǎo)購(gòu) |
美麗說(shuō)、蘑菇街 |
|
服飾 |
夢(mèng)芭莎、優(yōu)衣庫(kù)、麥網(wǎng)、有貨 |
|
跨境電商 |
小紅書(shū)、網(wǎng)易考拉、洋碼頭、海淘、達(dá)令、美麗說(shuō)、higo 、云猴全球購(gòu) |
|
生鮮 |
每日優(yōu)鮮 |
|
二手交易 |
閑魚(yú) |
圖1-1 綜合類的垂直電商
因?yàn)槠奉惐容^多，所以頁(yè)面承載的信息密度比較高。所以頁(yè)面設(shè)計(jì)采用類似綜合B2C商城的設(shè)計(jì)（圖1-2）。如果對(duì)這塊有興趣，頁(yè)面設(shè)計(jì)可以參考我之前的文章《綜合B2C電商首頁(yè)設(shè)計(jì)》，就不在本節(jié)文章的討論范圍內(nèi)了。
圖1-2 貝貝和聚美優(yōu)品首頁(yè)
垂直電商里還有一些垂直細(xì)分類。例如各種鞋子和襪子、品類、食品類、箱包、水果類、鉆戒和珠寶類、酒、養(yǎng)生保健品類、禮品玩具類、鮮花商城、居家類、汽車用品、藥店等。
這些細(xì)分類隨著時(shí)間有的逐漸消逝，如賣鞋子的樂(lè)淘。而留下來(lái)各種時(shí)尚潮品的綜合推薦類、家居類居多。這些垂直細(xì)分的商品品類不是很多，所以頁(yè)面設(shè)計(jì)大多采用大的留白簡(jiǎn)約型設(shè)計(jì)。本節(jié)文章重點(diǎn)去分析推薦一些垂直細(xì)分類的電商（圖1-3）。
|
品類 |
名稱 |
|
手工藝品 |
東家守藝人 |
|
家居 |
造作、Life、好物、尖叫設(shè)計(jì)、匠物 |
|
綜合導(dǎo)購(gòu) |
最美有物、良倉(cāng)、想去、毒物、野獸派、See |
|
美食 |
Enjoy、二十四季 |
|
男士服飾 |
男衣邦 |
|
女士服飾 |
ICY、ZARA、 H&M |
|
女士?jī)?nèi)衣 |
氧氣 |
1-3 細(xì)分類的垂直電商
垂直電商的用戶，可能購(gòu)物的目的性不是很明確，一般都會(huì)以逛為主，通過(guò)逛發(fā)現(xiàn)自己喜歡的一些商品完成購(gòu)買行為。所以首頁(yè)會(huì)放置各種形式的商品推薦。推薦形式一般有
1、品類或者品牌中熱門單品的推薦
2、以專題形式的某一類商品的集中推薦，以商品推薦為主。
3、如果有達(dá)人推薦的子頻道，會(huì)在首頁(yè)有露出，通過(guò)一些意見(jiàn)領(lǐng)袖的推薦，
4、知識(shí)庫(kù)，我的理解還是一種專題的合集，比如什么場(chǎng)合適合穿什么衣服，什么季節(jié)適合吃什么，如何選擇合適的鍋。當(dāng)然這些知識(shí)里面少不了各種商品的推薦。
5、其他一些各種小頻道欄目的露出
因?yàn)榫C合類電商平臺(tái)模塊多，每個(gè)模塊都可能從屬某個(gè)部門，需要平衡各種部門事業(yè)部的利益。設(shè)計(jì)師設(shè)計(jì)的頁(yè)面體現(xiàn)的是各種協(xié)調(diào)的意志。而垂直類電商的模塊相比就少的多，設(shè)計(jì)師有更多自由去考慮各種模塊的設(shè)計(jì)問(wèn)題。知道了垂直類電商的首頁(yè)的內(nèi)容組成，我們開(kāi)始看垂直類電商的具體模塊組成。
模塊1：標(biāo)題欄
每個(gè)應(yīng)用都有一個(gè)標(biāo)題欄，這成了App的標(biāo)準(zhǔn)設(shè)計(jì)了。標(biāo)題欄上一般會(huì)有三個(gè)重要的元素組成：logo圖形或者文字、搜索頁(yè)的入口、購(gòu)物車的圖標(biāo)。
視覺(jué)設(shè)計(jì)1 品牌logo
標(biāo)題欄放置的Logo文字會(huì)進(jìn)行字體設(shè)計(jì)，垂直類電商一般會(huì)非常重視品牌的露出，所以這里不會(huì)使用系統(tǒng)默認(rèn)的字體，而是貼圖使用設(shè)計(jì)好的Logo文字或者Logo圖形（圖1-4）。
圖1-4 造作標(biāo)題欄使用了logo圖形，其他使用了字體設(shè)計(jì)的logo
視覺(jué)設(shè)計(jì)2 搜索入口
大多數(shù)垂直類電商，更希望于用戶瀏覽推薦內(nèi)容，購(gòu)買推薦活動(dòng)商品。而不是直接通過(guò)搜索去找到相應(yīng)商品，去完成購(gòu)買行為。所以垂直類電商App會(huì)有意識(shí)的弱化商品搜索。不同于B2C綜合類電商導(dǎo)航欄上醒目的搜索欄，美食電商Enjoy和興趣導(dǎo)購(gòu)life首頁(yè)（圖1-5），直接在導(dǎo)航欄右側(cè)放置了一個(gè)搜索圖標(biāo)。
圖1-5美食電商Enjoy和興趣導(dǎo)購(gòu)life首頁(yè)
如果你的商品品類并不是很多，那么用戶通過(guò)關(guān)鍵詞搜索很難搜到東西。所以一些應(yīng)用干脆把搜索和商品分類頁(yè)進(jìn)行結(jié)合設(shè)計(jì)。例如造作（圖1-6）點(diǎn)擊搜索，進(jìn)入的搜索頁(yè)就是商品的分類頁(yè)。
圖1-6造作的首頁(yè)和分類頁(yè)
有的垂直類電商品類并不多，所以干脆直接去掉了搜索入口。在2016年的唯品會(huì)的App甚至極端的去掉了搜索功能，希望用戶在頁(yè)面可以停留更長(zhǎng)的時(shí)間。這種想法顯然有點(diǎn)一廂情愿，因?yàn)槲ㄆ窌?huì)的品類可不少，這樣的設(shè)計(jì)遭到了很多用戶的反對(duì)。在版本的唯品會(huì)又悄悄的把搜索功能加了回來(lái)。所以留不留搜索入口還是要看你的品類是否足夠豐富。
模塊2：分類模塊
由于垂直電商的品類不是那么多。子頻道也有限，所以不需要和綜合類電商一樣，用圖標(biāo)的形式作為模塊快速入口，而是直接設(shè)計(jì)為Tab標(biāo)簽欄的設(shè)計(jì)形式，放置在標(biāo)題欄下面，方便用戶快速瀏覽切換。
視覺(jué)設(shè)計(jì)1 底部標(biāo)簽欄
Tab標(biāo)簽欄如果類別比較多的時(shí)候采用橫滑的設(shè)計(jì)形式。如果應(yīng)用的頻道比較少，例如造作應(yīng)用（圖1-7），甚至可以直接把標(biāo)簽欄設(shè)計(jì)在底部，相當(dāng)于整個(gè)底部標(biāo)簽欄的作用，當(dāng)然底部標(biāo)簽欄重要的“我的”模塊，入口放置在頂部標(biāo)題欄上。
圖1-7造作首頁(yè)底部標(biāo)簽欄
視覺(jué)設(shè)計(jì)2 滑動(dòng)隱藏標(biāo)簽欄
一些垂直類電商的首頁(yè)設(shè)計(jì)形式單一，完全由banner圖構(gòu)成。用戶向上滑動(dòng)頁(yè)面，標(biāo)題欄會(huì)自動(dòng)隱藏，讓用戶有更大的頁(yè)面顯示面積。例如Life應(yīng)用（圖1-8），至于向上滑動(dòng)多少像素開(kāi)始隱藏標(biāo)題欄，你需要給程序員定義出高度。
圖1-8Life 滑動(dòng)隱藏標(biāo)簽欄
良倉(cāng)的首頁(yè)并沒(méi)有采用這種滑動(dòng)隱藏標(biāo)題欄的設(shè)計(jì)（圖1-9），我猜測(cè)因?yàn)榱紓}(cāng)的底部欄目太多，沒(méi)有給購(gòu)物車留下一個(gè)單獨(dú)的位置。所以可能為了強(qiáng)調(diào)購(gòu)物車的全局顯示，所以固定欄頂部標(biāo)簽欄。當(dāng)然我認(rèn)為這種想法可能也說(shuō)不通，因?yàn)槭醉?yè)是不太可能促成交易行為，更多是引流的作用。我認(rèn)為良倉(cāng)底部的分享是一個(gè)很雞肋的功能，本質(zhì)就是一些美圖商品推薦而已，如果把這個(gè)頻道降級(jí)放進(jìn)其他位置，把這個(gè)位置留給購(gòu)物車。我估計(jì)設(shè)計(jì)師就可以舒心的使用隱藏標(biāo)題欄設(shè)計(jì)。
圖1-9良倉(cāng)固定的標(biāo)簽欄
模塊3：橫幅廣告
由于垂直類電商的信息密度低，所以有足夠大的空間去放置Banner。Banner的常見(jiàn)比例有16:9和1:1兩種。也就是750*422和750*750。一般Banner圖片設(shè)計(jì)還是以750寬度的iphone6/7為基準(zhǔn)。至于更大尺寸的iphone6/7plus還是使用這個(gè)圖片，因?yàn)閺墓?jié)省帶寬的角度完全沒(méi)必要那么大的尺寸。2X的Banner圖給3X用也是足夠的。什么是2X、3X？這些移動(dòng)設(shè)計(jì)知識(shí)，請(qǐng)去閱讀我撰寫(xiě)的UI設(shè)計(jì)書(shū)籍《術(shù)與道-移動(dòng)應(yīng)用設(shè)計(jì)必修課》。那么圖片的比例什么時(shí)候使用16:9，什么時(shí)候使用1:1了？還是從內(nèi)容的角度進(jìn)行分析。
視覺(jué)設(shè)計(jì)1 16:9的Banner圖
如果你的應(yīng)用展示的Banner圖是類似專題性質(zhì)的。圖片只是一個(gè)參考作用，用戶是不能從大圖看到更多商品信息，需要更多文字說(shuō)明來(lái)輔助閱讀，圖片比例選擇使用16:9。例如旅游的產(chǎn)品圖片就適合選用16:9。比如首頁(yè)你要做一個(gè)歐洲的路線，你只放巴黎的埃菲爾鐵塔的圖片，那么提供信息量是遠(yuǎn)遠(yuǎn)不夠的，必須加上德法意深度10日游的文字說(shuō)明。例如造作（圖1-10）展示的都是家居套裝專題，而不是具體某個(gè)家居的單品。所以使用16:9 Banner圖片比例。
圖1-10造作首頁(yè)的16:9 Banner圖
視覺(jué)設(shè)計(jì)2 1:1的Banner圖
如果你的應(yīng)用展示的Banner圖是類似商品性質(zhì)的。圖片具有重要的參考作用，用戶通過(guò)觀看精美的圖片，不用太注重文字內(nèi)容的，就可以吸引點(diǎn)擊。圖片比例選擇使用4:3。例如最美有物的Banner圖是以說(shuō)明單個(gè)商品為主（圖1-11），不需要太多文字，用戶也能看的明白，簡(jiǎn)單的說(shuō)有圖片就夠了，所以圖片比例選擇4:3。
圖1-11 最美有物的1:1 Banner圖
模塊4：卡片化內(nèi)容推薦
垂直類電商，首頁(yè)需要放置各種專題推薦，來(lái)導(dǎo)購(gòu)各種商品。各種編輯精選，達(dá)人推薦，熱賣商品。對(duì)于用戶來(lái)說(shuō)本質(zhì)就是推薦商品。所以用戶并不在乎你的內(nèi)部各種叫法分類。那么一些電商直接打破了那種綜合B2C電商的豆腐塊做法。而是用了卡片化設(shè)計(jì)。各種推薦內(nèi)容就是一個(gè)個(gè)卡片設(shè)計(jì)，這種設(shè)計(jì)的優(yōu)點(diǎn)就是足夠精簡(jiǎn)，看起來(lái)有格調(diào)感。缺點(diǎn)就是信息密度很低，容納不了足夠多的信息。
視覺(jué)設(shè)計(jì)1 橫向卡片
想去應(yīng)用采用了橫向大卡片的設(shè)計(jì)。啟動(dòng)畫(huà)面推薦的商品（圖1-12），通過(guò)一個(gè)動(dòng)畫(huà)切換直接顯示在了首頁(yè)的默認(rèn)第一個(gè)卡片。通過(guò)這種強(qiáng)調(diào)的手法，讓用戶足夠聚焦。這個(gè)橫向卡片有一個(gè)缺點(diǎn)就是可容納信息量不能太大，所以只適合做單一類型的內(nèi)容卡片。如果試圖在卡片上加上各種復(fù)雜的模塊內(nèi)容。一旦卡片過(guò)多，用戶在橫向滑動(dòng)卡片的時(shí)候，容易失去位置感。我在哪個(gè)模塊，我剛才看的模塊在哪里，用戶容易產(chǎn)生困惑，這是一個(gè)魚(yú)與熊掌不可兼得的問(wèn)題。
圖1-12想去的啟動(dòng)頁(yè)和首頁(yè)卡片化設(shè)計(jì)
視覺(jué)設(shè)計(jì)2縱向卡片
另外一種大卡片設(shè)計(jì)就是縱向卡片，最美有物的首頁(yè)卡片是縱向滑動(dòng)的（圖1-13）。同橫向滑動(dòng)相比，滑動(dòng)的易用性略好于橫向滑動(dòng)，因?yàn)橛脩粢哺?xí)慣于上下滑動(dòng)?？v向滑動(dòng)的信息承載度更低于橫向滑動(dòng)，因?yàn)樾枰?yè)面需要留出足夠的區(qū)域，去放置更多前后卡片，去營(yíng)造卡片的上下立體感。這樣的立體設(shè)計(jì)可以給予用戶更好的位置感。因?yàn)樵O(shè)計(jì)可用區(qū)域小，所以更多通過(guò)精心標(biāo)題設(shè)計(jì)去吸引用戶點(diǎn)擊。
圖1-13 最美有物的首頁(yè)卡片化設(shè)計(jì)
模塊5：樓層Banner
之前我們說(shuō)過(guò)垂直細(xì)分類的頻道分類可能沒(méi)有那么多，所以不需要像B2C綜合類電商那么復(fù)雜的設(shè)計(jì)形式。可能直接以單一的專題Banner形式展現(xiàn)，從上到下都是Banner形式的樓層。
視覺(jué)設(shè)計(jì)1圖片的比例
因?yàn)锽anner設(shè)計(jì)的形式比較單一，采用圖片+文字的視覺(jué)樣式。每個(gè)樓層就是一個(gè)小模塊，那么模塊與模塊之間的如何通過(guò)視覺(jué)手段進(jìn)行區(qū)分了？Life應(yīng)用采用了1+N的設(shè)計(jì)形式（圖1-14）。設(shè)計(jì)樣式上，Life上半部分大Banner加半透明黑底，下半部分用白色背景，有一個(gè)白色上三角，這樣很清晰讓用戶明白，下半部分的商品是從屬于上半部分的專題。
圖1-14 Life的樓層Banner
Life上半部分Banner采用了750*400PX的分辨率， 與16:9相比扣除了22px，沒(méi)有采用16:9的原因是，是因?yàn)樯习氩糠峙c下半部分之前有30px的留白，為了不讓整個(gè)Banner太高浪費(fèi)面積，所以取整選了400PX高度。
下半部分Banner采用了176*176PX（1:1）的小圖。這樣圖片比例符合之前分析的專題圖適合16:9，商品圖適合用1:1。這樣的大小比例看起來(lái)可以讓版塊之前區(qū)分的很清楚。當(dāng)然如果下半部分圖片一定要使用小圖，否則看起來(lái)層次就混亂，。例如男衣邦的首頁(yè)（圖1-15），上圖和下圖的比例看起來(lái)非常的接近。模塊層次區(qū)分的就不是非常好。
圖1-15 男衣邦的樓層Banner
視覺(jué)設(shè)計(jì)2 視覺(jué)樣式
同一個(gè)界面反復(fù)排布出現(xiàn)Banner，所以設(shè)計(jì)形式感要統(tǒng)一。Life采用的是圖標(biāo)+標(biāo)題+欄目上下排版形式（圖1-16）。這樣的設(shè)計(jì)好處是每個(gè)模塊很清晰，且用戶可以很清晰的對(duì)應(yīng)分類各種子頻道。所以設(shè)計(jì)樣式不是隨意的選擇，單純的看視覺(jué)美學(xué)樣式。而是需要有效的對(duì)產(chǎn)品運(yùn)營(yíng)的需求進(jìn)行支撐。
圖1-16 Life首頁(yè)樓層banner與分類頁(yè)
模塊6：底部導(dǎo)航欄
底部導(dǎo)航一般分為4到5個(gè)模塊。以圖標(biāo)+文字的設(shè)計(jì)形式進(jìn)行展示，電商最常見(jiàn)的底部導(dǎo)航欄設(shè)置是首頁(yè)，分類，購(gòu)物車，社區(qū)，我的。
商品分類
因?yàn)榇怪鳖愲娚痰纳唐菲奉愑邢?。所以很多時(shí)候用戶甚至不知道可以搜什么關(guān)鍵詞，去尋找他想要的商品。所以垂直類電商必須設(shè)計(jì)商品的分類頁(yè)面，對(duì)于用戶來(lái)說(shuō)這是一種商品的重要檢索形式。同時(shí)也讓用戶知道你的平臺(tái)有哪些商品可以購(gòu)買。氧氣的商品分類有二級(jí)，所以采用的是類似B2C綜合平臺(tái)的品類設(shè)計(jì)形式，小圖+文字形式（圖1-17）顯得非常的緊湊。這種設(shè)計(jì)的好處是在足夠小的面積內(nèi)，可以查看到盡可能多的信息。
圖1-17氧氣的分類頁(yè)
如果產(chǎn)品的分類只有一級(jí)，可以采用大圖片+文字的設(shè)計(jì)形式。大圖的設(shè)計(jì)信息密度低，占用更多的頁(yè)面面積。例如想去（圖1-18）一屏幕只顯示了4個(gè)分類，但好看的圖片總是吸引人的眼球。
圖1-18 去的分類頁(yè)
購(gòu)物車
一些垂直類電商應(yīng)用，是導(dǎo)購(gòu)的性質(zhì)，類似一個(gè)中介。通過(guò)收取品牌的廣告或者導(dǎo)購(gòu)的提成生存。當(dāng)用戶通過(guò)某個(gè)專題，看上這個(gè)商品需要購(gòu)買的時(shí)候，可以跳轉(zhuǎn)天貓或者其他B2C電商完成購(gòu)買（圖1-19），所以并沒(méi)有購(gòu)買支付的模塊，也就沒(méi)有購(gòu)物車。
圖1-19 Life購(gòu)買商品轉(zhuǎn)跳天貓
社區(qū)
社區(qū)的核心在于解答“什么值得買”這個(gè)問(wèn)題，也可能是各種專題推薦的頻道集合地。社區(qū)分為3個(gè)部分：內(nèi)容曝光單品，達(dá)人輔助決策，購(gòu)買。這個(gè)屬于內(nèi)容電商。我準(zhǔn)備在后面章節(jié)單獨(dú)詳細(xì)去講。
我的
這個(gè)模塊和B2C綜合類應(yīng)用設(shè)計(jì)差不多，這是一個(gè)個(gè)人后臺(tái)的作用，管理自己購(gòu)買商品后的一系列狀態(tài)。例如查看商品物流狀態(tài)，退換商品，商品評(píng)價(jià)等。
市面上的垂直細(xì)分類的App非常多，我挑選了一些自己非常喜歡的推薦給大家。畢竟我一個(gè)人看的有限，如果大家有覺(jué)得非常不錯(cuò)的也可以留言告訴我。我的微信是booui2017,請(qǐng)寫(xiě)明是站酷來(lái)的。
推薦1：東家守藝人（手工藝品）
東家作為匠人聚集的地方，專門售賣各種手藝人的親手制作的各種藝術(shù)品（圖1-20）。電商已經(jīng)發(fā)展很多年了，該有的東西都已經(jīng)有。匠人，手藝，消費(fèi)升級(jí)，工匠精神，這些詞雖是剛剛熱起來(lái)，但手藝人，還有他們的作品，是一直就存在的，靠線下或者著其他線上平臺(tái)，或家傳或兼職，他們一直活著。東家的出現(xiàn)讓他們多了一個(gè)選擇。東家不僅僅是電商產(chǎn)品，也包含著對(duì)傳統(tǒng)手藝的尊重。
圖1-20東家守藝人啟動(dòng)頁(yè)和首頁(yè)
推薦2：造作（家居）
售賣原創(chuàng)設(shè)計(jì)家居品牌的平臺(tái)（圖1-21）。不知道有多少人像我一樣，去宜家買東西，只會(huì)選擇一些小玩意，大的家具不太會(huì)去選擇宜家的。因?yàn)橐思业囊恍┐蠹揖?，材質(zhì)以刨花板和密度板居多，用久了就容易變形。其實(shí)性價(jià)比不是太高。一些大的裝飾城里的家具感覺(jué)又太普通，缺乏設(shè)計(jì)感。造作上有很多極具設(shè)計(jì)感的家具，適合年輕消費(fèi)者。
圖1-21造作啟動(dòng)頁(yè)和首頁(yè)
推薦3： Life（家居）
這個(gè)應(yīng)用主要是幫你挑選家居各種物品搭配（圖1-22）。適用于追求生活品質(zhì)，喜歡家居中各種各樣精致小物件搭配的用戶群體。里面的各種專題內(nèi)容質(zhì)量很高，值得翻閱。首頁(yè)下banner專題設(shè)計(jì)上的圖標(biāo)設(shè)計(jì)非常精致。與板塊內(nèi)欄目上的圖標(biāo)相對(duì)應(yīng)，板塊描述非常清晰。
圖1-22 Life啟動(dòng)頁(yè)和首頁(yè)
推薦4：好物（家居）
這是一個(gè)推薦新潮、創(chuàng)意、優(yōu)質(zhì)的生活物品的應(yīng)用（圖1-23）。
圖1-23好物啟動(dòng)頁(yè)和首頁(yè)
推薦5：良倉(cāng)（綜合）
一個(gè)生活美學(xué)分享社區(qū)（圖1-24），有數(shù)百位意見(jiàn)領(lǐng)袖分享各種生活美學(xué)。良倉(cāng)雜志報(bào)道最有趣味及品味的人和事，良倉(cāng)商店精選售賣來(lái)自全球最精美的生活產(chǎn)品及禮物。
圖1-24 良倉(cāng)啟動(dòng)頁(yè)和首頁(yè)
推薦6：最美有物（綜合）
為時(shí)尚達(dá)人提供一個(gè)發(fā)現(xiàn)全球好設(shè)計(jì)和優(yōu)秀設(shè)計(jì)師的平臺(tái)（圖1-25）。第一眼看到最美有物的麋鹿圖標(biāo)，就知道這是一個(gè)非常有設(shè)計(jì)感的應(yīng)用。滿足了人們對(duì)美而小眾的產(chǎn)品的需求，使「不從眾」的審美標(biāo)準(zhǔn)逐漸深入人心。這是我認(rèn)為垂直電商里設(shè)計(jì)質(zhì)量相當(dāng)高的應(yīng)用。
圖1-25最美有物啟動(dòng)頁(yè)和首頁(yè)
推薦7：想去（綜合）
是一家突出“好設(shè)計(jì)、純手工”的購(gòu)物分享平臺(tái)（圖1-26）。專為時(shí)尚達(dá)人提供前沿的設(shè)計(jì)理念與產(chǎn)品。想去的主導(dǎo)航欄圖標(biāo)和應(yīng)用圖標(biāo)的設(shè)計(jì)語(yǔ)言結(jié)合緊密。運(yùn)用了一個(gè)小勾這個(gè)圖形元素貫穿了圖標(biāo)的設(shè)計(jì)。其中TA說(shuō)中的banner圖可以顯示動(dòng)圖，非常的生動(dòng)有意思。這張動(dòng)圖是我學(xué)生幫我錄的，大家有好的錄制動(dòng)圖的方法也可以告訴我。
圖1-26想去TA說(shuō)子頻道頁(yè)
推薦8：野獸派（綜合）
野獸派是綜合類的時(shí)尚類家居相關(guān)售賣平臺(tái)（圖1-27）。野獸派本來(lái)是一個(gè)買花起家的應(yīng)用，她賣的不是花，而是花一般的美好的生活理念。隨著越做越大，品類也擴(kuò)張到各種家居、美妝、香氛、配飾和美食等。這里比較吸引人的是野獸派的首頁(yè)交互設(shè)計(jì)。使用一個(gè)整張插畫(huà)，作為首頁(yè)各種子模塊店鋪的入口。這樣的設(shè)計(jì)別具一格，的確第一眼非常的吸引人。
圖1-27野獸派的啟動(dòng)頁(yè)和首頁(yè)
推薦9：男衣邦（男性服飾）
這是一個(gè)解決男士穿衣打扮的問(wèn)題的應(yīng)用（圖1-28）。男女消費(fèi)行為和女性有很大的不同，女性享受購(gòu)買衣服的過(guò)程（包括線上線下）愿意花費(fèi)大量時(shí)間去逛去看，購(gòu)買結(jié)果具有隨機(jī)性，感性消費(fèi)。而男士買東西講究速戰(zhàn)速?zèng)Q，購(gòu)買衣服目的性強(qiáng)，追求效率，結(jié)果導(dǎo)向。所以不愿意花太多時(shí)間在逛和挑選上。相信很多男士和我一樣，平時(shí)對(duì)衣著并沒(méi)有太大的要求，但也會(huì)有一些場(chǎng)合或者對(duì)生活品質(zhì)有所追求的時(shí)候。希望有得體或者有品位的衣著。那么非常需要這樣一個(gè)平臺(tái)我該穿什么比較合適。這個(gè)設(shè)計(jì)師應(yīng)該是平面出身，非常喜歡運(yùn)用各種海報(bào)元素，從啟動(dòng)頁(yè)到首頁(yè)的各種banner，熟練的運(yùn)用各種點(diǎn)線面元素穿插。
圖1-28男衣邦啟動(dòng)頁(yè)和首頁(yè)
推薦10：氧氣（女士?jī)?nèi)衣）
氧氣是一款女性內(nèi)衣推薦的平臺(tái)（圖1-29）。以精品雜志的方式每天向用戶推薦買手在世界各地親自探店后發(fā)現(xiàn)的內(nèi)衣。雖然竹子是一個(gè)男士，對(duì)于選擇女性內(nèi)衣這件事情，不能感同身受。不過(guò)聽(tīng)說(shuō)女士選擇一款舒服的內(nèi)衣也不是那么容易的事情。氧氣內(nèi)有很多內(nèi)衣體驗(yàn)師提供的圖文體驗(yàn)報(bào)告，這些體驗(yàn)師就是從氧氣的用戶中脫穎而出的“達(dá)人”，氧氣希望把這些達(dá)人打造成為意見(jiàn)領(lǐng)袖，由她們來(lái)引導(dǎo)用戶的消費(fèi)。
圖1-29氧氣啟動(dòng)頁(yè)和首頁(yè)
推薦11： ENJOY（美食）
一個(gè)“懂吃、會(huì)選、有格調(diào)”的美食電商平臺(tái)（圖1-30）。這個(gè)和大眾點(diǎn)評(píng)不一樣的是， ENJOY挑選的一些餐廳中，有的具備米其林元素的星級(jí)餐廳，有的是精雕細(xì)作的家庭小館，有的則以食材產(chǎn)地或料理手法取勝……和時(shí)裝領(lǐng)域的買手店類似，“ENJOY-精選限量美食”的核心競(jìng)爭(zhēng)力是對(duì)餐廳和菜品的有效篩選的能力，既不做大眾化的自助餐，也很少接觸連鎖品牌。所以在這里不是以價(jià)格吸引人，更多的是那些精致餐廳的推薦。
圖1-30ENJOY啟動(dòng)頁(yè)和首頁(yè)
推薦12：花田小憩（鮮花）
這是一個(gè)挑選鮮花的應(yīng)用，送花首選（圖1-31）。在不同場(chǎng)合送不同人，應(yīng)該送不同的花，這些都很有講究的。這個(gè)應(yīng)用解決的就是這個(gè)問(wèn)題。但很可惜送花是一個(gè)日常使用頻次很低的需求，而且淘寶、京東也有完善的送花服務(wù)，所以這個(gè)平臺(tái)應(yīng)該很難做下去。我推薦這個(gè)應(yīng)用的原因是我覺(jué)得設(shè)計(jì)師應(yīng)該很喜歡花這個(gè)題材，App的logo設(shè)計(jì)也非常不錯(cuò)。
圖1-31花田小憩啟動(dòng)頁(yè)和首頁(yè)
垂直電商的品牌植入
通過(guò)以上App的分析發(fā)現(xiàn)，一些有設(shè)計(jì)感的應(yīng)用都非常喜歡使用黑白色調(diào)。且有自己的獨(dú)特的設(shè)計(jì)語(yǔ)言。
現(xiàn)在打開(kāi)各種設(shè)計(jì)網(wǎng)站，去找尋找app界面設(shè)計(jì)參考。你會(huì)發(fā)現(xiàn)如果去掉圖標(biāo)，僅僅去看界面設(shè)計(jì)，很多app的界面設(shè)計(jì)差異性非常小。App設(shè)計(jì)有一種趨于同質(zhì)化的傾向。那么這對(duì)界面設(shè)計(jì)師就是一個(gè)挑戰(zhàn)，也是一個(gè)機(jī)會(huì)。
經(jīng)過(guò)這幾年的移動(dòng)創(chuàng)業(yè)風(fēng)潮，大量App設(shè)計(jì)已經(jīng)存在，現(xiàn)在設(shè)計(jì)師遇到的不是從0如何設(shè)計(jì)一款A(yù)pp的問(wèn)題了，而是面臨各種改版設(shè)計(jì)的需求。如何設(shè)計(jì)一款和競(jìng)品有差異化設(shè)計(jì)的界面，這是UI設(shè)計(jì)師越來(lái)越迫切的需求。
下一篇我要告訴大家如何使用獨(dú)特的品牌設(shè)計(jì)語(yǔ)言，賦予你的App獨(dú)特的設(shè)計(jì)魅力
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com