如何改版官網(wǎng)?

時間：2023-10-28 19:24:01 | 來源：網(wǎng)站運營

時間：2023-10-28 19:24:01 來源：網(wǎng)站運營

如何改版官網(wǎng)?：

如何做一個TOB的官網(wǎng)改版

一、背景

企業(yè)產(chǎn)品是商業(yè)產(chǎn)品的一種，即面向企業(yè)市場且以盈利為目的的產(chǎn)品，通常有著業(yè)務(wù)門檻高、決策鏈復(fù)雜、輸出壓力大的特征。企業(yè)的官網(wǎng)服務(wù)于商家、客戶以及有興趣了解該領(lǐng)域的潛在客戶，展示企業(yè)的產(chǎn)品、服務(wù)，傳遞品牌價值等各種能力。區(qū)別于C端的官網(wǎng)，TO B的企業(yè)官網(wǎng)有更重要的商業(yè)價值。

1.1 官網(wǎng)改版目標(biāo)

改版迭代類的項目，核心是要明確改版的動機，現(xiàn)狀如何，解決什么問題，以及最終要達成改版的目標(biāo)是什么。脫離商業(yè)目標(biāo)的改版是沒有意義的，B端的商業(yè)目標(biāo)通常是提高企業(yè)收入、提升業(yè)務(wù)效率、降低運營成本等。企業(yè)官網(wǎng)是潛在客戶了解企業(yè)、了解產(chǎn)品和服務(wù)、聯(lián)系企業(yè)的媒介，如何讓客戶通過官網(wǎng)提升業(yè)務(wù)的轉(zhuǎn)化，是官網(wǎng)改版最核心的目標(biāo)。這里我們可以從用戶、業(yè)務(wù)和品牌視覺層面來拆分目標(biāo)。

用戶層面

區(qū)別于C端產(chǎn)品的界面體驗，TO B產(chǎn)品更重服務(wù)體驗，所以用戶層的目標(biāo)就是圍繞產(chǎn)品提供什么服務(wù)，給用戶解決什么問題，比如：產(chǎn)品核心功能介紹，用戶使用產(chǎn)品的場景，產(chǎn)品如何解決行業(yè)痛點，用戶痛點，產(chǎn)品的價格是否具有競爭力，產(chǎn)品提供的服務(wù)和支持是否全面，解決了用戶的需求，等等。







相較于C端的單一類型用戶，B端的用戶類型比較豐富，也更垂直，不同類型的用戶看產(chǎn)品的視角和目標(biāo)完全不同。在官網(wǎng)產(chǎn)品的改版項目中，我們將B端用戶類型劃分為決策者和使用者，來輔助我們確定用戶層的目標(biāo)。




決策者通常是企業(yè)的老板和管理層，這類人群往往并不是產(chǎn)品的使用者，他們關(guān)注的是產(chǎn)品的商業(yè)價值，性價比如何，是否能給公司帶來利益最大化，而對于使用者：公司的中高層領(lǐng)導(dǎo)、項目負責(zé)人以及普通員工，關(guān)注的重點是產(chǎn)品使用上的問題，是否滿足業(yè)務(wù)場景，使用效率等等問題。而現(xiàn)在B端C化的趨勢，很多產(chǎn)品的轉(zhuǎn)化是由使用者有了試用的機會，進而推薦給決策者，還有決策者和使用者的邊界越來越模糊的現(xiàn)象，因此，我們不但要服務(wù)好高價值的決策者用戶的核心訴求，同時也不能忽視產(chǎn)品使用者的痛點，對于低價值的次要使用者、間接使用者這類用戶，不用專門考慮為其設(shè)計，以通用的信息版塊支持即可。







獲取用戶目標(biāo)的方式可以采用深度訪談、電話采訪、問卷等形式，或者公司資源有限的情況下，結(jié)合行業(yè)信息和公司的線上數(shù)據(jù)進行整理。

將用戶群體的目標(biāo)分類規(guī)整后，可以確定官網(wǎng)相應(yīng)的內(nèi)容和信息層級，達到有目的的傳達和有效轉(zhuǎn)化。

業(yè)務(wù)層面

