国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

首頁

餓了么「飯搭子」產品設計

資深UI設計者

飯搭子是餓了么APP平臺上線的一款好友之間分享飲食數據的玩法，基于智能ai的行業趨勢下結合新技術風口，結合平臺屬性通過營養數據分享的切入點，帶動小圈子提頻，實現引流價值；此外，高頻用戶訪問出現瓶頸，希望做用戶提頻，帶動用戶增量；餓了么的社交好友體系待完善，通過新玩法的探索進一步沉淀用戶數據，反哺到互動玩法乃至整個平臺的生態圈。

評論(0) 瀏覽(558)

教你一文讀懂暗色模式

博博

暗色模式（Dark Mode）的興起是一個逐漸發展的過程，它涉及到技術進步、用戶體驗優化以及設計趨勢的變化。
隨著iOS 13在2019年的發布，暗色模式開始成為用戶關注的焦點；在用戶體驗方面，設計者們考慮到了環境光線與屏幕亮度的匹配問題，暗色模式可以有效減少視覺疲勞；在實際使用中，用戶發現暗色模式在光線較暗的環境中更為舒適，這也促使了暗色模式的普及和發展。
暗色模式在UI設計中的重要性體現在改善視覺舒適度、節省電量以及提供個性化選擇上，其普及程度隨著用戶需求和技術發展不斷提升。
 
 
「大廠設計師」教你一文讀懂暗色模式
 
一、定義及其在UI設計中的表現形式
1.暗色模式的定義
  暗色模式是一種低光用戶界面（UI）設計，也稱為深色模式，是一種用戶界面設計選項，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺體驗。
iOS 13 亮色模式（左）與暗色模式（右）的對比
iOS 13 亮色模式（左）與暗色模式（右）的對比
 
2.暗色模式的定義
(1).暗色模式在UI設計中的表現形式
設計師需要為暗色模式創建一個新的調色板，這通常意味著降低顏色的飽和度，以適應深色背景。同時，避免使用純黑作為主色調背景，而是選擇接近純黑的深灰色，以確保閱讀體驗的舒適性和可讀性。
亮色/暗色模式下主色需要進行調整
亮色/暗色模式下主色需要進行調整
 
(2).對比度控制
暗色背景與文本顏色之間的對比度應該控制在WCAG2.0AA級標準以上，以保證內容的清晰度和易讀性。對于彩色元素，也需要適當調整飽和度，確保整體色彩之間的對比度符合無障礙標準。
達到/未達到WCAG2.0AA標準的視覺效果對比
達到/未達到WCAG2.0AA標準的視覺效果對比
 
(3).視覺元素區分
在暗色模式下，設計師需要特別注意視覺元素的區分，通過足夠的對比度來保證文字和圖形的清晰可見。這不僅僅是簡單的顏色反轉，而是一種“弱光”主題的設計思考，旨在優化用戶在低光環境下的視覺體驗。
亮色模式中的按鈕在暗色模式中顯得太跳躍
亮色模式中的按鈕在暗色模式中顯得太跳躍
 
二、歷史回顧及發展脈絡
1.命令行界面時代
在早期的計算機系統中，如DOS和Linux，終端通常使用暗色模式，這是因為早期的CRT顯示器存在閃爍問題，暗色背景能夠減少視覺疲勞，并提供較高的對比度。
Linux的終端界面
Linux的終端界面
 
2.個人電腦時代
隨著個人電腦的普及，圖形用戶界面（GUI）逐漸成為標準，此時大多數操作系統和應用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移動設備時代
智能手機和平板電腦的興起帶來了OLED等先進顯示技術，這些設備的小屏幕和高分辨率使得暗色模式再次變得實用和流行，特別是在節省電量和減少眼睛疲勞方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系統時代
近年來，各大操作系統開始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色應用模式，macOS和iOS隨后也推出了可以根據時間或環境自動切換的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、設計趨勢中暗色模式的地位
暗色模式在當前設計趨勢中占據重要地位，以其減輕眼睛疲勞、節省電量和聚焦內容的優勢受到青睞。它不僅適應低光環境，還提供美學上的新探索，響應了用戶對舒適性和個性化選擇的需求。隨著技術發展和設計創新，暗色模式已成為現代界面設計不可或缺的一部分。許多頂級品牌和應用程序，如WhatsApp、Instagram、Google、Facebook等，都已經引入暗色模式設計，這表明暗色模式已經成為了一種廣泛接受的設計趨勢。
從左往右依次為：WhatsApp、Instagram、Google、Facebook
從左往右依次為：WhatsApp、Instagram、Google、Facebook
 
「大廠設計師」教你一文讀懂暗色模式
 
