我們在去做這種類型的風格時，要學會總結，機能風的海報版面雖然整體呈現較為復雜的效果，但如果仔細觀察，基礎的元素都比較簡單。

大家在做之前可以去先總結，通過觀察這類作品可以得到以下元素，比如：

01. 電子元件/芯片

02. 機械感元素

03. 不規則標簽

04. 警告符號，裝飾性符號等

05. 黑白灰及熒光色的搭配使用 

然后我在準備教程案例就開始畫呀畫，畫了蠻多適合應用在機能風格海報中的元素，最后干脆想了一下，那就索性把所有的畫完，源文件都送給大家吧…

教程突然就變成了素材分享…

下面我們來先看一下本期分享的素材，總共分為四個部分，每個部分的形狀細節都有不同的差別。

但是下載素材只是第一步，很多同學平時電腦里也攢了不少素材了，誤以為收藏等于學會，下載等于精通…

設計畢竟是個手藝活，還是要動手試試才知道怎么使用。

01、首先我們從我給的素材里面挑選幾個元素，我這里選擇了三個，大中小。

02、人物摳圖后，先觀察一下，人物本身自帶了黃色的輪廓光，那么主色我們就盡量要選擇黃色了，畫面才會有合理性。

03、這一步就是將圖形按照較為平衡的構圖方式進行放置，可以和人物有適當的疊壓穿插關系。

為了避免圖形太過零碎，強烈建議大家可以先以一個大色塊為主，可以避免主體散亂。

04、接下來將文字信息進行空白處放置，注意這里比較主要的信息就三塊，人名，活動名稱，時間地點，編排上主要突出這三個部分即可。

多余的裝飾性英文信息適當縮小，起到一個點綴的作用就可以了。

05、最后添加一個紙張褶皺的效果，因為我元素及色彩處理的比較簡單，所以加深質感的處理，可以讓海報更有層次感。

接下我們看第二個案例，這個案例我打算使用元素拼接的方式讓畫面更整體，細節可以適當處理多一些。

01、老規矩，開始挑選圖形元素…

挑元素的過程確實是…太爽了，怪不得大家這么喜歡素材，盡管素材是我一個一個畫的，但是我挑的時候也感覺…太方便了…

這里我順便將元素組合了一下并且加了個顏色。

02、如果只是在畫面中間這樣放置的話，四周缺乏呼應的元素，所以大家可以根據已經選好的圖形特征自己簡單畫一些。

效果如下，是不是感覺完整性好多了。

03、然后圖片放置進圖形中，圖片整體也是呈現紅色調的，所以整體的色彩和元素我已經用了紅色，那么建議重點的信息在這里都用白色，可以簡單做一個色彩突出的作用。

無論裝飾元素和文字有多少，最終還是要想辦法突出重點信息，這兩者本身并不沖突。

看第三個案例，先選元素。

01、順便選一些簡單的圖形裝飾元素，比如箭頭條形碼等。

02、這個圖片本身已經蠻好了，底色也很簡單，所以我不打算摳圖了。

03、接下來注意觀察圖片，底部有大量的黑色，所以我們的標簽部分可以直接放圖片下方就可以了。

其余文字環繞人物進行編排即可。

04、正在這個案例中，我想添加一下類似毛玻璃和磨砂的效果，增強圖形的質感。

05、按照這個方法，我為其他地方也添加了這樣的磨砂效果，下圖為最終效果。

01、看第四個案例，先選元素。

其實我個人還是更喜歡這種帶圓角的感覺，感覺有點高端的樣子…

02、將元素和人物圖片進行合理構圖，其實就是控制每個元素的大小和位置，放置他們的錯落感，保證人臉不要被色塊遮擋，文字信息順便也放置進元素中即可。

03、還是按照上個案例做磨砂效果的步驟，我們再加幾處磨砂效果。

下圖為最終效果。

04、注意這里的磨砂效果除了加描邊，我還加了投影，讓整個畫面的色塊錯落有點縱深感。

01、第五個案例我們換一下人物…一個題目做了四個案例,估計大家已經看膩了…挑幾個圖形元素。

02、我們將圖片和元素做一下結合處理，人物的部分我做了錯位的處理，有點視覺迷幻的效果。

人物名字放置圖片頂部即可。裝飾性文字可以適當的跟元素做一個整體排版處理。

03、最后，老方法，再加幾個磨砂效果，你別說…這個效果確實有點上頭，普通人受不了這種誘惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

01、第六個案例，還是…

挑幾個圖形元素…

02、人物圖片本來是這個樣子，背景是白色，不好處理整體的色彩變化，而我…也不想摳圖…

所以在ps里加了一個漸變映射效果。

03、圖片用一個元素，標題用一個元素，這樣就做好了構圖排版處理。

04、但是到這一步，畫面還是會有點空空蕩蕩，填充一些呼應的元素即可。

最后，再加入紋理的效果疊上去就可以了。

01、第七個案例，挑幾個細節較為復雜的元素，這次我們是單獨拿來做背景使用。

02、為了做出層次感，可以給色塊適當添加漸變色和投影，有點立體的效果會更好，因為本來就都是偏白色的，沒有投影和漸變的話效果不明顯。

03、重點信息我們就用以復本來的顏色就好，可以多一點裝飾性元素作為點綴，不然白色的背景還是有點空，有一些點線面的變化版面會舒服一些。

04、最后…

再加幾個磨砂玻璃效果…

這次我是真的膩了膩了…

01、第八個案例，元素選好之后，我這里直接處理了漸變的效果，作為背景，有了一點質感。

02、黑白的人物放上去就很適合，這一步我們就搞定了背景和人物的畫面整體處理。

03、然后將文字編排進畫面中，但是整體除了黑就是白…

顏色有點太單調了，所以我們要換換顏色。

04、這個顏色…

就…

挺好…夜店風的感覺…

最后來放一下合集

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

作者：王猛奇

轉載請注明：學UI網》科幻機甲風格海報怎么做？

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

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

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

品牌價值“藏品化”的可能性

通過對阿里云用戶調研發現，數字藏品這項技術有著廣泛的用戶認知基礎，有91%的阿里云用戶對阿里云推出數字藏品感興趣，其中81%的用戶比較感興趣及非常感興趣，40%的用戶曾經購買過數字藏品。這項結論讓設計師們非常興奮，這就意味著利用數字藏品傳遞阿里云品牌價值存在確實的可行性。

