92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

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

鶴鶴

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


// 為什么要數據可視化


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



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


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


一、選擇適合的圖表


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


1. 分析數據關系

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



構成關系

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

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

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



比較關系

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

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

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



分布關系

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

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

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



關聯與流轉

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

常用圖表:關系圖、桑基圖、漏斗圖、進度圖等

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



2. 分析數據特征

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


變量特征

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

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


維度特征

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

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


層級特征

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

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


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

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


流程特征

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



二、強化視覺層次


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


1. 強化數據特性

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

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


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


2. 色彩視覺傳達

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



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

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

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


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

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

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


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


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

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

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


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


三、圖表中的響應式設計


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


1. 布局框架適配

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



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

2. 圖表元素適配

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

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


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


3. 極值適配

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

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


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


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


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


// 結語


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


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

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


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


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


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

鶴鶴

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

關于產品「趣味性設計」的一次深度探索

鶴鶴

你一定也發現了,在這個時代下只要處在同一賽道的產品,大多數免不了日趨同質化,不論是功能還是形式、內容還是算法。就拿內容型產品來舉例:去掉顏色,以下四個產品的首頁,你能分得清誰是誰嗎?



雖然可以做品牌差異化,但很多產品在招牌打響前,也會經歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候,通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。

之前在團隊有幸負責過一次產品趣味性的探索,雖未全部落地,但沉淀了不少經驗。今天,我將這些經驗以文章的方式分享給你,希望對你有所啟發。


為什么產品需要趣味性


1.符合本能需求

馬斯洛的“需求層次理論”(Hierarchy of Needs)你一定聽過。這個理論提出人類的需求狀態是持續不斷的,一段時間內,個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看,人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后,自然會需要情感的滿足。

尤其現在這個相對嚴峻、內卷成風的時代下,大家都渴望在上了一天班之后,自己用的產品可以給自己解壓,而不只是個單純的冷血工具。



2.影響用戶行為

產品傳達趣味性的信息,那么這些信息便更容易被用戶接受、甚至激發興趣。正如用戶關系和精準化運營的先驅——史蒂文·貝萊格姆的那句話:“趣味是設計產品中最人類化,最直接,最能引起人們興趣的因素。”

根據艾達模型這個經典理論,一旦用戶對某件事產生興趣后,則更容易促成他的決策、乃至最后行為的發生。畢竟我們絕大多數的決策并非源自理性。



另外,《瘋傳》這本書提及過一個重要的概念:情緒喚醒。當情緒喚醒度較高時,往往會更容易激發用戶的分享行為(比如愉悅、驚喜這樣的正面情緒,當然也會包括憤怒、恐懼這樣的負面情緒)。而產品所呈現的趣味性,很大程度上更容易引發用戶的高喚醒情緒,從而主動采取一些產品希望他實施的行為。

3.緩解負面情緒

使用一款產品的過程中,必然會出現不夠正向的反饋,比如404、斷網、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力,很容易造成行為中斷甚至流失。

但此時如果通過一種趣味性的方式呈現,很大程度上可以緩解用戶的負面情緒。

比如readme的登錄頁面,當你輸入密碼時,貓頭鷹捂住雙眼,很好得緩解了用戶的不安全感。再比如餓了么,惡劣天氣下會實時記錄當前的天氣狀態,通過同理心的觸發也可以緩解用戶等待時產生的焦慮。



4.實現情感鏈接

對應諾曼在《情感化設計》中的「反思層」,通過品牌差異、獨有內涵等方式來喚起用戶深層的記憶和情感,產生情感共鳴,從而形成認知,建立起深厚的情感鏈接,以讓用戶越來越忠實于產品。此時產品作用更多的是作為一個承擔情感的載體。

我們旅游時經常會購買一些貌似沒什么實用性的紀念品,明信片、木雕、徽章等等,可能最多只能放在房間當裝飾。但是紀念品的關鍵意義,在于承載著旅游時的記憶。類似的還有單機游戲發售時,除了標準版外,往往會同步發售包含手辦、美術設定集等物品的豪華版,同樣用來承載玩家的情懷。

最典型的例子,就是Google的Doodle設計,在不同的節日、紀念日、或者緬懷一些先驅、藝術家時,會投入很高的成本起設計各種趣味性的插畫logo,豐富有趣,而且很多時候可以支持互動游戲。比如18年的萬圣節,就做了一個有趣的多人對戰的小游戲。



Doodle不僅是Google文化、價值觀的象征,也通過這種趣味性的創意讓用戶實現更深層次的情感交流,建立情感紐帶并增加粘性,不會輕易得流失到其他替代品中。


趣味性是什么

關于這個概念,有三條相對客觀專業的說法。

德國古典哲學創始人康德《實用人類學》中,指出趣味性是人類由于受到外部環境的影響而對客觀事物產生的直接的感性反應,不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思,從而心理產生愉悅的變化。

另外,康德在《判斷力批判》也指出,趣味是指主體以積極主動的姿態,在超功利的層次上對某一對象表現出喜愛和愉悅的情緒狀態。

《漢語詞典》將趣味釋義為:使人感到愉快,能引起興趣的特性。

看似各不相同,但根據這三個概念提煉下,可以發現他們都是在融入一種正向的情緒加以解釋。

那么,趣味性背后的情緒到底是什么?


趣味性背后的情緒


情緒這東西千變萬化,為了避免主觀臆斷的不準確,我搜羅了關于情緒的研究資料,目前相對權威的有三個:plutchik情緒輪、日本感性工學、諾曼的三層理論。

后兩者未對情緒進行指標的定義,所以這里只聚焦在情緒輪上。

情緒輪由羅伯特·普洛特契克開創,這個理論指出人類的基本情緒一共由8種,生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒,能夠符合趣味性帶來的情緒基本就三種:愉悅、期待和意外。



為了為產品所用,就需要提煉出更具象的特征。下面,我通過腦暴的方式對每類情緒進行發散聯想。

關于愉悅感

聯想了大量可以引發愉悅情緒的事物,比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。

我發現這些事物,一般具備了以下特征:

1.會給予我們即時反饋;

2.擬人化,比如帶有人類才有的表情,或者是人類的動作語言;

3.柔軟的、毛茸茸的、圓潤的、有溫度的;

4.會動的、解壓的



關于期待感

聯想了大量可以引發期待情緒的事物,比如被買爆的泡泡瑪特盲盒,商家售賣的福袋,各種諸如擲骰子、老虎機的隨機性游戲,各類抽獎活動,一些游戲開局roll屬性點的環節(比如金2、河洛等游戲,當年玩的時候我驚訝得發現我居然能roll上一整天)

這些事物大致會帶有這些特征:

1.未知的、神秘的;

2.滿足人類的好奇心的;

3.對結果能滿懷希望的;

4.隨機的正向獎賞;

5.只需要一步簡單到發指的操作(打開容器、拉動拉桿、點擊按鈕等等),不需要任何的行動門檻,也沒有等待時間



關于驚喜感

比如《設計中的設計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節、電影或者游戲中突然出現的彩蛋、iPhone第一代的發布現場、突然發現的世外桃源、突襲的生日驚喜等等。

這些事物大致會帶有這些特征:

1.超出原有預期的;

2.未提前告知的;

3.正向結果的;

4.產生共鳴的



那么,這些特征又該如何更具象得落地成策略,產品中又是如何利用這些策略,引導用戶產生這些情緒的呢?

下面,我將基于這三類維度,并結合大量的大廠案例來為一步步你抽絲剝繭。


如何制造愉悅感

1.關于擬人化

基于上面的挖掘,我發現能引發愉悅感的一個明顯特征,就是擬人化,這個非常有意思。

克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點:人們對待電腦的方式,與我們在與他人交流時使用的社會規范是一致的。我們對電腦的反應,就好像它們是人類一樣。



也正因此,很多原本沒有生命體征的物體,一旦被賦予了擬人形象,就容易被大家所接納、引發愉悅。

做一下細分的話,擬人化基本涵蓋了三個方面:語言、形象和表情。



1.1擬人化的語言

人對于具體的擬人形象更容易產生情感,其中便包含擬人化的口吻。使用這種口吻與用戶交流,而非冷冰冰的設備語言,就可以提升產品溫度,引導用戶對產品產生正向情感,關于這塊我總結了兩方面。

一方面,文案盡量得接地氣、輕松。

拿京東這款產品舉例,文案從口吻上都會采用一種很輕松、接地氣的擬人語氣,來拉近和用戶間的距離。比如在引導詞后加入“哦~”“~”這種輕松的語氣詞。

另外,「京東問答」版塊的引導詞:傳統產品是“添加問答”,是不是平平無奇。但京東使用了“我來助你一臂之力~”



QQ瀏覽器的評論暗提示,也不是傳統的“寫評論”“輸入評論”,而是像日常聊天那樣“我來說兩句”,非常接地氣、生活化。知乎直接套用了流行語,詼諧的同時引導用戶注意言論。



另一方面,人類富有情緒變化,所以一旦用戶觸發了某個正面/負面行為,就可以給與情緒反饋。

在用戶完成商品評價后,京東不僅僅是很傳統得反饋“評價成功”,而是又加入了“感謝您!”的感謝詞。看似加了三個字,但行動過后的正向感激反饋,和我們日常生活中受到正向反饋一樣,被喚起正向的愉悅情緒。并愿意繼續這個行為。

知乎的圈子業務,在用戶完成簽到后,反饋完成的基礎上,使用了正向的情感反饋“ 我就知道你會再來看我”,仿佛是一位關系不錯的老朋友,來喚起用戶正向情緒。

另外,知乎在改版后,回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言,而是“已收到你的喜歡,謝謝!”并且配以作者頭像,非常形象得傳出對對方對我們的感謝反饋。這種正向反饋,相比”點贊成功“更有效得喚起正向情緒,形成正向激勵。



當然,用戶的消極行為也可以產生情緒反饋。

比如現在很多產品的取關反饋,不是傳統的“確認”“取消”,而是用“殘忍取關”和“給個機會”這種融入情感的文案來做挽留,就好像真的有個活生生的人,在被你否定后反饋給你的情緒,請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。(雖然這種做法過于業務導向,且有綁架用戶的嫌疑)





1.2擬人化的形象

人對于具體的擬人形象更容易產生情感。因此,樹立一個擬人化的品牌形象(也就是我們常說的IP),可以使用戶對產品快速建立情感聯系,也可以強化品牌感知。比如優酷的猴子、高德地圖的老鷹、釘釘的燕子、linefriends等等。



世界杯的吉祥物也是同理,每一屆的吉祥物必定會融入擬人化的特征,憑著親切、可愛的形象和全世界的觀眾一起熱情互動。



說到產品,以京東的這只狗子為例,兜底頁、缺省頁、啟動頁,都做了狗這個擬人形象的貫穿。



如果你記得沒錯的話,形象改版之前這只狗還是四腳坐地上的,但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」,以此提升愉悅感,拉近距離。



再比如夸克,它甚至單獨新增了底tab入口,通過3d品牌形象,實現與用戶的智能交流。另外,卡片和語音搜索都做了形象貫穿,后者還使用了形象的眼睛,來通過眼睛的變化進行情感交流。



1.3擬人化的表情

一段文字在加入了表情后,我們就能迅速了解到對方的情緒(比如我們日常的聊天)。因此表情這一招,也可以用以加深用戶與產品的情感交流。

它可以和語音、形象靈活結合使用。通過全面的擬人化,來大幅提升用戶對產品的形象感知,促進用戶情感的產生、加深用戶和產品的情感鏈接。

比如用語言輸入,當系統未識別清楚時,傳統的方案可能是一個錯誤圖標加上「未識別聲音,請再試一遍」的文案,但夸克中則使用了品牌形象的雙眼來傳達失落的表情,并結合了擬人化的語言。

同樣做法的還有百度的未開麥提示、段子頭圖,快速傳達產品的情緒,和用戶情感交流。



另外,閑魚設置昵稱時,正在輸入時、以及超出了限定字數,右側的形象表情也會發生變化。



除了擬人化能引發愉悅外,還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。


2.動畫反饋

提起動畫的作用,我們更多人首先想到的可能是強引導、注意力吸引,但動畫同樣能觸發用戶愉悅。比如當動畫更加貼近現實,或者結合擬人化的特征時。

2.1貼近現實

