编者按：新手设计师有哪些应该注意的地方？这位入行不久的设计师总结了10个值得学习的技巧，适合每个年轻设计师阅读。1. 别让设计成为黑匣子说服别人接受你的设计非常重要，但是这个过程讲究以理服人，用一些理论或者是一些说得通的理由来支持你的设计方案，而不是简单一句「我觉得这样好」，但事实上自己也不是真的知道这样好不好。当然我不是说我们做什么都要从理论出发，摒弃我们自己的品味和智慧，但在尚未有多少设计经验的时候只依靠自己的直觉是非常不妥的，设计也需要科学。让队友提问题给意见，他们可能会看到你没有关注到的点。2. 融入团队一个团队对于一个新人的加入肯定是需要成本的，要融入到工作之中除了知道自己是做什么的之外还需要知道应该怎么去做。如有需要，试着改变自己的节奏来融入你的团队。注意，我的意思并不是要你无限迁就别人，而你要找到你的位置，着眼于帮助同伴们一起提高整个团队的效率。这个无缝融入的过程有可能长达几个月，但当你们能够找到最适合自己的节奏，找到自己的位置，你将能更有着力点的发挥自己的特长与优势。3. 提早获得反馈尽早把原型做出来的，即便是再厉害的设计师的作品都无法避免的存在一些这样或那样的问题，能够在更早的时期发现更多的问题能够减免很多后期自己打脸或别人帮你擦屁股的尴尬情况。无论你是多么的小心翼翼，骑牛数牛的现象在设计过程中常常发生，你无法避免地会忽视一些细微的问题或者越过了 API 限制（程 ...继续阅读 (5)

编者按：看不懂iOS 和Android 的设计规范？爱奇艺高级交互设计师来帮你！这个系列文章会深入浅出地为你讲解两个规范中相同控件的概念和应用，加上超多实例演示，轻松看懂设计规范！往期回顾：高手帮你学规范！iOS和Android规范解析之提示框+警告框高手帮你学规范！IOS和ANDROID规范解析之简易菜单+弹框Google Material Design设计规范和iOS设计规范中，都有从底部向上出现的浮层组件。在Android中，是底板（Bottom Sheet）；在iOS规范中，是上拉菜单（Action Sheets）和活动视图（Activity Views）。Google Material Design Guideline在MD规范中，底板分为两种：固定底板和模态底板。它们的区别，主要在状态是否固定——固定底板的状态是固定的，和应用界面在同一层级；而模态底板的状态是临时的，其层级位于应用界面之上。举个栗子：另外，我们看一下MD规范给出的各部件的高度示意图，可以发现，模态底板的高度是很高的（16DPs)；原图中没有给出固定底板的高度示意，我添加了一下（蓝色部分，0DPs）：△  MD规范中各部件的高度示意图也就是说，如果两种底板同时出现，模态底板是压在固定底板的上面的。另外还有一个区别：模态底板出现的时候，页面会自带蒙层；固定底板出现的时候没有蒙层。下面详细说一下两种底板。固定 ...继续阅读 (15)

之前的一系列文章，为大家介绍了iOS和Android规范中，各种弹出物的用法，罗列如下：警告框（Alerts），弹出框（Popovers，iOS独有），简易菜单（Simple Menus，MD独有），模态视图（Modal Views，iOS独有），确认弹框（Confirmation Dialogs，MD独有），全屏弹框（Full-screen Dialogs，MD独有），上拉菜单（Action Sheets，iOS独有），简易弹框（Simple Dialogs，iOS独有），活动视图（Activity Views，iOS独有），底板（Bottom Sheets，MD独有），提示框（Toasts）。既然各个控件都出过场了，是时候让它们合个体了！！往期回顾：高手帮你学规范！iOS和Android规范解析之提示框+警告框高手帮你学规范！IOS和ANDROID规范解析之简易菜单+弹框弹出类控件比较表格（工具栏不是弹出类控件，之前没有介绍）模态观察上表，左边iOS这一栏，从警告框到活动视图，它们构成了一个听起来很高大上的词汇——模态（Modal，不是Model）。iOS设计规范对模态的定义是这样神儿的：模态让用户聚焦到某一个任务、消息或者视图上而不能做别的事情，直到用户完成了当前的任务。比如警告框，用户必须必须选择警告框里的一个选项，警告框才会消失，否则用户什么也做不了。这个警告框，就创造了 ...继续阅读 (10)

字体，对于我们设计师来说再熟悉不过了，而今天要聊的「字体的创意设计」，在我们工作中会高频率出现，譬如设计广告物料、营销类 Banner 或品牌标识等等，需要针对主题文案进行图形化设计，从而进一步突出主题，吸引用户。如何更好的帮助我们提升字体创意设计的 Level ，我认为值得深入的探讨。开始之前，先问大家一个问题：做为设计师，你会如何去进行字体的创意设计？大家不妨花几分钟的时间思考一下答案。如果曾思考过这点，相信你一定有一套自己的设计方法。但在很多时候，我们的流程会存在问题：我们喜欢先入为主，一味运用图形设计手法大刀阔斧的改造字体，这种方式显得盲目，有生搬硬套的嫌疑。虽然我们的设计过程千差万别，但很大程度上要依赖设计师的审美和设计能力，经验丰富的设计师就算走了弯路，最终还能回归理性思考，Get 到设计要点。但是对于初级设计师，尤其很少接触字体设计的朋友们来说，一定会有些力不从心，无处下手。所以，我一直在思考有没有一种高效的方法，或者找到决定字体创意水准的关键因素，能帮助我们有效的思考问题，提高设计产出质量。以下观点供大家参考和交流。我认为设计师在着手「字体的创意设计」时，可以从三个方面去思考：1. 图形创意图形创意是我们最容易关注到的点，也是体现我们设计能力和创意重要环节。图形创意有哪些方法可循，后面会详细列举。2. 字形结构进行图形化设计的基础毕竟是「文字」，它仍然需要传达字面信 ...继续阅读 (11)