致敬里程碑 

設計師和業務團隊就數字藏品的設計方向進行了多輪溝通和論證，以阿里云飛天5K紀念碑為表現形態的思路脫穎而出。

出發點是設計師們想借此項目重塑營銷品牌心智，回到“為了無法計算的價值”阿里云品牌主張，用“飛天5K紀念碑”這個開發者心中的圖騰，在網站上進行數字藏品與任務平臺的聯動，通過創意與品牌為業務帶來用戶增長價值。

回溯歷史，阿里云飛天5K是阿里云計算技術發展的一個里程碑，飛天5K集群上線是中國云計算最值得紀念的時刻，代表了中國云計算技術人勇敢追夢、追求極致的理想主義精神，其在用戶心中的意義不亞于一次成功的“登月”，這種寄托已經成為阿里云品牌的核心資產之一。

因此選擇云計算開發者的精神圖騰——“飛天5K紀念碑”作為創意原型，進行數字藏品的設計，進一步拉進與用戶的距離，同時能在開發者圈層中打造心智，營造傳播聲量，鏈接阿里云品牌與用戶間的情感共鳴。阿里云首款數字藏品讓用戶充滿期待，用戶關注的將不僅是藏品的使用價值或增值價值，更多的是一種不可替代的情緒價值。

業務目標的自然融入

〇 破圈裂變組合拳

在整體方案設計上，團隊將拉新的核心目標和飛天5K數字藏品做了深度結合，利用「阿里云IP品牌價值+首發造勢+大促氛圍+精準的種子用戶裂變+所見即所得的虛擬權益」的超強組合拳，構建了完整的爆點傳播鏈，帶來規?；略鲇脩?，完成了一次成功的破圈嘗試。

〇 多端聯動引發爆點

通過所見即所得的虛擬權益，突破用戶預期，引發了活動參與用戶通過微信群、朋友圈、微博、論壇等各種平臺的自傳播，形成穩定裂變鏈條，吸引更多玩家參與。同時官方通過阿里云App、官方微博、鯨探App、鯨探小程序形成流量矩陣為活動背書，引爆活動傳播。

用戶因情感的喚醒，通過數字藏品活動自然的完成了對阿里云產品的了解，并在主會場產品力彰顯、爆款價格吸引下，成為了阿里云新用戶，幫助業務完美的完成了既定目標?；顒觾H僅上線6天即完成一萬份數字藏品的發放，首購ROI達到58，同比上一次奧運小寶的拉新活動提升230%。

未來之路 

數字藏品未來將成為阿里云傳遞品牌價值的重要載體，更多承載了中國云市場情感的作品將定期與用戶見面，逐步形成阿里云獨有的云數字藏品矩陣，賦能云業務的發展。

原文地址： 阿里云設計中心（公眾號）

作者： 阿里云設計中心

轉載請注明：學UI網》B端營銷創意｜數字藏品能否成為B端業務力爆發的新介質？

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

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

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

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

優先考慮重要的內容，在頁面中保持重要的信息占比更大、更明顯。

為了讓用戶能夠快速看到關鍵信息，可以通過滾動的交互方式和指導性的按鈕設計，幫助用戶找到他們想要的信息。

?▲ 例如《紐約客》網站的布局設計，在中間位置優先展示最重要的資訊，突出重點，網站兩側的資訊展示相對弱化。

二、保持合理的視覺層級

頁面中清晰的層級結構對用戶來說也很重要。通過打造明確的視覺層級結構，頁面內容的主次關系會更清晰和合理，方便用戶更容易理解頁面信息。

▲ 在Netflix影片詳情頁的布局中，保持了清晰的視覺層級關系。跳到詳情頁后，我們首先會看到頁面頂部的預告片和大尺寸的白色高亮播放按鈕，然后是關于影片的介紹和其他功能。

三、使用非對稱布局

對稱布局和非對稱布局在日常設計中都很常用。對稱的布局能夠讓頁面看起來更加統一、整潔，但也導致頁面效果缺少對比，效果單調。

非對稱的布局剛好可以彌補這個缺點，在保證排版整齊的基礎上增加頁面的對比關系，讓頁面看起來更有吸引力。

▲ 例如在這個網站首頁中，左圖右文的非對稱布局設計讓整個頁面看起來更有對比性和沖擊力，快速吸引用戶的注意力。

四、使用間距

通過間距，能夠將頁面中不同的版面和內容劃分出來，讓頁面的布局更豐富。

同時，通過調整間距的大小能有效區分內容間的關聯程度。例如，同一組信息采用間距小的布局方式，讓內容的關聯更緊密。

▲ 在Instacart頁面中，上下有兩種不同的布局方式，通過增加間距，讓頁面看起來更清晰。

五、打破統一的布局

過于統一的布局方式會讓頁面看起來很單調，無法突出重點。

如果想讓頁面中的某個內容吸引用戶的注意力，可以嘗試在打破一致的布局情況下，讓頁面看起來更有節奏。

▲ 在Airbnb網站中，圖1、2和5采用了相同的尺寸，圖3和4打破了統一的布局，讓頁面看起來更有動態感。

六、使用網格

網格系統是使用網格作為輔助，進行頁面設計的方式。通過使用網格系統，可以更準確地定義頁面的布局。

當然，網格不僅能用在頁面布局設計中，在其他類型的設計（海報、畫冊等）中也常用到，是非常值得設計師學習的系統。

七、保持對比

在設計頁面的布局關系時，要盡可能做到圖文搭配，保證既要有文字、按鈕等元素，也要有一定量的圖片，讓頁面保持對比性。

▲ 例如這個網站首頁中，左右兩部分采用了一致的布局方式，以圖片作為背景，文字和按鈕等元素與背景產生對比，提高頁面的沖擊力。

最后

通過這些實用的布局技巧，希望能夠幫助你設計構建出更好的界面布局~ 對界面中內容的劃分和信息的掌控帶來進一步的提升。

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

作者：Clippp

轉載請注明：學UI網》在UI布局排版中，讓界面快速出彩的7個技巧

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

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

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

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

圖片來源于網絡，版權歸作者所有

一、幾何簡史課 

歐幾里得常被稱為“幾何之父”，因為他寫了一本叫《幾何學》的書，這是數學史上最有影響力的著作之一。

