做有价值的网站,助力企业发展!

专注于企业网站建设、营销型网站建设、Web/微网站建设、企业营销推广

百度地图|网站地图|RSS地图

服务热线:

0371-55180025

当前位置:伟之琦建站 > 新闻中心 >> 建站相关 >>

APP直接套用PC端设计?APP和PC端的交互设计有何区别

以往一直负责PC端网页设计的设计师,突然改做APP设计,很容易会把PC端网页设计的一些理念放到APP设计上,使整个APP设计的用户体验显得十分尴尬。那么,APP和PC端的交互设计有何区别呢?下面就让郑州建站公司简单说说。

区别一:大屏到小屏

APP直接套用PC端设计?APP和PC端的交互设计有何区别

首先,APP和PC端的网页设计最大不同就是屏幕大小,而屏幕大小也直接决定界面信息量,PC端一个页面能展示的全部信息,可能需要APP好几个页面去承载。

可能有设计师认为,屏幕尺寸不一样做自适应就可以啦,APP页面设计长点,让用户滑动都无所谓哦!这个方法当然可行,而且还非常简单粗暴,但你有问用户是否愿意滑动页面吗?

根据埋点数据显示,APP页面超过一屏内容,其曝光率与点击量都会急剧下滑,这说明用户很少主动滑动查看一屏以外的内容。因此APP中的重要信息必须保证用户能在一屏内看到。

从大屏到小屏,设计师需要考虑哪些方面?

1.信息架构重构

APP直接套用PC端设计?APP和PC端的交互设计有何区别

如果你要为PC端网站做一个手机APP,首先要做的就是信息架构重构。PC端有足够的空间可以把所有功能直接展示给用户,但手机屏幕小只能展示重要功能,其次次要功能则需要放在下一层级。

2.一个页面,一个任务

APP直接套用PC端设计?APP和PC端的交互设计有何区别

手机用户使用环境复杂多变,容易受到干扰,如果页面中展示过多的信息量,容易让用户混乱。同样的几个输入框,在PC端可能只占页面的1/4,但在手机占了一整个页面,这给用户带来的观感是完全不一样的,慢慢页面很容易会让用户产生焦虑。

这就需要将一个页面可完成的任务,改为跳转好几个页面,增加操作步骤。有设计师可能会担心用户会因为步骤多而退出,事实上页面内容量是用户一眼就可以看出来的,但用户无法立刻感知这个任务有多少个步骤,等到用户意识到这个任务步骤数时,整个任务可能已经完成了。

此外,前后步骤关联性较强的任务,建议不要分页展示,如「输入手机号」和「输入手机验证码」,如果它们分别放到两个页面,若用户迟迟没有收到验证码时,要么就是手机号码输错,要么就是网络故障,当然还有其他原因,但用户并不清楚自己到底是什么原因导致的,有可能需要返回上一层查看找出原因,这会增加用户的负担。如果「输入手机号」和「输入手机验证码」放到同一个页面,这就会简单很多了。

3.突出重要内容

APP直接套用PC端设计?APP和PC端的交互设计有何区别

页面信息量多,我们需要控制页面的信息量,如果页面信息量少,我们则需要突出重要内容。

举个例子,火车换乘时,用户最关心的就是出发/到达站、出发/到达时间和票价。但12306就像PC端直接换成APP一样,所有信息都属于同一层级,无法突出主次,界面中出现过多配色,增加用户的信息获取成本;飞猪则将其他次要信息进行降低灰度,把用户的焦点放在重点信息上。

区别二:鼠标到手指

APP直接套用PC端设计?APP和PC端的交互设计有何区别

PC端用户与界面进行交互靠的是鼠标,手机用户靠的是手指,相对来说,鼠标操作会更加精准,因此手机界面中的元素尺寸和间距都会比PC端大。例如:如果APP界面的输入框还沿用PC端的样式,Icon也很小,用户用手指点击时很容易会误操作。

区别三:给界面做减法

之前我们提到APP设计要尽量减少界面的信息量,那可不可以在不改变产品信息架构的前提下,通过交互设计改动完成目的呢?当然可以1

1.场景化

如果页面中内容很多,但是用户真正感兴趣且会与之交互的内容很少,那么我们就可以突出用户关注度高的内容;反之如果关注度低,那么我们也可以适当地隐藏。

例如:知乎中,用户在搜索结果页滑动大概3屏后,会出现「向知友提问」按钮。这是因为用户滑动了3屏,说明用户可能对当前搜索结果不满意,这是引导用户去提问,用户的意愿会更高。当如果我们全程都展示这个提问按钮,可能会减少用户的实际浏览区域,并造成干扰。

除了同一个流程,需要根据用户使用场景不同,而提供不同功能外;同一个功能,我们也要根据用户使用场景不同,而选择不同展示方式。

再以「知乎」举例,为了方便用户可以快速查看下一个回答,知乎给用户提供一个浮动按钮,当用户刚进入这个页面,为了降低用户的学习成本,知乎会直接告诉用户这个按钮的功能;当用户开始滑动进入阅读答案,按钮就会被缩小,避免对界面信息造成遮挡。

2.关联化

APP直接套用PC端设计?APP和PC端的交互设计有何区别

梳理信息之间的关联性,将相互关联的信息整合在一起,减少页面中的信息量。例如:支付宝账单的月份筛选功能,之前用户需要点击日历图标,现在用户只需直接点击月份就可以了。

其实,PC端和手机APP的交互设计,无论是布局还是用户操作体验,都有很大区别,设计师应该根据用户的操作习惯来设计APP,直接套用PC端那套设计方式,明显不合适。


原创声明:本站文章未经许可请勿擅自转载,如需转载请注明出处<郑州网络公司>

分享到:

案例展示

    收缩
    • 在线咨询
    • 业务咨询:
    • 售后服务:
    • 技术支持:
    • 电话咨询
    • 037155180025
    • 13383867325