@乘与九设计：上一期的书单推荐了8本影响我最大的书，但并不全是设计相关的书籍，很多朋友留言说想看更多设计书的推荐，于是我整理了以下8本非常基础的设计书，一睹为快吧！上期回顾：《专业科班高手：对我设计生涯影响最大的8本书》1.《西文字体》小林章△   这本书可以全方位学习西文字体，力推2.《字体传奇：影响世界的Helvetica》拉斯·缪勒 等 著；李德庚 译△   这本书对传奇字体Helvetica诞生的来龙去脉都讲了一遍3.《配色设计原理》奥博斯科编辑部△   色彩搭配的基础入门书籍4.《写给大家看的设计书》威廉姆斯 著；苏金国，李盼 等 译△   为数不多的设计经典著作，影响了一代设计师，Robin Williams将设计的秘诀归纳为对比、重复、对齐和亲密性四条基本原则，推荐阅读。5.《平面设计中的网格系统》约瑟夫·米勒-布罗克曼 著；徐宸熹，张鹏宇 译△   这本书就用不多介绍了，之前的文章多次提到。6.《日本版式设计原理》甲谷一 著；景瑞琴 译△   通俗易懂的版面设计方法，通过左页到右页的对比，更直观学习版式。7.《Hanzi Kanji Hanja 汉字设计与应用》北京迪赛纳图书有限公司△   大量汉字设计的案例，可以参考学习。8.《書設計.設計書》安德鲁. 哈斯兰 著； 陈建铭 译△   这本书必须推荐，是我见过最详细地讲书籍装帧的书，是繁体字，比较难购买到，如果大家 ...继续阅读 (9)

编者按：看不懂iOS 和Android 的设计规范？爱奇艺高级交互设计师来帮你！这个系列文章会深入浅出地为你讲解两个规范中相同控件的概念和应用，加上超多实例演示，轻松看懂设计规范！上期回顾：高手帮你学规范！iOS和Android规范解析之提示框+警告框今天的这几个控件的中文名字，在网上查了半天，没有找到统一的叫法，所以自己翻译了一下：简易菜单对应的是MD（Material Design，下同）中的Simple Menu；简易对话框，对应的是MD中的Simple Dialog，弹出框对应的是iOS中的Popover。按照惯例，我们还是从MD的控件开始说起。Google Material Design Guideline首先，什么是简易菜单呢？先放一个例子出来吓唬吓唬人：△  简易菜单（Simple Menu）简易菜单，就是在用户当前操作的位置出现的选项集合。它有以下几个规则：消失规则：当用户选择了某个选项，简易菜单立刻消失；当用户点击简易菜单之外的区域，或者点击安卓系统的返回按钮，则简易菜单消失。展现规则：简易菜单应该出现在入口的正上方，也就是覆盖住入口。这一条在国内的安卓系统中经常被错用，比如下面这种情况：△  点击右上角的三个点，则菜单覆盖在三个点的正上方国内很多安卓版本的应用，点击三个点之后，菜单是出现在三个点的下方。如果仅仅是从MD规范的角度来说，这是不太规范的做法。另外，简 ...继续阅读 (6)

我们每天接触的互联网，其中包含了巨量的非结构化的信息，混沌，庞杂。可是人的大脑实际上是难以察觉、理解孤立存在的东西的，而我们所熟知的数字产品，网页，APP等，其实都是设计师精心设计之后的产物，它们的共同特征是易于使用，且结构化。其中的内容和完整的导航交互系统紧密的结合在一起，用户可以自然地感知、接收、理解。这种协助内容搭建架构的科学，就是我们今天要探讨的，信息架构。信息架构是什么信息架构（Information architecture ，IA）是一门组织和构建网络、网站、APP以及社交媒体内容的科学。美国建筑师/平面设计师 Richard Saul Wurman 被认为是信息架构领域的开拓者。现如今，许多致力于构建信息架构的专家们甚至都有了各自的信息架构研究所。信息架构专家们的工作，就是致力于将内容按照更易于人们理解接收的方式来整理和排列。在合理的信息架构之下，用户可以更加轻松地理解产品内容，调动产品的功能，在不需要太多工作量的情况下获取信息、达成目标。影响内容结构的因素很多。首先，要了解目标受众的需求和细节，将它们的满意度作为优先考虑因素。同时，信息架构还取决于产品类型和相应的公司。举个例子，我们常见的电商类网站和博客就是两种类型的网站，因为两者不同的目标和内容使得它们所呈现出来的信息架构截然不同。信息架构已经成为许多领域的研究基础，包括设计和软件开发。信息架构在设计中的角色如 ...继续阅读 (5)

编者按：HEART是一个用来衡量提升用户体验的框架，同时包含了宏观和微观的衡量方式。为什么谷歌会采用这个框架？如何利用这个框架？这篇文章带你入门！你知道HEART 框架吗？当我无意中听到这个框架时，我就一直在反复思考。骑车回家的路上，我会念叨各首字母所代表的单词，我也把它画在了各个会议室四周的白板上——我深陷其中。HEART是一个用来衡量提升用户体验的框架，每个字母代表一种用户体验测量标准：Happiness （愉悦感）Engagement （参与度）Adoption （接受度）Retention （留存率）Task Success（任务完成率）这个框架最吸引我的点在于，它把用户体验的原则和收益驱动的指标关联在了一起 (我之前一直在纠结如何构建这种关联)。HEART 框架从何而来？Google用户体验研究团队设计Heart框架，起因来自内部团队发现用户体验没有被有效的衡量。虽然那时有很多有效的测量用户体验的方法，比如完成任务所用的时间、任务完成率等，但都更偏向于微观层面。UX设计师缺乏一些宏观层面的商业指标，而这些指标却是更直接影响到公司策略的。因此，Google开始把HEART作为新的用户体验衡量框架。HEART框架是怎么衡量的？HEART框架同时包含了宏观和微观的衡量方式，能够帮你确定一个产品的用户体验的影响。留存率与当前/未来的营收有着最直接的联系，而其它几个指标则对产品的价 ...继续阅读 (5)

