欢乐颂第一季,古风名字,武道至尊帝临小说

首頁

152024-4

認識“增長設計”

前端達人

一些從產品/運營設計角度對用戶側增量的思考，希望分享對大家能有所幫助。文中如理解有誤，歡迎交流指正。

增長設計其實已經不是特別新穎的概念，伴隨互聯(lián)網(wǎng)載體的發(fā)展，我們關于用戶增長也是在不斷的迭代的。

在導入期和成長期，運營手段側重利益驅動，通過補貼/紅包等短平快的推廣活動快速獲取用戶；當產品積累了大量注冊用戶，進入漫長的成熟期，持續(xù)促進用戶活躍就成為更加重要的目標。

今天，我們來簡單的聊聊什么是“增長設計”，日常的產品/運營設計中，如何利用增長設計做好用戶的激活與留存轉化。

以往的——“AARRR”增長策略模型

我們先來簡單解析下這個模型。

首先第一個環(huán)節(jié)（Acquisition）：獲取用戶

簡單來說，就是如何讓用戶發(fā)現(xiàn)或接觸我們的產品，產品的用戶增量，一定是長期且持續(xù)的不斷的設法獲取新用戶。

第二個環(huán)節(jié)（Activation）：用戶激活

完成第一步流量獲取之后，下一步要做動作的就是激活用戶了，因為在現(xiàn)在這個快節(jié)奏時代，人們的記憶力太短暫了，關注力也在變弱。而被拉新過來的用戶，不見得就能成為是你的用戶，所以需要讓用戶在短時間內產生興趣并注冊使用產品。

第三個環(huán)節(jié):（retention ）提高留存

現(xiàn)在流量越來越貴的情況下，好不容易來的流量不好好加以利用簡直是浪費，如果用戶成功激活之后，使用一次產品之后就流失，那單個用戶的成本特太高了，所以為了拉低獲客成本，我們就要想辦法讓用戶持續(xù)性的來活躍。提升粘性做好留存。

第四個環(huán)節(jié)：（revenue）商業(yè)變現(xiàn)

在完成前三個環(huán)節(jié)之后，也就是如何讓用戶付費，讓產品和服務產生商業(yè)價值和營收。

最后一個環(huán)節(jié)：（referral）推薦分享

分享推薦，是用戶的一種自我傳播行為，通常來說就是利用一個事件來吸引用戶主動分享，以達到一傳十，十傳百的效果。社交電商玩的就是這個套路，拼多多直表示：這活我熟，我天天干，比如用邀請多少好友點鏈接可以提現(xiàn)100現(xiàn)金，砍一刀免費領取獎品等等。

如今的——

“RARRA”增長策略模型

如今的增長模型有何區(qū)別？

以 C 端產品為典型

在當下的互聯(lián)網(wǎng)市場中，大多產品都會有一倆個或多個競爭對手。如果C端用戶留存率不佳，用戶生命周期不能拉長，就算獲客端導入足夠的用戶量，但用戶流失可能也同樣的快。因為用戶信息獲取的渠道變得簡單，而且選擇變多了。用戶很快就會流失或者被吸引到其他競品上。

所以當下每個產品都開始注重和思考用戶留存與培養(yǎng)用戶忠誠度的問題，留存逐漸顯現(xiàn)出極高的戰(zhàn)略地位，因而也就漸漸的出現(xiàn)了以用戶留存主導的增長策略。

我們設計師要想所做的用戶增長肯定不是去街上發(fā)個小廣告，去地鐵上拿著產品的下載二維碼讓用戶去下載我們的產品，我們設計師著手的設計增長范圍還是從用戶體驗去入手，回歸到產品功能設計和體驗提升上。

例如，公司現(xiàn)在想要提升某款產品的銷量，作為設計師做方案輸出的時候肯定不會是建議讓公司去請個明星代言來吸引用戶下單之類的。

設計師的增長觀一定是基于產品本身

，我們所要思考的應該是如何讓用戶快速認識我們的產品，悉知我們產品的優(yōu)勢和價值，縮短路徑下單路徑，便利流暢讓用戶能成交，盡量讓用戶有優(yōu)秀的使用體驗從而助力用戶的數(shù)據(jù)增長。

-------------------------------------------------------------------------

人是社交型的集合體，包括社交反饋、伙伴關系，甚至是從眾和競爭心理。當你看到朋友

曬出某些技能、珍貴的物品或者靚麗的照片，你也會想跟他一樣，這一驅動力也反映了我們?yōu)槭裁瓷鷣砭推珢叟c我們有關的人。

