轉載請注明：學UI網》如何學習Yoga Style？

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

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

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

前言

沉浸式體驗是讓人專注在當前的目標，全身心投入并感到愉悅和滿足，從而忽略時間的流逝。應用到界面上則是更強調聚焦內容，減少不必要的打擾。本次研究與實踐針對視頻場景中視頻所呈現的畫面，通過精細化的設計，在多樣化的手機屏幕中呈現時，能夠帶給用戶更為沉浸的視頻觀看體驗。

百度APP是如何進行視頻沉浸式設計的？

視頻播放器中視頻畫面當然是最主要的內容，以此作為突破點進行思考：

• 最大化畫面視野：通過改變視頻畫面本身的大小，減少頁面“留白”，讓用戶更聚焦視頻畫面，觀看視頻時更專注。
• 最佳視線觀看位置：將不同高度的視頻按照頁面結構去布局視頻畫面，通過畫面避讓狀態欄、頂底bar結構的方式，使畫面更加整潔，減少元素混亂帶來的干擾，同時整體位置偏上展示，視線落點更加舒適。
• 觀看體驗連續性：視頻瀏覽過程中，非必要不打斷視頻瀏覽，在進行如查看評論、臨時退出播放器等行為時，保證視頻播放的連貫性，方便用戶多操作。

一、最大化視頻畫面視野

01、視頻畫面裁剪 

隨著時代的發展，為提升消費者對手機的操作體驗，智能手機逐漸多元化，手機屏幕尺寸迭代更快、更加豐富多樣。手機作為視頻很重要的生產端，手機屏幕尺寸的多樣化影響到產出視頻尺寸的多樣化，同時用戶可通過視頻編輯工具任意編輯視頻尺寸，最終生產的視頻尺寸比例自由度非常高。據不完全統計視頻平臺中視頻尺寸達22萬多種，用戶使用機型近300種，在視頻尺寸多樣性及視頻展現媒介多樣性的現狀下需要兼容性更強的裁剪及展現規則才能帶給用戶更好的觀看體驗。我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設備設計為可控的視覺展示效果，并最大化視頻畫面。減少環境干擾，給用戶帶來沉浸式感官體驗。

視頻寬撐滿手機屏寬后，將視頻尺寸分為四類：

1) 視頻高度>手機屏高

視頻畫面寬度撐滿屏幕后，視頻整體居中于屏幕，居中裁剪視頻多余畫面。注：不允許畫面高度撐滿屏幕，寬度自適應導致畫面左右留黑效果。

2) 視頻高度=手機屏高視頻居中于屏幕，剛好填滿屏幕，不需要裁剪處理。

3) 1:1<視頻高度<手機屏高

此類尺寸較復雜、難處理，于是將限制裁剪面積和展示位置相結合，保證裁剪面積和位置可控。結合視頻平臺資源尺寸和業務目標來確認理想展示效果，反推定義最大裁剪面積，根據顯示位置多次判斷視頻放大后是否符合既定裁剪面積，最終確定當前視頻的顯示方式。同時支持根據不同視頻業務進行個性化定制，并且將裁剪面積云控處理，根據業務內不同時期的訴求限制比例來靈活調整展示效果，雙端也可分端定義數值；橫向協同及迭代成本極低，便于快速上線驗證效果。

4) 橫版視頻（高寬比≤1:1）

橫版視頻在手機屏幕中面積占比較小，畫面可識別度和飽滿度稍有欠缺，輕微擴大畫面視野，畫面瀏覽更加清晰有沖擊力。以不影響內容理解為前提，根據自身平臺視頻尺寸占比及視頻內容特點規定固定比例或比例范圍適度放大。

錦上添花，引入文字內容識別

為避免因裁剪規則而裁剪到視頻關鍵文字對視頻內容獲取有障礙的問題，發揮百度強大的AI技術優勢，引入文字識別技術及視覺展現規則，進一步提升視頻展現樣式的可控性，同時能夠通過盡量少損失畫面達到畫面放大的效果，平衡畫面沉浸感和完整性的關系。左右文字被裁剪情況：文字左右設置安全距離，保證安全距離在屏幕內。如果安全區超出屏幕，則按照上方描述的裁剪規則進行退檔顯示（滿屏至不裁剪之間的檔位），直至文字不被裁剪。極端情況退檔至最后一檔，視頻畫面不裁剪。

橫版資源文字左右被裁剪情況：按照固定尺寸退檔

上下文字被裁剪情況：文字上下設置安全距離，保證安全距離在屏幕內。如果安全區超出屏幕，則按照上方裁剪規則進行滿屏至不裁剪之間的檔位進行退檔顯示，此情況只會從全屏一檔顯示退至二檔顯示。

裁剪面積、展示比例、文字安全距離等數據都通過云控的方式下發，靈活配置到不同業務中，保證裁剪規則一致的同時又能針對不同業務進行定制展現，也可快速調整并支持上線實驗，來驗證適合自己產品的展示效果。

02、智能滿屏

通過裁剪方式放大畫面視野之外，還通過讓用戶自主交互操作再次放大畫面視野，調整到自己喜歡的觀看視頻的方式。相較于上方默認裁剪放大，滿屏方式更加激進極致，畫面放大更多。開啟方式通過面板功能按鈕開啟智能滿屏外，增加便捷交互開啟手勢，用戶可雙指放大快速開啟。

由于滿屏是用戶主動操作放大行為，可以接受文字內容被裁剪，但也需要有節制的放大，避免帶來畫面裁剪過多視覺體驗不佳的問題。為了保證95%以上資源撐滿全屏，達到放大畫面視野極致體驗。同時最大畫面裁剪面積不超過一定比例（根據自身業務視頻資源判斷），將視頻資源細分為3類進行不同效果處理：1.可繼續放大至滿屏的視頻，則進行滿屏展現。2.不可繼續放大的視頻，如果繼續放大會導致裁剪畫面過多影響觀看完整度與觀看體驗，則保持上方提到的裁剪規則，不做另外處理。3.橫版視頻統一放大至固定尺寸，可根據自身業務資源進行放大尺寸的定義。

