@-朱宇軒:当一个想法出来之后我们都知道先用线框画下来，但是画着画着，总觉得不对劲，总觉得加上视觉元素之后才能真正看出效果来。有一个月没更文章了，最近毕业季加欧洲杯，实在是没能匀出时间来。说起毕业季，16届的童鞋可能大部分已经找到了心仪的工资，傻乎乎的就上起了班了（我就是），17届的师弟妹们也要开始找实习了，活好的可能已经开始实习了。腾出时间为大家分享一篇关于线框图的进阶文章，希望大家能找到价值。十一年前的我21岁，刚毕业，进了一家小agency做视觉设计，大家也都知道，做agency肯定会遇到一言不合就改改改的残暴客户，他们才不会管你鲜肉不鲜肉。做了段时间我学精了，开始学会用电子档的线框图去见客户，然后尝试和他们讲清楚一切。线框图嘛，好画好改，跟客户坐而论道根本不虚。一般走这样的流程的话，客户就很少会提出一些匪夷所思的新“需求”，项目往后推荐大方向也不大会改变很多了。回顾职业生涯的这段傻白甜时光，才发现原来这样的做法其实是误用了线框图这种设计工具，并没有发挥到其真正的价值，因为我用错了地方，或者说用得太过片面了。以我这个从业11年的老司机现在的眼里看来，线框图其实就是将项目细分成好多小任务，然后一步步的完成，将项目从“探索期”推进到“准备认真搞起期”，而上面提到的，防止用户或者领导改变主意杀你一个措手不及只是其中一个小小的方面。当时我没有留意到，其实线框图的更深层次的意义是帮助你 ...继续阅读 (17)

@洪涵滴滴：本文记录了我对 GUI设计中阴影效果的一些思考。从「光」出发，记录了运用好「光源」的几个点。然后选取了几个优秀作品介绍「真实」与「夸张」的阴影设计效果。最后分享了我自己在设计投影时的几个 PS 技法，希望对大家有所帮助。转载无限欢迎，但请注明「作者」和「原文地址」。转载请在文中保留此段，感谢您对作者版权的尊重。一、谈「影」先谈「光」有光才有影。如果理解了光与光对物体的作用，相信就会比较好理解各种阴影的形成了。因此我想先和大家聊聊光~1. 光的基础逻辑当光射在一件物体上时，会产生亮面、暗面以及投影。但我们细心观察还可发现物体会受到来自其他物体的反射光。（光的基础逻辑）2. 关于光源色、固有色与环境色光源色是指射在物体上的光的颜色；固有色指物体本身的颜色（当然我们所看到的所谓「物体颜色」是由它反射的光决定的←好像是初中科学的内容，跪）；环境色是一个物体受到周围物体反射的颜色影响所引起的物体固有色的变化。3. 光源的游戏当我们在做设计、绘画、摄影等等的时候，灵活运用各种光、各种角度，就能营造出完全不同的氛围。好的投影效果，避不开好的打光水平。我在这随意截取了几个苹果官网的产品展示效果，供大家参考。（苹果官网产品展示效果）4. 物体材质（随手拍）物体材质是非常重要的一个属性，不同材质会对光产生不同的反射。如上图随手拍中，我们能看出鼠标表面是非常光滑的，因为它对光产生了较明显的镜 ...继续阅读 (24)

作为设计师，尤其是资深的设计师总会说，软件只是工具，真正重要的是思想。我好像也说过类似的话。但是，即便只是工具，也确实能帮你提升效率。这个时代，用恰当的工具做恰当的事情，会让你少走很多弯路。今天诚意分享给大家的是外国一名自称是设计师又是开发者的全才“美工”Jonathan Z. White的文章，介绍给设计师可以掌握的10个高效工具。我保证，看完后，你又会发现你OUT了~~工具不能作为衡量设计师的标准，但是却能帮助我们提高效率。这周介绍一些我使用的工具。希望你能发现一些新工具来帮助你优化工作流程。AtomAtom是通过Github创建的一个开源文本编辑器。在过去的一年里一直是我的主要编辑器。Atom自带的功能全面，就像一个内置的软件包管理器，它智能而又自动。超棒的一点是，使用Atom就可以使用APM或它的GUI界面，并且无需修改配置文件。但性能上需要注意的是，当Atom首次发布时它运行的很缓慢，然而今天它的运行速度很快，只有开大文件时才会运行缓慢。DragDis作为一名设计师，我总是在寻找灵感。 DragDis是一款能够让我保存并找到灵感的工具。使用起来非常方便，只需要安装Chrome插件就可以了。我每周都会整理我的DragDis文件夹，并且每周都会创建一个新的灵感文件夹。这是观察我的设计品味如何随时间变化的好办法。DragDis有一个整版的网格视图，也可以作为非常棒的情绪版。iT ...继续阅读 (15)

