<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

082022-2

中國設計師必須知道的8種中國風

1.國畫

國畫是最具代表的中國風，用毛筆、墨水和顏料作畫，但現在的插畫師也可以通過手繪板里的毛筆筆刷，畫出類似國畫的效果，最常被用于設計的國畫主要是水墨畫和工筆畫。

2. 現代國風插畫

指插畫師通過手繪板創作的，顏色更豐富、細節更細膩、組合更隨意、元素更多樣、形式更具創意的，類似中國畫的畫風。

3.剪紙風

常常被設計師認作是剪紙風格的剪紙設計，其實有兩種風格，一種是傳統的中國剪紙，另一種是紙藝。

a.中國剪紙

是一種用剪刀或刻刀在紙上（通常是紅紙）剪刻花紋、圖案的藝術創作，效果是平面的。現在設計師也可以通過電腦創作出類似剪紙藝術效果，而且可以做得更靈活、更豐富。

b.紙藝

指以各種紙張為主要材料，通過剪、折、刻、拼、疊、編織等多種手段制作出來的藝術品，效果通常是立體的。

4.毛筆書法

指用毛筆和墨水寫出來的文字，并且書體局限于行書體、草書體、隸書體、篆書體、楷書體這五種，很多中國風設計作品，會直接以毛筆字作為設計的主體。

5.漢字

漢字本身就是是中國元素，所以我覺得，直接以漢字作為設計的主要元素也是中國風設計，其中宋體字以及宋體字的筆畫是最常用的元素。

6.版畫

指通過刀、化學藥品等在木、石、麻膠、銅、鋅等版面上，雕刻或腐蝕后印刷出來的圖畫，其中木刻版畫在20世紀30年代至60年代之間尤為鼎盛，形成了獨特的中國特色。這種藝術手法也被很多設計師和插畫師用到平面設計中來，滿滿的復古氣息。

7.民國風

中華民國時期誕生了一大批獨具特色的美術和海報作品，畫風細膩，元素常以穿著旗袍的女人為主。也是當代設計師很喜歡效仿的中國風。

8.刺繡

刺繡是用針線在織物上繡制的各種裝飾圖案的總稱，屬于中國民間傳統手工藝，也被設計師用到現在的設計作品中來，除了繡圖案也還可以繡文字。

以上8種就是常常用于表現中國風設計的藝術風格，在創作時，為了使最終效果既具有中國特色，又不致于太過傳統，常常需要設計師或插畫加入現代的元素、字體、色彩、構圖、創意、以及排版。好了，現在可以開始你的創作了。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網》中國設計師必須知道的8種中國風

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

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

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

評論(0) 瀏覽(2214)

082022-2

做設計改版前，如何準確洞察產品問題

？

1.從業務視角出發

首先需要理解“業務”的范疇，指的是公司層面和產品層面出發，這個問題會影響產品體驗、市場占有率、收益、活躍度等關鍵性問題。我們從業務視角出發挖掘產品問題，可以從兩個視角切入：公司發展戰略和產品需求。

舉個例子，公司下個季度的需求目標，是要提升產品的語音交互次數（語音喚醒次數）。

我們拿百度地圖來舉例，除了導航，語音就是比較核心的一個功能。我們在使用百度地圖時，有時候會使用語音輸入地址功能，然后發起導航。在導航過程中，繼續喚醒語音為你提供服務，那么這個喚醒的頻次，就是這次公司下個季度的戰略發力方向。如果這次設計中沒有去著重解決這個問題，那么我們下個季度的目標也是無法完成的。

所以大家應該明白理解業務目標了，在做設計前，是一定要了解業務視角下的產品具體需求，這樣才能真正解決具體問題。

2.從用戶視角出發

回到用戶身上，洞察問題，也是挖掘產品問題的主要手段。例如：我們需要思考為誰而設計？這些用戶的行為習慣這樣？他們的喜好及影響到他們操作使用的問題是哪個？用戶期待產品是什么樣子的？他們印象中產品應該是怎樣？

從用戶視角洞察問題，常用的方法有，桌面研究，用戶畫像，用戶旅程圖等。

桌面研究：日常用戶反饋收集，應用商店收集整理。

用戶畫像：用戶人群細分，不同類型用戶需求痛點研究，一般情況下，如果需要這一步，都需要用研同學加入，畢竟他們比設計師更專業可靠。通過用研研究分析，我們可以知道用戶期待的產品會是怎樣的氣質？性格特點。

用戶旅程圖：按照用戶使用產品全流程，需構建一個用戶體驗路徑中的各個時間段的做的任務和觸點。例如：一個運動產品分為運動前、開始運動、運動中、運動結束等4個大階段，那么你要做的就是研究這4個階段體驗糟點研究和分析。分析出來的結論用于設計指導。

通過上面我們可以看出，用戶視角出發可以通過三個方向去做，當然并不是每個層面都需要做，你可以選擇其中一個點深入。

3.從行業競品視角出發

從競品視角出發，幫助我們對照競品找出自身產品問題，取長補短。從競品視角出發我們一般都是看什么？以設計師視角為例，分析行業競品，首先從目標出發，在競品中找到一部分關鍵性設計策略。

看功能：競品核心功能怎么做的？功能布局差異化怎么做的？然后和自家產品進行對比優劣分析。

看體驗：核心功能體驗路徑如何做的？峰值體驗如何創造？情感化場景如何設定的。

看視覺：看品牌DNA如何打造，品牌多元化場景穿透思路，品牌差異化創新設計思路。

