Catherine

Banner 是我们最常聊到的设计元素，它是一个网页的招牌，是用户最容易看到的视觉元素。今天，我们来聊聊Banner中的急先锋，网页首图，它的设计之道。

俗话说得好，“一图胜千言”。图片不仅要漂亮，还要够意思！

“最好的用户界面就是没有界面”——Golden Krishna“最好的用户界面就是没有界面”——Golden Krishna

了解食材是厨师的基本功课之一，了解器材是摄影师的基本功课之一，了解城管的时间表是卖热干面大叔大妈的基本功课之一，了解各个组件的设计模式和属性是交互设计师的基本功课之一。

去倾听用户真正的心声，才能设计出一款既能解决用户所担心的问题，又能让他印象深刻的产品。

一个完整的App包含很多页面，设计一个App是一个很系统的工程。笔者会陆续撰写，带着大家完整的学习设计App的过程。我们先从登录页设计开始学习。做界面设计前，我们先来理解一下界面的逻辑。“ It seems that green leaves look more beautiful after the rain “（雨后的绿叶看起来更美了）

QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长，我们对当前视觉提出一个疑问：现有产品的视觉形态，是否符合国际版的产品调性？基于这个问题，我们开启这次探索之旅。

这次的文章解决的是一个问题，主要是关于应届毕业生应该具备怎么样的能力才能从事交互设计工作。我从比较浅的入口切入，然后简单谈谈我的认识。（这篇文章会比较有趣）我努力工作，几年后要自己创业。吃得苦中苦，方为人上人。（鸡汤了一下）

随着网络传输速度的提升，视频在网页中的应用越来越多，也越来越广泛，带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升，在移动端网页中使用视频也并不显得吃力。所以，今天我们常常能在不同的网页中看到各种不同功用的视频。

用户体验设计的核心是用户，而用户是通过社交媒体相联系的，在设计app应用时，我们会更在意app内的使用，而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章，略显粗浅笨拙，如有不当之处请不吝指教。“来跳坑吧，下载我吧，打开我吧”！

扁平化设计本身在不断进化过程中，会在逐步根据需求和实际状况而进化，事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王，而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧？

在本文中，我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式（单色，相似色，互补色），不严格基于任何一种模式的自定义色彩组合，同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。

在上篇《实例分享｜在界面排版中，需要注意的七大原则（上）》大家了解了界面排版的前四个原则，今天接着将后面三个原则也分享出来。一、亲密原则
二、对比原则
三、平衡原则
四、相似原则
五、简洁原则
六、封闭原则
七、情感原则

做用户体验设计最难的是什么？「平衡」是我一贯以来的答案。在实际工作中，需要我们平衡的因素有很多，比如商业目标与体验目标的平衡、理性思维与感性思维的平衡、追求极致与关注全局的平衡、发散创新与克制专注的平衡、符合习惯与突破常规的平衡……一个好的用户体验设计师能够综合考虑到绝大部分情况，作出最适合当下产品的设计思考与决策，而不是理想化地沿着一个方向走到底。

在逐步的探索和发展过程中，动效在网页和APP中的运用方法与技巧已经逐步成熟，形成了一套相对系统的模式。今天的文章我们通过一系列实例，来展示一下动效是如何改善整个用户体验的。如果你无法将等待的时长缩短，那么尽量令这个过程有趣。动效让滚动式的交互充满了趣味。

随着新工具的发布，现有工具版本的更新迭代，2016 年显然是设计类工具蓬勃发展的一年。在本文中，我挑选了一些在 2017 年值得我们关注的设计工具。这些工具在设计工具类的社区中都拥有着大量的人气，所以挑选出来与大家一同分享。Have Fun！注：本文版权归原作者所有，仅用于学习与交流。

几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势，其实在年底就初现端倪，所以2017年大面积运用几乎势在必行，想不落人后记得打开阅读哟。

精美的动画对于提升产品体验有很大帮助，如促进用户理解功能，缓解用户情绪，调动用户积极心理，为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了，不少人已经开始越来越重视动效在产品中的应用了，还没有看过的同学不用急，谷歌官方的动效指南讲解得很详细，建议只看这个就够了，配合一些动画理解起来更容易。说明：

1.优化直播间分享面板，增加特效

2.当用户点击分享按钮时（*包括传统直播间主播面板的分享按钮和上方分享按钮，手机直播间的分享按钮*），从下方弹出分享面板，逐个弹出分享icon，并淡入显示分享奖励。

3.用户关闭分享面板时，分享icon从右到左依次下落淡化消失
相关参数：

1.分享面板减速弹出，运动时间225ms
2.分享icon从左到右依次弹出，运动时间225ms。带有奖励图标的，当对应分享icon弹出后，分享图标淡入显示（时间225ms），第二个图标比第一个迟100ms开始运动

eg：如图第一个为qq图标，当用户点击分享按钮，分享面板弹出后，qq图标开始弹出（时间225ms），100ms后第二个图标（qq空间）弹出，当qq图标完全弹出时，淡入显示分享奖励图标，时间225ms。
3.分享icon从右往左依次收回，分享面板收回，所有运动的时间减少30毫秒，如分享面板收回时间195ms，分享icon收回时间195ms。

andorid端动画曲线采用系统自带：AccelerateDecelerateInterpolator（在动画开始与结束的地方速率改变比较慢，在中间的时候加速）

iOS端动画采用系统自带：kCAMediaTimingFunctionEaseInEaseOut （在动画开始和结束的时候速度稍慢些）
具体效果可参考附件视频

本文作者是从一个工业设计毕业的学生，走过平面设计，做过UI设计，一步步转行到现在所喜爱的UX设计，并且一直处在努力开心地进步着的状态中。在本文中，也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。