在電子商務(wù)網(wǎng)站中，用戶最急切需要獲得的不外乎兩點：吸引人的商品或店鋪，以及網(wǎng)站能夠給予他的信任感。下面由學(xué)習(xí)啦小編為大家整理的國外電商網(wǎng)站設(shè)計，希望大家喜歡!

　　國外電商網(wǎng)站設(shè)計

　　(一)設(shè)計思路整理

　　這是我從以前的工作帶來的一個習(xí)慣：要做一個具體的東西之前，一定要對整體有一個較全面的認(rèn)識。在我的認(rèn)識中，設(shè)計不同于藝術(shù)，藝術(shù)是表達(dá)自己發(fā)現(xiàn)的美，設(shè)計更多的是滿足特定的需求。

　　我這次要做的是一個電商網(wǎng)站，客戶群體主要是美國女性，以年輕媽媽們?yōu)橹?，于是，主要針對產(chǎn)品屬性，目標(biāo)用戶和競爭產(chǎn)品方面和經(jīng)理進(jìn)行溝通，做了思維導(dǎo)圖

　　(二)尋找參考資料

　　在第一步對設(shè)計需要有了一個較全面的認(rèn)識后，就進(jìn)入下一步，參考資料的整理了。首先，國內(nèi)容主流的電商網(wǎng)頁截圖這是必須的了，還有就是一些優(yōu)秀設(shè)計參考，比如UI8的素材 和 Pinterest里面的優(yōu)秀設(shè)計，花瓣里面的質(zhì)和量還是遠(yuǎn)比不上它。

　　(三)logo設(shè)計

　　對整體有了認(rèn)識，也找了很多參考資料，:grin:現(xiàn)在可以做具體設(shè)計了。應(yīng)老板要求logo要重新設(shè)計下，好吧，這部分花精力比較多的是字體部分

　　s部分作了好幾次調(diào)整

　　logo圖形部分相對簡單些，由小到大的長點組成。

　　(四)logo和網(wǎng)站主色的確定

　　在logo的形確定后，很重要的一步是顏色的確定了。現(xiàn)在可以隨便看看那些大型網(wǎng)站，大部分網(wǎng)站的主色和logo是一致的，顏色有時候感覺是個玄學(xué)，不同的人有不同的看法。(這里和我一樣比較多迷惑的朋友看一下梁景紅老師的《色彩平衡法則》幫助挺大，其他的那些什么色彩搭配和色卡表大多都是扯淡的，沒什么 * 用。)

　　(五)具體頁面設(shè)計

　　第一版做的時候用的軟件是ps，網(wǎng)頁板式參考的國外電商網(wǎng)站，寬度1920px，主體內(nèi)容1170px，刪格化是用的70px，間距為30px。

　　做出來之后發(fā)現(xiàn)了一些問題：

　　1，1170點主頁信息有些過寬。

　　顯得擁擠，特別是在非高清筆記上面瀏覽時,本身瀏覽器邊上的滑動條有一定的寬度，并且有時候瀏覽網(wǎng)頁并非開到最大化。

　　2，間距30px的間距有些過大。

　　商品信息展示的時候，中間的間距30px會顯得過寬，10px會顯得有些窄，20px比較合適。當(dāng)信息同時要分三欄，四欄時，既要保證間距合適，又要考慮每一欄都為整數(shù)時，1170px不方便進(jìn)行設(shè)計，容易出現(xiàn)小數(shù)。

　　3，對后續(xù)調(diào)整麻煩，特別考慮響應(yīng)式設(shè)計時。

　　第二版改進(jìn)時，我進(jìn)行了重新修改，這次我用的是sketch做的。

　　sketch做這個最突出的優(yōu)點是不用進(jìn)行標(biāo)注了，這里推薦一個神奇的插件Measure, 直接倒出web格式的文檔

　　國外的電子商務(wù)網(wǎng)站設(shè)計

　　1.確定可視范圍

