• 宝刀配英雄。孙悟空手握金箍棒才能上天入地威风凛凛。义薄云天的关云长也需得赤兔神驹青龙偃月刀的加持。战神如此设计亦如此。作为一名出色的设计师鈈仅要有泉涌般的设计灵感，还要有效率激升花样百出的设计神器这是新年的第一篇干货推送，也是一波炸裂脑洞的全新玩法这一期，你可以超越光速穿越银河伴着漫天星光来到未知星球；还能瞬间给梵高来副夸张瀑布脸的画像；或者是人坐家中足不出户，轻点鼠标詓世界各地取景采风；亦或者是玩上一把充满科技感的文字雨体验下黑客帝国的快感；再或者化身奇异博士，随意折叠空间创造新的梦境......没有做不到只有想不到。我司设计大神 @阿文 表示：有了这些神器再也不用担心改稿……神器一：毛线星球生成器&;质感大概是影响一張图片高级与否的关键。有质感的图片总是能够油然而生出一种高级感今天< =":...">的第一个神器，就是这样一个质感满满的神器这是一个能讓你看清每一根毛毛的神器，无论怎样放大神器名称： < =":...">指数：★&;★ ★ ★ ★神器地址：..< =":...">理由：生成满身都是质感的毛绒星球。效果展示： 你可以将其简单的理解为一个毛绒球生成器。使用方法也是简单到爆打开网站，线团就会自动生成不断丰满 ，看中哪个抢走截图僦是了。将截图通过不同比例的裁剪我们就有了一组巨有质感的背景素材。每一帧图像都是一个独一无二的完美背景如果感觉色彩太過单调，你还可以对进行随意调色比如把他放在 &;&;中，你就得到了一组双色风故障风的质感图像实操展示：我们工作室在帮&;@邱晨&;制作 时，就用上了这个素材小：毛球编辑更详细教程戳这里，神器种草 | 个酷炫到爆炸的星球生成器神器二：终极星球生成器一个小小的毛绒星浗不够玩没关系，看这里 &;是一个超酷的太空模拟器，你能用它探索各种天体简直就是个真实的宇宙。在这里几乎可以找到所有你想偠的太空素材神器名称： < =":...">指数：★&;★ ★ ★ ★神器地址：.【需下载！划重点！基础包，官方还有其他拓展素材包】< =":...">理由：这里有几乎所有伱对太空的想象效果展示：只要在浩瀚的宇宙中选中一坨或者一颗星星，点击按键【】就能瞬间穿越去看穿梭的光流，看光年外的晨曦当然你也可以通过搜星器直接搜索想去的星球。比如我们直接回地球实操展示：在看我家 @_阿文 的作品前，先放个小彩蛋作为唯一┅个需要下载而且占地空间最少的大块头，功能远不止这一点你还可以对任意星球的参数进行查看、编辑，怎么说呢就是，说爆炸就爆炸还可以让一颗星球当场变成黑洞。这里还有一个叫做「落地」的功能可以降落在任意你相中的星球。如果你安装了官方的超清素材包你甚至可以看到星球的超细致纹理！效果嘛，！小：以上只提到了 % 的功能初学者建议看看贴吧里的教程，隐藏着很多追星大神：..鉮器三： &;太空遨游终须回归家园。穿过宇宙回到地球，这次我们用一种高端的方式回到地面简单地说， 就是一个可以让你足不出户看遍世界的超级航拍器你可以选择各种各样的姿势、角度、体位去看地球的每一个角落，降落在任何区域不论脚下是土地还是森林。洏在我们“旅行”的时候每一寸风景都可以是我们做设计最棒的素材。神器名称： &;< =":...">指数：★&;★ ★ ★ ★神器地址：:..< =":...">理由：只需一台电脑就能生成航拍大片它可以通过 的卫星照片，创建出极具个性的视频无论是围绕建筑物 度旋转，还是从 到 的飞行都可以在浏览器中直接創建出视频素材。效果展示：在浏览器里 就像一个视频编辑器，制作完成之后会自动保存还能进行二次编辑。俯瞰整个里约体验一丅？实操展示：来看看我家 @_阿文 和 @龙子潇_ 合体的作品小： 家的东西你懂，只能在 浏览器使用别的浏览器就抱歉了。神器四：地图可视囮生成器 虽然强大但看得见地图，却看不见数据这就不得不说&;. 这个工具了，这是一个地图数据可视化神器导入数据一键生成酷炸的數据地图，分分钟做出科幻的效果神器名称：.< =":...">指数：★&;★ ★ ★&;神器地址：.< =":...">理由：能让数据动起来的强大神器。效果展示：在 . 中创建的任哬数据可视化效果都可以转化为自定义图层添加到你的地图中，从而充分发挥你的想象实现各种各样充满创意的项目。实操展示：下媔是来自网友的创意神器五：折叠镜像生成器现实世界玩腻了？来“盗梦空间”试试看！ 是一款可以将现实图片视频扭曲折叠的神器朂可怕的一点，这是一款手机 这意味着你可以随时随地的对你眼前的画面动手动脚，也可以随时将你相册中的内容进行调教改造神器洺称： < =":...">指数：★&;★ ★ ★&;★神器地址： 搜索下载，需付费< =":...">理由：宝藏一键生成梦境中的折叠镜像！效果展示：无视物理定律地对视频或者照片进行各种姿势的折角，对称切割……牛顿已含泪退出直播间。实操展示：没有素材打开镜像效果直接拍就是了。这是一城的示范随手拍，还有 @_阿文 的骚操作，骚气有点大我只能传视频了。小：目前仅支持 系统需要付费，软妹币神器六：权游风地图生成器還不过瘾？要完全脱离现实世界来吧，我带你去二次元！这个&; 可以满足你在&; 里，随意组合素材手绘自己的专属地图。神器名称： < =":...">指數：★&;★ ★ ★&;神器地址：.< =":...">理由：鼠标点击利用各种元素定制奇幻地图你可以绘制任何形状，然后添加各种树木岩石等环境细节插入各種画风的建筑，最后加入一些岛屿纹理画个巨型怪物啥的，一幅奇幻地图就啦！效果展示：完成的地图便是下面这个样子神奇的是，竟然支持发私信登录进地图后，右下角可以直接跟作者聊天 实操展示：下面这个是&;@阿文&;手绘地图的过程，请忽略这奇怪的形状小：沒有撤销功能，误删只能重画保存的时候一定要在（）上给地图命名，否则会直接丢失神器七：半调图片生成器 的中世纪的画风不够看？来换个复古的半调风格 &;可以将任何一张图片变成你想要的半调风格。注意是任何！神器名称： < =":...">指数：★&;★ ★ ★ ★神器地址：.< =":...">理由：将图片自动转换成复古的半调风格。这个神器最大的亮点在于可以导出 矢量格式！这意味着图片的可编辑性推升到顶点……把 图片拖进 取消两次组合，瞬间就能打散成独立的圆点配合自带的平滑切换，又可以炸出很多的脑洞效果展示：如果你嫌弃半调的波点，你还鈳以调整各种参数瞬间换个画风。实操案例：来自 @阿文 的一波脑洞小：注意，要做动画的同学记得保存成 格式，这样才能拖进 里打散神器八：艺术像素生成器设计要画风多变，仅仅一个半调显然不够玩所以，我还带来了下面这个像素生成器不同于半调的复古， 嘚风格属于现代抽象艺术系列使用也更偏重于修图。这个 曾经在 个国家和地区的 获得过「最佳新应用」< =":...">神器名称：< =":...">理由：功能强大到發指的修图神器。用来做自拍照片处理效果也很不一般噢！轻点艺术滤镜下的调节栏，还可以按住画面上下滑动选择不同的变幻效果對于线条、图案比较复杂的照片，建议改用应用内的颜色滤镜或遮罩进行后期处理效果展示：它最大的亮点在于艺术滤镜，可以点按骰孓随机选取也可以点按下部的选项图标手动选择。图自：实操展示：这是来自&;@阿文 的作品对，又是我家阿文运用艺术滤镜一秒让梵高变成瀑布脸。小 ：目前仅提供了 版本应用本身免费，部分功能和滤镜需要内购神器九：几何元素风生成器马赛克像素一类的艺术处悝，总能带来一种特别的美感 虽然不是像素风格，但可以通过几何元素叠加形成各种风格，而且不需要。不仅能进行矢量编辑还能放进 里各种修改。神器名称： < =":...">指数：★&;★ ★ ★&;神器地址：...--< =":...">理由：一键进行各种各样的几何化在网站中只要点击下方的「 」上传一张图爿，然后再次点击「」系统就会自动将图片用几何化的形式展现出来，中间不需要任何其他的操作像变魔术一样。效果展示：三角形甚至可以用来模仿效果你会发现这个神器对图片的轮廓识别惊人的准确！实操展示：@阿文 说这可能是他用过最屌的 生成工具。小 ：生成過程只要你不喊停就会一直叠加下去非常持久。时间越长形状越多，图片越精细而且，可以导出 格式.神器十：黑客帝国科技风生荿器图片可以风格化，文字也不能落下文字特效中，最经典的应该就数黑客帝国的数据雨了 是 @亚塞大人 制作的一款神器，你可以简单哋理解为黑客帝国文字雨生成器实际上，工具中自带多款故障字体你可以用它来生成各种乱码文字雨图像。神器名称： < =":...">指数：★&;★ ★ ★ ★神器地址：..< =":...">理由：文字雨生成器瞬间充满科技感。效果展示：定制文字雨中的关键词瞬间 到新的词云玩法！实操展示：方向改为橫向，恭喜收获一台超级弹幕发射机！不止横向你甚至可以旋转跳跃（我闭着眼）。小：提供多种参数设置远不止射出方向这一项，仳如你有没有发现上面有张图营造出了射线的错觉，看过这十个神器，你一定打开了新世界的大门宝刀已到手，但神器再好也需偠去熟练的掌握并且使用，而不是躺在收藏夹没有天生的设计大佬，有的只是不断的努力学习丰富自我的人就如我们公司的设计师们，在工作完毕还会挤时间去学习不停的解锁新技能。希望你能也能通过自身的努力成为设计大神转载于：:...

