编者按：本文从收纳+引导、提示+引导、提示+操作等多个方面，帮你熟悉常见的交互控件知识。更多更系统的交互控件知识请看专题 ? https://www.uisdc.com/zt/interactive-control交互控件的名称和定义在学术界并没有统一的标准，也许在说某一个名字的时候你并没有理解它的意思，本文主要...

编者按：本文从收纳+引导、提示+引导、提示+操作等多个方面，帮你熟悉常见的交互控件知识。

更多更系统的 交互控件 知识请看专题 ? https://www.uisdc.com/zt/interactive-control

交互控件的名称和定义在学术界并没有统一的标准，也许在说某一个名字的时候你并没有理解它的意思，本文主要是让大家来见识一下那些常用的交互控件，一起来看看~

一、按照功能划分 其实关于交互控件的名称和定义在学术界并没有统一的标准，但是目前市场主流的 OS 厂商都有自己的标准定义，分为：Apple 的 Human Interface Guidelines 和 Google 的 Material Design。

可以看到：在 Apple 的 Human Interface Guidelines 中 apple 将交互控件归入视图（Views）中，而 Google 的 Material Design 将交互控件归入组件（Components）中。

在这里我不会严格按照两家给出的标准对每一个控件都做详尽的赘述，我将把工作中常用的组件按照功能来划分一下并参考 iOS 和 Google 对于这些组件的描述，来向大家简单梳理一下他们的定义和用法。

二、模态与非模态

在正式开始之前，我先简单介绍一下模态与非模态。下面是维基百科关于模态窗口（Modal window）的标准解释。其含义就是：模态窗口下，用户被强制必须先与当前视窗进行交互才能回到主窗口，此时用户的行为是线性的。由于其会打断用户操作并且强制用户进行交互，因此模态控件的使用必须谨慎。

反之，非模态即用户不被强制先与当前视窗进行交互也可以与主窗口直接进行交互，用户行为是非线性的，拥有更多主动权。

App 设计系列之模态弹窗与非模态弹窗 在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。

阅读文章 >

三、收纳+引导 这类控件包括 Popup（或者叫 Popover）、Action views、Action sheets/ Sheets_bottom、Dropdown menu，其共同特点是由用户主动触发（默认隐藏）、轻量化、指向性较强、包含操作、不会自动消失。

这类控件多用于屏幕空间的移动设备，作为低频但重要的操作入口（Dropdown menu 在 PC 的应用场景同样很多）。这一类控件既包含模态又包含非模态。

1. Popup（Popover）&Dropdown menu

iOS 的 Popup（Popover）与 Android 的 Dropdown menu 的使用场景和展现形式基本类似，主要用于收纳一些默认不展示的低频选项， 不过值得注意的是：Popup 和 Dropdown menu 出现的位置和方式与其入口的位置是有很大关系的，特别当入口按钮是位于屏幕边缘的时候尤其需要注意。

此外，Popup（Popover）自带箭头的强指示性，同样适用于展示隐藏操作或新功能上线后的用户教育。

「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡 @龙爪槐守望者 ：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。

阅读文章 >

2. Action views&Action sheets

不同于 Popup（Popover）和 Dropdown menu 几乎可以出现在屏幕的任何位置，Action views 和 Action sheets/ Sheets_bottom 一般出现在屏幕底部。同样，他们也是用于容纳并展示低频但重要的操作。

交互控件科普系列！ Sheet 的常见样式和设计注意事项总结 还在频繁地使用弹窗对用户展示重要提示吗？

阅读文章 >

四、提示+引导 这类控件包括 Toast、Snackbars、HUD，其共同特点是：不一定由用户主动触发、轻量化且一般不包含操作，展示时间较短（一般在 3 秒以内）且会自动消失，这类控件多用于系统状态或者用户操作结果的展示。同样，这类控件基本都是非模态的。

1. Toast

根据维基和 android 开发者指南的解释：Toast 是一种小巧的作为操作反馈的信息窗口，并且会自动消失。

有意思的是，据说一位微软前员工在开发 MSN Messenger 时，觉得 MSN 弹出通知方式很像烤面包（Toast）烤熟时从烤面包机（Toaster）里弹出来一样，因此把这种提示方式命名为 Toast，后来这位微软前员工带着这一习惯命名跳槽去了 Google。

其实，在实际应用中，Toast 的应用延伸较多，除了作为操作反馈的信息展示窗口，还常常被用来作为系统状态更新时的提示，并且在出现的位置上，也没有非常严格的定义。

2. Snackbars

按照使用场景和元素来说，Snackbars 可以简单理解为 Toast 的升级版本，但根据 Google Material Design 的定义，我们可以发现：Snackbars 与 Toast 的主要差别在于前者可以包含一个操作按钮，而后者不包含。

在实际应用中，Snackbars 的应用范围其实比较广，我们会发现：Snackbars 主要被用在展示一些对用户很重要的操作结果，比如：删除文件或者快速引导。

交互控件科普系列！Snackbar 的常见样式和设计注意事项总结 相比于 Toast，Snackbar 的好处十分明显，可读性更强，还可以兼容 1-2 个次要操作，适用场景更加广泛。

阅读文章 >

3. HUD

HUD 全称叫做 UIProgressHUD，其实在 iOS Human Interface Guidelines 中并没有 Toast 和 Snackbars 这样的定义，但是与之对应的是 UI Progress HUD（直译为界面进程浮层），这种控件是 iOS 系统私有的，在 App Store 上线的 app 原则上是不能直接获取的，所以出现了许多模仿的第三方控件（主要是开放者用以与 iOS 的 UI 风格保持一致的嵌入式组件）。

4. Toast& Snackbars& HUD 小结

其实，我们这样理解这三者之间的关系更加简单明了：Google 的 Toast≈iOS的HUD，Snackbars=Toast+操作按钮，Toast+Snackbars+HUD都是用来展示App或者系统内的状态信息。

五、提示+操作 这类控件主要是 Dialogs/ Alerts，严格意义上来说，其实 Alerts（警告型对话框）也是属于 Dialogs 中的一种。Google 的 Material Design 将 Dialogs 分为：Alert Dialog、Simple Dialog、Communication Dialog 和 Full-screen Dialog，但是在 iOS 中并没有定义 Dialogs 这种控件，而只是对 Alerts 做了定义。

对话框的精髓在于让用户聚焦，它一般有两种使用场景：

系统的关键状态提示，并且如果不处理当前状态会影响到用户的下一步操作，如：系统错误或者电量过低。 需要用户特别注意的关键信息处理，如：删除文件、支付确认 Google Material Design 关于对话框的定义。

交互控件科普系列！Dialogs 的常见样式和设计注意事项总结 在前两篇文章中为大家介绍过 Snackbars 和 Banners 两位轻量级提示控件的用法，今天就让我们来继续详解一下 BOSS 级的提示控件 Dialogs 家族。

阅读文章 >

1. Alert Dialog

由于警示型对话框出现的形式非常直接（包含用户主动触发与系统自动触发），且常常会打断用户当前操作行为（强打扰性），因此绝大部分的警示型对话框被用在关键信息处理或者关键状态提示上，

如：

文件操作场景 — 删除文件，放弃编辑； 支付场景 — 支付二次确认，余额不足提示； 重要状态改变场景 — 手机电量低，版本更新。 值得注意的是：在警示型对话框中的按钮文案使用一定要避免歧义，不要让用户做选择变成一道哲学命题。

Google Material Design 总结了一些 Alert Dialog 按钮文案的一些基本规则：

① 文案要释义操作行为，比如：当问题为“您是否要放弃编辑当前的邮件”相比于用简单的“是”或“否”，使用“放弃编辑”和“继续编辑”用户更能清楚操作后的预期效果。

② 从用户习惯来说，对于当前提问的肯定回答应置于右侧，而否定回答应置于左侧 。

同样接着上一个例子，当问及“您是否要放弃编辑当前的邮件”时，“放弃编辑”应该置于右侧，而“继续编辑”应该置于左侧。

③ 对于 APP 内或系统重要状态的提示，不要给多余的按钮而让用户费解。