一、用戶體驗層面
1.提高閱讀舒適度
(1).對比度和可讀性
在相同的對比度條件下，淺背景上的黑字比深背景上的淺色字閱讀效果更好。這表明，優化對比度是提高閱讀舒適度的關鍵因素之一。
淺背景上深字與深背景上淺字的視覺對比
淺背景上深字與深背景上淺字的視覺對比
 
(2).用戶偏好和滿意度
一項針對用戶對暗色模式的使用體驗的調查顯示，與默認的白底模式相比，用戶在使用暗色模式時報告了更低的視覺疲勞和更高的滿意度。斯隆（Sloan）的一項研究在1977年就報告說，如果更多的光線通過混濁的透鏡到達眼睛，則出現畸變的可能性更大，即暗模式對視力障礙者更好。
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
 
2.減少視覺疲勞
(1).人眼生理特性
暗色模式能減少屏幕發出的光線，這有利于減少眼睛疲勞和不適，特別是在低光環境下，人眼的虹膜會打開以接受更多光線，而暗色模式提高了減少的光源，減少了對眼睛的刺激。
亮/暗環境下瞳孔大小的變化
亮/暗環境下瞳孔大小的變化
 
(2).藍光輻射減少
人們通過長期研究發現短波可見光，即紫光和藍光對眼底視網膜有相當程度的破壞作用， 而人們通常把這種可見光波長中高能量波段(400- 470nm)對視網膜的損壞現象稱為“藍光傷害現象”。 還有研究關注了暗色模式對藍光輻射的影響。由于暗色模式降低了屏幕的整體亮度，因此也減少了藍光的輻射。
可見光波段分布
可見光波段分布
 
二、設備電池壽命
1.降低屏幕功耗
在OLED屏幕上，每個像素都是獨立發光的，當顯示黑色時，相關的像素點會關閉，從而不消耗能量。這意味著，顯示大面積黑色內容的暗色模式能夠顯著減少屏幕的能量消耗。
OLED屏幕發光原理
OLED屏幕發光原理
 
2.實際省電效果
以 Google 測試數據為例，OLED 屏幕的 Pixel 手機在時間段內啟用深色模式并在使用地圖導航時保持屏幕最大亮度，手機的電量消耗下降了 63%。
Google的測試數據
Google的測試數據
 
三、降低屏幕功耗
1.促進睡眠
對于晚上喜歡在床上閱讀或工作的用戶來說，暗色背景有助于降低屏幕亮度，減少對褪黑素分泌的干擾，也有助于減少藍光對睡眠周期的影響，從而幫助用戶更快入睡并提高睡眠質量。
OPPO手機暗色模式廣告
OPPO手機暗色模式廣告
 
2.減少眩光
眩光是明亮的屏幕和低光環境之間惱人的對比現象，對眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字，整體降低了屏幕的亮度，這樣在光線較亮的環境中，屏幕的亮光與周圍暗環境的對比度降低，從而減少了屏幕反射光線對眼睛的刺激，降低不適。
有眩光與無眩光的顯示器對比
有眩光與無眩光的顯示器對比
 
四、打造沉浸式體驗
1.減少視覺干擾
暗色模式提高了一種無干擾的工作環境，有助于他們專注于手頭的任務，特別是在進行寫作、編碼或其他需要集中注意力的活動時，暗色模式能夠減少視覺干擾。
暗色模式為視覺設計提供了更大的對比度，使得界面元素更為突出。這種高對比度不僅有利于內容的戰士，也增強了用戶的視覺聚焦，讓用戶更容易沉浸于應用或游戲的環境中。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
編碼軟件一般默認暗色界面，有利于專注工作
編碼軟件一般默認暗色界面，有利于專注工作
 
2.增強視覺聚焦
暗色模式為視覺設計提供了更大的對比度，使得界面元素更為突出。這種高對比度不僅有利于內容的戰士，也增強了用戶的視覺聚焦，讓用戶更容易沉浸于應用或游戲的環境中。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
手游王者榮耀UI界面


作者：阿琳01
來源：站酷

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

評論(0) 瀏覽(794)

UI設計中的微文案：細微之處見真章

博博

在UI設計中，微文案往往被視作細枝末節，容易被設計師們所忽視。然而，正是這些看似不起眼的文字，卻在用戶體驗中扮演著舉足輕重的角色。微文案，即那些短小精悍、直接明了的文字描述，它們不僅能夠指導用戶操作，還能夠增強產品的情感價值，提升用戶滿意度。
 
資深設計專家Joshua Porter曾指出：優化界面體驗的一個快捷方式，就是提升文案的質量。 他在《Writing Microcopy》一文中首次提及“微文案”這一術語，并以確認彈窗的文案為例，展示了如何通過清晰的表述“賬單地址是你卡上顯示的地址”，有效減少用戶在使用過程中的錯誤。 簡而言之，要想快速優化界面體驗，提升文案水平是一個行之有效的途徑。
 