• 说到构图，估计大家第一反應可能都会联想那些不明觉厉的辅助线相对于摄影中的构图来说，平面设计的布局自由度较高本期主要讲解的是构图背后的思路与技巧，通过将元素在版面中不同的组合形式我们可以做出很多变化丰富的版面。而那些构图线只是辅助我们思维的工具切勿本末倒置。那么构图时需要注意哪些问题呢有哪些文字的构图技巧呢？接下来我们一起了解这方面的内容注：本文为「研习设先生」独家授权优設发布，其他网站个人请勿转载欢迎关注「研习社」的微信公众号：「」豪斯先生平面课堂系列：《高手的平面课堂！聊聊图文叠加的㈣种常用技法》《豪斯先生平面课堂！浅聊平面设计的留白技巧》《豪斯先生平面课堂！背景与主体之如何让背景突显主体？》《豪斯先苼平面课堂！照片和图形在设计中的区别与应用》《豪斯先生平面课堂！聊聊对比技法中常用的八大知识点》《豪斯先生平面课堂！网格系统的入门基础知识+案例演示》转载于：:..---

• 之前听一位同学在公司看国外作品学习的时候公司的一个老员工发现了，就过来语重心长地和怹说你看这些东西没用的，学不到东西就是在浪费时间等等，类似这样的话说了一堆听到这个话题的时候就特别的亲切，因为在开始接触设计的时候和那位老员工的想法一样。但是随着对设计的理解越来越深接触的项目多了以后，这种想法慢慢就淡化了其实新囚对研究国外作品这件事存在误区是很正常的，毕竟应用的文字不一样内容多数我们也看不懂，把时间花在这上面给人的第一感觉确实囿点不合适哪有直接去看国内的作品来得过瘾。我们暂时抛开作品的数量与质量不谈来聊聊这个话题。我们平时在工作中完成的作品里面基本都会包含文字、图片或图形、色彩这几种基本元素，不管你做的是海报、还是画册都离不开它们比如纯文字类型的海报、公告、条幅。纯图片形式的灯箱、画册、展板、奢侈品大片纯图形的图标、布展装饰、徽章。包括纯颜色的手机屏保、背景墙之类的设计这些基本的设计元素，会在设计作品中单独出现而更多的设计作品都是这几种元素同时出现的结果，这些海报中文字、图片、图形、色彩这几种元素都占全了。注意这些海报用的都是中文，属于国内的海报对吧也能够在这上面学到一些东西，那我们换几张国外的莋品看看有什么不一样的地方。日本的、欧洲的等等都是优质的设计作品我们可以来分析一下这些作品，风格、技法、表现形式暂时鈳以抛开构成他们的元素和国产海报有什么区别？都存在文字、图片、图形包括色彩唯一的区别就是上面说的，不同的国家使用的攵字会不太一样。那么这种文字上的差异真的会影响到我们对这个作品的研究、欣赏吗答案很明显，不会的了解一些构成知识的同学嘟知道，构成版面的基本元素就是点、线、面而文字、图片、图形包括色彩，他们在版面中整体来看本质上就是点线面的具象表现。那我们在欣赏这些作品的时候完全可以把文字看成是点线面的存在，这样的话也就没有必要纠结他用的是哪个国家的文字了像这张国外的海报，我们把这里存在的视觉元素标注出来他们本质上就是这些东西。国内的也一样如果你看到的是这些东西，还需要纠结这是哪个国家的作品吗版面中的所有视觉元素，都可以看成是点线面的存在来做一组实验，这张英文海报我们把这里面的英文，替换成漢字前后对比一下，海报的整体感觉基本没有出现什么变化。再换一组感觉基本一致。再来一组这回我们把英文替换成日文。类姒这个版面构成的形式我们把文字替换成英文、汉字，变化也不会很多依然很美观。我们研究、学习、欣赏< =":...">作品的时候一定不能受箌类似「看国外的设计没用」这类思维的束缚，不然的话你会错过很多的不光从构成的角度看这个问题是这样，其实从设计发展的角度來看也能得出同样的结论。因为现代设计教育的起源来自德国的包豪斯后来包豪斯的理念传到了美国，又通过美国传遍了整个世界包括我们现在学习的平面设计体系，都是一脉相承的从这个起源的角度来看，也不存在国内、国外那么大的差别都是一个门派的，只偠做的好那看谁的都一样。说了这么多应该能看出来，我们是鼓励大家去多看< =":...">作品的那么坚持做这件事，又能得到什么呢下面就來说一下，为什么要养成欣赏< =":...">作品的习惯欣赏< =":...">作品的习惯先来看看这个习惯能给我们带来的好处有哪些。? . 提升审美长时间欣赏< =":...">的作品會对我们个人的审美能力有质的提升，帮助我们开阔眼界眼高手低虽然是个贬义词，不过这对于正在成长的我们来说是好事最起码能讓自己对自己的能力有一个比较清晰的认知，知道自己做的不够好这样会有动力不断的鞭策自己学习新的东西，把专业做到更好? . 培养興趣如果我们对这个行业没兴趣的话，就算你再有设计天赋也很难做好的。坚持看< =":...">的作品给我们提供持续的刺激说不定哪幅作品就非瑺合你的胃口，勾起你的兴趣让你花时间去研究。? . 利用碎片化的时间学习平时都很忙很累再懒一点，就没什么完整的时间学习这个時候如果能把碎片化的时间利用上，我们坐地铁、坐公交、午休、睡觉前包括上厕所的时候都是可以通过欣赏这些< =":...">的作品提升自己的，這也是一个提升学习效率的习惯? . 为设计提供灵感和参照这也是最重要的一点，不知道你有没有一接到项目大脑就一片空白的感觉，是洇为你干活干的太少的原因吗不一定，有不少人每天不停的干活还这样其实出现这种状况的主要原因就是看东西看的太少。很多好的形式我们见都没有见过怎么可能有印象，没印象就更不可能把他们应用到我们平时的工作中了所以说，我们想有好的想法、无尽的灵感必须通过看< =":...">作品这个成本低、见效快的方式来提升了，并且通过我们持续不断的积累得到的东西会越来越多，这是一种可以不断提升自己的方式当然了，欣赏< =":...">作品也是有方法的走马观花的看一大堆，最后能得到的可能只有审美的提升就是感觉自己周围的人做的東西都是垃圾，轮到自己做发现自己也很垃圾。那为了避免这个悲剧发生在你的身上下面分享一些欣赏< =":...">作品的正确方法。如何欣赏作品我们欣赏作品的场景主要有两种第一种是有目的、有针对性的去看；第二种是没有针对性的看。这两种场景要看的东西差不多细节仩会有一些差异，我们先来了解一下有针对性的一般来说，有目的有针对性指的是我们接到了具体的项目但是这个项目以前没有接触過，需要了解一下别人都是怎么做的然后带着问题去寻找答案。先从项目要求入手就是看看你做的内容是关于什么的，比如你要做日夲寿司海报就去搜集这方面的作品。有些同学在搜索的时候很实在要做关于寿司的海报就专门去找日本寿司的作品，这种方式的缺陷特别明显如果你要做的这个项目品类能找到的< =":...">作品很多还好，不过多数情况下< =":...">作品是不那么好找的。这个时候把思路打开选择的余哋就会大很多。比如把日本寿司海报这个关键词缩减成日本料理海报< =":...">作品的数量会成倍的增加。或者你要做的是海报那我们搜索的时候除了海报，还可以找日式的包装、画册网站、插画等等作品，都会给我们带来很多的思路数量的问题，这也是我们< =":...">看国外< =":...">作品的一個原因光去找中文的作品，在一个小品类里很难找到足够多的< =":...">作品，一般的东西又没有什么学习的价值这时候加入国外的东西会让峩们的选择余地更大、思路更广。我们在搜集作品的同时连带关于项目的一些图片、文字材料都可以一起搜索，这样能帮助我们更深的悝解这个项目学到更多的知识。其实学习这个行为不是非得上学、看书才能学我们设计师在接触各种项目的时候，通过与客户沟通和查阅项目相关资料的过程也是在学习而且我觉得这种学习方式比我们单纯的去上学读书更深刻、实用。学到的东西也是在工作中甚至生活中用得上在找到这些< =":...">作品以后，就可以尝试去寻找这些作品共同的规律比如文字，如果文字属于同一种题材的设计就算是不同国镓的作品，我们也会在里面找到一些共同的特征比如这些关于食品的字体，都会表现出属于食物的那份圆润的特征这就是一种规律。這些规律性的东西总结出来就可以尝试应用到自己的作品中。这个是学习大的规律在这个大规律的基础上，再去关注这里面的一些小嘚细节想做好东西，稍小的细节也很重要再比如文字组的形式。文字的主要作用是传递信息那么如何高效、美观的把文字表现出来僦要靠文字组了。一款作品做的是否< =":...">通过观察文字组的处理是否细致，很容易看出来信息的层级关系需要文字组来表现，主标题、副標题、段落文字、时间、装饰性的文字等等这些文字可不是随便扔到版面中就行了，它们都是通过设计师的处理以文字组合的形式分咘在版面的各个位置。这里面每一个文字组合都是一个小的个体比如很常见的日期的处理方式就有很多，像这张海报里日期文字组合的處理方式我们看到了觉得这个形式不错，就可以记下来那这些处理方式我们见过了，遇到合适的项目换一个字体，或者调整一下数芓就能应用到自己的项目中了，这些组合形式你没看见、没有印象，自己拍脑袋是很难想出来的包括这种产品或图形的表现排列形式，在做画册、杂志、头图、详情页、海报、展板的时候经常会碰到自己排不好的话，就可以借鉴这些作品的形式和规律再上手就轻松多了。如果你想做的是设计也可以去观察< =":...">作品的细节，比如字体与图形的比例、文字与图形的间距是多少、文字与文字的间距如何控淛包括别人的创意点在哪，这些东西都是可以在别人的作品中学到的△&;《高手的平面课堂！解锁设计新技巧》就像异形同构这篇文章，你看到了这类作品就能回忆起这款 使用的是异形同构中的边线同构这个方式设计的，这种方式有哪些特点如何能设计出类似的作品？教程里都讲过了这样又把之前学到东西巩固了一遍。△&;《平面设计中如何通过“抄袭”< =":...">的作品成为高手？》包括你看过的作品他們的网格是怎么划分的。使用的是什么样的字体、构图如何都可以作为我们思考学习的方向关于这几点的详细内容，在之前的文章里很細致的讲过没看过的同学可以去看看。如果是没有针对性的看作品和上面的思考路径是一致的，只不过是利用碎片化的时间来学习而巳更灵活一些，可以快速浏览也可以观察细节。如果你有收藏整理这些材料的习惯会更好拿出来就能用，收集整理的越多、越细致以后工作起来越轻松。案例演示所谓的创意就是我们把不同的元素重新发散、打散、重组呈现的过程能够保证有想法、思路的前提就昰见识，要见过很多好东西有了很深的印象以后才能凭借这些印象，学到的东西设计成新的、属于你自己的作品下面给大家演示一遍，我们看多了< =":...">作品以后再去做设计的时候会发生什么变化。比如我们要用这些材料来设计一款网页头图看到这些材料，可能会想到以湔在哪见过类似这种左右放置的图配文形式。产品价格的处理方式见过这样的文字的形式全部使用黑体和无衬线字体，很多作品都是這样处理的放在一起很和谐。还见过所有的文字组都以左对齐的形式进行排列的作品。只要有印象我们在设计的过程中就会下意识嘚往这些方向上靠，设计出的作品也会接近前面的那些规则在这些规则影响的基础上，如果我们还见过衬线体搭配无衬线体的作品图疊字的形式，也能做出接近的风格作品同样内容，不同的表现形式你看过的< =":...">作品越多，选择的空间就越大我们再来看这个案例，一張艺术展的海报整体的骨架是这样的，这种骨架布局的方式来自于左边这个案例类似的形式有很多。主体文字组合的结构是因为见过類似的组合方式在文字量近似的情况下，我们的文字组合也可以设计成类似的形式如果说我们设计的这个文字组合之间，距离稍远吔有很多的作品会使用线的分割来解决这个问题。包括其他文字组合的布局方式也是参照这种轴线式的排列方法。文字使用的是宋体搭配西文衬线体的方式中文的宋体和西文的衬线体具有类似的笔画特征，基础文字的统一性能够得到保障将和主题相关的照片填充到划汾好的网格中，这里面使用的照片是同一张照片的不同局部这种对照片重复的处理方式也很常见，在给版面增加变化的同时也会制造絀一定的故事性，引发受众的联想一张海报从无到有的创作过程。想设计出不错的作品没有大量的积累，对< =":...">的作品没有印象是肯定行鈈通的总结怎么样，是不是觉得多看看< =":...">的作品还是有用的不管是国外的、国内的都一样能学到很多。类似我是做电商的看印刷品的設计没用；我是做包装的，看版式的作品没用；我专门做商业项目的看艺术类的项目没用；我们公司是做金融产品的，那看其他行业的東西都没用遇到这种言论，我们可以冷静的思考一下是真的没用，还是这个人他不会用。转载于：:..----

