经验分享 - 最美UI

这些小小的改变，能够让UI动效更上一层楼

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分，经过仔细打磨的 UI动效对于整个界面的提升是显著的。

UI动效动效设计用户体验经验分享转场动效

用一篇文章，帮你掌握基础实用的动效技能

对如今的 UX 设计师来说，会点动效基本已是常规操作了。作为 UX 设计师，动效可以辅助的产出可以涵盖界面交互动效、项目宣传 MG动画、产品吉祥物表情包、年终汇报 PPT 等等。这些技能点虽然广，但是只需要掌握基础

AE动效 UI动效动效动效设计教程经验分享

在制作 GIF 图片的时候，这10个注意事项帮你做得更好

这是一个什么都在变快的时代。在互联网上，一切都开始动起来，短视频开始流行，而 Gif图早就已经像病毒一样占据了网络的每个角落。用户用 Gif图来传达信息，来表达情绪，甚至记录生活。怎么能不爱 Gif图呢？

GIF录制经验分享设计技巧

超全面的 APP 动效设计必备知识总结

如今丰富细腻的 App 动效遍布移动端优秀应用界面中，为用户提供了良好的动态沉浸式体验，动效设计在产品研发过程中也越来越被认可和重视。

交互体验动效动效体验经验分享设计用户

终极指南！超全面的UI动效基本规则总结

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯，交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言，都是一个不可多得的重要组成部分。但是当我浏览相关的文

动效设计微动效经验分享转场动效

这个「以用户为中心」的图标设计法，恰好很多设计师不会

@Daidai丶呆：今天这篇文章的内容虽然较短，但是意义却非常深刻，值得各位 UI 设计师细品。

logo设计图标设计实战案例用户体验用户研究经验分享

如何系统学习功能图标？来看资深设计师的全面总结！

一、图标的定义 1. 什么是图标图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。

ICO 图标图标设计经验分享设计规范设计风格

两分钟认识一款优雅的图标管理工具：Nucleo

徐小马：在互联网产品的设计工作中，无论是参考、拼稿还是搭建中低保真原型，设计师时时刻刻都会用到图标，然而，如果不对不断收集或制作的图标加以管理，那么在查找使用的时候会非常低效。为了解决这个问题，笔者给

图标管理效率工具神器下载神器推荐素材管理经验分享

腾讯设计师：如何系统地设计界面图标？

文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。

icon图标图标图标设计经验分享

15年图标设计经验，总结出1套专业流程和8个注意事项

我们每天都在设计图标，并且保持这样的状态超过15年。身为设计师，想必你已经阅读过很多关于图标设计的文章，但是今天的文章不一样，今天我们的文章不会花费很长时间来单独介绍某一个图标的设计，而是设计任何一套图

icon8 图标设计经验分享设计流程

一组图标做出9个风格，实战案例让你也能学会

在前边的文章中我们已经全方位立体式的讲解了系统图标的相关知识点。即讲到了系统图标的设计风格，也讲到图标设计的栅格体系。之前我们都是纸上谈兵，那么我们今天就来实践一下，毕竟实践才是硬道理。

Icon设计图标设计图标风格经验分享

用品牌基因法，三步帮你搞定图标设计！

@Jenny黄静雯：相信很多同学会有，看理论的时候觉得很有道理，看完后却不知该怎么实践，久而久之便会产生「看过很多设计理论，却仍做不好设计」的困惑。今天静雯就来带你从理论到实践，用菜心设计铺的《用品

icon图标品牌品牌基因法品牌设计图标设计经验分享

设计图标的时候，一定要抵制住这6个诱惑！

所有伟大的图标都是一样的伟大，所有失败的图标都玩着不一样的戏码。和绝大多数优秀的设计一样，最优秀最伟大的图标大多是……隐形的。

logo设计图标设计经验分享

最出彩的APP图标，都会经历这样9个关键设计步骤

对于移动端APP 而言，图标始终还是最重要的「门面」，它直接关联着产品的品牌价值，图标是否具备良好的可用性，将会直接影响到品牌和产品本身。图标设计的讲究很多，而 APP 图标这种牵一发而动全身的东西更加讲究。今

logo设计图标设计经验分享

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

我在上一篇文章《动效设计没那么难！让谷歌动效设计师带你入门》当中，已经通过实际的案例，分享了动效设计并不难的原因。我们着力推动 Material Design ，我也希望设计师能够更好地使用我所熟悉和喜爱的 Material

AE动效 Google Material Design UI动效动效设计动效设计培训

超全面的图标基础知识总结

图标的分类和风格有很多种，而设计图标的时候，如何才能抓住用户的眼球，设计出自己满意的图标呢？

icon图标入门图标图标设计图标风格线性图标经验分享

苹果Emoji 设计师：几百个风靡世界的表情是如何创作出来的（有彩蛋）

