亚洲国产欧美日韩一区二区,久久精品免费大片国产大片,国产高清吃奶成免费视频网站,日韩免费无码一区二区视频,国产精品V日韩精品

首頁(yè)

102024-4

UI&UE實(shí)用方法論 | 如何用費(fèi)茨定律做設(shè)計(jì)

濤濤

多看多學(xué)“法則”其實(shí)往往是在鞏固一種思維模式和思考 方向，而這些我們裝在腦中的 東西往往比法則本身更有價(jià)值。

評(píng)論(0) 瀏覽(866)

102024-4

餓了么「飯搭子」產(chǎn)品設(shè)計(jì)

濤濤

飯搭子是餓了么APP平臺(tái)上線的一款好友之間分享飲食數(shù)據(jù)的玩法，基于智能ai的行業(yè)趨勢(shì)下結(jié)合新技術(shù)風(fēng)口，結(jié)合平臺(tái)屬性通過(guò)營(yíng)養(yǎng)數(shù)據(jù)分享的切入點(diǎn)，帶動(dòng)小圈子提頻，實(shí)現(xiàn)引流價(jià)值；此外，高頻用戶訪問(wèn)出現(xiàn)瓶頸，希望做用戶提頻，帶動(dòng)用戶增量；餓了么的社交好友體系待完善，通過(guò)新玩法的探索進(jìn)一步沉淀用戶數(shù)據(jù)，反哺到互動(dòng)玩法乃至整個(gè)平臺(tái)的生態(tài)圈。

評(píng)論(0) 瀏覽(872)

102024-4

教你一文讀懂暗色模式

博博

暗色模式（Dark Mode）的興起是一個(gè)逐漸發(fā)展的過(guò)程，它涉及到技術(shù)進(jìn)步、用戶體驗(yàn)優(yōu)化以及設(shè)計(jì)趨勢(shì)的變化。

隨著iOS 13在2019年的發(fā)布，暗色模式開(kāi)始成為用戶關(guān)注的焦點(diǎn)；在用戶體驗(yàn)方面，設(shè)計(jì)者們考慮到了環(huán)境光線與屏幕亮度的匹配問(wèn)題，暗色模式可以有效減少視覺(jué)疲勞；在實(shí)際使用中，用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適，這也促使了暗色模式的普及和發(fā)展。

暗色模式在UI設(shè)計(jì)中的重要性體現(xiàn)在改善視覺(jué)舒適度、節(jié)省電量以及提供個(gè)性化選擇上，其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。

一、定義及其在UI設(shè)計(jì)中的表現(xiàn)形式

1.暗色模式的定義

暗色模式是一種低光用戶界面（UI）設(shè)計(jì)，也稱為深色模式，是一種用戶界面設(shè)計(jì)選項(xiàng)，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺(jué)體驗(yàn)。

iOS 13 亮色模式（左）與暗色模式（右）的對(duì)比

2.暗色模式的定義

(1).暗色模式在UI設(shè)計(jì)中的表現(xiàn)形式

設(shè)計(jì)師需要為暗色模式創(chuàng)建一個(gè)新的調(diào)色板，這通常意味著降低顏色的飽和度，以適應(yīng)深色背景。同時(shí)，避免使用純黑作為主色調(diào)背景，而是選擇接近純黑的深灰色，以確保閱讀體驗(yàn)的舒適性和可讀性。

亮色/暗色模式下主色需要進(jìn)行調(diào)整

(2).對(duì)比度控制

暗色背景與文本顏色之間的對(duì)比度應(yīng)該控制在WCAG2.0AA級(jí)標(biāo)準(zhǔn)以上，以保證內(nèi)容的清晰度和易讀性。對(duì)于彩色元素，也需要適當(dāng)調(diào)整飽和度，確保整體色彩之間的對(duì)比度符合無(wú)障礙標(biāo)準(zhǔn)。

達(dá)到/未達(dá)到WCAG2.0AA標(biāo)準(zhǔn)的視覺(jué)效果對(duì)比

(3).視覺(jué)元素區(qū)分

在暗色模式下，設(shè)計(jì)師需要特別注意視覺(jué)元素的區(qū)分，通過(guò)足夠的對(duì)比度來(lái)保證文字和圖形的清晰可見(jiàn)。這不僅僅是簡(jiǎn)單的顏色反轉(zhuǎn)，而是一種“弱光”主題的設(shè)計(jì)思考，旨在優(yōu)化用戶在低光環(huán)境下的視覺(jué)體驗(yàn)。

亮色模式中的按鈕在暗色模式中顯得太跳躍

二、歷史回顧及發(fā)展脈絡(luò)

1.命令行界面時(shí)代

在早期的計(jì)算機(jī)系統(tǒng)中，如DOS和Linux，終端通常使用暗色模式，這是因?yàn)樵缙诘腃RT顯示器存在閃爍問(wèn)題，暗色背景能夠減少視覺(jué)疲勞，并提供較高的對(duì)比度。

Linux的終端界面

2.個(gè)人電腦時(shí)代

隨著個(gè)人電腦的普及，圖形用戶界面（GUI）逐漸成為標(biāo)準(zhǔn)，此時(shí)大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。

Windows2000的GUI

3.移動(dòng)設(shè)備時(shí)代

智能手機(jī)和平板電腦的興起帶來(lái)了OLED等先進(jìn)顯示技術(shù)，這些設(shè)備的小屏幕和高分辨率使得暗色模式再次變得實(shí)用和流行，特別是在節(jié)省電量和減少眼睛疲勞方面。

iOS13的暗色模式

4.操作系統(tǒng)時(shí)代

近年來(lái)，各大操作系統(tǒng)開(kāi)始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色應(yīng)用模式，macOS和iOS隨后也推出了可以根據(jù)時(shí)間或環(huán)境自動(dòng)切換的暗色模式。

Windows10的暗色模式

三、設(shè)計(jì)趨勢(shì)中暗色模式的地位

暗色模式在當(dāng)前設(shè)計(jì)趨勢(shì)中占據(jù)重要地位，以其減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容的優(yōu)勢(shì)受到青睞。它不僅適應(yīng)低光環(huán)境，還提供美學(xué)上的新探索，響應(yīng)了用戶對(duì)舒適性和個(gè)性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計(jì)創(chuàng)新，暗色模式已成為現(xiàn)代界面設(shè)計(jì)不可或缺的一部分。許多頂級(jí)品牌和應(yīng)用程序，如WhatsApp、Instagram、Google、Facebook等，都已經(jīng)引入暗色模式設(shè)計(jì)，這表明暗色模式已經(jīng)成為了一種廣泛接受的設(shè)計(jì)趨勢(shì)。

從左往右依次為：WhatsApp、Instagram、Google、Facebook

一、用戶體驗(yàn)層面

1.提高閱讀舒適度

(1).對(duì)比度和可讀性

在相同的對(duì)比度條件下，淺背景上的黑字比深背景上的淺色字閱讀效果更好。這表明，優(yōu)化對(duì)比度是提高閱讀舒適度的關(guān)鍵因素之一。

淺背景上深字與深背景上淺字的視覺(jué)對(duì)比

(2).用戶偏好和滿意度

一項(xiàng)針對(duì)用戶對(duì)暗色模式的使用體驗(yàn)的調(diào)查顯示，與默認(rèn)的白底模式相比，用戶在使用暗色模式時(shí)報(bào)告了更低的視覺(jué)疲勞和更高的滿意度。斯隆（Sloan）的一項(xiàng)研究在1977年就報(bào)告說(shuō)，如果更多的光線通過(guò)混濁的透鏡到達(dá)眼睛，則出現(xiàn)畸變的可能性更大，即暗模式對(duì)視力障礙者更好。

對(duì)于長(zhǎng)時(shí)間從事屏幕工作的人來(lái)說(shuō)，暗色模式對(duì)眼睛更加友好

2.減少視覺(jué)疲勞

(1).人眼生理特性

暗色模式能減少屏幕發(fā)出的光線，這有利于減少眼睛疲勞和不適，特別是在低光環(huán)境下，人眼的虹膜會(huì)打開(kāi)以接受更多光線，而暗色模式提高了減少的光源，減少了對(duì)眼睛的刺激。

亮/暗環(huán)境下瞳孔大小的變化

(2).藍(lán)光輻射減少

人們通過(guò)長(zhǎng)期研究發(fā)現(xiàn)短波可見(jiàn)光，即紫光和藍(lán)光對(duì)眼底視網(wǎng)膜有相當(dāng)程度的破壞作用，而人們通常把這種可見(jiàn)光波長(zhǎng)中高能量波段(400- 470nm)對(duì)視網(wǎng)膜的損壞現(xiàn)象稱為“藍(lán)光傷害現(xiàn)象”。還有研究關(guān)注了暗色模式對(duì)藍(lán)光輻射的影響。由于暗色模式降低了屏幕的整體亮度，因此也減少了藍(lán)光的輻射。

可見(jiàn)光波段分布

二、設(shè)備電池壽命

1.降低屏幕功耗

在OLED屏幕上，每個(gè)像素都是獨(dú)立發(fā)光的，當(dāng)顯示黑色時(shí)，相關(guān)的像素點(diǎn)會(huì)關(guān)閉，從而不消耗能量。這意味著，顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。

OLED屏幕發(fā)光原理

2.實(shí)際省電效果

以 Google 測(cè)試數(shù)據(jù)為例，OLED 屏幕的 Pixel 手機(jī)在時(shí)間段內(nèi)啟用深色模式并在使用地圖導(dǎo)航時(shí)保持屏幕最大亮度，手機(jī)的電量消耗下降了 63%。

Google的測(cè)試數(shù)據(jù)

三、降低屏幕功耗

1.促進(jìn)睡眠

對(duì)于晚上喜歡在床上閱讀或工作的用戶來(lái)說(shuō)，暗色背景有助于降低屏幕亮度，減少對(duì)褪黑素分泌的干擾，也有助于減少藍(lán)光對(duì)睡眠周期的影響，從而幫助用戶更快入睡并提高睡眠質(zhì)量。

