一、商城網站設計的定義與分類

1、商城網站的定義

商城是信息化時代電子商務發展的產物，是商家在網上自己商品的展示、銷售、和企業宣

傳的網絡平臺和通道。

為個人用戶和企業用戶提供人性化的全方位服務，努力為用戶創造親切、輕松和愉悅的購

物環境，不斷豐富產品結構，大化地滿足消費者日趨多樣的購物需求。

2、商城網站的分類

1.平臺型（B2B B2C C2C）

2. 垂直型（自營商城）

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

3、商城網站設計風格

1.簡約

2.時尚

3.卡通

二、商城網站項目工作的流程

1、工作流程

1.項目立項

2.產品分析

仔細研究需要在網頁中展現的內容，梳理其中的邏輯關系，分清層次，以及重要程度。

3.交互原型

網頁原型設計也是分步驟實現的，先把一個頁面分為若干個大部分，然后分別逐步細化。

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

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

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

4.界面設計

根據原型圖使用photoshop生成設計稿。

5.前端開發

6.后臺開發

7.項目測試

8.項目上線

三、商城設計與前端開發的關系

1、板塊設計

1.版塊風格

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

高重用性

2、文字

1.推廣設計（專題）

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

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

2.產品設計

產品設計的字體，很少會做在圖上，大多數字體由前端工程師來實現，設計師一般會選擇

用戶設備里自帶的字體來進行設計。

3.網頁文本字使用規范

中文字體：

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

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

英文字體：

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

體大小，字體請使用系統自帶字體。例：Tahoma、Arial、Verdana

3、設計稿輸出

1.設計稿目錄結構

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

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

2.PSD文件命名

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

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

出稿統一使用）

3.PSD分組、細化

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

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

四、商城banner設計

1、溝通

1.確認信息

2.風格定位

2、執行

1. 先版式（骨架）

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

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

2. 在配色（血肉）

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

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

3. 豐富細節（衣服）

細節就像人的衣服一樣，豐富而適當的細節可以讓設計更加精致很耐看。

3、審核

1.展示形式

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

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

2.信息傳達

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

3.美觀——排版

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

歸納能力。

4.美觀——色彩

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

響到畫面整體的配色。

5.美觀——細節

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

不是可有可無的。

6.美觀——創意

打破常規，與眾不同。

優秀的Banner總能巧妙的傳遞信息。

分享名稱：商城網站設計的定義與分類
當前路徑：http://www.kartarina.com/news30/104180.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計、商城網站等

廣告

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