今天介绍的两个网站，一个提供了常用的音效素材下载，一个收集了来自世界各地设计师的色彩搭配方案，非常适合扁平化设计。实用简单，一起来收本文要介绍的「Sample Focus」提供免费音效素材取样（Samples），收录各种类型音效配乐素材，包括低音、弦类乐器、鼓、现场录音、吉他、特效、合成、人声及木管乐器等等，所有音效可免费下载，适用于个人或商业用途。值得一提的是 Sample Focus 网站能快速预览各种音效，只要将光标移动到素材上就会自动播放，相较于其他网站来说这个设计让使用者可以更快预览播放，而不用另外下载试听，让操作更加顺手。不过 Sample Focus 只提供免费用户默认 40 点积分，大约可以下载 40 个左右的声音文件（当然可再多注册几个账户），假如你本身也是音乐创作者，希望将自己的作品提供给其他人使用，也能上传至这网站来获取积分，算是一种互相交换共享的模式。Sample FocusSTEP 1开启 Sample Focus 网站后，直接从首页可以找到一些音效素材，例如最近被经常下载及更新的音效，或者直接从搜寻框搜寻。不过声音可能比较难以描述，建议点击上方选单开启分类或标签可能会比较好找。STEP 2从分类项目可找到各种音效类别，点击后还会有子项目，可能会让搜寻素材变得更简单一些，可惜 Sample Focus 网站并没有提供中文版，如果对于英文不熟悉的话，可考虑丢 ...继续阅读 (6)

我们知道一个公司的基础也是核心的需求是盈利，那么盈利需要通过各种销售手段来达成目标，而如何刺激消费者就是营销的手段之一。营销手段可以分为很多种：例如，内容营销、视觉营销、互动营销、网络营销、新媒体营销、饥饿营销、口碑营销等等，那么这次我们就来谈一谈视觉营销。不知道大家通常在购物的时候是怎样的一个心理活动，不可否认绝大部分人类都是视觉动物，第一眼或者第一印象都能够影响他们70%以上的最终决策行为。所以视觉营销的最重要的点就在于如何在第一眼吸引、打动用户。举个例子：大家是否经常看电影预告，酷炫的打斗场面，精彩的爆破特效，惊心动魄的街头飞车。只可惜这些已经是80%的电影精彩内容了，而真实的影片大部分时间在讲男欢女爱，三角恋，父子相认等拖沓剧情，让人索然无味，但这时你tm已经付过钱了啊，能退吗？当然不能，下一次还是这样骗你。好了，这是一波成功的视觉营销，而且你还会孜孜不倦的去看，因为看电影是某些人的刚需，也是一部分人的情怀，确实不看就会死。我们下面来欣赏几张很有独特创意的海报：1. 百度云摄像头的几张大海报，几个关键词：随时、安心、放心、可靠，海报中的人物都是家喻户晓的superstar，并且整个页面有一定的故事性和想象空间，让人印象很深刻，并且调起了好奇心。2. 林大奋大神的插画，这几幅插画更是独树一帜的风格，夸张的表现手法，搞笑的场景图文，只为突出京东的——快！让人意犹未尽的同时让人觉 ...继续阅读 (6)

作为最基础的常备功能， 注册/登录往往是产品第一个版本中最容易被忽视的环节，越是看似容易，陷阱越多。介绍相关产品思路的文章很多，讲交互的多，结合运营的少。一. 非常基础1.1 因「私有化」而存在不是所有的产品都需要注册/登录，除非[私有内容/私有操作]具有足够的吸引力。注册：用户告诉系统Who is Tom，系统记录Tom和口令。登录：用户告诉系统I am Tom，系统辨别Tom和口令。1.2 Passport产品线及近亲通常把注册、登录、找回密码、修改密码、账户关联这几件事归为Passport产品线。它的近亲是Profile产品线，包含用户资料、个人设置等。1.3 登录是高频，其他是低频注册、找回密码、修改密码都是低频操作，但都属于迫切程度比较高，也最容易引发挫败感，导致用户投诉及放弃使用产品。1.4 术语：查重、校验、验证、匹配查重，“查询是否有重复存在”的简称，比如：排除以手机为主键的重复注册。校验，检查数据是否符合格式，比如：输入的时候为一个手机号码。验证，确认真实性，比如手机和邮箱真的是用户本人使用，指纹、人脸识别。匹配，用户提交的数据是否与存储中的数据一致。1.5 术语：Spam与Anti-SpamSpam指使用脚本、机器人进行恶意批量提交或遍历破解的行为。 Anti-Spam指防止Spam的系统措施。1.6 术语：单点登录SSO也就是所谓的通行证，注册/登录一次，可在 ...继续阅读 (6)

