手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

2017-8-3    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


距離上一篇文章已經(jīng)過去很久了,App設(shè)計(jì)系列的第三篇來了,今天我們來講首頁設(shè)計(jì),因?yàn)檫@個(gè)首頁設(shè)計(jì)非常復(fù)雜,我花了很久時(shí)間去理清相關(guān)知識(shí)點(diǎn)。講視覺同時(shí)也會(huì)講交互和產(chǎn)品,當(dāng)然下次我會(huì)加快進(jìn)度,更新下一篇!


移動(dòng)端產(chǎn)品最難的地方就是在很小的屏幕上展示出你所有的業(yè)務(wù)。因?yàn)橛辛似聊坏南拗?,加上移?dòng)端的客戶碎片化閱讀的習(xí)慣和高流失率。所以業(yè)務(wù)復(fù)雜的App是設(shè)計(jì)難度較高的。電商就是這種類型的App,既要保證首頁業(yè)務(wù)展示完整性,又要保證用戶體驗(yàn)滿意度,每一個(gè)頁面設(shè)計(jì)都要考慮一些技巧和思考維度,非??简?yàn)設(shè)計(jì)師的設(shè)計(jì)功力。所以電商類App是要展示內(nèi)容最多也是最難做的一類App。所以我們以電商為例來分析首頁設(shè)計(jì)。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析


用手機(jī)去購物已經(jīng)成為我們生活中不可或缺的一部分,打開天貓、淘寶App進(jìn)入首頁之后,基本上都是琳瑯滿目的商品促銷活動(dòng)、專題分類以甚至是與電商不太相關(guān)的功能性入口。


例如(圖1-1)這些都是B2C綜合商城類的App,設(shè)計(jì)師顯然不喜歡這種類似菜市場雜亂的界面設(shè)計(jì),更傾向于去設(shè)計(jì)小而美的垂直類電商界面設(shè)計(jì)?;蛘咭脟獾碾娚虘?yīng)用設(shè)計(jì),覺得那樣的設(shè)計(jì)留白多,圖片精美,這才是一個(gè)好的設(shè)計(jì)。那么如何我們到底該評價(jià)一個(gè)電商App的首頁設(shè)計(jì)好壞了?


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

圖1-1 B2C綜合商城淘寶和京東



界面與產(chǎn)品服務(wù)定位相匹配


對電商而言,首頁設(shè)計(jì)的基本原則,就是要能夠增加銷售機(jī)會(huì),把產(chǎn)品賣出去。所以我們要圍繞這個(gè)目的來去設(shè)計(jì)界面。所以不同類型的App的設(shè)計(jì)策略都會(huì)不一樣,找到適合自己產(chǎn)品服務(wù)定位的設(shè)計(jì)方法。我們來比對一下B2C綜合類App和垂直細(xì)分類電商App,如(圖1-2)


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

圖1-2 B2C綜合類App和垂直細(xì)分類電商App運(yùn)營對比 


B2C綜合類App一般體量非常龐大,他們的目標(biāo)受眾是極為廣泛的,無論是社會(huì)頂層的精英分子,還是只夠解決溫飽的市井小民。那么此時(shí)人物形象的獨(dú)特性會(huì)弱化,設(shè)計(jì)的過程也就盡量避免去塑造帶有某些固有人群的特性。所以這類大型電商,很像一個(gè)大型超市沃爾瑪家樂福。超市里滿目琳瑯被堆滿的貨架,有鋪天蓋地的打折促銷信息。B2C綜合類App,都有非常多的額外功能,給手機(jī)充話費(fèi)、線下服務(wù)、彩票等等。從設(shè)計(jì)師角度來看,他們是不美觀,甚至冗余的。但從商業(yè)上來看它們每天都有巨大的訪問量,而每個(gè)頁面都要合理的將這些流量導(dǎo)向?qū)?yīng)的目的地,如果頁面內(nèi)容太少,就沒辦法充分挖掘出用戶的潛在需求和興趣點(diǎn)。而這些頁面的密集內(nèi)容也是在經(jīng)過大量探索和龐大的數(shù)據(jù)支撐而逐步優(yōu)化完善的。

 

