<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          7個實用技巧,教你搞定可視化圖表

          ui設計分享達人

          可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中,如果沒有系統的可視化知識,會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么,在復雜的數據關系中如何設計和選用圖表,如何在好看的同時提升信息傳達效率,看完這篇文章希望對你的設計過程有所幫助。


          // 為什么要數據可視化


          數據可視化就是用圖表來表示數據信息,它所傳達的信息包括你所拿到的數據源和你分析后的結果,再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



          舉個例子,同樣一組數據,用表格的形式呈現是很難有所洞察的;如果將各個地區維度的數據聚合以柱圖形式呈現,很容易就能看出各個地區間數據的差異,并從中洞察規律


          關于如何設計好數據可視化圖表,這邊總結了三個步驟:選擇適合的圖表,強化視覺層次,圖表響應式適配。


          一、選擇適合的圖表


          數據可視化的圖表種類繁多,當我們真的開始作圖,往往會遇到一個困境:有這么多類型,要如何選擇正確的圖表呢?首要依據是考慮所要傳達的信息意圖,即所要制作的圖表它的任務是什么,再通過分析數據關系來選擇表達方式;第二層意圖是圖表傳達內容,這時候我們就需要根據數據的特征去突出和強化。


          1. 分析數據關系

          根據數據分析的方式來看,每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構,再結合數據關系作出選擇。了解圖表的可能知道,一般圖表的數據關系有構成、比較、分布,以商業數據為例,常見的還有流轉關系。



          構成關系

          構成關系的圖表表達的是部分和整體的關系,用于分析總體和各部分的占比比例,構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小,也可以使用比較關系的圖表。

          常用圖表:餅/環圖、堆疊圖、面積圖等,如涉及到層級結構,還會用矩形樹圖或旭日圖等特殊結構圖表。

          關鍵詞:“占比、比例、百分比”



          比較關系

          比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內,通過對兩個或兩個以上的指標分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時間內數據的變化,分類對比用于比較數據規模。

          常用圖表:趨勢對比常用圖表有折線圖、散點圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

          關鍵詞:“增減、升降、漲跌、波動”



          分布關系

          利用空間分區來展示數據之間的分布關系,常用于體現兩個或以上數據的相關性。

          常用圖表:散點圖、熱力圖、雷達圖等

          關鍵詞:“隨著……而變化、A/B之間的相關性、交/并集”等



          關聯與流轉

          流轉關系是B端數據常用的一種關系,它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等,以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

          常用圖表:關系圖、?;鶊D、漏斗圖、進度圖等

          關鍵詞:“流程步驟、留存、轉化、關系”



          2. 分析數據特征

          按數據關系和分析目的選擇好圖表類型后,第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有:變量特征、維度特征、層級特征、流程特征。


          變量特征

          分辨一個指標通常有兩類特征,按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢,離散數據通常統計各分類下數量的變化。

          • 連續型數據:指在一定區間內可以任意取值的數據叫連續數據,其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等,通常用折線圖體現變化趨勢。
          • 離散型數據:指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據,用柱圖表現更加體現變量的特征。


          維度特征

          多維度分析需要將多個變量在同一平面上直觀的表示,可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據,可使用不同顏色進行分類

          • 根據分析視角選擇圖表:對于多維度變量的數據我們需要明確分析的視角,去找準對應的數據映射。如案例中多個班級的科目成績的這組數據,如需要全局視角查看個班的綜合素質,推薦使用雷達圖;對比單科成績的變化分布,則推薦使用堆積圖。


          層級特征

          多層級數據由多個部分構成一個整體,又稱樹形結構數據。除了用結構樹圖表表現以外,還可以考慮以下兩種圖表類型:

          • 矩形樹圖:突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小,它以面積的形式突出展現各個子層級節點的占比,可幫助用戶看到數據的層次結構以及各層級之間的關系。


          例如:上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額,通過色調來區分不同類型,顏色的深淺代表分類下的子集,面積體現銷售占比。對比一般結構樹圖表,它的優勢在于可以有效利用空間。

          • 旭日圖:突出細分層級關系。由多個圓環圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。常用于細分分析方法,將事物從大到小進行拆解。每個級別的數據通過1個圓環表示,離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效,而矩形樹圖適合比較相對大小。


          流程特征

          流轉關系是表達數據轉化流程的重要類型,不僅包含統計意義上的數據總和,同時還表達了信息流轉的路徑;其中?;鶊D和漏斗圖都可以表達路徑中流量的變化,不同的是?;鶊D重點強調流量的強度和走向,漏斗圖更加注重突出轉化率和效果,根據不同的表達目的選用。



          二、強化視覺層次


          選擇合適的圖表后,在信息傳達上也需要正確的表達,展示形式美觀的同時能夠清晰的體現數據特點。


          1. 強化數據特性

          使用圖表正確的表達信息,需要設計師在強化數據特性的同時避免偏差

          • 趨勢易感知:折線圖數值如過于平均導致趨勢平緩,有時候無法體現偏差;在強調數據趨勢的場景下,推薦用動態取值范圍讓波動保持在一定范圍內,放大波動占比更突出趨勢。


          • 展示更準確:柱狀圖依靠柱體面積體現最終數值,使用動態范圍截斷將會導致數據解讀不完整;始終將 y 軸從 0 開始,才能更準確的反映柱圖中的值。


          2. 色彩視覺傳達

          除了在設計構圖上優化以外,顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知,錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板,精確傳達信息同時后續的項目在選用時也可以達到用色的統一。



          我們在之前的文章里有介紹過圖表的取色模型,通過調整顏色HSL值的區間,可以得到以下三種意圖色板:

          • 定性型-分類色板:用于區分不同的類型,又稱為無序色板。適合區分沒有內在順序的類別
          • 定量分歧型-發散色板:通過兩邊互補色來體現,具有明亮的中間值,然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
          • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數字。

          那么我們要怎么樣去使用這些色板呢?下面幾個案例將帶你了解其中的差異。


          定性型:使用色調來進行分類

          數據內在沒有順序差別時,建議使用色調值(H)進行區分;如定義國家、行業等類型。如果希望圖表看起來更加專業,以下有幾項分類色板的小建議:

          • 選取盡量少的色調:取色時無需使用整個色環,使用鄰近色或互補色的取色方式顯得更加專業。


          • 色板適度明暗交替:一些視障人士無法區分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調整,創造明暗交替的色板。


          定量型:使用深淺色板強調內在順序

          如果在同一個分類下包含子類別,或者數據本身具有排名屬性,那么建議使用連續色板來突出他們內在的順序,使圖表更加易讀。

          • 順序色板-選擇合適的插值:根據數據的分布情況選擇不同的的插值斷點,突出數據的差異。如以下案例中,根據統計學概念設定不同的取值區間,左側示例使用的是平均線性差值,反映的是數據的集中趨勢;右側示例使用的是中位數插值,能更好的體現數據分布的形態。


          • 發散色板-關注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍的綠色更易分辨,對視障人士也更加友好。


          三、圖表中的響應式設計


          B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報,在基礎設計完成后還需要考慮到圖表展示的環境,根據不同端去適配顯示效果,以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。


          1. 布局框架適配

          在網頁端顯示時,有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態,將非必要的的元素轉化或隱藏,保留重要的圖形元素去適應當前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時也避免產生元素的重疊。



          如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達到適配當前空間的效果。

          2. 圖表元素適配

          要適配移動端,網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外,還需要考慮手機屏幕的尺寸和圖表元素的適配性,去兼容相關的交互操作。

          • 信息浮層:在圖表中,信息卡元素是傳達信息內容的重要組件,在網頁端中懸浮展示,通常會占據很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應數值,完整展示信息的同時也避免了頁面抖動。


          • 坐標軸標簽:過長的坐標標簽在適配過程中會產生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配,避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配,精簡空間避免堆疊。


          3. 極值適配

          因B端平臺的特性,我們無法預知客戶傳入的數據量,可能會遇到因數據量過多,造成圖表顯示不佳,數據讀取困難等問題。這種情況下,提前考慮數據極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時信息展示更靈活。

          • 縮放和平移:在數據范圍過多時增加取值范圍的縮略軸組件,通過限制展示范圍讓數據量顯示可控。


          • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認狀態僅當前組折線高亮,其他數據以淺色顯示,通過切換的方式查看其他組別的信息。


          • 懸浮鼠標高亮:在分類過多不好分辨時,可使用懸浮高亮的交互方式突出相關聯的數據組。


          還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨立介紹。


          // 結語


          數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確,才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據,確保用戶能夠更好的接收信息,才是可視化的關鍵。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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


          簡約設計4原則在表單設計中的應用

          ui設計分享達人

          隨著B端體驗設計的發展,表單類頁面已經形成了一定的設計模式,例如登錄頁面,場景比較明確、業務流程和設計模式都比較成熟了。

          業務型表單設計與業務強相關。既需要考慮交互帶來的用戶體驗,又要從業務角度出發滿足用戶的行為需求,相對比較復雜。不過也形成了一些固定的設計方法。今天我們先來看看「精簡」策略。

          本文主要內容:

          刪除,實現表單輕量化

          組織,讓表單更加有層次

          隱藏,讓表單更加靈活

          轉移,擴展表單的異步空間


          表單是系統與用戶進行溝通的語言,它應當符合雙方的認知邏輯。因此表單設計時,需要解決「產品」和「用戶」2個方面的問題:

          ? 表單需要用戶提供哪些信息,保證信息的正常流轉和業務的完整

          ? 用戶如何理解這些信息,如何更好地幫助用戶完成表單填寫

          尤其是面對復雜表單,需要從這兩方面尋找到突破口。

          在業務層面,設計師需要探究用戶的實際需求,反思表單項是否必要,從而減少不必要的選項,提高用戶效率。

          同時在設計層面,還需要基于用戶認知習慣,通過合理的信息組織、交互形式幫助用戶完成表單任務。

          復雜表單通常包含多種業務場景,并且與其他業務存在關聯和嵌套,導致表單內容信息量較大。我們需要通過「刪除」、「組織」、「隱藏」、「轉移」4個交互設計原則,讓表單頁面更加簡單、有效。



          ▎01 刪除,實現表單輕量化

          前幾年,我們在銀行或者移動營業廳開通一些新業務時,都會填寫表單,通常是密密麻麻一堆信息。但是實際需要填寫的內容可能只有2~3項,業務人員會特意勾選出來給客戶,其余的都是非必填項,或者是業務人員填寫的。

          線上表單設計時,沒有專門的業務人員指導,用戶更容易迷失。所以設計師或者產品經理的首要任務就是盡可能地減少表單信息量,降低用戶的認知負荷。

          最近在做一個表單的優化,業務方要求增加“入參”、“出參”兩個表格項,說是用戶會看。與用戶溝通后,反饋也說“會看一下”。但是在深度挖掘用戶場景后,發現用戶確實會查看這個信息,只不過不是在當前環節查看,而是在結果項中查看。

          所以我們最終去掉了這兩個信息量較大的表格內容,從而讓整個表單的信息量得到了明顯的下降。因此面對復雜長表單,我們需要從需求入手,判斷是否有必要讓用戶提供如此多的復雜信息。

          ▎02 組織,讓表單更加有層次

          當我們不得不面對復雜表單時,如果采用簡單內容平鋪,用戶看到的是滿屏的散點信息,造成信息識別困難,用戶一時間難以找到填寫思路,反而增加用戶的心理負擔。因此信息的層次性,對于復雜表單至關重要。

          首先要從內容和視覺層面讓復雜信息變得清晰、規整,更加符合用戶的認知習慣。例如,可以利用分組標題、分割線、卡片,按照不同信息的類別、屬性和相關性進行區塊劃分。

          根據不同的布局和交互,主要有以下4種表單設計模式。



          1、順序表單

          表單分組后,可以按照業務邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單,這種布局方式下,用戶無法全覽頁面信息。頁面上下滾動、定位查找帶來的交互成本比較高。

          1)平鋪表單



          2)卡片表單



          因此順序表單更多地用在業務信息比較簡單的場景中。

          2、錨點表單

          為了解決長表單的定位效率問題,可以在順序表單的基礎上增加錨點。另外錨點還可以幫助用戶快速了解表單所包含的內容模塊。

          根據錨點的布局,可以分為橫向錨點和縱向錨點兩類。錨點需要吸頂方便用戶操作。本質上來說,錨點表單是順序表單的優化版本。






          3、標簽表單

          如果長表單內容沒有依賴關系,還可以將表單拆分為幾個相互獨立的標簽內容,這就是標簽表單。



          不過標簽表單更強調內容的并列關系,常用于配置表單中,例如 MAC 或者 Windows 系統的配置彈窗。標簽表單在全新表單中應用較少。



          因為標簽表單容易造成內容遺漏,并且無法告知用戶哪些標簽已經填寫,哪些標簽未填寫,或者無法清晰展示校驗信息。來回切換標簽查看信息,也會影響效率,因此主要用于用戶有目的的配置行為中。

          4、步驟表單

          步驟表單是一種常見的表單拆分方式。通過節點將子表單串聯起來,形成一個完整的業務閉環。例如阿里云的云服務器訂單流程,或者一些開戶流程等。



          步驟表單有幾個特點:

          1)過程串聯

          理論上來說,步驟表單有明顯的操作順序,用戶需要按照節點完成內容填寫,因此不會產生信息遺漏。當然也可以根據實際的業務場景,設置選填節點。但是總得來說,步驟表單更強調的是順序操作。

          2)業務引導性

          對于復雜業務,步驟表單可以將分散在不同頁面中的獨立業務串聯起來,在一定程度上具備新人教學功能,幫助用戶了解業務邏輯。減少用戶自定義操作時在不同頁面的跳轉,從而提供新人用戶的操作效率。例如系統配置向導類的步驟表單。

          3)逆向操作

          由于步驟表單存在正向和逆向操作,因此設計時還需要考慮清楚逆向操作的設計邏輯。例如:

          當用戶想要修改前面步驟信息時,除了逐步返回,是否可以步驟條直接跨節點修改?

          用戶中途退出表單后,重啟時是從第一步開始,還是直接從未填寫的步驟開始呢?

          ? 用戶如果完成了步驟條表單填寫,想要二次修改時,是用普通表單,還是仍然使用步驟表單形式呢?

          4)節點的平衡性

          步驟表單可以分拆信息,化整為零。但是信息節點也不能過多,否則同樣會影響用戶的操作效率。所以要減少不必要的流程節點。

          最近在做設計時,發現步驟表單最后一步是內容預覽。通過用戶調研發現,部分用戶會謹慎地預覽前面4步填寫的內容。而另一部分用戶則認為,剛填寫了內容不需要預覽,強制預覽的設計并不友好。該如何平衡設計呢?

          最終我們選擇了將預覽節點取消,將預覽功能調整到第4步,采用「預覽」按鈕的形式。既滿足了部分用戶預覽的需要,另一部分用戶也可以不做預覽,直接提交申請。

          所以步驟表單過程中的節點具有一定的強制性,需要謹慎對待,保證節點的合理有效。

          ▎03 隱藏,讓表單更加靈活

          1、模塊隱藏

          表單實際上是任務信息的集合,為了具有更高的適配性,內容通常是多種場景的集合。而場景有高頻、低頻區分,對于高頻信息需要優先展示,便于提高用戶的填寫效率;對于低頻場景,可以隱藏弱化展示,從而降低整個表單的復雜度。

          例如我們常見的「高級配置」,通常在表單的底部默認收起展示。



          2、信息隱藏

          復雜表單中信息會出現多級信息共存的場景。這種場景下,復雜表單默認展示當前選項對應的子內容,隱藏其他選項的內容,從而提高信息的指向性。



          3、合理的組件形式

          比較典型的就是單選和下拉選擇器如何選擇。有人為了強調效率,一味地追求單選按鈕平鋪展示,認為單選更加直觀,用戶不需要點擊下拉滾動查看備選項。但是用戶同樣需要逐個瀏覽選擇,反而增加了整個頁面的信息量。

          所以單選框更多用在備選項較少的場景,如果備選項較多,建議優先采用下拉選擇器,隱藏備選項。

          ▎04 轉移,擴展表單的異步空間

          1、信息轉移

          在表單設計時,可以將部分二級信息轉移到彈窗、抽屜中,利用浮層空間拓展業務內容,根據用戶操作逐級加載出來。從而減少表單的信息量。

          例如下圖中,沒有將「所有配送區域及運費」直接展示出來供用戶選擇,而是放在了彈窗中,表單中只呈現最后的選擇結果。既簡化了表單的內容,又讓選擇結果更加突出,方便用戶的查看和校驗。



          2、記憶轉移

          現在很多瀏覽器都增加了密碼存儲功能,減少用戶記憶成本。而在電商購物網站可以設定默認的收貨地址。系統自動讀取調用,從而減少用戶的輸入操作。

          3、行為轉移

          現在越來越多的網站支持「手機短信驗證碼」免密注冊登錄方式,或者第三方登錄方式,或者手機端掃碼登錄。將原有的表單填寫轉變為系統行為,從而降低用戶的行為成本。



          好了,以上就是我總結的表單設計的內容~

          重復一遍:

          刪除,實現表單輕量化

          組織,讓表單更加有層次

          隱藏,讓表單更加靈活

          轉移,擴展表單的異步空間

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系。 

          作者:騰訊ISUX團隊    來源:子牧先生


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          用「用戶體驗五要素」整理「Live Activities設計規范」

          ui設計分享達人

          眾所周知,「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書:戰略層、范圍層、結構層、框架層、表現層。
          產品設計者和開發者的角度可以對應理解為:為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。



          「Live Activities設計規范」由蘋果出品,原文為英文,上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」,使用比較熟悉的「用戶體驗五要素」對內容進行整理。

          1. 戰略層——為什么做

          原文提供的Live Activity定義如下:
          A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.
          “Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

          從原文可以提煉出Live Activity顯示特點:

          1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。

          2. 內容的信息量是一眼就能看完的程度。


          但上述仍是表象,并非實質,接下來思考這幾個問題:

          1. 為什么顯示的是進度/狀態頻繁更新的內容?

          2. 為什么要強調用戶關心的?

          3. 為什么信息量是一眼就能看完的程度?

          沒有Live Activity頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋,且隨著各種APP的頻繁使用,用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。


          進度/狀態頻繁更新的內容,說明每個狀態存在的時間短,如果被覆蓋/忽略,同一狀態就不再復現,用戶所關心的,或APP所希望用戶關心的,就看不到了。比如:什么時候取外賣、待付款、上傳成功等等。


          當下我們所處的時代是信息泛濫的時代,需要對信息作精簡,但用戶的操作是可以多條線進行的,比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。


          信息內容和量是官網一直在強調的,需要精簡,只展示用戶需要的,基本達到一眼看完的程度,目的就是知道變化的是什么,當前狀態是什么。

          分析了這么多,大膽推測一下Live Activity的設計初衷是:快&準確&輕。而終極目的是打動用戶,形成好體驗,進而推動口碑和銷售;為各APP提供新的通知形式,互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。



          2. 范圍層——做到什么程度

          關于這個層次相當于規定功能范圍&信息邊界限制,就是什么要,什么不能要。這部分的信息官網給出許多,在此將其分類梳理如下,為避免大家不好查找官網/譯文對應出處,在句未已標注。

          1)硬性限制

          1. 僅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平臺注意事項)

          2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。(源自:什么是Live Activity-鎖屏)

          3. 支持用戶手動清除鎖屏狀態下的Live Activity(源自:實際操作)

          4. 支持用戶直接關閉對應APP的Live Activity。(源自:最佳實踐方式第3/c條)

          5. 支持Live Activity自動開始&結束。(源自:最佳實踐方式第6/f條)

          6. 限制跟蹤活動/狀態時長不超過8小時。(源自:最佳實踐方式第1/a條)

          7. 限制活動/進程結束后展示時長不超過4小時。(源自:最佳實踐方式第8/h條)

          8. 支持更改背景顏色&不透明度。(源自:設計有用的Live Activity第5/e條)

          9. 限制內容布局。(源自:設計有用的Live Activity第5/e條)

          10. 限制不同設備的展示尺寸。(源自:規范)

          2)非硬性限制

          1. 避免在Live Activity中顯示敏感信息。(源自:最佳實踐方式第4/d條)

          2. 避免在Live Activity中顯示廣告和促銷活動。(源自:最佳實踐方式第5/e條)

          3. 只提供正在進行的任務/事件的關鍵摘要。(源自:最佳實踐方式第2/b條)

          4. 在任務/活動結束前,給用戶提供關閉Live Activity按鈕。(源自:最佳實踐方式第6/f條)

          5. 點擊Live Activity直接定位到對應頁面,無需用戶二次導航。(源自:最佳實踐方式第7/g條)

          6. 考慮在活動結束后,鎖屏上在合理時段后自動刪除Live Activity(源自:最佳實踐方式第8/g條)

          3. 結構層——這些東西如何組成?

          (個人猜測)由于是提供一個展示區域,且展示區域有限,所以對于層級架構,一級展示什么,二級展示什么,各階段展示什么,這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。

          4. 框架層——規劃用戶操作行為

          通過Live Activity的展示形式,可以總結為2點:吸引、查看(摘要&詳情)。

          1)吸引

          1. 一般是在原深感攝像頭兩側展示(電話會直接展示擴展型),分為緊湊型和最小化。

          2. 緊湊型在僅有一個活動/事件的時候展示,雖被原深感攝像頭分割兩端,但僅作為一條信息展示,為了視覺上的統一,這里的顏色不支持開發設置,使用的是系統默認色值。

          3. 最小化在存在多個活動的時候展現,左側和原深感攝像頭粘連,右側獨立成島。

          4. 不管是緊湊型,還是最小化,都可以通過點擊原深感攝像頭區域,進入APP內頁,或者長按喚出擴展型。



          2)查看

          1. 進入內頁的查看基本就是各家顯神通了,這里主要講擴展型和鎖屏。

          2. 原則上是不支持在擴展型和鎖屏做復雜操作的,基本點擊是進入APP。

          3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域,內容是可以自定義的,當然官方也給了相應的建議,具體如下。內容信息種類多的可以采用這種信息左中右排布,底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。



          4. 根據一致性原則,鎖屏展示的布局框架應該與擴展型差不多,同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行,是會全部展示的,所以要注意品牌的傳遞,避免用戶混淆服務方。



          5. 表現層——如何呈現這些東西

          對于如何呈現這些東西,蘋果還是寫了很多建議,確保視覺上的一致性和美觀。

          1)顏色

          1. 緊湊型狀態下,為了保證兩側信息的連貫,除了語句閱讀連貫,還需要在圖形和顏色上具有一致性,視覺上連貫。

          2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的,當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。

          3. 設計師不僅要考慮最佳狀態,還有深色&淺色模式下的,以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的,就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取,還需要考慮美感問題。

          2)間距布局

          1. 緊湊型和擴展型之間的布局要保持一致,兩者間的變化過渡效果是可以預測的。

          2. 一般來說,擴展型和鎖屏狀態下的信息間標準間距是20pt。

          3. 在某些情況下,例如圖形和按鈕,您可能需要使用更緊湊的邊距,以避免擠滿邊緣或形成混亂的外觀。

          3)圓角

          1. 內容和Live Activity邊緣之間的邊距需要保持一致,請遵循SwiftUI規則。

          1內容和Live Activity邊緣之間的邊距需要保持一致,,發現以圓角邊界為測距點得到的間距關系較為舒適。即:圓形/大致為圓形的圖形保持上下,3. 以及左側或者右側間距一致即可;方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一,才能確保間距的一致性。



          4)尺寸

          需要適應不同機型的尺寸。具體的尺寸規范如下。

          a. 靈動島

          動態島使用44個點的角半徑,其圓角形狀與原深感攝像頭相匹配。



          b. Live Activity大小

          下表中列出的所有值均以pt為單位。
          ps:左側為寬度,右側為高度。



          以上就是整理分析的全部。

          在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解,也對Live Activity在各個層次上的要求更加明確。


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

          作者:Viola_1241     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          閱讀可視化1:《交互設計沉思錄》第一篇

          ui設計分享達人

          不太愛看書,看了老忘,就很容易失去信心,垂頭喪氣、一蹶不振。

          比較喜歡做圖,把信息間的邏輯以圖示化的方式表現出來,能加強理解,后期回顧也會比較舒心。

          所以就有了這個系列——閱讀圖示化。

          可能會出得很慢,畫圖比較費時間,想著怎么展示信息間的邏輯也很費時間。

          基本是按著小節一塊內容對應單圖/多圖。

          基本一張圖是一個完整的知識點。





























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

          作者:Viola_1241     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          經典案例研究:推動業務發展,利用B端設計挖掘潛在價值

          ui設計分享達人

          當今提到促進業務增長,尤其是有關互聯網行業,總是繞不開B端設計。那么今天我們來挖一挖B端設計到底牛在哪里。

          1、什么是B端設計

          B端設計是指針對企業的終端用戶的產品設計,包括適用于消費者、企業、政府、行業等等市場的協同、全方位的客戶體驗設計,例如產品UI/UX設計、信息可視化設計等等。B端設計是提供終端用戶新的解決方案,注重以客戶的需求為導向,通過數據分析、可視化、流程優化等手段來進行產品設計。

          在一個產品設計中,要考慮到用戶的體驗,UI/UX有著至關重要的作用,它能夠把產品從用戶的角度出發,將用戶直接引入到設計之中,使用戶步入終端,真正成為使用者。

          此外,B端設計還要注重對業務流程的優化,例如在訂單管理系統的設計中,需要把客戶的需求分析清楚,盡可能用最少的步驟幫助客戶快速進行訂單操作,增加操作效率;同時,也需要考慮到如何將整個管理系統融入到業務流程之中,使其成為一個可持續發展的解決方案。

          此外,B端設計還需要考慮系統安全性和可用性。系統安全性指的是在設計過程中重視數據安全,例如考慮不同用戶的權限,避免未經授權的訪問以及防止誤操作等;而系統的可用性則指的是系統操作的一致性,即如何在使用中滿足客戶的需求,在系統功能上保障系統的完備性和易用性,為用戶提供更方便的操作體驗。

          2、B端設計的組成部分

          正確的B端設計應包括:用戶界面設計、業務流程的優化、系統安全性以及可用性的考慮等。

          用戶界面設計的目的在于提供簡單易用的用戶界面,以滿足客戶需求,提高用戶體驗。

          業務流程優化則是確保系統能夠有效地協調用戶間的溝通,使用戶流程更加高效、可靠。

          系統安全性考慮需要重視數據安全,增加對不同用戶權限的考慮,以避免未經授權的訪問以及誤操作。

          而系統可用性方面,則需要系統操作一致性,保障功能的完整性和易用性,使用戶操作更加便捷。

          用戶界面設計還需要考慮跨瀏覽器的兼容性,以確保用戶能夠在不同的終端上獲得有效的使用體驗。此外,對于功能性更強的應用,還需要考慮響應速度、網絡請求數和業務性能等方面的優化,以便在處理大量的信息時能夠有效地完成任務。

          對于不同的用戶群體,應當提供相應的交互界面設計,例如考慮弱智使用者和視覺障礙者,以及嬰幼兒等特殊群體。此外,可以通過支持多種語言、國家文化差異和地域語言來優化用戶體驗。

          3、如何使用B端設計原則來推動業務發展

          B端設計原則可以幫助企業更好的把握商業機遇,推動業務發展。

          首先,應當按照核心業務找出客戶需求,深入挖掘,從客戶視角出發,明確目標。

          其次,要強化設計意識,注重交互性,利用技術手段和平臺將功能元件組合在一起,以便更好地解決客戶面臨的問題和滿足客戶的需求。

          最后,對產品的功能、使用效果和用戶體驗進行定期的測試評估,根據反饋進行變更和優化,以滿足客戶的需求。

          4、如何利用B端設計實現潛在的價值

          為實現B端設計的潛在價值,可以采用多重方法,比如從創新的角度增加產品的附加值,加強功能和服務體驗,提升網站可用性,優化頁面布局,提高頁面加載速度等。

          另外,還可以改進客戶體驗,通過可視化或語音技術提升網站和移動應用的交互性,以便讓客戶更容易獲取想要的信息和服務。

          此外,可以加強產品的社會化和移動性,以便更好地滿足客戶的需求,從而獲得更多的潛在價值。

          對于B端設計來說,還要考慮技術層面的因素。

          首先,應根據客戶使用情況進行系統優化,以提高系統效率。

          其次,要重視人機交互技術,盡可能提供給用戶更好的界面體驗,并利用智能技術提升用戶體驗。

          此外,應結合實際情況,采用合適的網絡技術和安全技術,提升網站的安全性。

          最后,還要將設計與市場營銷結合起來,通過有效的營銷手段,提高客戶購買意愿,以獲得更多的潛在價值。

          B端設計要考慮的技術層面因素有:系統優化、人機交互技術、網絡技術和安全技術以及營銷手段。這些都是為了能夠更好地滿足客戶的需求,并獲得更大的價值。

          5、優秀的B端設計案例,以及借鑒價值

          首先,淘寶的B端設計把價值的提升放在了首位。它通過實時監測用戶行為來分析用戶習慣,以實現實時調整,提升客戶體驗。此外,淘寶的營銷手段也讓它的業務獲得了極大的成功。

          另外,微信也是一個優秀的B端設計案例。它引入了更多的人機交互技術,以有效溝通用戶,同時也提供更安全、便捷的服務,大大提升了用戶體驗,獲得了廣泛的應用。

          總之,優秀的B端設計不僅能優化用戶體驗,還可以帶來更多的商業價值。

          從用戶體驗角度來看,優秀的B端設計應包括系統優化、人機交互技術、網絡技術和安全技術,這樣可以給用戶提供更流暢的體驗,更快的響應速度和更好的安全保障。

          此外,B端設計還應該擁有一套完整和靈活的營銷手段,幫助企業獲得更多的客戶價值,以提升品牌影響力和競爭力。

          要做好B端設計,一個重要的方面是把用戶群體的心理需求和行為習慣結合起來,設計出更具吸引力的產品界面。例如,可以通過實時調整產品配置、設定營銷活動等手段來滿足不同用戶群體的需求。

          另外,為了提升用戶體驗,應該使用更智能化的人工智能(AI)技術,幫助企業更好地分析用戶行為,從而更有針對性地進行產品調整。

          總而言之,B端設計的成功關鍵在于結合用戶群體的心理需求和行為習慣,并利用智能化的AI技術對用戶行為進行分析,只有這樣才能設計出更具吸引力的產品界面,滿足不同用戶群體的需求,并提升用戶體驗。

          在企業開發B端產品之前,應該先進行大量的市場調研,以便弄清楚用戶的心理需求和行為習慣,這也是設計成功的前提。在制定設計思路時,應該結合用戶需求和行為習慣,并加入智能化AI技術,以有效調整產品界面,使其更具吸引力。在可行性研究階段,應該采用多種方法,以測試產品整體性能,包括安全性、可靠性等,確保系統可以正常運行,避免潛在風險的發生,為用戶的體驗提供完善的保障。市場調研是設計成功的先決條件。除了市場調研,企業還應該采用新穎的營銷策略,以拓展客戶群,豐富產品服務,提升用戶體驗,實現B端設計成功。


          作者:和阿莫伊
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          作者:和阿莫伊     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          淺析:設計趨勢之開源設計

          ui設計分享達人

          什么是開源設計(Open Source Design)

          在講開源設計前,我們或許可以先講講開源一詞是指什么。

          開源全稱開放源代碼,開源軟件最大的特點是開放,也就是任何人都可以得到軟件的源代碼,加以修改學習,甚至重新發放,當然是在版權限制范圍之內。雖然開源一詞最初是為軟件開發而創造的,但現如今開源所涉及的領域也極其廣闊,并不只是包括軟件領域,如醫藥領域的藥物開發開源、文化領域的書籍到期開源等等所以開源設計已包含了更廣泛的含義,它包括了由任何人或者團隊自由共享、協作的設計方案、項目、產品。

          我們來看幾個大型開源的設計了解一下~

          開源設計資源舉例

          Ant Design

          阿里的開源系統后臺組件庫

          https://ant.design

          ECharts

          百度推出的開源圖表

          https://echarts.apache.org/

          Unsplash 

          全球知名圖片開源平臺 

          https://unsplash.com

          所以我們不難發現開源設計都有以下特點: 

          免費(大部分是):開源設計的一個關鍵要素是它們通常(但不總是!)免費。這是一個重要因素,因為閉源設計通常需要花費不菲的價格或者冒著侵犯版權的風險去使用。 

          思想碰撞:更多的設計師或者創意愛好者共同為一個創意提出自己的見解和再設計。


          設計開源領域廣闊:設計開源領域也幾乎涵蓋了所有的設計和創意領域如平面設計、三維設計、用戶體驗設計、環境設計、建筑設計、服裝設計、插畫、動畫設計等等 

          但是許多人可能會有一個疑問,開源設計和以往的素材網站或者源文件售賣網站有什么區別呢? 

          在我看來,開源網站與傳統售賣設計資源的網站最大的區別是開放與共建,以figma的社區為例,作者發布作品后,任何人都可以對其作品進行redesign甚至remix,這極大的提高了設計師的興趣,每個人都希望自己的作品能被他人看到,也希望自己的創意能與他人的創意進行更好的結合,這是一個多么美好的場景。而傳統網站只是冷冰冰的展示文件售賣資源,缺少了設計中的靈魂。 

          那說了這么多,開源設計到底有哪些優勢呢?

          開源設計的優勢 

          提升設計效率:設計師不應花費時間去解決別人已經解決的問題,比如當我設計一個新項目時,無需從零開始設計系統組件,可以直接使用Ant Design、Ant Mobile Design等現有組件庫。


          增加學習機會:通過開源社區,設計人員可以從其他人所做的項目中學習,并與專業人員交流經驗。 

          提高設計質量:設計師自己看本人作品時,往往是身在其中不知如何下手,而將作品發布到更廣泛的社區有助于設計師獲得有價值的反饋以改進他們的作品。 

          提升品牌價值:對設計開源后,公司品牌能在某些領域內獲得傳播,提升品牌價值。并且在招募人才時也能成為有吸引力的一項條件。 

          提升個人價值:一個設計師想要提升個人價值和影響力,可以用開源作品來在行業內獲得一定口碑,甚至直接將用戶流量轉化為訂單,或許是更簡單且容易的事情。 

          從這些優勢中不難發現,在開源生態中,我們的作品不再是一座孤島,通過互聯網,我們的作品可以和任何人進行鏈接并且產生共鳴,提升品牌和個人的價值,所以每個人都值得感受開源的美好。 

          但開源的同時不可避免的會帶來許多新的問題和挑戰,讓我們一起來看一下。

          開源設計帶來了哪些挑戰 

          知識產權問題:在開源社區中,設計師可能不清楚其創作的知識產權。因此,他們可能會不自知地侵犯其他設計師的知識產權。 

          設計門檻問題:設計開源意味著設計師的門檻變低,任何人都可以隨意使用開源的設計項目,導致設計師不再愿意花心血創作。 

          設計師競爭力下降:開源設計意味著普通的設計內容已不需要單獨的設計師來完成,頂尖設計師的機會會更多,而普通設計師的競爭力會明顯下降。 

          隨著這些挑戰的來臨,如何更好的面對設計領域的開源是值得深思的問題,既要保護設計師的自身利益,也要讓設計行業在開放、共享的環境下擁抱變革,所以在未來的道路上,我們每個人都可以嘗試用自身的方法去探索未來,讓每個人都能成為時代浪潮中的一朵浪花。


          作者:芝麻侃設計
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          作者:芝麻侃設計     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          垂類品牌年輕化重塑—有駕品牌升級

          ui設計分享達人

          什么是“有駕”

          【有駕】是百度旗下的汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。 

          現狀分析

          有駕品牌在孵化初期,重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號,減少歧義,強化用戶的感知。

          但是隨著品牌持續運營進入新的階段,我們發現現有的設計無法滿足后續的運營訴求了,主要體現在:

          品牌logo:不能體現汽車的行業屬性,缺乏成體系的品牌符號和VI體系,色彩上也不夠符合時下潮流的年輕配色體系。

          品牌活動:品牌關聯度弱,活動維度單一。



          項目概述

          因此,我們重新梳理有駕的品牌定位與調性,借助本次品牌升級,打造有駕差異化風格,形成獨有的視覺印記。

          因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知,在原有基礎上進行品牌標識的探索及應用,以強化品牌感知,提升品牌的競爭力,整合業務資源做心智觸達。





          前期分析

          前期我們對汽車垂類的競品進行了一輪調研,并且結合有駕的用戶群里,尋找有駕品牌的差異點。

          有駕用戶群體年輕化為主,普遍具有高學歷,集中在新一線二線城市。

          通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后,我們確定了有駕品牌設計的四個核心關鍵詞:年輕、科技、未來、專業。



          建立體系

          在明確設計方向后,我們梳理了線上線下的所有品牌觸點,結合前期的調研結論,匯總出了有駕設計系統的完整框架,以確保品牌設計的完整性和靈活適用性。




          設計落地

          基于前期分析洞察結論,我們在繼承圓形和車形的基礎上,對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入,簡化圖形形態,嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。




          相對于升級前,新版的logo加入汽車元素,解決升級前logo的行業屬性不明確的問題,讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋,輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。





          符號提煉

          確定品牌logo后,為了確保品牌能夠更好的拓展應用,進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型,造型偏向輪胎;在不破壞原有型的基礎上,加入一些折角的質感的變化,使圖形變化更加豐富,更有識別度。





          設計語言

          為了更好的觸達到各業務場景,所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向,以適配不同的落地場景。結合有駕的年輕化,科技感的設計目標,探索出以下三種質感呈現:






          符號拓展

          在提取的形狀基礎上進行變形,增加折疊細節。在大事件活動,海報等場景使用,增加品牌關聯度。




          設計字體

          結合全新的品牌定位,我們也優化了有駕的品牌字體,從細節出透出有駕的品牌感知。




          品牌手冊

          新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。

          目前我們也對現有的品牌手冊進行拓展和完善,同步到業務方,以便更好的保證各業務場景觸點下品牌的認知和統一,達到提質增效的目的。



          品牌落地

          除了對品牌對角度的塑造和升級,我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中,讓有駕品牌形象更加立體多元。









          結語

          目前有駕品牌升級已經取得階段性成果,沉淀出更加完善的品牌資產,不僅提升設計效率保證全鏈路的品牌曝光,也為業務規?;蛳禄A。之后我們也將不斷完善和擴充品牌資產,將設計成果不斷落地到業務中,細化業務目標并與設計目標緊密結合,多維度助力業務的高速發展。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          作者:百度MEUX     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          效率至上|帶你認識提升用戶效率的4種方法

          ui設計分享達人

          從事體驗設計這么多年,經歷過多款B端和C端產品的體驗設計,有了一定的個人感悟。由于兩者用戶群體、使用場景、產品定位等方面的不同,讓兩者的體驗設計策略也存在較大的差異。但是無論是B端還是C端產品,有一個共同的體驗目標就是“提升用戶的操作效率”。甚至在一定程度上,C端產品比B端產品要求更高。

          為什么這么說呢?

          因為C端產品面臨激烈的市場競爭,如果效率方面存在明顯的不足,用戶很容易就轉向其他平臺了。而B端產品一旦部署上線,不菲的產品價格,平臺切換的風險,數據遷移的成本等因素,很容易形成產品的護城河。雖然用戶內心已是萬馬奔騰,但是依舊要自己摸索嘗試、查看文檔、或者請教別人來完成工作任務。

          今天我們了解下C端產品用戶行為路徑中提升效率的4種方法。



          一、用戶行為探知

          用戶行為探知,就是根據用戶的操作行為或特定的時間,系統給出相應的推薦操作。

          1、用戶操作感知

          最常見的就是截屏操作產生的行為引導,目前主流的產品應用都會做出分享功能提示。在淘寶中,由于商品鏈接無法在微信中直接分享,所以淘寶對可能的用戶分享行為都進行了設計優化。

          例如用戶在商品頁面截屏時,系統會自動復制淘口令,既方便用戶分享給好友,又方便了對方快速獲取商品信息,避免了圖片分享過程中的復雜操作。同樣微信在用戶發信息時,會自動提示是否要發送截圖內容,減少了用戶選擇圖片等操作流程,提升了用戶效率。



          (左圖:淘寶截屏提示 右圖:微信提示截屏信息)

          2、用戶行為分析

          高德地圖在特定時間段,開啟導航時會默認給出“上班路線”的按鈕,方便用戶快速導航。此外還在地址中增加了“常搜”標簽,根據當前地址優先顯示常搜的地址,幫助用戶快速完成導航設定。



          二、用戶行為引導

          用戶行為引導,就是通過用戶行為流程分析,在用戶路徑中增加相關功能的曝光和引導,讓流程更加流暢,從而提高用戶的操作效率。

          1、行為流程引導

          淘寶購物商品詳情頁中,在最后幾張商品圖片中植入了評價信息和入口,更加符合用戶的心智,引導性也更強。同時用戶可以直接選擇自己喜歡的款式查看商品評價,操作效率也更高。

          而且增加評論引導后,實現了用戶在首屏就可以了解商品、價格和用戶評價,有利于用戶對商品作出初步的購買決策,從而提高用戶效率。



          相比之下,專門的評價模塊進入后默認顯示全部商品的評價信息,用戶需要手動選擇才能查看自己喜歡的商品款式的評價信息,無形中拉長了用戶的行為路徑,增加了用戶操作成本。

          2、操作行為轉化

          在今日頭條中,搜索行為與資訊內容綁定。用戶在瀏覽的資訊后,資訊下方會自動顯示搜索關鍵詞,可以幫助用戶更快捷的進行搜索操作。

          同樣在熱榜資訊下方增加了詳情提示,引導用戶去查看事件詳情。



          (左圖:搜索關鍵詞推薦 右圖:熱榜引導)

          三、用戶行為聚合

          手機產品屏幕的空間相對較小,展示內容有限。因此需要根據用戶行為,將相關功能聚合,讓用戶在一屏中可以獲取更多的信息,從而提高用戶效率。

          在天貓部分商品詳情頁中,將商品參數集合在了商品名稱右側,保證了用戶在不滑動屏幕的情況下,就可以直接讀取商品參數。方便了用戶快速了解商品信息,提升了用戶的購物效率。

          考拉海購則在部分商品首屏中,直接分類展現出了商品的型號和款式分類,并且實現了商品價格聯動,提升了用戶獲取信息的效率。



          四、用戶行為記憶

          減少用戶的記憶成本,最好的方法就是讓系統產生記憶。因此大多數APP都會提供歷史瀏覽記錄等功能,方便用戶查找相關信息。而內容型產品為了更好的提高用戶操作效率,則是將用戶行為記憶直接保留在內容層面上。

          我們常見的音樂類產品會留存音樂的播放進度,用戶點擊后就可以直接再次播放。



          (左圖:喜馬拉雅 右圖:網易云音樂)

          微信公眾號文章閱讀時,會對用戶閱讀位置增加錨點。用戶再次閱讀時,自動定位到上次退出時位置,從而提高用戶的閱讀效率。

          微信“看一看”進入時,內容會自動刷新,提供更多新的內容給用戶,為了幫助用戶更好地區分新內容,微信增加了瀏覽位置提醒。

          同樣對于用戶未完成的文章內容,用戶再次進入時,今日頭條會給出繼續閱讀的提示信息,方便用戶快速操作。



          總結

          在提升用戶效率時,我們需要關注用戶場景和行為路徑,從而尋找到更多的效率提升突破口,主要包含以下3個注意點:

          1、明確用戶的行為路徑,尋找用戶核心關切點,提升用戶效率;

          2、轉移用戶操作成本,讓系統承擔更多的行為判斷和用戶引導;

          3、用戶行為聚合時,應當集中關鍵的行為信息,避免對用戶核心行為造成干擾;

          以上就是我對提升用戶效率方法的分析和總結,歡迎大家留言交流。

          作者:子牧先生

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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


          設計師需要懂得用戶體驗

          ui設計分享達人

          設計師需要懂得用戶體驗知識











          作者:董康
          來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          用戶體驗 | 從生活中感悟峰終定律

          ui設計分享達人

          本文講述了“峰終定律”的定義,并結合筆者生活中的兩個例子做了圖文分析,最后通過學習海底撈的案例,然后結合顧客角度將一次糟糕的活動進行了改進。

          一、峰終定律定義:

          峰終定律( Peak–End Rule),是由丹尼爾·卡尼曼(2002年諾貝爾經濟學獎獲得者,心理學家)提出的——他發現人們對體驗(體驗事物或者產品)的記憶由兩個因素決定:

          • 第一個因素是體驗最高峰時的感覺(最高峰分為正的最高峰和負的最高峰)。
          • 第二個因素是體驗結束時的感覺。

          即,除了峰值和終值時之外的其他體驗,無論好與不好體驗的比重是多少,體驗時間的長短,對記憶或感受都沒那么大影響,會被選擇性忽略。

          概念講完,下面筆者結合去飯店買飯的故事,使用“峰終定律”進行圖文分析,為什么一家飯店給我的體驗非常糟糕,而另一家飯店我愿意推薦我的同事也去嘗試。

          二、兩個故事

          1. 第一家體驗不好的店:某燒臘飯店

          之前有一段時間飯店聯合天地壹號搞活動,買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店,我特意說明了要醬汁,老板的“嗯嗯哦哦”充滿了敷衍。

          我看著店里配餐員配餐、出餐,然后我問這份是不是我的,店里服務員支支吾吾,也沒有看著我,然后那份飯被拿去跟天地壹號的工作人員合影,一張不滿意又拍一張,一個角度拍完又換一個角度。最后,飯店的服務員才把那份飯給我,當時我心里憋了一股氣,就差破口大罵:我中午吃飯+午睡時間就一個小時,為了能睡好點還要吃得快點。

          這家店給我的體驗就是,不把用戶當用戶,心里非常不是滋味。

          而當我向同事說起這家店時,我會推薦手撕雞飯,這是我在廣州吃過的最好吃的手撕雞飯, 沒有之一。同時,我還會說上面的故事給同事,最后評價道:可以試試的,另外,出餐質量有問題他們也會給你換一份的。

          當我說完這次的經歷給同事聽,同事并沒有表示會去嘗試一次,因為我說的故事,又因為價格也不便宜。所以說,店鋪(或者說品牌)是在食物(或者說餐品)之前被消費的,這是給用戶留下第一印象的關鍵,第一印象不好,即便是廣州第一手撕雞,也不會去嘗試。

          那么使用“峰終定律”去分析這次糟糕的就餐體驗就是:

          峰值有兩個,正峰值是廣州第一手撕雞的“口味”,負峰值是“員工服務”。負峰值的出現,說明了店家在活動開始前并沒有設計好活動流程,服務員也就沒有足夠的授權去處理和應對。

          終值是“離店”時的不爽,店家并沒有作出任何的正面回應,沒有表達歉意,沒有意識到這樣做會給顧客造成怎樣的影響。

          “員工服務”是直接突破了我的忍耐底線,“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線,店家不但“失去”了我,我的幾個同事也不會是潛在客戶了。

          忍耐底線不是卡尼曼教授的理論,是我結合了梁寧老師講過的內容,然后加到了這張“用戶體驗模型”圖上。

          梁寧老師講的是:“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒,等了7秒還沒打開,基本上99%的用戶就會離開。所以,對成本的控制是本分,但是不能挑戰用戶的忍耐底線?!?

          2. 第二家體驗好的店:某粥粉面飯店

          某天中午我發現寫字樓下新開了一家飯店,我到店里問老板,有什么賣的好的推薦一下,老板面帶笑容用“廣普”跟我一一介紹:哪個菜用什么材料做,哪個湯用什么材料燉,吃不了辣可以吃……在老板眾多推薦中選了一份,第一次嘗試這家店,總體感覺不錯。后面選擇了老板推薦的肉餅飯,發現真合我胃口。

          上兩周有兩天中午休息時都到店里想點肉餅飯,但是連續兩天都在我來之前賣完了,之后老板說可以掃門口的小程序預約下單,第二天上班我早早的就預約了肉餅飯,到店之后老板已經打包好了,我把訂單信息給老板看,老板說了一句我聽到就覺得好笑,并且每當給人推薦這家店時就說的一句話:“這是我們專門給您留的肉餅飯?!?

          當我笑著回應謝謝的時候我也在想,這飯是我在小程序上面早早預定的,老板還說是專門我留的;因為我先付錢了,所以老板不賣給別人了。

          我又想到,這家店的老板是愿意站在顧客的角度來提供對應的服務的,并且我也確實感受到了老板的真誠、熱情。

          于是我把這家店介紹給了幾個同事,他們都表示下次沒有自己帶午餐的時候會試一下,并且有兩個同事聽了我的推薦后去下單了,其中有一位同事表示會回購。

          這家店給我的體驗就是,不把用戶當流量,心里有用戶,產品可以,用戶自然會安利給身邊人嘗試一下。

          使用“峰終定律”去分析這次就餐體驗就是:

          有兩個正峰值,第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”,這里甚至有一點點主觀上的小驚喜:當時抱著不知道會不會踩雷,試試新店的心態,當我試到肉餅飯時,小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。

          小結:

          當我跟同事同事說起第一家飯店體驗不好的時候,并不是說他的“港式氛圍”裝修不好,不是說出餐有問題不給換新的,手撕雞也是廣州最好吃的,而是說,這家店給我的感覺是他并不像跟用戶建立長期關系,只做一桿子買賣。于是他們并不注重維護客情關系,當他們把合過影的手撕雞飯遞給我時,連安撫情緒的話都沒有,就餐體驗自然就糟糕透了。

          那么如果我是這家燒臘飯店的主理人,那我會如何設計本次活動?

          我們先看看餐飲行業的巨頭都是怎么做的,因服務被大家口口相傳的海底撈就是非常值的學習的對象。

          三、使用“峰終定律”分析最近一次我去海底撈時的體驗

          通過模型,我有以下幾點感悟:

          • 排隊時海底撈提供的各種免費服務及零食飲料,目的是降低顧客等待叫號的無聊感,甚至讓顧客心甘情愿地等待叫號就餐,進而提高顧客滿意度。
          • 海底撈從顧客排隊,到顧客就餐,最后離店,打造了一套密集的正峰值的服務觸點。因此人們講到海底撈最先想起的就是海底撈服務。
          • 上圖列舉的點無明顯的負峰值,并且有很多服務觸點都是免費的,這就要求海底撈必須投入相應的資源,那么成本必然會少不了。
          • 關于資源與成本。理想情況下,每一個服務觸點都需要妥善處理。但實際情況是,我們不可能讓用戶在所有服務觸點都達到預期,我們必須在有限的資源下,換取用戶更多的正峰值與更好的終值,因此如何控制成本,合理配置有限的資源非常重要。

          服務觸點:用戶為了完成目標,需要做一系列連續的行為,而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點,這就是服務觸。比如上圖所示的,海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因,在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。

          四、燒臘飯店活動改進方案

          帶著學習完海底撈得出的感悟,下面我來嘗試思考一下,我現在是這家燒臘飯店的主理人,那我會這樣設計本次活動:

          首先需要了解我們的顧客:

          1、顧客畫像

          附近街坊、附近上班族,方便快捷解決午/晚餐。

          2、顧客預期

          選擇符合自己口味的菜品,店內就餐/打包回公司吃;店家穩定出餐(口味穩定、不要有異物等);不希望排長龍。

          3、服務觸點

          點餐時、支付時、等待出餐時(排隊)、(打包完)出餐時、離店時。

          其次,才到本次活動的設計:

          1、背景

          贊助商天地壹號需要做品牌推廣,找到我們合作,方案就是消費即送天地壹號一瓶。

          2、目的

          幫助合作伙伴宣傳的同時,吸引新的顧客,回饋老顧客,提升營業額。

          3、具體方案

          3.1、制作印有“12.1~12.3日,消費即送天地壹號一瓶,送完即止”的宣傳海報,并且放置在店鋪門口。

          3.2、完善服務流程。(請看下圖)

          3.3、設置幾種異常情況的應對方案。(請看下圖)

          完善好服務流程,提前設置好幾個異常情況的應對方案,相比于海底撈一連串的各種免費服務,其實花不了多少實際的金錢成本。但是卻能用最少的資源,最大程度的避免“負峰值”的出現。

          另外,天地壹號的工作人員提出合影,飯店應該用自己的員工餐,而不是用顧客的。這其實不是異常情況的應對方案,而是作為服務行業從業人員該有的覺悟。

          本文到此結束,朋友們如果設計/體驗了好的“峰終體驗”的案例,麻煩在評論區告知我一聲,讓我也去體驗一把~

          作者:我是Berwin
          來源:人人都是產品經理
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合