编者按：对于千千万万的iPhone用户来说，手机里面的那些可爱的符号表情肯定耳熟能详了。但是你知道其中的一些emoji是怎么来的吗？第一批emoji的设计者Angela Guzman分享了她当年在苹果当实习生时创作这些表情符号的故

emoji表情经验分享表情包设计流程

UI 新手福利！iOS系统图标栅格系统全方位解密

今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知，在图标设计中都会使用统一的系统图标栅格系统。那么iOS的系统图标的栅格系统如何定制呢，这篇文章就来独家揭秘iOS系统图标的栅格系统定制的奥秘。

IOS ui设计入门栅格系统经验分享

高手说我的图标不止好看，还有这4个作用！

「界面中存在的每一个元素，都是有意义的。」这是我进行产品设计时的一贯主张。

icon图标图标设计经验分享

想整合出一套统一的图标，这些技巧不要错过

找图标这个事情，对于设计师而言，其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载，而且设计师自己改和设计都不是什么大事。不过，这当中涉及到一个非常现实的问题。

icon8 图标优化图标设计经验分享

如何画好一组线性图标？来看这份新手科普总结！

画过不少图标，也总结了很多大神的方法，在此归纳一下简单的图标画法，希望对大家有帮助。作为一名 UI 设计师，必须要重视 icon 的作用，首先是需要大量地练习，其次是尽量不要一遇到画图标的时候就随便在网上下载，

icon图标 ICON教程图标设计线性icon 线性图标经验分享

如何绘制功能性图标？来看资深设计师的全面总结！

想想图标的绘制也是有历史的，从刚开始 ps 用面切法运用布尔运算去切，有时候线条也是用面切面得到。随着线性图标的火爆和普及，开始放弃面切法，转用钢笔工具直接绘制，还可以很好的控制线的直角和圆角。当你会使用

PS 教程图标图标设计教程经验分享

动效设计没那么难！让谷歌动效设计师带你入门

编者按：UI中动效设计本没有那么玄乎，作为 Google 旗下 Material Design 团队中动效设计的负责人之一，Jonas Naimark 对于动效本身有着更为透彻的认知，这也促成了今天的这篇文章。动效不难，想入门很简单！

AE动效 Material Design 交互动画加载动画动效设计经验分享

你设计的图标，能顺利通过图标的可用性测试吗？

在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现一些拿捏不定的设计细节。比如，试图推出某个新功能时所设计的图标，它的应用效果如何？如果你还在头疼诸如

可用性测试图标设计用户测试用户研究经验分享

正在疯狂流行的等轴测图标，千万不要错过

图标是几乎任何网站都需要的重要组成部分，无论是用来传递信息、导航还是用来装饰，图标和类似图标的元素都是一种富有吸引力的有趣的功能性元素。

图标设计等轴测图标经验分享设计趋势

首度揭秘！春节期间滴滴地图小车图标的换装设计过程

如何为创意插上理性的翅膀，滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。

交互设计情感化设计用户体验经验分享节日主题设计

搞懂这7个图标设计原则，你就能像专业图标设计师一样

编者按：设计原则总是看起来简单抽象不言自明的，但是在细分的设计领域，这些原则其实有着各自不同适用情况，有着「特定的条件」。图标设计，就是如此。今天的这篇文章，来自专业的图标设计师 Helena Zhang，她结合

免费图标图标下载图标设计经验分享

用好黄金比例，用协调自然的配比照亮你设计的UI

UI界面是否设计得足够清晰，各种元素之间是否协调、平衡，用户能否轻松感知到屏幕上的信息，交互是否顺畅舒适，这些因素决定了整个设计是否有效。

Tubik Studio ui设计经验分享黄金比例

实战案例！新功能引导页设计思路总结

Darren大人：总结了一套引导页的设计思路，希望自己在新的一年能多学习总结，在这里和大家分享交流，大家也可以提出问题和建议。

2.5D 引导页设计经验分享

掌握这6个关键点，你也能制作出系统而专业的设计指南

设计指南是最大程度提升设计团队输出效率和确保品牌一致性的核心工具，成功的设计规范并非一蹴而就，需要注意的问题并不少。

经验分享设计指南设计标准设计规范风格指南

我们用这个设计方法，从零开始做出了「轻芒杂志」

@Fornever ：豌豆荚在 2011 年引入了 Design Workshop 的方法论做产品设计，并使用这种方法设计出了如豌豆荚 2.0 的 Windows 端和 Android 端、豌豆荚视频搜索等产品。后来拆分出来做轻芒的团队也是通过 Design Wor

用户体验用户体验设计经验分享设计流程

腾讯设计师：极速适配 iPhone X 的技巧揭秘！

有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！

H5页面 iPhone X 经验分享页面适配

如何用另一个角度做设计？来看Airbnb 这个创新方法！

