@馮鐵 關(guān)于視覺理論分析的文章有很多，我們從目標(biāo)與設(shè)計關(guān)系來討論一些東西吧。

shopping.naver.com是目前屈指可數(shù)的購物站典范之一，也有很多人對其進(jìn)行了剖析，今天，我們來嘗試挖掘一下這個站體驗設(shè)計與目標(biāo)呼應(yīng)上的關(guān)系。當(dāng)然也有一部分是對產(chǎn)品的分析。看看到底是怎么好的，這次的分析過程、方向、方式，希望能幫助一些朋友在參考其他優(yōu)秀案例時擇優(yōu)去糟。

相關(guān)推薦：
《電商設(shè)計師必備的網(wǎng)址導(dǎo)航》
《針對京東網(wǎng)站改版，淺談網(wǎng)頁設(shè)計趨勢》

需求假設(shè)

NAVER的購物站與國內(nèi)電商比起來，對商品的展示過程，用戶的使用過程大體相同，尋找目標(biāo)>梳理對比>展開詳細(xì)>購買行為...
(NAVER以大搜索業(yè)務(wù)為核心，針對電商，購買行為應(yīng)該是在第三方平臺進(jìn)行的，基于這個不同，我們僅僅討論購買行為之前的一些層面)

視覺美觀性,舒適性,合理性,信任度

橫向?qū)Ρ绕渌麌鴥?nèi)的電商站，你不難發(fā)現(xiàn)，視覺美觀性上他們之間大概差了兩個級別，就算有區(qū)域性審美特點的原因，大部分人也會覺得NAVER的購物站更美觀，更舒適，在這點上，NAVER的設(shè)計師已經(jīng)將設(shè)計價值更大化。

整個SHOPPING站從MAINPAGE開始就一路透著官方氣質(zhì)，這里說的官方氣質(zhì)主要指附加給用戶的信任感，源自布局，點線面關(guān)系、展現(xiàn)方式、留白、商品圖片處理、圖字排版等設(shè)計細(xì)節(jié)，對比國內(nèi)的淘寶、天貓、京東、易訊等電商，NAVER的像專賣的，國內(nèi)的像搞小批發(fā)的，可實際上大家都是賣各種品類的商品，孰強孰弱清晰可見。

1.首先比較明顯的是布局方式及展示內(nèi)容，NAVER沒有進(jìn)行更長頁面展示，而是像服裝發(fā)布會一樣，讓你清爽的看到他們推薦的品類，整個內(nèi)容部分都不涉及更詳細(xì)的分類，又通過操作設(shè)計讓推薦進(jìn)行輪播，這樣能滿足運營推廣與用戶探索的需求；說白了，跟國內(nèi)的一樣，這個頁面全是廣告，可是看著又不討厭。

*為什么沒有更多的分類展示是可行的？我猜測NAVER在用戶分析上，進(jìn)行了搜索功能與頁面展示內(nèi)容的性價比調(diào)查，極有可能大部分用戶直接使用搜索，一小部分只看第一屏，只有極少部分會下拉頁面去查找，在國內(nèi)電商站從頭看到尾的感覺，像用戶根本不知道要買什么，只是想花錢一樣，不怎么現(xiàn)實。

關(guān)于推薦品類的設(shè)計，像國內(nèi)電商目前的產(chǎn)品思路以及展示形式，極容易給用戶帶來煩躁感。感官上你可以這樣比喻，在高級的服裝店，很少有服務(wù)員來圍著你轉(zhuǎn)悠，先有禮貌的打個招呼，然后呆著你能看見的地方，隨時需要，他就馬上出現(xiàn)了，不會在你購物的過程里進(jìn)行干擾，你去超市，推銷員圍著你不停的講解他想賣給你的東西，煩躁是一定的，就算你最后買了，回去也覺得是不是被忽悠了。所以不要把更多的圖片或信息堆在首頁上，讓用戶在需要的時候隨時能找到即可，這也可能是NAVER用戶分析及確定設(shè)計思路的出發(fā)點。

2.用規(guī)則的面來布局，減少了點線的使用，不凌亂，傳達(dá)直接，減少眼睛搜索目標(biāo)的時間；(圖)

