2BPM之前接触到的产品主要是web端，最近接到的任务是设计一款移动端产品，在这款产品的工作过程中，对于web端&移动端产品的异同之处也有所体会~。

  一、差异

  1.显示：大屏幕Vs小屏幕显示。

  web端和移动端的最明显区别在于显示区域的大小。(下图是mbp,ipad,iphone)

  我认为，这一物理形态的差异对产品设计的影响主要在于信息的组织方式。

  因为显示器的显示区域比较大，所以它所显示的内容可以很丰富，相对于移动端来说，可用空间非常宝贵。

  另外，显示器通常是横屏，而手机端大多数是竖屏，这也直接影响到我们常用的信息显示形式；例如，web端非常常用的左边导航栏右边内容的布局方式，在移动端并不适用——移动端导航更多的适用于底部b形，便于用户操作；或者是抽屉式菜单，这种导航适合使用频率较低的特性。

  又如栗子，web端最常用的列表，既可以显示比较详尽的信息，也可以作为跳转到详细信息页面的入口；但相对来说更占横向空间，因此在手机端我们很少使用列表，而是更多地使用列表的变形形式，比如卡片。

  2.互动：鼠标vs触屏。

  Web用户与移动用户的交互方式也有很大不同，用户主要依赖鼠标与页面的交互，点击方式有单击、双击、右键、悬停、拖动等，相对移动用户来说比较单一。

  手机用户主要是通过触屏和网页进行交互，比如点击、双击、长按、左右滑动/右滑、拖动、缩放等，这些操作都很丰富；而微信聊天的头像就是一个很好的体现：点击进入信息页面，长按 、双击拍一拍即成(这类密集操作也有很多人在抱怨)。

  对产品设计的影响呢，我觉得主要在元件布局，类型选择上。

  Button版式：web端设计时可操作的按钮版式要求并不特别严格，我通常会考虑操作的流程性；例如，先表单后提交按钮，但即使将按钮放置在窗体顶部问题也不大，我猜想，由于用户移动鼠标的距离并不会很长，因此对此不敏感。

  手机上就完全不同了，一定要考虑用户能接触到，方便可能的单手操作，APP上经常使用的底部导航tab也是为了方便切换；有的APP将常用功能放在右上角，还有些APP会将高频键放在右下角，都是为了更方便用户操作。

  元件选择：交互的差异当然也会影响到元件的选择，有一点让我印象深刻，那就是在网页端我们经常使用的hover特效，它能在鼠标悬停时显示一些提示信息。

  但手机触屏完全无法用这种交互方式来展示，这只是一个小小的例子，让我第一次有了不同于以往的感觉；而且，仔细回想一下，是否会发现下拉菜单很少出现在手机上？常用的替代方法有新弹窗/页选择，或滚动选择，如时间类。

  文字输入：web端的输入一般都是通过键盘进行的，不会影响网页的显示；移动端的输入是通过触屏的虚拟键盘，输入时要呼出键盘才能进行修改；特别是在表格输入时，要注意键盘不要遮挡输入框。

  3.硬件性能和网络环境。

  web端产品依赖于台式机或笔记本电脑的一般硬件性能(存储、计算等)要好于移动端设备；网络环境方面的web端通常处于相对稳定的联网状态(因为使用环境一般在家里或办公室等环境中都有网络覆盖)；以及移动端设备由于使用场景十分灵活，难免会遇到一些网络信号不稳定的情况。

  事实上，硬件和网络主要影响的是产品的实现方式，例如功能的实现是放在客户机或服务器端？

  特别是有许多产品会比较吃与AI相关的各种模型，因此web端因为网络比较稳定，可以将模型放在服务端，从而得到更准确、更快的结果；移动端如果使用场景包含了网络不良的环境(例如翻译机使用场景包含了国外旅行)，则需要考虑将模型放在客户端处理，同时还要考虑模型裁剪减少对硬件性能的要求。

  4.使用情景

  尽管web端和移动端在显示方式、交互方式等方面的差异是显而易见的，但是个人认为，使用场景的差异更具有本质性，因为这种差异正是最初决定我们的产品为何要做移动端或为什么要做web端的原因。

  大家都知道，web端产品的使用场景更固定，通常是在家里或办公室，使用时间也更连续，更适合用于复杂的业务逻辑；而移动端的使用场景更灵活，使用时间也更分散，因此使用过程不能太复杂。

  「小孩选，大人选」，web端与移动端的优缺点正好相辅相成，如今许多B端产品都会选择同时提供web端和移动端的应用，但不同平台的功能侧重不同，既能满足复杂业务操作的需要，又能有效地利用移动端的灵活性优势。

  比方说钉钉审批功能，手机端只提供提交和审批功能，这样对于出差在外的员工就可以方便地提交报销等申请，领导们也不用在办公室电脑上就能审批，灵活性很强；但是对于配置审批流程等复杂的操作，仍然只能在网络上完成。

  第二，相同
  web端和移动端的产品设计真的有那么一点点相同么？

  事实上，虽然在表现形式上有很大差别，但设计产品时的思考过程是一致的(即面试时常说的pm的一般技巧)。

  因为我所接触到的web和移动端产品都是2B格式，所以首先对业务流程进行梳理，分析用户角色，确定产品架构等操作是非常必要的；另外，如果涉及到web端和移动端形式，那么除了业务流外，还需要对数据流进行梳理，以保证两端数据的一致性。

  web端和移动端的产品在战略层面、范围层面确实没有太大的区别，但在结构层面、框架层面、绩效层面却有很大的不同。