本篇文章作者分享电商开放后台的六大模块，并对其界面交互进行详细分析，能给产品岗的伙伴提供一些设计参考，希望能对你有所帮助。

商家运营后台，又叫开放平台，面向入驻平台的B端商家。B端商家的身份有很多，可以是没有技术团队的商家（有平台诉求），有系统的商家（找外包开发），有自己研发团队的商家。

开放平台的作用有很多，比如解决商家需后台的诉求，提高运营效率，数据获取等等。

一、目的

• 此文章目的是分享，若有建议欢迎评论区讨论。求同存异
• 因本人之前工作是分期电商领域，前后端都涉及。将自己的收获和新想法输出成PRD
• 后端电商系统涉及很多模块，此文章仅小部分功能点

二、框架/相关模块

• 登录。登录、登录风控、账户管理、角色管理
• 统计后台。查看数据
• 店铺信息创建。后端维护商家信息、开户信息等；前端页面配置
• 商品管理。创建、上架、下架
• 订单管理。导入发货信息、修改
• 用户管理

三、交互详细内容

1. 登录页面

简单版本：账户+密码（入驻平台，管理员会提供初始化密码）；点击忘记密码，进入到找回密码页面。

1）店铺未登录，进入店铺登录页面（设计出PC版图）

2）店铺X小时内未操作，自动退出登录，跳转到登录页面（X小时可配置）

3）登录风控

• 账户和密码当天同1个小时（可配置）失败X次，输入图形验证码，图形验证码Xmin内有效，点击验证码可刷新
• 账户、密码、验证码当天同1个小时（可配置）失败X次，此账户被临时冻结，次日凌晨自动解冻（研发可做个解冻账户功能）

备注：根据场景，还有其他风控逻辑（因IP变动而账户不安全）。

4）找回密码页：输入账户、手机号、验证码、新登录密码、确认新登录密码

账户：

• 手机号：必填字段，为空则红色异常提示请输入手机号，校验11位数
• 验证码：校验最新的验证码和手机号关联一致性
• 新登录密码：看设置规则（可否特殊符号、长度）
• 确认新登录密码：确认密码需和新密码一样

5）登录校验：验证账户、密码、验证码的准确性，保存登录信息：比如账户、密码、登录时间、登录IP

2. 统计后台

备注：

• 设计出图，每个数据模块颜色
• 通用数据+定制化数据（形式可以是表格形式，支持查询一段时间、实时刷新；可以研发开发、可以大数据同学支持）

电商通用数据：（以观察实时数据，根据场景来定义）。

订单维度：

• 待付款：订单状态为待付款的订单数量
• 待发货：订单状态为待发货的订单数量
• 已发货：订单状态为已发货的订单数量
• 已完成：订单状态为已完成的订单数量
• 退款审核中：退款单状态为待审核的订单数量

UV维度：

• 今日浏览量&累计浏览量：进入店铺页面且停留该页面5秒的UV数（根据定义来埋点）
• 今日新会员&累计会员数：开通会员成功的用户数
• 今日订单量&累计订单量：支付成功的订单数（可包含申请退货退款的）
• 今日销售额&累计销售额：支付成功的订单金额（可包含申请退货退款的）
• 今日退款金额&累计退款金额：退款成功的订单金额

备注：是否包含退货退款取决业务

3. 店铺信息维护

主要分为4部分，该页面必填、非必填字段取决于业务。字段可能用于前端展示、平台和主体结算等。

1）店铺信息

店铺名称、店铺介绍、店铺地址、店铺类型、主营行业、营业执照、店铺LOGO。

2）结算信息

开户行支行、银行账户。

3）联系人信息

联系人名称、联系人电话、联系人住址、联系人身份证。

4）公司信息

公司名称、公司地址、法人姓名、法人电话、法人身份证。

4. 商品管理

简单流程（工作中画流程图会清晰）：运营线下对接&线上对接供应商＞创建/编辑商品＞审核商品＞确认无误后，立即上架/定时上架商品。

我工作时，有运营角色-商品运营同学A和B，A负责对接供应商（线下对接，需我方上下架商品）创建商品，因人工总会出错，B同学的一部分职责就是审核商品（确认商品信息、策略无误后，上架）。

审核流程，可以有各种方法。最简单就是群里同步，我已审核或者商品什么信息写错，需修改。后续可以做成预警监控和流程化，比如A同学创建了商品a，预警通知B去审核；到下班前统计还有哪些商品没审核，可以统计报警出，B同学下班前或者第二天上班看着统计表可陆续审核。

1）商品列表

① 支持创建商品、查询、导出、批量上架、批量下降、批量删除

② 部分列表字段：

• spu码&sku码：创建商品，生成sku码；根据规则去生成spu码（商品只尺寸不同-SMLXL属于不同sku码，同spu码）
• 商品状态：创建成功/上架/下架（根据业务来定义状态枚举值）
• 审核状态：待审核/审核通过/审核失败
• 操作：编辑、审核、上架、下架、删除

2）添加商品

随着业务复杂，字段增/隐藏、功能优化；若想体验竞品的商品管理后台，自己可去淘宝、京东等体验开店。

该页面主要分为6个部分：

1）商品基本信息

商品名称、一级二级类目（复杂点可以三级类目）。

2）商品规格信息

• 规格：颜色、尺寸、鞋码、自定义，支持多选（以颜色、尺寸为例）
• 颜色：支持新增、删除，上传对应图片
• 尺寸：支持新增、删除

根据所写颜色、尺寸，排列组合生成对应规格。颜色：白、粉、红，尺寸：ML，生成6个SKU商品，维护其成本价、销售价等。

3）商品图文信息

上传主图、轮播图、视频、详情图等。

4）支付信息

• 付款方式：立即付款、货到付款、预售模式
• 库存计数：创单减库存、支付减库存

5）物流信息

物流信息维护：

• 运费承担方：卖家承担和买家承担
• 不可配送地区：省市区街道四级或者省市区三级联动。关联前端，若用户寄货地址符合不可配送地区，则无法下单。
• 包邮地区：省市区街道四级或者省市区三级联动。若用户寄货地址符合包邮地区，邮费为0
• 寄件方式：邮费支持配置

6）售后服务：运营后台支持勾选服务，关联相关功能

• 支持开票：提供开票入口，关联开票系统
• 支持维修：提供维修入口，进入第三方页面
• 7天无理由退货：提供退货入口，关联退货规则

7）上架方式

• 立即上架。审核通过后可立即上架对客
• 定时上架。配置上架时间，审核通过后满足时间上架
• 下架

5. 用户管理

此页面查询用户的购买记录、因异常情况支持发送短信通知、查看开通会员的详情、因某些场景用户恶意刷单/退货/薅羊毛将用户拉黑（设置拉黑规则）、用户申请注销会员等等。

6. 订单管理

订单管理列表分以下6个部分：（此图针对场景1个订单1个sku，现实中会出现1个订单多个SKU商品）

1）基本信息

• 订单号
• 店铺名称
• 用户id
• 用户姓名
• 订单状态

待支付、待发货（支付成功无物流信息）、已发货（导入物流信息）、订单完成（终态：用户前端确认收货/订单状态流转）、订单取消。

创单时间：

2）下单商品信息

商品名称：

• 一级类目
• 二级类目
• SPU
• SKU

参数规格：

• 成本价
• 销售价

