01.背景

運營設計主要包括日常運營（以介紹產品為主）和活動運營（通過促銷或游戲的形式，拉新促活），其目的都是要吸引用戶關注，實現流量的最大化，最終完成商業目標。

那設計出好看的畫面吸引用戶就是運營設計中的核心了嗎？

答案肯定是不確切的。畫面的呈現只是吸引關注的第一步，信息的傳達才是保證用戶駐足的關鍵。隨著獲取信息的便捷，人們對信息的關注越來越碎片化，甚至只關注標題，所以標題的呈現無疑是運營設計中的核心關鍵。

a

02.神器誕生

標題設計有很多具體的方法，但隨著用戶對信息清晰度的更高要求和審美疲懶，裝飾過多或者變化過多的標題已不再流行，取而代之的是言簡意賅、辨識度高的，更像是“沒有設計”的標題設計。在日常的設計中，設計師通常采用合適的字體再通過變形等設計手段，使標題字更有品質感。如果可以直接使用一款字體，既能夠清晰表意且兼具個性，又能夠節省設計師創作的成本，這無疑是標題設計的首選方式。

字體作為信息傳達的核心因素，能夠起到統一品牌理念和精神的作用，正是58設計團隊當前探索的領域之一。就此，58UXD設計團隊的首選原創字體——微笑體誕生了！這款字體在表達企業精神的同時，兼具清晰且個性的特征，并為設計師減輕了工作中標題字體設計的負擔！

微笑體誕生

f

03.品質提升，效率UP

· 微笑體是為標題而生，它可以滿足運營設計中的絕大部分場景，應用于不同的表現形式

1）輕量化設計頁面中，增加簡單效果，就具有一定的設計感

招聘業務線活動banner

58到家-saas系統系列海報

2）需要突出標題品質時，可增加層次感或立體質感

58到家-“城市黑盒”活動畫面

3）配合3D設計風格時，亦能發揮其厚重優美的字形

2021春節運營活動-房產/招聘/二手車主會場畫面

· 應用廣泛，統一集團品牌感

發布近半年，微笑體已應用到58平臺各類運營設計中，并在集團各渠道發揮作用，成為58對外展示的品牌特質之一

58到家線下店內海報

58同城招聘業務日?；顒?/span>

58同城平臺日?；顒?/span>

58同城校園招聘

員工福利-蜂蜜禮盒

自5月8日微笑日發布微笑體字庫后，主創團隊不斷優化微笑體，更新完善了含有3627字的字體包。在UXD自主研發的兩款運營頁面設計平臺——斑馬智能物料設計審核平臺和靈動編輯器中，微笑體已嵌入使用，為運營設計師提供更加便捷的工作方式，為運營工作提供高效且高質量的輸出環境。

靈動編輯器

w

04.持續賦能

微笑體在工作中運用的成功，一定程度上解決了運營設計的核心部分。當然一款字體是無法覆蓋所有的應用場景的，運營設計需要豐富多樣的視覺呈現，需要標題字和其他文字信息以及畫面共同完成。

在設計微笑體之初，58UXD組建了專門字體工作小組——Fontwork造字計劃。團隊本著提升58企業品牌的初心，為設計工作提效的目的，啟動了字體設計的第二波征程。為補充微笑體的使用空缺，同時為滿足更多的使用場景，第二款字體的字形確定為有設計感的正文字體。

第二款正文字體已征集完畢，在四十多款參賽作品中確定了一款字形，該字體目前正在如火如荼的設計中，待與大家見面時再解開它神秘的面紗～

字體大賽作品展示

e

05.結語

為了給用戶持續不斷的新鮮體驗，為了適應不斷變化的流行趨勢，高品質的運營設計目前還是主要依靠人力完成。合適且優秀的字體解決了運營設計工作中的一部分問題，如何在保證設計質量的同時，提高效率，優化工作方法將會是我們不斷探索的方向。

原文地址：58UXD （公眾號）

