小编：你是否会面对需求大脑一片空白，没有灵感？那么，你有没有想过很多时候不是你的设计水平不够好，而是你找的参考不够好。感谢@葱爷的分享，教你如何找到合适的参考。管你是新人还是老鸟，找参考都是设计过程中非常关键的一个步骤，因为一个设计师的大脑容量是没法跟全世界的设计师相比的。虽然参考不一定是你做设计的标准，却能对你的创意和设计有指向性作用，毫不夸张的说，找对了参考你的设计就成功了一半。分享设计参考网站的文章有很多，但是并不是有了好的网站就能找到合适的参考，这一点大家都应该深有体会，然而关于分享如何找参考的文章并不多见，所以葱爷来弥补一下这个市场空缺，嘻嘻！找参考也是有套路的，我把它分成了以下四个步骤：一、确定需求在找参考之前我们必须先搞清楚客户或者老板的需求，拿包装设计举例，别一听到说要做款面膜包装就马不停蹄的去瞎找一通，这样效率会很低而且容易跑偏。正确的做法是先问清楚他们这款面膜产品的功能、主要成分、主要卖点、走专业线还是日化线、产品价格、目标人群、是否进口、包装成本的可接受范围、客户有没有倾向的设计风格或者主色调、市面上有没有客户比较钟意的品牌等等，这些都是我们找参考的指南针，最终也会影响你的设计是否能卖出去。当然，很多时候关于设计的问题客户是没有方向的，这个时候我们就要运用自己的专业知识去引导他们，例如：如果这款面膜走的是日化线，针对中端市场，主要成分有马尾藻、水果等，消费对象 ...继续阅读 (9)

小编：@呆呆 设计风格是一种很虚的东西，对于大部分的UI设计师来说，都是如此。相信很多人都是在一家小型的互联网公司做设计，估计还是公司唯一的设计师，同时对设计风格又拿捏不定，总感觉是跟着产品经理或老板的思路去做设计。比如老板的要求是“大气”，谁 TM 知道这“大气”指的什么鬼？即使花了不少时间去研究其他公司的产品，依然做不出领导满意的视觉稿，最后还被各个岗位的同事指点着去修改你一把屎一把尿喂大的稿子。我上面也说了，其实这种事情（讲述设计风格）对于视觉设计师而言是一种很常见的现象。我身边也同样有很多设计师出现这个问题，不知道如何向领导或客户讲述自己的设计风格。说个现象，仔细想想自己是不是这样的：我们在做视觉评审的时候，设计师讲述的常常是文字对齐、线条、高斯模糊、图片大小等视觉表现，有时候甚至沉醉于 icon 的角度及尺寸的问题。面对于产品经理与程序员的质疑只能说：我觉得这样更好看、这样比较适合我们产品的风格…之类的话。要知道，这些理由在如今这个以显性数字指标为衡量标准的互联网时代已显得苍白无力。实话实话，想要把设计风格讲清楚，的确不是一件容易的事。但绝对要避免从感性的角度来阐述事实的这种习惯，毕竟现在的移动产品从视觉表现力方面正在逐步降低要求，这种环境的变化也是要求视觉设计师应该主动去加强设计思路的原因。为什么要用这个颜色，为什么要用线条、模糊、留白、卡片、阴影…说这么多干嘛？别人能 ...继续阅读 (11)

小编：从可识别性到差异性，图标都经历了什么？@呆呆：这次我会讲解一下如何把一个图标设计的更好，中间我会分享一些自己训练过程中收获的心得，希望能帮到大家。“随着扁平风格的出现……” 这些虚的我就不说了。在自己开始做图标练习之前，我对图标的概念仅仅是好看、简单，只要稍微练几下就可以学会了，而开始接触之后才知道，原来图标设计这么有讲究。在练习的过程中，我看了很多国外设计师写的关于图标设计的一些文章，从基本的视觉元素到人的系统感知，也终于理解为什么如今的界面设计中，图标会占据如此大比例的原因了。有人说：“人们对于抽象概念或艺术性强的图像的理解能力并不差。” 每个人的视觉感知能力都能轻易的理解一些图像所包含的意义，因此成熟的视觉感知是更有效的信息传递途径。所以我总结了以下三个原则来谈谈图标设计需要注意的事项：可识别性视觉统一差异性可识别性最新的 IOS 设计原则被人们概括为：大、黑、简。我也去看了些相关数据，在视觉的设计中，最受欢迎的颜色也确实是黑色，其次是白色。所以沿用到图标设计中，黑白图标也是在界面中最广泛被使用的。（除了那些概念设计）为了让图标提升界面中信息的被理解性，很多设计师也会用黑白色去设计图标，原因有两个：一个是颜色会干扰用户的理解力；界面中颜色多了，会消耗用户寻找图标的时间；因此颜色是识别性中需要注意的一点，为了提高用户的可识别性，我们的设计更应该遵循用户习惯。有一部分设计师 ...继续阅读 (12)