從行業競品視角出發，逐步分析設計機會點，在同質化的今天，找到解決策略。

4.寫在最后

今天主要講了，設計改版或者設計探索前期的必備工作，洞察產品問題。如何才能真正的找對問題，洞察到設計機會點。本文從三個視角切入：業務視角、用戶視角、行業競品視角切入，三者環環相扣，系統化思考產品的本質問題。

從側面也反應出，設計師需要具備多元化思維，多個維度立體化思考，才能精確地定位問題，為產品找到準確的發力方向。

原文地址：功夫UX（公眾號）

作者：Tony

轉載請注明：學UI網》做設計改版前，如何準確洞察產品問題

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

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

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

評論(0) 瀏覽(1727)

082022-2

進了大廠后，我才知道原來我的細節差這么多！

01 這個疊加是假的

我看釘釘群里有人問下面這種風格的圖標是用的什么模式疊加的：

我之前有做過類似的，其實這個疊加的效果是假的，和毛玻璃一樣的原理，中間疊在一起的地方，其實是一個單獨的圖形：

我們把這個單獨的圖形加上一個漸變色，放在最上面，效果就出來了：

這個漸變的是可以任意更換顏色的：

所以，這個疊加效果，并不是我們想象中那樣用疊加模式調出來的。

反正我是這樣做的，供大家參考。

02 包裝的問題

下面這組練習，單從圖標來看其實是沒有啥問題的：

統一性啥的都還ok，但是毀在包裝上了，比如黑色方塊下面盡量就不用加投影了，太臟了：

其次就是黑色下面的背景色用了一塊淺紫色，毫無關聯性，不如直接用灰色，或者如果色塊是深紫色，背景是淺紫色，那也ok：

總之就是要有一定的關聯性，不然就會比較奇怪。

03 關于圓角的和諧性

其實我們在看圓角的時候，并不僅僅只是一組圖標之間的統一，單個圖標的圓角統一也要注意。

比如之前有一次優化的圖標，就是因為圖標頂部和底部的圓角大小不一：

今天看的這個是優惠券的：

也是感覺有點難受，但是如果是下面這個優惠券就精致很多：

其實也是因為圖標內部圓角統一的問題，都是直角就會舒服很多，但外輪廓是大圓角，里面是尖角就會比較難受。

04 為什么這組半原創沒有原版耐看

有一位星友做了一組半原創練習，原版是這組：

半原創是這組：

我們會發現，原創的圖標沒有原版耐看，為什么呢？

因為原版的細節足夠豐富，但是半原創的細節就很單薄，比如我們看原版的獎杯，底座加了兩側矩形，如果只是一條橫線就會相對非常單薄普通：

再比如這個放大鏡，把手也并不只是一條豎線，而是分了兩段，加了細節：

按照這個理念來分析，我們可以發現半原創的幾個圖標，只有第四個看起來比較耐看，因為它的細節相對比較豐富，可以跟得上原作，其他都相對單薄一些。

雖然第二個錢包紐扣那里也加了兩層，但是疏密度有點問題，而且也比較常規。

05 看幾組星友精選的練習

最后再看幾位同學的精選打卡，非常用心：

第一組是donna的！

融合很多細節，也有很多自己的想法，變得更加豐富、精致、統一，非常優秀：

第二組是小7的

統一性做了很好的優化，又加入了自己的斷線想法：

第三組是慢格調的：

很精致，疏密度、大小、長短高矮，用色比例全都進行了統一性調整，非常優秀。

也融入了很多自己的想法，繼續加油：

總結

今天就先分享這么多了，每天進步一點點，現在開始，永遠不晚！

原文地址：菜心設計鋪（公眾號）

作者：菜心設計鋪

轉載請注明：學UI網》進了大廠后，我才知道原來我的細節差這么多！

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

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

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

評論(0) 瀏覽(1586)

082022-2

快學，簡單出彩的刷屏級彌散光教程來了

什么是彌散光感？

彌散光感的形成，一般由單色或者多色模糊漸變混合，形成虛實集合的模糊效果。在這其中還可以加入不同的元素使其具有新奇和記憶點，來豐富單調乏味的畫面，增加畫面空間層次感，增添畫面的細節，還能聚焦產品的記憶點、優化信息層級，讓平淡無奇的排版瞬間活了起來，下面我們就來看看彌散光感的一些優點。

彌散光感的優點

1. 豐富設計細節，增添畫面感

2. 聚焦重點，吸引目光

3. 營造空間層次感

彌散光感常用的形式

1. 虛實結合

一側進行虛化模糊，另一側保持清晰的輪廓，整體從觀感上多了一些動感變化效果。因此，不管作為版面的主視覺，還是作為輔助部分都能有不錯的效果。

2. 單體模糊虛化

將一種或者兩種以上顏色進行全部模糊虛化掉，一般多作為背景裝飾來使用。在此基礎還可以加上不同的元素，再增加一點噪點質感，細節滿滿。

3. 多重混合

使用多種不同模糊方案或手法，以彌散光感為基礎，來達到視覺聚焦和豐富設計細節，增添畫面感和空間層次感。

如何設計這種彌散光感？

看到這里大家都肯定要嚷嚷，光說不練假把式，安排上菜，我們先從簡單的開始，蘿卜要一個一個吃，坑要一個一個的埋，翠花，上酸菜！

第一步

首先我們來設計一個banner,這個案例就用最簡單的高斯模糊來做，這種全彌散的漸變實現起來比較簡單，顏色我設置為如圖三個顏色和三個圓形。

第二步

