pc与手机页面的差别分析

前言

也许你还没有过多的思考过手机页面与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体验规范的；