小编：今天的作业是一个引导页的练习，展现的形式采用插画。难度为0 ，考验细心、耐心的时候到了。各位童鞋可以用ai去制作哦！注意：1.排版布局；2.插画制作；3.色彩协调；要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX） 原图链接：https://dribbble.com/shots/2422143-Space-onboarding原作者：SashaGorosh 各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业 转载请注明：学UI网»线性插画引导页制作【做作业】 ...继续阅读 (15)

小编：@梦尽笑兮 设计也有套路，摸清套路，设计就会有思路。前言做设计就如选衣服和老婆，只有合适了才舒服，设计亦如此，合适的设计才是好设计，合适才好！合适就好！只有合适的设计没有完美的设计。 本文知识总结：A、设计前先确定LOGO类型（两种类型的LOGO讲解）；B、设计先于思考（深入挖掘信息不要停在表面做设计）；C、LOGO实战篇（前面两个是理论，不想看理论的可以直接跳到第三点“设计篇”）；D、头脑风暴，灵感收集整理；E、点子组合和筛选；F、初稿呈现；G、提案包装（让客户看见未来）；H、细节优化； 一、 确定LOGO的风格开始设计之前，先与客户沟通，拿几个案例给客户选择，问问他喜欢什么类型的LOGO，不同风格的LOGO，表现的侧重点不同，分析思路也会有所差异。根据个人总结，我们平常常见的LOGO有以下几类：（今天主要是介绍LOGO设计的分析思路，这里就只简单的介绍一下LOGO的几种常见的类型）。1.字体LOGOa.字体标志的特点我们对文字的理解和记忆高于对图形，字体标志最重要特点就是高度的辨识性与可读性，也许在这个同类信息爆炸年代，字体标志更具有实效性，既能够准确清晰的传达品牌理念，同时又方便品牌宣传。 b.品牌商标注册时通过几率较大现在简约的商标越来越难注册，图形商标非常容易撞车，文字性的品牌标志设计更加具有可靠性，而文字性的商标则很容易检索，大大的提高标志通过商标注册的机会。（下 ...继续阅读 (23)

小编：来自老虎帮的@Momo_Kim童鞋分享：在网上看到了几张合成图片，觉得很有创意，就画了插画版的，今天来说说我的绘制过程，希望能给有需要的人带来些许启发。先来一张成品展示… 再看看照片和成品的对比… 1.整体构思因为是画一个独立的小插画，主体物的动态又很好，所以准备画以圆为基本轮廓，主体物部分在圆里，部分在圆外，使画面整体更有层次。 2.确定画面元素，有取有舍页面除了主体物，我留了一只飞鸟和一个轮船，其他全都舍弃了。留下船是因为需要有物体来表达这是一个海平面，留下一只飞鸟是为了丰富天空，如果天上只有云就少了一份“海阔凭鱼跃，天高任鸟飞”的自由~（太能扯了） 3.勾轮廓细化的部分用5px的描边，主体物用10px的描边，最外层的圆用了20px描边，为的是让画面更有层次感。需要注意的是，我们这个插画是平视，照片的海面稍微有些俯视，我们要根据自己定的海平面，来画大致物体的方位和走向，注意部分细节的勾画，细节要有，但不要多，这里我选择细化鲸鱼嘴下的纹路。 4.背景如果把海和天整个放在圆里，觉得整个画面不够丰富，所以把背景的右侧拉出来，长到可以包含主体物。与背景同理绘制出两片云。 5.上色a.海和天根据明暗关系做成渐变色，其他元素做成单色（因为其他元素后面要加阴影和高光，这里再加渐变就不合适了） b.画阴影整体的光是从上向下的，所以鲸鱼的腹部和鱼鳍的下方需要加阴影，小山的阴影， ...继续阅读 (16)

深圳的细呱：“来老虎帮之前，我连图标都不会画。第一次作业间距和字体也不知道用到多大的，幸好有欣欣从第一次作业就给我指出来，才知道做UI是这么细致的活。有次半夜12点丸子发来修改意见，这是睡觉的时间，而丸子还在熬夜帮同学们改作业，心里感概万千，组长都如此，自己还有什么理由不努力呢。用心投入做作业，时间过的很快，APP已经做完了。最后虎哥连哄带骗的让我改了N次包装，其实我是一个很不愿意返工的人，但看到自己每改一次就提高一次，也就觉得改其实没什么，如果有人指出你的不足，是你的幸运。我就是这么幸运的把第一套APP弄出来了，真心感谢老虎帮，真的学到了很东西，不只是知识，还有很多职场上做人的道理，也认识了很多可爱的人，大家都在为明天奋斗着，真好。最后想说：越努力越幸运。”这是对升值宝做的练习，之前只有活期一个业务，我觉得产品单一，在理财行业竞争力不大，我把定期业务也给加上了。作者：老虎帮XiGua越努力，越幸运！作者：老虎帮XiGua转载请注明：学UI网»升值宝理财APP ...继续阅读 (18)