你剪一块布，就能遮羞，能弊体。你多剪几块布，缝一件衣服，就体面了。 你精心裁剪布料，细心缝合，穿着就舒服了。 你再精心选料，精心裁剪，精心缝合，精心点缀……穿衣就成了享受。设计因此而生。你认为什么是交互设计？你觉得交互设计师的核心是什么？你怎样看待交互设计师在每道工作环节中的沟通与职责？类似这样的问题经常会有一些职业新人以及面试官问道，也有很多专门讨论这些的话题和文章。后面两个问题答案因人因公司而异，答案也很多，因此这里咱就从第一个问题去剖析下。什么是交互设计？我认为所有问题类型最难回答的就是“为什么”，因为很多为什么直指事情本质。那么交互设计的本质是什么？交互设计的点现在我们提到交互设计，大多数人的理解是认为它是运用于互联网的。而实际上不管是在计算机领域还是实际生活中的方方面面其实我们都会涉及到这儿词：交互。我们先来看一下词条释义，交互从词面解释为：交替；互相；彼此。那这三个词又是指什么呢？我们举个例子：甲问乙：你吃饭了吗？乙答曰：吃了，你呢？甲答曰：还没，本来想跟你一块吃的。甲问乙话，问完之后乙回答，并且甲说话的时候乙保持沉默，乙说话的时候甲保持沉默，话语权在两人间来回切换，这就是交替。互相跟彼此，是指这里存在的甲乙双方，并且甲乙并不是一个人，即有关联，又存在差异性。如果这个对话变成甲或者乙单独一人说话，那就不属于交互了。这是生活中的交互，而在计算机领域，交互设计定义为“参与活 ...继续阅读 (14)

想让你的图片一秒变得有逼格？试试在上面加点文字吧！今天@笔戈科技的兽兽同学分享了几个简单实用的加字方法：隐形线，隐形框和超级放大法，分分钟从《乡村爱情》到荒诞电影海报。为了您和他人的用眼安全，请仔细阅读以下这份加字指南。真的不知道是哪位仙人板板说的这句话，于是以下就是我国常见的加字水平：△ 厕所情感类刊物畅销书： △ 窩の眼真嘚恏卵痛 △ 路边摊小卡片我从来没试过这么希望自己是盲僧。为了您和他人的用眼安全，请仔细阅读以下加字指引。 先来一些优秀作品洗洗眼睛：配图文字设计第一招：一齐遮百丑没看懂没关系，先以大家（父母）喜爱的《乡村爱情》剧照为例：先降低饱和度，把逼格 UP 一下↑重点来啦注意了（拍黑板），我们沿着刘能的视线方向拉出一条对齐线，在根据这个水平线做出垂直的对齐线。在这对齐线的基础上，靠右对齐文字。TIPS：如果你没把握设计出恰到好处的汉字，那么就用英文代替吧。摇身一变，这是哪部荒诞派喜剧电影的海报？这种让文字排版工整、同时牵动图片情绪的辅助线，我们称之为：排版文字的时候不仅是普通的左右上下对齐，更要注意与隐性线条对齐。配图文字设计第二招：一框遮百乱秩序产生美，如果你的图片本身是杂乱无章，乱七八糟的，要么你换一张，要么就用框，框住「狂野的它」。这一张叶片排布杂乱无规律的照片，我们要做的就是把这样的场景桎梏在一个视觉单元之内，使之看起来更干净整洁 ...继续阅读 (12)

在设计移动端APP的时候，最重要的事情就是要确保APP的可用性和易用性。如果一款APP可用性很低，没有什么实际价值，用户没有任何理由去使用它。如果一款APP是有使用价值的，但是需要用户花上大量的时间去学习如何使用，用户也不会使用。优秀的UX设计需要注意以下两点：想要满足可用性的要求，APP应该以用户为中心。用户安装你的APP是因为他们需要解决一个紧迫的问题。因此，每一款APP都是带着强烈的目的使命的。想想用户使用这款APP的主要目的是什么，然后聚焦于他们的核心目标，扫清他们在使用过程中的障碍。用你的UX设计带给用户清晰明了的感觉。如果想要用户在使用你的APP时感觉很爽，你必须让用户明白这个APP是做什么，怎么使用它，并且在使用时没有任何犹豫和疑义。我觉得下面的9条黄金法则，可以创造卓越的用户体验：1. 拒绝杂乱无章用户的注意力是相当宝贵的资源，应该被吸引到重要的地方。界面上太多的信息会让用户觉得杂乱无章：每一个新增的按钮、图片和文本都会使界面更加的复杂。图1 杂乱的界面在桌面应用和网站上就是一个糟糕的设计，在移动端它仿佛又糟糕了一百倍！Antoine de Saint-Exupéry（译者注：法国著名的作家、飞行员）有一句名言“完美就是恰到好处，没有任何多余的部分”。在移动端APP设计中，剔除一切非必要的元素，因为清晰的界面更便于用户理解。一个简单的规则：一屏只放一个主要的操作。A ...继续阅读 (26)

听说ps里有个强大的命令，叫做“调整边缘”，今儿我们就来拿他开刀，看看到底怎么个强大法。首先我找度娘借了一只猫，如果让你来抠，你会怎么办？对，就是这只猫。。。反正不管你信不信，我抠图起手都是魔棒，这是当初在影楼干活儿留下的后遗症，然后你看到的，这容差太坑了。。。用快速选择，更坑（不得不说有时候快速选择的确好用，但是大部分时间都会被它坑爹的容差判定方式坑到懵）所以，如果你手不抖，可以试试套索，当然我是不咋喜欢用。我最喜欢的是这个组合，看到左下角没，就那个里面有个虚线的矩形框，双击它，跟我设置一样的参数。然后，q一下，进入快速蒙版模式，b一下转画笔（注意检查前景色要为黑色），涂抹要抠出来的地方，q一下，你就会得到一个选区。Ctrl+alt+r进入调整边缘，（对，就是从这里开始让人懵比的，尤其是那个半径，半径什么鬼？半径什么鬼？半径什么鬼？）曾经我懵了好久，直到有一天我点了下这个面板右上角的“显示半径”，欧耶，原来这就是半径——假设我们之前做的选区有个边缘，以这个边缘为圆心排上一圈圆不就是这个状态？换句话说，这个半径，就是用来计算选区边缘的范围啊。啊逗逼很贴心的准备了一个智能半径的选项，勾选了之后就可以根据图像判定哪些地方那个边缘可以宽一点，哪里可以窄一点，也算是方便了很多。另外，要是这个边缘不是你想要的，还可以用这两个工具调整。为了方便检查抠图的效果，啊逗逼还贴心的准备了各种观察模式。 ...继续阅读 (10)

