張倩

（廣州賽寶認(rèn)證中心服務(wù)有限公司，廣東 廣州 510610）

1 檢驗(yàn)檢測電商平臺分析

1.1 檢驗(yàn)檢測電商平臺用戶分析

對于檢驗(yàn)檢測電商網(wǎng)站的瀏覽者來說，絕大多數(shù)用戶都有檢驗(yàn)檢測某一產(chǎn)品的需求。這些用戶主要可以劃分為兩類，第一類用戶主要想通過網(wǎng)絡(luò)平臺完成檢驗(yàn)檢測過程，此類用戶有電商平臺用戶的典型特點(diǎn)，愿意嘗試新的途徑，希望節(jié)省時(shí)間去完成檢驗(yàn)檢測過程；第二類用戶為信息獲取型用戶，此類用戶主要想獲取檢驗(yàn)檢測產(chǎn)品價(jià)格或行業(yè)內(nèi)的相關(guān)信息，以咨詢?yōu)橹鳌?/p>

對于檢驗(yàn)檢測電商平臺入駐機(jī)構(gòu)來說，檢驗(yàn)檢測電商平臺具有降低交易成本的優(yōu)勢，多數(shù)中小型企業(yè)與平臺合作入駐平臺期望可以利用平臺得到快速發(fā)展的機(jī)會。

1.2 電商類檢驗(yàn)檢測行業(yè)網(wǎng)站平臺產(chǎn)品定位分析

電商類檢驗(yàn)檢測行業(yè)為檢驗(yàn)檢測機(jī)構(gòu)提供業(yè)務(wù)開拓的平臺，為企業(yè)提供簡化檢驗(yàn)檢測流程的檢驗(yàn)檢測服務(wù)。

1.3 根據(jù)平臺分析定位網(wǎng)站整體風(fēng)格

檢驗(yàn)檢測電商平臺可以粗略定位為服務(wù)類型平臺，設(shè)計(jì)風(fēng)格可以參考扁平化風(fēng)格，弱化不必要且復(fù)雜的元素，瀏覽者可以迅速在平臺中發(fā)現(xiàn)自己所感興趣的板塊。且扁平化網(wǎng)頁設(shè)計(jì)將網(wǎng)頁的頁面盡可能展露在蜘蛛爬蟲面前，無需深度挖掘就可以被蜘蛛抓取，對搜索引擎友好，有利于展開SEO工作。

2 檢驗(yàn)檢測平臺設(shè)計(jì)技巧

2.1 合理使用柵格化工具

柵格系統(tǒng)英文名為Grid Systems，是運(yùn)用規(guī)則的網(wǎng)格陣列，遵循一定的規(guī)律進(jìn)行頁面的布局設(shè)計(jì)，使布局規(guī)范簡潔。通常需要設(shè)置定義總寬度、列數(shù)和水槽（留白）三個(gè)數(shù)值。

網(wǎng)頁設(shè)計(jì)師可以利用柵格讓畫面整體協(xié)調(diào)、干凈，保持網(wǎng)頁內(nèi)容的組織度。方便了組件、各模塊之間的校準(zhǔn)、對齊等操作，讓畫面整潔有序，強(qiáng)化版面層次感。營造出空間的節(jié)奏感和視覺的流暢感，讓整套網(wǎng)頁的不同頁面都保持一致性。使用柵格化工具的同時(shí)需要注意設(shè)計(jì)不要被工具束縛，沒有必要完全受限于柵格。在熟練進(jìn)行網(wǎng)頁排版后可以有技巧地拋開柵格的約束進(jìn)行一些視覺上的跳躍設(shè)計(jì)，或許會有更好的效果。

2.2 限制字體的使用

過多的字體或同一字體的大小、粗細(xì)改變過多，會使網(wǎng)頁內(nèi)信息看上去雜亂無章，會降低網(wǎng)頁的閱讀性。通常一個(gè)界面不超過三種字體。

2.3 控制字行的長度

過長或者過短的一行文字都會影響網(wǎng)站用戶的閱讀體驗(yàn)。如果文字行過長，用戶視線距離移動(dòng)過長、很難聚集視線。如果行太短、視線來回返回會打破用戶的閱讀節(jié)奏。

2.4 對齊元素與文字

利用柵格工具，確保網(wǎng)頁中元素的對齊、文字的對齊、圖片的對齊、區(qū)塊布局對齊，確保整個(gè)頁面干凈整潔。

2.5 保持適當(dāng)留白

適當(dāng)?shù)牧舭卓梢员ＷC各元素之間清晰流暢，避免布局過于緊湊而導(dǎo)致的用戶信息獲取障礙，減少用戶的視覺疲勞，給需要重點(diǎn)表達(dá)的信息留有空間。

2.6 增強(qiáng)背景色與文字的對比

對于帶有背景或背景色的文字，增強(qiáng)背景色與文字的對比，確保文字清晰可見。

