一、商城網(wǎng)站設(shè)計(jì)的定義與分類

1、商城網(wǎng)站的定義

商城是信息化時(shí)代電子商務(wù)發(fā)展的產(chǎn)物，是商家在網(wǎng)上自己商品的展示、銷售、和企業(yè)宣

傳的網(wǎng)絡(luò)平臺(tái)和通道。

為個(gè)人用戶和企業(yè)用戶提供人性化的全方位服務(wù)，努力為用戶創(chuàng)造親切、輕松和愉悅的購(gòu)

物環(huán)境，不斷豐富產(chǎn)品結(jié)構(gòu)，大化地滿足消費(fèi)者日趨多樣的購(gòu)物需求。

2、商城網(wǎng)站的分類

1.平臺(tái)型（B2B B2C C2C）

2. 垂直型（自營(yíng)商城）

3.品牌型（品牌宣傳+購(gòu)買）

3、商城網(wǎng)站設(shè)計(jì)風(fēng)格

1.簡(jiǎn)約

2.時(shí)尚

3.卡通

二、商城網(wǎng)站項(xiàng)目工作的流程

1、工作流程

1.項(xiàng)目立項(xiàng)

2.產(chǎn)品分析

仔細(xì)研究需要在網(wǎng)頁(yè)中展現(xiàn)的內(nèi)容，梳理其中的邏輯關(guān)系，分清層次，以及重要程度。

3.交互原型

網(wǎng)頁(yè)原型設(shè)計(jì)也是分步驟實(shí)現(xiàn)的，先把一個(gè)頁(yè)面分為若干個(gè)大部分，然后分別逐步細(xì)化。

如果是為客戶設(shè)計(jì)的網(wǎng)頁(yè)，那么使用原型線框圖與客戶交流溝通是最合適的方式，既可以清晰地表明設(shè)計(jì)思路，又不用花費(fèi)大量的繪制時(shí)間，因?yàn)樵驮O(shè)計(jì)階段，往往要經(jīng)過(guò)反復(fù)修改。

如果每次都使用完成以后的設(shè)計(jì)圖交流，則反復(fù)修改需要大量的時(shí)間和工作量，而且在設(shè)

計(jì)的開(kāi)始階段，往往交流溝通的中心并不是涉及的細(xì)節(jié)，而是功能、結(jié)構(gòu)等策略性的問(wèn)題，因此使用這種線框圖示非常合適的。

4.界面設(shè)計(jì)

根據(jù)原型圖使用photoshop生成設(shè)計(jì)稿。

5.前端開(kāi)發(fā)

6.后臺(tái)開(kāi)發(fā)

7.項(xiàng)目測(cè)試

8.項(xiàng)目上線

三、商城設(shè)計(jì)與前端開(kāi)發(fā)的關(guān)系

1、板塊設(shè)計(jì)

1.版塊風(fēng)格

板塊可以具有自己獨(dú)立的風(fēng)格，建議所有版塊上的保持控件風(fēng)格統(tǒng)一，功能一致，以便提

高重用性

2、文字

1.推廣設(shè)計(jì)（專題）

推廣設(shè)計(jì)的風(fēng)格多種多樣，需要根據(jù)需求選擇字體來(lái)營(yíng)造氛圍，推廣設(shè)計(jì)的字體往往是做

在圖片上，不需要考慮用戶的設(shè)備中有沒(méi)有包含該字體。

2.產(chǎn)品設(shè)計(jì)

產(chǎn)品設(shè)計(jì)的字體，很少會(huì)做在圖上，大多數(shù)字體由前端工程師來(lái)實(shí)現(xiàn)，設(shè)計(jì)師一般會(huì)選擇

用戶設(shè)備里自帶的字體來(lái)進(jìn)行設(shè)計(jì)。

3.網(wǎng)頁(yè)文本字使用規(guī)范

中文字體：

