3D文字绕转海报
我们平时看到的那些潮酷海报,经常会有一些用到了3D绕转的字体效果。看到3D相关的设计,很多时候第一时间都会想到三维软件。但这类简单的效果往往可以在Ai中更快速的实现。
原理实际上在Ai中制作,只需要三个步骤,第一步制作想要绕转的符号。第二生成形状,第三贴图。掌握了三个步骤的原理就能实现很多类似丰富的效果。其实制作过程和三维软件制作很相似,都是将贴图赋予模型。但工具只是实现目的的手段,能简单快速的帮我们达到目的才是最重要的。接下来我们尝试制作下图海报,基本上掌握下图案例及原理就能设计出大量样式丰富的文字类型的海报了。
制作文字符号制作需要绕转的文字排好顺序后,拖入符号面板创建符号。
生成形状形状工具,绘制一个圆形,依次选择效果——3D——绕转调节参数到合适数值,可勾选预览实时查看效果。
贴图&排版在上一步的弹窗中点击贴图,修改符号为刚刚创建的符号。接着勾选形状不可见,缩放贴图并调整至合适位置。点击确定后就能得到一个文字绕转的形状了。最后进行简单排版即可完成海报。
总结掌握了形状如何生成和贴图后,就可以制作很多效果丰富的设计。区别在于创建符号时的排版样式,以 ...
企业级UI设计规范(一)
工作中遇到过这样一个问题——“企业级UI视觉和UI视觉规范有什么区别?”。这次和大家分享一下关于这个问题的个人的想法。
概念先来说说为什么会有企业级UI视觉规范这个概念。所谓“企业级”,顾名思义,所服务的业务都是具备一定体量的,可能是服务一个包含了多个独立子业务系统的大型复杂产品;也可能是由多个类似分公司组织构成,每个组织有自己的业务系统设计体系,等等。那么每个独立业务系统都有自己的设计。如果每个独立业务系统或个组织都用不同的设计规范,会让外界感觉这家公司的设计毫无特点毫无品牌感。反之,如果一家公司有企业级的UI视觉规范,那么无论在各个独立系统、组织间业务系统亦或是指导产品、运营、项目中都能让外界感觉到这家公司的设计特点,以及这家公司具备的品牌感。如果觉得上述表达过于复杂,看看下面的例子:无论是熟悉还是不熟悉平安集团的朋友。当我说下面都是平安集团旗下的业务的时候,应该不会有人否认。虽然它们有不同的称呼,不同的团表现形式。但无论是基于颜色,还是“平安”两个相同的文字,又或者是字体上都采用了相同或类似的设计。种种相同元素的组合,让人很难不联想到它们是一个体系下的。通 ...
企业级UI设计规范(二)
上期文章企业级UI设计规范入口企业级UI设计规范(一)
解答关于上次的问题:下面两组图中,哪个做到了一致性?哪个没有做到一致性?
答案是按钮没不一致,表单做到了一致性。或许有些小伙伴会疑惑,为什么明明两个看起来都不一致,为什么下面的表单做到了一致呢?
其实仔细看不难发现,按钮中,左边和右边图标大小有差别。这种情况如果实际运用到页面设计中每个按钮图标大小不一的话结果是可以想象的,打破了整体统一的原则。而表单中,右侧的排列虽然和左侧不同。但在表单项少的时候,右侧的表现更符合场景需求,并且左右两边都符合整齐原则、临近原则。可以理解为表单表现形式的一种补充和扩展。
一致性看过上一篇文章的朋友会发现,关于企业级设计规范提到最多的词就是——一致性。之所以不断强调一致性,是因为一致性可以降低用户在使用产品中的学习成本,保持相关认知和记忆可以被沿用,预期操作结果。除了规范内容的一致性;还有就是对上述问题中的衡量标准的一致性(意思是出现超出规范外的内容,怎么去衡量这个内容是否符合标准)。而这个衡量标准是以公司整体需求为前提,提取出一部共同认可并强制性约束的条目,它不一定是有标准答案的。因为企业级规范 ...
企业级UI设计规范(完结)
看过上两篇文章的朋友一定还记得,提到过最多的词就是一致性,所以企业级UI设计规范的一致性从哪些维度去考虑,如何去建立呢?可以考虑两个方向进行思考,一个是组件化,另一个就是规则。
上期文章企业级UI设计规范入口企业级UI设计规范(二)
组件化组件化需要如何去建立呢?大家可以试着从下面的例子去参考:
1、原子级颜色(主题色、功能色、中性色等)文字(标题、正文、辅助文字等)图标(导航图标、组件图标、表格图标等)分割线(页面分割线、面板分割线、文字分割线等)
2、分子级表格(基础表格、分组表格等)输入框(基础输入框、文本框、文本域等)单选选择器(基础单选、双列单选、图标单选等)树选择器(单选树、多选树等)
3、区块级卡片列表(横向、纵向等)浮层菜单(瀑布流、平铺等)折叠面板列表(文字域、表格域等)
4、页面级表格页(全局表、导航表等)详情页(基础详情页、高级详情页等)监控页(监控页、工作台等)
5、导航级顶部导航条、左侧导航栏
6、间距级模块间间距、组件间间距、横向间距、纵向间距等
7、交互级反馈提示交互一致、页面操作交互一致等。除了以上罗列出来的,还有很多这里就不一一举例了。不过在建立一 ...
掌握这些技术用语,再来和开发沟通(撕B)
工作中经常会遇到被开发说没考虑开发人员的工作量等等,导致设计无法落地和反复修改。今天给大家收集整理了一些相关开发术语,方便你更好的和开发沟通。
API应用程序编程接口,指两个软件/系统间的连接通道,以实现数据间的传送与处理。比如:
手机插上USB数据线连接电脑,USB数据线插口就是一种API接口。
MacBook与iPhone之间传输图片,“隔空传送”能力就是一种API接口。特点:一种建立数据连接的通道。
前端框架框架前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,element,antdesgin,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等),使用前端框架可以帮助快速的网站。(这里强调下,控件样式是可以修改的,所以在设计的时候为了美观整体也是可以调整样式的。)
框架是提供一套完整的解决方案,按照规定好的代码结构来做编排,同时前端功能越来越强大而产生的前端框架,所以开发web产品就很必要用前端框架(前端架构)。优点:丰富的组件,大大提高了开发效率
SDK软件开发工具包,指集合了某些功能的虚拟安装包,可以向 ...
记录未读
从场景角度选取合适交互规则 所有的方案都是以场景为依据进行决定的。
交互规则1:按钮的左右对齐 💡优先原则
按钮的对齐方式,取决于效率优先还是准确率优先
适合左按钮的场景:以效率为主,例如表单填写,本身就是一个麻烦的过程。为了减轻用户的焦虑情绪。让按钮和内容保持近距离的连贯性,可以让用户迅速完成当前工作。
适合右按钮的场景:以确认信息为主,例如弹窗,本身是需要用户对内容进行确定的场景。所以按钮远离内容区域,通过鼠标移动距离来延缓操作。达到确认的目的。
交互规则2:输入框标签文字位置适合在左侧的场景:表单标签文字少于6个字,且不用考虑国际化,则可以让标签文字靠左或靠右对齐:标签短内容少使用右对齐,标签和框距离较小,较短视觉动线,明确标签和框的关联性,可提高填写效率;标签内容少,且安全性高,使用左对齐,叫长视觉动线会减缓填写速度,有利于提高准确性。
(绿色引导线为视觉导向)
[{"url":"https://pic.nanbowan.top/pict ...
记录未读
组件库问题反馈及调研方案修改
53d87d7e76563f0e2534e86fac1c399f1ca9458c8f24c134f7f1cee4d0b87b64eeb3d103fc20eadf0c2df9f26fb7f69adccc4edadd52ba19a9ccedc7fb18e59ad58a776454455b11466aec72c4051cd6455727da4ca18770f6c1b542b0efcb66c30c4624299374e12196d2a230655aa63d83d88f2cbc7400ec20305bea9c7a0462b1c6f96e1c11a00b94f9b9083e52202d9546c6862153852503e8929e1ce83ebeac0fdf1d957b23cb10fd1f480d33c695bb54549a84ae03ade8bf9ee714fc463e76844b1c2ff03aa51e7a03e3df6bf8fc18b9083f6586476fc87c8b6b780a792f05af261e3bfc8c7b7db6cbbf182246cafcddaa2f8e09ec1 ...
B端设计规则
所有的设计规则都应该是以场景为依据,进行判断的。
按钮的左右对齐按钮的对齐方式,取决于效率优先还是准确率优先。
适合左按钮的场景以效率为主,例如表单填写,本身就是一个麻烦的过程。为了减轻用户的焦虑情绪。让按钮和内容保持近距离的连贯性,可以让用户迅速完成当前工作。
适合右按钮的场景以确认信息为主,例如弹窗,本身是需要用户对内容进行确定的场景。所以按钮远离内容区域,通过鼠标移动距离来延缓操作。达到确认的目的。
输入框标签文字位置
适合在左侧的场景表单标签文字少于6个字,且不用考虑国际化,则可以让标签文字靠左或靠右对齐:标签短内容少使用右对齐,标签和框距离较小,较短视觉动线,明确标签和框的关联性,可提高填写效率;标签内容少,且安全性高,使用左对齐,叫长视觉动线会减缓填写速度,有利于提高准确性。
适合在顶部的场景表单标签文字超过8个字,或者需要考虑国际化的时候,标签文字内容会出现长短不一的情况,文字内容会有所差别。而文字在顶部就不会影响视觉,并能达到自上而下的预览,提高阅读效率的效果。
表单内容多基本属性及建议:能点击尽量不要输入和打字。合适的步骤拆 ...
用户体验地图
产品体验设计中,所有人都会说自己有同理心,能站在用户的角度思考问题,帮助产品打造更好的用户体验。其实动嘴皮子都容易,但如果能制作一份用户体验地图,带着调研数据,进行一次模拟的体验。可以帮助我们相对更准确的发现用户痛点、挖掘需求、脑暴产品机会点、高效做出决策。
什么是用户体验地图什么是用户体验地图,网上已经有大量内容阐述过了,这里还是简单带过一下。“地图”可以理解为实现某件事需要经历的“过程”。所以用户体验地图就是模拟用户在实现某件事情的过程中要经历的内容,把自己当作用户,以叙述故事的方式描述用户与产品之间的互动。
为什么要制作用户体验地图其实个人不是很喜欢这种形式主义的东西。但正如开头所说的,在人人都是产品经理的环境下,一份合理的用户体验地图能够拿出相对准确的结论,帮助挖掘需求和痛点。而不是动动嘴皮子高谈阔论的发表自认为站在用户角度的言论。说白了就是你如果觉得你说的合理,请在用户体验地图中和我BB,证明你至少走通过一次完整的体验,不然请闭嘴。当团队各个成员都能参与到用户地图中来,就能充分的达成共识。
如何绘制用户体验地图用户体验地图都长得差不太多,毕竟互联网行业 ...
C4D阿诺德utility着色器、Curvture曲率节点
阿诺德utility着色器和Curvture曲率节点都是非常重要和常用的节点。
utility着色器它的用途很广 比如输出多通道 调试场景等等。
着色模式:用于渲染网格组件(指模型的网格,建模就是建网格)的着色模式。Ndoteye使用视线向量模式进行渲染;Lambert使用简单的朗伯着色模式进行渲染;Flat将模型渲染为一个固态的扁平纯色色块;Ambocc使用环境闭塞技术渲染模型。不同着色模式:
【Ndoteye】使用一个介于normal向量和eye向量之间的点积;【Lambert】使用朗伯着色模式,默认着色模式;
【Flat】 将模型渲染为一个固态的扁平纯色色块(纯色,无明暗变化);
【Ambocc】 使用环境吸收渲染模型。当场景中100个单位默认值太短时,环境吸收会有一个距离参数(AO距离)控制Ambocc射线长度。
【Plastic】 同时具有漫反射(0.7)和镜面反射(0.1)。镜面反射硬编码使用MIS支持BRDF。这种模式在调节和优化光面材质时很有用处,使用简单的启动命令(kick commands):-is -sm plastic,就可以快速的分 ...
Arnold参数标签
阿诺德参数标签在c4d中使用频率非常高。今天介绍下阿诺德参数标签。
标签Show custom parameters - 显示自定义参数强制显示参数,用于当选中的C4D对象“未进行Arnold note化”的时候;例如,C4D当中对象不能直接编组,要利用Null(空对象),当Null未转为Arnold node的时候,添加Arnold Parameters Tag后参数会显示为禁用状态,启用Show custom parameters,即可转为可用状态;注意,Null添加标签后,如果其子对象没有自己专有标签,则都会使用Null的标签设置;如果子对象拥有自己的标签,则会优先使用,子级标签会覆盖父级标签;Arnold node type - 阿诺德节点类型定义阿诺德参数标签对象类型,会自动识别对象类型,当然也支持手动选择;User options - 用户选项支持自定义各类参数,比如定义对象ID等;功能很强大,但是需要一定的编码知识,利用这个选项可以访问很多隐藏参数,甚至可以自定义各项参数属性等(对于设计师来说太深奥了,此处省略一万字);Export user id ...
Figma轻松绘制腾讯大厂都在用的毛玻璃图标
新拟态、毛玻璃、3D等新风格已经有大厂运用在实际项目中了,这次用Figma制作腾讯云的毛玻璃效果。感兴趣的可以进腾讯云官网看看。今天绘制一个毛玻璃腾讯云图标。
绘制基本图形绘制三个圆形和一个矩形,并使用顶部的合并工具合并成云朵的基本形状
绘制底部云朵元素复制刚刚创建的元素并缩小,修改填充为线性填充并调整角度。渐变色值为#0053DA~#1D92FF
绘制毛玻璃元素选择第一个创建的云朵。修图填充为线性渐变并调整角度。渐变色值为#B1D3FF~#318BFF,将填充的整体透明度调整为20%,放置合适位置进行参考。接着添加边框色,修改为线性渐变并调整角度。渐变色值为#fff~#0358DD,调整渐变整体透明度为12%为了使毛玻璃边框光感再强烈一点,需要再添加一个边框色。同样修改为线性渐变调整角度到合适位置。渐变色值为#fff~#0358DD,其中第二个样式需调整透明度为36%接着调整第二条边框的整体透明度到30%。最后添加一个效果并修改为背景模糊(background blur),将模糊值调整为12。
完成最后添加白色矩形元素丰富图标就完成啦!
获取资源关注公众号:N ...