編輯導(dǎo)語：網(wǎng)站的改版設(shè)計并不一定只是更換樣式，通過有效的改版設(shè)計，用戶可以獲得新鮮感，也能更加清晰地了解網(wǎng)站改版過程中所解決的問題和痛點。那么B2B網(wǎng)站的改版過程應(yīng)該怎么進行呢？本文作者結(jié)合案例進行了復(fù)盤總結(jié)，一起來看一下。

最近在負(fù)責(zé)我們公司的官網(wǎng)改版，現(xiàn)在復(fù)盤一下整體的改版過程；而改版主要的中心點在于能憑直覺讓用戶使用的產(chǎn)品。因此，基于這一思路，UI這一塊，對于B端產(chǎn)品來說，標(biāo)準(zhǔn)、規(guī)范大于創(chuàng)意。

提起官網(wǎng)設(shè)計，有些朋友可能會感覺：不就是換個樣式嗎？

的確，官網(wǎng)亦或者APP的更新?lián)Q代是更換樣式；但也遠遠不只是更換樣式。即使是布局部分，也只是在網(wǎng)站核心元素不變的前提下改版。但重點是——如何通過一個細(xì)節(jié)的改變，構(gòu)建一個全新的布局系統(tǒng)設(shè)定；讓大家透過每一個觸點，直觀感受到網(wǎng)站所改版解決的痛點以及新賦予的功能。

其實說到底，改版的過程就是更換精準(zhǔn)用戶的過程。

一、我們網(wǎng)站的用戶是誰呢？

1. 從數(shù)量上看，我們官網(wǎng)用戶大致分為三類

首先第一類是潛在的大企業(yè)客戶:? 他們訪問網(wǎng)站目的是搜尋、調(diào)研，是否是可以為可靠的長期服務(wù)。

再者第二類是潛在的小企業(yè)客戶：他們訪問網(wǎng)站目的是搜尋低成本的服務(wù)，就是看可否節(jié)約成本。

最后第三類是潛在的行業(yè)個人從業(yè)者：他們訪問網(wǎng)站目的是搜尋廉價的/短期的服務(wù)或僅學(xué)習(xí)/咨詢。

2. 從身份上看，我們官網(wǎng)用戶大致分為兩類

第一類是決策者，其本身就能決定是否購買產(chǎn)品/服務(wù)，這類的就是以長期合作為目的。

第二類是搜索者，帶著目的收集、比對關(guān)鍵信息，供決策者參考;這是以信息服務(wù)有目的的。

而改版的目的是從目前的主要客戶，更加精準(zhǔn)地為挖掘和服務(wù)那些剛剛成型的精準(zhǔn)用戶。

當(dāng)然了，大家都知道設(shè)計之前要確定需要;在需求分析階段，要對產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。

要了解產(chǎn)品的基本情況，比如：

• 產(chǎn)品訴求——做這個產(chǎn)品是為了解決什么問題？
• 產(chǎn)品目標(biāo)——想實現(xiàn)什么目標(biāo)？
• 用戶人群——使用這個系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對每一個用戶的行為都生成操作日志？
• 產(chǎn)品定位——面向哪類人群，滿足哪類場景，解決什么問題？
• 需求分析——產(chǎn)品的業(yè)務(wù)流程是怎樣的？
• 功能模塊——產(chǎn)品有哪些主要的功能模塊？
• 主要競品——有哪些同類型的產(chǎn)品？
• 產(chǎn)品特色——和他們相比我們的產(chǎn)品有什么特色和特點？

這里就不多敘述了，因為在我看來這確定需求過程其實就是打麻將前的洗牌過程，目的是讓你從別的事情或者思緒中平靜下來，注意力轉(zhuǎn)移到這個需求上的過程。

二、開始改版前，首先確定的是定位，解決什么問題

我們的網(wǎng)站屬于商務(wù)網(wǎng)站，也就是B2B網(wǎng)站，那么面對的就是商務(wù)人士，也就是服務(wù)商和投資者.從情感化設(shè)計來說。