幾何圖案來源于幾何學，幾何學是數學中對形狀和線與面之間關系的研究。圖案被定義為“重復的裝飾設計”。

在設計中，幾何圖案反復使用形狀和線條來創造引人注目的設計。幾何圖案非常適合用于設計，因為從本質上講，我們的眼睛自然會被它們吸引。通過將幾何圖案與合適的顏色相結合設計引人入勝的視覺內容。

世界內外的一切都可以通過數學來推斷和理解，這正是許多文化將幾何視為神圣的原因，從一開始就被人類直觀地使用和理解。

因此，幾何形狀和圖案在藝術和設計中具有很大影響力。從伊斯蘭藝術到包豪斯運動、立體主義、裝飾藝術等等，幾何圖案一直并將繼續在設計中發揮關鍵作用。

我們可以將幾何設計用于從品牌到產品、插畫、網站、應用程序設計等等的任何設計中，下面帶大家看一些幾何圖案在不同設計環境中的運用案例。

二、幾何在設計中的運用 

1、平面設計

雜志封面設計結合了三角形和充滿活力的各種配色，創造出炫酷的圖案，色彩繽紛的效果。

平面設計師 Atul Charde 設計的長途汽車，展示了幾何圖案可以很好的吸引人的注意力。Charde 還結合了黃色、橙色、海軍藍和白色的配色，創造出一種正在忙碌行駛的感覺，很生動形象的體現了長涂汽車的概念，十分契合產品。

幾何設計也非常適用于包裝上面，用簡單的形狀組成復雜的圖案來包裝產品。

這瓶酒使用簡單的線條來創造一個有趣的幾何圖像。這是一個很基本的設計方法，但通過巧妙地結合顏色填充幾何形狀，設計感就出來了。一個復雜的圖案就是由一個簡單的圖形組成的。

盧塞恩紐巴德俱樂部音樂會系列海報，用繪畫與幾何的結合，表現了音樂的非常規和自由特點。

閃電形、星形、三角形表達音樂的激烈抑揚頓挫感；圓形、傳達音樂的平靜、緩和感；自由筆觸有序直線，傳達音樂的有序、綿長感。

2、品牌

Nymble 健康套盒品牌視覺提取品牌首字母“N”與人奔跑時的姿態結合，雖然是簡單的幾何線條和點，卻非常有動感，簡潔而傳神。

品牌延展部分是對品牌標志更進一步的理解和演繹，沿用了標志中的點、線元素，通過對點與線的位置、距離、粗細、大小的調整，構建出一整套可變的網格圖案。

涉谷時裝周2020-2022的視覺設計用圓形幾何化的視覺語言，將SFW2020組合成圖標，并拆分重組成為輔助圖形，運用到畫面整個體系中。從2020-2022，通過不同視覺展現不同的視覺風格，2022的工業鬼馬感、2021休閑時尚感、復古都市感。

玻璃質感和幾何圖形的結合完美詮釋主題，體現宏大精致的美。元素簡潔，通過細膩的質感增加豐富的對比。

這是一款國外的披薩品牌的logo設計，特別之處在于logo的名字和圖形看似分開，實則是用一個郵票作為一個整體。圖形的人物是一個由幾何組合，用黃金比例切割出年輕媽媽的樣子。

這是國外的一個茶飲品牌的包裝設計，插畫的人物服裝和植物元素是當地人的特點，設計師將這些具有豐富變化的民俗服裝用幾何圖形有規律的重新組合。

通過將復雜的事物用幾何有規律的概括后，再通過合適的配色，呈現的整體設計感很強。同時在文字以及裝飾框上，也統一用了這種具有民俗風情的風格，在字體上也會用幾何作為流蘇一樣去代替字母一部分的筆畫。

3、插畫

簡單幾何元素拼綴出的人物、場景，色彩上深淺深的對比，圖形上方圓方對比增添了畫面的呼吸感和視覺沖擊力。

這種風格的插畫區別于以往的插畫風格，整體是幾何體和不規則形狀組合而成，噪點的運用和顏色的搭配完美，夸張的手法，大膽的設計讓它脫穎而出。

無論是簡單的圖案還是復雜的圖案，幾何設計都可以完美地制作出引人注目的壁畫。

4、網頁設計

這個網頁運用極細的線條，規則的塊面，將界面的功能展示區域分明，簡約不失嚴謹，傳達出品牌的專業度。

B端設計的頁面采用圓角卡片，以及大規模幾何體使用，界面立體感和層級感比較突出，立體幾何插畫的表現效果很好可以在UI中運用。

配圖用三維幾何體，搭配很年輕化的色彩風格，顯得畫面感很強。整體色調很舒服，界面干凈整潔，很年輕。

這組網頁設計首屏融入幾何元素包裹著主圖，靈動多變的幾何裝飾打破慣性的設計思維，創造出新奇的視覺效果。

這個體育網頁頭部使用紅色和黃色，運用對比色，視覺沖擊力強，使用三角形和異形，簡單的幾何圖形，營造頁面的空間感。

背景采用柔和的微漸變點綴淡淡幾何圖形，既不會喧賓奪主分散用戶的注意力，又可以避免純色背景的單調。

5、UI設計

這個綠植商店頁面采用大圓角搭配圓潤的線性icon，用幾何拼接形式表現插畫，整體風格自然簡潔。

這個醫美產品的UI設計，按鈕和產品的背景沿用同類型的幾何圖形，類似超級符號的存在，加深品牌印象的同時，打破常規背景圖的形態，使頁面充滿生機活力，貼合醫美產品賦予肌膚青春活力的初衷。

從畫面感來看，有點像游戲或者娛樂產品風格的界面。背景用很多幾何元素符號，畫面感很活躍。

這組啟動頁設計，通過人物和幾何圖形穿插，突出人物主體，拉開主體和幾何形的層次感；并運用色彩疊加的方式，畫面更具青春、趣味和視覺沖擊力。

這是一款體育運動場館預訂的產品，用幾何形狀表達不同的運動，簡約又生動，也與整體高級感匹配。

幾何插畫設計風格，頭部卡片像一個抽象的人物，整體風格偏年輕化，卡片和背景生動有趣不單調，顏色多彩充滿活力。

三、最后 

今天的分享就到這里，期待每天一個小知識點，可以給你的設計路上增加一點點能量。

作者：叮當貓