④ 最好不要在警示型对话框中放置诸如“了解更多”等第三个按钮，因为它会将用户引导至其他内容而导致用户中断/忘记当前对话框的操作。

2. Simple Dialog

简易对话框用以展示用户做即时决断的选项，选项本身既是信息又是按钮，不包含单独的文案按钮。

一般用于多选其一且不用二次确认的场景，如：地区选择、语言选择、邮箱地址选择等。

3. Confirmation Dialog

确认对话框用于需要用户进行选择并手动确认的场景，不同于简易对话框，用户可以选择一项或者多项，并且包含确认和取消按钮。

4. Full-screen Dialog

全屏对话框包含一些列的操作任务，这些操作任务可能需要用到键盘输入并且还可能包含子对话框，典型的使用场景如：填写表单、设置日程等。

本文科普到这就结束了，更多的干货，建议大家阅读相关的文章推荐。

 

作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。用户群从国内用户变成欧美用户，一开始固执地保留着很多“中式”设计方式，导致我屡屡碰壁。其实中西方电商网站在体验设计上有很多显著差异，而造成这些差异的原因是非常值得讨论的。

作为一名交互 设计师 ，我经历过国内零售电商产品，后又从进口转战出口。用户群从国内用户变成欧美用户，一开始固执地保留着很多“中式”设计方式，导致我屡屡碰壁。

其实中西方 电商网站 在体验设计上有很多显著差异，而造成这些差异的原因是非常值得讨论的。下面从几个区别点展开讨论，希望可以给大家带来更多思考。

更多 电商设计 干货：

如何让电商设计转化率更高？5个心理学技巧帮你轻松搞定！ 编者按：电商设计中如何快速提高转化率？

阅读文章 >

一、新页面打开方式不同 1. 中西差异

国内电商网站：点击后直接在新标签中打开页面，尤其是打开详情页（Product Detial）。

西方电商网站：在当前页打开。

[案例 1]：亚马逊 (Amazon)在做中国站的时候特意将打开详情页设置成在新标签页中打开，而美国站却是在当前页打开。

[案例 2]：非电商产品也有类似差异，国内的 QQ 浏览器、360 浏览器、搜狗浏览器等均为默认在新标签页中打开新页面，而海外浏览器谷歌则是默认在当前页打新页面。

2. 优缺点对比

在新标签页打开：优点是不容易彻底跳出（即关闭了所有与该网站相关的页面），但缺点是会打开很多页面，用户容易迷失。

在当前页打开：优点是路径清晰，更专注，但缺点是容易彻底跳出，特别是在网速慢加载困难的时候。

3. 差异原因探究

中国用户已熟悉默认新标签页打开的形式，所以更习惯关闭当前页而非后退的操作，而美国用户更习惯使用后退。这种习惯可能会被归类为先发大站的特定设计对用户及后来者的影响，可是这不仅仅是设计者的喜好，根源是不同群体思维方式的不同。

精通语言的哲学家张东荪先生曾从语言的角度出发将中西方的思维做比较，提出不同的语言结构会产生不同的思维方式的观点。

所以在打开一个新页面的时候，象形语言造就的相关律思维更能接受在一条操作主线上新开出一个相关的页面，因为他们是相关的；而拼写式语言造就的同一律思维更希望这条操作主线不要被打乱，要逻辑性更强，要穷尽。

二、购物车的定义不同 1. 中西差异

国内的购物车定义是模糊的，购物车中的商品是可选择性结算的，比如这次结算其中 5 件下次再结算另 5 件，所以购物车更像“购物车和收藏的结合体”。

「国内电商网站」

美国的购物车定义是明确的，购物车中全部是需要结算的商品，不想结算的商品要么移除，要么移到收藏。

「国外电商网站」

用“二分”法来理顺一下这个逻辑：

他们做事更喜欢定义明确，逻辑清晰，即使是文学也可以做得像科学一样。

三、搜索筛选导航不同 1. 中西差异

很容易发现，国内喜欢将筛选放在上面（上下结构），美国喜欢放在左面（左右结构），这不仅仅是淘宝和 Amazon 的区别，而是普遍性的存在。

国内除淘宝外比如京东、当当、唯品会等，西方的除 Amazon 外比如 Ebay、Macys 等（近年来西方也会有一些选择将筛选做上下结构摆放的，但依旧为极少数），都有相似的中西差异。

「淘宝-国内」

「京东-国内」

「亚马逊-国外」

中国朋友在开始用到西方国家的电商物网站时可能特别不习惯，总感觉左右结构的筛选特别难用，这也是习惯上的问题。

2. 差异原因探究

左右结构诞生的根本可能是英文的文字特性和阅读习惯造成的，因为英文的长度十分不可控，所以横向排列会显得十分混乱，设计上很难处理，遇到换行就更尴尬了。竖向排列英文相对中文也更有优势，因为英文的字母本身就有很规范的顺序，所以竖向排列时的整齐感会更强，用户找起来也更方便。

除了搜索中的筛选，在电商网站的设计中，西方也会更多的使用左右结构，比如购物车页、结算页、详情页等等。

总结 中西方电商网站在设计上的差异还有很多，比如在使用优惠时中国喜欢用优惠券，而西方喜欢用 Promo Code(兑换码)，对折扣的表现中国喜欢把打折信息放在图上，而西方更习惯放在图以外的地方等等。

造成这些习惯的原因有很多，有些可能是民族性的逻辑和习俗习惯的不同，有些可能是语言等元素造成的限制，有些也可能是一些龙头企业的固有思想对后来者的影响等等。

我们在设计中一定要注意甄别，不仅是注意到这些差异，更应该理解这些差异背后的根源，尊重用户的逻辑和习惯，也要敢于打破固有思想，让设计在尊重习惯的基础上更加美好。

欢迎关注作者微信公众号：「ASAK设计」

编者按：本文从收纳+引导、提示+引导、提示+操作等多个方面，帮你熟悉常见的交互控件知识。更多更系统的交互控件知识请看专题 ? https://www.uisdc.com/zt/interactive-control交互控件的名称和定义在学术界并没有统一的标准，也许在说某一个名字的时候你并没有理解它的意思，本文主要...

编者按：本文从收纳+引导、提示+引导、提示+操作等多个方面，帮你熟悉常见的交互控件知识。

更多更系统的 交互控件 知识请看专题 ? https://www.uisdc.com/zt/interactive-control

交互控件的名称和定义在学术界并没有统一的标准，也许在说某一个名字的时候你并没有理解它的意思，本文主要是让大家来见识一下那些常用的交互控件，一起来看看~

一、按照功能划分 其实关于交互控件的名称和定义在学术界并没有统一的标准，但是目前市场主流的 OS 厂商都有自己的标准定义，分为：Apple 的 Human Interface Guidelines 和 Google 的 Material Design。

可以看到：在 Apple 的 Human Interface Guidelines 中 apple 将交互控件归入视图（Views）中，而 Google 的 Material Design 将交互控件归入组件（Components）中。

在这里我不会严格按照两家给出的标准对每一个控件都做详尽的赘述，我将把工作中常用的组件按照功能来划分一下并参考 iOS 和 Google 对于这些组件的描述，来向大家简单梳理一下他们的定义和用法。

二、模态与非模态

在正式开始之前，我先简单介绍一下模态与非模态。下面是维基百科关于模态窗口（Modal window）的标准解释。其含义就是：模态窗口下，用户被强制必须先与当前视窗进行交互才能回到主窗口，此时用户的行为是线性的。由于其会打断用户操作并且强制用户进行交互，因此模态控件的使用必须谨慎。

反之，非模态即用户不被强制先与当前视窗进行交互也可以与主窗口直接进行交互，用户行为是非线性的，拥有更多主动权。

App 设计系列之模态弹窗与非模态弹窗 在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。

阅读文章 >

三、收纳+引导 这类控件包括 Popup（或者叫 Popover）、Action views、Action sheets/ Sheets_bottom、Dropdown menu，其共同特点是由用户主动触发（默认隐藏）、轻量化、指向性较强、包含操作、不会自动消失。