3）下单金额信息

• 订单金额：商品总金额+运费-优惠金额
• 数量：下单数量
• 商品总：商品销售金额*下单数量
• 优惠金额：优惠叠加后金额
• 运费：配置展示（包邮或计数）

优惠后商品金额/个：

4）物流信息

• 收件人名字
• 收件人地址
• 收件人手机号
• 物流单号：运营单笔更新或批量导入
• 物流公司：运营单笔更新或批量导入
• 物流状态：可接口查询或者运营去快递100查询

5）支付信息

• 支付方式：支付宝、微信、银行卡、额度
• 分期支付单：若选择额度
• 分期期数
• 支付优惠金额：比如渠道优惠金额（使用信用卡，优惠0.0几元）
• 支付金额：订单金额-支付优惠金额=实付金额
• 支付状态：支付中、支付成功、支付失败
• 支付成功时间
• 支付失败原因

6）售后信息

• 流程：先退货＞退款
• 是否退货：枚举值是和否。（操作退货，审核用户申请退货信息；或上传退货凭证，运营操作退货）
• 退货进度：审核中、退货成功、退货失败
• 是否退款：枚举值是和否
• 退款进度：审核中、退款处理中、退款成功、退款失败

以上为电商开放平台6大模块，基本能满足业务使用。具体字段、字段功能还要在具体业务中定义。

​Apple Vision Pro的出现为建立新的视觉语言带来了可能性，那么在设计中，我们要如何才能适应新的视觉语言，并搭建适合空间体验设计的交互界面？本篇文章里，作者聚焦于空间用户界面，阐述了几点设计规范，一起来看一下。

引言

在上篇文章《Apple Vision Pro设计规范之空间设计原则篇》中，我们了解到了Vision Pro的核心设计原则。本篇我们将介绍Vision Pro中如何设计UI界面，并探索设计规范中的UI组件、材质、字体等UI元素设计指导。

Vision Pro建立了一种新的视觉语言，即可以保持与现有平台的一致性，同时也增加了一些元素来适应沉浸式的空间体验设计。

本篇文章将聚焦空间用户界面来介绍Vision Pro以下三点设计规范：

• 用户界面的基础设计原则（UI foundations)）：包含UI基础设计的设计原理、可读性和可用性等。
• 布局设计（Layout）：如何创建符合人体工学和易于用户定位的布局。
• 从屏幕到空间中去（From screen to spatial）：如何将2D屏上应用组件带入空间设计平台中。

一、UI foundations

Vision Pro中大部分UI系统组件都是我们已经熟知的，但有些也是全新的，现在让我们深入了解Vision Pro用户界面的基础控件。

1. App icons

在App图标的设计上，Vision Pro进一步将图标在空间中变得立体和逼真，当用户看向它们时，图标的层级会扩展，系统通过添加高光和阴影来增强这种空间效果，以加强图层间的微妙纵深。

1）使用多个图层

Vision Pro上真正三维的图标最多有三层，一个背景层和最多两个前景层。每个图层都是1024*1024像素的矩形图像，两个前景层包含透明通道。可以将你的背景层设计为正方形图像，然后所有层再裁剪为圆形蒙版，最后系统会为图标自动添加深度，高光和阴影。

2）保持图标图形居中

尝试保持图形居中，如果它们太靠近边缘，在展开时可能会偏离中心，同时避免使用大范围的半透明像素。

2. Materials

1）应用应该易于在任何空间中放置、使用和阅读

用户可能会在任何地方使用设备，比如白天亮光下的房间，或夜间的小空间中，所以应用需要适应不同的照明条件或新环境，它们应该易于放置在你周围任何的空间中（Apps should be easy to place），易于在任何距离使用（Apps should be easy to use），并且易于在任何照明条件下阅读（Apps should be easy to view），这就是为什么我们设计了一种新的视觉语言玻璃材质，这种效果就像物理世界的一部分。

另外，镜面高光和阴影增强了它在空间中的大小和位置，而玻璃材质也可以作为画布来承载UI内容，让界面感觉更轻盈，并增加一种物理质感。这种轻质感材料也让人们感觉到窗口后可能有什么。比如其它应用或人。

2）避免使用不透明窗口

假设你要设计一个这样的卡片，你想添加一个更亮的按钮。把它放在玻璃材质上是非常易读的。但如果你想增加对比度，可以在后面使用一个较暗的单元格背景，尽量不要把较亮的元素重叠在一起，这样会影响可读性并降低对比度。

3. Typography

1）增加字重以提升阅读性

字体在我们的PointBase Unix系统经过调整，确保在任何距离都可以清晰地可见，我们还修改了一些字体的字重来提高易读性。例如在iOS上正文使用的regular字体，需在Vision Pro上使用Medium。对于标题Vision Pro使用Bold而不是Semibold，以保持字体清晰。

即使窗口可以扩大到非常大的尺寸，较小或细字重的字体仍然难以阅读，因此考虑增加重量（Use Bolder font weights）或使用系统字体从而为优化可读性。

4. Vibrancy

这是保持整个系统可读性的最重要细节之一。Vibrancy使显示前景内容变亮，并通过将光线和颜色发挥作用。在Vision Pro上，由于背景可以不断变化，Vibrancy也会实时更新，以确保您的文本始终清晰地显示。Vibrancy在玻璃材料中发挥作用，增强易读性，使系统材料感觉更丰富和复杂。

可以利用Vibrancy表示文本、符号的层次。Vision Pro提出三种模式：一级（Primary）、二级（Secondary）、三级（Tertiary）。正文使用一级，二描述文本、备注和字幕使用二级。

5. Colors

颜色上，我们通常使用白色的文字或符号以保证它们清晰可见。如果你需要使用其他颜色，请在背景层或整个按钮中使用它，以便人们更容易注意看到它。尽可能使用系统颜色而不是自定义颜色，因为它们已经被校准为易读性，并能自适应玻璃材质上的色调和对比度。

二、LayOut

在布局设计上，我们要考虑基于人因的最舒适布局方法，在元素大小上保证给予用户最易于操作的点击尺寸，以及在响应时基于眼球追踪来提供视觉反馈。

1. Ergonomics

在Vision Pro上，用户主要用眼睛和双手互动，所以对于设计考虑符合人因的，舒适和安全的体验比以往任何时候都更加重要，你需要确保内容的排布是有意图的，不会导致眼睛或颈部疲劳。例如，对大多数人来说，相比抬头低头，左右转更容易而且更远，所以要把你的用户界面在人们的视野中，并注意不要放的太高或太低。

如果你的应用需要一个更大的画布承载界面，可以尝试一个更宽的长宽比。例如在“Freeform”中，画布可以尽量水平延伸。

优先将最重要的信息展示在你的应用中（Center important information），这样用户可以舒适地查看你的内容。

2. Sizing

1）保证所有交互元素至少60pt的点击热区

每个人的眼睛都有细微的差异，设计的元素应该容易被捕捉到。因此建议交互元素的点击热区必须至少是60pt,这样它们可以很容易地被用户选择。你的图标可以在视觉上更小，比如44pt，只要你在它周围添加足够的间距，这样它就满足了60pt目标区域的最小值。如果你需要在容器中放置几个按钮，请使用标准系统按钮，按钮之间至少有16个pt间距。

