Post-it 與彩通色彩研究所共同開發，推出 11 種全新 Post-it Notes 系列，以令人耳目一新的色調展現色彩的力量。激發創意生產力！

 Post-it Notes 

Post-it 始終提供繽紛的畫布，為人們的想法增添些許鮮艷的色彩，而在七年沒有重大的視覺轉變之后，彩通色彩研究所獲選成為 3M 的合作伙伴，在全球推出重新打造的 Post-it Notes 和 Post-it Super Sticky 系列。

三種精選調色板包括：

1、花卉幻想

這個調色板充滿新鮮芬芳的春季花卉，陽光正面的氣息能帶來活力與好心情。

2、能量激發

這個系列中活力四射的色彩能點亮您的心情，讓訊息清晰透徹。

鮮艷色彩混搭成組，振奮人心的色調以充滿活力的配色之姿自然呈現。這些動感活潑的色調使人留下大膽鮮明的印象，傳達生氣蓬勃的歡樂訊息，以急迫感和力量激勵使用者采取實際行動。

3、單純靜謐

透過干凈現代的單純靜謐系列，為提醒事項便利貼注入一絲禪意。

和諧混搭干凈俐落的經典顏色，呈現簡潔外觀和平靜狀態，突顯人們對簡化、清理和整理的渴望。這幾種獨特色調穩定可靠且歷久不衰，使用溫柔且老少咸宜的粉紅色來達到強調的目的，傳遞直接而單純的訊息，讓輕柔的氛圍靜靜地撫慰人心。

二、多彩的元宇宙

元宇宙中的色彩：探索色彩在虛擬與現實之間的關系。

1、視覺語言

許多人幾乎無法想像生活在眼睛所見只有黑白灰、沒有其他色彩的世界；我們已經習慣被色彩包圍，色彩更是定義世界的視覺訊號，讓我們感知與周遭環境和所愛事物的連結。約有 80% 的人生體驗會經過雙眼吸收，因此視覺訊號對于傳達訊息至關重要。

色彩在元宇宙的使用方式與實體世界大致無異，唯一的差別在于：

實體世界中的色彩有其局限。物體自然會是一種色彩，可以改變，不過需要資源、時間和精力。此外數碼光譜中的某些色彩無法在實體世界重現。在元宇宙中，色彩可以立即視需求調整。

元宇宙中的色彩沒有任何限制。從你在 Web 3.0 中的外貌到衣著，或者是你擁有的產品，這些色彩都可以隨你的心情以及你希望在數碼世界呈現的方式改變，不論它們在實體世界呈現的色彩為何。元宇宙將會帶來自由。

三、提契諾的色彩

Ticino Turismo 了解色彩會喚起我們對旅游地點的珍藏回憶，并激發未來的旅游計畫。因此他們與彩通色彩研究所 (Pantone Color Institute) 的全球色彩專家團隊合作，透過各種色彩描述造訪瑞士著名提契諾地區的體驗。

（點擊圖片前往原文查看視頻）

icino Turismo 與彩通色彩研究所合作精選出五種最能代表提契諾的色彩，用來傳達春夏兩季訪客在當地所見識到的美景與快樂體驗。

彩通色彩研究所以這些色彩為基礎創造出 Ticino Camellia Pink (提契諾山茶花粉紅)，用來代表點綴這片地區的艷粉色花朵；Bellinzona Fortress Grey (貝林佐納城堡灰)，這種帶有灰色調的暖褐灰色正是當地中世紀城堡呈現的色彩；Brissago Blue (布利薩戈藍)，這是布利薩戈島周圍澄澈湖水的色彩；Lugano Sunset Orange (盧加諾日落橘)，呈現當地日落的迷人光彩；以及 Valle di Muggio Green (穆吉奧山谷綠)，展現郁郁蔥蔥的山谷色彩。

四、周大福的色彩

彩通色彩研究所最近與周大福集團合作，透過提供包含三種新色調的時尚調色盤，結合中國傳統風格和現代審美，借以襯托周大福集團標志性的招牌紅色。

全新周大福調色盤體現了融合傳統色彩與現代風格的故事。呈現出精致感觸、完美品質和現代雅趣，全新周大福調色盤既融合了傳統的優雅，也繼承了現代風格的美感和精神。

全新調色板：融合中國傳統風格和現代審美

為強調大福紅 (Tai Fook Red) 濃郁而充滿活力的強大吸引力，我們透過暖金色突顯出一系列相容的色調，打造和諧的色彩故事。

五、西派金銅  City Park Golden Brass

彩通色彩研究所最近與中國鐵建房地產集團有限公司 (CRCCRE) 合作，提供宏觀色彩趨勢指引并建立招牌色彩，做為該公司的主要品牌視覺形象，用于公司旗下不同的重慶西派城住宅。

這個全新色彩能夠向潛在買主傳達出重慶西派城的居住環境和生活風格，以及CRCCRE 的愿景：成為具價值的房產開發、工程設計及資產管理商，借此提升中國生活水準，同時解決人們日益增長的需求，滿足他們追求自然景觀環繞，以及求取身心靈平衡的愿望。

在考量中國生活風格趨勢的美學，以及中國居民未來的追求后，我們創造出「西派金銅 (City Park Golden Brass) 」來代表重慶西派城的品牌定位：拘謹、優雅、穩定發展、現代化、年輕且時尚，同時仍支持及推廣積極進取的哲學。

作者：劉濤

轉載請注明：學UI網》2022 PANTONE 最美色彩來啦！

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

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

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

不同的產品，對于頁面的模式、表現上都會有明顯的差異，今天我們就來聊聊 客戶關系管理系統

一、定義

CRM 的全稱為客戶關系管理系統，是 Customer Relationship Management 的縮寫，顧名思義就是提供給銷售人員進行使用的管理系統，來幫助銷售人員管理他手下的客戶。從產品類型來看，CRM產品是屬于垂直業務型的產品，主要是為各行各業的企業，提供管理銷售的服務

當然在CRM產品當中目前主要分為兩個賽道，分別是以：Salesforce、紛享銷客、銷售易、悟空CRM 為首的管理型CRM，它們最為主要的功能是管理客戶，也就是將銷售人員手中的客戶，通過公司的CRM系統進行統一的管理，能夠保證企業的權益不會受到傷害

而另一個賽道則是SCRM，這應該算是國內比較火的新名詞（其實也出現了很長一段時間了），它的全稱是 Social Customer Relationship Management 也就是社交化客戶關系管理系統。主要典型的產品包含：EC、塵鋒、探馬、微盛 等等…

如何去理解SCRM？

比如我們現在日常溝通、獲取信息，會從以前的傳統媒體像是 “電視、報紙、收音機” ，逐漸遷移到 微信、知乎、小紅書、抖音 等等，而這些社交媒體上我們的各種喜好、最近發生的事情，都能夠在SCRM當中展示，并且他可以根據你的喜好，來與你進行溝通進而幫助它進行獲客、成單

比如今天我想買 Figma ，然后我又在微信朋友圈當中吐槽 Sketch 很卡，那作為銷售的你肯定會給我推銷說，咱們 Figma 一點也不卡。當然SCRM的功能還會有很多，由于篇幅有限，我們目前分析還是以CRM為主，再加上SCRM篇幅太大，后面在做分析?；蛘呤怯性谶@些行業工作的小伙伴，可以在評論區進行補充

二、作用

想要了解CRM產品究竟能夠給用戶帶來什么作用，我們今天換一個視角，來說說如果企業不使用CRM，會有哪些后果

1、客戶安全性很難保證

因為在傳統的銷售業務模式當中，銷售人員可以與客戶直接進行對接，企業無法對銷售進行合理的管控，所以經常會發生客戶跟著銷售“跑了”，也就是銷售離職，帶走了之前他負責的客戶。這個時候你作為企業老板即沒有掌握客戶的基本信息，同時對于這位客戶的經歷也不了解，這樣很容易就會流失一個客戶。而客戶對于企業來說至關重要，因為每一個客戶都是企業通過運營人員溝通獲取來的，因此企業的客戶安全性無法得到保證（這也是為什么很多企業選擇使用企業微信而不是個人微信的原因）

2、數據信息不夠統一

