社交電商視覺(jué)設(shè)計(jì)規(guī)程社交電商視覺(jué)設(shè)計(jì)規(guī)程

一、總則

社交電商視覺(jué)設(shè)計(jì)是提升用戶(hù)體驗(yàn)、增強(qiáng)商品吸引力、促進(jìn)用戶(hù)互動(dòng)的關(guān)鍵環(huán)節(jié)。本規(guī)程旨在規(guī)范社交電商平臺(tái)上的視覺(jué)設(shè)計(jì)標(biāo)準(zhǔn)，確保視覺(jué)呈現(xiàn)的專(zhuān)業(yè)性、一致性和用戶(hù)友好性。設(shè)計(jì)應(yīng)遵循簡(jiǎn)潔、直觀、美觀的原則，同時(shí)滿足不同平臺(tái)特性和用戶(hù)需求。

（一）設(shè)計(jì)目標(biāo)

1.提升商品轉(zhuǎn)化率

2.增強(qiáng)用戶(hù)參與度

3.統(tǒng)一平臺(tái)視覺(jué)風(fēng)格

4.優(yōu)化移動(dòng)端視覺(jué)體驗(yàn)

（二）設(shè)計(jì)原則

1.簡(jiǎn)潔性：避免過(guò)度裝飾，保持界面清晰易讀

2.一致性：統(tǒng)一色彩、字體、圖標(biāo)等設(shè)計(jì)元素

3.響應(yīng)式：適配不同屏幕尺寸和設(shè)備

4.引導(dǎo)性：通過(guò)視覺(jué)層次引導(dǎo)用戶(hù)行為

5.品牌性：融入品牌特色，增強(qiáng)辨識(shí)度

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.根據(jù)品牌定位選擇1-2種主色調(diào)

-時(shí)尚類(lèi)：FF6347（番茄紅）、FF69B4（熱粉紅）

-生活方式類(lèi)：4682B4（鋼藍(lán)）、FFD700（金色）

2.主色調(diào)在界面中占比控制在40%-60%

（二）輔助色搭配

1.選擇3-5種輔助色用于功能按鈕、提示信息等

-背景色：F5F5F5（淺灰白）、FFFFFF（純白）

-強(qiáng)調(diào)色：4CAF50（翠綠）、2196F3（藍(lán)）

2.確保色彩對(duì)比度滿足WCAGAA級(jí)標(biāo)準(zhǔn)

（三）色彩使用規(guī)范

1.關(guān)鍵信息使用高對(duì)比度色彩

-文字與背景對(duì)比度≥4.5:1

2.類(lèi)別區(qū)分使用不同色彩體系

-新品FF9800（橙）、促銷(xiāo)E91E63（粉紅）、熱銷(xiāo)8BC34A（淺綠）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.頂部區(qū)域（200px）

-搜索欄、分類(lèi)導(dǎo)航、用戶(hù)頭像

2.內(nèi)容區(qū)域（占屏70%）

-網(wǎng)格布局：4-6列商品卡片

-輪播圖：高度≥300px

3.底部區(qū)域（50px）

-我的、消息、購(gòu)物車(chē)等核心功能入口

（二）商品詳情頁(yè)布局

1.商品主圖（占比50%）

-支持多圖切換、放大查看

2.商品信息區(qū)（左側(cè)30%）

-標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)

3.互動(dòng)區(qū)（右側(cè)20%）

-分享按鈕、收藏夾、評(píng)論區(qū)

（三）移動(dòng)端適配要點(diǎn)

1.手指點(diǎn)擊區(qū)域最小尺寸≥44x44px

2.臨界元素間距≥8px

3.滾動(dòng)條寬度固定為6px

四、字體系統(tǒng)設(shè)計(jì)

（一）字體選擇標(biāo)準(zhǔn)

1.標(biāo)題字體：思源黑體、阿里巴巴普惠體等無(wú)襯線字體

-大標(biāo)題字號(hào)≥24px

2.正文字體：思源宋體、蘋(píng)方等清晰易讀字體

-正文字號(hào)16px，行高1.5

（二）字號(hào)層級(jí)規(guī)范

1.主標(biāo)題：28px-36px

2.副標(biāo)題：20px-24px

3.正文：16px-18px

4.輔助文字：12px-14px

（三）文字排版要求

1.標(biāo)題行高：1.2-1.4倍字號(hào)

2.正文行高：1.4-1.8倍字號(hào)

3.段間距：20-30%行高

五、圖標(biāo)系統(tǒng)設(shè)計(jì)

（一）圖標(biāo)風(fēng)格統(tǒng)一

1.采用線性圖標(biāo)或面性圖標(biāo)統(tǒng)一風(fēng)格

2.圖標(biāo)線條粗細(xì)：1-2px

3.圖標(biāo)色彩與背景對(duì)比度≥3:1

（二）常用圖標(biāo)規(guī)范

1.交互圖標(biāo)：

-分享：標(biāo)準(zhǔn)分享圖標(biāo)（如微信、微博）

-收藏：星標(biāo)或書(shū)簽樣式

-搜索：放大鏡樣式

2.功能圖標(biāo)：

-購(gòu)物車(chē)：購(gòu)物車(chē)輪廓

-評(píng)價(jià)：星星或?qū)υ挌馀?/p>

（三）圖標(biāo)使用原則

1.同一功能使用統(tǒng)一圖標(biāo)

2.圖標(biāo)應(yīng)避免與其他元素重疊

3.圖標(biāo)尺寸保持統(tǒng)一（如24x24px）

六、動(dòng)效設(shè)計(jì)規(guī)范

（一）過(guò)渡動(dòng)效

1.頁(yè)面切換：淡入淡出（200-300ms）

2.圖標(biāo)狀態(tài)變化：縮放+顏色漸變

3.下拉刷新：下拉距離≥60px

（二）交互動(dòng)效

1.點(diǎn)擊反饋：按鈕輕微下沉（0.5-1px）

2.拖拽效果：元素跟隨手指平滑移動(dòng)

3.加載狀態(tài)：旋轉(zhuǎn)加載動(dòng)畫(huà)（0.8-1.2s）

（三）動(dòng)效使用限制

1.關(guān)鍵業(yè)務(wù)流程不超過(guò)3個(gè)連續(xù)動(dòng)效

2.動(dòng)效優(yōu)先使用CSS3實(shí)現(xiàn)

3.性能較差設(shè)備可關(guān)閉動(dòng)效

七、設(shè)計(jì)工具與標(biāo)準(zhǔn)

（一）設(shè)計(jì)工具推薦

1.圖形設(shè)計(jì)：Figma、Sketch、AdobeXD

2.字體管理：AdobeFonts、Iseek

3.動(dòng)效設(shè)計(jì)：AfterEffects、Principle

（二）設(shè)計(jì)文件規(guī)范

1.圖片格式：

-素材：PNG（透明背景）、JPG（照片）

-適配：iPhone6+@2x、iPhone12@3x

2.圖標(biāo)文件：SVG格式

3.設(shè)計(jì)規(guī)范：JSON格式導(dǎo)出

（三）設(shè)計(jì)交付標(biāo)準(zhǔn)

1.設(shè)計(jì)稿標(biāo)注：切圖坐標(biāo)、顏色代碼、字體規(guī)格

2.設(shè)計(jì)規(guī)范文檔：完整UI組件庫(kù)

3.動(dòng)效規(guī)范文檔：關(guān)鍵動(dòng)效參數(shù)

八、設(shè)計(jì)審核流程

（一）初審階段

1.驗(yàn)證設(shè)計(jì)是否符合本規(guī)程

2.檢查色彩使用是否準(zhǔn)確

3.確認(rèn)字體規(guī)格是否完整

（二）復(fù)審階段

1.評(píng)估移動(dòng)端適配效果

2.測(cè)試動(dòng)效性能表現(xiàn)

3.驗(yàn)證交互邏輯是否清晰

（三）終審階段

1.評(píng)審設(shè)計(jì)一致性

2.確認(rèn)品牌元素體現(xiàn)

3.檢查可訪問(wèn)性標(biāo)準(zhǔn)

九、附錄

（一）視覺(jué)設(shè)計(jì)組件庫(kù)

1.導(dǎo)航欄組件：含分類(lèi)、搜索、用戶(hù)入口

2.商品卡片組件：含圖片、標(biāo)題、價(jià)格、評(píng)價(jià)

3.按鈕組件：含主要、次要、幽靈按鈕

（二）設(shè)計(jì)檢查清單

1.色彩系統(tǒng)檢查：

-主色調(diào)使用是否規(guī)范

-對(duì)比度是否達(dá)標(biāo)

2.字體系統(tǒng)檢查：

-字號(hào)層級(jí)是否清晰

-字體版權(quán)是否合規(guī)

3.交互檢查：

-點(diǎn)擊區(qū)域是否合理

-動(dòng)效反饋是否明確

（三）更新記錄

1.版本1.0：2023年11月首次發(fā)布

2.版本1.1：2024年1月增加動(dòng)效規(guī)范

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.主色調(diào)定義與作用

主色調(diào)是品牌視覺(jué)識(shí)別的核心元素，在社交電商中具有建立品牌認(rèn)知、傳遞品牌價(jià)值、統(tǒng)一視覺(jué)呈現(xiàn)的關(guān)鍵作用。主色調(diào)應(yīng)與品牌定位、目標(biāo)用戶(hù)心理及產(chǎn)品特性相匹配。

2.主色調(diào)確定方法

(1)品牌調(diào)性分析：

-時(shí)尚前衛(wèi)類(lèi)：選擇飽和度較高、對(duì)比強(qiáng)烈的色彩，如FF1493（深粉紅）、00CED1（深青色）

-生活方式類(lèi)：選擇溫暖、自然的色彩，如FFA07A（淺珊瑚色）、98FB98（淺青綠）

-科技類(lèi)：選擇冷靜、專(zhuān)業(yè)的色彩，如4682B4（鋼藍(lán)）、708090（灰藍(lán)）

(2)競(jìng)品分析：

-調(diào)研同品類(lèi)TOP5競(jìng)品的主色調(diào)使用情況

-分析其色彩策略的優(yōu)劣及市場(chǎng)反響

(3)用戶(hù)調(diào)研：

-通過(guò)問(wèn)卷或焦點(diǎn)小組收集目標(biāo)用戶(hù)對(duì)品牌的色彩偏好

-對(duì)比不同性別、年齡段對(duì)色彩的心理聯(lián)想

3.主色調(diào)使用規(guī)范

(1)應(yīng)用范圍：

-網(wǎng)站頂部導(dǎo)航欄背景

-品牌Logo主色塊

-重要功能按鈕（如“立即購(gòu)買(mǎi)”）

-輪播圖主背景色

(2)使用比例：

-在整體視覺(jué)中占比40%-60%，確保品牌識(shí)別度

-避免大面積單一使用，搭配輔助色形成層次

（二）輔助色搭配

1.輔助色定義與作用

輔助色用于補(bǔ)充主色調(diào)，增強(qiáng)視覺(jué)表現(xiàn)力，區(qū)分功能模塊，提升界面活力。通常選擇2-3種輔助色，形成和諧配色體系。

2.輔助色選擇原則

(1)色相環(huán)關(guān)系：

-選擇與主色調(diào)形成120°-180°對(duì)比色的互補(bǔ)色（如主色為4CAF50，輔助色可選FF5722）

-選擇相鄰色系的鄰近色（如主色為2196F3，輔助色可選00BCD4）

(2)明度與飽和度調(diào)整：

-輔助色飽和度可比主色調(diào)略低，避免沖突

-明度可高于主色調(diào)，用于突出次要信息