轉載請注明：學UI網》P了兩個圓，價值800萬？

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

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

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

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

先看看這套數據可視化的吧。這套文件里面的數據組建跟配色都非常的豐富，而且耐看，光是吸一吸里面的顏色，都會讓自己的稿子精致不少。

篇幅原因截圖就不一一展開了，這套素材規范嚴謹、組建豐富、色彩配套較多，層次分明，比較適合從事Web端、產品工具型、Saas后臺、偏向于B端的同學。

親測用起來還是有效果的，推薦大家使用。

接著給大家看看第二套素材，這套素材主要是移動端的APP設計，適合于從事C端、偏向于業務設計的同學。

整體風格很簡潔，顏色很高級，看著就很舒服。

所以如果這套素材下載下來，直接拷貝圖層的顏色、陰影、還有風格化樣式，可以讓自己的稿子高級不少。

反正我特別喜歡這套素材里面的彌散投影，右鍵直接拷貝圖層樣式參數，就能讓我自己的稿子，一樣擁有這么高級的投影樣式啦。

案例很多，就不展開一一給大家看了，確實好用。

一、高端

視覺調性高端的色彩，通常具有明度低、飽和度低、顏色數量少等特點，所以很多高端的設計都會以深色作為背景色，因為深色更顯低調、更具神秘感，所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。

二、科技

想要表現科技感，色彩的整體調性通常會偏冷色系，明暗對比要強，且通常會使用漸變色。比如以深藍色到藍色的漸變作為背景色，然后用高飽和度、高亮度的青色和紫色作為輔助色，這時這些輔助色就會非常的跳躍，具有一種發光的效果。

三、時尚

其實所有調性的配色都應該要盡量時尚一點，即使是想表現復古，也不能太土，所以這里所說的時尚特指偏向年輕、潮流的時尚。這種色彩通常具有飽和度高、明度適中、色相對比較大等特點。蔥爺這里概括了兩類，一類是以純色作為背景，這種色彩比較適合于品牌設計、網頁設計、畫冊設計等；一類是以漸變色作為背景，這種色彩比較適合于電商設計、廣告設計等。

四、酷炫

酷炫是指那種視覺效果特別張揚、甚至是極具個性的色彩搭配，比如近幾年比較火的蒸汽波風格、酸性風格、賽博朋克風格、故障風格，其色彩就屬于酷炫類的。該類設計通常也是以深色作為背景，圖片元素會使用高飽和度且對比很強的漸變色，色彩相對較多。

五、好吃

即讓人感覺很有食欲的色彩搭配，這種色彩通常以暖色為主，比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業；而飽和度較低、明度較高的色彩組合通常用于甜點、飲料等行業。

六、夏天

目前正值火熱的夏季，所以蔥爺專門整理了一些適合表現夏季的好看色彩，該類色彩通常會以藍色、青色、綠色這種冷色系最為主要顏色，然后以黃色或紅色、白色作為輔助色，這種色彩組合會給人清涼、快樂的感覺。

七、清新

小清新的視覺感受為輕松、柔和、淡雅，要達到這樣的效果，顏色的明度通常是比較高的，飽和度偏低，常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等，在奶茶、女性護膚品的相關設計中比較常見。

八、快樂

快樂是張揚的、是活潑的，所以快樂的色彩飽和度較高、明度不會太低、色彩的種類會比較多，通常也是以暖色為主，但是會搭配冷色一起使用。黃色具有很強的快樂、陽光屬性，所以想要表達快樂，黃色通常是少不了的。

九、可愛

跟兒童、年輕女性相關的設計，通常需要表現出可愛的調性，這類色彩通常是用冷色和暖色相互組合，顏色的明度同樣不會太低，否則會有壓抑的感覺，另外飽和度也不要過高，飽和度稍低一點效果會更柔和一些。

十、健康

想到健康我們立馬就會想藍天白云、青山、綠色的草地和樹葉，還有黃色的小野花等等，所以藍色、綠色、青色、黃色、白色都是常用于表現健康的色彩，紅色也可以偶爾作為點綴色加進來。由于健康的調性也是要給人一種舒適、輕松的感覺，所以整體的顏色明度不要太低。

十一、運動

要想讓色彩動起來，對比一定要強，可以是色相對比、也可以是明度對比和飽和度對比。橙色和黃色是兩個很具活力的的顏色，所以常用于表現運動的設計里。

十二、科幻

這是一些科幻電影、機動游戲的海報設計常用的色彩搭配組合，給人的視覺感受是穩重而大氣，科技感和神秘感并存，所以背景色通常也比較暗，喜歡用青色和黃色這種比較亮的顏色作為點綴。

十三、喜慶

在設計節日海報或促銷海報時，通常需要表現出喜慶的調性，有些設計師會局限在大紅色、黃色、和橙色里，這樣搭配出來的色彩容易土，而想要解決這個問題，一方面可以加入冷色搭配使用，另一方面顏色的飽和度和亮度也不要過高。

十四、復古

這類色彩的特點是顏色的飽和度會相對低一點，而且大多數情況下，整體的明度通常也不會太高，常用類比色搭配和對比色搭配。

十五、中國風

具有中國風特色的顏色和色彩組合有很多，蔥爺這里僅列舉了8個組合。這類色彩同樣飽和度不會達到最高，有點復古和充滿文化氣息的感覺。胭脂（暗紅色）、緗色（中黃）、紺青（深藍色）、黛（褐色）等是中國風常用的顏色。

十六、夢幻

夢幻具有奇妙和神秘的感覺，好像在黑暗中找到了一點曙光，奇遇了驚喜一般，所以大多數情況下，背景色會使用從深色到亮色的漸變。顏色相對會比較豐富，而且以漸變色居多。

十七、女性

女性是溫柔的，是感性的，所以該類色彩組合通常為類比色，偶爾會用一點對比色作為點綴，以增加畫面的活潑氣息，顏色的明度和飽和度都不能太低，當然飽和度最好也不要過高，粉色、紫色是常用于表現女性的色彩。

十八、優雅

優雅可以理解為低調、高級、溫和、安靜，所以這類色彩的對比通常不會太強，飽和度也會比較低，整體的色彩調性會偏中性，常用卡其色、麻色，還有單色組合及類比色組合。

十九、經典色彩組合

