凤凰北网站设计头条

• 网站设计单页好还是多页好

  网页设计整体趋向于单页网站设计。这种趋势是由于对追求简单和速度的推动。

  简单的单页网站也是一种很好的响应式设计，并且可以适应所有设备。当然，也有很多情况下需要用到多页设计。但面对很多相关的利益，很容易落入添加额外的素材或者忽略必要的内容这样的纠结中。所以，这个很难决策是使用单页还是多页设计网站。

  1、单页网站：优势：单页网站最直接的好处是以简单，容易和可操作的方式展示给用户。比较适合移动端和响应式网站布局，还有专家称单页网站转化率高，这个需要验证，个人认为都差不多。关键是看你网站的内容或其他特色是否足够吸引客户的程度。劣势：单页网站最大的劣势就是需要把过多的内容放置在一个页面里。因为一个页面不可能容纳所有的一切。而是需要有视觉层次和大量的规范制约。从技术的角度来看，单页网站的搜索优化比多页网站少。当一个页面上的内容和图像很多时，会增加加载速度，当然你的内容很少就无所谓了。

  2、多页网站：优势：内容承载率大，给客户可查询的信息量大，供对多个页面和改变内容的SEO的更好控制。劣势：传统展示方式，如果导航不清晰客户可能很难找到想要的东西。采取内容优先的方法。 找出用户关心的内容，然后相应地设计您的界面。确保你的网站适合纯粹的单页体验。 如果你不能把所有内容简洁的放入一个页面，请考虑混合网站。 如果需要用户知道多个类别，请使用多页网站。不要忽视SEO， 可以用单页网站建立搜索引擎优化。用户不总是喜欢阅读， 这就是为什么信息图表和视频是新用户体验的一部分。

  湖南唐唐网络提示：任何大小的网站都需要使用户可以快速浏览。把事情简单化， 设计的一致性实际上对用户来说操作更简单。网站的清晰度很重要。不管单页还是多页好，首先来看看这两者的优势和劣势，然后根据自己的需求去选择适合自己的网站设计。现在有一种结合体就是营销型网站建设，将首页尽量全部展现出来，相对来说体积比较大，内容做成多页面。兼顾用户与搜索引擎！

  展开

