app列表页设计（App中列表、卡片和双栏卡片的布局思考）

本文目录

• App中列表、卡片和双栏卡片的布局思考
• 安卓手机设计规范

App中列表、卡片和双栏卡片的布局思考

各布局形式的特点

列表的布局常见于新闻类App。其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

卡片式布局常见于微博、Facebook等社交类App，也出现于其他不同类的App中，形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富，而且可以让用户对其进行评论、点赞等等操作、省去了跳转到详情页面的步骤。但由于卡片的信息很多，在小屏幕上并不能显示多个卡片，一屏内卡片数很少会超过3个。

而双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如Pinterest，一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

布局背后的行为逻辑

然而，为什么新闻类的多采用列表，社交类多采用卡片，图片类多采用双栏卡片？

我们回归到用户需求和行为模式来思考这个问题。

当我们在浏览新闻的时候，我们的需求是什么？大部分人的需求都是，一方面想要知道最近发生的一些事情，这是量的需求；另一方面，想要深入了解这一事情是什么，这是深度阅读的需求。而量的需求往往具有先行性，深度阅读是在其后的。基于这样的需求，用户在浏览新闻时候的行为模式大概如下：快速大量浏览→筛选→判断→快速大量浏览，如下：

由上图看出，用户在浏览新闻时，需要快速地处理大量的信息，而且高频地在极短时间内进行决策。因此，高效性就极为重要，假如在一屏中只显示一两条信息显然是不合适的。除此之外，展示形式的高度一致性和对展示内容的信息量进行严格控制也及其重要。高度一致性可以让用户快速理解展示形式，从而能自主选择自己想要的内容，便于筛选和判断。控制信息量能减少信息干扰，从而提高效率。由于这样的限制，列表就成为了新闻展示的合理形式。

同理，在用Pinterest时，我们究竟是想要什么？是找到最适合的图片。最适合，就会存在唯一性，就会有对比，取舍，选择。这也意味着，用户不是一张张按顺序浏览，而是反复地对比浏览，如下图：

基于这样的行为模式，要求布局形式：1.在一屏能内能展示足够多的内容；2.能让用户方便地对比内容。同时，对内容本身也有要求：1.内容本身是能被快速理解。2.内容本身具有可比性。

以厨房故事为例，这是一个款学习西餐的App，跟Pinterest毫无关联，却用着同样的布局。除了视觉美观这样感性的解释之外，我们可以从别的角度来理解。

假设这样一个场景，饭点到了，今天我想吃吃西餐，所以打开了每日厨房，挑其中一款来作为今晚的晚餐。因为，可能我这周就做这么一顿西餐，所以这次的选择必须精挑细选，既要好吃，还要颜值高，更要操作简单。在每日厨房的首屏中展示了各种成品的图片，这很好，我可以通过比较颜值来挑选我想要的。还有每款菜的收藏数，这大概能体现这款菜的综合评价，这也帮助我降低了选择的难度。很快，经过几番的对比，我最终选择了肉酱意面作为今晚的晚餐...

由以上场景可以说明，用户在使用这款App时，由于只能选择一次，所以他不得不对比内容。同时，易于理解的图片和数据促成了对比这一行为。所以，双栏卡片这样的布局是一个很好的承载方式。

以同样的思路，当我们在刷微博的时候，我们的需求又是什么？更加便捷地跟好友或者是关注的人进行互动。而进行互动的前提是，要对内容进行理解性地阅读，而不是快速地跳读。所以在浏览好友动态时的行为模型应该如下：

上图说明，在展示形式至少要满足2个条件。第一，需要承载致少两个纬度的信息，一是让用户理解的内容信息，二是让用户互动的操作信息；第二，在当前页用户可以对内容进行操作，甚至能在当前页把操作完成。然而，这还不能完全说明卡片式的布局是最合理的。这需要把微博内容的易理解性，信息的复杂度等因素综合考虑，卡片式的布局是一个比较好的解决方案。

由于卡片式的设计形式非常多样和灵活，适用范围也极为广泛。且不在这里作深入的探讨。

总结

结合各布局形式的特点和背后的行为逻辑，我们可以得出以下结论:

当用户的行为模式更倾向于高效，迅速地筛选信息，列表是一个非常好的选择。

当用户的行为需要反复对比信息，或者需要在单屏内获得更多信息，可以尝试用双栏卡片式布局。

当用户不仅仅需要消费所展示的内容，更愿意地对其内容进行互动，那么卡片式的布局可以优先考虑。