作者：環鐵藝術家

01.背景

不過，此類供給方式也存在一些不可避免的問題：

· 家政從業人員信息變更很迅速，匹配雇主的時間窗口較短；

· 商家訂單在匹配家政從業人員時，匹配成本很高；

· 商家必須手動實時維護大量微信群，以保證獲取新鮮資源對接；

· 被動且不受控制，好單有可能被爆單，且無法控制傳播路徑和時間；

基于這些問題，58家庭服務通過平臺策略，力求將線下甩單、合單的合作模式移植線上，以初期實現”家政從業人員 – 商家訂單需求”雙方供需智能匹配的形式，為以后在線上高效率完成“銷售線索-家政員匹配-服務簽單-營收分配”的流程打下基礎。

02.用戶研究與設計策略設定

通常，我們稱呼家政從業人員為阿姨，阿姨是58家庭服務平臺十分重要的勞動者資源。所以我們也十分看重阿姨們在使用產品時的體驗，致力于提高產品的易用性與實用性。

對此我們通過多種途徑相結合方式，對58阿姨使用產品的狀態進行調研，并得出了一份適用于58阿姨的無障礙設計方案，輔助我們跟緊用戶訴求，讓設計策略為用戶服務。

03.阿姨端，圍繞無障礙原則展開的設計

主要秉承三個原則：清晰準確、感知清晰、操作簡單

· 瀏覽型頁面

與簡歷創建流程不同，阿姨在接單大廳尋求工作機會時，其接單的目的屬性更強，信息讀取的需求更甚于操作，通用規范會讓頁面拉的很長，所以設計上，在保持同等字號的同時，可以將需求單內各項信息之間的間距按基數縮減，保證頁面信息的承載率。

然后針對重點信息增加放大功能，同時強調字重和色彩的對比，讓讀取更加人性化。

· 操作型頁面

并在此基礎上放大點觸目標，以提升阿姨的點擊準確率，避免誤觸。

同時，在調研的時候我們發現，我們平臺的阿姨其實在視覺障礙方面的影響并沒有我們想象的那么強烈，只是對信息獲取的反饋要求更高。所以在設計時，要降低阿姨對信息理解的障礙，及時就近給出阿姨對操作的明確反饋和提醒

當然反饋也可以結合場景，將功能引導或者信息提示與相關場景相融合，阿姨的感知也更直觀，更強烈。

04.商家端，開啟人-單智能匹配

將需求單中，C端客戶的每一個要求，都定義成一個模塊，從視覺表現和層級關系上進行信息的細分分類，豐富每一個內容點。

滾動形式的單選，范圍太過籠統且不能跨域，多選雖然能滿足大多數情況，但客戶的要求千人千面，這種形式依舊不夠靈活。

所以設計上增加了附有兩個連續滑塊的選擇器，允許商家根據客戶需求設定某個特定的值或者一個范圍值。例如身高、體重、年齡、薪資范圍等，實現對需求的定義更加自由精準。

05.結語

原文地址：58UXD（公眾號）

作者：環鐵藝術家

關鍵詞排版是很常用的一種排版方式，可以讓面試官一下就抓到重點。但是大部分人都是圓圈加文字的表達方式，會顯得有些簡單、乏味。如果能配上圖形或者圖標搭配就會豐富、精致很多。

02.模塊分離

將頁面中部分的內容模塊分離出來展示，可以是圖形或是卡片等等。不僅可以強調頁面的層級展示，還可以讓作品集排版更加出彩。

a

03.細節特寫

作品集排版頁面中可以穿插一些放大的特寫，可以展現一些精心制作的小細節，或者項目當中需要強調的內容。不僅可以豐富頁面的排版形式，還能一目了然地展示出項目的側重點。

這個看起來好像是“廢話方法”，一個主體圖形和文字進行搭配，但是精髓在于文字部分最好是兩種粗細或者字體或者大小寫的不同對比，讓文字內容更有層次。