• 推荐一个牛掰的设计网站，让你的工作效率提高80%

  为了让你们能在领导面前秀一波操作，我决定给你们推荐一个非常Very超级无敌牛X的网站——See seed，因为这个网站涵盖了国内外所有优秀的、与设计搭得上边的网站，为你找素材、找图片、找创意节省很多时间。

  网址：https://seeseed/

  接下来，我会根据该网站的分类，从必看、灵感、资讯、UI-UX、图标、图库、配色、字体、工具、社区中挑出3个最受欢迎的网站，推荐给大家。

  灵感

  1.Lapa：https://lapa.ninja/

  Lapa——国外优质产品官网。它提供各类落地页设计欣赏，旨在激发设计师的灵感、提高设计师的技能。该网站上的很多案例，都可以应用到PPT设计中。

  2.Abduzeedo：https://abduzeedo/

  Abduzeedo——每日分享高品质设计创意灵感。对于灵感匮乏的设计师来说，这个网站无疑可以解决你的燃眉之急。

  Abduzeedo 上有很多PS、AI的教程，当然还有 Conteplated 、Pixelmator 、Fireworks 等网页设计教程。该网站吸引了超过10万设计爱好者，几乎每天的访问量达300万。

  PS：这个网站的导航条其实是横着的，我等了1个小时也没加载出来，你们将就看看...

  3.Bestwebsite：

  https://bestwebsite.gallery/

  Bestwebsite——设计感超棒的网站。你可以为 Bestwebsite 上所有的案例打分，满分10分，还可以点击链接体验该网站的设计，寻找灵感必备啦。

  资讯

  1.Heydesigner：https://heydesigner/

  Heydesigner——设计师与前端一起充电的网站。顾名思义，该网站更适合设计师和前端工程师浏览，网站的Logo也跟充电的图标差不多。设计在很多方面都是相通的，我们也可以从这个网站上得到很多有创意的灵感。

  2.Panda：http://usepanda/app/#/

  Panda——全而美的设计文摘订阅平台。Panda 跟 Seedseed 相似，都是各类设计网站的合集，该网站上的文章具有时效性，你可以看到全球的设计师写的文章，不过你得翻译一下。

  3.Lizhi：http://lizhi.fm/1852153/

  Lizhi——字体排印主题，中文博客节目。Lizhi是一个类似于抖音、一直播的直播平台，网站设计很简单，不用登陆就可以听节目。在这里，你或许可以听到很多字体设计的知识点，应该比看书有趣。

  UI-UX

  1.Uigarage：https://uigarage/

  Uigarage——高级美，UI设计灵感炸裂之地。该网站大概有40种设计类别，涵盖：IOS、Andriod、Web等，简直是UI设计师的灵感宝地啊。

  2.Hoverstat：https://hoverstat.es/

  Hoverstat——Web交互动画设计欣赏。如果你是做网站设计的，建议你经常浏览一下 Hoverstat 。跟 Bestwebsite 一样，可以在线体验网站的设计。

  如果你将鼠标置于图片上方，停顿一秒以后，会自动播放网站的效果，可以说很方便了。

  3.Land-Book：https://land-book/

  Land-Book——只收录全球最佳设计网站。该网站上的设计网站值得所有设计师参考，它支持用户创建账号收藏自己喜欢的作品，作为灵感库。

  图标

  1.Iconfont：http://iconfont/plus

  Iconfont 又称为“阿里巴巴矢量图标库”——支持多种格式（SVG/AI/PNG）图标下载，图标可转字体。这个网站大家都熟透了，我就不一一介绍了。

  2.IconJar：https://geticonjar

  IconJar——成套优质简洁 Icon 素材免费下载。海量简约图标任你下载，不过，下载了很多图标，找起来很麻烦？Iconjar 可以帮你解决这个问题。下载 IconJar 工具，打开之后如下图（该软件只能用MAC系统打开）：

  操作步骤：打开 IconJar → 点击【 “+” Add Icons】新建目录 → 将你的图标全部导入新建的文件夹，命名。在你需要找 icon 的时候打开 IconJar ，直接把你想要的 icon 拖进这个界面，就可以快速找到你想要的 icon 了。是不是炒鸡方便呢？这个时候需要去买个苹果电脑了...

  3.Icon Store：https://iconstore.co/

  Icon Store——一流设计师出品的精美 icon。28种常用的图标类型，用来做PPT足矣。有的图标还可以拿来做表情包~

  PS：无需登录即可下载

  图库

  1.Pexels：https://pexels/

  Pexels ——4万+免费商用美图。Pexels 是一个致力于为用户提供海量共享高清图片素材的网站，每周都会定量更新。它所有的图片都会显示详细的信息，例如：拍摄的相机型号、光圈、焦距、ISO、图片大分辨率等，高清大图质量很不错的。

  2.摄图网：https://magdeleine.co/browse/

  摄图网——正版高清摄影图免费下载。摄图网是一家专注正版摄影高清图免费下载的图库，有摄影师5000+入驻，一百万以上的图片量，一百万以上的设计师，在这里你可以找到满意的图片素材和设计灵感。

  PS：非会员每天只能下载一张高清图片

  3.500px：https://500px/

  500px——全球著名摄影师图片展示和售卖平台。500px 是一个致力于摄影分享、发现、售卖的专业平台。找素材的同时还能学摄影，一举两得啊。

  PS：该网站上的图片商用请购买版权，它还有Android客户端哦~

  配色

  1.Adobe Color：

  https://color.adobe/zh/create/color-wheel/

  Adobe Color——Adobe 官方在线配色工具。拉动上图中的色环，可以自动生成配色方案，【探索】里也有很多配色方案供你参考。

  2.Colorhunt：http://colorhunt.co/

  Colorhunt——每天一组新鲜配色灵感。该网站配色方案的排列方式（除 New 中的配色方案）都取决于用户的浏览次数，所以你打开网站之后，一眼就可以看到别人喜欢的配色方案是什么样的啦。

  3.Webdesignrankings:

  webdesignrankings/resources/lolcolors/

  Webdesignrankings——好看得哭出来的配色方案。65种配色方案，任你挑选。鼠标靠近“小水滴”的时候，会自动出现色值。

  相关阅读：7种配色方案

  字体

  1.Myfonts：http://myfonts/

  Myfonts——字体设计灵感。这个网站适合手动党（想自己设计字体的人）寻找灵感，不过都是英文字体，我们可以学习它呈现出来的效果，将其设计理念运用到中文字体中。

  2.Urbanfonts:

  https://urbanfonts/

  Urbanfonts——免费英文字体搜索下载。这个网站适合“懒癌患者”，可搜索你喜欢的英文字体，点击下载即可。

  3.Hellofont：

  http://hellofont/index.php

  Hellofont，又名“字由”——超好用的字体管理工具。Hellofont 里有很多文章，可以帮你解决字体运用的诸多问题。不过，下载字体需安装字由的客户端。

  PS：每个案例下方都有字体的使用方法；该网站上的字体仅限PS、AI使用

  相关阅读：用对了字体，你的PPT逼格就上去了

  工具

  1.LogoJoy：https://logojoy/

  LogoJoy——根据喜好在线生成个性Logo。Logojoy 是一款利用人工智能帮你完成所有Logo设计的工具，其生成的创意可以提供给真实的设计公司。如果你喜欢该网站的Logo设计，可以点击“现在购买”，价格大约在65美元。

  2.Tinypng：https://tinypng/

  Tinypng——在线压缩PNG/JPG。Tinypng 的压缩质量非常不错，在保持alpha 通道的情况下对PNG的压缩可以达到70%，而且用肉眼是看不出与原图有什么区别的。

  3.Ant Motion:https://motion.ant.design/

  Ant Motion——动效设计解决方案。喜欢动效设计的设计师们看过来，Ant Motion 是一款以 React 组件来实现动画效果的工具，用 Ant Design 实现页面后，可以很轻松地增加页面里的动画效果。该网站上的动效很牛X，先定个小目标：1年后做出这样的效果。

  社区

  1.Zcool：http://zcool/

  站酷——国内设计师学习和交流的平台。深耕设计领域十年，站酷上聚集了470万优秀设计师、摄影师、插画师、艺术家、创意人，设计创意群体中具有较高的影响力与号召力。反正有事没事儿都去站酷上溜达溜达，每次都有新收获。

  2.UI中国：http://ui/

  UI中国——国内UI设计垂直社UI区。UI中国的会员均为职业 UI 设计师，覆盖全国互联网公司。有创意可以去比一比，没创意可以去找一找。

  3.Gracg：https://gracg/

  Gracg，又名“涂鸦王国”——国内原创绘画社交网站。涂鸦王国是国内精英插画师社交网站，以原创插画为主要核心内容，作品风格多样，涉及使用行业广泛。喜欢插画的小伙伴可以去吸一波图了！

  必看

  1.Dribbble：https://dribbble/

  Dribbble——全球优秀设计师最佳交流展示平台。该网站上的设计偏 UI ，其画风也是最流行的，我特别喜欢这个网站。你可以在 Dribbble 上找到非常多有意思的创意。

  2.Behance：https://behance/

  Behance——Adobe 旗下设计师交流平台。Behance 上的创意设计人士可以展示自己的作品，发现别人分享的创意作品（上面有许多质量上乘的设计作品），相互还可以进行互动（评论、关注、站内短信等）。

  Dribbble 和 Behance 上的图片质量超级高，导致网页打开非常极度异常缓慢，除此之外我都很满意！

  3.花瓣：http://huaban/

  花瓣——优美图集，点亮灵感。花瓣可以说是图片素材领导者，帮你采集、发现网络上你喜欢的事物，不得不说激发了老夫的少女心。

  看完这篇文章，你只需要记住 See seed 就够了，赶紧给自己的收藏夹瘦个身吧。不过，你可能会问我：这些跟PPT有什么关系？其实，学设计不仅要学习生硬的知识，还需要拓宽自己的视野，这样你的灵感才不会枯竭。

  以上网站都不需要翻墙，如果你打不开网页，请检查你的网络。

  展开