舉個例子，假設我是一個喜歡閱讀的用戶。

當我打開微信讀書，APP告訴我，作為我的微信好友的“他/她”同樣在使用著微信讀書，并且他還在閱讀當初我看過的“硅谷鋼鐵俠”這本了解埃隆•馬斯克最全面、最真實、最經典讀本。

這時你會發(fā)現(xiàn)，原來身邊有人也對這本書這么感興趣，從而激發(fā)用戶對這個微信讀書這款產品的認同感。同時這個APP里肯定能找到更多的優(yōu)秀讀物，從而從動力上強化了用戶對產品使用行為。

APP內的紅包激勵手段

——燒錢要燒得明明白白，不同的用戶的“精細化燒法”

1.新用戶紅包：拉新激活

在用戶首次接觸產品，也就是用戶新鮮感最高的時候，新用戶的大額紅包有利于快速激活用戶的注冊行為，讓新用戶快速熟悉使用流程，盡快完成第一單，將新用戶盡快轉化成有效用戶。

2.滿減限時紅包：用戶促活

顧名思義，這類紅包具有時效性。要求用戶在指定的時間段內使用紅包，過期紅包則失效。這類贈送的紅包目的是給用戶低成本薅羊毛的機會，同時制造緊迫感，鼓勵并強化用戶產生盡快完成購買下單的行為，主要目標就是為了提升產品轉化率。

3.會員成長紅包：用戶粘性

用戶以優(yōu)惠的價格開通會員后，通過平臺每月贈送紅包從而可以享受更多優(yōu)惠或者獎勵金的形式，讓用戶每到飯點時就惦記著我還有個紅包沒用，如果不用就浪費了，從而增加用戶的沉默成本，能持續(xù)的讓用戶在固定時間內重復回歸產品，而達到保持用戶粘性的目的。

關于個性化推薦，提升用戶動力。

這里我們主要看一下保險行業(yè)。特別是互聯(lián)網(wǎng)保險，線上產品的銷售一定是產品找人，結合場景的方式，保險產品自動找人進行自我營銷。推薦保險的意義需要第一時間就被用戶所感知到，產品是非常符合他的需求的，這個時候才有可能高效的完成客戶轉化。

提升用戶動力之——游戲化

當產品積累了大量注冊用戶，進入漫長的成熟期，持續(xù)促進用戶活躍就成為更加重要的目標，用戶對簡單的商品宣傳（運營活動）容易感到乏味或無法提起持續(xù)參與的興趣，所以更多的會將運營活動包裝成一個簡單易懂的游戲去俘獲用戶的芳心。

比如人人都有的支付寶，常見的如：收集，養(yǎng)成，抽獎，種植...等系列游戲化增長玩法是其此階段的主要運營手段之一，在利益驅動的同時，加強游戲化的趣味體驗，取悅用戶、制造記憶點，更有利于黏住用戶、建立長期忠誠。

游戲化玩法尤其重要的一點就是任務體系，任務獎勵可以激勵人們采取行動，將用戶引導去體驗不同的頁面，它幫助用戶熟悉更多的APP功能和流程。更可以設置分享型的任務，讓用戶主動傳播產生裂變，這既是內容分發(fā)最有效的途徑，也是拉新促活的低成本實現(xiàn)方法。

-------------------------------------------------------------------------

上面說了做加法，那接下來我們聊聊如何做減法。

絕大數(shù)用戶剛接觸產品或工具時，都會有一部分人選擇離開，可能是注冊環(huán)節(jié)、功能指引環(huán)節(jié)等等，所以在這個階段對于用戶的激活和留存的最好方式就是幫產品做減法

-------------------------------------------------------------------------

當然，增長設計遠不止上面分享的這些。比如積分成就體系，完善獎勵機制，彈窗引導助推，弱化用戶的負面情緒....限于時間原因，今天暫時先分享到這

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

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

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

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

評論(0) 瀏覽(709)

102024-4

設計方法論 I 超全面的頁面分割設計指南

前端達人

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

探討頁面分割的藝術與技巧

，看看它是如何為你的設計增添魅力，提升用戶體驗的。

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

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

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

頁面分割的魅力在于其

多樣性和靈活性

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

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

分享目錄：

一、分割的常見樣式

二、線性分割

三、卡片分割

四、留白分割

五、總結

線性分割：

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

卡片分割：

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

留白分割：

主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然地將信息進行分組。這種留白的方式能夠為頁面增加呼吸感，降低視覺噪音，使設計看起來更簡潔。

