另一種流行是關(guān)于星號(hào)和星號(hào)衍生圖形的元素，星號(hào)在拉丁語(yǔ)中的意思是小星星。無(wú)論是五角、六角或是八角、這個(gè)符號(hào)元素都會(huì)給人留下深刻的印象。太陽(yáng)、星星、花朵、火花，星號(hào)的衍生圖形可以表達(dá)的意思比你想象得更多。

對(duì)四邊形進(jìn)行四等分，作為一個(gè)容器或者說框架來(lái)進(jìn)行設(shè)計(jì)很容易表達(dá)多樣性而同時(shí)又具有統(tǒng)一的秩序。但是要注意內(nèi)部元素的簡(jiǎn)化和整合，否則設(shè)計(jì)會(huì)散亂而牽強(qiáng)。

04.轉(zhuǎn)換路徑

這個(gè)風(fēng)格很有趣，很難去定義，但是你一看就能懂了，它的特點(diǎn)很明顯。往往就是伴隨著一個(gè)路徑的轉(zhuǎn)變，可能像一條扭轉(zhuǎn)的絲帶。通常可以表達(dá)連續(xù)性的同時(shí)又具有轉(zhuǎn)換性的意味，就像某個(gè)重大時(shí)刻或者是一個(gè)關(guān)鍵的轉(zhuǎn)變，總之代表一個(gè)意義非凡的時(shí)刻。

05.圈

對(duì)于設(shè)計(jì)師來(lái)說，沒有比圓形更基本的圖形了，兩個(gè)圓形相減得出的圈是十分簡(jiǎn)單的操作，但是更是一種經(jīng)典的組合。它可以代表永恒、完美、統(tǒng)一、循環(huán)、洞、通道等等，結(jié)合漸變或是其它形式的設(shè)計(jì)，又可以呈現(xiàn)出一種新的意義。總之，這個(gè)形狀所蘊(yùn)涵的能量還有很多很多！

原文地址：設(shè)計(jì)師深海（公眾號(hào)）

作者：設(shè)計(jì)師深海

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》2022年LOGO設(shè)計(jì)新趨勢(shì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

1、善用黑白

沒有想法？沒有好的配圖？那么就只需要用到萬(wàn)能的黑色和白色，就可以迅速獲得一個(gè)具有正確構(gòu)圖的“抽象主義設(shè)計(jì)”。在作品中善用黑白將幫助你理解平衡、留白以及如何使用文字和幾何圖形。

讓我們快速看一個(gè)例子，黑白的運(yùn)用對(duì)作品的展示簡(jiǎn)單而有效，看起來(lái)就很高級(jí)。

2、保持畫面平衡

我喜歡用我自己發(fā)明的“東西”來(lái)測(cè)試我的設(shè)計(jì)，我稱之為“平衡方案”。這是一個(gè)黑白的內(nèi)容塊方法，我會(huì)用簡(jiǎn)單的幾何圖形來(lái)代替內(nèi)容。

我的這個(gè)方法是讓黑色塊蓋住元素，然后計(jì)算左右的黑色面積，大致相等的話，就視為平衡。如果把這個(gè)原理應(yīng)用到界面中，會(huì)得到這樣的結(jié)果：

用黑色矩形替代主要內(nèi)容，灰色是次要內(nèi)容。顯然你必須靠眼睛觀察，但其實(shí)我們也可以直接計(jì)算。左側(cè)區(qū)域的黑色矩形面積之和為（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右邊的大矩形面積為（446×446） = 198916px。他們之間的差別很小，誤差只有3.9558%

我現(xiàn)在在設(shè)計(jì)之前不用去計(jì)算，經(jīng)過多年的練習(xí)，這種意識(shí)就變成了自然而然的事情，因?yàn)槟愕难劬?huì)感覺到不平衡。

（彩云注：關(guān)于視覺平衡，這里其實(shí)講的是視覺面積要大致相同，人眼才會(huì)感知到平衡。正好彩云在上一篇文章《為什么你的設(shè)計(jì)總感覺不舒服？很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識(shí)，一定要讀一讀了。）

3、給作品增加背景

我在前面那個(gè)例子中是用了一個(gè)灰色的背景來(lái)展示設(shè)計(jì)作品，但其實(shí)可以嘗試不同的元素，這有助于增加畫面空間感和背景效果。

但要注意，在一個(gè)真實(shí)的網(wǎng)站中，頁(yè)面周圍可能沒有這么多多余空間，所以這只是一個(gè)作品展示技巧。

在上面這個(gè)作品展示中，咖啡豆給人的感覺是有深度和有品質(zhì)的。

4、使用規(guī)范字體大小

不用浪費(fèi)時(shí)間整天去測(cè)試尺寸。我建議段落文字尺寸大約是14-18pt，副標(biāo)題是24-36pt，標(biāo)題可以用更大一些的字號(hào)（我個(gè)人是習(xí)慣用96-144pt）。Figma的默認(rèn)大小非常適合排版。

上面的尺寸看起來(lái)太小，這也正常，因?yàn)槟阍谑謾C(jī)上看到的圖，在電腦上全屏看就是正常的。

注意：有些字體比其他字體大或小得多。你應(yīng)該使用像Roboto這樣的標(biāo)準(zhǔn)字體，如果字體大小跟14-18pt的Roboto差不多，那么它是完美的正文字體。

段落18，導(dǎo)航24，標(biāo)題96

（彩云注：我建議剛?cè)胄胁痪玫男』锇椋热绮恢谰W(wǎng)頁(yè)規(guī)范，移動(dòng)端規(guī)范，一個(gè)比較快且行之有效學(xué)習(xí)規(guī)范的方法就是去截圖大廠的應(yīng)用，網(wǎng)頁(yè)和APP都可以。然后，對(duì)著截圖直接量就好了，記住人家在做界面的時(shí)候，字體用多大，什么顏色，間距，字號(hào)等等。記住這些參數(shù)，至少不容易出錯(cuò)了。之后，在自己項(xiàng)目中自定義規(guī)范，關(guān)于設(shè)計(jì)規(guī)范如何制定我之前也專門寫過文章，想了解這塊知識(shí)的一定要去看看《原來(lái)設(shè)計(jì)規(guī)范要這樣理解，早知道就好了！》）

5、增加z軸

如果你有一些透明的圖片，可以利用它們來(lái)設(shè)計(jì)一些3D圖層。如果你沒有，你可以使用remove.bg ，網(wǎng)頁(yè)版AI自動(dòng)摳圖，神器！

作為CSS中的Z-index，你可以將透明圖片放在其他項(xiàng)目的后面或前面，給人一種三維的錯(cuò)覺。這對(duì)增強(qiáng)設(shè)計(jì)感來(lái)說，是非常有效的。

讓我們看看我使用這種技術(shù)的一個(gè)簡(jiǎn)單設(shè)計(jì)。

