组合 误区 很多人 我知道很多人其实都有参考的习惯,但是经常进入参考的两大误区,最大误区就是从参考变成抄袭,这个是很多人的问题,经常性的抄袭会抹杀自己的创造能力,什么是创意?就是老东西和老东西的新组合,我们可以参考别人组合的思路,但是不能直接用他们的组合。还有一块误区就是我不知道参考什么,看它的画面挺好但是不知道好在哪里,也就是有心无力,或者私下想自行学习却不知道如何解析。如果你有以上的问题一定要认真的看完本文,并积极按照文章的思路进行练习尝试,本文会一次性给你说清楚如何进行合理的参考学习。更多平面干货:用好这5个简单实用的海报技巧,特别容易出效果!今天给大家分享五种针对海报的小技巧,都是不需要有什么技法基础就可以做到且效果还不错的。阅读文章 > 欢迎关注作者微信公众号:「视研设」本篇来源:优设网原文地址:https://www.uisdc.com/graphic-design-reference-method
需求 风格 模型 一、AI 绘图背景与趋势随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。AI工具大盘点:2023年,让这20款AI工具帮你更高效地完成工作~2023年,让这20款AI工具帮你更高效的完成工作~大家好,这里是和你们聊设计的花生~2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。阅读文章 > AI 绘图模型令人叹为观止的画作1. 模型的种类与画风目前市面上,AI 绘图在商业设计领域,目前还鲜有人尝试。我们团队通过网上大量的资料和学习,针对 AI 的先有几个工具进行了研究和试验,看看高阶的 AI 模型能否满足我们的诉求。由于市面上存在大量的 AI 绘画工具,每个工具擅长的画风也各有所长;例如 MidJourney;画面注重细节的构建和表达;Stable Diffusion,画风更偏写实;Disco Diffusion;笔触较明显,适合油画风格;包括每一类型里不同的模型也会有不同的效果,例如基于 Stable-Diffusion 开发的 NovelAI Diffusion Models,风格更偏二次元;基于 AI 绘图具有「低成本、批量输出」的特征,而商业化运营需求也带有「日常、高频」的属性,例如日常大促、节日促销活动的 H5 页面、电商 banner 等;所以我们想将 AI 绘图应用在商业化设计流程之中。尝试打破效率边界,利用低投入高产出的方式为团队提效。二、商业设计如何拥抱 AI在进行具体的 AI 绘图实验之前,我们先把商业化运营设计需求分类,以活动类型、周期、对应设计复杂程度,可将其分为为 S、A、B 三个级别。其中 S 级别以专题大促为主,页面以为 banner 和 H5 为代表;A 级别以平台活动为主,同样是 banner 和 H5 需求并存;B 级别为日常促销,以 banner 需求居多;由于以上几类日常运营图的需求频次较高且生命周期不长,在极快的项目节奏中会较多占用设计人力及项目时间;同时因为 AI 绘图模型具有低成本、批量产出的特征,所以我们尝试用 AI 绘图工具来辅助完成日常的运营设计工作。另外值得一提的是,每类模型的擅长风格不同,我们选用的是时下最火热,也是学习资料较多的 MidJourney 来做尝试。三、B 类商业运营设计需求:轻量手段快速达成面对常规运营 banner 需求,之前团队合作流程是由产品、运营同学按固定周期提需求到设计部门,按需求排期,定量投入设计人力逐步交付。既然工作流程上已是最短路径,那么我们尝试把目光聚焦在需求本质上,将 banner 的结构拆散,可以发现绝大部分的 banner 都由这五类元素构成;那么是否能够利用现有成熟的 AI 类技术平台,直接生成商业运营设计 banner 成品(或半成品)呢?我们接下来就尝试一下。1. 对比和尝试我们首先横向对比了国内外智能出图平台的各项能力,以关键功能类型作为衡量指标,得到了一张能力图表;那么横向来看,各平台的能力可以划分为两大类模版绘制、AI 绘制结合模版设计;第一类在线模版绘制;大量模版可以供挑选并调整,支持线上编辑并输出;第二类 AI 绘制;优势是速度极快快、批量出图,但图像的质量没有保障,需结合模版能力一起使用才能质量可靠的设计图;综合效率和结果两方面来考虑,我们选择第二类方法,如上图所示网上有多种平台可供选择,大家可以根据需求自行选择恰当的平台来进行实验。2. 方法总结在具体操作流程上,跟我们常规的设计作图略有不同;大概分为 2 个阶段;首先我们需要选择配图主题类型、活动类型、人群,这决定了图片风格和商品素材的表现;并输入对应的文案标题,即 banner 图的文案显示;随后可得到批量生成的初稿;点击任一初稿,进入线上编辑环节,利用丰富的在线编辑能力对 banner 图做调整,例如图层查找,替换商品素材、装饰素材,更改字体等等;在智能编辑模块中简单处理后即可得到可用的设计图;经过大量实验后发现,这类方式更适合于电商类型的 banner 图;同时在经过对产品、运营同学的简单培训后,大家也可以非常迅速的做到上手并产出 banner 图;这也与我们的预期判断是匹配的;四、A 类商业运营设计需求:AI 辅助生成除了 B 类的日常促销活动外,我们也会经常遇到类似上图的 H5 头图的运营设计,面对这类需求通常需要在探索风格,绘制画面细节上花费较长时间,我们尝试通过 AI 模型辅助出图解决这个难题。1. 工作流程介绍在正式开始作图之前,我们需要对 MidJourney 的能力区间、工作模式建立基本的认知。MidJourney 允许用户以对话的形式,通过以输入描述词的方式,经过 AI 模型运算后得到其返回的图片。2. 利用 MidJourney 垫图能力辅助设计头图;针对 A 类平台活动类运营需求的绘制工作共分为四个步骤,分别是风格定义,垫图描述,调整与输出;首先先通过参考图,明确出我们倾向的风格和特征;第二步我们需要用到「以图生图」,在 discord 中将参考图发给 MidJourney,并结合意向风格,构图和其他特征添加上恰当的描述,可以得到初稿;不断调整图像与描述词,最终逐步接近目标效果;头图生成好之后,搭配上文案的字体设计与装饰元素,可以看到最终的效果如上。利用 AI 模型辅助生图,可以使繁琐的工作量可以得到有效压缩,从而把大家从繁杂的工作中解放出来。五、S 类商业运营设计需求:AI 智能生成除了较为基础的 A 类运营设计需求外,面对专题大促的运营需求需求,其展示周期更长,且对于设计质量要求更高,常常会涉及到 3D 场景的搭建和渲染工作,相对于 A 类需求,S 类需求通常排期时间更长,同时对设计师的能力提出更高要求;那么针对画面设计要求更高阶的运营需求,除依靠设计师个人能力来应对之外,会否有更高效、便捷的办法呢,我们同样可以通过 AI 模型绘制的办法来尝试解决这个问题。1. 工作流程介绍基于前面对于 MidJourney 的基础了解,我们接下来看下利用 MidJourney 辅助输出运营设计图的工作流,分别是风格定义、撰写描述、二次调整、输出 4 个步骤;① 风格定义首先是风格定义,由于 AI 绘图具有高度的随机性和风格化的特质,而运营设计更注重理性的构图版式。所以在正式进入绘图步骤之前,我们需要提前明确画面大致的风格调性,这样才能保证后续 AI 产出的方向不跑偏,并更准确的获取我们想要的图像;我们以电商运营广告中最常见的美妆类别举例,通过观察可以发现,美妆类的图像具有明显的风格化特征,比如居中或对称构图、明亮的环境光等。所以这些特质就将成为我们输入的词汇,同时也是输出筛选步骤里的重要依据。② 撰写描述MidJourney 模型出图有两种模式,最常见的是 text to img 文本生图;以及 img to img 以图生图;文本生图即通过一段文本描述告诉 AI 模型你想要的画面,由它帮你绘制出来;以图生图是通过一份原始图片,配合文本描述,来绘制跟原始图片类似风格但又不尽相同的图片素材;无论哪种方式,都需要明确一个关键的概念「Prompt」,也就是「关键词描述」。Prompt 关键词描述可以理解为与 AI 创作沟通的媒介,我们需要将脑海中构想的画面用恰当的提示词(语句)描述出来,并通过它来缩小 AI 想象的空间,它才能听懂、理解并产出令人满意的画面。另外值得注意的是,相同的描述文本内容,词语的顺序、前后词汇的关系对于内容的产出影响差异也会非常的大。所以关键词描述的写法至关重要;Prompt 的大致写法由几个部分构成,主体部分,环境氛围,构图,风格化,以及其他设定。我们接下来通过 Prompt 描述公式,一步步完成一张美妆运营图的设计。首先是主体内容的描述,通常可以拆解为,存在几个「什么样的」的主体,在做什么动作,并附带了其他的什么动作。例如:There was a pink lipstick and a glass bottle of perfume;可以得到如上的主体内容,香水口红的图像。其次是为主体内容添加场景或环境,例如给定某些地点或物件。比如案例中,我们指定背景花朵、自然植物,以及倒影等词汇。通过观察以上四张图,可以发现模型中「Nature Plants」这个词汇对画面有较大的影响,决定了不同风格的背景以及复杂程度。同时也能发现,尽管只相差了一个描述词,但前后结果仍存在较大的差异,所以大家在调试画面的过程中可以从词汇逐个调整,以尽量减少画面的随机跳变;然后是构图与镜头,比如左侧两张图强调景深,右侧两张图强调了构图位置等;接下来是风格化与参考方向,可以添加上艺术家名字或平台名字,或直接将图像风格写出来;比如说 3D 渲染还是 2D 画风,可以从上图的结果中明显感觉到两者的区别。最后是图像的设定,例如--q 5,代表最高图像质量;同时你也可以通过类似「8k, ultra realistic」这样的词汇来对画质做强调。第二点是画幅,--ar 3:2 表示横纵比为 3 比 2 的横幅图像,--ar 9:16 表示横纵比为 9 比 16 的纵向图像;-- v4 代表最新的第四代计算模型;最终通过以上五个小步骤,我们可以得出一大批风格各异的草图:再通过第一步的风格调性做筛选,可以初步得出不同类型的初稿,以满足不同的品类需求。③ 二次修正,进阶调整当取得满足需求的初稿之后,我们可以使用 MidJourney 的进阶功能,来提升图像质量或对图像画面做调整;以下是几个使用频率最高的的调整功能;首先是通过点击成图下方的 U 按钮,可以放大对应序号的图片的比例,来提高其分辨率;第二种,通过点击图片下方的 V 按钮,可以基于原描述词,生成对应序号图片的变体,画面对比母版,图片的细节会出现随机变化,例如上图的花蕊、香水瓶的外轮廓;第三种是 Light Upscale Redo & Beta Upscale Redo,这两个功能都可以提升画质并细化效果;最后一种也是变体生成方法,值得注意的是,需在「/setting」中开启「Remix mode」功能后,再次点 V 功能,此时可以二次编辑关键词;例如上图就通过「Remix mode」重置了图像的尺寸比例。④ 调整输出将二次修正后的图像,经过设计师轻量化的调整工作,例如修正细节,添加文案后,即可看到最后的效果。以上就是利用 AI 绘图技术辅助生成 S 类商业运营设计图;可以看到其优势是短时间、大批量生成可供选择的风格背景图;同时能配合需求本身,通过 AI 模型的变体加二次描述词编辑,来满足我们的个性化要求。结语以上则是本文的全部内容,如果你也想通过 AI 绘图的形式来辅助提高自己的工作效率,以下几点值得仔细阅读,首先 MidJourney 前期有免费的体验额度,当额度用完后需要付费使用。其次免费用户生成的作品不能商用,只有付费用户才拥有该图片的所有权。由于 AI 绘图的版权政策时常存在变动,所以也请大家关注 Midjourney 官方信息,以免带来困扰。随着 AI 模型能力的飞速迭代升级,现有的短板能力也会不断补齐,因此我们可以相信在不远的将来,设计师利用 AI 模型来开脑洞并辅助出图是趋势所向,但并不是说我们需要完全依赖 AI,因为设计本身是理性而浪漫的工作,仅靠随机性做设计是完全不可取且不靠谱的。更合适的思路应该是,设计师首先定义好规则与框架,从 AI 模型提供的成百上千个结果中寻找到最匹配我们诉求的结果,从而辅助我们更快更好的达成目标。另外面对日新月异的的智能工具,我们应该保持终生学习的心态,做好时刻接受新事物的挑战,才能在越来越激烈的竞争中立于不败之地。欢迎关注作者微信公众号:「腾讯ISUX」本篇来源:优设网原文地址:https://www.uisdc.com/aigc-design
构图 画面 主体 前言配图是我们平时在设计工作中经常用到的,一个好的配图很多时候会直接影响到一个作品的好坏,图片本身也是一种视觉语言,通过学习跨领域的知识可以帮助我们提升自身所处的领域设计能力,本篇文章和大家讨论构图和景别知识,通过对这些知识的了解判断如何选择一个好的配图以及怎么应用好配图,大多数设计师选择配图时都是凭着主观意识在选择配图,你所选择的配图很大程度会受到你的主观意识的影响,这些主观意识来源于自身审美、文化、环境等因素的,因此在我们的主观意识基础上,应该具备一定的客观依据来帮助我们更好的选择合适的配图。构图与景别知识在摄影、绘画、影视中应用很多,但很多设计师容易忽视这些知识,这些知识看似是摄影、绘画、影视等行业的知识与设计好像没太大关系,这些知识也是很有必要学习的的理论知识,对构图景别的理解很大程度会影响你能否把握好设计画面中的配图,配图本身也是一种视觉语言,提升构图和景别知识对设计师整体综合实力提升是有帮助的,当你做三维和插画等设计时同样也会用到这些知识,了解这些知识会让你以客观依据的角度,运用和判断设计中配图的好与坏。相关干货:一图胜千言!如何给作品配图?图形在版面构成中,占有很大的比重,也有这样一说:一幅图片胜于千字。阅读文章 > 一、关于构图目前来看几乎所有的艺术或商业作品,无论是摄影、绘画、CG 等都离不开画面的构图与结构,你甚至能在很多绘画大师的的经典作品中看到他们作品中也使用了构图理论,合理的构图作品,给观众美的视觉享受和与众不同的情感体验,同时提升画面表现,关于构图的知识很宽泛,构图方式方法也非常多,有的作品中可能包含多种构图形式,这里给大家大致介绍一些常见的构图知识,目的是抛砖引玉让大家意识到良好的构图能平衡画面同时,传达出更清晰明确的图像信息。1. 中心构图中心构图是将画面主体放置在画面的视觉中心,让主体成为整个画面的视觉焦点,通过周围环境氛围烘托画面主体,这种构图形式聚焦主体,能更好的凸显画面主体。2. 一点透视一点透视构图有较强的空间感和纵深感,画面的元素会向中心聚焦,会把观众的视觉引导向画面中心,比较适合表现画面空间感。3. 黄金法则黄金法则构图遵循古希腊学者毕达哥拉斯的黄金分割比例进行构图,也就是我们常说的 0.618:1,黄金法则构图有采用像三分法那样井字构图,还有采用黄金螺旋的构图方式,构图时将主题放置在黄金比例焦点或线上。4. 对角线构图对角线构图中主体在画面的对角线位置排列,对角线构图视觉冲击强,具有动感和不稳定性,使画面更有趣味和视觉张力。5. 三角形构图主体在画面中呈三角形状,正三角形构图画面更具稳定性,反之倒三角形构图会使画面有紧张感和不稳定性。6. 字母形构图字母形构图画面呈现字母形态,不同的字母构图会给观众带来不同的视觉感受,S 形构图是一种比较常见的构图形式,S 形构图迂回延伸使画面产生优美、雅致、韵律感。7. 引导线构图引导性构图利用画面中有形或无形的线,引导观众的视觉聚焦到画面的重点,引线不一定是一条线,它是一种具有引导性的东西,光影、道路、河流等都可以做为引导线,引导性构图视觉表现强,引导观众视线突出主体。8. 三分构图三分构图是最常用的构图方法,结构由两条竖线和两条横线构成,形成一个井字,也叫井字构图法,在三分构图中主体通常放置在四个交点上或线条上,三分法是比较常见的构图形式,可以在很多摄影和绘画作品中看到。9. 对称构图对称构图是根据对称轴,使画面形成的对称的构图形式,比较常见的对称构图上下对称、左右对称,对称构图具有平衡性、稳定性、均衡性。10. 水平线构图水平线构图也是比较常见的一种构图,水平线构图通常表现宽广的场景,地平线、海面、湖面等主题,水平线构图给人宽阔、稳定、平静、舒适的感觉,水平线构图主要是是采用横画幅来表现。11. 垂直线构图垂直线构图中主体呈现为垂直的线条,垂直线构图给人高耸、庄严、挺拔的感觉,具有较强的视觉张力,垂直线构图常采用竖画幅来表现。12. 十字形构图十字形构图是水平线和垂直线的组合,十字形构图画面会给人平稳、安全、严肃、神秘的感觉。13. 夸张透视夸张透视会以比较特别和夸张的的视角表现画面和主体,使画面整体都具有强大的视觉张力和冲击力。14. 虚实对比虚实对比通过主体和背景的间的虚与实对比,从而突出画面主体,虚实对比使画面更有层次和空间感。15. 明暗对比明暗对比通常以暗衬托明,在视觉感受中越暗感觉离我们越远,越明亮感觉离我们越近,明暗对比对比可以使画面更有立体感,层次感等,通过画面中的明暗对比形成的强烈反差,可以凸显画面中主体,引导观众视线到主体上。16. 色彩对比色彩对比中包含三个要素色相对比、纯度对比、明度对比,同时根据色环中的色相变化,还可以分为同类色对比、邻近色对比、对比色对比、互补色对比,色相角度变化越大对比月强烈,通过色彩对比可以突出画面重点、丰富画面、提升画面层次,背景色彩与主体色彩形成对比,能凸显画面主体。17. 奇数原则奇数原则画面通常是一个、三个或五个主体,通常不超过七个,超过七个时观众会将其视为一个整体,当画面中为主体为奇数时,在视觉上会比偶数更和谐、更美观。18. 视觉引导视觉引导通过画面内容引导用户视觉,视觉引导形式有很多种,人物或动物直视、运动方向、肢体语言等,都可以引导用户在观看画面时的视线运动。19. 大小对比通过大小对比使主体与周围元素形成差异化的视觉冲突,同时大小对比中的次要元素还可以作为比例参考,突出主体的大小,强烈的视觉落差增强版面节奏。二、关于景别裁剪图片为不同景别的图片对板式设计也有很大影响,不同景别的图片传达的视觉语言也是不同的,哪怕是图片朝向的位置都值得我们仔细思考,在配图时我们要思考通过图片传达什么视觉信息给观众,所以在我们做设计时,要想清楚当前页面要传达什么样的信息从而采用什么样的景别。1. 大远景大远景通常表现广阔气势宏伟的场景,大远景的空间感非常强,强化景物与环境的关系,主体相对较小与场景形成强烈的大小对比。2. 远景远景营造主体与场景的关系,通过画面场景叙述主体和场景的关系,远景具有较强的空间感,具有开阔的画面场景。3. 全景全景通过场景来体现主体的处境,利用人物和场景的关系强化主题,全景中主体会被强化形成明显的内容中心,从而弱化场景。4. 中景中景表现主要表现人物膝盖以上,在中景中人物在画面中的占比更大更为突出,人物会被强化,同时弱化场景。5. 近景近景主要表现人物胸部以上,画面中人物或主体会占有主导地位,强调人物的情感特征,通过细微人物的动作、肢体语言、表情等表现画面主题。6. 特写特写主要表现人物肩部以上或主体的细微部分,主体被放大,场景弱化到难以分辨,强调主体的情感、心理或产品的工艺结构等。7. 大特写大特写会将主题放的更大,展现主体的局部细节,大特写具有强调和突出主体细节特征的作用,具有极强的视觉效果。写在最后配图知识是设计师在平时工作或设计练习中必备知识,很多时候我们在选择配图时完全是凭感觉在选,图片也是一种视觉语言,作品整体质量也会受到配图的影响,本次配图知识分享希望能帮助大家在之后选择设计配图时,在主观意识判断的基础上有一个客观的依据,写这篇文章的同时,我也正好根据文章大纲做了一套版式练习作为文章配图,最后给大家分享几个高质量的图片网站:免费可商用!超过十万张相片下载的图库「Rgbstock」Rgbstock 是一个 100% 免费图库,收录超过 100,000 张相片素材让使用者免费下载!阅读文章 > 可自由商用!收录超过100万张图片素材的免费图库PikWizard本文要介绍的「PikWizard」是一家可免费图库,收录超过 100 万张高质量、适用于商业用途的免费图片素材,可安全用于商业用途,无需标示原作者或出处来源。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/patching
动画 性能 序列 今天给大家推荐一款未来很有可能会成为主流的动画解决方案 —— PAG。一、常见动效落地方案1. Lottie它算是市面上比较普遍的一种动效落地方式,它可以制作很多种类的矢量动画以及图片动画,它的缓动曲线会占用很多内存,在各平台效果支持上也不是特别的稳定,而且 Lottie 所支持的 AE 属性对设计师来说有一定的限制。一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)大家好,我是彩云。阅读文章 > 2. SVGA与 Lottie 相比性能和稳定性会更好一些,因为 SVGA 是通过记录我们每个图层每个时间上的动画状态,因此 SVGA 也可以输出序列帧动画,但是它的内存消耗会比 Lottie 高,并且 SVGA 支持的 AE 特性也比 Lottie 少一些。3. Apng 和 Webp这两种动效落地方案目前在原生端可以通过一些代码框架支持,在 Web 端 Apng 和 Webp 格式存在一定的兼容性问题,目前在主流浏览器上是可以支持的。二、动效落地神器——PAG1. PAG 是什么PAG(Portable Animated Graphics)是腾讯自主研发的一套完整的动画工作流解决方案,助力于将 AE 动画方便快捷的应用于各平台终端。设计师在 AE 上设计出动画后,可以通过导出插件导出 Pag 文件,同时可以在桌面端预览工具中实时预览效果,还可以通过桌面端进行性能检测。PAG 可以支持 Android、iOS、web、mac OS、Windows 和 Linux,涵盖了业界常用的终端平台,支持 AE 动画实时渲染、运行时编辑。Lottie 和 SVGA 的设计目标是解决 UI 动画场景,PAG 的诞生的原因是因为 Lottie 无法满足视频编辑场景里的动画需求,后续又兼顾了 UI 动画在内的各种场景。2. 完善的动画工作流通常设计师输出动效给开发都是直接 AE 导出就给开发了,很少去关注动效的性能问题,并且每次想要尝试不同素材动画效果时,需要在 AE 中调试输出后在去看效果,导致设计成本浪费。采用 PAG 进行动效设计的话,我们在 AE 中调试好输出动效后,可以直接在 PAG 桌面端进行查看,在桌面端我们可以快速替换动效中的图片素材或文案来查看效果,同时可以通过性能面板查看当前动效的性能,方便设计师进行针对性优化。3. 性能强文件小PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源,在解码速度上比 Lottie 所使用的 JSON 文本数据快几十倍,在性能方面,PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。而在文件大小上,PAG 通过利用动画文件本身的特点,获得了极高的压缩率。通过跳过大量默认值的存储,使用比特位来紧凑存储,相同动画内容可以比同类型方案平均减少 50% 左右的文件大小。4. AE 特性全支持PAG 动画制作有两种模式,分别为“矢量特性输出”和“BMP 预合成输出”,先来说下“矢量特性输出”:我们可以理解为用矢量素材和图片素材通过 AE 特性进行动效制作,PAG 的 AE 特性的支持是多于 Lottie 和 SVGA 的,且基本上涵盖了所有的 AE 特性,矢量特性输出性能会比 BMP 预合成输出性能更好。再说下“BMP 预合成输出”:我们可以理解为序列帧动画输出,也就意味着通过 BMP 方式输出我们可以使用 AE 中所有的特性,甚至是 AE 插件效果和视频素材,虽然“ BMP 预合成输出”可以支持所有 AE 特性,但是和 SVGA 中输出序列帧一样,“BMP 预合成输出”性能消耗和动效文件大小也会更大,所以大家在使用时要合理把控,PAG 支持了矢量和 BMP 预合成混合导出,从而实现在支持 AE 所有特性的同时,又保持运行时的可编辑性。这里我们再把开头的产品对比横向加入 PAG,可以很直观地感受到 PAG 相比其他产品的优势所在:5. 目前已使用 PAG 的产品下面这些产品中都应用到了 PAG 这款动效落地方案,包括我们非常熟悉的微信、QQ、王者、腾讯视频等。小结目前市面上的动效解决方案各有优劣,Apng 的出现感觉确实很棒,它解决了我们在其他动效方案中所遇见的问题,让设计效率得到了提升,但如果是 PAG,则可以通过“ BMP 预合成导出”方式一键导出,你不需要再去把一些特殊效果进行序列帧输出导入的过程,PAG 会帮你输出这些特殊效果,并做压缩和优化。三、PAG 的实际应用1. 序列帧动画目前 3D 类动画是一个流行的趋势,通常我们都采用的 AE 来制作一些 UI 中的视觉动画效果。如果我们要制作一些特别的效果,比如用三维软件制作一些 3D 的交互视觉动画,以 C4D 为例,我们可以将制作好的 C4D 动画导出为序列帧,放进 AE 中以“ BMP 预合成输出”我们就可以得到一个三维效果的交互视觉动画,而且 PAG 输出的序列帧动画相比 SVGA 性能优化的更好。用过 SVGA 的同学,一定尝试过序列帧来输出动效,通过序列帧虽然能给我们带来更炫的视觉效果,同时它也会带来更大的文件体积和显存效果,通过下图同一序列帧动画文件输出对比:PAG 显存消耗比 SVGA 小 40 倍,PAG 文件大小比 SVGA 小 2 倍,相比 SVGA 序列帧输出,显然 PAG 在序列帧输出的优化上做的更好。2. 礼物打赏动画礼物打赏类动画是比较社交类产品中最常见的视觉动画,礼物动画比较注重整体的氛围感和视觉效果,因此会用到 AE 第三方插件、脚本等丰富画面视觉效果。以 SVGA 为例,通常一些特殊视觉效果需要我们做进行序列帧的方式处理,采用 PAG 输出我们可以在需要输出的预合成名字后面加“_bmp”,通过“ BMP 预合成输出”直接导出动画,PAG 会帮你输出这些特殊效果,并做压缩和优化,提升动画输出效率。3. 悬浮球和图标动画悬浮球运营位也是产品中运营活动的引流入口,将悬浮球采用动态化的设计,可以提升趣味性和视觉吸引力,图标动画也是非常常见的动画表现形式,比如:Tab bar 图标,礼物打赏图标等。4. 匹配和弹幕漂屏动画PAG 也可以制作匹配和飘屏类动画效果,设计师将动画输出给开发,开发可以调用相应方法替换动画中的的图层文件和文本内容,比如:用户匹配成功时的用户头像和名字,以及弹幕飘屏中的用户头像、头像框和用户名字等。5. Banner 动画Banner 类运营动画,相信大家肯定看到过支付宝一些运营 Banner 动画,类似这样的动画我们也可以使用 PAG 进行设计制作后输出给运营的同事进行后台配置,相比静态 Banner,动态 Banner 更加具有趣味性,动态元素更吸引用户注意。6. 徽章动画徽章动画是社交类产品中很常见的视觉动画,使用动态形式表现徽章能更好的体现出尊贵感,在 PAG 中我们可以直接通过轨道遮罩制作扫光效果会简单很多,同时 PAG 还支持 AE 混合模式,我们可以通过混合模式制作一些图层效果。写在最后其实我很早就关注 PAG 这个动画解决方案了,PAG 出来没多久我就去尝试使用了,算是 PAG 比较早的一批用户吧,目前来看 PAG 相比目前市面上的动画解决方案来说确实很不错,无论从 AE 的特性支持,以及序列帧动画输出的压缩和优化都比市面上的其他解决方案更好,自动检测动效文件错误这个功能,对于经验不丰富的设计师来说很有帮助。PAG 会在输出时告知你动效文件可能存在的一些问题,性能检测可以让设计师可以提前预判动画所存在的性能风险,从而对动画进行合理的调整,避免因动效性能导致的产品稳定性问题,目前 PAG 团队还在持续迭代优化中,期待后续更多优秀的功能出现。PAG 原生端和 Web 端 1 月 14 日正式开源,目前可以下载使用,对 PAG 感兴趣的设计师朋友,可以去官网: https://pag.io 了解更多信息。附录——PAG使用指南1. 快速安装 PAG以 MacOS 系统为例,PAG 的安装个人认为对新手用户是非常友好的,整个安装的过程跟着提示确认就行,相比其他的动画方案安装要简单很多。在官网下载 PAG 安装包;安装 PAGViewer 软件;打开 PAGViewer,PAGViewer 将自动检测是否需要安装/更新 AE 导出插件,按提示安装即可(记得安装前先关闭 AE)如果没有自动检测提示安装点击菜单栏 "PAGViewer" -> "安装 AE 插件"2. PAG 插件配置在"After Effects CC" -> "首选项" -> "PAGConfig..."可以打开 PAG 配置面板,配置面板中分为“通用”和“ BMP 预合成”。 “通用”可以理解为使用 PAG 所支持的 AE 特性制作的动效输出,“ BMP 预合成”则是在动效中采用了特殊效果比如AE 插件或脚本制作的特效。通用:导出场景:设计师可以根据使用场景进行设置,我通常用的”通用“模式导出版本控制:这里有三个选项,stable:稳定版,表示导出稳定版本的 PAG 文件,这类 PAG 文件通常可以被线上已经发布的 app 支持。发布到线上的 PAG 常用此选项。beta:最新版,表示导出最新版本的 PAG 文件,这类 PAG 文件可能无法被线上已经发布的 app 支持。测试 PAG 新特性时常用此选项。custom:自定义导出为指定的 SDK 版本能支持的能力,需搭配 TagLevel 使用,具体 TagLevel 的值可以从指定版本 SDK 里的 PAGFile.MaxSupportedTagLevel() 获取。TAG Level:只有当导出版本控制选项取值为 custom 时,TAGLevel 栏才有效,否则无法输入。取值范围为 44 至 1023.具体设置到什么值可以咨询客户端开发人员,通常根据线上客户端 SDK 所支持的最大 TagLevel 确定。位图压缩质量:用来控制位图和 BMP 预合成的压缩质量,取值范围(0-100),越高图片越清晰但是文件越大,默认 80。位图像素密度:用于控制位图在文件中存储的最大像素密度导出图层名字:这个功能默认打开就行导出字体:打开后将会导出动画中使用字体的字体包单独调节图像尺寸:打开后如果导出的素材中包含图片或 BMP 预合成,AE 导出插件将在导出过程中弹出“素材压缩面板“,设计师可以对不同的素材图片进行单独的压缩BMP 预合成:BMP 预合成后缀:在需要输出的预合成后面加入后缀名后,将会以“ BMP 预合成”形式输出,默认后缀是“_bmp”,不分大小写,大家也可以自定义一个后缀。图像质量:用来控制位图和 BMP 预合成的压缩质量,取值范围(0-100),越高图片越清晰但是文件越大,默认 80。导出尺寸上限:用于控制导出 BMP 预合成的最大分辨率(短边)。过大可能会显著增加 PAG 文件尺寸;过小会影响播放的清晰度。默认 720关键帧间隔:用于控制导出 BMP 预合成的关键帧间距。取 0 表示只有第一帧为关键帧;其它正数表示关键帧间距,默认 60,关键帧间距影响播放 seek 时的解码效率。取值过小会增大导出的 PAG 文件尺寸导出版本列表:导出 BMP 预合成时允许单个文件包含多个分辨率版本的截图序列,程序在实际使用时会动态使用最合适的分辨率以降低性能损耗。配置此列表能控制具体要导出哪些分辨率和帧率的截图序列版本,可以通过“增加版本”/“删除选中”来增减列表存储格式:可选“视频序列帧”和“位图序列帧”两种导出的存储格式,视频存储格式会更小,在含有硬件解码的平台上性能也更好。位图存储格式文件更大,在只有软件解码的平台上或者非常小的尺寸时比视频解码略微更快。默认值是 "视频序列帧"3. PAG 设计输出方式PAG 输出动画有两种模式“矢量预合成输出”和“ BMP 预合成输出”。“矢量预合成输出”就是通过矢量图形和位图素材利用 PAG 所支持的 AE 特性制作的动效,这种模式输出的优势在于性能好文件体积小,同时可以在桌面端编辑图片预览不同素材下的动画效果,缺点是无法使用一些特殊效果,比如 AE 的第三方插件 “ BMP 预合成输出”就是序列帧的输出形式,因此可以支持 AE 中所有的特殊效果包括第三方插件和脚本效果等,但它的缺点是性能差文件体积大,同时无法在桌面端编辑替换素材。4. 自动检测动效文件错误这是非常贴心的一个设计,在输出 PAG 动效时,插件会自动检测当前动效中出现的一些问题,提前告知设计师当前动效存在的一些风险,以便设计师即使做出调整,比如:位图数量太多、图层数量太多等,之前有不少设计朋友问过我 SVGA 输出时不知道出了什么问题,在 PAG 中插件会自动检测提示你可能出现的问题。5. 性能检测面板这个功能对于设计师来说是一个很好的功能,很多设计朋友可能更多的关注的是动效的视觉效果,缺忽视了性能的问题,因为通常动效落地方案没有这个功能(SVGA 可以在线查看内存消耗),告诉你性能有问题的一般是开发拿过去测试后发现来告诉你的,但是性能确实还是比较重要的一个事项,因为它可能会直接影响产品的稳定性,有了性能检测面板,设计师可以提前预测到你所产出的动效性能是否合理,在性能面板中可以看到动画时长、播放帧率、显存大小、动画尺寸等,性能面板也给出了性能的参考值,超过这个值会用红色感叹号提示你。6. 快速编辑预览动画这个功能适用于“矢量预合成输出”的动效,“ BMP 预合成输出”不支持图片编辑,设计师可以在文本编辑区编辑文本信息,在图片编辑区直接替换当前动效中所使用的位图素材,可以快速验证不同位图素材和文本信息的效果,不用在到 AE 里在去折腾了提升设计效率。7. 支持音频输出PAG 是可以支持音频输出的,这对于礼物动画设计的设计师来说是好事,通常需求方都希望比较贵的礼物能带一些 BGM 更有氛围,采用 PAG 的话就可以制作一些带音效的礼物啦,可以在桌面端 PAG 文件结构:getRootLayer:PreComposeLayer -> composition:VectorComposition -> audioBytes 的值,来判断 Pag 文件中音频输入是否导出成功,为 {} 时导出成功,为 null 时导出失败或无音频。小结PAG 无论是安装还是 AE 特性支持的都要优于现有的动画方案,两种输出方式可以根据动画效果进行合理选择。自动检测和性能检测能让设计师提前预测可能出现的错误,快速编辑预览帮我们快速尝试不同素材的效果,提高设计效率;支持音频输出对礼物设计来说是件好事。 关于 PAG 的使用介绍我这里只做一些简要的概述,更详细的使用说明大家可以在 PAG 官网中进行查看本篇来源:优设网原文地址:https://www.uisdc.com/pag-2
人工智能 干货 工具 大家好,这是 2023 年 2 月的第 4 波干货!这次干货合集开头的创意工具合集网站特别不错,设计师和创意工作者应该都会喜欢。当下大热的 AI 生成也越来越多地反馈到设计工具当中,这次合集也推荐了 3 款人工智能工具,功能各有偏重。除此之外,出自设计社区的 Notion Plus 工具集、顶级 SaaS 服务灵感合集也相当不错。当然,在此之前记得看看往期干货中有没有你感兴趣的素材:第三波!2023年2月精选实用设计干货合集大家好,这是 2023 年 2 月的第 3 波干货!阅读文章 > 下面我们具体看看这一期的干货:1、创意工作者高效工具大合集https://www.curated.design/这是一个面向创意工作者的最新设计工具和设计服务的导航网站,和以往推荐的很多同类导航网站有区别,Curated Design 所推荐的基本都是最新最前沿的创意工具,他们对于工具本身的素质、产出内容的质量都有很高的要求,而所提供的工具的门类,也紧跟趋势加入了人工智能的类别。对于创作工具和素材有兴趣的同学,可以关注一下这个网站。2、全方位强化 Notion 的超强工具集https://www.notionplus.dev/有很多设计师同学,已经开始使用 Notion 做一些基础的设计了,而现在借助刚刚问世的 Notion Plus,你可以在 Notion 中使用超过 500 种不同的自定义组件,创建超过 1000 种不同的组合,将 Notion 彻底变为一个开放式的设计工具,你可以结合 Super.so 或者 Potion.so 这样的服务来直接制作网站,将你的内容管理、设计和产出,全部在 Notion 中完成!3、人工智能专辑封面生成器https://www.daftart.ai/Daft Art 是独立设计师和开发者 Ahmed 所创建的服务,这项服务经过大量的数据训练,可以根据你的音乐的标题、内容来创建一系列的封面图,你可以在其中选择和你的音乐氛围接近的图。Daft Art 能够生成的封面图高达 3000x3000 px,同时,它生成的封面图同样适合 Spotify 和播客的封面,有需求的创作者可以试试看。4、人工智能多风格肖像生成器https://changestyleai.com/这个名为 Change Style AI 比起之前的一些人工智能头像生成工具要更加成熟一些,它可以更好的保留图像原来的结构,角色的动作和造型,你上传图片之后,能够借助人工智能生成多大30种不同风格的照片。目前这项服务提供免费试用,可以上手体验一下。5、视障用户网页效果模拟器https://venngage.com/tools/color-blind-simulator视力障碍的类型有很多种,想要确保自己设计的页面在配色上有足够良好的可用性,最好的办法还是直接体验一下不同视障人士查看网页时候的体验。Venngage 视障模拟器可以模拟 7 种最常见的视障用户浏览时的效果,基本上可以覆盖多数有视力障碍的用户。6、顶级 SaaS 服务商设计灵感大合集https://www.saasframe.io/这个网站汇集了超过 1000 个顶级 SaaS 服务和产品的产品页面、营销服务和电子邮件的相关设计,如果需要为当前的产品设计风格合适、呈现方式合理的页面,不妨在这里看看成熟的设计案例。7、多合一人工智能内容编辑服务https://booltool.boolv.tech/homeBooltool 是一个一站式人工智能编辑工具,它可以在人工智能的加持之下,帮你快速地将原始的素材加工为可用的资源,无论是图片、文本还是视频,都可以快速进行编辑、修整。换句话说,在它的帮助下,你所设计的网页和 APP 或者宣传页面,都可以 Booltool 直接完成,无需在别的地方操作。提高3倍效率!能落地的AI绘画&设计系统课来了!如何快速入门AI绘画和AI设计?阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/2023-2-design-resources-vol4
创意 很多人 内容 本篇内容是借鉴参考的下半部分,因为上半部分的内容过长了,所以不得已分成了上下两章。下半部主要针对的是突破的技巧,我会把我自己总结的一些经验性的创意思路方法教给大家,如果熟练掌握这套思维,一些简单的,工作中常用的创意对于大家来说就完全不是问题,同时我们有了这个基础再去看别的作品的时候也会吸收到更多更实用的内容。上期回顾:不知道如何借鉴高手作品?收下这份平面设计保姆级教程!我知道很多人其实都有参考的习惯,但是经常进入参考的两大误区,最大误区就是从参考变成抄袭,这个是很多人的问题,经常性的抄袭会抹杀自己的创造能力,什么是创意?阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/graphic-design-inspiration
页面 用户 信息 在一个普通 B 端产品(以浏览器为载体)的页面中,相信很多产品设计师都有类似的经历,这个页面是要一直沿面包屑下沉,或者像 C 端产品一样无限返回,还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。信息结构的设计过程中,每一个功能模块是经过深思熟虑做好定义的,如果想让用户的任务流程顺畅、有所提效,那么信息架构的导航必须要发挥作用,也就是说用户需要去记住或者被“教育”每个模块的内容有什么。更多B端干货:8000字干货!B端交互设计师如何进行页面设计?前言在日常的设计工作中,拿到产品给的原型或者需求清单,分析完用户和任务流程后不知道该如何下手,或者不知道如何系统的开展设计工作,再或者不知道如何做出符合用户和业务目标的设计方案。阅读文章 > 一、为什么要跳转1. 结构扁平化,减轻心理负担一次测试平台项目迭代中,发现旧有版本的面包屑层级特别深,最多可有 5 级,而且是详情页面与新建页面糅合在了一起,作为项目流程中的一个环节,不应该出现这种情况。于是调研了市面上能看到 B 端产品,腾讯云、阿里云和华为云等逐渐弱化了面包屑导航的使用,页面层级一般不会超过 3 级,华为云和腾讯云已经取消了面包屑的使用,阿里云虽然保留了面包屑导航,但是二级页面面包屑和返回同时存在,信息层级上也已经弱化了面包屑对信息层级的延伸。在一次任务流程中,如果信息层级很深,意味着用户会深入到更多的页面,进而偏离主流程,同时需要接纳的更多信息量,额外增加的信息负担会给用户的心理造成压力,而且还会给产品扣上信息沉重的帽子。对于主流程,模块提炼出的信息已经能够满足对用户对该模块的需求,如果仍有想了解颗粒度更小信息的需求,那么可以通过友好链接跳转到信息的源始位置查看,而不是在当前页面与主流程同级继续下沉。2. 增强记忆点,提高效率在产品设计之初,每个一级模块就已经做好了定位,比如腾讯云的私有网络,包含了子网和路由表,如果用户在私用网络的详情页能继续打开子网的详情信息,那么私有网络的定位就变成了私有网络的信息+子网信息,进而削弱子网模块的功能性,对用户而言,会有多处可以查看子网信息,这会模糊用户对产品结构的清晰认知。根据席克定律,下次信息查看时,面临众多的选择,任务效率是变低了的。另外,对于需要信息对比的场景,新开页面可以满足多种同类数据的对比需求。那么如果像腾讯云或者阿里云这样,新开 tabs,直接跳到子网模块的页面,这会暗示用户,这个功能信息点不属于私有网络,进而会强化子网模块的定位,也会凸显私有网络的主要流程。3. 关于用户习惯① 对于国内浏览器的用户国内的用户对百度等搜索浏览器并不陌生,并且长时间的使用已经对页面的跳转有了一定的预期和习惯。通过友好链接跳转到相应的页面,点击 tabs 回到搜索界面。同样借助浏览器为载体的产品面对同一个用户群体,其实不需要太多的再教育。另外,如果要处理或浏览的信息量很少,弹窗或者抽屉就可以即时获取,这时候就不需要跳转查看。② 公司内部的用户当然,具体的产品还需要考虑聚焦的用户人群,调研观察当前产品的用户习惯是怎么样的。如果是与其他平台或设计方向是有差异的,就要谨慎使用跳转方式变更,总结当前的用户习惯,通过引导或者多次迭代,统一使用正确的跳转方式。二、应用场景什么场景适合1. 平台 A 跳转到平台 B平台 A 中的一个流程中有平台 B 的信息,如果想点击查看具体信息,需要新开 Tabs 网页。2. 同一个平台内,当前模块流程下查看/编辑其他模块的内容,需要跳转新开 Tabs。跳转新开页面,如果信息的承载方式本身就是页面,那么跳转之后查看直接展示原来的页面就可以。如果是弹窗或者抽屉,有三种展示方式:当前页面打开弹窗或者抽屉新 tabs 回到原来的界面,打开弹窗或抽屉在 coding 的页面中,如果在一个抽屉中打开另外一个子工作项,回到原来页面后,详情信息还是以抽屉展示。3. 新 tabs 打开具体信息,不过原来的弹窗或者抽屉信息被铺在了页面中。当前抽屉中打开另外一个模块的抽屉信息时,新开页面的形式变成了页面,没有了返回等信息,页面中的信息平铺,引导用户看完信息之后,关闭当前页面。另外,这种展示方式还与权限有关系,方便信息在不同角色之间流转。三、特殊场景当然,上述的结论并不是市面所有产品的一致方式,通过体验还发现了以下不同的方式,以当前页面所处的场景为维度解释。1. 信息为当前模块流程的一部分在产品层面该功能信息是属于当面模块定位的,不适合再打开 tabs。2. 工作台/概览类的信息这关于工作台和概览类功能的定位问题,大部分的产品都将工作台定位成任务状态的中转站,用来做跳转分发使用,因此从工作台点击跳转到具体的任务模块,可以直接在当前页面跳到具体的任务页面。不过对于一些大的平台,还是建议新开页面,这样方便二次浏览待办信息。3. 其他① 当前在一级页面,如果跳转到其他模块可以选在当前页面直接刷新,不需要新开 Tabs。如果产品的基本定位是其他模块的内容都需要新开 Tabs 网页,最好保持统一。② 动态增减页签导航一些产品的结构设计是导航栏常驻,所有的页面都是以动态增减页签的形式展示,那么只要是本平台内的信息都是不需要新开 Tabs 网页的。不过使用这种方式设计者需要定义的是动态增减页签的使用逻辑。③ 导航模块常驻在一些产品中,导航模块是常驻的,在一个模块下的任务流程中,通过点击友好链接跳转到目标页面,导航随之变化,对用户也会存在一定的暗示:模块与模块之间是有不同功能定位的。但是用户当前用户的任务流程并没有结束,点击了友好链接,相当于丢失了主流程,要是返回还需要不断的点击,如果是个新建流程会更糟糕,所以这种方式不是很友好,要谨慎使用。像阿里云这样,左侧导航栏收起的的时候,用户从一个页面到另外一个页面,面包屑从 1-2-3,变成了 4-5,用户对当前页面的位置是无感的。从而会模糊任务路径方向,没办法准确定位当前位置。所以,新开 tabs 网页是很有必要的。当然,层级越深用户能触及的频率就会越小,于是团队的一部分成员就会说既然频率小那么对产品的影响很小,可以忽略的。但是,场景频率小是对所有用户而言,不是说用户群少。对一个产品而言,让用户满意很难,但是一个看似不起眼的跳转,只要让用户用过一次觉得难用、页面层级深,产品的整体印象就会大打折扣,因为用户不会在意这个问题是产品定位的主流程还是低频场景。往往用户能记住的不是产品带给业务的流畅感和增长,因为他们认为这是产品应该做到的,但是一次不好的体验却会历久弥新。页面跳转的总结有一定的局限性,特殊业务场景还需要做特殊处。本篇来源:优设网原文地址:https://www.uisdc.com/business-design-page-jump
项目 目标 用户 春天的风迎来夏天的雨~~~在这个美丽的世界你却被作品集所困扰,我是不允许的。之前讲过怎么制作作品集,但还有很多人不太明白,所以就有这篇了(其实是我自己想写-.-) 上货工作需求很琐碎,如何制作完整吸睛的作品集?前言我们今天讲一下如何整理自己的作品集,好多人呢辛辛苦苦工作一年了,完了之后发现没有什么拿的出手的东西,今天做一点需求,明天做一点需求,做的东西零零散散的,发现没有什么可提取出来的,最后到总结的时候抓头挠腮的。阅读文章 > 一、定义复盘什么是设计复盘?它是一种设计思考方法,它涉及对设计过程中所做出的决定进行反思,以改进设计,它同时可以帮助设计师更好地理解设计过程,从而提高设计质量,设计复盘过程中,我们会评估设计过程中的结果,并从中总结出有价值的经验教训,以供未来参考。而复盘作为作品集中最重要也是最能体现项目价值和设计价值的内容,需要我们先知道为什么需要复,相信大家都看过平台上格式个样的作品集,无非就两类,一类是只做页面展示没有任何逻辑,另一类是每个项目都会放一些方法论设计背景之类的,这两者的目的不一样;前者更像是对自己作品的一个归类整理,然后用户可视化的方式来展现出自己的工作量,而后者则是通过一些设计过程和方法来验证设计价值和产品价值,准确来讲后者才是所谓的设计复盘,而前者是设计整理;如果此时你觉得这是复盘那就大错特错,这就是你在脑子里 yy,想了那么多下一局你该怎么打还是怎么打,复盘一定是有收获提升的,你应该看视频观察你以及你每个队友掉点的原因,打团失败的原因,是因为意见不统一还是因为某个队友没跟上,或者自己冲动了,都需要你去记录下来,主观因素、客观因素、其他因素等等。那么正在做《面试作品集》的你知道什么什么是适合你的项目复盘了么二、什么时候复盘这条主要给不想做作品集或做作品集欲望不强的设计师看!!!复盘项目的最佳时期当然是项目上线后的一周或者一个月,因为这个时期你对设计过程设计流程都是比较清楚的,中间踩过什么坑也都比较清晰,并且项目此时的数据结果也基本反馈过来了,所以这是最佳的复盘时期,如果等你找工作的时候在对单个项目复盘,那无非就是临阵磨枪,效果也不太好。三、游戏化角度让你更快的学会复盘怎么对项目复盘?这就好比你问我怎么赢一局王者一样,那肯定是把水晶打爆啊,你全局的目标都是想尽一切办法去推对面水晶,那对待项目同理,首先你要有个目标,例如你的目标是提升某个区域的点击,对某个页面进行改版优化提升用户体验,先将即将要复盘的项目目标明确下来,其次是你为了这个目标过程中做了哪些事情。1. 为什么要推水晶(目的背景)在打王者之前你是不是得搞清楚去一局的目标,有的人说了,我是为了娱乐开心,但我相信大部分人都是为了赢这一局游戏吧,这就是你玩游戏的目的,无论是为了娱乐还是为了上分,这都是你做这件事的背景;2. 你的对手是谁(目标用户)在开局时是不是得搞清楚对面是什么人,是国服?还是省级?或者是某个战队的选手,搞清楚这些你才能说进游戏里怎么针对他产生一系列的策略;同样在项目复盘过程中,你这个项目需求为谁做的,这里一定要写清楚,否则在面试的时候,吧啦吧啦讲半天,面试官都不知道你的群体是谁,那讲那么多基本没什么可信度,甚至还会被怀疑能力有问题;3. 推水晶是为了赢(核心目标)上面讲了推水晶是为了赢,那么我们赢的目的呢,像职业战队赢的目的是为了有更多的奖励,对于个人而言赢的话能获得更多的荣誉,但对于大多人我相信还是为了满足自己在好友列表的一些虚荣心,这些都是玩一把游戏的宏观目标;那么对应项目中你的核心目标是什么呢,上面讲的是项目级的目标,而身为设计师就需要有设计目标,通过设计目标去赋能项目目标,在日常项目复盘的时候估计很少人会写设计目标,但是在面试作品中的复盘中是需要写设计目标,它在复盘的过程中是可以衡量我们的设计手段是否帮助了业务产生价值,同时能体现设计师的主观思考能力;例如我们做一个话题签到打卡的活动,业务目标是提升用户发布率,那么对应设计目标我们拆解下来就是提升用户点击,所有设计方案都围绕如果让用户进行点击,从而进行发布;4. 对手实力怎么样(目前数据如何)我们开局打一场比赛是不是需要搞清楚对手实力怎么样,最起码得知道对面是什么段位,星耀还是王者或者荣耀,这样你才能在对局中更加关注对位情况。而在做需求的时候,数据同样使我们参考的标准,如果不知道当下数据怎么样我们就是无头苍蝇,体验升级的一些项目同样需要参考标准,比如达到什么的体验算是合格,用户无差评、用户使用无阻碍等等,都是参考标准;举个例子,当下话题签到打卡发布率为总数的 20%,此次需求需要提升至 50%,看,这样是不是很清晰,那假如我不知道发布率是多少,我说我要提升 50%,是不是觉得信口开河,反正我觉得面试官看了肯定这样想;5. 对方每个人擅长用什么、对线风格(用户画像)上面说了我们开局需要了解对手是谁,那么这一趴的我们就需要了解对手擅长什么,比如你打一场比赛,是不是需要搞清楚对面每个人的英雄池,然后相对应的给出 ban 位,这样就能针对性的解决问题;做项目过程中我相信大多人都是知道自己的用户行为、用户爱好、用户操作习惯等等这些数据,那么在面试作品集中就需要我们放进去这些信息,设计师本身知道可不行,让别人也知道你用户信息,这样在问你问题时会有依据的去问,而不是问一些毫无逻辑的问题;6. 对面每个人的 KDA 是多少(用研文档)知道对面的英雄池了,下一步需要了解什么?对面每个人 KDA 呗,每个人的团战能力、输出能力、抗压能力、经济能力等等,这些数据知道后,进入游戏是不是就可以针对他的弱项或者强项采取一定的措施;映射到项目中是不是特别想一个用研文档,每个用户每天干啥,使用产品时长,使用产品做什么,抱有什么心态使用产品等等,当然这一趴不是必要性内容,如果大家工作中有较大的项目且是自己主导输出的用研文档可以放进去,如果大家工作中没有做过这些内容,那就不用刻意去写,这样会给你讲作品集增加难度;四、支线任务怎么推的塔(过程策略)在一局游戏中,你通过什么策略方法把对面塔推了,偷塔?团战赢了推塔?还是带线牵制推塔...在设计这个需求的时候你通过什么方法来助力完成目标的,使用格式塔原则?Fogg 模型?还是其他方法呢;1. 入侵野区干扰对面节奏(使用了竞品分析)例如开局的时候我通过入侵对面蓝区干扰对面打野节奏,从而给队友一个良好的发育空间,为后续的团战推塔做铺垫;假设做一个话题签到的需求目标还是发布率,那我在过程中使用 fogg 模型来帮助我进行设计,用户发布的动机是什么呢?用户有了动机后产生了什么样的行为?用户通过话题打卡来寻找相同的人,以此寻找情绪的共鸣,因此在行为过程中我预判用户操作,把相关话题推荐和入口设计的更加引人注意;这就是最简单通过视觉的方式来助力业务,当然还可能通过交互方式,例如优化操作路径这些,都是为了目标所使用的方法。2. 入侵野区效果大不大(策略验证情况)前面既然针对对手采取了一系列的策略反野、带线、团战绕后,那是不是得证明下这个策略对不对呢,团战后经济怎么样,反野有没有成功,带线有没有成功牵制对面;回到需求中,前期使用各种方案来为业务赋能,只要有过程那肯定有结果,我记得我经常被上下游问的就是,你怎么证明你这个体验好,同样各位设计师项目复盘中一定要有结果来证明你的设计策略是正确的,继续举例我可以通过可用性测试来证明,用户在发布话题时是否有卡点,对入口的点击上是否有过多的思考困惑,当然还有很多验证方法,例如上线后的数据,上线前问卷调查都可以;无论是游戏还是项目都需要对自己产生一种自知之明的习惯,不要活在自己的世界,面试过程中讲了一大堆过程最后结果讲不出来;3. 通过提前绕后成功赢得团战(设计方案)通过你的指挥和策略成功赢得了团战,那是不是需要炫耀一下,那需求中前期设计策略以及各种分析都用上了,是不是需要把设计结果展示一下,这时候就需要开始铺设计相关的页面了,当然每个页面也需要写一些说明关联上;4. 谁的战绩最好(上线后数据)一局游戏结束了,这时候大家也从头到位都看完这场比赛,那么到底谁的贡献最大,谁的输出最高,谁的抗伤最高呢,都需要一一列出来;在复盘中对应的就是需求上线后的数据情况,高了还是低了,这也是决定设计价值的关键因素,在面试场景中也是设计方案的兜底结果,为什么是兜底呢,因为数据只有你知道,别人不知道你的数据是真是假,所以这块写上就行,复盘中有这个东西,但对内需要真实;5. 赢了之后粉丝反馈(用户相关反馈)游戏赢了之后是不是需要看看粉丝的反馈,团队里谁的口碑上去了,谁的口碑下来了,又或者谁收获了一波真爱粉等等;在需求上线后我们不仅要关注数据,还要关注用户的反馈,这关乎着产品的体验,设计师不仅要看对业务的赋能同样需要对用户体验的衡量及关注;欢迎关注作者微信公众号:「防脱发药水」本篇来源:优设网原文地址:https://www.uisdc.com/interview-work-recovery
用户 产品 权重 本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。本篇文章从表达、行为、心理 3 个层面,解释产品如何自上而下的影响用户易用性感受,希望对大家有帮助。更多作者干货:初学者来收!交互设计中常见的7个误区学习任何东西,最好都能重头开始,本文阅读时长大约 5 分钟。阅读文章 > 一、写在前面提到易用性设计,很多人第一反应是互联网软件的设计,实际上,这只会限制了设计的边界。说到易用性设计,在互联网行业还没崛起之前,宝洁公司一直是行业的标杆。举一款肥皂设计的例子,帮助大家更好的理解可用性和易用性。可用性(Availability):这款肥皂能不能有效的清洗污渍,能不能有效的消杀细菌易用性(Usability):这款肥皂握住的时候舒不舒服,沾水之后防滑程度怎么样,能不能让它闻起来更舒适...映射到软件上来看,可用性指的是产品解决问题的能力,它关注的是系统是否能帮助用户解决问题。易用性则是指产品被多数用户使用时是否流畅、舒适。二、如何提高产品易用性和产品体验设计不同的是,体验设计是按照战略-范围-结构-框架-表现 5 个层面从下而上去进行的。而用户感受恰恰相反,它是一种自上而下的过程。用户在接触产品的时候,产品表象是最初的感受,当用户和产品有了互动之后,用户产生了行为层面的感受,最后用户会结合自己的过往认知、使用经验等产生对产品的综合感受,即心理感受。了解了用户感受的基本逻辑后,我们可以针对不同的层次,使用一些设计原则和技巧去提高用户的易用性感受。总的来说,这 3 个层面在易用性上的侧重点不同。表达层关注传达准确性,行为层关注使用效率,心理层关注心智构建。下文中会具体展开...1. 表达层表达层关注的是传达准确性。大到产品风格,小到文本大小,产品总希望通过一定的设计手段将信息传达给用户,而所有传达的信息无外乎准确一词。对于用户来说,你传达的是用户想要的,带给用户的易用性感受就越强。具体可分为以下 5 点:看起来可访问、减少认知负荷、区分视觉权重、贴合用户环境、表达一致性。① 看起来可访问目前对于可访问性的定义多数指的是针对残障用户的设计,不过我所指的可访问性是用户看到产品时的第一直观感受--看起来可访问。说通俗点,就是“看起来能不能用”,虽然“用”和“看”并没无本质上的联系。好看的产品并不等于易用性高的产品,但视觉并不是和易用性毫无关系。人们在使用产品之前,会迅速确定自己是否喜欢某个事物的外观。美观会立刻为产品赢下下载量与信任感,并且增加设计的说服力。如果你的网站或产品看起来还是 5-10 年前的设计风格,可能用户还未尝试之前,就选择了放弃体验。虽然产品的美观程度无法提高它的易用性,但能让用户感觉它更好用,所以“看起来可访问”在表达上很重要。举例子:以下图淘宝网页为例,右图中设计风格老旧的电商网页,视觉上给人老气陈旧的印象,并不能快速的与消费者建立信任,我们可能还未浏览就已经放弃体验。相反,左图中的设计会给人更舒适的视觉感受。② 减少认知负荷认知负荷指的是用户完成任意一件事情时,大脑所执行处理的总量。理论上来说,一个人面临的选择越多,做出决定所花费的时间就越长,所带来的认知负荷就越大。减少认知负荷的方法有很多,《简约至上》一书提出,让交互简单易用的 4 种策略:删除、分层、隐藏、转移。删除:删除指的根据交互流程的每个节点,合理删除不必要的内容。分层:对内容按照一定的规律组织,该分组分组,该合并合并,把信息分成块和单元来处理复杂问题,提高用户认知效率。隐藏:对内容进行高频和低频的拆分,强化高频内容,对低频内容进行合适的隐藏。转移:对复杂任务进行巧妙转移,拆成好几步来完成,让每一步都容易理解。举例子:小宇宙 App 新户信息收集页,把 4 个问题分为了 4 个步骤,减少认知负荷,确保每一步都容易操作。③ 区分视觉权重视觉权重是衡量事物吸引观众眼球的一个方法,在用户不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,能够提升用户做决定的效率。一般来说,用户对权重的视觉规律呈以下特点。尺寸越大,权重越大形状越规则,权重越大垂直对象比水平对象权重大立体对象比扁平对象权重大色彩越饱和,权重越大对比度越高,权重越大有纹路比没纹理权重大阴影越大,权重越大动态元素比静态元素权重大举例子:饿了么 App 首页金刚区通过大小、立体上的对比来区分视觉权重,传达功能模块的重要性。而盒马 App 首页金刚区则是通过大小、实物和矢量的对比区分视觉权重。④ 贴合用户环境不同的用户和场景会影响表达的准确性。如果你的受众是上了年纪或者有视觉障碍的人,你可以考虑采用大号字体来提升可读性。如果你的受众是红绿色盲的特殊人群,最好不要使用红绿色来做“正确”和“错误”提示的颜色。文案表达上也是如此,避免使用生僻或专业的术语。举例子:京东 App 贴合了不同用户的购物场景,设计了 3 种不同的展示模式-标准模式;极简模式;老年模式。标准模式下功能全面、信息丰富。极简模式下布局简单、购物便捷。老年模式下字大清晰、操作简单。⑤ 表达一致性一致性是产品设计最为基础且重要的原则之一,表达一致性指的是在一个复杂功能集合的产品中,结构布局、图标设计、颜色应用等需要保持一致。一致性会使人产生预期,当用户预计到某物的表达方式,并且产品是按照预计的表达去呈现时,产品对于用户来说就越易用。举例子:潮汐 App 详情页的表达元素中,图片风格、框架结构、颜色配比、文字样式均保持一致性,带给用户相同的表达感受。2. 行为层行为层聚焦效率,效率的提升可以带来直观的易用性感受。用户完成任务花费的时间越短,带来的易用性感受就越强。具体可分为以下 6 点:选择代替输入、降低沉没成本、减少重复过程、防止用户犯错、行为一致性、智能化引导。① 选择代替输入输入的行为成本很高,特别是在复杂表单的录入中。行为成本高意味着用户完成一件事情需要付出更多的代价。你可以想象,10 道选择题和 10 道填空题同样放到你面前,你肯定会优先选择 10 道选择题进行录入。选择代替输入的直接结果是提高录入效率,所以在表单的设计中,对于可以选择的输入项,尽量避免用户输入。举例子:喜马拉雅 App 在修改个人信息时,提供“一键同步微信”的选项,可以快捷带入微信的头像昵称。智行 App 个人信息页可以直接选择性别标签。② 降低沉没成本人们在进行某些行为决策时,不仅看这件事对自己有没有好处,也看过去是不是已经在这件事情上有过投入。设计朋友们一定对“Control+S”印象深刻,在 PS 里辛辛苦苦画了一天的图,因为异常关闭导致文件丢失,这可能是 PS 带给用户最崩溃的事情。现在 ps 已经支持恢复异常关闭的文件,降低了可能发生的沉没成本,大大的提高了产品的易用性。举例子:哈啰 App 在进行车主认证的时,会将已上传的信息保留 14 天,用户可先提交部分信息,降低沉没成本。③ 减少重复过程重复的行为是无效的,所有的用户都不希望每次使用微信都要重新登录一次。一般来讲,用户初次使用产品时,所需要填写的信息是最多的,当用户已经有了一定的行为时,设计者可以根据用户已有的行为数据,减少重复过程来提高产品的易用性。常见方法有以下几点:保存用户输入信息,下一次自动补全。把最常用的设为默认值或模板,这样大多数人都无需更改设置。为用户提供“一键 XX” ”再次 XX"的快捷操作。举例子:货拉拉 App 在发货输入的时候保存上次输入的地址标签,点击地址标签自动带入,大大减少了用户每次需要输入的成本。12306 在登录时会记录已有的账号信息,选择对应号码可以快捷登录。④ 防止用户犯错防错不同与容错,防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,通过优化设计可以把失误降到最低。即解决用户错误的最好方法就是防止用户犯错。在交互设计中,经常通过自检提示、视觉暗示、二次确认等方法防止用户可能出现的错误。举例子:支付宝在登录时输入框无内容或输入内容不完全时,注册按钮处于禁用的置灰状态,通过视觉暗示防止用户犯错,在返回时,弹出弹窗,通过二次确认的方法防止用户犯错。⑤ 行为一致性大脑是一台识别模式的机器,它能把曾经做过的事情做得更好。在产品内有很多交互操作的逻辑本质是相同的,不用为这些相同的交互操作设计多种逻辑或方案。和表达一致性一样,当用户对某种行为有了一定预期后,就会期望产品按照预期的方式执行,一致的交互行为便可以提高用户的易用感受。举例子:字节旗下的汽水音乐 App,切换歌曲的交互区别了传统的音乐软件,采用和抖音相同的交互模式,通过上滑完成切换,确保了行为的一致性。⑥ 基于行为的智能化引导这是一种基于算法的易用性提升,在大数据、人工智能等技术支持下,产品具备的主动满足人各种需求的属性。当用户对某个功能/内容做出一定的行为时,系统会根据用户的行为做出一些引导。合适的引导不仅仅能够提高产品的易用性,还能够帮助产品取得更多转化。举例子:咸鱼 App 猜你喜欢模块,根据历史行为推荐相关的商品内容。小宇宙 App 根据用户的收听内容,推送相同爱好的听众也喜欢听的其他播客。3. 心理层心理层关注的是心智的构建。所有以人的感受为终端的本质上都是心理学,心理层次相对内容和行为层较为抽象,对易用性的提升并不会很直接,但了解一些易用性心理,能够帮助我们更好的进行设计决策。① 贴近心智模型心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验,或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。简单说,用户在使用产品之前会根据过往的经验对产品有一定的预期,我们做出的产品越符合用户的预期,用户就会感到越简单、越易用。《Adout face 4:交互设计精髓》一书中提出实现模型、心理模型、呈现模型的概念,可以很好的解释用户在试图使用数字产品时到底发生了什么。其中,实现模型映射技术,心理模型映射用户的愿景,呈现模型代表软件的运行机制。如果把实现模型比作一个不规则的形状,心理模型比作一个圆。那么呈现模型越趋于这个圆,用户的易用性感受就越高,反之则越低。若想设计出贴合用户心智的产品,常规的设计思路是要求设计者具备研究者的能力。在进行设计工作之前,进行大量的研究,包括用户的行为习惯及使用场景,同过 Persona 和 Scenario 确定的大部分用户场景。并系统化的把研究转化为设计方案。举例子:windows 系统关闭网页的操作大多在右上角,mac 系统的关闭是在左上角,这是两种不同的实现模型。如果我们经常使用 windows 系统,养成了右上角关闭的心理模型,那么切换为 mac 电脑使用时,mac 的实现模型会和我们的心理模型有较大偏差,呈现模型就会较差,从而导致用户会习惯性的犯错。② 创造认知规律人在识别物体时会寻找规律,发现规律有助于快速处理接收的感官信息,快速建立用户心智。即使本无规律,人眼和大脑也会尝试创造规律。也就是说,规律性越强的产品,对于用户来说就越易用性就越强。简单来说,设计师设计产品时,需要有一定的规律来引导用户,这样可以帮助用户更有效率更舒适地使用产品,另一个角度,产品设计应该有一定的控制度和局限性,不能让用户完全天马行空地操作。如果产品设计没有一定的规律,用户就会自己创造规律,那时产生的用户操作就会是设计师无法预知无法掌控的了。相反,当用户的大脑处理了某些规律时,与规律相悖的事物就会引起用户的警觉。比如一个静态页面中出现某个动态的消息,一排灰色文字中出现某个带颜色的文字等等。举例子:传统的认知规律中,红色的灯光具有警示性,产品设计中利用了这一认知规律,使用小红点暗示新消息的提示。用户在感官中接受到小红点的信息后,会本能的认为有新消息的提示。三、总结易用性感受是因人而异的,随着互联网行业的发展,人们对易用性的标准也在提高。身为设计师,我们要不断洞察用户的需求,在设计执行时,综合利用以上策略,带给用户更优质的易用性感受。以上就是对提高产品易用性的分享,感谢大家耐心阅读,笔芯~本篇来源:优设网原文地址:https://www.uisdc.com/improve-product-ease-of-use
工具 设计师 图像 大家好,这里是和你们聊设计的花生~最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿势相同但内容不同的图像。这些功能让用户可以主动控制 AI 的绘画细节,甚至解决 AI 不会画手的问题。ControlNet 的边缘检测功能,图片来源: https://github.com/lllyasviel/ControlNetControlNet 的人体姿势骨架提取功能,图片来源: https://twitter.com/dannypostmaa/status推特网友@Toyxyz3 通过分别渲染手部网格深度和开放姿势骨骼的方式,实现对人物手指和姿势的精准控制。图片来源: https://twitter.com/toyxyz3/status不过当别人都在尝试用 ControlNet 生成各种好看的二次元小姐姐时,Reddit 有位网友却选择利用 ControlNet 可以精准控制图像边缘的特性,生成了包含正确清晰文字的 AI 图像,并赋予不同的材质特效,效果相当不错。在此之前想利用 AI 生成稳定正确的文字内容几乎是不可能的,现在不仅能生成了,还能结合提示词生成各种特效材质,那以后设计师做字效是不是都可以不用 PS 或者 3D 软件了?利用 ControlNet 生成不同的艺术字效,图片来源: https://www.reddit.com/r/StableDiffusion/comments回顾一年前的 AI 绘画:人工智能快速出图!盘点 4 款人气超高的 AI 绘画神器大家好,我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到,国内已经出现了能直接使用中文提示词生成 AI 图像的工具了,这就进一步降低了我们进入 AI 绘画世界的门槛,对设计师和创意工作者来说无疑是好消息。阅读文章 > 从人工智能绘画工具 Disco Diffusion 发布到现在,AI 文本生成图像生成技术进入大众视野的时间正好一年。当初惊艳众人的工具并没有如烟花般转瞬即逝,而是各自有了更深入的发展方向,并在逐步构建基于 AIGC 的新生态体系。比如图像生成模型 Stable Diffusion,由于是开源的,在各路大神的加持下发展一片欣欣向荣,大火的二次元画风模型 NovalAI,生成效果媲美真人 Coser 的训练模型 Lora,还有前面提到的可以提取人体姿势骨架的模型 ControlNet 都是基于或围绕 Stable Diffusion 开发的。另一个 AI 图像生成工具 Midjourney 则凭借技术迭代和成熟的社区运营成功实现商业化。它图像生成质量极高,吸引了绘画、设计、影视、游戏等各行业人员成为付费会员,Midjourney 也开始成为这些行业工作流的一部分。Midjourney 生成的各类图像,图片内容来源: Midjourney 官方社区腾讯平面设计实战!如何用AIGC提高200%的做图效率?一、AI 绘图背景与趋势随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。阅读文章 > AI 图像生成技术对绘画带来的影响大家都有目共睹,而它对设计行业带来的影响和改变也不小。由于 AI 生成的图像质量越来越高,出图速度也快,不少外国设计师们都纷纷利用 Stable Diffusion、Midjourney、Dalle 2 等工具辅助自己进行设计,或快速提供海量的灵感参考。YouTube 设计博主 @Codex Community 利用 Midjourney 生成的鞋类网页设计灵感,图片内容来源:How to use AI Art and ChatGPT to Create a Insane Web Designs - YouTubeYouTube 设计博主 @Piximperfect 利用 AI 图像生成工具 Dall·E 结合 PS 完成对人物的无痕扣除,图片内容来源: https://www.youtube.com/watch?v=rtI1MZSdK1A&t=314sDALL·E 和 ChatGPT 同属 Open AI 公司,戳下面的链接查看对 DALL·E 介绍:10秒出图,以假乱真!设计师「用嘴修图」的愿望要成真了?大家好,我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion,它可以根据文本提示自动生成恢弘奇幻的艺术,非常适合作为艺术创作的灵感来源。阅读文章 > 而在国内,也有专业的设计团队开始利用 AI 图像生成工具。腾讯官方设计团队 ISUX 在前几天发表了一遍文章,讲述他们如何利用 Midjourney 生成图像时间短、批量大、风格多的特点,优化日常运营设计流程。设计服务平台稿定也推出了一个 AI 工具“稿定 AI”,用户可以根据参考图+描述词生成一张完整精美的插图,为生成平面设计素材提供了新思路。ISUX 的部分设计流程,图片内容来源: https://www.uisdc.com/aigc-design“稿定 AI”展示的部分 AI 生成效果图腾讯平面设计实战!如何用AIGC提高200%的做图效率?一、AI 绘图背景与趋势随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。阅读文章 > 一方面是设计师主动利用 AI 图像生成工具优化自己的工作流程,另一方面也有越来越多针对设计工作开发的 AI 工具,涉及图像处理、UI、网页、PPT、包装等多个方面。一、AI 图像处理工具 ClipdropClipdrop 官网直达: https://clipdrop.co/同类型产品 Magic Studio: https://magicstudio.com/比如之提到过很多次的 Clipdrop,它是国外一家专注 AI 图像处理程序插件的公司,目前已经开发出智能修图、一键去除/替换图片背景、对照片立体打光、文本去除器等多个 AI 程序,有在线版和手机应用,还可以接入 PS、Figma 等设计软件。这种借助了 AI 技术的图像处理工具,让传统的修图改图等设计工作变得高效轻松,而且开发类似工具的公司远不止 Clipdrop 一家 ,很多公司都在探索 AI 技术在图片处理上的各种新用途。ClipDrop 开发的设计神器:扣头发丝不留痕!最新免费抠图神器 ClipDrop Remove Background 来啦~大家好,我是和你们聊设计的花生~随着人工智能技术的发展,运用算法自动进行图片处理的工具越来越多,极大地提升了设计师的工作效率。阅读文章 > 照片没有氛围感?快来试试这款打光修图的神器「Relight」大家好这里是和你们聊设计的花生~在人像摄影中,灯光设置是非常重要重要的一环,好的打光能丰富画面层次,提升整体情绪氛围。阅读文章 > 二、AI 图库 GhostlyStock网站直达: https://www.ghostlystock.comGhostlyStock 是一个类似 Unsplash 的免费图库,包含照片和插画 2 种类型的图片。它的特别之处在站内图片都是由 AI 生成的,如果你没有找到自己想要的图片,可以自己输入描述词生成一张新的图像。虽然图片的质量参差不齐,但对找图片素材来说是一个很新奇的体验,也可能是未来免费图库发展的一个新方向。GhostlyStock 主界面三、AI 驱动的 UI 设计工具Galileo AI 官方直达: https://www.usegalileo.ai/同类从产品 Uizard Designer: https://uizard.io/autodesigner/既然 AI 能根据文本生成各种精美的图像,那能不能进一步生成更具体的设计类素材?答案是能。Galileo 就是一款根据文本描述生成 UI 界面的软件,据官方介绍其模型由数千款优秀 UI 设计作品训练得来,可以根据文本生成高保真、可编辑的用户界面,为 UI 提供优质的灵感,并减少重复的调整工作。另一款同类产品 Uizard Designer 也是专注于 UI/UX 设计,用户能通过文本描述生成多屏幕设计原型,并可以邀请团队成员一起实时共同设计。Galileo 官方演示视频Uizard Designer 官方演示视频四、AI 驱动的 PPT 生成工具Tome 官网直达: https://beta.tome.app/Tome 的官方定位并不是 PPT 内容生成工具,而是 “Generative storytelling(生成性的故事讲述 )”,但它生成内容的形式和 PPT 并没有什么差别,于是理所当然的被大家认做是一种 AI 生成 PPT 的工具。用户输入一段对主题的描述文本,点击生成,Tome 就能自动生成主标题和多个子标题,并为子标题生成对应文本内容和配图,最终得到一个内容充实、形式完整的 PPT 形式的文件。虽然每张页面都是左文右图,但是自动生成的标题和主题的内容是契合的,内容逻辑通畅,可以免去用户自己查资料列大纲的步骤。另外它还支持根据内容生成 3D 模型和动图,自动配置响应式页面,以及任意嵌入来自互联网的内容。Tome 官方演示视频五、AI 辅助 Figma 设计Diagram 官网直达: https://diagram.com/Figma 已经是一个非常便捷的在线 UI 设计工具了,但并不妨碍有人用 AI 把它变得更加好用。Diagram 是一个专注研发 UI 设计工具的小团队, 目前开发了多款 AI 驱动的小插件,包括一键让 Figma 任务自动化的 Automator,根据文本生成图标/图像的 Magician,以及使用代码进行设计的 Prototype r 等,搭载上 Figma 后可以帮助 UI 设计师更好的完成任务。化神器 Automator 的官方演示视频六、AI 辅助包装设计PLUG AI 官网直达: https://hp.package-ai.jp/日本公司 PLUG AI 在去年 10 月份推出了一个名为 「Package Design AI」评选分析系统,用户先上传包装所需的设计元素,AI 会在 1 小时内自动生成的 1000 组包装设计方案,然后展示排名前 100 的方案。系统还可以对生成结果进行分析评估,预测针对不同年龄、职业、性别的消费者,哪些包装会更受喜爱。官方称这套 AI 分析系统能缩短包装设计周期,节省设计成本,并准确预测设计出的包装能否获得好的效果。据了解日本零食品牌 Calbee(卡乐比)就接受了这款 AI 系统的分析建议,为旗下一款产品设计了新包装,然后销售业绩比起旧包装增长了 135% 。图片内容来源:PLUG AI 官网看过了设计师们利用 AI 优化自己的工作流程,也了解了不少专门为设计研发的 AI 工具,我的感觉是 AI 真的能提高设计效率,帮助设计师更好地完成设计工作,而不是所谓的“取代设计师”。不过现在看到的 AI 设计工具大部分都是国外的,使用起来有一定门槛,希望未来有更多好用的国产 AI 设计工具出现。对于 AI 和设计师的关系,不知道大家有什么感想呢?欢迎在评论区分享。喜欢本期推荐的话请大家多多点赞收藏进行支持,之后会为大家推荐设计干货知识 ~参考资料:https://mp.weixin.qq.com/s/dafCLibRZh4M3E7w4PVlnQhttps://mp.weixin.qq.com/s/HiRGY1U-NwKF8jNVL-qQOAhttps://weibo.com/1948301550/MuD2t8MNohttps://weibo.com/1757693565/MqxjAaAQD推荐阅读:Text to Skybox ! 一键生成360无缝环境贴图的AI神器大家好,这里是和你们聊设计的花生~之前向大家介绍过不少 AI 绘画工具,比如 Dall·E 2、Midjourney、Stable diffusion 等,它们都是大型的 Text-Image 模型。阅读文章 > 腾讯平面设计实战!如何用AIGC提高200%的做图效率?一、AI 绘图背景与趋势随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/ai-tools
关系 用户 信息 做设计的过程就是处理设计关系的过程。而无论交互设计还是视觉设计,在设计过程中需要反复考虑的是这 7 种设计关系:生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词,是因为设计这件事从来都不是孤立的。这个道理虽然很容易明白,但是在我们大部分常规设计工作中,接到的设计任务往往是经过拆解后的局部。陷入局部,忽略这个局部与其他因素之间的关系,是设计开始变得糟糕的重要原因。说到设计方法,我们现在已经有一些比较成熟的思维框架,比如斯坦福设计学院的 Design Thinking Process、双钻模型、体验地图、用户体验五要素框架等,但有了这些框架之后,在具体的设计问题中,还是没有一种行之有效的方法可以直接的指导、改善不同职级、不同经验的设计师的设计产出。基于这样的现状,我尝试梳理了我的设计方法论,从宏观的设计关系出发,侧重眼于微观的设计层面,希望用一种简单的方式抓住这 7 个词,为设计工作提供一点建议和帮助。往期干货:研究腾讯设计人才白皮书后,总结了这5点职场趋势从去年开始关注腾讯 CDC 每年一度的设计人才调研报告。阅读文章 > 一、生意介质关系为什么设计师容易自嗨?或者容易被别人认为设计师在自嗨,所以不得不连续不断不遗余力的进行自证,自证设计的价值?很多时候是因为没有处理好设计的生意介质关系。设计区别于艺术的一个根本点在于,设计是一种服务,而非自我表达。这种服务并不是说设计师作为乙方需要服务好你的需求方,而是说任何设计都始于明确的目标,并服务于一种生意以及参与到这个生意中的用户。这种服务的第一属性要求我们放下设计师的自嗨,分析生意和用户,分析当下遇到的问题,并在困难中寻找最佳设计方案。所以从这个角度来看,任何一个设计都是困难的。如果你觉得没有困难,那只能说明你想的过于简单,或者没有在从事真正意义上的设计工作。为什么说任何一个设计都是困难的?因为设计关乎用户的的认知、预期与习惯。用户认知的形成取决于用户过去的经验,过去这个用户或者说这类用户在使用类似产品时建立起来的基本认知,带着这个基本认知以及用过过去养成的操作习惯甚至思维习惯,用户看到你的产品界面时,首先会产生一个认知,在这个认知的基础上形成一个对这个界面状态的潜在预期。好的设计能够引导、管理用户的这种认知和预期,进而促使用户产生实际的操作行为。而差的设计往往不能帮助用户直观的建立基础认知,以至于不能产生我们想要的用户预期,甚至产生了完全错误的预期。当用户操作之后发现与自己的预期不相符的时候,体验痛点就产生了。所以说,设计是一种介质。一种连接生意和用户的介质,一种复杂与简单之间的介质,一种边界模糊的、还在不断进化的介质。要做好这种介质,需要设计师具备好的分析能力、逻辑思维与转化能力、想象与创造能力,而这三种能力合起来,可以简单概括为我们常说的洞察力。去洞察自己的洞察力吧。这样才能处理好生意与用户之间的设计关系,让设计成为一种好的介质。二、路径联动关系交互设计设计的是什么?设计的是用户行为。可用户行为是虚的,那实际上设计的是什么呢?设计的是一个个状态以及状态与状态之间的联动关系。这是一种设计关系,视觉设计考虑的点线面之间的关系,不同元素之间的组织关系,交互设计考虑的是不同信息之间的组织关系,不同状态之间的交互联动关系。在这个过程中,需要有好的用户洞察,充分理解用户场景与业务诉求,管理用户预期,及时给予合理的界面反馈。时间是线性的,我们的工作是线性的,用户在你的产品中花费的时间是线性的,所以用户在使用产品的过程中所接触到的一个个界面与交互也是线性的。在这个线条中我们需要考虑到你当前处理的这个点在整个用户路径中的关系,要如何处理才能使用户不在当前这个节点中断任务甚至退出程序。在这个线条中的每一个节点都与它的上一个节点与下一个节点存在路径联动关系。这种路径联动关系在交互设计的工作里常常以流程图的方式输出,容易理解,但同时也容易被忽视,尤其是对专职的视觉设计师而言。所以无论哪种形式的设计工作,对于路径联动关系的处理,都需要充分考虑流程的起点与终点,以及路径的汇合与分支。交互设计的思维不应该局限在交互设计这个工作或者交互设计师这个职位上,视觉设计师的工作同样需要具备交互思维。产品是一个复杂的系统,我们的日常工作是被拆分后的一个个节点。开始一个设计项目之后,只有充分考虑当前这个页面或者这个视觉物料在用户的时间线程里的前后联动关系。多问问自己,用户是从哪里来的,接触到你当前设计的这个界面/元素/物料之后,我们应该如何引导用户走到下一步。这个环节如果考虑的不够全面,就有可能形成断点。三、系统构成关系每一个科技产品都是一个有机的系统,它的迭代与成长呈现着基本的生命体征。每一个生命体的律动都可以表现出自然的美感。生命的发展与进化并不是被人为设计出来的,而现在我们人类希望自己设计和研发的产品能够不断进化,并且经久不衰的活下去。想想这有多难,首先我们要创造一个生命,其次我们还要希望他在短时间内根据达尔文的进化论在自然选择中不断进化,不断的在恶劣的竞争环境中存活、发展。每一个小的设计都从属于一个整体,是这个整体的一部分,并且带有这个整体的特征。我们常说的 DNA 也就是这个意思。每一个设计元素,都应该从属于一个设计语言,不管这个设计语言是显性的还是隐性的。假如说我们不在乎这个系统构成关系,或者说根本没有这个 DNA 的存在。在设计上对于其他竞品的我们认为好的、对数据有帮助的东西直接拿过来会有什么问题吗?如果我们觉得自己的手臂不够强壮,是不是直接可以移植健身教练的手臂到自己身上呢?那结果必定是丑陋的、畸形的。这也就是为什么我们在做设计规范与设计语言,为什么我们吹毛求疵的追求系统一致性。同样的,平面构成是设计基础课程,我们可以学到一些基础的构成一个画面的方式技巧。所以在设计草稿阶段需要从构图考虑,而不是从单个元素的刻画来进行。如果我们在做设计的时候忽略元素与元素之间的构成关系,最后整体的效果可能是不协调的、不自然的、美感缺失的。四、同类并列关系警察有两种,胖警察和瘦警察;讲笑话的表演有两种,相声和脱口秀;电影简单的说也有两种,故事片和纪录片。并列与类比是人们在对事物建立认知时的一个简单可用的方法,分类便于我们迅速理解世界,理解一个系统中不同功能、内容/信息之间的关系。同时,电影的类型化为电影产业带来了更多的观众,产品设计形态的类型化为互联网产品带来了更多的用户,信息的类型化帮助用户获取到了更多的信息。用户的时间碎片化了,大块的内容被切分成了小的信息单元,这样的背景下 Feed/信息流技术(算法匹配)发展起来。同时我们不能不看到这个懒惰的循环:碎片化催生了信息流,信息流让用户的时间更加碎片化。在这样的环境下,各种类型的信息被强行拆分塞进了用户的信息流。这些信息并列在一起,无论是新闻资讯、生活贴士、旅行攻略、还是一条机灵段子,无论是深度长文、番剧解说视频,还是一张吸引眼球的图片,通通都并列在一起,一起争夺用户短暂的注意力。归类的过程是强化共性搁置个性的过程。我们常常面对的困难也是该如何将功能或信息分类。这些信息本来是千差万别的,这种并列关系的处理在设计上的困难也是显而易见的。我们的困难是每当我们进入一个部分的设计时,总会觉得当前处理的这个问题是特殊的,并不那么容易对不必要的个性做出舍弃。五、分级从属关系如果一个团队有 100 个人一起做一件事情,那么怎么进行组织才能有效的完成这件事呢?如果一个系统有 100 个页面,那么这些页面如何能够更有序的组织在一起,才能完成业务目标并满足用户需求呢?如果一个页面有 20 个不同的字段与元素,那么界面中用户要阅读的内容、对下一步操作的引导等应该如何进行有效的组织?分级从属关系的建立可以帮助我们建立易于理解的设计框架。从信息架构的组织、导航的设计到单个页面、单个卡片的设计框架都需要清晰的传递分级从属关系。扁平化管理在互联网公司一度听上去非常洋气,但现在我们仍然无法确定扁平化管理一定优于层级化管理。扁平化的优点和缺点都很明显:他可以降低管理成本,但对公司结构架构能力和组织能力要求较高;他可以分权管理让更多的人参与决策,但这样的决策过程容易混乱;他可以更好的激励人才培养,但同时隐晦的层级关系也无法避免。扁平化设计更加凸显内容本身,避免信息传达上的不必要干扰,强调界面的效率。但值得强调的是,扁平化设计并非直接放弃了信息的层级关系,而是在用更简练的形式来表现层级关系。当扁平化成为一种设计趋势被无脑滥用的时候,扁平化本身的缺点就被无限放大了。在信息架构层面,明确的层级关系要比所谓的流行趋势重要的多。还以微信为例,他为什么要把朋友圈归到二级页面?为什么要在 IM 页单独设置一个聊天详情页而不把操作选项前置?为什么对于单条朋友圈的点赞与评论没有直接外露而收到一个单看上去表意并不明确的两个点的图标里?这看上去一点也不扁平,但似乎并没有影响到微信的易用性。六、归组收纳关系作为交互设计入门书籍的《简约至上》中谈到了删除、组织、隐藏、转移四个设计策略,介绍了非常实用的设计方法。几年前在装修房子的时候接触了一点室内设计的知识,小户型空间的收纳问题、动静分区问题、冰箱洗衣机放在什么位置会让生活更舒适的问题,这些问题的解决方法都与交互设计的设计方法相通。人们对简单的追求在不同的设计领域都非常相似。还有一个有趣的现象:世界是复杂的,人是复杂的,生意是复杂的,而大家在产品设计上的审美取向却是简单的。简单的体验简单的说就是在易懂的基础上易用,轻松,没有不必要的干扰和负荷,而这种简单体验的塑造建立在更有效的归组与收纳的设计关系处理上。卡片式布局、抽屉式菜单、发现页都是对信息和功能的归组收纳。在什么场景什么时机下适合隐藏、删除哪些内容,把哪些内容归位一组是更合适的,这些都需要设计师结合当前场景、结合其他几个设计关系的处理来综合考量。七、Z 轴层级关系设计的过程是处理信息关系的过程。人们有两只眼睛来感受广阔立体的空间,人们对信息的接收也从来都不是平面的。信息本身是立体的,而平面设计与互联网产品设计的媒介是平面的,设计师需要做的是把立体的信息通过平面的媒介完整的传递给用户。压感式触摸屏的技术发展带来了的新的交互手势;我们通过叠加与覆盖等设计方式在平面上制造层次的视觉误差来划分信息层级;我们利用信息与信息之间的大小对比、色彩关系来帮助用户更好的理解信息层级,降低视觉上的噪音与干扰。这都是在处理 Z 轴上的信息层级关系。信息与信息之间的关系是立体的,功能与功能之间的关系也是如此。所以无论扁平化的设计趋势如何,我们该处理的 Z 轴层级关系还是要处理。以上谈到的 7 种设计关系并不是相互独立的,相互之间存在交集,需要我们在设计过程中综合考虑灵活处理才可以形成结实、完整、成熟的设计方案。一篇文章篇幅有限,接下来我会分别对 7 种设计关系展开,并结合实例做进一步的分析与说明。欢迎关注作者微信公众号:「柴林的设计笔记」本篇来源:优设网原文地址:https://www.uisdc.com/design-relationship
设计师 神器 工具 大家好,这里是和你们聊设计的花生~又到了大家喜闻乐见的设计师效率神器推荐时间,本期推荐的 5 个神器分别是:打工人福音!一键让 AI 帮你写工作报告的神器「周报生成器」双语对照翻译!看英语网站必备的浏览器插件 「沉浸式翻译」UI 配色神器!根据文本生成调色板的在线工具 「Palette Tone-row」轻便好用!直接用鼠标调整显示器参数的神器 「ClickmonitorDDC」设计师必看!收录了 200+ AI 设计工具资源的网站 「AI Design Resource」往期回顾:这5款工具,让设计师工作效率提升 200%!(十三)大家好,这里是和你们聊设计的花生~今天为大家带来设计师 效率工具 第 13 期,本期推荐的 5 个神器分别是: 用嘴改图!阅读文章 > 一、周报生成器网址: https://aicodehelper.com/tools/index.html记得之前 ChatGP 爆火的时候,有一位网友做了一个专门的工作周报生成器,结果因为访问人数过多网站崩溃了,无限延期关闭,当时就觉得太可惜了。不过现在又有了一款新的「周报生成器」,也是简单地描述一下你的工作内容,AI 就能帮你生成一份内容详实、形式完整的工作报告,需要写日报周报的小伙伴们不要错过了。此外网站还有很多其他功能,比如生成会议纪要、润色英语文章、做产品经理指导、帮你写正则表达式等等,点击左上角的选项框,在弹出的下拉框里可以切换为不同的功能。二、沉浸式翻译官网: https://immersive-translate.owenyoung.com/「沉浸式翻译」是一款可以同时显示原文与译文的网页翻译工具,开启后会自动识别网页布局和文字段落,进行跟随翻译。它提供谷歌、Deepl,彩云小译,百度翻译、腾讯翻译君等多种服务,支持各类主流网站,包括 Twitter,Reddit,Discord, Gmail, Telegram, Youtube, Hacker News 等。翻译后的双语对照的页面清晰有序,无论是看英语长文还是推特信息流都非常方便,绝对是英语小白的救星。「沉浸式翻译」在 Chrome、Edge、Firefox,Safari 等浏览器上都有插件,也可以下载桌面端、移动端和 iOS 端的应用,具体下载安装方式可以看官方网站里的介绍。三、Palette Tone-row网址直达: https://palette.tone-row.com/「Palette Tone-row」是一款在线调色板生成工具,由外国设计师 Rob Gordon 开发并免费分享给所有人使用。它的特别之处在于支持“Palette-by-Prompt ”,也就是文本生成调色板。点击右上角的“create from prompt”,输入对网站性质和颜色的描述,等待片刻后就有一组完整的配色。调色板支持浅色模式和深色模式,能生成中性色板,用户也可以对颜色进行再调整。四、ClickmonitorDDC软件介绍: https://web.archive.org/web/20201016064411/https://clickmonitorddc.bplaced.net/ (需要魔法)下载链接:GitHub - nubix/ClickmonitorDDC: Rehost of ClickmonitorDDC(需要魔法,附件有安装包)ClickmonitorDDC 是一款轻便好用的显示器调节软件,适用于 Windows 系统。软件虽有只有 615KB,但支持的功能却非常多,包括通过鼠标滚轮来调整显示器背光亮度、色彩对比度、色温、饱和度等,安装后直接在电脑上用鼠标或快捷键就能对显示器进行设置,不用动手去按机器上的按钮,对需要经常调整显示器的设计师来说非常实用。五、AI Design Resource网址直达: https://aidesignresource.com/「AI Design Resource」是一个专门面向产品设计师的 AI 设计资源网站,目前收录了 200 多款与设计有关的 AI 工具和资源,包括 3D、UI、虚拟角色、配色、图像生成、图片处理、PPT、提示词等各方面。内容都是精心挑选的,资源质量很高,并且会持续更新,想了解最新 AI 趋势动向的设计师可以多上这个网站看一看。好啦以上就是第 14 期设计师效率工具推荐,喜欢本期推荐的话请大家多多点赞收藏进行支持,我会更有动力为大家推荐设计干货知识 ~ 有关于本文或者设计的问题可以在评论区提出 ,我会第一时间回复。推荐阅读:AIGC领域新增6大神器!每个都能提高400%的设计效率!大家好,这里是和你们聊设计的花生~最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿阅读文章 > 腾讯平面设计实战!如何用AIGC提高200%的做图效率?一、AI 绘图背景与趋势随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 ClickMonitorDDC_7_2 639KB8866 点此复制 登录下载 本篇来源:优设网原文地址:https://www.uisdc.com/5-practical-software-14
思维 程序员 逻辑 我们在平时的产品实现过程中会经常与产品吵架,与开发撕逼。这是因为我们这些产品实现的参与者因为分工不同都有很强的边界感,这种边界感同样也体现在思维模式上。产品经理看待问题是以产品思维来思考;设计师做设计时也是以设计思维来思考;程序员更多是以代码实现的程序员思维来思考。不同的思考方式,难免会出现不同的理解,同时也会出现描述问题时完全不懂对方在说什么。作为设计师,除了本职工作必须具备的设计思维外,更多的是要求我们需要有产品思维,将产品思维运用到日常的产品设计工作中,却很少见到设计师去了解或掌握开发思维。当然从开发实现角度来做设计俨然不现实,但是否可以运用程序员思维来服务设计呢,个人觉得是可以的。将程序员的思维方式应用到产品的设计实现中,是能够提升产品体验和提高团队协作效率的。更多思维:小心成为设计机器!高级设计师都应该掌握的4种思维方式最近几年,人工智能的快速发展,正在逐渐取代部分低端的设计工作。阅读文章 > 一、什么是程序员思维什么是程序员思维?没有标准答案。马克思·韦伯在《新教伦理与资本主义精神》中提出过一个概念——工具理性。所谓“工具理性”,就是通过实践的途径确认工具(手段)的有用性,从而追求事物的最大功效,为人的某种功利的实现服务。工具理性是通过精确计算功利的方法最有效达到目的的理性,是一种以工具崇拜和技术主义为生存目标的价值观,所以“工具理性”又叫“功效理性”或者说“效率理性”。相似的,编程也是根据客户的需求,利用自己的专业技能将其编译成计算机语言,生产出一个软件产品,来帮助解决现实生活中的问题,从而实现产品的商业价值。因此,可以将程序员思维定义为是在理性思维的框架下,利用相应工具,来解决相应实际问题。二、程序员一般都具备哪些思维1. 底层思维能力:逻辑思维处于不同阶段的程序员所具备的思维能力会有所不同。但作为以逻辑思维缜密自居的程序员们,逻辑思维算得上是他们最底层的一种思维能力。其实任何人都应该具备一定的逻辑思维能力,这样在面对“杠精”的时候,能发现对方的逻辑谬误;在思考问题的时候,能尽量做到逻辑完整;在表达的时候,能尽量做到逻辑清晰。那什么是逻辑,逻辑的起源经历了从自然哲学到形而上学的发展,我们也无需深究其发展过程。借用大师的总结,逻辑是指思维的规律和规则。或者更简单的理解,逻辑就是关系。逻辑思维基本包含三个方面的要素:概念、判断和推理,逻辑思维的要义,就在于正确运用概念、判断、推理的思维形式。概念是思维的基本单位;通过概念对事物是否具有某种属性进行肯定或否定的回答,这就是判断;由一个或几个判断推出另一判断的思维形式,就是推理。实际上阅读一本书的逻辑也是包含这三个要素,如果你看过《如何阅读一本书》,里面提到的分析阅读,说的就是如何通过提炼一本书的关键字词(概念),关键句子(判断),以及关键论述(推理)来分析一本书的主旨。2. 必备思维能力:抽象思维和结构化思维程序员每天面对的工作并不只是简单的敲代码,而是需要对拿到的需求及问题进行分析、归纳、综合、判断、推理。从而抽象出各种概念,挖掘概念和概念之间的关系,对问题进行有序建模,然后通过编程语言实现业务功能。这里面就需要应用到抽象思维和结构化思维。① 抽象思维抽象是有层次性的,抽象层次越高,内涵越小,外延越大,扩展性越好;反之,抽象层次越低,内涵越大,外延越小,扩展性越差,但语义表达能力越强。我们可以根据毕加索的画《公牛图》来理解一下抽象思维:抽象的三个特点:第一,抽象是忽略细节的。抽象类是最抽象的,忽略的细节也最多,就像抽象牛,只是几根线条而已。在代码中,这种抽象可以是 Abstract Class,也可以是 Interface。第二,抽象代表了共同性质。类(Class)代表了一组实例(Instance)的共同性质,抽象类(Abstract Class)代表了一组类的共同性质。对于我们上面的案例来说,这些共同性质就是抽象牛的那几根线条。第三,抽象具有层次性。抽象层次越高,内涵越小,外延越大,也就是说它的涵义越小,泛化能力越强。比如,牛就要比水牛更抽象,因为它可以表达所有的牛,水牛只是牛的一个种类(Class)。② 结构化思维结构化思维,是一种以逻辑(事物内在规律)为基础,从无序到有序,将搜集到的信息、数据、知识等素材按一定的逻辑进行分析、整理,呈现出有序的结构,继而化繁为简的思考过程。其目的是减少复杂度和认知成本。举个简单的例子说明结构化思维,尝试用 10 秒钟记住下面 20 个数字:估计大多数人都很难在限定时间内记住。但换一种方式,同样让你 10 秒钟记住下面的这 20 个数字:是不是 so easy,甚至完全不用 10 秒,扫一眼就可以记住了。事实上,这是两组相同的数字,只是排列方式不同,第一组是无序的,第二组是有序的(有结构),也更有规律。我们之所以能够轻松记忆第二组数字,是因为其有结构、有规律,从而降低了复杂度和记忆负担。面对无序的 20 个数字,我们需要记住 20 个记忆项目,套用设计心理学中的 72法则「米勒定律」,人类短暂记忆无法容纳7个以上的记忆项目,因此我们很难记住这一组数字。用超多案例,帮你认识无处不在的「米勒定律」今天给大家带来一个无处不在的定律,虽然它很常见,但它很安静。阅读文章 > 而正序排列的 20 个数字,我们实际上只要记忆两个项目:一个是有 0 到 9 的 20 个数字,另一个是他们是正序排列的。说到结构化思维,其实运用最多的要属结构化思维的圣经——芭芭拉·明托的《金字塔原理》。至于为什么是金字塔结构,大家可以自行去了解。三、程序员思维与设计思维的不同设计思维,本质上是一种以人为本的问题解决方法。这里所说的设计是广义的设计,是以探索人的需求为出发点,创造出符合其需求的解决方案。与传统解决问题的方法不同的是,设计思维是面向过程的解决方案,而且是一个没有标准答案的探索过程。面对问题我们需要深入理解问题,这是一个发散的思考,从多方面了解问题发生的原因,然后归纳出问题的关键点。解决问题时也需要探索各种解决问题的可能性,具有创造性的给出合理的解决方案,并从中收敛选择最佳解决方案。其实通过“双钻模型”就能很好的理解这一过程。如何用好设计双钻模型?来看 vivo 浏览器的实战案例!前言刚入职时,有本书叫《方寸指尖》对我影响比较大,主要讲述如何做好用户体验设计。阅读文章 > 以人为本:认识到一切问题归根结底都是人的问题,从不同视角出发,对具体的人进行共情,而不是对抽象的事进行处理。信息澄清:以人为中心重新组织和定义问题。在信息澄清通常可以用一句话来描述问题:谁?(用户 User)有什么需要?(需求 Need)我发现了什么?(洞察 Insight),简称 POV 法。让大家对问题形成统一的认识,因为在讨论问题时,不同人理解与表达能力会有区别,造成的误会可以在过程中逐渐排除。可视化:可以表现更多信息间的关系,更易被记忆和传递,让信息共享效率更高。反复迭代:认识到设计过程中的不确定性与灵活性,反复迭代是一种非线性目标向线性流程妥协的变通做法。在实际应用上,我们需要不断的明确收获然后继续推进下去。简单了解设计思维后,我们可以简单总结程序员思维与设计思维的不同之处:程序员思维在解决问题时多为趋于严谨的线性推理,而设计思维则更趋向于创造性,多线并行的发散性思维解决方案。某些共性问题的解决方案上,程序员需要提炼更抽象的特征从而能够做到结构更加清晰;而设计需要从不同视角考虑,对具体问题面向对象进行共情,从而提出不同符合用户心理的解决方案。最表象的不同点就在于,程序员完成需求代码化,优先考虑是否可以代码实现,过程中会有哪些限制条件;设计则更多考虑可用性和可视化,以一种更合理的状态传递相关的信息。设计师不只是基本需求的实现,同时要让用户有一种更优的体验,能够产生心理上的满足感和愉悦感。其实程序员思维和设计思维还是有共通点的,比如结构化思维的应用上,设计师需要以某种逻辑关系形成结构清晰的界面呈现给用户,大大增强页面的可读性和可理解性。同样的满足金字塔原理的代码,其可读性和可理解性也会极大的被增强。代码也是一种表达,很多人以为代码是写给机器执行的,实际上,代码是写给人读的,只是偶尔会被机器执行。四、程序员思维如何应用到设计中?1. 底层逻辑底层逻辑的应用其实是贯穿整个产品生命周期的,不论是需求阶段还是界面设计阶段亦或是开发实现和产品测试,都是基于底层业务逻辑去实现产品的。产品在交互设计上除了要符合业务逻辑,还需要符合开发实现逻辑。比如页面在进行数据交互时,接口的调用是同步还是异步,这也将影响到界面的交互形式。在开始设计前,我们就需要弄明白数据交互接口的调用方式,什么是同步什么是异步?这里我们先举个栗子。比如在正常工作中,我们需要和业务沟通需求。如果在会议室进行面对面沟通,当你抛出对需求的疑问后,需要业务当面给予你解答才算沟通结束。这种就是同步。如果在办公室用邮件的方式沟通,当你发出对需求的疑问后,不需要在邮箱界面等他回复,你可以关闭邮箱窗口去做其他的工作内容,不管多久,等他回复你邮件后,你都会即时收到邮箱消息提醒。这种就是异步。所以,和沟通一样,接口调用的方式分为同步调用和异步调用。同步调用是最常见的接口调用形式,在同步调用模式下,接口的调用方在一定时间范围内一直等待,直到被调用方返回执行结果。比如页面的加载,你需要停留在此页面等待加载完成才能继续后面的步骤。异步调用是接口调用方给被调用方发出指令,但不会愣在那等待结果,调用方会给被调用方提供一个回调接口,处理完成后,再调用回调接口返回结果。比如应用的更新升级下载,开始下载后我们可以将其置于后台下载,无需等待下载结果,同时可以去完成其他任务。我们无需去考虑通信的底层协议是什么,只单纯的考虑场景,电话沟通和页面加载就是同步,邮件沟通和升级下载就是异步。所以在实际交互设计过程中,我们需要找开发确认接口调用方式的底层逻辑,对于无需或者不能即时响应的工作考虑采用异步调用的交互设计方式。2. 抽象思维抽象思维看似与设计思维相冲突,一个是需要抽离高层次共性,考虑代码的可扩展性;一个是需要深入场景,精准的传递信息。实际上在设计中也有经常使用抽象思维,例如为了提高生产效率,我们会设计对应的组件库,提取常用的基础控件,普遍应用于各种产品。我认为大多数情况下,我们是将抽象思维逆向使用的。相同的组件,因为其功能是固定的,在大多数情况下都可以复用,但在一些特殊的场景,我们可以发散思维,设计出更多符合场景的组件样式,从而传达更具象的内容。比如简单的加载,比较大众的设计样式就是转菊花,这种加载可以应用到任何加载场景,常见得会让用户感觉很 low,没有任何辨识度。在实际设计中,我们是可以结合产品特性或品牌形象将其实例化或者内涵化,例如,B 站加载样式,融合了品牌 LOGO,将品牌基因也融入到简单的加载设计之中,加强用户对于产品的印象及帮助品牌传播。这种以抽象出来的类为出发点,逆向运用抽象思维,再结合自身的设计思维去发散,最后收敛得出一个有效的问题解决方案,也能很好的服务于我们的设计。3. 结构化思维人类很早以前就认识到,大脑会自动将发现的所有事物以某种秩序组织起来。基本上,大脑会认为同时发生的任何事物之间都存在某种联系,并且会将这些事物以某种逻辑模式组织起来。比如,通过对下图的观察,你可以看到什么?任何人,看到上面的 8 个方块,都会认为共有两组方块,每组 4 个。这是因为人类大脑天性所致,大脑会认为同时发生的任何事物之间都存在某种联系,并且会将事物按某种逻辑模式组织起来。这种“联系”指的是某种类似的共同点或所处的位置比较接近。这种将事物组成逻辑单元无疑具有很大的作用。我们更容易记住那些具有逻辑关系的东西,而遗忘那些散点的东西。其实以上的结构化思维方式也就是设计中的格式塔原理。如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。阅读文章 > 为了更好的理解结构化思维的应用,我们可以以做简历设计为例,简历制作其实就是把个人相关的信息整理成结构化信息的过程。每个人的简历上大致会包含姓名、性别、民族、籍贯、出生年月、联系方式、电子邮箱、工作单位、工作时间、职位、工作职责、离职原因、毕业院校、学习时间、所学专业、获得证书等信息。这么多信息,如果不加整理的一一罗列,会显得非常繁杂,可读性非常差。我们可以将这些信息按一定的逻辑关系整理分组,读起来就会轻松很多。将信息进行结构化梳理后,会更清晰、更有条理。信息的传递效率也会大大提高。最后,无论是产品思维、设计思维,还是程序员思维,不应该成为职业的边界限制,亦或是不同职位间争议的起点。我们可以相互学习与了解不同的思维方式,共同更好地服务于产品。本篇来源:优设网原文地址:https://www.uisdc.com/programming-design
的人 价值 工作 前一段跟一个朋友聊天,他说他也去大厂了,去了宇宙条。但不知道为什么,去了之后特别不适应。所以就在思考一个问题:大厂经历给我们这种偏专业型的人带来的成长到底是什么?近两年受大厂裁员消息的不断影响,我看到很多在大厂工作很久的人出来并没有那么抢手,有些人如果不降低薪资预期甚至很难找到合适的工作。那么大厂还值不值得去呢?还应不应该继续在大厂卷下去呢?在大厂工作,除了薪资高一点之外,还有那些额外的价值呢?拍摄于百度大厦,一个普通的加班的夜本文我想试着把“大厂价值”拆分为大厂身份价值、大厂经历价值、大厂成长环境价值三个方面,客观的分析一下。往期职场干货:设计师如何做好职业规划?来看15年资深总监的经历!或许是因为这世界太过变化莫测,或许是出于与生俱来的一种危机感和求生欲,在我的 15 年的设计职业生涯中,我很少感到稳定和安逸。阅读文章 > 一、大厂的身份价值我们经常看到带着“阿里 P8”、“字节工牌”等关键词的花边新闻,那天还在即刻看到阿里员工春节回家上坟被长辈要求戴上大厂工牌,可能感觉这是一个特别光耀门楣的事情。每个人都需要一个社会身份,借由这个社会身份得到他人的认同。获得社会身份的这个过程,也是从学校毕业之后,逐步完成自我定义的过程。1. 大厂标签的求职价值大厂标签可能会一直伴随你的职业生涯。大厂标签不是个比喻,在企业数字化的推进中,企业的招聘系统、HR 系统中都会打在你的个人资料上面,尤其是招聘系统中,人在数字化的过程中如果概括起来,也不过只是几个标签的组合而已。比如我身上的大厂标签是百度交互 U7。如果要我做一个自我介绍,不管我想玩什么梗,最后都要乖乖地摆出这个标签,这的确可以让别人快速的了解你。职业标签、学历标签会与你的年龄、从业时间、薪资预期、目前的工作信息放在一起,一起出现在招聘方的候选人列表里,职业化的猎头与 HR 只需要扫一眼(扫一眼具体是指小于 1 秒钟的时间),就知道你与他们招聘的职位是不是基本匹配。当然,大厂标签也并不是职业发展的唯一解。大厂标签在求职过程中确实存在较高的价值,但我们的选择其实也有很多,除了“阿里巴巴设计专家”、“美团资深视觉设计师”这样的大厂标签,独立开发者、连续创业者、XX 设计竞赛获奖者、原创品牌主理人等等,这也都是非常酷的标签。2. 大厂圈子的潜在价值我刚毕业时认识一个朋友,他在悉尼念完大学之后觉得还不够,回国工作一小段时间后又在准备美国知名学府的面试,他当时说如果能去斯坦福这样的学校,并不是为了去那里学什么样的课程和专业,而是为了可以进到斯坦福大学的校友圈子。宝洁是营销界的“大厂”,被称为新消费品牌的黄埔军校、未来 CEO 的黄埔军校。宝洁背景的创业者们自然而然的形成了一个圈子。在这个圈子里大家互相提供资源和信息。这会带来一些无形的但又很实在的潜在价值。起初我对圈子也没什么直观感受,但当我离开工作四年的百度之后,原来在百度认识的同事和朋友,又去到了不同的公司、不同的地方,他们仍然在很多事情上可以帮到我。如果你在一家公司跟很多同事共事超过 2 年,那么基本上大家之间的关系也就跟大学同学之间的关系差不多了。在大厂工作可以认识很多人,跟一些优秀的人建立连接、相互影响,积累自己在自己领域范围内的有价值的社会资源。当然,你也可以理解为“人脉积累”,只是我不太喜欢这个说法。二、“大厂”的经历价值,你在哪里,做了什么OK,既然你在腾讯待了三年,那么你在哪个部门,具体做了什么呢?解决了什么问题,做出了什么成绩,获得了什么样的晋升?这些问题可能你的亲戚朋友不会关心,但你如果要去人才市场上谋求另外一份新工作,那招聘方就会特别关心。没有谁会只因为你在哪个大厂刷满了 3 年的资历,就张开臂膀拥抱你。因为谁都知道,无论在什么公司都有一些混日子的人。并不是所有的大厂经历都是有价值的,大厂边缘部门的搬砖工作可能就没什么价值,可能还真不如在小公司。有些大厂资历可能并不“值钱”我曾经面试过一位设计师,他在京东、百度累计工作经历超过四年。但跟他聊过 15 分钟之后却感到非常失望。究其原因,可能是虽然身在大厂,但他都在相对边缘的部门做设计工作。他当时在百度做公司内部系统的相关设计工作,职级 U3(百度设计序列的最低级,一般是刚毕业的同学或者实习生,但他当时已经工作两年了)。而在京东时,他所在业务就他一个设计师,做设计属于孤军奋战。所以四年过去,他并没有因为在大厂工作过,就获得太多额外的价值和技能。但黄金时光已经流逝,不再复返。真正有价值的大厂经历是可以为你创造自我价值的,我觉得可以分为以下几类:1. 系统认知经历在大厂形成系统认知,认知大平台、大公司的运转逻辑。设计师可以在大厂了解大型成熟的设计团队是如何工作的、在意的设计价值是什么,如何与其他部门的角色协作,设计系统是如何建立的,更专业的设计师是如何思考问题的,以及不同角色之间是怎样体面的扯皮的,等等。2. 项目经历可以写进简历的项目经历最好是成功的经历,最好具备一定的知名度,最好用户量级足够高,最好经历了一些挫折但你成功克服了它,最好执行节奏比较快,最好你在其中发挥了比较重要的作用,最好你在经历之后总结了宝贵的经验可以复用在之后你遇到的类似项目中。所有这些,在大厂可以更有机会获得。3. 被锤打的经历大厂经历带给你体面的社会身份、容易自我满足的高薪资、优越舒适的工作环境的同时,还带给你了高强度的职场压力。所以一般大家会默认在狼厂、阿里、美团、字节这样的公司工作过的人,抗压能力非常强。这种抗压能力包括但不限于连续熬夜加班的能力、不断修改设计方案依旧精神饱满的能力、默默扛住委屈继续正常工作的能力、跟不同角色的人长时间拉锯扯皮的能力、面对身边的卷王依旧迎难而上的能力、向不同风格的老板汇报工作的能力等等。三、大厂的成长环境价值我觉得好的成长环境在信息、思维、项目(业务)三个方面都应该是好的,这三个方面分别对应一名设计师的视野、大脑和行动力。设计师需要好的信息环境,得到多元的、有价值的信息输入,刺激大脑的二次发育。设计师需要好的思维环境,周围同事思考问题的方式会对你直接产生影响,在与他人的思维交流中真正学会如何独立思考。设计师还需要好的业务环境,最好公司的业务状况是稳定的,如果业务还没做多久就黄掉了,那我们作为设计师也很难讲可以从这样的业务和项目中得到太多成长和价值。大厂让人“职业化”大公司在信息环境、思维环境、业务环境三方面都更有可能比小公司好,从而为设计师提供一个好的成长环境。在这个成长环境的基础上,大厂因为设计团队规模较大、运营时间较长,所以整体上较为成熟,会为每个人提供友好的个人发展路径,以及好的设计导师和相关培训。同时大厂的企业文化建设也会比较成熟,成熟的企业文化对每个人的职场化提供帮助。同时大厂的企业文化也会塑造你的价值观、职业观。这也就是为什么即便到了一家新公司,百度系跟百度系的更容易聊到一块,阿里系的跟阿里系的更容易达成共识。大厂的环境会把形形色色的人培养的更加职业化,更高的情商、更加妥帖的沟通技巧、更像样的汇报方式、更守时更有责任感的职业操守。好的,大概是这样。我简单总结了大厂经历带来的价值和优点,但不是说大厂哪哪儿都好、人人都应该去大厂。没有这个意思,大厂也有很多问题。有时间再写。欢迎关注作者微信公众号:「柴林的设计笔记」本篇来源:优设网原文地址:https://www.uisdc.com/big-company-value
人工智能 轮盘 小游戏 编者按:AI生成在如今的设计项目当中到底要怎么使用?很多设计师都在想,也在尝试。这篇文章的作者是一名产品设计师,正好需要为手底下的一款概率游戏产品设计一个内置小游戏,提高转化率,由于时间紧迫,干脆借助 AI 生成辅助设计。下面是他探索的全过程:2022年底,AI生成出现在聚光灯下,和很多人一样,我对它的革命性是保持怀疑的。但是当 ChatGPT 出现的时候,所有的怀疑和犹豫都消失了。在短短的几周之内,AI 生成所输出的结果彻底了所有人对于它的看法,我也开始探索人工智能到底如何在视觉设计上为我们提供帮助。为什么我们不使用 AI 生成的图像?Midjourney 是遥远的未来,还是仅仅只隔了一层纱?最近,每小时都有人在 Medium 上发布关于 AI 生成工具相关的文章,这种内容发布的热潮也不断影响着每个读者。尽管积极的反馈很多,但是我们注意到,并没有太多设计师真的在自己设计的时候,大规模地使用 AI,倒是使用 AI 生成的头像、LOGO 比较常见。AIGC领域新增6大神器!每个都能提高400%的设计效率!大家好,这里是和你们聊设计的花生~最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿阅读文章 > 那么大家为什么不将 AI 生成运用到真实的项目当中呢?事实上,我整个 2 月份也仅仅只看到了下面一个设计案例用到了 AI 生成:这个是名为 CosmoPolitan 杂志,他们将 AI 生成的照片用到了杂志封面上。从概念到现实:AI 如何帮我做游戏设计所以我做了这项实验。我将 AI 生成的图片运用到了真实的设计项目当中,我是一款名为 Leon 的概率游戏的产品设计师,而我的目标是增加用户二次投入的可能性。在进行了广泛的研究并验证了我的假设之后,我决定推出一个带有幸运轮盘的促销小游戏,而这在这类概率游戏当中普遍存在。简而言之,我想借助这个小游戏来为新注册的用户投放奖励,但是他们只有有所投入之后才能领取奖励,而团队希望借助这个小游戏来提升参与度和活跃度。这个策划被提交到团队高层之后,很快获得了批准,但是由于项目本身的截止日期非常近,亲手设计可能在时间上不被允许,所以我们决定尝试借助 Midjourney 来辅助设计。以前我们从未尝试过使用它,这次我们得尝试一下。Leon 是我们的吉祥物。头脑风暴我是一个结果导向的人,所以当我从 Midjourney 获得令人印象深刻的反馈的时候,感到无比的兴奋。我们提供的诸如 幸运轮、划分为 8-12 部分、品牌吉祥物是狮子等关键信息之后,AI 生成的结果非常符合我们的预期。AI 完全 Get 到了我们想要把狮子放在正中央的想法。拆分轮盘根据我们在平面设计方面的经验,幸运轮将会分为 3 个部分,也就是旋转的轮盘、选择礼物的箭头还有中心用来装饰的狮子。现在的挑战在于,想要将这几个组件单独创建出来可以组合到一起,但是这本身并不容易,因为有的图像当中狮子太大,另外一些则不符合我们的需求。审美挑战和学习资源我需要引导人工智能来理解这类游戏的普世审美倾向,通常这些和财富相关的概率游戏通常带有古典的审美趋势,并且偏爱使用金色,我希望 AI 生成带有这类视觉特征但是又不会失真的图像,为此我们进行了大量的尝试,以确保它生成的结果是正确的。过程中我尝试了结合产品吉祥物,但是 Midjourney 不理解我的想法。我不得不尝试借助不同的工具和资源,比如 Prompt Noonshot 和 Youtube 上的 PANTER 频道的教程,了解 Midjourney 的运作机制。找到合适的结果经过多轮的生成和混搭,我最终找到了相对合适的备选方案。当我在设置轮盘上具体格数的时候,遇到了另外一个障碍。AI 不断添加更多的格子,而我希望减少格数,这让我最终选择单独生成轮盘,并且后续修整融入到图像当中,事实证明,这是一个工作量极大的任务。此外,由于我们的产品一直专注于概率游戏,因此还引起过不少争议,我怀疑 AI 也受到了限制,很难提供相关的元素,比如纸牌、筹码等。后来我发现我的猜测是正确的,我在尝试这类提示词的时候,它们都被过滤掉了。结果我们在尝试 100 多组提示词之后,我最终确定了我们最喜欢的组合,并且准备以此为基础,创建一个独立的小游戏。虽然我认为这些结果并不是最完美的,但是对于我的平面设计团队而言,这些图片内容足以作为一个良好的起点。换句话来说,基于 AI 生成的图片,如果没有平面设计师,我们依然很难完成这个项目。人工智能在设计中的潜力人工智能在识别细微的情感、创建原创内容、探索道德规范方面,依然非常的受限。因此,我们不得不在 PS 中手动编辑图片,以获得真正符合我们需求的结果。尽管如此,我们依然认为人工智能是设计的未来。设计师需要借助同理心和逻辑思维来创建更加实用的项目,人工智能则可以作为额外的工具,来帮助设计团队客服从0到1的「白纸恐惧」,提供设计基础。神经网络算法为设计师提供初始的灵感和想法,但是目前来看,也很难完成所有的任务。总的来说,我很高兴看到人工智能开始进入设计领域,推动行业发展,它目前来看尚且不够完美,但是节省了设计师的时间,协助创建个性化内容,拥有巨大的改变的潜力,最终帮助设计师创建更好的项目。提高3倍效率!能落地的AI绘画&设计系统课来了!如何快速入门AI绘画和AI设计?阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/ai-generated-in-real-project
字体 网站 是一个 最近 ChatGPT 火出圈了,我今天也来凑个热闹。在这篇文章中,将向大家介绍 8 个字体下载网站,这些网站全是由 ChatGPT 推荐的。这些网站提供了各种风格的字体,从传统的衬线字体到现代的无衬线字体,从手写风格到艺术字体,无论是商业项目还是个人使用,都可以从这些网站中找到适合自己的字体资源。更多字体下载:打包下载!5款高质量的免费可商用英文字体推荐大家好,这里是和你们聊设计的花生~今天为大家推荐 5 款我最新收集的高质量英文字体,包含赛博朋克、优雅、圆润可爱、纤巧灵动等多个风格,而且都是免费可商用的哦~往期回顾:一、Achron字体设计师 Instagram 主页: https://www.instagram.co阅读文章 > 一、Google Fonts网站链接: https://fonts.google.com/Google Fonts 是一项由 Google 提供的免费开放源代码字体库,可以免费下载和使用超过 1000 种字体。字体库包括许多流行的字体家族,如 Open Sans、Roboto、Montserrat 和 Lato 等。二、DaFont网站链接: https://www.dafont.com/Dafont 是一个免费字体下载的网站,网站上提供了数万种来自不同设计师的字体。用户可以根据字体分类、字体作者、字体名称等方式来搜索字体,可以在每个字体页面上看到预览效果,并直接下载字体。三、Font Squirrel网站链接: https://www.fontsquirrel.com/Font Squirrel 是一个免费的字体资源网站,该网站目前收录了超过 1500 种字体,可用于个人和商业用途。Font Squirrel 还提供了字体识别器、字体对比器等功能,帮助用户轻松找到适合的字体。四、Abstract Fonts网站链接: https://www.abstractfonts.com/Abstract Fonts 是一个免费字体下载的网站,该网站拥有庞大的字体库,涵盖了各种类型的字体。用户可以通过搜索和筛选快速找到自己需要的字体。该网站还提供了在线字体识别工具,用户上传一张字体的图片,通过识别工具来找到该字体的名称和下载链接。五、MyFonts网站链接: https://www.myfonts.com/My Fonts 是一个提供字体下载、购买和使用的网站。该网站拥有超过 130,000 种字体,包括来自世界各地的设计师和字体公司的作品。用户可以通过搜索、浏览、筛选和比较不同字体,找到适合自己需要的字体,并进行购买或下载。六、FontSpace网站链接: https://www.fontspace.com/FontSpace 是一个免费的在线字体库网站,网站上收录了大量的免费字体。用户可以通过搜索或分类浏览来查找自己需要的字体,也可以按照字体作者进行筛选,无需注册即可浏览和下载字体。七、FontSpring网站链接: https://www.fontspring.com/Fontspring 是一个字体市场和字体管理平台,用户可以浏览和购买各种字体。字体来自各个知名字体设计师和字体工作室,可以用于个人和商业项目,并且许可证非常灵活,以满足不同用户的需求。八、UrbanFonts网站链接: https://www.urbanfonts.com/UrbanFonts 是一个提供免费字体下载的网站,提供超过 8000 个字体供用户选择。该网站也提供付费字体,但大多数字体都可以免费下载。网站还提供了字体预览功能,用户可以在选择下载前先预览字体效果。本篇来源:优设网原文地址:https://www.uisdc.com/font-download-website