• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 「这个控件叫什么」系列之Picker/选择器/拾取器

「这个控件叫什么」系列之Picker/选择器/拾取器

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI元素,ui设计,交互设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

@龙爪槐守望者 :鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》

这个控件叫:Picker/选择器/拾取器

Picker(选择器/拾取器/选取器)是指提供多个选项集合供用户选择其中一项的控件。在不同平台Picker的具体控件表现形式不同。在iOS端Picker一般称之为滚轮选择器,而在Android端,Picker的主要表现形式是Dialog(对话框)或dropdown menu(下拉菜单)。

△ ?Picker:iOS与Android的表现差异

在移动端Picker最常见的用途是选择时间,iOS和Android将时间相关的Picker封装成原生控件。

Date Picker(日期选择器)

Date Picker是用来选择特定的某天,每个选项集合由年、月、日三列组成。

△ ?Date Picker

如果Date Picker呈现形式是日历,也可以称之为Calendar Date Picker(日历选择器)。Date Range Picker(日期范围选择器)是用来选择某个日期范围,常用于旅行、住宿等时间周期相关事项。

Time Picker(时间选择器)

Time Picker是需求精确到时、分钟或者秒,如果使用12小时制,记得增加AM(上午)和 PM(下午)的选项。

△ ?Time Picker

如何使用

Picker展示区域有限,大部分选项会被隐藏,最好是当用户对所有选项都比较熟悉、有预期的时候,才使用Picker。

默认选项

合理的默认选项能让用户减少操作次数,提升效率。假如Date Picker用来选择最近的时间,则可把当天作为默认选项,如果Date Picker用来选择出生日期,建议根据用户平均出生日期作为默认选项。

合理的排列选项的顺序

选项的排列顺序要依据当前上下文情景而定,例如衣服尺码按从小到大的顺序排列,而不是根据衣服尺码的首字母在字母表的顺序排列。

使用相对概念增强感知

心理学实验证明当事物与人的关联越大,越容易引起人的注意(想想在嘈杂的会场突然听到有人喊你的名字)。在Date Picker里,比起绝对的“某年某月日”,用“今天”、“昨天”等相对概念,能更快的激发人对时间的感知。

选项过多可以采用其他形式

如果选项非常多,而且选项本身比较复杂难理解需要辅助的解释,建议用新页面或Full-screen dialogs(全屏弹出框)的形式,以此容纳更多的选项。

△ ?电话铃声选择

滚轮选择器控制在五列以内

为了保证手机屏幕触控精度,以免发生误触,滚轮选择器建议控制在五列以内。

滚轮选择器并不一定要放在底部

滚轮选择器放在屏幕底部手指操作更轻松,但把手指从控件触发区域移动到屏幕底部,移动距离会很远操作负荷大,因此把滚轮选择器放到控件触发区域附近,或直接展开,操作会更便利。

△ ?滚轮选择器在页面内

相关资料

地区选择器创新

京东和苏宁的地区选择器选择省份后再出现城市,选择城市后才能选区,依次递进,每次只可以改变一列,相对于传统的滚轮选择器,这种地区选择器不容易误触,操作时注意力更容易集中。

△ ?地区选择器

时间选择器设计指南

Nielsen Norman Group对不同的时间选择器进行了研究分析,并提供相关建议和设计指南。

Date-Input Form Fields: UX Design Guidelines

Chrome另一种Date Picker样式

经过体验,Android 7.1.1的Chrome内使用Picker是将Android 4.0时代的交互形式换上Material Design视觉风格。如果选择日期跨度不是特别大,这种形式的认知负荷明显比Calendar Date Picker要低。

△?另一种Date Picker风格

iPhone 7精细的震动反馈

把iPhone 7的系统触感反馈打开,再使用滚轮选择器,你就能感受到手机轻微的震动,很像真实世界波动滚轮时的触感。

△ ?系统触感反馈

后面优设会持续更新,想提前学习的可以关注作者的微信公众号:

「新人科普好文系列」

  1. 交互原型丨《术语小科普!聊聊线框稿、视觉稿与原型的区别》
  2. 移动端尺寸丨《通俗易懂!超全面的移动端尺寸基础知识科普指南》
  3. 字体规范丨《界面设计必备!全方位科普常用的字体规范(附神器)》
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
  • 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  • 「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
  • 「这个控件叫什么」系列之Picker/选择器/拾取器
  • 「这个控件叫什么」系列之Toast(吐司提示)的曾经、现在与未来
  • 「这个控件叫什么」系列之加载占位图+页面指示器

相关文章

  • 2017-08-06如何选购完美芦荟胶?完美芦荟胶辨别真假的方法技巧
  • 2018-08-23实例演示!聊聊品牌视觉设计的4个关键要素
  • 2018-08-23商业设计比赛中如何提升获奖率?高手总结了这4个实用小技巧
  • 2018-08-23用一个图形,帮你学会6个最流行的设计风格
  • 2017-08-06psd切图转换为div+css格式
  • 2018-08-23无论趋势怎么变,掌握这些设计节奏就不怕过时!
  • 2018-08-23从上亿人使用的阿里收藏夹迭代过程,总结视觉设计师应该拥有的体验思维
  • 2018-08-23学习按钮设计,看这篇就够了!
  • 2018-08-23关于极简主义设计,这篇文章帮你安排得明明白白
  • 2018-08-23用Framer的实例,说说设计师学习代码的那些事

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 优设首发!iPhone X 官方人机交互指南中文版
    • 让APP中内容呈现更友好易用的5种常见导航设计模式
    • html 左中右自适应布局(使用calc css表达式)
    • 写给设计师的AR入门指南!手把手教你制作酷炫三维立方体!
    • ie6/7要逆天 text: empty text node 高度问题探讨
    • 优设国庆节专题!超实用的精选素材打包+出效果教程
    • 产品思考:剖析“旅行青蛙”的火爆之处
    • flex程序Firefox下中文输入乱码的bug
    • 行内元素、块元素都有哪些
    • 总结来了!聊聊点融投资4.0改版踩过的那些坑

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有