從業(yè)務(wù)角度來說，結(jié)合對目標(biāo)群體的痛點和需求點，展示企業(yè)的產(chǎn)品價值，核心優(yōu)勢，投入產(chǎn)出等，將這類信息「貨」通過在特定的頁面/版塊「場」內(nèi)，推送給相應(yīng)的用戶「人」，所以打造信息分層，讓不同需求的目標(biāo)用戶快速匹配并認同產(chǎn)品價值，從而引導(dǎo)訪客留資，完成轉(zhuǎn)化。

如何打造頁面的信息分層，引導(dǎo)用戶快速轉(zhuǎn)化，在下面版塊具體改版步驟中會做詳細拆解。

品牌視覺層面

官網(wǎng)的價值除了直接的轉(zhuǎn)化目標(biāo)之外，還有打造專業(yè)性，樹立品牌形象。影響了用戶對企業(yè)/產(chǎn)品的認知和感受。網(wǎng)站整體的色系、設(shè)計風(fēng)格、品牌元素、圖標(biāo)風(fēng)格、版塊內(nèi)容布局等等組成最終呈現(xiàn)給用戶的品牌形象。好的品牌形象會給用戶留下深刻印象，是獲得認同感的基礎(chǔ)，影響用戶最終的轉(zhuǎn)化。品牌風(fēng)格和視覺表現(xiàn)需要考慮到企業(yè)及產(chǎn)品的整體定位，公司戰(zhàn)略業(yè)務(wù)場景等等。

二、改版步驟

2.1 常見問題

在我們著手改版前，對當(dāng)前線上官網(wǎng)的問題梳理一下，確定目前存在的問題，才可以知道如何針對性的去改版優(yōu)化。通常會有以下幾個典型的問題：










結(jié)構(gòu)框架、信息層級不合理

官網(wǎng)的框架結(jié)構(gòu)，版塊布局就是給用戶講故事，用戶進入到官網(wǎng)，讓用戶從初步了解到產(chǎn)生興趣、價值認同最后成為付費用戶，是官網(wǎng)該有的敘事邏輯，如果只是根據(jù)業(yè)務(wù)的需求，在頁面上只是功能版塊的堆疊，沒有邏輯，沒有差異化的信息層級區(qū)分，那將很難有轉(zhuǎn)化。




視覺體驗差，缺乏品牌調(diào)性

官網(wǎng)的設(shè)計語言構(gòu)建，品牌定位、風(fēng)格是用戶對企業(yè)、產(chǎn)品最直接的印象，TO B的企業(yè)官網(wǎng)通過頁面的風(fēng)格體現(xiàn)產(chǎn)品的定位，傳遞專業(yè)度、信任感。同時，隨著互聯(lián)網(wǎng)設(shè)計的發(fā)展，也出現(xiàn)了更多的表現(xiàn)形式，比如3d風(fēng)、輕質(zhì)感，還有實時渲染互動的交互，讓用戶更容易理解業(yè)務(wù)場景，加深認知。




跳失率高，轉(zhuǎn)化低

轉(zhuǎn)化低是數(shù)據(jù)的呈現(xiàn)，也是衡量官網(wǎng)亟需改版的最直接原因，用戶的轉(zhuǎn)化路徑越長跳失率越高，轉(zhuǎn)化的目標(biāo)最好只定一個，在官網(wǎng)的設(shè)計中，所有的元素有為轉(zhuǎn)化目標(biāo)服務(wù)，但是現(xiàn)實情況可能不能避免多個目標(biāo)，那么這種情況就一定要分好主次，在信息分層、內(nèi)容布局、視覺處理上都要突出最主要的轉(zhuǎn)化目標(biāo)。

2.2 頁面重構(gòu)，信息層級優(yōu)化

官網(wǎng)的首頁至關(guān)重要，是訪客進入的第一個頁面，內(nèi)容上信息精準(zhǔn)并高效傳達給用戶，說白了就是放什么和怎么放，要有清晰的敘事邏輯，這里我們借助營銷中的AIDA模型，構(gòu)建官網(wǎng)的頁面版塊搭建：













Andrew Chak在“Sumit Now：Designing Persuasive Websites”（立即提交：設(shè)計有說服力的網(wǎng)站）一書中把這四個階段對應(yīng)到網(wǎng)站的四類用戶：