二、最佳視線觀看位置

通過布局合理、舒適的畫面位置，也能提升瀏覽過程中用戶體驗的沉浸感。人的視覺中心一般會在物理中心的偏上方，于是在設計中我們將視頻畫面放在屏幕偏上的位置，用戶視線落點更加舒適，一般是用戶在瀏覽頁面時最先注意到的地方。同時視頻在頁面偏上的位置，能減少下方標題等信息過多對視頻畫面的遮擋。

為了精細化處理不同比例的視頻資源，豎版視頻和橫版視頻根據頁面效果分別定義了最佳觀看展示位置。

豎版視頻：高于1:1的視頻，按照頁面結構布局視頻畫面，避讓狀態欄、頂底bar操作，避免與頁面結構沖突帶來畫面凌亂不美觀的問題，同時能減少畫面參差帶來的干擾，增加沉浸瀏覽感受。

橫版視頻：等于矮于1:1的視頻，畫面按照屏幕高度比例展示在偏上的區域，高度比例可云控便于靈活調整。

三、觀看體驗連續性 

01、視窗擠壓

為了滿足用戶在視頻場景多角度信息獲取，在不打斷用戶視頻瀏覽的基礎上建設視窗擠壓交互體驗，提升觀看視頻的相對沉浸感。在視頻場景觀看評論時會彈起半屏面板，遮擋住視頻內容，導致用戶無法在瀏覽評論的同時觀看視頻內容。對短視頻重度用戶來說，對同時看評論和看視頻習慣的用戶有挑戰。通過視窗上移動擠壓功能，在瀏覽面板內容時不對視頻內容打斷，弱化面板內容給用戶帶來的影響。

視窗高度固定，畫面寬高比越小畫面內容越小，觀看體驗不友好，所以豎版視頻對壓縮后的顯示尺寸進行干預，定義最小視頻畫面展示比例，盡量擴大畫面視野，保證觀看視頻的舒適度。

02、懸浮小窗 

在不打斷用戶視頻瀏覽的基礎上還建設了懸浮小窗交互體驗，旨在為用戶提供完善優質的視頻消費體驗。用戶進行其它操作時仍保留視頻后臺播放，同時也能在屏幕角落觀看到縮略圖大小的視頻播放窗口，可以從任何頁面中觀看視頻，我們同時也保留了部分視頻基礎操作。觀看體驗連續性讓用戶對視頻有絕對的主控感，提升用戶使用體驗的滿意度。

寫在最后

標題的字號通常會比較大，這時如果給它搭配一個字號比較小、字體不一樣的副標題，或者是英文標題，那么就可以得到鮮明的大小對比和字體對比，甚至還可以有色彩對比、空間對比等。這么做可以增加標題的層級關系，使視覺更豐富，更生動。

▲ 上圖的標題只有四個字，如果單獨排版會很單調，所以設計師把它與英文標題一起排版。如果你想要排版的效果比較時尚、活潑，可以將標題進行斷行、錯位處理，兩行或三行的標題比單行標題的層級更豐富、對比關系更多。

▲ 上圖的標題搭配了一行字號更小、字重更細的副標題，由于上圖海報想要表現出比較高端的品質感，所以標題和副標題采用了同一種字體，也沒有加入太多的排版技巧。

▲ 上圖的標題與活動時間和裝飾英文組合排列在一起，并且在排版時有明顯的大小對比、字體對比、顏色對比、點線面的對比等，使整個標題看起來有豐富的細節。

二、賣點要有Icon

絕大部分的產品海報或寶貝詳情頁上都會展現產品的賣點（核心優勢），這通常會是比較重要的信息，所以需要重點突出。不過突出的手法不一定要使用很大的的或者是對比很強的顏色，給賣點增加icon就是一個很常見、很有效的技巧，既可以通過icon把賣點信息與其他信息區別開，從而吸引讀者的目光，也能使畫面視覺更豐富、有更多細節。

當然，icon設計本身也很關鍵，首先，要盡量使用一些大家比較熟、能一看就懂的圖形符號；其次，要盡量設計得細致一些，雖然會需要花一些時間，但這是值得的。

另外，風格的統一也很重要，一方面是每個icon的風格要一致，不要有些硬朗、有些柔和，也不要有些很復雜、有些很簡單；另一方面是Icon的調性也要符合產品調性以及畫面的風格，這樣畫面的整體視覺才能更統一、更美觀。

比如，在上圖的兒童牙刷海報中，由于畫面部分采用了剪紙風格，所以賣點的icon也使用了剪紙風格。

三、信息要分組

版面中的信息一定要分組，不要全部排成一堆或者四分五裂地排列，否則都會加大閱讀和理解的難度，可以通過控制信息之間的間距來分組，也可以利用線、線框、色塊來分組。并且，信息分組還需要注意以下兩點：

? 視覺上要有主次，即每組信息版面空間占比不要太一致。

? 要符合閱讀及信息傳播的邏輯。有些設計師會為了好看而隨意把信息的順序打亂重組，這是本末倒置的行為。

例如在下圖的海報中，設計師雖然將信息進行了分組，但是除了主體很突出以外，其他信息都太過平均了，再加上信息塊（包含文字組和圖片部分）特別多，所以導致排版很散。

而在優化后的方案中，把版面信息進行了重新分組和排列，視覺更整體、層級關系更鮮明。

下圖海報的排版也有幾個比較嚴重的問題：

? 信息分組不合理。大部分文字信息都被圓形色塊打包成一個組，但里面很多信息的意義并不相同，其實不適合組合在一起；

? 文案的排版不符合邏輯。比如把“只選直徑…”這句文案放在最上面有點突然；再比如“首創一品黑蒜豬大蹄飯”其實是一句話，設計師卻把它拆開排列，而且順序是錯亂的；