　　根據(jù)統(tǒng)計報告顯示，2014年使用率最高的Internet用戶屏幕分辨率為1366px*768px。以此為例，瀏覽器邊框?qū)挾绕毡樵?1左右，所以網(wǎng)頁首屏寬度在無干擾因素的情況下可以確定為1345;而屏幕總高度為768，除去任務(wù)欄高度40、店鋪頁頭106、瀏覽器(工具欄、邊框等)160和位置工具欄30，初步估算首屏高度控制在432較為合適。因此我們可以得出，最符合時下趨勢的首屏設(shè)計寬高基本范圍是1345*432，重要的內(nèi)容可以盡量放在這個區(qū)間里。

　　2.展示吸引用戶的信息

　　首頁的首屏位置在整個網(wǎng)站中都稱得上寸土寸金，正因為如此，此處展示的文字應(yīng)該短小精悍，盡可能用最少的篇幅就把信息表達(dá)清楚。標(biāo)題性文字更應(yīng)該把商家的商業(yè)訴求清晰直接的表達(dá)出來，在這類文字的策劃上需注意符合網(wǎng)站的整體風(fēng)格。

　　3.視覺焦點要顯眼

　　大多數(shù)用戶的瀏覽習(xí)慣是走馬觀花式的，以如今國內(nèi)電商網(wǎng)站普遍的布局來看，用戶在第一屏中的視覺焦點基本上以Banner和導(dǎo)航為主。因此，其中所表現(xiàn)的無論是文字還是大圖，都應(yīng)該讓用戶一眼看清內(nèi)容，減少其思考時間。設(shè)計師在設(shè)計時可以用“去色”的方法來檢驗實際效果。

　　4.圖片讓內(nèi)容更利于理解

　　要讓用戶在短短的幾秒鐘之內(nèi)就了解網(wǎng)站或商家發(fā)布的一系列信息，單憑簡短的文字是不夠的，還需借力于圖片的幫助。圖片的使用能從側(cè)面含蓄的襯托主題，因此，在圖片素材的選擇上應(yīng)該保證對主旨的表達(dá)有幫助，并且在視覺上保持風(fēng)格一致。

　　5.用風(fēng)格強(qiáng)調(diào)主題

　　網(wǎng)站首屏的風(fēng)格是根據(jù)目的來決定的，在設(shè)計之前，必須要了解這個首屏究竟在整個網(wǎng)站中會起到什么樣的作用。一般來說，電子商務(wù)網(wǎng)站的首頁首屏?xí)脕磉M(jìn)行推廣宣傳，比如單品推廣、店鋪推廣和活動宣傳等。

　　6.鎖定用戶的視覺重點

　　當(dāng)用戶對網(wǎng)站還不太熟悉的時候，進(jìn)入首頁必然會一頭霧水，此時，給予用戶視覺上的引導(dǎo)變得格外重要。引導(dǎo)的方法多種多樣，比如醒目的大字或圖片，吸引人的標(biāo)題、或是條理清晰整體布局等。所謂引導(dǎo)，并不只是代表讓顧客購買商品，更意味著讓用戶點擊進(jìn)入其他頁面，產(chǎn)生更多的消費。

　　7.動畫吸引用戶視線

　　在網(wǎng)站用戶體驗比較流暢的基礎(chǔ)上，在首屏中可以適當(dāng)?shù)募尤胍恍┦髽?biāo)互動效果，或是Flash動畫效果會讓頁面看起來更加生動有趣，這種做法也能增加一定數(shù)量的點擊，并且吸引用戶的注意力。但這些效果只能作為點綴，大面積的使用反而會適得其反。

　　8.符合視覺習(xí)慣的圖文混排

　　大片單一的文字或圖片會讓用戶產(chǎn)生厭倦感，而圖文混排很好的彌補(bǔ)了這一點。圖文混排的方式有很多，比如色彩上的對比、文字或圖片的放大等等，在布局上盡量做到錯落有致，讓用戶的視線順暢的轉(zhuǎn)移。無論用哪一種形式，都必須確保的是主要內(nèi)容的可讀性。

　　電商企業(yè)增加網(wǎng)站流量的6大關(guān)鍵措施

