交互设计之用3个「实战案例」详解选择器的用法

交互设计之用3个「实战案例」详解选择器的用法在一个产品中，产品的交互设计是非常重要的，交互设计体验的好坏直接影响到用户体验；所以在开发设计品牌一款产品时，对于一些可以选择类的会用交互板块，需要根据场景、消费需求等等方面进行考虑；本文分享了关于交互设计中选择器的用法，我们一起来看回去。n本文梳理一些关于筛选正则表达式控件选择的解决思路，同时释义辅助三个实际范例帮助理解。我一直认为做事不仅要有“术”，更要有“法”和“道”。n所以我每次分享的内容不仅仅有执行层的方法和工具，还有做事的底层底层逻辑和标准。只有掌握的方法才能举一反三，因为不同事物之间的标准规范往往有其相似之处。n下面的文章我将从移动端的选择器入手，分享一些解决问题的思路，具体会涉及到在遇到需要使用选择器时如何判断哪种方案更优以及遇到现实阻力时（开发时间不够、研发水平有限等）如何做取舍，最后再结合三个实际案例做又辅助理解。n先说明一下，下文的选择器没有包含非常基础的选择器，比如这种：1这样的选择器一般用于描述简单的时间选择，使用最广泛也最基础，对于这类选择器的应用都比较熟悉，我就不做赘述了。我们遇到需要使用筛选功能的地方，首先应该先思考，而不是即刻动手，磨刀不误砍柴工，先思考再行之有效动手能有效避免后期返工。］那么如何思考呢？我建议从三个方面入手：用户场景、数据量、业务需求。用户场景使用用户用户故事模拟用户的使用演化过程，为什么是模拟？因为有些时候我们无法就页面的每个功能向用户求证，更多的时候我们会先做一定的用户调研，然后出一个demo后再做用户测试。当我们模拟完成后就能对用户的心理有大概的了解，知道他每一步的想法和操作方式，呵呵这时我们再依靠这个用户心理模型一下选择选择器组件。那么有人可能会说，靠自己想象的用户心理数学模型能符合真实的用户心理吗？我的答案是，不能百分百相等，但也是八九不离十的。为什么？在上述三点理由的加持下，相信好不容易得到的结果绝不赖。用户场景能帮助我们从用户回来的角度去思考交互，而另外两个因素一一数据量和业务发展需求，则能辅助我们确定最终的结果。数据量这里说的数据量包含了筛选内容的多少和字段的长短。数据量的多少很大程度决定了我们对筛选器的选择，如果数据量不大，就没甄别必要浪费资源开发一个复杂的筛选器。而数据量有大的时候，我们用小型筛选器来承载又会诱发用户筛选困难体验不好。所以我们必须考虑数据量。下面网络流量五种筛选的数据量就大大不同：1业务需求］不管我们选择何种交互方式都不能业务需求相悖。］比如业务需要有支持多选，而产生器我们选择了单选的筛选器，那么首先这个筛选器就是出错的，不合格的。所以我们选择筛选器的时候必须把业务需求放在第一位，可以选择然后在业务需求的容许下进一步选择。业务发展需求决定层级：1思路说完了，下面开始案例撷取，以下三个案例都是我在工作中遇到的情况，我会一步步按照上面的思路来慢慢解析如何思考，如何解决遇到的问题，最后为了帮助理解我会附上一个交互demo。i案例一：日期选择器案例介绍：这是服务器端一个动物园购票小程序“成都动物园官方取票”。1用户场景：用户购票过程选择游玩日期。i用户故事：1今天是星期四，小明打算这周六带着外甥女去动物园玩，于是打开小程序，开始选择日期。n小明遇到的问题：问题一：这周六距离“今天”只有几天，我想用能够快速选择日期！问题二：“昨天”显然是无法购票的，我不小心误点击了“昨天”后提示我不可购票感觉之后很不爽！问题三：我对日期的概念不强，周六不就是后天吗，我想要更直观的知道明后天的概念！问题四：这周突然要加班，我改主意了，打算下周六再去，我想更直观地看到周六日更方便的选择先后顺序日期！看了小明的灵魂四问，有无一种被用户和客户支配客户的感觉2333・・・n回想一下当客户、老板和用户对你进行如此这般灵魂拷问的时候，你如何应付？当然是怼回去…啊呸，当然是遇山开山遇水搭桥，有条件要上，没条件创建条件也要上以！咳咳，跑题了，继续……星毛的问题我们了解了，那么我们如何来解决他的问题？不着急，咱们一个个拆解。问题一：这周六距离“今天”只有几天，我想用能够快速选择日期！解决方案：左右滑动可以选择日期左右滑动选择发售日期：n问题二：“昨天”肯定是无法售票的，我不小心不察点击了“昨天”后提示我无以购票感觉感觉很不爽！解决方案：岂能游玩的日期禁用，无法点击］不可游玩日期禁用：1观的知道明后天的概念！解决方案：最近的可游玩日期降低“今/明/后天”标签，同时给日期补充星期信息。增加标签和星期：1问题四：这周突然要加班，我改主意了，打算下周六再去，我想更直观地看到周六日更尽可能方便的选择日期！i解决方案：提供“更多”选项，点击后弹出日历弹窗可选择更多日期1使用日历弹窗生效日期承载更多日期：1看，这样一步步分析是不是很简单就出结果了。这时候可能就会有人问了：“你这样太麻烦啦！这样子分析工作做不完的啦，加班餐吃定啦！”1我对此的回答是，表担心，加班餐你吃不上（dog）。为啥？因为上面几个步骤虽然好像繁琐，体能训练但是锻炼的次数多了整个过程会非常快。1这个步骤是非常重要的，尤其对于新人毕竟，如果不逐步分析，只凭感觉来再说的话，最后的结果可能是东西没如果做好，自己又没啥成长。i我这里特别想分享一个观念：1永远带着思考一下制做做任何事情，随处锻炼自己的探求思考能力。1会做事的人很多，但是要思考的人却很少。i都说透过现象看本质，但是想做到这点却非常难为，而能够分析方法帮助我们尽可能靠近事件本质的方法就是思考，持续思考，别无其他，唯有思考探求可以帮助我们了解一件事情的本质。就比如说案例一，虽说最后的结果看上去就是一个小小的日期选择器吗？绝不是，这个小小的日期选择器是集结多方位思考的结果。如果看的人不会思考，那么你看到的就是一个平常的选择器，但是如果你试着去思考它背后的逻辑，就会发现它的标签、它的滑动交互、它的禁用都是有目的的，都是服务于用户和产品的。下面辅助交互demo帮助理解它的交互方式。交互demo：案例二：三级级联选择器-多级可选案例介绍：这是一个工程建设管理APP，还没完全上线，仅对其中一个级联选择器进行叙述，敏感信息遮挡住。此处三级级联选择器的使用背景是一一用户需要遴选安全隐患数据，而安全数据层级分为三级。用户场景：1小刚是A工程负责人，进入页面想查看相关安全数据，于是他开始筛选，数据层级一共有两级，需提供支持对每一个层级筛选。遇到的问题：1问题一：选择哪种筛选器？i数据层来看，事故隐患的数据量不小，至少几十条，且字段字数存在十几个字的条件。1业务层来看，隐患共有三级，需支持大力支持对每个层级都进行筛选。从以上两个点分析后，我选择了上拉弹窗的筛选工具。弹窗可以保留手机用户对任务的连续感，同时由于数据量非常大，所以我决定提升弹窗占屏比，让用户能够看到更多的内容；另外，业务层需要支持对每个位阶进行筛选，那么就需要在弹窗底部添加一个确定，让用户能够在选择每个层级后都能进行。确定筛选弹窗：问题二：字元段长度太长如何处理？不管是交互还是UI都需要同音字考虑字段长度过长的时候如何处理。这不仅仅是充分反映细心和专业的体现，重要的作用是帮助前端处理边界情况。否则可能会出现两种结果：n找来要么前端同学多次重复找你确认处理方式，要么前端不作处理上线出现显示问题。为了杜绝上述情况，我们一定要对边界情形情况进行处理，排程我会总结一篇边界处理的不管怎样文章，这里先说一下字段长度处理。由于已有的数据数字短将近达十几个字，所以我采取了逐级递增的交互方式，这样可以让用户在单层看到更多的内容，当层级展示成三级此后，文字就需要换行显示。文字溢出处理：可以看到，文字溢出时我挑选的处理方式是显示全部文字，同时辅助换行进行适配。为什么不做潜藏呢？为什么忧心不担心文字太多屏幕显示问题吗？问得好（戏精！），这里我们又要引用上文提到的观点“遇事切记先思考”，如果不考虑实际场景业务和业务我可能会选择最多显示一行或者两行然后使用“…”显示，这样既可以保证界面美观又可以干净利落适配。但是我还是选择了全部显示，有两个原因：综上，根据用户需求和数据需要考虑，最终最终选择了这样的展出方式。交互Demo：问题三：生产时间不够如何取舍？作为打工人，我们都想把自己的工作做到尽善尽美，这不仅是对公司负责更是对自己负责，正因如此，我们也会希望研发能够对我们的设计做到百分百还原。但是…现实必然与理想相悖，很多时候我们不得不做许多妥协。而这些骨感的现实结构性问题都有哪些呢？针对第1点：开发周期短，时间来不及导致不得不阻碍简化这是较为普遍的情况，尤其是产品前期处于小步快跑快速迭代的情况下，很多时候甚至只做一个最简单的MVP，后续再优化。所以这个时候的让步是值得值得且合理的，因为我们需要考虑性价比。针对第2点：前端技术有限这个问题不好解决，你不能否决对方的能力，你们是同事，是合作关系，你没有这个权限，这时候我的建议是尽量辅助寻找。有人可能会说，我又不懂技术呀，怎么帮忙？举个例子，工作里我也遇到过这样的情况：n一个前端很难解决一个问题，我咨询了其它几位前端后反馈说这个问题不难，而这位主动同事平时是一位积极主动的人。所以我判定判断应该是技术技能不够，所以我把向其它几位研发咨询的建议发给他，同时系统控制寻找一些可用的插件，分野最后实现的效果虽然还是有些许差距，但是也貌似大致符合我业绩预期的预期。针对第3点：前端觉得麻烦，不想干这又是个棘手的环境问题，尤其相关人员是我们身为设计人员不懂技术，很难判定对方是真的实现不了还是不想干……这个时候我的建议还是先咨询其他前端，可以得到一个比较客观的推论，然后这位前端平时的做事和为人来判断，如果是技术问题，参考第2点。n如果是懒，他觉得麻烦，不想做。这个时候就需要好好见招拆招了。n再举个例子（我肿么老是遇到这种情况）：n这位前端是我们公司找的合作研发（相当于外包），需要他做一个banner的样式，很普通r交互方式，但是对方以饿了么控件库没有一模一样的插件为由拒绝实现。n说真的，我当时很愤怒，因为他的这种做法实在不地道，我提前和他过了一遍交互方式，并且绝大部分所有东西都是提前告知他，且他也没意见的，等实现的时候他却以的的控件库没有一样他用插件为由拒绝。n这时候，我不懂技术，无法拿出论证说明这个交互很简单，所以我当即咨询了我们公司的前端同学，都反馈说很简单，两小时左右搞定。n然后我又把我们公司前端帮忙找的几个相似的插件一起发给他，结果…他说难改，还是拒绝。是可忍孰不可忍…对于职业道德操守的人绝不能姑息！不然我已经无法推动了，只能向上求助（我之前的文章也表示过，该求助就要求助，不要憋着）。我把背景、该好看研发的回复和我的处理方式编撰好，最后标示出我的想法后发给研发负责人（人是他找的），由他去交涉，最后解决了。说句不好听的，作为拿钱办事的人则，做事这么嚣张真的糟吗~不知道你们有没有面对个别情况过这样的情况，我遇到的不少……你得相信，这个世界总有人理直气壮地把职业道德回事儿，这时候我们得理真的不能饶人！针对第4点：交互设计太“高大上”，开发实现困难说真的，这个问题难题我们得自我反思了，如果我们设计的交互方式市面少见而实现困难且收益低，那么性价比就太低了，不值得。成年人的世界没权衡，只有取舍。那么，如何避免自己设计出不常见的交互方式？我的办法是多看原指。把市面知名的APP都下载下来研究，不仅要看，还要收集，截图收集起来。n人的记忆力是有限的，必须收集起来归纳好，方便随时复习。这里分享一个素材收集和整理的好工具一一eagle，是的，我又要分享工具了，我是个工具狂魔。eagle可以整理图片，给图片打标签。我的习惯是把每张都打上交互标签，当我想要用哪种交互方式的时候，可以随时搜索参考。图片整理：1案例三：三级级联选择器-仅可选末级终于到了最后一个范例了，每个案例我想都谈得尽量详细，所以字数多了些~先介绍下案例：1这是一个教育径向领域的教育和招聘APP，我负责里面的招聘版块，下面的选择器就围绕着求职意向的选择来说明。i用户场景：1小明是能源行业从业人士，最近打算换工作，下载了上述APP，进入求职版块选择求职意向，求职意向一共三级，仅支持末级筛选。i遇到的问题：1问题一：选择哪种筛选器？i从以上两点分析，以及对市面竞品的调研，我决定使用新页面来承载数据。i一来这