一起看看作品欣賞，感受這些小元素在設(shè)計中的呈現(xiàn)效果。

作者：Alzea Arafat

更多作品：https://dribbble.com/alzea/shots

以上僅為作者部分作品，更多作品可訪問作者的 Dribbble 查看。

素材  分享 

以上作品是不是還不錯，為了方便大家學習交流，作者特意分享了自己作品中的部分素材文件。文件格式為 figma ，大家可以下載自行研究學習。

下載地址：https://www.figma.com/community/file/890095002328610853

部分素材截圖示意

d

附加  分享 

文末再給大家分享一組超級可愛的三維字母設(shè)計素材，有點像是長氣球拉伸出來的感覺。

這是一個三維藝術(shù)字體素材平臺，擁有多種不同的三維字母風格，滿足大家不同的需求，平臺提供免費和付費兩種選擇。

鏈接：https://www.artify.co/3d-lettering

a

小結(jié) 

素材不在于多，而在于質(zhì)量，希望本期的分享能夠給大家?guī)韼椭?！后續(xù)也會繼續(xù)給大家分享更多的素材資源。

素材可以在短時間內(nèi)提高我們的工作效率，但是卻不是長久之計，能力的提升離不開磨練。獨立完成設(shè)計才能不斷提高我們的設(shè)計價值，希望大家能夠養(yǎng)成動手的習慣。

#1.Airbnb Design Language

airbnb 設(shè)計團隊構(gòu)建一套設(shè)計語言和執(zhí)行路徑的思考，非常值得大家學習。他們還談到通過原子思維構(gòu)建基礎(chǔ)層規(guī)則時的一些利弊，以及如何打破這樣的規(guī)則，建立一個可發(fā)展性的基礎(chǔ)層組件，拓展應用到全局。

地址：https://airbnb.design/building-a-visual-language/

 

#2.Starbucks Brand Guide

星巴克品牌視覺指導手冊，里面涵蓋一些字體、排版、攝影、插畫、色彩等一系列標準。星巴克設(shè)計我一直很喜歡，包括他們家的周邊產(chǎn)品設(shè)計都是非常有設(shè)計感。

地址：https://creative.starbucks.com/color/

 

#3.HarmonyOS 

華為的鴻蒙OS系統(tǒng)，最接近我們的產(chǎn)品的設(shè)計語言，強烈推薦，我想設(shè)計師也是最容易看得懂的設(shè)計系統(tǒng)。

算是媲美Materials Design的一套國內(nèi)權(quán)威性設(shè)計語言系統(tǒng)，設(shè)計體系單元拆分很詳細。

地址：https://developer.harmonyos.com/cn/design

 

#4.Salesforce Lightning 

Salesforce Lightning 設(shè)計系統(tǒng)創(chuàng)建于 2015 年，為在 Salesforce 生態(tài)系統(tǒng)中設(shè)計企業(yè)應用程序建立了原則和最佳實踐。它不僅僅只專注在設(shè)計上，又讓設(shè)計師專注于用戶體驗、交互和設(shè)計流程。

地址：https://www.lightningdesignsystem.com/

 

#5.Spectrum Design system

Spectrum 自 2019 年開始向公眾開放，它定義了 Adobe 應用程序系列的通用體驗，非常值得大家去了解下，涵蓋了他們從頂層原則、到基礎(chǔ)層原子組件搭建以及設(shè)計模式應用。

地址：https://spectrum.adobe.com/

 

#6.Fluent Design System

Fluent 是一個開源的跨平臺設(shè)計系統(tǒng)，可為設(shè)計上和開發(fā)提供創(chuàng)建引人入勝的產(chǎn)品體驗所需的框架——包括可訪問性、國際化和性能。

地址：https://www.microsoft.com/design/fluent/#/ios

 

#7.Carbon Design System 

Carbon designsystem 碳原子設(shè)計系統(tǒng)，是IBM旗下針對B端出的一套網(wǎng)頁端設(shè)計規(guī)范語言，里面詳細羅列出設(shè)計語言基礎(chǔ)層定義思路，設(shè)計組件化定義以及后面的設(shè)計模式及資源。

一些網(wǎng)格間距系統(tǒng)的規(guī)則定義

地址：https://www.carbondesignsystem.com/

#8.Audi Design System 

1.水墨風

首先我們先看這兩張圖，傳統(tǒng)的水墨風能看出來雖然設(shè)計方式不一樣。