最后反思

本文仅仅是通过个布局形式的特点和背后的行为逻辑去思考布局的适用范围，显然，这种单一维度的思考，在实际案例中是不合适的。除了用户的行为模式意外，需要考虑到的因素可以有：

1.各布局形式视觉流特点（列表是自上而下的"I"型视觉流，双栏卡片是上下左右跳动的"z"型视觉流）

2.信息传达的优先性（列表更适用于文字传达，卡片式更适合图片传达）

3.布局的可延展性

4.对品牌的塑造性

5.等等

而针对每个场景，每个App，每个页面，每个考虑因素的比重也是不一样的，这需要具体问题问题具体分析。但无论怎样，设计的结果可以千变万化，但设计背后的逻辑必须是可以追本溯源的。

安卓手机设计规范

1080*1920
状态栏:24dp

APPBAR（导航栏）最小高度:56dp

菜单栏高度（包含底部）:48dp
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
图标和字体大小:

a、启动图标（home页或app列表页）整体大小为48 x 48 dp 没有空白的区域的7”完整图标。 当然也可以是包含空白区域的图标等于48dp。
b、操作栏图标，代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ，图形实际区域为 24 x 24 dp。
c、小图标/场景图标，提供操作或特定项目的状态。

比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ，图形实际区域为 12 x 12 dp 。
d、通知图标

如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。
对图标尺寸进行分类整理，便于界面整体调一致。
第三部分、android的按钮和弹出层的设计规范参考。
在720 x 1280 px 的设计稿上，有两个按钮（比如登录、注册）并排一行放置，按钮尺寸最小范围均为240 x 80 px ，换算为android开发单位就是 120 x 40 dp 。
Android APP设计字体单位： Sp 与 Px 的换算

sp与px的换算公式：sp*ppi/160 = px

ldpi（240*320）:120

mdpi（320*480）:160   倍率为1

hdpi（480*800）:240

xhdpi（720*1080）:320

xxhdpi（1080*1920）:480

xxxhdpi:640（1440*2560）:4
字体规范

注释最小字体12sp

文本字体14sp

文章标题/图标名称18sp

导航标题22sp
ppi为240时字体高度:

注释最小字体:18sp

文本:21sp

文章标题/图标名称:27sp

导航标题:42sp
字体:

Android 系统默认的英文字体 Roboto，默认中文字体都是droid sans fallback、思源黑体
material design字体规范:英文字体使用Roboto，中文字体使用Noto。
Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
字体配色:

颜色不宜过多，选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化，构成配色方案。

appbar背景使用主色，状态栏背景使用深一级的主色或20％透明度的纯黑。

小面积需要高亮显示的地方使用辅助色

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：

白色：
行距

用sp与px之间的关系进行换算。
元素之间间距间距:

所有可操作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
顶部状态栏高度：24dp

Appbar（导航栏）最小高度：56dp

底部导航栏高度：48dp

悬浮按钮尺寸：56x56dp/40x40dp

用户头像尺寸：64x64dp/40x40dp

小图标点击区域：48x48dp

侧边抽屉到屏幕右边的距离：56dp

卡片间距：8dp

分隔线上下留白：8dp

大多元素的留白距离：16dp

屏幕左右对齐基线：16dp

文字左侧对齐基线：72dp
另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。
单行、多行间距要控制下，做出规律。

标题42点（14sp）  副标题36点（12sp）

主标题与副标题间距12sp

注释:多行主标题行间距为8sp

标题48点（16sp）  副标题42点（14sp）

主标题与副标题（单行）间距8sp

标题42点（16sp）  副标题42点（14sp）

主标题与副标题（单行）间距10sp

带分割线的列表上下间距等分，距离为16sp

不带分割线的列表上下间距为32sp。

解释说明类的列表项上下间距为22sp。

悬浮按钮距离底部的距离为:18sp

文字排版

常用字号：

。12sp 小字提示14sp（桌面端13sp）

。正文/按钮文字16sp（桌面端15sp）

。小标题20sp Appbar文字24sp

。大标题34sp/45sp/56sp/112sp 超大号文字

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

心得与体会:设计时，可参照设计规范进行设计，具体到项目时可根据项目的具体情况制定规范。

尝试8的倍数，如果不合适，在3的倍率中能够被3整除。

设计来源于细节，再小的细节中也要分等级。

ps cc 2017

adobe xd 交互设计神器。

adobe stock?

svg格式字体

.9图片最小点击区域不足48dp*48dp