盤點5個常被搞混的控件與規范

2 評論 4858 瀏覽 32 收藏 13 分鐘

編輯導語:設計師在日常工作中有很多需要注意的設計規范,一些設計師會把一些控件和規范搞混,清楚一些專業名詞也可以讓你在職場中更加靈活;本文作者分享了關于設計師5個常被搞混的控件與規范,我們一起來看一下。

開篇先講個故事:

上周偶然一次和開發對對碰視覺規范的時候,一位開發問了個問題:這個對話框是做成模態還是非模態的?

老實說那一瞬間我突然有點蒙,一時半會在那里想是哪種呢?后來突然反應過來:特喵這種警示對話框99.99%不都是模態的么,怎么會有這種問題!

那種丟人的直覺告訴我,我應該不是一個人,為了更多的鐵汁未來第一時間不丟人,我打算寫著一篇給大家詳解幾個常被搞混的一些控件與大家盲區中的一些設計規范。

一、模態與非模態

先給一個最精簡的定義:

模態 Modal:模態控件要求必須進行操作(關閉or確認)之后才可以進行其他界面操作。

非模態 Modeless:非模態控件的出現不影響用戶繼續界面操作。

它們之間最大的區別就在于用戶阻斷,與以下無關:

  • 是不是會彈出透明遮罩層;
  • 控件外區域是否可點擊消失;
  • 上面有沒有操作項;

然后我們來看具體的應用例子:

最常見的模態與非模態的應用就是彈窗Dialog/操作欄action sheet/浮層框Popover以及提示框toast了,接下來咱們來挨個細說。

盤點5個常被搞混的控件與規范

彈窗99.99%(對就是這么嚴謹)都屬于模態,因為它的出現視覺比重較大,通常都用在必須用戶進行重視的操作提示中;點擊控件外區域,控件不消失。

盤點5個常被搞混的控件與規范

操作欄與浮層框同理,99.99%屬于模態,雖然它不強行要求用戶進行操作,但它的出現也阻斷了用戶進行別的操作;點擊控件外區域,控件消失(限iOS,安卓可定制)。

盤點5個常被搞混的控件與規范

提示框,99.99%屬于非模態,ios叫HUD,安卓叫toast和snackbar;都是安安靜靜地彈它的信息,用戶可以選擇忽略它,控件通常伴隨2-3s的自動消失or滑動隱藏等交互。

另外再給大家安利一個特別好用的由ios專屬控件演變而來的模態卡片,可以應用在我們的各種界面設計中。

盤點5個常被搞混的控件與規范

模態卡片早在ios13的時候就被正式寫入到 iOS 設計指南中。演變后可以更好同時適配安卓和ios同時使用的模態卡片,增加了滑動和隱藏的交互功能。

最后講個冷段子幫大家記憶下:模態(摸ta)肯定是會阻斷用戶操作的。

二、加載占位圖 Skeleton Screen

關于頁面加載的通用傳統方式通常是一個loading動圖,比如大家熟悉的基礎款菊花轉,在各產品應用中與品牌聯動升級為定制的loading。

盤點5個常被搞混的控件與規范

隨著界面設計的精細化,我們就會發現有些產品內容的加載是可以進行體驗升級的;比如說我們在加載前把內容的大致輪廓預先展現出來,再逐步加載真正的內容,感官體驗上會使整個加載過程變得更加順暢且快速。

這種針對內容資訊類產品的特殊加載方式叫加載占位圖Skeleton Screen。

盤點5個常被搞混的控件與規范

Skeleton Screen這個概念最早出自Google產品總監Luke Wroblewski于2013年發表的博文《Mobile Design Details: Avoid The Spinner》里;目前這種加載方式在國外的產品設計中應用比較廣(insgram/facebook等),國內的相對少很多(非專業應用:豆瓣)。

盤點5個常被搞混的控件與規范

但加載占位圖并不是適配萬能場景的。如果內容布局和排版不是固定的,輪廓和內容布局的會有巨大差異,那么加載占位圖不僅不能給用戶順暢和期待感,反倒會造成落差;因此Skeleton Screen僅適用于布局排版固定的內容區域,例如列表、文章、個人信息。

它的實現方式也很簡單,不需要切圖啥的,開發自己可以通過css+html實現Skeleton Screen 加載占位圖動畫自上而下漸隱漸顯的效果;有開發說實現不了或者很麻煩的,可以度娘一個現成的保姆教程扔給他們。