对于LOGO和图标概念上的异同的争论，最近似乎逐渐多了起来。这一切缘起于著名流媒体服务商 Netflix 的一个微小变动：Netflix 更新了他们的图标，而LOGO依然保持不变。这件事情引起了Twitter 上大量用户的讨论，图标和LOGO，两者在概念上有哪些区别，在功能上有哪些异同呢？品牌和营销专家通常认为，LOGO 是一种影响和促进用户行为的一种手段，同时也是一种特定的沟通方式。许多企业将LOGO视作为品牌的视觉代表以及品牌和用户之间情感联系的纽带。但是，不管你信不信，LOGO和图标是两回事。LOGO 是品牌设计的一部分，然而图标则是作为快捷方式和入口而存在的。想要完全理解两者的差别，我们得从品牌设计和业务的运作规律上出发。LOGO是从哪里来的？最早的LOGO设计可以追溯到古希腊时期，当时的最高统治者会将法律和功绩铭刻在硬币上，作为一种社会身份的象征。可以说，在这个阶段，LOGO设计是一种原始的社会组织的方式，而今天的奢侈品品牌设计师依然沿用着类似的方法来建立自己的品牌帝国。LV，CK，这些品牌LOGO 被用户们穿在身上，作为自己身份的象征。在此之后，LOGO设计进入了下一个阶段。类似于今天LOGO的设计在13世纪的时候出现了，当时一位金饰匠人 Potters 将他的个人标志作为LOGO 铭刻到他的作品上。到了维多利亚时期，各种各样的LOGO 设计开始大行其道，对于商业机构而 ...继续阅读 (20)

在互联网产品中，除了内容型外，一些功能型的产品信息内容也是相当巨大的，特别是管理控制系统，业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助。上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题，当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种，我这里主要围绕卡片式设计的理论进行深入探讨，相信大家对卡片式设计已非常熟悉，虽然已流行了好多年，但是设计形式并不是随着使用年龄的增长而消失，芝加哥学派路易斯.H.沙利文提出过：“形式追随功能”就能说明这一点。最近笔者在项目改版中也运用了相关卡片方法，发现效果不错，所以希望借在项目里的思考与尝试，抛出引子，供大家参考。卡片式设计的定义在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。如上图，大家可以看出，他们普遍具有以下特点：一清晰直观，二简单易懂，三信息模块化。比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。如上图，现在卡片式设计的应用场景非常广泛，最有代表性的是微软Wi ...继续阅读 (18)

有句话说在前面——好看就是生产力，在app中是真实存在的。一、品牌篇品牌色从大的来说是VI需要优先考虑的，考虑点如下：品牌色与行业属性之间的关系相对来说不同行业是有其固有的品牌色的，比如机械行业，通常给人的第一意向就是明黄；而科技、互联网企业给人的第一印象就是科技蓝（原谅我用这么俗套的词）等。在对于品牌色的决策过程中，行业属性是其重要决策部分。品牌与竞品之间的差异化通常在市场上我们会看到多个同时在满足用户同一需求，但是由于其品牌色的不同，会对用户对于app下载决策的影响。小恩爱、Between、恋爱记三款产品的核心功能都是做情侣记录、聊天等的需求。但是由于小恩爱的icon相对于其他两款app更加跳脱，因为在下载量和市场占有量上远超其他产品（当然还有产品功能和运营等多方原因，在此仅从色彩来谈）。作为几乎同期同需求的产品，下载量差异巨大。下载量数据来自腾讯应用宝品牌色的应用范围有一些产品最开始是从线上产生的，相对来说对于线下物料、VI的思考不足，同一颜色在不同屏幕的色差等。因而会容易产生线下物料印刷等与线上视觉之间有较大色差，线上视觉形象线下实际应用较难等问题。因而在最初考虑线上品牌的同时，也需要从VI的角度考虑产品后期的品牌营销传播等问题。记得张小龙曾经说最后悔微信用绿色，因为在不同的Android手机上，绿色差异非常大。（如果错误请纠正）品牌色与用户习惯认知之间的印象和策略相对来说 ...继续阅读 (52)

写在前面去年上半年，我开始着手推动项目中响应式设计的落地。以官网优化需求为契机，主动去做了响应式的页面设计，也说服了产品、设计和开发的相关同事一起把它上线落实，但不幸的是，由于各种方面的原因，比如，生搬硬套的PC模块，无差异化的设计使得移动端阅读不佳，导航兼容性有限等等原因，上线几个月后又悄然下线。我不禁反思，项目中是否应该推行响应式？今年年初重新启动了全站响应式项目，从产品、交互、视觉到开发，各个角色全方面参与了响应式项目，最终门户的页面实现全面响应式。概念Ehan Marcotte 为A List Apart写过一篇介绍型的文章 <响应式网页设计> 。文中讲到响应式的概念源自响应式建筑设计，即房间或者空间会根据其内部人群数量和流动而变化。「最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护。」Web响应式设计的概念与之也非常相似。在如今技术飞快发展的时代，一向是以快论英雄，设备 ...继续阅读 (17)