垂直細(xì)分類的電商App,產(chǎn)品的目的就是聚合對應(yīng)類型的產(chǎn)品推送給對應(yīng)人群。從產(chǎn)品誕生的時(shí)候就已經(jīng)確認(rèn)了的目標(biāo)用戶層,設(shè)計(jì)師需要做的是從產(chǎn)品的各個(gè)細(xì)節(jié)來營造屬于這個(gè)層次的氛圍,設(shè)計(jì)讓這個(gè)群體產(chǎn)生歸屬感的UI界面。例如良倉(圖1-3),因?yàn)樵O(shè)計(jì)師面對的用戶群體非常明確,可能是小資或者文藝青年,所以視覺手段可以非常精準(zhǔn)。設(shè)計(jì)師需要通過大塊的留白、匠氣的字體、纖細(xì)的線條等視覺手段,營造出相應(yīng)的設(shè)計(jì)氛圍和格調(diào)感。由于這類App體量都不會(huì)很大,也可以充分發(fā)揮設(shè)計(jì)師的個(gè)人色彩。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

圖1-3良倉首頁截圖


另外一些小型企業(yè)和初創(chuàng)公司,人力資源不充沛,商業(yè)模式經(jīng)驗(yàn)不充分,在諸多方面都無法比擬大型團(tuán)隊(duì),所以功能單一是必然的,客觀的造成了界面的簡潔。其實(shí)這是沒辦法奢求大而全,只能把目光瞄準(zhǔn)在小而精上。所以這類型App首頁推薦出來的圖片,為了保證視覺的協(xié)調(diào)性,都需要經(jīng)過設(shè)計(jì)師認(rèn)真篩選和處理的。這些大量人工干預(yù)的工作量在綜合類App上是不可想象的。例如淘寶的首頁(圖1-4)用戶看到的各種banner圖和廣告推薦圖,都是根據(jù)用戶的最近瀏覽記錄,個(gè)性化推薦。所以需要海量的banner和產(chǎn)品圖,這些都是由機(jī)器人合成的,所以設(shè)計(jì)與選圖并不可能達(dá)到設(shè)計(jì)師所期望的完美搭配。設(shè)計(jì)師這里需要考慮的是一個(gè)普適性。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-4)淘寶首頁機(jī)器人合成的各種Banner


所以同樣是電商,B2C綜合類App和垂直細(xì)分類的App,因?yàn)橛脩舻膶傩缘牟煌?,體量的不同,最終設(shè)計(jì)師給出的設(shè)計(jì)解決方案也不一樣。那么下面我們分別根據(jù)不同類型電商App進(jìn)行分析設(shè)計(jì)。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

電商首頁設(shè)計(jì)思路,從上往下思路是:

用戶使用搜索欄快速找到心儀的商品(讓快速定位目標(biāo))

通過Banner活動(dòng)拉動(dòng)流量(產(chǎn)品拉新活躍用戶,讓用戶進(jìn)來)

展示全部服務(wù)類別(用戶知道產(chǎn)品有哪些商品和服務(wù))

秒殺用流量品帶動(dòng)購買量(讓用戶知道該商品和服務(wù)在我這里很便宜)

首屏后的頁面展示各大類別(方便用戶進(jìn)入沉浸式瀏覽方式)



模塊1:搜索欄


大多數(shù)用戶發(fā)生購買行為可能是有明確的目的性的。我知道我想要買什么,所以我需要快速的搜到商品。所以App會(huì)把最顯眼的位置留給搜索欄。搜索欄(圖1-5)里會(huì)有一個(gè)默認(rèn)的關(guān)鍵詞,可能是你后臺(tái)根據(jù)近期瀏覽的產(chǎn)品記錄推薦的,也可能是近期熱門的商品推薦。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-5)淘寶和JD的默認(rèn)關(guān)鍵詞


視覺設(shè)計(jì):

移動(dòng)設(shè)計(jì)的首頁寸土寸金,所以搜索欄下面的Banner圖不會(huì)做的太高,這里就帶來一個(gè)矛盾,就是Banner尺寸小,視覺沖擊力小。京東采用的是透明度變化的搜索欄。默認(rèn)是搜索欄的背景是全透的,這樣會(huì)留給Banner足夠的視覺設(shè)計(jì)空間。滑動(dòng)頁面,搜索欄的背景會(huì)由全透明轉(zhuǎn)換為不透明。逐漸下滑顯現(xiàn)的導(dǎo)航欄會(huì)設(shè)置兩個(gè)極限值(圖1-6)。下滑多少高度開始出現(xiàn)90%透明的導(dǎo)航欄,下滑多少高度出現(xiàn)不透明的導(dǎo)航欄。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-6)京東在不同高度導(dǎo)航欄的透明度變化



模塊2:橫幅廣告


