設計思考及詮釋方法

我們先要去了解用戶是如何消費熱點內容的，基于用戶情景認知鏈路分析用戶在事件消費的鏈路，可以分為三個重要節點：1.熱點環境的感知；2.熱點事件的理解；3.事件觀點的產生。

結合用戶的消費路徑，我們將設計邏輯框架拆分為三個層級：

1.氛圍背景層：分層呈現熱度氛圍，輔助用戶感知熱點環境；

2.信息內容層：精細化拼裝管理，幫助用戶理解熱點事件；

3.功能互動層：輕互動玩法設計，激發用戶參與抒發事件觀點。

1. 熱點環境感知：分層呈現熱度氛圍

從氛圍表現層面，助力用戶更快速的辨別事件的熱度及重要程度。設計師結合搜索熱點使用場景以及業務時效性配置訴求，歸類了兩種設計表現層次：1.日常熱度氛圍  2. 大事件熱度氛圍

1）第一個層次：日常熱度氛圍

主要應用于熱點新聞場景，時效性要求高，同時事件熱度也會在：“發酵—爆發—消退” 間實時變化，設計根據熱度“強弱”程度需求，劃分兩檔視覺展現階梯，以自動化的方式展現，滿足熱度的實時變化需求，輔助用戶感知當前事件熱度?！暗蜔岱諊比鯓撕炘O計用以展現上升/今日熱點，“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現上榜熱點。

如，“馬斯克收購推特”，搜索熱度持續上升，以第一階梯-標簽方式展示低熱氛圍；在 “馬斯克收購推特” 的事件熱度不斷增長，成為熱榜事件后，以第二階梯 – 高熱氛圍自動匹配 ，通過背景及榜單標簽的呈現，明確告知用戶當前事件的火熱程度。 

2）第二個層次：大事件熱度氛圍

主要應用于熱點大事件或運營活動場景，個性化展現要求高，同時事件關注度及重要程度也不同，設計根據事件的關注度及重要程度劃分為兩檔階梯，以人工配置的方式展現，超強的運營氛圍，可以讓用戶充分感知當前事件的重要程度，“A級氛圍”頭部疊加場景元素設計用以展現大事件，“S級氛圍”整頁沉浸式視覺設計用以展現重大事件。

如，冬奧會，重大事件，選用第二階梯 S級氛圍，打造超強的運營大事件會場認知。

前置突發大事件氛圍設計

近幾年我們不斷的經歷各類突發大事件，如：疫情/暴雨/名人逝世等等，每次突然發生的事件都讓設計師措手不及，匆忙產出運營氛圍設計方案緊急上線，保時效就很難保障質量，因此我們在想能不能總結事件類型提前儲備設計，以備不時之需。

不同突發事件會牽動網友不同的情感情緒，比如河南暴雨，我們為受難同胞擔心，為救助工作加油，為逝者哀悼；火箭發射成功，我們驕傲喝彩；名人結婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設計師要用準確的視覺語言表達。

因此我們在前置設計時也充分考慮了事件情感因素，通過對近一年突發大事件的歸類梳理，并推導不同細分場景下的用戶情緒，通過情緒分類的方式，總結兩種視覺設計表達形式：1.實景圖合成效果滿足嚴肅/莊重/權威場景情感需求；2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設計，保障突發熱點運營設計質效。

截至22年Q1，前置設計已在38個熱點場景應用：

2. 熱點事件理解：內容精細化拼裝管理

為滿足用戶不同事件場景下的信息需求，設計結合百度搜索：主要內容區（主要需求滿足）+ 延展內容區（延展需求滿足）的綜合聚合能力，通過組件分區布局+精細化規則管理，為熱點場景內容的高效拼裝打好體驗基礎。

1）主要內容區

主要內容區，能夠幫助用戶快速了解事件的主題、時間及主要內容，結合熱點事件長期的需求沉淀，設計將主要內容區又細分為主題區域及內容區域。主題區域可承載拼裝事件主題、事件倒計時、會場分發導航等主題類組件；內容區域可承載拼裝圖文/視頻/直播等事件主體內容分發組件。通過不同區域內組件拼裝規則的制定，業務可以快速選擇所需組件進行頁面組織拼裝，達成分場景個性化滿足用戶主需求的目標。