為了保留模糊參數的后期可編輯行，模糊之前，先給三個圓形轉換為智能對象，可以三個一起起智能對象，也可以單個一個個的智能對象，后者的好處是可以隨時調整圖形的位置與大小。然后給智能對象一個高斯模糊（濾鏡-模糊-高斯模糊）

第三步

高斯模糊后，有時候有的顏色融合的不是很好，這個時候我們可以通過調整圖層疊加模式或者透明度，讓顏色之間融合的更協調，案例中我覺得青色過于實了，降低一下透明度70%，到這里，基本的背景就完成了。彌散光感背景就是這么簡單！

第四步

確定信息層級

我根據之前的梳理和自己的意愿，把文案分為了4個層級，中文英文的主題信息作為最高層級存在；然后我想突出時間，所以把它放在第二層級，其他元素依次往后排。

第五步

添加主文案

我們先確定大標題，然后再用小字來進行版面的填充與平衡，讓整體的文字排版形成視覺層次變化與平衡。由于圖形位于對角線位置，在文字分布上我順應這個構圖方式。英文和中文之間互相疊壓一點，這是壓抑不住都要買的節奏?。☆伾缓谝话准訌娭g的對比關系。

第六步

添加第二、三層級內容

為了讓版面的保持視覺上的平衡，二、三層級的內容和主題內容形成交錯穿插，讓整體的文字排版形成視覺上的一個層次變化。

第七步

細化排版

到這一步，整體排版基本完成了，但整體感覺信息之間比較獨立，我們添加一些裝飾元素，讓畫面更整體飽滿緊湊。OK，一張banner完工

馬上要過年了，新的一年，換新的工作，所以這次的案例就為大家做個作品集封面，俗話說：作品封面做的好，工資翻番少不了。

第一步

確定信息層級

作品集文案的內容并不如一些展覽海報類那么多，所以在整體的編排上難度不是很大，根據內容需要找到自己想要突出的重點即可。

信息文案一般大致上可以分為三種類型，①主題信息適合作為主標題存在；②與活動相關的具體信息則次之，當然，我們也可以根據內容選擇性的突出其中某一項，如價格、時間或是其他；③其他的補充輔助性信息，這類的信息一般作補充說明，相對不是很關鍵，所以適合作為裝飾性的元素來放在需要的地方。

第二步

彌散光感背景

建立4個大小不同的圓形，填充不同的顏色，然后單獨給每一圖層智能對象后，調整各自的模糊數值。根據需要調整圖層疊加樣式或者透明度

第三步

添加虛實漸變

①光這樣的話，稍顯單調，所以我們再加點料。新建一個圓形，填充淺藍色，然后新建2個圖層并創建剪貼蒙板，用柔邊畫筆畫深淺2個大小不一的顏色，然后把3個圖層合并一個智能對象。

②給智能對象一個場景模糊（濾鏡-模糊畫廊-場景模糊），場景模糊具有定義不同模糊量的多個模糊點來創建漸變的一種模糊效果。將多個圖釘添加到圖像，并指定每個圖釘的模糊量，從而達到一種虛實模糊不同的模糊效果。本案例定義2個模糊點，一個模糊量0.一個為60，通過一邊模糊，一般不模糊來達到一種虛實結合的變化，

③為了讓背景更豐富有層次感，再用①的方式再新建一個圓形，填充不一樣的顏色，然后執行場景模糊，圖層疊加為“色相”，效果如圖。

第四步

添加文案信息

為了體現層次空間感，大標題我用虛實模糊的圓形壓住一部分，交錯穿插，讓整體的文字排版形成視覺上的一個層次變化。

第五步

細化排版

細化排版，添加一些輔助元素，填補版面的負空間，這件，一個作品集封面就完成了。

這次來運用光圈模糊做一個展覽海報。

“光圈模糊”對圖片模擬淺景深效果，選擇“光圈模糊”（濾鏡-模糊畫廊-光圈模糊），將在圖像上放置默認的光圈模糊圖釘、單擊圖像可以添加其他模糊圖釘，說明:A. 銳化區域 B. 漸隱區域 C. 模糊區域，拖動句柄移動它們以重新定義各個區域。拖動模糊句柄以增加或減少模糊。一個圖片中可以添加多個光圈模糊進行重復疊加來達到不同的效果。

第一步

確定信息層級

第二步

彌散光感背景

基于文案內容是港澳臺三地及青年藝術家，所以在背景上希望能表達出三地的概念，顏色上用淺青+黃色系表達出青年藝術家這一人群。青年嘛總是要嫩點，鮮點。

建立三個大小不一的橢圓，智能對象后，再分別進行光圈模糊，制作方法上除了光圈模糊，當然也有其他的實現方法，只不過個人覺得光圈模糊會更方便一點~

第三步

完善彌散光感背景

海報彌散光感背景基礎完成了，現在復制三份，從上往下排列，體現三地的概念，為了讓每個色塊之間有所差異，在大小排列上做了一些調整與變化。

第四步

添加標題

根據上面的信息層級，放上主標題，根據主題意義，對字體做一些簡單的筆畫裁剪，英文用底色做一點點遮擋，點綴點星星，群星閃耀港澳臺。

第五步

添加其他信息

將其它文案分布在海報的下面，注意平衡一下整個畫面。

第六步

最后用網格規范下文字信息編排，用網格可以比較精確地將版面編排出來。大家可以清晰地看到，所有的文字的大小和位置都是有依據的，都卡在模塊網格之中的。