小编：今天跟着小编一起来学习一下双重影像的玩法。非常感谢作者@飞屋睿的分享，作者通过三种双重影像的做法来为我们讲解怎样在形与色的维度下增加重影图像的造型魅力以及通过操作简单的PS的调色功能（渐变映射等），改变图层的混合模式，让画面呈现丰富变化。你将获得什么？近两年，重影都被大家玩High了，我也曾写过一篇关于如何制作重影效果的文章。但其实关于重影的玩法千变万化，万物之间总有那么一丝一毫的形象之间的联系，这一联系就会让两个毫不相关的形象之间形成某种内在的逻辑，形意相合最终达到某种和谐。然而，我们并不满足仅仅在“形”的层面，再加入了“色”的维度，就将这场重影游戏推向了另一个小高潮。今天我们将分享几个双色影像的做法，通过这一制作过程，你将主要能领会下面两点。1、怎样在形与色的维度下增加重影图像的造型魅力。2、通过操作简单的PS的调色功能（渐变映射等），改变图层的混合模式，让画面呈现丰富变化。理解其中的无限性。一、双色姿态首先，是选择两个不同的人像重影，在此我们运用滑板运动的人物造型，体现某种运动中的姿态韵律。你也可以选用其他的动态人物比如舞蹈、跳水、溜冰等等。之所以选择动态造型，主要是为了取其姿态的灵动感，将其有机结合。STEP 01在PS中将选择好的人像做抠图的准备。每个人物作为一个新的图层加入到新文档中。STEP 02关闭其中一个人物的可见，先为第一个人物调色。这里所谓的调色并非是要 ...继续阅读 (13)

小编：今天由@lady_chris带来一篇关于电视设计的译文。谷歌之前出的安卓电视设计指南（继material design之后），翻得不好但是帮助学习和理解电视交互 有错的地方请大家指正。 原文地址：Android TV译者：lady_chris 关于电视设计的相关文章：《Android电视应用:Amazon Fire TV版TVPlayer设计》《APPLE TV的UI设计需要了解的基本规则》 转载请注明：学UI网»基于material design的Android TV设计指南 ...继续阅读 (10)

小编：我们提供的这个Photoshop文档，是Apple平台上呈现的Emoji表情符号的矢量文件。在PSD文件中，你会发现文件夹与每个表情符号包含多个矢量图层。注意：如果你想改变他们的大小，记得缩放图层样式，最简单的办法从“图像>图像大小“里进行缩放。小彩蛋：sketch形式敬请期待～ 转载请注明：学UI网»免费的Emoji 表情包矢量下载［psd］ ...继续阅读 (28)

小时候枪是多少男生喜欢的玩具啊！就像我小时候就可喜欢枪了，今天我们就来一起怀念下童年，绘制一把玩具钱吧~~注意：注意枪的结构比例；注意颜色的搭配；注意高光、阴影的表现;建议使用软件:photoshop，sketch要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX） 原图作者：Tatiana Bischak各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»一起找童年-‘’枪‘’【临摹】 ...继续阅读 (14)

