3.2.1主要內(nèi)容類型

3.2.1.1導(dǎo)航

導(dǎo)航的作用包括：說明網(wǎng)站結(jié)構(gòu)及當(dāng)前位置，方便用戶瀏覽；增加網(wǎng)站內(nèi)鏈；增加頁面關(guān)鍵詞密度；

（1）頂部導(dǎo)航

• 一般展示網(wǎng)站完整結(jié)構(gòu)。還包含企業(yè)logo、聯(lián)系電話等功能元素。
• 效果圖需包含展開折疊、鼠標(biāo)懸浮效果、最大寬度/內(nèi)容字?jǐn)?shù)。（一級(jí)結(jié)構(gòu)下，可以展示二級(jí)甚至三級(jí)內(nèi)容）

（2）底部導(dǎo)航

• 一般只展示網(wǎng)站重點(diǎn)結(jié)構(gòu)、及重點(diǎn)內(nèi)容。
• 還包含完整企業(yè)名稱、企業(yè)logo、地址、聯(lián)系方式等。效果圖需包含鼠標(biāo)懸浮效果、最大寬度/內(nèi)容字?jǐn)?shù)。

（3）頁面導(dǎo)航（子欄目較多）

一般用在頁面左側(cè)。效果圖需包含鼠標(biāo)懸浮效果、最大寬度/內(nèi)容字?jǐn)?shù)。?

（4）頁面導(dǎo)航（子欄目不多）

一般用在頁面中部。效果圖需包含鼠標(biāo)懸浮效果、最大寬度/內(nèi)容字?jǐn)?shù)。

（5）面包屑導(dǎo)航

一般在banner上方或下方；除首頁外，每個(gè)頁面都有；最后一級(jí)需高亮展示。 效果圖需包含鼠標(biāo)懸浮效果、最大寬度/內(nèi)容字?jǐn)?shù)。

3.2.1.2 搜索

一般在頂部導(dǎo)航內(nèi)，主要元素包括搜索范圍、搜索關(guān)鍵詞等。效果圖內(nèi)需包含搜索框展開效果。

（1）文本

單頁標(biāo)題

用于單頁內(nèi)的版塊標(biāo)題，字體字號(hào)顏色需統(tǒng)一，間距需盡量一致，需確定最大寬度/字?jǐn)?shù)溢出效果。

單頁正文

用于單頁正文容，字體、字號(hào)、顏色、行間距需統(tǒng)一。 （可以根據(jù)具體情況再做拆分，如主要內(nèi)容、次要內(nèi)容、鏈接內(nèi)容等）

詳情大標(biāo)題

用于詳情內(nèi)容名稱“標(biāo)題”，一般位于詳情頭部，字體、字號(hào)、顏色、行間距需統(tǒng)一。

詳情小標(biāo)題

用于詳情正文小節(jié)版塊標(biāo)題，位于詳情頁中部，字體、字號(hào)、顏色、行間距需統(tǒng)一。

詳情正文

用于詳情正文，字體、字號(hào)、顏色、行間距需統(tǒng)一。

（2）相關(guān)內(nèi)容

是指可以在任何類型頁面使用的、鏈接至模型詳情頁的內(nèi)容;

可以展示的信息包括：詳情標(biāo)題、詳情簡(jiǎn)介、發(fā)布時(shí)間、詳情屬性等。

效果圖內(nèi)：字體字號(hào)顏色需統(tǒng)一，間距需盡量一致，需確定最大寬度/字?jǐn)?shù)溢出效果。需確定內(nèi)容最大寬度/字?jǐn)?shù)溢出效果。

?

按照詳情有沒有封面圖，相關(guān)內(nèi)容可以分為以下兩種類型

封面圖+詳情標(biāo)題

包括相關(guān)案例、相關(guān)解決方案、相關(guān)專題、相關(guān)配件、相關(guān)視頻、相關(guān)圖庫、相關(guān)新聞、相關(guān)產(chǎn)品等。

特殊說明，相關(guān)圖庫：包含多個(gè)圖片，需要和普通的封面圖效果做區(qū)分。

特殊說明，相關(guān)視頻：和普通封面圖效果做區(qū)分，如展示播放按鈕、視頻時(shí)長(zhǎng)等信息。

特殊說明，相關(guān)新聞：設(shè)計(jì)師可根據(jù)效果，采用有封面圖和沒有封面圖兩種形式。

只有詳情標(biāo)題

包括相關(guān)招聘、相關(guān)資料下載、相關(guān)問答等。其中

招聘的屬性如：招聘人數(shù)、經(jīng)驗(yàn)要求、截止時(shí)間等；

資料的屬性如：資料格式、資料大小。

（3）列表內(nèi)容

• 在模型列表和搜索列表展示的、鏈接至詳情頁的內(nèi)容;

• 可以展示的信息包括：詳情標(biāo)題、詳情簡(jiǎn)介、發(fā)布時(shí)間、屬性等。

• 按照詳情有沒有封面圖，列表內(nèi)容也可以分為封面圖+標(biāo)題和僅標(biāo)題兩大類。具體類別及樣式，一般和“相關(guān)內(nèi)容”一樣，也可以獨(dú)立設(shè)計(jì)。

舉例模型列表

舉例搜索列表

3.2.1.3 翻頁

用在模型列表和自定義列表頁中。

設(shè)計(jì)效果需說明：當(dāng)前頁面最多顯示多少頁，超出如何展示；當(dāng)前選中的頁碼效果

3.2.1.4 表單

表單標(biāo)題和字段，可以根據(jù)頁面內(nèi)容自由確定；