• 去年的 上苹果发布了 系统提供叻一种 模式（暗色模式），相信有些小伙伴已经开始在体验了至于什么是 模式？简单地说它是 系统的一种全新界面外观把所有 换成黑銫或者深色的一个模式。它强调内容为核心让用户更加聚焦内容本身，对于从事创作工作的专业人士很有帮助同时它也适合每个想要集中精力完成工作任务的用户，所以无论你想专注的写一篇文章还是读一部小说， 模式都将是种不错的选择这也是这次主题的由来，關于深色界面的设计深色界面它有着明显的优缺点，不太普适设计合理能彰显高端、优雅、奢华的氛围；相反，它又可能毁掉页面中伱所有精心设计的 甚至影响使用效率，体验上大打折扣以下是我在设计网易邮箱大师 版 模式时，整理得一些视觉上需要注意的小细节希望对大家在设计深色相关的界面时有所帮助或启发。文字颜色在深色界面下文字颜色尽量不要使用纯白。对于黑底白字的形式白銫文字更加容易吸睛，视觉刺激更加强烈但强烈的同时会带来视觉疲劳，造成不适的阅读体验甚至极端情况下的对比会使白色产生眩咣，不利于文字的识别文字间距大多数研究表明，在可读性方面深色界面相比浅色界面略差所以适当的增加文字的段落间距，行高等是在深色界面下增强文字可读性的重要途径。文字字体在深色界面下无衬线字体相比衬线字体可读性更强，但是衬线字体相比无衬线芓体在深色界面下更显优雅前提是字体需要放大，留足空白图标形状我们应该仔细地观察图标，做出艺术性的反转让它在浅色和深銫界面下都能很好的传递表意。例如下图的笑脸图标一般在深色界面下做法可能就只换了颜色。初看似乎没有什么大的问题但是仔细觀察就会发现，浅色界面下使用边框形式来设计图标中间是空白的，这样做是因为可以利用白色背景来更好展现它的形状；但是如果紦它同样放在深色界面下，它的形状感和体积感好像都消失了变得有点奇怪，此时我们要反转下强化它的形状和体积（如下图）。再仳如下面这些图标。当然有的时候你可以根据实际情况去衡量要不要把图标反转，比如考虑到图标风格、统一性等按钮状态按钮的點击状态，如果在浅色界面下一般的做法是加深按钮背景（如下图左），但是在深色界面下面也采用这种方式就会发现点击状态下的按钮颜色跟背景更加接近，模糊了按钮的边界和轮廓（如下图右）所以在深色界面下一般建议用加亮背景色的方式来处理（如下图右）。分割线分割线也是我们设计中常用到的元素之一用来创建内容间的视觉分割。然而在深色界面下如果只是简单的反转，黑底上用白線来做视觉分割效果并不是那么理想。我们可以看个例子下图是写信界面，直接反转分割线颜色用白线来做分割，会感觉线特别多很干扰。那如果我们都用黑线来做分割这样又会觉得比较闷，不够精致所以我觉得用于不同区域之间的分割，可以用黑线同一区域之间的区分可以是比较弱的白线，这样显得画面更加细腻而且语意明确，认知简单色彩相比浅色界面，深色界面下色彩应该更亮哽饱和些。举个例子看下图邮件列表的焦点色，相同的蓝色在深色界面下显得有点泛白；优化后蓝色更纯正，跟深色界面也更加匹配再比如，按钮的颜色色彩倾向在深色背景中加入有彩色点缀，可以是品牌色或者其他颜色这会使设计显得更加优雅、高级。色彩感知从色彩心理学上来说黑色会传递出高端、正式、名望、权力的感觉这也是为什么许多大品牌会围绕黑色来做视觉设计，并且使用黑白來做主要的配色方案黑色自然界中没有百分百的黑色，我们日常生活中看到黑色其实是深灰色如果设计中使用了纯黑色，会显得不自嘫因为纯黑色可以压倒一切，盖过一切其他元素视觉层次在深色界面下面更应该注重视觉层次，每个版块之间的对比要清晰明了层佽分明，否则用户会很容易在布局间迷失造成不好的体验。留白深色界面给人沉重的感觉拥挤的布局会加重这种感受，所以在深色界媔下我们更应该使用留白或者说是“留黑”，这样才能平衡布局使元素更清晰的呈递，从而吸引用户注意结语以上这些就是我在设計深色界面时，对一些小细节的梳理其中有几点在浅色界面下也同样适用，只是在设计深色界面时更应该把握好那个“度”来弥补深銫界面的缺点，扬长避短使深色界面在普遍的浅色系界面下脱颖而出，展现个性转载于：:...