旋轉模糊通常用于創建圓形或者橢圓形的模糊，比如飛馳中的輪胎，轉動的摩天輪等等都是旋轉模糊的具象表現。濾鏡-模糊畫廊-光圈模糊，點擊拖動橢圓邊框改變模糊的大小。中間的模糊圈可以用來調整模糊的量，或者模糊的角度。也可以增加多個模糊點

移軸模糊點擊濾鏡-模糊畫廊-移軸模糊，如下圖樣式。虛化的大小可以通過白色圓圈調節，虛化位置可以通過移動位置或者旋轉進行調整。這樣就實現了虛實集合的光感設計。

第一步

確定文案信息層級

第二步

建立任意門

根據文案的信息內容，我想用眼睛和日出來表現這個海報的主題概念。根據上面方形旋轉模糊的特性，我在畫面中建立了一個任意門的圖形，它可以帶去往不同的時空，咳咳咳…傳錯了，還是傳回來寫完這個教程了。

第三步

執行旋轉模糊

先把任意門圖層轉為智能對象，然后執行旋轉模糊，具體參數所見及所得，根據實際效果來調整參數即可，這一步，可能會有點慢，耐心等候，不急哦。

第四步

一起看日出吧

進行到這一步，發現畫面缺少一個視覺中心來作為視覺聚焦點，然后在眼眶中心新建一個紅色的圓形，轉換智能對象，執行移軸模糊。太陽出來了！有人要一起看日出嗎？

第五步

日出倒影

對日出圖層，執行濾鏡-液化工具，用“向前變現工具”來回擦，一邊往里擦，另一邊往外擦的的節奏來回擦，為日出擦出水面倒影，這一步需要耐心，一次不行，可多嘗試幾次，以達到理想效果。

第六步

添加文案信息

根據畫面的圖形構圖，文案信息的編排方式上采用壓四角的編排方式，留出中間的視覺中心點。

第七步

網格規范

最后根據網格來規范下文字信息編排。

最后一個案例我們來用下最近流行的毛玻璃效果，看看彌散光和毛玻璃能碰撞出怎樣的愛情火花，好了，話不多說，直接干貨走起。

第一步

彌散光感背景

拉出4個大小不一，顏色各異的圓形，擺放位置按自己想的構圖排列就行，把握不好也可以模糊后再調整都可以，方法不一，效果達到就行。然后把4個園一起轉換為智能對象后，并進行高斯模糊。一個彌散光感背景就這么簡單的做好了。

第二步

毛玻璃制作

新建一個淺藍色圓形圖層，crtl+j復制圖層，2個圖層前后錯開一定的位置，底下圖層填充一個從淺到深色的漸變，確定好厚度位置后，將淺色層和深色層重疊的部分用蒙板遮住，只留邊緣，這樣就可以形成玻璃厚度的效果。

第三步

優化毛玻璃細節

將上面淺色層的透明度降低，這樣就形成了玻璃半透明效果。接著對玻璃的轉角和邊框高光等細節進行處理。加上玻璃的受光面和暗面

第四步

完善構圖版面

將上面做好的圓形玻璃，復制2個，根據自己的構圖需求擺放，為了不至于形狀都過于統一，把其中一個智能對象，然后ctrl+t進行扭曲變化，做一個傾斜點的毛玻璃，讓整體構圖更靈活層次感。

第五步

添加文案

添加文案信息，編排好文字信息主次關系。標題設計上采用了一個漸變疊加的處理，在呼應主題的“融合、共”的意思，同時，讓標題增加一點細節，讓它有那么一點點的設計感。

第六步

模糊文字

將與玻璃塊疊加部分的內容模糊掉，這樣毛玻璃質感效果就更像了。至此這個具有UI風格的海報就完成了，如果，覺得背景比較單調了，還可以繼續把前面的毛玻璃智能對象復制一個，ctrl+t變形扭曲，或者添加噪點紋理，為背景填充更多的細節。

最后

前面幾款案例中，如果想要更有質感，還可以在做完再給畫面增加噪點質感，增加方法有2種，①濾鏡-濾鏡庫-紋理-顆粒。②濾鏡-camera raw濾鏡-效果-顆粒。我個人比較傾向后一種，顆粒比較細膩自然。

原文地址：胡曉波工作室（公眾號）

作者：胡曉波工作室

轉載請注明：學UI網》快學，簡單出彩的刷屏級彌散光教程來了

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

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

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

評論(0) 瀏覽(2054)

272022-1

APP項目設計總結

我們是有底線的~O(∩_∩)O~

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》尋工鳥招聘APP項目設計總結

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

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

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

評論(0) 瀏覽(2070)

272022-1

彩鉛肌理扁平插畫教程（附筆刷）

* 本篇教程的示范作品，由我的助理琳琳原創繪制，如需轉載教程請申請授權，盜用作品或未授權轉載，侵權必究！



知識重點：彩鉛肌理刻畫技法
操作工具：數位板 |  Photoshop
操作難度：★★★☆☆

在學習彩鉛肌理插畫之前，我們先來簡單了解一下什么是彩鉛。
彩鉛畫，是一種綜合了素描和色彩之間的繪畫形式。它的獨特性在于色彩豐富且細膩，線條感清晰，可以表現出較為輕盈、通透的質感。
給大家介紹一位英國插畫師 Melissa Castrillón 。
Melissa Castrillón 她出生在英國的一個叫 Hitchin 的小鎮，2014 年她在 Cambridge school 獲得了碩士學位，她繪畫的兒童書籍獲得了一等榮譽學位，現在她生活工作在劍橋，是一位自由插畫師。
她的插畫運用了彩鉛肌理與絲網印刷結合的技法，加上獨特的雙色調配色，讓她的畫面從插畫繪本里脫穎而出。