最典型的例子,就是蘋果appstore從卡片到詳情頁的轉場過渡,點按的預備動作、卡片的放大展開、緩出的曲線、轉場完成的慣性等等,都很貼近現實物理世界的運動規律。而這種自然的絲滑也更能引發用戶的愉悅。



2.2結合擬人化

比如知乎的加載動畫,結合了擬人化的特征,讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產品的定位。




如何制造期待感

隨機給與內容

根據我們對期待感的腦暴,發現能觸發這種情緒最典型的特征,就是隨機性。

在產品中,則可以通過隨機給予用戶有價值的內容來引發用戶的關注。結果的不確定使過程充滿神秘,這種狀態讓用戶興奮和滿懷期待,不會輕易離開。

比如網易新聞在進行新聞加載的操作時,會在加載動畫上加入一個隨機的小貼士。內容大致有三類:黃歷、名言和一句話新聞。而且這些內容完全是隨機出現,這種刷新過程好像在開盲盒,你無法預知會給你什么內容,非常有趣。而且它們入口深,不干擾;內容對用戶也具有價值。



同樣的還有丁香醫生。在首頁每次下來刷新后,都會出現不一樣的健康類的小貼士。隨機性很強,富有趣味。而且可以很好得滿足求知欲。



雪球的個人頁上,上劃時也會隨機給一條關于投資、市場的名言和網友的熱門觀點。



隨機性游戲

把現實生活中的游戲搬到了手機,同樣能激發用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。




如何制造驚喜感

格雷戈里·伯恩斯曾做個關于腦部區域的研究,發現大腦不僅探尋未知,而且實際上還渴望未知。相比那些已知的日常慣例,新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動,不但能引起注意力,而且也會帶來驚喜感。



產品中的驚喜感設計,可以說是使用瞬間能夠觸達我們內心的一種短暫性愉悅,一個體驗的峰值。

根據對驚喜感的挖掘,一個典型的特征就是超出預期,并且未提前預料。

比如Figma使用過程中,團隊成員和你同時長按鼠標,并且靠在一起后,就可與觸發擊掌的動畫彩蛋,非常有意思。



比如京東在五星好評后,會放煙花慶祝。



比如很多內容型產品,在詳情頁長按點贊按鈕后,會觸發全屏的「爆贊」動畫。



再比如用戶生日當天,通過啟動頁、彈窗等場景送上生日祝福等等。



這些能夠超出用戶預期的細節,即便多么細枝末節、出現頻率多低,但只要能夠被觸發,都可能因為驚喜感而生成情緒峰值,加深用戶和產品的情感鏈接。


最后

以上,便是趣味性背后的情緒挖掘和案例講解。

作為設計師,我們在工作中總是強調以用戶為中心,通過不斷的調研、跟訪、可用性測試來了解、分類用戶,但更多的結果可能只是讓產品不斷得貼合用戶的心智、符合預期。但如何增加粘度、建立深層鏈接,就需要通過趣味性這種情感化表達方式,來為用戶制造愉悅、期待甚至驚喜。

正像諾曼在「情感與設計」中說的那樣,每個產品都需要令人更放松、更愉悅的設計,以此來增強產品的適用性。

希望這篇文章能對你有所啟發。


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

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


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


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

如何提升設計價值

鶴鶴

引言:設計師的“價值困惑”

UX/UI設計師在日常工作中是否遇到以下疑問:

- 方案由業務、產品主導,設計師沒有發揮空間怎么辦?

- 如何從設計視角出發梳理體驗優化建議?

- 如何向各方證明你的優化建議是有價值的?

要回答以上問題,首先得理解設計價值究竟為何。

一.如何理解設計的價值

設計≠藝術,設計從誕生之初就是為“解決問題”而存在。

在體驗設計場景,如果業務方是“需求提出者”,那產品經理和設計師就是從不同視角切入的“問題解決者”,而用戶既是“需求源頭”,又是“方案驗證者”和最終“價值創造者”。



下面詳細解讀【設計價值】與【業務/用戶/產品】三方的關系:

1、設計價值源于業務目標,產于業務價值變現

商業設計本質上服務于業務,因此判斷設計價值幾何的關鍵是:是否真正地幫助業務解決問題,助力業務目標達成。換而言之,設計價值就是設計師通過設計思維/策略/方法,直接或間接幫助業務創造的那部分價值。

設計不能脫離業務自嗨,不能“為了強調存在而存在”。 有效設計在于對業務訴求的精準滿足。我們構思設計方案時,腦海中始終要回答:

- 實現了哪些業務目標

- 解決了哪些業務問題

- 創造了哪些業務價值

2、通過對用戶需求的洞察和滿足,為業務創造價值

業務價值最直接的來源是用戶價值的變現,因此,想要實現業務價值≈要服務好用戶,這為設計價值的實現提供了有效抓手:設計師可以通過洞察用戶需求,完善產品功能、優化操作體驗的方式助力業務目標達成。

P.S.用戶價值=產品給目標用戶帶來的核心價值,即:幫助用戶解決了什么問題,滿足了什么需求,提供了什么服務。

3、產品PRD是“第二參考視角”

對于資深設計師來說,產品PRD不一定是最優解,它更像是提供了解決問題的第二參考視角,產品側在理解業務目標的基礎之上,從實現角度產出了初步解決方案,為設計師打開思路。

不同階段設計師在面對同一份PRD時,有如下處理方式:

- 初級:不知其然,表象復刻——直接按照PRD方案輸出相應設計;

- 中級:知其然,表象完善——對PRD方案進行查漏補缺,提出體驗層優化建議;

- 高級:知其所以然,透過表象看本質——綜合業務/產品目標,挖掘用戶原始需求,提出當下最優解。



二.“業務×用戶×產品”三維度推導設計目標

當設計師拿到 BRD & PRD 后,如何綜合多維視角制定設計目標和策略?下面列舉了筆者在日常工作中重點關注的維度。

1、業務視角:明確定位

業務會從商業角度提供清晰定義產品邊界和價值變現模型,從BRD中可以提取以下重點信息:

- 產品/需求的目標用戶類型和特定場景范圍;

- 給用戶帶來的核心價值(幫助用戶解決了什么問題/滿足了什么訴求);

- 用戶價值變現模型和策略(如何通過滿足訴求進而實現用戶價值變現);

- 業務價值可量化指標

我們需要注意一下兩點:

- 關注北極星指標,比如某些場景側重“留存”,有些側重“轉化”,這會影響設計側重;

- 在產品發展初期,了解業務線未來的布局和規劃,可以幫助我們把握設階段性計節奏。

2、用戶視角:匹配 & 完善需求

用戶是一切需求的源頭,僅從業務視角出發定義需求是無本之木。因此當設計師碰到業務需求不明確,或者對產品方案存疑時,最好的辦法就是回歸用戶視角。用戶需求挖掘一方面可以豐富和完善業務目標,另一方面也幫助我們審視當前業務需求是否與用戶訴求吻合。通過用戶分析我們可以得到:

- 目標用戶特征;

- 典型場景下核心訴求、任務和關鍵行為;

- 關鍵行為可量化指標

P.S.為了挖掘多維度用戶訴求,我們可以根據具體場景將用戶細分,如:

- 角色:如B端/C端;

- 熟悉程度:小白/普通/專家;

- 客戶價值:高價值/一般價值;

- 興趣/偏好:價格敏感/XX控;

- 目標強弱:強目標/半目標/無目標;

- 階段:獲取-激活-留存-收益-推薦;

- 流程:開始前/進行中/結束后...

3、產品視角:方案轉化 & 實現約束

在業務主導的場景下,產品經理往往是需求的“第一經手人”,我們需要在PRD中捕捉到產品對業務需求的理解和轉化策略。另外,產品視角也闡釋了在落地實現層面的約束限制,特別是前臺與中/后臺的依賴關系。從 PRD 中可以獲取以下重點信息:

- 產品目標和策略;

- 功能范圍和核心流程;

- 中后臺能力支持;

- 實現成本和風險點;

我們需要注意一下兩點:

1/ 從產品系統的視角審視需求

多數情況下,我們接到的需求是點狀的,可能是某個子模塊的子流程/功能,此時我們可以用更系統的視角向上追溯,定位模塊所屬能力矩陣,找到模塊與模塊之間的聯系,這有利于精準把握需求,保證鏈路場景閉環,為后續由點到面驅動更大層面體驗優化作準備;



2/不要忽略實現層面的限制

很多功能不是“不該做”,而是當下“做不了”或“性價比低”,一些優化方案提出前,我們需要從產品角度考慮現有中后臺能力支持、研發可行性、運營人力成本等,避免設計“空中樓閣”。

綜合以上業務、用戶和產品三個維度,我們更加精準推導設計目標。需要注意的是,設計不是萬能的,大多情況下設計只能通過“影響/實現局部用戶價值”間接助力變現,我們只需關注可以通過設計手段參與、干預和落實的部分即可。一個設計目標的完整表述 = 通過【XX設計策略】幫助目標用戶【實現XX價值/滿足XX需求/解決XX問題】,以助力【XX業務目標/變現方式】達成。(在實際表達中可以適當精簡)



三. 方案推導和設計價值量化

確立明確的設計目標和策略后,下面進入設計實施和驗證階段,這里推薦兩個基礎的推導模型。

1、SKS模型:從策略到方案

SKS模型,即策略(Strategy) → 影響因子(Key factor) → 解決方案(Solution)。設計目標中的策略是一切方案推導的源頭,我們需要找到影響策略實現程度和效果的關鍵因素,將其視為可控變量,并以這些變量為切入點進行方案嘗試,最終衍生多種解法。

比如:我們把提升Banner的點擊率作為策略,那影響banner點擊的影響因素可能是:形式是否新穎、配色是否亮眼、是否有動效引導、利益點是否突出、行動按鈕是否吸引人點擊等等,每一個影響因子都可以衍生出多種設計方案。

2、GAM模型:從目標到指標

上文提到,設計手段通常是以間接方式助力用戶價值實現,進而賦能業務目標達成。那如何量化設計價值呢?我們可以使用“GAM模型”,即設計目標(Goal) → 高價值行為(Action) → 衡量指標(Metric)。具體方法如下:

1/ 設計目標反推高價值行為

一個設計目標實現,一定是由鏈路中一個/多個高價值行為促成。比如用戶在真正“下單”前,會訪問商品詳情頁,瀏覽商品詳情頁信息,加購物車等。

2/用行為指標度量設計價值

用數據刻畫和度量高價值行為的指標變化,進而度量設計方案的價值用數據刻畫和度量高價值行為的指標變化,進而度量設計方案的價值。 我們可以盡量多維度拆解高價值行為和相應度量指標,維度越多,關聯性越高,判斷誤差越小。

結語

事有輕重緩急,不是所有的需求都需要走上述方法進行設計分析,要學會辨別重點的、有發展潛力的需求投入更多設計精力深入研究。后續筆者將通過具體的設計項目,詳細闡述如何運用業務×產品×用戶三重視角,推導改版目標和設計策略,敬請期待《「②實戰篇」如何提升設計價值——2022京東APP頻道廣場V2.0改版探索》。


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

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


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


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

設計探索|重新認識UX文案

鶴鶴

講到UX文案,大家可能并不陌生:一個按鈕、一個彈窗的文案填充,我們幾乎每天都要與他接觸。但即便如此,大家對他的態度通常是得過且過的:“文案嘛,有了就行,看得懂不出錯就好,沒什么值得注意的”。

確實,作為設計師,我們關注交互流程、視覺呈現,但UX文案似乎從來不是我們的首要考慮;在很多時候,文案與我們的設計流程是分裂的:要不就是設計完成后再填入,要不甚至直接讓產品經理來提供文案素材;文案撰寫,好像從來沒有被我們真正重視過。

但UX文案真的只是一個無足輕重的輔助位嗎?

一、 UX文案的重要性

首先,先拋結論,UX文案并不是無足輕重,相反的,它是好的產品體驗中不可或缺的一部分。并且隨著時代的發展和新興應用場景的涌現,它對于產品體驗的重要性正直線拉升。

在我們還將UX文案看作一個可有可無的流程時,一些先進的企業就有遠見的意識到了它的重要性:早在2017年的I/O谷歌年度開發者大會上,三位職業UX文案作家就向我們展示了UX文案如何切實地為谷歌帶來了產品數據的提升:

設計探索|重新認識UX文案