网易高级设计经理@我是阿智给同学们分享他的开工前会执行的3个流程，可以快速帮你了解问题并做出解决方案，非常实用，建议阅读。一、了解问题，制定计划我们都知道，错误的解决方案是可以纠正的。哪怕它需要一天、一周，甚至更多，无非是效率而已。但是，如果连问题，或者痛点都不存在的话，你所做的事情就没有任何意义了。所以，养成深究问题的习惯，避免在问题不清楚、目标不明确的情况下做设计，这一点对于交互设计师来说，非常重要。作为制定一项交互设计工作计划的开端，我们可以从探寻以下几个问题开始：为什么要做这个功能？（业务目的）产品期望得到怎样的成果？（业务目标）谁来使用这个功能？（目标用户）他们为什么要使用这个功能？（用户需求、体验目标）如何让他们都来使用这个功能？（行为设计）在了解这几个问题的基础上，逐步展开一系列的动作，有序落实交互设计的前期工作计划。主要包括：1、分析业务需求 —> 2、分析用户需求 —> 3、分解关键因素 —> 4、归纳设计需求，明确设计策略。从计划，到执行、检查，再到纠正，是一个完整的交互设计工作循环过程。并且这四个过程并不是运转一次就结束，而是周而复始地进行。一个循环完了，解决掉一些问题，还没有解决的问题就进入下一个计划，不断循环、迭代。没错啦，这是著名的PDCA循环！二、归纳需求，分解目标当一个产品在立项的时候，通常就会有一个明确的产品目标。比如，“在三年内 ...继续阅读 (30)

2016年手机系统和手机品牌表现大局观 目前用户最主要使用的手机中，iOS手机占1/4，占比较去年有所上升。注：本次调研中，同时使用2台及以上手机的用户占38%。这部分用户只针对其最常用的手机做答，下同。 当问及下一个手机会选择什么系统时，iOS用户的选择更明确，表现出更高忠诚度。和去年同期相比，Android用户的忠诚度提升更明显（+33%）。 在手机品牌表现方面，iPhone是占比第一的独立品牌（25%）。华为成为用户最常使用的安卓品牌，小米，三星分列二三位。 中低端市场中，国产安卓品牌在占有绝对优势。中高端市场中，华为与三星占有一席之地。高端市场是苹果的天下，三星是其中能与苹果抗衡的唯一安卓品牌。苹果——比稳定更稳定iPhone，智能手机市场霸主，这一年的表现也是所有品牌中最没意外的一个。规律的发布时间，可以预期的新机型号，死心塌地的用户群，连换代数据，都比稳定更加稳定。iPhone新机型换代速度稳定iPhone6、6 plus和iPhone6s、6s plus在上市7个月后占比没有显著差异。 从新机型到成为街机所需要的时间稳定新款iPhone 从面世到成为街机需要1-2年时间。2015的街机是2013年发布的iPhone 5s，而2016年的街机是2014年发布的iPhone6。华为——距下一个苹果还有多远？ 华为 ...继续阅读 (14)

@呆呆丶L：今天从交互角度给大家讲讲弹框的设计，喜欢的同学可以赞下~有不足之处可以留言告诉我哦~近期大家都在反馈说文章的配图好少，如果多一些图结合文字会更容易理解。所以我绞尽脑汁，找了不少图，等会慢慢给你们上~嘿嘿嘿~~~相关文章：《腾讯设计师做了100个弹框后的总结》正文:最近很多文章都在说弹框设计，其实一个弹框就是一个弹框而已，没那么多讲究。我用一句话就可以概括，这句话叫做——扩展句，然后我把它扩展成了一篇文章。（有没有被我调皮的样子萌到？爱你们~）本来传统意义上的弹框一般有三种：1.系统自动弹出的提醒2.帮助用户快速的做出选择3.对用户的操作给予反馈 但是现在还多了一种，而且很多产品都在用这种弹框方式，因为它很赚钱 — 广告。所以广告类的弹框已经被我列入弹框设计的第四个类别，今天就跟大家具体来说说这四块内容。这篇文章注定篇幅比较长，但绝对是值得你收藏的文章。在说之前，先来给这几个类别定个清晰的术语(逼格起来没):系统自动弹出的提醒 –系统提示帮助用户快速做选择 –操作引导对用户的操作给予反馈 –信息反馈广告 –广告弹框(想不到了，脑子不好使) 系统提示其实系统提示这一种弹框，就可以写很长的篇幅，但是为了不把大家越带越深，免得逻辑理不清，所以我说几个相对重要的。有一种是大家见得最多的，就是评分类弹框 ...继续阅读 (8)

这个世界从来没有任何一件工作叫“钱多、事少、离家近”，人生有知有力的三个十年，需要扎扎实实的靠自己。找工作，谈何容易。身边的朋友，有的已经尘埃落定，有的还在执着坚持。签得价钱高的，嫌累嫌远，签得低的，怕不够花。昨天翻闲书，看到了对何经华的采访，觉得很好。20多岁是一个让人迷茫的年纪。何经华当年也是矮矬穷。20多岁的史玉柱在浙大学数学。20多岁的马云四处碰壁。20多岁的王江民因小儿麻痹而一无所有。20多岁的王石在大戈壁上当汽车兵。后来，他们都牛逼了。所以我常常想，我是不是活的太顺了，我们是不是太顺了。我常说人生有三个阶段，第一个阶段是你“无知无力”，就是你知识不是很丰富身体也没长好的时候，你是小孩在念书。第三个阶段是“有知无力”，你积累了很多知识经验，可是你年纪大了，老了做不动了。中间三十年，是你有知有力的三个十年。第一个十年你应该要投资自己。什么叫投资自己？你有没有花很长一段时间，就像我们练功夫一样，先把马步练好。第一个十年你不要追求工资。你今天的工资可能是三千块四千块，我说我现场加你两千块钱一个月的工资，你告诉我你的生活会改变吗？不会的，奔驰宝马你还是买不起，大房子你也买不起。在第一个十年大家工资的差异是没有差异的，你的同学也许早你一年升个什么组长、什么经理，那也不重要。最重要的是你在第一个十年你要扎扎实实地投资自己。当然，现在年轻人他会更多地看到自己以前的同班同学如何优秀，薪水 ...继续阅读 (24)