文本字一律采用14px字體，黑體主要用做標(biāo)題、重點(diǎn)突出文字。建議

使用14px + 20px字體的混合搭配，避免大面積使用加粗字體，字體請(qǐng)使用系統(tǒng)自帶字體。

英文字體：

英文字體從9px開(kāi)始就能清晰顯示，選擇空間大。10px、11px、12px、13px都是常見(jiàn)的字

體大小，字體請(qǐng)使用系統(tǒng)自帶字體。例：Tahoma、Arial、Verdana

3、設(shè)計(jì)稿輸出

1.設(shè)計(jì)稿目錄結(jié)構(gòu)

JPEG：文件夾下存放每一個(gè)頁(yè)面的定稿

PSD：文件夾下存放PSD源文件

2.PSD文件命名

PSD文件要統(tǒng)一命名，最終確認(rèn)、廢棄的稿件要分別標(biāo)記。

命名準(zhǔn)則：版塊名稱 + 內(nèi)容頁(yè)面 + 制作日期 + ABCD表示第幾稿（PSD源文件、JPEG輸

出稿統(tǒng)一使用）

3.PSD分組、細(xì)化

頁(yè)面PSD里，每個(gè)版塊對(duì)應(yīng)一個(gè)組，多余沒(méi)用的圖層能刪就刪。每個(gè)版塊的標(biāo)題、圖片、

作品、按鈕、文字等都用組別歸類命名好。

四、商城banner設(shè)計(jì)

1、溝通

1.確認(rèn)信息

2.風(fēng)格定位

2、執(zhí)行

1. 先版式（骨架）

如果不考慮產(chǎn)品的位置，常見(jiàn)的“文案+背景”的關(guān)系主要有三種。

如果考慮產(chǎn)品的位置，常見(jiàn)的“文案+產(chǎn)品+背景”的關(guān)系主要是下圖的幾種。

2. 在配色（血肉）

配色方法其實(shí)有很多，下圖介紹的6種方法可以讓Banner呈現(xiàn)平衡的色彩關(guān)系。

黑白灰這3 種中性色能與任何色彩起和諧、緩解作用。主要作用是：調(diào)和色彩搭配，突出其他顏色。

3. 豐富細(xì)節(jié)（衣服）

細(xì)節(jié)就像人的衣服一樣，豐富而適當(dāng)?shù)募?xì)節(jié)可以讓設(shè)計(jì)更加精致很耐看。

3、審核

1.展示形式

Banner設(shè)計(jì)后一定要o上效果提或是樣機(jī)，去模擬真實(shí)的展示效果，看看實(shí)際上線效果和

預(yù)期是不是一致的。另外，設(shè)計(jì)師要去表達(dá)自己的設(shè)計(jì)思路和想法。

2.信息傳達(dá)

Banner的組成元素都是為了傳達(dá)中心主旨，要做到意思傳達(dá)清晰準(zhǔn)確，避免閱讀障礙和意思含糊的情況。

3.美觀——排版

當(dāng)畫Banner需要放的元素比較多，尤其是文字，這是候比較考驗(yàn)設(shè)計(jì)師對(duì)信息的整理和

歸納能力。

4.美觀——色彩

前面介紹了配色的幾種方法，但是色彩的明度，純度和飽和度等屬性上面的變化還是會(huì)影

響到畫面整體的配色。

5.美觀——細(xì)節(jié)

細(xì)節(jié)處理的好壞，考驗(yàn)設(shè)計(jì)師的功底和情懷。Banner上面的所有元素都是因?yàn)樾枰嬖冢?/p>

不是可有可無(wú)的。

6.美觀——?jiǎng)?chuàng)意

打破常規(guī)，與眾不同。

優(yōu)秀的Banner總能巧妙的傳遞信息。

分享名稱：商城網(wǎng)站設(shè)計(jì)的定義與分類
當(dāng)前路徑：http://m.js-pz168.com/news30/104180.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、商城網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)