一個銷售獲客的渠道有很多，其中包含名片、微信推薦、電話分享 等，而這些客戶信息，如果不統一管理，就會變成一個個孤島，對于企業的日常管理是非常麻煩，無法全局監控
當然企業也可以將數據統一放在傳統的Excel表格當中，但是表格傳播過于簡單，風險太大，并且無法去做協同，一旦后續數據增多也會導致整個管理非常的混亂，不能分權限將企業的所有客戶統一進行查看

3、難以建立良好的客戶關系

傳統方式管理客戶的時候，銷售人員對于客戶印象主要來自 之前的微信聊天記錄以及朋友圈，而想要深入了解這位客戶的具體信息、具體對接的聯系人、以及公司的具體規模，就可能會因為時間的關系而忘記，因此傳統的方式無法追蹤客戶，將客戶的資料統一整理

4.銷售難以管理

對于企業的銷售人員來說，他們的工作常年在外，因此企業很難對手下的銷售進行管理，比如想了解員工今天的工作情況，又或者是員工的后續工作安排。之前企業都是通過收集員工每日工作匯報來判斷，依舊很低效率
CRM系統可以連接日常工作和業務，在輔助銷售人員完成工作的同時，也完成了對信息的收集，管理者可以清晰地看到該客戶的跟進記錄，以及重點客戶員工是如何跟進的，提高了管理團隊的洞察力

三、業務

關于CRM的業務，我們主要會分為 專業詞匯、關鍵角色、流程 三個維度進行分析，我們先來了解一下常見的專業詞匯

1、專業詞匯

銷售線索：銷售線索是與客戶初次接觸獲得的原始信息， 可以是從展會中獲得的名片，通過推廣活動獲得的電話號碼 ，或是會議、廣告、外部購買等渠道獲得的客戶簡單信息，然后通過管理和跟進可以轉化為客戶

線索池：將線索通過按不同行業不同地區或是其它的方式組合一起，即成為線索池，如上海區線索池、北京區線索池、教育行業線索池、金融行業線索池等

客戶：客戶是指有業務往來企業、團體或個人，是企業的重要資源，可以通過線索轉化而來，或是銷售挖掘等多種渠道獲取

公海：按不同行業不同地區或是按某種相同特性組合一起的客戶分組，即成為公海，如上海區公海、北京區公海、教育行業公海等

聯系人：即與企業直接聯系的客戶方相關人員。如果是企業客戶，聯系人是您與企業聯系溝通的人。如果是個人客戶，聯系人可以是與客戶有關系的溝通聯系人

商機：商機是與客戶做一筆生意的跟進過程，如果是企業客戶，一個完整的銷售周期大概包括產品咨詢、報價、方案評估及最后的贏單或輸單

2、關鍵角色

在CRM產品里面，會涉及到形形色色不同的人員，其中最主要的角色包含：市場、銷售、銷售主管、老板

市場：主要負責整個產品的營銷以及線索的分配，與CRM產品相關的就是會安排市場人員來與銷售進行對接，將他們在 官網、內部推薦 得到的線索流轉給銷售

銷售：銷售人員對于企業來說非常關鍵，他主要是企業與客戶對接的重要人員，是這份訂單是否成功的關鍵角色
雖然都叫銷售，但是會根據工作性質的不同，將銷售分為：電話銷售、產品銷售與大客戶銷售

電話銷售：電銷通常是銷售當中最基礎的，通常就是拿著通訊錄不停地撥打客戶電話，算是一個重復性非常高的職位

產品銷售：產品銷售更多就是自有產品，當線索來了過后，銷售人員也會與客戶去電話溝通，但是溝通的目的是了解你公司的具體情況，分析是否有潛在的購買需求，后續主要任務便是促成訂單的成交
比如你們每次去試用別人的B端產品的時候，都是產品銷售來與你對接（別以為我不知道你們每天在做什么~）

大客戶銷售：大客戶銷售顧名思義，主要針對的是企業較為重要的客戶，他們在整體的決策層面鏈路較長、金額較大，因此會安排經驗豐富的人員進行對接

軟件實施：負責現場培訓、協助項目驗收、負責需求的初步確認、把控項目進度、與客戶溝通個性化需求、負責項目維護?？傊褪悄阗徺I了產品過后，需要實施人員來進行項目落地（有的公司沒有實施會讓銷售人員負責）

客戶成功：客戶成功扮演主要是提升客戶的認同感，讓客戶感受到使用這款產品能夠給他帶來價值。簡單來說客戶成功就是要找出客戶的問題，并制定相應的解決方案，然后基于不同的產品，把解決方案落進系統?？蛻粲袉栴}反饋，就需要與客戶成功進行對接，評判客戶成功好壞的標準就是看產品的續費率

3、流程

要了解一款B端產品的業務，那業務流程自然是十分重要，因為這樣能夠最快的了解清楚整個產品的流轉方式（當然不同公司對于產品的流程不同，只是作為參考）

在CRM產品當中，所有的客戶都是從線索開始，因此線索是作為整個CRM產品的起點，也是業務流程當中的最主要一步。當然針對于線索，他最主要的特點便是線索來源，一般分為：官網、展會、朋友推薦、以及新媒體渠道當中獲取到的線索（這可能就是SCRM存在原因）
而在線索這里，通常系統會去自動對接 官網 當中的提交的表單線索，同時也會給各個員工開放自己新建線索的入口（有的企業，新增一個有效線索是有對應的提成）

當然線索在類型上主要分為：線索池、有效線索、培育線索

線索池：就是將所有的線索都放在一個地方，方便銷售人員進行選擇

有效線索：有真正購買意愿的線索，通常敏銳的市場人員會從 規模、電話、行業 等綜合信息進行判斷

培育線索：也就是客戶對于這個產品比較猶豫，對于產品購買意愿不太明確，因此可以通過培育線索，讓他了解到產品過后，轉化為有效線索

當你完成線索流轉過后，你就會是一個商機，這也就代表著你對咱們的產品非常感興趣，開始詢問報價，銷售人員就會給你去做各種各樣的演示與溝通
而在每一次銷售與客戶的溝通情況，企業都會要求他去錄入跟進信息，如果不填寫可能會面臨罰款的風險

然后就是銷售人員一次又一次的和客戶溝通，商討價格直到客戶簽單，在此過程當中就會涉及到商務，然后就是 訂單、合同、回款、開票 等流程階段 來對整個過程進行統一管理，并且所有的過程都會在系統當中進行記錄，直到最后的贏單

有得必有失，那后續輸單也是同樣，便是沒有取得進展，最后以失敗告終

我們來整理一下，舉一個實際例子，比如現在想要去了解一款人事管理系統，你打開了薪人薪事的官網，在他們的官網當中經過簡單的了解，填寫了你的企業信息與表單

緊接著，你的信息就會給到市場人員，他們會根據你的 表單信息、所在城市、公司規模 給你安排更為合適的銷售人員來對你進行跟進

在跟進的過程當中就會根據你的各種 “反饋與表現” ，將你定義為各種名稱 線索、商機、客戶
并且目的只有一個，就是讓你購買產品，后續涉及到 訂單、合同、打款 等，都屬于正常流程當中非常重要的一環，直到最終的贏單與輸單

四、頁面

1、客戶詳情頁

客戶詳情頁面作為CRM里面最為重要的一個頁面，它主要是呈現這個客戶當中的所有完整信息。比如銷售人員，他高頻進入的頁面一定是客戶的詳情頁面，因為他想要了解這個客戶，在整個過程當中了解哪些信息、想要得到什么內容都可以通過客戶想以企業快速的找到
但是由于客戶詳情頁 頁面的整體設計難度較大，會存在大量信息以及關聯的內容，因此客戶詳情頁更加考驗設計師的信息處理能力。這里分享了 Hubspot、Salesforce、紛享銷客、銷售易、悟空CRM 的客戶詳情頁

2、客戶列表頁

客戶列表頁更多就是呈現數據，和普通B端產品的列表頁基本相同，只是說會根據不同的產品類型有所調整。比如CRM產品，它更加強調的就是客戶信息的快速檢索以及快速尋找，因此你會發現在產品里面它的篩選功能做的非常強大

3、跟進記錄的填寫