三、圓角矩形與頭像框的定義

不知道在座有多少鐵汁有接觸過頭像框設計的產品,一般類似社交娛樂類的直播產品可能見到的多一些;最近做項目接觸到了感覺坑很多,給大家分享一下有關的視覺定義,順便聊聊很多人困擾的圓角矩形的圓角定義問題。

1. 圓角矩形的圓角定義

定義頭像框之前需要我們先定義頭像的圓角矩形圓角。為了保障界面里的頭像圓角體感一致性,我們需要定義一個等比圓角矩形(卡片/頭像等)的圓角系數:圓角和矩形寬的比值。

舉個例子:假設我們的圓角系數是0.3,那么圓角矩形為66*66px的時候,圓角即為20px。

盤點5個常被搞混的控件與規范

這樣可以保證我們界面上的所有圓角矩形的圓角幅度感受是一致的,不會一會大一會小了,另外給大家提供一個常規的等比圓角矩形圓角系數:0.03-0.05。

但圓角系數的用法僅限于等比圓角矩形,如果我們在設計背景卡片時候用到的不等比圓角矩形該如何定義它的圓角呢?

首先我們要定義一個界面里的最大圓角值(一般都是全屏圓角的大?。?,在最大圓角值基礎上定義幾個不同層級的圓角大小,圓角值梯度是可以由設計師根據界面的柵格密度自由發揮的。

但一定要記得遵循以下2條規則:

  • 同一層級的圓角矩形圓角需要保持一致(無論寬高);
  • 小一層級的圓角矩形圓角必須小于高一層級的圓角矩形圓角;

盤點5個常被搞混的控件與規范

2. 頭像框的區域定義

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

最后強烈建議大家叮囑開發頭像框的具體實現方式:原頭像位置不動,直接把頭像套在頭像上即可,不然可能出現可怕的畫面。

盤點5個常被搞混的控件與規范

四、選擇框的精細區分

之前經常遇到很多人犟的一個控件問題:就是單項與多項選擇器視覺樣式的應用。

大家都知道,單選和復選框樣式上做細節區分應該是這樣的:

盤點5個常被搞混的控件與規范

但之所以混淆主要是因為除了列表出現的選擇框以外,我們還會遇到類似安全須知這樣的地方常會用到對勾選擇框,但它卻是一個單選項,所以我們貌似不能從簡單的單選/復選角度來定義控件。

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

對勾樣式:“選擇”與“未選擇”,可支持復選。

大小圓樣式(radio):僅限單選。

盤點5個常被搞混的控件與規范

盤點5個常被搞混的控件與規范

至于選擇框是否有默認選擇,還要看具體的訴求,不過大部分的單選樣式都是給用戶提供默認選擇的。

五、網格定義

最近對接稿子又發現了一些用奇怪間距的柵格案例,覺得這個基礎知識也有必要撈出來給大家回溫一下。

先給大家隆重介紹下8點網格:簡單說就是橫縱的間距值都是8的倍數。

那么為什么是基于8點去定義網格,而不是6點或者10點?

如果你用8作為設計的最小單位,你可以很方便的縮小的你的設計尺寸,8/2=4,4/2=2,2/2=1;如果你從10開始,你縮小到的網格單位可能是2.5像素,在往下是1.25像素。

盤點5個常被搞混的控件與規范

盤點5個常被搞混的控件與規范

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

盤點5個常被搞混的控件與規范

對于圖標的尺寸也是這樣建議的,因為用8點為基數設計的icon能夠被完美地放大。

所以在我們做設計的時候,無論是基于1倍圖還是2倍圖,都建議大家使用8點柵格。

如果不是8點柵格,縮到1倍圖下就會出現奇數尺寸(直接在1倍圖就做奇數間距更是emmm?。?,這樣的奇數尺寸在偶數尺寸的屏幕中(基本上的屏幕尺寸都是偶數的)劇中對齊位置上就會產生小數點,也就是傳說中的像素級馬賽克,大家應該都不能忍吧。

 

作者:Nana,滴滴資深UX設計師,微信公眾號「Nana的設計錦囊」

本文由 @NaNa 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看到“代表你同意以下長胖須知”那里我笑了,作者好可愛

    回復
  2. 新工作轉型C端,學到了!感謝。
    順便好奇會出現什么可怕的畫面?

    回復