博文

交互动效制作的坑与随想

#时间永远是个问题 时间对于交互动效的构思到实现都是需要精确拿捏的要素。ios原生动画的时间大概在300ms左右,因此非原生的自定义动画大概也最好在250ms(人眼能反应过来的时间)到400ms左右。 dribbble上有很多fancy的动画效果,他们能给用户提供愉悦的情感以及充分的状态反馈。遗憾的是,这类作品中相当一部分的目标受众是设计师而不是用户。试想要等待邮件发送成功的状态需要等两三秒动画,是对于用户耐心的挑战。 面向移动端的设计本来就需要顾及用户所处状态——更加零碎化的时间以及更缺乏耐心的状态。在这种前提下,单纯遵循传统动画制作的准则,过度强调反馈和拟物化甚至是适当的夸张并不是出路。material design把拟物要素精简为对于material本身的模拟并且创造一种新的材质为内容的展示过程赋予新的意义。material类似现实生活中的物质却是其简化以及变体。或许现代的交互动画也应该把所在媒介本身视为新的物质,而非过度从传统动画中进行学习与仿效。毕竟传统意义上的动画呈现面向的受众,情形,以及受众对信息接受的预期和方式都有所不同。 #交互状态本身 交互动效是用户交互行为中的一个环节,所以交互动效的设计必须考虑其他交互状态的出现和呈现。为什么需要动效,最终目的是传达某些信息达到更好的体验。在这个前提下,设计交互动效之初就必须非常清楚这个动画的前后状态以及场景。假如设计一个用户注册登录的动效,那么必须连带考虑到各种出错状态以及因为网速不同带来的loading时间不同等情形。个人更偏向于优先展现内容框架而不是强迫用户必须看完长达2000ms甚至更长时间的动效。尽管有更多的时间动效可以更为细腻丰富,但是这些丰富本身可能与整体交互设计的目标——提升用户效率,有所违背。从这个角度反面来看,那些被各种状态限制得较少的动效反而容易精致。例如新产品引导界面和可离线游戏内的动画效果,因为在内容的加载上并没有过多限制所以动效发挥余地也更大。 #用户一千次,一万次使用这个功能 在实际工程需求下,只有重点功能和独特的控件才会有独立针对化的动效设计。许多通用性控件有着不可预期的使用场景因而动效设计偏向于保守以及简单。无论是何种情景,真正功能和控件被使用的频次以及传递的信息量都需要仔细斟酌。让用户在无数次使用产品的过程后,动效不会喧宾夺主阻碍用户...

more than game review  生命线lifeline

#题材 生命线是一款以拯救坠毁的宇宙飞船上的宇航员为主题的文字冒险游戏。这款游戏曾经在中国apple store付费榜排行第一的出色表现足以为这款游戏的质量做背书。这款游戏更妙的一点是玩家是作为第二人称参与进入游戏,而并非是通常游戏中的旁观者。宇宙冒险求生的主题(很容易让人想起火星救援)让这款游戏更显得不落俗套。更为巧妙的是,这款游戏居然有apple watch应用和根据真实时间进行推送游戏内容的设定,在游戏中(一周目)玩家必须等待对方的回应而不能自主选择不断继续游戏一路通关。等待中的焦虑以及寥寥几句就再度归于等待的碎片化游戏体验为故事本身提供了一定真实感和代入感。这款游戏甚至一开始就为apple watch而设计,所以只有寥寥两个选项并且在游戏进行的过程中不断推送提醒给玩家。如果设定并不是拯救那个惊慌无助却流落太空的少年(少女?),那么游戏的核心玩法,推送和等待,都并不合理。 #缺陷还是妥协 ——选项太少 apple watch上没有位置显示太多内容.与此同时,这是个不断推送内容的移动端游戏,玩家本来也只能碎片化的时间进行游戏。假如玩家必须游戏体验中读几百字后进行深思熟虑随后再做出选择,那么如此缓慢的过程与游戏本身玩法和节奏的设计并不符合。长时间阅读中玩家更容易成为旁观者而非参与者参与到故事当中和主角一起经历求生历程,这也会削弱代入感。虽然选项少,但是在一些选项中能明显看见制作者努力把长选项拆分成较短的小选项,所以实际上游戏中依然存在一定的分支和选择。 ——故事的复杂度不够 因为只有若干BE和两个HE,所以本作被诟病为不够复杂。传统意义上文字冒险游戏强调选择的意义和多结局,可是这并不能作为衡量一款游戏的质量标准。鉴于针对于移动端的设计以及不断拆分对话选项的游戏特点,如果有变化较大的多结局可能会带来较大工作量。同时这种多结局本身不一定能为本身轻量级的游戏提供很大的价值。最后,这款游戏的价格本来也就1美元,指望这款游戏有着太丰富和深入的内容都有些不切实际。 ——玩家的选择有限 游戏中有很多选项都会体现制作者的倾向以及主线走向。某些选项即便选择了某些分支后游戏会继续呈现相似的选择一遍让玩家回归主线。某种意义而言,这个游戏最终会选什么都一样(除了死掉),一些看似能有完全不同剧情的展开分叉点并没有被充分利用。与此同时...