举一个展开控件的例子，您可以使用一个迷你按钮，它在部分标题这样的区域中有28pt，即使这个按钮看起来很小，但它周围仍有60pt的空间，所以很好选中。

同样，使用大的和超大按钮需要减少周围的间距，记住给所有交互元素至少60pt的点击热区（Give interactive elements 60 points of space）。

3. Focus feedback

1）提供焦点反馈效果

当用户看向组件时，它们会自动显示微妙的视觉高亮或悬停效果，这种悬停效果让用户理解界面的哪些部分是可交互的。当一个元素不可点击时，它不再提供焦点反馈，这让用户将注意力集中在他们专注于预期的元素，并可以通过敲击手指来选择它。

当你创建布局时，考虑到悬停效果是很重要的。例如，如果您正在创建一个列表或菜单，您需要考虑每个元素之间保留一点间距，以避免悬停效果的重叠，建议使用4pt。

2）保证卡片的独立交互区

在卡片的设计上，我们允许用户关注它时显示悬停效果，每个卡片是一个独立的交互元素，你需要定义一个自定义区域，所以它可以在用户看到它时变亮，这有助于用户理解整个区域是一个可以选择的元素。

3）确保嵌套元素彼此同心

确保嵌套元素有相对的圆角半径和间距，使它们彼此同心，你可以使用嵌套元素的简单公式，来调整圆角大小：Inner corner radius +Padding=Outer corner radius

为了保证平滑圆角，一定要把他们设置成连续的圆角。整个系统中每一个从窗口到角落的元素的关系都是彼此同心的，所以请记住保持嵌套元素彼此同心（keep nested elements concentric），因为这将帮助它们感觉是彼此属于一起的。

三、From screen to spatial

最后，我们将介绍如何将现有设备组件应用到空间计算平台中。下文将介绍核心组件结构Window、Tab bar、Side bar，以及一种新的组件形态Ornaments和模态窗口的使用方法。

我们之前提到过，用户用眼睛、手和声音与设备进行交互，他们主要通过从远处查看元素和敲击手指来实现这一点。除此之外，用户也可以通过触摸直接选择元素。当然，用户还可以连接键盘或触控板，从而与系统进行各种各样的输入。

我们所有的系统组件都已经提供适当的反馈机制，并支持各种输入方式，所以当你开发你的应用时，使用系统组件（Use system Components），它们可以帮助您快速创建界面。

1. Window、Tab bar、Side bar

让我们从iOS应用的核心结构Window开始，你的应用需要一个窗口，并为所有元素提供画布，下面有一个可以在空间中流畅易懂的小横条，允许用户在他们的空间中流畅地移动你的应用程序。

在iphone窗口底部，水平排列着一个标签栏，即主导航。只需轻轻一按，人们就可以快速访问应用程序的主要部分。而在Vision Pro中，这里的标签栏垂直浮动在窗口左侧的固定位置，设计成易于访问的，让用户可以快速找到应用导航标签位置，又不会影响应用的主要内容。

为了让标签栏看起来更为轻盈，在入口数量上避免超过六个。当看向标签时，用户可以快速选择一个项目。如果用户看的时间更久一点，它会自动扩展，显示每个部分的详细标签，当人们移开视线时，它会自动关闭，让人们专注于内容。

如果你需要提供子导航，比如在相册中，在这个例子中，侧边栏位于标签栏旁边的窗口中，这让用户清楚地知道他们现在在标签栏中的位置。

2. Ornaments

Ornaments是Vision Pro上一个全新的组件。在相册app，在底部中心有一个浮动的配件元素，可以切换年月和日，因为它不受屏幕的限制，ornaments可以放在在窗口前面的底部作为装饰品，用户可以更方便的进行与内容有关的快速操作。

因为ornaments通常是多个按钮集合的独立玻璃容器，当用户看着它们时，仍然会有悬停效果。

下面是音乐应用中ornaments的另一个案例，用户可以通过ornaments控制切换下一首歌曲，同时能够控制他们的音乐进度。

Ornaments一般被放置在窗口底部，所以它们与底部边缘重叠了20pt的位置，这使得ornaments感觉就像它们与主窗口集成在一起，但不会阻止太多的内容。当你滚动页面时，ornaments的窗口背景会从玻璃中提取内容的颜色，让其看起来更加和谐。

Ornaments可以选择显示或隐藏，所以只建议用于可聚焦的高频操作内容上，例如，看照片或看电影，只需轻轻一点，我们就可以让人们快速访问重要的控件，而不会分散他们对主要体验的注意力。

3. Menus Popovers Sheets

在Vision Pro上，菜单和弹窗可以在窗口外拓展展开，默认情况下它们居中显示，确保用户总是能看到内容。使用白色背景上的黑色图标来显示按钮被选中，这有助于向用户清晰的反馈哪个按钮被调起了弹框。在按钮的设计上，避免使用白色背景，除非是选中状态。

4. Sheets

当多个窗口以sheets进行展示时，新的模态窗口出现在父窗口的中心,与父窗口保持相同的z位置，父窗口向后推并变暗，这有助于用户集中注意力,并防止用户与父视图进行交互，直到sheets被关闭。

如果您需要呈现另一个sheets，次要模态窗口可以出现在最前面，并将所有内容向后推,如下图所示。

参考链接 空间设计界面：https://developer.apple.com/videos/play/wwdc2023/10076/

单选框和多选框是生活中较为常见的交互元素，那么在交互上，单选框和多选框都有哪些区别？在B端设计中，单选框和多选框又有哪些具体应用？本篇文章里，作者就针对单选框和多选框如何选择、单选框和多选框的交互区别等问题进行了总结，一起来看。

前言

在B端设计中，单选框和多选框是常见的交互元素，用于用户在界面上进行选择。它们的区别在于用户能够选择的选项数量。本文将详细介绍单选框和多选框在交互上的区别，并探讨它们在B端设计中的应用。

一、是什么

1. 单选框

是一种常见的交互元素，用于用户在一组互斥的选项中选择一个选项。用户只能选择其中的一个选项，点击一个选项后，其他选项会自动取消选择。

2. 多选框

允许用户在一组非互斥的选项中选择多个选项，用户可以同时选择多个选项，每个选项之间是独立的。 总结来说，单选框适用于用户只能作出一个选择的情况，用户只能选择其中一个选项。而多选框适用于用户可以作出多个选择的情况，用户可以同时选择多个选项。通过单选框和多选框，可以提供给用户不同的选择方式，以满足不同的需求。

二、有什么不同

1. 交互上的不同

1）选择方式

用户只能选择其中的一个选项。点击一个选项后，其他选项会自动取消选择。用户可以选择多个选项。点击一个选项后，该选项会保持选中状态，用户可以继续选择其他选项。

业务场景示例：

在一个订单管理系统中，有一个下拉菜单用于选择订单状态。订单状态是互斥的，一个订单只能处于一个状态，例如：待处理、已处理、已取消等。这种情况下，可以使用单选框来表示订单状态，用户只能选择其中一个状态。

2）互斥性

单选框的选项是互斥的，用户一次只能选择一个选项。选择一个选项会自动取消其他选项的选择。多选框的选项是非互斥的，用户可以同时选择多个选项。每个选项之间是独立的，选择一个选项不会影响其他选项。

业务场景示例：

