国产成人在线视频观看,天堂资源8中文最新版,极品呦女专区资源

首頁(yè)

202022-6

動(dòng)效的質(zhì)感

01 動(dòng)效的質(zhì)感

動(dòng)效的質(zhì)感主要由時(shí)間、速率、運(yùn)動(dòng)理念、運(yùn)動(dòng)方式等來(lái)表現(xiàn)。動(dòng)效設(shè)計(jì)不僅僅只是動(dòng)而已，作為設(shè)計(jì)師需要洞察更多的動(dòng)效細(xì)節(jié)。通過(guò)對(duì)動(dòng)效細(xì)節(jié)的把控去營(yíng)造自然真實(shí)的動(dòng)態(tài)體驗(yàn)，并根據(jù)產(chǎn)品品牌特性去建立其動(dòng)效理念。

1.質(zhì)感表達(dá)-速率

速率影響著運(yùn)動(dòng)的質(zhì)感。讓我們做一下對(duì)比實(shí)驗(yàn)，在相同時(shí)間以及運(yùn)動(dòng)效果下，只改變運(yùn)動(dòng)元素的速率曲線(xiàn)并觀察它們的變化。兩元素為一組，一組速率曲線(xiàn)較陡峭而另一組則偏平緩。通過(guò)改變速率曲線(xiàn)，元素在下落運(yùn)動(dòng)中所呈現(xiàn)的物體質(zhì)量也有明顯差異。運(yùn)動(dòng)曲線(xiàn)較陡峭且速率對(duì)比較大則會(huì)導(dǎo)致元素的質(zhì)量更重沖擊感更強(qiáng)，反之較平緩的曲線(xiàn)元素運(yùn)動(dòng)則較為輕盈。

2.質(zhì)感表達(dá)-時(shí)間

時(shí)間的變化感知是較為直觀的，我們可以通過(guò)調(diào)節(jié)運(yùn)動(dòng)時(shí)間的長(zhǎng)短來(lái)表現(xiàn)物體的運(yùn)動(dòng)性格。時(shí)間越少，運(yùn)動(dòng)越快速干脆且可感知的運(yùn)動(dòng)細(xì)節(jié)更少。時(shí)間越多，則反之。

3.質(zhì)感表達(dá)-運(yùn)動(dòng)理念

不同的運(yùn)動(dòng)理念會(huì)給物體帶來(lái)不同的質(zhì)感表現(xiàn)。舉個(gè)例子一個(gè)活潑有活力的物體在運(yùn)動(dòng)的表現(xiàn)上會(huì)較為柔軟Q彈，就需要通過(guò)回彈擠壓來(lái)體現(xiàn)自身的質(zhì)感。而運(yùn)動(dòng)理念生硬的物體，則相反。運(yùn)動(dòng)理念與產(chǎn)品品牌調(diào)性有關(guān)，根據(jù)品牌特性我們可提取一些適合的運(yùn)動(dòng)理念或在自然理念中吸取靈感，將其應(yīng)用在自身的產(chǎn)品上可以更好的體現(xiàn)品牌價(jià)值。

4.質(zhì)感表達(dá)-運(yùn)動(dòng)方式

運(yùn)動(dòng)方式依附于運(yùn)動(dòng)理念，是產(chǎn)品運(yùn)動(dòng)質(zhì)感的一種表達(dá)方式。例如運(yùn)動(dòng)路徑是曲線(xiàn)還是直線(xiàn)？空間的景深程度是如何的？可以明確感受到空間感嗎？整體方式是基于效率還是表現(xiàn)力？在這一塊，也需要設(shè)計(jì)師根據(jù)品牌調(diào)性及產(chǎn)品屬性去作考慮。

02 質(zhì)感調(diào)節(jié)

因?yàn)檫\(yùn)動(dòng)曲線(xiàn)的存在，動(dòng)效才會(huì)表現(xiàn)的如此自然。設(shè)計(jì)師可以通過(guò)曲線(xiàn)的方式進(jìn)行運(yùn)動(dòng)速率節(jié)奏的編排，從而實(shí)現(xiàn)設(shè)計(jì)師們想表達(dá)的動(dòng)效調(diào)性。在影響運(yùn)動(dòng)質(zhì)感表達(dá)的部分速率的編排占了比較大的比重，借此機(jī)會(huì)講述下運(yùn)動(dòng)曲線(xiàn)的基礎(chǔ)知識(shí)幫助大家更好的理解曲線(xiàn)。

打開(kāi)AE關(guān)鍵幀控制面板我們可以看到有兩種曲線(xiàn)的表達(dá)圖示；一種為速度曲線(xiàn)圖表一種則為數(shù)值（屬性）曲線(xiàn)圖表。

速度曲線(xiàn)

速度曲線(xiàn)記錄的是物體運(yùn)動(dòng)每一刻的速度變化。我們來(lái)分解下它的曲線(xiàn)圖表，x、y軸分別表示的是時(shí)間與速度。觀察下圖的曲線(xiàn)則可以得出物體起始速度為0呈靜止?fàn)顟B(tài)，后續(xù)慢慢開(kāi)始加速并且速度達(dá)到頂峰；最后物體運(yùn)動(dòng)至終點(diǎn)并停下。整體圖表展示較為直觀，經(jīng)過(guò)分析我們可以得知整段運(yùn)動(dòng)其實(shí)就是我們熟知的緩動(dòng)運(yùn)動(dòng)（起點(diǎn)和終點(diǎn)慢，運(yùn)動(dòng)過(guò)程快）

對(duì)于速度曲線(xiàn)的編輯，設(shè)計(jì)師可以通過(guò)曲線(xiàn)手柄來(lái)控制運(yùn)動(dòng)節(jié)點(diǎn)的加速度。讓我們雙擊節(jié)點(diǎn)查看關(guān)鍵幀速度圖表來(lái)分析下速度曲線(xiàn)的基本規(guī)律。此時(shí)速度圖表顯示傳入速度（incoming Velocity）為0，影響為33%。「?jìng)魅胨俣取刮覀兛梢岳斫鉃檫\(yùn)動(dòng)起點(diǎn)的速度，而「影響」這個(gè)數(shù)值則可以理解為加速度。傳入速度需要百分之多少的加速度即可達(dá)到最高速度，數(shù)值越大即代表加速的幅度越大曲線(xiàn)呈現(xiàn)的陡峭程度就越陡峭。

技巧貼士

速度編排

當(dāng)設(shè)計(jì)師們想針對(duì)物體運(yùn)動(dòng)速度做一些特殊的編排處理，使用速度曲線(xiàn)會(huì)更直觀一些。例如：想要模擬小球彈跳過(guò)程中的滯空感，我們只需調(diào)節(jié)小球懸空時(shí)的速度大小及加速度即可。想要達(dá)到滯空的感覺(jué)，那運(yùn)動(dòng)中程球體的速度需要大于0讓球體持續(xù)運(yùn)動(dòng)，就能達(dá)到我們想要的效果了。

表達(dá)式應(yīng)用

我們經(jīng)常會(huì)在動(dòng)畫(huà)內(nèi)使用彈性表達(dá)式，許多設(shè)計(jì)師也遇到過(guò)表達(dá)式輸入后還是沒(méi)效果的情況。其實(shí)是因?yàn)楫?dāng)前關(guān)鍵幀的速度為0而導(dǎo)致的，除表達(dá)式所設(shè)置的彈性頻率、衰減度外；速度也決定著彈性的強(qiáng)度，我們只需根據(jù)速度調(diào)節(jié)自己想要的彈性效果即可。

數(shù)值曲線(xiàn)

數(shù)值（屬性）曲線(xiàn)記錄的是元素屬性隨著時(shí)間的變化過(guò)程。我們也來(lái)分解下它的曲線(xiàn)圖表，x、y軸分別表示的是數(shù)值（當(dāng)前運(yùn)動(dòng)變化的屬性）與時(shí)間。而該曲線(xiàn)代表著物體運(yùn)動(dòng)速率的分布情況，也就是速度等于=物體運(yùn)動(dòng)的距離（數(shù)值）/物體運(yùn)動(dòng)距離所花的時(shí)間（時(shí)間）?？赡芸粗酵?jiǎn)單的（初中物理）但乍一看圖表還是比較抽象，我們可以一步步的將其拆解方便大家理解它的含義。

Step.1

我們先確定元素位移時(shí)間以及距離，在不添加任何緩動(dòng)插值的情況下，賦予他們最基礎(chǔ)的線(xiàn)形運(yùn)動(dòng)。也就是從0～1秒它的速度是呈勻速的狀態(tài)。再將整條曲線(xiàn)分解成平均的幾個(gè)關(guān)鍵時(shí)間點(diǎn)，記錄元素在不同時(shí)間點(diǎn)所在的位置。

Step.2

根據(jù)速度公式，我們?nèi)y(cè)試下速度的變化對(duì)曲線(xiàn)的影響是什么？關(guān)于速度的計(jì)算公式其實(shí)我們都知道的，速度等于單位物體的位移距離除于位移所花的時(shí)間，也可以理解為圖表中的速度就是線(xiàn)段的斜率。

Step.3

接著讓我們將其速度提升一倍，從1秒的總時(shí)長(zhǎng)提到0.5秒的時(shí)間。根據(jù)圖示我們可以觀察到當(dāng)我們將時(shí)長(zhǎng)加快時(shí)，速率線(xiàn)段與我們的x時(shí)間軸的角度越來(lái)越大。同理我們嘗試下將運(yùn)動(dòng)屬性數(shù)值降低一倍，我們可以觀察到此時(shí)速率線(xiàn)段與我們的x時(shí)間軸的角度越來(lái)越小。我們通過(guò)上述的拆解分析，可以得到一些規(guī)律。在數(shù)值曲線(xiàn)下，時(shí)間以及運(yùn)動(dòng)屬性數(shù)值影響著物體運(yùn)動(dòng)速度。根據(jù)曲線(xiàn)陡峭程度影響著運(yùn)動(dòng)速率快慢的規(guī)律，我們可以總結(jié)一個(gè)觀察曲線(xiàn)的技巧。曲線(xiàn)越緩和（貼近時(shí)間軸x）速率越慢，曲線(xiàn)越陡峭（貼近數(shù)值軸Y）速率則越快。

Step.4

在弄明白了數(shù)值曲線(xiàn)的基本規(guī)律后，我們將曲線(xiàn)做一些處理讓他更貼合于我們的現(xiàn)實(shí)自然運(yùn)動(dòng)。模擬現(xiàn)實(shí)物體運(yùn)動(dòng)的狀態(tài)，物體剛開(kāi)始慢慢起步再到加速的過(guò)程。如下（P1）圖所示數(shù)值曲線(xiàn)在前半部分速率較慢，到達(dá)時(shí)間中點(diǎn)后突然增速并到達(dá)終點(diǎn)。將曲線(xiàn)作一定的平滑過(guò)渡處理就是我們所熟知的緩入（P2）曲線(xiàn)啦。

運(yùn)動(dòng)曲線(xiàn)的使用建議

對(duì)于不同的運(yùn)動(dòng)曲線(xiàn)模式（速度/數(shù)值），設(shè)計(jì)師們需充分了解其曲線(xiàn)模式的含義。我們可以根據(jù)設(shè)計(jì)場(chǎng)景去選擇適合的曲線(xiàn)模式，關(guān)于場(chǎng)景還有很多，我大概羅列了部分項(xiàng)目接觸到的特定場(chǎng)景出來(lái)。主要目的是想讓大家意識(shí)到熟練的掌握兩種運(yùn)動(dòng)曲線(xiàn)模式的重要性，別將自己的工作方式或習(xí)慣限定太死，靈活的變通很重要。

速度曲線(xiàn)：

AE動(dòng)畫(huà)中部分無(wú)具體數(shù)值單位的動(dòng)畫(huà)幀，例如（蒙版路徑），設(shè)計(jì)師們只能通過(guò)速度曲線(xiàn)進(jìn)行調(diào)節(jié)。
使用彈性表達(dá)式需根據(jù)速度大小去調(diào)節(jié)彈性強(qiáng)度。

數(shù)值曲線(xiàn)：

在UI交互動(dòng)效的設(shè)計(jì)場(chǎng)景，數(shù)值曲線(xiàn)適應(yīng)于落地開(kāi)發(fā)的貝塞爾曲線(xiàn)插值器。
數(shù)值曲線(xiàn)是C4D動(dòng)畫(huà)的默認(rèn)函數(shù)曲線(xiàn)模式，在C4D中無(wú)法調(diào)節(jié)速度曲線(xiàn)。

03 運(yùn)動(dòng)的類(lèi)型

通過(guò)上述分析我們對(duì)運(yùn)動(dòng)曲線(xiàn)模式的了解更進(jìn)了一步，接下來(lái)讓我們結(jié)合案例探究下不同運(yùn)動(dòng)曲線(xiàn)類(lèi)型的含義以及應(yīng)用方式。減少大家在動(dòng)效設(shè)計(jì)過(guò)程中的公式化硬思維，提升自身對(duì)于動(dòng)效的編排能力。

緩入曲線(xiàn)

緩入運(yùn)動(dòng)即加速運(yùn)動(dòng)，物體運(yùn)動(dòng)的時(shí)候都需要一個(gè)加速過(guò)程，并不會(huì)馬上達(dá)到速度的最高峰。觀察自然世界，有許多類(lèi)似的運(yùn)動(dòng)案例例如彈弓以及汽車(chē)發(fā)動(dòng)等。在交互動(dòng)效中緩入運(yùn)動(dòng)會(huì)運(yùn)用在元素離開(kāi)頁(yè)面的情況。

動(dòng)態(tài)感知

這里的離開(kāi)指的是元素永遠(yuǎn)離開(kāi)屏幕并且無(wú)法讓我們返回的操作例如，彈窗、通知等。元素將會(huì)一直加速至消失，且告知用戶(hù)該元素不會(huì)再出現(xiàn)在頁(yè)面某個(gè)角落了。

緩出曲線(xiàn)

緩出運(yùn)動(dòng)與緩入運(yùn)動(dòng)相反，描述的是元素的減速運(yùn)動(dòng)。類(lèi)似于我們生活中行駛中的汽車(chē)減速的案例。我們可以利用緩出運(yùn)動(dòng)表示界面外的元素進(jìn)入屏幕，即元素以高速度進(jìn)入屏幕慢慢減速至靜止的過(guò)程。

動(dòng)態(tài)感知

結(jié)合自然世界的運(yùn)動(dòng)規(guī)律來(lái)看，把頁(yè)面進(jìn)入的元素比作是行駛的汽車(chē)，用戶(hù)當(dāng)作是正在斑馬線(xiàn)上行駛的人，將馬路作為頁(yè)面空間。若汽車(chē)采用的是緩入運(yùn)動(dòng)（加速）的話(huà)，馬路上的行人則看到的是一輛不斷加速向他行駛過(guò)來(lái)的車(chē)輛。因?yàn)閾?dān)心車(chē)輛高速的逼近導(dǎo)致剎車(chē)不及時(shí)的情況，行人便會(huì)本能的作出躲閃的反應(yīng)。其實(shí)頁(yè)面也是一個(gè)道理，進(jìn)入的元素使用加速運(yùn)動(dòng)出現(xiàn)過(guò)沖的運(yùn)動(dòng)感知會(huì)讓用戶(hù)體驗(yàn)時(shí)產(chǎn)生不適。

緩動(dòng)曲線(xiàn)

緩動(dòng)運(yùn)動(dòng)即我們所接觸的常規(guī)運(yùn)動(dòng)類(lèi)型，在運(yùn)動(dòng)開(kāi)始慢慢加速再到運(yùn)動(dòng)結(jié)束慢慢減速的過(guò)程。該運(yùn)動(dòng)符合自然世界大多數(shù)物體的運(yùn)動(dòng)邏輯，也是頁(yè)面中經(jīng)常使用的曲線(xiàn)類(lèi)型。

動(dòng)態(tài)感知

閱覽Material design動(dòng)效模塊中關(guān)于緩動(dòng)曲線(xiàn)的描述，適當(dāng)?shù)脑黾忧€(xiàn)的不對(duì)稱(chēng)感可以讓運(yùn)動(dòng)更加真實(shí)。我們可以根據(jù)頁(yè)面元素運(yùn)動(dòng)邏輯和產(chǎn)品品牌特性來(lái)設(shè)定緩動(dòng)曲線(xiàn)。緩動(dòng)曲線(xiàn)適用于大部分在頁(yè)面中運(yùn)動(dòng)的元素，當(dāng)元素在頁(yè)面消失且用戶(hù)可進(jìn)行返回等操作時(shí)也應(yīng)使用緩動(dòng)曲線(xiàn)。

彈性運(yùn)動(dòng)

在現(xiàn)實(shí)生活中，因?yàn)樽饔昧εc反作用力的存在。皮球觸碰到地面會(huì)不斷彈起，而用手推船，船就會(huì)離開(kāi)岸邊。這就是我們所說(shuō)的彈性運(yùn)動(dòng)。彈性曲線(xiàn)與其它曲線(xiàn)（常規(guī)緩動(dòng)）有些許差異，彈性曲線(xiàn)由兩個(gè)值影響著它；彈性阻尼以及振動(dòng)頻率。

對(duì)比差異

彈性曲線(xiàn)相比常規(guī)運(yùn)動(dòng)曲線(xiàn)更貼合自然運(yùn)動(dòng)現(xiàn)象，在運(yùn)動(dòng)的衰減過(guò)程更為真實(shí)。早在ios7中，蘋(píng)果就已經(jīng)大范圍使用該類(lèi)曲線(xiàn)。例如APP收起展開(kāi)、預(yù)覽窗口收起等。彈性運(yùn)動(dòng)并非需要表現(xiàn)出明顯的回彈感，就算運(yùn)動(dòng)無(wú)明顯的回彈感其效果相比常規(guī)曲線(xiàn)實(shí)現(xiàn)的運(yùn)動(dòng)啟動(dòng)速度更快，且會(huì)有更長(zhǎng)的一段衰減距離。讓用戶(hù)更加集中于物體運(yùn)動(dòng)的衰減過(guò)程（結(jié)尾）而并非加速過(guò)程，也使得ios的使用體驗(yàn)更符合自然規(guī)律以及交互反饋更為真實(shí)流暢。

對(duì)接落地

與常規(guī)的緩動(dòng)曲線(xiàn)不同，設(shè)計(jì)師可在Framer、Protopie、flinto、principle等軟件根據(jù)自身需求來(lái)嘗試并輸出彈性運(yùn)動(dòng)相關(guān)數(shù)值提供于開(kāi)發(fā)。對(duì)于不同（ios/安卓）平臺(tái)關(guān)于彈性數(shù)值單位的轉(zhuǎn)化，設(shè)計(jì)師們可根據(jù)MartinRgb的Animator list網(wǎng)站去模擬各端彈性運(yùn)動(dòng)的數(shù)值來(lái)對(duì)接開(kāi)發(fā)。

Animator list：http://www.martinrgb.com/Animer_Web/#

動(dòng)態(tài)感知

彈性運(yùn)動(dòng)可賦予物體材質(zhì)，通過(guò)彈性運(yùn)動(dòng)我們可以表達(dá)產(chǎn)品的品牌調(diào)性。例如面向低齡人群的產(chǎn)品或是娛樂(lè)類(lèi)型的產(chǎn)品可在產(chǎn)品內(nèi)大范圍的使用彈性運(yùn)動(dòng)去傳遞產(chǎn)品品牌的運(yùn)動(dòng)感知。除此之外，彈性也存在不少寓意。對(duì)于ios中使用的彈性運(yùn)動(dòng)，官方說(shuō)法是基于用戶(hù)行為的獎(jiǎng)勵(lì)反饋。如果用戶(hù)滑動(dòng)操作UI元素的話(huà)，就有回彈，顯得用戶(hù)滑的力度很強(qiáng)，是一種獎(jiǎng)勵(lì)性反饋使得用戶(hù)的體驗(yàn)過(guò)程更為真實(shí)自然。彈性也具備提醒的作用，吸引用戶(hù)對(duì)元素的注意力以及提示用戶(hù)該元素可進(jìn)行逆操作等。同時(shí)切忌在頁(yè)面中使用過(guò)多的彈性運(yùn)動(dòng)，設(shè)計(jì)師們?cè)谑褂们靶枰浞值目紤]當(dāng)下頁(yè)面使用場(chǎng)景、產(chǎn)品品牌調(diào)性等因素。

04 理念的形成

動(dòng)態(tài)語(yǔ)言

現(xiàn)在越來(lái)越多的公司開(kāi)始制定自己的設(shè)計(jì)語(yǔ)言/理念，像Material Design、IBM、IOS等。對(duì)于"動(dòng)效"目前市面上大多數(shù)產(chǎn)品有著自己的動(dòng)效規(guī)范，但并沒(méi)有上升到語(yǔ)言理念的層面。規(guī)范并不等同于語(yǔ)言，語(yǔ)言應(yīng)反應(yīng)其品牌特性和靈活性。為此最后分享下個(gè)人目前對(duì)于動(dòng)效語(yǔ)言的理解，以及關(guān)于動(dòng)效語(yǔ)言制定的技巧經(jīng)驗(yàn)。