鳥嘴巴從綠色背景中出界到黃色背景中，強(qiáng)化了整體的視覺沖擊力。

6、 使用高級(jí)淺色

明亮的顏色很棒，但沒用好的話，往往會(huì)導(dǎo)致激進(jìn)的設(shè)計(jì)和糟糕的畫面。此外，淺色設(shè)計(jì)（性冷淡設(shè)計(jì)）如今非常流行，所以讓我們開始嘗試顏色選擇器的一個(gè)新區(qū)域。

在這個(gè)紅框范圍內(nèi)可以快速選到一些比較好的顏色

兩種配色都沒有啥問題，這是一個(gè)審美的問題，但如果你想要表達(dá)一些更高級(jí)的設(shè)計(jì)感覺，可以嘗試淺色。

7、打造呼吸感

在我看來(lái)，大的留白比太少的留白要好。雜亂滿檔的設(shè)計(jì)很糟糕， 呼吸感可以通過多種方式獲得：

1. 讓背景大面積保持可見
2. 善用間距，避免出現(xiàn)文字墻效果
3. 使用不會(huì)引起太多關(guān)注的圖片
4. 精簡(jiǎn)文字，保留朗朗上口的短語(yǔ)

更大的留白（在上圖中指的是黑色區(qū)域）會(huì)顯得更加高級(jí)。

8、加入噪點(diǎn)

通常當(dāng)我們思考設(shè)計(jì)時(shí)，我們想到的是干凈、流暢、清晰的概念。但太干凈的畫面會(huì)讓人感到不真實(shí)，缺乏質(zhì)感。

在設(shè)計(jì)中，噪點(diǎn)是一個(gè)很好的朋友，尤其是當(dāng)你想給你的網(wǎng)站有一個(gè)優(yōu)雅或藝術(shù)的外觀時(shí)。此外，應(yīng)用一個(gè)微妙的噪點(diǎn)讓畫面能有一個(gè)電影級(jí)的外觀，這種處理手法非常適合用在視頻和動(dòng)態(tài)網(wǎng)站中。

你可以使用Photoshop在白色背景上創(chuàng)建2-4K大小的雜色-高斯分布的紋理，然后將它放到頁(yè)面的最上層。

整個(gè)網(wǎng)頁(yè)中都增加了一些噪點(diǎn)，這讓畫面整體擁有更強(qiáng)的質(zhì)感。（這里噪點(diǎn)的效果比較微妙，小圖可能看不清，放大可以看到噪點(diǎn)效果）

9、使用漂亮的字體

其實(shí)有很多設(shè)計(jì)的比較糟糕的字體，尤其是那些預(yù)裝在我們電腦上的字體。可以從網(wǎng)上找到很多優(yōu)秀的第三方字體，但是要小心:很多字體都不是免費(fèi)的，沒有授權(quán)就使用它們可能會(huì)給你帶來(lái)麻煩。不過，別擔(dān)心，可以從這個(gè)網(wǎng)站中找到很多免費(fèi)的字體 https://alternatype.net

有很多不同的字族和風(fēng)格，但總的來(lái)說，我把它們分為三大類:

1. 襯線字體
2. 無(wú)襯線字體
3. 正文字體

常用的襯線字體，如Abril Fatface, Playfair Display, Volux, Chalga等。

無(wú)襯線字體包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….

10、使用幾何圖形

這可能是最難使用的技巧，但如果使用正確，它定會(huì)大放光彩。

使用幾何圖形有助于加強(qiáng)概念和布局中的順序，甚至不需要配圖。找到合適的幾何形狀是困難的，我至今仍然不能很好地掌握它。

一個(gè)好用的技巧是將文案中的字母、數(shù)字和標(biāo)題作為幾何形狀:讓它們變得巨大而巧妙，或者使用一些特殊的字母作為形狀(A很管用)。（這個(gè)技巧非常實(shí)用，彩云經(jīng)常在一些視覺內(nèi)容較少的頁(yè)面，用一個(gè)大的幾何圖形比如大寫的字母作為底部背景，用很淺的顏色，看起來(lái)視覺上就能更豐富了。）

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

原文地址：medium

作者：Lorenzo Doremi

譯文地址：彩云譯設(shè)計(jì)（公眾號(hào)）

譯者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》老板說作品沒有設(shè)計(jì)感，這10個(gè)優(yōu)化技巧簡(jiǎn)單有效，你一定要知道

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

狼人殺作為聚會(huì)必備推理類桌游非?；鸨?，“一入狼坑深似海，從此節(jié)操是路人”。

一局APP自研時(shí)下最火的線上桌游【一夜狼人殺】，這款桌游不同于以往邏輯推理版狼人殺，沒有夜里死亡，適合休閑娛樂，滿足每個(gè)人的參與感，更像是真相探索游戲。

本文以制造積極情緒、打造體驗(yàn)峰值為設(shè)計(jì)目標(biāo)，設(shè)定游戲世界觀，構(gòu)建游戲故事背景，繪制精美插畫，賦能魔力特效，打造標(biāo)桿小游戲。解密小游戲設(shè)計(jì)秘籍，接下來(lái)讓我們揭開小游戲設(shè)計(jì)的神秘面紗吧。

1

故事背景-設(shè)定世界觀 代入故事情境

歡迎來(lái)到一夜狼的世界，夜幕降臨，一群身懷絕技的冒險(xiǎn)者們準(zhǔn)備在幽暗的森林里度過一夜，明天即可到達(dá)森林中心，那里的古堡中有古老家族遺留下的寶藏和數(shù)不盡的財(cái)富。但隊(duì)伍中一直隱藏著狼人和他的同伴，他們準(zhǔn)備在今晚發(fā)動(dòng)襲擊，伺機(jī)奪取寶藏。幸存的幾位冒險(xiǎn)者在夜里暗中施展絕技，要在到達(dá)古堡的前一天，揪出隱藏許久的狼人，以保證能夠順利取得寶藏……

 

游戲設(shè)計(jì)-情景化設(shè)計(jì) 體驗(yàn)游戲樂趣

結(jié)合故事背景設(shè)定，以易用性原則為基礎(chǔ)，加入情景化設(shè)計(jì)，在【觸發(fā)期】制造驚喜感，合理布局，明晰操作，快速上手游戲；【興奮期】代入沉浸感，黑白場(chǎng)景切換，沉浸游戲；【結(jié)束期】凸顯成就感，高光時(shí)刻，強(qiáng)視效感知，勝負(fù)判定。

美式輕寫實(shí)風(fēng)格，以游戲背景與角色設(shè)定為依托，提取古堡、巖石、沙漏等關(guān)鍵元素貫穿整個(gè)游戲界面設(shè)計(jì)。

卡牌設(shè)計(jì)-精進(jìn)主美視覺 刺激感官神經(jīng)