但卻是用的同一種風格或者說是技法，利用墨跡塑造出文字、圖形或者一種優(yōu)美的形態(tài)。

我們可以提取出這樣的風格特點，使用毛筆墨跡簡單演示下這種做法。

是不是很簡單，將風格提取出來會有效的提升設(shè)計效率，拯救你的沒思路。

2.酸性風

接著我們再看這兩張設(shè)計，也是現(xiàn)在很流行的酸性風格，提取這個風格的特點。

流體、哥特文字、高飽和度漸變、金屬或水印材質(zhì)以及網(wǎng)格等，我們就可以做出類似這種風格特性的海報來。

3.賽博風

賽博風格的特點提取在于夜景充滿各種LED霓虹燈光和牌匾的高樓大廈加上一些高科技例如顯示屏、虛擬場景等于現(xiàn)實的交錯。

將這些特點提取出來就可以做出這種風格特性的海報來，怎么樣，是不是比想的頭禿容易許多！

當聽說過幾天要七夕，我想男生們應該會集體跑到廁所，拿出比臉還干凈的錢包時，眾人扎堆哭暈在廁所里。

并掏出省吃儉用的一張撕成6小半的廁紙對著馬桶禱告上天能晚一些到來?。ㄖ攸c數(shù)學題要考：請問一張130X190mm的廁紙是如何可以撕成6半并能在擦腚的同時還不碰到手指呢？請在留言區(qū)回答?。?

案例分析

最后用這個案例來實(提)操(醒)演(禮)示(物)的時候到了！

–

版式：人物只占據(jù)畫面中的一小部分，主體都以文字作為圖形塑造出場景來形成與人物之間的一個對比關(guān)系。

對比關(guān)系：就是原本同樣大小的物體與文字，嘗試放大文字，縮小物體大小，并讓物體與文字之間的內(nèi)容有一定的連接，這時候就會形成非常鮮明的對比關(guān)系，這樣的對比關(guān)系會造成視覺上的沖突和層次感。

空間：畫面中看上雜亂的文字其實都有拉出一定的遠近與左右距離，以此來展現(xiàn)空間的豐富和律動感。

質(zhì)感：放大圖片可以看出來，文字的質(zhì)感的是由地面陰影、光度、文字遮擋、明暗的過度造成的。

實操過程–七夕海報制作

結(jié)合剛才所分析的版式、空間、質(zhì)感進行提取風格，我們就能得到的同類型的七夕節(jié)海報。

備注：文章底部，原文連鏈接，有此視頻湊操作步驟可觀看。

原文地址：修先森撩設(shè)計

作者：修先森

轉(zhuǎn)載請注明：學UI網(wǎng)>拯救沒思路系列，試試提取風格

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

01.前言

如今，隨著市場競爭日益激烈，“轉(zhuǎn)化難”也變成大家特別關(guān)注的問題，其實需要提升用戶轉(zhuǎn)化的場景很多，每個場景都有影響用戶心理的關(guān)鍵因素，那么設(shè)計師如何做，才能助力用戶轉(zhuǎn)化呢？下面結(jié)合省錢會員項目，聊聊如何抓住用戶心理，從而提升用戶轉(zhuǎn)化。

02.背景分析

最近這段時間，我們引入了很多新的運營玩法，跳出之前單一的營銷方式，將玩法串聯(lián)。我們通過省錢會員卡，打造運營體系的玩法矩陣，提升用戶轉(zhuǎn)化；

省錢會員卡是什么呢？是對0元購、百億補貼以及100+的生活權(quán)益進行資源整合；

用戶敏感點：根據(jù)以往“免費領(lǐng)”運營活動的數(shù)據(jù)，了解到用戶對價格很敏感；

03.目標用戶分析

在做用戶轉(zhuǎn)化之前，我們必須找到精準的目標用戶并對其進行分析，這樣才能精準抓住用戶心理，做到更好的轉(zhuǎn)化。

下面我們可以從用戶不同階段的轉(zhuǎn)化進行分析，其中用戶分成三類，分別是強需求用戶、潛在型用戶以及弱需求用戶；階段分為三個節(jié)點，分別是激發(fā)興趣、視覺感知和觸發(fā)行為；