• 2017网站设计趋势之那些无所不能的动效

  2016年不管是网站还是移动端，我们随处可见一些扁平的动画元素，他们颜色清爽视觉感觉很新颖。2017年，动效依然还是今年的主流设计元素，但跟去年相比又有些许不同。

  要说到动画的流行其实还是得益于，过去苹果设计的扁平风格以及动效部分，他们对于那些小细节的追求真的达到了极致，而今天悬停效果再次卷土重来。但并不是过去的那种俗气，闪烁的效果，或者是简单弹跳和旋转动效，如今的悬停效果将给用户带来更好的帮助和体验。

  悬停效果的设计范围真的很广，大到整个屏幕的视觉效果，小到导航元素都可以看到他不俗的表现。

  .........

  ▼

  会动的首页

  悬停效果可以是你用户体验的最关键的部分哦。当你的首屏被动画元素充斥的时候，额外的一些悬停效果可以让你首页的魅力值直线UP。

  HAUS，这个网站的设计着实让人惊喜，屏幕上有许多卡通人物在屏幕上移动，你可能完全无法把这些动画效果跟悬停效果联系到一起，看起来知识一个动作变换了另外一个动作而已。但是我负责任的告诉你，如果没有悬停效果，每个元素也就是单纯的在屏幕上规律的画圈圈罢了。

  当你使用全屏悬停动画这样的效果时，诀窍是取悦用户，而不是让他们感到压抑，这是一个相当棘手的问题。如何让他们感到新奇又不至于太过于花哨？通过让其他设计元素简单例如例子中的黑色背景，一个再简单不过的背景与一个易于阅读的无衬线白色字体就十分合适了。这是一个用在首屏上的技巧，可以让用户去和体验，让他们更有兴趣滚动翻看下面的内容。

  .........

  ▼

  按钮效果

  一个简单的动画设计实际上可以鼓励用户去点击按钮的。这看起来很简单，对吧？这其实也是这种类型的动画如此受欢迎的原因之一。

  设计一个好的按钮效果，可以帮助用户更好地了解你想让他知道的东西。上面的例子就来自Luke Etheridge，当你鼠标移动到按钮上时，他就会改变颜色，并告诉用户点击后会发生什么。这个悬停动画效果，它不仅很有用并且也很好看哈～

  .........

  ▼

  幻灯片效果

  网页很多时候是被各种图片和内容堆积起来的，他们经常看起来很拥挤。所以几乎所有的网站设计的时候都会选用一些滚动动画效果来平衡。在多个图片中设计上箭头和其他指示按钮，告诉用户如何前进或返回，这样的设计其实是很多见的。

  而如今设计现代运动动画的的关键是：

  1. 动作要快

  2. 轨迹明确

  3. 动作一致

  以上这个动效案例是来自Baptiste Dumas。你根本不知道鼠标点击它后，下一步会怎么发生，它会在内容元素之间创建一条明显的线，所有的东西都被这条线连接在了一起，形成一个类似无缝衔接的运动流程，是不是很神奇。

  .........

  ▼

  导航菜单

  不管你喜欢与否，隐藏的导航风格一直是是一个很受欢迎的设计元素哦。这个动画悬停效果可以帮助用户更好地浏览内容，也能让主页视觉更简洁。

  随着指示图标的显示和隐藏，菜单信息可以轻松的在屏幕上弹出和隐藏甚至是移动，动画效果的目录，是是个非常强大的指示工具。

  Oxen Made，这个案例就使用了悬停效果和动画效果两种方式在主页上，为了指导用户如何使用网站，他们把右上角的菜单按钮设计成可以更改年色的悬停效果，让用户知道这是一个可以点击的元素。点击后弹出完整的菜单，是从页面的左侧摆动出来非常显眼。此外，右下角一个小三角形箭头，使用和菜单按钮相同的效果，让用户知道还有更多的内容可以滚动，不得不说你们真的好贴心哦～

  这些微妙的动效设计，和相对复杂的背景视频搭配在一起，确实是十分合适的。在背景视频强烈的运动衬托下，按钮的那些柔和的动效更容易吸引用户的注意力，让用户更好的使用网站，按钮也充分起到了导航的作用。

  .........

  ▼

  表格和字段

  还有一些使用悬停效果优秀案例，例如把表格融入其中。几乎每一个你访问的网站都会要求你注册或者填写一些问题信息。这确实是一个很让人讨厌的步骤，因为真的很繁琐，所以如果用户提供这些信息越容易，你就越容易得到那些对你有用的信息。

  但如果让这些列表信息不那么乏味呢？一些视觉线索可以帮助用户记住如何进入一个领域，并指引他们确认提交是非常重要的。

  上面的这个例子它做了两件事。第一个是用户被告知要输入什么信息，他们可以看到整个操作过程，以及点击登录按钮后，我将要填写的信息是什么，这样用户就不必猜的我这一步操作完成后，下一步我要做什么了。

  如果你还不知道如何去应用悬停效果的话，这个效果可以作为一个很好的起点哦。其实在这样简单的引导下，用户是享受跟网站进行互动的，这样简单的动画就能让我们收获到不错的反馈哦。

  .........

  ▼

  结论

  在我们看来悬停动画是十分棘手和复杂的设计技术，但实际情况却是，利用CSS，几乎任何人都可以轻松添加一个简单的动画效果。他们其实很简单，在网络上有很多动画师会分享一些代码，让你去体验研究。

  最后分享给你一些使用这些技巧的关键：它需要有它存在的意义。不要过于频繁的使用这些效果，只在添加内容时使用悬停效果或者动画；不要让这些效果分散用户本来应该执行的行为哦。

  展开