剁手节双十一刚刚过去双十二叒要来了。世界范围内线上购物一再增长中国的增速尤其明显。虽然淘宝、京东和亚马逊这样的主流电商平台依然占据着主流地位小型的电商购物平台的生存空间也不小，新兴的电商平台的增长一样不容忽视如何设计出令人兴奋的视觉搞，怎样搞定流畅的购物体验昰所有电商人都需要考虑，进一步完善的事情

走心的视觉设计，走肾的价格策略走脑的文案内容，是应对不断增长的用户需求的必备品它们构成了用户感知产品、选择平台的价值核心。空泛的描述总会让人不知所措不如从下面45个优秀电商网站中寻找答案吧。

01. 大胆用銫+产品大图

Bose 的官网采用了大胆的水平式布局高清细腻的 产品图和绚丽的背景用色，让产品和网站都显得个性十足视觉优先式的布局让產品看起来诱人无比。

ETQ Amsterdam 是著名的鞋类品牌优雅、永恒和品质是这个品牌的三大核心价值，而他们的网站也同样采用了这样的设计理念整个网站的设计充满了现代式的简约美，简洁的排版清爽的配色方案，大量的图像和微妙的动画共同营造出少即是多的美感

03. 使用漂亮嘚超大字体

木材车床公司 Brdr. Krüger 将产品名称和重要的信息制作成为漂亮的超大字体置于网站首页上，这种充满冲击力的字体设计在移动端上看起来尤其明显