首先是強需求用戶，用戶在視覺感知信息觸達階段，需求已經(jīng)滿足，完成轉(zhuǎn)化；其次是弱需求用戶，這一部分用戶，不管如何刺激，都難以滿足，所以這兩類用戶暫時先不考慮；而目前階段最主要考慮的是潛在型用戶，這一類用戶在視覺感知到觸發(fā)行為的階段，我們需要抓住用戶心理，從而促成轉(zhuǎn)化。因此目標用戶是視覺感知到觸發(fā)行為這個階段的潛在型用戶；那接下來需要怎么做呢？

04.思考模型

在設(shè)計的過程中，我們用到了設(shè)計策略模型“CST法則”，什么是CST法則？“CST法則”是以“視覺影響感知，感知影響行為”作為基礎(chǔ)理念，以“抓住感知，強化興趣，觸發(fā)行為”作為核心內(nèi)容的設(shè)計方法。下面我們將以這個模型來分析，設(shè)計過程中抓住哪些心理因素的點，來促成用戶轉(zhuǎn)化的。

05.影響用戶心理因素

我們通過“CST法則”得到了促使用戶轉(zhuǎn)化的三個點：抓住感知、強化興趣、驅(qū)動購買。我們在這三個點上設(shè)置了多個用戶心理影響因素，從而促使用戶完成轉(zhuǎn)化。

· 抓住感知=抓住“優(yōu)惠”感知

首先抓住用戶的權(quán)益感知，以省錢卡核心內(nèi)容的“權(quán)益優(yōu)惠”作為與用戶有共鳴的元素，更容易抓住用戶的感知。我們在這嘗試做了ab版的兩種表達方式。圖中對比之后發(fā)現(xiàn)，左圖中將優(yōu)惠提煉出來，更能突出權(quán)益的優(yōu)惠力度，聚焦用戶注意力，而右圖相對來說，優(yōu)惠感知更弱一些；

在會員購買頁中權(quán)益模塊上，也做了ab版的嘗試，對比一下：清晰度上，左邊的去掉多余的裝飾元素，將權(quán)益信息降噪展示，調(diào)理清晰，讓用戶有章可循；匹配度上，用色彩來區(qū)分權(quán)益分類，讓用戶快速瀏覽的時候，更直觀清晰的感知權(quán)益的構(gòu)成，也與用戶使用場景（娛樂、影音、餐飲出行等）多樣性的預期相匹配； 

· 強化興趣點=強化價格敏感點

我們以用戶感興趣的“價格”作為強化的視覺元素，提升用戶的興趣點；其中在會員補貼專區(qū)篩選出超值產(chǎn)品，價格補貼前后的對比以曲線來呈現(xiàn)，強化價格的變化；右圖詳情頁中，對會員模塊的價格進行單獨設(shè)計，從而來強化會員價格的氛圍感；

· 驅(qū)動行為=驅(qū)動購買

最后從影響用戶心理的因素：心理賬戶和從眾心理兩點進行分析；

何為“心理賬戶”呢？

“心理賬戶（Mental Accounting）”是芝加哥大學行為科學教授理查德·塞勒（Richard Thaler）提出的概念。心理賬戶也是一種有趣的現(xiàn)象。簡單來說，人們會把對物品分類的習慣，用于錢和資產(chǎn)上，在頭腦中為他們建立各種各樣的賬戶。比如說，我們會把買生活用品的錢放在生活賬戶，買禮物的錢歸到情感開支賬戶，旅游的錢歸到享樂休閑賬戶等等。那么心理賬戶的存在，不僅影響著投資決策，也在日常生活中的各種消費決策產(chǎn)生重要的影響；

比方說打撲克，以5元為賭注，然后手氣爆棚的一路贏了500元，但是最后都輸光了，那么在人們心理是輸了多少錢？這時候在人們心理上只感覺輸了5元錢，但其實應該是505元，因為人們沒有把意外得來的錢歸為自己財產(chǎn)，同時對意外得來的錢敢于去冒風險。

我們要善用“心理賬戶”，創(chuàng)造一筆新的心理賬戶，讓用戶心甘情愿的掏錢。其中在優(yōu)惠購主頁，用戶進入頁面后會有一筆補貼金彈窗，在這里補貼金彈窗就是我們說的“心理賬戶”。紅包設(shè)計了3s自動收下的提示，給用戶營造緊迫感的氛圍，最后收下紅包的動作上增加了小動效，讓用戶有清晰的紅包收下的感知；