瀏覽者：Attention階段，瀏覽信息，引起注意，但沒有深入了解
評估者：interest階段，開始有興趣了解詳情，關(guān)注價格
交易者：Desire階段，有購買意愿，甚至物品都放入了購物車。
購買者：Action階段，已經(jīng)達成購買行為

我們可以看到市面上的優(yōu)秀TOB官網(wǎng)的首頁信息結(jié)構(gòu)也是大多按照這樣的“套路”進行信息結(jié)構(gòu)設(shè)計的，模仿用戶進入到首頁后，按照這樣的瀏覽順序?qū)訉由钊耄寒a(chǎn)品初識——逐步了解——強化認知——打消疑慮——轉(zhuǎn)化付費。










首焦——通常展示企業(yè)的產(chǎn)品/服務(wù)，給來訪者一個初步印象，核心業(yè)務(wù)——展示企業(yè)的核心價值，差異化競爭力優(yōu)勢，同下一版塊的產(chǎn)品介紹，給用戶一個加深的印象，產(chǎn)品的詳細的功能、應(yīng)用場景的展示讓用戶更了解產(chǎn)品，做出心里預(yù)期，是否滿足了用戶訴求。緊接著用業(yè)務(wù)數(shù)據(jù)，案例佐證，售后服務(wù)，品牌背書這些版塊一步步，循序漸進讓用戶打消疑慮，加深對產(chǎn)品的信任，產(chǎn)生購買欲望，這時候，再及時給予留資入口，進而達到轉(zhuǎn)化目的。

2.3 突出重點版塊，縮短轉(zhuǎn)化路徑

企業(yè)官網(wǎng)除了露出產(chǎn)品的功能，還要打造產(chǎn)品差異化的核心價值，結(jié)合頁面整體來看，提升高價值信息展示優(yōu)先級，讓用戶更快發(fā)現(xiàn)有利于轉(zhuǎn)化的內(nèi)容，所以在表現(xiàn)形式上，為了提升信息呈現(xiàn)與觸達的效率，可以用更加豐富的信息緯度替換單一的表格、圖文的信息呈現(xiàn)形式，比如視頻、動圖，讓用戶能在單位時間里獲取更多的信息量，也更易理解，加深對產(chǎn)品的記憶。還有可人機交互的模塊，實時與用戶互動，親自體驗產(chǎn)品的業(yè)務(wù)場景，和產(chǎn)品性能。










輕流首屏的視頻動態(tài)，更形象的演示了業(yè)務(wù)流程和場景







在成功引起用戶的興趣，想要在該節(jié)點做出行動時，要看時機適時“收網(wǎng)”，有幾種方式引導(dǎo)用戶快速轉(zhuǎn)化：

（1）設(shè)置即時行為召喚按鈕，比如首焦banner上的產(chǎn)品試用按鈕，頁面右側(cè)懸浮的客服聯(lián)系入口，首屏吸底的留資快速入口等等。

這里在文案上可以有一點“小心機”，讓用戶更多的點擊CTA按鈕，比如創(chuàng)造一種稀缺感，人們在面對稀缺性資源的時候都會有一種緊迫感，讓用戶想要趕緊先占位，快速做決定。










另外提高價格錨定也是一種快速讓用戶下單的方法，TO B的用戶會考慮投入產(chǎn)出，性價比，購買是否劃算，這時候如果給用戶一個對比下有價格優(yōu)勢的產(chǎn)品，用戶就會容易接受










（2）信息錄入精簡，需要用戶錄入信息填寫的內(nèi)容，盡量簡單、清晰、高效，避免流程復(fù)雜、繁瑣讓用戶在錄入過程中感到枯燥乏味，容易流失。比如在留資的表單填寫模塊，盡量把無用、不重要的信息做刪減，縮短用戶填寫的信息量和時長，提高用戶填寫任務(wù)的完成效率。

2.4 視覺拆解

官網(wǎng)常見布局樣式

（1）版心式布局