　　一、簡潔再簡約。長混跡于互聯(lián)網(wǎng)的人，肯定見過太多形形色色的網(wǎng)站。由于建站水平良莠不齊，再加上建站出發(fā)點更是認(rèn)知迥異，所以，很多充斥著彈窗、廣告、自以為是的內(nèi)容冗余等等干擾用戶訪問的網(wǎng)站層出不窮，而且同質(zhì)化、堆砌化、靜默而單調(diào)的冷頁面模式更是日趨普遍，這給網(wǎng)站用戶體驗造成嚴(yán)重的不便和阻礙。因此，網(wǎng)站務(wù)必簡潔再簡約，只有簡潔才會清晰，只有簡約才會醒目，才能給訪客以良好的第一印象和瀏覽體驗。

　　二、專業(yè)并專注。網(wǎng)站必須是為用戶提供某一方面或某一領(lǐng)域價值信息的，大而全就相當(dāng)于空而泛，沒有特色不說，也缺乏核心競爭力。因此，網(wǎng)站必須是專業(yè)的，以便于為訪客提供相關(guān)的真實有效的價值信息;網(wǎng)站也必須是專注的，以便于形成核心優(yōu)勢和特色并更好地吸引目標(biāo)客戶。只有專業(yè)并專注的網(wǎng)站，讓您讓訪客知道你是做什么的，什么是你的優(yōu)勢，才能更有效地強(qiáng)調(diào)訪客想了解的信息重點，也才能更好地保持網(wǎng)站的權(quán)威性并方便訪客快速獲取相關(guān)信息。

　　三、內(nèi)容是關(guān)鍵。如果網(wǎng)站不能為你的訪客提供實用、有效、精準(zhǔn)、有價值的信息和內(nèi)容，就無法吸引訪客與回頭客，無法保證企業(yè)品牌的權(quán)威性，更無法開展網(wǎng)站在線業(yè)務(wù)。要想讓你的網(wǎng)站有價值，就必須讓你的內(nèi)容有價值。原創(chuàng)性高且能為用戶提供獨特價值的內(nèi)容，才會更增強(qiáng)訪客的信任度，才會提升企業(yè)品牌知名度，并最終提高網(wǎng)站轉(zhuǎn)化率。

　　四、形象很重要。愛美之心人皆有之。形象良好、美觀大方、有價值深度的網(wǎng)站更容易受到用戶的關(guān)注和青睞。全感官流行的注意力時代，視覺因素占據(jù)著絕對的優(yōu)勢。因此，網(wǎng)站只有充分做好清晰明了、簡約而不簡單、創(chuàng)新而令人心動的頁面設(shè)計，并利用好相關(guān)視覺優(yōu)勢，才能聚焦用戶視線，才會真正讓網(wǎng)站變得賞心悅目，并真正提高網(wǎng)站用戶體驗度。

　　五、行動與落地。營銷的所有核心應(yīng)該以用戶的關(guān)注點為出發(fā)點，并以獲取收益為目標(biāo)。因此，企業(yè)必須將網(wǎng)站視覺線索進(jìn)行強(qiáng)調(diào)并優(yōu)化、凸顯行動焦點、清除一切干擾信息落地的因素，引導(dǎo)用戶迅速清晰地采取相關(guān)行動，例如加載樂人網(wǎng)站主播并利用其相關(guān)互動設(shè)計引導(dǎo)訪客進(jìn)行主動咨詢、分享和互動等等，從而在真正意義上提高網(wǎng)站轉(zhuǎn)化率，而這是網(wǎng)站成敗的關(guān)鍵。

　　六、性能與測試。性能穩(wěn)定、流暢便捷是一個網(wǎng)站的基本硬件條件，因此，我們需要適時監(jiān)管與測試網(wǎng)站方方面面的性能是否運營正常、表現(xiàn)良好，以期更好滴為訪客提供時尚便利的瀏覽、搜索和在線體驗，并助力企業(yè)更好地做出相關(guān)發(fā)展決策。