跟進記錄在CRM產品里面是非常重要的板塊，因為跟進記錄也就意味著銷售人員需要去反復的填寫。有點像一個快速的表單讓我需要把每一次我們具體聊的內容寫到整個系統里面來
通常一個銷售非常規范的公司，會要求銷售人員把和顧客每一次的數據都記錄到跟進記錄里面，因此在跟進記錄當中，我們要去考慮他如何頻繁去呈現，以及如何快速的去閱讀

五、CRM產品對于設計師的影響

1、了解用戶習慣

簡單來說，其實CRM產品本身就是為銷售人員服務的一種產品類型，那作為設計師了解 銷售的日常習慣就顯得尤為重要。雖然在文章當中已經講的過于詳細，但是你會發現，用戶的習慣當中，不同的產品類型，它的日常習慣本身就會有所不同，像是 電話銷售、產品銷售、大客戶銷售、傳統業務銷售，其實這對于我們來說，更需要了解用戶的習慣才能更好的去做設計

2、懂得業務

因為CRM產品本身是難以理解的你，也就導致了我們作為設計師需要快速的了解業務，去懂業務究竟應該怎么去實現
比如和同事快速的溝通，進而快速掌握業務信息，又或者是尋找各種資料幫助你了解業務。那關于這些內容我們之前也有講過，可以翻一翻，這里就不展開去贅述

3、快速轉換

CRM本質上是一個針對于多行業的產品類型，也就導致了我們需要在設計的過程當中快速的進行切換。需要我們將用戶多行業的需求進行整合，因為在工作當中你確實會發現不同的企業，他的關注點是不太一樣的。那如何把這不同的關注點進行融合整理，就需要設計師充分的參與才行

作者：CE青年

轉載請注明：學UI網》客戶關系管理（CRM）產品解析

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

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

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

一、自我管理

每個公司都有設計師的成長路徑，不同的職級對設計師能力要求不一樣。初入職場的設計新人，需要對接好工作需求，輸出合理的設計方案。而工作多年的設計師，則要從設計角度考慮如何為產品帶來正向業務價值，建立設計影響力、推動設計工作效率提升、帶動新人成長等等。

因此設計師需要參考崗位標準，有意識地做好設計能力提升。

1、擴展知識儲備

雖然設計師的輸出成果以界面設計為主，實際上設計師是復合型的崗位。

例如C端產品中常見的Banner設計，設計師要明白業務的核心利益點是什么，或者業務方希望傳遞給用戶怎樣的信息，也要知道什么樣的信息對用戶更有吸引力。在此基礎上，結合設計趨勢，考慮色彩、動效、信息層級等細節因素，才能更好地完成方案設計。

在B端產品中更是如此，很多時候產品經理的PRD表達的是功能設計，并沒有足夠的用戶場景信息，設計師要從用戶場景出發，充分地理解業務需求，才能做出有價值的設計方案，否則設計方案很可能只是將產品功能翻譯成為了系統界面。

所以設計師需要橫向擴展業務領域，縱向提升設計能力，擴展個人的知識儲備，并能夠在產品需求中快速應用。

設計師的知識儲備更多地依靠平時積累。例如可以通過行業研究報告、競品分析，更宏觀地理解整個行業的發展變化，幫助自己更好地理解產品需求；通過設計理論、行業展會學習用戶心理、設計方法、提升個人的設計思維；通過團隊或者業內設計師交流，解決工作中的設計難題。

2、從輸入到輸出

除了基礎的能力提升，設計師還要注重設計思維提升。

在工作中，設計師會有各種思考、總結復盤，這些都是設計師快速成長的助推器。但是這些思考和復盤通常是散點式、碎片化的，設計師可以嘗試著將這些內容體系化，內化為更加深刻的設計思維。

例如現在很多大廠都有設計公眾號，要求設計師定期輸出設計文章。不僅僅是為了打造設計團隊的影響力，設計師在文章寫作中也會有全新的收獲和提升。

所以設計師可以借助各種工具，例如公眾號、語雀、設計網站等建立和輸出自己的知識體系。

二、設計過程管理

設計師的日常工作大概可劃分為3個階段：需求溝通、設計執行和設計輸出。最關鍵的就是需求管理和項目管理。搞定這兩項，設計師基本可以保證高效地完成設計工作。

1、需求管理

在我看來，需求溝通是最重要的一步。因為只有準確的需求輸入才能保證設計輸出的準確性。

1）需求的合理性判斷

很多時候，即使是產品經理也無法保證需求是真實準確的，有些需求可能只是為了驗證可行性?；蛘咝枨筮^于偏重功能設計，沒有從實際的用戶場景出發，存在一些問題點。所以設計師要有一定的方法，對需求做出合理性判斷。

首先要了解需求來源，確認需求目標，了解需求背景；然后從設計的角度，從用戶角色、場景的角度重新審視需求，為產品經理提供一些建議，彌補需求的不足，推動產品優化方案。

2）需求內容的確認

PRD是最重要的需求材料，決定了設計師應該做什么。但是有些時候產品經理沒時間提供完備的PRD；有時候產品經理只是向設計師口頭傳達需求，設計師產出原型方案完成評審后，產品經理將原型圖插入到PRD中輸出給開發人員，這樣的PRD主要是面向開發人員的。

因此設計師需要發揮主觀能動性，有能力理解和分析需求，主動與產品經理確認相關問題。為了提高溝通效率，可以逐條記錄問題點，并備注自己的分析和思考。保證設計執行前，能夠解決掉80%的需求疑問點，從而減少設計方案的無效返工。

2、項目管理

1）需求排期管理

產品需求提交給設計師后，設計師需要主動確認交付時間點，避免信息不對稱造成設計延期風險。另一方面，產品經理可能會要求設計師預估工作量，給出設計排期。此時設計師要充分考慮多方面的因素，例如需求溝通、方案評審及修改時間等。

有些時候，設計師并不是負責單一產品線的設計工作，可能會面臨多任務并行的場景。設計師需要與產品經理明確優先級排序，合理安排設計任務排期。如果無法協調時，需要積極向上反饋，爭取團隊內、外部的設計資源配合。

如果需求發生變更存在延期風險，也需要在項目組內部及時反饋，同步給所有相關人員。

2）設計完整性

在大廠中，工作流程比較完善，設計師的工作職責也比較明確。但是轉型中的傳統公司，或者規模較小的企業，對設計師的工作內容并沒有明確的流程規范，甚至沒有設計評審流程，設計師只要完成方案設計就結束了。

短期來看，設計師工作確實比較輕松，只要專心完成設計任務就可以了。長期來看，設計方案無法很好落地，產品體驗無法保證、甚至失控，最終影響最大的必然是設計師。

所以設計師需要主動完成工作閉環，跟進開發，做好上線前的設計測試驗證，以及上線后的用戶反饋，或者定期開展設計走查。某些產品還要收集上線后的數據，驗證和改進設計方案。

3）設計平衡性

設計師首先要保證用戶體驗，這是毋庸置疑的。但是設計方案也不能只考慮用戶體驗，還要兼顧業務需求的商業目標。只有做到兩者間的平衡才是有價值的設計方案。

另一方面，設計師主要的任務是基于對需求的充分思考，盡可能地為產品提供有價值的解決方案，而不是追求完美的設計方案。因為交互、視覺設計方案多種多樣，需要根據產品資源、執行效率、投入產出比、版本迭代計劃等因素綜合考慮，選擇當前用戶場景下更加合理有效的方案，而不僅僅是為了追求完美的用戶體驗。

適當的妥協讓步是設計平衡性的必然選擇。即使設計方案無法完全落地，深入的分析思考過程也會讓設計師受益匪淺。

三、對上管理

我個人認為這是比較難的，甚至是最難的。如果企業設置了專門的設計團隊，設計師的日常工作都會經過內審、外審等，整個過程有比較好的流程規范保證。在評審匯報中，設計師的工作亮點、設計成果就能夠得到顯現和認可。

評審時，設計團隊領導作為直接領導，雙方有共同的對話基礎，有些內容點到即可。并且團隊領導也有意愿、有時間聽取設計師的工作匯報，這也是領導的管理職責所在。

而對于沒有團隊的設計師而言，本該順暢的對上管理會碰到更大的困難。

1、時間不充分

