你有没有想过?移动端页面总是做不好,是设计水平

你有没有想过？手机页面总是做的不好，是设计水平不够还是方法有问题？

在日常生活中，大多数人使用手机的次数远远超过电脑。随着5G时代的到来，对手机的依赖依然呈现上升趋势。早在几年前，PC端流量就开始呈现断崖式下滑。如今，90%-95%的流量来自移动端，因此移动端页面成为当前设计的重中之重。

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

差异一：视觉浏览比例不同

在设计工作中，PS中PC端页面实时浏览的视觉效果基本可以对应上线后的实时效果。电脑上的视觉浏览比例和在线比例接近1:1；而移动端在PS中实时查看的页面效果与在APP中实际显示的效果会有很大差距。电脑上的视觉浏览比例和在线比例为1:?，如图：

第二个区别：信息的传递更难控制

正常人在玩手机时，眼睛和手机之间会有20厘米左右的距离。另外，制作时的视觉体验和上线后的视觉比例会有一定的差距，所以这导致手机越来越难以控制如何准确清晰地将屏幕中的信息传达给用户。用户。

二、移动网页设计要注意什么？

1、内容识别

问题是：设计的目的是什么？制作复杂、酷炫、NB 的画面是不是一个好的设计？当然不是，而是结合设计手法，将需要表达的信息通过图片和文字准确无误的传达给用户，才是将信息传达给用户的核心。这也是许多在移动页面上工作的设计师的常见问题。他们仍然遵循PC设计思维，忽略了在手机上的实际效果。这样的作品会大大减少设计工作，效果减半。所以我们应该有竖绘的思维：

2、内容流畅

很多人在设计页面时，往往只关注局部，忽视整体，导致内容缺乏流畅性，无法激发用户继续阅读的兴趣。这也直接或间接地影响了用户在页面上的停留时间，也对内容的传播起到了很大的阻碍，商业价值也会降低。为什么移动页面内容的流畅度控制比较困难？因为手机的屏幕比电脑小，捕捉信息的能力也远不如电脑。如果控制能力不强，页面元素多一点就容易乱。

三、如何设计好移动端？

之前分析了这么多，如何做好手机网页设计，下一步应该怎么做才能提高手机设计能力？

1、竖屏构图

竖屏构图不仅仅指上下结构，更强调“屏”的概念，也就是常说的：一屏，两屏……在手机页面设计中，每一屏都是视为生产单位。很大程度上提高了工作内容的流畅度和用户获取信息的效率：

因为在手机设计中，横向的构图空间狭窄，扩展性弱，而纵向的构图更灵活，更具可塑性，更符合我们的浏览习惯。这种每屏一个制作单元的方式更适合制作详情页。

在一些手机专页的设计中，我们很难把每一个内容都做成一个屏的展示形式，因为在强调视觉的同时，还要兼顾运营和销售的特点。许多运营商会要求在屏幕上显示更多内容。尽管如此，我们还是可以按照人像构图的思路来设计：

所谓竖屏思维，可以理解为：以手机的一块屏幕为单位手机网页制作，让每一块屏幕都给人清晰舒适的视觉体验，无论是视觉还是信息传递。

2、卡片设计

在手机上，以类似卡片的形式展示各个信息模块，会使手机上显示的页面内容信息更有条理，减少获取信息的障碍。对此，App Store 做的还不错：

卡片设计更适合手机页面，提高了用户抓取信息的效率，视觉上舒适和谐。这种格式在PC端不太好。

3、少即是多

建筑师 Mies van der Rohe 提出：“Less is more”，但绝不是一张白纸那么简单，让人感觉空虚，毫无设计感。设计中的理解是留白，手机屏幕比电脑小很多，用户在页面上的停留时间短手机网页制作，如何在短时间内将有效的文字和视觉信息传递给用户才是最重要的。移动终端设计不得不考虑的问题。减少一些不必要的装饰元素对信息传递的阻碍，从而减少元素，更多地传达信息。

4、放大图片和文字

由于手机用户的浏览节奏相对较快，停留时间较短，因此需要尽量放大，以增加对用户的视觉冲击和用户抓取信息的速度。同时，结合前面提到的竖屏构图：

图片和文字的放大对于提高信息的识别度和视觉美感非常有帮助，也会让作品给用户留下更深的视觉印象。

四、总结

所以，垂直页面总是因为设计水平不够而设计的很差？事实上，事实并非如此！只是我们还是按照PC端的设计思维模式去做移动端已经不合适了，而是要改变方法来针对不同的使用场景进行思维区分。移动端最重要的是在短时间内传递尽可能多的有效信息，减少用户的浏览压力。

UI 设计中的图标类型指南

UI设计中的配色策略

在UI设计中运用投影技巧

UI 设计中的 Feed 流设计指南

IOS和在UI设计上的差异

文章来源:http://baijiahao.baidu.com/s?id=1675894549199806073&wfr=spider&for=pc

感谢您的来访，获取更多精彩文章请收藏本站。