(3)行業(yè)特性適配：

-美妝類(lèi)：搭配柔粉、淡金色

-食品類(lèi)：搭配暖黃、豆綠

-運(yùn)動(dòng)類(lèi)：搭配活力橙、海軍藍(lán)

3.輔助色具體應(yīng)用

(1)強(qiáng)調(diào)色：

-用于按鈕、標(biāo)簽、箭頭等引導(dǎo)元素，如F44336（紅）

-用于新商品、限時(shí)折扣等促銷(xiāo)信息

(2)背景色：

-用于信息卡片、評(píng)論區(qū)背景，如FAFAFA（極淺灰）

-用于圖表、圖形的填充色

(3)功能性顏色：

-警告色：FFC107（黃）

-成功色：4CAF50（綠）

-信息色：2196F3（藍(lán)）

（三）色彩使用規(guī)范

1.基礎(chǔ)色彩規(guī)范

(1)品牌色定義：

-明確定義主色調(diào)在不同場(chǎng)景下的具體色值（HEX、RGB）

-例如：主色E91E63在不同狀態(tài)下的色值表

(2)灰度系統(tǒng)：

-建立從FFFFFF到333333的10級(jí)灰度體系

-用于文字、邊框、背景等中性元素

(3)色彩命名規(guī)范：

-按照品牌色-功能分類(lèi)-序號(hào)命名

-例如：Brand-Primary-01（主色-主要-1）

2.色彩對(duì)比度要求

(1)文本與背景：

-正文文本：333333（對(duì)比色FFFFFF）

-輔助文本：666666（對(duì)比色FFFFFF）

-強(qiáng)調(diào)文本：E91E63（對(duì)比色FFFFFF）

(2)表單控件：

-輸入框邊框：E0E0E0（對(duì)比色FFFFFF）

-滑塊軌道：BDBDBD（對(duì)比色FFFFFF）

-滑塊滑塊：FF4081（對(duì)比色FFFFFF）

3.色彩使用場(chǎng)景

(1)商品列表頁(yè)：

-新品標(biāo)簽：FF9800（橙色）

-熱銷(xiāo)標(biāo)簽：8BC34A（綠色）

-促銷(xiāo)標(biāo)簽：E91E63（粉紅色）

(2)購(gòu)物車(chē)頁(yè)面：

-商品圖片邊框：E0E0E0（淺灰）

-刪除按鈕：F44336（紅色）

-優(yōu)惠信息背景：FFF9C4（淡黃）

(3)訂單流程頁(yè)：

-待付款：FF9800（橙色）

-待發(fā)貨：FFC107（黃色）

-待收貨：FFEB3B（亮黃）

4.色彩使用限制

(1)避免使用：

-3種以上飽和度過(guò)高的顏色同時(shí)使用

-色彩飽和度低于10%的淺色（易造成閱讀困難）

(2)特殊場(chǎng)景：

-為色盲用戶(hù)提供圖形化替代標(biāo)識(shí)（如用形狀區(qū)分操作按鈕）

-在醫(yī)療健康類(lèi)商品中避免使用刺激色（如純紅、純黃）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.結(jié)構(gòu)分層設(shè)計(jì)

(1)頂部區(qū)域（200-300px）：

-品牌Logo（左上角，寬度≤100px）

-搜索欄（居中，高度≥40px）

-分類(lèi)導(dǎo)航（Logo右側(cè)，使用圖標(biāo)+文字）

-用戶(hù)中心入口（右上角，使用人像圖標(biāo)）

(2)內(nèi)容區(qū)域（占屏70%-80%）：

-輪播圖（頂部，高度≥300px，自動(dòng)切換）

-分類(lèi)入口（輪播圖下方，3-5組圖標(biāo)+名稱(chēng)）

-愛(ài)心推薦（2-3個(gè)商品卡片組）

-熱門(mén)榜單（滾動(dòng)列表）

(3)底部區(qū)域（50-100px）：

-核心功能入口（4-5個(gè)圖標(biāo)+名稱(chēng)，如首頁(yè)、分類(lèi)、購(gòu)物車(chē)、我的）

-新版更新提示（可選，使用小圖標(biāo)）

2.網(wǎng)格系統(tǒng)規(guī)范

(1)商品列表頁(yè)：

-網(wǎng)格列數(shù)：移動(dòng)端4列，桌面端6列

-圖片高度比例：寬度1:1.5，高度≥200px

-商品信息區(qū)：占卡片高度40%

(2)品牌故事頁(yè)：

-全寬圖：寬度≥1080px

-并列圖文：圖片寬度50%，文字寬度50%

3.響應(yīng)式適配要點(diǎn)

(1)斷點(diǎn)設(shè)置：

-小屏：寬度≤768px（手機(jī)）

-中屏：寬度768-1024px（平板）

-大屏：寬度≥1024px（桌面）

(2)元素適配：

-導(dǎo)航欄：小屏收起為漢堡菜單

-商品卡片：小屏寬度自動(dòng)調(diào)整

-圖片：使用object-fit=cover保證比例

（二）商品詳情頁(yè)布局

1.結(jié)構(gòu)分區(qū)設(shè)計(jì)

(1)頭部區(qū)域（占屏15%）：

-返回按鈕

-分享按鈕

-收藏按鈕

-商品標(biāo)題（可折疊）

(2)內(nèi)容區(qū)（占屏65%）：

-商品圖片（主圖+多圖切換，高度≥300px）

-商品信息（標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)）

-商品規(guī)格（可選規(guī)格使用標(biāo)簽式選擇）

(3)底部區(qū)域（占屏20%）：

-數(shù)量選擇器

-購(gòu)買(mǎi)按鈕

-優(yōu)惠信息（優(yōu)惠券、滿減等）

-相關(guān)推薦（3-5個(gè)商品）

2.圖片展示規(guī)范

(1)主圖要求：

-使用高質(zhì)量圖片（≥1080p分辨率）

-支持放大查看（放大倍數(shù)5-8倍）

-角度展示：正面+側(cè)面+細(xì)節(jié)圖

(2)多圖切換：

-左右滑動(dòng)切換

-點(diǎn)擊縮略圖全屏查看

-縮略圖排列：3行展示

3.信息層級(jí)設(shè)計(jì)

(1)重要信息突出：

-標(biāo)題字號(hào)≥24px，加粗

-價(jià)格使用特殊字體或色塊突出

-銷(xiāo)量使用醒目數(shù)字格式

(2)次要信息歸類(lèi)：

-評(píng)價(jià)使用星級(jí)+數(shù)字（如4.8分（1200+評(píng)價(jià)））

-商品屬性使用分組標(biāo)簽

-優(yōu)惠信息使用特殊色塊

（三）移動(dòng)端適配要點(diǎn)

1.交互設(shè)計(jì)規(guī)范

(1)點(diǎn)擊區(qū)域：

-按鈕點(diǎn)擊區(qū)域≥44x44px

-圖片點(diǎn)擊區(qū)域覆蓋整個(gè)圖片

-下拉刷新區(qū)域≥60px（下拉距離）

(2)手勢(shì)交互：

-左滑返回上一頁(yè)

-滑動(dòng)切換圖片

-長(zhǎng)按商品添加到收藏夾

2.視覺(jué)元素適配

(1)字體大?。?/p>

-標(biāo)題：≥22px

-正文：16-18px

-輔助信息：14-16px

(2)間距規(guī)范：

-組件間距：8-12px

-網(wǎng)格間距：4-6px

(3)元素對(duì)齊：

-使用flex布局保證元素水平垂直居中

-表單元素左右對(duì)齊

3.性能優(yōu)化

(1)圖片優(yōu)化：

-使用WebP格式

-設(shè)置不同分辨率圖片（iPhone6/12/Pro）

(2)動(dòng)效優(yōu)化：

-關(guān)閉復(fù)雜動(dòng)效

-使用CSS3實(shí)現(xiàn)交互動(dòng)效

(3)加載策略：

-圖片懶加載

-首屏加載優(yōu)化（首圖預(yù)加載）

四、字體系統(tǒng)設(shè)計(jì)

（一）字體選擇標(biāo)準(zhǔn)

1.字體分類(lèi)

(1)標(biāo)題字體：

-要求：粗細(xì)變化豐富、識(shí)別度高

-推薦：思源黑體（中/粗/黑）、阿里巴巴普惠體（黑）

-字號(hào)范圍：18px-36px

(2)正文字體：

-要求：清晰易讀、長(zhǎng)時(shí)間閱讀舒適

-推薦：思源宋體（中）、蘋(píng)方（中）

-字號(hào)范圍：14px-18px

(3)輔助字體：

-要求：簡(jiǎn)潔現(xiàn)代、適合小字號(hào)

-推薦：蘋(píng)方（細(xì)）、思源黑體（細(xì)）

-字號(hào)范圍：10px-14px

2.字體授權(quán)

(1)商業(yè)項(xiàng)目使用需確保字體授權(quán)合規(guī)

(2)優(yōu)先選擇可免費(fèi)商用的開(kāi)源字體（如思源黑體）

(3)自研項(xiàng)目需評(píng)估字體版權(quán)風(fēng)險(xiǎn)

（二）字號(hào)層級(jí)規(guī)范

1.層級(jí)定義

(1)一級(jí)標(biāo)題：商品分類(lèi)頁(yè)主標(biāo)題（28px-36px）

(2)二級(jí)標(biāo)題：子分類(lèi)/活動(dòng)標(biāo)題（22px-26px）

(3)三級(jí)標(biāo)題：商品屬性/說(shuō)明（20px-22px）

(4)正文：詳情頁(yè)描述/規(guī)格說(shuō)明（16px-18px）

(5)輔助文本：提示信息/標(biāo)簽（12px-14px）

2.字號(hào)遞進(jìn)

(1)相鄰層級(jí)字號(hào)差：≥1.2倍

(2)示例：

-一級(jí)標(biāo)題：32px

-二級(jí)標(biāo)題：24px

-三級(jí)標(biāo)題：22px

-正文：16px

3.字號(hào)適配

(1)移動(dòng)端：

-一級(jí)標(biāo)題：28px

-正文：16px

(2)桌面端：

-一級(jí)標(biāo)題：36px

-正文：18px

（三）文字排版要求

1.行高設(shè)置

(1)標(biāo)題行高：1.2-1.4倍字號(hào)

(2)正文行高：1.4-1.8倍字號(hào)

(3)輔助文本行高：1.2-1.4倍字號(hào)

2.段落間距

(1)段落間距：20-30%行高

(2)標(biāo)題與正文間距：30-40%行高

3.文本對(duì)齊

(1)標(biāo)題：居中對(duì)齊

(2)正文：左對(duì)齊

(3)價(jià)格：居中對(duì)齊

4.首行縮進(jìn)

(1)中文段落首行縮進(jìn)：2個(gè)漢字寬度

(2)英文段落首行縮進(jìn)：首行縮進(jìn)2字符

五、圖標(biāo)系統(tǒng)設(shè)計(jì)

（一）圖標(biāo)風(fēng)格統(tǒng)一

1.風(fēng)格選擇

(1)線性圖標(biāo)：適合科技感、現(xiàn)代感設(shè)計(jì)（如購(gòu)物車(chē)、用戶(hù)）

(2)面性圖標(biāo)：適合生活化、柔和化設(shè)計(jì)（如收藏、評(píng)價(jià)）

(3)統(tǒng)一標(biāo)準(zhǔn)：同一平臺(tái)使用單一風(fēng)格

2.線條規(guī)范

(1)粗細(xì)：1-2px

(2)顏色：與背景對(duì)比度≥3:1（如主色E91E63）

(3)末端：圓頭或方頭統(tǒng)一處理

