PIT BOSS 掉坑永无止境

本文写给那些没有经历过科班设计教育的产品经理和交互设计师，主要是通过介绍一些技巧和方法，提高他们的原型图的质量，方便产出更美观而且容易被人理解的线框图。 本文将分为两大部分，其一是关于一些前期的准备工作和学习内容，其次是关于美化线框图的技巧（记住！这不是线框图的要点指南!!!!!)。两者都对于学习美化线框图的过程很有必要，希望我写的这些能给你们一些裨益吧。本文基于axure7以及sketch3.3进行介绍，也会适当拓展一些内容和技巧。 # 学习要点 ——从style guide中学习 建议好好细读google material design指南的相关内容（ https://www.google.com/design/resources/#material-design-guidelines ）建议重点仔细阅读guidelines中关于style还layout的章节。并且通过这些章节的阅读，在axure/sketch开始建立gird和layout。之所以选择这套guidelines，是因为这套规范是一套真正跨平台的解决方案。而且这套规范足够细致，从布局到控件都有很详细的说明。对于初学者而言，一开始先从这类规范学起，老老实实遵循规范并且思考这些通过这些规范制作的软件和app如何体现这套规范，大概就能慢慢领悟一些在gui设计方面的知识和理念。很多设计师他们并不必要过于死板的遵循规范也能设计出美观的产品，那是因为他们也经受足够和训练和练习。简而言之，新手老老实实打玩教学关卡吧。 ——建立模板 根据具体的工作需要，为了提高原型制作速度而制作一整套模板很有必要。 这套模板通常包括以下内容： *layout解决方案（网格大小，layout大小等等） *色卡（最好和设计师商定一套色卡，一套不会干扰他们实际工作的设卡） *一些基本的部件，比如列表，比如switch开关（移动端网页端都有） *字体（一套中英文都较好且有多字重量的字体，可能新的苹（果）方（黑）和思源黑系列都是选择，windows上方正的黑体都还不错） *常用icon套装（可以依赖iconfinder等网站或者iconfont的解决方式 （axure8出来以后自己画简单的icon也不难（真的，简单的icon画出来不难，画好就绝不容易））。 ——找

https://itunes.apple.com/cn/app/hero-emblems/id645797558?mt=8 这是一款有着浓浓jrpg风格的三消游戏（连bgm和开场运镜方式我都会想起轨迹系列 这是一款更强调策略而非速度的回合制rpg，虽然作战方式变成了消除方块 这是一款有着主角技能成长，完整剧情（虽然没什么剧情上的分支），以及轻量技能选择雨培养和装备选择的ipad游戏 #优点 传统三消游戏的缺点是行为本身大量重复而且缺乏足够的意义让人持续游戏。在这个游戏中每一种不同的方块连接都有不同指向而且还彼此辅助（奶，魔，物攻，防守）。本来玩到后期无聊乏味的三消游戏因为本作尝试rpg和三消结合变得有趣了一些。rpg扮演带来的意义（四人小队救出被恶龙劫掠走的公主）以及面对不同敌人和情况进行深入思考和资源筹划，这些都提高了可玩程度和粘度。 音乐悠扬动听，音效也算是不错。水彩手绘的画风非常清新自然，看着很舒服。（换作是国内的三消游戏那么每个宝石都会有着亮瞎眼的效果。 精美的新手教程，很显然为了制作这些效果花费了不少心思。 没有内购！太良心了！！！12元！吃不了亏上不了当！不要30不要20，只要12！一次购买，终身享用！！！ #缺点 可能因为我技能太低下了，能不能提供very easy难度= =！ 卡关的时候能不能学下gta多次卡关就跳过= =！ 后期有些关卡比较难，需要刻意刷钱买道具 成长曲线比较崎岖，一开始的宝石是300下个级别的更好的宝石价格马上飙升到2000 = =！ #脑补 把日式rpg（回合制）都变成分章节购买的移动端触屏游戏吧。 ——每个结局分成不同的章节分割出售，玩家根据需要购买自己喜欢的结局！ ——再也不怕烂尾了！因为后面几章制作者可以慢慢出！而且那种烂尾游戏因为章节被划分也无法捆绑推销出去了！ ——通过内购，广告，多种方式盈利！降低玩家进入成本和门槛！ ——更方便捆绑育成要素（把妹什么的 因为手机能经常拿出来嘛 ——更多运营因素 （基于手机与手表、眼镜连接的大趋势 ——你觉得是有iphone的人多还是有psv的人多一点？