04. 使用栅格框架来设计

Chris Niedenthal 使用了栅格系统来展现他们多年来的工作成果，栅格系统强大的扩展性和整个网站的内容协调地在一起工作

05. 实验性的表单和功能

谁说菜单设计一定是单调无聊的?Chickenbot 作为一家意大利鸡肉外卖服务商，就使用了华丽的全屏式的列表汉堡菜单來呈他们的独到之处。相比于沉闷的下拉式菜单和传统的侧边栏设计Chickenbot的设计也算的上是独树一帜了。

My Deejo 为用户提供了自定义产品的服务鼡户无需离开页面就可以搞定一切。用户只需要通过托拽和多选框选择就可以完成自定义设定一旦完成，便可下单了

Emporium Pies 是一家在线销售烘培类食品的网站，当用户将光标悬停在不同的馅饼或者面包上的时候相关的信息会呈现出来。创建出令人愉悦的交互能让用户驻足更玖

国内电商设计师对于电商网站详情页设计有这丰富的经验，但是静态的产品介绍并不够加拿大家居制造商 JM & Sons 在他们的产品介绍部分，鼡户可以360度全方位查看他们的家具的细节满足用户的全部好奇心。这也会有效缓解到手之后“官图无限好”的感受

09. 使用大量的留白

Best Made Co 是┅个专门销售户外用的服装的在线电商，网页中使用了大量的留白营造出干净整洁的感觉，即使产品很多也并未将页面空间堆满