版心式布局就是頁面的內(nèi)容展示在頁面的中央，首焦的視圖可能會根據(jù)瀏覽器寬度進行適配，但是有效顯示 區(qū)域是頁面的中間區(qū)域，這種布局樣式通常是基于前端實現(xiàn)考慮的，設(shè)計也只需出一套方案，雖然屏幕的利用率沒有達到最高，但是不需要考慮適配的問題，也很少會出現(xiàn)兼容出錯的情況，是很多傳統(tǒng)企業(yè)、政府類網(wǎng)站常常采用的布局方式，也有很多企業(yè)出于自身情況，本身內(nèi)容較精簡，或開發(fā)資源的問題，也會采用這種布局。







這種布局方式的優(yōu)點是對于設(shè)計師和前端開發(fā)都是最簡單的，按照標(biāo)準(zhǔn)寬度一種px尺寸設(shè)計，低于顯示屏寬度就居中展示，兩邊留白。超過屏幕寬度時橫滑，不用考慮適配的問題，也沒有兼容性問題。缺點也是顯而易見的，在大屏的顯示器上不能利用好空間，浪費屏效。小屏幕被遮擋的畫面影響用戶的瀏覽體驗和閱讀效率。




（2）自適應(yīng)布局

這種布局樣式就是考慮到了差別較大的屏幕尺寸上的展示效果，在視覺風(fēng)格中我們可以明顯感覺到這種布局會因為頁面寬度的不同而呈現(xiàn)不同的布局樣式。這種布局的優(yōu)點正好是固定布局所達不到的，可以在不同尺寸顯示屏中都有最佳的屏效和展示效果，缺點是在實際項目實踐中，對設(shè)計來說，需要輸出多張設(shè)計圖和設(shè)計規(guī)范。同時，前端開發(fā)也要面臨復(fù)雜的判斷和條件限制。










（3）分屏布局

分屏布局的特點是一屏只展示一個重點信息，翻頁時自動切換一屏，適合多個同等權(quán)重信息的展示。常見的應(yīng)用場景有奢侈品、電子產(chǎn)品、酒店民宿類的官網(wǎng)。這種布局樣式的優(yōu)點是信息非常聚焦，一屏詮釋一個重點，讓用戶沉浸式瀏覽，弊端也是很明顯的，單屏的信息密度太低，想要展示更多信息需要用戶主動下拉切換，同時這類布局沒有普適性，僅限某些特定行業(yè)和為了達到某些品牌定位和風(fēng)格。

內(nèi)容密度選擇

緊湊、適中和寬松的內(nèi)容排版，在同樣的屏幕尺寸內(nèi)展示的信息量是遞增的，恰當(dāng)?shù)男畔⒚芏?，展示不同的信息差異化，比如門戶網(wǎng)站，電商類的首頁作為一個平臺，業(yè)務(wù)的訴求應(yīng)該是在有限的空間內(nèi)給最多的商家曝光，給用戶最大化的瀏覽效率，最快定位到目標(biāo)入口，快速進行流量分發(fā)，那么可以采用緊湊型的內(nèi)容密度。而大部分的企業(yè)官網(wǎng)是展示自己的核心產(chǎn)品和服務(wù)，沒有那么多的信息量需要占據(jù)首屏，因此適中的內(nèi)容密度適用于大多的企業(yè)官網(wǎng)。那寬松的內(nèi)容密度適合什么樣的企業(yè)呢？當(dāng)企業(yè)以宣傳品牌影響力為官網(wǎng)主要目標(biāo)，首頁的信息量比較少，想要突出品牌調(diào)性，這時，以大量的圖片、場景為元素，詮釋公司的品牌理念，給用戶有沉浸式的體驗。比如電子產(chǎn)品的官網(wǎng)，奢侈品行業(yè)，簡約風(fēng)的家居品類，民宿、酒店產(chǎn)業(yè)等等。

視覺表現(xiàn)風(fēng)格

B端的企業(yè)與產(chǎn)品有明顯的行業(yè)特性，所以在視覺風(fēng)格上，不僅要體現(xiàn)行業(yè)性質(zhì)，品牌風(fēng)格，產(chǎn)品屬性，還要避免同質(zhì)化，視覺上要有記憶點，與同行業(yè)競品拉開差距。TO B的產(chǎn)品用戶群體更多是偏向理性的購買者，更關(guān)注品牌的權(quán)威性、可信度以及帶來的價值。