05.平分畫面

將畫面一分為二，填充不同的顏色背景。有鮮明的層次感和形式感，可以很好地表達一些需要對比的內容，或者需要進行多維度展示的內容。

原文地址：設計師深海（公眾號）

作者：設計師深海

轉載請注明：學UI網》作品集這樣排版，不進大廠都難！

一、什么是單選框？

顧名思義，單選框表示只能選擇一個選項，再具體一點，可以理解為只能從一組相互排斥的選項中選擇其中一個選項。

單選框有選中和未選中兩種狀態，樣式上用填充的圓表示選中，描邊的圓表示未選中，通過改變狀態來給用戶反饋。

二、何時使用單選框？

除了單選框，選擇類組件還有很多其他形式，比如下拉列表、復選框等，我們首先來對比區分一下這幾個易混淆的組件。

單選框VS下拉列表

當用戶需要從大量選項中進行選擇時，為了節省空間，可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中，需要用戶多做一次選擇，操作成本和認知成本都會變高。

▲ 當選擇不多于3項，建議使用單選框，這樣選項可以直接展示出來，用戶只需要點擊選擇即可；當選擇超過5項時，可以考慮使用下拉列表，確保選項不會占用大量空間。

單選框VS復選框

復選框允許用戶一次選擇多個選項，選中其中一個選項，不會對其他選項產生影響。對于何時使用單選框還是復選框沒有明確的界定，需要具體問題具體分析。

三、單選框設計指南

始終確保良好的可用性

對于這樣一個簡單的組件，想要做好用好，在設計上有一些不可忽視的細節。

首先要避免在單選框列表中嵌套下一層級的選項，因為使用單選框的目的之一就是為了讓所有選項清晰呈現給用戶，嵌套過多層級會導致整個結構的混亂。

▲ 另外要明確的是，單選按鈕不應該是唯一可點擊的熱區，而是要將按鈕和標簽一起作為熱區，便于用戶準確點擊操作。

▲ 這個選擇模塊由單選按鈕、文字標簽和圖標共同組成，可操作的范圍很大，視覺層次也很清晰，設計得既整潔又實用。

保證可讀性

單選框列表的布局要有邏輯性，盡量減輕用戶的認知負荷。

▲ 用戶習慣于上下瀏覽選項和列表，如果將這些選項水平排布，可能會造成兩點問題：一個是瀏覽時視線移動的不習慣，另一個就是如果選項位置過于緊湊，用戶可能不知道每個標簽到底對應哪個按鈕。

除了列表要垂直布局，標簽也需要很簡潔。標簽越長，用戶需要花費更多的時間和精力才能了解整個列表。

提供默認選擇

想象這樣一個使用場景，我們下載了一個新的設計軟件，第一次打開時跳出一個彈窗，提示我們是選擇經典布局，還是個性化布局，但是我們對這個軟件不是很了解，可能并不清楚這兩個布局到底是什么樣子。

最后

最后為大家精選了單選框設計樣式資源，學習好的單選框設計風格和樣式，獲取最新的設計靈感！

關注公眾號后臺回復【單選框】獲取設計文件。

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

作者：Clippp

轉載請注明：學UI網》好的單選框設計具備哪些特質？把握住這些知識點！

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

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

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

1、中性色色值為什么要使用透明度？ 

有細心的用戶發現，在 Ant Design 的設計規范里，中性色色值可以按照透明度來設置，見下圖中性色色值表（百分數代表不透明度）：

平時大家似乎更喜歡使用 #333333、#666666 這種色值，那使用透明色有什么優勢呢？

我們知道，中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線等場景中也非常常見。產品中性色的定義需要考慮白色背景以及有色背景的差異，同時結合 WCAG 2.0 標準。

現在  Ant Design 的色板中，透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

如下圖示例，我們以顏色 gray-6 為例，這個顏色在實色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同，但是在灰色或其他顏色的背景上，卻有明顯差別：