OPPO手機(jī)暗色模式廣告

2.減少眩光

眩光是明亮的屏幕和低光環(huán)境之間惱人的對(duì)比現(xiàn)象，對(duì)眼睛具有一定的影響并造成眼部不適。暗色模式通過(guò)使用深色背景和亮色文字，整體降低了屏幕的亮度，這樣在光線較亮的環(huán)境中，屏幕的亮光與周圍暗環(huán)境的對(duì)比度降低，從而減少了屏幕反射光線對(duì)眼睛的刺激，降低不適。

有眩光與無(wú)眩光的顯示器對(duì)比

四、打造沉浸式體驗(yàn)

1.減少視覺(jué)干擾

暗色模式提高了一種無(wú)干擾的工作環(huán)境，有助于他們專注于手頭的任務(wù)，特別是在進(jìn)行寫(xiě)作、編碼或其他需要集中注意力的活動(dòng)時(shí)，暗色模式能夠減少視覺(jué)干擾。

暗色模式為視覺(jué)設(shè)計(jì)提供了更大的對(duì)比度，使得界面元素更為突出。這種高對(duì)比度不僅有利于內(nèi)容的戰(zhàn)士，也增強(qiáng)了用戶的視覺(jué)聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進(jìn)行游戲時(shí)，暗色背景能夠使色彩更為鮮明，提升用戶的視覺(jué)體驗(yàn)。

編碼軟件一般默認(rèn)暗色界面，有利于專注工作

2.增強(qiáng)視覺(jué)聚焦

作者：阿琳01
來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)(www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

評(píng)論(0) 瀏覽(1355)

102024-4

UI設(shè)計(jì)中的微文案：細(xì)微之處見(jiàn)真章

博博

在UI設(shè)計(jì)中，微文案往往被視作細(xì)枝末節(jié)，容易被設(shè)計(jì)師們所忽視。然而，正是這些看似不起眼的文字，卻在用戶體驗(yàn)中扮演著舉足輕重的角色。微文案，即那些短小精悍、直接明了的文字描述，它們不僅能夠指導(dǎo)用戶操作，還能夠增強(qiáng)產(chǎn)品的情感價(jià)值，提升用戶滿意度。

資深設(shè)計(jì)專家Joshua Porter曾指出：優(yōu)化界面體驗(yàn)的一個(gè)快捷方式，就是提升文案的質(zhì)量。他在《Writing Microcopy》一文中首次提及“微文案”這一術(shù)語(yǔ)，并以確認(rèn)彈窗的文案為例，展示了如何通過(guò)清晰的表述“賬單地址是你卡上顯示的地址”，有效減少用戶在使用過(guò)程中的錯(cuò)誤。簡(jiǎn)而言之，要想快速優(yōu)化界面體驗(yàn)，提升文案水平是一個(gè)行之有效的途徑。

一、了解微文案

如果你有學(xué)習(xí)過(guò)尼爾森的十大可用性原則，你會(huì)發(fā)現(xiàn)10條中有4條都與文案有關(guān)。

系統(tǒng)狀態(tài) —— 告訴用戶當(dāng)前正在發(fā)生什么，是卡住了還是處在loading中或是其它什么狀態(tài)。

一致性和標(biāo)準(zhǔn)化原則 —— 有一些約定俗成的規(guī)則，其中有一些普遍接受的術(shù)語(yǔ)，明確的操作提示，在不同界面保持統(tǒng)一等等。

防錯(cuò)原則 —— 幫助用戶明白當(dāng)他們做什么操作會(huì)發(fā)生什么結(jié)果，或者清晰的解釋某個(gè)操作會(huì)有什么行為。

明確錯(cuò)誤 —— 錯(cuò)誤信息應(yīng)該用人話表達(dá)（不要用代碼），較準(zhǔn)確地反映問(wèn)題所在，并且提出一個(gè)建設(shè)性的解決方案。

1、微文案的定義

微文案（Microcopy）指的是在界面中，能夠引導(dǎo)、幫助用戶與界面交互行為的簡(jiǎn)短文案，可以是一個(gè)單詞、也可以是一句話，常見(jiàn)的有表單文案、按鈕文案、彈窗文案、錯(cuò)誤提示等，大部分微文案都會(huì)對(duì)用戶的行為產(chǎn)生直接的影響，如下所示：

2、微文案被重視的原因

微文案，作為用戶與產(chǎn)品交流中最直接的觸點(diǎn)，不僅有助于用戶預(yù)見(jiàn)潛在問(wèn)題，更能激發(fā)他們繼續(xù)操作的意愿。通過(guò)預(yù)先洞察用戶在操作過(guò)程中可能遭遇的障礙并提供針對(duì)性的解決方案，微文案在很大程度上降低了用戶的流失率。優(yōu)秀的微文案能夠精準(zhǔn)地揭示問(wèn)題核心，消除用戶的疑慮，從而加速他們的決策過(guò)程，為產(chǎn)品創(chuàng)造更多價(jià)值。

此外，微文案所傳達(dá)的語(yǔ)氣和態(tài)度，對(duì)用戶情緒有著顯著影響。用戶的情緒狀態(tài)往往決定了他們是否愿意繼續(xù)在產(chǎn)品中深入探索。因此，眾多產(chǎn)品在追求體驗(yàn)優(yōu)化的過(guò)程中，都將微文案作為重點(diǎn)改進(jìn)的一環(huán)。

3、微文案專設(shè)崗位

國(guó)外對(duì)于微文案的重視不止反映在公司對(duì)于職位的要求上，更反映在國(guó)外的教育市場(chǎng)上。國(guó)外有很多教育機(jī)構(gòu)相繼開(kāi)設(shè)了UX Writing的課程體系，比如 UX Writer Collective 以及 UX Writing Hub。這都代表著國(guó)外市場(chǎng)對(duì)于微文案設(shè)計(jì)的重視程度提高。

相比之下，國(guó)內(nèi)除了頭部大廠在微文案方面有著較強(qiáng)的意識(shí)，其余以下尚未獲得足夠的重視，但其重要性正迅速提升，展現(xiàn)出巨大的發(fā)展?jié)摿Α?/span>

二、如何設(shè)計(jì)微文案

1、少用技術(shù)專業(yè)詞匯

每個(gè)領(lǐng)域、每個(gè)公司都有專業(yè)的詞匯，設(shè)計(jì)師和開(kāi)發(fā)者通常會(huì)在產(chǎn)品當(dāng)中潛移默化地使用這些專業(yè)詞匯。而用戶群體卻是包羅萬(wàn)象，所以需要做的，是將專業(yè)的技術(shù)信息簡(jiǎn)單易懂地表述出來(lái)。

避免含糊文案，明確表述問(wèn)題和指引。力求簡(jiǎn)潔，詞語(yǔ)能達(dá)意則不用句，一句話能說(shuō)明則不贅言。用戶沒(méi)有耐心來(lái)看你寫(xiě)小說(shuō)。

2、不要拘束于一種表達(dá)方式

設(shè)計(jì)常常賦予產(chǎn)品獨(dú)特的個(gè)性。在完成了前面的步驟后，我們往往需要將微文案與設(shè)計(jì)理念相融合。不同的設(shè)計(jì)與微文案結(jié)合，會(huì)產(chǎn)生不同的效果，但絕不應(yīng)是單調(diào)冷漠的提示。相反，我們應(yīng)賦予其人性化的口吻，比如將“未設(shè)置收貨地址，請(qǐng)?zhí)砑?rdquo;修改為“您需要我們送到哪里？…”，從而使整個(gè)文案更具情感溫度，成為一個(gè)溫暖而富有親和力的聲音。

在一些特殊的場(chǎng)景下，微文案能起到安撫用戶情緒、引導(dǎo)用戶選擇后續(xù)行為的作用

3、謹(jǐn)慎開(kāi)玩笑，除非你對(duì)你的產(chǎn)品非常自信

雖然幽默風(fēng)趣的微文案可以讓人更加輕松，但是也要分場(chǎng)合，玩笑和俏皮的語(yǔ)言應(yīng)該在氛圍合適的時(shí)候使用，并且并不是所有人都能Get到特定的笑點(diǎn)。

有些笑話在文章當(dāng)中或許合適，但是在UI界面當(dāng)中就不一定那么有意思了。比如，你所提交的數(shù)據(jù)無(wú)法保存，結(jié)果文案是“糟糕！您的數(shù)據(jù)好像無(wú)法保存呢”，這對(duì)于當(dāng)前的狀況毫無(wú)裨益。

這樣的表達(dá)方式既直接指出了問(wèn)題所在，又給出了簡(jiǎn)單的解決方案或建議，更有助于用戶理解和處理當(dāng)前的問(wèn)題。

4、克制與誠(chéng)信是微文案應(yīng)用的基石原則，它們共同構(gòu)成了我們?cè)谶\(yùn)用微文案時(shí)應(yīng)當(dāng)堅(jiān)守的底線

有時(shí)，我們過(guò)于依賴這些標(biāo)簽，使得人們對(duì)信息逐漸變得麻木不仁。又或是由于虛假、夸大其詞的數(shù)據(jù)泛濫，使得人們開(kāi)始對(duì)社會(huì)證明持懷疑態(tài)度。

正如張小龍?jiān)?017年微信之夜中所言，當(dāng)App的推送變得過(guò)于頻繁時(shí)，人們往往會(huì)選擇忽視，以至于任何一個(gè)推送都無(wú)法引起他們的關(guān)注。

當(dāng)全部都是特惠時(shí)，你還會(huì)因?yàn)閮?yōu)惠而沖動(dòng)購(gòu)買嗎？

結(jié)語(yǔ)

微文案不僅是文字，更是溝通的橋梁。請(qǐng)確保微語(yǔ)言準(zhǔn)確、清晰，同時(shí)注重情感化和個(gè)性化，以貼近用戶。同時(shí)，保證可讀性和可理解性，避免復(fù)雜表達(dá)。保持微語(yǔ)言的一致性和連貫性，提升用戶體驗(yàn)。通過(guò)精心設(shè)計(jì)的微語(yǔ)言，為用戶創(chuàng)造更舒適、便捷的體驗(yàn)。