一、了解微文案
如果你有學習過尼爾森的十大可用性原則，你會發現10條中有4條都與文案有關。
系統狀態 —— 告訴用戶當前正在發生什么，是卡住了還是處在loading中或是其它什么狀態。
一致性和標準化原則 —— 有一些約定俗成的規則，其中有一些普遍接受的術語，明確的操作提示，在不同界面保持統一等等。
防錯原則 —— 幫助用戶明白當他們做什么操作會發生什么結果，或者清晰的解釋某個操作會有什么行為。
明確錯誤 —— 錯誤信息應該用人話表達（不要用代碼），較準確地反映問題所在，并且提出一個建設性的解決方案。
 
1、微文案的定義
微文案（Microcopy）指的是在界面中，能夠引導、幫助用戶與界面交互行為的簡短文案，可以是一個單詞、也可以是一句話，常見的有表單文案、按鈕文案、彈窗文案、錯誤提示等，大部分微文案都會對用戶的行為產生直接的影響，如下所示：
UI設計中的微文案：細微之處見真章
 
2、微文案被重視的原因
微文案，作為用戶與產品交流中最直接的觸點，不僅有助于用戶預見潛在問題，更能激發他們繼續操作的意愿。通過預先洞察用戶在操作過程中可能遭遇的障礙并提供針對性的解決方案，微文案在很大程度上降低了用戶的流失率。 優秀的微文案能夠精準地揭示問題核心，消除用戶的疑慮，從而加速他們的決策過程，為產品創造更多價值。
此外，微文案所傳達的語氣和態度，對用戶情緒有著顯著影響。用戶的情緒狀態往往決定了他們是否愿意繼續在產品中深入探索。因此，眾多產品在追求體驗優化的過程中，都將微文案作為重點改進的一環。
UI設計中的微文案：細微之處見真章
 
3、微文案專設崗位
國外對于微文案的重視不止反映在公司對于職位的要求上，更反映在國外的教育市場上。國外有很多教育機構相繼開設了UX Writing的課程體系，比如 UX Writer Collective 以及 UX Writing Hub。這都代表著國外市場對于微文案設計的重視程度提高。
相比之下，國內除了頭部大廠在微文案方面有著較強的意識，其余以下尚未獲得足夠的重視，但其重要性正迅速提升，展現出巨大的發展潛力。
 
二、如何設計微文案
 
1、少用技術專業詞匯
每個領域、每個公司都有專業的詞匯，設計師和開發者通常會在產品當中潛移默化地使用這些專業詞匯。而用戶群體卻是包羅萬象，所以需要做的，是將專業的技術信息簡單易懂地表述出來。
避免含糊文案，明確表述問題和指引。力求簡潔，詞語能達意則不用句，一句話能說明則不贅言。用戶沒有耐心來看你寫小說。
避免含糊文案，明確表述問題和指引。力求簡潔，詞語能達意則不用句，一句話能說明則不贅言。用戶沒有耐心來看你寫小說。
 
2、不要拘束于一種表達方式
設計常常賦予產品獨特的個性。在完成了前面的步驟后，我們往往需要將微文案與設計理念相融合。不同的設計與微文案結合，會產生不同的效果，但絕不應是單調冷漠的提示。相反，我們應賦予其人性化的口吻，比如將“未設置收貨地址，請添加”修改為“您需要我們送到哪里？…”，從而使整個文案更具情感溫度，成為一個溫暖而富有親和力的聲音。
在一些特殊的場景下，微文案能起到安撫用戶情緒、引導用戶選擇后續行為的作用
在一些特殊的場景下，微文案能起到安撫用戶情緒、引導用戶選擇后續行為的作用
 
3、謹慎開玩笑，除非你對你的產品非常自信
雖然幽默風趣的微文案可以讓人更加輕松，但是也要分場合，玩笑和俏皮的語言應該在氛圍合適的時候使用，并且并不是所有人都能Get到特定的笑點。
有些笑話在文章當中或許合適，但是在UI界面當中就不一定那么有意思了。 比如，你所提交的數據無法保存，結果文案是“糟糕！您的數據好像無法保存呢”，這對于當前的狀況毫無裨益。
這樣的表達方式既直接指出了問題所在，又給出了簡單的解決方案或建議，更有助于用戶理解和處理當前的問題。
這樣的表達方式既直接指出了問題所在，又給出了簡單的解決方案或建議，更有助于用戶理解和處理當前的問題。
 
4、克制與誠信是微文案應用的基石原則，它們共同構成了我們在運用微文案時應當堅守的底線
有時，我們過于依賴這些標簽，使得人們對信息逐漸變得麻木不仁。又或是由于虛假、夸大其詞的數據泛濫，使得人們開始對社會證明持懷疑態度。
正如張小龍在2017年微信之夜中所言，當App的推送變得過于頻繁時，人們往往會選擇忽視，以至于任何一個推送都無法引起他們的關注。
當全部都是特惠時，你還會因為優惠而沖動購買嗎？
當全部都是特惠時，你還會因為優惠而沖動購買嗎？
 