3.尺寸規(guī)范

(1)基礎(chǔ)尺寸：24x24px

(2)應(yīng)用場(chǎng)景：

-導(dǎo)航圖標(biāo)：28x28px

-按鈕圖標(biāo)：24x24px

-圖表圖標(biāo)：20x20px

（二）常用圖標(biāo)規(guī)范

1.交互圖標(biāo)

(1)分享：

-微信：藍(lán)色圓形+微信標(biāo)志

-微博：紅色圓形+微博鳥(niǎo)形

-分享箭頭：從中心發(fā)散的線條

(2)收藏：

-未收藏：空心星星

-已收藏：實(shí)心星星

-勾選收藏：對(duì)勾+星星

(3)搜索：

-搜索圖標(biāo)：放大鏡輪廓

-搜索按鈕：放大鏡+文字輸入框

2.功能圖標(biāo)

(1)購(gòu)物車(chē)：

-購(gòu)物車(chē)：購(gòu)物車(chē)輪廓+數(shù)字

-添加商品：加號(hào)+購(gòu)物車(chē)輪廓

(2)評(píng)價(jià)：

-星級(jí)評(píng)價(jià)：星星圖標(biāo)

-評(píng)論：對(duì)話氣泡圖標(biāo)

(3)設(shè)置：

-設(shè)置圖標(biāo)：齒輪形狀

-通知：鈴鐺形狀

（三）圖標(biāo)使用原則

1.一致性原則

(1)同一功能使用相同圖標(biāo)

(2)圖標(biāo)位置保持統(tǒng)一（如購(gòu)物車(chē)始終在右下角）

2.清晰性原則

(1)圖標(biāo)應(yīng)能被快速識(shí)別

(2)避免使用過(guò)于復(fù)雜的圖形

3.功能性原則

(1)圖標(biāo)應(yīng)暗示功能用途

(2)圖標(biāo)狀態(tài)變化應(yīng)明確（如收藏點(diǎn)擊后變色）

4.命名規(guī)范

(1)按功能分類(lèi)+圖標(biāo)類(lèi)型命名

(2)示例：ShoppingCart-Outline、Star-Filled

六、動(dòng)效設(shè)計(jì)規(guī)范

（一）過(guò)渡動(dòng)效

1.頁(yè)面切換

(1)淡入淡出：

-動(dòng)效時(shí)長(zhǎng)：200-300ms

-CSS實(shí)現(xiàn)：opacitytransition

(2)滑動(dòng)切換：

-動(dòng)效時(shí)長(zhǎng)：250-350ms

-CSS實(shí)現(xiàn)：transformtransition

(3)縮放切換：

-動(dòng)效時(shí)長(zhǎng)：150-200ms

-CSS實(shí)現(xiàn)：transformscaletransition

2.狀態(tài)變化

(1)按鈕點(diǎn)擊：

-縮放：scale(0.95)

-顏色：輕微變暗

(2)圖標(biāo)激活：

-旋轉(zhuǎn)：rotate(360deg)

-放大：scale(1.1)

3.加載動(dòng)效

(1)旋轉(zhuǎn)加載：

-動(dòng)效時(shí)長(zhǎng)：1-1.2s

-動(dòng)畫(huà)形式：linearmotion

(2)進(jìn)度條：

-動(dòng)效時(shí)長(zhǎng)：根據(jù)進(jìn)度調(diào)整

-動(dòng)畫(huà)形式：ease-in-outmotion

（二）交互動(dòng)效

1.點(diǎn)擊反饋

(1)按鈕：

-縮放：scale(0.95)

-顏色：變暗10%

-延遲：50ms后恢復(fù)

(2)卡片：

-搖動(dòng)：輕微左右擺動(dòng)

-顏色：背景變暗

2.拖拽動(dòng)效

(1)滑塊：

-平滑跟隨手指移動(dòng)

-限制范圍：min-width/2-max-width/2

(2)圖片調(diào)整：

-雙指捏合縮放

-邊緣防透處理

3.加載狀態(tài)

(1)骨架屏：

-動(dòng)效：漸變色填充

-時(shí)長(zhǎng)：500-700ms

(2)元素出現(xiàn)：

-上滑入場(chǎng)：opacity+transformtranslateY

-動(dòng)效時(shí)長(zhǎng)：300-400ms

（三）動(dòng)效使用限制

1.性能要求

(1)動(dòng)效執(zhí)行時(shí)間＜300ms

(2)動(dòng)效使用CSS3優(yōu)先

(3)復(fù)雜動(dòng)效使用WebAnimationsAPI

2.使用場(chǎng)景

(1)必須使用：

-交互反饋：點(diǎn)擊、拖拽

-狀態(tài)變化：收藏、切換

(2)謹(jǐn)慎使用：

-自動(dòng)播放動(dòng)效

-過(guò)度動(dòng)畫(huà)

(3)禁用場(chǎng)景：

-低性能設(shè)備

-視力障礙用戶(hù)

七、設(shè)計(jì)工具與標(biāo)準(zhǔn)

（一）設(shè)計(jì)工具推薦

1.圖形設(shè)計(jì)

(1)Figma：

-優(yōu)勢(shì)：實(shí)時(shí)協(xié)作、組件庫(kù)共享

-適用：高保真原型設(shè)計(jì)

(2)Sketch：

-優(yōu)勢(shì)：Mac平臺(tái)專(zhuān)用、插件豐富

-適用：iOS/macOS設(shè)計(jì)

(3)AdobeXD：

-優(yōu)勢(shì)：Adobe生態(tài)整合

-適用：全平臺(tái)設(shè)計(jì)

2.字體管理

(1)AdobeFonts：

-優(yōu)勢(shì)：海量字體授權(quán)

-適用：商業(yè)項(xiàng)目

(2)Iseek：

-優(yōu)勢(shì)：中文優(yōu)質(zhì)字體庫(kù)

-適用：中文為主項(xiàng)目

3.動(dòng)效設(shè)計(jì)

(1)AfterEffects：

-優(yōu)勢(shì)：專(zhuān)業(yè)動(dòng)畫(huà)制作

-適用：復(fù)雜交互動(dòng)效

(2)Principle：

-優(yōu)勢(shì)：矢量動(dòng)畫(huà)制作

-適用：UI動(dòng)效設(shè)計(jì)

（二）設(shè)計(jì)文件規(guī)范

1.圖層命名

(1)命名規(guī)則：模塊-類(lèi)型-層級(jí)（如：Header-Button-Primary）

(2)文件夾結(jié)構(gòu)：按功能模塊分類(lèi)

2.切圖規(guī)范

(1)圖片格式：

-素材：PNG（透明背景）、JPG（照片）

-適配：iPhone6+@2x、iPhone12@3x

(2)標(biāo)注內(nèi)容：

-坐標(biāo)尺寸

-顏色代碼（HEX）

-字體規(guī)格

(3)切圖工具：

-Photoshop、Zeplin

3.設(shè)計(jì)規(guī)范文件

(1)內(nèi)容：

-顏色系統(tǒng)

-字體系統(tǒng)

-圖標(biāo)庫(kù)

-組件庫(kù)

(2)格式：

-JSON格式導(dǎo)出

-Markdown編寫(xiě)

（三）設(shè)計(jì)交付標(biāo)準(zhǔn)

1.設(shè)計(jì)稿交付

(1)文件格式：Figma/Sketch/XD

(2)標(biāo)注內(nèi)容：

-所有可交互元素標(biāo)注

-色彩、字體規(guī)格

-動(dòng)效參數(shù)

(3)交付物：

-主文件

-分組文件

-可編輯文件

2.設(shè)計(jì)規(guī)范交付

(1)組件庫(kù)：

-可復(fù)用組件（按鈕、輸入框）

-交互式組件（滑塊、下拉）

(2)設(shè)計(jì)規(guī)范文檔：

-色彩規(guī)范表

-字體規(guī)范表

-圖標(biāo)規(guī)范集

3.設(shè)計(jì)評(píng)審交付

(1)評(píng)審標(biāo)準(zhǔn)：

-設(shè)計(jì)一致性

-可訪問(wèn)性

-交互邏輯

(2)評(píng)審流程：

-初審（設(shè)計(jì)師自評(píng)）

-復(fù)審（設(shè)計(jì)組長(zhǎng)）

-終審（產(chǎn)品經(jīng)理）

八、設(shè)計(jì)審核流程

（一）初審階段

1.設(shè)計(jì)符合性檢查

(1)驗(yàn)證設(shè)計(jì)是否符合本規(guī)程

(2)檢查色彩使用是否準(zhǔn)確

(3)確認(rèn)字體規(guī)格是否完整

2.交互邏輯驗(yàn)證

(1)檢查點(diǎn)擊區(qū)域是否合理

(2)驗(yàn)證狀態(tài)變化是否明確

(3)確認(rèn)動(dòng)效參數(shù)是否合規(guī)

3.品牌一致性檢查

(1)檢查品牌元素是否完整

(2)驗(yàn)證品牌色使用是否統(tǒng)一

(3)確認(rèn)品牌調(diào)性是否一致

（二）復(fù)審階段

1.設(shè)計(jì)質(zhì)量評(píng)估

(1)評(píng)估視覺(jué)表現(xiàn)力

(2)測(cè)試用戶(hù)感知度

(3)檢查細(xì)節(jié)完整性

2.交互測(cè)試

(1)模擬真實(shí)用戶(hù)操作

(2)測(cè)試交互流程順暢度

(3)評(píng)估動(dòng)效反饋效果

3.平臺(tái)適配測(cè)試

(1)檢查不同設(shè)備顯示效果

(2)測(cè)試移動(dòng)端交互適配

(3)驗(yàn)證性能表現(xiàn)

（三）終審階段

1.設(shè)計(jì)評(píng)審

(1)評(píng)審設(shè)計(jì)一致性

(2)確認(rèn)品牌元素體現(xiàn)

(3)檢查可訪問(wèn)性標(biāo)準(zhǔn)

2.用戶(hù)反饋模擬

(1)模擬用戶(hù)使用場(chǎng)景

(2)評(píng)估用戶(hù)操作流暢度

(3)預(yù)測(cè)用戶(hù)滿意度

3.最終確認(rèn)

(1)確認(rèn)設(shè)計(jì)交付物完整性

(2)簽署設(shè)計(jì)評(píng)審意見(jiàn)

(3)更新設(shè)計(jì)規(guī)范版本

九、附錄

（一）視覺(jué)設(shè)計(jì)組件庫(kù)

1.導(dǎo)航欄組件：

-包含：Logo、分類(lèi)入口、搜索欄、用戶(hù)中心

-規(guī)格參數(shù)：寬度100%-1080px，高度60px

2.商品卡片組件：

-包含：商品圖片、標(biāo)題、價(jià)格、評(píng)價(jià)

-規(guī)格參數(shù)：寬度200px-300px，高度比1:1.5

3.按鈕組件：

-類(lèi)型：主要、次要、幽靈、圖標(biāo)

-規(guī)格參數(shù)：寬度100px-200px，高度44px-56px

4.輸入框組件：

-類(lèi)型：普通、帶圖標(biāo)、密碼

-規(guī)格參數(shù)：寬度200px-300px，高度40px

5.輪播圖組件：

-規(guī)格參數(shù)：高度300px-500px，自動(dòng)播放間隔3s

（二）設(shè)計(jì)檢查清單

1.色彩系統(tǒng)檢查：

-主色調(diào)使用是否規(guī)范（□是□否）

-對(duì)比度是否達(dá)標(biāo)（□是□否）

-輔助色使用是否合理（□是□否）

-灰度系統(tǒng)是否完整（□是□否）