@米田miten近段时间，不少朋友问我怎么准备作品集。他们中有在校学生，有已工作者，甚至设计爱好者。我在收集和整理时，将部分资料整理成这么一篇文章分享出来，希望对大家有帮助。患者：找工者和整理癖症状：情绪时而亢奋，时而低落，逐渐出现多种人格分裂的症状。可能偶然伴随脸上爆痘痘的情况出现。本期关键字：作品集，简历，求职，整理，外面的世界本期目录：你为什么需要作品集1）院校学生:在职场，特别是初入职场的学生，最为弱势。如果你是艺术生还好，在学校的经验能填补作品集的空虚；如果你非艺术生，作品集有技巧的打造，更容易踏入设计师的大门。2）专业人士:一般，按经验能分为三类。初阶，争取时间多尝试不同的作品；中阶，挑选最具有代表性和针对性的作品；高阶，你这个人本来就是作品。还有超神级，作品已经和人类历史捆绑在一起了。3）留学党：基本所有国外的艺术院校，都需要准备作品集才可以申请。有趣的是，这份作品集更关注你设计过程的纪录，而不仅仅是最终效果。4）艺术爱好者：作品集可能是个笔记本，可能是些图片，可能是朋友圈里的动态。形式对你已经不重要，好好享受玩设计的过程。一、投递作品集有什么基本技巧？坐下来，喝口水，继续作品集话题。下面的文字，主要针对是上面所述前三类人群。如果你研读过《学习之道》，你能体会到技巧，有时候就是快速学习的捷径。针对不同的环境，都能快速找出最佳的路径。1）邮箱投递方式最常见的投递方式，也 ...继续阅读 (22)

 读者对象：刚接触产品设计的视觉设计师 序：对于刚入行的新人，可能觉得设计规范是一件很高大上又很让人头疼的事情，面对这么多设计模块感到无从下手。设计规范如果考虑不到位，往往会出现规范太空洞缺乏实际指导意义、规范太死板影响设计发挥等问题。这篇文章会从新人的角度出发，总结一些设计规范要点，算是一次温故总结的分享。  一、设计规范有什么用？设计规范能为团队解决不少问题，并提升工作效率，主要体现在以下三个方面： 1、解决多人协作时控件混乱问题一个大型项目的视觉稿，往往会有几十个甚至是上百个页面。对于第一次做这种大项目的设计师，如果在视觉风格成型后没有做规范的话，哪怕自己一手包办全部页面，恐怕也很难统一视觉样式。在创作阶段设计其他页面时，如果没有规范来指导，设计过程中很容易产生细微的出入，导致每个控件都会有细微的差别，经常会做着做着就出现控件不一致的问题，比如A页面的按钮是4PX圆角，B页面的按钮又做成了6PX圆角，再后来做的C页面的按钮又做成了2PX圆角。如果一直埋头苦干赶页面，没检查出这些问题，页面做的越多错误就越多，到时候几十个页面的控件都要修改，那可真是苦不堪言啊。 一个人做页面尚且会出现这种样式不统一的问题，更何况是多人协作。因此，在进行多人协作一个项目前，可由主视觉设计师出一份视觉规范，其他一起协作的几个设计师遵循这个规 ...继续阅读 (19)

我们在这个“极简主义”的世界生活已经有些时日了，之后又将去向何方？过去几个月来，设计创新领域的先行者们，将“极简设计”推向了一个新的高度。Facebook、Airbnb和Apple都遵循着近似的原则，简化它们的核心产品，这种“化繁为简”（Complexion Reduction）的新趋势就在它们的移动端设计中得到体现。“化繁为简”究竟是什么？你是不是从没听说过“化繁为简”的趋势？那是肯定的，因为这只是我创造出来的术语。最近我留意到一种新的趋势，它超越了扁平化设计，也超越了极简设计，独立性在逐渐削弱。有些人会说，这只是极简设计运用到移动端领域时开启的新阶段，但我认为它截然不同。有一些明确的共性和特征可以定义这种新趋势。所以我决定给它起个名字。起个名没什么问题吧？这种横扫硅谷的热门新趋势，有以下这些决定性特征：加大加粗的标题更简单更普遍的图标减少彩色的使用结果呢？许多我们喜爱的应用界面，开始越来越像是出自同一品牌。证据早在5月份，Instagram发布了新设计的UI时，我第一次注意到这种新趋势。他们此次改版的变化，其中包括去除了无处不在的蓝色和深灰色，加粗了标题，简化了底部导航栏和图标。只留下黑白界面和醒目的标题，突显内容，功能清晰。我很欣赏这套简洁有序的界面，并且同时想起我仰慕已久的另一个平台：Medium。Medium自从2012年发布以来，黑白界面就用得炉火纯青，从那以后每次设计 ...继续阅读 (17)

