手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

認(rèn)識(shí)“增長設(shè)計(jì)”

前端達(dá)人

一些從產(chǎn)品/運(yùn)營設(shè)計(jì)角度對(duì)用戶側(cè)增量的思考,希望分享對(duì)大家能有所幫助。文中如理解有誤,歡迎交流指正。
 
 
 
 
 
增長設(shè)計(jì)其實(shí)已經(jīng)不是特別新穎的概念,伴隨互聯(lián)網(wǎng)載體的發(fā)展,我們關(guān)于用戶增長也是在不斷的迭代的。
在導(dǎo)入期和成長期,運(yùn)營手段側(cè)重利益驅(qū)動(dòng),通過補(bǔ)貼/紅包等短平快的推廣活動(dòng)快速獲取用戶;當(dāng)產(chǎn)品積累了大量注冊(cè)用戶,進(jìn)入漫長的成熟期,持續(xù)促進(jìn)用戶活躍就成為更加重要的目標(biāo)。
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
今天,我們來簡(jiǎn)單的聊聊什么是“增長設(shè)計(jì)”,日常的產(chǎn)品/運(yùn)營設(shè)計(jì)中,如何利用增長設(shè)計(jì)做好用戶的激活與留存轉(zhuǎn)化。
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
以往的——“AARRR”增長策略模型
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
我們先來簡(jiǎn)單解析下這個(gè)模型。
 
 
首先第一個(gè)環(huán)節(jié)(Acquisition):獲取用戶
 
簡(jiǎn)單來說,就是如何讓用戶發(fā)現(xiàn)或接觸我們的產(chǎn)品,產(chǎn)品的用戶增量,一定是長期且持續(xù)的不斷的設(shè)法獲取新用戶。
 
 
第二個(gè)環(huán)節(jié)(Activation):用戶激活
 
完成第一步流量獲取之后,下一步要做動(dòng)作的就是激活用戶了,因?yàn)樵诂F(xiàn)在這個(gè)快節(jié)奏時(shí)代,人們的記憶力太短暫了,關(guān)注力也在變?nèi)?。而被拉新過來的用戶,不見得就能成為是你的用戶,所以需要讓用戶在短時(shí)間內(nèi)產(chǎn)生興趣并注冊(cè)使用產(chǎn)品。
 
 
第三個(gè)環(huán)節(jié):(retention )提高留存
 
現(xiàn)在流量越來越貴的情況下,好不容易來的流量不好好加以利用簡(jiǎn)直是浪費(fèi),如果用戶成功激活之后,使用一次產(chǎn)品之后就流失,那單個(gè)用戶的成本特太高了,所以為了拉低獲客成本,我們就要想辦法讓用戶持續(xù)性的來活躍。提升粘性做好留存。
 
 
第四個(gè)環(huán)節(jié):(revenue) 商業(yè)變現(xiàn)
在完成前三個(gè)環(huán)節(jié)之后, 也就是如何讓用戶付費(fèi),讓產(chǎn)品和服務(wù)產(chǎn)生商業(yè)價(jià)值和營收。
 
 
最后一個(gè)環(huán)節(jié):(referral)推薦分享
 
分享推薦,是用戶的一種自我傳播行為,通常來說就是利用一個(gè)事件來吸引用戶主動(dòng)分享,以達(dá)到一傳十,十傳百的效果。社交電商玩的就是這個(gè)套路,拼多多直表示:這活我熟,我天天干,比如用邀請(qǐng)多少好友點(diǎn)鏈接可以提現(xiàn)100現(xiàn)金,砍一刀免費(fèi)領(lǐng)取獎(jiǎng)品等等。
 
 
 
 
 
 
如今的——
“RARRA”增長策略模型
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
如今的增長模型有何區(qū)別?
 
 
以 C 端產(chǎn)品為典型
 
在當(dāng)下的互聯(lián)網(wǎng)市場(chǎng)中,大多產(chǎn)品都會(huì)有一倆個(gè)或多個(gè)競(jìng)爭(zhēng)對(duì)手。如果C端用戶留存率不佳,用戶生命周期不能拉長,就算獲客端導(dǎo)入足夠的用戶量,但用戶流失可能也同樣的快。因?yàn)橛脩粜畔@取的渠道變得簡(jiǎn)單,而且選擇變多了。用戶很快就會(huì)流失或者被吸引到其他競(jìng)品上。
所以當(dāng)下每個(gè)產(chǎn)品都開始注重和思考用戶留存與培養(yǎng)用戶忠誠度的問題,留存逐漸顯現(xiàn)出極高的戰(zhàn)略地位,因而也就漸漸的出現(xiàn)了以用戶留存主導(dǎo)的增長策略。
 
 
 
 
 
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
我們?cè)O(shè)計(jì)師要想所做的用戶增長肯定不是去街上發(fā)個(gè)小廣告,去地鐵上拿著產(chǎn)品的下載二維碼讓用戶去下載我們的產(chǎn)品,我們?cè)O(shè)計(jì)師著手的設(shè)計(jì)增長范圍還是從用戶體驗(yàn)去入手,回歸到產(chǎn)品功能設(shè)計(jì)和體驗(yàn)提升上。
 
例如,公司現(xiàn)在想要提升某款產(chǎn)品的銷量,作為設(shè)計(jì)師做方案輸出的時(shí)候肯定不會(huì)是建議讓公司去請(qǐng)個(gè)明星代言來吸引用戶下單之類的。
 
 
設(shè)計(jì)師的增長觀一定是基于產(chǎn)品本身
,我們所要思考的應(yīng)該是如何讓用戶快速認(rèn)識(shí)我們的產(chǎn)品,悉知我們產(chǎn)品的優(yōu)勢(shì)和價(jià)值,縮短路徑下單路徑,便利流暢讓用戶能成交,盡量讓用戶有優(yōu)秀的使用體驗(yàn)從而助力用戶的數(shù)據(jù)增長。
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
人是社交型的集合體,包括社交反饋、伙伴關(guān)系,甚至是從眾和競(jìng)爭(zhēng)心理。當(dāng)你看到朋友
曬出某些技能、珍貴的物品或者靚麗的照片,你也會(huì)想跟他一樣,這一驅(qū)動(dòng)力也反映了我們?yōu)槭裁瓷鷣砭推珢叟c我們有關(guān)的人。
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
舉個(gè)例子,假設(shè)我是一個(gè)喜歡閱讀的用戶。
 
當(dāng)我打開微信讀書,APP告訴我,作為我的微信好友的“他/她”同樣在使用著微信讀書,并且他還在閱讀當(dāng)初我看過的“硅谷鋼鐵俠”這本了解埃隆•馬斯克最全面、最真實(shí)、最經(jīng)典讀本。
 
這時(shí)你會(huì)發(fā)現(xiàn),原來身邊有人也對(duì)這本書這么感興趣,從而激發(fā)用戶對(duì)這個(gè)微信讀書這款產(chǎn)品的認(rèn)同感。同時(shí)這個(gè)APP里肯定能找到更多的優(yōu)秀讀物,從而從動(dòng)力上強(qiáng)化了用戶對(duì)產(chǎn)品使用行為。
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
APP內(nèi)的紅包激勵(lì)手段
——燒錢要燒得明明白白,不同的用戶的“精細(xì)化燒法”
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
  •  
    1.新用戶紅包:拉新激活
 
在用戶首次接觸產(chǎn)品,也就是用戶新鮮感最高的時(shí)候,新用戶的大額紅包有利于快速激活用戶的注冊(cè)行為,讓新用戶快速熟悉使用流程,盡快完成第一單,將新用戶盡快轉(zhuǎn)化成有效用戶。
 
 
  •  
    2.滿減限時(shí)紅包:用戶促活
 
顧名思義,這類紅包具有時(shí)效性。要求用戶在指定的時(shí)間段內(nèi)使用紅包,過期紅包則失效。這類贈(zèng)送的紅包目的是給用戶低成本薅羊毛的機(jī)會(huì),同時(shí)制造緊迫感,鼓勵(lì)并強(qiáng)化用戶產(chǎn)生盡快完成購買下單的行為,主要目標(biāo)就是為了提升產(chǎn)品轉(zhuǎn)化率。
 
 
  •  
    3.會(huì)員成長紅包:用戶粘性
 