2.字體系統(tǒng)檢查：

-字號(hào)層級(jí)是否清晰（□是□否）

-字體版權(quán)是否合規(guī)（□是□否）

-字體顏色對(duì)比度是否達(dá)標(biāo)（□是□否）

-字體加載是否優(yōu)化（□是□否）

3.布局檢查：

-響應(yīng)式適配是否完整（□是□否）

-點(diǎn)擊區(qū)域是否合理（□是□否）

-網(wǎng)格系統(tǒng)是否規(guī)范（□是□否）

-頁(yè)面層級(jí)是否清晰（□是□否）

4.圖標(biāo)檢查：

-風(fēng)格是否統(tǒng)一（□是□否）

-尺寸是否規(guī)范（□是□否）

-功能是否明確（□是□否）

-命名是否規(guī)范（□是□否）

5.動(dòng)效檢查：

-動(dòng)效時(shí)長(zhǎng)是否合理（□是□否）

-動(dòng)效性能是否達(dá)標(biāo)（□是□否）

-動(dòng)效反饋是否明確（□是□否）

-動(dòng)效使用是否必要（□是□否）

6.組件庫(kù)檢查：

-組件是否可復(fù)用（□是□否）

-組件參數(shù)是否完整（□是□否）

-組件更新是否及時(shí)（□是□否）

-組件命名是否規(guī)范（□是□否）

（三）更新記錄

1.版本1.0：2023年11月首次發(fā)布

-內(nèi)容：基礎(chǔ)視覺(jué)設(shè)計(jì)規(guī)范

-負(fù)責(zé)人：張三

2.版本1.1：2024年1月增加動(dòng)效規(guī)范

-內(nèi)容：補(bǔ)充動(dòng)效設(shè)計(jì)原則

-負(fù)責(zé)人：李四

3.版本1.2：2024年4月更新組件庫(kù)

-內(nèi)容：完善設(shè)計(jì)組件庫(kù)

-負(fù)責(zé)人：王五

社交電商視覺(jué)設(shè)計(jì)規(guī)程

一、總則

社交電商視覺(jué)設(shè)計(jì)是提升用戶(hù)體驗(yàn)、增強(qiáng)商品吸引力、促進(jìn)用戶(hù)互動(dòng)的關(guān)鍵環(huán)節(jié)。本規(guī)程旨在規(guī)范社交電商平臺(tái)上的視覺(jué)設(shè)計(jì)標(biāo)準(zhǔn)，確保視覺(jué)呈現(xiàn)的專(zhuān)業(yè)性、一致性和用戶(hù)友好性。設(shè)計(jì)應(yīng)遵循簡(jiǎn)潔、直觀、美觀的原則，同時(shí)滿足不同平臺(tái)特性和用戶(hù)需求。

（一）設(shè)計(jì)目標(biāo)

1.提升商品轉(zhuǎn)化率

2.增強(qiáng)用戶(hù)參與度

3.統(tǒng)一平臺(tái)視覺(jué)風(fēng)格

4.優(yōu)化移動(dòng)端視覺(jué)體驗(yàn)

（二）設(shè)計(jì)原則

1.簡(jiǎn)潔性：避免過(guò)度裝飾，保持界面清晰易讀

2.一致性：統(tǒng)一色彩、字體、圖標(biāo)等設(shè)計(jì)元素

3.響應(yīng)式：適配不同屏幕尺寸和設(shè)備

4.引導(dǎo)性：通過(guò)視覺(jué)層次引導(dǎo)用戶(hù)行為

5.品牌性：融入品牌特色，增強(qiáng)辨識(shí)度

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.根據(jù)品牌定位選擇1-2種主色調(diào)

-時(shí)尚類(lèi)：FF6347（番茄紅）、FF69B4（熱粉紅）

-生活方式類(lèi)：4682B4（鋼藍(lán)）、FFD700（金色）

2.主色調(diào)在界面中占比控制在40%-60%

（二）輔助色搭配

1.選擇3-5種輔助色用于功能按鈕、提示信息等

-背景色：F5F5F5（淺灰白）、FFFFFF（純白）

-強(qiáng)調(diào)色：4CAF50（翠綠）、2196F3（藍(lán)）

2.確保色彩對(duì)比度滿足WCAGAA級(jí)標(biāo)準(zhǔn)

（三）色彩使用規(guī)范

1.關(guān)鍵信息使用高對(duì)比度色彩

-文字與背景對(duì)比度≥4.5:1

2.類(lèi)別區(qū)分使用不同色彩體系

-新品FF9800（橙）、促銷(xiāo)E91E63（粉紅）、熱銷(xiāo)8BC34A（淺綠）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.頂部區(qū)域（200px）

-搜索欄、分類(lèi)導(dǎo)航、用戶(hù)頭像

2.內(nèi)容區(qū)域（占屏70%）

-網(wǎng)格布局：4-6列商品卡片

-輪播圖：高度≥300px

3.底部區(qū)域（50px）

-我的、消息、購(gòu)物車(chē)等核心功能入口

（二）商品詳情頁(yè)布局

1.商品主圖（占比50%）

-支持多圖切換、放大查看

2.商品信息區(qū)（左側(cè)30%）

-標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)

3.互動(dòng)區(qū)（右側(cè)20%）

-分享按鈕、收藏夾、評(píng)論區(qū)

（三）移動(dòng)端適配要點(diǎn)

1.手指點(diǎn)擊區(qū)域最小尺寸≥44x44px

2.臨界元素間距≥8px

3.滾動(dòng)條寬度固定為6px

四、字體系統(tǒng)設(shè)計(jì)

（一）字體選擇標(biāo)準(zhǔn)

1.標(biāo)題字體：思源黑體、阿里巴巴普惠體等無(wú)襯線字體

-大標(biāo)題字號(hào)≥24px

2.正文字體：思源宋體、蘋(píng)方等清晰易讀字體

-正文字號(hào)16px，行高1.5

（二）字號(hào)層級(jí)規(guī)范

1.主標(biāo)題：28px-36px

2.副標(biāo)題：20px-24px

3.正文：16px-18px

4.輔助文字：12px-14px

（三）文字排版要求

1.標(biāo)題行高：1.2-1.4倍字號(hào)

2.正文行高：1.4-1.8倍字號(hào)

3.段間距：20-30%行高

五、圖標(biāo)系統(tǒng)設(shè)計(jì)

（一）圖標(biāo)風(fēng)格統(tǒng)一

1.采用線性圖標(biāo)或面性圖標(biāo)統(tǒng)一風(fēng)格

2.圖標(biāo)線條粗細(xì)：1-2px

3.圖標(biāo)色彩與背景對(duì)比度≥3:1

（二）常用圖標(biāo)規(guī)范

1.交互圖標(biāo)：

-分享：標(biāo)準(zhǔn)分享圖標(biāo)（如微信、微博）

-收藏：星標(biāo)或書(shū)簽樣式

-搜索：放大鏡樣式

2.功能圖標(biāo)：

-購(gòu)物車(chē)：購(gòu)物車(chē)輪廓

-評(píng)價(jià)：星星或?qū)υ挌馀?/p>

（三）圖標(biāo)使用原則

1.同一功能使用統(tǒng)一圖標(biāo)

2.圖標(biāo)應(yīng)避免與其他元素重疊

3.圖標(biāo)尺寸保持統(tǒng)一（如24x24px）

六、動(dòng)效設(shè)計(jì)規(guī)范

（一）過(guò)渡動(dòng)效

1.頁(yè)面切換：淡入淡出（200-300ms）

2.圖標(biāo)狀態(tài)變化：縮放+顏色漸變

3.下拉刷新：下拉距離≥60px

（二）交互動(dòng)效

1.點(diǎn)擊反饋：按鈕輕微下沉（0.5-1px）

2.拖拽效果：元素跟隨手指平滑移動(dòng)

3.加載狀態(tài)：旋轉(zhuǎn)加載動(dòng)畫(huà)（0.8-1.2s）

（三）動(dòng)效使用限制

1.關(guān)鍵業(yè)務(wù)流程不超過(guò)3個(gè)連續(xù)動(dòng)效

2.動(dòng)效優(yōu)先使用CSS3實(shí)現(xiàn)

3.性能較差設(shè)備可關(guān)閉動(dòng)效

七、設(shè)計(jì)工具與標(biāo)準(zhǔn)

（一）設(shè)計(jì)工具推薦

1.圖形設(shè)計(jì)：Figma、Sketch、AdobeXD

2.字體管理：AdobeFonts、Iseek

3.動(dòng)效設(shè)計(jì)：AfterEffects、Principle

（二）設(shè)計(jì)文件規(guī)范

1.圖片格式：

-素材：PNG（透明背景）、JPG（照片）

-適配：iPhone6+@2x、iPhone12@3x

2.圖標(biāo)文件：SVG格式

3.設(shè)計(jì)規(guī)范：JSON格式導(dǎo)出

（三）設(shè)計(jì)交付標(biāo)準(zhǔn)

1.設(shè)計(jì)稿標(biāo)注：切圖坐標(biāo)、顏色代碼、字體規(guī)格

2.設(shè)計(jì)規(guī)范文檔：完整UI組件庫(kù)

3.動(dòng)效規(guī)范文檔：關(guān)鍵動(dòng)效參數(shù)

八、設(shè)計(jì)審核流程

（一）初審階段

1.驗(yàn)證設(shè)計(jì)是否符合本規(guī)程

2.檢查色彩使用是否準(zhǔn)確

3.確認(rèn)字體規(guī)格是否完整

（二）復(fù)審階段

1.評(píng)估移動(dòng)端適配效果

2.測(cè)試動(dòng)效性能表現(xiàn)

3.驗(yàn)證交互邏輯是否清晰

（三）終審階段

1.評(píng)審設(shè)計(jì)一致性

2.確認(rèn)品牌元素體現(xiàn)

3.檢查可訪問(wèn)性標(biāo)準(zhǔn)

九、附錄

（一）視覺(jué)設(shè)計(jì)組件庫(kù)

1.導(dǎo)航欄組件：含分類(lèi)、搜索、用戶(hù)入口

2.商品卡片組件：含圖片、標(biāo)題、價(jià)格、評(píng)價(jià)

3.按鈕組件：含主要、次要、幽靈按鈕

（二）設(shè)計(jì)檢查清單

1.色彩系統(tǒng)檢查：

-主色調(diào)使用是否規(guī)范

-對(duì)比度是否達(dá)標(biāo)

2.字體系統(tǒng)檢查：

-字號(hào)層級(jí)是否清晰

-字體版權(quán)是否合規(guī)

3.交互檢查：

-點(diǎn)擊區(qū)域是否合理

-動(dòng)效反饋是否明確

（三）更新記錄

1.版本1.0：2023年11月首次發(fā)布

2.版本1.1：2024年1月增加動(dòng)效規(guī)范

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.主色調(diào)定義與作用

主色調(diào)是品牌視覺(jué)識(shí)別的核心元素，在社交電商中具有建立品牌認(rèn)知、傳遞品牌價(jià)值、統(tǒng)一視覺(jué)呈現(xiàn)的關(guān)鍵作用。主色調(diào)應(yīng)與品牌定位、目標(biāo)用戶(hù)心理及產(chǎn)品特性相匹配。

2.主色調(diào)確定方法

(1)品牌調(diào)性分析：

-時(shí)尚前衛(wèi)類(lèi)：選擇飽和度較高、對(duì)比強(qiáng)烈的色彩，如FF1493（深粉紅）、00CED1（深青色）

-生活方式類(lèi)：選擇溫暖、自然的色彩，如FFA07A（淺珊瑚色）、98FB98（淺青綠）