除了以上十八大調性，蔥爺還給大家推薦一些經典的配色，很難把它們具體歸為哪一類，但是我們在做很多設計時，用上這種配色總能得到不錯的效果，比如紅黃黑、紅白藍、黃綠黑、等等，在很多平面海報設計中經常能看到。

圖標設計對于UI設計師來說屬于非常基礎的技能要求，甚至很多入門級設計師都會畫，只是畫得不一定規范，或者缺少創意和質感。不過也有一些剛入行的新人設計師，圖標設計的能力還比較薄弱，在項目中效率比較低。

因此圖標素材成為了提高工作效率的途徑，為了幫助這部分同學獲得更多圖標資源，黑馬哥為大家整理了十余個優質的圖標素材庫，希望可以帶給大家更多幫助。

1. 善用圖標庫

我們可以運用圖標素材庫的資源來提高我們的工作效率，但是不適宜過度依賴，僅限于入行前期的經驗過度。

針對已經具備一定經驗的設計師來說，不適合過度使用素材解決工作需求，可以將圖標素材庫作為靈感來源。參考別人的風格和技法表現形式，以此來創作出屬于具備自己思考的作品。

2. 圖標素材庫推薦

為了方便初入行業的同學掌握更多資源，為大家整理了如下圖標設計網站，大家在使用的時候自行閱讀相關平臺的規則說明。

2.1 Flaticon

Flaticon 擁有超過 780 萬多個矢量圖標和貼紙等素材，提供 PNG、SVG、EPS、PSD 和 CSS 等格式。該圖標素材庫包含界面圖標、動效圖標、標志和貼紙等，作品的質量還是比較高的，可以滿足很多設計場景的需求。

2.2 Noun Project

Noun Project 提供了超過 300 萬個藝術品質的免費圖標，可以下載 PNG 或者 SVG 等文件以便于編輯。

2.3 ICONS8

ICONS8 對于一些設計師來說比較熟悉，提供了幾十款樣式的免費圖標素材，還有設計工具和插件的推薦等。除了圖標素材以外，還有插畫素材和一些不錯的照片素材，種類豐富且質量都還不錯，值得沒事的時候逛一逛。

2.4 Iconfinder

Iconfinder 擁有圖標、插圖、3D 插圖、貼紙等素材，里面提供了非常多的圖標素材，還可以通過內置的色彩編輯器進行調整。只需要簡單的操作就可以對圖標和插圖進行重新著色，下載 SVG、PNG 格式或者復制參數等。

2.5 IconPark

IconPark 圖標庫已被字節眾多產品線使用，擁有 2600+ 基礎圖標，29 種圖標分類，為你的設計提供更多的選擇。

2.6 Freepik

Freepik 提供的素材不只是圖標，還有字體、插圖、漫畫、海報、樣機、標志等等內容，種類比較豐富。圖標的分類也比較豐富，素材資源眾多，可以滿足我們多樣化的設計需求。

2.7 Iconfont

Iconfont 對于大家來說非常熟悉了，相信很多設計師都去下載過圖標素材，是由阿里媽媽 MUX 傾力打造的矢量圖標管理和交流平臺。設計師將圖標上傳到 iconfont 平臺，用戶可以自定義下載多種格式的 icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。

2.8 Ionicons

Ionicons 提供了完全開源的圖標設計素材，用于 Web、iOS、Android 和桌面應用程序，支持 SVG 和代碼文件下載。

2.9 Flat Icon Design

來自日本設計師團隊創辦的提供免費圖標素材下載的網站，和別的圖標素材網站不同，該網站收錄了眾多扁平設計風格的圖標，帶給各位設計師更多樣化的選擇。

2.10 Fontello

圖標字體生成器，將你的圖標拖進網站自動生成。網站也提供了眾多圖標可以下載。圖標大小可以自動調節，然后批量選擇好一次性下載，非常方便實用的一個網站。

2.11 Logobook

Logobook 提供了很多黑白的創意圖形，可以作為我們設計靈感的參考來源。通過對基礎圖形的創意靈感，探索出圖標設計的想法，是一個靈感來源不錯的平臺之一。

2.12 Iconsfeed

Iconsfeed 展示了很多的應用圖標設計案例，分類也是非常的豐富，可以根據自己的需求尋找對應的設計靈感。

小結

為大家選擇了 12 個圖標素材網站，大家使用時記得仔細閱讀各平臺的條款說明，本分享僅為參考。

3. 溫馨提示

通過圖標素材庫雖然可以讓我們偷懶一些，但是并非長久之計，一旦遇到更高要求的設計需求時，過度依賴素材容易讓我們提前步入瓶頸期。要掌握圖標設計的規范、風格趨勢、表現技法、深入質感的方向等等，只有具備優秀的圖標設計能力，才能在項目中隨意發揮。

4. 圖標設計能力提升

圖標設計入門很簡單，但是從“會畫”到“畫好”之間卻存在一定的差距。圖標設計的能力屬于動手能力的提升，沒有捷徑可走，唯有掌握方法并反復磨練。

4.1 臨摹起步

臨摹是圖標設計訓練的起步，大量的臨摹可以提高軟件操作的熟練度和造型設計的把控，也能不斷提高簡化圖形的思路。臨摹的量不能太低，臨摹幾個幾十個是沒有作用的，起碼也得上百個起步，只有量變才能引起質變。

4.2 拆解圖標素材

從運用素材到拆解素材，是依賴素材到探索技法的轉變。拆解圖標素材的造型結構、規范參數、表現技法、配色關系、細節和一些比例關系等，掌握并還原素材的能力，這樣才能不斷掌握各類圖標風格的設計能力。

4.3 圖標案例分析

具備技法層面的能力是基礎，培養靈感需要積累大量案例并分析總結。體驗線上的各類產品，分析圖標設計的風格趨勢，并形成經驗總結，只有不斷體驗和總結才能把控圖標設計的運用趨勢。

4.4 強化日常輸出

除了完成項目需求以外，日常的探索和磨練也是至關重要的，只有經歷過千錘百煉之后才能隨心所欲?？吹絻炐愕淖髌芬パ芯坎⑥D換成自己的作品，掌握技法并形成自己獨特的理解。定期輸出作品是為了不斷強化自己的動手能力，也是持續激活腦細胞的過程，讓我們的靈感源源不斷的成長。

 有人帶好進步 