在用戶在搜索”酒店“相關內容時,谷歌將直白的文案 “預定房間” 改為了更貼合用戶心智的 “查看房源情況”;這一小小的改動,帶來了17%點擊量提升。

隨著UX文案的價值不斷的被發掘,在海外,已經有越來越多的團隊將UX文案寫作作為一個細分的的獨立專業來看待。例如,在國際最大的旅游電子商務公司之一Booking.com,曾在不到一年的時間里增加了40名UX文案崗位,達到了每5或6個設計師中就有一個UX文案設計師的夸張比例。

二、 重新認識UX文案

面對海外對于UX文案的重視度激增場面,我們心中可能不免疑惑:“不還是為頁面配文而已嗎?平常不起眼的工作,怎么現在就好像突然變特殊了呢?”。

存在這樣的誤解,是因為我們對UX文案的認知還停留在過去,始終認為它僅僅是一個輔助位,最多起到“錦上添花”的作用,并不能真正影響核心用戶體驗的好壞。

而實際上,與我們印象中的邊緣形象不同,UX文案(UX Writing),也叫內容設計(Content Design),所涉及的知識橫跨體驗設計、內容策略、用戶調研,是一個多元的、完整的設計學科;旨在基于同理心與專業溝通技巧,通過合適的文字信息,在產品使用過程中為用戶提供愉悅的體驗,遠不只是“為按鈕填詞”這么簡單。

設計探索|重新認識UX文案

而隨著時代的發展,UX文案的覆蓋范圍、呈現方式以及工作流程等都已經發生了巨大的變化;站在設計師的角度,我們希望通過以下幾個方面介紹UX文案與過去相比發生了哪些變化,來幫助大家消除對UX文案的刻板印象,重新認識它在我們設計中扮演的角色,并學會運用它為用戶呈現出更加優秀的產品體驗。

1. 從「文字」到「語言」

首先,如今的UX文案有著比之前更廣闊的范疇:過去關于文字,如今關于語言。

以前,我們講到UX文案,指代的可能只包含APP里的標題、按鈕等靜態文字;但如今,隨著智能家居、智能車機等新興領域對于語音交互能力展現出的強需求,以及類似喜馬拉雅等播客產品的持續火熱,UX文案已經慢慢跳出了文字的范圍,有了更廣闊的發揮空間。

設計探索|重新認識UX文案

想象一下,當你結束疲憊的一天回到家時,你的智能家居助手應該以怎樣的語氣向你問好?應該使用什么措辭能最精準地得知你的意圖?這些動態的、無實體的語音內容,也逐漸成為UX寫作要關注的重點內容。

簡單說,如今所有用戶和產品產生交流的場景,都可以劃分于UX寫作的范疇。得益于科技的發展,UX寫作逐漸地更接近了自己最終的目標,慢慢跳出了靜態頁面的框架,得以真正的與用戶產生有意義的、愉悅的語言的交流。

2. 從「填充頁面」到「主導頁面」

其次,UX文案與過去最顯著的不同之一是:不再僅是為頁面填充文本,更多的是根據信息主導頁面。

以下面一個常見的對話框為例,僅有一個小小的對話框來承載超額的信息;如果根據之前的“填充頁面”的觀念,我們要做的其實很簡單,就是根據行文規范刪減、重新排列文字,試圖把過量的內容塞進小小的容器。

這樣得到的結果在視覺上看起來可讀了一些,但似乎也不盡人意。

設計探索|重新認識UX文案

這就是典型的機械性的填充頁面,信息的展現完全受制于已給頁面的結構,實際上已經脫離了更好傳遞信息的初衷。

如果我們調轉思路,試著真正從傳遞信息本身出發,就能很明顯的發現,原來的對話框最大的問題不是文字長短,而是信息過載—強迫用戶在有限的空間里一次性確認兩類信息:更改時間和通知參會人。而在我們上面的方案里,這個問題并沒有被解決。

當我們真正開始用信息主導頁面,應該做的是將一頁多個問題拆分為每頁一個問題,分步響應用戶,對冗雜的信息進行分解,以真正創造清晰有效的對話。

設計探索|重新認識UX文案

如果體驗沒有達到理想的效果,通常需要改進的是整個設計,而不單單是文字。我們需要逐漸去理解的是,頁面在根本上是信息傳達的媒介,一昧的修改文本來適應頁面,反而是本末倒置的做法。

3. 從「單純可用性」到「體現品牌聲音」

目前,UX文案通常僅需要保證基本的功能可用性;即使是已經有文案規范的團隊,更多的也是將其作為輔助位,保證文案“有一致性,不出錯”即可;對于品牌形象、差異化的訴求則基本一筆帶過。

相較于UX文案,大家習慣用Icon的質感、品牌色的搭配等視覺的呈現去傳遞品牌聲音,因為這樣的效果簡單直觀,是可以直接被“看得見”的,這點無可厚非。

但隨著語音交互的興起,以及近年來轟轟烈烈的品牌去色化趨勢,單純的利用純視覺的呈現來塑造品牌形象變得沒那么萬能了,與此同時,UX文案對于品牌形象的重要性也逐漸被發掘;我們發現,在很多時候,一句措辭得體的語音信息,或者是一句抓人眼球的標語(Slogan),就足以彌補視覺上品牌呈現的缺憾,甚至更能與用戶產生共鳴。

這就需要UX文案在保證基本的可用性的基礎上,更要考慮什么才是真正適合自己品牌的聲音。

設計探索|重新認識UX文案

例如Google Earth 過去的一句經典的標語:“Hello, Earth”,這句標語完美的契合了Google Earth的品牌形象,它簡潔正向,并且和產品名稱之間有巧妙的雙關,即代表了產品本身,也暗示了Google Earth帶領用戶去探索世界的功能定位。

仔細觀察蘋果、谷歌的產品,你就會發現從他們的UX文案除了保證了基本的一致性和可用性外,偶爾會隱藏一些小巧思,這些小巧思與他們的品牌形象相互呼應,能讓用戶在產品使用中潛移默化地對其品牌形象、產品價值觀形成認知,而這樣與產品體驗本身結合的認知構成往往更加堅固,比傳統的廣告宣傳更容易讓人信服與認可。

三、 怎樣做得更好,一些實用小tips

隨著UX文案越來越廣闊的范疇,我們過去熟悉的工作方法已經并不完全匹配如今UX文案的目標了;因為它包括的已經不僅是單純的文字內容,更多的還有文案之間的層級結構、什么時候出現這段文字,以及這段文案向用戶傳遞了什么情感等等,這已經超出簡單的行文規則所涵蓋的了。

那么,我們怎么才能真的做好UX文案呢?

我們根據以往的項目經驗,總結出了除了通用行文規則之外,三個在關鍵節點上可以做到的幾件小事,希望幫助大家能找到真正適合、高效的設計方法,并打造出優秀的UX文案。

1. 流程——更早地加入

首先,最基本也是最重要的:在流程上,永遠要盡早的考慮文案問題。

我們過去熟悉的設計步驟是:“先把產品設計好,將有文字的地方空出,最后再填充?!?

這樣帶來的問題是:關鍵的體驗問題直到最后期才會被注意到,留給UX文案的發揮空間十分有限,能做的只是為糟糕的體驗貼上掩飾的創可貼,并不能真正避免糟糕體驗為用戶帶來的傷害。

正如我們上面所說,UX文案不僅僅是填充文字,它的核心是在產品與用戶之間創造合適、愉悅的對話,所涵蓋的內容幾乎橫跨產品體驗的每個流程。

設計探索|重新認識UX文案

因此,要想真正締造好的UX文案,永遠要盡早地參與到設計流程中,這樣才能真正的找出體驗的問題,并最大限度的發掘UX文案究竟可以為此做些什么,創造與用戶真正有效的交流。

2. 方法——模擬真實的對話

其次,在我們著手輸出UX文案時,請盡量在腦海中模擬真實的對話場景。

這個方法來自于最近的全球開發者大會(WWDC22)上,蘋果設計團隊向大家分享的UX寫作方法框架:“PACE”:Purpose(目的)、Anticipation(預判)、Context(環境)、Empathy(共情)。

設計探索|重新認識UX文案

其中,在Anticipation(預判)里提到了 “將UX文案想象成一種對話” 的概念,意思是在設計產品的過程中,應該把頁面上的文字看作一個與用戶的對話,而不只是一個靜態的短語;這樣能更好的幫助我們預判用戶的訴求。

想象在這樣的場景:當你的用戶在周末的晚上打開手機,開始調節明早起床的鬧鐘時間;你會怎么設計這里的UX文案呢?

使用流程似乎很簡單:打開鬧鐘app,調節明早鬧鐘時間,確認設置完成。

設計探索|重新認識UX文案

上述的交互沒有問題,用戶可以清晰的完成設置。但如果考慮到上面提到的 “想象成一種對話”,那這個流程就還有可改進的地方。

因為在一段有效的對話中,交流應該是有來有往的:其中的角色應該有時在聆聽,有時在發言;而不應該僅僅一方是單方面的輸出(在上述的場景里,僅僅是用戶一股腦的對鬧鐘app進行信息輸出,鬧鐘app只是單純的服從命令,這不是一個正常對話的模式)。

讓我們想象是自己在跟用戶在交流,就能很容易地發現用戶想傳遞的底層信息并不是 “我要調鬧鐘了 ”,而是 “好不容易到周末了,我明天要多睡一會”,能解讀到這一層話外音,我們就成功利用“對話”預判了用戶的目的。

打開ios的起床鬧鐘試一下,你會發現它比我們的基礎流程多了一個貼心的詢問 :“你要將此更改應用到這個定時中的所有周末嗎?”;在這里,蘋果實際上做了兩層預判,第一層是預判絕大多數人的周末和工作日起床時間是不一樣的,所以將復用的范圍限定在了周末;第二層預判是在大多數情況下人們只能確認明天的起床時間,所以主選項是“僅更改下個鬧鐘”。

設計探索|重新認識UX文案

簡單的一個改動,就把機械性服從命令的程序,變為一個有智慧、思想的助手。如果我們在每次輸出文案時,都能試著想象真實的對話并剖析,可能就能逐漸把一個“可用的產品“變成“貼心的朋友”,真正地走進用戶的內心。

3. 驗證——大聲地念出來!

最后,如果你還是覺得心里沒譜,不確定是否輸出了合適的文案,有一條被蘋果和谷歌共同推薦的驗證方法,簡單粗暴但有效,那就是 “大聲將你的文案念出來”。

就像我們剛剛反復強調的,UX寫作其實就是與用戶創造有效的交談,那么最簡單的驗證方法就是真正說出來,將它真正變成一段對話,然后再去聆聽,最直觀的感受到你的語言聽起來是否自然不生硬?是否有一些不易察覺的重復或語法錯誤等等?

大聲地將你的文案念出來,如果能使你自己信服,相信也能使你的用戶信服。

四、結語

最后,讀到這里,相信你已經對于UX文案有了一個全新的認識,并對如何做好它有了基本的概念。其實在日常工作中,每個產品對于UX文案的要求可能不盡相同,但重要的是作為設計師,我們能意識到他逐漸攀升的重要性并真正對他加以關注。引用蘋果開發者大會上的一句話:UX寫作其實就是始于對屏幕另一側用戶的好奇心,并真正懷著尊重和理解與其交流。只要能意識到這一點,相信大家都能呈現出真正有效的、令人愉悅的UX文案。

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

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


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


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

如何有效提升產研效率和質量

鶴鶴

前言

互聯網瞬息萬變,在產品不斷更迭的過程中,我們經常說要保證產品設計的一致性和質量,提升產研鏈路的效率。但現實情況是:產研團隊長期面對的是產品越來越復雜,體量越來越大,一個個復雜的產品下包含N個業務線,N個業務團隊,甚至還有外部合作的業務,每個迭代都要面對數以百計的功能上線,經常容易出現各種相同但不一致的功能,上線質量參差不齊,執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。


所以如何解決團隊效率和產品質量問題?我們的解法是抽象體系化的解決方案:設計模式化和代碼化,設計從原子到全局進行統一和優化,并形成系統化的設計指導,由開發進行模式代碼化,提供靈活可配置的規則。以此,設計有更系統化的設計原則,整體的統一性和體驗有保障,設計和開發周期也可以縮減,甚至大部分日常需求可直接由產品對接開發直接上線。