菲比：UX不等于原型图，很多人一上来就是画原型图也是醉了，前期的用户调研才是最重要。我之前在国内互联网公司做过产品，后来在英国读HCI专业，下面总结在Google找到各种知名公司lead给出的意见，主要分为两点：学习UX + UX设计实践 +建立UX人脉圈。 因为国外UX方面的内容比较多 ，部分资源可能需要爬墙。学习UX + UX设计实践 +建立UX人脉圈，学习UX + UX设计实践 +建立UX人脉圈，学习UX + UX设计实践 +建立UX人脉圈（重要的事情说3遍）一、学习UXa. 经典书籍推荐：Read my list of UX resources for beginners（初学者必看的经典书籍，包含视频+书籍），先从看书开始吧。b. 最新书籍推荐：Great books for designers to read in 2016c. UX广播：my blog post about my favorite UX podcastsd. UX网站：UX网站实在太多了，质量不一，推荐几个干货：UX — UI Readings（Medium上UX/UI文章集合），Dribbble,The Best DesignsandAwwwards（可以在上面关注一些大牛，看他们的设计，得到灵感），All You Can Learn（这个网站集合了世界上最棒的UX专家的资源和文章，还有live s ...继续阅读 (6)

JHong：最近2年一直在做Web/App相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框?弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)从上图得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px弹框高度控制在620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本身有滚动条，页面因为 ...继续阅读 (16)

写在回答之前：流程用好了是好东西，用不好是阻碍。今天写的设计流程的思考，以下。：）设计存在于设计流程中。设计师的工作是基于设计流程的。和很多朋友讨论过设计流程。这个流程在每个国家、每个行业、每个公司、甚至是同个公司的不同业务下，都是不一样的。所以要写出来，很难统一概括。与设计师相关的设计流程，可能一个基本认知是这样的：产品需求，交互设计，视觉设计，前端开发。再丰富一些：市场分析，创意阶段，用户研究，概念设计，设计控件预设，交互设计，交互Demo，用户测试，视觉预研，视觉设计，设计Demo，用户验证测试，前端开发，开发Demo，展示Demo，迭代，用户测试，测试数据回收，用户数据验证，灰度，全量，项目总结，规范输出，控件库，用户跟踪反馈……再凌乱一些：以上所有点，顺序是可以根据敏捷开发的需求，灵活排列的。也可以随机组合。所以，现在大多公司的设计流程，是一个标准且完整的架子。在实际设计项目中使用，并不一定是那么规范和统一的。有时项目大，可能流程走的完整；有时项目小步快跑，流程就会被精简为一个可用且贴合业务的小流程。设计流程为什么这么不可控？因为设计不是完全理性、可工程化的。一辆汽车可以通过完整有效的流程快速组装起来，且能保证质量；点子、思路、设计，不能这样。没有人能提供一个设计流程，能保证任何人进入这个流程，挨着一步一步做，就能做出设计精品。所以设计流程，是帮助产品设计推动，且为设计思 ...继续阅读 (12)

大宝大宝：关于设计色彩的文章，我写的不多（好像木有吧…），也许是自身也并不太擅长，前些天恰巧看外文文章，一个国外设计师写的一篇基础的色彩运用文章，清晰明了，也比较适合刚入行的设计师们阅读学习，所以进行了转译，分享给大家。颜色是一个设计师手中强大的力量。 它吸引你的眼睛，唤起你的情绪，连接各种含义。在一个被广泛引用的色彩研究题目对市场的影响中，研究人员发现，人们购买产品时，90％草率做出决定的人是单独根据颜色来选择的。因此，有效地利用色彩来设计非常重要。但是，不同的颜色进行组合也很困难。每种颜色都有自己的意思，也可以进行多种多样的组合。这篇文章的目的是作为一个指南，以帮助你拿出调色板的设计。鼓励你去探索更多的颜色，帮助你开发出对于色彩组合的良好直觉。一.选择调色板有时，一个调色板是灵光一现的结果。但大多数时候，它是系统化方法的结果。1.确定目标做任何事情之前，首先确定你的设计目的。问问自己以下几个问题：你想传达的设计信息是什么？你的设计的目的是什么？为了传达信息？为了说服？你的设计要表达的情感是什么？你设计的目的应当作为你选择调色板的向导。2.找出你的听众人们感知到的颜色不同。颜色基于个人喜好，文化教养和生活体验，有不同的效果。因此，为了了解人们对你设计作品的反应，你需要确定你的听众。有些颜色的含义是普遍大众的，有些则不是。比如红色在不同文化里有不同的解释。在西方世界，红 ...继续阅读 (6)

创建表单时，交互设计师总是会面临一个选择，选用哪种UI元素来表示可选项的操作。当然，我们每个人都有自己的法则。但是，在选用可选项控件时，仍然要多加考虑。可选项可以用勾选框、开关、单选框和下拉菜单表示。选择得当的话，任何一种都非常出色。本文中，我们重点关注勾选框和开关。勾选框勾选框用在一系列选项中，用户可以选择任意数量，包括0个、1个，或者许多个。换言之，每个勾选框在列表中都是相互独立的，勾上一个框并不会取消其他选项。带有标签的勾选框开关开关组件是在仿照物理开关，让用户打开或关闭某个项目。开关提供了两种简单直接的对立选项开关组件通常用于表现一个动作（例如开始或停止某个操作）。它类似于电灯开关：开关通常用在电灯开关上勾选框和开关的最佳实践使用标准的视觉表现勾选框应当是一个小方框，选中时有一个勾，或者一个叉。选中和未选中的勾选框组件。图片来源：Material Design开关应当看起来有开和关的状态选中和未选中状态的开关组件。图片来源：Material Design用户在操作各种控件时，应当提供清晰的视觉反馈。细微的动画能让体验更细致——在移动应用中尤其如此，iOS7/8的开关按钮。来源：Dribbble纵向排列列表纵向展示列表，每行一个选项。这对于开关和勾选框都有效。如果一定要横向排列，一行有多个选项，就要调整好按钮和标签的距离，哪个选项对应哪个标签清晰明了。下面的例子中，元素之间的 ...继续阅读 (5)