? 排版太亂。雖然用了圓形色塊進行整合，但是在這一組新信息里，有的文字排成弧線、有的文字豎排、有的文字橫排、有的文字對齊排、有的文字錯位排，同一個信息塊里采用了太多不同的排版形式，而且組合得不好。

修改過的方案則進行了合理的分組，信息排版也更符合閱讀理解的邏輯。

? 把標題和副標題分成一組排在左上角。在面積上是版面中的第二大視覺塊，信息一目了然且主次分明；

? 把價格、口感NO.1?“只選直徑…”這三個信息分成一個組，排在標題和副標題下方、產品的上方，符合正確的視覺流程和閱讀邏輯。而且該組文案與產品圖片進行疊加或繞排處理，既加強了文字與圖片的關聯，也使得文案與產品形成了一個大的整體。

所以，設計師在做設計時，一定要閱讀文案、理解文案，看哪些信息可以劃分到一組排列，哪些信息應該要分開排列。

四、視覺層級要分明

只要不是同一句話或者同一類信息，那么都要區分它們的層級關系以及視覺呈現，哪怕這些信息被分在同一組。比如標題、副標題、小標題、正文、賣點、注解、價格等等，這些信息在視覺呈現上都要有所區分，并且區分得要盡量明顯一些，如果只是把字號加大一點、改變文字的顏色，那么可能會比較難把信息進行有效區隔，視覺上也會比較單調。

所以，為了視覺上更美觀、更易閱讀，我們還可以通過改變字體、排版的方向、排列的位置，增加輔助元素（icon、色塊、線條、線框等）、裝飾效果（描邊、立體效果、扭曲效果、裁剪效果等）等等，創造出比較鮮明的對比以及視覺層級。

另外需要注意的是，區隔信息的手法要與設計的風格和調性吻合，通常來說，高端、簡約的版面，所用的排版技巧和裝飾手法會比較少，視覺效果也不會太夸張；而如果是時尚類或者促銷類的設計，其用于區隔信息層級的手法可以盡量豐富、夸張一點。

比如下圖是蘋果筆記本的banner設計，其每一行文字的視覺效果都有明顯的區別，但并沒有采用特別夸張的表現手法，字體和排版方向都是統一的。

而下面這則貓糧的海報，其文字表現手法則要豐富很多，對比要更強。

總結一下

想要版式更加精致、更便于信息的傳播，我們需要處理好以下幾處細節：? 給標題搭配輔助文字；? 賣點要有Icon；? 信息要分組；? 視覺層級要分明。

作者：蔥爺

轉載請注明：學UI網》做好這幾處細節，你的排版才能更精致

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

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

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

話不多說，直接上手先吃瓜吧，哦不，做圖吧！學會這幾招，再也不要甲方爸爸提供渣渣圖片素材了。

這個案例我之前分享過小紅書，相信我，我不是想偷懶，我只是想把這個實用好技巧讓更多的小伙伴知道（一臉正經說的）。

看過的小伙伴也不要急，畢竟后面還有 5 個案例都是船新未公開的版本！走過路過不要錯過！

我們在 AI 里畫一個正方形選擇【效果】→【3D】→【凸出和斜角】得到一個正方體，然后選擇擴展，每個面填充白色透明→不透明的漸變。

畫一個藍白漸變色的背景，給夏日里一抹清涼的感覺~

這個桃子是我用蘋果電腦自帶的【Apple Color Emoji】輸入法打出來的，也不一定用桃子，也可以別的喲～

（后面的步奏都是在 PS 里完成的哦～）把桃子放在立方體下面，合并【桃子】+【立方體】圖層，選擇【濾鏡】→【濾鏡庫】→【扭曲】→【玻璃】數值參考如下。

復制一個，調整大小節奏，再調整一下角度，按住【ctrl+alt+shift+E】鍵，得到一個合并可見圖層的新圖層。

再復制一層（留用），選擇一個圖層【濾鏡】→【模糊】→【高斯模糊】，數值：【5】，選擇【濾鏡】→【濾鏡庫】→【扭曲】→【海洋玻璃】數值如下。

選擇之前復出來留用的那層置于頂層，圖層模式選擇【顏色加深】，透明度【30%】。

繼續細化，用圖案建立→填充的方式，加點細節，用混合方式做一個線條背景再加像素字點綴，其他文字環繞編排即可。

不知不覺來到了中午，夏日炎炎，我買了一根雪糕，這次的技巧可以說相當簡單，我速戰速決，畢竟我的雪糕是會融的……

在 Ai 里畫一個矩形，調整圓角，選擇【效果】→【3D】→【凸出和斜角】數值如下：

擴展圖形，然后調整角度，除頂部部分的形狀合并，然后填充漸變色，復制多一個形狀，添加描邊。

把頂部的形狀復制兩個，排好填充顏色，然后選擇三個形狀【對象】→【混合】→【建立】，如果步數不夠，就選擇混合工具，按住【ALT】鍵，輸入合適步數即可。

同樣的方法做一個雪糕棒吧，然后把這幾個形狀組合在一起，就得到這根可口的雪糕啦！趕快吃起來，哦不，做起來吧！

根據文字的大小加入色塊編排可以增加版面的色彩層次，再來點路徑文字，活躍一下版面，加上其他文案，這張海報就完成啦！

這次技法以文字為主體，做一個夏日凍感的文字，選擇一個圓體的文字，在 PS 里轉成智能對象，選擇【濾鏡】→【模糊畫廊】→【路徑模糊】數值路徑如下：

添加一個蒙版，用畫筆把邊緣擦得虛一些。

然后新建一個文字圖層，改成描邊效果，然后轉成智能對象，復制上面智能濾鏡的效果到這個圖層，加入漸變，這個冰塊字就做好啦！

接著我們來做文字編排部分，傾斜的文字能夠增強畫面動感，豐富版面，再用【！】增強情緒張力，其他文字環繞編排即可。