語(yǔ)言的構(gòu)成

作為互聯(lián)網(wǎng)設(shè)計(jì)師的我們都熟知視覺(jué)語(yǔ)言的概念，通常我們會(huì)根據(jù)產(chǎn)品所傳遞的品牌特質(zhì)去制定產(chǎn)品的視覺(jué)語(yǔ)言。動(dòng)態(tài)語(yǔ)言也是如此，通過(guò)提煉產(chǎn)品品牌氣質(zhì)去傳遞一種感受。我們的動(dòng)態(tài)體驗(yàn)是什么樣的感受？是高效簡(jiǎn)潔的還是活潑具有表現(xiàn)力的？為此我們可以找尋對(duì)應(yīng)的品牌核心理念或是運(yùn)動(dòng)現(xiàn)象，組合提煉出符合品牌調(diào)性的理念和感受。

提煉感受

動(dòng)態(tài)所傳遞的感受是感性與理性的結(jié)合，在感性層面我們根據(jù)產(chǎn)品的品牌形象提煉出相應(yīng)的情感感知。而在理性層面我們需要分析產(chǎn)品受眾用戶(hù)特征以及產(chǎn)品類(lèi)型業(yè)務(wù)屬性等，針對(duì)其特征進(jìn)行產(chǎn)品體驗(yàn)感知的傳遞。根據(jù)提煉結(jié)果，我們可以得出初步的動(dòng)態(tài)感受。

理念孵化

以提煉的動(dòng)態(tài)感受為出發(fā)點(diǎn)，理性的層面給予了我們大致的產(chǎn)品體驗(yàn)感知，為我們的動(dòng)效理念建成提供了框架。對(duì)此我們將繼續(xù)從感性層面出發(fā)，找尋可傳遞品牌感受的運(yùn)動(dòng)現(xiàn)象并加以組合提煉；將運(yùn)動(dòng)特征以及動(dòng)態(tài)感受落點(diǎn)于實(shí)際的動(dòng)態(tài)理念。這個(gè)過(guò)程與品牌設(shè)計(jì)非常相似，動(dòng)效理念的孵化應(yīng)充分考慮情感層面品牌感受的傳遞。而并非只考慮理性層面的感知，忽略其品牌氣質(zhì)的塑造。

語(yǔ)言形成

到這一步，動(dòng)效語(yǔ)言的雛形已形成。通過(guò)感性與理性?xún)蓚€(gè)層面去呈現(xiàn)「感受」，明確產(chǎn)品需給予用戶(hù)什么樣的動(dòng)態(tài)感知。后續(xù)我們可以結(jié)合動(dòng)態(tài)理念去進(jìn)行動(dòng)效原則的總結(jié)，根據(jù)原則去輸出后續(xù)的動(dòng)效規(guī)范并進(jìn)行推動(dòng)落地。

語(yǔ)言的價(jià)值

建立動(dòng)效語(yǔ)言體系，而并非只是建立規(guī)范。動(dòng)效語(yǔ)言的價(jià)值除規(guī)范統(tǒng)一及體驗(yàn)優(yōu)化外，更重要的是傳遞產(chǎn)品品牌調(diào)性。以動(dòng)效為例，用戶(hù)使用產(chǎn)品所接觸的交互動(dòng)效、視效動(dòng)效等其表現(xiàn)的動(dòng)態(tài)感知都在潛移默化的影響著產(chǎn)品的使用體驗(yàn)以及品牌形象。在目前大家都在注重設(shè)計(jì)帶來(lái)的短期商業(yè)價(jià)值的環(huán)境下，設(shè)計(jì)師也應(yīng)重視下產(chǎn)品品牌、體驗(yàn)價(jià)值的建設(shè)。

作者：Fiasc1 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、

ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(948)

202022-6

醫(yī)療應(yīng)用系統(tǒng)的設(shè)計(jì)思維

純純

一、項(xiàng)目背景

二、項(xiàng)目分析

三、風(fēng)格探索

四、設(shè)計(jì)原則

五、深色模式

六、設(shè)計(jì)規(guī)范

七、總結(jié)

一、項(xiàng)目背景

這家公司主要致力于研發(fā)醫(yī)療大數(shù)據(jù)和人工智能驅(qū)動(dòng)的智慧醫(yī)療產(chǎn)品，其產(chǎn)品主要用于疾病的預(yù)測(cè)、篩查、診斷和治療的各個(gè)環(huán)節(jié)，主要聚焦于人工智能醫(yī)學(xué)影像領(lǐng)域。

產(chǎn)品定位

1、開(kāi)發(fā)定位：web應(yīng)用；

2、用戶(hù)群體：從事醫(yī)療行業(yè)的醫(yī)生；

3、功能定位：解決的是醫(yī)生閱片花費(fèi)時(shí)間過(guò)長(zhǎng)的問(wèn)題，能夠輔助醫(yī)生智能診斷的工具型智能應(yīng)用系統(tǒng)。

二、項(xiàng)目分析

從前面的產(chǎn)品定位，可以得到以下三個(gè)關(guān)鍵詞：web、醫(yī)療、應(yīng)用，同時(shí)根據(jù)這三個(gè)關(guān)鍵詞可以延伸出一些問(wèn)題，然后開(kāi)始著手準(zhǔn)備前期設(shè)計(jì)工作。

A、醫(yī)療設(shè)計(jì)注意事項(xiàng)

1、醫(yī)生的操作交互模式習(xí)慣于之前固有的Pacs閱片系統(tǒng)，設(shè)計(jì)時(shí)要尊重現(xiàn)有的交互模式；

2、因?yàn)槎鄶?shù)影像科的使用環(huán)境都比較暗，所以界面整體風(fēng)格采用深色模式。

3、因?yàn)橛泻芏鄬?zhuān)家都是比較年長(zhǎng)的，考慮到這一特點(diǎn)，在制作設(shè)計(jì)稿時(shí)字號(hào)不能太小。但是信息內(nèi)容又多，字號(hào)大的話(huà)信息很難布局，這是一大問(wèn)題；

4、和第3點(diǎn)類(lèi)似，影像應(yīng)用要求給影像顯示區(qū)域留有足夠的空間以，這就導(dǎo)致其它文字內(nèi)容的空間又被壓縮了，其它文字內(nèi)容的顯示又成了問(wèn)題；

5、安全性，涉及到很多病患的信息，如何體現(xiàn)安全性很重要；

6、整體風(fēng)格上趨于保守，因?yàn)槭菫獒t(yī)院設(shè)計(jì)的，顏色使用上相對(duì)來(lái)說(shuō)要克制。

B、web設(shè)計(jì)注意事項(xiàng)

1、最明顯的是用鼠標(biāo)操作系統(tǒng)，鼠標(biāo)的交互方式多，有hover、click、滾輪、左右鍵等等。而鼠標(biāo)右鍵一般是瀏覽器自帶的功能，不方便定制。

2、pc端瀏覽器右上角帶有關(guān)閉瀏覽器。同時(shí)自帶后退、前進(jìn)、關(guān)閉的按鈕，有點(diǎn)類(lèi)似于安卓系統(tǒng)自帶返回鍵。這些功能影響著應(yīng)用信息保存的交互問(wèn)題；

3、布局問(wèn)題，瀏覽器可自由伸縮，會(huì)影響頁(yè)面的布局；

4、設(shè)計(jì)時(shí)不存在@2x、@3x這些問(wèn)題，采用@1x設(shè)計(jì)就可以，可以給設(shè)計(jì)和開(kāi)發(fā)帶來(lái)不少便利，有些切圖為適配高分辨率的屏幕需要切2倍3倍圖；

5、頭部瀏覽器自帶菜單欄，會(huì)影響縱向空間的布局；

6、什么時(shí)候新開(kāi)標(biāo)簽頁(yè)和什么時(shí)候在當(dāng)前頁(yè)面跳轉(zhuǎn)問(wèn)題。研究顯示，國(guó)內(nèi)網(wǎng)頁(yè)多喜歡新開(kāi)標(biāo)簽頁(yè)，國(guó)外網(wǎng)頁(yè)喜歡在當(dāng)前頁(yè)面跳轉(zhuǎn)，但是應(yīng)用類(lèi)型的網(wǎng)頁(yè)更多的還是在當(dāng)前頁(yè)面跳轉(zhuǎn)；

C、中后臺(tái)系統(tǒng)應(yīng)用設(shè)計(jì)注意事項(xiàng)

1、中后臺(tái)系統(tǒng)信息繁多，因此系統(tǒng)用起來(lái)體驗(yàn)好不好、效率高不高尤為重要，在醫(yī)療行業(yè)更是如此。如何用設(shè)計(jì)區(qū)分信息的層次，并且在有限的空間展示盡可能多的信息是設(shè)計(jì)的首要任務(wù)，為了展示正確的信息哪怕展示方式不對(duì)也比設(shè)計(jì)的好看而信息展示不全要好。

2、盡可能的優(yōu)化操作流程，再精美的設(shè)計(jì)也不如優(yōu)化一兩個(gè)流程效率來(lái)的快一些；

3、交互點(diǎn)到為止，盡量少用復(fù)雜的交互方式，比如拖拽，雙擊和右鍵都盡量少用；

4、對(duì)顏色和icon的運(yùn)用要謹(jǐn)慎一些，以免造成多余的認(rèn)知障礙。由于文字能夠傳達(dá)清晰準(zhǔn)確的信息，無(wú)疑是更好的設(shè)計(jì)元素。

5、即時(shí)反饋是提高效率的有效手段。

三、風(fēng)格探索

A、布局

我們采用左右布局的設(shè)計(jì)方案，將左側(cè)菜單欄固定，右側(cè)工作區(qū)域動(dòng)態(tài)適配。菲茲定律表明：越遠(yuǎn)難點(diǎn)擊，越近越容易點(diǎn)擊，靠近邊緣更容易點(diǎn)擊。因此菜單欄在左側(cè)時(shí)，當(dāng)瀏覽器全屏?xí)r，點(diǎn)擊左側(cè)的菜單相當(dāng)于是點(diǎn)擊邊緣的目標(biāo)，這種操作路徑用戶(hù)所花的時(shí)間是最少的。而當(dāng)菜單欄在上方時(shí)，因?yàn)樯戏接袨g覽器自帶的菜單欄，會(huì)影響用戶(hù)的操作，因此用戶(hù)點(diǎn)擊起來(lái)所花的時(shí)間更長(zhǎng)，也容易操作失誤。

B、色彩

醫(yī)療產(chǎn)品多采用藍(lán)色作為主色調(diào)，藍(lán)色具有安靜、信賴(lài)、科技的色彩象征，然后綠色是生命、醫(yī)療的象征，所以最后選擇了一個(gè)藍(lán)色偏青的色彩，比較符合現(xiàn)有的產(chǎn)品調(diào)性。另外因?yàn)橛跋窨乒ぷ鳝h(huán)境多為暗室，所以界面整體采用深色模式設(shè)計(jì)，字體顏色的選取注意WCAG規(guī)范，文本和背景的對(duì)比度至少要有4.5:1。

C、字體

我們最開(kāi)始設(shè)計(jì)demo時(shí)，常用文字使用的字體大小是12，而醫(yī)生試用后反饋?zhàn)煮w太小。原來(lái)有很大一部分醫(yī)生專(zhuān)家都是比較年長(zhǎng)的，12對(duì)于他們來(lái)說(shuō)字體小了點(diǎn)，因此我們決定采用14作為主要字號(hào)，12作為輔助說(shuō)明文字。

D、圖標(biāo)和圓角

為了更好的搭配深色模式，我們決定圖標(biāo)采用面性圖標(biāo)（后文會(huì)講解）。圖標(biāo)和按鈕的圓角也采用了直角硬邊風(fēng)格代替了常見(jiàn)的有圓角風(fēng)格。硬朗的圖標(biāo)有一種精確性、科技感，更符合產(chǎn)品調(diào)性。

四、設(shè)計(jì)原則

A、層次清晰

中后臺(tái)系統(tǒng)有信息繁多，這就需要設(shè)計(jì)來(lái)區(qū)分信息的層次，引導(dǎo)用戶(hù)去關(guān)注最重要的東西，“偷偷地”給用戶(hù)一種高效的體驗(yàn)。這里根據(jù)《寫(xiě)給大家看的設(shè)計(jì)書(shū)》當(dāng)中的四大原則：對(duì)比、對(duì)齊、親密性、重復(fù)，來(lái)區(qū)分信息的層次。

①、對(duì)比

對(duì)比即為設(shè)計(jì)元素的對(duì)比，可以是顏色對(duì)比、字體對(duì)比、大小對(duì)比等等。恰當(dāng)?shù)膶?duì)比能讓看起來(lái)更有層次，能給產(chǎn)品提供一種韻律美。通過(guò)對(duì)比可以引導(dǎo)用戶(hù)的視線(xiàn)，減少用戶(hù)的選擇時(shí)間，間接的提高了使用效率。

②、對(duì)齊

對(duì)齊作為設(shè)計(jì)的最基本原則，是建立秩序的一種最基本手段，合理的利用對(duì)齊方式能夠有效地提高用戶(hù)體驗(yàn)。常見(jiàn)的對(duì)齊方式有左對(duì)齊、居中對(duì)齊、右對(duì)齊、兩邊對(duì)齊。在中后臺(tái)系統(tǒng)中常常出現(xiàn)標(biāo)題長(zhǎng)度參差不齊，表單內(nèi)容長(zhǎng)短不一的情況，這種情況不論是左對(duì)齊還是右對(duì)齊都會(huì)出現(xiàn)不整齊的問(wèn)題。而這時(shí)，我們往往要考慮的已經(jīng)不是美的問(wèn)題，而是哪種方式更能夠提高用戶(hù)的使用效率。

③、親密性

親密性能夠讓內(nèi)容凝聚在一起，產(chǎn)生層次而不凌亂。信息的關(guān)聯(lián)性越高，它們之間的距離應(yīng)該越近，反之就應(yīng)該越遠(yuǎn)。在本系統(tǒng)中頁(yè)面中的縱向間距采用小、中、大三種間距來(lái)區(qū)分層次，分別是8px、16px、32px，以此來(lái)體現(xiàn)頁(yè)面的組織性。另外，一些特殊情況，比如空間有限，最小間距可以是4px。其它不適應(yīng)的情況統(tǒng)一采用8的整倍數(shù)定義間距。

④、重復(fù)

相同的元素在頁(yè)面間的重復(fù)運(yùn)用，可以有效的降低用戶(hù)的學(xué)習(xí)成本。也能夠幫助用戶(hù)識(shí)別出這些元素的關(guān)聯(lián)性。重復(fù)的元素可以是某個(gè)顏色，某種樣式，某個(gè)布局。這里主要講重復(fù)在不同產(chǎn)品之間的應(yīng)用，不同產(chǎn)品之間有相同的結(jié)構(gòu)布局、相同的配色能夠讓用戶(hù)快速上手我們的產(chǎn)品，同時(shí)也是對(duì)品牌感的一種強(qiáng)調(diào)。例如：由于醫(yī)生以前習(xí)慣于使用醫(yī)院的pacs系統(tǒng)來(lái)閱片，所以在影像顯示頁(yè)面，我們延用之前pacs系統(tǒng)的布局，讓醫(yī)生找到一種熟悉感。

B、即時(shí)反饋

人機(jī)交互時(shí)，系統(tǒng)及時(shí)給出反饋非常重要，反饋能夠給用戶(hù)確定性和安全感。如果用戶(hù)操作了系統(tǒng)，得不到相應(yīng)的反饋，用戶(hù)往往覺(jué)得系統(tǒng)是不是出錯(cuò)了，就會(huì)給用戶(hù)造成一種負(fù)面使用體驗(yàn)。常見(jiàn)的反饋形式有確認(rèn)反饋、警告反饋、錯(cuò)誤反饋、狀態(tài)反饋。本系統(tǒng)中從患者拍片、系統(tǒng)智能分析、醫(yī)生審核、保存打印，各個(gè)步驟都應(yīng)該有確認(rèn)反饋、警告反饋、錯(cuò)誤反饋、狀態(tài)反饋，只是反饋的形式可能是彈窗，可能是顏色的變化，可能是符號(hào)的提示等等。這里舉例最基本的按鈕一定要有normal、hover、click、disable，不然用戶(hù)不知道自己的操作是否起作用了，給用戶(hù)造成認(rèn)知障礙。

C、簡(jiǎn)單有效

奧卡姆剃刀原理講究設(shè)計(jì)時(shí)避重趨輕、避繁逐簡(jiǎn)、以簡(jiǎn)御繁、避虛就實(shí)，因此在設(shè)計(jì)時(shí)，我們會(huì)和產(chǎn)品經(jīng)理商量有些功能是否真的有必要放上去，或者有些信息是不是可以隱藏。例如：搜索欄，按照醫(yī)生閱片流程來(lái)看，醫(yī)生是很少會(huì)使用到搜索功能的，即使用到了，搜索病人ID就足夠了，其它項(xiàng)目的搜索完全可以放到高級(jí)搜索里。再比如病人列表里，往往會(huì)因?yàn)榱斜眄?xiàng)太多使整個(gè)表格看起來(lái)非常臃腫，于是我們篩選出了最重要的7項(xiàng)，其它不是那么重要的，我們就以自由定制化的形式放在右側(cè)，醫(yī)生可以根據(jù)自己的需要進(jìn)行定制。

五、深色模式

前文提到，根據(jù)醫(yī)療產(chǎn)品的特性以及用戶(hù)的使用環(huán)境，我們的系統(tǒng)采用深色模式。然而深色模式并不是簡(jiǎn)單的背景色使用深色那么簡(jiǎn)單，因?yàn)楸尘白兂闪松钌?，相?yīng)的字體的顏色、圖標(biāo)的風(fēng)格、元素的布局等等都會(huì)產(chǎn)生微妙的變化，以下列出一些深色模式要注意的一些事項(xiàng)。

A、顏色

1、深色的選取盡量不要直接選用純灰色，可以往冷色系偏一些；

2、白色背景上不會(huì)用純黑文字，同樣的深色背景上不要直接使用白色，否則會(huì)產(chǎn)生強(qiáng)烈的刺眼感，但是一些按鈕還是要使用白色；

3、字體的中性顏色深淺建議使用白色的透明度變化來(lái)制作深淺，原因有兩個(gè)：一是透明度變化能夠讓字本身投射出背景色的色調(diào)，做到自帶色調(diào)的效果，能夠讓頁(yè)面更自然協(xié)調(diào)；二是利于設(shè)計(jì)和開(kāi)發(fā)理解記憶，有一個(gè)量度去衡量。雖然通過(guò)透明度變化有時(shí)會(huì)碰到?jīng)]有背景色的問(wèn)題，但是這種情況很少，而且也很好解決，增加一個(gè)背景就可以了；

B、圖標(biāo)

最開(kāi)始我們就像以往一樣，圖標(biāo)的形式采用線(xiàn)性圖標(biāo)。但是我發(fā)現(xiàn)在深色模式下，線(xiàn)性圖標(biāo)變得單薄、空洞。我們分析是因?yàn)樵诎咨尘跋?，線(xiàn)性圖標(biāo)是深色的，深色具有收縮感，讓人眼能夠關(guān)注到“線(xiàn)”和被線(xiàn)包圍的“留白”，人眼關(guān)注的是整體；而在深色模式下，線(xiàn)是白色的，白色具有擴(kuò)張感，白色的擴(kuò)展讓人眼的關(guān)注點(diǎn)變成了“線(xiàn)”，忽略了“留白”，所以人的觀察感覺(jué)是缺失的，而且在大面積深色的壓迫下，線(xiàn)性圖標(biāo)變得特別單薄。于是我們決定采用面性圖標(biāo)來(lái)代替之前的線(xiàn)性圖標(biāo)。

六、設(shè)計(jì)規(guī)范

原子設(shè)計(jì)理念

原子設(shè)計(jì)理論由設(shè)計(jì)師Brad Frost首先提出，我覺(jué)得這套理論能夠很好的組織構(gòu)建設(shè)計(jì)規(guī)范，也有利于團(tuán)隊(duì)成員理解與協(xié)作，于是我把這套理論踐行于這套系統(tǒng)中。在原子設(shè)計(jì)理念中，一切設(shè)計(jì)都是由最小的原子組成，然后原子可以演變成分子，組織，模板，頁(yè)面。

1、原子

為UI設(shè)計(jì)構(gòu)成的基本元素，文字、顏色、圖標(biāo)、圖片、調(diào)色板、進(jìn)度條、分割線(xiàn)、開(kāi)關(guān)、單選框、復(fù)選框，也可以為抽象的概念，例如色調(diào)等。特點(diǎn)是不可再分割。