作者：晚上去拔罐
來(lái)源：站酷

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

評(píng)論(0) 瀏覽(946)

102024-4

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

前端達(dá)人

當(dāng)你打開(kāi)一個(gè)頁(yè)面，首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi)，既保證內(nèi)容的完整性，又讓用戶能夠輕松理解和瀏覽，這背后的奧秘就在于頁(yè)面分割。今天，我們就來(lái)一起

探討頁(yè)面分割的藝術(shù)與技巧

，看看它是如何為你的設(shè)計(jì)增添魅力，提升用戶體驗(yàn)的。

在設(shè)計(jì)中，頁(yè)面分割不僅僅是一種技術(shù)手段，更是一種藝術(shù)表現(xiàn)。它如同一位細(xì)心的畫(huà)師，巧妙地運(yùn)用線條、色彩、空白等元素，

將頁(yè)面內(nèi)容劃分為一個(gè)個(gè)清晰、有序的區(qū)域。

通過(guò)這些分割，用戶能夠更快速地找到所需信息，更輕松地理解頁(yè)面內(nèi)容，從而享受到更加愉悅的閱讀體驗(yàn)。

頁(yè)面分割的魅力在于其

多樣性和靈活性

。不同的頁(yè)面可以采用不同的分割方式，如線條分割、卡片分割、留白分割等，以滿足不同的設(shè)計(jì)需求和用戶習(xí)慣。同時(shí)，頁(yè)面分割也需要根據(jù)內(nèi)容的實(shí)際情況進(jìn)行合理調(diào)整，既要保證信息的完整性，又要避免過(guò)度分割帶來(lái)的混亂感。

在本文中，我們將一起探討頁(yè)面分割的原則、技巧和應(yīng)用實(shí)例。我們將學(xué)習(xí)如何運(yùn)用不同的分割方式來(lái)優(yōu)化頁(yè)面布局，提升用戶體驗(yàn)。同時(shí)，我們還將分享一些成功的頁(yè)面分割案例，以激發(fā)你的設(shè)計(jì)靈感，為你的界面設(shè)計(jì)注入新的活力。

分享目錄：

一、分割的常見(jiàn)樣式

二、線性分割

三、卡片分割

四、留白分割

五、總結(jié)

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

線性分割：

通過(guò)使用線條來(lái)劃分頁(yè)面的不同區(qū)域，以達(dá)到組織內(nèi)容、引導(dǎo)用戶視線和提升整體美觀度的目的。這種分割方式簡(jiǎn)單明了，能夠清晰地展現(xiàn)出頁(yè)面內(nèi)容的層次和結(jié)構(gòu)。

卡片分割：

卡片式設(shè)計(jì)是一種流行的界面分割方法，通過(guò)將內(nèi)容劃分為獨(dú)立的卡片或區(qū)塊，使用戶能夠更清晰地理解信息。每個(gè)卡片通常包含相關(guān)的內(nèi)容，如文本、圖片或按鈕，以便用戶快速瀏覽和交互。

留白分割：

主要通過(guò)增加間距的方式，利用人的視知覺(jué)原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然地將信息進(jìn)行分組。這種留白的方式能夠?yàn)轫?yè)面增加呼吸感，降低視覺(jué)噪音，使設(shè)計(jì)看起來(lái)更簡(jiǎn)潔。

近年來(lái)，設(shè)計(jì)趨勢(shì)從

“卡片式設(shè)計(jì)”轉(zhuǎn)向了“去線化設(shè)計(jì)”，

即傾向于使用留白分割而非過(guò)多的線條分割，以實(shí)現(xiàn)更為簡(jiǎn)潔清晰的界面效果。設(shè)計(jì)師在選擇分割方式時(shí)，應(yīng)

優(yōu)先考慮留白分割，其次是線性分割，最后是卡片分割

。這個(gè)選擇順序反映了設(shè)計(jì)界的一般原則，即在不影響信息傳達(dá)的前提下，盡可能保持設(shè)計(jì)的簡(jiǎn)潔性。

線性分割的定義：

線性分割設(shè)計(jì)是一種在視覺(jué)設(shè)計(jì)中使用的技巧，它使用線條、邊框或細(xì)線等元素來(lái)劃分、區(qū)分或連接頁(yè)面上的不同內(nèi)容區(qū)域。這種設(shè)計(jì)手法主要用于

提高頁(yè)面內(nèi)容的可讀性和組織性，幫助用戶更好地理解和瀏覽頁(yè)面信息。

線性分割設(shè)計(jì)具有以下優(yōu)勢(shì)：

1.劃分區(qū)域：

線性分割可以將頁(yè)面劃分為不同的區(qū)域或模塊，使得每個(gè)區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息，提高閱讀效率。

2.區(qū)分內(nèi)容：

線性分割可以用來(lái)區(qū)分不同類型的內(nèi)容，如文本、圖片、圖表等。通過(guò)線性分割，可以將這些內(nèi)容進(jìn)行分組或歸類，使得頁(yè)面更加整潔、有序。

3.引導(dǎo)視線：

線性分割可以引導(dǎo)用戶的視線，幫助他們更好地理解頁(yè)面內(nèi)容。通過(guò)合理的線性分割設(shè)計(jì)，可以突出顯示重要的信息或元素，引導(dǎo)用戶關(guān)注到關(guān)鍵內(nèi)容。

4.增強(qiáng)層次感：

線性分割可以增強(qiáng)頁(yè)面的層次感，使得頁(yè)面內(nèi)容更加豐富、有深度。通過(guò)不同樣式的線性分割，可以區(qū)分不同的信息層級(jí)，幫助用戶更好地理解頁(yè)面結(jié)構(gòu)和內(nèi)容關(guān)系。

使用原則：

在使用分割線時(shí)，我們應(yīng)遵循一些原則，以確保其有效地幫助用戶理解頁(yè)面的組成，同時(shí)避免過(guò)度使用帶來(lái)的視覺(jué)干擾。

1.分割線應(yīng)當(dāng)微妙而不過(guò)于顯眼。

它們?cè)诓季种袘?yīng)該容易被用戶注意到，但又不應(yīng)成為焦點(diǎn)，以免分散用戶的注意力。

2.分割線應(yīng)被視為次要的元素。

只有在留白等其他設(shè)計(jì)手法無(wú)法有效起到分割作用時(shí)，才考慮使用分割線。它們應(yīng)當(dāng)是布局中的輔助工具，而不是主導(dǎo)元素。

3.謹(jǐn)慎使用分割線。

過(guò)度使用分割線可能會(huì)導(dǎo)致頁(yè)面顯得混亂和復(fù)雜。相反，我們應(yīng)該用分割線來(lái)創(chuàng)建信息分組，而不是簡(jiǎn)單地分割每一個(gè)條目。通過(guò)審慎而恰當(dāng)?shù)厥褂梅指罹€，我們可以有效地提升頁(yè)面的可讀性和用戶體驗(yàn)。

圖片來(lái)源于參考文章

線性分割三種類型：

通欄分割線、內(nèi)嵌分割線和中間分割線。

1.通欄分割線（Full-bleed Dividers）：

通欄分割線通常橫跨整個(gè)頁(yè)面寬度，用于分隔彼此完全獨(dú)立的內(nèi)容區(qū)域。這種分割線在視覺(jué)上非常顯著，能夠清晰地劃分出不同的內(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ū)域之間，用于分隔無(wú)錨點(diǎn)的相關(guān)內(nèi)容。這種分割線通常比通欄分割線更細(xì)，更注重于在視覺(jué)上劃分空間，而不是強(qiáng)調(diào)內(nèi)容的獨(dú)立性。中間分割線常用于文本段落之間、列表項(xiàng)之間或不同功能區(qū)域之間，以提供清晰的結(jié)構(gòu)和層次。

在大多數(shù)情況下，當(dāng)信息層級(jí)較為簡(jiǎn)單（即信息層級(jí)≤2）時(shí)，使用分割線進(jìn)行信息分割是一種有效的方法。然而，實(shí)際上，

如果留白間距足夠大，我們也可以使用留白來(lái)達(dá)到類似的效果

。通過(guò)增大留白間距，我們可以創(chuàng)造出清晰的視覺(jué)區(qū)域劃分，使得信息之間的界限更加明確。

與分割線相比，足夠大的留白間距可以避免多余的線性元素干擾，讓整體視覺(jué)效果更加清爽。這樣的設(shè)計(jì)選擇有助于提升用戶的閱讀體驗(yàn)，使用戶更加輕松地理解和消化信息。

因此，在

信息層級(jí)較簡(jiǎn)單的情況下，我們可以靈活地選擇使用分割線或留白來(lái)進(jìn)行信息分割

。通過(guò)調(diào)整留白間距，我們可以達(dá)到與分割線相似的效果，同時(shí)保持整體設(shè)計(jì)的簡(jiǎn)潔和清晰。

為了提升屏效

，我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下，分割線的設(shè)計(jì)顯得尤為重要，因?yàn)樗鼈兡軌?/div>

有效地劃分信息區(qū)域，使內(nèi)容更加清晰、易于理解。

通過(guò)使用分割線，我們可以

將較多的信息條理化

，使得用戶能夠更快速地找到所需的內(nèi)容。與沒(méi)有分割線的布局相比，使用分割線能夠

顯著提高信息的可讀性和可理解性。

在相同的信息布局下，分割線能夠?qū)⑿畔^(qū)域明確地劃分開(kāi)來(lái)，

防止信息之間產(chǎn)生混淆或交叉

。這種劃分不僅使得每個(gè)信息塊更加獨(dú)立，而且提高了信息之間的對(duì)比度，使用戶能夠更輕松地識(shí)別和區(qū)分不同的信息。