3.清爽的圖文信息，不繁重，舒適性極高，通俗點說，這樣的頁面你盯著看一個小時，不動彈也不煩，國內(nèi)的電商你試試看，沒過一分鐘就點關(guān)閉了吧？關(guān)于圖文，與其他的NAVER設(shè)計一樣，設(shè)計師給圖文更大的空間，合理的對比關(guān)系，不會強行放大商品圖，能識別即可；

*在這里有個邏輯,就是一般的用戶不會在這里進(jìn)行購買行為,僅僅是展示以及勾引點擊,國內(nèi)電商老想把圖片放大,好像用戶看的更清楚就直接購買一樣.其實大家都知道,購買行為絕大部分都是在詳情頁之后進(jìn)行的.(圖)

4.功能的強調(diào)與設(shè)計方式
與國內(nèi)電商不一樣，NAVER將搜索功能與品類列表整合在一起，這在功能劃分上更統(tǒng)一一些，在用戶端的使用目標(biāo)上這兩個模塊是一致的：尋找目標(biāo)商品、(圖)

5.圖片處理
NAVER對BANNER及大廣的商品圖片處理非常直接，質(zhì)量很高的透底圖，在舒適的基礎(chǔ)上進(jìn)行大,小,飽和等調(diào)節(jié)，文字與圖的對比關(guān)系明顯，國內(nèi)電商的BANNER區(qū)域大部分比較凌亂，可能有一部分原因是有些廣圖由第三方提供，不得知。在這個層面，建議國內(nèi)電商采用更直接，不影響視覺舒適的方式進(jìn)行。

6.關(guān)于柵格化
柵格化打從出現(xiàn)開始，我個人就沒怎么在意過，與其他的設(shè)計標(biāo)準(zhǔn)不同，柵格化橫向上框住了很多設(shè)計突破，太固定化，并且在配合細(xì)節(jié)的設(shè)計上，國內(nèi)幾家并沒有完成對柵格系統(tǒng)的美觀支撐，我在NHN的階段，從來沒聽說過這個東西，之前有朋友進(jìn)行了shopping.naver.com的柵格分析，我覺得這位朋友需要確認(rèn)一下。

*縱然有產(chǎn)品運營規(guī)則的不同，NAVER設(shè)計師在目標(biāo)與設(shè)計實現(xiàn)的關(guān)聯(lián)上，做的非常非常好，美觀性、舒適性、擴展性、合理性，甚至在電商頁面構(gòu)架的創(chuàng)新上，都為我們做了一次很好的示范。

NAVER與HANGAME之前合并在一起成立了NHN，目前已經(jīng)再次拆分成幾家不同的業(yè)務(wù)公司，其中大家較為熟知的產(chǎn)品有NAVER、HANGAME、LINE，每一款產(chǎn)品都精益求精,非常值得研究，在互聯(lián)網(wǎng)領(lǐng)域的體驗設(shè)計上做了非常多的貢獻(xiàn)。得益于他們強大的設(shè)計力量，技術(shù)力量，將亞系UI提升了很多，也是我們學(xué)習(xí)的典范。韓國另一家門戶網(wǎng)站DAUM的設(shè)計也很獨到，由于設(shè)計師的流動性，兩家平臺的很多設(shè)計理念大同，目前DAUM的設(shè)計執(zhí)行力已經(jīng)略有趕超(個人看法^^)。有興趣的朋友可以搜索他們網(wǎng)站。

*這次shopping改版，本人已經(jīng)不在NHN公司，無法直接得到第一手設(shè)計材料，都是按照以前的經(jīng)驗進(jìn)行的臆測，如有不實，各位見諒。

本人第一次公開發(fā)表產(chǎn)品設(shè)計類文章，略不成熟，看的人請體諒，在方向及實際意義上有什么建議，也請及時通知我。

作者：@馮鐵

希望借助網(wǎng)絡(luò)平臺與各位同行一起討論產(chǎn)品,體驗設(shè)計相關(guān)的內(nèi)容
不定期進(jìn)行發(fā)布,關(guān)注設(shè)計流行,關(guān)注設(shè)計根本
微信公眾平臺：fengtie_offical