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