15款新鲜出炉的国外实用网页设计工具

首页> 缘震优势

缘震优势

2015-11-13 00:00:00

在信息爆炸的今天，设计师要通过网络寻找设计素材和工具是一件简单的事情，相应的，要找到真正可靠且素质优秀的素材，也越发的不容易。在海量的网站中寻找一个符合需求的素材，花费在搜索和筛选上的时间也越来越长。这种情况使得今天这样的设计工具/素材推荐类的文章与合集显得更有意义，也弥足珍贵。

由于网页设计师和开发者之间的界限越来越模糊，两者所用的工具和素材的交叉重叠的情况也非常普遍。今天所推荐的这15项全新的工具/素材里，应该有很多都值得网页设计从业者们收入囊中。这当中涵盖了设计类应用、框架、分析工具、栅格系统等多种类别，单把它们放到一起，就足以组成一个网页设计师的日常用工具合集了。接下来我们具体看看这些新工具能帮你做哪些事情。

1. Frontify

Frontify 可以让你在5分钟内创建一套漂亮而完备的风格指南！这个在线工具有趣而简单，让你维护品牌风格和样式快速而方便。由于Frontify 优秀的用户体验设计，你可以很快上手，即使你有专业的需求，Frontify 的说明文档也可以引导你实现一些更细致更专业的东西。

2. Flarum

Flarum 是一套简约易用的开源论坛系统。如果你需要一个相对简单的论坛网站的话，可以考虑Flarum，它界面简单且可以快速上手，让你更多的专注于话题讨论。Flarum的论坛页面滚动加载流畅，无需等待页面加载。

3. Lightning Design Systems

这个名为闪电设计系统的工具专注于构建体验优秀的企业级APP。在这套系统的支持之下，你可以快速地对整个界面进行深度定制，保持整个界面保持高度的一致性而无需让工程师在此耗费更多精力，你所需要做的就是下载那些无平台限制的CSS框架，然后开工就可以了。你可以参考这套系统的详细说明作出符合SalesForce生态的优质APP，轻松地调用SalesForce的核心视觉组件和交互模式，拿出最佳的方案。

4. Rucksack

Rucksack 是一款有趣的CSS工具，让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的，模块化设计，没有冗余，运行起来飞快。将Rucksack融入到你的开发流程是很简单的，Rucksack对绝大多数的工具都有相应的插件。由于它是基于PostCSS来构建的，所以它同其他的CSS处理工具都能很好的兼容，甚至能够同Stylus直接协同。

5. GridLayout

GridLayout是一款轻量级的栅格系统，用以制作水平滚动或者垂直滚动的Web应用，并且能够兼容旧版的浏览器。如果你需要创建复杂的布局，并且需要对旧版的浏览器进行兼容，选择GridLayout是很不错的。这套工具涵盖了1KB大小的CSS文件和大概0.5KB的JS文件，如果你只需要支持更为现代的浏览器，最好不要使用Flexbox。这个工具是基于MIT的协议来分发的。

6. Bonsai

Bonsai 是一款为自由设计师所准备的工具，用来创建、签署和存储工作合同的工具，并且可以协助付款、托管。目前这个签署协议的模块已经完善并且发布了，而支付和托管的部分还处于内测阶段。现在Bonsai对于专业的设计人员的工作合同签署的支持已经做的很不错了，尤其是支付方式的规定、知识产权保护等环节。

7. Apostrophe

Apostrophe 是一款设计驱动下、基于Node.js 和MongoDB的内容管理系统。这套CMS为你提供了灵活的工具，你可以以此为基础设计内容向的网站，不论是简约风还是繁复的结构都可以轻松Hold住。这套系统的开发者相信，内容编辑应该是简单而易用的，也就是在这想法的驱动下Apostrophe的编辑体验设计的非常容易上手，网站编辑也可以轻松掌控网站内容。

8. Grid.Guide

Big Bite 的员工发现计算栅格的宽度是一件非常恼人的事情，尤其是在嵌套结构下。正是在这种需求的驱动下，他们发明了这款Grid.Guide工具。这款工具会根据最大宽度和列数来帮你计算可能的排列组合，生成对应的PNG文件，让你可以直接托拽到相应的工具中使用。更重要的是，Grid.Guide是完全免费的！

9. Quantity Queries

Quantity Queries 是一款帮你进行数量查询的工具。

10. Timber

Shopify Timber 是一款前端框架，用于快速便捷地构建Shopify主题。其实从广泛意义上来说这是一款可以广泛应用的主题制作工具，并不全限制于在Shopify中运用。不论是经验丰富的设计师和前端还是新手都可以灵活运用，其中包含了模板、标记、模块和CSS框架，根据你的需求调用就好了。

11. Now UI Kit

InVision所提供的这套Now UI Kit 是一套堪称完美的跨平台UIKit，可以用于网页设计、平板和手机的界面，当然，最重要的是它是免费的。其中包含了52个完整的设计模板、35款可以自定义的图标以及可以运用在各种界面中超过180个UI组件。

12. Unsplash