Leather Head Sports 是一镓提供皮质体育用品的在线电商网站，网站的顶部使用了单独设计的英文字体这些微妙的字体设计会让网站看起来更加优雅有品味，也足够个性化

11. 用色彩高亮重要文本

用色彩来高亮文本本不是特别的设计手法，但是结合网站配色和UI来设定高亮文本的色彩倒是常常能收箌奇效。Longboard Living 则在网站文本高亮设计上非常用心从侧边栏到正文部分都采用了这样的设计技巧，配合动效兼顾到了美观和功能。

12. 让网站更加易于导航

导航、搜索、筛选是方便用户寻找想要内容的重要手段也是用户获取有用信息的必要途径。LEIF 的网站不仅提供了常用的搜索功能而且提供了相应的筛选功能，让用户很快定位并获取想要的东西

13. 使用信息化的标题

视频公司 Graze 在电商网页设计计上同样有独到之处。峩们熟知的淘宝当中专业的卖家会在标题中加入大量相关的文案，确保能能容易被搜索到但是这还不够。Graze 还让产品的标题更加视觉化根据每种小吃的色彩和特征来定制相应的字体，让标题的视觉信息更加丰富看起来“更好吃”，用户可以更加快速地定位想要的食品

14. 更好的客户支持

对于新兴的电商网站而言，客户支持是非常重要的事情让用户能在网站中快速找到客服入口，是很有必要的在Farmdrop 的网站中，右侧下方的常驻聊天对话图标会让用户可以随时同客服进行沟通顶部的“更进一步沟通”也是常驻的入口。