3 網(wǎng)頁界面設(shè)計(jì)重點(diǎn)分析

3.1 檢驗(yàn)檢測平臺應(yīng)用的基礎(chǔ)色彩與元素分析

用戶瀏覽檢驗(yàn)檢測平臺時(shí)，很短時(shí)間內(nèi)就可以確定該網(wǎng)站是否符合自己的需求。在短暫的幾秒鐘里，網(wǎng)站的整體設(shè)計(jì)風(fēng)格需要突顯出網(wǎng)站自身的優(yōu)勢。

主色調(diào)在很大程度上決定了網(wǎng)站的整體設(shè)計(jì)風(fēng)格，選擇合理的顏色并給出恰到好處的搭配是網(wǎng)頁界面設(shè)計(jì)的基礎(chǔ)。檢驗(yàn)檢測行業(yè)企業(yè)大多數(shù)可以讓人聯(lián)想到儀器、設(shè)備、科學(xué)、實(shí)驗(yàn)等關(guān)鍵詞，帶有一種嚴(yán)謹(jǐn)、公正的色彩，大多數(shù)時(shí)候需要運(yùn)用冷色調(diào)來體現(xiàn)。

設(shè)計(jì)上的主色調(diào)可選取藍(lán)、白、灰等。檢驗(yàn)檢測平臺可選用偏冷的色調(diào)，表達(dá)出冷靜、嚴(yán)謹(jǐn)、科學(xué)等感覺；設(shè)計(jì)元素上可以盡量選取矩形框或小像素圓角，更貼近嚴(yán)謹(jǐn)公正的感情色彩。

3.2 組件的設(shè)計(jì)與統(tǒng)一

對于網(wǎng)站的組件，通常要求具有統(tǒng)一規(guī)范。相同級別的組件，比如一般購物網(wǎng)站的登錄與注冊組件屬于同一級別的組件，需要確定組件的大小，進(jìn)行規(guī)范設(shè)計(jì)。

3.3 網(wǎng)頁導(dǎo)航

網(wǎng)頁導(dǎo)航貫穿整套網(wǎng)頁，帶領(lǐng)用戶實(shí)現(xiàn)各個(gè)界面的跳轉(zhuǎn)。指向清晰的導(dǎo)航是一個(gè)網(wǎng)站成功的必備因素。

目前網(wǎng)絡(luò)上的導(dǎo)航可按結(jié)構(gòu)劃分為頂部導(dǎo)航、豎直/側(cè)邊導(dǎo)航（因視覺靠左通常將側(cè)邊導(dǎo)航放置左側(cè)）。頂部導(dǎo)航是目前大多數(shù)網(wǎng)站采用的一種網(wǎng)站導(dǎo)航欄設(shè)計(jì)模式。常見的是網(wǎng)站logo、導(dǎo)航分類文字與登錄、注冊、搜索組件結(jié)合的形式，是單列布局網(wǎng)頁的唯一選擇。豎直/側(cè)邊導(dǎo)航欄的導(dǎo)航項(xiàng)在一個(gè)單項(xiàng)中排列，一項(xiàng)疊一項(xiàng)，是當(dāng)前最通用的模式之一，可同時(shí)放入大量鏈接。檢驗(yàn)檢測電商平臺需要選用頂部導(dǎo)航貫穿全局，又因產(chǎn)品種類繁多、頂部位置有限不能完全展示，可以采用頂部導(dǎo)航與側(cè)邊導(dǎo)航兩者相結(jié)合的形式。

3.4 圖片的優(yōu)化

電商類網(wǎng)站設(shè)計(jì)對于圖片的使用需要同時(shí)考慮網(wǎng)站傳輸圖片時(shí)所需的加載時(shí)間和圖片清晰度。圖片文件大小不能過大，否則網(wǎng)站響應(yīng)時(shí)間過長會造成一定數(shù)量上的用戶流失。但圖片的質(zhì)量也不可太差，清晰度低的圖片會讓用戶認(rèn)為產(chǎn)品低落，把握好圖片的大小與質(zhì)量是設(shè)計(jì)師給出圖片時(shí)需要衡量的因素之一。

網(wǎng)頁的產(chǎn)品圖首先選取與產(chǎn)品相關(guān)的圖片，可以避免用戶的預(yù)期和內(nèi)容產(chǎn)生割裂感。檢驗(yàn)檢測行業(yè)的產(chǎn)品多數(shù)情況下為證書，但是證書的視覺表現(xiàn)力沒有產(chǎn)品強(qiáng)烈。可以選用被檢測產(chǎn)品的產(chǎn)品圖做行業(yè)內(nèi)的產(chǎn)品圖，注意選取產(chǎn)品的合適角度以及圖片的質(zhì)量、除產(chǎn)品本身色彩外不要多余三種顏色或者統(tǒng)一使用白色背景。被檢測的產(chǎn)品多種多樣，可以根據(jù)每一類產(chǎn)品的特點(diǎn)選取產(chǎn)品圖。但所有產(chǎn)品的裝飾元素，比如背景色或者邊框還要與網(wǎng)站整體風(fēng)格統(tǒng)一。