B端需求呢，一般來源于產(chǎn)品戰(zhàn)略定位、使用者個性需求等；而現(xiàn)在我們B端產(chǎn)品基于線下為主，因此本次改版就是基于現(xiàn)有的“業(yè)務(wù)”形態(tài)，將傳統(tǒng)線下工作，通過程序化、系統(tǒng)化、信息化轉(zhuǎn)換為線上產(chǎn)品，目的就是達到降低辦公成本。通過細(xì)分行業(yè)領(lǐng)域、精簡操作步驟流程等方式精準(zhǔn)服務(wù)用戶這一目的。

三、確定好定位后，確定設(shè)計風(fēng)格

現(xiàn)在很多網(wǎng)站追求的是設(shè)計復(fù)查或者炫酷，其實簡潔的風(fēng)格和舒適的留白空間是一種永不落后的潮流，沒有人會不喜歡一個干凈整潔的網(wǎng)站;就像家居裝修一樣，追求的是錯落有致，不是一成不變的。

有時候無論是網(wǎng)站還是圖片使用流行的簡約的風(fēng)格，采用的標(biāo)準(zhǔn)化得導(dǎo)航欄，反而讓客戶能夠瀏覽到整個網(wǎng)站的內(nèi)容，找到他們想要的信息。

已經(jīng)離開蘋果的 Jony Ive 說過：“簡單不是一種純粹的視覺效果，你需要理解事物的本質(zhì)，才能將與之相關(guān)的一切簡化?！?/p>

喬布斯也反復(fù)強調(diào)：“只有當(dāng)我們的產(chǎn)品是簡單的它才沒有科技帶來的距離感?！?/p>

所以針對頁面或者產(chǎn)品，應(yīng)是能憑直覺使用的產(chǎn)品才是有親和力并且觸手可及的。

最后決定設(shè)計風(fēng)格偏向簡潔風(fēng)。

四、確定好設(shè)計風(fēng)格后，接下來就是研究原型邏輯

設(shè)計和產(chǎn)品沒有什么鴻溝而言，究其根本其實原型都是根據(jù)一個中心來的，它的邏輯也是根據(jù)這個中心展開的；概括說來就是產(chǎn)品原型中心就是定位用戶，邏輯這個定位用戶的思維處理。

1. 那我們的定位用戶又是什么呢?

我們是B2B平臺，所以面對的用戶是B端；那么我們得理解什么是B端；B端釋義為：Business，意為企業(yè)用戶或商業(yè)用戶。B端產(chǎn)品往往是為針對這類用戶開發(fā)的系統(tǒng)型軟件、工具或平臺。例如：CRM 系統(tǒng)、 ERP 系統(tǒng)、OA系統(tǒng)、SAAS等等。

2. 設(shè)計根據(jù)原型，用怎樣的方法進行布局

理解了原型，根據(jù)定位，頁面的設(shè)計就有了要求；那就是需要做到每一個功能點能夠清晰明確的展示，并且讓用戶知道每個功能按鈕或頁面的使用意圖。避免功能堆砌關(guān)系混亂。

不要覺得這是不必要的，就側(cè)重設(shè)計的美觀性了。

因為B端產(chǎn)品承載的信息和邏輯是比較復(fù)雜一些的，所以需要對功能層級的劃分呈現(xiàn)多考慮一點，需要有清晰的邏輯，而設(shè)計師也要多站在企業(yè)用戶的角度去考慮，使任務(wù)能夠精準(zhǔn)化觸達。

說白了毫不拖泥帶水是設(shè)計 B 端產(chǎn)品最重要的工作。

在產(chǎn)品設(shè)計之初，需要全面考慮，把握產(chǎn)品設(shè)計的大方向與業(yè)務(wù)發(fā)展的一致，這樣不至于設(shè)計出來的成品不至于總是返工。

設(shè)計師也是需要同步搭建頁面通用的設(shè)計框架，統(tǒng)一的視覺設(shè)計語言，通用的組件的規(guī)范，這樣可快速復(fù)用提效設(shè)計，也可以把更多的精力投入到梳理產(chǎn)品邏輯及交互方式和功能的視覺表現(xiàn)上。

當(dāng)然了，原型設(shè)計完成，開始做UI視覺方面的設(shè)計的時候，后端也是需要同步構(gòu)思需求的實現(xiàn)方案。

