设计文章

为什么需要动效落地？当你听到这些声音：希望你的动效快点落地、开发实现动效效果不好、你的动效到底怎么落地？你动效牛逼有啥用，开发不会做…… 所以要实现动效果落地。 文章目录： 01. 格式对比 02. ...

前言：设计师在接触一个新的业务领域时，会习惯性地通过竞品研究快速地了解行业，通过对比竞品快速地找到体验优化机会点。但B端产品具有专业性强、功能复杂度高和操作链路长的特点，即便有竞品可以对照，B端设计师...

前言：动效质感最直接的表现就是对动效速度与节奏的微妙把控。动效不仅仅炫酷有趣，能够生动的展示界面间的转换，还可以清晰地表达层级的关系，及时有效的界面内的元素。给用户带来自然、高效和顺畅的体验。有好的动...

写在前面，虽然这是一篇老文章，但是对刚入行的同学来说仍然非常重要，所以今天再次拿出来，进行了重新翻译，希望对大家有帮助！

前言：在市面上，大多数好的APP都可以看到细微的交互动效，动效设计已经是UI设计师必须会的技能，那么，APP动效设计如何做得流畅又实用？本文将分享UI设计师必须知道动效规则，并用”对...

什么是交互设计？交互设计其实是设计可交互产品，来帮助人们在日常工作生活中的沟通和互动方式。在本文中，我们将解释交互设计是什么，介绍一些有用的交互设计模型，并简要描述交互设计师通常做什么。

设计师制作完项目设计稿后都需要输出设计方案，很多时候设计师以为自己设计的作品已经非常美观，从视觉表现到细节元素、交互设计等等已经没多大问题，可以是在实际输出项目方案后，总是要反复地修改，到底是为什么呢...

前言：今年「B 端产品 C 端化」的概念很火，我觉得这应该算是一个成功案例了。

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio ...

随着设计工具的不断发展，Figma逐渐成为各大公司的主流设计软件。Figma强大的组件库能力，非常适合团队设计系统的建设与应用。相比Sketch，Figma在Auto layout、变体和实例等方面极...

前言：帐号作为用户身份在互联网产品中的投射，是用户在产品中重要的身份信息。我们可以通过用户的头像、用户名、挂件等快速辨识用户性格兴趣喜好等特征。在用户进行社交时，帐号头像是最直观、最快速的了解用户的方...

无论是国外还是国外，很多厂商都开始了智能手表的生产，然而这些智能手表设计对UI设计师来说是一次非常新鲜的体验，如果这方面设计有兴趣的同学可以看看本文，进一步了解智能手表的交互及设计。 圆在日常生活中比...

前言：目前我们已经在Sketch工具上实现了Libraries云端设计库的工作方式。我们挑选在Sketch工具上做云端设计库的原因是：目前我们团队做界面设计比较多，且Sketch的插件能力比较丰富，设...

当我们设计Web表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。 例如：在表单界面Label（标签...

原研哉在他的《设计中的设计》中有介绍过这样一个案例：日本机场原来是用一个圆圈和一个方块表示出入的区别，形式简单并且好用，但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章：入境章是一架向...

在上一篇文章中，我们讲述了字体渲染机制和导致iconfont出现锯齿的原因，以及如何才能出绘制高质量SVG ICON，并且提供了一套AI模版供大家参考使用。下文将讲诉前端侧我们如何用SVG来做成高清I...

作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就...

承接上文《玩转HTML5移动APP页面（动效篇）》，上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发...

前言：通过百度直播平台案例，向大家分享设计语言的构建思路。 什么是设计语言？ 设计语言是把设计作为一种“沟通的方式”，在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术，是需要理性...

字体来源及授权：//github.com/Skr-ZERO/MaokenAssortedSans 猫啃什锦黑是一款可爱的马克笔手绘风格中文免费商用字体，其笔画活泼有趣萌萌哒，特别适合做可爱类...

在 Nuxt 生态里，想要更快落地一个高品质网站或后台系统，“模板”往往是最高效的起点。近期官方免费推出 Nuxt UI v4 生产级模板合集，覆盖落地页、文档站、作品集和仪表盘四种核心布局，并且...