在一个权限管理系统中，有一个用户角色的选择框。一个用户可以具备多个角色，例如：管理员、编辑员、审核员等。这种情况下，可以使用多选框来表示用户角色，用户可以同时选择多个角色。

3）默认选择

单选框通常需要有一个默认选项，以便用户快速选择。默认选项可以根据用户的偏好或常见选择来设置。多选框默认情况下，多选框不需要有选项被选中。用户需要自行选择感兴趣的选项。

业务场景示例：

在一个商品筛选界面中，有一个多选框用于选择商品的类别。默认情况下，所有的类别都是未选中状态，用户需要根据自己的需求选择感兴趣的类别。

4）布局方式

单选框只需要展示一个选项，通常可以采用更紧凑的布局方式，节省空间。可以垂直排列或水平排列，根据界面的整体布局来决定。多选框需要显示多个选项，通常需要更宽的空间来展示。可以采用垂直排列或水平排列，根据界面的需求和美观性来决定。

业务场景示例：

在一个调查问卷系统中，有一个多选题的选项。为了节省空间，可以采用水平排列的方式来显示选项，让用户一目了然地选择感兴趣的选项。

5）交互反馈

单选框和多选框在用户进行选择时，都需要提供明确的视觉反馈，以确保用户知道他们的选择已被接受。可多选框以使用选中状态的颜色、勾选符号或其他视觉效果来表示选项的选择状态。

业务场景示例：

在一个表单提交界面中，单选框和多选框选项被选择后，可以使用不同的颜色或勾选符号来标识选项的选择状态，让用户清楚地知道他们的选择已被接受。

6）数据处理

单选框和多选框的选项选择通常需要进行数据处理和存储。单选框只需要记录用户选择的选项，可以将选项的值或标识符存储在相应的数据字段中。多选框需要记录用户选择的多个选项。可以将选项的值或标识符存储在一个数组或以逗号分隔的字符串中，以便后续的数据处理和使用。

业务场景示例：

在一个购物车系统中，用户可以选择多个商品进行结算。多选框可以用来表示用户选择的商品，系统可以将选中的商品的标识符存储在一个数组中，以便后续生成订单。

2. 应用场景的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个报名表单中，要求用户选择自己的性别，只能选择男或女，这时可以使用单选框。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择系统语言，只能选择一种语言作为默认语言，这时可以使用单选框。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框的使用场景：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个品牌来筛选商品，这时可以使用多选框。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，这时可以使用多选框。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，这时可以使用多选框。

3. 功能的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个订单处理系统中，用户需要选择订单的处理状态，可以使用单选框来确保每个订单只能有一个状态。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择默认语言或默认时区，单选框可以用来显示当前的默认选项。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框：多选框是一种用户可以选择多个选项的控件。

在B端设计中，多选框通常用于以下功能：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个标签来筛选数据，多选框可以用来实现多项选择。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，多选框可以用来选择多个权限。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，多选框可以用来表示可选项的选择状态。

三、如何选择评判标准

1. 用户体验

评判标准之一是用户体验。设计应该使得单选框和多选框在使用过程中简洁、直观、易于操作。例如，单选框和多选框的样式应该与整体界面风格一致，大小合适，选项之间的间距适当，文字清晰易读等。

2. 功能需求

评判标准之二是满足功能需求。根据具体的业务需求，选择合适的控件。如果只能选择一个选项，应该使用单选框；如果可以选择多个选项，应该使用多选框。同时，还需要考虑是否需要默认选中项、是否需要全选或全不选的功能等。

3. 可访问性

评判标准之三是可访问性。设计应该考虑到不同用户的需求，如色盲用户或视力受损用户。合理选择颜色、对比度和字体大小，提供辅助文本或提示，以确保所有用户都能够正确理解和使用单选框和多选框。

4. 界面一致性

评判标准之四是界面一致性。在整个系统或产品中，单选框和多选框的样式和交互行为应该保持一致，这样可以减少用户的认知负担，提高使用效率。

5. 易于管理和维护

评判标准之五是易于管理和维护。设计应该考虑到后台管理的需求，如添加、修改或删除选项的方便性。对于多选框，还需要考虑如何处理大量选项的展示和选择。

总结

正确使用和巧妙设计单选框和多选框，可以提高用户体验和操作效率。在B端设计中，根据具体的应用场景选择合适的交互方式，确保用户能够方便地进行选择操作。

都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。

同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？

本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。

一、气泡卡片  Popover

气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。

其用法特征是：

1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。

2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。

3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：

• 并不紧急但比较重要的解释内容；
• 有一部分的用户需要随时阅读的内容；
• 在点击关键操作后给用户确认“是否继续进行”的提示（Ant Design 也单独把这个功能拿出来做成做了一个组件：Popconfirm 气泡确认框，如下图）。

二、文字气泡  Tooltips

文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。

其用法特征是：

1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。

2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：

• 一个特殊的功能按钮；
• 专有名词、难懂词汇；
• 看不出具体目的地的操作链接
• 特殊的 icon 等。

三、使用建议

1. 关于使用场景

• 气泡卡片 Popover：常用于承载信息和操作。承载的内容和形式更为多样。
• 文字气泡 Tooltips：常用于解释说明。仅承载简单的文案信息。

2. 关于组件样式

有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。

其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：

3. 关于理解规范

也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。

面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。

组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。

在交互设计中，快捷键和键盘热键是提高用户效率和用户体验的重要手段之一。本文结合实际案例，将介绍PC端键盘热键与页面交互，希望对你有所启发。

一、什么是热键

在交互设计中，快捷键和键盘热键是提高用户效率和提升用户体验的重要手段之一。在PC端应用和网页设计中，合理运用键盘热键可以帮助用户快速完成操作，提高工作效率和使用体验。本文将介绍PC端键盘热键与页面交互，并通过实际案例进行说明。

二、原理

PC端键盘热键是指通过键盘上的组合键完成特定功能的操作方式。在计算机应用和网页设计中，通常将一些常用的操作和功能与特定的键盘组合键相绑定，用户在使用时通过按下相应的键盘组合键即可快速完成操作。

键盘热键的优点是快速、简单、高效，可以大大提高用户的工作效率和使用体验。

三、注意点

1. 易记性

热键应该是容易记忆和识别的，避免使用过于复杂或混乱的组合键，以便用户快速掌握和使用。

2. 易用性

热键应该是易于使用的，避免使用过于繁琐或不符合用户习惯的组合键，以免增加用户的操作负担和学习成本。

3. 易扩展性

热键应该具有较好的扩展性和兼容性，以便后续新增功能或更改热键时能够顺利进行。 二、PC端键盘热键与页面交互的设计方法 PC端键盘热键的设计与页面交互密切相关，需要根据用户需求和使用场景进行设计。以下是几种常见的PC端键盘热键与页面交互的设计方法：

4. 全局热键

全局热键是指在整个操作系统中都可以使用的热键，通常用于实现一些系统级别的功能，例如截屏、切换窗口等。在页面设计中，可以通过全局热键来实现一些全局功能的操作，例如返回首页、打开搜索框等。这种设计方法可以提高用户的使用效率和体验，但也需要注意与系统默认热键的冲突和兼容性问题。

5. 局部热键

局部热键是指在特定的应用程序或网页中可以使用的热键，通常用于实现特定的操作和功能。在页面设计中，可以通过局部热键来实现一些常用的操作，例如刷新页面、打开弹窗等。这种设计方法可以提高用户的操作效率和便捷性，但也需要注意与页面元素的交互和兼容性问题。