六一儿童节了，朋友圈有没有被刷爆呢？女生有没有收红包收到手软啊？哈哈，如果你朋友圈被刷爆了也没收到红包的话，那就过来做作业吧！咱们学ui网不仅是设计狗的家还是单身狗的家哦~注意：色彩饱和度的把握注意轻微的颜色变化注意各部分的前后层次要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）注：本作业来源于网络，若知道原作者或者原作者看到，请与本网站工作人员联系，我们将在第一时间处理各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»小插画练习【做作业】 ...继续阅读 (33)

为什么用户这么喜欢动效呢?答案很简单，因为动效支持实时交互的本质。它创造了就像现实生活中人们对物理对象交互一样的情感好处。所以，这种交互让用户非常满意。对于创建UI交互我发现了 5 大论据。UI 动效种类1. 微交互微交互是一个完成单个任务的一瞬间事件。它给出了让用户清楚某种物理交互已经完成的提示。比如，这可以是动画按钮、切换、触发等等。微交互非常重要，事实上也是设计的未来。Stefano Malachi:动画按钮2. 表示进度状态这种 UI 交互显示 APP 的刷新和加载状态。在移动端，下拉刷新动效目前算是最受欢迎的动效了。在等待加载更多内容时，不仅可以告知用户状态，还可以为用户提供时尚、美观和趣味。Stefano Malachi:进度状态3. 显示关键导航清晰的导航对于APP产品的设计师来说总是非常重要的。用户总是希望抢先看到最关键的事物。通过表现对所选中的导航的活动状态，这将立即吸引用户的注意力到内容上来。StefanoMalachi:导航4. 给数据可视化带来奇效明显的谈到数字时人们总会感觉无聊。数据对于用户来说就是数字和表格。这是对的、有逻辑的，可数据总是用这些东西和逻辑表现。添加 UI 动效将为用户带来情感上的好处，不仅美感还有易用性。数据可以用形状、颜色和渐变来重新展示，让活力注入到布局和动效中。Stefano Malachi:数据可视化 对于移动端 UI 动效的几个 ...继续阅读 (18)

你知道HEART 框架吗？当我无意中听到这个框架时，我就一直在反复思考。骑车回家的路上，我会念叨各首字母所代表的单词，我也把它画在了各个会议室四周的白板上——我深陷其中。HEART是一个用来衡量提升用户体验的框架，每个字母代表一种用户体验测量标准：Happiness （愉悦感）Engagement （参与度）Adoption （接受度）Retention （留存率）Task Success（任务完成率）这个框架最吸引我的点在于，它把用户体验的原则和收益驱动的指标关联在了一起 (我之前一直在纠结如何构建这种关联)。 HEART 框架从何而来？Google用户体验研究团队设计Heart框架，起因来自内部团队发现用户体验没有被有效的衡量。虽然那时有很多有效的测量用户体验的方法，比如完成任务所用的时间、任务完成率等，但都更偏向于微观层面。UX设计师缺乏一些宏观层面的商业指标，而这些指标却是更直接影响到公司策略的。因此，Google开始把HEART作为新的用户体验衡量框架。 HEART框架是怎么衡量的？HEART框架同时包含了宏观和微观的衡量方式，能够帮你确定一个产品的用户体验的影响。留存率与当前/未来的营收有着最直接的联系，而其它几个指标则对产品的价值有影响。在阅读了Google关于HEART框架及其起源的一些研究后，我花了四周时间去研究Google是如何在内容上用这个框架驱动用户体验。 ...继续阅读 (20)

@小雨6.1儿童就又要来了，一起来欢乐的游玩吧。我们也是宝宝~~我们也要玩耍~~~保持我们的童真，还是很难得的，仅有的单纯欢乐的心情，是无比美好的。小雨祝大家节日快乐，无忧无忧没有烦恼。教程看着有点难度，比较复杂，其实不然，小雨的教程都是不难的，嘿嘿~~站酷链接：http://www.zcool.com.cn/article/ZNDk4OTky.html 转载请注明：学UI网»CHILDHOOD AI教程【教程】 ...继续阅读 (38)