在说字体设计之前我不得不提一下“格式塔心理学”，这是我们省略与变化字体笔画的理论基础。我们的眼睛和大脑在观察事物、接收影像刺激的时候，会有一些特别的倾向。这些倾向常常可以帮助我们快速的辨别事物，有时候也会产生所谓的“错觉”。格式塔心理学重要的概念便是“整体不等于个体的总合”，举例来说：当我们在观察另一个人的时候，并不是先看到他的手、脚、头、眼睛、耳朵、鼻子，然后把这些视觉特征组合成一个称为“人”的组合。我们是直接的观察到人这个“整体”，而不是其他器官的“个体的总合”。格式塔心理学主要有相似性原理、连续性原理、封闭性原理、对称性原理等，举例来说，比如我们看到下面两组图形：我们可以观察发现，虽然上图中的几组图形线条没有完全闭合，但是我们依然能看出它们是方形、圆、三角形，我们的大脑会自动填补元素与元素间的空白部分，形成一段不存在的图形，这就是格式塔心理学中所说的封闭性原理。这里弥补的元素就是线段和圆点，从而有助于我们得出一个“All roads lead to Rome.”这样的结论（善于举一反三，发现新的元素）。通俗地说格式塔就是感觉（知觉）的最终结果。是我们在心不在焉与没有引入反思的现象学状态时的感觉，这种感觉是不受外界因素约束的，来源于我们自己的感知。现在字体设计都是用计算机辅助来做了，人就越来越懒，不愿意动手，很多设计师的电脑里都安装了上百款中文字体和上千款英文字体，（说的夸张， ...继续阅读 (6)

交互设计师在设计交互稿的时候，时常需要一些反馈手段，以提示用户操作的结果。Toast是其中很常用的一种：它简单、小巧、对用户的打扰小。然而现在很多应用中，存在对于toast过度使用的情况，并且常常出现Android样式的toast出现在iOS应用中（反之亦然）的情形。在研究了iOS和Android的规范之后，笔者惊人地发现iOS中其实是没有toast这种部件的。到底我们在设计的时候应该处理这种部件呢？且看下面的分解。提示框（Toast）对比Google的Material Design规范中，是把toast和snackbars归为一类的。下面是规范中对snackbars的定义：Snackbars包含一行与进行的操作直接相关的文案（文案前不可有icon）。它可以包含一个操作。△  Snackbar示例规范中对toast的定义：Toast优先适用于系统提示。它也在屏幕下方出现，但是不能被划出屏幕外（而被清除）。△  Toast示例行为Snackbars/toast从屏幕底部向上出现，经过设定的秒数后消失，或者用户进行了别的操作它们也会消失。△  Snackbar出现和消失简洁提示的文案要简短，包含的操作按钮最多只有一个，或者没有。（注意，snackbar不能包含使其消失的“取消”按钮！）。△  左边是正确的，右边是错误的（因为多了“取消”按钮）不可重叠snackbar与floating ...继续阅读 (6)

怎么样的东西才算得上真正的设计呢？面对这个问题，也许你的祖父会这样回答：“设计？那些精美的电影海报算是设计出来的吧，iPhone算是，Facebook 应该也是吧？”关于设计的名言我们听过太多了，“设计不止是看起来漂亮，还要能完美运行”“少即是多”，Dieter Rams 说的，Jony Ive 说的 , Don Norman 等等等等。不过对于绝大多数人而言，设计的领域依然是成份复杂、类别多样的庞大体系。其中许多细分的领域，即使身在设计行业中的你我，甚至听都没听说过。我们必须承认，设计的领域很庞大。当然，对于广泛意义上的设计，我们都能够明白它是什么，这并不难。也许探讨设计最根本最基础的东西，有点“侮辱智商”，但是这是有必要的。从事设计行业这么多年之后，我逐步归纳出设计领域的三个通用规则，而这也是我们今天要聊的话题。我们今天所探讨的广泛意义上的设计，是有计划、有目的地创建一个对象，一项产品，或者说一套系统。艺术和设计常常被并举，然而艺术只是一个名词，设计不仅是一个名词，还是一个动词。设计所涉及到的不仅是产品，而且包含了创造产品的过程，被精心设计的产品 常常给人一种它就应该是这样的感觉。从本质上来讲，设计是一种思考方式。而设计师需要像工匠一样，在不断地设计和实践中打磨他们的思想。“许多职业的主要差异在于时机。艺术家和科学家都面对着此刻真实可见的世界来创作，而数学家需要在现实的基础上， ...继续阅读 (5)

@菜心设计铺：上期简单的介绍了几点包装的技巧，这期再分享一波，接着上期，再深入的讨论一下关于包装的技巧。上期回顾：《想让作品从80分到100分？你需要这3个包装作品的小技巧！》我们包装的目标就是：吸引眼球！我个人觉得要想吸引眼球就要注意以下两点——层级与细节。接下来的时间，我们就来了解一下层级与细节具体是什么》一.  层级1.1 颜色层级很多作品包装背景颜色都是有深有浅，为什么？其实就是打造一种颜色层级，刺激视觉感官，看下图：左侧黑白相间的版本要比右侧纯黑色层级更丰富，在展示作品的时候，就会给人一种视觉冲击力。来看真实的作品排版包装，如下图：当然颜色层级不一定非要用深浅，色相的对比也可以，如下图：△  behance优秀作品但是色相比较难控制，对新人来说最好的方法就是主色和白色相间使用，不易出错。1.2 内容层级们每做完一个作品包装，可以审查一遍，看看整体一共可以分为几层，如果只有两层，那就重新做吧。我们来看看优秀的包装如何让层级丰富。比如使用一些模型，并让界面局部与模型分离：△  behance优秀作品再比如让背景多几个层次：△  behance优秀作品再比如像拍照一样，让景深变长，在前景增加修饰物，如下图：△  behance优秀作品1.3 方向层级方向层级意思就是展示的内容不要都放在同一个方向，要有变化，左右一定要混合使用，不然看着就会死气沉沉的。比如下面这张图：右侧的排版是 ...继续阅读 (11)

