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

張倩

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

1 檢驗檢測電商平臺分析

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

對于檢驗檢測電商網站的瀏覽者來說，絕大多數用戶都有檢驗檢測某一產品的需求。這些用戶主要可以劃分為兩類，第一類用戶主要想通過網絡平臺完成檢驗檢測過程，此類用戶有電商平臺用戶的典型特點，愿意嘗試新的途徑，希望節省時間去完成檢驗檢測過程；第二類用戶為信息獲取型用戶，此類用戶主要想獲取檢驗檢測產品價格或行業內的相關信息，以咨詢為主。

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

1.2 電商類檢驗檢測行業網站平臺產品定位分析

電商類檢驗檢測行業為檢驗檢測機構提供業務開拓的平臺，為企業提供簡化檢驗檢測流程的檢驗檢測服務。

1.3 根據平臺分析定位網站整體風格

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

2 檢驗檢測平臺設計技巧

2.1 合理使用柵格化工具

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

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

2.2 限制字體的使用

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

2.3 控制字行的長度

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

2.4 對齊元素與文字

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

2.5 保持適當留白

適當的留白可以保證各元素之間清晰流暢，避免布局過于緊湊而導致的用戶信息獲取障礙，減少用戶的視覺疲勞，給需要重點表達的信息留有空間。

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

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

3 網頁界面設計重點分析

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

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

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

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

3.2 組件的設計與統一

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

3.3 網頁導航

網頁導航貫穿整套網頁，帶領用戶實現各個界面的跳轉。指向清晰的導航是一個網站成功的必備因素。

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

3.4 圖片的優化

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

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

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

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

3.5.1 文字與文字的排版

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

3.5.2 文字與圖片的排版

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

3.5.3 文字與圖形的排版

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

4 網頁中圖片的視覺傳達

4.1 輪播圖的交互設計

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

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

4.2 輪播圖的視覺設計

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

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

4.3 活動頁面的設計與排版

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

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