因此，當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時(shí)，分割線的設(shè)計(jì)是一個(gè)關(guān)鍵要素。通過(guò)合理地使用分割線，我們可以確保信息布局更加清晰、有序，從而提高用戶的閱讀效率和滿意度。（如下圖）

線性分割在移動(dòng)端頁(yè)面設(shè)計(jì)中的應(yīng)用場(chǎng)景廣泛，尤其是在

需要清晰劃分信息模塊時(shí)

。如微信的聊天列表中，線性分割被用來(lái)區(qū)分不同的消息條目。每條消息之間通過(guò)一條細(xì)線進(jìn)行分隔，使得每條消息清晰可辨，方便用戶快速瀏覽和定位到特定的消息。

線性分割還常用在各類

App的信息提示

中，如果有多條消息需要展示，線性分割可以用來(lái)

區(qū)分不同的消息組

。例如招商銀行APP中，當(dāng)用戶收到多條未讀消息時(shí)，每條消息之間可以通過(guò)線性分割進(jìn)行區(qū)分，使得每條消息清晰可辨，方便用戶逐一查看和處理。

在APP

需要用戶填寫(xiě)信息和設(shè)置的表單頁(yè)面中

，線性分割可以用來(lái)區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫(xiě)的信息，提高表單的填寫(xiě)效率和準(zhǔn)確性，比如站酷的設(shè)置頁(yè)面（如下圖）

卡片分割的定義：

卡片分割設(shè)計(jì)主要通過(guò)將內(nèi)容或功能區(qū)域劃分成獨(dú)立的“卡片”來(lái)進(jìn)行信息展示和組織。每個(gè)卡片通常包含相關(guān)的內(nèi)容或功能，并且與其他卡片通過(guò)一定的間距或線性分隔進(jìn)行區(qū)分。

卡片分割設(shè)計(jì)具有以下優(yōu)勢(shì)：

1.內(nèi)容封裝：

卡片分割設(shè)計(jì)將相關(guān)內(nèi)容或功能封裝在一個(gè)獨(dú)立的卡片內(nèi)，使得每個(gè)卡片成為一個(gè)獨(dú)立的信息單元。這有助于保持頁(yè)面內(nèi)容的清晰和整潔，方便用戶瀏覽和理解。

2.明確邊界

：每個(gè)卡片通常具有明確的邊界，通過(guò)邊框、陰影或間距等元素來(lái)區(qū)分不同的卡片。這種邊界的存在使得每個(gè)卡片在視覺(jué)上相對(duì)獨(dú)立，方便用戶進(jìn)行區(qū)分和識(shí)別。

3.靈活布局：

卡片分割設(shè)計(jì)具有很高的靈活性，可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣來(lái)靈活調(diào)整卡片的布局，以達(dá)到最佳的視覺(jué)效果。

4.強(qiáng)調(diào)重點(diǎn)：

通過(guò)不同的視覺(jué)處理手法，如改變卡片的顏色、大小或樣式等，可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力，引導(dǎo)他們關(guān)注到關(guān)鍵信息。

卡片的基本構(gòu)成：

卡片是一個(gè)獨(dú)立的主題性容器，旨在將內(nèi)容和操作組合在一起。它可以包含多種元素，如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在，而是根據(jù)具體需求進(jìn)行選擇和配置。無(wú)論選擇哪些元素，它們都會(huì)以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計(jì)使得卡片成為一個(gè)靈活且高效的信息展示工具，適用于各種場(chǎng)景和應(yīng)用。

卡片分割常見(jiàn)的類型：

卡片分割可分為

通欄卡片

和

非通欄卡片

1、通欄卡片：

其特點(diǎn)是卡片占據(jù)整個(gè)頁(yè)面寬度，沒(méi)有左右邊距。通欄卡片的設(shè)計(jì)可以提高布局的靈活性，使得頁(yè)面內(nèi)容更加寬敞和大氣。同時(shí)，通欄卡片也可以更好地突出展示單條內(nèi)容，引導(dǎo)用戶的視線，提高閱讀效率。

2.非通欄卡片：

與通欄卡片相比，它會(huì)在卡片的左右兩側(cè)留有邊距，不完全占據(jù)整個(gè)頁(yè)面寬度。這種設(shè)計(jì)方式可以使得頁(yè)面內(nèi)容更加有層次感和組織性，同時(shí)也有利于突出顯示某些關(guān)鍵信息。

通欄卡片

通欄卡片相較于非通欄卡片，其設(shè)計(jì)特點(diǎn)在于去除了左右兩端的留白，僅保留上下邊距，從而提供了更大的展示空間。這種設(shè)計(jì)使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個(gè)頁(yè)面寬度，進(jìn)一步增強(qiáng)了內(nèi)容的視覺(jué)沖擊力。在通欄卡片中，卡片與背景的關(guān)系通常通過(guò)一條背景色塊來(lái)抽象表現(xiàn)，這種簡(jiǎn)潔的處理方式避免了過(guò)多的視覺(jué)元素干擾，使得頁(yè)面整體看起來(lái)更加整潔和統(tǒng)一。

通欄卡片可以被視為在極簡(jiǎn)列表式和傳統(tǒng)卡片式設(shè)計(jì)之間的一種折中選擇。它繼承了卡片式的分層方式和強(qiáng)交互性，使得用戶能夠輕松地瀏覽和交互頁(yè)面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁(yè)面。

非通欄卡片

通常采用帶圓角的設(shè)計(jì)形式

，這種設(shè)計(jì)不僅賦予卡片一種柔和、圓潤(rùn)的視覺(jué)效果，還增強(qiáng)了用戶的視覺(jué)舒適度。結(jié)合陰影效果以及四周的邊距，非通欄卡片巧妙地形成頁(yè)面留白，使得整體設(shè)計(jì)層次感更加豐富。

通過(guò)巧妙的投影設(shè)計(jì)以及前后顏色的精準(zhǔn)設(shè)定，非通欄卡片成功地讓內(nèi)容與背景之間

產(chǎn)生視覺(jué)空間感

，進(jìn)一步強(qiáng)化了內(nèi)容的立體感和層次感。這種設(shè)計(jì)技巧不僅提升了卡片的視覺(jué)吸引力，還使得用戶在瀏覽頁(yè)面時(shí)能夠更加輕松地

區(qū)分和聚焦關(guān)鍵信息

。

在頁(yè)面設(shè)計(jì)中，非通欄卡片的應(yīng)用范圍十分廣泛。無(wú)論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容，非通欄卡片都能夠通過(guò)其獨(dú)特的視覺(jué)效果和設(shè)計(jì)元素，為用戶帶來(lái)更加舒適、美觀的視覺(jué)體驗(yàn)。同時(shí)，非通欄卡片還具有良好的

適應(yīng)性和靈活性

，可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣進(jìn)行定制和調(diào)整，滿足不同場(chǎng)景下的應(yīng)用需求。如下圖夸克“夸克日?qǐng)?bào)”、APP Store“首頁(yè)”

選擇使用通欄分割線還是卡片分割，主要取決于你的設(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)容長(zhǎng)度超過(guò)屏幕高度的一半），使用非通欄分割會(huì)更加合適。卡片能夠有效地圈定內(nèi)容范圍，為用戶提供一個(gè)明確的視覺(jué)邊界，幫助他們更好地理解和消化信息。

3.當(dāng)需要增強(qiáng)橫向空間感時(shí)：

如果你希望擴(kuò)展頁(yè)面的橫向空間，或者暗示用戶可以橫向滑動(dòng)頁(yè)面查看更多內(nèi)容，那么非通欄卡片會(huì)是更好的選擇。非通欄卡片的設(shè)計(jì)能夠利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立頁(yè)面可以橫向滑動(dòng)的意識(shí)，從而提升頁(yè)面的互動(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)容，還通過(guò)合理的空間劃分，確保了文字和圖片之間的和諧共存，既維持了視覺(jué)的一致性，又

巧妙地平衡了文字和圖片的視覺(jué)強(qiáng)度

。因此，在需要同時(shí)呈現(xiàn)多種內(nèi)容和媒介的場(chǎng)景中，卡片分割無(wú)疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁(yè)”

留白分割的定義：

留白分割是目前設(shè)計(jì)的主流趨勢(shì)，越來(lái)越多的產(chǎn)品在使用留白分割設(shè)計(jì)。留白分割主要通過(guò)增加間距的方式，利用人的視知覺(jué)原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），將信息進(jìn)行自然的視覺(jué)分組。

留白分割具有以下優(yōu)勢(shì)：

1.突出重點(diǎn)信息：

通過(guò)增加間距，可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開(kāi)來(lái)，使用戶更容易注意到。

2.提高可讀性：

適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰，減少視覺(jué)干擾，從而提高用戶的閱讀效率。

3.增強(qiáng)設(shè)計(jì)感：

留白可以為設(shè)計(jì)增加呼吸感，避免元素過(guò)于擁擠，使整體布局更加和諧、美觀。

當(dāng)元素之間的間距保持均勻時(shí)，整個(gè)視覺(jué)呈現(xiàn)會(huì)顯得平衡且協(xié)調(diào)，大腦默認(rèn)為一個(gè)整體。然而，一旦元素的橫向和縱向間距發(fā)生變化，我們的大腦會(huì)

基于接近性法則

，本能地將距離較近的元素視為一個(gè)整體或群組，這就是留白分割。（如下圖）

留白分割在

有規(guī)律且卡片樣式較多

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

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

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

評(píng)論(0) 瀏覽(1306)

102024-4

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

前端達(dá)人

一、引言

在產(chǎn)品設(shè)計(jì)的世界里，心智模式是一個(gè)至關(guān)重要的概念。它反映了用戶的內(nèi)在需求、期望和行為習(xí)慣，是產(chǎn)品設(shè)計(jì)的核心依據(jù)。本文將帶你深入了解產(chǎn)品設(shè)計(jì)中的心智模式，掌握如何通過(guò)洞察用戶心智模式，創(chuàng)造出真正滿足用戶需求的產(chǎn)品。

二、什么是心智模式？