近年來，設計趨勢從

“卡片式設計”轉向了“去線化設計”，

即傾向于使用留白分割而非過多的線條分割，以實現(xiàn)更為簡潔清晰的界面效果。設計師在選擇分割方式時，應

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

。這個選擇順序反映了設計界的一般原則，即在不影響信息傳達的前提下，盡可能保持設計的簡潔性。

線性分割的定義：

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

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

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

1.劃分區(qū)域：

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

2.區(qū)分內容：

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

3.引導視線：

線性分割可以引導用戶的視線，幫助他們更好地理解頁面內容。通過合理的線性分割設計，可以突出顯示重要的信息或元素，引導用戶關注到關鍵內容。

4.增強層次感：

線性分割可以增強頁面的層次感，使得頁面內容更加豐富、有深度。通過不同樣式的線性分割，可以區(qū)分不同的信息層級，幫助用戶更好地理解頁面結構和內容關系。

使用原則：

在使用分割線時，我們應遵循一些原則，以確保其有效地幫助用戶理解頁面的組成，同時避免過度使用帶來的視覺干擾。

1.分割線應當微妙而不過于顯眼。

它們在布局中應該容易被用戶注意到，但又不應成為焦點，以免分散用戶的注意力。

2.分割線應被視為次要的元素。

只有在留白等其他設計手法無法有效起到分割作用時，才考慮使用分割線。它們應當是布局中的輔助工具，而不是主導元素。

3.謹慎使用分割線。

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

圖片來源于參考文章

線性分割三種類型：

通欄分割線、內嵌分割線和中間分割線。

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

通欄分割線通常橫跨整個頁面寬度，用于分隔彼此完全獨立的內容區(qū)域。這種分割線在視覺上非常顯著，能夠清晰地劃分出不同的內容區(qū)塊，使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產品列表、服務介紹等獨立的內容區(qū)域。

2.內嵌分割線（Inset Dividers）：

內嵌分割線通常位于內容區(qū)域內部，用于分隔有錨點（如頭像、圖標等）的相關內容。這些錨點可以是圖片、符號或小的圖形元素，它們與分割線一起，幫助用戶更好地理解和區(qū)分內容。內嵌分割線常用于列表、卡片式布局、時間線等場景中，用于展示有關聯(lián)但不同類別的信息。

3.中間分割線（Middle Dividers）：

中間分割線位于兩個內容區(qū)域之間，用于分隔無錨點的相關內容。這種分割線通常比通欄分割線更細，更注重于在視覺上劃分空間，而不是強調內容的獨立性。中間分割線常用于文本段落之間、列表項之間或不同功能區(qū)域之間，以提供清晰的結構和層次。

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

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

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

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

因此，在

信息層級較簡單的情況下，我們可以靈活地選擇使用分割線或留白來進行信息分割

。通過調整留白間距，我們可以達到與分割線相似的效果，同時保持整體設計的簡潔和清晰。

為了提升屏效

，我們希望在一屏內展示盡可能多的信息。在這種情況下，分割線的設計顯得尤為重要，因為它們能夠

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

通過使用分割線，我們可以

將較多的信息條理化

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

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

在相同的信息布局下，分割線能夠將信息區(qū)域明確地劃分開來，

防止信息之間產生混淆或交叉

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

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

線性分割在移動端頁面設計中的應用場景廣泛，尤其是在

需要清晰劃分信息模塊時

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

線性分割還常用在各類

App的信息提示

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

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

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

在APP

需要用戶填寫信息和設置的表單頁面中

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

卡片分割的定義：

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

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

1.內容封裝：

卡片分割設計將相關內容或功能封裝在一個獨立的卡片內，使得每個卡片成為一個獨立的信息單元。這有助于保持頁面內容的清晰和整潔，方便用戶瀏覽和理解。

2.明確邊界

：每個卡片通常具有明確的邊界，通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個卡片在視覺上相對獨立，方便用戶進行區(qū)分和識別。

3.靈活布局：

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

4.強調重點：

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

卡片的基本構成：

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

卡片分割常見的類型：

卡片分割可分為

通欄卡片

和

非通欄卡片

1、通欄卡片：

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

2.非通欄卡片：

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

通欄卡片

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

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

非通欄卡片

通常采用帶圓角的設計形式

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

通過巧妙的投影設計以及前后顏色的精準設定，非通欄卡片成功地讓內容與背景之間

產生視覺空間感

，進一步強化了內容的立體感和層次感。這種設計技巧不僅提升了卡片的視覺吸引力，還使得用戶在瀏覽頁面時能夠更加輕松地

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