为什么好不容易整理出一份自己满意的作品集和简历。可投出去后就杳无音信了呢？下面我们就来聊聊如何在求职邮件、简历、作品集三个部分充分体现出自身专业性。避免踩到那些坑。作为交互设计面试官，在审核同学发来的简历作品时，我经常能感受到大家对自己设计成果倾注的心血。比如有些同学特热情，把自己设计过的每件作品全部塞进作品集，并用大段的文字来表达自己的想法。恨不得把每个作品细节都说得面面俱到；反过来也有些同学特高冷，认为自己的作品足够优秀，坚信好作品自己能说话…可是这些同学往往会忽略一件重要的事儿:「作品的展示，本身就是一项用户体验设计」设计面试官通常只有5~15分钟来做筛选判断。如果因为你的作品没有在第一时间被表达清楚，而使得机会错过，我和你一样都会觉得非常可惜。所以整个作品集围绕着一个最核心的要求就是：「在最短的时间展示出自己的专业性，并说服面试官」下面我们就来聊聊如何在求职邮件、简历、作品集三个部分充分体现出自身专业性。避免踩到那些坑。1，求职邮件通过求职邮件，大家需要明确告知面试官自己的基本状况。求职邮件往往是面试官了解你的第一步。如果在一些细节之处处理得不够专业，那给到面试官的第一印象就会是负面的。很多同学往往没意识到这部分内容之重要。先来看一个我曾经收到的求职邮件：这封求职邮件的问题主要有四个：标题没有说明应聘的职位没有任何姓名线索没有简单的自我介绍附件文件名太过随意邮件标题 – 职 ...继续阅读 (15)

Photoshop CC集合了许多优秀的功能，让我们的设计工作变得更加智能化和自动化。与此同时，Photoshop内涵的丰富资源让我们的设计工作更具效率。不过，在日常使用过程中，我们难免养成一些坏习惯，从而降低了工作效率，甚至影响工作质量。本期的国外精品翻译教程就将会列出10个最常见的Photoshop操作错误，让你在实际操作中尽量避免这些错误的发生，从而提高工作效率和质量。1.不用快捷键对于设计者，利用PS准备的快捷键或者创建个性化的快捷键，是提高工作效率，同时省时省力的方法之一。虽然其中可能要花点时间去学习熟悉，但是应用快捷键的效果是值得你花费的时间的。甚至可以通过创建自己的Photoshop脚本，进一步打造属于你自己的快捷键模式。2.忘记保存在应用一款编辑软件的时候，我们总会犯一个错误，就是保存。当遇到突然断电或者莫名其妙的故障时，没有保存就会让一切的工作成果化为乌有。我们总会告诉自己，我们会定期保存，并且觉得自己的说话挺有说服力。事实上，健忘的我们还是忘记保存。3.混乱的图层管理PS图层功能让图像编辑更加容易，并且根据设计层次创建足够的图层可以提高编辑效率。但是对于初学者，往往为了提高编辑文件的启动速度而忽略掉合理创建图层的重要性。当需要图层的内容越来越多的时候，才后悔没有开设计前期创建合适的图层体系。图层组是PS管理图层的一个工具。对于这个非常简单的工具，连有一定工作经验 ...继续阅读 (10)

@Hiyori（谷歌的UX设计师）：因为在外国人眼里，那不叫简陋，叫简洁。大洋彼岸的Quora上有这么一个问题：为什么亚洲网站在西方人眼里看起来都乱七八糟的？（https://www.quora.com）人气旺的本土网站和app都赢在接地气上。说白了就是使用习惯的区别，中国人喜欢信息量大、功能多的应用，欧美人喜欢简单朴素、专心把一件事做精、不会乱分心的应用。（我说的是社会主流大众，不是爱刷知乎 玩冷门app 听独立音乐的你。）至于为什么有这个区别，我的推测是这样的：中国（以及我们的远东好基友日本和韩国）人口密度高、城市拥挤（或者说热闹），所以人们平时接触的东西都是信息密度极大的，比如这样的：甚至是这样的：（照片来自Flickr用户Alessandro Baffa）在这种环境里，我们被培养出了能淡定地处理并筛选大量信息的能力，并且也喜欢上了这种高信息量带来的便利。然而绝大多数的北美人民，生活环境都是这样的：即便是为数不多的城市居民，抛去曼哈顿这种地方以外，顶多也就是这样：（照片来自Flickr用户Payton Chung）如果你让一个在国内城市住惯了的人搬到美国来，他会说“这种鸡不拉屎鸟不生蛋的地方怎么能生活？不能没事就下楼撸个串、唱个K、买套煎饼果子，这样的人生也太无趣了吧？中国比美国发达好多！”然而如果你让一个在美国市郊住惯了的人搬到国内，他会说“天哪，这么密密麻麻挤挤闹闹乱七八 ...继续阅读 (18)