本文的写作目标是提供一些关于交互设计学习和产出的切入点，引申出一些方法和经验，为初级设计师以及有兴趣提高产品质量的人提供启发，减少掉坑的机率。 之所以选择注册登录这个功能作为开篇和切入点，是因为这个功能非常常见并且看似足够简单。同时，本系列文虽然一概而论有个关于交互设计的标题，但是很多产出可能和具体团队分工而定，并不一定都是交互设计师提供这些产出。 #业务需求 每个不同的产品都有不同的业务特点和规划，如果大体的规划和预期能尽早的清晰表述，那么设计师可以减少很多顾虑与猜测。所有的细节的完备程度，以及是否要预留足够拓展空间等等具体设计上的取舍，都取决于业务上的需要。我个人能理解产品发展过程中总是有变化和拓展，但是如果半年内对一个较为简单清晰的功能反复折腾，可能会耗费研发团队的心力。 不同的产品有着不同的特色，交互设计师所要处理的难题并不相同。假设这个登录注册功能是面向大众消费者，那么设计师可能更需要考虑的是如何尽可能减少一开始就要填写的资料，优化每一步中的小体验（比如basecamp密码二次填写出错后，旁边的小人会生气）。如果面向企业设计这个功能，可能就要考虑企业用户们追求安全性以及充分定制性的场景。在设计这个功能的时候，如果是一个较新的系统，那么交互设计错误提示等等都可以重新设计与优化。如果面向较大的系统和已有的产品，那么请务必搞清楚背后有没有一些已有的依赖关系和复杂限制，以及原有系统暂有的一套设计规范和逻辑（比如密码错误提示依赖与一个现成的可配置系统）。 同时，不同的产品面向的受众也不尽相同，这种不同既会反映在基本的功能需求上，也会反映在设计师有没有必要针对特殊人群（老人、小孩）进行特殊优化上。当然，受众的特性也和产品所在的平台与渠道有关，关于每个平台（web/app/甚至未来ar中，都有不同） #具体功能 注册登录在面对多数面向个人消费者的产品时，都要考虑到平衡运营需求以及单一的注册登录需求。其一是这个功能直接就在产品介绍的相关页面，其二这个功能在一个独立的产品登录页面中。是否用户登录的时候新功能介绍，是否在用户注册需要在最后一部也强调产品对他的意义，这些都是有必要被澄清的。 具体到详细的功能而言，关于注册和登录都有许多种可能性。比如是否支持第三方，是否需要填写详细的资料，是否有年龄性别限制，是否要提供相关

新版 旧版 本文将要以拉勾网的新旧两版公司首页的产品设计来尝试探讨页面设计框架图产出背后的一些考量因素，以及这些因素如何直观的影响到页面的功能和布局。本文并没有任何意图希望批评或是赞许该产品经理，同时也因为本人对于其内部运作模式（特别是收入来源和业务拓展目标等）并没有深入了解，所以也仅仅提出某些可能需要思考的角度和某些细节的可能性而非一套完整的解决方案。 （吐槽，很多面试题都很喜欢考这种假如让你重新设计XXX，这种题目注定只能给出个大体正确的方案。因为好的方案都是紧密结合具体业务，需要了解背后的相关陷阱和模式的，要是如此容易推断出这些东西，该去炒股而非做设计师。 #预期 要讨论这个两个设计之前，我必须指出，我并不知道拉勾网本身对于新版本的期许所在。或许只是为部分企业提供更好的可能性，或许这只是ab测试当中的其中一个版本（测试下新的企业信息页面中用户和企业的关系如何改变？），或许产品经理、设计和研发啊的投入都有限，只是把这个版本作为实验性的版本甚至是一个过渡版本3个月就扔掉。当然，对于设计师和产品经理，可能也有一点更高的追求——对于服务企业和求职者，带来更顺畅体验的满足感。 #差异的背后——对用户需求的预设 似乎两张图的上所蕴含的元素基本相同，但是左图更强调可以申请的职位，而右边的图更加强调公司的状况（发展历程、工作环境图，地理位置）甚至是新功能——评论。从这些基本功能的变化，我们就可以看出（或者这种差异变化应该展现了）两个版面对于用户需求的不同把握。 我更愿意把拉勾这种模式理解为一种特殊的电商平台，只不过承载的内容是职位而不是普通的商品。版面的以及重点功能的变化可能意味着用户进入页面的方式以及后续的行为变化甚至是bounce rate方面的变化？而且这种版面的变化也会让我脑补拉勾网对于定位的变化（希望通过社会化求职、强化招聘者的反馈？希望更倾向于那些有漂亮profile和数据的公司？现在这个年代公司所在的具体位置很影响求职者的选择？现在找工作都希望分享到社交网站了？） 同时这种变化背后也应该体现产品对用户引导的变化，过往keyword还有招聘职位很重要，现在变成了公司的各种硬件更重要。似乎意味着求职者变得更加挑剔（低端的求职者是没有太多资本挑剔公司条件的，供需关系

