整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于剛開(kāi)始學(xué)習(xí)設(shè)計(jì)的人來(lái)說(shuō)，往往不容易駕馭好顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外，多學(xué)習(xí)一些著名網(wǎng)站的用色方法，對(duì)于我們制作出好的色彩搭配可以起到事半功倍的作用。總結(jié)了一些著名網(wǎng)站的顏色搭配方法，這些方法可以讓我們的學(xué)習(xí)少走彎路，快速提高我們的設(shè)計(jì)水平。
1.愛(ài)集網(wǎng)
https://aiji66.com/color/
“愛(ài)集網(wǎng)”是一家專注創(chuàng)意工作者(設(shè)計(jì)師、攝影師、畫(huà)師、藝術(shù)家等)的靈感方案產(chǎn)品 ，匯集全球?qū)I(yè)設(shè)計(jì)資源；改站內(nèi)“配色集”種類豐富，搜索功能方便齊全，自動(dòng)調(diào)整色彩搭配比例的功能，讓你隨心所欲找到自己喜歡的色彩搭配！
2.Fashion Trendsetter
http://www.fashiontrendsetter.com/v2/
幫你關(guān)注每年最流行的色彩搭配
Fashion Trendsetter是一家?guī)湍汴P(guān)注每年最流行的色彩搭配的網(wǎng)站，尤其是對(duì)于服飾設(shè)計(jì)方面有需求的你們可以參考！
3.MaterialUI
https://www.materialui.co/
MaterialUI能夠快速的幫助設(shè)計(jì)師們找到自己喜愛(ài)的配色方案，內(nèi)容豐富，配色種類齊全！
4.ColorDrop
https://colordrop.io/
ColorDrop讓你在尋找設(shè)計(jì)方案成為信手拈來(lái)的事情！
5.CssWinner
https://www.csswinner.com/colorsearch/blue
Css畫(huà)廊，可以根據(jù)右側(cè)顏色塊展現(xiàn)最流行的網(wǎng)頁(yè)！！值得推薦的網(wǎng)站！
看完以上內(nèi)容，還怕沒(méi)有靈感沒(méi)有方案嗎？？
私信留言給小編獲取更多的配色資源！記得關(guān)注和轉(zhuǎn)發(fā)！
自：功夫UX（ID：UX-Talk）
作者： LoveXiaoTao
互聯(lián)網(wǎng)寒冬時(shí)代，設(shè)計(jì)師的競(jìng)爭(zhēng)力越來(lái)越大，設(shè)計(jì)師們需要體現(xiàn)的核心技能與價(jià)值就越來(lái)越明顯。那么我們?nèi)绾卧谶@個(gè)浮躁的時(shí)代，快速樹(shù)立自己的標(biāo)簽，擁有一個(gè)很強(qiáng)的核心技能。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，想要脫穎而出就需要能獲取到互聯(lián)網(wǎng)第一手資料，然后不斷去學(xué)習(xí)，提升自己的認(rèn)知與眼界。
今天給大家分享的一些國(guó)外設(shè)計(jì)大神都在使用的靈感網(wǎng)站，除了我們?nèi)粘＝?jīng)常看的Behance和Dribbble，同時(shí)這也是我經(jīng)常關(guān)注的網(wǎng)站！
備注：文末有彩蛋
1. CodeMyUI
精選的網(wǎng)頁(yè)設(shè)計(jì)和有代碼的UI靈感。里面有很多視覺(jué)動(dòng)效樣式，都有代碼，因此再也不用擔(dān)心我們開(kāi)發(fā)同學(xué)說(shuō)這實(shí)現(xiàn)不了。
▲ 網(wǎng)址：https://codemyui.com/page/2/
2. Abduzeedo
abduzeedo 是一個(gè)每日設(shè)計(jì)靈感分享平臺(tái)，里面每天都會(huì)精選全球頂尖的品牌、插畫(huà)、UI、C4D等等作品分享。
▲ 網(wǎng)址：https://abduzeedo.com/tags/daily-inspiration
3. Collect Ui
每日UI靈感的平臺(tái)。收集Dribbble最火熱的UI界面，精心挑選14419個(gè)設(shè)計(jì)。里面分類齊全，幾乎涵蓋所有界面功能特征。
▲ 網(wǎng)址：http://collectui.com/challenges/checkout
4. Uisources
真正的設(shè)計(jì)靈感來(lái)自世界上設(shè)計(jì)最好的應(yīng)用程序。很多人經(jīng)常問(wèn)我有么有好的app推薦， 那么今天這個(gè)網(wǎng)站分享全球最好的線上APP，左側(cè)導(dǎo)航可以根據(jù)各類產(chǎn)品去搜索你想要的應(yīng)用程序。
▲ 網(wǎng)址：https://www.uisources.com/apps
5. Mobbin.design
這里匯集所有最新，最好的移動(dòng)應(yīng)用優(yōu)秀界面截圖，基本都是國(guó)外優(yōu)質(zhì)應(yīng)用，作為設(shè)計(jì)師，我們不能只盯著國(guó)內(nèi)那幾個(gè)應(yīng)用，更多是需要跳出去，多看看國(guó)外的優(yōu)質(zhì)應(yīng)用設(shè)計(jì)。
▲ 網(wǎng)址：https://mobbin.design/?ref=bookmarks.design
6. Land-book
設(shè)計(jì)館藏最好，最精心收集的網(wǎng)站，里面有簡(jiǎn)歷，其他優(yōu)秀設(shè)計(jì)網(wǎng)址匯總，也有國(guó)外優(yōu)質(zhì)電商網(wǎng)站。
▲ 網(wǎng)址：https://land-book.com/gallery/portfolios?from=month&ref=bookmarks.design
7. Johnsonbanks
更新國(guó)外最新大廠的品牌網(wǎng)站，也是我最喜歡的一個(gè)網(wǎng)站，里面可以看到他們?cè)O(shè)計(jì)方向，品牌設(shè)計(jì)趨勢(shì)，第一時(shí)間獲取國(guó)外大廠動(dòng)態(tài)。
▲ 網(wǎng)址：https://www.johnsonbanks.co.uk/
8.Muzli
這是google的一個(gè)拓展插件，muzli 非常好用，每天為你推薦各平臺(tái)最新設(shè)計(jì)作品案例，設(shè)計(jì)師新聞，專業(yè)文章等等，有了他相當(dāng)于擁有全網(wǎng)靈感合集。
▲ 網(wǎng)址：chrome-extension://glcipcfhmopcgidicgdociohdoicpdfc/index.html?button
9. Uimovement
這是一個(gè)動(dòng)效分享設(shè)計(jì)平臺(tái)，里面收集目前dribbble上面比較流行一些動(dòng)效匯總，可以在左側(cè)分類菜單找到自己想要的動(dòng)效頁(yè)面。
▲ 網(wǎng)址：https://uimovement.com/?ref=bookmarks.design
10. Siteinspire
一個(gè)CSS畫(huà)廊和最好的Web設(shè)計(jì)靈感展示，擁有超過(guò)2500個(gè)網(wǎng)站。
▲ 網(wǎng)址：https://www.siteinspire.com/?ref=bookmarks.design
總結(jié)
今天吐血推薦自己平時(shí)每天都會(huì)看的設(shè)計(jì)靈感網(wǎng)站，人和人之間的差異就是認(rèn)知的差異，在如今互聯(lián)網(wǎng)浮躁的時(shí)代，靜下心來(lái)做設(shè)計(jì)的設(shè)計(jì)師并不多。如何才能在設(shè)計(jì)師之間產(chǎn)生認(rèn)知差異，那么就是誰(shuí)先獲取第一手資料，合理加以利用，誰(shuí)就能把握住未來(lái)的機(jī)遇！
今天給大家介紹一個(gè)非常優(yōu)秀的Web端實(shí)用插件——lightGallery，它是一個(gè)用于在Web端制作精致的畫(huà)廊（Gallery）的工具庫(kù)，可用于原生、React.js、Vue.js、Angular以及支持TypeScript，Vue版本只支持到最新的Vue3的版本，在Vue2的版本中需要一些特殊手段！
https://github.com/sachinchoolur/lightGallery
lightGallery 采用最現(xiàn)代的技術(shù)構(gòu)建而成，可實(shí)現(xiàn)最佳性能和質(zhì)量。它支持所有現(xiàn)代瀏覽器，包括 IE 10 及更高版本。
采用模塊化結(jié)構(gòu)。輕松地創(chuàng)建你自己的模塊，或分離你不想使用的模塊。LightGallery有許多內(nèi)置模塊，如縮略圖、縮放等。
lightGallery針對(duì)手機(jī)和PC進(jìn)行了高度優(yōu)化，以獲得原生的外觀和體驗(yàn)，并實(shí)現(xiàn)最佳性能。支持移動(dòng)設(shè)備的單獨(dú)設(shè)置，以進(jìn)一步優(yōu)化。
LightGallery附帶了許多配置選項(xiàng)（100多個(gè)配置項(xiàng)），允許自定義插件而不影響核心代碼。可以通過(guò)更新saas變量輕松自定義庫(kù)的外觀和體驗(yàn)
除了以上大致的特性，其包含的功能還有很多，比如：
內(nèi)聯(lián)畫(huà)廊
如何使用在官方有詳細(xì)的文檔介紹，這里我們以Vue為例，其它框架可以自行參考文檔
npm install lightgallery
# 或者
yarn add lightgallery如果安裝失敗，可以多嘗試幾次，以下是最簡(jiǎn)單的用法了
<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中的寫(xiě)法，那么如果你一定要在Vue2中嘗試，不如試試下面這種寫(xiě)法：
<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)
}
}
下面來(lái)一張demo中的效果截圖
lightGallery的的確確是一個(gè)非常優(yōu)秀的插件，其精致的設(shè)計(jì)、豐富的功能、極致的性能和高度的可定制化都是其不得不提的優(yōu)點(diǎn)，但是缺點(diǎn)也是有的，在vue2中使用稍有不足。另外其分為商業(yè)和非商業(yè)，兩者使用需要注意，總體來(lái)說(shuō)也是可以接受的！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