小编：@菜心设计铺 上期简单的介绍了几点包装的技巧《实例解析作品如何包装才带感？》，这期再分享一波，接着上期，再深入的讨论一下关于包装的技巧。我们包装的目标就是：吸引眼球！我个人觉得要想吸引眼球就要注意以下两点——层级与细节。接下来的时间，我们就来了解一下层级与细节具体是什么！1 层级1.1 颜色层级很多作品包装背景颜色都是有深有浅，为什么？其实就是打造一种颜色层级，刺激视觉感官，看下图：​左侧黑白相间的版本要比右侧纯黑色层级更丰富，在展示作品的时候，就会给人一种视觉冲击力。来看真实的作品排版包装，如下图：Behance 优秀作品​当然颜色层级不一定非要用深浅，色相的对比也可以，如下图：Behance 优秀作品但是色相比较难控制，对新人来说最好的方法就是主色和白色相间使用，不易出错。 1.2 内容层级我们每做完一个作品包装，可以审查一遍，看看整体一共可以分为几层，如果只有两层，那就重新做吧。我们来看看优秀的包装如何让层级丰富。比如使用一些模型，并让界面局部与模型分离：Behance 优秀作品​再比如让背景多几个层次：Behance 优秀作品​再比如像拍照一样，让景深变长，在前景增加修饰物，如下图：Behance 优秀作品​1.3 方向层级方向层级意思就是展示的内容不要都放在同一个方向，要有变化，左右一定要混合使用，不然看着就会死气沉沉的。比如下面这张图：​右侧的排版是不是要比左侧灵 ...继续阅读 (22)

小编：什么是字体排版？为什么它对平面设计师来说这么重要？只要你书写正确、并且保证所写的信息是你的客户想看到的，那么为什么字体样式会让这一切变得不一样？因为你触摸、看到和创造的一切，都会受到所运用的字体样式和排版技巧的影响。由于很多原因，设计师必须基础扎实，尤其当涉及到字体排版的运用时。通过理解设计文案包含和传达的深层次信息，你会在设计和编排包含单词和短句文案的项目时，变得非常高效。也许一张图片可以抵得过一千个字，但是你也必须知道怎样用一千个字用来替换它。排版是一门艺术，是为各种媒体目的统筹各种艺术形式的过程。看看下面的图片，从字体样式上来说，这些部分中的一些或者全部将一直存在。了解基本知识The Type Size（字号大小），也称为大写字母高度帽高，是单词构成中，大写字母的总高度。 Ascender是字母的上半部分，比如h，l，t，b，d和k。 Descender是字母的下半部分，比如g，q和y。 The Counter是位于字母内的空白区域，比如o和p。 X Height是字母的高度，不包括Ascender和Descender。 Baselines基线是字母最低部分倚靠的边界。仔细看看上图中的y，p，g，p和y。它们倚靠的实线就是基线。你见过这样的段落或者广告吗？要么字与字之间的间隔很大，要么全部挤在一起，使得文字非常难以阅读。而字距和行距的有效使用会解决这个问题。字距是位于单 ...继续阅读 (21)

@Yjjj 我们知道一个公司的基础也是核心的需求是盈利，那么盈利需要通过各种销售手段来达成目标，而如何刺激消费者就是营销的手段之一。营销手段可以分为很多种：例如，内容营销、视觉营销、互动营销、网络营销、新媒体营销、饥饿营销、口碑营销等等，那么这次我们就来谈一谈视觉营销。不知道大家通常在购物的时候是怎样的一个心理活动，不可否认绝大部分人类都是视觉动物，第一眼或者第一印象都能够影响他们70%以上的最终决策行为。所以视觉营销的最重要的点就在于如何在第一眼吸引、打动用户。举个例子：大家是否经常看电影预告，酷炫的打斗场面，精彩的爆破特效，惊心动魄的街头飞车。只可惜这些已经是80%的电影精彩内容了，而真实的影片大部分时间在讲男欢女爱，三角恋，父子相认等拖沓剧情，让人索然无味，但这时你tm已经付过钱了啊，能退吗？当然不能，下一次还是这样骗你。好了，这是一波成功的视觉营销，而且你还会孜孜不倦的去看，因为看电影是某些人的刚需，也是一部分人的情怀，确实不看就会死。我们下面来欣赏几张很有独特创意的海报：1. 百度云摄像头的几张大海报，几个关键词：随时、安心、放心、可靠，海报中的人物都是家喻户晓的superstar，并且整个页面有一定的故事性和想象空间，让人印象很深刻，并且调起了好奇心。2. 林大奋大神的插画，这几幅插画更是独树一帜的风格，夸张的表现手法，搞笑的场景图文，只为突出京东的——快！让人意犹未尽 ...继续阅读 (16)