-科技類(lèi)：選擇冷靜、專(zhuān)業(yè)的色彩，如4682B4（鋼藍(lán)）、708090（灰藍(lán)）

(2)競(jìng)品分析：

-調(diào)研同品類(lèi)TOP5競(jìng)品的主色調(diào)使用情況

-分析其色彩策略的優(yōu)劣及市場(chǎng)反響

(3)用戶(hù)調(diào)研：

-通過(guò)問(wèn)卷或焦點(diǎn)小組收集目標(biāo)用戶(hù)對(duì)品牌的色彩偏好

-對(duì)比不同性別、年齡段對(duì)色彩的心理聯(lián)想

3.主色調(diào)使用規(guī)范

(1)應(yīng)用范圍：

-網(wǎng)站頂部導(dǎo)航欄背景

-品牌Logo主色塊

-重要功能按鈕（如“立即購(gòu)買(mǎi)”）

-輪播圖主背景色

(2)使用比例：

-在整體視覺(jué)中占比40%-60%，確保品牌識(shí)別度

-避免大面積單一使用，搭配輔助色形成層次

（二）輔助色搭配

1.輔助色定義與作用

輔助色用于補(bǔ)充主色調(diào)，增強(qiáng)視覺(jué)表現(xiàn)力，區(qū)分功能模塊，提升界面活力。通常選擇2-3種輔助色，形成和諧配色體系。

2.輔助色選擇原則

(1)色相環(huán)關(guān)系：

-選擇與主色調(diào)形成120°-180°對(duì)比色的互補(bǔ)色（如主色為4CAF50，輔助色可選FF5722）

-選擇相鄰色系的鄰近色（如主色為2196F3，輔助色可選00BCD4）

(2)明度與飽和度調(diào)整：

-輔助色飽和度可比主色調(diào)略低，避免沖突

-明度可高于主色調(diào)，用于突出次要信息

(3)行業(yè)特性適配：

-美妝類(lèi)：搭配柔粉、淡金色

-食品類(lèi)：搭配暖黃、豆綠

-運(yùn)動(dòng)類(lèi)：搭配活力橙、海軍藍(lán)

3.輔助色具體應(yīng)用

(1)強(qiáng)調(diào)色：

-用于按鈕、標(biāo)簽、箭頭等引導(dǎo)元素，如F44336（紅）

-用于新商品、限時(shí)折扣等促銷(xiāo)信息

(2)背景色：

-用于信息卡片、評(píng)論區(qū)背景，如FAFAFA（極淺灰）

-用于圖表、圖形的填充色

(3)功能性顏色：

-警告色：FFC107（黃）

-成功色：4CAF50（綠）

-信息色：2196F3（藍(lán)）

（三）色彩使用規(guī)范

1.基礎(chǔ)色彩規(guī)范

(1)品牌色定義：

-明確定義主色調(diào)在不同場(chǎng)景下的具體色值（HEX、RGB）

-例如：主色E91E63在不同狀態(tài)下的色值表

(2)灰度系統(tǒng)：

-建立從FFFFFF到333333的10級(jí)灰度體系

-用于文字、邊框、背景等中性元素

(3)色彩命名規(guī)范：

-按照品牌色-功能分類(lèi)-序號(hào)命名

-例如：Brand-Primary-01（主色-主要-1）

2.色彩對(duì)比度要求

(1)文本與背景：

-正文文本：333333（對(duì)比色FFFFFF）

-輔助文本：666666（對(duì)比色FFFFFF）

-強(qiáng)調(diào)文本：E91E63（對(duì)比色FFFFFF）

(2)表單控件：

-輸入框邊框：E0E0E0（對(duì)比色FFFFFF）

-滑塊軌道：BDBDBD（對(duì)比色FFFFFF）

-滑塊滑塊：FF4081（對(duì)比色FFFFFF）

3.色彩使用場(chǎng)景

(1)商品列表頁(yè)：

-新品標(biāo)簽：FF9800（橙色）

-熱銷(xiāo)標(biāo)簽：8BC34A（綠色）

-促銷(xiāo)標(biāo)簽：E91E63（粉紅色）

(2)購(gòu)物車(chē)頁(yè)面：

-商品圖片邊框：E0E0E0（淺灰）

-刪除按鈕：F44336（紅色）

-優(yōu)惠信息背景：FFF9C4（淡黃）

(3)訂單流程頁(yè)：

-待付款：FF9800（橙色）

-待發(fā)貨：FFC107（黃色）

-待收貨：FFEB3B（亮黃）

4.色彩使用限制

(1)避免使用：

-3種以上飽和度過(guò)高的顏色同時(shí)使用

-色彩飽和度低于10%的淺色（易造成閱讀困難）

(2)特殊場(chǎng)景：

-為色盲用戶(hù)提供圖形化替代標(biāo)識(shí)（如用形狀區(qū)分操作按鈕）

-在醫(yī)療健康類(lèi)商品中避免使用刺激色（如純紅、純黃）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.結(jié)構(gòu)分層設(shè)計(jì)

(1)頂部區(qū)域（200-300px）：

-品牌Logo（左上角，寬度≤100px）

-搜索欄（居中，高度≥40px）

-分類(lèi)導(dǎo)航（Logo右側(cè)，使用圖標(biāo)+文字）

-用戶(hù)中心入口（右上角，使用人像圖標(biāo)）

(2)內(nèi)容區(qū)域（占屏70%-80%）：

-輪播圖（頂部，高度≥300px，自動(dòng)切換）

-分類(lèi)入口（輪播圖下方，3-5組圖標(biāo)+名稱(chēng)）

-愛(ài)心推薦（2-3個(gè)商品卡片組）

-熱門(mén)榜單（滾動(dòng)列表）

(3)底部區(qū)域（50-100px）：

-核心功能入口（4-5個(gè)圖標(biāo)+名稱(chēng)，如首頁(yè)、分類(lèi)、購(gòu)物車(chē)、我的）

-新版更新提示（可選，使用小圖標(biāo)）

2.網(wǎng)格系統(tǒng)規(guī)范

(1)商品列表頁(yè)：

-網(wǎng)格列數(shù)：移動(dòng)端4列，桌面端6列

-圖片高度比例：寬度1:1.5，高度≥200px

-商品信息區(qū)：占卡片高度40%

(2)品牌故事頁(yè)：

-全寬圖：寬度≥1080px

-并列圖文：圖片寬度50%，文字寬度50%

3.響應(yīng)式適配要點(diǎn)

(1)斷點(diǎn)設(shè)置：

-小屏：寬度≤768px（手機(jī)）

-中屏：寬度768-1024px（平板）

-大屏：寬度≥1024px（桌面）

(2)元素適配：

-導(dǎo)航欄：小屏收起為漢堡菜單

-商品卡片：小屏寬度自動(dòng)調(diào)整

-圖片：使用object-fit=cover保證比例

（二）商品詳情頁(yè)布局

1.結(jié)構(gòu)分區(qū)設(shè)計(jì)

(1)頭部區(qū)域（占屏15%）：

-返回按鈕

-分享按鈕

-收藏按鈕

-商品標(biāo)題（可折疊）

(2)內(nèi)容區(qū)（占屏65%）：

-商品圖片（主圖+多圖切換，高度≥300px）

-商品信息（標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)）

-商品規(guī)格（可選規(guī)格使用標(biāo)簽式選擇）

(3)底部區(qū)域（占屏20%）：

-數(shù)量選擇器

-購(gòu)買(mǎi)按鈕

-優(yōu)惠信息（優(yōu)惠券、滿減等）

-相關(guān)推薦（3-5個(gè)商品）

2.圖片展示規(guī)范

(1)主圖要求：

-使用高質(zhì)量圖片（≥1080p分辨率）

-支持放大查看（放大倍數(shù)5-8倍）

-角度展示：正面+側(cè)面+細(xì)節(jié)圖

(2)多圖切換：

-左右滑動(dòng)切換

-點(diǎn)擊縮略圖全屏查看

-縮略圖排列：3行展示

3.信息層級(jí)設(shè)計(jì)

(1)重要信息突出：

-標(biāo)題字號(hào)≥24px，加粗

-價(jià)格使用特殊字體或色塊突出

-銷(xiāo)量使用醒目數(shù)字格式

(2)次要信息歸類(lèi)：

-評(píng)價(jià)使用星級(jí)+數(shù)字（如4.8分（1200+評(píng)價(jià)））

-商品屬性使用分組標(biāo)簽

-優(yōu)惠信息使用特殊色塊

（三）移動(dòng)端適配要點(diǎn)

1.交互設(shè)計(jì)規(guī)范

(1)點(diǎn)擊區(qū)域：

-按鈕點(diǎn)擊區(qū)域≥44x44px

-圖片點(diǎn)擊區(qū)域覆蓋整個(gè)圖片

-下拉刷新區(qū)域≥60px（下拉距離）

(2)手勢(shì)交互：

-左滑返回上一頁(yè)

-滑動(dòng)切換圖片

-長(zhǎng)按商品添加到收藏夾

2.視覺(jué)元素適配

(1)字體大?。?/p>

-標(biāo)題：≥22px

-正文：16-18px

-輔助信息：14-16px

(2)間距規(guī)范：

-組件間距：8-12px

-網(wǎng)格間距：4-6px

(3)元素對(duì)齊：

-使用flex布局保證元素水平垂直居中

-表單元素左右對(duì)齊

3.性能優(yōu)化

(1)圖片優(yōu)化：

-使用WebP格式

-設(shè)置不同分辨率圖片（iPhone6/12/Pro）

(2)動(dòng)效優(yōu)化：

-關(guān)閉復(fù)雜動(dòng)效

-使用CSS3實(shí)現(xiàn)交互動(dòng)效

(3)加載策略：

-圖片懶加載

-首屏加載優(yōu)化（首圖預(yù)加載）

四、字體系統(tǒng)設(shè)計(jì)

（一）字體選擇標(biāo)準(zhǔn)

1.字體分類(lèi)

(1)標(biāo)題字體：

-要求：粗細(xì)變化豐富、識(shí)別度高

-推薦：思源黑體（中/粗/黑）、阿里巴巴普惠體（黑）

-字號(hào)范圍：18px-36px

(2)正文字體：

-要求：清晰易讀、長(zhǎng)時(shí)間閱讀舒適

-推薦：思源宋體（中）、蘋(píng)方（中）

-字號(hào)范圍：14px-18px

(3)輔助字體：

-要求：簡(jiǎn)潔現(xiàn)代、適合小字號(hào)

-推薦：蘋(píng)方（細(xì)）、思源黑體（細(xì)）

-字號(hào)范圍：10px-14px

2.字體授權(quán)

(1)商業(yè)項(xiàng)目使用需確保字體授權(quán)合規(guī)

(2)優(yōu)先選擇可免費(fèi)商用的開(kāi)源字體（如思源黑體）

(3)自研項(xiàng)目需評(píng)估字體版權(quán)風(fēng)險(xiǎn)

（二）字號(hào)層級(jí)規(guī)范

1.層級(jí)定義

(1)一級(jí)標(biāo)題：商品分類(lèi)頁(yè)主標(biāo)題（28px-36px）

(2)二級(jí)標(biāo)題：子分類(lèi)/活動(dòng)標(biāo)題（22px-26px）

(3)三級(jí)標(biāo)題：商品屬性/說(shuō)明（20px-22px）

(4)正文：詳情頁(yè)描述/規(guī)格說(shuō)明（16px-18px）

(5)輔助文本：提示信息/標(biāo)簽（12px-14px）

2.字號(hào)遞進(jìn)

(1)相鄰層級(jí)字號(hào)差：≥1.2倍

