基于檢驗檢測行業(yè)電子商務平臺的視覺設計研究

張倩

（廣州賽寶認證中心服務有限公司，廣東 廣州 510610）

1 檢驗檢測電商平臺分析

1.1 檢驗檢測電商平臺用戶分析

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

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

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

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

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

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

2 檢驗檢測平臺設計技巧

2.1 合理使用柵格化工具

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

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

2.2 限制字體的使用

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

2.3 控制字行的長度

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

2.4 對齊元素與文字

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

2.5 保持適當留白

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

2.6 增強背景色與文字的對比

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

3 網(wǎng)頁界面設計重點分析

3.1 檢驗檢測平臺應用的基礎色彩與元素分析

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

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

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

3.2 組件的設計與統(tǒng)一

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

3.3 網(wǎng)頁導航

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

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

3.4 圖片的優(yōu)化

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

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

3.5 文字排版設計的靈活使用

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

3.5.1 文字與文字的排版

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

3.5.2 文字與圖片的排版

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

3.5.3 文字與圖形的排版

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

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

4.1 輪播圖的交互設計

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

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

4.2 輪播圖的視覺設計

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

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

4.3 活動頁面的設計與排版

平臺有大量圖文信息需要表述時，需要運用活動頁面的設計與排版。

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