海南体彩app购彩
上传作品,开始你的设计之旅吧

首页推荐

编辑精选

我的关注

12345...72
  • 教程手写毛笔笔触+拼接教程分享

    双十一就要降临了, 很多店铺的专题页都少不了毛笔字体的身影。 结合这个大卖的日子,我写了一些毛笔的笔触和字体拼接案例, 提前分享给广大的设计朋友! 请放心使用! 链接:https://pan.baidu.com/s/1Htm8ZMtvTbC1uHqTVn8raQ  提取码:x0o3  复制这段内容后打开百度网盘手机App,操作更方便哦

    刘迪/BRUCE刘迪/BRUCE 3236 77 14
  • 教程【六周年回顾】商业人像精修分享-黑白君

    致设计六周年线下聚会-杭州站分享嘉宾:商业修图师-黑白君分享主题:商业人像精修方法与技巧技术要点肤色的统一1:色域控制 2:选区+调色工具3:先去色在上色4:创建空白图层改混合模式为颜色美的要点1:面部轮廓清晰、立体感强2:五官端正,眉、眼、鼻、口、脸颊左右对称3:皮肤润泽紧致无赘肉4:侧脸鼻凸、唇凸合适5:眉毛形整无断层6:表情肌肉无肥大或凹陷饱和度观察组的创建方法1:创建一个可选颜色调整层——模式选择绝对——把黑、白、中间调的黑色拉倒正100,其他颜色的黑色全部拉倒负100——创建色阶调整层(把高光滑块拉倒有图像信息的位置)2:创建两个色相调整层,一个加饱和45,一个减饱和-45,图层蒙版改为黑色(用白色画笔去涂抹)

    头条君头条君 5928 58 7
  • 文章/经验动效赋能,助力用户体验设计

    转载地址:https://www.ui.cn/detail/484957.html有段日子没有写文章了,这段时间发生了不少事情,也离开了工作生活了五年的上海,成了一名北漂。这篇文章是源自给公司其他设计职能的小伙伴做的一次内部分享,觉得对大家还有点帮助,所以对分享的资料进行增删改以及精简提炼,本文适合比较刚接触动效设计的同学,内容呢也比较基础,希望也能对大家有一定的帮助。文内有部分资料、观点以及素材来源于网络以及参考资料(侵删)。动效相信大家都不陌生,基本上市面上的互联网产品内都有,但是可能很多人并还不清楚产品动效的起源与发展,在产品设计中的应用场景,在整个设计体系的重要程度以及能为产品或者业务带来什么样的价值等等,这篇文章呢就从下面的的5个维度来讲述一下动效的过往、现在与未来。目录起源发展应用场景设计语言动画价值未来发展起源发展动画发展大致经过了三大阶段,分别是从传统动画(纸笔)>>CG动画(离线渲染)>>互动动画(实时渲染)。随着时代变迁、设备以及技术升级,新的动画形式以及呈现载体不断的被创造出来。动画发展的三大阶段(点击看大图)传统动画注重理论基础以及扎扎实实的基本功,并且是艺术学院必修课,宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品,所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。CG动画是随着电影行业与游戏行业一并发展起来的,由于电影的工业化程度太高,技术积累也越来越深厚,所有游戏使用的工具与技术偏向电影那一套,但不同的是电影是离线渲染的,一部短片渲染几千个小时都算很正常。而游戏与电影不同,实时渲染必须保证帧速率,所以游戏行业最重要的技术核心就是改进游戏引擎。互动动画想必大家更加熟悉,也就是游戏、web/app、VR/AR/AI、新媒体这些领域的动画,这篇文章我们主要讲的就是Web/App动画。初期苹果Mac桌面文件夹的打开与关闭从初期的MAC电脑到现在的iPhone X 不过短短的几十年,产品设计中动效的运用已经获得了巨大的进步。动效其实对于用户体验这个大专业来讲是一种新的学科,随着我们的设备的硬件条件越来越好,动效才被支持的越来越好,可实现的难度也才越来越低。交互动画里有一部分依然是归为传统动画的,比如说Loading/插画动画/载入动画等等。这些可以动画需要多关注迪士尼12大动画原则(节奏&时间、运动曲线、预备动作、夸张、挤压&拉伸、次要动作、惯性、关键帧动画&连贯动画、动作表现力、感染力、角色个性),但是另外一部分则是扎根于产品设计的“交互”中。CG动画与交互动画的区别(点击看大图)CG动画更加注重片子所表达的故事的完整性以及趣味性,大部分运用的都是超现实的手法,时长一般都5s以上,只需要开动脑洞只要软件技术能实现都可以发挥出来。而交互动画更注重的是动效的合理性和可用性,动力学需符合真实的物理世界,还要注重整个产品内的动效的统一与协调。一般持续时间都很短在1s内,大部分动画在200-500ms内完成。整体来说动效都相对简单,不会太复杂因为要考虑技术可实现性。应用场景这里我们只针对我们互联网产品设计讲一下交互动效的应用场景,我总结了以下七大应用场景,分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。图标动效一般来说图标动效适用于App或者web产品中,单个持续时间在100ms左右,根据图标的复杂程度以及实际使用的场景最长时间也不超过400-500ms。图标动效更注重微弱的变化带来的趣味性以及流畅性,常用于状态反馈以及导航引导,通过小小的变化可以为产品体验增色不少,<img src="/static/image/smiley/default/004.gif">的还可以给用户留下深刻的印象。界面交互 一方面界面交互动效可以让人对产品产生深刻的印象,甚至是带来惊喜,另一方面表达了界面之间的交互过程,吸引用户的注意力。通过减少预判误差、增加连贯性、强调叙述、清晰关系四个方面来增加产品的可用性。汽车系统 汽车系统的用户界面以及动效一般都来说比较有科技感,动画会更加的酷炫。本质上来说汽车系统其实跟我们日常用的产品是一样的,由于行业定位的不同以及用户使用场景的不同造成了这些差异。插画动效适用于App的引导页、运营活动、空状态页面、错误页面,展示型网站等等。在产品设计中插画动效一般有2种实现形式,一种是视频或者动态图片直接加载即可,另外一种就是开发同学通过技术手段来实现,SVGA、lottile、apng等等。品牌宣传平台限制,视频可直接在公众号文章内查看:https://mp.weixin.qq.com/s/qq7XbinaFXSYEy7O2vmQpw这是韩国一家咨询公司Plus X做的一个App的宣传动画,这里说的品牌宣传更像是一个产品的解析以及意义的传达,更轻量化、片长更短、制作技法也相对简单一些。HUD HUD可能很多同学都不知道是什么,给大家科普一下。HUD(Head Up Display)又叫平视显示器,最开始呢是运用在航空器上的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为HUD的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装。后面延伸到像大家在科幻电影里面看到的那种智慧大屏,以及政府机关等等我看看到的那种蓝色动态LED大屏都属于HUD。项目包装 平台限制,可直接复制视频地址查看:https://v.qq.com/x/page/r0824uenul0.html上面的视频是腾讯的ISUX部门2018项目包装的视频,当时这个视频上线后,各大公司的UED部门竞相模仿,这个项目包装里面有很多项目都用到动效设计,包括礼物动效,表情动效、插画动效、logo演绎等等,这说明动效设计在互联网产品设计中的应用已经相当的广泛了,作品本身的效果加上简单的动画包装就可以做成一个动态的作品集,对于宣传团队是一个很不错的点,个人作品集也可以按照这个思路来做,肯定也会有很不错的效果。设计语言设计语言是指导统一产品设计的大脑,所以了解设计语言对于我们无论是做界面还是做交互设计以及动效设计等等都有很大的指导性作用。上图中的6个是国内外比较知名的设计语言系统,大家应该或多或少了解一点,<img src="/static/image/smiley/default/006.gif">大家有兴趣可以去看看他们的设计系统,相信会对你们有很大的帮助,对帮助构建你的个人设计体系也有很大的参考作用。这里我们以Material Design为例进行讲解,给大家介绍一下这套设计语言以及设计语言内的动画模块在我们的工作中是如何运用的。Material Design,是由Google在I/O 2014大会上推出的全新的设计语言,其灵感来自与真实物理世界及其纹理,包括真实物理世界如何反射光线和投射阴影,通过材料来重新构想纸张和墨水的一种介质。其主要目标是:创建:创建一种视觉语言,将经典的<img src="/static/image/smiley/default/004.gif">设计原则与技术和科学的创新和可能性相结合。统一:开发单一的底层系统,统一跨平台,设备和输入方法的用户体验。定制:扩展Material的视觉语言,为创新和品牌表达提供灵活的基础。基本设计原则:大胆,图形,有意:Material Design以印刷设计方法为基本指导:排版、网格、空间、比例、颜色和图像。即创造层次、意义和焦点,让观众沉浸在体验中。动效有意义:通过微妙的反馈和连贯的过渡,集中注意力并保持连续性。当元素出现在屏幕上时,它们会转换和重新组织环境,交互产生新的转换。基础灵活:Material Design系统旨在实现品牌表达。它与自定义代码库集成,允许无缝实现组件,插件和设计元素。跨平台:Material Design使用跨Android,iOS,Flutter和Web的共享组件跨平台维护相同的UI。Material Design的要解决的问题以及设计原则大家应该都了解了,我们针对设计语言内的动效有意义做一下延伸,让大家对动画有一个再深入一些的了解。那么Material Design动效的用途主要有以下四点:层级关系:通过动效反映父级元素(收件箱)与子级元素(收件箱邮件)之间的层次结构关系。状态与反馈:动效提供及时的反馈和用户操作状态。用户引导:动效为用户如何执行操作提供有用的建议。个性化:动效为产品设计提供可更多的趣味性、个性以及吸引力,对品牌的提升和认知有很大的促进作用。了解了设计语言的动效模块,相信大家应该有一个系统的认识,在方寸之间进行动画设计,考虑的就是毫秒之内,而在毫秒之内最应该考虑的就是速度,研究发现,在界面设计中最合适的动画时间为200-500ms之间,时间太短,用户难以感知,时间太长,用户又会觉得整个过程太缓慢不够流畅。当然了根据设备的不同动画内容的不同,动画持续的时间自然也是不相同的。动画时间的长短与动画路径的远近是成正比的一般。另外平台的不同,动画持续的时间也是不相同的,在pc端内的动画要比移动端的动画持续时间普遍少50%左右,这是因为平台的属性所造成的。但是要是单纯的做装饰动画是可以单纯发挥的,不用遵守上面的几个原则,所以进行动画设计的时候都需要考虑到具体的场景以及具体的需求,灵活运用。说完了时间,我们来说说跟时间息息相关的动画曲线,我们都知道在几百ms内表现出动画的特点是有点难度的,所以精细的运动曲线对我们就显得格外重要,这里我总结一下Material Design内提到的几个常用的动画运动曲线,大家有兴趣可以去Material Design的官方文档内详细查看:上述的几个运动类型以及动画曲线我们在产品设计内经常会用到,希望大家打好基础,灵活运用。我们知道任何一件事情都有存在的价值和必要,动画也不例外,如果动画没有体现出他应该有的价值,那么做的再好看也只是仅仅局限在了好看这一个层面,下面我们就看看动画到底能在产品设计中带来什么样的价值。动画价值有时候现代科技产物使用起来非常复杂,但是其实“复杂”本身没有好坏之分:不好是因为没有处理好这个复杂所以产生了“混乱”,所以应该被批评的不是复杂而是因复杂所产生的混乱。——唐纳德·诺曼<img src="/static/image/smiley/default/004.gif">的动效可以帮我们解决产品设计中的很多问题,可以从用户体验的五大要素来进行价值的拆解:战略层战略层本质上来说大部分设计师其实是接触不到的,当然接触不到战略并不能代表我们不需要了解,作为设计师我们必须了解公司对产品的战略定位以及期望,也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层,所以单纯来讲,动画在这一层面上可以发挥的余地是是不多的,因为更多的这一层更加关注意识形态的战略思考。范围层范围层是通过战略思考来思考明确产品的大概功能和内容,有很多产品的功能复杂,交互繁重,内容很多,在这种情况下动效就派上了用场,我们可以尝试通过动效来解决内容过载,优化交互模块,扩展产品内容功能范围。结构层这一层主要确定产品的功能结构以及层级,主要设计用户如何快速,准确的触达某个界面完成某个任务,要考虑用户体验地图,用户整个的任务路径,简单来说就是用户要做什么事情,如何做,做完之后应该干什么,如果能对动效巧妙的运用,就可以做到引导用户,练习上下流程的作用,降低用户理解成本,提搞产品的操作效率,提高产品的可用性和易用性。框架层从这一层开始,UI设计师接触的内容逐渐多了起来,大家也会更加熟悉工作的内容以及范围,这一层主要体现在优化页面布局,确定元素摆放位置,涉及到具体的信息、界面、导航设计等等。通过利用格式塔,栅格,设计语言等方法确定产品功能具体页面内容布局,我们可以通过动效来进行辅助设计,例如强化元素的位置、颜色、大小,优化页面的切换、跳转的流畅度以及自然度等等。表现层表现层具体涉及到视觉、听觉、触觉的体验设计,也是做为视觉设计师、UI设计师发挥最多的一层,在表现层动效的展现形式会多种多样,这里不展开讲解,大家应该都明白。在表现层加入适当的动画能够提升产品趣味性,加强用户与产品的情感链接,增加用户对产品的友好度。未来发展5G5G时代已经到来,5G的普世将会为科技发展带来更多的可能性,众所周知5G的速度是4G的百倍,那么意味着我们的设计的动画会加载的更快,动画文件的大小限制将会被打破,另外也可以在某些领域的产品内设计更复杂更酷炫的动画。人工智能(AI)它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内,我们能参与到的动画设计必然会更多样,形式也会更丰富,挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来,让我们拭目以待。虚拟现实(VR)是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体,其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展,各行各业对VR技术的需求日益旺盛,VR技术也取得了巨大进步,并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计,并且我相信未来会逐渐的变成主流。参考资料material.io/design/motionhttps://www.zcool.com.cn/article/ZODIzMzky.htmlhttps://zhuanlan.zhihu.com/p/27114894这篇文章比较基础,所以比较容易消化些,希望对刚接触动效的同学有些许帮助,如果觉得对你有帮助,欢迎转载、转发以及收藏。

    关关关关 648 1 0
  • 教程【海平面】比例元素在平面设计中的应用原则

    1959年,大众汽车发布了一个开创性的平面广告,被称为“改变广告的广告”和“有史以来最伟大的平面广告运动”之一。这则名为“想想小的好处”(Think small)的广告改变了当时汽车广告的浮夸风格,而是在版面大面积空白中以微小的形象展示其产品。大众汽车采取了极简主义的方式,专注于其汽车的实用性和可访问性,而不是设计印刷一个华而不实的、毫无创意的广告。因此,“想想小的好处”帮助大众汽车在公众认知中,从纳粹制造的德国汽车转变为美国的新奇事物。正如约书亚?约翰逊(Joshua Johnson)为Design Shack网站所写的:“大众甲壳虫(Volkswagen Beetle)是一款小型、慢速、丑陋的外国车,广告公司的员工将其打造成美国人引以为豪的标志性车型。”那么,广告公司和大众是怎么做到的?在平面设计中应用具有力量的比例设计元素。他们做了一个简单但大胆的决定:把镜头从他们推销的产品上移开。而且它得到了回报。这种规模的转变非但没有降低汽车的动力,反而引起了人们更多的关注。所有的设计师都可以从大众汽车的革命性运动以及在平面设计中对尺度的创新运用中学到东西。不过,这只是一个例子,说明比例规模如何改变广告,并在受众中产生影响。这就是本指南的作用所在。我们将详细介绍图形设计中的比例原则,包括比例是什么,为什么它如此重要,以及如何以创造性和创新的方式开始使用比例。让我们开始吧!平面设计中的比例是什么?比例尺是指设计元素相对于其他元素的相对大小。正如设计师史蒂文·布拉德利(Steven Bradley)所写的那样,“一个物体只有在与其他物体进行比较之后才会有大小尺度。”例如,在大众汽车的广告中,汽车相对于广告的空白空间来说是很小的,而标题“想想小的好处” 相对于广告的主体来说是很大的,这表明文本和排版也受比例的影响。让我们来看另一个例子。迪拜的广告公司创作了这些海报,宣传麦当劳整天都在卖咖啡。虽然麦当劳以其醒目的大logo而闻名,但在这些广告中,这个logo却被一个更重要的元素——时间所取代。为什么平面设计中的比例很重要?作为平面设计的核心原则之一,比例会影响设计的意义、色调和整体构成。比例担负起在应用的元素之间创建一个可视的层次结构。它告诉观众要看哪些元素,以什么顺序看它们,以及关注什么最重要。以广告公司为和平组织做的广告Adot为例。该公司希望通过其“消灭战争的言论”运动来促进俄罗斯和乌克兰之间的和平。为了说明文字和武器一样强大,他们把铅笔放大到炸弹大小,把两个物体拼合在一起。比例还可以讲述一个故事,创造一个视觉旅程,描绘节奏和运动。如果将两个对象缩放到相同的大小,我们可能会开始考虑它们的相似性。如果一个物体比另一个物体大,我们可以开始考虑状态、张力和顺序。如果元素按实际比例缩放,它们可以传递一种结构感和秩序感。另一方面,比例的有趣使用可以建立异想天开或超现实的场景。比例也可以用来改变视角和创建景深。例如,这则可口可乐的广告,使用比例来创造出苏打水瓶的微笑。如果瓶子的大小都一样,这个广告看起来就会大不相同。然而,通过使用比例,该品牌能够将20个不同大小的相同图形转换成一个新的形象,有效地传达了其“畅爽开怀”宣传活动的理念。调整比例可能很有趣,但如果你开始调整设计的元素,请记住考虑“为什么要这样做?”。你为什么要把这个元素做得比那个大?为什么这个物体在前景,那个在背景?答案应该始终与设计的整体信息相关联。在平面设计中,使用比例的创造性方法是什么?比例可用于多种方式和多种用途。所以,如果你对在平面设计中使用比例感到无所适从,只要多参看在你之前成功地应用过比例元素以及设计原则的设计师的作品,学着试图去更好地应用它。赫敏·霍比(Hermione Hoby)的一部小说《日光下的霓虹灯》的封面,它用比例使书名看起来像是被画在一堵巨大的砖墙上。文本的透视图以及相对较小的楼梯有助于实现这种效果。这是一个大胆而简单的封面,只需几个关键的设计元素就可以传达特定的信息。接下来,艺术家马特·针德(Matt Needle)运用创意缩放技术为电视剧《广告狂人》(Mad Men)设计了这幅海报。主角唐·德雷珀(Don Draper)比帝国大厦还要大,可以看到他在纽约市的天际线上行走。这样的创意用以说明:他是一个强有力的人物,正在席卷这座城市。然后,比例元素再次被用来创建一个更大的剪影德雷珀,这实际上包围了整个天际线。总的来说,这一设计有助于将德雷珀描绘成一个传奇般的广告巨头,席卷全球。设计师在下面的图形设计中使用了比例来创建一组奇特的信息图形,展示了某些物体是如何工作的。“有没有想过iPhone/相机是怎么工作的?”最好的茶/咖啡是怎么做的?或者钟摆时钟、烤面包机等的机械装置,”她写道。“也许里面有些精灵在为我们解决这个问题。”设计师在这些物品中创造了一个小小的elvan产业,来说明它们的内部工作原理,并以一种有趣且易于理解的方式传达信息。结果,这些物体本身看起来比它们在现实中更可怕,我们开始想象探索它们自身的机制会是什么样子。同样,奥利奥在2015年拍摄的这一系列奇幻图片中也运用了比例。该品牌用它的产品创造了充满小雕像的微型景观。要想不断地找到有创意的方法来推销一种小饼干是很难的,但奥利奥通过这样的策略做到了这一点。这些图形不仅看起来有趣;他们还表达了奥利奥可以成为人们生活中重要部分的想法。在2015年 (Sonic)的这些宣传食品品牌slushes的广告牌上,比例的使用应该是显而易见的。该公司并没有在广告牌上加上了一张雪泥的图片,而是让整个画布看起来像一个巨大的雪泥饮料。这一点在广告顶部的3d吸管中得到了充分体现。海蒂·德罗(Heidi Durrow)的小说《从天而降的女孩》(The Girl Who Fell From The Sky)的封面以一种微妙而有影响力的方式融入了比例元素。标题的文本大小在整个封面上保持一致,使其看起来像单词在下落,与标题相呼应。虽然女孩的图像可以放大,但它被缩放到与文字相似的大小。所以她看起来就像和文字一起掉下去了。事实上,她是这一连串意象中的最后一环。在设计电子邮件通讯时,比例尤其重要。这些视觉效果必须在拥挤的收件箱中脱颖而出,并在不到一秒钟的时间内吸引眼球。这就是Lyft在撰写电子邮件通讯时考虑比例和视觉层次的原因。虽然标志在顶部,但这个设计的最大元素是优惠信息:“10次乘坐优惠10%。” 第二大元素是“行动呼吁”(call-to-action)按钮,如果读者被这个优惠吸引,可以点击这个“骑乘和保存”(RIDE AND SAVE)按钮。这两个元素之间较小的文本是次要的,它提供了关于特殊报价的附加信息——这些信息是必要的,但不应该挤在主报价中。这种层次结构和比例的应用,允许Lyft包含大量的文本,而不会让读者感到不知所措或困惑。加强你对比例设计元素的应用能力想想两个黑点——大小都一样。它是一个静态的标准图像,对吧?现在想象一个点比另一个大得多。突然,这张照片开始讲述一个故事。大点比小点更重要吗?它是否包含读者应该阅读的文本或读者应该看到的徽标?如果你在小点上画一张可怕的脸,它现在看起来会被大点吓坏吗?那是悲伤还是有趣?这是一个简单的例子,但它说明了比例所具有的力量和重要性。因为一旦你开始尝试应用比例,你就可以开始问这些问题,并通过设计找到新的和创新的方式来讲述故事。记住大众汽车广告和它所展示出的设计原则:? 比例是相对的。只能将一个设计元素相对于另一个元素进行伸缩调整。? 越大并不总是越好。小比例元素也会产生影响力。? 比例可以带来变革。甚至是颠覆性的,对设计的成功至关重要。

    海空设计海空设计 1471 6 0
123 ...
更多职位

职位推荐

致设计 - 百万电商设计师交流平台

深耕电商设计领域5年,聚集超过100万+优秀设计师持续分享原创作品,设计欣赏,文章经验教程等

0

热爱设计的小伙伴

/
0

作品 / 文章 / 灵感

/
0

30日内更新优秀作品

合作伙伴

分享到:QQ空间新浪微博腾讯微博人人网微信