自：功夫UX（ID：UX-Talk）

作者： LoveXiaoTao

互联网寒冬时代，设计师的竞争力越来越大，设计师们需要体现的核心技能与价值就越来越明显。那么我们如何在这个浮躁的时代，快速树立自己的标签，拥有一个很强的核心技能。对于设计师来说，想要脱颖而出就需要能获取到互联网第一手资料，然后不断去学习，提升自己的认知与眼界。

今天给大家分享的一些国外设计大神都在使用的灵感网站，除了我们日常经常看的Behance和Dribbble，同时这也是我经常关注的网站！

备注：文末有彩蛋

1. CodeMyUI

精选的网页设计和有代码的UI灵感。里面有很多视觉动效样式，都有代码，因此再也不用担心我们开发同学说这实现不了。

▲ 网址：https://codemyui.com/page/2/

2. Abduzeedo

abduzeedo 是一个每日设计灵感分享平台，里面每天都会精选全球顶尖的品牌、插画、UI、C4D等等作品分享。

▲ 网址：https://abduzeedo.com/tags/daily-inspiration

3. Collect Ui

每日UI灵感的平台。收集Dribbble最火热的UI界面，精心挑选14419个设计。里面分类齐全，几乎涵盖所有界面功能特征。

▲ 网址：http://collectui.com/challenges/checkout

4. Uisources

真正的设计灵感来自世界上设计最好的应用程序。很多人经常问我有么有好的app推荐， 那么今天这个网站分享全球最好的线上APP，左侧导航可以根据各类产品去搜索你想要的应用程序。

▲ 网址：https://www.uisources.com/apps

5. Mobbin.design

这里汇集所有最新，最好的移动应用优秀界面截图，基本都是国外优质应用，作为设计师，我们不能只盯着国内那几个应用，更多是需要跳出去，多看看国外的优质应用设计。

▲ 网址：https://mobbin.design/?ref=bookmarks.design

6. Land-book

设计馆藏最好，最精心收集的网站，里面有简历，其他优秀设计网址汇总，也有国外优质电商网站。

▲ 网址：https://land-book.com/gallery/portfolios?from=month&ref=bookmarks.design

7. Johnsonbanks

更新国外最新大厂的品牌网站，也是我最喜欢的一个网站，里面可以看到他们设计方向，品牌设计趋势，第一时间获取国外大厂动态。

▲ 网址：https://www.johnsonbanks.co.uk/

8.Muzli

这是google的一个拓展插件，muzli 非常好用，每天为你推荐各平台最新设计作品案例，设计师新闻，专业文章等等，有了他相当于拥有全网灵感合集。

▲ 网址：chrome-extension://glcipcfhmopcgidicgdociohdoicpdfc/index.html?button

9. Uimovement

这是一个动效分享设计平台，里面收集目前dribbble上面比较流行一些动效汇总，可以在左侧分类菜单找到自己想要的动效页面。

▲ 网址：https://uimovement.com/?ref=bookmarks.design

10. Siteinspire

一个CSS画廊和最好的Web设计灵感展示，拥有超过2500个网站。

▲ 网址：https://www.siteinspire.com/?ref=bookmarks.design

总结

今天吐血推荐自己平时每天都会看的设计灵感网站，人和人之间的差异就是认知的差异，在如今互联网浮躁的时代，静下心来做设计的设计师并不多。如何才能在设计师之间产生认知差异，那么就是谁先获取第一手资料，合理加以利用，谁就能把握住未来的机遇！

绍

今天给大家介绍一个非常优秀的Web端实用插件——lightGallery，它是一个用于在Web端制作精致的画廊（Gallery）的工具库，可用于原生、React.js、Vue.js、Angular以及支持TypeScript，Vue版本只支持到最新的Vue3的版本，在Vue2的版本中需要一些特殊手段！

Github

https://github.com/sachinchoolur/lightGallery

特性

• 现代化

lightGallery 采用最现代的技术构建而成，可实现最佳性能和质量。它支持所有现代浏览器，包括 IE 10 及更高版本。

• 模块化设计

采用模块化结构。轻松地创建你自己的模块，或分离你不想使用的模块。LightGallery有许多内置模块，如缩略图、缩放等。

• 移动端和桌面端都有良好的优化

lightGallery针对手机和PC进行了高度优化，以获得原生的外观和体验，并实现最佳性能。支持移动设备的单独设置，以进一步优化。

• 高度可定制化

LightGallery附带了许多配置选项（100多个配置项），允许自定义插件而不影响核心代码。可以通过更新saas变量轻松自定义库的外观和体验

除了以上大致的特性，其包含的功能还有很多，比如：

• 触摸手势
• 触摸和拖动
• 虚拟幻灯片
• 动画缩略图
• 20多个动画
• 响应式图像
• 浏览器历史记录
• lightGallery支持，添加、编辑、删除幻灯片
• 支持外部视频
• 动态模式
• HTML5视频
• 旋转和翻转图像
• 自动播放、全屏等等
• 支持框架广泛

内联画廊

如何安装使用

如何使用在官方有详细的文档介绍，这里我们以Vue为例，其它框架可以自行参考文档

• 安装使用

npm install lightgallery
# 或者
yarn add lightgallery

如果安装失败，可以多尝试几次，以下是最简单的用法了

<template>
  <div>
    <lightgallery :onBeforeSlide="onBeforeSlide">
      <a href="img/img1.jpg">
        <img
          alt=".."
          src="img/thumb1.jpg"
        />
      </a>
      <a href="img/img2.jpg">
        <img
          alt=".."
          src="img/thumb2.jpg"
        />
      </a>
    </lightgallery>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Lightgallery from "lightgallery/vue";
export default defineComponent({
  name: "VueGallery",
  components: {
    Lightgallery,
  },
  setup() {
    function onBeforeSlide(detail) {
      const { index, prevIndex }=detail;
      console.log(index, prevIndex);
    }
    return { onBeforeSlide };
  },
});
</script>

以上是在Vue3中的写法，那么如果你一定要在Vue2中尝试，不如试试下面这种写法：

<template>
  <div class="app-container">
    <div id="lightgallery">
      <a href="image-6-lg.jpg">
        <img src="thumb-6.jpg" >
      </a>
      <a href="image-12-lg.jpg">
        <img src="thumb-12.jpg" >
      </a>
    </div>
  </div>
</template>

import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'

export default {
  name: 'VueApp',
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    const el=document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}

下面来一张demo中的效果截图

总结

lightGallery的的确确是一个非常优秀的插件，其精致的设计、丰富的功能、极致的性能和高度的可定制化都是其不得不提的优点，但是缺点也是有的，在vue2中使用稍有不足。另外其分为商业和非商业，两者使用需要注意，总体来说也是可以接受的！