编辑导语：设计师在日常工作中有很多需要注意的设计规范，一些设计师会把一些控件和规范搞混，清楚一些专业名词也可以让你在职场中更加灵活；本文作者分享了关于设计师5个常被搞混的控件与规范，我们一起来看一下。

开篇先讲个故事：

上周偶然一次和开发对对碰视觉规范的时候，一位开发问了个问题：这个对话框是做成模态还是非模态的？

老实说那一瞬间我突然有点蒙，一时半会在那里想是哪种呢？后来突然反应过来：特喵这种警示对话框99.99%不都是模态的么，怎么会有这种问题！

那种丢人的直觉告诉我，我应该不是一个人，为了更多的铁汁未来第一时间不丢人，我打算写着一篇给大家详解几个常被搞混的一些控件与大家盲区中的一些设计规范。

一、模态与非模态

先给一个最精简的定义：

模态 Modal：模态控件要求必须进行操作（关闭or确认）之后才可以进行其他界面操作。

非模态 Modeless：非模态控件的出现不影响用户继续界面操作。

它们之间**的区别就在于用户阻断，与以下无关：

• 是不是会弹出透明遮罩层；
• 控件外区域是否可点击消失；
• 上面有没有操作项；

然后我们来看具体的应用例子：

最常见的模态与非模态的应用就是弹窗Dialog/操作栏action sheet/浮层框Popover以及提示框toast了，接下来咱们来挨个细说。

弹窗99.99%（对就是这么严谨）都属于模态，因为它的出现视觉比重较大，通常都用在必须用户进行重视的操作提示中；点击控件外区域，控件不消失。

操作栏与浮层框同理，99.99%属于模态，虽然它不强行要求用户进行操作，但它的出现也阻断了用户进行别的操作；点击控件外区域，控件消失（限iOS，安卓可定制）。

提示框，99.99%属于非模态，ios叫HUD，安卓叫toast和snackbar；都是安安静静地弹它的信息，用户可以选择忽略它，控件通常伴随2-3s的自动消失or滑动隐藏等交互。

另外再给大家安利一个特别好用的由ios专属控件演变而来的模态卡片，可以应用在我们的各种界面设计中。

模态卡片早在ios13的时候就被正式写入到 iOS 设计指南中。演变后可以更好同时适配安卓和ios同时使用的模态卡片，增加了滑动和隐藏的交互功能。

**讲个冷段子帮大家记忆下：模态（摸ta）肯定是会阻断用户操作的。

二、加载占位图 Skeleton Screen

关于页面加载的通用传统方式通常是一个loading动图，比如大家熟悉的基础款菊花转，在各产品应用中与品牌联动升级为定制的loading。

随着界面设计的精细化，我们就会发现有些产品内容的加载是可以进行体验升级的；比如说我们在加载前把内容的大致轮廓预先展现出来，再逐步加载真正的内容，感官体验上会使整个加载过程变得更加顺畅且快速。

这种针对内容资讯类产品的特殊加载方式叫加载占位图Skeleton Screen。

Skeleton Screen这个概念最早出自Google产品总监Luke Wroblewski于2013年发表的博文《Mobile Design Details: Avoid The Spinner》里；目前这种加载方式在国外的产品设计中应用比较广（insgram/facebook等），国内的相对少很多（非专业应用：豆瓣）。

但加载占位图并不是适配万能场景的。如果内容布局和排版不是固定的，轮廓和内容布局的会有巨大差异，那么加载占位图不仅不能给用户顺畅和期待感，反倒会造成落差；因此Skeleton Screen仅适用于布局排版固定的内容区域，例如列表、文章、个人信息。

它的实现方式也很简单，不需要切图啥的，开发自己可以通过css+html实现Skeleton Screen 加载占位图动画自上而下渐隐渐显的效果；有开发说实现不了或者很麻烦的，可以度娘一个现成的保姆教程扔给他们。

三、圆角矩形与头像框的定义

不知道在座有多少铁汁有接触过头像框设计的产品，一般类似社交娱乐类的直播产品可能见到的多一些；最近做项目接触到了感觉坑很多，给大家分享一下有关的视觉定义，顺便聊聊很多人困扰的圆角矩形的圆角定义问题。