用戶以優(yōu)惠的價(jià)格開通會(huì)員后,通過平臺(tái)每月贈(zèng)送紅包從而可以享受更多優(yōu)惠或者獎(jiǎng)勵(lì)金的形式,讓用戶每到飯點(diǎn)時(shí)就惦記著我還有個(gè)紅包沒用,如果不用就浪費(fèi)了,從而增加用戶的沉默成本,能持續(xù)的讓用戶在固定時(shí)間內(nèi)重復(fù)回歸產(chǎn)品,而達(dá)到保持用戶粘性的目的。
 
 
 
 
 
 
關(guān)于個(gè)性化推薦,提升用戶動(dòng)力。
這里我們主要看一下保險(xiǎn)行業(yè)。特別是互聯(lián)網(wǎng)保險(xiǎn),線上產(chǎn)品的銷售一定是產(chǎn)品找人,結(jié)合場(chǎng)景的方式,保險(xiǎn)產(chǎn)品自動(dòng)找人進(jìn)行自我營銷。推薦保險(xiǎn)的意義需要第一時(shí)間就被用戶所感知到,產(chǎn)品是非常符合他的需求的,這個(gè)時(shí)候才有可能高效的完成客戶轉(zhuǎn)化。
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
提升用戶動(dòng)力之——游戲化
當(dāng)產(chǎn)品積累了大量注冊(cè)用戶,進(jìn)入漫長的成熟期,持續(xù)促進(jìn)用戶活躍就成為更加重要的目標(biāo),用戶對(duì)簡(jiǎn)單的商品宣傳(運(yùn)營活動(dòng))容易感到乏味或無法提起持續(xù)參與的興趣,所以更多的會(huì)將運(yùn)營活動(dòng)包裝成一個(gè)簡(jiǎn)單易懂的游戲去俘獲用戶的芳心。
 
 
比如人人都有的支付寶,常見的如:收集,養(yǎng)成,抽獎(jiǎng),種植...等系列游戲化增長玩法是其此階段的主要運(yùn)營手段之一,在利益驅(qū)動(dòng)的同時(shí),加強(qiáng)游戲化的趣味體驗(yàn),取悅用戶、制造記憶點(diǎn),更有利于黏住用戶、建立長期忠誠。
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
游戲化玩法尤其重要的一點(diǎn)就是任務(wù)體系,任務(wù)獎(jiǎng)勵(lì)可以激勵(lì)人們采取行動(dòng),將用戶引導(dǎo)去體驗(yàn)不同的頁面,它幫助用戶熟悉更多的APP功能和流程。更可以設(shè)置分享型的任務(wù),讓用戶主動(dòng)傳播產(chǎn)生裂變,這既是內(nèi)容分發(fā)最有效的途徑,也是拉新促活的低成本實(shí)現(xiàn)方法。
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
上面說了做加法,那接下來我們聊聊如何做減法。
絕大數(shù)用戶剛接觸產(chǎn)品或工具時(shí),都會(huì)有一部分人選擇離開,可能是注冊(cè)環(huán)節(jié)、功能指引環(huán)節(jié)等等,所以在這個(gè)階段對(duì)于用戶的激活和留存的最好方式就是幫產(chǎn)品做減法
 
 
 
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
當(dāng)然,增長設(shè)計(jì)遠(yuǎn)不止上面分享的這些。比如積分成就體系,完善獎(jiǎng)勵(lì)機(jī)制,彈窗引導(dǎo)助推,弱化用戶的負(fù)面情緒....限于時(shí)間原因,今天暫時(shí)先分享到這
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 
認(rèn)識(shí)“增長設(shè)計(jì)”
 
 
 


作者:7V_Kevin
鏈接:https://www.zcool.com.cn/article/ZMTYxNjk0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南

前端達(dá)人

當(dāng)你打開一個(gè)頁面,首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi),既保證內(nèi)容的完整性,又讓用戶能夠輕松理解和瀏覽,這背后的奧秘就在于頁面分割。今天,我們就來一起
探討頁面分割的藝術(shù)與技巧
,看看它是如何為你的設(shè)計(jì)增添魅力,提升用戶體驗(yàn)的。
 
在設(shè)計(jì)中,頁面分割不僅僅是一種技術(shù)手段,更是一種藝術(shù)表現(xiàn)。它如同一位細(xì)心的畫師,巧妙地運(yùn)用線條、色彩、空白等元素,
將頁面內(nèi)容劃分為一個(gè)個(gè)清晰、有序的區(qū)域。
通過這些分割,用戶能夠更快速地找到所需信息,更輕松地理解頁面內(nèi)容,從而享受到更加愉悅的閱讀體驗(yàn)。
 
頁面分割的魅力在于其
多樣性和靈活性
。不同的頁面可以采用不同的分割方式,如線條分割、卡片分割、留白分割等,以滿足不同的設(shè)計(jì)需求和用戶習(xí)慣。同時(shí),頁面分割也需要根據(jù)內(nèi)容的實(shí)際情況進(jìn)行合理調(diào)整,既要保證信息的完整性,又要避免過度分割帶來的混亂感。
 
在本文中,我們將一起探討頁面分割的原則、技巧和應(yīng)用實(shí)例。我們將學(xué)習(xí)如何運(yùn)用不同的分割方式來優(yōu)化頁面布局,提升用戶體驗(yàn)。同時(shí),我們還將分享一些成功的頁面分割案例,以激發(fā)你的設(shè)計(jì)靈感,為你的界面設(shè)計(jì)注入新的活力。
 
分享目錄:
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結(jié)
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割:
通過使用線條來劃分頁面的不同區(qū)域,以達(dá)到組織內(nèi)容、引導(dǎo)用戶視線和提升整體美觀度的目的。這種分割方式簡(jiǎn)單明了,能夠清晰地展現(xiàn)出頁面內(nèi)容的層次和結(jié)構(gòu)。
 
卡片分割:
卡片式設(shè)計(jì)是一種流行的界面分割方法,通過將內(nèi)容劃分為獨(dú)立的卡片或區(qū)塊,使用戶能夠更清晰地理解信息。每個(gè)卡片通常包含相關(guān)的內(nèi)容,如文本、圖片或按鈕,以便用戶快速瀏覽和交互。
 
留白分割:
主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),自然地將信息進(jìn)行分組。這種留白的方式能夠?yàn)轫撁嬖黾雍粑校档鸵曈X噪音,使設(shè)計(jì)看起來更簡(jiǎn)潔。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
近年來,設(shè)計(jì)趨勢(shì)從
“卡片式設(shè)計(jì)”轉(zhuǎn)向了“去線化設(shè)計(jì)”,
即傾向于使用留白分割而非過多的線條分割,以實(shí)現(xiàn)更為簡(jiǎn)潔清晰的界面效果。設(shè)計(jì)師在選擇分割方式時(shí),應(yīng)
優(yōu)先考慮留白分割,其次是線性分割,最后是卡片分割
。這個(gè)選擇順序反映了設(shè)計(jì)界的一般原則,即在不影響信息傳達(dá)的前提下,盡可能保持設(shè)計(jì)的簡(jiǎn)潔性。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割的定義:
線性分割設(shè)計(jì)是一種在視覺設(shè)計(jì)中使用的技巧,它使用線條、邊框或細(xì)線等元素來劃分、區(qū)分或連接頁面上的不同內(nèi)容區(qū)域。這種設(shè)計(jì)手法主要用于
提高頁面內(nèi)容的可讀性和組織性,幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設(shè)計(jì)具有以下優(yōu)勢(shì):
 
1.劃分區(qū)域:
線性分割可以將頁面劃分為不同的區(qū)域或模塊,使得每個(gè)區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息,提高閱讀效率。
 
2.區(qū)分內(nèi)容:
線性分割可以用來區(qū)分不同類型的內(nèi)容,如文本、圖片、圖表等。通過線性分割,可以將這些內(nèi)容進(jìn)行分組或歸類,使得頁面更加整潔、有序。
 
3.引導(dǎo)視線:
線性分割可以引導(dǎo)用戶的視線,幫助他們更好地理解頁面內(nèi)容。通過合理的線性分割設(shè)計(jì),可以突出顯示重要的信息或元素,引導(dǎo)用戶關(guān)注到關(guān)鍵內(nèi)容。
 
4.增強(qiáng)層次感:
線性分割可以增強(qiáng)頁面的層次感,使得頁面內(nèi)容更加豐富、有深度。通過不同樣式的線性分割,可以區(qū)分不同的信息層級(jí),幫助用戶更好地理解頁面結(jié)構(gòu)和內(nèi)容關(guān)系。
 
使用原則:
在使用分割線時(shí),我們應(yīng)遵循一些原則,以確保其有效地幫助用戶理解頁面的組成,同時(shí)避免過度使用帶來的視覺干擾。
 
1.分割線應(yīng)當(dāng)微妙而不過于顯眼。
它們?cè)诓季种袘?yīng)該容易被用戶注意到,但又不應(yīng)成為焦點(diǎn),以免分散用戶的注意力。
 
2.分割線應(yīng)被視為次要的元素。
只有在留白等其他設(shè)計(jì)手法無法有效起到分割作用時(shí),才考慮使用分割線。它們應(yīng)當(dāng)是布局中的輔助工具,而不是主導(dǎo)元素。
 
3.謹(jǐn)慎使用分割線。
過度使用分割線可能會(huì)導(dǎo)致頁面顯得混亂和復(fù)雜。相反,我們應(yīng)該用分割線來創(chuàng)建信息分組,而不是簡(jiǎn)單地分割每一個(gè)條目。通過審慎而恰當(dāng)?shù)厥褂梅指罹€,我們可以有效地提升頁面的可讀性和用戶體驗(yàn)。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型:
通欄分割線、內(nèi)嵌分割線和中間分割線。
 
1.通欄分割線(Full-bleed Dividers):
通欄分割線通常橫跨整個(gè)頁面寬度,用于分隔彼此完全獨(dú)立的內(nèi)容區(qū)域。這種分割線在視覺上非常顯著,能夠清晰地劃分出不同的內(nèi)容區(qū)塊,使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產(chǎn)品列表、服務(wù)介紹等獨(dú)立的內(nèi)容區(qū)域。
 
2.內(nèi)嵌分割線(Inset Dividers):
內(nèi)嵌分割線通常位于內(nèi)容區(qū)域內(nèi)部,用于分隔有錨點(diǎn)(如頭像、圖標(biāo)等)的相關(guān)內(nèi)容。這些錨點(diǎn)可以是圖片、符號(hào)或小的圖形元素,它們與分割線一起,幫助用戶更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線常用于列表、卡片式布局、時(shí)間線等場(chǎng)景中,用于展示有關(guān)聯(lián)但不同類別的信息。
 
