本篇文章通過各種實例，詳細地為大家介紹了PC端產(chǎn)品如何構(gòu)建安全感，以及其可用性設(shè)計的原則。

近一兩年，對于PC端的產(chǎn)品設(shè)計的討論遠遠不及移動端的熱鬧。

依據(jù)艾瑞咨詢的數(shù)據(jù)，2017年上半年，PC端使用人群大概在5.2億上下，其中在線視頻、綜合門戶、網(wǎng)上購物網(wǎng)站占據(jù)更多網(wǎng)民的瀏覽時間。

2017年上半年P(guān)C端數(shù)據(jù)

PC端逐漸趨向場景PC， 是否要花功夫在PC端，要花多少功夫，可以參考以下內(nèi)容作為思考的輔助：

一、第一性原理

在決定是否要做某件事前，先確定你的目的，以及做這件事所花費的成本和目的是否匹配。

搭建產(chǎn)品官網(wǎng)，目的通常離不開這兩點之一或二：

1. 可用性：

基于PC端的使用場景，官網(wǎng)本身作為產(chǎn)品使用的一種重要形態(tài)，提供在PC端進行完整全流程操作的功能，且移動端無法替代的體驗。

如：新媒體使用電腦端進行文章編輯、粉絲管理，辦公群體挑選公司福利商城商品，宿舍內(nèi)大家聚一起看劇看球賽等。

同時，某些環(huán)節(jié)允許PC端與移動端的交互搭配使用，如登錄、付款等環(huán)節(jié)由移動端進行掃碼執(zhí)行。

2. 安全感：

告知用戶你是誰、你提供什么、為什么選你，包括公司介紹、品牌實力介紹、產(chǎn)品/商品介紹、動態(tài)資訊等。

當用戶還不知道你是誰或不確定你是否被社會信用所肯定時，網(wǎng)絡(luò)搜索成為你和用戶之間的連接，傳達的是品牌、產(chǎn)品實力上的安全感和公信力。

當我們討論是否要搭建產(chǎn)品官網(wǎng)，要搭建成什么模樣，要考慮的是核心目的和實際可調(diào)配的資源之間的平衡。

1. 缺乏開發(fā)資源，用戶進行網(wǎng)絡(luò)搜索時能看到大致介紹：利用新聞通稿和百度百科等工具即可。溫城輝在一次線下分享會提到一種有趣的現(xiàn)象：“沒有被大眾點評收錄的餐廳仿佛沒有存在過?！痹诰W(wǎng)絡(luò)成為信息相對公開的工具之一的時代，利用網(wǎng)絡(luò)工具找到你的用戶，也讓用戶找到你。
2. 有開發(fā)資源但不想耗費精力在PC端功能上：把你提供的產(chǎn)品/服務(wù)介紹提煉到官網(wǎng)，充分利用搜索引擎的特性來發(fā)揮官網(wǎng)的作用。讓你和用戶之間的距離再近一點。
3. 有富足的開發(fā)資源，或PC端非常切合你所提供的產(chǎn)品/服務(wù)的使用場景：兼容可用性和安全感，重視官網(wǎng)內(nèi)的產(chǎn)品介紹和產(chǎn)品功能，難度不輸移動端產(chǎn)品。

二、官網(wǎng)安全感構(gòu)建的基本要素

目的：

（1）清晰告訴用戶：你是誰、你提供什么、為什么選你

（2）在保證第1點后，盡可能從網(wǎng)站設(shè)計中進行搜索引擎優(yōu)化

實操：

整理以下常規(guī)做法以及對應(yīng)的案例，以供參考。

1. 官方介紹可通過“5W1H1E”法梳理，可根據(jù)實際需求選擇：

What（產(chǎn)品是什么）：

微眾銀行官網(wǎng)首頁首屏即開門見山地用一句話描述產(chǎn)品本質(zhì)——騰訊牽頭發(fā)起設(shè)立的銀行，由此可以簡單理解微眾銀行是互聯(lián)網(wǎng)巨頭發(fā)起且干的是銀行/金融的事情，清晰明了不啰嗦

微眾銀行官網(wǎng)首頁

Who（誰創(chuàng)造了它）：

提供官方介紹、網(wǎng)站版權(quán)說明以及企業(yè)高管站臺等。

官方介紹包括公司介紹、品牌主張、產(chǎn)品動態(tài)資訊、媒體報道、歷史榮譽等

【公司介紹】網(wǎng)易-公司簡介

瑞幸咖啡-關(guān)于我們-品牌主張

產(chǎn)品動態(tài)資訊：QQ官網(wǎng)-動態(tài)

【歷史榮譽】招聯(lián)金融-關(guān)于我們-榮耀榜

網(wǎng)站版權(quán)說明：包括版權(quán)歸屬、資質(zhì)證明等。

版權(quán)說明的正確格式：Copyright [dates] by [author/owner]。