对于一枚交互设计师，设计水平的重要判断标准之一，是看设计师能否产出足够靠谱的方案。对内，方案要能帮助产品不断向前发展，提升产品的数据，为公司带来收益；对外，方案要能满足用户的使用需要，方便用户的操作，提供良好的用户体验。对于交互的同学来说，这些是我们的天职，要想尽一切办法去做好。那么问题来了，如何才能做好这些天职呢？下面我将分三个阶段介绍一个很好用的设计方法：目标导向设计法。掌握了这个设计方法，可以帮你设计出团队内部认可、用户也喜欢的方案。设计目标要理解目标导向设计法，首先要理解最核心的元素——设计目标。这就绕不开设计的鼻祖——包豪斯。包豪斯是世界上第一所完全为发展设计教育而建立的学院，在设计史上占据着非常重要的地位。她从1919年创立开始，一直到今天都对设计界有着很大的影响。现在我们看到的很多建筑风格，都依然是包豪斯的老师所创立的国际主义风格。△  包豪斯第三任校长米斯先生于1958年设计完成的西格拉姆大厦，典型的国际主义风格现在整个世界范围内的建筑，大面积都是这种极简风，包豪斯的影响可谓波及全球。包豪斯学校之所以伟大，是因为包豪斯首次将理性思维的光辉注入了设计活动中。她首次提出要为大工业生产而设计。包豪斯主动将学校和企业界、工业界联系起来，使学生能够体验工业生产与设计的关联。这样的做法，让学生能够设计出真正符合生产标准的作品，而避免了产出只是看起来美好、却无法量产的作品。其次， ...继续阅读 (8)

@可乐橙_ColaChan：2008年的时候，我在*Boots.com*工作。他们想做一个单页的结账页面，运用那个年代最新潮的技术，包括手风琴组件、AJAX和客户端验证。每个步骤（寄送地址、寄送选项、信用卡详细信息）都收在一个手风琴面板中。而每个面板都通过AJAX提交。提交成功后，这个面板就会收起，并且通过滑动动画展开下一个面板。看起来就像这样：Boots的单页结账页面，使用了手风琴面板展现每一个步骤。用户千辛万苦才完成了下单过程。错误难以更正，因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地，客户要求我们作出改变。我们进行了改版，让每个面板单独成为一个页面，也就不需要手风琴和AJAX了。不过，我们还是保留了客户端验证，防止不必要的服务器请求。看起来就像这样：Boots的结账页面：每一步都是单独的一个页面。这个版本的转化率好多了。虽然我不记得具体数字了，我知道客户比较满意。6年后（2014年），我在*Just Eat*工作，发生了同样的事情。我们设计了一个单页结账流程，其中每个部分都有独立页面。这一次，我记下了相关数据。结果是每年能增加2百万订单。要清楚，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率提升的比例得出的。这部分转化成了订单，数量激增52倍。这是我们的移动端优先的设计：Just Eat的结账分为多个页面。我们还在设计中进一步简化了支付页面 ...继续阅读 (8)

酸梅干超人：InVision Craft Prototyping 功能终于上线了，从两年前开发到现在，千呼万唤始出来，有生之年系列既视感！可能很多人对 InVision 是做什么的不太清楚，这里稍微科普一下，除去需要搭梯子来提速，这家公司应该是目前所有原型工具中最优秀的，没有之一。无论是对于产品的理解、体验的设计，还是对于前端技术的追求。Craft 的原型工具，可以快速在 Sketch 把页面的交互设置做好，然后生成网页的链接分享出去。可以让任何人，通过任何设备的浏览器进行访问和操作。这里面很多优点就不说了，大家可以自己研究。下面直接进入今天的主题，没有下载的可以去官网下载最新的安装包，https://labs.invisionapp.com/craft。以及保证自己更新到最新的版本，开启了最下方的 Sync + Prototype。△  Craft 的面板然后我们在 Sketch 界面中的 Craft 的功能栏最下方（位置比较坑），可以看见一个闪电按钮，点击开就可以开启原型编辑模式，同时底部会有提示框弹出。△  开启原型编辑模式时弹出的提示在这个状态下，只要我们选中画布中的组件，再按快捷键 C ，就会生成一个箭头，把剪头指向组件对应跳转的页面再点击，就会弹出一个新的弹窗进入下一步操作。△  定位组件跳转的页面这个弹窗是用来设置交互动作和效果的。最上方的单选弹窗，用来选择交互目的， ...继续阅读 (5)

对于甲方爸爸的百般刁难，设计师是不是每次都只能认输呢？最近有一张图在微博跟朋友圈都非常火爆，这图大概是长这样的，甲方爸爸的要求是：你能不能在放大LOGO的同时缩小点？WTF!这句话乍一看的感觉就是：你能不能在长高的情况下再矮点？你能不能在长胖之后体重变轻点？你能不能在涨价之后价格再低点？这种神逻辑怎么看都是，不可能的任务！辣么我们今天将要挑战一下，这些看似不可能的任务！！整体大一点，面积小一点这需求不是太简单了么？你们记不记得曾经有一个十亿用户量级的产品就是这么改logo的…解题思路：调整细节，优化视觉简化LOGO形态，去掉多余透视。视觉来说新企鹅看上去比旧版本高了不少，但其实都一样高而已（不信可以量一下）身体逐渐轻盈的QQ企鹅，不就是刚好满足了整体大了一点。但是面积又小了一点么…另外logo的调整还能从元素粗细上面做文章，比如将原本的较粗字体改成细的。当然以上的修改方案仅限于LOGO设计。如果甲方拿了个固定的LOGO还不让你改，并且提出以上要求。那么他可能想你死。甲方非要红蓝配，真的会无解么？生活中的甲方难免会对某种配色，有着蜜汁执着！偏爱红绿配、黄紫配、红蓝配色的，大有人在。那么怎么把辣眼睛的配色做的好看呢？解题思路：多加效果，安心P图。一步一步加效果，猛地一看是有点丑哦。​先加个渐变，缓冲一下颜色对比。​再加上投影跟质感，质感可以添加杂色。或是使用滤镜库-扩散亮光。​然后挪一 ...继续阅读 (5)