小编：总是买买买，你有没有思考过购物车这个功能，在你买单前后购物车起到了什么作用？在线上和线下，网页与APP中的购物车各有什么玩法？ @彬彬 跟随他的译文一起来看看经常用到又被你忽视的购物车吧。购物车最初只是在超市大家用来装东西，装孩子，溜轮滑，偷回家的小推车。后来有了网上购物，就只能用来装东西了。再后来网上购物越来越流行，竞争激烈，购物车承载的电商功能又变得越来越多，形式也越来越多。但是它的主要功能一直没变：装东西，去付钱，无论线上线下。线上购物车作为多件商品买单之前的必经之路，最初在网上使用购物车时，线上的体验非常类似线下体验。多件商品手上拿不下，就丢进购物车，把购物车推进收银台，逐一结算买单。这里线上线下的不同点出现了，“逐一“刷条形码买单；网上购物车不需要这么做，一次就可以结清所有商品。那么网上的购物车页面就可以在结算之前看到购物车内商品的总价。既然有了总价，之后就有人在购物车中做了单个商品的促销活动，多个商品的组合促销，满减，满折，满赠，包邮，从而有了凑单功能，促使用户消费更多。有了多个商品的玩法之后，购物车也有了针对每个商品的操作，可以选择需要结算几件商品，删除商品，修改商品数量，修改商品子码，降价提醒。至此，线上的购物车从功能上来讲已经很接近现在大家在网上使用的购物车。然而，用户不仅仅使用了设计上提供了的购物车功能，很多人把购物车当做收藏夹使用，可以了解降价促销信息， ...继续阅读 (7)

小编：@star 最近左眼皮一直跳，直觉告诉我要粗大事了！今天早上开始手机就震个不停，看了下至少几十人加我QQ微信好友，粉丝群的通知也是从从早上一直弹个不停，朋友圈也是被刷屏了，完全懵逼状态，不知道的还以为我上今日头条了。感谢虎哥，感谢学UI网，原来是今天学UI网的微信公众号头条文章推了我作品，让我今天火了一把。一直以来有很多设计师童鞋纷纷问我怎么成长，怎么快速提高，甚至有问我怎么快速成为推荐设计师，这个我想说你去P一个黑钻Z加上不就有了么。不过关于前面大家比较关心的新手设计师怎么快速成长，我还是有一些新的体会的，在这里我也分享下我个人的经历。我既不是科班出身，也不是从小学习美术（不过也不能说一点没学，小学还是学过的，不是吹牛逼，作品还在市里拿了奖，虽然后面证书被我妈当废纸卖掉了。。）说白了我就是一个完全0基础的小白，我只是运气好，碰到了我师父（手动敲黑板）- 学UI网创始人虎哥，从虎哥身上我学会了很多东西，不只是指导我设计，还有看待事情的方法，还有眼界。他用自己的亲身经验，很多工作生活中的问题都迎刃而解，是我的良师益友。言归正传，回到新人怎么进步这个问题上来，我总结下来有以下几点：1你必须有十足的热爱，因为热爱是唯一坚持的动力。你会对你狂热的游戏玩一半退掉么，你会对你心爱的姑娘追一半打退堂鼓吗？我想你不会，那么问题来了，当你学设计学不下去的时候，你会怎么办？这个问题你自己来回答， ...继续阅读 (4)

小编：@star 最近左眼皮一直跳，直觉告诉我要粗大事了！今天早上开始手机就震个不停，看了下至少几十人加我QQ微信好友，粉丝群的通知也是从从早上一直弹个不停，朋友圈也是被刷屏了，完全懵逼状态，不知道的还以为我上今日头条了。感谢虎哥，感谢学UI网，原来是今天学UI网的微信公众号头条文章推了我作品，让我今天火了一把。一直以来有很多设计师童鞋纷纷问我怎么成长，怎么快速提高，甚至有问我怎么快速成为推荐设计师，这个我想说你去P一个黑钻Z加上不就有了么。不过关于前面大家比较关心的新手设计师怎么快速成长，我还是有一些新的体会的，在这里我也分享下我个人的经历。我既不是科班出身，也不是从小学习美术（不过也不能说一点没学，小学还是学过的，不是吹牛逼，作品还在市里拿了奖，虽然后面证书被我妈当废纸卖掉了。。）说白了我就是一个完全0基础的小白，我只是运气好，碰到了我师父（手动敲黑板）- 学UI网创始人虎哥，从虎哥身上我学会了很多东西，不只是指导我设计，还有看待事情的方法，还有眼界。他用自己的亲身经验，很多工作生活中的问题都迎刃而解，是我的良师益友。言归正传，回到新人怎么进步这个问题上来，我总结下来有以下几点：1你必须有十足的热爱，因为热爱是唯一坚持的动力。你会对你狂热的游戏玩一半退掉么，你会对你心爱的姑娘追一半打退堂鼓吗？我想你不会，那么问题来了，当你学设计学不下去的时候，你会怎么办？这个问题你自己来回答， ...继续阅读 (5)