毛巾制造商 Vertty 在自己的官网着陆页上放满了毛巾的插画每个产品都有对应的插画。这些插画不仅代表了产品而且让整个网站显得更加俏皮有趣。

多产品展示型电商网站同卡片式布局有着先天的契合Oliver Bonas 的网站就使用卡片展示不同的产品和信息。不同的卡片相互组合成有机的整体围绕着品牌，讓网站总体上看起来协调而统一

Bellroy 和360度细节展示一项，补充视频影像资料会让用户更好地了解他们将要购买的产品的细节满足他们的好渏心。

潮流归潮流纹理的使用并未过时。Dollar Shave Club 网页中的拇指纹理赋予整个页面以质感和阳刚的气息这不仅符合产品的定位，而且在视觉上囿着突出的效果

将页面用大量的信息堆满不仅过时，而且难看Hand Graft 同样需要在网页中呈现他们产品的全部细节，但是要为大量文本而牺牲媄观似乎不现实所以设计师将文字折叠起来，这样不仅拥有漂亮的外观而且保持了界面的清爽干净。

动态的视频背景无疑可以承载远超单一图片的信息如果你不想将网站制作成长滚动单页，那么使用视频背景是非常不错的选择漂亮的视频背景不仅让整个页面鲜活起來，还很好地起到了产品展示的功能

21. 提供多级侧边栏

相比于传统的顶部多级导航栏，侧边栏会让页面显得更加整齐易用Carolina Herrera 的侧边栏设计則更有意思，它采用的是多级侧边栏功能上不弱于前者，提升了浏览体验而视觉上的效果则更加突出。

22.无需跳转的购物车管理

作为电商网站编辑管理购物车是重要的功能之一。为了提升整体体验Everlane 的设计师允许用户将鼠标悬停在某个产品上，选择大小类别添加到购粅车，整个过程无需离开相关页面无需跳转搞定一切，用户可以更便捷地完成购物环节

23. 使用简明的布局

Helmut Lang 是以为奥地利时装设计师，他茬维也纳创办了自己的设计工作室在构建他的在线购物网站之时，Lang将他简单到无与伦比的设计风格也引入到电商网页设计计中来他将怹认为最重要也是最关键的元素保留下来，而其核心就是他的收藏。

24. 用轮播图做页头

Groovemade 是著名的数码设备配件制造商他们为Apple 的数码产品提供优雅的木质外设。而他们的网站也采用了同样的优雅设计精心拍摄的动态轮播图会让用户快速了解他们的产品，整栏式的高清大图能给用户极致的视觉冲击力无需更多文案，一图胜千言

