国产精品美女久久久浪潮AV,国产精品三级一二三区,久久精品国产一区二区小说 ,依依成人影视国产精品,全部无卡免费的毛片在线看,日本一区二区三深夜不卡,国产精品女同一区二区久久,国产精品夜色一区二区三区

        首頁

        標簽設計的超全分析總結

        博博

        在日常生活中,我們經常會給他人貼上標簽。這些標簽可能是基于個人特征、行為或經歷而形成的,它們可以幫助我們更好地理解和分類他人。例如,當我們初次見到一個人時,我們可能會根據他們的外貌、穿著和言談舉止來給他們貼上一個“自信”、“開朗”或“膽小”、“內向”的標簽。我們不可避免地會貼標簽或被貼標簽,因為這是一種快速且低門檻的有效記憶方式。
        設計干貨分享|標簽設計的超全分析總結
        關注不同平臺的標簽設計,發現平時不太注意的小標簽承擔了許多重要的作用。在電商類設計中,標簽可以強化商品折扣、優惠信息、服務特色等吸引用戶。對于偏向瀏覽和文章發布類產品,標簽設計旨在方便讀者更好地理解文章內容,平臺還可以根據標簽聚合同類文章,建立目錄索引,引導讀者快速查看標簽文章。
        看似簡單的標簽卻有這么強的作用,以下將根據標簽的定義、屬性特征及使用場景作出一些思考和探索,幫助大家對標簽有一個更清晰的認識。
         
        目錄:
        一、標簽的定義
        二、標簽的組成
        三、標簽設計的作用
        四、標簽設計要點
        設計干貨分享|標簽設計的超全分析總結
        百度百科對網絡標簽(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 設計中的標簽跟我們日常生活中的標簽很相似,它不僅能對產品作分類、特色標記,還能在用戶猶豫不決的時候起到一定的推動作用,是平臺內部信息導流和滿足用戶潛在需求過程中至關重要的一環。根據產品的目的和需求,在不同時間和場景下使用合適的標簽是至關重要的。通過簡單精煉的表達方式,標簽能夠在有限的空間內提供更多的信息維度,吸引用戶的注意并激發他們的好奇心、提升信息轉化的效率。
         
        作者:滿滿滴滴
        來源:站酷

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

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

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

         

        教你一文讀懂暗色模式

        鶴鶴

        暗色模式(Dark Mode)的興起是一個逐漸發展的過程,它涉及到技術進步、用戶體驗優化以及設計趨勢的變化。
          隨著iOS 13在2019年的發布,暗色模式開始成為用戶關注的焦點;在用戶體驗方面,設計者們考慮到了環境光線與屏幕亮度的匹配問題,暗色模式可以有效減少視覺疲勞;在實際使用中,用戶發現暗色模式在光線較暗的環境中更為舒適,這也促使了暗色模式的普及和發展。

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

        鶴鶴

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

        暗色模式的優勢

        博博

        一、用戶體驗層面
        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界面
        手游王者榮耀UI界面
         
         


        作者:阿琳01
        來源:站酷

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

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

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

        暗色模式的基本概念和發展歷程

        博博

        一、定義及其在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


        作者:阿琳01
        來源:站酷

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

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

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

        智慧電力可視化大屏管理系統

        前端達人

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

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

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

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

         

        作者:121Jay


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

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

        前端達人

        下面開始:
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例
         
         
        收藏
        《UnitLife》APP界面/交互設計案例


         

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

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

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

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

        深度剖析|瓷片區設計指南

        博博

        瓷片區是我們設計師在平時的APP設計中經常遇到的設計需求,雖然只是界面中一塊較小的區域,設計看似簡單,但它涵蓋了用戶研究、設計心理、UI設計等多個設計知識點。瓷片區對于產品的推廣、品牌的傳播等也具有著重要的作用。我通過工作中的一些設計心得進行總結沉淀形成此篇設計指南,從多個維度探討剖析瓷片區的設計方法,希望能夠協助設計師更好的規劃設計產品,增強用戶的滿意度和粘性,為用戶帶來更為舒適流暢的實用體驗。文章若有不妥之處,還望共同交流指正。
         
        前言
        深度剖析|瓷片區設計指南
         
        此篇文章通過講解關于瓷片區的一些認知以及設計手法的設計指南,來幫助大家更好的理解瓷片區設計的重要性和應用方法。作為產品設計過程中的考慮因素和規則不是一成不變的,希望在未來的設計中能夠有更多的方法和技巧指引設計師們完成更好更優秀的設計作品。
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
        瓷片區是APP應用設計中經常出現的一款引導型組件模塊,主要在首頁主推內容區進行展示,和Banner區、金剛區并行三大運營板塊,其權重較Banner區和金剛區略低,一般放在兩者之下。瓷片區從外觀上看就像是一塊塊瓷片一樣組合“貼”在頁面中,構成一組排列在一起的運營廣告位,故統稱為“瓷片區”。例如京東商城、美團、攜程服務、個人中心等產品都含有瓷片區。
        瓷片區可以在一個頁面區域內劃分出不同的組合,且每個區域內會包含產品主體視覺元素(圖片)、標題、介紹文案、標簽和背景等信息。瓷片區和banner作用較相似,但相較Banner區和金剛區使用更加靈活,應用場景較多。
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
         
        瓷片區本質上就是運營內容區,它更接近于一個功能模塊的外部固定廣告位。它的展示內容雖然會隨著時間場景變化,但是代表的功能模塊是保持不變的,每個瓷片就是這個功能模塊的窗口,引導用戶進入對應功能模塊中。瓷片區不僅較多在電商場景應用中,還可能出現在其他所有應用類型中。例如旅游、金融、娛樂生活等多類產品,但在工具類產品中卻不太適用。
        1.金融類
        金融產品如銀行應用、投資平臺等,往往包含復雜的服務和功能。此類APP中的瓷片區可用于展示金融產品、投資理財建議等。通過專業的圖表、數據和解析,運用圖形化的方式簡潔明了地傳達信息,幫助用戶幫助用戶快速理解產品特點,更好地了解市場動態,從而做出更明智的投資決策。
        2.生活服務類
        在生活服務類APP中,瓷片區可以展示各類服務入口,如美食、旅游、休閑娛樂等。通過直觀的布局、明確的分類以及醒目的圖片,吸引用戶進行探索和預訂,幫助用戶快速找到所需服務,提升用戶體驗。同時根據用戶的瀏覽記錄和購買歷史,推薦相關的商品或服務。或者根據用戶的地理位置和時間信息,推薦附近的餐廳、景點等,通過個性化的推薦方式能夠提升用戶的滿意度和粘性。
        3.新聞資訊類
        新聞資訊類APP中的瓷片區可用于展示熱門新聞、重要事件或專題報道。通過及時更新內容,瓷片區可以幫助用戶快速獲取最新信息,同時提高用戶對APP的依賴度和使用頻率。
        4.虛擬類
        對于軟件、游戲或數字內容等虛擬產品,瓷片區能夠通過創意插畫或圖形,增加產品的調性和趣味性,提升用戶體驗。
        5.設計類
        設計相關的應用或平臺使用瓷片區也可以展示設計作品、設計理念或者設計工具等,通過視覺藝術吸引目標用戶群體。
        6.電商或商城類
        在電商類APP中,瓷片區常被用于展示熱門商品、促銷活動等,通過精美的高質量產品圖片展示和吸引人的文案,直接影響用戶的點擊率和購買意愿,從而促成交易。
        深度剖析|瓷片區設計指南
        深度剖析|瓷片區設計指南
         
        深度剖析|瓷片區設計指南
         
        瓷片區類似于一種產品服務展示,是主要負責流量導流功能,吸引用戶注意力,幫助業務推廣產品。瓷片區一般都位于用戶最容易點擊的區域,方便引導用戶點擊進入,使用戶更容易尋找自己所需產品。在現如今的產品設計中,瓷片區具有著十分重要的作用和意義。
        1.流量引導與轉化
        瓷片區是APP設計中不可或缺的組件,它是流量的入口和轉化點。通過精心設計的瓷片區,可以有效地吸引用戶的注意力,引導他們點擊并深入了解相關的內容或功能。這有助于提升用戶的參與度,同時增加APP內特定內容或服務的曝光率,從而促進流量的轉化。
        2.引導用戶注意力
        瓷片區通過展示商品圖、代言人等視覺元素,有效吸引用戶的注意力,起到引導用戶點擊和進一步探索的作用。
        3.個性化推薦與用戶體驗
        瓷片區通常也具備個性化推薦的功能,可以根據用戶的興趣和行為習慣,展示符合他們需求的內容。這種個性化的推薦方式不僅可以提高用戶的滿意度,還能增強用戶對APP應用的黏性。同時,通過優化瓷片區的交互設計和視覺呈現,可以提升用戶的使用體驗,使其更加便捷、舒適地瀏覽和選擇內容。
        4.提升轉化率
        由于瓷片區能夠集中展示多個促銷信息或功能模塊,它通常具有較高的轉化率,這對于提升用戶的購買行為或參與度是非常有利的。
        5.增加產品留存率
        良好的瓷片區設計能夠提升用戶的使用體驗,從而提高整個產品的留存率。
        6.業務推廣與品牌展示
        瓷片區是進行業務推廣和品牌展示的重要場所。設計瓷片區往往會考慮到美觀性和藝術性,這有助于提升產品的整體視覺效果,增強用戶對品牌的良好印象。通過出色的視覺展示核心產品或服務,幫助企業有效地傳達品牌形象和價值,吸引潛在用戶的關注。同時,結合特定的營銷活動或促銷策略,瓷片區還可以提升用戶的購買意愿,促進業務的發展。
        7.數據收集與優化
        瓷片區的設計和實施還涉及到大量的數據收集和分析工作。通過對用戶點擊、瀏覽等行為的追蹤和分析,可以了解用戶的偏好和需求,為后續的優化工作提供數據支持。這有助于APP不斷改進和完善瓷片區的功能和表現,提升整體的用戶體驗和效果。
        深度剖析|瓷片區設計指南
        在眾多產品中,通過瓷片區的設計能增加對商品、功能的曝光,使用戶群更愿意去購買或了解感興趣的商品、功能。設計師根據瓷片區導流入口-落地頁-轉化率設計,通過整個流程中收集數據,提升優化設計體驗,實現設計價值。
        深度剖析|瓷片區設計指南
        瓷片區是在一個APP中將一塊矩形區域內劃分出不同的矩形組合,每個二級矩形內一般會包含標題、介紹文字、主體視覺元素、標簽等信息,通過擺放推廣相關的內容吸引用戶點擊進入。
        1.瓷片區是具有營銷性的功能區域
        瓷片區在設計層面上是具體的運營模塊,而不是一種單純的設計形式。瓷片區是對于存在的產品進行流量擴充,是提高產品點擊率,是產品存在后方便調整流量使用。下圖中遮照區域是產品的核心功能區,不是簡單的營銷入口,不能被刪除,否則會影響用戶使用。
        深度剖析|瓷片區設計指南
        2.瓷片區是靜態固定的區域模塊
        APP軟件中常出現功能列表頁,它是后臺獲取數據的入口,是一種整齊排列,一層層疊加的片區,可以以一個單獨模塊的形式出現,不是像瓷片區類似貼瓷磚組合呈現。在沒有產品展示的情況下瓷片區可以顯示空狀態,區域整體拼接結構不變,以靜態固定狀態顯示。下圖中頁面本身為功能列表,模塊性質本身不屬于營銷性質。
        深度剖析|瓷片區設計指南
        3.瓷片區不是金剛區
        瓷片區不是設計形式,它的拼接表現形式不是只限定于瓷片區可以用,在任何其他位置和模塊都可以采用這種樣式進行設計。瓷片區的功能權重較金剛區略低,金剛區較多的為產品核心功能入口,而瓷片區多為運營活動的營銷導流入口。
        深度剖析|瓷片區設計指南
        4.瓷片區不是快速入口
        我們經常會看到一些快速入口會像瓷片區一樣做成卡片拼貼的樣式,但不管樣式如何改變,瓷片區和快速入口在內容承載上有著本質的區別。
        瓷片區有較強的誘導性,通過展示的信息元素、圖片,如商品圖片、產品代言人,來誘發用戶關注并點擊,在刪除后不會影響產品的正常使用。快速入口它主要應對的是用戶的主動行為,通過把功能入口密集的羅列出來方便用戶進行查找和點擊。它主要以展示主題入口相關圖形為主,可以是圖標也可以是圖片、圖形 ,如果刪除會影響產品使用。
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
         
         
        在瓷片區設計中,一般常見的類型分為3種:實物照片類、插畫類、淘寶電商類
        1.實物照片類
        優點:識別度高,不需要明確的文案標注,圖片代入感強,帶有圖片本身屬性的名稱和樣貌、可復用性強,設計效率較高。
        缺點:對圖片素材要求高,圖片顯示有細節。
        場景:對實物圖需求較大的應用產品類型,如外賣、家居、服裝、旅游等產品使用較多。
        深度剖析|瓷片區設計指南
         
         
        2.插畫類
        優點:可高度描述瓷片區的運營意義,精美的插畫有助于提升細膩性,產品的細節品質和趣味,插畫本身色彩明度低飽和度高,圖形表現活躍,風格可控。
        缺點:偏抽象的產品,沒有合適的實圖可替代,此類產品多以插畫的形式去表現。矢量插畫類頁面對周圍環境,所表現的內容需要進行一對一繪制,需要高度的概括主題的圖形。由于針對屬性比較強,所以難以復用。同時圖形構圖繪制時間較長,時間成本較高,繪制時需要特別注意對關鍵信息的提煉以及識別度。
        場景:對設計風格有明顯要求,如金融、理財、教育、生活等產品。
        深度剖析|瓷片區設計指南
         
        3.淘寶電商類
        優點:根據用戶反饋數據提供高頻輸送內容,與瀏覽數據時時對應,符合用戶心智,轉化率更高。
        缺點:通過大數據真實反饋內容推動產品營銷,每個產品單獨以個性化形式展示,其他商家產品難以復制,具有技術實現難度。
        場景:對設計千變萬化,定制多樣,常用產品為電商類等。
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
         
         
        在進行瓷片區設計時,我們往往需要投入更多的精力進行細致化設計。而瓷片區究竟是由哪些元素組成呢?
        背景、圖片、文字是瓷片區主要構成元素,其中也可以運用插畫、圖標、標簽、裝飾等進行搭配使用,作為設計延展元素。背景、圖片、文字在瓷片區一般必須出現,他們是對產品展現、描述或對營銷目標表達的關鍵因素,插畫、圖標、標簽、裝飾等可根據設計風格、飽滿度、產品需求上加以使用,豐富視覺,突出特殊標識。
        深度剖析|瓷片區設計指南
         
         
        深度剖析|瓷片區設計指南
         
         
        瓷片區是一個需要視覺比較突出的組件,擁有較強的視覺感才能起到引導用戶點擊的效果。如何設計好瓷片區,從了解瓷片區各個元素設計開始。
        1.框架布局
        要了解瓷片區的設計方法,要先了解瓷片區的布局。在整個產品組件區域內,需要有效分配空間給不同的瓷片。首先在前期設計中,要優先確定瓷片區框架的四周內邊距,然后再根據要放置的瓷片數量和重要性進行合理分配,一般可將模塊拆分出 2*2、3*2、4*2、4*1的基本網格系統。
        深度剖析|瓷片區設計指南
        如果各個模塊的重要性不同,可以將多個小瓷片按照縱向或橫向排列合并為一個大瓷片,或將大瓷片拆分成多個小瓷片,以瓷片區域的大小來形成視覺權重的區分。
        深度剖析|瓷片區設計指南
         
        布局的結構的劃分是整個瓷片區設計的主體,除了以上常用的最基本構圖方法外,還有很多不同的瓷片分布方式,要通過不斷的積累實驗發揮自身創新能力,設計出更豐富的瓷片區展示形式。
        2.元素排版
        單個瓷片區內的元素一般由背景、文字、圖片/圖標/標簽/裝飾構成。常見的排版方式一般有左右排版、上下排版、對角線排版、Z字型排版這四種通用的排版形式。
        (1)左右排版
        一般在配圖為圖片、圖標時適用,一般一行顯示一塊或兩塊瓷片。
        深度剖析|瓷片區設計指南
        (2)上下排版
        采用上文下圖的形式,一般在界面的功能入口較多時適用,一般一行顯示不少于3塊瓷片。這種元素排版,在營銷型展示上一般為上圖下文,偏功能型的展示則為上文下圖。
        深度剖析|瓷片區設計指南
         
         


        作者:七色熒火
        來源:站酷

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

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

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

        詳解國內外十大設計系統(上)

        博博

        一、騰訊 — TDesign企業級設計體系
        詳解國內外十大設計系統
        TDesign設計系統是由騰訊內部近300名設計師與開發者共同打造的一套完整的企業級設計體系。該系統旨在為企業級應用提供全面、高效的設計解決方案,助力產品經理、設計師和開發者實現產品設計和開發的一致性。
         
        TDesign設計系統擁有一致的設計語言和視覺風格,確保了不同界面元素之間的和諧統一。同時,它提供了基于Vue、React、小程序等業界主流技術棧的組件庫解決方案,可以構建設計統一、多端覆蓋、跨技術棧的企業級前端應用。這些組件庫包括桌面端和移動端兩套風格統一的組件資源,能夠滿足不同平臺和應用場景的需求。
         
        除了組件庫,TDesign設計系統還提供了豐富的行業組件。這些組件是基于統一的設計體系,由騰訊多個業務團隊共同開發,并提供了多個垂直領域的行業組件庫產品。這些組件經過精心設計和測試,能夠滿足不同業務場景的需求,并提升產品的用戶體驗。
        詳解國內外十大設計系統
         
         
         
        二、King Design 設計系統
        詳解國內外十大設計系統
        King Design設計系統是由金山云推出的一套企業級設計解決方案。它致力于為企業級產品提供高效、統一和靈活的設計體驗。該系統具有一系列顯著的特征,使得它能夠滿足跨平臺、多設備操作系統的統一用戶體驗需求。
         
         
        三、Ant Design 設計系統
        詳解國內外十大設計系統
        Ant Design,出自阿里巴巴集團旗下螞蟻金服之手,是一款全面而通用的設計系統。它旨在為設計師和開發人員提供廣泛的用戶界面組件、設計指南和工具,以助力團隊迅速、輕松地創造出高品質的設計。
        詳解國內外十大設計系統
        總的來說,Ant Design設計系統以其簡潔美觀的設計風格、豐富的組件庫、基于React的開發優勢、規則化的視覺樣式配置以及TypeScript支持等特征,為前端開發者提供了強大且靈活的設計解決方案。這些特征共同使得Ant Design在前端開發領域具有廣泛的應用和認可。
         
         
        四、Atlassian設計系統
        詳解國內外十大設計系統
        Atlassian設計系統具有幾個顯著的特征,這些特征使得它能夠在全球范圍內為數百萬客戶提供出色的設計解決方案。以下是Atlassian設計系統的主要特征:
        詳解國內外十大設計系統
        Atlassian設計系統以其革命性的顏色方案、豐富的設計資源、可重用組件、直觀的界面以及強調交互和用戶體驗等特征,為設計師和開發者提供了一個強大的工具平臺,幫助他們創造出卓越的產品和體驗。
         
         
        五、IBM-碳設計系統
        詳解國內外十大設計系統
        IBM碳設計系統是一個綜合性的設計平臺,旨在為IBM的產品和服務提供一致且高效的設計解決方案。該系統強調以用戶為中心的設計理念,注重用戶體驗和界面美觀性的平衡。
         
        在IBM碳設計系統中,設計元素和組件都經過精心設計和優化,以確保它們在不同場景和平臺下都能提供出色的用戶體驗。這些組件包括按鈕、表單、導航欄、圖標等,它們都具有高度的可定制性和可擴展性,以滿足不同項目的需求。
        詳解國內外十大設計系統
         


        作者:墨一影
        來源:站酷

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

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

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

        B端干貨|消息中心如何設計?

        博博

        一、如何理解消息通知
        消息作為一種信息交換方式,抽象其過程,即為“在達到某一觸發條件下,由發送方發送消息給到接收方,接收方可針對此條消息提供反饋”。需要包含以下關鍵因素:
        B端干貨|消息中心如何設計?
        1. 消息觸發時間與條件(何時什么事):如按周期重復的時間點,或系統狀態變更、用戶操作結果等;
        2. 消息發送方(誰發現的事):可能是系統、第三方服務商,或者某個用戶;
        3. 消息接收方(誰需要知道):即接收方,可能是系統中的全部用戶,也可能會根據權限劃分推送到某個用戶群組,或者是某個特定用戶;
        4. 消息觸達渠道(怎么找到他):短信、電話、App 內通知等;
        5. 消息通知內容(告訴他什么):短信的文本、電話對話內容、通知消息的文案等消息通知;
        6. 消息操作反饋(他可以干嘛):主要分為只讀與操作反饋。只讀,即當前消息用戶在瀏覽后不需要做更多的操作,主要以了解為主;操作反饋,即當前消息需要用戶瀏覽,且在瀏覽后做相應的后續操作。
        好的消息系統要滿足什么條件:
        B端干貨|消息中心如何設計?
        1. 全面:通知的消息項要完整全面,用戶才能放心地通過消息通知系統了解消息更新內容;
        2. 及時:消息的觸達方式要及時有效,在消息相關事件發生后,用戶能在第一時間獲取到信息并提供操作反饋給到消息發送方;
        3. 高效:能通過合理的消息發送途徑、允許用戶設置及合并相似信息等方式避免過多消息侵擾用戶,讓用戶能夠高效處理消息通知。
         
        二、如何盤點消息通知
        設計全面、及時、有效的消息通知系統需要對消息的六個關鍵因素進行全面盤點,通過分步的方式逐步完成消息通知系統的設計。主要分為以下三步:
        B端干貨|消息中心如何設計?
        1. 盤點系統中包含的消息項:包含其觸發條件、通知來源及通知對象。需要盤點完整消息項從而保證消息系統的完整性;
        2. 確定消息觸達渠道:包含各消息項的觸達渠道。讓所有消息都能觸達到用戶的同時,能夠讓重要信息更易觸達,保證消息通知的及時性;
        3. 撰寫通知內容與操作反饋:包含各消息項的通知內容與操作反饋。讓消息內容能夠有效地傳達給用戶,讓用戶能快速反饋、操作。
        盤點的過程,即對消息通知清單的梳理。與產品、研發等團隊成員的溝通也將使用該清單。最終目標即完成下方表格的填寫:
        B端干貨|消息中心如何設計?
         
        1. 盤點系統中包含的消息項
        當前步驟需要對系統中可能會有的消息項進行完整的盤點。盤點消息項可以通過按消息類型走查方式完成。市場上比較有共識的消息的分類方式主要分為禁止、警告、成功三類。但是在實際設計工作中還需要配合以下的消息分類方式去更完整地盤點消息項:
        B端干貨|消息中心如何設計?
         
        (1)盤點出的每個消息項都需要補充以下四個關鍵因素
        1. 觸發條件:結合產品核心場景梳理完整。可通過狀態圖或泳道圖查缺補漏(詳見下段內容);
        2. 通知來源:可能是某個內部系統,可能是某個用戶組,也可能是某個具體用戶。用戶組的劃分需要提前與產品、研發同事溝通完成;
        3. 通知對象:可能是全部用戶,也可能是某個用戶組或具體用戶。由觸發條件中的場景決定;
        4. 重要性:需要與團隊溝通得出,可使用“高”、“中”、“低”的分類方式。
         
        盤點完成的消息項使用下表進行整理,方便產品、設計、研發之間的溝通。
        B端干貨|消息中心如何設計?
         
        (2)用流程圖或泳道圖查缺補漏
        對于 ToB 或 ToG 類含有復雜狀態轉換以及任務流的產品,除了使用分類的方式盤點消息項,還需要對照流程圖或泳道圖查缺補漏,避免消息類型的遺漏。
        如,顧客線上購買商品并收取商品的商品相關狀態變化如下圖所示,每個狀態都可對應著一條消息項:
        B端干貨|消息中心如何設計?
         
        當系統內包含多角色,且角色間流程有交互時,則可以使用泳道圖的方式進行梳理。在泳道圖中的每一條狀態變更線,都對應著一個狀態變更提醒。其中角色間交互的線,由于需要角色主動處理方可進入下一流程狀態,這條消息一般會成為一條待辦消息。
         
        (3)什么類型的消息不要納入消息通知系統
        需要注意的是,雖然通知的完備性很重要,但某些消息在前期梳理時就需要從清單中剔除,包括:
        1. 單純問候類消息,如“好久不見”等
        2. 不需要用戶知道的消息,如系統后臺數據更新等
        2. 確定消息觸達渠道
        確定要推送給用戶的消息類型后,需要給各消息匹配適合的通知方式。不同的通知方式會有不同的適用場景,可對照下表結合第一步整理的重要性配置消息的觸達渠道:
        B端干貨|消息中心如何設計?
         
        消息觸達渠道的配置結果到第一步的表格中:
        B端干貨|消息中心如何設計?
         
        平衡通知量:
        一個好的消息系統需要能有效觸達的同時不過分侵擾用戶。這就要求我們對系統實際運行中可能會出現的通知量進行預估,并適量調整通知方式,讓重要的消息能夠更有效及時地觸達到用戶。
        最終調整后的消息數量與提醒強度的關系最好能形成如下圖所示金字塔的模式。
        B端干貨|消息中心如何設計?
         
        (1)合并重復消息
        對于出現頻率較高,且用戶不需及時了解每條消息的消息項,可以通過合并消息的方式減少通知的數量。合并主要有兩種方式:合并流程過往節點信息和合并同類消息。
        合并流程過往節點消息:
        對于一些流程類通知,若用戶在響應或查看前,流程已經進入到下一階段,歷史節點的信息已經無需了解時,可合并過往流程節點的消息。如淘寶在展示物流時,針對同一訂單的物流,僅保留最新的一條。
        合并同類信息:
        對于同類型消息過多,且用戶不需要一一查看,只需在用戶有需要的時候提供入查看完整內容時,自動合并同類型的消息,減少對用戶的打擾。如 Instagram 在展示用戶動態信息時,會合并同一天同一類型的消息。
        B端干貨|消息中心如何設計?
         
        智能推送:有條件的系統可根據用戶行為分析及用戶畫像,進行智能推送。如基于用戶畫像按類型推送運營類消息,基于用戶接受消息數量,判斷是否合并消息推送等。
        (4)渠道間消息項的延續與統一
        出于信息持續性的考慮,觸達渠道之間有部分關聯關系在制定消息觸達渠道時需要注意,如:
        1. 若系統包含App、web等不同端,相同通知類型的消息要保持統一
        2. badge提示需要在應用內消息通知模塊有對應消息提示
        3. push消息的文案需要與應用內消息中心保持一致
        3. 撰寫通知內容與操作反饋
        通知的內容需要滿足簡明易懂的同時,還要讓用戶能夠快速處理。根據大量經驗總結,通知內容的撰寫可使用一個通用撰寫公式:
        B端干貨|消息中心如何設計?
         
         
        在應用撰寫公式寫內容時,需注意以下要點:
        1. 重點前置:用戶觸達的第一場景,可能是手機的 push 消息,可能是多個消息的列表。這就要求在撰寫文案時要將重要信息前置,如驗證碼、還款金額、事件提醒名稱等。
        2. 敏感信息保護:由于無法確認用戶獲取信息的場景是否私密。對于金額、個人信息等隱私數據,建議在應用內或其他渠道提供設置項,提供用戶自主選擇是否在消息通知中包含具體數值。如果要默認顯示,需要提前告知用戶。
        3. 來源信息露出:在郵件、短信等非產品自有渠道推送消息時,用戶可能會不確定消息的來源是否官方,需要包含消息來源信息。
        4. 提供觸發時間:當消息的發生時間對用戶后續判斷、操作有影響時,需要在通知內容中包含消息發生的時間。
        除了以上通用注意事項,由于渠道本身的特征差異,還需注意以下渠道相關的要點:
        1. 電話:需要設定客服話術標準,一般需要在會話開始前先告知用戶來電是誰、有什么目的。在講述完通知內容后,還應告知用戶如何處理當前信息,如果想了解詳細內容該前往哪個渠道了解。
        2. 短信-來源平臺:由于通知類短信的發送號碼可能會由于服務商設置的問題導致有多個發送號碼發送給用戶,用戶無法根據號碼判斷發件人身份。故需要在短信最開始說明平臺來源,建立品牌認知,避免用戶錯認為是垃圾短信。
        3. 短信-操作反饋:由于大部分短信為純文本短信,相關操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接,鏈接最好能設置為保留根域名的短鏈,如:點擊了解詳情:cdc.qq.com/d8djei
        4. 郵件:與短信相似會有來源可信度問題,郵件內容需包含品牌元素,同時發件的郵箱地址后綴使用產品官方網站。另外需要注意,某些郵件軟件會設置不自動下載圖片,郵件重要內容不要使用圖片。
        5. push推送(移動端):是消息在移動端的特有觸達渠道,由手機系統發送。發送的信息格式會受系統要求有所限制。最新的推送要求可參考相關設計規范文檔或接口規范。應用的icon與名稱系統會自動補充,撰寫文案時不用包含。
        6. 微信公眾號(訂閱號/服務號):由于微信對訂閱號與服務號的消息推送方式會經常變化,需要確認最新的要求并撰寫文案,相關鏈接見鏈接。
        在完成通知內容以及操作反饋的梳理后,對消息梳理表格進行更新,補充相關信息:
        B端干貨|消息中心如何設計?
         
        自此,消息項的盤點已經完成,后續可基于該表格與產品、研發溝通。當業務出現變更時,也需要對表格內容進行同步更新。
        三、如何設計消息中心
        消息通知的觸達渠道中,電話、短信、push 推送的呈現由系統決定。但是若產品有獨立 App,往往需要消息中心去承載全量的消息列表。本章會介紹如何設計消息中心。
        不同應用的消息中心處理方式受產品定位、應用框架等因素影響,設計差異化較大。但是可以通過按路徑分割去簡化設計:消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設置等幾個部分。
        1. 消息中心入口
        主要有底部 tab、個人中心附近的圖標入口、個人中心的菜單項等三種入口形式。
        2. 消息列表
        從消息中心入口點擊后跳轉到消息列表。由于消息的即時性,需要按時間維度排列。但是如果產品的消息類型較多,可通過分組合并或者分 tab 的方式提升用戶觸達消息的效率。
        3. 消息卡片
        消息列表中的卡片有兩種樣式可選,一般在一級消息列表使用小卡片樣式,讓用戶有更高的瀏覽效率。大卡片樣式則用于二級消息列表,或當前應用的消息數量較少時。
        4. 消息中心設置
        一般位于消息中心列表頁右上角,若可設置項較多,則提供設置入口在二級頁設置。一些常用的消息設置項如下:
        1. 全部已讀:對于消息數量較多,且未讀態會影響 badge 的展示時需要提供該設置項。點擊后設置列表消息項全部已讀。
        2. 發起對話:若系統包含通訊功能,一般會在消息類表頁提供發起對話的快捷入口。點擊后跳轉到通訊錄或好友列表。
        3. 設置通知提示方式:提供按消息類型設置某些通知項的接受渠道、接收時間段、各渠道之間的已讀聯動等,如微博;或者讓用戶選擇消息通知的精確度,是否包含具體信息,如微信可接收“您收到了一條信息”的模糊消息。
        4. 打開消息推送權限:一些應用有一些狀態更新或重要的提醒需要用戶在系統設置中打開當前應用的通知權限,會包含提示用戶打開通知的功能。這些提示需要在用戶進行了如“辦理事項”、“上傳狀態”等發起流程的操作后提示。不建議在用戶啟動 App 時就彈窗提示打開通知。
         
        四、總結
        設計時,首先要確定我們面對的是怎樣的業務場景,根據業務訴求確定設計目標,從而選擇合適的消息通知方式,不要過度使用通知給用戶造成困擾。其次,在目標基礎之上選擇推送對象,以及具體的推送規則,分流處理信息,充分考慮消息通知的必要性和重要性,再做決定。最后,設計細節決定體驗質量。
         

        作者:嘻嘻念吖念吖
        來源:站酷

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

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

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

        日歷

        鏈接

        個人資料

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

        存檔

        主站蜘蛛池模板: 99精品国产一区二区三区2021| 成人白浆超碰人人人人| 日韩精品无码一本二本三本色| 国产午夜无码精品免费看| 少妇 人妻 欧美| 一个人看的www视频在线观看| 人人妻人人澡人人爽欧美一区双| 免费无遮挡无码永久在线观看视频| 日韩一区二区三区无码影院| xxxxxl日本17上线| 江达县| 免费极品av一视觉盛宴| 18+国产精品| mm1313亚洲国产精品| 五十路熟妇亲子交尾| 国产精品久久久福利| 午夜精品射精入后重之免费观看| 成人午夜高潮a∨猛片| 国产乱码卡二卡三卡4| 日本亚洲国产一区二区三区| 亚洲第一区日韩国产| 国产精品久久亚洲不卡| a亚洲va欧美va国产综合| 欧美美女人体艺术| 最近2019中文免费字幕在线观看| 久久天天躁狠狠躁夜夜av| 人妻 色综合网站| 深夜福利啪啪片| 亚洲av片毛片成人观看| 婷婷久久综合九色综合88| 一边面膜一边燥的视频| 性free毛茸茸videos| 扬中市| 天天躁日日躁狠狠躁超碰97| 肉大捧一进一出免费视频| 精品国产成人国产在线视| 久久精品免费一区二区三区 | 欧美精品videossex少妇| 人与禽zozo性伦| jizzjizz日本人妻| 日韩国品一二三产品区别 |