* 圖片來自英國插畫師：Melissa Castrillón，僅供賞析
*
分析 Melissa Castrillón 的

畫風特點

//
1.與絲網印刷疊透效果相結合
* 圖片來自英國插畫師：Melissa Castrillón，僅供賞析

2.雙色調配色
* 圖片來自英國插畫師：Melissa Castrillón，僅供賞析

3.使用大量的裝飾線條

* 圖片來自英國插畫師：Melissa Castrillón，僅供賞析

說了辣么多，想必對這次的彩鉛肌理插畫大家也有了一個大致的了解了。那讓我們馬上進入今天的主題吧~

生活不止眼前的電腦、手繪板，還有詩和遠方，你要是沒辦法去遠方，那可以上百度找找。
我們通過搜索關鍵詞【奇花異草】就可以得到很多相關聯的圖片。
TIPS:在選擇植物的時候選擇塊面清晰的植物。

只畫一些植物似乎有些單調。為了讓畫面更有趣，可以加一個人物主角。我的想法是讓我的主角靠著樹看書，所以選擇了一個類似的人物動態照片作為參考。


照片降低透明度墊底，用火柴小人提取動態。

對火柴小人的動態進行夸張處理。

給火柴小人拾掇拾掇，加上五官，設計服裝。

最后，給在衣服上設計一些裝飾花紋。

主角就畫好了，我們再來回顧一下步驟。


接下來，我們來繪制植物。先對照片的輪廓進行概括，提取植物形態。


接著進行二次變形，再次簡化造型。

最后，將植物圍繞主角擺放，組成完整的一個畫面，線稿就完成了。


接下來就到了萬眾矚目的配色環節。

以藍綠色為底色，運用對比色與互補色，使畫面具有氛圍感的同時加強視覺沖擊力。

使用大面積的暖調橙和紅色，加上一些深藍色點綴，使畫面達到一種熱烈明媚的感覺。

使用大面積的綠色背景，加上紫紅，橙色對比色搭配，使畫面富有活力氛圍。
TIPS:在配色的過程中，改變色相、飽和度和明度帶來的色彩冷暖感受也不一樣，那么冷暖也是需要對比才能感受到。



接下來，我們開始給畫面增加細節。本次用到的肌理筆刷有四個。

第一步：背景刻畫。
使用「村口交錯肌理」給背景增加粗糙肌理。吸取比底色淺一些的顏色繪制肌理，再吸取比底色深一點的顏色疊加肌理。

使用「村口彩鉛」吸取比底色亮的顏色，沿著植物的外輪廓繪制密集的虛線裝飾。
背景就搞定了。

第二步：植物刻畫。

· 葉子

使用「村口彩鉛」繪制粗細不同的線條給葉子增加脈絡。

用「村口彩鉛」在葉子邊緣繪制線條。

再使用「村口彩鉛」延著葉子經脈繪制白色亮線肌理。
TIPS:在繪制線條時可密集一些，繪制長短不一的線條。

· 蓮蓬

用「村口彩鉛」繪制肌理，沿著邊緣繪制亮暗線條。



用「村口彩鉛」沿著蓮子周圍由外向內繪制明暗線條。


吸取比底色淺的顏色，用「村口彩鉛」沿繪制亮線，增加蓮蓬質感。再吸取深一些的紅色繪制線條裝飾蓮蓬。

· 花朵

吸取紫色用「村口硬邊圓」繪制花瓣內壁。


吸取深紫色使用「村口彩鉛」從里向外繪制暗部線條，線條要密集。再吸取花瓣外壁的顏色繼續繪制亮部線條。



吸取比花瓣底色深的紅色用「村口彩鉛」繪制花瓣暗部，吸取綠色繪制葉子經脈。

最后在花瓣上繪制一些亮線，在葉子上使用綠色從里向外繪制暗部細節。

第三步：人物刻畫
使用「村口彩鉛」繪制粗細不一的頭發線條，再使用飽和度低的棕色疊加頭發線條。

使用淡黃色和藍綠色使用「村口速寫」給衣服繪制一些簡單的裝飾。


使用「村口彩鉛」繪制褲子的紅黃藍的條紋裝飾。

使用「村口速寫」在頭發與衣服重疊處，手臂與身體重疊處繪制投影。再使用「村口彩鉛」在暗面繪制深色暗部線條。

使用「村口速寫」在手指尖尖，手臂兩側繪制暗線條，線條從指尖逐漸向手臂內減少。在手臂中間繪制一些亮線，增加皮膚通透質感。

面部同理。在鼻尖，耳朵邊邊，腮紅邊繪制深色線條，再使用淺色在面部繪制一些亮線。

最后，使用「村口速寫」繪制暗面，就完成了！

第四步：增加絲網印刷效果
復制花蕊，挪動錯位，并調整模式。我這里使用的是“線性加深”，大家可以多去嘗試其他的模式，不同顏色和不同模式之間會產生不同的效果。
關于絲網印刷具體內容跳轉至《有趣又炫目！絲網印刷風格插畫教程（附專用筆刷）》

在這張插畫里，絲網印刷效果多用于投影。

咻咻咻的一頓操作以后，一張「彩鉛扁平」插畫就duangduang的完成了！
本次教程用到的筆刷包，文末可以獲取。

【彩鉛筆刷】鏈接：https://pan.baidu.com/s/1c8qol3_QaxANZCrxSGx4vQ 提取碼：2022