3.中間分割線(Middle Dividers):
中間分割線位于兩個(gè)內(nèi)容區(qū)域之間,用于分隔無錨點(diǎn)的相關(guān)內(nèi)容。這種分割線通常比通欄分割線更細(xì),更注重于在視覺上劃分空間,而不是強(qiáng)調(diào)內(nèi)容的獨(dú)立性。中間分割線常用于文本段落之間、列表項(xiàng)之間或不同功能區(qū)域之間,以提供清晰的結(jié)構(gòu)和層次。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
在大多數(shù)情況下,當(dāng)信息層級(jí)較為簡(jiǎn)單(即信息層級(jí)≤2)時(shí),使用分割線進(jìn)行信息分割是一種有效的方法。然而,實(shí)際上,
如果留白間距足夠大,我們也可以使用留白來達(dá)到類似的效果
。通過增大留白間距,我們可以創(chuàng)造出清晰的視覺區(qū)域劃分,使得信息之間的界限更加明確。
 
與分割線相比,足夠大的留白間距可以避免多余的線性元素干擾,讓整體視覺效果更加清爽。這樣的設(shè)計(jì)選擇有助于提升用戶的閱讀體驗(yàn),使用戶更加輕松地理解和消化信息。
 
因此,在
信息層級(jí)較簡(jiǎn)單的情況下,我們可以靈活地選擇使用分割線或留白來進(jìn)行信息分割
。通過調(diào)整留白間距,我們可以達(dá)到與分割線相似的效果,同時(shí)保持整體設(shè)計(jì)的簡(jiǎn)潔和清晰。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
為了提升屏效
,我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下,分割線的設(shè)計(jì)顯得尤為重要,因?yàn)樗鼈兡軌?/div>
有效地劃分信息區(qū)域,使內(nèi)容更加清晰、易于理解。
 
通過使用分割線,我們可以
將較多的信息條理化
,使得用戶能夠更快速地找到所需的內(nèi)容。與沒有分割線的布局相比,使用分割線能夠
顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下,分割線能夠?qū)⑿畔^(qū)域明確地劃分開來,
防止信息之間產(chǎn)生混淆或交叉
。這種劃分不僅使得每個(gè)信息塊更加獨(dú)立,而且提高了信息之間的對(duì)比度,使用戶能夠更輕松地識(shí)別和區(qū)分不同的信息。
 
因此,當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時(shí),分割線的設(shè)計(jì)是一個(gè)關(guān)鍵要素。通過合理地使用分割線,我們可以確保信息布局更加清晰、有序,從而提高用戶的閱讀效率和滿意度。(如下圖)
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割在移動(dòng)端頁面設(shè)計(jì)中的應(yīng)用場(chǎng)景廣泛,尤其是在
需要清晰劃分信息模塊時(shí)
。如微信的聊天列表中,線性分割被用來區(qū)分不同的消息條目。每條消息之間通過一條細(xì)線進(jìn)行分隔,使得每條消息清晰可辨,方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類
App的信息提示
中,如果有多條消息需要展示,線性分割可以用來
區(qū)分不同的消息組
。例如招商銀行APP中,當(dāng)用戶收到多條未讀消息時(shí),每條消息之間可以通過線性分割進(jìn)行區(qū)分,使得每條消息清晰可辨,方便用戶逐一查看和處理。
 
在APP
需要用戶填寫信息和設(shè)置的表單頁面中
,線性分割可以用來區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫的信息,提高表單的填寫效率和準(zhǔn)確性,比如站酷的設(shè)置頁面(如下圖)
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
卡片分割的定義:
卡片分割設(shè)計(jì)主要通過將內(nèi)容或功能區(qū)域劃分成獨(dú)立的“卡片”來進(jìn)行信息展示和組織。每個(gè)卡片通常包含相關(guān)的內(nèi)容或功能,并且與其他卡片通過一定的間距或線性分隔進(jìn)行區(qū)分。
 
卡片分割設(shè)計(jì)具有以下優(yōu)勢(shì):
 
1.內(nèi)容封裝:
卡片分割設(shè)計(jì)將相關(guān)內(nèi)容或功能封裝在一個(gè)獨(dú)立的卡片內(nèi),使得每個(gè)卡片成為一個(gè)獨(dú)立的信息單元。這有助于保持頁面內(nèi)容的清晰和整潔,方便用戶瀏覽和理解。
 
2.明確邊界
:每個(gè)卡片通常具有明確的邊界,通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個(gè)卡片在視覺上相對(duì)獨(dú)立,方便用戶進(jìn)行區(qū)分和識(shí)別。
 
3.靈活布局:
卡片分割設(shè)計(jì)具有很高的靈活性,可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣來靈活調(diào)整卡片的布局,以達(dá)到最佳的視覺效果。
 
4.強(qiáng)調(diào)重點(diǎn):
通過不同的視覺處理手法,如改變卡片的顏色、大小或樣式等,可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力,引導(dǎo)他們關(guān)注到關(guān)鍵信息。
 
卡片的基本構(gòu)成:
卡片是一個(gè)獨(dú)立的主題性容器,旨在將內(nèi)容和操作組合在一起。它可以包含多種元素,如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在,而是根據(jù)具體需求進(jìn)行選擇和配置。無論選擇哪些元素,它們都會(huì)以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計(jì)使得卡片成為一個(gè)靈活且高效的信息展示工具,適用于各種場(chǎng)景和應(yīng)用。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
卡片分割常見的類型:
卡片分割可分為
通欄卡片
非通欄卡片
 
1、通欄卡片:
其特點(diǎn)是卡片占據(jù)整個(gè)頁面寬度,沒有左右邊距。通欄卡片的設(shè)計(jì)可以提高布局的靈活性,使得頁面內(nèi)容更加寬敞和大氣。同時(shí),通欄卡片也可以更好地突出展示單條內(nèi)容,引導(dǎo)用戶的視線,提高閱讀效率。
 
2.非通欄卡片:
與通欄卡片相比,它會(huì)在卡片的左右兩側(cè)留有邊距,不完全占據(jù)整個(gè)頁面寬度。這種設(shè)計(jì)方式可以使得頁面內(nèi)容更加有層次感和組織性,同時(shí)也有利于突出顯示某些關(guān)鍵信息。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片,其設(shè)計(jì)特點(diǎn)在于去除了左右兩端的留白,僅保留上下邊距,從而提供了更大的展示空間。這種設(shè)計(jì)使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個(gè)頁面寬度,進(jìn)一步增強(qiáng)了內(nèi)容的視覺沖擊力。在通欄卡片中,卡片與背景的關(guān)系通常通過一條背景色塊來抽象表現(xiàn),這種簡(jiǎn)潔的處理方式避免了過多的視覺元素干擾,使得頁面整體看起來更加整潔和統(tǒng)一。
 
通欄卡片可以被視為在極簡(jiǎn)列表式和傳統(tǒng)卡片式設(shè)計(jì)之間的一種折中選擇。它繼承了卡片式的分層方式和強(qiáng)交互性,使得用戶能夠輕松地瀏覽和交互頁面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁面。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
非通欄卡片
非通欄卡片
通常采用帶圓角的設(shè)計(jì)形式
,這種設(shè)計(jì)不僅賦予卡片一種柔和、圓潤的視覺效果,還增強(qiáng)了用戶的視覺舒適度。結(jié)合陰影效果以及四周的邊距,非通欄卡片巧妙地形成頁面留白,使得整體設(shè)計(jì)層次感更加豐富。
 
通過巧妙的投影設(shè)計(jì)以及前后顏色的精準(zhǔn)設(shè)定,非通欄卡片成功地讓內(nèi)容與背景之間
產(chǎn)生視覺空間感
,進(jìn)一步強(qiáng)化了內(nèi)容的立體感和層次感。這種設(shè)計(jì)技巧不僅提升了卡片的視覺吸引力,還使得用戶在瀏覽頁面時(shí)能夠更加輕松地
區(qū)分和聚焦關(guān)鍵信息
。
 
在頁面設(shè)計(jì)中,非通欄卡片的應(yīng)用范圍十分廣泛。無論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容,非通欄卡片都能夠通過其獨(dú)特的視覺效果和設(shè)計(jì)元素,為用戶帶來更加舒適、美觀的視覺體驗(yàn)。同時(shí),非通欄卡片還具有良好的
適應(yīng)性和靈活性
,可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣進(jìn)行定制和調(diào)整,滿足不同場(chǎng)景下的應(yīng)用需求。如下圖夸克“夸克日?qǐng)?bào)”、APP Store“首頁”

 
 
選擇使用通欄分割線還是卡片分割,主要取決于你的設(shè)計(jì)目標(biāo)和內(nèi)容需求。以下是三個(gè)參考建議,幫助你做出更好的選擇:
 
1.當(dāng)內(nèi)容已有自然分割線時(shí):
如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線,比如列表項(xiàng)、段落分隔等,那么采用非通欄分割會(huì)是一個(gè)好選擇??ㄆ梢郧逦亟缍總€(gè)內(nèi)容塊,使主題信息層次更加分明,提高用戶的閱讀效率。
 
2.當(dāng)內(nèi)容類型多樣且占據(jù)較大空間時(shí):
如果單個(gè)主題內(nèi)部包含了多種類型的內(nèi)容,如文字、圖片、視頻等,且這些內(nèi)容在垂直方向上占據(jù)了較大的空間(例如,內(nèi)容長度超過屏幕高度的一半),使用非通欄分割會(huì)更加合適??ㄆ軌蛴行У厝Χ▋?nèi)容范圍,為用戶提供一個(gè)明確的視覺邊界,幫助他們更好地理解和消化信息。
 
3.當(dāng)需要增強(qiáng)橫向空間感時(shí):
如果你希望擴(kuò)展頁面的橫向空間,或者暗示用戶可以橫向滑動(dòng)頁面查看更多內(nèi)容,那么非通欄卡片會(huì)是更好的選擇。非通欄卡片的設(shè)計(jì)能夠利用橫向內(nèi)容連續(xù)性原則,幫助用戶建立頁面可以橫向滑動(dòng)的意識(shí),從而提升頁面的互動(dòng)性和用戶體驗(yàn)。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。

 
 