我們還要善用用戶的從眾心理。項目中，我們在會員購買頁的主視覺區(qū)域，增加了“xx幾分鐘前已成為會員“的氣泡提示，來引導用戶操作，暗示用戶產(chǎn)生購買的行為；最后在頁面底部，增加了大家問的模塊，消除用戶的疑慮，那么在多次刺激后，有利于用戶做最終的決策，引導用戶下單，并達到用戶轉(zhuǎn)化；

06.結(jié)語

做轉(zhuǎn)化，最重要的就是抓住用戶的心理，深挖影響用戶心理的關(guān)鍵因素，才能擁有更高的轉(zhuǎn)化。

在設(shè)計過程中，我們要在不同的使用場景和節(jié)點上，通過分析目標用戶以及影響用戶的心理因素，將這些進行設(shè)計串聯(lián)，讓用戶完成一系列的體驗，從而最終達到設(shè)計目的。

參考內(nèi)容：

理查德·塞勒（Richard Thaler），芝加哥大學行為科學教授提出的“心理賬戶”理念；

https://baike.baidu.com/item/%E5%BF%83%E7%90%86%E8%B4%A6%E6%88%B7/2369306?fr=aladdin

原文地址：58UXD （公眾號）

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請注明：學UI網(wǎng)》項目總結(jié)｜你知道嗎？用戶轉(zhuǎn)化是可以被設(shè)計的

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

在設(shè)計中，最常見的質(zhì)量保證方式就是在產(chǎn)品驗收環(huán)節(jié)進行「設(shè)計走查」。不過因為是上線前的最后驗收環(huán)節(jié)之一，經(jīng)常會出現(xiàn)因臨近上線時間，且交互和UI類的問題在修改優(yōu)先級中一般都是較低的，最后只能修改部分設(shè)計上的「bug」，其他只能舍棄或放入永遠不會開工的下次迭代再改。設(shè)計師在各種來回扯皮之間筋疲力盡，看不到設(shè)計價值在需求中的體現(xiàn)，各種“這里設(shè)計不好”的鍋一不小心也接了一堆。更嚴重的問題在于，用戶得不到更優(yōu)秀的體驗，輕則耗費更多時間，重則放棄使用功能。不管哪種結(jié)果，對于產(chǎn)品整體滿意度都會有不同程度的影響。

由此可見，設(shè)計質(zhì)量保證僅靠最后臨門一腳的設(shè)計走查遠遠是不夠的。在需求全周期中各個環(huán)節(jié)都可以加入對設(shè)計質(zhì)量的把控（Design QA）。Design QA的概念來源于研發(fā)流程中測試環(huán)節(jié)。質(zhì)量保證縮寫為QA（Quality Assurance），是產(chǎn)品交付流程中非常重要的一環(huán)，一般就是大家了解的測試工程師的崗位職責內(nèi)容。在這個環(huán)節(jié)中，測試人員需要對產(chǎn)品功能進行仔細認證，確認是否滿足了產(chǎn)品需求并且可以正常使用。但與測試不同，設(shè)計QA須加入到產(chǎn)品需求全周期的各個環(huán)節(jié)中，最終形成與產(chǎn)品設(shè)計并行的一個流程，才能有效保證質(zhì)量。

設(shè)計QA實施步驟和方案

步驟1: 需求分級，確定是否需要設(shè)計QA

要保證設(shè)計質(zhì)量，在B端設(shè)計中不是易事。我們經(jīng)常會聽到：

· “這個功能能用就行”：公司/團隊不理解或不夠認同設(shè)計價值是什么，不明白為什么體驗會在每一處未還原的設(shè)計稿上慢慢丟失

· “這還原的不挺好，和你設(shè)計稿我看一樣啊”：非專業(yè)的同事無法分辨設(shè)計稿與研發(fā)實現(xiàn)稿的細微差異

· “沒時間改了，下次再說吧”：設(shè)計質(zhì)量保證低于功能質(zhì)量保證，或者團隊必須在有限的時間交付需求

在接到需求后可以根據(jù)以往經(jīng)驗或與產(chǎn)品經(jīng)理的溝通，確定本次需求設(shè)計等級：

• A：公司級和部門級重點、設(shè)計周期長內(nèi)容多、設(shè)計可沉淀輸出的內(nèi)容多的需求
• B：正常迭代、量級一般的需求
• C：時間緊迫倒逼排期、無前端研發(fā)資源、少量調(diào)整、評估不需要設(shè)計的需求

