平臺一致性的問題
按鈕的位置非常重要
為什么"確定"按鈕在右側(cè)效果更好
按鈕放置在角落還是放在一起?
結(jié)論
大家好,我是西瓜~
這次我們聊一個設(shè)計知識點,這個知識點平日會被設(shè)計師忽視,因為它太過于默許,但我們應(yīng)該知道的是,很多默認的東西也是有自身的知識結(jié)構(gòu)支撐,久而久之被人忽視了。
大家應(yīng)該都見到過彈窗、表單里的"確定"和"取消"按鈕吧,這兩個按鈕大家還記得會放在頁面中的哪個位置嗎?"確定"按鈕是完成任務(wù)的主要操作,而"取消"按鈕是輔助操作,它主要的作用是用于返回到起點屏幕而放棄任務(wù)。那么,根據(jù)它們的功能,最佳的按鈕順序是什么?"確定"按鈕應(yīng)該放在"取消"按鈕之前還是之后呢?
可能這時候很多設(shè)計師會按照習(xí)慣,選擇遵循一致性,采用一些常見的組件樣式進行操作。雖然這看起來似乎是解決問題的方法,但實際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么,單純遵循已有組件并不足以讓設(shè)計師有更好的思維和主動思考的意識。
"一致性"是設(shè)計師中常用的一個詞。然而,這常常也被用作一個借口,讓設(shè)計師不深入思考用戶面臨的設(shè)計問題,如果一個設(shè)計師都不知道為什么一致性的規(guī)則存在,那么遵循這種設(shè)計慣例又有什么意義呢?
如果某種設(shè)計慣例對用戶來說是有害的,那么設(shè)計師是否應(yīng)該盲目遵循它,僅僅因為要追求一致性?體驗極差的設(shè)計樣式和結(jié)果是否應(yīng)該因為設(shè)計師希望迎合大家都默認的設(shè)計一致性而繼續(xù)存在?這其實本質(zhì)就是個問題...
現(xiàn)在網(wǎng)上有很多組建和參考,都被設(shè)計師天天借鑒和廣泛使用,因為它們適用于用戶。但關(guān)鍵在于,設(shè)計師永遠不應(yīng)該滿足于墨守成規(guī)的選擇設(shè)計的一致性,將其作為做設(shè)計的唯一理由,我們關(guān)鍵還是要理解為什么應(yīng)該以某種方式而不是其他方式來設(shè)計用戶界面。
這時候有的設(shè)計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標簽來突出界面中的操作按鈕,而不是僅關(guān)注按鈕的位置,雖然操作按鈕的視覺重量和標簽是需要考慮的重要設(shè)計方面,但它們并不是唯一的方面。
真正一名有思想,會獨立思考的設(shè)計師會綜合考慮每個設(shè)計方面對用戶的影響,而不只是關(guān)注其中的一個方面,對于設(shè)計師來說,最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關(guān)于"確定"/"取消"按鈕的位置進行說明的原因。
當(dāng)我們在使用設(shè)計組建框架前進行考慮時,你可能會開始明白哪個位置會對用戶效果更好一些,我們可以通過分析設(shè)計對用戶的影響來解決這個問題。
有些設(shè)計師認為,將主要操作放在左側(cè),在次要操作之前,對用戶來說更好,因為它更近,所以點擊所需時間更少,這看起來好像有點道理,但我們不能忽視一個問題,即在選擇要執(zhí)行的操作之前,用戶會查看所有選項,這意味著大多數(shù)用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點擊主要操作按鈕。
他們將首先看到左側(cè)的主要操作,然后再看右側(cè)的次要操作,然后他們會將視線轉(zhuǎn)回主要操作按鈕進行點擊。這里總共涉及到三個視覺注視點,在多個方向上分散了用戶的注意力。
與將主要操作放在左側(cè)相比,將主要操作放在對話框的右側(cè),將次要操作放在左側(cè),用戶只需注視每個按鈕一次,并在主要操作按鈕上結(jié)束。這樣一來,視覺注視的數(shù)量就減少了,并且在一個方向上產(chǎn)生了更流暢的視覺流動。
用戶只關(guān)注每個按鈕一次,并最終停留在主要操作按鈕上,將主要操作放在左側(cè)可能會使用戶更容易點擊,但從用戶的心理過程和視覺注視速度來看,將主要操作放在對話框的右側(cè)實際上更快。
當(dāng)用戶點擊“取消”操作按鈕時,他們期望的是產(chǎn)品不進行任何操作,而是將他們返回到起始屏幕位置,因此,"取消"按鈕的功能類似于"返回"按鈕。
當(dāng)用戶點擊“確定”操作按鈕時,他們期望產(chǎn)品進行按鈕所表示的操作,并將他們帶到下一個屏幕。因此,"確定"按鈕的功能類似于"下一步"按鈕,將次要操作按鈕放在左側(cè),將主要操作按鈕放在右側(cè),可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁按鈕的放置方式,將用戶帶到下一頁的按鈕位于右側(cè),將用戶帶回先前頁面的按鈕位于左側(cè)。這種按鈕位置的安排是有效的,因為它與用戶從左到右的閱讀和導(dǎo)航方向相吻合,其中右側(cè)是前進方向,左側(cè)是后退方向。
對話框中的"確定"和"取消"按鈕應(yīng)該遵循類似的交互模式,因為它們的功能類似于分頁按鈕,另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側(cè),將次要操作放在左側(cè),可以使對話框按鈕對用戶更易于理解和使用。
將按鈕放置在對話框的右下角更容易被用戶點擊,因為這符合【古騰堡圖表】。在古騰堡圖表中,右下角區(qū)域是終端區(qū)域,用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時看到他們最后需要執(zhí)行的主要操作,這不僅改善了視覺流動,還改善了任務(wù)流程。用戶在掃視過程中不會錯過主要操作按鈕,當(dāng)他們經(jīng)過時,他們的目光會停留在上面,從而可以立即點擊它。
掃視對話框并采取行動變得更快更容易,因為用戶的目光最終會落在主要操作按鈕上。
我們需要考慮另一個問題,那就是我們應(yīng)該將按鈕放在角落還是放在一起,當(dāng)將主要操作和次要操作放在對話框的角落時,這與左右導(dǎo)航方向相吻合,這是很好的映射。然而,由于"確定"和"取消"按鈕并不是導(dǎo)航按鈕,因此并不需要遵循方向映射,有時候這樣做可能帶來更多的弊端。
較大的視覺分離使得比較操作變得困難,并將一個操作與另一個操作隔離開來 如果產(chǎn)品頁面即將執(zhí)行用戶無法撤銷的關(guān)鍵操作,那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下,"取消"按鈕的功能可能類似于"上一步"按鈕,但它更重要,因為它充當(dāng)安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險在于,由于兩個按鈕之間的視覺分離較大,可能會導(dǎo)致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作,以選擇最佳操作。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
如果軟件操作速度提升了,那么在相同時間內(nèi),我們可以有更多時間和精力用于方案的思考,提升工作效率。這也是我們經(jīng)??吹胶芏郆端產(chǎn)品,在系統(tǒng)做快捷鍵的原因之一。在日常軟件的使用中,我們要盡可能的多使用快捷鍵,減少鼠標操作。舉個實例:
比如,“保存” 用鼠標操作:點擊界面開始菜單 - 調(diào)出下拉菜單 - 找到“保存”按鈕再點擊,這一系列動作需要點擊 3 次鼠標,花費3~4 秒。如果使用快捷鍵,光靠下意識的動作,就可以在 0.1 秒內(nèi)完成操作。
下面整理了一些常用的 Figma 快捷鍵使用技巧,幫助我們提升Figma的操作效率,更快更好的完成工作,節(jié)省時間,以便更專注地思考方案。
文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。
快捷鍵:【Ctrl + Shift + ?】 ,打開 Figma 的快捷鍵面板,可查看 Figma 的所有快捷鍵,方便快速查找。
快捷鍵是【K】,在設(shè)計中縮放是經(jīng)常要用到的功能,在 Figma 中,按一下【K】鍵進行縮放,就可以完全保證比例。
快速畫出環(huán)形進度條的方法,先畫一個圓,然后鼠標拖動兩下就完成了。如下圖:
在桌面或文件夾,選擇需要填充的圖片【Command + C】。點選Figma中待填充元素【Command + V】。填充成功,如下圖:
選中一個已經(jīng)調(diào)整好樣式的元素(圖形或文字),第一步:【Command + option + C】,第二步:【Command + option + V】就可以把樣式復(fù)制粘貼下來。如下圖:
對于使用組件的元素,在調(diào)整的時候需要修改組件母版,才會對每個組件生效。當(dāng)有很多組件時,我們可以通過任意組件,點選右側(cè)“跳轉(zhuǎn)回組件母版”icon,快速定位至母版。如下圖:
第一步:點選右側(cè)“跳轉(zhuǎn)到組件母版”icon,右側(cè)紅框處
第二步:自動定位到該組件母版
選擇一組陣列中的多個元素之后,可以隨意交換任意兩個元素之間的位置,其他的不受影響,還能直接拖動調(diào)整它們的間距。如下圖:
快速批量修改顏色。比如下面九個元素中有三個是紅色,當(dāng)我想要批量修改這三個紅色元素的時候,我不需要一個個選擇這三個元素,只需要批量選擇,然后在右側(cè)屬性欄那里,選擇想修改的那個紅色,直接改顏色,三個元素的顏色就會一起修改了。
快捷鍵【Alt+L】,可以直接將所有圖層折疊起來,這樣,不管之前展開了多少層,都能直接折疊,方便快速瀏覽整個系統(tǒng)的全貌。
使用鍵盤快捷鍵快速瀏覽圖層??旖萱I【Tab】快速向 下 切換選中圖層,【Shift+Tab】快速向 上 切換選中圖層。
使用顏色樣式時,這里有一個小按鈕(下圖紅框標出),可以快速得在列表樣式和網(wǎng)格樣式之間進行切換,使用列表樣式能夠更方便瀏覽使用了哪些顏色,方便進行管理。
吸色工具的快捷鍵是【i】,當(dāng)你按住【i】鍵不動時,移動光標,就能預(yù)覽顏色,而不是直接取色了,預(yù)覽的顏色就如下圖,是展示在右上角的。
快捷鍵是 【cmd/ctrl + D】,如下圖所示,向右下方復(fù)制一個元素,然后使用【cmd/ctrl + D】,會繼續(xù)向右下角復(fù)制元素,重復(fù)的是相關(guān)對象和操作中設(shè)計到的所有元素。
如果設(shè)計時輸入了一些文本,行高有問題,但是暫時又沒有很明確的行高參數(shù),這個時候,只需要在行高這里輸入 auto,點擊回車,就可以把這些文字設(shè)置成自動行高了。如下圖紅框位置:
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
遙望app的設(shè)計在整體上的風(fēng)格化很強,有自己的獨特性。為了讓用戶之間的粘性更好,更是在活動上、動效上花了很多心思,給用戶帶來很多有趣且良好的體驗,讓我?guī)闳ンw驗一下吧
整個app的設(shè)計語言貫穿了星形、圓形和三角形 ,同時增加上面三種圖形的線性來點綴設(shè)計。tab圖標是圓形和三角形的排列組合,同時增加線的形式點綴其中,層次更加豐富。其他頁面的設(shè)計也是同理,通過將上面3種圖形排列組合,貫穿到整個頁面,設(shè)計語言十分統(tǒng)一。
空界面的設(shè)計運用手的動作將每個頁面的情緒感拉的滿滿的,在互動消息的版塊,從關(guān)注到@我,每一個頁面通過不同的情緒表達方式極大了緩解了用戶的焦慮,同時也增加了一些趣味性。
勛章是根據(jù)你的確幸值的多少,等級的高低,送禮物的多少,以及你在平臺的表現(xiàn)會給你發(fā)放不同的勛章,以此讓用戶享受到尊享和定制的感覺,增加用戶的參與感和在平臺的粘性。
遙望app的動效設(shè)計也是十分的流暢和有趣,線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動效,帶來的絲滑體驗感十分強烈。
遙望app首頁上面的頭像是匹配器,隨著頭像慢慢的流過,頭像旁邊還有對話框彈出介紹用戶的信息,點擊會有兩只手彼此召喚,再點擊幸會就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點擊也可進入到好友快速閃過的頁面,點擊可以同樣到打招呼頁面,多個入口引導(dǎo)用戶相互吸引從而形成社交動機。
加載的動態(tài)效果加入了遙望的IP形象,一個是像地球一樣的自轉(zhuǎn),一個是像風(fēng)箏一樣在天空飛的效果,動態(tài)十分流暢且有趣。
記錄心情這個是個很有趣的設(shè)計細節(jié),在記錄心情發(fā)表后,在查看心情的小罐子里就能夠看到你的心情小表情,并且還有心情占比、情緒波動分析,最后在日歷上還能看到每日心情的狀態(tài),可以很好的記錄每日的心情。
查看心情
放個氣球把心情寫進氣球發(fā)送出去,可以抒發(fā)自己的情緒。同時,你想自己接收就可以點收一個,出現(xiàn)氣球動效加載,就會接收到別人發(fā)出的信息,不想要了,可以點放飛消息就沒有了。
收氣球
雖然泡泡這種形式很常見,但是遙望在細節(jié)處做的設(shè)計還是很用心,很容易觸動用戶。發(fā)射泡泡很容易讓然想到泡泡相機,加上“biubiu”的音效,有很強的場景感。
配配app的設(shè)計可以說是以IP形象為切入的設(shè)計,app里面有著各種各樣的表情和動勢,生動且逗比。而且配配在設(shè)計的時候會融入很多小的細節(jié),也能帶給我們很多不一樣的感受。整個ip融入可以說做的很徹底,能夠讓用戶的品牌感知十分深刻。
貼貼功能用了一個超大的特殊的文字字體設(shè)計,十分醒目,在瀑布流的頁面對用戶的信息區(qū)分的比較清楚,但是對于用戶的照片也形成了遮擋,有的時候并不是很好。發(fā)布貼貼的超大字體的設(shè)計很少有人這么設(shè)計,雖然看起來粗糙,但是卻與眾不同。
配配app讓人印象比較深刻的就是這個IP的形象了,在頁面的各種地方都能看到他,無論是在催促你、還是在悠閑的吃東西,還是舉起手或是一起打call,哪里都少不了它。它的設(shè)定非常生活化,也很貼近我們的日常,所以這樣才更夠親近。
點亮設(shè)計就是點擊后,寫下一個故事就可以和其他用戶打招呼了,點亮后燈泡會發(fā)出光,然后有星星散落下來,將表情運用在按鈕上也是很新穎的設(shè)計方法了。
發(fā)布動態(tài)的功能IP會向你招招手,引導(dǎo)用戶參與發(fā)布動態(tài)。
配配的動態(tài)背景很有意思,打call、吃蘋果、打盹,根據(jù)不同用戶展示不同的動態(tài)背景。
糖果app的設(shè)計在于匹配器和其他的很與眾不同,像是在一起炫舞的樣子,看起來很有場景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩,
不過有一些的功能設(shè)計和設(shè)計小細節(jié)值得體驗一下。
糖果的首頁的匹配器設(shè)計是一群人在廣場上一起炫舞,然后各自擺著不同的怪異的姿勢,設(shè)計上十分新穎。
戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣,通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛,最后終于連接上一個十分匹配的好友。
解憂罐子就是把心情放在罐子里,發(fā)送出去,別人可以看到你的罐子,然后你自己也可以做罐子發(fā)送給別人。
無聊嗶嗶雞就是一只雞不停的晃動,可以發(fā)送一句消息直接可以連接到好友。
Blurrr app是一款功能強大的視頻剪輯軟件,Blurrr雖然是一款工具軟件,但是在配色和設(shè)計上還是十分大膽,熒光綠的顏色和黑色的結(jié)合,十分亮眼,里面的動效也十分細膩,非常吸引人的眼球。
引導(dǎo)頁的設(shè)計用多彩的圖形設(shè)計+表情+動效設(shè)計的方式,打造了靈動的引導(dǎo)頁設(shè)計,形成了自己很獨特的風(fēng)格。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
一、Photoshop(Beta)版本安裝
PS的AI功能需要在Beta版本中才能使用,安裝過程很簡單,可以從下列這個網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本:
https://helpx.adobe.com/cn/photoshop/using/generative-fill.html
點擊「試用」按鈕,會調(diào)起電腦中的Creative Cloud應(yīng)用,正常來說大家電腦里有Adobe軟件一般都會有Creative Cloud,沒下載的話按提示下載就可。
在Creative Cloud中找到①Beta應(yīng)用程序,點擊②安裝按鈕,再點擊③打開按鈕,就可以啟動Beta版PS啦!(我這里已經(jīng)安裝過,所以直接顯示了安裝按鈕)
Beta版PS白色的logo和有趣的啟動頁面??
二、AI創(chuàng)意填充功能
Midjourney生成的圖默認是方形,主體位于畫面的中央。如果我們想把主體的位置移到畫面左側(cè)或右側(cè),需要花費很大的精力,而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個痛點問題!
下圖是在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)一個工具欄。
③ 點擊工具欄的第一個「創(chuàng)成式填充」按鈕,進入到AI創(chuàng)意填充功能。
PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中,但功能上又和Midjourney不太一樣:
·PS的輸入框沒有復(fù)雜的指令,只需要輸入關(guān)鍵詞描述,就能夠在選區(qū)內(nèi)生成想要的內(nèi)容;
·支持不輸入內(nèi)容,直接點擊「生成」按鈕,AI會根據(jù)畫面周圍的內(nèi)容智能填充選區(qū)。
三、不輸入內(nèi)容直接生成
第一次體驗我沒有輸入任何內(nèi)容,直接點擊PS的「生成」按鈕,一次能生成3張圖片。點擊左右箭頭可以切換查看3張圖,如果覺得不滿意可以再點擊「生成」,再生成3張?zhí)畛鋱D。
效果圖1??
效果圖2??
效果圖3??
第一次測試生成的圖片效果遠超出預(yù)期,和原圖風(fēng)格也很接近,唯一不足的地方是和原圖拼接處有一條白線,看起來有點礙眼。
經(jīng)過多次嘗試后,終于發(fā)現(xiàn)了問題所在:如果框選時剛好只選取了空白畫布,生成出來的新圖和原圖之間就會產(chǎn)生明顯的接縫。簡單高效的解決方式是在框選畫布的時候多框一點點原圖。
這樣再點擊「生成」按鈕,運算出來就會有很完美的過渡,看不出破綻。
四、輸入關(guān)鍵詞描述
體驗完不輸入關(guān)鍵詞直接生成后,接下來體驗一下輸入關(guān)鍵詞描述后生成的圖片效果如何~這次使用同樣的方法在例圖右側(cè)先拉出一個空白畫布,輸入關(guān)鍵詞描述:
「Particle effect, sense of technology」
生成的圖片效果很棒,和原圖完美地融合在一起,不得不服啊太厲害了!
效果圖1??
效果圖2??
右側(cè)的屬性欄會記錄你剛輸入的關(guān)鍵詞,可以隨時修改關(guān)鍵詞,點擊再次生成3張圖,依次類推,生成的所有圖都會保留下來,方便選擇。
最后
通過這次體驗感覺PS的AI填充非常強大,而且效果很精準,誰能想到在PS中就能完成對一張圖的拉伸和智能填充。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
首先說明,競品調(diào)研的方法有很多,本文只提供一種方法供參考,建議大家活學(xué)活用。
建議從下面4個方面入手:
1)調(diào)研背景
主要說一些為什么要調(diào)研,希望通過調(diào)研答達到什么樣的目的?是視覺升級、體驗升級還是為了提升轉(zhuǎn)化率?只有了解為什么做調(diào)研這件事情,才能知道從哪幾個維度調(diào)研。
2)調(diào)研樣本
建議選幾個直接競品,再選幾個優(yōu)秀的次要競品也是可以的,可以幫助補齊盲點。
3)調(diào)研維度
調(diào)研維度要根據(jù)調(diào)研目的來確定,例如如果是為了視覺升級,那么調(diào)研維度主要就集中在視覺效果上,如果是體驗升級,那么調(diào)研維度主要集中在交互體驗層面。
所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的,不過,倒也不是說如果是視覺升級就只調(diào)研視覺方面的內(nèi)容,而是咱們要有一個主要的調(diào)研方向,啥都想要,最后啥都做不好。
4)結(jié)論
結(jié)論是最重要的,畢竟,做這次的調(diào)研不就是為了這份結(jié)論嗎?所以最后一定要有結(jié)論,也就是咱們通過調(diào)研得到了什么結(jié)論。
我公司這個項目是做一個官網(wǎng)的改版,官網(wǎng)主要就改版主要目標有兩個:
第一個目標是視覺體驗升級,拆解下來就是界面更好看,內(nèi)容更好找。
第二個目標是提升用戶轉(zhuǎn)化率,更細致的拆解一下就是讓更多的用戶點擊【咨詢】按鈕。
可以得到關(guān)鍵詞:界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。
好,咱們繼續(xù),下一步是找樣本。
前面提到過,樣本最好是直接競品+間接競品(主要是一線大廠競品)。
所以這次調(diào)研我選擇了幾個直接競品的官網(wǎng),以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進行輔助分析。
調(diào)研維度又可以分為兩大部分:整體結(jié)構(gòu)、內(nèi)容拆解。
了解整體架構(gòu)是每個競品調(diào)研都離不開的步驟,可以幫助我們快速了解行業(yè)內(nèi)的通識性做法,畢竟站在巨人的肩膀上才能看得更遠嘛。
1)整體架構(gòu)
我當(dāng)時的做法是把主要競品的官網(wǎng)都截圖下來,然后一個模塊一個模塊的去分析,其實看下來你會發(fā)現(xiàn),大家的做法都是有跡可循的。
看下面的圖片,我把他們類似的模塊用同樣的顏色框出來,框出來后就會發(fā)現(xiàn),哦,原來,這就是行業(yè)內(nèi)的通識性做法。
然后我把這種通識性做法歸納總結(jié)出來,發(fā)現(xiàn),其實官網(wǎng)首頁可以劃分為四大板塊:
你看,看似有很多復(fù)雜內(nèi)容的官網(wǎng), 其實也就這幾個模塊,這樣看是不是就清晰多了。
既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容,下一步就進行內(nèi)容的拆解了,拆解什么內(nèi)容?就是拆解上面總結(jié)出來的規(guī)律呀。
2)內(nèi)容拆解
為啥要拆解內(nèi)容呢?
因為咱們競品分析的目的不就是要做到“人有我優(yōu)”嘛,咱們競品分析是為了青出于藍而勝于藍呀,所以咱們不能直接抄人家的內(nèi)容,這是無效設(shè)計,咱們要做的是分析他們的優(yōu)點,然后借鑒,然后超越。
進行內(nèi)容拆解的時候,建議先定幾個拆解維度,不然會沒有方向,這里我分了三個維度來進行拆解:
我就拿【建立認知】板塊來舉例。
官網(wǎng)首頁的建立認知是什么?
是讓進來的用戶對整個網(wǎng)站有一個基礎(chǔ)的認知,顧客來了,對店鋪總要有一個第一印象吧。
通過前面的架構(gòu)拆解我們發(fā)現(xiàn),首頁一般使用4種方法來對用戶建立認知,哪四種?
banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢
一個用戶看了banner,瀏覽了產(chǎn)品介紹和解決方案,看了產(chǎn)品優(yōu)勢,是不是對咱們的產(chǎn)品有了一個認知了,這就是建立認知的過程。
那么咱們?nèi)绾稳シ治瞿兀?br />
我的做法是一個個板塊分析,有些麻煩啊,但是相信我,值得。
下面我就拿建立認知里面的“產(chǎn)品介紹”來舉例子,看看如何去分析產(chǎn)品介紹這個板塊。
使用3個維度來分析:
維度1:用戶訴求(用戶進來之后的訴求)
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能?是否滿足我的需求?
維度2:業(yè)務(wù)策略(針對用戶訴求,業(yè)務(wù)是怎么解決的)
講清楚三個問題,即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢“
維度3:常用表達形式(用什么樣的表達方式來實現(xiàn)策略)
拆解下來,是不是對產(chǎn)品介紹板塊很了解了,產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰,咱們的優(yōu)勢啊。王婆賣瓜,瓜雖好,但是咱們得讓來的人知道咱們的瓜好呀,所以表達方式也是至關(guān)重要的,用什么形式去表達這個板塊呢?其實競品已經(jīng)有了很好的解決方案,那就是上面描述的。
你看,這樣一通分析,其實你的方案就自然而出來了,你知道往哪個方向去使勁了,而不是看別人有啥咱們就做啥。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺,你認為它們的區(qū)別是什么?
或者換個方式問你。
買電器你去哪個平臺?
買衣服你去哪個平臺? 買垃圾袋你去哪個平臺?
是不是有了答案了?
沒猜錯的話, 大部分人的答案是:買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看,這就是一個購物心智模型,你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智,如果讓你去京東買衣服,你會不會覺得,有些別扭?
沒錯,這就是心智模型。
百度百科對心智模型的定義是:
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限。”
關(guān)鍵詞是:故事、習(xí)慣、局限。
淘寶一開始就我們講了一個故事,一個萬能的集市,我們習(xí)慣在上面買衣服,但是也產(chǎn)生了局限性,那就是,當(dāng)我們想買大額電器的時候,還是會選擇京東。
我個人對心智模型的理解是:
我們內(nèi)心深處對一個事物的看法。
空口聊天多沒意思,下面舉個例子。
這是一尊陶俑,第一眼你覺得她像什么?
是不是覺得像米老鼠?
為什么?
因為陶俑的頭上的發(fā)髻和米老鼠標志性的耳朵很像。
如果你從沒見過米老鼠,你還會覺得她像米老鼠嗎?
一定不會。
這就是心智模型,你對頭頂?shù)拇髨A形的心智是“米老鼠”,所以一旦你看到類似的形狀,米老鼠的形象就會浮現(xiàn)出來,這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點印象了?
下面我們接著聊。
我不想用具體的界面來聊,那樣的話太散,我認為要想理解一個概念,最好還是從“面”的角度來說,所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運用方式?
第一種:創(chuàng)建新的心智模型
第二種:改變舊的心智模型
第三種:匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種:創(chuàng)建新的心智模型
難度指數(shù):難啊。
記得《盜夢空間》里最難的是什么嗎?
最難的不是盜夢,而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙,都是讓別人內(nèi)心接收一個事物,需要刻意培養(yǎng)。
舉幾個例子。
當(dāng)年外賣剛開始的時候,家家搞補貼,很多時候幾乎不花錢就可以點外賣,后來這些福利沒有了,為啥?
因為點外賣的心智已經(jīng)培養(yǎng)好了,你離不開它了,所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替,這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法?
因為一旦植入了,就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會,買咖啡會喝瑞幸,一旦用戶的習(xí)慣養(yǎng)成就很難改變,意味著什么?
意味著留存和轉(zhuǎn)化的成本更低了。
第二種:改變舊的心智模型
難度指數(shù):也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實世界里”,當(dāng)他和他妻子回到現(xiàn)實世界后,他妻子仍舊認為自己不在現(xiàn)實世界里,這個被植入的想法已經(jīng)根深蒂固,很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比,后來想往高端路線走,很難,大家心里已經(jīng)認準了小米就是“性價比之王”,也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價,大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比,小米往高端發(fā)展,但是仍舊很難。
拼多多的百億補貼也是一樣的道理,一開始的砍一刀深入人心,大家對拼多多的心智已經(jīng)成型:便宜,質(zhì)量一般。拼多多想改變這個心智,推出百億補貼,并承諾假一賠十,就是想告訴大家,我拼多多,也是有正品好貨的。不過,效果嘛,見仁見智。
第三種:匹配現(xiàn)有的心智模型
難度指數(shù):相對簡單。
其實匹配現(xiàn)有的心智模型,是相對最簡單的方法,市場已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了,你直接使用,那肯定事半功倍,省時省力啊。
舉個例子,大家最近有關(guān)注小米的 13 Ultra 嗎?
小米和徠卡聯(lián)合研發(fā)的,主打徠卡調(diào)色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra ,因為拍照足夠好看而且便攜。
這里不是要推銷手機啊,是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄(一個配角,可以拆卸)。
是不是有些熟悉?
和相機像不像?
這個手柄就是沿用了相機的心智模式。
小結(jié)一下:
心智模型有3種用法:
新建:創(chuàng)建新的心智模型
改變:改變舊的心智模型
延續(xù):匹配現(xiàn)有的心智模型
下面聊聊,咱們怎么做才能更加匹配用戶的心智模型?
同樣的,我不會拿具體頁面來舉例,還是希望把思考方式分享給大家,而不是某一個頁面的設(shè)計。
要想匹配用戶的心智模型其實就三步:
了解業(yè)務(wù)、了解用戶、競品調(diào)研。
或者可以這么說, 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上,還要了解行業(yè)內(nèi)的通用做法。
1)了解業(yè)務(wù)
一定要了解業(yè)務(wù),為什么?
因為好的設(shè)計方案千千萬,但是匹配你的業(yè)務(wù)的方案才是好方案,如果不了解業(yè)務(wù),可能設(shè)計出來的方案就是自嗨,例如網(wǎng)上很多的dribble風(fēng)設(shè)計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部,而夸克瀏覽器卻把搜索框放到了下面。
為什么?
因為夸克想推翻傳統(tǒng)的瀏覽器,想打造一款更年輕更好用的瀏覽器,把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求,現(xiàn)在手機屏幕越來越大,搜索框放在下面手指操作更加方便。
所以,一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺,可它們的用戶心智相差甚大,因為最后方案設(shè)計是服務(wù)于最初的業(yè)務(wù)目標的,業(yè)務(wù)不同,呈現(xiàn)的方案也不一樣,最后讓用戶形成的心智也不同。
2)了解用戶
為啥?給老人和小孩設(shè)計的界面能一樣嗎?
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色,而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體,而老人需要識別度更高的字體,更大的字號。
不同的用戶,采用的設(shè)計一定是不同的,只有了解了他們的喜好和痛點,才能做出符合他們心智模型的設(shè)計。
3)競品調(diào)研
為啥要競品調(diào)研呢?
因為競品和我們的產(chǎn)品類似,那么意味著用戶大概率重合度也高,甚至業(yè)務(wù)上都有一定相似度,那么意味著,競品的方案,大概率是經(jīng)過市場驗證的符合用戶心智模型的方案。
你看,既然競品已經(jīng)給咱們打了個樣,為何還要自己悶頭造輪子呢?
咱們目的是解決問題,又不是為了證明自己很厲害。
但是,不要誤解,我不是說照著競品抄,而是取長補短,所以不僅要調(diào)研,還要分析,分析就是把競品的優(yōu)劣勢找出來,好的地方咱們可以酌情借鑒,不好的地方,咱們也要避個雷嘛。
好了,小結(jié)一下,要想匹配用戶的心智模型,一定要了解業(yè)務(wù)、了解用戶,還要做競品調(diào)研了解市場的通識性做法。
以上。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
什么是好的設(shè)計?好設(shè)計,就是不改稿的設(shè)計,甲方買單的設(shè)計,這句話多大多數(shù)設(shè)計師來說是沒錯的。因為設(shè)計師也要吃飯的、要生活。只要客戶買單了,我們就能達到經(jīng)濟上的收益。
但是僅僅客戶買單就足夠了嗎?我覺得對于一個想要提升自己的設(shè)計師來說并不足夠。這個客戶買單了說明你在一定程度上,在當(dāng)前滿足了這個需求層次或者審美的客戶群體。
當(dāng)客戶發(fā)現(xiàn)設(shè)計并沒有在實際宣傳中達到目的,買完單的客戶也沒辦法回頭再找設(shè)計師退款,但是,可想而知這個客戶就流失了。而且如果只滿足于應(yīng)對這一需求層次的客戶,當(dāng)面對要求更高的客戶的時候,我們也會變得無能為力。只能看著客戶流失,或者勉強接下項目,卻在不斷的改稿中疲于奔命。
想了解什么是好的設(shè)計,首先需要要了解什么是設(shè)計,設(shè)計的目的是什么。
設(shè)計是有目的的策劃,平面設(shè)計是這些策劃將要采取的形式之一,在平面設(shè)計中你需要用視覺元素來傳播你的設(shè)想和計劃,用文字和圖形把信息傳達給受眾,讓人們通過這些視覺元素了解你想表達的信息,這才是我們設(shè)計的定義。平面設(shè)計的目的不僅是視覺表層的美觀度,更重要的、最根本的是信息的傳達。
所以好的設(shè)計就是,能準確直觀的傳播設(shè)計目的,被受眾更有效、更愿意接收信息的設(shè)計。簡單來講,信息(包括內(nèi)容信息和情感信息)傳達的是設(shè)計的基礎(chǔ),是設(shè)計中一切行為的第一準則,是對的設(shè)計。在此基礎(chǔ)上具備良好的美感傳達就是好的設(shè)計。
我們可能在設(shè)計學(xué)習(xí)過程中學(xué)到了很多的設(shè)計法則,形式美法則、創(chuàng)意思維、排版原則、色彩原則、字體運用原則。但是很多時候用到的時候就想不起來,用了也沒達到效果?
我理解更多的是因為沒有從根本上理解這些法則存在的意義、運用的目的。設(shè)計師應(yīng)該做最吝嗇的人,過程中每一個視覺元素的運用都要有其目的性。這個目的性就應(yīng)該是信息傳達和美感傳達。以此為標準反復(fù)檢驗自己的設(shè)計作品,相信我們能做出好的設(shè)計。
(一)客戶對設(shè)計的期待信息準確有效傳遞,受眾對信息要求直觀、易讀。
這是一個高效時代,時間就是金錢。同時是一個信息大爆炸的時代,每天我們會面對各種不同媒介的信息,不斷沖擊這我們的視覺。我們不能要求受眾有時間和耐心完整仔細的觀看閱讀整個設(shè)計。這就要求我們的設(shè)計,即便一眼,就能判斷設(shè)計究竟在表現(xiàn)什么信息,而不被其他不重要信息干擾。當(dāng)客戶對表達信息有一個直觀的概念后,希望繼續(xù)閱讀下去的話,我們就要在易讀方面進行深化。
明確最重要的信息
對于設(shè)計需求的分析得出最重要的信息,最想傳達的信息
突出最重要的信息
將它擺放在突出的位置,整體的烘托,對比的凸顯,合適的構(gòu)圖
次要信息
相對最重要的信息較弱
信息的篩選
設(shè)計中包含的信息必須有明確的效用,而不被不必要的信息干擾導(dǎo)致失去閱讀興趣
設(shè)置重要等級
針對內(nèi)容設(shè)置重要性等級,然后根據(jù)相應(yīng)等級進行設(shè)計。
信息分組
這是受眾感知多條信息的前題,將相關(guān)的信息放置或整合為一體,這樣就可以實現(xiàn)分組。大多數(shù)情況下三至四個信息組已經(jīng)足夠了。
閱讀性文字排版 (閱讀性文字指的是需要受眾閱讀的,而非裝飾性、不需要識別性的)
在文字排版當(dāng)中易讀是必須追求的。
對齊:為了達到易讀效果,首先要從對齊開始。
檢索:易于檢索目標內(nèi)容,精心處理檢索方式。(依據(jù)版式設(shè)計原則中的對比,重復(fù)原則實現(xiàn))
記憶:要點便于記憶,突出主要內(nèi)容。(依據(jù)版式設(shè)計原則中的對比,重復(fù)原則實現(xiàn))
文字:文字大小、字間距、行距、字體、文字的排布五個方面。過小的字體、過大的字體,過度裝飾的字體,不符合視覺流程,不合理的版式布局。都是會影響閱讀的易讀性。
(二)客戶對設(shè)計的期待能引人注意、獲得好的反饋,受眾希望從設(shè)計中收到某種刺激、有所收獲。
人們每天沒數(shù)量驚人的信息淹沒,面對潮水涌來的信息。我們的頭腦中會形成一個過濾器,只會對能引發(fā)我們興趣的信息,能夠得到某種刺激的信息,才能順利通過并留下清晰的印象。因此,想要設(shè)計從眾多信息中脫穎而出并抓住受眾的實現(xiàn)。就必須引人注目、傳遞刺激,讓受眾在你的設(shè)計上逗留。
美的視覺效果比較容易給人帶來刺激
這時候我們學(xué)習(xí)的各種原則知識,構(gòu)成知識(點線面,平衡、對比、調(diào)和、節(jié)奏、變異.....)、版式知識(位置、比例、分割、留白、網(wǎng)格.....)等都可以充分發(fā)揮作用了。
滿足期待
人們希望沖設(shè)計只能夠得到收獲,包括有用的文字信息和情感上的。反過來如果已經(jīng)知道了,沒有興趣,無我無關(guān)的信息,是無法吸引受眾的。選用一種能夠傳達設(shè)計內(nèi)容及主題思想的吸睛元素就很有必要??梢允俏淖郑ǘY物、服務(wù)、免費、抽獎、限時、折扣等)或者圖形元素、圖片。
吸睛元素與設(shè)計需求要匹配
選取吸睛元素必須與設(shè)計主題信息密切相關(guān)。例如,在定位是高品質(zhì)的項目設(shè)計中,放置一個花哨刺眼的打折;在畫面中一個無關(guān)的美女。這確實很可能在短時間內(nèi)贏得受眾的注意,但是當(dāng)文字或圖片與設(shè)計需要傳達的信息完全無關(guān)的情況下。也會很快的失去他們的關(guān)注。
情感刺激
一個好的吸睛元素往往能激發(fā)受眾的情感——受眾會覺得驚喜,感覺自己的情感獲得了認可,也可能會對設(shè)計產(chǎn)生共鳴。一旦感情上拉近了受眾與設(shè)計的距離,就有可能增加受眾良好的反饋行動達到商業(yè)目的(購買產(chǎn)品、產(chǎn)生消費等)。
消極情感
人們被設(shè)計激發(fā)的情感并非總是積極正面的。更重要的是有針對性的激發(fā)觀眾的情感。應(yīng)該根據(jù)不同的設(shè)計目的,激發(fā)觀眾內(nèi)心相應(yīng)的情感。例如一個減肥中心的宣傳設(shè)計,畫面營造一種胖人失落的畫面(沒有偏見我自己也是個胖子~),從而激發(fā)受眾不安的消極情緒。這也可能引起受眾的關(guān)注,并愿意深入了解。
受眾反應(yīng)的不確定性
視覺會給人帶來一連串的生理上的、心理上的、情感上的、行動上的反應(yīng),設(shè)計是視覺經(jīng)驗的科學(xué)。他包括兩個方面,一個是不以人為而改變的即生理感受的人的基本反應(yīng),另一個是隨即的或不確定因素構(gòu)成。如個人喜好,性格等等、等等,導(dǎo)致我們無法完全確定受眾在面對設(shè)計時候的情感等反應(yīng)。
相對穩(wěn)定的方面: 主要是生理上的視知覺,人們的一些視覺習(xí)慣、視覺流程、視覺邏輯,如從上到下,從左到右,喜歡連貫的、重復(fù),喜歡有對比的,還有在顏色方面人們最喜歡的其實是有對比的互補色等等。這都是跟人們的生理上的習(xí)慣有關(guān),都是人生理機能的本能反應(yīng)。作為設(shè)計師應(yīng)該對這些知識能充分了解、靈活運用,設(shè)計是對人本的關(guān)注,首先應(yīng)對文化與人的感知方式這些相對穩(wěn)定的方面進行研究,并且需要我們在實踐中去總結(jié)。
不穩(wěn)定的方面: 不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同,在設(shè)計過程中你需要具備一定的判斷和把握能力,你需要客觀和克制,才能完成卓越的設(shè)計。
設(shè)計思維的科學(xué): 設(shè)計是必須具有科學(xué)的思維方法,能在相同中找到差別,能在不同當(dāng)中找到共同之處,能掌握運用各種思維方法,如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維,善于運用科學(xué)的思維方式找到奇特的新的視覺形象,才能不斷發(fā)現(xiàn)新的可能。
設(shè)計學(xué)習(xí)過程中的總結(jié)和整理,有些內(nèi)容來自網(wǎng)絡(luò),如有冒犯請聯(lián)系我刪改!僅為自身學(xué)習(xí)提升的記錄,如果對內(nèi)容有更好的理解,歡迎交流探討。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
近年來,行業(yè)內(nèi)不斷探索廣告的新玩法,激勵視頻廣告成為一種愈加流行的廣告形式,當(dāng)前已經(jīng)是媒體主流變現(xiàn)模式之一,以滿足廣告主營銷效果、媒體變現(xiàn)效率最大化。對用戶而言,觀看激勵視頻廣告能夠獲得相應(yīng)獎勵;對于客戶,激勵視頻廣告通過獎勵機制,得到更長時間的曝光來提升轉(zhuǎn)化率;對于平臺,有更高的變現(xiàn)效率能帶來更高的收益。
百度激勵視頻廣告承載著百度APP任務(wù)系統(tǒng)、權(quán)益場景、活動場景等的重要變現(xiàn)任務(wù),本文將從激勵視頻廣告的框架、提升轉(zhuǎn)化效果兩個方面,來闡述容器結(jié)構(gòu)設(shè)計與提升轉(zhuǎn)化效果的設(shè)計思考。
框架:建立場景核心轉(zhuǎn)化流程
激勵視頻廣告是獨立的視頻場景,場景內(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)意交叉驗證與復(fù)用。
2、容器、元素組件選型
從激勵視頻的鏈路流程出發(fā),結(jié)合主動交互行為的各類組件狀態(tài):獎勵計時與完成、視頻播放與完播、瀏覽落地頁、退出挽留四種核心狀態(tài)。
1)獎勵計時與完成:考慮獎勵計時器會存在于多種不同場景情況,需要具備橫向統(tǒng)一的計時形式來穩(wěn)定用戶預(yù)期,以及通過視覺反饋給予用戶明確的狀態(tài)變化感知,來降低不同場景下的理解成本,通過ABtest的方式,最終選用場景元素圖標與文本計時形式,圖標能夠根據(jù)獎勵的不同支持靈活配置,滿足多元化場景的適配訴求,同時選用視覺感知較弱的樣式與動畫形式,盡可能避免與點擊、轉(zhuǎn)化無關(guān)的元素動畫稀釋用戶對內(nèi)容的注意力,從而影響廣告效果。
2)視頻播放與完播:播放狀態(tài)下,為盡量降低對視頻內(nèi)容的遮擋,在轉(zhuǎn)化組件的呈現(xiàn)上,采用“延遲展現(xià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é)點,將用戶從"視頻場景"帶入到"決策場景",通過容器結(jié)構(gòu)形態(tài)的變化來解放停留在計時器上的視覺焦點,面板結(jié)構(gòu)能承載更多的增益內(nèi)容,延展信息載量,視頻完播是判斷用戶對內(nèi)容感興趣的重要契機,在視頻完播狀態(tài)自動調(diào)起落地頁,通過縮短轉(zhuǎn)化步長提升轉(zhuǎn)化效率。
激勵視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴謹實驗,經(jīng)歷多輪迭代最終完成流程框架搭建,后面我們?nèi)砸伎既绾瓮ㄟ^設(shè)計方法,在現(xiàn)有的框架上進一步提升轉(zhuǎn)化效果。
提轉(zhuǎn):內(nèi)容化與獎勵玩法助決策
在廣告創(chuàng)意視角下,通過內(nèi)容信息命中用戶訴求、滿足心理期望能夠提升轉(zhuǎn)化效果;在用戶目標視角下,我們希望充分發(fā)揮激勵機制,給予用戶更多豐富的獎勵交互與玩法,持續(xù)獲取收益與滿足感。
1、增益信息前置,助力轉(zhuǎn)化決策
輪播推薦詞:推薦詞輪播的形式來營造場景內(nèi)互動氛圍,在一些節(jié)日期間通過契合節(jié)日的情感化文案,讓內(nèi)容更貼合節(jié)日營銷氛圍,同時將落地頁中的優(yōu)質(zhì)廣告賣點、數(shù)據(jù)生成的熱度等多元的營銷信息前置,助力用戶決策。
行動號召詞:不同廣告內(nèi)容之間的轉(zhuǎn)化文案存在差異化的表達,通過符合廣告內(nèi)容的決策性文案披露,將固定文案升級為營銷目標及類型特征文案,輔助轉(zhuǎn)化決策,在容器內(nèi)每一個元素都應(yīng)該作為廣告創(chuàng)意的一部分。
2、分段獎勵計時,引導(dǎo)視頻完播
點擊率、轉(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ào)起任務(wù),從而更好的滿足客戶營銷訴求。
4、強化轉(zhuǎn)化組件,增強獎勵觸達
延續(xù)以上驚喜感獎勵滿足促轉(zhuǎn)化的思路,針對下載類廣告,我們在轉(zhuǎn)化組件上進行與獎勵內(nèi)容的結(jié)合,在任務(wù)計時完成但并沒有形成轉(zhuǎn)化的時機下,通過變色與光效視覺吸引來傳遞獎勵信息,通過強化獎勵感知和轉(zhuǎn)化組件來助力轉(zhuǎn)化決策。
寫在最后
激勵視頻廣告至今經(jīng)歷了多個不同的階段,如何在商業(yè)效果與用戶感知之間選取一個平衡點,一直都是激勵視頻廣告的長久的設(shè)計課題,目前也只是一個開始,還有很多的設(shè)計提轉(zhuǎn)機會點等待我們?nèi)ド钔?,相信在不久的將來能夠探索更加多元的激勵玩法,發(fā)現(xiàn)更多契合用戶訴求的場景,為更好的價值生產(chǎn)不斷迭代功能與體驗,我們希望能夠給予用戶、客戶、平臺更多的價值增益,做用戶喜歡、客戶滿意、平臺有利的商業(yè)設(shè)計。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍藍設(shè)計的小編 http://www.teruid.com