起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)盤(pán)點(diǎn)5個(gè)常被搞混的控件與規(guī)范
編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在日常工作中有很多需要注意的設(shè)計(jì)規(guī)范，一些設(shè)計(jì)師會(huì)把一些控件和規(guī)范搞混，清楚一些專業(yè)名詞也可以讓你在職場(chǎng)中更加靈活；本文作者分享了關(guān)于設(shè)計(jì)師5個(gè)常被搞混的控件與規(guī)范，我們一起來(lái)看一下。
開(kāi)篇先講個(gè)故事：
上周偶然一次和開(kāi)發(fā)對(duì)對(duì)碰視覺(jué)規(guī)范的時(shí)候，一位開(kāi)發(fā)問(wèn)了個(gè)問(wèn)題：這個(gè)對(duì)話框是做成模態(tài)還是非模態(tài)的？
老實(shí)說(shuō)那一瞬間我突然有點(diǎn)蒙，一時(shí)半會(huì)在那里想是哪種呢？后來(lái)突然反應(yīng)過(guò)來(lái)：特喵這種警示對(duì)話框99.99%不都是模態(tài)的么，怎么會(huì)有這種問(wèn)題！
那種丟人的直覺(jué)告訴我，我應(yīng)該不是一個(gè)人，為了更多的鐵汁未來(lái)第一時(shí)間不丟人，我打算寫(xiě)著一篇給大家詳解幾個(gè)常被搞混的一些控件與大家盲區(qū)中的一些設(shè)計(jì)規(guī)范。
一、模態(tài)與非模態(tài)
先給一個(gè)最精簡(jiǎn)的定義：
模態(tài) Modal：模態(tài)控件要求必須進(jìn)行操作（關(guān)閉or確認(rèn)）之后才可以進(jìn)行其他界面操作。
非模態(tài) Modeless：非模態(tài)控件的出現(xiàn)不影響用戶繼續(xù)界面操作。
它們之間最大的區(qū)別就在于用戶阻斷，與以下無(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é)比重較大，通常都用在必須用戶進(jìn)行重視的操作提示中；點(diǎn)擊控件外區(qū)域，控件不消失。
操作欄與浮層框同理，99.99%屬于模態(tài)，雖然它不強(qiáng)行要求用戶進(jìn)行操作，但它的出現(xiàn)也阻斷了用戶進(jìn)行別的操作；點(diǎn)擊控件外區(qū)域，控件消失（限iOS，安卓可定制）。
提示框，99.99%屬于非模態(tài)，ios叫HUD，安卓叫toast和snackbar；都是安安靜靜地彈它的信息，用戶可以選擇忽略它，控件通常伴隨2-3s的自動(dòng)消失or滑動(dòng)隱藏等交互。
另外再給大家安利一個(gè)特別好用的由ios專屬控件演變而來(lái)的模態(tài)卡片，可以應(yīng)用在我們的各種界面設(shè)計(jì)中。
模態(tài)卡片早在ios13的時(shí)候就被正式寫(xiě)入到 iOS 設(shè)計(jì)指南中。演變后可以更好同時(shí)適配安卓和ios同時(shí)使用的模態(tài)卡片，增加了滑動(dòng)和隱藏的交互功能。
最后講個(gè)冷段子幫大家記憶下：模態(tài)（摸ta）肯定是會(huì)阻斷用戶操作的。
二、加載占位圖 Skeleton Screen
關(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)容資訊類產(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ì)少很多（非專業(yè)應(yīng)用：豆瓣）。
但加載占位圖并不是適配萬(wàn)能場(chǎng)景的。如果內(nèi)容布局和排版不是固定的，輪廓和內(nèi)容布局的會(huì)有巨大差異，那么加載占位圖不僅不能給用戶順暢和期待感，反倒會(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è)類的直播產(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à)面。
四、選擇框的精細(xì)區(qū)分
之前經(jīng)常遇到很多人犟的一個(gè)控件問(wèn)題：就是單項(xiàng)與多項(xiàng)選擇器視覺(jué)樣式的應(yīng)用。
大家都知道，單選和復(fù)選框樣式上做細(xì)節(jié)區(qū)分應(yīng)該是這樣的：
但之所以混淆主要是因?yàn)槌肆斜沓霈F(xiàn)的選擇框以外，我們還會(huì)遇到類似安全須知這樣的地方常會(huì)用到對(duì)勾選擇框，但它卻是一個(gè)單選項(xiàng)，所以我們貌似不能從簡(jiǎn)單的單選/復(fù)選角度來(lái)定義控件。
所以這里建議大家這樣定義：
對(duì)勾樣式：“選擇”與“未選擇”，可支持復(fù)選。
大小圓樣式（radio）：僅限單選。
至于選擇框是否有默認(rèn)選擇，還要看具體的訴求，不過(guò)大部分的單選樣式都是給用戶提供默認(rèn)選擇的。
五、網(wǎng)格定義
最近對(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)該都不能忍吧。
作者：Nana，滴滴資深UX設(shè)計(jì)師，微信公眾號(hào)「Nana的設(shè)計(jì)錦囊」
本文由 @NaNa 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
很有用，學(xué)習(xí)了！
看到“代表你同意以下長(zhǎng)胖須知”那里我笑了，作者好可愛(ài)
新工作轉(zhuǎn)型C端，學(xué)到了！感謝。
順便好奇會(huì)出現(xiàn)什么可怕的畫(huà)面？