在 Figma 设计中，“固定形状难调整、自定义变形操作复杂” 是设计师常见痛点 —— 想让矩形呈现自然弧度、让文本贴合曲线轮廓，传统方法需手动添加锚点反复微调，耗时且难保证效果一致性。而 Figma...

Figma作为一款强大的在线设计工具，凭借其协作能力和跨平台特性，深受设计师喜爱。然而，由于界面为英文版，部分用户在使用过程中可能会遇到理解障碍。为此，FigmaEX插件应运而生，它不仅实现了Fi...

一、工具概述 Text To Svg 是一款面向设计师与创作者的轻量级在线工具——把任意文字快速转成可编辑的矢量路径（SVG）或 DXF 轮廓。它免安装、免注册、响应快速，适合需要把字体转为矢...

对于设计师来说，将 PNG、JPG 等位图快速转换为可编辑的矢量图，一直是一项高频需求。如今，Quick Trace 插件让这项任务变得更加轻松高效。这款由开发者 Rancho 打造的 Figma...

淘宝买菜营销体 是一款由阿里巴巴旗下淘宝买菜携手通义锦书倾力打造的个性化AI字体。这款字体最大的特点在于它结合了AI技术，赋予了字体独特的质感和生命力，使其在众多字体中脱颖而出。 主要特点： AI个性...

动效是用户体验的重要组成部分，也是产品调性的重要体现。如今动效设计也有了更多的解决方案，如 Framer、Principle、Flinto、Protopie 等，这些软件在制作交互原型时，确实有更轻量...

设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。导航菜单就是一种交谈。因为如果用户不明白使用方式，你的网站或app再漂亮都没用。

在交互设计领域有很多经过时间检验过的定律及法则来作为设计的指导原理，它能够帮助产品设计者对界面上的各种视觉元素进行合理评估，从而发现一些使用过程中的可用性问题，还可以根据这些法则从界面的维度来改善操作...

在视觉美学与 AI 设计融合的浪潮中，一套由设计师通过 AI 生成的“液态玻璃应用图标” 成为了新的焦点。这套图标以未来感十足的 OS26 玻璃风格 为灵感，结合光影反射与透明质感，呈现出极具现代...

UI或UX分析需求主要是以人机交互界面为主，而这个需求不仅仅是一些设计、视觉使用体验，在这里体验当中，我们可适当运用一些心理学，比如格式塔理论就是一个很好的分析法。

空状态，或零数据状态，比如网站购物车为空时、页码没有下一页、某页面出错或不存在等等这些都可以称为“空状态”，但这个很多时候被设计师忽略，我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善...

这是刚在 Dribbble 看到的一个创意作品3D Waggle，该作品展示了一个手机APP的拖拽交互动效，其效果就像纸粘在手指上，随着手指不同方向移动，这个像“纸”一样的UI元素也会跟着飘动，而且效...

前言：这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。

今天分享一个元素周期运动表，这个并不是化学元素，你可以理解为「元素运动规律」，因为这个元素表是由一些常用动效组成，并且每个动效的实现都有一个理论依据，而不是凭空想象出来。动效有弯曲、偏移、流动线、噪波...

AV8D，又见面了，在此之前，和多位同行有过沟通，发现很多人反映自己的基础不太扎实，没有系统的知识体系支撑自己进阶、转岗。这让我产生了反思，所以这段时间梳理了一些关于交互设计师的知识架构，这也是我今年...

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书...

发展电子商务已经不能仅关注桌面平台了，目前越来越多的用户通过智能手机来发现和浏览商品，与此同时，一个更大的问题产生了——这些用户是否愿意在他们的移动设备上完成支付呢？——答案马上揭晓。拿美国为例，20...

无论是注册流程，多视图步进或单调的数据输入界面，表单都是数字产品的设计中最重要的组成部分之一。本文重点介绍了常见的表单设计样式和要避免的注意事项。但请记住，这些都是一般准则，每一个规则都有例外。 1...

项目背景