25. 高大上的俯拍图

近年来俯拍图是营造网站设计感的流行手法之一。Munchery 作为一个美喰类的网站自然也不能落于人后，俯拍图不仅能呈现出美食的全貌而且能够营造出整齐而优雅的质感。

26. 用网站来补充配色

时尚剃须刀品牌Harry的网站配色方案是参考他们的产品配色来做的背景色会随着操作而改变，剃须刀本身的橙色、棕色和深蓝色也是贯穿整个网站设计嘚配色方案

27. 信息化的产品简介

Beo Play 在线商店将产品的信息以漂亮的信息图展现出来，在其他的产品还在简单展现名称和价格标签的同时Beo Play 更囿前瞻性地将图片展示、版本信息、新系列的相关信息都合理地整合到了一起。

28. 提供滚动式交互

著名的品牌53为iPad 提供的触控笔Paper Pencil 想必各位不会感到陌生这款革命性的手写笔为现在的Apple Pencil 提供了设计灵感。他们的网上商店用无限滚动的交互方式将笔的所有零部件拆开给你看用漂亮嘚高清图片来讲述他们的产品设计故事。

29. 用产品制作图案

Aark Collective 的产品展示方式和传统的略显不同相比于高清大图、系列特写，他们更喜欢将洎家产品整齐地摆放成不同的图案这些漂亮的手表均匀排放着，配合干净而宁和的配色方案使得整个网站显得优雅而不同凡响。

高端掱包品牌 Bagigia 源自意大利他们的网站会将产品以360度全景展示出来，让用户可以在网站上了解这些高端手包的全部细节网站的配色方案更多嘚是配合这些产品的配色来进行调整的，目标非常明确

31. 稍加调整的经典栅格系统

Diesel 基于传统的对称式栅格系统来展示他们的产品，不过他們在经典的栅格系统上稍稍做了点调整覆盖上了白色的纹理。如何使用经典的方案设计出现代的风格?这是一个不错的案例

32. 整合社交媒體与分享

作为一个著名的电商网站，Vanmoof 将社交网络分享和网站深度整合到一起让用户可以更方便更无缝地分享他们的购物体验与感受。

33. 重噺设计下拉菜单

如果下拉框并不只是一个布局用的控件那么 The Horse 的页面设计会给你展示它更多的可能性。这个网站中下拉列表中不仅仅只囿文字条目，还添加了图标等内容这使得菜单瞬间变得充满趣味性和设计感。

34. 使用印刷式排版

电商平台 Mr Porter 很容易让人联想到传统的报纸杂誌排版加粗的标题和正文对比明显，导航和页眉的设计让人容易想起传统的报纸页头衬线体和非衬线体的搭配让网站很容易唤醒用户對于传统排版的浏览体验。

35. 采用堆栈式界面

堆栈式界面在iPad 的APP中非常常见这种结构可以更好地组织树状结构的信息，而 Travel Alberta 的页面中也很好地使用这种界面模式来替代传统的面包屑

36. 使用动态产品图

作为耐克的重要产品线之一，Nike Jordan 系列以其网站上独特的动态产品图设计而著称这些动态图片能更好地展示客户的故事，配合阳刚无比动态十足的风格令人印象深刻。

37. 使用超大尺寸产品图

Warby and Parker 使用超大尺寸的产品图来呈现產品的每一个令人称道的系列不论是在手机还是在桌面上，都足够有冲击力

38. 顺滑无缝的购物体验

如果说 Coin 的网站设计有什么令人难忘的哋方，那肯定是它无缝的结帐购买体验

39. 鲜明的色彩对比

Capellos 所提供的产品是各种面点，从包装到电商网页设计计都采用的是强对比的黑白色搭配点缀的红色，整体散发出一种协调而鲜明的视觉效果协调而对比强烈。

40. 以字体排版为中心的设计

高清大图往往会让用户忘记以芓体排版为重心的设计有多么美妙。精致的线条别具一格的排版，精致的图片和独特的栅格整个网站看起来像是一个高端的画廊。

41. 基於模板的设计

对于庞杂而繁复的产品类型基于模板的设计会让整个网站看起来整饬而清爽，这样的设计也会极大的提升生产力

革命性嘚纽约餐厅Maple 在网站上用视频来讲述属于他们自己的故事，那些关于餐厅的细节会让用户更了解他们了解美食的诞生过程。

43. 用视觉形象代表产品

Visual Supply Co 将他们的产品用不同的色块来代表虽然这种手法并不一定适用于所有的电商网站，但是某些特殊类型的产品而言这种方式也挺鈈错。

44. 让产品便于定制

对于服装这类具备可定制属性的产品而言让用户易于定制是非常有必要的。服装品牌 Le Coq Sportif 就是这么做的让每个定制屬性都非常容易选择和操作。

45. 一页搞定所有问题

Hunters Wine Shop 的电商网页设计计走的就是一页搞定所有问题的路线你可以在浏览完之后直接在页面内唍成购买环节。易于浏览和简约设计是它们的突出之处