个人资料页设计:App 个人中心与设置页改版前后对比
一个把十三行塞进同一个扁平列表的个人资料页,以及修好后的同一个页面:一行身份信息、一张真正的会员卡、会显示当前状态的分组设置,还有一个安静的退出登录。每处改动并排对比,附免费 Figma 文件。
个人资料页有三项任务:展示你是谁,展示你拥有什么,并给你一个修改设置的地方。下面的初稿三样都做了,但它把一切塞进了十三行的扁平列表,积分被挤成一行小字,而退出登录却成了整个页面最响的元素。这就是一个杂物抽屉:东西都在里面,却什么都不好找。
修改后的版本保留了所有功能。它让每项任务拥有自己的区块,并让每一行展示自己的状态,这样大多数设置不用点开就能读到。
整个页面,改版前后
初级设计师初稿
修改后
左边,所有东西的分量都一样。头像、姓名、邮箱和手机号堆在中间,催促用户的横幅就贴在积分上方,然后十三行一路排到页面底部,每行的图标颜色各不相同。底部宽大的红色按钮是整个页面最强的颜色,所以眼睛最后找到的,偏偏是那个谁都不该误触的操作。
右边,页面只有四个区块和一种颜色。身份行很短,卡片承载积分,磁贴和设置列表容纳其余一切。品牌钴蓝色出现在卡片、编辑按钮和当前标签页上,红色只出现一次,就是退出登录,而且是纯文字。
改了什么,用数据说话
来自两个 Figma 画板的同一页面所有差异:
| 初级设计师初稿 | 修改后 | |
|---|---|---|
| 身份信息 | 居中堆叠:头像、姓名、邮箱、手机号、编辑资料 | 一行:头像、姓名、邮箱、小型编辑按钮 |
| 积分 | 一行 9 pt 文字:“Points: 12480 | Tier: Gold | Next: Platinum (13000)” | 一张卡片,44 pt 的数字加上“距离铂金还差 520 积分” |
| 菜单 | 同一列表 13 行,7 种图标颜色 | 3 个磁贴和 5 个分组行,1 种图标色调 |
| 行状态 | 只有通知(角标)和邀请好友(标签) | 数量、余额、卡片、语言和开关,全部可见 |
| 退出登录 | 38 px 红色按钮,通栏宽度 | 17 pt 红色文字,居中 |
| 标签栏 | 5 个标签,实心和线框图标混用 | 悬浮栏中的 5 个标签,统一图标风格 |
| 边距 | 左 14,右 12 | 两侧都是 20 |
修改一:用一行来表示你是谁
之前
之后
居中的头像、姓名、邮箱、手机号和一个线框的编辑资料按钮,下方是一条黄色横幅;对比之下是一行:头像在左,姓名和邮箱在旁边,右侧是一个小型编辑胶囊按钮。
居中堆叠的写法花了大约 160 pt 的高度,只为说出一个姓名和一个邮箱。手机号是其中最没用的一行,而编辑资料按钮是一个完整的线框控件,和下面的所有内容争夺注意力。
修改方案是一行:头像在左,姓名和邮箱紧随其后,编辑是末尾的一个小胶囊。这个区块高 60 pt,而不是 158 pt,所以下一个区块起点更靠上。那条催促横幅“完善资料,立得 50 积分!!!”也从页面顶部消失了。完善资料的请求应该出现在首次使用之后,或放在编辑页里面,而不是压在你真正想看的东西上面。
可复用的规则:人都知道自己的名字。给身份信息一行就够了,把空间留给会变化的内容。
修改二:把一行文字变成一张卡片
之前
之后
一个小标志后面跟着一行很小的文字“Points: 12480 | Tier: Gold | Next: Platinum (13000)”;对比之下是一张深蓝色卡片,上面有标志、一个金卡标签、大号的 12,480、一条进度条和“距离铂金还差 520 积分”。
积分是会员打开这个页面的原因,而初稿却把它设成了页面里最小的字。数字都在,但读者得自己做减法:13,000 减 12,480。
修改方案替他们做了这个减法。卡片用 44 pt 显示积分,等级用金色标签,进度条填满 83%,再加上一句“距离铂金还差 520 积分”。金卡从 10,000 起算,所以 12,480 已经走了大半段路,进度条一眼就能看出来。卡片同时使用了品牌钴蓝和代表等级的那一抹金色,让它成为页面上最强的区块,这是对的:它是这里唯一回馈用户的东西。
可复用的规则:展示算式的结果,而不是参与计算的数字。
修改三:给设置分组并显示它们的状态
之前
之后
同一列表里的十三行,从我的订单到条款与条件,每行都有自己的彩色图标和一个箭头;对比之下是三个磁贴(订单、钱包、收藏)和一个包含五行的白色分组:地址、支付方式、通知、语言、帮助与法律。
十三行大小相同、箭头相同、还有七种图标颜色,根本没有秩序。我的订单和条款与条件看起来同样重要,而且在你点进去之前,初稿对每一行背后是什么只字不提。
修改方案按使用频率给列表排序:
- 订单、钱包和收藏变成磁贴。 它们是人们去得最多的三个地方,所以拥有大的点击区域和各自的实时信息:“2 个进行中”、“$42.50”和“18 件”。
- 设置放进同一个分组。 地址显示“已保存 2 个”,支付方式显示“Visa ·· 4242”,语言显示“English”。用户不用点击就能确认。
- 通知变成开关。 它只是开和关的选择,不需要单独一个页面。
- 很少使用的行移到帮助与法律后面。 邀请好友、给应用评分、关于我们、隐私政策和条款依然存在,只是多一次点击。
初稿里的每一行仍然可以到达。什么都没有删除,只是放到了它的使用频率应该在的位置。图标也共用一种色调,所以页面上的颜色有了含义:品牌色标记的是处于活动状态、可点击的东西。
修改四:让退出登录安静下来
之前
之后
一个通栏的红色按钮,白色大写字母写着 LOG OUT;对比之下是红色的“退出登录”四个字,17 pt,居中,四周留有空白。
实心红色按钮是初稿页面上最响的控件,它在求你去按。退出登录很少用,又带点破坏性,因为它会把人丢回登录页。它应该容易找到,却难以误触。
修改方案保留了红色,因为红色仍然在告诉你这是一个“离开”的操作,但去掉了填充。它是设置分组下方的一行纯文字,四周留白。它依然只需一次点击,却不再抢走视线。
那些较小的修改
- 用大标题代替导航栏。 带返回箭头、分享图标和太阳图标的“我的资料”,变成了 34 pt 的“个人资料”。标签栏已经告诉你身在何处,所以返回箭头没有了,通知铃铛成了唯一剩下的图标。
- 统一边距。 初稿左边 14,右边 12。修改后两侧都用 20,区块之间用 14。
- 统一字号体系。 初稿的文字从 8 到 15 px 不等。修改后使用 iOS 的 11 到 34 pt 字号。
- 统一强调色。 初稿有七种图标颜色、一条黄色横幅和一个红色按钮。修改后只有品牌钴蓝、等级用的一抹金色,以及退出登录的红色。
- 悬浮标签栏。 五个标签保留,但使用同一种图标风格,只有当前标签是实心的。
检查你自己的个人资料页
| 问题 | 为什么重要 |
|---|---|
| 身份信息是一行吗? | 人都知道自己的名字,所以它不该占 160 pt |
| 能在一秒内读懂积分或状态吗? | 小字摘要会让读者自己算数 |
| 最常用的入口比很少用的更大吗? | 等权重的行会藏起真正重要的东西 |
| 每个设置行都显示当前值吗? | 状态就是大多数访问的答案 |
| 强调色超过一种吗? | 七种图标颜色等于没有意义 |
| 退出登录比编辑更响吗? | 罕见的操作应该是安静的那个 |
获取 Figma 文件
免费文件包含两个页面,修改后的区块都做成了组件。
免费 Figma 文件
个人资料页改版,前后对比
两个页面以及每个部件都是 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。
常见问题
App 的个人资料页应该展示什么?
这个人是谁,他拥有什么,以及修改设置的入口。把身份信息放进一行简短的行里,把积分、余额或套餐放进一张卡片,再把设置分组放在下面。
退出登录按钮应该放在个人资料页的哪里?
放在设置的底部,最后一个分组下方,用纯文字。它应该够得着,但绝不能是页面上最响的控件。
设置列表应该有多少行?
首屏五到七行效果不错。把很少使用的,比如法律页面和应用评分,放到“帮助与法律”这样的一行后面。
设置行应该显示当前值吗?
应该。像“English”或“Visa ·· 4242”这样的值无需点击就能回答问题,而对于简单的开或关选择,开关比一整行更好。
如何在个人资料页展示会员积分?
用一张卡片,数字要大,当前等级用标签,再加一句说明下一步是什么,比如“距离铂金还差 520 积分”。替读者把减法做好。
来源
- 两个页面都是我们自己在 Figma 中设计和测量的。App、会员和数字都是虚构的。
- 文字大小遵循 Apple 人机界面指南中的 iOS 字体比例。
- 头像照片:Pexels 上的 Tamra Creatives Agency。
- 最初作为轮播图发布于 App Brainy。
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
