燕安网络

手机端和电脑端上的交互设计有什么区别?

发布时间:2021-03-18 16:56:39    阅读:668    作者:燕安网络
我经常遇到一些以前负责PC端产品的设计师,但是他们突然变成了移动终端。他们会在不知不觉中将PC端的某些设计概念“移植”到移动终端,并且他们将变得习以为常。当一位经验丰富的设计师查看您设计的移动页面时,他会知道您之前所做的一切都在PC端。这是一件非常令人尴尬的事情。就像您说“很高兴见到您”一样,其他人也会知道您的家乡在哪里。那么,移动终端和PC终端有什么区别?
大屏幕到小屏幕
直截了当,移动终端和PC终端之间最根本的区别在于屏幕的尺寸。屏幕的大小直接决定了界面上的信息量。 PC端的一页可以显示完整的信息,而移动端可能需要几页才能携带该信息。
一些设计师可能会认为屏幕大小不一样,无法自适应,但是移动页面应该更长一些,并让用户滑动。这是一个非常简单的解决方案,但它忽略了一个重要前提:用户愿意刷卡吗?根据嵌入的数据,大多数超过一个屏幕的移动页面的曝光率和点击量将急剧下降,这表明用户很少滑动即可查看一个屏幕以外的内容。对于移动产品,必须确保一些重要的内容,以使用户可以在一个屏幕上看到它。
1)信息架构重建
因此,如果要为PC站点制作移动应用程序,那么要做的第一件事就是重建信息体系结构。 PC终端上有足够的空间来直接向用户显示所有功能,而移动终端只能显示一些主要功能,而一些次要功能则需要放在下一级。
例如,应用商店中的用户可以评估此评论是否对他们有帮助。 PC端的处理方法非常简单,可以直接显示给用户。移动终端要求用户长按此注释以弹出评估列表。也许许多用户今天阅读了这篇文章,发现此功能仍然存在。没关系,尽管我以前不知道,但它不会影响您的正常使用。适当降低辅助功能的信息级别是移动设计人员必须考虑的事情。
2)一页,一项任务
某些人可能不同意以上的信息架构重建观点。对于某些表单页面,例如想要借钱或转账的用户,该用户必须填写一些信息。在这些情况下,我们不必担心使用用户不滑动,因为用户不滑动就无法完成操作。因此,在这种情况下,PC的布局样式可以继续吗?
以上述传输过程为例,PC终端直接显示在一页上,而移动终端分为两页。为什么会这样呢?将备注/付款说明放在首页上可以吗?
因为移动用户环境更加复杂和多变,并且更容易受到干扰,所以有必要确保界面信息简单直观。如果页面上显示的信息太多,很容易使用户感到困惑。这里提到的信息量不是绝对信息量。更准确的陈述应该是用户主观感觉到的信息量。在PC端,相同的输入框可能只占据页面的1/4,而在移动端,则占据整个页面的整个页面,从而为用户提供完全不同的外观和感觉。页面被塞满了,很容易使用户感到焦虑。
现在,可以在一页上完成的任务必须跳到几页,并且已添加了操作步骤。用户害怕“内容太多”,不是害怕“步骤太多”吗?不用担心,因为用户可以一目了然地看到页面的内容,并且用户无法立即感知到任务有多少步骤。因为无知,所以无所畏惧。当用户知道此任务中的步骤数时,整个任务已完成。
在此借阅的修订版中,用户必须首先输入借贷金额以借钱,然后将向用户显示其余的借贷期,还款方式和利息信息。此信息都与用户的贷款金额有关。用户尚未输入贷款金额,并且该信息对用户没有意义。最好将其隐藏起来,以使用户的注意力可以集中在完成贷款金额的输入上。
没有一种适合所有人的设计原则,并且无论实际应用场景如何,所有设计理论都无法机械地应用。如果先前步骤和后续步骤之间存在很强的相关性,建议不要在页面中显示它们。例如,许多当前的SMS验证码选择将“输入手机号码”和“输入SMS验证码”放在两页上。我个人对此有保留。想象一个场景。如果用户很长时间未收到SMS验证码,则需要确定电话号码错误,网络故障或其他原因。用户需要返回到上一页进行查看。如果将手机号码和SMS验证码放在同一页上,则非常容易。
3)突出重要信息

我们前面提到的主要是控制移动页面上的信息量。页面上的信息较少好的?当然不是。让我们看一下火车转乘场景。如果您想从南京前往新疆的阿克苏,则没有直达火车,因此只能从西安转乘。让我们看一下以下两种产品的处理方法,左边是12306,右边是Fliggy。 12306仍然是PC端样式的流行,问题出在哪里? 12306上显示的信息量与Fliggy相似。唯一的区别是12306显示两次旅程的开始和结束时间,而Fliggy仅告诉用户整个旅程的开始和结束时间。
显然,问题不在于信息量,而在于信息呈现的形式。用户应更加注意的信息应使用户更容易发现。对于旅行,用户会更加注意出发/到达站,出发/到达时间和票价。在Fliggy界面上执行高斯模糊,发现用户的视觉焦点落在这些关键信息上。
12306的所有信息都属于同一级别,因此人们无法掌握主要和次要信息。并且界面中的颜色太多,这增加了用户的信息获取成本。
鼠标到手指
PC用户依靠鼠标与界面进行交互,而移动用户则依靠手指。鼠标的操作更加精确,因此移动界面中元素的大小和间距大于PC上的元素。以下图为例,左侧为pc终端,右侧为移动终端。移动终端的输入框仍采用PC终端风格,利率和手续费的详细图标太小,用手指点击时容易误操作。







减去您的界面

先前我们主要强调移动产品应尽量减少界面中的信息量。是否可以通过更改交互设计来实现目标,而无需更改产品信息体系结构?我将向您介绍两种方法:上下文关联和相关性。



1)场景

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

对于前面提到的示例,Zhuhuzhong,当用户在搜索结果页面上滑动约3个屏幕后,将出现“问一个Zhiyou”按钮。由于用户轻扫3个屏幕,因此表明用户可能对当前的搜索结果不满意。此时,引导用户提出问题,并且用户的意愿更高。如果我我们始终显示此按钮来提问,但这会减少用户的实际浏览范围并造成干扰。



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



仍然知道,为了方便用户快速查看下一个答案,为用户提供了一个浮动按钮。但是,当用户开始滑动页面时,此浮动按钮将更改其样式。这很容易理解。当用户仅进入此页面时,为了降低用户的学习成本,我们需要直接告诉用户此按钮的作用。当用户开始滑入阅读答案的状态时,请减少按钮的形状,以避免模糊界面信息。



2)协会

我们需要整理信息的相关性,将相关信息整合在一起,然后减少页面上的信息量。支付宝账单的每月过滤功能已修改。在用户不得不单击日历图标之前,现在用户可以直接单击月份。这是用户要过滤的月份,因此直接使用月份作为输入更为合适。
在线客服
立即沟通