2、分子

由原子構(gòu)成的簡(jiǎn)單UI組件。按鈕、標(biāo)簽、導(dǎo)航、輸入框、搜索框等。

3、組織

相對(duì)分子而言，較為復(fù)雜的構(gòu)成物，由多個(gè)簡(jiǎn)單的UI組件構(gòu)成。彈窗、表單、列表、卡片、數(shù)據(jù)圖表等。

4、模板

以頁(yè)面為基礎(chǔ)的架構(gòu)，將以上元素進(jìn)行排版。例如消息模塊、列表模塊、項(xiàng)目模塊、表單填寫(xiě)相關(guān)模塊。

作者：Watt海羅來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

評(píng)論(0) 瀏覽(1535)

172022-6

用戶(hù)體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用？來(lái)看看這些應(yīng)用原理！

seo達(dá)人

1、菲茨定律

選中目標(biāo)所需時(shí)間與移動(dòng)距離長(zhǎng)短和目標(biāo)面積大小有關(guān)。（與距離負(fù)相關(guān)，與面積正相關(guān)）

現(xiàn)實(shí)中的應(yīng)用

在商場(chǎng)中尋找洗手間取決于標(biāo)志的大小及步行的距離。為了滿(mǎn)足這兩個(gè)標(biāo)準(zhǔn)，標(biāo)志設(shè)計(jì)得更大、更容易接近。

設(shè)計(jì)應(yīng)用

▲ 左側(cè)頁(yè)面的CTA按鈕很小，沒(méi)有突出顯示，與表單的其他元素基本上沒(méi)有區(qū)分；右側(cè)頁(yè)面CTA按鈕尺寸很大，能讓用戶(hù)清晰識(shí)別。

2、希克定律

決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。

現(xiàn)實(shí)中的應(yīng)用

與餐廳相比，快餐店的菜單選項(xiàng)有限。因此顧客點(diǎn)餐速度更快，門(mén)店提供的服務(wù)也更快。

設(shè)計(jì)應(yīng)用

▲ 在Whatsapp上轉(zhuǎn)發(fā)消息時(shí)，會(huì)在“最近聊天”列表上方看到“經(jīng)常聯(lián)系”的3個(gè)好友。這對(duì)用戶(hù)來(lái)說(shuō)是一種簡(jiǎn)單的交互，幫助用戶(hù)節(jié)省操作時(shí)間。

3、共域定律

被一個(gè)顯而易見(jiàn)的邊框包圍起來(lái)的多個(gè)元素，被視為一個(gè)群組。(從屬于格式塔理論)

現(xiàn)實(shí)中的應(yīng)用

在服裝店中，衣服按照類(lèi)型被分到不同的架子上來(lái)展示，即使對(duì)這家服裝店一無(wú)所知，顧客也會(huì)將一個(gè)貨架內(nèi)的商品關(guān)聯(lián)成相似的東西。

設(shè)計(jì)應(yīng)用

▲ 過(guò)濾器被封閉在產(chǎn)品頁(yè)面之外的單獨(dú)區(qū)域中，因此可以清楚地識(shí)別左右兩部分的差異。

4、雅各布定律

用戶(hù)將大部分時(shí)間花在別人家的網(wǎng)站(產(chǎn)品)上，而不是你的。這意味著他們希望你的網(wǎng)站(產(chǎn)品)跟別人的有相同的使用方式。

現(xiàn)實(shí)中的應(yīng)用

假設(shè)家中的陽(yáng)臺(tái)是一扇推拉門(mén)，我們可能希望酒店的陽(yáng)臺(tái)門(mén)也以同樣的方式操作。因此如果酒店有一個(gè)滑動(dòng)門(mén)，我們可能會(huì)下意識(shí)地先去推門(mén)。

設(shè)計(jì)應(yīng)用

▲ 以上是國(guó)外知名的電商網(wǎng)站導(dǎo)航欄設(shè)計(jì)，這幾個(gè)網(wǎng)站導(dǎo)航欄中顯示的信息及其結(jié)構(gòu)都非常相似：左側(cè)是品牌標(biāo)志，中間為搜索欄，右側(cè)為其他選項(xiàng)(購(gòu)物車(chē)/個(gè)人賬戶(hù))。

5、系列位置效應(yīng)

用戶(hù)更容易記住系列中出現(xiàn)的第一項(xiàng)(首因效應(yīng))和最后一項(xiàng)(近因效應(yīng))。

現(xiàn)實(shí)中的應(yīng)用

我們通常更容易記住某個(gè)電話(huà)號(hào)碼的前4位或后3位，這條法則也是銀行卡號(hào)被分成4組數(shù)字的原因。

設(shè)計(jì)應(yīng)用

▲ 在亞馬遜主頁(yè)上，網(wǎng)站的第一部分總是顯示最重要的內(nèi)容：導(dǎo)航包含logo、搜索和其他重要功能；輪播圖通過(guò)圖形設(shè)計(jì)吸引用戶(hù)的目光，引導(dǎo)新的交易或優(yōu)惠。

6、馮·雷斯托夫效應(yīng)

又稱(chēng)隔離效應(yīng)。當(dāng)存在多個(gè)相似物體時(shí)，與眾不同的物體最容易被記住。

現(xiàn)實(shí)中的應(yīng)用

在商場(chǎng)購(gòu)物時(shí)，相較于普通裝飾的門(mén)店，我們更有可能記住或?qū)⒆⒁饬D(zhuǎn)移到具有霓虹燈效果的門(mén)店上。

設(shè)計(jì)應(yīng)用

▲ App上有新消息時(shí)，會(huì)在圖標(biāo)上用紅點(diǎn)顯示，這樣的提示更清晰和突出，從而吸引用戶(hù)的注意力，引導(dǎo)用戶(hù)點(diǎn)擊并查看消息。

7、審美可用性效應(yīng)

用戶(hù)通常認(rèn)為漂亮的設(shè)計(jì)更易用。

現(xiàn)實(shí)中的應(yīng)用

當(dāng)參觀汽車(chē)展廳時(shí)，我們通常會(huì)對(duì)汽車(chē)精美的展示感到驚嘆，并立即對(duì)這個(gè)品牌產(chǎn)生積極的印象。

設(shè)計(jì)應(yīng)用

▲ 在愛(ài)彼迎上，我們住在陌生人的房子里，因此建立雙方的信任是必要的。當(dāng)訪(fǎng)問(wèn)像愛(ài)彼迎這樣干凈簡(jiǎn)潔的網(wǎng)站時(shí)，我們會(huì)下意識(shí)地信任這個(gè)產(chǎn)品，也確保了用戶(hù)對(duì)品牌的信任。

8、峰終定律

人們?cè)u(píng)論體驗(yàn)優(yōu)劣，大多基于峰值和結(jié)束時(shí)的感受，而不是所有環(huán)節(jié)的平均值。

現(xiàn)實(shí)中的應(yīng)用

在足球比賽中，整場(chǎng)的觀看體驗(yàn)將根據(jù)比賽結(jié)束(誰(shuí)獲勝)和比賽高潮（誰(shuí)進(jìn)球最多/比賽中最激動(dòng)人心的時(shí)刻)來(lái)判斷。

設(shè)計(jì)應(yīng)用

▲ 在夜晚非常饑餓的時(shí)候，我們使用訂餐App選擇食物時(shí)，卻被告知付款失敗。這時(shí)候App界面設(shè)計(jì)的再好看也無(wú)關(guān)緊要，訂餐失敗就是從這次體驗(yàn)中收獲的結(jié)果。

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用戶(hù)體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用？來(lái)看看這些應(yīng)用原理！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

評(píng)論(0) 瀏覽(954)

172022-6

用設(shè)計(jì)詮釋搜索熱點(diǎn)

seo達(dá)人

設(shè)計(jì)思考及詮釋方法

我們先要去了解用戶(hù)是如何消費(fèi)熱點(diǎn)內(nèi)容的，基于用戶(hù)情景認(rèn)知鏈路分析用戶(hù)在事件消費(fèi)的鏈路，可以分為三個(gè)重要節(jié)點(diǎn)：1.熱點(diǎn)環(huán)境的感知；2.熱點(diǎn)事件的理解；3.事件觀點(diǎn)的產(chǎn)生。

結(jié)合用戶(hù)的消費(fèi)路徑，我們將設(shè)計(jì)邏輯框架拆分為三個(gè)層級(jí)：

1.氛圍背景層：分層呈現(xiàn)熱度氛圍，輔助用戶(hù)感知熱點(diǎn)環(huán)境；

2.信息內(nèi)容層：精細(xì)化拼裝管理，幫助用戶(hù)理解熱點(diǎn)事件；

3.功能互動(dòng)層：輕互動(dòng)玩法設(shè)計(jì)，激發(fā)用戶(hù)參與抒發(fā)事件觀點(diǎn)。

1. 熱點(diǎn)環(huán)境感知：分層呈現(xiàn)熱度氛圍

從氛圍表現(xiàn)層面，助力用戶(hù)更快速的辨別事件的熱度及重要程度。設(shè)計(jì)師結(jié)合搜索熱點(diǎn)使用場(chǎng)景以及業(yè)務(wù)時(shí)效性配置訴求，歸類(lèi)了兩種設(shè)計(jì)表現(xiàn)層次：1.日常熱度氛圍 2. 大事件熱度氛圍

1）第一個(gè)層次：日常熱度氛圍

主要應(yīng)用于熱點(diǎn)新聞場(chǎng)景，時(shí)效性要求高，同時(shí)事件熱度也會(huì)在：“發(fā)酵—爆發(fā)—消退” 間實(shí)時(shí)變化，設(shè)計(jì)根據(jù)熱度“強(qiáng)弱”程度需求，劃分兩檔視覺(jué)展現(xiàn)階梯，以自動(dòng)化的方式展現(xiàn)，滿(mǎn)足熱度的實(shí)時(shí)變化需求，輔助用戶(hù)感知當(dāng)前事件熱度?！暗蜔岱諊比鯓?biāo)簽設(shè)計(jì)用以展現(xiàn)上升/今日熱點(diǎn)，“高熱氛圍”色彩背景通頂效果+上榜標(biāo)簽用以展現(xiàn)上榜熱點(diǎn)。

如，“馬斯克收購(gòu)?fù)铺亍?/strong>，搜索熱度持續(xù)上升，以第一階梯-標(biāo)簽方式展示低熱氛圍；在 “馬斯克收購(gòu)?fù)铺亍?的事件熱度不斷增長(zhǎng)，成為熱榜事件后，以第二階梯 – 高熱氛圍自動(dòng)匹配，通過(guò)背景及榜單標(biāo)簽的呈現(xiàn)，明確告知用戶(hù)當(dāng)前事件的火熱程度。

2）第二個(gè)層次：大事件熱度氛圍

主要應(yīng)用于熱點(diǎn)大事件或運(yùn)營(yíng)活動(dòng)場(chǎng)景，個(gè)性化展現(xiàn)要求高，同時(shí)事件關(guān)注度及重要程度也不同，設(shè)計(jì)根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯，以人工配置的方式展現(xiàn)，超強(qiáng)的運(yùn)營(yíng)氛圍，可以讓用戶(hù)充分感知當(dāng)前事件的重要程度，“A級(jí)氛圍”頭部疊加場(chǎng)景元素設(shè)計(jì)用以展現(xiàn)大事件，“S級(jí)氛圍”整頁(yè)沉浸式視覺(jué)設(shè)計(jì)用以展現(xiàn)重大事件。

如，冬奧會(huì)，重大事件，選用第二階梯 S級(jí)氛圍，打造超強(qiáng)的運(yùn)營(yíng)大事件會(huì)場(chǎng)認(rèn)知。

前置突發(fā)大事件氛圍設(shè)計(jì)

近幾年我們不斷的經(jīng)歷各類(lèi)突發(fā)大事件，如：疫情/暴雨/名人逝世等等，每次突然發(fā)生的事件都讓設(shè)計(jì)師措手不及，匆忙產(chǎn)出運(yùn)營(yíng)氛圍設(shè)計(jì)方案緊急上線(xiàn)，保時(shí)效就很難保障質(zhì)量，因此我們?cè)谙肽懿荒芸偨Y(jié)事件類(lèi)型提前儲(chǔ)備設(shè)計(jì)，以備不時(shí)之需。

不同突發(fā)事件會(huì)牽動(dòng)網(wǎng)友不同的情感情緒，比如河南暴雨，我們?yōu)槭茈y同胞擔(dān)心，為救助工作加油，為逝者哀悼；火箭發(fā)射成功，我們驕傲喝彩；名人結(jié)婚，我們送上溫馨的祝福。不同事件帶來(lái)不同的情感情緒，也要求設(shè)計(jì)師要用準(zhǔn)確的視覺(jué)語(yǔ)言表達(dá)。

因此我們?cè)谇爸迷O(shè)計(jì)時(shí)也充分考慮了事件情感因素，通過(guò)對(duì)近一年突發(fā)大事件的歸類(lèi)梳理，并推導(dǎo)不同細(xì)分場(chǎng)景下的用戶(hù)情緒，通過(guò)情緒分類(lèi)的方式，總結(jié)兩種視覺(jué)設(shè)計(jì)表達(dá)形式：1.實(shí)景圖合成效果滿(mǎn)足嚴(yán)肅/莊重/權(quán)威場(chǎng)景情感需求；2.手繪效果滿(mǎn)足積極/歡快/慶祝場(chǎng)景的情感需求。結(jié)合以上思路我們共儲(chǔ)備6大類(lèi)20個(gè)子分類(lèi)場(chǎng)景的前置氛圍+金剛位等運(yùn)營(yíng)物料設(shè)計(jì)，保障突發(fā)熱點(diǎn)運(yùn)營(yíng)設(shè)計(jì)質(zhì)效。

截至22年Q1，前置設(shè)計(jì)已在38個(gè)熱點(diǎn)場(chǎng)景應(yīng)用：

2. 熱點(diǎn)事件理解：內(nèi)容精細(xì)化拼裝管理

為滿(mǎn)足用戶(hù)不同事件場(chǎng)景下的信息需求，設(shè)計(jì)結(jié)合百度搜索：主要內(nèi)容區(qū)（主要需求滿(mǎn)足）+ 延展內(nèi)容區(qū)（延展需求滿(mǎn)足）的綜合聚合能力，通過(guò)組件分區(qū)布局+精細(xì)化規(guī)則管理，為熱點(diǎn)場(chǎng)景內(nèi)容的高效拼裝打好體驗(yàn)基礎(chǔ)。

1）主要內(nèi)容區(qū)

主要內(nèi)容區(qū)，能夠幫助用戶(hù)快速了解事件的主題、時(shí)間及主要內(nèi)容，結(jié)合熱點(diǎn)事件長(zhǎng)期的需求沉淀，設(shè)計(jì)將主要內(nèi)容區(qū)又細(xì)分為主題區(qū)域及內(nèi)容區(qū)域。主題區(qū)域可承載拼裝事件主題、事件倒計(jì)時(shí)、會(huì)場(chǎng)分發(fā)導(dǎo)航等主題類(lèi)組件；內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過(guò)不同區(qū)域內(nèi)組件拼裝規(guī)則的制定，業(yè)務(wù)可以快速選擇所需組件進(jìn)行頁(yè)面組織拼裝，達(dá)成分場(chǎng)景個(gè)性化滿(mǎn)足用戶(hù)主需求的目標(biāo)。

如：元宵晚會(huì)，熱點(diǎn)主要內(nèi)容區(qū) 以“ 晚會(huì)直播時(shí)間倒計(jì)時(shí)+ 各衛(wèi)視晚會(huì)分會(huì)場(chǎng)導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會(huì)預(yù)熱期的事件主需求滿(mǎn)足。

因?yàn)橛性O(shè)計(jì)拼裝規(guī)則，不同大事件活動(dòng)，各場(chǎng)景內(nèi)容可個(gè)性化滿(mǎn)足需求，交互布局設(shè)計(jì)上又可兼顧橫向一致性。

2）延展內(nèi)容區(qū)

延展內(nèi)容區(qū)，能夠幫助用戶(hù)了解事件相關(guān)知識(shí)信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場(chǎng)景需求，選擇多個(gè)延展內(nèi)容模板與主要內(nèi)容區(qū)進(jìn)行拼裝，搭建完整頁(yè)面以呈現(xiàn)不同熱點(diǎn)事件內(nèi)容。

如：俄烏戰(zhàn)爭(zhēng)-戰(zhàn)事場(chǎng)景，脈絡(luò)卡幫助用戶(hù)快速了解事件進(jìn)展；冬奧會(huì)-賽事場(chǎng)景，數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進(jìn)展；博鰲亞洲論壇-會(huì)議場(chǎng)景，百科卡幫助用戶(hù)科普相關(guān)名詞知識(shí)。

3. 事件觀點(diǎn)產(chǎn)生-輕互動(dòng)玩法強(qiáng)化參與感

通過(guò)氛圍打造和內(nèi)容組織，已經(jīng)達(dá)成用戶(hù)需求滿(mǎn)足的目標(biāo)，但到此截止，搜索結(jié)果的體驗(yàn)還是理智疏遠(yuǎn)單向的，搜索場(chǎng)景與用戶(hù)、用戶(hù)與用戶(hù)間也無(wú)法產(chǎn)生對(duì)當(dāng)前熱點(diǎn)的討論與態(tài)度表達(dá)。因此設(shè)計(jì)師對(duì)用戶(hù)的互動(dòng)行為認(rèn)知習(xí)慣進(jìn)行分析，并采取具體的設(shè)計(jì)策略逐步引導(dǎo)用戶(hù)參與互動(dòng)。

1）互動(dòng)喚醒 – 吸引圍觀增強(qiáng)互動(dòng)意愿

優(yōu)化前的熱搜結(jié)果頁(yè)，用戶(hù)的討論內(nèi)容都是隱藏在資訊落地頁(yè)評(píng)論區(qū)內(nèi)，需要點(diǎn)擊進(jìn)內(nèi)容落地頁(yè)內(nèi)才能參與“圍觀”或“討論”，除互動(dòng)氛圍已脫離當(dāng)前場(chǎng)景外，也削弱了用戶(hù)對(duì)此事件表態(tài)的參與積極性。

通過(guò)彈幕滾動(dòng)+輸入框組件組合外顯的交互設(shè)計(jì)方式，將用戶(hù)討論外露，不僅豐富熱點(diǎn)事件搜索場(chǎng)景的內(nèi)容維度，同時(shí)基于從眾心理，進(jìn)一步刺激用戶(hù)的參與欲望。彈幕結(jié)合事件類(lèi)型配色來(lái)更好貼合熱點(diǎn)事件整體環(huán)境氛圍。

2）情緒抒發(fā)-輕互動(dòng)玩法降低互動(dòng)門(mén)檻

而投票表態(tài)+彈幕輕互動(dòng)組合效果設(shè)計(jì)，能進(jìn)一步降低用戶(hù)交互心理門(mén)檻，讓用戶(hù)動(dòng)一動(dòng)手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時(shí)也可以發(fā)彈幕聊聊對(duì)當(dāng)前熱點(diǎn)事件的看法，使用戶(hù)互動(dòng)情緒表達(dá)更充分。

3）驚喜反饋-強(qiáng)化視效打造記憶點(diǎn)

原有設(shè)計(jì)風(fēng)格，無(wú)法在去世祭奠、頒發(fā)勛章等莊重嚴(yán)肅場(chǎng)景精準(zhǔn)的表達(dá)視覺(jué)情感，無(wú)互動(dòng)反饋狀態(tài)僅有互動(dòng)前后狀態(tài)變化。

結(jié)合熱點(diǎn)場(chǎng)景積極外放情緒及莊重內(nèi)斂情緒，視覺(jué)主要從形/質(zhì)兩個(gè)維度進(jìn)行優(yōu)化升級(jí)，并增加互動(dòng)反饋動(dòng)效，同時(shí)運(yùn)營(yíng)可結(jié)合具體事件主題配置，綜合提升互動(dòng)驚喜效果，打造產(chǎn)品記憶點(diǎn)。

視覺(jué)層：通過(guò)更立體的形態(tài)和更豐富的層次質(zhì)感，更精準(zhǔn)的表達(dá)情感

動(dòng)效反饋層：以主圖形+輔助元素，通過(guò)符合場(chǎng)景氛圍的動(dòng)態(tài)效果設(shè)計(jì)，更充分的表達(dá)情感

運(yùn)營(yíng)主題配置：在日常反饋基礎(chǔ)上，增加運(yùn)營(yíng)主題配置層級(jí)，為特定主題場(chǎng)景提供定制反饋效果

寫(xiě)在最后