如：元宵晚會，熱點主要內容區 以“ 晚會直播時間倒計時+ 各衛視晚會分會場導航+圖文內容 ” 組件支撐起重大晚會預熱期的事件主需求滿足。

因為有設計拼裝規則，不同大事件活動，各場景內容可個性化滿足需求，交互布局設計上又可兼顧橫向一致性。

2）延展內容區

延展內容區，能夠幫助用戶了解事件相關知識信息或提供事件相關服務。業務可根據事件場景需求，選擇多個延展內容模板與主要內容區進行拼裝，搭建完整頁面以呈現不同熱點事件內容。

如：俄烏戰爭-戰事場景，脈絡卡幫助用戶快速了解事件進展 ；冬奧會-賽事場景，數據卡幫助可視化呈現賽事進展；博鰲亞洲論壇-會議場景，百科卡幫助用戶科普相關名詞知識。

3. 事件觀點產生-輕互動玩法強化參與感

通過氛圍打造和內容組織，已經達成用戶需求滿足的目標，但到此截止，搜索結果的體驗還是理智疏遠單向的，搜索場景與用戶、用戶與用戶間也無法產生對當前熱點的討論與態度表達。因此設計師對用戶的互動行為認知習慣進行分析，并采取具體的設計策略逐步引導用戶參與互動。

1）互動喚醒 – 吸引圍觀增強互動意愿

優化前的熱搜結果頁，用戶的討論內容都是隱藏在資訊落地頁評論區內，需要點擊進內容落地頁內才能參與“圍觀”或“討論”，除互動氛圍已脫離當前場景外，也削弱了用戶對此事件表態的參與積極性。

通過彈幕滾動+輸入框組件組合外顯的交互設計方式，將用戶討論外露，不僅豐富熱點事件搜索場景的內容維度，同時基于從眾心理，進一步刺激用戶的參與欲望。彈幕結合事件類型配色來更好貼合熱點事件整體環境氛圍。

2）情緒抒發-輕互動玩法降低互動門檻

而投票表態+彈幕輕互動組合效果設計，能進一步降低用戶交互心理門檻，讓用戶動一動手指就可以參與其中。在表態/投票抒發情感的同時也可以發彈幕聊聊對當前熱點事件的看法，使用戶互動情緒表達更充分。

3）驚喜反饋-強化視效打造記憶點

原有設計風格，無法在去世祭奠、頒發勛章等莊重嚴肅場景精準的表達視覺情感，無互動反饋狀態僅有互動前后狀態變化。

結合熱點場景積極外放情緒及莊重內斂情緒，視覺主要從形/質兩個維度進行優化升級，并增加互動反饋動效，同時運營可結合具體事件主題配置，綜合提升互動驚喜效果，打造產品記憶點。

視覺層：通過更立體的形態和更豐富的層次質感，更精準的表達情感

動效反饋層：以主圖形+輔助元素，通過符合場景氛圍的動態效果設計，更充分的表達情感

運營主題配置：在日常反饋基礎上，增加運營主題配置層級，為特定主題場景提供定制反饋效果

寫在最后

通過熱點環境感知分層呈現、內容組件合理布局拼裝滿足等設計手段，助力搜索平臺以更高效豐富的內容展現形態應對全年3萬+熱點大事件運營。會場拼裝呈現系統的應用場景也在不斷擴展，如營銷活動、品牌造節等。設計不會止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現更快速、準確、全面、有溫度的搜索熱點體驗。 

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

作者：百度APP用戶體驗

轉載請注明：學UI網》用設計詮釋搜索熱點

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01 設計網頁中遇到的問題

面對企業級中后臺龐大且復雜的集合，會面臨各類問題：

• 業務多，資源少

• 人力成本高

• 沒有品牌性

• 體驗差

官網設計中也有很多相似功能，面對繁多需求，設計者快速做出響應會產生重復勞動成本。只能做到滿足功能，用戶體驗并不是很友好。

02 突破問題