目錄

  • 一、什么是系統化解決方案,什么樣的團隊適合做
  • 二、如何輸出、推進設計解決方案
  • 三、解決方案的管理和發展

(一)什么是系統化解決方案,什么樣的團隊適合做

1.1 什么是系統化解決方案?

大多數日常需求大多是從單點出發,當點變多變復雜了,就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象:從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化,來靈活提供拼裝N個不同頁面的機制,幫助團隊更系統化的進行產品設計。從組成內容不難看出,解決方案是需要建立在基礎組件基礎上,與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。





1.2 什么樣的團隊適合做

解決方案是一套相對穩定的設計機制,所以在產品初期或團隊建立初期,產品可能經常會調整的情況下,并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件,選擇性的建立部分穩定且利用率高的解決方案,并持續發展,保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟,解決方案也應該隨著一起成長,相互影響相互作用。


(二)如何輸出、推進設計解決方案

2.1 由大到小的進行信息拆解

1)對產品頁面(尤其是重點功能)進行盤點,劃分頁面類型:比如列表、表單、詳情、dashboard;

2)對頁面中的內容進行區塊歸類

3)對區塊中的信息進行拆解



這三個過程下來,對于問題、規則、規律都會有一定的概念。以一個后臺系統為例

1、頁面大類主要是:列表、表單、詳情。

2、其中列表的內容大致區塊分為:頁面標題區、列表操作、列表篩選、列表內容,到這個階段已經可以發現,相同區塊位置就存在不穩定,在后臺系統中可能影響面不會非常大,但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。

3、不同區塊的內容拆解,同樣也會發現一些細節問題,比如篩選的樣式、規則不一致,列表操作的方式、位置、樣式、交互不一致等等



2.2、抽象、重組:從布局——區塊——組件——設計規則

從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點:第一是如何通過設計規則來避免同樣的問題產生,第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面,首先得有一個布局劃分,不同的區塊要放些內容,再到區塊里的細節內容規則,從而抽象出由布局到區塊的設計規則和可復用的組件。

以前面說的列表為例

1) 區塊主要是4類,明顯的問題是區塊位置不穩定,所以在布局結構上,需要定義1-2個穩定的可配置的布局框架來適應不同的內容



2)不同區塊梳理組成內容,內容細則



3)標記出可組件化的內容及規則



4)提煉整個過程中通用的設計規則,作為全局的指導。如:國際化、排版規則、超限規則、適配規則、文案規則等等。

通過布局——區塊——組件——設計規則,可以靈活的進行頁面拼搭



2.3 落地代碼庫 

區分通用層和業務層,通用層落地到通用模板市場,利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性(如:業務主題、業務數據、業務拓展方案)的業務庫來生產新頁面。

目前群核設計團隊建立了一套平臺通用的解決方案,適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案,同樣的思路也應用在不同體系的工具場景中。整體實踐下來,產研效率提升近50%,甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升



三、解決方案的管理和發展

解決方案作為設計系統的一部分,與設計系統一同管理,業務設計師使用系統來輸出,反饋問題或需求給系統,有系統設計師判斷可行性,周期性的管理,及時更新并在內部互通,促進互相成長和發展。

解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容,業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別,則列入到通用庫。



這些方法和思路也并不限制行業或產品類型,僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題,只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率,讓產研團隊有更多的精力和時間投入更有價值的事情。

作者:酷家樂UED

轉載請注明:站酷

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


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


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



設計的意義

鶴鶴

保羅·蘭德說:“設計是一種行為,是想象力馳騁的過程和產物?!?/span>

作為設計師,設計是我們的專業,也是我們用來解決商業問題的工具。

我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

設計師在從業的不同階段,對設計的理解不同。從追求工具技能到表現力、方法論、風格到影響行業甚至社會審美意識等等。不斷的錘煉之后,對設計意義也會有不同理解。

我們奉為的大師,都擅長用自己的知識架構定義對設計的理解。

保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業標志設計,包括IBM,UPS,ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經典橋段。

去研究這些前輩們如何看待設計、理解設計以及如何與設計相處一生,是另一種設計哲學的思辨。


保羅·蘭德說:

“設計是一種行為,是想象力馳騁的過程和產物?!?/strong>

設計表現可能看似是簡單的組裝、排序或是美化的過程,但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設計就是把散文變成詩歌的過程。

設計師是孤獨的,大部分時候他們是一個人在戰斗。

設計是個人行為,即便在設計成熟度較高的國家、企業或是大型團隊,設計師仍需在一線才能真正掌控在這場戰斗中可能遇到的極其細節的變化和給人傳達的感受。

設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業價值與藝術價值平衡的過程。正是因為這種關心很難平衡,才會出現雇主與設計師之間的沖突。

企業的目標是達到商業、經濟、政治甚至社會性目的。對設計師而言,設計是一種創造和實驗行為。通過這種行為來平衡之前的目標。

設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密,設計的產出就越有可能出彩。這其實并不難理解,對設計完成度有高追求的企業,CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。

當今社會,市面上依然存在太多糟糕的設計。

一來,核心的決策者對設計專業的理解度不夠。

二來,很多決策依賴于市場調研,既得利益的權重大于長遠利益。

再就是我們回避不開的話題,設計師在某種意義上話語權不夠。

抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權,但卻缺乏對設計專業知識的儲備。所以就會普遍出現外行指導內行的情況。過往(現在好一些),他們將設計師看做一套繪圖工具,一個合作供應商而不是一個業務團隊里重要的組成部門。

體系完整的企業可能會引入市場調研團隊,調研團隊為營銷提供定位信息,設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產生共鳴,就有可能促成正確決策甚至產生驚喜的創意作品。

但很多時候,我們聽到了太多這樣的回復:

我喜歡它;

我不喜歡它;

它太簡單了;

它太復雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結任何設計作品。


就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業去評判,才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉,于是大家習慣于選擇不好的設計,因為和他們朝夕相處。

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個設計的內在價值,決定性因素不是使用期,而是它所設定的“品質預期”。這是設計師的價值,也是設計師該練就的“知覺”。

何為知覺?

我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

本能、預感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

說到logo,我們常把logo當成品牌價值傳遞的重要符號。

它是一面旗幟、一個簽名、一個路標。大部分時候,雇主期待logo能描述一個行業,但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業屬性。因為logo遠不如它所代表的產品重要,它所代表的比它看起來的樣子更重要。


因為只有logo與它所屬的公司、產品、服務聯系起來時,它才具備真正的意義。一流的產品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”?!昂啙崱笔沁_成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。

“好的設計帶來好的生意”。但不可否認,即使不好的設計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設計么?

好的設計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標明確的企業,反映了它的產品或者服務的品質。


所以,這個世界需要好的設計,設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作,也是設計該有的意義。
來源:站酷     作者:大寶頻道
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

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

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

阻力設計在產品中的應用

鶴鶴

一.什么是阻力 ?


在百度百科的定義中,阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達到每小時 70-100km,遠超現代潛艇的航速。


人類為了擺脫自然界設計的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。


在人類社會,人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律,諸如此類的阻力都無時無刻規范著人類的行為。


類似地,對于互聯網產品,用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響,這些阻力會阻礙用戶完成目標。


二、為什么會產生阻力 ?


在認知心理學中,我們接受外部世界的刺激之后做出反應的過程中,涉及到我們如何感知、學習、推理、記憶,以及如何把意圖轉化為行為。人類數十萬年的進化過程中,對于感知、學習、推理、記憶的神經結構已經初步進化形成,大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力,從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。


2.1 傾向于通過經驗、環境和目標進行判斷

對于一件新事物,我們感知它的方式通常受到三個因素影響:過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦產品界面中與用戶的經驗預期相悖,就會產生阻力。


2.2 缺乏耐心和思考

面對一個我們從未使用過的機器設備時,我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法?!饵c石成金:訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think(不要讓我思考)”,作者認為設計者在設計一個界面時,最好能夠做到讓界面清晰易懂、一目了然,讓用戶能夠不必過多的思考就能夠使用它,幫助用戶跨越思考過程,讓用戶能夠輕松做出復雜的決策,減少認知壓力。


2.3 心流易被打斷

我們可能都經歷過心流狀態,當我們在極度專注地做某件事時完全沉浸其中并且非常高效,但如果意外地被打擾,會讓我們很煩躁。

有關任務執行的研究文獻中就曾經提到過:中斷會導致錯誤,而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個,重新啟動需要的時間會讓每個任務都變慢。

打擾我們的事情可能是工作時突然的一聲噪聲,也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流,造成用戶的使用阻力。


2.4 無法擺脫的認知負荷

認知負荷理論(Cognitive Load Theory)是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出,由于對人類學習認知和教學指導提供了新的理論框架,該理論在教育領域成為重要的心理學指導理論,在交互設計領域也存在著借鑒意義,理論的主要內容如下:

認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量,被分類為內在認知負荷、外部認知負荷以及相關認知負荷(如下圖)。當任務需要消耗的注意力和記憶容量超出學習者的極限時,就會導致認知超負荷,超出的部分將不會被學習者有效獲取。

不同的呈現形式形成的外部認知負荷是不同的,一般來說,文字>圖式>視聽。因此,為了避免認知超負荷給用戶帶來的使用阻力,我們應該設法簡化信息來降低內在認知負荷,通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。


三、產品設計中的阻力應用


如下圖,基于上述的用戶的認知能力分析,合理的降低阻力,能夠讓用戶在使用產品時效率更高,成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面,我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好,在某些場景下,我們需要增加阻力和提高用戶的使用成本,進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。


四、降低阻力的應用


4.1 提高交互效率


4.1.1 減少操作步驟

類似于一個倒金字塔結構,交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法,可以降低用戶行為路徑中的阻力。


使用合適的控件

不同的控件有著不同的應用場景,控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。

舉一個例子,在微信的朋友圈發布頁中編輯內容后點擊取消后,彈出警告框顯示“不保留”和“保留”按鈕,但是考慮到用戶可能會誤操作點擊取消按鈕的場景,此處應增加一個按鈕讓用戶回到編輯狀態,否則不管用戶選擇哪個選項都會退出發布頁重新進入,從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題,使用了默認有返回操作的上拉菜單控件作為提示方式,即使在誤操作場景下也不會增加操作步驟。

控件方面這里就不展開講了,大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。


復雜任務移交系統

任務都存在其復雜性,當我們無法簡化它時,可以考慮將復雜性移交給系統,使其代替用戶操作。

比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別,自動為用戶填充。 


預判用戶行為

預判用戶行為分為兩種方式,第一種是在用戶操作前,預判可能發生的用戶行為,以建議的形式為用戶提供選擇,縮短用戶行為路徑。

比如拍攝照片后,打開微信聊天頁面,微信會以氣泡的形式詢問用戶是否要發送圖片,如下圖。


第二種是由于用戶的認知錯誤進行了非目標操作時,系統提前識別引導用戶進入正確的流程并完成任務。


比如支付寶聊天界面中,很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬,但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能,從而避免了用戶的錯誤操作,如下圖。


優化頁面流程

不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用,將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式,導致從一級頁面(A)進入到二級頁面(B或C)后,如果想切換信息列表還需要返回到一級頁面再次選擇,增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高,希望用戶專注于當前的信息列表,但是我這樣的用戶經常查看過濾信息列表,擔心是否有重要信息被屏蔽,多出的一步操作還是給我帶來不小的使用阻力。


淘寶訂單模塊的做法就比較合理,從一級頁面(A)進入二級的任何頁面(B 或 C)后,二級頁面可以在標簽欄互相切換,而不需要退回一級頁面再次選擇二級頁面,從而節省了一步操作。


快捷方式

快捷方式有跳轉類和功能類兩種,跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。

比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用,減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。


功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務,比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務,并且在下次一鍵即可完成。


4.1.2 減少頁面跳轉

米哈里·契克森米哈賴在《心流:最佳體驗心理學》中將“最佳體驗”定義為:當我們在做某些事情時,那種全神貫注、投入忘我的狀態。這種狀態下,我們身心合一,甚至感覺不到時間的存在,技術水平也會達到頂峰,在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而,周圍突然的干擾或環境刺激都有可能打破心流體驗。 

用戶在使用軟件產品時很少有心流體驗,因為過多的頁面的跳轉和刷新會中斷用戶心流,冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題,我們可以提高單個頁面的動態容量,在不跳轉頁面的前提下使用戶完成任務,為用戶創造在視覺感受層面上的心流體驗,下面是一些方法舉例。