这些交互设计必备书籍，但你也许都没读过；初次接触交互设计，这11本书，刚好够读一年，你的技能将会有质的飞跃。流程篇：《交互大厨的私房书单！10本「流程方法」的好书帮你进阶学习！》设计原则篇：《交互大厨的私房书单！10本设计原则的好书帮你进阶学习！》Book.1《金字塔原理》Book.2《网站交互设计模式》Book.3《界面设计模式》Designing InterfaceBook.4《网站设计解构》有效的交互设计框架和模式Book.05《胜于言传：网站内容制胜宝典》Book.06《Web表单设计》Book.07《社交网站界面设计》Book.08《搜索模式》Book.09《标签：标记系统设计实践》Book.10《Web信息架构》Book.11《移动应用UI设计模式》交互模式是什么？为什么要先学习它们学习烹饪必须从认识食材、练习刀工入手，学习交互设计也必须从交互模式开始。模式Patterns，最早来自建筑设计，指可复用的建筑构件；某些建筑物看起来风格相同，因为它们使用了风格统一、制式化的砖瓦、廊柱、装饰纹样。强调模式，主要因为一致性是交互设计的核心原则，即所谓“外观一致、操作一致、反馈一致”。模式认知是基本功，每一个交互设计人员从新手走向成熟的必经之路。下面介绍11本相关图书，希望大家顺序研习。Book.1《金字塔原理》朋友提问：除了“大白熊”，还有什么信息架构的书啊？对，《金字塔原理》 ...继续阅读 (11)

厌倦了传统顶部导航的设计师，越来越偏爱侧边栏导航了。这种常见于页面左侧的侧边栏设计，已经成了许多独树一帜的设计师的选择了。侧边栏导航看起来不错，它简化布局的功能似乎也很强大，那么它真的有效么？用户是否会认可这种设计呢？今天，我们仔细分析一下侧边栏导航的优缺点和使用状况，尽可能精准地对这种设计手法进行界定和判断。无处不在的侧边栏导航侧边栏导航和菜单设计的演变有着密不可分的关系。响应式设计的流行使得向移动端偏移的网页设计，不得不采用菜单栏来替代传统的导航模式，其直接的影响就是催生了汉堡图标。随着汉堡图标的流行，弹出式的菜单也越发的常见。其中有些菜单是完全开放式的，而有的菜单则带着下拉框，还有一部分直接是弹出的菜单界面。而为了兼容大量的移动端界面，下拉和弹出式的菜单大多采用的是纵向布局——而这和侧边栏的设计，是如此的相似。换句话来说，这种垂直的导航就是一种弹出式的侧边栏导航。目前，这种左侧侧边栏导航的设计已经成为一种持续迭代中的设计趋势了。现在我们看到的侧边栏设计，常常使用单一的纯色打底，包含较少（但是重要或常用的）选项，导航栏顶端通常会包含有品牌或者网站LOGO，文字链接，以及带有小图标的社交媒体帐号的链接。想要这种侧边栏设计能够最大化的发挥作用，诀窍在于控制好侧边栏本身和右侧网站内容的对比度，它要包含足够清晰可见的导航条目，还要能在移动端上良好地运作。还有一点值得一提：不要因为屏幕侧 ...继续阅读 (5)

@乘与九设计：前段时间，有小伙伴问我平时用什么中文字体，今天就给大家推荐几款不同类型，好用耐看的中文字体，解决你们的选择困难症。同款推荐：《好字体都在这！专业平面设计师常用的11款英文字体》1. 精致黑体字型△  汉仪旗黑△  冬青黑体简体中文△  方正兰亭黑简体 （方正最火的黑体系列之一，现代感很强的黑体字）△  方正悠黑 （我个人非常喜欢的一套，笔画字型都很精致）△   思源黑体 ( 我本人用的最多的字体，因为易用耐看，而且是免商用！)2. 优美宋体字型△   方正书宋简体△  方正兰亭刊宋△  思源宋体（前段时间刷遍朋友圈的字体，以后宋体字不用愁）△  造字工房俊雅锐宋（造字工房这套字强化了宋体“横细竖粗”的特点，同时又去掉了笔末装饰，让这套字体整体感既有设计感，又不失传统韵味。）△   造字工房言宋3.现代美术字型△   文悦新青年体（这套简直就是网红字体，应该是近期最火爆的一款，适用性很强，特别是用在海报，banner等设计上，像奇葩说这些综艺用的也是这套字体。）△   文悦后现代体（文悦科技这两套字体我个人都特别喜欢，设计感很强的美术字体）△  造字工房尚黑（造字工房早期的字体）△   锐字逼格青春体（虽然字体名字有点low low的，但是有时候会用得上这类字型）△   GD-高速道路ゴシック（这套是日本字体包，但里面有很多汉字可以借鉴，日本字体的字型处理总有一种独特的 ...继续阅读 (9)

