手机和PC上的交互设计有什么区别？

我经常遇到以前负责PC产品的设计师. 当他们突然转向移动设备时，他们在不知不觉中将PC的某些设计概念“移植”到了移动终端，但他们并不满意. 有经验的设计师会知道，您之前所做的是在PC方面，这是非常令人尴尬的事情. 就像您说“很高兴见到您”一样，其他人也会知道您的家乡在哪里. 那么，手机和PC互动设计有何区别？

大屏幕到小屏幕

移动设备和PC之间最根本的区别是屏幕尺寸. 屏幕的大小直接决定了界面上的信息量. PC端的页面可以显示完整的信息. 在移动端可能要花费几页才能携带它.

某些设计师可能会认为，如果屏幕尺寸不同，则无法适应. 移动页面应该更长，并且用户可以滑动它. 这是一个非常简单的解决方案，但它忽略了一个重要前提: 用户会刷卡吗？根据隐藏的数据，大多数超过一个屏幕的移动页面上的内容的曝光率和点击率将急剧下降，这表明用户很少主动刷卡查看一个屏幕之外的内容. 对于移动产品，某些重要内容必须确保用户可以在一个屏幕上看到它.

1）信息架构重建

因此，如果您要为个人计算机网站制作移动应用程序，那么要做的第一件事就是重组信息体系结构. 在PC端有足够的空间来直接向用户显示所有功能，而在移动端只能显示一些主要功能，而一些次要功能则需要放在下一级.

例如，应用商店中的用户可以评估此​​评论是否对自己有帮助. PC端的处理方法非常简单，可以直接显示给用户. 移动终端要求用户长按此注释以弹出评估列表. 也许许多用户今天阅读了这篇文章，发现有此功能. 没关系，尽管我以前不知道，但它不会影响您的正常使用. 移动设计人员必须适当降低辅助功能的信息水平.

2）一页，一项任务

有些人可能不同意以上关于信息架构重组的观点. 对于某些表单页面，例如想要借钱或转账的用户，某些信息必须由用户填写. 在这些情况下，我们不必担心用户不会滑动，因为用户无法滑动就无法完成操作. 那么在这种情况下，是否可以继续PC侧的布局样式？

以上述传输过程为例，pc面直接显示在一页上，而移动面分为两页. 为什么会这样呢？

不能在第一页上放置票据/付款说明吗？

由于移动用户使用的环境更加复杂多变移动pc端，并且更容易受到干扰，因此必须确保界面信息简单直观. 如果您在页面上显示太多信息，很容易使用户困惑. 这里提到的信息量不是绝对的信息量，而是更准确的陈述应该是有关用户主观体验的信息量. 相同的输入框在PC端可能只占页面的1/4，在移动端只占整个页面的1，这给用户带来了完全不同的外观. 拥挤的页面已满，容易使用户感到焦虑.

现在可以在一页上完成的任务必须跳到几页，还有其他步骤. 用户害怕“更多内容”，不是害怕“更多步骤”吗？不用担心移动pc端，因为用户可以一目了然地看到页面的内容，并且用户无法立即感知到此任务有多少步骤. 因为无知，所以无所畏惧. 当用户知道此任务中的步骤数时，整个任务已完成.

在此版本的借款中，用户必须在借款前输入借款金额，然后向用户显示其余的借款期限，还款方式和利息. 此信息与用户的贷款金额有关. 用户不输入贷款金额. 向用户显示的信息意义不大. 最好将其隐藏起来，以使用户的注意力集中在完成贷款金额的输入上.

没有一种适合所有人的设计原则，并且无论实际应用情况如何，所有设计理论都不能机械地应用. 如果之前和之后的步骤更相关，则建议不要分页. 例如，当前许多SMS验证码选择在两页上放置“输入电话号码”和“输入SMS验证码”. 我个人对此有保留. 想象一下这样一种情况: 如果用户在很长一段时间后仍未收到SMS验证码，则需要确定电话号码输入是否错误，网络是否有故障或其他原因. 用户需要返回上一页进行查看，如果将手机号码和SMS验证码放在同一页上，则更加简单.

3）突出显示重要信息

我们在前面提到，我们主要控制移动页面上的信息量. 页面上的信息量是否少？当然不是. 让我们看一下火车换乘场景. 如果您从南京去新疆阿克苏，则没有直接火车. 您只能从西安转车. 让我们看一下以下两种产品的处理方式. 左侧是12306，右侧是飞猪. 12306仍是正面式的PC，问题出在哪里？ 12306显示的信息量与“飞猪”相似. 唯一的区别是12306显示了两次旅程的相应开始和结束时间，而Flying Pig仅告诉用户整个旅程的开始和结束时间.

显然，问题不在于信息量，而在于信息显示的形式. 用户应更加注意的信息应易于用户发现. 对于旅行，用户更加注意出发/到达站，出发/到达时间和票价. 飞猪界面的高斯模糊处理发现用户的视觉焦点落在这些重要信息上.

12306的所有信息都属于同一级别，因此人们无法掌握主要和次要信息. 界面中的颜色组合过多，增加了用户的信息获取成本.

鼠标移到手指上

PC用户和界面之间的交互依赖于鼠标，而移动用户则依赖于手指. 鼠标的操作更加精确，因此移动界面中元素的大小和间距比pc侧的元素大. 以下图为例，左侧是PC侧，右侧是移动侧. 移动终端的输入框仍然使用PC样式，利率和手续费图标的细节太小，当用户的手指点击时很容易被误用.

减去您的界面

过去，我们主要强调移动产品应尽量减少界面中的信息量. 是否可以通过更改交互设计来实现目标而不更改产品信息架构？我向您介绍了两种方法: 场景化和关联.

1）场景

在页面中，尽管内容很多，但用户真正感兴趣并会与之交互的内容却很少. 如果我们可以知道用户在特定情况下对特定内容的需求很高，则可以突出显示它；否则，如果需求低，我们可以将其隐藏.

以我之前提到的示例为例，我知道用户在搜索结果页面上滑动约3个屏幕后，将出现“问朋友”按钮. 因为用户滑动了三个屏幕，所以这意味着用户可能对当前的搜索结果不满意. 此时，引导用户提出问题，并且用户的意愿更高. 如果我们始终显示此问题按钮，它将缩小用户的实际浏览范围并造成干扰.

如上所述，同一过程需要根据用户的不同使用场景提供不同的功能. 实际上，即使功能相同，我们也必须根据用户的不同使用场景选择不同的显示形式.

仍然知道，为了方便用户快速查看下一个答案，为用户提供了一个浮动按钮. 但是，当用户开始滑动页面时，此浮动按钮将更改样式. 这很容易理解. 当用户刚进入此页面时，为了降低用户的学习成本，我们需要告诉用户该按钮的作用. 当用户开始滑入阅读答案的状态时，缩小按钮的形式避免了阻塞界面信息.

2）协会

我们需要整理信息之间的相关性，并将相关信息整合在一起，以减少页面上的信息量. 支付宝账单的每月筛选功能已修改. 在用户需要单击日历图标之前，现在用户只需单击月份. 用户必须选择月份，因此直接将月份用作入口更为合适.

摘要

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-277124-1.html