隨著我們B端市場的產(chǎn)品多樣化，新興產(chǎn)業(yè)的崛起和被關(guān)注，還有設(shè)計流行趨勢的更新迭代，開發(fā)技術(shù)的成熟，設(shè)計師可發(fā)揮的空間也更加自由和靈活，以下為大家介紹幾種流行的官網(wǎng)視覺風(fēng)格類型。







（1）3D風(fēng)

C4D、Blender等設(shè)計軟件的普及帶火了游戲行業(yè)、運營設(shè)計3D風(fēng)的流行，逐漸在C端市場如野火燎原的趨勢占領(lǐng)高地，受到追捧。超現(xiàn)實的質(zhì)感、3維立體的空間感，如臨其境的既視感確實將表現(xiàn)力拉滿，帶來很強的視覺沖擊和沉浸感。在Z時代逐漸成為時代主流時，B端的一些企業(yè)也開始重視用戶的偏好，設(shè)計師之間的較量也卷到了B端的視覺表現(xiàn)。













B端企業(yè)運用3D風(fēng)格較多是在云產(chǎn)品、物聯(lián)網(wǎng)、大數(shù)據(jù)、數(shù)字孿生等行業(yè)，這類官網(wǎng)對視覺的表現(xiàn)要求很高，但產(chǎn)品又很難用具象的實物來表現(xiàn)，所以3D技術(shù)的成熟為這類企業(yè)的官網(wǎng)呈現(xiàn)帶來了曙光。

比如騰訊云官網(wǎng)的設(shè)計，在Banner、圖標(biāo)、核心產(chǎn)品模塊展示、業(yè)務(wù)場景應(yīng)用上，3D元素將云平臺的行業(yè)屬性、科技感的產(chǎn)品特征，以及傳遞給用戶的空間感都完美表達出來，同時在首焦用可人機交互的互動效果，PC端用鼠標(biāo)hover時圖形變化，交互反饋，讓用戶有很好的互動感。










騰訊云的首焦用3D風(fēng)塑造了云產(chǎn)品的具體形象，鼠標(biāo)交互，能與之互動




因為3D軟件相較一般制作二維設(shè)計圖的軟件來說，還是會有一些操作門檻，如果沒有基礎(chǔ)的設(shè)計師也不必強行讓自己具備3D設(shè)計的能力，目前也有很多更簡便、“偷懶”的技巧可以實現(xiàn)3D化。不必太過焦慮而盲目追風(fēng)花費大量時間精力研究軟件技能。




（2）插畫風(fēng)

同樣有產(chǎn)品實物展示難題的困擾，但基于行業(yè)性質(zhì)、品牌定位問題、技術(shù)實現(xiàn)等方面的原因，還可以采用插畫的表現(xiàn)形式。在擬物化向扁平風(fēng)格轉(zhuǎn)型的10年來，扁平插畫的設(shè)計早已深入人心，用插畫的元素表現(xiàn)抽象的，模糊的產(chǎn)品/服務(wù)，塑造品牌品牌形象。將信息用圖形化方式直觀的傳達給用戶，不僅降低了理解門檻，還能將品牌形象更深入人心，比如像教育類、人工智能、車載類的系統(tǒng)會塑造一個IP形象，以具象化、擬人的形象拉進與用戶的距離，也傳達了品牌的定位和認知。







有了IP形象，可以在一切可以展示的場合體系化的表現(xiàn)情感化設(shè)計，比如聯(lián)系客服的對話彈窗，錯誤提示、空狀態(tài)等等。將品牌的形象更加深化，給用戶深刻的品牌認知。




（3）實景配圖

文字配合實景圖的設(shè)計方式在官網(wǎng)的設(shè)計上也是非常常見的，這種風(fēng)格能傳遞真實感，能拉進與用戶距離，從而給用戶信任感。比如一些傳統(tǒng)實業(yè)，展示企業(yè)實力，企業(yè)的效能。家居、酒店類的企業(yè)，用實景圖給用戶打造了身臨其境的氛圍感，舒適、溫馨的家居質(zhì)感，高級、有調(diào)性的設(shè)計風(fēng)格，是可以直抵用戶的內(nèi)心訴求的。還有科技產(chǎn)品的企業(yè)官網(wǎng)，也會喜歡用產(chǎn)品的實物圖展示，這也是抓住了用戶的核心訴求，一些電子產(chǎn)品發(fā)燒友，最關(guān)注的就是產(chǎn)品本身。加上明星代言的形象和產(chǎn)品結(jié)合，將粉絲效應(yīng)帶動產(chǎn)品銷量，是一波成功的營銷。