在確認等級后，作為設(shè)計師可以有一定的心理預期。對于A類可能各個環(huán)節(jié)都需要詳細的進行QA，而對于C類有可能連設(shè)計走查都沒有預留時間，只能靠后續(xù)線上的直接驗證了。后面的幾個步驟可針對不同的等級選取全部或部分進行實施。

步驟2:交互設(shè)計中，考慮極限下的正確展示

B端交互設(shè)計中，很重要卻經(jīng)常制作不到位的就是極限情況?？雌饋矶际歉鞣N表格，簡單的給定一個寬度即可，但在上線后經(jīng)常發(fā)現(xiàn)，填充了真實商家數(shù)據(jù)的表格，總有意想不到的錯位折行和重要信息截斷，用戶的可閱讀性降低。

                                             左：重要信息被截斷；右：折行錯位

步驟3: 設(shè)計評審與交付，交互說明與UI標注一體化

在完成制作后一定要進行評審，對功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實現(xiàn)性與開發(fā)成本進行評估。項目相關(guān)利益人都需要參加，尤其是測試同事需要參與評審，保證后續(xù)測試用例編寫質(zhì)量。在交互與UI全部評審完成并通過后，交付給研發(fā)的設(shè)計稿最好可以做到交互說明文檔與UI標注一體化，方便研發(fā)同事查看。避免在交互說明與UI標注中來回切換，導致交互或UI細節(jié)遺漏。這里推薦一個sketch插件：NoteBook Pro （需要付費，lite版大約￥76），方便在sketch中添加交互說明標注，在上傳到可以在線查看UI標注的平臺，比如Zeplin/Relay等。

交互說明+UI標注在一個頁面上同時呈現(xiàn)

步驟4: 參加測試用例評審，確保測試用例涵蓋所有交互細節(jié)

一般來說，交互稿與UI稿交付給研發(fā)同學后，設(shè)計師就要開始忙下一個需求了。直到通知設(shè)計走查前，設(shè)計師暫時不會再隨時跟進需求進展，而是交接到產(chǎn)品或項目經(jīng)理手中。而在這個從設(shè)計稿到研發(fā)實現(xiàn)的過程中，設(shè)計師也需要在關(guān)鍵節(jié)點參與其中，確保設(shè)計質(zhì)量。測試用例是其中一個設(shè)計師可以參與的環(huán)節(jié)。其實有時候很多交互文檔中的內(nèi)容會被用作測試用例，所以需要再次和研發(fā)與測試同學對齊所有交互內(nèi)容，保證交互設(shè)計內(nèi)容不會在此階段被降級甚至直接去掉。

步驟5:設(shè)計走查，輸出并記錄結(jié)果

此環(huán)節(jié)很重要的一點就是走查文檔或記錄。未完成修改的內(nèi)容，建議研發(fā)給出一個解釋，并以文檔的方式記錄下來抄送給相關(guān)利益人，標明可能帶來的風險。同時嘗試與產(chǎn)品或項目經(jīng)理溝通，推動迭代優(yōu)化的具體時間，避免「下次一定」的無效承諾。

總結(jié)

設(shè)計QA是貫穿整個產(chǎn)品需求全周期的設(shè)計流程，在以往的點狀設(shè)計走查之外，需要與團隊上下游通力合作溝通，才能確保優(yōu)秀的產(chǎn)品呈現(xiàn)在用戶面前。

參考文獻：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

原文地址：京東設(shè)計中心JDC（公眾號）

作者：唐朋博、李小猛

轉(zhuǎn)載請注明：學UI網(wǎng)》B端交互設(shè)計在產(chǎn)品需求全周期中的質(zhì)量保證

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

w

01.  先上神器 

▲ 比如我最近在一個網(wǎng)站，想看看一些大背景圖片的靈感圖，那么直接點擊頂部Big Background Image這個按鈕，它就自動幫我把這個風格靈感篩選出來了，是不是很方便。

▲ 最近潘通新發(fā)布的2021年配色粉彩，我也想收集一些關(guān)于粉彩的設(shè)計靈感，那么點擊頂部的按鈕，他會自動的幫你篩選出很多。

▲ 篩選后的靈感都是最新的，而且數(shù)量也很多，特別的方便。

▲ 比如我想找一個極簡的設(shè)計，一些黑白設(shè)計，同樣可以快速篩選出來，是不是很方便高效。

這個網(wǎng)站里有很多高質(zhì)量的靈感圖片，已經(jīng)幫大家下載好了，需要的話可以添加叮當貓回復“圖庫”領(lǐng)取，已有叮當貓的無需重復添加。

