[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體驗規范的;
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi