[TOC] ## 前言 也許你還沒有過多的思考過手機頁面與pc頁面的差別，也沒從產品角度思考過從產品設計上兩者有什么不同，那么不妨跟小編一起去思考下，也許能給你一些有益的啟示。 ## 一 設備性能 ### 1.1 設備對比 * pc設備一般是臺式機或者筆記本電腦，性能相比手機要好，那么哪些顯示是需要性能的呢？動畫、即時通訊、渲染、3d等都是需要設備性能支持的。眾所周知，在沒有出現手游之前，基本的游戲都是靠端游的。而網頁本身目前需要好的性能么？很肯定的告訴你，需要！比如動畫、圖片加載與渲染、腳本程序執行、計算等。而頁面一般情況下對于pc來講，沒有聽說過有問題的。 * 那么手機性能如何呢？我們也從游戲角度講，之前手機性能是很低的，撐不起游戲本身的需要，如果真的吧一款高質的游戲放到手機，你只會感覺到卡頓、間歇感很強。即使到今天，手機的性能其實也不容太樂觀，畢竟手機的單核和電腦的單核基本不是一個概念。那么手機瀏覽器對于頁面的顯示，純文字也是ok，但是一旦有圖片加載，動畫或者程序運行就會感到卡頓。 ###1.2 最終結論 * 對比鑒定 ：pc占優，手機占劣， ###1.3 導致結果 * 直接導致了一些需要性能的頁面只能優先考慮pc完成，比如圖表繪制，css3動畫，部分頁游。 ## 二 分辨率，視圖大小 ### 2.1 設備對比 * pc分辨率一般情況下是高于900，絕大多數是1000-2000之間的大屏顯示。所以直接結果導致pc頁面的內容量更大。 * 而手機目前還有很多分辨率是320~480這樣的起步，主流的分辨率在750~1250+，但手機由于是2倍乃至3倍視口，所以真正顯示的頁面內容大小只有375*625+ ，所以手機頁面顯示內容量少。 ###2.2 最終結論 * pc大，頁面容量更大，手機小，展示內容需要精簡 ### 2.3 導致結果 * 頁面布局內容不同：pc頁面布局中產品全局性展示項會一直存在，比如說我們pc中任何頁面都會有公共頭部，尾部，菜單項，側邊欄；而手機頁一般只有主頁會有這些基本內容，進入到具體頁面時不會有這些基本項導致浪費空間。 * 頁面本身布局不同：pc頁會出現多種多樣的橫向、豎向的布局，而且極為不規則，會根據不同業務展現以及不同個性化設計不斷改變；而手機端則一般是從上到下一列布局，多的內容只會向下顯示，很少出現一行有兩個內容項。 * 頁面長度不同：pc頁面一般情況下都可以在一屏到兩屏展示完整，好一點的設計都會讓用戶一屏內完成基本的操作，稍微人性點針對長頁面都會有返回頂部的功能箭頭；而手機端因為傾向性的都是長頁面，所以一般很少設計單獨的向上箭頭，在較新的產品交互中，是把點擊頁面頂部作為了回到頂部。 * 產品類型不同：pc端比手機端有更多的產品類型，比如說管理后臺，公司官網，廣告平臺，圖標匯總統計后臺，技術or ui的集中營等；而手機端目前更偏向于展示，管理職能偏弱，交互職能偏強。 * 同一個產品設計理念不同：比如同樣是一個預約掛號的標準流程，我在pc端可以看到更多的信息量，可以通過在當前頁切換科室查看到該科室所有醫生，因為視圖夠大；但手機上就需要分成兩步，先選擇科室，在選擇查看科室下的醫生；也可以舉例商品列表，我在pc端的一頁中看到了更多的商品，而在手機端只看到2-5個，而且大小對比也非常明顯； * 對于分頁數據處理不同：pc是點擊跳轉頁，對于之前的頁面放在歷史記錄的，而且是比較規整的只能看每頁多少條數據；而手機端是通過手勢對數據做累加操作的，這個得到多少條數據時自己實際操作需求的，如果只想多看一條那就多看一條。 * 應對方案： **pc應對方案分為三種：** 1 固定寬度水平居中布局，單位為px; 2 媒體查詢+百分比流式布局，柵格系統，以bootstrap為典型，單位水平百分比，豎直px；3 單純的百分比h5布局 ，簡單靈活的適用于大部分pc以及大屏移動顯示設備，單位水平百分比，豎直px。 **手機應對方案分為三種：** 1 百分比h5布局，適用于絕大部分移動頁面，單位水平百分比，豎直px；2 網易rem布局，等比縮放布局 ；3 阿里rem布局，等比縮放布局 ##三 交互事件 ### 3.1 設備對比 * pc主要是鼠標以及鍵盤兩大類事件；鼠標的事件基本是單機，雙擊，位置，移動，拖拉；鍵盤基本是輸入設備，很少有鍵盤對應獨立的交互事件，除非有特殊定義； * 手機端的事件類型本身比較多，比如短按，長按，拖拉，左拉，右拉，上拉，下拉，以及針對性的對元素本身滑動的事件很多。 ###3.2 最終結論 * pc端操作更粗糙，一般是基本點擊事件，然后不同的功能是通過點擊不同的觸發控件或者按鈕造成的，很少是因為事件本身；手機端的事件更細膩，針對不同類型以及元素針對性的事件都會做觸發。 ### 3.3 導致結果 * pc頁面上有很多交互組件，功能按鈕，可常用的事件一般只有單擊；手機端對應的事件很多，所以一般情況下，手機的特征事件下多少都會影響頁面的設計，比如長按出現什么狀態或者操作，左拉頁面或者某元素出現什么等等。 ##四 便攜性 ### 4.1 設備對比 * pc一般較大笨重，而且續航能力較差，所以不便攜；一般情況下，只有商務人士或者程序員才會隨身攜帶電腦。 * 手機基本普及率很高，而且續航ok，即使沒電了也可以充電寶及時充電。 ###4.2 最終結論 * 手機端勝出占優 ### 4.3 導致結果 * 一些社交性很強的產品一般必須有移動端：比如微信，主打移動端 * 一些需要設置日程提醒或者必要操作的功能會出移動端：比如操作提醒，發送簡單通知等 * 一些管理繁重，操作復雜，展示過多的產品，在移動端只是展示部分功能項。 ##五 展現載體 ### 5.1 設備對比 * pc一般瀏覽器，包括你在pc其他軟件里如果打開了某個鏈接也會默認用瀏覽器打開，而這其中就包括ie8 * 手機情況很復雜，除了瀏覽器之外，還有app內置的網頁瀏覽器，這個環境如何就需要探索了，眾所周知的是微信x5瀏覽器 ### 5.2 最終結論 * 手機端展現載體更復雜，而且像微信這樣的app內置頁，支付寶內置頁基本成了必備品了。 ### 5.3 導致結果 * 針對pc需要考慮ie系列，慎重使用部分屬性；而針對手機端，一般情況下，我們很少會考慮手機瀏覽器打開你的頁面，更多的還是兩種：1 公司產品app的h5頁面 2 微信or支付寶內的h5頁面 而微信和支付寶也是有自己的頁面ui體驗規范的；