小编：@梦尽笑兮 品牌设计包含太多就不在去深入讨论，今天要说的是品牌设计中的VI部分，在很多人眼中品牌设计就是简单的画一个LOGO，其实这样的认知是不准确的，品牌设计和LOGO设计差别非常之大。今天“笑兮”就和大家谈谈什么是品牌设计，作为品牌设计师应该清楚品牌是什么？注：本文分为七个点进行阐述，如果只对品牌设计方法感兴趣的可以忽略前面两个点直接看后面几个知识点。知识梳理：01、什么是品牌设计02、品牌设计的作用03、可口可乐品牌分析04、品牌设计包括些什么？05、品牌设计实操（品牌视觉VI）06、以美团旅行LOGO为例讲解品牌设计常用方法07、一个好的LOGO具备什么样的特征第一、什么是品牌设计？品牌设计是在企业自身正确定位的基础之上，基于正确品牌定义下的视觉沟通，它是一个协助企业发展的形象实体，不仅协助企业正确的把握品牌方向，而且能够使人们正确的、快速的对企业形象进行有效深刻的记忆。（来源百度百科）从上面的解释我们可以看出品牌设计的作用是有效传播、沟通和记忆，品牌包括：品牌定位、品牌方向、视觉形象等。第二、品牌的作用品牌设计是通过视觉设计刺激人的感官，长期宣传从而无限加深人们对品牌的记忆，在选择同类产品时会联想到该产品。品牌设计有益于企业做大做强，品牌能为产品或服务的成功而做出贡献，品牌可以提高企业知名度和信誉；传递企业的价值观和核心理念，从而让产品在同行中销量更大；给予买方认同 ...继续阅读 (20)

小编：网络上已经有很多人对该文档进行翻译和研究，但是作为UI小白，想通过翻译过程加强对Material Design的理解，所有翻译内容仅凭个人理解。Material design（原质化设计）简介：我们挑战自我，为用户打造一种可视化设计语言，它将优秀设计的经典理论与技术和科学的创新性、可能性相结合。这就是material design。该设计规范指南是一个动态文档，随着我们对material design的继续研究和探索，的相关部分将被升级更新。 目标：创建一种视觉语言，将优良设计的经典原则与技术和科学的创新和可能性相结合。开发单一底层系统，保证它在跨平台和运行于不同尺寸设备的情况下带给用户的使用体验保持一致。移动规则是至关重要的，但触控，语音，鼠标和键盘都是优先被考虑的的输入方法。 原则：1.物质材料质感是一种隐喻象征的设计表达（Material is the metaphor）物质隐喻是合理化空间表达和动效体系的统一理论。物质材料质化表达以触觉现实为基础，灵感来自于纸和墨水的研究，但从技术来讲是先进的，并具有无限的想象力和魔力。物质材料的表面质感和边缘提供了以现实为根据的视觉线索。使用熟悉的触觉特性可帮助用户快速理解我们的设计。然而，物质材料的灵活性意味着可以创造出新的可视化效果来取代客观物理世界中的材料，同时不脱离现实的物理学规则。光线，表面质感和物质运动的基本原理是传达对 ...继续阅读 (23)

小编：形形色色的表单我们几乎每天都会接触，如何让用户顺利的完成表单填写、提交是我们应该想的事。一起去看看表单最高的工作效率：一页只做一件事。2008年的时候，我在*Boots.com*工作。他们想做一个单页的结账页面，运用那个年代最新潮的技术，包括手风琴组件、AJAX和客户端验证。每个步骤（寄送地址、寄送选项、信用卡详细信息）都收在一个手风琴面板中。而每个面板都通过AJAX提交。提交成功后，这个面板就会收起，并且通过滑动动画展开下一个面板。看起来就像这样：Boots的单页结账页面，使用了手风琴面板展现每一个步骤。用户千辛万苦才完成了下单过程。错误难以更正，因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地，客户要求我们作出改变。我们进行了改版，让每个面板单独成为一个页面，也就不需要手风琴和AJAX了。不过，我们还是保留了客户端验证，防止不必要的服务器请求。看起来就像这样：Boots的结账页面：每一步都是单独的一个页面。这个版本的转化率好多了。虽然我不记得具体数字了，我知道客户比较满意。6年后（2014年），我在*Just Eat*工作，发生了同样的事情。我们设计了一个单页结账流程，其中每个部分都有独立页面。这一次，我记下了相关数据。结果是每年能增加2百万订单。要清楚，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率提升的比例得出的。这部分转化成了订单，数 ...继续阅读 (20)