通過總結之前的工作，發現很多設計內容有50%以上的重復率，我們要做的是將這50%重復率形成設計體系化，建立資源整合，搭建規范化官網模塊，并把模塊設計反推給產品，在提高設計效率的同時也減少產品工作，減少協同成本。

通過“收集需求——整合歸納——定義組件——代碼搭建“ 的過程提升設計效率。       

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

整合各個業務線資源，并根據業務系統進行分類：數據中臺，技術中臺，業務中臺。面對這三大類別，目前官網需求量會達到幾十個，而面這些繁多網站需求，首先要做的就是整合分類。

通過對對業務線歸類，統計出高頻15+個組件模塊：

Banner、產品優勢、產品特色、案例、信息內容、信息流程、合作方、聯系我們、關于我們、使用流程、功能介紹、手機\電腦信息展示、合作方、地理地圖、其他模塊等…

• 第二步：模塊梳理歸類

并更具根據模塊類別的復用率進行再次梳理，產出設計模版。模版根據設計形式、排版布局等方面進行進一步延展，復用率高的模塊對應模板更豐富。

03 設計語言（理念）的建立與模塊產出

• 設計風格建立

視覺體系上，B端產品不同于C端，設計更多為體驗服務，色彩的豐富度相對較弱，單一。要突出b端設計，我們決定從精致性上為切入點，選定“輕擬態”風格，即突出設計的細節性又不會因為過度設計影響內容。并根據業務體系與設計風格，完善設計語言關鍵詞提煉：科技、高效、簡約。

          

• 字體與顏色規范

色彩能夠起到視覺語言傳達和信息承載作用。企業級產品延用了matrix 的配色體系，以藍色調為主色，同時模塊產出深淺色系，便于多方面選擇。

• 設計布局

采用刪格系統定義布局，根據首頁和內頁展示形式進行基礎布局

         

• icon再創新

圖標也進行三大層級劃分，以應用于不同場景：

3D圖標

3d質感圖標。用于重要層級模塊，數量控制4個以內。

玻璃球圖標

磨砂玻璃風格已經廣泛應用于ui產品中的很多地方，我們在磨砂玻璃基礎上，創新新的icon風格“玻璃球”icon，該風格能更換的和輕質感設計融合在一起，用幾何元素設計，通過拼接組合和系統icon設計，能夠在短時間內快速產出立體icon，適用少于8個類別的模塊icon。

輕擬態線性圖標

3d線性圖標適用于多場景模塊，可大范圍出現在頁面中。

         

三維設計

banner模塊分為3d三維風格和二維平面圖片，根據不同業務線定義使用規則。如商業，公益相關產品，選定圖片作為banner展示更能準確傳達信息，而技術類官網用3d效果更能傳遞科技性。

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

可根據需求自由選擇。

幾何化形的裝飾元素

為了體現網頁設計的“空間感” 網頁設計中加入幾何元素穿插，根據業務品牌語言 圓、三角、方定義輔助裝飾元素。（圓-業務 ；方-技術 ；三角-數據圓、三角、方定義設計幾何元素）

多樣性變化 

為官網模塊的產出依據業務線，在建立規范化組件的同時也需要考慮設計中的“區別性”業務線-營銷產品，更多體現商業性質設計采用暗色系，而技術類官網更多體現科技感，加入3d元素。在同一模塊的設計也加入背景白色/暗色和模塊的亮色/暗色。

04 實際應用

目前我們已經產出50+模塊，10個+網頁模版，通過代碼化，建立“云搭”這一網頁生成工具，建立中臺系統在生成平臺，目前已經支持多個業務線。從設計產出模塊到開發實現模塊代碼話再到產品拼接選擇，整體過程節約了設計資源，為產品研發提效提供一站式解決方案。

后續我們將發布云搭二期文章，會為大家介紹設計師是如何從產品、交互思維，自主研發“云搭”這款工具的，敬請期待。

一、交互設計師能力模型圖

二、交互崗專業能力描述

能力模型圖中的每個點都可以很詳細的寫一篇專題文章，本文不做過多展開，只是拋磚引玉：向大家說明具體能力維度可提升落地的點有哪些。其中一些能力點我之前的文章中也有提及，以后有機會我會針對其他能力點單獨梳理文章。

基礎專業能力 

