1.數字人的三方面特征

虛擬數字人是指具有數字化外形的虛擬人物。與具備實體的機器人不同，虛擬數字人依賴顯示設備存在，我們所知的很多虛擬人都要通過手機、電腦或者智慧大屏等設備才能顯示。

虛擬數字人宜具備以下三方面特征:

• 一是擁有人的外觀，具有特定的相貌、性別和性格等人物特征;
• 二是擁有人的行為，具有用語言、面部表情和肢體動作表達的能力;
• 三是擁有人的思想，具有識別外界環境、并能與人交流互動的能力。

綜合來看，就是具備四方面的能力，即形象能力、感知能力、表達能力和娛樂互動能力。

如果我們下次再看到有公司推出數字人，就可以結合這些特征和能力來判斷這個數字人的可信度，避免被借勢營銷的企業鉆了空子。

2.數字人的運作原理

知道了什么是數字人，接下來就要搞清楚數字人到底是怎么說話、互動的，是背后有真人在操控，還是完全通過技術生成。

面對新興的數字人，相信很多讀者都存在類似的疑問。

數字人的誕生發展和AI人工智能可以說是密不可分，想了解數字人的運作原理，首先要知道數字人的通用系統框架。

虛擬數字人系統一般情況下由人物形象、語音生成、動畫生成、音視頻合成顯示、交互等5個模塊構成。（資料參考: 2020年虛擬數字人發展白皮書)

交互模塊為擴展項，根據其有無，可將數字人分為交互型數字人和非交互型數字人。

首先看一下非交互型數字人：系統依據目標文本生成對應的人物語音及動畫，并合成音視頻呈現給用戶。

交互型數字人根據驅動方式的不同可分為智能驅動型和真人驅動型。

▲ 智能驅動型數字人：通過智能系統自動讀取并解析識別外界輸入信息，根據解析結果決策數字人后續的輸出文本，驅動人物模型生成相應的語音與動作來使數字人跟用戶互動。

這種人物模型是預先通過AI技術訓練得到，可通過文本驅動生成語音和對應動畫，業內將此模型稱為TTSA(Text To Speech & Animation)人物模型。

▲ 真人驅動型數字人：真人根據視頻監控系統傳來的用戶視頻，與用戶實時語音，同時通過動作捕捉采集系統將真人的表情、動作呈現在虛擬數字人形象上，從而與用戶進行交互。

3.數字人常見的類型

調研分析當前市場上的數字人，根據人物圖形維度，分為2D和3D兩大類，從外形上可分為卡通、寫實等風格，綜合來看可分為二次元、3D卡通、3D高寫實、真人形象四種類型。

接下來根據每種類型的特點，從外在形象、服飾裝扮、表情動作等方面，結合典型案例來逐一分析虛擬數字人的設計。

二次元類型

虛擬歌手-洛天依

洛天依的職業設定為虛擬歌姬，個性軟萌可愛、溫柔細膩，外貌特征上是灰發、綠瞳，頭戴碧玉發飾。

▲ 除了獨特的形象和性格，洛天依還能唱歌、跳舞、直播帶貨，多樣的才藝加持讓人物設定不單薄，受到很多用戶的關注。

3D卡通類型

虛擬助理-度曉曉

度曉曉是基于虛擬人IP的陪伴型虛擬助理。在小度助手的能力基礎上，度曉曉有虛擬人物形象和情感交互系統，具備視覺識別能力，支持自然的交流方式。

▲ 在外形裝扮上，度曉曉是紅色短發的甜美可愛風，五官比例偏向二次元風格。根據現有案例來看，度曉曉在眨眼、微笑等面部微動作以及肢體的造型，都很自然、生動，整體設計效果相對較好。

▲ 度曉曉定期更新身穿不同主題服裝、擺著各種pose的形象，每套服裝都有一個主題再帶配上各種周邊小配飾，營造出一種清新時尚的效果。

3D高寫實類型

浦發銀行數字員工-小浦

小浦作為銀行的數字員工，主要進行風險評估、要聞播報、投資建議等在線服務。

▲ 從外觀上，小浦在形象上無論發型還是五官都足夠擬人化、職業化，穿著銀行職業裝，屬于比較典型的銀行職員形象。

▲ 小浦沒有很夸張的面部表情，始終以面帶微笑的狀態面向用戶，給人一種親切感。肢體動作相對較少，沒有特別夸張的動作設定，只有固定的幾套動作。

虛擬偶像-AYAYI

AYAYI是使用Unreal引擎造出來的特別擬真的Metahuman形象。

▲ 外在形象：寫實程度更高，人物整體效果已經和真人十分接近，五官特別精致、眼瞼微斂、銀色短發，散發著一種清冷氣質。

▲ 從AYAYI社交賬號的更新來看，目前主要是分享一些AYAYI的擺拍圖片，穿著的服裝、飾品都比較真實、時尚，拍照環境都是休閑、藝術類的場景。

▲ AYAYI人物形象的時尚感和真實感，更容易切入商業化，比如穿著特定品牌的服裝進行擺拍。

高保真數字人-Siren(塞壬)

Siren是高保真、實時、可交互數字人，用到了實時渲染、表情捕捉、動作捕捉、高保真3D掃描等前沿技術，達到了目前業界最高的技術水平。

▲ Siren的面貌細節更加真實，可以很清楚看到皮膚的細節、眼睛的轉動、說話的神態、臉上各種各樣的細紋。不管是毛孔、細紋等皮膚質感，還是神態上的表情，都很像真人。

▲ Siren在說話時嘴唇動作自然，效果真實。

之所以有的數字人看起來不自然，很大一部分原因是因為數字人面部表情不生動，特別是在說話時嘴唇和臉部、牙齒甚至舌頭的聯動，很容易出現動作不聯動、不真實的情況。

真人形象類型

新華社AI合成主播-新小浩

“新小浩”是無論外在形象、面部表情、服裝搭配、說話聲音，還是肢體動作上，都是完全基于真實主持人生成。

通過語音合成、唇形合成、表情合成以及深度學習等技術，克隆出具備和真人主播一樣播報能力的“AI 合成主播”。

▲ 我們每天都會遇見各種各樣的人，即使臉上最細微的表情，我們都可以感知到，用計算機打造出來的表情，往往缺乏靈氣。

真人形象的虛擬主播的優勢在于，他的特征都是來源于真人，呈現的面貌和狀態更容易被用戶了解。如果不仔細看，可能分辨不出是不是真人。

4.數字人的應用場景

目前國內市場上已經出現了非常多的虛擬數字人，在各行各業中有著廣泛的應用。

