在说字体设计之前我不得不提一下“格式塔心理学”，这是我们省略与变化字体笔画的理论基础。格式塔系德文“Gestalt”的音译，主要指完形，即具有不同部分分离特性的有机整体。将这种整体特性运用到心理学研究中，产生了格式塔心理学，其创始人是韦特海墨、考夫卡和苛勒。20世纪30年代后，他们把格式塔方法具体应用到美学中，与心理的各个过程结合，促进了具有格式塔倾向的美学研究。（来自百度百科） 我们的眼睛和大脑在观察事物、接收影像刺激的时候，会有一些特别的倾向。这些倾向常常可以帮助我们快速的辨别事物，有时候也会产生所谓的“错觉”。格式塔心理学重要的概念便是“整体不等于个体的总合”，举例来说：当我们在观察另一个人的时候，并不是先看到他的手、脚、头、眼睛、耳朵、鼻子，然后把这些视觉特征组合成一个称为“人”的组合。我们是直接的观察到人这个“整体”，而不是其他器官的“个体的总合”。格式塔心理学主要有相似性原理、连续性原理、封闭性原理、对称性原理等，举例来说，比如我们看到下面两组图形：我们可以观察发现，虽然上图中的几组图形线条没有完全闭合，但是我们依然能看出它们是方形、圆、三角形，我们的大脑会自动填补元素与元素间的空白部分，形成一段不存在的图形，这就是格式塔心理学中所说的封闭性原理。这里弥补的元素就是线段和圆点，从而有助于我们得出一个“All roads lead to Rome.”这样的结论(善于举一反 ...继续阅读 (11)

如何挑选颜色一直困扰着很多UI设计师，特别是对于新手来说，配色是一个很困难的问题，那怎么办？答案就是——直接用大神的配色。ColorSupply收集了来自世界各地设计师的色彩搭配方案，不仅如此，它还按照五大配色方案来分类，这样更加方便设计师们选择颜色了！同时这些配色非常适合扁平化设计使用，比如图标或者矢量插画。网站名称：ColorSupply网站地址：http://colorsupplyyy.com/app/网站介绍小编查看了下网站，发现网站还有些功能在完善当中，我们打开网站后，主要有三大区域：1.五大配色方案类型：互补色（Complimentary）、相似色（Analogous）、三色调（Triad）、分离互补色（Split Complimentary）、四色调（Square）。2.配色方案：在12色环右则是对应类型的配色方案。3.效果图预览：网站下面的平面插图可以根据选中的配色方案自动上色，如此一来用户就可以看到配色方案的大概效果。在配色方案中，带绿色点的配色是挑选某一插画师的方案，用户选中后，会显示设计师的名称。点击用户名称还能看到该插画师的作品哦！通过这网站选择颜色虽然方便，但毕竟只是工具，只提供参考，设计师在UI设计时时应进行适当调整，以达到更好的视觉效果。来源：shejidaren ...继续阅读 (9)

大宝：今天聊的，还是关于设计师的求职问题，写这篇文章的起源是由于近期工作上的需要，高频度的面试了许多前来应聘求职的设计师，发现了他们许多除了作品和经验之外不太注意到的细节，很多的共性问题，正因为这些细节，最终影响到了对岗位的决策和评判。分享下我对这些问题的看法，希望对正在求职和未来有求职准备的你有所帮助。守时我近期接触到的面试者，10个面试8个迟到！真是一点也不夸张。给面子的迟到半小时内，有松松垮垮的迟到1个多小时，也遇到两三个被放了鸽子。这阵子下来，我都有些恍惚，难道现在的世道变了，面试机会真的不像从前那么被珍惜？我当年刚入行听前辈聊过，无论求职也好，面试也好，都是双方互相选择的过程，不应该存在面试官高高在上或者求职者目中无人的对立关系，本身双方应该是平等的去发现对方能给自己带来的价值。高手看本事，做人看细节。守时就是一个我比较在意的细节，一个能传递出对约见对象最基础的重视。但通常来说，越是前辈和牛人，他们就越是守时。这和能力没有半点关系，而是传递出我对你的尊重。最近遇到的求职者，如果迟到1小时内，我都想办法说服自己，因为不熟悉地点、因为请假不方便、因为等等的因为… …但迟到一个小时以上甚至被放鸽子的，我真是给对方找不到什么借口和理由来说服自己。出于对帮我们辛苦约见的hr同学的尊重，我会形式一下的和对方聊几句，但心中真是一万头草泥马在奔腾啊。真希望让这个人 ...继续阅读 (10)

移动端屏幕越来越大，但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容，是设计师们研究的重点。常用的内容拓展设计有：Y 方向 List 滑动、Z 方向 3D Touch 、入口式内容折叠等。今天想和大家聊的，是其中的“左右横滑”卡片式交互设计。所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类 App 中。不过，凡事都有两面性。当“左右横滑”的交互把更多内容塞到了页面中时，也产生了诸如可见性差、优先级混乱、内容不突出等体验风险。因此，在使用这种设计时必须有所准备，确保它发挥出最大的效用。接下来，把我自己设计中遇到的一些“心得”和“坑”分享给大家。1.  挑选合适的使用场景单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。以最新版的 Airbnb 为例，它将首页分割为 Banner、热门体验、体验、房源、旅游目的地精选等多个维度，每个维度单独占据一整行，并展现并列的内容。再看 iOS App Store，也是将页面分为诸多维度，把不同的应用分类呈 ...继续阅读 (16)

@C7210:Sketch毕竟没有什么学习曲线，颇易上手，相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧，而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点，只针对初学的同学培养正确习惯，还望各位老司机们见谅。下面进入正文。关于对象、图层、画板的使用技巧1.通过快捷键调整图形的形状选中图形，按住 Command 键，然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。同时按住 Command + Shift + 方向键，则可以按10像素为单位进行调整。2.复制元素选中某元素，按 Command + D 即可进行复制；复制出的新元素默认与原有元素的位置相同，且覆盖于原有元素之上。此外，按住 Option 健，同时拖拽目标元素，同样可实现复制；保持复制出的新元素仍处于选中态，并连续使用 Command + D 快捷键，即可按照之前手动拖拽的距离为间隔单位实现多重复制。3.智能选择按住 Option 键，面向多个元素拉选择框，最终只有完全处于选择框内部的元素会被选中，而其他元素会被忽略。4.分组与解组选中多个元素，按 Command + G 将其合并为一组。选中某个组，按 Command + Shift + G 则可实现解组。5.组内单选要选中某分组内的特定元素，无需到图层列表中寻找，按住 Command 键，同时用鼠标直 ...继续阅读 (10)

Sophia的玲珑阁：最近群里的小伙伴问到，想知道设计背后的技法，阁主理解的技法是指设计背后的思维方式。很高兴大家能开始有这样的想法。能这样想说明大家都想进步，在真正思考！今天本打算写写最近楼主设计的徽章系统在团队中是怎样定稿的，正好利用这个定稿的过程说说职场中设计师是怎样同PM和部门同事合作，以及怎样从各个人的身上可以看到他背后的思维模式。在写这之前，先说说阁主是怎样提高自己思维能力的，好让大家在文中有个参考对象。 关于别人的帮助处于新手阶段的时候，我们经常会有这样的疑惑，想提高自己，却不知道怎样提高自己，真的希望能有一个指路的人出来告诉自己你就朝着这条路上往前走就对了就会成功。当别人没有指出来的时候就会抱怨会觉得委屈或者怨恨，心想，你不是大神吗，为什么不帮我？ 殊不知每个人都有自己的困惑，每个人都是摸着石头过河。别人能教你的只是他所解决自己的困境所使用的方法，可能对你自己有用，可能也没用。 依据阁主职场的经验，最能够帮助自己进步的前辈，不是手把手教你怎么做的人，那样自己学到的只是技巧，是“术”。反而是那些看起来冷冷的，不爱搭理人，只告诉阁主关键词让阁主自己去找答案的那一类，让阁主真正领会的是“道”。比方说，阁主的上司J，当阁主问他怎样去解决一个问题的时候，J只回答我“拆分问题，慢慢来！”就这一句话！是不是想骂人？但确是让阁主不断琢磨，真的是在慢慢进步中。 也就是说大部分的情况 ...继续阅读 (12)

Lisa ：我与Joel Beukelman在Creative South 2017发表合作演讲，向设计师分享从技艺到工作与生活的平衡，以及设计业务等多项主题的建议。1. 草图请使用大号的马克笔——专注于大的想法和概念。不要陷入细节。2. 在你的简历中展示图片以外的东西——通过处理你的图片等方式，来解释你的作品背后的创意和想法。3. 不要担心你的title——让你的实际工作来证明能力，升职加薪是自然而然的。4. 有时候免费设计也是okay的（我们也会这样做） ——当你有决策自主权时，免费设计也会是美好的体验。5. 好奇心>工具—— Photoshop与Sketch，Keynote与PowerPoint，Cintuq与Ipad Pro，工具一直在改变，但这不重要，重要的是永远要去尝试新的软件和技术，将工作做到最好。2017年的值得尝试的神器：《超全面！新晋设计神器FIGMA 深度评测》《新晋神器！超厉害的原型设计新玩具KITE COMPOSITOR 深度测评》《新神器抢先知！2017年最值得尝试的7个设计工具》6. 如果你的设计不像你想象的那样，那可能是错误的——迭代和编辑你的工作是你改进、推动设计的不二法门，请习惯再多尝试一个草图或想法。7. 没有人能设计任何东西——任何设计的实现都需要一大群人来完成。习惯把你的工作分给利益相关人和团队成员。8. 种瓜得瓜，种豆得豆——超越自我，给 ...继续阅读 (13)

在我们做界面设计的时候，信息层级的重要性不言而喻，信息的优先级能更直观地帮助产品达成业务目标。本次我们将通过两个实际案例来分析如何有效划分视觉层级。左右哪一张图的重点更突出？上图所表达的视觉层级浅显易懂，处理好这些层级关系需要从理解内容和需求，到如何处理信息层次这几个方面去考虑。对于设计师来说，在心里建立起层级的这样一个框架概念可以使设计变得更有理有据。无论是内容型的页面，还是工具型软件等，都需要处理内容的主次关系，引导用户的视觉焦点，调整页面的节奏感，降低用户的理解成本，减少用户的视觉疲劳。记得以前有过这么一个说法，当你设计陷入迷茫区的时候，可以眯着眼睛去看你的设计稿，也许在雾化的视野中会感受到一些前后的层次关系。这里所说的眯着眼睛看设计稿的方法，也就是最简单最直接判断层级的偏方。那么要如何建立视觉层级关系呢？主要有以下几种表现方式：大小 · 距离 · 内容形式 · 色彩大小： 往往能最直观的体现出层级的差距 距离： 人眼对距离临近的信息更容易先去关注。舒适、平和的行距节奏可以帮助文字刺激读者的研究，并激发他的思考。 能看出上下两幅图的视线流有什么不同吗？内容形式：这里指的就是带节奏感适当的带有变化的内容展示。举一个栗子：我们现在总能看到碎片化这个概念，用户的时间越来越碎片化，内容也越来越碎片化，个性化。用户缺乏耐心去看完一整篇长文，适当的插图、加大段落的间隔、从页面上都调整了整 ...继续阅读 (12)

有些人认为可用性测试的「投入产出比」比较低，只有罕见的网页设计项目才有资格使用这种研究方法，才能承担大额的预算和奢侈的时间表。 这是不对的。 过于精心设计的可用性测试是一种资源上的浪费。 最好的结果来自不超过 5 个用户的测试，尽可能分解你的可用性测试变成小测试。在更早的研究中，Tom Landauer 和我表明在 N 个用户的可用性测试中发现的可用性问题的数量是：N(1-(1-L)n)其中 N 是设计中可用性问题的总数，L 是测试单个用户时发现的可用性问题的比例。 L 的典型值为 31％，这是我们研究的大量项目的平均值。 绘制 L = 31％ 的曲线得到以下结果：曲线最引人注目的真理是：零个用户只会发现零个问题点。从第一个用户开始测试，你就会开始发现问题点，而且几乎已经发现了近三分之一可用性问题点。 从 0 到 1 数据之间的差异是惊人的。当您测试第二个用户时，你会发现此人执行的某些操作与第一个用户相同，因此你能得到的内容会有所重叠。但人不是绝对相同的，也会有一些不同于前者的新的发现。 所以第二个用户添加了一些新的见解，但不会像第一个用户那样多。第三个用户可能会做一些你已经看过两次的事情。 当然，第三个用户将继续生成少量的新数据，即使不像第一和第二用户那样多。在第五个用户之后，你就会常常浪费你的时间在重复观察相同的结果上。迭代设计（Iterative Design）译者：在一个可 ...继续阅读 (14)

其实菜心和大家一样都经历过阶段性迷茫，但我可以把自己经历的一些浅薄经验分享给大家，希望能有所启发。经历的过程如下：想学的太多学会放弃找好定位不断细分坚持与突破回报会有的1.  想学的太多一年前，我是一个打算全面发展的“三好学生”，想学的东西有很多，比如“插画、C4D、动效、界面设计、交互，甚至还有产品和运营。可是学的东西太多，反而让自己无法聚焦，根本看不到进步，自己在站酷上传的作品从之前的两把火（编辑精选）渐渐的变成了一把火（普通推荐），如下图：虽然这并不能完全代表自己的能力，但确实从客观上反映出自己的一些问题。自己明明是个UI设计师，但界面设计做的却非常一般，在本职工作还没做透的情况下，无限的扩展其他技能领域，其实是一种非常不可取的做法，最后的结果就是样样不精！2.  学会放弃原本自己想往卡通吉祥物方向发展，但是发现做到一定程度之后，能力就上不去了，原因就是自己的美术基础太薄弱，和那些专业的美术生相比，画出来的造型确实差很多，如果现在去补习美术造型能力，要花费很长一段时间，性价比不高，并且自己对画画的兴趣不是特别大，于是我果断放弃了这条路。（ps：如果你想在插画方面纵向发展，去补补美术基础是很有必要的。）很多人觉得要坚持，别人能做到的自己一定也能做到，但有些时候没必要一条路走到黑，如果真的努力很久都没有进步，不妨试着挖掘一下其他可能，懂得放弃，才有可能收获更多。3.  找好定位其 ...继续阅读 (23)

网易UEDC – 魏永振：用户体验的概念一路成长壮大，系统性概述的书籍和理念层出不穷，可执行落地的方法技巧随着技术的进步在不断变换。然而无论概念、环境如何变换，都是让产品通过媒介与人建立关系。所以其研究人性、塑造人类行为的目的却一直未变。本文从人对控制感的喜好出发，通过一些方法来保护用户的控制感或利用控制错觉给用户一些虚拟的控制感，­­­­来保护用户体验或强化用户体验。1. 以塑造行为为目的的交互设计无论商业产品以什么形态呈现在我们面前，其核心的一个目的就是：“希望潜在用户，作出有利于其本身的行为”。举个通俗的例子：“超市”。促销商品，特别是以某种主题促销（如中秋，圣诞，洗护，婴童等）的商品都放在超市进门最醒目的位置。其目的是让你一下子感知到：“来对了”。生鲜区，蔬菜、水果都是利用较大的容器、平台展示，以通过大面积的、鲜翠欲滴、高饱和的色彩来愉悦心情并吸引你将它们放入你的购物车。货架上你最方便伸手可得的商品是利润率最大的商品。是因为在品牌识别率不高、商品功能相同、价格相差无几时，顾客往往会为了省一点事将最容易拿到的商品放入购物车。结账区往往放置一些小体积的儿童玩具、零食什么的，以等待着成为家长安抚孩子的工具。当然还有烘培区的一系列故意的设计。如果将超市定义为一个产品形态的话，其以上的各种方法都是为了（方便）让顾客做出有利于超市的行为，即“购买”。如今做为互联网行业的从业者，互联网技 ...继续阅读 (15)

之前也写过一些关于学历与设计师的零碎的事情，工作这几年阁主也问自己，学历对设计师来说重要吗？先卖个关子，分几点来说说工作这几年的感受吧。 找工作时的敲门砖 一般的公司在招设计师的时候，学历是有要求的，至少是大专以上，更多的公司则愿意招收本科以上的设计师，大厂某些岗位甚至要求985或者211学校，可能有的岗位也只招研究生以上的学历。 原因有很多，接受过系统理论训练的设计师，功底更加扎实，公司用起来也更得心应手，在交流的过程中专业共同成本更低。二是，公司在招收某些学位以上的设计师的时候，政府是有补助的，所以对于企业来说，在能力一样的前提下，更倾向于选择学历较高的一方。 阁主说的是能力一样的前提，如果你是大专毕业，但已经是行业内的领军人物，设计水平已经远远高出了相同经验年限的本科生，也是很有可能被企业所用的。如果努力一点将行业的理论知识也打得更牢固一些的话，沟通起来没有代沟，那你的学历也会被忽略。殊不知，赵丽颖也是大专毕业，但人家的演技杠杠的，能力照样出众，一样活得很潇洒。 所以大家可以看到，企业会在能力与学历之间做一个平衡，并不会很绝对。能明白的是，学历稍微高一点在人才市场上竞争力还是相对高一点。 人脉圈子 人脉这个事情呢，很多人觉得只要自己足够牛逼，那么人脉就自动会汇集到身边。这种说法，阁主赞成一半。因为它说的是成为大神之后的事情，忽略了成为大神的过程中所遇到的问题。将一项技能磨炼 ...继续阅读 (19)

@呆呆丶L：前阵子有不少人反馈：呆总，我平时看了不少图，但是做项目的时候没办法用上，怎么办呀？这类问题我一般只会用一句话回答：看得多没用的，要多想多做。（虽然是至理名言）但是我觉得这样回答太敷衍了，所以写了这篇文章来告诉大家如何在工作中复用自己找到的好图，以及平时要怎么去做，即所谓的“如何在工作中找到设计灵感”。相信很多人在日常的工作中都会为寻找设计灵感而犯愁，想通过查看更多更好案例总结出最好的方案将公司的项目做得出彩，然而⼜无从下手。我自己也是，平常会去刷 Pinterest、花瓣、Dribbble、Behance 等平台，将好的创意和设计方案保存下来以备日后用。但是，很少人能真正理解这些保存的图片或素材，大部分人仅仅是觉得好看，然后就存了，而没有去分析当中真正的含义。积累很重要，分析更重要。下面我从两个方面来说说灵感来源：个人创意设计；商业产品设计。个人创意设计个人创意是自发的一种行为，好比 Dribbble、Behance等一些视觉平台，有很多个人主观创意类的作品。这类作品想要去找灵感复用到作品中，其实很简单。我随便举一些例子：1. 个人属性星座（12）生肖（12）地域（中国 23 个省，4 个直辖市）年龄（不同年龄的不同状态）职业（趣味形象，如程序猿）2. 世界环境时间（节气、季节、节日）习俗（民族、国家的不同习俗）3. 情感4. 热点还有许多，我就不一一举例了。在我们做个 ...继续阅读 (15)

摘要先去尝试你最想做的事情，不用考虑太多。竭尽全力去试。如果真的不可为之的话，再回到你只能去做的事情，这时候也能踏踏实实做出成绩来，不再疑惑。(图001) 在谈转型之前，我们先来聊聊设计师的职责范围是什么？一个产品最终呈现到用户面前之前，通常会经历产品需求（提问）、产品方案（回答）、设计/开发（实现）这三步。可以看到，设计师的职责一般出现在第三步。根据公司规模和业务需求的不同，设计师的职责范围也是多种多样的。有细分到产品、交互、视觉，精耕细作深挖专业的设计师；也有三头六臂身兼多职的全栈设计师。精耕细作深挖专业的设计师这类设计师可能更专注于做好本领域的份内事，不需要花过多时间去质疑产品需求和方案的合理性或可行性。各司其职的螺丝钉们运转良好，就能保证整个业务的顺利推进。但问题也是显而易见的，不了解前因后果的设计，极有可能出现“只是好看，但并没有什么卵用”的产品。或者吭哧吭哧完成了任务，才发现最初的产品需求本身就是个伪命题。比如那些年震惊业界的path，许多设计细节是具有划时代意义的，哪怕放到今天来看都惊艳无比。然而美则美矣，在惊艳之后，是产品定位和策略失败带来的一败涂地。(图002) 三头六臂身兼多职的全栈设计师这种生物常见于资源匮乏的初创型公司。上到参与讨论需求和方案，顺便亲手撰写PRD，下到出视觉稿和切图，甚至连数据分析都不在话下，样样亲力亲为的一条龙服务。看似十项全能，比前者不知 ...继续阅读 (15)

苏大牙牙牙：每个设计师都会遇到工作的瓶颈或者迷茫期，或早或晚。写这篇文章的原因，也是因为自己遇到工作以来第一次最迷茫的阶段，持续了几个月的时间。可以用挣扎、痛苦、焦虑来形容。不过还好，最近渐渐的走出迷雾，人生又美好了起来。所以想记录下来，作为一个总结，也可以说是一个具有仪式感的翻篇儿。正好分享给大家，希望能帮助到正经历这个阶段的你，或者鼓励到正在奋斗的设计师。什么原因会导致迷茫？这里说的迷茫，不是针对执行力差，经常打嘴炮，天天说自己迷茫其实还不都是因为懒的人。而是足够努力，但不确定方向是否正确；不满足于呆在舒适区，然而短时间没有明确的目标；一步步完成了目标，突然发现不知道自己到底想要什么样的生活；等等…其实总的来说一般有几个原因导致：1. 对现状的不满 2. 对未来事情的未知 3. 对长期目标的不明确。我经历过的两个迷茫阶段1. 毕业前将要步入社会时，是个迷茫的坎儿。要么找工作遇到困难，要么不知道自己适合做什么，要么专业不对口，要么刚刚脱离集体生活很蒙逼…举个自己的例子：我在毕业前，也是不知道未来进什么样的公司会对自己之后发展有利。是bat这样的大公司？还是高速发展的中型C、D轮融资的公司？或者去产品更加小而美的、有情怀的创业公司？…后来发现，是自己想多了。由于考研错过校招，而社招的话，都要有工作经验，我没有。作品集都是大学做的平面广告设计和书籍装帧相关的，而人家要互联网设计相关的 ...继续阅读 (26)

苏大牙牙牙：不可否认，被我们经常挂在嘴边的设计规范、方法及一致性对我们日常工作很重要。它可以提升操作一致性、提高工作效率、延续品牌定位等等…但是，不知道你们有没有发现，之所以有了这些方法和规范，导致很多设计师习惯性处于舒适区，从而放弃独立思考。每天做着重复性的工作，复用着前辈制定下来的模版，套用着别人的方法论，抱怨着工作没有挑战。我最近也在思考，一个遵从设计规范，按照所谓的系统设计方法，步步推导而来的解决方案，是否真的就是一个好的设计？规范，方法，一致性，重要的一面。1. 规范当我们刚从事UI设计时，自身对于用户体验设计的积淀还不够厚实的时候，遵循设计规范是最保守但也是最合理的做法，因为这种解决方案更加成熟和通用，也有了一定的用户认知。同时像公司内部的设计规范，有利于版本迭代的开发及设计效率，包括新人入职后更快上手工作，避免出错。所以了解iOS 设计规范，安卓设计规范，或者是公司内部的设计规范等等，成为设计师必备的技能…2. 方法这里说的方法是指设计工作中的方法论。运用方法论，能够帮助设计师明确如何一步步的进行整个项目，更高效的推导设计，达成目标。从而说服合作的同学，而且看起来非常的有理有据。下面是我们常见到的一些导图例子：3. 一致性为了减少用户学习成本，不管从视觉还是交互层面我们都要遵循一致性。包括同一个产品不同终端，要保持视觉统一性，才能加深用户对产品品牌的认知，这些也都没毛 ...继续阅读 (18)

现阶段，如果有人说想做出一个媲美于高德、谷歌、百度地图的地图类产品，估计不会被大多数人看好。再去研究一个地图本身没有太大的意义，但将地图的地点与生活中的需求联系起来就会得到非同凡响的影响。比如说现在依然大热的共享单车行业，就是将交通工具同地理位置进行结合，再一次让出行成为了热点。 反过来想一想，衣、食、住、行等民生行业，方方面面，都少不了对地理位置的依赖。以下是关于地图本身状态的思考脑图，然而难点不在地图（因为这一块现在市场上已经又相对比较成熟的产品），在于将地图同新的需求联系起来而产生的多种化学反应。今天先来谈谈地图本身的基本功能设计。 基本操作 在地图的操作中主要有，放大、缩小、上下左右的滑动，基于去寻找自己所要的地点信息去进行最直接的查找方式。 在地图的放大和缩小的功能上，Pinch（捏合手势）比相对于放置于地图上的“+”、“-”button来说，使用的更加频繁。有的地图APP，甚至在首页上默认不出现这样的button，比方说走简洁风格的Google Map，这样做显得画面更加干净，反而让用户沉浸在地图的查看体验中，未尝不是一种好的选择。当然，还有个便捷的放大操作就是双击需要放大的地点。 默认情况下，地图会先加载首屏的数据，当用户进行上下左右滑动到其他地方的时候，再进行加载其他区域的数据，这样能保证优先显示最重要的区域。 并且视觉中心是屏幕的中心，当用户在选择其他区域的时 ...继续阅读 (21)

以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。关于栅格栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？其实我们都是栅格专家，因为在我们几岁的时候，就已经接触了很多栅格，比如方格本：再比如飞机格：关于系统我个人理解，系统就是规则，例如ios系统，它有它的规则：屏幕尺寸规则，代码语言规则等等，想在它的系统里做app，就需要遵循的它的规则。栅格有了规则，也就形成了我们所说的栅格系统。所以今天的重点来了，栅格系统（规则）到底包含哪些内容呢？我通过研究sketch软件的一些栅格设置选项来反推栅格系统包含的内容，得到栅格系统基础六要素，大纲如下：栅格的最小单位屏幕总宽度列数列宽水槽安全边距1. 栅格的最小单位最小单位是需要优先定好的，因为后面的所有规则都基于它来制定。下图就是在sketch设置栅格大小的页面：如果你用sketch却不知道上面这个界面是哪里调出来了，请出门左拐去百度一下！这里再简单介绍一下：pc端常用最小单位是10，移动端常用最小单位是3、4、5，不过这些也不是固定的，还是那句话，能解决工作上 ...继续阅读 (29)

苏大牙牙牙：作为APP狂热分子，定期去App Store或者其他渠道找新鲜的产品来玩儿，已经持续了很多年。但是光浮于表面的玩儿，还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。下面分享下我通过自问自答的方式分析APP的方法，希望对你有帮助。1. 产品层面分析一款app，首先从产品层面入手，因为产品定位决定着后续的交互设计、视觉设计、运营策略等等… 通常可以从三个维度来分析产品定位：1）干什么的（核心需求）首先问自己它是干什么用的，解决了用户哪个痛点。尝试对产品有综合性和概括性的理解，然后用一句话来描述它。好的产品基本都可以用一句话讲清楚。2）给谁用的（用户群体）只有充分了解用户属性，才能分析一款产品有没有做出符合目标用户群体的设计。下面是荔枝FM，用户群体以文艺小清新，90后为主。因此，它在内容层面：以清新，治愈型情感话题为主；视觉层面：更加文艺，清新，个性化；交互形式：更有趣味性。同为音频产品的喜马拉雅，用户年龄段区间比较广。因此，内容层面：大而全，包含PGC＋UGC，目标是打造声音旗舰；交互和视觉层面：更普适性，中规中矩，不愿被风格化。 因为这样更能够被大众所接受。所以，当你在吐槽一个产品的设计不够有逼格的时候，也要思考下，是否因为他们的用户群体不适合那么做。就好比你把“快手”的设计搞的很“”instagram”，反而会让用户有距离感，会感觉产品不是服务于他们 ...继续阅读 (20)

色彩在设计表现中的作用我想不用过多的强调。总之就是灰常灰常灰常灰常的重要。然而随着时代的不断变迁和技术发展的不断演进，大众对于色彩的认知和喜好也在不断的改变着。 相信很多设计师也发现了。“渐变色”的运用正在逐渐的被各种领域在使用，包括 UI界面、品牌logo、海报、插画、字体设计等等。看来扁平化的配色方式已经被嫌弃了~妥妥的需要刺激啊。 什么是渐变色？ 用两个或多个不同的颜色画成一个元素，这些颜色之间淡入或淡出，这就是渐变色。渐变色有个神奇的特点：即它感觉不是任何一种颜色，显得有点独一无二的feel~时尚，且充满了新鲜感。如下图在UI和logo中的运用~ Instagram 的新渐变色 Logo 陌陌的新渐变色 Logo 话说陌陌这次的logo升级无疑是成功的~感觉特别的年轻而富有活力啊~ 看到这些渐变色，不禁会想单一的色彩现在过时了吗？我告诉你不会的。任何新鲜一阵子的事物都可以被认为是一种“趋势”。但趋势会不断的变，一段时间后你又会看烦渐变色。又或许 Instagram 会再次更换它的 Logo哦~UI 中的渐变 为什么渐变色会变得这么流行？ 1、渐变色让人过目不忘 渐变色相对于单一的色块，更能吸引人的注意力，而这点正是设计或品牌标识所需要的。 由于人的特殊认知结构，一般来说用语言去描述颜色是非常局限的。所以，如果我们突然看到一些无法用“蓝色”或“紫色”命名的事物，我 ...继续阅读 (22)

众所周知，作为设计师，面试的时候，面试官可能会让你拿出自己觉得比较满意的作品来讲讲设计思路，如果你没准备好，再加上一紧张，很容易导致思路混乱，最后连自己都不知道在说什么！怎么解决这个问题呢？答案其实很简单：那就是理清思路，做好充足的准备。 如果你暂时还没有思路，不妨先看看我的。正好最近在做一款界面的重设计，目前做了两个页面及一组图标，现在就假设面试官让我说说这两个页面，我会怎么阐述呢？ 我的阐述思路大纲如下：1.我对这款产品有一定的了解2.我是一个对流行趋势敏感的人3.我是这样展现自己设计能力的4.我对用户体验也有一些改进 当然我们需要看着页面来讲解，先来看一下改版前后的界面样式。由于信息安全问题，我将底部的信息主架构进行了隐藏和改变，大家主要看整个设计思路的阐述，不要纠结细节。原版界面： 优化后界面： 下面阐述开始：1. 我对产品有一定的了解在做任何设计之前，你都需要对这个产品有一定的了解，这是一个大前提。我会告诉面试官，这是一个什么样子的产品，他的背景是什么，他的调性是什么，品牌理念是什么，最后得出我的总体视觉风格是怎样的。比如拿这两个页面来说，这是一款企业内部员工的即时通讯工具，产品定义是“方便员工高效沟通的即时通讯工具”。而作为白领的你，其实你是有一点小追求、小逼格的，所以简单来说，我们的品牌调性及视觉风格就是简洁高效、时尚、有逼格。 2. 我是一个对流行趋势敏感的人这里开 ...继续阅读 (19)

越来越多的APP被打开时，首页都会有弹框出现，然而不同APP的弹框也各不相同，形式风格内容花样繁多。本文主要介绍APP首页弹框的几种类型及其价值。一、弹框的形式按是否是模态弹框分类模态，当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。多数APP首页弹框均为模态的对话框，用户必须先进行弹框内操作，对于用户体验来说，是有打扰到用户交互使用流程。非模态，则是当用户打开非模态对话框时，依然可以操作其他窗口。按是否可以关闭弹框分类不可关闭，弹框没有明显的“关闭”按钮，常见于打开APP弹框进行签到、或者任务类型的领取，例如，网易蜗牛读书“免费领取1小时读书时长”弹框可关闭，多数首页的弹框都是可以进行关闭的，常见于活动页的弹框展示，另外关闭的样式基本上是“×”或者“取消”按钮。“×”应用于有内容的弹框，位置一般在右上角、右下角或正下方；“取消”应用于系统提示框，比如是否开启消息通知，是否开启定位等。按是否可以跳出弹框分类不可跳出，弹框内容不可以点击跳转，这种弹框一般是纯图片或者弹框内用户即完成点击操作任务。可跳出，点击弹框内容会跳出弹框，一般有两种情况，一种是业务类型弹框，点击会在app内进行跳转，另一种是系统提示，点击会跳转到手机设置内。按是否自动关闭弹框分类自动关闭，弹框在用户未操作的情况下，可实现自动关闭，一般设置3秒的倒计时，若用户在弹框内进行任何操 ...继续阅读 (23)

不要小看一个登录界面，它内里包含很多细微的东西，除去外观视觉，更多要注意的是交互的操作体验，比如一些动画、一些文案提示等细节都要注意，如果你是UI设计师，建议看看这次经验文章，附上了大量案例，也许能助你未来更好的去设计一个用户体验友好的APP登录界面。下面通过几个关于登录界面的UX策略指南，让你更好的应用和实践。给文本输入框增加提示如果用户使用你的服务必须登录，那么信息字段是你必须要做的主要功能（即输入框中的提示语，如：输入手机号码，输入验证码。）使这些字段清楚可视，并且不要强迫用户到处寻找，或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。奖励提示：相比于使用常见的“登录”“登陆”的按钮，可以更富有创造性，并要包含可直接输入区域。确保记住用户的数据，这样他们就不需要每次输入信息。“注册”和“登陆”不应该放在一起。更多地时候，我们看到注册和登陆按钮被放置的靠近彼此，但是这会对用户产生反作用。这两个动作都包含了相同的动词，并且看起来也很相似，所以他们会混淆用户的选择。在有限的时间内进入问题，他们可能会感到沮丧并且离开。基本上，任何界面上不应该有使用户“暂停”和“思考”的元素。如果你想让他们的体验完美无瑕，分开这注册和登陆两个区域，并且使差别清晰可见。另外，你可以使用不同的动词或者简单解释不同的字段是什么。在登录和注册部分，增加不同的输入字段。除了 ...继续阅读 (21)

Sketch毕竟没有什么学习曲线，颇易上手，相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧，而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点，只针对初学的同学培养正确习惯，还望各位老司机们见谅。下面进入正文。关于对象、图层、画板的使用技巧1.通过快捷键调整图形的形状选中图形，按住 Command 键，然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。同时按住 Command + Shift + 方向键，则可以按10像素为单位进行调整。2.复制元素选中某元素，按 Command + D 即可进行复制；复制出的新元素默认与原有元素的位置相同，且覆盖于原有元素之上。此外，按住 Option 健，同时拖拽目标元素，同样可实现复制；保持复制出的新元素仍处于选中态，并连续使用 Command + D 快捷键，即可按照之前手动拖拽的距离为间隔单位实现多重复制。3.智能选择按住 Option 键，面向多个元素拉选择框，最终只有完全处于选择框内部的元素会被选中，而其他元素会被忽略。4.分组与解组选中多个元素，按 Command + G 将其合并为一组。选中某个组，按 Command + Shift + G 则可实现解组。5.组内单选要选中某分组内的特定元素，无需到图层列表中寻找，按住 Command 键，同时用鼠标直接指向该元素， ...继续阅读 (19)

低多边形风格介于抽象与象形之间，是一种表现力很强的插画类型，用于LOGO的设计也未尝不可。它的绘制过程也非常简单，尤其在AI中，利用三角色块一个个拼缀而成即可，设计师要做的是对色彩的选择和控制，以便能更好的表现对象的阴影和高光的关系。虽说简单，其实内中的玄机自然很难参破，比如用哪一种色彩更恰当，似乎并不是吸取相片本身的色彩就可以解决的问题。因为吸色来源只是一个小点，而事实上一片色块的面积要大得多，纯色拼缀的做法到最后反而让整体效果看起来有点“呆”，色彩过渡不自然。于是，有了我们今天这个“改良版”的低多边形教程，改用PS来绘制低多边形，好处就是PS的色彩处理能力显然优于AI。我自己将PS和AI做了这样的区分：PS是对“色”的处理，AI是对“形”的处理。当我们要在“色”的领域着力时就采用PS，而当我们主要处理对象是“形”，那么AI就是更好的选择。当然这个说法并不绝对，只是我个人的经验之谈。言归正传，学完这个教程我们能掌握：1、运用PS绘制低多边形的技巧，熟悉线段工具、多边形套索工具等低多边形中常用的工具2、利用PS中的平均模糊法来对低多边形的色块进行填色3、体会抽象的造型能力绘制线条轮廓STEP 01选择一张可爱的熊猫照片，所选用的熊猫要符合正脸对着镜头的条件。因为我们这里计划绘制的是正脸的造型。利用钢笔工具“抠出”熊猫的左半脸，这时要注意钢笔工具保持直线条绘制。熊猫的外表虽然毛茸茸， ...继续阅读 (24)

像素的魔力无与伦比！当风吹过，你的世界变得不一样了！风滤镜打造的神奇像素世界，你值得拥有！ 大家记得以前我们推送过一个Jessica Andersdotter的作品吗？嗯，上面这两个就是Jessica Andersdotter的作品。当时，有很多人在问，一直只是说用风，没有详细的解答，昨天找东西，突然翻到了Jessica Andersdotter的博客，也太久没有更新什么教程了，于是抽了点时间，大致的折腾了一把，跟着我们来试试吧。我随便找了一个风光的图片，然后复制了一层，以防万一。执行“滤镜>风格化>风”。至于是用“风”、“大风”还是“飓风”，就看你自己把握了，方向也是。我这里的示例是用的“风”，方向从右。大家可以看到，执行了风滤镜以后，大致是这样。相信大家也看出来了，好像并没有什么大变化，那没关系，Ctrl+F，疯狂的再次执行风滤镜。至于执行多少次，大家自己把握，看了舒服就好，我大概执行了十几次，得到现在的效果。颜色比较平淡，我加了一个曲线，增强对比度，如果不增加对比，层次感明显很弱，视觉冲击明显不够。想更换颜色的话，大家可以随意，变颜色的方法太多了。选取合适的部分，进行裁剪。然后根据我们的意愿，甚至我们可以进行旋转，改变颜色。是不是非常简单，下面，跟着老司机继续开车，我找了一张Martina Stipan的合成作品。依旧是疯狂的执行风滤镜。我想要做个极坐标，所以框选了一个正方形 ...继续阅读 (29)

之前写过一篇关于楼主Boss的文章《设计师跟Boss讨论产品是一种怎样的体验》，今天想来说说楼主那85后的，让楼主敬佩不已的上司。也来反思一下，如果想当管理者，到底应该拥有哪些品质？ 工作能力 记得在高三填写志愿的时候，年少不懂事，第一志愿准备填写“企业管理”。以为，企业管理就是坐在办公室，下达命令，不用自己干活的人。而我当经理的父亲阻止了我，他说了一个道理，至今犹记。他说，首先你得懂干活，别人才能信你，如果别人说个事你不懂，你让别人怎么服你？也是这句话让我打断了当时的念头。 工作后回想这个观念，有对也有不对。对在，如果只是相当中层管理者，这样的观念是正确的。如果想当Boss，要学的应该是资源整合能力，以及将事情做精的极致思维，如果每样都学得最好，精力是完全不够用的。当然，这个是题外话。 而作为一个设计主管，我的上司J在专业方面有如下能力： 1.出色的设计能力。主导了公司所有产品（包括web、APP、平面宣传）的设计风格和规范的制定，定制了与开发合作的最快捷的方法，而且这些都是随着市场不停更新的。嗯，也许大家觉得这没什么。可楼主如果告诉你，楼主的公司是个跨国公司，所有产品都需要考虑跨国所带来的不同语言和文化，更难的是不止有一个产品线，是有多个，现在一直在扩展中的产品线。换个角度来想，如果是自己，能hold住全场吗？ 2.会写代码。对，J会写代码。楼主当初来面试的时候，J直接跟楼主 ...继续阅读 (19)

楼主的大Boss是个空中飞人，经常美国、日本、欧洲、中国到处飞。楼主作为一名小员工，只有偶尔看见他在办公室之间问同事一些工作情况，早上去公司附近健身能看到Boss的办公室灯光亮着之外，其他时间Boss的行程都像迷一样的存在。这位白手起家的80后，管理着美国和中国市场两个分公司，集美国思维和中国思维与一身的年轻人，让楼主好奇并且崇拜着。这一次的会议，让楼主更近距离地了解了Boss本人、Boss思维，收获颇丰。 Boss1. Boss比想象的更懂产品，也更注重产品的体验。Boss是工程师出身，擅长的是技术开发，所以逻辑思维会非常强。作为设计师，也许会觉得老板没接触过美术，没有受到美术训练，可能不懂设计，而更注重的是商业利益。 事实上，老板的经济实力保证了他接触到更多的高档产品，出席多种或高端或低端的场所，长年累月的熏陶下，他的审美感可能不亚于设计师。再者，做好事情的极致思维其实是相通的，就是将各种信息进行组合，选择出最优解。这一点老板肯定做得比较好。 反而，是老板的指引，才让楼主开始反思自己，什么才是实在的、靠谱的设计。工作中的设计方案首先要在实施商业价值的前提下才会有现实意义。在互联网领域，所有公司都处在一种如履薄冰的状态，不管是财大气粗的还是刚拿天使轮的初创公司，都会遇到他们处所环境中不同的困境之下，只看是问题的严重程度而已，犹记得当年的柯达与诺基亚的辉煌。从职业上来看，设计师 ...继续阅读 (18)

用户体验(User Experience,以下简称UX)是一个含义很广泛的术语，近两年来我们从越来越多的人们口中听到这个词，但是并不是每个人都真正了解究竟什么是用户体验。人们对于用户体验有很多误解，希望这篇文章可以帮助你们对于用户体验有一个更好的认识。 UX不是UI在日常工作中，设计师经常会遇到一些客户误以为UX就是UI(User Interface，用户界面)。当客户对这两个概念有混淆的时候，我们应该给他们解释这两者之间的区别与联系。这会帮助客户了解我们的工作具体是什么，会减少很多不必要的误会。UI指的是用户交互界面。例如iPhone的墙纸设置页面，这属于UI。UX指的是用户操作过程的感受，用户在更换iPhone墙纸的过程中的满意程度就是UX。简言之，用户体验就是用户对于UI的一个心理反馈。好的UX设计师懂得用户心理和操作习惯，因为这些都是影响用户体验的重要因素。 用户体验不仅限于互联网互联网只是用户体验应用的一个分支。我们生活中看的的每一个印刷品，穿的每一件衣服，坐的每一辆车都属于用户体验。网购了一件外套，发现拉链很难拉，这是糟糕的用户体验；去一家布置考究的餐厅吃饭，这是好的用户体验。 线下的用户体验和互联网产品用户体验互有不同，但是之间又相互联系，相互影响。网页中导航条之前都是放在页面的左侧，但是后来人们发现，人眼都是习惯从左往右浏览信息，这意味着我们应该将重要的内容放在页面 ...继续阅读 (17)

01对年轻人而言，一份烂工作的首要特征就是：以浪费生命为代价换取报酬。工作就是消磨时间，消磨时间就是工作——世界上再没有比这更可怕的事情了。我的一位发小，中学没毕业就去工厂里做了一名库管。他成天的工作就是天天玩手机，手机玩累了瞅瞅监控屏，伸个懒腰又继续玩手机……正常情况下，如果不到60岁以后，我是绝不会接受这样的工作的。或者，哪怕60岁以后，我也不会轻易接受这样的工作。多无聊啊！然而，他一干就是七年。七年中，他从一名库管变成一名资深库管。倒也没失业，却把租用仓库的创业公司熬倒了五家。唯一比较稳定的是，他的工资依然是两千二百块。你说，当一个人活到全身上下所有的“筹码”只剩下的时间的时候，活着还有什么意思呢？和一只行走的酒囊饭袋有区别吗？倒不是说出卖时间有多可耻。初入职场的娃儿们谁不在出卖自己的时间呢？但是，别人出卖时间是为了出卖才华，而你出卖时间仅只是出卖时间，个中意味就大不相同了。02一家公司的老板雇你，也就意味着买断了你的一天8小时。在这个时段以内，不管诉诸体力还是脑力，你所创造的一切价值皆属于公司——这对老板来说，是可以量化的。但对你而言，除了定时定量的月薪相对确定，一份工作真正带给你的价值到底有多少呢？那些令你引（自）以（我）为（麻）傲（痹）的“资源”“人脉”“机会”……你真的抓到手了吗？对那些挣死工资为生的人，恐怕是可望而不可及。譬如资源，若非依托平台这棵大树，还有多少公司 ...继续阅读 (21)