因此在透明色模式下，以中性色為主的前景色，會與背景色有一個更明顯的色彩對比，對背景的兼容性也會更好，保證內容的可讀性。

Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇，也會使組件更具通用性。

2、組件和設計師之間的關系是？ 

當下很多常見的、優秀的組件庫，都為設計和開發的工作提供了便利。

那么使用組件庫可以替代設計師么？組件和設計師之間的關系又是什么呢？我個人觀點如下：

1 . 組件是「效率」工具

組件是工具，用來為設計師和開發提升工作效率。所有組件庫的初衷都不是要替代設計師，而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效：

（1）工作內容上：可以將不必要的、重復性勞動的時間節省出來

（2）工作流程上：便于設計師與前端開發做交接和協作，節省溝通成本

2 . 組件是「質量」保障

使用組件做設計稿，可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法，建立相對底層的系統，設定了設計和開發的質量底線。

基于組件規范設計和開發的產品更容易具備：

（1）一致性：具備相對一致的表現樣式，設計風格和交互體驗上均可保持統一

（2）可用性：對于用戶操作，可以保證最基本的可理解性和可操作性

（3）審美性：符合基本審美標準，雖不會很亮眼，但也不會很難看

3 . 設計師要「沉淀」業務組件

設計師可以嘗試沉淀有針對性的業務組件。很多業務領域有其獨特性，比如金融類組件和政務類的產品頁面列表內容就有很大區別。單一的元素組件在應用的過程中可以被再次組合和沉淀。

舉個例子，我之前在做業務需求設計時，相比于 AntD，其實更常用的是 TechUI —— 它是建立在 AntD 基礎上的、由我們螞蟻的設計師通過對業務需求的提煉、組合和封裝，做成的一套屬于螞蟻自己的【業務組件】。

再總結下二者的區別：

– Ant Design：是所有人的，是通用的，是單一的原子級別的（比如一個輸入框）組件。

– TechUI：是螞蟻自己的，是私有的，是組合的區塊級別的（比如一整個表單）組件，更具備螞蟻集團自己的業務屬性。

針對你公司不同業務類型，沉淀出不同種類的區塊級別的組件，這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

4 . 設計師要「洞察」業務訴求

使用組件可以讓設計師把節約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一，坦白的說，即使你的設計稿全部使用了 Ant Design 的組件搭建，最終的頁面效果也仍不完善，在用戶體驗上始終可以更進一步。

設計師應該更多去關注對用戶需求和業務邏輯的深入挖掘，不僅僅是在界面細節的表現手法上下功夫，還要學會站在全局，用系統性思維看待每一個項目，為整個產品的系統流程做優化，做更全面的產品體驗升級。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》工作經驗｜ B 端產品組件設計細節及經驗分享（一）

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

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

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

1.明暗是影響質感的最關鍵因素

我們來看一組對比，左側是原作，右側是星友的練習作品：

很明顯，練習作品的質感沒有原作好，其中最重要的一個原因就是，原作的明暗交接線非常清晰，明暗對比很強烈，而練習作品就會有點平。

很久之前做的這個作品，當時看起來還可以：

但現在一看，也是缺少明暗對比，導致整體質感差了很多，人家下面這種在明暗方面就對比很強烈：

所以，質感看起來就杠杠滴！

再比如下面這組對比，上面的是原做，下面的是臨摹：

我覺得臨摹的要比原作好，我們看底部對比，下面那個底部暗部足夠暗，形成強烈明暗對比，整體質感看起來就很舒服。

兄弟們，這個明暗非常重要，要牢記?。?

2.邊緣光的重要性

再來說一個影響質感的因素——邊緣光。

我們看下面這個對比，左側為網上原作，右側為練習作品：

能看出來什么問題嗎？右側是不是和背景糊在一起了？如果，主體都和背景糊在一起了，那層次肯定就不夠，整體效果也就差了很多。而這一切的問題都是因為沒有加邊緣光導致。