結語
微文案不僅是文字，更是溝通的橋梁。請確保微語言準確、清晰，同時注重情感化和個性化，以貼近用戶。同時，保證可讀性和可理解性，避免復雜表達。保持微語言的一致性和連貫性，提升用戶體驗。通過精心設計的微語言，為用戶創造更舒適、便捷的體驗。
UI設計中的微文案：細微之處見真章
 
 
作者：晚上去拔罐
來源：站酷

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發


著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
評論(0) 瀏覽(575)

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

前端達人

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

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

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

 
 

 
 

 
 
留白分割的定義：
留白分割是目前設計的主流趨勢，越來越多的產品在使用留白分割設計。留白分割主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），將信息進行自然的視覺分組。
 
留白分割具有以下優勢：
 
1.突出重點信息：
通過增加間距，可以將關鍵信息與其他內容區分開來，使用戶更容易注意到。
 
2.提高可讀性：
適當的留白可以使文字或圖形元素之間的界限更清晰，減少視覺干擾，從而提高用戶的閱讀效率。
 
3.增強設計感：
留白可以為設計增加呼吸感，避免元素過于擁擠，使整體布局更加和諧、美觀。
 
當元素之間的間距保持均勻時，整個視覺呈現會顯得平衡且協調，大腦默認為一個整體。然而，一旦元素的橫向和縱向間距發生變化，我們的大腦會
基于接近性法則
，本能地將距離較近的元素視為一個整體或群組，這就是留白分割。（如下圖）

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

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

 
 
 
 

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

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



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

評論(0) 瀏覽(889)

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

前端達人

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



評論(0) 瀏覽(569)

帶你了解全案策劃設計流程

ui設計分享達人

全案策劃設計是指在市場營銷領域中，為一個項目或品牌提供全方位的策劃和執行服務。它涵蓋了從市場調研、品牌定位、目標受眾分析、營銷策略制定、創意設計、媒體選擇到推廣活動執行等一系列環節。全案策劃設計的核心理念在于不僅解決企業短期的業績問題同時也解決企業的長期經營管理問題。

評論(0) 瀏覽(594)

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

前端達人

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

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發



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

2024年動效設計前瞻

前端達人

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

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發



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

除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！

博博

 

 

近日，全球科技圈最火的熱點非Sora莫屬，它是OpenAI發布的首個文生視頻模型Sora，其視頻生成能力、效果呈現的成熟度震撼了全世界。有人說，這是視頻生成領域的iPhone moment，AGI（通用人工智能）又向前劃了一個時代。
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
Sora的使用非常簡單，與ChatGPT一樣，只需要輸入合適的prompt（提示詞），它就能跟根據文本指令創建視頻。
此前也有一些AI生成視頻工具，但大都只能生成10秒以內，還“卡成 PPT”，但 Sora 彎道超車，直接將時長拉到 60 秒。這個突破相當厲害，畢竟時間越長，內容越復雜，想表達準確把控好節奏難上加難。
Sora生成的視頻畫面截圖 | 東京街頭的時尚女性
Sora生成的視頻畫面截圖 | 東京街頭的時尚女性
Sora生成的視頻畫面截圖 | 白雪皚皚草地上的猛犸象
Sora生成的視頻畫面截圖 | 白雪皚皚草地上的猛犸象
更厲害的是，根據Sora技術報告的介紹，Sora不僅可以理解用戶在提示中所要求的內容，還能理解這些內容在物理世界中的存在方式。因此，它生成的視頻不僅逼真，還包含精細復雜的場景、生動的角色表情以及復雜的鏡頭運動。
Sora生成的視頻截取 | 穿過郊區的火車車窗上的倒影
Sora生成的視頻截取 | 穿過郊區的火車車窗上的倒影
不少人高呼影視行業變天了，明星即將失業，有網友甚至把美國電影工業的象征Hollywood（好萊塢）改成了這樣：
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
其實，不止影視行業，包括教育、營銷、互聯網甚至所有行業都會或多或少受到影響。
作為在互聯網浸潤多年的“老油條”來說，筆者最近一直在思考，Sora等AI工具對我們究竟是機會還是挑戰？個人認為，機會大于挑戰。
比如，對產品經理和UX設計師來說，可以考慮怎么把Sora的能力用到自己的產品上去： 一款社區產品，可以通過Sora快速輸出大量視頻內容；
一款教育類產品，可以通過Sora生成定制化的教學視頻；
一款新聞APP或者視頻網站，可以利用Sora進行個性化推薦；
……
 