小编：今天推荐两大网站与背景图跟配色有关，收了这两妖，让你的设计更得心应手。Materialui它收录了网络上各优秀站点的常见设计风格以及配色组合。除此之外，此网站还提供 Material Design 图示、选色器等工具。 ​​​​ Novapattern它提供精心设计的图案，这些图案规律得让人艳羡。有免费的、也有收费的项目。整理：陌北默 转载请注明：学UI网»设计师这两大网站必收！背景美图与配色狂 ...继续阅读 (15)

外国朋友很喜欢的一名中国UI设计师，UISTAR。昨天第4次上dribbble 榜首了，咋这么牛逼，发4个作品上4次榜首。到底是怎么做到的了？实力肯定是第一，大家可以关注他的dribbble主页。https://dribbble.com/ui_star 还有5个最新的作品，都是GIF的带动画的。只可惜压缩了规定大小还是没办法上传，大家可以去他的追波主页，查看高清大图吧。https://dribbble.com/ui_star 恩，他也是zcool推荐设计师，可以关注一下。zcool：http://uistar.zcool.com.cn/想认识他，可以加他的QQ群，也就是上面的这个QQ群：427695502。我偷偷告诉你们，他还是单身，妹子们可以撩他。咳咳，虎哥好像多嘴了。恩，他是老虎帮下一期（第9期）的新任讲师，老虎帮讲师团队实力越来越高，小虎伴儿有福了。话说老虎帮最近作品集更新了不少。http://laohubang.cn/zuoye老虎帮精美原创作品，学完你也有，找工作靠好作品！我们都付出了大量的时间和精力，帮助你快速成长！老虎帮咨询QQ群号:496626170加群写虎哥转载请注明：学UI网»这个叫UISTAR的大神连上4次dribbble榜首 ...继续阅读 (12)

everybody作业来了，开始做作业了！今天作业难度不大，我相信各位童鞋肯定可以搞定~~注意：渐变的运用；投影的制作；深浅的把控； 建议使用软件:photoshop，sketch要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）注：本作业来自追波各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»小图标绘制【做作业】 ...继续阅读 (13)

小编：UX设计指以用户体验为中心的设计。每个产品都需要用户的支持，随着以用户为中心的设计理念不断加强，我们更要站在用户的立场来思考，做用户想看到的产品。所以我们要注意也要避免一些产品中的小缺陷，它可能会极大的影响用户的使用体验，接下来我们就一起来看下这些要注意的要点吧！在设计过程中，产品中的一些缺陷常常被忽视。经验表明这些小缺陷极大的影响用户的使用体验。我们把这些要点做成一个列表供设计师将要交付设计工作的时候参考。请注意，并非所有这些要点都适用于所有产品，但通常这些都是最相关的，谨供参考。A:交互设计01.让人感觉不费力的重复操作或频繁操作为什么重要？重复的操作为了相同的输出（例如，用相同的信息填不同的表格）是一个费劲的任务，并不能帮助用户更好更快地实现用户的目标任务。用户很可能也试图找到变通的办法：例如，寻找其他可以帮助用户更好更快实现目标竞品，这意味着你的产品用户量会逐渐下降。如何测试：首先应该从分析产品所有的交互逻辑流程和观察用户的行为开始。要确保，如果重复操作存在，产品需要提供给用户使重复动作变得容易的操作方式。例如，提供一个可以使用以前输入的信息的选择。 02．用户可以很容易地从错误中恢复为什么重要？用户时常地进行一些无意识的误操作或者其操作不能得到期待的结果，此种情况下，产品如果允许用户返回（上一级页面）或者再次操作，用户就不会有挫败感，同时，这保证了用户能够很容易的从 ...继续阅读 (3)