一直在強調交互設計師要盡可能前置到業務中，在設計工作的起始階段對業務背景、業務目的、現階段存在的問題、產品規劃有一定程度的了解，為后續設計方案提供決策依據。

除了承接上游需求，許多設計師自主驅動的需求都建立在對業務的綜合了解基礎之上，如果僅是體驗設計層面的優化，實踐中很難獲得上下游同事對其價值的支持和認可，想要落地就更加無從談起了。

可以從以下幾點逐步加強對各業務線、各終端產品的理解：

• 了解各個業務線或產品的階段性或長遠規劃。
• 多與產品經理、運營等上游同事溝通，深入了解產品發展的歷史緣由。
• 通過用研分析逐步了解不同產品的優勢與不足。

需求分析主要是指與產品經理的協作配合，有時候也會直接與運營、銷售或者客戶對接。交互設計師介入一般有兩種方式：

A. 業務方訴求明確，產品需求初稿規劃完成，此時交互設計師介入，基于產品需求目的給出體驗設計層面的建議。

B. 只明確了要實現的業務目標，產品需求尚未明確，需要交互設計師與產品經理或業務方一起溝通共創，相當于協助產品明確需求的過程。

在這個階段，交互設計師需要注意以下幾點：

• 了解需求的背景與目的，需求方案的合理性，針對需求不合理之處提出質疑并綜合考慮給出建議方案。
• 需求分析與設計規劃時要盡可能平衡業務訴求、用戶體驗、技術可行性與實現成本等因素。
• 查看需求文檔雖然是基本功，但是對于新人而言這里容易踩的坑比較多。不同產品經理描述風格與方式不同，也難免有一些規則遺漏，所以查看時若存在問題及時與產品經理溝通。
• 經過需求分析，交互設計師可以推導出整體的設計目標與設計策略。

設計規范是基于設計語言或設計指南而來的，不同公司產品會有不同的定義。根據業務復雜程度和產品特性，一些公司會梳理自己的設計規范，交互設計師重點關注交互層面的規范，也需要對視覺規范有一定了解。

設計組件是以設計規范為指導原則，為提升產研協作和開發效率而設定的UI組件庫。這里需要注意：

• 設計組件一般分為基礎組件和業務組件，基礎組件類似Ant Design；業務組件則是依據公司具體產品使用場景決定的，比如電商類應用：產品列表的產品信息、直播模塊等頻繁被調用的、由多個基礎組件組合而成的內容。
• 由于不同終端交互設置和操作方式存在差異，所以可能會有針對移動端、Pad端、Web端、TV端等多終端設計組件。

大家可以參考iOS人機交互指南與谷歌的MD系統級設計規范；目前市場上有許多開源的設計基礎組件，比如Ant design、滴滴、騰訊、京東、有贊、餓了么等。

設計方案具象化的呈現依靠“規范的交互文檔”，輸出交互文檔注意以下幾點：

• 了解并繪制信息結構圖

  交互設計師繪制的信息結構圖通常用于“信息層級的梳理”。比如一個網站或APP的導航劃分與層級，可以通過信息結構圖直觀的呈現，也可以更直觀的判斷與其他內容的關聯關系，確認是否符合用戶的心理模型?？蓞⒖嘉抑皩戇^的文章：你對信息架構圖了解多少？

• 了解并繪制任務流程圖

  對于邏輯判斷比較復雜的項目，比如涉及多角色、多狀態、多任務流、多終端時，任務流程圖有助于設計師及相關查閱的人更快更清晰的了解需求?？蓞⒖嘉抑皩戇^的有關流程圖的文章：案例分析：繪制流程圖需要注意哪些事項？

• 繪制交互原型

  關于如何繪制規范的原型圖，幾年前我寫過一篇相關文章，里面提到的基礎原則仍然適用：如何設計規范的原型圖？

• 交互說明的書寫要求

  關于如何將交互說明盡可能寫的完備和細致，可以參考我之前寫的兩篇文章：

  宏觀角度：原型圖的交互說明該怎么寫？

  微觀角度：原型圖的交互說明該怎么寫

