周末写了一篇文章，关于我(@Sophia的玲珑阁)这几年的北漂职场经历，只想给各位纠结于是否应该去北上广，是否应该转行设计师，怎么转行等等问题的伙伴们一些参考，因为这些我都经历过。当然，北漂所经历的找工作、职业技能提升、人脉重新积累、租房、被催婚等等问题，我都经历过或者说正在经历着。起因2014年夏天，当我在武汉想从一个平面设计师转行为UI设计师，提高自己的职场竞争力，跑遍整个武昌区，却发现没有一个靠谱合适，并且愿意接纳新人的地方。也许是当时我段位低，也许是武汉互联网氛围不够浓，不管怎样，我在某招聘网站投出的200多封简历都以帮助我认清武汉市场的结果而告终。正好一位在北京读研的大学同学来到武汉，他给我提一个建议，不如去北京试试。这一建议，让我灵光一闪，不如去试试吧，还这么年轻，说不定开开眼界也是一件好事。当跟父母商议这件事之后，他们只说了句“那你就去呗”。后来我才知道，他们的用意是想让我去趟北京吃些苦之后，然后安心回武汉嫁人生子，没想到我这一去就呆在帝都短时间内不想回去了。曲折而又幸运的工作经历——第一份工作由平面设计转向UI设计师。1. 分析优劣势去北京前两个月，我就开始想去了之后应该怎样转行？经过在武汉的一些面试，发现企业需要的是实实在在有工作经验的UI设计师。于是我开始分析自己的优势与劣势，扬长补短。我的优势是在武汉有着两年的平面设计经验，美术功底还是有的；二是我是工业设计专 ...继续阅读 (11)

这篇文章的主题，其实在脑子里已经有一段时间了。趁着这两天准备开始自己的每月一篇的翻译设计类文章的计划，于是想结合译文来写一点关于这个主题的一些想法。巧的是在medium上发现了一篇文章，叫《The Day You Became A Better Designer》。作者是Tobias van Schneider 。关于作者，具体的我没有了解的很多（有兴趣的可以自己去科学上网查看他的个人网站和资料），从他的设计作品和文章来看，是一个一流的设计师。他是一个自学成才的设计师，没有上过大学，现在在纽约从事设计工作，很令人钦佩。其实这篇文章写了2年多了，早已经有人翻译过，但这对于我来说，并没有影响，我想借着自己翻译的过程一边深入了解一些设计师的态度和看法，也顺便补习下自己那早已忘得差不多的英语。 —  以下是文章的译文（人生首翻）—最近我的文章收到很多的反馈。（非常感谢！）。有人赞赏我文章那些宽泛和另类的选题，也有些人问我为什么不选一些实实在在关于设计的主题——比如说“如何解决用户体验的问题等等”或者“如何创建完美的响应式网站。”——这是个合理的问题。 当我开始写文章，大部分时候我都是为了自己写的。我不喜欢撒谎，不管是对你们还是对我自己。我许诺过，自己要做一个十分真诚的人。 我不想谈论关于用户体验的难题或者例如如何建立一个完美的网格系统之类的话题，是因为我坚信这真的太无趣了。诚然工具和技巧很 ...继续阅读 (1)

大部分设计师都希望自己的产品可以获得用户的认可与喜爱，在产品上线之后，他们会通过各种渠道获取用户反馈。我不否定用户反馈的重要性，但是产品上线之后我们才通过用户反馈判定产品的好坏已经迟了。在产品上线之前，甚至在产品处于设计阶段，我们就应该对这款产品的前景有一个较为清晰的认识。当然要达到这种”未卜先知“的境界，我们要做到对用户足够了解，知道如何驱动用户使用你的产品。接下来我们将从用户体验的角度来阐述动机对设计的影响。 什么是动机？动机是一个心理学术语，这个概念解释了人类在特定环境下做出特定行为的原因。 简单来说，动机是人类行为的内在动力。动机的产生和生理、心理、社会关系以及认知水平都有着极大的联系。动机主要有以下三个特征：激活 — 做出决策，制定目标；持久度 — 动机所驱动行为的持续时间长短；强度 — 对于完成既定目标的渴望程度。 为什么设计师要懂得用户动机乃至用户心理学呢？因为了解用户动机会帮助我们更好的了解用户期望和用户痛点。你设计出来一款app，很实用，你有信心用户用了一次后就会立马爱上它。但是前提是“用户使用了一次”。在当前产品高度同质化的时代，在保证产品功能性的同时能够在包装上给用户足够的吸引力，这是首要的也是最重要的渠道来诱导用户使用你的产品。 内在动机和外在动机动机分为外在动机和内在动机。我们将外部因素激发用户特定行为的倾向称之为外在动机。大部分情况下，我们可以将外在动机 ...继续阅读 (5)

老子曾经说过，“千里之行，始于足下”，这句话告诉了我们一个再简单不过的道理：再远的路只要一步步的去走，终会有到达的那一天。两千多年过去了，这句话同样适用于当前的互联网行业。作为设计师，我们一直希望自己的产品可以给用户提供最好的用户体验。拿app来说，他们对这款产品的第一印象起始于引导页。第一印象产生的时间极短，但是它所带来的影响却要长远的多。如果说给用户构建一个完美的用户体验体系是我们的“千里”，那么引导页就是我们“足下”的第一步。所以一款app的引导页对于用户和产品之间纽带的建立是十分重要的。 什么是引导页？引导页英文Onboarding原文意为新员工的入职培训。这与我们使用一款新app相类似，人们尝试新事物过程中会产生紧张与不安，引导页的作用就是短时间内让用户对这款产品有一个大概的了解，缓解用户的焦虑与不安，让用户更快的进入使用环境。 引导页的三个基本功能引导页可以做的很简单，也可以做的很复杂。但是再简单的的引导页也必须有三个功能：问候、传递信息和提升参与度。 问候引导页是用户和这款app的第一次接触，她的作用相当于向用户进行自我介绍和问候。当然问候不意味着我们要真正写一个“Hi”或者“用户，您好”，有的时候一个吉祥物形象或者字符也能向用户传递问候。问候和介绍要尽量的简短，不要分散用户过多的注意力。 传递信息这是引导页对于用户来说最重要的一项功能。优秀的引导页用户浏览后会对这款 ...继续阅读 (5)