卡牌作為整個(gè)游戲的靈魂，代表玩家的身份，同時(shí)也會(huì)做成實(shí)物卡牌周邊，作為獎(jiǎng)品發(fā)放給玩家。身份角色設(shè)定：共計(jì)9個(gè)角色，分為三大陣營(yíng)。好人陣營(yíng)：預(yù)言家、守夜人、搗蛋鬼、強(qiáng)盜、失眠者、酒鬼；狼人陣營(yíng)：狼人、爪牙；第三陣營(yíng)：皮匠。

人物形象根據(jù)角色職業(yè)技能進(jìn)行設(shè)定；設(shè)計(jì)風(fēng)格為強(qiáng)氛圍感的美式魔幻風(fēng)格，突出卡牌氛圍感并保證人物清晰度，角色比例選擇展示腰部以上，角色以正面和四分之三面為主，角色的姿態(tài)和樣貌根據(jù)角色設(shè)定具體設(shè)計(jì)；三大陣營(yíng)以邊框和氛圍顏色做區(qū)分，同陣營(yíng)邊框（除道具外）不變；卡牌設(shè)計(jì)包含底框、邊框、角色，道具設(shè)計(jì)在邊框頂端兩側(cè)，根據(jù)角色替換。

卡片設(shè)計(jì)拆解

三大陣營(yíng)設(shè)計(jì)

卡背設(shè)計(jì)

動(dòng)效設(shè)計(jì)-制造積極情緒 打造峰值體驗(yàn)

運(yùn)用動(dòng)效手段在游戲的關(guān)鍵節(jié)點(diǎn)打造峰值體驗(yàn)，刺激用戶游戲情緒，快速帶入游戲人物和情節(jié)。

[觸發(fā)期]-[情緒帶入階段]

引發(fā)好奇心，極具儀式感的動(dòng)畫（發(fā)牌和確認(rèn)身份）推動(dòng)用戶快速進(jìn)入游戲氛圍，感知游戲。

[沉浸期]-[情緒沉浸階段]

流暢的操作體驗(yàn)和反饋、場(chǎng)景轉(zhuǎn)場(chǎng)動(dòng)畫提升游戲沉浸感與趣味性。

[結(jié)束期]-[情緒滿足階段]

通過整場(chǎng)的懸念鋪設(shè)，在最終的結(jié)果公布緩解來(lái)到情緒的高峰時(shí)刻。

游戲體驗(yàn)情緒變化曲線

a.情緒代入階段

儀式感渲染-模擬牌桌發(fā)牌，卡牌掉落的過程，表現(xiàn)卡牌質(zhì)感和厚度在現(xiàn)實(shí)世界中的感受，身份確認(rèn)動(dòng)效添加強(qiáng)烈的反轉(zhuǎn)效果刺激用戶，不同陣營(yíng)不同的色彩傾向強(qiáng)化對(duì)抗感知。

b.情緒沉浸階段

游戲體驗(yàn)沉浸感-流暢簡(jiǎn)單的操作體驗(yàn)和環(huán)節(jié)轉(zhuǎn)場(chǎng)動(dòng)畫明確游戲進(jìn)度，降低游戲難度給玩家?guī)?lái)的焦慮情緒，強(qiáng)烈的操控感與燒腦懸疑玩法結(jié)合，使游戲體驗(yàn)心流曲線趨于專注、樂趣、享受。動(dòng)效平緩削弱視覺刺激保證玩家的專注。

游戲體驗(yàn)心流區(qū)間

場(chǎng)景切換

白天黑夜場(chǎng)景用日月升起和場(chǎng)景氛圍的變化提示玩家環(huán)節(jié)的轉(zhuǎn)換，在平緩的游戲感受中自然的進(jìn)入下一環(huán)節(jié)，沉浸在游戲線索思考和角色代入中，仿佛一切變化都是理所當(dāng)然而不會(huì)因?yàn)橐饬现獾氖录l(fā)生導(dǎo)致分心。

c.情緒滿足階段

游戲體驗(yàn)情緒高峰時(shí)刻-經(jīng)過正常的懸念鋪設(shè)，最終在結(jié)果展示環(huán)節(jié)用強(qiáng)烈的光感和卡片破壞動(dòng)效，引導(dǎo)用戶產(chǎn)生強(qiáng)烈的成就感和刺激感。并在此環(huán)節(jié)中游戲情緒達(dá)到了高峰時(shí)刻。

動(dòng)效如何落地？

動(dòng)效設(shè)計(jì)過程中運(yùn)用了粒子插件、輝光插件，以及一些偽3D的技法。為了保證落地效果，技術(shù)使用游戲引擎開發(fā)，設(shè)計(jì)師采用拆解組合標(biāo)注的方式交付研發(fā)-動(dòng)效標(biāo)注（代碼實(shí)現(xiàn)，如位移、簡(jiǎn)單粒子效果）+序列幀&MP4視頻。最終達(dá)到了80%還原度。

寫在最后

作為第一款自研游戲，我們分為三條線：UI、主美、動(dòng)效，緊密協(xié)作，聯(lián)合研發(fā)同學(xué)還原設(shè)計(jì)效果。游戲上線后，取得了一定的熱度，大大提升了一局的日活躍量。后續(xù)我們會(huì)繼續(xù)將業(yè)務(wù)目標(biāo)與設(shè)計(jì)目標(biāo)相結(jié)合 ，逐步迭代，提高游戲體驗(yàn)。

原文地址：百度MEUX（公眾號(hào)）

作者：文娛平臺(tái)用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》游戲UI設(shè)計(jì)項(xiàng)目分析–狼人殺

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Semi Design 是針對(duì)抖音的中后臺(tái)產(chǎn)品線進(jìn)行研發(fā)的設(shè)計(jì)系統(tǒng)，其目的也是為了解決 抖音 一系列的中后臺(tái)產(chǎn)品的效率問題。

而 Arco Design 是基于 字節(jié)跳動(dòng) 所有的中后臺(tái)產(chǎn)品，其前身是 Byte Design 升級(jí)而來(lái)，能夠看到二者的定位是截然不同，一個(gè)是基于抖音產(chǎn)品，一個(gè)是基于 字節(jié) 這家公司，因此在后續(xù)很多內(nèi)容的不同，根本也是因?yàn)槎ㄎ凰斐傻?。先說說這兩個(gè)系統(tǒng)的具體功能。

主題風(fēng)格配置平臺(tái)：

當(dāng)看到這個(gè)工具時(shí)，其實(shí)是非常激動(dòng)，作為設(shè)計(jì)師，對(duì)于一個(gè)設(shè)計(jì)系統(tǒng)樣式上的細(xì)微調(diào)整早就已經(jīng)深惡痛絕，如果可以，自己絕不想通過前端之手進(jìn)行“實(shí)現(xiàn)”，但以往的 Element 方式似乎又有些許麻煩，且能力不足。當(dāng)我使用兩款系統(tǒng)過后，都給到了我不少的驚喜。