编者按：如何给用户制造信赖感和惊喜感，一直是体验设计的难题，这篇好文作者总结了关于这两方面的经验，建议阅读。信赖感近和业务方讨论产品体验目标时，「可信赖」一词被多次提到，那么都有什么因素会影响到产品的可信赖感？如何通过体验设计手段，打造能赢得用户信任的产品呢？在此抛砖引玉，欢迎探讨。专业的整体印象专业与信赖的关系密不可分，展现出产品的专业程度，有利于快速获取到新用户的信任，在高质量的内容基础上，我们也可以通过设计进一步固化「专业」的印象。1. 氛围渲染在上图这个案例中，产品关键功能的截图并不是孤立展示的，而是嵌入在具体的使用场景（老板和员工正在交谈）之中，通过高质量的场景图/视频，可以有效强化用户对产品专业性的印象，这种方式在不少 B 类产品首页都能见到。除了以上这种形式，在页面中透露出产品当前已经取得的成就，比如具体的数据、来自已有用户的正面评价等，也是常用手段之一。2. 关注细节细节上的设计心思虽然不是所有人都能感知得到，但也是有效表达产品专业态度的手段之一，粗糙的界面、令人困惑的文案、糟糕的一致性、直接暴露的系统错误信息，不专业的设计表现，影响的是用户对产品整体的信任。3. 适当保守虽然我们平时都讲要设计创新、要突破常规，但对于专业可信赖有着高要求的产品，一味追求酷炫的交互视觉表现，有时反而容易引发用户的疑虑，并非所有人都是热爱新鲜事物的年轻一族，适当的保守对于营造产品专业印 ...继续阅读 (17)

昨天推荐了10设计原则相关的书籍，今天这10本都是关于设计流程和方法的，大咖推荐，质量有保障。Book 1：《Communicating Design》Book 2：《UCD火花集》Book 3：《绝密原型档案》Book 4：《UX权威指南》Book 5：《精益设计》Book 6：《重塑用户体验》Book 7：《交互设计：设计思维与实践》Book 8：《Metro风格解读》Book 9：《和谐界面》Book 10：《用户体验面面观》Book.1 《Communicating Design》概念设计不是Hozin凭空发明的，这是前辈们给我们的肩膀。本书第一版译作《设计沟通十器》，第二版译作《高效沟通设计之道》，书名和交互设计没什么关系，实际上是一本讲述交互设计流程的书，特别是「概念模型」部分，将给予设计师更多系统思维帮助。绝大部分交互设计师会按照此书的方法：「概念模型」→「原型设计」Hozin对「概念模型」进行了进一步抽象，并且增加了一个步骤：「概念设计」→「信息架构」→「原型设计」有关「概念设计」的基础理论，交互设计基本流程方法，欢迎阅读此书。Book.2 《UCD火花集》那一年，每个人都在很认真的写文章；那一年，大家一起完成UCD本土化的奠基。这是一本共创的书籍，来自若干设计师的博客，他们中的有些人已经成为了业内大牛，有些人坚持多年翻译和原创设计教程，你能从字里行间看到当年他们的 ...继续阅读 (12)

招聘季，无论新人还是交互老鸟，都将在「互联网公司鄙视链」上挣扎翻滚。面试官常会要求：介绍一下你的作品…..如何展示交互作品这件事，这篇文章系统总结一下。这里涉及四个方面的思考：交互设计师在各种公司的角色介绍你的作品，面试官期望得到什么？如何正确整理Portfolio介绍作品，迎接挑战交互设计师在各种公司的角色交互设计是一种技能，在很多公司，产品人员都要兼顾画原型，倘若需要专职的「交互设计师」，几乎一定会成为设计资源。在投简历之前，请先审视自己的经验与技能，认真思考与JD匹配度，然后搜集目标公司的相关资料，对未来工作状态进行了解。成熟型公司包括BAT在内，只要拿到C轮+融资，主要转化率相对稳定，分工细化，大团队协作，几乎一定需要专职承担交互设计的角色。你要明确：在这种企业里，大家各司其职；产品人员专深研究业务，忙于分拣大量反馈和过滤需求（优雅的和兄弟部门撕逼）；UI规范体系完熟，需要交互设计师快速理解PRD，拿出解决方案；甚至会有多组设计师进行内部PK，大家以为的优秀设计，未必是最终上线的版本。总之：他们需要的是多样性解决方案，一个需求抛过来，你能提供两种以上的原型方案，一个不可或缺的狠角色。动态成长型公司（内部创业项目）通常拿到A轮+融资，或者含着金钥匙的内部创业项目，刚刚完成初级产品打磨，深耕细作过程中，产品人员撸原型撸到手软，在团队扩充的过程中，需要引入「交互设计资 ...继续阅读 (11)

在传统的交互设计流程中，比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等，相关的 UCD设计方法很多，而基本框架则是大同小异。在规模较大的公司与设计团队里，作为交互设计师的我们也习惯了运用这种按部就班、环环紧扣的推导方式，帮助自己有理有据地应对各种「为什么这么做」的挑战。但在实际工作中，并不是每一个项目都是按照理想化的线性设计流程执行，除去日常迭代类的需求，即使在相对完整的项目里，依靠某个灵光一现的想法或者老板一句命令而启动的情况并不少见，当遇到这种情况时，有些交互设计师会尝试进行一些反向推导（先有结论，再找支撑结论的原因）来强行圆回自己习惯的设计流程，降低在评审中遭到挑战的可能性，即使自己内心并不认同这样做。可是，被我们奉为圭臬的那些经典交互设计流程与方法，真的足够好吗？当我还原了一下自己在工作中处于沉迷运用各种方法阶段时的状态时，我开始意识到：我之所以喜欢这么做，更重要的原因是为了减少自己在设计中犯错和遭到挑战的概率、增强对别人的说服力、完成自己的专业沉淀等，而不是设计出真正令用户喜欢的产品。再回顾那段时间的设计产出，虽然貌似专业正确，却多少存在循规蹈矩、缺乏惊喜、创新性不足等缺点，没有灵气和触动人心的感觉。而随着改变这种局面的冲动感越来越强，我开始感到传统交互设计思维可能并给不了我想要的答案，甚至可能就是造成这种桎梏的原因，我需要从中 ...继续阅读 (11)

