B2B行業(yè)門戶網(wǎng)站頁面設計基礎 B2B行業(yè)門戶網(wǎng)站由于具有B2B網(wǎng)站的特性和門戶網(wǎng)站的特性,決定了頁面設計及制作具有與其他網(wǎng)站很多的不同點,當然還是有許多的相同點。在寫這個篇章之前,我覺得有必要從理論上和大家講下頁面設計及制作的基本要點。這些基本原則將指導大家更好的閱讀和理解這個章節(jié)的所有內(nèi)容。萊陽信息港門戶網(wǎng)站建設。
1、頁面用色、框架及整體風格應該是嚴謹?shù)模錆M商業(yè)氛圍的萊陽信息港門戶網(wǎng)站建設。
由于B2B行業(yè)網(wǎng)站涉及行業(yè)的發(fā)展動態(tài)、技術知識、營銷管理知識、產(chǎn)品信息等,注定了內(nèi)容是嚴謹?shù)摹⒏叨说?;由于涉及的是企業(yè)與企業(yè)之間的交易促進、信息交流與交友,所以在商業(yè)欄目更多的要體現(xiàn)出濃厚的商業(yè)氛圍,一切頁面設計都是為商人而考慮的。萊陽信息港門戶網(wǎng)站建設。
A 、頁面的用色要更嚴謹、忌諱非商業(yè)色彩萊陽信息港門戶網(wǎng)站建設。
藍色、紅色、黃色是B2B行業(yè)網(wǎng)站的常用主色,其中常常是幾種顏色搭配使用,當然在使用過程中,常常是用這幾種顏色之外的顏色來搭配,或者這幾種顏色的漸變色。由此衍生的顏色包括:深藍色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等,在此不一一列舉,顏色的搭配由設計師自己來確定,我們最后來審核即可,關鍵要的就是一個頁面整體效果。萊陽信息港門戶網(wǎng)站建設。
B、頁面標題欄和導航欄更多要方形的、規(guī)則的萊陽信息港門戶網(wǎng)站建設。
作為企業(yè)網(wǎng)站、時尚類型的網(wǎng)站,或者為了表達時尚、活潑的主題,網(wǎng)站的設計可以比較活潑一些,多采用圓形或不規(guī)則的排版方式,但是作為B2B行業(yè)網(wǎng)站,就不能這樣設計。萊陽信息港門戶網(wǎng)站建設。
每個部分要具有明顯的區(qū)分,每個區(qū)域都是規(guī)則的,使用的圖片、背景都是嚴謹?shù)摹2荒馨褕D片斜放、用很大的橢圓形、用很大的圖標、用卡通的圖標、活潑的圖形等來設計網(wǎng)站的標題欄和導航欄。萊陽信息港門戶網(wǎng)站建設。
C 、整體風格應嚴謹、充滿商業(yè)氛圍萊陽信息港門戶網(wǎng)站建設。
網(wǎng)站的整體風格比用色、標題欄設計更加重要,某個搭配顏色比較活潑、時尚一些,并不會影響整體的風格。某個圖片不規(guī)則,或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則,也不會對整體的感覺產(chǎn)生多大的影響。B2B行業(yè)網(wǎng)站的首頁、二級欄目首頁、重要的專題頁,都要先做效果圖,保證整體的效果后,才能開始做頁面設計,不能一開始就做頁面。整體的頁面風格不能花哨,要降低框架、背景等對閱讀內(nèi)容的影響,專業(yè)的說法叫降低頁面的噪聲,整體風格要淡雅,讓訪問的人靜下心來思考。同時B2B行業(yè)網(wǎng)站不是面對普通消費者的,而是面對行業(yè)從業(yè)者,是為了大家獲得行業(yè)知識與商業(yè)信息而出現(xiàn)的,提供的是工作和商業(yè)上的幫助,需要嚴謹。萊陽信息港門戶網(wǎng)站建設。
2、內(nèi)容和功能決定表現(xiàn)形式和界面設計萊陽信息港門戶網(wǎng)站建設。
頁面設計是沒有一個固定標準的,很多時候我們不能用美丑來判斷,也不能用是否有創(chuàng)意來判斷,而應該綜合分析這個頁面的訪問者,頁面的內(nèi)容、功能。有時候一點創(chuàng)意都沒有,和其他很多網(wǎng)站都是類似的,才是最好的,因為就應該是這樣的。看到過一篇講設計的文章說:“創(chuàng)意是可恥的,分析能力遠比創(chuàng)意來的重要”,和我這個小標題所要表達的內(nèi)涵是一樣的。設計師常常希望自己的網(wǎng)站是最有創(chuàng)意的,最漂亮的;程序員希望自己開發(fā)的網(wǎng)站功能是最強的,最易用的;但是任何設計、功能都是為訪問者、使用者服務的,設計者的分析能力遠比創(chuàng)意來的重要。萊陽信息港門戶網(wǎng)站建設。
綜上所述,任何一個頁面在設計之前,設計師都必須要靜下心來想想,這個頁面在表達什么內(nèi)容,或者說是一個什么樣的功能,根據(jù)內(nèi)容和功能再來確定應該具有的表現(xiàn)形式。否則設計的頁面與網(wǎng)站策劃者所想要達到目的的有時會相差很遠,甚至方向都是不對的。同時設計師還要具有一定的商業(yè)思維,將自己的設計變的更加商業(yè)化。關于在策劃的時候就要初步的為設計師考慮頁面的表達形式,我在《B2B行業(yè)門戶網(wǎng)站策劃實戰(zhàn)研究報告》里對這個問題進行過系統(tǒng)的闡述,策劃是設計的基礎。萊陽信息港門戶網(wǎng)站建設。
3、要多使用習慣用法,不要輕易使用一種新用法萊陽信息港門戶網(wǎng)站建設。
所謂習慣用法,是用戶經(jīng)常使用的網(wǎng)站,或者非常知名的網(wǎng)站用法,往往就是用戶的習慣,因為知名網(wǎng)站的用戶最多,用戶也是最認可的。相同的功能,或者說不會因為網(wǎng)站的不同而表達方式發(fā)生變化的功能,就可以用習慣用法。萊陽信息港門戶網(wǎng)站建設。
比如網(wǎng)站的注冊,幾乎所有具有會員功能的網(wǎng)站都有這個功能,用戶點擊一個注冊的鏈接,在新窗口里填寫自己的登錄信息、聯(lián)系方式等,用戶注冊過非常多的網(wǎng)站,如果你的頁面做的和其他易用的知名網(wǎng)站很多不一樣,用戶就會不習慣。比如當我們來到一個新網(wǎng)站的時候,常常需要了解這個網(wǎng)站的介紹、主辦方聯(lián)系方式等信息,習慣就是在網(wǎng)站底部找這些信息,絕大部分的網(wǎng)站底部都有一排的鏈接來表達,如果你設計個網(wǎng)站,希望很創(chuàng)新,把這些鏈接不放在底部,用戶就會覺得不習慣,因為你打破了習慣用法。萊陽信息港門戶網(wǎng)站建設。
對設計師來講,那怕有時這樣的熟悉讓你覺得相似而乏味,一點都沒有創(chuàng)新,你還是要這樣去用。比如絕大部分的網(wǎng)站都是把Logo放在頁面左上角,如果你非要放在右上角,用戶就不能很快的明白這是一個什么樣的網(wǎng)站,因為他習慣了左邊看網(wǎng)站Logo,也許右邊根本就不怎么注意到。萊陽信息港門戶網(wǎng)站建設。
但是并不是說,我們不需要創(chuàng)新,相反,在策劃、設計的工作中,我們需要大膽的創(chuàng)新,如果我們不打算使用一種習慣用法,策劃者、設計師必須確認新用法有如下兩個特點:萊陽信息港門戶網(wǎng)站建設。
(1)同樣清楚,同樣不言而喻:只是換一個更好的表達方式,和原來的本質(zhì)上沒有太大的改變,同樣讓用戶一眼就能看明白,也就是說我們有所創(chuàng)新,但還是建立在習慣用法的基礎上,不是完全憑空創(chuàng)新。萊陽信息港門戶網(wǎng)站建設。
(2)帶來很大的價值,值得用戶付出努力來學習:這個功能雖然是以前大家沒有見過的,但是我們確認他能帶來質(zhì)的變化,而不是僅僅換個用戶不習慣的功能和界面。比如以前絕大多數(shù)的網(wǎng)站注冊都是一步搞定,現(xiàn)在如果注冊會員,有許多網(wǎng)站就分為二步或三步,為什么要這么設計呢?因為填寫的內(nèi)容太多,分成幾步用戶更能接受。萊陽信息港門戶網(wǎng)站建設。
4、建立清楚的視覺層次,讓用戶能從視覺上區(qū)分萊陽信息港門戶網(wǎng)站建設。
頁面具有層次感,一看就能明白那些是重點,那些是次要的,每個部分表達的內(nèi)容都非常的清晰,用戶能很快的找到自己重點關注的部分。與此相反的就是頁面很凌亂,結構不清晰,用戶來到頁面不知道那些是重點,1分鐘之內(nèi)很難發(fā)現(xiàn)自己感興趣的內(nèi)容,網(wǎng)絡上的用戶耐性很差,不能很快找到就不找了,認為你的網(wǎng)站很差,或者干脆以后都不來了,但是實際上網(wǎng)站有他要的內(nèi)容或想使用的功能,只是由于頁面設計的不好,不能更快的找到而已。萊陽信息港門戶網(wǎng)站建設。
建立清楚的視覺層次,既要確保頁面上所有內(nèi)容的外觀、所有的可視線索清楚,還要能準確地表述頁面上的內(nèi)容之間的關系。一個視覺層次清楚的頁面有如下三個特點:A、越重要的部分越突出;B、功能或內(nèi)容相關的部分在視覺上也要相關;C、功能或內(nèi)容在邏輯上包含的部分在視覺上也要進行嵌套,關于這三個特點,YPS小編我在《B2B行業(yè)門戶網(wǎng)站設計開發(fā)實戰(zhàn)研究報告》里做了非常詳細的闡述。萊陽信息港門戶網(wǎng)站建設。
5、訪問者不是在閱讀,而是在掃描萊陽信息港門戶網(wǎng)站建設。
根據(jù)《別讓我思考》(英文名:DON'T MAKE ME THINK)一書所講:“訪問者不是在閱讀,而是在掃描,是極少數(shù)幾個得到了證明的事實之一,人們會花極少的時間來閱讀大部分的頁面,相反,我們只是掃描一下(或者匆匆掠過)網(wǎng)頁,尋找能吸引我們注意力的文字或詞語?!碑斎贿@個還是有一定條件的,對于導航頁、首頁等,用戶會更多的用掃描來獲得自己感興趣的內(nèi)容。但是對于內(nèi)容最終頁,大部分用戶是在閱讀,但是也會先掃描一下大概內(nèi)容,對于太長的文章或內(nèi)容,就要看下是否有小標題,如果有就要先掃描小標題,看自己是否感興趣,感興趣了才會繼續(xù)閱讀。從這個角度講,還是會先掃描。萊陽信息港門戶網(wǎng)站建設。
當我們在策劃、設計網(wǎng)站的頁面時,在編輯網(wǎng)站內(nèi)容時,要時刻謹記用戶不是在閱讀,而是在掃描,將這個思想貫徹地執(zhí)行下去。會指導很多正確的策劃和設計,比如:重要的內(nèi)容要大標題、要加粗;每個模塊盡量能圖文并茂,讓讀者掃描的時候看到圖片,更容易引起興趣;對重要的內(nèi)容,廣告文案等要多加總結、提煉,吸引他們感興趣;編輯在寫文章、內(nèi)容編輯的時候,對于超過800字的文章,最好能加上小標題,讓用戶可以預先掃描是否感興趣。萊陽信息港門戶網(wǎng)站建設。
6、閉門造車者做出的東西,是遠遠趕不上綜合借鑒者的萊陽信息港門戶網(wǎng)站建設。
網(wǎng)頁技術更新很快,一個網(wǎng)站的界面設計壽命僅僅2-3年而已。不管是垃圾還是精品,都沒有所謂的經(jīng)典。經(jīng)典只存在于是那個首次成功創(chuàng)新性的應用。一個閉門造車者做出的東西,是遠遠趕不上綜合借鑒者的。網(wǎng)頁設計不同于其他藝術,在模仿加創(chuàng)新的網(wǎng)頁設計領域當中,即便是完全自己設計的,也是沿用了人們已經(jīng)認同的大部分用戶習慣,而且這種沿襲的痕跡有時非常的明顯!還有那個設計者敢腆著臉說,這都是我自己的原創(chuàng)設計?對于業(yè)界來說,經(jīng)典只是個理念和象征!萊陽信息港門戶網(wǎng)站建設。
對于B2B行業(yè)網(wǎng)站的設計,要多參考,多模仿,找出幾十個同類型的最優(yōu)秀網(wǎng)站來參考,分析別的網(wǎng)站為什么要這么設計,取其精華,去其糟粕,聯(lián)系自己設計網(wǎng)站的特點加以改進或修改,往往這樣的設計才是最成功的設計。因為最成功的網(wǎng)站都是經(jīng)過多方研究的,他們不僅僅模仿,也有屬于自己的創(chuàng)新,大部分也經(jīng)得起用戶的考驗,符合絕大部分用戶的需求。萊陽信息港門戶網(wǎng)站建設。
7、B2B行業(yè)網(wǎng)站大部分的頁面界面應弱化,強調(diào)功能和內(nèi)容萊陽信息港門戶網(wǎng)站建設。
B2B行業(yè)門戶網(wǎng)站不同于企業(yè)網(wǎng)站,它存在的最大的價值在于給用戶提供一個平臺,提供更多有價值的內(nèi)容,界面存在的價值在于輔助、引導用戶更好的去使用這個平臺,發(fā)現(xiàn)里面自己感興趣的內(nèi)容,挑選并閱讀,獲得知識。并不是要濃墨重彩的使用大量的顏色和圖標來表達頁面的主題,這個是一些設計B2B行業(yè)網(wǎng)站的人常犯的錯誤,尤其是初學者。萊陽信息港門戶網(wǎng)站建設。
比如做一個企業(yè)門戶網(wǎng)站,我們?yōu)槭裁匆褂么蟮膱D片、圖標,大面積的顏色去渲染這個頁面呢?因為每個企業(yè)都有其自己獨特的產(chǎn)品與企業(yè)文化,來這個頁面的讀者都是想了解這個企業(yè)或產(chǎn)品的,我們需要用設計向訪問者很直觀的傳遞企業(yè)信息,尤其是很多品牌公司網(wǎng)站。B2B行業(yè)網(wǎng)站的專題頁面設計、收費服務介紹等頁面與建設企業(yè)網(wǎng)站一樣,需要用大的圖片、小圖標、大面積的顏色來襯托頁面的主題。萊陽信息港門戶網(wǎng)站建設。
8、頁面要模塊化、可修改性要強萊陽信息港門戶網(wǎng)站建設。
模塊化不僅可以提高重用性,也能統(tǒng)一網(wǎng)站風格,還可以降低程序開發(fā)的強度。模塊化的最大好處就是統(tǒng)一網(wǎng)站風格,讓用戶無論在網(wǎng)站的那個頁面,也能明白還是在這個網(wǎng)站,形成了很強的品牌辨識度。時刻記住,做網(wǎng)站的最終目標,就是要做品牌,設計時就必須要作為指導思想。無論是架構、模塊或圖片,都要考慮其可修改性。采用DIV+CSS設計是目前最好的解決方法,不僅使頁面易于修改,關鍵是降低頁面代碼的數(shù)量,易于搜索引擎找到最重要的內(nèi)容,我在《B2B行業(yè)門戶網(wǎng)站推廣實戰(zhàn)秘籍》里做過詳細的解答。萊陽信息港門戶網(wǎng)站建設。
總之,關于B2B行業(yè)網(wǎng)站頁面設計基礎本文作者李學江就講這8條,這將作為設計B2B行業(yè)門戶網(wǎng)站的指導思想,也是順利看完本章節(jié)的基礎知識。也許還有更多的設計基礎知識,待大家自己在工作中去總結和提升。萊陽信息港門戶網(wǎng)站建設。
萊陽信息港(萊陽在線)萊陽門戶網(wǎng)站建設方案策劃@YPS系統(tǒng)
煙臺萊陽市及周邊信息港門戶網(wǎng)站建設服務提供商:萊陽城廂鎮(zhèn)、萊陽古柳鎮(zhèn)、萊陽柏林莊鄉(xiāng)、萊陽河洛鄉(xiāng)、萊陽萬第鎮(zhèn)、萊陽赤山鄉(xiāng)、萊陽龍旺莊鎮(zhèn)、萊陽山前店鄉(xiāng)、萊陽沐浴店鎮(zhèn)、萊陽榆科頂鄉(xiāng)、萊陽西留鄉(xiāng)、萊陽譚格莊鄉(xiāng)、萊陽馮格莊鄉(xiāng)、萊陽呂格莊鄉(xiāng)、萊陽團旺鎮(zhèn)、萊陽中荊鄉(xiāng)、萊陽穴坊鎮(zhèn)、萊陽躬家莊鄉(xiāng)、萊陽嵐子鄉(xiāng)、萊陽姜疃鎮(zhèn)、萊陽高格鄉(xiāng)、萊陽羊郡鎮(zhèn)、萊陽照旺莊鄉(xiāng)、萊陽大夼鄉(xiāng)、萊陽前淳于鄉(xiāng)、萊陽石河頭鄉(xiāng),讓您體驗煙臺萊陽信息港門戶網(wǎng)站建設哪家好!