背景介绍微信朋友圈，一个神奇的地方，如同生活中的另一片大陆，在那里总是会有你感兴趣的地方，在不同的人眼中，朋友圈是不一样的，在产品人的眼中，朋友圈充满了许多的设计亮点，领先的产品理念，一个朋友圈包含了人性、群体、社交等多种考虑。功能介绍实现朋友圈的图文发布效果，包括相册选择图，朋友圈的图文删除等功能，以往都给大家共享源文件，这次就不分享源文件了，（小伙伴们自己努力实现效果吧，最爱海贼）1、利用中继器实现图文展示，并可上下滑动主要用到了中继器如何添加行，如何显示数据，动态面板如何实现上下滑动等。1.1、效果预览1.2、实现原理拖入一个中继器，根据朋友圈的布局，添加中继器中的元素，并填充数据，具体实现步骤如下图所示：数据填充之后，返回浏览，发现中继器显示的仍然是默认内容，那是因为我们尚未设置中继器的相关事件，中继器只有设置了每项加载事件，才会显示相应数据内容，设置方法如下图：设置完成后，再返回浏览，发现中继器中填充的数据已经成功显示，那么列表内容众多，一屏幕显示不完，必须可以上下滑动才可以，这时候就用到了动态面板的一个属性，鼠标右键点击动态面板，在弹出框中依次选择滚动条>自动显示垂直滚动条，设置完成后，滚动鼠标滑轮，即可实现页面滚动效果。2、实现点击右上角相机图标，弹出功能菜单这里主要用到了动态面板的一些属性效果2.1、效果预览2.2、实现步骤首先拖入一个动态面板，命名为d_cover ...继续阅读 (5)

Low-fi，即低保真原型图，整个APP设计阶段，设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后，交互设计师开始依据已有的结论，画出Low-fi。Low-fi的作用1. 方便团队进行方案的讨论和统一。就像使用场景Scenario和用户画像Personas，团队每个成员脑海中所理解的都会有所不同，但通过PRD，咱们可以进行至少是大体上的统一。而在这基础上，APP的具体画面和流程，每个人都有自己想象的视觉效果。Low-fi就在此时起了相同的作用。当然统一的进一步促进效果是，进行后面核心功能的深入探讨，将概念落实到实施方案，并验证逻辑上是否能跑通，以及主页面元素的确定。2. 方便开发人员进行整体架构的布置，开始着手一些基础元素的部署。3. 做出demo进行内部尝试、小范围的用户调查，一般会有一些更改，不会影响项目主方向，大多是功能上的调整Low-fi 的处理工具与文件要求作为交互设计师，在Low-fi阶段多使用的是sketch，PS更侧重于用来做图片的处理。出发点还是更多的从效率上进行考虑，sketch运行速度非常快，文档小，测量距离方便，可复用的图层组（symbol），做好图之后导出多倍图也十分方便。所以在此阶段做草图，sketch是不二之选。然而，对Low-fi的文件处理也有一些要求，主要分为视觉效果和文件名整理。视觉效果上倾向于使用黑白灰无色彩感的设计方案，目的是 ...继续阅读 (5)

最近在国内“兴起”的两个概念我觉得特别“有趣”。一个叫 PD 即产品设计师，另一个叫 UXD 即用户体验设计师。 然后很多人都问什么是 PD、UXD，顺带要怎么成为呢？（真的很多人问） 在开头我就告诉你答案：这个概念在国外已经有 10 年之久了，而且你现在也许就是 PD 或 UXD，只是你自己不知道而已。 不要被一些所谓的“热度”文章误导，觉得有了新方向，又要去学什么新知识（当然学习本就应该是持续的），然后对其非常向往，产生一个想要成为这类设计师就必须去大企业的念头。 平时我建议大家多看书是有道理的，这些概念在《用户体验要素》里早就有说明了。如果你觉得它不够深入，可以去 Wikipedia 搜相应的关键词，找找这类的学术论文看看，都是有一些年头的了，而且讲解的非常详细。 既然要立一篇文章来说，当然就要说的详细啦。下面分别介绍下它们是什么，并讲述下它们的关系，好让大家在以后的工作中不会一头雾水。 从 PD 角度解析 首先理解下什么是产品（互联网相关），产品是由功能和内容组成的，所以作为产品设计师（后面统称 PD）就一定会涉及到对功能及内容的设计。 那么作为 PD ，该如何入手产品设计呢？一般来说，这类设计师都是以公司的内部需求、战略方向等因素来设计产品，甚至有些负责创建产品的人可能根本不会想到“设计”这个词。对于他们来说，创建一个产品的过程更像是在往一个物体上加东西：逐步建立和完善 ...继续阅读 (9)

