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

2017年，那是一个春天。有一群可爱撕逼的设计师们又开始搞事情了！Biu Biu Biu~ 来不及解释了，辩论赛开始了！本次辩题：设计师们，你们要不要用黄金分割？你说你说你说！（氛围好不好，全靠这张图了） 正方：要用观点1：黄金分割是一条公认的美学定律，蕴含丰富的审美价值，是视觉上最舒服的比例黄金分割自产生起就成为一条公认的著名的美学定律，并被广泛应用于众多工业产品、建筑、视觉作品中。无论是像古埃及的金字塔、古希腊的帕特农神庙这样著名的历史建筑，还是像密斯・凡德罗的巴塞罗那椅、波尔舍甲壳虫汽车、苹果logo等众多优秀的设计作品，都有使用了黄金分割法则，给人以整体上的和谐悦目之美。之所以在设计界如此受欢迎，是因为和其他比例相比，1:1对称显得严肃，偏向一侧视觉方向运动感强，而0.618这个比例点是最让人感受到的运动不会太刺激同时也不会呆板。即使这样的关系没有用精确的数学表达出来，人也可以感觉到，并且形成一种内在的联系，让人感觉舒适，即黄金分割提供给人潜意识上的舒适感，因此可以帮助设计师不至于做出让受众感到不舒适的作品。 观点2：黄金分割有助于设计师快速上手产出又快又好的设计方案作为新手设计师，提升自己的审美水平和美感直觉不是一朝一夕的事情，需要在长期的实践中训练培养，因此在现实生活中，通过运用黄金分割这样的普遍认可并经过实践检验的美学方法，可以帮助新手设计师快速掌握设计基础法则，指导 ...继续阅读 (18)

项目背景零售通是阿里巴巴B2B事业群针对线下零售商店推出的解决方案，与优秀的本地供应商合作，为零售店提供品质好货，升级社区零售店的便民功能。简单来说，阿里零售通就是让零售店老板们进货变得像我们上淘宝购物一样方便，并且同时获得阿里生态的赋能支持。 用户人群零售通面对的是一群很特别的人群 — 零售店店主，而且前期主要服务三四线城市的小店店主，零售店主既不同于C类买家，不以自己的喜好做购买决策；同时也不同于大型B类买家，购买决策流程也不像大B类冗长。 作为传统线下场景，零售店有许多自己的特点，例如电商经验弱、社区化、关注好销…等等，零售通将针对这些特点发挥自身的线上、大数据优势帮助零售店主，将传统的线下小店，打造成最具人气的时尚小店。 基于用户心智模型的视觉策略零售通的主要用户是三四线城市的零售店主，是典型的传统线下行业从业者：他们的行业专业度通常并不高，却拥有较大的决策权（往往自己就是老板），同时传统零售普遍“触网”程度低，对电商领域陌生；所以，要让这样的用户群欣然接受零售通这样一个全新的产品，设计上就需要尽可能降低用户认知成本，让我们的产品看起来更符合用户直接的心智模型。基于这样的思路，我们在视觉策略上着重强调了产品对用户的熟悉感和引导性。在PC、APP的首页设计过程中，我们大量植入了货架、小店门头、挂板等小店熟悉的视觉元素，我们希望用户一打开零售通页面，就如同打开了一间有温度的、满 ...继续阅读 (20)

