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

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

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

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

一、我們網(wǎng)站的用戶是誰呢？1. 從數(shù)量上看，我們官網(wǎng)用戶大致分為三類

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

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

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

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

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

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

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

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

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

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

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

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

三、確定好定位后，確定設計風格

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

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

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

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

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

最后決定設計風格偏向簡潔風。

四、確定好設計風格后，接下來就是研究原型邏輯

設計和產(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. 設計根據(jù)原型，用怎樣的方法進行布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："針對B2B網(wǎng)站改版，我做了一次設計總結(jié)復盤"，僅為提供更多信息供用戶參考使用或為學習交流的方便。我們公司提供：網(wǎng)站建設、網(wǎng)站制作、官網(wǎng)建設、SEO優(yōu)化、小程序制作等服務，歡迎聯(lián)系我們提供您的需求。

網(wǎng)站名稱：針對B2B網(wǎng)站改版，我做了一次設計總結(jié)復盤
網(wǎng)頁鏈接：http://sd-ha.com/news47/315297.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站建設、營銷型網(wǎng)站建設、網(wǎng)站營銷、網(wǎng)頁設計公司、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)