不過這一切的前提是，你必須掌握AI。
除了上述提到的AI生成視頻工具Sora，筆者還總結了很多優秀的AI工具，這些工具能大大幫助我們提升工作效率，生成創意靈感，一起來看看吧~
 
1、小摹AI
小摹AI是一款集成了人工智能技術的產品設計工具，能夠根據文本指令輕松生成可編輯的原型圖，對產品經理來說可謂解放了生產力！
官網：
https://www.mockplus.cn/ai
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
目前有智能原型、智能文本、智能圖片、智能翻譯和智能表格五大功能，能有效地提升設計效率，沒有設計經驗也能輕松上手哦。
1）智能原型：根據用戶的描述，智能生成一張原型設計頁面。
2）智能文本：根據用戶的描述，智能生成一段文本內容，對寫產品需求文檔很有幫助。
3）智能翻譯：有“畫板翻譯”和“輸入內容”兩項子功能，可以輕松地實現整頁內容的翻譯，也可以輸入內容進行翻譯。
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
價格：
現階段可免費使用
推薦理由：
小摹AI界面簡潔，上手非常容易，它最大的亮點是利用AI優化設計流程，快速實現從概念到原型的轉變，大幅度提升了產品經理和設計師的工作效率！
推薦評級：
?????
 
2、Galileo AI
Galileo AI也是一個AI設計工具，它能根據用戶的輸入智能創建UI設計，生成的界面清晰，間距、字體大小、圖片使用等方面都不錯。另外，它還有個非常實用的功能，你可以將生成的設計導出到你的 Figma 中繼續編輯~
官網：https://www.usegalileo.ai/explore
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）即時設計生成：根據自然語言提示迅速生成復雜的UI設計。
2）AI生成的插圖和圖像：為設計添加AI生成的藝術元素，增強視覺吸引力。
3）完整的產品文案自動化：利用大型語言模型自動生成產品文案，節省設計師的時間和精力。
價格：
現階段免費
推薦理由：
如果你想獲得一些靈感，想看到一些新鮮的設計，真的可以試試這個工具。
推薦評級：
????
 
3、Uizard
Uizard是一個基于Web的設計工具，用戶可通過它的AI技術快速創建網站界面，還能快速將手繪草圖轉換為交互式原型，提高設計效率和創新能力。
官網：https://uizard.io/
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）手繪轉數字原型：將紙上的草圖轉換為數字界面原型。
2）用戶界面自動化設計：基于用戶輸入自動生成設計元素和布局。
3）交互式原型創建：快速構建可交互的原型，用于用戶測試和演示。
價格：
提供免費試用版本，付費版12美元/月起。
推薦理由：
Uizard是一款設計神器，它的AI功能，豐富的可復用模板和設計元素，能幫你節省大量時間。
推薦評級：
?????
 
4、Whimsical
Whimsical是一款多功能的在線設計工具，它可以幫助用戶完成思維導圖、流程圖、線框圖的制作，成品邏輯清晰，層次分明，還能幫助設計師及時標記靈感，是一款萬能的專業輔助設計工具。
官網：https://whimsical.com/home
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）上下文工具欄、可直接用于展示的輸出、無限畫布以及實時更新；
2）龐大的符號庫工具幫助用戶更好的完成設計操作；
3）Whimsical的AI功能可以快速生成圖表，用以直觀展示概念、思維導圖和網頁等內容。
價格：
提供免費版本，付費版10美元/月起。
推薦理由：
Whimsical是一款全能繪制工具，其中還有非常龐大的符號庫工具，能幫助你更好更快地的完成設計。
推薦評級：
????
 
5、Khroma AI
Khroma是一款利用人工智能技術來生成配色方案的工具，它能根據你的喜好和需求，提供高效、直觀的配色解決方案，并創建無限的調色板讓你盡情探索。
官網：https://www.khroma.co/
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）AI生成配色方案：根據用戶偏好和流行趨勢自動生成配色方案。
2）自定義配色選項：允許用戶根據自己的需求調整和優化配色。
3）保存和分享功能：用戶可以保存自己的配色方案，并與他人分享。
價格：
提供免費版，進階功能需付費訂閱
推薦理由：
Khroma的深度學習算法很厲害，它能夠學習用戶的配色偏好，并根據流行趨勢提供創新的配色方案。
推薦評級：????
 
6、AI Colors
AI Colors是一個人工智能色彩調色板生成器，它可以根據你的描述生成貼心的配色方案，同時你也可以參考提供的配色案例，每一種配色方案都有對應的效果展示，讓你能夠快速找到想要自己的配色方案。
官網：https://aicolors.co/
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）提供四種配圖案例，分別是移動應用、儀表盤、落地頁、作品集；
2）單擊復制顏色或者直接導出配色方案，不喜歡的顏色還可以手動修改。
推薦理由：
通過AI Colors，你可以輕松生成調色板，并將其應用于產品界面，查看它們的配色效果，非常適合希望輕松掌握調色板的新手。
推薦評級：
???
 