如果你通過自學無法更快的提升自己圖標設計的能力，專業能力依然處于入門級或者初級階段，那就找黑馬哥帶一下吧！有人帶進步更快，才能在短時間內從入門級進階到高級以上能力。

黑馬哥會帶你分析設計思路、拆解技術難點和掌握設計原則，通過案例實戰的形式讓你更快的掌握。再配合日常作業的一對一指導，發現你作品中的問題并逐個修改，達到較高質量的輸出。

也會指點工作項目中的設計，讓你在工作中更快的提高效率和發揮更高的價值，實現專業能力的落地和職場路徑的晉升。

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

作者：黑馬青年

轉載請注明：學UI網》不會畫圖標，這些源文件拿去用吧！

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

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

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

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

圖片類的網頁頭圖是非常常見的，比如像全屏圖片類的：

當然，這種全屏圖片也是可以增加一些設計感的， 像下面這個國外攝影網站：

看起來就非常的高級！

除了全屏圖片的方式，還有半屏的，比如像下面這種：

這種基本都是一半圖片，一半文字排版，很多都用在知識類網站，看起來相對中規中矩一下。

圖片類型的頭圖還有一些圖片拼接型的，比如像下面這種，三個圖片拼接在一起：

或者還有這種不規則拼接：

圖片類的網頁頭圖還是比較常見的，上面這些形式，大家都可以多多參考！

二、插畫類

插畫類的頭圖就會比較有設計感了，比如像這樣充滿全屏的，沉浸感十足：

還有這種一半插畫，一半文字排版的：

當然，隨著3d的崛起，3d插畫也漸漸成為了一種網頁頭圖的設計風格，很有沖擊力：

如果你的網頁使用用戶年齡比較低，需要一定的親和力，不妨嘗試一下插圖的設計方式。

三、圖形類

圖形類的頭圖，如果做的好，可以非常有設計感，比如一些nft類平臺：

再比如這種：

還有一些比較常見的形式，就是圖形加人物，讓人物從圖形里破出：

這些都是圖形的一些用法，大家可以多多嘗試！

四、排版類

除了上面這些類別，還有一種就是信息排版類類，大部分都是文字信息內容：

相對來說會比較素一點點，但是如果排版排的好看，依然可以出來好看的效果，大家也可以多多嘗試！

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

作者：菜心

轉載請注明：學UI網》這回做網頁不可能沒思路了！

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

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

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

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

不同人對數據的需求是不一樣的，或者說，不同同學對同一份數據的不同指標組有不同的價值認可。

1.我們的交互同學更多地會參考大盤的“用戶習慣”，使用某個問卷題型的比例來作為設計方案的數據支撐；

2.開發同學更多地會關注這個數據引發地一些性能（問題），架構指標等；

3.產品同學會非常關心某個上線項目的入口流量，轉化率相關指標；

4.運營同學關注的方面更為通用，除了大家都關注的北極星和護欄指標，他們更會關心用戶在使用上的一些點位問題，單個/單批用戶的運營策略轉換問題。

雖然上面只提到4個籠統的數據場景，但是其實我們由此產生的數據圖表、SQL模板甚至是需求單已經有很多，于是我們從規范和流程上看到了一些問題：

1.我們要如何快速找到我們指標對應的底層數據？當時一個關于「活躍用戶」在團隊版中的表現的下推分析，后面還加上了登錄渠道的多維分析，我們甚至開了一場會去校對口徑 ;

2.關于口徑，我們如何確定什么數據是對的呢？不同的數據開發同學開發的報表相差很大；

3.開發同學有非常美好的想象力，一句超凡脫俗的SQL不僅在當前的架構下得不出結果，甚至會拖垮其他依賴的組件。

讓用戶簡單地找到正確的數據，需要把數據按照層級順序擺放在合適的位置并且登記在冊，在當時的時間點下，開始構建數據業務的數據倉庫當然是最好的選擇；我們在數倉開始之初時反思，為什么口徑、數據、校對總是不能被一次敲定呢？后來我們發現，我們做這個需求的過程：從口徑的描述、SQL的開發執行到出庫展示整個過程沒有一個地方是可以被review的。而對復雜數據量的支持，其實就是架構該升級了，單點的ES無法支持多場景的adhoc。

二、數倉基建與維度建模

在做這個事之前，我問組里的同學：“我們有什么數據能夠支持我們做數據分析？”，清一色的回答：“ES里的后端Event日志，前端上報的Pageview和埋點，業務DB中的表”。確實我們早期就有比較統一的基于事件流的日志格式和較為完備的前端埋點組件，但是我們還是沒法回答我們擁有的數據如何支持我們完成某些需求的問題。只有我們把我們擁有的數據的具體能力和表現形式放出來，我們才能真正知道我們擁有的是什么，數據才能真正地從數據存儲變成數據資產。

1、明確數據表

上圖顯然就是我們數倉初期ODS到DWD的一層規劃，這里我們更希望引入產品同學來對齊我們現有的數據資產，以便在后續數據需求的溝通上能夠明確哪些數據能為我們所用，我們有哪些底層數據需要再去補齊。明細表一般存在于流式數據中，帶有時間屬性，一般用于一段時間內的指標計算。

同理，我們把存在業務DB中的數據平移到數倉中，這些數據表本身經過了不錯的數據建模，我們將我們擁有的表保留退化維度同步到數倉，我們就得到了DIM層(塊)。維度表一般不帶有時間屬性，用于關聯做維度分析。

2、業務總線矩陣構建

把動態的明細數據和靜態的維度數據相互交叉，就得到了我我們數倉的底層應用「業務總線矩陣」。在這個笛卡爾坐標系里的每一個點或者一條線都有它的業務意義。比如我們通過交叉「登錄明細」 和「團隊信息」，我們就能得到「團隊登錄」的明細；通過交叉「登錄明細」、「團隊信息」和「用戶登錄渠道」（2維度1明細），我們可以得到「分渠道的團隊登錄」明細，這是一種維度細分統計的構建；通過交叉「登錄明細」、「團隊信息」和「提交答卷明細」（1維度2明細），我們可以得到「團隊版登錄且答題」明細，這是行為組合（細分）。

至此，我們能夠清楚地認知數據可能會在哪個位置發揮什么作用，下一步要解決的是我們該怎么找到我們的數據這個問題。

3、元數據管理