原文地址：胡曉波工作室（公眾號）

作者：藍貴蓮

轉載請注明：學UI網》彩鉛肌理扁平插畫教程（附筆刷）

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

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

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

評論(0) 瀏覽(3022)

252022-1

3種狀態+5種模式，從UX角度分析加載設計

三種加載狀態

頁面加載進程會受多方面的影響，例如頁面里圖片、圖標的數量，頁面中是否有三維場景或模型，是列表式設計還是卡片式設計…

逐一加載

對于可以同時進行多個加載任務的產品，更適合應用逐一加載的形式，這樣做能減少用戶對于等待的感知程度。任務列表逐一加載的過程會給用戶帶來一種秩序感。

完全加載

進入一個網站或App，很多頁面都會一下就顯示出來所有內容，這種頁面完全加載的形式對用戶來說更熟悉。

同樣，頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。

延遲加載

延遲加載是用戶主動觸發的操作，根據操作系統反饋對應的結果。延遲加載包括三種形式：

無限滾動：當檢測到用戶快要到達列表或頁面的末尾的時候，通過無限滾動來作為觸發器，引導用戶獲取更多內容。

加載更多：通過點擊“加載更多”按鈕來獲取更多內容，這個過程由用戶主導決定，是否選擇點擊。

分頁加載：分頁是在不同頁面上進行的延遲加載。這個過程也是由用戶主動選擇，但和“加載更多”按鈕不同的地方在于，分頁是頁面間的切換，并且用戶能清楚地看到具體的頁面數量。

五種加載模式

加載模式需要依托場景去考慮。比如一個1秒就能加載的頁面和一個需要5秒才能加載出來的頁面，我們就需要考慮使用不同的加載模式設計，這樣才能做到差異化設計。

這里我做了一個表格，將頁面加載需要的時間以及對應的加載模式進行了整合。

0.1秒以內

如果加載時長低于0.1秒，用戶不需要等待加載過程，內容就能即時呈現出來，有一種“還沒開始就已經結束”的感覺。

0.1秒以內的加載不需要在頁面中添加任何加載狀態，但要一個場景需要格外注意，如果用戶剛完成一系列復雜的操作，點擊提交之后，考慮為用戶提供撤消機制。

▲用谷歌郵箱發送郵件時，發送成功之后會彈出一個撤銷提示，允許用戶在5s內撤銷剛才發送成功的郵件。

0.1-1秒間

大多數產品的頁面加載速度都在這個區間，用戶幾乎不會注意到這種加載延遲。所以我們不需要增加額外的加載動效來填充這段加載時間，不然可能會起到畫蛇添足的反面效果。

試想一下，如果在每個頁面加載的過程中都加上加載動效，不僅會分散用戶的注意力，并且屏幕上總出現不斷跳動的內容，會讓人感到很焦躁。

1-2秒間

如果加載時間超過1秒，用戶就會感知到這個加載過程，這個時候我們就可以考慮適當添加加載動畫，緩解用戶等待的焦急感。

微加載：1-2秒的加載時間對用戶來說，說長不長說短也不短，優先推薦輕量級的動畫加載形式，為用戶提供一種進度感。

▲在下載內容的過程中，使用這種輕量級的環形動畫來顯示加載進度，簡潔清晰，而且還能作為組件來復用，能夠極大提升工作效率。

骨架屏：用于整頁加載，這種加載形式在產品中的應用也越來越頻繁。骨架屏可以讓用戶在等待加載的過程中，先了解頁面的架構。

在骨架屏基礎上，可以“選裝”一些好看的效果，增加頁面加載時的視覺體驗觀感：

微光效果：在骨架屏基礎上添加微光效果，光感的加入能將用戶的注意力從等待中轉移開，有效地減少等待感知。

脈沖效果：效果和微光效果很像，差異的地方在于脈沖效果用于單個的任務或卡片列表。

2-10秒

這個加載時間對于用戶來說已經很長了，對于設計師來說，需要對這段加載時間進行合理有效地設計，來提升用戶體驗。

時間提示：在開發中很難以分和秒為單位來精確地估計加載時間。

如果在加載的過程中，想給用戶一個期望的時間值，告訴用戶整個加載過程需要多長時間，我們可以用“這可能需要幾秒鐘”這種提示方法，既能展示加載需要的時間，又能給用戶一個時間預期。

進度條：最常使用的加載形式，加載過程中使用緩入動畫會讓整個過程看起來更像在加速。

分步提示：如果加載過程過長，可以將整個過程分為幾個不同的步驟，幫助用戶預估操作完成需要的時間。如果系統正在處理多個項目，分步提示的設計能讓用戶明確了解已完成的操作。

10秒以上

百分比加載：使用百分比加載雖然不能告訴用戶加載完成需要多長時間，但是能提供一種過程感，讓用戶自己來估計加載時間。圓形進度條+百分比是最常見的加載形式。需要注意的是，不要在加載到99%的時候讓進度條卡住不動，這樣會讓用戶感到焦急。

后臺加載：如果一項任務需要加載很長時間，我們不能讓用戶看著進度條干等，其他什么都做不了，這種情況我們可以考慮將任務放到后臺去加載。

在Google Drive中上傳較大的文件時，系統會立即給出反饋，將任務窗口縮放到屏幕的右下角，我們可以通過這個小窗口檢查上傳進度和上傳情況，而且還不耽誤使用頁面上的其他功能。

最后