＃团队沟通 本人一直都认为，普通设计师不应该过度承担团队教育的功能。比如提供很多高大上但是明显与当前团队需求有所偏差的产品作为案例，抱着展现更好的选择以及提高团队其他成员审美基准，导致案例无法评审通过反而leader不满意回头做更佳保守的方案。 首先这种做法浪费了时间，其次很多公司并不需要多好的方案（受众需要或是领导个人偏好）——既然他们没有需求就没有必要主动提供不符合他们需求的方案给他们。领导当然希望设计师提高最好的方案，可是当他们并没有鉴别能力的时候（或是不理解业务局限的时候），设计师一味制造他们所认可的更好方案来彰显价值，其实对于最终的成品并没有好处。其一是加长了设计流程导致评审不过关（通常这都意味着许多对设计师的质疑和批评），其次是这种团队教育本身很难成功（因为这通常意味着不太合理的流程和不太专业也不愿意相信专业人士的伙伴），反而会被误解为设计能力不足等等损坏设计师的专业声誉。 至于产品最终成果是否能有好的视觉表现和交互体验，应该把责任和决策都留给真正的决策者。决策者应该为团队支付代价以及承担责任，并且如果他们并不愿意支付成本的时候设计师的做法是应该根据他们实际确切的资源和要求提供产出（假如审美很差又想高大上就只能提供他们喜欢的高大上）。如果设计师有更高的追求应该在业余项目中实现或是干脆用脚投票去那些更需要高质量产出的公司。商业社会自然会优胜劣汰淘汰某些公司，市场的残酷本身远远比设计师单方面的死谏有意义。不在其位而过度谋其位很容易导致设计因为努力设计但是却最终只能大幅修改方案带来的落差和时间损耗，而且也没有仔细优化好较为保守的方案导致最终产物较为粗糙。 那些鼓吹设计师应该努力改变流程教育团队的人，要么就是坏心眼要么就是缺心眼。他们肯定知道同时产出质量较好的两套方案（保守和先进）都需要时间，而这个时间通常不够所以设计师很可能需要背负骂名以及加班来完成两套方案（甚至更多）。这种鼓励加班的工作方式变相促进设计师提供的较为先进或是保守的方案都不够好（时间不足），同时也不利于团队成员的自我学习提高等等，更容易导致靠谱设计师的流失。 在这个过程中，部分设计师可能很喜欢（或是刻意表现）某种作为牺牲品和殉道者的姿态。比如我为了好的设计如何如何牺牲等等，我如何为了客户用户产品如何如何努力教育团队成员，我为团队提高多少改变推进多少变化等等。设计师当然可以