编者按：本文作者 Diego Mendes，现在是 Pocket 的设计师。他通过设计叙述故事，并称自己是一位创造者。在本文中他论述了设计师存在的必要性和优秀设计师需具备的特质。考虑到近期开始流行“无 UI 是最好的 UI”这种说法，同时聊天机器人逐步占领人们的日常交流，有人不禁会问，UX设计师未来是不是要失业了？大部分的人对于 UX设计师（或产品/UI设计师）的认识还停留在这一阶段：他们在 Sketch 或 Photoshop 里画出美观的线框模型，以帮助工程师更好地进行开发。更令人感到寒心的是，现在很多人依旧将设计视为一种虚设。“让产品更抢眼一点就行”、“让界面更美观就行”——这些是我担任设计顾问的日子里经常听到的话。人们对于设计的认知止步于此。图：慕尼黑德意志博物馆的展品——印刷机就是一种具备革新性的人机关系，时至今日依旧被不断设计和完善设计的本质在于解决问题、帮助建立联系。即便“界面中不含界面”，其实也是需要经过设计的。优秀的设计师在创造用户体验的过程中担任着重要的角色。优秀的设计师会问正确的问题。他们往往保持着好奇心，在接触问题前不会选用任何已存在的解决规划。他们关心的所有事就是理解挑战本身——更好地解决问题。优秀的设计师为机器赋予人性。他们在人和机器间搭起桥梁，以帮助我们消除隔阂。如果他们能设计好人与机器的交互关系、建立起联系并为我们创造福祉，设计的强大力量就会体现出来 ...继续阅读 (9)

如今开发一个网站不是响应式都不好意思拿出来，那么作为响应式中的重要一环「响应式图片」你又是如何解决的呢？网站的平均加载已经到了近 2MB 并在不断地增加中，其中图片占据了绝大多数流量(63%)。可以肯定的是网页已经有了严重的大小问题，而图片就是罪魁祸首。虽然已经有很多种 措施 可以减少网页加载量，但或许更重要的步骤之一是确保响应式图片的加载方案。通过利用响应式图片解决方案，我们可以确保最佳的图片被加载，带宽不会被过大的图片所浪费。因此 W3C 定义了 picture 标签：基于检测客户端设备类型的可替换图片方案。具体是由 picture 这个标签去实现，也就是说我们现在有了一个基于标准的响应式图片解决方案可以用在实践中。长话短说（人话）断点（breakpoints）应该 取决于内容 而不是设备宽度 （CSS3 media query）根据尺寸加载不同图片计算图片像素密度并加到图片加载列表中通过消除图片加载列表中太相近的值来让加载列表变得可维护利用程序自动输出图片的不同大小利用 img 标签的 srcset sizes 等属性输出同一张图片的不同路径/尺寸，以解决响应式图片的大小和像素密度的问题Picturefill 库能让我们现在就使用这些强大的特性虽然 Picturefill 还有一些缺点 但这么做仍然利大于弊查看DEMO定义第一步就是定义所有响应式图片的尺寸和断点，这些信息在网 ...继续阅读 (19)

文字样式、图层样式的设计经常会重复使用的，所以 Sketch 附上了一个很方便的功能，就是「复制样式」和「粘贴样式」，通过这功能，我们能快速复制、粘贴文字或图层样式了。下面我们对这一个功能做了一些测试和示范，建议大家记住这个方便的功能哦！图层样式复制如下图，把左边的图层样式复制到右边，方法是先选择左边的元素，按Sketch快捷键「Cmd + Alt +C」,然后再选中右边的元素按快捷键「Cmd + Alt + V」这样就能完成图层样式复制啦。文字样式复制除了图层复制外，文字样式也是可以的哦！使用方法同上~文字样式复制到形状，不可以！我们同时也试了下文字复制到图形，结果——是不行的哦~形状图层样式，复制到图片、文字，可以！然而，形状的样式无论是复制到文字、形状、以及图片，这些都可以哦~ 原文地址：shejidaren ...继续阅读 (14)

鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。Badge/徽标/小红点「小红点」是这个控件在国内最通俗的称呼，正式的名称为「Badge」（徽标），Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。△ 形态各异的Badge（徽标）如何使用无数字和有数字Badge使用场景Badge可以分为无数字和有数字两类，一般来说，如果只需让用户了解有更新或新内容必然只有一条时，使用无数字Badge，例如微信公众号更新和App版本更新采用无数字类型。如果需要让用户精确了解有多少条更新且新内容有多条，可使用有数字Badge，例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大，也会更吸引用户注意力。△ 无数字和有数字注意数字的长度和上限对于有数字的Badge，由于界面显示空间有限，因此要注意视场景和信息类型决定数字最长显示多少位，如果数字达到上限该如何显示。谨慎在图标内运用红色圆点元素红色小圆点这个视觉元素已经成为一种社会性语义符号，即用户看到红色小圆点就会认为这代表着有新内容，因此图标设计因谨慎使用红色圆点，例如魅族Flyme社区App里「我的粉丝」图标，红色的心型元素与图标主体间有留白，用 ...继续阅读 (11)

常常有设计圈的朋友问我“如何提高设计能力？”“我想成为设计专家， 、团队里上下游可是似乎一直在原地踏步，我该怎么办？”，在沟通寻找答案的过程中，有些人却把原因归咎到企业对设计的重视程度的无作为甚至是身处的行业氛围。这些因素固然重要，它们可能导致你怀才不遇，但是你确定自己真的已经有“才”了么？换句话说，给你一个完美的环境，你就可以成为设计专家了？ 想要提高，首先要有清晰的自我认知先问问自己，想成为怎样的设计师，是创意无限脑洞十足的？是心细如发像素级别的？还是思维缜密无懈可击的？亦或是巧舌如簧演说能力爆表的？一名优秀设计师的能力维度是多样的，有产品业务分析、逻辑思维、专业技能、设计辩证、设计驱动、自我迭代、沟通演说等各方面的能力。不妨自我评价一下自己在这些细分维度下做的如何，然后给自己找一个发展的模版，可以是行业大牛，也可以先定一个小目标，选择团队里的资深设计师，如果觉得还没有人能达到你心里的那个高度，那也无妨，你可以在每一个能力维度上都可以找一个目标，比如，告诉自己要有A的产品理解，B的设计技巧，C的沟通演说能力。有了清晰的自我认知才能更好的知道该在什么方面提高，找到方法并且有计划性的实施。 建议先找一到两个自己最想提高的能力维度发力，避免分散精力导致成效甚微，给自己制定一个定期自检的机制，看看和上一阶段的自己是否有显著的进步。比如两个月前你和产品在过方案的时候还被问的语无伦次，现 ...继续阅读 (9)