萬物皆可卷……而我選擇躺平，哦不，我選擇讓紙張自己卷，這次做一個簡單上手的紙張卷曲效果。

先做兩組簡單的文字編排，調出符號面板，直接往里面拖即可。

選擇螺旋線工具，畫出線條，然后選擇【效果】→【3D】→【凸出和斜角】，數值如下：

先別點【確定】哦，點擊左邊的【貼圖】按鈕，進入貼圖頁面，選擇其中三個表面，選擇前面做好的符號圖樣，并調整大小，即可得到這個卷曲紙張的效果啦！

因為文字做了卷曲的效果后，閱讀性會降低，所以我們還是要重復排一遍文字，然后我們再加入背景漸變色豐富一下，再來點質感會更好，于是我打開了 PS，找了張褶皺的紙張紋理進行疊加，最后再加點雜色即可！

卷完紙張，我們來卷文字吧！，天長地久有時盡，此卷綿綿無絕期……

選擇一個高挑的字體，然后再畫一根線進行分割，得到如下圖四組圖形，并依次拖入符號面板：

畫一個矩形，調整圓角，然后選擇【效果】→【3D】→【凸出和斜角】，數值如下，點擊左邊的【貼圖】按鈕，進入貼圖頁面，選擇其中三個表面，選擇前面做好的符號圖樣，并調整大小，如圖所示，即可得到這個卷曲的文字效果。

得到圖形后，選擇擴展，可以看到有些錨點沒有完全吻合，手動調整一下即可，另一個圖形也用同樣的方法即可得到。

選擇圖形其中兩面替換顏色，再添加一些有趣的圖形，增強畫面的趣味。

加入趣味標題，與其他文字編排，這張海報也完成啦！

這次的案例到這也就告一段落了，說時遲那時快，萌萌又來一句：要不再來一張？此刻的我當然是歡（mian）天（wu）喜（biao）地（qing）說：好！

于是，我打開剛剛關閉的 PS，打出文字，柵格化后，選擇【濾鏡】→【模糊畫廊】→【移軸模糊】，調整路徑，讓文字上下邊緣有模糊的效果。

復制一層，然后選擇【涂抹工具】，用柔邊畫筆，強度選擇【70%】，沿著文字邊緣涂抹出想要的形狀即可。

新建一個漸變映射圖層，添加漸變色，就可以得到這個字體流動效果啦！

接著，同樣的秘方，我們來加點質感，找一張做舊紋理的背景，調整合適的圖層樣式效果即可。

繼續添加細節，畫一些簡單的圖形豐富版面，用網格工具畫一個小網格，再加入一個酸性的手寫字裝飾一下

再加入簡單的文字編排，這個版面也就完成啦！

作者：大熊

轉載請注明：學UI網》AI & PS 夏日魔法篇

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

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

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

作者：黑馬青年

轉載請注明：學UI網》UI 中國首頁推薦作品集

有段時間沒有寫UI動效相關的文章了，之前寫過一篇《超全面！動效設計標準與規范》的動畫文章，里面會講到一些更具體的參數范圍，實用性拉滿，看完就可以用到你的動效調優里，干到擰不出水。今天的這篇更偏方法一些，強烈推薦你把2篇結合一起看，效果更佳！

如今對用戶來說，好的體驗是界面一致、易讀和簡單。設計師要如何才能讓UI更加符合用戶的自然直覺呢？

動效，可以讓界面變得更加自然，填補部分體驗上的隔閡。今天這篇文章會講到常用的12個UI/UX動畫原則，幫你做出富有樂趣的界面設計。

一、緩動

”緩動“指的是在一個動作在過渡中進行的方式。你可以把緩動理解為加速或減速。一個物體可以從界面的一側緩慢啟動，然后加速，最后到另一側突然停止?；蛘撸矬w可以快速啟動，然后逐漸減速到停止。關鍵幀表示了動畫的開始和結束，緩動決定了中間過程。

將緩動應用于補間動畫的一種簡單方法是使用“屬性”面板(彩云注：這里彩云還專門去查了下資料，這個功能是AE的一個Beta版本的功能，叫 Properties panel，可以很方便的修改屬性) 。緩動值的范圍從 –100 到 100。負值會從起始位置產生更平緩的變化（稱為緩入）， 正值會導致逐漸減速（稱為緩出）。

（彩云注：在我們現在用的AE正式版中，可以直接修改緩動屬性然后配合曲線也可以修改緩動幅度，如果有體驗過Beta版本的同學歡迎文末留言交流呀）。

Saptarshi Prakash

二、偏移和延遲

當多個UI元素同時移動時，用戶傾向于將它們分組在一起，而忽略了每個元素都可能有自己的功能。

偏移和延遲在同時移動的UI元素之間創建了層次結構，并說明它們是相關的，但又是不同的。不同于完全的同步，元素的時間、速度和間隔是交錯的，從而產生了微妙的“一個接一個”的效果。（彩云注：動效本質上也是為了打造層次感，其實這又是上2期講的底層設計原則的應用之一了。所以，我們在看一個知識點的時候，要學會系統性地去思考）

當用戶在屏幕之間切換時，偏移和延遲表明存在多個交互元素。

三、父子關系

”父子關系“意思是將一個UI元素的屬性鏈接到其他元素的屬性。當父元素中的屬性發生變化時，子元素的鏈接屬性也會發生變化。所有元素屬性都可以相互鏈接。

例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增大或減少。

父子級創建了UI元素之間的關系，建立了層次結構，這樣方便用戶同時與多個元素互動。在實際交互中，這種形式非常有影響力。

Ayoub Kada

四、變換

變換發生在一個UI元素過渡到另一個UI元素時。例如，一個下載按鈕變換到一個進度條，進度條完成后轉換成完成圖標。

從用戶的角度來看，變換是顯示用戶與目標相關狀態的有效方法（保證系統狀態的可見性）。特別是對于UI元素有從開始到結束狀態變換時，這種變換動效尤其有用。比如說這里的文件下載動效。（彩云注：做這樣的動效是有效的，對于用戶體驗的ROI很高）