卡片分割更適合圖文混排
卡片分割設(shè)計(jì)以其獨(dú)特的布局方式,成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個(gè)界面中,
實(shí)現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結(jié)合
。這種設(shè)計(jì)不僅讓單屏區(qū)域能夠顯示更多內(nèi)容,還通過合理的空間劃分,確保了文字和圖片之間的和諧共存,既維持了視覺的一致性,又
巧妙地平衡了文字和圖片的視覺強(qiáng)度
。因此,在需要同時(shí)呈現(xiàn)多種內(nèi)容和媒介的場(chǎng)景中,卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”

 
 

 
 

 
 
留白分割的定義:
留白分割是目前設(shè)計(jì)的主流趨勢(shì),越來越多的產(chǎn)品在使用留白分割設(shè)計(jì)。留白分割主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),將信息進(jìn)行自然的視覺分組。
 
留白分割具有以下優(yōu)勢(shì):
 
1.突出重點(diǎn)信息:
通過增加間距,可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開來,使用戶更容易注意到。
 
2.提高可讀性:
適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰,減少視覺干擾,從而提高用戶的閱讀效率。
 
3.增強(qiáng)設(shè)計(jì)感:
留白可以為設(shè)計(jì)增加呼吸感,避免元素過于擁擠,使整體布局更加和諧、美觀。
 
當(dāng)元素之間的間距保持均勻時(shí),整個(gè)視覺呈現(xiàn)會(huì)顯得平衡且協(xié)調(diào),大腦默認(rèn)為一個(gè)整體。然而,一旦元素的橫向和縱向間距發(fā)生變化,我們的大腦會(huì)
基于接近性法則
,本能地將距離較近的元素視為一個(gè)整體或群組,這就是留白分割。(如下圖)

 
 
留白分割在
有規(guī)律且卡片樣式較多
的頁面中表現(xiàn)尤為突出,在有大量卡片樣式的頁面中,每個(gè)卡片通常都包含一定的信息。通過留白分割,可以清晰地劃分每個(gè)卡片的信息區(qū)域,使用戶更容易區(qū)分和閱讀每個(gè)卡片的內(nèi)容,增加呼吸感,避免元素過于擁擠,從而提高整體的可讀性。例如下圖中主流的音樂類App

 
 
相反,如果在沒有規(guī)律且頁面內(nèi)容較多的情況使用留白分割,則會(huì)使頁面雜亂無章。比如下圖咸魚的“廣場(chǎng)”界面feed流中,圖片從1~9張都有的情況下,使用留白分割,頁面就會(huì)變得雜亂,影響視覺效果。而脈脈則采用了卡片式分割樣式,頁面模塊則相對(duì)清晰很多。

 
 
 
 



作者:King_LBJ
鏈接:https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

產(chǎn)品設(shè)計(jì)中的心智模式:深度理解用戶需求與行為|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

前端達(dá)人

產(chǎn)品設(shè)計(jì)中的心智模式:深度理解用戶需求與行為|北京藍(lán)藍(lán)UI設(shè)計(jì)公司
 
 
一、引言
在產(chǎn)品設(shè)計(jì)的世界里,心智模式是一個(gè)至關(guān)重要的概念。它反映了用戶的內(nèi)在需求、期望和行為習(xí)慣,是產(chǎn)品設(shè)計(jì)的核心依據(jù)。本文將帶你深入了解產(chǎn)品設(shè)計(jì)中的心智模式,掌握如何通過洞察用戶心智模式,創(chuàng)造出真正滿足用戶需求的產(chǎn)品。
二、什么是心智模式?
簡(jiǎn)單來說,心智模式是指人們對(duì)于世界的認(rèn)知和理解的內(nèi)在模式。它是人們對(duì)事物的看法、經(jīng)驗(yàn)和行為習(xí)慣的集合,影響人們對(duì)世界的感知和反應(yīng)。在產(chǎn)品設(shè)計(jì)中,了解和利用用戶的心智模式,可以幫助我們更好地把握用戶需求,創(chuàng)造出更符合用戶習(xí)慣和期望的產(chǎn)品。
三、如何洞察用戶心智模式?
  1.  
    觀察研究:深入觀察用戶在實(shí)際生活中的行為、習(xí)慣和需求,理解他們的真實(shí)需求和痛點(diǎn)。這需要設(shè)計(jì)師具備敏銳的觀察力和同理心,能夠設(shè)身處地地站在用戶的角度思考問題。
  2.  
    用戶調(diào)研:通過問卷、訪談等方式,直接獲取用戶的反饋和建議。這有助于了解用戶的期望、偏好和顧慮,進(jìn)一步揭示他們的心智模式。
  3.  
    競(jìng)品分析:研究市場(chǎng)上類似產(chǎn)品的設(shè)計(jì),理解其滿足用戶需求的優(yōu)點(diǎn)和不足。通過競(jìng)品分析,可以洞察用戶在不同產(chǎn)品間的選擇和行為模式,從而深入理解他們的心智模式。
四、如何運(yùn)用心智模式進(jìn)行產(chǎn)品設(shè)計(jì)?
  1.  
    明確目標(biāo)用戶:了解目標(biāo)用戶的心智模式,根據(jù)他們的需求和行為習(xí)慣進(jìn)行產(chǎn)品設(shè)計(jì)。這有助于確保產(chǎn)品功能、交互和視覺設(shè)計(jì)等方面符合用戶的內(nèi)在期望。
  2.  
    優(yōu)化用戶體驗(yàn):基于用戶的心智模式,優(yōu)化產(chǎn)品的使用流程。例如,通過合理的信息架構(gòu)、易于理解的交互設(shè)計(jì)和符合用戶直覺的視覺語言,提升產(chǎn)品的易用性和用戶體驗(yàn)。
  3.  
    創(chuàng)新設(shè)計(jì):通過深入了解用戶的心智模式,發(fā)現(xiàn)潛在的需求和痛點(diǎn),為產(chǎn)品設(shè)計(jì)帶來創(chuàng)新點(diǎn)。這有助于創(chuàng)造出真正解決用戶問題的產(chǎn)品,提升市場(chǎng)競(jìng)爭(zhēng)力。
  4.  
    迭代優(yōu)化:在產(chǎn)品發(fā)布后,持續(xù)收集用戶反饋,了解用戶在使用過程中的感受和體驗(yàn)。根據(jù)用戶的反饋和行為數(shù)據(jù),不斷優(yōu)化產(chǎn)品設(shè)計(jì)和用戶體驗(yàn),以滿足用戶不斷變化的心智模式。
五、結(jié)語
在產(chǎn)品設(shè)計(jì)過程中,了解和運(yùn)用心智模式至關(guān)重要。通過深入洞察用戶的心智模式,我們可以創(chuàng)造出更符合用戶需求的產(chǎn)品,提升用戶體驗(yàn)和市場(chǎng)競(jìng)爭(zhēng)力。因此,設(shè)計(jì)師應(yīng)不斷提升對(duì)用戶心智模式的認(rèn)知和理解,以更好地滿足用戶需求,推動(dòng)產(chǎn)品的持續(xù)創(chuàng)新和發(fā)展。
藍(lán)藍(lán)未來將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。同時(shí)添加藍(lán)小助我們將會(huì)為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
 