(2)示例：

-一級(jí)標(biāo)題：32px

-二級(jí)標(biāo)題：24px

-三級(jí)標(biāo)題：22px

-正文：16px

3.字號(hào)適配

(1)移動(dòng)端：

-一級(jí)標(biāo)題：28px

-正文：16px

(2)桌面端：

-一級(jí)標(biāo)題：36px

-正文：18px

（三）文字排版要求

1.行高設(shè)置

(1)標(biāo)題行高：1.2-1.4倍字號(hào)

(2)正文行高：1.4-1.8倍字號(hào)

(3)輔助文本行高：1.2-1.4倍字號(hào)

2.段落間距

(1)段落間距：20-30%行高

(2)標(biāo)題與正文間距：30-40%行高

3.文本對(duì)齊

(1)標(biāo)題：居中對(duì)齊

(2)正文：左對(duì)齊

(3)價(jià)格：居中對(duì)齊

4.首行縮進(jìn)

(1)中文段落首行縮進(jìn)：2個(gè)漢字寬度

(2)英文段落首行縮進(jìn)：首行縮進(jìn)2字符

五、圖標(biāo)系統(tǒng)設(shè)計(jì)

（一）圖標(biāo)風(fēng)格統(tǒng)一

1.風(fēng)格選擇

(1)線性圖標(biāo)：適合科技感、現(xiàn)代感設(shè)計(jì)（如購(gòu)物車(chē)、用戶(hù)）

(2)面性圖標(biāo)：適合生活化、柔和化設(shè)計(jì)（如收藏、評(píng)價(jià)）

(3)統(tǒng)一標(biāo)準(zhǔn)：同一平臺(tái)使用單一風(fēng)格

2.線條規(guī)范

(1)粗細(xì)：1-2px

(2)顏色：與背景對(duì)比度≥3:1（如主色E91E63）

(3)末端：圓頭或方頭統(tǒng)一處理

3.尺寸規(guī)范

(1)基礎(chǔ)尺寸：24x24px

(2)應(yīng)用場(chǎng)景：

-導(dǎo)航圖標(biāo)：28x28px

-按鈕圖標(biāo)：24x24px

-圖表圖標(biāo)：20x20px

（二）常用圖標(biāo)規(guī)范

1.交互圖標(biāo)

(1)分享：

-微信：藍(lán)色圓形+微信標(biāo)志

-微博：紅色圓形+微博鳥(niǎo)形

-分享箭頭：從中心發(fā)散的線條

(2)收藏：

-未收藏：空心星星

-已收藏：實(shí)心星星

-勾選收藏：對(duì)勾+星星

(3)搜索：

-搜索圖標(biāo)：放大鏡輪廓

-搜索按鈕：放大鏡+文字輸入框

2.功能圖標(biāo)

(1)購(gòu)物車(chē)：

-購(gòu)物車(chē)：購(gòu)物車(chē)輪廓+數(shù)字

-添加商品：加號(hào)+購(gòu)物車(chē)輪廓

(2)評(píng)價(jià)：

-星級(jí)評(píng)價(jià)：星星圖標(biāo)

-評(píng)論：對(duì)話氣泡圖標(biāo)

(3)設(shè)置：

-設(shè)置圖標(biāo)：齒輪形狀

-通知：鈴鐺形狀

（三）圖標(biāo)使用原則

1.一致性原則

(1)同一功能使用相同圖標(biāo)

(2)圖標(biāo)位置保持統(tǒng)一（如購(gòu)物車(chē)始終在右下角）

2.清晰性原則

(1)圖標(biāo)應(yīng)能被快速識(shí)別

(2)避免使用過(guò)于復(fù)雜的圖形

3.功能性原則

(1)圖標(biāo)應(yīng)暗示功能用途

(2)圖標(biāo)狀態(tài)變化應(yīng)明確（如收藏點(diǎn)擊后變色）

4.命名規(guī)范

(1)按功能分類(lèi)+圖標(biāo)類(lèi)型命名

(2)示例：ShoppingCart-Outline、Star-Filled

六、動(dòng)效設(shè)計(jì)規(guī)范

（一）過(guò)渡動(dòng)效

1.頁(yè)面切換

(1)淡入淡出：

-動(dòng)效時(shí)長(zhǎng)：200-300ms

-CSS實(shí)現(xiàn)：opacitytransition

(2)滑動(dòng)切換：

-動(dòng)效時(shí)長(zhǎng)：250-350ms

-CSS實(shí)現(xiàn)：transformtransition

(3)縮放切換：

-動(dòng)效時(shí)長(zhǎng)：150-200ms

-CSS實(shí)現(xiàn)：transformscaletransition

2.狀態(tài)變化

(1)按鈕點(diǎn)擊：

-縮放：scale(0.95)

-顏色：輕微變暗

(2)圖標(biāo)激活：

-旋轉(zhuǎn)：rotate(360deg)

-放大：scale(1.1)

3.加載動(dòng)效

(1)旋轉(zhuǎn)加載：

-動(dòng)效時(shí)長(zhǎng)：1-1.2s

-動(dòng)畫(huà)形式：linearmotion

(2)進(jìn)度條：

-動(dòng)效時(shí)長(zhǎng)：根據(jù)進(jìn)度調(diào)整

-動(dòng)畫(huà)形式：ease-in-outmotion

（二）交互動(dòng)效

1.點(diǎn)擊反饋

(1)按鈕：

-縮放：scale(0.95)

-顏色：變暗10%

-延遲：50ms后恢復(fù)

(2)卡片：

-搖動(dòng)：輕微左右擺動(dòng)

-顏色：背景變暗

2.拖拽動(dòng)效

(1)滑塊：

-平滑跟隨手指移動(dòng)

-限制范圍：min-width/2-max-width/2

(2)圖片調(diào)整：

-雙指捏合縮放

-邊緣防透處理

3.加載狀態(tài)

(1)骨架屏：

-動(dòng)效：漸變色填充

-時(shí)長(zhǎng)：500-700ms

(2)元素出現(xiàn)：

-上滑入場(chǎng)：opacity+transformtranslateY

-動(dòng)效時(shí)長(zhǎng)：300-400ms

（三）動(dòng)效使用限制

1.性能要求

(1)動(dòng)效執(zhí)行時(shí)間＜300ms

(2)動(dòng)效使用CSS3優(yōu)先

(3)復(fù)雜動(dòng)效使用WebAnimationsAPI

2.使用場(chǎng)景

(1)必須使用：

-交互反饋：點(diǎn)擊、拖拽

-狀態(tài)變化：收藏、切換

(2)謹(jǐn)慎使用：

-自動(dòng)播放動(dòng)效

-過(guò)度動(dòng)畫(huà)

(3)禁用場(chǎng)景：

-低性能設(shè)備

-視力障礙用戶(hù)

七、設(shè)計(jì)工具與標(biāo)準(zhǔn)

（一）設(shè)計(jì)工具推薦

1.圖形設(shè)計(jì)

(1)Figma：

-優(yōu)勢(shì)：實(shí)時(shí)協(xié)作、組件庫(kù)共享

-適用：高保真原型設(shè)計(jì)

(2)Sketch：

-優(yōu)勢(shì)：Mac平臺(tái)專(zhuān)用、插件豐富

-適用：iOS/macOS設(shè)計(jì)

(3)AdobeXD：

-優(yōu)勢(shì)：Adobe生態(tài)整合

-適用：全平臺(tái)設(shè)計(jì)

2.字體管理

(1)AdobeFonts：

-優(yōu)勢(shì)：海量字體授權(quán)

-適用：商業(yè)項(xiàng)目

(2)Iseek：

-優(yōu)勢(shì)：中文優(yōu)質(zhì)字體庫(kù)

-適用：中文為主項(xiàng)目

3.動(dòng)效設(shè)計(jì)

(1)AfterEffects：

-優(yōu)勢(shì)：專(zhuān)業(yè)動(dòng)畫(huà)制作

-適用：復(fù)雜交互動(dòng)效

(2)Principle：

-優(yōu)勢(shì)：矢量動(dòng)畫(huà)制作

-適用：UI動(dòng)效設(shè)計(jì)

（二）設(shè)計(jì)文件規(guī)范

1.圖層命名

(1)命名規(guī)則：模塊-類(lèi)型-層級(jí)（如：Header-Button-Primary）

(2)文件夾結(jié)構(gòu)：按功能模塊分類(lèi)

2.切圖規(guī)范

(1)圖片格式：

-素材：PNG（透明背景）、JPG（照片）

-適配：iPhone6+@2x、iPhone12@3x

(2)標(biāo)注內(nèi)容：

-坐標(biāo)尺寸

-顏色代碼（HEX）

-字體規(guī)格

(3)切圖工具：

-Photoshop、Zeplin

3.設(shè)計(jì)規(guī)范文件

(1)內(nèi)容：

-顏色系統(tǒng)

-字體系統(tǒng)

-圖標(biāo)庫(kù)

-組件庫(kù)

(2)格式：

-JSON格式導(dǎo)出

-Markdown編寫(xiě)

（三）設(shè)計(jì)交付標(biāo)準(zhǔn)

1.設(shè)計(jì)稿交付

(1)文件格式：Figma/Sketch/XD

(2)標(biāo)注內(nèi)容：

-所有可交互元素標(biāo)注

-色彩、字體規(guī)格

-動(dòng)效參數(shù)

(3)交付物：

-主文件

-分組文件

-可編輯文件

2.設(shè)計(jì)規(guī)范交付

(1)組件庫(kù)：

-可復(fù)用組件（按鈕、輸入框）

-交互式組件（滑塊、下拉）

(2)設(shè)計(jì)規(guī)范文檔：

-色彩規(guī)范表

-字體規(guī)范表

-圖標(biāo)規(guī)范集

3.設(shè)計(jì)評(píng)審交付

(1)評(píng)審標(biāo)準(zhǔn)：

-設(shè)計(jì)一致性

-可訪問(wèn)性

-交互邏輯

(2)評(píng)審流程：

-初審（設(shè)計(jì)師自評(píng)）

-復(fù)審（設(shè)計(jì)組長(zhǎng)）

-終審（產(chǎn)品經(jīng)理）

八、設(shè)計(jì)審核流程

（一）初審階段

1.設(shè)計(jì)符合性檢查

(1)驗(yàn)證設(shè)計(jì)是否符合本規(guī)程

(2)檢查色彩使用是否準(zhǔn)確

(3)確認(rèn)字體規(guī)格是否完整

2.交互邏輯驗(yàn)證

(1)檢查點(diǎn)擊區(qū)域是否合理

(2)驗(yàn)證狀態(tài)變化是否明確

(3)確認(rèn)動(dòng)效參數(shù)是否合規(guī)

3.品牌一致性檢查

(1)檢查品牌元素是否完整

(2)驗(yàn)證品牌色使用是否統(tǒng)一

(3)確認(rèn)品牌調(diào)性是否一致

（二）復(fù)審階段

1.設(shè)計(jì)質(zhì)量評(píng)估

(1)評(píng)估視覺(jué)表現(xiàn)力

(2)測(cè)試用戶(hù)感知度

(3)檢查細(xì)節(jié)完整性

2.交互測(cè)試

(1)模擬真實(shí)用戶(hù)操作

(2)測(cè)試交互流程順暢度

(3)評(píng)估動(dòng)效反饋效果

3.平臺(tái)適配測(cè)試

(1)檢查不同設(shè)備顯示效果

(2)測(cè)試移動(dòng)端交互適配

(3)驗(yàn)證性能表現(xiàn)

（三）終審階段

1.設(shè)計(jì)評(píng)審