Y.J.Y

五、數值變化

數值變化動效（數字、文本或圖形）在界面中非常常見，比如在銀行APP，日歷，電商網站等等各類產品中。這些變化與現實中用戶的需求產生關聯，所以可以隨時被調整變化。

這種數值變化表明了數據的動態性質，動效告訴用戶數據是可交互的。如果沒有這些動態變化時，用戶的參與意愿會降低。

Creative jeff

六、滑動和變焦

滑動和變焦這樣的動效可以讓用戶在界面的UI元素中”旅行“，能增加畫面的層次細節。

• 滑動: 當用戶的視角接近(或遠離)一個UI元素時，就會產生滑動。想象一個人拿著相機走到一朵花前想要近距離拍攝。
• 變焦：通過變焦，用戶的視角和UI元素保持不變，但元素在用戶屏幕中的大小會增加(或減少)。現在想象這個人呆在原地，用相機的變焦功能讓花看起來更大。

七、維度

維度使UI元素看起來好像有多個交互面，就像物理世界中的對象一樣。這種行為是通過使元素看起來像是可折疊的、可翻轉的、浮動的，或賦予現實的深度屬性來實現的。

作為一種敘事手段，維度意味著UI元素的不同側面是連接的，并有助于無縫的屏幕轉換。

Sang Nguyen

八、視差

當兩個（或更多）UI 元素同時移動但速度不同時，會產生視差，其目的是建立層次結構。

• 交互元素在前景中出現的更快
• 非交互元素在背景中出現的更慢

視差將用戶引向交互UI元素，同時允許非交互元素留在屏幕上，并保持設計的統一性。

Netrix

九、模糊

想象一扇磨砂玻璃門， 它需要互動才能打開，但也可以隱約看到門后面的東西。

模糊效果也是如此。它為用戶提供了一個需要交互的界面，同時顯示屏幕提示，引導用戶聚集。導航菜單、鎖屏和文件夾/文件窗口中都有經常被使用到。

magazineduwebdesign

十、克隆

克隆是一種動態行為，把一個 UI 元素分裂成其他元素。這是一種突出重要信息或交互選項的聰明方法。

當UI元素在界面中具體化時，它們需要一個清晰的原點，用來鏈接到已經在界面上的元素。如果元素突然出現或消失，用戶就很難清楚地記住上下文。

Interface Market

十一、疊加

在2D空間中，沒有所謂的深度，UI元素只能在X和Y軸上移動。疊加在UI的2D空間中創造出前景/背景區分的錯覺。通過模擬深度，疊加可以根據用戶需要隱藏和顯示元素。

在使用疊加時，信息層次結構是一個重要的考慮因素。例如，用戶在筆記應用中首先看到的應該是他們的筆記列表。然后，疊加可以用來為每條消息提供次要選項——比如刪除或保存。

十二、蒙版

蒙版是對UI元素的部分進行顯示和隱藏。通過改變元素的顯示區域，蒙版區域產生變化，同時允許元素本身保持可識別。因此，照片和插圖等視覺元素非常適合用在這種動效上。

從可用性的角度來看，設計師可以使用蒙版，給用戶反饋，讓用戶知道每一步操作的反饋和進度。

By Min-Sang Choi

原文：https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62

作者：Ayoub ┃Marhouse

譯者：彩云Sky

本文翻譯已獲得作者的正式授權（授權截圖如下）

作者：彩云Sky

轉載請注明：學UI網》這12個常用動效方法，很適合用到你的界面里

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

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

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

排版的難點在于，如果完全不用技巧，很容易顯得單調；而如果大量地堆砌技巧，就會導致版面花里胡哨，降低了傳播和閱讀的效率，如何去把握好這個度，達到事半功倍的效果，是設計師需要長期學習、研究的事情，下面蔥爺給大家推薦一波優秀的日式商業海報，排版雖然簡簡單單，但是很好看，且層級分明，視覺感受和閱讀體驗都很輕松。

在APP設計中，對頁面的某些元素、內容也加上手機傳感器，不僅可以使得這個功能/設計更加有趣，對于業務上的相關指標也是有積極作用的。

本次幫大家盤點一下，手機傳感器在APP設計中的體現與案例。

一、提供更加沉浸的臨場式體驗

愛奇藝進入全屏播放模式下，用戶只需旋轉手機，就可以360°任意角度看視頻，通過左右滑動屏幕調整觀看區域。

減少單一視角下給用戶帶來的限制，對于沉浸式、可隨便更換觀看視角的用戶是一大利點（特別是觀看愛豆的MV、演唱會時）

B站的一些特定的音樂視頻，如熱門/有趣的音樂、播放量特高如100萬、純音樂視頻沒有旁白之類的干擾等等。

播放時手機會識別音樂的旋律而進行震動，臨場體驗感極強！

通過設置手機的‘震感交互’來提升視頻的消費性/娛樂性，這個‘跟隨震動’是可關閉的，而且聽說蘋果手機至少在8以上（安卓未知）

還有微信的朋友圈廣告：可以進行360度全景觀看廣告內容，

利用手機重力感應器，搖動手機則轉動封面內容，點擊封面則進入更加沉浸式的全景頁面頁。

二、提供更加便捷的使用效率

在線下使用支付寶的收款碼時，把手機傾斜對著別人，收款碼和下方的文字「支付寶掃一掃，向我付錢」會自動進行翻轉。

讓文字正對著付款方，對方看起來不那么別扭，特別是對于首次掃碼付款的人來說，大大減少操作成本。

打開QQ音樂的「聽歌識曲」功能，不僅能識別外部環境的聲音，還能檢測其他帶有音樂or視頻的第三方APP中的歌曲，特別方便。

用戶聽到喜歡的歌曲又不知歌名、沒有多余設備幫助識別的情況下，既不用麻煩別人又能快速識別，極大提升操作效率