首先是Semi，顏色自動(dòng)提供 WCAG 檢查，讓你能夠快速看到自己設(shè)定的顏色究竟是否合理；設(shè)計(jì)系統(tǒng)的引用關(guān)系，可以了解到設(shè)計(jì)系統(tǒng)顏色之間有哪些不同；圓角的可視化編輯，可以快速知道修改過后的最后實(shí)現(xiàn)樣子。每一個(gè)功能都是設(shè)身處地的為設(shè)計(jì)師考慮，在日常的工作當(dāng)中經(jīng)常會(huì)遇到的問題，但是也會(huì)有些許的遺憾。

比如：可定制的組件內(nèi)容實(shí)在太少，目前能夠提供給用戶定制的只會(huì)有：顏色 、 字體、圓角、陰影，想要從 Semi Design，到 Any Design 還是會(huì)有一定的距離；Figma 插件還未上線，確實(shí)不能夠與設(shè)計(jì)軟件進(jìn)行快速打通。不過官方已經(jīng)回復(fù)說插件正在審核，期待它的后續(xù)體驗(yàn)。

當(dāng)我用了 Arco 的主題風(fēng)格配置過后，我覺得可以好好來(lái)說說。簡(jiǎn)直太牛了！可以編輯的維度從基礎(chǔ)的顏色、字體、陰影、 到 組件的按鈕、導(dǎo)航、分類、表格  一共有接近40款組件，并且都是可以進(jìn)行可視化編輯與調(diào)整的。如果你用了 Arco 過后，或許不用苦苦的站在前端后面，讓他幫忙調(diào)整頁(yè)面，作為設(shè)計(jì)師自己就能夠搞定，并且每一個(gè)組件可以調(diào)整的粒度是非常之細(xì)，包含 各種寬度、圖標(biāo)大小、顏色、投影，等等…

真的有些顛覆！假如你需要去定義一個(gè)官方的設(shè)計(jì)系統(tǒng)，完全可以通過 Arco 進(jìn)行搞定。

文檔內(nèi)容：

仔細(xì)閱讀文檔，你會(huì)發(fā)現(xiàn)文檔這次文檔對(duì)于設(shè)計(jì)者而言，更加的友好。首先你可以通過 組件設(shè)計(jì)，去了解到每一個(gè)組件的具體構(gòu)造，這是很多基礎(chǔ)薄弱的設(shè)計(jì)師能力欠缺的一個(gè)點(diǎn)

其次對(duì)于 組件狀態(tài)、何時(shí)使用、交互行為 都解釋得非常清楚。之后有人問我關(guān)于組件相關(guān)的問題，我只需要給他扔一個(gè)鏈接過去就可以。

并且兩個(gè)系統(tǒng)都支持查看組件的更新記錄，作為一個(gè)剛面市的設(shè)計(jì)系統(tǒng)，調(diào)整修改是在所難免，因此提供這樣的入口確實(shí)能夠使用體驗(yàn)上更為高效。

關(guān)于文檔的細(xì)節(jié)以及具體的書寫質(zhì)量，這個(gè)只能在后面深度使用過后給到大家反饋，在說說 Semi 與Arco 在文檔上的不同，你會(huì)發(fā)現(xiàn) Semi 在整個(gè)文檔內(nèi)只會(huì)有對(duì) 組件的使用細(xì)則，而 Arco 則提供了：設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則、樣式指南、組件用法，Semi 缺少了設(shè)計(jì)系統(tǒng)靈魂的這一部分，也就意味著在項(xiàng)目資源的投入上兩者還是會(huì)有較大不同。

隨便聊聊：

什么暗黑模式、國(guó)際化 就不做不過介紹，感興趣的同學(xué)可以自己去官網(wǎng)體驗(yàn)體驗(yàn)。最后說說兩者的差異和自己的感受。

其實(shí)早在20年的時(shí)候，我就已經(jīng)看到 Semi Design 的原形，但當(dāng)時(shí)看到整個(gè)官方文件有點(diǎn)簡(jiǎn)陋，不過今天看這個(gè)設(shè)計(jì)系統(tǒng)，成熟度還是蠻高的，無(wú)論的整個(gè)組件的質(zhì)量，又或者是 Figma 當(dāng)中對(duì)于Variants 的支持，暗黑模式的探索（老實(shí)說，我覺得暗黑模式的場(chǎng)景不會(huì)特別多），也能夠看到抖音設(shè)計(jì)團(tuán)隊(duì)在這個(gè)系統(tǒng)的付出。

當(dāng)然，在整個(gè)設(shè)計(jì)系統(tǒng)查看下來(lái)，發(fā)現(xiàn) Semi 仿佛是一個(gè)半成品，因?yàn)槿鄙倭嗽O(shè)計(jì)系統(tǒng)最為重要的設(shè)計(jì)價(jià)值觀與原則、整個(gè)頁(yè)面模版，因此對(duì)于這個(gè)內(nèi)容本身還是抱有一些小小的遺憾。不過從定位上來(lái)說，我覺得也是非常合理。

因?yàn)樽鳛榉?wù)于抖音產(chǎn)品線的設(shè)計(jì)系統(tǒng)，其實(shí)無(wú)意去和一些國(guó)內(nèi)外的著名設(shè)計(jì)系統(tǒng)進(jìn)行對(duì)標(biāo)：比如 支付寶的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是從自身實(shí)際問題出發(fā)，去解決在產(chǎn)品研發(fā)過程當(dāng)中的一系列問題。而比肩國(guó)際設(shè)計(jì)系統(tǒng)的任務(wù)，交給了老大哥 Arco Design 上，同樣能夠在 Arco 上看到字節(jié)的野心，嘗試去搭建各種生態(tài)：圖標(biāo)、物料、風(fēng)格配置。很顯然對(duì)于我們用戶而言是一件好事，因?yàn)橛懈?jìng)爭(zhēng)才會(huì)更快發(fā)展，我們之后在設(shè)計(jì)系統(tǒng)的選擇上又可以多一個(gè)選項(xiàng)。也希望之后能夠發(fā)展的越來(lái)越好。

兩個(gè)系統(tǒng)名字的由來(lái)：Semi 取自英文的詞組，寓意 “一半”，表示在一個(gè)企業(yè)應(yīng)用是有業(yè)務(wù)邏輯與前端界面構(gòu)成，希望Semi能夠成為前端頁(yè)面不可獲取的一半。

你知道 Arco 設(shè)計(jì)系統(tǒng)名字的由來(lái)嗎？

原文鏈接：CE青年（公眾號(hào)）

作者：CE青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》聊聊上周很火的設(shè)計(jì)系統(tǒng)“兩兄弟”

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