UX Coffee 设计咖 是一档为产品设计师和关注用户体验的同学准备的播客节目。三位主播都在硅谷工作，每期节目我们会邀请业界大咖聊聊和用户体验设计相关的事。作客 UX Coffee 播客第 22 期的嘉宾是 Uber 产品设计师 @夏梅杰 。他于 2016 年获得佐治亚理工学院人机交互硕士学位，在这之前，他学过工业设计，也做过视觉传达，在飞利浦修过灯泡，也设计过中国电信的门户网站。现在，他在 Uber 负责司机的注册流程，帮助司机在更短的时间内完成注册、开始工作。Uber 是一个国际化的产品，司机来自世界各地，拥有各式各样的背景。对于设计师来说，如何去了解不同国家地区的司机，为他们创造最满意的体验，是一个很大的挑战。UX Coffee：你是在 2015 年暑假加入 Uber 实习的，2016 年毕业后，你回到了 Uber。你在 Uber 主要负责的是哪一块的设计呢？夏梅杰：我实习时最大的项目是新司机的注册，包括安卓端、移动网页端和桌面端的流程，现在也在负责这一块。Uber 司机的注册其实是比较繁琐的，因为这是一份工作，所以会有法律法规的要求。而且 Uber 司机是给别人提供服务的，所以需要背景调查，包括车辆的审核、驾照的上传，从页面数量上来说就很多了。我的任务就是帮助司机们更快、更方便、在更短的时间内能够完成整个注册的流程。△  Uber 的司机注册入口用户不识字、看不懂图标，怎 ...继续阅读 (11)

作品被品评：感觉不对啊。设计师先懵一下，然后不知所措的改啊改，废寝忘食，一直改到大家都满意……这个故事每天都在上演。想知道如何摆脱这种困境，今天这10本设计原则相关的好书就别放过了。优秀的设计总有对应的人群，掌握基本的味觉体系是基础技能。夯实基础，才有可能五味调和。味觉与原则对应关系每个国家和民族，都有自己的味道。《吕氏春秋•本味》提到“调和之事，必以甘、酸、苦、辛、咸”，现代人对味觉的总结已经远远超过这五种，选取其中的10种味道，对应10本设计原则书籍。辣，Book＃12《简单法则》香，Book＃13《通用设计法则》咸，Book＃14《秩序之美》酸，Book＃15《认知心理学》甜，Book＃16《赢在用户》色，Book＃17《信息可视化》与《图解力》麻，Book＃18《微交互》苦，Book＃19《Landing Page优化权威指南》臭，Book＃20《设计败道》鲜，Book#21《用户体验与可用性测试》Book.1《简单法则》一本关于「简单」的小册子，书本身就非常简单，句句切中要害，没有任何废话。作者「前田约翰」，世界知名图像设计师、视觉艺术家、IT科技专家，兼具理性思维和艺术气质。总结《简单法则》，10原则，3个要点。1. 减少：达到简单的最简单方法，就是用心割舍2. 组织：妥善组织能使复杂的系统显得比较简单3. 时间：节省时间会让人感到简单4. 学习：知识使一切变得更简单5 ...继续阅读 (10)

所有的进步都存在于舒适区之外，所以，不论你是设计师还是前端，是产品经理还是运营，走出舒适区不停学习是进步的必由之路。学习的方式有很多，听演讲，参加分享，在微博和知乎上搜寻问题，都是学习的方式。那么，国外的用户体验设计师和产品设计师，他们每天都在学习什么？他们一样在Quore 上搜寻别人的分享，与同行分享交流，学习在线课程。用户体验设计师Guy Ligertwood 根据他的经验，将用户体验设计师值得学习的在线课程根据领域总结梳理出来。下面这个列表中所涵盖的56个链接，就是如今国外的用户体验设计师们正在学习的课程。UX设计BlocIntensive UX training with a mentor (Study: 1. 5 years at 15 hours per week)跟着导师做高强度UX集训（每周15小时，1年半课程）Career FoundryBecome a certified UX Designer (Study: 10 months at 15 hours per week)成为认证UX设计师（每周15小时，10个月课程）CourseraIntroduction to UX Design (Study: 5 weeks at 2 hour per week)UX设计入门（每周2小时，5周课程）Design LabJoin their UX Academy and ...继续阅读 (14)

报名方式1. 关注优设微信公众号：youshege （扫描下方二维码亦可）2. 在优设微信公众号回复”讲座”，即可进入报名环节。讲座地点讲座届时会在腾讯课堂优设官方频道进行讲座时间5月27日 周六晚 20：00正式开始讲座届时会在腾讯课堂优设官方频道进行嘉宾介绍丁汀嘉宾behance主页 www.behance.net/libra高级三维动画师从业七年，现r+design设计师曾就职于TMSTAR、东方风行传媒集团曾参与CCTV、Vancl、宝马、湖南卫视、金姐聊极速、深圳卫视、中韩梦之队等各大项目。嘉宾作品分享内容概要老师和小编交流时表示：C4D是一个非常神奇的软件，刚开始接触的同学可能会摸不到它的规律。这里我将通过C4D特有的模块来快速的制作一张海报，全面展现C4D的快速，便捷与强大。特有的mograph模块是C4D的独门绝技，通过强大又丰富的预设库让制作更加轻松。带大家了解基础的vray渲染器，了解基础的布光技巧，通过一个案例串起整个流程。1. 关于C4D和vray2. 使用基础的mograph模块3. 了解基础的vray材质和灯光4. 整个案例线上演练PPT内容（小部分）以上只是部分内容，想零距离接触丁汀老师，观看更多精彩内容，请记得准时来参加优设第90期线上公开课。不见不散^_^温馨提示Q1：在微信里，我把报名截图发给管理后，管理员她为什么一直不理我呢？A：因为管理员微信 ...继续阅读 (6)