畢竟設(shè)計不是獨立存在的，因為設(shè)計師不是藝術(shù)家，不是主觀暫居第一位的，藝術(shù)家畫一幅畫，別人看不懂或者不喜歡，我們可以說是他不是伯樂，不懂藝術(shù)；但是設(shè)計師不是，設(shè)計的本質(zhì)就是為產(chǎn)品而服務(wù)的;因此工作中項目中，設(shè)計和開發(fā)的配合也是至關(guān)重要， 耽誤項目周期或者項目進度這是不可出現(xiàn)的。

因此設(shè)計也要時刻與產(chǎn)研團隊保持溝通，從技術(shù)和設(shè)計層面綜合考慮，哪種視覺呈現(xiàn)方式更合理，哪種方式更提效更穩(wěn)定，支持的場景更全面……確保當(dāng)前產(chǎn)品方案可行性，哈哈。這樣也避免了設(shè)計出來的頁面或者交互和開發(fā)進行N輪的battle啦。

因此研究好原型的邏輯的目的就是——我們設(shè)計的核心重點：界面清晰易懂，用戶的操作門檻低，能夠快速的使用產(chǎn)品，高效、專注完成任務(wù)。

確定好原型邏輯，就是開始設(shè)計了。

3. 初稿后出現(xiàn)不同的修改意見，這是不可避免的

設(shè)計的每個頁面的展示情況，總是會出現(xiàn)不同的修改意見，這是不可避免的。

而用戶呢（額，不對，這時候充當(dāng)用戶的可能是你的產(chǎn)品，可能是你的領(lǐng)導(dǎo)，也可能是你的產(chǎn)品業(yè)務(wù)同事，哈哈哈…苦悶的審稿過程），總是在你設(shè)計的初版形式上讓再加一點其他的東西，改一些其他的東西。

我覺得啊，這是一個值得思考的問題，因為客戶的不同，總是伴隨著這些一點一點的積累開始的，也許現(xiàn)在的顏色，你要克制的顏色總是在改稿情景中出現(xiàn)，打亂你現(xiàn)有的布局。

對于這些不可忽視的意見或者非必須的修改意見，解決的方法就是整齊而靈活易修改的布局，及其一套設(shè)計規(guī)范和產(chǎn)品組件規(guī)范。

• 整齊而靈活易修改的布局，大白話就是將圖形化資產(chǎn)組件化，分可形成模板，合則可拼搭成案例。為設(shè)計值提供強大的靈活性和定制性；目的是提高了設(shè)計延展性，為不同客戶的定制化需求提供更高效的輸出。
• 一套設(shè)計規(guī)范，目的是設(shè)計從信息層級、文字、圖標(biāo)、圖片等方面進行設(shè)計走查，設(shè)計語言的規(guī)范化避免因設(shè)計控件混亂而影響設(shè)計輸出。
• 產(chǎn)品組件規(guī)范，目的是建立公司產(chǎn)品的組件庫，組件化同類元素，提高工作效率，以便不同項目的復(fù)用及設(shè)計延展；在同一個項目中也能更好的把控該項目的視覺規(guī)范，提高效率；并且前端實現(xiàn)也能擁有一套可供復(fù)用和擴展的組件庫，也助力上下游交接及團隊協(xié)作。

當(dāng)然了，這些都是頁面一開始著手就要確定的。

五、確定設(shè)計定稿，就是開始開發(fā)了

開發(fā)的過程，需要設(shè)計跟進，不求百分百還原，但是也要達到90%，沒有開發(fā)的配合，你的圖也就是靜態(tài)圖而已，所以，這個過程必須跟進！負(fù)責(zé)等到產(chǎn)品上線， 如果別人吐槽了，但是你的設(shè)計圖確實是設(shè)計的OK的，那你就哭去吧。

以上就是整個網(wǎng)站改版的設(shè)計復(fù)盤了，最后我想說呢，不用一直追求酷炫和復(fù)雜，簡單何嘗不是一種精致。

奧卡姆剃刀原理說過：“如無必要，勿增實體”，即“簡單有效原理”。 所以切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。

正如席克定律所言：人在面臨選擇越多的時候，所要消耗的時間成本越高。

本文由 @liang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議