作為名義上的領導，只是代管角色，本身有其他核心工作任務，對設計工作可能并不積極。當設計師主動做些設計推動，需要向上匯報時，可能需要提前排隊預約，甚至會被要求讓位其他工作事項。

如果設計師不做匯報，代管領導根本不知道設計師為產品做了什么貢獻。設計師的調研、分析、思考就都成了空談，最終的價值不過是界面上的按鈕和表格。辛苦到頭，個人績效根本就沒有保障。

2、專業度不夠

設計師可能會被劃分在開發團隊或者產品團隊，負責人在設計方面并不專業。在他們看來，一些設計優化可能就是在浪費時間，或者完全沒有必要。沒有上面的領導支持，設計師的工作就難以開展。

3、通不暢

領導比較忙的時候，如果遇到一些設計問題，不會親自找設計師，而是隨口對身邊人員一提，接著信息被層層轉發，容易造成理解偏差、信息缺失等問題。設計師需要二次確認，但是由于時間、空間等多重因素影響，很可能導致后續的溝通不暢。

4、政出多門

沒有設計團隊的設計師，往往會受到來自不同崗位領導的節制。每個領導會有自己的主觀想法，設計師就會無所適從。

所以在小公司中，設計師不能單打獨斗，要團結一切可以團結的力量。

首先要打動身邊的產品經理，讓他能夠感受到設計的力量和價值。如果當產品經理遇到設計問題，總是來找設計師商量，說明設計師已經獲得了認可。

其次就是爭取更多的合作機會，例如參加產品經理的需求評審會。利用設計評審會建立自己的設計影響力，深度參與研發流程，與更多項目人員產生工作聯系等等。

而在向上匯報的關鍵環節，設計師可以拉上產品經理一起，加重報告整體的分量，更容易獲得領導的認可。

總結

最近這幾年，企業面臨的困難越來越大，更加注重員工產生的個人價值。最大的感受就是只做純粹的設計師，發展之路會越來越窄。

未來，設計師做好個人管理將至關重要。

作者：子牧先生

轉載請注明：學UI網》設計師能力建設（3）：管理能力

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

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

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

一、什么是品牌定位？

品牌是如何做到家喻戶曉的？舉個例子，當有些用戶產生搜索需求時，他們的第一想法是“百度一下”，而不是“我要搜索”。百度作為一個品牌，在中國市場已經成為搜索的替代詞，反應出品牌對用戶心智強大的作用力。

打造強品牌的第一步就是品牌定位。不管是創建新品牌還是更新現有品牌，品牌定位策略會影響業務發展的方方面面，不僅是營銷策略，還包括產品開發、用戶體驗等。

那么，什么是品牌定位？簡單講，品牌定位就是決定企業希望在用戶心目中是什么形象的過程。以蘋果公司為例。蘋果作為一家科技企業，在全球范圍內被熟知，并在諸多同類科技公司中獨具魅力，受到用戶的喜愛與追捧，這不得不得益于成功的品牌定位。

蘋果賦予品牌三大內涵：Think Different，Tech that works以及Your privacy is safe with us。這些品牌內涵成功讓蘋果與其他科技公司形成區隔度，在用戶心智中占據獨特位置。在用戶看來，蘋果是與眾不同的、走在科技前沿的、創新突破的、隱私安全受保護的，這些品牌形象正是成功定位的結果，必將成為公司強大的品牌資產。

除了能夠讓用戶快速識別、在眾多競品中脫穎而出外，品牌定位還會對定價策略和銷量產生影響。如果產品定價更多依據高質量、高品質，同時品牌也將高質量、高品質作為定位點，那么在用戶心目中，產品價位會很自然地被合理化。當做購買決策時，用戶會被品牌獨特內涵吸引，快速促成購買，幫助企業提升市場份額，同時增強用戶忠誠度。

二、品牌定位如何做？

品牌定位的基本思路是STP（Segmentation市場細分，Targeting確定目標用戶群，Positioning定位），即將整個品類市場中的消費者劃分為不同細分人群，識別各類細分人群的特征和需求，并結合競爭情況、企業戰略等因素，選擇其中一個或多個細分市場進入，形成品牌定位，對每個目標細分市場進行品牌營銷。

從中可以看到，市場細分只是手段，定位才是目的，即S+T=P。

Step 1：Segmentation 市場細分

市場細分本質上是根據消費者的差異，將整個市場切分成不同部分。用于細分的維度/標準主要有四方面：地理因素、人口學因素、心理因素和行為因素。

其中，市場細分普遍使用的維度是人口學因素，比如女性消費力、銀發經濟等，就是按照性別、年齡等維度進行的細分。這一方法簡單高效，實用性強，但也存在一個很大的問題，即使用戶在這些方面很相似，但內心的訴求可能是完全不同的，導致細分市場內部差異很大，這就違背了細分的初始目的。

為了解決這一問題，市場細分會使用心理因素，從最深層的情感需求出發，確保每一細分群體內部高度相似，而不同群體之間高度區隔。

細分用戶情感需求的常用解決方案有Needscope、Censydiam等，通過“個人-歸屬”和“釋放-壓抑”兩個維度，相互作用，將用戶情感需求劃分為6個或8個類型，從而實現對某個市場的人群細分。

以Needscope為例。Needscope的心理學基礎是榮格的原型理論。榮格認為，原型是天生的傾向，在影響人類行為方面發揮作用。基于此，將人類情感需求劃分為六大類：有活力的、充分自信的、有能力的、關懷的、被動的、無憂無慮的。應用于不同品類時，對類型的描述可做調整。

在用Needscope做市場細分時，通常會使用投射工具挖掘用戶對品類的需求，形成該品類下用戶的情感需求細分。以資訊類APP為例，通過投射工具，挖掘到用戶對資訊類產品的情感訴求，可分為：新熱/前沿的、權威/信服的、智慧/有思想的、全面/可依賴的、輕松/實用的、愉悅/釋放的。

• 新熱/前沿的：這類用戶希望獲得最新、最熱的資訊信息，第一時間快速獲取，給自己帶來“走在前沿的”“領先的”的感受，他們對資訊產品品牌形象的需求中強調“新熱”“前沿”“領先”等。
• 權威/公正的：這類用戶對資訊的訴求集中在立場上，希望獲得客觀公正的權威信息，給自己帶來“公正的”“客觀的”感受，具備這些內涵的品牌形象對他們來說更有吸引力。
• 智慧/有思想的：這類用戶的核心情感訴求是“高端”“格調”，希望使用資訊產品帶給自己“有思想的”“有智慧的”感受，品牌形象突出“高品質”“有深度”會對他們產生吸引力。
• 全面/可依賴的：這類用戶的情感需求強調“安全”“可依賴”“平和”，使用資訊產品與他們較固定的日常生活相匹配，獲取“全面”“安全”的信息以便更好融入周邊環境，獲取內心的平和。
• 輕松/實用的：這類用戶看重資訊產品的“實用”價值，希望在“輕松”的狀態下獲取實用信息，解決問題，帶給自己“物有所值”“得力助手”的感受。
• 愉悅/釋放的：這類用戶追求“無憂無慮”“趣味釋放”，希望看資訊讓自己感到“有趣”“快樂”“釋放”，對于品牌來說，強調“娛樂”“輕松”“釋放自我”“有料有趣”對他們來說更有吸引力。

到此，我們便用Needscope對資訊類產品市場做了細分。

Step 2：Targeting 確定目標用戶群

在對市場做了細分后，接下來需要確定哪個/哪些細分市場可作為目標人群，主要考慮兩個因素：市場份額和競爭環境。

在進行情感需求細分時，通過量化方式可得到每一類細分人群的占比，代表著市場上有多大比例的用戶有這一類情感訴求，這就反應了市場份額的大小。還是以資訊產品為例，“輕松/實用的”這一細分市場占比最大，達到22%，說明在目前市場上，大多數用戶對資訊產品的訴求是讀完有輕松感，內容實用有幫助。

但僅考慮市場份額是不夠的，各品牌可能都看到了大的市場份額而紛紛進入，經過時間沉淀還會形成難以撼動的頭部品牌，競爭會異常激烈。因此，在選擇細分市場時還需考慮競爭環境，這一點可通過Brand Map來直觀體現。