我们其实已经不是第一次推荐Unsplash.it ，它是用于网页中的图片占位符，其中所用的图片是来自于网站Unspalsh.com，这个网站提供了许多高品质的图片，这也使得Unsplash.it的效果非常不错。

13. Gitup

Gitup 是一款为Git所准备的图形化客户端。在Gitup的协助下你可以便捷的提交、创建新的分支、合并等等等等。Gitup 赋予了Git全新的交互方式，让代码管理更加迅速、安全、无痛。

14. Color Hunt

ColorHunt 包含了一系列漂亮炫酷的色彩组合，网站会每天更新配色方案，并且根据浏览数排列出最漂亮的配色方案。

15. TinyCon

TinyCon 是一款管理Favicon 的库，借助它可以方便地管理Favicon和弹出框。

网站安全科普介绍如何防止网站被黑被攻击

网站安全.jpg

作为一名网络安全工程师，“网站安全”这个词似乎离生活有些遥远，平日里很多人开启计算机最多就是登陆网站、浏览网站，至于网站安不安全，却从未关注过。近些年来，网络安全相关话题已经引起了社会的广泛关注，还记得去年暑期大火的偶像连续剧《亲爱的热爱的》讲述了男主希望为中国拿下CTF大赛冠军的梦想之路，CTF在网络安全领域中指的是网络安全技术人员之间进行技术比拼的一种比赛形式，当然，这部剧的成功之处更在于让许多年轻人对网络安全领域产生了兴趣。本文旨在从一名网络安全工程师的角度，用更加通俗易懂的话语，介绍网站安全的相关知识。

一、网站安全的定义

百度词条的定义为网站安全是指出于防止网站受到黑客入侵者对其网站进行挂马，篡改网站源代码，被窃取数据等行为而做出一系列的安全防御工作，在我的理解中，网站安全就是当有人攻击你的网站时，你所作出的防御，又或者是事先对网站进行的一系列防止别人攻击的安全防护部署。由此看来，网站安全对于网站的正常运营具有重要意义。

二、网站安全的重要性

为什么网站安全如此重要呢？在日新月异的当代社会，互联网成为新兴热门的产业，网站技术发展迅速，渗透到人类生活的各个方面，越来越多的事情需要通过互联网来完成，与此同时，网站安全问题也就日益突出，但绝大多数的网站开发与建设公司只考虑正常用户的稳定使用，而对于网站安全方面了解甚少，发现网站安全存在问题和漏洞，其修补方式只能停留在页面代码的删除或者是恢复网站备份，很难针对网站具体的漏洞原理对源代码进行修复。但黑客对漏洞具有敏锐的洞察力，网站存在的这些漏洞就会被挖掘出来，成为黑客们直接或间接获取利益的机会。

大多数网站运营者对网站的价值认识仅仅是一台服务器或者是网站的建设成本，认为对这个网站增加的超出其成本的网站安全防护服务觉得价格有点高。事实上，网站遭受攻击之后，网站流量损失以及客户流失，订单流失的经济损失已远远超过网站安全服务的费用。所以只有网站安全了，才能给您带来更高的收益。不幸的是，实践当中有相当一部分网站负责的单位、人员，只有在网站遭受攻击受损严重后才能意识到这一点。目前国家针对于网站的安全做了信息安全等级保护，如果您的网站没有达到国家的安全标准，出现网站漏洞，被黑客攻击篡改等情况，会立即收到网警部门的通知，严重的会罚款以及造成重大影响达的负刑事责任。

笔者搜集到的网站安全事件主要有以下几类，

1、网站首页被篡改成彩票的内容，网站被挂马，被植入黑链。

2、修改支付平台订单状态，将未支付状态篡改成已支付，给支付平台和商户造成巨大财产损失和名誉损失。

3、网站运营方的客户信息被泄露，影响公司信誉。

4、APP中的用户数据被篡改，导致用户账户被随意提现。

5、劫持网站，导致用户点击进入网站随即跳转到不良网站。

以上几类问题都十分严峻，一旦发生，将会给公司带来难以估量的经济损失。因此，笔者建议，在建设网站初期除了进行网站功能设计之外，还需要联系具有丰富从业经验的网站安全公司进行渗透测试服务以及网站安全加固服务，而不是遭受损失之才才意识到事情的严重性。

三、网站安全工作如何开展

通常网站安全工作是这样开展的：

1、当接收到客户网站被攻击的消息后，网站安全工作人员首先会根据客户的描述确定网站是否被恶意攻击，随之迅速反应出网站的哪几部分可能是被攻击的对象，如服务器被攻击、首页代码被篡改、网站被劫持跳转等。

2、逐一排查可能被攻击的地方并进行漏洞修复，从而将客户网站存在的安全问题消除。

3、本着对客户负责的态度，从底层网站源代码根源入手，对客户网站的安全进行加固服务，仔细检查网站存在的漏洞，对每个文件代码都进行详细的人工安全审计，使客户网站真正变得安全，让黑客无处下手，帮助客户网站走的更远。