旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 热门文章 > UI设计 > 如何做好手机端网页设计
如何做好手机端网页设计
时间:2020-08-24来源:www.aaa-cg.com.cn点击量:作者:Gella
时间:2020-08-24点击量:作者:Gella

  你有没有想过? 移动端页面总是做不好,是设计水平不够还是方法出了问题?
 

  在日常生活中,大部分人对于手机的使用度远超过电脑,随着5G时代的到来,对于手机的依赖程度仍呈现上升的趋势,而早在几年前,PC端流量就开始呈现断崖式的下滑。时至今日,有90%-95%的流量来源于手机端,所以手机端页面就成了现在设计的重中之重。但是现实工作中,很多设计师对于手机端页面设计却不够擅长!是因为太难了吗?今天AAA教育郭老师就针对如何做好手机端网页设计进行简单的说明。
 

  一、手机端网页设计与PC端的区别
 

  区别一:视觉浏览比例不同
 

  在设计工作进行时,PC端页面在PS中实时浏览的视觉效果,基本上就可以对应其完成上线后的实时效果,电脑上视觉浏览比例和上线比例近乎1 : 1;而手机端页面在PS里实时看到的效果与真正在APP中展示的会有很大差距,电脑上视觉浏览比例和上线比例1 : ?,如图所示:

 



 

  区别二:信息的传达更难把控
 

  正常人在把玩手机的时候,眼睛与手机的举例大概会有20公分左右的距离,再加上制作时的视觉感受与上线后,在视觉比例上也会有一定差距,所以这就导致手机端对于如何将画面中的信息准确、清晰的传达给用户,变得更加难把控。

 



 

  二、手机端网页设计需要注意什么?
 

  1、内容识别性
 

  这里就要问:做设计的目的是什么?是做出来一张复杂、炫酷、NB的图就是好的设计了吗?当然不是,而是结合设计手法,将需要表达的信息通过图文并茂的方式向用户准确无误的传达,向用户传递信息才是核心。 这也是很多设计师在做手机端页面的一个通病,仍然按照PC端设计思维进行,忽略了在手机上实际的效果呈现,这样的作品会让设计工作大打折扣,事倍功半。所以我们应该有竖版作图的思维:

 



 

  2、内容流畅度
 

  很多人在做页面设计时,往往只关注局部而忽略整体,导致内容流畅度缺失,无法激起用户继续阅读的兴趣。这也直接或间接的影响了用户在页面上的停留时间,对于内容传播也起到了很大的阻碍,商业价值也会随之降低。为什么手机端页面的内容流畅度相对难把控呢? 因为手机相比电脑而言,屏幕更小,对于信息的的捕捉能力远小于电脑。若把控能力不强,页面元素稍多一些就很容易乱。

 



 

  三、如何做好手机端设计?
 

  前面分析了那么多,接下来具体应该怎么做才能提升手机端设计的能力?
 

  1、竖屏构图
 

  竖屏构图并不单单指上下结构,也强调了“屏”的概念,就是常说的:一屏、两屏……手机端页面设计中,把每一屏当做一个制作单位,会很大程度上提升作品内容的流畅度以及用户捕捉信息的效率:

 



 

  因为在手机端设计中,横向的构图空间狭小、拓展性很弱,而竖向构图则更灵活,可塑性更强,也更符合我们的浏览习惯。这类一屏一个制作单位的形式比较适合详情页的制作。
 

  在一些手机端专题页设计中,我们很难将每一个内容都做成一屏的展示形式,因为在强调视觉的同时,还要兼顾运营、销售的特质,很多运营侧会要求一屏内多展示一些内容。尽管如此,我们仍然可以按照竖屏构图的思维方式设计:

 



 

  所谓竖屏思维可以理解为:以手机的一屏为单位,要让每一屏不管是视觉还是信息传达,都能给人一种一目了然、舒服的视觉感受。
 

  2、卡片式设计
 

  在手机上,把每个信息模块按照类似卡片的形式展示,会让页面在手机端展示时的内容信息更具条理性,减少用于捕捉信息的阻碍,在这方面App Store做的就不错:

 



 

  卡片式设计比较适用于手机端页面,提升了用户捕捉信息的效率,在视觉上也很舒服、和谐。这种形式在PC端不太好发挥。
 

  3、少即是多
 

  由建筑大师路德维希·密斯·凡德罗提出的:“Less is more",但又绝不是简单得像白纸一张,让你觉得空洞无物,根本就没有设计。设计中的理解就是留白,手机的屏幕本就远小于电脑,加之用户在页面上的停留时间短暂,在短时内如何把有效的文字信息、视觉信息传递给用户就是手机端设计不得不考虑的问题。减少一些不必要的装饰元素对于信息传递的阻碍,做到元素减少,信息传达的更多。
 

  4、放大图文
 

  由于手机端用户浏览节奏比较快、停留时间短,所以要尽量图文放大,以便提升其对用户的视觉冲击力以及用户捕捉信息的速度,同时结合前面所说的竖屏构图:

 



 

  图文放大,对于提升信息辨识度以及视觉美观度都有很大帮助,同时也会让作品留给用户的视觉印象更加深刻。
 

  四、总结
 

  所以说,竖版页面总是做不好是设计水平不够吗?其实并不是!只是我们还按照PC端设计的思维模式去做手机端已不再合适,而是要转变方法,针对不同的使用场景要在思维上有所区分。手机端最主要的还是:在短暂的时间内尽可能多的传达有效信息,减少用户的浏览压力。因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请访问AAA教育,包含有关在该领域工作的更多相关文章。



 

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

老师想和你聊一聊

©2007-2021/ www.aaa-cg.com.cn 北京漫动者教育科技有限公司 备案号:京ICP备12034770号 监督电话:010-62568622 邮箱:bjaaa@aaaedu.cc