3.5 文字排版設(shè)計(jì)的靈活使用

將文字圖形化同樣會增長網(wǎng)站的反應(yīng)時(shí)間，減少圖形化文字的出現(xiàn)。盡量用純文字排版營造出網(wǎng)站的設(shè)計(jì)感是設(shè)計(jì)師必須掌握的技巧。文字的排版主要分為以下幾種。

3.5.1 文字與文字的排版

文字與文字的排版需要觀察文字的字間距與行間距、文字模塊與模塊之前的間距。相關(guān)文字可采用包圍結(jié)構(gòu)緊湊排版，與其他不相關(guān)內(nèi)容進(jìn)行區(qū)分。做到疏密有致，讓需要獲取信息的用戶一目了然，方便獲取信息。

3.5.2 文字與圖片的排版

文字與圖片的排版是整個(gè)網(wǎng)頁中最常運(yùn)用的排版方式，通常會占用整個(gè)網(wǎng)頁中的絕大部分面積。文字與圖片的排版可以多樣結(jié)合。在進(jìn)行網(wǎng)頁文字與圖片的排版布局之前應(yīng)進(jìn)行整體規(guī)劃，平衡頁面的文字與圖片。檢驗(yàn)檢測行業(yè)的頁面布局通常不需過多趣味性，保持整潔排版，文字、圖片信息清晰展現(xiàn)，利用顏色、線條、組件等進(jìn)行裝飾。

3.5.3 文字與圖形的排版

網(wǎng)頁界面中常需要文字與圖形的結(jié)合來組成一個(gè)控件或一個(gè)模塊等，當(dāng)文字與圖形相結(jié)合時(shí)需要注意文字在圖形內(nèi)部時(shí)的居中、組件與組件之間對齊，相同組件之間大小相同、間隔相同，對其參考線。同類模塊中的各組件需做到完全一致，以保持頁面的干凈整潔。

4 網(wǎng)頁中圖片的視覺傳達(dá)

4.1 輪播圖的交互設(shè)計(jì)

輪播圖在Web網(wǎng)頁中已經(jīng)司空見慣，主要發(fā)布網(wǎng)站的信息、活動(dòng)與廣告。輪播圖的使用與設(shè)計(jì)也是一個(gè)值得思考的問題。網(wǎng)站使用輪播圖重點(diǎn)放置哪些內(nèi)容、是否有效、怎樣設(shè)計(jì)可以達(dá)到想要的展示、推廣的效果都是一個(gè)值得探究的問題。

可以將檢驗(yàn)將策行業(yè)服務(wù)理念貫徹輪播圖設(shè)計(jì)，成為網(wǎng)站的門面，讓輪播圖與網(wǎng)站融為一體，也可以利用輪播圖空間推出網(wǎng)站展開的一系列活動(dòng)，具體的利用方法可以根據(jù)網(wǎng)站的運(yùn)營階段與實(shí)際情況而定。

4.2 輪播圖的視覺設(shè)計(jì)

不管是平臺的相關(guān)信息展示還是平臺推出的活動(dòng)，文案的展開背后都會有一定的表達(dá)情感傾向。找準(zhǔn)感情傾向，拿出情感化的設(shè)計(jì)，將情感融入設(shè)計(jì)，并且用情感來說服用戶，才是網(wǎng)站首頁設(shè)計(jì)圖的設(shè)計(jì)之道，只有能夠觸動(dòng)用戶情緒的設(shè)計(jì)更具有說服力。

將所要展示的信息主旨重點(diǎn)表達(dá)，位置上可利用視覺靠左原則。善于利用各點(diǎn)綴元素，充實(shí)豐富畫面。

4.3 活動(dòng)頁面的設(shè)計(jì)與排版

平臺有大量圖文信息需要表述時(shí)，需要運(yùn)用活動(dòng)頁面的設(shè)計(jì)與排版。

從文案中吸取信息，瀏覽主要標(biāo)題與次要標(biāo)題，確定圖片所要表達(dá)情緒，分清主次。與運(yùn)營小組溝通好所要表達(dá)的重點(diǎn)，根據(jù)表達(dá)重點(diǎn)選擇元素主體、尋找素材。大部分時(shí)候，我們的創(chuàng)意與文案最終目的在于調(diào)動(dòng)用戶情感，通過活動(dòng)頁面的視覺設(shè)計(jì)傳達(dá)出我們想要表達(dá)的情感感染用戶。積極的情緒刺激能夠更好地建立用戶和你的網(wǎng)站之間的互動(dòng)感。