一个好的界面设计应该拥有高转化率且方便用户使用，换句话说：既能达到商业目的又能满足方便易用的要求。有一个设计咨询公司根据自己的客户案例，总结了75个经过实践证明的原则：@乔向阳之前国内流传这篇文章的前40个规则，后35个是我熬夜翻译的，这个网站会不断的更新添加新规则，建议收藏。1. 使用单栏布局代替多栏布局单栏布局能够让用户对全局有更好的掌控，对内容一目了然。而多栏布局可能会分散用户注意力。最好的做法是用一个有逻辑的叙述来引导用户并在末尾放上你的行动按钮。 2. 使用礼品诱惑代替生硬的推销例如可以给用户提供礼物来表达你的友善姿态。更深层的讲，送礼是一种基于互惠原则的有效说服策略。显而易见的好处是让你在往后的活动进展中更加顺利。 3. 合并重复的功能避免分散随着时间的推移，不可避免的你增加了很多模块、元素，而且功能相同。碎片化的界面会增加用户的学习曲线，所以需要合并重复的功能，重构你的界面。 4. 用户的评价好过自卖自夸用户好评是另一个可以提高转化率的说服策略。当潜在客户看到其他人对你的服务给予好评时，项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。 5. 重复你的主行动按钮多次重复主行动按钮的方法适用于界面很长或者分页的情况。 6. 区分开可点击和已选择的样式视觉风格，如颜色、深度和对比度都可以当做可靠的线索以帮助人们了解你的导航界面：我在哪里，我能去哪里。 ...继续阅读 (30)

@TTTing 貌似做电商的没有不玩数字游戏的吧？就算运营玩法再千奇百怪，他的设计也逃不出这些套路，一起来看看！～写在前面做电商设计的人都知道，我们的文案里时常会出现类似“满200减100”／“5折”／“30%OFF”／“39元起”“4月1号预售”之类的带有数字利益点的文案，而数字比文字也显得更加直观更加吸引眼球，所以对于该如何合理利用这些数字做设计也是很值得研究的一个话题，接下来我就带大家看看咯！～1／我们常见的会用到数字元素的设计有哪些呢？比如我们的很多电商Banner或专题页面里，经常会出现活动日期／抢购时间／商品价格／位数排名／剩余或已售个数／步骤序号／完成进度等跟数字有关的元素，而这些数字他所要传递的信息重要性和作用都是不一样的，所以在设计上也会有所差异。（1）在头部banner部分的数字像活动日期／价格折扣信息／抢购时间／件数等等常出现于头部Banner部分，一般来说这个数字信息如果很重要，那么都会做得特别大特别突出，如果不是那么重要的信息，那么就会在大小或色彩等上面对其进行弱化处理。举些例子：还有优惠券的一些设，基本都是将数额显示的大大的：（2）出现在楼层部分的数字像抢购时间／倒计时／位数排名／步骤序号等等这些往往是出现在页面楼层里，很少出现在头部Banner部分（以前给大家说过专题主要有头部Banner以及很多楼层组成大家还记得吗？），同时他们的位置／大小／可见度的 ...继续阅读 (18)

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

又到了做作业的时间了，今天男神给大家带来的练习是一款宠物的界面的练习~~各位童鞋们，赶紧动起来吧！注意：渐变色彩；图标制作；阴影效果;要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）原作者：Ghani Pradita各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»宠物界面信息临摹【做作业】 ...继续阅读 (24)

小编：看腻了追波风的设计，来欣赏一组由老虎帮小莫同学设计的一套古代汉服主题的APP界面。温婉尔雅的美构筑了华夏的礼仪文化。汉服是汉民族传统服饰，汉服文化是一个非常成熟并自成体系的千年文化，是反映儒家礼典服制的文化总和。@小莫（一只鸭蛋）一直以来都对汉服有着难以割舍的痴迷，那种婉约独特的美在我的诗意情怀里久久停留，不能自已。汉服铺子是一款专门为汉服爱好者打造的精品APP。致力于提供材质优良、做工精美的上等汉服，并努力营造符合同袍兴趣爱好的汉服社区。转载请注明：学UI网»汉服铺子APP，欣赏一种婉约美！ ...继续阅读 (59)

小编：栅格系统在UI设计中起着非常重要的作用，它是以规则的网格阵列来指导和规范设计中的版面布局以及信息分布。使得信息呈现更加美观易读，更具可用性。本篇是关于栅格系统的基础讲解，非常感谢作者@菜心设计铺的分享。温馨提示：这是一篇非常非常基础的关于栅格的文章，如果你已经对栅格系统有了深入的理解， 就不用浪费时间看这篇文章了！以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。关于栅格栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？其实我们都是栅格专家，因为在我们几岁的时候，就已经接触了很多栅格，比如方格本：再比如飞机格： 关于系统我个人理解，系统就是规则，例如ios系统，它有它的规则：屏幕尺寸规则，代码语言规则等等，想在它的系统里做app，就需要遵循的它的规则。栅格有了规则，也就形成了我们所说的栅格系统。所以今天的重点来了，栅格系统（规则）到底包含哪些内容呢？我通过研究sketch软件的一些栅格设置选项来反推栅格系统包含的内容，得到栅格系统基础六要素，大纲如下：1.栅格的最小单位2.屏幕总宽度3.列数4. ...继续阅读 (25)