• UI 设计师必存的十大网站

  以下就是学姐推荐的十个交互设计网站

  1. Dribbble

  https://dribbble/

  移除

  推荐理由：作为一个曾经需要邀请码的设计网站。一度风靡一时，据说邀请码卖到1500，许多设计师寻找灵感，与设计师同行进行交流切磋等都会到这里来。近几年觉得dribbble的展示形式比较单一，导致有些作品纯粹为视觉特效去做。这个见仁见智吧。

  2. The FWA

  http://thefwa/

  移除

  推荐理由：地球人都知道的老牌的全球minisite酷站。展示作品比较重视新技术运用于互动中，视觉重视创意表现，其中很多商业设计值得借鉴。但感觉近期给人眼前一亮的作品减少。

  3. Awwwards

  http://awwwards/

  推荐理由：算是老牌网页设计领域的网站了吧，如果说Behance这类的网站是设计师灵感的来源，那AWWARDS就是设计师（特别是网页设计）的知识储备库。

  3. Site Inspire

  https://siteinspire/

  推荐理由：收录了2500个网站设计，并且可以按主题、类型以及风格来进行搜索。能显示实时的网页快照和位置。比较丰富。

  4. straightline

  http://bm.straightline.jp/

  推荐理由：一个日版的UI、网页视觉设计汇总网站，日本的设计风格属于超级耐看型，汇集了很多很棒的设计，资源也比较丰富。

  5. Little Big Details

  http://littlebigdetails/

  推荐理由：LitterBigDetail是一个汇总微设计的网站，记录上万个体验设计和产品细节。

  6. pttrns

  https://pttrns/

  推荐理由：emmmm....界面像是交互设计版的pintest，网站收集了一千多个App设计模板和产品流程截图，而且还在不断更新中。这些模板截图按照App的功能或者截图的类型分类。另外，还可以通过放大镜，更清晰地看清楚截图。

  7. Html5 Showcase

  http://html5-showcase/

  推荐理由：各种Html5网页交互的优秀案例

  8. Collect UI

  http://collectui/

  推荐理由：移动端UI设计案例居多，收录的数量也是非常丰富的，放上来的原因主要是每天都会更新高质量的UI作品，而且归类详尽到多达100多种，可以从网站左侧快速定位进行浏览。遇到喜欢的作品，还可以直接追踪到Dribbble关注它的作者。

  9. MUUUUU.ORG

  http://muuuuu.org/

  推荐理由：好了，又是日式风格的网页设计，有许多优质的日式风格网页设计的案例，日本设计风格中的自成一派和许多细微的人性化交互设计非常值得借鉴。

  10. UYI

  http://useyourinterface/

  推荐理由：动效设计居多，很多有趣不错的动效案例。

  大家有喜欢的网站也可以给学姐推荐喔~

  展开