為什么很多人的設(shè)計(jì)作品很有自己的風(fēng)格？比如像這個(gè)設(shè)計(jì)師主頁(yè)的作品：

很輕，很干凈。

這樣的作品風(fēng)格都很統(tǒng)一，設(shè)計(jì)師能夠很好的把控整體感覺，不會(huì)讓某個(gè)局部過于出戲或不搭。

我們?cè)谄綍r(shí)做一些概念練習(xí)的時(shí)候，一定要注意這方面的提升和培養(yǎng)，這樣在后期設(shè)定主視覺的時(shí)候，才能更好的把控。

這里給大家舉一個(gè)簡(jiǎn)答的案例，我們看一位星友做的臨摹的練習(xí)：

大家會(huì)覺得有什么問題嗎？會(huì)不會(huì)覺得耳機(jī)有些突兀？因?yàn)檎w顏色、界面樣式都是比較輕量化的，但是耳機(jī)突然很重，導(dǎo)致和整體有些不搭。

我們看下原版的界面：

確實(shí)整體都很輕量，包括耳機(jī)本身。

千萬(wàn)不要小瞧“抓整體感覺”的能力，也不要感覺這個(gè)能力很簡(jiǎn)單，想和做是兩碼事，一定要多做，然后不斷試錯(cuò)、優(yōu)化、試錯(cuò)、優(yōu)化，最后達(dá)到理想的能力狀態(tài)。

2.做界面要有容器思維

我們做界面，一定要有容器思維，容器思維有兩個(gè)作用，

第一，它可以很好的幫助我們更好的整理信息，比如之前有分享過，我把原本散亂的信息，重新整理到卡片容器中：

這樣會(huì)讓信息更加規(guī)整。

第二，因?yàn)殚_發(fā)寫頁(yè)面也都是一個(gè)容器一個(gè)容器的，所以這樣可以更好的有效溝通，避免浪費(fèi)時(shí)間，比如我們?cè)诹斜淼臅r(shí)候：

如果沒有給列表裝上容器，開發(fā)就不知道每個(gè)列表的有效點(diǎn)擊區(qū)域是多大，如果我們裝上了容器：

開發(fā)實(shí)現(xiàn)起來(lái)就會(huì)很快，也不會(huì)有那么多視覺還原問題。

3.可以免費(fèi)商用的數(shù)字英文字體

我們?cè)谧鯽pp產(chǎn)品的時(shí)候，經(jīng)常會(huì)看到有一些特殊數(shù)字字體，比較長(zhǎng)條的，有些設(shè)計(jì)感，像這種：

系統(tǒng)里面的字體肯定是無(wú)法滿足需求的，這時(shí)候就需要安裝一些其他字體，那問題又來(lái)了，很多字體都有版權(quán)問題，所以這里推薦一個(gè)免費(fèi)可商用的，oppo出的一套字體，里面的數(shù)字，我覺得效果還不錯(cuò)，大家可以看下：

還是挺好看的，一共有5個(gè)字重，任你選擇。

除了上面這個(gè)字體，如果大家想用圓潤(rùn)一點(diǎn)的數(shù)字，可以用這個(gè)字體Quicksand：

也是免費(fèi)可商用的，有需要的朋友可以點(diǎn)個(gè)在看，后臺(tái)回復(fù)：數(shù)字，即可獲得。

好了，今天就這么多，下期見，么么扔！

關(guān)于IP活動(dòng)

IP存在形態(tài)可以多種多樣，可以是一個(gè)故事、一個(gè)概念，一個(gè)事件、一個(gè)形象等。本文所指的IP是有著高辨識(shí)度、強(qiáng)用戶心智的“符號(hào)型”事件，通過打造IP事件讓特定用戶對(duì)此形成超級(jí)IP心智，從而形成品牌認(rèn)知，拉近與用戶的距離。

本項(xiàng)目在商家端通過聯(lián)合多個(gè)產(chǎn)品、業(yè)務(wù)的場(chǎng)景，打造針對(duì)于商家用戶拉新、促活的運(yùn)營(yíng)活動(dòng)，通過規(guī)律性的舉辦活動(dòng)、持續(xù)性的品牌符號(hào)透出，讓商家用戶對(duì)此活動(dòng)形成超級(jí)IP心智。

因此，本文將會(huì)從項(xiàng)目的業(yè)務(wù)背景出發(fā)，以設(shè)計(jì)的視角來(lái)闡述酷家樂針對(duì)商家用戶的拉新、促活，打造的一個(gè)有趣、有效、可持續(xù)的IP活動(dòng)。

為什么要打造IP活動(dòng)

酷家樂在以往的商家運(yùn)營(yíng)活動(dòng)中，積累了一些問題，之所以需要做IP活動(dòng)，主要原因有三個(gè)方面：商家用戶側(cè)、產(chǎn)品運(yùn)營(yíng)側(cè)、產(chǎn)研側(cè)。

一、用戶背景

酷家樂的商家用戶行業(yè)覆蓋廣、年齡與職責(zé)跨度較大，加上在b端做內(nèi)容宣導(dǎo)依賴于企業(yè)組織里層層分發(fā)信息，信息傳播與宣發(fā)成本較高，包括活動(dòng)舉辦的形式與規(guī)則。

從過往比較零散的線上運(yùn)營(yíng)活動(dòng)經(jīng)驗(yàn)來(lái)看，如果在前期宣導(dǎo)不到位的情況下，難以很快的在線上讓用戶快速的響應(yīng)參與進(jìn)來(lái)，所以活動(dòng)的效果也難達(dá)預(yù)期。如何建立比較穩(wěn)定的活動(dòng)心智，進(jìn)而降低宣發(fā)成本，是針對(duì)商家用戶提升活動(dòng)參與度的前提。

二、產(chǎn)品/運(yùn)營(yíng)背景

酷家樂B類產(chǎn)品以商家后臺(tái)為底座，以應(yīng)用為拓展模塊，因此業(yè)務(wù)產(chǎn)品越來(lái)越多，每個(gè)產(chǎn)品階段性的促活躍必不可少，之前零散的、單獨(dú)的舉辦活動(dòng)勢(shì)必帶來(lái)資源浪費(fèi)、宣發(fā)成本疊加、難以吸引用戶參與的問題，如何兼顧老模塊+新產(chǎn)品/功能的促活問題？這也是產(chǎn)品和運(yùn)營(yíng)的業(yè)務(wù)目標(biāo)。

三、產(chǎn)研協(xié)作背景

一個(gè)活動(dòng)從想法到最終上線，中間經(jīng)歷的流程比較漫長(zhǎng)，作為設(shè)計(jì)方最怕業(yè)務(wù)給你卡死一個(gè)非常緊張的時(shí)間，指定日期上線。而過往這種情況時(shí)常發(fā)生，最終運(yùn)營(yíng)、產(chǎn)品、設(shè)計(jì)、研發(fā)都妥協(xié)，在最終效果也打折，如何解決這個(gè)問題，設(shè)計(jì)可以在這里做什么？