這部分內容涉及到交互層面的一些“參考規則”，之所以叫參考規則是因為不是必須遵守，可能針對不同業務和產品會做適當補充或刪減。比如頁面打開方式研究、尼爾森可用性原則等?？梢酝ㄟ^閱讀一些專業書籍掌握理論知識，然后在實踐項目中應用總結。

交互設計師在日常工作流程中，會參與不同類型的會議，比如需求討論會、需求評審會、設計評審會（交互與視覺內評與外評）、測試用例評審會、開發問題討論會等。有的會議交互設計師作為參與方，有的作為主導方，因此需要對會議節奏和效率綜合把控。

對于新人或初級交互，可以選擇性地參加其他交互同事組織的以上相關會議，了解和熟悉如何高效開會達成會議目的。

在日常項目流程中，需求評審過后交互設計排期需要首先給到，下游的視覺設計師、前端研發、甚至包括后端研發、以及測試工程師都需要根據交互文檔給出各自更加精確的排期。

因此評估交互排期在項目流轉過程中非常重要，如果評估排期少了無法按時交付，可能會造成下游同事時間不夠，甚至導致項目延期；如果評估排期多了，對于有上線時間要求的項目，總體時間可能又會不夠。

所以交互設計師只要做到根據自己手頭時間客觀評估即可。這里對于新手或初級交互而言，有兩點注意事項：

• 承接的項目類型由簡單到復雜過渡。
• 交互排期需要包括“需求溝通時間、設計方案輸出時間、評審時間、評審后調整時間等”，剛開始排期可以給自己多預留1-2天。

對于一些項目周期緊張或者頻繁變更，導致設計輸出時間增加的需求屬于特殊情況，需要另當別論。

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

既需要熟練使用設計相關的軟件工具，比如交互常用的Axure、Figma、思維導圖工具等；也需要跟上“軟件出新的步伐”，比如Figma這種云端多人協作的設計工具誕生之后，過往使用Axure的交互設計師和使用Sketch的視覺設計師，都對它青睞有加。

進階專業能力

• 查閱公司內部已沉淀積累的用研資料。
• 掌握并應用常用的用研方法，如“體驗走查、競品分析、AB測試、可用性測試、問卷調研、用戶訪談等”。

• 有些公司可能沒有資源推進用戶研究，但至少你需要先掌握相關理論知識，學到的有價值的東西在未來總會用到的；
• 還有一些公司有專門的用研部門，在用研方法和工具使用方面會更加專業，這種情況設計師與用戶研究員協作配合會更加高效。

• 在日常工作流程中具備數據意識：無論是需求前期的分析階段，還是設計開始實施之前，亦或是需求上線后的效果復盤，數據都作為有力的客觀佐證，為你的設計決策提供依據。
• 培養數據分析能力：實際項目的數據分析過程可能會非常復雜，涉及到不同類型的數據指標、數據分析方法的應用、數據查看與配置工具、復雜的業務因素等等。需要你對業務和數據都比較了解，是一種綜合能力的體現，需要日積月累的打磨。

• 邏輯思維：分析和拆解復雜問題的能力。
• 產品思維：多維度考慮用戶需求與業務訴求。
• 數據思維：掌握數據的收集、分析和應用。
• 系統思維：逐步學會結構化、體系化地看待問題。

通用能力

個人影響力

• 設計分享

  不限于具體形式，包括日常項目總結、軟件工具使用、設計方法論應用等。對內分享促進部門內學習提升；對外通過輸出專業文章等方式分享，沉淀積累的同時，也能幫助有需要的人，順帶還能結交一些靠譜的朋友，不亦樂乎！

• 設計指導

  當你已經是有幾年工作經驗的中高階設計師，帶教新人是一種傳承責任，我們都是從初出茅廬一步步經歷過來的，非常理解眼前這個行業小白有多么渴望在正確的指引下持續努力。多給予別人幫助，畢竟予人玫瑰，手留余香嘛！

• 設計創新

  許多人一聽這兩個字就覺得有點可笑，該做的事情還沒做好呢就談創新？其實創新在我理解更多是一種“微創新”，可能會體現在你的每一次需求洞察中、設計方案的細節中，不要小看微創新，點滴積累之后，你會比別人更有想法和競爭力。

寫在最后：