这类控件多用于屏幕空间的移动设备，作为低频但重要的操作入口（Dropdown menu 在 PC 的应用场景同样很多）。这一类控件既包含模态又包含非模态。

1. Popup（Popover）&Dropdown menu

iOS 的 Popup（Popover）与 Android 的 Dropdown menu 的使用场景和展现形式基本类似，主要用于收纳一些默认不展示的低频选项， 不过值得注意的是：Popup 和 Dropdown menu 出现的位置和方式与其入口的位置是有很大关系的，特别当入口按钮是位于屏幕边缘的时候尤其需要注意。

此外，Popup（Popover）自带箭头的强指示性，同样适用于展示隐藏操作或新功能上线后的用户教育。

「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡 @龙爪槐守望者 ：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。

阅读文章 >

2. Action views&Action sheets

不同于 Popup（Popover）和 Dropdown menu 几乎可以出现在屏幕的任何位置，Action views 和 Action sheets/ Sheets_bottom 一般出现在屏幕底部。同样，他们也是用于容纳并展示低频但重要的操作。

交互控件科普系列！ Sheet 的常见样式和设计注意事项总结 还在频繁地使用弹窗对用户展示重要提示吗？

阅读文章 >

四、提示+引导 这类控件包括 Toast、Snackbars、HUD，其共同特点是：不一定由用户主动触发、轻量化且一般不包含操作，展示时间较短（一般在 3 秒以内）且会自动消失，这类控件多用于系统状态或者用户操作结果的展示。同样，这类控件基本都是非模态的。

1. Toast

根据维基和 android 开发者指南的解释：Toast 是一种小巧的作为操作反馈的信息窗口，并且会自动消失。

有意思的是，据说一位微软前员工在开发 MSN Messenger 时，觉得 MSN 弹出通知方式很像烤面包（Toast）烤熟时从烤面包机（Toaster）里弹出来一样，因此把这种提示方式命名为 Toast，后来这位微软前员工带着这一习惯命名跳槽去了 Google。

其实，在实际应用中，Toast 的应用延伸较多，除了作为操作反馈的信息展示窗口，还常常被用来作为系统状态更新时的提示，并且在出现的位置上，也没有非常严格的定义。

2. Snackbars

按照使用场景和元素来说，Snackbars 可以简单理解为 Toast 的升级版本，但根据 Google Material Design 的定义，我们可以发现：Snackbars 与 Toast 的主要差别在于前者可以包含一个操作按钮，而后者不包含。

在实际应用中，Snackbars 的应用范围其实比较广，我们会发现：Snackbars 主要被用在展示一些对用户很重要的操作结果，比如：删除文件或者快速引导。

交互控件科普系列！Snackbar 的常见样式和设计注意事项总结 相比于 Toast，Snackbar 的好处十分明显，可读性更强，还可以兼容 1-2 个次要操作，适用场景更加广泛。

阅读文章 >

3. HUD

HUD 全称叫做 UIProgressHUD，其实在 iOS Human Interface Guidelines 中并没有 Toast 和 Snackbars 这样的定义，但是与之对应的是 UI Progress HUD（直译为界面进程浮层），这种控件是 iOS 系统私有的，在 App Store 上线的 app 原则上是不能直接获取的，所以出现了许多模仿的第三方控件（主要是开放者用以与 iOS 的 UI 风格保持一致的嵌入式组件）。

4. Toast& Snackbars& HUD 小结

其实，我们这样理解这三者之间的关系更加简单明了：Google 的 Toast≈iOS的HUD，Snackbars=Toast+操作按钮，Toast+Snackbars+HUD都是用来展示App或者系统内的状态信息。

五、提示+操作 这类控件主要是 Dialogs/ Alerts，严格意义上来说，其实 Alerts（警告型对话框）也是属于 Dialogs 中的一种。Google 的 Material Design 将 Dialogs 分为：Alert Dialog、Simple Dialog、Communication Dialog 和 Full-screen Dialog，但是在 iOS 中并没有定义 Dialogs 这种控件，而只是对 Alerts 做了定义。

对话框的精髓在于让用户聚焦，它一般有两种使用场景：

系统的关键状态提示，并且如果不处理当前状态会影响到用户的下一步操作，如：系统错误或者电量过低。 需要用户特别注意的关键信息处理，如：删除文件、支付确认 Google Material Design 关于对话框的定义。

交互控件科普系列！Dialogs 的常见样式和设计注意事项总结 在前两篇文章中为大家介绍过 Snackbars 和 Banners 两位轻量级提示控件的用法，今天就让我们来继续详解一下 BOSS 级的提示控件 Dialogs 家族。

阅读文章 >

1. Alert Dialog

由于警示型对话框出现的形式非常直接（包含用户主动触发与系统自动触发），且常常会打断用户当前操作行为（强打扰性），因此绝大部分的警示型对话框被用在关键信息处理或者关键状态提示上，

如：

文件操作场景 — 删除文件，放弃编辑； 支付场景 — 支付二次确认，余额不足提示； 重要状态改变场景 — 手机电量低，版本更新。 值得注意的是：在警示型对话框中的按钮文案使用一定要避免歧义，不要让用户做选择变成一道哲学命题。

Google Material Design 总结了一些 Alert Dialog 按钮文案的一些基本规则：

① 文案要释义操作行为，比如：当问题为“您是否要放弃编辑当前的邮件”相比于用简单的“是”或“否”，使用“放弃编辑”和“继续编辑”用户更能清楚操作后的预期效果。

② 从用户习惯来说，对于当前提问的肯定回答应置于右侧，而否定回答应置于左侧 。

同样接着上一个例子，当问及“您是否要放弃编辑当前的邮件”时，“放弃编辑”应该置于右侧，而“继续编辑”应该置于左侧。

③ 对于 APP 内或系统重要状态的提示，不要给多余的按钮而让用户费解。

④ 最好不要在警示型对话框中放置诸如“了解更多”等第三个按钮，因为它会将用户引导至其他内容而导致用户中断/忘记当前对话框的操作。

2. Simple Dialog

简易对话框用以展示用户做即时决断的选项，选项本身既是信息又是按钮，不包含单独的文案按钮。

一般用于多选其一且不用二次确认的场景，如：地区选择、语言选择、邮箱地址选择等。

3. Confirmation Dialog

确认对话框用于需要用户进行选择并手动确认的场景，不同于简易对话框，用户可以选择一项或者多项，并且包含确认和取消按钮。

4. Full-screen Dialog

全屏对话框包含一些列的操作任务，这些操作任务可能需要用到键盘输入并且还可能包含子对话框，典型的使用场景如：填写表单、设置日程等。

本文科普到这就结束了，更多的干货，建议大家阅读相关的文章推荐。

 

作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。用户群从国内用户变成欧美用户，一开始固执地保留着很多“中式”设计方式，导致我屡屡碰壁。其实中西方电商网站在体验设计上有很多显著差异，而造成这些差异的原因是非常值得讨论的。

作为一名交互 设计师 ，我经历过国内零售电商产品，后又从进口转战出口。用户群从国内用户变成欧美用户，一开始固执地保留着很多“中式”设计方式，导致我屡屡碰壁。

其实中西方 电商网站 在体验设计上有很多显著差异，而造成这些差异的原因是非常值得讨论的。下面从几个区别点展开讨论，希望可以给大家带来更多思考。

更多 电商设计 干货：

如何让电商设计转化率更高？5个心理学技巧帮你轻松搞定！ 编者按：电商设计中如何快速提高转化率？

阅读文章 >

一、新页面打开方式不同 1. 中西差异

国内电商网站：点击后直接在新标签中打开页面，尤其是打开详情页（Product Detial）。

西方电商网站：在当前页打开。

[案例 1]：亚马逊 (Amazon)在做中国站的时候特意将打开详情页设置成在新标签页中打开，而美国站却是在当前页打开。

[案例 2]：非电商产品也有类似差异，国内的 QQ 浏览器、360 浏览器、搜狗浏览器等均为默认在新标签页中打开新页面，而海外浏览器谷歌则是默认在当前页打新页面。

2. 优缺点对比