藍(lán)藍(lán)設(shè)計(jì)( m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
產(chǎn)品設(shè)計(jì)中的心智模式:深度理解用戶需求與行為|北京藍(lán)藍(lán)UI設(shè)計(jì)公司



AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁

前端達(dá)人

今天我們繼續(xù)用WHEE,帶你玩轉(zhuǎn)AI實(shí)操,設(shè)計(jì)春天出行啟動(dòng)頁運(yùn)營海報(bào)!
這次的主題是春天出行!
(文末已附上同款配方鏈接)
 
Part 01
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
第一,先找一下靈感參考圖
第二,從三個(gè)方向來分析
  1.  
    版式
  2.  
    元素
  3.  
    色調(diào)
 
收集靈感圖時(shí),有4點(diǎn)要注意
  •  
    風(fēng)格:整體風(fēng)格是否符合我們的主題和目標(biāo)用戶群?
  •  
    版式:版式是否清晰、易讀?
  •  
    元素:運(yùn)用的元素是否與主題相關(guān)?
  •  
    色彩:色彩搭配是否和諧、美觀?
 
我們先來看一下“春天”
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
-版式
從版式上面來看一下他們共同的特征, 基本上都是一個(gè)上下結(jié)構(gòu)的版式特征
這種結(jié)構(gòu)簡(jiǎn)單明了,合適各種類型的內(nèi)容
上方主標(biāo)題,下方logo落款,這種排版方式我感覺是最穩(wěn)的一種結(jié)構(gòu)
即使是新人也能很容易出排版效果
標(biāo)題的排版方式呢,有橫向排版和豎向排版
它除了使用常規(guī)的黑體字
還有手寫體,我感覺手寫體更加符合主題
-元素
從元素結(jié)構(gòu)來看
天空,河流,山川,陽光、花草等等
這些元素能夠讓人聯(lián)想到春天的清新、活力和愉悅,增加了海報(bào)的吸引力和代表性
-色調(diào)
色調(diào)呢基本也是以藍(lán)色,白色,綠色為主旋律
也就是陽光、白云、綠色植物
 
接著來看看“出行”
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
-元素
元素呢也是在上面“春天”的基礎(chǔ)上面
多出車,人,露營等周邊關(guān)于戶外的元素
這些元素能夠更加生動(dòng)地展現(xiàn)春季戶外活動(dòng)的場(chǎng)景和氛圍
-色調(diào)
色調(diào)也基本藍(lán)、白、綠
這個(gè)主題我覺得還是要有生機(jī)感、有活力一點(diǎn)的色調(diào)才對(duì)
 
總結(jié)設(shè)計(jì)方向和關(guān)健詞提取
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
版式
整體的版式規(guī)劃采用上下的結(jié)構(gòu)
主標(biāo)題放在上方,橫排版,用手寫黑體
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
關(guān)鍵詞
核心詞:草地,拖車、車輛、山川
效果詞:可愛的卡通設(shè)計(jì)、夢(mèng)幻的視覺效果、鮮艷的色彩
 
Part 02
接下我們看一下WHEE的參數(shù)
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
提示詞、模型這里維持默認(rèn)就好
當(dāng)然也還可以使用它的智能聯(lián)想功能
看看有什么新靈感,亦或者是反向詞等等
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
風(fēng)格模型
在模型商店里面,這里我用了citypop的風(fēng)格模型
當(dāng)然這里面還有很多的模型,比如新中式風(fēng)格,工筆畫盲盒等等
所以在關(guān)鍵詞里就不需要在寫風(fēng)格的關(guān)鍵詞了
直接選擇相對(duì)應(yīng)的風(fēng)格模型會(huì)更加高效率
出來的畫面結(jié)果也更加接近目標(biāo)視覺
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
參數(shù)這里保持默認(rèn)就好
我們第一次跑圖主要還是測(cè)試關(guān)鍵詞
后續(xù)看情況在進(jìn)行調(diào)整
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
這是我一共刷了兩次圖
從呈現(xiàn)的結(jié)果上面來看
第一排比較符合想要的感覺
畫面上方也好做文字的排版
添加關(guān)鍵詞“露營、帳篷”
添加關(guān)鍵詞“露營、帳篷”
 
 
氛圍的感覺還是少了一點(diǎn),因?yàn)樯倭寺稜I和帳篷的元素
我們可以在右側(cè)這里,選“重新編輯”按鈕
這樣我們就可以延續(xù)之前的設(shè)置繼續(xù)編輯
然后我們把露營和帳篷關(guān)鍵詞加上,其它不變
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
從結(jié)果來看第一張有帳篷的氛圍更好
第三張和第四張有點(diǎn)脫離了
但是第三張?zhí)幚硪幌履脕碜鰪棿案杏X效果也會(huì)非常好
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
然后我們?cè)谟覀?cè)這個(gè)放大一下像素
這樣就可以得到一個(gè)更高清的分辨率
 
Part 03
接著我們來做一下主標(biāo)題的字體設(shè)計(jì)
就用手寫黑體
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
我們先找一些毛筆字字形作為筆畫墊字
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
 
用鋼筆工具描出字形(這里先以春字為例)
我們挑選出重要的筆畫特征就好
其實(shí)是不需要跟原來的一樣
這樣會(huì)更有靈性
比如這里“春”字,上部首里的三橫
我這里只要第三橫連筆的特征
后面的幾個(gè)字也是以此類推
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
描繪完之后呢,我們加一粗一點(diǎn)描邊的大小
同時(shí)將端點(diǎn)和邊角都設(shè)為平頭
基本的字體結(jié)構(gòu)完成了
下一步就是細(xì)節(jié)的調(diào)整了
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
首先調(diào)整一下字間距
排版的話,我給它是上下錯(cuò)落
這樣會(huì)給人比較輕松的感覺
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
整理細(xì)節(jié)的話,就需要注意
筆畫之間的關(guān)系和空間感
例如“春”字上部首的第三橫與“日”中間那一橫
“出”和“行”的連接,以及它們相互之間的關(guān)系
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
完成主標(biāo)題的設(shè)計(jì)之后,我們先來對(duì)畫面進(jìn)行二次構(gòu)圖
天空部份我們不需要太多
第一是文案放在上方識(shí)別度較低
第二放大主體元素露營車和帳篷后,它也能夠更好的突出主題氛圍
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
按照原先的計(jì)劃做上下結(jié)構(gòu)的版式設(shè)計(jì)
上面我們放主標(biāo)題文案信息
但是單看著主標(biāo)題設(shè)計(jì)還不夠豐富
所以需要在添加一些細(xì)節(jié)
在“日”字上方和“出行”下方
我們?cè)谟梦陌缸龀汕€跟隨字形弧度
同時(shí)他們也是相互呼應(yīng)的
描述信息直接放在主標(biāo)題下方
居中對(duì)齊的樣式就好
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
 
下面就放輔助的信息
同時(shí)也是居中對(duì)齊的樣式
這樣上下就有元素關(guān)系的呼應(yīng)
統(tǒng)一的居中對(duì)齊的樣式
也會(huì)讓文字閱讀效率大大提高
AI實(shí)操:用WHEE輔助設(shè)計(jì)app啟動(dòng)頁
 
 
最后在放入一些固定落款的元素就完成啦~
 
Part 04
總結(jié)
1. 設(shè)計(jì)方向和關(guān)鍵詞提取
通過收集和分析同類題材,得出設(shè)計(jì)方向和關(guān)鍵詞
前期的方向確定是很重要的,有效的方向可以減少后期改稿
2. 視覺風(fēng)格
選擇對(duì)應(yīng)的風(fēng)格模型,得到想要的視覺風(fēng)格
WHEE模型庫中有很多風(fēng)格模型,這大大的提升了工作的效率
3. 主標(biāo)題字體設(shè)計(jì)
以毛筆字字形作為基礎(chǔ)字形,設(shè)計(jì)出主標(biāo)題
毛筆字結(jié)合黑體的感覺非常合適這輕松、放松類型畫面
4. 畫面排版
根據(jù)前期版式分析確定的方向,對(duì)畫面進(jìn)行文字排版
文案與文案之間,標(biāo)題字體設(shè)計(jì)
都需要注意它們之間的關(guān)系,以及統(tǒng)一性
 
今天的分享到這兒就結(jié)束啦
我們下篇見咯
 
以下同款配方鏈接
01
 
02
 

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:智明了智明
鏈接:https://www.zcool.com.cn/article/ZMTYxMzc2NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

2024年動(dòng)效設(shè)計(jì)前瞻

前端達(dá)人

在數(shù)字化時(shí)代,動(dòng)效設(shè)計(jì)已經(jīng)成為吸引用戶眼球、提升用戶體驗(yàn)不可或缺的一部分,動(dòng)態(tài)元素的呈現(xiàn)效果,相比純圖片也新增了很多樂趣與驚喜,融入進(jìn)我們生活中的方方面面。
2023年,我們看到了許多令人眼前一亮的動(dòng)效設(shè)計(jì)形式,例如尼桑Ariya車機(jī)交互中,當(dāng)駕駛員啟動(dòng)車輛時(shí),信息娛樂系統(tǒng)的啟動(dòng)界面會(huì)展示一個(gè)動(dòng)態(tài)的汽車品牌標(biāo)志,伴隨著流暢的過渡效果和音效,營造出一種高科技感和品牌認(rèn)知度。
 
Current Time 0:00
/
Duration Time 0:08
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
從微交互到增強(qiáng)現(xiàn)實(shí),從三維動(dòng)畫到自然運(yùn)動(dòng),隨著技術(shù)的不斷發(fā)展與用戶的不斷變化,動(dòng)效設(shè)計(jì)也在不斷演進(jìn)和創(chuàng)新。那未來的動(dòng)效設(shè)計(jì)會(huì)是怎樣的形式呢?在本文中我們一起來探討一下吧!
溫馨提示:以下圖片均來源網(wǎng)絡(luò),GIF格式文件需要加載,感謝耐心閱讀~
一、2023年動(dòng)效設(shè)計(jì)表現(xiàn)形式
動(dòng)效設(shè)計(jì)在用戶界面、廣告營銷、游戲開發(fā)等領(lǐng)域都發(fā)揮著重要作用,常見的表現(xiàn)形式有微交互動(dòng)效、3D動(dòng)效、數(shù)據(jù)可視化動(dòng)效以及場(chǎng)景化動(dòng)效。
1、微交互動(dòng)效
在2023年,微交互動(dòng)效成為了設(shè)計(jì)師們關(guān)注的焦點(diǎn)。通過細(xì)膩的動(dòng)畫效果,提升用戶體驗(yàn),增強(qiáng)用戶對(duì)界面的感知,使用戶操作更加直觀和愉悅。
2024年動(dòng)效設(shè)計(jì)前瞻
 
 
在移動(dòng)應(yīng)用界面中,按鈕、導(dǎo)航欄、滑動(dòng)卡片等交互元素中常見微交互動(dòng)效,例如美團(tuán)小象超市,當(dāng)用戶點(diǎn)擊底部標(biāo)簽欄按鈕時(shí),文字的顏色發(fā)生變化,圖標(biāo)右下角增加主題綠色填充,頁面同步切換,給予用戶直觀的反饋,告知其操作已被識(shí)別;
美團(tuán)-小象超市-手機(jī)錄屏
美團(tuán)-小象超市-手機(jī)錄屏
 
車機(jī)界面中,導(dǎo)航欄通常用于切換不同的功能頁面或查看系統(tǒng)狀態(tài)。例如問界駕駛模式調(diào)節(jié),用戶通過手勢(shì)操作導(dǎo)航欄顯示,按鈕高亮效果,駕駛模式以微交互動(dòng)效呈現(xiàn)預(yù)覽,以使界面切換更加流暢、直觀,同時(shí)幫助駕駛員更輕松地操作界面,提升駕駛安全性和用戶體驗(yàn)。
問界駕駛模式,來源網(wǎng)絡(luò)
問界駕駛模式,來源網(wǎng)絡(luò)
 