似乎很久没有布置写实icon的作业了，今天咱们就来一个写实的练练手吧！今天这个写实电视呢咱们网站之前有过类似教程哦！不会的童鞋可以在网站检索下~~注意：注意图层样式的运用，一般多用内投影、渐变、内发光、投影注意材质，可以用添加杂色来做要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）原作者网址：https://dribbble.com/shots/1778713-TV-Icon各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»写实小电视临摹【做作业】 ...继续阅读 (66)

【前言】我们接受到的设计教育、看过的书籍或是关注过的公众号里流传着各式各样的关于设计流程的经典模型，比如Design Thinking Process，比如用户体验五要素，比如马斯洛需求层次理论，我们在感叹这些设计理论知识体系的如此经典和缜密的时候，有没有想过它们到底对实际的设计有多少的指导意义？有些经典的框架早在上个世纪就已经提出来，对于今天的设计现状是否仍然适用？我们有没有属于自己的关于设计流程的模型？下面进入译文——这不是一篇讲纯理论和条条框框的文章，我想要为设计师、创意思想家甚至是项目管理者提供一套规范化的框架，用以安排构建、组织运行或管理设计挑战或项目，我希望它真的能够指导你的设计实践。这套框架我暂且叫它：双钻石模型改进版，之所以叫“改进版”是因为它是在原始版的双钻石模型的基础上修改而成。双钻石模型改进版或许你已经熟知许多设计流程相关的模型或框架。比如BDC(British Design Council)提出的那套原始版双钻石模型（关于双钻石原始模型，我在后文会有详细介绍），见图一。比如IDEO的HCD（Human-Centered Design）思想体系，见图二。哦，可千万不能落下斯坦福设计学院的著名的设计思维流程（Design Thinking Process），见图三。你将在接下来的文字里熟悉这些模型的主要方法，步骤和工具。图一. BDC原始版的双钻石模型（图片由李 ...继续阅读 (20)

小编：UI设计中的配色是非常重要的一项，它不仅代表着产品的定位还决定着产品的风格。好的配色可以提升产品的用户体验，使得我们在竞品中有属于自己的风格特色。今天我们就来讨论一下影响配色的几种因素吧。我们都知道在UI设计中配色占据着极其重要的地位，良好的配色会提升产品的用户体验度，更会吸引更多潜在用户的目光。当然一款产品配色体系的建立是一个极其繁琐的过程，碍于篇幅我无法展开来说。这篇文章我们只是主要来探讨一下如何确定产品的主体配色风格：是白底黑字还是黑底白字？影响配色的因素一款产品配色风格的确定是要综合多方面因素，在配色方案制定的初始阶段，我们应该考虑以下几个方面： 易读性屏幕背景色的选择会对内容的易读性产生极大的影响，这是产品用户体验中我们最看重的一部分。因为我们主要通过眼睛来获取信息，如果这款产品的屏幕内容我都无法看清，那么就没有继续使用下去的欲望了。特别是对于以文字为主体的app或网站来说，糟糕的易读性会导致用户忽视重要的信息，而且增加了用户的阅读成本。用户必须耗费很大的精力才可以获取信息。所以说即使你的产品在其他方面做得很出色，易读性的缺乏会致使你损失大量用户。 适配无论是设计一个app页面还是网页，我们要记住用户会在不同的设备下使用我们的产品。在高分辨率屏幕下一些很酷炫的效果在低分辨率的屏幕下就会很“脏”，原有的效果无法体现出来。所以设计师应该注意产品在不同屏幕下的适配问题。当 ...继续阅读 (17)