在新标签页打开：优点是不容易彻底跳出（即关闭了所有与该网站相关的页面），但缺点是会打开很多页面，用户容易迷失。

在当前页打开：优点是路径清晰，更专注，但缺点是容易彻底跳出，特别是在网速慢加载困难的时候。

3. 差异原因探究

中国用户已熟悉默认新标签页打开的形式，所以更习惯关闭当前页而非后退的操作，而美国用户更习惯使用后退。这种习惯可能会被归类为先发大站的特定设计对用户及后来者的影响，可是这不仅仅是设计者的喜好，根源是不同群体思维方式的不同。

精通语言的哲学家张东荪先生曾从语言的角度出发将中西方的思维做比较，提出不同的语言结构会产生不同的思维方式的观点。

所以在打开一个新页面的时候，象形语言造就的相关律思维更能接受在一条操作主线上新开出一个相关的页面，因为他们是相关的；而拼写式语言造就的同一律思维更希望这条操作主线不要被打乱，要逻辑性更强，要穷尽。

二、购物车的定义不同 1. 中西差异

国内的购物车定义是模糊的，购物车中的商品是可选择性结算的，比如这次结算其中 5 件下次再结算另 5 件，所以购物车更像“购物车和收藏的结合体”。

「国内电商网站」

美国的购物车定义是明确的，购物车中全部是需要结算的商品，不想结算的商品要么移除，要么移到收藏。

「国外电商网站」

用“二分”法来理顺一下这个逻辑：

他们做事更喜欢定义明确，逻辑清晰，即使是文学也可以做得像科学一样。

三、搜索筛选导航不同 1. 中西差异

很容易发现，国内喜欢将筛选放在上面（上下结构），美国喜欢放在左面（左右结构），这不仅仅是淘宝和 Amazon 的区别，而是普遍性的存在。

国内除淘宝外比如京东、当当、唯品会等，西方的除 Amazon 外比如 Ebay、Macys 等（近年来西方也会有一些选择将筛选做上下结构摆放的，但依旧为极少数），都有相似的中西差异。

「淘宝-国内」

「京东-国内」

「亚马逊-国外」

中国朋友在开始用到西方国家的电商物网站时可能特别不习惯，总感觉左右结构的筛选特别难用，这也是习惯上的问题。

2. 差异原因探究

左右结构诞生的根本可能是英文的文字特性和阅读习惯造成的，因为英文的长度十分不可控，所以横向排列会显得十分混乱，设计上很难处理，遇到换行就更尴尬了。竖向排列英文相对中文也更有优势，因为英文的字母本身就有很规范的顺序，所以竖向排列时的整齐感会更强，用户找起来也更方便。

除了搜索中的筛选，在电商网站的设计中，西方也会更多的使用左右结构，比如购物车页、结算页、详情页等等。

总结 中西方电商网站在设计上的差异还有很多，比如在使用优惠时中国喜欢用优惠券，而西方喜欢用 Promo Code(兑换码)，对折扣的表现中国喜欢把打折信息放在图上，而西方更习惯放在图以外的地方等等。

造成这些习惯的原因有很多，有些可能是民族性的逻辑和习俗习惯的不同，有些可能是语言等元素造成的限制，有些也可能是一些龙头企业的固有思想对后来者的影响等等。

我们在设计中一定要注意甄别，不仅是注意到这些差异，更应该理解这些差异背后的根源，尊重用户的逻辑和习惯，也要敢于打破固有思想，让设计在尊重习惯的基础上更加美好。

欢迎关注作者微信公众号：「ASAK设计」

今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。这次算是爆肝来解释自动布局 Autolayout 的使用，帮助还不理解，或者还在用 Sketch、XD 的同学搞清楚它到底是什么。上期回顾：从零基础到精通：B端设计规范和组件库搭建指南（一）这是一篇酝酿了比较久的内容了，即讲解...

今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。这次算是爆肝来解释 自动布局 Autolayout 的使用，帮助还不理解，或者还在用 Sketch、XD 的同学搞清楚它到底是什么。

上期回顾：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

一、样式功能 在软件中，记录样式就是在对应的属性面板上 “创建” 并 “命名”，就将对应设置数据转化成一个指定名称的记录，方便我们记忆和调用。

比如，填充色中使用了两种色彩相近的色彩和不同透明度，我们就可以使用中文命名来区分，其中 2B6DCF 80% 叫 辅助色，2B93CF 90% 叫 主色。

创建完成的填充色记录，就会在对应的属性样式列表中出现，之后就可以在对应图层的属性中关联该记录了。

之后，所有关联到该记录的图层属性，都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值，那么所有关联到该记录的图层就会一起被修改。

一定要牢记，目前的主流 UI 工具中，样式是根据不同属性类型记录的。比如一个字体图层，它的填充、字体、描边、投影，是可以创建不同的样式记录的，各不影响。

而软件 Sketch 的样式逻辑，则是根据图层类型来记录的，比如矩形和字体，会记录该图层下所有样式属性的参数，且该记录只能应用在同类的图层上（而 XD 只能记录色彩和字体样式…）。

这种做法虽然理解起来容易，但是会导致样式数量大幅度增加。尤其是在字体上，变动填充、描边都要设置一个新的样式，这在实际项目中的灵活性是非常差的。

而即时设计、 Figma 则不考虑图层类型，只关注属性类型。类似前端的样式表中 “类（Class）” 的应用，每个类有不同的样式参数，只要定义了类的命名和属性、参数，那么不同 Div （即图层）就可以自由组合这些样式记录了。

比如色彩 color、阴影 shadow、描边 board 各定义了 1、2、3 三种样式类，那么就可以像下方案例中自由组合：

所以，样式功能可以帮助我们在前期快速搭建基础视觉规范内容，将规范中的配色、字体、投影、模糊等参数整理进样式表中，方便我们后续的快速调用和统一修改。

三、响应式功能 响应式是我们前面做过很多期分享的课题了，基于 BootStrap 的完整响应式功能确实非常强大，可以通过栅格布局来实现丰富的响应方式。

虽然 UI 软件中也提供了 ”响应式“ 这样的功能，但它可以实现的效果非常有限。用一句话概括就是：

“图层基于父级画板 Frame 的匹配逻辑”

比如我们先创建一个画板，然后再置入相关的图层，那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。

间距固定的意思，就是图层基于父级画板的某间距数值是固定的，不管画布尺寸怎么变动，图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。

比如在模块上的标题栏，就可以将栏目设置成一个 Frame，然后标题相关元素左间距对齐，更多图标右间距对齐，之后变更标题栏的宽，图层的对齐关系就是不变的。

而设置左右、上下间距同时对齐，则是图层会随画布的尺寸变动修改自身的宽高来满足。

居中模式则是图层根据画布的大小进垂直、水平方向的对齐，忽略间距数值。

最后一个缩放的设置，用起来和两侧间距对齐很接近，也是放大缩小画布图层会跟着一起变动，但它响应的逻辑是依据比例，而不是间距。这个设置在实际项目中很难派上用场。

过往的设计软件中，父集尺寸变更，下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果，向真实的网页适配方式看齐。

同时，这种父集对齐的逻辑是可以进行嵌套使用的，比如刚才的标题栏，可以将这个画板再置入到整个卡片画板之下，并对 “标题栏画板” 创建顶部对齐，左右间距对齐，那么该画板本身的尺寸不管怎么变动，头部标题栏顶部位置固定，宽度间距和父集统一，标题栏下方的元素也会左右对齐。

所以，将一个画板中的元素响应方式设置好，可以节省我们很多时间，不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。

在后续生成组件前，我们就要优先完成画板下方的响应设置，这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片，就可以快速搭建一个表盘页面的基本框架，我们要做的就是拖拽画板到一个合适的尺寸即可，无需调节下级图层。

但需要注意的事，即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下，而不是编组 Group 中，Sketch、XD 因为没有 Frame 的概念，所以使用编组就可以应用响应式设置，这个区别一定要牢记。

同时，响应式虽然可以完成很多高效的适配，但是它的局限性是无法打破的，例如无法实现 3 列以上的卡片列表等间距放大，或者随宽度增加生成新列下方卡片补位。