在使用Needscope獲取用戶對品類情感需求的同時，還會了解目前市場上的資訊品牌滿足了用戶哪些訴求，因此形成每個品牌在不同情感細分領域的得分，得到品牌地圖。

通過品牌地圖，很容易看到市場份額最大的“輕松/實用的”領域競品數量多，且有今日頭條、騰訊新聞等頭部競品，對于新品牌或者小品牌來說，不再建議切入該領域。對于“愉悅/釋放的”這一領域，現有品牌數量適中，并且靠近圓心位置，意味著還未形成極具該特色的品牌，單從競爭角度來說，該細分市場值得考慮。

綜合市場份額與品牌地圖，便可確定目標細分領域。對于新品牌/小品牌，可以考慮“愉悅/釋放的”這一領域，因為市場份額可觀（20%），市場還未形成滿足程度高的競品；對于打算更新定位的大品牌來說，品牌本身具備與頭部競品對抗的實力，可以優先選擇市場份額大的市場，但需注意定位的跨度，建議選擇與現有定位臨近的區間。

確定好細分領域也就意味著鎖定了目標人群。在做情感需求細分時，會一并了解該用戶的人口學特征、產品使用行為等信息，因此，每一細分情感訴求都可以還原到對應的人群。

還是以資訊產品為例，“愉悅/釋放的”這一細分市場對應的人群在某些特征上顯著高于其他人群，這些明顯特征就是品牌后期要去營銷的目標群體，如以男性為主，偏年輕，年齡集中在18-24歲，更多分布在一二線城市，偏好B站、知乎等產品。

Step 3：Positioning 定位

按照S+T=P的公式，完成市場細分以及鎖定目標人群后，就得到了品牌定位。但這個階段的定位只是明確了方向，具體到細分領域內部該如何定位，還需進一步深探。

結合資訊產品品牌定位的例子，新品牌確定了“愉悅/釋放的”這一細分市場，接下來需要對該細分領域的目標人群和競品表現做深入挖掘，找到用戶未被滿足或滿足狀況不佳的需求，明確本競品之間的差距與不同，從而獲得更精準的定位點。

在了解目標人群時，不再局限于他們使用資訊產品的習慣，還需走進日常，挖掘指導行為的價值觀念和態度。

• 畫像及態度：人口學特征（性別、年齡、城市級別、家庭月收入等）、生活態度、價值觀、品牌觀，真實立體地還原品牌營銷對象
• 資訊產品使用行為：使用場景、需求、使用產品、頻次、時長、路徑、滿足點及痛點，發現本品在產品力上與競品的差距，挖掘產品賣點

• 資訊產品品牌態度：對各品牌的認知度、喜愛度、品牌形象認知，發現本品在品牌力上與競品的差距，挖掘品牌利益點

• 觸媒特點：偏愛的觸媒渠道、品牌溝通方式/內容、轉化效果，幫助品牌找到有效營銷渠道和傳播形式

到這個階段，就完成了品牌定位全流程。這些定位理念可以作為品牌發展的牽引思路，指引產品和設計圍繞定位的方向深入發展，為目標人群帶去更好的使用體驗。

三、品牌再定位

市場環境時刻在發生變化，品牌必須通過不斷變革來永葆青春，品牌再定位就是實現品牌變革的一種重要方式。

通常來說，品牌再定位有幾種可能情況。一是原本定位錯誤，品牌定位時可能找錯了目標人群，也可能沒有挖掘到精準需求，導致在后續對品牌監測時，發現品牌健康度、銷售情況等與預期差距太大，比如著名的萬寶路香煙，最初定位是針對女性，市場業績表現一般，后來更改策略重新定位為男士香煙，并使用了具有男子漢氣概的西部牛仔形象，使得品牌脫穎而出。

定位優勢不復存在也是促使品牌再定位的一個因素，這主要因為競爭環境發生了較大變化，新的競品出現，甚至成長成強勁品牌，這就削弱了本品品牌原有的優勢和競爭力，如果堅守原有定位，勢必會處于被動挨打的地位。

此外，目標客戶群消費動機和需求的改變，也是促使品牌再定位升級的重要動力。

總體來說，品牌定位是一個長期動態的過程，它既是品牌策略的起點，也是最終目的，即精準把握目標用戶需求，基于此推動產品和設計迭代，從而牢牢占據用戶心智，在與競品的競爭中脫穎而出，縮短用戶決策使用/購買產品路徑，促進用戶數量/銷量等產品核心指標的提升。

作者：設計中臺

轉載請注明：學UI網》品牌定位，搶占用戶心智第一步

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

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

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

一、卡片式設計的定義

1、什么是卡片？

早在互聯網時代之前，卡片就出現在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨立的個體，以至于后續被引用到線上界面中，同樣具有非常不錯的信息歸納效果。

2、互聯網中的卡片式設計

卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中，個性化和美感兼備的卡片式設計具有很強的易用性，它是一個UI設計組件，將標題、文本內容、圖形/圖片進行整合并模塊化，讓信息的表達更加直觀、操作也更便捷。

卡片式設計之所以能成為當今比較流行的趨勢，是因為它能讓界面信息更有層次感，從設計、交互、視覺以及用戶體驗等各方面來看，都有不錯的優點。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學習成本也是極低的。

二、卡片式設計價值

1、結構清晰

卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現，使界面結構更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨立的容器，讓歸納組合后的信息能快速突出重點，將復雜內容簡單化處理。

卡片式布局整齊簡練，清晰的信息結構有助于用戶瀏覽，方便快速找到自己感興趣的內容，避免用戶產生一種費時或感覺內容超長的恐懼感，還能節省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達到了平衡文字及圖片強弱的效果。

2、場景拓展

卡片式設計有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。

3、空間擴展

卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局，在空間有限的移動端設備中，還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分（若隱若現才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴展，在展示更多內容的情況下依然能保持模塊的整體性。

4、突出重點

卡片式設計能很好的通過邊界襯托出內容的整體性，特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致，即便在卡片數量較多的情況下，用戶依然能清晰的感知到內容的歸屬層級以及重要信息。

5、兼容多端

卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下，通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計，讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。

6、易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒，節省了一定的頁面空間，還有著更大的操作熱區，無需做到精準點擊。卡片式設計很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。

7、跳轉流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉，例如App Store“Today”頻道，點擊卡片后直接等比放大至全屏，給用戶一種還停留在當前頁面的錯覺，避免了傳統的跳轉頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗。

三、常見的卡片式設計樣式

1、四周留白

這種類型的卡片在UI設計中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。

2、懸浮內容之上

懸浮型卡片并非模態彈窗，與其相比，懸浮卡片不需要主動操作觸發，可作為臨時控件或長期固定顯示，并且比模態彈窗能承載更多信息內容，可通過伸縮來定義卡片中的信息數量，或多、或少、或展示、或隱藏，在頁面中非常靈活。

例如高德地圖首頁，搜索框及右側的功能入口長期懸浮在地圖之上，而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量，非常實用。

3、通欄類型

通欄類型的卡片具有更強的視覺阻斷，對區分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1、瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內容設計，它最大的優點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設計的瀑布流對信息的組合、包容性更強，不僅能在單屏區域內顯示更多內容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎上也做到了相對獨立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展現方式主要以文字、圖片或視頻內容為主，是一種較長內容的媒介，不管哪種展現方式，其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設計將信息進行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內容，便于用戶在長時間的滑動過程中也能快速識別重要信息。

3、左/右滑動

卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛，因內容本身就圖片居多，也更適合卡片式設計，相比平鋪具有更強的層次感，對用戶的吸引力較強，尤其最右側漏出的一小部分內容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。

4、優惠卡/券

卡/券設計實際是把生活中的實物映射到了UI設計中，通過模擬實物造型設計成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實感尤為強烈。

5、突發事件/臨時提醒

對于用戶主動觸發或系統臨時發起的非固定性內容，利用卡片式設計會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現在任何位置。

6、部分頁面頭圖

卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括，并在頭部位置進行重點突出，不僅讓原本單個的內容形成整體，還能營造出沉浸式的氛圍。

五、卡片式設計原則及小技巧

1、一致性原則

為了保持界面設計的一致性，需要將卡片樣式納入設計規范，例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等，大部分情況下都需要遵循設計規范。