其實以前做項目的時候，我也遇到過這類問題，比如這個頁面，最開始也是主體和背景糊在一起：

后來加了一點邊緣光，調整一下燈光色調：

效果立馬就好多了。

其實很多作品，都是帶有邊緣光的，這光一加上，立馬就感覺高級很多：

是不是，兄弟們！

3.前中后景的三個層次

下面這組設計是十豆三同學做的：

最開始做的更新是比較常規的火箭，后來用品牌形象加飛船元素改了一版，更加有創意和特點了。

但是這里我們來說下后面這張圖的不足，我會覺得主體和背景銜接的還不夠自然，如果我們把畫面分成前中后三個層級，這個畫面就缺少了一點中層的內容。

我也經常做這種類似的畫面，比如這種：

如果說黑色是背景，白色形象是前景，那么背景上面的這些元素就是中景：

這個中景是提高畫面整體質感的關鍵因素之一，非常重要，不可忽視！

再比如這個畫面：

也是在中景加了一些圖形和雞蛋，讓整體畫面更加豐富，層次更加清晰。

總結

好了，以上就是我經常使用到的提升設計質感的小方法，希望可以幫助到大家，么么扔！

01 對比色配色實操

本次提取上期“對比色配色”理論篇講解的部分文案，進行配色的實操演示：

方案一

在PS中新建文件，背景選擇藍色。

英文放大鋪滿背景，并加入邊框。顏色選擇藍色的對比色紅色。（英文字體：Champion)

新建圖層，填充白色，用套索工具畫出不規則選區。

點擊“添加圖層蒙版”按鈕，給圖層添加蒙版。

選擇蒙版，執行“濾鏡-濾鏡庫-噴色描邊”，得到不規則的撕紙邊緣效果。

復制一個新圖層，填充紅色，向上錯位移動。

在白色圖層添加“圖層樣式-投影”，撕紙效果就制作好了。

復制“文字”和“矩形”圖層，移動到紅色圖層上方，填充藍色。

按“Ctrl+Alt+g”建立剪切蒙版，讓文字只在紅色圖層范圍顯示。

把藍色字改為白色，白色是萬能的調和色，可以緩沖藍紅對比色強烈的對抗性，也可以讓作品更加透亮。

最后加入文字排版和紙張褶皺效果，設計完成：

方案二

使用AI進行制作，顏色選用對比色紫色和綠色搭配。（英文字體：Current）

給英文創建輪廓，取消群組。

使用直線工具畫出一條分割線，使用“路徑查找器”中的“分割”功能，把字母切割開

取消群組，右鍵選擇“變換-旋轉”180度，調整兩個色塊重合。

執行“效果-風格化-陰影”加入陰影。這樣得到了折紙效果：

使用相同的方法制作出其他字母：

最后加入文字排版和紙張褶皺效果，設計完成：

方案三

繼續使用AI進行制作，把所有英文放置在畫面中。（英文字體：Current）

顏色選用黃、藍、紅的三色對比色進行搭配。

最后加入文字排版和紙張褶皺效果，設計完成：

可以嘗試新的配色方案，

此方案顏色選用橙、綠、紫的三色對比色搭配。

本期使用的字體、樣機、源文件，請關注微信公眾號：藝海拾貝Design（ID：YHSBds），公眾號主頁回復“對比色”獲取下載鏈接。

優秀作業展示

01 NoctilucaGladys

02 風少

03 沕風

04 龍娟（2張作品）

05 七陌

06 Joyce

07 蛋蛋DAN

08 珞影隨行

09 咪奧mao

10 小孔呀

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》用好“對比色”，讓你的設計更有吸引力！（實操篇）

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

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

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

什么是《請回答》

項目背景：

如何打造有溫情的品牌活動呢？

01品牌的延續

 

02主視覺傳達溫情與品牌

 

03核心玩法滲透溫情設計

  

  

 

04群像故事海報傳播，擴大影響力

項目總結