虛擬數字人技術結合實際應用場景領域，切入各類，形成行業應用解決方案，賦能影視、傳媒、游戲、金融、文旅等領域，根據需求為用戶提供定制化服務。

按照應用場景或行業的不同，已經出現了娛樂型數字人，如虛擬偶像、歌手、網紅、虛擬代言人等；

助手型數字人，如虛擬客服、虛擬導游、智能助手。

主播型數字人，如虛擬主播、虛擬支持人等。

這里搜集的案例只是虛擬數字人的應用的一小部分，還有很多優秀的應用案例等待著大家去一起發現。

5.代表性的研發平臺

國內有很多互聯網平臺在研發虛擬數字人，我也從中收獲了大量的信息和資料，這次把這些平臺分享給大家：

• 搜狗AI開放平臺
• 網易伏羲、網易易現
• 百度AI開放平臺
• 騰訊云、騰訊NEXT Studios
• 訊飛開放平臺…

設計夾把這些網站進行了匯總，如果大家想了解更多關于AI人工智能、數字人和最新科技的發展，可以去公眾號后臺獲取網站鏈接～

領取方式：關注公眾號，后臺回復【數字人】領取虛擬數字人網址鏈接匯總

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

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

作者：Clippp

轉載請注明：學UI網》用一篇文章，幫你了解什么是虛擬數字人？

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

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

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

1.為什么要改版？

如果你已經開始工作了，那么對于設計改版你應該不陌生。改版目的是為了優化產品體驗，增加品牌粘性，提升數據轉化。

一般情況下，產品在一年中至少會有一次大改版。其他情況下不會特別大的變動，畢竟每次改版都是會影響數據的變化，領導也不敢隨便冒險。

那么到底什么情況下會改版？下面看一張圖，就一目了然。

從上圖看出，通常在這些條件下，公司業務層、用研側、設計側驅動、年久未迭代、產品需求出發，企業基本就會做設計改版。

這里簡要說下用研報告，用研團隊和設計配合完成一份研究報告。那么這份報告里面就會有用戶對產品主觀評價，和測試過程中發現的一些體驗問題或者產品問題，這些關鍵結論可作為設計改版的依據。

如果你在的團隊有會每年都去改版，那么恭喜你，要好好把握每次機會，改版最能鍛煉設計師的時候，也是設計師價值體現，平時小迭代版本真的就像小修小補一樣。

2.改版中常出現的問題

• 目標不清晰或者說不知道如何推導

在啟動改版過程中，很多設計師不清晰設計目標，要達成什么要的效果。從大家作品集邏輯推導中就能看出，比如，很多設計師的目標關鍵詞常出現的情況是：簡潔、清晰、高級等等，我們可以想象下這樣的詞匯，是不是對任何產品都能用，沒有體現出產品要真正解決的問題。

那么對于設計目標來說，我們應該從哪幾個維度思考？

在一般情況下，可從以上四個大維度去挖掘設計目標。設計師首先就需要對每個目標充分理解，最好能和老板、產品、領導對齊各方向目標后，開始去拆解可量化的設計目標。

這里補充說明下，如果只是單純的視覺層面的改版，是很難得到多方協同支持，而且價值意義不是很大。所以，改版一定要挖掘出對產品產生明顯影響的問題。

• 不知所云的用戶畫像

在包裝過程中，如果你只懂皮毛的用戶畫像，還是盡量不要把用戶畫像東西放進去，沒有多大意義。放進去反讓人覺得你是套模板，大家可以看看大廠公眾號中改版文章，幾乎很少看到用戶畫像。

那么用戶畫像一般什么情況下會出現？比如是0~1設計啟動，這時候是需要細分人群定位，但是在設計側角度來說，建議別放，除非你對這塊非常懂。

3.設計改版流程

雖然網上流傳出很多各種經典設計思維模型，比如斯坦福大學設計學院設計流程、尼爾森諾曼集團設計流程等，這些都大同小異。在真正做的過程中，還會有很多問題出現，我們還需從實際情況出發，遇到問題解問題。

上圖就是一個大致的改版設計方法，從洞察問題、目標確定、發散收攏、方案探索、結果匯報、推動落地等6個步驟，每個步驟都有很多事情要做，所以設計改版真的是一個很龐大的工程。

除了我們日常工作中這樣去推進，在包裝作品集思路時，也是可以使用這樣的流程去思考，只是可以去掉最后兩個步驟。

4.寫在最后

前面有說到，我們真正在改版過程中可能并沒有很順，會出現很多突發狀況，這也是考驗設計師是否會靈活變通。最重要的一點是在啟動項目的時候，不要單點去看產品的問題，最好能系統的思考和業務方對齊關鍵目標，找準發力點，循序漸進，這樣也是為了減少設計過程中的返工問題，或者考慮不周的情況，不然會有失專業水準。

設計師路還很長，我們都需要在過程中學習成長，通過實戰提高思維應變和設計能力，通過設計驅動價值體現。

這個主題其實我很早就想講了，因為我發現很多設計師的慣性，經常會去X瓣X站里面找找當下流行的風格直接拿來使用，但卻并不了解這些風格的本質和設計含義，抄到最后就是四不像，它不能成為你思維和能力提升，反而會讓你對很多設計的見解處在表面停滯不前。

所以這次用時代來切分所有關于潮的風格，一次性全部講給你們。今天的文章內容較多，記得點贊收藏本篇文章，以后你們會感謝我的。

我們先來講第一階段，國風與民族文化

▽

其實國風不僅僅是我們中國人對本國民族文化的一種解釋，每個國家都有著自己的國風，比如希臘文化、羅馬文化、瑪雅文化等等。國風我們分為傳統、古典、現代。傳統對應的是水墨丹青類型，古典對應的是中國歷代的朝代與民俗類文化，現代對應的是線條描邊和色塊涂抹等方式的畫面展現。

中國傳統繪畫以筆法為主導，充分發揮墨法的功能。墨的濃淡變化就是色的層次變化，其潑墨與揮灑的筆墨之間流淌著豪邁和情緒化的特質，并且百試不爽，你可以把今年電影海報拿出來看下，10張有5張都是毛筆字體或者水墨類型的。

而丹青，在現代設計時可以使用顏色的透明度的變化來增加畫面層次，讓整個作品清淡、素雅，更適合展現出一個畫面的優雅和細節特質。相比之下水墨粗狂豪邁，丹青更顯雅致飄逸。這點你在眾多古裝劇里看畫風、看服飾顏色很容易能感受到其中的意思。

水墨丹青所需組成的部分，毛筆字、水墨、山水、彩繪等。

