2017-8-3 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(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ì)。
用手機(jī)去購(gòu)物已經(jīng)成為我們生活中不可或缺的一部分，打開天貓、淘寶App進(jìn)入首頁之后，基本上都是琳瑯滿目的商品促銷活動(dòng)、專題分類以甚至是與電商不太相關(guān)的功能性入口。
例如（圖1-1）這些都是B2C綜合商城類的App，設(shè)計(jì)師顯然不喜歡這種類似菜市場(chǎng)雜亂的界面設(shè)計(jì)，更傾向于去設(shè)計(jì)小而美的垂直類電商界面設(shè)計(jì)?；蛘咭脟?guó)外的電商應(yīng)用設(shè)計(jì)，覺得那樣的設(shè)計(jì)留白多，圖片精美，這才是一個(gè)好的設(shè)計(jì)。那么如何我們到底該評(píng)價(jià)一個(gè)電商App的首頁設(shè)計(jì)好壞了？
圖1-1 B2C綜合商城淘寶和京東
界面與產(chǎn)品服務(wù)定位相匹配
對(duì)電商而言，首頁設(shè)計(jì)的基本原則，就是要能夠增加銷售機(jī)會(huì)，把產(chǎn)品賣出去。所以我們要圍繞這個(gè)目的來去設(shè)計(jì)界面。所以不同類型的App的設(shè)計(jì)策略都會(huì)不一樣，找到適合自己產(chǎn)品服務(wù)定位的設(shè)計(jì)方法。我們來比對(duì)一下B2C綜合類App和垂直細(xì)分類電商App，如（圖1-2）
圖1-2 B2C綜合類App和垂直細(xì)分類電商App運(yùn)營(yíng)對(duì)比
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)品的目的就是聚合對(duì)應(yīng)類型的產(chǎn)品推送給對(duì)應(yīng)人群。從產(chǎn)品誕生的時(shí)候就已經(jīng)確認(rèn)了的目標(biāo)用戶層，設(shè)計(jì)師需要做的是從產(chǎn)品的各個(gè)細(xì)節(jié)來營(yíng)造屬于這個(gè)層次的氛圍，設(shè)計(jì)讓這個(gè)群體產(chǎn)生歸屬感的UI界面。例如良倉(cāng)（圖1-3），因?yàn)樵O(shè)計(jì)師面對(duì)的用戶群體非常明確，可能是小資或者文藝青年，所以視覺手段可以非常精準(zhǔn)。設(shè)計(jì)師需要通過大塊的留白、匠氣的字體、纖細(xì)的線條等視覺手段，營(yíng)造出相應(yīng)的設(shè)計(jì)氛圍和格調(diào)感。由于這類App體量都不會(huì)很大，也可以充分發(fā)揮設(shè)計(jì)師的個(gè)人色彩。
圖1-3良倉(cāng)首頁截圖
另外一些小型企業(yè)和初創(chuàng)公司，人力資源不充沛，商業(yè)模式經(jīng)驗(yàn)不充分，在諸多方面都無法比擬大型團(tuán)隊(duì)，所以功能單一是必然的，客觀的造成了界面的簡(jiǎn)潔。其實(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è)普適性。
（圖1-4）淘寶首頁機(jī)器人合成的各種Banner
所以同樣是電商，B2C綜合類App和垂直細(xì)分類的App，因?yàn)橛脩舻膶傩缘牟煌?，體量的不同，最終設(shè)計(jì)師給出的設(shè)計(jì)解決方案也不一樣。那么下面我們分別根據(jù)不同類型電商App進(jìn)行分析設(shè)計(jì)。
電商首頁設(shè)計(jì)思路，從上往下思路是：
用戶使用搜索欄快速找到心儀的商品（讓快速定位目標(biāo)）
通過Banner活動(dòng)拉動(dòng)流量（產(chǎn)品拉新活躍用戶，讓用戶進(jìn)來）
展示全部服務(wù)類別（用戶知道產(chǎn)品有哪些商品和服務(wù)）
秒殺用流量品帶動(dòng)購(gòu)買量（讓用戶知道該商品和服務(wù)在我這里很便宜）
首屏后的頁面展示各大類別（方便用戶進(jìn)入沉浸式瀏覽方式）
模塊1：搜索欄
大多數(shù)用戶發(fā)生購(gòu)買行為可能是有明確的目的性的。我知道我想要買什么，所以我需要快速的搜到商品。所以App會(huì)把最顯眼的位置留給搜索欄。搜索欄（圖1-5）里會(huì)有一個(gè)默認(rèn)的關(guān)鍵詞，可能是你后臺(tái)根據(jù)近期瀏覽的產(chǎn)品記錄推薦的，也可能是近期熱門的商品推薦。
（圖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)航欄。
（圖1-6）京東在不同高度導(dǎo)航欄的透明度變化
模塊2：橫幅廣告
因?yàn)殡娚檀黉N活動(dòng)是拉動(dòng)消費(fèi)最大的源泉，而Banner是很好展示活動(dòng)頁面的地方。4到6個(gè)Banner就能牢牢抓住用戶貪便宜的心理。而且Banner作為運(yùn)營(yíng)位也可以作為銷售的廣告位進(jìn)行出售。所以一開始就要看見Banner是很好的展示。
視覺設(shè)計(jì)：
如果采用半透明導(dǎo)航欄的設(shè)計(jì)，那么Banner設(shè)計(jì)（圖1-7）的時(shí)候文字區(qū)域需要留出足夠的高度，避免文字被導(dǎo)航欄遮住。
（圖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)評(píng)相比，沒有留白的做法視覺顯得圖標(biāo)擺放松散不夠聚攏。
（圖1-8）飛豬旅行與大眾點(diǎn)評(píng)圖標(biāo)模塊
正確的做法是給模塊邊緣留出空白間距。這個(gè)間距選擇30PX或者20PX,然后剩下的寬度按照模塊進(jìn)行均分，比如美團(tuán)（圖1-9）留出了30PX的留白，然后五等分劃分剩下的總寬度。
（圖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ì)的簡(jiǎn)單，缺乏設(shè)計(jì)感。與剪影圖標(biāo)不同的是，線性圖標(biāo)通過線來塑造形體的輪廓。同樣由于圖標(biāo)尺寸比較小，線使用的多了，容易線與線糾合在一起看不清楚，線少了，圖標(biāo)的視覺面積單薄，顯得缺乏設(shè)計(jì)細(xì)節(jié)。
（圖1-10）使用了剪影和線性設(shè)計(jì)風(fēng)格的圖標(biāo)
那么如何在小尺寸的圖標(biāo)，既不要圖標(biāo)形體復(fù)雜，又能保持獨(dú)特的設(shè)計(jì)感了？這里推薦使用的微漸變?cè)O(shè)計(jì)手法去塑造圖標(biāo)的形體。例如飛豬（圖1-11）的模塊快速入口圖標(biāo)使用了微漸變手法，這種設(shè)計(jì)風(fēng)格的好處是，在小尺寸圖標(biāo)使用不復(fù)雜的剪影輪廓，通過漸變來分割層次，產(chǎn)生獨(dú)特的藝術(shù)效果。
（圖1-11）飛豬使用了微漸變?cè)O(shè)計(jì)風(fēng)格的圖標(biāo)
微漸變的設(shè)計(jì)風(fēng)格的難點(diǎn)就是分型，一般會(huì)把設(shè)計(jì)會(huì)有兩種分型方法（圖1-12）把圖標(biāo)剪影區(qū)分為兩個(gè)層次，前后層次通過漸變的手法進(jìn)行過渡。
（圖1-12）飛豬、支付寶口碑、大眾點(diǎn)評(píng)使用漸變分層的圖標(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)上使用。
（圖1-13）使用了獨(dú)特品牌形狀的背景板
或者使用紋理形式填充背景（圖1-14）。這里需要注意的是每個(gè)背景板的紋理不是每個(gè)都一樣的。那樣重復(fù)的紋理單調(diào)而乏味。淘寶使用了統(tǒng)一粗細(xì)且有變化的線條。這樣統(tǒng)一中又有變化，具有獨(dú)特的設(shè)計(jì)形式感。
（圖1-14）使用了獨(dú)特紋理的背景板
在背景中運(yùn)用各種紋理的手法，在品牌設(shè)計(jì)中經(jīng)常會(huì)運(yùn)用到（圖1-15）。M的基本型填充使用了各種紋理效果。
（圖1-15）品牌設(shè)計(jì)運(yùn)用填充紋理
對(duì)于如何使用合適的背景紋理，當(dāng)你的前景圖標(biāo)設(shè)計(jì)輪廓簡(jiǎn)單不復(fù)雜，那么根據(jù)前景圖形表達(dá)的情緒挑選適合的圖形（圖1-16），可以讓背景足夠花哨，營(yíng)造出不同的氛圍感。
（圖1-16）不同情緒的背景圖形
如果前景的圖標(biāo)比較復(fù)雜，并不希望背景的圖形帶來過多的干擾。那么需要做的就是幾何形狀的變換（圖1-17），在變化中尋求統(tǒng)一。
（圖1-17）幾何形狀變換的背景
模塊4：用戶訂閱
淘寶和京東都將這個(gè)用戶訂閱的模塊，放置在首頁banner底下，可見其地位的重要性。原因是用戶訂閱內(nèi)容對(duì)用戶的轉(zhuǎn)化率非常高。淘寶和京東都引入自媒體達(dá)人作為內(nèi)容生產(chǎn)者生產(chǎn)較為專業(yè)的內(nèi)容，內(nèi)容中穿插推薦商品及其購(gòu)買鏈接。相比于單純的將商品信息呈現(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ì)手法顯然更合適。
（圖1-18）淘寶的“淘寶頭條”模塊與京東的“京東快報(bào)”
模塊5：秒殺品
如果一件商品常年都是優(yōu)惠價(jià)，那么等于沒有優(yōu)惠，所以想出了限時(shí)秒殺的方法。不是簡(jiǎn)單促使用戶快速下單的，而是只有在規(guī)定的時(shí)間才可以享受更加優(yōu)惠的價(jià)格。這樣增加了用戶的粘性，必須在制定的時(shí)間去再次登錄app。在秒殺開始之前，用戶可能會(huì)告訴他的朋友優(yōu)惠的信息，促使他的朋友也去進(jìn)行購(gòu)買，就形成了線下帶動(dòng)購(gòu)買的過程?；蛘哂脩粼谄渌唐菲奉愰e逛，在這個(gè)閑逛的時(shí)間里，用戶也有可能去購(gòu)買其他的商品。淘寶和京東會(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è)要素。而淘寶的“淘搶購(gòu)”因?yàn)榘婷妾M小，無法呈現(xiàn)這么多的設(shè)計(jì)元素，設(shè)計(jì)上顯得非常局促。至于為什么淘寶采用這種設(shè)計(jì)形式，因?yàn)榘鎵K上面有一個(gè)天貓超市，明顯淘寶更希望主推這個(gè)模塊。所以“淘搶購(gòu)”為了追求與有好貨的模塊設(shè)計(jì)形式感統(tǒng)一。不得不采用輕量級(jí)的設(shè)計(jì)。從這里也可以看出，首頁設(shè)計(jì)也是一個(gè)根據(jù)業(yè)務(wù)運(yùn)營(yíng)需求，平衡的藝術(shù)。
（圖1-19）京東的“京東秒殺”模塊與淘寶的“淘搶購(gòu)”
模塊6：內(nèi)容推薦
如果說之前的模塊都屬于商品直接推薦的交易型電商，那么現(xiàn)在另一種新的電商形態(tài)內(nèi)容電商，正在逐步崛起。消費(fèi)費(fèi)者并沒有我要購(gòu)物的心態(tài)，而是在悠閑地看著美妝達(dá)人直播，或者自媒體的文章。這些達(dá)人或者自媒體孜孜不倦的生產(chǎn)各種專業(yè)內(nèi)容，內(nèi)容中穿插推薦商品及其購(gòu)買鏈接。當(dāng)你在想要購(gòu)物的時(shí)候看到商品信息，和你在沒想要購(gòu)物的時(shí)候看到商品信息，整個(gè)的偏好、選擇標(biāo)準(zhǔn)和決策方式，都會(huì)發(fā)生巨大的變化。這兩種心態(tài)感覺是完全不一樣。內(nèi)容電商的購(gòu)物心理是，我喜歡的達(dá)人或者店鋪推薦了一款看起來不錯(cuò)的商品，看起來覺得不錯(cuò)，可能就下單購(gòu)買了。這個(gè)過程讓很像你在旅游景點(diǎn)去購(gòu)買紀(jì)念品。如果這個(gè)商品不是非常昂貴，大多數(shù)情況下人們斤斤計(jì)較這個(gè)商品到底值多少錢。而是想我購(gòu)買這樣一個(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)推薦的是愛逛街。
（圖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)容化電商推薦。
不再?gòu)?qiáng)調(diào)以商品品類作為分類標(biāo)準(zhǔn)，而是以專題來分類。專題的選取往往融合情感因素，更能吸引消費(fèi)者，特別是在消費(fèi)升級(jí)的驅(qū)使下，這也符合消費(fèi)者“逛”時(shí)的購(gòu)買習(xí)慣。比如京東的愛生活模塊中集合了3C、家居、超市、寶寶用品、個(gè)人用品等。這樣的設(shè)計(jì)說明消費(fèi)者不管是在線上“逛”還是線下逛，對(duì)于商品之間的界限并沒有那么明確。關(guān)于電商內(nèi)容化設(shè)計(jì)這個(gè)在后面的章節(jié)會(huì)單獨(dú)去說。
模塊8：猜你喜歡
有時(shí)候用戶逛電商是漫無目的的，并不一定有明確的購(gòu)買目的。但用戶在逛的過程中也許有了別的聯(lián)想。通過分析預(yù)測(cè)用戶行為，促成商品的銷售。有的商品具有的天然的關(guān)聯(lián)性，例如用戶已經(jīng)購(gòu)買了牙刷，那么會(huì)不會(huì)再要買幾支牙膏。另外一個(gè)用戶3個(gè)月進(jìn)行兩次購(gòu)買奶粉，電商網(wǎng)站記錄下用戶的采購(gòu)周期，預(yù)測(cè)出用戶即將發(fā)生的采購(gòu)行為的時(shí)間及時(shí)向用戶推薦該品類商品。所以電商會(huì)對(duì)每個(gè)商品進(jìn)行標(biāo)簽分類。通過對(duì)用戶的行為數(shù)據(jù)挖掘，預(yù)測(cè)用戶可能會(huì)感興趣的相關(guān)聯(lián)商品標(biāo)簽，推薦商品。這樣增加廣告投放的精準(zhǔn)度，達(dá)到提高商品轉(zhuǎn)化率的效果。也許現(xiàn)在行為預(yù)測(cè)效果還不足夠理想，促成購(gòu)買是一個(gè)非常復(fù)雜的過程。但隨著大數(shù)據(jù)技術(shù)的發(fā)展，展示推薦的東西將會(huì)越來越符合用戶的需求，預(yù)測(cè)用戶的購(gòu)買行為這是未來的一個(gè)趨勢(shì)。
模塊9：底部導(dǎo)航欄
底部導(dǎo)航一般分為4到5個(gè)模塊。以圖標(biāo)+文字的設(shè)計(jì)形式進(jìn)行展示，電商最常見的底部導(dǎo)航欄設(shè)置是首頁，分類，購(gòu)物車，我的。
首頁
告訴用戶我是賣什么的，用戶你可以在我這里得到什么。然后通過第2屏幕到第6屏幕左右的瀏覽讓用戶徹底明白你這里的能買到什么，順便讓用戶進(jìn)入心智模型里。徹底進(jìn)行逛街瀏覽的心理。
分類
分類頁面起到篩選搜索的作用。但這里的搜索與首頁頂部的搜索框還不一樣。因?yàn)榉诸惖乃阉鲙в幸欢ú淮_定性，但是卻是讓用戶導(dǎo)流進(jìn)入的商品頁面最好且更直接的方式。淘寶由于業(yè)務(wù)眾多，已經(jīng)放棄了在首頁提供分類檢索商品的做法。而更傾向于用內(nèi)容引導(dǎo)用戶發(fā)生購(gòu)買行為。
購(gòu)物車
當(dāng)用戶在瀏覽頁面找到想買的商品后，并不一定買一個(gè)支付一個(gè)，而是把他想要買的各種商品集中付款，這符合用戶在逛超市時(shí)去收銀臺(tái)統(tǒng)一付款的心理。有時(shí)候用戶看上了商品，并不一定馬上去支付，這時(shí)候購(gòu)物車也起到不斷提醒用戶要付款的作用。
我的
這是一個(gè)個(gè)人后臺(tái)的作用，管理自己購(gòu)買商品后的一系列狀態(tài)。例如查看商品物流狀態(tài)，退換商品，商品評(píng)價(jià)等。所以底部導(dǎo)航欄從左到右就是用戶購(gòu)買商品過程一個(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ú)表述。
在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。
（圖1-21）淘寶的內(nèi)容模塊20px邊緣留白
如果首頁內(nèi)容比較少，排版比較寬松則選用30PX的寬度，例如Airbnb的首頁（圖1-22）內(nèi)容極簡(jiǎn)極度寬松，完全由專題banner構(gòu)成，所以留白間距達(dá)到了驚人的45px。
（圖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è)商品圖片都從屬于極有家的，并不需要一條灰線切割開，但他還是有一條看不見的線條，上下對(duì)齊，讓模塊看起來更加規(guī)整。
（圖1-23）淘寶的1/4切分切割模塊
我們繼續(xù)看這個(gè)時(shí)尚大咖這個(gè)模塊。貌似出現(xiàn)了一個(gè)奇怪的切割位置，這時(shí)候我們比對(duì)一下下面淘寶直播模塊我們會(huì)發(fā)現(xiàn)，原來模塊是運(yùn)用了1/3切分。只不過把前面2/3合并起來了。
（圖1-24）淘寶1/3切分切割模塊
讓我們來看看1年前的淘寶頁面長(zhǎng)什么樣子？那時(shí)候淘寶的頁面并沒有嚴(yán)格遵守上下切割規(guī)則（圖1-25），模塊切割的非常的瑣碎。所以視覺看起來也非?；靵y。
（圖1-25）淘寶舊版本模塊切割瑣碎
橫向柵格切割豆腐塊
說完了橫向用比例切割的方法。我們來說說如何確定縱向的模塊大小，我常用的辦法是用柵格方法。柵格系統(tǒng)最早出現(xiàn)于印刷，簡(jiǎn)單的說就是運(yùn)用固定的格子使界面排列工整簡(jiǎn)潔。后來延續(xù)到web設(shè)計(jì)，其中比較有名的是960 Grid System。讓網(wǎng)頁布局的更合理、易于閱讀等。基于界面的柵格系統(tǒng)可以很大程度上保證設(shè)計(jì)產(chǎn)出的質(zhì)量，尤其對(duì)于剛?cè)胄泻徒?jīng)驗(yàn)不足的設(shè)計(jì)師?？梢杂幸粋€(gè)量化的參考。比對(duì)考慮各個(gè)模塊之間視覺關(guān)系。
我們來挑選京東界面的幾個(gè)模塊來分析下（圖1-26），我們使用的20 PX做為間距進(jìn)行比對(duì)分析，發(fā)現(xiàn)京東的每個(gè)模塊是都是符合20PX柵格基準(zhǔn)的。
（圖1-26）京東的橫向柵格基準(zhǔn)比對(duì)
淘寶部分模塊例如天貓超市模塊遵守這個(gè)比例（圖1-27），部分模塊例如淘搶購(gòu)為了追求信息的密度，在有限的面積內(nèi)顯示更多的內(nèi)容，減少了模塊的高度。所以并不是所有模塊都必須嚴(yán)格按照這個(gè)柵格基準(zhǔn)了，這只是一個(gè)基準(zhǔn)參考值。實(shí)際界面內(nèi)容千變?nèi)f化，可以有所微調(diào)，但是大的設(shè)計(jì)比例不會(huì)變化太多。
（圖1-27）淘寶的橫向柵格基準(zhǔn)比對(duì)
在每個(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ì)形式。
（圖1-28）淘寶模塊名稱設(shè)計(jì)
視覺設(shè)計(jì)2 文字+輔助圖形
京東的信息密度小于淘寶，所以空間足夠大，每個(gè)標(biāo)題可以加上一些輔助元素（圖1-29），兩者都利用漸變顏色變化來區(qū)分模塊。
（圖1-29）京東模塊名稱設(shè)計(jì)
視覺設(shè)計(jì)3 文字+圖標(biāo)
使用剪影或者線性的圖標(biāo)搭配文字，如果模塊非常容易提煉成某種具象化的圖形?？梢允褂眠@種手法。例如淘寶的全球精選首頁（圖1-30），使用剪影圖標(biāo)地球去表達(dá)全球的概念。
（圖1-30）文字+圖標(biāo)的模塊名稱設(shè)計(jì)
視覺設(shè)計(jì)4 字體粗細(xì)的對(duì)比
粗體的中文字搭配細(xì)體英文文字，產(chǎn)生了微妙的對(duì)比形式感美。因?yàn)榘堰@個(gè)標(biāo)題設(shè)計(jì)做成圖片，所以可以大膽的使用蘋方以外的字體。當(dāng)然前提是你的公司購(gòu)買相應(yīng)購(gòu)買字體的版權(quán)。這里我傾向使用一個(gè)字體家族。比如中文字使用方正蘭亭黑粗體（圖1-31），英文字使用方正蘭亭黑超細(xì)黑。
（圖1-31）方正蘭亭黑字體粗細(xì)搭配
視覺設(shè)計(jì)5 多種元素的混搭
如果你的App不追求信息高密度展示，有足夠的設(shè)計(jì)面積供你發(fā)揮，那么這種設(shè)計(jì)形式會(huì)非常的適合。粗細(xì)字體混搭+半截英文字體+雙色線條（圖1-32）。利用線條的粗細(xì)和顏色對(duì)比，以及字體的粗細(xì)對(duì)比，營(yíng)造時(shí)尚的氛圍感。
（圖1-32）粗細(xì)字體混搭+半截英文字體+雙色線條
衡量一個(gè)電商網(wǎng)站首頁不能只看視覺體驗(yàn)。設(shè)計(jì)的本質(zhì)是解決問題，而不是只停留在滿足“好看”、“有格調(diào)”、“上檔次”的視覺層面。你的關(guān)注點(diǎn)不只是顏色、字體、圖片，還有業(yè)務(wù)的流程。電商本身就是一個(gè)購(gòu)買流程。選購(gòu)、意向、推薦都需要關(guān)注。如果你期望客戶去關(guān)注的產(chǎn)品沒有達(dá)到預(yù)期的訪問和銷售量。那么你這個(gè)界面設(shè)計(jì)如何漂亮或者優(yōu)雅都是無用的。如果這個(gè)電商網(wǎng)站已經(jīng)開始運(yùn)營(yíng)了，我們需要多看后臺(tái)的數(shù)據(jù)分析，有多少用戶訪問了首頁，其中多少人點(diǎn)擊了你推薦的產(chǎn)品，有多少比率的用戶在看了之后選擇了購(gòu)買，在購(gòu)買流程中有多少人在支付這個(gè)環(huán)節(jié)而離開的。如果你有這些數(shù)據(jù)，那你自己就可以衡量你的設(shè)計(jì)的好壞，其他主觀臆斷都是浪費(fèi)時(shí)間。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(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://www.jghy.net