今天的作业是一个小插画，大家可以临摹看看，也可以发挥自己的创意哦。注意：1、合理的比例；2、颜色的搭配；3，透视关系；要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）原图链接：https://dribbble.com/shots/2935173-Work-Shop作者：Scott Tusk各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»小插画绘制【做作业】 ...继续阅读 (24)

​“怎样才能成为一个更好的设计师？”有人问设计师Jonathan Z. White。他结合现在正在学习中文的经验，将着手设计出更优秀的作品时首先要学会控制的一些重要的基本原则，与实际能利用的简单练习方法也一并介绍给大家。首先，让我们来看一看，想让视觉设计能够更上一层楼所需要具备的一些基本原则吧。基本原则其一：让字体回到基本通过字体和排版，你就能知道设计师的各种想法和想要达到的目的。字体，可以说是设计的基础。​也可以设计全体都由字体构成，选择合适的字体进行定制。为了改进设计排版，首先可以从基础进行学习。追踪和字距等这些专业用语，将有助于你的排版。与下面的插图相结合，让我们一起来总结归纳各个用语的意思吧。​然后，让我们来学习如何将字体组合。作为更方便实践的样本案例，推荐FontWolf和FontPair。如果有一个良好的字体组合，设计将会发生很大的改变。基本原则其二：让留白变得均衡留白空间，将有助于体现设计运动的垂直和水平方向。特别是在创造视觉层次时，有着作为各个设计要素之间的关联提示的重要作用。​Behance或Dribbble这样的网站可以为你的设计提供很好的灵感。但更重要的，制作良好的平衡空间，你还需要不断磨练自身的直觉。深入学习了字体，你会发现留白的间隔是非常重要的。调整字间距和行距，为眼睛留下合适的空白空见。你可以尝试着使用KernType，他能让你在游戏中学会使用字距。【操 ...继续阅读 (21)

小编：每个人看同一张设计都会有不同的感觉，在工作中尤其是电商通过加入对数据的考量，也许会有帮助。当然数据并不是设计的目的。@ISUX 设计效果检验，即针对设计师的设计方案进行数据验证，通过客观的数据来量化一部分设计方案中较为主观或存在争议的地方，以此判断设计方案的优劣，从而得出检验结论。众所周知，每个人对设计的评判是主观的，设计效果也不容易被直接量化。所以针对设计效果的数据检验变得很有必要，它可以辅助设计决策，沉淀出优秀的设计案例，并且进一步衍化出更好的方案，同时好的设计方法论得以传承。从长远角度来看，设计价值得以彰显，设计师的说服力得到提升。同时我们是在一家商业公司，好的设计除了为用户带来良好体验，还要体现商业价值。而商业价值可较为直观的从数据中体现，这也是设计效果检验的目的之一。那么，如何做好设计效果检验？换个说法，如何去除其他噪点，让设计因素成为唯一的验证点，从而得到严谨可靠的检验结论？且听我一一道来： 一、检验结论的可靠性我们先从一个例子说起：临近农历春节，设计师为所在业务设计了一套春节氛围，并在除夕前几天发布上线。节后观察数据，发现春节期间页面顶部续费按钮点击率波动上升，相较春节前提升幅度很大：因此，我们得出如下结论：由于春节氛围的设计充分渲染喜庆的感觉，用户被情感化的设计所打动，并转化为实际的付费行为。该设计为业务带来了XX倍的数据提升，创造了XX的收入。后续氛围设计都 ...继续阅读 (18)

小编：马上就要小长假了，再此之前，大家不要松懈哦~~~加油哦。五一劳动，在小雨的印象了劳动人民的代表应该是农民和渔民。就顺应主题来了一组“劳动光荣奖”。教程不难，很简单的布尔运算和钢笔，没有复杂的形状。大家一定能快速的完成它的。~~~劳动也光荣，咱们设计师也是一直在劳动，咱是脑力劳动嘛，最后祝大家节日快乐~~~转载请注明：学UI网»劳动人民【教程】 ...继续阅读 (20)

