• 7个实用技巧,教你搞定可视化图表

    UI交互 2023-01-06
    ​可视化图表是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设...

    可视化图表 是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设计过程有所帮助。

    往期干货:

    如何做好视觉可视化设计?我总结了这72种图表类型 视觉学习者(Visual learner)是那些用图像进行思考的人[1],这些人将脑中的画面转述成词语去与他人进行沟通。

    阅读文章 >

    一、为什么要数据可视化 数据可视化就是用图表来表示数据信息,它所传达的信息包括你所拿到的数据源和你分析后的结果,再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息,是我们可视化的最终目的。

    举个例子,同样一组数据,用表格的形式呈现是很难有所洞察的;如果将各个地区维度的数据聚合以柱图形式呈现,很容易就能看出各个地区间数据的差异,并从中洞察规律。

    关于如何设计好数据可视化图表,这边总结了三个步骤:选择适合的图表,强化视觉层次,图表响应式适配。

    1. 选择适合的图表 数据可视化的图表种类繁多,当我们真的开始作图,往往会遇到一个困境:有这么多类型,要如何选择正确的图表呢?首要依据是考虑所要传达的信息意图,即所要制作的图表它的任务是什么,再通过分析数据关系来选择表达方式;第二层意图是图表传达内容,这时候我们就需要根据数据的特征去突出和强化。

    ① 分析数据关系

    根据数据分析的方式来看,每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构,再结合数据关系作出选择。了解图表的可能知道,一般图表的数据关系有构成、比较、分布,以商业数据为例,常见的还有流转关系。

    构成关系

    构成关系的图表表达的是部分和整体的关系,用于分析总体和各部分的占比比例,构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小,也可以使用比较关系的图表。

    常用图表:饼/环图、堆叠图、面积图等,如涉及到层级结构,还会用矩形树图或旭日图等特殊结构图表。

    关键词:“占比、比例、百分比”

    比较关系

    比较关系是基础分析中常用的一种图表类型。在一定的取值范围内,通过对两个或两个以上的指标分析,可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式,趋势对比用于表示一段时间内数据的变化,分类对比用于比较数据规模。

    常用图表:趋势对比常用图表有折线图、散点图等;分类对比常用条形图、柱状图、气泡图等。

    关键词:“增减、升降、涨跌、波动”

    分布关系

    利用空间分区来展示数据之间的分布关系,常用于体现两个或以上数据的相关性。

    常用图表:散点图、热力图、雷达图等

    关键词:“随着……而变化、A/B之间的相关性、交/并集”等

    关联与流转

    流转关系是 B 端数据常用的一种关系,它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等,以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

    常用图表:关系图、桑基图、漏斗图、进度图等

    关键词:“流程步骤、留存、转化、关系”

    ② 分析数据特征

    按数据关系和分析目的选择好图表类型后,第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有:变量特征、维度特征、层级特征、流程特征。

    变量特征

    分辨一个指标通常有两类特征,按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势,离散数据通常统计各分类下数量的变化。

    连续型数据:指在一定区间内可以任意取值的数据叫连续数据,其数值是连续不断的。如身高、体重等带有时间因素变量的数据等,通常用折线图体现变化趋势。

    离散型数据:指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据,用柱图表现更加体现变量的特征。

    维度特征

    多维度分析需要将多个变量在同一平面上直观的表示,可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据,可使用不同颜色进行分类

    根据分析视角选择图表:对于多维度变量的数据我们需要明确分析的视角,去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据,如需要全局视角查看个班的综合素质,推荐使用雷达图;对比单科成绩的变化分布,则推荐使用堆积图。

    层级特征

    多层级数据由多个部分构成一个整体,又称树形结构数据。除了用结构树图表表现以外,还可以考虑以下两种图表类型:

    矩形树图:突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小,它以面积的形式突出展现各个子层级节点的占比,可帮助用户看到数据的层次结构以及各层级之间的关系。

    例如:上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额,通过色调来区分不同类型,颜色的深浅代表分类下的子集,面积体现销售占比。对比一般结构树图表,它的优势在于可以有效利用空间。

    旭日图:突出细分层级关系。由多个圆环图嵌套而成,也称为径向树图,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。常用于细分分析方法,将事物从大到小进行拆解。每个级别的数据通过 1 个圆环表示,离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效,而矩形树图适合比较相对大小。

    流程特征

    流转关系是表达数据转化流程的重要类型,不仅包含统计意义上的数据总和,同时还表达了信息流转的路径;其中桑基图和漏斗图都可以表达路径中流量的变化,不同的是桑基图重点强调流量的强度和走向,漏斗图更加注重突出转化率和效果,根据不同的表达目的选用。

    2. 强化视觉层次 选择合适的图表后,在信息传达上也需要正确的表达,展示形式美观的同时能够清晰的体现数据特点。

    ① 强化数据特性

    使用图表正确的表达信息,需要设计师在强化数据特性的同时避免偏差

    趋势易感知:折线图数值如过于平均导致趋势平缓,有时候无法体现偏差;在强调数据趋势的场景下,推荐用动态取值范围让波动保持在一定范围内,放大波动占比更突出趋势。

    展示更准确:柱状图依靠柱体面积体现最终数值,使用动态范围截断将会导致数据解读不完整;始终将 y 轴从 0 开始,才能更准确的反映柱图中的值。

    ② 色彩视觉传达

    除了在设计构图上优化以外,颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知,错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板,精确传达信息同时后续的项目在选用时也可以达到用色的统一。

    我们在之前的文章里有介绍过图表的取色模型,通过调整颜色 HSL 值的区间,可以得到以下三种意图色板:

    定性型-分类色板:用于区分不同的类型,又称为无序色板。适合区分没有内在顺序的类别

    定量分歧型-发散色板:通过两边互补色来体现,具有明亮的中间值,然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值

    定量顺序型-顺序色板:从亮到暗或相反的渐变。适合可视化从低到高的数字。

    那么我们要怎么样去使用这些色板呢?下面几个案例将带你了解其中的差异。

    定性型:使用色调来进行分类

    数据内在没有顺序差别时,建议使用色调值(H)进行区分;如定义国家、行业等类型。如果希望图表看起来更加专业,以下有几项分类色板的小建议:

    选取尽量少的色调:取色时无需使用整个色环,使用邻近色或互补色的取色方式显得更加专业。

    色板适度明暗交替:一些视障人士无法区分色相,主要靠颜色的明暗差异来识别,通过饱和度和暗度的调整,创造明暗交替的色板。

    定量型:使用深浅色板强调内在顺序

    如果在同一个分类下包含子类别,或者数据本身具有排名属性,那么建议使用连续色板来突出他们内在的顺序,使图表更加易读。

    顺序色板-选择合适的插值:根据数据的分布情况选择不同的的插值断点,突出数据的差异。如以下案例中,根据统计学概念设定不同的取值区间,左侧示例使用的是平均线性差值,反映的是数据的集中趋势;右侧示例使用的是中位数插值,能更好的体现数据分布的形态。

    发散色板-关注对比色的识别性:尽量避免红绿配色,如需使用绿色,偏黄或偏蓝的绿色更易分辨,对视障人士也更加友好。

    3. 图表中的响应式设计 B 端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报,在基础设计完成后还需要考虑到图表展示的环境,根据不同端去适配显示效果,以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

    ① 布局框架适配

    在网页端显示时,有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态,将非必要的的元素转化或隐藏,保留重要的图形元素去适应当前空间;元素隐藏后使用悬浮交互来保证信息的展示,保持图表的可读性同时也避免产生元素的重叠。

    如案例中的图表,在不同尺寸下通过改变和隐藏图表元素,以达到适配当前空间的效果。

    ② 图表元素适配

    要适配移动端,网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外,还需要考虑手机屏幕的尺寸和图表元素的适配性,去兼容相关的交互操作。

    信息浮层:在图表中,信息卡元素是传达信息内容的重要组件,在网页端中悬浮展示,通常会占据很大空间;图表适配移动端后,信息浮层改动到图表上方常驻显示,并跟随手指的滑动变化响应数值,完整展示信息的同时也避免了页面抖动。

    坐标轴标签:过长的坐标标签在适配过程中会产生重叠,而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配,避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配,精简空间避免堆叠。

    ③ 极值适配

    因 B 端平台的特性,我们无法预知客户传入的数据量,可能会遇到因数据量过多,造成图表显示不佳,数据读取困难等问题。这种情况下,提前考虑数据极限场景,通过交互的形式变化的方式让用户获取完整信息,提升理解同时信息展示更灵活。

    缩放和平移:在数据范围过多时增加取值范围的缩略轴组件,通过限制展示范围让数据量显示可控。

    互动切换视图:如果折线的类别过多且无法省略的,建议分组查看。默认状态仅当前组折线高亮,其他数据以浅色显示,通过切换的方式查看其他组别的信息。

    悬浮鼠标高亮:在分类过多不好分辨时,可使用悬浮高亮的交互方式突出相关联的数据组。

    还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因,在这篇文章就不做深入讲解了,以后可独立介绍。

    结语 数据可视化在 B 端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确,才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据,确保用户能够更好的接收信息,才是可视化的关键。

    * 以上图表中均为虚拟数据,仅作为案例参考

    8000 字深度长文!B端数据可视化设计指南(信息图表篇) 在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

    阅读文章 >

    想做好数据可视化?先掌握常见 5 类图表的特点和设计细节 “数据可视化的目的,是要对数据进行可视化处理,以能够明确地、有效地传递信息。

    阅读文章 >

    欢迎关注作者的微信公众号:「百度MEUX」

  • 改版实战!5个步骤复盘威睿能源官网升级过程

    UI交互 2023-01-06
    一、项目背景威睿能源是吉利旗下,一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心(ZED)合作对其官网改版,让用户更加全面了解的公司的品牌和产品。

    一、项目背景 威睿能源是吉利旗下,一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心(ZED)合作对其 官网改版 ,让用户更加全面了解的公司的品牌和产品。

    更多极氪文章:

    未来趋势!如何用数字孪生打造汽车工厂大屏? 今年上半年我国新能源汽车销量达到乘用车总销量 25 %,同比增长 1.2 倍。

    阅读文章 >

    二、目标归纳 经过与业务方的多次讨论和分析,我们对威睿官网的改版诉求达成共识:

    建立信赖。搭建全新的官网框架内容和设计,让用户更全面的了解公司向用户传递专业、安全、可信赖的感知;提供用户和企业的沟通渠道,减少获客成本,提高潜在客户的留存和转化; 高效曝光。使品牌产品能够快速在线上曝光与迭代,提高公司产品热度,减少广告营销成本;建立可及时维护更新内容的管理后台,方便高效的自主操作即时发布; 理念透传。提高威睿的品牌辨识度,传递高技术/高品质/高安全的品牌理念及价值观;建立品牌影响力,感知客户,服务客户,成就客户;

    在此基础上,我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构,呈现直观有效的信息传达、探索一致新颖的设计语言。

    三、框架制定 要让网站框架清晰合理就必须对用户的诉求进行分析,经过体量和角色两个维度研究,我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。

    在与业务协调确认内容素材,同时结合核心用户的诉需求,根据重要度、关系、次序进行信息的归纳与分析后,确认整个网站的信息架构。

    对于核心的首页,我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击,吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后,最后自然给出联系方式完成转化。

    四、内容设计 新能源工业产品技术规格复杂,如果按产品资料直接平铺,大量文字无处安放,用户阅读费力。所以搭建一个高效,可扩展的内容结构尤为重要。

    为此我们对内容进行排序,精简、合并产品页模块,减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级,让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式,为大量内容划分层次,提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局,营造有序严谨的官网形象,同时也满足平台和各业务的发展和扩展需求。

    增加更丰富的信息纬度,过去以表格、图文呈现的技术信息,现在以图文视频动效等方式展示信息,提升用户对内容的视觉聚焦。

    五、视觉表现 确定视觉风格之前,我们结合品牌调性、产品特色和用户需求,整理情绪版,得到 2 个设计关键词——秩序感、空间感。

    秩序感充满规律和条理,新能源工业产品属于高科技行业,而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。

    网页设计 呈现用户的屏幕上是二维平面,如果能创作中具有立体感和深度感的视觉空间,突破平面信息传递的限制,更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。

    六、秩序感 为了让使用不同屏幕的用户访问网站时都有舒适的界面效果,我们通过对不同断点下栅格的宽度、模块、元素进行调整,保证页面布局的一致性,以达到最佳的页面展示效果。

    框架布局是体系化视觉设计的起点,我们受包豪斯无装饰和极简理念的启发,采用模块化结构去排布图文信息,统一规整理性。

    字体板式可以帮助创建清晰的层级结构,组织信息,高效清晰的呈现设计和内容。形成一套规范体系,沿用与其他门户网站项目中,在视觉上达到统一和整体。

    色彩体系按照品牌书中的颜色指导进行的设计,主要使用了白色和浅灰作为主色调,运用在页面背景中,电光绿作为主识别色,沙黄作为点缀色。强调品牌特性,增强用户记忆。

    七、空间感 采用精致极简、有层次和空间感的三维图形为主视觉元素,契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性,给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方,加上 VRMET 的基座,表达威睿公司电池、电机、电控系统强有力的研发制造能力。

    以核心主图为视觉聚焦点,辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接,底部用错落有致的图形代表平台,包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。

    我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例,快速搭建简化的几何图形,通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。

    设计可复用的通用场景底座,在核心区域搭建代表模块语义的核心图形,快速形成主页面 banner。以此标准化的分层组合手法,可快速搭建多个子页面,高效且体系化。

    结合实际的场景和概念语意,快速创造对应的虚实结合的图形主体物,搭建丰富的 3D 素材库,复用性强、延展性强、提升设计效能。

    总结 此次威睿官网升级不仅搭建了全新的网站,更是建立了全新的科技感强、高品质、安全稳定的品牌形象,助力威睿品牌行业影响力的提升。

    强大的三维动效能力,可搭建空间感强且可交互工厂实景,应用于官网、数字可视化大屏、线下空间场景等,共同助力威睿品牌成为行业标杆。

    欢迎访问全新改版后的威睿官网: https://www.vremt.com/

    关注极氪 ZED 公众号,了解新能源汽车行业的体验设计干货。

  • 改版实战!5个步骤复盘威睿能源官网升级过程

    UI交互 2023-01-06
    一、项目背景威睿能源是吉利旗下,一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心(ZED)合作对其官网改版,让用户更加全面了解的公司的品牌和产品。

    一、项目背景 威睿能源是吉利旗下,一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心(ZED)合作对其 官网改版 ,让用户更加全面了解的公司的品牌和产品。

    更多极氪文章:

    未来趋势!如何用数字孪生打造汽车工厂大屏? 今年上半年我国新能源汽车销量达到乘用车总销量 25 %,同比增长 1.2 倍。

    阅读文章 >

    二、目标归纳 经过与业务方的多次讨论和分析,我们对威睿官网的改版诉求达成共识:

    建立信赖。搭建全新的官网框架内容和设计,让用户更全面的了解公司向用户传递专业、安全、可信赖的感知;提供用户和企业的沟通渠道,减少获客成本,提高潜在客户的留存和转化; 高效曝光。使品牌产品能够快速在线上曝光与迭代,提高公司产品热度,减少广告营销成本;建立可及时维护更新内容的管理后台,方便高效的自主操作即时发布; 理念透传。提高威睿的品牌辨识度,传递高技术/高品质/高安全的品牌理念及价值观;建立品牌影响力,感知客户,服务客户,成就客户;

    在此基础上,我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构,呈现直观有效的信息传达、探索一致新颖的设计语言。

    三、框架制定 要让网站框架清晰合理就必须对用户的诉求进行分析,经过体量和角色两个维度研究,我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。

    在与业务协调确认内容素材,同时结合核心用户的诉需求,根据重要度、关系、次序进行信息的归纳与分析后,确认整个网站的信息架构。

    对于核心的首页,我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击,吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后,最后自然给出联系方式完成转化。

    四、内容设计 新能源工业产品技术规格复杂,如果按产品资料直接平铺,大量文字无处安放,用户阅读费力。所以搭建一个高效,可扩展的内容结构尤为重要。

    为此我们对内容进行排序,精简、合并产品页模块,减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级,让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式,为大量内容划分层次,提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局,营造有序严谨的官网形象,同时也满足平台和各业务的发展和扩展需求。

    增加更丰富的信息纬度,过去以表格、图文呈现的技术信息,现在以图文视频动效等方式展示信息,提升用户对内容的视觉聚焦。

    五、视觉表现 确定视觉风格之前,我们结合品牌调性、产品特色和用户需求,整理情绪版,得到 2 个设计关键词——秩序感、空间感。

    秩序感充满规律和条理,新能源工业产品属于高科技行业,而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。

    网页设计 呈现用户的屏幕上是二维平面,如果能创作中具有立体感和深度感的视觉空间,突破平面信息传递的限制,更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。

    六、秩序感 为了让使用不同屏幕的用户访问网站时都有舒适的界面效果,我们通过对不同断点下栅格的宽度、模块、元素进行调整,保证页面布局的一致性,以达到最佳的页面展示效果。

    框架布局是体系化视觉设计的起点,我们受包豪斯无装饰和极简理念的启发,采用模块化结构去排布图文信息,统一规整理性。

    字体板式可以帮助创建清晰的层级结构,组织信息,高效清晰的呈现设计和内容。形成一套规范体系,沿用与其他门户网站项目中,在视觉上达到统一和整体。

    色彩体系按照品牌书中的颜色指导进行的设计,主要使用了白色和浅灰作为主色调,运用在页面背景中,电光绿作为主识别色,沙黄作为点缀色。强调品牌特性,增强用户记忆。

    七、空间感 采用精致极简、有层次和空间感的三维图形为主视觉元素,契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性,给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方,加上 VRMET 的基座,表达威睿公司电池、电机、电控系统强有力的研发制造能力。

    以核心主图为视觉聚焦点,辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接,底部用错落有致的图形代表平台,包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。

    我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例,快速搭建简化的几何图形,通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。

    设计可复用的通用场景底座,在核心区域搭建代表模块语义的核心图形,快速形成主页面 banner。以此标准化的分层组合手法,可快速搭建多个子页面,高效且体系化。

    结合实际的场景和概念语意,快速创造对应的虚实结合的图形主体物,搭建丰富的 3D 素材库,复用性强、延展性强、提升设计效能。

    总结 此次威睿官网升级不仅搭建了全新的网站,更是建立了全新的科技感强、高品质、安全稳定的品牌形象,助力威睿品牌行业影响力的提升。

    强大的三维动效能力,可搭建空间感强且可交互工厂实景,应用于官网、数字可视化大屏、线下空间场景等,共同助力威睿品牌成为行业标杆。

    欢迎访问全新改版后的威睿官网: https://www.vremt.com/

    关注极氪 ZED 公众号,了解新能源汽车行业的体验设计干货。

  • AlternativeTo:超好用的相似软件推荐网站

    UI交互 2023-01-06
    大家好,这里是和你们聊设计的花生~做设计或者日常学习娱乐我们都离不开各种软件,如果这款软件是免费的就更棒了。今天就为大家介绍一个超强大的相似软件推荐网站 AlternativeTo,它收录了 10 万多个替代软件,涵盖办公、设计、娱乐、编程、效率工具等各个领域,非常适合用来寻找一款软件的免费平替。往期回顾:Sim...

    大家好,这里是和你们聊设计的花生~

    做设计或者日常学习娱乐我们都离不开各种软件,如果这款软件是免费的就更棒了。今天就为大家介绍一个超强大的 相似软件 推荐网站 AlternativeTo ,它收录了 10 万多个替代软件,涵盖办公、设计、娱乐、编程、效率工具等各个领域,非常适合用来寻找一款软件的免费平替。

    往期回顾:

    Similarsites超好用!一键搜索相似网站的神器 大家好,这里为大家推荐神器的花生~ 不知道大家有没有和我一样的经历:经常访问的网站很不错,那如何找到类似的网站;之前收藏的网站突然打不开,不得不重新寻找新的替代网站;或是想找的资源在这个网站里没有,想看看有没有类似的网站能找到。

    阅读文章 >

    AlternativeTo 网站直达: https://alternativeto.net/ (可直接访问,搭梯子浏览速度更快)

    AlternativeTo 是一个免费的相似软件资源推荐网站,由瑞典人 Ola 和 Markus 创立,无需注册打开即用。网站上的资源收集自世界各地网友的投稿推荐,目前共收录了 10 万多个替代软件, 各种办公、设计、视频、音乐、游戏软件和效率工具都可以在上面找到同类型的替代,而且无论是在线网站、Windows、Mac、Linux 还是 Android、iPhone 和 ipad 都有对应的推荐。

    AlternativeTo 网站首页

    网站的显示语言是英语,搜索框在右上角,我们在搜索的时候也要输入英文,觉得英文浏览不方便的小伙伴可以使用具有网页翻译功能的浏览器打开。网站首页展示了「被最多次寻找替代品的软件」、「被查看最多次的软件」和「精选推荐」等版块,其中很多都是我们熟悉的,比如 Z-Library、网飞、Ps、Microsoft Office、Youtube 等,还有最近大热的 ChatGPT、Midjourney 等 AI 工具。

    AlternativeTo 内被最多次寻找替代品的软件

    以 Ps 为例,点击进入“PS 的替代软件界面”后,主要呈现两部分的内容,一部分是关于 Ps 软件本身的介绍,另一部分是所有可替代 Ps 的软件名单。说实话打开之前我都不知道 Ps 能有 200 多个替代软件,太夸张了。不过我们也不用每个都看,因为软件是根据用户点赞数进行排序的,点赞的人数越多排名越靠前,一般看排名前 10 的软件就够了。

    AlternativeTo 对替代软件有非常细致的介绍,信息量比较大,我们可以通过以下方式快速判断一款软件是否符合自己的需求:

    看软件标签:替代软件名称下面会有一连串的描述标签,可以帮助我们快速了解这款软件是不是免费的,支持哪些平台设备。 看界面截图:替代软件简介右侧是软件界面的截图,点击后可以查看大图,这样我们就知道它的操作界面是不是符合我们一贯的操作习惯。 看用户评价:用户评价最能直接反应软件最大的优点和缺点,评论区右上角还有筛选器,可以查看所有负面评价或最新评价。

    快速浏览后如果你觉得这款软件比较符合自己的要求,可以点击名称进入软件详情页,里面会提供软件的官网访问链接或下载链接,以及关于该替代软件的替代软件,非常方便。

    以上就是相似软件推荐网站 AlternativeTo 的相关介绍,我在网站里翻看了几个常用软件的替代推荐,都是非常靠谱的,而且很多都是免费开源的。以后大家无论是找设计软件还是影视音乐软件的平替可以上去搜搜看,也可以投稿推荐自己觉得好用的相似软件。

    网站直达: https://alternativeto.net/ (可直接访问,搭梯子浏览速度更快)

    喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~

    推荐阅读:

    想用网页版Photoshop?这2个免费在线工具就很不错! 大家好,我是和你们聊设计的花生~ 昨天一则关于“Photoshop 网页版免费”的消息冲上热搜,大概内容是 Adobe 开始在加拿大试行网页版 Photoshop 的免费使用,位于加拿大的用户可以通过免费的 Adobe 账户访问其网页版。

    阅读文章 >

    5个经典的付费英文字体,我们都帮你找到了免费可商用替代款!(二) 大家好,我是和你们聊设计的花生。

    阅读文章 >

  • AlternativeTo:超好用的相似软件推荐网站

    UI交互 2023-01-06
    大家好,这里是和你们聊设计的花生~做设计或者日常学习娱乐我们都离不开各种软件,如果这款软件是免费的就更棒了。今天就为大家介绍一个超强大的相似软件推荐网站 AlternativeTo,它收录了 10 万多个替代软件,涵盖办公、设计、娱乐、编程、效率工具等各个领域,非常适合用来寻找一款软件的免费平替。往期回顾:Sim...

    大家好,这里是和你们聊设计的花生~

    做设计或者日常学习娱乐我们都离不开各种软件,如果这款软件是免费的就更棒了。今天就为大家介绍一个超强大的 相似软件 推荐网站 AlternativeTo ,它收录了 10 万多个替代软件,涵盖办公、设计、娱乐、编程、效率工具等各个领域,非常适合用来寻找一款软件的免费平替。

    往期回顾:

    Similarsites超好用!一键搜索相似网站的神器 大家好,这里为大家推荐神器的花生~ 不知道大家有没有和我一样的经历:经常访问的网站很不错,那如何找到类似的网站;之前收藏的网站突然打不开,不得不重新寻找新的替代网站;或是想找的资源在这个网站里没有,想看看有没有类似的网站能找到。

    阅读文章 >

    AlternativeTo 网站直达: https://alternativeto.net/ (可直接访问,搭梯子浏览速度更快)

    AlternativeTo 是一个免费的相似软件资源推荐网站,由瑞典人 Ola 和 Markus 创立,无需注册打开即用。网站上的资源收集自世界各地网友的投稿推荐,目前共收录了 10 万多个替代软件, 各种办公、设计、视频、音乐、游戏软件和效率工具都可以在上面找到同类型的替代,而且无论是在线网站、Windows、Mac、Linux 还是 Android、iPhone 和 ipad 都有对应的推荐。

    AlternativeTo 网站首页

    网站的显示语言是英语,搜索框在右上角,我们在搜索的时候也要输入英文,觉得英文浏览不方便的小伙伴可以使用具有网页翻译功能的浏览器打开。网站首页展示了「被最多次寻找替代品的软件」、「被查看最多次的软件」和「精选推荐」等版块,其中很多都是我们熟悉的,比如 Z-Library、网飞、Ps、Microsoft Office、Youtube 等,还有最近大热的 ChatGPT、Midjourney 等 AI 工具。

    AlternativeTo 内被最多次寻找替代品的软件

    以 Ps 为例,点击进入“PS 的替代软件界面”后,主要呈现两部分的内容,一部分是关于 Ps 软件本身的介绍,另一部分是所有可替代 Ps 的软件名单。说实话打开之前我都不知道 Ps 能有 200 多个替代软件,太夸张了。不过我们也不用每个都看,因为软件是根据用户点赞数进行排序的,点赞的人数越多排名越靠前,一般看排名前 10 的软件就够了。

    AlternativeTo 对替代软件有非常细致的介绍,信息量比较大,我们可以通过以下方式快速判断一款软件是否符合自己的需求:

    看软件标签:替代软件名称下面会有一连串的描述标签,可以帮助我们快速了解这款软件是不是免费的,支持哪些平台设备。 看界面截图:替代软件简介右侧是软件界面的截图,点击后可以查看大图,这样我们就知道它的操作界面是不是符合我们一贯的操作习惯。 看用户评价:用户评价最能直接反应软件最大的优点和缺点,评论区右上角还有筛选器,可以查看所有负面评价或最新评价。

    快速浏览后如果你觉得这款软件比较符合自己的要求,可以点击名称进入软件详情页,里面会提供软件的官网访问链接或下载链接,以及关于该替代软件的替代软件,非常方便。

    以上就是相似软件推荐网站 AlternativeTo 的相关介绍,我在网站里翻看了几个常用软件的替代推荐,都是非常靠谱的,而且很多都是免费开源的。以后大家无论是找设计软件还是影视音乐软件的平替可以上去搜搜看,也可以投稿推荐自己觉得好用的相似软件。

    网站直达: https://alternativeto.net/ (可直接访问,搭梯子浏览速度更快)

    喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~

    推荐阅读:

    想用网页版Photoshop?这2个免费在线工具就很不错! 大家好,我是和你们聊设计的花生~ 昨天一则关于“Photoshop 网页版免费”的消息冲上热搜,大概内容是 Adobe 开始在加拿大试行网页版 Photoshop 的免费使用,位于加拿大的用户可以通过免费的 Adobe 账户访问其网页版。

    阅读文章 >

    5个经典的付费英文字体,我们都帮你找到了免费可商用替代款!(二) 大家好,我是和你们聊设计的花生。

    阅读文章 >

  • 看故事学设计!包豪斯是如何在美国德国发展起来的?

    UI交互 2023-01-05
    1933 年包豪斯被纳粹政府正式关闭,但所谓“人在灯就在”,包豪斯培养出来的优秀学员并没有放弃对现代设计的探索。但在当时紧张的政治气氛中,大部分包豪斯重要成员选择了先移民海外避避风头。这个过程中,实用主义的美国成为主要接收国,不但接收,还非常珍惜与重用相关人员,为日后国际主义在美国崛起埋下关键伏笔。

    1933 年包豪斯被纳粹政府正式关闭,但所谓“人在灯就在”,包豪斯培养出来的优秀学员并没有放弃对现代设计的探索。

    但在当时紧张的政治气氛中,大部分包豪斯重要成员选择了先移民海外避避风头。

    这个过程中,实用主义的美国成为主要接收国,不但接收,还非常珍惜与重用相关人员,为日后国际主义在美国崛起埋下关键伏笔。

    关于 包豪斯设计 学院:

    揭秘!影响设计史百年的包豪斯学院,是如何教学生的? 编者按:包豪斯学院是如何教书育人的?

    阅读文章 >

    一、进入美国的包豪斯 1937 年时候,包豪斯创始人格罗皮乌斯接受美国邀请,在哈佛大学建立设计研究院,担任教授与院长。

    用一篇超全面文章,帮你了解包豪斯创始人的前世今生 适逢今年是包豪斯诞生100周年,我们来谈谈包豪斯背后那个男人,就是创始人——瓦尔特·格罗皮乌斯先生(Walter Gropius)。

    阅读文章 >

    远渡美国的格罗皮乌斯

    1930 年代,美国大学大多数师生都曾通过多种途径的阅读(包豪斯丛书发挥了巨大宣传作用)而知晓欧洲现代主义的发展情况及包豪斯这所最具代表性的学院。

    所以格罗皮乌斯的到来受到美国大部分同行及师生的热烈欢迎。

    随后马塞尔·布劳耶(Marcel Lajos Breuer)也紧随其后一起在哈佛任教,著名华人建筑师贝聿铭就是他们这个时期的一名学生。(此故事已收录在「设计大师启示录」)

    现代主义最后的设计大师:华人之光贝聿铭(上) 随着史太浓「大师列传」的发表,蛮多朋友私信给我们提出自己希望看到的大师,其中有一位频率特别高,而他恰好也在我们的讲述计划内,就是今天的主人公,被我们称为华人之光老爷子的贝聿铭先生。

    阅读文章 >

    现代主义最后的设计大师:华人之光贝聿铭(下) 贝聿铭曾是包豪斯创始人格罗比乌斯的学生,也是唯一作为华人跻身于现代设计大师行列的,而且被誉为「现代主义的最后一位大师」。

    阅读文章 >

    马塞尔·布劳耶与贝聿铭课外时间的聚会

    格罗皮乌斯刚刚开始在哈佛推行基础设计类课程时其实遭受了不少阻力,因为任何改革都难免触碰到利益所得者,这个群体通常被称为“保守派”。

    但随着课程试行获得良好效果,很快受到学生欢迎从而冲破了这种阻力,并且哈佛这样的实践很快引起美国其它设计学院的效仿。

    格罗皮乌斯醉心于设计教育的研究

    随着影响扩散,格罗皮乌斯将包豪斯的教学理念成功在美国本土化,成为美国设计教育改革的核心力量。

    其功能主义理念特别强调将形式、材料和家庭日用物品的结构做出改变以适用工业化程序,设计出更标准化、更好用,更便宜的产品,为大众带来了实际好处。

    如此一来非常符合讲究实用主义及高度商业化的美国社会,受到政府、企业跟教育界重视,因此格罗皮乌斯等于将在德国没有实现的目标在美国完成了。

    除了格罗皮乌斯,包豪斯第三任校长密斯凡德罗则到了美国芝加哥的阿摩尔理工学院(Armour Institute of Technology)。

    密斯凡德罗就是在美国封神的

    这是美国一所著名的老建筑学院,密斯在此为其组建了设计学院。

    在美国的密斯因为其风格符合社会发展需求,如鱼得水大展拳脚,不但改变了美国建筑格局,还逐渐被拓展为一种全球风潮,就是国际主义。(故事详见「设计大师启示录」)。

    “少即是多”是我说的:顶尖设计师密斯凡德罗 如果要问设计师一句最适合装逼的话,相信大部分人都会说「少即是多(Less is More)」,甚至有一次我听一名企业主说了出来,可见这句话的影响力。

    阅读文章 >

    除了两位校长,包豪斯的重要导师莫霍里·纳吉(Laszlo Moholy Nagy)则在 1937 年到芝加哥尝试成立“新包豪斯”,办学原则跟德国包豪斯完全一致,但属于一个私立学院。

    莫霍里·纳吉是包豪斯很重要的成员

    无奈一年之后因为资金支持者撤出而关闭,所以没有产生太多影响。

    而另一位导师约瑟夫·艾尔伯斯(Josef. Albers)则在 1933 年去了著名的“黑山学院”(Black Mountain College),担任艺术系主任。

    约瑟夫·艾尔伯斯及其色彩作品

    艾尔伯斯在黑山呆了足足 16 年,包豪斯的理念因此在这里找到一种延续,所以黑山学院也有深刻的包豪斯烙印,格罗皮乌斯也曾在夏季班到此客串教学。

    二、神秘的黑山学院 黑山学院 1933 年在美国的北卡罗莱那州(North Carolina)一个小城艾什韦尔成立,位置偏远,规模很小,最多人的时候据闻只有 60 人。

    神秘的黑山学院

    这所学校跟我们传统理解的学校非常不一样,关于其资料非常少,学校没有明确的运作管理者,背后的资金支持者是谁也没有记录。

    而且好像也没有什么学生从这里毕业的说法,所以显得很神秘与独特。

    这所神秘学院却汇聚了美国 20 世纪上半叶差不多一半的先锋艺术家,有绘画、音乐、设计、雕塑、舞蹈、诗歌等,几乎涵盖每种艺术。

    黑山学院的学生

    来自包豪斯的艾尔伯斯正是设计门类的代表者,艾尔伯斯的色彩理论研究给大家带来一股新风,色彩玻璃的创作手法也启发了后来的“波普艺术”大师劳森伯格的拼贴艺术。

    在黑山学院上课的艾尔伯斯

    所以黑山学院更像一个艺术家自由聚合的场所,彼此相互交流学习与创作。

    黑山后来出现了很多艺术领域的大人物,比方先锋派古典音乐作曲家约翰·凯奇(John Milton Cage Jr)。

    他在黑山完成了第一次“偶发艺术”创作,这就是后来的行为艺术,其著名创作是《4 分 33 秒》,演奏过程全程静默,4 分 33 秒站起来跟大家鞠躬,说:“感谢大家,我刚才已经成功演奏完了 4 分 33 秒。“然后下台。

    约翰·凯奇

    黑山学院其实只保留了包豪斯一部分血脉,并不等于是包豪斯的分支,只能说包豪斯文化有非常强悍的植入能力。

    而格罗皮乌斯曾在学院夏季课程时候到此授课,让其与包豪斯的关联获得进一步加深。

    格罗皮乌斯在黑山学院-右 4

    1957 年时候黑山学院因为办学经费问题完全关闭,一共存在了 24 年,培养出一批充满奇思妙想并勇于践行的艺术家,对现代艺术世界产生了持久深刻的影响,关于他们与黑山学院的故事一直在流传。

    三、乌尔姆诞生 真正比较完整延续包豪斯精神与体系的学院是成立于 1955 年,位于西德的乌尔姆学院(Hochschule für Gestaltung,Ulm)。

    在西德建立的乌尔姆学院

    其第一任校长正是毕业自包豪斯德绍时期的学生马克斯·比尔(Max Bill)。

    比尔是瑞士人,1927 年到 1929 年期间在包豪斯学习建筑,毕业后成立过自己的建筑事务所。

    设计中的马克斯·比尔

    他的建筑作品分别在 1936 年及 1951 年的意大利米兰三年展中获奖,也曾自己多次策展。

    在包豪斯解散后的 10 多年里,比尔内心一直希望有机会建立一所全新的包豪斯形式学院。

    这个机会出现在 20 世纪 50 年代,当时因为包豪斯解散,现代主义在德国的发展戛然而止。

    而美国却因为包豪斯豪华阵容的移民而在工业、产品、建筑上有了非同凡响的发展,所以德国政府坐不住了,首先在 1951 年成立了“德国 设计师 协会”,希望发展出美国那种初具规模的“国际主义”。

    以密斯为首的美国国际主义风格

    这种希望终究还是要回到教育层面,二战后的德国本来就被美国钳制,美国希望西德可以在工业方面有长足进步,而这一切都离不开设计。

    所以 1955 年美国最高指挥部联合西德政府拨出相关资金,推行“乌尔姆计划”,正式成立“乌尔姆设计学院”(Hochschule für Gestaltung,Ulm),后面简称乌尔姆学院。

    乌尔姆学院的开学典礼可谓热闹非凡,包豪斯创始人格罗皮乌斯及包豪斯前身学院“魏玛工艺美术学院”的创始人亨利·凡·德·威尔德(Henry Van de Velde)都到了现场并发表讲话。

    格罗皮乌斯现身乌尔姆学院开学典礼

    威尔德甚至认为,这所学院对欧洲的重要性将超过前面两所曾经存在的学院,典礼上还汇聚了政界、商界、艺术界及科学界的名流,乌尔姆学院一下子就成为当时文化前沿的关注对象。

    四、乌尔姆学院的发展 乌尔姆学院跟包豪斯很像的一点就是同样只有三任校长,而且每一位校长都代表了一个时期,所以说组织领导者就代表了组织风格,如果老板作风代表了企业作风一般。

    马克斯·比尔在乌尔姆学院担任校长仅仅三年(1955-1957),这三年也是乌尔姆最包豪斯的三年。

    比尔为乌尔姆学院倾注了很多心力

    首先教员队伍中就有不少包豪斯元老,比方约翰·伊顿,艾尔伯斯(已经离开了黑山学院)等。

    所以这个时期的乌尔姆有包豪斯一样的“基础课”,目的是为了强化学员知觉能力及基本造型能力。

    可以理解为是对美的感受力与对美的表现力,最简单例子就是手绘能力,等同设计的语言能力。

    乌尔姆学院的教室

    比尔在设计上是典型的功能主义者,从他为乌尔姆设计的冷峻校舍就可以感受到。

    校舍完全摒除曲线,方形与直角是最基本的元素,没有任何情感与主观痕迹,内部亦是如此,连地毯与墙饰都没有,感受不到任何温馨与舒适。

    晚间的乌尔姆学院教学楼

    所以现代主义风格发展到极致也容易被人诟病,感觉缺乏人文关环。

    另外典型的作品还有“乌尔姆凳”,这个凳子结构简单,无任何装饰,具备有普通椅子、床头柜和工作椅多种功能,模糊了工作与休闲之间的界限,仍旧是熟悉的构成主义与风格派混合的包豪斯风格。

    乌尔姆凳

    但乌尔姆所在的时代毕竟情况不同了,工业与科技在高速发展,所以比尔沿袭包豪斯的这一套让其它年轻老师颇有微词。

    其他老师希望学院可以更多关注科技领域,多将理科思维融入设计,因为工业化生产成熟后,设计成为一种如何更好服务于生产的重要手段。

    而包豪斯的思维似乎首先从艺术出发, 然后得到一个应用形式,而那时候大家已经有了应该从任务设定出发,再结合当前制造技术进行设计这样的新思路。

    1954 年加入乌尔姆学院的阿根廷教员马尔多纳多(Tomas Maldonado)是反对者之首,他主张乌尔姆的教学思路要面向科学与现代量产技术。

    课堂上的马尔多纳多

    其实这类关于设计该侧重艺术还是应用的争论可以追溯到 1914 年时候制造同盟的威尔德与穆特修斯之争,最后一般都是倾向应用者获胜,而马尔多纳多确实占了上风。

    比尔在 1957 年辞去校长一职,马尔多纳多继任,比尔的离职标志着乌尔姆开始摆脱包豪斯影响,走出乌尔姆自己的模式。

    这种模式就是“科技融合设计”,马尔多纳多认为设计是刺激消费的重要手段,而且设计师应该跟市场没有距离,工业设计不再是艺术,而设计师也不再是艺术家,设计应该成为一种产品管理与系统分析的科学化运作,听上去感觉这有让设计走上另一种极端的可能。

    课堂上的马尔多纳多

    所以 1958 年的乌尔姆居然首先取消了色彩课程,引入了更多科学相关课程,比方数学、生理学、感知理论、人机工程学等,俨然变成一个理工学院的感觉。

    不过这个时期的乌尔姆确实也设计出不少能有效市场化的优秀产品,比方跟德国布劳恩公司的拉姆斯合作开发的“SK4”收音机,造型简洁时尚,用色平衡中性,材料新颖,打破了收音机笨重老成的印象,受到市场欢迎。

    “SK4”收音机

    到了 1961 年时候,连基础课也被取消,此时的乌尔姆学院已经基本没有过去包豪斯的任何影子,走出了自身一种现代主义设计教学路线。

    而到了 1962 年,德国著名的平面设计大师,同为乌尔姆创始人之一的奥托·艾舍(Otl Aicher)出任校长,他 10 年后设计了慕尼黑奥运会的整体视觉,被公认为至今最经典的奥运会视觉系统。

    奥托·艾舍及其设计的奥运视觉符号

    他继续带领乌尔姆走“科技融合设计”的路线,而且曾多次公开表达反对外界将乌尔姆视为包豪斯的延续,他认为包豪斯主要接受了过去的艺术思潮影响,并不符合如今的的市场。

    最后乌尔姆的极端科学路线也遭受外部舆论攻击,到了 1968 年 12 月因为没有经费支持且拒绝与邻近工程学院合并而最终解散。

    今天分享到此结束,感谢各位,下期再会!

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

  • 6000字干货!3个优秀交互设计师应该具备的边界感

    UI交互 2023-01-05
    引言售卖软件服务的公司,最理想的状态就是开发一套通用的解决方案或产品,而几乎不用接收任何定制化需求(定制化需求大多会被内化成通用产品的新功能)。这种经营模式下,公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足,那些为了提升体验满意度而做的努力就很容易有结果,设计师基本不用太过担心投入的成本。

    引言

    售卖软件服务的公司,最理想的状态就是开发一套通用的解决方案或产品,而几乎不用接收任何定制化需求(定制化需求大多会被内化成通用产品的新功能)。这种经营模式下,公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足,那些为了提升体验满意度而做的努力就很容易有结果,设计师基本不用太过担心投入的成本。但很多公司面向的客户形态无法做到这种理想状态,这些公司对外交付的版本一般都是基于主线版本的定制化版本。为了效益,客户当然越多越好,交付肯定越快越好,这就意味着评审交互设计师输出的交互设计方案时,体验至上不再是首肯的目标,按时交付才是。所以支撑外包项目的时候,交互设计师如果没有边界感,输出的交互设计方案在后面的评审阶段将会被不断推翻,无法落地。前面虽然说了标准化产品维护过程中设计师不用过多考虑实现成本,但标准化产品也会有迭代周期,在一个有限的迭代周期内,也同样需要考虑边界问题按时完成版本迭代任务。那么 交互设计 师支撑外包项目或版本迭代项目时都需要有哪些边界感呢?今天我们来谈谈需求边界和技术边界。

    更多兆日UCD干货:

    4000字干货!9个方法帮你掌握UX文案写作 相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。

    阅读文章 >

    一、需求边界 1. 什么是需求边界

    需求边界是指在一个明确的目标或产品版本中,为交付具有规定特性与功能的产品、服务或成果而必须完成的有限工作范围。该范围可控,不会在外力驱使下随意更改。

    2. 为什么要有需求边界

    试想,如果项目经理对客户的需求来者不拒,会有什么后果?项目无法按时交付,造成亏损。如果在开发阶段,需求依然充满变数,会有什么后果?开发人员可能会暴走继而影响团队士气。如果提前定义好需求边界,就等于给下游制定了明确的工作目标,也利于项目排期和进度把控,从而避免出现上述问题。

    3. 如何找到需求边界

    ① 如何找到项目中的需求边界

    项目在启动阶段,对外需要一份正式的合同来确立合作关系,对组织内部一般都会有《项目工作说明书》《商业论证》《项目章程》等文件来建立内部协议拉通内部目标。其中,《项目章程》会对整个项目的需求范围做出最原始的定义,一般包含概括性的项目描述、项目产品描述及项目的总体范围要求,此时定义的需求颗粒度最大。就比如,某银行项目在此阶段的需求就是“上线企业 OA 产品”,这就明确了需求边界,我们要做企业 OA,而不是做企业网银。如果项目进行到一半,客户忽然要求我们做企业网银产品,那完全可以拒绝,因为超出了需求边界。(不过站在商业角度,遇到这种情况商务员应该会无比激动,因为来年的 kpi 在向他招手。)

    接着,在项目规划阶段最重要的前置工作就是进行项目范围管理,项目成员需要收集需求、定义范围、创建 WBS(工作结构分解)。这个阶段的 WBS 就是为了打造项目章程中定义的最终产品、服务或成果而进行的需求细化。此时,定义的范围就可以作为我们进行交互设计工作的指导性文件。(因为在这个阶段不细化需求和分解任务,就无法进行准确合理的项目时间管理、成本管理等的规划工作)。

    接着上面的例子,项目启动阶段,《项目章程》里定义的需求边界为“上线企业 OA 产品”,接着在项目规划阶段,就需要跟客户沟通确认具体的《功能清单》(见图 1-1,此文件是项目管理过程中非常重要的文件,如果没有此文件,项目监控过程将无法进行)。比如说我方通用解决方案里该产品是包含 18 个功能,但客户可能只需要其中 15 个,然后还要补充几个我方通用解决方案里没有的定制化功能。这个功能清单就是需求边界,也是我们开展交互设计工作的立足点。

    《功能清单》示例

    如果设计师在设计过程中为了提升体验而增加了额外的功能,比如说客户的需求是对发票拍照存档,交互设计方案中拍完照还能 OCR 识别发票信息,这个设计方案就超出了需求边界。单纯站在体验的角度上看,真是个很棒的点子,但站在项目管理的角度上看,这是“愚蠢”的,要知道,项目经理时刻担心项目进度不可控,一定不会让需求蔓延。

    但如果评审交互设计方案时是客户提出了增加发票 OCR 识别的功能,设计师了解需求边界的话就不会一口答应导致后面落子悔棋的尴尬局面。(如果客户提出了任何非交互设计的变更提议,我们都不要一口答应,可以说会后跟项目组讨论下再给您答复。)我们也可以了解一些项目经理针对需求变更的处理技巧:需重新评估需求的变动成本,跟客户说明,修改合同;寻找其他简单易实现的方案替代;告知用户在下一迭代版本中进行规划。

    当然,也会有特殊情况,为了维护客户关系或者按投入结算或者有什么需要达到的 kpi,项目对时间和成本没有特别要求,对需求变更有很好的包容度,那我们可以尽情发挥我们的设计才能,而不用受需求边界的约束。

    ② 如何找到小迭代需求的需求边界

    上面讲项目规划阶段的《功能清单》就可以当作项目的需求边界,但是一般这份功能清单中的功能颗粒度较大,还是需要把一个个功能看成一个个需求,分别进行业务需求、用户需求、功能需求的剖析和拆解。另外,公司标准化产品的维护过程中,需求往往是市场声音或是公司上层产品规划策略亦或是专家走查的待优化问题,这时候如果没有专门的需求分析师或产品经理,交互设计师接收到的往往不是拆解后的业务需求、用户需求、功能需求,而是“一句话需求”。我们如何找到这种需求的边界呢?

    我们先了解几个概念:业务需求、用户需求、功能需求。

    业务需求描述的是用户为什么需要这个产品,用户需求描述的是用户使用该产品必须要完成的任务,功能需求描述的是开发人员必须实现的软件功能。下面举个例子来说明 3 个维度的需求,真正的需求边界就会浮出水面。某个项目的《功能清单》中,有一个“码上付”的功能,进行客户调研时,客户说“因为当前系统跟另一个系统无法进行数据交互,所以在当前系统不知道用户有没有申请成功,希望点了码上付申请弹出一个弹窗,提示用户不要重复申请。”按照客户的需求描述,方案如图 1-2:

    客户描述的方案

    该方案违背了交互设计的“防错原则”,增加了用户的“试错成本”,那必须按照客户的要求做吗?再次分析客户的描述,可以发现客户描述的是功能需求而非业务需求。运用需求分析方法和技巧挖掘它的上层需求(因篇幅有限不再讲述分析过程),可以得出以下结论,业务需求是:“防止用户重复提交码上付申请”。

    接着分析,能满足以上业务需求的用户需求是:1.用户申请成功后不能再进行申请操作(系统阻断用户的重复申请行为);2.用户能看到“请勿重复申请”的文字提示(靠提示让用户自主停止重复申请行为)。

    这些用户需求对应的功能需求是:用户提交过申请后,将“码上付”入口置灰禁用,并在入口处打上标签“已申请”,如果申请成功该入口就一直置灰禁用,如果申请不成功该入口需要变为启用状态以便用户再次申请。

    但是客户的描述给出了技术边界(后面会详细讲解此概念):当前系统跟另一个系统无法进行数据交互,所以当前系统不知道用户有没有申请成功,这就导致上面分析的用户需求的第 1 点是无法满足的,除非我们要求客户去改造关联系统而且客户愿意配合,否则我们只能去修改用户需求:让用户看到“请勿重复申请”的文字提示。靠用户自己规避重复操作行为。用户需求一旦修改,对应的功能需求也会随之变化:在申请码上付的按钮附近给出醒目提示“如果您已申请过码上付,请勿重复申请”。最后的交互设计方案如图 1-3:

    修改后的方案

    通过以上案例分析,我们可以把业务需求、用户需求、功能需求抽象为依次耦合并依次包含的关系。用户需求和功能需求可能会根据技术边界或其他约束而改变,但业务需求不会改变,也就是说小迭代需求的业务需求才是真正的需求边界。

    从图 1-4 可以看到,一开始设计师输出的方案肯定是满足业务需求的前提下,用户体验最好的方案,但有些用户需求+功能需求组合超越了技术边界和其他边界。我们评审设计稿的过程,其实就是不断将用户需求+功能需求修正到各种边界内的过程。(业务需求一般是在描述需要解决的问题,至于如何解决,就是交互设计师可以发挥的空间。如果业务需求都变了,那就是需求变更,需要走需求变更申请流程。)

    备注:以上案例将业务需求描述为“防止用户重复提交码上付申请”而不是“阻止用户重复提交码上付申请”,大家可以思考一下有何不同?

    用户需求+功能需求修正前后对比

    二、技术边界 1. 什么是技术边界

    技术边界是指在现有技术水平可以被实施运用的有限范围。

    2. 设计师为什么要了解技术边界

    一个合格的交互设计师,能灵活运用各种交互设计方法输出体验最佳的概念方案是基本要求,但只站在体验最佳角度考虑问题所出的设计方案会是最终方案吗?显然经常不是。

    为什么会出现这种情况?除了一开始的需求不清晰不准确导致评审交互设计方案时还需要不断反向修正需求的原因,还有一大部分原因是体验最佳的方案无法用现有技术条件实现且重新开发成本太大。

    设计方案评审的过程,其实就是一拨需求干系人在不断寻找业务需求、技术边界、最佳体验之间的安全区(见图 2-1)的过程。如果交互设计师能熟悉技术边界,一开始输出的方案就往安全区里靠近,会大大缩短设计周期,否则只能一遍又一遍被按在地上摩擦。

    安全区示意

    3. 如何获知技术边界

    ① 新产品项目的技术边界

    新产品项目的技术边界受制于上面提到的《功能清单》,比如设计的过程中,设计师觉得界面上展示一下头像会使信息更具识别度,这时候就需要去查阅功能清单中有没有上传头像的功能,如果没有该功能项目经理也不允许增加该功能,我们只能修改设计方案:去掉头像或者改用通用头像。其他更细节的边界几乎是无法提前预知的,只能在设计方案评审阶段或开发阶段暴露出来,反向修正设计方案。因此,设计师支撑新产品项目,一定要提前熟知功能清单,有的放矢。

    ② 已有产品升级项目的技术边界

    如果是旧产品的升级项目,技术边界相对就多一些,因为要考虑现有系统的兼容性和现有技术的复用性。设计师动手前要体验产品,浏览客户提供的产品资料、用户手册等,尽可能多地提前预知和确认技术边界,这样可以减少设计方案的修改次数,提高效率。

    还有一些明显的技术边界,在需求沟通阶段就能暴露出来,比如上面的案例中,客户一开始就提出“两个系统目前无法进行数据交互”这个技术边界,但还有一些边界只能边沟通边发现。比如设计师觉得通用头像区分性别更具情感化,所以设计方案中女性用粉色通用头像,男性用蓝色通用头像,评审的时候就需要询问客户系统能不能区分性别,如果没有又无法增加该功能,我们只能修改设计方案:所有人员用同一个颜色的通用头像。如果评审时没有确认此细节,开发实现的时候就会找设计师沟通,影响开发进度。

    ③ 界面结构体现出来的技术边界

    界面结构能反映技术边界。如果已经确认是在现有的技术能力范围内补充新功能,那设计师就需要分析已有同类功能的界面结构,以免随意变更界面结构导致新功能界面结构无法跟已有同类功能界面结构匹配,加大变更成本。

    举例说明,某银行要上线公司的一套主线产品,且要增加一个功能模块,该功能模块的审批流程需要复用基线产品的技术。一开始考虑用户可能出于催办等目的,需要在表单申请界面看到完整的审批流程,所以设计新功能模块时,将审批流程平铺显示在了申请表单页面上(见图 )。

    基于交互经验输出的方案

    中间多次设计评审会也未提及这样设计有何不妥,最后开发做到这里,查看原有功能申请表单页的代码,发现同类功能的实现逻辑是将审批流程显示在了弹窗里(见图 2-3,显示在弹窗里而非当前页面上的历史原因是为了不破坏原有表单的界面结构)。

    现有实现的样式

    开发急轰轰来找设计师:“你这个界面实现不了啊”、“我们之前是这么实现的啊”、“要改也是主线产品改,但肯定来不及呀”,项目经理也急轰轰来找设计师:“按照现有技术实现的方式改下交互设计方案吧”、“项目交付时间快到了,别发散了啊”,在多重压力下设计师就得硬着头皮按照弹窗的样式,把所有表单申请页面全部改一遍(不改干净,新加入项目的开发人员会思考半天,然后来问你:这里为什么跟其他页面不一样,是有什么考虑吗?或是碰到“直男”开发,真的就按错误的交互界面实现)。

    按照现有实现修正后的方案

    如果对已有产品不熟悉,对已有的界面结构不熟悉,类似的情况会经常发生,这无疑增加了时间成本和沟通成本,是项目大忌。所以,设计师一定要会识别界面结构体现出来的技术边界。

    三、其他边界 “国家制度、法律法规、行业标准”也是设计工作的重要边界。

    比如,理财产品界面一定要打上“市场有风险,投资需谨慎”的提示字样,不可用高回报高收益宣传口号诱导用户;再比如,保险产品宣传时必须明示是保险产品,且不得与银行储蓄、基金、国债等进行收益比较。

    硬件设备的操作方式也是设计工作的重要边界,比如说使用遥控器操作的终端界面,要特别考虑遥控器操作的局限性,不可让用户输入大段文字,可通过手机扫码填写的方式替代;再比如,操作触摸屏时,不能像操作 pc 一样出现右击操作。还有,设计规范也是设计工作的重要边界,如果不考虑设计规范一致性,会增加用户的学习成本。

    除了上面展开讨论的需求边界和技术边界,还有后面提到的“制度法规”、“硬件设备”、“设计规范”,还有很多因素共同决定最终的交互设计方案。设计师可以在平时的工作中培养自己洞察边界的能力,以便输出更加成熟的方案。

    四、如何在各种边界内做出好设计 1. 须具备需求分析的能力

    设计师接收到需求之后,要能判断接收到的是不是业务需求,最好把业务需求用自己的语言描述出来拿给需求方确认。(如果团队分工明确,一般产品经理会把基于各种边界条件分析好的业务需求和用户需求给到设计师。如果团队无此角色,就得靠设计师自己识别。)就像前面提到的例子,如果业务需求是“阻止用户重复提交码上付申请”,而不是“防止用户重复提交码上付申请”,那性质就不一样了,阻止是不允许用户重复提交,那就得逼着客户和开发调整技术边界。但客户实际的意图是提醒用户最好不要重复提交,但允许重复提交。

    确认好业务需求,如果时间充裕,可以先不考虑技术边界,输出一个体验最佳的方案,然后再根据自己已知的不可抗力约束逐渐修正方案,如果时间紧张,这一过程可以在脑海里构思,直接输出修正后的方案组织评审。

    2. 具有洞察边界的能力但又有打破边界的勇气

    考虑各种约束久了,我有时候设计方案首先考虑的是开发能不能实现,好不好实现,这真的大错特错。设计师需要有技术边界感,但不能让技术边界感凌驾于体验设计之上,否则交互设计师就失去了存在的意义。

    例如,之前提到的发票 OCR 识别功能为例,应客户要求,要在主线产品的发票夹功能基础上增加发票 OCR 识别的子功能,该需求还要内化成主线功能。其中添加发票的界面,原来的界面结构是左图所示,页面的主体信息是发票照片的预览图像,加入发票 OCR 识别功能后,我考虑到万一将来有些客户不上发票 OCR 识别功能,或者识别不出信息的情况下,还是得按 4-1 左图展示,所以基于新旧系统和无数据场景的兼容性,我没有改变原有的界面结构,只是在预览图下面增加了识别信息的展示区域,即 右图展示。

    不破坏原有界面结构输出方案(左图为原有页面)

    但对用户来说,识别出来的发票信息才是他重点关注的内容,预览图只是个辅助信息,按照这个心智模型,首屏的主体信息应该是识别出来的发票信息,但上面的方案,首屏的主体信息是预览图。

    后来 UI 同事在进行视觉设计的时候,询问了开发能不能改变预览图的样式,得到开发负责人同意后,UI 同事按照信息层级关系优化页面(见 4-2 左图),而且跟开发沟通增加了一个扩展功能:没有成功识别到信息场景下和没有上线发票 OCR 识别功能的场景下,预置几个各种发票类型都会有的主要信息字段,让用户自动填入,见 4-2 右图(原有的发票夹功能,只有一个备注字段)。当我还在考虑开发尽量少改动时,UI 同事打破边界的勇气和灵活变通的智慧深深地给我上了一课。

    扩张边界后输出的方案

    3. 总结

    这篇文章讲了交互设计应具备的几个边界感,希望能帮助设计师快速输出安全区内方案以缩短评审修改周期,但请切记不可完全被边界束缚住手脚。交互设计师仍要站在体验最佳的立场,去争取扩张技术边界和其他边界,给设计打造更大的安全区和发挥空间。

    扩张边界后的安全区示意

    欢迎关注团队 微信 公众号:兆日 UCD

  • Runway!AI技术+视频制作的新一代视频内容生成工具

    UI交互 2023-01-05
    大家好,这里是和你们聊设计的花生~之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了设计师的工作效率。既然 AI 技术在图片处理的应用上如此成熟,那如果用到视频的剪辑制作上会有什么效果呢?借助 AI ...

    大家好,这里是和你们聊设计的花生~

    之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了 设计师 的工作效率。既然 AI 技术在图片处理的应用上如此成熟,那如果用到视频的剪辑制作上会有什么效果呢?

    借助 AI 技术的快速消除图像内容

    比如在视频里实现一键抠图,将人物从背景中分离出来,进行背景更换或者插入文字图层:

    或者在视频里实现快速修图,用画笔一抹,就能去除视频中不需要的部分:

    甚至在视频里也用上 Ai 生成性技术,输入一段话,就能将原来的物体变成另一个新的物体:

    其实这些 AI 技术在视频制作中应用的并非想象,也不是特效,而是真的有公司将其变为了现实。下面就是“一键去除画面元素”技术在视频制作中的实现过程:

    在线视频制作工具 Runway 的操作界面

    这些神奇的视频处理功能都是一家名为 Runway 的公司开发的。 Runway 是国外一家在线视频剪辑制作网站,成立于 2018 年。它有非常完善的在线视频处理技术,更重要的是公司团队一直在积极地将生成性 AI 技术应用到视频内容制作中,致力于降低视频创作的门槛,帮助人们轻松制作出内容强大且富有创意的视频内容。

    Runway 官网: https://runwayml.com/

    Runway 官网展示的 30 多个 AI 魔法工具

    Runway 目前已经开发了 30 多个 AI 魔法工具,其中一部分是将 AI 图像生成技术内置。比如我们熟悉的根据文本生成图像、根据图像生成风格化变体、图像延展外绘、根据文本生成 3D 贴图纹理、视频局部无损放大等技术,在 Runway 内都可以实现。

    Runway 内置的图像无限外延功能

    另一部分则是令人惊喜的视频处理魔法,除了我们前面提到的 3 种功能,Runway 还开发了包括动态追踪,智能调色、智能慢镜头、平滑插帧及一键模糊人脸等功能。

    “动态追踪”即通过 AI 技术识别视频中物体的运动轨迹,然后为其附上文字或者其他元素,这些元素会自动跟随物体一起运动,不用手动设置轨迹。

    “智能调色”功能利用 AI 技术自动分析画面的色彩等级,然后依据文本描述的内容对视频相应的色调调整,处理速度很快,上色效果也非常和谐。

    除了视频处理工具,Runway 也将 AI 技术与音频处理结合起来,开发出了自动生成文字稿、一键去除空白音频及智能去除背景杂音等工具。Runway 的研究团队目前还在开发一种名为 Soundify 的音效系统,该系统利用 AI 技术先识别视频内容,然后为之生成准确高质量的音频,且自动对齐音频与视频的进度,以解决传统视频制作过程中寻找合适音频困难、精准对齐音频与视频耗时的问题。

    Runway 的野心当然不止于此。有了图像、视频与音频等一系列 AI 工具作为基础,Runway 还推出了 "文本生成视频 "技术并发布了一段演示视频。

    从视频中可以看出,Runway 的 "文本生成视频 "技术包括:通过输入文本指令实现导入视频素材、调色及消除视频中的选中对象;通过文本生成各种图像;通过文本描述添加文字及动效、扣取人物及替换背景等。我们也可以看出视频当中的很多功能都是我们前面介绍过的。

    目前 "文本生成视频 "技术还没有公开,想体验的小伙伴可以申请加入等待名单: https://runwayml.com/text-to-video/

    当然了,这么好的工具肯定不是免费的。新用户注册 runway 后可以享受 3 次免费的视频制作额度,但 30 多项 AI 工具只能使用其中 3 个,并且只能导出 720P 的视频文件。对国内用户来说需要搭梯子才能只用,并且最好使用 Chrome 或 Edge 浏览器打开,不然容易崩溃。所以目前只能期待国内的视频制作软件可以努努力,早日推出与 runway 类似的功能。

    此外 Runway 还举办了首届 AI 电影节,号召全球艺术家使用最新的 AI 技术制作 1-10 分钟的创意影片,优胜者将获得最高 10000 美元的奖励。目前电影节正处于接受投稿的阶段,最终获奖结果会在 2 月份公布,到时候再和大家一起看看有哪些有意思的作品。

    AI 电影节官网: https://aiff.runwayml.com/

    Runway 的 AI 电影节官网公布的 AI 影片片段

    以上就是为今天和大家分享的有关 AI 技术在视频制作中应用,大家对此有什么看法和期待呢?欢迎在评论区分享。喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~

    推荐阅读:

    Google、Meta又放大招!用嘴做视频的时代也要来了 大家好,这里是和你们聊设计的花生~ 近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻

    阅读文章 >

    2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。

    阅读文章 >

  • Runway!AI技术+视频制作的新一代视频内容生成工具

    UI交互 2023-01-05
    大家好,这里是和你们聊设计的花生~之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了设计师的工作效率。既然 AI 技术在图片处理的应用上如此成熟,那如果用到视频的剪辑制作上会有什么效果呢?借助 AI ...

    大家好,这里是和你们聊设计的花生~

    之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了 设计师 的工作效率。既然 AI 技术在图片处理的应用上如此成熟,那如果用到视频的剪辑制作上会有什么效果呢?

    借助 AI 技术的快速消除图像内容

    比如在视频里实现一键抠图,将人物从背景中分离出来,进行背景更换或者插入文字图层:

    或者在视频里实现快速修图,用画笔一抹,就能去除视频中不需要的部分:

    甚至在视频里也用上 Ai 生成性技术,输入一段话,就能将原来的物体变成另一个新的物体:

    其实这些 AI 技术在视频制作中应用的并非想象,也不是特效,而是真的有公司将其变为了现实。下面就是“一键去除画面元素”技术在视频制作中的实现过程:

    在线视频制作工具 Runway 的操作界面

    这些神奇的视频处理功能都是一家名为 Runway 的公司开发的。 Runway 是国外一家在线视频剪辑制作网站,成立于 2018 年。它有非常完善的在线视频处理技术,更重要的是公司团队一直在积极地将生成性 AI 技术应用到视频内容制作中,致力于降低视频创作的门槛,帮助人们轻松制作出内容强大且富有创意的视频内容。

    Runway 官网: https://runwayml.com/

    Runway 官网展示的 30 多个 AI 魔法工具

    Runway 目前已经开发了 30 多个 AI 魔法工具,其中一部分是将 AI 图像生成技术内置。比如我们熟悉的根据文本生成图像、根据图像生成风格化变体、图像延展外绘、根据文本生成 3D 贴图纹理、视频局部无损放大等技术,在 Runway 内都可以实现。

    Runway 内置的图像无限外延功能

    另一部分则是令人惊喜的视频处理魔法,除了我们前面提到的 3 种功能,Runway 还开发了包括动态追踪,智能调色、智能慢镜头、平滑插帧及一键模糊人脸等功能。

    “动态追踪”即通过 AI 技术识别视频中物体的运动轨迹,然后为其附上文字或者其他元素,这些元素会自动跟随物体一起运动,不用手动设置轨迹。

    “智能调色”功能利用 AI 技术自动分析画面的色彩等级,然后依据文本描述的内容对视频相应的色调调整,处理速度很快,上色效果也非常和谐。

    除了视频处理工具,Runway 也将 AI 技术与音频处理结合起来,开发出了自动生成文字稿、一键去除空白音频及智能去除背景杂音等工具。Runway 的研究团队目前还在开发一种名为 Soundify 的音效系统,该系统利用 AI 技术先识别视频内容,然后为之生成准确高质量的音频,且自动对齐音频与视频的进度,以解决传统视频制作过程中寻找合适音频困难、精准对齐音频与视频耗时的问题。

    Runway 的野心当然不止于此。有了图像、视频与音频等一系列 AI 工具作为基础,Runway 还推出了 "文本生成视频 "技术并发布了一段演示视频。

    从视频中可以看出,Runway 的 "文本生成视频 "技术包括:通过输入文本指令实现导入视频素材、调色及消除视频中的选中对象;通过文本生成各种图像;通过文本描述添加文字及动效、扣取人物及替换背景等。我们也可以看出视频当中的很多功能都是我们前面介绍过的。

    目前 "文本生成视频 "技术还没有公开,想体验的小伙伴可以申请加入等待名单: https://runwayml.com/text-to-video/

    当然了,这么好的工具肯定不是免费的。新用户注册 runway 后可以享受 3 次免费的视频制作额度,但 30 多项 AI 工具只能使用其中 3 个,并且只能导出 720P 的视频文件。对国内用户来说需要搭梯子才能只用,并且最好使用 Chrome 或 Edge 浏览器打开,不然容易崩溃。所以目前只能期待国内的视频制作软件可以努努力,早日推出与 runway 类似的功能。

    此外 Runway 还举办了首届 AI 电影节,号召全球艺术家使用最新的 AI 技术制作 1-10 分钟的创意影片,优胜者将获得最高 10000 美元的奖励。目前电影节正处于接受投稿的阶段,最终获奖结果会在 2 月份公布,到时候再和大家一起看看有哪些有意思的作品。

    AI 电影节官网: https://aiff.runwayml.com/

    Runway 的 AI 电影节官网公布的 AI 影片片段

    以上就是为今天和大家分享的有关 AI 技术在视频制作中应用,大家对此有什么看法和期待呢?欢迎在评论区分享。喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~

    推荐阅读:

    Google、Meta又放大招!用嘴做视频的时代也要来了 大家好,这里是和你们聊设计的花生~ 近段时间 AI 工具发展势头越发迅猛,在为大家介绍过的 AI 模型中,DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升,后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻

    阅读文章 >

    2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。

    阅读文章 >


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