覆蓋層

覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口,可以由用戶觸發或系統自動觸發,在網頁端和移動端都有著廣泛應用。我們通??梢詫⑵溆糜谳斎雰热?、附加信息、子頁面信息外顯、顯示操作指令等。


a.模態覆蓋層

模態覆蓋層一般由點擊觸發,通常出現后會伴隨亮盒效果,使用戶聚焦于覆蓋層上的任務,用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定,它可以是一個小型的顯示警示信息的彈窗,也可能是一個篇幅很大的信息介紹,在保持上下文的情況下展示更多信息,避免了用戶迷失在各種頁面跳轉中。

如下圖,behance的首頁點擊一個作品后,會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容,而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中,一般只需要 1-3 分鐘的瀏覽后就會關閉頁面,模態覆蓋層的方式使得打開和關閉的操作更加流暢,提高了設計師的瀏覽效率。



模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性,為了避免用戶產生明顯的割裂感,一般適合采用模態覆蓋層的方式展示新頁面。如下圖,知乎使用模態覆蓋層展示評論。


b.詳情覆蓋層

詳情覆蓋層在網頁端通過光標移入觸發,觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時,會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息,避免了跳轉新頁面。


嵌入層

嵌入層類似于抽屜,需要的時候將其展開,不需要的時候將其收起。與模態層不同之處在于,展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有:拓展內容、展示下級內容。

如下圖,微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。


Xmind的嵌入層展示了格式的下級內容,可以在保持能夠繼續編輯腦圖的前提下進行格式設置。


標簽頁

對于內容豐富的頁面,希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。


4.2 降低交互成本


4.2.1 降低操作難度

把某些操作難度大耗費成本高的操作使用新技術解決,比如人臉識別和 OCR 技術可以降低信息輸入成本,不但幫助用戶使用較少的時間完成任務,也降低了用戶的犯錯幾率和使用阻力。

手勢的優化也是降低操作難度的可行方法,優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后,針對不同使用場景的用戶提供了三種退出的方式,大大降低了操作難度。


舉一個反例,得到的書籍詳情頁中,查看詳情的按鈕熱區只存在于文字上,但是用戶的使用習慣會誤認為整塊區域都可以點擊,因此每次點擊多次失敗后才理解熱區的正確位置,如果將熱區擴大到整個區域就可以降低操作的難度。


想要了解更多交互手勢知識可以拓展閱讀: 交互手勢的容錯性和邏輯性 


4.2.2 減少用戶思考


提供默認選擇

用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解,會糾結和疑惑不同選擇之間的區別,最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇,同時允許用戶切換到其他選擇,以此來減少思考,降低使用阻力。

以手機淘寶查看相似寶貝功能改版為例,在舊版中,長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項,點擊后會跳轉到對應頁面。在新版中,長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品,同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是,由于舊版的第二步給用戶的兩個選項讓用戶過多思考,導致第二步的流失率過高,很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶,同時也很方便地去切換到「同款寶貝」,這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。


保持一致性

我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦交互界面中與用戶的經驗預期相悖,就會產生阻力。

上文提到過,我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題,我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此,當設計缺乏一致性時,不但會導致我們已經形成的條件反射和肌肉記憶失效,還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作,從而形成阻力。為了避免這些阻力,我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。

如下圖,警告框的按鈕位置一旦第一次用戶經過使用熟悉后,之后用戶會進行無意識地快速操作,此時如果某個警告框缺乏一致性就會導致錯誤的發生。


4.3 降低認知負荷


4.3.1 降低內在負荷

內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了,它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。


簡潔易懂

如果能夠做到簡潔,就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒,從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍,不應該使用用戶難以理解的各種黑話和行話。在此基礎上,如果能夠通過形象生動的修辭手法幫助用戶快速理解,就更勝一籌了,比如針對垃圾分類,一些網友發明的快速記憶方法就是一個很不錯的例子,如下圖。


重點突出

一段文案中可能有些是重點內容,有些是解釋內容,并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶,能夠引導用戶下一步行動就足夠了,至于其他解釋性或者不重要的內容弱化即可。

針對前兩條規則,我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示,每一次購買火車票的過程中,當我遇到 12306 的這個彈窗,都會讓我用不少時間去進行理解和思考。首先在個人看來,“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在,如果沒有標題,直接展示正文即可;其次,正文的內容重點信息不突出,其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車?!边^于長和復雜,很考驗用戶的短期記憶和耐心;最后,按鈕文字沒有提供操作路徑,用戶想知道如何操作需要先閱讀完上面的文案。


飛豬的案例就避免了 12306 所存在的問題,做到了簡潔易懂和重點突出,如下圖。


表意清晰

表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。


保持一致

同一個軟件系統中,表達相同概念的用詞一致。模塊中的相似文案,語法表達方式一致。上文提到我們人類很少愿意思考的特點,一旦一個軟件系統出現表示同一個概念,但是名稱不一樣的詞語,我們大腦就不得不開始被迫思考:“這個詞語和之前那個很接近但是有些不一樣,它們是同一個東西嗎?”這個思考過程從而形成了不小的阻力?!墩J知與設計》一書中提到一條規則:“同一個名稱,就是同一個東西;不同的名稱,就是不同的東西?!币虼?,一致性是撰寫交互文案的一條重要原則。


4.3.2 降低外在負荷

當信息的內在負荷不能再進行降低時,通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化,降低外在負荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題,這里就不做展開了。



五、提高阻力的應用


阻力并不是越小越好,在某些場景下,我們需要提高阻力提高用戶的使用成本達成某些目的。


5.1 優化交互體驗


5.1.1 提高防錯能力

類似于馬路上的減速帶,在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力,減緩用戶的操作的節奏,達到防錯的目的。如下圖,在藍湖中如果要刪除一個項目,就需要先輸入項目的名稱后才能成功刪除,通過增加阻力提高了防錯能力。



5.1.2 提供安全感

針對涉及到用戶隱私的敏感操作,通過設計特定的交互流程讓用戶體驗到安全感,比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂,增加用戶的確定感和可控感。


5.1.3 建立儀式感

生活中大部分的時刻都是單調乏味的,我們需要使用各種儀式點綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗旅程中的點睛之筆。

就像多年前堅果手機一代的包裝,設計師別具匠心的將包裝設計為一次充滿著童趣的體驗,雖然拆包裝的過程時間增加,但是給予用戶似曾相識的場景是不可替代的。


看似使用起來費力的微信搖一搖,可以加強用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗,這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。


5.2 維護社區生態

用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多,內容質量就越高,進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區,就會同時帶來大量的負面內容,造成對其他用戶的干擾,甚至導致他們大量流失。因此,為了讓一個產品的社區生態能夠健康發展,我們需要采取一些篩選方法來設置阻力,以此來篩選出對平臺有益的用戶和內容。


5.2.1 篩選用戶


邀請制

很多產品在冷啟動階段,為了避免垃圾用戶和提高社區質量,會設立邀請制來控制用戶來源,然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本,保持服務器穩定,甚至可以制造一種供不應求的感覺,獲得更多的討論度。


價格門檻

網絡騙局在社交類產品屢見不鮮,婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量,不僅嚴防死守,還會設立價格門檻,不付費直接無法使用,這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見,但是確實有效地進行了用戶篩選。



測試門檻

通過設置測試題將用戶分成不同的群體,進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試,需要花費的時間成本比較高,通過這種方式篩選出真正認同 B 站社區文化的優質用戶,給予這些用戶更多在社區中互動的權限,從而也大量減少了低質量用戶的負面行為。

上述的三種用戶篩選方法是否適用,需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡單舉例。


5.2.2 篩選內容

不同的內容形式對于社區的價值是不一樣,我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發布純文字內容,需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容,附有圖片的內容對于其他用戶更具有吸引力,通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間,從而也可以使朋友圈廣告得到更多的曝光。


5.3 迎合商業目標

有時產品的商業目標和用戶目標存在一定沖突時,損失一定的用戶體驗滿足商業目標是不得不進行的選擇,這需要我們進行合理的平衡。


5.3.1 功能引導

為了迎合商業目標,我們有時需要針對一些功能設置一定操作阻力將其進行弱化,然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見,比如通過強化按鈕對比進行功能的引導,如下圖。



5.3.2 歧視性策略

歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分,針對身份等級低的用戶設置使用阻力,以便于引導其投入更多精力和資源,或者通過此方式給予高等級用戶優越感,刺激其進行分享炫耀。

16 年發布的支付寶生活圈就是一個很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點贊。互聯網產品中,每增加一個動作,用戶都會呈幾何級流失,但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作,幫助支付寶生活圈實現了刷屏傳播的效果。


六、總結


雖然讓用戶暢通無阻地使用產品是我們的目標,但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下,我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路,助力你在產品優化探索中找到可行的切入點。


參考資料:

《微交互:細節設計成就卓越產品》作者:Dan Saffer

《心流》作者:米哈里·契克森米哈賴

《web界面設計》作者:Bill Scott / Theresa Neil

《認知與設計》作者:Jeff Johnson

《阻力設計:探索質量和數據間的平衡點》IXDC 演講,作者:王毓瑩

《點石成金》作者: 史蒂夫·克魯克

《設計心理學2:管理復雜》作者:唐納德·A·諾曼



作者:Ballen成明

轉載請注明:站酷

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


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


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


設計師如何避免反復修改?

鶴鶴

最近新的一批應屆生開始步入職場,讓我想到自己剛入設計這一行時,遇到的大大小小問題感到很是無助。今天這篇是結合自身經驗寫給入行不久的設計,希望你們眼中有光心中有夢對設計仍不忘初心。

前言

相信你在設計工作中一定遇到過這樣的場景,當好不容易拿著設計稿推進時,被各種角色提出意見:
“我覺得這個設計不高級”,“我覺得這里可以再大一點,顏色更亮一點”,“我覺得可以試試競品那樣”,“算了,還是用第一稿吧”等等,然后陷入無限改改改的循環中,往往做著做著就開始懷疑自己是不是不適合設計






為什么會發生這種情況?

我認為有3個方面的問題

1、視覺的主觀性

每個人的審美不一樣,天然會摻雜著主觀因素,導致每個人都能很容易的提出自己的意見。而我們對設計關注往往是各種好看概念稿、當前流行趨勢等等,導致我們過于追求視覺表現,而忘記從需求層面出發

2、用戶洞察缺失,設計方案不符合用戶認知

每個需求都是有具體的目標用戶,用戶身份不同,同一個問題背后的需求也是不一樣的,當與真實用戶脫節,業務理解不到位,很可能就把整個需求理解錯誤,這樣修改的幾率就很大


3、目標不清晰

沒有理解每個功能是什么,背后要解決的問題是什么,滿足了什么需求,能夠得到的價值是什么

產品或運營提出一個需求的背后,往往都有一個非常明確的結果預期,他們也需要層層審核。我們不應該想“他是不是對我有意見”“他不懂設計的吧,就喜歡瞎BB”“每次都這樣針對我,設計做的真沒意思”等等,而是需要主動溝通,了解為什么?只有充分的理解需求,才能尋找更正確更好的解決方案。



我們做稿子時常存在問題是我們僅僅關注了設計視覺表達環節,整個項目流程我們理解的過于狹隘,騰訊百度這些大廠設計流程往往從項目立項設計已經開始介入了



如何解決?

想要提升設計方案的說服力,首先要從思想上改變對設計認知,然后再從執行層上落實每個小點

1、體系化的思考

1. 1、拓寬邊界

這里需要設計師站在更高的視角,把設計從表現和執行抽離往前后延展,在整個過程中往前去挖掘需求和規劃產品結構,往后做到把控和沉淀,跳出視覺認知層,才能宏觀看待整個業務改版



1.2、轉換視角

從不同的視角看待問題,學會拆解問題和解決問題,從產品、設計、開發不同的角度來全盤看整個產品,分析這個需求的投入產出比是否足夠,是否能達到目標(包括設計目標和產品目標)。設計、產品、開發從來都不是對立的,都是不同角色為了整個產品發力。



1.3、追本溯源

我們在開始著手項目的時候,不要單點去看要在某個頁面要做什么改動,而是從問題入手,和產品同學對齊好目標,結合設計理念。