6. 自定义热键

自定义热键是指用户可以根据自己的需求和习惯自定义的热键，通常用于实现个性化的操作和功能。在页面设计中，可以通过支持用户自定义热键的方式来提升用户的使用体验和满意度，例如允许用户自定义常用操作的热键或快捷方式。这种设计方法可以提高用户的个性化需求和使用体验，但也需要注意与页面布局和交互的兼容性问题。

不与浏览器冲突，如果与浏览器冲突的场景下，浏览器优先级较高。

四、常见热键

常见的热键有3个：回车，tab，ctrl。接下里进行逐一的分析。

1. tab

在表单中移动焦点。

按下tab键时，焦点会从当前输入框或选项快速切换到下一个输入框或选项，让用户可以使用键盘来方便地输入和选择数据。

进入弹窗中的输入框：

如果弹窗中有输入框，按下tab键可以快速进入输入框，让用户可以直接在弹窗中输入数据。

切换不同区域的焦点：

在复杂的页面结构中，tab键位可以用于切换不同区域的焦点，让用户可以快速导航到不同的功能区域。

触发自动完成：

如果某个输入框中有自动完成功能，按下tab键可以触发自动完成并列出相应的建议选项，让用户可以快速选择。

触发下拉菜单：

如果某个操作按钮上有下拉菜单，按下tab键可以快速打开下拉菜单并选择相应的选项。

2. 回车

提交表单：

当用户在表单中输入完数据后，按下回车键可以快速提交表单，让用户可以方便地完成操作。

确认输入：

在某些情况下，用户需要输入一些关键信息，例如密码、验证码等。在输入完成后，按下回车键可以快速确认输入，让用户可以直接进入下一步操作。

打开弹窗：

在某些场景下，用户需要打开弹窗来进行进一步的操作。在选择相应的操作后，按下回车键可以快速打开弹窗，让用户可以方便地进行操作。

触发搜索：

在搜索框中输入完关键字后，按下回车键可以快速触发搜索操作，让用户可以方便地查找所需内容。

触发自动完成：

在某些输入框中，用户可以通过输入关键字来触发自动完成功能。在选择相应的选项后，按下回车键可以快速确认选择，让用户可以方便地完成操作。

3. ctrl

复制和粘贴：

在输入框中选中文本后，按下Ctrl+C可以将文本复制到剪贴板中；按下Ctrl+V可以将剪贴板中的文本粘贴到输入框中。

撤销和重做：

在编辑内容时，按下Ctrl+Z可以撤销上一步操作；按下Ctrl+Y可以重做上一步操作。

选择多个选项：

在列表中，按下Ctrl键可以选择多个非相邻的选项，方便批量操作。

打开新标签页：

在浏览器中，按下Ctrl+T可以打开一个新的标签页，方便用户同时浏览多个网页。

切换标签页：

在浏览器中，按下Ctrl+Tab可以快速切换到下一个标签页；按下Ctrl+Shift+Tab可以快速切换到上一个标签页。

放大和缩小页面：

在浏览器中，按下Ctrl+加号可以放大页面；按下Ctrl+减号可以缩小页面。

总结

PC端键盘热键是提高用户工作效率和使用体验的重要手段之一，设计PC端键盘热键时需要考虑用户需求、易用性和扩展性等方面。在页面交互设计中，可以通过全局热键、局部热键和自定义热键等方式来设计PC端键盘热键，以提高用户的操作效率和使用体验。在设计PC端键盘热键时，需要遵循易用性、易记性和易扩展性的原则，同时也需要考虑兼容性和易用性等问题。

产品经理需要考虑业务功能的合理性，而交互设计师更多地是关注产品的易用性功能。本文盘点了一些常见的易用性功能，与大家共同探讨，希望对你有所帮助。

如果我们从结构上去分解一款产品如APP或者网站，可以发现它是由各种各样的功能组成的。产品经理在需求输出阶段，会根据解市场需求、竞争对手情况、公司战略等，来确定产品的定位、特点以及需要的功能。

以“人人都是产品经理”的“文章详情页”为例，我们就能发现各种大大小小的功能点：

不难发现，有些功能与业务强相关，有些功能则是为了更好的用户体验而设计的功能，比如“文章导航”，“回到页面顶部”。所以我们可以简单的把它们分为两大类：

当然，本文目的并不是去教大家对功能进行归类，有些功能的界限也不那么明确，只是希望大家有个简单的识别。因为我们知道通常产品经理会更侧重「业务功能」，而为了能给用户带来更好的产品，就需要交互设计师注意考虑增加一些「易用性功能」了。

因此，本文对一些常见的易用性功能进行了梳理。希望对大家有帮助。

一、回到顶部

不管是APP还是PC，通常在长的详情页，我们会增加“回到顶部”功能，使得用户能方便快捷的回到页面初始位置。

二、菜单导航

菜单导航可以使用户能快速了解页面或产品系统结构，并一键达到对应模块或功能位置。

三、锚点

与菜单导航相似，但通常用于快速到达同一个页面的某一个具体位置。

四、分页

产品需求通常会忽略分页功能，而大的数据量由于性能原因通常需要各式的分页功能。分页功能通常应用在PC网页上。

五、搜索/筛选

当数据达到一定量级时，就要考虑用户是否有查找的场景，从而看是否需要增加搜索或者筛选的功能。这样可以使得用户快速获取到自己想要的信息。

六、历史记录

通常与搜索功能结合在一起，如果用户有需要历史输入的场景，就要考虑增加该功能点。

七、排序

通常应用于数据列表，需要考虑用户是否有根据特定顺序排列的需求。

八、徽标/数量统计提示

常见的红点，以及数量提示能有效的引导用户操作。

九、反馈

像前面说到的，有的功能界限并不明确，反馈功能如是。我们有时候需要用户反馈问题来进一步改善产品，优化用户体验。

十、操作指南

通常用户硬件产品使用介绍，能够使用户更加了解产品特性从而更方便的操作使用产品。

十一、草稿箱

有些需要大量编辑操作，且作业时间较长，提交后不可撤回的业务，我们就需要考虑草稿功能，方便用户随时补充信息，无需从头开始。如文章发布。

十二、回收站

有些内容比较重要时，但是又支持删除的话，我们就需要考虑该功能，给用户“反悔”的机会。

最后

如前面所言，作为交互设计师需要在业务功能的基础上，多考虑是否增加这些易用性功能。这些功能点也并不是一定需要，比如“历史记录”，短信或者设置的搜索通常就没有“历史记录”的功能，我们都要根据使用场景出发。

还有哪些易用性功能？欢迎大家补充。

在每个产品页面中，几乎都有“帮助”版块，用于引导用户进行产品的体验与操作。作者结合实际工作中的经验，与大家聊聊尼尔森十大原则中的“人性化帮助原则”在交互方案中的运用，希望对你有所启发。

交互设计师在日常产出方案的过程中，为了确保方案的合理性，除了对需求本身的充分理解以及对用户行为、心理的分析外，还有一点就是遵循一些已有的“交互原则”，如“尼尔森十大交互原则”。本篇文章，笔者就结合实际工作中的经验，来跟大家聊聊尼尔森十大原则中的“人性化帮助原则”在交互方案中的运用。