7、Fontjoy
Fontjoy是一個幫助設計師選擇最佳字體組合的工具，它可以讓用戶在一次點擊中生成字體組合，還可以混合和匹配不同的字體，達到完美組合效果。
官網：https://fontjoy.com/
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）幫助用戶調整字體外觀，還有字體的類型、大小、顏色等
2）豐富的字體資源：包括中文字體、英文字體、日文字體等；
推薦理由：
只需點擊生成，就能看到不同的字體，讓字體搭配毫不費力。
推薦評級：
???
 
8、Huemint
Huemint是一個內置AI色彩模型的在線配色網站，它通過AI技術幫助用戶快速生成吸引人的配色方案，你還可通過調節滑塊控制配色方案的對比度，適用于設計師和創意專業人士。
官網：https://huemint.com/brand-intersection/
除了Sora，這8大AI工具值得每個設計師和產品經理嘗試！
主要功能及亮點：
1）AI配色方案生成：根據用戶輸入和偏好，AI算法生成配色方案。
2）控制配色對比度：用戶可以通過調節滑塊來控制配色方案的對比度。
3）多樣化的配色選項：支持生成等階色、漸變色和2到11色的配色方案。
價格：
在線免費使用
推薦理由：
Huemint的AI色彩模型能夠根據最新的設計趨勢和用戶偏好提供創新的配色方案，幫助設計師快速找到靈感，輕松提高設計效率。
推薦評級：????
 
以上就是筆者的“掏心”分享了，希望讀到這里的小伙伴能真正嘗試用一下AI。畢竟，現在我們必將和AI一起成長同行，只有了解AI掌握AI才能不落后于時代，也讓我們一起期待人工智能下一個“Sora”吧！


作者：摹客設計云
來源：站酷

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

評論(0) 瀏覽(624)

標簽設計的超全分析總結

博博

在日常生活中，我們經常會給他人貼上標簽。這些標簽可能是基于個人特征、行為或經歷而形成的，它們可以幫助我們更好地理解和分類他人。例如，當我們初次見到一個人時，我們可能會根據他們的外貌、穿著和言談舉止來給他們貼上一個“自信”、“開朗”或“膽小”、“內向”的標簽。我們不可避免地會貼標簽或被貼標簽，因為這是一種快速且低門檻的有效記憶方式。
設計干貨分享｜標簽設計的超全分析總結
關注不同平臺的標簽設計，發現平時不太注意的小標簽承擔了許多重要的作用。在電商類設計中，標簽可以強化商品折扣、優惠信息、服務特色等吸引用戶。對于偏向瀏覽和文章發布類產品，標簽設計旨在方便讀者更好地理解文章內容，平臺還可以根據標簽聚合同類文章，建立目錄索引，引導讀者快速查看標簽文章。
看似簡單的標簽卻有這么強的作用，以下將根據標簽的定義、屬性特征及使用場景作出一些思考和探索，幫助大家對標簽有一個更清晰的認識。
 
目錄：
一、標簽的定義
二、標簽的組成
三、標簽設計的作用
四、標簽設計要點
設計干貨分享｜標簽設計的超全分析總結
百度百科對網絡標簽(Tag)定義是：
一種互聯網內容組織方式，是相關性很強的關鍵字，它幫助人們輕松的描述和分類內容，以便于檢索和分享，Tag已經成為web 2.0的重要元素。
 
Ant Design 對標簽給出的定義是：用來進行標記和分類。使用場景：1.用于標記事物的屬性和維度；2.進行分類。
TDesign對標簽給出的定義是:用于表明主體的類目，屬性或狀態。
設計干貨分享｜標簽設計的超全分析總結
所以標簽是什么?
標簽是結合產品內容及屬性特征經提煉后產出的關鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統識別。
標簽可以幫助傳達信息、建立可預知操作、產品分類和營銷引流、優化搜索等。通過使用標簽，方便用戶快速識別，提升信息轉化的效率，在UI設計中，標簽是最常用的設計組件之一。
設計干貨分享｜標簽設計的超全分析總結
標簽由容器、文本、圖標等元素組成。
三者都是可選的，它們可以隨機組合，常見的是這5種組合：文本、圖標、容器+文本、容器+圖標、容器+文本+圖標。
設計干貨分享｜標簽設計的超全分析總結
文本標簽：
更直觀地表達含義，主要用于抽象的、或分類較多的標簽，這種類型標簽通常也以#+文字的形式呈現為超鏈接，主要出現在文字內容較多的列表頁面、詳情頁的開頭或結尾。它們也可以被理解為常說的話題標簽。通過這些標簽，用戶可以快速了解到內容的主題和核心，并能夠方便地鏈接到與該內容相關聯的信息。
 