通過(guò)熱點(diǎn)環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿(mǎn)足等設(shè)計(jì)手段，助力搜索平臺(tái)以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對(duì)全年3萬(wàn)+熱點(diǎn)大事件運(yùn)營(yíng)。會(huì)場(chǎng)拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場(chǎng)景也在不斷擴(kuò)展，如營(yíng)銷(xiāo)活動(dòng)、品牌造節(jié)等。設(shè)計(jì)不會(huì)止步于此，我們將基于用戶(hù)需求不斷探索深耕，為用戶(hù)呈現(xiàn)更快速、準(zhǔn)確、全面、有溫度的搜索熱點(diǎn)體驗(yàn)。

原文地址：百度MEUX（公眾號(hào)）

作者：百度APP用戶(hù)體驗(yàn)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用設(shè)計(jì)詮釋搜索熱點(diǎn)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(951)

172022-6
做了近百個(gè)網(wǎng)頁(yè)，總結(jié)的高質(zhì)量設(shè)計(jì)方法

seo達(dá)人

01 設(shè)計(jì)網(wǎng)頁(yè)中遇到的問(wèn)題

面對(duì)企業(yè)級(jí)中后臺(tái)龐大且復(fù)雜的集合，會(huì)面臨各類(lèi)問(wèn)題：

業(yè)務(wù)多，資源少

本多個(gè)需求同時(shí)跟進(jìn)，項(xiàng)目多且雜從而產(chǎn)生超負(fù)荷。也不便于更好地理解業(yè)務(wù)。

人力成本高

設(shè)計(jì)資源有限，設(shè)計(jì)完成后需要和不同業(yè)務(wù)線(xiàn)開(kāi)發(fā)進(jìn)行多次設(shè)計(jì)走查，影響設(shè)計(jì)師提效。

沒(méi)有品牌性

針對(duì)b端產(chǎn)品，多樣性設(shè)計(jì)無(wú)法形成品牌特性，傳達(dá)品牌特色，導(dǎo)致中臺(tái)業(yè)務(wù)線(xiàn)繁多但不“精致”


體驗(yàn)差

官網(wǎng)設(shè)計(jì)中也有很多相似功能，面對(duì)繁多需求，設(shè)計(jì)者快速做出響應(yīng)會(huì)產(chǎn)生重復(fù)勞動(dòng)成本。只能做到滿(mǎn)足功能，用戶(hù)體驗(yàn)并不是很友好。

02 突破問(wèn)題

通過(guò)總結(jié)之前的工作，發(fā)現(xiàn)很多設(shè)計(jì)內(nèi)容有50%以上的重復(fù)率，我們要做的是將這50%重復(fù)率形成設(shè)計(jì)體系化，建立資源整合，搭建規(guī)范化官網(wǎng)模塊，并把模塊設(shè)計(jì)反推給產(chǎn)品，在提高設(shè)計(jì)效率的同時(shí)也減少產(chǎn)品工作，減少協(xié)同成本。

通過(guò)“收集需求——整合歸納——定義組件——代碼搭建“ 的過(guò)程提升設(shè)計(jì)效率。

第一步：整合資源，模塊的確立

整合各個(gè)業(yè)務(wù)線(xiàn)資源，并根據(jù)業(yè)務(wù)系統(tǒng)進(jìn)行分類(lèi)：數(shù)據(jù)中臺(tái)，技術(shù)中臺(tái)，業(yè)務(wù)中臺(tái)。面對(duì)這三大類(lèi)別，目前官網(wǎng)需求量會(huì)達(dá)到幾十個(gè)，而面這些繁多網(wǎng)站需求，首先要做的就是整合分類(lèi)。

通過(guò)對(duì)對(duì)業(yè)務(wù)線(xiàn)歸類(lèi)，統(tǒng)計(jì)出高頻15+個(gè)組件模塊：

Banner、產(chǎn)品優(yōu)勢(shì)、產(chǎn)品特色、案例、信息內(nèi)容、信息流程、合作方、聯(lián)系我們、關(guān)于我們、使用流程、功能介紹、手機(jī)\電腦信息展示、合作方、地理地圖、其他模塊等…

第二步：模塊梳理歸類(lèi)

并更具根據(jù)模塊類(lèi)別的復(fù)用率進(jìn)行再次梳理，產(chǎn)出設(shè)計(jì)模版。模版根據(jù)設(shè)計(jì)形式、排版布局等方面進(jìn)行進(jìn)一步延展，復(fù)用率高的模塊對(duì)應(yīng)模板更豐富。

03 設(shè)計(jì)語(yǔ)言（理念）的建立與模塊產(chǎn)出

設(shè)計(jì)風(fēng)格建立

視覺(jué)體系上，B端產(chǎn)品不同于C端，設(shè)計(jì)更多為體驗(yàn)服務(wù)，色彩的豐富度相對(duì)較弱，單一。要突出b端設(shè)計(jì)，我們決定從精致性上為切入點(diǎn)，選定“輕擬態(tài)”風(fēng)格，即突出設(shè)計(jì)的細(xì)節(jié)性又不會(huì)因?yàn)檫^(guò)度設(shè)計(jì)影響內(nèi)容。并根據(jù)業(yè)務(wù)體系與設(shè)計(jì)風(fēng)格，完善設(shè)計(jì)語(yǔ)言關(guān)鍵詞提煉：科技、高效、簡(jiǎn)約。



字體與顏色規(guī)范

色彩能夠起到視覺(jué)語(yǔ)言傳達(dá)和信息承載作用。企業(yè)級(jí)產(chǎn)品延用了matrix 的配色體系，以藍(lán)色調(diào)為主色，同時(shí)模塊產(chǎn)出深淺色系，便于多方面選擇。

設(shè)計(jì)布局

采用刪格系統(tǒng)定義布局，根據(jù)首頁(yè)和內(nèi)頁(yè)展示形式進(jìn)行基礎(chǔ)布局



icon再創(chuàng)新

圖標(biāo)也進(jìn)行三大層級(jí)劃分，以應(yīng)用于不同場(chǎng)景：

3D圖標(biāo)

3d質(zhì)感圖標(biāo)。用于重要層級(jí)模塊，數(shù)量控制4個(gè)以?xún)?nèi)。

玻璃球圖標(biāo)

磨砂玻璃風(fēng)格已經(jīng)廣泛應(yīng)用于ui產(chǎn)品中的很多地方，我們?cè)谀ド安ＡЩA(chǔ)上，創(chuàng)新新的icon風(fēng)格“玻璃球”icon，該風(fēng)格能更換的和輕質(zhì)感設(shè)計(jì)融合在一起，用幾何元素設(shè)計(jì)，通過(guò)拼接組合和系統(tǒng)icon設(shè)計(jì)，能夠在短時(shí)間內(nèi)快速產(chǎn)出立體icon，適用少于8個(gè)類(lèi)別的模塊icon。



輕擬態(tài)線(xiàn)性圖標(biāo)

3d線(xiàn)性圖標(biāo)適用于多場(chǎng)景模塊，可大范圍出現(xiàn)在頁(yè)面中。



三維設(shè)計(jì)

banner模塊分為3d三維風(fēng)格和二維平面圖片，根據(jù)不同業(yè)務(wù)線(xiàn)定義使用規(guī)則。如商業(yè)，公益相關(guān)產(chǎn)品，選定圖片作為banner展示更能準(zhǔn)確傳達(dá)信息，而技術(shù)類(lèi)官網(wǎng)用3d效果更能傳遞科技性。

同時(shí)定義多種banner布局：左文右圖，文字居中，banner加搜索模塊，圖片banner等，

可根據(jù)需求自由選擇。

幾何化形的裝飾元素

為了體現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的“空間感” 網(wǎng)頁(yè)設(shè)計(jì)中加入幾何元素穿插，根據(jù)業(yè)務(wù)品牌語(yǔ)言圓、三角、方定義輔助裝飾元素。（圓-業(yè)務(wù) ；方-技術(shù) ；三角-數(shù)據(jù)圓、三角、方定義設(shè)計(jì)幾何元素）

多樣性變化

為官網(wǎng)模塊的產(chǎn)出依據(jù)業(yè)務(wù)線(xiàn)，在建立規(guī)范化組件的同時(shí)也需要考慮設(shè)計(jì)中的“區(qū)別性”業(yè)務(wù)線(xiàn)-營(yíng)銷(xiāo)產(chǎn)品，更多體現(xiàn)商業(yè)性質(zhì)設(shè)計(jì)采用暗色系，而技術(shù)類(lèi)官網(wǎng)更多體現(xiàn)科技感，加入3d元素。在同一模塊的設(shè)計(jì)也加入背景白色/暗色和模塊的亮色/暗色。

04 實(shí)際應(yīng)用

目前我們已經(jīng)產(chǎn)出50+模塊，10個(gè)+網(wǎng)頁(yè)模版，通過(guò)代碼化，建立“云搭”這一網(wǎng)頁(yè)生成工具，建立中臺(tái)系統(tǒng)在生成平臺(tái)，目前已經(jīng)支持多個(gè)業(yè)務(wù)線(xiàn)。從設(shè)計(jì)產(chǎn)出模塊到開(kāi)發(fā)實(shí)現(xiàn)模塊代碼話(huà)再到產(chǎn)品拼接選擇，整體過(guò)程節(jié)約了設(shè)計(jì)資源，為產(chǎn)品研發(fā)提效提供一站式解決方案。

后續(xù)我們將發(fā)布云搭二期文章，會(huì)為大家介紹設(shè)計(jì)師是如何從產(chǎn)品、交互思維，自主研發(fā)“云搭”這款工具的，敬請(qǐng)期待。

原文地址：58UXD（公眾號(hào)）

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

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》做了近百個(gè)網(wǎng)頁(yè)，總結(jié)的高質(zhì)量設(shè)計(jì)方法

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(934)

172022-6
交互設(shè)計(jì)師專(zhuān)業(yè)能力體系

seo達(dá)人

一、交互設(shè)計(jì)師能力模型圖

二、交互崗專(zhuān)業(yè)能力描述

能力模型圖中的每個(gè)點(diǎn)都可以很詳細(xì)的寫(xiě)一篇專(zhuān)題文章，本文不做過(guò)多展開(kāi)，只是拋磚引玉：向大家說(shuō)明具體能力維度可提升落地的點(diǎn)有哪些。其中一些能力點(diǎn)我之前的文章中也有提及，以后有機(jī)會(huì)我會(huì)針對(duì)其他能力點(diǎn)單獨(dú)梳理文章。

基礎(chǔ)專(zhuān)業(yè)能力

1.對(duì)業(yè)務(wù)與產(chǎn)品的理解

一直在強(qiáng)調(diào)交互設(shè)計(jì)師要盡可能前置到業(yè)務(wù)中，在設(shè)計(jì)工作的起始階段對(duì)業(yè)務(wù)背景、業(yè)務(wù)目的、現(xiàn)階段存在的問(wèn)題、產(chǎn)品規(guī)劃有一定程度的了解，為后續(xù)設(shè)計(jì)方案提供決策依據(jù)。

除了承接上游需求，許多設(shè)計(jì)師自主驅(qū)動(dòng)的需求都建立在對(duì)業(yè)務(wù)的綜合了解基礎(chǔ)之上，如果僅是體驗(yàn)設(shè)計(jì)層面的優(yōu)化，實(shí)踐中很難獲得上下游同事對(duì)其價(jià)值的支持和認(rèn)可，想要落地就更加無(wú)從談起了。

可以從以下幾點(diǎn)逐步加強(qiáng)對(duì)各業(yè)務(wù)線(xiàn)、各終端產(chǎn)品的理解：

了解各個(gè)業(yè)務(wù)線(xiàn)或產(chǎn)品的階段性或長(zhǎng)遠(yuǎn)規(guī)劃。

多與產(chǎn)品經(jīng)理、運(yùn)營(yíng)等上游同事溝通，深入了解產(chǎn)品發(fā)展的歷史緣由。

通過(guò)用研分析逐步了解不同產(chǎn)品的優(yōu)勢(shì)與不足。

2。需求分析與設(shè)計(jì)規(guī)劃

需求分析主要是指與產(chǎn)品經(jīng)理的協(xié)作配合，有時(shí)候也會(huì)直接與運(yùn)營(yíng)、銷(xiāo)售或者客戶(hù)對(duì)接。交互設(shè)計(jì)師介入一般有兩種方式：

A. 業(yè)務(wù)方訴求明確，產(chǎn)品需求初稿規(guī)劃完成，此時(shí)交互設(shè)計(jì)師介入，基于產(chǎn)品需求目的給出體驗(yàn)設(shè)計(jì)層面的建議。

B. 只明確了要實(shí)現(xiàn)的業(yè)務(wù)目標(biāo)，產(chǎn)品需求尚未明確，需要交互設(shè)計(jì)師與產(chǎn)品經(jīng)理或業(yè)務(wù)方一起溝通共創(chuàng)，相當(dāng)于協(xié)助產(chǎn)品明確需求的過(guò)程。

在這個(gè)階段，交互設(shè)計(jì)師需要注意以下幾點(diǎn)：

了解需求的背景與目的，需求方案的合理性，針對(duì)需求不合理之處提出質(zhì)疑并綜合考慮給出建議方案。

需求分析與設(shè)計(jì)規(guī)劃時(shí)要盡可能平衡業(yè)務(wù)訴求、用戶(hù)體驗(yàn)、技術(shù)可行性與實(shí)現(xiàn)成本等因素。

查看需求文檔雖然是基本功，但是對(duì)于新人而言這里容易踩的坑比較多。不同產(chǎn)品經(jīng)理描述風(fēng)格與方式不同，也難免有一些規(guī)則遺漏，所以查看時(shí)若存在問(wèn)題及時(shí)與產(chǎn)品經(jīng)理溝通。

經(jīng)過(guò)需求分析，交互設(shè)計(jì)師可以推導(dǎo)出整體的設(shè)計(jì)目標(biāo)與設(shè)計(jì)策略。

3.設(shè)計(jì)規(guī)范與組件

設(shè)計(jì)規(guī)范是基于設(shè)計(jì)語(yǔ)言或設(shè)計(jì)指南而來(lái)的，不同公司產(chǎn)品會(huì)有不同的定義。根據(jù)業(yè)務(wù)復(fù)雜程度和產(chǎn)品特性，一些公司會(huì)梳理自己的設(shè)計(jì)規(guī)范，交互設(shè)計(jì)師重點(diǎn)關(guān)注交互層面的規(guī)范，也需要對(duì)視覺(jué)規(guī)范有一定了解。

設(shè)計(jì)組件是以設(shè)計(jì)規(guī)范為指導(dǎo)原則，為提升產(chǎn)研協(xié)作和開(kāi)發(fā)效率而設(shè)定的UI組件庫(kù)。這里需要注意：

設(shè)計(jì)組件一般分為基礎(chǔ)組件和業(yè)務(wù)組件，基礎(chǔ)組件類(lèi)似Ant Design；業(yè)務(wù)組件則是依據(jù)公司具體產(chǎn)品使用場(chǎng)景決定的，比如電商類(lèi)應(yīng)用：產(chǎn)品列表的產(chǎn)品信息、直播模塊等頻繁被調(diào)用的、由多個(gè)基礎(chǔ)組件組合而成的內(nèi)容。

由于不同終端交互設(shè)置和操作方式存在差異，所以可能會(huì)有針對(duì)移動(dòng)端、Pad端、Web端、TV端等多終端設(shè)計(jì)組件。

大家可以參考iOS人機(jī)交互指南與谷歌的MD系統(tǒng)級(jí)設(shè)計(jì)規(guī)范；目前市場(chǎng)上有許多開(kāi)源的設(shè)計(jì)基礎(chǔ)組件，比如Ant design、滴滴、騰訊、京東、有贊、餓了么等。

4.交互文檔

設(shè)計(jì)方案具象化的呈現(xiàn)依靠“規(guī)范的交互文檔”，輸出交互文檔注意以下幾點(diǎn)：

了解并繪制信息結(jié)構(gòu)圖
交互設(shè)計(jì)師繪制的信息結(jié)構(gòu)圖通常用于“信息層級(jí)的梳理”。比如一個(gè)網(wǎng)站或APP的導(dǎo)航劃分與層級(jí)，可以通過(guò)信息結(jié)構(gòu)圖直觀的呈現(xiàn)，也可以更直觀的判斷與其他內(nèi)容的關(guān)聯(lián)關(guān)系，確認(rèn)是否符合用戶(hù)的心理模型?？蓞⒖嘉抑皩?xiě)過(guò)的文章：你對(duì)信息架構(gòu)圖了解多少？

了解并繪制任務(wù)流程圖
對(duì)于邏輯判斷比較復(fù)雜的項(xiàng)目，比如涉及多角色、多狀態(tài)、多任務(wù)流、多終端時(shí)，任務(wù)流程圖有助于設(shè)計(jì)師及相關(guān)查閱的人更快更清晰的了解需求?？蓞⒖嘉抑皩?xiě)過(guò)的有關(guān)流程圖的文章：案例分析：繪制流程圖需要注意哪些事項(xiàng)？

繪制交互原型
關(guān)于如何繪制規(guī)范的原型圖，幾年前我寫(xiě)過(guò)一篇相關(guān)文章，里面提到的基礎(chǔ)原則仍然適用：如何設(shè)計(jì)規(guī)范的原型圖？

交互說(shuō)明的書(shū)寫(xiě)要求
關(guān)于如何將交互說(shuō)明盡可能寫(xiě)的完備和細(xì)致，可以參考我之前寫(xiě)的兩篇文章：

宏觀角度：原型圖的交互說(shuō)明該怎么寫(xiě)？

微觀角度：原型圖的交互說(shuō)明該怎么寫(xiě)

5.交互基礎(chǔ)原則

這部分內(nèi)容涉及到交互層面的一些“參考規(guī)則”，之所以叫參考規(guī)則是因?yàn)椴皇潜仨氉袷兀赡茚槍?duì)不同業(yè)務(wù)和產(chǎn)品會(huì)做適當(dāng)補(bǔ)充或刪減。比如頁(yè)面打開(kāi)方式研究、尼爾森可用性原則等?？梢酝ㄟ^(guò)閱讀一些專(zhuān)業(yè)書(shū)籍掌握理論知識(shí)，然后在實(shí)踐項(xiàng)目中應(yīng)用總結(jié)。

6.主持各類(lèi)溝通會(huì)與評(píng)審會(huì)

交互設(shè)計(jì)師在日常工作流程中，會(huì)參與不同類(lèi)型的會(huì)議，比如需求討論會(huì)、需求評(píng)審會(huì)、設(shè)計(jì)評(píng)審會(huì)（交互與視覺(jué)內(nèi)評(píng)與外評(píng)）、測(cè)試用例評(píng)審會(huì)、開(kāi)發(fā)問(wèn)題討論會(huì)等。有的會(huì)議交互設(shè)計(jì)師作為參與方，有的作為主導(dǎo)方，因此需要對(duì)會(huì)議節(jié)奏和效率綜合把控。

對(duì)于新人或初級(jí)交互，可以選擇性地參加其他交互同事組織的以上相關(guān)會(huì)議，了解和熟悉如何高效開(kāi)會(huì)達(dá)成會(huì)議目的。

7.評(píng)估設(shè)計(jì)排期

在日常項(xiàng)目流程中，需求評(píng)審過(guò)后交互設(shè)計(jì)排期需要首先給到，下游的視覺(jué)設(shè)計(jì)師、前端研發(fā)、甚至包括后端研發(fā)、以及測(cè)試工程師都需要根據(jù)交互文檔給出各自更加精確的排期。

因此評(píng)估交互排期在項(xiàng)目流轉(zhuǎn)過(guò)程中非常重要，如果評(píng)估排期少了無(wú)法按時(shí)交付，可能會(huì)造成下游同事時(shí)間不夠，甚至導(dǎo)致項(xiàng)目延期；如果評(píng)估排期多了，對(duì)于有上線(xiàn)時(shí)間要求的項(xiàng)目，總體時(shí)間可能又會(huì)不夠。

所以交互設(shè)計(jì)師只要做到根據(jù)自己手頭時(shí)間客觀評(píng)估即可。這里對(duì)于新手或初級(jí)交互而言，有兩點(diǎn)注意事項(xiàng)：

承接的項(xiàng)目類(lèi)型由簡(jiǎn)單到復(fù)雜過(guò)渡。

交互排期需要包括“需求溝通時(shí)間、設(shè)計(jì)方案輸出時(shí)間、評(píng)審時(shí)間、評(píng)審后調(diào)整時(shí)間等”，剛開(kāi)始排期可以給自己多預(yù)留1-2天。

對(duì)于一些項(xiàng)目周期緊張或者頻繁變更，導(dǎo)致設(shè)計(jì)輸出時(shí)間增加的需求屬于特殊情況，需要另當(dāng)別論。

8.明確交互驗(yàn)收內(nèi)容

關(guān)于交互驗(yàn)收的流程和驗(yàn)收的具體內(nèi)容，我之前有梳理成一篇文章可供參考：如何做好交互驗(yàn)收？

9.軟件工具

