PIT BOSS 掉坑永无止境

昨晚用principle做了一些简单的动效以后还是打算写一篇评测文，不仅仅打算对这个工具进行简要的说明，也打算引申出一些讨论。 #轻而简 principle给我的第一感觉就是极为轻巧，在看了一些视频以后就能快速做出一些在origami内要做更久的效果。只需要考虑到变量的前后变化然后想办法连接起来这种设定实在太方便了....得益于针对移动端的动效设计，对于触摸手势的支持以及各种基本变量的简单调节，都让这款工具做如今流行的各种移动端动效有着天生的优势（相对于hype3）。有了这款工具，完成基于时间线的简单二维动画轻而易举。如果你是一个正统的设计师（而不是程序员或者将来想做程序员的少年），那么这款工具便于上手和使用的特性能带给你很多帮助。 #driver & timeline principle基于两个机制进行运作，其一是driver——根据物体所在x/y轴确定关键帧且带动其他变量变化。timeline则展示通过交互行为连接的artboard之间各种layer的变化。在笔者看来，其实都是基于某种既定的条件改变其他数值...有时候会认为driver和timeline需要有更好的整合，但是又担心这样会失去拖动关键帧进行微调的可能性。恰恰无论是driver还有timeline都可以拖动图形观察每个状态，才让principle显得如此珍贵——便于细微的调试。因为对细节的把握才是对交互设计师而言最为重要的环节，要是我随便做点儿动画为什么不用keynote呢（笑 #潜在的问题（声明，看得不爽请赶紧关闭浏览器窗口） 虽然我已经下狠心买下了principle，但是我也很清楚这款东西有着非常明显的缺陷。 ——缺乏三维支持以及锚点上的支持... ——几乎不能做变量和逻辑上的抽象，更不可能单独封装做个method或者对变量进行管理 ——文件很难被复用，不能做成单独的patch互相嵌套 ——缺乏插件体系 ——对高级功能支持不佳，对复杂逻辑、交互，内容处理无能（相对于origami） ——缺乏好的排版工具 如好用的参考线，栅格工具 ——图形绘制功能非常简陋 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++

#前提 本文不介绍关于布局方面的知识和技巧，因为这些属于交互设计以及ui设计的内容.... （请自行找教程...或者勾搭个设计师.. 但是本文会介绍关于sketch中的一些非常微小甚至琐碎的技巧...帮助刚入手的程序员更好的使用sketch进行排版布局.... 我也需要预先说明：懂得基本布局并不表示你能很好的进行布局。我会写几个条件判断语句不等于我的代码水平和你一样专业——这样你们就懂了吧www #首先....你需要看这些... 建议每个人买到sketch以后跟着这个教程去做一次 sketch绘制教程（从02到07） http://hfwen.zcool.com.cn/ 也建议每个人都读一下google design中关于布局的内容： Metrics & keylines structure adaptive-ui.html 其实我个人推荐把整套material design的指南好好读一次... #我假设你是对于界面设计有一定了解的程序员 假如你经常和ui/ue合作，也听过他们如何解释自己的设计决策，那么一些基本的东西应该相当清楚.... 但是我还是建议你看下这个几个系列的post（帮助你整理下思路） the-7-components-of-design the-elements-of-design visual-perception 推荐原因：这个系列较短，内容精要并且有案例解析... #小技巧传达 ——画草稿！要计划布局之前先要搞懂自己需要什么以及大致的异常情况如何处理..比如一条推有字数限制也有操作，这些操作需要放置在哪里...发推的人不仅能看推也能删除推，设计的时候也要预留删除按钮的位置...诸如此类的问题除了学好交互和ui，也需要画草图并且在草图或快速原型的阶段给解决了.... ——使用参考线帮助自己对齐.. ——半透明的方块（可以借助sketch share style功能控制颜色）帮助自己控制每个区域的网格...相当于用半透明的方块帮助自己把抽象的css（大雾）视觉化出来。比如一个列表项的左右padding是16px.... ——layout是个好东西..我个人比较少用密密麻麻的网格进行设计..但是会使用大致的layout进行排版保证左右比例均衡而且快速