小编：@UISTAR上次有童鞋提到能否推荐一些Dribbble上面的优秀设计师，我本来也想有时间整理一下相关文章，既然有童鞋有这个需求，我就提前跟大家分享下我平时关注了哪些设计师，因为每个设计师风格作品不一样，所以还是把一些典型代表先单独分享。比如今天的插画设计设计师Miguel Camacho，他的作品配色非常清新，风格简洁大气，虽然扁平却充满细节，是当前非常流行的风格。甚至把这些插画用在网页头图或者APP里面都是非常容易出效果的。 转载请注明：学UI网»Miguelcm插画作品欣赏 ...继续阅读 (53)

首先出现的数值和设置内容就是默认项。它们的作用似乎微乎其微，但默认项（和它们的设计者）掌握着强大的力量——替用户做决策。本文中，我们会讨论如何运用预置的内容和默认设置，创造更好的用户体验。表单输入框中的默认内容即使过程很简单，长表单往往还是会让用户敬而远之。通过提供适合的默认值，可以从海量相关选择中拯救我们的用户。默认项应当符合多数用户所需如果可以预先确定内容，就把它预置到输入框中，要确保它是多数用户的选择（比如95%）。人们会很快速浏览在线表单，所以不能假设他们愿意花时间来理解所有的选项。他们很可能会欢快地略过那些已经有内容的项目。旅行网站的默认项是非常好的例子。Skyscanner的预置了二等舱选项和游客类型，这是多数用户的典型选择。 使用智能默认值输入文字的交互成本极高，它很容易输错，而且相当耗时，即使有完整的键盘也一样（更不用说在触摸屏上输入了）。要尽可能把输入操作减到最少，防止用户犯错——使用智能默认值。下面这些例子，可以反映智能默认值如何帮助用户减少犯错，并提高生产力。基于用户的地理位置，预设国家选项。如果能够了解到用户当前位置在墨尔本，那么国家一栏就可以默认设置成“澳大利亚”。尽可能让界面做更多的运算。下面的截图中，界面正在以美元计算总花费，并且为顾客换算成欧元。尽可能让信息输入减到最少。 在需要用户注意的地方，不要使用默认输入项在任何需要用户思考的地方，都不要使用默 ...继续阅读 (25)

从上学学平面设计开始到工作至今，一直有很多人不断问我们设计师做设计时要参考什么网站及作品。相信这是只要从事设计行业或是学设计的同学们都会被人问到的经历，并且随着设计阅历的逐渐丰富和越来越细分的设计行业现状，动手做任何设计之前，先找到适合的设计参考，已经变得越来越重要。今天，我就分享出 “那些年” 我 “照扒” 的设计师名单，从我个人最直接的角度来分享出我每次做设计之前的那些 “设计参考”。（做不同风格的设计自然就要参考相对应的设计作品和风格，我大致把我Dribbble上的所有设计师名单分成了9类，所以我接下来会从不同风格类别分别进行介绍其中3种，余下6种下次介绍。）01 Graphic (Stroke)比较倾向适用于网页及手机App页面中的Icon及小插图设计。这个设计风格以我个人观点认为，是现在平面设计界最为流行的和被普遍接受的，主要是因为它对互联网和智能手机页面的适配度很高。它主要以概括的线条描边、单纯的色彩、简约但富有创意的设计为主要元素，以可爱的风格为主，很能吸引观众的眼球。但这种风格对设计师们的要求很高，不但需要设计者有深厚的概括绘画功底，而且还需要有很好的设计软件使用基础，在看似简单的小插图中，能准确的勾勒出图形的线条和添加出适合的颜色，往往是异常艰难的。相信很多设计师们，也包括我自己，都没有能在很短时间内设计出一系列这种风格插图的能力。“大繁若简”，越简单的设计里面的 ...继续阅读 (18)