因?yàn)殡娚檀黉N活動(dòng)是拉動(dòng)消費(fèi)最大的源泉,而Banner是很好展示活動(dòng)頁面的地方。4到6個(gè)Banner就能牢牢抓住用戶貪便宜的心理。而且Banner作為運(yùn)營位也可以作為銷售的廣告位進(jìn)行出售。所以一開始就要看見Banner是很好的展示。


視覺設(shè)計(jì):

如果采用半透明導(dǎo)航欄的設(shè)計(jì),那么Banner設(shè)計(jì)(圖1-7)的時(shí)候文字區(qū)域需要留出足夠的高度,避免文字被導(dǎo)航欄遮住。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-7)PS設(shè)計(jì)Banner會(huì)劃出輔助線,留出文字安全區(qū)域



模塊3:模塊快速入口


接下來電商會(huì)展示1排或者2排小icon。這些icon相當(dāng)于web端的分類類目列表作用。起到了讓用戶知道你有哪些賣的東西和哪些服務(wù)可以做。當(dāng)然像淘寶和京東這類綜合類應(yīng)用,有非常多的業(yè)務(wù)。這些業(yè)務(wù)分布在界面中的各個(gè)角落,需要一個(gè)快速跳轉(zhuǎn)重要模塊的快捷入口。而小電商網(wǎng)站的ICON往往是一個(gè)分類。


視覺設(shè)計(jì)1 模塊分割:

這里需要的注意的是模塊寬度的劃分。因?yàn)槭謾C(jī)的屏幕寬度是多種多樣的,界面設(shè)計(jì)的寬度是自適應(yīng)的,所以按照比例定出每個(gè)圖標(biāo)的模塊的占比,而不是具體大寬度大小。一些設(shè)計(jì)師直接五等分劃分每個(gè)圖標(biāo)模塊的寬度,如圖(圖1-8)飛豬旅行就是使用直接五等分劃分的方分割模塊的,與大眾點(diǎn)評相比,沒有留白的做法視覺顯得圖標(biāo)擺放松散不夠聚攏。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-8)飛豬旅行與大眾點(diǎn)評圖標(biāo)模塊


正確的做法是給模塊邊緣留出空白間距。這個(gè)間距選擇30PX或者20PX,然后剩下的寬度按照模塊進(jìn)行均分,比如美團(tuán)(圖1-9)留出了30PX的留白,然后五等分劃分剩下的總寬度。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-9)美團(tuán)模塊的邊緣留白



視覺設(shè)計(jì)2 圖標(biāo)風(fēng)格:

另外需要注意的是圖標(biāo)設(shè)計(jì)的風(fēng)格,如果在這里使用剪影或者線性的圖標(biāo)(圖1-10),不是一個(gè)很好的設(shè)計(jì)解決方案。剪影圖標(biāo)通過面來塑造形體的圖標(biāo),通過切割面,分型來塑造圖標(biāo)的體積感。所以剪影圖標(biāo)需要更大的視覺面積去切割面,才能有更多的設(shè)計(jì)細(xì)節(jié)可看。那么這里圖標(biāo)尺寸顯然沒有這么大,不具備設(shè)計(jì)發(fā)揮的條件。所以容易輪廓設(shè)計(jì)的簡單,缺乏設(shè)計(jì)感。與剪影圖標(biāo)不同的是,線性圖標(biāo)通過線來塑造形體的輪廓。同樣由于圖標(biāo)尺寸比較小,線使用的多了,容易線與線糾合在一起看不清楚,線少了,圖標(biāo)的視覺面積單薄,顯得缺乏設(shè)計(jì)細(xì)節(jié)。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-10)使用了剪影和線性設(shè)計(jì)風(fēng)格的圖標(biāo)



那么如何在小尺寸的圖標(biāo),既不要圖標(biāo)形體復(fù)雜,又能保持獨(dú)特的設(shè)計(jì)感了?這里推薦使用的微漸變設(shè)計(jì)手法去塑造圖標(biāo)的形體。例如飛豬(圖1-11)的模塊快速入口圖標(biāo)使用了微漸變手法,這種設(shè)計(jì)風(fēng)格的好處是,在小尺寸圖標(biāo)使用不復(fù)雜的剪影輪廓,通過漸變來分割層次,產(chǎn)生獨(dú)特的藝術(shù)效果。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-11)飛豬使用了微漸變設(shè)計(jì)風(fēng)格的圖標(biāo)