效果圖內(nèi)：標(biāo)題和字段類似的表單，設(shè)計(jì)效果盡量保持一致；表單字段，需要確定最大寬度和溢出效果；

除首頁外，每個(gè)頁面都有表單；

需要設(shè)計(jì)輸入錯(cuò)誤時(shí)提示效果（包括輸入錯(cuò)誤提示，必填項(xiàng)提示，提交后反饋提示）。

（1）普通表單

內(nèi)容提交后無需在頁面展示，關(guān)鍵因素只包括表單標(biāo)題、字段、特殊效果提示。

（2）需驗(yàn)證手機(jī)號(hào)的表單

內(nèi)容提交后需在頁面展示的表單，包括評(píng)論、問答等，提交表單時(shí)需驗(yàn)證手機(jī)號(hào)

（3）評(píng)論表單

位于新聞詳情頁，專題詳情頁，圖庫詳情頁；提交評(píng)論需要輸入姓名和內(nèi)容，驗(yàn)證手機(jī)號(hào)；評(píng)論可回復(fù)；評(píng)論采用翻頁形式展示全部。

（4）提交簡(jiǎn)歷表單

位于招聘詳情頁，可以上傳簡(jiǎn)歷，支持不超過20MB的pdf文件。?

3.2.2 輸出物規(guī)范

頁面尺寸

• 首頁寬度范圍1920px以內(nèi)（推薦尺寸：1200px、1440px、1680px）；
• 內(nèi)頁寬度固定為1200px。

icon

• 設(shè)計(jì)完成后整理所用圖標(biāo)并上傳至iconfont ，查看圖標(biāo)制作上傳教程；
• 通用icon可以使用通用主題包圖標(biāo)，查看五星云站主題包-通用icon
• 自己使用的icon需要自己上傳至圖標(biāo)庫，圖標(biāo)庫命名規(guī)則為（五星主題包+名稱）例：五星主題包-鍋爐
• 審核通過后，icon圖標(biāo)庫名稱附在設(shè)計(jì)說明中。

交互

• 避免使用復(fù)雜交互，如彈窗；
• 移動(dòng)端內(nèi)容列表，使用翻頁，不使用“下拉加載更多”；
• 避免使用可能引起誤解的設(shè)計(jì)元素，如鼠標(biāo)懸浮圖片時(shí)顯示加號(hào)等；
• 為表現(xiàn)按鈕、鏈接、靜態(tài)內(nèi)容的差別，pc端按鈕最好有滑動(dòng)交互效果

內(nèi)容

• 避免中英混排，中文主題包不使用無意義的純填充的英文效果；
• 圖片，不使用純占位的圖片，每個(gè)圖片都有文字說明；
• 設(shè)計(jì)時(shí)考慮內(nèi)容擴(kuò)展，確定內(nèi)容最佳寬度，以及超過寬度后的展示效果；
• 移動(dòng)端模型列表，為展示完整內(nèi)容，詳情標(biāo)題盡量使用雙行展示；
• 每個(gè)頁面包含1個(gè)h1標(biāo)簽，h1標(biāo)簽必須展示完整。

結(jié)構(gòu)

• 頁面寬度1920px，內(nèi)容區(qū)域:1200px,（全屏設(shè)計(jì)首頁可忽略此規(guī)范）;
• 底部帶有五星云站技術(shù)支持圖標(biāo)；
• 面包屑導(dǎo)航:除首頁外，每個(gè)頁面都有面包屑導(dǎo)航，用來展示頁面路徑。

單頁

不同內(nèi)容區(qū)塊間，使用有意義的短句標(biāo)題，避免使用 【相關(guān)產(chǎn)品】等標(biāo)題；

列表

• 可根據(jù)行業(yè)特點(diǎn)設(shè)計(jì)導(dǎo)航，如果分類數(shù)量少，比如新聞，可以使用單獨(dú)設(shè)計(jì)的導(dǎo)航；
• 如果分類數(shù)量較多或無法確定，可使用側(cè)欄導(dǎo)航，需支持三級(jí)分類；

詳情

• 在產(chǎn)品詳情、案例詳情、解決方案詳情頁面中，如果內(nèi)容過長(zhǎng)，可增加錨點(diǎn)導(dǎo)航，保證用戶了解當(dāng)前內(nèi)容主題、隨時(shí)轉(zhuǎn)化。

轉(zhuǎn)化

• 轉(zhuǎn)化元素包括：電話、在線客服（QQ、商務(wù)通）、其他信息（微信公眾號(hào)、個(gè)人微信二維碼）、表單。
• 設(shè)計(jì)師可以根據(jù)場(chǎng)景，設(shè)計(jì)轉(zhuǎn)化元素。
• 內(nèi)貿(mào)網(wǎng)站中，品牌>轉(zhuǎn)化；外貿(mào)網(wǎng)站中，轉(zhuǎn)化>品牌。

3.2.3 輸出物及要求

• 格式：Mac系統(tǒng)輸出sketch文件，Windows輸出psd文件

• 圖層和分組：命名和排列清晰易理解、方便查看

• 字體要求：Mac系統(tǒng)僅可使用PingFang SC系列；Windows系統(tǒng)僅可使用微軟雅黑系列；圖片（如Banner）中文字使用阿里巴巴普慧字體。

• 頁面完整，符合行業(yè)說明文檔的要求。

• 相同類型的內(nèi)容，設(shè)計(jì)風(fēng)格統(tǒng)一。

• 設(shè)計(jì)完成后整理所用圖標(biāo)并上傳至iconfont

• 每個(gè)主題包包括四種色系效果。重點(diǎn)展示首頁；其他頁面涉及換色的圖片，需單獨(dú)切圖展示。