@C7210：本文来自Evernote的产品设计师，讲述关于Evernote for iOS的进化史，包括对2013年大改版的回顾，以及如今8.0重设计的林林总总。很有意思，作为Evernote的重度用户，同时作为交互设计师，看到这些故事，回想着几年前被iOS 7冲击时的感受，以及为之而重设计的那一版铺天盖地一片绿色的印象笔记，忽然像是失去了对时间的感知。另外我真的听到过有人非常可爱而认真的把Evernote叫做ElephantNote。下面进入译文。说起来，产品重设计也是一项相当刺激的工作。发布日期渐渐邻近，整个团队被紧张忙乱的情绪所笼罩。几个月来，我们为产品挥洒了太多的汗水甚至是泪水，而在即将发布的时刻，我们却不禁开始质问自己：“真的准备就绪了吗？” 是啊，真的就绪了吗？用户会怎样反应？喜欢？反感？喜欢又反感？我们在害怕，在恐慌，但同时也在保持乐观，甚至有些喜不自禁。当然，发布日最终还是会到来。现在（作者撰文时），Evernote 8.0上线已经超过一个月了。在这样一个时刻，我不禁回忆起2013年那次大改版发布上线之后的状况。△ Evernote for iOS的变革历程追忆往事2013年6月，苹果发布了颇具争议的扁平化iOS 7，这一事件极大地改变了当时app设计的风格走向。拟物化几乎被彻底干掉，过分沉重的阴影、质感与纹理效果几近消亡。那是一次根本性的变革，没人想被新时代甩下 ...继续阅读 (12)

很多人喜欢折腾图标，所以，很多人问，有没有新的图标教程，于是，今天，是一个简单的图标制作，重点是金属质感，同往常一样，我们都是用图层样式来实现。PSD文档下载请点击新建一个文档，我用的大小是1000X800像素，创建一个渐变填充调整层，参数如下。将这个渐变背景图层转换为智能对象，添加一个杂色。用圆角矩形工具画出我们的图标主体，颜色设置为#f6f5f5，添加一个斜面浮雕和投影。复制一层主体图层，右键清除图层样式，将填充修改为0，添加一个投影样式，我们来做投影加强。 用椭圆工具画一个圆，设置图层样式。同样的用椭圆工具画出一个小一点的圆，这个将是我们的旋纽，设置图层样式。画一个稍微小一点的圆，我们来制作金属旋纽，效果我们通过图层样式实现。新建一个图层，填充白色，转换为智能对象，添加一个杂色。执行一个径向模糊滤镜，参数如下：将这个拉丝图层图层混合模式修改为“颜色加深”，因为这个拉丝层我们是要用来给金属旋纽增加金属质感的，所以我们载入金属旋纽的选区，添加一个图层蒙版。接下来，画个三角箭头，添加个图层样式。最后，我们添加环绕旋纽的图标。图标不应该位于最顶层，应该在我们中间的旋纽下层，所以请注意看我们的图层关系。这里我用的图标，不是现画的，是来自于Asif Aleem的分享。我为箭头指向的图标添加了一个样式，使其看了像是浮现。而其他的图标，我设置的颜色是#151926，施加的样式则是让其看了像是 ...继续阅读 (10)

Google 发布了 Android N （7.0)  的下一代系统 Android O （8.0）开发者预览版本，这已经是 Android 系统的第八代产品，但想要第一时间体验到这个系统，你还需要最新的 Nexus 或者 Pixel 进行刷机体验。而本篇文章将抢先告诉你，最新的 Android O 到底新增了什么功能？ （如果你刚好有上述设备，微信回复 8.0 告诉你怎么刷机体验） 随着 Android O 的第一个开发者预览发布，我们可以找到一些我们期待的新功能，但其中有些功能还有国产手机系统的影子。 ▍全新后台机制从Android 7.0开始，Android 就可以更好地限制应用程序在后台的活动。而此次Android O 设立后台机制的首要任务就是节省电量和提高电池寿命。新的 Android O 对于软件通知，后台服务（应用在不在前台时继续运行）和位置更新（检查您使用 Android 的位置服务）完全是自动的。这就意味着构建对电池寿命没有影响的 APP 变得更容易，用户不需要管理任何东西。这对 Android 来说是全新的领域，因此，开发人员在 Android O 上开发适用于消费者的 APP 之前，需要先学习文档。 ▍全新的通知栏AndroidN 带来了一个新的框架的通知，以此让开发人员使用它让用户获得更多的信息。AndroidO 的全新通知栏：按通知类型分组通知的「通知通 ...继续阅读 (2)