微漸變的設(shè)計(jì)風(fēng)格的難點(diǎn)就是分型,一般會(huì)把設(shè)計(jì)會(huì)有兩種分型方法(圖1-12)把圖標(biāo)剪影區(qū)分為兩個(gè)層次,前后層次通過漸變的手法進(jìn)行過渡。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-12)飛豬、支付寶口碑、大眾點(diǎn)評使用漸變分層的圖標(biāo)



視覺設(shè)計(jì)3 背板設(shè)計(jì):

目前我們常見的背板都是圓形或者圓角矩形的背景板,那么是不是只能有這樣單調(diào)設(shè)計(jì)形式了。如何進(jìn)一步創(chuàng)新?答案是使用獨(dú)特的品牌形狀做為圖標(biāo)的背景板(圖1-13),這個(gè)基礎(chǔ)形狀還可以在底部標(biāo)題欄圖標(biāo)上使用。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-13)使用了獨(dú)特品牌形狀的背景板



或者使用紋理形式填充背景(圖1-14)。這里需要注意的是每個(gè)背景板的紋理不是每個(gè)都一樣的。那樣重復(fù)的紋理單調(diào)而乏味。淘寶使用了統(tǒng)一粗細(xì)且有變化的線條。這樣統(tǒng)一中又有變化,具有獨(dú)特的設(shè)計(jì)形式感。



這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-14)使用了獨(dú)特紋理的背景板



在背景中運(yùn)用各種紋理的手法,在品牌設(shè)計(jì)中經(jīng)常會(huì)運(yùn)用到(圖1-15)。M的基本型填充使用了各種紋理效果。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-15)品牌設(shè)計(jì)運(yùn)用填充紋理



對于如何使用合適的背景紋理,當(dāng)你的前景圖標(biāo)設(shè)計(jì)輪廓簡單不復(fù)雜,那么根據(jù)前景圖形表達(dá)的情緒挑選適合的圖形(圖1-16),可以讓背景足夠花哨,營造出不同的氛圍感。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-16)不同情緒的背景圖形



如果前景的圖標(biāo)比較復(fù)雜,并不希望背景的圖形帶來過多的干擾。那么需要做的就是幾何形狀的變換(圖1-17),在變化中尋求統(tǒng)一。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-17)幾何形狀變換的背景



模塊4:用戶訂閱


淘寶和京東都將這個(gè)用戶訂閱的模塊,放置在首頁banner底下,可見其地位的重要性。原因是用戶訂閱內(nèi)容對用戶的轉(zhuǎn)化率非常高。淘寶和京東都引入自媒體達(dá)人作為內(nèi)容生產(chǎn)者生產(chǎn)較為專業(yè)的內(nèi)容,內(nèi)容中穿插推薦商品及其購買鏈接。相比于單純的將商品信息呈現(xiàn)給消費(fèi)者,圖文等多方式的推薦降低消費(fèi)者的抗拒和挑剔心理,更易接受事物。就像有時(shí)候,你確定要去商店買衣服往往買不到中意的,反而是隨便看看逛時(shí)買到了心儀的商品。



視覺設(shè)計(jì):

首頁面積非常有限,所以這里的用戶訂閱內(nèi)容,采用的都是文字滾屏形式出現(xiàn)。通過文字的標(biāo)題吸引用戶的注意力。這里需要注意的是由于視覺面積非常小,所以沒有必要塑造一個(gè)塊面,同其他塊面區(qū)分開來。這里(圖1-18)京東的“京東快報(bào)”做的不是太好,單獨(dú)為用戶訂閱做了一個(gè)模塊區(qū)分,顯得非?,嵥?。而淘寶的“淘寶頭條”模塊背景,直接與模塊快速入口的背景合并。通過間距的留白來區(qū)分版塊。減少了塊面的瑣碎感,這樣的設(shè)計(jì)手法顯然更合適。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-18)淘寶的“淘寶頭條”模塊與京東的“京東快報(bào)”



模塊5:秒殺品


如果一件商品常年都是優(yōu)惠價(jià),那么等于沒有優(yōu)惠,所以想出了限時(shí)秒殺的方法。不是簡單促使用戶快速下單的,而是只有在規(guī)定的時(shí)間才可以享受更加優(yōu)惠的價(jià)格。這樣增加了用戶的粘性,必須在制定的時(shí)間去再次登錄app。在秒殺開始之前,用戶可能會(huì)告訴他的朋友優(yōu)惠的信息,促使他的朋友也去進(jìn)行購買,就形成了線下帶動(dòng)購買的過程?;蛘哂脩粼谄渌唐菲奉愰e逛,在這個(gè)閑逛的時(shí)間里,用戶也有可能去購買其他的商品。淘寶和京東會(huì)有秒殺品,秒殺品起到的作用就是帶動(dòng)更多的流量進(jìn)入App。