三、減少業務側的漏斗與流失

某閱讀APP（忘記叫啥了），在’我的’頁面會默認開啟手機陀螺儀，里面的的’簽到’圖標會根據用戶手機的擺動進行旋轉。

通過重力感應吸引用戶注意力進行簽到，減少簽出漏斗和用戶流失。

emmo的【登錄與注冊】頁上被設置了重力感應，頁面中的表情球會會跟隨手機搖擺方向進行滾動。

通過表情球的滾動吸引用戶，降低退出【登錄/注冊】的頁面漏斗，也提升了產品整體的趣味性、登錄/注冊成功率。

四、促進產品趣味程度的增加

騰訊手機管家的充電界面，不僅會顯示水位隨著電量的上升或下降，還可以利用手機的【重力感應】改變小黃鴨的游行方向，特別有意思。

用戶在充電狀態下也可以使用手機打發時間，給用戶帶來驚喜。同時突顯產品的個性化服務與對用戶的重視程度

喵喵記賬有個設計挺有意思的，按下相機拍照后，需要晃動手機來使相片成像，才能看到影像慢慢顯現，很有儀式感又有趣的互動體驗。

通過連接現實生活感受，使成像過程具備儀式感與趣味性

進入好好住的個人中心，在個人主頁上會掉落用戶獲得過的勛章， 并可跟隨手機陀螺儀的晃動而左右滾動。

通過重力感應增加個人中心的可玩性，引導用戶獲得更多的勛章并帶來驚喜。

轉載請注明：學UI網》加了手機傳感器后，這些產品/設計變得有多牛？

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

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

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

一、長線運營活動的價值

百度APP作為移動生態的搜索信息服務產品，用戶會在什么場景想到百度APP并使用它呢？

十幾年前，精力有限睡眠有限的打工人不惜犧牲睡眠時間，也要設置凌晨3點的鬧鐘；上網時間被嚴格控制的學生黨也要注冊五六個QQ小號，目的很明確：到點“收菜”，蹲點“偷菜”。十幾年后每天早上睜眼先去螞蟻森林收收自己的“能量”，再順路去螞蟻莊園喂喂小雞，安排很多手機號碼來種水果……各家產品通過帶有游戲氛圍的運營活動把產品的服務和功能以趣味化的方式傳遞給用戶，讓用戶“薅羊毛”拿福利的同時也給產品帶來增長價值。

二、百度果園設計打法

本文以百度果園為例，從長線運營增長視角分3個方面分享運營活動玩法如何設計，如何幫助百度APP持續提升用戶活躍和用戶留存：

1.建立心智：讓用戶相信百度果園的真實性，愿意參加活動，安全的“薅羊毛”；

2.養成習慣：根據用戶不同的屬性，設計玩法讓用戶養成來百度果園澆水的習慣，實現百度APP的長期留存同時把“羊毛”薅到手；

3.平衡：種植真實性+趣味化的方式傳遞給用戶，實現產品增長和用戶福利的雙重價值，“羊毛”薅不停。

1、心智建立：讓用戶相信百度果園的真實性，愿意參加活動，安全的“薅羊毛”；

A 從新用戶視角打造真實性：新用戶上我們區分兩個用戶角度進行設計：

• “薅羊毛”心理用戶：了解各類平臺的運營活動，酷愛“薅各個平臺的羊毛”，對福利性質的運營活動非常敏感；進入百度果園最先看到Loading頁面，從Loading頁面開始就在文案上告知用戶“免費水果包郵到家” 的福利性信息，圖片內容也是傾向于真實水果，利益點明確從而讓用戶繼續往下進行；利益文案和真實水果圖片繼續延續到“選種子”頁面上，明確的福利信息與行動點來打造百度果園的真實性。
• “從眾心理”的用戶，這類用戶會被「TA人已經獲得免費福利」的信息所打動，所以我們在“選種子”頁面下方增加了動態彈幕，就像耳邊有個聲音在和你說：“隔壁已經領了3斤免費水果了，快來一起！”動態彈幕不僅是在信息上吸引用戶參與活動，也是側面描述了百度果園活動的真實性，與用戶建立信任。

B 精細設計果樹成長階段，與真實場景貼合：

為了營造更加真實的種植體驗，我們在百度果園視覺呈現上也進行了升級，整體視覺效果與真實果樹成長的6個階段（種子→幼苗→大樹→開花→果實→成熟）更加匹配，建立更加真實的果樹成長過程，追求合理性和沉浸感，并且細化每一個不同水果對應的樹、花朵、果實形態，讓用戶在參與活動的過程中體驗果樹成長到成熟的真實感受，也是在視覺效果上形成百度果園的特色。

C 貫穿全流程的澆水動畫增加真實性：

• 我們在澆水動畫上進行了體驗升級，澆水動畫分前中后3步設計來增加澆水的真實感受：
• 嘗試通過動畫模擬生活中水壺澆水的行動動線，點擊澆水后水壺移動至樹的位置并傾斜至澆水方向，傾斜的同時水開始從水壺里露出水滴，整條澆水動作一氣呵成；
• 在澆水過程中，水滴分層陸續從水壺中澆水至樹下土壤，下落時水滴逐漸變弱，就像真的滴落進土壤一樣；
• 明確的澆水反饋，澆水動畫完成后，我們在樹木和土壤上同時增加了光感反饋動畫，就像是樹木真實的吸收到了水分一樣，生動輕松的反饋給用戶，讓每一次澆水都有視覺上的滿足。

2、習慣養成：根據用戶不同的屬性，設計不同玩法讓用戶養成來百度果園澆水的習慣，實現百度APP長期留存的同時讓用戶把“羊毛”薅到手。我們參考百度果園線上老用戶數據，把用戶分成3類，分別根據他們不同特點進行針對性的玩法設計：

