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

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

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

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

例如（圖1-1）這些都是B2C綜合商城類的App，設(shè)計師顯然不喜歡這種類似菜市場雜亂的界面設(shè)計，更傾向于去設(shè)計小而美的垂直類電商界面設(shè)計。或者引用國外的電商應(yīng)用設(shè)計，覺得那樣的設(shè)計留白多，圖片精美，這才是一個好的設(shè)計。那么如何我們到底該評價一個電商App的首頁設(shè)計好壞了？

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

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

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

圖1-2 B2C綜合類App和垂直細分類電商App運營對比 

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

 

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

圖1-3良倉首頁截圖

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

（圖1-4）淘寶首頁機器人合成的各種Banner

所以同樣是電商，B2C綜合類App和垂直細分類的App，因為用戶的屬性的不同，體量的不同，最終設(shè)計師給出的設(shè)計解決方案也不一樣。那么下面我們分別根據(jù)不同類型電商App進行分析設(shè)計。

電商首頁設(shè)計思路，從上往下思路是：

用戶使用搜索欄快速找到心儀的商品（讓快速定位目標）

通過Banner活動拉動流量（產(chǎn)品拉新活躍用戶，讓用戶進來）

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

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

首屏后的頁面展示各大類別（方便用戶進入沉浸式瀏覽方式）

模塊1：搜索欄

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

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

視覺設(shè)計：

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

（圖1-6）京東在不同高度導航欄的透明度變化

模塊2：橫幅廣告

因為電商促銷活動是拉動消費最大的源泉，而Banner是很好展示活動頁面的地方。4到6個Banner就能牢牢抓住用戶貪便宜的心理。而且Banner作為運營位也可以作為銷售的廣告位進行出售。所以一開始就要看見Banner是很好的展示。

視覺設(shè)計：

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

（圖1-7）PS設(shè)計Banner會劃出輔助線，留出文字安全區(qū)域

模塊3：模塊快速入口

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

視覺設(shè)計1 模塊分割：

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

（圖1-8）飛豬旅行與大眾點評圖標模塊

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

（圖1-9）美團模塊的邊緣留白

視覺設(shè)計2 圖標風格：

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

（圖1-10）使用了剪影和線性設(shè)計風格的圖標

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

（圖1-11）飛豬使用了微漸變設(shè)計風格的圖標

微漸變的設(shè)計風格的難點就是分型，一般會把設(shè)計會有兩種分型方法（圖1-12）把圖標剪影區(qū)分為兩個層次，前后層次通過漸變的手法進行過渡。

（圖1-12）飛豬、支付寶口碑、大眾點評使用漸變分層的圖標

視覺設(shè)計3 背板設(shè)計：

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

（圖1-13）使用了獨特品牌形狀的背景板

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

（圖1-14）使用了獨特紋理的背景板

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

（圖1-15）品牌設(shè)計運用填充紋理

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

（圖1-16）不同情緒的背景圖形

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

（圖1-17）幾何形狀變換的背景

模塊4：用戶訂閱

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

視覺設(shè)計：

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

（圖1-18）淘寶的“淘寶頭條”模塊與京東的“京東快報”

模塊5：秒殺品

如果一件商品常年都是優(yōu)惠價，那么等于沒有優(yōu)惠，所以想出了限時秒殺的方法。不是簡單促使用戶快速下單的，而是只有在規(guī)定的時間才可以享受更加優(yōu)惠的價格。這樣增加了用戶的粘性，必須在制定的時間去再次登錄app。在秒殺開始之前，用戶可能會告訴他的朋友優(yōu)惠的信息，促使他的朋友也去進行購買，就形成了線下帶動購買的過程。或者用戶在其他商品品類閑逛，在這個閑逛的時間里，用戶也有可能去購買其他的商品。淘寶和京東會有秒殺品，秒殺品起到的作用就是帶動更多的流量進入App。

視覺設(shè)計：

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

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

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

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

例如（圖1-20）淘寶這塊的推薦，淘寶如果判斷你是男性用戶，默認推薦的是男神范，如果判斷你是女性用戶默認推薦的是愛逛街。

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

 

模塊7：樓層類別展示

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

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

 

模塊8：猜你喜歡

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

 

模塊9：底部導航欄

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

首頁

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

 

分類

分類頁面起到篩選搜索的作用。但這里的搜索與首頁頂部的搜索框還不一樣。因為分類的搜索帶有一定不確定性，但是卻是讓用戶導流進入的商品頁面最好且更直接的方式。淘寶由于業(yè)務(wù)眾多，已經(jīng)放棄了在首頁提供分類檢索商品的做法。而更傾向于用內(nèi)容引導用戶發(fā)生購買行為。

 

購物車

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

 

我的

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

 

視覺設(shè)計

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

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

屏幕安全邊距

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

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

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

（圖1-22）Airbnb首頁45px的邊緣留白

豎向比例切割豆腐塊

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

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

（圖1-23）淘寶的1/4切分切割模塊

 

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

（圖1-24）淘寶1/3切分切割模塊

 

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

（圖1-25）淘寶舊版本模塊切割瑣碎

 

橫向柵格切割豆腐塊

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

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

（圖1-26）京東的橫向柵格基準比對

 

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

（圖1-27）淘寶的橫向柵格基準比對

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

 

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

淘寶因為追求信息的密度（圖1-28），沒有留給設(shè)計師過多的發(fā)揮空間，所以只能采取文字+色塊背景的設(shè)計形式。

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

 

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

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

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

 

視覺設(shè)計3 文字+圖標

使用剪影或者線性的圖標搭配文字，如果模塊非常容易提煉成某種具象化的圖形。可以使用這種手法。例如淘寶的全球精選首頁（圖1-30），使用剪影圖標地球去表達全球的概念。

（圖1-30）文字+圖標的模塊名稱設(shè)計

 

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

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

（圖1-31）方正蘭亭黑字體粗細搭配

 

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

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

（圖1-32）粗細字體混搭+半截英文字體+雙色線條

 

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

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)