。

在頁面設計中，非通欄卡片的應用范圍十分廣泛。無論是用于展示文章、產品、圖片還是其他類型的內容，非通欄卡片都能夠通過其獨特的視覺效果和設計元素，為用戶帶來更加舒適、美觀的視覺體驗。同時，非通欄卡片還具有良好的

適應性和靈活性

，可以根據(jù)不同的設計需求和用戶習慣進行定制和調整，滿足不同場景下的應用需求。如下圖夸克“夸克日報”、APP Store“首頁”

選擇使用通欄分割線還是卡片分割，主要取決于你的設計目標和內容需求。以下是三個參考建議，幫助你做出更好的選擇：

1.當內容已有自然分割線時：

如果你的主題內容本身就已經有明確的分割線，比如列表項、段落分隔等，那么采用非通欄分割會是一個好選擇。卡片可以清晰地界定每個內容塊，使主題信息層次更加分明，提高用戶的閱讀效率。

2.當內容類型多樣且占據(jù)較大空間時：

如果單個主題內部包含了多種類型的內容，如文字、圖片、視頻等，且這些內容在垂直方向上占據(jù)了較大的空間（例如，內容長度超過屏幕高度的一半），使用非通欄分割會更加合適。卡片能夠有效地圈定內容范圍，為用戶提供一個明確的視覺邊界，幫助他們更好地理解和消化信息。

3.當需要增強橫向空間感時：

如果你希望擴展頁面的橫向空間，或者暗示用戶可以橫向滑動頁面查看更多內容，那么非通欄卡片會是更好的選擇。非通欄卡片的設計能夠利用橫向內容連續(xù)性原則，幫助用戶建立頁面可以橫向滑動的意識，從而提升頁面的互動性和用戶體驗。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。

卡片分割更適合圖文混排

卡片分割設計以其獨特的布局方式，成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內容統(tǒng)一呈現(xiàn)在一個界面中，

實現(xiàn)了內容的多樣性與統(tǒng)一性的結合

。這種設計不僅讓單屏區(qū)域能夠顯示更多內容，還通過合理的空間劃分，確保了文字和圖片之間的和諧共存，既維持了視覺的一致性，又

巧妙地平衡了文字和圖片的視覺強度

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

留白分割的定義：

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

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

1.突出重點信息：

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

2.提高可讀性：

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

3.增強設計感：

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

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

基于接近性法則

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

留白分割在

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

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

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

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司、銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

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

評論(0) 瀏覽(1102)

102024-4

產品設計中的心智模式：深度理解用戶需求與行為｜北京藍藍UI設計公司

前端達人

一、引言

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

二、什么是心智模式？

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

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

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

四、如何運用心智模式進行產品設計？

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

五、結語

在產品設計過程中，了解和運用心智模式至關重要。通過深入洞察用戶的心智模式，我們可以創(chuàng)造出更符合用戶需求的產品，提升用戶體驗和市場競爭力。因此，設計師應不斷提升對用戶心智模式的認知和理解，以更好地滿足用戶需求，推動產品的持續(xù)創(chuàng)新和發(fā)展。

藍藍未來將會持續(xù)在平臺上分享關于設計行業(yè)的文章。此外藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設計案例和設計素材等，歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

