页面设计中为什么要有优先级排列（移动端页面布局分析2018-04-07）

本文目录

• 移动端页面布局分析2018-04-07
• 页面设计的设计原则有哪些
• 为什么要页面设置后再进行版面的编排
• 5（1）页面示例-页面类型
• 界面设计风格确定的第一优先等级是什么
• 网页设计中的排版原则有哪些

移动端页面布局分析2018-04-07

移动端不同于PC端，最大的区别是屏幕尺寸的限制，相同的内容显示效率要低很多。如果直接按照PC端显示所有内容，页面信息自然混乱不堪。作为交互设计师需要对信息进行优先级划分，并且合理布局，提升信息的传递效率。下面来谈谈手机界面设计中常用到的一些页面布局。

1. list 布局
优点

list列表纵向长度没有限制，上下滑动可以查看无限内容；

list列表在视觉上整齐美观，用户接受度很高；

list列表可以展示内容长和次级文字的标题。

缺点

页面跳转后总是从头开始；

一页展示内容过多，用户疲劳度增加；

页面重点内容不突出。

场景

常用于并列元素的展示，包括目录、分类、内容等。

2. 网格布局

优点

各入口展示清晰，方便快速查找。

缺点

扩展性不如list列表；

标题不易过长。

场景

适合展示较多入口，且各模块相对独立。

3. 仪表布局
优点

展示更加直观。

缺点

信息展示量少，过于单一。

场景

适合表现趋势走向的展示。

4. 卡片布局
优点 每个卡片信息承载量大，转化率高；

每张卡片的操作互相独立，互不干扰。

缺点

每个卡片页面空间的消耗大，一屏可展示信息少，用户操作负荷高。

场景

适合以图片为主单一内容浏览型的展示。

5. gallery布局
优点

单页面内容整体性强，聚焦度高；

线性的浏览方式有顺畅感、方向感。

缺点

可显示的数量有限，需要用户探索；

不具有指向性查看页面，必须按顺序查看页面。

场景

适合数量少，聚焦度高，视觉冲击力强的图片展示。

6. 瀑布流布局

-

优点

瀑布流图片展现具有吸引力；

瀑布流里的加载模式能获得更多的内容，容易沉浸其中；

瀑布流错落有致的设计巧妙利用视觉层级，同时视线任意流动缓解视觉疲劳。

缺点

页面跳转后需要从头开始，加载量不固定，理论上是无限延展；

用户返回查找信息困难很大。

场景

适用于实时内容频繁更新的情况。

7. 手风琴布局
优点

两级结构可承载较多信息，同时保持界面简洁；

减少界面跳转，提高操作效率高。

缺点

同时打开多个手风琴菜单，分类标题不易寻找，且容易将页面布局打乱。

场景

适用于两级结构的内容，并且二级结构可以隐藏。,

8. 多面板布局
优点

减少界面跳转；

分类一目了然。

缺点

两栏设计使界面比较拥挤；

分类很多时，左侧滑动区域过窄，且不利于单手操作。

场景

适合分类多并且内容需要同时展示。

页面设计的设计原则有哪些

在公司进行APP制作的过程中，由于需要面对的用户多种多样，需要向用户展示的页面也应该是不同风格的，这样才能满足不同人的需求，并且这也是大数据分析后进行自动排列组合所推出的页面，那么在进行APP制作过程中，如何如何掌握这种技巧呢？下面天通苑java课程为大家介绍页面设计的设计原理。

1、通过运营方KPI、内容和优先级决定排版

如果您希望能够有很多用户点击页面，那么内容必须满足用户的需求。如今，APP经常使用各种维度，例如优惠营销活动，排名和朋友关系链来协助决策，以实现更高的转换率。但是在使用过程中APP的主页才是每个运营商竞争资源的战场。电子商务业务每天都需要不同的曝光和商品类别，因此我们经常会看到一排两列，三列，有时甚至四列设置不同的分类。

2、采用不同的排布方法，让页面更加丰富

在进行页面布局的过程中，可以爱同一个页面中采用不同的布局方法，这样能够让用户在丰富的内容中进行了解，并且还能在页面停留很长的时间。天通苑电脑培训发现现在很多购物网站都是采用这种方法，在页面主页中布局营销活动入口和各种品牌专题版块。

3、让用户选择到自己喜欢的，提高转化

在非常多的内容中，用户需要在多个分类中找到自己喜欢的种类，所以在进行设计的过程中，应该避免单单显示简单的标题和图片，这样用户无法在浏览的过程中选择自己喜欢的。如果想要得到很好的转化率，天通苑北大青鸟建议最好在设计内容的时候添加一些内容作为辅助信息，这样能够得到更好的效果。

4、对图片内容进行区分