• 做网站设计，7个坑你千万不要踩！

  做企业网站的时候，要怎样才能得到客户的青睐呢？本期节目，Philip VanDusen从多年的设计经验中，总结出7个你千万不要踩的坑！来看看，这些坑？你有没有踩过？

  展开

• 网页设计：高雅白打造极致的官方网站

  一般使用白色作为主色调的网站设计都是非常简洁、干净和优雅的，而且白色大部分人都喜欢使用，包括现在实生活中的建筑设计。白色是全部可见光均匀混合而成的，称为全色光，是光明的象征色。白色明亮、干净、畅快、朴素、雅致与贞洁。但它没有强烈的个性，不能引起味觉的联想，但引起食欲的色中不应没有白色，因为它表示清洁可口，只是单一的白色不会引起食欲而已。

  白色在网页设计中的重要性

  很多人以为使用白色是很枯燥、没有创意或者是很老土，但是很多设计师使用白色创造出很多优秀的设计作品。

  而使用白色不一定是”极简的”，极简主义并不依赖于任何特定的颜色。同样，”空白”也并不一定非要是在元素周围使用白色。你——设计师必须做出选择。

  白色有着很好的拓展空间，适当白色可以非常棒的点亮一个设计，可以让暗色的色调，比如红色、绿色、蓝色和紫色看起来更醒目。

  白色的背景文化

  白色的颜色，象征着和平和谐的社会。白色是非常广泛的应用在基督教，有着纯净，真实的，高贵的象征。

  在西方，特别是欧美，白色是结婚礼眼的色彩，表示爱情的纯洁与坚贞。但在东方，却把白色作为丧色。

  网页设计中使用白色的好处

  我想很多人都同意，说白了就是一个干净，纯洁的形象。但大多数网页设计不就是为了这个目标吗？网站简洁干净，而且有效的组织内容和元素，这就是我们常说的简洁的网页设计。

  接下来我们看看一些优秀的白色的网页设计例子，看看设计师们是如何利用白色空间、如何排版和配色的。

  展开