@飞屋睿建筑是空间的诗学，是简单几何抽象美感的极致表现。尽管我们并没有学建筑设计，但还是可以从建筑的美学中汲取到灵感。最适合用以绘制建筑的还是矢量软件，比如AI等。今天我们就用AI来绘制一组童话里的梦幻城堡建筑，通过绘制这些繁复的细节，你将要学会：1、通过丰富的细节描绘，从最简单的几何体入手，理解建筑里的几何美学层次。2、增加对AI里的“形”的处理能力，熟悉形状工具、路径查找器、变形效果等工具的运用。一、绘前准备在绘制前，我们先来预定一组配色。既然是绘制城堡，就会让人联想到童话，那么配色的风格可以倾向童话梦幻感。STEP 01先确立三个主色，其他的辅助色可以在这些主色的基础上做微调变化。让画面显得更有层次。色彩的摸索，的确不是看上去那么容易。除了依靠自己的经验把握，以及对各种资源的收集，AI里也内置了很多风格配色。STEP 02建筑物的绘制前应该做好对各种城堡图片的参考，特别在细节处理上要格外注意。绘制好草图后，根据你的草图来规划AI里的图层层次。打开AI，新建一个2232px*1626px的文档。强烈建议大家下载最新版本的AI，在新版本的AI里完美像素对齐的方式非常简便，操作易行，这比旧版本要提升了许多。将图层提前规划出来，并进行更名排列妥当。二、第一座城堡绘制第一座城堡，你需要安排出合理的结构和色彩层次。STEP 03先在背景图层上绘制出铺满整屏的背景矩形，填充非常浅的紫红色。 ...继续阅读 (14)

小编：UI是做什么的？我们也许第一反应是做界面，通过人机交互来帮助用户完成他们的目的，这是没错的，可是这就足够了么？当然不！我们需要提升用户体验，让用户对我们的产品有好的印象，喜欢上我们的产品。今天就和大家谈谈如何让好的体验更持久。Look! 就是这两张图表（图1）彻底改变了我对“人类思维”的认知。这是一个经典心理学研究结论（1996年）的重现，它们背后的研究结论是如此生动地昭示着我们：回忆是多麽的不可靠！因为你的回忆跟你的当时感受根本是两回事！弄明白“当时感受(experience)”和“回忆 (memory)”的区别及联系，你才会成为一个“机智”的体验设计师。当然在这里，我会总结一些tips给你们，让你们能够尽可能的设计出给用户留下“持久好印象”的体验。但是首先，让我们先来读懂这两张图表：图1. 两位病人在一个医疗过程中的疼痛体验这两幅图表描述了两位病人在同一医疗过程中，每分钟的疼痛程度变化。0代表无疼痛，10则代表疼痛极限。乍一看似乎病人B在这一医疗过程中显得更加痛苦一些，因为尽管他疼痛的峰值与病人A相同，但他经历疼痛的时长却是病人A的三倍。试想如果你将代替这两个病人中的一位去经历同样的医疗过程，正常人都会选择病人A吧。然而，人们的思考方式，尤其是“回忆”过程，并木有那么“理性”。当包括病人A和B在内的150位被试者在给这次医疗过程的疼痛程度打一个总分的时候，数据显示这一打分 ...继续阅读 (17)

小编：今天来教大家制作水彩头像，过程很简单，效果非常漂亮。大家可以制作自己的专属头像啦！如果找不到好的素材，文末还有作者@方米_Funme为大家准备的素材文件。非常感谢作者的分享，大家做好后别忘了晒出来呦。这个方法相比用阀值来做多了很多细节。原文地址：UI中国作者：方米_Funme转载请注明：学UI网»一分钟制作水彩头像 ...继续阅读 (18)

