UI灵感库分类规范

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

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

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

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

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

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

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

  • 1、APP类型
  • 2、页面类型
  • 3、组件类型
APP.png
Pattern.png
Elements.png

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

Eagle.png

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

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

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

APP收集目录(文字版).png

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

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

「The Blue Crown」「アシマ」のイラスト [pixiv].png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,714评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3 119
  • 常常被一种不合时宜的情绪偷袭。 比如,在某个气氛极好的家宴场合,会突然意识到,即便是那样的亲近,都只是一个你不能完...
    和尘之尘阅读 245评论 2 4
  • 薄暮悄悄爬上高树,钻入草缝。成群的白鸭子上了岸,抖动身体甩干身上的湿水,然后扭动着胖嘟嘟的身躯昂首离开。 卞州桥上...
    飞猫君阅读 326评论 0 1
  • 那日,我背起行囊 去到通往异国的车站 车站的这一头,是我和背包 车站的那一头,是挚爱父亲 那时,多想与父亲一起回归...
    沐日阅读 222评论 0 0