＃线框图的意义和价值 设计师或是产品经理需要交付的重要产物之一就是交互线框图。此处不讨论相应的交互原型应该由谁产出，而集中于讨论这种产出有何等价值并且在设计流程中的地位。线框图的产出是交互设计中的重要环节，好的设计师／产品经理最好能够提供一套以上的线框图以供选择以及对照。生产以及讨论线框图的过程并非为了加快设计速度，而是为了减少直接徒手进行高保真设计甚至开发带来的一些成本。如其把线框图看作是一项能带来直接价值的资产，倒不如把它当做是一份保险。通过拆分视觉以及框架布局的交付，能减少后期全盘推倒重来的风险。在前期把注意力集中在对需求的深入理解与细节仔细审视中，有助于降低产品在开发与动工阶段出错的概率。如果一开始就立足于设计与开发而非真正的导向（当然某些特殊产品就是炫技用的） 然而，线框图所潜在的风险就是与真正的产品（尤其在视觉效果方面）可能较大差距。如果希望补救这些差距，除了产品经理／交互设计师需要具有较好的视觉设计功底外，视觉设计师（如果也负责交互产出）对于交互本身有较深的理解并且能免于迅速进行视觉设计的诱惑。当然，如果交互设计的过程以及视觉设计能使用相似或是相同的体系（比如尺寸，比例等）甚至使用相同的工具进行界面设计，那么线框图可能会更接近于中等保真的原型。 ＃数据收集与调研 在这个年代大家都很强调用数据说话，然而关于数据本身的一些基本知识和分析手法却未必能为设计师所知也不要提为其所用。本文不强调什么高大上的大数据，机器学习等等概念，而是尝试讨论一些小团队也会用到的工具和手法。对于小团队而言统计工具（比如GA（啊，我当年gfw还未如此猖狂））比如现成的调查问卷工具（如调查派）等途径收集到的数据更为直接。我发现，即便这些工具已然给出相对便利的手段，但是个人的分析素养与能力直接决定了数据能否被更好利用与甄别以及原始数据本身的获得过程是否可靠。 假如对数据和用户反馈都抱着随便的态度，那么很难用数据修正其后的设计。更何况，在糟糕的设计上收集而来的可能的数据，可能需要更仔细的判别才能过滤出有价值的信息。针对于此，设计师应该踏实的学习一下关于社会研究／统计／以及一些数据收集工具（比如ga，百度统计等等）的相关知识和原理。只有在这些基础知识之上，才能较好的产出比较靠谱的问卷，看到数据也不会一头雾水。至于更加高大上的研究方法，其得出的

long long ago，动效制作属于专业ui设计师的领地，他们熟练的使用ae，输出生动有趣的动画效果俘获每一个人的心。直到有一天，sketch，qc（facebook origami）等站了出来，他们要成为偶像？拯救苦逼的交互设计师，让他们更快的生成更接近开发需求的可交互原型！ 上面的都是废话。 —————————————————————————————————————————————— 本文主要希望仔细讨论交互设计师的原型产出特别是动画产出的流程相关的内容。 ＃前提1:交互设计师有必要输出原型中核心动画的交互效果 ＃前提2:因为时间有限，只有部分核心的动画才能用AE or 其他动画制作工具产出 ＃前提3:设计师最好提供接近于工程实现的产出， 如facebook origami／noodl（chrome插件）等几乎完全使用开发处理逻辑进行动效设计的软件 方便与工程进行耦合 ＃前提4:动效本身（无论是不是fb origami自动导出的代码）都可能带来性能问题 但是过早的性能优化没有必要，要设计师写出neat code极难（因为需要很好的代码基本功） ＃前提5:本文适合那些希望耗费一定时间把产品做好的团队， 并不适合如下情况： 团队中喜欢扯皮，无论开发和设计都在尽力规避责任而非思考如何做好产品 设计师／开发不愿意学习新内容，尝试新合作流程也不愿意互相妥协配合 ＃笔者对ui设计以及动效制作和代码经验都极少，请诸位大大轻喷。 —————————————————————————————————————————————— ＃动效产出的前提——分类输出 根据我个人的工作经验而言，许多产品以及市场营销等等部门，他们对于app内精巧的交互动画并没有太多兴趣。确切的说他们也没有这方面的知识，所以面向这类受众交互设计师应该提供的是页面的总体流程和框架（从低保真的线框图到中度保真的原型都可能）。但是如果需要制作动效给开发和产品作为实际参考，那么交互设计师必须针对实际的页面做高保真。这不仅仅需要设计师拥有一定ui设计能力甚至是代码能力，也需要交互设计师能有恰当的平台和软件快速产出不同类型的内容。 我一直都希望交互设计师能使用mac进行工作，因为不仅仅可以使用s

