王M争
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
终于把书写完，接下来恢复之前的更文频率。这篇文章我们来谈谈移动端和PC端交互设计上的区别。
经常遇到一些设计师，他们之前负责的都是pc端产品，突然改做移动端，会不自觉的把pc端的一些设计理念“移植”到移动端，出现了水土不服。有经验的设计师一看你设计的移动端页面就知道你之前做的都是pc端，这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”，别人就知道你老家是哪里一样。那么移动端和pc端交互设计上的区别究竟在哪呢？
大屏到小屏
开门见山，移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。
可能有的设计师觉得，屏幕尺寸不一样做自适应不就行了，移动端页面做长一点，让用户滑动就可以了。这是一个非常简单的处理方案，但是忽略了一个重要前提：用户愿不愿意滑动？根据埋点数据显示，多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑，说明用户很少主动滑动去查看一屏以外的内容。对于移动端产品来说，一些重要的内容必须保证用户在一屏内可以看到。
1）信息架构重构
因此，如果你要为一个pc端网站做一个移动端app，首先要做的就是信息架构的重构。pc端有足够的空间可以把所有的功能直接展示给用户，而移动端只能展示一些主要的功能，一些次要的功能需要放在下一层级。
例如，appstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单，直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的，可能很多用户今天看了这篇文章才发现原来还有这个功能。没关系，之前虽然不知道，但是并没有影响你正常使用啊。对次要功能进行适当的降低信息层级是移动端设计师必须要考虑的。
2）一个页面，一个任务
对于上面信息架构重构的观点可能会有人存在异议，对于一些表单类页面来说，例如用户要借钱、转账，有些信息是用户必须要填的。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。那么在这种情况下，是否可以继续延续pc端的布局样式？
以上面的转账流程为例，pc端是直接在一个页面展示，而移动端是分成了两个页面。为什么这样？把备注/付款说明也放在第一个页面不行吗？
因为移动端用户使用环境更加的复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在pc端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑。
一个页面可以完成的任务现在要跳转好几个页面，增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，因为页面内容量是用户一眼就可以看出来的，用户无法立刻感知这个任务有多少步骤。因为无知，所以无畏。等到用户知道这个任务步骤数的时候，整个任务都已经完成了。
借呗的这次改版，用户要借钱必须先输入借款金额，其余的借款期限、还款方式和利息等信息才会展示给用户。这些信息都是跟用户借款金额相关的，用户没有输入借款金额，这些信息展示给用户意义也不大，不如隐藏，让用户的注意力聚焦于完成输入借款金额。
没有一个放之四海而皆准的设计原则，所有的设计理论都不能罔顾实际的应用场景而机械的套用。如果前后步骤关联性比较强，我建议不要分页展示。例如，目前很多的短信验证码都选择把“输入手机号”和“输入短信验证码”放到两个页面，我个人对此持保留意见。设想一个场景，如果用户迟迟没有收到短信验证码，那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查看，如果手机号和短信验证码放在同一个页面就简单多了。
3）突出重要信息
前面我们提到的主要是控制移动端页面的信息量。页面信息量少就可以了？当然不是，我们来看一下火车换乘的场景，如果你要从南京去新疆阿克苏，没有直达的车次，只能从西安换乘。我们来看看下面两款产品的处理方式，左边是12306，右边是飞猪。12306还是一股pc端风格迎面扑来，问题出现在哪？12306跟飞猪展示信息量差不多，唯一的区别在于12306展示了两趟车次各自的起止时间，而飞猪只告诉用户整趟旅程的起止时间。
显然问题不是出现在信息量上，而是对信息的展示形式上。用户更关注的信息，应该让用户更容易发现。对于一趟车次来说，用户更加关注出发/到达站、出发/到达时间和票价。对飞猪界面进行高斯模糊处理，发现用户的视觉焦点正好落在这些重点信息上。
12306所有的信息都属于同一层级，让人抓不到主次。而且界面中出现了过多的配色，更增加用户的信息获取成本。
鼠标到手指
pc端用户与界面进行交互靠的是鼠标，移动端用户靠的是手指。鼠标的操作更加精准，因此移动端界面中元素的尺寸和间距比pc端的大。以下图为例，左边是pc端，右边是移动端。移动端的输入框沿用的还是pc端样式，而且关于利率和手续费的详情icon过小，用户的手指点击的时候容易误操作。
给你的界面做减法
前面我们主要强调了移动端产品要尽量减少界面中信息量。可不可以在不改变产品信息架构的前提下，通过交互设计上的改动来完成目标呢？我给大家介绍两个方法：场景化和关联化。
1）场景化
在一个页面中，虽然内容很多，但是用户真正感兴趣并且会与之交互的内容很少。如果我们可以获知用户在特定的场景下对于某个内容诉求很高，那么我们突出展示；反之如果诉求很低的话，我们可以隐藏。
举一个之前说过的例子，知乎中，用户在搜索结果页滑动大概3屏后，会出现“向知友提问”按钮。因为用户滑动了3屏，说明用户可能对当前的搜索结果不满意，这时引导用户去提问，用户的意愿更高。如果我们全程展示这个去提问按钮，反而会减少用户的实际浏览区域，造成干扰。
上面主要提到了，同一个流程，需要根据用户不同的使用场景提供不同的功能。其实即使是同一个功能，我们也要根据用户不同的使用场景选择不同的展示形式。
还是知乎，为了方便用户可以快速的查看下一个回答，给用户提供了一个浮动按钮。但是这个浮动按钮，当用户开始滑动页面时候就会改变样式。这个很容易理解，当用户刚进入这个页面，为了降低用户的学习成本，我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态，缩小按钮的形态避免对界面信息造成遮挡。
2）关联化
我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。支付宝账单的月份筛选功能，对入口进行了修改。之前用户需要点击日历图标，现在用户直接点击月份就可以了。用户要筛选的就是月份，那么直接把月份作为入口更加合适。
总结
以上就是我对移动端和pc端交互设计上区别的简单分析和总结，如果你有不同的建议和看法欢迎留言讨论。
全部评论：50条
-
ganshoushafa
2021-05-12 08:38@ syken: 没错，换乘站的信息非常重要，尤其是同城市不同站的情况现在在客流量大一些的城市非常普遍。所以第一程下车时间，第二程上车时间的信息展示还是12306更直观。
-
-
cwr1992101
2019-12-17 11:46实话实说，每一章节我都看了，但这一部分内容确实存在太多不专业的主观臆测，特别是因为无知所以无畏的解读实在是不敢恭维，之前文章多次提及流程多会导致用户流失的观点在这里随随便便就完全颠覆掉了。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
秋小木
2019-06-17 11:55知乎那个最近把下一个答案那个去掉了，要看下一个还要看完当前答案的全部内容，挺麻烦的。而之前有下一个答案按钮的时候呢，截图又会挡掉部分内容，还是喜欢这之前的左右滑动。
-
-
草野会社
2019-06-15 16:56我看不下去了，你这完全是在瞎说啊。我甚至怀疑你工作过吗？ 什么叫“利率和手续费的详情icon过小” 你连热区和切图留白都不知道的 在这瞎说，这不是误导人吗？
-
-
-
-
-
544636983
2019-06-13 10:35做APP开发的创业公司，无产品经理，产品需求到我手里基本只是概念性的东西，好的情况下还有个文档给我，然后一切靠自己，直接出设计稿，什么原型简直是天方夜谭
-
RAY三金
2019-06-12 16:22作为一个小公司的设计师，平时做页面，都要去兼容手机端，或者说是H5页面，或者说是响应式。页面里也包含类似报名，登录，注册，搜索等等功能。我很希望大神能讲讲这种情况下的应该怎么做设计，因为网上很多教程都是讲app下的设计。
-
-
-
-
-
霖霖isme
2019-06-11 14:07借呗改版后界面个人认为更贴合用户使用时需求，考虑一下用户去借款时是否会关心借款金的还款方式和具体利息，这样在一个界面可以看到全部明细，看还款方式和利息是否可以接受在确定借钱
- 更多
更多作品
发表评论