小编：今天我们要学习，如何在AI中使用一些简单的工具，如矩形工具和路径查找器等创建一个温暖的城市景观，教程比较长，要耐心做哟，做完会收获大大哒！第一步：打开ai, 新建1200 x 600 的画布（快捷键command n）第二步：图层－ 分层我们新建画布后，需要创建一堆图层（10个左右），这将有助于我们更好地控制我们的构建过程。请转到“图层”面板，并使用以下名称进行设置：第三步: 制作画面远景建筑把图层设置好以后，我们将开始对每个图层创建内容，首先锁定未使用的图层，留下当前操作的图层。步骤一：画远景建筑11.确保你在远景建筑的图层，使用矩形工具（M）画一个粉红色（#FFEBEB）132 x 194px矩形，变换面板定位的坐标数值：（X：156px；Y：459px）2.现在需要调整它的左上锚点，向下移动24个像素。 可以这样做，用直接选择工具（A）选择它的左上锚点，然后执行对象>变换>移动。出现一个弹出框，水平输入0px，垂直输入24px；得出图：3. 使用矩形工具（M），创建另一个90 x 92px的，将其定位（X：147px，Y：338px），然后使用移动工具（A）使用相同的技巧，将其右上角锚点向下移38px。选中这2个对象，使用路径查找器的联集将它们组合成一个形状。4.接下来，我们要画顶部天线，通过创建一个4 x 48px的矩形，并使用这些坐标定位：X：114px；Y：276 ...继续阅读 (7)

小编：本这是一个很基础的界面小教程，很简单，好多同学在界面临摹的时候，规范都不是很懂，所以界面看起来也不是那么规整，最ui基础一定要打好,这篇教程针对小白们打造，不明白的地方可以加作业群交流：317086090 作者追波地址：https://dribbble.com/ui_star 转载请注明：学UI网»music播放界面【教程】 ...继续阅读 (12)

世界范围内，每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失（CVD）的影响。这意味着每100个web或app用户中，至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力？我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队，先来看看我们列出的色彩可用性设计的几项重要事项。 首先，色盲到底是什么？大多数色盲能和正常人一样看清楚东西，差别在于他们无法识别红色、绿色或蓝色光谱。这种缺陷是 X 染色体突变的结果（意味着女性更有可能是携带者而不是患者），主要有以下三种症状表现。最常见的是红/绿色盲，这些患者会混淆所有含有红色或绿色部分的颜色。红色盲对红色光谱不敏感。绿色盲对绿色有相同的问题。例如，一个有红色盲的人会混淆蓝色和紫色，因为他们无法识别紫色中的红色部分。蓝色盲，作为第三种色觉缺失，出现的最少。他们无法识别蓝色或黄色光谱。下图展示了彩虹在各类色盲眼中可能看起来的样子。 所以，该如何提升色彩可用性？你可能会想：“为什么我要费心去为如此小的用户群体设计？”一般来说，色盲患者觉得可取的好设计元素，往往在更广的领域也是好设计。所以，如果你的网站是精心设计的，它应该能够对所有用户都可用。可用性设计并不意味着你需要妥协设计的整体美学。为了色盲用户的友好用户体验，你应该注意以下五点:1. 同时使用色彩和符号你不能仅依靠色彩来传 ...继续阅读 (12)

小编：@UISTAR当我们回顾这几年做的体验比较优秀的交互设计时,会明显发现做的比较好的APP都是注重功能优先的。对一个产品来说，好的功能设计是它成功的关键。美学和视觉细节同样重要,因为他们可以有效的提升功能设计。《在GUI设计中如何运用模糊和投影（上）》模糊效果1.移动APP中的模糊效果当年苹果推出iOS 8时,它开始在APP设计中运用模糊效果，尤其是当它出现在屏幕中的时候。最重要的变化之一是使用了高斯模糊，最明显的就是控制中心，你只要从屏幕底部上滑就可以拉出控制中心，而这时候背景是模糊的。这是一种新潮的交互方式，只用你的手指就可以完全控制。2.苹果iOS系统的控制中心在最新版本的iOS系统上，苹果又进了一步，给系统自带应用：手电筒，照相机，计算器和计时器图标加上了3D Touch功能。当用户的手指按压这些图标，弹出框会出现实时模糊效果。 高斯模糊对现代手机界面有以下好处:1.让流程图明显在GUI设计中，模糊效果可以很好的区分界面层级，移动端尤为明显，当我们有多个UI界面信息出现重叠显示的时候，利用高斯模糊效果是非常高效的解决办法，它可以让用户明确的理解界面流程。雅虎天气iOS版就是运用了当地的天气图片作为背景，你关注的天气基本信息一目了然，想要了解更多详细数据只需点击一下屏幕，比起用新的页面覆盖当前的天气图片，雅虎天气会停留在当前页，并把天气背景图模糊掉，这样使得详细天气数据被 ...继续阅读 (11)

