快记下来！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 载占位图画自上而渐隐渐显的效果。有开发说实现了或者很麻烦的，可娘一个现成的保姆程扔给他们。

圆角矩形与头像框的定义

知道在座有多铁汁有接触过头像框设计的产，一般类似社交娱乐类的直播产可见到的多一些。最做项目接触到了感觉坑很多，给大分享一有的视觉定义，顺聊聊很多人困扰的圆角矩形的圆角定义问题。

1. 圆角矩形的圆角定义

定义头像框之前需要我们先定义头像的圆角矩形圆角。为了保障界面里的头像圆角体感一致性，我们需要定义一个等圆角矩形（卡片/头像等）的圆角系数：圆角和矩形宽的值。举个例子：假设我们的圆角系数是0.3，那么圆角矩形为66*66px的时候，圆角即为20px

这样可保证我们界面上的有圆角矩形的圆角幅感受是一致的，会一会大一会小了。另外给大供一个规的等圆角矩形圆角系数：0.03-0.05。

但圆角系数的用法仅等比圆角矩形，果我们在设计背卡时用到的不等比圆角矩形该何定义它的圆角呢？

首先要定义一个界面的最大圆角值（一都是全屏圆角的大），在最大圆角值基础上定义个不同层的圆角大，圆角值梯度是可以由计根据界面的栅格密度由发挥的。但一定要记得遵循以下2条规则：

• 同一级的圆角矩形圆角需要持一致（无论宽高）
• 一层的圆角矩形圆角必须于高一层的圆角矩形圆角

2. 框的区域义

义好圆角矩形（）的圆角后，框只出一尺寸即可配到所。这里建议家留出足够的框区域给到发铁汁，比如4:3的与框区域比例。

最后强烈建议大叮嘱开发头像框的具体实现方式：原头像位置，直接把头像套在头像上即可。然可现可怕的画面。

选择框的精细区分

之常遇到很多人犟的一控件问题：就单项与多项选择器视觉样式的应用。

大都知道，单和复框样式上做细节区分应该是这样的：

但之混淆要是因为除了列表现的择框外，我们还会遇到类似全须知这样的地方会到对勾择框，但它却是一个单项。我们貌似从简单的单/复角来定义控件。

所以里建议大家样定义：

• 对勾样式：“择”与“未择”，可支持复。
• 大小圆样式（radio）：仅单选。

至于选择框否默认选择，还看具体的诉求，不过部分的单选样式都给用户提供默认选择的。

网格定义

近对接稿子又发了一些用奇怪间距的栅格案例，觉得这基础知识也必捞出给家回温一下。

先给大隆重介绍8点格：简单说就是横纵的间距值都是8的倍数。

么为什么是基8点去定义网，而不是6点或者10点？

如果你用8作为计的最位，你可以方便地缩你的计尺寸

8/2=4,4/2=2,2/2=1。如你从10开始，你缩小到网格单位可能是2.5像素，在往下是1.25像素。

这样可以保障基本主流屏幕适配性。

于图标尺寸也是这样议，为用8为基数设计icon能够被完美地放大。

所以我们设的时候，无论基于1倍图还2倍图，都建议家使用8点栅格。

如果是8点栅格，缩到1倍图就会现奇数尺寸（直接在1倍图就做奇数间距更是emmm！），这样的奇数尺寸在偶数尺寸的屏幕中（基本上的屏幕尺寸都是偶数的）剧中对齐位置上就会产生小数点，就是传说中的像素级马赛克，大应该都忍。

欢迎关注作者的微信公众：「Nana的设囊」