• 沉默用戶：這類用戶很少來果園玩，活躍的時間也較少，很難長期堅持澆水；對于這類用戶，我們嘗試設計快速領水果的玩法吸引他們，把領水果當成一個完整的大目標，直接明確出領水果的時間周期，同時也把難完成大目標切割成每天要做的簡單小目標，每天召回用戶完成當日任務，從而抓住用戶回流。
• 忠實用戶：對于留存穩定的忠實用戶，我們給這類用戶增添游戲趣味，來百度果園做任務澆水時給到用戶游戲感受，我們設計了“瓜分”玩法，給到用戶一些驚喜感受。
• 召回用戶：“來幫大姨澆個水”，是不是經常在微信群里看到這樣的消息，對于幫助好友達成目標，我們設計了“合種”玩法給到用戶，由一人玩百度果園到帶動身邊親朋好友一起玩，幫助用戶更快一步達成領水果的目標。

A  沉默用戶喚醒：

「澆水挑戰領水果」玩法參考上癮模型進行設計，從push滲透入口到用戶，基于「稀缺」核心驅動力讓用戶產生興趣，引導用戶進入活動；當用戶進入果園后，通過大轉盤抽獎的方式繼續抓住用戶的注意力，持續利用「稀缺」「緊迫」心智讓用戶進入活動開始體驗玩法。開啟澆水挑戰后果園首頁上方增加明確的澆水進度提示，讓用戶了解整體玩法進度，從而建立收獲獎勵的信心。

B 忠實用戶-豐富游戲玩法：

百度果園是一個長線養成類運營活動，為了讓老用戶持續保持新鮮感，我們在果園里增加具有趣味性的「瓜分水滴」玩法，是參與兩日就可獲得獎勵的輕量化的玩法。第一天用戶進入「瓜分水滴」活動，通過大額水滴獎池吸引用戶的注意力，提起用戶的參與興趣，在行動操作上弱化付出成本突出行為動作，引導用戶點擊；用戶報名后及時提醒用戶打開訂閱增加觸達場景；并在彈窗上對付出成本與收獲回報進行對比，吸引用戶第二日再次打開百度果園參與領獎；在領獎的同時直接引導報名下一期活動，持續拉動用戶回流。

C 召回用戶-好友之間的互動玩法：

為百度果園賦予情感與故事性，好友社交上分兩步探索，第一步引導用戶去“偷”好友的水滴，在好友之間持續互動，水滴是貫穿百度果園整體玩法的重要代幣，好友的水滴被“偷”，就降低了好友“薅羊毛”的速度，但對用戶自己來說，“偷”水也需要“偷”的高效，我們在果園里增加了連續“偷”水動作，邊“偷”水邊把好友喊回來；為了豐富用戶的體驗感受，在好友果園跳轉之間增加了樹葉遮擋的動畫效果，動畫轉場同時也是替代小程序白屏轉場的好思路，營造了好朋友在果園之間串門的感受。

第二步好友互動持續升級，通過家庭合種的概念加強用戶之間的聯系，情感化的方式來提升用戶主動參與意愿，拉動身邊親朋好友一起加入“薅羊毛”的隊伍，一方面幫助用戶提升領水果的速度，另一方面也幫助百度果園在用戶上實現破圈。在玩法設計上我們區分3個視角進行設計：

• 合種的發起者：突出快速收獲，激勵用戶分享拉好友來幫忙種植水果，通過儀式感轉場和主視覺的變化營造家庭故事氛圍；
• 幫種者視角：通過彈窗上操作確認加入合種小隊，加入合種后在每次澆水時增加『謝謝你幫我澆水』的情感動畫反饋，烘托幫種氛圍；
• 共同利益視角：階段式的獎勵激勵用戶召回和拉新的好友，把共同“薅羊毛”的氛圍拉滿。

3、平衡：種植真實性+趣味化的方式傳遞給用戶，實現產品增長和用戶福利的雙重價值，“羊毛”薅不停。

百度果園在上線一段時間后，我們思考如何能進一步豐富果園玩法，要幫助業務穩定ROI，同時也要在用戶角度上玩的更加有趣。我們從體驗、用戶、增長3個角度進行分析，為百度果園增加“道具”玩法：

• 從體驗角度上打造更加真實的種植體驗趣味性，讓用戶感知更豐富的活動玩法，并與用戶的核心訴求相匹配，通過澆水道具來幫助提升用戶的澆水效率、降低澆水難度；利用互動道具增加自身收益，再留出其它能夠持續擴展的方向讓百度果園的玩法更加豐富有趣；
• 用戶角度上，幫助用戶更快實現自身領水果的目標；以及種樹人的路上永遠不能孤單的互動方式；
• 業務增長角度上，后續可以持續擴展百度果園自身特色，持續把百度APP的服務、功能推薦給用戶，持續體驗產品，增加百度APP的粘性。

結合百度果園自身可落實上，我們優先在可以提升用戶澆水效率，幫助用戶快速拿水果的道具進行試水，結合線下實際生活中的種植場景去思考，所以我們將道具名稱與玩法設定為「化肥」，在種植中增加化肥收益，提升果樹的種植進度，讓百度果園在玩法上更加生活化。

新玩法上線后，通過上線提示引導用戶去使用道具，用戶進入百度果園后先給到用戶一袋「化肥」來體驗玩法，讓用戶快速感受到道具帶來的實際價值，從而建立信任。用戶使用道具后，果園主頁直接破殼「化肥」道具的狀態，我們給到「化肥」道具3種狀態來描述使用情況；健康有活力的綠色狀態代表化肥的養分非常充足，果樹的成長速度加倍；橙黃色代表果樹的生長進度欠佳，需要用戶關注；紅色狀態代表果樹缺少養分，需要用戶去使用新的「化肥」，并在紅色狀態下我們直接破殼使用引導，直接提示用戶點擊。

三、后續發散

