WooCommerce 獨立站網頁設計人員在進行設計 B2B 入口網站時該注意哪些細節特性呢?從多使用者以及搜尋引擎的角度來講,什麼樣的頁面設計會給多使用者一個好的體驗呢?B2B 行業入口網站由於具有 B2B 網站的特性和入口網站的特性,決定了頁面設計及製作具有與其他網站很多的不同點,當然還是有許多的相同點。本文來談談廣州 WooCommerce 建站行業中,B2B 行業 WordPress 網站設計的原則。

  1 、頁面用色、框架及整體風格應該是嚴謹的,充滿商業氛圍的

  由於 B2B 行業網站涉及行業的發展動態、技術知識、營銷管理知識、產品資訊等,註定了內容是嚴謹的、高階的; 由於涉及的是企業與企業之間的交易促進、資訊交流與交友,所以在商業欄目更多的要體現出濃厚的商業氛圍,一切頁面設計都是為商人而考慮的。

  A 、頁面的用色要更嚴謹、忌諱非商業色彩

  藍色、紅色、黃色是 B2B 行業網站的常用主色,其中常常是幾種顏色搭配使用,當然在使用過程中,常常是用這幾種顏色之外的顏色來搭配,或者這幾種顏色的漸變色。由此衍生的顏色包括:深藍色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等,在此不一一列舉,顏色的搭配由設計師自己來確定,我們最後來稽核即可,關鍵要的就是一個頁面整體效果。

  B 、頁面標題欄和導航欄更多要方形的、規則的

  作為 WordPress 企業網站、時尚型別的網站,或者為了表達時尚、活潑的主題,網站的設計可以比較活潑一些,多采用圓形或不規則的排版方式,但是作為 B2B 行業網站,就不能這樣設計。

  每個部分要具有明顯的區分,每個區域都是規則的,使用的圖片、背景都是嚴謹的。不能把圖片斜放、用很大的橢圓形、用很大的圖示、用卡通的圖示、活潑的圖形等來設計網站的標題欄和導航欄。

  C 、整體風格應嚴謹、充滿商業氛圍

  網站的整體風格比用色、標題欄設計更加重要,某個搭配顏色比較活潑、時尚一些,並不會影響整體的風格。某個圖片不規則,或者網頁裡的內容圖片不規則,也不會對整體的感覺產生多大的影響。 B2B 行業網站的首頁、二級欄目首頁、重要的專題頁,都要先做效果圖,保證整體的效果後,才能開始做頁面設計,不能一開始就做頁面。整體的頁面風格不能花哨,要降低框架、背景等對閱讀內容的影響,專業的說法叫降低頁面的噪聲,整體風格要淡雅,讓訪問的人靜下心來思考。同時 B2B 行業網站不是面對普通消費者的,而是面對行業從業者,是為了大家獲得行業知識與商業資訊而出現的,提供的是工作和商業上的幫助,需要嚴謹。

  2 、內容和功能決定表現形式和介面設計

  頁面設計是沒有一個固定標準的,很多時候我們不能用美醜來判斷,也不能用是否有創意來判斷,而應該綜合分析這個頁面的訪問者,頁面的內容、功能。有時候一點創意都沒有,和其他很多網站都是類似的,才是最好的,因為就應該是這樣的。看到過一篇講設計的文章說:“創意是可恥的,分析能力遠比創意來的重要”,和我這個小標題所要表達的內涵是一樣的。設計師常常希望自己的網站是最有創意的,最漂亮的; 程式設計師希望自己開發的網站功能是最強的,最易用的; 但是任何設計、功能都是為訪問者、使用者服務的,設計者的分析能力遠比創意來的重要。

  3 、要多使用習慣用法,不要輕易使用一種新用法

  所謂習慣用法,是多使用者經常使用的網站,或者非常知名的網站用法,往往就是多使用者的習慣,因為知名網站的多使用者最多,多使用者也是最認可的。相同的功能,或者說不會因為網站的不同而表達方式發生變化的功能,就可以用習慣用法。

  比如網站的註冊,幾乎所有具有會員功能的網站都有這個功能,多使用者點選一個註冊的連結,在新視窗裡填寫自己的登入資訊、聯絡方式等,多使用者註冊過非常多的網站,如果您的頁面做的和其他易用的知名網站很多不一樣,多使用者就會不習慣。比如當我們來到一個新網站的時候,常常需要了解這個網站的介紹、主辦方聯絡方式等資訊,習慣就是在網站底部找這些資訊,絕大部分的網站底部都有一排的連結來表達,如果您設計個網站,希望很創新,把這些連結不放在底部,多使用者就會覺得不習慣,因為您打破了習慣用法。

  對設計師來講,那怕有時這樣的熟悉讓您覺得相似而乏味,一點都沒有創新,您還是要這樣去用。比如絕大部分的網站都是把 Logo 放在頁面左上角,如果您非要放在右上角,多使用者就不能很快的明白這是一個什麼樣的網站,因為他習慣了左邊看網站 Logo,也許右邊根本就不怎麼注意到。

  4 、建立清楚的視覺層次,讓多使用者能從視覺上區分

  頁面具有層次感,一看就能明白那些是重點,那些是次要的,每個部分表達的內容都非常的清晰,多使用者能很快的找到自己重點關注的部分。與此相反的就是頁面很凌亂,結構不清晰,多使用者來到頁面不知道那些是重點,1 分鐘之內很難發現自己感興趣的內容,網路上的多使用者耐性很差,不能很快找到就不找了,認為您的網站很差,或者乾脆以後都不來了,但是實際上網站有他要的內容或想使用的功能,只是由於頁面設計的不好,不能更快的找到而已。

  建立清楚的視覺層次,既要確保頁面上所有內容的外觀、所有的可視線索清楚,還要能準確地表述頁面上的內容之間的關係。一個視覺層次清楚的頁面有如下三個特點:A 、越重要的部分越突出;B 、功能或內容相關的部分在視覺上也要相關;C 、功能或內容在邏輯上包含的部分在視覺上也要進行巢狀,關於這三個特點,我在《B2B 行業門戶 WordPress 網站設計開發實戰研究報告》裡做了非常詳細的闡述。

  5 、訪問者不是在閱讀,而是在掃描

  根據《別讓我思考》(英文名:DON’TMAKEMETHINK) 一書所講:“訪問者不是在閱讀,而是在掃描,是極少數幾個得到了證明的事實之一,人們會花極少的時間來閱讀大部分的頁面,相反,我們只是掃描一下 (或者匆匆掠過) 網頁,尋找能吸引我們注意力的文字或詞語。” 當然這個還是有一定條件的,對於導航頁、首頁等,多使用者會更多的用掃描來獲得自己感興趣的內容。但是對於內容最終頁,大部分多使用者是在閱讀,但是也會先掃描一下大概內容,對於太長的文章或內容,就要看下是否有小標題,如果有就要先掃描小標題,看自己是否感興趣,感興趣了才會繼續閱讀。從這個角度講,還是會先掃描。

  當我們在策劃、設計網站的頁面時,在編輯網站內容時,要時刻謹記多使用者不是在閱讀,而是在掃描,將這個思想貫徹地執行下去。會指導很多正確的策劃和設計,比如:重要的內容要大標題、要加粗; 每個模組儘量能圖文並茂,讓讀者掃描的時候看到圖片,更容易引起興趣; 對重要的內容,廣告文案等要多加總結、提煉,吸引他們感興趣; 編輯在寫文章、內容編輯的時候,對於超過 800 字的文章,最好能加上小標題,讓多使用者可以預先掃描是否感興趣。

  6 、閉門造車者做出的東西,是遠遠趕不上綜合借鑑者的

  網頁技術更新很快,一個網站的介面設計壽命僅僅 2-3 年而已。不管是垃圾還是精品,都沒有所謂的經典。經典只存在於是那個首次成功創新性的應用。一個閉門造車者做出的東西,是遠遠趕不上綜合借鑑者的。 WooCommerce 獨立站網頁設計不同於其他藝術,在模仿加創新的 WooCommerce 獨立站網頁設計領域當中,即便是完全自己設計的,也是沿用了人們已經認同的大部分多使用者習慣,而且這種沿襲的痕跡有時非常的明顯! 還有那個設計者敢腆著臉說,這都是我自己的原創設計? 對於業界來說,經典只是個理念和象徵!

  對於 B2B 行業網站的設計,要多參考,多模仿,找出幾十個同型別的最優秀網站來參考,分析別的網站為什麼要這麼設計,取其精華,去其糟粕,聯絡自己設計網站的特點加以改進或修改,往往這樣的設計才是最成功的設計。因為最成功的網站都是經過多方研究的,他們不僅僅模仿,也有屬於自己的創新,大部分也經得起多使用者的考驗,符合絕大部分多使用者的需求。

  7 、 B2B 行業網站大部分的頁面介面應弱化,強調功能和內容

  B2B 行業入口網站不同於 WordPress 企業網站,它存在的最大的價值在於給多使用者提供一個平臺,提供更多有價值的內容,介面存在的價值在於輔助、引導多使用者更好的去使用這個平臺,發現裡面自己感興趣的內容,挑選並閱讀,獲得知識。並不是要濃墨重彩的使用大量的顏色和圖示來表達頁面的主題,這個是一些設計 B2B 行業網站的人常犯的錯誤,尤其是初學者。

  比如做一個 WordPress 企業網站,我們為什麼要使用大的圖片、圖示,大面積的顏色去渲染這個頁面呢? 因為每個企業都有其自己獨特的產品與企業文化,來這個頁面的讀者都是想了解這個企業或產品的,我們需要用設計向訪問者很直觀的傳遞企業資訊,尤其是很多品牌公司網站。 B2B 行業網站的專題頁面設計、收費服務介紹等頁面與建設 WordPress 企業網站一樣,需要用大的圖片、小圖示、大面積的顏色來襯托頁面的主題。

  8 、頁面要模組化、可修改性要強

  模組化不僅可以提高重用性,也能統一網站風格,還可以降低程式開發的強度。模組化的最大好處就是統一網站風格,讓多使用者無論在網站的那個頁面,也能明白還是在這個網站,形成了很強的品牌辨識度。時刻記住,WordPress 做網站的最終目標,就是要做品牌,設計時就必須要作為指導思想。無論是架構、模組或圖片,都要考慮其可修改性。採用 DIV+CSS 設計是目前最好的解決方法,不僅使頁面易於修改,關鍵是降低頁面程式碼的數量,易於搜尋引擎找到最重要的內容。