(1)評(píng)審設(shè)計(jì)一致性

(2)確認(rèn)品牌元素體現(xiàn)

(3)檢查可訪問(wèn)性標(biāo)準(zhǔn)

2.用戶(hù)反饋模擬

(1)模擬用戶(hù)使用場(chǎng)景

(2)評(píng)估用戶(hù)操作流暢度

(3)預(yù)測(cè)用戶(hù)滿意度

3.最終確認(rèn)

(1)確認(rèn)設(shè)計(jì)交付物完整性

(2)簽署設(shè)計(jì)評(píng)審意見(jiàn)

(3)更新設(shè)計(jì)規(guī)范版本

九、附錄

（一）視覺(jué)設(shè)計(jì)組件庫(kù)

1.導(dǎo)航欄組件：

-包含：Logo、分類(lèi)入口、搜索欄、用戶(hù)中心

-規(guī)格參數(shù)：寬度100%-1080px，高度60px

2.商品卡片組件：

-包含：商品圖片、標(biāo)題、價(jià)格、評(píng)價(jià)

-規(guī)格參數(shù)：寬度200px-300px，高度比1:1.5

3.按鈕組件：

-類(lèi)型：主要、次要、幽靈、圖標(biāo)

-規(guī)格參數(shù)：寬度100px-200px，高度44px-56px

4.輸入框組件：

-類(lèi)型：普通、帶圖標(biāo)、密碼

-規(guī)格參數(shù)：寬度200px-300px，高度40px

5.輪播圖組件：

-規(guī)格參數(shù)：高度300px-500px，自動(dòng)播放間隔3s

（二）設(shè)計(jì)檢查清單

1.色彩系統(tǒng)檢查：

-主色調(diào)使用是否規(guī)范（□是□否）

-對(duì)比度是否達(dá)標(biāo)（□是□否）

-輔助色使用是否合理（□是□否）

-灰度系統(tǒng)是否完整（□是□否）

2.字體系統(tǒng)檢查：

-字號(hào)層級(jí)是否清晰（□是□否）

-字體版權(quán)是否合規(guī)（□是□否）

-字體顏色對(duì)比度是否達(dá)標(biāo)（□是□否）

-字體加載是否優(yōu)化（□是□否）

3.布局檢查：

-響應(yīng)式適配是否完整（□是□否）

-點(diǎn)擊區(qū)域是否合理（□是□否）

-網(wǎng)格系統(tǒng)是否規(guī)范（□是□否）

-頁(yè)面層級(jí)是否清晰（□是□否）

4.圖標(biāo)檢查：

-風(fēng)格是否統(tǒng)一（□是□否）

-尺寸是否規(guī)范（□是□否）

-功能是否明確（□是□否）

-命名是否規(guī)范（□是□否）

5.動(dòng)效檢查：

-動(dòng)效時(shí)長(zhǎng)是否合理（□是□否）

-動(dòng)效性能是否達(dá)標(biāo)（□是□否）

-動(dòng)效反饋是否明確（□是□否）

-動(dòng)效使用是否必要（□是□否）

6.組件庫(kù)檢查：

-組件是否可復(fù)用（□是□否）

-組件參數(shù)是否完整（□是□否）

-組件更新是否及時(shí)（□是□否）

-組件命名是否規(guī)范（□是□否）

（三）更新記錄

1.版本1.0：2023年11月首次發(fā)布

-內(nèi)容：基礎(chǔ)視覺(jué)設(shè)計(jì)規(guī)范

-負(fù)責(zé)人：張三

2.版本1.1：2024年1月增加動(dòng)效規(guī)范

-內(nèi)容：補(bǔ)充動(dòng)效設(shè)計(jì)原則

-負(fù)責(zé)人：李四

3.版本1.2：2024年4月更新組件庫(kù)

-內(nèi)容：完善設(shè)計(jì)組件庫(kù)

-負(fù)責(zé)人：王五

社交電商視覺(jué)設(shè)計(jì)規(guī)程

一、總則

社交電商視覺(jué)設(shè)計(jì)是提升用戶(hù)體驗(yàn)、增強(qiáng)商品吸引力、促進(jìn)用戶(hù)互動(dòng)的關(guān)鍵環(huán)節(jié)。本規(guī)程旨在規(guī)范社交電商平臺(tái)上的視覺(jué)設(shè)計(jì)標(biāo)準(zhǔn)，確保視覺(jué)呈現(xiàn)的專(zhuān)業(yè)性、一致性和用戶(hù)友好性。設(shè)計(jì)應(yīng)遵循簡(jiǎn)潔、直觀、美觀的原則，同時(shí)滿足不同平臺(tái)特性和用戶(hù)需求。

（一）設(shè)計(jì)目標(biāo)

1.提升商品轉(zhuǎn)化率

2.增強(qiáng)用戶(hù)參與度

3.統(tǒng)一平臺(tái)視覺(jué)風(fēng)格

4.優(yōu)化移動(dòng)端視覺(jué)體驗(yàn)

（二）設(shè)計(jì)原則

1.簡(jiǎn)潔性：避免過(guò)度裝飾，保持界面清晰易讀

2.一致性：統(tǒng)一色彩、字體、圖標(biāo)等設(shè)計(jì)元素

3.響應(yīng)式：適配不同屏幕尺寸和設(shè)備

4.引導(dǎo)性：通過(guò)視覺(jué)層次引導(dǎo)用戶(hù)行為

5.品牌性：融入品牌特色，增強(qiáng)辨識(shí)度

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.根據(jù)品牌定位選擇1-2種主色調(diào)

-時(shí)尚類(lèi)：FF6347（番茄紅）、FF69B4（熱粉紅）

-生活方式類(lèi)：4682B4（鋼藍(lán)）、FFD700（金色）

2.主色調(diào)在界面中占比控制在40%-60%

（二）輔助色搭配

1.選擇3-5種輔助色用于功能按鈕、提示信息等

-背景色：F5F5F5（淺灰白）、FFFFFF（純白）

-強(qiáng)調(diào)色：4CAF50（翠綠）、2196F3（藍(lán)）

2.確保色彩對(duì)比度滿足WCAGAA級(jí)標(biāo)準(zhǔn)

（三）色彩使用規(guī)范

1.關(guān)鍵信息使用高對(duì)比度色彩

-文字與背景對(duì)比度≥4.5:1

2.類(lèi)別區(qū)分使用不同色彩體系

-新品FF9800（橙）、促銷(xiāo)E91E63（粉紅）、熱銷(xiāo)8BC34A（淺綠）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.頂部區(qū)域（200px）

-搜索欄、分類(lèi)導(dǎo)航、用戶(hù)頭像

2.內(nèi)容區(qū)域（占屏70%）

-網(wǎng)格布局：4-6列商品卡片

-輪播圖：高度≥300px

3.底部區(qū)域（50px）

-我的、消息、購(gòu)物車(chē)等核心功能入口

（二）商品詳情頁(yè)布局

1.商品主圖（占比50%）

-支持多圖切換、放大查看

2.商品信息區(qū)（左側(cè)30%）

-標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)

3.互動(dòng)區(qū)（右側(cè)20%）

-分享按鈕、收藏夾、評(píng)論區(qū)

（三）移動(dòng)端適配要點(diǎn)

1.手指點(diǎn)擊區(qū)域最小尺寸≥44x44px

2.臨界元素間距≥8px

3.滾動(dòng)條寬度固定為6px

四、字體系統(tǒng)設(shè)計(jì)

（一）字體選擇標(biāo)準(zhǔn)

1.標(biāo)題字體：思源黑體、阿里巴巴普惠體等無(wú)襯線字體

-大標(biāo)題字號(hào)≥24px

2.正文字體：思源宋體、蘋(píng)方等清晰易讀字體

-正文字號(hào)16px，行高1.5

（二）字號(hào)層級(jí)規(guī)范

1.主標(biāo)題：28px-36px

2.副標(biāo)題：20px-24px

3.正文：16px-18px

4.輔助文字：12px-14px

（三）文字排版要求

1.標(biāo)題行高：1.2-1.4倍字號(hào)

2.正文行高：1.4-1.8倍字號(hào)

3.段間距：20-30%行高

五、圖標(biāo)系統(tǒng)設(shè)計(jì)

（一）圖標(biāo)風(fēng)格統(tǒng)一

1.采用線性圖標(biāo)或面性圖標(biāo)統(tǒng)一風(fēng)格

2.圖標(biāo)線條粗細(xì)：1-2px

3.圖標(biāo)色彩與背景對(duì)比度≥3:1

（二）常用圖標(biāo)規(guī)范

1.交互圖標(biāo)：

-分享：標(biāo)準(zhǔn)分享圖標(biāo)（如微信、微博）

-收藏：星標(biāo)或書(shū)簽樣式

-搜索：放大鏡樣式

2.功能圖標(biāo)：

-購(gòu)物車(chē)：購(gòu)物車(chē)輪廓

-評(píng)價(jià)：星星或?qū)υ挌馀?/p>

（三）圖標(biāo)使用原則

1.同一功能使用統(tǒng)一圖標(biāo)

2.圖標(biāo)應(yīng)避免與其他元素重疊

3.圖標(biāo)尺寸保持統(tǒng)一（如24x24px）

六、動(dòng)效設(shè)計(jì)規(guī)范

（一）過(guò)渡動(dòng)效

1.頁(yè)面切換：淡入淡出（200-300ms）

2.圖標(biāo)狀態(tài)變化：縮放+顏色漸變

3.下拉刷新：下拉距離≥60px

（二）交互動(dòng)效

1.點(diǎn)擊反饋：按鈕輕微下沉（0.5-1px）

2.拖拽效果：元素跟隨手指平滑移動(dòng)

3.加載狀態(tài)：旋轉(zhuǎn)加載動(dòng)畫(huà)（0.8-1.2s）

（三）動(dòng)效使用限制

1.關(guān)鍵業(yè)務(wù)流程不超過(guò)3個(gè)連續(xù)動(dòng)效

2.動(dòng)效優(yōu)先使用CSS3實(shí)現(xiàn)

3.性能較差設(shè)備可關(guān)閉動(dòng)效

七、設(shè)計(jì)工具與標(biāo)準(zhǔn)

（一）設(shè)計(jì)工具推薦

1.圖形設(shè)計(jì)：Figma、Sketch、AdobeXD

2.字體管理：AdobeFonts、Iseek

3.動(dòng)效設(shè)計(jì)：AfterEffects、Principle

（二）設(shè)計(jì)文件規(guī)范

1.圖片格式：

-素材：PNG（透明背景）、JPG（照片）

-適配：iPhone6+@2x、iPhone12@3x

2.圖標(biāo)文件：SVG格式

3.設(shè)計(jì)規(guī)范：JSON格式導(dǎo)出

（三）設(shè)計(jì)交付標(biāo)準(zhǔn)

1.設(shè)計(jì)稿標(biāo)注：切圖坐標(biāo)、顏色代碼、字體規(guī)格

2.設(shè)計(jì)規(guī)范文檔：完整UI組件庫(kù)

3.動(dòng)效規(guī)范文檔：關(guān)鍵動(dòng)效參數(shù)

八、設(shè)計(jì)審核流程

（一）初審階段

1.驗(yàn)證設(shè)計(jì)是否符合本規(guī)程

2.檢查色彩使用是否準(zhǔn)確

3.確認(rèn)字體規(guī)格是否完整

（二）復(fù)審階段

1.評(píng)估移動(dòng)端適配效果

2.測(cè)試動(dòng)效性能表現(xiàn)

3.驗(yàn)證交互邏輯是否清晰

（三）終審階段

1.評(píng)審設(shè)計(jì)一致性