不管是在APP还是PC，不管是Loading页，还是在音乐播放器中，进度条的运用都非常广泛，形式也多种多样，让人眼花缭乱。做为一个交互设计新手，项目中也经常碰到进度条设计，总有很多疑惑在心中挥之不去：目标：为什么会有进度条的存在？引入进度条的目的是什么？类型：结合使用场景，进度条类型有哪些呢？它们的目标是什么？需要展示哪些信息？形式：进度条形式多种多样，怎样从本质上区分呢？运用：实际项目中如何选用合适的进度条呢？下面列出了3种常见的进度条样式，我们将结合这3种进度条，一步一步梳理，希望可以帮助大家获得更加清晰的认知。一、为什么要有进度条？进度条是较为通俗的叫法，代表的是与进度展示相关的内容，但并不局限于“条形”。它广泛的存在于各种设计中。从“进度”一词不难看出，“进度条”这一视觉元素其实是为了让用户清晰的了解当前状态。状态表现一般都有一定的参照，同时存在限定值，如果单纯的通过数字／文字表达，不便于用户理解，所以引入了图形化的元素，也就是我们常见的进度条。进度条本身比较单一，但是当和场景结合起来，就会衍生出不同的类型。不同类型的进度条设计目标，相关信息元素均不相同。二、进度条有哪些类型？进度条的实际运用情况多种多样。有些进度条是实时变化的，有些则是静止不动的。当放到实际的场景中，进度条在场景中的含义就有了进一步的扩展。结合使用场景，我将它们分别分成3种类型，分别是“进程型”进度条，“ ...继续阅读 (4)

相信有很多小伙伴和我一样，经历过“做设计，心里没底”的情况，说的直接点就是“找到好参考就能做好，找不到好参就做不好，即使做出了好作品，也觉得带有一定的偶然性！”为什么会这样呢？最近菜心对这个问题感触颇深，所以想和大家分享一下自己的经验。废话少说，直接上栗子！下图是我最近在做的一款logo，叫做iwork：装下13，加个带辅助线的：根据“视觉品牌基因法”，我得到了辅助元素，如下图：但是在做延展的时候遇到了问题，由于自己的“平面构成”水平一般，所以一直以来对于图形延展都很抗拒，自己的延展方式要么是放大单个元素，要么是平铺元素，如下图：这两招已经用三年了，所以这一次打算离开自己的舒适区，做一次不一样的！虽然有了决心，但是凭空来做，还是做不好，于是找了大量参考，最后经过筛选得到下图：我对着上面的感觉开始做自己的图形延展，做了一遍又一遍，得到结果如下：总感觉哪里不对，但又说不上来，我像一只无头苍蝇一样，又做了很多稿，可还是不理想。突然我意识到，这样做下去并没有在根本上解决问题，即使侥幸做出来了满意的图形延展，那也是一种偶然，下次再做其它元素的延展，还是会摸不清头脑，浪费大量的时间。于是我决定去研究原作者的图形，分析它好看的内在原理是什么？这个分析的过程你可以自己思考，也可以找小伙伴一起讨论，当你得到一些结论之后，可以尝试用自己的案例去验证，这样不断的反复试错，从而总结出属于自己的理论依据！按 ...继续阅读 (7)

最近打算在公司内部做一个分享，讲的是组件化的设计与开发的思维方式。准备完演讲资料，发现这完全可以改成一篇文章。藏着掖着不合适，发出来分享给有需求的朋友吧，就当是个试讲了，希望大家帮忙指出错误。下载地址：https://www.jianguoyun.com/p/DY1Z3bEQwKOaBhimoyg由于本文首先是以keynote的形式诞生的，其中还有动画和视频，所以我比较推荐大家直接下载keynote文件（也存了PPT版本）。内容和本文是一样的，但有些逻辑关系还真得让画面动起来才说得清。提醒一下，keynote文件大小将近150mb，嫌麻烦的朋友，当然也欢迎继续阅读。组件化组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过自由组合来构成整个产品。对于计算机这么复杂的工业产品，组件化是唯一能使它成为现实的方法。我中学暑假去电脑城打工，跟着别人学习电脑维修。CPU在哪里，负责什么，如何拆装；内存在哪里，负责什么，如何拆装。这些都是基础知识，各部分各司其职，什么坏了就换什么。我还见过资深维修工修主板，他真的能找出主板上哪个电容爆了，换一个相同规格的上去，电脑又能正常开机了。对产品设计的意义当然今天我们不讲电脑维修，组件化思维要运用到我们的工作中。首先要了解，它对设计和开发到底有什么意义？这部分虽然讲的是设计，但对开发同学也有价值 ...继续阅读 (4)

现在这年头，网络几乎已经成了大家的必须品，去一个地方，很多人的第一反应都是有没有WIFI，密码是多少，很难想像没有网络的日子是什么样的。在打开浏览器看新闻时，突然心血来潮，做了一个浏览器图标，过程相对简单，布尔运算构成图标主体，效果则是用图层样式实现。素材下载：点这里>>新建文档，将我们所提供的纹理素材放入文档中，充当背景。我添加了一个色彩平衡调整层，调整了一下背景的颜色。下面，用圆角矩形工具，画出图标的主体，并添加图层样式，我添加了斜面浮雕、内阴影、投影三个样式。复制一层这个主体，右键清除图层样式，将填充修改为0，重新添加一个新的图层样式。接下来，我们来画QQ浏览器的图标，这个相信大家肯定会画，非常简单的布尔运算，在这里，我们分成了两层来画，首先，我们画出了下面这个形状。我为这个形状添加了一个渐变叠加。接下来，还是用布尔运算，补上欠缺的那部分云。选择住组成QQ浏览器图标的这两个图层，CTRL+G，创建图层组，给这个图层组添加一个图层样式。最后我添加了一个色阶调整层，作最后的微调。最终效果如下： 原文地址：P大点S ...继续阅读 (8)