• 你知道这些好用的设计网站吗？

  工欲善其事，必先利其器。

  无论是设计还是写作，需要建立自己的资料库。

  在创作的过程中，为了能够很好的去搜寻到自己所要的资料。

  于此，我把自己经常用到的关于设计灵感、设计素材、配色方案等设计网站推荐给大家。

  有了这些网站，你们几乎都不需要设计老师了！

  一、设计灵感类。

  1.花瓣网

  http://huaban/all/

  这个网站对于很多设计师都是熟知的，是很多设计师的灵感来源。花瓣网除了寻找灵感之外还有一个很重要的功能插件。——花瓣采集。

  运用花瓣采集工具可以采集你在浏览网页时候看到的任何你个人比较喜欢的图片，将相同风格的图片采集在画板，日后自己需要这方面素材的时候点开查看，便是满满的灵感素材啊。

  2.站酷网

  http://zcool/

  站酷（ZCOOL），中国人气设计师互动平台。深耕设计领域十年，站酷聚集了470万优秀设计师、摄影师、插画师、艺术家、创意人。站酷网入驻了很多设计师，每个人都可以在上面发表自己的作品，打造自己的品牌，也可以根据其他人发出来的作品寻找灵感。

  3.苏打苏塔

  http://sudasuta/

  苏打苏塔是一个关于创意设计，设计，插画，艺术摄影，lomo，素材，教程，web，灵感来源，平面设计欣赏的综合性网站。

  4.致设计

  http://zhisheji/

  致设计网，中国最大的电商设计师交流平台.电商设计大师们都潜伏于此，聚集了中国绝大部分的80,90电商设计师，在此分享了他们的店铺设计，创意设计。

  5.古田路九号。

  http://gtn9/index.aspx

  古田路9号网站，品牌创意版权保护平台。国内专业品牌创意平台，以版权保护为基础，品牌为核心，集创意作品分享、活动招聘发布、广告推广、正版字体下载等。

  二、设计素材类。

  1.千图网

  http://58pic/

  千图网提供矢量图素材，矢量背景图片，矢量图库，还有psd素材，PS素材，设计模板，设计素材，PPT素材，以及网页素材，网站素材，网页图标等。部分素材是免费的。

  2.千库网

  http://588ku/

  专注于免费的PNG图片素材下载，里面的素材质量也是相当不错的。对于普通的用户，每天的下载数量也是有限制的，这个网站下载的素材就是可以直接拿来用，免去复杂的抠图步骤啦。

  3.素材中国

  http://sccnn/

  素材中国打造中国最优秀平面设计素材网站。素材天下，提供平面设计，免费设计素材。里面的素材质量挺高而且是免费的哦。

  4.懒人图库

  懒人图库专注于提供网页素材下载，其内容涵盖网页素材，矢量图素材，图标等。

  5.90设计

  http://90sheji/

  90设计是专注电商设计的淘宝素材库，设计交流、学习与分享一体的平台，让电商设计（淘宝美工）找灵感和素材更效率。

  三、色彩搭配。

  1.中国色

  http://zhongguose/#meiguihui

  提供各种中国的传统颜色的名称，CMYK值，RGB值，16进制表示。

  2.配色网

  http://peise/

  配色网是交流色彩的专业网站，致力于设计，网页，家居，时尚，服饰等方面色彩理论的学习和提高，并提供大量优秀配色方案，为色彩构成学习者提供免费资料。

  3.Color Hunt

  http://colorhunt.co/

  ColorHunt网站是一个致力于帮助产品设计师们更好的选择颜色搭配组合的站点，从互联网中收集了海量的完美色彩组合，你可以把这些颜色组合运用到任何产品设计项目.

  给大家推荐的这些网站都是在我自己日常设计中经常用到的。希望对大家有所帮助。

  优质的实习，尽在实习僧APP！

  https://shixiseng

  作者：MY麦子

  来源：简书

  展开

• 六个使用大背景图片的网站设计分享

  在电脑显示器越来越大和互联网速度越来越快的推动下，越来越多的设计者倾向于使用大尺寸图片作为网站的背景。在网页设计中，合理地应用大背景图片可以让网页看起来更加整体，从而使网站更加有吸引力。但在背景与其它设计元素之间寻找平衡，是一件十分重要却并不容易的事情。在本文中，互诺科技将分享国外几个使用大背景图片的网站设计作品，以供欣赏借鉴。

  blindbarber

  archikon

  st. jonhs

  inze

  decouvrezuottawa

  studiotilt

  展开

