深度解析:開(kāi)關(guān)設(shè)計(jì)

6 評(píng)論 7028 瀏覽 13 收藏 11 分鐘

編輯導(dǎo)語(yǔ):開(kāi)關(guān)這一功能在APP等應(yīng)用中十分常見(jiàn),但是開(kāi)關(guān)有許多種類型,在具體的應(yīng)用場(chǎng)景下,使用哪種開(kāi)關(guān)設(shè)計(jì)會(huì)更合理和便捷呢?本篇文章里,作者介紹了開(kāi)關(guān)的分類、形式和相應(yīng)的設(shè)計(jì)策略等,不妨來(lái)看一下。

開(kāi)關(guān)是很常見(jiàn)也很廣泛的一種操作形式,輕點(diǎn)一下即可完成打開(kāi)和關(guān)閉的操作。現(xiàn)實(shí)中,開(kāi)關(guān)是以使電路開(kāi)路、使電流中斷或使其流到其他電路的電子元件。例如,墻壁開(kāi)關(guān)、電源開(kāi)關(guān)。

在觸摸屏幕上,Material Design中也給出相關(guān)定義:

  1. 手機(jī)和平板電腦上打開(kāi)或關(guān)閉單個(gè)項(xiàng)目;
  2. 立即激活或停用某物。

隨著iOS的滑塊開(kāi)關(guān)被廣泛接受,之后安卓系統(tǒng)中的開(kāi)關(guān)也跟進(jìn),之后幾乎所有的APP都追隨滑塊形式的開(kāi)關(guān),目前開(kāi)關(guān)的表現(xiàn)樣式是非常固定的。

在實(shí)際運(yùn)用時(shí),開(kāi)關(guān)仿佛很受到設(shè)計(jì)者的喜愛(ài),運(yùn)用非常的廣泛,甚至“一切設(shè)置皆可開(kāi)關(guān)”。開(kāi)關(guān)到底應(yīng)用怎么運(yùn)用才合理,我們一起探究。

一、開(kāi)關(guān)分類

1. 立即反饋開(kāi)關(guān)

屬于該手機(jī)或應(yīng)用的某個(gè)獨(dú)立功能,例如WLAN或藍(lán)牙等開(kāi)關(guān),其作用是立即生效且反饋的,立即會(huì)根據(jù)用戶的操作做出對(duì)應(yīng)功能開(kāi)啟或關(guān)閉的反應(yīng)。這類開(kāi)關(guān)是最貼近生活中電子元件的開(kāi)關(guān),也是最原始的的開(kāi)關(guān)類型。

2. 延遲反饋開(kāi)關(guān)

開(kāi)關(guān)經(jīng)過(guò)演變,涵蓋范圍開(kāi)始擴(kuò)大,對(duì)于手機(jī)的某些模式都用開(kāi)關(guān)來(lái)表達(dá),例如勿擾模式、靜音模式、自動(dòng)調(diào)節(jié)亮度選項(xiàng)等,這些開(kāi)關(guān)打開(kāi)后,手機(jī)本身并沒(méi)有立即反饋,等到來(lái)電或通知接收時(shí),開(kāi)關(guān)才產(chǎn)生作用。

3. 弱反饋開(kāi)關(guān)(功能性開(kāi)關(guān))

后來(lái)很多設(shè)置選項(xiàng)都加入其中,例如“用側(cè)邊按鈕呼叫”“自動(dòng)保存通話錄音”等。此時(shí)的設(shè)置項(xiàng)用動(dòng)詞的表達(dá),闡述某個(gè)功能,該功能一般是小的輔助功能或自定義的功能,優(yōu)化主干功能。該類開(kāi)關(guān)并不以反饋為目的,而是通過(guò)開(kāi)關(guān)增加一個(gè)功能點(diǎn)。

此時(shí)的開(kāi)關(guān)相當(dāng)于“選擇”,而開(kāi)關(guān)只是一種表現(xiàn)形式。

