• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 我來做淘寶商城的首頁(yè)設(shè)計(jì)

我來做淘寶商城的首頁(yè)設(shè)計(jì)

奈薇網(wǎng)站制作 于2019-07-07 21:01發(fā)表 閱讀次數(shù) 2625次

今天淘寶首頁(yè)的導(dǎo)航又改版了，和上一次淘寶商城改版一樣，微博上的朋友七嘴八舌給了不少意見，粗粗看來大多是負(fù)面的意見。我一向認(rèn)為負(fù)面意見大家都會(huì)提，重要的是能提出有建設(shè)性的意見。剛好現(xiàn)在已經(jīng)離開淘寶，反倒可以公開地說說我的意見，對(duì)錯(cuò)都請(qǐng)大家多指教了。 　　這兩次改版，從交互上來說沒有大的問題。大首頁(yè)中規(guī)中矩，橫向Tab為主導(dǎo)航、左側(cè)縱向Tab為輔導(dǎo)航（非二級(jí)導(dǎo)航，如為二級(jí)，最好還是橫的），把淘寶目前的“主業(yè)”、“輔業(yè)”說得非常清楚了。 　　商城首頁(yè)交互更有“出彩”的地方，就是左上角的“所有商品分類”。這個(gè)交互在搜索結(jié)果頁(yè)面可以體現(xiàn)出它的優(yōu)勢(shì)來，算是一個(gè)很好的借鑒（應(yīng)該來自amazon)。 　　但是，從視覺設(shè)計(jì)上來講，兩個(gè)頁(yè)面都有一些問題。特別是大首頁(yè)的視覺設(shè)計(jì)，可以算得上是重大失誤。 　　我們說“設(shè)計(jì)=解決問題”，而視覺設(shè)計(jì)，就是“用視覺語(yǔ)言去解決邏輯問題”。舉一個(gè)很簡(jiǎn)單的例子，如果一個(gè)東西重要，我們會(huì)讓它居中、留白、加大、加粗等等。居中（位置）、留白（色彩）這些都是視覺語(yǔ)言，我們用它來解決一個(gè)邏輯問題——“重要”。 　　視覺設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，一定要牢牢記住這句話。打開PS之前心里應(yīng)該很明白：我要解決的邏輯問題是什么？然后再打開PS，開始選擇你掌握的視覺語(yǔ)言。 　　在這里我只以商城首頁(yè)為例來具體講講它的問題。只說商城首頁(yè)是因?yàn)槲抑浪脑O(shè)計(jì)師是我曾經(jīng)的徒弟飛飛，她是淘寶最出色的視覺設(shè)計(jì)師之一，也是我?guī)н^的視覺設(shè)計(jì)師中最有靈氣的一位。 　　這是目前的商城首頁(yè)： 　　這個(gè)頁(yè)面視覺沖擊力強(qiáng)，主次分明，品牌形象表達(dá)極富張力。特別是頂部的大色塊，用得非常大膽，而且效果出色（無(wú)論下面的banner怎么花哨，都不會(huì)搶過它了）。 　　但此頁(yè)面有兩個(gè)致命傷： 　　搜索框不明顯，有“被淹沒”的感覺；左側(cè)的分類菜單，起的是導(dǎo)航的作用，但沒有與“主導(dǎo)航”產(chǎn)生任何的視覺關(guān)聯(lián)。這兩個(gè)致命傷，嚴(yán)重地削弱了商城首頁(yè)最主要的功能：引導(dǎo)流量。 　　所有電子商務(wù)網(wǎng)站首頁(yè)，對(duì)流量的引導(dǎo)功能，都少不了這三樣：搜索、分類、推薦。搜索和分類是用戶主動(dòng)自我引導(dǎo)，是精準(zhǔn)流量。如果對(duì)這部分流量不能很好地把握，一定會(huì)從最終的銷售數(shù)字上看到后果。 　　接下來我們分別分析這兩個(gè)問題產(chǎn)生的原因。 　　先看這個(gè)搜索框的局部： 　　發(fā)現(xiàn)問題了么？還沒有？^_^這樣看應(yīng)該非常明顯了。這里有兩個(gè)白色長(zhǎng)條，一個(gè)是非常有用的搜索框，另一個(gè)是幾乎無(wú)用的留白。它們?cè)谶@么近的距離上同時(shí)出現(xiàn)（間隔太近），兩側(cè)又都是這么重、這么花哨的色彩，我們的眼睛和大腦，鐵定會(huì)把它們歸為一組。注意我的說法是——“歸為一組”，也就是在邏輯上把它們歸作了一類，這還能不出問題么？當(dāng)然被淹了。 　　要解決這個(gè)問題也不難，同樣是運(yùn)用視覺語(yǔ)言來解決。比如讓它們?cè)诳臻g上分開一點(diǎn)、讓其中一個(gè)條換個(gè)顏色等等。 　　再來看菜單的局部： 　　我們用同樣的思路來看，這里面哪些東西是一組的？很明顯“淘品牌”和“所有商品分類”是一組，下面的菜單是另一組。從邏輯的角度來看它，問題是不是顯而易見？ 　　另一個(gè)問題就不是那么明顯了，這要在搜索結(jié)果頁(yè)面才能看到，也就是我上面提到“出彩的交互”。當(dāng)用戶鼠標(biāo)hover在“所有商品分類”按鈕上的時(shí)候。下面灰色的分類菜單會(huì)以DropdownMenu的形式向下展開。所以這里還有一個(gè)隱含的邏輯問題需要解決，就是“按鈕”與“下拉菜單”是一組。 　　這是我改的效果圖，看看是不是好了些： 　　一共有四處小改動(dòng)： 　　加了個(gè)漸變背景，這樣搜索框下面的白色長(zhǎng)條就沒有了；把搜索框向上移了一點(diǎn)，繼續(xù)拉開與下方空白之間的距離。這樣一來，它就不會(huì)被淹了；菜單的圖標(biāo)改成了紅色，與頂上的導(dǎo)航呼應(yīng)，形成一組；把菜單向上移了十來個(gè)像素，沖進(jìn)了大色塊，并加了一點(diǎn)點(diǎn)投影，體現(xiàn)出它的“下拉菜單”特性。所以視覺設(shè)計(jì)實(shí)際上在解決的還是交互問題——或者極端一點(diǎn)說——是邏輯問題。 　　某些設(shè)計(jì)師做了幾年甚至十幾年網(wǎng)頁(yè)設(shè)計(jì)，卻仍然認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)藝術(shù)問題，這是大錯(cuò)特錯(cuò)的。 　　淘寶大首頁(yè)的問題就不說了，大家有興趣的話可以跟著討論討論，也希望看到它盡快的完善。 　　淘寶的設(shè)計(jì)師已經(jīng)是行業(yè)中千挑萬(wàn)選的精英，實(shí)際經(jīng)驗(yàn)豐富，如果整個(gè)團(tuán)隊(duì)的“設(shè)計(jì)理念”和“設(shè)計(jì)哲學(xué)”的大方向正確，一定能繼續(xù)保持領(lǐng)頭羊的地位。