＃声明 我不是一个传统的gal game玩家，我对于gal game套路以及历史都不甚了解。 ＃良心作——画面／音乐／配音 这款游戏虽然只是一部国产gal game，但是质量不错（好像不知不觉黑了点什么）。有着还算是正常的声优演出（虽然我对于所有妹子／男主都没有任何兴趣），也有着挺多立绘（男人吊儿郎当妹子都是不科学的巨乳），场景画风什么都还算是不错。简而言之处处都能看见制作组的确花费了心思投入进行设计与制作。更为难得的是这款游戏在steam上发售并且支持steam物品，云存档，还有成就系统，这些都给予玩家一些便利和惊喜。一边听着悦耳的音乐，一边绞尽脑汁思考如何提高成绩减少压力，摆脱初恋女友（她实在太天然呆了 不是我喜欢的类型），这种过程——挺愉快的（天生的fff团成员）。 因为要兼顾培养妹子的好感度（或是想法设法甩掉她），也要兼顾学习与保持生理心理健康，其实相当不容易。加上本作据说有50个结局，而其中又有很多有趣（滥俗）或是新奇（脑补）的分支剧情和人物，所以可玩性不错。我简直把这个游戏当做是rpg／战旗类游戏一般看待，精心思考如何分配资源以及组合现有优势，似乎游戏最重要目的——追妹子反倒陪衬得不要紧了。 ＃情怀作——趣味／戏谑／不科学 这部作品虽然只是普通的gal game，但是选取了高考前这个对于多数高中生而言非常独特而重要的时刻进行刻画，立意独特。其中游戏系统中的各种事件也都充满着作者对于高考的调侃态度以及脑洞——考生的冤魂，同治遗物，1977的回忆，同学花钱买小本子，爸妈随机给的鸡汤／山寨保健品，甚至是新东方补习宣传单等等，都富于中国特色高考气息。主要情节中，也大致刻画了高考前的几个节点——动员会，状元回校宣传会，一模，考前自习，爹妈介入分手等等。相信每个经历过高考的少年，都会从这款游戏里找到一点点回忆吧。 当然，作为游戏，也理所当然有很多并不科学的要素。比如为啥每个妹子胸都那么大啊！为啥最开始的女主发型和园神一模一样啊？！为啥黑长直又是这种父母离婚家庭不幸青梅竹马的设定啊？！为啥男主基友吊儿郎当啊？！为啥学习委员的秘密居然会被男主知道啊！——反正最科学的一点就是——无论在游戏中多成功的攻略妹子，三次元的我依然没有妹子＝ ＝！ ＃gal的趣味 这款游戏既然作为gal game，主要通过多周目不断收集不同的道具尝试不同的组合

https://itunes.apple.com/us/app/tengami/id794960248?mt=8 最近终于找来这款ios上的大热游戏围观.. 这是一款有着浓浓日式水墨风的横版解谜冒险游戏。精美的画面结合翻转纸张进行解谜的方式，加上悦耳的音乐使得游戏过程轻松愉快。 #pros ——画面 精美的和风水墨的美术设定，是这部作品最吸引我的一点。利用纸张堆叠以及水墨渐变的颜色，开发者营造出一个有着浓郁和风的世界。在这个世界中，无论高塔小楼，还是高山瀑布，无论白日还是明月当空，无论葱翠的春日还是枫红漫天的秋日，都如此迷人。 ——创意 纸张的翻转和折叠，这个日常生活中极其普通的行为，在游戏中被赋予了全新意义。翻开纸张可能是展开桥，可能是多次翻开堆叠成不同的路，更可能是转换空间打开（新世界）大门，甚至能够穿越时空回到过去的季节。纸张的折叠翻转带来的巨大变化这种本事能给玩家带来很多惊喜和期待，同时缓缓翻开舒展开来的场景让人意识到游戏内空间分布的奇妙。 ——镜头调度 优美的画面和巧妙的创意，如果没有本作优秀（在独立游戏中）的镜头调度切换，那么气氛的营造就会落下一大截。本作并没有很多场景和要素，但是通过缓慢的切镜头拉远景等等方法，极力渲染出优美和缓的气氛。日式水墨中的优雅舒缓，纸张折叠间空间转换的变换，都通过镜头本身传递的情绪得以传达放大。 #cons ——解密缺乏足够提示 本游戏对于解密的设计有着许多缺陷（也很可能是因为游戏流程太短）。比如一开始是拉动枫林让狼停止嚎叫，可是接着却马上出现需要根据狼的大小依次拉动风铃让狼嚎叫后睡眠的环节。。。可是——狼的大小都差不多——一开始谁TM的能想到是看狼的大小啊！还以为要让某只狼沉睡呢。再如有个关卡需要依次点击高塔上的8个风铃，要不是看攻略这种顺序很难凭空想出。我能理解作为流程较短的独立游戏没有太多空间逐渐培训玩家，但是许多谜题之间的衔接性不够强并且缺乏足够的引导显然是个问题。开发者干脆做个有截图的提示好了.... ——奇怪的bug 人物卡住啦，奇怪的鬼畜颤抖啦，走路很慢多次点击也不会走快点啦（这对于心急的玩家而言很心烦的！）还有偶尔纵向走动时候人物的纸片看起来很诡异。偶尔也因为镜头拉伸不好所以人物特别小特别大（要是我能自由放大缩小该多好） #期许与展望——轻与重 转换角度