中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章作者復盤了一次舊網(wǎng)站全新設(shè)計的整個過程，其中更多地介紹了過程中的一些思考。

記：第一次改版從2017年9月開始構(gòu)思，到2017年12月上線。再加上此次2018年底的改版（還未上線）來復盤一下一個舊網(wǎng)站的全新更迭的思考過程。如有不當之處，望能指出。

一、項目背景

隨著互聯(lián)網(wǎng)浪潮的推動，我們眼看競爭對手的官網(wǎng)視覺效果越來越好，而我們的官網(wǎng)形象卻一直與時代格格不入，無法突出客服系統(tǒng)產(chǎn)品優(yōu)勢。

恰逢SaaS元年的大爆發(fā)，公司不得不將官網(wǎng)更新提上日程。于是開展了此次項目。

二、信息架構(gòu)重組

1. 老官網(wǎng)信息要點提取

過去十年的網(wǎng)站有一個特點，就是愛將所有信息和入口都放在首頁，雖然說有助于增加內(nèi)容曝光度，但無法在第一時間抓住用戶焦點。順應(yīng)新時代的趨勢，我們需要對信息架構(gòu)進行梳理。

從老網(wǎng)站上，我們可以提取出如下幾個重要信息要點：

2. 信息層級排序

對于初次訪問的訪客來說，重要且高頻的是：注冊、產(chǎn)品列表、咨詢?nèi)肟?、案?解決方案、下載（此外還有 價格 這一重要信息）；

對于老用戶來說，重要且高頻的是：登錄、充值、咨詢?nèi)肟?、下載、我的快服。

因為我們的官網(wǎng)主要是面向新用戶宣傳的，只有少部分老用戶有用官網(wǎng)登錄的習慣，所以初步總結(jié)：

• 一級導航為：注冊/登錄、咨詢?nèi)肟凇a(chǎn)品列表、下載、案例/解決方案、價格；
• 二級為：充值、我的快服、幫助/常見問題、關(guān)于53；
• 三級為：網(wǎng)上營業(yè)廳、友情鏈接、授權(quán)聲明/認證。

3. 通用部分

基于整個網(wǎng)站的通用部分為頁首（頂欄和導航欄）和頁尾（尾部導航和注腳），所以應(yīng)先重列好這幾個部分的信息要點。

頂欄（可以沒有，一般是用于展示網(wǎng)站外的更多信息）：老版的企業(yè)會員數(shù)的不斷刷新，這點確實對于用戶有積極的心理暗示。所以這個特色給予保留。

導航欄：依次為 logo 、首頁、產(chǎn)品列表、案例/解決方案、下載、價格、關(guān)于我們、注冊/登錄。整體布局選擇了最常規(guī)的左logo+菜單+右注冊/登錄入口，減少用戶認知負擔。

（由于我們的幫助中心的問題和回答已經(jīng)很多年沒有更新，重建起來非常的困難，所以我們在價格頁面增加了常見問題模塊，將老的幫助中心鏈接放在頁尾）

尾部導航：放置其他產(chǎn)品鏈接；常見問題、網(wǎng)上營業(yè)廳、會員俱樂部等次級鏈接；公司郵箱電話和微信公眾號等。

注腳：版權(quán)、許可證和網(wǎng)絡(luò)認證。

三、設(shè)計探索

1. 頁面布局/內(nèi)容探索

以首頁為例，確定內(nèi)容的思路：

先思考做這個頁面是為了什么？

→ 告訴訪客我們的產(chǎn)品是干什么的，且行業(yè)優(yōu)勢是什么。

如何寫介紹讓訪客第一時間了解產(chǎn)品？優(yōu)勢如何表現(xiàn)？

→ 直接在banner寫明我們的產(chǎn)品是：會營銷的客服系統(tǒng)。我們的優(yōu)勢：價格低，轉(zhuǎn)化高。

→ 在首頁標明價格和功能，但凡訪客有對比過其他競品，就知道我們產(chǎn)品是真的價格低，功能全。轉(zhuǎn)化高體現(xiàn)在會主動營銷吸引訪客轉(zhuǎn)化。且足夠智能，能幫客服減少大量的時間，讓服務(wù)質(zhì)量提升以促成轉(zhuǎn)化。

其他增加品牌形象模塊：公司資質(zhì)、客戶量、客戶案例展示等。

簡單思考過后，整個模塊布局大概就出來了。

• 頂欄+一級菜單：頂欄放置二級菜單與信息，一級菜單放置logo和各頁面入口、注冊登錄入口；
• banner：產(chǎn)品介紹+配圖+CTA按鈕；
• 各個版本價格+介紹：版本簡介/價格+詳情轉(zhuǎn)跳鏈接，轉(zhuǎn)跳到對應(yīng)頁面；
• 優(yōu)勢功能：介紹產(chǎn)品優(yōu)勢，給訪客建立品牌形象和積極心理認知；
• 注冊入口：注冊輸入框+大客戶品牌案例背書，增加訪客注冊動力；
• 頁尾導航&注腳：友情鏈接和公司聯(lián)系方式；版權(quán)/許可證和網(wǎng)絡(luò)認證，標明網(wǎng)站可信度。