2、功能定位決定卡片形式

在同一產品中，雖然要遵循設計規范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設計。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式，很浪費縱向空間、甚至會顯得很“雞肋”，用分隔線或間距留白來區分信息組顯然更合適；但對于電商類型的產品，利用卡片將不同的商品分隔后又進行歸納，會更容易識別，信息的可讀性也會更強。

3、避免過多卡片嵌套

卡片式設計本身就包含了容器與背景的層級表現，為了保持內容的正常展示與用戶瀏覽體驗，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區分，依然能達到想要的效果。

4、合理利用橫向空間

因為卡片內、外的雙向間距留白，在空間有限的移動端設備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁，在1.5屏的范圍內，幾乎每個模塊都能橫向滑動查看更多內容，從用戶體驗角度出發，這是縱向空間無法比擬的。

5、降低縱向空間的浪費

卡片式設計不是目的，其主要是用來更好的區分信息層級、提升用戶瀏覽體驗，因為卡片要作為獨立空間的存在，必定會增加上下間距而導致頁面拉長，因此，如無必要，不必盲目采用卡片式設計。

例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進行信息分組，試想一下，如果為了統一規范而使用卡片，不僅造成很強的割裂感、還會極大的浪費縱向空間。

6、長文表達不適合卡片

這點不用多說，新聞資訊類產品的內容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會跟隨形式，一方面可以讓同屏展示更多內容、增加空間利用率，另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。

7、突出一個核心內容

很多時候，我們總會聽到PM說這個很重要、那個也很重要，都需要突出一點，殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中，組始終牢記這個準則：一次只突出一個核心信息，以便于用戶快速、精準捕捉，切記不可貪多。

六、結語

卡片式設計之所有能快速流行起來且經久不衰， 其主要得益于自身的靈活性，尤其是在跨設備、跨屏幕上有著純天然的優勢，能忽略設備的差異給用戶提供更好的服務?？ㄆ⒉皇呛唵蔚臉邮皆O計，它是一種自由布局的設計語言，通過多種方式的信息組合、結合豐富的交互操作，給用戶創造出極致的使用體驗。

信息的呈現方式雖有不同，但最終的目的都是為了服務于內容，卡片式設計只是其中的一種形式而已，在設計過程中，我們需要根據內容結合實際情況作出合理的判斷，切勿拘泥于形式而忽略內容本身的重要性。

任何設計風格及展現形式都有可能成為歷史，卡片式設計也不會例外，但絕對不是這么快就結束，它依然值得我們去深究，力求打造更好的信息布局、更舒適的用戶體驗。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》卡片式設計 | 掌握這些技法，快速提升界面效果！

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

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

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

一、什么是“有駕在現場”

有駕是百度旗下汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。

車展對有駕來說是一個流量爆發的大事件，2021年廣州車展期間有駕品牌全網曝光累計6.3億次，創歷史新高。而【有駕在現場】是百度有駕歷年車展系列活動沉淀下來的品牌IP，已經成為活動固定的品牌標識。

二、借勢大事件，打造車展品牌全案

借勢車展的關注度與影響力，我們想要通過分析調研總結，對本次車展進行視覺定調，建立品牌識別體系，沉淀專屬有駕車展活動的品牌符號和印記；進行線上線下聯合推廣來打造有駕車展品牌全案，提升有駕的品牌影響力；優化活動體驗來為平臺進行引流，讓用戶對有駕產品有更明確的認知。

同時由于車展項目涉及跨部門合作，我們希望可以通過車展品牌全案，統一不同分工輸出的設計物料視覺一致性，以達到提質增效的目的。

以打造品牌全案為出發點，我們梳理了以下項目計劃。

同時，通過有駕用戶畫像分析，建立用戶標簽，分析用戶屬性及偏好，以更好的觸達用戶。數據顯示有駕APP大部分用戶為常駐中高線城市的年輕男性，經歷著數字化信息時代的便利，同時也受到更好的教育和各界多元的文化影響，更大膽更容易被新的東西所吸引。

三、分析項目現狀總結優化點

根據過往車展項目分析，總結發現存在品牌識別度較弱且沒有統一規范、品牌統一性較弱導致用戶認知成本較高等問題。

四、提煉品牌關鍵詞

根據用戶畫像及現狀分析，明確業務需求，通過腦暴的形式羅列品牌關鍵詞，基于品牌DNA對有駕車展進行視覺升級需挖掘符合核心用戶的語境語言和視覺偏好，提煉出品牌關鍵詞，根據關鍵詞規范可延續的品牌元素，打造清晰的品牌全案以更清晰的指導后續視覺設計工作。

五、視覺定調

根據關鍵詞確定了以賽博朋克風格為視覺基調，通過三維建模搭建北京地標建筑場景，搭配大膽的配色和新穎的元素樣式打造潮流個性且具有未來感的視覺畫面，匹配車展品牌的創新理念。

同時，在活動玩法方面，通過優化活動玩法，多條件激勵用戶給予用戶沉浸式的體驗。

六、建立品牌體系

確定基礎視覺調性后，我們通過形色質構來規范和輸出有駕車展品牌vi規范，建立有駕車展品牌體系，以提升視覺的產出效率，確保線上線下視覺輸出的一致性。

七、品牌LOGO

【有駕在現場】是有駕多年延續下來的品牌基因，本次車展也將繼續夯實品牌資產，進行優化升級傳遞品牌調性。

由于舊版的字體圓角等設計樣式相對柔和，不能準確表現本次車展視覺調性。為了傳遞有駕車展的潮酷、未來感，設計上將舊版文字加粗，圓角調整為直角，并進行一定的傾斜處理，使字體展現更加果斷硬朗；同時，我們將部分筆畫進行連接，讓字體充滿動感或速度感；最終的字型效果運用有駕品牌藍綠色光效以更好的與畫面結合。

八、色彩嘗試

由于整體風格參考賽博朋克，配色方面基于有駕品牌色進行延展，輔助色起到平衡主色的沖擊效果、活躍視覺，釋放潮流激情，突出重點模塊；元素上嘗試漸變色豐富元素樣式。

九、組件化通用元素

通過組件化通用元素，不同物料可以快速復用，節約設計成本，解決整個活動的視覺一致性，同時可以沉淀設計資產。

十、車展主KV

根據關鍵詞【未來感】【年輕化】分析適合有駕的設計風格和調性，通過三維建模的畫面表現形式，構建充滿科技感的賽博朋克畫面，打造潮流科技的有駕車展基礎場景。

主視覺場景設定為高樓聳立的公路上，有駕跑車向“有駕在現場”北京車展活動現場飛馳。充滿速度感的跑車、霓虹燈牌、高樓大廈色調和質感的碰撞，傳遞出一種直觀的科技感，引領新時代年輕用戶和有駕一起駛向未來。

根據上述的內容進行車展主kv的場景設定，輸出了草圖方案。

整個場景圍繞“有駕在現場”進行設計，融合車展相關元素，滲透品牌標識。

采用3D和2D相結合的形式，用C4D進行場景搭建，OC渲染器進行燈光材質的渲染，反復修改調整場景布局、元素等，最終輸出三維設計圖后進行PS后期，輸出最終的主視覺。

根據以上內容，輸出了對應的車展VI規范。

十一、車展專題頁

根據主KV及VI規范進行專題頁的延展，部分內容復用過往車展框架模塊。

新增了導航欄設計，便于用戶快速跳轉到感興趣的內容模塊，導航圖標大膽創新嘗試漸變色融合的配色形式，讓扁平的圖標有更加豐富的呈現。在保證閱讀效果的前提下，標題樣式、頁面元素及配色上更加潮酷。

十二、集卡分百萬 引流活動

過往集卡活動不僅與產品、車展契合度高，并且收益明顯，因此本次北京車展活動將復用、優化集卡類活動，讓用戶沉浸式集卡，從而提升用戶活躍及量級。

在玩法方面，本次集卡活動延續過往活動做任務得車卡的主玩法，優化活動體驗，新增了合成稀有卡可參與大轉盤抽獎的玩法以激勵用戶集卡，同時設立了車展大眾日，在當天進入活動的用戶可以獲得現金紅包，以此來激勵用戶回流，豐富活動玩法。