• 2017年网页设计发展趋势，17年网站设计趋势变化

  　　新年伊始，信达互联北京网站设计公司和大家一块聊聊2017年网站设计可能会出现的趋势，也许并不完全精准，但是相信你会在接下来的一年中，越来越多地看到这些设计手法。

  　　1、越来越多的衬线体

  　　除开我们所熟知的Helvetica，占据我们屏幕首页的各种非衬线体字体还有很多。在过去几年中，高清大图的流行和跨平台设计大行其道，这两种客观需求之下让设计师惯于将加粗、易读的非衬线体和大图结合起来使用。

  　　但是随着高清屏幕的流行与普及，非衬线字体一家独大的局面将会发生改变。

  　　细节丰富，充满装饰性的非衬线体字体在现如今的屏幕上，已经不存在识别度的问题了，可读性强了很多。在如今高像素密度的屏幕上，拥有不同美学特征的非衬线体字体的全部特色，都能完整地呈现出来。

  　　2、深色系配色

  　　在过去的一年当中，大量的网站采用了白色和浅色的背景，采用深色背景设计的网站相对较少。

  　　可是看多了也腻味。有一部分网站已经开始倒转整个配色，开始在自家的网站上探索深色系配色的美学。在配色上采用深色为主的设计，最需要注意的就是其中色彩的对比度和内容的可读性，只要把握好其中的关节，能够很好的吸引访客的注意力。

  　　随着深色系配色而来的，还有越来越多的单色配色方案，更极端一些的，干脆就只在纯色的深色背景上搭配照片。这样的配色手法乍一看很单调，但是深色背景下，流行色会显得更加突出，也更容易鼓励访客与网站进行互动。

  　　3、中性、自然的配色方案

  　　如果你一直关心流行色或者优设的话，你肯定会知道潘通最新发布的2017 年流行色——草木绿，这一自然气息浓郁的色彩被大家称为“新中性色”。

  　　在未来的一年当中，将会出现越来越多充满自然特色的配色方案，而其中许多配色方案会选择使用草木绿来搭配。

  　　4、几何元素

  　　从矩形到三角形，从方形到圆形，几何图形已经越来越多地出现在网页设计当中。好的设计不会让这些几何图形在整体中过于突兀，而是尽量融入，为用户提供视觉引导，强化交互体验，提供行动召唤，或者让整个视觉更加有趣。

  　　网页中几何元素的设计要如何设计好呢?技巧在于，尽量采用简单的设计。例如，你喜欢环状的元素，那么你可以将它作为一个固定的元素，在整个设计中使用，它可以承载图标，也可以用作团队成员头像外框。

  　　几何元素的另外一种用法，是将多种图形做成拼贴式的背景装饰元素。几何元素尺寸较小的时候，可以使用明亮的色彩，让整个设计显得更加缤纷有趣。如果几何图形尺寸较大，就不能这么用了，而是要通过着色让他能和其他元素构成对比，又不能太过于突兀，比如Hive Boxx 这个页面的设计。

  　　5、超大字体

  　　有一些设计师已经开始这样做设计了，不过随后你会在网页设计中看到更多的超大字体的设计。字体尺寸拉大之后，搭配多样的样式、飞溅的色彩，这些尺寸超大的文字如今已经变得越来越重要了。

  　　超大字体流行背后的逻辑是页面需要通过它们抓住用户的注意力，每个设计师都需要让特定的部分在整个设计中脱颖而出。拥挤的浏览器页面中，要怎样才能抓住用户的注意力呢?肯定是强视觉化的内容，这样一来，超大字体的流行就解释得通了。

  　　6、虚拟现实

  　　对，虚拟现实是目前最火热的趋势，并且它已经入侵到了网页设计领域了。

  　　许多设计师已经开始在他们自己的网页中尝试设计类似虚拟现实的效果。从游戏到360度视频，设计师试图让用户无需VR眼镜而拥有环绕的真实视野。虽然技术上和VR几乎完全不沾边，但是它同样是追求真实的体验。

  　　目前，这种设计还没有完善的规则，许多类VR的网页设计还是需要设计师动脑子想办法来实现，非常考验设计技巧。

  　　7、新的导航模式

  　　如果你一直在关注新的设计趋势，你会发现设计师一直在尝试寻求不同的导航模式。当然，截至目前，绝大多数的页面依然还是将导航挂着页面的顶部。

  　　随着不同的尺寸比例屏幕、不同的设备的出现，新的导航模式拥有了存在的可能性。首先流行开来的是屏幕侧边导航设计和隐藏式的导航设计。

  　　这种看似微小的变化，让网站的浏览方式和体验出现了翻天覆地的变化：它们让页面变得更加时尚，可以兼容不同的屏幕需求，甚至让整个网页布局都能进行全新的设计了。

  　　隐藏式菜单设计并不是让导航完全隐藏，而是让整个屏幕都成了呼出菜单的控件，这样的设计已经被很多用户所理解并熟知，它在移动端上的应用已经相当的广泛。

  展开