2、3D動(dòng)效
三維技術(shù)制作的動(dòng)畫效果,通常具有立體感和逼真感,能夠在屏幕上呈現(xiàn)出立體空間中的物體運(yùn)動(dòng)和變化。這種動(dòng)效在視覺上更加生動(dòng)、震撼,常用于影視特效、游戲開發(fā)、虛擬現(xiàn)實(shí)等領(lǐng)域。
視頻來源網(wǎng)絡(luò)
視頻來源網(wǎng)絡(luò)
 
在電影、電視劇等影視作品中,3D動(dòng)效常被用于創(chuàng)造出各種特效場(chǎng)景、人物動(dòng)作或者虛擬世界,增強(qiáng)視覺沖擊力和真實(shí)感。例如好萊塢大片《復(fù)仇者聯(lián)盟》中,各種特效場(chǎng)景和超級(jí)英雄的動(dòng)作都采用了大量的3D動(dòng)效制作,如鋼鐵俠的攻擊動(dòng)作、蜘蛛俠的飛行、蜘蛛網(wǎng)特效等,讓觀眾身臨其境地感受到了超級(jí)英雄的力量與魅力。
2024年動(dòng)效設(shè)計(jì)前瞻
 
 
 
游戲開發(fā)中,3D動(dòng)效被廣泛應(yīng)用于游戲角色的動(dòng)作表現(xiàn)、場(chǎng)景建模、特效設(shè)計(jì)等方面,提升游戲的沉浸感和視覺體驗(yàn)。
王者榮耀破曉版
王者榮耀破曉版
 
車機(jī)界面中,可以通過3D動(dòng)效制作出全景效果,使駕駛員在車內(nèi)就能感受到真實(shí)的車外景象,增強(qiáng)駕駛體驗(yàn)和安全感。例如導(dǎo)航系統(tǒng)中,使用3D地圖和路況動(dòng)效,讓駕駛員更清晰地了解路況和行駛路徑。
Apollo anp3.0-障礙物繞行
Apollo anp3.0-障礙物繞行
 
3、數(shù)據(jù)可視化動(dòng)效
數(shù)據(jù)可視化動(dòng)效通過直觀的動(dòng)畫展示數(shù)據(jù)變化,增強(qiáng)數(shù)據(jù)的可讀性和理解性,使數(shù)據(jù)更生動(dòng)、直觀地呈現(xiàn)在用戶面前,幫助用戶更好地理解數(shù)據(jù)的含義和趨勢(shì)。這種動(dòng)效在金融、統(tǒng)計(jì)等領(lǐng)域尤為常見。
2024年動(dòng)效設(shè)計(jì)前瞻
 
 
在商業(yè)領(lǐng)域中,數(shù)據(jù)可視化動(dòng)效常被用于制作各種分析報(bào)告、銷售演示等,通過動(dòng)態(tài)圖表、實(shí)時(shí)數(shù)據(jù)更新等動(dòng)態(tài)效果,可以讓數(shù)據(jù)報(bào)告更具吸引力和說服力。例如企業(yè)的數(shù)據(jù)監(jiān)控面板中,可以使用數(shù)據(jù)可視化動(dòng)效來實(shí)時(shí)展示銷售額、用戶訪問量、庫存情況等數(shù)據(jù)指標(biāo)的變化情況。
來自DataV-設(shè)計(jì)中心
來自DataV-設(shè)計(jì)中心
 
并且通過動(dòng)態(tài)變化的圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果,可以讓管理者更及時(shí)地了解業(yè)務(wù)狀況,做出相應(yīng)的決策。
來自DataV-設(shè)計(jì)中心
來自DataV-設(shè)計(jì)中心
 
在科學(xué)研究和教育領(lǐng)域,數(shù)據(jù)可視化動(dòng)效可以幫助科學(xué)家和教育工作者更好地展示研究成果和教學(xué)內(nèi)容。例如,通過動(dòng)畫效果展示監(jiān)測(cè)數(shù)據(jù)的動(dòng)態(tài)變化、預(yù)警統(tǒng)計(jì)等,可以使抽象的概念更具體化、更易于理解。
來自DataV-設(shè)計(jì)中心
來自DataV-設(shè)計(jì)中心
 
車機(jī)界面中,可以通過數(shù)據(jù)可視化動(dòng)效來展示車輛的駕駛數(shù)據(jù),如車速、油耗、行駛里程等。例如,通過動(dòng)態(tài)圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果,可以讓駕駛員更清晰地了解車輛的行駛情況,幫助其做出更安全、更經(jīng)濟(jì)的駕駛決策。
@ Musemind UI/UX Agency,dribbble
@ Musemind UI/UX Agency,dribbble
 
4、場(chǎng)景化動(dòng)效
場(chǎng)景化動(dòng)效通過模擬真實(shí)世界的場(chǎng)景,讓用戶在虛擬空間中獲得更自然的交互體驗(yàn)。產(chǎn)品展示或推廣中,場(chǎng)景化動(dòng)效可以幫助展示產(chǎn)品的特點(diǎn)、功能和優(yōu)勢(shì)。例如,在歐萊雅巴黎振興霜互動(dòng) AR邀請(qǐng)卡,可以使用場(chǎng)景化動(dòng)效展示產(chǎn)品的成分含量,以吸引消費(fèi)者的注意力和興趣。
歐萊雅巴黎振興霜互動(dòng) AR 邀請(qǐng)卡,@KIVISENSE
歐萊雅巴黎振興霜互動(dòng) AR 邀請(qǐng)卡,@KIVISENSE
 
車機(jī)界面中,我們也能看到場(chǎng)景化動(dòng)效展示駕駛模擬場(chǎng)景,幫助駕駛員更直觀地了解車輛的行駛狀態(tài)和安全提示。例如導(dǎo)航系統(tǒng)中,展示車輛在雨天、雪天或夜間等不同路況下的行駛情況,以提醒駕駛員注意安全駕駛。
HUDWAY Drive,來源網(wǎng)絡(luò)
HUDWAY Drive,來源網(wǎng)絡(luò)
 
二、2024年動(dòng)效設(shè)計(jì)發(fā)展方向
2023年動(dòng)效設(shè)計(jì)不僅追求美觀,更注重與用戶的深度溝通。每一個(gè)動(dòng)效都在講述品牌故事,引導(dǎo)操作,提升易用性和趣味性。站在這個(gè)時(shí)間節(jié)點(diǎn)上,我們不禁要思考:接下來的一年,動(dòng)效設(shè)計(jì)又將如何進(jìn)化?它將如何繼續(xù)深化與用戶的互動(dòng),提升整體的用戶體驗(yàn)?zāi)兀?/div>
1、智能化動(dòng)效
隨著人工智能技術(shù)的不斷發(fā)展,利用人工智能(AI)技術(shù)或者智能算法來設(shè)計(jì)和生成動(dòng)畫效果,以實(shí)現(xiàn)動(dòng)效的智能化、個(gè)性化或自適應(yīng)。這類動(dòng)效可以根據(jù)用戶的行為、喜好或者環(huán)境變化實(shí)時(shí)調(diào)整,以提供更符合用戶需求和情境的動(dòng)畫體驗(yàn)。
音樂專屬推送
音樂專屬推送
 
在移動(dòng)應(yīng)用、網(wǎng)頁設(shè)計(jì)等界面中,可以利用智能化動(dòng)效來實(shí)現(xiàn)智能交互界面,根據(jù)用戶的操作習(xí)慣和需求動(dòng)態(tài)調(diào)整動(dòng)畫效果。例如,蘋果音樂專屬推送,根據(jù)我的瀏覽、檢索等行為和歌曲收藏、喜好等,智能調(diào)整動(dòng)態(tài)加載的內(nèi)容,建立我的專注音樂空間,提升我整體的使用體驗(yàn)和滿意度。
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
 
在車機(jī)界面中,可以利用智能化動(dòng)效設(shè)計(jì)車載智能助理系統(tǒng),根據(jù)車輛狀態(tài)、道路情況和駕駛員行為實(shí)時(shí)調(diào)整動(dòng)畫效果,提供更智能、更安全的駕駛輔助功能。例如,根據(jù)車輛的自動(dòng)駕駛狀態(tài)實(shí)時(shí)調(diào)整駕駛模擬場(chǎng)景的動(dòng)畫效果,幫助駕駛員更好地理解車輛的行駛情況和駕駛狀態(tài)。
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
 
根據(jù)車內(nèi)溫度和濕度調(diào)整空調(diào)和座椅加熱系統(tǒng),實(shí)現(xiàn)智能化的溫度控制和舒適度提升。
2、增強(qiáng)現(xiàn)實(shí)(AR)和虛擬現(xiàn)實(shí)(VR)的融合
2016年至今,AR和VR技術(shù)的發(fā)展持續(xù)加速,增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)融合動(dòng)效成為熱門話題。越來越多的行業(yè)開始關(guān)注和應(yīng)用AR/VR技術(shù),如教育、醫(yī)療、零售、汽車等領(lǐng)域,這種動(dòng)效在現(xiàn)實(shí)環(huán)境中疊加虛擬物體和效果,使用戶能夠與虛擬內(nèi)容進(jìn)行互動(dòng),創(chuàng)造出更加豐富和沉浸式的體驗(yàn)。
2024年動(dòng)效設(shè)計(jì)前瞻
 
 
虛擬試衣間
@Amol Arora
@Amol Arora
 