随着时间的推移，Adobe软件公司提供了诸如Photoshop，Illustrator，InDesign等许多设计软件。Adobe XD是你可以使用的另一个优秀的设计软件，而这些Adobe XD教程将会教我们如何来使用它。Adobe XD或Adobe Experience Design CC是与Sketch类似的设计软件，因此你可以用Adobe XD来构建各种原型。Adobe XD随着时间的推移越来越受欢迎，设计师和网络开发人员也越来越多地使用它。它在Mac和Windows上都可用，你可以使用它来绘制惊人的线框，交互式原型和其他专业设计。同时它附带了许多教程，你可以来体验其功能。本文的目的就是：收集20个最佳的Adobe Xd教程供大家学习！让我们开始吧！Adobe体验设计教程这是Adobe的官方网站，你可以在其中找到有关其产品的一些信息，你会发现很多教程。 Adobe体验设计基础（Adobe XD教程）这里有一个很好的Adobe XD教程，可以指导您完成基础的操作，看看你学到了什么新东西。 如何使用Adobe XD创建一个UI原型本教程中包含来许多有用的信息，可帮助您更深入地了解Adobe XD。 “Adobe xd”教程这是一个很好的网站，其中包含有关Adobe XD的许多有用的教程。您可以观看教程，参加课堂或下载电子书。 Adobe XD快速入门指南：8个基本教程正如标题所述 ...继续阅读 (20)

小编：@飞屋睿  我们要学会的与其说是一门技艺，不如说是一条心法。写在前面的话极简应该不算一个冷门风格，而有人鄙夷这类风格的出发点不是视觉价值的判断，而是觉得仿佛一切都来得太容易，而多少对设计这类带着技艺性质的职业有减分的性质，或者干脆把极简视为懒惰。我们的确要认，极简是很容易让人入手的风格，但我们不要误以为这就是设计的全部。我们今天要做的这款壁纸背景是我近期关于“图片合成”的一些思考，之前翻过很多Photoshop Creative这类杂志，发现很多图片合成的优秀案例，但这些案例在视觉风格上接近拟物时代的那种复杂和写实主义，在扁平化的网页中并不能很好搭配。合成所选用的素材也许并不需要那么全面，有时候只是一个细节片段，也能演绎出彩的效果。因此我们要学会的与其说是一门技艺，不如说是一条心法。那就是深入到细节去选取合成的素材，再配合一些绘制的技巧打造一张简约风格的壁纸。用在APP的欢迎插画中也很适宜。灵感来源灵感图片来自www.pinterest.com的一张摄影作品，从灵感中，我们获得了这种水天一色交接的辽阔感，以及红色的伞这个物件作为焦点与清爽蓝色的一种视觉对比，从而更能突出焦点。组合式风景STEP 01在PS中新建一个尺寸为1920*1436的新文档。绘制两个渐变矩形色块作为背景，三分之二作为天空的部分，三分之一作为海面的部分。TIPS:这里要普及一下我的个人方法，在渐变配色时， ...继续阅读 (62)

从“信息高度公路”到 “AR/VR”一个山谷里如果下雨，一粒水滴究竟会滴向哪里，其实是不可预测的。但是它的大致方向是不可避免的。——凯文·凯利20多年前比尔盖茨写过这么一本书——《未来之路》。在当时的中国，“信息高速公路”这个带有新科技概念的名词火速传播开来，其实和现在的情况有点类似，现在每个人都在说AR、VR、AI人工智能，所有人都在谈，可并不了解它究竟代表什么意义。20多年过去了，我们现在回头看所谓的信息高速公路是什么，很好理解。——它运用了互联网这个新技术，以前所未有的广度、深度和便捷性，全世界的人和信息全都串联在了一起。互联网承载的主体是信息。如果我们回过头来看信息的载体：硬件所发生的一些变化，会看到一些趋势和特性，那么我在这里和大家一起来探讨一下。第一，所谓主动信息。人类获取信息的方式一直都在以主动形态替代被动形态，以更方便快捷而准确的方式获取个人所期望的信息。什么意思呢？——20多年以前，我们信息的载体：媒体，主要是报纸、杂志、广播、电视。互联网作为一个新的媒介出现的时候，它自然而然就把前面一种形态变成了被动形态，而互联网设备是一种主动形态。大家回想一下二三十年以前，我们接受信息的方式是什么？接受新闻的方式是什么？——7点钟的时候全家守坐在电视机前，电视里的罗京邢志斌正襟危坐，传达来自中央的指示，全国、全世界都发生了什么。互联网时代，当你安上电脑连上网之后，主动查询来自 ...继续阅读 (21)

小编：Hello小伙伴们，这次的公开课又是狼哥哥。狼哥哥最近跟着了魔似的，每天都在坚持画画，这前前后后啊现在也有快俩月了。 狼哥呢也把一些小经验分能享给大家。画小插画呢别急着打开软件，首先是手绘。对！是手绘！手绘是很重要的一个环节。为什么 这么说呢，因为手绘能帮助我们更好的理解画面内容，比如造型啦，构图啦，光影啦等等。手绘稿完成之后呢就可以在软件里绘制 啦！啥？想跟着狼哥学？狼哥可是我们萌虎帮的讲师哦~这次新一期特意加入了手绘和插画的内容。如果你仅仅想学手绘呢可以考虑 来我们花虎帮，专门画画的哦~ 转载请注明：学UI网»MBE风格小夜灯插画（学UI网第九十四期YY设计课 ） ...继续阅读 (15)