目前来说网站交互应用很重要，交互是否做得好直接影响到用户体验，现在国外的交互做得非常好，下面列举一些网站的交互例子。

前言：落地页的每个元素都必须有它存在的目的，不能只是看起来很不错——它们必须是经过深思熟虑且有战略指向的。当我们追求为用户创造更新颖、更沉浸的交互体验时，有时会忽略那些能保障落地页高准化率的设计要点...

点击蓝字关注我 一个爱代码的设计师在运营,不定时分享干货、学习方法、效率工具和AIGC趋势发展。个人网站：tomda.top 在设计工作中，拥有丰富的素材资源库是提升效率和作品质量的关键。以下是16个...

最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。 什么是弹框? 弹框是一种交互方式，用作提醒，做决定或者解决某个...

随着市场观念的变迁，营销从“产值中心论”进入“顾客满意中心论”的阶段，设计也从创造“产业价值”发展为创造“用户价值”，创造“顾客满意”。

一个新的设计风格的确立一定会提出他特有的设计原则。而如今设计原则越来越多的关注到了动效的定义。甚至在Android L的Material Design中直接将动效写入的设计原则中：Motion pro...

一次升级、引入新功能或者开始营收变现后用户反而流失了？是不是产品和用户的沟通出现问题了？看看你的产品与用户的沟通是如何设计的吧。今天设计达人和大家分享应用与用户沟通的最重要途径——消息通知。消息通知是...

如何通过区分两者来完善两者

扁平化的兴起，现在越来越流行动效设计，特别对于移动端，对交互动效要求是很高的，今天为大家整理一些以展示动效为主的网站，对交互设计师来说是很好的灵感发源地。

现代智能手机给我们提供了非常多丰富实用的功能，比如平时颇为在意金钱去向的我，就是一个 手机记账 App 的使用者，曾经尝试过各种记账 App，但好像都有那么一点不满意，于是我就想如果是我来设计这么一款...

设计并不是随心所欲，也不是每时每刻都需要创意。你需要一个向导为你指明方向- 这就是原型。 什么是原型？ 原型可以概括的说是整个产品面市之前的一个框架设计。设计师可以利用它引导每个人都参与到项目中来...

一、为何设计系统迎来关键更新？ 随着设计、产品、工程与 AI 模型之间的界限日益模糊，设计系统不再只是静态的组件库或样式指南，而成为团队、平台、智能体共同使用的“活系统”。Figma 在其设计...

iOS7在UI界面设计上最大的变化就是抛弃了苹果使用了多年的拟物化设计，而转投扁平化设计阵营。一时间，业界评论褒贬不一，槽点多多亦不乏溢美之词。我们先暂且不去评判新的图标和整体设计风格的好坏，而是从其...

互联网时代，网络“提速”日益频繁，人们打开Web或软件的速度越来越快，一般页面缓冲和加载地过程也是几不可查。然而，在某些情况下，例如软件急需加载大量页面，首页急需加载大量内容，用户下载文件过大，甚至是...

功能性动画（functional animation）是一种微妙的动画，有着明确、合理的目标。它能减少认知负荷，防止变化视盲，在空间上营造更好的印象。但还有一点，动画让用户界面鲜活起来。

过马路的时候突然注意到红绿灯，恰好最近的新交通规则也热火朝天，就顺势吐槽下关于“设计规范”的思考。

一直有不少人讨论UI和UX到底有什么区别，这大多数是入门设计师的问题，而这个问题的存在是因为入门级设计师往往只能进一些小公司上班实习，小公司一般只有设计、前端、程序几个职位，什么 UE,UX,IxD...

前言 为了优化产品，提升用户体验，产品团队经常做很多事情：数据监测、数据分析、竞品分析…然后给交互设计师提需求，让交互设计师把需求转化为可用的功能和良好的体验。

译者注： 本文作者从自身丰富的应用开发设计实践经验和大量的优秀应用实例中，总结提炼了从产品概念、设计、开发到市场推广等一系列的相关原则，指导移动开发人员怎样来打造一款成功赚钱的应用。姗姗来迟的这篇文章...