PC端和H5移动端交互设计有哪些区别
新闻来源：优漫教育
日期：2021-10-08
移动终端和PC终端本的区别是屏幕的大小。PC端和H5移动端的交互设计有什么区别？经常会遇到一些设计师之前负责PC端产品突然变成移动端，会不自觉地将PC端的一些设计理念移植到移动端出现水土不服的现象。那么PC端和H5移动端的设计有什么区别呢？
一、大屏到小屏。
移动终端和PC终端之间最根本的区别是屏幕的大小。屏幕的大小直接决定了界面信息的数量。PC端的一个页面可以显示完整的信息，可能需要移动端的几个页面来承载。有些设计师可能认为，不同的屏幕尺寸可以自适应，移动终端页面可以更长，让用户滑动。这是一个非常简单的处理方案，但忽略了一个重要的前提：用户是否愿意滑动？
根据埋点数据，大多数移动终端页面超过屏幕的内容曝光率和点击率将急剧下降，这表明用户很少主动滑动以查看屏幕以外的内容。对于移动产品，一些重要的内容必须确保用户在屏幕上看到。
1.信息架构重构。
因此，如果你想为PC端网站做一个移动APP，首先要做的就是重构信息架构。PC端有足够的空间直接向用户展示所有功能，而移动端只能显示一些主要功能，一些次要功能需要放在下一级。
PC端的处理方法非常简单，直接显示给用户。移动终端需要用户按照这个评论弹出评价列表。也许很多用户今天看了这篇文章才发现还有这个功能。没关系。虽然我以前不知道，但这并不影响你的正常使用。移动设计师必须考虑适当降低次要功能的信息水平。
2.页面，任务。
有些人可能会对上述信息架构重构的观点产生异议。对于一些表单页面，如用户想借钱和转账，用户必须填写一些信息。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。那么在这种情况下，PC端的布局能否继续？
由于移动用户的使用环境更加复杂多变，更容易受到干扰，因此界面信息必须简单直观。如果在页面上显示太多的信息，用户很容易感到困惑。这里提到的信息量并不是指绝对的信息量，更准确的说法应该是用户主观感受的信息量。同样的输入框可能只占PC端页面的1/4，而移动端占整个页面，给用户完全不同的感受。页面塞满了，容易让用户焦虑。
现在一个页面可以完成的任务要跳转几个页面，增加了操作步骤。用户怕内容多，难道不怕步骤多吗？不要害怕，因为页面内容量是用户一眼就能看到的，用户无法立即感知到任务有多少步骤。无畏是因为无知。当用户知道任务步骤的数量时，整个任务已经完成。
借款的修订，用户必须首先输入贷款金额，其余的贷款期限。还款方式和利息将显示给用户。这些信息与用户的贷款金额有关。如果用户不输入贷款金额，向用户展示这些信息意义不大。最好隐藏它们，让用户关注输入贷款金额。
没有普遍的设计原则，所有的设计理论都不能忽视实际应用场景和机械应用。如果前后步骤相关性强，建议不要分页显示。
比如目前很多短信验证码都选择把输入手机号和输入短信验证码放在两页，我个人对此持保留意见。想象一个场景，如果用户没有收到短信验证码，那么他需要确定是手机号码错了。网络故障还是其他原因。用户需要返回到最后一页进行查看。如果将手机号码和短信验证码放在同一页面上要简单得多。
3.突出重要信息。
我们前面提到的主要是控制移动页面的信息量。页面信息量少就够了？当然不是！让我们来看看火车换乘的场景。如果你想从南京到新疆阿克苏，没有直达列车，你只能从西安换乘。
我们来看看下面两个产品的处理方法，左边是12306，右边是飞猪。12306还是一股PC风格迎面扑来，问题出现在哪里？12306和飞猪显示的信息量差不多。唯一的区别是12306显示了两列车的起止时间，飞猪只告诉用户整个旅程的起止时间。
显然，问题不是在信息量上，而是在信息显示的形式上。用户更关注的信息应该让用户更容易找到。对于一列车，用户更关注出发/到达站、出发/到达时间和票价。对飞猪界面进行高斯模煳处理，发现用户的视觉焦点正好落在这些关键信息上。
12306所有信息都属于同一层次，让人抓不到主次。而且界面配色过多，增加了用户获取信息的成本。
二、鼠标到手指。
鼠标是PC用户与界面互动的，手机用户靠手指。鼠标操作更准确，因此移动端界面中元素的尺寸和间距大于PC端。
以下图为例，左边是PC端，右边是移动端。移动端的输入框采用PC端风格，利率和手续费的细节太小，用户点击手指时容易误操作。
三、给你的界面做减法。
我们主要强调，移动终端产品应该尽可能减少界面中的信息量。能否在不改变产品信息架构的情况下，通过交互设计的变化来实现目标？我给大家介绍两种方法:场景化和关联化。
1.场景化。
在一个页面中，虽然内容很多，但用户很少真正感兴趣并与之互动。如果我们能知道用户在特定场景下对某一内容的要求很高，那么我们就会突出显示；相反，如果要求很低，我们可以隐藏它。
同一过程需要根据用户的不同使用场景提供不同的功能。事实上，即使是相同的功能，我们也应该根据用户的不同使用场景选择不同的显示形式。
为了方便用户快速查看下一个答案，知乎为用户提供了浮动按钮。但当用户开始滑动页面时，浮动按钮会改变样式。这很容易理解。当用户刚进入这个页面时，为了降低学习成本，我们需要直接告诉用户这个按钮是做什么的。当用户开始滑动到阅读答案的状态时，缩小按钮的形状，以避免屏蔽界面信息。
2.关联化。
我们需要梳理信息之间的相关性，整合相关信息，从而减少页面中的信息量。支付宝账单的月度筛选功能修改了入口。以前用户需要点击日历图标，现在用户可以直接点击月份。用户需要筛选的是月份，所以直接把月份作为入口更合适。