在此之前，我们来看看什么是人性化帮助原则。从字面意思不难理解，人性化帮助即页面通过设置一些功能与提示，帮助用户更好的完成任务。该如何设置呢？，尼尔森原则给出了帮助性提示的三种方式，即：一次性提示、常驻提示、帮助文档。下面我们就一起来看看这三种方式是如何运用在下面的项目场景中的。

项目背景

此时项目案例是公司产品的一个功能板块，随着业务方向的调整，准备对板块做一次2.0的升级。在产出对应的改版方案之前，除了充分理解与沟通当前改版的业务需求外，还通过相关渠道收集到了用户对于当前版本的使用反馈。最终发现多数用户面临的问题是不知道如何使用该板块的功能。因此，我们制定了本次改版中交互体验方面的两个设计策略，即：

1. 如何帮助用户感知2.0改版的功能？
2. 如何帮助用户使用功能，完成目标操作？

一、如何帮助用户感知功能

新版本完成上线以后，由于之前版本的一些功能入口在布局上做了调整与整合，以及新增了一些功能入口，如何让新老用户进入页面后不迷失在页面功能中，我们需要帮助用户了解此次改版的内容。该如何设计呢?

我们都知道，在app的改版更新后，用户打开应用会有相关的引导页，将本次改版的功能做一些介绍。而对于功能改版而言，我们一般会选择“新手引导”。

新手引导，我们常见的方式是页面定位，通过设定好几个页面锚点，用户可以跟随设定逐一了解对应功能入口的位置与介绍。除此以外，我们也会用“更新弹窗”的形式，将所有的改版内容集中在弹窗中，帮助用户获取此次改版的内容。那么该如何做选择呢？我们需要结合此次改版的业务属性来判断。

此次改版，我们整合了之前的功能，使之前零散的入口都集中在一个功能页中。除此以外，我们还新增了几个用户快捷操作入口，这些入口具有一点的操作连续性，用户可以点击进入核心流程，从而提升用户在使用过程中的操作效率。

在两种方式中，弹窗由于空间有限，且所有信息都集中在一起展示，不利于用户对每个功能入口的认知。而页面定位，用户可以跟随设定每次只聚集一个功能入口，能让用户更好的了解该功能，并且可以与改版前的入口做一个比较。同时，页面定位可以结合用户在该页面的核心流程展开，提前帮助用户熟悉相关操作流程，加深用户对于功能与流程的理解。

最终，我们选择了页面定位的形式，来帮助用户感知此次改版的功能。

二、如何帮助用户使用功能

如果站在极致用户体验的角度，好的交互应该是易理解易上手的，无需过多的帮助与引导。但是由于目标用户对功能的熟悉与理解程度不同，所以在页面提供适当的引导，可以减少用户因迷失在页面中而带来的挫败感。就好比逛超市，经常去的人能知道每个区域卖什么东西，而对于第一次去的或者老年人而言，就需要超市上标注的区域划分来帮助找到。那么该如何引导帮助用户呢？我们可以根据尼尔森帮助性提示中的三个方式展开，即“一次性提示”、“常驻提示”、“帮助文档”。

2.1 一次性提示

一次性提示，一般用在用户第一次使用产品，或者产品更新后，同时对于一些隐藏的不易发现的操作，也可以进行一次性的提示，来帮助用户理解。

在此次项目中，为了收集用户的一些基本信息，在用户进入板块时，以优惠券弹窗的形式引导用户去目标页面填写，但是当用户关闭弹窗或者从填写信息页面返回时，如果想再次填写，就无法找到对应的入口了。所以，我们就需要在用户关闭弹窗或者返回首页时，给与用户一定的提示，帮助用户理解后续如何操作。

而另一个场景中，需要用户上传并编辑自己的商品信息，在前期的用户反馈中获知，一部分用户经常上传提交后来反馈图片顺序不是自己想要的，所以我们在用户上传图片后，新增支持用户调整图片顺序功能，那么该如何让用户知道该操作呢？我们选择了气泡提示的方式来增加用户的感知，而当用户关闭提示后，就默认用户已经知道该操作，后续也就不再继续引导了。

2.2 常驻提示

常驻提示一般用于操作时必须注意到的内容，该提示因为跟操作关联，所以一般都会紧跟在需要注意或者警示的内容后面。

比如上面提到的上传商品信息，由于图片是用户自行上传，可能会存在一些“侵权”风险，此时就需要一些免责声明来提示用户，规避平台的风险，而为了起到“警示”的作用，此处就可以考虑用“常驻提示”的方式。

还有在用户编辑完所有信息后，由于商品信息是需要平台进行审核，为了减少用户的“等待焦虑”，我们将审核规则、审核时间、去哪里看审核结果等信息以常驻提示的形式，显示在“提交审核”按钮上面，让用户对自己提交的内容能“心中有数”。

2.3 帮助文档

帮助文档一般用于解释规则或者热点问题。在前期的用户问题的收集中发现，一部分用户对于该功能的用途不清楚。所以我们在页面增加了“操作手册”的入口，同时将功能的介绍、操作流程、常见问题等内容封装在操作手册中，从而帮助用户更好的理解板块。

总结

以上，就是笔者根据工作中案例，分享的一篇关于帮助原则的文章，经验有限，欢迎大家批评指正与交流。

不少APP应用都带有个人社交主页，而在这一页面里，个人主页头部的设计其实也有一定细节和“套路”需注意。在本篇文章里，作者就尝试总结了这一区域的通用设计方法，与可注意的设计细节，一起来看看作者的总结与分析。

一、组件介绍

个人主页头部与其说是一个组件，不如说是「在个人页中一块聚合信息的区域」，因为绝大多数带个人社交主页的App，都采用了类似的做法，或有相似的框架，所以我们可以在这里讨论这一区域的通用设计方法。

二、使用场景

在解释「个人主页」的使用场景之前，我们首先需要区分两个页面类型：「我的」和「个人主页」，这两者通常都有一个聚合用户信息的头部。

但是这两者有本质的不同：与社交的相关性。「个人主页」与社交绝对强相关，因为个人主页就是用户之间相互浏览的门户；而「我的」与社交几乎不相关，不管App有没有社交属性，用户都需要一个针对本人账户的信息概览和设置页面，这就是「我的」。

这种区别会在具体排版上产生一定的影响，「我的」页面的头部往往会更简洁，信息更加凝练集中，而「个人主页」的头部，装饰性大于信息传达性。

但在日常使用的App 中，你们可能也会注意到，有很多App「我的」页就是用户本人的「个人主页」，只是某些细微的信息展示有所不同 (例如关注按钮)。确实存在这种情况，这是不同产品根据自身的功能特性对页面的不同理解。

具体「我的」和「个人主页」是否应该一致，主要以以下两点作为主要判据：

1. 核心功能是否为社交；
2. 「我的」页面是否有额外大量的功能承载需求。

我来举两个例子。

第一个，小宇宙。

这是一个功能并不复杂的播客App，但它的核心是播客而非社交，所以「我的」页面和「个人主页」用来展示不同的两类信息，尽管有部分账户核心信息是重叠的。

第二个，微博。

这是一个绝对社交核心App，这是毋庸置疑的，但是微博的「我的」需要用来承载更多额外的，与社交无关的功能入口，所以这两者的设计依然不同。