視覺設(shè)計(jì):

既然是秒殺,那么三個(gè)要素就是用戶最關(guān)心的。什么時(shí)間有秒殺,有什么秒殺的商品,秒殺的價(jià)格到底多有優(yōu)惠。所以在頁面中呈現(xiàn)出這3個(gè)要素是非常重要的。京東的“京東秒殺”(圖1-19)在這塊的視覺設(shè)計(jì)是更加突出的,非常完整的呈現(xiàn)了這3個(gè)要素。而淘寶的“淘搶購”因?yàn)榘婷妾M小,無法呈現(xiàn)這么多的設(shè)計(jì)元素,設(shè)計(jì)上顯得非常局促。至于為什么淘寶采用這種設(shè)計(jì)形式,因?yàn)榘鎵K上面有一個(gè)天貓超市,明顯淘寶更希望主推這個(gè)模塊。所以“淘搶購”為了追求與有好貨的模塊設(shè)計(jì)形式感統(tǒng)一。不得不采用輕量級(jí)的設(shè)計(jì)。從這里也可以看出,首頁設(shè)計(jì)也是一個(gè)根據(jù)業(yè)務(wù)運(yùn)營需求,平衡的藝術(shù)。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-19)京東的“京東秒殺”模塊與淘寶的“淘搶購”



模塊6:內(nèi)容推薦


如果說之前的模塊都屬于商品直接推薦的交易型電商,那么現(xiàn)在另一種新的電商形態(tài)內(nèi)容電商,正在逐步崛起。消費(fèi)費(fèi)者并沒有我要購物的心態(tài),而是在悠閑地看著美妝達(dá)人直播,或者自媒體的文章。這些達(dá)人或者自媒體孜孜不倦的生產(chǎn)各種專業(yè)內(nèi)容,內(nèi)容中穿插推薦商品及其購買鏈接。當(dāng)你在想要購物的時(shí)候看到商品信息,和你在沒想要購物的時(shí)候看到商品信息,整個(gè)的偏好、選擇標(biāo)準(zhǔn)和決策方式,都會(huì)發(fā)生巨大的變化。這兩種心態(tài)感覺是完全不一樣。內(nèi)容電商的購物心理是,我喜歡的達(dá)人或者店鋪推薦了一款看起來不錯(cuò)的商品,看起來覺得不錯(cuò),可能就下單購買了。這個(gè)過程讓很像你在旅游景點(diǎn)去購買紀(jì)念品。如果這個(gè)商品不是非常昂貴,大多數(shù)情況下人們斤斤計(jì)較這個(gè)商品到底值多少錢。而是想我購買這樣一個(gè)商品會(huì)給我留下美好的記憶。這是一個(gè)感性的消費(fèi)心理。這個(gè)商品推薦模塊就是一個(gè)內(nèi)容形模塊的快速入口。根據(jù)你最近的瀏覽記錄,推薦了一些相關(guān)的帖子或者達(dá)人。因?yàn)槊總€(gè)人關(guān)注的商品都不一樣。所以呈現(xiàn)的界面模塊可能也不一樣。


例如(圖1-20)淘寶這塊的推薦,淘寶如果判斷你是男性用戶,默認(rèn)推薦的是男神范,如果判斷你是女性用戶默認(rèn)推薦的是愛逛街。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-20)淘寶的內(nèi)容推薦模塊

 


模塊7:樓層類別展示


之后的往下的頁面都是超出一個(gè)屏幕的,過去用來展示電商每個(gè)細(xì)分類別中最好的商品進(jìn)行展示。用大量的品類和優(yōu)惠價(jià)格打動(dòng)用戶進(jìn)入進(jìn)行消費(fèi)?,F(xiàn)在更傾向于內(nèi)容化電商推薦。

不再強(qiáng)調(diào)以商品品類作為分類標(biāo)準(zhǔn),而是以專題來分類。專題的選取往往融合情感因素,更能吸引消費(fèi)者,特別是在消費(fèi)升級(jí)的驅(qū)使下,這也符合消費(fèi)者“逛”時(shí)的購買習(xí)慣。比如京東的愛生活模塊中集合了3C、家居、超市、寶寶用品、個(gè)人用品等。這樣的設(shè)計(jì)說明消費(fèi)者不管是在線上“逛”還是線下逛,對于商品之間的界限并沒有那么明確。關(guān)于電商內(nèi)容化設(shè)計(jì)這個(gè)在后面的章節(jié)會(huì)單獨(dú)去說。


 

