设计一个界面动效的时候，我们需要考虑什么？

鸿影：坦白来说，虽然我之前在项目里做过一些小动效尝试，但一直没有什么系统的方法和原则指导，大多在原型软件里凭「感觉」随意调调了事，而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践，对动效设计的价值、原则和实现交付开始有了更多的了解，在本文中浅薄地总结一下。明确价值：动效设计能解决什么问题？设计的本质是解决问题，动效设计自然也不例外，当打算

产品 2016年12月27日

即学即用，网页首屏页面 7 种吸睛的设计方法

是时候让我们来讨论一下关于网页设计的中的首屏页面的一些设计思路了。首屏页面是用户初步浏览你的网站所接触的“第一视觉”，它可以说是你的整体网站设计的门面工程了。无论用户是从桌面设备，平板电脑还是移动设备访问你的网站，所有内容都是在这个页面上会被集中体现。所以，你在这个“第一屏幕”中包含的信息是网站设计成功的关键。该设计关系到你的网页设计是吸引用户停留并做出你预期的动作，或迫使

产品 2017年07月02日

设计心得：如何提高验证方式的可用性

验证码的作用是什么呢？它有哪些类别？怎样平衡用户体验和用户帐号信息、敏感信息安全性之间的关系呢？本人做过一点通行证相关的交互设计工作，现在整理一下和大家分享，并和大家探讨如何提高验证方式的可用性。相信大家在进行“登录”、“注册”或是敏感信息操作时经常会被要求输入验证码，有些验证码很难识别，用户输入体验不是很好。下图是大家一直热议的12306网站的验证方式，故意的文字扭曲和低

产品 2016年11月10日

今天的扁平化设计中，值得注意的 4 个要点

扁平化设计本身在不断进化过程中，会在逐步根据需求和实际状况而进化，事实上它也正是不停地向着更实用、更有用的方向前进着。扁平化设计在过去的几年当中以惊人的速度发展起来，并且随着用户需求的变化而逐步进化。扁平化设计看似简单，但是其中分支多样，涉及到的技术多样，相关规范也都比较系统。到现在，扁平化设计所探讨的核心已经从最初的标准化设计转向如何创造视觉焦点了。所以，目前的扁平化设计

产品设计 2017年02月10日

如何巧用 SLOGAN，让 BANNER 变得更有设计感！

UI设计师在工作过程当中难免会遇到一些界面设计之外的细节，比如Loading动画，或是转场动画等，今天推荐的一个网站，就是一个Loading动画收集站，除了可以直接调用其中的资源之外。还能直接线上修改Loading效果。实乃UI设计必备之佳品。UI 动效设计灵感站：《让界面动起来！9个移动动效设计必备的灵感收集站》Preloaders的动画类别非常之多，可以看到除了常见的图

产品 2017年06月14日

动效丨七何分析法帮你全面分析界面动效

@十圆QCee ：以前在团队内部做过一个关于动效的分享，当时，是从现实参照、功能性、品牌，等维度进行分析。这次为了更全面的了解界面动效，我参考了5W2H分析法。5W2H又称七何分析法，分别是：What、Why、Who、When、Where、How、How much。WHAT什么是界面动效？大家对其的理解大致是，用户界面上所有运动的效果，也可以视其为界面设计（UI desig

产品 2016年11月30日

帮你搞定长滚动网页的设计最佳实践

长滚动页面和无限滚动式的网页已经彻底流行开来了，甚至可以说它已经脱离趋势，成为了一种常规的设计，它们的流行并不是巧合。当用户向下滚动的时候页面的时候，所需要的内容与信息会自然的呈现出来，在此过程中通常不会涉及到额外的、多余的交互。长滚动式的页面有着如下的优势：·更为精简的导航·更容易呈现故事，拥有吸引用户的潜质·与移动端设备的良好兼容性长滚动页面的流行和移动端设备的广泛普及

产品 2017年01月19日

浅析一个复杂页面的布局设计

很多产品的信息量很大，又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息，会让界面越来越凌乱。我从去年开始做的很多项目都是这种情况，于是总结了一套简单好用，又有理有据的为复杂界面设计布局的方法。为了方便大家理解，我使用Facebook首页作为案例。1. 把需要展示的信息都列出来先不考虑信息之间的关系和顺序，大致列出即可。主要信息一定要列出，优先级较低的信息

产品经理 2017年04月12日

阴影与层次：当现实世界照进UI设计

现如今UI设计正向着移除不必要元素并聚焦核心功能的方向发展着。核心功能成为当之无愧的UI设计焦点，视觉和细节的设计的重要性也日渐凸显，新时期里的视觉设计不仅要面对精简专注之后的需求，还需要提升功能的可用性。今天的文章当，我们我们就专注于探讨诸如阴影这样的视觉元素是如何帮助界面为用户呈现信息的。UI的进化：从伪3D到超扁平立体化的特效和拟物化设计，让界面产生了有纵深的感觉。用

产品 2016年07月24日

安卓界面设计学习：Material 产品图标的五个设计要点

今天又来跟大家分享一节非常实用的产品图标设计的要点和知识点。可以把这些知识应用到我们日常的logo设计、图标设计、图形设计上都可以的。那就是要学会解剖产品图标结构。 下面内容是摘录自Material Design 中文版。对于一个给定的品牌，在这些图标中，元素的一致性是形成一个共享视觉语言的关键。熟悉这些元素可以更容易地理解每个 logo 和它们之间细微差异的特征。它也将帮

产品 2016年11月23日