在中國傳統文化中，國風也是有很多不同領域的范疇，比如中國傳統文化+古典+唯美=古風，武俠劇風格和服飾居中，也有江湖快意恩仇！

而中國傳統文化+古典+小雅=雅致，更突出中國特有很多元素，被現在大量用到電商和產品包裝的設計中。

中國傳統文化+古典+大氣=國風，大氣磅礴，雄渾有力，電影或者大畫面毛筆字使用，張藝謀之前的很多古裝電影就大量使用的這種。

朝代組成的部分，如壁畫、宮廷建筑、服侍、花鳥、動物（比如龍、鳳、鶴）、祥云等等。這里我要補充的是很多人一說這個宮廷風，就聯想到了清朝的紫禁城，這其實不是完全的，只是說清朝整個建筑和圖案性的顏色比較鮮艷，更適合現代化的融合，但其實如果你想展現不一樣國風的話，應該是將朝代的特質多去了解。

比如我們為什么不用唐朝的元素來做一個唐朝的風格呢，例如還有漢朝的、明朝的、宋朝的等等，這些都是代表著中國不同時期的朝代。

當你去設計不同朝代的風格時，搜集他們朝代的服飾、建筑、器具上的圖案花紋，然后臨摹出來，這些就是最好的素材和設計參考圖。

比如我們看上張唐朝圖的左右對比下，色彩、服飾上的元素幾乎就是直接挪用的。當你參考這些圖案時，最好先去了解下這些本身圖案的意思，古代的設計圖案時就跟我們現在設計LOGO是有故事和含意的。

比如上面的清代文官官服九品練雀，下面的是清代武官九品海馬，代表著不同的官品階位。

除了朝代其實還有各民族的文化都可以為我們的設計吸收出更好的創意來源，而這些圖案的設計大部分都是來自于他們的民族象征的圖騰、服飾圖案、頭冠花紋等等，比如之前花西子就有一款產品就是用的民族的文化去設計的，就非常有特征性。

這里我補了小知識，其實這些民族在很早的時候都是國家，只是后來衰落經過遷徙后變成了民族部落，比如傣族，公元1180年左右，現今西雙版納一帶的傣族領袖建立了景龍金殿國，簡稱景龍國， 比如苗族的歷史可以追溯到5000年前的蚩尤九黎部落。光一個圖案有的時候就能追溯到很多的故事和歷史文化中，可見中華民族的瑰寶是一個可以可以源源不斷發掘的歷史。

國風的現代風是舍棄了其他風格中煩瑣的圖案和形式，因為注重線條和色塊拼合的使用，勾描形象而不藻修飾與渲染烘托的畫法，配以古樸配色和紋理，呈現出最具中國傳統特色的國潮，大量被用到插畫與設計融合的海報中。

當然國風里面還有一些民俗文化，比如戲劇、剪紙等等豐富的民俗帶來了大量獨特的文化象征：中國紅、燈籠、福字、年畫、錦鯉、紅包等等。

新現代是將國風其中的某單個元素放大化，表現極為現代手法，國風中商用化的最常用的風格。

有沒有發現國風比你想象中更復雜，也比你想象中有更多文化和元素的挖掘，這些隨便融合到現在的設計中都是潮的代表。

第二階段黃金年代

▽

黃金年代，其實就是對過去一種懷舊情節與形式主義運動的一種復古文化。但可別小看這個黃金年代，你去各大設計網站上搜索下，就知道沒有黃金年代，就沒有我們現在的市面上那么多的先鋒設計。

賽博朋克早80年代中期發展成為的亞文化，甚至一躍成為了主流文化的一部分，包括現在X音經常教調色賽博朋克、或者AE后期做成賽博朋克街道，前段時間賽博朋克2077游戲的流行等。

賽博朋克給人一種虛擬、科技、扭曲、智能的感覺，是因為在上世紀60、70年代，二戰后期的冷戰和中東戰爭集中爆發加上工業后科技時代的帶來，導致整個世界處在一個黑暗壓抑，科技爆炸，環保污染嚴重、人情社會冷漠的時候，所以這個時候人們渴望科技未來的發展，又對整個世界恐懼，當矛盾和沖突不斷是創作科幻藝術絕佳的一個形成因素。

你看到的很多風格，就像每一幅藝術家留下來的遺作，都有著代表那個時代的悲涼和無奈，人們只能通過某種形式是展現出來，于是繪畫，音樂、電影成為了人們最主要的情緒宣泄方式。

賽博朋克在設計上的表現形式往往以藍紫的暗冷色調為主，搭配霓虹光感的對比色，用錯位，拉伸，扭曲等故障感圖形體現電子科技的未來感，加街道大廈建筑等，很符合現在年輕人標榜自我的價值觀。

蒸汽波是賽博朋克文化的一種衍生，風格中充滿了故障、古典雕塑、80年代動畫形象、馬賽克、電子、光碟拼合的一種無實物感形式、蒸汽波平面設計風格，是在網絡誕生的流派。

蒸汽波的圖像，在2010年代初在分享網站已經普遍散播。它宣揚對復古文化，懷舊文物和批量生產的懷念，當然還有對消費資本主義和流行文化的技術，上世紀80年代嬉皮士文化的批評和諷刺。

在商用上，娛樂性產業在這種風格上的使用上尤為明顯。

Y2K 就是 2000年，俗稱千禧風。人們在當時把未來的世界幻想成了一個信息科技極為發達的夢中烏托邦。

風格經常出現技術不成熟的科幻場景、復古與未來感。圍繞未來元素、夸張亮色、金屬、科技、透明、PVC。但是你可以找找2000年的畫風，純畫風放到現在其實是不夠商業化的，需要我們用現代化的設計和其他風格進行一定的融合才可以。

設計是藝術化的商用呈現，所以涉及領域不能片面化，應該廣泛化和吸取百家之長，任何設計的成功都不是一個領域造成的，一定是融合。

哥特式（Goth）最早是文藝復興時期被用來區分中世紀時期（公元5-15世紀）的藝術風格。

以死亡、頹廢、古堡、吸血鬼、蝙蝠、紅玫瑰、十字架、建筑、哥特式等為標志性元素，由于本身存在的黑暗特質，色彩及元素不便于商業化，但其哥特的字體卻被大量使用。

哥特式的來源在于禁欲與死亡。人類認為以自由精神來超越對死亡的恐懼和困擾,通過藝術的表現可以將死亡的恐怖轉化為美感。蝙蝠俠三部曲就是典型的哥特式風格代表，重金屬搖滾人最愛的風格。