模塊8:猜你喜歡


有時(shí)候用戶逛電商是漫無目的的,并不一定有明確的購買目的。但用戶在逛的過程中也許有了別的聯(lián)想。通過分析預(yù)測用戶行為,促成商品的銷售。有的商品具有的天然的關(guān)聯(lián)性,例如用戶已經(jīng)購買了牙刷,那么會(huì)不會(huì)再要買幾支牙膏。另外一個(gè)用戶3個(gè)月進(jìn)行兩次購買奶粉,電商網(wǎng)站記錄下用戶的采購周期,預(yù)測出用戶即將發(fā)生的采購行為的時(shí)間及時(shí)向用戶推薦該品類商品。所以電商會(huì)對每個(gè)商品進(jìn)行標(biāo)簽分類。通過對用戶的行為數(shù)據(jù)挖掘,預(yù)測用戶可能會(huì)感興趣的相關(guān)聯(lián)商品標(biāo)簽,推薦商品。這樣增加廣告投放的精準(zhǔn)度,達(dá)到提高商品轉(zhuǎn)化率的效果。也許現(xiàn)在行為預(yù)測效果還不足夠理想,促成購買是一個(gè)非常復(fù)雜的過程。但隨著大數(shù)據(jù)技術(shù)的發(fā)展,展示推薦的東西將會(huì)越來越符合用戶的需求,預(yù)測用戶的購買行為這是未來的一個(gè)趨勢。

 


模塊9:底部導(dǎo)航欄


底部導(dǎo)航一般分為4到5個(gè)模塊。以圖標(biāo)+文字的設(shè)計(jì)形式進(jìn)行展示,電商最常見的底部導(dǎo)航欄設(shè)置是首頁,分類,購物車,我的。



首頁


告訴用戶我是賣什么的,用戶你可以在我這里得到什么。然后通過第2屏幕到第6屏幕左右的瀏覽讓用戶徹底明白你這里的能買到什么,順便讓用戶進(jìn)入心智模型里。徹底進(jìn)行逛街瀏覽的心理。

 


分類


分類頁面起到篩選搜索的作用。但這里的搜索與首頁頂部的搜索框還不一樣。因?yàn)榉诸惖乃阉鲙в幸欢ú淮_定性,但是卻是讓用戶導(dǎo)流進(jìn)入的商品頁面最好且更直接的方式。淘寶由于業(yè)務(wù)眾多,已經(jīng)放棄了在首頁提供分類檢索商品的做法。而更傾向于用內(nèi)容引導(dǎo)用戶發(fā)生購買行為。

 


購物車


當(dāng)用戶在瀏覽頁面找到想買的商品后,并不一定買一個(gè)支付一個(gè),而是把他想要買的各種商品集中付款,這符合用戶在逛超市時(shí)去收銀臺(tái)統(tǒng)一付款的心理。有時(shí)候用戶看上了商品,并不一定馬上去支付,這時(shí)候購物車也起到不斷提醒用戶要付款的作用。

 


我的


這是一個(gè)個(gè)人后臺(tái)的作用,管理自己購買商品后的一系列狀態(tài)。例如查看商品物流狀態(tài),退換商品,商品評價(jià)等。所以底部導(dǎo)航欄從左到右就是用戶購買商品過程一個(gè)心理寫照。

 


視覺設(shè)計(jì)


這里需要重點(diǎn)設(shè)計(jì)的就是代表每個(gè)模塊的圖標(biāo)設(shè)計(jì)了。打開一些App,我們會(huì)發(fā)現(xiàn)App的底部圖標(biāo)設(shè)計(jì)的非常普通,沒有任何特色,在素材網(wǎng)站上都可以下載到這樣的圖標(biāo)貼合上去。那么我們需要單獨(dú)花時(shí)間精心設(shè)計(jì)。這個(gè)在后面的章節(jié)圖標(biāo)設(shè)計(jì)中會(huì)單獨(dú)表述。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析


在App頁面設(shè)計(jì)中,設(shè)計(jì)師會(huì)遇到一個(gè)問題就是頁面每個(gè)模塊做多高多寬合適,頁面中主要內(nèi)容的模塊與次要內(nèi)容模塊的比例是否合適。特別是電商模塊比較多,樣式復(fù)雜。做的不好,就顯得頁面亂糟糟的,但又說不出什么原因。下面我來告訴你如何設(shè)計(jì)內(nèi)容模塊的視覺比例。