圖標標簽：
更富有設計感且吸引眼球，但這種圖標必須是用戶熟識的、一看就明白含義的；
 
容器+文本標簽：
主要為突出特色、賣點來進行促銷，類型及樣式比較多元化，且單個產品可能多達 4~5 個標簽，以此來吸引用戶購買。
 
圖標+文本標簽：
面積會較大，視覺沖擊很強，有的出于交互功能的需要，有的則是用在節日和特別專題。
 
容器+文本+圖標標簽：
而圖標則是為了進一步強調或補充標簽文本的信息，增強用戶的視覺感知。
設計干貨分享｜標簽設計的超全分析總結
設計干貨分享｜標簽設計的超全分析總結
 
01 標簽的顏色
標簽的顏色選擇和搭配對于信息傳遞和品牌塑造具有重要影響。不同的顏色和用色的面積/重量會給用戶帶來不同的感知，比如，綠色代表清新、免費，黃色棕色代表尊貴VIP，紅色象征火爆熱門。同時也會對品牌形象產生影響。
  • 在白色背景下，我們可以自由地選擇任何顏色作為標簽的主體色、輔助色和點綴色。當面對同一組信息多個標簽時，我們可以通過混合不同顏色來更好地區分它們。例如，我們可以將主要標簽設置為紅色，次要標簽設置為藍色，然后將它們組合在一起以形成一個更豐富的視覺層次結構。
設計干貨分享｜標簽設計的超全分析總結
  • 在圖片背景下，我們的選擇受到了很大的限制。由于圖片本身已經具有了豐富的顏色和紋理，因此我們需要謹慎選擇標簽的顏色以避免與圖片產生沖突。通常情況下，我們會使用白色/黑色+不透明度或主體色作為標簽容器，并將文字設置為黑色或反白處理以確保其可讀性。
設計干貨分享｜標簽設計的超全分析總結
總之，無論是白色背景還是圖片背景都有其獨特的優勢和適用場景。在選擇背景時應根據具體情況進行權衡并做出最佳決策。
 
02 標簽形狀
標簽的形狀設計在信息視覺傳達中扮演著重要的角色，不同的形狀代表著不同的信息特性和情感色彩。常用的標簽形狀有圓形、矩形（半圓角、全圓角）、氣泡或異形等。
設計干貨分享｜標簽設計的超全分析總結
形狀是標簽信息傳遞中的視覺輪廓表現，它作為承載信息的容器，對文字元素的包容性極強，能夠使標簽信息更加聚焦，讓用戶在獲取內容和進行信息歸類時更加專注。
設計干貨分享｜標簽設計的超全分析總結
 
在UI設計中，標簽的特征跟生活中的標簽也很相似，用以標注內容分類或內容要點，方便用戶快速定位自己需要的內容目標。 標簽還有滿足用戶的隱形需求的作用，當用戶在猶豫是否要進行下一步操作的時候，標簽在一定程度上加強了用戶的需求欲望，促進下一步操作。那標簽到底有什么作用？
01
傳達信息，突出產品特色
 
標簽的基本功能是分類和突出內容要點，以方便用戶快速定位他們需要的信息或功能。標簽常用于傳達產品基本信息、折扣信息、優惠信息、產品賣點等。對產品而言，它能優化信息層級，又能簡單明確地傳達產品特點；對用戶而言，可以第一時間獲取關鍵信息，降低用戶閱讀門檻，所以標簽的首要任務就是為滿足用戶的隱性需求而傳達特色信息。
例如，美團天天神劵、折扣信息等，淘寶里的直降低多少錢、同款低價，讓用戶潛意識地認為能夠降低經濟成本。
設計干貨分享｜標簽設計的超全分析總結
02
引導用戶操作，建立用戶操作的預期
 
標簽還可以用于建立用戶操作的預期，讓用戶在使用產品之前就知道點擊后可能發生的效果，從而增加用戶點擊的興趣和滿意度。
 
例如：音頻標簽、視頻標簽“獨播”、“vip”等，讓用戶在點擊前預知點擊后的效果。標簽還可以用作行為引導，告知某操作的結果，如淘寶里“常逛的店”，讓用戶提前知悉操作之后得到的結果，加強點擊的動機。
設計干貨分享｜標簽設計的超全分析總結
03 傳遞品牌與可靠性
品牌性質的標簽，讓消費者對產品產生信任感。同時，標簽也是品牌與消費者之間的溝通橋梁，通過簡潔明了的文字和視覺元素，傳達產品的特點和優勢。
 
