关于APP的排版设计（手机APP排版）
本文目录一览：
如何优雅的设计APP页面
小密圈被封了一段时间后终于重见天日了，这篇文章就来回答小密圈里的一个提问：如何设计一个APP页面。
看到这种提问，内心一般是抗拒的，因为产品设计是一个系统工程，单独拧出来其中一个流程来讲，都是割裂的，但在实际中又必须割裂出来，因为只有割裂出每个流程，把每个流程都想通想透，才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部，系统和部件，也是一门大学问。
1.明确页面设计在整个产品设计中的位置
互联网产品设计的流程大致是：产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期，所以前期必须去和产品经理或者用研人员反复沟通，明确产品定位、明确需求、了解业务流程，然后再梳理信息架构、产品的导航形式、任务流程和页面流。不管产品经理还是交互或UI，都要去了解这些，并反复沟通，这是基础，所有的设计脱离了用户和需求都是耍流氓。
其实这也是我在以前文章中反复强调的，只要你从事的是产品设计的工作（目前涉及到的分工主要有产品经理、交互设计师、视觉设计师），都要从产品设计整体去思考问题，产品经理不要只想着需求，交互也不能只想着体验，视觉也不能仅仅思考美不美观，这种眼界的提升，会直接影响到设计方案。
如果你已经建立了整个产品设计的知识体系，这只是第一步，下一步你还有考虑产品运营，考虑商务、考虑资本，这些都是需要设计师去了解的。周末和朋友聊天的时候，他打了个很好的比喻，把公司比作一个人，那么不同的职位就相当于每个人的感官和外在，产品相当于一个人的大脑，视觉相当于一个人的衣品，商务相当于一个人的沟通能力...。你如果只了解人的一个部分，就永远没办法理解这个人。
我目前就在深耕产品设计的基础上，在学习产品运营的知识。
2.确定页面目的和目标
明确了页面设计的上游的流程，接下来要做的，是确定页面的目的和目标。
目的和目标是两个概念，目的是你为什么要设计这个页面，目标是设计这个页面想要达成什么。例如，电商的商品详情页目的是介绍商品、帮助用户进行购买决策，目标就是提高用户下单的转化率。
作为同样的商品详情页面，不同的目的和目标，直接影响到设计形式。例如京东是自营商品，用户一次性购买的越多，其客单价会更高、运营成本也会更低，所以它的商品详情页的主要目标是提高加入购物车的转化率。而淘宝作为一个平台，单独购买一件商品和一次性购买多件商品都很重要，所以它的加入购物车和立即购买的优先级是同等重要的。
记住：明确页面目的和目标，这是你设计一个页面的指导思想。
3.确定页面的来源和去处
任何单独的页面都只是用户完成某个任务的其中一环，这个页面从哪来？能去哪？影响着页面的导航设计、以及工具栏上按钮的摆放。
为了延续性，继续拿淘宝详情页来举例。
返回页面按照设计规范，基本会放在标题栏的左侧，也有一些小众APP考虑到单手操作放在页面底部，其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上，例如淘宝的客服、店铺、收藏、加入购物车、立即购买；例如资讯类APP的留言、点赞、收藏等。
在考虑页面的去处的时候，一般有二级页面的形式和临时框的形式，临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框，而没有采用二级页面，这能减少用户在完成一个任务时的跳转步骤，提高转化率。
4.确定页面内容和优先级
经过前面三个步骤，页面框架基本成型，现在就要往这个框架填充内容。根据信息架构设计，基本会确定这个页面需要包含哪些内容（关于信息架构设计，可以参考 《90%的设计师都不知道的信息架构知识》 ）。
其次就要确定页面信息的优先级，确定优先级的判定依据就是第一步所说的当前页面的目的和目标，以及在做需求分析的时候，公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点：
①用对比的手法，明确信息层级，优先级越高信息表现越突出。例如上图格和销量字段的对比；
②优先级最高的放在用户第一眼能看到的位置（页面的第一屏）。例如将商品图片、标题、价格放在第一屏的位置，评论则放在第二屏的位置；
③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买，很弱，消息、帮助、我要反馈则更弱，所以被收起在右上角更多的icon中。
5.考虑技术的局限性
上次在做阅读APP的时候（pad平台），需要在E-Ink屏上的阅读页面增加竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是因为下屏没有做G-senser，所以是不支持竖屏的，只好放弃。如果我实现不去了解这点，做出来的方案只是浪费时间。
现实做设计的过程中还有很多类似的例子，不管是交互还是视觉，总是会想到一些创新好玩的设计形式，每当这个时候一定要去和相关技术人员沟通，确保设计方案的可行性。此外还要考虑项目周期，如果上线时间紧迫，其实是不允许设计师把设计形式做得很重的，只需要出一个简单的保底方案即可。
我自己就有在做设计之前和相关技术沟通想法的习惯，真的帮助很大。
还是文章前面的那句话，页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考问题，这样你永远是个美工，而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人，而不是简单画图的人。
【栅格】系统科学地打造APP界面
UI设计师设计一款APP的时候，最先要制定一套完善可行的设计规范，其中包含定义颜色、文字、图标、结构、布局、间距等要素。但是很多设计师往往会忽视一个重要的东西，那就是网格系统的构建。网格系统可以说是整个页面的骨架，它将页面中所有的设计元素高效有序地组织起来，从而让整个APP的设计具有 高度的一致性 和 规律性 ，提高设计师工作效率，避免凭感觉做设计。
?什么是网格系统？
网格系统是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，控制页面元素之间的对齐和比例关系，从而搭建出一个具有高度秩序性的页面框架。例如谷歌的 Material Design 中，将整个页面看做是一个网格，所有页面元素都与网格线对齐，并且将这一规则贯穿于整个产品的设计中。
?为什么要学习网格系统？
1️⃣/提高团队协作设计效率
当多名设计师共同设计一款APP的时候，网格系统就变得尤为重要。每个设计师都有一套自己的设计方法和习惯，如果没有一个统一的框架去约束的话，有可能在设计类似的组件或页面时，给出不同的设计方法和尺寸，这样的话整个APP内的页面都会比较混乱。例如下图，设计师A和B都各自遵循一套尺寸规范去搭建页面，但是设计结果给人的感觉却完全不一样。
因此，拥有一套 统一的网格系统 ，就能保证设计师们的产出具有高度的 一致性 、 规律性 ， 合作 起来更加地 高效 。
2️⃣/更加理性的做设计
UI设计是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计 更有秩序 和 节奏感 ，页面信息的展现 更加清晰 ， 提高阅读效率 ，从而提供给用户舒适的使用体验。
3️⃣/减少做决定的时间
很多设计师在处理页面细节的时候，经常会为了一个更好的视觉效果 反复推敲 （说的就是好像就是我本人），甚至为了一个图标到底应该使用20px好还是24px好而发愁，这样十分影响设计效率。即便几个页面的设计都达到了自己满意的视觉效果，也很有可能因为使用了不同的尺寸规则，而让设计缺乏了统一性。
制定完善的网格系统，能让设计师在页面布局和细节处理上更明确、自信、高效，一切设计行为都是有据可循的，减少因为一些细节推敲而造成的不必要的时间成本，拒绝拍脑袋做设计。
?网格系统的基本构成要素
1️⃣/单元格
网格系统里面最基本的元素“单元格”
2️⃣/外边距
在APP页面中，所有内容都会显示在中间的内容区域里，那么内容区域与屏幕的 左右两端所留出的空间 ，就被称为外边距。
外边距数值越大，页面显得越宽松，数值越小越显得比较“满”，因此需要根据自己实际的情况去确定具体数值。例如Airbnb的产品调性就是简约大气，整体布局比较宽松，因此在外边距的数值上选择的是48px。再例如网易云音乐，页面中以专辑、歌单等的封面为主，侧重于表现图片的视觉冲击力，因此页面内容区域比例会比较大，外边距的数值选择了32px。
3️⃣/列和水槽
页面的内容区域由N个列和（N-1）个水槽组成。在 WEB端 设计中，N的数值一般会采用 12、16、24 ，但是在移动端设计中，列的数量不宜过多，因为手机屏幕宽度有限，列的数量越多，页面就会被分割的越“碎”，在页面设计时就会越难把控。通常使用6栅格
水槽宽度数值对页面的影响，与外边距大体类似，即数值越大页面越宽松，反之亦然。例如Airbnb选择的是24px，而网易云音乐则是16px。
4️⃣/横向间距
在杂志的设计排版中，会经常使用到基线系统，即水平方向会分布着一条条间距相同的参考线，用以规范文字和图片在水平方向的节奏关系。然而平面排版中尺寸相对固定，移动端的屏幕宽度和元素组件高度确都具有不确定性，因此这套基线系统不能直接照搬过来，需要视情况使用。
在文本段落中，横向间距就可以使用基线系统，用以规范水平方向上文字的节奏关系，这种情况多出现于阅读类产品的正文页。基线的间距数值，则根据自身产品实际情况而定。例如下图中基线的间距设定为4px，则字号和行间距均使用4px的整数倍，因此每一行字都会准确压在基线上，保证了视觉节奏的一致性。
而组件与组件之间的横向间距，就和纵向间距的使用规律保持一致，即选用最小单元格整数倍的一系列数值，来规范组件在水平方向上的节奏关系。例如下 图中的最小单元格设置为8px ，那么横向间距的数值就会选用 8px 、 16px 、 24px 、 32px 等。（ 划重点 ）
?如何在APP设计中运用网格系统？
1️⃣/定义最小单元格
最小单元格的数值，大多数APP会选择 4-10 这个范围内一个 偶数 。那么选用哪个值最为合适呢？
这需要从两方面考虑，一方面是该数值是否能被大多数手机屏幕的宽度整除，即 广泛的适用性 ，另一方面是在具体使用时是否具有 一定的灵活性 。在适用性方面，4、6、8、10这四个数值都是基本可以满足的，在灵活性方面，4px表现最佳，但是页面就会被分割的非常细碎，在设计时比较难于把控。
因此我们需要根据APP的实际情况选择合适的数值，
4px或6px单元格比较适合页面内容信息较多 ，布局排版比较复杂的产品，例如淘宝、考拉等电商类APP；
8px单元格 对一般的设计场景都可以很好的满足，比较适合大多数的APP产品，因此是比较推荐使用的。
2️⃣/确定组件间距的增量关系
既然确定了最小单元格的数值，那么页面里所有的间距（包括水槽、外边距、横向间距等）、组件尺寸等都需要是最小单位的整数倍，以达到统一视觉节奏的目的。
例如单元格选择为8px，那么所有用到的间距尺寸将会是 8px 、 16px 、 24px 、 32px 、 40px ……( 知识点 )
3️⃣/确定列的数量
我们在设计APP页面时，用到的最多的布局方式就是等分布局，即页面内容区域被N等分，每一份的宽度则根据屏幕宽度自适应调整。那么就从这个角度出发，思考一下页面的网格应该设置为多少列，才能最大程度的满足各种等分布局的需要。
以下列举了几种典型情况（4列、10列、16列等大家有兴趣的话可以自己尝试一下，这里就不一一列举了），我们发现12列和24列除了5等分外，其他情况都可以满足，6列相对稍微差了一点，即结果为：12列=24列6列8列。不过其中24列显然将有限的手机屏幕分割的太碎了，因此在实际使用中还是以 12列和6列 为主。
4️⃣/Sketch布局设置
sketch自带布局设置功能，即可快速搭建出网格系统的参考布局，在平时做设计的过程中，可以经常使用⌃+L快捷键切换布局的显示（知识点：1、总宽=屏幕总宽度-外边距x2；2、偏移=外边距；3、“装订线在外部”不要勾选。）
5️⃣/实际运用
在首页设计的初期，还没有运用完整的网格系统进行规范，组件之间的间距规律基本以10px、20px、30px为主，各个布局模块之间没有形成内在关联的位置关系，视觉的节奏感不流畅，样式不统一。下面两个页面中，大部分元素都没有与网格贴合，布局无规律，没有一个客观的参考。
现在我们开始统一使用 8px、12列 网格系统，对首页进行一次布局优化。在下面三张图中我们看到，无论是顶部图标、入口图标、竖版封面还是横版封面，都由网格系统整体串联起来了，不再是凌乱独立的个体，阅读起来更顺畅。横向的间距也都开始使用 8px的整数倍 ，给用户带来更有节奏的浏览体验。
?网格系统在使用中需要注意哪些问题？
1️⃣/ 网格系统不要生搬硬套
并不是每个元素都必须要与网格对齐的，要根据自己的实际需要而定，如果硬套进去的话，页面就会显得很怪异。图中左面的页面的三个tab标题想要在网格上与封面对齐，但是标题之间距离太大，看起来很不舒服。这里三个tab标题的间距是固定值，不需要根据屏幕宽度去适配，因此要把三个tab标题看做是一个整体，即一个tab组件，组件左端与网格贴合即可。
2️⃣/网格不能被整除怎么办？
在做设计稿的时候，最常用的画布尺寸也许就是iPhone6/7/8的750*1334px了，我们会发现，在这个尺寸下如果以8px为最小单元格时，画布是无法被整除的，即750px宽度下除去所有外边距和水槽后，每一个红色的列宽实际为42.5px。那么就会产生疑问：这样的话，网格系统是不是就意味着不能用了？
其实这属于正常现象，因为没有哪一套网格系统，在任何屏幕分辨率下都能完美整除的。并且同样是8px单元格，在750px手机上无法被整除，而在720px手机上就完全没有问题。
例如下图的尺寸中，代表外边距和水槽的蓝色数值，是我们需要提供给开发的固定值，而红色的数值是根据屏幕实际宽度计算得来的。因此我们只需要保证提供给开发的数值遵循网格系统规律即可，至于页面中计算得来的数值，那0.5px的偏差肉眼是感觉不出来的。
✏️总结
网格系统是视觉设计师强有力的辅助工具，它能指导我们用更科学的方式打造APP界面，从而让页面布局规范有序、节奏统一，让设计师效率翻倍。然而正如文中所说，网格参数种类繁多，因此需要根据自身需要，构建一个适合自己、符合产品调性的网格系统。
原文链接 网易UEDC
APP首页常用排版
在设计APP首页时，产品总希望狂加功能，内容越多越好，而且还必须要简洁。每次到这种时候，设计师的内心都是崩溃的。但是一堆放不下，放那么多东西太乱了，各种反抗无效后，还是得以平静的内心把大量内容都放下，在心理默练1万次：可以的，可以的。
这里分享一些常用在首页的排版方式，让首页在内容很多的情况下，依然能保持界面整体简洁而有层级。也希望能在大家进行首页改版时能提供工作效率。
一、网格布局
网格列表是一个连续元素，该元素由棋盘式、规律性的小格子构成。网格列表最适合用于同类数据，典型的如图片、图标。
a、9宫格入口图标
b、两栏、三栏、四栏
c、不规则网格运营入口广告
二、卡片
卡片式布局经久不衰，在于它能有效的组织不同的内容，使得信息模块化，提升可点击感，很好的利用了页面的空间。
a、简约风卡片
简约风的卡片很适合信息内容单一重复的页面，不会造成页面杂乱
b、大色块或渐变色卡片
带背景色彩的卡片多用于运营广告、活动推广
c、滑动的卡片·
为了提供页面空间的利用率，我们看到越来越多的左右滑动条出现在页面首页。这种滑动操作不单纯作用于banner广告，也出现在产品其他功能模块上。
三、列表
列表是单一的连续元素以垂直排列的方式显示多行信息，有纯文本列表，也有图文结合的列表。首页使用列表布局，多用于推荐热门资讯。