最后找到發力點在哪里,循序漸進,這樣很大程度上能避免項目的反復,對設計流程的準確把控也是輸出優秀設計方案的基礎。



1.4、認知創新

有些新設計師認為創新就是把原項目進行翻天覆地的改變,初入職場會覺得負責的業務和項目都很小,沒有什么意思,其實創新的維度有很多,包括設計工作流程的優化,還有從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜。



陌陌情感化設計和貝殼旗下被窩家裝產品圖標設計異曲同工之處,大方向上都是利用大色塊、細節處用線條勾勒,整體設計輕量化符合年輕人喜歡,但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象,而被窩家裝圖標融入品牌IP趣味化表達,傳達出詼諧、幽默的正面情感

2、理解需求

設計師往往對信息的獲取比較片面,很多往往坐等原型,然后刷網站找圖接著打開軟件擼圖,這種不充分理解需求就開始做設計的行為,屬于思維懶惰,就被稱為常說的美工

我們在需求階段設計師應該主動跟需求方深入溝通,搞清楚以下方向的問題:




3、明確目標

明確目標是為了最終設計方案可衡量,設計師工作不是提供一個天花亂墜的方案,而是盡可能走在一個正確道路上提供給需求最合適的方案,只有大方向不錯的情況下才有好壞之分



4、實際案例帶練

4.1、前期分析

在業務探索初期,舊版滿足了業務方和用戶的基本訴求。但是隨著業務擴張與更新迭代,我們逐漸發現現有的租售模塊實價登錄信息不能提供用戶有效的參考價值,該頁面點擊到實價登錄頁面的用戶量極少



(1) 價值點展示不足,人均點閱量較低

這個改版的背景是在租售業務上優化實價登錄社區的需求,租售詳情頁的上內容的呈現還是舊版,現有框架和內容對社區價值點展示不足。


解決辦法:優化信息框架,豐富該房屋社區信息,滿足用戶找房時了解社區資訊需求
比如整個社區在該市的排名、整個社區的配置圖、口碑評分等以及在實際找房場景過程中,用戶會找這個社區內同格局同戶型的房屋等等

(2) 與用戶預期不符,跳出率較高

整個591APP是臺灣地區關注度最高房屋的產品,但是從二手房引流過來的用戶很少,埋點數據不理想


解決辦法:除了在視覺上也要與本身租售的業務分開,讓用戶理解注意到該模塊的價值外,另外在體驗層也需要優化

4.2、用戶分析:深挖用戶真實的場景訴求

為了更好的明確實價登錄的價值定位,以及確認用戶期望什么的信息呈現,我們在實際改版時對用戶做了多輪的摸底調研,挖掘用戶在使用關注功能時的真實場景訴求。


在調研過程中,我們發現使用實價登錄的用戶分兩類,分別是觀望期的用戶和決策期的用戶,這兩類用戶雖然都使用,但是對實價登錄功能的場景訴求是不一樣的。



(1) 觀望期用戶

觀望期用戶一般是有買房計劃,但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數是了解為主,從慢慢對比中做到心中有數

(2) 決策期用戶

決策期的用戶大多已經線下看過房,有些甚至已經到了和議價階段,他們對于自己的購房訴求已經十分清晰。在這個階段的用戶,期望提供更多有關體現房源價值的信息,比如掛盤時間、成交表、周邊完善程度等等,這些信息一方面可以展示出目前房源再市場內的定位,重新調整價格預期;另一方面也能了解到業主心里預期,提升線下斡旋的成功率

我們可以從這兩類用戶的使用訴求看到,大家都期待能提供更豐富有效的信息,幫助自己明確需求和輔助決策。

4.3、設計目標

由上述信息得出我們的設計目標,提高租售模塊的實價登錄的點閱、降低跳出率,當我們的設計方案每個細節,都是以目標為導向時,你輸出的方案將更有說服力



4.4、設計實踐

結合實價登錄歷史現狀和不同階段用戶場景使用預期。我們在本次關注改版上制定了對應的設計策略。

(1) 首屏

舊版分析:僅滿足用戶基本使用,其中承諾的誤差率未達標,與內政部信息同步也存在問題;同時,視覺上更像是內容說明展示,點擊感不明顯


優化策略:圍繞用戶買房租房場景,為用戶提供最新的實價登錄信息,同時添加點擊指向性箭頭,告知用戶可點



通過對首屏不斷的優化和迭代,打磨體驗細節和設計細節,首頁的點閱提升了43%

(2) 實價詳情

從框架層對功能和層級進行梳理,原層級主要功能不突出,根據功能的重要層級以及用戶使用頻次進行梳理,將入口進行提煉,同時針對多樣化需要增加新的入口

舊版分析:用戶在不了解社區情況下缺少關注動機;折線圖不明所意;同社區是否有成交與當前用戶缺乏聯系;查看更多實價登錄卻到社區詳情頁與預期不符


優化策略:圍繞用戶買房租房場景,展示與用戶切身利益相關信息






(3) 保持規范,風格統一

關于顏色

整個產品主色是橙色,但是目前租售詳情頁上藍色橙色混用,當然設計的改版也需要鍥機,所以我們這次改版沿用橙色,當好區別之前的藍色,達到凸顯實價登錄模塊的目的



配色從樸素到亮眼跟從LOGO配色,“暗藍色”到“亮橙色”增強年輕感,加強了顏色的對比度,讓品牌感知更加直接,增加品牌視覺分量

關于圓角

圓角,代表友好、親和,具有更強的內指向性。我們對于圓角的取值上也做了足夠的思考:結合房屋特性,卡片內需承載的內容信息眾多,圓角太大會影響邊角信息的呈現,所以我們在圓角選取上將圓角數值整體縮小,采用了可根據場景精細程度選擇合適數值的圓角(4-6-8px),使卡片容器信息展示更聚焦。



5、高效溝通

設計師不僅要會設計,還要能夠有理有據的,跟需求方陳述自己的設計方案。尤其是在項目合作和設計推進時,非常重要。方法可以分為以下幾點:a.有邏輯;b.能堅持;c.會妥協。



5.1、有邏輯

向別人推進自己方案之前,先把自己要表達的內容梳理清晰,進行調整和簡化。試想你小時候全校上臺發表考試獲獎感言,是不是有個長長的稿子
多問自己一些為什么,比如下面稿子類似于廣告位的地方,當前目標是提高點擊率。但是整個模塊展示是在另外的業務上,也是存在突出的同時不能太突出的問題



初稿給出的時候也是出于2個方向考慮,方案一是出于頁面整體風格一致性同時優化視覺,稍作強調;方案二考慮到方案一視覺引導弱了,用重色強引導達到產品目標。2個設計方案都可達到產品目標,剩下的就是調優了

5.2、能堅持

在符合最終產品目標的設計方案,必須堅持。但是,你要有證據證明為什么它值得或者能夠堅持。


這里再分享一個案例來,臺灣用戶往往特別注重個人隱私,基本不開通系統定位,但是買房租房位置選擇及交通地域選擇是第一步,否則后續搜索無法定位到用戶預期。所以此次產品目標是加強導航的視覺層級,當然這只是優化需求里面一個小需求

經過競品分析、加強品牌感知和用戶使用習慣等方面確定使用品牌橙。但是這個橙飽和度比較高,在測試階段非專業人士提出疑問導航這個太刺眼,讓整個頁面感覺不高級,讓產品和交互再次懷疑這個橙色是否需要調整



這個時候設計堅持是非常有必要的,因為大量結果驗證是可達到產品預期也符合用戶使用習慣,僅因為大陸同事質疑就在測試環節隨意修改,這個是非常沒必要的。測試環節離上線時間是非常緊迫的,這個急促的時間推翻重來結果也可想而知

5.3、會妥協

體驗設計會有很多不可控的因素,是在各種局限下做出最合適的選擇。要處理好問題的優先級,分清楚哪些是核心目標,哪些是兼顧目標,這樣才能更有效的管理自己的時間以及項目的進度。

6、方案闡述

6.1、什么是清晰有效的設計方案?

清晰設計層面來說就是方案能做到方向明確,方案明了;有效字從設計層面來說就是輸出的方案可以解決存在的問題,能達到設定的目標以及可以切實落地。



清晰和有效的維度是不一樣的:清晰更多是針對設計,在于不同方向/方案的差異度和側重點;
有效更多需要聯合設計上下游(用戶/產品/開發),對于優秀的設計方案來說兩者相輔相成,缺一不可

6.2、清晰:方向明確,方案明了

數量并不代表一個設計師的專業,最多只能說明設計師技法嫻熟。在評審的過程中,不建議將所有的設計方案直接平鋪。而是你要先經過自己思考、衡量與推敲,挑選出最優的 1~2 個方案進行方案評審,并給出設計說明,陳述方案的思考邏輯。

在設計最初期先思考有哪些途徑達到目標,確保所有實現手段的方式都有考慮到,整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸,才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。



之前的例子比如目標答案是提高點擊率和閱讀量,我從3個方面闡述方案的可行性
方案一:沿用當前頁面的比較扁平設計樣式,選用大間隔大標題區分模塊,在頁面里加入品牌色裝飾強調我們的模塊,吸引用戶點擊;
方案二:可以采用卡片式設計突出點擊感,吸引用戶點擊;
方案三:因為頭部有用橙色裝飾強調,所以整個頭部模塊不用卡片式呈現,突出后面2個模塊

這樣3個方案給需求方,即滿足對方產品需求,又滿足設計需求,對方就不會全盤否認設計方案,走入改改改模式了,就算對方有修改意見也能說出具體點去修改,而不是說我覺得不好,不夠突出這樣非常主觀的想法



強調一點:我們在方案都沒說服自己的情況下不要推出去,專業度是每次和對方碰撞中中慢慢建立起來的,如果說服不了自己的情況下,推出去對方很大可能性要你試無數稿對比;另外在闡述發需求方時候,也要注意語言的引導,慢慢理解對方的意圖

6.3、有效:解決存在的問題、能達到設定的目標、可以落地的方案

初入行時認為滿足了需求方便是好的設計,當其他角色提出不同意見就會覺得他們不懂的設計。這些現象是因為設計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達到團隊共同設定的目標,以及方案是否能平穩落地這三個維度



(1)解決存在的問題——從問題出發

我們在實際輸出方案的時候,不能從產品經理的需求文檔開始,而是要把考量維度更前置,從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋,內部團隊的聲音,同時對問題進行篩選和甄別。

比如下面同一個產品按鈕2種懸浮狀態,左側案例按鈕hover狀態是由正常狀態面型變成線型;右側案例按鈕hover狀態是正常狀態下加投影。



如果我們僅從產品需求文檔開始,不去深究其背后的原因,很可能把右側hover狀態直接變色處理,沒有去思考hover的幾種樣式哪種是更適合當前場景的的,這樣簡單粗暴的處理方式多了之后使得產品體驗大大折扣



(2)能達到設定的目標——從目標啟動

問題還需要結合目標一起考慮,解決問題的思路并不完全等同于目標,目標是大家一起制定的未來產品的發展方向。比如之前導航的案例,未發版前部分工作人員認為顏色偏重,但是從產品目標和品牌調性及目標用戶審美上是沒有問題的



(3)能落地的方案——技術可以實現

在輸出設計方案的時候,需要考慮到開發實現的可行性,需要消耗多少資源去實現這個需求,最低成本達到目標的路徑是什么。最常見的就是情感化設計,下圖案例2個空狀態下的場景,原本考慮到趣味性及品牌屬性加入動效,但是開發的業務需求已經排到下月,最后只能以靜態圖展示,先滿足基本需求后續有時間再進行優化



再例如下面三組數據的排版方案一:文字最左邊間距30px,文字最右邊間距30px,中間一組數據中間對齊;

方案二:三組數據分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理,當寬度是1200時右側不會空太多,但是按方案二的邏輯寫更加便捷,一組數據樣式可以解決3組數據的排版,大大提高開發效率,如果用方案二評審加入開發實現方式的思考,那么按過稿率大大提升了



以上是跟進項目一整個具體過程,了解背景、分析問題、設定目標、到方案推導及執行輸出、再到方案的落地,整個過程與產品研發溝通非常順利,最后也獲得良好的用戶反饋,整個團隊滿滿的成就感是非常開心的



總結