簡(jiǎn)單來(lái)說(shuō)，心智模式是指人們對(duì)于世界的認(rèn)知和理解的內(nèi)在模式。它是人們對(duì)事物的看法、經(jīng)驗(yàn)和行為習(xí)慣的集合，影響人們對(duì)世界的感知和反應(yīng)。在產(chǎn)品設(shè)計(jì)中，了解和利用用戶的心智模式，可以幫助我們更好地把握用戶需求，創(chuàng)造出更符合用戶習(xí)慣和期望的產(chǎn)品。

三、如何洞察用戶心智模式？

觀察研究：深入觀察用戶在實(shí)際生活中的行為、習(xí)慣和需求，理解他們的真實(shí)需求和痛點(diǎn)。這需要設(shè)計(jì)師具備敏銳的觀察力和同理心，能夠設(shè)身處地地站在用戶的角度思考問(wèn)題。
用戶調(diào)研：通過(guò)問(wèn)卷、訪談等方式，直接獲取用戶的反饋和建議。這有助于了解用戶的期望、偏好和顧慮，進(jìn)一步揭示他們的心智模式。
競(jìng)品分析：研究市場(chǎng)上類似產(chǎn)品的設(shè)計(jì)，理解其滿足用戶需求的優(yōu)點(diǎn)和不足。通過(guò)競(jìng)品分析，可以洞察用戶在不同產(chǎn)品間的選擇和行為模式，從而深入理解他們的心智模式。

四、如何運(yùn)用心智模式進(jìn)行產(chǎn)品設(shè)計(jì)？

明確目標(biāo)用戶：了解目標(biāo)用戶的心智模式，根據(jù)他們的需求和行為習(xí)慣進(jìn)行產(chǎn)品設(shè)計(jì)。這有助于確保產(chǎn)品功能、交互和視覺(jué)設(shè)計(jì)等方面符合用戶的內(nèi)在期望。
優(yōu)化用戶體驗(yàn)：基于用戶的心智模式，優(yōu)化產(chǎn)品的使用流程。例如，通過(guò)合理的信息架構(gòu)、易于理解的交互設(shè)計(jì)和符合用戶直覺(jué)的視覺(jué)語(yǔ)言，提升產(chǎn)品的易用性和用戶體驗(yàn)。
創(chuàng)新設(shè)計(jì)：通過(guò)深入了解用戶的心智模式，發(fā)現(xiàn)潛在的需求和痛點(diǎn)，為產(chǎn)品設(shè)計(jì)帶來(lái)創(chuàng)新點(diǎn)。這有助于創(chuàng)造出真正解決用戶問(wèn)題的產(chǎn)品，提升市場(chǎng)競(jìng)爭(zhēng)力。
迭代優(yōu)化：在產(chǎn)品發(fā)布后，持續(xù)收集用戶反饋，了解用戶在使用過(guò)程中的感受和體驗(yàn)。根據(jù)用戶的反饋和行為數(shù)據(jù)，不斷優(yōu)化產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)，以滿足用戶不斷變化的心智模式。

五、結(jié)語(yǔ)

在產(chǎn)品設(shè)計(jì)過(guò)程中，了解和運(yùn)用心智模式至關(guān)重要。通過(guò)深入洞察用戶的心智模式，我們可以創(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)未來(lái)將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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ì)( www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、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ì)公司

評(píng)論(0) 瀏覽(854)

272024-3

帶你了解全案策劃設(shè)計(jì)流程

鶴鶴

全案策劃設(shè)計(jì)是指在市場(chǎng)營(yíng)銷領(lǐng)域中，為一個(gè)項(xiàng)目或品牌提供全方位的策劃和執(zhí)行服務(wù)。它涵蓋了從市場(chǎng)調(diào)研、品牌定位、目標(biāo)受眾分析、營(yíng)銷策略制定、創(chuàng)意設(shè)計(jì)、媒體選擇到推廣活動(dòng)執(zhí)行等一系列環(huán)節(jié)。全案策劃設(shè)計(jì)的核心理念在于不僅解決企業(yè)短期的業(yè)績(jī)問(wèn)題同時(shí)也解決企業(yè)的長(zhǎng)期經(jīng)營(yíng)管理問(wèn)題。

評(píng)論(0) 瀏覽(934)

262024-3

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

前端達(dá)人

今天我們繼續(xù)用WHEE，帶你玩轉(zhuǎn)AI實(shí)操，設(shè)計(jì)春天出行啟動(dòng)頁(yè)運(yùn)營(yíng)海報(bào)！

這次的主題是春天出行！

（文末已附上同款配方鏈接）

Part 01

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

第一，先找一下靈感參考圖

第二，從三個(gè)方向來(lái)分析

版式
元素
色調(diào)

收集靈感圖時(shí)，有4點(diǎn)要注意

風(fēng)格：整體風(fēng)格是否符合我們的主題和目標(biāo)用戶群？
版式：版式是否清晰、易讀？
元素：運(yùn)用的元素是否與主題相關(guān)？
色彩：色彩搭配是否和諧、美觀？

我們先來(lái)看一下“春天”

-版式

從版式上面來(lái)看一下他們共同的特征，基本上都是一個(gè)上下結(jié)構(gòu)的版式特征

這種結(jié)構(gòu)簡(jiǎn)單明了，合適各種類型的內(nèi)容

上方主標(biāo)題，下方logo落款，這種排版方式我感覺(jué)是最穩(wěn)的一種結(jié)構(gòu)

即使是新人也能很容易出排版效果

標(biāo)題的排版方式呢,有橫向排版和豎向排版

它除了使用常規(guī)的黑體字

還有手寫(xiě)體，我感覺(jué)手寫(xiě)體更加符合主題

-元素

從元素結(jié)構(gòu)來(lái)看

天空，河流，山川，陽(yáng)光、花草等等

這些元素能夠讓人聯(lián)想到春天的清新、活力和愉悅，增加了海報(bào)的吸引力和代表性

-色調(diào)

色調(diào)呢基本也是以藍(lán)色，白色，綠色為主旋律

也就是陽(yáng)光、白云、綠色植物

接著來(lái)看看“出行”

-元素

元素呢也是在上面“春天”的基礎(chǔ)上面

多出車，人，露營(yíng)等周邊關(guān)于戶外的元素

這些元素能夠更加生動(dòng)地展現(xiàn)春季戶外活動(dòng)的場(chǎng)景和氛圍

-色調(diào)

色調(diào)也基本藍(lán)、白、綠

這個(gè)主題我覺(jué)得還是要有生機(jī)感、有活力一點(diǎn)的色調(diào)才對(duì)

總結(jié)設(shè)計(jì)方向和關(guān)健詞提取

版式

整體的版式規(guī)劃采用上下的結(jié)構(gòu)

主標(biāo)題放在上方，橫排版，用手寫(xiě)黑體

關(guān)鍵詞

核心詞：草地，拖車、車輛、山川

效果詞：可愛(ài)的卡通設(shè)計(jì)、夢(mèng)幻的視覺(jué)效果、鮮艷的色彩

Part 02

接下我們看一下WHEE的參數(shù)

提示詞、模型這里維持默認(rèn)就好

當(dāng)然也還可以使用它的智能聯(lián)想功能

看看有什么新靈感，亦或者是反向詞等等

風(fēng)格模型

在模型商店里面，這里我用了citypop的風(fēng)格模型

當(dāng)然這里面還有很多的模型，比如新中式風(fēng)格，工筆畫(huà)盲盒等等

所以在關(guān)鍵詞里就不需要在寫(xiě)風(fēng)格的關(guān)鍵詞了

直接選擇相對(duì)應(yīng)的風(fēng)格模型會(huì)更加高效率

出來(lái)的畫(huà)面結(jié)果也更加接近目標(biāo)視覺(jué)

參數(shù)這里保持默認(rèn)就好

我們第一次跑圖主要還是測(cè)試關(guān)鍵詞

后續(xù)看情況在進(jìn)行調(diào)整

這是我一共刷了兩次圖

從呈現(xiàn)的結(jié)果上面來(lái)看

第一排比較符合想要的感覺(jué)

畫(huà)面上方也好做文字的排版

添加關(guān)鍵詞“露營(yíng)、帳篷”

氛圍的感覺(jué)還是少了一點(diǎn)，因?yàn)樯倭寺稜I(yíng)和帳篷的元素

我們可以在右側(cè)這里，選“重新編輯”按鈕

這樣我們就可以延續(xù)之前的設(shè)置繼續(xù)編輯

然后我們把露營(yíng)和帳篷關(guān)鍵詞加上，其它不變

從結(jié)果來(lái)看第一張有帳篷的氛圍更好

第三張和第四張有點(diǎn)脫離了

但是第三張?zhí)幚硪幌履脕?lái)做彈窗感覺(jué)效果也會(huì)非常好

然后我們?cè)谟覀?cè)這個(gè)放大一下像素

這樣就可以得到一個(gè)更高清的分辨率

Part 03

接著我們來(lái)做一下主標(biāo)題的字體設(shè)計(jì)

就用手寫(xiě)黑體

我們先找一些毛筆字字形作為筆畫(huà)墊字

用鋼筆工具描出字形（這里先以春字為例）

我們挑選出重要的筆畫(huà)特征就好

其實(shí)是不需要跟原來(lái)的一樣

這樣會(huì)更有靈性

比如這里“春”字，上部首里的三橫

我這里只要第三橫連筆的特征

后面的幾個(gè)字也是以此類推

描繪完之后呢，我們加一粗一點(diǎn)描邊的大小

同時(shí)將端點(diǎn)和邊角都設(shè)為平頭

基本的字體結(jié)構(gòu)完成了

下一步就是細(xì)節(jié)的調(diào)整了

首先調(diào)整一下字間距

排版的話，我給它是上下錯(cuò)落

這樣會(huì)給人比較輕松的感覺(jué)

整理細(xì)節(jié)的話，就需要注意

筆畫(huà)之間的關(guān)系和空間感

例如“春”字上部首的第三橫與“日”中間那一橫

