拼貼藝術（Collage）

大意是將紙張、布片或其他材料貼在一個二度的平面上，創作出一件拼貼作品。拼貼藝術廣泛運用在現代傳媒中，比如海報設計、封面設計、視頻等等，用于表達沖突、異同、隱喻等等，這種破碎而藕斷絲連的藝術形式，在同樣破碎的互聯網日常中得到了認可。

讓拼貼藝術火起來的正是畢加索「有藤椅的靜物」見下圖，拼貼藝術非常適合開腦洞，把無關的事物拼合在一起，尋找新的意義，因此被廣泛用來表達個人藝術想法。

畢加索「有藤椅的靜物」

分享一些

讓你腦洞大開的優秀拼貼作品

▽

拼貼藝術也常用于表達個人藝術思維，比起手繪需要深厚的基礎，拼貼藝術門檻更低且更注重思維的過程，找到合適的素材來表達自己更重要，需要注意處理素材的形態顏色等，才能設計出更成熟的藝術作品。

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》靈感 |「拼貼藝術」連接現實與過去的大門

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

#1.掌握標準化體系建設

標準化基本框架

早期大家可以從基礎層慢慢學習了解，先去熟悉各家平臺設計標準化搭建思路，然后從基礎規范搭建開始，最后到頂層設計語言的構建，最終慢慢掌握設計標準的整體建設。

所以想進去大廠這一步大家務必要認真思考和學習掌握，因為目前很多大廠招聘信息都有這個招聘條件要求。

 

#2.鍛煉多元化設計技法

對現在的主流趨勢是否有了解與掌握，能否將其運用到項目設計中。這個點也是考察設計師手上功夫能力。如果你在技法層面過于單一，那么現在就要開始去彌補這塊短板，開始做打卡練習。

1.雜志化設計風格是否掌握，雜志設計理念與思路，表現形式等。

2.極簡設計風格

3.三維技法風格

上面的風格技法只是拋磚引玉，其實還有很多，我們只需把主流的平面技法掌握了，其余每年新趨勢可以去了解和學習，能在項目中應用起來，體現你的實力。

#3.掌握設計方法流程

#4.掌握項目規劃能力

比如上面就是一個項目簡單規劃排期，當然這只是大框架，偏整體性排期規劃，涉及到更細的排期，每個階段有詳細排期跟進，如果還沒做過規劃和排期的伙伴可以提前練習嘗試。

一起看看作品欣賞，感受這些小元素在設計中的呈現效果。

作者：Alzea Arafat

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

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

素材  分享 

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

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

部分素材截圖示意

d

附加  分享 

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

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

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

a

小結 

素材不在于多，而在于質量，希望本期的分享能夠給大家帶來幫助！后續也會繼續給大家分享更多的素材資源。

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

#1.Airbnb Design Language

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

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

 

#2.Starbucks Brand Guide

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

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

 

#3.HarmonyOS 

華為的鴻蒙OS系統，最接近我們的產品的設計語言，強烈推薦，我想設計師也是最容易看得懂的設計系統。

算是媲美Materials Design的一套國內權威性設計語言系統，設計體系單元拆分很詳細。

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

 

#4.Salesforce Lightning 

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

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

 

#5.Spectrum Design system

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

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

 

#6.Fluent Design System

Fluent 是一個開源的跨平臺設計系統，可為設計上和開發提供創建引人入勝的產品體驗所需的框架——包括可訪問性、國際化和性能。

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

 

#7.Carbon Design System 

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

一些網格間距系統的規則定義

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

#8.Audi Design System 

1.水墨風

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

但卻是用的同一種風格或者說是技法，利用墨跡塑造出文字、圖形或者一種優美的形態。

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

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

2.酸性風

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

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

3.賽博風

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

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

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

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

案例分析

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

–

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

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

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

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

實操過程–七夕海報制作

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

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

原文地址：修先森撩設計

作者：修先森

轉載請注明：學UI網>拯救沒思路系列，試試提取風格

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

01.前言

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

02.背景分析

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

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

用戶敏感點：根據以往“免費領”運營活動的數據，了解到用戶對價格很敏感；

03.目標用戶分析

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

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

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

04.思考模型

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

05.影響用戶心理因素

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

· 抓住感知=抓住“優惠”感知

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

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

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

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

· 驅動行為=驅動購買

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

何為“心理賬戶”呢？

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

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

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

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

06.結語

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

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

參考內容：

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

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

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

作者：環鐵藝術家

轉載請注明：學UI網》項目總結｜你知道嗎？用戶轉化是可以被設計的

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

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

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

設計QA實施步驟和方案

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

要保證設計質量，在B端設計中不是易事。我們經常會聽到：

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

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

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

在接到需求后可以根據以往經驗或與產品經理的溝通，確定本次需求設計等級：

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

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

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

B端交互設計中，很重要卻經常制作不到位的就是極限情況。看起來都是各種表格，簡單的給定一個寬度即可，但在上線后經常發現，填充了真實商家數據的表格，總有意想不到的錯位折行和重要信息截斷，用戶的可閱讀性降低。

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

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

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

交互說明+UI標注在一個頁面上同時呈現

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

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

步驟5:設計走查，輸出并記錄結果

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

總結

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

參考文獻：

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

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

作者：唐朋博、李小猛

轉載請注明：學UI網》B端交互設計在產品需求全周期中的質量保證

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

w

01.  先上神器 

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

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

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

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

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

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

w

02.  怎么使用 

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

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

▍1.根據風格找圖

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

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

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

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

▍2.根據字體找圖

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

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

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

▲ 點擊Netlify就都是非常抽象的圖形風格，總之這個網站有很多點值得我們去探索。

▍3.根據圖片找圖

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

▲ 點進去都是高清，并且帶有動態演示，并且每個頁面都是高清大圖。

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

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

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

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

w

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

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

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

 

  

第一步 >

第二步 >

第三步 >

 

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

作業問題

第一步

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

第三步

最后