二、開(kāi)關(guān)的形式

開(kāi)關(guān)則可根據(jù)自身想要表達(dá)的內(nèi)容的重要程度、可理解程度進(jìn)行延展。

  1. 對(duì)用戶的行為和操作有一定影響的開(kāi)關(guān),一般會(huì)在副行說(shuō)明開(kāi)關(guān)打開(kāi)后的結(jié)果。
  2. 對(duì)用戶當(dāng)前的狀態(tài)需要進(jìn)行改變的開(kāi)關(guān),一般也會(huì)進(jìn)行確認(rèn)操作。增加確認(rèn)操作彈框,會(huì)打擾用戶當(dāng)前的操作,僅適用于對(duì)用戶影響較大的狀態(tài)的開(kāi)關(guān)。
  3. 對(duì)于簡(jiǎn)單易理解的設(shè)置項(xiàng),通常無(wú)需過(guò)多解釋。

深度解析:開(kāi)關(guān)設(shè)計(jì)

上圖中,菜鳥(niǎo)裹裹關(guān)閉通知,認(rèn)知簡(jiǎn)單,無(wú)需給出提示。

三、開(kāi)關(guān)的設(shè)計(jì)策略

1. 文本運(yùn)用

開(kāi)關(guān)的組成通常是文本+開(kāi)關(guān)控件的形式。

1)文本的表述盡量使用肯定句,不用使用否定詞的語(yǔ)句

例如“不把我推薦給好友”,這個(gè)句子本身就是否定句,開(kāi)關(guān)控件本身也有打開(kāi)和關(guān)閉兩個(gè)屬性,這時(shí)為了理解此開(kāi)關(guān)的含義需要繞彎理解,也可能是為了誤導(dǎo)用戶,提高轉(zhuǎn)化率而設(shè)置的。

深度解析:開(kāi)關(guān)設(shè)計(jì)

2)文本精練,避免重復(fù)用語(yǔ)

例如“打開(kāi)后”或“開(kāi)啟后”的副行文字,開(kāi)關(guān)本身的空間已經(jīng)包含了”打開(kāi)后”,無(wú)須贅述。

深度解析:開(kāi)關(guān)設(shè)計(jì)

3)使用簡(jiǎn)單句型,避免條件句等復(fù)合句型

例如“響鈴模式振動(dòng)”“靜音模式振動(dòng)”,這類句型本身含有一定的條件,且與其他的操作有著密切的關(guān)系。

深度解析:開(kāi)關(guān)設(shè)計(jì)

2. 減少使用多重條件開(kāi)關(guān)

多重開(kāi)關(guān),也可理解為子母開(kāi)關(guān),大開(kāi)關(guān)套小開(kāi)關(guān)的形式。通常子開(kāi)關(guān)都是母開(kāi)關(guān)的特殊條件,會(huì)大大減弱母開(kāi)關(guān)的作用效力,容易忽略子開(kāi)關(guān)條件之間的互相影響,增加理解困難。

此時(shí)的子開(kāi)關(guān)無(wú)法獨(dú)立使用,一般為條件狀語(yǔ)。子開(kāi)關(guān)越多,則情況越多。

例如:

  • 1個(gè)子開(kāi)關(guān)對(duì)應(yīng)2種情況(子開(kāi)關(guān)打開(kāi)和關(guān)閉);
  • 2個(gè)子開(kāi)關(guān)對(duì)應(yīng)4種情況(兩個(gè)子開(kāi)關(guān)均打開(kāi)、均關(guān)閉、子開(kāi)關(guān)1打開(kāi)且子開(kāi)關(guān)2關(guān)閉、子開(kāi)關(guān)1關(guān)閉且子開(kāi)關(guān)2打開(kāi));
  • N個(gè)子開(kāi)關(guān)對(duì)應(yīng)2的N次方種情況,以此類推。

備注:原則上每個(gè)子條件,雖未以開(kāi)關(guān)的形式展現(xiàn),其效力是相同的。

