UX设计之——复选框和开关按钮

Posted 2023-04-27

参考技术A 当设计表单时，交互设计师常常不得不面对一个问题，就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然，我们都有可能遵循某种既定的规则。无论如何，在做出这个选择时我们都应该牢记一些注意事项。

要实现选择特定的选项，我们可以选用复选框、开关按钮、 单选按钮 或者下拉框等控件。从中选择出最合适的则往往能发挥巨大作用，在本文中，我们将关注复选框和开关按钮。

一、复选框

复选框一般用在有多个选项时，用户可以做出零个、一个或者任意多个选择。换句话说，复选框控件中的每个选项都是彼此独立的，选择一项后并不会排斥其他项。

二、开关按钮

开关按钮代表在物理上的ON/OFF状态间进行切换。

开关按钮一般用来来标示一个动作（比如开始或停止一件事），其作用类似于实际生活中的灯控按钮。

三、复选框和开关按钮的最佳实例

1、使用标准的可视化模型

一个复选框应该是一个在选中状态下有标记符的小正方形。

一个开关按钮应该看起来确实如一个ON/OFF类的开关。

你应该给和用户产生交互的控件一个清晰的视觉反馈效果。精妙的动画能够让用户感觉到你在设计上的投入（愉悦用户），这对那些在现实中有映射的实体的控件尤为重要，即使这些控件好像跟用户间还隔着一层玻璃屏。

2、最好垂直布局你的各个选项

要试着让你的多个选项间垂直排列，每行显示一个。这条规则对复选框和开关按钮都适用。如果你必须（非得）使用水平方向排列多个选项，请务必确保使按钮跟标签间的距离合适，好让用户能区分出哪个按钮对应哪个标签。以下的例子中，元素间距太近：

3、开关按钮的当前状态应该标示在其本身外面

设计开关按钮时，重要的一点就是要必然按钮状态表达含糊不清。我们拿iOS6中的开关设计来举例：

你能明白其中的“ON”表示的是当前状态还是移动、点按之后才是“ON”状态？这里的“ON”究竟指的是状态（形容词）还是你需要触发的动作（动词）？

你不应该使用户产生疑惑，而需要将状态和动作区分开来。事实上，这个设计能通过高亮显示当前状态向用户传达出更强的友好性。

4、请使用正向措辞表述复选框的标签

请使用正向措辞表述复选框的标签，这样用户就能够清楚的认识到选中该选项后会发生什么。避免使用如“不要再发送邮件给我”这样的否定语，这意味着用户不得不去修改选中状态来判定前后的变化。

5、应该使标签部分也可点击

所有的复选框都标签，但并非所有的标签部分都作为选中热区。复选框本身很小，按照 费茨定律 ，它们很难被点按到，因此，为了扩大可点区域，应该将标签部分也归入可点的热区部分。

6、复选框仅用来修改设置项，不作为操作按钮

对一个二元选项来说，一个复选框和一个开关按钮最大的不同在于前者用于标示状态，后者用来指明动作。如果一个物理上的实体开关能执行这个动作，那开关按钮便可能是最好的控件选择。

在下面的例子中，开关按钮很清晰的表明WiFi处于打开状态，而使用复选框则导致用户不得不去思考究竟当前的WiFi已经打开还是要取消选中后才对。

7、伴随复选框和开关按钮的交互

要表明复选框选中前后带来的影响（比如复选框作为表单的一部分，你在点击“提交”表单后才可能看到选中与否的不同），你可以延迟一定的步骤。 然而对于一个开关按钮，则应该在用户切换后立刻显示出不同，而不是非得要等到用户点击“保存”、或回到前一个页面才看到所有变化。这正如我们在现实生活中也有对于这类开关的期望一样（例如我们都知道在将开关打开后电灯立刻就亮了）。

当用户需要执行几个动作后才能看到因选项改变导致的不同时，可以考虑使用复选框。

四、结论

设计用户界面时，尽量保证你所选择的界面元素具有良好的一致性和可预见性。如果选择遵循设计标准，你的设计自然能够增强用户对控件功能和操作方法的可预见性。相反地，违反标准的设计会导致这个界面破裂不堪——就好比如果不向用户发出预警，任何事情都可能发生一样。

