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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這里就不多敘述了，因?yàn)樵谖铱磥磉@確定需求過程其實(shí)就是打麻將前的洗牌過程，目的是讓你從別的事情或者思緒中平靜下來，注意力轉(zhuǎn)移到這個(gè)需求上的過程。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我覺得啊，這是一個(gè)值得思考的問題，因?yàn)榭蛻舻牟煌?，總是伴隨著這些一點(diǎn)一點(diǎn)的積累開始的，也許現(xiàn)在的顏色，你要克制的顏色總是在改稿情景中出現(xiàn)，打亂你現(xiàn)有的布局。

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

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

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

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

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

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

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

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

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

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