例如IOS的勿擾模式,勿擾模式開(kāi)關(guān)為母開(kāi)關(guān),“重復(fù)來(lái)電”“設(shè)定時(shí)間”均為子開(kāi)關(guān),是勿擾模式行使功能的條件。

深度解析:開(kāi)關(guān)設(shè)計(jì)

當(dāng)母開(kāi)關(guān)和以上兩個(gè)子開(kāi)關(guān)均打開(kāi)時(shí),情況是:在設(shè)定的時(shí)間內(nèi)開(kāi)啟勿擾模式,且支持重復(fù)來(lái)電。問(wèn)題:

  • 設(shè)定時(shí)間與重復(fù)來(lái)電之間是否互相約束?理論上都應(yīng)該是互相約束的,所以需要用戶自己去理解條件之間的互相約束邏輯。
  • 非設(shè)定時(shí)間內(nèi),相當(dāng)于勿擾開(kāi)關(guān)是關(guān)閉的,重復(fù)來(lái)電開(kāi)關(guān)也是關(guān)閉的。效力被互相牽制。

3. 不與系統(tǒng)功能設(shè)定有交集

各自應(yīng)用的開(kāi)關(guān)只需要管自己領(lǐng)域的設(shè)定,對(duì)于系統(tǒng)的設(shè)置,盡量不沖突也不涉及。其目的是維持手機(jī)系統(tǒng)的穩(wěn)定,且維護(hù)好中央與地方的關(guān)系,行使自己分內(nèi)權(quán)利。

示例1微信中“開(kāi)啟NFC功能”、“橫屏模式”這都是系統(tǒng)功能,系統(tǒng)中有快捷開(kāi)關(guān)的位置和詳細(xì)界面,不建議放置在任何應(yīng)用內(nèi)部。

深度解析:開(kāi)關(guān)設(shè)計(jì)

示例2菜鳥(niǎo)裹裹中,“攬收通知”“派送通知”等七八條與系統(tǒng)通知相關(guān)的開(kāi)關(guān),除了系統(tǒng)設(shè)定的各類通知開(kāi)關(guān),其應(yīng)用內(nèi)部還有額外的通知開(kāi)關(guān),總之雜亂無(wú)章。

深度解析:開(kāi)關(guān)設(shè)計(jì)

4. 為用戶提供好的解決方案,而不是大量的提供開(kāi)關(guān)

給用戶提供大量開(kāi)關(guān),實(shí)際上是去責(zé)化的表現(xiàn),將本應(yīng)該是分內(nèi)職責(zé)的事,推給用戶,卻美其名曰“自定義”?!白远x”并不等同良好體驗(yàn),讓用戶少做選擇是我們應(yīng)該做的。

例如內(nèi)容類的應(yīng)用的 “省流”開(kāi)關(guān),不應(yīng)該是一個(gè)選項(xiàng),而是應(yīng)用需對(duì)用戶的網(wǎng)絡(luò)情況,不同內(nèi)容展示所消耗流量的情況,進(jìn)行統(tǒng)一判斷,做出一個(gè)絕佳方案。

深度解析:開(kāi)關(guān)設(shè)計(jì)

5. 多項(xiàng)內(nèi)容時(shí),“選擇”優(yōu)于“開(kāi)關(guān)”

開(kāi)關(guān)可以覆蓋選擇,因此不少界面用開(kāi)關(guān)代替了很多的選擇。但當(dāng)多項(xiàng)內(nèi)容需要操作時(shí),“選擇”優(yōu)于“開(kāi)關(guān)”。

深度解析:開(kāi)關(guān)設(shè)計(jì)

一般當(dāng)單個(gè)功能項(xiàng)時(shí),開(kāi)關(guān)和選擇可以互換;一般多個(gè)功能選項(xiàng)或多個(gè)內(nèi)容時(shí),適合用選擇;立即反饋開(kāi)關(guān)或弱反饋開(kāi)關(guān)的情況時(shí),適合用開(kāi)關(guān)。