既需要熟練使用設(shè)計(jì)相關(guān)的軟件工具，比如交互常用的Axure、Figma、思維導(dǎo)圖工具等；也需要跟上“軟件出新的步伐”，比如Figma這種云端多人協(xié)作的設(shè)計(jì)工具誕生之后，過(guò)往使用Axure的交互設(shè)計(jì)師和使用Sketch的視覺(jué)設(shè)計(jì)師，都對(duì)它青睞有加。

進(jìn)階專(zhuān)業(yè)能力

1.對(duì)用戶(hù)與使用場(chǎng)景的理解
這塊屬于用研相關(guān)的內(nèi)容，對(duì)于設(shè)計(jì)師而言一直在強(qiáng)調(diào)“平衡商業(yè)目標(biāo)與用戶(hù)體驗(yàn)”。通過(guò)參與或者使用一些定性或定量的用戶(hù)研究方法，去真正理解產(chǎn)品對(duì)應(yīng)的用戶(hù)特征、用戶(hù)想法和用戶(hù)使用場(chǎng)景。我們可以通過(guò)以下方式逐步提升用研能力：

查閱公司內(nèi)部已沉淀積累的用研資料。

掌握并應(yīng)用常用的用研方法，如“體驗(yàn)走查、競(jìng)品分析、AB測(cè)試、可用性測(cè)試、問(wèn)卷調(diào)研、用戶(hù)訪(fǎng)談等”。

這里有兩點(diǎn)注意事項(xiàng)：

有些公司可能沒(méi)有資源推進(jìn)用戶(hù)研究，但至少你需要先掌握相關(guān)理論知識(shí)，學(xué)到的有價(jià)值的東西在未來(lái)總會(huì)用到的；

還有一些公司有專(zhuān)門(mén)的用研部門(mén)，在用研方法和工具使用方面會(huì)更加專(zhuān)業(yè)，這種情況設(shè)計(jì)師與用戶(hù)研究員協(xié)作配合會(huì)更加高效。

2.數(shù)據(jù)意識(shí)和數(shù)據(jù)分析能力
許多設(shè)計(jì)師在項(xiàng)目中估計(jì)都在思考一個(gè)問(wèn)題：設(shè)計(jì)如何賦能業(yè)務(wù)增長(zhǎng)？既然要衡量，那么數(shù)據(jù)指標(biāo)就是最客觀的依據(jù)了，數(shù)據(jù)雖然不能完整體現(xiàn)設(shè)計(jì)價(jià)值，但至少可以驗(yàn)證部分設(shè)計(jì)方案的優(yōu)劣。這里設(shè)計(jì)師需要注意以下兩點(diǎn)：

在日常工作流程中具備數(shù)據(jù)意識(shí)：無(wú)論是需求前期的分析階段，還是設(shè)計(jì)開(kāi)始實(shí)施之前，亦或是需求上線(xiàn)后的效果復(fù)盤(pán)，數(shù)據(jù)都作為有力的客觀佐證，為你的設(shè)計(jì)決策提供依據(jù)。

培養(yǎng)數(shù)據(jù)分析能力：實(shí)際項(xiàng)目的數(shù)據(jù)分析過(guò)程可能會(huì)非常復(fù)雜，涉及到不同類(lèi)型的數(shù)據(jù)指標(biāo)、數(shù)據(jù)分析方法的應(yīng)用、數(shù)據(jù)查看與配置工具、復(fù)雜的業(yè)務(wù)因素等等。需要你對(duì)業(yè)務(wù)和數(shù)據(jù)都比較了解，是一種綜合能力的體現(xiàn)，需要日積月累的打磨。

3.發(fā)現(xiàn)問(wèn)題的主動(dòng)意識(shí)
在工作中無(wú)論是同事還是上級(jí)領(lǐng)導(dǎo)，都特別喜歡態(tài)度與行動(dòng)積極的人。不要總是等著所謂的上游或者上級(jí)安排任務(wù)，自驅(qū)力要強(qiáng)，隨著工作經(jīng)驗(yàn)的累積，主動(dòng)的發(fā)現(xiàn)問(wèn)題、尋找解決方案、并推進(jìn)問(wèn)題解決。這也是區(qū)分不同水平設(shè)計(jì)師的標(biāo)準(zhǔn)之一。
4.思維方式
從認(rèn)知心理學(xué)的角度分析，做一件事情經(jīng)過(guò)“思想-決策-行為-結(jié)果-反饋”的過(guò)程，之后便進(jìn)入了這個(gè)過(guò)程的一種正向或負(fù)向循環(huán)，所以思維方式是決定最終結(jié)果的本源。
對(duì)于產(chǎn)品設(shè)計(jì)者而言，需要重點(diǎn)打磨這幾項(xiàng)思維能力：

邏輯思維：分析和拆解復(fù)雜問(wèn)題的能力。

產(chǎn)品思維：多維度考慮用戶(hù)需求與業(yè)務(wù)訴求。

數(shù)據(jù)思維：掌握數(shù)據(jù)的收集、分析和應(yīng)用。

系統(tǒng)思維：逐步學(xué)會(huì)結(jié)構(gòu)化、體系化地看待問(wèn)題。

5.視覺(jué)審美
目前在大多數(shù)公司有明確的交互崗和視覺(jué)崗，在工作流程中各有專(zhuān)攻，交互設(shè)計(jì)師在產(chǎn)研流程中發(fā)揮“承上啟下”的作用，所以需要了解視覺(jué)層面的理論知識(shí)，具備初級(jí)的視覺(jué)輸出能力。
一些公司設(shè)定了“體驗(yàn)設(shè)計(jì)崗”，雖然號(hào)稱(chēng)是全棧型設(shè)計(jì)師，但專(zhuān)業(yè)能力還是有主輔性：比如主要專(zhuān)業(yè)能力偏交互，也具備一定的視覺(jué)專(zhuān)業(yè)能力。在互聯(lián)網(wǎng)發(fā)展的早期只有視覺(jué)崗位，后來(lái)誕生了交互崗位，目前所謂的全棧體驗(yàn)設(shè)計(jì)師也是從最初的一個(gè)角色蛻變而來(lái)的。
各自分工協(xié)作有助于產(chǎn)品迭代的高效性，交互偏向于業(yè)務(wù)和產(chǎn)品端，注重邏輯梳理和需求分析；視覺(jué)重點(diǎn)是表現(xiàn)層、品牌調(diào)性和運(yùn)營(yíng)活動(dòng)的形象展現(xiàn)。

通用能力

這部分內(nèi)容我之前特意寫(xiě)過(guò)相應(yīng)的文章，參見(jiàn)：交互設(shè)計(jì)師該如何提升“軟實(shí)力”？

個(gè)人影響力

相信每位產(chǎn)品設(shè)計(jì)從業(yè)者在職業(yè)生涯中都處于不斷升級(jí)打怪的狀態(tài)，組織內(nèi)你希望能夠持續(xù)晉升，組織外可能有人希望通過(guò)社交加強(qiáng)專(zhuān)業(yè)交流和學(xué)習(xí)。無(wú)論組織內(nèi)外，建立個(gè)人影響力的有效方式大概有以下幾點(diǎn)：

設(shè)計(jì)分享
不限于具體形式，包括日常項(xiàng)目總結(jié)、軟件工具使用、設(shè)計(jì)方法論應(yīng)用等。對(duì)內(nèi)分享促進(jìn)部門(mén)內(nèi)學(xué)習(xí)提升；對(duì)外通過(guò)輸出專(zhuān)業(yè)文章等方式分享，沉淀積累的同時(shí)，也能幫助有需要的人，順帶還能結(jié)交一些靠譜的朋友，不亦樂(lè)乎！

設(shè)計(jì)指導(dǎo)
當(dāng)你已經(jīng)是有幾年工作經(jīng)驗(yàn)的中高階設(shè)計(jì)師，帶教新人是一種傳承責(zé)任，我們都是從初出茅廬一步步經(jīng)歷過(guò)來(lái)的，非常理解眼前這個(gè)行業(yè)小白有多么渴望在正確的指引下持續(xù)努力。多給予別人幫助，畢竟予人玫瑰，手留余香嘛！

設(shè)計(jì)創(chuàng)新
許多人一聽(tīng)這兩個(gè)字就覺(jué)得有點(diǎn)可笑，該做的事情還沒(méi)做好呢就談創(chuàng)新？其實(shí)創(chuàng)新在我理解更多是一種“微創(chuàng)新”，可能會(huì)體現(xiàn)在你的每一次需求洞察中、設(shè)計(jì)方案的細(xì)節(jié)中，不要小看微創(chuàng)新，點(diǎn)滴積累之后，你會(huì)比別人更有想法和競(jìng)爭(zhēng)力。

寫(xiě)在最后：

設(shè)計(jì)師不能總是輸出，更要持續(xù)輸入才會(huì)有源源不斷的創(chuàng)造力！想要系統(tǒng)地學(xué)習(xí)專(zhuān)業(yè)知識(shí)，性?xún)r(jià)比最高、成本最低、也最靠譜的方式是系統(tǒng)性地“閱讀專(zhuān)業(yè)書(shū)”。后面我會(huì)寫(xiě)一個(gè)系列的專(zhuān)欄文章推薦“設(shè)計(jì)師必讀的專(zhuān)業(yè)書(shū)籍”。

原文地址：人人都是產(chǎn)品經(jīng)理

作者：Viksea

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)？交互設(shè)計(jì)師專(zhuān)業(yè)能力體系

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1260)

172022-6
Behance 首頁(yè)推薦的作品集為什么這么高級(jí)？為你拆解其中7個(gè)秘密

seo達(dá)人

1、錯(cuò)開(kāi)對(duì)齊

如果你對(duì)自己的排版不是太自信，又擔(dān)心排版太死板，錯(cuò)開(kāi)展示是一個(gè)很容易上手的技巧。只需要把界面稍微錯(cuò)開(kāi)一下，展示效果就會(huì)好很多。下面就是一些Behance大佬用這種手法做的展示效果，可以從背景，作品擺放比例，留白，間距和錯(cuò)開(kāi)幅度上進(jìn)行研究學(xué)習(xí)。

2、增加層次感

為了增加展示細(xì)節(jié)，豐富層次是一個(gè)非常好用的展示技巧。如果你的作品界面在視覺(jué)上比較寡淡，那么把一些界面元素提取出來(lái)，利用投影加多層次感，視覺(jué)效果上就可以很快得到提升。這個(gè)技巧在執(zhí)行上也比較簡(jiǎn)單，關(guān)鍵要注意投影的大小和顏色，千萬(wàn)別做的太重。

3、出界設(shè)計(jì)

有時(shí)候，一些界面元素確實(shí)視覺(jué)效果好的元素太少，比如很多B端表格的界面，用這種方法可以增加畫(huà)面中的圖片率，將本來(lái)隱藏在界面外的圖片進(jìn)行出界展示，更多利用圖片提升畫(huà)面的設(shè)計(jì)感。

甚至可以將banner圖中的元素進(jìn)行出界，增加設(shè)計(jì)感。

4、傾斜設(shè)計(jì)

傾斜設(shè)計(jì)，也是一個(gè)提升設(shè)計(jì)感的常用技巧。先在正視角度下擺好，利用技巧1錯(cuò)開(kāi)一下界面，然后整體旋轉(zhuǎn)一個(gè)角度就能很好的提升畫(huà)面表現(xiàn)力，增加設(shè)計(jì)感。但要注意用這個(gè)方法的時(shí)候，要保證界面元素的清晰度，不要出現(xiàn)鋸齒。

傾斜后也可以適當(dāng)增加一些圓點(diǎn)點(diǎn)綴

把一些UI 組件斜角后，結(jié)合層次感設(shè)計(jì)技巧

傾斜設(shè)計(jì)+出界+底部方塊裝飾

傾斜設(shè)計(jì)后，增加一些半透明的裝飾層次設(shè)計(jì)

5、3D厚度設(shè)計(jì)

現(xiàn)在3D設(shè)計(jì)非常流行，把自己做的界面增加一定的厚度然后結(jié)合傾斜設(shè)計(jì)，也能快速提升界面的設(shè)計(jì)感。

但因帶有傾斜，很容易出現(xiàn)鋸齒。我有一個(gè)常用的小技巧是做的時(shí)候可以把圖做大一倍，然后再縮小放到作品集中，就能提升清晰度。例如我要做一份1920×1080的PPT，那么我就會(huì)先做一個(gè)2x 尺寸，也就是3840×2160然后再縮小，會(huì)比你直接做1x尺寸的圖要清晰很多。

把界面增加3D厚度后，再稍微加一些比較輕量的3D裝飾元素，常用的有小球、方塊等3D元素能讓畫(huà)面效果更好。

6、增加底圖設(shè)計(jì)

這個(gè)技巧要注意讓界面與背景圖自然融合，關(guān)鍵在于需要找到一張非常好的圖片，考驗(yàn)選圖的能力，存在一定的風(fēng)險(xiǎn)。如果你對(duì)這種包裝方式不大放心的話(huà)，建議你謹(jǐn)慎使用。

比如這張圖，細(xì)節(jié)點(diǎn)在于界面左邊淺色配上底圖中左邊的白，右邊深色界面搭配右邊深色的山體顏色，看起來(lái)就很和諧。

下面這張圖用了一個(gè)跟界面中配圖同一個(gè)調(diào)性的圖片，為了防止干擾界面，還加了一點(diǎn)高斯模糊，效果也非常不錯(cuò)。

這張圖的底圖用了一些比較具有設(shè)計(jì)感的圖形，整體比較簡(jiǎn)潔高級(jí)

常用的一些底圖元素還有圓形，點(diǎn)等等

用一些插畫(huà)元素作為底圖也是非常不錯(cuò)的

7、套用樣機(jī)來(lái)展示

前面提到的很多實(shí)用技巧，能看到都是不需要用樣機(jī)的，我自己更傾向于不用手機(jī)模型來(lái)展示，即使要用也是比較輕量的那種。有看過(guò)不少同學(xué)的作品集，其中的樣機(jī)用的太過(guò)了，不知道的還以為你成了賣(mài)手機(jī)的作品集。這也是我放到最后一條來(lái)說(shuō)的原因，我更推薦你在不使用樣機(jī)的情況下把自己的作品展示做好。

當(dāng)然，如果用樣機(jī)也沒(méi)什么大問(wèn)題，原則還是為作品服務(wù)的，保證清晰度，不搶作品本身的視覺(jué)就OK。用上了樣機(jī)，它就成了你作品的一部分，要保證樣機(jī)是最新的，且質(zhì)量要高。

關(guān)于樣機(jī)的話(huà)，彩云之前也幫大家找了一些非常高質(zhì)量的樣機(jī)資源，需要的話(huà)可以點(diǎn)擊下面的文章看看內(nèi)容，并找到獲取方式下載使用。

《2021年全網(wǎng)最新品質(zhì)最好的樣機(jī)資源被我找到了，免費(fèi)分享給你！》

《2021年全網(wǎng)最好的樣機(jī)資源都在這里，收藏這一篇就夠了！》

原文地址：彩云譯設(shè)計(jì)（公眾號(hào)）

作者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》Behance 首頁(yè)推薦的作品集為什么這么高級(jí)？為你拆解其中7個(gè)秘密

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(940)

172022-6
無(wú)需手繪的AI矢量扁平幾何風(fēng)基礎(chǔ)插畫(huà)：《鮮果派對(duì)》海報(bào)

seo達(dá)人

工具

工具：AI(Adobe illustrator)

適合：零基礎(chǔ)入門(mén)

扁平風(fēng)的基礎(chǔ)思維準(zhǔn)備：幾何形組合造型

幾何形一直被視作是抽象造型的基礎(chǔ)元素，通過(guò)幾何形有意識(shí)的相互疊加組合，就可以使得這個(gè)造型呈現(xiàn)出可識(shí)別的對(duì)象，比如我們?cè)谶@個(gè)教程里所表現(xiàn)的那樣：用幾何形畫(huà)水果。

比起細(xì)膩豐富的傳統(tǒng)畫(huà)法，極簡(jiǎn)的幾何平涂造型所創(chuàng)作的水果，看起來(lái)有著別樣的生動(dòng)的特質(zhì)，擺脫了對(duì)水果表面質(zhì)感的依賴(lài)，轉(zhuǎn)向?qū)π紊奶剿?，是扁平插?huà)的基礎(chǔ)思維。

常用的幾何形是：圓、方、三角，在這個(gè)教程里，我們就運(yùn)用矢量軟件AI(Adobe illustrator)進(jìn)行創(chuàng)作，接下就開(kāi)始來(lái)打造我們的《鮮果派對(duì)》海報(bào)吧。

用方形塑造蘋(píng)果基礎(chǔ)形

常見(jiàn)蘋(píng)果的畫(huà)法可以是圓形起步，也可以是從方形開(kāi)始。

STEP 01

打開(kāi)AI，新建一個(gè)文檔，運(yùn)用粉色畫(huà)出一個(gè)正方形，這就是蘋(píng)果的起始形。起始形非常重要，它決定了接下這個(gè)蘋(píng)果的形狀走向。

然后，我們把這個(gè)正方形改變?yōu)樘菪危淖兊姆椒ㄓ泻芏喾N，這里我們利用變形工具，進(jìn)入【效果>變形>弧形】，在變形工具的面板里，將垂直這個(gè)滑塊調(diào)整為-15%。

STEP 02

在選中上一步所變形成為的梯形的基礎(chǔ)上，進(jìn)入到【對(duì)象>擴(kuò)展外觀】對(duì)它做一次擴(kuò)展外觀。

擴(kuò)展外觀就是讓這個(gè)形狀真正變?yōu)槭噶刻菪蔚穆窂?，如果沒(méi)有做這一步，這個(gè)形狀看似是梯形，其實(shí)還是原來(lái)正方形的矢量路徑。分辨真假梯形也很簡(jiǎn)單，只要選擇這個(gè)形狀，看到路徑的走向仍然是正方形，那就是假性梯形，這就需要為它做一次擴(kuò)展外觀。

STEP 03

然后再選中這個(gè)梯形的基礎(chǔ)上，單擊左邊的工具欄里的【直接選擇工具】，就會(huì)看到四個(gè)角內(nèi)分別帶有四個(gè)很小的圓點(diǎn)（仔細(xì)看是一個(gè)同心圓），拖動(dòng)它，你會(huì)發(fā)現(xiàn)它會(huì)控制這個(gè)角，將它從銳利的角變?yōu)閳A弧。

根據(jù)圓弧離形狀中心的距離多少，弧度也會(huì)相應(yīng)發(fā)生變化。

好了，蘋(píng)果的基礎(chǔ)形就完成啦~

細(xì)節(jié)的魔力

我們開(kāi)始為蘋(píng)果增加葉片，葉片的畫(huà)法首先也是要從基礎(chǔ)幾何形開(kāi)始慢慢演變而成。我們?cè)谌~片這個(gè)部分提供的基礎(chǔ)幾何形同樣是正方形。

STEP 04

用藍(lán)紫色畫(huà)出一個(gè)正方形，然后再?gòu)?fù)制一個(gè)正方形，將這個(gè)復(fù)制的正方形旋轉(zhuǎn)45°，變?yōu)榱庑巍Ｔ購(gòu)?fù)制第一個(gè)正方形。于是我們得到了兩個(gè)正方形和一個(gè)菱形，將它們像下圖所示拼起來(lái)。

然后再選中這個(gè)組合造型，進(jìn)入到【窗口>路徑查找器】，在路徑查找器的面板中運(yùn)用【聯(lián)集】將它們拼合成一個(gè)獨(dú)立的封閉的路徑。

STEP 05

然后再利用控制形狀角度的小圓點(diǎn)，就像STEP 03那樣分別選中下方以及左右兩邊的圓點(diǎn)，將角轉(zhuǎn)為弧形。一片葉子就這樣制作而成。

問(wèn)：感覺(jué)似乎這樣的方式比較麻煩，為什么不直接用鋼筆工具畫(huà)呢？

這也是我在這一風(fēng)格的畫(huà)法中想要重點(diǎn)強(qiáng)調(diào)的：盡量避免使用鋼筆工具，而用幾何形進(jìn)行轉(zhuǎn)化，是保持扁平風(fēng)格中幾何感和抽象感的訣竅。

因?yàn)槭謩?dòng)畫(huà)出的路徑畢竟不會(huì)特別嚴(yán)謹(jǐn)，這時(shí)就難免讓扁平風(fēng)格失去了它本身的風(fēng)格特點(diǎn)，而這時(shí)如果沒(méi)有較強(qiáng)的結(jié)構(gòu)感，整個(gè)畫(huà)面就會(huì)看起來(lái)”平淡“甚至”無(wú)趣“。

其實(shí)葉片的造型也可以探索出其他的幾何方式進(jìn)行組合構(gòu)造，本文只表現(xiàn)一種方法。其他的方法，可以留給你下去嘗試。

STEP 06