那在什么情况下，两者是相同的呢？是小红书、抖音、站酷、即刻，社交功能占据绝对的C位，「我的」页也不需要承载别的乱七八糟的功能入口，这些App就将两者设计成了一致。

综上，「个人主页」的头部形式，应用在与社交直接绑定的用户门户展示页面上，它需要提供该用户最核心的社交数据和交互信息，在某些情况下，「个人主页」可以直接展示在「我的」页面上。

三、设计要点

个人主页的头部想到来说是比较复杂的，因为它的设计实际上非常的自由，并没有一些可总结的全局化范式，我在这里也知道挑出其中一些细节来讲讲，局部该如何进行布局和设计。

1. 头像的位置

头像是一个视觉重量相当大的元素，所以它的位置不仅也影响着周围很多其他元素的排版，也会给用户不同的感受。从排版上来说，头像基本上有三个固定的位置：居左、居中和居右。

1）居左

居左是一种比较常规的排版方式，但不常规的地方在于，昵称和其余信息可以置于头像的不同方位：右方或者下方。

2）居中

也算是一种相对来说比较常见的布局，但是头像居中会导致昵称除了下方没有别的地方可放，所以会比较占用纵向空间。

3）居右

较为少见，所以看起来会比较新鲜，但是头像的权重会相比昵称下降 (因为阅读习惯)。

2. 数据布局

个人主页头部会集成一些社交的核心数据，例如：关注数、被关注数、发帖数、总收藏数、总点赞数等等UGC的核心指标，当然在展示的过程中必须要挑选出2-4项最核心的，最需要被直接展示的数据类型，不宜过多。

这些数据在头部的展示中包括View的布局和字段在View内的布局两方面内容，这需要分开来说。

1）View的布局

分为通栏和非通栏两种。通栏即：数据占据一整行，View可以均分一行所有的横向空间。通栏需要数据量不低于3个，因为如果数据少，会让这一整行看起来不够丰满。

只在一种情况下使用非通栏的View，就是同一行还需要放置别的元素，例如按钮，例如某些App会将数据放置在头像右侧。

2）字段在View内的布局

也有两种：居中和居左 (居右几乎没见过)。具体如何选择应该视视觉效果而定，如果View整体偏左，那字段也可以居左来让左侧保持对齐。

3. 背景

个人主页的背景是一块很方便用户展示个性的区域，不少App也不会放过这么好的机会；不过这也会额外支出服务器带宽和存储资源，所以如何做选择，是App根据自己的情况而定的。

1）素底/微渐变

纯色的背景或做一些细微的灰色渐变的背景，能够起到突出主体 (用户信息) 的作用。

2）头像模糊

将用户的头像做一定的模糊处理，当作背景使用。在某种程度上算是曲线完成了用户个性化的目标，但又不是完全个性化，比较容易控制统一风格。

3）自定义图片

完全由用户自主控制的背景图片，但是为了控制背景的亮度从而在任何情况下都不会影响前景，通常还会加一层透明的黑色遮罩。

4. 按钮

最后再讨论一下按钮的位置，这里我说的按钮，指的是需要做大的互动按钮，例如「关注」、「私信」，而一些全局功能的按钮 (如「返回」、「更多」) ，就不再讨论了。

1）单个大按钮

单个大按钮一般只有「关注」，或在用户本人的主页中盖按钮可以替换成「编辑资料」，这两个按钮是不会同时存在的，所以可以原位替换。另外只有一个图标的小按钮因为占位并不大，所以可以跟在大按钮旁边，但通常也不会超过1个。

这个按钮的位置非常灵活多变，通常还需要结合头像、昵称、数据位置进行设计，没办法单独提取出来聊。

所以我在这里只说几种情况，大家可以自行参考。

① 在居左的数据信息右侧。这是一个绝佳的位置，因为居左的数据信息本身会在右侧留出一个空位，所以在这里放置按钮是合理且美观的选择。

② 在昵称/头像右侧。在头像居左的情况下，将按钮放置在右侧也是一个不错的选择，因为昵称的长度通常有限，无法撑满屏幕右侧 (尽管就这么空着也没什么太大的问题)，此时按钮就可以填补这部分空缺，让元素在右侧也能对齐。

③ 放置在下方。例如居中排版的信息，就不太适合将按钮放置在左右两侧，所以就算只有一个按钮，也需要单独占去一行，放置在下方。而居左排版的App有时也会使用这种方法来提升按钮权重。

2）多个按钮

按钮一旦多起来，就没法随心所欲地放在其他元素因对齐空缺出来位置了，所以在多个按钮的秦岭下，几乎只存在一种情况：单独占据一行。

5. 不一样的个人页头部

1）马蜂窝

马蜂窝，又是它！马蜂窝的个人主页设计可谓独树一帜，除了这个默认的地球背景图之外，数据展示也比较特别，并非常见的布局。

2）汽水音乐

来自字节的后起之秀音乐App，个人主页的背景采用该用户偏爱的音乐专辑或标签墙，下拉还可以有更进一步的交互，这种背景算是比较少见的。

四、样式拓展

这里收集了一些个人主页头部的线上案例，也可以作为设计时的参考：

“你被自动续约了吗？” 现在，用户可能会在无意的订阅动作或者选择免密支付时，被不知不觉中绑定了自动续约功能。那么，自动续约功能究竟给用户带来了怎样的感受？这项功能设计得如何？关于这个问题，用户们众说纷纭。让我们一起来看看吧！

又被扣了19元！

这已经是我这个月“被自动续费”的第三笔费用了。刚收到扣费通知时，我并不清楚自己为啥被扣费，经过一番操作才反应过来，原来是之前订阅的视频类App连续包月会员到期，平台自动续费了。我曾在3个视频类App上购买过会员。因为发现会员包月比单月购买更便宜，如某个视频App，单月订阅是25元/月，连续包月是19元/月。

为了省钱，大部分人一般选择开通会员包月服务套餐。

然而，很多用户本以为能通过连续包月省点儿钱，不料却掉入了自动续费的陷阱。

不少App还通过设置首月优惠的方式吸引消费者选择连续包月。如某音乐类App新客户选择连续包月，首月会员费只需3元，第二个月及以后都为15元，但如果选择单月订阅则需18元。

“只要选择连续包月，本月会员到期后，平台就会自动扣费，没有任何提示。更离谱的是，扣费账单上也没有注明到底是哪个平台扣的费。”网友提出。

对于强制捆绑续约这个功能，你认为设计得如何？为此天天问的小伙伴展开了一场激烈的讨论，一起来看看小伙伴们是怎么说的吧~

天天问精选243期：对于强制捆绑续约这个功能，你认为设计得如何？

文章内容部分来源于@一凡｜设计读心术 @许与 @Eayon @尼莫点 @旺旺旺旺旺仔 @鳄鱼吃了55只兔子 @全球问 @阿啵呲嘚 @不正 @Accompany 等人的精彩回答。

一、强制捆绑续约这个功能，有多“骚”？

人民网评论称，“自动续费”不会提醒用户，单次扣费金额不大，消费者不易察觉，细水长流。

如此静悄悄地“粘性收费”，还不一定要为用户提供服务，即便用户哪天“如梦方醒”，多半只能吃“哑巴亏”。

在App经营者看来，“自动续费”已经经过用户“同意”，无论是没注意，还是忘了关，似乎都是“用户责任”。不少App的如意算盘打得很响，这个锅甩得实在太“溜”了。