實拍圖的設(shè)計風(fēng)格，對圖片的質(zhì)量要求非常高，不但要體現(xiàn)產(chǎn)品的核心價值，功能場景，還要詮釋品牌的定位、調(diào)性，構(gòu)圖如何呈現(xiàn)視覺美感，產(chǎn)品品質(zhì)和質(zhì)感的體現(xiàn)，傳遞的品牌形象都是需要考慮的重點。

品牌升級，設(shè)計語言系統(tǒng)落地

因為TO B企業(yè)的產(chǎn)品服務(wù)成本一般都較高，在對產(chǎn)品未知的線上平臺，官網(wǎng)必須最大化透傳品牌的行業(yè)知名度，業(yè)務(wù)穩(wěn)定性等差異化優(yōu)勢，才能在用戶心理增強購買的決心。官網(wǎng)的整個設(shè)計語言系統(tǒng)應(yīng)包含品牌基因+設(shè)計規(guī)范+多場景應(yīng)用。










品牌升級并不是倉促的改改顏色、樣式，優(yōu)化一下logo之類，而是在充分理解業(yè)務(wù)、用戶、品牌三方的背景之下，定義設(shè)計規(guī)則，落地設(shè)計元素。




品牌升級策略有其獨特性，本文中不作贅述，在此延展說一下設(shè)計規(guī)則應(yīng)該如何落地。

我們常見一些設(shè)計團隊通用一套“清晰、簡潔、高效”以不變應(yīng)萬變，但這僅僅是基礎(chǔ)的原則，太過看寬泛，無法很好的應(yīng)用落地在實際的項目中。

設(shè)計原則應(yīng)該貼近業(yè)務(wù)，真實有效，比如工業(yè)類實業(yè)的企業(yè)，應(yīng)突出其智造、安全、有實力的產(chǎn)品定位，云平臺的企業(yè)突出其專業(yè)、效率、先進，這才是更貼近業(yè)務(wù)的設(shè)計規(guī)則，然后根據(jù)精準(zhǔn)定位的關(guān)鍵詞進行設(shè)計延伸。

避免同質(zhì)化的設(shè)計元素：圖標(biāo)、配圖、文字設(shè)計等，應(yīng)結(jié)合品牌找到記憶點，讓用戶一眼能識別，留下深刻印象。比如IP形象的流行，衍生出的一套設(shè)計語言，帶給用戶很強的品牌記憶。

2.5 適配問題

一個企業(yè)級的官網(wǎng)一定涉及在多端展示的問題，為保證在不同屏幕機型上的顯示效果，我們還要考慮多端適配。前文提到的布局樣式是以頁面樣式的維度，在這里我們以實現(xiàn)維度，站在前端開發(fā)的角度上，針對不同的布局樣式拆解適配問題：




（1）固定布局

固定布局決定了不需要考慮適配問題，不管瀏覽器尺寸多少，網(wǎng)頁的頁面內(nèi)容始終按照固定的絕對寬度（px）居中展示，不過移動端還是需要另外設(shè)計一套方案，分開實現(xiàn)。這類布局的優(yōu)缺點在前文已闡釋，不作復(fù)述。

此處為語雀視頻卡片，點擊鏈接查看：本站.mov

本站的PC端采用固定布局




（2）流式布局

這種布局樣式的特點是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。典型代表是柵格系統(tǒng)，使用百分比定義寬度，通常配合最大和最小寬度等屬性控制尺寸流動范圍，以免過大或過小影響閱讀體驗。這種布局樣式被普遍應(yīng)用，規(guī)則較為簡單，也能適配分辨率相差不大的屏幕。不過缺點是假如屏幕尺寸跨度太大，那么在與原始設(shè)計尺寸相差過大的屏幕上顯示還是問題很大，因為寬度按照百分比定義，但高度和文字大小還是px固定大小，那么在寬屏尺寸下頁面元素寬度被拉的很長，但高度文字還是保持原樣，顯得很不協(xié)調(diào)。

