屏幕大小决定信息量

突出重要信息）开门见山，移动端和PC端Zui根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，PC端一个页面Ke以展示完全的信息可Neng需要移动端好几个页面来承载。

人间清醒。 以上面的转账流程为例，PC端是直接在一个页面展示，而移动端是分成了两个页面。为什么这样？把备注/付款说明也放在第一个页面不行吗？

借呗的这次改版， 用户要借钱必须先输入借款金额，其余的借款期限、还款方式和利息等信息才会展示给用户。这些信息dou是跟用户借款金额相关的， 开搞。 用户没有输入借款金额，这些信息展示给用户意义也不大，不如隐藏，让用户的注意力聚焦于完成输入借款金额。

举一个之前说过的例子， 知乎中，用户在搜索后来啊页滑动大概3屏后会出现“向知友提问”按钮。主要原因是用户滑动了3屏，说明用户可Neng对当前的搜索后来啊不满意， 闹笑话。 这时引导用户去提问，用户的意愿geng高。Ru果我们全程展示这个去提问按钮，反而会减少用户的实际浏览区域，造成干扰。

上面主要提到了同一个流程，需要根据用户不同的使用场景提供不同的功Neng。其实即使是同一个功Neng，我们也要根据用户不同的使用场景选择不同的展示形式，我的看法是...。

没耳听。 可Neng有的设计师觉得， 屏幕尺寸不一样Zuo自适应不就行了移动端页面Zuo长一点，让用户滑动就Ke以了。这是一个非常简单的处理方案，但是忽略了一个重要前提：用户愿不愿意滑动？， 多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑，说明用户hen少主动滑动去查kan一屏以外的内容。对于移动端产品一些重要的内容必须保证用户在一屏内Ke以kan到。

一个页面一个任务

前面我们提到的主要是控制移动端页面的信息量。页面信息量少就Ke以了？当然不是我们来kan一下火车换乘的场景，Ru果你要从南京去新疆阿克苏，没有直达的车次只Neng从西安换乘。我们来kankan下面两款产品的处理方式， 我懂了。 左边是12306，右边是飞猪。12306还是一股PC端风格迎面扑来问题出现在哪？12306跟飞猪展示信息量差不多， 唯一的区别在于12306展示了两趟车次各自的起止时间，而飞猪只告诉用户整趟旅程的起止时间。

PC端用户与界面进行交互靠的是鼠标，移动端用户靠的是手指。鼠标的操作geng加精准，所以呢移动端界面中元素的尺寸和间距比PC端的大。以下图为例，左边是PC端，右边是移动端。移动端的输入框沿用的还是PC端样式， 而且关于利率和手续费的详情icon过小，用户的手指点击的时候容易误操作。

明摆着问题不是出现在信息量上，而是对信息的展示形式上。用户geng关注的信息，应该让用户geng容易发现。对于一趟车次用户geng加关注出发/到达站、 内卷。 出发/到达时间和票价。对飞猪界面进行高斯模糊处理，发现用户的视觉焦点正好落在这些重点信息上。

还是知乎，为了方便用户Ke以快速的查kan下一个回答，给用户提供了一个浮动按钮。但是这个浮动按钮，改变样式。这个hen容易理解， 当用户刚进入这个页面为了降低用户的学习成本， 最后强调一点。 我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态，缩小按钮的形态避免对界面信息造成遮挡。

比方说appstore中用户是Ke以评价这条评论对自己是否有帮助的。PC端的处理方式hen简单，直接展示给用户。而移动端是需要用户长按这条评论才Ke以弹出评价列表的，可Nenghen多用户今天kan了这篇文章才发现原来还有这个功Neng。没关系，之前虽然不知道，但是并没有影响你正常使用啊。对次要功Neng进行适当的降低信息层级是移动端设计师必须要考虑的，平心而论...。

我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。支付宝账单的月份筛选功Neng，对入口进行了修改。之前用户需要点击日历图标，现在用户直接点击月份就Ke以了。用户要筛选的就是月份，那么直接把月份作为入口geng加合适，百感交集。。

一个页面Ke以完成的任务现在要跳转好几个页面增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，主要原因是页面内容量是用户一眼就Ke以kan出来的，用户无法立刻感知这个任务有多少步骤。主要原因是无知，所以无畏。等到用户知道这个任务步骤数的时候，整个任务douYi经完成了，可不是吗！。

场景化

）信息架构重构

真香！ 移动端hen多时间处于无线数据网络状态下,网络状况因为地点不同有所变化。

总的来说,移动端和PC端的交互设计在屏幕尺寸、 屏幕比例...

没有一个放之四海而皆准的设计原则，所有的设计理论dou不Neng罔顾实际的应用场景而机械的套用。Ru果前后步骤关联性比较强，我建议不要分页展示。比方说 目前hen多的短信验证码dou选择把“输入手机号”和“输入短信验证码”放到两个页面我个人对此持保留意见。设想一个场景， Ru果用户迟迟没有收到短信验证码，那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查kan，Ru果手机号和短信验证码放在同一个页面就简单多了，请大家务必...。

所以呢，Ru果你要为一个PC端网站Zuo一个移动端app，先说说要Zuo的就是信息架构的重构。PC端有足够的空间Ke以把所有的功Neng直接展示给用户， 而移动端只Neng展示一些主要的功Neng，一些次要的功Neng需要放在下一层级，脑子呢？。

对于上面信息架构重构的观点可Neng会有人存我们不担心用户不滑动，主要原因是用户不滑动就无法完成操作。那么在这种情况下是否Ke以继续延续PC端的布局样式？

主要原因是移动端用户使用环境geng加的复杂多变， geng容易受到干扰，所以必须保证界面信息的简单直观。Ru果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，geng准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可Neng在PC端只占了页面的1/，而移动端占了一整个页面给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑，当冤大头了。。

给你的界面Zuo减法

歇了吧... 在一个页面中， 虽然内容hen多，但是用户真正感兴趣并且会与之交互的内容hen少。Ru果我们Ke以获知用户在特定的场景下对于某个内容诉求hen高， 那么我们突出展示；反之Ru果诉求hen低的话，我们Ke以隐藏。

关联化

说实话... 经常遇到一些南宁网站建设的设计师， 他们之前负责的dou是PC端产品，突然改Zuo移动端，会不自觉的把PC端的一些设计理念“移植”到移动端，出现了水土不服。有经验的设计师一kan你设计的移动端页面就知道你之前Zuo的dou是PC端，这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”，别人就知道你老家是哪里一样。那么移动端和PC端上的区别究竟在哪呢？

大屏到小屏

前面我们主要强调了移动端产品要尽量减少界面中信息量。可不Ke以在不改变产品信息架构的前提下通过交互设计上的改动来完成目标呢？ 我当场石化。 我给大家介绍两个方法：场景化和关联化。

鼠标到手指

好家伙... 12306所有的信息dou属于同一层级，让人抓不到主次。而且界面中出现了过多的配色，geng增加用户的信息获取成本。