文字排版设计是平面设计中最重要也是最能打动人心的设计要素之一。无论你的设计水平处于哪个阶段，文字排版准则对于提升你的设计能力都非常有帮助。试着了解字体设计相关的资料，例如一个特定字体的起源或者是一个字体的结构，因为这样做可以扩大你的知识面。当你真正掌握了字体排版的方法，你的潜在客户会对你更加钦佩。当然，作为一名设计师，了解字体排版设计的来龙去脉也是职责所在。一旦你掌握了其中的方法，对于字体排版简直轻而易举！同所有的技能或职业一样，对于文字排版，你需要学习特定的规则和指南,才能充分提升和扩展你的技能。这里有20个关于排版的经验，是排版艺术的重要原则。 1.学习基础知识第一步，学习文本排版更有效的方式是掌握排版艺术的本质。如果你是排版设计的新手，可能认为字体排版就是简单的练习就可以了。事实上，排版设计是很复杂的技能，因为它是艺术与科学的结合。一个文本排版设计作品由特定的元素组成，经过精确的测量，同时需要考虑并采用设计规范进行设计。就像不同的设计形式，只有你完全掌握之后才能打破现有的规则。同时只有你确定表达了排版设计中的重要意义，排版的形式才会被用户接受。为了能够更好的掌握排版设计的基本技巧，你需要多学习多了解排版设计艺术。 2.注意字体表达的含义字体的选择并不是一个随机过程。仅仅通过搜索你的字库选择喜欢的字体，很少能得到一个满意的结果。这是因为用户的心理更倾向于有特定意义的字体样式。 ...继续阅读 (9)

前言数码相机拍出的照片，难免有时候会产生许多噪点，这些噪点大多是在曝光不足的环境下造成的。当设计师们拿到这样的素材照片时，应该怎样消除噪点就成了一个难题。今天，我将和大家分享三种用photoshop cc快速消除噪点的技巧。一、图像大小在我们的概念中，图像大小是一个改变图片尺寸的命令，和去噪这一功能根本搭不上线，如果你的思维还拘泥在“某个工具必须得是某个工具”这样的框架里，那你就应该再把思维发散一下了。现在，用PS打开我们要处理的图片，一眼即可看到分布在黑色瓷器表面的噪点。进入【图像>图像大小】，在图像大小中重新输入图像的尺寸，可以看到我原来的图像大小是宽1200px、高1604px，我们要把这个值变大，但不改变图像的比例，即在长宽之间建立链接。这时我重新输入了图像的尺寸，并且勾选“重新采样”，在下拉框中选择“保持细节（扩大）”，把减少杂色的模块调到88%，当然这个参数是看具体你的照片的具体情况而定。总之，这里利用的原理即是把噪点扩大后再减少它的高光颜色，让它变得不那么“抢眼”，即可快速地消除噪点。完成后的图片再缩放至原来的大小，经过对比可以发现噪点已经减少了很多。二、CAMERA RAW滤镜CAMERA RAW本来是adobe公司开发的一款ps插件，专门用来处理单反数码相机的RAW文件，在photoshop cc的这个版本后，这款插件就被集成到了软件里，可以作为滤镜使用。CAME ...继续阅读 (5)

前言《设计几何学》的作者说：“黄金分割创造和谐的力量来自于它独特的能力，就是将各个不同部分结合成为一个整体，使每一部分既保持它原有的特性，还能融合到更大的一个整体图案中。”听起来似乎是一个神话，运用起来也并没有严格逻辑可循。然而，我们今天根据黄金分割矩形，就能绘制出较完美的图标造型。对于很多不知道怎么运用黄金分割的小伙伴，赶快学起来！一、用圆形搭建基础形STEP 01打开AI，新建文档，文档大小可以参考我的设置。STEP 02根据黄金分割矩形，在每个矩形中绘制不同的圆。这些不同的圆形的大型比例刚好符合黄金分割的法则。我们简单将这些圆称为圆A、圆B、圆C、圆D……，方便接下加以区分。STEP 03利用这些不同的圆进行基础形的搭建。什么是基础形呢？我们人眼对于身边一切事物形状特点的观察，所有的事物都可以简化成为简单几何形的组合。这些简单的几何形即是造型的基础形。根据鸡的造型特点，我们利用圆形来给这个图标作出基础形搭建。在绘制基础形时，最终的目标效果要始终放在大脑中，这样才能保证基础形的结构的合理性。用1个圆A，以及4个圆B，先搭建最初步的简单基础形。这部分是鸡的身体和尾巴的部分。由于鸡的尾巴是其重要的识别特征，因此稍微夸大一点并不未过。造型中的有一些关键的节点，它们扮演着衔接各个身体组成部分的作用，因此这些部分必须要几个关键的形状相交于某一点，才能合理的完成过渡。STPE 04继续加入 ...继续阅读 (15)

寻图困境每个艺术家的插画里都有来自他自身创造出的节奏和风格，而接下来的一段时间，我们将学习绘制不同风格的插画，用实际行动去体会隐藏于图案表象下的不可言说的趣味和技巧。学习时尚极简风格插画的目的是运用，而极简风格的插画在UI设计中是非常适宜讨巧的配图对象。尤其是运用在与时尚相关的网页中，大约是最不容易被忽视的亮点。符号轮廓：基础形标准化所绘制的对象，有一种符号化的趋势。就像图标一样，模糊所有个性化细节，使其变得符号化。让外形成就某种“完美”，当然所绘制的主题也并不在表现人物造型细节，而是在于突出某种氛围。让我们绘制的基础形都有趋于某种完美定式的倾向。STEP 01让我们打开AI，创建一个宽1600px高1200px的新文档。然后将所参考的照片置于其中，锁定照片的图层，再新建一个图层作为绘制层。绘制时可以用钢笔工具，STEP 02钢笔工具所绘制的形状关闭填充，线条设置为红色，将线条大小设置为0.5px。这里选用红色是为了照顾视觉的可辨性，你也可以选用和照片本身差别大的色彩。根据照片提示的轮廓进行绘制，并不是一定要完全效仿照片。就像本例中，我们未必要完全效仿模特的发型。基础形里的每一个形状都要封闭完全，这是为了填色的需要。STEP 03绘制五官的部分，尤其是眼睛的时候，要注意保持每个形的封闭型，这时你要非常清楚你的填色逻辑，不要被线条误导了。五官保持最简单的形，去掉一切繁琐细节，而又要保 ...继续阅读 (13)