译自：https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41#.jqbjnhofd

视图组件之开关按钮

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hanqi.test5">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".UIActivity1">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".LongClickActivityActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".CalculatorActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".Activity1" />


    </application>

</manifest>

当然每一次都少不了先注册，这个是绝对不能忘的，第二步就是写java代码了

package com.hanqi.test5;

import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;

public class UIActivity1 extends AppCompatActivity {

    ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ui1);
        //单选框
        RadioGroup radioGroup = (RadioGroup)findViewById(R.id.rg);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                if (checkedId == R.id.rb3) //rb3设定为正确答案
                {
                    Toast.makeText(UIActivity1.this, "选对了", Toast.LENGTH_LONG).show();
                }
                RadioButton rb = (RadioButton) findViewById(checkedId);
                Toast.makeText(UIActivity1.this, rb.getText(), Toast.LENGTH_LONG).show();
            }
        });




        //复选框
        CheckBox cb_st = (CheckBox)findViewById(R.id.cb_st);
        cb_st.setOnCheckedChangeListener(new CBOnCheckedChangListenter() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

            }
        });

        cb_st.setOnCheckedChangeListener(new CBOnCheckedChangListenter());

        CheckBox cb_jc = (CheckBox)findViewById(R.id.cb_jc);
        cb_jc.setOnCheckedChangeListener(new CBOnCheckedChangListenter());

        CheckBox cb_xt = (CheckBox)findViewById(R.id.cb_xt);
        cb_xt.setOnCheckedChangeListener(new CBOnCheckedChangListenter());

        CheckBox cb_xhx = (CheckBox)findViewById(R.id.cb_xhx);
        cb_xhx.setOnCheckedChangeListener(new CBOnCheckedChangListenter());

        iv =(ImageView)findViewById(R.id.iv);

        ToggleButton tob =(ToggleButton)findViewById(R.id.tob);
        tob.setOnCheckedChangeListener(new TOnCheckedChangeListenter());
        Switch sw =(Switch)findViewById(R.id.sw);
        sw.setOnCheckedChangeListener(new TOnCheckedChangeListenter());
    }
    private class TOnCheckedChangeListenter implements CompoundButton.OnCheckedChangeListener{
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked)
            {
                iv.setImageResource(R.drawable.on);
            }
            else
            {
                iv.setImageResource(R.drawable.off);
            }
        }
    }


    private class CBOnCheckedChangListenter implements CompoundButton.OnCheckedChangeListener
    {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        CheckBox cb = (CheckBox)buttonView;

        if (isChecked) {
            Toast.makeText(UIActivity1.this, "选中了" + cb.getText(), Toast.LENGTH_LONG).show();
        }
        else
        {
            Toast.makeText(UIActivity1.this, "取消了" + cb.getText(), Toast.LENGTH_LONG).show();
        }
    }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical"
    tools:context="com.hanqi.test5.UIActivity1">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择Android的开发语言是什么？"/>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rg">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C++"
            android:id="@+id/rb1"
            android:layout_marginRight="30dp"
            android:checked="true"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            android:id="@+id/rb2"
            android:layout_marginRight="30dp"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JAVA"
            android:id="@+id/rb3"
            android:layout_marginRight="30dp"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C#"
            android:id="@+id/rb4" />
    </RadioGroup>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择字体效果"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="宋体"
        android:id="@+id/cb_st"
        android:checked="true"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="加粗"
        android:id="@+id/cb_jc" />
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="斜体"
        android:id="@+id/cb_xt" />
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下划线"
        android:id="@+id/cb_xhx" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/off"
        android:id="@+id/iv"/>
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="打开"
        android:textOff="关闭"
        android:id="@+id/tob"/>
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开关"
        android:textOff="关"
        android:textOn="开"
        android:id="@+id/sw"/>
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn=""
        android:textOff=""
        android:background="@drawable/mybutton"
        android:id="@+id/tob1"/>

</LinearLayout>

特别注意，怎么能让按钮不显示字体，用两张背景图来显示效果呢？这就要用到一段xml代码了，********  这一段代码的名字一定要全部小写

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" android:state_checked="true"/>
    <item android:drawable="@drawable/off" android:state_checked="false"/>
</selector>

 实现效果：