2.確認(rèn)品牌元素體現(xiàn)

3.檢查可訪問(wèn)性標(biāo)準(zhǔn)

九、附錄

（一）視覺(jué)設(shè)計(jì)組件庫(kù)

1.導(dǎo)航欄組件：含分類(lèi)、搜索、用戶(hù)入口

2.商品卡片組件：含圖片、標(biāo)題、價(jià)格、評(píng)價(jià)

3.按鈕組件：含主要、次要、幽靈按鈕

（二）設(shè)計(jì)檢查清單

1.色彩系統(tǒng)檢查：

-主色調(diào)使用是否規(guī)范

-對(duì)比度是否達(dá)標(biāo)

2.字體系統(tǒng)檢查：

-字號(hào)層級(jí)是否清晰

-字體版權(quán)是否合規(guī)

3.交互檢查：

-點(diǎn)擊區(qū)域是否合理

-動(dòng)效反饋是否明確

（三）更新記錄

1.版本1.0：2023年11月首次發(fā)布

2.版本1.1：2024年1月增加動(dòng)效規(guī)范

二、色彩系統(tǒng)設(shè)計(jì)

（一）主色調(diào)選擇

1.主色調(diào)定義與作用

主色調(diào)是品牌視覺(jué)識(shí)別的核心元素，在社交電商中具有建立品牌認(rèn)知、傳遞品牌價(jià)值、統(tǒng)一視覺(jué)呈現(xiàn)的關(guān)鍵作用。主色調(diào)應(yīng)與品牌定位、目標(biāo)用戶(hù)心理及產(chǎn)品特性相匹配。

2.主色調(diào)確定方法

(1)品牌調(diào)性分析：

-時(shí)尚前衛(wèi)類(lèi)：選擇飽和度較高、對(duì)比強(qiáng)烈的色彩，如FF1493（深粉紅）、00CED1（深青色）

-生活方式類(lèi)：選擇溫暖、自然的色彩，如FFA07A（淺珊瑚色）、98FB98（淺青綠）

-科技類(lèi)：選擇冷靜、專(zhuān)業(yè)的色彩，如4682B4（鋼藍(lán)）、708090（灰藍(lán)）

(2)競(jìng)品分析：

-調(diào)研同品類(lèi)TOP5競(jìng)品的主色調(diào)使用情況

-分析其色彩策略的優(yōu)劣及市場(chǎng)反響

(3)用戶(hù)調(diào)研：

-通過(guò)問(wèn)卷或焦點(diǎn)小組收集目標(biāo)用戶(hù)對(duì)品牌的色彩偏好

-對(duì)比不同性別、年齡段對(duì)色彩的心理聯(lián)想

3.主色調(diào)使用規(guī)范

(1)應(yīng)用范圍：

-網(wǎng)站頂部導(dǎo)航欄背景

-品牌Logo主色塊

-重要功能按鈕（如“立即購(gòu)買(mǎi)”）

-輪播圖主背景色

(2)使用比例：

-在整體視覺(jué)中占比40%-60%，確保品牌識(shí)別度

-避免大面積單一使用，搭配輔助色形成層次

（二）輔助色搭配

1.輔助色定義與作用

輔助色用于補(bǔ)充主色調(diào)，增強(qiáng)視覺(jué)表現(xiàn)力，區(qū)分功能模塊，提升界面活力。通常選擇2-3種輔助色，形成和諧配色體系。

2.輔助色選擇原則

(1)色相環(huán)關(guān)系：

-選擇與主色調(diào)形成120°-180°對(duì)比色的互補(bǔ)色（如主色為4CAF50，輔助色可選FF5722）

-選擇相鄰色系的鄰近色（如主色為2196F3，輔助色可選00BCD4）

(2)明度與飽和度調(diào)整：

-輔助色飽和度可比主色調(diào)略低，避免沖突

-明度可高于主色調(diào)，用于突出次要信息

(3)行業(yè)特性適配：

-美妝類(lèi)：搭配柔粉、淡金色

-食品類(lèi)：搭配暖黃、豆綠

-運(yùn)動(dòng)類(lèi)：搭配活力橙、海軍藍(lán)

3.輔助色具體應(yīng)用

(1)強(qiáng)調(diào)色：

-用于按鈕、標(biāo)簽、箭頭等引導(dǎo)元素，如F44336（紅）

-用于新商品、限時(shí)折扣等促銷(xiāo)信息

(2)背景色：

-用于信息卡片、評(píng)論區(qū)背景，如FAFAFA（極淺灰）

-用于圖表、圖形的填充色

(3)功能性顏色：

-警告色：FFC107（黃）

-成功色：4CAF50（綠）

-信息色：2196F3（藍(lán)）

（三）色彩使用規(guī)范

1.基礎(chǔ)色彩規(guī)范

(1)品牌色定義：

-明確定義主色調(diào)在不同場(chǎng)景下的具體色值（HEX、RGB）

-例如：主色E91E63在不同狀態(tài)下的色值表

(2)灰度系統(tǒng)：

-建立從FFFFFF到333333的10級(jí)灰度體系

-用于文字、邊框、背景等中性元素

(3)色彩命名規(guī)范：

-按照品牌色-功能分類(lèi)-序號(hào)命名

-例如：Brand-Primary-01（主色-主要-1）

2.色彩對(duì)比度要求

(1)文本與背景：

-正文文本：333333（對(duì)比色FFFFFF）

-輔助文本：666666（對(duì)比色FFFFFF）

-強(qiáng)調(diào)文本：E91E63（對(duì)比色FFFFFF）

(2)表單控件：

-輸入框邊框：E0E0E0（對(duì)比色FFFFFF）

-滑塊軌道：BDBDBD（對(duì)比色FFFFFF）

-滑塊滑塊：FF4081（對(duì)比色FFFFFF）

3.色彩使用場(chǎng)景

(1)商品列表頁(yè)：

-新品標(biāo)簽：FF9800（橙色）

-熱銷(xiāo)標(biāo)簽：8BC34A（綠色）

-促銷(xiāo)標(biāo)簽：E91E63（粉紅色）

(2)購(gòu)物車(chē)頁(yè)面：

-商品圖片邊框：E0E0E0（淺灰）

-刪除按鈕：F44336（紅色）

-優(yōu)惠信息背景：FFF9C4（淡黃）

(3)訂單流程頁(yè)：

-待付款：FF9800（橙色）

-待發(fā)貨：FFC107（黃色）

-待收貨：FFEB3B（亮黃）

4.色彩使用限制

(1)避免使用：

-3種以上飽和度過(guò)高的顏色同時(shí)使用

-色彩飽和度低于10%的淺色（易造成閱讀困難）

(2)特殊場(chǎng)景：

-為色盲用戶(hù)提供圖形化替代標(biāo)識(shí)（如用形狀區(qū)分操作按鈕）

-在醫(yī)療健康類(lèi)商品中避免使用刺激色（如純紅、純黃）

三、版式布局設(shè)計(jì)

（一）首頁(yè)布局規(guī)范

1.結(jié)構(gòu)分層設(shè)計(jì)

(1)頂部區(qū)域（200-300px）：

-品牌Logo（左上角，寬度≤100px）

-搜索欄（居中，高度≥40px）

-分類(lèi)導(dǎo)航（Logo右側(cè)，使用圖標(biāo)+文字）

-用戶(hù)中心入口（右上角，使用人像圖標(biāo)）

(2)內(nèi)容區(qū)域（占屏70%-80%）：

-輪播圖（頂部，高度≥300px，自動(dòng)切換）

-分類(lèi)入口（輪播圖下方，3-5組圖標(biāo)+名稱(chēng)）

-愛(ài)心推薦（2-3個(gè)商品卡片組）

-熱門(mén)榜單（滾動(dòng)列表）

(3)底部區(qū)域（50-100px）：

-核心功能入口（4-5個(gè)圖標(biāo)+名稱(chēng)，如首頁(yè)、分類(lèi)、購(gòu)物車(chē)、我的）

-新版更新提示（可選，使用小圖標(biāo)）

2.網(wǎng)格系統(tǒng)規(guī)范

(1)商品列表頁(yè)：

-網(wǎng)格列數(shù)：移動(dòng)端4列，桌面端6列

-圖片高度比例：寬度1:1.5，高度≥200px

-商品信息區(qū)：占卡片高度40%

(2)品牌故事頁(yè)：

-全寬圖：寬度≥1080px

-并列圖文：圖片寬度50%，文字寬度50%

3.響應(yīng)式適配要點(diǎn)

(1)斷點(diǎn)設(shè)置：

-小屏：寬度≤768px（手機(jī)）

-中屏：寬度768-1024px（平板）

-大屏：寬度≥1024px（桌面）

(2)元素適配：

-導(dǎo)航欄：小屏收起為漢堡菜單

-商品卡片：小屏寬度自動(dòng)調(diào)整

-圖片：使用object-fit=cover保證比例

（二）商品詳情頁(yè)布局

1.結(jié)構(gòu)分區(qū)設(shè)計(jì)

(1)頭部區(qū)域（占屏15%）：

-返回按鈕

-分享按鈕

-收藏按鈕

-商品標(biāo)題（可折疊）

(2)內(nèi)容區(qū)（占屏65%）：

-商品圖片（主圖+多圖切換，高度≥300px）

-商品信息（標(biāo)題、價(jià)格、銷(xiāo)量、評(píng)價(jià)）

-商品規(guī)格（可選規(guī)格使用標(biāo)簽式選擇）

(3)底部區(qū)域（占屏20%）：

-數(shù)量選擇器

-購(gòu)買(mǎi)按鈕

-優(yōu)惠信息（優(yōu)惠券、滿減等）

-相關(guān)推薦（3-5個(gè)商品）

2.圖片展示規(guī)范

(1)主圖要求：

-使用高質(zhì)量圖片（≥1080p分辨率）

-支持放大查看（放大倍數(shù)5-8倍）

-角度展示：正面+側(cè)面+細(xì)節(jié)圖

(2)多圖切換：

-左右滑動(dòng)切換

-點(diǎn)擊縮略圖全屏查看

-縮略圖排列：3行展示

3.信息層級(jí)設(shè)計(jì)

(1)重要信息突出：

-標(biāo)題字號(hào)≥24px，加粗

-價(jià)格使用特殊字體或色塊突出

-銷(xiāo)量使用醒目數(shù)字格式

(2)次要信息歸類(lèi)：

-評(píng)價(jià)使用星級(jí)+數(shù)字（如4.8分（1200+評(píng)價(jià)））

-商品屬性使用分組標(biāo)簽

-優(yōu)惠信息使用特殊色塊

（三）移動(dòng)端適配要點(diǎn)

1.交互設(shè)計(jì)規(guī)范

(1)點(diǎn)擊區(qū)域：

-按鈕點(diǎn)擊區(qū)域≥44x44px

-圖片點(diǎn)擊區(qū)域覆蓋整個(gè)圖片

-下拉刷新區(qū)域≥60px（下拉距離）

(2)手勢(shì)交互：

-左滑返回上一頁(yè)

-滑動(dòng)切換圖片

-長(zhǎng)按商品添加到收藏夾

2.視覺(jué)元素適配

(1)字體大小：

-標(biāo)題：≥22px

-正文：16-18px

-輔助信息：14-16px

(2)間距規(guī)范：

-組件間距：8-12px

-網(wǎng)格間距：4-6px

(3)元素對(duì)齊：

-使用flex布局保證元素水平垂直居中

-表單元素左右對(duì)齊

3.性能優(yōu)化

(1)圖片優(yōu)化：

-使用WebP格式

-設(shè)置不同分辨率圖片（iPhone6/1