設計師不能總是輸出，更要持續輸入才會有源源不斷的創造力！想要系統地學習專業知識，性價比最高、成本最低、也最靠譜的方式是系統性地“閱讀專業書”。后面我會寫一個系列的專欄文章推薦“設計師必讀的專業書籍”。

原文地址：人人都是產品經理

作者：Viksea

轉載請注明：學UI網？交互設計師專業能力體系

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1、錯開對齊

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

2、增加層次感

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

3、出界設計

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

甚至可以將banner圖中的元素進行出界，增加設計感。

4、傾斜設計

傾斜設計，也是一個提升設計感的常用技巧。先在正視角度下擺好，利用技巧1錯開一下界面，然后整體旋轉一個角度就能很好的提升畫面表現力，增加設計感。但要注意用這個方法的時候，要保證界面元素的清晰度，不要出現鋸齒。

傾斜后也可以適當增加一些圓點點綴

把一些UI 組件斜角后，結合層次感設計技巧

傾斜設計+出界+底部方塊裝飾

傾斜設計后，增加一些半透明的裝飾層次設計

5、3D厚度設計

現在3D設計非常流行，把自己做的界面增加一定的厚度然后結合傾斜設計，也能快速提升界面的設計感。

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

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

6、增加底圖設計

這個技巧要注意讓界面與背景圖自然融合，關鍵在于需要找到一張非常好的圖片，考驗選圖的能力，存在一定的風險。如果你對這種包裝方式不大放心的話，建議你謹慎使用。

比如這張圖，細節點在于界面左邊淺色配上底圖中左邊的白，右邊深色界面搭配右邊深色的山體顏色，看起來就很和諧。

下面這張圖用了一個跟界面中配圖同一個調性的圖片，為了防止干擾界面，還加了一點高斯模糊，效果也非常不錯。

這張圖的底圖用了一些比較具有設計感的圖形，整體比較簡潔高級

常用的一些底圖元素還有圓形，點等等

用一些插畫元素作為底圖也是非常不錯的

7、套用樣機來展示

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

當然，如果用樣機也沒什么大問題，原則還是為作品服務的，保證清晰度，不搶作品本身的視覺就OK。用上了樣機，它就成了你作品的一部分，要保證樣機是最新的，且質量要高。

關于樣機的話，彩云之前也幫大家找了一些非常高質量的樣機資源，需要的話可以點擊下面的文章看看內容，并找到獲取方式下載使用。

《2021年全網最新品質最好的樣機資源被我找到了，免費分享給你！》

《2021年全網最好的樣機資源都在這里，收藏這一篇就夠了！》

原文地址：彩云譯設計（公眾號）

作者：彩云Sky

轉載請注明：學UI網》Behance 首頁推薦的作品集為什么這么高級？為你拆解其中7個秘密

工具

工具：AI(Adobe illustrator)

適合：零基礎入門

扁平風的基礎思維準備：幾何形組合造型

幾何形一直被視作是抽象造型的基礎元素，通過幾何形有意識的相互疊加組合，就可以使得這個造型呈現出可識別的對象，比如我們在這個教程里所表現的那樣：用幾何形畫水果。

比起細膩豐富的傳統畫法，極簡的幾何平涂造型所創作的水果，看起來有著別樣的生動的特質，擺脫了對水果表面質感的依賴，轉向對形色的探索，是扁平插畫的基礎思維。

常用的幾何形是：圓、方、三角，在這個教程里，我們就運用矢量軟件AI(Adobe illustrator)進行創作，接下就開始來打造我們的《鮮果派對》海報吧。

用方形塑造蘋果基礎形

常見蘋果的畫法可以是圓形起步，也可以是從方形開始。

STEP 01

打開AI，新建一個文檔，運用粉色畫出一個正方形，這就是蘋果的起始形。起始形非常重要，它決定了接下這個蘋果的形狀走向。

然后，我們把這個正方形改變為梯形，改變的方法有很多種，這里我們利用變形工具，進入【效果>變形>弧形】，在變形工具的面板里，將垂直這個滑塊調整為-15%。

STEP 02

在選中上一步所變形成為的梯形的基礎上，進入到【對象>擴展外觀】對它做一次擴展外觀。