四、自动布局功能 自动布局 Autolayout 作为一个自动排版功能，使用场景包含两类，父子级响应和依序排列。它们有各自的生成条件。

首先需要一个矩形图层作为背景，并将其它下级图层置入到矩形背景中去，全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交，那么就会生成一个依序排列的自动布局出来。

创建自动布局会生成一个新的 “特殊编组”，用来收纳下级图层，它在图层列表中会有新的图标。

1. 父子级响应布局

父子级响应布局中，背景的矩形图层会被自动移除，样式被继承到自动布局的编组上，针对该编组层的属性设置，就等同于原先的背景矩形设置（和画板 Frame 图层逻辑一样）。

这类布局最常应用于按钮控件上，可以让按钮的宽度随文本宽度变化。

但光靠创建这个效果显然是无法完整解释自动布局的，我们就必须从前端的逻辑，来理解这种包含父子层级的元素如何实现自动布局。

首先就是前端环境中，很多控件、组件本身的尺寸是无法直接写死的，它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏，旁边会有宽度和高度设置，默认都是 “自动 Auto”，这就是说它们会随内容宽高进行响应。

比如上方的按钮，它实现的逻辑就是：

按钮宽 = 元素内容宽 + 左右间距 按钮高 = 元素内容高 + 上下间距 这种情况是父层级基于子层级的响应，应用于无法确定父级图形尺寸的场景，如按钮、标签、单元格、瀑布卡片等。

但前端中的不确定性并不是只有这一种，还可以反过来，子图层大小不确定，需要它们去响应父级图层的尺寸变更。

比如一些文本卡片，会应用在不同的页面中，且根据应用的场景会有宽高的调节，所以需要下级的文本区域可以跟随上级尺寸响应。

我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层，在它的自动布局选项中选择 “自适应”，来满足这个相反的需求。

如果子图层没有设置自适应，那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。

在父级布局设置中，有一个网点模块，可以设置下级图层的对齐模式。当下级图层不处于自适应模式时，则对齐可以修改下级元素的对齐方向，即前面响应式设置中的 “间距固定”。

2. 依序排列布局

前面我们演示的案例都只有一个子图层，如果出现多个子图层的话，自动布局也可以帮我们进行调节，除对齐外还包含子图层排列方式、分布方式，而这就是依序排列的布局模式。

排列方式就是多个子图层横排还是竖排的设置。

分布方式，则是这些子图层布局的位置怎么定，默认包含固定间距和自适应两种。

固定间距即子元素排列的间距保持一致，在右侧的输入框中可以设置间距数值，也可以结合对齐模式来设置整体的对齐方向。

而自适应，则是在父级区域内进行等分，这个等分的逻辑比较特别，需要左右各有一个子图层靠到头，新增的图层在这个基础上进行 “等间距分布”。

依序排列的优势，除了把现有的子图层快速布局以外，还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中，就可以插入序列，成为下级图层之一。

3. 混合布局模式

前面两种布局模式，可以解决各种 UI 设计中的细节设置问题，理解起来也并不难，只要自己去操作一下就能学会。而真正让人头疼的，是自动布局可以相互嵌套，并混合这两种模式，在复杂的页面设计场景和组件模块中灵活应用。

下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含 3 种不同的宽度规格，且对话内容不确定，可能会字数很多包含很多行的高度。

想要用自动布局实现一个满足需求的对话框，我的建议是先学会拆分里面的下级模块，通过完成下级模块的设置后再进行最终的合并调节。在这个对话框中，

包含三个模块，顶部标题栏、中间内容区域，底部操作栏。

首先从顶部标题栏开始，我们随意创建个 280px * 44px 的矩形，然后再置入标题和图标到矩形中。之后全选它们创建成自动布局，然后设置父层级内间距，且改成宽度固定、分布自适应，就可以获得一个可以随意修改宽度的标题栏了。

然后就是内容区域，本质上就是一个文本区域，所以我们拖拽一个文本区域出来，设置好对应的参数和填充一点文本即可。

而底部操作栏，则在一开始做好两个按钮（可以使用自动布局做）和背景以后，就可以进行合并，只是父级元素上的设置要改成固定宽度和右对齐，并设置布局间距（按钮间距）。

这三个模块完成以后，我们再选中它们进行自动布局合并，把它们设置成竖排模式，再添加背景色和排列间距，就可以实现出一个正常的对话框效果。

到这一步，如果我们修改对话框整体的宽度，或者输入多行的文本，都无法达到预期的效果，所以还要在这个基础上进一步的调整。

首先是宽度适应，我们要先将最上级的自动布局改成 “固定宽度”，然后将下级图层都改为 “自适应”，这样我们增加组件的宽，下方布局就会立即响应，且推导到更下级的图层中。

为了满足文字宽度随父级响应，高度影响父级高度，就要将顶部的自动布局改成 “高度适配”，再将下级的文本改成 “宽度自适应”、“自动高度”，然后，我们就可以随意拖动这个自动布局的宽，和添加任意的文本内容了。

完成这个基本的版本以后，我们再根据项目需要的三个宽度，直接将它复制成 3 份，每份直接设置对应的宽度出来，就可以作为后续的 “原始组件” 在项目中进行快速引用了。

在这个案例中，我们前后嵌套了若干层的自动布局，每层自动布局的上下级会有各自的响应关系，需要我们逐一进行确认。并且，细心的同学应该也发现，这里面有很多设置似乎和前面的响应式设置非常类似，那把一些下级布局从一开始就做成响应式的编组行不行？

答案是可以的……

响应式设置和自动布局，本质上都是为了节省我们操作时间而设计的功能，我们要从实际设计的对象出发，选择合理的功能来实现最终的效果。而不是只能使用自动布局，或者只能使用响应式。

也不要因为了解了响应式包含了非常强大的自适应功能，而认为项目中任何组件、页面，都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里，过度嵌套的自动布局会让设计文件的 “熵” 值无限增加，会产生更多复杂的、没有效率的问题。

相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……

至于怎么用才好，没有标准的答案，就需要未来大家自己去积累相关经验了。

今天的分享就写到这里。

欢迎关注作者的微信公众号：「超人的电话亭」

今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。这次算是爆肝来解释自动布局 Autolayout 的使用，帮助还不理解，或者还在用 Sketch、XD 的同学搞清楚它到底是什么。上期回顾：从零基础到精通：B端设计规范和组件库搭建指南（一）这是一篇酝酿了比较久的内容了，即讲解...

今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。这次算是爆肝来解释 自动布局 Autolayout 的使用，帮助还不理解，或者还在用 Sketch、XD 的同学搞清楚它到底是什么。

上期回顾：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

一、样式功能 在软件中，记录样式就是在对应的属性面板上 “创建” 并 “命名”，就将对应设置数据转化成一个指定名称的记录，方便我们记忆和调用。

比如，填充色中使用了两种色彩相近的色彩和不同透明度，我们就可以使用中文命名来区分，其中 2B6DCF 80% 叫 辅助色，2B93CF 90% 叫 主色。

创建完成的填充色记录，就会在对应的属性样式列表中出现，之后就可以在对应图层的属性中关联该记录了。

之后，所有关联到该记录的图层属性，都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值，那么所有关联到该记录的图层就会一起被修改。

一定要牢记，目前的主流 UI 工具中，样式是根据不同属性类型记录的。比如一个字体图层，它的填充、字体、描边、投影，是可以创建不同的样式记录的，各不影响。

而软件 Sketch 的样式逻辑，则是根据图层类型来记录的，比如矩形和字体，会记录该图层下所有样式属性的参数，且该记录只能应用在同类的图层上（而 XD 只能记录色彩和字体样式…）。

这种做法虽然理解起来容易，但是会导致样式数量大幅度增加。尤其是在字体上，变动填充、描边都要设置一个新的样式，这在实际项目中的灵活性是非常差的。

而即时设计、 Figma 则不考虑图层类型，只关注属性类型。类似前端的样式表中 “类（Class）” 的应用，每个类有不同的样式参数，只要定义了类的命名和属性、参数，那么不同 Div （即图层）就可以自由组合这些样式记录了。