在设计中，心理学无处不在。正因为心理学，我们才了解红色很适合用于餐饮业的logo——因为它能增进食欲——或者让首屏的行动指令按钮产生更多转化。相关专题：《UI设计中的定律原理》也就是说，作为设计师，你不能忽视心理学。因为人类大脑的这些原则，决定了人们对你的设计作何反应、如何相互作用。回顾这7条心理学原则和定律，你能够将它们结合到实际运用中。1. 冯·雷斯托夫效应冯·雷斯托夫效应告诉我们，某个元素越是违反常理，就越引人注目、令人难忘。Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊，比如说有聚光灯照射，那么相比其他物品，受试者就更容易回忆起这件物品。这条原则能以多种不同方式应用到设计中。最明显的是如果你想要让某物引人注目，就要使它特殊化，例如通过色彩、尺寸、留白等等。但是，由于人们更在意特殊物体，他们对于整体的印象就不深。思考是否要突出显示某物时，要牢记它的负面效应。你是想要人们记住一件事情，就只有这一件事，还是说其他元素也同样重要？如果所有都同等重要，你希望人们全部记住，就不要凸显其中某个。2. 色彩心理学经验丰富的设计师，对于色彩以及它与设计的关系，有着固定的理解。但是，设计新人们容易忽略色彩对心理的影响，而是选择他们自己喜欢的颜色进行设计。即使你精通色轮，知道如何搭配互补色或者相近色，你有没有考虑过你的设计如 ...继续阅读 (39)

每天都有互联网产品上市，人们电脑上、手机上的应用在短期之内就可能增增减减换了很多波，最终留下的、那些最经典的产品，都是以好的体验设计取胜。这些产品或许看似很“简单”，但其实，越是简单的东西设计越难。在“体验设计”越来越被中国的互联网公司和设计师们重视的当下，人们或许更能体会到设计的“本质”。在当今的环境下，不能仅仅是提供产品，而是要提供用户想要的产品，设计不是在“用户想要怎样的产品”的基础上去构想，而更是要弄明白“用户看起来想要什么产品”和他们“其实想要的是什么样的产品”的区别。《腾讯网UED体验设计之旅》是腾讯UED（用户体验设计，User Experience Design）的十年精华方法论，内容涉及网媒用户分析与研究方法、门户网站未来体验设计、H5技术在移动端打开的触控世界、手绘原创设计、改版迭代方法、文字及信息图形化设计、媒体产品的交互设计、大项目设计管理方法等。也许每个公司都有各自的UED体验设计方法和程式，推荐这本书并不是说腾讯的方法100%是最先进、最好的，但从QQ到微信，许多腾讯产品多年以后依然是我们生活中较为常用的产品，一定有它的道理。常用的用户研究方法用户研究适用于产品生命周期的各个阶段，不管是需求挖掘还是设计评估，都需要与用户打交道。用户研究适用的阶段如图1-3所示。研究用户，需要透过用户的语言、行为去了解他们内心最深处的需求。这些需要设计师始终保持一颗同理心 ...继续阅读 (33)

编剧大师罗伯特·麦基曾经这样写道：故事是人类交流的货币。故事是我们对周围世界的感知的方式。我们越是了解周围的环境，我们就越有可能有生存的机会，我们通过讲故事来交换这些赖以生存的知识。每个被分享的故事都有我们从真实世界学到的教训。今天，我们的故事被混杂在了数字和现实的世界当中。我们无间隙的穿梭在两者之间，常常忘记了数字世界不一定会吻合现实世界的规律，这可能会让我们感到困惑。童话受欢迎以及能够被流传至今的原因很大程度上是因为它的简单明了：它们看起来是在教导我们一个关于我们生活着的真实世界的教训。但是这些教训同样也可以用在虚拟的数字世界中，接下来我会从另外一个角度来讲述这些故事。1，三只小猪UX知识：建立在一个坚实的基础上是很重要的很多时候，网站和移动应用省略了诸如创建工作流，分类，分析网站分布，内容矩阵等计划和架构的工作，而从概念很快的推进到UI设计。想象一下试图从内部设计一个还没有建成的房子。UX设计5要素中的3个直接被网站的组织和构架影响。正如三只小猪的故事提醒我们，如果计划太匆忙没有被充分的准备可能会导致不稳固的基础，在数字的世界里这意味着粗制滥造的用户旅程、杂乱的内容和难以驾驭的网站。一旦这些问题产生了，他们基本不可能自己消失。网站/应用程序的所有者将会被迫留在这个不稳定的结构上，并且修补磨平裂缝直到永远。好消息是，网页的历史告诉我们好的构架主要是需要牢记以下基础知识：创建内容 ...继续阅读 (10)

2016年4月起， CDC通过腾讯问卷调查平台对1580名从事用户体验行业的从业人员进行在线调查，系统全面地分析了用户体验行业的整体情况，发布《2016年用户体验行业调查报告》。本次调查对象包括视觉设计、交互设计、用户研究、产品经理、团队管理、项目管理等岗位，通过对用户体验行业的从业者画像、核心竞争力挖掘揭示了行业现状与能力需求，通过对用户体验行业的公司团队、收入、跳槽、兼职、满意度5大方面的分析深入剖析了行业趋势与行为特点。 这是一份用户体验行业最全面的调查报告，是腾讯CDC继2015年发布用户体验行业报告后，再次用数据为你深度解析用户体验行业发展情况，通过本报告你可以了解到： 从业者都是谁？有什么特点？用户体验团队在不同企业中的规模和作用如何？行业的收入水平是什么样？影响因素是什么？从业者跳槽的比例有多大？为什么跳槽？什么样的岗位更喜欢兼职？只为赚外快？从业者对行业满意度和信心趋势有没有变化？从业者认为用户体验行业的核心竞争力是什么？ 如果你已经是用户体验行业从业人员，你可以阅读报告与行业对标，如果你有志从事用户体验工作，你可以阅读报告了解行业详情，如果你还不确定职业方向，你可以阅读报告作为有力的参考。 一、从业者画像 本次调查显示，用户体验行业从业者主要集中在25-30 岁之间，男女比例较为均衡；高学历人群较多，93.8% 有 ...继续阅读 (6)