合理设置栅格化与比例 让版式布局更友好

本文不适合采用天才设计（Genius Design）方法的人士。

有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度？

合理设置栅格化与比例 让版式布局更友好 继续阅读合理设置栅格化与比例 让版式布局更友好

网页APP间距的设计规范与规则

之前一直觉得色彩，图形，字体是 UI设计的三大构成，任何设计都是从这三大元素开始的，所有的 UI设计都是由这些构成的，但是却忽略了界面中空间的运用，也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程，这篇分享有助于我们处理好界面间距一致性问题，让设计更加统一，同时定义规范里面的原子设计方法，能完美融合。

继续阅读网页APP间距的设计规范与规则

技巧帖-mac 录像系统内声音 soundflower插件

最近见到好多人想内录Mac的声音无奈自带QuickTime或者其他录屏软件不能内录，那我来稍微说一下我当时折腾找出的方法。大神们应该都知道吧。

【soundflower】！
这是一个神奇的插件，可以将电脑的音频从电脑内部发出来【不是到外部】，这样在录入声音时，设备选择soundflower（2ch），就可以录入电脑声音了！

下载地址：Soundflower-2.0b2.dmg

富士RAW处理软件RAW FILE CONVERTER EX 2.0 官方中文版下载

Windows
AW FILE CONVERTER EX 3.0 powered by SILKYPIX (Ver.8.0.0.0) Installer for Windows 
官方下载 http://download.fujifilm.co.jp/pub/tools/silkypix3-win-8000-brvoawnx/RFCEX30Ins8000.exe

Mac
RAW FILE CONVERTER EX 3.0 powered by SILKYPIX (Ver.8.0.0.0) Installer for mac
官方下载 http://download.fujifilm.co.jp/pub/tools/silkypix3-mac-8000-gdxppuni/RFCEX30Ins8000.dmg

富士RAW FILE CONVERTER EX 2.0 
网盘下载：http://pan.baidu.com/s/1slHQEF7

主流的网页栅格化线 – 嵌入 graaf

Graaf 可以直接在页面上显示栅格线，而且可以自定义栅格结构，大大减少前端或设计师检测页面的烦恼。
工具名称：graaf
工具地址：http://graaf.space/

自带多个栅格样式

目前自带了有10多个流行的栅格样式，只需要替换对应样式表名称就行，如下图，如果你需要 Bootstrap 的栅格，就点击 bootstrap.css 就能看到样式表链接，然后直接嵌入网页即可。 继续阅读主流的网页栅格化线 – 嵌入 graaf

让指定区域背景图像高斯模糊Nice! CSS

在网页设计中很多时候我们只看到半透明效果的层级效果，然而半透明+模糊背景，这种超漂亮的视觉却很少见，其中一个原因就是实现方式有难度，难道真这么难实现吗？No~ 现在只需要用 CSS 也能实现了！

今天分享的 Blur 案例就是使用纯 CSS 实现，可以指定某个区域、元素的背景模糊，这效果真的比普通的半透明漂亮多了，目前作者还写了多种模糊特效，能满足不同需求的你。

继续阅读让指定区域背景图像高斯模糊Nice! CSS

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑，如果直接发 JPG 图给客户，会影响设计质量。为了让网站设计效果图更加真实，最近把设计提案直接做成 Web 版，模拟浏览器真实视觉效果，同时能自动识别是否为视网膜显示屏，并自动切换为 2X 或 3X 图像。

继续阅读CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

Sketch常用小技巧帮助提高工作效率

一、文件整理小技巧

sketch 在使用过程中，图层往往会比较多且一旦不注意整理的话，就会变得很混乱。如何快速整理好，快速输出成为设计师们的一大需求，我在使用过程中觉得有几个小技巧还挺实用：

当画板、文件夹很多又都是打开的情况下，要一个一个收起，非常麻烦。这时可以选择 View – Layer List – Collapse All Groups 快速收起所有画板，便于选择。

设计过程中，可能经常会复制很多飞机稿与设计稿混在一起，由于 sketch 画板之间缺乏标记，又不能对画板进行文件编组操作，所以往往很多时候要批量操作需要的画板时就会比较痛苦。此时其实用一个非画板的对象（可以是图形或者图片等）作为间隔，用来区分，就会很方便选择了。
继续阅读Sketch常用小技巧帮助提高工作效率