@TTTing 一直都觉得网易云音乐是个很神奇的存在，不止是因为它的评论区聚集了一大批才华横溢的文案高手，还因为那些风格多变的Banner设计让人感觉看了很过瘾。其实，我心水网易云音乐的Banner设计好久了，因为它们的音乐类的Banner设计给人一种特别灵动自由富有情绪的感觉，非常合我的心意，那接下来就随便翻几张给大家看看，保证你会发出跟我一样的感叹：“果然跟外面那些电商促销Banner之类的妖艳jian货不太一样呢！”来，一起看看吧！～（话说，我好爱下面这个薛之谦的Banner设计哇～～）有没有觉得很带感？我在以前有一篇文章里就有单独提到过网易云音乐的Banner设计，当时我就说，音乐和摄影其实相当于是一种艺术和情绪的表达，而这些音乐类的Banner设计所起的作用往往也是宣传歌曲或者要对某个音乐人做报道用的，所以其Banner设计自然而然也就更加注重的是一种对音乐或者歌手气质的表达了，而且你会发现他们的标题字体设计和排版不是一成不变的，而是带有性格和情绪在里面的，就像一个实实在在的大活人一样。我们再来看下大部分电商类的banner设计：它们给人一种什么感觉？热闹／燥动／跳跃／利益点突出，这是他们给人最为直观的感受。其实如果把这些电商Banner设计比做商人的话，音乐类的Banner设计则更像是艺人，虽然都最终是商业化的产物，但是前者面对的是普罗大众，自然人也就更注重“商”字，后 ...继续阅读 (25)

@网易UEDC 人在喝完可乐一小时内会有什么反应？高速发展的中国互联网在一分钟内会发生些什么事情？美国大选，川普和希拉里的支持率到底有多大差距？信息图带你一分钟搞懂这些事！随着经济技术的发展，信息化科技化速度越来越快，信息量的不断增加，使我们对于信息的整理与识别要求也越来越高。繁忙的工作生活下，如何使信息更为直观的提供给用户，信息图形设计在这种环境下应运而生。一. 什么是信息图形信息图形设计就是针对内容复杂、难以描述的信息进行充分的理解、提炼、整理、分类，并通过设计将其视觉化，通过图形简单清晰地向用户以更为直观的形式展示，这种图就叫做信息图形。信息图形由信息和图形两个词语组成，它被称之为“信息图形”（Infographics或Information Graphics）。信息图形最初是用在报纸、杂志、新闻等媒体刊登的一般图解。图解这个词在国内外使用了多年，它只是为了充分利用信息，而将这些信息进行功能性的整理。有时候，信息图形也会运用符合各种文化习惯的比喻等手法，以不同的形式来表达。这种信息图形能使用户有惊喜感，也更容易理解、印象深刻。信息图形设计不仅从功能上满足人们对于信息的直观了解，同时从感官上带给人们更多的视觉享受。二. 为什么要进行信息图形设计1. 简化复杂的概念面对复杂的事物，如何快速了解它到底是什么，有什么用？利用图形能使你快速理解信息，专注于信息结论，获得更轻松、更聚焦的 ...继续阅读 (35)

在今天这样一个互联网+时代，绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么的重要。这些潜在客户对你的公司及产品印象的好坏，很大程度上取决于你在网站设计上投入精力的多少。所以花时间构思一个好的网站设计，特别是主页部分的设计非常关键。用户点击完搜索结果后首先跳转到的页面就是该网站的主页，主页直接影响到访客对该公司及其产品的第一印象，所以必须把这个页面尽可能设计得友好且抓人眼球。在欣赏这20个优秀的主页设计之前，我们先来介绍一下现代主页设计应包含的基本要素。有效介绍你的公司的能力一个主页最重要的部分在于它能否有效地吸引访客的注意力。所以关键在于，你的主页能否在几秒钟内解答访客心中的三大疑问：1.这是个什么性质的公司？2.这个公司具体是做什么的？3.和竞争对手比，你的优势在哪？如果你的主页能够准确清晰地回答这三个问题，那么访问者就能在了解你的公司的基础上有把握地购买你的产品及服务。许多企业有其独特的标语或简短的口号，用以凸显其价值主张（UVP）。他们通过简练的语言传达出公司理念，与访客建立起一种联系。所以这些标语经常出现在主页上，并大量地用于公司的品牌营销策略。自适应、简约的设计访问者会通过PC、平板电脑或智能手机等设备登入你的网站。随着全球移动普及率的不断提高，最新的数据显示将近60％的网站流量是移动设备提供的。为了确保你的网站有更好的用户体验，在页面设计时考虑其自适应性很关 ...继续阅读 (21)