然后，我們需要考慮的是以競品為參考基準，如何在同模塊上做到比競品更好。比如banner文案，怎么介紹才能讓客戶在同時看到我們和競品的網(wǎng)站時選擇我們？

基于這個回答可以繼續(xù)問自己：這個文案突出了我們產(chǎn)品的最大賣點了嗎？各個模塊以此類推。

和同行比較時，有一個思路模板可以套用：人無我有，人有我優(yōu)，人優(yōu)我廉，于此出發(fā)來構(gòu)思會簡單的多。

當然，內(nèi)容層面上，我們起碼要先過了自己這關(guān)，自己覺得做的比競品好了，訪客才有選擇我們的可能。

剩下的頁面也能通過問自己“該頁要達到什么樣的目的？怎么做”來推出模塊結(jié)構(gòu)。當然前提是你要瀏覽過大量的同類網(wǎng)站，對各個模塊做到心中有底。

2. 網(wǎng)站風格探索

有了內(nèi)容，接下來就是設(shè)計風格的確立，很多工具類軟件網(wǎng)站和客服系統(tǒng)競品網(wǎng)站都有的共同點，就是圖形化、配色艷麗，整體風格很年輕，圖形化往往更能直觀的表達產(chǎn)品特性。

要把這個詞變成整個可執(zhí)行的規(guī)范不是可以一步到位的事情。第一步，先確定主題色（如果有傳承的品牌色則無需改動或微調(diào)即可），再具象到網(wǎng)站配圖、圖標等，慢慢的建立起整個風格的雛形。

確定主題色：

最直接的方法就是印象板提取法：確定幾個網(wǎng)站或產(chǎn)品關(guān)鍵詞，并由關(guān)鍵詞開始具象到實物，再在百度上大量搜索相關(guān)圖片。這樣會形成一個大體色。再把這個大體色微調(diào)，作為自己的品牌色即可。

圖標&配圖風格：

配圖的話可以選取一個頁面，大致鋪出各個模塊，稍微做到高保真來進行風格預(yù)覽。高清大圖、手繪風插畫、2.5D、C4D實物構(gòu)圖都可以嘗試，符合自己官網(wǎng)要表達的調(diào)性就行。

圖標的風格確定可以先找出三個需要圖標來表達的關(guān)鍵詞（為什么要選三個？因為三個圖標能看出系列風格的效果，兩個太少，四個的話工作量又太大了），顏色的話可以由品牌色略做擴展，也可少量加入點綴色。

形式上不要太過局限，可參考其他別人的作品，2.5D、長投影、MBE等風格都可以嘗試一下。需要注意的是，圖標和配圖風格最好統(tǒng)一，不然會顯得不倫不類。

在圖標和配圖搭配達到滿意的情況下再對圖標進行微調(diào)衍生以適用于不同場景。

四、規(guī)范制定

在確定好內(nèi)容和風格以后，可以先做一頁高保真網(wǎng)頁來制定出設(shè)計規(guī)范，比如文字顏色大小間距、圖文大小位置等。然后根據(jù)這個規(guī)范來制作其他頁面。

在根據(jù)這個規(guī)則產(chǎn)出其他頁面的時候可能會發(fā)現(xiàn)這個規(guī)范特別局限。這時候就要好好思考一下通用性是否夠好，若不夠好的話就修改。

如果在衍生頁面制作過程中發(fā)現(xiàn)有些情況是規(guī)范中沒有的，那就及時添加上去。這樣下來，自己就有了一套成文的規(guī)范，做起來會更有底些。

五、適配

現(xiàn)在主流的網(wǎng)站都是做自適應(yīng)，即根據(jù)屏幕大小自動來調(diào)整布局?？梢詳U展一個更大的版本和移動版來告訴前端如何去設(shè)置模塊的流動和縮放規(guī)則，比如Apple官網(wǎng)。

當然最重要的是定義好各個元素屬于哪種組件，適配規(guī)則是什么。

1. 設(shè)計稿尺寸

為了預(yù)覽不同屏幕的效果，可基于基礎(chǔ)版本（1200寬，內(nèi)容960）衍生出其他版本設(shè)計稿：

• 版本1：400寬（內(nèi)容320）
• 版本2：960寬（內(nèi)容768）
• 版本3：1200寬（內(nèi)容960）

400px為最小尺寸，小于400時，界面為版本1，固定間距。

大于400小于960時，界面為版本1，隨屏幕變寬自動調(diào)整間距。

大于960小于1200時，界面為版本2，隨屏幕變寬自動調(diào)整間距。

