移动端页面做不好,该如何解决?

你想过吗?

竖版的页面总是做的不好。是设计水平不够还是方法不对?

在日常生活中,大多数人使用手机的次数远多于电脑。随着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端设计的思维模式来做手机了。相反,我们需要改变我们的方法,针对不同的使用场景进行差异化的思考。移动端最重要的是:在短时间内传达尽可能多的有效信息,减轻用户的浏览压力。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容