此處為語雀視頻卡片，點擊鏈接查看：流式布局.mov







（3）自適應(yīng)布局

這種布局的特點是分別為不用的屏幕分辨率定義布局，相對而言，是“個性化定制”。即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。改變屏幕分辨率即切換不同的靜態(tài)布局方案。這種布局的特點是屏幕分辨率變化時，頁面里的元素位置會變化，但大小不會發(fā)生變化。




（4）響應(yīng)式布局

響應(yīng)式布局是糅合了流式布局和彈性布局，分別為不同的屏幕分辨率定義布局，同時在每個布局中，應(yīng)用流式布局的理念，每個屏幕分辨率下會有一個布局樣式，即頁面元素寬度隨著窗口調(diào)整而自動適配。響應(yīng)式布局的目標(biāo)是確保一個頁面在所有終端上（包括PC端和移動端）都能顯示出滿意的效果，這種布局是優(yōu)秀頁面布局的標(biāo)準(zhǔn)。

不過缺點是只能適應(yīng)主流的屏幕尺寸，并且要匹配足夠多的屏幕大小，設(shè)計師和前端的工作量都很大。

此處為語雀視頻卡片，點擊鏈接查看：響應(yīng)式.mov

騰訊云的官網(wǎng)采用響應(yīng)式布局，同時適配PC、PAD和移動端




（5）彈性布局

彈性布局的特點是包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」），簡單說就是寬度自適應(yīng)，但高度沒有自適應(yīng)。彈性布局和響應(yīng)式布局之間的區(qū)別是：改變?yōu)g覽器寬度，頁面所有元素的寬高都等比例縮放，也就是大屏幕下導(dǎo)航如果橫向排列，小屏幕上同樣橫向排列。而響應(yīng)式布局是根據(jù)不同尺寸范圍改變布局的樣式。所以在適配的屏幕寬高比和原本設(shè)計的寬高比相差不大時，可以呈現(xiàn)很好的適配效果，反之，效果不理想。




此處為語雀視頻卡片，點擊鏈接查看：彈性布局.mov

?？低暤墓倬W(wǎng)彈性布局表現(xiàn)形式

三、數(shù)據(jù)搜集，驗證優(yōu)化

在團隊合力完成官網(wǎng)項目的改版上線之后，除了關(guān)注改版的業(yè)務(wù)目標(biāo)、設(shè)計目標(biāo)是否達到預(yù)期，還應(yīng)該注意搜集線上的數(shù)據(jù)，與改版前的用戶行為路徑，PV/UV、停留時長、點擊率等多方面對比，看數(shù)據(jù)上是否與預(yù)期的設(shè)計有出入，并針對問題分析原因，給出優(yōu)化方案作為下次優(yōu)化的依據(jù)。













除了線上的數(shù)據(jù)，如果再進一步完善信息搜集，可通過問卷調(diào)研，明確用戶畫像，了解用戶對新版本的滿意度、線上問題的針對性調(diào)研，同時在企業(yè)內(nèi)部，征集運營、產(chǎn)研、市場等職能部門的建議和反饋，整理需求，分析反饋意見的合理性，是否真實落地，對合理的意見、需求給出解決方案，與團隊內(nèi)部溝通進優(yōu)化迭代，進一步完善線上官網(wǎng)。

四、寫在最后

官網(wǎng)改版的項目是公司內(nèi)部眾多項目的一個縮影，考驗團隊從戰(zhàn)略分解，到落地執(zhí)行的能力，這里希望每個職能的小伙伴擁有主人翁意識，靠譜的合作伙伴、踴躍積極的為共同目標(biāo)出謀劃策，發(fā)揮其專業(yè)特長，認真負責(zé)，有極客精神，在客觀條件有限的情況下，可以攻克逆境，發(fā)揮凝聚力，那么最后的結(jié)果一定帶來可喜的回饋，同時安利大家可以寫復(fù)盤的文章，設(shè)計同學(xué)整理設(shè)計資產(chǎn)沉淀，在后期項目中能夠再次復(fù)用。輸出是最好的輸入方式，項目的積淀也會讓你成為發(fā)揮最大價值的人，助力你的成長。