交互

前面的视觉体系和大家简单提到过传统平面排版的四大原则：亲密性、对比、重复、对齐。那界面排版有什么原则呢？今天菜心就来用实例分享一下界面排版中需要注意哪些原则。一、亲密原则
二、对比原则
三、平衡原则
四、相似原则
五、简洁原则
六、封闭原则
七、情感原则

扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而，要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的，并创造出一套连贯的视觉与功能体验。让我们来了解下，你能够通过扁平化设计为用户做些什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

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设计，并且一直处在努力开心地进步着的状态中。在本文中，也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。

日期控件，相信行业内所有的同学都不会陌生，尤其是交互的同学，可能会看得更加的仔细，日前，我们所接触到的各类app很多都有日期或时间的选择，而这些同功能的控件都以各式各样的姿态及交互呈现在我们的面前，出于自己的好奇，对这些不同行业、不同使用场景下的同一功能做了一个收集及总结的分析。

作为一名交互设计师，在输出交互稿件之时，要考虑的不仅是如何将需求转为具体页面，而且还要清晰的将其中的思想传达给对方。

过去一年，和人工智能相关的新闻铺天盖地。身为设计师的你可能会问：人工智能和我的日程工作有关吗？我应该为此做什么准备？Design will be less about delivering on a user’s request, and more about responding to the needs they haven’t expressed yet.
（未来，设计会更多地去响应用户还没有表达的需求，而不是去为了响应用户主动提出的需求）「Alexa，把客厅灯关了，把我的床头灯开到一半的亮度」
「Alexa，再买一袋我上个月买过的那款猫粮」
「Alexa，我今天早上的会议几点开始？」

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