#说到底，这是个钱的问题 本文不打算参与某些奇怪的争论，本文仅仅简单讨论下这个需求的合理性以及从中窥见的一些小事情。 在围观了相当数目的知乎回答和评论以后，我打算现有的资源去理解下这个问题。 #你所没有遇见的问题并非不是问题 有一部分人表示，手机状态栏已经相当拥挤，放不下耳机插入的图标。甚至有人表示，耳机拔出导致声音外放或是耳机坏掉的情景并不那么常见。耳机失灵或是硬件问题的失灵才导致用户无法用耳朵判断因此需要状态栏的小图标。有人表示，只有看小黄片的时候突然声音被外放会带来麻烦，其他多数情景下这个都不是大问题。甚至有些丧心病狂的表示只要苹果做了这个功能就是有必要的.......  但是我还是围观到了一些似乎值得挖掘的情景： ——耳机坏掉导致用户难以通过某种提示得知是否通过耳机播放声音很重要，只要人口基数足够大，小问题也会成为问题。 （吐槽下，对于微信取消ios刷新功能，我看到还是有评论者表示他们网络状况糟糕因而依然需要手动刷新） ——有时候外出坐车或是午休看视频、听映月，要是突然声音外放打扰到别人会相当尴尬甚至是无法保护他们的隐私 ——似乎并非每个人手机顶栏都那么拥挤，特别是某些用大屏幕手机的人....  ——如果给予用户他们的耳机正在使用的提示（何种类型站且不论），他们会更有掌控感和安全感 #需求的实现方式总是多种多样  其实说到底，这个功能本身有很多可能性和层级也有不少可行的组合方式，有些最好从系统层级上给予支持。有些可能需要用户手动选择，而有些甚至需要配合别的功能一同考虑才能充分满足用户的需求。至于是否实现，可能需要看待系统本身对待用户的态度和理念（是否较为强势的对待用户，是否自己做还是给开发者做）。如果需要开发者支持，那么开发者本身如何对待也是差异化的一种，比如某些porn网站的播放器？就估计会在这方面有更好的支持吧（这是我的脑补）。 ——平板是一种非常常见的娱乐工具（用来看视频听音乐等纯粹的娱乐），而且平板上的status bar很空旷呢，有个icon常驻没关系....  ——现在的手机不都有通知中心这种概念吗。。。只要插上耳机就有通知并且在通知中心常驻一条提示或许可行？ ——或许可以在插入耳机和耳机被拔出后都长toast以及震动（或者屏幕亮度提升）来通

Motion & Animation A New Mobile UX Design Material（强调传统动画给ui动画的启示） http://www.smashingmagazine.com/2012/10/motion-and-animation-a-new-mobile-ux-design-material/ Transitional Interfaces（ui动效的意义与作用） https://medium.com/@pasql/transitional-interfaces-926eb80d64e3 The Principles of UX Choreography https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a Spatial Interfaces（强调分镜与空间转换的重要性） https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9 Google material design （建议整个看完，理解material这个隐喻的意义） https://www.google.com/design/spec/animation/authentic-motion.html Showing User Interface Adaptivity by Animated Transitions  (一篇论文，较旧，建议配合认知与设计类读物以及hig与人因学内教程配合学习) http://citeseerx.ist.psu.edu/viewdoc/download？doi=10.1.1.452.8429&rep=rep1&type=pdf Functional Animation In UX Design（动效的作用） http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/ The Principles of UX Choreography（动效作用） https://medium.com/@becca_u/the-prin