以騰訊官網(wǎng)為例：Copyright ? 1998 – 2018 Tencent. All Rights Reserved.騰訊公司 版權(quán)所有

【版權(quán)說明】騰訊官網(wǎng)

以蘋果官網(wǎng)為例： Copyright ? 2018 Apple Inc. 保留所有權(quán)利

【版權(quán)說明】蘋果官網(wǎng)

資質(zhì)證明可使用外鏈的方式，以PPmoney為例，以第三方權(quán)威證明增強官網(wǎng)公信力：

工業(yè)和信息化部ICP/IP地址/域名信息備案管理系統(tǒng)：http://www.miibeian.gov.cn/state/outPortal/loginPortal.action;jsessionid=9TuzJMT6OUaeRX4VF37b2OpIX1fIF6VdzF8zWW-Qzp0IJKIgEJzs!-1613082564

廣東省公安廳政務(wù)網(wǎng)：http://www.gdnet110.gov.cn/

360網(wǎng)站安全檢測：http://webscan.#/index/checkwebsite/url/檢測官網(wǎng)地址

誠信網(wǎng)站認證書：https://credit.cecdc.com/CX20130826002735003003.html

中網(wǎng)可信網(wǎng)站權(quán)威數(shù)據(jù)庫：http://t.knet.cn/index_new.jsp

Itrust互聯(lián)網(wǎng)信用認證：http://www.itrust.org.cn/Home/Index/itrust_certifi?wm=1591537685

品牌寶企業(yè)信譽評級證書：https://v.anquan.org/cert/site/?site=www.ppmoney.com&at=business

廣州市網(wǎng)絡(luò)商品交易與服務(wù)監(jiān)管平臺：http://netadreg.gzaic.gov.cn/ntmm/WebSear/WebLogoPub.aspx?logo=0c0fd83947924d5484cbf367f77f38b

【資質(zhì)證明外鏈】PPmoney

玖富官網(wǎng)則在首頁頂部露出其已經(jīng)工信部認證聯(lián)盟認證為實名網(wǎng)站的信息

玖富官網(wǎng)首頁

企業(yè)高管站臺：若創(chuàng)始人、董事長等高管具備公關(guān)價值，讓他們?yōu)楫a(chǎn)品站臺也是重要的策略之一

微眾銀行-關(guān)于我們-股東和管理層

When（產(chǎn)品的重要節(jié)點）：

展示產(chǎn)品的發(fā)展歷程

微眾銀行-關(guān)于我們-微眾里程碑

Why（為什么選擇它）：

表現(xiàn)產(chǎn)品核心功能的獨特賣點，做好兩點，說人話（共情）和提煉。

“溝通，是跨越千山萬水的親切聲音”是說人話，表達/喚起與用戶一致的同理心，“兩人、多人通話”“群組通話”“屏幕分享”是QQ作為通訊工具的功能提煉。兩者結(jié)合作為產(chǎn)品獨特賣點的文案闡述

QQ官網(wǎng)首頁

How（怎么使用）：

提供不同形態(tài)的產(chǎn)品使用、下載方式。以QQ為例：

iOS版跳轉(zhuǎn)至蘋果應(yīng)用市場鏈接：https://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8

Windows Pad、Phone版跳轉(zhuǎn)至鏈接：https://www.microsoft.com/zh-cn/p/qq/9wzdncrfj1ps?rtc=1&activetab=pivot:overviewtab

PC版、Mac版、安卓版等下載對應(yīng)的文件包

【下載】QQ國際PC版

【下載】QQ Mac版

除了專門的應(yīng)用下載頁，許多官網(wǎng)會通過結(jié)合營銷利益誘惑用戶使用移動端掃碼下載APP

網(wǎng)易嚴選首頁-引導(dǎo)下載APP

Where（還可以在哪里可以找到它）：

提供全媒體渠道，以insta360為例，列舉其Facebook、Instagram、Twitter、youtube、公眾號、微博、優(yōu)酷等入口

Else（其他）：

例如客服中心、問題反饋、人力機構(gòu)招募（經(jīng)銷商、推廣大使、人才招聘）等。

2. 為了搜索引擎優(yōu)化（SEO），可根據(jù)實際需求選擇：

《跟我學(xué)SEO從入門到精通》：SEO的目的是通過在搜索引擎的排名獲得流量。

搜索引擎的工作原理簡單而言，是搜索引擎蜘蛛是抓取網(wǎng)站頁面的程序，通過抓取關(guān)鍵詞，決定收錄，賦予權(quán)重，并生成排名。

明確優(yōu)化指標：

通過第三方數(shù)據(jù)工具來定義指標。

收錄量是搜索引擎對網(wǎng)站頁面的收錄數(shù)據(jù)，直接搜索Site:www.xxxx.com，查看收錄數(shù)

【百度收錄數(shù)】瑞幸咖啡

