1.3 滑動開關(guān)與分頁器

1.3.1 滑動開關(guān)

在輸入類控件中，滑動開關(guān)主要起到控制產(chǎn)品某個(gè)功能開啟或關(guān)閉的作用。圖1-14展示了一個(gè)滑動開關(guān)的經(jīng)典控件樣式，控制的是產(chǎn)品“夜間模式”功能的開啟和關(guān)閉。

圖1-14 “夜間模式”開啟/關(guān)閉按鈕樣式

在設(shè)計(jì)滑動開關(guān)時(shí)，要明確開關(guān)控制的功能、開關(guān)的樣式、開關(guān)的前置狀態(tài)、交互動作，以及后置狀態(tài)等設(shè)計(jì)要素。以iOS設(shè)備中“飛行模式”的開啟和關(guān)閉功能設(shè)計(jì)為例，圖1-15展示了實(shí)際設(shè)計(jì)滑動開關(guān)過程中需要注意的細(xì)節(jié)。

運(yùn)用滑動開關(guān)控件來承載一個(gè)功能完整的開關(guān)邏輯。首先，要明確這個(gè)控件控制什么功能，圖1-15中滑動開關(guān)所承載的功能是“飛行模式”的開啟和關(guān)閉。其次，要明確開關(guān)控件的前置狀態(tài)，例如，如果“飛行模式”這個(gè)功能默認(rèn)是關(guān)閉的，那么“飛行模式”滑動開關(guān)控件的前置狀態(tài)就是關(guān)閉狀態(tài)，這個(gè)狀態(tài)下其他模塊的狀態(tài)都屬于前置狀態(tài)的范疇。例如，“飛行模式”關(guān)閉時(shí)無線局域網(wǎng)顯示的是“未連接”，而開啟時(shí)顯示的是“關(guān)閉”兩者，都屬于飛行模式開關(guān)的前置狀態(tài)。

圖1-15 iOS設(shè)備中“飛行模式”的開啟/關(guān)閉功能

接下來，要明確滑動開關(guān)的交互動作。圖1-15中“飛行模式”滑動開關(guān)的交互動作是“單擊”。通過單擊，切換開啟和關(guān)閉狀態(tài)。其他常見的交互動作還有“滑動”“雙擊”“長按”等。

最后，要明確交互動作所產(chǎn)生的后置狀態(tài)。對比圖1-15中滑動開關(guān)關(guān)閉和開啟前后的信息可以看出，“飛行模式”開啟后，除開關(guān)按鈕的變化之外，“無線局域網(wǎng)”信息和“蜂窩網(wǎng)絡(luò)”信息都有變化，而變化后的狀態(tài)就屬于滑動開關(guān)的后置狀態(tài)范疇。

關(guān)于滑動開關(guān)的一些其他注意事項(xiàng)如下。

● 滑動開關(guān)是一種功能控件，其樣式不僅局限于文字加圖標(biāo)類型的開關(guān)，還有純圖標(biāo)樣式，以及仿真開關(guān)樣式等。所以，在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)不要局限于固定的滑動開關(guān)樣式，只要符合基本的設(shè)計(jì)要素，能承載一項(xiàng)功能的開啟和關(guān)閉，就屬于有效的設(shè)計(jì)。

● 對于開關(guān)的前置狀態(tài)和后置狀態(tài)，在滑動開關(guān)附近添加輔助說明文字，讓用戶知道此時(shí)的狀態(tài)承載什么功能，以及相反的狀態(tài)承載什么功能。

● 滑動開關(guān)開啟和關(guān)閉狀態(tài)切換的過程中，也就是發(fā)生切換時(shí)，界面也可以給出明確的切換提示。例如，如果一個(gè)滑動開關(guān)承載的是某個(gè)重要的功能，不能隨意開啟或者關(guān)閉，則需要進(jìn)行有效的彈窗提示，讓用戶知曉開啟或關(guān)閉后的結(jié)果，再進(jìn)行操作。