以往一直负责PC端网页设计的设计师，突然改做APP设计，很容易会把PC端网页设计的一些理念放到APP设计上，使整个APP设计的用户体验显得十分尴尬。那么，APP和PC端的交互设计有何区别呢?下面就让郑州建站公司简单说说。

区别一：大屏到小屏

首先，APP和PC端的网页设计最大不同就是屏幕大小，而屏幕大小也直接决定界面信息量，PC端一个页面能展示的全部信息，可能需要APP好几个页面去承载。

可能有设计师认为，屏幕尺寸不一样做自适应就可以啦，APP页面设计长点，让用户滑动都无所谓哦!这个方法当然可行，而且还非常简单粗暴，但你有问用户是否愿意滑动页面吗?

根据埋点数据显示，APP页面超过一屏内容，其曝光率与点击量都会急剧下滑，这说明用户很少主动滑动查看一屏以外的内容。因此APP中的重要信息必须保证用户能在一屏内看到。

从大屏到小屏，设计师需要考虑哪些方面?

1.信息架构重构

如果你要为PC端网站做一个手机APP，首先要做的就是信息架构重构。PC端有足够的空间可以把所有功能直接展示给用户，但手机屏幕小只能展示重要功能，其次次要功能则需要放在下一层级。

2.一个页面，一个任务

手机用户使用环境复杂多变，容易受到干扰，如果页面中展示过多的信息量，容易让用户混乱。同样的几个输入框，在PC端可能只占页面的1/4，但在手机占了一整个页面，这给用户带来的观感是完全不一样的，慢慢页面很容易会让用户产生焦虑。

这就需要将一个页面可完成的任务，改为跳转好几个页面，增加操作步骤。有设计师可能会担心用户会因为步骤多而退出，事实上页面内容量是用户一眼就可以看出来的，但用户无法立刻感知这个任务有多少个步骤，等到用户意识到这个任务步骤数时，整个任务可能已经完成了。

此外，前后步骤关联性较强的任务，建议不要分页展示，如「输入手机号」和「输入手机验证码」，如果它们分别放到两个页面，若用户迟迟没有收到验证码时，要么就是手机号码输错，要么就是网络故障，当然还有其他原因，但用户并不清楚自己到底是什么原因导致的，有可能需要返回上一层查看找出原因，这会增加用户的负担。如果「输入手机号」和「输入手机验证码」放到同一个页面，这就会简单很多了。

3.突出重要内容

页面信息量多，我们需要控制页面的信息量，如果页面信息量少，我们则需要突出重要内容。

举个例子，火车换乘时，用户最关心的就是出发/到达站、出发/到达时间和票价。但12306就像PC端直接换成APP一样，所有信息都属于同一层级，无法突出主次，界面中出现过多配色，增加用户的信息获取成本;飞猪则将其他次要信息进行降低灰度，把用户的焦点放在重点信息上。

区别二：鼠标到手指

PC端用户与界面进行交互靠的是鼠标，手机用户靠的是手指，相对来说，鼠标操作会更加精准，因此手机界面中的元素尺寸和间距都会比PC端大。例如：如果APP界面的输入框还沿用PC端的样式，Icon也很小，用户用手指点击时很容易会误操作。

区别三：给界面做减法

之前我们提到APP设计要尽量减少界面的信息量，那可不可以在不改变产品信息架构的前提下，通过交互设计改动完成目的呢?当然可以1

1.场景化

如果页面中内容很多，但是用户真正感兴趣且会与之交互的内容很少，那么我们就可以突出用户关注度高的内容;反之如果关注度低，那么我们也可以适当地隐藏。

例如：知乎中，用户在搜索结果页滑动大概3屏后，会出现「向知友提问」按钮。这是因为用户滑动了3屏，说明用户可能对当前搜索结果不满意，这是引导用户去提问，用户的意愿会更高。当如果我们全程都展示这个提问按钮，可能会减少用户的实际浏览区域，并造成干扰。

除了同一个流程，需要根据用户使用场景不同，而提供不同功能外;同一个功能，我们也要根据用户使用场景不同，而选择不同展示方式。

再以「知乎」举例，为了方便用户可以快速查看下一个回答，知乎给用户提供一个浮动按钮，当用户刚进入这个页面，为了降低用户的学习成本，知乎会直接告诉用户这个按钮的功能;当用户开始滑动进入阅读答案，按钮就会被缩小，避免对界面信息造成遮挡。

2.关联化

梳理信息之间的关联性，将相互关联的信息整合在一起，减少页面中的信息量。例如：支付宝账单的月份筛选功能，之前用户需要点击日历图标，现在用户只需直接点击月份就可以了。

其实，PC端和手机APP的交互设计，无论是布局还是用户操作体验，都有很大区别，设计师应该根据用户的操作习惯来设计APP，直接套用PC端那套设计方式，明显不合适。