藍藍設計( www.z1277.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(710)

262024-3

AI實操：用WHEE輔助設計app啟動頁

前端達人

今天我們繼續(xù)用WHEE，帶你玩轉AI實操，設計春天出行啟動頁運營海報！

這次的主題是春天出行！

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

Part 01

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

第二，從三個方向來分析

版式
元素
色調

收集靈感圖時，有4點要注意

風格：整體風格是否符合我們的主題和目標用戶群？
版式：版式是否清晰、易讀？
元素：運用的元素是否與主題相關？
色彩：色彩搭配是否和諧、美觀？

我們先來看一下“春天”

-版式

從版式上面來看一下他們共同的特征，基本上都是一個上下結構的版式特征

這種結構簡單明了，合適各種類型的內容

上方主標題，下方logo落款，這種排版方式我感覺是最穩(wěn)的一種結構

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

標題的排版方式呢,有橫向排版和豎向排版

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

還有手寫體，我感覺手寫體更加符合主題

-元素

從元素結構來看

天空，河流，山川，陽光、花草等等

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

-色調

色調呢基本也是以藍色，白色，綠色為主旋律

也就是陽光、白云、綠色植物

接著來看看“出行”

-元素

元素呢也是在上面“春天”的基礎上面

多出車，人，露營等周邊關于戶外的元素

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

-色調

色調也基本藍、白、綠

這個主題我覺得還是要有生機感、有活力一點的色調才對

總結設計方向和關健詞提取

版式

整體的版式規(guī)劃采用上下的結構

主標題放在上方，橫排版，用手寫黑體

關鍵詞

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

效果詞：可愛的卡通設計、夢幻的視覺效果、鮮艷的色彩

Part 02

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

提示詞、模型這里維持默認就好

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

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

風格模型

在模型商店里面，這里我用了citypop的風格模型

當然這里面還有很多的模型，比如新中式風格，工筆畫盲盒等等

所以在關鍵詞里就不需要在寫風格的關鍵詞了

直接選擇相對應的風格模型會更加高效率

出來的畫面結果也更加接近目標視覺

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

我們第一次跑圖主要還是測試關鍵詞

后續(xù)看情況在進行調整

這是我一共刷了兩次圖

從呈現(xiàn)的結果上面來看

第一排比較符合想要的感覺

畫面上方也好做文字的排版

添加關鍵詞“露營、帳篷”

氛圍的感覺還是少了一點，因為少了露營和帳篷的元素

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

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

然后我們把露營和帳篷關鍵詞加上，其它不變

從結果來看第一張有帳篷的氛圍更好

第三張和第四張有點脫離了

但是第三張?zhí)幚硪幌履脕碜鰪棿案杏X效果也會非常好

然后我們在右側這個放大一下像素

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

Part 03

接著我們來做一下主標題的字體設計

就用手寫黑體

我們先找一些毛筆字字形作為筆畫墊字

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

我們挑選出重要的筆畫特征就好

其實是不需要跟原來的一樣

這樣會更有靈性

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

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

后面的幾個字也是以此類推

描繪完之后呢，我們加一粗一點描邊的大小

同時將端點和邊角都設為平頭

基本的字體結構完成了

下一步就是細節(jié)的調整了

首先調整一下字間距

排版的話，我給它是上下錯落

這樣會給人比較輕松的感覺

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

筆畫之間的關系和空間感

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

“出”和“行”的連接，以及它們相互之間的關系

完成主標題的設計之后，我們先來對畫面進行二次構圖

天空部份我們不需要太多

第一是文案放在上方識別度較低

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

按照原先的計劃做上下結構的版式設計

上面我們放主標題文案信息

但是單看著主標題設計還不夠豐富

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

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

我們在用文案做成曲線跟隨字形弧度

同時他們也是相互呼應的

描述信息直接放在主標題下方

居中對齊的樣式就好

下面就放輔助的信息

同時也是居中對齊的樣式

這樣上下就有元素關系的呼應

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

也會讓文字閱讀效率大大提高

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

Part 04

總結

1. 設計方向和關鍵詞提取

通過收集和分析同類題材，得出設計方向和關鍵詞

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

2. 視覺風格

選擇對應的風格模型，得到想要的視覺風格

WHEE模型庫中有很多風格模型，這大大的提升了工作的效率

3. 主標題字體設計

以毛筆字字形作為基礎字形，設計出主標題

毛筆字結合黑體的感覺非常合適這輕松、放松類型畫面

4. 畫面排版

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

文案與文案之間，標題字體設計

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

今天的分享到這兒就結束啦

我們下篇見咯

以下同款配方鏈接

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界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

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

評論(0) 瀏覽(753)

262024-3

2024年動效設計前瞻

前端達人

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

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

Current Time 0:00

Duration Time 0:08

Loaded: 0%

Progress: 0.00%

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

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

一、2023年動效設計表現(xiàn)形式

動效設計在用戶界面、廣告營銷、游戲開發(fā)等領域都發(fā)揮著重要作用，常見的表現(xiàn)形式有微交互動效、3D動效、數(shù)據(jù)可視化動效以及場景化動效。

1、微交互動效

在2023年，微交互動效成為了設計師們關注的焦點。通過細膩的動畫效果，提升用戶體驗，增強用戶對界面的感知，使用戶操作更加直觀和愉悅。

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

美團-小象超市-手機錄屏

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

問界駕駛模式，來源網(wǎng)絡

2、3D動效

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

視頻來源網(wǎng)絡

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

游戲開發(fā)中，3D動效被廣泛應用于游戲角色的動作表現(xiàn)、場景建模、特效設計等方面，提升游戲的沉浸感和視覺體驗。

王者榮耀破曉版

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