集車卡活動的主視覺元素及配色是依據vi規范，保證整體品牌調性的統一；普通靚車卡背景延續主視覺背景，稀有卡嘗試不同配色和場景凸顯其特殊性。

除了專題頁和集卡活動，線上還包括端內社區活動設計，整體視覺調性都與我們輸出的車展品牌vi保持統一。

十三、倒計時海報

為了給車展開幕造勢，我們嘗試復用主KV的三維建筑模型，將倒計時1、2、3與不同視角、不同配色的場景相結合，整體風格和車展主視覺保持一致，輸出了三張倒計時海報，豐富了整個項目的宣傳內容。

整個車展項目除了線上運營活動、造勢海報，還有線下展會宣傳物料及其他第三方輸出的設計物料，整體視覺調性都是基于我們輸出的車展品牌VI進行視覺延展，保持統一性的同時，又各自有不同的視覺傳播效果。

十四、總結

【有駕在現場】作為百度有駕車展品牌活動，我們通過未來感、年輕化、體驗感三個維度來塑造有駕車展系列活動的品牌調性，搭建了基礎風格，建設三維賽博朋克高品質主視覺，視覺元素細節驚喜感打磨，通過優化活動玩法進行引流，沉淀出新的大事件視覺設計思路，打造了有駕車展品牌設計全案。

未來我們的思考不僅僅只局限在視覺的表現上，還要繼續挖掘品牌系列化活動的延續性與獨特性，同時更要通過合理的情感互動建立和用戶的鏈接，為品牌長線發展提供更多價值。

作者：設計中臺

轉載請注明：學UI網》有駕在現場 車展品牌全案設計【百度】

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

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

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

我們將產品劃分為三個階段：

1.0：滿足了以產品為中心的設計，達成生產售賣通順閉環；

2.0：滿足了以消費者為中心的設計，考慮更多用戶體驗；

 3.0：加入以人文中心主義的設計，人文感官品牌情懷社區。

那么明確了我們本次升級的方向后，制定了整個產品的框架，底層加入了人文感官品牌情懷的相關因素，再應用到我們現有的業務上，在協同上進行高效的鏈接，產品到設計，設計與設計，設計到開發。最終形成了我們的前臺展現頁面。

根據我們的用戶畫像以及多輪訪談調研， 得知用戶的相關正負情緒。生活當中家務工作的角色分配問題，一直是經常出現的一個場景。用戶希望通過我們的產品服務，來提升生活的幸福指數！

在以此為前提的背景下，用戶希望我們是專業標準化的、省心高效的、溫暖溫馨的、舒適的、具有親和力的等等。最終都會期望以更有品質的生活而結尾，那么“品質生活”即為我們需要來傳遞給用戶的情感。

 那么品質生活是什么呢？

其實用戶對我們的要求是一款提升生活品質及愉悅感的產品，而非工具。

綜上所述，我們確定了以品質生活成為我們的本次設計語言升級的slogan，再結合業務的自身特性，我們進行了詳細的拆分后提煉出了以下相關關鍵詞，來滿足用戶更多的情感訴求。

干凈明亮 

居住環境的潔凈會帶給人更多舒適愜意的感受。首先對品牌色進行了升級，使其更鮮明。也延展與其相匹配的輔助色來打造出完善的色彩體系。

光 

專業 

高效 

用戶攜帶訴求而來，那么減少用戶感到麻煩的情緒，對產品的識別清晰、操作便捷提升是最直接影響的。

親和力 

服務行業需必備的能力，微笑服務也成為了我們的業務情感透傳標準。提煉出微笑符號結合我們的實際場景進行運用！

慢生活… 

在對用戶的相關情感訴求結合業務進行了落地后，對效率類設計原則也進行了相應的升級。

應用整體架構也是一個應用對外呈現的基礎結構，是系統風格的體現形式之一，除了特殊設計訴求，通常情況下，應用需要使用通用的應用架構來保持系統的一致性和用戶操作的易用性。

布局不是靜態固定的，柵格系統在一個應用內的重要程度不言而喻。我們設定了以4dp / 4pt為基數的柵格系統。

文本作為產品中用戶獲取信息的主要信息載體，字號大小和字重決定了信息的層級和主次關系。對字號、字重、行高以及組合字體進行了設定，為不同的場景創造了層級分明以及清晰的信息讀取體驗。

針對頁面內容區域的通用元素間距進行了分類。設計師結合具體場景的情況，來調用間距參數的適配邏輯。以此來結合柵格系統進行更好的適應相關視覺元素符號的對應變化。

 圓角參數  

結合業務屬性保證親和力的透傳，在產品盡量避免出現銳角圖形的設計表達手法。故此針對圓角的大小也進行了系統級別的定義，進行深度統一管理！

語意原則及動效等，并依據相關設計原則產出了組件庫。

在多元化的產品時代，時刻關注并滿足用戶的情緒，是產品能脫穎而出的關鍵！在建立設計語言手冊時從提升用戶體驗和滿足商業價值整體考慮，挖掘流程當中線上線下的觸點，多維度思考并總結落地，深度傳遞品牌理念。

設計語言手冊更多時候是一個相對寬泛的閾值，并非組件的固定值，在某些業務場景下能為用戶帶來增值體驗或較高商業價值時，可以被打破。最后，核心就是在搭建語言手冊時應思考更多“為什么”這么做！

 作者：58UXD

轉載請注明：學UI網》如何通過設計語言手冊來傳遞品牌理念！

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

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

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

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

二、科技

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

三、時尚

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

四、酷炫

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

五、好吃

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

六、夏天

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

七、清新

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

八、快樂

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

九、可愛

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

十、健康

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

十一、運動

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

十二、科幻

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

十三、喜慶

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

十四、復古

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

十五、中國風

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

十六、夢幻

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

十七、女性

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

十八、優雅

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

十九、經典色彩組合

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

正文

經常使用愛奇藝刷劇的同學，有沒有發現愛奇藝的應用圖標又變了。前段時間愛奇藝針對品牌設計進行了較大的調整，最近又悄悄地將應用圖標的背景色換成了這種多彩色混合漸變的形式。

針對這個視覺效果估計大家各有看法，我們就不討論這個話題了，今天黑馬哥是來出教程的~O(∩_∩)O~。

這個類似于極光/彌散漸變的風格最近也比較流行，在 UI 場景中的運用也是比較普及的，被運用到應用圖標的案例中相對較少。大概的回憶了一下，也有一些產品會使用，特別是比較知名的 Instagram 很早之前就使用了，也成為了流行趨勢中的優秀案例之一。

通過極光/彌散漸變（混合漸變）的形式強化應用圖標外輪廓背景，不僅可以提高視覺感，也是體現年輕化趨勢的一種色彩表現形式。不過漸變中的色彩本身也是關鍵性的因素，如果色彩不夠年輕活潑，帶來的效果也是千差萬別的。

一、漸變的表現形式

漸變色在我們的設計中是非常普及的，漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營造不一樣的視覺體驗，可以豐富色彩環境、強化光影質感、增強層次感和空間感等。

1、線性漸變

這是最常見的一種漸變方式，具備明確的方向性，由兩種或者多種顏色組合形成。相較于單色來說，線性漸變可以使得畫面更加豐富，色彩營造出的層次感更強。

2、徑向漸變

徑向漸變是以中心向外擴散而形成的圓形漸變，可以作為立體感的表現，也可以營造向中心聚攏的光影效果。

3、角度漸變

角度漸變形成類似于雷達掃描的效果，屬于運用相對較少的漸變形式。在一些應用圖標的外輪廓背景中會被使用，也可以作為營造產品的光影變化。

4、混合漸變

混合漸變就是多種顏色隨機混合，色彩形成不均勻的自然彌散開，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風格，可以呈現出豐富的色彩變化和隨性自然的年輕化趨勢，被廣泛應用到平面設計、UI 設計、電商設計等眾多視覺設計領域。

5、流體漸變

流體漸變就是多種顏色漸變組合，形成帶有流動感的視覺效果，通常作為背景來豐富設計的視覺感。也有動態形式的流體漸變，在 APP 和一些屏幕壁紙中出現，帶來的感官體驗也是非常不錯的。