@葱爷：看几千个案例其实还不如看懂几个案例。阅前一叨逼：所谓极简就是，简还不行，得非常非常简，然后还得招人喜欢。极简设计一直是设计师很推崇的一种设计风格，因为它容易给人一种格外轻松、舒服、高大上的感觉，令人印象深刻。其实还有一个很重要的原因是，极简设计执行起来也要相对容易一些。1、视觉集中极简设计传达的信息也必须是简单的，所以不允许有干扰因素，整个画面只允许有一个视觉中心。2、没有多余的元素极简设计的特点是能减则减，只保留必要的部分。3、大量留白（简称“大白”）大量的留白能使主视觉更突出，也能增加想象空间和感官舒适度。4、干净的背景为了减少对信息的干扰，极简设计的背景都必须是很“纯洁”的。5、只用一种表现手法极简设计拒绝花里胡哨、拒绝用过多装饰和设计技巧。6、简单漂亮的配色优秀的极简设计，颜色搭配是关键，而且种类一般都不会超过3种，颜色太多容易花。7、美观好看是做设计永恒不变的标准，极简设计也不例外。几乎所有优秀的极简设计都具备以上7个特点，而在这7点之上，针对不同的设计类型也还有不同的其他要求，我将以下面5种设计类型为例进行详细解读。极简平面广告：简单有趣的创意、信息传达清晰、极致的细节、好看的构图。▲上图的可口可乐广告是极简设计的典型例子有趣的创意：把可口可乐的辅助图形演化成两只正在分享可口可乐的手，而且采用了正负形结合的方式；信息传达清晰：可口可乐、分享；极致的细节：线条流畅 ...继续阅读 (16)

小编：网站的设计表现方式由很多种，今天来介绍一种分屏式。这种设计两边的信息可以包含相同类型的元素，可以呈现不同属性的媒体内容，完美的解决了需要同时呈现两个不同内容的需求，这种UI界面在视觉设计可以很有张力，页面设计非常有趣，功能也足够强大。习惯了一栏式的设计，将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息，是分屏式设计的最典型特征，两边的信息可以包含相同类型的元素，可以呈现不同属性的媒体内容，比如一边是图片，一边是文本。 分屏式设计完美的解决了你需要同时呈现两个不同内容的需求，这种UI界面突出了这两项内容的对等地位，让用户自行浏览，或者作出选择。The Ocean Engine Themes Kirichik Bose Dewey’s Pizza Construction Papers Benchmark Focus Challenge 2016 Renate Rechner Thalida Fillet Joris Delacroix Bigcartel Res.im Peugeot Studio Meta Madame de Xavier Bourdil O3 Wightco 文章来源：设计之家作者：佚名 转载请注明：学UI网»20个分屏式网站设计欣赏 ...继续阅读 (61)

小编：“很多人不知道找工作带什么样的作品集才有说服力，下面就欣赏3套不同风格的优质作品。从APP的起名字、到图标设计、界面布局、交互、文案都是自己思考完成，100%的原创设计哦。找工作就要带上这样的作品，妥妥的轻松搞定。”老虎帮课程学完以后每个人都可以做出实打实的接地气原创作品，直接带着去找工作。作者：小国王zcool地址：http://littlekingking.zcool.com.cn/ 作者：小倩zcool地址：http://www.zcool.com.cn/u/14400612 更多优质作品可以访问老虎帮作业集http://laohubang.cn/zuoye点击加 老虎帮QQ咨询群：496626170 转载请注明：学UI网»想转行UI，得做出这样的作品。 ...继续阅读 (25)

又是新的一天了，今天我们的作业仍旧是APP的临摹~~  希望各位爱学习的童鞋动起来吧！注意：蓝色饱和度亮度的把控，渐变投影的使用建议软件PS sketch要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）原作者：No.13各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»APP临摹第二发【做作业】 ...继续阅读 (17)

