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

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

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

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

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

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

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

1.平臺型（B2B B2C C2C）

2. 垂直型（自營商城）

3.品牌型（品牌宣傳+購買）

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

1.簡約

2.時尚

3.卡通

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

1、工作流程

1.項目立項

2.產(chǎn)品分析

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

3.交互原型

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

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

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

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

4.界面設(shè)計

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

5.前端開發(fā)

6.后臺開發(fā)

7.項目測試

8.項目上線

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

1、板塊設(shè)計

1.版塊風格

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

高重用性

2、文字

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

推廣設(shè)計的風格多種多樣，需要根據(jù)需求選擇字體來營造氛圍，推廣設(shè)計的字體往往是做

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

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

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

用戶設(shè)備里自帶的字體來進行設(shè)計。

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

中文字體：

文本字一律采用14px字體，黑體主要用做標題、重點突出文字。建議

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

英文字體：

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

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

3、設(shè)計稿輸出

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

JPEG：文件夾下存放每一個頁面的定稿

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

2.PSD文件命名

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

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

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

3.PSD分組、細化

頁面PSD里，每個版塊對應(yīng)一個組，多余沒用的圖層能刪就刪。每個版塊的標題、圖片、

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

四、商城banner設(shè)計

1、溝通

1.確認信息

2.風格定位

2、執(zhí)行

1. 先版式（骨架）

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

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

2. 在配色（血肉）

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

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

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

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

3、審核

1.展示形式

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

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

2.信息傳達

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

3.美觀——排版

當畫Banner需要放的元素比較多，尤其是文字，這是候比較考驗設(shè)計師對信息的整理和

歸納能力。

4.美觀——色彩

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

響到畫面整體的配色。

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

細節(jié)處理的好壞，考驗設(shè)計師的功底和情懷。Banner上面的所有元素都是因為需要存在，

不是可有可無的。

6.美觀——創(chuàng)意

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

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

分享名稱：商城網(wǎng)站設(shè)計的定義與分類
當前路徑：http://redsoil1982.com.cn/news30/104180.html

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

廣告

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