清明节还有一周了，每次听到这俩字，除了放假还能想到的就是“清明时节雨纷纷，路上行人欲断魂。”这两句诗原谅我是个吃货，我只想跟大家讨论下清明你们都吃什么。不知道大家各地都有什么清明那天要吃的食物么？在大山东的我家清明一般就是吃煮鸡蛋，去年无意间发现一个好物：青团，江南地带的特产，爱吃糯米制品的人应该会喜欢，安利给你们。还有没有别的食物你们要安利给我们的？？吃货交流起来，毕竟设计很费脑子，需要吃好多好吃的补补。转载请注明：学UI网»二十四节气–清明【话题讨论】 ...继续阅读 (8)

小编：@C7210本周译文聚焦传统UX领域。从什么时候开始习惯使用“传统”二字描述自己和多数朋友日复一日所从事的行当了。去年开始关注VR之后么。来自Evernote的产品设计师，讲述关于Evernote for iOS的进化史，包括对2013年大改版的回顾，以及如今8.0重设计的林林总总。很有意思，作为Evernote的重度用户，同时作为交互设计师，看到这些故事，回想着几年前被iOS 7冲击时的感受，以及为之而重设计的那一版铺天盖地一片绿色的印象笔记，忽然像是失去了对时间的感知。或是因为现在已是夜里一点二十七分的缘故。另外我真的听到过有人非常可爱而认真的把Evernote叫做ElephantNote。下面进入译文。说起来，产品重设计也是一项相当刺激的工作。发布日期渐渐邻近，整个团队被紧张忙乱的情绪所笼罩。几个月来，我们为产品挥洒了太多的汗水甚至是泪水，而在即将发布的时刻，我们却不禁开始质问自己：“真的准备就绪了吗？” 是啊，真的就绪了吗？用户会怎样反应？喜欢？反感？喜欢又反感？我们在害怕，在恐慌，但同时也在保持乐观，甚至有些喜不自禁。当然，发布日最终还是会到来。现在（作者撰文时），Evernote 8.0上线已经超过一个月了。在这样一个时刻，我不禁回忆起2013年那次大改版发布上线之后的状况。Evernote for iOS的变革历程​追忆往事2013年6月，苹果发布了颇具争议的扁 ...继续阅读 (9)

渐变色的配色是非常微妙的，一不小心就俗不可耐，又一不小心就化身仙境。今天给大家推荐一个渐变色网站，它上面有180种渐变，可清新、可甜蜜、可妖娆、可诡异（最后一个当我没说）。他们还不仅提供了代码，还有png图片。传送门地址：https://webgradients.com/ 转载请注明：学UI网»180种渐变色随你选 ...继续阅读 (16)

小吃货们今天有福了，今天咱们的作业是个美食页面的临摹哦！小吃货们可以自己找找美食的照片贴上去哦！注意：整体界面配色、排版；图标的形态结构、颜色合乎事实；字体大小；要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）注：本作业来自追波各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»美食页面临摹【做作业】 ...继续阅读 (16)

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

小编：淘宝2017改版，系列文章：《淘宝2017UI设计风格改版升级》、《淘宝2017-提示信息的情感化设计》从商业目标出发的产品设计商业目标与产品面貌打开一个电商应用的首页，我们随处可见复杂的界面布局，眼花缭乱的商品图和各式各样的广告文案，他们无时无刻争先恐后的想要抓住你的眼球。而当你打开一个聊天应用的首页，你看到的只有一个简单的聊天列表，他们只是静静地等待你作出选择。从根本上来说，决定你在一个产品中看到什么取决于产品策略上希望你看到什么，也就是我们通常所说的商业目的。对于电商类产品，把东西卖出去，是千古不变的真理，所以在界面上运用丰富的内容，商品图和各种优惠来引起你的注意。从产品原始目的差异出发，便会有完全不同的产品面貌。这也是为么，作为产品设计师我们有必要聊聊从商业目标出发的设计。作为手淘的产品设计师，我们从老本行电商产品聊起，在把东西买出去这个大的原则下，细分的产品中又会承载不同场景的目的。比如说购物车是一个效率型产品，存在的目的是为了让用户更便捷的批量购物。而商品详情则寄托了非常强的转化目的，所做的一切都是要让你在这里下单购买。设计这些承载了不同商业目的的产品时，会需要不同的设计思路。在本次2017商品详情的改版升级中我们尝试从产品的本质出发—从商业目标维度去挖掘设计改进方向。商业目标推导设计目标 转化率to使用效率商品详情作为手淘流量最大的产品之一，在整个电商产品体系中 ...继续阅读 (3)