用戶可以利用增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)融合技術(shù),在現(xiàn)實(shí)環(huán)境中體驗(yàn)虛擬試衣間。通過智能設(shè)備查看虛擬衣服和配飾,以便在不實(shí)際試穿的情況下預(yù)覽其外觀和適合度。
虛擬家居設(shè)計(jì)
@ Bell'Arte Living - Estofados
@ Bell'Arte Living - Estofados
 
利用AR/VR融合技術(shù),用戶可以在現(xiàn)實(shí)空間中體驗(yàn)虛擬家居設(shè)計(jì),例如在現(xiàn)實(shí)環(huán)境中預(yù)覽家具、裝飾品等虛擬物體的擺放效果,并根據(jù)實(shí)際需要進(jìn)行調(diào)整。
車機(jī)領(lǐng)域
@ Shutterstock
@ Shutterstock
 
在車機(jī)場(chǎng)景中,汽車制造商可為客戶提供汽車內(nèi)容定制體驗(yàn),客戶通過AR應(yīng)用或VR頭盔在虛擬環(huán)境中預(yù)覽汽車內(nèi)部的不同配置和顏色方案,并根據(jù)個(gè)人喜好進(jìn)行定制選擇。
Acura Parts & Service
Acura Parts & Service
 
關(guān)于車輛維修和保養(yǎng)方面,通過AR應(yīng)用,車主可以在現(xiàn)實(shí)車輛上查看虛擬的維修部件和保養(yǎng)步驟,以便更容易地進(jìn)行維護(hù)保養(yǎng)。
The future of AR in Cars,Behance
The future of AR in Cars,Behance
 
同時(shí)也可應(yīng)用于駕駛輔助和車載娛樂,例如智能導(dǎo)航、虛擬HUD、駕駛模擬和增強(qiáng)現(xiàn)實(shí)車載娛樂,進(jìn)一步提升車機(jī)系統(tǒng)的智能化水平和用戶體驗(yàn),為駕駛員和乘客帶來更安全、便捷、有趣的車載生活體驗(yàn)。
3、交互式動(dòng)效
2024年動(dòng)效設(shè)計(jì)前瞻
 
 
交互式動(dòng)效在2024年仍會(huì)繼續(xù)保持流行,并有望進(jìn)一步發(fā)展,使用戶能夠更直觀地參與到動(dòng)效的生成和表現(xiàn)中。例如在車機(jī)系統(tǒng)中,通過交互式動(dòng)效顯示車輛的駕駛狀態(tài)、周圍環(huán)境和導(dǎo)航路線等信息,駕駛員可以通過觸摸屏或語音指令與系統(tǒng)進(jìn)行交互,調(diào)整設(shè)置并獲取所需信息,提升駕駛安全和便捷性。
UI Motion Reel-百度Apollo,@ SeanCham
UI Motion Reel-百度Apollo,@ SeanCham
 
使用手勢(shì)控制技術(shù),駕駛員和乘客可以通過手勢(shì)在車內(nèi)控制屏幕顯示和功能操作,例如多屏影音同步、開關(guān)車窗等,提高駕駛員的操作便捷性和安全性。
Li L9, Flagship Intelligent Cockpit.
Li L9, Flagship Intelligent Cockpit.
 
4、環(huán)保與可持續(xù)性動(dòng)效
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
 
 隨著環(huán)保意識(shí)的日益增強(qiáng),對(duì)于具有環(huán)保和可持續(xù)性理念的動(dòng)效設(shè)計(jì)也將受到更多關(guān)注和青睞。例如通過動(dòng)效設(shè)計(jì)呈現(xiàn)城市綠色化規(guī)劃的效果,城市綠道、綠色建筑等,向用戶展示城市環(huán)境的改善和生態(tài)環(huán)境的保護(hù)。
@ Ahmad Sulaiman
@ Ahmad Sulaiman
 
在車機(jī)界面中,設(shè)計(jì)能源監(jiān)測(cè)動(dòng)效,顯示車輛的能源利用情況,包括電池電量、油耗情況等,提醒駕駛員合理使用能源,節(jié)約能源資源。
5、跨界融合動(dòng)效
未來的動(dòng)效設(shè)計(jì)也將更加注重跨界融合,設(shè)計(jì)師可以借鑒其他藝術(shù)領(lǐng)域的元素和創(chuàng)意,將不同領(lǐng)域的美學(xué)觀念融入到動(dòng)效設(shè)計(jì)中,創(chuàng)造出新穎而富有創(chuàng)意的動(dòng)效形式。
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
 
例如在品牌推廣中,混合媒體新形式,模糊現(xiàn)實(shí)世界和虛擬世界的界限,Nike結(jié)合了實(shí)拍場(chǎng)景視頻、草圖、模型等形式的融合,創(chuàng)造跳出屏幕的動(dòng)態(tài)內(nèi)容。
來源網(wǎng)絡(luò)
來源網(wǎng)絡(luò)
 
車機(jī)系統(tǒng)中,應(yīng)用全息投影技術(shù),將導(dǎo)航地圖以立體全息的形式顯示在車內(nèi),提供更直觀、更生動(dòng)的導(dǎo)航體驗(yàn);
Waymo cars,Google Design
Waymo cars,Google Design
 
Waymo汽車收集了大量關(guān)于周圍物體和交通模式的數(shù)據(jù),反饋乘客看到的是整潔的視覺圖像和清晰標(biāo)記的行程更新,增強(qiáng)駕駛安全與便捷性。
 
總之,2024年的動(dòng)效設(shè)計(jì)將繼續(xù)成為各行業(yè)中不可或缺的重要組成部分,呈現(xiàn)出更加多元化、智能化和個(gè)性化的特點(diǎn)。作為設(shè)計(jì)師,我們需要不斷學(xué)習(xí)和探索新的設(shè)計(jì)理念和技術(shù)手段,以創(chuàng)作出更加出色的動(dòng)效作品,為用戶帶來更豐富、生動(dòng)和愉悅的體驗(yàn)。同時(shí),我們也需要關(guān)注環(huán)保、可持續(xù)性等社會(huì)問題,積極推動(dòng)動(dòng)效設(shè)計(jì)的綠色發(fā)展。
以上視頻、圖片均來源網(wǎng)絡(luò),若侵可聯(lián)系修改刪除,歡迎交流探討,謝謝~
 

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:Shirley_雪r
鏈接:https://www.zcool.com.cn/article/ZMTYxMzQzMg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

智慧電力可視化大屏管理系統(tǒng)

前端達(dá)人

 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
Current Time0:00
/
Duration Time0:05
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)
 
 
 
 
 
智慧電力可視化大屏管理系統(tǒng)

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

作者:121Jay


鏈接:https://www.zcool.com.cn/work/ZNjc0NzczODg=.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

《UnitLife》APP界面/交互設(shè)計(jì)案例

前端達(dá)人

下面開始:
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例
 
 
收藏
《UnitLife》APP界面/交互設(shè)計(jì)案例


 

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

 
作者:dodoheyiqian
鏈接:https://www.zcool.com.cn/work/ZNjgwNjI4OTI=.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

B端產(chǎn)品的C化該怎么去做?

前端達(dá)人

B端C化由來已久,概念化的東西怎么變?yōu)楝F(xiàn)實(shí)?阿魚帶你一步一步來...(ps:純干貨,有圖有真相)
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?
 
 
B端產(chǎn)品的C化該怎么去做?

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:是一整條咸魚
鏈接:https://www.zcool.com.cn/article/ZMTYxMzE0MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

今天來聊一聊視覺語言的體驗(yàn)升級(jí)

前端達(dá)人

視覺表現(xiàn)不關(guān)乎體驗(yàn)?拜托,信息的傳達(dá)都是靠眼睛的好吧,哈哈
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)
 
 
今天來聊一聊視覺語言的體驗(yàn)升級(jí)

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)



作者:是一整條咸魚
鏈接:https://www.zcool.com.cn/article/ZMTYxMzI5Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

如何利用動(dòng)效 打造B端的用戶體驗(yàn)

前端達(dá)人

說到B端后臺(tái)產(chǎn)品,我們會(huì)想到業(yè)務(wù)復(fù)雜、信息龐大、用戶角色多、頁面層級(jí)深、使用門檻高等特征。這些特征讓后臺(tái)產(chǎn)品在設(shè)計(jì)時(shí)更強(qiáng)調(diào)“簡(jiǎn)單直接”,無需多余的設(shè)計(jì)元素,相比之下,沒有C端產(chǎn)品有趣。而作為B端后臺(tái)設(shè)計(jì)師在工作中會(huì)面臨很多復(fù)雜場(chǎng)景的設(shè)計(jì)需求,有時(shí)候需求方未必能理解設(shè)計(jì)理念,會(huì)讓設(shè)計(jì)師陷入“頭禿”的狀態(tài)。 針對(duì)B端后臺(tái)產(chǎn)品某些體驗(yàn)問題,我們可以借助動(dòng)效的力量去解決。
下面將結(jié)合工作經(jīng)驗(yàn),以及線上文章,分享如何利用動(dòng)效來提升B端后臺(tái)產(chǎn)品的體驗(yàn)。
 
主要分為兩大塊:
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
使用動(dòng)效不是為了炫技,而是輔助解決設(shè)計(jì)中發(fā)現(xiàn)的問題。我們要思考的是,眼下的問題結(jié)合動(dòng)效能否達(dá)到1+1>2的解決效果。設(shè)計(jì)方案除了要得到需求方的認(rèn)可,還要有開發(fā)團(tuán)隊(duì)的支持。設(shè)計(jì)師做到從痛點(diǎn)中出發(fā),于可行處落地,才是有效的設(shè)計(jì)。那什么場(chǎng)景下的問題可以考慮結(jié)合動(dòng)效呢?
 