像素風格屬于一種形式的數碼藝術 ，像素是組成電腦數位影像的最小單位。放大后的這些小方塊稱之為像素(Pixel)，核心在于早期游戲機的畫面，是一種圖標風格的圖像，更強調清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，同時它的造型比較卡通。

組成部分：像素化，輪廓清晰，卡通，剛結束不久的創造營綜藝節目就是用的這樣的風格。

波普風格是發源于反對高端藝術和精英主義階層的藝術運動，采用大眾更容易接觸的信息和畫面體現，招貼畫風格的一種。

比如波點元素、漫畫風格、重復圖像、手寫體、夸張明亮的色塊碰撞等。

早期奇葩說就是用的這個風格，順便推薦幾個綜藝節目的視覺設計，一定要去看看里面不管節目場景還有一些物料和展示的設計，對你真的有幫助《熱血街舞團》《奇葩說》《即刻電音》《樂隊的夏天》《哈哈哈哈哈哈》等。

拼貼風格的英文其實就是膠水的意思，藝術的起源是立體主義繪畫運動的創作。

模糊了藝術中真實與幻象的區別，企圖打破二度平面的繪畫，制造空間虛實的視覺效果。拼貼是一種比較隨性的一種表現，它可以是不具任何意義的，自己覺得不錯就行了。

民國風格，20世紀30年代是民國設計最輝煌的時代，商業與文化劇烈碰撞，漢文化與西方文化融匯，創意、美學表現極其豐富。

品牌名和產品比例最大，信息類文字較小，文字包圍在圖案四周;也有一些廣告將文字置于畫面四周的框框里，色彩不會使用亮色和過飽和性，其版式編排與維多利亞風格非常相似。

第三階段黃金年代。

▽

時代驅使現代，時代變化最大的特征是在于審美與認知的改變，還有一個更重要的原因就是，越來越商業化。

極簡化平面設計風格的核心是圍繞信息內容本身而呈現的，去風格化設計。

設計不再作為獨立于內容之外的元素存在，而將著眼于內容本身，為用戶打造直觀的視覺體驗。

減少干擾，讓信息有效傳達給用戶正是極簡化設計所推崇的，負空間、增加留白，極簡線條、減少顏色以及不必要的裝飾等手段在設計中體現。

孟菲斯風格打破正常的配色規律，使用多種鮮艷明亮的色彩，構圖上大量運用集合線條圖案，運用黑色的描邊結合直線、波浪、3D圖形。

草莓音樂節連續好幾年都是用的這樣的風格，其實跟更重要的原因是輕量化，因為現代碎片化的信息，人們越來越沒有時間或者不想再去看太復雜太有深度的東西，導致了當下輕量化設計的流行。

還有關于倍速播放、輕量化設計、圖像設計更娛樂化更是折射了當下經濟結構、年輕人生活方式、高速互聯的普遍、碎片信息，躺平原因等社會時代因素的縮影。

MBE風格,標志性的人物就是來自法國巴黎的設計師MBE。

一般是以粗而圓的線條勾勒輪廓，這一點類似于簡筆畫，也類似于單線條畫。越粗的線條在表現力方面會越接近可愛感，線條的轉折過渡很圓潤，幾乎看不到尖銳的直角。

填色方面的特點非常明顯，填色的色塊要偏移原有輪廓一些，以此來塑造高光和陰影效果，其實這個風格跟孟菲斯的手法是非常接近的。

立體主義，將物體以不同角度置于同一個畫面之中，表現出對象完整的形象。

立體主義創作的主要特征，即在畫面上將一切物體形象破壞和肢解，然后再加以主觀的拼湊、組合，以求所謂立體地表現出物體的不同側面。就是在平面上表現出二度和三度空間。

畢加索和布拉克就是立體主義的代表性人物。

歐普藝術是利用人類視覺上的錯視所繪制而成的繪畫藝術。因此歐普藝術又被稱作“視覺效應藝術”或者“光效應藝術”。

是利用人類視覺上的錯視所繪制而成的繪畫藝術。它主要采用黑白或者彩色幾何形體的復雜排列、對比、交錯和重疊等手法造成各種形狀和色彩的騷動，有節奏的或變化不定的活動的感覺，給人以視覺錯亂的印象。

歐普平面設計風格就是要通過設計達到一種視知覺的運動感和閃爍感，使視神經在與畫面圖形的接觸過程中產生令人眩暈的光效應現象與視幻效果。

極繁主義，平面設計風格繁瑣、華麗的設計風格，運用大膽的顏色，嘗試各種復雜的圖案，構建迷幻主題。

“有序的混亂”是一個絕妙的極繁設計手法。各種色彩和圖案的重復組合能夠有效吸引觀眾注意并傳達設計信息。但由于極繁設計的前期整理、耗時過長，畫面極其雜，商業操作復雜一些，很多設計師都不愿意去做這樣的設計。

新丑風，能在當今浮躁的社會還能堅持去打破設計規則的設計師高田唯。

有沖突感的顏色、強制變形的字體，還有故意的印刷偏差和奇怪的排版。

這個現在被廣泛以及大量的使用，內行看門道，與其他設計技法和設計模式相比，其省時省事的設計方法也迎合這個更加浮躁求速的時代。

第四階段，多樣跨界和未來

▽

以薩爾瓦多·達利為超現實主義代表，將現實觀念與潛意識及夢的經驗相融合展現人類深層心理中的形象世界。

可以說夢中的世界，也可以說是一種他認為的心理真實的彼岸世界。這個正是最近想做的一件事情，把夢中的場景繪制或者通過合成的方式放到海報展現出來，生活應該是讓設計變得有趣。

隨著計算機技術的發展推動，C4D的普及帶給了廣大設計師新的思路，無論是色彩、光影還是質感都更加絲滑。

酸性視覺的特征就是大雜燴風格，混合了蒸汽波、賽博朋克、超現實主義、科幻未來主義、電子復古、歐普藝術等等的一種融合性設計，組合部分就是鐳射金屬、霓虹色彩、玻璃質感、哥特字體、鋒利的幾何圖形。

由復古迷幻融合到超現實主義的風格，融入了更多“虛無縹緲”和“先進新潮”的超現實主義元素，也是一個在現實中得不到追求的，從夢中獲取精神安慰的風格。

我們將所有關于潮的時代和風格特征全部講完，目的不是講歷史和展現風格技巧，而是要明白我們需要學習的其實有很多，未來的設計一定是集風格與領域精華所長融合下的就是潮的設計。

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》干貨預警 | 什么樣的設計是潮設計？

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

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

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

接下來我會從三個方面來講解如何構建可視化：