如今的很多App包括Google Now、Spotify或Amazon，都会通过收集用户个的人数据来帮助自己做出产品决策。这些公司有时甚至依赖这些数据来替用户做决策，而非询问用户的意愿或让用户自己去选择。举几个例子，Facebook会为你定制推送内容、Amazon用你的浏览和购买记录来给你推荐商品——换句话说，他们从没询问过你的想法，而是直接帮你去掉了那些他们认为你不会感兴趣的内容。这种用数据替用户做决策的设计方式，最近被定义为一种“预设计”(Anticipatory Design)——它以用户行为数据为基础，直接在用户界面执行某些操作 (而不会再次询问用户意愿)，而它的优势在于减少用户在界面的判断和操作，减轻使用时的疲劳感。虽然这样的“预设计”听起来应该是出自于良好的初衷，但这种自动替用户决策的设计方式其实引发了一些隐藏在背后的问题——信任危机，尤其会出现“黑心产品”通过一些界面的小伎俩骗用户去点击一些不必要的功能。因此，这篇文章并非意在叫你如何通过预设计来“诱骗”用户接受或操作，而是希望谈谈如何积极正确地使用预设计的方法，让你的产品界面是真诚坦率的，就算还是有一些“引导”用户的嫌疑，这些引导也是站在用户的角度出发的。首先，为什么要替用户做决策？现如今的用户在浏览网络时，面对的选择信息越来越多，比如在Amazon或eBay等电商网站上挑选商品。就算我们明确知道自己想买什么，那些商 ...继续阅读 (16)

1.关于设计师喜欢养宠物说，设计师养宠物能带来灵感，原因就是身心放松了，灵感就来了。2.上班本来就累翻了，还要为无休止的宠物疫苗、治病、美容、洗澡，花钱花时间，心碎。那么设计师的你，家里有养软萌的小可爱嘛？你家小可爱是啥品种呀~转载请注明：学UI网»设计师的小宠物：要不要养我？【话题讨论】 ...继续阅读 (21)

小编：单页网站更多的应用于个人网站、小型工作室、企业等，直观的向展示你的信息，简洁大方。希望今天这组能你带来不错的灵感。一起去欣赏吧。Heathervv Take the Highbrown Future of Design Zest Small Chat Holbein Sequoia Creative Lab Cleaforkert Kollegorna Blunt Marjoe Bacus Kelseylegault Bronze Ultra.studio Nicole Saidy Studio Vedet Reuters TV: 2016 Year in Review Dino Balliana Nike – 15 Years of SB Dunk Netil Radio Bettr CF7 Lemonly 2016 Report Sitecraft See Me in the Wonder Lance Stroll Unconquered GT Walsheim Font Family Grooow Notcreativenot Ricciardo for PM! This Side of Rice Soireequinze Weather to ride Mirror Conf Set to Sweat 原文地址：设计之家 转载请注明：学UI网»35个灵巧的 ...继续阅读 (31)

小编：Hero Header如今是一个潮流，如何才能制作具有魅力的Hero Header来吸引用户的注意呢？今天就来教大家10个黄金法则，非常感谢作者@喪心病狂十六夜貓的翻译与分享。接下来我们一起来一探究竟吧！​当用户登录你的主页时，在页面打开后的瞬间，你可以通过设计将更多的页面让他们看到。然而大多数网站都错失了这个给用户留下好印象的机会。如何让Hero Header从众多其他要素中脱颖而出呢？让我们来详细检查一下吧。 什么是Hero Header的必要元素？Hero Header纳入设计要素的方法有很多，如新商品的介绍，必要的品牌说明等。大多数Hero Header都利用了以下要素。抢眼的标题，头条Call-To-Action　按钮令人印象深刻的背景图或视频嵌入式类型的描述视频或动画介绍特色内容的滚动效果品牌元素 – logo和宣传语品牌和导航那么在各种各样的要素之中怎样灵活运用才能创建一个良好的Hero Header呢？让我们来一探究竟吧。 抢眼的标题，头条访问者第一个见到的就是他，让我们来看一看标题吧。能让人精确了解的信息是必要的。例如以下案例：「Send Better Email（发送一个更好的EMAIL。）」或「Sell More Stuff（想卖更多的东西。）」在创建一个易于理解的导航标题之前，你必须明白你是否明确的传达出了想提供的是什么服务。​适当的样式文 ...继续阅读 (23)