屏幕安全邊距


做App界面的時(shí)候,當(dāng)內(nèi)容貼合在屏幕邊緣的時(shí)候,不僅會(huì)影響可讀性,也會(huì)影響美觀度。所以我們需要設(shè)置一個(gè)一個(gè)留白區(qū)域。這個(gè)區(qū)域就是屏幕安全邊距,所有的內(nèi)容設(shè)計(jì)在這個(gè)邊距內(nèi)。一般留白區(qū)域是20px或者30px的寬度。如果界面內(nèi)容比較多,例如淘寶(圖1-21)就選擇用20PX。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-21)淘寶的內(nèi)容模塊20px邊緣留白


如果首頁內(nèi)容比較少,排版比較寬松則選用30PX的寬度,例如Airbnb的首頁(圖1-22)內(nèi)容極簡極度寬松,完全由專題banner構(gòu)成,所以留白間距達(dá)到了驚人的45px。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-22)Airbnb首頁45px的邊緣留白



豎向比例切割豆腐塊


由于App設(shè)計(jì)的界面需要適配顯示在各種尺寸上,所以我們并不需要直接定義每個(gè)模塊具體的寬度。因?yàn)檫@個(gè)寬度可能會(huì)被拉伸。我們一般按照比例來定義每個(gè)模塊的寬度。如果把界面想象成大的豆腐塊,每個(gè)模塊就是一個(gè)個(gè)分割規(guī)整的豆腐塊。那么劃分版塊就好像切割豆腐塊一樣。常見的劃分方法有不切分就是整個(gè)橫條、1/2切分、1/3切分、1/4切分。

例如淘寶采用的就是1/4切分和1/3切分搭配的方法(圖1-23)。而京東采用的1/2切分和1/3切分搭配的方法。從視覺上極有家、愛生活這個(gè)模塊內(nèi)并沒有灰色線條切割,是不是算1/2切分?因?yàn)闃O有家內(nèi)的兩個(gè)商品圖片都從屬于極有家的,并不需要一條灰線切割開,但他還是有一條看不見的線條,上下對齊,讓模塊看起來更加規(guī)整。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-23)淘寶的1/4切分切割模塊


 

我們繼續(xù)看這個(gè)時(shí)尚大咖這個(gè)模塊。貌似出現(xiàn)了一個(gè)奇怪的切割位置,這時(shí)候我們比對一下下面淘寶直播模塊我們會(huì)發(fā)現(xiàn),原來模塊是運(yùn)用了1/3切分。只不過把前面2/3合并起來了。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-24)淘寶1/3切分切割模塊


 

讓我們來看看1年前的淘寶頁面長什么樣子?那時(shí)候淘寶的頁面并沒有嚴(yán)格遵守上下切割規(guī)則(圖1-25),模塊切割的非常的瑣碎。所以視覺看起來也非?;靵y。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-25)淘寶舊版本模塊切割瑣碎

 


橫向柵格切割豆腐塊


說完了橫向用比例切割的方法。我們來說說如何確定縱向的模塊大小,我常用的辦法是用柵格方法。柵格系統(tǒng)最早出現(xiàn)于印刷,簡單的說就是運(yùn)用固定的格子使界面排列工整簡潔。后來延續(xù)到web設(shè)計(jì),其中比較有名的是960 Grid System。讓網(wǎng)頁布局的更合理、易于閱讀等?;诮缑娴臇鸥裣到y(tǒng)可以很大程度上保證設(shè)計(jì)產(chǎn)出的質(zhì)量,尤其對于剛?cè)胄泻徒?jīng)驗(yàn)不足的設(shè)計(jì)師??梢杂幸粋€(gè)量化的參考。比對考慮各個(gè)模塊之間視覺關(guān)系。

我們來挑選京東界面的幾個(gè)模塊來分析下(圖1-26),我們使用的20 PX做為間距進(jìn)行比對分析,發(fā)現(xiàn)京東的每個(gè)模塊是都是符合20PX柵格基準(zhǔn)的。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-26)京東的橫向柵格基準(zhǔn)比對

 