把加載細分成這五種模式，可以覆蓋很多使用場景，這樣的對癥下藥既能保證用戶體驗，還能讓產品豐富化，起到錦上添花的作用。

在對的時間和對的場景下做對的事，這句話用在什么地方都不為過，設計也是一樣。

最后考慮到大家經常使用卡片式UI排版，為大家整理了90+個iOS卡片模板，源文件已經打包好，大家可后臺領取。

領取方式：關注公眾號，后臺回復【小組件】獲取源文件。

慢慢來比較快，希望對你有幫助！

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》3種狀態+5種模式，從UX角度分析加載設計

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

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

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

評論(0) 瀏覽(1744)

252022-1

不懂就問！為什么英文字體名字這么長？

以這款Helvetica字體為例，我們可以把字體名稱分為5個部分。

我們先看第一部分，第一部分包括了兩個詞，前半部分是字體名字，而“Neue”可以理解為升級版。

“HelveticaNeue”是Linotype公司在1983年更新的新版字體。在原有的基礎上，對許多字符進行了精細的修改，還增加了更多不同的粗細與寬度的選擇。

2019年4月，Monotype公司正式發布了全新的字體“Helvetica Now”，共有三種形體，分別為：Micro、Display和Text。

Micro版本將專門為移動設備等小屏幕而設計，可以解決目前Helvetica字體在小屏幕中難以辨認等非常多的問題。

Display版主要針對較大的標題，如廣告和橫幅的字體使用。

Text版本則針對標準尺寸的書面文字所使用。

Helvetica Now更趨近完美，如需使用此Helvetica，可以優先考慮這個版本。（文末有下載）

第二部分代表的是字體公司名稱，如此款字體“LT”則是“Linotype”萊諾字體公司的縮寫。

當然，不同公司出版字體，顯示的公司簡稱也不一樣。如著名的襯線體“Bodoni”則是由“MT-蒙納字體”公司出版。

比較常見的還有“MS-微軟字體”、“ITC-國際字體”等。

第三部分，“Std”是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集。與其相對應的“Pro”是英文單詞“Professional”，代表具有更多的字符集。

第四部分為字重（線幅），是指字母筆畫的粗細級別，以：“Helvetica Now Display”為例，共有以下10種字重：

漢字因筆比較復雜，粗細變化比較少，遠不及英文字體豐富，以思源字體為例，共有以下7種字重：

第五部分為字體的格式，目前主流的格式為OTF和TTF。

那該選哪個格式呢?這主要取決于用戶的場景。

如果你需要使用MS Office進行大量工作，建議使用.ttf字體，因為它是由Apple和Microsoft所開發，與Microsoft軟件兼容性更佳，例如:只能將.ttf字體嵌入到Word和PPt中，而不能嵌入.otf字體。

如果你是一名設計師，需要使用Adobe軟件進行大量的印刷設計工作，建議使用.otf字體。因為它是由Adobe和Microsoft所開發。OTF格式還提供了更多風格的替代方案和字距調整選項，對于設計師更實用。

通過本期講解，相信大家對于字體名字中的英文含義有了一定程度的了解，下一期我們繼續講解更多冷知識，下期見！

“Helvetica Now”全套字體，可以在公眾號對話框回復【HE】獲取。（如需商用請購買正版字體）

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》不懂就問！為什么英文字體名字這么長？

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

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

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

評論(0) 瀏覽(2071)

252022-1

百度健康服務化體驗

背景介紹

百度健康發揮搜索入口直達服務的優勢，通過搜索快速連接人與信息、人與服務，形成了健康科普、在線咨詢服務、商城購藥服務、慢病管理服務以及互聯網醫院服務五大服務體系。同時，基于百度強大的AI和技術實力，在海量搜索數據中直接地獲取用戶真實意圖，智慧化連接服務。通過大數據對患者和醫生進行有價值的匹配引導，提供從健康科普到在線醫療的一站式服務中心，全面覆蓋用戶個人及家庭健康需求，形成完整服務鏈條。在設計理念上，我們致力于用智慧化方式給病患提供更加可及性和便捷性的互動體驗，并圍繞多端場景提供多元化體驗服務設計。

多場景滿足用戶需求

1.醫學可視化圖形，提升用戶閱讀體驗

用戶在閱讀醫療相關知識內容時，內容的表現形式較單一，文字的描述晦澀難懂，用戶很難真正的理解內容。醫學可視化圖形，能夠明確有效的補充用戶對詞條的理解，形成對內容的權威認知。

我們結合科學+美學雙線標準，從醫學、解刨、瀏覽舒適度等多維度視角繪制插圖，通過更直觀、舒適、生動形象的方式傳達內容，解決了日常大眾對疾病知識感到晦澀難懂的痛點。這也成為了醫療搜索體驗中一個獨具匠心的創新，是百度健康打造產品醫療權威感知的重要基礎。截止目前已經應用一千多幅插圖，覆蓋32科室共計3000個疾病詞條。

2.Ai交互+互動模板，高效在線問診

AI智能交互互動模板，實現智能診療對話模型，智能分析預診導診，通過AI學習構建適合臨床輔助診斷的體驗流程，深度將篩查、自測、診斷等多環節嵌入到診療流程中，自然、及時、流暢的應答患者提問，極大的提升了診療效率。

疫情期間，百度健康和政府合作打造智能診療系統解決方案，幫助人們快速獲得智能化診斷、在線診療和心理疏導等幫助，幫助無癥狀用戶進行預防，高?；颊呒皶r獲得診療建議。

單新冠肺炎AI自測在疫情初期高發時段累計服務用戶超千萬人。其余自測分型也已覆蓋四百多種。