這時(shí)，把這個(gè)葉片的形狀的混合模式改為“正片疊底”，利用疊加的視覺(jué)效果增加畫(huà)面的幾何感和時(shí)尚感，這是在我們過(guò)去寫(xiě)過(guò)的文章《超級(jí)可愛(ài)！插畫(huà)萌新必學(xué)的PS極簡(jiǎn)馬克筆簡(jiǎn)筆畫(huà)：盆栽篇》以及相關(guān)系列文章也都運(yùn)用過(guò)類(lèi)似的技法。

STEP 07

最后，用線(xiàn)條增加最后的細(xì)節(jié)。這里所用的線(xiàn)條是較細(xì)的3px的黑色線(xiàn)條。這里的線(xiàn)條粗細(xì)要根據(jù)形狀本身的尺寸大小比例來(lái)確定。總之，對(duì)細(xì)節(jié)的描繪可以克制一些，不要太過(guò)復(fù)雜。

利用線(xiàn)形的組合以及形狀疊加的視覺(jué)效果，扁平風(fēng)的簡(jiǎn)約蘋(píng)果元素就畫(huà)好了。

準(zhǔn)備好元素，完成海報(bào)

STEP 08

藍(lán)莓的畫(huà)法從矩形起步，對(duì)矩形的組合以及成形的演變方法，是我們重點(diǎn)要訓(xùn)練的對(duì)象。中間的步驟我們已在文章前面詳細(xì)敘述過(guò)了，這里就不再重復(fù)?？梢岳^續(xù)用這個(gè)方法演練下去。

STEP 09

畫(huà)草莓的時(shí)候，運(yùn)用了兩個(gè)梯形進(jìn)行組合。利用葉片造型進(jìn)行疊加，也能增加圖形的魅力。

STEP 10

我們把其他的水果元素也畫(huà)好，我這里準(zhǔn)備了一些比較可愛(ài)的櫻桃、西瓜之類(lèi)，你也可以畫(huà)點(diǎn)菠蘿、芒果之類(lèi)，注意要把握每一個(gè)水果的基礎(chǔ)形特點(diǎn)，然后在細(xì)節(jié)的部分加以強(qiáng)調(diào)。

把每個(gè)水果元素放到海報(bào)的設(shè)計(jì)中時(shí)，要考慮的還有對(duì)水果元素之間的間隙的疏密均勻程度，元素可以較大，有些元素甚至可以滲出到海報(bào)之外，這樣會(huì)讓視覺(jué)效果更為延伸。

如果經(jīng)過(guò)路邊有家鮮果店，掛上這樣一張海報(bào)，應(yīng)該效果是不錯(cuò)的吧~ 先自我陶醉一波~

最后，獻(xiàn)上我的同類(lèi)作品集小站

當(dāng)然，如果你想要臨摹或者參考更多，可以通過(guò)訪(fǎng)問(wèn)下面這個(gè)網(wǎng)站，我在這里會(huì)放入更多類(lèi)似的作品，繼續(xù)保持對(duì)這類(lèi)風(fēng)格的探索。

原文地址：飛屋設(shè)計(jì)

作者：飛屋睿UIdesign

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》無(wú)需手繪的AI矢量扁平幾何風(fēng)基礎(chǔ)插畫(huà)：《鮮果派對(duì)》海報(bào)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1084)

172022-6
LOGO 設(shè)計(jì)技法（第三彈）

seo達(dá)人

1. 多層次線(xiàn)條漸變 LOGO（形狀分割）

2. 條紋隱形立體 LOGO（封套扭曲）

3. 條紋穿插 LOGO（新建畫(huà)筆工具）

4. 角度漸變穿插 LOGO（描邊角度漸變）

5. 半透明光影 LOGO（混合工具）

6. 時(shí)鐘大小漸變 LOGO（替換混合軸）

7. 不規(guī)則球形 LOGO（3D 貼圖）

8. 原研哉的LOGO（混合工具）

如果有跟我一樣不愛(ài)看文字的寶貝，可以劃到底部直接去看結(jié)尾處的視頻版本哦。話(huà)不多說(shuō)，跟著我來(lái)細(xì)細(xì)分解一番。

PS：本文所有案例均來(lái)源于網(wǎng)絡(luò)，只用作分析技法。

首先我們來(lái)分析一下這個(gè) LOGO，整體是由一些線(xiàn)條組成。長(zhǎng)短不一的線(xiàn)條，通過(guò)漸變的明暗處理形成了字母 D 的輪廓。如果是使用常規(guī)的方法，一條一條地畫(huà)完線(xiàn)條，調(diào)整長(zhǎng)短再組合在一起，那還不得加班到凌晨？學(xué)了這個(gè)方法讓你再也不用加班，來(lái)！

首先我們將繪制出 12 根線(xiàn)條，然后給圖形填充由黑到白的漸變色。

繪制出兩個(gè)長(zhǎng)方形并左對(duì)齊，然后將右邊的直角轉(zhuǎn)為大圓角，拉到底的那種。這樣就形成了字母 D 的輪廓。接下來(lái)就是將兩組圖形組合到一起了。

為了方便觀察，我們將字母 D 的輪廓暫時(shí)改為紅色。因?yàn)闈u變色是由上至下的，縱向切割線(xiàn)條不會(huì)有明暗方面的變化，我們只需要橫向切割，所以將 D 的左側(cè)豎向的線(xiàn)條刪除即可。

打開(kāi)窗口—路徑查找器，找到左下角分割的按鈕。

全選中左側(cè)的圖形，點(diǎn)擊切割按鈕，就得到了左邊的圖形。

為了方便觀察，我們可以先將左邊圖形全部改為填色模式，然后將多余的面刪除。再調(diào)整每組線(xiàn)條的漸變色條，就形成了這種層次關(guān)系。

基礎(chǔ)層次和效果出來(lái)了，接下來(lái)還有很重要的一步，需要再調(diào)整億點(diǎn)點(diǎn)細(xì)節(jié)?，F(xiàn)在上去分層太多有些碎了，而且缺少 D 字線(xiàn)左邊的豎線(xiàn)，所以可以將一些線(xiàn)條合并，剛好可以形成字母 D 的左邊的豎。右邊有兩根線(xiàn)條過(guò)長(zhǎng)，所以從間切開(kāi)增加層次。再調(diào)整一下漸變的位置，讓整體更協(xié)調(diào)。

最后，再加上簡(jiǎn)單的排版就完成啦！

首先還是分析一下這個(gè) LOGO，是由一些條紋經(jīng)過(guò)錯(cuò)位形成了立體的字母 K，仿佛隱藏在條紋下面。這樣的立體效果又該怎么做呢？其實(shí)非常簡(jiǎn)單，來(lái)！

首先繪制出由七個(gè)長(zhǎng)方形組成的條紋，注意條紋的寬度要和間距相等。

接下來(lái)就要使用要封套工具了，封套扭曲之前我們先來(lái)分析一下需要多少行數(shù)和列數(shù)。按照節(jié)點(diǎn)去劃分，最終形成 13 行和 9 列。

打開(kāi)對(duì)象-封套扭曲-用網(wǎng)格建立，填寫(xiě) 13 行 9 列，得到右邊的圖形。

先打出一個(gè) K 字母作為墊底，根據(jù) K 的結(jié)構(gòu)調(diào)整網(wǎng)格。先選中節(jié)點(diǎn)向上移動(dòng)，然后將兩側(cè)的節(jié)點(diǎn)向中間靠攏，形成突出的效果。

調(diào)整中間兩條條紋的寬度與字母 K 的中間部分對(duì)齊。

左邊的是一條垂直的筆畫(huà)所以只需要全選節(jié)點(diǎn)向上移動(dòng)就可以了，但是右邊是兩個(gè)交叉的筆畫(huà)，所以處理起來(lái)會(huì)有點(diǎn)麻煩。同樣也是先將筆畫(huà)中部分的節(jié)點(diǎn)選中向上移動(dòng)（如上圖左），然后再根據(jù) K 的結(jié)構(gòu)調(diào)整節(jié)點(diǎn)的位置。這可是個(gè)耐心活兒，需要一個(gè)個(gè)節(jié)點(diǎn)去調(diào)整。不過(guò)好在節(jié)點(diǎn)不多，整得也挺快。

最后，給圖形填充色彩加上排版就完成了。

乍一看，這麻花扭得不錯(cuò)。類(lèi)似的圖形還有咱們中國(guó)結(jié)，但是中國(guó)結(jié)是單線(xiàn)形式，繪制相對(duì)比較簡(jiǎn)單。這個(gè)是用條紋扭的，看上去更復(fù)雜一些。沒(méi)關(guān)系，其實(shí)也很簡(jiǎn)單，來(lái)！

首先我們需要新建一個(gè)畫(huà)筆圖案，繪制出兩組條紋，分別填充紅色和藍(lán)色。

打開(kāi)窗口—畫(huà)筆面板，將兩組條紋分別拖進(jìn)畫(huà)筆面板，選擇圖案畫(huà)筆，點(diǎn)擊確定后，繼續(xù)確定就完成了新建畫(huà)筆。

接下來(lái)我們把輪廓畫(huà)出來(lái)。先繪制一個(gè)正方形，然后將三個(gè)直角改成圓角，是的還是拉到底的那種。

將圖形整體壓扁一點(diǎn)，并將端點(diǎn)繼續(xù)向外延伸，注意曲線(xiàn)要做到平滑。

選擇曲線(xiàn)，點(diǎn)擊畫(huà)筆面板中剛才新建的畫(huà)筆，瞬間就可以得到右邊的圖形。

將曲線(xiàn)復(fù)制一份，點(diǎn)擊另一個(gè)新建的畫(huà)筆。把其中一個(gè)鏡像翻轉(zhuǎn)后，將兩個(gè)圖形疊壓在一起。

接下來(lái)做出穿插關(guān)系就可以了。我們先來(lái)分析應(yīng)該如何疊壓。如上圖所指的三個(gè)相交處應(yīng)該把藍(lán)色調(diào)整到上面。

最后，再調(diào)整下細(xì)節(jié)，加上排版就完成啦！

這個(gè) LOGO 的特點(diǎn)在于漸變的類(lèi)型和擴(kuò)散的角度是圓形的，AI 里面的漸變卻沒(méi)有這種類(lèi)型。但是我們仔細(xì)觀察它是有一個(gè)很清晰的切割的邊的，這樣就可以通過(guò)描邊漸變的形式去完成了。來(lái)！

我們先將圖形進(jìn)行拆解，可以分成三個(gè)不完整的圓去組成。那么我們只需要做出其中一個(gè)圓形，重復(fù)旋轉(zhuǎn) 120 度就可以得到完整的圖形了。

我們先來(lái)繪制一個(gè)圓形，選擇描邊模式。接著將圓形的描邊加粗，加粗至完全覆蓋整個(gè)圓形的面積（如上圖右）。

然后給圖形填充漸變色，漸變的模式選擇—沿描邊應(yīng)用漸變。

繪制一條直線(xiàn)，旋轉(zhuǎn) 120 度，然后將它與圓形居中對(duì)齊。直線(xiàn)作為參考線(xiàn)使用。

使用剪刀工具，將直線(xiàn)與圓形相交的點(diǎn)斷開(kāi)，并刪除一部分節(jié)點(diǎn)，得到上圖中間的圖形。然后再將右邊的點(diǎn)延伸，就得到了右邊的圖形。接下來(lái)只需要將這個(gè)圖形進(jìn)行旋轉(zhuǎn)復(fù)制就可以了。

將得到的圖形旋轉(zhuǎn) 120 度，并重復(fù)復(fù)制。注意軸心的位置，在圖形的下面并且與圖形垂直居中。

最后再加上排版就完成啦！

光影效果的 LOGO，通常是使用漸變工具來(lái)完成。今天我們來(lái)使用混合工具嘗試一下。來(lái)！

首先繪制出 40 的輪廓。先大致畫(huà)出 4 和 0 的形狀，再進(jìn)行修剪，將 0 的上面和下面的線(xiàn)條斷開(kāi)。4 的每一條線(xiàn)段也需要斷開(kāi)。

復(fù)制一份并縮小，放置在右邊，將 4 和 0 的距離分開(kāi)一些。為了方便觀察混合后的狀態(tài)，先把透明度調(diào)整至 20%。

將大 40 圖形與小 40 圖形的每一條對(duì)應(yīng)的線(xiàn)段進(jìn)行混合?；旌喜綌?shù)設(shè)置為 500。

接下來(lái)，我們?cè)賮?lái)調(diào)整下透明度和細(xì)節(jié)。為了方便觀察，我們先將兩個(gè)圖形分開(kāi)，先把后面的小 40 的透明度調(diào)至 0%，顏色改為白色。色塊疊壓較重的地方，也需要調(diào)整透明度，讓整體更通透。也可以將大 40 的線(xiàn)條顏色改為黑白漸變色，這樣光影的效果會(huì)更強(qiáng)。

最后再將兩個(gè)圖形合并到一起，加上排版就完成了！

旋轉(zhuǎn)復(fù)制的工具，大家應(yīng)該都會(huì)用了，但是像這樣的旋轉(zhuǎn)復(fù)制的同時(shí)，圖形的寬度也有規(guī)律的跟隨著旋轉(zhuǎn)變化，應(yīng)該又怎樣做呢？

首先我們依然是先將圖形拆分一下，可以把它看成是由一組等粗的直線(xiàn)旋轉(zhuǎn)環(huán)繞加一組像是樹(shù)葉般有寬度的線(xiàn)條隨著旋轉(zhuǎn)而變化的圖形組合而成。這里我們給這兩個(gè)圖形起個(gè)名字，一個(gè)是“直線(xiàn)形”一個(gè)是“葉子形”。

我們先將簡(jiǎn)單的“直線(xiàn)形”圖形做出來(lái)，先繪制一組橫豎交叉線(xiàn)條并建立為參考線(xiàn)，然后沿著參考線(xiàn)繪制一條垂直的直線(xiàn)。

以參考線(xiàn)的中心為軸心，設(shè)置旋轉(zhuǎn)角度為 15 度，進(jìn)行旋轉(zhuǎn)復(fù)制。之后重復(fù)復(fù)制（快捷鍵 CTRL+D），直至旋轉(zhuǎn)一周。這樣就完成了“直線(xiàn)形”圖形。

接下來(lái)，我們來(lái)做“葉子形”圖形。先繪制出一大一小兩條直線(xiàn)，再將直線(xiàn)從等寬改為有寬度變化的模式。

使用混合工具，將兩個(gè)線(xiàn)條進(jìn)行混合，指定步數(shù)為 22。取向要選擇右邊的那個(gè)弧形的。這樣就得到了 24 個(gè)規(guī)律變化的葉子狀的圖形。

一排葉子做出來(lái)了，怎樣把它們變成環(huán)繞形的呢，這就要用到替換混合軸了。首先繪制一個(gè)圓形，再把上面切掉一塊。

同時(shí)選中加圓形和葉子們，打開(kāi)對(duì)象-混合-替換混合軸。就得到了上圖右邊的圖形，已經(jīng)可以看出“葉子形”的樣子了，接下來(lái)還需要做一些細(xì)節(jié)的調(diào)整。

先將兩圖形的軸心與參考線(xiàn)居中對(duì)齊。再將葉子圖形調(diào)整到與直線(xiàn)垂直，只需要調(diào)整兩端的圖形，中間混合的圖形會(huì)自動(dòng)跟著變換。

現(xiàn)在“葉子形”已經(jīng)基本完成了，但是我們發(fā)現(xiàn)，使用混合工具后的圖形是中心對(duì)齊的，而不是底部對(duì)齊，所以接下來(lái)，我們需要手動(dòng)將葉子調(diào)至底部對(duì)齊。

先將圖形擴(kuò)展，然后調(diào)每個(gè)葉子移動(dòng)到與線(xiàn)條的底端對(duì)齊即可。

最后再加上排版就完啦！

常規(guī)的球形 LOGO，之前的教程已經(jīng)演示過(guò)了。那像這樣的不規(guī)則的球形 LOGO 又該怎么做呢？來(lái)！

首先還是來(lái)分析下，這個(gè)的構(gòu)成。上面和下面有兩條直線(xiàn)，中間是有很類(lèi)似 H 字母的形狀，后面也是直線(xiàn)。

按照上面分析得到的結(jié)果，我們繪制出相應(yīng)的圖形。使用長(zhǎng)方形，拼出不規(guī)則的圖形。最后再將右邊的直角改為圓角。

打開(kāi)窗口-符號(hào)。將繪制好的圖形，直接拖進(jìn)符號(hào)面板，默認(rèn)選項(xiàng)直接點(diǎn)確定就可以了。

繪制一個(gè)圓形，并刪除一半。

選擇一半的圓形，選擇效果-3D 和材質(zhì)-3D（經(jīng)典）-繞轉(zhuǎn)，就可以看到上圖的對(duì)話(huà)框了，默認(rèn)選項(xiàng)，點(diǎn)擊貼圖按鈕。

打開(kāi)貼圖的對(duì)話(huà)框，可以看到左上角有一個(gè)符號(hào)選項(xiàng)，選擇剛才新建的符號(hào)，勾選右下角三維模型不可見(jiàn)。接下來(lái)就調(diào)整中間圖形的位置，開(kāi)啟預(yù)覽后可以邊調(diào)整邊看到圖形覆蓋在球形的變化。調(diào)整至合適位置后點(diǎn)擊確定就可以了。

將得到的圖形進(jìn)行拆分，解組和釋放復(fù)合路徑后，就可以得到右邊的兩個(gè)圖形，接下為他們填充顏色。

正面的圖形填充藍(lán)綠漸變色，背面的圖形填充較深的藍(lán)色。

最后將兩個(gè)圖形再組合到一起，加上排版就完成啦。

原研哉為知美術(shù)館設(shè)計(jì)的 LOGO，由美術(shù)館的外觀瓦片提取而來(lái)，形成富有變化的水波樣。同時(shí)，色塊規(guī)律性的大小變化也組成了字母 Z 的形狀。我們來(lái)解析一下大師的 LOGO 是怎么做的？來(lái)！

首先我們來(lái)分析一下方塊的變化規(guī)律。左邊是由上至下逐漸變大，右邊是由上至下逐漸變小。中間是從中間向兩側(cè)逐漸變小，但是中心不在一條垂直線(xiàn)上。

那第一步畫(huà)出一大一小兩個(gè)方塊，然后使用混合工具，步數(shù)設(shè)置為 9。這樣我們就得到了由大到小規(guī)律變化的一組方塊。

那么怎樣得到由小到大再到小變化。很簡(jiǎn)單，將剛才得到的一組方塊，鏡像復(fù)制一份，就可以了。

得到一組圖形之后，再將它們向斜上方，連續(xù)復(fù)制就可以了。注意要將方塊錯(cuò)開(kāi)，行距也要相等。

最后再將多余的方塊，刪除掉即可。

排版再加上大師的字，瞬間就高級(jí)了起來(lái)！你學(xué)會(huì)了嗎？

有很多 AI 里面的工具，也許你認(rèn)識(shí)它，它也認(rèn)識(shí)你，但是你不知道它竟然可以干這種大事。來(lái)跟我們一起探索巧用 AI 工具做 LOGO 的更多更簡(jiǎn)單的可能性。

今天的教程就到這里了，下方視頻教程更方便哦，任何人看完不跟著做的話(huà)我都會(huì)傷心的 ooooooooooooooooooK?

文末，點(diǎn)擊原文地址，可直接觀看視頻教程或文字版本，隨你選擇；

原文地址：胡曉波工作室（公眾號(hào)）

作者：yoyo

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》LOGO 設(shè)計(jì)技法（第三彈）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1066)

172022-6
關(guān)于設(shè)計(jì)師作品集那些事2-提升篇

seo達(dá)人

1.順叔有話(huà)說(shuō)

各位廣大設(shè)計(jì)師朋友們大家好！送走2021迎來(lái)新的一年2022，我們又見(jiàn)面了，好久沒(méi)寫(xiě)設(shè)計(jì)干貨了，不知大家是否還記得當(dāng)年那個(gè)夏雨荷，啊不對(duì)～～是當(dāng)年的那個(gè)順叔，已經(jīng)有一些小伙伴留言，私信我催更了。

最近順叔正好有一些時(shí)間，可以去沉下心來(lái)寫(xiě)一篇設(shè)計(jì)干貨。我是一個(gè)比較佛性的設(shè)計(jì)師寫(xiě)設(shè)計(jì)類(lèi)文章也是同樣的佛系，了解我的人都清楚之前的文章一般時(shí)隔時(shí)間不是那么規(guī)律，原因是我希望更好的沉淀和進(jìn)行總結(jié)，才能分享出來(lái)更好的內(nèi)容給大家。也一直在構(gòu)思、內(nèi)容、框架，是否能幫助到一些人，在距之前的一篇《關(guān)于設(shè)計(jì)師簡(jiǎn)歷作品集那些事》已有兩年之久，感謝平臺(tái)，收獲了很多粉絲以及單篇17萬(wàn)的瀏覽量，同樣在之前的設(shè)計(jì)文章干貨中幫助了很多人，留言咨詢(xún)我也給予了一些指導(dǎo)，幫助很多人。有一些設(shè)計(jì)師順利進(jìn)入到心儀的公司以及大廠。從自身方面也挺開(kāi)心和成就感。在平臺(tái)下面有很多留言的朋友，其中有設(shè)計(jì)師朋友ID：木十一小透明說(shuō)，“本人以為如果有實(shí)例就更好了”的留言。這個(gè)必須有，那么今天就安排上，走起。

