你想过吗?
竖版的页面总是做的不好。是设计水平不够还是方法不对?
在日常生活中,大多数人使用手机的次数远多于电脑。随着5G时代的到来,对手机的依赖度依然呈上升趋势。早在几年前,PC端的流量就开始出现断崖式下滑。如今90%-95%的流量都来自于移动端,因此移动端页面成为了当前设计的重中之重。但是在实际工作中,很多设计师对于手机页面的设计还不够好!是因为太难了吗?
一、移动端和cp端的区别
区别一:视觉浏览比例不同
设计工作进行时,在PS中实时浏览PC端页面的视觉效果,基本上可以对应上线后的实时效果,电脑上的视觉浏览比例和在线比例接近1:1;而移动端页面在PS中的实时效果和APP中的真实显示会有很大差异。 电脑上的视觉浏览比例与在线比例差距1:? ,如图所示:
区别二:信息的传达更难把控
正常人在玩手机的时候,眼睛和手机大致会有20厘米左右的距离,生产时的视觉体验和去后的视觉体验会有一定的视觉比例差距在线,所以这导致移动端纠结于如何准确、清晰地将屏幕中的信息传达给用户,变得更加难以控制。
二、移动端的设计需要注意什么
1、内容识别性
这里有一个问题:设计的目的是什么?做一个复杂的、炫酷的、NB的画面是不是好设计?
当然不是,而是结合设计手法,通过图文结合的方式,将要表达的信息准确地传达给用户。核心是向用户传递信息。
这也是很多做移动端页面的设计师的通病。他们依然遵循PC端的设计思路,忽略了手机端的实际效果呈现。这样的作品会大大减少设计工作量。事半功倍。所以我们要有垂直布局的思想:
2、内容流畅度
很多人在设计页面时,只注重局部而忽略了整体,导致内容的流畅度不够,无法引起用户继续阅读的兴趣。这也直接或间接地影响了用户在页面的停留时间,也极大地阻碍了内容的传播,商业价值也会相应降低。
为什么移动端页面的内容流畅度比较难控制?
因为手机的屏幕比电脑小,所以捕捉信息的能力远不如电脑。如果控制能力不强,页面元素多一点就容易乱。
三、如何做好移动端的设计?
前面分析了这么多,接下来应该怎么做才能提高移动端的设计能力呢?
1、竖屏构图
竖屏构图不仅仅指上下结构,更强调的是“屏”的概念,也就是常说的:一屏,两屏……移动端页面在设计中,把每一屏都当作一个生产单位将大大提高工作内容的流畅度和用户获取信息的效率:
因为在移动端的设计中,横向的构图空间狭小,扩展性弱,而纵向的构图更灵活,更具延展性,更符合我们的浏览习惯。这种一屏一个生产单位的形式,比较适合详情页的生产。
在一些移动端专页的设计中,我们很难把每一个内容都做到一屏展示,因为在强调视觉的同时,还要兼顾运营和销售的特点。运营端会要求一屏显示更多的内容。尽管如此,我们还是可以按照竖屏构图的思路进行设计:
所谓竖屏思维,可以理解为:以手机的一块屏幕为单位,让每一块屏幕无论是视觉还是信息传递,都能给人清晰舒适的视觉体验。
2、卡片式设计
在手机端,各个信息模块以卡片的形式展示,这样会使得页面的内容信息在手机端展示时更有条理,减少使用App因为抓取信息的障碍Store 在这方面做得很好:
卡片式设计更适合手机端页面,提高了用户获取信息的效率,视觉舒适和谐。这种形式在PC端不太好玩。
3、少即是多
建筑师路德维希·密斯·凡德罗提出:“少即是多”,但绝不是一张白纸那么简单,让你感到空虚,根本没有设计可言。 (来源:百度)设计中的理解是留白。手机的屏幕比电脑的屏幕小很多。此外,用户在页面上停留的时间很短。如何在短时间内投放有效的文字 向用户传递信息和视觉信息是手机设计必须考虑的问题。减少一些不必要的装饰元素对信息传递的阻碍,使元素减少,传递的信息更多。
4、放大图文
由于手机用户浏览节奏较快,停留时间较短,因此需要将图文尽可能放大,以增强其对用户的视觉冲击力和用户捕捉信息的速度,结合上面提到的竖屏构成:
图文放大对于提高信息识别度和视觉美感非常有帮助。让作品给用户留下更深刻的视觉印象。
最后总结
那么,竖版页面总是做不好,是不是设计水平不够?其实并不是!其实并不是!只是现在我们不再适合按照PC端设计的思维模式来做手机了。相反,我们需要改变我们的方法,针对不同的使用场景进行差异化的思考。移动端最重要的是:在短时间内传达尽可能多的有效信息,减轻用户的浏览压力。