3、線下場景線上映射，模擬真實場景

1）「線上處方藥單」的設計樣式，模擬現實中去醫院開藥的「線下打印處方單」樣式，將無情感的界面轉化成用戶熟悉的可感知形態，緩解在線的疏離感，充分體現情感化設計，使溝通更具沉浸感。最大程度的降低用戶的理解成本，加深用戶對產品的信賴感，使用戶有更真實的服務體驗。

疫情期間，線上購藥的需求猛增。線上開處方項目，實現了用戶可以足不出戶，從問診到開處方再到藥品到家一站式的服務體驗。

2）互聯網醫院一站式線上線下診療閉環

針對公立醫院百度健康搭建了全套互聯網醫院服務場景解決方案，提供一站式線上線下診療閉環，診前、診中、診后建立整套服務體系，無縫銜接線上線下場景，立體式給用戶提供服務。通過對醫院線下就醫的全流程的觀察，將線下體驗流程還原至線上，從掛號、繳費、查詢到復診、復查再到診后慢病管理，打通‘醫-方-藥’閉環，全面提交就診效率，形成患者、醫院、醫生完整的三端服務閉環。同時，成為國家分級診療工作的有利補充。

結語

百度健康做為全網領先的醫療科普服務平臺。為用戶打造無障礙智能化健康管理服務中心，做到靈活、共享、及時、關懷。未來還將不斷優化深耕，推動健康產業建設智慧化進程，為全面構筑以人為本的健康生態而努力，為早日實現“健康中國”的國家戰略助力，成為中國百姓首選的“健康管家”。

原文地址：百度MEUX（公眾號）

作者：做你健康管家的

轉載請注明：學UI網》百度健康服務化體驗

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

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

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

評論(0) 瀏覽(1688)

252022-1

Figma的自動布局也太好用了吧！

1. 自動布局快捷鍵

Mac OS 系統快捷鍵

開啟自動布局：Shift + A
關閉自動布局：Shift + Option + A（圖上漏掉了）
關閉自動布局并刪除 Frame：Command + Shift + G
重制（復制并粘貼，包含自動布局設置）：Command + D

Windows 快捷鍵

開啟自動布局：Shift + A
關閉自動布局：Shift + Alt + A（圖上漏掉了）
關閉自動布局并刪除 Frame：Ctrl + Shift + G
重制（復制并粘貼，包含自動布局設置）：Ctrl + D

2. 樣式復制粘貼

Mac OS 系統快捷鍵

樣式復制：Option + Command + C
樣式粘貼：Option + Command + V

Windows 快捷鍵

樣式復制：Option + Ctrl + C
樣式粘貼：Option + Ctrl + V

3. 調準順序

其實就算不用快捷鍵，也可以通過鼠標調準順序。

但是畢竟中心哪個圓圈面積太小不好找，數量不多的話，用快捷鍵會更快一些。

Mac OS 系統快捷鍵

往左調整：Command + [
往右調整：Command + ]

Windows 快捷鍵

往左調整：Ctrl + [
往右調整：Ctrl + ]

4. 調整間距

通過自動布局設置，可以讓元素的尺寸根據間距大小自動調整寬度。

利用這一點，可以用來做很多東西，例如滑動條。

5. 自動間距

把間距數值改成 auto，會自動均分 Frame 內元素的間距。

雖然右上角的布局圖標也能起到同樣的作用，但是那樣操作的步驟更多：需要先調整好兩邊的元素的位置，不能根據所在 Frame 自動調整。

6. 輸入 0.001 設置 0 高度

Figma 不允許輸入 0 高度，如果你嘗試這么做，按下回車后數值會變成 1。

但是有個小漏洞，那就是如果你輸入 0.001，按下回車后就會發現數值變成 0 了。

一定要小數點后三位，如果只輸入小數點后一位或兩位，就不會有這個效果。

7. 快速選擇內部元素

如果分組或 Frame 層級過多，想要選擇下層的元素，通常是雙擊。

但是層次多了，也還是很麻煩。

還可以按下 Command 的同時用鼠標點擊，這樣可以直接選擇最里層的元素。

可是，如果想要選擇的不是最里層，而是倒數第 N 層呢？

這種情況，用快捷鍵會更方便一些：

選擇下層：回車鍵
選擇上層：Shift + 回車鍵
選擇下一個：Tab
取消選擇：Esc

8. 避免將元素放入自動布局

往自動布局里放東西，很容易打亂布局，一下子就變化很大。

如果想要避免這種“手誤”，可以在拖動元素的同時按下空格鍵，這樣元素就不會被放到任何自動布局里。

9. 利用透明度快速自動布局

上面卡片的自動布局，其實可以用 Space Between 一鍵設置出來。

其實中間的圖標和卡片同寬，只是背景透明所以看起來是居中對齊的。

標題其實不止左上角那一個，卡片左下方還有一個一模一樣的，只是可見度設置為 0%，所以看不出來。

10. 利用自動布局設置最小寬度

很多組件（如上圖文本框）有個最小寬度，如果簡單地使用自動布局是無法滿足的。

方法也不難，就是文本框的 Frame 里加一條不可見的線段，而這個線段的寬度就確定了文本框的最小寬度。

沒想到 Figma 的自動布局有這么多門道，使用起來多做些組件，肯定能大大提高設計效率～

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網 ?Figma的自動布局也太好用了吧！

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

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

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

評論(0) 瀏覽(3285)

« 1 ... 86 87 88 89 90 91 92 ... 194 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合