很多人不善于整理自己的网站资源，没有系统的分门别类，都是一些零散的收藏，在用的时候找起来很麻烦。虽然有很多优秀的设计导航已经帮助大家分好类别，比如优设网的导航分类，但我觉得还是自己总结出来的更加适合自己，那今天就来分享一下我是如何来将这些设计网站来进行分类整理的（场景可能不全，大家自行补充）。欢迎关注作者的微信公众号：「菜心设计铺」我经过简单的调研总结得到大纲如下（软件部分我就不多说了）：灵感图标素材模板图片配色规范文章教程1. 灵感在做作品之前，我们需要找大量灵感参考。这样的设计网站不计其数，我个人觉得用好几个就足够了，收藏的太多其实也看不过来，主要还是自己一些素材库的积累。我将设计网站分为三类：第一类：可以上传作品作为视觉设计师，有空的时候整理整理作品并进行分享无疑是一件好事！例如：BehanceDribbble站酷UI中国第二类：用于整理素材库下面这两个是有画板功能的设计网站，可以对自己的素材行进更好的分类整理，使用花瓣进行素材分类是不错的选择，而且花瓣可以批量采集，十分方便。第三类：仅仅用于分类浏览之前有推荐过这个网站，是按照UI各个类别来进行分类的，比如你想看登录注册页，直接找这个类别，里面全是这个属性的参考，碉堡了！Collect UI2. 图标图标你可以分两个层面来整理，一个层面是下载图标的网站、另外是制作图标的教程。图标下载网站iconfonticomoonicon ...继续阅读 (10)

设计传统的2D界面尚且需要你掌握大量专业知识并付出辛勤的汗水，要打造全新的体验独特的3D世界又将意味着什么？Mike Alger和Andy Stone正是致力于研究这一问题的两位走在前沿的VR设计师。Mike Alger目前就职于Google，过去几年里一直在VR领域进行探索，他所制作的几部VR设计理念讲解视频堪称业界经典。Andy Stone是Emerson Stone设计公司的合作伙伴，同时也是Medium上的VR话题作者之一。 实体与空间的迷宫关于VR，首先需要定义清楚的就是“虚拟现实”这个概念本身。这个名字不错，也存在了有一段时间了，但如今我们知道这个概念有着更广泛和深刻的所指，沉浸式体验的意义更在于对我们所生活的这个现实世界进行扩展。VR不仅代表着一种全新的人机交互范式，它更需要我们对物理及空间相关的知识有着深层的理解，包括音效设计、建筑设计、光影与物理效应等等方面。对于社交类产品来说，这些要素很可能重塑个人空间、个人形象的展现形式，以及人与人之间的互动模式。在为VR进行设计之前，我们需要充分考虑清楚自己的设计倾向及其有可能对用户造成的影响。这是一项长期工作，随着我们对全新社交范式的理解的不断深入，相关指导原则的制定及道德层面的讨论也会持续进行。 如何看待VR设计目前所处的阶段？Andy Stone我个人看来，在这么短的时间里，Google就能将其设计语言充分融入到VR/ ...继续阅读 (6)

在看组件和元素之前，我们先了解在他们之上的一个概念-模块模块大家应该都不陌生，任何一个完整的界面，都会有多个功能模块，而每个模块内有相应的组件，每个组件中又有相应的元素，其中任何一点的变化，都会使用户对产品的认知发生改变。 模块并不是一个新的概念，早在20世纪初期的建筑行业中，将建筑按照功能分成可以自由组合的建筑单元的概念就已经存在，同样也出现在早期的产品设计中，并且许多产品的设计都能将其很好运用，包括汽车，电脑，电器，鞋子等等。（如下图） 这些产品之所以使用模块是因为模块具有这些优点：1.标准化：模块是具有标准尺寸和标准接口的预制功能单元，这是组装、互换等特征的基础；2.可组装：多个模块可以方便、灵活地组合、配置，以构造不同大小、不同形状、不同功能的系统；3.可替换：通过用一个模块去更换另一个模块，可以改变系统的局部功能而不影响系 统的其他部分；4.可维护：可以对模块进行局部修改或设置，以满足用户需求，另外可以增加新模块，扩展系统功能。 那我们从身边熟悉的产品（插线板）出发，看看它里面有什么？常用插线板的模块分为两部分：总开关模块和主要功能模块，为保证总开关的重要性，总开关模块下并没有连续的组件，只有控制总操作的元素（按钮），总指示灯以及品牌logo之类的品牌信息。 我们来看看总开关模块下的元素： 我们来看看主要功能模块的组件和元素： 在功能模块不变的情况下，人们即将开 ...继续阅读 (8)