Apollo anp3.0-障礙物繞行

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

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

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

來自DataV-設計中心

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

來自DataV-設計中心

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

來自DataV-設計中心

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

@ Musemind UI/UX Agency，dribbble

4、場景化動效

場景化動效通過模擬真實世界的場景，讓用戶在虛擬空間中獲得更自然的交互體驗。產品展示或推廣中，場景化動效可以幫助展示產品的特點、功能和優(yōu)勢。例如，在歐萊雅巴黎振興霜互動 AR邀請卡，可以使用場景化動效展示產品的成分含量，以吸引消費者的注意力和興趣。

歐萊雅巴黎振興霜互動 AR 邀請卡，@KIVISENSE

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

HUDWAY Drive，來源網(wǎng)絡

二、2024年動效設計發(fā)展方向

2023年動效設計不僅追求美觀，更注重與用戶的深度溝通。每一個動效都在講述品牌故事，引導操作，提升易用性和趣味性。站在這個時間節(jié)點上，我們不禁要思考：接下來的一年，動效設計又將如何進化？它將如何繼續(xù)深化與用戶的互動，提升整體的用戶體驗呢？

1、智能化動效

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

音樂專屬推送

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

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

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

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

根據(jù)車內溫度和濕度調整空調和座椅加熱系統(tǒng)，實現(xiàn)智能化的溫度控制和舒適度提升。

2、增強現(xiàn)實（AR）和虛擬現(xiàn)實（VR）的融合

2016年至今，AR和VR技術的發(fā)展持續(xù)加速，增強現(xiàn)實和虛擬現(xiàn)實融合動效成為熱門話題。越來越多的行業(yè)開始關注和應用AR/VR技術，如教育、醫(yī)療、零售、汽車等領域，這種動效在現(xiàn)實環(huán)境中疊加虛擬物體和效果，使用戶能夠與虛擬內容進行互動，創(chuàng)造出更加豐富和沉浸式的體驗。

虛擬試衣間

@Amol Arora

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

虛擬家居設計

@ Bell'Arte Living - Estofados

利用AR/VR融合技術，用戶可以在現(xiàn)實空間中體驗虛擬家居設計，例如在現(xiàn)實環(huán)境中預覽家具、裝飾品等虛擬物體的擺放效果，并根據(jù)實際需要進行調整。

車機領域

@ Shutterstock

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

Acura Parts & Service

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

The future of AR in Cars，Behance

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

3、交互式動效

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

UI Motion Reel-百度Apollo，@ SeanCham

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

Li L9, Flagship Intelligent Cockpit.

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

International Competition for the Xinxiu District Masterplan Con，@ McGregor Coxall

隨著環(huán)保意識的日益增強，對于具有環(huán)保和可持續(xù)性理念的動效設計也將受到更多關注和青睞。例如通過動效設計呈現(xiàn)城市綠色化規(guī)劃的效果，城市綠道、綠色建筑等，向用戶展示城市環(huán)境的改善和生態(tài)環(huán)境的保護。

@ Ahmad Sulaiman

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

5、跨界融合動效

未來的動效設計也將更加注重跨界融合，設計師可以借鑒其他藝術領域的元素和創(chuàng)意，將不同領域的美學觀念融入到動效設計中，創(chuàng)造出新穎而富有創(chuàng)意的動效形式。

BTS - NB Numeric - NM1010 Tiago Lemos Signature Model

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

來源網(wǎng)絡

車機系統(tǒng)中，應用全息投影技術，將導航地圖以立體全息的形式顯示在車內，提供更直觀、更生動的導航體驗；

Waymo cars，Google Design

Waymo汽車收集了大量關于周圍物體和交通模式的數(shù)據(jù)，反饋乘客看到的是整潔的視覺圖像和清晰標記的行程更新，增強駕駛安全與便捷性。

總之，2024年的動效設計將繼續(xù)成為各行業(yè)中不可或缺的重要組成部分，呈現(xiàn)出更加多元化、智能化和個性化的特點。作為設計師，我們需要不斷學習和探索新的設計理念和技術手段，以創(chuàng)作出更加出色的動效作品，為用戶帶來更豐富、生動和愉悅的體驗。同時，我們也需要關注環(huán)保、可持續(xù)性等社會問題，積極推動動效設計的綠色發(fā)展。

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

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

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

評論(0) 瀏覽(988)

192024-3

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

前端達人

Current Time0:00

Duration Time0:05

Loaded: 0%

Progress: 0.00%

作者：121Jay

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

評論(0) 瀏覽(731)

192024-3

