推荐阅读
从京东分会场学到的模块化设计方法总结
在电商的世界，似乎一切时间都可以和购物挂钩，5.20、6.18、11.11、12.12、年货…，有购物节就要有各种各样的会场进行促销展示;面对越来越细分化的类目会场，作为设计师需要把多达几十个会场一一设计出吗?NO!如何提高设计及后续工作的效率，似乎在工业产品的标准化零件中找到了答案——标准化模块设计如果将会场比作工业产品，模块即是零件，动线即是图纸;使用不同的模块与动线，即可组成满足不同需求的会场。如何进行会场模块与动线设计?接下来将从模块设计原则、其它设计要求、会场动线设计三个部分进行讲解。零基础的同学移步：《设计小科普!给设计师的模块化设计新手完全入门指南》一. 模块设计原则从往年多次负责大促分会场的设计实践中，总结出一些模块化设计原则：可变性、可拓展性、丰富性、创新性。其中可变性与可拓展性属于结构化原则，创新性和丰富性属于内容性原则;接下来将逐一介绍遵循这些原则的原因以及如何遵循。
PS调出漂亮紫黄色自驾游照片处理教程
紫黄色自驾游照片是非常流行一种照片效果，这种效果有明显的反差，人物部分可能会偏暗一些，不过人物轮廓部分有一些透射光，看上去非常艺术。这也是很多摄影爱好者选择这种效果的原因，如果再配上合适的颜色，画面会更加梦幻。最终效果 原图一、打开原图素材，按Ctrl + J 把背景图层复制一层，混合模式改为“正片叠底”，不透明度改为：20%，效果如下图。这一步降低图片的亮度。二、创建可选颜色调整图层，对黄、绿、黑进行调整，参数设置如图2 - 4，效果如图5。这一步把背景绿色转为橙黄色，并增加暗部蓝紫色。
玩转Fireworks 8 笔触
总体效果图如下： （末尾有PNG源文件） 一贯偶的风格，继续长话短说，有疑问请跟帖。（本教程只针对FW8熟练用户） 原本偶只是想做出破损的感觉，虽然最终出来的效果和偶预想的不同，这个效果也非常令人惊叹。希望大家也不断的练习、摸索、试验，找出创作的感觉来。 1、 新建文档，透明背景。找一个有破损感觉的字体，偶用的是1942 report，52，黑色。 2、笔触效果：笔触颜色#A28200，强力消除锯齿。勾选“在笔触上方填充”，笔触相对路径为路径外。选择点击“笔触选项…”按钮后，选择“喷枪”——“基本”，笔尖边缘柔化最大，尖端大小为100。纹理选择脉纹，50%的纹理量。 再点击“高级…”按钮，“选项”标签中，墨量、间距、流动速率100%。勾选“建立”，纹理50%，边缘纹理86%，边缘效果选择白色霓虹。笔尖10，笔尖间距100%，变量为阴影。虚线为单虚线、开5、关1。“形状”标签中，不必勾选“正方形”，大小、边缘、方向都为100，角度360。“敏感度”标签中，大小：速度100；角度：水平100，垂直100；油墨总量：压力100，速度100，其他均为0。加上发光滤镜，颜色#352C04，光晕偏移35（为的是把图的空白处填满并增加层次感，请根据背景大小而自定），不透明度100%，柔化为0，偏移为0。 该层效果如下图所示；
实景婚纱摄影拍摄案例解析
策划：向诚(北京名人) 图文：田德友 造型：温狄 设计：邹运、张爱春 模特：桂巧惠、白亚舟 场地提供：锡盟爱罗维LV婚纱摄影 实景婚纱的拍摄，注重的是拍摄风格的多变，这四组场景的色调、画面元素与环境变化很大，属于时尚、怀旧混搭。拍摄时首先要根据画面的调子确定拍摄的影调，合理的运用灯光，选取不同的拍摄角度，搭配不同的色彩组合，设计与环境协调的美姿，拍出有新意的照片。本文通过灯光、机位和色调等不同角度，对在四个不同场景拍摄的婚纱作品进行介绍和分析，供广大读者在日后的实景婚纱拍摄中参考。 ● 灯光控制 场景1的特点就是清淡、高雅、明快。拍摄重点就是影调的控制，首先是服装的色彩要浅淡，人物的姿态设计具有剧情感，通过钢琴作为一个陪体，姿态设计自然。通过主灯提亮画面，增加皮肤的通透感，其他的灯对天花板反射到背景墙壁控制背景的亮度，制造均匀柔和的反射光效果，再用一支地灯控制画面的暗部层次和点亮人物的眼神，达到高调效果。拍摄时采取低机位拍摄使画面具有张力。 场景2最大的特点就是元素比较多，吊顶灯可以用现场光拍摄。场景的陪体多，拍摄时需要注意控制画面，保持简洁。利用混合光拍摄，还可以用来模拟太阳光的侧逆效果，勾勒人物的轮廓，使人物立体感增强。 ● 机位与构图 场景3的特点在于色彩太跳跃，要通过机位的变化使环境和人物具有视觉美感，如高机位的俯拍等。实景的环境局限性比较大，构图景别的变化，应该力求用减法原则使画面干净。采取定焦拍摄，控制画面的景深。低机位的拍摄，力求简约，突出人物的内在气质。 ● 色调控制 场景4的特点是无彩色和有彩色的搭配方式，通过改变色温来改变色调。采用现场环境逆光的拍摄，通过色温的调整使画面偏向于冷色调，对称式的构图，使画面充满阳光的味道。
最新发布
设计师如何快速的搞定产品详情页设计
因为最近接触的都是美妆类目，所以我就以美妆为例。其他各行各业可能会有些不同，这里主要是分享一些方式方法，具体执行的时候肯定需要结合所属行业和促销情况来决定整个框架。首先我们分析一下产品详情页的基本结构逻辑：组成部分：1.版头2.产品信息3.提出问题(也就是告诉买家为什么需要你家的产品)4.解决问题(用产品成分和功效、或者使用对比图等证明你的东西可以解决买家的问题，有个性的的话还可以加一些材 质、设计什么的)5.打消顾虑(牛逼的销量、达人推荐、资质证明、品牌实力、贴心服务，什么无效退款，赠运费险啦等)这些东西有时候会直接置顶，或放在版头+产品信息的下面。根据实际情况和运营需求确定。6.使用说明7.产品细节/拍摄原图下面我们再对每一个板块进行分析：
通过私活实例总结了两个实用的设计经验
这些天帮朋友做了个小活儿，收获几点感悟(接到私活该如何按什么步骤进行设计，收藏的优秀素材该怎么用才能提升自己等)，与各位分享。1，求单位时间内的最优效果最初接到的需求非常明确：视觉包装最着急，Logo其次。理智的做法应该是先做简单的视觉包装，做完一步是一步;然后有宽裕时间了再去想Logo。然而我，却总是情不自禁地先去想Logo，然后一晚上一晚上的想方案否决想方案否决……等到快要发视觉包装的时候，才发现时间快不够了，才赶紧去做包装。结果Logo也没勾出啥名堂，包装又做得很仓促。别以为这是知难而上，其实这是极不专业。如何在有限的时间里，合理安排时间、分配精力，在deadline前拿出效果最好的方案，是和“设计”同样重要的能力。打个比方：有8分设计能力，2分时间管理能力，结果可能是5;但若有6分设计能力，8分时间管理能力，结果可能是7。
5种通过讲故事的方法设计BANNER背景
一直有人问Banner 背景怎么做，其实设计Banner 和讲故事一样，都是用来烘托主体的，所以也有套路可循。今天TTTing1这篇好文就总结了5种常用的Banner 背景设计，简单易懂，案例丰富，建议阅读。写在前面我们先回顾下banner由哪些部分组成：主要由文案、商品图或模特、背景、点缀物组成，如下图所示：(这张图的出现频率很高，大家估计都已经烂熟于心了吧，哈哈～)我们可以看到，一个Banner的主体始终是文案或商品模特，文案为主的情况居多，而背景始终是个配角，它是用来烘托主题，渲染气氛，突出主体的。二、如何用讲故事的思维理解Banner设计及背景的制作呢？那么，在讲banner的背景制作之前呢，我们先看一段小故事场景描述(描述1):阿呆是一名电商设计师，今天他发工资了，因为约好了请几个哥们儿晚上一起吃饭，所以忙完手上的事情，他匆忙地收拾了东西就钻进了电梯，目光一下子就被一位打扮靓丽手提2016秋冬最新款prada包包的年轻女士吸引住了，他定睛一看，没想到就是他的前女友!～“几年不见，她的变化已经这么大了??简直就是标准的白富美啊!”他心想着，看着电梯按键面板上已经亮着的按键“-2”，他默默的按下了按键“1”。
设计师如何快速的寻找LOGO设计的灵感
之前我做了一个直播节目《三分钟奇葩烧脑》，内容就是观众在直播中随意说名词，我任意选择两组不相关的名词，将其视觉化，根据视觉化的图案，在三分钟内，快速的对元素重构，筛选，组合出一个完全新的图案来。下面我主要讲述一下我是怎样通过两步，三分钟做无限创意的。“主持人好，观众朋友们好，我是每日一设哥，这次的两组奇葩名词是“写作”+“咖啡”，可以看见画面中我把咖啡杯口和写作文稿，做了一个结合，进而形成了新的图案，可用做写作咖啡屋的Logo，谢谢宝宝送的火箭，有现场的观众说出了“闪电”的名词，我又把杯子的下半部分和咖啡杯口又结合了一个闪电的标志，比如有一新款速溶咖啡叫极速咖啡，就可以用上面的这个Logo，主持人，大概情况就是这样，请画面交回给主持人，”这是我当时直播的时候做的一些创意图标，我选取一部分创意内容做成了图标，看似不相关的名词，在特定的环境就会出现新的含义。第一步，两组奇葩名词为什么是“两组奇葩名词”?我们在做LOGO设计的 时候往往都是两组或两组以上的元素相互堆叠后，进而设计出新的图形。在设计LOGO之初，我们往往会根据甲方或客户的信息，针对品牌进行市场调研，分析公司资料，服务体验，竞争对手，品牌市场认知等，对企业的用户人群定位和品牌概念：提炼几组精准关键词(品牌灵魂所在)，然后根据几组关键词进行头脑风暴。头脑风暴过程：收集想法——产生联想——进入创造——联想图案在头脑风暴的时候，针对关键词任意联想相关的词语，可以多级层次的联想，不在乎质量，达到足够多的数量，也不要带批判性的去评价联想词语。
如何做好移动APP让用户体验脱颖而出
启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态，都是容易被忽视，而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。启动页当用户打开 app 时，最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时，又不可能优化该怎么办?你不得不让用户等。如果他们愿意等，你得知道如何 吸引他们。启动页解决了等待的问题，让你有一个简洁有力的窗口来吸引用户。这里有一些小贴士，在设计启动页的时候记得注意：Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈，表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦，给他们一些 娱乐：有意思的，意想不到的，或者任何可以抓住用户注意力的东西，时间长到够 app 启动就好。如果 app 的初始设置超过 10 秒钟，考虑使用 进度条 来表示正在加载。记住，不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以，你要给用户一个清晰的标识，他们需要等多长时间。(通过使用进度条让加载过程更自然)
设计师来看这两个超实用的配图加工秘方
做设计最怕的就是图片质量低/不清晰/不够新颖，今天飞屋睿UIdesign分享几个配图的加工秘方，帮你解开图片难题的困扰。网页设计中的所需要的配图素材有一个非常重要的来源——摄影。摄影配图是我们最常见，也最为简单的配图方式。网页设计师大概都会有这样的体会，如果摄影作品足够优雅，设计师的工作相对就更轻松无碍。当然，优秀的摄影作品是可遇而不可求的，很多时候，我们能拿到手的资料也许就是一张平凡无奇的摄影图，这对于设计师而言无疑也是一种挑战。几个摄影为王的例子下面这两个网站的首页设计都用一张全屏的摄影大图展示，优秀的摄影作品让网站本身的形象立起来了。如果是以时尚服饰、餐厅等内容的网站，本身就需要展示其产品本身的魅力，因此摄影图本身就极为重要。因为服饰的美感、美食的诱惑……本身就足以打动观众了。但是，怎样摄影摆拍依然需要精心设计。下面这一组展示鞋子的摄影本身就充满了设计感，这样就比单纯去展示鞋子效果要好。如果有这样的摄影作品资源，网页设计的视觉效果必定不会太差。就算是服饰展示，也可以运用模特美感，选用恰当的布景设计。以体现产品本身的个性特点。这需要摄影作品里的一种独道的叙事能力。下图这一张摄影作品里流露出复古的华丽风尚。
3个方面帮你改善移动端APP的输入体验
在用户输入时如何利用有限的屏幕空间，这篇文章列出了三个改善数据输入体验的关键因素，分别是 改进输入速度，为用户提供帮助和支援 和 在用户输入时直接指出问题所在，全是干货，一起来看看。一、输入根据需要输入的文本类型匹配键盘布局用户喜欢那些在输入文本时能够提供合适键盘布局的应用。不像物理键盘，触摸键盘可以随时调整，根据每个表单域的不同数据类型，为用户提供不同的键盘布局。通常可以进行优化的输入类型包括：数字: 电话号、信用卡号、PIN 码文本: 固有名称、用户名混合格式: 邮箱地址、街道地址、搜索查询确保这些项可以在你的 app 中 持续地 进行优化，而不是只在某些特定任务中优化。合理配置自动大写功能
5个动效设计技巧提升界面设计的用户体验
动效能讲述故事。和图片不同，动效能够呈现变化的过程，讲述一段简短而有趣的故事，能够同你进行对话：“嘿，你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过，动效的目标并不是单纯的娱乐用户，而是帮助用户了解交互的效果和界面中发生的变化，让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点：“我们设计的不再仅仅只是静态的界面，实际上，我们所设计的是用户从界面获得内容的过程。”动效广泛运用于网页内容和背景当中，用来强化功能，提升美感：它会直接影响用户的行为，引导用户注意到特定的内容，呈现状态，帮助用户找到他们想要的内容，达成目标。想要借助动效提升用户体验，可以参考下面的指引来进行优化：加载过程不要让用户感到单调无聊如果你无法缩短加载和等待的过程，那么你应当尽量让用户在等待过程中感到愉悦，这个时候的动效基本只是在提醒用户后台正在加载。而几乎所有的网站和APP都会碰到这样的情况，而好的设计通常都是通过微妙而有趣的动效，让用户的注意力转移到动效本身上，而不是被无聊的情绪所左右。下面的的案例中，设计师让界面从基本的框架结构开始加载，明显地缩短了等待的主观体验。不要让状态改变过于生硬动效最重要的功能之一是强化过渡效果，所以，它需要让过程的起始和结束都要被明显的呈现出来。一个设计良好的过度动效应当合理地将用户的注意力引导到需要被关注的地方。Adrian Zumbrunnen 有个非常不错的案例，它展现了用户点击了链接之后，滚动动效是如何让用户明白变化过程的。对比下面硬生生的转变和加了动态效果之后的版本：
8个设计师必须懂得的LOGO设计忌讳
logo设计中有一些基本的规则，今天跟大家浅谈一下logo设计最忌讳的8个点。一：禁特殊符号有一些符号和图案在logo设计中要避免使用1、国旗如果在logo中需要体现国家元素，尽量只体现国家的气质特点代表元素。而产品logo最好不好涉及国家。2、宗教其实设计师只要把他们看作不常见的通用图形就行了。
移动端UI中常见的视觉分隔设计技巧
乍一看许多APP的布局并不复杂，感觉换成自己也能设计出来，但是当你真的开始着手设计这么一个APP的原型的时候，会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难，可是当自己动手的时候，在特定的元素的选取和设计上很容易陷入困局，这个时候才明白它的难点并不在于工作量的多少，设计者常常深陷于细节构建的囹圄，这才是它的困难之处。即使是元素与元素之间的分隔方式，都能随随便便用一整篇文章来进行探讨。传统的分隔方式在UI界面中，最传统也是最常见的分隔方式用的是线，将视觉上或者内容上需要区分的内容用横向或者纵向的细线区分开来，它帮助用户了解页面的层次结构，赋予页面内容以组织性。1、全出血位分隔线全出血位原本是一个平面印刷中的概念，这里所说的全出血位分隔线通常用来凸显和强调不同的内容与区块，就像电子邮件中不同邮件之间就会用一条横贯整个屏幕的细线来进行分隔。在下面的Android 的Gmail邮箱的UI当中，用的分隔线都算是全出血位分割线。这些分隔线给人以“停止”的感觉，让用户清晰地知道界限在哪里。全出血位分割线将每一个部分都分隔开来。2、内嵌分隔线