别让措辞毁了你的设计成果。用户体验设计师必须了解文案的力量。并不需要成为一名文案写手，而且也绝对不需要小说家的文笔（当然，你愿意也可以）。但你需要清晰了解语言学，理解你所用文案的真正含义。令人难以置信，产品和体验中使用的语言，会彻底改变用户的感受和使用方式。实际上，掌握特定词语的内涵（何时该用，何时避免）能使你的工作和创意更有效。不信吗？没关系，我也心存疑虑——我们一起来看看。“能”和“可以”的区别这是个好例子，因为两者很接近。设想回到校园时代，你在一堂数学课上急着上厕所。你会举手，然后对话大致这样发展…你：“对不起老师，我能去厕所吗？”老师：“我不知道……能不能，你说呢？”我每次都无言以对（而且非常紧张）。许多人都没意识到，当你询问别人自己能否做什么时，你可不仅仅是在征求意见。你问的其实是可能性。你在问你是否有能力做某件事……他们是否有能力做某件事……某件事有没有可能发生，如果发生怎么办？“能”使得问题含糊不清，增加了上下文变数，使你（或者用户）从目标上分散注意力。现在，把上面例子中的“能”换成“可以”。可以（逻辑上来说）只有两个结果——可以和不可以。下次当你提问或请求允许时，应该用“可以”，观察对方的回答会发生什么变化。相对来说，你会更容易得到是或否的回答。实际上，只要你的请求不算荒唐，天平总是向肯定的回答倾斜。作为用户体验设计师，我们都知道避免设计含糊不清的重要性。越清晰明确 ...继续阅读 (8)

什么是设计规范，设计规范到底有什么用？如何看懂设计规范？今天@Jaret_杰瑞特结合实际工作中的体验，帮你快速上手设计规范。“设计规范”这个话题似乎在这1，2年里大家最常讨论到。基于智能设备的人机交互方式已经渐渐的走向成熟。在经历了最初大家一起一股脑儿摸爬滚打的时期之后；在进行越来越多、越来越频繁的UI／UX工作之后，许多方式方案开始慢慢沉淀，被认可，被整理出了一系列具有参考性及可沿用性的东西。大家对“设计规范”所起的作用多少都有些了解。时常听到的声音包括有：“让工程师能清晰的知道如何去实现还原设计”；“设计团队有新小伙伴加入时能尽快熟悉相关产品的属性环节，快速上手。”具有一种对内、对外兼具的作用。在网上一些设计交流共享平台上简单搜索了一下发现，绝大部分看到的“规范”都是类似这样的一种展示方式大部分的规范我能清楚的明白设计控件的尺寸规格。对于前端的开发人员来说照着做是没有任何障碍的。但当想要通过“规范”去认识当前的产品；或期望通过“规范”来帮助我进一步获得一些认知时，我发现变得不再那么容易。似乎除了对于刻板标注的数字理解外，就不再有其他的任何信息了。回忆起我在学习阅读Material Design时的感受，我突然发现“设计规范”的大体可以归类为两大部分-“设计指南”和“设计规格”“按钮”是最常见的一种控件。随着设计风格的不断更新，按钮的样式也在最近几年中出现了明显的变化。看似最简单 ...继续阅读 (11)

本文适合产品经理、UI设计师和交互设计师。阅读需要约3分钟。对话式交互会成为未来吗？一、要想火，傍大腿对话式交互，顾名思义，就是像两个人对话一样的交互方式。可以是文字的，也可以是语音的。我们每天都用的微信，你说一句，我说一句，就是典型的对话式交互。微信和 Siri本来嘛，对话式交互只运用在对话的场景，不是什么新鲜事儿，冷饭之所以被炒热，是因为它傍上了大腿。这个大腿，指的是近年来一个火的不能再火的词 — 「人工智能」。人工智能美团的王兴说，现在是移动互联网的下半场。百度的李彦宏说，人工智能的互联网时代已经到来。把这两句话加起来，就是说，目前正从「移动互联网时代」走向「人工智能时代」，这也是市场上比较主流的看法。各个人机交互时代所用的设备和交互方式，我整理了一下，如下表：DOSPC移动互联网人工智能键盘鼠标手指手指 + 声音命令行点击触摸对话从上面的表格可以看出，每个时代都有属于自己的交互方式，而且是越来越简单，越来越自然。既然都快到人工智能时代了，交互方式也得与时俱进啊，那未来主流的交互方式是什么呢？浮出水面的答案就是 — 对话式交互。对话式交互会成为未来主流的交互方式吗？我们一起来探讨下这个问题。二、走在前面的探索者给大家介绍两个app，在对话式交互上做得不错的。OperatorOperator是一个对话式的购物app。我们一般逛的淘宝天猫，都是把商品一个个 ...继续阅读 (9)

一个产品能够成功的关键在于两点：可用性与价值。可用性是指用户明白如何使用，价值是指用户对产品的渴求程度。我们每天忙忙碌碌、绞尽脑汁的去思考如何改善产品性能，优化交互体验，最终的目标不外乎这两点：简单易用、欲罢不能。从互联网的发展历程来看，我国的互联网普及是从移动互联网开始的。PC时代昙花一现，智能手机的爆发带来了我国互联网的繁荣景象。一时间各种移动app迅速出现，激烈的市场竞争推动了app的创新与使用体验的提升。这也使得一款应用的创新难度越来越大，而想让自己的应用留在用户的手机桌面则必然要在细节上打动用户。在我使用的数款产品中，总有一些功能细节让我感动。都说用户苛刻，但其实大部分用户在使用产品时都有小女生的心态：如果你能在某个细节打动我，我可以接受你所有缺点（当然是在不影响主要功能的前提下）。一、有道词典三星Note系列掀起了大屏智能手机的浪潮，自此开始，各品牌陆续推出自己的大屏手机。大屏手机的优势暂且不讲，但在一定程度上造成了操作的不方便。我们习惯了一只手操作，但在屏幕5.3甚至更大时就很难一只手操作了。有道词典从7.0版本开始（如果没记错的话），在屏幕右下方的位置加了一个悬浮的搜索按钮，点击时自动把焦点放到上方的搜索框并弹出键盘，这对用户操作带来了极大的便捷。二、网易云音乐功能1：默认打开界面移动网络无线网络众所周知，网易云音乐的评论区是文艺青年的聚集地，但让你暖心的可不只是评 ...继续阅读 (4)