图标

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

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

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

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

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

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 （在动画开始和结束的时候速度稍慢些）
具体效果可参考附件视频

从接收需求到产出？这过程中到底经历了什么？不妨来阅读本文作者的文字，一起来了解了解吧～【需求概述】
商品，增加商品类型，分为普通、赠品两种。赠品可下单购买，也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别，设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品，配赠条件满足时，在支付订单前提供选择赠品操作，代理可选择配赠金额范围内的任意赠品，也可不选择；选择赠品，并支付成功后，对应订单增加配赠商品信息。
注：配赠金额=订单面价金额×对应等级配赠率。目标用户：某护肤品牌微商代理
年龄：18-40占绝大多数
性别：女性占98%
职业：微商
设备：iphone及以上
场景描述：某天，代理a在清点仓库库存的时候，发现最近热销的某品牌商品库存都不多了，想着，到时候缺货会影响自己的销售及客户的满意度，暗想着，要再进些货才行，于是她对库存不足的商品进行了一下盘点，盘点完毕后，她拿出手机，将需要订货的商品一一加入购物车，加入完毕后，她核对了一下商品的金额，正准备点“支付“按钮进行付款，忽然看到付款按钮上方有一条提示，说”还差500元就可获得免费赠品“，她心一动，反正要买，只要加500块钱，就能免费获得赠品，有何不可？于是她当即便在某一商品下面增加了数量，满额后，提示文字就变成了”可获得免费赠品“，确认金额后，她立即点了支付按钮，来到确认订单的页面，快速浏览了一下自己的收获地址及信息，便赶紧看获得什么样的赠品，果然，在支付的上方又看到了配赠说明的提示，提示我”选择赠品“（这里说明一下，之所以将提示语都放在同一位置，是为了让前面界面的视觉路径在同一水平点上，使页面结构更整洁），点击进入”选择赠品“界面，参照页面给出的赠品金额提示，选择了想要的赠品，由于选择的赠品太多，从上下拉到下浏览起来效率太低，于是她又点击了按钮”已选赠品“进行复核了一遍，确定完毕后，回到确认下单的页面，便满意的点击了”支付“按钮，发现金额与未选赠品前的金额一致，便放心的提交了订单，订单支付完毕后，引导代理来到了订单列表页面，上面还特意标明了”含赠品“字样提示，a点击进去再次看了一下所购的商品及赠品，准确无误会，抱着愉悦的心情关闭了应用与手机。
”1、商品列表及商品详情，赠品类型的商品须显示对应图标；
2、赠品类型商品同普通商品一样可正常下单购买；
3、购物车，根据代理当前所选商品的总面价金额及当前代理对应配赠率，如果配赠金额不为0，则显示相应配赠金额及提示信息（若当前配赠金额暂不足以购买系统当前上架的任意赠品，则显示提示信息：“还差××就可获得免费赠品”；若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时，则显示提示信息“可获得免费赠品”）；如果配赠金额为0，则不显示相应配赠金额及提示信息。
4、确认订单界面，若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时，则提供选择赠品操作项。未选择赠品时，操作项显示配赠金额、及“选择赠品”文案。已选择赠品时，若配赠金额-已选择赠品的总面价>0，操作项显示“已选择××元赠品，还可选择××元”；若配赠金额-已选择赠品的总面价=0，操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
若当前配赠金额暂不足以购买系统当前上架的任意赠品，则不提供选择赠品操作项；
5、选择赠品列表，列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品，用户可点击选择，也可取消选择，当前选择的赠品总面价金额=配赠金额时，不可再继续选择更多（若再点击选择赠品，则提示“不能再选择更多了”）；提供显示选择提示信息“还可选择××元赠品”（××为配赠金额-已选配赠商品总面价）、“查看已选赠品”操作、“确认”操作。
点击“查看已选赠品操作”，可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮，可点击关闭浮框；
点击“确认”操作，确认当前已选择的赠品信息，返回确认订单界面。
6、个人中心，增加显示当前代理的配赠率信息。
7、订单列表，若对应订单含有配赠商品信息（注：如果只是正常下单购买的赠品类型的商品，则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品），则显示“含免费赠品”标签；
8、订单详情，若对应订单还有配赠商品信息（同7），则列表显示用户选择的免费获赠的商品信息（注：正常下单购买的赠品类型商品，显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品），并显示总的免费配赠金额信息。