• 靈感需要迸發，更需要積累
• 從零到一設計驅動
• 設計度量

一、靈感需要迸發，更需要積累

1.1  數字時代下，99%的問題都是舊問題

數字時代下仍有信息不對稱的情況，尤其是關鍵技術和設計上的問題，但是如果你用心尋找，就會發現你的新問題則是別人很久之前的舊問題了。所以要做個有心人。

但是問題又來了，有時候真的不知道該怎么找、去哪找？這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領域，他是比較小眾的，所以靈感以及素材的搜尋是一個令新手設計師頭疼的事情，再加上對關鍵詞的熟悉程度不夠，導致很多設計師只停留在【可視化】這個關鍵詞里，最后感覺搜來搜去都是見過的圖，沒有新意。

1.2  明確目標，知道自己想要找什么
互聯網信息太多了，漫無目的的找靈感，只會浪費時間，一會看到這張圖好看，一會看到那張圖好看。不知不覺幾個小時就過去了。

1.3  建立關鍵詞詞庫

確定目標后，就要細化關鍵詞了。怎么建立關鍵詞詞庫呢？

關鍵詞詞庫由3部分組成：終端、設計類型、業務類型。

• 終端：大屏、移動端、web 等等。
• 設計類型：每個細分的數據可視化類別都是有一些專有名詞的，比如最近比較熱門的車載HMI系統，那他的類型關鍵詞就是 HMI。通過這些關鍵詞，你會搜到更精準的結果。設計類型關鍵詞比如：AR/VR、HUD、HMI、FUI等等，你要了解你們公司相關類型的關鍵詞，記錄下來。以及跟你們有關聯的，都記下來，補充自己的詞庫。
• 業務類型：智慧城市、生物醫療、監控部署等等。

這三類單獨或組合進行搜索，就會看到更多可視化產品了。把關鍵詞詞庫建立起來后，就可以去常用的網站上搜索了，最好用的還是 behance 和 Pinterest。

1.4  除了常用的設計網站，還有哪里可以看？

企業官網：很多做數據可視化的公司，會在官網展示一些能體現自己業務特點、業務實力的案例，而這些案例就是這些企業最好的數據可視化設計作品了， 所以但凡有案例展示的官網，案列基本都是最典型最好的設計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

1.5  你看到了別人看不到的，設計才能有所不同

總結一句話：你看到了別人看不到的，設計才能有所不同。如果你和別人看到的是一樣的，你怎么比別人做的更優秀？

1.6  興趣推送

經常刷短視頻/新聞網站的應該知道，系統會根據你的點贊、收藏、瀏覽等數據來給你安排后面的內容推送，以保證給你推送更精準的內容。設計網站亦是如此，behance 等網站上也都是千人千面，它會根據你的點贊收藏等來讀取你的喜好，進而推送更精準的作品。所以假設你是一個B端數據可視化方向的，你就經常搜、點贊收藏相關作品，之后你的首頁出現相關內容的幾率也會變大。

1.7  定期清理，更新迭代

最后一點，這個也是好多設計師的通病，收藏即學到。

靈感庫要求精而不是多，每隔一段時間，回來翻一翻自己之前收藏的作品，會發現有些作品自己已經看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現在看來也就會有缺陷和不滿，這是一個很正向的結果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當前審美的作品到靈感庫里。

這樣慢慢完善你的地基，才能更高的向上走。

二、從零到一  設計驅動

講完第一部分，我們開始搭建產品。

我負責從零到一的項目大大小小的得有10來個了，我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期，是可以做到設計驅動的。既然設計可以有足夠的的話語權，你就得規劃好未來的設計走向。

產品初期，經常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設計先行還是調研先行？

這是新項目必須要做的選擇題，再講之前你先想一下，如果是你，你會如何選擇？

我的觀點是設計先行。（當然設計先行是建立在你至少對這個項目的行業有個簡單的了解之后，先設計再用戶調研），為什么呢？因為如果用戶調研先行的話，用戶只會反饋當下最想要的東西，從而有可能給你帶來誤導。就比如我們經常舉的一個例子：汽車出來之前，人們只想要一匹更快的馬。

我們要解決的不是用戶當下想要的東西，而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創造性的項目，往往設計者才是當下最懂產品的人，你把決策權交給一些不懂產品的人，做到最后只能是迷失了方向，鍋還是設計來背。所以一開始設計師要把決策權拿在手中，掌握航向。

2.2  設計先行還是規范先行？

這個問題在現在看來相對比較統一，但有的同學還是有疑惑，所以我拿出來再跟大家聊一下。

首先我的觀點是設計先行，在設計之前就定好規范的基本都是自己YY的，返工率極高。等你在做具體設計的時候就知道之前做的規范都是白費力氣了。一般都會選用在項目完成之后或者主風格及主要頁面完成后再輸出規范，這樣既可以減少規范的改動，也可以保證后面功能延用規范，一舉兩得。

當然了，設計規范不是所有項目都要有的，它是為了減少工作而不是增加工作，如果是一次性項目，就不需要再額外花費精力去輸出規范了，浪費資源~

2.3  完成和完美那個更重要？

現在都是爭分奪秒的時代，任務是無止境的，沒有做完的時候。造成這個局面的無非就是一個問題：時間不夠用。通常的做法就是先完成再迭代，做產品久了你就會發現，完成比完美更重要，不完美你還可以再迭代，完不成就有可能錯過一個風口，從而失去了變完美的可能~

聊完這三個問題，我們在設計的時候也要有一些注意項，真正的做到設計驅動。

2.4  把復雜變得清晰簡單而且美

對于設計師來說，我們的任務就是把復雜問題變得清晰簡單而且美，所以我們應該成為企業和客戶之間溝通的“架橋人”。通過設計的方法，把無形的、復雜的技術，通過有形的、可視化的方式展示出來，讓客戶更直觀、清晰的感受到產品的功能，看得懂其在業務場景中產生的價值。

2.5  轉換視角，建立共鳴

站在客戶視角，聚焦客戶關注的核心問題，通過情景把內容有序組織起來，快速與客戶建立共鳴，有效降低內容理解難度。

2.6  產品架構可以不那么復雜

把復雜的業務/功能簡單化、傻瓜化，最大的降低學習成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內容

B 端項目中內容量是巨大的，面對龐雜的信息，去粗取精，提煉各場景的核心內容，避免冗余信息阻礙內容有效傳達。話術語言不單要簡單易懂，還要嚴格控制文字長度，保證內容可以被快速掃描和理解。

2.8  尊重用戶習慣

