容易搞混的控件與規(guī)范
發(fā)布時(shí)間:2022-01-06 11:13 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

模態(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)不影響用戶(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ō)。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

彈窗99.99%(對(duì)就是這么嚴(yán)謹(jǐn))都屬于模態(tài),因?yàn)樗某霈F(xiàn)視覺(jué)比重較大,通常都用在必須用戶(hù)進(jìn)行重視的操作提示中。點(diǎn)擊控件外區(qū)域,控件不消失。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

操作欄與浮層框同理,99.99%屬于模態(tài),雖然它不強(qiáng)行要求用戶(hù)進(jìn)行操作,但它的出現(xiàn)也阻斷了用戶(hù)進(jìn)行別的操作。點(diǎn)擊控件外區(qū)域,控件消失(限iOS,安卓可定制)。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

提示框,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ì)中。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

模態(tài)卡片早在iOS13的時(shí)候就被正式寫(xiě)入到 iOS 設(shè)計(jì)指南中。演變后可以更好同時(shí)適配安卓和iOS使用的模態(tài)卡片,增加了滑動(dòng)和隱藏的交互功能。

最后講個(gè)冷段子幫大家記憶下:模態(tài)(摸ta)肯定是會(huì)阻斷用戶(hù)操作的。


加載占位圖 Skeleton Screen


關(guān)于頁(yè)面加載的通用傳統(tǒng)方式通常是一個(gè)loading動(dòng)圖,比如大家熟悉的基礎(chǔ)款菊花轉(zhuǎn)。在各產(chǎn)品應(yīng)用中與品牌聯(lián)動(dòng)升級(jí)為定制的loading。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

隨著界面設(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。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

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)用:豆瓣)

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

但加載占位圖并不是適配萬(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

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

這樣可以保證我們界面上的所有圓角矩形的圓角幅度感受是一致的,不會(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í)的圓角矩形圓角

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

2. 頭像框的區(qū)域定義

定義好等圓角矩形(頭像)的圓角后,頭像框只要做出一個(gè)最大頭像尺寸即可適配到所有頭像上。這里建議大家留出足夠的頭像框區(qū)域給到開(kāi)發(fā)鐵汁,比如4:3的頭像與頭像框區(qū)域比例。

最后強(qiáng)烈建議大家叮囑開(kāi)發(fā)頭像框的具體實(shí)現(xiàn)方式:原頭像位置不動(dòng),直接把頭像套在頭像上即可。不然可能出現(xiàn)可怕的畫(huà)面。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范


選擇框的精細(xì)區(qū)分


之前經(jīng)常遇到很多人犟的一個(gè)控件問(wèn)題:就是單項(xiàng)與多項(xiàng)選擇器視覺(jué)樣式的應(yīng)用。

大家都知道,單選和復(fù)選框樣式上做細(xì)節(jié)區(qū)分應(yīng)該是這樣的:

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

但之所以混淆主要是因?yàn)槌肆斜沓霈F(xiàn)的選擇框以外,我們還會(huì)遇到類(lèi)似安全須知這樣的地方常會(huì)用到對(duì)勾選擇框,但它卻是一個(gè)單選項(xiàng)。所以我們貌似不能從簡(jiǎn)單的單選/復(fù)選角度來(lái)定義控件。

所以這里建議大家這樣定義:

  • 對(duì)勾樣式:“選擇”與“未選擇”,可支持復(fù)選。
  • 大小圓樣式(radio):僅限單選。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

至于選擇框是否有默認(rèn)選擇,還要看具體的訴求,不過(guò)大部分的單選樣式都是給用戶(hù)提供默認(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像素。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

這樣可以保障基本的主流屏幕適配性。

快記下來(lái)!5個(gè)連大廠設(shè)計(jì)師都容易搞混的控件與規(guī)范

對(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)該都不能忍吧。

UI設(shè)計(jì)圖標(biāo)案例實(shí)戰(zhàn)教程
我要自學(xué)網(wǎng)商城 ¥30 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC