亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

設(shè)計背景

設(shè)計之前，對現(xiàn)有問題進行梳理，主要為以下幾點問題：

1.插畫風(fēng)格不統(tǒng)一

插畫風(fēng)格的一致性利于建立產(chǎn)品調(diào)性，強化品牌形象。但目前插畫風(fēng)格不統(tǒng)一導(dǎo)致視覺感官體驗差。

2.缺乏與用戶的情感映射

好的插圖能使用戶更喚起用戶的共情能力，拉近與用戶的距離從而輔助業(yè)務(wù)目標(biāo)達成。

3.插畫產(chǎn)出復(fù)用率低

不同設(shè)計師工作協(xié)同中，資歷與對風(fēng)格的把握不同，對于經(jīng)常使用的風(fēng)格難復(fù)現(xiàn)和統(tǒng)一，對于重復(fù)性設(shè)計無疑是增加設(shè)計資源，影響產(chǎn)出效率。

設(shè)計方法

為了滿足業(yè)務(wù)需求并且便于不同設(shè)計師理解與使用，對所有業(yè)務(wù)場景前期的分析，歸納整理必不可少。歸納場景共性，適當(dāng)保留其個性部分。

最終發(fā)現(xiàn)：將畫面以組件化的形式分層進行梳理，聚集成庫，不僅利于各部門設(shè)計師使用，還能增強場景延用的高效性，從而達成品牌一致的訴求。

組件化「場景分層法」

場景的分解與重構(gòu)，是我們整個組件化的特點之一。

我們解構(gòu)了現(xiàn)有的視覺元素，找尋其規(guī)律，并對平面空間進行劃分，確定它們的比例和形態(tài)，以達到即具備個性化的設(shè)計特征，又滿足多元化設(shè)計的目標(biāo)，更具包容性。

具體來說，我們將場景有效拆分為了：主體層、輔助層、背景層。

主體層：場景核心，描述主體信息傳遞的內(nèi)容

輔助層：輔助主體層，烘托整體氛圍

背景層：用于交待場景的時間、地點、天氣等外界因素

插畫風(fēng)格

由此，我們明確了這次插畫設(shè)計的目標(biāo)：制定具有親和力、適應(yīng)性、統(tǒng)一性、高效性的插畫體系。以上四點也是貫穿于整個插畫體系的調(diào)性基因，作為插畫后續(xù)設(shè)計產(chǎn)出的方向。

草圖設(shè)計

前期結(jié)合實際應(yīng)用場景，我們對于現(xiàn)階段符合設(shè)計趨勢的插畫做了大量分析，其共同點有：

線面結(jié)合

• 幾何形態(tài)

• 去復(fù)雜化

經(jīng)過多輪方案的嘗試后，最終我們挑選了2套具有代表性的方案進行抉擇：

提案A：幾何形態(tài)的設(shè)計風(fēng)格，飽滿而舒緩的曲線，更具親和力。

提案B：寫實的設(shè)計風(fēng)格，彰顯健康積極的情緒。

這個過程中我們是怎么考量的呢？這里簡述一下：

可以看出，提案B稿的形象輪廓刻畫曲線感較強，細節(jié)刻畫偏向?qū)憣?，它雖可以傳遞給人一種強健積極的精神面貌，但在實際的擴展中，這種風(fēng)格并不能適應(yīng)各個年齡段的人物繪制，比如健美感的形體刻畫方式并不適應(yīng)于大眾對中老年人、兒童的形象認知。

因此，提案B不具備適應(yīng)性，還要避免過于激進的形象感知會與用戶的距離拉的太遠而失去了共情的意義。

將提案B放在具體的業(yè)務(wù)場景中對比實驗，發(fā)現(xiàn)過多的形體修飾與刻畫則容易模糊肢體動作對于表意的直觀性。

相比之下，提案A用簡潔大塊面的幾何圖形，不同形體姿態(tài)的刻畫與信息的直觀表達；飽滿而舒緩的曲線，使人物形象更具親和力和寬容度。

插畫本身就是一個比較主觀感受的存在，制定一個符合自身產(chǎn)品特色的設(shè)計風(fēng)格無疑是一個很大的挑戰(zhàn)。

在滿足插畫設(shè)計目標(biāo)的基礎(chǔ)上，結(jié)合我們的多業(yè)務(wù)場景需要、頁面不同模塊展示需求、設(shè)計師創(chuàng)作投入成本，可視化信息表意的直觀性考慮等，我們一致認為提案A的風(fēng)格更具有適用性與延展性。

表現(xiàn)手法·線面結(jié)合貝塞爾線面風(fēng)

繪制上采用貝塞爾曲線的形式，進行扁平化的插畫視覺呈現(xiàn)，將復(fù)雜關(guān)系簡約化，同時根據(jù)場景大小增加線條，豐富畫面。

這也利于不同設(shè)計師的設(shè)計拿捏，具備可塑性與延展性，又避免輸出的不可控性。

色彩配色規(guī)范

插畫在界面中的色彩使用規(guī)則沿用UI界面中的品牌色彩定義（詳情可查看我們公眾號之前分享的文章“Zelda Design System色彩研究運用”中對插畫配色的定義），以便于設(shè)計師在一定的規(guī)則范圍內(nèi)，滿足更多場景的個性化設(shè)計。

色彩運用

畫面色調(diào)比重以藍調(diào)為主，為了保證畫面配色協(xié)調(diào)，主次關(guān)系清晰，用戶第一視覺焦點落在主體層上，滿足前面“場景分層法”提到的各層所帶有的屬性。我們根據(jù)品牌標(biāo)準配色，主體層制定了 “第三列（行）顏色互斥原則” 和 “配色百分比原則”。

第三列（行）顏色互斥：

即品牌主色只選其一，高純度顏色對比使畫面對比強烈宣兵奪主，輔助色可選擇降級處理。

配色百分比：

即顏色按一定比例出現(xiàn)，平衡中和畫面色彩，豐富畫面層次。

以主體層的使用為例：

有彩色部分運用品牌藍色作為畫面色彩基調(diào)，輔助色避免畫面對比強烈，選擇明度提高一層。同時使用無彩色配色中和畫面，達到統(tǒng)一平衡。

輔助層與背景層則在滿足配色百分比的原則至下，可根據(jù)具體畫面需要運用高明度配色原則，襯托主體層，豐富畫面層次。

其中對于配色百分比原則的使用，保持了對于畫面氛圍渲染的可擴展性，可以根據(jù)色彩6:2:2原則自行搭配來滿足其他場景類別的插圖繪制。

插畫構(gòu)成

有規(guī)律有原則的構(gòu)成條件利于插畫體系的傳播與使用。

我們意識到，把控好基礎(chǔ)形的提煉與適應(yīng)性設(shè)計，可以更好的保證插畫在規(guī)范化設(shè)計的基礎(chǔ)上具備可塑性與延展性，又避免設(shè)計輸出的不可控性導(dǎo)致的不統(tǒng)一，那么在一些場景和元素的設(shè)計上是如何進行設(shè)計定義的呢？

場景構(gòu)成解析

• 線條

小線條，大作用。

線條具有引導(dǎo)與分割作用，我們順應(yīng)線條具有指向性這一特點，將其運用在人物關(guān)鍵的動態(tài)結(jié)構(gòu)，元素結(jié)構(gòu)等交待之中，合理的運用使畫面更具特點與美的感受。相比較面積等其他塑造，線條更輕量，更易于掌控與拓展。

• 景別

為了恰到好處的表現(xiàn)畫面，依據(jù)景別與近繁遠簡的原理，對畫面元素進行簡化，避免畫面累贅無規(guī)則可循，提高插畫場景適應(yīng)性。

如五官：

以及其它元素：

• 透視

采取去三維透視的水平視角方式，簡化視圖結(jié)構(gòu)，最大程度提高插畫效能，提高效率。

• 投影

投影利于塑造元素立體感，適當(dāng)?shù)耐队澳茉黾赢嬅尕S富程度。

• 材質(zhì)質(zhì)感

基礎(chǔ)插畫默認扁平幾何化質(zhì)感，為了提高插畫的可在創(chuàng)造性，避免局限。設(shè)計者可對基礎(chǔ)插畫進行質(zhì)感上的再創(chuàng)造。

示例如下：

主體層構(gòu)成

業(yè)務(wù)場景上對于人物角色的需求顯而易見，歸納前期已有場景人物角色使用范圍，結(jié)合用研數(shù)據(jù)，根據(jù)我們的用戶畫像，進行角色定位，締造人物間的聯(lián)系。

從服裝，體態(tài)差異上，結(jié)合本身職業(yè)特征，塑造不同人物形象，滿足不同場景的使用需求，增加了故事性，與用戶共情。

• 基礎(chǔ)人物比例

古希臘雕像中大量表現(xiàn)出的8頭身比例，是公認的身體最美比例，女性與男性有一定的身高差，故人物保持8～9頭身的身高比例。兒童身高可在4～5頭身之間。

人物基礎(chǔ)屬性預(yù)設(shè)

確定了基礎(chǔ)人物，對于人物的動作，發(fā)型，服飾等基礎(chǔ)屬性進行擴展。

• 動態(tài)預(yù)設(shè)

面對豐富的使用場景，為了方便設(shè)計師靈活編輯與擴展，繪制多視角人物動態(tài)，對常用人物動態(tài)進行預(yù)設(shè)，提高角色在各業(yè)務(wù)場景的利用率，節(jié)省設(shè)計師更多繪制時間。

• 發(fā)型預(yù)設(shè)

• 服飾預(yù)設(shè)

• 

輔助層構(gòu)成

輔助層烘托主體層，由簡潔形狀，曲面組合而成，無須過度刻畫細節(jié)，最大成程度的保證了畫面的統(tǒng)一與效率。

背景層構(gòu)成

如輔助層的考量，對背景層的刻畫同樣是簡潔。最大程度的保證了畫面的統(tǒng)一與效率。

插畫應(yīng)用

插畫庫展示

前期根據(jù)現(xiàn)有場景進行梳理，總共搭建基礎(chǔ)場景52個共享給不同設(shè)計團隊使用。后期會繼續(xù)增添場景中人物組件庫的建立，極大的便利設(shè)計師的輸出，保持風(fēng)格一致性。

多平臺擴展

設(shè)計過程中我們也兼顧到同個插畫場景的多模塊多終端展示。更全面的考量便于設(shè)計師的使用，進行更合理的適配。

UI界面中的使用

空態(tài)頁

產(chǎn)品應(yīng)用

視覺營銷上的使用

效率

組件庫最大的價值在于提升整體設(shè)計師效率，可以快速搭建出一個或成系列的插畫場景，保證設(shè)計質(zhì)量的同時兼顧用戶體驗。

以日常項目中一位中階設(shè)計師為例，一天內(nèi)可以完成一副插畫設(shè)計，如果使用組件化體系，30分鐘內(nèi)即可完成設(shè)計。

結(jié)語

此次插畫體系的設(shè)計探索過程，是我們直面設(shè)計問題，一一攻堅與共建的過程。

從用戶情感的考量到自身品牌形象的期冀、從信息傳遞到信息接收多角度進行插畫總體脈絡(luò)的考量與反復(fù)研磨，讓插畫體系具備統(tǒng)一性、適應(yīng)性，提高設(shè)計效率的同時又加強了與用戶間的情感映射，解決問題同時升華設(shè)計的整體品質(zhì)。

插畫體系設(shè)計始于機票的產(chǎn)品業(yè)務(wù)發(fā)展訴求，但不止于機票產(chǎn)品，跨部門的合作與共建，使插畫設(shè)計體系在根源上具備了跨團隊合作與延用的基礎(chǔ)；同時，插畫體系的設(shè)計建立，也為組件庫的設(shè)計與搭建奠定基礎(chǔ)，服務(wù)與規(guī)范集團層面的插畫設(shè)計展現(xiàn)，往設(shè)計中臺化的方向繼續(xù)擴展。

我們目前已建立插畫庫平臺，配合Kirby Sektch工具實時更新、有效觸達，為攜程集團各BU賦能。