設(shè)計(jì)策略與設(shè)計(jì)方案

基于以上三個(gè)背景，針對(duì)用戶、業(yè)務(wù)、協(xié)同三個(gè)方面提出系統(tǒng)的解決方案，制定設(shè)計(jì)策略：

• 通過打造超級(jí)IP心智，讓用戶認(rèn)知、熟悉并持續(xù)參與它；
• 通過趣味地串聯(lián)業(yè)務(wù)場(chǎng)景，將業(yè)務(wù)的目標(biāo)分解成各個(gè)任務(wù)，從而能讓用戶更好的參與互動(dòng)；

• 設(shè)計(jì)前置的考慮與推動(dòng)，沉淀通用能力，實(shí)現(xiàn)組件化與配置化。

一、打造超級(jí)IP，建立用戶心智

超級(jí)IP心智，本質(zhì)是設(shè)計(jì)一場(chǎng)讓用戶印象深刻的體驗(yàn)，本次活動(dòng)通過IP主題、IP形象、IP場(chǎng)景衍生三個(gè)方面來(lái)發(fā)力。多次曝光持續(xù)的搶占用戶視線、建立熟悉感和認(rèn)同感，打造系列活動(dòng)感，運(yùn)營(yíng)手段讓用戶持續(xù)產(chǎn)生深刻的印象，從而建立起超級(jí)IP的心智。IP最重要的作用是可持續(xù)的，積累大眾認(rèn)知的同時(shí)，最終可成為品牌資產(chǎn)。

1、IP主題設(shè)計(jì)

考慮到酷家樂的在家居行業(yè)的品牌形象，從市場(chǎng)定位和品牌調(diào)性提取關(guān)鍵詞，最終確定以“裝新家”為主題。

品牌的持續(xù)植入（新家、主題及字體、顏色、圖標(biāo)體系）

2、IP形象設(shè)計(jì)

以品牌IP形象人格化為設(shè)計(jì)策略，建立酷寶有趣、活潑可愛的人設(shè)，及時(shí)的與用戶進(jìn)行交流互動(dòng)。

3、IP場(chǎng)景衍生設(shè)計(jì)

為了加深用戶對(duì)酷家樂認(rèn)知，結(jié)合“酷寶裝新家”的品牌主題，將裝修家物件與當(dāng)前酷家樂的產(chǎn)品生態(tài)去串聯(lián)，通過有趣的場(chǎng)景讓商家用戶感知到酷家樂賦能家居行業(yè)的能力與影響力。

二、趣味地串聯(lián)場(chǎng)景，吸引用戶參與

趣味地串聯(lián)業(yè)務(wù)場(chǎng)景，將業(yè)務(wù)的目標(biāo)分解成各個(gè)任務(wù)，從而能讓用戶更好的參與互動(dòng)。在提升基礎(chǔ)模塊數(shù)據(jù)的同時(shí)，提升新產(chǎn)品/功能的活躍度。

1、趣味的互動(dòng)設(shè)計(jì)

趣味的串聯(lián)業(yè)務(wù)場(chǎng)景的目的在于，讓更多的用戶能通過有趣的活動(dòng)參與進(jìn)來(lái)，按照一定的游戲規(guī)則順便完成既定的任務(wù)，促進(jìn)現(xiàn)有產(chǎn)品模塊的活躍，帶動(dòng)新產(chǎn)品認(rèn)知和使用，傳播新產(chǎn)品的價(jià)值，達(dá)到促活的業(yè)務(wù)目標(biāo)。在此項(xiàng)目中主要通過人格化的酷寶對(duì)話、有趣的房間拼裝來(lái)實(shí)現(xiàn)趣味的互動(dòng)。

1.1 人格化的酷寶，跟用戶互動(dòng)起來(lái)

酷寶是酷家樂人格化的IP，引入酷寶角色有利于更好的和用戶建立情感的連接，進(jìn)入場(chǎng)景，塑造角色，成為品牌的一部分，創(chuàng)造真實(shí)具象的消費(fèi)者觸點(diǎn)。相比于往常圖文呆板的互動(dòng)，酷寶角色的引入可以讓活動(dòng)與用戶的互動(dòng)更有趣。

酷寶的對(duì)話設(shè)計(jì)遵循著“人格化”的原則，就像人一樣，能夠根據(jù)特定場(chǎng)景、特定人設(shè)、特定對(duì)話對(duì)外輸出便于用戶理解的內(nèi)容，所以在酷寶的對(duì)話設(shè)計(jì)中，根據(jù)活動(dòng)時(shí)間點(diǎn)、場(chǎng)景以及酷寶可愛形象的特質(zhì)，結(jié)構(gòu)化的設(shè)計(jì)對(duì)話內(nèi)容，讓酷寶作為活動(dòng)重要角色，與用戶互動(dòng)起來(lái)。

1.2有趣的房間拼裝

根據(jù)游戲化設(shè)計(jì)的八角模型，缺失感設(shè)計(jì)會(huì)激發(fā)用戶去填補(bǔ)當(dāng)前缺失的模塊，利用用戶的心理，充分的將用戶吸引到游戲中來(lái)。

2、根據(jù)用戶行為周期的激勵(lì)

根據(jù)用戶與活動(dòng)的行為周期，將用戶的行為分為參與前、參與中、完成后三個(gè)階段，針對(duì)于三個(gè)階段的行為分別進(jìn)行了用戶激勵(lì)設(shè)計(jì)，激勵(lì)用戶參與進(jìn)來(lái)。

因涉及內(nèi)容較多，針對(duì)于一些重要場(chǎng)景，示例如下：

2.1 用戶參與活動(dòng)前

在用戶必經(jīng)之路，觸達(dá)用戶，提供邀請(qǐng)，將內(nèi)容推到用戶的視線。

獎(jiǎng)品的展示，吸引用戶來(lái)參與

各種渠道的投放物料設(shè)計(jì)，確保信息觸達(dá)

2.2 用戶在活動(dòng)參與中

即時(shí)激勵(lì)，當(dāng)用戶有機(jī)會(huì)，強(qiáng)提醒用戶抽獎(jiǎng)

• 引導(dǎo)有信心能持續(xù)進(jìn)行下去，卡片類型設(shè)計(jì)，確保用戶有信心能持續(xù)進(jìn)行下去
• 引導(dǎo)用戶收集卡片

• 明確狀態(tài)，讓用戶明確完成自己的狀態(tài)

2.3 用戶任務(wù)完成后

中途獲取獎(jiǎng)品設(shè)計(jì)，讓用戶的互動(dòng)更加有趣、真實(shí)。

2.4 最終成就設(shè)計(jì)

