• ×

    4006-234-116

    13681552278

    手机版

    公众号

    710公海网站建设公司。主要为北京天津全国各地提供网站建设与网页设计制作服务,欢迎大家咨询。您的IP地址是:119.251.67.199, 38.239.52.94。今天是:,,(),,现在是:8:46:05 PM,

    网站手机版如何设计单选复选控件

    作者:710公海发布时间:1/30/2019 4:07:16 PM浏览次数:12058文章出处:移动端网站制作

          Web中的单选和复选我们见得比较多,但是在移动端中,单选和复选控件样式较多,需要结合不同的使用场景去选择使用。下面我将总结一下移动端中的单选和复选控件。

          首先我们看看官方文件给的设计规范:

          ioses

          ioses官方文件中没有具体说单选和复选控件,只能从一些包含选择的空间中来:
          (1)Pickers(选择器)

          选择器是包括一个或多个不同值的可滚动列表,每个值都具有单个选定值,常显示在屏幕底部或弹出窗口中。

    如何设计单选复选控件

          使用选择器需要注意的有:
          使用可预测和符合逻辑顺序的值;例如使用按字母顺序排列的国家/地区列表;
          避免通过打开新的界面来显示选择器;
          如果数值或选项较多,请使用列表而不是选择器。选择器的尺寸较小,想要快速找到想要的数值需要多次滑动,而列表的滑动范围更大,可以更快地找到想要的数值或选项。
          (2)选择列表

          使用列表的形式简洁干净,能高效地显示大量或少量信息。

    如何设计单选复选控件


          androids
          (1)单选
    如何设计单选复选控件

          使用单选按钮选择单个项目
          如果可以折叠可用选项,请考虑使用下拉菜单,因为它占用的空间更少。
          (2)复选
    如何设计单选复选控件

          使用复选框选择列表中的多个项目
          再次点击选项可以取消选择
          对于有层级关系的复选选项:
          选中父复选框后,将选中所有子复选框
    如何设计单选复选控件

          如果未选中父复选框,则取消选中所有子复选框
    如何设计单选复选控件

          如果选中某些(但不是全部)子复选框,则父复选框将变为不确定复选框
    如何设计单选复选控件

          要注意的是:单选和复选控件样式,不要混淆。也不要在单选的情况下使用复选按钮。
    如何设计单选复选控件
    左:复选;右:单选

          下面,我们看实际运用中北京奥特贝特装饰材料有限公司,单选和复选控件是如何使用的。
          单选控件总结了四种样式:按钮式、选中打点、列表勾选和选择器。
          单选
          (1)单选-按钮式
    如何设计单选复选控件
          选项一般是相同类型的,例如淘宝选择商品尺寸、属性等选项内容少,选项数量较少;
          弹窗内容清晰明了,选择区域很清楚,但选择区域较小;
          不适合选项较多、选项文案较长的场景。
         (2)单选-选中打点
    如何设计单选复选控件
          更多是安卓上的操作控件,适用于单选,选项不是同一类型的情况;
          目测选择区域较小,但实际上只要点击与文字同一排的位置即可选择。
          (3)单选-列表勾选
    如何设计单选复选控件
          弹窗更多出现在安卓系统中,相比选中打点的设计咨询类网站建设,给用户的引导性更强,目测选择区域更大。
          因为✔️离文案较远,所以选中的选项要突出。

    如何设计单选复选控件

          ioses系统中也使用列表勾选徐州慧网网络科技有限公司,但大部分都是跳转一个新界面;

          选择之后直接更改,没有确认键;
          选项字数可以较长,选项可以较多。
          (4)单选-选择器
    如何设计单选复选控件

          更多出现在ioses系统中,一般从出现在界面底部;
         列表式看起来选项更清晰;
          一般在表单填写中出现,选项较多,可滑动。
          多选
          多选形式较单一:
    如何设计单选复选控件
          一般是勾选加外框的形状,避免与单选按钮混淆;

          弹窗选择中要尽量避免只使用单个操作按钮的情况,会让用户产生疑惑,不知道如何关闭弹窗。

    如何设计单选复选控件


    文章来源:移动端网站制作

    文章标题:网站手机版如何设计单选复选控件

    文本地址:http://www.junchuanzhuangshi.com/info_1006.html

    收藏本页】【打印】【关闭

    本文章Word文档下载:word文档下载 网站手机版如何设计单选复选控件

    用户评论

    客户评价

    专业的网站建设、响应式、手机站微信公众号开发

    © 2010-2022 北京710公海科技有限公司 版权所有 京ICP备28188053号-2   

    关注公众号 关注公众号

    进入手机版 进入手机版

    710公海
  • 网站地图