進入互聯網公司工作初期,大多數人對設計的理解更多停留在表現層,對設計的判斷標準更多是好不好看、喜不喜歡。但作為設計師我們不要盲目的去畫設計圖,只有在設計方案前,更好的理解和分析了需求,才能很好地服務用戶幫助用戶使用產品;同時,只有站在用戶的角度去分析理解產品,才可以幫助產品站在全局的視角提升用戶體驗和設計需求,從而打造優秀的用戶體驗。這2點綜合起來才是設計師價值的體現。

原文地址:站酷

作者:貝賢設計筆記

轉載請注明:學UI網》科幻機甲風格海報怎么做?

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


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

藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

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


如何有效的打造設計體系

鶴鶴

“仰望星空,腳踏實地” ,做設計需要想象空間,也要有反思和總結的能力。



什么是設計體系?
設計體系是為了實現數字產品的目的而組織起來的一套相互關聯的模式和共享實踐。



讓我們來看兩個毫無關聯的產品的界面。



BI產品




團隊協作產品

這兩個案例展現了如何選用不同的模式以實現不同的目的。
對于BI產品來說,目的是讓數據分析更徹底,提高數據分析效率;更好的整合數據,為企業提供報表,做為企業決策的依據;更好的幫助企業管理者管理企業,提高企業實力。
對于teambition來說,目的是輕松記錄要做的事,并與伙伴實時同步進展。讓彼此清楚地了解項目整體情況及事項優先級,從而完成目標。


基于產品目的我們可以看出BI產品重效率;teambition 更看重清晰以及使用是否輕松愉悅。
而產品的目的決定了它所采用的設計模式也會不同,下面我們再對照界面看下基于目的在界面設計上有什么不同。






BI產品






團隊協作產品

BI數據分析類產品的布局多是小部件組成,這樣做會方便用戶進行多任務處理。界面設計也會相對比較密集,整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。

設計模式

設計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大(Christopher Alexander)在他的開創性著作《建筑的永恒之道》和《建筑模式語言》中提出的。 

《建筑模式語言》里面包含了253個建筑設計模式,大的如城市和道路系統的布局,小的如家庭住宅中的照明和家具。 

類似地,我們在創建界面時,也在使用設計模式(組件)來解決常見的問題:使用標簽頁將內容分成幾個部分,并表明哪一個選項對應于當前的頁面;使用下拉菜單展示可供用戶選擇相關選項。



標簽頁



下拉組件

設計模式分為2類:



第一類:功能性模式(組件庫)表現為界面上的具體模塊,如按鈕、標題、表單元素、菜單等。
第二類:感知性模式(視覺規范)則是描述性的樣式,以可視化方式表達和呈現產品的個性,如配色、排版、圖標、形狀、動畫等。

功能性模式有點像名詞和動詞,它們是界面中那些具體的、可操作的部分;而感知性模式則類似于形容詞,它們是描述性的。

例如,按鈕是具有明確功能的模塊,它讓用戶能夠提交某項操作。但按鈕上的文字的樣式,以及按鈕本身的形狀、背景色、填充、交互狀態和過渡動畫不是模塊,而是樣式,這些樣式描述了按鈕是什么樣的。

共享語言

唐·諾曼在《設計心理學》一書中說過:系統映像(界面)和用戶模型(用戶通過與界面交互而形成的感知)之間存在著一道鴻溝。


在設計團隊內部也是如此,比如“范圍輸入框”組件,你能想象它是一個什么樣的組件嗎?相信不同的人肯定有不同的心智模型,因為這個組件不是常用組件,在ant design、arco.design組件庫中也找不到這個名稱組件,因為它是TDesign的產物。



而每個公司都會根據自己的產品特性創造一些非常規類組件名稱,這個時候就需要在所有參與產品創建的人之間共享。只有產品內部設計語言一致,才能去培養用戶的心智模型,這樣才能去除系統映像與用戶模型之間的這道鴻溝。


例如上面這個組件,每個人都需要知道這個組件叫“范圍輸入框”,而不是“輸入框”或者“數字輸入框”。

如何衡量設計體系的有效性

例如,teambition的目的是“輕松記錄要做的事,并與伙伴實時同步進展”。



于是,我們可以去看產品,設計體系在實現這一目標的過程中發揮了多大作用,以及這些設計實踐的效果如何。如果視覺、交互混亂,導致無法實現上述目標,那么可以認為這套設計體系是無效的。

上面介紹了設計體系包含的內容,下面我們針對這些內容進行具體的介紹:

設計原則


有效設計原則特征

做B端的小伙伴應該都知道ant design,但不知道有多少小伙伴有認真的看過ant design的設計原則。 可能有小伙伴會問這個設計原則有什么用,我最開始也覺得沒什么用,后來在參與設計體系優化過程中發現這個原則就是金字塔尖。 

例如:用戶沒有填寫完表單,那么表單的提交按鈕能不能點?是置灰好,還是按了以后再給彈窗提示。 

例如:可編輯表格,是放一個筆狀icon來提示可編輯,還是采用鼠標觸發時出現輸入框以及指針變為文本狀態。

日常工作中總會在這些細節問題上爭論很久,美其名曰“打磨設計”,其實很多時候就是設計原則在團隊內部沒有達成共識。

為了避免出現上述問題,我們要建立一套基本的價值觀和原則。在一些公司里,尤其是在處于初創期的公司里,嘗試建立一套共同的準則是很難的。設計原則是無法量化的,因此定義這些原則可能需要多次迭代。

對于原則到底是什么,可能存在一些爭議。有些公司的設計原則偏重于品牌,有的偏重于團隊文化,有的則偏重于設計流程。 

例如,Pinterest的設計原則便偏重于品牌。



Atlassian公司沒有分團隊或者產品單獨制定原則。


他們的目標是在客戶可觸及的每一點上都體現一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現。
不過,盡管各處的價值觀是相同的,但體現程度并不一樣。


例如,官網就會較多的提現“”大膽”,但產品里面就不會,正如Atlassian公司的設計經理Kevin Coffey所說的,“沒有人想要一個‘大膽的’服務支持頁面”。



Atlassian 官網截圖 https://www.atlassian.com/zh


Atlassian 設計體系 https://atlassian.design/

設計原則是真實而貼切的

我們以TED為例。TED的一條設計原則是“追求永恒,而不是追求潮流”。永恒這個詞不光體現在TED的界面上,還體現在TED的整個品牌和設計方法上。 

這意味著他們不會為了追逐潮流而采用一項新的技術或引入一個新的設計元素。



設計原則是實用的、可操作的

例如:定義了原則為“簡化”(讓產品盡可能簡單,簡單到幾乎感覺不到它的存在)。這種原則就是不實用也不可操作的。 

怎么能讓團隊所有人都能理解? 

消除無用的部分。每一個設計元素,無論大小,都必須有一個目的,并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里,那么它便很可能不應該在那里。這樣的定義就清晰很多。

再例如:定義了設計原則為“有用”,什么是“有用”? 

從需求開始。如果你不知道用戶需要什么, 就無法做出正確的事情。去做調研,去分析數據,去與用戶交流,而不是做假設。

設計原則能幫我們確定優先級 

好的設計原則也能幫我們確定優先級和平衡點。 

Salesforce公司的Lightning設計體系的原則是“清晰、高效、一致、美觀”。 

這些原則的優先級必須遵從以上順序?!懊烙^”不應該高于“高效”和“一致”,而“清晰”應該始終放在第一位。按照這種方式對原則進行排序,可以讓團隊在做設計決策時明確哪些東西應該優先考慮。



設計原則是能產生共鳴、容易讓人記住

Atlassian和Airbnb的團隊成員被問及他們的設計原則時,他們都能脫口而出,沒有片刻猶豫,沒有人表現出遲疑,沒有人想要去翻看品牌手冊里的原則內容。他們為什么能把原則記得這么牢固呢?因為他們的原則足夠簡單、實用、易于讓人產生共鳴。

Airbnb公司的四條設計原則(“統一”“通用”“風格化的”“對話式的”)便深深地扎根于其設計過程之中。

每當設計一個新的組件時,我們都會確保它完全滿足四條原則。如果我們沒有這一套原則,便很難就各種問題達成一致意見。----Airbnb 首席交互設計師

怎么定義設計原則

每個團隊建立其設計原則的方法都不盡相同:有的會召開幾輪研討會,有的可能會征求CEO或創意總監的意見。不過,無論采取哪種方式,都離不開下面幾點:

從目的開始

TED網站的主要目的可以用一句話來表述:“盡可能廣泛地傳播演講?!币虼耍琓ED網站的精神和價值觀便是觸及盡可能多的人群,降低使用門檻,讓產品具有很高的兼容性和可訪問性。這意味著優化性能和提升可訪問性比添加華而不實的功能更重要,清晰的文案比大膽的設計更重要。

尋找共識

如果你仍處在定義設計原則的階段,那么一個有效的方法便是讓團隊的一些人或所有人(取決于團隊規模)各自回答關于設計原則的問題。例如,在他們眼里,什么樣的設計對你們產品來說是好的設計?他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設計原則?

面向正確的受眾

如果搞不清楚設計原則是為誰寫的,就一定會寫出含糊不清的原則。有的小伙伴說我們領導就喜歡“美觀”,那我們是不是把“美觀”放在第一位?一定要搞清楚為誰而寫。原則到模式

原則到模式

作為一個設計師,定義設計原則可能對你來說也許并不難, 但怎么把原則、品牌價值、組件相結合,怎么體現在設計模型中,這個我覺得是個挑戰。

對于 TED 來說,信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難,所以有時候標題可能很長。對標題 進行截斷是很容易的,但對他們來說,演講信息的優先級是最 高的。

因此,他們沒有選擇相對容易的標題截斷方案,而是確保他們的設計模式可以容納長的標題。



功能性模式(組件)

功能性模式是界面中有形的構件(表單)。它們的目的是讓用戶能夠完成某種行為(填寫表單),或者激勵用戶完成某種行為。

功能性模式可以很簡單(標簽?字、輸?框、按鈕 ),也可以組合成更復雜的模式(搜索組件)。

標簽?字、輸?框、和按鈕

搜索組件由標簽?字、輸?框和按鈕組成


模式在變,行為不變

隨著產品的發展,模式也在不斷發展。包括風格,甚至功能和交互方式,都有變化。然而,它們的目的基本保持不變。

我們用頂部導航舉例:

頂部導航是由logo、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的:搜索定位框告訴我們怎么快速找到想要的東西,導航帶領我們瀏覽全局,指引我們到想去的地方,而后面的的圖標按鈕讓我快速觸達。

總的來看,這些模塊都有一個共同的目的:引導用戶快速瀏覽使用。隨著產品的發展,模式也在不斷發展。

例如,隨著產品功能越來越多,可能會在導航上面新增設置功能,讓用戶自己去排布常用功能。又如,我們可能會對導航進行重新布局,把導航按模塊分類,采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代,希望它更好的實現各自的目的或者說更有效地激勵用戶使用。

在設計開始階段就闡明模式的目的,能避免在產品發展過程中做重復性的工作。

目的決定了其他的一切:模式的結構、內容及呈現。了解模式的目的,可以幫助我們設計和構建更加穩健的模塊。

如果說功能性模式是界面中的組件,那么感知性模式則更像是樣式——描述組件是什么類型的,給人的感受是什么樣的。下面,我們將探討感知性模式。

感知性模式(視覺規范)

設想我們每個人各有一套房子,且每套房子都有以下這些家具:一張桌子、幾把椅子、一張床和一個衣柜。

不過,雖然都有這些家具,但每套房子給人的感覺截然不同:可能是因為家具的樣式、材料、顏色、紋理不同,或者是床罩的布料、裝飾品的樣式、房間的布局和燈光,甚至是房間里播放的音樂不 同。

上述這些屬性便稱作感知性模式。正是因為它們,可能你的房子就像是一個地中海風格的小窩,而我的房子就像是一個倉庫。

而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫,以及這些要素在界面中的組合和使用的具體方式。

有時,人們將這樣的特性視為產品的樣式,或稱作皮膚,也就是最外面的一層。但要想取得成效,它們必須不僅存在于表面,還必須存在于品牌的核心,并隨著產品的發展而發展。

只有這樣,感知性模式才會成為讓產品脫穎而出的強大力量。

感知性模式的作用

同一領域的產品,哪怕具有相似的模塊,它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌,并讓品牌被人記住。

