• AI绘画必看!5个实用技巧让图像生成效率提升200%

    UI交互 2023-04-17
    大家好,这里是和你们一起探索 AI 绘画的花生~想必很多设计师小伙伴都在用 Midjourney 生成各种设计灵感或者素材,比如 3D 人物、UI 界面,渐变纹理、矢量插画等,而且只要我们掌握了其中的关键词或者公式,就能快速生成对应的效果,非常方便。不过在使用他人分享的提示词公式时,我经常会发现效果不如原版好,不...

    大家好,这里是和你们一起探索 AI 绘画的花生~

    想必很多设计师小伙伴都在用 Midjourney 生成各种设计灵感或者素材,比如 3D 人物、UI 界面,渐变纹理、矢量插画等,而且只要我们掌握了其中的关键词或者公式,就能快速生成对应的效果,非常方便。

    不过在使用他人分享的提示词公式时,我经常会发现效果不如原版好,不知道大家有没有遇见同样的问题?后来经过不断的尝试,我终于学会如何处理这种 AI 绘画“买家秀”和“卖家秀”的问题,并且总结出一些技巧和经验,今天就整理一下分享给大家~

    一、收集提示词素材 最初是在逛 Behance 的时候看到一组很好看的 3D 艺术作品 —— 由C4D 制作的炫彩玻璃材质的兰花, 当时就在想能不能用 Midjourney 复刻这种效果呢?

    品牌设计工作室 BÜRO UFHO 为 Vogue 设计的 3D 概念艺术项目《Fleur》,图片来源:Fleur on Behance

    有了这个想法后就马上开始动手尝试了,AI 绘画最关键的自然是提示词,所以我先在《Fleur》项目的网页收集到了以下关键词:

    Orchid, translucent iridescent texture, Art Direction, Concept 兰花,半透彩虹色纹理,艺术指导,概念

    众所周知,AI 绘画的一大好处就是有只要有了相似提示词,我们就可以做出和别人一样好的图像,所以我以“3D、透明、玻璃、花、炫彩”为关键词,在 B 站和小红书上搜索是否有别人分享的、能生成类似效果的提示词公式,结果还真找到了 2 组效果比较比较相似的,代入我想要的兰花“orchid”,分别得到以下的结果:

    可以看出两者的效果与我的参考图还是有比较明显的差距的,但是相比之下,参考提示词① 的效果更符合参考图中“玻璃透明质感、炫彩灯光”的特征,所以决定在参考提示词①的基础上进行优化。

    二、提示词测试优化 首先在提示词 ① 的基础上,结合原始参考图的关键特征创作了第 ① 版提示词,发送给Midjourney Bot 进行测试。最终生成的图像中兰花有很好的炫彩渐变光效,但是花朵的质感不像玻璃,更像是金属。

    根据出现的问题,我分析了提示词,发现可能是其中的“metallic(金属的)”干扰了 MJ 对“glass(玻璃)”理解和呈现,于是做了一下调整,形成了第②版提示词:

    将 "Futuristic Orchid (未来感兰花)" 改为“Crystal Orchid(水晶兰花)”,进一步强调花朵晶莹剔透的质感。 优化提示词顺序和结构,将主体关键词放在前面,风格、氛围等零散的关键词放在了末尾。

    在第②版的提示词的图像中,兰花的透明质感虽然增强了,但花瓣的质感不够通透,有一股塑料感。于是我去除了提示词中的 “ inorganic(无机)”这种带有工业感的词语,形成第③版的提示词。

    第③版的效果出来后,发现花瓣的透明质感更好了,但花茎的部分和整体也不太搭。看了效果图发现黑色背景比浅色背景更加好看,于是对提示词是进行了进一步修改,形成了第④版提示词:

    将茎干部分也变成有透明材质,并改为黑色背景 添加了“minimalist 极简”一次使画面更加简单干净。

    第④版的图像整体更加通透简洁,但是炫彩弱了很多,花瓣也看不出来是兰花,整体不够精致,根据这些问题再进行一下调整:

    添加“holographic light effects”强调炫彩光的氛围 添加“Best、professional”等词提升整体的画面质

    调整后的第⑤版提示词虽然让画面光感增强了,但是花朵的质感太单薄,整体也比较花哨,针对的存在的问题继续改进:

    继续优化提示词结构,让“iridescent ”影响兰花整体而非局部;去除对茎干、背景的描述和强调,让兰花成为成为唯一重点强调的部分。 添加“ Professional Floral Art 专业花艺”提升兰花的美感,添加负面提示词“罐子、瓶子、花瓶”,以免这些元素影响兰花主体的呈现 去除意义重复的、没有具体指向的词语,比如 delicate、surreal、light、best 等,以免互相之间造成干扰。 将修改后的提示词发送给 Bot 生成效果图,效果有了明显提升,符合自己想要的效果。

    经过上一步的调整,我发现精简提示词后,图像的生成效果反而更好了,于是决定进步删除一些不重要的名词和修饰词,只留下最重要的,最后得到的图像在构图、细节丰富度和质感上都有了更好的表现。

    到了这一步,3D 炫彩水晶兰花的提示词就基本完成了:

    An iridescent Crystal Orchid::1.2, minimalist, holographic light effects, 3D, Crystal Glitter, Professional Floral Art --no bottles, jars, containers, vases --ar 2:3 --v 5 虹彩水晶兰::1.2,极简主义,全息光效,3D,水晶闪光,专业花卉艺术--没有瓶子,罐子,容器,花瓶--ar 2:3 --v 5

    它也可作为一个基础公式,修改其中关于花或者材质的描述,同样能得到不错的效果:

    三、经验总结 上面为大家展示了如何通过调整提示词,在 Midjourney 中逐步生成自己想要的效果。虽然文章中展示的思路只有七步,但我实际生成的尝试次数不下五六十次,因为 AI 绘画工具的出图效果有非常大的不确定性,一个极小的修改都可能导致画面产生极大的变化,需要不断调整重试。

    通过这次的 AI 绘画的生成试验,我也总结出以下 5 点技巧:

    学会借力。AI 绘画不需要我们从零开始,对于想要生成的内容,可以先通过浏览器搜图、describe 功能反推关键词,或者参考 MJ 官方社区、B 站、小红书上别人分享的提示词,在此基础上生成自己的提示词。 提示词要尽量简练精准,效果重复、无具体意义的词语会互相干扰,并降低 MJ 对关键词语的理解和呈现。而且我们在第一次生成图像时,可以将提示词设置的简单一些,这样一是可以获得更好的效果,二是方便后期根据需要逐步添加。 提示词的顺序和结构非常重要,越靠前的词语对生成效果影响越大,挨在一起的词语更容易被 MJ 归为一体进行理解,大家也可以利用:: 符号进行语义风格和权重调节。 要学会停下反思,如果你发现提示词越调整生成效果越差,一定要马上停下来,翻一下是从哪一步起生成效果变得不对劲的,返回那一步,换个方向重新开始尝试。 警惕 Bot“过热”。在生成的过程中,我发现类似的提示词,生成次数越多效果反而越差,或者换了一个明显不同的提示词,但是生成效果和之前并没有区别,仿佛 Bot 还没有从之前的提示词中回过神来。如果大家也发现这个问题,建议用不一样的新提示词多刷几遍,或者换一个新的频道进行图像生成任务。 这次的生成实验其实是分好几天进行的,中间有好几次推倒重来,但是也收获了很多有用的经验和小技巧,大家在探索的过程中也记得要多尝试,总结出自己的经验技巧。如果喜欢本期分享的话还请大家多多点赞哦,之后会继续为大家推荐更多实用的 AI 绘画实用技巧~

    推荐阅读:

    生成效率翻倍!Midjourney 4大最新参数指令详解 大家好,这里是和你们一起探索 AI 绘画的花生~ 功能超强大的 Midjourney 最近又更新了一些新的功能,比如接连推出的 Describe、Repeat 和 Permutations 三项指令,可以帮助用户更准确快速地获取创意,而且最近还有消息称 Midjourney 已经在进行

    阅读文章 >

    Stable Diffusion自学必看!6款适合小白的零基础免费入门教程 大家好,这里是和你们一起探索 AI 绘画的花生~ 最近优设为大家推荐了不少有关 Midjourney 的教程和资源,不知道大家有没有用起来?

    阅读文章 >

  • 零基础如何轻松制作高保真原型?我不允许还有人不知道这款神器!

    UI交互 2023-04-17
    工欲善其事,必先利其器。对设计师而言,一款优秀的软件不仅能提高设计师的工作效率,也会帮助设计师快速呈现自己的想法,发挥创造力,而不是让灵感囿于复杂的工具无法施展。因此每年我都会关心设计软件的趋势,而在各大设计软件的趋势报告中,UXtools 以其样本量大(从全世界设计师用户中做调研)成为我的首选参考。

    工欲善其事,必先利其器。对设计师而言,一款优秀的软件不仅能提高设计师的工作效率,也会帮助设计师快速呈现自己的想法,发挥创造力,而不是让灵感囿于复杂的工具无法施展。

    因此每年我都会关心设计软件的趋势,而在各大设计软件的趋势报告中,UXtools 以其样本量大(从全世界设计师用户中做调研)成为我的首选参考。

    就在UXtools发布不久的这份全新设计工具报告中,我意外地发现了一匹黑马,看到排名时着实让我心里诧异:

    原型设计 软件对比中,评分最高的竟然是一款名为 ProtoPie 的软件。

    而在高级原型软件的统计中,ProtoPie 更是一骑绝尘,成为设计高保真原型的必选项。

    这款原型设计软件究竟有何亮点?凭什么成为高保真原型设计的龙头软件?在我深度体验后,我不得不说,它配得上这份荣誉。

    Protopie 官网 ? https://www.protopie.cn/

    下面来详细聊聊它的亮点。

    1. 无需代码基础,像搭积木一样轻松上手 卧槽!

    这是我打开ProtoPie 官网的第一个想法,与别的网站不同,首屏没有大篇幅的堆叠亮点,只有一个有趣的互动:30秒制作地图缩放原型。

    5个步骤,你就能轻松制作出一个地图缩放的原型。这无比丝滑的体验和小朋友都能学会的操作,以及最后出现的酷炫原型,甚至让我有点恍惚,这是玩游戏还是做原型?

    而这,也是ProtoPie 引以为豪的独家概念模型: 交互=对象+触发动作+反应动作。

    顾名思义,任何复杂的交互都可以拆分成这3步,为了实现这个功能,ProtoPie 还创造了其独有的「交互周期表」,表格由触发动作和反应动作组成,制作原型时只需将两者搭配使用,就可以轻松创造任意形式的交互。

    这难度和搭积木一比,似乎还更加简单?

    2. 教程全面,服务贴心 尽管操作已经简单到极致了,ProtoPie还是担心设计师上手不够快,为此编撰了一个详细的 用户使用手册 。

    B站也有ProtoPie的中文教程( 101系列中文课程 ),总之对设计师而言,你完全不用担心高保真原型的制作难度,它远比你想象的还要简单。

    除了基础教程,我发现ProtoPie 也会经常做线上的工作坊( https://space.bilibili.com/602451792 ),从入门教程到进阶的交互逻辑和真实案例讲解应有尽有,合计40多篇视频教程,针对企业端用户还配备了专属的定制培训和服务经理。对个人用户体验友好,对企业用户服务升级,这大概就是它口碑天花板的原因。

    3. 独家功能:支持软硬件交互 如果说3步做原型是ProtoPie的独家特色,那多硬件平台的高保真原型制作,就是它的大杀器了,对比其他原型软件,堪称降维打击。

    原谅我直接复制官网的一句话: 不要让硬件限制了你的设计。

    这句话给我的震惊程度,不亚于“别让显卡限制了你的渲染速度”。是什么样的功能,才会让它有勇气说出这句话?

    然后我就看到了演示案例,是的,ProtoPie 丝毫没夸大。

    ProtoPie 不仅可以让汽车设计师的想法在短时间内带入真实场景,甚至可以将物理的按钮与屏幕的数据联系起来:

    针对车载交互,它还能直接通过汽车的OBD端口收集数据,将车载交互中的实际数据运用到原型制作中,还可以创建车载语音交互原型,让设计师拥有沉浸式的体验。

    这两年新能源汽车和国产汽车急速兴起,HMI设计也逐渐成为大家关注学习的内容,这样一个汽车交互原型神器,相信未来会成为各大汽车厂家的标配。(虽然现在已经是宝马、奥迪等大厂的御用原型制作工具了)

    除了车载交互,ProtoPie 在智能手表、游戏交互、智能电视等硬件,也做了专门的优化,用一句话概括就是: 别让你的原型,只停留在脑海里。

    手表交互原型

    游戏交互原型

    智能电视交互原型

    看完上面这些令人瞠目结舌的演示案例,别惊讶,接下来要聊的,正是这些案例涉及到的,ProtoPie 独家的核心技术。

    4. 能创建音交互原型,还支持手势/眼动跟踪 在上面的案例里,你可以看到汽车的跨屏幕交互、汽车油门与显示数值变化的软硬件交互,但ProtoPie 的技术远不止于此,你还可以创建语音交互原型(支持52种语言包括中文),甚至你还可以借助Socket.IO和ProtoPie Connect,让手势/头部识别和眼动跟踪从想象变成现实。

    别忘了,所有这些看起来极其酷炫的交互原型,都不需要设计师掌握任何编程基础就可以完成。

    除了强大的高保真原型制作功能,ProtoPie 在提高设计师效率的细节体验上也可圈可点。

    5. 轻松预览,自动生成交互开发文档功能 除了支持双系统(Win&Mac),ProtoPie还支持Figma、Sketch和Adobe XD等平台导入,只需安装插件即可。预览原型也非常方便,通过ProtoPie Playe 就可以轻松预览。

    但真正值得拎出来讲的,还是它贴心的自动生成交互开发文档功能,设计师录制好交互部分给到开发小哥,工程师可以通过开发文档直观查看交互动作的数值(如持续时长、延迟、运动方式等)和图层信息。

    案例演示 ? https://cloud.protopie.io/p/f53cf5733b/r/c4121801

    团队交互组件库也是ProtoPie 为了提高团队协作效率特意开发的功能,设计师不仅可以创建个人组件库和团队组件库,也可以直接参考公共组件库(Material Design和iOS组件库等)。团队组件库可以邀请多人共同编辑,Sketch 热门的编组功能也有,批量修改极其方便。

    由于ProtoPie 已经和全世界许多大公司(Meta、Google、微软等)有深度合作,所以在企业端,他们也下足了功夫,除了开头提到的定制培训,针对企业的安全性需求,他们也提供了2种服务器版本:

    本地服务器:安装到公司自家服务器,即使是ProtoPie 内部人员都无法访问,安全度最高,适合中大团队。 私有云:AWS(亚马逊云服务)上为客户独立划分出来的空间,也可保证信息的安全。安装流程简洁快速,适合小团队。 对于对保密性要求极高的车企以及各个B端企业,这个服务应该是雪中送炭了。

    结语 絮絮叨叨说了很多,但依然无法完整覆盖到这款交互原型神器的许多实用功能,它究竟有多强大,还得大家自己探索。但我敢打包票,这是一款你用了就回不去的软件。

    ProtoPie 官网 ? https://www.protopie.cn/

    有任何软件的使用问题也可以添加官方的中国区经理咨询:

  • 交互设计师是否会被取代?来看网易高手的深入分析!

    UI交互 2023-04-17
    工作中经常有人聊起交互跟产品的差别是什么?交互跟 UI 的差别是什么?似乎从入行至今,都一直有过这样的声音。

    工作中经常有人聊起交互跟产品的差别是什么?交互跟 UI 的差别是什么?似乎从入行至今,都一直有过这样的声音。互联网红利期的逐步消退,资本紧缩,压缩人力成本似乎成了一件趋之若鹜的事,所以早年阿里提出了全栈设计师、全栈工程师的概念,但本质上各种细分岗位的工作一直都存在,从未消失过,只不过以不同的形式被平摊了,但效果却难以说是好的。下面将去抛砖引玉的探讨 交互设计 价值点,并聊聊能否被兼并或取代。

    更多职场干货:

    大厂资深设计师:为什么我们不会被 AI 取代? 「从技能维度分析,你会 UI/UX 设计吗?

    阅读文章 >

    一、先谈谈交互在做什么? 借用一句传统设计行业的经典语录,一个好的产品一定是“有用的、好用的、用过还想用的”,有用的主要由产品经理把控,而好用、用过是否还想用就是交互设计的职责和价值了。工作内容,交互大概可以总结为下面这几点

    是针对行为的设计,让原本的物理逻辑向用户行为逻辑转化 平衡业务价值和用户价值,脑海中永远不要忘记“用户价值”这几个字 以目标为导向,保证产品贴合用户心智,用户能更好的理解、使用产品,并获得愉悦的使用体验 是通过功能架构向信息架构的重组,提升产品框架的扩展性、稳定性等,交互更多的考虑到在不同场景下对可用性的要求,让产品能长久持续的使用下去 是对使用流程设计 数据分析和用户研究相关的工作,这两者是交互展开工作的基础支撑 交互的价值是长期的和可持续的,没有交互,短期内看似不会出现问题,长期来看,对用户留存、用户满意度等会有重大影响,市场环境不同于垄断环境,功能堆砌过多后甚至都无法再动摇产品“难用”这个印象,但凡有类似竞品,放弃产品可能性较大

    二、交互设计的产出物特点 交互稿与产品原型稿有什么差别?

    这可能很多人关心、疑惑的问题了,本质上这个也是交互稿专业度的问题。产品经理也可以去画原型图,那问题在哪儿?下面会尝试阐述几点重要差别。当然并不排除极少数优秀、能力全面的产品能内外兼修。

    1. 从内到外的逻辑思维差异

    行为逻辑是交互设计师思考的出发点,也是交互设计方式能否取得创新的关键点。物理逻辑或者业务逻辑是产品经理更关注的要点,交互设计需要具备丰富的同理心,产品功能不同、用户不同、场景不同都会影响到用户使用时的感受和操作行为。简单来说,交互设计师更多的站在用户角度去思考原型的价值,是否容易被理解、好用甚至转化,而产品的角度不可避免的会更多考虑业务、技术实现等方面,一个人做到面面俱到,是极其难且思维是很容易固化的,长期形成的思维差异会直接在原型图中表现,最终影响到产品可用性。

    以 QQ 音乐几年前的版本(2017)和现版本(2021)为例,左侧过往版本在首页的信息组织形式上主要以分类的方式,而右侧现版本中信息的组织形式中首页的分类方式已经很弱了,基本倾向于按用户行为、需求去组织,比如根据用户过往听过的歌曲去推荐歌曲、歌单,每日 30 曲更是研究了用户每日习惯、耐心做的信息整合,30 首怎么得来的?根据什么样的歌曲去推荐?这些都是行为研究的范畴,需要对用户深度了解后方有最好的解决方案。

    2. 设计范式的积累与创新

    设计范式是交互设计师基本功的体现,包含设计规范和模块范式两个方面。设计规范是设计范式中的基础,对规范的理解和创新也是衡量专业度最基础的方面,这对原型稿是否成熟有很大关系,现有的交互规范大多基于 iOS、Material design、微软设计规范的基础上优化的,国内比较流行的设计规范还有 Ant design 等,本文不对此做过多讨论,这里重点谈谈设计范式。

    范式,指用户在长期对于互联网产品使用过程中产生的用户心智,比如用户对设置模块的预期、对个人信息模块的预期等。也可以理解为对于不同产品功能模块的记忆,设计时需要非常熟练的从脑海中调用,这样做的好处是不容易太偏离用户长期积累的心智,熟练应用范式是创新的前提。

    比如表格编辑器的设计范式,不管是现在的飞书、谷歌文档、钉钉、石墨等协同办公产品,都在 20 年前微软 office 的 ribbon 设计模式中兜兜转转,尤其是表格编辑器,在长期的使用过程中记类的习惯是很难轻易被改变的,笔者亲身经历过一款表格编辑器产品的迭代,易用性(易操作、易学、易见)中易学性指标评分是最高的,现在想起来也跟行业范式接近不无关系。另外关于一些编辑器右键操作、键盘操作快捷键是否满足了用户需求都是极其重要的。不过办公类产品发展到现在已不再像 20 年前纯工具类属性了,协同属性必将带来编辑器再一次的创新。

    设计范式需要长期的积累,对范式理解不够深入,通常是要么画不出来可用的原型,要么画出来的原型会被问到一个问题——“这个。。。看起来有点说不出来的奇怪”。在理解了基础范式之后,我们才能做出真正的创新,虽然近两年交互形式越来越稳定,但真正理解了范式之后的创新也能帮助产品快速占领用户心智,形成特定印象,继而占领市场。设计范式并非不可创新,而是在不必要的时候尽量遵循范式能最大限度去降本增效,减少不必要的用户误解或开发成本。

    3. 多端设计交互方式

    如果不是潜心研究过多端设计差异,一般很容易出问题。比如 PC 端和 Mobile 端、小程序与 App 等,在设计方法上都存在巨大差异,我亲眼见过太多的产品原型稿中出现过 Mobile 的设计方法运用到 PC,或者 PC 应用到了 Mobile。

    比如基本的差异点有:

    Mobile 的用户行为多为单线任务,而 PC 是多线任务,比如 pc 可以多窗口很便捷的切换,用户可以一边聊天一边收邮件 Mobile 端用户操作时间更加碎片化,PC 操作时间更加系统、专一 PC 的界面也远大于 Mobile,导致信息结构差异较大 两者交互事件也存在很大差别,PC 可以针对对象进行 hover,多上下滚动,少左右滑动(依据鼠标特性)等。 设计控件的规范差异较大 本文并不详细赘述差异点,总的来说,这些差异点在具体的原型稿设计中会体现的比较明显,这些也是专业性的一个方面。下面将举 2 个例子来说明:

    (1)树状结构

    树状结构是一个 PC 端经常应用的控件,适用于层级结构的展示、选择等交互操作,高效而清晰,但其在移动端展示时却不能照搬,由于屏幕、移动端手指交互等限制,在移动端该控件既不高效也不清晰。比如常见的将文件移动到文件夹的操作,桌面端的交互可以用树状结构,而移动端更适合层级结构

    (2)面包屑导航

    面包屑在桌面端是一个非常普遍的控件,可以有效的承载层级关系展示、快速导航定位的功能,比如不同层级的文件夹展示与导航等。但在移动端,因为屏幕大小、移动端用户操作碎片化等原因,导致用户对面包屑节点的记忆、层级操作上都远不如桌面端,甚至会影响到信息的展示效率,因此移动端在层级关系的展示与切换上通常不会用面包屑,而是左上角返回按钮或系统级别的返回。当然面包屑在移动端也并非一无是处,如果面包屑各节点承载的展示作用具备极强的参考意义,比如这些文件夹节点同时承载着组织关系的显示,则面包屑也还是可以用的

    总结下来:面包屑在移动端尽量别用,但如果其各层级节点同时有极强的参考意义,则可用

    4. 方法论的掌握和运用

    方法论在交互稿中的体现是比较隐晦的,准确来说,这一点是针对思维差异点的补充,如交互设计十原则、“F 型”页面设计理论(近几年有争议)等视觉动线,也包含发现问题的一些方法,比如 KANO 模型、用户体验地图、卡片分类等方法论的应用,这些对于用户行为维度的研究结果也会支撑着交互稿的科学性,这里不做展开阐述

    比如用户体验模型示意图如下,用户体验模型是建立在用户角色模型之上的,前提是需要大量的用户深度访谈资料为基础,用以系统、全面、科学的研究用户行为和探索用户需求。

    用户体验地图

    除了以上列举出来的,还有一项重要的方法是数据分析,这一点是容易被轻视的,但确是最具备参考价值和衡量工作结果的,交互关注的数据和产品有很多差异,具体一点,比如对于一个项目中,产品更多关注的是衡量功能结果的数据,通常包含使用数据 PV/UV、转化率等,而设计师更多关注 CTR、停留时长、转化漏斗中跟操作行为相关的数据,行为是交互研究的对象,所以行为数据结果能为具体的方案设计提供衡量指标

    5. 交互稿中的 UI 考量

    简单来说,就是不能给 UI 挖坑,没有交互的设计,UI 上与产品之间的沟通会非常频繁,也主要会出现以下几个常见问题。

    (1)信息结构与优先级的落地

    信息布局既需要考虑功能的业务优先级,也需要考虑用户行为优先级,同时还需要考虑到 UI 排版的难度。这中间基本都会有矛盾存在,做好平衡是必备技能。有时候需要逼着产品给出功能优先级,排版是有限的,也有一定审美要求的专业度,交互稿需要为 UI 规避一些明显的坑,比如最典型的例子——功能都很重要、文案过长等,当产品同学也不确定自己所画功能是否能被用户理解、操作的时候,会喜欢用文案去进行解释,比如button上写10个字这种,交互需要给UI提前做避坑

    (2)规范

    设计是一个系统,任何需求在画交互稿时都应考虑到对系统的适应或冲击,这就要求交互设计师不仅要非常熟悉设计系统,而且必须是系统的制作人之一,设计系统是一项耗时耗力的工作,前期耐心打磨,后期适应、修改,如此才能把握住用户体验的一致性。

    (3)边界情况

    主要包含用户交互中与前端、服务端的交互,比如操作事件的定义、反馈;加载的形式与技术方案;空状态;弱网、断网等等,这些边界页面的考虑都定义清楚,能有效避免 UI 的返工

    (4)保真度与实现效果

    交互稿如果保真度较低,会导致 UI 在实际设计的时候对交互稿修改较大,导致页面架构、交互注释等返工修改,造成不必要的时间资源浪费,也会对项目进度造成影响。一般来说,成熟的交互稿是比较接近 UI 稿而又不是 UI 稿的一种状态,将 UI 中的坑避免之后,UI 设计师需要做的就是更表现层的设计,比如与前端工程师的实现匹配、色彩、栅格、间距、字体字号等等。

    6. 详尽的 Use Case 考量

    Use Case(用例)指功能、交互的定义和详细描述,用例描述的细节程度决定开发时反复沟通的频率,具体包含的细节很多,大到功能流程的设计,小到某个交互事件的定义和枚举;从前端用户与系统的交互事件,到服务端与前端的功能联动等,都涉及到,总之,只要用户看到的、点击/滑动/hover 等交互行为涵盖到的,都应该被定义,以期减少开发过程中遇到的问题和沟通成本,这里不做过多阐述。

    五、交互稿背后的价值 交互设计只是画稿子的吗?

    显然不是!如果说一个项目交互阶段持续了 3 天,那绘制交互稿最多能花费 1 天。

    交互是一个横向能力比较高的职业,很多交互设计师也改行去做了产品、用研或者 UI,所以多多少少都会具备这几者的一些技能。交互设计师通常会有多重隐藏的技能是必须掌握的

    1. 项目中坚守用户价值

    用户价值在项目中很容易就让步于业务价值、项目排期、技术方案等,交互就是在这中间说“不”的人,润物细无声,在每个项目中尽量减少用户价值的损耗,最后汇聚而成的产品整体体验还是有很大差别的。

    2. 团队中承担用户研究、行为数据的部分工作

    交互在组织架构上,一般是会归属于设计部门的,所以在部门中也承担了一线跟用户和数据接触的人,即便有数据分析师、用研同学的帮助,也需要有主动跟踪这些问题的意识,不然设计出来的交互稿很难不出问题。

    3. 可用性测试等结果追踪

    可用性测试在一些稍大的项目中是体验设计环节中的定性维度核验步骤,需要结合用户反馈对方案进行可用、好用测试,并不是指在流程上能跑通的技术测试,而是校验用户对于方案的接受程度、满意程度,也顺便发现一些问题,后续进行优化。

    更多的结果追踪形式,比如还有 SUS 可用性量表(B 端产品可用阿里云 UES 量表等)、用户满意度、NPS 跟踪等等,目的在于定量的给用户体验打分,确保用户体验的衡量是有章可循的

    易用性量表

    4. 直接驱动业务增长

    增长黑客和用户增长设计的概念前几年也已在业内为大家所熟知,AARRR 增长模型(获客、激活、转化、留存、推荐/传播)中,交互可依赖对用户的了解和用户行为的洞察,通过比如文案、微动效、转化漏斗优化、信息梳理、布局设计等,也可以帮助业务在各阶段直接提升对应的业务指标,甚至将体验设计师熟悉的体验地图转化绘制为用户增长地图,在用户使用的全链路行为节点做设计所擅长的增长赋能。

    5. 项目流程管理

    交互需要更早的参与到需求中,在需求出现之前的交互参与能让需求更加合理,而在交互稿画完之后,也需要实时的去跟进 UI、开发,有一些技术难题需要跟开发密切合作,开发说“”实现不了”是经常碰到的一句话,那是否是真的实现不了,可能跟不同的团队、人、项目排期有关了,有时候并不是真的实现不了,或许只是开发不想做或者他之前没做过,这个就需要 PK 了,当然有的真的很难实现或者性价比很低的设计,就需要对交互稿进行调整了。除此之外,有的公司还要求交互有整体管理能力,这就另说了。

    五、没有交互会带来什么? 产品团队或许不都有交互岗位,但不可以没有好的交互设计!

    1. 短期内产品使用体验很奇怪

    很多人画出来的原型稿甚至是交互稿都遇到过“用起来很奇怪”这个问题,其实是因为设计者对用户心智、用户行为、控件规范、产品范式等的不熟悉造成的这个问题,一个“夹生”的东西即便逻辑合理也必然会带来“夹生”的体验。此外,范式和规范的使用只是执行时的一个选择而已,对某规范的使用未必真正解决当前场景下的问题,交互设计师更多的是通过对业务的梳理、用户的洞察来做选交互范式和规范的筛选,找到合适的,才能价值最大化。

    2. 长期下产品“难用”印象的形成

    任何行业,任何产品,产品研发者可能都不是实际使用者,术业有专攻,对用户的理解是一项长期经验积累的过程,合乎逻辑的,不一定是易用的,易用的不一定是好用的。笔者的经验来看,用户的使用行为既是“傻”的,也是孕育着无穷无尽智慧的,尤其是 B 端产品,用户使用的方式可能超乎想象。因此对用户行为理解的深度决定了产品与用户之间的默契度,围绕一个痛点市场上总不至于只有一个产品,如何让你的产品成为用户真正的朋友,需要有专业的人来研究用户行为,交互这个专业便也是因此而生的。

    如今互联网红利愈发消失殆尽,或许由于资金原因交互岗位并没有存在于所有公司或团队,但交互设计的专业度一定永远存在,岗位的横向兼并融合并不能磨灭交互的专业度,因为交互坚守的是用户体验的底线,让产品变得或好用、或高效,最终驱动业可持续增长,便是这最大的价值!

  • 以设计师的身份窥见世界:优设专访李沃耕(一)

    UI交互 2023-04-17
    中央美术学院毕业的李沃耕,从帮助故宫设计出第一款网红文创类产品,到自主创业成为CEO,再到投身于游戏公司,打造出数款成功产品,他是如何实现多栖发展的?又有哪些管理团队的实用方法?对于当下热门的AI,他的看法是什么?

    中央美术学院毕业的李沃耕,从帮助故宫设计出第一款网红文创类产品,到自主创业成为CEO,再到投身于游戏公司,打造出数款成功产品,他是如何实现多栖发展的?又有哪些管理团队的实用方法?对于当下热门的AI,他的看法是什么? 优设专访 为你一一揭秘。

    往期专访:

    优设专访!网易灵犀设计总监常雅莉的12年设计路 我工作经验相对比较简单。

    阅读文章 >

    1. 当初是什么原因促使您选择设计专业? 其实我很早就开始学画画,可能比大多数的设计师都要更早地涉及绘画学习,后来我就读于美院附中,接受了四年的绘画教育,当时设计行业还不是很普及,但是我高中时的专业课老师告诉我,做纯艺术很难赚钱,走这条路看不到希望,这成为我关注到设计行业的契机。但真正让我踏足设计专业的,还是后来我对设计产生了真正的兴趣,在绘画学习的过程中不断了解自己,发现自己思维更偏理性分析,造型艺术需要饱满的情绪表达,而理性可能更加适合设计专业。

    2. 您参与过3款热门文创类APP的设计,能否聊聊详细经过? 《胤禛美人图》是故宫博物院的首款APP产品,先说说我和故宫博物院的渊源。

    在2011年,我还在美院工作,当时移动应用市场还处于非常早期的阶段,iPhone发布仅有4年时间,iPad也刚刚问世。那时候我非常渴望在这个领域做出一些成绩。所以开发了一款名为“中国古典家具”的iPad应用,介绍中国传统的明清家具。因为那时刚刚毕业,这也是我做的第一款APP,所以我对它的期望并不是很高,然而它的反响却出乎意料的好,迅速地获得了广泛的认可和好评。在发布的第二天,我就被人们叫醒,告诉我这个APP非常火爆。

    《中国古典家具》App在苹果官网,作为第一代iPad Mini的精选示范应用

    第二天晚上,这款软件就已经进了AppStore的免费排行榜,我当时觉得很神奇,但心想可能就到此为止了,但是它却不可思议地继续上涨,到第三天时已经成为免费榜的第一名,而且接下来的数天一直保持在榜首。

    同时,这个应用还获得了App Store的首页推荐,在应用商店的头图上置顶展示了一周,当时许多游戏公司都想获得这个推荐却无法实现,还来询问我是怎么做到的。此外,《中国古典家具》还获得了苹果App Store2012年度最佳应用的奖项。

    《中国古典家具》应用占据榜首数天时间

    由于当时这个APP已经成为一个相当有名的产品,故宫博物院也注意到了它,后来故宫博物院负责数字化建设的同学就联系了美院,询问是否有兴趣协助故宫开发一款APP,主题是“胤禛美人图”,也就是关于雍正皇帝12个妃子,每位妃子都有一个独特的画像,故宫想要展示这些画像。

    在开发这个项目时,最大的挑战是如何从公众的角度介绍12张美人图,以前博物馆通常只是用平铺直叙的方式介绍文物,这种方式非常单调,不被大众接受,这也是博物馆和大众有距离感的原因。如果想让用户理解12张美人图的艺术价值,仅仅单纯展示就没有太多意义。因为我去过故宫很多次,发现观赏故宫展品的游客多数都是匆匆忙忙的,在每个作品前只会停留几秒钟。走马观花看下来,实际上什么也没看到。因此,我的想法是打破这个屏障,以一种大众喜闻乐见的方式展示这些文物,让作品与用户互动,让用户真正沉浸在里面,借助用户主动探索的过程让观众潜移默化的探究这些文物。

    《胤禛美人图》中的小动画彩蛋

    所以我把画里很多有趣的看点,加上了非常微妙的小动画,让用户能够发现埋藏在工笔画里面的故事。用户会像找不同一样去寻找画中隐藏的彩蛋,并乐此不疲。同时还对这12张美人图进行了二次包装,强调了季节的含义,使每三张图代表一个季节,这些都是从用户的角度出发,衍生出的创意,通过从非学术的角度挖掘这些文物的可能性,并用视觉形式来二次包装它们。这都是当时采用的一些方法,现在看起来这些点子可能并没什么新奇,但在当时非常的有效。后来故宫的很多宣传口径也使用了这些方法,从一个严肃的博物馆,转变成了一个网红博物馆。

    比如后来在微博上很火的乾隆剪刀手的动画,就与之有关。可以说《胤禛美人图》让一个非常严肃的博物馆打开了新的想象力,让博物馆的运营人员从传统的学术语境中跳脱出来,以一个大众化的角度向用户讲述故宫的故事。这个事情让故宫意识到原来可以有这样一个角度去跟观众沟通。

    回想起来,我意识到当时分析问题的方法,就是现在用户体验设计理念的关键方法论。尽管在那个时候行业还没有形成清晰的方法论共识,但《胤禛美人图》从朴实的角度出发,分析用户需求、解决问题并给用户带来惊喜,一步步引导用户深入产品,并因此收获了大家的喜爱。

    公司黄色的“白板”,此图为《胤禛美人图》的概念设计阶段

    这个项目对我来说,最大的成就是它具有巨大的社会价值。《胤禛美人图》是故宫馆藏中非常重要的藏品,平时展出次数寥寥无几。即使展出,其覆盖的观众也很有限,可能只有几万人。但通过将其制作成APP,它的覆盖面大大扩展,下载量能够达到五六十万甚至更多。普通观众把玩APP甚至比看到原作更为触动内心,后来很多人说“故宫出品,必属精品”,就是起源于对这款APP的评价。

    另外一个收获我认为可能更值得与大家分享,这个APP的成功对我内心产生了深刻的触动,即设计的价值可以被公众认可。在我上学时曾看过乔布斯的一次访谈,他提到设计iPhone的经历,因为iPhone当时属于异类,所以在2007年发布时,许多人都嘲笑它,认为它不可能成功,给出了很多理由,如不符合用户使用习惯等等。但我记得很清楚,乔布斯最后说,当他看到iPhone的销售数据时,他意识到iPhone的成功并不是商业上的成功,而是美妙设计的成功,这款APP证明了美好的东西终究会被用户发现,这是对设计师最大的褒奖。

    但作为一个设计师,当你真正参与到设计工作中时,你会发现,绝大多数的产品都不会成功。这可能有些悲观,但这确实是设计师的常态,即使设计非常出色,但它由于各种原因就是不被公众所认可,很多人也因此受挫而动摇,而我比较幸运,在我设计了这些APP产品后,发现就像乔布斯所说的,如果产品真的很棒,用户终究会发现它的美好并予以认可。“美妙的东西终究会被用户发现”这种信念帮助我在早期的设计生涯中保持了对设计的热情,支撑我努力工作到现在。

    三款文创类 APP 分别获得了 3 次 App Store 年度最佳应用奖

    《胤禛美人图》和之后与故宫合作的《清代皇帝服饰》分别获得2013、2015年App Store的年度最佳应用,加上之前的《中国古典家具》,我拿到过三次苹果公司评选的年度最佳应用大奖,这点是极少设计师可以做到的,此外还两度获得了DFA亚洲最具影响力大奖。《清代皇帝服饰》最终还转化成了故宫数字馆的展品,在故宫的端门常驻展出,这些为我的职业生涯建立了充分的自信,也为这段文创APP生涯画上了完美的句号。

    坐落在故宫端门的数字馆,展出清代皇帝服饰的相关的数字内容

    3. 能讲讲学习阶段的故事吗? 说来话长,2005年我考入了中央美术学院。当时隐约意识到交互设计需要较强的逻辑能力,而我恰好是一个相对理性的人,所以很自然的,就对交互设计产生了兴趣。虽然那时候交互设计在国内还处于非常早期的阶段,很多设计师还没有关注到这个领域,但我对它一直有很强的执念。2006年,我正式决定成为一名交互设计师,开始了这个方向的系统学习。当时这个领域在国内的公司里还是非常小众和原始的,我的同学中也只有两三个人对这个领域感兴趣,其他同学仍然在做传统的纸媒方向。

    2009 年毕业设计课题,为荷兰银行设计新的 ATM 系统界面

    记得在做毕业设计时,只有我和零星几位同学选择了交互设计方向,现在这个领域已经变得炙手可热,超过一半的学生都在做交互设计。我的毕业设计虽然归类为平面设计系,但却仍然得到了很高的评价,并入选了中央美院的千里之行展,我认为这是一个转变,因为我没有被视为异类。后来因为在交互这块儿做的不错,加上一些机缘巧合,我就在学校工作了很长时间,这期间也辅导了很多同学交互方向的毕业设计。

    毕业设计采用了当时颇为时髦的触摸屏设备,并搭建了一个仿真的 ATM 机使用环境

    4. 您认为当下设计专业的学生应该怎样学习,做好哪些准备? 因为我已经离开学校有一段时间了,我的认知和经验可能与学生生活相去甚远。但我仍然可以从职业的角度谈一下这个问题。我认为,现在很多大学的设计教育过于概念性,缺乏对现实的关注,我觉得这是一个比较大的问题。因为学院一直倡导要培养未来的设计人才,但如果只是停留在对未来的幻想或畅想,那么就缺乏实际意义。只有立足于当下,解决好此时此刻这个世界正在发生的事情,才有可能培养出真正具有未来视野的设计师,因为没有人能坐在教室里对未来进行预言。

    回到问题,我做了很长时间的设计管理工作,接触了各种类型的设计师,目睹了他们所面临的各种问题以及职业发展的困境。因此,很能体会设计师在职场中的困惑,因为我曾陪伴他们一起成长。

    从现在的角度回看设计师的成长历程,我会觉得技术和技巧并不重要,甚至更夸张的是,在学校里非常重要的一些设计方法论、美学知识、排版技巧等,现在看来也不是那么重要了。当然,我并不是说这些专业知识不需要学习和掌握。我的意思是,真正支撑一个设计师做出优秀作品,并持续在这个行业里奋斗的动力是什么?难道只是在课堂上学会了如何设计字体、如何搭配颜色吗?我现在觉得这些知识其实非常的脆弱,甚至不堪一击。

    2007年在中央美院与同学的合影,正中间是王敏教授

    回想起来,对我而言,真正支撑我往前走的力量来自我的导师和他给我讲的故事。我的导师王敏教授当时是中央美术学院设计学院的院长,他在美国学习和工作多年,曾任教于耶鲁大学,担任过Adobe公司的艺术总监,是上世纪硅谷创业浪潮的亲历者。在我跟他学习时,他讲述自己在设计方面的亲身经历,比如他访问皮克斯时,目睹史蒂夫·乔布斯与导演讨论工作的情景,他如何追求细节等等,这些故事让我受益匪浅。

    王敏老师还跟我讲苹果早期Macintosh的设计,他说乔布斯把所有参与者的名字刻在机箱内部,并要求机箱内部也要和外观一样整洁,甚至线路板的排线也要非常美观。包括乔布斯做Next电脑时,要求电脑必须是一个完美的正立方体等等。这些故事对我有着巨大的触动,因为它们不是来自于报道或自传,而是来自我的导师和他朋友的亲身经历,这些事情就像是发生在身边一样。

    早期的 Macintosh 内部刻有研发人员的名字,Steve Jobs 的名字在中间偏上的位置

    这些故事讲述了过去的设计师,甚至可以称为设计大师,他们对设计的态度以及他们的追求。这些故事具有长期价值,能激励我在职业生涯受到挫折时仍然坚信设计的意义。但是我发现我的团队里很多设计师并不缺乏设计技能,而是缺乏对设计的信念。我经常看到一些设计师中途退出,或者在经历某些挫折后,开始怀疑设计的价值和在商业竞争中的重要性。一旦这种怀疑建立起来,就会深刻地改变设计师的职业轨迹,许多人在中途放弃了,或者越来越迷失。我认为,缺乏榜样的力量以及由此激发出的信念是一个相当重要的原因。因此,如果你问大学生应该做哪些准备,我认为最重要的是如何让自己爱上设计并真正体会其中的价值,就像我经历的一切让我对设计产生了敬畏之情,也让我意识到设计的价值在哪里,在此我希望再次感谢我的导师王敏教授。

    对许多学生而言,从长远看,他们应该思考如何在设计行业中寻找到属于自己的真正价值,而不是仅仅考虑毕业后三五年内晋升为小组长或艺术总监,当然,这是一个伴随着煎熬和彷徨的长期过程。

    5. 您之前还负责过奔驰的中控系统设计,能否聊聊车载设计行业? 奔驰中控系统设计是个很有趣的项目,大概是2012年,受戴姆勒集团的邀请,在中央美院的交互设计实验室开始做这类前瞻性的设计。当时对于车载系统的设想还很模糊,而那时车里最常被使用的交互设备其实是收音机。即使有屏幕,也只是很有限的一小块,功能非常单调。甚至那时特斯拉还没有出圈,所以当时还把特斯拉的照片放在提案PPT里大肆的批判,认为它们只是简单把屏幕放大了,并没有对车机交互做深度探索,没想到最后特斯拉大放异彩,现在回想起来是挺有趣的一件事了。

    在这个项目中,我提出了一个重要的设计理念,即“在合适的语境下进行设计”,这个理念最终变成了我本人的重要设计原则。在上大学的时候,老师也一直强调类似的观点,比如设计一张海报,仅仅在电脑上看是没有用的,老师会建议我把它打印出来,再去审视这张海报做得怎么样,因为这样更真实,等我打印出来之后,老师又告诉我,这样还不够,那到底什么才算是真正的真实呢?就是我要把海报放在它所应该存在的环境/语境中,才能真正评估它的效果。举个例子,当你做了一张学校宣传栏的海报,在定稿前要先小范围张贴在公告栏里。这时你对这张海报会有一个全新的认知,因为中午学生吃完饭后,围在海报前的人很多,许多人的头会挡住海报下面1/3的部分影响后面的人阅读,因此你得出结论,不能在海报下面1/3处放置重要信息,这就是真实环境对设计产生的影响。

    在中央美院的交互设计实验室讨论车载系统的设计

    在做这个车载系统设计时,一开始我的团队成员也有模有样做头脑风暴,在白板上画草图和方案。但我意识到这种方法不行,既然这个设计是为车载设备而做,那么在白板上画图并不是最佳工作方式。因此,我决定制作一个模拟汽车中控台的白板,一个尺寸和弧度都和奔驰S系车型一样的“弧形白板”,之后团队在这个模拟环境中完成了所有的讨论和线框图设计工作。这种设计方法为我的工作带来了很多新的启发。最终,这个项目将整个弧形部分制作成屏幕的形式,这正是由于在实验室里建立了一个仿真的汽车环境,只有在这个真实的环境中进行设计工作,才能得出真正特别的答案。

    因此,这让我明白,设计必须在合适的语境下进行,即设计最终的应用环境才是左右设计方向的决定性因素,包括头脑风暴最好都在这个环境中进行。这个理念对我后续的设计生涯产生了深远的影响。比如团队里很多设计师会认为把icon画完就可以了,但实际上应该将icon放在实际UI中加以审视,因为界面整体的色调、文字量和排版都会对图标产生影响。所以我会告诉设计师,任何设计工作都不能简单地理解为物品本身的美观度。实际上,所有设计工作的目标都不是物品本身,而是物品与周围环境之间的关系。就像佩戴眼镜,人们通常不会单独说某款眼镜很好看,而是说这款眼镜和你很搭,其实潜台词是同款眼镜在别人的脸上可能会变丑,在这个例子里,眼镜就是被设计的物品,而你的面孔就是环境/语境,所以设计永远都不是孤立存在的,环境/语境最终决定设计的成功与否。

    在奔驰项目中,也取得了一些学术成果。其中最重要的成果之一,是对汽车内部的阅读环境进行了基本的定义,包括主动交互和被动交互的概念,这些概念是我当时发明的新词儿,对奔驰的设计理念产生了较大的影响。

    传统的汽车设计方法沿用了电脑屏幕上的操作逻辑,这种逻辑的基本特征是,当用户在使用电脑时,会产生一个需求并进行相关操作,然后电脑给出反馈,用户再进行浏览。这种流程被称为主动交互,现在的许多汽车依然采用这种信息架构设计。

    中控系统的概念设计,完成于 2012 年

    然而我提出了另外一种观点,车载系统应该主要使用“被动交互”模式,什么叫被动交互呢?比如听收音机或听歌就相对安全,因为这些信息是主动推送给驾驶员的,不需要分散注意力去主动获取、筛选这些信息。如果车载系统的屏幕只负责信息推送,例如车况信息等,这样就会安全很多。但车载系统发展的野心显然不仅限于此,驾驶员一旦需要主动与屏幕交互,危险系数陡然上升。但使用屏幕作为被动交互的载体是很困难的。当时我也做了一些尝试,但这些设计尝试从现今的视角来看,对安全性的改善只能说是小修小补,被动交互的理论没有错,但是它的载体是错的,不应该用屏幕来承载这个交互的行为。

    6. 这两年国产汽车发展很快,很多设计师想转行做车载设计,您对他们有什么建议吗?如何看待当今的车载设计行业前景? 这个行业正在迅速发展,特别是3到5年前非常活跃,因为新能源车的爆发式增长掀起了一股车机设计浪潮。然而,我个人对这个行业持悲观态度,不认为这个设计浪潮可以持续下去。我之前曾为奔驰设计过,后来去美国体验了特斯拉,现在已经驾驶特斯拉六七年了,作为特斯拉的老用户,我认为它的车载系统设计的仍然不好,它也只是在传统的用户体验范围内进行了一些优化工作。

    那么既然是给想要转行做车载的设计师分享一些经验,我认为就应该从长期主义的角度来回答这个问题,所以我们的着眼点应该是未来车载系统的形态是什么,而不仅仅停留在如何优化屏幕上内容的易用性。其中一个至关重要的问题就是视觉在车机形态中的地位,是否仍然会广泛使用视觉图形作为车机的载体。因为在驾驶时触碰屏幕不安全,尽管有自动驾驶技术的出现,但人类在移动的环境中操作屏幕仍然会不舒适,这是生物学意义上所决定的。因此,我认为未来的车载系统可能不会以屏幕或者视觉做为载体,可能采用更加无形的设计来满足用户需求。虽然我的认知并不是绝对正确的,但我比较确信未来的车载系统不会是依托于视觉的系统。

    当然,如果我们从更长远的角度看,车载系统与手机系统的发展方向也没有太大区别。如果AI系统足够强大,例如现在的ChatGPT,它不需要复杂的操作界面,只需要一个对话框就可以给出合适的结果,这就大大降低了UI和UE的存在感。所以对于这些行业的设计的前景,我并不是特别乐观,现在设计师的知识结构是建立在视觉基础上的,但未来未必如此,我们这一代设计师可能无法驾驭。

    由于篇幅的关系,优设将报道一分为二,上半部分主要讲述了李沃耕作为一名设计师所经历的项目以及对设计的理解,之后优设将从设计师跨界工作的角度让李沃耕谈谈他的相关经验。

  • 交互设计师是否会被取代?来看网易高手的深入分析!

    UI交互 2023-04-17
    工作中经常有人聊起交互跟产品的差别是什么?交互跟 UI 的差别是什么?似乎从入行至今,都一直有过这样的声音。

    工作中经常有人聊起交互跟产品的差别是什么?交互跟 UI 的差别是什么?似乎从入行至今,都一直有过这样的声音。互联网红利期的逐步消退,资本紧缩,压缩人力成本似乎成了一件趋之若鹜的事,所以早年阿里提出了全栈设计师、全栈工程师的概念,但本质上各种细分岗位的工作一直都存在,从未消失过,只不过以不同的形式被平摊了,但效果却难以说是好的。下面将去抛砖引玉的探讨 交互设计 价值点,并聊聊能否被兼并或取代。

    更多职场干货:

    大厂资深设计师:为什么我们不会被 AI 取代? 「从技能维度分析,你会 UI/UX 设计吗?

    阅读文章 >

    一、先谈谈交互在做什么? 借用一句传统设计行业的经典语录,一个好的产品一定是“有用的、好用的、用过还想用的”,有用的主要由产品经理把控,而好用、用过是否还想用就是交互设计的职责和价值了。工作内容,交互大概可以总结为下面这几点

    是针对行为的设计,让原本的物理逻辑向用户行为逻辑转化 平衡业务价值和用户价值,脑海中永远不要忘记“用户价值”这几个字 以目标为导向,保证产品贴合用户心智,用户能更好的理解、使用产品,并获得愉悦的使用体验 是通过功能架构向信息架构的重组,提升产品框架的扩展性、稳定性等,交互更多的考虑到在不同场景下对可用性的要求,让产品能长久持续的使用下去 是对使用流程设计 数据分析和用户研究相关的工作,这两者是交互展开工作的基础支撑 交互的价值是长期的和可持续的,没有交互,短期内看似不会出现问题,长期来看,对用户留存、用户满意度等会有重大影响,市场环境不同于垄断环境,功能堆砌过多后甚至都无法再动摇产品“难用”这个印象,但凡有类似竞品,放弃产品可能性较大

    二、交互设计的产出物特点 交互稿与产品原型稿有什么差别?

    这可能很多人关心、疑惑的问题了,本质上这个也是交互稿专业度的问题。产品经理也可以去画原型图,那问题在哪儿?下面会尝试阐述几点重要差别。当然并不排除极少数优秀、能力全面的产品能内外兼修。

    1. 从内到外的逻辑思维差异

    行为逻辑是交互设计师思考的出发点,也是交互设计方式能否取得创新的关键点。物理逻辑或者业务逻辑是产品经理更关注的要点,交互设计需要具备丰富的同理心,产品功能不同、用户不同、场景不同都会影响到用户使用时的感受和操作行为。简单来说,交互设计师更多的站在用户角度去思考原型的价值,是否容易被理解、好用甚至转化,而产品的角度不可避免的会更多考虑业务、技术实现等方面,一个人做到面面俱到,是极其难且思维是很容易固化的,长期形成的思维差异会直接在原型图中表现,最终影响到产品可用性。

    以 QQ 音乐几年前的版本(2017)和现版本(2021)为例,左侧过往版本在首页的信息组织形式上主要以分类的方式,而右侧现版本中信息的组织形式中首页的分类方式已经很弱了,基本倾向于按用户行为、需求去组织,比如根据用户过往听过的歌曲去推荐歌曲、歌单,每日 30 曲更是研究了用户每日习惯、耐心做的信息整合,30 首怎么得来的?根据什么样的歌曲去推荐?这些都是行为研究的范畴,需要对用户深度了解后方有最好的解决方案。

    2. 设计范式的积累与创新

    设计范式是交互设计师基本功的体现,包含设计规范和模块范式两个方面。设计规范是设计范式中的基础,对规范的理解和创新也是衡量专业度最基础的方面,这对原型稿是否成熟有很大关系,现有的交互规范大多基于 iOS、Material design、微软设计规范的基础上优化的,国内比较流行的设计规范还有 Ant design 等,本文不对此做过多讨论,这里重点谈谈设计范式。

    范式,指用户在长期对于互联网产品使用过程中产生的用户心智,比如用户对设置模块的预期、对个人信息模块的预期等。也可以理解为对于不同产品功能模块的记忆,设计时需要非常熟练的从脑海中调用,这样做的好处是不容易太偏离用户长期积累的心智,熟练应用范式是创新的前提。

    比如表格编辑器的设计范式,不管是现在的飞书、谷歌文档、钉钉、石墨等协同办公产品,都在 20 年前微软 office 的 ribbon 设计模式中兜兜转转,尤其是表格编辑器,在长期的使用过程中记类的习惯是很难轻易被改变的,笔者亲身经历过一款表格编辑器产品的迭代,易用性(易操作、易学、易见)中易学性指标评分是最高的,现在想起来也跟行业范式接近不无关系。另外关于一些编辑器右键操作、键盘操作快捷键是否满足了用户需求都是极其重要的。不过办公类产品发展到现在已不再像 20 年前纯工具类属性了,协同属性必将带来编辑器再一次的创新。

    设计范式需要长期的积累,对范式理解不够深入,通常是要么画不出来可用的原型,要么画出来的原型会被问到一个问题——“这个。。。看起来有点说不出来的奇怪”。在理解了基础范式之后,我们才能做出真正的创新,虽然近两年交互形式越来越稳定,但真正理解了范式之后的创新也能帮助产品快速占领用户心智,形成特定印象,继而占领市场。设计范式并非不可创新,而是在不必要的时候尽量遵循范式能最大限度去降本增效,减少不必要的用户误解或开发成本。

    3. 多端设计交互方式

    如果不是潜心研究过多端设计差异,一般很容易出问题。比如 PC 端和 Mobile 端、小程序与 App 等,在设计方法上都存在巨大差异,我亲眼见过太多的产品原型稿中出现过 Mobile 的设计方法运用到 PC,或者 PC 应用到了 Mobile。

    比如基本的差异点有:

    Mobile 的用户行为多为单线任务,而 PC 是多线任务,比如 pc 可以多窗口很便捷的切换,用户可以一边聊天一边收邮件 Mobile 端用户操作时间更加碎片化,PC 操作时间更加系统、专一 PC 的界面也远大于 Mobile,导致信息结构差异较大 两者交互事件也存在很大差别,PC 可以针对对象进行 hover,多上下滚动,少左右滑动(依据鼠标特性)等。 设计控件的规范差异较大 本文并不详细赘述差异点,总的来说,这些差异点在具体的原型稿设计中会体现的比较明显,这些也是专业性的一个方面。下面将举 2 个例子来说明:

    (1)树状结构

    树状结构是一个 PC 端经常应用的控件,适用于层级结构的展示、选择等交互操作,高效而清晰,但其在移动端展示时却不能照搬,由于屏幕、移动端手指交互等限制,在移动端该控件既不高效也不清晰。比如常见的将文件移动到文件夹的操作,桌面端的交互可以用树状结构,而移动端更适合层级结构

    (2)面包屑导航

    面包屑在桌面端是一个非常普遍的控件,可以有效的承载层级关系展示、快速导航定位的功能,比如不同层级的文件夹展示与导航等。但在移动端,因为屏幕大小、移动端用户操作碎片化等原因,导致用户对面包屑节点的记忆、层级操作上都远不如桌面端,甚至会影响到信息的展示效率,因此移动端在层级关系的展示与切换上通常不会用面包屑,而是左上角返回按钮或系统级别的返回。当然面包屑在移动端也并非一无是处,如果面包屑各节点承载的展示作用具备极强的参考意义,比如这些文件夹节点同时承载着组织关系的显示,则面包屑也还是可以用的

    总结下来:面包屑在移动端尽量别用,但如果其各层级节点同时有极强的参考意义,则可用

    4. 方法论的掌握和运用

    方法论在交互稿中的体现是比较隐晦的,准确来说,这一点是针对思维差异点的补充,如交互设计十原则、“F 型”页面设计理论(近几年有争议)等视觉动线,也包含发现问题的一些方法,比如 KANO 模型、用户体验地图、卡片分类等方法论的应用,这些对于用户行为维度的研究结果也会支撑着交互稿的科学性,这里不做展开阐述

    比如用户体验模型示意图如下,用户体验模型是建立在用户角色模型之上的,前提是需要大量的用户深度访谈资料为基础,用以系统、全面、科学的研究用户行为和探索用户需求。

    用户体验地图

    除了以上列举出来的,还有一项重要的方法是数据分析,这一点是容易被轻视的,但确是最具备参考价值和衡量工作结果的,交互关注的数据和产品有很多差异,具体一点,比如对于一个项目中,产品更多关注的是衡量功能结果的数据,通常包含使用数据 PV/UV、转化率等,而设计师更多关注 CTR、停留时长、转化漏斗中跟操作行为相关的数据,行为是交互研究的对象,所以行为数据结果能为具体的方案设计提供衡量指标

    5. 交互稿中的 UI 考量

    简单来说,就是不能给 UI 挖坑,没有交互的设计,UI 上与产品之间的沟通会非常频繁,也主要会出现以下几个常见问题。

    (1)信息结构与优先级的落地

    信息布局既需要考虑功能的业务优先级,也需要考虑用户行为优先级,同时还需要考虑到 UI 排版的难度。这中间基本都会有矛盾存在,做好平衡是必备技能。有时候需要逼着产品给出功能优先级,排版是有限的,也有一定审美要求的专业度,交互稿需要为 UI 规避一些明显的坑,比如最典型的例子——功能都很重要、文案过长等,当产品同学也不确定自己所画功能是否能被用户理解、操作的时候,会喜欢用文案去进行解释,比如button上写10个字这种,交互需要给UI提前做避坑

    (2)规范

    设计是一个系统,任何需求在画交互稿时都应考虑到对系统的适应或冲击,这就要求交互设计师不仅要非常熟悉设计系统,而且必须是系统的制作人之一,设计系统是一项耗时耗力的工作,前期耐心打磨,后期适应、修改,如此才能把握住用户体验的一致性。

    (3)边界情况

    主要包含用户交互中与前端、服务端的交互,比如操作事件的定义、反馈;加载的形式与技术方案;空状态;弱网、断网等等,这些边界页面的考虑都定义清楚,能有效避免 UI 的返工

    (4)保真度与实现效果

    交互稿如果保真度较低,会导致 UI 在实际设计的时候对交互稿修改较大,导致页面架构、交互注释等返工修改,造成不必要的时间资源浪费,也会对项目进度造成影响。一般来说,成熟的交互稿是比较接近 UI 稿而又不是 UI 稿的一种状态,将 UI 中的坑避免之后,UI 设计师需要做的就是更表现层的设计,比如与前端工程师的实现匹配、色彩、栅格、间距、字体字号等等。

    6. 详尽的 Use Case 考量

    Use Case(用例)指功能、交互的定义和详细描述,用例描述的细节程度决定开发时反复沟通的频率,具体包含的细节很多,大到功能流程的设计,小到某个交互事件的定义和枚举;从前端用户与系统的交互事件,到服务端与前端的功能联动等,都涉及到,总之,只要用户看到的、点击/滑动/hover 等交互行为涵盖到的,都应该被定义,以期减少开发过程中遇到的问题和沟通成本,这里不做过多阐述。

    五、交互稿背后的价值 交互设计只是画稿子的吗?

    显然不是!如果说一个项目交互阶段持续了 3 天,那绘制交互稿最多能花费 1 天。

    交互是一个横向能力比较高的职业,很多交互设计师也改行去做了产品、用研或者 UI,所以多多少少都会具备这几者的一些技能。交互设计师通常会有多重隐藏的技能是必须掌握的

    1. 项目中坚守用户价值

    用户价值在项目中很容易就让步于业务价值、项目排期、技术方案等,交互就是在这中间说“不”的人,润物细无声,在每个项目中尽量减少用户价值的损耗,最后汇聚而成的产品整体体验还是有很大差别的。

    2. 团队中承担用户研究、行为数据的部分工作

    交互在组织架构上,一般是会归属于设计部门的,所以在部门中也承担了一线跟用户和数据接触的人,即便有数据分析师、用研同学的帮助,也需要有主动跟踪这些问题的意识,不然设计出来的交互稿很难不出问题。

    3. 可用性测试等结果追踪

    可用性测试在一些稍大的项目中是体验设计环节中的定性维度核验步骤,需要结合用户反馈对方案进行可用、好用测试,并不是指在流程上能跑通的技术测试,而是校验用户对于方案的接受程度、满意程度,也顺便发现一些问题,后续进行优化。

    更多的结果追踪形式,比如还有 SUS 可用性量表(B 端产品可用阿里云 UES 量表等)、用户满意度、NPS 跟踪等等,目的在于定量的给用户体验打分,确保用户体验的衡量是有章可循的

    易用性量表

    4. 直接驱动业务增长

    增长黑客和用户增长设计的概念前几年也已在业内为大家所熟知,AARRR 增长模型(获客、激活、转化、留存、推荐/传播)中,交互可依赖对用户的了解和用户行为的洞察,通过比如文案、微动效、转化漏斗优化、信息梳理、布局设计等,也可以帮助业务在各阶段直接提升对应的业务指标,甚至将体验设计师熟悉的体验地图转化绘制为用户增长地图,在用户使用的全链路行为节点做设计所擅长的增长赋能。

    5. 项目流程管理

    交互需要更早的参与到需求中,在需求出现之前的交互参与能让需求更加合理,而在交互稿画完之后,也需要实时的去跟进 UI、开发,有一些技术难题需要跟开发密切合作,开发说“”实现不了”是经常碰到的一句话,那是否是真的实现不了,可能跟不同的团队、人、项目排期有关了,有时候并不是真的实现不了,或许只是开发不想做或者他之前没做过,这个就需要 PK 了,当然有的真的很难实现或者性价比很低的设计,就需要对交互稿进行调整了。除此之外,有的公司还要求交互有整体管理能力,这就另说了。

    五、没有交互会带来什么? 产品团队或许不都有交互岗位,但不可以没有好的交互设计!

    1. 短期内产品使用体验很奇怪

    很多人画出来的原型稿甚至是交互稿都遇到过“用起来很奇怪”这个问题,其实是因为设计者对用户心智、用户行为、控件规范、产品范式等的不熟悉造成的这个问题,一个“夹生”的东西即便逻辑合理也必然会带来“夹生”的体验。此外,范式和规范的使用只是执行时的一个选择而已,对某规范的使用未必真正解决当前场景下的问题,交互设计师更多的是通过对业务的梳理、用户的洞察来做选交互范式和规范的筛选,找到合适的,才能价值最大化。

    2. 长期下产品“难用”印象的形成

    任何行业,任何产品,产品研发者可能都不是实际使用者,术业有专攻,对用户的理解是一项长期经验积累的过程,合乎逻辑的,不一定是易用的,易用的不一定是好用的。笔者的经验来看,用户的使用行为既是“傻”的,也是孕育着无穷无尽智慧的,尤其是 B 端产品,用户使用的方式可能超乎想象。因此对用户行为理解的深度决定了产品与用户之间的默契度,围绕一个痛点市场上总不至于只有一个产品,如何让你的产品成为用户真正的朋友,需要有专业的人来研究用户行为,交互这个专业便也是因此而生的。

    如今互联网红利愈发消失殆尽,或许由于资金原因交互岗位并没有存在于所有公司或团队,但交互设计的专业度一定永远存在,岗位的横向兼并融合并不能磨灭交互的专业度,因为交互坚守的是用户体验的底线,让产品变得或好用、或高效,最终驱动业可持续增长,便是这最大的价值!

  • AI绘画必看!5个实用技巧让图像生成效率提升200%

    UI交互 2023-04-17
    大家好,这里是和你们一起探索 AI 绘画的花生~想必很多设计师小伙伴都在用 Midjourney 生成各种设计灵感或者素材,比如 3D 人物、UI 界面,渐变纹理、矢量插画等,而且只要我们掌握了其中的关键词或者公式,就能快速生成对应的效果,非常方便。不过在使用他人分享的提示词公式时,我经常会发现效果不如原版好,不...

    大家好,这里是和你们一起探索 AI 绘画的花生~

    想必很多设计师小伙伴都在用 Midjourney 生成各种设计灵感或者素材,比如 3D 人物、UI 界面,渐变纹理、矢量插画等,而且只要我们掌握了其中的关键词或者公式,就能快速生成对应的效果,非常方便。

    不过在使用他人分享的提示词公式时,我经常会发现效果不如原版好,不知道大家有没有遇见同样的问题?后来经过不断的尝试,我终于学会如何处理这种 AI 绘画“买家秀”和“卖家秀”的问题,并且总结出一些技巧和经验,今天就整理一下分享给大家~

    一、收集提示词素材 最初是在逛 Behance 的时候看到一组很好看的 3D 艺术作品 —— 由C4D 制作的炫彩玻璃材质的兰花, 当时就在想能不能用 Midjourney 复刻这种效果呢?

    品牌设计工作室 BÜRO UFHO 为 Vogue 设计的 3D 概念艺术项目《Fleur》,图片来源:Fleur on Behance

    有了这个想法后就马上开始动手尝试了,AI 绘画最关键的自然是提示词,所以我先在《Fleur》项目的网页收集到了以下关键词:

    Orchid, translucent iridescent texture, Art Direction, Concept 兰花,半透彩虹色纹理,艺术指导,概念

    众所周知,AI 绘画的一大好处就是有只要有了相似提示词,我们就可以做出和别人一样好的图像,所以我以“3D、透明、玻璃、花、炫彩”为关键词,在 B 站和小红书上搜索是否有别人分享的、能生成类似效果的提示词公式,结果还真找到了 2 组效果比较比较相似的,代入我想要的兰花“orchid”,分别得到以下的结果:

    可以看出两者的效果与我的参考图还是有比较明显的差距的,但是相比之下,参考提示词① 的效果更符合参考图中“玻璃透明质感、炫彩灯光”的特征,所以决定在参考提示词①的基础上进行优化。

    二、提示词测试优化 首先在提示词 ① 的基础上,结合原始参考图的关键特征创作了第 ① 版提示词,发送给Midjourney Bot 进行测试。最终生成的图像中兰花有很好的炫彩渐变光效,但是花朵的质感不像玻璃,更像是金属。

    根据出现的问题,我分析了提示词,发现可能是其中的“metallic(金属的)”干扰了 MJ 对“glass(玻璃)”理解和呈现,于是做了一下调整,形成了第②版提示词:

    将 "Futuristic Orchid (未来感兰花)" 改为“Crystal Orchid(水晶兰花)”,进一步强调花朵晶莹剔透的质感。 优化提示词顺序和结构,将主体关键词放在前面,风格、氛围等零散的关键词放在了末尾。

    在第②版的提示词的图像中,兰花的透明质感虽然增强了,但花瓣的质感不够通透,有一股塑料感。于是我去除了提示词中的 “ inorganic(无机)”这种带有工业感的词语,形成第③版的提示词。

    第③版的效果出来后,发现花瓣的透明质感更好了,但花茎的部分和整体也不太搭。看了效果图发现黑色背景比浅色背景更加好看,于是对提示词是进行了进一步修改,形成了第④版提示词:

    将茎干部分也变成有透明材质,并改为黑色背景 添加了“minimalist 极简”一次使画面更加简单干净。

    第④版的图像整体更加通透简洁,但是炫彩弱了很多,花瓣也看不出来是兰花,整体不够精致,根据这些问题再进行一下调整:

    添加“holographic light effects”强调炫彩光的氛围 添加“Best、professional”等词提升整体的画面质

    调整后的第⑤版提示词虽然让画面光感增强了,但是花朵的质感太单薄,整体也比较花哨,针对的存在的问题继续改进:

    继续优化提示词结构,让“iridescent ”影响兰花整体而非局部;去除对茎干、背景的描述和强调,让兰花成为成为唯一重点强调的部分。 添加“ Professional Floral Art 专业花艺”提升兰花的美感,添加负面提示词“罐子、瓶子、花瓶”,以免这些元素影响兰花主体的呈现 去除意义重复的、没有具体指向的词语,比如 delicate、surreal、light、best 等,以免互相之间造成干扰。 将修改后的提示词发送给 Bot 生成效果图,效果有了明显提升,符合自己想要的效果。

    经过上一步的调整,我发现精简提示词后,图像的生成效果反而更好了,于是决定进步删除一些不重要的名词和修饰词,只留下最重要的,最后得到的图像在构图、细节丰富度和质感上都有了更好的表现。

    到了这一步,3D 炫彩水晶兰花的提示词就基本完成了:

    An iridescent Crystal Orchid::1.2, minimalist, holographic light effects, 3D, Crystal Glitter, Professional Floral Art --no bottles, jars, containers, vases --ar 2:3 --v 5 虹彩水晶兰::1.2,极简主义,全息光效,3D,水晶闪光,专业花卉艺术--没有瓶子,罐子,容器,花瓶--ar 2:3 --v 5

    它也可作为一个基础公式,修改其中关于花或者材质的描述,同样能得到不错的效果:

    三、经验总结 上面为大家展示了如何通过调整提示词,在 Midjourney 中逐步生成自己想要的效果。虽然文章中展示的思路只有七步,但我实际生成的尝试次数不下五六十次,因为 AI 绘画工具的出图效果有非常大的不确定性,一个极小的修改都可能导致画面产生极大的变化,需要不断调整重试。

    通过这次的 AI 绘画的生成试验,我也总结出以下 5 点技巧:

    学会借力。AI 绘画不需要我们从零开始,对于想要生成的内容,可以先通过浏览器搜图、describe 功能反推关键词,或者参考 MJ 官方社区、B 站、小红书上别人分享的提示词,在此基础上生成自己的提示词。 提示词要尽量简练精准,效果重复、无具体意义的词语会互相干扰,并降低 MJ 对关键词语的理解和呈现。而且我们在第一次生成图像时,可以将提示词设置的简单一些,这样一是可以获得更好的效果,二是方便后期根据需要逐步添加。 提示词的顺序和结构非常重要,越靠前的词语对生成效果影响越大,挨在一起的词语更容易被 MJ 归为一体进行理解,大家也可以利用:: 符号进行语义风格和权重调节。 要学会停下反思,如果你发现提示词越调整生成效果越差,一定要马上停下来,翻一下是从哪一步起生成效果变得不对劲的,返回那一步,换个方向重新开始尝试。 警惕 Bot“过热”。在生成的过程中,我发现类似的提示词,生成次数越多效果反而越差,或者换了一个明显不同的提示词,但是生成效果和之前并没有区别,仿佛 Bot 还没有从之前的提示词中回过神来。如果大家也发现这个问题,建议用不一样的新提示词多刷几遍,或者换一个新的频道进行图像生成任务。 这次的生成实验其实是分好几天进行的,中间有好几次推倒重来,但是也收获了很多有用的经验和小技巧,大家在探索的过程中也记得要多尝试,总结出自己的经验技巧。如果喜欢本期分享的话还请大家多多点赞哦,之后会继续为大家推荐更多实用的 AI 绘画实用技巧~

    推荐阅读:

    生成效率翻倍!Midjourney 4大最新参数指令详解 大家好,这里是和你们一起探索 AI 绘画的花生~ 功能超强大的 Midjourney 最近又更新了一些新的功能,比如接连推出的 Describe、Repeat 和 Permutations 三项指令,可以帮助用户更准确快速地获取创意,而且最近还有消息称 Midjourney 已经在进行

    阅读文章 >

    Stable Diffusion自学必看!6款适合小白的零基础免费入门教程 大家好,这里是和你们一起探索 AI 绘画的花生~ 最近优设为大家推荐了不少有关 Midjourney 的教程和资源,不知道大家有没有用起来?

    阅读文章 >

  • 以设计师的身份窥见世界:优设专访李沃耕(一)

    UI交互 2023-04-17
    中央美术学院毕业的李沃耕,从帮助故宫设计出第一款网红文创类产品,到自主创业成为CEO,再到投身于游戏公司,打造出数款成功产品,他是如何实现多栖发展的?又有哪些管理团队的实用方法?对于当下热门的AI,他的看法是什么?

    中央美术学院毕业的李沃耕,从帮助故宫设计出第一款网红文创类产品,到自主创业成为CEO,再到投身于游戏公司,打造出数款成功产品,他是如何实现多栖发展的?又有哪些管理团队的实用方法?对于当下热门的AI,他的看法是什么? 优设专访 为你一一揭秘。

    往期专访:

    优设专访!网易灵犀设计总监常雅莉的12年设计路 我工作经验相对比较简单。

    阅读文章 >

    1. 当初是什么原因促使您选择设计专业? 其实我很早就开始学画画,可能比大多数的设计师都要更早地涉及绘画学习,后来我就读于美院附中,接受了四年的绘画教育,当时设计行业还不是很普及,但是我高中时的专业课老师告诉我,做纯艺术很难赚钱,走这条路看不到希望,这成为我关注到设计行业的契机。但真正让我踏足设计专业的,还是后来我对设计产生了真正的兴趣,在绘画学习的过程中不断了解自己,发现自己思维更偏理性分析,造型艺术需要饱满的情绪表达,而理性可能更加适合设计专业。

    2. 您参与过3款热门文创类APP的设计,能否聊聊详细经过? 《胤禛美人图》是故宫博物院的首款APP产品,先说说我和故宫博物院的渊源。

    在2011年,我还在美院工作,当时移动应用市场还处于非常早期的阶段,iPhone发布仅有4年时间,iPad也刚刚问世。那时候我非常渴望在这个领域做出一些成绩。所以开发了一款名为“中国古典家具”的iPad应用,介绍中国传统的明清家具。因为那时刚刚毕业,这也是我做的第一款APP,所以我对它的期望并不是很高,然而它的反响却出乎意料的好,迅速地获得了广泛的认可和好评。在发布的第二天,我就被人们叫醒,告诉我这个APP非常火爆。

    《中国古典家具》App在苹果官网,作为第一代iPad Mini的精选示范应用

    第二天晚上,这款软件就已经进了AppStore的免费排行榜,我当时觉得很神奇,但心想可能就到此为止了,但是它却不可思议地继续上涨,到第三天时已经成为免费榜的第一名,而且接下来的数天一直保持在榜首。

    同时,这个应用还获得了App Store的首页推荐,在应用商店的头图上置顶展示了一周,当时许多游戏公司都想获得这个推荐却无法实现,还来询问我是怎么做到的。此外,《中国古典家具》还获得了苹果App Store2012年度最佳应用的奖项。

    《中国古典家具》应用占据榜首数天时间

    由于当时这个APP已经成为一个相当有名的产品,故宫博物院也注意到了它,后来故宫博物院负责数字化建设的同学就联系了美院,询问是否有兴趣协助故宫开发一款APP,主题是“胤禛美人图”,也就是关于雍正皇帝12个妃子,每位妃子都有一个独特的画像,故宫想要展示这些画像。

    在开发这个项目时,最大的挑战是如何从公众的角度介绍12张美人图,以前博物馆通常只是用平铺直叙的方式介绍文物,这种方式非常单调,不被大众接受,这也是博物馆和大众有距离感的原因。如果想让用户理解12张美人图的艺术价值,仅仅单纯展示就没有太多意义。因为我去过故宫很多次,发现观赏故宫展品的游客多数都是匆匆忙忙的,在每个作品前只会停留几秒钟。走马观花看下来,实际上什么也没看到。因此,我的想法是打破这个屏障,以一种大众喜闻乐见的方式展示这些文物,让作品与用户互动,让用户真正沉浸在里面,借助用户主动探索的过程让观众潜移默化的探究这些文物。

    《胤禛美人图》中的小动画彩蛋

    所以我把画里很多有趣的看点,加上了非常微妙的小动画,让用户能够发现埋藏在工笔画里面的故事。用户会像找不同一样去寻找画中隐藏的彩蛋,并乐此不疲。同时还对这12张美人图进行了二次包装,强调了季节的含义,使每三张图代表一个季节,这些都是从用户的角度出发,衍生出的创意,通过从非学术的角度挖掘这些文物的可能性,并用视觉形式来二次包装它们。这都是当时采用的一些方法,现在看起来这些点子可能并没什么新奇,但在当时非常的有效。后来故宫的很多宣传口径也使用了这些方法,从一个严肃的博物馆,转变成了一个网红博物馆。

    比如后来在微博上很火的乾隆剪刀手的动画,就与之有关。可以说《胤禛美人图》让一个非常严肃的博物馆打开了新的想象力,让博物馆的运营人员从传统的学术语境中跳脱出来,以一个大众化的角度向用户讲述故宫的故事。这个事情让故宫意识到原来可以有这样一个角度去跟观众沟通。

    回想起来,我意识到当时分析问题的方法,就是现在用户体验设计理念的关键方法论。尽管在那个时候行业还没有形成清晰的方法论共识,但《胤禛美人图》从朴实的角度出发,分析用户需求、解决问题并给用户带来惊喜,一步步引导用户深入产品,并因此收获了大家的喜爱。

    公司黄色的“白板”,此图为《胤禛美人图》的概念设计阶段

    这个项目对我来说,最大的成就是它具有巨大的社会价值。《胤禛美人图》是故宫馆藏中非常重要的藏品,平时展出次数寥寥无几。即使展出,其覆盖的观众也很有限,可能只有几万人。但通过将其制作成APP,它的覆盖面大大扩展,下载量能够达到五六十万甚至更多。普通观众把玩APP甚至比看到原作更为触动内心,后来很多人说“故宫出品,必属精品”,就是起源于对这款APP的评价。

    另外一个收获我认为可能更值得与大家分享,这个APP的成功对我内心产生了深刻的触动,即设计的价值可以被公众认可。在我上学时曾看过乔布斯的一次访谈,他提到设计iPhone的经历,因为iPhone当时属于异类,所以在2007年发布时,许多人都嘲笑它,认为它不可能成功,给出了很多理由,如不符合用户使用习惯等等。但我记得很清楚,乔布斯最后说,当他看到iPhone的销售数据时,他意识到iPhone的成功并不是商业上的成功,而是美妙设计的成功,这款APP证明了美好的东西终究会被用户发现,这是对设计师最大的褒奖。

    但作为一个设计师,当你真正参与到设计工作中时,你会发现,绝大多数的产品都不会成功。这可能有些悲观,但这确实是设计师的常态,即使设计非常出色,但它由于各种原因就是不被公众所认可,很多人也因此受挫而动摇,而我比较幸运,在我设计了这些APP产品后,发现就像乔布斯所说的,如果产品真的很棒,用户终究会发现它的美好并予以认可。“美妙的东西终究会被用户发现”这种信念帮助我在早期的设计生涯中保持了对设计的热情,支撑我努力工作到现在。

    三款文创类 APP 分别获得了 3 次 App Store 年度最佳应用奖

    《胤禛美人图》和之后与故宫合作的《清代皇帝服饰》分别获得2013、2015年App Store的年度最佳应用,加上之前的《中国古典家具》,我拿到过三次苹果公司评选的年度最佳应用大奖,这点是极少设计师可以做到的,此外还两度获得了DFA亚洲最具影响力大奖。《清代皇帝服饰》最终还转化成了故宫数字馆的展品,在故宫的端门常驻展出,这些为我的职业生涯建立了充分的自信,也为这段文创APP生涯画上了完美的句号。

    坐落在故宫端门的数字馆,展出清代皇帝服饰的相关的数字内容

    3. 能讲讲学习阶段的故事吗? 说来话长,2005年我考入了中央美术学院。当时隐约意识到交互设计需要较强的逻辑能力,而我恰好是一个相对理性的人,所以很自然的,就对交互设计产生了兴趣。虽然那时候交互设计在国内还处于非常早期的阶段,很多设计师还没有关注到这个领域,但我对它一直有很强的执念。2006年,我正式决定成为一名交互设计师,开始了这个方向的系统学习。当时这个领域在国内的公司里还是非常小众和原始的,我的同学中也只有两三个人对这个领域感兴趣,其他同学仍然在做传统的纸媒方向。

    2009 年毕业设计课题,为荷兰银行设计新的 ATM 系统界面

    记得在做毕业设计时,只有我和零星几位同学选择了交互设计方向,现在这个领域已经变得炙手可热,超过一半的学生都在做交互设计。我的毕业设计虽然归类为平面设计系,但却仍然得到了很高的评价,并入选了中央美院的千里之行展,我认为这是一个转变,因为我没有被视为异类。后来因为在交互这块儿做的不错,加上一些机缘巧合,我就在学校工作了很长时间,这期间也辅导了很多同学交互方向的毕业设计。

    毕业设计采用了当时颇为时髦的触摸屏设备,并搭建了一个仿真的 ATM 机使用环境

    4. 您认为当下设计专业的学生应该怎样学习,做好哪些准备? 因为我已经离开学校有一段时间了,我的认知和经验可能与学生生活相去甚远。但我仍然可以从职业的角度谈一下这个问题。我认为,现在很多大学的设计教育过于概念性,缺乏对现实的关注,我觉得这是一个比较大的问题。因为学院一直倡导要培养未来的设计人才,但如果只是停留在对未来的幻想或畅想,那么就缺乏实际意义。只有立足于当下,解决好此时此刻这个世界正在发生的事情,才有可能培养出真正具有未来视野的设计师,因为没有人能坐在教室里对未来进行预言。

    回到问题,我做了很长时间的设计管理工作,接触了各种类型的设计师,目睹了他们所面临的各种问题以及职业发展的困境。因此,很能体会设计师在职场中的困惑,因为我曾陪伴他们一起成长。

    从现在的角度回看设计师的成长历程,我会觉得技术和技巧并不重要,甚至更夸张的是,在学校里非常重要的一些设计方法论、美学知识、排版技巧等,现在看来也不是那么重要了。当然,我并不是说这些专业知识不需要学习和掌握。我的意思是,真正支撑一个设计师做出优秀作品,并持续在这个行业里奋斗的动力是什么?难道只是在课堂上学会了如何设计字体、如何搭配颜色吗?我现在觉得这些知识其实非常的脆弱,甚至不堪一击。

    2007年在中央美院与同学的合影,正中间是王敏教授

    回想起来,对我而言,真正支撑我往前走的力量来自我的导师和他给我讲的故事。我的导师王敏教授当时是中央美术学院设计学院的院长,他在美国学习和工作多年,曾任教于耶鲁大学,担任过Adobe公司的艺术总监,是上世纪硅谷创业浪潮的亲历者。在我跟他学习时,他讲述自己在设计方面的亲身经历,比如他访问皮克斯时,目睹史蒂夫·乔布斯与导演讨论工作的情景,他如何追求细节等等,这些故事让我受益匪浅。

    王敏老师还跟我讲苹果早期Macintosh的设计,他说乔布斯把所有参与者的名字刻在机箱内部,并要求机箱内部也要和外观一样整洁,甚至线路板的排线也要非常美观。包括乔布斯做Next电脑时,要求电脑必须是一个完美的正立方体等等。这些故事对我有着巨大的触动,因为它们不是来自于报道或自传,而是来自我的导师和他朋友的亲身经历,这些事情就像是发生在身边一样。

    早期的 Macintosh 内部刻有研发人员的名字,Steve Jobs 的名字在中间偏上的位置

    这些故事讲述了过去的设计师,甚至可以称为设计大师,他们对设计的态度以及他们的追求。这些故事具有长期价值,能激励我在职业生涯受到挫折时仍然坚信设计的意义。但是我发现我的团队里很多设计师并不缺乏设计技能,而是缺乏对设计的信念。我经常看到一些设计师中途退出,或者在经历某些挫折后,开始怀疑设计的价值和在商业竞争中的重要性。一旦这种怀疑建立起来,就会深刻地改变设计师的职业轨迹,许多人在中途放弃了,或者越来越迷失。我认为,缺乏榜样的力量以及由此激发出的信念是一个相当重要的原因。因此,如果你问大学生应该做哪些准备,我认为最重要的是如何让自己爱上设计并真正体会其中的价值,就像我经历的一切让我对设计产生了敬畏之情,也让我意识到设计的价值在哪里,在此我希望再次感谢我的导师王敏教授。

    对许多学生而言,从长远看,他们应该思考如何在设计行业中寻找到属于自己的真正价值,而不是仅仅考虑毕业后三五年内晋升为小组长或艺术总监,当然,这是一个伴随着煎熬和彷徨的长期过程。

    5. 您之前还负责过奔驰的中控系统设计,能否聊聊车载设计行业? 奔驰中控系统设计是个很有趣的项目,大概是2012年,受戴姆勒集团的邀请,在中央美院的交互设计实验室开始做这类前瞻性的设计。当时对于车载系统的设想还很模糊,而那时车里最常被使用的交互设备其实是收音机。即使有屏幕,也只是很有限的一小块,功能非常单调。甚至那时特斯拉还没有出圈,所以当时还把特斯拉的照片放在提案PPT里大肆的批判,认为它们只是简单把屏幕放大了,并没有对车机交互做深度探索,没想到最后特斯拉大放异彩,现在回想起来是挺有趣的一件事了。

    在这个项目中,我提出了一个重要的设计理念,即“在合适的语境下进行设计”,这个理念最终变成了我本人的重要设计原则。在上大学的时候,老师也一直强调类似的观点,比如设计一张海报,仅仅在电脑上看是没有用的,老师会建议我把它打印出来,再去审视这张海报做得怎么样,因为这样更真实,等我打印出来之后,老师又告诉我,这样还不够,那到底什么才算是真正的真实呢?就是我要把海报放在它所应该存在的环境/语境中,才能真正评估它的效果。举个例子,当你做了一张学校宣传栏的海报,在定稿前要先小范围张贴在公告栏里。这时你对这张海报会有一个全新的认知,因为中午学生吃完饭后,围在海报前的人很多,许多人的头会挡住海报下面1/3的部分影响后面的人阅读,因此你得出结论,不能在海报下面1/3处放置重要信息,这就是真实环境对设计产生的影响。

    在中央美院的交互设计实验室讨论车载系统的设计

    在做这个车载系统设计时,一开始我的团队成员也有模有样做头脑风暴,在白板上画草图和方案。但我意识到这种方法不行,既然这个设计是为车载设备而做,那么在白板上画图并不是最佳工作方式。因此,我决定制作一个模拟汽车中控台的白板,一个尺寸和弧度都和奔驰S系车型一样的“弧形白板”,之后团队在这个模拟环境中完成了所有的讨论和线框图设计工作。这种设计方法为我的工作带来了很多新的启发。最终,这个项目将整个弧形部分制作成屏幕的形式,这正是由于在实验室里建立了一个仿真的汽车环境,只有在这个真实的环境中进行设计工作,才能得出真正特别的答案。

    因此,这让我明白,设计必须在合适的语境下进行,即设计最终的应用环境才是左右设计方向的决定性因素,包括头脑风暴最好都在这个环境中进行。这个理念对我后续的设计生涯产生了深远的影响。比如团队里很多设计师会认为把icon画完就可以了,但实际上应该将icon放在实际UI中加以审视,因为界面整体的色调、文字量和排版都会对图标产生影响。所以我会告诉设计师,任何设计工作都不能简单地理解为物品本身的美观度。实际上,所有设计工作的目标都不是物品本身,而是物品与周围环境之间的关系。就像佩戴眼镜,人们通常不会单独说某款眼镜很好看,而是说这款眼镜和你很搭,其实潜台词是同款眼镜在别人的脸上可能会变丑,在这个例子里,眼镜就是被设计的物品,而你的面孔就是环境/语境,所以设计永远都不是孤立存在的,环境/语境最终决定设计的成功与否。

    在奔驰项目中,也取得了一些学术成果。其中最重要的成果之一,是对汽车内部的阅读环境进行了基本的定义,包括主动交互和被动交互的概念,这些概念是我当时发明的新词儿,对奔驰的设计理念产生了较大的影响。

    传统的汽车设计方法沿用了电脑屏幕上的操作逻辑,这种逻辑的基本特征是,当用户在使用电脑时,会产生一个需求并进行相关操作,然后电脑给出反馈,用户再进行浏览。这种流程被称为主动交互,现在的许多汽车依然采用这种信息架构设计。

    中控系统的概念设计,完成于 2012 年

    然而我提出了另外一种观点,车载系统应该主要使用“被动交互”模式,什么叫被动交互呢?比如听收音机或听歌就相对安全,因为这些信息是主动推送给驾驶员的,不需要分散注意力去主动获取、筛选这些信息。如果车载系统的屏幕只负责信息推送,例如车况信息等,这样就会安全很多。但车载系统发展的野心显然不仅限于此,驾驶员一旦需要主动与屏幕交互,危险系数陡然上升。但使用屏幕作为被动交互的载体是很困难的。当时我也做了一些尝试,但这些设计尝试从现今的视角来看,对安全性的改善只能说是小修小补,被动交互的理论没有错,但是它的载体是错的,不应该用屏幕来承载这个交互的行为。

    6. 这两年国产汽车发展很快,很多设计师想转行做车载设计,您对他们有什么建议吗?如何看待当今的车载设计行业前景? 这个行业正在迅速发展,特别是3到5年前非常活跃,因为新能源车的爆发式增长掀起了一股车机设计浪潮。然而,我个人对这个行业持悲观态度,不认为这个设计浪潮可以持续下去。我之前曾为奔驰设计过,后来去美国体验了特斯拉,现在已经驾驶特斯拉六七年了,作为特斯拉的老用户,我认为它的车载系统设计的仍然不好,它也只是在传统的用户体验范围内进行了一些优化工作。

    那么既然是给想要转行做车载的设计师分享一些经验,我认为就应该从长期主义的角度来回答这个问题,所以我们的着眼点应该是未来车载系统的形态是什么,而不仅仅停留在如何优化屏幕上内容的易用性。其中一个至关重要的问题就是视觉在车机形态中的地位,是否仍然会广泛使用视觉图形作为车机的载体。因为在驾驶时触碰屏幕不安全,尽管有自动驾驶技术的出现,但人类在移动的环境中操作屏幕仍然会不舒适,这是生物学意义上所决定的。因此,我认为未来的车载系统可能不会以屏幕或者视觉做为载体,可能采用更加无形的设计来满足用户需求。虽然我的认知并不是绝对正确的,但我比较确信未来的车载系统不会是依托于视觉的系统。

    当然,如果我们从更长远的角度看,车载系统与手机系统的发展方向也没有太大区别。如果AI系统足够强大,例如现在的ChatGPT,它不需要复杂的操作界面,只需要一个对话框就可以给出合适的结果,这就大大降低了UI和UE的存在感。所以对于这些行业的设计的前景,我并不是特别乐观,现在设计师的知识结构是建立在视觉基础上的,但未来未必如此,我们这一代设计师可能无法驾驭。

    由于篇幅的关系,优设将报道一分为二,上半部分主要讲述了李沃耕作为一名设计师所经历的项目以及对设计的理解,之后优设将从设计师跨界工作的角度让李沃耕谈谈他的相关经验。

  • 零基础如何轻松制作高保真原型?我不允许还有人不知道这款神器!

    UI交互 2023-04-17
    工欲善其事,必先利其器。对设计师而言,一款优秀的软件不仅能提高设计师的工作效率,也会帮助设计师快速呈现自己的想法,发挥创造力,而不是让灵感囿于复杂的工具无法施展。因此每年我都会关心设计软件的趋势,而在各大设计软件的趋势报告中,UXtools 以其样本量大(从全世界设计师用户中做调研)成为我的首选参考。

    工欲善其事,必先利其器。对设计师而言,一款优秀的软件不仅能提高设计师的工作效率,也会帮助设计师快速呈现自己的想法,发挥创造力,而不是让灵感囿于复杂的工具无法施展。

    因此每年我都会关心设计软件的趋势,而在各大设计软件的趋势报告中,UXtools 以其样本量大(从全世界设计师用户中做调研)成为我的首选参考。

    就在UXtools发布不久的这份全新设计工具报告中,我意外地发现了一匹黑马,看到排名时着实让我心里诧异:

    原型设计 软件对比中,评分最高的竟然是一款名为 ProtoPie 的软件。

    而在高级原型软件的统计中,ProtoPie 更是一骑绝尘,成为设计高保真原型的必选项。

    这款原型设计软件究竟有何亮点?凭什么成为高保真原型设计的龙头软件?在我深度体验后,我不得不说,它配得上这份荣誉。

    Protopie 官网 ? https://www.protopie.cn/

    下面来详细聊聊它的亮点。

    1. 无需代码基础,像搭积木一样轻松上手 卧槽!

    这是我打开ProtoPie 官网的第一个想法,与别的网站不同,首屏没有大篇幅的堆叠亮点,只有一个有趣的互动:30秒制作地图缩放原型。

    5个步骤,你就能轻松制作出一个地图缩放的原型。这无比丝滑的体验和小朋友都能学会的操作,以及最后出现的酷炫原型,甚至让我有点恍惚,这是玩游戏还是做原型?

    而这,也是ProtoPie 引以为豪的独家概念模型: 交互=对象+触发动作+反应动作。

    顾名思义,任何复杂的交互都可以拆分成这3步,为了实现这个功能,ProtoPie 还创造了其独有的「交互周期表」,表格由触发动作和反应动作组成,制作原型时只需将两者搭配使用,就可以轻松创造任意形式的交互。

    这难度和搭积木一比,似乎还更加简单?

    2. 教程全面,服务贴心 尽管操作已经简单到极致了,ProtoPie还是担心设计师上手不够快,为此编撰了一个详细的 用户使用手册 。

    B站也有ProtoPie的中文教程( 101系列中文课程 ),总之对设计师而言,你完全不用担心高保真原型的制作难度,它远比你想象的还要简单。

    除了基础教程,我发现ProtoPie 也会经常做线上的工作坊( https://space.bilibili.com/602451792 ),从入门教程到进阶的交互逻辑和真实案例讲解应有尽有,合计40多篇视频教程,针对企业端用户还配备了专属的定制培训和服务经理。对个人用户体验友好,对企业用户服务升级,这大概就是它口碑天花板的原因。

    3. 独家功能:支持软硬件交互 如果说3步做原型是ProtoPie的独家特色,那多硬件平台的高保真原型制作,就是它的大杀器了,对比其他原型软件,堪称降维打击。

    原谅我直接复制官网的一句话: 不要让硬件限制了你的设计。

    这句话给我的震惊程度,不亚于“别让显卡限制了你的渲染速度”。是什么样的功能,才会让它有勇气说出这句话?

    然后我就看到了演示案例,是的,ProtoPie 丝毫没夸大。

    ProtoPie 不仅可以让汽车设计师的想法在短时间内带入真实场景,甚至可以将物理的按钮与屏幕的数据联系起来:

    针对车载交互,它还能直接通过汽车的OBD端口收集数据,将车载交互中的实际数据运用到原型制作中,还可以创建车载语音交互原型,让设计师拥有沉浸式的体验。

    这两年新能源汽车和国产汽车急速兴起,HMI设计也逐渐成为大家关注学习的内容,这样一个汽车交互原型神器,相信未来会成为各大汽车厂家的标配。(虽然现在已经是宝马、奥迪等大厂的御用原型制作工具了)

    除了车载交互,ProtoPie 在智能手表、游戏交互、智能电视等硬件,也做了专门的优化,用一句话概括就是: 别让你的原型,只停留在脑海里。

    手表交互原型

    游戏交互原型

    智能电视交互原型

    看完上面这些令人瞠目结舌的演示案例,别惊讶,接下来要聊的,正是这些案例涉及到的,ProtoPie 独家的核心技术。

    4. 能创建音交互原型,还支持手势/眼动跟踪 在上面的案例里,你可以看到汽车的跨屏幕交互、汽车油门与显示数值变化的软硬件交互,但ProtoPie 的技术远不止于此,你还可以创建语音交互原型(支持52种语言包括中文),甚至你还可以借助Socket.IO和ProtoPie Connect,让手势/头部识别和眼动跟踪从想象变成现实。

    别忘了,所有这些看起来极其酷炫的交互原型,都不需要设计师掌握任何编程基础就可以完成。

    除了强大的高保真原型制作功能,ProtoPie 在提高设计师效率的细节体验上也可圈可点。

    5. 轻松预览,自动生成交互开发文档功能 除了支持双系统(Win&Mac),ProtoPie还支持Figma、Sketch和Adobe XD等平台导入,只需安装插件即可。预览原型也非常方便,通过ProtoPie Playe 就可以轻松预览。

    但真正值得拎出来讲的,还是它贴心的自动生成交互开发文档功能,设计师录制好交互部分给到开发小哥,工程师可以通过开发文档直观查看交互动作的数值(如持续时长、延迟、运动方式等)和图层信息。

    案例演示 ? https://cloud.protopie.io/p/f53cf5733b/r/c4121801

    团队交互组件库也是ProtoPie 为了提高团队协作效率特意开发的功能,设计师不仅可以创建个人组件库和团队组件库,也可以直接参考公共组件库(Material Design和iOS组件库等)。团队组件库可以邀请多人共同编辑,Sketch 热门的编组功能也有,批量修改极其方便。

    由于ProtoPie 已经和全世界许多大公司(Meta、Google、微软等)有深度合作,所以在企业端,他们也下足了功夫,除了开头提到的定制培训,针对企业的安全性需求,他们也提供了2种服务器版本:

    本地服务器:安装到公司自家服务器,即使是ProtoPie 内部人员都无法访问,安全度最高,适合中大团队。 私有云:AWS(亚马逊云服务)上为客户独立划分出来的空间,也可保证信息的安全。安装流程简洁快速,适合小团队。 对于对保密性要求极高的车企以及各个B端企业,这个服务应该是雪中送炭了。

    结语 絮絮叨叨说了很多,但依然无法完整覆盖到这款交互原型神器的许多实用功能,它究竟有多强大,还得大家自己探索。但我敢打包票,这是一款你用了就回不去的软件。

    ProtoPie 官网 ? https://www.protopie.cn/

    有任何软件的使用问题也可以添加官方的中国区经理咨询:

  • AI绘画是如何发展至今的?浅聊AI绘画发展史

    UI交互 2023-04-16
    关于 AI 绘画,过去已经谈过一次。相关观点至今没变,属于生产工具升级,生产关系暂时不变。这里头有外行看热闹,内行看门道,新手两边看的情况。

    关于 AI 绘画,过去已经谈过一次。

    相关观点至今没变,属于生产工具升级,生产关系暂时不变。这里头有外行看热闹,内行看门道,新手两边看的情况。当然,还有无数好事者的呐喊助威,各怀心思。Ai 绘画目前更像一个人工智能玩具、素材制作、灵感参考、绘画新工具的存在。我们要敬畏它,学习它,运用它,但不要过分焦虑。

    这里头有两个重要问题有待解决,其一是版权。如果 AI 生成图像跟成名艺术家过于相像,容易形成抄袭一类维权纠纷。这里头容易埋坑,就是一但立法跟上,可能会对过去应用进行责任追讨,律师事务所自然喜闻乐见,摩拳擦掌。其二是如果不用以图生图方式,其实主流的两大 AI 工具 MidJourney 与 Stable Diffusion 都有较明显的风格化问题,容易一眼看穿出身,形成我们设计圈常说的素材感很强,模板感很强的感受。比如我看目前朋友圈的大量分享确实一眼就知道 AI 出品,有时候两眼。

    看多了,新鲜感就会消退,而且就实际商业应用而言,受不受欢迎不好说。免费做应该还行,甲方如果付费了应该并不希望你用 AI 弄一套东西给他。

    但 AI 进步实在太快,以上说法也许很快不能作数,因此文章有效期 7 天。今天的话题并非要进一步评价 AI 绘画,而是跟大家讲述它的发展史。从历史角度,还原一下妖怪的诞生。

    AI绘画 教程:

    超详细!AI 绘画神器 Stable Diffusion 基础使用手册 一、AI 绘画工具的选择与运用 1. 工作场景下 AI 绘画工具的选择 目前文生图的主流 AI 绘画平台主要有三种:Midjourney、Stable Diffusion、DALL·E。

    阅读文章 >

    超详细!AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法: 新用户可免费创作 25 张图片,超过需要办会员 版权问题:会员生成的图片版权归创作者所有 Midjourney相关资讯: 二、注册/链接 服务器 温馨提示:下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网,右下角选择"J

    阅读文章 >

    故事,要从 70 年代说起。

    一、伪人工智能 这段历史,几乎每个人都会从一位英国艺术家说起,此人名为科恩(Harold Cohen)。

    生于 1928 年的科恩在 2016 年去世,一生致力于研究如何采用计算机程序创作艺术。

    科恩早年就学艺术,随后再学编程,文理兼修,打通任督二脉,也就是艺术与科技的屏障。

    因此,1972 年在他手上诞生了“亚伦”(AARON)程序。

    这个程序被视为 AI 绘画始祖,个人认为相对牵强。

    当然我所谓的牵强要看怎么定义“AI 绘画”,就目前 AI 绘画的形态来看,“亚伦”更像打印机。

    因为“亚伦”创作的真的是画,画在纸上那种(或者画布)。由于“亚伦”至今不开源,而且科恩已经去世,其作画原理细节目前是个迷。

    但按理解,就是通过编写好的程序指导机械化操作,跟如今工厂的机械臂差不多。

    Mac 电脑首次集成可以处理图像及文字的软件,绘画由此真正进入可视化的电脑时代。世界上第一款图文设计软件也由苹果公司开发,随着 Mac 电脑一起发布,名为“MacPAInt”,(“麦克油漆”)。当年的产品发布会上乔布斯还为大家现场展示过这款软件绘制的浮世绘图像,创作者是美国女平面设计师苏珊·卡雷(Susan Kare)

    这其实也可属于 AI 绘画历史的一部分,就是生产工具的升级。当时而言,对绘画界的震慑威力也不小,大家也很恐慌,很焦虑。传统画家都说糟糕了,老子要失业。再然后,默默学习,默默适应,默默发展,默默变成自然。

    历史就是这么有趣。

    二、闷声干大事 Mac 之后,科技分别在计算机+互联网领域奔跑。那时候,我们对科技进步感知其实还不够明显。

    但从乔布斯 2007 年推出 iPhone 手机后大家就明显感觉科技发展“提速”了,此后惊喜不断,高潮迭起,一环扣一环,大家应接不暇。其中,就有不少人在默默耕耘人工智能。

    于是乎,重要的拐点发生在 2012 年。

    这一年谷歌两位 AI 大神带领团队做了个试验,耗资 100 万美元,1000 台电脑,16000 个 CPU,用时 3 天,基于 Youtube 平台 1000 万个猫脸图片,用深度学习模型程序生成了一个模糊的猫脸。两位大神分别是华裔人工智能科学家吴恩达跟美国计算机科学家杰夫·迪恩(Jeff Dean)。试验中生成的猫脸像被揍过一样,如果不说明,一眼还不容易看出来,但它的诞生注定要写进历史。

    因为这其实才是 AI 绘画真正意义上的起点。

    这里要用通俗的概念科普下,什么是“深度学习模型”。简单说来就是需要向这个“模型”大量“投喂”外部标注好的训练数据,然后让它根据输入的预期效果进行反复调整与匹配进行输出。这样说吧,蒸汽机刚发明的时候,按燃料热值产出效率才 3%,“深度学习模型”的产生效率可能只有它的百万分之一,所以超贵。

    但不管如何,猫脸的诞生让大家备受鼓励,各路人工智能领域大神开始一路狂飙,闷声干大事。很快时间就去到 2014 年,加拿大蒙特利尔大学有个爷们提出了“生成对抗网络”算法进行 AI 绘画,简称“GAN”。

    GAN 的原理是它拥有两个深度神经网络模型,一个叫生成器(Generator)一个叫判别器(Discriminator)。

    为了方便理解,可以做个比喻,生成器就像乙方,负责做图,判别器就像甲方,负责说不行。每次乙方做完一张图出来甲方就说不行,要改,乙方改完出来甲方还说不行,继续改。如此循环上万次(很短时间内发生),直到双方筋疲力尽,甲方决定妥协,乙方也准备不要尾款算了,然后就输出一个最终结果。坦白说,GAN 的输出效果已经让人惊艳,一度成为 AI 绘画的主流方向。但缺点是非常费硬件(显卡),出图过程经常直接黑屏,而且它对局部图像的理解能力差,很难局部修改,图片分辨率也较低。

    到了 2015 年,谷歌推出过一个叫“深梦”(Deep Dream)的图像生成工具,这些画作全部都像有一堆疙瘩,生成痕迹明显。但也打出 AI 绘画旗号,而且还专门办了个展,其实比较出戏,这里不多聊。

    同在这一年,一种重要的人工智能技术也诞生,就是“智能图像识别”。

    意思是计算机可以运用语言去描述一张图片,就像父母拿着卡片问 2 岁宝宝这啥,宝宝会答:大象。

    这个技术当然更先进些,比如你给一张高启强的图片它识别,它会给出一系列标签,比如:男性、黄种人、中年、老大之类。

    这跟 AI 绘画有什么关系呢?

    就是有研究人员开始根据技术反过来想,如果给它文字标签描述,是否也可以生成图片呢?结果模型真的能根据文字生成一堆小图片,如此一来,这个逻辑成为 AI 绘画的新研究方向。

    三、潘多拉魔盒 2015 年之后其实还有很多这方面不同的尝试与研究,但普遍属于上述技术的不同优化。

    真正让 AI 迎来质的飞跃是在 2021 年,网红人工智能公司 OpenAI 推出了 AI 绘画产品 DALL· E。

    这个版本的出图水平还很一般,但已经完全是根据文字提示来进行作画了。

    2022 年,DALL·E-2 版本推出,水平大幅提升,AI 绘画就是这个阶段开始获得广泛关注的。而且更关键的是 OpenAI 公司开源了 DALL· E 的深度学习模型 CLIP(Contrastive Language-Image Pre-TrAIning)。

    CLIP 模型训练 AI 同时做两件事情,其一是理解自然语言,其二是视觉分析,然后通过不停训练来优化两者对应程度,比如将马桶跟马桶图像完全对应上,如果马桶对了茅坑就得再来,最后形成“咒语绘画”这样的局面。

    问题来了,过去的 AI 绘画模型其实也有干这件事情,为什么 CLIP 如此优秀?明显,就是 CLIP 做训练的量远远超过过去任何模型,据说大致是 40 亿个以上的“文本-图像”数据,而且跟过去其它模型不同的是这些数据是免费的,并非人力成本天价的标注图像,因为鸡贼的 CLIP 采用的居然是广泛散布在互联网上的各种图片,这些互联网图片一般都带有各种文本描述,比如标题、注释,甚至标签等等,这些天然资源就是最佳的训练样本,果然是思路一变,市场一片,随后就很快出现不少超级厉害的应用工具。

    比如 2022 年 2 月,SomnAI 等几个开源社区做了一款 AI 绘图生成器——Disco diffusion,2022 年 3 月份,由 Disco diffusion 的核心人员参与建设的 AI 生成器 Midjouney 也正式发布,Disco diffusion 跟 Midjouney 问世后都在不停进步。

    2022 年 8 月时候,美国游戏设计师杰森(Jason Allen) 就凭借一幅 AI 绘画作品《太空歌剧院》(Théâtre D'opéra Spatial),斩获美国科罗拉多州博览会美术竞赛一等奖。

    当杰森公布这是一张由 Midjouney 创作的 AI 绘画作品时,引发了大部分参赛者的愤怒,也引发新一轮针对人工智能技术的讨论。再随后就到了 2023 年,相关发生的事情大家历历在目,此处不必重复。

    四、未来的展望 AI 从绘画进一步拓展到不同领域可以说是必然发生的了。

    但关于展望,我感觉应该尽量积极点,就是 AI 技术将被多国联合驯化,结合到经济发展中产业化,创造出更多岗位,如同 15 年前不敢想象人居然可以全职就对着手机说话,并且优秀的还赚不少钱。

    直播与短视频产业带动了很多故事策划、文案创作、视频拍摄、特效制作、服装道具、音视频硬件、场地租赁等等商业需求,也盘活了过去很多传统行业。

    这些事情是抖音 1.0 无法想象的,他们也许最初只想做一款成功的娱乐应用,而 AI 最初也只是想尽量干出人类能干的事情,更关键的是,AI 只能知道过去人类想过什么,永远不知道人类接下来会想什么。

    欢迎关注作者的微信公众号「 设计史 太浓」:


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通