不要妄想改變用戶養成的慣性思維，你要記住慣性思維大于設計思維，他的閱讀習慣、操作習慣都是不易改變的，不要為了個性化而嘗試去改變，大部分情況下結果不會是那么的理想，除非你有極大的把握。

2.9  選用合適的圖表

這個是常提到的，我就在這里簡單給大家提個醒。比如做數據對比，柱狀圖更能清晰表達出用戶想要的結果，你卻非要放個酷炫的雷達圖，他的本質目的都沒達到，要美觀有何用？

每個圖表都適合哪些場景使用，像 antv、hicharts 等都有介紹，我就不一一贅述了，我之前也寫過一篇關于如何合理利用圖表的文章，大家有興趣的可以去看一下。

三、設計度量

產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

美與丑也是主觀的，沒有絕對的美，也沒有絕對的丑。一個產品，總會有人喜歡有人不喜歡，但是我們要迎合大多數人的審美。

所以就需要一個方法論來驗證產品的好與壞，現在各大廠都在做自己的一套產品驗證的方法論，阿里在這方便算是國內做的不錯的，我舉幾個常用的度量模型。

• 阿里云：UES
• 螞蟻金服：PTECH與易用度
• 1688：五度模型
  
• 優酷：DES

UES 目前是國內最好的，在 5 月份的阿里設計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧，這么多度量模型，無論他的方法、維度有多不同，但他們的目的是相同的：通過模型來度量設計成果。

• 易用性：易操作性、易學性、易見性 …
• 一致性：整體樣式、通用框架、常用場景及組件 …
• 任務效率：任務完成率、任務完成時間、功能使用率 …
• 性能：首屏渲染時間、API 請求響應時間、頁面請求響應時間 …
• 滿意度：產品滿意度 …

UES 分為 5 個模塊，這 5 項是整個產品生命周期需要驗證的。

關于 UES 我就介紹到這里吧，UES 模型要是展開講的話，半天都講不完，感興趣的話可以去阿里云官方發布的 UES 模型的相關資料中深度研究一下，看看適不適合自己的產品。

上面是度量產品的模型，接下來針對我們 B 端設計師，我們也要有一些指標來度量自己是否合格。

3.1  設計效率

現在內卷盛行的時代，各大廠都在講人效，畢竟時間才是最珍貴的，所以現在都在想方設法的提高人效。而且 B 端相對 C 端來說，可以有更多自動化的工具。

舉個我公司的例子，我剛去的時候基本沒有自動化工具，每個設計師每天也都在忙碌，誰也沒偷懶閑著。但是我發現有很多重復性的體力勞動是不需要多少思考就能完成的，但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效，把一些體力勞動用一些工具來代替，這樣就能釋放設計資產，去做更重要的事情。

當時就做了第一個自動化的工具：設計系統，現在大家對這個詞應該不陌生，但是我們剛開始做的時候比較早，還沒有一些比較完善的設計系統供我們參考，所以我們也算是前幾批摸索設計系統的團隊。設計系統做好后是可以把這1/3 的設計時間節省了下來，而且團隊的規范性更加統一。

后面的話我們也是做了一些其他的自動化工具，比如結合一些插件做到 icon、組件等發布的自動化，并且與研發同學打通，有相應的自動化提醒工具，這樣也節省了與研發的溝通成本。

在工作中，流程上能減少一步就是成功，慢慢來，萬里長征就是一步一步走出來的。

3.2  增長設計

增長這個詞來源于【增長黑客】這本書，顧名思義這個詞的就是通過設計來促進產品增長。

這個詞用在 C 端上比較多，因為 C 端可驗證的方法比較多，見效快，所以我們常見的一些增長設計的案例都是關于 C 端的，而 B 端的話，受限制的因素較多，設計只是影響增長的一部分，而且見效慢。

但是雖說影響因素多、見效慢，我們還是可以抓住機會、多去嘗試一些方法來做到設計增長。我這個方法不行，我就換一種嘗試。大家都是在摸索中過河~

3.3  為業務賦能

所有的設計都是要為業務賦能、為商業買單。我們設計的本質就是為用戶解決問題，讓用戶以最直觀的方式理解產品。不要為了所謂“我認為很美”而與業務背道而馳。

3.4  體驗創新

用戶體驗設計師會越來越重要，近兩年逐步被重視，而且未來幾年會越來越重視。行業內需要更多動腦的人而不是僅僅會動手的人。

現在到了互聯網下半場，拼的不僅是功能，用戶體驗的重視程度已經被提升了上來，在工作中的占比也越來越重。

再加上現在這個超級內卷的時代，你不提升，你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本，你去下家面試的時候都沒有拿得出手的產品。

3.5  善用工具

現在各種辦公類工具、軟件層出不窮，而且很多工具是比較類似的，有的設計師再選工具的時候就很糾結，我認為完全沒必要糾結，首先你要明確我想要達到什么目的，只要某個軟件滿足著你的需求就可以用。

工具是為人服務的，我們的設計軟件從 PS – Sketch – Figma，無論怎么變化總要圍繞一個目的：更高效的完成工作。

尤其是一些自動化工具，現在人工智能升級很快，要多關注設計自動化方面的工具，讓他來解放我們的雙手。

總結

最后送給大家一句話：

這時代唯一不變的，就是變化。

無論你現在多么厲害，不變就被淘汰。

原文地址：友設青年（公眾號）

作者：Luckgg

轉載請注明：學UI網》撕開B端封印，數字時代下的可視化構建

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

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

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

誰心里還沒有那一抹粉紅呢！

  

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》配色驛站-粉色靈感海報

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

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

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

什么是設計語言？

設計語言有哪些？

如何構建設計語言？

01 至簡 光影藝術圖標體系

在一致性的前提下，嘗試簡化、提高識別度。巧妙的將光影和結構交匯，極簡到2個圖層呈現主體；語義清晰識別度高；角度漸變光影帶來舒適親和感，15°x角度的精準把控傳達專業的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。

02 和諧 家族感的色彩體系 

a）標準色

初期直播品牌色繼承百度App品牌色，隨著業務逐漸中臺化，需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調，更能體現親和有力的產品氣質。

03 考究 新穎獨特材質

 

 

寫在最后

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

作者：文娛平臺用戶體驗

轉載請注明：學UI網》輕奢格調｜構建百度直播平臺設計語言系統

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

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

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

上面這種是單色彌散效果，而且還帶有一些噪點紋理。

這種思路是通過一邊往外延伸，然后慢慢消失的過程。

案例實操#1

這里快速給大家演示幾種思路，基本上實操一次就會了。