在进行图片内容设置的过程中，如果图片能够区分内容，那么在提高用户的浏览效率有很大的帮助，并且能够对内容进行强化。在图片质量不高的情况下，可以采用弱化图片的方法，内容为主，图片为辅。

在学习电脑的过程中，很多知识都是相互贯通的，需要掌握更多的知识，去参考一些好的设计，成功的经验是值得很多人进行学习的。在进行电脑培训的过程中，学习更多有用的知识，并且多多和其他人进行沟通，对于掌握更多知识有很大的帮助。

为什么要页面设置后再进行版面的编排

一般的文档设计好之后须要打印出来,要打印,为了适合打印的要求(如:纸的大小,纸张的方向,页边距等等)我们就必须要对页面进行设置,为了不会产生重复的工作,所以我们要先进行页面设置,然后根据设置好的页面再版面的编排.
为什么会产生重复的工作呢?这是因为页面设置里的参数的变化会影响版面编排,如果先进行编排,再页面设置,很可能会将你已排好的版面变的不尽人意,你还得重新对版面进行编排.

5（1）页面示例-页面类型

APP页面大致分为四种类型：聚合类、列表类、内容类、功能类

聚合类（导航页）

聚合类多见于APP的首页，用于功能入口的聚合展示。将很多功能聚合在首页，用户可以在首页找到想要的功能入口，点击就能进入该功能模块。聚合类主要起到分流的作用，在设计聚合类页面的时候，根据用户的需求和产品功能的优先级进行排列，将优先级高的功能入口放在靠前的位置。
列表类（列表页 ）

列表类是APP最常见的页面类型，目的是展示同类别的信息，供用户筛选。虽然我们将这类页面命名为列表页，但是其展示形式是多样的，可以是列表的形式、也可以是网格的形式、还可以是卡片的形式。它们的本质都是展示多条信息，供用户选择。

当设计列表页时，应根据展现信息的不同特点选择恰当的展示形式（列表型、网格型、卡片型），或者同时提供多种浏览方式来供用户选择，同时要将用户关心的维度放在列表中展示出来（如标题、图片、销量、价格等），用户会根据这些维度的信息来进行选择，从而决定要不要点击进入下级页面。
内容页（详情页）

内容页主要是用来展示具体信息的页面，如商品详情页，书籍阅读页，资讯正文页等。
功能类（功能页）

为了完成某个功能而存在的页面即为功能页，常见的有搜索；发布状态页；收货信息的填写页面等。

界面设计风格确定的第一优先等级是什么

视觉优先。界面设计(即UI设计)使人与机器之间交换和传递信息的媒介。根据查询相关资料显示，截至2022年9月26日，在该设计风格确定的优先等级中，第一优先等级是视觉优先等级。该设计是对软件的人机交互、操作逻辑、界面美观的整体设计。

网页设计中的排版原则有哪些

一、直观性
所谓直观，指的是在打开的瞬间，用户能够明白这些内容和画面想要传达什么信息。看过之后不知道想要表达什么，或者觉得非常混乱，都是不够直观的表现。这是视觉心理的问题。为了留住读者，设计师需要让版式舒朗而明确，脉络清晰，用户一望而知之。只有让内容的价值为用户所了解，才能让人读下去，愿意了解，才有接下来的转化。
技巧一：图文互补
想要让用户更容易获取信息，需要让图片和文本相互配合，让视觉化的图片来营造氛围，优先传递大概的信息和感受给用户，文本则提供详细而精准的内容，确保信息准确可用。文本也需要尽量轻松易懂。
技巧二：利用信息图
复杂的信息可以借助信息图来呈现，这样可以让不易被人理解的数据和内容，更加视觉化的表达，用户在浏览的时候，可以更加轻松地理解，降低信息理解的门槛，更加直观。
二、易读性
文本内容是绝大多数设计中必不可少的组成部分。文字的编排需要以易读性为原则。字体过小、太密、过多装饰甚至跳跃性地插入页面布局中，都是不易读的表现，也是设计师没有为读者考虑的结果。在书写机会逐渐减少的现代,易读性是文本内容是最基本要求。文字的可读性要足够强，这不仅与文字的形体有关系,而且和大小、字间距、行间距都密切相关。
技巧一：疏密有致的文字排版
根据风格和需求来选用最易读的衬线体和非衬线体，文字排版比较通常的做法是将行高设置为1.5em- 2.0em，将段间距设定为2.0em，文本对比度为7:1，最小值为4.5:1。每行文本字数不要太多，最好控制在42字以内。
技巧二：清晰连贯的视线流
「视线流」更通俗的叫法是视觉引导，就是整个排版布局有一个相对清晰的阅读顺序和视觉线索，用户不会因为模棱两可的排版而选择错误的阅读顺序。视线流能够让用户下意识、按照顺序来获取信息，更加容易理解其中的内容。