最近adobe出了一款专注与ui设计以及交互原型的软件——comet...其实这并不是一款多独特的软件（因为和atomic太相似了），甚至有一半来源于adobe ps的设计空间功能... 虽然很多人称呼这款软件为sketch杀手,但是笔者心中还是存有很多疑惑。 #adobe家族，血脉相连 comet有着较为轻巧简单的图形绘制功能，并且能够在phtotoshop等其他软件内复用…这听起来不错，当然对于那些买不起或是没有必要订阅adobe服务的人就并非如此.很多小工作室和开发者，他们对于订阅一整套adobe服务并没有兴趣。为什么要为其中5%的功能而每个月花五十刀（而且还是订阅而非买断）以及相对较高的学习成本，而不是买几款更为专注于当前业务的软件呢？ 除非adobe comet能完全免费不需要订购adobe cc系列也能使用，否则对于那些开发者以及逃离了adobe系列的人而言并没有太大意义...因为他们已经找到趁手的替代品而且也渐渐形成了社区...comet如果有什么功能缺失或是要使用ps/ai才能完成，那么为什么还需要comet呢？comet与adobe家族其他产品的联通可能会让这款产品保持轻巧，然而这种过度轻巧是无法吸引那些开发者和设计师们的..更为遗憾的是，不能吸引开发者那么就意味着他们根本不会积极的为它开发各种插件扩展功能。 #ui ux合二为一？ 如其说这种工具是sketch杀手，倒不如说是各种原型工具——axure，justmind的杀手..毕竟这些工具都有一定图形绘制与动态效果制作的功能。这种工具很容易落入尴尬之处，比如动效功能过于简单（类似marvel）同时图形绘制功能也不足..很难有软件能同时驾驭好两者还保持足够简单的操作。因为无论ui绘制还是ui 动画，都需要不少细节以及交互行为判定，以及高度的自定义等等。就目前看到的有限的视频和图片，comet似乎无论在图形绘制还是动效制作上都简陋得很，充其量只是把不同图片连接在一起并且为止设置动画，以及拥有着adobe ps的设计空间功能。对于高级功能的缺乏支持让这款软件实用性甚至还不一定比得上powerpoint和keynote... 我不太指望这款软件能一如origami那样能做出非常高级的效果，也不可能一如codepaint那样可以直接导出可用代码，甚至不如principle还有hy

#缘起 许多表单都需要校验必须填写的项目是否为空，其中有两种主流的校验方式。其一是在点击了提交按钮以后才进行校验（网易邮箱的注册流程），其次是直接在表单内进行验证，比如如果不填写全部项目表单无法提交并且每个input的下一项被激活后会校验该项是否为空（比如gmail和qq号的注册流程就是如此）。后者会带来一个某些人不太待见的后果——一个用户要是手残一个个项目都点击一次，那么整个表单都会提醒他没有填写..他们认为这相当不美观.. 可是单纯的美观有多重要呢？ 对于表单内容是否为空的校验应该如何进行呢？ # 为什么需要提前校验提交内容是否为空？ 在用户提交之前提前校验表单填写内容，对于用户能更好的完成整个流程有着至关重要的意义。其一，越长的表单当中，用户就越是容易遗漏某些选项... 具体例子就是apple id的注册流程，表单极长而缺乏未填写项目的提醒..即便是用户自查也相对困难.因此必须需要有一个长期存在的表单为空的提醒状态让用户给填写上。其二，许多表单都与验证码的提交相关联，如果用户提交内容后才校验未提交内容，可能就要重新填写验证码...相信对于某些较为现代的校验码而言..用户都并不那么喜欢再填写一次..其三，表单提交内容是否为空与其他可以进行校验的内容一起，构成了表单校验流程的一步。比如注册时用户名是否被占用、再如输入字符串是否“合法”等等，相似的逻辑统一处理总是比较好一些。 #为什么点击下一个input项目进行检验呢？ 其实，要了解这个问题——只需要了解下js能获取到那些输入就可以了（本质上）...之所以采取这种触发机制，是因为这是一种妥协..我们并不能知道用户激活（:active）某个项目后是否填写了内容..因为用户在输入过程中可能会反复进行各种键盘输入修改内容..目前来看，只能当用户离开了这个表单项的时候才能对这个表单已经填写的内容进行校验..当用户激活表单下一个input项恰好就是一种较好的指标（证明用户完成了上一项操作了）。 #美观以外 单独分离出表单为空的状态而不校验，等到表单提交的时候才进行校验给用户的不仅仅是挫败感，更可能对业务上的逻辑造成不利影响。诚然，短的表单那么存在未填写项目的可能性低一点，但是日后表单变长呢？难道那些长的表单也要等到提交后用户才能自己去找回未填写项目吗？或是为长短不同的表单分配