“怎样才能改善用户体验设计？这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章太长，会分成两次推送，欢迎期待~“通常，飞速行驶的货车不可能轻松地停下来。因为它需要花费很多努力，运用更多的动能去改变运动状态。与其强迫人们从他们的主任务上转移注意力，不如直接带他们去他们想去的地方。”
——Luke Wroblewski，谷歌产品总监

这几天有一些同学问我关于面试的问题，其实我对于整个面试的过程还没怎么总结过，但是对于如何阐述自己的设计思路倒是有一套方法，今天分享给大家。由于信息安全问题，我将底部的信息主架构进行了隐藏和改变，大家主要看整个设计思路的阐述，不要纠结细节。

初学服务设计，读了一本好书——《This is Service Design Thinking: Basics, Tools, Cases》（by Marc Stickdorn，Jakob Schneider），推荐并笔记。而本文基本描述了我对服务设计的初步理解，以及服务设计给我带来的在用户体验设计领域的灵感触发。“服务设计是有效的计划和组织一项服务中所涉及的人、基础设施、通信交流以及物料等相关因素，从而提高用户体验和服务质量的设计活动。…… 服务设计将人与其他诸如沟通、环境、行为、物料等相互融合，并将以人为本的理念贯穿于始终。…… 简单来说，服务设计是一种设计思维方式 ，为人与人一起创造与改善服务体验。…… 服务设计强调合作以使得共同创造成为可能，让服务变得更加有用，可用，高效，有效和被需要 ，是全新的、整体性强、多学科交融的综合领域。…… 服务设计的关键是“用户为先 + 追踪体验流程 + 涉及所有接触点 + 致力于打造完美的用户体验”。”——百度百科“When you have two coffee shops right next to each other, and each sells the exact same coffee at the exact same price, service design is what makes you walk into one and not the other.” – 31 volts service design, 2008“However, creativity is not so much a gift as a process of listening to the ideas “flowing” through one’s head and being prepared to articulate them.”

动效的强大之处在于，它将设计以更为成熟的方式呈现出来，它赋予设计以生命力，让产品脱颖而出。

新手设计师相较于资深设计师，后者技能更丰富且全动感特效轻松get 面，很多人想要进阶资深却苦于培养新技能，笔者在经手不少视频动效项目后，对于技能进阶颇有心得。

视觉设计的重要性跟这个世界看脸一样，不言而明。译者注：Huggies是一个婴儿尿不湿的品牌。译者注：有时候设计师会先收集一些图片文字之类的东西弄出一个合集，作为设计的参考和灵感来源，这类东西叫做moodboard。具体介绍可参考：https://en.wikipedia.org/wiki/Mood_board

Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下，直接使用Flexbox的排版技术。小提示：

– Stacks能产生一致性。

– 一致性使设计清晰。

– Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具，让设计师定义和构建UI与UX设计中所有零零碎碎的元素，并且最终能自动生成本地代码，1:1还原设计。这就使设计师不依赖团队的其他部分，比如开发人员的优先关注点就与设计团队不同。

在看这篇文章之前你需要清楚，我所讲的东西并不是什么权威，只是在工作中总结出来的一些的小经验而已，制作图标的方法也有很多种，这里只是给大家一个思路上的启发，希望能对你有所帮助吧！

打造用户喜欢的产品，让产品从能用、好用到爱用，是每个互联网从业者的使命，为你的APP增添一些打动人心的小设计，不失为一个好办法。当然，前提是该设计能为用户带来价值，千万不要为了设计而设计。

“怎样才能改善用户体验设计？这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章过长，分成上下两篇，上篇可查阅《通过减少认知超载，提升用户体验（上）》。

极简风格能帮助用户简化操作，兼容性好，载入页面快等等优点，不过虽然看起来简单，我们需要考虑的东西可一点都不少。这一次，就让我们一边学习简约风格的原则，一边将它应用到实际网站制作中去吧。

为什么有时候只用看一眼就知道这两个东西是什么，如何操作？其实这就是物品所具备的预设用途。物质心理学—研究人和物相互作用方式的心理。一件物品实际上能用来做何用途，或被认为能有什么用途。一个白色的东西加一个按钮在上面，并且一按就会有“奇迹”发生。

色彩几乎是所有设计体系中不可忽略的组成部分，而在网页设计中，色彩本身所发挥的作用并不单一，除了最基本的着色构成色彩搭配的作用之外，色彩能够通过对比创造视觉焦点，构建信息层次，影响用户情绪，甚至引导访客的行为。所以，在玩转配色本身之外，进阶的色彩运用技巧还有很多。