UI灵感库分类规范

「☆」「Crab D」のイラスト [pixiv].png

作为UI设计师，无论是在日常的工作过程中，还是在收集灵感的时候，都会跟各种组件打交道。

由于起步时间的关系，很多组件的命名都是英文名，在国内并没有一个统一的叫法。而且对于很多强迫症患者来说，sketch中图层、symbol等等的命名，用英文比中文要整齐的很多。

再加上，大部分网上分享的组件库，比如Apple的iOS、Google的Material Design2、Invision分享的模板等等，都是采用的英文的命名，所以我觉得了解组件的英文命名是很重要的一件事情。不仅可以帮助我们理解这些很棒的设计组件的设计速录，还可以帮我们建立自己的灵感资源库。

我想，你应该遇到过这样的时候，想找某些特定页面APP的参考，但是在网上却很难找到。这样是因为，网上出现的APP的截图只是很小很小的一部分，很多很精美的APP的截图，还是要靠自己亲自去手机上截图，并且精心整理，慢慢的就可以在自己本地搜索相关的内容，而不需要去网上搜索那些早就被搜索了千百遍的内容了。

但是，这样就有个问题出现了，我们应该怎么用什么样的方式整理自己的截图呢？

我也一直在苦恼这个问题，知道最近找到了一个很棒的网站Mobbin - Latest Mobile Design Patterns，这个网站收集了很多国外很多APP的截图，里面对截图有三个类型的分类。

APP.png

Pattern.png

Elements.png

我们可以结合这段时间很火的一个图片管理软件Eagle进行整理。

Eagle.png

我的思路是这样的，把每个APP的种类单独建一个文件夹，在该文件夹下建单一APP的子文件夹。比如音乐，文件夹下，可以建网易云音乐、虾米音乐、QQ音乐的子文件夹，在这些子文件夹中放入该APP的所有截图。

接下来，为这些截图打标签，也就是上面的页面类型和组件类型。这样的话，既可以针对到对应的APP，也可以用标签来检索，我们只要不断地按照这个规范慢慢的收集截图就好了，这样就会有我们自己专用的灵感库了。

我把这些组件的分类做成了思维导图，暂时只有文字版的，需要的可以点开大图右键保存。

APP收集目录（文字版）.png

之后还打算做个图文版的，给每个分类加上一个示例图，可以帮助你们更加好的理解这个分类的内容，做完之后还是会在这里更新。

希望这个内容对你们有所帮助~

「The Blue Crown」「アシマ」のイラスト [pixiv].png