WEB

如何让方正方框/方形元素不死板有创意？今天这篇好文总结了超多的设计方法和实战案例，建议阅读。

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

– Stacks能产生一致性。

– 一致性使设计清晰。

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

关于交互设计，这是一篇很全很全很全（重要事情要说三遍）的科普文章。作者写了1.6万字，实在是诚意之作。如果你打算走进交互，此文值得真的真的真的（重要事情要说三遍）值得一读^_^ by 小编目录导读：
1. 交互设计概念
2. 交互设计输出物
3. 交互设计相关理论
4. 交互设计流程及方法
5. 交互设计常见案例分析
6. 交互设计规范及趋势
7. 交互设计师进阶之路举个例子就是：小明饿了，他需要填饱肚子（目标），他跑到楼下的餐馆进行点餐、吃饭、结账（任务），吃完了出门的时候推门（行为）出去，然后过马路回家。交互指的是产品与它的使用者之间的互动过程，而交互设计师则是秉承以用户为中心的设计理念，以用户体验度为原则，对交互过程进行研究并开展设计的工作人员。——百度百科①初级交互设计师<10k：俗称「线框仔」，出没于小公司和外包公司，没有设计决策权，专门配给不会画图的产品经理使用。门槛低，只需要熟练使用原型软件，会看着其它APP抄设计即可。无发展前途，看到此类岗位请远离。
②中级交互设计师10k-15k：除了画线框图外参与一定的产品层面的工作，有一定设计决策权，通常为知名院校应届毕业生，可以对设计决策提出异议，但不一定被接受。
③高级交互设计师15k-25k：通常可以参与整个产品的概念过程，工作职能与产品经理更为接近，有更多的设计决策权，通常工作经验超过2年，可以和产品经理、视觉设计师、用户研究员及开发人员进行「激烈讨论」，并有能力维护设计师的尊严。
④资深交互设计师>25k：通常出没于BAT、财大气粗的创业公司及设计咨询公司。有着丰富的成功设计案例，通常工作经验超过5年，有主流大公司工作经验，有大型项目的设计管理经验，业内有一定名气。
——以上分级，参考寺主人在知乎的回答《如何成为交互设计师？》“你在设计的生涯中，有没有用到或者总结出哪些设计方法？”“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。”“关于弹窗中的“推荐选项”应该放在左边还是右边，分了两种情况：如果推荐选项有破坏性，那么应该放在左边。如果没有破坏性，则应该放在右边。但到了iOS10的时候，却变成了推荐选项都应该放在右边。”

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

今天要聊的三种设计趋势其实已经出现一阵子了，但是作为一种相对综合的设计手法，他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法，就可以实现这三种设计效果，但是它们不论是从美学特征上，还是从功能性上，都不输于其他的趋势。有兴趣么？不妨来看看吧。

文章介绍了导航设计中的3个原则，将以下原则付诸实践，或许会使用户体验大大Max！

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

一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面，从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页，抓住任何机会去诠释产品的价值与功能吧。

时序图作为常用的UML交互图，可以直观的传达系统内外之间的交互过程，经常用在详细设计文档中。下面本文综合参考了多篇时序图的教程，根据作者的思路将时序图做了更深入的讲解。

世界范围内，每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失（CVD）的影响。这意味着每100个web或app用户中，至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力？我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队，先来看看我们列出的色彩可用性设计的几项重要事项。

网站能承载多种多样的内容，但无论是哪种内容，通常都会遵循一定的信息架构。在这其中，故事是很特别的一种类型。讲故事，往往能以更叙事、更情感化的方式，将内容传递给用户。一个好的故事，往往始于笔端，但是最终呈现，还是要依靠精巧的设计。那么设计是如何讲好故事的呢？今天的文章，为你分享一下创造故事的7个维度。

毫无疑问，我被问到最多的就是关于设计规范体系的建立。所以在过去几年里，最多思考的就是如何设计、建立完整的设计体系，像Marvel, Bantam 和 Modulz这样的产品，下面我想分享一些我学到的方法。

从iOS 9改版到iOS 10之后，锁屏页面的音乐控件变大了，用户体验 明显提高。那么最佳的按钮触摸大小应该是多少？经过1.2亿次的实验后，这个结果被微软/苹果等顶级公司采用，强烈推荐学习。

真的……我没疯……“Andrew，我们做了几个很厉害的新功能，测试一下吧。”
“好的，当然。”
“嘿，你甚至会忍不住写篇文章来介绍的！”
“呃……”真理：深入挖掘总是对的。真理：努力寻找方法衡量用户的体验真理：在展开真实的访谈之前，非常有必要做一下实验

虽然网页排版 方式千变万化，但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中，F式布局是可用性较强，且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。

把你的工作当作一门手艺，因为总有一些你能改进的东西。靠激励自己成为一个更好设计师。

沿着这7个思路，你可以正确地使用动效取悦用户。“在体验设计的过程中，为用户提供满足感已经是一种常态，而愉悦感则是我们所追求的目标。”“个性和情感是我们被一部分人吸引，而没有被另外一部分人吸引的原因。”人们会忘记你所说的话，忘记你所做的事，但是不会忘记你给他们所带来的感受。 —— Maya Angelou

Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置，它们的转化率和它本身的设计优秀与否息息相关，最重要的是，它要能迅速的吸引用户的注意力，通过优秀的文案和视觉让用户立刻马上点击。今天的文章，我们通过一系列优秀的范例，帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

大家在做设计的时候都会遵循一些交互规范或者常用的一些规律，但是经常情况下，我们都没有深入的研究为什么这样定义这个数值，这个数值是否合理？如果没有严格的理论支持，在设计中直接运用一些规律，就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。