看下面的圖片,你能認出它們是什么產品嗎?

這兩張圖里面并沒有太多的信息,你只能看到排版的樣式、一些圖形和顏色,以及一些圖標。然而那些視覺上的線索極具辨識度,所以你仍然很有可能看出它們分別屬于什么產品(即釘釘和飛書)。

這些視覺元素通過有意識地反復使用,便形成了模式,這就是為什么我們可以在沒有上下文的情況下認出它們。

感知性模式讓系統更為連貫

在模塊化的系統中,想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的,因此它們可以將系統的不同部分連接起來。如果這種連接是有效的,那么用戶就會感受到模塊之間的統一性。

例如:飛書和騰訊的相同功能的組件感知模式是不一樣的,所以兩個公司設計體系不能混用。

探索感知性模式

如果說功能性模塊反映的是用戶需要且想要的內容,那么感知性模式關注的則是他們直觀的感受或行為。

在《網站情感化設計》一書中,作者提出了一 個簡單的方法,通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。

情緒板

情緒板是探索不同視覺主題的絕佳工具??梢允褂脭底只姆绞絼摻ㄇ榫w版(Pinterest或花瓣都是一種用于創建數字化情緒板的常用工具)。

如果你目前做的產品是需要體現:科技、質感、智能,那上圖應該可以滿足這些條件,你可以通過這張圖與領導進行溝通達成一致,然后從中提煉出一些顏色、元素、材質,這樣大方向就不會有太大問題,只需在細節上進行打磨。

樣式疊片

定義好了大致的方向之后,便可以使用樣式疊片來更加細致地探究多種可能性。樣式疊片的概念由Samantha Warren提出,他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設計交付物?!?

和情緒板一樣,樣式疊片可以為用戶和產品團隊提供有價值的討論點,并呈現他們對特定設計方向的初始反應。

arco.design 首頁這張圖可以理解為就是樣式疊片,把不同的組件樣式疊片放在一起比較,有助于準確地找到設計方向。

迭代與改進

當功能模式和感知模式建立完成后,我們將它們集成到產品的過程,它們還將進行演變。

因為在真實的界面中,模塊、交互、樣式之間相互影響下會產生新的問題,這都是很正常的,是典型的迭代過程,這個過程會一直持續,直到設計語言最終形成。

像ant design、arco.design應該都經歷過這個過程,只是我們不知道而已,要不然也不需要花費幾年的時間打磨后才發布出來。

平衡品牌性與一致性:

過分關注一致性也會扼殺品牌性。矛盾在于,讓設計達到完美的一致性無法確保它依然具有很強的品牌性。有時,這樣做反而會削弱品牌性——在一致性和統一性之間存在著細微的差別。

《英國公開大學》的創意總監曾說過:“當你專注于產品一致性的時候,打造產品質感的一些重要的細微之處就有可能會丟失。

發展感知性模式需要為設計師賦予打破常規的權力,鼓勵設計師積極地探索更多的可能性。好的設計體系能在品牌的一致性和創造性表達之間取得平衡。

小規模試驗:

后期如果發現樣式無法滿足,我們如何將新的樣式引入設計體系呢?

可以先進行一些小規模的試驗是一種相當有效的做法。如果某些元素的效果很好,我們就逐漸將它們集成到其他界面中去。

例如,在學習者完成一個步驟時,純功能性的切換按鈕缺乏慶祝和成就的感覺。于是,我們用帶有圓形樣式、彈跳 動畫以及勾號圖標的按鈕取代了先前的按鈕。

雖然新的按鈕樣式受到了學習者們的好評,但它與設計體系的其他元素格格不入。后來,我們開始在網站的其他地方應用圓形圖案、彈跳動畫和勾號圖標。如果不這樣做,那么整個設計 體系給人的感覺就是割裂的。

共享設計語言

數字產品都是由團隊打造的。團隊里的每個人都有各自的具體目標,都有各自的截止日期。這就意味著難免會出現草率加入的模式、重復或錯誤的模塊。

我們能確保一個產品即便有多人協作,卻仍能連貫、統一嗎? 只要我們團隊對自己的設計體系及其運轉方式有共同的理解,我們就能做到這一點。

這意味著我們遵循相同的指導原則,我們對品牌愿景的理解是一致的,我們在設計和前端架構方面有共享的方法,我們知道什么樣的模式是最有效的,也知道它們的工作原理。換句話說,創建統一的設計體系需要共享設計語言。

許多偉大的建筑物(如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮)并不是由一位主建筑師在繪圖板上費力地創造出來的,而是由一群人構建出來的,這群人對能將這些建筑物變為現實的設計模式有著深刻的共識。

“幾組人可以通過遵循一個共同的模式語言,當場構思出他 們的大型公共建筑,就好像他們共有一個心靈?!?

——克里斯托弗 ? 亞歷山大,《建筑的永恒之道》

我們可以用類似的想法構建數字產品。設計語言可以讓人們創建出具有整體感的產品,哪怕不同的人負責不同的部分也是如此。

為模式命名

如果一個界面上的元素沒有恰當的名稱、團隊里人盡皆知的名。那么該元素就沒有在你的設計體系中成為有效的單元。一旦你給一個物件命了名,你就塑造了它的未來。

例如,如果你給的是一個表現型的名稱,那么它將來就會受到樣式的限制:“藍色按鈕”只能是藍色。

例如,如果你給的是一個狀態屬性的名稱:“幽靈按鈕”,它的特點是:按鈕形狀的透明按鈕,但有細實線的邊框,常用在有色背景上。

將團隊融入設計語言

僅僅完成命名還不足以建立共享的設計語言。整個團隊都應該 沉浸到設計語言中去,讓它無所不在。

讓設計模式變得可見:

如果有條件,可以在墻上開辟一塊專門展示設計體系的空間,將它稱作“模 式墻”

讓你的設計體系更加開放,人們會感覺你歡迎他們的加入,歡迎他們提出問題甚至做出貢獻。

引用事物的名稱:

所有語言的共同特點是,只有不停地使用才能讓它保持活力。


它需要成為日常對話的一部分:

這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設計體系作為入職培訓的一部分將設計體系的內容作為入職培訓的一部分,新員工了解設計體系就會更加容易。當新員工入職時,他們將了解到設計指南是如何創建出來的,這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學》 內部,他們創建了一個入門性質的線上課程,其中有一章專門對模式庫進行了介紹,并包含了 一些小測驗和小課程,這樣可以幫助新員工更好的理解設計體系。

定期組織設計體系會議:

每個人都討厭開會。但是,如果你希望每個人都跟得上設計體系的發展,那么組織召開設計體系的會議就是必要的。這是所有設計師和開發人員共同專注于設計體系的時間。一開始,可 以每周舉行一次,當團隊找到節奏之后,可以每兩周舉行一 次。團隊可以利用例會時間就產品的總體模式(如圖標、排版)得出一致意見。同時,這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。


設計體系不是一夜之間構建出來的,而是通過日常的實踐逐漸形成的。

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

作者:夜鷹YEAH   來源:站酷

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

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


日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
欧美一区二区三区……| 亚洲精品国产精品国自产在线| 久久久久久av| 热久久这里只有| 欧美激情在线有限公司| 欧美又大粗又爽又黄大片视频| 欧美超级乱淫片喷水| 91理论片午午论夜理片久久| 亚洲精品乱码久久久久久按摩观| 亚洲欧洲在线播放| 欧美日韩国产色视频| 亚洲韩国青草视频| 久久精品中文字幕电影| 久久精品在线视频| 6080yy精品一区二区三区| 久久久久久有精品国产| 欧美理论电影网| 欧美成人精品一区| 日韩小视频在线| 爱福利视频一区| 国产精品国产三级国产aⅴ浪潮| 91av在线精品| 国产欧美日韩精品丝袜高跟鞋| 亚洲电影免费观看高清| 久久91亚洲精品中文字幕奶水| 欧美激情亚洲激情| 国产精品视频久久久| 国产综合色香蕉精品| 日韩免费电影在线观看| 亚洲精品乱码久久久久久金桔影视| 精品在线欧美视频| 国产精品一区二区三区免费视频| 亚洲精选中文字幕| 欧美重口另类videos人妖| 色噜噜久久综合伊人一本| 国产精品偷伦一区二区| 久久久久久国产精品三级玉女聊斋| 国产国语刺激对白av不卡| 国产999精品久久久影片官网| 久久久久久av| 国产精品久久久久91| 亚洲欧美日韩在线一区| 精品视频偷偷看在线观看| 久久伊人色综合| 久久精品最新地址| 日本欧美中文字幕| 欧美麻豆久久久久久中文| 久久伊人91精品综合网站| 国外成人在线视频| 久久亚洲国产精品| 欧美激情欧美狂野欧美精品| 亚洲综合日韩中文字幕v在线| 久久精品视频导航| 国产欧美一区二区三区在线看| 国产不卡视频在线| 日韩欧美亚洲范冰冰与中字| 在线播放国产一区二区三区| 亚洲欧美中文在线视频| 国产97人人超碰caoprom| 日韩中文字幕精品视频| 国产精品自产拍在线观看| 亚洲国产精久久久久久久| 色综合久久88| 蜜臀久久99精品久久久无需会员| 韩曰欧美视频免费观看| 亚洲少妇激情视频| 热99久久精品| 国产成人啪精品视频免费网| 国产日韩精品在线观看| 亚洲精品国产精品国自产观看浪潮| 久久久久久久一区二区三区| 日韩视频免费中文字幕| 91网站免费看| 欧美一级成年大片在线观看| 欧美一级黑人aaaaaaa做受| 日韩av男人的天堂| 久久久91精品| 国产精品网站大全| 日本欧美在线视频| 性色av一区二区三区免费| 亚洲影院在线看| 日韩成人在线视频网站| 亚洲国产精品久久精品怡红院| 欧美日韩亚洲精品内裤| 97视频在线观看免费高清完整版在线观看| 色偷偷9999www| 欧美精品久久久久久久免费观看| 91精品免费看| 97在线精品国自产拍中文| 国产视频亚洲视频| 一本大道亚洲视频| 国产亚洲在线播放| 亚洲天堂精品在线| 亚洲免费视频一区二区| 中文字幕在线成人| 亚洲丝袜av一区| 亚洲第一二三四五区| 日韩亚洲在线观看| 亚洲人午夜精品| 亚洲精品一二区| 疯狂欧美牲乱大交777| 91精品视频在线播放| 福利一区福利二区微拍刺激| 国产精品96久久久久久| 亚洲字幕在线观看| 91香蕉嫩草影院入口| 亚洲女人天堂视频| 国语自产精品视频在线看| 亚洲天堂视频在线观看| 国产成人jvid在线播放| 日韩中文字幕视频在线| 成人黄色免费看| 在线激情影院一区| 国产欧美久久久久久| 精品一区二区亚洲| 亚洲精品中文字幕女同| 美女福利精品视频| 日韩最新av在线| 欧美丰满老妇厨房牲生活| 精品中文字幕视频| 久久久久久久久亚洲| 国内精久久久久久久久久人| 亚洲一区精品电影| 亚洲精品电影久久久| 中文字幕亚洲综合| 在线观看视频亚洲| 69**夜色精品国产69乱| 欧美日韩国产丝袜另类| 国产精品狠色婷| 成人激情视频在线观看| 九九精品在线观看| 超碰日本道色综合久久综合| 国产精品精品一区二区三区午夜版| 国产一区深夜福利| 国产www精品| 中文字幕欧美视频在线| 欧美壮男野外gaytube| 正在播放亚洲1区| 久久久精品中文字幕| 欧美电影在线观看| 久久久久久久久久久久久久久久久久av| 性色av一区二区三区红粉影视| 成人网址在线观看| 精品久久久国产| 一本大道久久加勒比香蕉| 91视频国产精品| 久久久久亚洲精品成人网小说| 亚洲a在线播放| 亚洲精品网站在线播放gif| 久久这里有精品视频| 亚洲天堂男人天堂女人天堂| 欧美第一黄色网| 欧美乱妇40p| 亚洲欧美日韩成人| 日韩欧美999| 97精品免费视频| 国产精品夜间视频香蕉| 久久精品国产清自在天天线| 8090成年在线看片午夜| 日本久久久久久久久| 亚洲白虎美女被爆操| 91久久久久久久| 国产精品久久久久久久app| 国产成人免费av电影|