我來做淘寶商城的首頁(yè)設(shè)計(jì)相關(guān)標(biāo)簽：制作網(wǎng)站，企業(yè)建站，網(wǎng)站優(yōu)化，網(wǎng)站設(shè)計(jì)

相關(guān)熱點(diǎn)推薦

網(wǎng)站設(shè)計(jì)需要注意那幾點(diǎn) 創(chuàng)造設(shè)計(jì)中的優(yōu)雅與節(jié)奏 網(wǎng)站的視覺路徑和版式設(shè) 交互設(shè)計(jì)模式——分頁(yè) html5與網(wǎng)站優(yōu)化 網(wǎng)站首頁(yè)設(shè)計(jì)的好看，這 網(wǎng)頁(yè)設(shè)計(jì)中的圖片運(yùn)用與 青島網(wǎng)站建設(shè)布局好關(guān)鍵 網(wǎng)站關(guān)鍵詞擺放的四個(gè)關(guān) 青島網(wǎng)站設(shè)計(jì)哪家好 常見的排版方式與表現(xiàn)類 優(yōu)化用戶體驗(yàn)，讓網(wǎng)站呈 影響網(wǎng)站排名的一些不必 青島網(wǎng)站設(shè)計(jì)容易犯的幾 用戶體驗(yàn)中溝通的技巧 如何計(jì)算搜索引擎關(guān)鍵詞 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理- 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價(jià)格越來 網(wǎng)頁(yè)配色密碼 響應(yīng)式網(wǎng)頁(yè)你了解嗎？ 如何創(chuàng)建一個(gè)用戶體驗(yàn)良 店鋪推廣之SEO入門 寫給在職設(shè)計(jì)師們 分類目錄 一個(gè)好的網(wǎng)站應(yīng)該同時(shí)具 網(wǎng)頁(yè)設(shè)計(jì)制作應(yīng)注意的問 網(wǎng)頁(yè)界面設(shè)計(jì)教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計(jì)如何做好風(fēng)格統(tǒng) 2020年主流網(wǎng)頁(yè)的設(shè) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁(yè)被修改的辦 WEB設(shè)計(jì)經(jīng)驗(yàn) 網(wǎng)站推廣技巧之鏈接策略

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