1、信息量折疊收納
B端業(yè)務(wù)的復(fù)雜程度決定了產(chǎn)品的信息體量,這也考驗(yàn)著設(shè)計(jì)師設(shè)計(jì)頁面時(shí),能為用戶在有限的空間里獲取多少信息。舉個(gè)例子,用戶的辦公設(shè)備是小型筆記本,它的屏幕小,用戶一屏看到的內(nèi)容有限。這時(shí)需求方建議減少留白,壓縮空間,信息往上堆積,頁面最后會(huì)擁擠不堪。龐大的信息體量力求對(duì)用戶的吸收效率,也對(duì)設(shè)計(jì)造成困擾,針對(duì)這種情況我們可運(yùn)用“折疊收納”法
 
應(yīng)用案例1: 按鈕折疊
如果一個(gè)頁面的按鈕太多,可“折疊”按鈕。以下面的科目樹為例,每個(gè)科目有若干個(gè)功能按鈕,如按鈕全部展示,不利于用戶聚焦重要信息。用戶必定是先看科目標(biāo)題,如有需要才對(duì)科目進(jìn)行操作,基于這個(gè)思路可把按鈕折疊起來,待用戶鼠標(biāo)懸浮至科目才出現(xiàn)按鈕。在恰當(dāng)?shù)膱?chǎng)景下將按鈕折疊,有助于精簡(jiǎn)頁面結(jié)構(gòu)。一個(gè)頁面按區(qū)域劃分功能區(qū)和信息區(qū),信息區(qū)被文案鋪滿了,可簡(jiǎn)化功能區(qū)的表現(xiàn)形式。比如按鈕和解釋文案,可對(duì)解釋文案進(jìn)行收納,用戶鼠標(biāo)懸浮上去顯示。對(duì)于用戶來說,一個(gè)按鈕的含義只要使用一次便清楚。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
應(yīng)用案例2: 內(nèi)容折疊
B端后臺(tái)因信息量大有很多長頁面,這時(shí)可在用戶進(jìn)行頁面滾動(dòng)瀏覽時(shí),根據(jù)用戶滾動(dòng)的內(nèi)容進(jìn)行折疊。如下的篩選項(xiàng)占據(jù)了頁面頭部一定的空間,用戶滑到結(jié)果列表內(nèi)容時(shí),已選項(xiàng)固定在頂部精簡(jiǎn)展示。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
小結(jié):通過“折疊收納法”優(yōu)化頁面布局,根據(jù)用戶的操作行為給予內(nèi)容變化,幫助用戶降低信息量過大帶來的閱讀疲勞,也讓設(shè)計(jì)師在有限的設(shè)計(jì)空間里“堆積”信息。
 
2、對(duì)路徑進(jìn)行引導(dǎo),及時(shí)給與用戶反饋,提高效率
B端產(chǎn)品會(huì)有極其復(fù)雜的功能,這些功能通常用步驟條來拆分,引導(dǎo)用戶分步完成。面對(duì)復(fù)雜功能。需求方希望
在頁面的各個(gè)位置添加用法提示文案。但用戶并不想閱讀一串串文字,這時(shí)可結(jié)合用戶的操作行為,及時(shí)響應(yīng)引導(dǎo)下一步操作。
 
應(yīng)用案例1:
操作響應(yīng)如下的這個(gè)頁面需要用戶把左邊的字段拖拽到右邊生成卡片。當(dāng)用戶拖拽時(shí),給予動(dòng)效反饋?zhàn)層脩舾兄侄瓮献Х较颉_@種可視可感知的方式幫助用戶快速掌握用法,提升效率。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
應(yīng)用案例2:引導(dǎo)響應(yīng)
在工作中我們也許會(huì)接到類似的修改需求:“按鈕不夠突出,不夠大,要又大又突出”。你看完后心里想:“還不夠突出嗎,要這么大干什么呢?”這時(shí)沉住氣,分析修改的根本目的,它想要突出的目的是什么?
1、這個(gè)按鈕在整個(gè)頁面中承載極其重要的功能,視覺上用戶需立刻注意到2、點(diǎn)擊按鈕后的內(nèi)容十分重要,希望增強(qiáng)點(diǎn)擊欲。
當(dāng)用戶鼠標(biāo)懸浮至按鈕時(shí),及時(shí)響應(yīng)引導(dǎo),一個(gè)箭頭既起到醒目作用,也引導(dǎo)著用戶去往下一步。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
小結(jié): B端后臺(tái)頁面信息繁雜,功能多。通過動(dòng)效幫助用戶在使用過程中增強(qiáng)反饋和引導(dǎo),正確的引導(dǎo)能縮短用戶的操作路徑,提升效率。
 
3、增加情感化體驗(yàn)
B端后臺(tái)產(chǎn)品大部分是給專業(yè)人員使用的,信息表單居多,頁面內(nèi)容相似,比較單調(diào)。加入適當(dāng)友好的情感化式效可以提升產(chǎn)品的趣味性,減少用戶使用的倦怠感。
應(yīng)用案例1: Loading動(dòng)效
常規(guī)的Loading動(dòng)效通常是一個(gè)圓在轉(zhuǎn)圈,當(dāng)用戶面對(duì)長時(shí)間加載時(shí),一直盯著一個(gè)圈會(huì)產(chǎn)生焦慮感。情感化Loading動(dòng)效可總結(jié)為兩類:
1、產(chǎn)品本身有一個(gè)IP形象,可圍繞IP進(jìn)行創(chuàng)作。例如“加薪貓”,加載的時(shí)候貓咪追著錢幣奔跑,增加了跑步流汗的細(xì)節(jié),提升它已經(jīng)在努力加載的形象感;
2、根據(jù)Loading的文案進(jìn)行拓展設(shè)計(jì),提取文案元素,圖形場(chǎng)景化,分散用戶等待的焦慮。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
應(yīng)用案例2:化抽象為形象
有些B端產(chǎn)品的業(yè)務(wù)背景專業(yè)而又抽象,可借助動(dòng)效的力量化繁為簡(jiǎn),化抽象為形象。以下面數(shù)據(jù)字典為例。用通過該字典進(jìn)行與業(yè)務(wù)相關(guān)的字段查詢。該頁結(jié)構(gòu)較簡(jiǎn)單:搜索欄和熱詞入口。我結(jié)合模塊名稱,對(duì)特征進(jìn)行具體物化,在頁面加入字典和放大鏡元素。通過物化讓用戶快速感知該模塊的作用。類似的大入口頁面也可以運(yùn)用3D效果,它能讓物化更加立體。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
比較常用的動(dòng)效設(shè)計(jì)工具有: Ae、Principle、ProtoPie。這里分享一下我在工作中常用的并能解決大部分問題的工具。
1、Principle:快速制成交互動(dòng)效演示Demo
Principle是一款只能用于Mac OS系統(tǒng)的交互設(shè)計(jì)工具,它的操作界面跟Sketch類似,學(xué)習(xí)成本較低。它搭配Sketch使用,能對(duì)界面做轉(zhuǎn)場(chǎng)過渡動(dòng)效和一些細(xì)節(jié)的交與動(dòng)效。當(dāng)你想提出某個(gè)交互動(dòng)效提案時(shí),可用Princidle快速制成演示Demo,導(dǎo)出GIF或視頻給到需求方,讓他們快速明白你的想法及可行性后臺(tái)界面演示demo可直接選擇箭頭光標(biāo),呈現(xiàn)效果更貼合真實(shí)場(chǎng)景。
 
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
2、After Effect: 適合各種場(chǎng)景下的動(dòng)效制作
AE是絕大UI設(shè)計(jì)師必備的動(dòng)效制作工具。它支持Mac OS和Windows系統(tǒng),其自身有著強(qiáng)大而豐富的特效庫。現(xiàn)在也能通過AEUX插件,把Sketch里的圖層直接導(dǎo)入到AE使用。AE的功能大而全,日堂工作中多用干制作情感化需要的圖形動(dòng)效,比如Loading、lcon點(diǎn)擊動(dòng)效等等。
如何利用動(dòng)效  打造B端的用戶體驗(yàn)
 
 
小結(jié): 設(shè)計(jì)師需要學(xué)習(xí)和掌握的軟件很多,軟件更新迭代的速度也很快。可選擇能解決工作中絕大設(shè)計(jì)需求的軟件精學(xué),其余可在空閑時(shí)作為知識(shí)技能儲(chǔ)備來學(xué)習(xí)。
 
總結(jié)
做適合的動(dòng)效為B端產(chǎn)品體驗(yàn)賦能
當(dāng)你在設(shè)計(jì)一款從0-1或是重構(gòu)的B端后臺(tái)產(chǎn)品,你可重新定義設(shè)計(jì)風(fēng)格、規(guī)范控件。當(dāng)你是半途介入一款風(fēng)格規(guī)范都已相當(dāng)成熟的B端產(chǎn)品,通常遇到的問題較為繁瑣,可能是對(duì)一個(gè)按鈕、一個(gè)顏色、一句文案去精打細(xì)磨。這時(shí)設(shè)計(jì)師需提升產(chǎn)品全局觀,在設(shè)計(jì)過程中對(duì)遇到的問題層層剖析,洞悉設(shè)計(jì)的發(fā)力點(diǎn),并在恰當(dāng)?shù)膱?chǎng)景下緊貼產(chǎn)品特性和業(yè)務(wù)需求,提出恰到好處的動(dòng)效方案,以小點(diǎn)出發(fā),真正為產(chǎn)品的體驗(yàn)賦能。

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:CNLILY
鏈接:https://www.zcool.com.cn/article/ZMTYxMTI2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

日歷

鏈接

個(gè)人資料

存檔