淘寶部分模塊例如天貓超市模塊遵守這個(gè)比例(圖1-27),部分模塊例如淘搶購為了追求信息的密度,在有限的面積內(nèi)顯示更多的內(nèi)容,減少了模塊的高度。所以并不是所有模塊都必須嚴(yán)格按照這個(gè)柵格基準(zhǔn)了,這只是一個(gè)基準(zhǔn)參考值。實(shí)際界面內(nèi)容千變?nèi)f化,可以有所微調(diào),但是大的設(shè)計(jì)比例不會(huì)變化太多。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-27)淘寶的橫向柵格基準(zhǔn)比對



這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析


在每個(gè)模塊之間都會(huì)有各自的標(biāo)題設(shè)計(jì),來顯著區(qū)分每個(gè)模塊。每個(gè)模塊的標(biāo)題既有設(shè)計(jì)形式感的統(tǒng)一,也有所變化。那么我們來介紹一些常見的標(biāo)題視覺設(shè)計(jì)形式。


 

視覺設(shè)計(jì)1 文字+漸變色


淘寶因?yàn)樽非笮畔⒌拿芏龋▓D1-28),沒有留給設(shè)計(jì)師過多的發(fā)揮空間,所以只能采取文字+色塊背景的設(shè)計(jì)形式。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-28)淘寶模塊名稱設(shè)計(jì)

 


視覺設(shè)計(jì)2 文字+輔助圖形


京東的信息密度小于淘寶,所以空間足夠大,每個(gè)標(biāo)題可以加上一些輔助元素(圖1-29),兩者都利用漸變顏色變化來區(qū)分模塊。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-29)京東模塊名稱設(shè)計(jì)


 

視覺設(shè)計(jì)3 文字+圖標(biāo)


使用剪影或者線性的圖標(biāo)搭配文字,如果模塊非常容易提煉成某種具象化的圖形??梢允褂眠@種手法。例如淘寶的全球精選首頁(圖1-30),使用剪影圖標(biāo)地球去表達(dá)全球的概念。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-30)文字+圖標(biāo)的模塊名稱設(shè)計(jì)

 

視覺設(shè)計(jì)4 字體粗細(xì)的對比


粗體的中文字搭配細(xì)體英文文字,產(chǎn)生了微妙的對比形式感美。因?yàn)榘堰@個(gè)標(biāo)題設(shè)計(jì)做成圖片,所以可以大膽的使用蘋方以外的字體。當(dāng)然前提是你的公司購買相應(yīng)購買字體的版權(quán)。這里我傾向使用一個(gè)字體家族。比如中文字使用方正蘭亭黑粗體(圖1-31),英文字使用方正蘭亭黑超細(xì)黑。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-31)方正蘭亭黑字體粗細(xì)搭配

 


視覺設(shè)計(jì)5 多種元素的混搭


如果你的App不追求信息高密度展示,有足夠的設(shè)計(jì)面積供你發(fā)揮,那么這種設(shè)計(jì)形式會(huì)非常的適合。粗細(xì)字體混搭+半截英文字體+雙色線條(圖1-32)。利用線條的粗細(xì)和顏色對比,以及字體的粗細(xì)對比,營造時(shí)尚的氛圍感。


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析

(圖1-32)粗細(xì)字體混搭+半截英文字體+雙色線條

 


這也許是最詳細(xì)的APP電商首頁設(shè)計(jì)分析


衡量一個(gè)電商網(wǎng)站首頁不能只看視覺體驗(yàn)。設(shè)計(jì)的本質(zhì)是解決問題,而不是只停留在滿足“好看”、“有格調(diào)”、“上檔次”的視覺層面。你的關(guān)注點(diǎn)不只是顏色、字體、圖片,還有業(yè)務(wù)的流程。電商本身就是一個(gè)購買流程。選購、意向、推薦都需要關(guān)注。如果你期望客戶去關(guān)注的產(chǎn)品沒有達(dá)到預(yù)期的訪問和銷售量。那么你這個(gè)界面設(shè)計(jì)如何漂亮或者優(yōu)雅都是無用的。如果這個(gè)電商網(wǎng)站已經(jīng)開始運(yùn)營了,我們需要多看后臺(tái)的數(shù)據(jù)分析,有多少用戶訪問了首頁,其中多少人點(diǎn)擊了你推薦的產(chǎn)品,有多少比率的用戶在看了之后選擇了購買,在購買流程中有多少人在支付這個(gè)環(huán)節(jié)而離開的。如果你有這些數(shù)據(jù),那你自己就可以衡量你的設(shè)計(jì)的好壞,其他主觀臆斷都是浪費(fèi)時(shí)間。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