小编：@UISTAR当我们回顾这几年做的体验比较优秀的交互设计时,会明显发现做的比较好的APP都是注重功能优先的。对一个产品来说，好的功能设计是它成功的关键。美学和视觉细节同样重要,因为他们可以有效的提升功能设计。阴影和用户界面的可发现性GUI设计师在设计时运用阴影是有原因的，他们通过在界面里创建视觉线索来告诉用户大脑，这就是他们要找的用户界面元素。设计可供性在早些时候的用户界面中，投影就被运用到了界面中，它使得图片和控件在页面里被凸显出来，让用户理解这些控件是可以直接操作的，尽管每个APP的视觉线索有差异，但是用户通常可以信赖下面两个假设。1.漂浮起来的元素看起来是可以按下去的（可以用鼠标或者手指点击），这   通常作为一个视觉信号被运用到按钮中。2.凹陷下去的元素看起来是可以填充的，这通常作为一个视觉信号被运用到输入框中。下图你可以看到在Windows 2000的对话框中，阴影和高光的使用来帮助用户理解哪些元素是可以交互的。感知行动的可能性:注意按钮的高度。创建视觉层次和纵深感现在的界面布局都用到了Z轴，并且对它加以充分利用。元素在Z轴的位置对用户来说是重要的提示。Z轴是垂直于屏幕所在的平面，在正轴方向朝向用户。图片来自：Material Design在不同的两个元素中阴影可以表示两者的层级，而且在一些案例中，阴影可以帮助用户理解，一个物体实在另一个物体之上的。图片来自：Mat ...继续阅读 (7)

小编：这帮电商设计师到底在干嘛啊？他们能干嘛啊？～他们有没有前途啊？～写在前面有一位面粉给我提出了一个问题，让我印象深刻，我也一直想着等空了要好好回答一下，她的问题是：“电商设计师究竟该如何认知自己的价值？比如我们花费那么多精力做的页面却只是上线几天就下线了，而别的设计师，比如做一个logo，却可以用好久可以几年甚至几十年都不换，感觉好不公平啊。”我想这个问题应该也是很多面粉所关心的，所以我想根据我这么些年的观察和经历来说一下自己的看法，也欢迎大家跟我一起探讨。我将从以下几个方面为大家分析解答一下：1、电商设计师是做什么的？2、为什么电商设计师做的页面只上线几天就下线了？3、其实把电商设计和其他设计拿来对比谁更有价值是不太合适的。4、电商设计师的职业发展方向有哪些？5、电商设计师该如何正确认知自己的价值？以下是正文部分：1、电商设计师是做什么的？要想知道电商设计师的价值是什么，就先要知道电商设计师是谁是做什么的，那么电商设计师是做什么的呢？以前我就提出一个概念，不管身处何处身处何位，电商设计师其实可以划分为2大类，一类是为平台服务的，一类是为店铺服务的，我们可以做这样的假设：京东和天猫这样的平台就相当于一个个步行街和商场，而入驻这些平台的店铺就相当于入驻这些步行街和商场的门店，服务于平台的电商设计师相当于是为这些商场做装修／运营及设计服务的，服务于店铺的电商设计师相当于是给这些店铺 ...继续阅读 (6)

开端：做一个有故事的淘宝现如今，消费者对产品的需求从追求高性价比更多地转为高品质，虽然手机只是一个机器，但用户与产品之间当然是能有情感传递的，不然就只是一个冷冰冰的工具而已，能让用户在使用体验和过程中产生愉悦的产品才可能走的更远。淘宝不只是售卖商品的平台，而是有活力、创造力的生态圈，淘宝的用户也是越来越年轻化，淘宝当然也应该有自己的故事，自己的“小情绪”，将这些有趣故事叙说给用户，这样才能给用户带来更好的购物心情和体验。 情感化的价值“用户的情绪诉求”产品给用户的第一印象决定了很多事情，人是视觉动物，第一眼对物的观察会本能地判断是否打动其内心，很多时候哪怕只是一个小小的细节，都有可能可能瞬间让人注意并且喜欢。产品亦然，就像用户逛商场一样，如果逛着逛着心情越来越不好怎么会乐意继续逛下去呢？所以我们要追求的不仅仅是“可以用”而已，还要让用户在使用后和使用前一样的是愉悦的过程和心情。“人性化的产品更受欢迎”“人们喜欢和人交谈，而不是机器”，这句话出自唐纳德·诺曼写的《情感化设计》，其实道理很浅显，人性化的产品，脱离了冰冷的机器的味道，不再那么的呆板。人机交互学科中，人性化是很重要的一部分，产品的设计者充分考虑到用户的心理感受，将产品化身成一个有个性、有脾气的人，相比冷冰冰的机器更能得到用户的好感和共鸣。这种例子在现实生活和工业设计中不胜枚举，将机器拟人化情感化等元素使其更生动有趣由此被用 ...继续阅读 (13)