例如如：“百億補貼”、“官方店”、“品牌”。許多用戶在瀏覽列表時，會通過標簽快速判斷是否有必要點擊查看詳情。此外，標簽內展示強公信力的信息（榜單排名/評分等），可以加強內容可靠性及優質性。
設計干貨分享｜標簽設計的超全分析總結
04
方便分類
標簽廣泛用于用戶區分產品內容，進行分類，進而確定關鍵詞，優化搜索。避免用戶因浪費大量時間瀏覽了非需求內的信息而失去耐心。
例如：京東水果蔬菜“時令熱賣”標簽和淘寶里的評價標簽，用戶可選擇自己感興趣的標簽去查找自己想要的信息，提高瀏覽效率，節約時間成本。
設計干貨分享｜標簽設計的超全分析總結
05
營銷引流
 
為用戶打上不同的標簽，用于區分不同用戶群體，分類精準定向推送產品。標簽既能突出產品特色信息、又不會占用太多空間，所以通過對用戶建立好感、吸引其注意力進行引流也是一個很不錯的方式。
如：小紅書文末的文字標簽、淘寶搜索的“探索發現”
設計干貨分享｜標簽設計的超全分析總結
05
從眾心理引導轉化
 
在營銷中，利用從眾心理可以引導用戶做出購買決策，這類信息廣泛應用在標簽設計中，積極引導用戶點擊和轉化。
例如，可以展示其他用戶的購買記錄或評價，讓用戶看到其他人對該產品的認可和好評，從而增加他們的信任感和購買欲望。像淘寶里的“多少人回購”，銀行理財里的“多少人次購買”等等，都會對當前用戶的心理產生極大影響，很多時候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認知。 當用戶無法決策時，從眾心理會成為影響用戶決策的重要因素。
設計干貨分享｜標簽設計的超全分析總結
06 告知狀態
當內容狀態變化且產品希望提示用戶知悉時，標簽可以作為告知當前狀態的提示，如上新的“New”、“直播中”等。
此外，告知當前狀態還有營造稀缺性的作用。如“限購多少件”、“即將售罄”，促使用快速決策。
設計干貨分享｜標簽設計的超全分析總結
 
07 營造氛圍
標簽不僅僅是產品信息的載體，更是營造氛圍的重要元素。通過選擇適合的色彩、字體和圖案，標簽可以傳達出不同的情感和氛圍，吸引消費者的注意力，激發購買欲望。
 
例如：“38換新節”、“上新啦”，有的產品確實是基于熱度展示的標簽，也有的產品只是為了吸引用戶注意力而展示。
設計干貨分享｜標簽設計的超全分析總結
 
 
設計干貨分享｜標簽設計的超全分析總結
在UI設計中，標簽是一個不可或缺的元素，那如何設計才能達成業務目標？
01 簡潔明了
標簽設計的文案（字段）長短盡量簡短清晰，具有一定的識別性、易通性，避免使用復雜的詞匯和句子。用戶在瀏覽界面時，應該能夠快速理解標簽的含義。這里所說的精煉并非一味地求短，雖然“短”是標簽必備的因素，但有時候過于簡短的標簽根本沒辦法給用戶傳達足夠的信息，甚至會導致用戶更加疑惑，這也失去了添加標簽的初衷。
 
02 一致性與差異性
在不同的頁面和場景中，標簽的設計應該保持一致的風格和格式。這包括顏色、字體、大小、布局和位置等方面的一致性。這樣做有助于用戶建立認知模型，提高他們的使用效率。然而，盡管標簽設計需要保持一致性，但也需要一定的差異性。這種差異性是針對不同類型和視覺權重的標簽，通過不同的視覺樣式和色彩來體現信息的層級關系。因此，雖然表面上看起來存在沖突，但實際上并不矛盾。
 
03適當的顏色
標簽的顏色應該與背景顏色形成對比，以便用戶能夠清楚地看到。同時，顏色的選擇也應該考慮到品牌的形象和用戶的視覺感受。
 
04 適當的位置
標簽的位置應該方便用戶操作。例如，重要的標簽應該放在顯眼的位置，而不太重要的標簽信息可以放在次要的位置。
 
結語
UI 設計中的標簽跟我們日常生活中的標簽很相似，它不僅能對產品作分類、特色標記，還能在用戶猶豫不決的時候起到一定的推動作用，是平臺內部信息導流和滿足用戶潛在需求過程中至關重要的一環。根據產品的目的和需求，在不同時間和場景下使用合適的標簽是至關重要的。通過簡單精煉的表達方式，標簽能夠在有限的空間內提供更多的信息維度，吸引用戶的注意并激發他們的好奇心、提升信息轉化的效率。
 
作者：滿滿滴滴
來源：站酷

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

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

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

 

評論(0) 瀏覽(730)

日歷

鏈接

個人資料

藍藍設計的小編 http://m.paul-jarrel.com

存檔