“出”和“行”的連接，以及它們相互之間的關(guān)系

完成主標(biāo)題的設(shè)計(jì)之后，我們先來(lái)對(duì)畫(huà)面進(jìn)行二次構(gòu)圖

天空部份我們不需要太多

第一是文案放在上方識(shí)別度較低

第二放大主體元素露營(yíng)車和帳篷后，它也能夠更好的突出主題氛圍

按照原先的計(jì)劃做上下結(jié)構(gòu)的版式設(shè)計(jì)

上面我們放主標(biāo)題文案信息

但是單看著主標(biāo)題設(shè)計(jì)還不夠豐富

所以需要在添加一些細(xì)節(jié)

在“日”字上方和“出行”下方

我們?cè)谟梦陌缸龀汕€跟隨字形弧度

同時(shí)他們也是相互呼應(yīng)的

描述信息直接放在主標(biāo)題下方

居中對(duì)齊的樣式就好

下面就放輔助的信息

同時(shí)也是居中對(duì)齊的樣式

這樣上下就有元素關(guān)系的呼應(yīng)

統(tǒng)一的居中對(duì)齊的樣式

也會(huì)讓文字閱讀效率大大提高

最后在放入一些固定落款的元素就完成啦～

Part 04

總結(jié)

1. 設(shè)計(jì)方向和關(guān)鍵詞提取

通過(guò)收集和分析同類題材，得出設(shè)計(jì)方向和關(guān)鍵詞

前期的方向確定是很重要的，有效的方向可以減少后期改稿

2. 視覺(jué)風(fēng)格

選擇對(duì)應(yīng)的風(fēng)格模型，得到想要的視覺(jué)風(fēng)格

WHEE模型庫(kù)中有很多風(fēng)格模型，這大大的提升了工作的效率

3. 主標(biāo)題字體設(shè)計(jì)

以毛筆字字形作為基礎(chǔ)字形，設(shè)計(jì)出主標(biāo)題

毛筆字結(jié)合黑體的感覺(jué)非常合適這輕松、放松類型畫(huà)面

4. 畫(huà)面排版

根據(jù)前期版式分析確定的方向，對(duì)畫(huà)面進(jìn)行文字排版

文案與文案之間，標(biāo)題字體設(shè)計(jì)

都需要注意它們之間的關(guān)系，以及統(tǒng)一性

今天的分享到這兒就結(jié)束啦

我們下篇見(jiàn)咯

以下同款配方鏈接

https://www.whee.com/ai/text-to-image?id=198427&styleModelId=3044&editorMode=advanced

https://www.whee.com/ai/text-to-image?id=198428&styleModelId=3044&editorMode=advanced

銀行金融軟件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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

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

評(píng)論(0) 瀏覽(962)

262024-3

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

前端達(dá)人

在數(shù)字化時(shí)代，動(dòng)效設(shè)計(jì)已經(jīng)成為吸引用戶眼球、提升用戶體驗(yàn)不可或缺的一部分，動(dòng)態(tài)元素的呈現(xiàn)效果，相比純圖片也新增了很多樂(lè)趣與驚喜，融入進(jìn)我們生活中的方方面面。

2023年，我們看到了許多令人眼前一亮的動(dòng)效設(shè)計(jì)形式，例如尼桑Ariya車機(jī)交互中，當(dāng)駕駛員啟動(dòng)車輛時(shí)，信息娛樂(lè)系統(tǒng)的啟動(dòng)界面會(huì)展示一個(gè)動(dòng)態(tài)的汽車品牌標(biāo)志，伴隨著流暢的過(guò)渡效果和音效，營(yíng)造出一種高科技感和品牌認(rèn)知度。

Current Time 0:00

Duration Time 0:08

Loaded: 0%

Progress: 0.00%

從微交互到增強(qiáng)現(xiàn)實(shí)，從三維動(dòng)畫(huà)到自然運(yùn)動(dòng)，隨著技術(shù)的不斷發(fā)展與用戶的不斷變化，動(dòng)效設(shè)計(jì)也在不斷演進(jìn)和創(chuàng)新。那未來(lái)的動(dòng)效設(shè)計(jì)會(huì)是怎樣的形式呢？在本文中我們一起來(lái)探討一下吧！

溫馨提示：以下圖片均來(lái)源網(wǎng)絡(luò)，GIF格式文件需要加載，感謝耐心閱讀～

一、2023年動(dòng)效設(shè)計(jì)表現(xiàn)形式

動(dòng)效設(shè)計(jì)在用戶界面、廣告營(yíng)銷、游戲開(kāi)發(fā)等領(lǐng)域都發(fā)揮著重要作用，常見(jiàn)的表現(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)。通過(guò)細(xì)膩的動(dòng)畫(huà)效果，提升用戶體驗(yàn)，增強(qiáng)用戶對(duì)界面的感知，使用戶操作更加直觀和愉悅。

在移動(dòng)應(yīng)用界面中，按鈕、導(dǎo)航欄、滑動(dòng)卡片等交互元素中常見(jiàn)微交互動(dòng)效，例如美團(tuán)小象超市，當(dāng)用戶點(diǎn)擊底部標(biāo)簽欄按鈕時(shí)，文字的顏色發(fā)生變化，圖標(biāo)右下角增加主題綠色填充，頁(yè)面同步切換，給予用戶直觀的反饋，告知其操作已被識(shí)別；

美團(tuán)-小象超市-手機(jī)錄屏

車機(jī)界面中，導(dǎo)航欄通常用于切換不同的功能頁(yè)面或查看系統(tǒng)狀態(tài)。例如問(wèn)界駕駛模式調(diào)節(jié)，用戶通過(guò)手勢(shì)操作導(dǎo)航欄顯示，按鈕高亮效果，駕駛模式以微交互動(dòng)效呈現(xiàn)預(yù)覽，以使界面切換更加流暢、直觀，同時(shí)幫助駕駛員更輕松地操作界面，提升駕駛安全性和用戶體驗(yàn)。

問(wèn)界駕駛模式，來(lái)源網(wǎng)絡(luò)

2、3D動(dòng)效

三維技術(shù)制作的動(dòng)畫(huà)效果，通常具有立體感和逼真感，能夠在屏幕上呈現(xiàn)出立體空間中的物體運(yùn)動(dòng)和變化。這種動(dòng)效在視覺(jué)上更加生動(dòng)、震撼，常用于影視特效、游戲開(kāi)發(fā)、虛擬現(xiàn)實(shí)等領(lǐng)域。

視頻來(lái)源網(wǎng)絡(luò)

在電影、電視劇等影視作品中，3D動(dòng)效常被用于創(chuàng)造出各種特效場(chǎng)景、人物動(dòng)作或者虛擬世界，增強(qiáng)視覺(jué)沖擊力和真實(shí)感。例如好萊塢大片《復(fù)仇者聯(lián)盟》中，各種特效場(chǎng)景和超級(jí)英雄的動(dòng)作都采用了大量的3D動(dòng)效制作，如鋼鐵俠的攻擊動(dòng)作、蜘蛛俠的飛行、蜘蛛網(wǎng)特效等，讓觀眾身臨其境地感受到了超級(jí)英雄的力量與魅力。

游戲開(kāi)發(fā)中，3D動(dòng)效被廣泛應(yīng)用于游戲角色的動(dòng)作表現(xiàn)、場(chǎng)景建模、特效設(shè)計(jì)等方面，提升游戲的沉浸感和視覺(jué)體驗(yàn)。

王者榮耀破曉版

車機(jī)界面中，可以通過(guò)3D動(dòng)效制作出全景效果，使駕駛員在車內(nèi)就能感受到真實(shí)的車外景象，增強(qiáng)駕駛體驗(yàn)和安全感。例如導(dǎo)航系統(tǒng)中，使用3D地圖和路況動(dòng)效，讓駕駛員更清晰地了解路況和行駛路徑。

Apollo anp3.0-障礙物繞行

3、數(shù)據(jù)可視化動(dòng)效

數(shù)據(jù)可視化動(dòng)效通過(guò)直觀的動(dòng)畫(huà)展示數(shù)據(jù)變化，增強(qiáng)數(shù)據(jù)的可讀性和理解性，使數(shù)據(jù)更生動(dòng)、直觀地呈現(xiàn)在用戶面前，幫助用戶更好地理解數(shù)據(jù)的含義和趨勢(shì)。這種動(dòng)效在金融、統(tǒng)計(jì)等領(lǐng)域尤為常見(jiàn)。

在商業(yè)領(lǐng)域中，數(shù)據(jù)可視化動(dòng)效常被用于制作各種分析報(bào)告、銷售演示等，通過(guò)動(dòng)態(tài)圖表、實(shí)時(shí)數(shù)據(jù)更新等動(dòng)態(tài)效果，可以讓數(shù)據(jù)報(bào)告更具吸引力和說(shuō)服力。例如企業(yè)的數(shù)據(jù)監(jiān)控面板中，可以使用數(shù)據(jù)可視化動(dòng)效來(lái)實(shí)時(shí)展示銷售額、用戶訪問(wèn)量、庫(kù)存情況等數(shù)據(jù)指標(biāo)的變化情況。

來(lái)自DataV-設(shè)計(jì)中心

并且通過(guò)動(dòng)態(tài)變化的圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果，可以讓管理者更及時(shí)地了解業(yè)務(wù)狀況，做出相應(yīng)的決策。

來(lái)自DataV-設(shè)計(jì)中心

在科學(xué)研究和教育領(lǐng)域，數(shù)據(jù)可視化動(dòng)效可以幫助科學(xué)家和教育工作者更好地展示研究成果和教學(xué)內(nèi)容。例如，通過(guò)動(dòng)畫(huà)效果展示監(jiān)測(cè)數(shù)據(jù)的動(dòng)態(tài)變化、預(yù)警統(tǒng)計(jì)等，可以使抽象的概念更具體化、更易于理解。

來(lái)自DataV-設(shè)計(jì)中心