站長工具：http://tool.chinaz.com

【站長工具】PPmoney數(shù)據(jù)

愛站網(wǎng)（反鏈查詢）：https://www.aizhan.com

愛站網(wǎng)-反鏈查詢

權(quán)重影響因素：

也是為了SEO，我們能做的事。

①域名：域名統(tǒng)一、位數(shù)少、組合方式單一（首選純數(shù)字、其次純字母）。

②服務(wù)器：健康狀況（同一服務(wù)器同一IP網(wǎng)段健康狀況）、訪問穩(wěn)定性、訪問速度、功能支持。

③網(wǎng)站層級結(jié)構(gòu)：保證網(wǎng)站內(nèi)所有頁面鏈接地址在三層以內(nèi)。

④內(nèi)鏈建設(shè)：TKD設(shè)置、熱門推薦、錨文本鏈接、面包屑（便于用戶確認當前訪問層級）、網(wǎng)站地圖（利于蜘蛛抓?。?、站內(nèi)搜索（提升訪問效率）、避開死鏈如404等

網(wǎng)易嚴選-熱門推薦

PPmoney-面包屑

蘋果官網(wǎng)-網(wǎng)站地圖

京東金融-站內(nèi)搜索

新東方-站內(nèi)搜索

⑤內(nèi)容質(zhì)量：文章字數(shù)適度（800-1500）、可讀性（通順連貫）、文章排版（盡量用分標題形式）、加入錨文本鏈接（不超過3個）、被轉(zhuǎn)載、被評論、增加分類標簽、適當穿插圖片等

PPmoney內(nèi)容板塊內(nèi)的分類標簽

404報錯

⑥外鏈建設(shè)：獲取高權(quán)重網(wǎng)站的反鏈合作機會。

三、官網(wǎng)可用性原則

那對于需要在PC端部署功能的產(chǎn)品而言，相比移動端，PC端頁面設(shè)計的區(qū)別在哪里呢？

由于移動端和PC端的畫布尺寸、操作方式、使用場景不同，天然兩者就具有不同的設(shè)計規(guī)則，包括排版布局、交互動作、主呈現(xiàn)、動效等。

1. 排版布局

移動端的信息展示空間相對而言更有限，信息基本往內(nèi)集中，而PC端由于畫布空間較大，信息展示多以向外拓展。

若是同樣的信息量，移動端需把信息再度精簡且重組在狹長的畫布之內(nèi)，而PC端可以相對盡情地在保證信息邏輯完整的基礎(chǔ)上伸展。某種程度上，PC端的信息排布比較像PPT

畫布區(qū)別

網(wǎng)易嚴選PC端彈窗

網(wǎng)易嚴選PC端導(dǎo)航欄

以網(wǎng)易嚴選的下單流程為例，在查看商品圖和選擇規(guī)格下單中，移動端分開了兩屏做聚焦引導(dǎo)，PC端則直接完整露出在第一屏

網(wǎng)易嚴選下單流程

2. 交互動作

移動端使用手指，PC端通過手控鍵鼠，交互動作的區(qū)別還是挺大的，同樣是輸入文本，移動端因輸入范圍較小，不適宜輸入較長文本。而更多物理交互玩法上，PC端則不夠移動端靈活

交互動作的區(qū)別

3. 主呈現(xiàn)

移動端屬于單屏處理制，在各種移動場景中講究快速，更適合碎片化的信息處理。而PC端屬于多點同步處理制，支持多個網(wǎng)頁同時打開，彼此相對獨立，多用于穩(wěn)而重場景。

以支付寶官網(wǎng)為例，個人用戶從首頁登錄后進入的是以個人賬戶信息為主，相比之下，移動端登錄前或后的首頁皆以營銷內(nèi)容為主

支付寶個人官網(wǎng)登錄后

4. 動效

PC端比較像是大舞臺，移動端像個人沐浴間，兩者皆支持一定的動效，但相比而言，PC端的動效發(fā)揮空間更大，且容易凸顯高級感

鼠標移動至按鈕高亮

鼠標移動至圖片高亮

日系風(fēng)

日系風(fēng)

鼠標移動

國外官網(wǎng)參考

日系風(fēng)：https://www.cxwebexperts.com/html/erika-preview/erika/index.html

塊狀呈現(xiàn)：http://preview.themeforest.net/item/assemble-a-contemporary-portfolio-theme/full_screen_preview/16966325?_ga=1.252040970.2030903852.1492146072

滾屏動畫：

1. 上下滾屏

http://nasaprospect.com/

http://lostworldsfairs.com/atlantis/

2. 左右滾屏

http://hotdot.pro/#

3. 有趣在細節(jié)

https://janploch.de/

https://www.madwell.com/

推薦書目

《騰訊產(chǎn)品法》李立著

《價值再定義》騰訊FiT Design著

《跟我學(xué)SEO從入門到精通》張新星著

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

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