起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PC端產品安全感和可用性設計策略
本篇文章通過各種實例，詳細地為大家介紹了PC端產品如何構建安全感，以及其可用性設計的原則。
近一兩年，對于PC端的產品設計的討論遠遠不及移動端的熱鬧。
依據艾瑞咨詢的數據，2017年上半年，PC端使用人群大概在5.2億上下，其中在線視頻、綜合門戶、網上購物網站占據更多網民的瀏覽時間。
2017年上半年PC端數據
PC端逐漸趨向場景PC， 是否要花功夫在PC端，要花多少功夫，可以參考以下內容作為思考的輔助：
一、第一性原理
在決定是否要做某件事前，先確定你的目的，以及做這件事所花費的成本和目的是否匹配。
搭建產品官網，目的通常離不開這兩點之一或二：
1. 可用性：
基于PC端的使用場景，官網本身作為產品使用的一種重要形態，提供在PC端進行完整全流程操作的功能，且移動端無法替代的體驗。
如：新媒體使用電腦端進行文章編輯、粉絲管理，辦公群體挑選公司福利商城商品，宿舍內大家聚一起看劇看球賽等。
同時，某些環節允許PC端與移動端的交互搭配使用，如登錄、付款等環節由移動端進行掃碼執行。
2. 安全感：
告知用戶你是誰、你提供什么、為什么選你，包括公司介紹、品牌實力介紹、產品/商品介紹、動態資訊等。
當用戶還不知道你是誰或不確定你是否被社會信用所肯定時，網絡搜索成為你和用戶之間的連接，傳達的是品牌、產品實力上的安全感和公信力。
當我們討論是否要搭建產品官網，要搭建成什么模樣，要考慮的是核心目的和實際可調配的資源之間的平衡。
- 缺乏開發資源，用戶進行網絡搜索時能看到大致介紹：利用新聞通稿和百度百科等工具即可。溫城輝在一次線下分享會提到一種有趣的現象：“沒有被大眾點評收錄的餐廳仿佛沒有存在過?！痹诰W絡成為信息相對公開的工具之一的時代，利用網絡工具找到你的用戶，也讓用戶找到你。
- 有開發資源但不想耗費精力在PC端功能上：把你提供的產品/服務介紹提煉到官網，充分利用搜索引擎的特性來發揮官網的作用。讓你和用戶之間的距離再近一點。
- 有富足的開發資源，或PC端非常切合你所提供的產品/服務的使用場景：兼容可用性和安全感，重視官網內的產品介紹和產品功能，難度不輸移動端產品。
二、官網安全感構建的基本要素
目的：
（1）清晰告訴用戶：你是誰、你提供什么、為什么選你
（2）在保證第1點后，盡可能從網站設計中進行搜索引擎優化
實操：
整理以下常規做法以及對應的案例，以供參考。
1. 官方介紹可通過“5W1H1E”法梳理，可根據實際需求選擇：
What（產品是什么）：
微眾銀行官網首頁首屏即開門見山地用一句話描述產品本質——騰訊牽頭發起設立的銀行，由此可以簡單理解微眾銀行是互聯網巨頭發起且干的是銀行/金融的事情，清晰明了不啰嗦
微眾銀行官網首頁
Who（誰創造了它）：
提供官方介紹、網站版權說明以及企業高管站臺等。
官方介紹包括公司介紹、品牌主張、產品動態資訊、媒體報道、歷史榮譽等
【公司介紹】網易-公司簡介
瑞幸咖啡-關于我們-品牌主張
產品動態資訊：QQ官網-動態
【歷史榮譽】招聯金融-關于我們-榮耀榜
網站版權說明：包括版權歸屬、資質證明等。
版權說明的正確格式：Copyright [dates] by [author/owner]。
以騰訊官網為例：Copyright ? 1998 – 2018 Tencent. All Rights Reserved.騰訊公司 版權所有
【版權說明】騰訊官網
以蘋果官網為例： Copyright ? 2018 Apple Inc. 保留所有權利
【版權說明】蘋果官網
資質證明可使用外鏈的方式，以PPmoney為例，以第三方權威證明增強官網公信力：
工業和信息化部ICP/IP地址/域名信息備案管理系統：http://www.miibeian.gov.cn/state/outPortal/loginPortal.action;jsessionid=9TuzJMT6OUaeRX4VF37b2OpIX1fIF6VdzF8zWW-Qzp0IJKIgEJzs!-1613082564
廣東省公安廳政務網：http://www.gdnet110.gov.cn/
360網站安全檢測：http://webscan.#/index/checkwebsite/url/檢測官網地址
誠信網站認證書：https://credit.cecdc.com/CX20130826002735003003.html
中網可信網站權威數據庫：http://t.knet.cn/index_new.jsp
Itrust互聯網信用認證：http://www.itrust.org.cn/Home/Index/itrust_certifi?wm=1591537685
品牌寶企業信譽評級證書：https://v.anquan.org/cert/site/?site=www.ppmoney.com&at=business
廣州市網絡商品交易與服務監管平臺：http://netadreg.gzaic.gov.cn/ntmm/WebSear/WebLogoPub.aspx?logo=0c0fd83947924d5484cbf367f77f38b
【資質證明外鏈】PPmoney
玖富官網則在首頁頂部露出其已經工信部認證聯盟認證為實名網站的信息
玖富官網首頁
企業高管站臺：若創始人、董事長等高管具備公關價值，讓他們為產品站臺也是重要的策略之一
微眾銀行-關于我們-股東和管理層
When（產品的重要節點）：
展示產品的發展歷程
微眾銀行-關于我們-微眾里程碑
Why（為什么選擇它）：
表現產品核心功能的獨特賣點，做好兩點，說人話（共情）和提煉。
“溝通，是跨越千山萬水的親切聲音”是說人話，表達/喚起與用戶一致的同理心，“兩人、多人通話”“群組通話”“屏幕分享”是QQ作為通訊工具的功能提煉。兩者結合作為產品獨特賣點的文案闡述
QQ官網首頁
How（怎么使用）：
提供不同形態的產品使用、下載方式。以QQ為例：
iOS版跳轉至蘋果應用市場鏈接：https://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8
Windows Pad、Phone版跳轉至鏈接：https://www.microsoft.com/zh-cn/p/qq/9wzdncrfj1ps?rtc=1&activetab=pivot:overviewtab
PC版、Mac版、安卓版等下載對應的文件包
【下載】QQ國際PC版
【下載】QQ Mac版
除了專門的應用下載頁，許多官網會通過結合營銷利益誘惑用戶使用移動端掃碼下載APP
網易嚴選首頁-引導下載APP
Where（還可以在哪里可以找到它）：
提供全媒體渠道，以insta360為例，列舉其Facebook、Instagram、Twitter、youtube、公眾號、微博、優酷等入口
Else（其他）：
例如客服中心、問題反饋、人力機構招募（經銷商、推廣大使、人才招聘）等。
2. 為了搜索引擎優化（SEO），可根據實際需求選擇：
《跟我學SEO從入門到精通》：SEO的目的是通過在搜索引擎的排名獲得流量。
搜索引擎的工作原理簡單而言，是搜索引擎蜘蛛是抓取網站頁面的程序，通過抓取關鍵詞，決定收錄，賦予權重，并生成排名。
明確優化指標：
通過第三方數據工具來定義指標。
收錄量是搜索引擎對網站頁面的收錄數據，直接搜索Site:www.xxxx.com，查看收錄數
【百度收錄數】瑞幸咖啡
站長工具：http://tool.chinaz.com
【站長工具】PPmoney數據
愛站網（反鏈查詢）：https://www.aizhan.com
愛站網-反鏈查詢
權重影響因素：
也是為了SEO，我們能做的事。
①域名：域名統一、位數少、組合方式單一（首選純數字、其次純字母）。
②服務器：健康狀況（同一服務器同一IP網段健康狀況）、訪問穩定性、訪問速度、功能支持。
③網站層級結構：保證網站內所有頁面鏈接地址在三層以內。
④內鏈建設：TKD設置、熱門推薦、錨文本鏈接、面包屑（便于用戶確認當前訪問層級）、網站地圖（利于蜘蛛抓?。⒄緝人阉鳎ㄌ嵘L問效率）、避開死鏈如404等
網易嚴選-熱門推薦
PPmoney-面包屑
蘋果官網-網站地圖
京東金融-站內搜索
新東方-站內搜索
⑤內容質量：文章字數適度（800-1500）、可讀性（通順連貫）、文章排版（盡量用分標題形式）、加入錨文本鏈接（不超過3個）、被轉載、被評論、增加分類標簽、適當穿插圖片等
PPmoney內容板塊內的分類標簽
404報錯
⑥外鏈建設：獲取高權重網站的反鏈合作機會。
三、官網可用性原則
那對于需要在PC端部署功能的產品而言，相比移動端，PC端頁面設計的區別在哪里呢？
由于移動端和PC端的畫布尺寸、操作方式、使用場景不同，天然兩者就具有不同的設計規則，包括排版布局、交互動作、主呈現、動效等。
1. 排版布局
移動端的信息展示空間相對而言更有限，信息基本往內集中，而PC端由于畫布空間較大，信息展示多以向外拓展。
若是同樣的信息量，移動端需把信息再度精簡且重組在狹長的畫布之內，而PC端可以相對盡情地在保證信息邏輯完整的基礎上伸展。某種程度上，PC端的信息排布比較像PPT
畫布區別
網易嚴選PC端彈窗
網易嚴選PC端導航欄
以網易嚴選的下單流程為例，在查看商品圖和選擇規格下單中，移動端分開了兩屏做聚焦引導，PC端則直接完整露出在第一屏
網易嚴選下單流程
2. 交互動作
移動端使用手指，PC端通過手控鍵鼠，交互動作的區別還是挺大的，同樣是輸入文本，移動端因輸入范圍較小，不適宜輸入較長文本。而更多物理交互玩法上，PC端則不夠移動端靈活
交互動作的區別
3. 主呈現
移動端屬于單屏處理制，在各種移動場景中講究快速，更適合碎片化的信息處理。而PC端屬于多點同步處理制，支持多個網頁同時打開，彼此相對獨立，多用于穩而重場景。
以支付寶官網為例，個人用戶從首頁登錄后進入的是以個人賬戶信息為主，相比之下，移動端登錄前或后的首頁皆以營銷內容為主
支付寶個人官網登錄后
4. 動效
PC端比較像是大舞臺，移動端像個人沐浴間，兩者皆支持一定的動效，但相比而言，PC端的動效發揮空間更大，且容易凸顯高級感
鼠標移動至按鈕高亮
鼠標移動至圖片高亮
日系風
日系風
鼠標移動
國外官網參考
日系風：https://www.cxwebexperts.com/html/erika-preview/erika/index.html
塊狀呈現：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. 有趣在細節
https://janploch.de/
https://www.madwell.com/
推薦書目
《騰訊產品法》李立著
《價值再定義》騰訊FiT Design著
《跟我學SEO從入門到精通》張新星著
本文由 @婉盈不是這個瑩 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
干貨
收藏了