此篇文章受用于正迷茫，懵B，正在準(zhǔn)備作品集沖大廠的你，正好它來(lái)了！

本篇文章會(huì)是上篇文章的進(jìn)階提升2.0版本。之后也會(huì)陸續(xù)有3.0…本篇會(huì)從各個(gè)方面進(jìn)行解析，思路流程，框架，以及作品集的規(guī)范性，組成部分等方面進(jìn)行展開(kāi)說(shuō)。通過(guò)一些例子讓你更清楚如何去做自己的作品集。希望這篇文章結(jié)合上一篇作品集文章結(jié)合看療效會(huì)更加顯著。

好了廢話(huà)不多說(shuō)了開(kāi)整

2.作品集的重要性

作品集的作用不少設(shè)計(jì)師都知道它的重要性，但往往還有不少設(shè)計(jì)師不知如何進(jìn)行梳理、排序、排版，放哪些作品。作為一個(gè)設(shè)計(jì)師需要有一個(gè)作品集，作品集是對(duì)于你能力上、成長(zhǎng)、以及經(jīng)歷上的判斷，在眾多的作品集中如何能脫穎而出，這個(gè)也是需要一些技巧的。希望能通過(guò)本次文章能有所收獲。

現(xiàn)在平臺(tái)各種的作品集，各式各樣，結(jié)合現(xiàn)在設(shè)計(jì)流行趨勢(shì)是沒(méi)問(wèn)題的，但有一些“機(jī)構(gòu)”或設(shè)計(jì)師對(duì)于作品集來(lái)說(shuō)還是有一些誤解和跟風(fēng)，甚至同質(zhì)化嚴(yán)重。我的理解作品集最初是自己的作品集合到一起進(jìn)行排版做個(gè)整合。最終找工作的時(shí)候可以給面試官看的，僅此而已。但現(xiàn)在的情況有所不同，有很多已經(jīng)忽略了作品集當(dāng)中的作品能力核心質(zhì)量，而是在最終的作品集的樣式表現(xiàn)使勁，導(dǎo)致現(xiàn)在的作品集華而不實(shí)，很多設(shè)計(jì)師把作品集搞的很漂亮，但核心的能力以及作品薄弱了，忽略了作品的本質(zhì)。作品集的外表樣式來(lái)說(shuō)是提升作品的品質(zhì)感，和提升作品的可看度，是賦予作品靈魂，好的作品集不只是一個(gè)包裝而已，也是要有好的作品內(nèi)容相結(jié)合才是最終的結(jié)果。

對(duì)于作品集來(lái)說(shuō):

2-1從大廠的角度對(duì)作品集十大衡量標(biāo)準(zhǔn)

2-1-1對(duì)于設(shè)計(jì)師基礎(chǔ)判斷

一份作品集是對(duì)于設(shè)計(jì)師從審美、創(chuàng)新、沉淀總結(jié)、設(shè)計(jì)能力，思考，作為基礎(chǔ)的判斷。

作品集是一個(gè)敲門(mén)磚的說(shuō)法，設(shè)計(jì)師要作出專(zhuān)屬個(gè)性，藝術(shù)范的作品集尤為重要，內(nèi)容作為核心，包裝作為附加。

2-1-2從作品集看出是否團(tuán)隊(duì)中所需要

作品集所呈現(xiàn)的作品，作為專(zhuān)業(yè)性的面試官只要一眼掃過(guò)就知道它是不是我們團(tuán)隊(duì)要找的人，從設(shè)計(jì)調(diào)性，人員的能力模型招聘需求方面，創(chuàng)新，能力都會(huì)快速鎖定，比如團(tuán)隊(duì)中缺少插畫(huà)的設(shè)計(jì)角色，當(dāng)一個(gè)作品集中看到求職者插畫(huà)能力，色彩能力，創(chuàng)意能力很強(qiáng)，那么很容易被鎖定。或者團(tuán)隊(duì)中，品牌中調(diào)性是很年輕，潮，運(yùn)用的設(shè)計(jì)技法比較新穎，好玩。那么作品集的作品，以及作品集的包裝很符合這個(gè)公司調(diào)性，那么也很容易被鎖定。

契合度完全在一份作品集中初步判斷。

2-1-3通過(guò)作品集可以了解設(shè)計(jì)師的能力如何，哪些比較強(qiáng)項(xiàng)

同樣作品集是一個(gè)設(shè)計(jì)師的沉淀，總結(jié)，整合。一定是把最好,最優(yōu)秀的一面展示在作品集中。所以其中的設(shè)計(jì)作品，也是招聘者判斷設(shè)計(jì)能力的標(biāo)準(zhǔn)?？焖倥袛嘣O(shè)計(jì)中你的插畫(huà)能力比較強(qiáng)，還是版式，色彩，交互哪個(gè)模塊比較有優(yōu)勢(shì)。和招聘崗位職責(zé)的要求是否符合。

通過(guò)作品集就知道專(zhuān)業(yè)性的長(zhǎng)板和短板。

2-1-4設(shè)計(jì)的類(lèi)別是否完整

現(xiàn)在對(duì)于進(jìn)大廠設(shè)計(jì)考核的標(biāo)準(zhǔn)簡(jiǎn)直就像古代選宮女一樣，嚴(yán)格，全面，多才多藝，啥都會(huì)干。

設(shè)計(jì)師的評(píng)判就是設(shè)計(jì)要好，有創(chuàng)意，色彩搭配，設(shè)計(jì)思維，設(shè)計(jì)流程，項(xiàng)目落地，審美要好，各種軟件要會(huì)，甚至插畫(huà)能力，C4D，AE動(dòng)效，交互能力等等加分項(xiàng)。所以好多設(shè)計(jì)師都學(xué)雜了，沒(méi)有勇氣在學(xué)設(shè)計(jì)！無(wú)時(shí)不刻的在填充自己的能力。落后很容易被拍在沙灘上，對(duì)于招聘方看作品集的完整度就是看你在整個(gè)作品集中類(lèi)別分類(lèi)都有什么。說(shuō)白了就是你都會(huì)啥絕活。比如IP形象設(shè)計(jì)，運(yùn)營(yíng)設(shè)計(jì)，視覺(jué)設(shè)計(jì)，品牌設(shè)計(jì)，插畫(huà)，還會(huì)交互 UI界面設(shè)計(jì)。這樣設(shè)計(jì)師就比較“吃香”，可以判斷你屬于綜合性設(shè)計(jì)人才。

2-1-5設(shè)計(jì)師的設(shè)計(jì)精細(xì)化

對(duì)于設(shè)計(jì)師的精細(xì)化是從設(shè)計(jì)中看得出，細(xì)節(jié)上的處理，以及做設(shè)計(jì)的時(shí)候是否有精心化，把設(shè)計(jì)做到滿(mǎn)意及標(biāo)準(zhǔn)化。比如做設(shè)計(jì)的時(shí)候界面字體規(guī)范不對(duì)，圖標(biāo)的粗細(xì)不同，畫(huà)的插畫(huà)比較粗糙等等。都是針對(duì)于設(shè)計(jì)師精細(xì)化的一種考核。對(duì)于精細(xì)化能考核看出，設(shè)計(jì)師是否對(duì)于設(shè)計(jì)的高要求，對(duì)于細(xì)節(jié)把握的程度，對(duì)于質(zhì)的標(biāo)準(zhǔn)。很多剛進(jìn)入行業(yè)的設(shè)計(jì)師在精細(xì)化上的確缺少能力。這也是需要工作多年后逐步的習(xí)慣性才會(huì)讓自己對(duì)于作品的細(xì)節(jié)把握更好，更穩(wěn)。

精細(xì)化也是對(duì)于設(shè)計(jì)師的一個(gè)態(tài)度問(wèn)題。毛躁的設(shè)計(jì)師做的設(shè)計(jì)就傾向于粗糙，穩(wěn)一點(diǎn)的設(shè)計(jì)師對(duì)于作品就會(huì)照顧得到精細(xì)化。在設(shè)計(jì)走查的過(guò)程中知道哪些存在問(wèn)題，哪些需要更好的迭代和修改，也是考驗(yàn)設(shè)計(jì)師的自我“修養(yǎng)”

2-1-6了解設(shè)計(jì)師的設(shè)計(jì)方法及思維

在整個(gè)作品集中除了作品視覺(jué)以外，更多要看的就是設(shè)計(jì)思維，設(shè)計(jì)流程和設(shè)計(jì)推導(dǎo)，這樣才能體現(xiàn)出兩個(gè)維度.

1.你在設(shè)計(jì)的時(shí)候是動(dòng)腦了

2.這個(gè)作品是你做的

往往有一部分設(shè)計(jì)師做設(shè)計(jì)覺(jué)得最終做出效果圖就行了，但往往不是這樣的，設(shè)計(jì)師是需要思維靈活，具有天馬行空有一些創(chuàng)意創(chuàng)新思維的。所以做設(shè)計(jì)師的時(shí)候應(yīng)該有一些推導(dǎo)呈現(xiàn)在作品集中，也是很多公司在看的。不止看視覺(jué)還要看設(shè)計(jì)師是不是有思維的設(shè)計(jì)師，思維是內(nèi)核，設(shè)計(jì)作品的呈現(xiàn)，流程，方法給予的作品意義。

比如做一個(gè)IP形象，如何定義，設(shè)計(jì)策略是什么，設(shè)計(jì)目標(biāo)是什么，設(shè)計(jì)價(jià)值是什么，設(shè)計(jì)流程和設(shè)計(jì)推導(dǎo)是哪些等等這些就是設(shè)計(jì)師需要以文字或者圖片進(jìn)行闡述的，所以我們要做一個(gè)會(huì)思考的設(shè)計(jì)師。

2-1-7設(shè)計(jì)師的總結(jié)能力

設(shè)計(jì)師的總結(jié)能力是從設(shè)計(jì)方法進(jìn)行總結(jié)，另一個(gè)就是從自我出發(fā)進(jìn)行總結(jié)。往往這個(gè)環(huán)節(jié)是很直接。分析，歸納，沉淀，總結(jié)。

總結(jié)是對(duì)于自己的一個(gè)自我判斷。具有條理清晰，透徹，具體，深入，明確，邏輯性強(qiáng)一系列特點(diǎn)。很好的總結(jié)能力在總結(jié)的過(guò)程中可以發(fā)現(xiàn)問(wèn)題，解決問(wèn)題。

2-1-8是否有落地項(xiàng)目

作品集中的項(xiàng)目是否落地尤其的重要，主要考核你的經(jīng)驗(yàn)，是否能很快上手做設(shè)計(jì)工作，所以如果有真實(shí)項(xiàng)目是很重要的。其中項(xiàng)目?jī)r(jià)值，項(xiàng)目完整度，類(lèi)型，項(xiàng)目中角色，項(xiàng)目中思考，項(xiàng)目中遇到問(wèn)題如何解決問(wèn)題，項(xiàng)目中協(xié)作，溝通等等。

說(shuō)白了如果有落地項(xiàng)目來(lái)公司就直接上手干活，如果沒(méi)有落地項(xiàng)目還需要進(jìn)行前期的培養(yǎng)。時(shí)間成本，人員成本也是比較高的。如果有一個(gè)落地項(xiàng)目知道其中的過(guò)程，甚至參與過(guò)其中的環(huán)節(jié)那么在有新的項(xiàng)目也會(huì)得心應(yīng)手。特別那種在校大學(xué)生最好有實(shí)習(xí)的機(jī)會(huì)去工作，這樣為自己攢一些能力，新手設(shè)計(jì)師同樣能參與到項(xiàng)目中是對(duì)自己的一種磨練和提升。

2-1-9作品集的差異化

作品集的差異化，就是不同，獨(dú)特性，所以作品集一定要具有一定的自我風(fēng)格，杜絕模版化，如果一個(gè)設(shè)計(jì)師套用一個(gè)模版，那么這個(gè)設(shè)計(jì)師是懶呢？還是設(shè)計(jì)不行呢？對(duì)于你能力產(chǎn)生一種判斷，設(shè)計(jì)的可以作為借鑒，但切勿抄襲。作品集的差異化，有特點(diǎn)，有設(shè)計(jì)感，有層次，從感官上眼前一亮，才有機(jī)會(huì)繼續(xù)往下觀看，這個(gè)也是技巧。

2-1-10.作品集的設(shè)計(jì)表現(xiàn)力

對(duì)于作品集來(lái)說(shuō)除了內(nèi)核的內(nèi)容作品以外，外包裝就是作品集，對(duì)于作品集的表現(xiàn)力說(shuō)白了就是好看且好用。表現(xiàn)力各有所需，每個(gè)人定義的風(fēng)格來(lái)說(shuō)都具有不同，但無(wú)論選擇什么樣式，設(shè)計(jì)出的一定具有一定的藝術(shù)感和設(shè)計(jì)感，根據(jù)現(xiàn)在比較流行的一些技法結(jié)合到我們的作品集中，進(jìn)行表現(xiàn)，比如線(xiàn)性的，透視線(xiàn)，酸性，大字，重復(fù)，圖章，標(biāo)簽，等等都可以融入到設(shè)計(jì)的表現(xiàn)力中。

說(shuō)白了設(shè)計(jì)的作品集不要老氣，要新穎，獨(dú)特性，藝術(shù)感，設(shè)計(jì)感。流行的趨勢(shì)，就沒(méi)毛病。表現(xiàn)力也是通過(guò)色彩，圖形，字體，插畫(huà)等進(jìn)行的版式。具有一定的層次感。如何進(jìn)行表現(xiàn)力在后面會(huì)詳細(xì)提到，高清大圖配文字哦。耐心往下觀看！

3.從個(gè)人層面的作品集

上面說(shuō)的也很清楚，其實(shí)考核的標(biāo)準(zhǔn)也是設(shè)計(jì)師需要做到的標(biāo)準(zhǔn)。但從設(shè)計(jì)師角度來(lái)說(shuō)對(duì)應(yīng)現(xiàn)狀考核要求去做自己的作品集是一點(diǎn)問(wèn)題沒(méi)有的，對(duì)于設(shè)計(jì)師大致核心的這四點(diǎn)

3-1作品集做好看

3-2作品集要全面完整及精細(xì)化

3-3展示自己的設(shè)計(jì)能力

3-4 設(shè)計(jì)思維和流程的體現(xiàn)

其實(shí)無(wú)論是公司角度，還是個(gè)人角度核心的目的就是公司想找到合適的人，設(shè)計(jì)師想找到合適的公司。

通過(guò)作品集進(jìn)行前期的判斷，但不少面試官?gòu)淖髌芳摹昂每础焙雎阅芰ι系膶?shí)用性。導(dǎo)致工作中一步一個(gè)坎，設(shè)計(jì)師的現(xiàn)狀覺(jué)得漂亮的作品集就能找一個(gè)不錯(cuò)的工作，其實(shí)這個(gè)算是個(gè)病態(tài)。漂亮的花瓶，不實(shí)用也不易用。說(shuō)白了最終就是作品集好看+設(shè)計(jì)作品精細(xì)化+落地才是各方所需要輸出的最終目的。

也祝找工作的朋友們，幸運(yùn)！找到心儀的工作。

4.作品集的適用范圍

遇到過(guò)工作了很多年了，也攢下來(lái)了很多作品，但最終做成作品集沒(méi)有思路進(jìn)行去梳理，也不知曉有些作品該放還是該pass、梳理如何梳理、排序如何排序、設(shè)計(jì)如何設(shè)計(jì)、增加什么內(nèi)容。

也有遇到過(guò)視覺(jué)傳達(dá)專(zhuān)業(yè)的學(xué)生。干脆不知什么是作品集，自然更不知作品集如何做，也沒(méi)有什么作品，等等。所以讓大家清楚如何做成屬于自己的作品集

5.設(shè)計(jì)作品集的八大流程

5-1 作品集框架-框架要好思路清晰

作品集框架好比一個(gè)腦圖規(guī)劃，會(huì)更直接更清晰可見(jiàn)，可以在Xmiand軟件中實(shí)現(xiàn)，比如信息的層級(jí)，頁(yè)數(shù)，結(jié)構(gòu)，排序，都會(huì)有序規(guī)劃。脈路清晰，結(jié)構(gòu)清晰在后期設(shè)計(jì)作品集的時(shí)候會(huì)更加快捷。

比如首頁(yè)-個(gè)人簡(jiǎn)歷-目錄-設(shè)計(jì)作品排序，然后首頁(yè)放什么內(nèi)容，目錄放什么內(nèi)容，更好的對(duì)作品集層級(jí)規(guī)劃。

5-2 作品集設(shè)計(jì)作品的分類(lèi)-類(lèi)別歸檔有序查找

如果多年的設(shè)計(jì)師會(huì)有很多的作品，比如banner，UI界面，B端的設(shè)計(jì)，海報(bào)設(shè)計(jì)，插畫(huà) ….很多，這個(gè)時(shí)候就要有分類(lèi)，有歸類(lèi)，在挑選作品的時(shí)候一定把最好的挑選出來(lái)，不好的千萬(wàn)不要放，不要為了量，要質(zhì)！這個(gè)環(huán)節(jié)我一般會(huì)建一些文件夾，分好類(lèi)，比如banner，海報(bào)，字體，項(xiàng)目界面，插畫(huà)、然后把挑選的類(lèi)別作品放入到文件夾中，在作品集排版的時(shí)候方便查找和使用，至少不亂！

5-3 作品集的風(fēng)格定義-風(fēng)格調(diào)性決定氣質(zhì)

風(fēng)格調(diào)性決定氣質(zhì)，就好比一個(gè)人的穿著，給人感官是可愛(ài)的，還是酷酷的！

作品集同樣風(fēng)格定義決定了氣質(zhì)，比如想要酷酷的感覺(jué)，還是可愛(ài)風(fēng)格，還是國(guó)潮 …

在設(shè)計(jì)運(yùn)用和表現(xiàn)中元素、色彩、板式、字體都會(huì)有不同表現(xiàn)

5-4 作品集色彩的定義-色彩覺(jué)得了作品集的風(fēng)格

色彩的定義和風(fēng)格定義是具有關(guān)聯(lián)性的，比如想要做一個(gè)潮酷的風(fēng)格那么對(duì)應(yīng)的色彩在運(yùn)用中一定是黑色，白色，或者灰色為主，搭配一些輔助的藍(lán)，紅，黃，等顏色

如果調(diào)性上選擇可愛(ài)風(fēng)格的，那么選擇的主要顏色一定是飽和度偏高一點(diǎn)的紅黃藍(lán)綠等顏色、通過(guò)對(duì)比色、鄰近色進(jìn)行設(shè)計(jì)，顏色決定了作品集的氣質(zhì)。

5-4-1 推薦幾款不錯(cuò)的配色

5-4-2 推薦幾款不錯(cuò)的漸變色

5-5 作品集的元素/圖形/版式收集

這個(gè)環(huán)節(jié)基本就是為自己增加一些靈感元素，設(shè)計(jì)本身就不是閉門(mén)造車(chē)，多看看表現(xiàn)形式，排版，字體的應(yīng)用，色彩的應(yīng)用，元素表現(xiàn)等等。把好的元素，設(shè)計(jì)收集到靈感庫(kù)中，最終在設(shè)計(jì)的時(shí)候結(jié)合自己的想法進(jìn)行設(shè)計(jì)，也就是我們所謂的借鑒。

5-6 作品集設(shè)計(jì)

在設(shè)計(jì)的時(shí)候一般情況下我都會(huì)使用PS、AI、SK進(jìn)行設(shè)計(jì)。

尺寸：1920*1080.16:9. PPI72

顏色模式：RGB

PPI：72PX

舉例在AI中我會(huì)建立一個(gè)1920*8640（可放8個(gè)1920*1080）的畫(huà)板命名為畫(huà)板1，然后復(fù)制出一個(gè)畫(huà)板2，畫(huà)板3 或者更多，根據(jù)自己的版面多少就建立多少畫(huà)板。

這個(gè)時(shí)候就可以在空白的畫(huà)板進(jìn)行設(shè)計(jì)。在設(shè)計(jì)的過(guò)程中首先不要考慮太多細(xì)節(jié)，先給一個(gè)定義好的顏色，然后把元素，文字（先不考慮什么字體）先擺上。

