[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