前言
如果你要設(shè)計以真實(shí)場景為主的banner或者主視覺，往往都會在各大網(wǎng)站圖庫里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨(dú)一無二的難上加難，而且自己也沒時間建模和拍攝
AI圖片的生成為這個痛點(diǎn)找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫素材照片，我將會按照真實(shí)工作場景搭配設(shè)計落地方案來和大家分享AI使用經(jīng)驗(yàn)，讓你看了就學(xué)會，學(xué)會就馬上能用
用結(jié)構(gòu)化方式思考咒語
以下需求是我設(shè)計中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實(shí)照片當(dāng)作首圖，首先先想一下我們需要的素材大概畫面的呈現(xiàn)，思考的框架可以參考以下，以下內(nèi)容為了方便關(guān)鍵詞我會用中文，但是實(shí)際操作中Prompt都必須使用英語
通過結(jié)構(gòu)化思維來描述這樣就不會有遺漏，也更能使畫面完整，另外像我的英語并不是很好，就會把寫好的內(nèi)容通過Deep L或是chatgpt來進(jìn)行翻譯
關(guān)鍵詞的使用
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9
在輸入關(guān)鍵詞的時候，我通常會把重要的內(nèi)容放在前面，有時加在后面的關(guān)鍵詞不容易被機(jī)器人識別。個人的一點(diǎn)小經(jīng)驗(yàn)，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設(shè)計中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過關(guān)鍵詞生成的圖片
如果覺得結(jié)果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機(jī)性，像是Promp就不建議非常詳細(xì)，因?yàn)檫@樣反而會有意想不到的優(yōu)質(zhì)圖片產(chǎn)出
機(jī)器人生成以后就要開始挑選圖片了，如果對左上的結(jié)果比較滿意，就點(diǎn)擊v1，讓機(jī)器人針對這個圖片再去生成四張新的圖片，雖然左上效果不錯，但是手部有些奇怪，所以需要通過在該基礎(chǔ)上再次生成，來挑選沒有問題的圖片
這里說明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會放大這張圖片畫質(zhì)更加清晰，V則是會針對你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調(diào)整。1-4的排序?yàn)椋?是左上，2是右上，3是左下，4是右下
重新生成的左上圖可以看到手部還是有問題，但是右上那張就還不錯，可以選擇這張來用或是再重新生成一遍
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9
這里我想要換一個畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀(jì)錄片、廣告拍攝使用的，所以使用這個關(guān)鍵字去生成圖片畫面會有一種電影感，角度上我覺得更好一點(diǎn)。
最后說一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個人感覺還是不夠清晰，所以會搭配圖片放大工具來一起使用。我常用的圖片放大工具h(yuǎn)ttp://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點(diǎn)是免費(fèi)?。?！直接上傳圖片無需更改任何參數(shù)，使用默認(rèn)預(yù)設(shè)清晰度絕對夠用，畫質(zhì)太高也沒有太大意義，反而會影響網(wǎng)站加載速
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
平臺一致性的問題
按鈕的位置非常重要
為什么"確定"按鈕在右側(cè)效果更好
按鈕放置在角落還是放在一起？
結(jié)論
大家好，我是西瓜～
這次我們聊一個設(shè)計知識點(diǎn)，這個知識點(diǎn)平日會被設(shè)計師忽視，因?yàn)樗^于默許，但我們應(yīng)該知道的是，很多默認(rèn)的東西也是有自身的知識結(jié)構(gòu)支撐，久而久之被人忽視了。
大家應(yīng)該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個按鈕大家還記得會放在頁面中的哪個位置嗎？"確定"按鈕是完成任務(wù)的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點(diǎn)屏幕而放棄任務(wù)。那么，根據(jù)它們的功能，最佳的按鈕順序是什么？"確定"按鈕應(yīng)該放在"取消"按鈕之前還是之后呢？
可能這時候很多設(shè)計師會按照習(xí)慣，選擇遵循一致性，采用一些常見的組件樣式進(jìn)行操作。雖然這看起來似乎是解決問題的方法，但實(shí)際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么，單純遵循已有組件并不足以讓設(shè)計師有更好的思維和主動思考的意識。
"一致性"是設(shè)計師中常用的一個詞。然而，這常常也被用作一個借口，讓設(shè)計師不深入思考用戶面臨的設(shè)計問題，如果一個設(shè)計師都不知道為什么一致性的規(guī)則存在，那么遵循這種設(shè)計慣例又有什么意義呢？
如果某種設(shè)計慣例對用戶來說是有害的，那么設(shè)計師是否應(yīng)該盲目遵循它，僅僅因?yàn)橐非笠恢滦?？體驗(yàn)極差的設(shè)計樣式和結(jié)果是否應(yīng)該因?yàn)樵O(shè)計師希望迎合大家都默認(rèn)的設(shè)計一致性而繼續(xù)存在？這其實(shí)本質(zhì)就是個問題...
現(xiàn)在網(wǎng)上有很多組建和參考，都被設(shè)計師天天借鑒和廣泛使用，因?yàn)樗鼈冞m用于用戶。但關(guān)鍵在于，設(shè)計師永遠(yuǎn)不應(yīng)該滿足于墨守成規(guī)的選擇設(shè)計的一致性，將其作為做設(shè)計的唯一理由，我們關(guān)鍵還是要理解為什么應(yīng)該以某種方式而不是其他方式來設(shè)計用戶界面。
這時候有的設(shè)計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標(biāo)簽來突出界面中的操作按鈕，而不是僅關(guān)注按鈕的位置，雖然操作按鈕的視覺重量和標(biāo)簽是需要考慮的重要設(shè)計方面，但它們并不是唯一的方面。
真正一名有思想，會獨(dú)立思考的設(shè)計師會綜合考慮每個設(shè)計方面對用戶的影響，而不只是關(guān)注其中的一個方面，對于設(shè)計師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關(guān)于"確定"/"取消"按鈕的位置進(jìn)行說明的原因。
當(dāng)我們在使用設(shè)計組建框架前進(jìn)行考慮時，你可能會開始明白哪個位置會對用戶效果更好一些，我們可以通過分析設(shè)計對用戶的影響來解決這個問題。
有些設(shè)計師認(rèn)為，將主要操作放在左側(cè)，在次要操作之前，對用戶來說更好，因?yàn)樗?，所以點(diǎn)擊所需時間更少，這看起來好像有點(diǎn)道理，但我們不能忽視一個問題，即在選擇要執(zhí)行的操作之前，用戶會查看所有選項(xiàng)，這意味著大多數(shù)用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點(diǎn)擊主要操作按鈕。
他們將首先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作，然后他們會將視線轉(zhuǎn)回主要操作按鈕進(jìn)行點(diǎn)擊。這里總共涉及到三個視覺注視點(diǎn)，在多個方向上分散了用戶的注意力。
與將主要操作放在左側(cè)相比，將主要操作放在對話框的右側(cè)，將次要操作放在左側(cè)，用戶只需注視每個按鈕一次，并在主要操作按鈕上結(jié)束。這樣一來，視覺注視的數(shù)量就減少了，并且在一個方向上產(chǎn)生了更流暢的視覺流動。
用戶只關(guān)注每個按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側(cè)可能會使用戶更容易點(diǎn)擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對話框的右側(cè)實(shí)際上更快。
當(dāng)用戶點(diǎn)擊“取消”操作按鈕時，他們期望的是產(chǎn)品不進(jìn)行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。
當(dāng)用戶點(diǎn)擊“確定”操作按鈕時，他們期望產(chǎn)品進(jìn)行按鈕所表示的操作，并將他們帶到下一個屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁按鈕的放置方式，將用戶帶到下一頁的按鈕位于右側(cè)，將用戶帶回先前頁面的按鈕位于左側(cè)。這種按鈕位置的安排是有效的，因?yàn)樗c用戶從左到右的閱讀和導(dǎo)航方向相吻合，其中右側(cè)是前進(jìn)方向，左側(cè)是后退方向。
對話框中的"確定"和"取消"按鈕應(yīng)該遵循類似的交互模式，因?yàn)樗鼈兊墓δ茴愃朴诜猪摪粹o，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側(cè)，將次要操作放在左側(cè)，可以使對話框按鈕對用戶更易于理解和使用。
將按鈕放置在對話框的右下角更容易被用戶點(diǎn)擊，因?yàn)檫@符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動，還改善了任務(wù)流程。用戶在掃視過程中不會錯過主要操作按鈕，當(dāng)他們經(jīng)過時，他們的目光會停留在上面，從而可以立即點(diǎn)擊它。
掃視對話框并采取行動變得更快更容易，因?yàn)橛脩舻哪抗庾罱K會落在主要操作按鈕上。
我們需要考慮另一個問題，那就是我們應(yīng)該將按鈕放在角落還是放在一起，當(dāng)將主要操作和次要操作放在對話框的角落時，這與左右導(dǎo)航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導(dǎo)航按鈕，因此并不需要遵循方向映射，有時候這樣做可能帶來更多的弊端。
較大的視覺分離使得比較操作變得困難，并將一個操作與另一個操作隔離開來 如果產(chǎn)品頁面即將執(zhí)行用戶無法撤銷的關(guān)鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因?yàn)樗洚?dāng)安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險在于，由于兩個按鈕之間的視覺分離較大，可能會導(dǎo)致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作，以選擇最佳操作。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
遙望app的設(shè)計在整體上的風(fēng)格化很強(qiáng)，有自己的獨(dú)特性。為了讓用戶之間的粘性更好，更是在活動上、動效上花了很多心思，給用戶帶來很多有趣且良好的體驗(yàn)，讓我?guī)闳ンw驗(yàn)一下吧
整個app的設(shè)計語言貫穿了星形、圓形和三角形 ，同時增加上面三種圖形的線性來點(diǎn)綴設(shè)計。tab圖標(biāo)是圓形和三角形的排列組合，同時增加線的形式點(diǎn)綴其中，層次更加豐富。其他頁面的設(shè)計也是同理，通過將上面3種圖形排列組合，貫穿到整個頁面，設(shè)計語言十分統(tǒng)一。
空界面的設(shè)計運(yùn)用手的動作將每個頁面的情緒感拉的滿滿的，在互動消息的版塊，從關(guān)注到@我，每一個頁面通過不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時也增加了一些趣味性。
勛章是根據(jù)你的確幸值的多少，等級的高低，送禮物的多少，以及你在平臺的表現(xiàn)會給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺的粘性。
遙望app的動效設(shè)計也是十分的流暢和有趣，線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動效，帶來的絲滑體驗(yàn)感十分強(qiáng)烈。
遙望app首頁上面的頭像是匹配器，隨著頭像慢慢的流過,頭像旁邊還有對話框彈出介紹用戶的信息，點(diǎn)擊會有兩只手彼此召喚，再點(diǎn)擊幸會就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過的頁面，點(diǎn)擊可以同樣到打招呼頁面，多個入口引導(dǎo)用戶相互吸引從而形成社交動機(jī)。
加載的動態(tài)效果加入了遙望的IP形象，一個是像地球一樣的自轉(zhuǎn)，一個是像風(fēng)箏一樣在天空飛的效果，動態(tài)十分流暢且有趣。
記錄心情這個是個很有趣的設(shè)計細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。
查看心情
放個氣球把心情寫進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時，你想自己接收就可以點(diǎn)收一個，出現(xiàn)氣球動效加載，就會接收到別人發(fā)出的信息，不想要了，可以點(diǎn)放飛消息就沒有了。
收氣球
雖然泡泡這種形式很常見，但是遙望在細(xì)節(jié)處做的設(shè)計還是很用心，很容易觸動用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場景感。
配配app的設(shè)計可以說是以IP形象為切入的設(shè)計，app里面有著各種各樣的表情和動勢，生動且逗比。而且配配在設(shè)計的時候會融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個ip融入可以說做的很徹底，能夠讓用戶的品牌感知十分深刻。
貼貼功能用了一個超大的特殊的文字字體設(shè)計，十分醒目，在瀑布流的頁面對用戶的信息區(qū)分的比較清楚，但是對于用戶的照片也形成了遮擋，有的時候并不是很好。發(fā)布貼貼的超大字體的設(shè)計很少有人這么設(shè)計，雖然看起來粗糙，但是卻與眾不同。
配配app讓人印象比較深刻的就是這個IP的形象了，在頁面的各種地方都能看到他，無論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。
點(diǎn)亮設(shè)計就是點(diǎn)擊后，寫下一個故事就可以和其他用戶打招呼了，點(diǎn)亮后燈泡會發(fā)出光，然后有星星散落下來，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計方法了。
發(fā)布動態(tài)的功能IP會向你招招手，引導(dǎo)用戶參與發(fā)布動態(tài)。
配配的動態(tài)背景很有意思，打call、吃蘋果、打盹，根據(jù)不同用戶展示不同的動態(tài)背景。
糖果app的設(shè)計在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩，
不過有一些的功能設(shè)計和設(shè)計小細(xì)節(jié)值得體驗(yàn)一下。
糖果的首頁的匹配器設(shè)計是一群人在廣場上一起炫舞，然后各自擺著不同的怪異的姿勢，設(shè)計上十分新穎。
戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個十分匹配的好友。
解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。
無聊嗶嗶雞就是一只雞不停的晃動，可以發(fā)送一句消息直接可以連接到好友。
Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設(shè)計上還是十分大膽，熒光綠的顏色和黑色的結(jié)合，十分亮眼，里面的動效也十分細(xì)膩，非常吸引人的眼球。
引導(dǎo)頁的設(shè)計用多彩的圖形設(shè)計+表情+動效設(shè)計的方式，打造了靈動的引導(dǎo)頁設(shè)計，形成了自己很獨(dú)特的風(fēng)格。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
一、Photoshop(Beta)版本安裝
PS的AI功能需要在Beta版本中才能使用，安裝過程很簡單，可以從下列這個網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本：
https://helpx.adobe.com/cn/photoshop/using/generative-fill.html
點(diǎn)擊「試用」按鈕，會調(diào)起電腦中的Creative Cloud應(yīng)用，正常來說大家電腦里有Adobe軟件一般都會有Creative Cloud，沒下載的話按提示下載就可。
在Creative Cloud中找到①Beta應(yīng)用程序，點(diǎn)擊②安裝按鈕，再點(diǎn)擊③打開按鈕，就可以啟動Beta版PS啦！(我這里已經(jīng)安裝過，所以直接顯示了安裝按鈕)
Beta版PS白色的logo和有趣的啟動頁面??
二、AI創(chuàng)意填充功能
Midjourney生成的圖默認(rèn)是方形，主體位于畫面的中央。如果我們想把主體的位置移到畫面左側(cè)或右側(cè)，需要花費(fèi)很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個痛點(diǎn)問題！
下圖是在Midjourney中生成的例圖，人物在畫面的正中間，關(guān)鍵詞描述：
「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」
如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫面右邊，需要在PS(Beta)中怎么操作呢？
① 先把例圖拖到PS中，用[C]裁剪工具在畫布左邊拉一個空白。
② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會出現(xiàn)一個工具欄。
③ 點(diǎn)擊工具欄的第一個「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。
PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：
·PS的輸入框沒有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；
·支持不輸入內(nèi)容，直接點(diǎn)擊「生成」按鈕，AI會根據(jù)畫面周圍的內(nèi)容智能填充選區(qū)。
三、不輸入內(nèi)容直接生成
第一次體驗(yàn)我沒有輸入任何內(nèi)容，直接點(diǎn)擊PS的「生成」按鈕，一次能生成3張圖片。點(diǎn)擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點(diǎn)擊「生成」，再生成3張?zhí)畛鋱D。
效果圖1??
效果圖2??
效果圖3??
第一次測試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點(diǎn)礙眼。
經(jīng)過多次嘗試后，終于發(fā)現(xiàn)了問題所在：如果框選時剛好只選取了空白畫布，生成出來的新圖和原圖之間就會產(chǎn)生明顯的接縫。簡單高效的解決方式是在框選畫布的時候多框一點(diǎn)點(diǎn)原圖。
這樣再點(diǎn)擊「生成」按鈕，運(yùn)算出來就會有很完美的過渡，看不出破綻。
四、輸入關(guān)鍵詞描述
體驗(yàn)完不輸入關(guān)鍵詞直接生成后，接下來體驗(yàn)一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個空白畫布，輸入關(guān)鍵詞描述：
「Particle effect, sense of technology」
生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！
效果圖1??
效果圖2??
右側(cè)的屬性欄會記錄你剛輸入的關(guān)鍵詞，可以隨時修改關(guān)鍵詞，點(diǎn)擊再次生成3張圖，依次類推，生成的所有圖都會保留下來，方便選擇。
最后
通過這次體驗(yàn)感覺PS的AI填充非常強(qiáng)大，而且效果很精準(zhǔn)，誰能想到在PS中就能完成對一張圖的拉伸和智能填充。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
首先說明，競品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。
建議從下面4個方面入手：
1）調(diào)研背景
主要說一些為什么要調(diào)研，希望通過調(diào)研答達(dá)到什么樣的目的？是視覺升級、體驗(yàn)升級還是為了提升轉(zhuǎn)化率？只有了解為什么做調(diào)研這件事情，才能知道從哪幾個維度調(diào)研。
2）調(diào)研樣本
建議選幾個直接競品，再選幾個優(yōu)秀的次要競品也是可以的，可以幫助補(bǔ)齊盲點(diǎn)。
3）調(diào)研維度
調(diào)研維度要根據(jù)調(diào)研目的來確定，例如如果是為了視覺升級，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗(yàn)升級，那么調(diào)研維度主要集中在交互體驗(yàn)層面。
所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過，倒也不是說如果是視覺升級就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個主要的調(diào)研方向，啥都想要，最后啥都做不好。
4）結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過調(diào)研得到了什么結(jié)論。
我公司這個項(xiàng)目是做一個官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個：
第一個目標(biāo)是視覺體驗(yàn)升級，拆解下來就是界面更好看，內(nèi)容更好找。
第二個目標(biāo)是提升用戶轉(zhuǎn)化率，更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊【咨詢】按鈕。
可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。
好，咱們繼續(xù)，下一步是找樣本。
前面提到過，樣本最好是直接競品+間接競品（主要是一線大廠競品）。
所以這次調(diào)研我選擇了幾個直接競品的官網(wǎng)，以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。
調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。
了解整體架構(gòu)是每個競品調(diào)研都離不開的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。
1）整體架構(gòu)
我當(dāng)時的做法是把主要競品的官網(wǎng)都截圖下來，然后一個模塊一個模塊的去分析，其實(shí)看下來你會發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發(fā)現(xiàn)，哦，原來，這就是行業(yè)內(nèi)的通識性做法。
然后我把這種通識性做法歸納總結(jié)出來，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁可以劃分為四大板塊：
你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實(shí)也就這幾個模塊，這樣看是不是就清晰多了。
既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容，下一步就進(jìn)行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來的規(guī)律呀。
2）內(nèi)容拆解
為啥要拆解內(nèi)容呢？
因?yàn)樵蹅兏偲贩治龅哪康牟痪褪且龅健叭擞形覂?yōu)”嘛，咱們競品分析是為了青出于藍(lán)而勝于藍(lán)呀，所以咱們不能直接抄人家的內(nèi)容，這是無效設(shè)計，咱們要做的是分析他們的優(yōu)點(diǎn)，然后借鑒，然后超越。
進(jìn)行內(nèi)容拆解的時候，建議先定幾個拆解維度，不然會沒有方向，這里我分了三個維度來進(jìn)行拆解：
我就拿【建立認(rèn)知】板塊來舉例。
官網(wǎng)首頁的建立認(rèn)知是什么？
是讓進(jìn)來的用戶對整個網(wǎng)站有一個基礎(chǔ)的認(rèn)知，顧客來了，對店鋪總要有一個第一印象吧。
通過前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁一般使用4種方法來對用戶建立認(rèn)知，哪四種？
banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢
一個用戶看了banner，瀏覽了產(chǎn)品介紹和解決方案，看了產(chǎn)品優(yōu)勢，是不是對咱們的產(chǎn)品有了一個認(rèn)知了，這就是建立認(rèn)知的過程。
那么咱們?nèi)绾稳シ治瞿兀?br />
我的做法是一個個板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來舉例子，看看如何去分析產(chǎn)品介紹這個板塊。
使用3個維度來分析：
維度1：用戶訴求（用戶進(jìn)來之后的訴求）
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？
維度2：業(yè)務(wù)策略（針對用戶訴求，業(yè)務(wù)是怎么解決的）
講清楚三個問題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢“
維度3：常用表達(dá)形式（用什么樣的表達(dá)方式來實(shí)現(xiàn)策略）
拆解下來，是不是對產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優(yōu)勢啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達(dá)方式也是至關(guān)重要的，用什么形式去表達(dá)這個板塊呢？其實(shí)競品已經(jīng)有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實(shí)你的方案就自然而出來了，你知道往哪個方向去使勁了，而不是看別人有啥咱們就做啥。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認(rèn)為它們的區(qū)別是什么？
或者換個方式問你。
買電器你去哪個平臺？
買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？
沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限?！?br />
關(guān)鍵詞是：故事、習(xí)慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內(nèi)心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現(xiàn)出來，這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點(diǎn)印象了？
下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認(rèn)為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運(yùn)用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種：創(chuàng)建新的心智模型
難度指數(shù)：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內(nèi)心接收一個事物，需要刻意培養(yǎng)。
舉幾個例子。
當(dāng)年外賣剛開始的時候，家家搞補(bǔ)貼，很多時候幾乎不花錢就可以點(diǎn)外賣，后來這些福利沒有了，為啥？
因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個新的想法？
因?yàn)橐坏┲踩肓?，就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習(xí)慣養(yǎng)成就很難改變，意味著什么？
意味著留存和轉(zhuǎn)化的成本更低了。
第二種：改變舊的心智模型
難度指數(shù)：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實(shí)世界里”，當(dāng)他和他妻子回到現(xiàn)實(shí)世界后，他妻子仍舊認(rèn)為自己不在現(xiàn)實(shí)世界里，這個被植入的想法已經(jīng)根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價比之王”，也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補(bǔ)貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經(jīng)成型：便宜，質(zhì)量一般。拼多多想改變這個心智，推出百億補(bǔ)貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現(xiàn)有的心智模型
難度指數(shù)：相對簡單。
其實(shí)匹配現(xiàn)有的心智模型，是相對最簡單的方法，市場已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關(guān)注小米的 13 Ultra 嗎？
小米和徠卡聯(lián)合研發(fā)的，主打徠卡調(diào)色的相機(jī)。
我有一個同事就直接把手里的微單換成了 13 Ultra ，因?yàn)榕恼兆銐蚝每炊冶銛y。
這里不是要推銷手機(jī)啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？
和相機(jī)像不像？
這個手柄就是沿用了相機(jī)的心智模式。
小結(jié)一下：
心智模型有3種用法：
新建：創(chuàng)建新的心智模型
改變：改變舊的心智模型
延續(xù)：匹配現(xiàn)有的心智模型
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設(shè)計。
要想匹配用戶的心智模型其實(shí)就三步：
了解業(yè)務(wù)、了解用戶、競品調(diào)研。
或者可以這么說， 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上，還要了解行業(yè)內(nèi)的通用做法。
1）了解業(yè)務(wù)
一定要了解業(yè)務(wù)，為什么？
因?yàn)楹玫脑O(shè)計方案千千萬，但是匹配你的業(yè)務(wù)的方案才是好方案，如果不了解業(yè)務(wù)，可能設(shè)計出來的方案就是自嗨，例如網(wǎng)上很多的dribble風(fēng)設(shè)計。
又比如說手機(jī)瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求，現(xiàn)在手機(jī)屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因?yàn)樽詈蠓桨冈O(shè)計是服務(wù)于最初的業(yè)務(wù)目標(biāo)的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2）了解用戶
為啥？給老人和小孩設(shè)計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設(shè)計一定是不同的，只有了解了他們的喜好和痛點(diǎn)，才能做出符合他們心智模型的設(shè)計。
3）競品調(diào)研
為啥要競品調(diào)研呢？
因?yàn)楦偲泛臀覀兊漠a(chǎn)品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務(wù)上都有一定相似度，那么意味著，競品的方案，大概率是經(jīng)過市場驗(yàn)證的符合用戶心智模型的方案。
你看，既然競品已經(jīng)給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補(bǔ)短，所以不僅要調(diào)研，還要分析，分析就是把競品的優(yōu)劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結(jié)一下，要想匹配用戶的心智模型，一定要了解業(yè)務(wù)、了解用戶，還要做競品調(diào)研了解市場的通識性做法。
以上。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
進(jìn)入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設(shè)計風(fēng)格，截了兩張小程序內(nèi)的兩個界面。 確實(shí)做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析
1.首先從下面的頁面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設(shè)計給人不對稱的感覺，這樣的設(shè)計能讓用戶記住，同時又有一點(diǎn)時尚范的感覺，很符合喜茶目標(biāo)用戶年輕人的審美。
2.同時產(chǎn)品的banner是3:2的比例，較為靠近黃金比例的尺寸。
1.點(diǎn)單頁面，喜茶新增了新品推廣位，一些新上的產(chǎn)品都會在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報一樣，同時第三個廣告位露出部分，讓用戶知道后面還可以左滑查看。同時推廣頁的右下角有個箭頭指引，告知用戶可點(diǎn)擊。
2.看完這幾個頁面會發(fā)現(xiàn)，喜茶的基本上都是純直角的設(shè)計語言，推廣頁是直角、標(biāo)簽是直角、按鈕微圓角，直角的設(shè)計語言給人的感受是時尚、極致、極簡的設(shè)計感受，個人非常喜歡。
3.但是點(diǎn)單頁面的有點(diǎn)亂，標(biāo)簽的顏色過多，不夠統(tǒng)一，圖標(biāo)的也非常的多，這樣給人的感受就會比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶的效率。
1.在點(diǎn)單頁面用戶上滑，推廣位漸漸的往上消失，這樣產(chǎn)品的展示會更多，利于用戶挑選和尋找。
2.用戶在選口味界面，發(fā)現(xiàn)每一個標(biāo)簽的內(nèi)的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁面給人感受簡潔、易操作，同時用戶可以選自己的口味，可進(jìn)行保存，下次點(diǎn)直接就可以選擇自己的口味。
在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個模塊的都是不一樣的，很多產(chǎn)品的商場頁面都是一致的，而喜茶在產(chǎn)品的展示會以不一樣的形式出現(xiàn)，每一個模塊都有尺寸和排版的差異，這樣給用戶有種落錯感，更加有設(shè)計。
1.喜茶的會員頁給我眼前一亮的感覺，會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。
2.會員頁用戶在切換的同時圖標(biāo)的顏色會跟著會員的顏色變化，特權(quán)的內(nèi)容也會有不一樣的變化，讓用戶有明顯的等級感知。
3.切換到“黑卡”的時候，會發(fā)現(xiàn)會員頁的“喜”字加上了質(zhì)感。
4.會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會員做了區(qū)分的同時又加深了品牌印象。
喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡，線性，差異性沒有那么強(qiáng)，而另一種則是插畫風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調(diào)性，而插畫又豐富了頁面的單調(diào)性。
1.喜茶頂部的banner做非常不錯，例如跟FENDI合作的會在首屏加入視頻，用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。
2.用戶在左右切換banner時，文字會先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動畫效果能給產(chǎn)品加分，給用戶留下好的感受。
1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性，給人的感受時尚、極致、有設(shè)計。
2.部分界面和海報喜茶會用上方正悠宋，有點(diǎn)中國風(fēng)、古風(fēng)的韻味在里面，而且也非常有獨(dú)特的設(shè)計美感，喜茶會應(yīng)用在國風(fēng)的海報以及會員頁的“喜”字上，突出風(fēng)格化。
3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計美感，更能傳達(dá)該品牌想傳達(dá)的東西。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
近年來，行業(yè)內(nèi)不斷探索廣告的新玩法，激勵視頻廣告成為一種愈加流行的廣告形式，當(dāng)前已經(jīng)是媒體主流變現(xiàn)模式之一，以滿足廣告主營銷效果、媒體變現(xiàn)效率最大化。對用戶而言，觀看激勵視頻廣告能夠獲得相應(yīng)獎勵；對于客戶，激勵視頻廣告通過獎勵機(jī)制，得到更長時間的曝光來提升轉(zhuǎn)化率；對于平臺，有更高的變現(xiàn)效率能帶來更高的收益。
百度激勵視頻廣告承載著百度APP任務(wù)系統(tǒng)、權(quán)益場景、活動場景等的重要變現(xiàn)任務(wù)，本文將從激勵視頻廣告的框架、提升轉(zhuǎn)化效果兩個方面，來闡述容器結(jié)構(gòu)設(shè)計與提升轉(zhuǎn)化效果的設(shè)計思考。
框架：建立場景核心轉(zhuǎn)化流程
激勵視頻廣告是獨(dú)立的視頻場景，場景內(nèi)的元素布局、容器結(jié)構(gòu)不依賴于所在的宿主場景，在整個交互鏈路中能夠采用更有創(chuàng)新的設(shè)計形式。
1、布局跨場景橫向一致
基于激勵視頻廣告的元素來明確內(nèi)容分區(qū)，考慮元素作用與通用性可分為頂部框架區(qū)、附加掛載區(qū)、內(nèi)容信息區(qū)、轉(zhuǎn)化決策區(qū)，在結(jié)構(gòu)設(shè)計上，將核心獎勵計時組件置于頂部框架區(qū)并保持穩(wěn)定展現(xiàn)，保證百度APP內(nèi)的視頻廣告在布局上橫向一致性，同時也有利于場景之間創(chuàng)意交叉驗(yàn)證與復(fù)用。
2、容器、元素組件選型
從激勵視頻的鏈路流程出發(fā)，結(jié)合主動交互行為的各類組件狀態(tài)：獎勵計時與完成、視頻播放與完播、瀏覽落地頁、退出挽留四種核心狀態(tài)。
1）獎勵計時與完成：考慮獎勵計時器會存在于多種不同場景情況，需要具備橫向統(tǒng)一的計時形式來穩(wěn)定用戶預(yù)期，以及通過視覺反饋給予用戶明確的狀態(tài)變化感知，來降低不同場景下的理解成本，通過ABtest的方式，最終選用場景元素圖標(biāo)與文本計時形式，圖標(biāo)能夠根據(jù)獎勵的不同支持靈活配置，滿足多元化場景的適配訴求，同時選用視覺感知較弱的樣式與動畫形式，盡可能避免與點(diǎn)擊、轉(zhuǎn)化無關(guān)的元素動畫稀釋用戶對內(nèi)容的注意力，從而影響廣告效果。
2）視頻播放與完播：播放狀態(tài)下，為盡量降低對視頻內(nèi)容的遮擋，在轉(zhuǎn)化組件的呈現(xiàn)上，采用“延遲展現(xiàn)吸引觀看，漸進(jìn)式增強(qiáng)吸引點(diǎn)擊”的手段，視頻完播狀態(tài)下呈現(xiàn)視頻尾幀，尾幀增加再看一個視頻功能，為想要獲得金幣的用戶縮短操作步長，提升激勵視頻廣告的分發(fā)。
3）瀏覽落地頁：瀏覽落地頁過程中也需明示獎勵計時，為了保證視頻場景和落地頁場景的計時延續(xù)與組件統(tǒng)一性，采用避讓計時組件的面板化落地頁容器。
4）退出挽留：當(dāng)用戶在不同獎勵狀態(tài)下會在退出的主動行為，挽留彈窗承載挽留與再看功能的重要作用，彈窗作為前后鏈路場景的共性組件，在彈窗設(shè)計上頂部承載所在場景主視覺IP，以滿足多元化場景的下活動主視覺的延續(xù)，使激勵視頻廣告更契合所在活動場景。
3、轉(zhuǎn)化鏈路降步長
在原有的基礎(chǔ)路徑上，獎勵計時與倒計時結(jié)束的兩個環(huán)節(jié)僅有計時器形態(tài)的變化，元素變化是容易起到聚焦視覺的作用的，以倒計時結(jié)束為節(jié)點(diǎn)，將用戶從"視頻場景"帶入到"決策場景"，通過容器結(jié)構(gòu)形態(tài)的變化來解放停留在計時器上的視覺焦點(diǎn)，面板結(jié)構(gòu)能承載更多的增益內(nèi)容，延展信息載量，視頻完播是判斷用戶對內(nèi)容感興趣的重要契機(jī)，在視頻完播狀態(tài)自動調(diào)起落地頁，通過縮短轉(zhuǎn)化步長提升轉(zhuǎn)化效率。
激勵視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴(yán)謹(jǐn)實(shí)驗(yàn)，經(jīng)歷多輪迭代最終完成流程框架搭建，后面我們?nèi)砸伎既绾瓮ㄟ^設(shè)計方法，在現(xiàn)有的框架上進(jìn)一步提升轉(zhuǎn)化效果。
提轉(zhuǎn)：內(nèi)容化與獎勵玩法助決策
在廣告創(chuàng)意視角下，通過內(nèi)容信息命中用戶訴求、滿足心理期望能夠提升轉(zhuǎn)化效果；在用戶目標(biāo)視角下，我們希望充分發(fā)揮激勵機(jī)制，給予用戶更多豐富的獎勵交互與玩法，持續(xù)獲取收益與滿足感。
1、增益信息前置，助力轉(zhuǎn)化決策
輪播推薦詞：推薦詞輪播的形式來營造場景內(nèi)互動氛圍，在一些節(jié)日期間通過契合節(jié)日的情感化文案，讓內(nèi)容更貼合節(jié)日營銷氛圍，同時將落地頁中的優(yōu)質(zhì)廣告賣點(diǎn)、數(shù)據(jù)生成的熱度等多元的營銷信息前置，助力用戶決策。
行動號召詞：不同廣告內(nèi)容之間的轉(zhuǎn)化文案存在差異化的表達(dá)，通過符合廣告內(nèi)容的決策性文案披露，將固定文案升級為營銷目標(biāo)及類型特征文案，輔助轉(zhuǎn)化決策，在容器內(nèi)每一個元素都應(yīng)該作為廣告創(chuàng)意的一部分。
2、分段獎勵計時，引導(dǎo)視頻完播
點(diǎn)擊率、轉(zhuǎn)化率隨視頻播放時長的數(shù)據(jù)變化，發(fā)現(xiàn)呈現(xiàn)正相關(guān)的趨勢，我們希望用戶能夠選擇看完視頻，核心思路是將用戶從低變現(xiàn)效率場景，引導(dǎo)至高變現(xiàn)效率的場景，由此我們通過兩段計時獎勵的設(shè)計形式，激勵用戶可以拿到更多獎勵并將視頻看完，考慮多種不同場景以及理解成本的問題，最終選用兩段獎勵計時組件的方式。
3、彩蛋營造驚喜，提升轉(zhuǎn)化
為了更好的匹配各大電商平臺調(diào)起類廣告的預(yù)算，大促期間的突然出現(xiàn)的禮物彩蛋為用戶營造節(jié)日驚喜感，在點(diǎn)擊行為后，紅包元素的彈窗與彩帶動畫形式來承載金幣獎勵與氛圍，獎勵感知的觸達(dá)能夠提升用戶的獲得感，同時在獎勵彈窗上進(jìn)一步承載調(diào)起任務(wù)，從而更好的滿足客戶營銷訴求。
4、強(qiáng)化轉(zhuǎn)化組件，增強(qiáng)獎勵觸達(dá)
延續(xù)以上驚喜感獎勵滿足促轉(zhuǎn)化的思路，針對下載類廣告，我們在轉(zhuǎn)化組件上進(jìn)行與獎勵內(nèi)容的結(jié)合，在任務(wù)計時完成但并沒有形成轉(zhuǎn)化的時機(jī)下，通過變色與光效視覺吸引來傳遞獎勵信息，通過強(qiáng)化獎勵感知和轉(zhuǎn)化組件來助力轉(zhuǎn)化決策。
寫在最后
激勵視頻廣告至今經(jīng)歷了多個不同的階段，如何在商業(yè)效果與用戶感知之間選取一個平衡點(diǎn)，一直都是激勵視頻廣告的長久的設(shè)計課題，目前也只是一個開始，還有很多的設(shè)計提轉(zhuǎn)機(jī)會點(diǎn)等待我們?nèi)ド钔?，相信在不久的將來能夠探索更加多元的激勵玩法，發(fā)現(xiàn)更多契合用戶訴求的場景，為更好的價值生產(chǎn)不斷迭代功能與體驗(yàn)，我們希望能夠給予用戶、客戶、平臺更多的價值增益，做用戶喜歡、客戶滿意、平臺有利的商業(yè)設(shè)計。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com