《UnitLife》APP界面/交互設計案例

前端達人

下面開始：

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

評論(0) 瀏覽(764)

182024-3

B端產品的C化該怎么去做？

前端達人

B端C化由來已久，概念化的東西怎么變?yōu)楝F(xiàn)實？阿魚帶你一步一步來...(ps:純干貨，有圖有真相)

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

評論(0) 瀏覽(675)

182024-3

今天來聊一聊視覺語言的體驗升級

前端達人

視覺表現(xiàn)不關乎體驗？拜托，信息的傳達都是靠眼睛的好吧，哈哈

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

評論(0) 瀏覽(633)

122024-3

如何利用動效打造B端的用戶體驗

前端達人

說到B端后臺產品，我們會想到業(yè)務復雜、信息龐大、用戶角色多、頁面層級深、使用門檻高等特征。這些特征讓后臺產品在設計時更強調“簡單直接”，無需多余的設計元素，相比之下，沒有C端產品有趣。而作為B端后臺設計師在工作中會面臨很多復雜場景的設計需求，有時候需求方未必能理解設計理念，會讓設計師陷入“頭禿”的狀態(tài)。針對B端后臺產品某些體驗問題，我們可以借助動效的力量去解決。

下面將結合工作經驗，以及線上文章，分享如何利用動效來提升B端后臺產品的體驗。

主要分為兩大塊：

使用動效不是為了炫技，而是輔助解決設計中發(fā)現(xiàn)的問題。我們要思考的是，眼下的問題結合動效能否達到1+1>2的解決效果。設計方案除了要得到需求方的認可，還要有開發(fā)團隊的支持。設計師做到從痛點中出發(fā)，于可行處落地，才是有效的設計。那什么場景下的問題可以考慮結合動效呢?

1、信息量折疊收納

B端業(yè)務的復雜程度決定了產品的信息體量，這也考驗著設計師設計頁面時，能為用戶在有限的空間里獲取多少信息。舉個例子，用戶的辦公設備是小型筆記本，它的屏幕小，用戶一屏看到的內容有限。這時需求方建議減少留白，壓縮空間，信息往上堆積，頁面最后會擁擠不堪。龐大的信息體量力求對用戶的吸收效率，也對設計造成困擾，針對這種情況我們可運用“折疊收納”法

應用案例1: 按鈕折疊

如果一個頁面的按鈕太多，可“折疊”按鈕。以下面的科目樹為例，每個科目有若干個功能按鈕，如按鈕全部展示，不利于用戶聚焦重要信息。用戶必定是先看科目標題，如有需要才對科目進行操作，基于這個思路可把按鈕折疊起來，待用戶鼠標懸浮至科目才出現(xiàn)按鈕。在恰當?shù)膱鼍跋聦粹o折疊，有助于精簡頁面結構。一個頁面按區(qū)域劃分功能區(qū)和信息區(qū)，信息區(qū)被文案鋪滿了，可簡化功能區(qū)的表現(xiàn)形式。比如按鈕和解釋文案，可對解釋文案進行收納，用戶鼠標懸浮上去顯示。對于用戶來說，一個按鈕的含義只要使用一次便清楚。

應用案例2: 內容折疊

B端后臺因信息量大有很多長頁面，這時可在用戶進行頁面滾動瀏覽時，根據(jù)用戶滾動的內容進行折疊。如下的篩選項占據(jù)了頁面頭部一定的空間，用戶滑到結果列表內容時，已選項固定在頂部精簡展示。

小結:通過“折疊收納法”優(yōu)化頁面布局，根據(jù)用戶的操作行為給予內容變化，幫助用戶降低信息量過大帶來的閱讀疲勞，也讓設計師在有限的設計空間里“堆積”信息。

2、對路徑進行引導，及時給與用戶反饋，提高效率

B端產品會有極其復雜的功能，這些功能通常用步驟條來拆分，引導用戶分步完成。面對復雜功能。需求方希望

在頁面的各個位置添加用法提示文案。但用戶并不想閱讀一串串文字，這時可結合用戶的操作行為，及時響應引導下一步操作。

應用案例1:

操作響應如下的這個頁面需要用戶把左邊的字段拖拽到右邊生成卡片。當用戶拖拽時，給予動效反饋讓用戶感知字段拖拽方向。這種可視可感知的方式幫助用戶快速掌握用法，提升效率。

應用案例2:引導響應

在工作中我們也許會接到類似的修改需求:“按鈕不夠突出，不夠大，要又大又突出”。你看完后心里想:“還不夠突出嗎，要這么大干什么呢?”這時沉住氣，分析修改的根本目的，它想要突出的目的是什么?