第1步：先準備一個基礎的版式，因為彌散光感一般都是以背景的形式出現在畫面中，能起到氛圍渲染作用。

第2步：準備制作彌散漸變，這里以單色來舉例。首先制作第一層漸變，具體參數值，大家領取源文件慢慢查看。

第3步：制作第二層泛白漸變效果，目的起到綜合的作用，顏色過渡自然。

案例實操#2

第1步：先準備一個基礎的版式

由于這里所需要的彌散效果較大一些，因此這里模糊值需要在ps里面處理，首先畫一個圓形，然后使用高斯模糊；然后將其復制一層，然后添加雜色，最后兩層疊加起來，就得到如下效果。

案例實操#3

第1步：先在ps里面繪制兩個基礎的圓形，一個大圓和一個小圓。

第2步：然后分別將大圓和小圓使用ps模糊畫廊里面的移軸模糊效果，再將兩者疊加起來，就得到如下效果。

當然還可以疊加很多層，效果也很細膩。

除了圓形，我們還可以玩出其他花樣。

今天分享就先到這里，大家下去可以拿著源文件 自己在玩一下 彌散光感，可以研究出不同的效果。

01.  字體素材 

@叁月，適合圣誕使用的手寫英文字體

f

02.  圣誕素材 

@叁月，圣誕節設計素材大合集

f

03.  樣機素材 

@是瑩瑩啊~，海報拍攝場景樣機

w

04.  樣機素材 

@耳東，VI場景樣機

e

05.  字體素材 

@耳東，圣誕節字體素材

t

06.  海報素材 

@素箋書，酸性漸變元旦跨年3天倒計時海報

e

其實在說柵格的使用，我們就在討論網頁當中的布局方式，以及他們之間的不同點：

0.網頁的布局方式：

布局方式，本質上就是去處理窗口寬度與網頁內容的關系。

用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網頁內容究竟應該如何去適應這些窗口尺寸？

通常會分為：固定布局、流式布局、自適應布局、響應式布局。

1.固定布局（Static Layout）

固定布局是一種最為簡單的方式，它的設計邏輯是將頁面當中的內容 “寫死固定” 在屏幕上，內容不會隨著本身窗口寬度進行改變，所有元素都使用 px 作為基礎單位。

當然在固定布局當中，窗口大小與頁面內容會存在兩種基本關系：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條。

固定布局的好處是這種方式相對簡單，只需將頁面設計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關問題）。

固定布局通常出現在 老舊的政府項目、網頁的登錄注冊中。

2.流式布局（Liquid Layout）

流式布局是最基礎的變化布局，它的設計邏輯是將頁面當中的元素設計成可以流動的 “水” ，通過在頁面，設計不同的“杯子”容器來裝下頁面內容。

這里的“水”一般指的是 文字、圖標、以及一些頁面重復出現的元素。而杯子通常是我們設計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等…

因為“杯子”的限制，也就導致水會根據杯子的寬度進行延展流動，進而形成流式布局。

使用流式布局可以通過較低的開發成本，來實現一個頁面當中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難。

而流式布局最常使用的方式就是通過柵格系統，來確定整個“杯子”的寬度，進而讓“水”能夠在頁面當中實時滾動展示。

這里有兩個需要注意的點：

1. 在研發層面，杯子的大小是需要進行限制的，通常會去設定它的最大值與最小值，當它超過最大值則居中對齊，當他在流式布局當中，窗口超過其最大值則固定左側，右側空白補充；窗口小于其最小值則展示橫向滾動條。比如與上方同樣的案例，將頁面當中內容的文字實現成流式布局，并且將其流體布局的寬度限制為 200px – 120px ，這時則會形成頁面的寬度變化，會導致內容發生直接的變化
2. 流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “…” 進行標注。這個思路后續在響應式布局當中也會體現

3.自適應布局（Adaptive Layout）

自適應布局是將差別較大的屏幕尺寸，去創建多個不同的設計稿，每一個設計稿去對應 一個用戶實際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設計方案。

通俗一點來說，自適應就是去單獨設計桌面端、平板端、移動端的頁面，并且將它們三者進行獨立，而系統通過不同尺寸間的 屏幕斷點/瀏覽器UA等…（實際前端判斷遠比這個更加復雜，但是為了方便理解可以暫且這么認為），進而適應出不同的設計頁面。

而通俗一點來說，自適應是使用多套代碼去對應多個頁面，并且都是在業務非常復雜的情況下進行使用，在國內當中最常使用便是 桌面端與移動端 的產品。

比如 語雀 當中的 桌面端與移動端就是一個典型案例，他通過判斷用戶的使用設備，將頁面拆分為了，桌面端、移動設備端、小程序（單獨設計適配的）。因此只需要將每種設備的設計思路分析清楚即可。

自適應布局與柵格

自適應主要是表達多個設備尺寸下進行切換的 布局方式，在不同的設備之間，也是需要去使用流式布局以及其他布局方式。

而不同的設備之間，屏幕分辨率的差異就會涉及到一個關鍵點，屏幕斷點。

屏幕斷點

屏幕斷點，又叫媒體查詢 @media，因為在整個設計當中，屏幕尺寸是極其復雜的，除了我們常見的尺寸：1920*1080、1440*765、1366。

用戶還可以通過調整窗口的大小，進而改變網頁尺寸。而屏幕斷點，最主要是判斷屏幕的寬度，來確定 目前的尺寸究竟應該采取什么設計方案。

比如在設計一款成熟的B端產品時，因為商業的緣故我們作為各大平臺（釘釘、企微、飛書）的ISV（合作上架），產品上架到不同平臺時，需要對不同平臺尺寸進行調整，比如釘釘為1024px、企微為980px、飛書為1280px，這時為了滿足用戶的實際場景，會將這幾類特殊的尺寸作為屏幕斷點進行對應的布局設計，以滿足不同產品當中的最佳實踐。

關于屏幕斷點的媒體查詢，是在前端 CSS3 代碼當中，提供給用戶校驗整個屏幕的寬度，比如在下圖前端代碼當中，則代表在屏幕尺寸小于480px 時，使用 字體大小為16px。

而確定斷點才是這其核心，這里給大家提供兩個思路，實際設計當中還會更為復雜：

• 物理斷點：也就是屏幕當中，已經劃分好的斷點方式，比如顯示器的全寬大小、不同設備之間的屏幕分辨率差異
• 設計斷點：在設計過程當中，一些必要的屏幕尺寸。比如上方講到不同平臺的設計問題

其實屏幕斷點不是最終目的，最終還是想通過屏幕斷點，將頁面當中不同的不同元素的處理方式實現在設計稿中，如果不需要，完全可以不考慮增加屏幕斷點。