如何构建一个完整的解决方案呢？学会提问，学会多角度看问题，可以帮助我们构建一个完整的方案。

经验分享设计师思维方式设计思维设计方法

那些特别好用的App是如何设计的？首期揭秘：网易蜗牛读书

由于工作需要，手机里安装了N个应用，但是常用的都是那几个。常常是工作中遇到具体问题了，才会翻看好多App参考，觉得自己脑子里的「存货」太少了。希望自己在体验App的时候不仅仅是在「看」的层面，而是可以更深入地

App分析 App设计用户体验经验分享

这9个方法，帮你搭建更加高效的视觉层次

视觉层次是塑造优秀数字产品的基础，它能让内容以更加有效的方式被组织到一起，使其更容易被理解。视觉层次对于用户体验的影响很大，信息的组织架构是否清晰直观，将直接影响到整体的导航和浏览交互。

层次感经验分享视觉层次

如何做好一个搜索体验流程？看这篇超全面的总结！

随着我们产品承载的内容越来越多，搜索功能在大多产品中都成了一个必不可少的功能。最初我们在看搜索框的时候，都会把它当作是一个常规的UI控件来对待，但随着我们对产品的用户体验越来越重视的情况下，搜索框在设计

搜索框设计用户体验经验分享

想做APP 改版练习，这儿有高手的15个经验总结

提到这个话题有两层不同的讨论方向，在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以后者为出发点进行讨论，其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方

App设计 UI设计师作品集设计改版设计经验分享

接到了一个小程序的设计私单，和App设计一样吗？

微信的最近一次更新，小程序入口变浅了很多。最近使用的小程序，被放置在微信打开后初始页面的下拉菜单中，而且给的下拉栏空间非常充足。为了培养用户使用小程序的习惯和让更多人了解小程序，微信开发团队还推出了「

ui设计微信小程序经验分享腾讯微信

让APP中内容呈现更友好易用的5种常见导航设计模式

在设计移动端APP的时候，最重要的一点是确保界面和交互足够有用又清晰直观。如果这两个基本的特征都无法达成，用户是没有足够的理由来使用它的，更不用说额外的价值体现了。不过，在确保可用性的前提下，学习曲线太过

App设计导航设计手机APP设计用户体验设计经验分享设计模式

聊聊市面上的「真伪」设计系统

原子设计系统（下均称为设计系统）这个词应该已经流行很久了，像蚂蚁金服最近出的 Ant Design 3.0 也说是基于「设计系统」进行构建的。如果你没有了解过原子设计系统，那么我建议先去对原子设计系统做一个初步的了解

界面组件组件化设计经验分享设计系统

设计节日闪屏？收下这份超全面的知识点总结！

@Jenny黄静雯：节日闪屏的呈现虽然只有一个画面，但了解设计背后的来龙去脉，才能让设计有根可寻。

情感化设计插画设计经验分享节日主题设计闪屏设计

春节专题！App 设计系列之切图的命名规范与标注说明

写这篇文章也是总结了以前刚接触的时候遇到的问题，还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文，看不懂，让很多人望而却步，当你有所了解之后，你就会发现其实没那么复杂。本文主要为了给

切图工具切图标注命名规范经验分享设计标注

不谈历史谈当下，QQ与微信的区别是什么？

对于 QQ 和微信进行分析以及学习已经是不少产品经理的必经过程了，就和 hellow world 一样拥有一定的仪式感。此外，面试中这个问题也会冷不丁的冒出来。今天，作者将对这个问题作出自己的回答。

App分析 QQ设计产品分析商业需求微信设计经验分享

这篇分析iPhone X 转角细节设计的文章，收获了15000+个赞

iPhone X 发布后，很多设计师吐槽屏幕的形状。当大部分的吐槽逐渐平息下来，我依然没看到关于屏幕转角细节设计的讨论。

iPhone X iPhone X转角细节经验分享

如何找到改版的切入点？我用「品牌探索」这个方法！

@菜心设计铺：前几天做了《暴风影音 App 重设计》，不过还没做完，所以今天主要讲讲我寻找改版切入点的方法——品牌探索。

品牌品牌基因法品牌设计图标优化图标设计经验分享

关于像素艺术中的等距图形，这份总结超全面！

什么是等距图形？等距图形的发展历史？如何快速做出等距图形？这篇总结全都有了！

2.5D Affinity Designer 插画设计等距图形经验分享

新人想要入场视频类H5 设计？你需要了解这些

网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式，但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后，想要继续通过视频类 H5 争夺用户注意力，变得越来越难。

H5 H5页面 HTML5 html5教程交互设计广告设计

超全面的移动端顶部栏设计分析

王M争：我最近在做改版设计，所以很长时间没有更文了。期间遇到了很多问题，其中一个就是顶部栏配色，后来我索性就针对移动端顶部栏设计做一个总结，在这里分享给大家。

Tab ui设计经验分享顶部栏