以匯總成就數(shù)據(jù)的海報(bào)形式為載體，讓用戶產(chǎn)生數(shù)據(jù)成就。

三、基于業(yè)務(wù)思考，實(shí)現(xiàn)組件化、可配置化的能力

針對(duì)協(xié)作問題，結(jié)合業(yè)務(wù)的規(guī)劃和訴求，設(shè)計(jì)前置的考慮與推動(dòng)，根據(jù)業(yè)務(wù)多產(chǎn)品需求的特性、設(shè)計(jì)故事腳本，給出整體的設(shè)計(jì)提案。沉淀通用能力，實(shí)現(xiàn)組件化與配置化，從而讓設(shè)計(jì)、產(chǎn)品、研發(fā)整體協(xié)同能實(shí)現(xiàn)提效。

一場(chǎng)聯(lián)合活動(dòng)，最終可以被拆解成5個(gè)層面：活動(dòng)應(yīng)用層、場(chǎng)景單元層、即時(shí)激勵(lì)層、業(yè)務(wù)任務(wù)層、目標(biāo)激勵(lì)層。

為了提效，通過結(jié)構(gòu)化數(shù)據(jù)和模塊化設(shè)計(jì)呈現(xiàn)，在前臺(tái)做到模塊組合的適配性，在后臺(tái)保證配置的靈活性，從而實(shí)現(xiàn)之后的配置化能力，讓運(yùn)營(yíng)、產(chǎn)品可以自由的搭配，快速的上線，大大提升產(chǎn)研效率。

效果驗(yàn)證

內(nèi)部數(shù)據(jù)已脫敏處理

業(yè)務(wù)數(shù)據(jù)

活動(dòng)巧妙的串聯(lián)了各個(gè)業(yè)務(wù)場(chǎng)景，在用戶完成任務(wù)同時(shí)，整體商家側(cè)的用戶活躍度在活動(dòng)期間得到了巨大的提升，尤其是在創(chuàng)新模塊/產(chǎn)品中，實(shí)現(xiàn)了流量的帶動(dòng)，最終將新模塊的流量帶動(dòng)起來(lái)了。

資產(chǎn)沉淀

從設(shè)計(jì)到研發(fā)側(cè)的組件化沉淀：將能力沉淀下來(lái)，通過組件化、可配置化的能力讓此活動(dòng)可以得以延續(xù)，讓商家側(cè)運(yùn)營(yíng)在以后聯(lián)合活動(dòng)中，可以“開箱即用”的上架活動(dòng)，可以實(shí)現(xiàn)不同模塊組合的任意搭配，大大提升產(chǎn)研效率。

協(xié)作方反饋

在整個(gè)活動(dòng)中，由于設(shè)計(jì)積極前置參與，一起同業(yè)務(wù)方共創(chuàng)達(dá)成了業(yè)務(wù)目標(biāo)，獲得了業(yè)務(wù)方的廣泛好評(píng)。

寫在最后

打造一個(gè)IP活動(dòng)需要有秩序的內(nèi)容+友好的互動(dòng)設(shè)計(jì)+有吸引力的品牌包裝，共同發(fā)力才能吸引更多的用戶來(lái)參與互動(dòng)。確保用戶參與的體驗(yàn)的同時(shí)，抽象通用能力，在用戶側(cè)建立起穩(wěn)定、有趣的用戶心智，在供給側(cè)沉淀快速?gòu)?fù)用能力，最終實(shí)現(xiàn)業(yè)務(wù)目標(biāo)與設(shè)計(jì)價(jià)值的最大化。

原文鏈接：酷家樂用戶體驗(yàn)設(shè)計(jì)（公眾號(hào)）

作者：看看

設(shè)計(jì)：看看、柚子、阿九、白夜

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何基于業(yè)務(wù)思考設(shè)計(jì)B端的IP活動(dòng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

01.前言

a

02.為什么采用紅包的形式

2014年，微信紅包一經(jīng)推出就引發(fā)了全民搶紅包熱潮，微信支付也通過微信紅包場(chǎng)景成功逆襲，實(shí)現(xiàn)了“馬云花十年做的事情，微信一夜完成”的成效。

2021年春節(jié)，火爆的微信紅包封面實(shí)現(xiàn)了用戶與品牌的“連接”，微信搜一搜、視頻號(hào)、朋友圈廣告、公眾號(hào)均獲益頗多。

用戶對(duì)紅包這種場(chǎng)景比較熟悉，紅包拉新對(duì)于用戶有吸引力，很關(guān)鍵的一點(diǎn)就是用戶覺得不需要巨大投入，就可以獲得利益，覺得自己賺到。

r

03.驗(yàn)證本地版APP是否適合紅包裂變的一種嘗試

58本地版用戶人群

通過58本地版用戶人群可以看出，58本地符合下沉市場(chǎng)的特性

1. 對(duì)價(jià)格和收益比較敏感，愿意花時(shí)間獲得金錢上的獎(jiǎng)勵(lì)

2. 會(huì)下載一些現(xiàn)金獎(jiǎng)勵(lì)新聞資訊app、視頻app

3. 熟人社交影響大。

所以本地版符合裂變標(biāo)簽的用戶存在拉新空間。

r

04.項(xiàng)目設(shè)計(jì)目標(biāo)/探索解決方案

在這套新的流程實(shí)現(xiàn)方案支持下，我們按照對(duì)拉新影響最大的引流入口進(jìn)行探索。我們對(duì)引流入口進(jìn)行了三輪用戶調(diào)研。

（1）異形紅包：在利益相同的情況，調(diào)研用戶對(duì)不同紅包樣式的銘感度。 

（2）玩法紅包：增強(qiáng)“領(lǐng)紅包”的互動(dòng)性、趣味性，在“領(lǐng)”的過程中體驗(yàn)幸福和快累。

（3）簡(jiǎn)潔紅包：簡(jiǎn)介的紅包樣式，最大突出利益點(diǎn)，讓用戶最大的感知到價(jià)值，對(duì)不同的金額的感知進(jìn)行測(cè)試。 

a

05.做有趣的設(shè)計(jì)

作為設(shè)計(jì)師，產(chǎn)品本身的需求需要滿足，用戶的喜好和屬性也需要考慮在內(nèi)。

無(wú)形中這就存在著一個(gè)“結(jié)構(gòu)”，我們要做的是發(fā)揮我們的創(chuàng)意，通過不同的“搭建方式”提供更多可能性的方向；通過不同的表現(xiàn)手法和視覺語(yǔ)言帶來(lái)更打動(dòng)人心的設(shè)計(jì)。

w

05.總結(jié)

綜合整體數(shù)據(jù)來(lái)看，58本地版還是適合去做裂變活動(dòng)的，可以將紅包作為核心或主要拉新渠道，在有預(yù)算情況下，適宜源遠(yuǎn)流長(zhǎng)地去長(zhǎng)期投放。

原文地址：58UXD （公眾號(hào)）

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》項(xiàng)目總結(jié)｜紅包設(shè)計(jì)測(cè)試，驅(qū)動(dòng)裂變數(shù)翻三倍

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前言

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)師如何高效溝通需求

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