為了解決“我們有什么數據”這個問題，我們決定接管數據的入口，把開發過程中生成的數據表按照數據的生命周期命名打上標簽。

問卷的業務數據庫里有百余張表，其中大約有近4成為維度表，需要拆分成明細的點位或者日志會隨著業務發展主鍵膨脹，業務總線矩陣也會主鍵變成一張大網，失去可檢索性。事實上，我們對數據的需求是有描述性的，比如想看“這周問卷的新增明細”，我們并非記住一串冰冷的文字，我們更希望能把「1周」，「問卷」轉換成描述條件作為我們元數據的檢索入口。 我們支持了Superset從表comment、字段comment中檢索的需求，把想要的關鍵字按照關鍵字檢索匹配到正確的數倉入口。

4、數據血緣

在我們接管了數據產生的入口后，我們把用戶調用數據資產的記錄同樣采集了起來?；谝惶譴ow code配置化調度任務，我們在為開發同學提供分區篩選、數據量評估、sql執行、執行結果質量校驗和下游寫入的能力的同時，我們更在配置化的Spark啟動入口處植入了血緣上報，當一個任務被成功執行計算后，我們采集了數據的流向和數據流動比例。

有了數據血緣后，在一份數據出現分歧時，他的數據量和執行計劃都是可以被review的，從數據讀入和寫出的量級波動情況可以相對容易地追溯到原因，但是目前還沒有做成波動歸因。

到這里，我們的數據開發鏈路的不確定性只剩下了口徑確認和變更。我們通過將指標組（一般是單指標多維度）命名，分配給數據開發同學，確定產品負責人和開發負責人。這個順便解決了我們之前無法追溯報表錯誤不知道該找哪位同學來看的問題。開發完成后掛靠在某個具體的數倉表上，實現數據需求到數據開發到底層計算的全鏈路記錄，當數據出現問題或需要修改時，則整個鏈條上的負責同學都會有感知，確保發起的修改能夠被所有相關的（特別是下游的）數據同學review到。

5、數據架構

規范的事情暫時能跑了，在只有我一個人力的情況下繼續大力度地做進一步數據治理可能并不是當下最急需的，在場景分析中提到的問題，我們還有關于開發最重要的一個問題——當下的數據架構需要升級。為了回答這最后一個問題，我們希望把昂貴的ES儲存費用轉投到能面向更大型分析場景的數據架構上。

在之前，部門內所有的分析都有ES或者ELK套件承擔，從20年開始性能和錢包都陸續見到了瓶頸。目前部門數據平臺內走的是以流式分發為主的Lambda架構，由下游需求決定數據是否從實時層沉降到離線層。維度數據會存在離線層，事實明細數據會廣泛地存在于實時層，這是基于下游有時延要求高，維度要求低的場景，只需要做簡單的指標聚合，附帶退化維度寫出即可。

和Lambda架構不同，我們的低時延分析需求更多地由近實時分析層承擔，針對不同需求，我們嘗試過很多不同的組件，根據不同的使用場景，比如全文查找、強聚合、上下文分析等等，我們會選擇不同的組件?；诓煌慕M件，我們在上層有去嘗試做不同的應用實踐。

三、應用實踐

1、機器學習

在機器學習方面，騰訊問卷有基于用戶答題的行為，構建用戶答題的時間序列，得到一個評估用戶答題認真度/可信度的評估模型，目前這個工具已經上線到樣本庫填答的紅包發放鑒別能力中，提供給投放者對回答可信度和總體回答質量做相應參考。

在最早期我們通過ES去查找單份答卷用戶在答題過程中的所有用戶行為埋點數據來構建序列數據進行預測，將預測結果寫入DB；在近一年中，我們把查詢數據源經過計算清洗后寫入按問卷和用戶為索引的ClickHouse數據源中，同時將服務與線上服務解耦，使用kafka來進行通信；最后配置了消費監控和寫入監控，使這個服務成為一個單獨維護的組件。以犧牲少許的實時性為代價大幅提升了預測速度和可用性。

2、實時風控

基于實時層的數據聚合分發能力，我們在問卷系統中逐步搭建了一套對問卷維度進行風控的系統。在最早期的設計中，實時層基于小時間段窗口觸發計算，從明細數據流讀取計算到寫入下游系統之間的誤差能夠控制在秒級，支持了下游規則引擎的實時特征數據檢索。

在架構上，風控模型走的是全實時數倉鏈路，從Kafka明細中讀出前端上報信息和后端收集答卷的日志，在Flink中做實時的多窗口聚合寫入到下游的數據組件。在前期選型中，業務側希望能夠具有實時調用和短時間指標回溯的能力，同時希望系統組件能夠相對輕，能從云上購買，最后我們選定了Kafka作為業務側實時接收窗口聚合結果的組件，PostgreSQL作為小時間段的回溯組件來構建線上的風控分析。

3、AB實驗

目前，我們已經在SaaS平臺內對文案顯示、用戶邏輯等多方面做了很多次AB測試，通過pv上報的曝光和event埋點的轉化分析，能夠實時構建單個用戶的轉化行為；相同地，我們會對實驗時間范圍內的數據使用ClickHouse構建用戶RBM，分析不同用戶在不同實驗命中的表現情況。

總結

通過補齊一些基本的數據架構和數據規范，目前我們在數據驅動的實踐上已經走出了一條自己的路。隨著用戶調研類組件的發展、用戶分析需求的增加，其分析能力也會隨之增強，越來越多的數據能力正在沉淀成底層功能加入到SaaS服務側。

原文地址：騰訊CDC體驗設計

作者： 騰訊CDC-erien

轉載請注明：學UI網》數據工程在騰訊CDC的演進

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

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

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

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

一、應用/軟件研發就是單純的敲代碼？

在我們傳統認知里，應用/軟件研發似乎就是開發者在黑色屏幕前敲代碼。但隨著敏捷研發DevOps理念的發展，現在的應用研發，轉變為了圍繞devops的協作工作流，涉及多樣化的工具和不同人員的協作。研發體驗的核心要素，也從“架構邏輯“向”流程和協作“發展。

阿里巴巴應用研發平臺EMAS正是在此背景下誕生的產品。面向全端場景（移動App、H5應用、小程序、Web應用、PC應用等），基于廣泛的云原生技術（Backend as a Service、Serverless、DevOps、低代碼等），為企業、開發者提供應用研發運營管理服務。