比如色彩 color、阴影 shadow、描边 board 各定义了 1、2、3 三种样式类，那么就可以像下方案例中自由组合：

所以，样式功能可以帮助我们在前期快速搭建基础视觉规范内容，将规范中的配色、字体、投影、模糊等参数整理进样式表中，方便我们后续的快速调用和统一修改。

三、响应式功能 响应式是我们前面做过很多期分享的课题了，基于 BootStrap 的完整响应式功能确实非常强大，可以通过栅格布局来实现丰富的响应方式。

虽然 UI 软件中也提供了 ”响应式“ 这样的功能，但它可以实现的效果非常有限。用一句话概括就是：

“图层基于父级画板 Frame 的匹配逻辑”

比如我们先创建一个画板，然后再置入相关的图层，那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。

间距固定的意思，就是图层基于父级画板的某间距数值是固定的，不管画布尺寸怎么变动，图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。

比如在模块上的标题栏，就可以将栏目设置成一个 Frame，然后标题相关元素左间距对齐，更多图标右间距对齐，之后变更标题栏的宽，图层的对齐关系就是不变的。

而设置左右、上下间距同时对齐，则是图层会随画布的尺寸变动修改自身的宽高来满足。

居中模式则是图层根据画布的大小进垂直、水平方向的对齐，忽略间距数值。

最后一个缩放的设置，用起来和两侧间距对齐很接近，也是放大缩小画布图层会跟着一起变动，但它响应的逻辑是依据比例，而不是间距。这个设置在实际项目中很难派上用场。

过往的设计软件中，父集尺寸变更，下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果，向真实的网页适配方式看齐。

同时，这种父集对齐的逻辑是可以进行嵌套使用的，比如刚才的标题栏，可以将这个画板再置入到整个卡片画板之下，并对 “标题栏画板” 创建顶部对齐，左右间距对齐，那么该画板本身的尺寸不管怎么变动，头部标题栏顶部位置固定，宽度间距和父集统一，标题栏下方的元素也会左右对齐。

所以，将一个画板中的元素响应方式设置好，可以节省我们很多时间，不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。

在后续生成组件前，我们就要优先完成画板下方的响应设置，这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片，就可以快速搭建一个表盘页面的基本框架，我们要做的就是拖拽画板到一个合适的尺寸即可，无需调节下级图层。

但需要注意的事，即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下，而不是编组 Group 中，Sketch、XD 因为没有 Frame 的概念，所以使用编组就可以应用响应式设置，这个区别一定要牢记。

同时，响应式虽然可以完成很多高效的适配，但是它的局限性是无法打破的，例如无法实现 3 列以上的卡片列表等间距放大，或者随宽度增加生成新列下方卡片补位。

四、自动布局功能 自动布局 Autolayout 作为一个自动排版功能，使用场景包含两类，父子级响应和依序排列。它们有各自的生成条件。

首先需要一个矩形图层作为背景，并将其它下级图层置入到矩形背景中去，全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交，那么就会生成一个依序排列的自动布局出来。

创建自动布局会生成一个新的 “特殊编组”，用来收纳下级图层，它在图层列表中会有新的图标。

1. 父子级响应布局

父子级响应布局中，背景的矩形图层会被自动移除，样式被继承到自动布局的编组上，针对该编组层的属性设置，就等同于原先的背景矩形设置（和画板 Frame 图层逻辑一样）。

这类布局最常应用于按钮控件上，可以让按钮的宽度随文本宽度变化。

但光靠创建这个效果显然是无法完整解释自动布局的，我们就必须从前端的逻辑，来理解这种包含父子层级的元素如何实现自动布局。

首先就是前端环境中，很多控件、组件本身的尺寸是无法直接写死的，它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏，旁边会有宽度和高度设置，默认都是 “自动 Auto”，这就是说它们会随内容宽高进行响应。

比如上方的按钮，它实现的逻辑就是：

按钮宽 = 元素内容宽 + 左右间距 按钮高 = 元素内容高 + 上下间距 这种情况是父层级基于子层级的响应，应用于无法确定父级图形尺寸的场景，如按钮、标签、单元格、瀑布卡片等。

但前端中的不确定性并不是只有这一种，还可以反过来，子图层大小不确定，需要它们去响应父级图层的尺寸变更。

比如一些文本卡片，会应用在不同的页面中，且根据应用的场景会有宽高的调节，所以需要下级的文本区域可以跟随上级尺寸响应。

我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层，在它的自动布局选项中选择 “自适应”，来满足这个相反的需求。

如果子图层没有设置自适应，那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。

在父级布局设置中，有一个网点模块，可以设置下级图层的对齐模式。当下级图层不处于自适应模式时，则对齐可以修改下级元素的对齐方向，即前面响应式设置中的 “间距固定”。

2. 依序排列布局

前面我们演示的案例都只有一个子图层，如果出现多个子图层的话，自动布局也可以帮我们进行调节，除对齐外还包含子图层排列方式、分布方式，而这就是依序排列的布局模式。

排列方式就是多个子图层横排还是竖排的设置。

分布方式，则是这些子图层布局的位置怎么定，默认包含固定间距和自适应两种。

固定间距即子元素排列的间距保持一致，在右侧的输入框中可以设置间距数值，也可以结合对齐模式来设置整体的对齐方向。

而自适应，则是在父级区域内进行等分，这个等分的逻辑比较特别，需要左右各有一个子图层靠到头，新增的图层在这个基础上进行 “等间距分布”。

依序排列的优势，除了把现有的子图层快速布局以外，还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中，就可以插入序列，成为下级图层之一。

3. 混合布局模式

前面两种布局模式，可以解决各种 UI 设计中的细节设置问题，理解起来也并不难，只要自己去操作一下就能学会。而真正让人头疼的，是自动布局可以相互嵌套，并混合这两种模式，在复杂的页面设计场景和组件模块中灵活应用。

下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含 3 种不同的宽度规格，且对话内容不确定，可能会字数很多包含很多行的高度。

想要用自动布局实现一个满足需求的对话框，我的建议是先学会拆分里面的下级模块，通过完成下级模块的设置后再进行最终的合并调节。在这个对话框中，

包含三个模块，顶部标题栏、中间内容区域，底部操作栏。

首先从顶部标题栏开始，我们随意创建个 280px * 44px 的矩形，然后再置入标题和图标到矩形中。之后全选它们创建成自动布局，然后设置父层级内间距，且改成宽度固定、分布自适应，就可以获得一个可以随意修改宽度的标题栏了。

然后就是内容区域，本质上就是一个文本区域，所以我们拖拽一个文本区域出来，设置好对应的参数和填充一点文本即可。

而底部操作栏，则在一开始做好两个按钮（可以使用自动布局做）和背景以后，就可以进行合并，只是父级元素上的设置要改成固定宽度和右对齐，并设置布局间距（按钮间距）。

这三个模块完成以后，我们再选中它们进行自动布局合并，把它们设置成竖排模式，再添加背景色和排列间距，就可以实现出一个正常的对话框效果。

到这一步，如果我们修改对话框整体的宽度，或者输入多行的文本，都无法达到预期的效果，所以还要在这个基础上进一步的调整。

首先是宽度适应，我们要先将最上级的自动布局改成 “固定宽度”，然后将下级图层都改为 “自适应”，这样我们增加组件的宽，下方布局就会立即响应，且推导到更下级的图层中。

为了满足文字宽度随父级响应，高度影响父级高度，就要将顶部的自动布局改成 “高度适配”，再将下级的文本改成 “宽度自适应”、“自动高度”，然后，我们就可以随意拖动这个自动布局的宽，和添加任意的文本内容了。

完成这个基本的版本以后，我们再根据项目需要的三个宽度，直接将它复制成 3 份，每份直接设置对应的宽度出来，就可以作为后续的 “原始组件” 在项目中进行快速引用了。