隨著百度果園的進一步成長，能夠帶給用戶的不僅是“薅羊毛”類活動的概念，百度果園也會繼續向帶有社會價值與故事性活動內容延伸，更多的去賦予精神意義與社會意義；我們后續也會持續打磨、持續平衡產品收益與用戶情緒的價值，不僅僅是在“薅羊毛”，更會讓每一次的澆水、施肥和每收到的一箱水果都有自己的含義。

寫在最后

增長是產品商業化持續的目標，有了百度果園的經驗和設計思路，也為我們后續探索新的長線活動玩法提供了基礎和經驗，我們的工作也將持續充滿著挑戰和更多樂趣。

作者：百度APP用戶體驗

轉載請注明：學UI網》關于“薅羊毛”那些事兒——百度果園長線活動設計思考

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

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

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

不能被一個網站而限制

最近 Behance 封停了國內賬號，導致很多設計師無法訪問，因此也流傳了很多解決方案。今天黑馬哥就不和大家討論這個解決方案了，其實有很多同學就算在能訪問的時候也沒看幾次~O(∩_∩)O~。

這個事件告訴我們，設計師的習慣是多么的重要，我們的設計靈感不能因為一個網站平臺而局限。退出賬號依然可以訪問，只是很多同學糾結的是自己的收藏沒有了，如果平時養成本地化采集的習慣，你就不會出現這個問題。我們不要把希望寄托在云端，只是買一個硬盤就能解決的事情，也不要覺得不方便，其實很多作品我們也不會經?？?，存儲只是為了不時之需。每年都對采集的作品進行一次整理，近兩年的放在電腦里面，時間過長的存儲在硬盤里面就可以了。主要還是要對作品進行分析，掌握作品的技法經驗和設計思維才是關鍵。

除了存儲習慣以外，我們也不要只是固定訪問一個網站獲取靈感，優秀的設計類平臺是很多的，我們要發現更多新大陸。下面黑馬哥為大家精選幾個訪問頻次較高的國外平臺，國內的大家都比較熟悉這里就不列舉了。

設計/插畫等靈感網站推薦

以下推薦一些個人比較常用的幾個網站，排名不分先后，屬于隨機性排序。

1、notefolio

https://notefolio.net/

notefolio 是韓國的一個設計交流網站，很多設計師都會在這里分享自己的設計作品和進行設計交流。和國內很多設計作品分享平臺類似，是一個綜合型設計師交流社區，有平面設計、UI/UX 設計、插畫、產品包裝設計、攝影、版式設計、數字藝術、美術、工藝等等。

2、Mobbin

https://mobbin.com/

這是一個匯集全球優秀 APP 截圖的網站，有超過 50000 個優秀 APP，節省了下載應用的時間，對于 UI 設計師來說非常實用。

同樣的應用還提供了 iOS 和 Android 兩個不同版本的截圖，簡直非常的人性化。這是一個使用起來非常簡單的網站，海量的設計必將開啟你的靈感腦洞。

3、Pinterest

https://www.pinterest.com/

這絕對是一個靈感采集的絕佳網站，經過眾多用戶的長期積累，已經匯集了全球大量的優質圖片資源，其中設計作品也是非常豐富，且質量都普遍偏高。

你可以通過關鍵詞搜索、畫板關注、以圖搜圖等操作獲得靈感，而且相似推薦還能延伸出更多類似構圖、配色、主題等圖片資源。點擊作品還能跳轉到原始出處，順藤摸瓜找到更多優質資源，真的是非常便利。

4、Designspiration

https://www.designspiration.com/

該網站除了通過關鍵詞搜索圖片內容以外，在搜索欄有?個調色板的圖標，點擊可以通過指定的顏色進行搜索相關配色的圖片或者設計。在選擇顏色的時候不是單一的色彩選擇，可以選擇幾個配?組合進行搜索，對于設計師來說?常實用。

5、Abduzeedo

https://abduzeedo.com/

Abduzeedo 是一個優秀的設計博客，提供給設計師創意和靈感的社區，這里有設計、攝影和 UX 等相關的文章提供給那些想尋找靈感的設計師。這是一個開放的設計社區，它是設計師日常的靈感來源。

6、UI Garage

https://uigarage.net/

UI Garage 提供了很多應用設計的截圖和模板，專業細分的類別和精挑細選的設計截圖，還有很多設計工具推薦，是一個非常實用的網站。在這里不僅可以獲得設計靈感，還能獲得優秀的設計工具或者插件來提高我們的工作效率。

7、Dribbble

https://dribbble.com/

Dribbble 相信很多喜歡 UI 設計打卡的同學比較熟悉，匯集了大量設計師的一些日常創意作品。該網站不同之處是發布作品需要邀請碼，就是需要有邀請碼的設計師邀請加入才能發布作品，獲得邀請碼也相當于設計能力獲得認可。

整體作品的質量還是不錯的，如果當你設計時沒有想法，這是一個不錯的靈感采集地。

8、ndc

https://www.ndc.co.jp/works/

這個網站展示了很多非常不錯的設計作品，偏向于簡約風。相信這些項目設計的靈感，可以帶給我們更多的設計思考。

9、FolioArt

https://folioart.co.uk/

FolioArt 是一個插畫藝術作品展示網站，擁有高質量的插畫作品，形式也多種多樣。就像一個插畫家的資源庫，讓有商業需求的客戶通過這個平臺，和世界頂尖的插畫師進行合作。

10、unDraw

https://undraw.co/illustrations

這里提供的插畫作品數量眾多，各種小場景的插畫無論是獨立使用，還是組合使用，肯定可以滿足很多場景需求了。平臺內置的編輯器還可以對插畫進行調色，導出格式也是支持后期編輯，非常的實用和便利。

小結

設計的靈感來源途徑是很多的，不局限于某一個單一路徑，以上的推薦僅為拋磚引玉，還有很多優秀的網站給我們帶來設計靈感和經驗學習。每個人的關注焦點和選擇角度不同，以上僅為個人推薦，不足之處歡迎大家留言補充。

作者：黑馬青年

轉載請注明：學UI網》設計靈感不應該被一個網站而限制

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

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

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