你在阳光明媚的夏季喜欢哪些食物？新鲜的水果和果汁吗？对我来说，多汁的西瓜和香橙是最夏天的水果。所以这个教程的灵感来自于一个充满成熟水果的明亮温暖的夏天。今天，我们将在Adobe Illustrator中为西瓜和橙子制作出色彩鲜艳，时尚的图案。我们将创建两个主要元素和四个附加元素 。1.绘制整个西瓜步骤1首先，我们要新建一个500×500 px文档。步骤2现在让我们开始绘制我们美味的西瓜。使用椭圆工具（L）绘制一个150×150px的紫色（#8472ce）圆。选择画笔工具（P）和深紫色（#4a288c）。在我们的基本形状的左半边绘制三条弯曲的条纹。然后将这些条纹翻转复制到右侧。步骤3现在让我们给西瓜绘制一个半透明的阴影。使用矩形工具（M），创建一个大的矩形。设置不透明度为45％，并将其颜色设为紫色（#47034c）。移动到西瓜的右边。然后，选择矩形和基本西瓜的形状，选择形状生成器工具（Shift-M），同时按住Alt移除矩形的多余部分。步骤4现在我们要绘制高光。选择椭圆工具（L），在西瓜的左侧绘制一个大小为17×17 px的圆（#d6c7f9），然后以同样的方式，在第一个圆圈的两边绘制两个7 x 7 px的圆圈（#d6c7f9）。选择西瓜的所有图层创建一个分组（Control-G）。2.绘制西瓜切片步骤1我们来看看西瓜里面有什么。复制上一个西瓜，绘制与基本形状（150×15 ...继续阅读 (19)

小编：原质化设计（material design）强调结合实体物理属性和规律的、合理的动效以及高效的空间化利用。与物理世界接近的触感能够让用户更为自然、高速地理解和认知。我们可以把原质化设计看作一个视觉设计语言，试图构建跨平台（移动、桌面、平板、可穿戴等）的、一致的产品视觉交互体验。首先，Robinhood 是一个零佣金股票交易APP，允许用户购买和出售股票，实时查看市场数据，并构建个性化的股票关注列表。打造一个强大的金融APP，允许人们查看，买进和卖出股票是一项复杂的任务。 Robinhood通过让用户获得快速轻松的产品学习熟悉的体验来解决了这一挑战，该体验使用动画来帮助用户定位APP的核心功能。 滑动轻扫手势可以快速导航，颜色的区分运用可以更新用户对股票及其个人投资组合的重大变化。Robinhood巧妙且高标准地运用了原质化设计的原则，使得该APP在2016年上半年获得了4.65的平均评级，超过9000次评论。Robinhood还获得了2016年Google Play设计卓越奖。 1.通过动画和图片来提高用户学习熟悉产品的体验Robinhood通过一系列精简的动画形式的过渡来轻松引导用户，从而简化了复杂的产品熟悉体验。每个提示都包含一张统一风格的白色插图，与明亮的绿色背景形成鲜明对比，微妙而恰到好处地运用了钱币上的颜色。Robinhood的创意总监Zane Bevan认为，简化 ...继续阅读 (14)

唉，看着网站每天交作业的童鞋越来越少。我不知道各位童鞋到底是坚持不下去还是已经转型成功了~~但是男神还是想说：不管是否转型成功，还是坚持来做作业提升自己吧！今天呢我们的作业是一个app的临摹，难点不多，大家赶紧动起来吧！注意：渐变色彩；图标制作；阴影效果。要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）原作者：Ghani Pradita大图链接：http://pan.baidu.com/s/1c2ClFw各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»APP界面临摹【做作业】 ...继续阅读 (15)

《攻壳》的“故障艺术”海报火了，“故障效果”也跟着火了，今天想告诉你们的是，这个风格不仅仅可以用来做海报哦~在苹果产品的Retina显示屏上浏览网页，在4k超清电视上观看电视节目，仿佛给人一种身临其境的感觉。另一方面，生动模仿显像管效果的画面也有很多。如今能看见显像管电视机的机会已经很少了，加入噪点和线条就能营造出一种复古的气氛。像这样故意使用噪点和变形的效果营造复古气氛的手法叫做“故障效果”。本来是影视后期所使用的技法，经常用于电视节目和音乐视频中。最近，这个风格在网页设计中也经常被采用。1. Active Theoryhttp://activetheory.net2. Cryptaris Missionhttp://www.cryptarismission.com3. VinylCutshttps://www.vinylcuts.nyc/show/splash/4. Future Readyhttp://future.moworks.com.au5. MOZZ TOKYOhttps://mozztokyo.jp6. Retrominderhttp://retrominder.tv7. Arkade Londonhttp://arkade.london8. HAKUHODO Future Mehttps://future.h-mp-recruit.jp9. YOYOhttp:// ...继续阅读 (28)