在这个案例中，我们前后嵌套了若干层的自动布局，每层自动布局的上下级会有各自的响应关系，需要我们逐一进行确认。并且，细心的同学应该也发现，这里面有很多设置似乎和前面的响应式设置非常类似，那把一些下级布局从一开始就做成响应式的编组行不行？

答案是可以的……

响应式设置和自动布局，本质上都是为了节省我们操作时间而设计的功能，我们要从实际设计的对象出发，选择合理的功能来实现最终的效果。而不是只能使用自动布局，或者只能使用响应式。

也不要因为了解了响应式包含了非常强大的自适应功能，而认为项目中任何组件、页面，都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里，过度嵌套的自动布局会让设计文件的 “熵” 值无限增加，会产生更多复杂的、没有效率的问题。

相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……

至于怎么用才好，没有标准的答案，就需要未来大家自己去积累相关经验了。

今天的分享就写到这里。

欢迎关注作者的微信公众号：「超人的电话亭」

大家好，这里是和你们聊设计的花生~所谓人靠衣装马靠鞍，对产品包装来说也是一样的道理。一个好的包装设计可以赋予产品独特的文化内涵和质感，使其在同类产品中脱颖而出，吸引更多消费者的目光，从而提升产品销量。这也是越来越多的企业重视产品包装设计的原因。

大家好，这里是和你们聊设计的花生~

所谓人靠衣装马靠鞍，对产品包装来说也是一样的道理。一个好的包装设计可以赋予产品独特的文化内涵和质感，使其在同类产品中脱颖而出，吸引更多消费者的目光，从而提升产品销量。这也是越来越多的企业重视产品包装设计的原因。

今天就为大家推荐 5 个我最新整理的国际顶尖包装设计网站，这些网站内不仅汇集了世界范围内优秀的 包装设计 作品，而且还会展现背后的设计细节和思维逻辑，能为我们的设计提供源源不断灵感。

超全整理！5个设计师必备的顶尖Logo设计灵感网站 大家好，这里是和你们聊设计的花生。

阅读文章 >

一、Packaging Of The World 网站直达： https://packagingoftheworld.com/

Packaging of the World（简称 POTW）是一个专门收集优秀包装设计作品网站，成立于 2008 年。每年会推出“年度最佳包装设计”榜单，是包装行业的专业风向标之一；每月还会根据作品网络传播数据评选出月度十佳包装设计，是了解包装设计热门风格的有效途径。

网站收集来自专业广告机构、 设计师 和学生的包装设计项目，自 2008 年成立以来已经累积了海量的优质包装设计案例，除了展示包装作品图片，还会以文字形式分享设计背景和理念，是激发 设计灵感 、学习包装设计思路的宝藏网站。

POTW 中展示的包装设计案例

二、Dieline 网站直达： https://thedieline.com/

Dielineawards： http://dielineawards.com/ （需要梯子）

Dieline 成立于 2007 年，是全球访问量最大的包装设计网站。站内汇集了来自全世界的优秀包装设计作品及前沿的行业新闻资讯。由其举办的包装设计大赛 Dieline Awards 是全球规模最大的包装设计比赛之一，从创造力、市场性、创新、执行力和包装品牌 5 个方面评选出最具价值和影响力的作品，被是认为是的包装设计基准之一。

三、Pentawards 网站直达： https://pentawards.com/ （需要梯子）

Pentawards 成立于 2007 年，是全球领先的包装设计平台之一，也是包装设计界最具权威的比赛之一，被誉为“包装界奥斯卡”，致力于通过年度比赛、国际会议等方式表彰全球范围内具有卓越创意的包装设计作品。

在 Pentawards 网站中，我们可以通过以下 2 个途径浏览优秀的包装设计作品：

首页的「最新灵感」，会每天更新一篇有关包装设计的文章。 顶部的「比赛」选项，里面有历年比赛的入围以及获奖作品，以通过年份、国家、行业、细分、获奖级别和颜色进行筛选。

Pentawards 的获奖作品页面

更多包装设计知识 ? https://www.uisdc.com/group/481328.html

四、JPDA 网站直达： https://www.jpda.or.jp/en/award

JPDA 包装档案： https://library.jpda.or.jp/pkg-archives/

JPDA 是日本包装设计协会的简称，成立于 1960 年，是日本最具规模及代表性的包装设计工作者组成的协会。自 1985 年以来，每两年举行一次全国性的包装设计大赛，从设计创意、产品制造、包装材料等方面评选出具有设计感和创造力的优秀作品。

JPDA 内还有一个 JPDA Library 的选项，里面的 Package Archives（包装档案）收录了历年来的包装设计作品，我们可以通过年代（80 年代至今）和行业关键词（饮料、酒、化妆品等）进行对档案内的资源进行快速准确的搜索。

Package Archives 里的“菓子”包装设计作品

五、LovelyPackage 网站直达： https://designbro.com/lovelypackage/ （使用梯子加载速度更快）

LovelyPackage 是一个非常活跃的包装设计网站，现在由创意设计平台 DesignBro 负责运营。网站会定期更新大量设计案例，涵盖食品、饮料、美妆、药品、健康等多个领域，阐述设计亮点和背后的设计理念。同时还支持设计师上传自己的包装设计作品。

六、其他的包装设计灵感 除了上面 5 个专业包装设计网站，我们还可以通过一些知名的综合性设计灵感网站来寻找包装设计的灵感，它们的「包装设计」板块内也有非常对优秀的作品值得参考：

Inspiration Grid丨定期推荐优秀的包装设计作品，由网站编辑精选，质量很高 直达链接： https://theinspirationgrid.com/category/packaging/ Dribbble丨有很多专业包装设计工作室分享的作品 直达链接： https://dribbble.com/search/packaging Behance 丨可以看到最新潮有创意的包装设计作品 直达链接： https://www.behance.net/search/projects?tracking_source=typeahead_nav_suggestion&search=packaging （需要梯子） NPC 丨日本设计中心的包装设计专题 直达链接： https://www.ndc.co.jp/cn/works/category/package/ （需要梯子）

Dribbble“包装设计专题”里的内容

以上就是今天为大家推荐的 5 个包装设计灵感网站，喜欢的小伙伴记得点赞收藏。有关于本文或者设计的相关疑问，欢迎在评论区提出，我会第一时间回复~

推荐阅读：

快收藏！设计师必知的包装设计产品信息标示规范来啦！ 包装设计应该是设计中一项最需要注重细节与合规性的工作，设计师在工作中也会经常会遇见一些问题，比如净含量的字符高度应该多高等问题，今天我整理了一份规范表，来看看吧。

阅读文章 >

超全整理！设计师必备的9个高质量免扣PNG素材网站 大家好，这里是和你们聊设计的花生~ 前几天看到有小伙伴在优设问答里问有没有高质量的免扣PNG素材库推荐，答案是当然有啦~ 其实优设已经为大家推荐过不少PNG素材网站，我将这些资源都梳理了一遍，挑选出其中9个资源质量较高且可以免费商用的网站，整理成了这篇合集， 方便大家之后查询使用，需要

阅读文章 >

大家好，这里是和你们聊设计的花生~所谓人靠衣装马靠鞍，对产品包装来说也是一样的道理。一个好的包装设计可以赋予产品独特的文化内涵和质感，使其在同类产品中脱颖而出，吸引更多消费者的目光，从而提升产品销量。这也是越来越多的企业重视产品包装设计的原因。

大家好，这里是和你们聊设计的花生~

所谓人靠衣装马靠鞍，对产品包装来说也是一样的道理。一个好的包装设计可以赋予产品独特的文化内涵和质感，使其在同类产品中脱颖而出，吸引更多消费者的目光，从而提升产品销量。这也是越来越多的企业重视产品包装设计的原因。

今天就为大家推荐 5 个我最新整理的国际顶尖包装设计网站，这些网站内不仅汇集了世界范围内优秀的 包装设计 作品，而且还会展现背后的设计细节和思维逻辑，能为我们的设计提供源源不断灵感。

超全整理！5个设计师必备的顶尖Logo设计灵感网站 大家好，这里是和你们聊设计的花生。

阅读文章 >

一、Packaging Of The World 网站直达： https://packagingoftheworld.com/