点击这里开始玩  次元树之战 最近疯狂的迷上了一款挂机游戏...所谓挂机游戏，就是一种几乎不需要操作只需要打开网页一直挂着就可以玩的游戏…在此期间游戏会自动打怪，角色死了会自动复活到迷宫入口当然也会自动累计经验升级.许多挂机游戏甚至丧心病狂得唯一的操作就是一开始随机人物以及给主角起名....当然，次元树之战属于也有一些操作与选择的成分的挂机游戏..比如玩家需要思考如何分配技能点以及如何进行次元跳跃等等…到了后期有了ex技能和祝福光环甚至是洗点系统，也需要玩家仔细思考经验值和斗魂应该如何分配. 这个游戏看似挺无聊的，因为只需要看着屏幕上自己的角色自动战斗以及不断升级..但是因为能够次元跳跃产生新角色以及多元化的怪物让这款游戏变得有趣。但是真正让这款游戏变得出类拔萃之处在于单次游戏内的二周目设定...一般游戏都是积累各种成就开启二周目的新系统..但是本作居然在第60层强制开启新的模式，不仅仅有全新的人物也有全新的技能和buff，甚至关卡本身也更有挑战性（雪原每回合都会冷冻玩家，火山每个回合都会给玩家附带燃烧伤害）。 本作的系统设计思路与通常游戏好好练级仔细规划路线有所不同，因为次元跳跃和洗点的存在，本作鼓励玩家尝试不同的战术组合以及技能分配。或许对这种挂机游戏而言，通过操作能力提升打败敌人带来的愉悦或是单纯的角色成长获得成就感，都不是重点。对于这种作品而言，不断尝试与变化本身给玩家的乐趣最为独特。因为是挂机游戏，所以传统游戏中为了获得经验与perk的过程被舍去，由此玩家也能更集中经历思考如何选择。 独立游戏总是很奇葩的存在，正因为舍弃了面向大众的游戏的许多固有设定、专注小众玩家，所以更能极端突出游戏中的某种特质。某种程度而言，一些独立游戏的系统设计甚至应该作为游戏设计的实验品与艺术品看待。这种尝试除了能给许多新手开发者练手机会也能回馈主流业界。 在bethesda e3的发布会上，todd howard就说自己fallout shelter里面的外派人物出去探险，人物会自动战斗并且有各种日志log这一玩法灵感来源于挂机游戏的鼻祖——无限的进度条...fallout shelter在ios与android上双平台下载量超过1000万..可见这种玩法已经传达给了更多受众并且为之所接受。 在过往，不少独立游戏的系统设计要么过于传统（比如以撒这种简直

# 逐帧切分 学做动效的过程中，学习理论和掌握基本的工具使用方法只是一个起点。对于我而言，更多的时间花在观察各种现有的ui动画并且思考如何模仿以及如何与已有理论联接到一起。在此基础上对于相似动画效果有针对性的观察与思考后，自行设计动效以及优化参数都有更好的起点。 建议把看中的动效（通常都是gif或视频）通过工具（有在线的）逐帧切分，手动一张张图播放观察效果。在观察过程中，逐渐把看似抽象的动画分解为layer的缩放位移形变等等诸多参数化的变量以及这些变化之间的时间和逻辑关系。在此过程中，越是自己欣赏的动画效果，就有越是有必要还原到各种理论上思考自己喜欢这种动效的原因——是因为充分传达了信息之间的关系？还是因为拟物带来的真实？一些小细节给人带来趣味感？ 虽然对于动效学习而言多动手多看教程有好处，可是如果不能不断思考反复审视自己设计的原因，可能陷入亦步亦趋的困境中。 #分析角度小结 ——情感  这个动画是否有某种趣味性？这个动效的给人一种怎么样的感受？ ——功能性  这个动画效果有什么实质上的功能？是信息传达，还是界面过渡抑或是状态展示或还是其他什么功能。大多数动效都存在不同层次上的功能，同一个功能表面看来只是拓展空间或者面板出现的方式，实质上却存在着对于信息层次和从属的隐喻。 ——为什么这个动画必须如此？模拟真实的效果？分镜头技巧（感觉很多动画之所以流畅是因为使用了某种镜头运动技巧而不仅仅强调逻辑）？是对于什么事物运行状态模拟（可以是真实的也可以是“material”）？ ——我的视线如何变化与追踪？动效是否太过于跳脱？ 动画持循时间是否太长？是否在此过程中有过多不可预期感以及变化过多。更偏向于交互与人机界面的动画必定更为偏向于使用而非单纯的展示，因此恰到好处的传递信息尤为重要。 ——场景  尤其对于一些常用功能，某些较为华丽的动画效果反而会造成时间与认知负担... 以及，这个效果如果有一些依赖条件——那么这些依赖条件是否能够满足。假如同一个app中有很多动效需要设计，能否适当拆分归类后统一进行设计。 #调试，调试，再调试 我不知道其他人如何制作动效，至少我在每次做动效都要需要花费不少时间持续调节参数并且观察变化是否能达到预期。可能是因为经验不足，更可能是因为动效本身的特性。非常建议在使用origami这类工具时最好想办法