車機(jī)界面中，可以通過(guò)數(shù)據(jù)可視化動(dòng)效來(lái)展示車輛的駕駛數(shù)據(jù)，如車速、油耗、行駛里程等。例如，通過(guò)動(dòng)態(tài)圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果，可以讓駕駛員更清晰地了解車輛的行駛情況，幫助其做出更安全、更經(jīng)濟(jì)的駕駛決策。

@ Musemind UI/UX Agency，dribbble

4、場(chǎng)景化動(dòng)效

場(chǎng)景化動(dòng)效通過(guò)模擬真實(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

車機(jī)界面中，我們也能看到場(chǎng)景化動(dòng)效展示駕駛模擬場(chǎng)景，幫助駕駛員更直觀地了解車輛的行駛狀態(tài)和安全提示。例如導(dǎo)航系統(tǒng)中，展示車輛在雨天、雪天或夜間等不同路況下的行駛情況，以提醒駕駛員注意安全駕駛。

HUDWAY Drive，來(lái)源網(wǎng)絡(luò)

二、2024年動(dòng)效設(shè)計(jì)發(fā)展方向

2023年動(dòng)效設(shè)計(jì)不僅追求美觀，更注重與用戶的深度溝通。每一個(gè)動(dòng)效都在講述品牌故事，引導(dǎo)操作，提升易用性和趣味性。站在這個(gè)時(shí)間節(jié)點(diǎn)上，我們不禁要思考：接下來(lái)的一年，動(dòng)效設(shè)計(jì)又將如何進(jìn)化？它將如何繼續(xù)深化與用戶的互動(dòng)，提升整體的用戶體驗(yàn)?zāi)兀?/div>

1、智能化動(dòng)效

隨著人工智能技術(shù)的不斷發(fā)展，利用人工智能（AI）技術(shù)或者智能算法來(lái)設(shè)計(jì)和生成動(dòng)畫(huà)效果，以實(shí)現(xiàn)動(dòng)效的智能化、個(gè)性化或自適應(yīng)。這類動(dòng)效可以根據(jù)用戶的行為、喜好或者環(huán)境變化實(shí)時(shí)調(diào)整，以提供更符合用戶需求和情境的動(dòng)畫(huà)體驗(yàn)。

音樂(lè)專屬推送

在移動(dòng)應(yīng)用、網(wǎng)頁(yè)設(shè)計(jì)等界面中，可以利用智能化動(dòng)效來(lái)實(shí)現(xiàn)智能交互界面，根據(jù)用戶的操作習(xí)慣和需求動(dòng)態(tài)調(diào)整動(dòng)畫(huà)效果。例如，蘋(píng)果音樂(lè)專屬推送，根據(jù)我的瀏覽、檢索等行為和歌曲收藏、喜好等，智能調(diào)整動(dòng)態(tài)加載的內(nèi)容，建立我的專注音樂(lè)空間，提升我整體的使用體驗(yàn)和滿意度。

2024款小鵬G9 超智駕豪華純電SUV，小鵬汽車官網(wǎng)

在車機(jī)界面中，可以利用智能化動(dòng)效設(shè)計(jì)車載智能助理系統(tǒng)，根據(jù)車輛狀態(tài)、道路情況和駕駛員行為實(shí)時(shí)調(diào)整動(dòng)畫(huà)效果，提供更智能、更安全的駕駛輔助功能。例如，根據(jù)車輛的自動(dòng)駕駛狀態(tài)實(shí)時(shí)調(diào)整駕駛模擬場(chǎng)景的動(dòng)畫(huà)效果，幫助駕駛員更好地理解車輛的行駛情況和駕駛狀態(tài)。

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)效成為熱門(mén)話題。越來(lái)越多的行業(yè)開(kāi)始關(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)。

虛擬試衣間

@Amol Arora

用戶可以利用增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)融合技術(shù)，在現(xiàn)實(shí)環(huán)境中體驗(yàn)虛擬試衣間。通過(guò)智能設(shè)備查看虛擬衣服和配飾，以便在不實(shí)際試穿的情況下預(yù)覽其外觀和適合度。

虛擬家居設(shè)計(jì)

@ 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

在車機(jī)場(chǎng)景中，汽車制造商可為客戶提供汽車內(nèi)容定制體驗(yàn)，客戶通過(guò)AR應(yīng)用或VR頭盔在虛擬環(huán)境中預(yù)覽汽車內(nèi)部的不同配置和顏色方案，并根據(jù)個(gè)人喜好進(jìn)行定制選擇。

Acura Parts & Service

關(guān)于車輛維修和保養(yǎng)方面，通過(guò)AR應(yīng)用，車主可以在現(xiàn)實(shí)車輛上查看虛擬的維修部件和保養(yǎng)步驟，以便更容易地進(jìn)行維護(hù)保養(yǎng)。

The future of AR in Cars，Behance

同時(shí)也可應(yīng)用于駕駛輔助和車載娛樂(lè)，例如智能導(dǎo)航、虛擬HUD、駕駛模擬和增強(qiáng)現(xiàn)實(shí)車載娛樂(lè)，進(jìn)一步提升車機(jī)系統(tǒng)的智能化水平和用戶體驗(yàn)，為駕駛員和乘客帶來(lái)更安全、便捷、有趣的車載生活體驗(yàn)。

3、交互式動(dòng)效

交互式動(dòng)效在2024年仍會(huì)繼續(xù)保持流行，并有望進(jìn)一步發(fā)展，使用戶能夠更直觀地參與到動(dòng)效的生成和表現(xiàn)中。例如在車機(jī)系統(tǒng)中，通過(guò)交互式動(dòng)效顯示車輛的駕駛狀態(tài)、周圍環(huán)境和導(dǎo)航路線等信息，駕駛員可以通過(guò)觸摸屏或語(yǔ)音指令與系統(tǒng)進(jìn)行交互，調(diào)整設(shè)置并獲取所需信息，提升駕駛安全和便捷性。

UI Motion Reel-百度Apollo，@ SeanCham

使用手勢(shì)控制技術(shù)，駕駛員和乘客可以通過(guò)手勢(shì)在車內(nèi)控制屏幕顯示和功能操作，例如多屏影音同步、開(kāi)關(guān)車窗等，提高駕駛員的操作便捷性和安全性。

Li L9, Flagship Intelligent Cockpit.

4、環(huán)保與可持續(xù)性動(dòng)效

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)注和青睞。例如通過(guò)動(dòng)效設(shè)計(jì)呈現(xiàn)城市綠色化規(guī)劃的效果，城市綠道、綠色建筑等，向用戶展示城市環(huán)境的改善和生態(tài)環(huán)境的保護(hù)。

@ Ahmad Sulaiman

在車機(jī)界面中，設(shè)計(jì)能源監(jiān)測(cè)動(dòng)效，顯示車輛的能源利用情況，包括電池電量、油耗情況等，提醒駕駛員合理使用能源，節(jié)約能源資源。

5、跨界融合動(dòng)效

未來(lái)的動(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

例如在品牌推廣中，混合媒體新形式，模糊現(xiàn)實(shí)世界和虛擬世界的界限，Nike結(jié)合了實(shí)拍場(chǎng)景視頻、草圖、模型等形式的融合，創(chuàng)造跳出屏幕的動(dòng)態(tài)內(nèi)容。

來(lái)源網(wǎng)絡(luò)

車機(jī)系統(tǒng)中，應(yīng)用全息投影技術(shù)，將導(dǎo)航地圖以立體全息的形式顯示在車內(nèi)，提供更直觀、更生動(dòng)的導(dǎo)航體驗(yàn)；

Waymo cars，Google Design

Waymo汽車收集了大量關(guān)于周圍物體和交通模式的數(shù)據(jù)，反饋乘客看到的是整潔的視覺(jué)圖像和清晰標(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)效作品，為用戶帶來(lái)更豐富、生動(dòng)和愉悅的體驗(yàn)。同時(shí)，我們也需要關(guān)注環(huán)保、可持續(xù)性等社會(huì)問(wèn)題，積極推動(dòng)動(dòng)效設(shè)計(jì)的綠色發(fā)展。

以上視頻、圖片均來(lái)源網(wǎng)絡(luò)，若侵可聯(lián)系修改刪除，歡迎交流探討，謝謝～

銀行金融軟件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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

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

評(píng)論(0) 瀏覽(1219)

252024-3

除了Sora，這8大AI工具值得每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理嘗試！

博博

近日，全球科技圈最火的熱點(diǎn)非Sora莫屬，它是OpenAI發(fā)布的首個(gè)文生視頻模型Sora，其視頻生成能力、效果呈現(xiàn)的成熟度震撼了全世界。有人說(shuō)，這是視頻生成領(lǐng)域的iPhone moment，AGI（通用人工智能）又向前劃了一個(gè)時(shí)代。

除了Sora，這8大AI工具值得每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理嘗試！

Sora的使用非常簡(jiǎn)單，與ChatGPT一樣，只需要輸入合適的prompt（提示詞），它就能跟根據(jù)文本指令創(chuàng)建視頻。

此前也有一些AI生成視頻工具，但大都只能生成10秒以內(nèi)，還“卡成 PPT”，但 Sora 彎道超車，直接將時(shí)長(zhǎng)拉到 60 秒。這個(gè)突破相當(dāng)厲害，畢竟時(shí)間越長(zhǎng)，內(nèi)容越復(fù)雜，想表達(dá)準(zhǔn)確把控好節(jié)奏難上加難。

Sora生成的視頻畫(huà)面截圖 | 東京街頭的時(shí)尚女性

Sora生成的視頻畫(huà)面截圖 | 白雪皚皚草地上的猛犸象

更厲害的是，根據(jù)Sora技術(shù)報(bào)告的介紹，Sora不僅可以理解用戶在提示中所要求的內(nèi)容，還能理解這些內(nèi)容在物理世界中的存在方式。因此，它生成的視頻不僅逼真，還包含精細(xì)復(fù)雜的場(chǎng)景、生動(dòng)的角色表情以及復(fù)雜的鏡頭運(yùn)動(dòng)。

Sora生成的視頻截取 | 穿過(guò)郊區(qū)的火車車窗上的倒影

不少人高呼影視行業(yè)變天了，明星即將失業(yè)，有網(wǎng)友甚至把美國(guó)電影工業(yè)的象征Hollywood（好萊塢）改成了這樣：

其實(shí)，不止影視行業(yè)，包括教育、營(yíng)銷、互聯(lián)網(wǎng)甚至所有行業(yè)都會(huì)或多或少受到影響。

作為在互聯(lián)網(wǎng)浸潤(rùn)多年的“老油條”來(lái)說(shuō)，筆者最近一直在思考，Sora等AI工具對(duì)我們究竟是機(jī)會(huì)還是挑戰(zhàn)？個(gè)人認(rèn)為，機(jī)會(huì)大于挑戰(zhàn)。

比如，對(duì)產(chǎn)品經(jīng)理和UX設(shè)計(jì)師來(lái)說(shuō)，可以考慮怎么把Sora的能力用到自己的產(chǎn)品上去：一款社區(qū)產(chǎn)品，可以通過(guò)Sora快速輸出大量視頻內(nèi)容；

一款教育類產(chǎn)品，可以通過(guò)Sora生成定制化的教學(xué)視頻；

一款新聞APP或者視頻網(wǎng)站，可以利用Sora進(jìn)行個(gè)性化推薦；

……

不過(guò)這一切的前提是，你必須掌握AI。

除了上述提到的AI生成視頻工具Sora，筆者還總結(jié)了很多優(yōu)秀的AI工具，這些工具能大大幫助我們提升工作效率，生成創(chuàng)意靈感，一起來(lái)看看吧~

1、小摹AI

小摹AI是一款集成了人工智能技術(shù)的產(chǎn)品設(shè)計(jì)工具，能夠根據(jù)文本指令輕松生成可編輯的原型圖，對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)可謂解放了生產(chǎn)力！

