我花了 20 个小时研究 3 个按钮，让你明白 UI 和 UX 的区别

@可乐橙_ColaChan：UI 和UX 到底有什么区别？今天这位作者花了20个小时研究3个按钮，除了关于可用性的大量干货，也能帮你快速明白UI 和UX 的区别。首先讲一讲背景。这是在我们周会上发生的事情：“Andrew，我们做了几个很厉害的新功能，测试一下吧。”“好的，当然。”“嘿，你甚至会忍不住写篇文章来介绍的！”“呃……”只有一个问题……当我被要求测试一项功能，通常

产品经理 2017年04月05日

纯图标模式 PK “图文”模式：用户更倾向于哪种方式去搜索图标？

每个人对于相关与不相关都有自己的理解。更要命的是，即使同一个人，在某些因素影响下也会对一个图标的相关与不相关做出不同的判断，比如说文字标签。给图标加上文字标签，或许就能改变人们的认知。那么，我们该如何应对这种情况呢？假设你是一名兽医。因为你非常善于利用人们对弱小可爱动物的爱心，所以Instagram账号经营得风生水起。但这对你来说还不够，你决定开发一个移动应用来拓展你的宠物

产品经理 2017年04月10日

分享三个个人觉得不错的网站

话不多说，直接进入分享模式这个是国外的一个网站：Brusheezy（点击可以进去）其实他是一个PS资源集合站，看他的介绍，free Photoshop brushes and psds ，免费的哦，包含的东西就多了，笔刷啊、图案啊、样式啊、文字特效啊、动作以及PSD源文件，听起来还不错吧，现在我随便输入一个computer试试看这些素材我很满意，但对明天还是有希望的哈哈，我

产品经理 2017年06月05日

酷站两连发！超过 500 个免费矢量图标素材可商用下载

编者按：本文推荐两个免费可商用的图标素材网站，两个都提供了一致性风格很高的线性图标集，超过500个全都可商用，赶紧来收~本文要推荐的「Feather Icons」是一款免费、开放原始码矢量图标集，收录八大类型、总共 233 个图示，这些图示设计在 24×24 网格上，无论在功能、一致性或简约设计都具有相同特性。图标本身设计是由简单线条构成，宛如「羽毛」般轻巧，因此很适合使用

产品 2017年06月14日

如何设计出完美的折叠面板？

折叠面板可能是响应式设计中的最重要主力。设计模型。近乎神秘的语句经常激发敬畏和怨恨。作为设计师，我们通常没有考虑过设计模型是通用的解决方法，它可以适用于各种环境中。网址导航？滑动导航？日常交易？Carousel！使用这些模型的一个很棒的原因是：每当遇到耗时且有风险的界面问题时，我们都需要一个新的解决方案，但由于我们不知道实施一个新的解决方案需要多少时间，以及是否在可用性测试

产品经理 2017年07月06日

颜色、字体、图表，这些视觉元素是如何影响用户体验的？

文章主要分析了不同的视觉设计元素是如何影响网站用户体验，希望通过文章的解读能够对你的产品设计带来些启发。也许是因为我在视觉设计上没有太多经验，我发现平常在与视觉设计师讨论设计方案时，我们常常讨论的是：“我觉得这样布局很奇怪”、“我觉得A不太好看”、“这个地方给我带来了某种XXX的感觉”、“这样显示会不会给用户带来某种误解”……不难发现， 大多数时候我们讨论的是一种捉摸不透的

交互体验 2017年07月21日

做有温度的设计：设计有故事感的标签图标

微交互设计，使产品更为生动，让用户体验更具趣味性。曾经有人在设计交流群里面问：学UI要不要学画图标？我告诉你：要！而且图标设计一直是UI设计里面最重要最基础的组成部分。一个小图标看起来简单，但事实上图标的设计不但要求绘制精美 ，图形象征意义与其所代表的内容高度贴合，还要求图标的形式风格与版面风格高度一致，图标虽小，却是浓缩的精华，要求功能与形式上的统一。在以前写的一篇介绍标

产品 2017年08月09日

图标设计总结：断线图标规律

四个月前答应过大家要写一篇关于断线图标的规律，一直没来得及总结，很多人说想知道，终于，今天它来了，哈哈哈！对于图标如何断线，如果是经验丰富的设计师，估计靠感觉做就可以了，但不是大神的我们怎么办呢？总得有点规律让我们参考参考吧，虽然有些规律不能全盘通用，但这次总结一定能给你带来帮助。来，看下大纲：1.先考虑在拼接处断线2.平衡视觉复杂度3.避免正中间处断线4.尽量让图标一笔画

产品 2017年09月25日

还在手工绘制图标？不如去这些网站寻找资源

做 PPT 时，你是不是也被一枚小图标折磨过呢？其实有很多现成、免费还好看的图标供你选择。图标在我们的日常生活中是随处可见，文章的 Banner，软件的界面元素，甚至你时常制作的幻灯片上都有。如果你是一位设计师，你可以自己制作一些非常精致的图标；如果你不是设计师，可能要被一个小小的图标折磨上好久。不用担心，今天为你介绍的这八个免费的图标网站，就能让你一样拥有很多非常不错的图

产品设计 2017年12月12日

在设计之前请注意：这5种网页设计已经过时了！

设计趋势必须谨慎使用。就像许多流行趋势一样迅的速流行起来；但是他们可能会失宠，让设计感觉过时。不要完全忽略设计趋势 – 测试趋势可以伸展你的创造力，帮助你创造一些你可能没有尝试过的东西。 但要注意什么是新鲜的，什么是永恒的，什么是过时的！ 这里有五个设计趋势已经过时（或者应该是）。一、“复古”设计有一段时间，似乎每一个设计趋势都是从“年份”开始的。老式的版式， 葡萄酒颜色，

产品 2017年12月18日