4.響應式布局（Responsive Layout）

這里先多聊一句，其實響應式的大規模普及，是源自 2015年 Google 的倡導（可以看到Google旗下的很多產品都采取的響應式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應式在移動終端上的運行效率。因為在2015年時，安卓 生態下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運行并使用。

響應式布局是確保一個頁面當中所有的設備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產生的一種技術方案。它更像是 流式布局與自適應布局 的結合，它能夠通過對屏幕尺寸的快速響應，進而對頁面的內容進行更為細致的變化。

通俗一點來說就是通過一套代碼去實現多個頁面，并且將多個頁面的內容進行細化，進而能夠快速適配多個設備。

對于多個設備，最主要是調整頁面柵格數量、水槽寬度、頁面距進行適應，比如在YouTube當中，就是通過響應式布局，讓頁面實時響應進行處理。

響應式布局與柵格

比如以 Ant Design Pro的頁面進行拆解，你會發現它在 575、767、991 的尺寸中，頁面布局發生變化，然后根據屏幕斷點之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為320、576、768、992、1200，響應策略如下圖：

布局與柵格的關系

你會發現布局其實是依賴于柵格，而柵格的使用，正是由于不同的布局所導致。只有通過柵格，才能夠確定流式布局的比例、響應式布局的變化方式，但是在B端產品當中，并不是所有頁面都需要使用柵格，經?？吹揭恍┳髌芳鋵嵤菫榱藮鸥穸鴸鸥?。

在B端產品當中在，真正使用柵格的地方更多是工作臺、官網，而其他相對復雜的頁面是沒辦法使用柵格，而對我們每一個產品而言，可以優化的點就是在屏幕尺寸較小的情況下，默認讓整個產品導航菜單收起，以提供給用戶更多展示內容。

原文鏈接：CE青年（公眾號）

作者：CE青年

轉載請注明：學UI網》B端設計指南 – 柵格的使用

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

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

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

音磁是中國首個說唱音樂AI創新產品，面向18-25歲年輕用戶群體的潮酷嘻哈興趣社區。作為一個從0到1的產品，設計師通過電磁視覺風格和典型嘻哈的故事化IP角色，來締造說唱文化深度，快速孵化APP。

設計思路

本次設計目標，聚焦說唱文化，對說唱文化進行深入的探索思考，通過風格化的設計語言賦予產品個性、確定產品調性。創建故事化IP角色，引起嘻哈用戶共情，幫助音磁打造年輕化、記憶點和競爭力的品牌形象。

1、風格化視覺語言 提煉視覺符號

2、故事化IP角色 樹立品牌形象

風格化設計語言

電磁風

a.前期調研

項目啟動前期，我們對說唱文化、競品App、綜藝節目品牌、聲音可視化品牌運營等案例調研分析，說唱文化凸顯個性，極具潮流特色，結合項目立項資料。得出以下結論：

b.情緒版表達

從調研分析中尋找共性，歸納總結符合產品調性的視覺調性，擴展出一些說唱圈情緒關鍵詞：潮酷、大膽、個性，并且分方向進行設計風格探索。推演出音磁產品的設計語言，簡潔平面電磁風+潮酷涂鴉個性化。

c.電磁風視覺符號

基于產品情緒版關鍵詞：潮酷、大膽、個性，探索視覺符號。結合產品名稱音[磁]，以電磁為視覺符號語言貫穿整個產品以及品牌設計中，凸顯潮酷的氣質。

d.視覺設計語言

將簡潔平面電磁風與潮酷涂鴉個性氣質融合是音磁視覺語言的重要視覺呈現方式。倡導“簡潔、易用、潮酷”的設計理念，通過電磁風的視覺風格，來締造說唱文化，拉近與核心用戶的距離。

① 品牌LOGO

LOGO的設計從多個方向：音符、圖形、文字、字母等進行多方案的探索以及評審，最后和業務&設計團隊達成一致確定了最終的品牌標示，以字母“CI”為主進行圖形化設計，好記易識別。

標準圖形：形狀來源于音磁中“磁”的拼音『CI』，利用類似「過電」「故障」「重疊」的圖形處理，視覺化了“磁”的感受。我們把『CI』字形往前傾斜了10度帶來一種速度感，綠黑白的顏色搭配讓它在眾多logo中有較強的識別度和記憶點。

標準字：延續LOGO的速度感，如傾斜度、尖角、筆畫粗細，提煉加入電磁符號，呼應logo圖形，強化超級符號并應用在界面中。LOGO整體傳達出年輕、時尚、不羈的感覺，符合音磁嘻哈社區的產品定位。

② 品牌色

黑+綠大膽配色，酷炫十足，釋放潮流激情，綠色-年輕有生命力。

③ Icon

功能性圖標在一致性的前提下，圓角化處理，提高識別度、親和度，保證易用性，結合品牌色，夯實品牌調性。

④ 圖形

個性化磁力禮物的設計采用涂鴉貼紙風，滿足說唱圈文化圈層喜好，凸顯說唱應用產品的個性。

故事化IP角色-磁哥

IP形象能讓用戶快速建立品牌聯想與品牌識別，IP的融入可以增加產品的情緒溫度，使其產生共情，共情力才是IP能成功的最關鍵屬性。產品中增加一些代入性、趣味性的情感元素，讓用戶在使用的過程中更愉悅。

我們深入研究說唱文化圈層，挖掘用戶喜好，用故事化角色拉近距離，提煉可視化關鍵詞：涂鴉貼紙、臟辮、說唱、潮流、個性等。賦予角色性格、喜好、身份。設定了一個異于常人的個性化小綠人角色（初代版本）。

IP在產品應用中，關注用戶使用情緒，緩解焦慮、等待的情緒，結合趣味性的潮流話術，引導積極正向情緒，來制造生動有趣的氣氛。

升級版IP角色，頭部結合品牌圖形加入電磁超級符號，使其更超酷靈動。下圖為音磁專屬特色表情。

總結

在用戶調研報告中，音磁的設計風格滿意度為4.23分（滿分5分），得到了說唱圈用戶的認可。作為一個從 0 到1的品牌，音磁的設計語言依然在不斷的打磨、優化。極具特色的品牌調性能夠確保產品、運營各環節的視覺設計更加統一，助力業務的發展。做一款新產品-風格化的設計語言，可以快速吸引目標用戶；故事化IP角色，引發用戶共情。

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

作者：文娛平臺用戶體驗

轉載請注明：學UI網》音磁APP-電磁風說唱社區

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

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

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