小编：今天给大家带来的是一个关于利用AI混合工具做一些字体效果的小教程，比较适合新手小白。老司机请多多指教。教程比较简单，希望大家能够结合分享，发散自己的想法，做出更多精美的字体效果，赶快行动起来吧。转载请注明：学UI网»AI混合教程【教程】 ...继续阅读 (15)

小编：包装的意义在于可以给作品加分，展示的更加完整。做好作品后，包装可是展示设计师功底和专业性的好机会，让你的作品集在别人眼前增分不少，甚至留下深刻美好的印象，获得一些更好的机会都是有可能的哟~发现问题前几天看见我的第一个铁粉——佳佳在站酷网站上传了她的首发作品，虽然对于首发作品来说还算不错，但我是还是为她着急，为啥呢？因为缺乏包装的技巧！所以单独写一篇自己的感受和建议。我们来看看她上传的作品：就这一张图，没了。为了作对比，我们再来看看另外一个作品：威威作品这个作品得了站酷的编辑推荐——2把火。上面两个作品风格不同，没什么可比性，但在包装上就有的比了，就单看最后的展示页面，佳佳有四个主形象，却只展示了一个页面，而威威只有一个主形象，最后却展示多张页面，看起来很完整。像站酷和UI中国这样的平台很看重作品的展示包装，最好展示一套作品，而不是单一的画面。有些人会说：我要把心思放在作品本身上，不想在包装上面浪费时间。其实你错了，最后的包装是非常考验功底的，不是随随便便就能做好的，如果既能把作品做好，又能把包装做好，何乐而不为呢？解决问题既然发现了问题，咱得给点解决方案吧。我们就拿佳佳的作品来举例，看看在不改主形象的前提下，是否可以在包装展示上优化一番。我的优化建议有以下几点(并不全面，仅供参考）：1.做个像样的头图2.内容太少没关系，想办法加3.加点展示模板吧1.做个像样的头图如果你想让别 ...继续阅读 (28)

小编：这篇文章对于广大设计新人和设计爱好者人群来说，是一篇非常不错的指引；有鸡汤、有实实在在社会观点、同时也有前辈的经验。文章有点长长，但你读完一定会有收获的。我与Joel Beukelman在格鲁吉亚的哥伦布市举办的Creative South 2017发表合作演讲，向设计师分享从技艺到工作与生活的平衡，再到设计业务，等多项主题的建议。Joel与我在Design Inc. 共事——这是一家致力于帮助公司寻找和与创意人才合作的公司。1. 草图请使用大号的马克笔——专注于大的想法和概念。不要陷入细节。2. 在你的简历中展示图片以外的东西——通过处理你的图片等方式，来解释你的作品背后的创意和想法。3. 不要担心你的title——让你的实际工作来证明能力，升职加薪是自然而然的。4. 有时候免费设计也是okay的（我们也会这样做） ——当你有决策自主权时，免费设计也会是美好的体验。5. 好奇心>工具—— Photoshop与Sketch，Keynote与PowerPoint，Cintuq与Ipad Pro，工具一直在改变，但这不重要，重要的是永远要去尝试新的软件和技术，将工作做到最好。6. 如果你的设计不像你想象的那样，那可能是错误的——迭代和编辑你的工作是你改进、推动你的设计的不二法门，请习惯再多尝试一个草图或想法。7. 没有人能设计任何东西——任何设计的实现都需要一大群人来完成。习惯把 ...继续阅读 (15)

作为一个设计师你的工作台上面东西是堆积如山？还是干净清爽呢？今天我们就来绘制那么一个工作台~~注意：注意整体的风格；注意颜色的搭配；注意阴影的表现；要求：提交的作业在背景的右下角或评论框署名，格式为：(N群-XX）作者：Ryan Duffey各位童鞋请选择适合自己现阶段的练习：新手作业进阶练习中高级作业转载请注明：学UI网»给自己画个工作台吧！【做作业】 ...继续阅读 (26)

设计源2017五一八迎来SNG五周年，以“从心出发”为设计源，企划了金喜一触即“发”，SNG王子一号美食馆，全民Talk秀等活动，带领大家一起从心出发，从新感悟。品牌标志关键词品牌标志设计过程1.第一轮尝试2.第二轮尝试3.最终方案设计围绕“爱心启航”的概念，采用“爱心”+“和平鸽”的视觉元素与字体组合，使“从心出发”的主题赋予更深刻的意义。主视觉品牌色品牌专用字图形语言品牌应用 原文地址：ISUX作者：freya转载请注明：学UI网»SNG五周年:从心出发”品牌企划 ...继续阅读 (23)