隨著視覺感官體驗的不斷追求，設計師已經不滿足于趨于平面化的漸變形式，探索出造型多變、色彩豐富、刺激感官的視覺體驗，以更加豐富的表現形式來探索漸變方式。

二、漸變小教程

線性漸變、徑向漸變和角度漸變實現起來比較簡單，軟件自帶的漸變屬性即可滿足。下面重點給大家分享如何實現混合漸變的效果，以后再單獨給大家分享關于流體漸變的技巧。

混合漸變顧名思義就是將多種顏色進行混合，形成色彩豐富的過度效果，需要把控的是顏色之間的自然過渡。

方法一：

通過繪制幾個不同顏色的形狀圖形，然后執行高斯模糊形成混合漸變，模糊的參數值要適當大一些，一直到顏色自然過渡為止。

方法二：

如果想要隨機性大一些，可以通過畫筆工具隨意涂抹顏色，這樣形成的效果更加隨機性。然后再執行高斯模糊將顏色融合，帶來自然隨性的視覺體驗。

三、分享幾個案例

不能只是紙上談兵，只有反復磨練和嘗試才會熟能生巧。根據以上的方式黑馬哥完成了以下的作品案例，大家也一起來動動手吧！

1、鄰近色系易把控

混合漸變技法層面來說并不難，配色是相對具備難度的，很多同學都會因為配色不到位而做不出優秀的作品。針對應用圖標設計中的配色來說，鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內的色值，混合出來的色彩排斥感都是比較低的，融合度比較高，能夠呈現出比較舒適自然的視覺感官體驗。

如果選擇了色相角度大于 60° 的色值，只要數值的增減關系控制在 30° 以內都屬于可控范圍，這時候如果出現較大的色彩排斥感，可以通過降低不透明度來進行視覺平衡。

2、強視覺感還得對比色

雖然鄰近色的處理比較容易把控，但是帶來的視覺感也是與顏色對比關系成正比的，想要達到強視覺感還得選對比色。色相選擇范圍在 120°~180° 之間的色值，容易形成較強的視覺張力，通過增加高斯模糊的值才能稍微過度相互之間的色彩排斥感。

3、學會舉一反三

今天分享的經驗不局限于應用圖標的設計范疇，我們要學會將這個技法舉一反三，運用到更多的設計場景中。比如在下面作品中的一組信息卡片的設計中，通過混合漸變形成的卡片背景提高了局部的視覺感，配合磨砂玻璃質感的運用，提高了該部分的視覺感官體驗。

4、其他作品欣賞

為了輔助大家理解和開拓思維，為大家選擇了幾個類似的案例作品，希望可以帶給大家更多設計靈感。（以下作品版權歸屬原作者，僅作為學習交流）

四、布置一個小作業

通過對混合漸變實現技巧的學習和案例欣賞，相信大家對于混合漸變有了比較全面的認知。學以致用的目的，下面為大家準備了一個小作業，希望以此來強化大家的理解。

根據以上示意圖提供的高保真原型圖，以混合漸變的形式增強其作品的視覺感。

以下方案為黑馬哥完成的一個示意，大家可以轉換思維和調整新的配色方案，輸出不一樣的全新作品。

作者：黑馬青年

轉載請注明：學UI網》這個效果原來是這樣做出來的

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

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

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

首先，我們一起解讀業務場景、身份、及功能；業務場景是全品類綜合電商直播間，身份是主播的虛擬助理，直播間的功能是為用戶答疑解惑；基于這三個背景，初步勾勒了角色標簽，目標是創造一個富含親和力的虛擬助理形象，來呼應全品類綜合直播場景和虛擬助理身份。 

行業洞察

設定架構

最后，結合形象的“內在+外在”的體現，與巴卡羅兩大風格要素“曲直+量感”，來塑造親和力的直播間虛擬助理形象；拆解內在圍繞性格/氣質/眼神特征，外在圍繞形象（體型/面貌/穿搭）、舉止與表情三大框架設定形象，共同塑造親和力和感染力的形象。

01 內在心與神 

解析內在形象對應的兩大風格要素-曲直+量感，細分量感的指標是成熟/青春、外向/內向、開朗/穩重的綜合值，曲直的指標是熱情/冷漠、柔和/剛烈、感性/理性的綜合值。而親和力的內在形象，量感偏小—開朗的性格、青春樂觀的心態、以及外向的性格；曲直偏曲—需具備大方熱情的氣質、柔和的眼神、感性的情感表達，拉近和溝通者的距離，在直播間為用戶答疑解惑時，第一次見面也能給所有人留下親切、可信任的印象。

02 外在形與貌

解析外在形象對應的兩大風格要素-曲直+量感，細分量感的指標是大小、輕重、粗細、深淺、寬窄、薄厚、濃淡的綜合值，曲直的指標是直曲、冷暖、方圓、硬軟的綜合值；量感偏小—特征是窄細淺小短薄淡，帶來柔和自然；曲直偏曲—特征是圓暖曲軟，和用戶溝通時圓潤舒適，以此來指引親和形象的設定。  a）形象親和接下來，外在形象圍繞體型/面貌/穿搭三步走框架，搭建親和力的決策框架。體型

第一步，體型選擇胖瘦適中（曲直適中）；肩腰臀比例協調/凹凸有致的X型（量感適中），理想型身材穿什么衣服都好看。

面貌五官

第二步，五官的起點是臉型，選擇曲直適中，長短適中的鵝蛋臉（額頭與顴骨等距），不挑發型。

確定臉型后，是五官的決策，我們通過洞察發現，許多保持高熱度的卡通形象最顯著的共同特征就是擁有一雙甜美可愛的大眼睛，表情生動親切，無攻擊性。在五官比例上，三庭中的中庭稍長，五眼中兩側較短，注重眼睛神情的表達。因此，在設計初始，我們先以眼睛為中心，再逐一展開眼睛/眉毛/嘴巴/鼻子的設定。

眼睛：定位生動的大眼（量感大）獲得生動的神情；眼型結合圓眼+桃花眼（偏曲），上眼皮弧度圓潤飽滿，自帶月牙般微笑感。

眉毛：定位粗細適中（量感適中），眉峰圓潤/眉尾自然向下的小挑眉（曲直適中）。

嘴巴：定位小嘴唇（量感小），唇型選擇微笑唇，嘴角上揚提升友好度（曲直適中）。

鼻子：定位鼻翼窄小的小鼻（量感?。?；鼻型選擇鼻頭上翹的小翹鼻（曲直適中），搭配鵝蛋臉臉型。

妝容

在妝容上，嘗試融入電商熱賣元素-火苗，來進行面部彩繪，呼應電商直播間虛擬助理的身份。

頭發

五官和妝容確定后，開始做她的頭發，長短適中的中長發（量感適中）、發尾微微外卷俏皮柔美（曲直適中）、高顱頂發型蓬松透氣。

到這里，咱們面貌的部分就告一段落了，親和力的五官，并不是說每一個五官都要量感小、曲度適中；咱們圍繞業務場景、身份與功能，科學的創造虛擬形象，需注重五官與臉型的比例，和五官之間的相互搭配。

穿搭

第三步，是穿搭的設定，以上體型和面貌量感/曲直的設定，與穿衣風格有著密不可分的關系。我們以修身得體為方向，嘗試了優雅的輕熟風、服務型身份的職業裝、以及休閑百搭的休閑裝-T恤和牛仔褲；因輕熟風的連衣裙便利性差，職業裝略過正式有距離感，最終選擇休閑裝即適用于多品類直播間場景，又給人親和感拉近距離。

b）舉止優雅

根據虛擬助理的六大服務場景，定義優雅的肢體語言，在與和用戶交流時，從肢體語言（站姿、手勢、頭部、眼神、面部表情….)中流露出周到的禮節、細致的行為，給予用戶友好的指引與反饋。

c）表情生動

咱們按照場景把基本情緒劃分為快樂、傷感兩類；歡迎/引導/收到贊的正向行為，表現為快樂的微笑；答不上來問題和收到踩的負向行為，表現為傷感的噘嘴/皺眉，避免使用帶有攻擊性的（悲痛、憤怒、憎恨）。

‘

寫在最后

作者： 富媒體用戶體驗 

轉載請注明：學UI網》百度直播丨塑造親和力的直播間虛擬助理形象

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

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

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