-
如何给政府/国企做设计?收下这份G端产品的设计方法
UI交互 2022-10-11编者按:政府和国有企业的产品设计和C端、B端有哪些区别?G端用户的特征是什么?数据安全类客户端的设计策略与原则有哪些?编者按:政府和国有企业的 产品设计 和C端、B端有哪些区别?G端用户的特征是什么?数据安全类客户端的设计策略与原则有哪些?本文总结了G端产品的设计方法,需要用到的同学记得收藏。
更多 G端设计 :
如何做好G端可视化中的适老化设计?我总结了10个注意点! 前言 调查显示,2020 年我国老年人口达到约 2.43 亿,占比 18%,50 岁以上的网民群体占比 22.8%,G 端可视化面对的主要群体就是政府领导,而政府大领导普遍都是市级及其以上,年纪大多数为 60 岁往上,属于适老化的涵盖范围,因此探索适老化在 G 端大屏中的体现,也是很有必
阅读文章 >
一、什么是 G 端产品? G 端(Government)产品,是为国有性质的企业服务,根据国家政策、各部门职责梳理业务线,形成完整产业链,帮助监督管理下属机构的重任。
二、C 端和 G 端的差异 我们日常生活中使用的大部分产品都是 C 端(Consume)产品,为消费者、个人用户设计,直接为普通用户提供服务,帮助他们实现个人需求。如 QQ 音乐、抖音、12306、微信等。
G 端的概念接触的较少,由于政府类企业的工作性质比较特殊,我们普通人很少了解到他们的业务内容、工作场景、用户诉求,让我们通过下面的表格初步了解 C 端与 G 端产品的差异:
三、G 端用户特征 1. 客户非用户
这点跟 B 端产品类似。都是专项部门负责软件购买,G 端单位通常会在单位内部设立一个信息科,专门负责企业信息化功能的统筹建设。购买的客户更关心领导视角的产品价值,对使用体验上的关注度相对较低。G 端的购买的客户与实际用户可能之间存在服务与被服务,监管与被监管的关系。
2. 真实用户难触达
购买后,负责软件需求对接工作的是分管领导或信息科,我们很难接触到实际使用的用户,了解到他们的使用场景。这让业务场景调研,产品设计有一定困难。
3. 不知道需求,需要摸索需求
G 端产品需求大多根据国家政策,各部门职责,梳理业务线,形成完整产业链,在探索中完成需求的摸索。这类需求的建立可能来源于某一项政策,需要根据解读探索根本需求,在不断完成工作的过程中寻找最佳途径,将工作内容细化,将需求进行拆解,为每一个拆解后的流程制作一个专属解决方案,从而形成或通用或定制化产品。
4. 竞品难获取
虽然 B 端产品也存在这样的问题,但是 G 端可以说是难上加难。B 端往往在竞品网站上能找到一些信息,或者试用版,但是在 G 端,却很难找到,这跟 G 端的定制化程度高有比较大的关系,且政府应用的封闭性,增加了获取难度。
根据以上特征,我们总结出了 G 端用户的心理需求模型,越往上需求优先级别越高。
四、数据安全类客户端的设计策略与原则 随着信息数字化时代的到来,数据安全类产品也逐渐升级为 G 端的主要产品类型,它的范围包括信息监管、网络监管、设备管控、业务流程管理、数据查杀、防护等方面。他的主要操作都设置在后台管理系统,那么前台的客户端发挥哪些作用呢?
通过对业务及用户特征的分析,从用户的核心诉求出发,我们制定了以下三个客户端的设计原则:
1. 合规
G 端产品的需求来源于政策,这就要求产品首先要做到功能上满足合规要求,合规是从管理者视角做的要求,更多的是监督用户,这让用户产生了一定的抵触情绪,如何满足合规诉求又能让用户欣然接受呢?这就是我们设计的机会点。
转变用户的使用心态,从下载的初始化到日常使用,我们通过文案描述、操作引导等方式让用户感知到软件在帮助用户避免犯错。 操作过程重点体现在核心场景,清晰业务的流转关系,减少页面频繁切换带来的割裂感。 数据通过交互的串联,让用户在使用过程中了解数据之间的关系,可以关联跳转,也可以层层下钻,但要注意层级不易过深,防止用户使用过程中迷失位置。 2. 稳定
虽然 G 端的业务伴随政策更新而变化,但产品面对不同单位客户时仍需定时化开发需求,这就要求产品的信息框架要扩展性强、能适应细节功能的增减。
策略配置、日志查看等通用的功能集中在统一的功能模块操作,减少模块间的跳转,业务模块内可根据场景设置操作入口,满足特殊场景要求的同时增加通用功能的复用率。
3. 安全
视觉文案体现安全
人们通过五感接触到物理世界提供的信息,视觉是五感(视、听、触、嗅、味)中最先触达产品的部分,产品的“视觉印象”很容易影响用户对产品的判断,有时对产品起决定性因素,安全类产品视觉要全面传达安全可信赖的,体现产品核心观念。
更多提高安全感的方法:
研究数十个热门 APP后,我来教你如何「提高用户安全感」 首先本篇文章不讨论任何关于产品运营策略和技术领域的内容,主要以案例为主,分享为用户营造安全感的体验设计思考,希望对你有帮助。
阅读文章 >
风险操作需确认
无论是系统杀毒还是常规操作,对于危险数据的处理都是很谨慎的,操作前系统需告知用户风险,操作后需让用户了解本次操作的影响范围,把选择权交给用户,让用户判断是否处理数据。处理后系统要及时反馈操作结构,并告知处理后后系统的情况,让信息完整。
五、设计方法总结 分析阶段清晰产品定位,通过核心功能拆解出场景、用户的核心诉求; 搭建产品的信息框架,满足场景流转及功能扩展; 交互细节设计时,灵活使用微交互,提升产品的情感化; 视觉精准传递产品定位,视觉效果配合微交互动效,重要节点突出功能、提示。
高手如何做设计?来看腾讯乘车码的实战过程全复盘! 借着近期乘车码相关业务版本迭代的成果产出,本文复盘了过程中的设计工作,将设计体验的思考与经验重新梳理成体系,建立可指导的规范组件库与设计语言。
阅读文章 >
-
超全总结!5个章节帮你完整掌握卡片式设计
UI交互 2022-10-11本文从卡片式设计的定义、设计价值、常见的设计样式、适用场景介绍、设计原则及小技巧五个方面,帮你掌握卡片式设计。更多卡片式设计技巧:新人设计师来收!卡片式设计基础入门指南(附超多案例)很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。本文从卡片式设计的定义、设计价值、常见的设计样式、适用场景介绍、设计原则及小技巧五个方面,帮你掌握卡片式设计。
更多 卡片式设计 技巧:
新人设计师来收!卡片式设计基础入门指南(附超多案例) 很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。
阅读文章 >
前言
近几年,卡片式设计可以说是移动端产品中极为常见的设计形式了,甚至有很多互联网大厂将卡片式设计纳入设计语言,在各大 APP 中得到广泛运用。
卡片式设计自带分割属性、让界面更有层次感,能给人一种视觉上的享受,也因此让其成为了页面布局的利器,但它并非万能,因分割的原因可能会影响用户沉浸式的浏览体验、造成横向/纵向空间浪费等问题,需要根据实际场景和内容形式来确定,不要专门为了“卡片式”而设计。
很多设计师对卡片设计习以为常,但对于使用卡片的原因、视觉表现方式、优/缺点等并不是很了解。那么卡片到底该如何设计?需要注意哪些细节?笔者根据经验并结合平时的一些思考,跟大家一起聊聊在设计中极易忽略的细则,希望能帮助大家提升卡片设计的精致感。
一、卡片式设计的定义 1. 什么是卡片?
早在互联网时代之前,卡片就出现在了我们生活中的方方面面,如名片、不干胶标签、便利贴、会员卡...等,不管是何种类型的卡片,它都将代表着我们现实生活中的某个特定信息。
卡片指的是含有图片或文本信息的容器,它将我们需要的信息归纳在一起、并形成独立的个体,以至于后续被引用到线上界面中,同样具有非常不错的信息归纳效果。
2. 互联网中的卡片式设计
卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在 UI 设计中,个性化和美感兼备的卡片式设计具有很强的易用性,它是一个 UI 设计组件,将标题、文本内容、图形/图片进行整合并模块化,让信息的表达更加直观、操作也更便捷。
卡片式设计之所以能成为当今比较流行的趋势,是因为它能让界面信息更有层次感,从设计、交互、视觉以及用户体验等各方面来看,都有不错的优点。站在用户角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相对来说,学习成本也是极低的。
二、卡片式设计价值 1. 结构清晰
卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现,使界面结构更加清晰。相比纯粹的留白或分割线,卡片不仅对信息作出了分割,其本身还是一个独立的容器,让归纳组合后的信息能快速突出重点,将复杂内容简单化处理。
卡片式布局整齐简练,清晰的信息结构有助于用户浏览,方便快速找到自己感兴趣的内容,避免用户产生一种费时或感觉内容超长的恐惧感,还能节省更多的时间成本。最常见的就是信息列表、图文混排等,不仅做到了视觉上的美观,也达到了平衡文字及图片强弱的效果。
2. 场景拓展
卡片式设计有利于场景拓展,他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体,在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼...等。
3. 空间扩展
卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局,在空间有限的移动端设备中,还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分,不仅能给予用户更多选择与期待,其空间利用率也得到了很好的扩展,在展示更多内容的情况下依然能保持模块的整体性。
4. 突出重点
卡片式设计能很好的通过边界衬托出内容的整体性,特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致,即便在卡片数量较多的情况下,用户依然能清晰的感知到内容的归属层级以及重要信息。
5. 兼容多端
卡片作为一个容器,它可以自由无限的等比缩放,非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下,通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计,让同一界面在不同设备之间轻易的创造出一致性的视觉体验。
6. 易于操作
卡片给人最直观的感觉就是可以操作,它不用箭头、按钮或超链接等引导性的视觉元素提醒,节省了一定的页面空间,还有着更大的操作热区,无需做到精准点击。卡片式设计很容易融入各种交出手势,如单击、双击、长按、拖动、滑动等,为用户提供更多便捷的操作。
7. 跳转流畅
卡片可通过缩放的形式充分利用动画进行页面跳转,例如 App Store“Today”频道,点击卡片后直接等比放大至全屏,给用户一种还停留在当前页面的错觉,避免了传统的跳转页面而造成的信息割裂感,流畅丝滑的过渡,给用户更自然的交互体验。
三、常见的卡片式设计样式 1. 四周留白
这种类型的卡片在 UI 设计中最为常见,柔和的圆角、边缘阴影以及四周很自然的留白,让内容模块的存在感更加强烈,整个页面信息的层级也更加清晰。
2. 悬浮内容之上
悬浮型卡片并非模态弹窗,与其相比,悬浮卡片不需要主动操作触发,可作为临时控件或长期固定显示,并且比模态弹窗能承载更多信息内容,可通过伸缩来定义卡片中的信息数量,或多、或少、或展示、或隐藏,在页面中非常灵活。
例如高德地图首页,搜索框及右侧的功能入口长期悬浮在地图之上,而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量,非常实用。
3. 通栏类型
通栏类型的卡片具有更强的视觉阻断,对区分不同的功能模块有不错的效果,不过这种类型只通过页面背景色保留上下边间、且不会过多,不然页面会显得零散、杂乱。
四、卡片适用场景介绍 1. 瀑布流
瀑布流主要正针对图片较多、或以图片为主的内容设计,它最大的优点是无需过于在意图片的高度,最大限度的还原原始图片效果。
卡片式设计的瀑布流对信息的组合、包容性更强,不仅能在单屏区域内显示更多内容,同时又将每组信息组合作出了明确的划分,在不破坏页面整体性的基础上也做到了相对独立,如花瓣、Pinterest 就是最好的例子。
2. 信息流
信息流的展现方式主要以文字、图片或视频内容为主,是一种较长内容的媒介,不管哪种展现方式,其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。
卡片式设计将信息进行分块处理,通过阻隔的方式快速告知用户每个卡片的核心内容,便于用户在长时间的滑动过程中也能快速识别重要信息。
3. 左/右滑动
卡片式左右滑动组合在音乐、视频类产品中用最为广泛,因内容本身就图片居多,也更适合卡片式设计,相比平铺具有更强的层次感,对用户的吸引力较强,尤其最右侧漏出的一小部分内容营造出神秘的感觉,用户会不由自主的想去滑动以求获取更多信息。
4. 优惠卡/券
卡/券设计实际是把生活中的实物映射到了 UI 设计中,通过模拟实物造型设计成卡片样式,有效降低用户的理解成本,并对其有了更直观的感知,真实感尤为强烈。
5. 突发事件/临时提醒
对于用户主动触发或系统临时发起的非固定性内容,利用卡片式设计会让信息布局更灵活、视觉更突出,在不影响用户使用的前提下,可出现在任何位置。
6. 部分页面头图
卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括,并在头部位置进行重点突出,不仅让原本单个的内容形成整体,还能营造出沉浸式的氛围。
五、卡片式设计原则及小技巧 1. 一致性原则
为了保持界面设计的一致性,需要将卡片样式纳入设计规范,例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等,大部分情况下都需要遵循设计规范。
2. 功能定位决定卡片形式
在同一产品中,虽然要遵循设计规范以确保一致性的视觉效果,但并非所有页面都适合卡片式设计。
那么,到底是否需要采用卡片形式、使用哪种卡片类型?这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式,很浪费纵向空间、甚至会显得很“鸡肋”,用分隔线或间距留白来区分信息组显然更合适;但对于电商类型的产品,利用卡片将不同的商品分隔后又进行归纳,会更容易识别,信息的可读性也会更强。
3. 避免过多卡片嵌套
卡片式设计本身就包含了容器与背景的层级表现,为了保持内容的正常展示与用户浏览体验,避免在卡片中嵌套多层卡片,以免信息层级杂/乱而增加用户的视觉负担。
如果再同一卡片中需要再次区分多个信息组,可利用间距留白、分割线或浅色背景等元素属性来区分,依然能达到想要的效果。
4. 合理利用横向空间
因为卡片内、外的双向间距留白,在空间有限的移动端设备中,横向空间利用率较低,因此除了合理的减小左右间距外,还可以适当利用左右滑动来扩充横向隐性空间。
例如淘票票首页,在 1.5 屏的范围内,几乎每个模块都能横向滑动查看更多内容,从用户体验角度出发,这是纵向空间无法比拟的。
5. 降低纵向空间的浪费
卡片式设计不是目的,其主要是用来更好的区分信息层级、提升用户浏览体验,因为卡片要作为独立空间的存在,必定会增加上下间距而导致页面拉长,因此,如无必要,不必盲目采用卡片式设计。
例如美团 APP 的「首页、电商、购物车、我的」4 大主功能页面都使用了卡片形式,而「消息」页则采用分割线进行信息分组,试想一下,如果为了统一规范而使用卡片,不仅造成很强的割裂感、还会极大的浪费纵向空间。
6. 长文表达不适合卡片
这点不用多说,新闻资讯类产品的内容详情页就是最好的证明,不管其他页面是否采用卡片形式,但详情页并不会跟随形式,一方面可以让同屏展示更多内容、增加空间利用率,另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。
7. 突出一个核心内容
很多时候,我们总会听到 PM 说这个很重要、那个也很重要,都需要突出一点,殊不知当什么都突出了也说明什么都没有突出。在单个卡片中,组始终牢记这个准则:一次只突出一个核心信息,以便于用户快速、精准捕捉,切记不可贪多。
六、结语 卡片式设计之所有能快速流行起来且经久不衰, 其主要得益于自身的灵活性,尤其是在跨设备、跨屏幕上有着纯天然的优势,能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计,它是一种自由布局的设计语言,通过多种方式的信息组合、结合丰富的交互操作,给用户创造出极致的使用体验。
信息的呈现方式虽有不同,但最终的目的都是为了服务于内容,卡片式设计只是其中的一种形式而已,在设计过程中,我们需要根据内容结合实际情况作出合理的判断,切勿拘泥于形式而忽略内容本身的重要性。
任何设计风格及展现形式都有可能成为历史,卡片式设计也不会例外,但绝对不是这么快就结束,它依然值得我们去深究,力求打造更好的信息布局、更舒适的用户体验。
更多卡片式设计方法:
腾讯超全干货,帮你完整掌握「卡片式设计」知识点 卡片式设计对于我们来说并不陌生,从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例,卡片式设计也是 UI 设计中最常用的方式之一。
阅读文章 >
欢迎关注作者微信公众号:「能量眼球」
-
Google、Meta又放大招!用嘴做视频的时代也要来了
UI交互 2022-10-11大家好,这里是和你们聊设计的花生~近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻松入门的高度。AI绘图神器Dr...大家好,这里是和你们聊设计的花生~
近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻松入门的高度。
AI绘图神器Dream studio又出黑科技!以图绘图、智能改图终于来啦 大家好,这里是和你们聊设计的花生~ 8 月的时候向大家推荐了一款 AI 图像生成工具 Dream Studio。
阅读文章 >
除了这些着力发展文本-图像(text-image)模型的科技公司,我在 8 月份也向大家概括地介绍过 Google、微软、Facebook 这些我们熟悉的互联网科技巨头在文本-图像 AI 模型上的研发成果,也同样有不凡的生成功能。
人工智能快速出图!盘点 4 款大厂出品的 AI 绘画神器 大家好,我是和你们聊设计的花生~ 在 6 月份的时候我写了一篇有关 AI 图像工具的文章,为大家盘点了当时热门的 4 款人工智能图像生成工具,分别是 Disco Difussion、Dall·E 2、Midjounery 和 Tiamat。
阅读文章 >
而在短短 2 个月后的今天,Facebook 和 Google 又发布了新的文本-视频(text-video)模型,不禁让人惊叹 AI 技术速度未免太快了些。今天就带大家一起简单了解一下这两款由科技巨头推出的 AI 视频工具 Make-A-Video 和 Imagen Video。
一、Make-A-Video(Meta) 官网: makeavideo.studio (需梯子)
Make-A-Video 是由 Meta AI(Facebook)研发的一最新的 AI 工具,由创始人马克·扎格伯格 9 月 29 日在 Facebook 上宣布推出。作用是可以根据文本描述直接生成视频,名字则是与 Meta AI 之前推出的文本-图像模型 Make-A-Scene 保持一致,非常直白。
Make-A-Video 在其官网上展示了大量的演示视频以说明其功能,包括超现实的、现实的和风格化 3 种类型。
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-1.mp4
超现实:A teddy bear painting a portrait(一只泰迪熊在画自画像)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-2.mp4
超现实:Cat watching TV with a remote in hand(手持遥控器的猫在看电视)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-3.mp4
现实:Clown fish swimming through the coral reef(小丑鱼在珊瑚礁中游泳)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-4.mp4
风格化:There is a table by a window with sunlight streaming through illuminating a pile of books(窗边有一张桌子,阳光照射进来,照亮了一堆书)
除了可以根据文本描述生成视频,Make-A-Video 还可以仅根据一张图片就生成视频、为两张图片填充中间的动作,以及根据原有的视频,生成同样类型的视屏变体。
将一张静态图片转为视频:
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
根据一个视频生成多个同类型变体:
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
从官方给出的范例可以看出,Make-A-Video 在整体能很好的将文本描述转化为视频的样式,视频中的主体、动作的对象,动作的顺序以及运动方式基本符合正常认知。
但同时 AI 生成的视频也存有明显的缺陷,比画面会出现有不正常的抖动和扭曲,动作连接不如真实视频那样流畅,一些动物的五官出现畸变、动作方式怪异(比如猫身上交接了一个人手),以及视频的清晰度并不高等。
二、Imagen Video( Google) 官网地址: research.google (需梯子)
在 Make-A-Video 推出了后仅一周的时间,Google 就发布了自己的 AI 视频扩散模型 Imagen Video。
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
图片来源:Imagen Video 官网
与 Make-A-Video 相比,Imagen 给人最直观的感受就是清晰度很高——画面分辨率可以达到1280×768(Make-A-Video则为512*512),帧率则可以达到24 fps。Imagen Video在其官网展现了很多案例,强烈建议大家去看一下。
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
Flying through an intense battle between pirate ships in a stormy ocean.(在狂风大作的海洋中,飞过海盗船之间的激烈战斗)
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
A teddy bear washing dishes(一只洗碗的泰迪熊)
据官方介绍,Imagen Video 不仅能够生成高保真度的视频,还具有高度的可控性和完善的世界知识,能够创建不同艺术风格的视频和文本动画。但和 Make-A-Video 一样,Imagen Video 也存在画面不正常抖动、主体畸形、动作不够流畅等问题。
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-10.mp4
A cat eating food out of a bowl, in style of van Gogh(一只猫在吃碗里的食物,梵高的风格)
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
Incredibly detailed science fiction scene set on an alien planet view of amarketplace.Pixel art(令人难以置信的详细的科幻场景,设置在一个外星球上的市场景观,像素艺术)
但如同扎克伯格在其推文中写到的一样,AI 模型能从生成静态像素发展到预测每个像素随着时间推移发生的变化,这在技术上已经是一个突破了。Make-A-Video 发布时不少人都觉得清晰度太低了,而 Imagen Video 却很快就优化这个问题,这足以让我们相信过不了多久 AI 就会解决现存的一些缺陷,在视频真实度、精准度和长度上给我们带来新的惊喜。
而且现在也已经出现了 AI 音频工具,能够根据文本描述生成极具真实感的音频文件,与 Make-A-Video 和 Imagen Video 这种 AI 视频工具相结合正好能够创建出音画俱全的视频。如果这些 AI 工具能够应用到实际的创作中,那么视频创作的门槛想必也会大大降低,传统视频制作时所需的人员调度、布景、后期等工作不再那么必要,制作视频小样变得非常容易,也能释放更多的创作生产力。
文本-音频 (Text to Audio) 的 AI 模型 AudioGen 在其项目主页中展示的 AI 音频成果。图片来源: https://felixkreuk.github.io/text2audio_arxiv_samples/
目前 Imagen Video 并没有对外开放,原因是官方认为用于训练 AI 视频模型系统的数据仍包含有问题的内容,可能会导致 Imagen Video 产生图形暴力或色情剪辑,给社会带来不良影响。而在这些问题得到缓解之前,谷歌不会开放 Imagen Video 模型或源代码。而 Make-A-Video 有一个申请内测的渠道,感兴趣的小伙伴可以去其 官网 上填写注册表格。
对 AI 视频工具的出现以之后的发展应有你有什么看法呢?欢迎大家在评论区写出自己的看法,或者在优设问答里和大家一起交流~
问题:Google 和 Facebook 宣布研发出了最新的 AI 视频工具,能根据文本描述生成视频及文本动画,对此你怎么看?
链接: https://www.uisdc.com/talk/121207477940.html
参考资料:
https://arstechnica.com/information-technology/2022/09/write-text-get-video-meta-announces-ai-video-generator/ https://techcrunch.com/2022/10/05/google-answers-metas-video-generating-ai-with-its-own-dubbed-imagen-video/ https://venturebeat.com/ai/google-ai-generator-takes-on-meta-as-text-to-video-trend-ramps-up/ https://felixkreuk.github.io/text2audio_arxiv_samples/ 推荐阅读:
又一个AI黑科技!无缝连续纹理贴图生成神器Ponzu 大家好 ,这里是 设计神器 挖掘前线记者花生为您发回的实时报道 ~ 现如今人工智能发展迅速,各种 AI 工具层出不穷。
阅读文章 >
Unsplash 宣布禁传AI生成图像,人们对AI的反抗要拉开序幕了? 大家好,这里是和你们聊设计的花生~ 9 月 21 日,国外知名大型图库 Getty Images 宣布禁止用户上传和销售使用 AI 模型(包括 DALL-E、Midjourney 和 Stable Diffusion 等)生成的插画,网站内存有的 AI 图像也会被删除。
阅读文章 >
-
手绘教程!10个人物绘制技巧让你的角色更生动!
UI交互 2022-10-11编者按:论手绘中难度最高的,人物绘制当占一席之地。今天从头部结构、颈部与肩膀、手臂绘制、腿部绘制4个方面,帮你掌握人物绘制的原理和技巧。上期回顾:手绘教程!编者按:论手绘中难度最高的,人物绘制当占一席之地。今天从头部结构、颈部与肩膀、 手臂绘制 、 腿部绘制 4个方面,帮你掌握人物绘制的原理和技巧。
上期回顾:
手绘教程!超全的脚部绘制技巧,收藏这篇就够了 大家好!
阅读文章 >
Hello~大家好!我是优设手绘班的讲师-橙子(全平台 ID @啤酒味的橙子酱 )
画人物形象的过程中,相信大多数绘手都经历过画不好头部、头颈肩的连接,以及手臂腿部画不出体积感。
今天分享一些人物的绘制原理与绘制小技巧,希望能够帮拯救一下你的人物角色,让他们更加生动真实!
一、头颈肩的绘制技巧 1. 头部结构
俗话说万事开头难!我们先来看看头部结构。
头部重要的结构是头部颞骨的位置、颧骨的位置以及下颌角的位置,这些位置属于头部的重要转折点。
从基础的结构过渡到细分结构的过程:
知道了基础的头部结构以外,也可以了解一下不同角度下的头部结构的透视变化。
绘制也有一些容易出错的地方,如何把头部造型画准确呢,下面整理了一个小技巧!
① 绘制准确的头部造型
首先我们可以把头部做一个简单的拆分帮助我们理解,右侧拆分为头部的球体(紫色部分)+下颌角(蓝色部分)。
也可以看看其他人物的头像插画,大部分都符合这个规律:
2. 颈部与肩膀
颈部与肩膀之间的关联是非常密切的,所以这里我们就一起进行分析。
在颈部与肩膀部分比较重要的肌肉是:颈部的胸锁乳突肌,以及连接颈部与肩膀的斜方肌。
以下案例图:胸锁乳突肌(红色);斜方肌(蓝色);锁骨(紫红色)
结合照片可以进一步观察具体的肌肉位置:
① 头部与颈部的关系
头部与颈部的衔接也是很多同学会出现问题的地方,首先我们需要理解它们之间的穿插关系。
不同动作状态下颈部与头部也会产生挤压,但是注意也需要用立体的穿插思维去观察。
② 颈部肩部易错点
容易出错的地方就是肩膀部分的斜角,大部分同学会直接画成直线,忽略了肩膀部分的斜方肌的起伏变化。
通过图片能观察到肩膀边缘的起伏变化,而并不是一条平直的线。
另外就是锁骨的位置,也是容易直接一条直线概括,这里可以通过照片仔细观察,就了解锁骨部分骨骼的穿插关系。
通过结构我们就能明白锁骨的正确位置。
二、手臂的绘制技巧 1. 手臂骨骼肌肉
手臂的骨骼部分需要记住的知识点不多,主要是大臂部分的肱骨,小臂部分是尺骨与桡骨的结合。
这里需要注意的是尺骨与桡骨之间的旋转角度,会因为手臂的旋转而发生变化。
因为手臂部分的肌肉和结构都是比较简单的,大家可以背一下哦。下面我们来看一下肌肉部分。
肌肉部分需要记住的就是肱二头肌,以及理解三角肌与其他肌肉之间的穿插关系。
2. 手臂绘制易错点
① 肩膀与手臂的连接
这个位置会出错的原因就是因为没有理解三角肌,三角肌是连接肩膀与手臂的,在手臂向上抬起的时候,也会有明显的肌肉起伏变化。
通过图片我们就能理解为什么自己在画手臂与肩膀的时候会出现问题了。
② 手臂的体积感
体积感弱的大部分原因都是因为肌肉的起伏变化没有画出来,在一些重要的关节部分也可以画得明显一些,比如手腕、手肘部分。这样才会更加真实,有体积感。
三、腿部的绘制技巧 1. 腿部肌肉结构
腿部的骨骼结构和手臂是类似的,在大腿部分的骨骼是股骨,小腿部分是两根骨头,分别是腓骨和胫骨,连接大腿和小腿的骨骼是髌骨,也就是膝盖骨的位置,这里我们可以把骨骼结构与肌肉结构放在一起对比,方便记忆和理解。
大腿部分大面积的肌肉是:股四头肌,还有一条狭长的缝匠肌。
小腿部分的肌肉主要是:在小腿的后侧,分别是腓肠肌外侧和腓肠肌内侧,另外还有比目鱼肌连接小腿和脚后跟的位置。
2. 腿部绘制易错点
腿部的易错点和手臂也有类似的地方,比如体积感不强。除此之外还有造型部分常出现的问题。
① 腿部的起伏变化
我们可以从侧面观察腿部的起伏变化,整个腿部的造型类似一个「B」,女性的小腿部分会更加纤细,突出的是曲线的美感,而男性的小腿部分可以强调肌肉,增加力量感。
② 高低起伏节奏变化
腿部的肌肉因为有高低的起伏变化,所以在绘制腿部的时候,我们可以记住起伏变化的规律性,那么外轮廓与内轮廓也有规律节奏。具体是看腿部的内侧和外侧的高低落差,帮助我们确定位置。
通过图片我们就可以看出整个腿部的高低错落类似「Z」字型,背面则是反写的「Z」这样在绘制的时候运用规律检查形体问题就更方便啦。
四、人物绘制书籍 文章到这里就快结束啦!绘制人物的过程中,如果你有疑惑,可以快速查阅人物结构书籍,因为书籍的内容更全面。很多时候,光看网络上的人体图,很难理解到位,而结构书上都会画的很详细,同时还有文字解析,以下介绍的几本书,1-2 本就够用啦!
1.《理解人体形态》
我个人使用率最高的一本书,人物结构内容绘制得很详细,以结构图片为主,文字比较少,方便日常查阅结构透视。
2.《艺用人体结构》
这本书的人物结构讲解得更为详细,分解常见动态的肌肉和结构,因为每页都是彩印,翻阅起来也不会枯燥,非常适合零基础使用。
3.《牛津艺用人体解剖学》
以肌肉骨骼结构讲解为主的书籍,如果你想深入理解肌肉,可以选择这本哦!
4.《伯里曼》
这是本很多人都知道的人体结构书籍,内容更适合进阶使用,因为内容绘制的结构较为复杂,零基础理解起来有些困难。
如果你在学画画的过程中,出现了以下问题:
完全零基础太难学了...
书太厚,看得好痛苦…
画出来的腰臀还是不成比例...
你缺少的可能不是方法,而是一门能引你入门,解决你各种疑惑的手绘系统课。
这门课程需要符合以下 3 点:
由浅入深系统教学、一对一指导优化、适合的作业难度
在这里向你介绍一下我正在上课的「优设手绘就业衔接班」,60天从插画入门到入行!教你掌握大厂非常欢迎的插画风格,人物、场景、配色、商稿流程都有! 而且上手快,无需手绘板,零基础也能学,Mac/Win/iPad 都能学!
添加微信获得更多详情「可乐:uisdc4」「大胖:uisdc5 」
更多 手绘教程 :
坚持画100张速涂之后, 总结出这4个万能的配色技巧 Hello~大家好,我是优设插画实战营的讲师@Asen-阿森 很多朋友对于配色总觉得棘手,不知道通过什么样的练习方式能够提高色感,那我就推荐大家可以试试速涂的方式来锻炼配色,顺便还能提升自己对造型和细节的刻画能力。
阅读文章 >
-
手绘教程!10个人物绘制技巧让你的角色更生动!
UI交互 2022-10-11编者按:论手绘中难度最高的,人物绘制当占一席之地。今天从头部结构、颈部与肩膀、手臂绘制、腿部绘制4个方面,帮你掌握人物绘制的原理和技巧。上期回顾:手绘教程!编者按:论手绘中难度最高的,人物绘制当占一席之地。今天从头部结构、颈部与肩膀、 手臂绘制 、 腿部绘制 4个方面,帮你掌握人物绘制的原理和技巧。
上期回顾:
手绘教程!超全的脚部绘制技巧,收藏这篇就够了 大家好!
阅读文章 >
Hello~大家好!我是优设手绘班的讲师-橙子(全平台 ID @啤酒味的橙子酱 )
画人物形象的过程中,相信大多数绘手都经历过画不好头部、头颈肩的连接,以及手臂腿部画不出体积感。
今天分享一些人物的绘制原理与绘制小技巧,希望能够帮拯救一下你的人物角色,让他们更加生动真实!
一、头颈肩的绘制技巧 1. 头部结构
俗话说万事开头难!我们先来看看头部结构。
头部重要的结构是头部颞骨的位置、颧骨的位置以及下颌角的位置,这些位置属于头部的重要转折点。
从基础的结构过渡到细分结构的过程:
知道了基础的头部结构以外,也可以了解一下不同角度下的头部结构的透视变化。
绘制也有一些容易出错的地方,如何把头部造型画准确呢,下面整理了一个小技巧!
① 绘制准确的头部造型
首先我们可以把头部做一个简单的拆分帮助我们理解,右侧拆分为头部的球体(紫色部分)+下颌角(蓝色部分)。
也可以看看其他人物的头像插画,大部分都符合这个规律:
2. 颈部与肩膀
颈部与肩膀之间的关联是非常密切的,所以这里我们就一起进行分析。
在颈部与肩膀部分比较重要的肌肉是:颈部的胸锁乳突肌,以及连接颈部与肩膀的斜方肌。
以下案例图:胸锁乳突肌(红色);斜方肌(蓝色);锁骨(紫红色)
结合照片可以进一步观察具体的肌肉位置:
① 头部与颈部的关系
头部与颈部的衔接也是很多同学会出现问题的地方,首先我们需要理解它们之间的穿插关系。
不同动作状态下颈部与头部也会产生挤压,但是注意也需要用立体的穿插思维去观察。
② 颈部肩部易错点
容易出错的地方就是肩膀部分的斜角,大部分同学会直接画成直线,忽略了肩膀部分的斜方肌的起伏变化。
通过图片能观察到肩膀边缘的起伏变化,而并不是一条平直的线。
另外就是锁骨的位置,也是容易直接一条直线概括,这里可以通过照片仔细观察,就了解锁骨部分骨骼的穿插关系。
通过结构我们就能明白锁骨的正确位置。
二、手臂的绘制技巧 1. 手臂骨骼肌肉
手臂的骨骼部分需要记住的知识点不多,主要是大臂部分的肱骨,小臂部分是尺骨与桡骨的结合。
这里需要注意的是尺骨与桡骨之间的旋转角度,会因为手臂的旋转而发生变化。
因为手臂部分的肌肉和结构都是比较简单的,大家可以背一下哦。下面我们来看一下肌肉部分。
肌肉部分需要记住的就是肱二头肌,以及理解三角肌与其他肌肉之间的穿插关系。
2. 手臂绘制易错点
① 肩膀与手臂的连接
这个位置会出错的原因就是因为没有理解三角肌,三角肌是连接肩膀与手臂的,在手臂向上抬起的时候,也会有明显的肌肉起伏变化。
通过图片我们就能理解为什么自己在画手臂与肩膀的时候会出现问题了。
② 手臂的体积感
体积感弱的大部分原因都是因为肌肉的起伏变化没有画出来,在一些重要的关节部分也可以画得明显一些,比如手腕、手肘部分。这样才会更加真实,有体积感。
三、腿部的绘制技巧 1. 腿部肌肉结构
腿部的骨骼结构和手臂是类似的,在大腿部分的骨骼是股骨,小腿部分是两根骨头,分别是腓骨和胫骨,连接大腿和小腿的骨骼是髌骨,也就是膝盖骨的位置,这里我们可以把骨骼结构与肌肉结构放在一起对比,方便记忆和理解。
大腿部分大面积的肌肉是:股四头肌,还有一条狭长的缝匠肌。
小腿部分的肌肉主要是:在小腿的后侧,分别是腓肠肌外侧和腓肠肌内侧,另外还有比目鱼肌连接小腿和脚后跟的位置。
2. 腿部绘制易错点
腿部的易错点和手臂也有类似的地方,比如体积感不强。除此之外还有造型部分常出现的问题。
① 腿部的起伏变化
我们可以从侧面观察腿部的起伏变化,整个腿部的造型类似一个「B」,女性的小腿部分会更加纤细,突出的是曲线的美感,而男性的小腿部分可以强调肌肉,增加力量感。
② 高低起伏节奏变化
腿部的肌肉因为有高低的起伏变化,所以在绘制腿部的时候,我们可以记住起伏变化的规律性,那么外轮廓与内轮廓也有规律节奏。具体是看腿部的内侧和外侧的高低落差,帮助我们确定位置。
通过图片我们就可以看出整个腿部的高低错落类似「Z」字型,背面则是反写的「Z」这样在绘制的时候运用规律检查形体问题就更方便啦。
四、人物绘制书籍 文章到这里就快结束啦!绘制人物的过程中,如果你有疑惑,可以快速查阅人物结构书籍,因为书籍的内容更全面。很多时候,光看网络上的人体图,很难理解到位,而结构书上都会画的很详细,同时还有文字解析,以下介绍的几本书,1-2 本就够用啦!
1.《理解人体形态》
我个人使用率最高的一本书,人物结构内容绘制得很详细,以结构图片为主,文字比较少,方便日常查阅结构透视。
2.《艺用人体结构》
这本书的人物结构讲解得更为详细,分解常见动态的肌肉和结构,因为每页都是彩印,翻阅起来也不会枯燥,非常适合零基础使用。
3.《牛津艺用人体解剖学》
以肌肉骨骼结构讲解为主的书籍,如果你想深入理解肌肉,可以选择这本哦!
4.《伯里曼》
这是本很多人都知道的人体结构书籍,内容更适合进阶使用,因为内容绘制的结构较为复杂,零基础理解起来有些困难。
如果你在学画画的过程中,出现了以下问题:
完全零基础太难学了...
书太厚,看得好痛苦…
画出来的腰臀还是不成比例...
你缺少的可能不是方法,而是一门能引你入门,解决你各种疑惑的手绘系统课。
这门课程需要符合以下 3 点:
由浅入深系统教学、一对一指导优化、适合的作业难度
在这里向你介绍一下我正在上课的「优设手绘就业衔接班」,60天从插画入门到入行!教你掌握大厂非常欢迎的插画风格,人物、场景、配色、商稿流程都有! 而且上手快,无需手绘板,零基础也能学,Mac/Win/iPad 都能学!
添加微信获得更多详情「可乐:uisdc4」「大胖:uisdc5 」
更多 手绘教程 :
坚持画100张速涂之后, 总结出这4个万能的配色技巧 Hello~大家好,我是优设插画实战营的讲师@Asen-阿森 很多朋友对于配色总觉得棘手,不知道通过什么样的练习方式能够提高色感,那我就推荐大家可以试试速涂的方式来锻炼配色,顺便还能提升自己对造型和细节的刻画能力。
阅读文章 >
-
Google、Meta又放大招!用嘴做视频的时代也要来了
UI交互 2022-10-11大家好,这里是和你们聊设计的花生~近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻松入门的高度。AI绘图神器Dr...大家好,这里是和你们聊设计的花生~
近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻松入门的高度。
AI绘图神器Dream studio又出黑科技!以图绘图、智能改图终于来啦 大家好,这里是和你们聊设计的花生~ 8 月的时候向大家推荐了一款 AI 图像生成工具 Dream Studio。
阅读文章 >
除了这些着力发展文本-图像(text-image)模型的科技公司,我在 8 月份也向大家概括地介绍过 Google、微软、Facebook 这些我们熟悉的互联网科技巨头在文本-图像 AI 模型上的研发成果,也同样有不凡的生成功能。
人工智能快速出图!盘点 4 款大厂出品的 AI 绘画神器 大家好,我是和你们聊设计的花生~ 在 6 月份的时候我写了一篇有关 AI 图像工具的文章,为大家盘点了当时热门的 4 款人工智能图像生成工具,分别是 Disco Difussion、Dall·E 2、Midjounery 和 Tiamat。
阅读文章 >
而在短短 2 个月后的今天,Facebook 和 Google 又发布了新的文本-视频(text-video)模型,不禁让人惊叹 AI 技术速度未免太快了些。今天就带大家一起简单了解一下这两款由科技巨头推出的 AI 视频工具 Make-A-Video 和 Imagen Video。
一、Make-A-Video(Meta) 官网: makeavideo.studio (需梯子)
Make-A-Video 是由 Meta AI(Facebook)研发的一最新的 AI 工具,由创始人马克·扎格伯格 9 月 29 日在 Facebook 上宣布推出。作用是可以根据文本描述直接生成视频,名字则是与 Meta AI 之前推出的文本-图像模型 Make-A-Scene 保持一致,非常直白。
Make-A-Video 在其官网上展示了大量的演示视频以说明其功能,包括超现实的、现实的和风格化 3 种类型。
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-1.mp4
超现实:A teddy bear painting a portrait(一只泰迪熊在画自画像)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-2.mp4
超现实:Cat watching TV with a remote in hand(手持遥控器的猫在看电视)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-3.mp4
现实:Clown fish swimming through the coral reef(小丑鱼在珊瑚礁中游泳)
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-4.mp4
风格化:There is a table by a window with sunlight streaming through illuminating a pile of books(窗边有一张桌子,阳光照射进来,照亮了一堆书)
除了可以根据文本描述生成视频,Make-A-Video 还可以仅根据一张图片就生成视频、为两张图片填充中间的动作,以及根据原有的视频,生成同样类型的视屏变体。
将一张静态图片转为视频:
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
根据一个视频生成多个同类型变体:
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
从官方给出的范例可以看出,Make-A-Video 在整体能很好的将文本描述转化为视频的样式,视频中的主体、动作的对象,动作的顺序以及运动方式基本符合正常认知。
但同时 AI 生成的视频也存有明显的缺陷,比画面会出现有不正常的抖动和扭曲,动作连接不如真实视频那样流畅,一些动物的五官出现畸变、动作方式怪异(比如猫身上交接了一个人手),以及视频的清晰度并不高等。
二、Imagen Video( Google) 官网地址: research.google (需梯子)
在 Make-A-Video 推出了后仅一周的时间,Google 就发布了自己的 AI 视频扩散模型 Imagen Video。
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
图片来源:Imagen Video 官网
与 Make-A-Video 相比,Imagen 给人最直观的感受就是清晰度很高——画面分辨率可以达到1280×768(Make-A-Video则为512*512),帧率则可以达到24 fps。Imagen Video在其官网展现了很多案例,强烈建议大家去看一下。
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
Flying through an intense battle between pirate ships in a stormy ocean.(在狂风大作的海洋中,飞过海盗船之间的激烈战斗)
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
A teddy bear washing dishes(一只洗碗的泰迪熊)
据官方介绍,Imagen Video 不仅能够生成高保真度的视频,还具有高度的可控性和完善的世界知识,能够创建不同艺术风格的视频和文本动画。但和 Make-A-Video 一样,Imagen Video 也存在画面不正常抖动、主体畸形、动作不够流畅等问题。
https://image.uisdc.com/wp-content/uploads/2022/10/uisdc-ai-20221010-1-10.mp4
A cat eating food out of a bowl, in style of van Gogh(一只猫在吃碗里的食物,梵高的风格)
当视频无法加载时请刷新页面, 或前往PC获得最佳体验。
Incredibly detailed science fiction scene set on an alien planet view of amarketplace.Pixel art(令人难以置信的详细的科幻场景,设置在一个外星球上的市场景观,像素艺术)
但如同扎克伯格在其推文中写到的一样,AI 模型能从生成静态像素发展到预测每个像素随着时间推移发生的变化,这在技术上已经是一个突破了。Make-A-Video 发布时不少人都觉得清晰度太低了,而 Imagen Video 却很快就优化这个问题,这足以让我们相信过不了多久 AI 就会解决现存的一些缺陷,在视频真实度、精准度和长度上给我们带来新的惊喜。
而且现在也已经出现了 AI 音频工具,能够根据文本描述生成极具真实感的音频文件,与 Make-A-Video 和 Imagen Video 这种 AI 视频工具相结合正好能够创建出音画俱全的视频。如果这些 AI 工具能够应用到实际的创作中,那么视频创作的门槛想必也会大大降低,传统视频制作时所需的人员调度、布景、后期等工作不再那么必要,制作视频小样变得非常容易,也能释放更多的创作生产力。
文本-音频 (Text to Audio) 的 AI 模型 AudioGen 在其项目主页中展示的 AI 音频成果。图片来源: https://felixkreuk.github.io/text2audio_arxiv_samples/
目前 Imagen Video 并没有对外开放,原因是官方认为用于训练 AI 视频模型系统的数据仍包含有问题的内容,可能会导致 Imagen Video 产生图形暴力或色情剪辑,给社会带来不良影响。而在这些问题得到缓解之前,谷歌不会开放 Imagen Video 模型或源代码。而 Make-A-Video 有一个申请内测的渠道,感兴趣的小伙伴可以去其 官网 上填写注册表格。
对 AI 视频工具的出现以之后的发展应有你有什么看法呢?欢迎大家在评论区写出自己的看法,或者在优设问答里和大家一起交流~
问题:Google 和 Facebook 宣布研发出了最新的 AI 视频工具,能根据文本描述生成视频及文本动画,对此你怎么看?
链接: https://www.uisdc.com/talk/121207477940.html
参考资料:
https://arstechnica.com/information-technology/2022/09/write-text-get-video-meta-announces-ai-video-generator/ https://techcrunch.com/2022/10/05/google-answers-metas-video-generating-ai-with-its-own-dubbed-imagen-video/ https://venturebeat.com/ai/google-ai-generator-takes-on-meta-as-text-to-video-trend-ramps-up/ https://felixkreuk.github.io/text2audio_arxiv_samples/ 推荐阅读:
又一个AI黑科技!无缝连续纹理贴图生成神器Ponzu 大家好 ,这里是 设计神器 挖掘前线记者花生为您发回的实时报道 ~ 现如今人工智能发展迅速,各种 AI 工具层出不穷。
阅读文章 >
Unsplash 宣布禁传AI生成图像,人们对AI的反抗要拉开序幕了? 大家好,这里是和你们聊设计的花生~ 9 月 21 日,国外知名大型图库 Getty Images 宣布禁止用户上传和销售使用 AI 模型(包括 DALL-E、Midjourney 和 Stable Diffusion 等)生成的插画,网站内存有的 AI 图像也会被删除。
阅读文章 >
-
设计师如何轻松过稿?3个阶段帮你快速掌握!
UI交互 2022-10-10本文从前期、中期、后期三个阶段,分析如何快速过稿。如何快速提高过稿率?我分3个阶段帮你完全掌握(上)不知道你是不是跟曾经的我一样,在刚入行 1-2 年的时候,过方案稿的时候对自己的设计提案并没什么信心,怯怯的说不出个所以然,经常被评审的产品、开发等上下游问懵了,然后现抓理由缓解尴尬,会反复修改,找不到感觉。本文从前期、中期、后期三个阶段,分析如何快速过稿。
如何快速提高过稿率?我分3个阶段帮你完全掌握(上) 不知道你是不是跟曾经的我一样,在刚入行 1-2 年的时候,过方案稿的时候对自己的设计提案并没什么信心,怯怯的说不出个所以然,经常被评审的产品、开发等上下游问懵了,然后现抓理由缓解尴尬,会反复修改,找不到感觉。
阅读文章 >
如何快速提高过稿率?我分3个阶段帮你完全掌握(中) 本文将讲解设计前、中、后的结构,总结设计师在什么样的阶段采取什么样的策略能提高过稿率。
阅读文章 >
如何快速提高过稿率?我分3个阶段帮你完全掌握(下) 上期回顾 设计评审 见过很多设计师在最终结果呈现时,只是扔两张设计效果图到群里,等待他人的反馈,在完整的项目交付一定不要这么做。
阅读文章 >
很多设计师喜欢在拿到产品原型后就开始动手设计,或直接去找参考和竞品。这种工作模式存在较大的缺陷,我们在不了解需求背景时做出的方案,同样也显得苍白无力,经不住盘问或审核。
在 B 端领域中,决策者大多不是使用者,而决策者也往往不是一个人,很多 设计师 应该听甲方说过“要高大上”“感觉不对,这不是我想要的”继而产生各种天马行空的想法,在你的方案继续升华,而你还是靠着猜测苦中作乐,最后一句“还是第一版吧”让你彻底崩溃。
如何最大程度改变这种现状,那就看下面的内容吧。
一、前期:如何快速理解业务目标和应用场景? 1. 人
要知道自己的用户和决策者是谁,了解他们的特征和喜好,判断他们的认知和心智,做针对性的方案和视觉。如:
我们的用户是谁? 决策者有哪些? 用户社会属性是什么样子的? 用户和决策者的偏好是什么? 决策者是否有绝对主导权? 决策者的认知和心智在什么阶段? 2. 行为
用户需要完成哪些事情,通过什么动作去完成,用户的习惯偏好是什么?如:
用户使用产品做哪些事情? 用户的具体行为路径? 用户的交互习惯? 用户对交互的认知怎样? 3. 目的
用户想要达成的目标,或产品和功能目标是什么?如:
用户使用产品要达到什么目标? 商业目标是什么? 设计目标是什么? 4. 环境
用户在什么场景/环境下使用产品,使用产品的频次怎么样,用户在是嘈杂的环境还是安静的环境,在办公室还是户外场景?如:
用户在什么环境在使用产品? 用户有哪些场景,是否有特殊场景? 每个场景都有什么特征? 5. 媒介
用户使用什么工具,是电脑、手机、ipad 还是其它形式?
6. 5W1H
最后通过 5W1H 模型去将需求进行串联。
二、中期:如何设计符合用户认知的方案? 1. 头脑风暴方案,草绘记录
设计方案要以先框架后局部的思路进行,不要纠结在细节表现上,而是从整体看产品的结构然后再逐一细化,颗粒度由粗到细的过程。
我们要发散思维,根据结论头脑风暴去思考多的设计方案并快速草绘记录下来,这里可以大胆一些把想到的方案全部草绘出来(建议大家直接在纸上画,简单便捷),最后根据业务场景逐一去分析每个方案的优劣势进一步筛选方案。
当你的灵感枯竭时就停止脑暴,然后去细化你筛选后的方案。
如果一开始就没有灵感,那就去大量看直接竞品或间接竞直到灵感涌现,这里平时还是建议大家多去看、多去收集分析与行业或者形态相关的产品。
一般企业自研产品大多是找不到竞品的,所以还是需要根据业务场景去做高度符合的方案。那么如何去做符合业务场景的方案呢?
举个作品集中,FM 首页改版的例子供大家参考一下改版思路。
2. 用户洞察,设计符合用户认知和心智的方案
一定要去做符合用户认知的产品架构和 UI 视觉,比如我们的决策者是国企背景,在这个大环境下决策者的做事风格是规矩的、严谨的,他们几乎每天都在使用 word、excel、ppt 这种办公软件或者传统软件,所以对一些新型产品的交互、视觉、创新上的接受程度是有限的(尤其大 boss)。
所以我们在设计方案时,交互和视觉上要尽量保持中规中矩的方案,如果可以,尽量使用符合用户认知的设计元素和交互。如:我之前负责国企光缆资源采集项目时,设计元素和交互流程大量运用了输入行列生成布局、表格、表单组成的简单元素贯穿了一个场景,这样可以降低用户的学习和操作成本,符合用户认知和心智,也提高了用户的接受度(同时也要考虑方案是否满足使用者)。
这里有两个比较经典的案例和大家分享,假设案例中的人是你,你会怎样思考或者怎样做?欢迎评论区留言。
经典案例一:项目背景是设计一个国家军方应急系统,有 A 和 B 两名设计师共同负责,A 设计师的设计风格紧跟当下流行设计趋势;B 设计师的设计方案却中规中矩,视觉呈现得很 Low。那么你认为这两名设计师谁的方案更容易通过呢?
案例一结论:答案是 B 设计师。产品目标不同、用户不同,UI 视觉和方案也会有较大的差异。
你觉得的美只是你主观意识,并不是客观存在的事实,所以要去拆分目标和洞察用户去做用户认为美的“东西”,当然我们也可以去做视觉引导,但很多时候却不那么如意。
“好看”有两层定义:
视觉的好看 实用的好看 当用户对产品有要求时,不要急于按照要求去做设计,而是要先去对齐对“要求”的定义和理解。大家对美的主观感觉会根据自身背景和环境有极大的偏差,要在理解和认知达成一致的情况下,再去设计方案。下面这个案例中,你认为哪个设计师的方案才能更满足用户?
经典案例二:项目为公安系统,用户对产品提出风格要求——科技感,A设计师在了解客户要求后直接进行UI设计;B设计师则去先跟用户定义对“科技感”的理解,然后再去设计方案。
案例二结论:答案是 B 设计师。无论客户有什么要求都要先对齐对理解的一致,避免大家沉浸在各自的世界里,上述案例中 B 设计师的交付还会超出甲方的预期。
应该很多设计师听过甲方说过“要高大上”“感觉不对,这不是我想要的”继而产生各种天马行空的想法,在你的方案继续升华,而你还是靠着猜测在苦中作乐,最后一句“还是第一版吧”让你彻底崩溃。
所以很多时候甲方是说不出具体的方向和需求的,这个时候除了对齐对要求的理解,还要去引导他或者挖掘需求。
设计没有绝对的美丑,做国企项目、TG 或军方的小伙伴应该会有所感受。
作为 B 端产品任何设计元素都应该与业务场景仅仅相关,而受目标用户、行业的不同,产品的视觉和交互也会有较大差异。
三、后期:方案交付有哪些技巧? 1. 二选一法则
在提交设计方案给甲方时,要学会让甲方做选择,而不是让甲方被动接受,现在的甲方都很有主见,都喜欢自己选择,自己做决定。
从营销学角度可以借鉴二选一法则,我也经常会被这个技巧套路。比如你去买奶茶时,销售员问你喝什么,你会在琳琅满目的产品中艰难抉择;如果向你推荐“奶茶三兄弟”或者“桃之夭夭”的饮品,你会下意识地脱口而出:“那就桃之夭夭吧。”
二选一法则在我们生活中无处不在,比如在约会时问对方“周六一起看电影还是周天?”购物时等等场景。
只让对方回答“接受”或“不接受”很难达到你预想的结果,因为二选一法则的技巧就是让甲方在“这个方案”跟“那个方案”之间做选择,而不是在“接受”与“不接受”之间做选择。
而现实中我们大部分设计师很喜欢让甲方做接受与不接受的选择。
所以我们要去改变交付方案的习惯,设计是和生活息息相关的,生活中发生的事情或其它领域的小技巧也可以在设计中发挥不小的作用。
二选一法则释义:当我们对别人进行说服时,对方因为存在过多的选择或没有准确目标时,作为说服者可以采用缩小对事物选择的整体范围,直到剩余两个办法,来让对方做出你预期的选择。
下面举个例子,帮助大家理解:
A 设计师:“您好,我们根据需求做了两版方案,方案一我们是这样思考的(阐述设计理念及过程)……方案二是这样思考的(阐述设计理念及过程)……您看方案一和方案二哪个更符合需求呢?
甲方:“看起来方案二更符合我们的需求。”
人类具有一种跟随最后选择的习性,当你想让他人跟随你的意愿进行选择的时候,不妨给客户一个二选一的提问,将希望对方选择的那项放在最后。采用这种巧妙的习性心理,往往能够让你在交付中更顺畅。
2. 表现层的差异化
最后才是视觉表现的差异化区分,不同方案中我们可以用不同的风格和技法,打造鲜明的对比,从外观和大感觉上推得远一些,往往也会有出其不意的效果(根据甲方特征去针对性做策略)。如果有足够的把握,两个方案的风格做到相似就可以了,视情况而定。
3. 事前有准备,不要做事后聪明
为了应对比较难搞的甲方,我们要留有备选方案,以备不时之需拿出来应急,设计圈儿似乎有条不成文的规矩,你最看不上的设计稿往往是甲方最喜欢的;甲方在变来变去的方案中,往往会选择第一稿的方案。
四、结语 只有在设计前、中、后的三个阶段做好充足的准备,才有可能将变化控制到最小范围。
有时客户不接受我们的方案,不妨认真想一想,我们真的是在做以人为本的设计吗?我们是在追求技法的表现,还是追求效率的提升和产品的体验?
最后艺术是感性的,设计是理性的,艺术更专注于自我表达,设计则专注于信息传达和用户的感受。
-
设计师如何填写OKR?我总结了这4个常见案例(附大厂方法)
UI交互 2022-10-10设计师如何填写OKR?本文总结了4个常见的案例和谷歌的OKR方法,帮你学会用OKR助力设计。设计团队如何推进OKR,实现设计赋能?设计师如何填写OKR?本文总结了4个常见的案例和谷歌的OKR方法,帮你学会用 OKR 助力设计。
设计团队如何推进OKR,实现设计赋能? 咏舍:10月初,在我们团队内宣贯了 OKR目标方法论以及如何以设计策略助力商业赋能提升团队效能。
阅读文章 >
前段时间有些忙,许多时间和精力都花在了团队例行的年中总结与开启下半年的目标计划,因此也没在日常设计生活中擦出什么值得分享的观点与大家探讨。最近提交完 OKR,回想起自己待过的几个团队中,每个团队的 OKR 填写方式都不一样,想借此机会和大家探讨一下“设计师如何填写 OKR”,之所以认为这个议题有价值,主要是:
OKR 的填写方式会直接影响一个团队的处事方式,进而影响团队氛围,如果你不喜欢你现在的团队氛围,或许是 OKR 制定得不合理;如果你想找个合适的团队,也可以从对方团队的 OKR 中窥探一二;
确定关键问题:OKR 可以让你知道你负责的业务下一阶段的重点目标,帮助你分配有限的精力到更能出彩的任务上去;
展示“成功”:无论是内部晋升还是跳跃到更好的团队,都会关注你的工作是否“成功”,写好 OKR 可以前置思考如何将 UX 的价值转化为利益相关者的语言,辅助说明你的“成功”;
一、OKR 填写案例 下面和大家分享几个我待过的团队是如何填写 okr 的,以及这种方式如何影响了团队。
1. 大量参考产品的数据指标
以直播业务为例,这种 OKR 填写方式表现为:
O1: 完善直播社交体验,提升评论 pv/uv 突破 x/x、提升连线 pv/uv 突破 x/x
KR1:完善看播用户连线体验,连线率提升 x%,人均连线次数提升到 x;
KR2:完善看播用户评论体验,评论率提升 x%,人均评论次数提升到 x;
O2:提高直播间营收能力...
KR1:...
KR2:...
这种 OKR 的填写方式建立在团队成员按业务划分需求的基础上,每个人都有自己固定负责的业务板块,且更大概率出现在小产品或设计团队构建得尚未成熟的阶段。这样的 OKR 填写方式弊端很明显:
每个业务板块的成员只认领/关注自己的产品指标,长久以往会缺乏全局性思维;
只关注且过分关注具体的数据指标,会忽略思考需求合理性,为了达到数据目标牺牲用户体验(反正体验好了绩效也不会好);
直接把大目标设置为具体的某个数值很可能反映了领头人对产品现阶段的困境/机会点没有较深入的理解,只会“人有多大胆,地有多大产”;
这种团队的设计氛围是最压抑的,工作内容常常是自己人打自己人,抢首页曝光、抢奖励资源,可以为了实现数据指标滥用弹窗与红点。
2. 仅关注设计工作方式
还是以直播业务为例,这种 OKR 填写方式表现为:
O1:高效高质地支持直播业务需求,提升 用户体验
KR1:清晰地理解业务方的需求并推导出设计目标;
KR2:高效输出合理的设计方案,结合数据与用研合理推导,做有依据的设计;
KR3:及时跟进上线情况,做好总结与复盘;
O2:有效沟通,专业化表达…
KR1:...
KR2:...
上述例子往往发生在成员之间没有明确的业务划分的团队,因此很难将业务相关的目标填入 OKR。这种填写方式可以说只是套用了 OKR 的外壳,而没有使用到 OKR 这个工具。如此方式去年也可以写、今年也可以写、明年也可以写,既然如此,周期性地复制粘贴又有何意义?总的来说弊端有:
每个周期的 OKR 都只是把没有争议的“行为准则”换种语言复述一遍;
很可能造成团队未来一段时间内做的需求会东一榔头西一棒槌,能把小事做好,但难把大事做对;
过度抽离业务,难以衡量设计产出与价值;
这种“OKR”与其说是“OKR”不如说是职级评定标准。当然好处也是有的,没有业务指标上的压力,设计师能更专注地把单个小设计做好,也不需要年复一年地目标“大跃进”。
3.关注大目标并落实到具体的某个项目
还是以直播业务为例,这种 OKR 填写方式表现为:
组长 OKR:
O1: 优化直播间社交互动体验
KR1:支持视频连线项目设计落地;@设计师 A
KR2:前置探索 1 个创新的直播互动形式,并产出可落地方案;@设计师 A
KR3:至少完成 2 个常规礼物及 1 个创新礼物上新;@设计师 B
KR4:完成节日礼物分析报告;@设计师 B
O2:...
设计师 A's OKR:
O1: 优化直播间社交互动体验
KR1: 支持视频连线项目高质高效落地;
KR2: 前置探索创新的直播互动形式,并产出可落地方案;
O2:...
这是我认为较合理的 OKR 填写方式,它的优点有:
明确产品发展重点方向;
明确为了实现大目标需完成的具体项目;
明确“完成”的定义,包括产出形式和产出数量;
在我和同伴推荐上述的 OKR 填写方式时,同伴指出了该方式的弊端——“无法横向比较设计师的贡献”,即主播连线项目与礼物分析报告的价值无法被衡量,也因此难以比较设计师A与设计师B的产出。由此,他也向我推荐了第四种OKR填写方式。
4. 拆解业务指标到体验指标
这种填写方式有一个背景是公司会确定接下来要做的项目是什么,再明确项目的完成指标如使用率,接下来从使用率再拆解到使用意愿、曝光率、完成率,最后产品认领目标中的业务指标,如曝光率,设计认领目标中的体验指标,如使用意愿、完成率。如果还是以直播业务为例,OKR 会表现为:
设计领导 OKR
O1: 提升直播基础链路体验,产出 2 个优化点并落地
KR1: 直播连线:提高用户对直播连线的使用意愿和功能完成率到 x%,@设计师 A;
KR2:直播体验升级:针对直播流程中高频痛点产出解决方案,直播场景满意度和 NPS 提高到 x%,@设计师 B
好处是在明确产品发展重点方向的基础上:
产品与设计师发力同一个大目标
包含业务指标与体验指标,衡量方式较平衡且完整;
关键结果均为可数据化的指标,方便团队内横向比较;
以上是国内常见的 OKR 填写形式,各有利弊。OKR 最开始是由英特尔公司创始人安迪·葛洛夫发明,并由约翰·道尔引入谷歌使用,在 99 年被谷歌发扬光大,而后相继被国内外企业广泛使用的,那么我们不妨来看看谷歌是如何使用 OKR 的?
二、谷歌公司是怎么做的 为了了解这部分内容,我阅读了《这就是 OKR》,并从中摘取了一些关键内容,可以简要归为以下 5 点:
1. 明确目标和意图:目标是“什么”
目标必须是有形的(拒绝管理上的形式主义)
客观的(意味着不要设定无法完成或无法控制的 OKR)
明确的(可被衡量)
目标的成功实现必须能够为公司带来明确的价值(意味着需从战略角度进行思考)
2. 关键结果意味着“怎么做”
描述可衡量的结果,而不是行为(或活动)。包含可用的、可信的、易察觉的证据;如果 OKR 中包含有诸如“咨询”、“帮助”、“分析”或“参与”等词汇,这类描述其实就是指行为(活动)。相反,应当是描述这些活动对用户所产生的影响。
书中举例:“在 3 月 7 日之前发布 Colossus 系统的 6 个存储单元的平均延迟和尾延迟测量值”而不是“评估 Colossus 系统的延迟情况”
3. 跨团队 OKR
例如,如果广告开发团队、广告运营维护团队和网络部署团队都必须支持新的广告服务项目,那么在这三个团队中都应该有各自的 OKR 来描述他们在该项目中所承担的责任。
4. 承诺型 OKR 与愿景型 OKR
承诺型 OKR 是指我们一定会实现的 OKR,是我们甘愿通过调整工作时间和资源配置以确保其得以实现的目标;愿景型 OKR 表达了我们对世界变化的预期,不过我们可能并不清楚如何到达那里,以及实现这一 OKR 所必需的资源,愿景型 OKR 的目标将超过团队在给定季度内执行的能力。承诺型 OKR 与愿景型 OKR 的设定大致满足:
日常必须完成的工作不应该完全填满人力,要预留一些时间来畅想未来
5. 建立一种自由的环境
这里的“自由”包括:
可随时更改、添加或删除 OKR 指标。随着环境条件的改变,只要适合组织的发展,即使是在考核周期的中期阶段也可调整 OKR;
允许每个人出现失败,而无须受到批判
此外,书里还描述了 OKR 的衡量分数,这部分我认为设定得不够科学,重要程度也不高。很明显我们有更具体的体验指标可以来替代这套打分体系:
常见的 UX 指标
最后我想再次明确:OKR 只是一个工具,这个工具的目的是帮助团队识别什么是重要的、什么是最优的,以及在他们的日常工作中需要做出哪些权衡。如果团队运用了 OKR 却没达到这个目的,可以考虑替换工具,如果团队运用了 OKR 却是为了达到别的目的,那么请时刻提醒自己避免掉入激励陷阱,毕竟拉长时间来看,过好人生才是我们的 O,工作只是其中的一个 KR。
本文参考
《这就是 OKR》, John Doerr, 2018; https://maze.co/collections/ux-ui-design/ux-team-kpis/ ; 欢迎关注作者微信公众号:「白话说交互」
-
设计师如何轻松过稿?3个阶段帮你快速掌握!
UI交互 2022-10-10本文从前期、中期、后期三个阶段,分析如何快速过稿。如何快速提高过稿率?我分3个阶段帮你完全掌握(上)不知道你是不是跟曾经的我一样,在刚入行 1-2 年的时候,过方案稿的时候对自己的设计提案并没什么信心,怯怯的说不出个所以然,经常被评审的产品、开发等上下游问懵了,然后现抓理由缓解尴尬,会反复修改,找不到感觉。本文从前期、中期、后期三个阶段,分析如何快速过稿。
如何快速提高过稿率?我分3个阶段帮你完全掌握(上) 不知道你是不是跟曾经的我一样,在刚入行 1-2 年的时候,过方案稿的时候对自己的设计提案并没什么信心,怯怯的说不出个所以然,经常被评审的产品、开发等上下游问懵了,然后现抓理由缓解尴尬,会反复修改,找不到感觉。
阅读文章 >
如何快速提高过稿率?我分3个阶段帮你完全掌握(中) 本文将讲解设计前、中、后的结构,总结设计师在什么样的阶段采取什么样的策略能提高过稿率。
阅读文章 >
如何快速提高过稿率?我分3个阶段帮你完全掌握(下) 上期回顾 设计评审 见过很多设计师在最终结果呈现时,只是扔两张设计效果图到群里,等待他人的反馈,在完整的项目交付一定不要这么做。
阅读文章 >
很多设计师喜欢在拿到产品原型后就开始动手设计,或直接去找参考和竞品。这种工作模式存在较大的缺陷,我们在不了解需求背景时做出的方案,同样也显得苍白无力,经不住盘问或审核。
在 B 端领域中,决策者大多不是使用者,而决策者也往往不是一个人,很多 设计师 应该听甲方说过“要高大上”“感觉不对,这不是我想要的”继而产生各种天马行空的想法,在你的方案继续升华,而你还是靠着猜测苦中作乐,最后一句“还是第一版吧”让你彻底崩溃。
如何最大程度改变这种现状,那就看下面的内容吧。
一、前期:如何快速理解业务目标和应用场景? 1. 人
要知道自己的用户和决策者是谁,了解他们的特征和喜好,判断他们的认知和心智,做针对性的方案和视觉。如:
我们的用户是谁? 决策者有哪些? 用户社会属性是什么样子的? 用户和决策者的偏好是什么? 决策者是否有绝对主导权? 决策者的认知和心智在什么阶段? 2. 行为
用户需要完成哪些事情,通过什么动作去完成,用户的习惯偏好是什么?如:
用户使用产品做哪些事情? 用户的具体行为路径? 用户的交互习惯? 用户对交互的认知怎样? 3. 目的
用户想要达成的目标,或产品和功能目标是什么?如:
用户使用产品要达到什么目标? 商业目标是什么? 设计目标是什么? 4. 环境
用户在什么场景/环境下使用产品,使用产品的频次怎么样,用户在是嘈杂的环境还是安静的环境,在办公室还是户外场景?如:
用户在什么环境在使用产品? 用户有哪些场景,是否有特殊场景? 每个场景都有什么特征? 5. 媒介
用户使用什么工具,是电脑、手机、ipad 还是其它形式?
6. 5W1H
最后通过 5W1H 模型去将需求进行串联。
二、中期:如何设计符合用户认知的方案? 1. 头脑风暴方案,草绘记录
设计方案要以先框架后局部的思路进行,不要纠结在细节表现上,而是从整体看产品的结构然后再逐一细化,颗粒度由粗到细的过程。
我们要发散思维,根据结论头脑风暴去思考多的设计方案并快速草绘记录下来,这里可以大胆一些把想到的方案全部草绘出来(建议大家直接在纸上画,简单便捷),最后根据业务场景逐一去分析每个方案的优劣势进一步筛选方案。
当你的灵感枯竭时就停止脑暴,然后去细化你筛选后的方案。
如果一开始就没有灵感,那就去大量看直接竞品或间接竞直到灵感涌现,这里平时还是建议大家多去看、多去收集分析与行业或者形态相关的产品。
一般企业自研产品大多是找不到竞品的,所以还是需要根据业务场景去做高度符合的方案。那么如何去做符合业务场景的方案呢?
举个作品集中,FM 首页改版的例子供大家参考一下改版思路。
2. 用户洞察,设计符合用户认知和心智的方案
一定要去做符合用户认知的产品架构和 UI 视觉,比如我们的决策者是国企背景,在这个大环境下决策者的做事风格是规矩的、严谨的,他们几乎每天都在使用 word、excel、ppt 这种办公软件或者传统软件,所以对一些新型产品的交互、视觉、创新上的接受程度是有限的(尤其大 boss)。
所以我们在设计方案时,交互和视觉上要尽量保持中规中矩的方案,如果可以,尽量使用符合用户认知的设计元素和交互。如:我之前负责国企光缆资源采集项目时,设计元素和交互流程大量运用了输入行列生成布局、表格、表单组成的简单元素贯穿了一个场景,这样可以降低用户的学习和操作成本,符合用户认知和心智,也提高了用户的接受度(同时也要考虑方案是否满足使用者)。
这里有两个比较经典的案例和大家分享,假设案例中的人是你,你会怎样思考或者怎样做?欢迎评论区留言。
经典案例一:项目背景是设计一个国家军方应急系统,有 A 和 B 两名设计师共同负责,A 设计师的设计风格紧跟当下流行设计趋势;B 设计师的设计方案却中规中矩,视觉呈现得很 Low。那么你认为这两名设计师谁的方案更容易通过呢?
案例一结论:答案是 B 设计师。产品目标不同、用户不同,UI 视觉和方案也会有较大的差异。
你觉得的美只是你主观意识,并不是客观存在的事实,所以要去拆分目标和洞察用户去做用户认为美的“东西”,当然我们也可以去做视觉引导,但很多时候却不那么如意。
“好看”有两层定义:
视觉的好看 实用的好看 当用户对产品有要求时,不要急于按照要求去做设计,而是要先去对齐对“要求”的定义和理解。大家对美的主观感觉会根据自身背景和环境有极大的偏差,要在理解和认知达成一致的情况下,再去设计方案。下面这个案例中,你认为哪个设计师的方案才能更满足用户?
经典案例二:项目为公安系统,用户对产品提出风格要求——科技感,A设计师在了解客户要求后直接进行UI设计;B设计师则去先跟用户定义对“科技感”的理解,然后再去设计方案。
案例二结论:答案是 B 设计师。无论客户有什么要求都要先对齐对理解的一致,避免大家沉浸在各自的世界里,上述案例中 B 设计师的交付还会超出甲方的预期。
应该很多设计师听过甲方说过“要高大上”“感觉不对,这不是我想要的”继而产生各种天马行空的想法,在你的方案继续升华,而你还是靠着猜测在苦中作乐,最后一句“还是第一版吧”让你彻底崩溃。
所以很多时候甲方是说不出具体的方向和需求的,这个时候除了对齐对要求的理解,还要去引导他或者挖掘需求。
设计没有绝对的美丑,做国企项目、TG 或军方的小伙伴应该会有所感受。
作为 B 端产品任何设计元素都应该与业务场景仅仅相关,而受目标用户、行业的不同,产品的视觉和交互也会有较大差异。
三、后期:方案交付有哪些技巧? 1. 二选一法则
在提交设计方案给甲方时,要学会让甲方做选择,而不是让甲方被动接受,现在的甲方都很有主见,都喜欢自己选择,自己做决定。
从营销学角度可以借鉴二选一法则,我也经常会被这个技巧套路。比如你去买奶茶时,销售员问你喝什么,你会在琳琅满目的产品中艰难抉择;如果向你推荐“奶茶三兄弟”或者“桃之夭夭”的饮品,你会下意识地脱口而出:“那就桃之夭夭吧。”
二选一法则在我们生活中无处不在,比如在约会时问对方“周六一起看电影还是周天?”购物时等等场景。
只让对方回答“接受”或“不接受”很难达到你预想的结果,因为二选一法则的技巧就是让甲方在“这个方案”跟“那个方案”之间做选择,而不是在“接受”与“不接受”之间做选择。
而现实中我们大部分设计师很喜欢让甲方做接受与不接受的选择。
所以我们要去改变交付方案的习惯,设计是和生活息息相关的,生活中发生的事情或其它领域的小技巧也可以在设计中发挥不小的作用。
二选一法则释义:当我们对别人进行说服时,对方因为存在过多的选择或没有准确目标时,作为说服者可以采用缩小对事物选择的整体范围,直到剩余两个办法,来让对方做出你预期的选择。
下面举个例子,帮助大家理解:
A 设计师:“您好,我们根据需求做了两版方案,方案一我们是这样思考的(阐述设计理念及过程)……方案二是这样思考的(阐述设计理念及过程)……您看方案一和方案二哪个更符合需求呢?
甲方:“看起来方案二更符合我们的需求。”
人类具有一种跟随最后选择的习性,当你想让他人跟随你的意愿进行选择的时候,不妨给客户一个二选一的提问,将希望对方选择的那项放在最后。采用这种巧妙的习性心理,往往能够让你在交付中更顺畅。
2. 表现层的差异化
最后才是视觉表现的差异化区分,不同方案中我们可以用不同的风格和技法,打造鲜明的对比,从外观和大感觉上推得远一些,往往也会有出其不意的效果(根据甲方特征去针对性做策略)。如果有足够的把握,两个方案的风格做到相似就可以了,视情况而定。
3. 事前有准备,不要做事后聪明
为了应对比较难搞的甲方,我们要留有备选方案,以备不时之需拿出来应急,设计圈儿似乎有条不成文的规矩,你最看不上的设计稿往往是甲方最喜欢的;甲方在变来变去的方案中,往往会选择第一稿的方案。
四、结语 只有在设计前、中、后的三个阶段做好充足的准备,才有可能将变化控制到最小范围。
有时客户不接受我们的方案,不妨认真想一想,我们真的是在做以人为本的设计吗?我们是在追求技法的表现,还是追求效率的提升和产品的体验?
最后艺术是感性的,设计是理性的,艺术更专注于自我表达,设计则专注于信息传达和用户的感受。