長按掃碼添加叮當貓回復：圖庫

w

02.  怎么使用 

▲ 這個網(wǎng)站用起來很簡單，首頁進入后，默認是最新的靈感趨勢，不得不說godly這個網(wǎng)站主編審美非常贊，每個設(shè)計都是最新的設(shè)計方向和靈感。

▲ 包括最近流行的液態(tài)水滴效果，都是高清大圖演示，你根本不需要點進去網(wǎng)站，直接這里就可以看見最新的設(shè)計。那么我是怎么運用這個網(wǎng)站的？

▍1.根據(jù)風格找圖

▲ 這個是最常用的，點進去首頁，下面一行標簽，這里面標簽就是各個設(shè)計風格關(guān)鍵詞。當然英文不好，你可以用谷歌自帶的翻譯功能，翻譯的明明白白。

▲ 比如我想找暗黑風格的，那么點擊黑暗標簽，就都是黑暗風格的頁面設(shè)計。

▲ 比如點擊網(wǎng)格，那么出來的都是非常有設(shè)計秩序的，網(wǎng)格感非常強的設(shè)計，隨便點擊一個進去看看。

▲ 模塊感非常強，如果你今天想做一個雜志感，這種布局就可以參考。當然最強大的是導航里面有個More。

▍2.根據(jù)字體找圖

▲ 這里是全部分類，里面有根據(jù)設(shè)計風格分類，比如大背景圖、黑白、網(wǎng)格、粉彩等風格。同時也有按照流行字體風格分類，比如Helvetica Neue、Roboto等知名字體。同時分類還有各種數(shù)字海洋、亞馬遜等，總之非常豐富。我們來試試。

▲ 我點擊了Helvetica Neue這個分類，那么就看見了全部使用Helvetica Neue字體的網(wǎng)站，每個網(wǎng)站的字體運用細節(jié)、排版和版式都可以參考。

▲ 都是特別好的案例，而且你能看見這些字體都是搭配什么樣的字體在使用。

▲ 點擊Netlify就都是非常抽象的圖形風格，總之這個網(wǎng)站有很多點值得我們?nèi)ヌ剿鳌?/span>

▍3.根據(jù)圖片找圖

▲ 比如最近做一個需求，想了解下孟菲斯風格，那么我找到了這張圖，都是視頻錄制好了，非常高清。

▲ 點進去都是高清，并且?guī)в袆討B(tài)演示，并且每個頁面都是高清大圖。

▲ 頁面的縮略圖非常大，因此你可以很輕松找到你喜歡的圖并且更好的查看很多細節(jié)。單擊一個圖片就可以看見更大的尺寸，點進去可以看見這個網(wǎng)站的全部標簽。如上圖，我想看看3D風格網(wǎng)站怎么設(shè)計的。

▲ 點進去后，可以看見這個設(shè)計的詳細大圖，同時還可以看見很多標簽。這個標簽代表它在的分類，隨便點進去一個分類，就可以看見全部類似這樣的設(shè)計。因為這個靈感是3D，因此我點了3D，然后進去都是一些很酷炫的3D靈感。

▲ 質(zhì)量怎么樣？你們自己說了算，每個靈感都有完整的高清效果，還是動態(tài)的。

▲ 比如這個，是一個動態(tài)的3D組成的英文單詞。所以這里可以基于一個圖片風格找很多風格。這個網(wǎng)站的魅力能讓我們更加專注于根據(jù)主題來看我們想要的東西。

w

轉(zhuǎn)載請注明：學UI網(wǎng)》這應該是近幾年，見過最牛逼的網(wǎng)站，可以按趨勢風格找圖了！

先來看看下面的海報，給人的感覺就是夢幻高級，滿滿的質(zhì)感撲面而來。

深色的背景圖配上發(fā)光的文字效果，有什么小伙伴會想，為什么我沒有這么用過。

 

  

第一步 >

第二步 >

第三步 >

 

最后再次貼上最后的海報完成圖。

作業(yè)問題

第一步

我們先將下方模塊和首屏之間拉開距離，之后填充同色系的藍色作為最下方背景的顏色，之后將圖片上方飽和度提高，再把產(chǎn)品和模塊邊緣處進行摳圖，做出破圖的視覺效果，復制多個泡泡增加畫面的氛圍。

第三步

最后