大于1200時，界面為版本3，隨屏幕變寬自動調(diào)整間距。

2. 適配原則

1. 等比縮放：等比縮放指的是該元素的尺寸大小并不是固定的，是會跟隨著屏幕寬度變大而變大。適用于配圖
2. 流性組件：元素尺寸不變，位置或元素間距隨著屏幕的寬度變化。大部分網(wǎng)站主體內(nèi)容都是按照該原則變化。
3. 文字流自適應(yīng)：一行文字的數(shù)量多少和屏幕寬度成正比，屏幕越寬，一行能顯示的文字數(shù)量也就越多。網(wǎng)站大部分的文字都可以保持字體大小不變，數(shù)量變化。僅少數(shù)標題需要變化字體大小。
4. 適當形變：在保持當前結(jié)構(gòu)的情況下，換種形式來表現(xiàn)。比如導航欄適配到移動端的時候就是折疊到一個漢堡圖標中。變化前后的樣式需要保證用戶體驗。

六、搜索優(yōu)化&網(wǎng)頁加載優(yōu)化

1. 搜索優(yōu)化

關(guān)鍵詞優(yōu)化

如百度關(guān)鍵詞，可以在百度站長之家中為自己的頁面添加關(guān)鍵詞，選對關(guān)鍵詞可以增加搜索曝光量。但數(shù)量不能過多，否則可能導致權(quán)重降低?？稍诰W(wǎng)頁代碼的head中的meta標簽→keyword內(nèi)容查看。

搜索結(jié)果優(yōu)化

可以在百度百科建立自己的詞條，建立權(quán)威形象。還有目標用戶群的宣傳推廣，如在百度知道、知乎等平臺就客服系統(tǒng)這一領(lǐng)域多回答和曝光。酒香也怕巷子深，產(chǎn)品再好也需要曝光量。

還有最重要的一條，就是官網(wǎng)搜索詞條優(yōu)化：

例如百度搜索客服系統(tǒng)出現(xiàn)的官網(wǎng)詞條，包含以下四個內(nèi)容：

• 標題：標題在代碼的title中編輯，需簡單清晰有重點，如品牌名和產(chǎn)品類型等。
• 關(guān)鍵圖：關(guān)鍵圖是百度自動抓取你的網(wǎng)站上被點擊最多的一張在一定大小內(nèi)的圖，具有不確定性。但我們可以可在百度站長自己上傳，需清晰出挑，最好能做到在一眾結(jié)果中抓人眼球。
• 描述：可在網(wǎng)頁代碼的head中的meta標簽→description內(nèi)容編輯，簡介是客戶對產(chǎn)品了解的第一步，所以必須要寫一些對客戶來說有吸引力的事實數(shù)據(jù)優(yōu)勢。
• 評價：之前一直是放任自由的狀態(tài)，不打廣告，也不去注意百度評價等，導致好評率和差評率幾乎持平。其實在正常情況下，客戶覺得產(chǎn)品不好用會來差評發(fā)泄的動機比覺得產(chǎn)品好用來好評的動機要大的多的多，且負面評論會導致部分潛在客戶的流失。所以我們可以請客戶來幫忙好評一下，提高星級，有意識的經(jīng)營自己的產(chǎn)品口碑。

2. 頁面加載優(yōu)化

用戶最滿意的打開網(wǎng)頁時間是2-5秒，如果等待超過10秒，99%的用戶會關(guān)閉這個網(wǎng)頁。頁面加載過慢對于訪客初次接觸我們的產(chǎn)品來說是非常不友好的情況。所以對于頁面加載速度的優(yōu)化是必要的。

可以從以下幾點來展開：

1. 合并樣式表和腳本文件；
2. 壓縮組件；
3. 將樣式表放在頭部；
4. 用js事件處理機制來動態(tài)改變元素樣式；
5. 壓縮圖片，用svg代替png和jpg；
6. 使用圖片懶加載；
7. 精簡代碼；
8. 避免重定向。

七、總結(jié)

in a word，整個過程應(yīng)該是先思考信息層級，再推導內(nèi)容，調(diào)整模塊布局，最后再做視覺設(shè)計和規(guī)范制定（當然這是基于老版本的設(shè)計規(guī)范已經(jīng)沒法用的情況下）。

網(wǎng)站上線后，我們還是應(yīng)該多去看別人做的好的網(wǎng)站，分析他到底是哪兒做的比我們好（用戶體驗、視覺效果、信息表達都可以），并思考結(jié)合我們網(wǎng)站的實際情況，融入到設(shè)計中，并控制變量進行效果測試。選擇轉(zhuǎn)化效果好的那一版上線。只有對自己的網(wǎng)站保持批判態(tài)度，才能讓它不被時代拋棄。

其他推薦文章：《學生作品vs商業(yè)產(chǎn)品，差的是什么？》

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

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