然后整體完事在進(jìn)行細(xì)節(jié)調(diào)整，字體的大小、色彩的對(duì)比、元素的擺放位置。

先做加法，后做減法。

首頁(yè)干凈、簡(jiǎn)約、核心的元素，文字凸顯出來(lái)即可。

一般設(shè)計(jì)完通過(guò)AI 導(dǎo)出PDF格式

5-7 作品集導(dǎo)出PDF

設(shè)計(jì)完畢，需要導(dǎo)出PDF的，切記?。?！不要弄PNG/JPG的長(zhǎng)圖。

怎么導(dǎo)出來(lái)PDF就不詳細(xì)說(shuō)了，如果PDF都不會(huì)還做什么設(shè)計(jì)師！還做什么作品集！

最后說(shuō)一個(gè)導(dǎo)出小技巧：AI導(dǎo)出PDF的時(shí)候在預(yù)設(shè)選項(xiàng)中選擇，“高質(zhì)量打印”不要問(wèn)我為什么這樣選，信我就對(duì)了！

5-8 PDF進(jìn)行壓縮

正常情況下導(dǎo)出作品集PDF都會(huì)很大，一般招聘網(wǎng)站上傳限制30MB，如弄了一個(gè)500MB的傳不上去尷尬不尷尬，如果給面試官或者HR下載龜速很慢也很尷尬，講話(huà)了誰(shuí)的時(shí)間都是寶貴的，下載這作品集就花了五分鐘，看你作品集的概率就減小了。很多壓縮的平臺(tái)，自己動(dòng)動(dòng)小手找一找！實(shí)在找不到問(wèn)我?。?！

6.作品集的六大組成部分

了解作品集組成部分在作品集布局時(shí)有效排序并設(shè)計(jì)，給作品集設(shè)計(jì)提供了快速有效的設(shè)計(jì)流程。

6-1首頁(yè)（封面）

封面是必不可少的，封面主導(dǎo)著整個(gè)作品集的規(guī)范，調(diào)性。同樣把圖形信息和文字信息匯總在一個(gè)版面中，更好更快傳達(dá)出信息，封面代表的個(gè)人展示的作品集的樣式，很直接，好看，潮酷或者創(chuàng)意都會(huì)具有抓住瀏覽者或者招聘者的眼球，所以第一封面在設(shè)計(jì)的過(guò)程中一定從色彩，創(chuàng)意，圖形，版式吸引才有更多機(jī)會(huì)和欲望往下觀看。

先吸引，后詳細(xì)查看，一般招聘者或HR在篩選作品集的時(shí)候短短幾秒，怎么能在短短幾秒中脫穎而出繼續(xù)了解你，封面起到了很大作用。

在封面需要展示的內(nèi)容：

6-1-1 作品集標(biāo)題

6-1-2名字/藝名

6-1-3標(biāo)簽

6-1-4年份

6-1-5英文

6-1-6元素

6-1-7圖形

例圖

下面作品集是我的學(xué)生栗子的作品集，過(guò)程中由我進(jìn)行的指導(dǎo)。經(jīng)學(xué)生的同意，拿栗子的

作品集給大家進(jìn)行講解。感謝設(shè)計(jì)師栗子 站酷ID：栗子Ocean

第一步

首先在做作品集封面的時(shí)候把需要展示的文字，圖形，顏色先擺放上，然后在進(jìn)行調(diào)整設(shè)計(jì)。初步的擺放略顯粗糙，層級(jí)變化不夠明顯，所以可以通過(guò)比較流行的線(xiàn)條，透視線(xiàn)，等作為背景，讓背景充實(shí)起來(lái)。

第二步

定義風(fēng)格，上面提及過(guò)，風(fēng)格的定義主導(dǎo)了整個(gè)的調(diào)性，前期考慮到潮酷，年輕化的設(shè)計(jì)，沒(méi)有運(yùn)用太復(fù)雜以及漸變的背景，干凈簡(jiǎn)約，背景主要的功能就是襯托前面圖形和文字信息，背景和前面信息具有層次感更突出。這個(gè)時(shí)候嘗試用線(xiàn)條進(jìn)行信息分割，線(xiàn)分割也要考慮布局這個(gè)作品集首頁(yè)運(yùn)用的左右布局，左邊運(yùn)用了AI工具欄的樣式，右邊線(xiàn)分割。具有了一定的設(shè)計(jì)感把一些文案進(jìn)行區(qū)分文案信息要有文字的主次分明，在封面，作品集三個(gè)字是需要明顯的明顯設(shè)計(jì)角度出發(fā)點(diǎn)是要么大，要么顏色有變化，標(biāo)題，副標(biāo)題，以及內(nèi)容在標(biāo)準(zhǔn)化設(shè)計(jì)中要有一個(gè)定義。

風(fēng)格定義：潮酷

顏色定義：黑/白/綠

圖形元素：黑白插畫(huà)

裝飾元素：幾何形

字體：中文，英文

第三步

文案擺放入到布局的網(wǎng)格中，在字體中要有大小，顏色，粗細(xì)，中英文的變化，以及圖形結(jié)合文字/英文布局，從文字中定義主要信息層級(jí)，次要信息層級(jí)，以塊狀有序的進(jìn)行排版。剛設(shè)計(jì)的時(shí)候不需要考慮顏色，都用一個(gè)顏色，或者白灰就行，一旦都擺放完畢，在根據(jù)情況給予顏色，比如整個(gè)畫(huà)面有黑，有灰，在來(lái)一個(gè)綠色，會(huì)更讓整個(gè)畫(huà)面更加的提氣具有變化感英文+圖形結(jié)合最終放在頂端底部運(yùn)用，整個(gè)界面設(shè)計(jì)豐富了很多。

第四步

文字，色彩，版式也差不多了那么還缺少一個(gè)圖形主角，圖形構(gòu)圖，酷酷的雷電，時(shí)光機(jī)宇航員，以及小怪物，以黑白色調(diào)主調(diào)。和整體作品集風(fēng)格契合度加強(qiáng)。視覺(jué)點(diǎn)具有一定爆發(fā)視覺(jué)沖擊點(diǎn)。文字信息和圖形信息結(jié)合傳達(dá)表現(xiàn)設(shè)計(jì)意義。

第五步

最終到這一步基本接近首頁(yè)設(shè)計(jì)尾聲，進(jìn)行精細(xì)化設(shè)計(jì)處理，以及設(shè)計(jì)走查，在做加法同時(shí)在做減法，把多余改去掉的去掉，增加的增加，整個(gè)過(guò)程中還缺少一些輔助圖形可以添加運(yùn)用輔助圖形，以及比較酷酷的，復(fù)古一點(diǎn)的設(shè)計(jì)元素，增強(qiáng)設(shè)計(jì)感和視覺(jué)感讓畫(huà)面更飽滿(mǎn)。信息層級(jí)更清晰

總結(jié)

運(yùn)用了幾個(gè)步驟大致講了一下在作品集封面時(shí)候的步驟和思路。設(shè)計(jì)不可直接復(fù)制，但可給予一些靈感。通過(guò)這個(gè)步驟和思路清晰情況下在進(jìn)行設(shè)計(jì)就輕松的多了。設(shè)計(jì)表現(xiàn)形式不止于此。還有更多表現(xiàn)形式。通過(guò)創(chuàng)意發(fā)揮出設(shè)計(jì)的本質(zhì)。希望通過(guò)這個(gè)小例子給大家一些方向和靈感思路

6-2.個(gè)人介紹

此頁(yè)的重要性就不言而喻了，可以說(shuō)那是相當(dāng)?shù)闹匾?！從作品集了解你的設(shè)計(jì)能力，那么從個(gè)人介紹中了解你的個(gè)人信息，教育背景，獲獎(jiǎng)背景，項(xiàng)目背景，以至于你的聯(lián)系方式，有很多同學(xué)在個(gè)人介紹中忘記留聯(lián)系方式，導(dǎo)致尷尬到面試官聯(lián)系不到你！個(gè)人信息中，有項(xiàng)目一定要把項(xiàng)目寫(xiě)明，并且在項(xiàng)目中擔(dān)任的角色，做了哪些工作?？梢院?jiǎn)單描述，但必須要清晰。還有就是在個(gè)人介紹中個(gè)人照片一定要有藝術(shù)感點(diǎn)，別弄一個(gè)隨便的自拍照放上去，要有點(diǎn)質(zhì)量，千萬(wàn)別整個(gè)西裝革履打個(gè)領(lǐng)帶，那你可能整錯(cuò)了，要做銷(xiāo)售那照片沒(méi)問(wèn)題。

信息層級(jí)：

6-2-1.名字，

6-2-2.教育背景

6-2-3.電話(huà)/郵箱/微信

6-2-4 .二維碼

6-2-5.個(gè)人照片

6-2-6.標(biāo)簽

6-2-7獲獎(jiǎng)/參賽

6-2-8.項(xiàng)目

個(gè)人信息頁(yè)從設(shè)計(jì)表現(xiàn)上延續(xù)了首頁(yè)風(fēng)格調(diào)性。增加信息層級(jí)內(nèi)容，在設(shè)計(jì)表現(xiàn)中線(xiàn)框?yàn)g覽器樣式，以及英文線(xiàn)重復(fù)設(shè)計(jì)，并在整個(gè)設(shè)計(jì)中增加標(biāo)簽以及透明塑料布作為視覺(jué)輔助效果，并在下面破損的紙樣式作為設(shè)計(jì)層級(jí)變化。讓視覺(jué)呼應(yīng)切變化。增加了更大視覺(jué)感。通過(guò)復(fù)古的一些元素視覺(jué)效果順延。

6-3.個(gè)人目錄

個(gè)人目錄要寫(xiě)清楚列表，這樣也會(huì)更清晰讓瀏覽者和面試官更好的找到要看的內(nèi)容，引導(dǎo)面試官清晰信息類(lèi)別層次！比如：運(yùn)營(yíng)設(shè)計(jì) 品牌設(shè)計(jì) 項(xiàng)目設(shè)計(jì) 插畫(huà) C4D等。什么樣的設(shè)計(jì)師針對(duì)性的進(jìn)行排序和分類(lèi)，根據(jù)自己情況進(jìn)行類(lèi)別分類(lèi)！

目錄分類(lèi)條

6-4.設(shè)計(jì)作品排序

設(shè)計(jì)作品的排序其實(shí)也是有一些技巧的，要找運(yùn)營(yíng)視覺(jué)設(shè)計(jì)師，那么就需要優(yōu)先放視覺(jué)的內(nèi)容。要找UI設(shè)計(jì)就優(yōu)先于項(xiàng)目部分！

運(yùn)營(yíng)視覺(jué)設(shè)計(jì)師：比如海報(bào)，banner，主KV，插畫(huà)，H5，IP吉祥物，C4D。

品牌設(shè)計(jì)師：主KV，包裝設(shè)計(jì)，VI，海報(bào)，字體設(shè)計(jì)，圖形設(shè)計(jì)，IP吉祥物等

UI設(shè)計(jì)：banner，海報(bào)，插畫(huà)，H5，交互設(shè)計(jì)，B端，C端。

電商設(shè)計(jì)師： banner，網(wǎng)頁(yè)設(shè)計(jì)，H5，專(zhuān)題頁(yè)，詳情頁(yè)，插畫(huà)，C4D

當(dāng)然了，如果沒(méi)有定義是什么設(shè)計(jì)師，還能做視覺(jué)還能做品牌，還能做UI部分的工作，那么從作品中挑選出不錯(cuò)的放在作品集中，同樣也要考慮到優(yōu)先排序問(wèn)題。

6-5.樣機(jī)展示

樣機(jī)是什么？在作品集中是為設(shè)計(jì)提升B格、提升設(shè)計(jì)感的、作為輔助、提案所應(yīng)用。

如果沒(méi)有樣機(jī)作為設(shè)計(jì)顯得單調(diào)，如果有樣機(jī)是讓作品更有品質(zhì)。但我發(fā)現(xiàn)部分設(shè)計(jì)師為了樣機(jī)而樣機(jī)，甚至用的樣機(jī)不恰當(dāng)和設(shè)計(jì)內(nèi)容完全不匹配，為了好看確沒(méi)有實(shí)際意義。頻繁用樣機(jī)也不好，樣機(jī)老氣也不好。所以樣機(jī)除了體現(xiàn)設(shè)計(jì)的品質(zhì)，合適最重要。我發(fā)現(xiàn)作為學(xué)生做的樣機(jī)很喜歡都放在整合一頁(yè)展示，本身就是提升設(shè)計(jì)感，放大設(shè)計(jì)放在一頁(yè)顯得單調(diào)，還不如不放。所以作品集一定要單頁(yè)去排序擺放。會(huì)讓設(shè)計(jì)更具有品質(zhì)感

錯(cuò)誤的樣機(jī)應(yīng)用排版

正確的樣機(jī)應(yīng)用排版

6-6.總結(jié)

在最后一頁(yè)的時(shí)候最好寫(xiě)一些總結(jié)性話(huà)術(shù)，可以從你的長(zhǎng)板，短板進(jìn)行說(shuō)，千萬(wàn)不要說(shuō)客套話(huà)，也不要從網(wǎng)絡(luò)摘抄。要客觀的對(duì)于自己的評(píng)價(jià)和總結(jié)。讓面試官更清晰更快的認(rèn)識(shí)你。

7.常見(jiàn)作品集形式

在這幾種形式PDF是最常見(jiàn)的了，而且也是最經(jīng)濟(jì)，方便，直接的，但要注意的就是大小上要注意，最好30MB-50MB最佳的。長(zhǎng)圖來(lái)說(shuō)不太建議，不要問(wèn)為什么，你懂得！第三方設(shè)計(jì)平臺(tái)比如站酷，UI中國(guó)，等設(shè)計(jì)平臺(tái)。但這個(gè)在觀看的時(shí)候體驗(yàn)感一般！最后一個(gè)就是官網(wǎng)，個(gè)人官網(wǎng)到不錯(cuò)，但需要設(shè)計(jì)，程序，域名空間，繁瑣了點(diǎn)，在整個(gè)形勢(shì)中，PDF是比較直接的也是大家接受度比較多的。無(wú)論什么樣的形式，根據(jù)自己情況而去決定。但大家都在用也有一定道理。

8.作品集的加分項(xiàng)是哪些

8-1.C4D在作品集中的體現(xiàn)絕對(duì)的具有一定的加分，無(wú)論是運(yùn)營(yíng)，品牌還是電商甚至UI都需要有C4D的呈現(xiàn)，品牌中IP吉祥物3D樣式，電商中詳情頁(yè)，banner應(yīng)用3D樣式，運(yùn)營(yíng)設(shè)計(jì)中海報(bào)，視覺(jué)運(yùn)用C4D，C4D的表現(xiàn)也無(wú)處不在。也備受設(shè)計(jì)師以及現(xiàn)在審美需求所需要。

8-2.插畫(huà)最為近幾年的在設(shè)計(jì)中表現(xiàn)形式，講究情感化設(shè)計(jì)，通過(guò)內(nèi)容進(jìn)行圖形，插畫(huà)表現(xiàn)，更好的讓用戶(hù)所接受，同樣插畫(huà)在品牌設(shè)計(jì)，包裝，UI，運(yùn)營(yíng)備受關(guān)注和應(yīng)用，如果有插畫(huà)能力那么在作品集設(shè)計(jì)作品中進(jìn)行結(jié)合具有一定的加分項(xiàng)。

8-3.包裝樣機(jī)，必不可少，也是作品集的加分項(xiàng)，但不要亂用和頻用，恰當(dāng)適合為佳。

8-4.設(shè)計(jì)的作品越多越好，但一定要好的作品放進(jìn)作品集，作品集一定是把最好的東西，最能代表設(shè)計(jì)能力的作品展示出來(lái)。不要糾結(jié)于放哪幾個(gè)或者都要放。

8-5.設(shè)計(jì)一定具有一定的規(guī)則，創(chuàng)意。比如banner，為什么要用這樣的創(chuàng)意，為什么要用這樣的字體，為什么要用這樣的顏色，都是有一定的技法和思維推導(dǎo)的，描述清楚。作一個(gè)思考的設(shè)計(jì)，而不是做一個(gè)素材的搬運(yùn)工！

8-6.解決問(wèn)題是考核設(shè)計(jì)師解決事情能力，在項(xiàng)目中，甚至在設(shè)計(jì)中一定會(huì)遇到很多問(wèn)題，比如溝通問(wèn)題，協(xié)作問(wèn)題，設(shè)計(jì)問(wèn)題，在設(shè)計(jì)中遇到的問(wèn)題是什么如何解決的。說(shuō)明也考驗(yàn)了設(shè)計(jì)師的總結(jié)能力，做事態(tài)度和做事解決能力！設(shè)計(jì)師的工作也是為產(chǎn)品，視覺(jué)，營(yíng)銷(xiāo)解決交互，體驗(yàn)，視覺(jué)的事情。所以如何解決也是看待你在工作中是否能把事情更好解決，也就是我們所謂的沉淀經(jīng)驗(yàn)。

9.作品集的設(shè)計(jì)表現(xiàn)

篇幅原因就介紹這些吧，還有比如用一些酸性的設(shè)計(jì)，線(xiàn)性的設(shè)計(jì)。等等，就不一一舉例了大家也可以在設(shè)計(jì)過(guò)程中發(fā)現(xiàn)美。如果有什么疑問(wèn)和不了解的也可以隨時(shí)問(wèn)我。以上的干貨希望大家慢慢吸收。篇幅有點(diǎn)過(guò)長(zhǎng)。

10.作品集的壓縮好物

PDF壓縮好物，主要免費(fèi)，在線(xiàn)的?？ň褪且活D壓！好不好不要問(wèn)，自己體驗(yàn)才是真舒服了留言說(shuō)一聲！

11.招聘職責(zé)參考物

下面在網(wǎng)絡(luò)上找了幾個(gè)互聯(lián)網(wǎng)公司的招聘信息，為什么要放這個(gè)，而且還是已經(jīng)過(guò)去的事，目的是讓大家心里有個(gè)數(shù)，看看現(xiàn)在招聘對(duì)于設(shè)計(jì)師的職責(zé)，要求能力都需要會(huì)啥，啥行自己對(duì)照一下，哪塊不行補(bǔ)哪里，而且根據(jù)職責(zé)要求，工作內(nèi)容進(jìn)行作品集的設(shè)計(jì)以及排序。要有針對(duì)性的準(zhǔn)備，不能盲目、迷失、要有個(gè)方向感！

12.你敢問(wèn)！我敢答！

下面在網(wǎng)絡(luò)上找了幾個(gè)互聯(lián)網(wǎng)公司的招聘信息，為什么要放這個(gè)，而且還是已經(jīng)過(guò)去的事，目的是讓大家心里有個(gè)數(shù)，看看現(xiàn)在招聘對(duì)于設(shè)計(jì)師的職責(zé)，要求能力都需要會(huì)啥，啥行自己對(duì)照一下，哪塊不行補(bǔ)哪里，而且根據(jù)職責(zé)要求，工作內(nèi)容進(jìn)行作品集的設(shè)計(jì)以及排序。要有針對(duì)性的準(zhǔn)備，不能盲目、迷失、要有個(gè)方向感！

順叔最后想說(shuō)

這篇文章準(zhǔn)備了很久，文字，以及配圖都是很精心的準(zhǔn)備，希望能通過(guò)我的經(jīng)驗(yàn)分享大家能受益，這些年一直輸出些設(shè)計(jì)文章，對(duì)于每一篇文章我都是很精心的去設(shè)計(jì)以及寫(xiě)內(nèi)容。寫(xiě)這篇也是經(jīng)過(guò)了幾個(gè)凌晨。很用心在寫(xiě)。當(dāng)有人給我留言，通過(guò)文章有一些靈感，找到了不錯(cuò)的工作，幫助到了他，對(duì)于我自身來(lái)說(shuō)還是很開(kāi)心的，具有成就感。賺到的就要給人，學(xué)到的就要教人，我雖然比較佛性，文章一年可能就一篇，但每一篇我都認(rèn)真的對(duì)待。上一篇作品集文章達(dá)到了17W瀏覽量很欣慰，這篇是基于上一篇做的提升版，其中有很多技巧個(gè)人覺(jué)得還是比較有用。給正在迷茫，不知所措準(zhǔn)備作品集的你一些靈感和思維，如果覺(jué)得不錯(cuò)的話(huà) 希望多給順叔一些支持和點(diǎn)贊也不枉我認(rèn)真熬夜的去寫(xiě)這篇設(shè)計(jì)干貨！好了話(huà)不多說(shuō)，希望能幫助到你！你的支持是我的動(dòng)力。不斷的有設(shè)計(jì)作品和設(shè)計(jì)干貨。我們都是在設(shè)計(jì)路上的陪伴者！！

原文鏈接：zcool

作者：張?jiān)鲰?

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》關(guān)于設(shè)計(jì)師作品集那些事2-提升篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1185)