擴展外觀就是讓這個形狀真正變為矢量梯形的路徑，如果沒有做這一步，這個形狀看似是梯形，其實還是原來正方形的矢量路徑。分辨真假梯形也很簡單，只要選擇這個形狀，看到路徑的走向仍然是正方形，那就是假性梯形，這就需要為它做一次擴展外觀。

STEP 03

然后再選中這個梯形的基礎上，單擊左邊的工具欄里的【直接選擇工具】，就會看到四個角內分別帶有四個很小的圓點（仔細看是一個同心圓），拖動它，你會發現它會控制這個角，將它從銳利的角變為圓弧。

根據圓弧離形狀中心的距離多少，弧度也會相應發生變化。

好了，蘋果的基礎形就完成啦~

細節的魔力

我們開始為蘋果增加葉片，葉片的畫法首先也是要從基礎幾何形開始慢慢演變而成。我們在葉片這個部分提供的基礎幾何形同樣是正方形。

STEP 04

用藍紫色畫出一個正方形，然后再復制一個正方形，將這個復制的正方形旋轉45°，變為菱形。再復制第一個正方形。于是我們得到了兩個正方形和一個菱形，將它們像下圖所示拼起來。

然后再選中這個組合造型，進入到【窗口>路徑查找器】，在路徑查找器的面板中運用【聯集】將它們拼合成一個獨立的封閉的路徑。

STEP 05

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

問：感覺似乎這樣的方式比較麻煩，為什么不直接用鋼筆工具畫呢？

這也是我在這一風格的畫法中想要重點強調的：盡量避免使用鋼筆工具，而用幾何形進行轉化，是保持扁平風格中幾何感和抽象感的訣竅。

因為手動畫出的路徑畢竟不會特別嚴謹，這時就難免讓扁平風格失去了它本身的風格特點，而這時如果沒有較強的結構感，整個畫面就會看起來”平淡“甚至”無趣“。

其實葉片的造型也可以探索出其他的幾何方式進行組合構造，本文只表現一種方法。其他的方法，可以留給你下去嘗試。

STEP 06

這時，把這個葉片的形狀的混合模式改為“正片疊底”，利用疊加的視覺效果增加畫面的幾何感和時尚感，這是在我們過去寫過的文章《超級可愛！插畫萌新必學的PS極簡馬克筆簡筆畫：盆栽篇》以及相關系列文章也都運用過類似的技法。

STEP 07

最后，用線條增加最后的細節。這里所用的線條是較細的3px的黑色線條。這里的線條粗細要根據形狀本身的尺寸大小比例來確定?？傊?，對細節的描繪可以克制一些，不要太過復雜。

利用線形的組合以及形狀疊加的視覺效果，扁平風的簡約蘋果元素就畫好了。

準備好元素，完成海報

STEP 08

藍莓的畫法從矩形起步，對矩形的組合以及成形的演變方法，是我們重點要訓練的對象。中間的步驟我們已在文章前面詳細敘述過了，這里就不再重復?？梢岳^續用這個方法演練下去。

STEP 09

畫草莓的時候，運用了兩個梯形進行組合。利用葉片造型進行疊加，也能增加圖形的魅力。

STEP 10

我們把其他的水果元素也畫好，我這里準備了一些比較可愛的櫻桃、西瓜之類，你也可以畫點菠蘿、芒果之類，注意要把握每一個水果的基礎形特點，然后在細節的部分加以強調。

把每個水果元素放到海報的設計中時，要考慮的還有對水果元素之間的間隙的疏密均勻程度，元素可以較大，有些元素甚至可以滲出到海報之外，這樣會讓視覺效果更為延伸。

如果經過路邊有家鮮果店，掛上這樣一張海報，應該效果是不錯的吧~ 先自我陶醉一波~

最后，獻上我的同類作品集小站

當然，如果你想要臨摹或者參考更多，可以通過訪問下面這個網站，我在這里會放入更多類似的作品，繼續保持對這類風格的探索。

原文地址：飛屋設計

作者：飛屋睿UIdesign

轉載請注明：學UI網》無需手繪的AI矢量扁平幾何風基礎插畫：《鮮果派對》海報