小编：今天的作业是一个天气类界面，大家可以临摹看看，也可以发挥自己的创意哦。注意：合理的间距；统一的图标；颜色的搭配；要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）作者：Halie Homan原图链接：https://dribbble.com/shots/3331443-Fair-Weather-Sunset各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»天气界面临摹【做作业】 ...继续阅读 (18)

设计一个电子商务网站是一项很大的工作。对一个初创公司来说，现在推出网上商店比以前容易了。像Shopify这样的软件，拥有令人惊叹的可定制模板库，可以轻松地打造漂亮而且高度沉浸式的电子商务网站体验。这里有12个吸引我们眼球的网站设计，你可以从中吸取顶级网页设计灵感。 01.Drybar颜色和动画的巧妙运用优秀的配色搭配微妙的动画让这个网站同时具有风格和个性。鼠标放在吹风机上，它会在绳子上弹跳；鼠标悬停到顶部的导航图标上时，一些小动画会给你提示和反馈。像这样的触控操作，会让访问这个网站变地有趣，而不会使人不知所措甚至感到厌烦。启发点：在鼠标悬停触控设计时，恰当地运用颜色和动效会给用户提供良好的反馈并且让人感觉到生动有趣。 02.Northernism极简设计让使得该网站对于用户的要求降低，易于浏览使用。这个网站通过摈弃已建立的电子商务设计模式，将图像和文本放置在感觉不太熟悉的网格上，创造出了一个新的外观。网站上有大量的空留白并且每个页面包含几个简单的图像，让它看起来比其他大多数网站轻松易懂。启发点：好的摄影作品的使用让产品感觉很奢侈 03.Bill Blass很具创意的布局使得该网站脱颖而出这家服装零售商通过把他们的产品放在首页瀑布流中，打破了在不同的盒子中展示产品的惯例，这让整个网站看起来像是一张大的图片。把这种新鲜的方法和好的配色方案以及漂亮的字体结合在一起，最后的结果是打造出一个 ...继续阅读 (31)

每天我们都使用表单进行基本的网上操作。网上购物、注册邮箱、社交网络甚至参与讨论、描述美味的午餐等等都需要我们填好表单。不夸张地说，表单是数字信息分享的生命根基。然而多年以来，表单的体验鲜有提升，仅仅停留在功能足够好却达不到体验上的优秀。然而现在，在使用恰当技术的帮助下，我们可以设计出更快、更简单、更有成效的表单体验。在表单体验中一条经典的原则是“越短越好”。耗费用户更少的精力可以带来更高的转化率，这当然看起来符合逻辑，但是这条原则没有考虑到很多因素，比如应用场景，设计方式、表单体验的吸引力等等。举个例子，我发现一个被引用的次数远超其它的报告，它的测试成果被多篇文章和言说提及并被当做“真理”，而可怕的是这个研究成果其实是相当有局限性的。这个报告是Imaginary Landscape(一个开源的网络开发机构）近十年前的一次实验，试验中当表单从11个字段减少到4个字段，转化率增加了160%。但这只是一个页面，一次测试，两个变量得到的实验结果，假设他们进行了多组4个字段的实验，或者做10个字段与11个字段的表单作对比，4个与5个字段表单做对比，也会令实验更加值得信服。然而他们没有，这只能说明仅在这一个特定的情况下，确实减少表单64%的字段能使表格更容易填写。在Call To Action 2015的演讲上,来自Unbounce 的Michael Aagaard分享了类似的案例。以提高一个 ...继续阅读 (8)