官網(wǎng)：

https://www.mockplus.cn/ai

主要功能及亮點(diǎn)：

目前有智能原型、智能文本、智能圖片、智能翻譯和智能表格五大功能，能有效地提升設(shè)計(jì)效率，沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)也能輕松上手哦。

1）智能原型：根據(jù)用戶的描述，智能生成一張?jiān)驮O(shè)計(jì)頁(yè)面。

2）智能文本：根據(jù)用戶的描述，智能生成一段文本內(nèi)容，對(duì)寫(xiě)產(chǎn)品需求文檔很有幫助。

3）智能翻譯：有“畫(huà)板翻譯”和“輸入內(nèi)容”兩項(xiàng)子功能，可以輕松地實(shí)現(xiàn)整頁(yè)內(nèi)容的翻譯，也可以輸入內(nèi)容進(jìn)行翻譯。

價(jià)格：

現(xiàn)階段可免費(fèi)使用

推薦理由：

小摹AI界面簡(jiǎn)潔，上手非常容易，它最大的亮點(diǎn)是利用AI優(yōu)化設(shè)計(jì)流程，快速實(shí)現(xiàn)從概念到原型的轉(zhuǎn)變，大幅度提升了產(chǎn)品經(jīng)理和設(shè)計(jì)師的工作效率！

推薦評(píng)級(jí)：

?????

2、Galileo AI

Galileo AI也是一個(gè)AI設(shè)計(jì)工具，它能根據(jù)用戶的輸入智能創(chuàng)建UI設(shè)計(jì)，生成的界面清晰，間距、字體大小、圖片使用等方面都不錯(cuò)。另外，它還有個(gè)非常實(shí)用的功能，你可以將生成的設(shè)計(jì)導(dǎo)出到你的 Figma 中繼續(xù)編輯~

官網(wǎng)：https://www.usegalileo.ai/explore

主要功能及亮點(diǎn)：

1）即時(shí)設(shè)計(jì)生成：根據(jù)自然語(yǔ)言提示迅速生成復(fù)雜的UI設(shè)計(jì)。

2）AI生成的插圖和圖像：為設(shè)計(jì)添加AI生成的藝術(shù)元素，增強(qiáng)視覺(jué)吸引力。

3）完整的產(chǎn)品文案自動(dòng)化：利用大型語(yǔ)言模型自動(dòng)生成產(chǎn)品文案，節(jié)省設(shè)計(jì)師的時(shí)間和精力。

價(jià)格：

現(xiàn)階段免費(fèi)

推薦理由：

如果你想獲得一些靈感，想看到一些新鮮的設(shè)計(jì)，真的可以試試這個(gè)工具。

推薦評(píng)級(jí)：

????

3、Uizard

Uizard是一個(gè)基于Web的設(shè)計(jì)工具，用戶可通過(guò)它的AI技術(shù)快速創(chuàng)建網(wǎng)站界面，還能快速將手繪草圖轉(zhuǎn)換為交互式原型，提高設(shè)計(jì)效率和創(chuàng)新能力。

官網(wǎng)：https://uizard.io/

主要功能及亮點(diǎn)：

1）手繪轉(zhuǎn)數(shù)字原型：將紙上的草圖轉(zhuǎn)換為數(shù)字界面原型。

2）用戶界面自動(dòng)化設(shè)計(jì)：基于用戶輸入自動(dòng)生成設(shè)計(jì)元素和布局。

3）交互式原型創(chuàng)建：快速構(gòu)建可交互的原型，用于用戶測(cè)試和演示。

價(jià)格：

提供免費(fèi)試用版本，付費(fèi)版12美元/月起。

推薦理由：

Uizard是一款設(shè)計(jì)神器，它的AI功能，豐富的可復(fù)用模板和設(shè)計(jì)元素，能幫你節(jié)省大量時(shí)間。

推薦評(píng)級(jí)：

?????

4、Whimsical

Whimsical是一款多功能的在線設(shè)計(jì)工具，它可以幫助用戶完成思維導(dǎo)圖、流程圖、線框圖的制作，成品邏輯清晰，層次分明，還能幫助設(shè)計(jì)師及時(shí)標(biāo)記靈感，是一款萬(wàn)能的專業(yè)輔助設(shè)計(jì)工具。

官網(wǎng)：https://whimsical.com/home

主要功能及亮點(diǎn)：

1）上下文工具欄、可直接用于展示的輸出、無(wú)限畫(huà)布以及實(shí)時(shí)更新；

2）龐大的符號(hào)庫(kù)工具幫助用戶更好的完成設(shè)計(jì)操作；

3）Whimsical的AI功能可以快速生成圖表，用以直觀展示概念、思維導(dǎo)圖和網(wǎng)頁(yè)等內(nèi)容。

價(jià)格：

提供免費(fèi)版本，付費(fèi)版10美元/月起。

推薦理由：

Whimsical是一款全能繪制工具，其中還有非常龐大的符號(hào)庫(kù)工具，能幫助你更好更快地的完成設(shè)計(jì)。

推薦評(píng)級(jí)：

????

5、Khroma AI

Khroma是一款利用人工智能技術(shù)來(lái)生成配色方案的工具，它能根據(jù)你的喜好和需求，提供高效、直觀的配色解決方案，并創(chuàng)建無(wú)限的調(diào)色板讓你盡情探索。

官網(wǎng)：https://www.khroma.co/

主要功能及亮點(diǎn)：

1）AI生成配色方案：根據(jù)用戶偏好和流行趨勢(shì)自動(dòng)生成配色方案。

2）自定義配色選項(xiàng)：允許用戶根據(jù)自己的需求調(diào)整和優(yōu)化配色。

3）保存和分享功能：用戶可以保存自己的配色方案，并與他人分享。

價(jià)格：

提供免費(fèi)版，進(jìn)階功能需付費(fèi)訂閱

推薦理由：

Khroma的深度學(xué)習(xí)算法很厲害，它能夠?qū)W習(xí)用戶的配色偏好，并根據(jù)流行趨勢(shì)提供創(chuàng)新的配色方案。

推薦評(píng)級(jí)：????

6、AI Colors

AI Colors是一個(gè)人工智能色彩調(diào)色板生成器，它可以根據(jù)你的描述生成貼心的配色方案，同時(shí)你也可以參考提供的配色案例，每一種配色方案都有對(duì)應(yīng)的效果展示，讓你能夠快速找到想要自己的配色方案。

官網(wǎng)：https://aicolors.co/

主要功能及亮點(diǎn)：

1）提供四種配圖案例，分別是移動(dòng)應(yīng)用、儀表盤(pán)、落地頁(yè)、作品集；

2）單擊復(fù)制顏色或者直接導(dǎo)出配色方案，不喜歡的顏色還可以手動(dòng)修改。

推薦理由：

通過(guò)AI Colors，你可以輕松生成調(diào)色板，并將其應(yīng)用于產(chǎn)品界面，查看它們的配色效果，非常適合希望輕松掌握調(diào)色板的新手。

推薦評(píng)級(jí)：

???

7、Fontjoy

Fontjoy是一個(gè)幫助設(shè)計(jì)師選擇最佳字體組合的工具，它可以讓用戶在一次點(diǎn)擊中生成字體組合，還可以混合和匹配不同的字體，達(dá)到完美組合效果。

官網(wǎng)：https://fontjoy.com/

主要功能及亮點(diǎn)：

1）幫助用戶調(diào)整字體外觀，還有字體的類型、大小、顏色等

2）豐富的字體資源：包括中文字體、英文字體、日文字體等；

推薦理由：

只需點(diǎn)擊生成，就能看到不同的字體，讓字體搭配毫不費(fèi)力。

推薦評(píng)級(jí)：

???

8、Huemint

Huemint是一個(gè)內(nèi)置AI色彩模型的在線配色網(wǎng)站，它通過(guò)AI技術(shù)幫助用戶快速生成吸引人的配色方案，你還可通過(guò)調(diào)節(jié)滑塊控制配色方案的對(duì)比度，適用于設(shè)計(jì)師和創(chuàng)意專業(yè)人士。

官網(wǎng)：https://huemint.com/brand-intersection/