Packaging of the World（简称 POTW）是一个专门收集优秀包装设计作品网站，成立于 2008 年。每年会推出“年度最佳包装设计”榜单，是包装行业的专业风向标之一；每月还会根据作品网络传播数据评选出月度十佳包装设计，是了解包装设计热门风格的有效途径。

网站收集来自专业广告机构、 设计师 和学生的包装设计项目，自 2008 年成立以来已经累积了海量的优质包装设计案例，除了展示包装作品图片，还会以文字形式分享设计背景和理念，是激发 设计灵感 、学习包装设计思路的宝藏网站。

POTW 中展示的包装设计案例

二、Dieline 网站直达： https://thedieline.com/

Dielineawards： http://dielineawards.com/ （需要梯子）

Dieline 成立于 2007 年，是全球访问量最大的包装设计网站。站内汇集了来自全世界的优秀包装设计作品及前沿的行业新闻资讯。由其举办的包装设计大赛 Dieline Awards 是全球规模最大的包装设计比赛之一，从创造力、市场性、创新、执行力和包装品牌 5 个方面评选出最具价值和影响力的作品，被是认为是的包装设计基准之一。

三、Pentawards 网站直达： https://pentawards.com/ （需要梯子）

Pentawards 成立于 2007 年，是全球领先的包装设计平台之一，也是包装设计界最具权威的比赛之一，被誉为“包装界奥斯卡”，致力于通过年度比赛、国际会议等方式表彰全球范围内具有卓越创意的包装设计作品。

在 Pentawards 网站中，我们可以通过以下 2 个途径浏览优秀的包装设计作品：

首页的「最新灵感」，会每天更新一篇有关包装设计的文章。 顶部的「比赛」选项，里面有历年比赛的入围以及获奖作品，以通过年份、国家、行业、细分、获奖级别和颜色进行筛选。

Pentawards 的获奖作品页面

更多包装设计知识 ? https://www.uisdc.com/group/481328.html

四、JPDA 网站直达： https://www.jpda.or.jp/en/award

JPDA 包装档案： https://library.jpda.or.jp/pkg-archives/

JPDA 是日本包装设计协会的简称，成立于 1960 年，是日本最具规模及代表性的包装设计工作者组成的协会。自 1985 年以来，每两年举行一次全国性的包装设计大赛，从设计创意、产品制造、包装材料等方面评选出具有设计感和创造力的优秀作品。

JPDA 内还有一个 JPDA Library 的选项，里面的 Package Archives（包装档案）收录了历年来的包装设计作品，我们可以通过年代（80 年代至今）和行业关键词（饮料、酒、化妆品等）进行对档案内的资源进行快速准确的搜索。

Package Archives 里的“菓子”包装设计作品

五、LovelyPackage 网站直达： https://designbro.com/lovelypackage/ （使用梯子加载速度更快）

LovelyPackage 是一个非常活跃的包装设计网站，现在由创意设计平台 DesignBro 负责运营。网站会定期更新大量设计案例，涵盖食品、饮料、美妆、药品、健康等多个领域，阐述设计亮点和背后的设计理念。同时还支持设计师上传自己的包装设计作品。

六、其他的包装设计灵感 除了上面 5 个专业包装设计网站，我们还可以通过一些知名的综合性设计灵感网站来寻找包装设计的灵感，它们的「包装设计」板块内也有非常对优秀的作品值得参考：

Inspiration Grid丨定期推荐优秀的包装设计作品，由网站编辑精选，质量很高 直达链接： https://theinspirationgrid.com/category/packaging/ Dribbble丨有很多专业包装设计工作室分享的作品 直达链接： https://dribbble.com/search/packaging Behance 丨可以看到最新潮有创意的包装设计作品 直达链接： https://www.behance.net/search/projects?tracking_source=typeahead_nav_suggestion&search=packaging （需要梯子） NPC 丨日本设计中心的包装设计专题 直达链接： https://www.ndc.co.jp/cn/works/category/package/ （需要梯子）

Dribbble“包装设计专题”里的内容

以上就是今天为大家推荐的 5 个包装设计灵感网站，喜欢的小伙伴记得点赞收藏。有关于本文或者设计的相关疑问，欢迎在评论区提出，我会第一时间回复~

推荐阅读：

快收藏！设计师必知的包装设计产品信息标示规范来啦！ 包装设计应该是设计中一项最需要注重细节与合规性的工作，设计师在工作中也会经常会遇见一些问题，比如净含量的字符高度应该多高等问题，今天我整理了一份规范表，来看看吧。

阅读文章 >

超全整理！设计师必备的9个高质量免扣PNG素材网站 大家好，这里是和你们聊设计的花生~ 前几天看到有小伙伴在优设问答里问有没有高质量的免扣PNG素材库推荐，答案是当然有啦~ 其实优设已经为大家推荐过不少PNG素材网站，我将这些资源都梳理了一遍，挑选出其中9个资源质量较高且可以免费商用的网站，整理成了这篇合集， 方便大家之后查询使用，需要

阅读文章 >

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮...

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。

遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条 轮播图设计 原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮播图更好更易用的展示方式。

更多 轮播图 干货：

用好这4个设计建议，让你的轮播图点击率更高！ @腾讯ISUX - Jana：轮播图（Carousels）这样的交互方式，在web时代似乎已经司空见惯。

阅读文章 >

一、实际运用中的轮播图 在美国一份针对 50 家顶级零售电商网站的统计中，发现轮播图被广泛运用于电商网站：PC 端 52%的电商网站使用轮播图，而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：

如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关 如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化 轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计 二、轮播图设计十原则 那么，怎样在实际运用中做好轮播图设计呢，作者将 10 原则分成了四个部分来进行阐述：

1. 滑动（轮播）顺序和点击后的落地页

大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。

因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。

我们之前做的轮播图可用性研究，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。

两条原则：

原则 1： 轮播图的展示顺序特别是第一帧非常重要； 原则 2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。 2. PC 端自动轮播逻辑

自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：

原则 1：自动轮播不要太快

如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

轮播图的展示时间应该根据轮播图的文案内容来决定，尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。

其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。

原则 2：用户 hover 内容时应该暂停自动轮播

用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：

当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣； 当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ； 如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。 原则 3：用户有任何主动交互行为时应该停止自动轮播

当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。

点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时轮播图应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。

3. 轮播图控件应该具备两项功能

原则 1：轮播图控件提示当前图片所在帧数位置

提示用户有更多帧数的图片，让用户有更多探索的可能； 提示用户轮播图到底有多少帧图片； 当轮播图自动播放到最后一帧时提示用户将循环到第一帧。 比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。

原则 2：轮播图控件允许用户进行前后帧内容的切换

这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：

展示部分下一帧或前一帧图片； 根据所识别的背景图片的颜色和明度进行相应的颜色改变。

通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。

首先，它结合了位置感知和手动切换的控件为一个整体的 UI 组件； 其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么，因而可以让用户更有效的进行跨帧的切换。

4. 在移动端一切都如此不同

触屏设备上的轮播图与 PC 端有着很大的不同，之前列举的PC端上的交互逻辑在移动设备上是无效的，并且有很多新的规则：

原则 1：移动端没有 hover 状态因此尽量避免自动轮播

hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有 hover 状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了，自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。

原则 2：移动端支持滑动操作

用户在触屏设备上的操作预期就是滑动来进行导航切换 传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点） 原则 3：移动端屏幕的图片需要特别优化

许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差； 移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图 现在我们来总结一下：

三、轮播图的替代方案 单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：

它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用； 它高度符合用户与首页的交互方式，70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站； 相比于使用轮播图要遵守的那 10 条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。 更多设计原则：

这 7 个经典的用户体验设计原则，你可能用错了 编者按：我们看过太多关于设计原则总结梳理的文章，这篇出自 WebDesignDepot 的编辑 Ben Moss 的文章则是对这类文章的有效补充，他详细拆解了设计原则「不适用」的情况，用实际的分析和讲解避免设计师盲从「设计原则」： 在设计过程中，用户体验法则是非常宝贵的工具，它们为设计

阅读文章 >