新拟态主题是一种图形样式,其原理是为界面的UI元素赋予真实感,简单来说就是一种类似浮雕的效果,介于扁平与投影之间。
新拟态风格常见的处理方式:
1、左上角亮色投影,右下角深色投影(有且只有一个光源照射)。
2、元素与背景对比度比较弱。
3、常常用于按钮组件和卡片。
4、按钮状态,视觉上凸出代表未选中,凹进去表示已选中状态。
拟态主题推荐:
给大家推荐一款新拟态主题,白如雪。
新拟态的一个设计风格特点,就是低对比,弱对比,从而带来界面柔和。但是容易出现没有什么辨识度的感觉。
而白如雪这款主题做的就很巧妙的避免了这个问题,不论是卡片的塑造还是整个界面的布局,都恰到好处的感觉和美丽。使用过程中,意外的简洁,白色的背景,稍加点缀,就宛如白雪一般干净,看着也是满满的享受。
白如雪给人的感觉不仅仅是有着精心雕琢的新拟物风,还是一个感觉精心定制的精品,使用过程中带给了很多惊喜,并且在对比现在扁平化风格主题下,这种新拟态风格的主题一定会给使用者有一种别样的体验。
DevDocs将不同语言、框架和库的AP都I汇聚到了一个网页上,你可以直接在一个页面进行搜索。
这个网站能够让你生成十分漂亮的代码片段的截图,它支持暗黑模式和各种预设的语言主题。你也可以使用它的VSCode扩展插件。
该网站能够基于Twitter、LinkedIn和Shopify三个社交媒体网站的网页链接生成图片。并且提供了十分漂亮的样式和主题可供选择。
这个网站提供了一些可供开发者参考的学习路径和学习资料,这对于想学习某一个技术领域的初学者来说十分有帮助。
LambdaTest是一个基于云的跨浏览器测试平台。它提供多达2000多种不同的浏览器、操作系统和设备去测试你的应用。你可以很好的使用它去自动化或者手动的去测试你应用的浏览器兼容性问题。
通过daily.dev这个网站,你可以找到适合每天阅读的优秀的技术文章。这个网站聚合了各类不同平台的优秀技术文章。你可以安装他们的浏览器插件,这样就能方便地将优质的技术内容直接更新到你的浏览器上。
Showwcase是一个专注于开发者、开发社区和开发者寻找工作机会的新社交媒体。它的设计理念有点像领英,但是它只是专注于开发者领域。
你可以从这个网站上学习到各类CSS的技巧,以此帮助你开发更加漂亮的Web应用。
Medusa 是一个开源的 Shopify 替代品。能够帮助你快速开发E2E 订单处理和商品管理界面等。关键的是,Medusa免费!
为什么你还要花时间学习Photoshop? Smartmockup能够根据你上传的图片(产品素材),直接在网页上生成高分辨率的产品模板(例如将你的产品显示在T恤、水杯和电脑屏幕上)。基于web浏览器的方式,Smartmockup的专业模板素材在一直增加,你无需任何设计经验就能获得专业的模板。
在网页上美化你的代码,并且该网站提供了一系列开发者经常使用的工具(有点像站长工具)。但问题是该类网站的广告都比较多...
对于开发者来说,overAPI绝对是最漂亮和实用的网站。它聚合了大多数开发语言和工具的API,并以一页备忘录的形式展现。快去看看吧~
这是一个基于开源项目的网站,它能够将各个设备屏幕展现在同一个页面上,能够让你非常方便的开发响应式网站,大幅提高前端开发的效率。
一个可以让设计人员和网页开发者选择优秀配色方案的网站。
如果你喜欢拟态类风格的ui那么这个网站一定能帮助你。
你在做布局或者在做ui时有穷头陌路的时候,希望这个ui主题网能给你一些灵感。
和ray.so一样,这个网站也提供了代码片段生成图片的能力。
这个网站对于需要进行国际化开发的前端来说十分重要,国外的Google、Facebook或LinkedIn等社交媒体提供 了一系列的 标签,当你的网页被检测到对应的 标签时,在这些社交媒体进行分享或者展现你的网页时,会提供额外的能力。这个网站就能够自动生成这些 标签,并且能够直接在网页上预览在不同社交媒体上的展现方式。
作为开发者,你在为你各个社交媒体上的头像发愁吗?这个网站能够根据你上传的任何图片,自动的生成头像。这些头像都是经过AI处理后并生成了背景的,快尝试看看吧~
这个网站提供了一系列开发者经常使用到的工具,例如Base64编码/转码、代码格式化、图片压缩等功能。最关键的是,这个网站很清爽没有广告!
该网站可以让你创建高质量的简历。它将通过为你提供经过优秀的模板,来帮助你创建专业的简历。去试一试吧~
CodePen 是一个基于 Web 的开发平台,允许用户在网页上编写 HTML、CSS 和 JavaScript 等前端语言。并且它是实时可见的,这会使故障排除更加容易。开发人员和设计人员还可以与世界其他地方交换代码示例。
Strorytale是一个收集插图的网站,这些插图可以被用于商用和个人用途(需要开通会员下载)。合理使用插图可以丰富你的网站元素,这对网页设计者和前端开发者很有帮助。
该网站能够让你非常轻松的创建项目的README。使用网站提供的简单的编辑器能够快速的添加你README所需要的模块。你可以使用这个网站为你的项目快速创建文档。
Peppertype这个网站能够帮助你快速的生产和构思内容。它分析你的业务、品牌和目标受众,然后使用机器学习和AI人工智能为你创建新鲜内容。
Synthesia 可帮助你以 50 多种语言创建基于 AI 的视频。你不需要相机、麦克风或真人脸来创建视频内容。你只需要上传你的脚本,你就会得到一个 AI 真人视频,非常适合不想露脸的视频创作者。
这个网站提供了很多编程和开发人员的笑话,你可以看看当做 娱乐 ~
设计师引领变革,每年都会一些新的设计手法被优秀设计师们发掘出来,一般在综合类网站如dribbble和behance上先火起来,受到大批设计师的追捧,比如前不久兴起的新拟态风格,和越来越多的3d插图等等。▲尤其3d插图是今年比较流行一种手法,运用这种立体元素来营造整体的视觉空间感,这种形式能很好的和其他产品拉开差异性,同时更好的传递信息,但是需要注意这种风格和页面其他元素之间的协调性。▲包括根据内容定制的扁平插图,设计师通过这种轻快的色彩,让整个设计活泼轻盈,同时更符合当下年轻人群的审美,这些风格也大多数能从设计网站上感知到总之,设计风格需要我们定期去归纳和总结,需要我们在平时看设计时候,多留一分洞察行业变化的心思,提炼出趋势运用到我们设计里面去,关于更多的设计趋势可以去我Pinterest看,我会定期总结分享出来的!▲https://www.pinterest.jp/uiskys/boards/ 泡沫和斑点风格 前面我们分析了:趋势的由来,一般是由国内外知名公司比如苹果,谷歌,或者知名产品淘宝,天猫双11等等通过影响力带领,那么另外一种就是设计师发掘的,本周和大家分享:泡沫和斑点的设计风格,为什么叫泡沫和斑点,其实是我虾扯蛋取的,叫什么风格,自己定义为什么趋势不用太在意,你能GET到那个风格代表的核心元素和含义就行这种风格运用很广,无论在平面设计,还是UI设计、插画设计中,最近都频繁的出现,我们今天就来分析下这个风格的特点? 它的特点 随机形状在形状上,没有明确的特点和规律,都散落在界面的各个角落,图形大多是圆形,也有流动的不规则图形,他们都没有绝对的规律,排布也很随机,质感上则扁平,立体,渐变都有,看起来特别像我们生活中常见的气泡。▲Wed ze这个网站就是运用这种椭圆流动的气泡,让整个页面形成一种流体风格,动感同时也很时尚,很能体现出产品AR/VR的行业特征▲同样的Scotsman这个网站同样运用气泡来布局,通过气泡很好的散落在画面两侧,配合微动效,整个页面更加的灵动和有趣,同时画面中间也是利用了这种气泡风格来突出焦点▲sweet同样采用了流动不规则气泡作为整个设计主风格,流动同时很时尚▲液体动态汇合,透过气泡融为一体,形成和水一样灵动自由的效果 多元质感立体:质感上有很多表达形式,可以运用C4D做出这种立体糖果色,它使得整个视觉风格比较突出,画面冲击力强,适合运用在一些重视觉偏营销的场景下扁平+色彩叠加:除了立体质感风格,扁平化和色彩叠加也运用的比较多,色彩更为通透,整个画面节奏也更容易把控,配合动效视觉效果更佳渐变+微质感:和扁平叠加风格不同,微拟物结合一些弱投影和渐变撞色让整个设计看起来更加的现代图案填充:这种效果比较特殊,在圆角气泡里面填充图案,图形,整个设计会瞬间提升潮流感。 明亮色彩在色彩上,这种风格色彩比较明亮,类似马卡龙配色风格,这样配色更能凸显它的多变和丰富多彩,当然同色系的搭配,也能表现出官方,科技感的一面▲比如上图对于橙色的运用 运用场景 对设计趋势关注的最后,我们一定要去思考落地;否则就很不能算已经掌握了这个趋势。网页中的运用网页中,气泡可以作为构图中心,通过构图形式很好的融入这种风格,也可以作为产品类型网站的装饰性元素,使页面更丰富有趣的 界面中的运用界面中,可以作为动态导航,或者菜单来设计,让整个产品调性更加年轻化,通常作为个性化的表达在一些动态可视化,或者智能场景中运用,或者在一些特殊内容表达上运用这种布局形式,和内容很好的形成一种互动作为界面中的DNA,比如上图就是运用气泡作为设计DNA在启动界面和登录页面都运用气泡到极致 其他场景除了在网页运用,其实在平面设计,LOGO设计,插画设计中,这种气泡风格,也同样适用,关键在于我们如何去灵活搭配组合。 总结 今天的分享,更多只是抛砖引玉,希望大家养成这种培养视觉洞察力的习惯,去发现一些设计行业的规律,并学会掌握规律的变化,这样才能让自己的设计不断进步,做出让人亮眼的作品!加油!