如何评价辐射4——这是个好游戏,却不适合每个人

——对于经典rpg角色扮演要素的简化与进化 更为直观,分类更为清晰的系统(对话里只有嘴炮(也就是每个perk的作用都被清晰的指定了,perk系统大规模简化,也更容易理解) 更为间接的影响玩家行为(科学技能会影响玩家的玩法(hack机器人和终端),用同伴所在阵营和其偏好取代perk和阵营偏好) 拓展种田生产流,强化游戏的意义(居住地建设(义勇兵还会在路上巡逻以及给你援助哦),据点中什么都有,满足玩家复兴文明的愿望) ——强化探索 整个世界的关联性强化,战前相关和战后的信息都会提及其他地点和事件(世界的统一感) 精细设计的迷宫,大量新增的机关以及无数独特的素材(以往bethesda游戏中的素材复用性高很多) 终端log,场景设计,甚至敌人分布融为一体 和不同同伴完成任务甚至有不同的对话和评论(同伴会提示你关于这个世界的细节,提供看待世界的角度) 更为先进的流言系统(砖石城的保安会不断提醒我81号避难所发生了什么....当年skyrim的守卫可不会催促我回去冬堡) 用捡垃圾提升探索的意愿,捡垃圾带起改造和建设系统,提升玩家捡垃圾意义 散布各地的核融合核心其实就是本作最重要鼓励探索要素之一 ——前作中的缺陷优化 打枪手感以及命中方式(啊,终于没有了奇怪的命中率机制了!) karma和耐久度系统(前者为道德模糊的世界提供黑白分明的判断方式,后者导致玩家一把枪用不了多久) 枪支和装甲改造系统 主线剧情充满着黑白分明的选择(犹如圣人的兄弟会) 多种多样的动画(关于机器部件运作的动画,比如卫星是如何展开的....) 画质提升(虽然还是高清的——垃圾堆,但是这次光照做的很棒) 人物动作改善,近战改善  敌人智商提升.... 游戏结束后可以继续进行,世界的变化不再是幻灯片(学院线的可以看见合成人在砖石城) ——令人喜出望外的东西 选择合成人问题作为讨论要点(其实辐射3当中我们已经思考过,废土上非纯种人是否有生存权力了) 动力装甲!酷炫! 令人有撕逼愿望的四大组织(再也不是纯粹的善恶,而都是处于道德边缘的人) 新流派的出现(种田流不仅可以单独存在也可以伴随很多东西出现,比如辅助吃药流生产更多的药物) 魅力和科技终于更有用了 前者关系...

老玩家们,赶紧走上众筹之路吧

#前言 本文打算根据本人的偏见,剖析一些为什么老玩家对辐射4的期待无法实现,并且这些期待本身带来的代价和缺陷.... 由此本人得出一个非常粗暴的结论——如果一个人喜欢老派的rpg,他们应该回去玩辐射2,如果他们新旧rpg能完全无缝结合,要么他们众筹(解决钱的问题)要么是自己在yy(新旧世代rpg的一些设计难以兼容) —————————————————————————————————————— #我喜欢繁多的选项,以及个人的选项对历史能造成影响——比如fnv 其实龙腾世纪他们这一点做得好多了,你可以去玩.... #我喜欢跌宕起伏的剧情 天哪这种游戏太多了....快去玩吧…比如巫师3... #我喜欢强势的技能设定,比如嘴炮流,比如智力低就没有对话,比如耐力低就特别脆皮。 现代的玩家可能不太喜欢严格按照开场设定扮演自己的这一套了...而且这种所谓平衡而多样的build要导致玩家如果希望有好结局要么就均衡加点死看攻略手册(和bethesda追求的自由探索截然相反),要么就必须多周目体验内容(多数现代人生活都很忙碌的,所以辐射系列以前一直特别小众,黑岛之死和他们自己的游戏设计思路也有关).... #我喜欢技能点在游戏剧情的发展中有所作用,比如引出特殊对话和选项/根据技能衍生的多种多样的任务解决方式 客观而言,辐射4也有skill check的...但是极少...而且技能加点也会影响游戏的进程,但是影响更为间接。比如一些玩法必须要玩家自己发现(偷窃钥匙等等),另外一些则是影响到战斗流程和玩家的捡垃圾效率(战斗能力强的清场快,黑客技能高的可以找机器人帮忙清怪等…) 其实魅力能影响部分对话选项,但是现在的玩家都倾向于备一套口才专用服装.. 像是fnv还有fo3那种很多对话都有skill check的时代一去不复返了...造成这个局面最大的锅就是语音的存在让对话本身必须被削减(否则工作量在那里啊),所以选项也被压缩了....某种程度而言,以往那种每个对话都出现多几个选项的方式相当老派节奏也很慢.... #我喜欢以前的special和perk系统,新作的我不喜欢 ——以前的系统其实对新玩家而言并不友好,新玩家很容易就加了很多力量最后perk选错...新的系统玩家可以随着时间逐渐改变玩法 ——旧的系统本身设计就是为回合制而准备的,...

辐射4之变 新旧世代之更替(你是fnv党还是skyrim党?)

#前提 辐射这个系列已经卖给bethesda了....他们爱怎么做就怎么做....叫他们全盘学习巫师3和辐射nv的人真的不是小学生吗?不同厂家有不同理念,每一家都做成巫师那种强调剧情和主角塑造的游戏,那世界该多无聊。fnv对于那些追求剧情的玩家而言可能不错,但是对那些喜欢探索和希望无忧无虑做支线的人而言并不那么有趣。 在某些人看来,辐射4以及bethesda质量不高都靠mod撑起来——他们无视了主机上的销量吧...游戏做的好才会有mod,才有足够多的玩家支持mod社区以及陆续投入。很多游戏都有mod,但是并没有足够的玩家基数以形成mod社群。没错,这个工作室的产品从未完美(但是质量也绝对不低好吗),很多人需要mod不能说明游戏的设计不好。例如skyrim的ui设计虽然很好但是很多人打mod- -。 辐射带有老滚味是很正常的,同一个工作室的产品自然有所相似。同理荒野大镖客也是买来的品牌,在系统和人物塑造上都和gta系列神似。但是这不代表偷懒!也不是一味省钱,更多代表制作人对待游戏的理念和态度,以及服务对应的玩家。再者,每家针对自己的情况开发出一个引擎并且不断修修补补,不是很正常的事情吗?要是不断换引擎程序员都没有时间开发各种先进的ai等其他要素了吧…有些人指认为betheda不扩充人员就是不够上心——首先你们有买那么多游戏,让销量足以支持这个系列像GTA那样挥霍吗?其次,核心人员的稳定对于团队而言很重要...盲目扩张才是大作死.... 很多传统的设计都有其缺陷,没有必要把这些缺陷一味认为是游戏的内核。很多现代的便捷设计的确能让游戏吸引更多玩家。有些东西是选择,并非简单的没钱or不上心等着mod制作者补完. bethesda不是黑曜石,他就是他自己,他也是一个伟大的工作室,值得被尊重。 # 如何看待辐射4(从老滚4开始说起) ——为什么需要从老滚开始说起 因为做老滚4,辐射3,老滚5,辐射4,都是这一群人....在核心人员没有大变动的情况下,把这个工作室制作的游戏都放在一起才能更好的理解整个系列的变化。 之所以我不说老滚3,因为我没有玩过.... ——去繁(硬核/取消武器耐久度/karma) 辐射4取消了一些前作中某些玩家津津乐道的东西——比如强制需要吃喝睡的生存难度,耐久度,karm...

辐射4 难以避免的分裂

#辐射4喜爱度预测表 ——如果你喜欢一下内容,你很可能爱上辐射4: 你喜欢探索,对于剧情不一定感冒 你喜欢老滚系列和辐射3 你喜欢老滚5多于老滚4 你喜欢辐射3多于nv 你不太喜欢跑腿 你喜欢收集,建造 你喜欢在在游戏的世界中当你自己 你喜欢细节叙事 你喜欢一个宏大而有充实细节的世界,会主动看wiki以及热爱脑补 你喜欢枪枪枪 你喜欢多种多样的战斗方式和自定义外貌 ——如果你有以下迹象,你很可能会痛恨辐射4: 你讨厌辐射3和老滚5 你喜欢黑岛 你喜欢fallout nv还有任务网结构 你喜欢巫师3和gtav的剧情和人物塑造 你喜欢强势的主线任务 你喜欢游戏中的电影式演出 你喜欢宏大的政治势力斗争叙事 你喜欢在游戏中代入游戏提供的角色(通常有丰满背景和生动情节) 你喜欢传统的古早rpg,你甚至很喜欢废土2 #玩家群体的分裂 辐射4质量好吗?辐射4有创新吗?很多人嫌弃他变化太少——还是那个辐射3的味道,也有很多人嫌弃他变化太多——丝毫没有学习黑耀石在fnv带来的新鲜东西....你们快醒醒,中间隔着一个老滚5呢!…如果你喜欢老滚的剧情组织方式以及任务、人物培养系统、物品系统…你有很高概率喜欢这款游戏。 许多玩家是这样期待辐射4的: 有着fnv的任务网结构(bethesda在skyrim就没有这样做(你们都忘了这个游戏吗?!),这次他们增加了帮派选择的部分但是并不做任务网,因为这样会对玩家的自由度有影响) 画质极好(这不是个线性游戏,bethesda在画质上没有那么糟糕(至少引擎有所进步),而且预算有限) 有着精彩的过场演出(bethesda的游戏从来就没有这种事情,可能他们觉得这样会影响自由,and不愿意在此投入经费) 战斗能更好一些(各大媒体和不少玩家纷纷认为大有提升) 保留传统的perk和skill系统(抱歉,你们还是没有玩过skyrim吗? 现在这种perk体系和skyrim的技能树体系相似,玩家有更大自由度组合自己的技能,也更有针对性的培养自己,同时角色本身选择的可能性以及预见性也更好(以前的perk我都不知道为啥突然就出来了)) 保留karma体系(老滚5就取消了这种单一的善恶体系了.....而且在废土上善恶什么难分) 更...

关于principle的碎碎念——第二轮

#前提 因为我花了钱所以我要吐槽下... 因为我的目标不是做个展示类动画设计师(主要使用AE进行工作),所以我要吐槽下 本人的评测向来不客观不中立,有很多偏见以及个人主观脑补成分...不喜欢的请自行关闭浏览器窗口! # auto大法好... principle中有auto这个功能,能够间接不需要触发调节就能切换artboard...这个功能让制作多段和循环动画成为了可能.这就意味着许多高级的动画效果都可以借助这种时间线的拓展非常轻松的做出来..一些简单的循环动画比如loading也能借助这个功能输出gif... 通过auto拆分artboard能够让相似的效果制作更轻松,因为有时候如果一次操作太多layer那么动画的面板上会密密麻麻许多内容..auto的存在部分分担了artboard动画时间线调节的功能,降低了复杂度也提高了可维护性。 #制作骨架易,调试细节难 principle的确是一款上手非常方便的工具: 如果做简单的跳转和基本动画效果可能只需要几分钟.... 作为快速原型工具,principle能快速搭建一个动画的基本内容和逻辑,进行一定程度的调节并且输出gif作为产物。得天独厚的artboard机制让这款软件做简单的跳转动画比什么axure都要快(因为axure无论折腾动态面板还是页面跳转都要在不同的视图内不断跳来跳去,显然不够一张很大的artboard直接调节来得方便...)...driver机制的存在也让依附于scroll和drag的动画制作非常方便…很轻松就能移动和旋转layer...做出各种轻巧的动画效果... 可能因为我之前有用origami并且会有意识的用程序化的眼光看待动画效果,principle基于时间线的一些特质让我觉得稍微不爽: ——我无法抽象出某些变量和逻辑,让我逻辑和变量多处boardcast....所以一旦有一个变量要改需要手动修改调试很多次...无法封装相关逻辑也让未来的协作和模块复用效率有限。 —— 我无法disabled某些模块和逻辑方式,所以只能保存多个文档以存储不同的动画效果。(origami内可以disable这些patch...可以放着很多个patch不用...扔在一边) 再如一些变量严格依赖于时间轴和仅有的曲线,难以进行精确的调试(比如...

principle试用感想以及其他

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

写给刚入手sketch的程序员们关于如何用sketch更好的布局

#前提 本文不介绍关于布局方面的知识和技巧,因为这些属于交互设计以及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常驻没关系....  ——现在的手机不都有通知中心这种概念吗。。。只要插上耳机就有通知并且在通知中心常驻一条提示或许可行? ——或许可以在插入耳机和耳机被拔出后都长to...

那些对我学习动效设计有帮助的文章们

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-...

adobe comet 给我一个购买的理由

最近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...

detail matters

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

#more than game review 次元树之战——独立游戏的别种玩法

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

origami学习碎碎念 #0

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

这是个统筹规划问题

最近好些前同事向我咨询一个问题,就是他们团队引入了交互设计师但是却不知道原型以及其意义更不知道交互设计师应该如何产出以及产出质量如何判断。笔者根据有限的经验尝试对这个问题进行一定讨论。 #这是个蛋糕 理论上而言,不仅不需要视觉设计和产品经理也不需要单独的交互设计。遗憾的是,许多产品本身并不小而且决策与项目实施过程中需要有大量的工作。即便是较为精英化的团队,也难以避免其成员的能力有所偏重(我才不相信市场上有那么多人在交互、设计和产品上都有足够经验呢)。事情应该是这样的,在有限的时间中人的精力是有限的。如果时间都分配给了产品设计,那么留给交互本身以及视觉设计的余地就相对较少,反之亦然。团队职位的设置不一定是问题(也就是ui与交互还有产品是否有专职),问题是蛋糕本身要做多大以及该如何分配才是问题。假设产品经理一个功能给出一句描述就完了,那么设计师可能要处理大量功能设计上的细节那么就无暇对细节本身进行雕琢。假设交互稿件上只有大致的布局而对信息层次以及实际使用效果考虑不足,那么ui设计师就要花费大量时间思考和脑补而不是慢慢选配色调节细节——根本没这时间。 所以,产品经理是否应该画原型图以及交互设计师是否应该每天就是把产品描述转化为axure上的原型,其归根结底都是取决于这个团队希望产出何等质量和类型的产品。如果有交互设计师,那么产品经理应该更深入的思考他的决策原因以及大致的功能逻辑和异常处理,而交互设计师也需要给出更为专业的产物如相关的文档,动效的说明以及有着恰当比例和轻重得宜的交互稿。 # 设计师的交付物 交互设计方面的产物质量和视觉设计以及程序员的代码质量一样,都需要内行人才能看得出来... 本文尝试总结一份关于交互设计师可能产出的内容的清单提供给那些不知道应该要求设计师产出什么的产品经理们。 ——手绘设计草图 手绘草图中通常包括一些方案尝试和选择,这几乎是进行实际用软件绘制之前比较重要的步骤。 ——软件绘制的交互图 使用axure或其他工具绘制的原型图,尽可能重点明确而比例恰当,最好有着恰当美感。部分项目可能要给出不止一份的方案进行选择。这个阶段给出的交互产物应该已经考虑到现实的使用状况以及错误处理和各种异常状况。 ——流程图 对于业务流程以及用户使用流程以及功能细节运作方式进行描述的流程图。流程图应...

如何做一个设计决策

#前提 本文专注与讨论web/app/桌面端界面设计(包括交互与视觉)的思考以及决策方式,并不讨论设计决策中那些与具体业务和产品设计的部分。 在谈论设计师在接受了需求后如何进行设计,那么除了理解需求的重点以外还有很多与设计本身相关的决策环节。在这个过程中,设计师通过知识和经验以及一定的尝试选出较好的选项构成最终的设计方案。外行人会以为,设计师只需要简单的理解需求并且画图就好了。可是在此过程中的思索以及其带来的取舍,才是设计中最重要的环节。笔者在此将会介绍自己在设计中的决策机制。 首先,虽然笔者会提供一些参考要素,但是对于不同产品以及与不同人沟通并没有必要把全部流程走一次。其次,针对不同产品的不同阶段,会侧重于某些角度对自己的设计方案进行审视与打磨。 #还原 关于设计,有无数的教程和案例也有着无数的相关知识和理论。在日常工作中,只有部分典型场景才会有直接的现成大量直接的知识可以参考(比如注册登录模块\新手引导流程)。设计师在日常的阅读以及积累有助于帮助设计师学习业界所总结的经验从而更好的做出设计决策。许多知识虽然不能显性的提供即刻的指引,但是却能提高设计师解决问题时的能力以及提供更多的角度。比如关于设计原理与手法的介绍,再如各个平台的设计风格的演变历史,再如对于用户行为和决策的一些现成研究和数据。当一个设计师基础知识扎实,那么在碰到某些问题的时候就更可能跳出困住自己的小房子从而从更多角度发掘和尝试新方案。比如改良官网的产品介绍模块,可以还原为展示性页面的内容呈现逻辑与叙述手段以及内容管理相关的一些核心要点。 * rss/邮件订阅有助于你定期集中了解行业内的动向和知识 * 适当看书,即便他们不能立竿见影的提高设计质量 * 有些东西需要等自己有一定设计经验的时候才能理解 * 基础知识要扎实,比如发现自己对字体选择不确定那么可能要好好系统的补习一下 * 许多现有的互相重合与冲突的原则,根据场景以及这些知识产生的推理和背景进行选择 #数据 关于数据有很多,有些来源于现成的产品有些来源于更加广泛的研究与调查;也有来自于部分用户的反馈与需求。面对任何现成的数据与反馈,最好抱着警惕的态度对待他们。无论是什么性质的数据,关心其来源的情景以及恰当的处理方式都很重要。无论定性还是定量数据,从数据到结论都并非如此理所当然...

一次失败的slack抄袭经历

去年年底,笔者曾经作为交互设计师参与过某个slack-like产品的设计当中。因为最后该项目被全盘推翻并且笔者在后期因为项目变动离开该项目组,所以特意把项目过程中的一些教训写出来告诫后来人。 #人人都是产品经理 每个人对于产品都有自己的理解但是并不是每个人都应该主导产品设计。在产品设计阶段的早期因为实际的决策者并不是直接管理的产品经理而且直接决策者(估计因为时间不足)也没有留下任何系统性的文档(比如竞品研究 思路阐述等等)并匆匆开工导致后面许多问题的出现和决策都处于扯皮状态。后面接手的产品经理一方面并不一定理解和认可先前的决策,同事也因为制度不周全而要同时监管多个项目而无暇思索,导致早期产品设计一团糟。 产品设计一团糟的表现通常为产品理念不清晰以及逻辑问题以及对异常状态处理机制的思考不周,比如群组被删除后相关文件怎么办以及群组内的文件被分享出去后和该群组的关系等等。这种设计上的混乱倘若加上多平台不同的限制和接口上的设计问题在项目中期很容易成为一团乱麻。后期产品经理尝试思索并且解决这些问题,然而他并没有通过很好的方式共享他思索的成果和判断依据。导致在中后期依然为了同样的问题研发、设计、产品依然始终在兜圈。遗憾的是,相似的功能由于在某些版本(比如web)上线,导致某些领导对此有特殊的理解(这些理解可能基于经验也很可能是随便一说)导致有问题的设计不能及时纠正或是重新理清。 参与产品设计讨论的每个参与者可能都有项目管理工具与通讯工具的使用体验和角度,这些经验会让他们会产品本身提出许多可能有益的建议。问题是当每个人都可以用自己的体验说事或是企图把一切都推给迅速上线后等数据验证而放弃充分的思考,那么如何衡量功能点的设计目标以及是否达成目标甚至是改进方向就成为了问题。“国情”和“用户体验”在没有经过审视的情况下容易变成幌子,为一个产品揉入一堆无法互相配合甚至是互相冲突的功能。同时由于这群功能都可能有着先天残缺(因为也很可能和别的残缺的功能混在一起成为更大的模块),导致后期产品经理很容易得出一个结论——这个产品看着还好但是小毛病很多。 ——磨刀不误砍柴功,不要充忙进入开发阶段 ——团队知识要共享,否则团队根本没有共识... ——盲目的敏捷开发容易导致产品全盘推倒重来 ——产品经理对于产品的全面思考很重要 —— 用户体验/敏捷...

交互文档中的动效设计表达

前提 本文讨论的动效设计表达基于类似origami类,基于逻辑与参数组合为基础的工具。与此同时,本文讨论范围也基于小团队特别是至少一位设计师能熟练使用origami类工具的团队。最好该团队使用Mac工作,并且拥有对于交互设计,视觉设计,基本代码能力的设计师。本文也不打算讨论偏向于展示以及较为复杂的交互动效如何与文档耦合。 #why 本文并不希望讨论为什么需要动效设计而是讨论为什么需要写这篇文章。关于动效设计,有许多传达方式。有些是基于AE,叙述层次关系以及时间线变化以及动效曲线参数,有些完全基于代码与其逻辑,如framer和许多js库。更有基于逻辑与参数组合的origami like工具。这类工具都能提供调试具体参数与变化的方式,但是对于整理具体功能以及交付相关文档给研发进行开发,完善的文档依然有必要。同时对于一个较大的项目而言,必然有不少与动效相关的输出物(因为许多origami file或是AE文件不可能做一个完整的产品,资源不足)。这些输出物需要有对应工具进行整理与反思以保证整套方案的完整性与一致性。 #具体业务之外,核心表达之中 对小团队而言,动效设计以及其文档表达始终有些尴尬。其一团队成员少因而时间有限,而部分动效高度依赖于高保真图与最终页面内的细节呈现。这也就意味着,本来小团队就更容易发生的高保真迟迟不能定夺现象,导致留给动效设计的空间极为有限。或许许多页面的呈现,比如从列表进入详情页面这个过程的动效并不过于依赖于具体业务。但是这类动效的展示却依赖于整个产品核心信息架构与理念上的清晰,比如基于卡片为单位传达信息与基于群组为单位展示信息,也应该有针对性的动效设计辅助使用者理解产品内不同的信息与层次。如果一个产品的核心方向始终摇摆不定,那么设计师容易不分场景较为粗暴的随便仿效或使用系统原生效果目标。 #文档内的粒度 个人建议文档内的描述基于单个的场景甚至是单独的控件且其中panel的变化较为单一。这种设计原则有两个考虑:其一是减少因为单场景内内容过多带来的复杂性,其次越大的场景内动效的设计越可能与多变的具体页面的相关业务耦合。即便针对简单场景的细致描述也考验交互设计师对逻辑和交互过程中各个状态变化的理解以及对细节到整体的把握。把粒度变小有利于通过更深入的把握细微的变化,从而更好的从宏观层面统合整个产品的动效甚至是信息展现逻辑。...

origami相关的碎碎念

#为什么选择origami 虽然origami是一种不易上手更不易精通的动效设计工具,但是却有着难以替代的优势。其一其基于osx的原生图像处理机制,相对于别的动效app具有更多拓展空间。其次origami强调交互逻辑以及状态变化比起强调时间线机制的hype更接近交互设计师所关注和力图解决的问题。其三,origami背后有github上众多开发者的支持以及facebook的投入。 #origami的缺陷 上手难度较高,需要不断练习(掌握所有基本patch)和思考才能掌握origami的基本逻辑以及解决问题的大致思路。同时,学习origami意味着要有一点英文基础(中文资料少的可怜)以及对程序运作和逻辑的思考能力。再者,origami本身的开发工具链条并不完善,缺乏足够好的debug机制。总而言之,学习origami对于设计师而言是检验自我学习能力的好机会 = =! #如何学习基本的origami动画设计 要使用origami进行动效设计的前提是拥有一定ui技能(要点在于能独立设计并且输出ui图)。其次大概就是拥有一台mac,并且安装好quartz composer和origami。老老实实看facebook的教程以及把facebook提供的案例都下载下来看一下。重点在于搞清楚基本操作和大致连接各个patch的逻辑,理解从触发到行为之间这种变化方式。 在研究facebook提供的案例以及Martin. RGB大神翻译与个人总结的经验后,估计对于origami就有一些非常基础与零碎的认识了。在这个阶段除了老老实实做练习以外,还要不断思考每个patch的作用和意义。碰到问题除了不断尝试还要多看看别人做的范例,有时候网上并没有直接的答案。但是类似的情况以及类似patch的使用却能人许多启发。 #一些小经验 * 那些patch的含义是我掉了很多坑才理解的= =!老老实实看patch说明很重要。 * origami不是axure,注定有很长的上手时间。 * origami内各种变量是有type的... * 我个人强烈建议好好管理各个patch的命名,命名就是注释。 * 模块化思维(把模块都按照逻辑和一定的粒度组成marco patch),并且更多用boardcaster和re...

企业产品交互设计杂谈 #悲伤的故事还在继续

#节制 并非每个产品的使用者都是理性,周全,有足够的时间。设计师和产品都很容易自以为是,我们细心设计表单的校验方式,要求表单内容必须合法(合符一定条件)用户才能继续下一步操作。可是真的有必要吗?比如身份证号,或许有的公司有外籍员工呢?为什么一定要强制性的校验呢?我们是否有足够强的业务上的理由,真实世界中的各种可能性或许我们并不知道,对吧?或许如非必要,并不强迫,在某些情形下远远好于过度仔细的为用户着想重要。在不太重要的场合下,系统保留一定的开放性和容错性,并且能领悟到这一点(通过了解用户以及真实需求)远远比一些生硬的交互设计原则和已有惯例重要。 #界面化 or not 这是个问题 一个功能可以有很多种呈现方式,其中一种呈现方式是非界面化直接通过命令行附加参数实现。其实软件最初并没有没有gui界面,gui界面是随着软件发展满足更多受众需求而产生。因此交互设计师在面对某些特殊场景(极少客户的特殊需求,以及部分相当复杂依赖log和代码调试的功能),应该思考有没有必要多做一个界面多提供一个选项。为了那极少数的人或是一个根本不适合以界面呈现的功能,gui界面是无能为力的。特别针对于某些特别高级的功能,操作者面对终端操作甚至可能更方便一些。 界面化与否不仅仅是一种产品存在形式,甚至代表着某种研发上的倾向。一个较为大型的企业软件与应用,底层相当可能存在许多半吊子未经充分包装和开发的功能。这些功能如果未能很好的被整理以及记录,可能在后续造成重复开发。(尤其在核心人员离职后,这类关于项目过程中的细节和不被文档所提及的远景,都会深埋于代码内)。 #deep down inside 每个系统都有很多功能永远埋没在角落,等待着被人发现以及以被用户接受的方式打包组合成一个“新”功能。当一个产品足够大,功能足够多,那么就很可能有很多缺乏恰当包装的沉没功能。很多顾客所需要的功能在系统内并非没有提供,而是产品本身对那些功能缺乏足够包装。这种包装上的缺乏体现在没有完整的设计相关功能或功能只有底层却没有相对应的界面,抑或是分散在角落缺乏整合也可能是根本没有包装组合好并且充分告知用户。 作为企业产品的交互设计师,很有必要通过各种途径发现这些缺乏包装的功能(比如查看jira上的需求,再如和老员工交流,再如有空就玩一下系统内的各种功能)。当了解这些状况后,才能更好避免重复制造轮子或...

#设计师不是魔法师 关于工作效率的杂谈

#关于工作效率与设计质量 在不同产品的不同阶段,对于设计而言也有着不同的要求以及方法,本文试图根据自己工作经验(虽然有很多项目我并非主力,以及前几天设计师聚餐上的讨论)进行一些简单的讨论。 #to 亲爱的产品经理 设计师不是魔法师 很多产品经理都喜欢那些设计得当,体验优秀的产品,遗憾的是他们并不知道要带领一个团队做出一个好产品有多难。本人相当偏颇的认为,如果一个产品经理不真正意识到自己的管理方法以及对于需求的投入(或者对需求的取舍与思考)如何影响最终界面,那么他还缺经验。 #没有通用方法 对于成熟而有体系的产品而言,制定style guide(控件规范)是一种能促进后续开发高效进行以及产品体验与设计保持一致性的好方法。虽然每次都对研发声明使用对应的控件即可,对设计师而言相当方便。但是制定style guide之前必须仔细理清现有的每一个流程和细节,否则很容易漏掉某些特殊情况。最好针对style guide,制定一定详细的文档以及简要的新旧控件替换说明给研发。通过积极的沟通(文档,jira,群组聊天)等方式,才能较好保证styleguide真正被研发所正确使用。 在产品的初期阶段,能大致统一各个核心页面的基本原则和风格就很好了。在产品需求以及对应的设计都在初期阶段之时,大谈设计规范以及其对工作效率的提升并没有太大意义。这个阶段可能更需要对于核心界面多做打磨(假设产品是属于逐步迭代的小而美类型),随着产品后续逐渐定位面才可能统领全局进行设计上的思考。设计师也需要思考,对于一个产品的理解足够深才能很好的把握各个页面的重点、本质以及扩展性,从而制定出通用性的控件。一开始就思考着通用性的方案,可能会让设计师因为对产品接触不足,从而对于一些复杂问题处理不当(视乎产品复杂度而定)。 如果一个功能或是产品,越是不确定越是无法跳过前期的原型阶段。我个人非常建议交互设计师做两种原型,其一为简单的纸笔草图或者直接用不同形状做出的低保真原型,其二为中等保真原型,含有几乎完全正确的空间尺寸比例以及能充分体验视觉与使用流程的中等保真原型。前者主要确认该功能所含的全部要素以及基本功能和设计重点,后者主要需要设计师理清流程的细节(设计方案能不能很好的应对各种异常状况以及绝大多数情况)、设计是否对空间使用是否恰当以及每个环境的重点究竟是什么。在理清以上要素之后,才...

axure8 些许失望

#outline图层显示顺序问题 在axure8内,按照树的原则对于页面内图层进行排序,导致那些顶层的元素需要滚动一段时间才能在面板内选中。恰巧最顶层的元素在设计中都是最常被调整的要素,axure8选择的排列方式为设计师添加了麻烦。不仅仅如此,axure内本身就有bring to front,此处的front显然指代图形层,但是在outsline面板却意味着排列到底部,这种概念上不不一致容易让人混淆。 #锁定比例(缩放时) 这应该针对于某个元件或是组,可是axure8却做成了全局性的设置(而且没有默认选项哦)。这导致设计师只能每次都去点击下锁定的按钮,改变先前对于锁定比例的设置。 #群组与master的操作方式最好合二为一 master依然需要跳转到一个全新的面板进行编辑和管理,导致使用者必须来回切换。既然群组编辑可以群组所在区域,那么master也可以使用这样的原理进行编辑和修改。在不同的界面中来回跳转查看整体效果相当麻烦。 #toolbar无法自定义图标的位置 toolbar可以自定义是一大进步,可是依然有很多改进空间。如放出更多功能以供选择和组合,以及允许自行排列图标位置。如果axure愿意,那么左右两侧的面板也应该提供更大自由度让用户自行组合。比如我就希望合并pages以及outine:page,我认为两者是相同类型的内容因而完全可以合并后放在左侧。 #图形编辑 在axure内拉贝塞尔曲线的很不方便,只能看到两个黄点而没有辅助线,需要使用者进行脑补。另外,只能右键选择曲线类型而不提供任何快捷键,也是一种遗憾(啊,我怀念sketch的快捷键)。此外,非原生图形无法快速设置圆角以及为图形提供快速进入自定义模式的快捷键,也是一种缺憾。 #ui缺陷不断 toolbar按钮点击和悬浮时居然没有反馈 右侧inspector空间利用效率低下 (要么紧凑点要么多放点快捷功能出来 #其他缺陷 不断卡顿,比我没有ssd的mini上的sketch还要卡顿(人家一个页面开了50个 artboad才和你一样卡)。 #结论——虽然我很乐意看到进步,但是我已经老了。 如果有机会,我不太希望在axure上完成原型设计以及动态demo了。 简单的单线程demo可以交给更简单的工具,复...

axure8来了!

最近axure终于更新了! #界面优化 ——自定义工具栏 而且图标变得很大(很osx ——左侧面板改善(交互与样式两大tab) ——右侧的编辑栏太像是sketch了 ——outline里面会和sketch一样出现缩略图 #对群组的支持更好 ——编辑(能快速的编辑群组 以前的群组几乎难以编辑 ——为群组添加行为 啊 少覆盖了一层热点 ——面板中有群组了  啊 更方便整理内容 ——群组可以按照比例缩放了 #图形绘制 ——原生图形大进步 比如提供直角三角形!还有饼图! ——基本布尔运算齐全 快速绘制图形不用愁 ——画笔工具勉强可用 ——曲线勉强可用 (简而言之就是基本的图形绘制没问题了 但是别指望和sketch一样方便 更别指望能变成ai那样强大........ #原生控件 ——提供多种box(显然就是用来表现层次关系啦 ——提供多种button(方便了产品经理们 ——提供更多的自定义和设置 比如输入框 比如描边 ——可以在右侧style那里切换选择style(简直就是把share style抄过来了 ——master和以前一样难用 #小总结 axure8总算基本可用了。 期待 ——合并page以及outline (这样就更sketch了= = ——原生样式放在页面顶端(类似sketch的symbol ——允许多重阴影与颜色填充(我就不指望可以支持各种叠加效果了 ——优化界面间距 ——自定义工具栏的自由度更大一点 ——对参考线和栅格系统更友善(因为设计师经常要排版orz