今天我們分享如何把拍的照片做出有設(shè)計(jì)感的海報(bào)

當(dāng)然我知道你們可能更關(guān)心如何拍出好的照片，所以今天也一并送上。

我們以常用手機(jī)拍照為例，手機(jī)的拍照抓法無(wú)非就豎式或者橫式兩種，但是當(dāng)對(duì)同一個(gè)物體背景中，豎式與橫式所拍攝得到的畫面范圍以及體現(xiàn)出的視覺感受是完全不一樣。

留白構(gòu)圖

所以在做出設(shè)計(jì)感的海報(bào)前，我們應(yīng)該先做好拍攝的前期準(zhǔn)備，用今天講的留白構(gòu)圖的方法來(lái)拍出好的照片。

豎圖拍法

我們先講豎圖的拍法，如果你拍攝的習(xí)慣是希望將整個(gè)場(chǎng)景全部放置到手機(jī)豎圖畫幅中，那么一個(gè)場(chǎng)景內(nèi)容過于復(fù)雜的畫面就會(huì)造成視覺缺少重心。

大腦為了讓我們能夠看清復(fù)雜的大量細(xì)節(jié)，會(huì)將所有機(jī)能在一定時(shí)間內(nèi)高度集中在眼睛對(duì)于畫面的注意度，長(zhǎng)期觀看則會(huì)讓眼睛受到神經(jīng)上的錯(cuò)覺衰弱，所以有時(shí)候我們看很復(fù)雜的畫面和密密麻麻的文字時(shí)，我們很容易看錯(cuò)行，也容易看漏某個(gè)圖畫，當(dāng)然也缺少更多的畫面美感。

從而折射出很多其他事物的論證，比如為什么吃酒席的人看到這么多菜放在一起時(shí)就飽了，而當(dāng)一道菜只有一點(diǎn)點(diǎn)東西時(shí)，反而會(huì)增加我們的食欲。

這里我們將同一個(gè)拍攝畫面重新做了留白性的構(gòu)圖，可以看到右邊的圖片上面內(nèi)容少，下面的內(nèi)容多，這樣就有了層次對(duì)比和視覺重點(diǎn)，從感官上來(lái)說也看起來(lái)舒服了很多，最重要的是不會(huì)讓眼睛看的累。

當(dāng)然既然是想拍出好的照片，除了留白還有包括在畫面分割上也會(huì)有不同的比例大小之分。以及對(duì)角構(gòu)圖、S型構(gòu)圖和透視性構(gòu)圖等。

這里我用之前拍的三張照片為例，從左至右可以看出留白的比例是從多至少，而拍攝得到的視覺風(fēng)格也發(fā)現(xiàn)了改變。

如果做成海報(bào)或雜志類的圖文，留白越多時(shí)，照片會(huì)給人更多的遐想空間，文字的放置也可以更加的肆無(wú)忌憚一些，留白越少時(shí)，照片就會(huì)能得到更直觀的內(nèi)容，并且需要將圖片進(jìn)行縮小或者改變其畫面比例來(lái)解決文字排版的問題。

再來(lái)講講豎式與橫式拍照的區(qū)別

豎式的結(jié)構(gòu)會(huì)讓我們?cè)斐僧嬅姹焕L(zhǎng)的效果，如果你拍高樓大廈，你可以試試用豎圖，會(huì)有一種高聳威嚴(yán)的感覺，而橫式讓我們?cè)斐僧嫹械恼掌斜焕瓕捇蛘呦騼蓚?cè)延展的錯(cuò)覺。

如果你要拍人像，豎式會(huì)看起來(lái)人顯瘦顯高，而橫式看起來(lái)會(huì)顯胖顯矮一些，所以如果你用橫式拍照，建議拍風(fēng)景、建筑，能讓畫面顯得更寬廣遼闊。

豎版-海報(bào)實(shí)操案例

接下來(lái)我們就用照片設(shè)計(jì)成海報(bào)實(shí)操案例

▽

步驟1：放置照片

當(dāng)文字放置到畫布中，我們將所拍照片作為設(shè)計(jì)背景。

步驟2：留白布局

然后我們發(fā)現(xiàn)本身拍攝的照片留白比例較大，為了不影響留白感，我們將中間留空，讓文字內(nèi)容布局編排到左右兩側(cè)，而左側(cè)由于留白空間是最大的，所以文字的內(nèi)容可以放置的多一些。

步驟3：內(nèi)容分割

在這里要講下幾個(gè)分割線條的使用，除了文字段之間的分割以外，還有閱讀文字時(shí)有引導(dǎo)至右側(cè)聯(lián)想的視覺引導(dǎo)作用。

步驟4：版式平衡

為了解決重心的平衡，我們?cè)谧髠?cè)復(fù)制了同樣的照片作為對(duì)稱。

步驟5：增加關(guān)聯(lián)

這時(shí)左右兩邊缺少了與中間留白之間的關(guān)聯(lián)性，所以我們利用云朵做出了往中心的衍生元素。

最終這樣一個(gè)比較完整的將照片做出海報(bào)作品就完成了

▽

橫版-海報(bào)實(shí)操案例

同樣我們用橫式的照片也做一個(gè)海報(bào)實(shí)操案例

由于是橫式無(wú)法放滿整個(gè)畫面，所以我們使用圖文結(jié)合的方式，讓文字與圖片緊密連接在畫面的中心。所拍的照片屬于偏文藝一些，所以我們可以用一些手寫或者纖細(xì)的文字結(jié)合，再利用照片增加背景的肌理，使海報(bào)看起來(lái)豐富一些。

我們看下最終海報(bào)效果

▽

總結(jié)

我們總結(jié)下兩張照片做出的海報(bào)，左側(cè)海報(bào)將留白放到中心位，讓內(nèi)容由外側(cè)編排不影響到留白區(qū)域，這么做讓海報(bào)有了一定故事感，右側(cè)海報(bào)則以中心為主要內(nèi)容，外部減少文字編排，讓海報(bào)有了向內(nèi)自由舒緩的感受。

所以不同的構(gòu)圖、以及不同的結(jié)構(gòu)最后做出的海報(bào)形式和風(fēng)格都會(huì)有所不同。 當(dāng)你看完今天的內(nèi)容，記得出去拿著手機(jī)用所講的一些拍攝技巧試試效果，這就是今天帶來(lái)的如何把拍的照片做出有設(shè)計(jì)感海報(bào)的全部?jī)?nèi)容。

原文地址：修先森撩設(shè)計(jì)

作者：修先森

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何把照片做出有設(shè)計(jì)感的海報(bào)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)