自：功夫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中使用稍有不足。另外其分為商業和非商業，兩者使用需要注意，總體來說也是可以接受的！