1、這個按鈕在整個頁面中承載極其重要的功能，視覺上用戶需立刻注意到2、點擊按鈕后的內容十分重要，希望增強點擊欲。

當用戶鼠標懸浮至按鈕時，及時響應引導，一個箭頭既起到醒目作用，也引導著用戶去往下一步。

小結: B端后臺頁面信息繁雜，功能多。通過動效幫助用戶在使用過程中增強反饋和引導，正確的引導能縮短用戶的操作路徑，提升效率。

3、增加情感化體驗

B端后臺產品大部分是給專業(yè)人員使用的，信息表單居多，頁面內容相似，比較單調。加入適當友好的情感化式效可以提升產品的趣味性，減少用戶使用的倦怠感。

應用案例1: Loading動效

常規(guī)的Loading動效通常是一個圓在轉圈，當用戶面對長時間加載時，一直盯著一個圈會產生焦慮感。情感化Loading動效可總結為兩類:

1、產品本身有一個IP形象，可圍繞IP進行創(chuàng)作。例如“加薪貓”，加載的時候貓咪追著錢幣奔跑，增加了跑步流汗的細節(jié)，提升它已經在努力加載的形象感;

2、根據(jù)Loading的文案進行拓展設計，提取文案元素，圖形場景化，分散用戶等待的焦慮。

應用案例2:化抽象為形象

有些B端產品的業(yè)務背景專業(yè)而又抽象，可借助動效的力量化繁為簡，化抽象為形象。以下面數(shù)據(jù)字典為例。用通過該字典進行與業(yè)務相關的字段查詢。該頁結構較簡單:搜索欄和熱詞入口。我結合模塊名稱，對特征進行具體物化，在頁面加入字典和放大鏡元素。通過物化讓用戶快速感知該模塊的作用。類似的大入口頁面也可以運用3D效果，它能讓物化更加立體。

比較常用的動效設計工具有: Ae、Principle、ProtoPie。這里分享一下我在工作中常用的并能解決大部分問題的工具。

1、Principle:快速制成交互動效演示Demo

Principle是一款只能用于Mac OS系統(tǒng)的交互設計工具，它的操作界面跟Sketch類似，學習成本較低。它搭配Sketch使用，能對界面做轉場過渡動效和一些細節(jié)的交與動效。當你想提出某個交互動效提案時，可用Princidle快速制成演示Demo，導出GIF或視頻給到需求方，讓他們快速明白你的想法及可行性后臺界面演示demo可直接選擇箭頭光標，呈現(xiàn)效果更貼合真實場景。

2、After Effect: 適合各種場景下的動效制作

AE是絕大UI設計師必備的動效制作工具。它支持Mac OS和Windows系統(tǒng)，其自身有著強大而豐富的特效庫。現(xiàn)在也能通過AEUX插件，把Sketch里的圖層直接導入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的圖形動效，比如Loading、lcon點擊動效等等。

小結: 設計師需要學習和掌握的軟件很多，軟件更新迭代的速度也很快。可選擇能解決工作中絕大設計需求的軟件精學，其余可在空閑時作為知識技能儲備來學習。

總結

做適合的動效為B端產品體驗賦能

當你在設計一款從0-1或是重構的B端后臺產品，你可重新定義設計風格、規(guī)范控件。當你是半途介入一款風格規(guī)范都已相當成熟的B端產品，通常遇到的問題較為繁瑣，可能是對一個按鈕、一個顏色、一句文案去精打細磨。這時設計師需提升產品全局觀，在設計過程中對遇到的問題層層剖析，洞悉設計的發(fā)力點，并在恰當?shù)膱鼍跋戮o貼產品特性和業(yè)務需求，提出恰到好處的動效方案，以小點出發(fā)，真正為產品的體驗賦能。

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

評論(0) 瀏覽(610)

« 1 ... 4 5 6 7 8 9 10 ... 77 »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.z1277.cn

国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

認識“增長設計”

設計方法論 I 超全面的頁面分割設計指南

產品設計中的心智模式：深度理解用戶需求與行為｜北京藍藍UI設計公司

AI實操：用WHEE輔助設計app啟動頁

2024年動效設計前瞻

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

《UnitLife》APP界面/交互設計案例

B端產品的C化該怎么去做？

今天來聊一聊視覺語言的體驗升級

如何利用動效打造B端的用戶體驗

分類

日歷

鏈接

個人資料

存檔