那么，它是怎么诱导用户进行操作的呢？

“自动续费”常常被设置得不经意，用户可能没有注意协议里这小一行小字，或者不进行勾选就不能进行下一步，用户就稀里糊涂地被商家牵着鼻子走。

等到合约期的次月，由于通常金额较小，用户不易察觉，商家便悄悄收费，积少成多。等到用户察觉，商家已经赚得盆满钵满了。

很多小伙伴表示不喜欢自动续费这个功能，在系统自动续费之前会关掉这个选项，这个选项就好像是在强制帮你做选择。

有小伙伴表示：“之前在支付宝和微信检查了下，才发现自己默默开了有十几个自动每月续费的会员……回想当时开通自动续费，就是为了图个方便和便宜，并且提到“可以随时取消，比如微信读书单月30，自动续费19每月，这一对比那必然是开通啊！”

后来才发现，冥冥之中自有盈亏。

• 赚到的：企业和真正有需要的用户。
• 亏损的：一时需要但后续不需要却忘记取消的冤大头。

商家这一波“暗度陈仓”的操作真的令人拍案叫绝。让用户不知不觉就开了十几个软件的自动续费，等到时间到，用户不知不觉间就被“掏空”了。

有小伙伴发现，在如何选择“开通会员”上，选项的排序很有讲究。多数APP都将连续包月、包季、包年以优惠价格优先排列，无需自动续费的会员则放到最后，需要仔细滑动手机屏幕才能发现。

二、绑定一时爽，续费火葬场

1. 用户不取消自动续费的原因

1）忘记取消自动续费

我们在订阅服务时没有注意到软件中自动续费的设置，或者在订阅后忘记取消自动续费选项，导致了次月续费成功扣款。

有小伙伴吐槽说：“很多时候我开通会员都是‘激情开通’，就是为了马上看一部剧或者时间诉求比较急迫，事后往往都忘记关闭自动续费，导致持续被扣款。”

当有其他更加有吸引力的事情把我们的注意力带走时，“取消自动续费”自然也就抛之脑后。

2）取消订阅步骤烦琐

此外，“还有一层原因是关闭取消付费设置困难，关闭入口不容易找。”

APP内会用一些限免功能作诱饵，一不小心同意使用，就会进入快速付费通道。平台会规定一个限免的时间段，超过时间没有取消就视为自动续费。关闭自动取消是需要专门花一段时间来找的，有用户暂时找不到就放弃了。

产品设计师进行任何设计时，都应该把用户放在第一位，要设身处地地为用户着想，掌握用户心理变化，通过这样设计出来的产品才能受到用户的喜爱，否则只会自砸口碑。

2. 用户对商家信任度下降

用户在面对这些情况时可能会有以下行为：

1）感到困惑和焦虑

用户可能在意识到自己忘记取消自动续费或找不到取消入口时感到困惑和焦虑。他们可能会担心自己会被无意中扣费，或者觉得自己的权益受到了侵害。

2）寻找帮助和解决方案

用户可能会主动寻求帮助，例如查阅产品文档、联系客服或在论坛上提问，以了解如何取消自动续费或找到取消入口。他们可能会希望得到快速的解决方案，以避免进一步的困扰和损失。

3）对产品或服务产生负面情绪

如果用户在取消自动续费的过程中遇到困难或遭遇不良体验，他们可能会对产品或服务产生负面情绪。这可能导致他们对该品牌或公司的信任度下降，甚至考虑转投竞争对手。

“从交互的角度来说，任何一种能帮助用户减轻操作的“自动”都是设计师追求的价值所在。但一些隐性的因素，用户心理的变化，信任，依赖，这些敏感的点在整个过程里由于缺乏发声的渠道或过于利益导向，往往被人为的忽略了。设计师应该对用户的意图做出客观的判断，而不应该采取侵略性的做法。”有网友提出。

三、你若签约，我便坐等收费

从商家或企业的角度来看，对不同用户的续约可以带来以下几个收获：

1. 稳定的收入流

续约意味着用户愿意继续使用产品或服务，并持续支付费用。这为企业提供了稳定的收入流，有助于财务稳定和业务发展。

2. 用户黏性和忠诚度提升

通过成功的续约，企业可以增强用户对其产品或服务的黏性和忠诚度。用户愿意继续使用并支付费用，表明他们对产品或服务的满意度较高，并愿意与企业建立长期的合作关系。

3. 降低用户流失率

续约可以帮助企业降低用户流失率。在竞争激烈的市场环境中，留住现有用户比吸引新用户更经济高效。通过提供优质的产品和服务，并与用户建立良好的关系，企业可以增加用户的留存率，减少流失。

4. 数据分析和产品改进

通过续约过程中收集的用户数据，企业可以进行深入的数据分析，了解用户需求和行为模式，从而进行产品改进和优化。这有助于企业不断提升产品质量和用户体验，满足用户的需求，进一步增加续约率。

有小伙伴提出：“从公司的商业目的角度看，非常的好，给公司带来了营收，假如你的产品提供了良好的使用体验解决了问题，用户就算解绑了还是会再次开通；从产品的角度看，给用户提供了会员，不需要用户手动续费提供了便捷，用户也会因为开通会员增强与产品的互动，同时完成了商业目的，好的IDEA。”

强制自动续约的出现主要出于商家的经济利益考虑，因为自动续费可以确保他们在用户订阅到期后继续获得收入，并减少用户流失的可能性。对于商家来说，强制自动续费确实带来了可观的收益和好处，经济利益得到了扩大。

此外，有的小伙伴还提出了最关键的一点：知情权。

“每个行业都有强制捆绑呀，设计是否合理，有个重要前提就是知情权。不知不觉被绑定的话，设计者就太过短视了。但是据我了解，这种看似强盗逻辑的捆绑，是有一定比例能够转换成功的。”

“自动续费”字体不起眼，加上不清晰的标示，涉嫌侵犯消费者知情权。为了保护消费者权益，一些国家和地区对强制自动续费采取了限制措施。例如，要求商家在订阅期满前提前通知用户，并明确告知如何取消自动续费。

此外，一些平台和服务提供商也提供了取消自动续费的选项，使用户可以更方便地管理自己的订阅。

如果商家只看到眼前利益，忽视用户的知情权，注定是走不远的。

四、结语

强制自动续费确实主要是从商家的经济利益出发，具体的设计应该充分了解用户心理以及用户行为，站在用户的角度想问题，那么一切问题都能得到很好的解决。商家应该提供及时、友好的客户支持，帮助用户解决取消自动续费的问题，增加用户的满意度和忠诚度。

关于“对于强制捆绑续约这个功能，你认为设计得如何？”，你有什么看法？点击下面的链接，一起来讨论～

戳：https://wen.woshipm.com/question/detail/kcijq8.html

#相关阅读#

【天天问每周精选】第242期：微信公众号新增了划线阅读功能，用户褒贬不一

【天天问每周精选】第241期：产品从免费到付费，如何让用户“心甘情愿”接受？

【天天问每周精选】第240期：固定铃声vs未知铃声：哪种更能有效叫醒用户？

【天天问每周精选】第239期：促销的新选择：把双杯优惠的「第二杯」存起来

【天天问每周精选】第238期：用户便利与平台运营：探讨App手动签到与自动签到的选择