先給一個(gè)最精簡(jiǎn)的定義：
模態(tài) Modal：模態(tài)控件要求必須進(jìn)行操作（關(guān)閉or確認(rèn)）之后才可以進(jìn)行其他界面操作。
非模態(tài) Modeless：非模態(tài)控件的出現(xiàn)不影響用戶(hù)繼續(xù)界面操作。
它們之間最大的區(qū)別就在于用戶(hù)阻斷，與以下無(wú)關(guān)：
- 是不是會(huì)彈出透明遮罩層
- 控件外區(qū)域是否可點(diǎn)擊消失
- 上面有沒(méi)有操作項(xiàng)
然后我們來(lái)看具體的應(yīng)用例子：
最常見(jiàn)的模態(tài)與非模態(tài)的應(yīng)用就是彈窗Dialog/操作欄action sheet/浮層框Popover以及提示框toast了，接下來(lái)咱們來(lái)挨個(gè)細(xì)說(shuō)。
彈窗99.99%（對(duì)就是這么嚴(yán)謹(jǐn)）都屬于模態(tài)，因?yàn)樗某霈F(xiàn)視覺(jué)比重較大，通常都用在必須用戶(hù)進(jìn)行重視的操作提示中。點(diǎn)擊控件外區(qū)域，控件不消失。
操作欄與浮層框同理，99.99%屬于模態(tài)，雖然它不強(qiáng)行要求用戶(hù)進(jìn)行操作，但它的出現(xiàn)也阻斷了用戶(hù)進(jìn)行別的操作。點(diǎn)擊控件外區(qū)域，控件消失（限iOS，安卓可定制）。
提示框，99.99%屬于非模態(tài)，iOS叫HUD，安卓叫toast和snackbar。都是安安靜靜地彈它的信息，用戶(hù)可以選擇忽略它，控件通常伴隨2-3s的自動(dòng)消失or滑動(dòng)隱藏等交互。
另外再給大家安利一個(gè)特別好用的由iOS專(zhuān)屬控件演變而來(lái)的模態(tài)卡片，可以應(yīng)用在我們的各種界面設(shè)計(jì)中。
模態(tài)卡片早在iOS13的時(shí)候就被正式寫(xiě)入到 iOS 設(shè)計(jì)指南中。演變后可以更好同時(shí)適配安卓和iOS使用的模態(tài)卡片，增加了滑動(dòng)和隱藏的交互功能。
最后講個(gè)冷段子幫大家記憶下：模態(tài)（摸ta）肯定是會(huì)阻斷用戶(hù)操作的。
關(guān)于頁(yè)面加載的通用傳統(tǒng)方式通常是一個(gè)loading動(dòng)圖，比如大家熟悉的基礎(chǔ)款菊花轉(zhuǎn)。在各產(chǎn)品應(yīng)用中與品牌聯(lián)動(dòng)升級(jí)為定制的loading。
隨著界面設(shè)計(jì)的精細(xì)化，我們就會(huì)發(fā)現(xiàn)有些產(chǎn)品內(nèi)容的加載是可以進(jìn)行體驗(yàn)升級(jí)的。比如說(shuō)我們?cè)诩虞d前把內(nèi)容的大致輪廓預(yù)先展現(xiàn)出來(lái)，再逐步加載真正的內(nèi)容，感官體驗(yàn)上會(huì)使整個(gè)加載過(guò)程變得更加順暢且快速。
這種針對(duì)內(nèi)容資訊類(lèi)產(chǎn)品的特殊加載方式叫加載占位圖Skeleton Screen。
Skeleton Screen這個(gè)概念最早出自Google產(chǎn)品總監(jiān)Luke Wroblewski于2013年發(fā)表的博文《Mobile Design Details: Avoid The Spinner》里。目前這種加載方式在國(guó)外的產(chǎn)品設(shè)計(jì)中應(yīng)用比較廣（insgram/facebook等），國(guó)內(nèi)的相對(duì)少很多（非專(zhuān)業(yè)應(yīng)用：豆瓣）
但加載占位圖并不是適配萬(wàn)能場(chǎng)景的。如果內(nèi)容布局和排版不是固定的，輪廓和內(nèi)容布局的會(huì)有巨大差異，那么加載占位圖不僅不能給用戶(hù)順暢和期待感，反倒會(huì)造成落差。因此Skeleton Screen僅適用于布局排版固定的內(nèi)容區(qū)域，例如列表、文章、個(gè)人信息。
它的實(shí)現(xiàn)方式也很簡(jiǎn)單，不需要切圖啥的，開(kāi)發(fā)自己可以通過(guò)css+html實(shí)現(xiàn)Skeleton Screen 加載占位圖動(dòng)畫(huà)自上而下漸隱漸顯的效果。有開(kāi)發(fā)說(shuō)實(shí)現(xiàn)不了或者很麻煩的，可以度娘一個(gè)現(xiàn)成的保姆教程扔給他們。
不知道在座有多少鐵汁有接觸過(guò)頭像框設(shè)計(jì)的產(chǎn)品，一般類(lèi)似社交娛樂(lè)類(lèi)的直播產(chǎn)品可能見(jiàn)到的多一些。最近做項(xiàng)目接觸到了感覺(jué)坑很多，給大家分享一下有關(guān)的視覺(jué)定義，順便聊聊很多人困擾的圓角矩形的圓角定義問(wèn)題。
1. 圓角矩形的圓角定義
定義頭像框之前需要我們先定義頭像的圓角矩形圓角。為了保障界面里的頭像圓角體感一致性，我們需要定義一個(gè)等比圓角矩形（卡片/頭像等）的圓角系數(shù)：圓角和矩形寬的比值。舉個(gè)例子：假設(shè)我們的圓角系數(shù)是0.3，那么圓角矩形為66*66px的時(shí)候，圓角即為20px
這樣可以保證我們界面上的所有圓角矩形的圓角幅度感受是一致的，不會(huì)一會(huì)大一會(huì)小了。另外給大家提供一個(gè)常規(guī)的等比圓角矩形圓角系數(shù)：0.03-0.05。
但圓角系數(shù)的用法僅限于等比圓角矩形，如果我們?cè)谠O(shè)計(jì)背景卡片時(shí)候用到的不等比圓角矩形該如何定義它的圓角呢？
首先我們要定義一個(gè)界面里的最大圓角值（一般都是全屏圓角的大。，在最大圓角值基礎(chǔ)上定義幾個(gè)不同層級(jí)的圓角大小，圓角值梯度是可以由設(shè)計(jì)師根據(jù)界面的柵格密度自由發(fā)揮的。但一定要記得遵循以下2條規(guī)則：
- 同一層級(jí)的圓角矩形圓角需要保持一致（無(wú)論寬高）
- 小一層級(jí)的圓角矩形圓角必須小于高一層級(jí)的圓角矩形圓角
2. 頭像框的區(qū)域定義
定義好等圓角矩形（頭像）的圓角后，頭像框只要做出一個(gè)最大頭像尺寸即可適配到所有頭像上。這里建議大家留出足夠的頭像框區(qū)域給到開(kāi)發(fā)鐵汁，比如4:3的頭像與頭像框區(qū)域比例。
最后強(qiáng)烈建議大家叮囑開(kāi)發(fā)頭像框的具體實(shí)現(xiàn)方式：原頭像位置不動(dòng)，直接把頭像套在頭像上即可。不然可能出現(xiàn)可怕的畫(huà)面。
之前經(jīng)常遇到很多人犟的一個(gè)控件問(wèn)題：就是單項(xiàng)與多項(xiàng)選擇器視覺(jué)樣式的應(yīng)用。
大家都知道，單選和復(fù)選框樣式上做細(xì)節(jié)區(qū)分應(yīng)該是這樣的：
但之所以混淆主要是因?yàn)槌肆斜沓霈F(xiàn)的選擇框以外，我們還會(huì)遇到類(lèi)似安全須知這樣的地方常會(huì)用到對(duì)勾選擇框，但它卻是一個(gè)單選項(xiàng)。所以我們貌似不能從簡(jiǎn)單的單選/復(fù)選角度來(lái)定義控件。
所以這里建議大家這樣定義：
- 對(duì)勾樣式：“選擇”與“未選擇”，可支持復(fù)選。
- 大小圓樣式（radio）：僅限單選。
至于選擇框是否有默認(rèn)選擇，還要看具體的訴求，不過(guò)大部分的單選樣式都是給用戶(hù)提供默認(rèn)選擇的。
最近對(duì)接稿子又發(fā)現(xiàn)了一些用奇怪間距的柵格案例，覺(jué)得這個(gè)基礎(chǔ)知識(shí)也有必要撈出來(lái)給大家回溫一下。
先給大家隆重介紹下8點(diǎn)網(wǎng)格：簡(jiǎn)單說(shuō)就是橫縱的間距值都是8的倍數(shù)。
那么為什么是基于8點(diǎn)去定義網(wǎng)格，而不是6點(diǎn)或者10點(diǎn)？
如果你用8作為設(shè)計(jì)的最小單位，你可以很方便地縮小你的設(shè)計(jì)尺寸
8/2=4,4/2=2,2/2=1。如果你從10開(kāi)始，你縮小到的網(wǎng)格單位可能是2.5像素，在往下是1.25像素。
這樣可以保障基本的主流屏幕適配性。
對(duì)于圖標(biāo)的尺寸也是這樣建議的，因?yàn)橛?點(diǎn)為基數(shù)設(shè)計(jì)的icon能夠被完美地放大。
所以在我們做設(shè)計(jì)的時(shí)候，無(wú)論是基于1倍圖還是2倍圖，都建議大家使用8點(diǎn)柵格。
如果不是8點(diǎn)柵格，縮到1倍圖下就會(huì)出現(xiàn)奇數(shù)尺寸（直接在1倍圖就做奇數(shù)間距更是emmm。，這樣的奇數(shù)尺寸在偶數(shù)尺寸的屏幕中（基本上的屏幕尺寸都是偶數(shù)的）劇中對(duì)齊位置上就會(huì)產(chǎn)生小數(shù)點(diǎn)，也就是傳說(shuō)中的像素級(jí)馬賽克，大家應(yīng)該都不能忍吧。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。