• 
• 
• 
• 
• 
• 
• 

知識普及 ? 我來做淘寶商城的首頁設計

我來做淘寶商城的首頁設計

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

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

我來做淘寶商城的首頁設計相關標簽：網(wǎng)站設計公司，做網(wǎng)站，網(wǎng)站制作，設計網(wǎng)站

相關熱點推薦

清新的網(wǎng)站設計風格 網(wǎng)頁設計之視覺信息傳達 用戶體驗與網(wǎng)頁界面設計 沒有交互意識的設計師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設計 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設合同簽訂需要注 人機交互界面設計的三個 系統(tǒng)化學習SEO技術的 用戶體驗中溝通的技巧 迭代的設計 網(wǎng)站中視覺元素的設計 網(wǎng)站設計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設對 手機建站時容易進入哪些 如何有效的提高網(wǎng)站關鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設 TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設計中關于al 好設計應該是平凡的設計 網(wǎng)站LOGO簡論 網(wǎng)頁布局設計基礎 優(yōu)秀網(wǎng)站的五大特點 新站快速推廣經(jīng)驗，百度 為中文而設計的文本框 關于網(wǎng)站優(yōu)化五大技巧 如何進行網(wǎng)站首頁改版 web設計師可以走得更 專業(yè)設計網(wǎng)站的公司哪里 青島網(wǎng)站設計的幾點知識 青島網(wǎng)站制作哪家強 交互設計的8項黃金法則 設計良好網(wǎng)頁的4項原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋

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

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