• 网站建设不再难 - 2018年最好用的网站设计工具集锦

  由于代码技术的限制，普通大众往往在网站建设方面总是一站难求。但是，想要拥有一个自己的网站，真的必须由程序员通过代码实现？哼，在当今满满科技感的新时代，这个问题不存在的~ 小编为大家整理了个人认为最好用的免费网站设计工具。新的一年，拥有一个自己设计的网站不是问题！

  根据经验来讲，糟糕的软件，也一定会导致糟糕的工作效率和成果。如果你不是专业人员，光是前期工具的选择就足够让人头痛了。正确的网页设计工具可以简化工作流程，高效快速的完成工作。那什么是好用的网站设计工具？不用说，一定是高效，省时，省事，低成本的产品。

  "The best design tool is a long eraser with a pencil at one end." -- Marty Neumeier

  针对不同的人群，适合的工具不同，“最好用“的定义自然也是有所区别的。以下，我将我认为的“最好用的免费网站设计工具”分类整理给大家：

  - 针对初学者的网页设计软件

  - 基本的网页设计软件

  - 好用的网页设计助手

  言归正传，让我把这些个人认为最好用的网站设计工具分享给大家吧~

  "Good art inspires; Good design motivates." -- Otl Aicher

  针对初学者的网页设计软件

  1. Wix

  价格：基础版免费

  付费模式4.5美元/月 起

  适合人群：非技术性人员

  简介：可以自由拖拽编辑的网站建设平台。Wix 提供完整的一站式网站创建服务，包含注册网址、网站设计、网站管理和修改，让用户只需要操作GUI界面，就可以创建网站，不需要了解DNS对应、网页编程语言、服务器创建/租赁等事务，一切都由 Wix 自动化处理，让用户能专心在网页视觉与内容呈现上。

  个人体会：Wix的最大优点是可以自由的拖拽组件。你可以按任意大小任意布置按钮、图片，或文本框在网站上的任何一个地方。但缺点是，如果改了模板，很多内容和格式就不使用了，几乎得重新做网站，而且它的手机模式，需要对内容重新进行编辑。因此，如果网站经常更新的话，每次更新后都得用手机编辑器再改改手机版本。因此 Wix 比较适合不经常更新，但设计别致的小型网站。

  2.Squarespace

  价格：免费注册建站

  适合人群：最适合非技术型人员（不需代码、设计功底）

  简介：Squarespace这款自助建站服务始于2004年，十年的岁月使其发展成了使用最广泛的建站程序之一。不需要设计或是编程基础，便可通过Squarespace快速搭建一个精致的响应式网站。它本身提供了三种定价模式，第一种是可免费注册与建站。但若要发布网站，则有根据网站类型每月12至40美元的两种方案可供选择。

  个人体会：Squarespace最大的特点是注重细节。从创始人Anthony Casalena的一些公开信息中知道，squarespace这款智能建站产品非常适合个人网站，因为它很多模板的表现模式和后台插件体验都偏向小站长，立足于把自己的小站打造为细节丰富的网站。

  "Creating something out of thin air is easy. It’s finding the air that’s hard. " -- Asher Trotter

  基本的网站设计软件

  1. 原型设计工具 - Mockplus

  价格：基础版-免费

  专业版 - 199元/年

  网站设计的第一步是准备网站原型。而原型设计的任务就是根据用户的需求描绘出页面的草图。应用市场上不乏一些优秀的原型设计工具，例如Mockplus。作为一款面向国际市场的原型工具，Mockplus不仅仅在手机App制作上有出色表现，网页设计也非常给力。

  作为一款优秀的原型设计工具，Mockplus是怎样实现网站设计的呢？请参考Mockplus例子项目：StyleXstyle - 时尚类网站原型。

  第一步：下载Mockplus并登陆账号；若没有Mockplus账号，可免费注册。

  第二步：打开Mockplus，选择网页项目类型，设置网页宽高。网页最大高度为6000像素。

  第二步：从软件左侧组件库中拖拽添加需要的页面元素：按钮、图标、文本框、图片等；右侧面板支持调整页面背景、字体、字号。

  第三步：为特定组件添加交互：页面跳转链接、组件跳转链接等;右侧属性面板中支持多种属性、交互、页面设置。内容非常丰富。

  第四步：通过F5本地预览或发布HTML在线预览。PS：Mockplus提供8种预览方式。

  StyleXstyle在线预览地址: http://run.mockplus/yYoEMZcBxFGdhfYW/index.html

  2. 多才多艺的设计工具 - Photoshop

  价格：9.9美元/月

  虽然它不是免费的，但它作为最佳网页设计软件市场领导者，它的地位不容忽视。那么关于Photoshop本身：一句话，它是一个非常多才多艺的工具，可以用于任何类型的设计项目，而不仅仅是网页设计。它的主要目的是帮助你使用光栅图形。

  除了调整图像或图形的颜色，饱和度，模糊，清晰度等，Photoshop还可以从头创建完全自定义的图形（例如网站布局和可视化）。例如，你可以将多个图像合并为一个项目的一部分，并确保通过使用各种过滤器或执行某些转换将它们全部组合在一起。

  Photoshop本身是一个非常手动的工具。如果你想要明确的借助它来达到网站设计的目的，那么你应该具备一些设计技能和知识才能真正能够充分利用它。

  Photoshop网站设计教程：How to design Website in Photoshop

  3. 网站UI界面设计工具 - Figma

  价格 - 个人免费

  - 团体每人12美元/月

  简介：Figma是第一个实时协作的界面设计工具。它有三个难能可贵的功能：实时协作，矢量网络和版本控制。Figma就像是基于浏览器并具有实时协作功能的Sketch。

  个人体会：我起初对Figma的用户体验是持怀疑态度，因为它是一个基于浏览器的界面设计工具。但后来发现用起来还是很灵敏的。而且，浏览器的工具的优点在于接收方不需要安装任何东西，只需要在电脑上打开浏览器便可参与项目。Figma文件可以在Mac、Windows、Linux和移动设备（仅限查看）上使用。

  "There is only one type of designer — the type that cares about type." -- Rohan Nanavati

  好用的网站设计助手

  1. Canva（免费）

  非常适合设计定制设计卡片，博客图片和各种社交媒体图片（对于Twitter，Facebook等）。 非常好用。

  2.Zeplin (免费）

  Zeplin 是面向设计师和前端工程师的标注、Style Guide、备注文档与简单的团队协作工具。

  结语

  以上，是我个人总结的最好用的网站设计工具。虽然并不是都免费，但以经验之谈，这些工具都是你创建属于自己的网站的好伙伴。希望对您的网站设计有帮助，也期待您在2018年设计出自己独特的网站。

  展开

• 本页内容为企业、个人自主上传或来源网络，所有资料仅供用户参考；我单位不对其版权负责、不保证亦不表示本网的资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。