深度解析:開(kāi)關(guān)設(shè)計(jì)

6. 某個(gè)開(kāi)關(guān)項(xiàng)灰顯時(shí),不適合顯示其“開(kāi)”和“關(guān)”的狀態(tài)

開(kāi)關(guān)無(wú)論是打開(kāi)狀態(tài)還是關(guān)閉狀態(tài),都能傳遞某個(gè)含義。當(dāng)該選項(xiàng)無(wú)法設(shè)置時(shí),其“開(kāi)”和“關(guān)”的狀態(tài)顯示出來(lái),即使文本灰顯,也很容易誤導(dǎo)用戶。

深度解析:開(kāi)關(guān)設(shè)計(jì)

四、結(jié)語(yǔ)

精準(zhǔn)運(yùn)用每一個(gè)控件,是對(duì)每個(gè)用戶體驗(yàn)從業(yè)者的最基本的要求??丶陔S著時(shí)間的推移,其含義和表現(xiàn)都會(huì)發(fā)生變化,就像“開(kāi)關(guān)”的演變一樣。綜合易用性原則、形式表現(xiàn)、用戶認(rèn)知、文字表達(dá)等多個(gè)部分更恰當(dāng)?shù)耐ㄟ^(guò)控件這個(gè)工具表達(dá)出設(shè)計(jì)者的想法和方案是十分必要的。

 

本文由 @張寧寧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 文本精煉的例子,個(gè)人覺(jué)得并不是太合適,我在表述的時(shí)候,寫(xiě)上了開(kāi)啟后,XXX,反而減少我讀完這些文字后,稍微頓一下再反應(yīng)是否需要開(kāi)啟。有些人群,老人之類的,使用本身有一定困難,對(duì)開(kāi)關(guān)的敏感程度不夠高,有文案突出的話,會(huì)更加明確。

    來(lái)自福建 回復(fù)
    1. 感謝您的不同意見(jiàn),在設(shè)計(jì)時(shí),類似的問(wèn)題其實(shí)很很多。其實(shí)就像“長(zhǎng)時(shí)間久坐”或者“凱旋歸來(lái)”的日常說(shuō)法,大家雖然容易接受,但實(shí)際上是錯(cuò)誤表達(dá)。這個(gè)地方也是,開(kāi)關(guān)本身的操作就包含了打開(kāi)后和關(guān)閉后的意思,其與文本“打開(kāi)后”就是重復(fù)表達(dá),還占用了四個(gè)字符,文本本身就是輔助說(shuō)明,恰當(dāng)且精簡(jiǎn)表述會(huì)更凸顯專業(yè)化。以上是我對(duì)這個(gè)細(xì)節(jié)的一些看法。

      回復(fù)
  2. 早期野蠻生長(zhǎng)起來(lái)的產(chǎn)品已經(jīng)不需要考慮用戶體驗(yàn)了。以后舉例不能拿某些大廠火的產(chǎn)品來(lái)說(shuō)話,他們不具有任何代表性,他們這么做是因?yàn)樗麄冊(cè)趺醋龆加腥擞谩?/p>

    來(lái)自北京 回復(fù)
    1. 大廠的產(chǎn)品已經(jīng)代表著體驗(yàn)的高度了,既然是示例,證明確實(shí)有很多產(chǎn)品是這樣的

      回復(fù)
  3. 在實(shí)際運(yùn)用時(shí),開(kāi)關(guān)仿佛很受到設(shè)計(jì)者的喜愛(ài),運(yùn)用非常的廣泛,甚至“一切設(shè)置皆可開(kāi)關(guān)”。感覺(jué)確實(shí)是這樣

    來(lái)自廣東 回復(fù)
  4. 用戶是產(chǎn)品的最重要的體驗(yàn)者,如果基礎(chǔ)設(shè)置不合理、用戶不滿意,再好的產(chǎn)品都會(huì)被拋棄的。

    來(lái)自陜西 回復(fù)