綜上，EMAS做為幫助企業/開發者進行應用研發的技術類SaaS產品，也面臨了全新的機遇與挑戰。

二、設計師如何在技術類產品中破局？

面對復雜的技術類產品，由于技術的高門檻及業務的復雜性，很多時候設計師都是被動的接受需求。但我們也在思考，設計師如何在技術類產品中破局，如何發揮更大的價值。

因此，我們嘗試站在更高的全局視角而不是設計的本位視角，主動發現問題提出設計策略，實現設計執行到設計驅動的突破。

全局視角的主動洞察

懷著讓設計發揮更大價值的初心，我們深入業務主動邀約產品關鍵角色深入溝通，了解產品歷史背景、技術邏輯及痛點，并發起產品的易用性測試、體驗走查及競品分析等動作，站在全局視角從產品側、用戶側和體驗側多個角度進行深入洞察，形成全面的“產品體檢報告”總結舊版EMAS所存在的問題：

1.產品側洞察——子產品無合力、相互割裂缺乏串聯

EMAS圍繞應用全生命周期包含12款子產品，卻是各個子產品的拼接，功能獨立零散，未形成一站式研發體驗。各個子產品也是以獨立垂直工具視角建設，缺乏用戶及客戶業務視角。

2.用戶側洞察——產品價值/能力感知弱、沒有攻占開發者心智

多數用戶并沒有完全理解產品的價值和能力，EMAS沒有攻占開發者心智。

3.體驗側洞察——產品易用性差、滿意度低

通過用戶調研的量表評分，易用性及滿意度評分低，雖然用戶對產品功能能力認可，但對產品使用體驗滿意度差。

三、設計驅動產品創新升級

基于以上分析，我們與關鍵決策人積極溝通，匯報關鍵問題及設計策略，驅動產品的升級創新，進行EMAS3.0 一站式應用研發平臺的打造。通過咬合3個業務關鍵問題，制定出以下的設計策略：

〇 策略一：打造一站式研發體驗

1.應用全生命周期協同流程梳理：

舊版的EMAS是各個子產品的拼接，功能獨立零散，未形成一站式的研發體驗。經數據分析，產品的交叉使用率也非常的低。因此，設計首先從應用全生命周期角度，梳理了不同角色的協作流、任務流，并串聯之前子產品沒有打通的數據流，進行構建-測試-發布-運維-運營全鏈路打通串聯。

2.用戶視角的產品架構重構

并且在舊版的EMAS中，各個子產品是以垂直工具的視角進行建設，每個子產品的架構邏輯都不同，也沒有形成合理的聯動。進一步，設計驅動以用戶視角進行產品的架構重構，以”項目“作為統一頂層邏輯，并兼容技術架構，進行圍繞應用的的管理，形成一站式應用研發全周期流程。

3.一站式獨立控制臺建設

在產品形態上，形成了以下結構的一站式獨立的Studio框架，讓用戶能夠清晰、流暢的產品體系中進行應用構建。

4.一站式全景產品架構

最終，EMAS3.0一站式應用研發平臺實現編碼-構建-測試-發布-運維-運營全鏈路的打通串聯。應用阿里云的Real3D能力，打造一站式產品全景3D互動場景，圍繞DevOps協作流串聯各個子產品，形成一站式應用平臺。

通過流程化研發指引幫助新手開發者快速開啟應用研發流程，也能幫助團隊不同角色成員進行項目全局管理和關鍵指標監控。

〇 策略二：品牌建設與產品價值傳遞

1.增強產品價值/能力透傳設計

舊版的EMAS試用體驗差，且在首頁、功能初始頁等場景也缺乏產品能力的有效展示與使用引導。因此，我們在多個場域進行產品信息的有效展示及引導，進行產品價值/能力透傳的核心場域的典型場景建設，幫助用戶快速感知產品價值。

2.品牌建設，建立用戶心智

研究競品會發現：大部分競品缺少獨特的品牌語言——用戶很難區分彼此，無法激發用戶對產品的興趣 EMAS希望提供什么樣的形象與感受，現有的視覺設計語言能否讓用戶產生所預設的共鳴？因此差異化的牌語言，能體現EMAS獨有的品牌價值，在用戶心智建立準確的品牌形象。

首先，我們基于“卡普費雷品牌識別棱鏡”從品牌定位&品牌表現的維度來挖掘產品形象，在個性、文化、形象、關系、體現、外貌6個緯度對品牌進行定位。

明確了“Make smart app”這一產品Slogan，相應確定了產品“智能、高效、敏捷、靈動”的視覺語義，并從從個層面定義Smart，從各設計元素中挖掘smart的特性，來傳達品牌。

通過品牌logo的三角圖形元素貫穿運用到整個產品的 布局、插畫等元素，增加符號化元素的透出率，提升品牌的感知。

產品形象采用3D Pictogram配上動效，通過材質和光影的變化，更豐富傳達各子產品的特點，體感更強。

〇 策略三：易用性改進提升研發效能

舊版EMAS經過用戶調研的量表評分，產品易用性為6.8分，未達到優秀標準，在整體研發易操作性及易學性等方面存在20+體驗問題。

因此，我們基進行了深入的易用性度量和測試，挖掘出20+體驗問題，除了問題的單點解決外，我們也形成了系統化的解決方案，形成了“一鍵接入”、”流水線編排““跨產品引導”、”場景化開發指引“等易用性策略和范式。最終形成了完善的一站式應用研發設計體系。

四、技術類SaaS產品設計方法

通過以上項目的體系化設計的最佳實踐，我們逐漸總結出一套技術類SaaS產品創新設計方法：基于“產品/技術能力”、“產品價值傳遞”、“使用體驗”及“ARR”四個產品關鍵要素的抽取和分析，明確了“連貫度”、“價值感”、“易用性”、“轉化率”四大開發者體驗原則，進而形成一系列體驗設計要素，指導設計師有章可循的去進行技術類產品的思考和設計工作。

設計師是人與科技間的鏈接者，在數字化變革的浪潮中發揮著重要的作用，通過對用戶、產品、體驗的深度洞察，讓科技逐步普惠化、民主化。

原文地址： 阿里云設計中心（公眾號）

作者： 阿里云設計中心

轉載請注明：學UI網》數字化浪潮下，設計師如何驅動技術類SaaS產品的升級與創新？

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

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

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

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