<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>

          首頁

          服務設計概述及國內外案例分析

          ui設計分享達人


          我們常說,現在是體驗至上的時代,用戶對產品的使用不再是單純的需求滿足,更要獲得滿意的體驗。服務設計的發展為我們改善用戶的體驗提供了新的思路,從本質出發,任何產品都是在提供某種服務,服務的質量從根本上決定了用戶的體驗。



          什么是服務設計


          服務設計一直在我們的生活中,我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構31 Volts是這樣描述服務設計的:“如果有兩家緊挨著的咖啡店,出售同樣價格的咖啡時,服務設計是讓你走進其中一家而不是另一家的原因?!边@個描述很生動,同時也說明了服務設計的作用。


          其實服務設計的定義還有很多,行業內不同的專家和學者都有自己的理解和解讀,不管定義如何,重要的是服務設計的思維方式,可以幫助我們從全局改善服務體驗。




          服務設計的原則及案例說明


          2010年在《This is Service Design Thinking》一書中,作者首次提出了5個服務設計基本原則,這些原則之后也被廣泛使用,但隨著服務設計的不斷發展,其中的一些原則也需要重新去審視和思考,因此在2017年作者將其更新修訂為6項。


          a.以人為中心(Human-centered)


          以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用,服務設計當然也沒有例外,以人為中心就是要站在用戶的角度上看待和思考問題,考慮所有被服務影響的人。


          在日本,農產品市場存在這樣一個問題,農產品批發商無法及時從種植者處了解農產品的相關狀況、收獲量等信息,因此他們也就無法與要購買農產品的人進行談判,這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC(Nippon Jimuki Co. Ltd.)發現了這一問題,他們希望利用自身能力(軟件方面的優勢)去解決這一問題,因此將目標設定為:創建一個可以提供有用數據而又不給農民或農產品批發商帶來負擔的系統。


          最終的產出的結果是Fudoloop這個應用程序,通過Fudoloop,批發商可以提前一天從農民那里收到信息,進而協調買家的各種要求。Fudoloop的使用者分為兩種,一種是需要更新農產品信息的農民,一種是從Fudoloop上獲取農產品信息的批發商,Fudoloop分別為兩種用戶進行了設計。

          圖片來源:Fudoloop



          在設計Fudoloop時存在這樣一個問題,農產品市場中的相關從業人員普遍年齡較大、受教育程度低、軟件使用經驗很少,面對這樣的用戶,顯然通常的軟件設計并不符合他們的需求,因此Fudoloop的界面設計非常簡單且信息突出,從事農產品相關工作的人員可以輕松的使用Fudoloop完成農產品信息的更新,而不會因為學習產生很大的壓力。Fudoloop還在大型農業貿易展覽會邀請了一些行業內的人員和用戶參與到了產品的體驗中,并收集了他們反饋的建議,以改善產品。

          圖片來源:IDEO


          NJC在設計Fudoloop時充分堅持了以人為中心的原則,考慮到服務涉及的不同用戶,并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的:“當簡單、以人為本的思想匯聚在一起時,創新就會發生”。



          b.協作(Collaborative)


          這條原則說的是,不同背景和職能的利益相關者應該參與到服務設計流程中,收集多方訴求,發現不同看待問題的角度,才會更好的解決問題。


          在美國舊金山,有一所學校和Revolution Foods這家餐飲公司合作,為學校內的人員提供豐富的、營養的午餐,但是實際來餐廳就餐的人數與預期相差很大,數據顯示,有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經過調查發現其中的原因,很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐,因此他們選擇了去校外享受午餐的時間。


          為了改善這種情況,這所學校請來了全球頂尖的設計咨詢公司IDEO,他們與1300多名學生、父母、營養人員、董事會專員、校長、老師和社區團體等利益相關者一起工作,重新去設計了學校的午餐,并且制定了針對三種年齡的就餐體驗的建議,完成了飲食、就餐空間、新技術使用等多方面的優化和設計。

          圖片來源:IDEO


          最終,學校完美的改善了午餐服務的體驗,這其中包含了所有利益相關者的想法和工作,因此設計成果也被人們所接受,越來越多的校內人員會選擇學校的午餐,之后,這種設計模式也被舊金山的許多學校采納和推出。


          所以,服務中涉及到的利益相關者有很多,多收集他們的想法與建議,甚至讓他們參與到服務設計中去,問題會得到更好的解決。


          c.迭代(Iterative)


          迭代是一個不斷接受反饋不斷優化的過程,如此重復執行,讓產品變得越來越好。服務設計也需要迭代,不要避免犯錯誤,而是從錯誤中學習和改變,同時也要不斷的收集各方的反饋信息,這些信息是服務進行迭代的核心所在。隨著互聯網的發展,迭代的思維早已滲透到每一個互聯網產品,此處就不再過多解釋。


          d.有序(Sequential)


          服務設計應該是一系列相互關聯的活動,并且是按照順序進行的,精準的把控服務每一個環節的節奏,用戶才能獲得更愉悅的體驗。


          以外賣為例,用戶的使用過程包含訂外賣時的商家選擇到下單過程,下單后配送外賣,用戶收到外賣和用餐后這幾個過程,而服務的提供者主要包括商家、平臺和外賣小哥,為了保證用戶能夠獲得流暢的服務體驗,需要各個服務提供者在服務展開的不同環節推出優質的服務,如下圖。


          在訂外賣時,平臺會為用戶推出“超值優惠”“限時秒殺”等優惠活動,商家推薦、訂單歷史等商家選擇渠道,以及不同的篩選條件,以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后,進入到選擇商品并下單的過程,一方面,商家會推出優惠的活動、推薦菜品等,另一方面,平臺也會給出自己的優惠。


          下單后,用戶面臨的是一個配送過程中的等待時間,為了緩解用戶在等待過程中的焦慮情緒,平臺會及時更新和推送外賣小哥的狀態,如到達商家、取餐中、與用戶的距離等,同時會給出用戶預期的送達時間,若超過預期時間用戶還可進行催單,商家可以聯系用戶表達歉意,整個過程用戶對配送狀態是可視的。


          用戶收到外賣時首先會與外賣小哥接觸,包括與外賣小哥提前確定取餐的時間地點,取外賣時的短暫對話等,這些都會影響用戶對服務的印象,因此外賣小哥需要保證服務態度的禮貌和友好。收到外賣后,食品包裝首先給到了用戶對商家的第一印象,然后是餐品是否符合用戶預期,讓用戶滿意。


          在用戶就餐后,首先平臺要提供給用戶評價的功能,用戶可以分享自己就餐的感受,商家也可以通過平臺為用戶提供更多的優惠,引導用戶能夠再次回到商家訂餐。


          從外賣的案例中我們可以看到,服務是一個過程,是需要有序展開的,每一個環節的體驗都會影響到用戶對服務的印象,在恰當的環節提供恰當的優質服務,才能確保用戶的整體體驗。


          e.真實(Real)


          服務本質上是無形的,應該用“物理元素”來可視化,這樣可以用戶的服務記憶,增強用戶對他們所接受服務的感知。


          同樣以上述外賣為例,商家為用戶提供餐食,這部分是借助美團這個平臺和外賣小哥來完成的,用戶和商家的接觸僅僅是送達的餐食,因此無法通過像到店體驗一樣,讓用戶感知到商家提供的更多服務。


          為了讓服務變得更加“有形化”,商家就需要花費更多的心思,如圖,商家為了增強用戶對服務的感知,一般會在在包裝上花費很多功夫,精致的包裝讓商家的形象更好且更加值得信任,一些有趣的包裝還可能讓用戶的心情變得愉悅。另外,商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務,通過這樣的手段,即使用戶并沒有真的接觸到商家,體驗也會變得很好,商家的形象也會提升很多。

          圖片來源:古田路9號


          f.整體(Holistic)


          整體就是要著眼于整個用戶旅程,考慮用戶與服務的每個觸點(觸點的概念后文會進行介紹),并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗,考慮服務環境的方方面面,沒有任何遺漏。這個原則實施起來并不是那么簡單,從整體角度思考問題會使問題變得復雜。不過在服務設計中,是有一些方法和工具是可以幫助我們完成整體思考的,比如服務藍圖。




          服務設計的常用方法-服務藍圖


          a.服務藍圖簡介


          服務藍圖是一張圖表,通過列出在每個階段發生的、不同角色執行的所有活動,顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例,垂直方向上展示服務中的利益相關者,水平方向上為用戶的歷程,也就是用戶經歷的不同階段。在服務藍圖中有兩條線,一條是可見線(line of visibility),可見線上方為用戶可與之交互的服務,也可以稱之為“前臺”,可見線下方代表的是后臺進程,用戶無法看到但需要給用戶提供支持,后臺進程還可以存在內部交互線,用來表示內部人員的聯系。用戶與前臺服務之間存在另外一條交互線(line of interaction),用來表示用戶與服務之間的接觸。

          圖片來源:Service Design Tools


          明確了服務藍圖的大致框架之后,還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段,用戶和產品、服務、后臺產生的接觸,每個觸點也是服務可以進行展開和優化的方向。


          b.Uber服務藍圖繪制


          為了明確服務藍圖的繪制和分析過程,下面將結合下圖所示的Uber服務藍圖進行說明。

          圖片來源:Medium


          (1) 明確用戶歷程


          用戶使用Uber打車服務主要可以簡單分為以下三個階段:注冊(下載APP - 新用戶注冊),乘車階段(下單 - 等待車輛到達 - 乘車 - 到達目的地)、乘車后(付款 - 評價)。


          (2) 明確利益相關者


          用戶與之產生互動的前臺服務人員為司機,而設計師、開發人員、項目經理等負責后臺的服務支持,以保證Uber按照預期的目標運作。


          (3) 明確前后臺活動


          一方面,需要明確和用戶接觸的前臺活動有哪些,Uber打車服務中和用戶產生接觸的主要為司機及車輛,因此需要確保司機是合格的、車輛內部的環境是干凈舒適的,同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流,滿足用戶在乘車過程中的要求,完成乘車費用的收取,提醒用戶離開前帶好隨身物品,以及評價乘客等。


          另一方面,用戶對后臺的流程可能并不了解,但需要明確哪些后臺活動和支持會對用戶產生影響。比如在用戶下單時能夠自動獲取用戶定位,告知用戶預期的時間和價格,以及發送給用戶司機的狀態等。


          在明確前后臺活動時,我們可以以用戶歷程為線,分步驟進行分析,確保每個環節中涉及到的前后臺活動沒有被遺漏。


          (4)明確關鍵觸點


          在服務藍圖中我們可以標注用戶與服務的主要接觸點,針對觸點進行設計是提升服務體驗的一個重要和有效的手段。


          在Uber打車服務中還有一些需要注意的觸點,一是等待時間,這包括用戶發起乘車請求后、付款時以及評價司機時,等待時間是造成用戶體驗較差的一個原因,因此需要注意標注出這些觸點,并想辦法優化,在服務設計中需要注意相關環節的應盡量簡單,減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點,如司機態度不友好、乘客下車時忘記帶隨身物品等,可能造成失敗的服務體驗的觸點應該精心地去設計,避免這樣的情況發生。


          通過以上過程我們完成了Uber服務藍圖的繪制,從中可以獲取到Uber打車服務的整體概貌及其相互關系。



          ///


          結語


          服務設計的思維能夠幫助我們從全局的角度去審視和思考,發現更多改善服務的可能性,從而為用戶提供更好的體驗。因此對于產品和設計等相關人員來說,不能僅僅把目光放在產品本身,而是要從服務的角度去正確看待產品和用戶的關系,以用戶為中心,找到用戶與產品的每一個接觸點來進行服務設計,這樣才能保證用戶在整個流程中都能得到好的體驗。

          文章來源:站酷 作者:百度MEUX 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          好的表格信息展示都有這三個特征

          ui設計分享達人

          前言


          表格作為組織整理數據的手段,可以有效的向用戶展示數據信息,是B端產品中出現最高頻的模塊之一。

          下圖為典型的B端表格示例:



          用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化(關聯和區別)。好的表格信息展示設計,應當是能夠輔助用戶高效便捷的實現以上場景中的訴求。

          今天我們就來討論表格設計中一個重要的問題——【應該如何考慮表格信息展示】。首先拋出結論,我們認為良好呈現信息的表格應當做到疏密適度、高效掃視、精簡克制。


          ///


          一、疏密適度


          常見的表格信息包含文本、標簽、狀態樣式、數值統計圖表、關鍵信息Icon等。表格單元格是信息填充的基本單元,行高和列寬的定義決定了表格信息的疏密程度,進而決定了表格給用戶的直觀感受,因而下面分別從行高和列寬兩個方向來探討表格信息展示如何疏密適度。



          1、定義合理的表格行高


          a、行高模數設定

          在具體設定表格行高時,由于表格中以文字信息為主,我認為可以參考文字排版的常用做法,將整個表格的行高分成文字行高、文字與分割線間距離,即上下間距兩部分來考慮。文字行高可以設定為字號的1.2~1.8倍,文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣(多行行高同理去設定)。



          根據用戶場景的不同,來選擇模數倍數,需保證系統內使用統一的模數。比如,針對用戶快速瀏覽獲取大量數據場景時,可以選擇1.2倍作為模數,列表更為緊湊,同樣掃視范圍內,可獲取更多信息。


          b、為小屏幕考慮一屏顯示的行數

          表格行高決定屏幕內能呈現的行數,即用戶在一屏內能獲取信息的數量,主要影響用戶縱向對比數據的效率。對于1920*1020(包含該分辨率)以上的大屏用戶,對于一屏顯示行數的感知不強,但對于1366×768、1280*720等這類小屏,顯示行數有限,用戶進行縱向數據對比的效率就會有所降低。在設計前,應當充分了解目標用戶的行為訴求,了解目標用戶設備屏幕分辨率的占比分布情況,有針對性的設置行高。


          c、用戶自定義行高的場景

          B端產品的特點之一是通用化,覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。比如個人視力的原因,有些用戶喜歡表格行高值大一些,看起來舒適透氣,便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式,希望線上的表格也盡可能像excel那樣緊湊,以便他們在一屏內看到更多的數據,進行對比,提升工作效率。產品為了讓不同用戶都能獲得較好的體驗,可以考慮把表格疏密度的設置開放給用戶,建議不是完全開放給用戶去調整尺寸,而是給出一定階梯度的快速選項,例如舒適、標準、緊湊三種高度來滿足用戶需求。

          例如,Gmail提供默認/標準/緊湊三種表格密度設置,如圖:



          2、靈活擴展的橫向空間


          通過對表格固定位置與列寬的調整,擴大表格數據空間,使信息不局促,空間更透氣,保證橫向掃視易讀性。


          a、列寬極限值設定

          設計師需要根據表格承載內容定義表格的列寬,應包含最大/最小/默認列寬的定義以及使用規則。

          我推薦的一個規則是:

          規則1:當相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認寬度和】,則各個列自動等比拉伸,撐滿屏幕;

          規則2:當相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認寬度和】,則出橫向滾動條,每列寬度為默認寬。

          另外需注意最小值設定時應避免信息展示出現【對聯式表格】。對聯式表格最大的問題在于,一屏內展示的行數有限,當用戶縱向對比數據時,需往復滾動多次,記憶壓力大;橫向掃視時,閱讀視線不能一直保持左右橫向預覽,而是不停上下左右切換,使用體驗不佳。



          b、橫向『偷取』屏幕外空間、行高模數設定

          當壓縮列寬也無法在有限空間內展示大量的數據指標列時,我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進行瀏覽,有一定操作成本,所以要結合業務實際情況選用是否利用屏幕外橫向空間。

          隨著行和列的增加,用戶的瞬時記憶會達到極限,超過“7±2原則”的范圍,用戶需要依靠輔助信息去閱讀表格內的數據,防止遺忘某列數據的意義。因而當表格數據列較多橫向滾動時,建議為用戶固定重要信息列,如標題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的,建議固定列顯示在表格左側,方便用戶從左至右瀏覽數據、從上至下對比數據時能夠清晰定位當前所瀏覽數據的主體是什么,同時可根據需要快速發起操作。



          同理,用戶拖拽縱向滾動條來閱讀數據時,可固定表格的表頭,幫助用戶在閱讀過程中清晰知曉單元格數據的意義。


          c、用戶自定義展示信息

          針對需展示大量數據的情景,我們除了【偷取】屏幕外空間外,可以根據B端產品提供的數據表格是覆蓋全部用戶角色的全量數據的特點,讓不同用戶角色來自定義想要瀏覽的信息,從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能,用戶可根據需要選擇展示的數據列,系統將在用戶完成選擇后,主動幫用戶保存自定義內容,下次登錄后,表格依然按照用戶定義的數據來展示。



          ///


          二、高效掃視


          無論是在表格中要明確的定位數據,還是順序閱讀,高效掃視都是B端用戶一個很重要的訴求,我們在設計表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。


          1、合理的對齊方式


          數據信息本身包含多種格式,可遵守一個基本原則即文字左對齊,符合從左到右的閱讀習慣;數據信息右對齊,方便數據大小的直觀對比。

          具體對齊方式可參考我們建議的方式:

          文本字段:可點擊字段、普通文本類、數字、字母等,長短參差不齊,左對齊;

          格式化字段:日期、時間、部分枚舉類等,字符數一致且較短的,左對齊。

          數據字段:金額、數據、百分比。帶小數點等數據,方便對比為主,右對齊。



          2、去除視覺雜音,強調對比關系


          a、正確使用分割線,實現對表格行與列的強調

          橫向分割線可強調行內信息的連續性。垂直分割線在縮減元素之間的距離后也能區分不同元素,更好的強調縱向數據對比。但只要遵循良好的對齊方式,通常不展示縱向分割線,避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割,提升表格閱讀效率。



          b、斑馬線作用有限

          斑馬線即隔行(列)變色。它能讓行(列)間界限更為明顯,但由于與分割線的作用類似,起到的作用有限,可針對不同場景酌情考慮是否使用。比如針對不同類型的數據(如總和、平均值)使用不同底色來區分,可以更突出強調該數據。要注意的是,隔行(列)換色的兩種顏色不能反差過大,否則看來太“跳躍”。

          對同一類數據而言,分割線就已經能夠明顯區隔,所以可不使用斑馬線,但需要給出單行的懸浮狀態,強化橫向導視,避免出現列數過多引起數據錯行的問題。



          3、突顯重要內容的視覺重量


          前面我們提到表格呈現的數據信息除文本外,還有其它一些可視化數據??梢暬环矫嫣嵘肆斜硪曈X表現力,增加差異化,另一方面讓內容更加突出,提升閱讀效率。例如:數據列中數據異常時,最好可以醒目的形式突顯,讓用戶一進入頁面就能快速注意到異常狀況。



          ///


          三、精簡克制


          體驗好的表格一定是克制的,克制應表現在信息的適度隱藏以及內容折行與截斷展示原則。


          1、適度隱藏信息


          a、隱藏低頻操作

          當表頭需要承載排序、表頭篩選、提示等功能時,不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數據指標﹥執行操作的,因此可根據具體業務定義展示哪些操作,將其它操作隱藏,有需求時用戶主動觸發再展示。比如,百度搜索推廣平臺的推廣管理頁面提供了全局篩選,所以表頭篩選對于用戶而言是相對低頻的操作,我們選擇隱藏表頭篩選的圖標,當用戶鼠標HOVER表頭單元格時再展示。



          對于表格行內的操作我們也應當進行優先級排序,為用戶專門設置操作列展示高頻核心的操作,其它相對低頻的次要操作可隱藏在相關數據單元格中,用戶有訴求時hover對應單元格即可快速發起操作。



          b、隱藏輔助信息

          表格中的有些數據指標是綜合緯度的,當用戶關注點定位于該指標時,需要通過細分數據來理解、分析。指標的細分緯度信息雖能起到輔助用戶更好理解數據指標的作用,但如果全部拿出來在表格列展示,會讓表格變得臃腫不易讀,此時可以考慮采取一定設計手段去隱藏這些信息,把觸發展示的自由度交給用戶,也更符合用戶逐級查看的場景。例如,百度搜索推廣平臺中關鍵詞列表中,質量度指標是由多條數據共同決定的,我們采用了將細分指標聚合在氣泡卡片中,當用戶HOVER質量度得分數據時展示出來。



          再比如,有父子層級關系的數據,可以通過父子折疊表格將子信息默認隱藏,用戶根據需要,去展開查看詳細的子信息。



          2、設定折行與截斷規則


          B 端業務的數據信息復雜多樣,信息內容的長度高度是多樣不可控的,很多內容會超出我們限定的最大列寬,最大列高,我們應當給出折行與截斷原則去約束內容的展示,而非總是為具體情況而做特殊設計,破壞體驗的一致性。

          截斷折行原則設定時要細分,不能簡單粗暴的一刀切,比如一行截斷這種,如日期、時間等固定格式內容,拖動列寬后文字應折行而非截斷展示,避免影響用戶誤讀。再比如很多業務實體標題字段是格式化的,即標題前面部分可能都是一致的,這時候如果簡單的截斷,用戶就需要逐一Hover才能找到定位到要找的數據。因而折行與截斷原則,我們建議是給出三種:單行截斷、雙行截斷以及自適應截斷,根據具體業務情景選擇。



          文章來源:站酷    作者:百度MEUX

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          交互式數據可視化設計思維

          ui設計分享達人

                隨著大數據時代的快速發展,日常生活中對數據信息的接觸場景越來越多,我們在做數據展示設計前首先要梳理數據重點,數據結構關系得到的結論結合用戶需求產品需求等進行合理的設計。

                最初的數據展示接近于數據報表的形式,而現今數據展示有兩種:靜態數據可視化、交互數據可視化。它們的設計基礎均基于數據可視化的設計要點進行延展的,而數據可視化要點已有很多優秀的設計師進行總結,因此我重點介紹一下我對交互式數據可視化的理解(僅代表個人觀點),希望對大家有所幫助。

                什么是交互式可視化

                靜態與交互式數據可視化的區別

                交互式數據可視化中的用戶體驗

                交互式數據可視化設計思維

                開源數據可視化庫



          什么是交互式數據可視化

                交互式數據可視化是一種更能夠吸引用戶的數據信息交流形式,在BI中的應用也變得越來越流行,并且由于其有較強的易用性以及能夠為用戶體驗帶來更多附加值而逐漸成為大多數數據分析系統的常見部分。它通過數據動態演示的交互方式,使用戶可以直接與信息交互,用以構建自己對信息的理解,交互式可視化必須具有與人機交互方式,如單擊按鈕,移動滑塊,快速響應以顯示輸入和輸出之間的真實關系。

                有效的交互式可視化能夠保持展示形式和數據功能之間的平衡關系。簡單的圖表可能因為太無聊而無法引起用戶的注意,復雜數據可視化可能完全無法傳達正確的信息。因此數據視覺和交互形式效果需要協同工作。



          靜態與交互式數據可視化的區別

                靜態數據可視化是不包含任何交互功能且不隨時間變化的數據可視化,從單一視角關注特定數據故事的信息圖。圖表中沒有可操作的交互功能來調整靜態可視化的數據展示結果,更適合不太復雜的數據故事、建立概念之間的關系以及傳達預定的視圖。其構建成本遠低于交互式設計。因此在設計時必須充分考慮如何展示當前顯示的數據擬定好數據故事。

                交互式是可視化設計中的絕佳工具,因為它們能夠優化信息的顯示方式,減少視覺噪音,降低用戶對數據閱讀的難度。系統中最常見應用之一是數字化儀表板或數字看板,如果直接從枯燥的數據表格獲取信息這樣的體驗是非常原始且視覺干擾過多。而通過梳理數據結構使用適當的交互可視化使看板,能夠成為用戶快速汲取主要數據信息的理想工具

              設計時決定應用哪種數據可視化形式一方面需通過用戶畫像分析了解用戶偏好如何,另一方面則需要結合數據故事復雜程度采用哪種才能夠更全面更準確的傳達數據信息,以及在構建項目的過程投入成本最終回報率的高低也起著決定性因素。




          交互式數據可視化中的用戶體驗

                大量數據可用于幫助用戶做出更好的業務決策。為了實現這一點,并從數據中獲得最大價值,用戶必須能夠理解它;提出問題、體驗模型并識別異常。

                在設計數據可視化面板時,最至關重要的是,需要考慮用戶將如何使用這些數據。讓更多的用戶會使用數據面板而不是讓他們去創建面板。強迫用戶按照我們設定的規則去破譯圖表含義不僅不切實際且學習成本高昂。

                用戶需要在不受額外功能干擾的情況下看到我們所展示的內容,當我們使用太多的顏色、形狀、圖案和大量的數據時,容易使用戶迷失在數據展示中。我們的工作就是為用戶處理數據信息結構降低用戶對數據認知的難度。


          視覺成像基礎

                我們的大腦處理視覺圖像要比處理文字內容快 60,000 倍,能夠在13 ms內處理一張圖像,然而,大腦的處理能力也是有限的。為了展示最優效果,數據可視化必須基于人類認知速度提供信息。需要設計輸入來將信息分解成可管理的模塊并以用戶能夠簡易處理的方式呈現它。

           

          用戶分析

                我們在構建任何類型數據可視化時都需以用戶為中心,了解用戶的目標、動機和需求,經營環境,需要解決什么問題,以及用戶語言和特定領域的知識;

          在做這方面用戶分析不需要耗費大量的時間,只要足以使我們能夠進入下一階段——設計用戶路徑上即可


          用戶體驗路徑

                系統用戶的體驗建立在兩個主要元素上:關鍵點可視化以及交互路徑。而用戶路徑中每個關鍵點需設計為對應特定的業務問題。

                可視化工具能夠以豐富而復雜的方式與圖表交互:篩選、縮放、細分、導出值等。它們都有助于將信息分解為更易于管理的塊,因此我們需要考慮多種操作結果,綜合起來能夠串聯出具有多個分支交互路徑和圖表用戶體驗路徑。




          交互式數據可視化設計思維

                可視化中的交互改變了數據的視角,始終致力于簡單的可視化而不是復雜的可視化。目標是使其更易于理解和閱讀。因此,需要避免使因使用過多的圖表引起頁面結構混亂,意味著通過過濾某些數據點,選擇數據的不同區域,甚至完全改變可視化的類型。重要的一點是:交互式可視化不再是靜態的,也不代表數據的單一視圖。交互使人們能夠根據自己的需要調整可視化并提出不同的問題。


          尋找理論依據

                通過了解受眾群體是誰,需要展示哪些數據,了解他們將如何使用這些數據。這些都將作為我們設計的理論依據,用以解決設計中哪些圖表是可以快速應用到實際場景中,如何為數據結構做簡化等問題;在數據的展示形式上通常是使用圖表、線條或點、條形圖和地圖來實現的。萬變不離其宗,交互可視化也是同樣在此基礎上進行擴展發揮作用。


          遵循設計原則

                在設計中需要為數據可視化創建各種交互式小部件,但首先需要遵循數據可視化交互設計的三個基本設計原則——可用性、可訪問和可操作。

                 是否有直觀的交互功能和數據可視化?

                 用戶是否可訪問數據,并且能夠快速理解其含義?

                是否為用戶提供簡便易上手的可操作的系統平臺?

                當我們有了一個粗略的理論基礎模型,就可以搭建數據模型來記錄每條數據和相關的元數據,接下來是通過各種交互形式設計用戶界面。


          清晰的架構

                可視化架構是映射數據故事的形式化基礎,在此基礎上通過線條、圖標和顏色等設計元素的視覺工具進行展示。為了利用這些工具,我們責需要運用對比關系、比重關系、顏色差異、位置信息和象征意義等突出顯示信息所呈現的目的及數據間的結構關系。


          可視化美學

                設計美學中少即是多的設計理念經久不衰,我們在進行可視化設計時也可按照這一標準在有限的設計空間內為用戶提供最多的想法,清晰準確的傳達復雜的想法


          交互式繪圖

               交互不一定發生在頁面中明顯可點擊的事物上,也可融入在圖像結構中,用圖表中交互的小部件,擴展到其他類型的內容上,通常需要一個或多個UI 元素進行轉換提示。

          如在做地圖中的交互可視化時要探索當前特定點或區域的實時信息,此時需要將圖標或交互功能融入在地圖上


          開源數據可視化庫

                簡單介紹一下開源的交互可視化數據庫,如果對數據沒有什么概念在圖表設計前可以參考一下數據庫中的樣式及類型,然后根據自己實際項目的需要進行設計。

          D3.js 可能是最流行和最廣泛的 Javascript 數據可視化庫  專為基于數據操作文檔而構建,并使用 HTML、SVG 和 CSS 使數據栩栩如生。

          還有很多開源數據庫可以查看- 11 個 Javascript 數據可視化庫-里面有詳細的介紹,這里就不一一說明了,希望在你們的設計中有所幫助。

          結論

          為了提高交互式數據可視化易用性以及為用戶體驗帶來更多附加值,我們需要基于數據調研,用戶分析,場景模擬等方向逐一解決相對應的問題,才可從各項結論中得出設計方向和目標。

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:胖Kuan

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          提升產品易用性的10個知識點

          ui設計分享達人

          作為設計師,我們希望做出來的產品對于用戶而言易于訪問、易于瀏覽、易于理解和可供所有人使用。而我們在做頁面的過程還要考慮具有視力障礙、行動不便等殘疾類人群

          萬維網的創始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點,他說:

          “網絡的力量在于它的普遍性。無論是否殘疾,

          每個人都可以訪問是一個重要方面?!?

          因此,這里有十種方法可以使你的界面更易于訪問和更具包容性,并確保你是為用戶設計的產品


          文章內容包含以下:

          1、顏色對比

          2、導航選項

          3、不僅僅使用顏色來指示狀態變化

          4、視覺焦點

          5、預先加載

          6、設計表達

          7、視覺層級

          8、合理交互

          9、用戶測試

          10、無障礙設計


          1、顏色對比

          色彩是設計的主要方面之一。確保背景和元素模塊之間有適當的對比,可以使用適當的陰影和顏色對比來

          區分,突出重要信息是使你的產品更易于訪問的最簡單的方法。


          這里推薦使用工具WebAIM 顏色對比度檢查器來實現平衡的顏色對比度。該工具允許輸入特定的十六進制代碼或從色輪中進行選擇,然后進行增量調整以達到元素之間的 AA(最低對比度)或 AAA(增強對比度)對比度標準。

          網址:https://webaim.org/resources/contrastchecker/


          2、導航選項

          在用戶使用時,導航的便利性是最重要的因素之一

          (確保產品內跨頁面的導航具有一致的命名、樣式和定位)

          (為用戶提供站點搜索或站點地圖)

          (通過提供方向提示例如面包屑和清晰的標題幫助用戶了解他們在網站或頁面上的位置)


          3、不僅僅使用顏色來指示狀態變化

          雖然顏色對于傳達信息很有用,但它不應該是傳達信息的唯一方式。在使用顏色來區分元素時,請確保始終提供不依賴于顏色感知的額外標識,以便于用戶易識別


          比如在做表單的情況可以通過以下方式去做區分


          (除了顏色之外,還使用星號來指示所需的表單字段)

          (使用提示標簽來區分狀態)

          (添加說明文字)



          4、視覺焦點

          一些用戶使用手機端產品時很難去聚焦于某個點,作為設計者這時需要去通過手法去制造焦點引導用戶進行操作。

          以手機屏幕為例,用戶閱讀的習慣分為兩種,一種是“z”習慣型另一種是“F”習慣


          比如可以在用戶瀏覽路徑上去做視覺焦點,引導告知用戶進行點擊,下面是列出的有效焦點指標:

          (具備清晰的對比度)

          (具有與元素互補的形狀和大?。?

          (使用互補但引人注目的配色方案)

          (好的動畫可以幫助用戶跟蹤焦點移動)

          (元素位置大小等適配各種型號)


          5、預先加載

          在產品上不管是文字還是圖片都需要提前告訴用戶當前狀態,不同的使用環境下用戶的網絡相對是有波動情況,在網絡不好的情況下用戶打開產品如果產品沒有做預加載大概率會造成用戶直接關閉產品


          6、設計表達

          “沒有用戶喜歡點擊他不想點的入口”聽起來比較繞,你可以這樣理解,我們平??吹降陌粹o是什么樣呢如果在頁面中我們把一個按鈕做成一個灰色上面寫著點擊進入,作為設計者的我們在遇到這樣的一個按鈕相信都會猶豫的,灰色傳達給用戶的信息是禁止不可點擊,用戶已經被培養出這樣一種習慣,但是遇到這種按鈕上面還寫著《點擊進入》就會造成信息傳達不準確(不僅僅是按鈕)。




          (樣式符合用戶理解范圍內)

          (交互給用戶合理反饋,點擊后狀態、按壓狀態、禁止狀態)


          7、視覺層級

          建立視覺層次結構, 元素在你的頁面設計中的定位方式,并在這些相應元素之間建立一定的連貫性。


          (不要擠滿屏幕,否則會提升用戶閱讀成本)

          (視力受損的人可能需要放大屏幕上的元素,因此請使你的內容具有可擴展性)

          (將重要信息放在視線水平附近)

          (使用空格和鄰近度使內容之間的關系更加明顯)


          8、合理的交互

          一個好的交互能夠讓產品達到一個沉浸式體驗,相反一個差的交互會造成用戶的反感;什么是合理的交互例如在使用閱讀產品時,翻頁功能是模仿現實中書本的翻頁效果作用到線上就會制造出一個良好的體驗

          交互不僅僅是操作反饋還包含頁面布局、元素展示、場景使用等

          (符合用戶對現實物體的認知,達到聯覺效果)

          (內容簡潔,具備吸引力)

          (出現場景是否合情合理)

          (具備反饋能力)


          9、用戶測試

          即使在前期工作做的足夠好的情況下,在你覺得整個產品設計易于用戶使用之后,使用產品的用戶也可能會發現某些地方并不像你希望的那樣友好


          避免這類問題的最佳和最有效的方法是通過用戶測試,在整個產品開發項目中進行非正式評估比在項目結束時進行正式的可用性測試更有效,用戶測試有很多好處,至關重要的是你能夠了解你的產品還存在哪些不足那些設計不到位,然后針對這些不足進行問題解決



          10、無障礙設計

          創建無障礙設計最重要的部分之一在于知道它絕不是創新的障礙,但是它可以讓你創新你的設計,在做產品的時候要考慮到產品不單單只服務一部分人,所以在設計時應當考慮到具備一定障礙的群體

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:愛吃貓的魚_

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          設計要知道-HMI設計必看!車載中控的前世今生

          ui設計分享達人

          首先先普及下HMI的概念

          HMI:- Human Machine Interface : 人機界面,現在多指車載交互系統體驗設計。

          既然說到人機界面,我們先來設計的載體是如何演變的。




          一、車載中控儀表盤演變過程


          1886 年,由卡爾·本茨發明的第一輛汽車。當時根本就沒有所謂的儀表盤概念,所以載體還得從1908年T型車(Ford Model T)說起,到2012年劃時代的特斯拉Model S,汽車儀表盤目前經歷四代。



          1、第一代:以按鍵為主


          機械式儀表盤: 第一個時代儀表盤為機械芯儀表,一般包含了車速里程表、轉速表、機油壓力表、水溫表、燃油表、充電表等,之后汽車儀表還需要裝穩壓器來穩定儀表電源的電壓,抑制波動幅度,保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統的熱式和動磁式,顯示的信息極為有限,更多的是車輛物理信息“通信員”的角色。


          在機械時期中控臺哪有什么屏幕可言,那時候的中控臺就是收音機和空調的調節器,而且都是實體按鍵的,只能滿足駕駛的基本需求,沒有屏幕,都是照搬飛機中控布局,以實體按鍵為主,功能簡陋單一。堆砌功能按鈕儀表,沒有交互可言。






          2、第二代:電氣式儀表盤+小中控屏


          第二個時代的電氣式儀表盤終于誕生,從真空熒光顯示屏(VFD),發展到采用液晶顯示屏(LED)及小尺寸薄膜晶體管顯示器(TFT),顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大,且一般采用機械儀表結合數字儀表的方式,例如車速、轉速信息采用指針,指示燈信息采用LED等點亮,其它信息則采用TFT屏。



          雖然相較于第一代機械機芯儀表增加了不少功能,汽車信息反饋也更全面更及時,但是其發展速度卻明顯與汽車行業不相匹配,對于更深層次的駕駛需求,電氣式儀表仍無法滿足。




          3、第三代:全數字化儀表


          汽車儀表盤領域在不斷追求更新,于是劃時代的全數字液晶儀表盤孕育而生,也是就我們常說的虛擬儀表盤。全數字汽車儀表盤使用了一整塊液晶屏取代了傳統的指針和刻度表,所有信息都通過這塊屏幕顯示出來。


          單從外觀上來看就能給人以一種比較高大上的感覺,這類儀表盤上往往沒有指針等部件,所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性,駕駛者接受信息更快,提升行車安全。也可以根據個人喜好調整相應參數,比如比亞迪的儀表盤就可以改變背景顏色。在高級點的,像寶馬的全數字儀表就可以切換N多種模式。


          2007年iPhone問世后,大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領了整個行業的革命。電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來,結果就是屏幕越來越大。


          2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統手機業,特斯拉也顛覆了傳統汽車行業。


          2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。




          拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內飾設計。



          比亞迪系列汽車的旋轉大屏,玩出新花樣,可以旋轉控制,就像手機橫屏和豎屏的場景。


          縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。




          4、第四代:HUD顯示屏


          從上世紀80年代,抬頭顯示技術在汽車領域已經開始被使用,直到現在才開始逐漸展露頭腳。

          HUD抬頭顯示器(Head Up Display),又叫平視顯示系統。它可以把重要的信息,映射在風窗玻璃上的全息半鏡上,使駕駛員不必低頭,就能看清重要的信息。


          戰斗機是率先應用HUD抬頭顯示器的。飛行員在空戰中,需要交替觀察艙外目標和艙內儀表,易產生瞬間視覺中斷,因此會導致反應遲緩、操作失誤,并有可能貽誤戰機,采用HUD抬頭顯示可克服這一缺點。


          第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。



          在復雜多變的道路上開車,駕駛員雙眼離開車輛前方,是個非常危險的事情,尤其是在高速公路上更是明顯。于是很多車型,就給車輛配備了一個不需要挪開視線,就能知道車輛基本信息的配置,這就是HUD抬頭顯示。



          HUD作為一款新技術,優勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息,視線至少需要轉移0.3秒,而HUD投影的信息就在駕駛員平視的正前方,駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。





          二、六大車載系統的特點


          現在各家系統百家爭鳴,各家車載系統設計有哪些不同?



          1. 阿里 斑馬智行


          簡介:


          1、阿里車載小程序是一種無需下載安裝即可使用的“應用”,旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。


          2、AliOS作為互聯網汽車操作系統,原生地支持阿里小程序,引入阿里生態服務的同時也面向開發者開放,圍繞車場景為用戶提供從出行到生活的各類智慧服務。


          特點:


          1、設計特點:


          獨立的大卡片式的內容界面模塊方便車主在行車過程中單手操作,其配色鮮艷,風格扁平,符合使用場景和國人的使用習慣。


          2、功能特點:自帶場景智能感知的基因。


          得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。


          用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。


          △ 斑馬智行2.0系統設計


          斑馬智行,采用智能手機界面和應用商城下載 APP 的使用方式,實現車載和手機的雙重控制。


          強大的云端特性在語音識別和線上互聯方面提供了良好的使用體驗,車主可以連接手機藍牙后,讀取其手機通訊錄,實現利用車載系統撥打和接聽電話的功能。支持 USB 接口,通過 U 盤實現播放音頻、視頻文件等。在娛樂生活方面,內置蝦米音樂,蜻蜓FM,喜馬拉雅等,支持在線搜索,在線播放以及在線廣播等服務。


          同時,斑馬智行依靠阿里強大的技術和資源支持,打通停車場,加油站,高速公路支付等,使用戶駕車時產生的費用均能通過支付寶支付。




          2. 百度 Car Life和Apollo


          簡介:


          1、打造智能車載服務生態,滿足用戶出行、娛樂、生活等多元化需求,構建人-車-家一體化互聯閉環成為時代趨勢。


          2、智能小程序,是百度提供的一種技術解決方案。開發者基于此開發出來的服務,在各類宿主環境(手機 App、車載系統、IOT 設備等)中,可做到用戶無感知安裝,即點即用。


          特點:


          1、設計特點


          車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊,「發現」集成音樂、娛樂、聽書、電臺等特色音視頻服務,采用紅色在界面中最為突出,其設計風格整體扁平,面性 icon 利于識別與點擊。


          2、功能特點


          智能小程序包括“車后服務”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別,一共80多款。車企可以根據車型定位和自身需求自行定義和組合可供使用的車載小程序。


          百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒,但在生態的開放性上,百度車載小程序則做得更為徹底,可以在百度App、百度地圖、百度貼吧、百度網盤百度系App上運行。





          3. 騰訊 Ai in Car




          簡介:


          1、“騰訊小場景”是專為出行場景打造的車載輕應用生態,部署在云端,不需要下載,即用即走,并支持語音交互。


          2、分為3類,出行服務小型車、生活服務小程序和視聽服務小程序。


          特點:


          1、設計特點:


          運用的FutureLink3.0系統,FutureLink3.0 基于安卓平臺開發,在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁,反而以地圖為背景,將六大功能模塊以大板塊的形式布局在地圖下方,整個界面設計簡潔。


          2、功能特點:


          最大特色:基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。


          手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。


          △ 騰訊在車載場景下的生態布局


          Ai in Car,顧名思義,基于 AI 的連接能力和生態,融合騰訊內容生態的優質資源,包括資訊、視頻、IP、文學等板塊,為車主提供更豐富的內容消費。風行搭載的 FutureLink3.0 車聯網系統,就是和騰訊深度合作而誕生的優質案例。



          △ FutureLink3.0系統界面


          只在設置頁中,才會出現二級子菜單列表,而且提供的設置項目也不多,界面層級簡單,不累贅,也給司機帶來輕松愉悅的操作體驗。同時,基于行車安全考慮,在類似天氣、股票等查詢功能上,比較依賴語音控制。在娛樂生活方面,打通手機和車機賬號,用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接,支持車主組建聊天組,在行車途中與好友進行實時溝通。


          從整體來看 FutureLink3.0 的設計,它更像是一個把需求頁面展現在車主面前的「輕應用」,沒有傳統概念上的主界面、多層交互菜單以及相應的「系統特質」的設計,它更希望把海量資源建立在云端,終端只給車主呈現其所需要的服務即可。




          4. 谷歌 Android auto


          簡介:


          Android Auto 系統的工作原理是將手機連接到兼容的汽車,讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。


          特點:


          1、設計特點:


          在 UI 框架設計方面,主屏幕以卡片的形式顯示通知、活動、導航和消息,右下角有啟動語音命令的麥克風圖標和底部的活動欄,這些特性屬于全局 UI。在它下方,應用程序內容區域顯示應用程序啟動器或當前使用的主應用程序的內容。



          △ Android auto手持設備與車載設計系統


          Android auto 將 Android 平臺擴展到汽車上,它有兩種使用方法:在手機上或在兼容的車載屏幕上。


          它有一個簡單的界面,標準化的用戶交互模型和強大的聲音動作,其目的是幫助司機盡量減少分心。需要注意的是,為汽車設計交互式應用程序與手持式設備的設計有根本上的不同,其應用程序的交互界面應該簡化,以確保司機的眼睛和手集中在開車上,減少司機分心。


          △ Android auto車載系統UI框架


          卡片上提供如消息字符串、圖標、圖形和操作等內容,會根據用戶最近的使用情況和優先級來確定卡片的大小。主屏幕會限制卡片的數量,以保持列表的簡短和相關。因此,當新的、更相關的內容出現時,應用程序的通知可能會從屏幕上消失。同時,抽屜式的交互方式,提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標,避免在抽屜里放長的列表,或者在相同內容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內容,關注上下文,顯示新鮮的、有用的和大多數不滾動的項目,使用單行,對決策至關重要的較長字符串使用兩行。




          5. 蘋果 CarPlay



          簡介:


          CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。


          特點:


          1、設計特點:


          基于手機映射,所以界面除了橫向布局外,icon都和手機端統一。以簡潔的布局提供有用的、重點突出的信息,便于從駕駛員座椅上進行掃描。不要用不必要的細節和不必要的裝飾來弄亂屏幕。


          在整個應用程序中保持整體一致的外觀。一般來說,具有相似功能的元素應該看起來相似。


          2、功能特點:


          作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:

          • 成熟?;谧钍煜さ?iOS 應用,來設計界面元素,并提供熟悉、直觀的體驗。

          • 簡短。采用盡可能簡短的交互,不過度引人矚目

          • 相關。屏幕顯示信息高度相關,提供盡可能少選項,不需要復雜決策

          • 語音。基于Siri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。


          全新的電子車鑰匙,加上 Apple CarPlay 車載流暢的使用體驗,讓 iPhone 能在旅途上發揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。






          6、華為車機應用



          簡介:


          HMS for Car是華為終端云服務打造的智慧車載云服務解決方案,基于HMS(Huawei Mobile Services),通過AI場景引擎結合華為生態資源,為用戶提供精準豐富的出行場景內容和服務,助力汽車從交通工具向具有交互和服務的能力的智能終端進化。


          華為快應用是一種基于行業標準開發的新型免安裝應用,其標準由主流手機廠商組成的快應用聯盟聯合制定。開發者開發一次即可將應用分發到所有支持行業標準的手機運行。


          HMS Core提供端、云開放能力,幫助開發者實現應用高效開發、快速增長、商業變現,使能開發者創新,為全球用戶提供精品內容、服務及體驗。

          1、全球化分發。已上線超過170+國家和地區。

          2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。

          3、全場景支持??鞈弥边_鏈接和卡片嵌入全終端場景。


          特點:


          1、設計特點:


          在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一個個的APP圖標,需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景;HUAWEI HiCar的設計理念是"安全便捷、自然舒適、智能貼心", 對車載端的人機交互要素重新布局規劃設計,采用桌面卡片的設計方式,以滿足復雜駕駛狀態下的使用需求。



          桌面卡片是應用內容和功能特性的重要載體,用戶通過對卡片的快捷操作直達應用的核心功能,提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現最核心的功能和服務,并根據自身的需求特性,自行組合卡片元素以滿足不同場景下的用戶訴求。

          • 背板:背板樣式可以為色彩填充或設置背景圖。

            背景色支持黑、白、彩色三套。

            應用需提供三套背板以適配卡片主題切換。

          • 品宣區:品宣樣式為圖標+文字,應用可根據在此區域顯示品牌圖標和名稱。

          • 內容區:展示與應用場景相關的信息,其內容可以是圖片、文本或圖文樣式。

          • 操作區:操作區為文字或圖片按鍵,最多 3 個控件或 1 個控件組。



          2、功能特點:


          華為智慧助手,可結合用戶使用場景,以卡片形式推送提醒、服務和行程,實現智慧化服務找人。例如,送孩子上學時,車機端華為智慧助手將自動推送"有聲續播"卡片,用戶點擊卡片,即可一鍵續播孩子在華為手機上沒聽完的有聲兒童內容;用戶在開車下班回家路上,進入離家500米范圍內時,車機系統可自動啟動"回家模式",提前打開家中的窗簾、空調等設備,方便用戶享受愜意生活。



          My Car功能面向車企開放華為手機等智能硬件系統級入口能力,能夠實現遠程控車、查車、汽車服務/告警關鍵信息等反向推送能力。遠程控車功能,可以滿足用戶高頻控車訴求,例如,遠程開關空調、尋車、查看門窗狀態等。另外,當車輛胎壓不足、門窗未關閉時,用戶也能通過手機、車機及時收到提醒。





          三、系統的開源地址


          1、阿里Alios開放平臺

          https://miniapp.alios.cn/index#/document


          2、百度車載生態開放平臺

          https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


          3、騰訊-車載小場景(私我領取PDF)


          4、谷歌駕駛

          https://developers.google.com/cars/design/design-foundations


          5、蘋果apple car play

          iOS - CarPlay 車載


          6、華為車機三方應用交互設計規范

          https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014






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

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷    作者:郝小七

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          彈窗主按鈕與菲茨定律的糾葛

          ui設計分享達人

          問題是這樣的:有位設計師和我探討彈窗主按鈕在左側還是右側的問題,他說,他覺得應該在右側,原因是因為菲茨定律(Fitts’ Law):“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊。”


          主按鈕在右側,這個我是能理解的,但在右側的原因是由于菲茲定律決定的,我是持需考證態度的,畢竟雖然這個說法確實聽到過,但我認為還有待進一步梳理,這里需要細究的要點包括:


          第一、彈窗主按鈕一定要在右側嗎?


          第二、如果彈窗主按鈕“更適合”在右側,是不是只有菲茨定律的原因,還有其他原因嗎?


          第三、菲茨定律到底在解決什么問題,它是否除了上述問題,還解決了其他問題?


          帶著這三個問題,本文打算從如下幾個方面展開:
          第一部分:彈窗主按鈕位置 
          1、PC端彈窗主按鈕位置情況 
          2、彈窗主按鈕位置在哪里更合適 
          第二部分:費茨定律 
          1、什么是菲茨定律 
          2、菲茨定律的啟示 
          第三部分:總結 

          第一部分:彈窗主按鈕位置
          1、PC端彈窗主按鈕位置情況
          為了聚焦用戶的視覺與心理,激起用戶的反饋,彈窗誕生了。由于彈窗可以承載的內容豐富,且交互具備擴展性,彈窗被廣泛應用于應用、網頁等產品中。在彈窗設計中,標題、關閉的位置基本設計者們基本不會產生爭議,而主次按鈕的位置是一個永恒的話題。 

          1.1、按鈕組位置
          對于彈窗來說,按鈕組的位置位于footer區,此點無可爭議。但按鈕組應該在footer區的左側、中間,還是右側呢?從大量產品設計中我們可以發現,位于左邊的比例幾乎為0,中間大約5%,而位于右側的比例達到95%。 

          1.2、主次按鈕順序
          既然彈窗按鈕組在95%的情況下都為右側,那么我們就來看下,在該種情況下,win和mac系統主次按鈕的順序是怎樣的,站在巨人肩膀上,總是能看的更遠。 

          主按鈕是指行動按鈕,行動按鈕是連接用戶與產品的接觸點,一個優秀的行動按鈕,可以提升用戶體驗,且幫助用戶高效完成任務。主按鈕顏色在視覺上通常被醒目突出,而次按鈕被弱化表現,這可以降低用戶出錯的風險,及提高用戶完成操作的概率。 

          在win系統中:
          主按鈕在左側,次按鈕在右側。 

          在mac系統中:
          主按鈕在右側,次按鈕在左側。 

          這里插一句題外話,mac的窗口關閉,最小化、最大化按鈕在左上角,而win在右上角,它倆總是做啥都反一反。 

          那為什么win和mac會做出不同的選擇呢?背后又有哪些設計理念在支撐?翻閱了網上各種說法后,我總結出如下說辭: 

          1、mac傾向于把當前場景下推薦用戶點擊的按鈕放在右側,例如,mac推薦取消,就會把取消放右側;推薦儲存,就會把儲存放右側。且右側按鈕為主按鈕,視覺上突出強化。 

          2、win傾向于把最安全的按鈕(比如取消,關閉)放在右側。因此,可以說它的主按鈕在左側,只是主按鈕沒有明確的視覺樣式,保持和次按鈕一致。 
          2、彈窗主按鈕位置在哪里更合適
          關于主次按鈕在左側還是右側更合適,兩大巨頭給出來的設計方案是不同的,網上也有很多同學做了該方面的實驗,結果大致是說:不論主按鈕在左側還是右側,只要系統中統一皆可。就像中國人吃飯用筷子,西方人用刀叉,與其糾結筷子和刀叉哪個更適合吃飯,還不如考慮用戶的習慣、使用場景等因素,制定出更合適自身產品的解決方案。 

          不過話說回來,目前支持彈窗主按鈕在右側的人數占多數(產品專家、設計專家、用戶皆包括),原因不外乎:
          1、右手操作原則; 
          2、用戶在彈窗中的閱讀模式為“Z”字模式; 
          3、BLABLA(接下來我們看看是不是菲茨定律也要參與進來)。 

          第二部分:費茨定律
          什么是菲茨定律
          1954年保羅.菲茨首先提出菲茨定律,費茨定律是用來預測從任意一點到目標中心位置所需時間的數學模型,其后來在人機交互領域也得到了廣泛的應用。它的計算公式為: 
          T代表完成移動所需的平均時間; 
          a代表光標開始/停止的時間; 
          b代表光標移動的速度; 
          D代表從起點到目標中心的距離; 
          W代表目標的寬度(按移動方向為水平方向計算)。 

          首先,完成移動所需的平均時間由兩個參數來決定,即起點到目標中心的距離D和目標的大小W。其次,起始點與目標距離遠,耗時越長;目標越大,耗時越短。 

          這里還涉及用戶在使用產品時到達到目標的心理訴求:
          1、用戶對鼠標指針達到目標并沒有時間要求,則用戶會緩慢移動鼠標指針,在此過程中逐步調整鼠標指針移動的位置,從而最終達到目標。 

          2、用戶對鼠標指針達到目標有明確時間要求(例如股票下單場景),此時用戶會快速將鼠標指針移動到目標附近,然后在做精細化的調整,從而精確操作目標。 

          由上我們可以發現,不論用戶是否對鼠標指針達到目標有時間要求, 菲茨定律中的兩個關鍵點為:鼠標指針移動到目標大致區域及精細化微調后精確定位目標中心。且在實際產品設計中,我們必須要考慮如何讓用戶的鼠標指針以最短的時間到達目標。 

          因此,我們可以將菲茨定律中,從起點到目標所需的時間細化為以下四種情況:
          1、距離遠-目標大
          除了鼠標指針需要跨越較大的屏幕范圍,相對來說還是比較容易到達目標的,因為目標大。 
          2、距離遠-目標小
          用戶需要在鼠標達到目標可觸位置前做一些鼠標位移的精細化調整。 
          3、距離近-目標大
          用戶無需做太精細的調整就可以輕易到達目標。 
          4、距離近-目標小
          在快速到達目標后,鼠標需要做一些精細化的調整。 

          以上的距離遠近實際上還可以進行細化區分,一個是鼠標指針處于頁面任意位置,與目標并無上下文關系;一個是鼠標指針處于下一步操作的上一步位置。 

          這里可能會影響到的情況是,當鼠標指針處于頁面任意位置時,目標元素的大小需要做通用化考慮(使用業界標準或用戶的常規認知)。而當可以非常明確鼠標指針與目標的上下關聯時,可以適當調整設計策略,例如鼠標hover一個按鈕,出現面板,我們可以發現 ,鼠標指針一定是在按鈕上了,才可以去進行下一步操作,這個場景下,鼠標指針的起始位置永遠是不變的,變的是目標,即選擇了面板中的哪個操作。 

          菲茨定律的啟示
          從上述可知,在產品設計中,我們需要 優先考慮使用“距離近-目標大”的設計方案,再考慮“距離遠-目標大”和“距離近-目標小”(但也不能太小,還是要稍微合理化一些),不要去考慮“距離遠-目標小”的方法。下面梳理了一些在產品中用到菲茨定律的例子,讓大家加深對菲茨定律的感知。 

          1、點擊區域合理加大,降低操作復雜度。例如表格排序功能,需要擴大點擊區域。 
          2、可點擊屬性視覺化。例如tabs的下面會帶一條選中的寬度線,由此可推理出鼠標hover到其他tabs上的區域也是如此。 
          3、相關內容與操作靠近。例如word中鼠標選中文字,右鍵可帶出相關的操作。 
          4、相關按鈕互相靠近擺放。例如word文檔需要被保存,通常保存和取消靠近,便于用戶快速做出選擇和操作。 
          5、給目標操作安排流程,而不是點狀設計功能。例如對單條數據啟動編輯后,在原位進行保存。 
          6、不希望用戶操作的時候,目標設計遠一點。例如word文檔需要被保存時,mac系統會將“不儲存”按鈕距離“儲存”按鈕遠一些。 
          7、控制風險。在移動端中,如果不想用戶誤觸,會將危險系數較高的按鈕放在距離拇指熱區遠的位置。還有例如睡眠、關機、重啟等按鈕也不適合放一起(實際上真的放一起了,我無數次誤關機)。 

          第三部分:總結
          說到這里,想必大家對菲茨定律已經有了基本認知吧。在菲茨定律中,有一條為:頁面四周的按鈕更容易被點擊(無限可選中),因為鼠標達到屏幕的邊角后,就不可能在超過了,所以mac和win都會將按鈕放在屏幕邊緣。這個就是那位設計師小伙伴說的,“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊?!?nbsp;

          實際上我們會發現,假如彈窗的主按鈕在右側,鼠標也并不是達到屏幕的邊角,鼠標只是達到了彈窗的邊緣(這里會存在一定的心理邊緣感知,可能那位設計師就是說的這個吧)。然而,這與菲茨定律中的邊角無限可選中概念不是一回事。 

          所以說,目前彈窗主按鈕大家更贊同在右側的設計理念是:
          1、右手操作原則:右手用鼠標,用戶會習慣性把光標放在屏幕右邊。 
          2、用戶在彈窗中的閱讀模式為“Z”字模式:先瀏覽標題,最后視覺落腳點在footer右側。手眼協調,手會執行視覺落腳點的操作。 
          3、mac已經培養了大多數人的用戶習慣,這點從很多產品設計中就可以看出,放棄用戶習慣就是挑戰用戶體驗,所以,我們為何不去擁抱呢。

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

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷    作者:小果1

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          通知消息系統設計指南

          ui設計分享達人

          前言

          消息和通知作為系統和用戶之間交流的窗口,在用法上、表達上存在一定的規律,本文解答網頁端界面消息系統設計的如下問題:

          · 常見的消息通知設計

          · 如何進行消息通知設計

          · 觸發通知的業務場景


          常見的消息通知組件和模板

          在 Ant design 的設計系統里,消息和反饋組件并為「反饋」欄,涉及消息的組件有如下的內容:

          警告提示(Alert )、 全局提示(Message)、對話框(Modal)、通知提醒框(Modal)、氣泡確認框(Popcomfirm)、結果(Result)。

          結合 TechUI 提供的業務模板,總結了以下常見的消息通知組件和模板:

          以上的消息通知設計在設計的時遵循什么樣的規律,以下用一張圖來說明。 

          消息通知設計指南圖

          根據消息反饋的強弱分為:高注意力、中注意力、低注意力;每個維度再從操作干預度 & 信息展示量作以下分類。

          此圖試圖解答不同的通知設計組件/模板的使用場景,分為高注意力、中注意力和低注意力的場景,以及每個場景下不同組件信息量的大小和操作的干預度大小。 

          通知的使用場景和強弱排序

          高注意力的使用場景

          【警報】需立即關注

          【錯誤】需立即采取措施

          【異?!肯到y等異常情況

          【確認】需要用戶確認才能進行


          在需要高注意力的場景下用戶必須對消息錯處反映才能繼續當前操作,操作干預度強。

          使用頁面級獨占式布局的結果(Result)通知,告知用戶操作結論以及引導后續的操作;使用對話框和氣泡確認框讓用戶了解當前的系統情況,詢問和引導后續操作;表單校驗提示和全局提示告知用戶當前的異常場景,幫助用戶改正以繼續當前操作。


          使用示例:


          中注意力的使用場景

          【警告】無需立即采取措施

          【訊息】用戶操作的反饋及系統通知


          在中注意力的場景下,當消息出現時,用戶可以選擇性地繼續當前操作,也可以處理當前的消息,操作干預度中。

          使用通知提示框,可以在頁面中的邊緣位置彈出消息提示,后臺可以設置停留時長(當作為永久停留時并需要用戶操作確認,功能等同于對話框);頁面的警告提示常用于在頁面的全局進行通知的展示,用戶可手動關閉。


          使用示例:


          低注意力的使用場景

          【信息性消息】無需立即采取措施

          【徽章】自上次互動后的新消息


          在低注意力的場景下,消息出現后采用弱提示,對用戶的當前操作幾乎不產生干擾。

          此時,全局提示常用于成功狀態下的提示或跳轉狀態,幾秒后自動消失;徽章用于更新消息的狀態。


          使用示例:


          觸發通知的業務場景

          通知的觸發場景存在于用戶之間以及系統和用戶之間。消息組件的設計選擇需要根據具體的業務場景來定,以下是通用的推薦情境。

          例如,在以請求審批作為核心功能的應用系統,成功和失敗的通知可以采用「中注意力」的通知提示框和警告提示;若請求審批是附屬的功能,如,請求某人加入某項目成為訪客,則可以采用低注意力的通知方式,降低操作干擾度。又如,釘釘的會議通知,采用了較強操作干預度的對話框請求確認,釘釘的即時消息通知用戶可以自定義設置是否在桌面展示消息,當不設置為桌面展示時,采用的是紅點徽章的表達方式。 


          通知設計原則

          提供明確指引

          · 在用戶解決問題之前,錯誤消息不應消失

          · 避免僅通過將字段變為紅色來指示錯誤,色盲用戶難以辨認

          · 消息文本內容過多不建議采用懸浮通知中心


          簡單高效

          · 需要明確限制通知的標題和文案的字段數量

          · 避免無故打擾用戶的通知設計

          · 非持久性通知的持續時間不可過短,至少需要讓用戶閱讀完文本內容,適當情況下提供關閉功能

          · 通知文案簡明易懂,無歧義

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          從5個方面,全方位解析微信的搜索功能設計

          ui設計分享達人

          動互聯網時代,用戶信息被孤島化,用戶生產的內容被隔離在自家產品,搜索引擎無法通過搜索抓取,例如微信公眾號、小紅書等。

          在國內除百度搜索外,用戶使用量最多的可能就是微信搜索。微信搜索可以同時搜索到來自微信公眾號、微博、知乎、騰訊視頻、快手、第三方網頁、小程序等渠道的內容。

          本文主要講解微信搜索功能規則設計,大綱如下:

          • 全局與局部搜索
          • 搜索前置
          • 本地與聯網搜索
          • 即時搜索
          • 搜索排序

          全局與局部搜索

          搜索范圍一般有兩種,一種是全局搜索,搜索的內容為整個平臺的內容;另一種是局部搜索,即搜索結果僅為規定的范圍,其好處可以縮小搜索結果范圍。

          微信首頁、通訊錄和搜一搜均采用全局搜索,即搜索內容為整個微信平臺和第三方的內容。

          從5個方面,全方位解析微信的搜索功能設計

          小程序和訂閱號搜索,則是局部搜索,即只搜索規定范圍內的搜索結果,避免搜索結果含有其他非想要的類型。

          從5個方面,全方位解析微信的搜索功能設計

          搜索前置

          微信是為數不多的將搜索范圍前置(搜一搜,搜索結果頁也有搜索范圍篩選),而其他的 app 大部分是將搜索范圍后置。即搜索出現結果,通過 tab 展示不同的搜索結果,例如 b 站。

          從5個方面,全方位解析微信的搜索功能設計

          為什么微信將搜索范圍前置呢?

          我在網上找到了比較靠譜的回答,以下是來自純銀社群 Tony 的回答:

          微信目前沒有能力去做全搜索結果的后置分類。這里的“沒有能力”是個中性詞,因為和網頁這種格式化標準化的內容組織形式不一樣,微信內部的內容格式高度不統一,難以統一搜索。

          比如現在微信的搜索結果是有分類的,分類是 1. 最常使用;2. 聯系人;3. 群聊;4. 公眾號;5. 聊天記錄;6. 收藏;7. 內容搜索(搜一搜)。其中有可能還插入一個“游戲類別”。同時前置也有分類,分別是“朋友圈”,“文章”,“表情”,“小說”,“音樂”,“表情”。

          可以看到這些分類對應的內容可能是通訊錄的聯系人,可能是群聊名稱,也可能是公眾號名稱等等。這些格式不統一的內容之間,缺乏一種像網頁 pagerank,社交媒體 feed 的 edgerank 的排名算法,這在技術上就形成了很大的挑戰,微信很可能“沒有能力”。因為內容形式不統一,就很難用同一個標準算法衡量每種內容的權重,即使是淘寶的商品,因為統一是商品,所以基于“好評”“購買量”“價格”等特征來做 rank 的技術挑戰也比微信要在“聯系人”“群聊”“公眾號”“朋友圈”“表情”這些紛雜的內容形態之間做 rank 要簡單的多。

          簡單說,如果只搜聯系人,微信能做排名;只搜朋友圈,微信也能做排名;但是揉在一起,微信就不知道怎么做排名了:聯系人應該排第一欄還是朋友圈內容應該排第一欄,或者說是表情包應該排第一欄?這個結論如何得出?

          因為微信沒有能力做這些不同格式內容的搜索排名,或者說控制不了把多種不同格式內容糅合在一起進行搜索的用戶體驗。他只能采取“后置分類傾向于 IM 產品的應用內搜索,如聯系人,群聊,公眾號”,“前置分類傾向于內容分類搜索,如表情,小說,音樂”。來達到一個雖然不如 google 百度這樣流暢自然,但足夠可控的,比較穩定的搜索體驗。

          微信搜索過程中,因為搜索內容都是本地,所以采用即時搜索機制,這一過程中體驗很好,用戶不需要點擊鍵盤上的搜索按鈕,因為當前頁即代表結果頁。

          本地與網絡搜索

          搜索機制分為兩種,一種是本地搜索,一種是網絡搜索。

          本地搜索,即不需要通過網絡數據即可檢索出本地信息內容,其特點是速度快,不需要加載。

          網絡搜索,即通過網絡數據檢索出非本地存儲數據的內容,其特點是可以獲得大量的數據。

          從5個方面,全方位解析微信的搜索功能設計

          聯系人、群聊、使用過的小程序、收藏文件標題等均存在本地,不需要聯網即可搜索,無需加載。

          搜一搜為網絡搜索,即搜索的主要為網絡全平臺信息。

          即時搜索

          輸入搜索詞即時出現搜索結果,則為即時搜索。用戶不需要點擊搜索按鈕即可得到搜索結果。

          如下圖所示:淘寶搜索,搜索關鍵詞,出現搜索詞的聯想匹配。用戶只能點擊搜索或點擊匹配聯想詞進入搜索結果頁

          微信搜索,用戶輸入關鍵詞,即時出現搜索結果。

          從5個方面,全方位解析微信的搜索功能設計

          兩者差異化是因為:微信搜索結果頁可以在當前頁面呈現,而淘寶,關鍵詞的搜索頁是搜索詞的全部的商品,搜索過程頁,無法承載搜索結果。

          兩者搜索結果的內容形態差異,導致出現這兩種完全不同的設計。

          搜索排序

          微信主要為即時通訊工具,所以搜索的主場景圍繞著:搜索聯系人、群組和聊天記錄展開。其中權重最高的是最常使用。其次是聯系人、群聊、使用過小程序、公眾號以及聊天記錄等

          其排序順序如下圖所示:

          從5個方面,全方位解析微信的搜索功能設計

          其中搜一搜為網絡搜索,其他為本地搜索。

          搜索結果排序,反映出用戶對類型的高低頻,越排在前面,搜索的頻率越高。

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設 作者:Echo的設計筆記

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          全面剖析視覺專題設計

          ui設計分享達人

          本文做設計探討交流分享,不涉及商業,如有不足多多指教。 其中的優秀案例、插圖部分來自站酷、花瓣和百度(詳情請查看原鏈接)僅供參考學習。 

           本文從“視覺專題設計簡述”也就是視覺專題設計的基礎理論、“專題設計思維養成”就是總結一些常用的設計前期思維方向如何找到和“案例參考”三個部分構成。

          首先是視覺專題設計簡述:  

          大家有知道”視覺傳達藝術設計“專業吧,這個作為大學藝術設計專業中的一種(Visual Communication Design)是為傳播特定事物通過可視形式的主動行為。大部分或者部分依賴視覺,并且以標識、排版、繪畫、平面設計、插畫、色彩及電子設備等二度空間的影像表現??傊褪轻槍ρ劬梢钥吹降木邆涿缹W影響的設計符號,稱之為“視覺傳達”。 

          視覺設計的領域很廣,總的大致分為7種,所以印象中視覺傳達專業的同學會的都挺多?。?!哈哈哈 

          字體設計、標志設計、 插圖設計 ,這三種就是字面意思,大家也常接觸就不做文字說明。 

          而下面這幾種,我用括號內的文字做區分說明。

          編排設計(文字、圖像、圖形、廣告招貼、書籍等編排設計) 

          廣告設計(主題、創意、語言文字、形象、襯托等要素組合進行平面藝術創意的一種設計) 

          包裝設計(綜合運用自然科學和美學知識,為在商品流通進行的包裝造型、結構、裝潢設計) 

          展示設計(主體為商品,在既定的時間和空間范圍內,對展示空間的創作過程)

          當視覺設計前面加兩個字,“視覺專題設計”,這個就是將視覺設計加了限制條件,是針對產品某個主題活動,以特定風格傳遞產品想要表達的信息,為提高產品轉化率,達到流量、曝光、口碑收益的運營設計。 

          如果說需求方讓你只是做一個視覺設計,那么他們的需求就是為了能夠準確傳達信息,有些童鞋做設計過于自嗨,沉浸自己的設計風格中,沒有get到需求方一個簡簡單單的想法,他們只是想要傳達信息,所以給出合適的信息展示就能完成,而設計圖片的美感只是錦上添花,你說他們的審美不過關,也能否先反思一下自己的設計圖是否能讓別人不思考就看懂。如果他們要求是一個專題設計,這是為品牌服務,最后落腳點是品牌,那他們需要的就不僅僅是個美感、信息傳遞、突出符合產品自身的調性,以及帶來流量的設計才是他們想要的目標。

           因此想要做好一個視覺專題,不妨倒推一下整個專題設計的目標: 

          1. 流量增長(當今最具價值證明,數據說話) 

          2. 曝光增加(好的壞的,只要有,就有熱度,就有話題,區別同類的“臉盲”) 

          3. 口碑更好(毫無疑問對品牌屬于積極正面的影響) 

          4. 帶來收益(前三條都是為這條準備,收益才是王)

           所以當我們產出一個設計任務時,可以從以下4個不同層次的設計把控點來,反思調整自己的作品:  

          首先,基礎層級是傳遞出準確的信息,也就是這個信息是能被人識別讀懂(如果一個視覺專題設計產出除了設計師本人能看懂,其余人不明所以,那么只能說明這個設計夠“藝術”不夠“過關”); 

          其次,高一點的層級就是除了能準確傳遞正確的信息以外還能包含一定的信息量,說明這個設計傳達出不止是一點有效信息; 

          再來就是“視覺效果來源于匹配程度”,意思是看完這個設計我能夠聯想或者關聯到一些和他相關的信息事物,證明此設計傳達出了準確有效的信息還能讓所有信息,規律的結合,成為觀看者聯想起過往瀏覽過事物與之匹配的事物; 

          最高一層就是視覺與信息的唯一匹配,這也就是我以后看到這個設計就只會想起某個特定品牌, (例:看到少了一塊的蘋果圖片,一定會想到“喬布斯的蘋果公司、他的手機等”;看到一定會想到“騰訊公司的QQ企鵝”)


          市場固定資源有限,想要瓜分到一口蛋糕, 現在每個企業都需要一定的專題設計來提升自己品牌的影響力,借機造勢,作為企業形象與美譽度的提升突破口,結合各種銷售玩法達到目標。

           企業發展的不同階段對專題設計的要求也是不同,起初需要一個視覺符號來代表,讓大眾記住公司,這也是初期階段受美學影響,各個公司和企業都想要注冊商標;隨著時間變遷企業的發展和轉型需要,誕生了一批品牌符號,也就是我們常說的IP形象、文創、動漫、虛擬智能人工等等,這些是受營銷思維主導催生的視覺設計產業鏈;最后能扛住時間檢驗,并且讓自己的企業視覺設計做到極致,成為為社會文化審美的標桿,推動風格潮流的風向,就成為了一種特定的文化符號,這是所有企業向往的方向,也是最難成就的頂端。當我們能在制作自己的專題設計時,包含企業所想,那么你一定是個格局大家!

          接下來是講述思維養成的一些方法:拆解需求——了解清楚現在的事實、目前商業需求的背景,收集通常這樣的需求在市場上的視覺風格,分析定量現狀和定型現狀,從而推導出商業假設,得出用戶體驗目標,反復推敲找出設計發力點。    


          定量屬性是指以數量形式存在著的屬性,并因此可以對其進行測量。測量的結果用一個具體的量(稱為單位)和一個數的乘積來表示。以物理量為例,距離、質量、時間等都是定量屬性。

          定性是指通過非量化的手段來探究事物的本質。其概念與定量相對應。

          定性的手段可以包括觀測、實驗和分析等,以此來考察研究對象是否具有這種或那種屬性或特征以及它們之間是否有關系。

          定性研究是與定量研究相對的概念,也稱質化研究,是社會科學領域的一種基本研究范式,也是科學研究的重要步驟和方法之一。

          如果說定量研究解決“是什么”的問題,那么定性研究解決的就是“為什么”的問題。

           專題設計一般分為三類:活動、信息、組合;確定好自己的設計類型,

          活動類專題設計——時效性強整體活動時間短、活動類主體利益針對人群、設計調性喜慶,通常大紅色,

          為了達到想要的商業回饋,爭取利益點,主要信息簡單明了; 

          信息類專題設計——活動周期可循環、活動類主體利益是產品、設計調性多數貼合品牌性質,為了

          穩固原有商業形象、讓品質再次提升,拉近與用戶的距離,多數采用品牌的ip或者文藝的插畫來凸顯溫馨; 

          舉例為“京東618”和“face u”、“支付寶 花唄”、“飛豬旅行”各有特色 

           

          信息組合類的專題設計——活動周期可長可短,也沒有特定的時效性,既包含活動類的特點,也包含信息類的特點。它的定量現狀和定性現狀都可用不同場景區分。從舉例就可看出, 

          “阿里巴巴云棲大會”、“成都國際設計論壇”、“臺北燈光節”、“海信發布會” 主視覺海報——

           思維方式2是分析構思: 

          團隊的小伙伴一起頭腦風暴,發散思維寫出與主題相關的,盡可能的多寫,然后再根據意向分類,提取出自己關鍵詞匯,結合詞匯在腦海產生的視覺元素,整合篩選定好方向

           方向定好后,我們就要選取如何通過創意與表現,來實現專題設計讓人記住。 

          常見的創意方法,通過流行的表現風格做視覺呈現,如三維立體、手繪插畫、賽博朋克等;

          通過獨特風格、操作難度高、技術含量大的表現手法做視覺呈現,如手工塑造、超寫實還原、概念模擬等; 

          通過具有情感化設計的圖文做視覺呈現,圖文具有強有力共性(例如“杜蕾斯文案”、“江小白酒情懷”堪稱文案絕絕子······)通過動畫實現等等···· 

          而表現從淺至深就是,引導——刺激——價值 

          ?

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設 作者:YiVi_eleven

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          史上最全|數據體驗好就好嗎?—體驗度量篇

          ui設計分享達人

          上一篇文章講解了產品的數據都有那些,設計師可以通過數據進行設計決策,并且分享了“數據好體驗不一定會好的這個觀點”。今天這一篇文章咱們聊一聊“怎么用度量產品體驗”這個知識點。


          流量紅利退去進入互聯網下半場,所有產品都在比拼產品體驗,這些年體驗的設計價值越來越多受到公司重視,幾乎所有的互聯網公司,都會說:“產品(用戶)體驗設計”,但是大部分產品設計從業者,都弄不明白“產品(用戶)體驗設計到底是什么?產品上線了我們怎么去衡量設計策略的有效性,以及怎么評估現階段產品的產品(用戶)體驗”的狀況。這篇文章,我們就把目光鎖定到“用戶體驗”和“衡量標注”兩個問題上。


          文章結尾我將分享騰訊中國用戶體驗行業發展報告,最近總有粉絲反應鏈接過期問題,如果獲取不到可以私信我。





          我們在項目中經常聽到產品經理定的產品目標是“提升用戶體驗來提升產品數據”,貌似很多項目都能和用戶體驗沾點關系,首先讓我們從了解“體驗”概念這個角度,來解析為什么提升用戶體驗就可以提升產品數據。


          一、為什么是產品(用戶)體驗


          1.1 體驗設計的概念

          產品(用戶)體驗設計,我們可以把這個詞拆開來看看產品、用戶、體驗這三個詞都各自代表的含義:

          產品:可以理解為用戶在享受服務過程中承載服務的載體,比如手機、電腦、應用程序等。

          用戶:廣泛的含義是使用者,即產品的使用者或享受服務的人群。

          體驗:這是一個過于寬泛和宏大的詞,也是一個比較抽象概念,簡單理解為用戶對產品的主觀感受,這個感受可能是好的,也可能是壞的。

          總結一句話體驗設計就是用戶與產品的發生互動行為后,用戶產生的心理感受。如果用戶在產品使用場景中完成期望目標,所產生的愉悅的感受體驗,稱為好的用戶體驗。



          1.2 體驗設計的原則

          產品(用戶)體驗設計 User Experience Design(以下簡稱體驗設計)中“用戶體驗”的概念最早由Don Norman教授(曾任蘋果用戶體驗架構師)在上世紀60年代提出并進行了系統性研究。他表明,用戶體驗設計,是用戶在使用產品的直觀感受,并歸納出好的用戶體驗應以用戶為中心,是尊重用戶的、是有效的、順暢的、一致的、符合直覺的。后有人把Don Norman教授這段話歸納為體驗設計應遵循“可用性、易用性、滿意度”這三個原則,如圖:


          1.3 體驗設計是迭代的原因之一

          體驗設計在產品迭代中有多重要,看下面這種張圖你就會懂了。現在互聯網產品的迭代方式是“小步快跑,快速迭代”,產品迭代無外乎兩個原因;

          1) 產品利益:為了推出迎合市場的新功能,促使用戶進行付費行為獲取商業利益

          2) 用戶體驗:不斷優化產品體驗、提升產品質量、不斷的實現用戶健康增長。

          由此可見,體驗設計在產品迭代中擁有舉足輕重的分量。


          1.4 體驗設計的3種價值

          體驗設計的價值體現在用戶心理感受與產品業務價值發生關聯的場景中,比如愉快的購物體驗、高效的退貨業務等這些場景都會促使用戶信任產品從而提高用戶下單率。在這些場景中就會體現體驗設計的產品價值和商業價值,產品的頁面清晰操作簡單很容易觸發用戶愉悅的心理感受,從而進行下單的互動行為。

          另外我還要補充一點其設計價值,因為設計師是站在用戶的角度考慮問題、解決問題的職業,而ui設計師的核心價值就是提升產品體驗,所以綜上所述,體驗設計的價值在于設計價值、商業價值和產品價值這三點。


          二、衡量體驗的三個維度


          2.1 衡量體驗的所有指標

          體驗是一個比較抽象的概念,很多場景中所表達的都是用戶對產品的主觀感受,最開始判斷體驗的指標也很抽象,后來人們把抽象的指標和埋點的數據相結合,通過數據去衡量比如頁面訪問次數、用戶停留時間、產品加載速度等。

          *在工作中常會用到易用性、滿意度、nps等維度再結合后臺數據埋點這種方式進行用戶行為分析來評估用戶的體驗指標是否達標。


          2.2 衡量體驗的三個維度

          現在為了方便大家進行分類,大家把衡量體驗的所有指標都是按照用戶感受、用戶行為、系統表現這三個緯度進行度量:


          2.3 不同形態的產品體驗目標各不相同

          用戶感受、用戶行為、系統表現只是一種簡單的方法,大家要有這樣一個認知,不同細分類型、不同生命周期的產品,對于各個指標的偏重也有所不同。如協同辦公類的產品更注重協同性,而數據產品更注重易理解性和一致性。初創期的新產品需要容易上手,對易學性要求較高,而成熟期的產品可能更需要考慮各個角色的需求滿足度。


          2.4 C端和B端產品的體驗目標有啥不同

          市場上的產品主要分為兩類c端和b端,因為兩類產品的用戶屬性、盈利模式、產品定位不同,所以兩類產品的體驗目標各不相同,最大的區別在于用戶、體驗、數據上的不同,接下來讓我們聊一聊兩款產品的體驗目標側重點各自都是什么。


          a c端產品體驗的側重點

          c端(Consumer)產品通常指消費者或者個人終端用戶使用的客戶端,類似產品有微信、知乎、qQ音樂等產品。

          因為c端產品的用戶忠誠度較低,一言不和就換產品使用,所以為了留住用戶各大產品不惜成本追求極致的體驗。幫助用戶解決需求的同時,與其他競品相比產品的整體體驗相對有趣是現在c端產品的體驗目標。


          b b端產品體驗的側重點

          B端(Business),通常為企業員工或商家使用的系統或平臺,類似產品有SaaS軟件服務系統——微盟、oA辦公自動化系統——飛書、cRM客戶管理系統——銷幫幫等產品。

          而B端產品具有鏈路冗長、操作復雜等特點。b端的產品體驗核心是降低用戶上手門檻,提高產品的工作效率,幫助用戶高效的完成工作任務是現在B端產品的體驗目標。


          *在B端產品中經常會提及“易用性”這個專業名詞,為什么呢?那是因為B端產品針對的是商家,用戶,所以對于這類用戶高效是他們的核心需求,那怎么樣才是高效呢,那就是后臺系統要做得極其簡單也就是產品的易用性要高。


          三、用戶體驗的三大評估指標

          通過上面講解大家可以了解到判斷用戶體驗的具體產品數據和抽象概念的指標有很多,這里我著重講解三個在行業內使用最為常用的三個比較主觀的體驗指標,即滿意度、凈推薦值、費力度。

          為什么只講解這三個呢,那是因為這三大評估指標分別代表體驗設計的設計價值、商業價值以及產品價值。


          a 設計價值——滿意度(CSAT)

          這應該是最經典的衡量指標了,也是更大互聯網對于產品來說最為看中的指標。早在于1965年“滿意度”這個概念就被提出,在我們在生活中都可以看到關于客戶滿意度方面的調研功能,比如app storr對產品的體驗,送完外賣對店家和送餐人員的服務點評等。

          優勢:

          滿意度的擴展性強非常高,可以用于詢問用戶各種問題,可以看整體的產品體驗滿意度,也可以看具體的某個功能的滿意度。

          劣勢:

          滿意度對未來行為的預測是最差的,滿意度能夠體現出用戶對產品短期內的幸福感,但無法體現用戶對產品的長期態度。


          B 商業價值——凈推薦值(NPS)

          凈推薦值是由貝恩咨詢企業客戶忠誠度業務的創始人佛瑞德·賴克霍徳(Fred Reichheld)在2003年提出,它把用戶分為推薦者、被動者和批評者這三類,通過計量用戶的推薦意愿的強烈度而判斷用戶的忠誠度。

          優勢:

          他常作為未來的客戶滿意度指標,精準的測量某一項的客戶滿意度,與滿意度相比這個指標更為直觀,用于衡量用戶長期的幸福感,也用于全鏈路全流程的滿意,判斷用戶忠誠度,也可以看到項目未來一段時間的發展趨勢。

          劣勢:

          雖然獲得的指標是最為直觀的,但度量的問題往往只有一個所以反應的用戶視角會比較狹隘。并且設計的問題也不能證明推薦者會真的推薦,所以得到的結果并不一定是用戶在現實生活中的推薦行為相關。


          C 產品價值——費力度(CES)

          客戶費力度這個概念在2010年在《哈佛商業評論》中被提出,可以理解為是升級版,用于詢問用戶在產品使用過程中高頻出現的問題,主要是為了滿足用戶的滿意度但是無法體驗用戶的忠誠度的用戶所設計的。


          優勢:

          幫助產品設計發現和解決復雜流程中的問題,比如B端產品中,可以通過數值的表現,對下一次改版進行想法升級。

          劣勢:

          對于衡量產品質量比較適合,但不是很適合衡量品牌在用戶中的價值地位。并且并能用來來挖掘用戶真實的評價和需求痛點。


          *在這里還有一個知識點向大家普及,就是可用性測試——SUM。






          每個設計師都在遇到這樣的問題;

          設計領導:你怎么證明你做比其他設計同事好

          開發同事:你們設計只關心美不美,浪費研發資源 產品經理:我覺得這個功能優化并沒有比競品的好?

          公司老板:你們對產品盈利都做那些什么貢獻?

          我們在做真實項目的時候會發現幾乎所有的設計策略都能和用戶體驗扯上關系,比如我們通過xxx提升了用戶體驗從而提升用戶在xxx場景的用戶滿意度。這樣折騰了一圈,但是發現好像有產品沒有什么實質性的效果,設計很難度量也難度凸顯設計的價值。


          一、為什么要會設計度量


          1.1 設計度量的意義

          a 體驗面前的攔路虎

          其實上面這個問題曾經其實也困擾了我很久,但隨著做的項目越來越多,我現在從體驗設計師的角度嘗試回答這個問題:

          1)“體驗”是用戶純主觀的感受,概念比較抽象,從這個情況來看是很難被度量的。

          2)促成體驗好與不好的因素有很多,很難定直接定位體驗問題的根本原因。

          3)現在產品迭代頻繁,提升了一個場景的體驗,往往另一個場景體驗問題就會暴露,很難確定產品終極目標。


          但是作為體驗設計師,我們需要在項目中對體驗有以下三點比較清楚的認知:

          ·體驗是直觀的用戶體驗感受和清晰的設計價值體現。

          ·體驗要以體驗為中心做有價值性的探索設計破局點。

          ·體驗需要對設計產品迭代有明確的改版目標。


          b 度量的意義

          我們要完成設計師的使命,在項目中凸顯設計的價值,所以我們需要一套科學的、成體系的、可量化用戶的體驗完整的度量框架,能夠聚焦用戶體驗問題作為驅動、提煉提升產品體驗的目標,從體驗角度解決體驗需求。項目中的度量有其三點意義:

          1)可以具像化有刻度的的體現用戶主觀感受的測量工具。

          2)可以通過度量提煉出以用戶行為作為產品迭代目標。

          3)可以更好的根據自己公司業務場景搭建體驗設計體系。現在很多公司都有自己的度量體系,比如阿里,滴滴為體現設計在業務中創造的價值,都有自己的設計質量評估體系。他們通過劃分場景、量化設計可以更準確的刨析出那個體驗的根本問題。并且評估潛在用戶的體驗感受,為之后的產品改版找到體驗優化方向。


          1.2 設計度量的概念

          度量的概念在我們的生活中很常見,以下是對度量比較嚴謹的概念解釋:

          【度量Measure】是一種測量評定對象的方式,它幫助我們結構化的獲取對象的狀態與變化,我們運用這些數據進行洞察,轉化為有用的信息,幫助決策和優化,這個過程也是分析診斷的過程


          二、設計度量的原則

          用戶體驗度量體系是可以通過某種形式測量采集得到的,例如對用戶無感知的埋點法、由用戶直接反饋的問卷法等等,設計度量作為項目中重要一環,不僅能夠驗證產品及設計策略的有效性,還可以有效驗證了我們服務化升級目標及設計目標拆解的精準性,也為后續優化帶來了更多的線索。

          所以設計度量的建立應具有有效性、穩定性、針對性、擴展性、可持續性這五個原則。

          a 有效性

          我們通過某種形式測量產品體驗時候,把保證“體驗好”轉化為可以測量的概念,如用戶留存率、流失率、關鍵操作的完成率等,通過這些直觀數據的改變去衡量抽象體驗的問題,在這個過程中需要保證數據結果是真是有效的。

          b 穩定性

          人與人之間的體驗差異本身是具有差異性的,用設計度量時候人的感受往往會受到環境、情緒等影響,產生隨機誤差。我們需要度量的結果盡量減少外界環境的干擾,出于這個目的度量需要具有一定的穩定性才能進行真實結果反饋。

          c 針對性

          可以反應用戶體驗問題的指標有很多,數據埋點也有很多。本身數據是有欺騙性的,所以我們在做設計度量時應該劃分場景,即不同場景對應不同的數據埋點,有明確的度量目標,才能做到只聚焦某個產品的端上體驗問題,那這個度量結果才有針對性。

          d 擴展性

          我們要保證輸出的指標和測量模型,不僅適用于整體,也可以針對某個場景某一個交互環節,某個界面進行度量的測量,度量應該具備擴展性。

          e 可持續性

          度量的目的不僅是反應當時產品存在的問題,也要預測出未來產品規劃方向,度量指標的可持續性指應持續觀察、跟蹤、和優化指標,使得度量體系可以貫穿在產品整個生命周期中,也利于對產品迭代優化后指標數據的前后對比。



          三、體驗度量和可用性測試的區別

          可用性測試大家一定經常聽,在很多測試場景,我們很容易把體驗度量和可用性測試的概念相混淆。

          可用性測試:通常是在開發完成之前,讓用戶完成特定的任務,通過觀察用戶在使用產品時的反饋,從中發現設計中存在的可用性問題的一種測試方法,其目的就是為了付出最小可行產品來做正確的設計,避免消耗太多開發資源做產品。

          體驗度量:是一種更宏觀的視角,強調用戶與產品之間的整體交互,以及在交互過程中形成的想法、感受和感知。用戶判斷產品現在階段暴露出來的體驗類型問題,對未來設計的一種預判。






          “滿意度—有用”,“凈推薦值—有效”,“費力度—易用”這幾個觀測維度貫穿了互聯網1.0到4.0時代,在不同時期,各類模型普遍都會涉及到的維度,根據以上三點也嚴格的度量的標注和具有較強的普適性、通用性的度量模型,接下我將帶領大家一一了解這些度量模型都有那些。


          一、度量標準都有那些

          方便大家區分可以把度量標準梳理成國際標準和國內標注兩個部分,大家了解即可。


          1.1 國際的標準

          A ISO-9126 軟件質量模型

          ISO/IEC 9126 (1991) 軟件質量模型是是一種評價軟件質量的國際標準,包括3個層次,由6個特性和27個子特性組成:

          1)質量特性

          2)質量子特性

          3)度量指標

          * 在這里設計師應該注意「適應性」、「易安裝性」、「易理解」、「易學」、「易操作」和「一致性」,產品應注意「共存性」「易替換性」和「可移植性的依從性」,其中「易用性」的概念涵蓋了用戶體驗中常規易用性的維度。


          b BS ISO/IEC 25010-2011軟件產品質量需求和評估(SQuaRE)

          該模型是ISO/IEC 9126的升級版,包含8個特性和36個子特性,相對比較全面的了,大家可以從各特性的定義、范圍與度量標準評估自己產品。


          1.2 國內的標準

          A SO-9126 軟件質量模型,評價軟件質量的國際標準

          該模型重新定義了「效益」、「效率」、「滿意度」即定義為一個產品可以被特定用戶,在特定場景下,達成特定目標的效益,效率和滿意度。

          - 效益(effectiveness):用戶完成任務的精確性和完整性。

          - 效率(efficiency):用戶完成任務所消耗的資源。

          - 滿意度(satisfaction):用戶對任務流程的可接受程度。


          b ISO-9241 關于辦公室環境下交互式計算機系統的人類工效學國際

          SO9241對Usablity的定義,在今日的設計質量評估仍舊有很強的指導性和應用性,具備很強的可操作性。比較重視「效率」和「效益」這兩個維度,在任務完成程度和所消耗的時間/人力資源的場景下,評估出特定任務的可用性,在流程較長的B端產品體驗度量中尤為常用標準。


          1.3 其他

          這里我還查閱到和體驗有關的國外資料,稱之為標準也可以、稱之為模型也沒錯,他們分別是“蜂巢模型、尼爾森十大可用性原則、USE量表”,有興趣的同學可以自行查找了解。


          二、度量模型都有那些


          度量模型也分為國內和國外這兩部分講解,這里介紹常用的8種類型,其中HEART模型是目前比較成熟的體驗度量模型,也是各大互聯網公司的應用最廣泛,普及率是最好的模型之一了。


          2.1國外模型

          a 谷歌HEART模型

          HEART是GOOGLE公司基于商業和技術的產品評估體系提出的模型概念,它包含5個維度,適用于市面上大多數C端類產品。

          這五個維度分別是:

          1)愉悅度:用戶主觀的體驗即使用產品或者功能時是否會感覺到愉悅感。

          2)參與度:用戶對產品內容是否感興趣并愿意主動分享給其他人。

          3)接受度:用戶看到新產品或新功能可以接受并且愿意嘗試新的功能。

          4)留存度:在一段時間后,新、舊用戶是否愿意回來繼續使用產品。

          5)任務完成度:在使用過程中,用戶能夠高效,準確、流暢地完成當前任務。

          如果結合上一篇數據認知的文章,就可以通過以下數據去衡量產品的體驗度量,如下圖:

          這個模型雖然是全維度、多參數、多角度、系統性的評估方式也是目前普及率最高的,但是也有其自身缺點。



          b 門戶電商PULSE模型

          PULSE模型以網站為維度來衡量體驗的模型,通過商業指標和技術指標,衡量網站的整體表現。同樣包含5個維度:

          1)頁面瀏覽量:屬于產品指標,指頁面被用戶訪問的次數,以及頁面的點擊轉化情況。

          2)運行時間:屬于技術指標,指衡量網站可以持續穩定地運行時長。

          3)系統延遲:屬于技術指標,指衡量用戶打開頁面的速度是否流暢。

          4)周用戶活躍:屬于產品指標,反映網站的實際運營情況,估計產品的用戶規模。

          5)商業收益:屬于商業指標,指產品的營收情況,不同類型的產品類別是不同的,比如電商類更關注GMV等指標,視頻業務關注廣告,電子書業務關注VIP售賣等。


          c 谷歌GSM模型

          GSM模型是Google的用戶體驗團隊提出的一種指標體系,即目標(Goal)、信號(Signal)、指標(Metric)這三個緯度做為另外橫向的參考緯度,他最有價值的一點是把GSM模型和HEART模型想結合,設計一個更為全面的體驗度量模型,具體內容如下圖。


          2.2 國內模型

          a 阿里云UES模型

          UES應用場景更加適合B端產品。是阿里云設計中心基于易用性量表去擴展而成的度量模型,它的核心緯度包括易用性、一致性、滿意度、任務頁效率、性能。其中易用性是B端產品的重要屬性,他的背后就是易用性量表的標準,與常規的易用性量表相對來說更為成熟和精細化。


          b 阿里媽媽四項五度模型

          四項五度模型應用場景更加適合C端產品。它是阿里巴巴1688UED團隊在Google的HEART模型的基礎上升級的度量模型,從用戶的行為角度出發,四項分別是「當下、未來、態度、行為」;五度分別為「吸引度、完成度、滿意度、忠誠度和推薦度」。


          c 酷家樂四象模型

          四象模型是面向工具類產品的體驗度量方案,它以「角色」與「心智」「功能」和「性能」這四個維度,分析人與工具之間的微妙關系。


          D 58同城B-Metric

          B-Metric是一個關注業務特點與用戶角色的度量模型,也是一個個比較全面的指標體系,該體系包含基礎體驗、角色體驗、企業價值三大部分,基礎體驗是提供產品最基礎體驗的保證;角色體驗則是我們在設計產品最為關心的體驗緯度;企業價值是產品所帶來的盈利情況,也是體驗相關的實際價值。


          E 支付寶PTECH模型

          PTECH模型是阿里巴巴支付寶團隊設計的度量模型,它是基于HEART模型升級后基于用戶行為分析和應用性能檢測的模型,比如:將愉悅度改為滿意度,將任務完成度改為任務體驗,在參與度下并入接受度、弱化留存率,引入清晰度與性能體驗的全新維度。


          2.3 三種測量方法

          模型種類有很多,這里說明一下測量三種方法,大家簡單了解即可。






          一、度量體系需要具備兩種模式

          前面講到了體驗是一個抽象的概念,必須要有數據這種比較具象的概念做支撐,在《u一點料》這本書中,作者把數據比喻成設計的理性之光,我這種觀點認為用在度量上也不為過,因為度量的體系是建立在數據之上的。

          而這種度量體系的搭建本身就是為了用戶著想,以創造用戶價值為出發點的體系。所以我認為度量體系的搭建應該具備兩種模式,即“數據驅動+體驗驅動”這兩種模式。


          二、三環四步打造自己的度量體系

          體驗度量體系雖然是一種很復雜的體系,但是如果以化繁為簡的思路去刨析它的話,我們可以講這種復雜的體系概括為三個層級來解決問題:聚焦體驗的問題——體驗目標的指標——后續指標的追蹤。

          聚焦體驗的問題:就是在業務鏈路中找出最能提升用戶體驗的關鍵問題,并把這個問題進行可度量的轉化,換一個角度說找出的這個問題也是我們搭建度量體系的目標。

          體驗目標的指標:當體驗目標被我們明確之后,就可以利用市面上現存的度量體系來進行度量緯度的測量,當然也可以理解為這是定義體驗標準的過程,既然有標準一定會有定義標準的指標,而篩選體驗目標的指標就是在這個環節被篩選出來的。

          后續指標的追蹤:這一個環節就是首位的環節了,其中包括驗收和追蹤兩個步驟,在度量體系的標注線客觀的捕捉其變量的特征,為后續的項目改版方向提供線索支撐。


          2.1 第一步

          凡事都需要有一個目標,確立體驗目標就是體驗度量的開始,清晰準確的目標決定度量體系的最終質量。這里有兩個方法可以幫助我們梳理出用戶的產品的體驗目標。以下內容我以金融產品為例子講解每個步驟我們應該做什么。

          a 利用kcon模型劃分需求范圍

          體驗和需求分不開的,在卡諾模型(KANO)中,將產品功能的需求 分為五種屬性:必備型需求、期望型需求、興奮型需求、無差異型需求、反向型需求。以金融類產品為例子,我們需要找到必備型需求、期望型需求、興奮型需求,來確定用戶的需求都有那些。


          b 通過定性、定量確定體驗目標

          也可以通過定性、定量的方式把劃分后的需求,在梳理成以滿意度、易用度、有效性為三個緯度的體驗目標,比如

          滿意度:產品內務對用戶的吸引力、產品界面是否美觀友好給人舒適感覺、客服是否專業性高可以即使有效地回復用戶問題、用戶對品牌是否表示認可是否用戶對品牌有贊美,用戶會產品的是否有信任感覺、用戶是否愿意持續使用產品等。

          易用性:是指產品功能對用戶的難易程度,比如功能入口是否容易識別,用戶是否能快速找到自己所需要的內容,產品操作步驟是否簡單符合用戶習慣、用戶在瀏覽內容適合時是否可以快速閱讀和理解、產品對用戶不恰當的操作是否有提示和限制,產品對用戶的錯誤操作是否有提示,用戶能否快速地知曉產品的使用等。

          有效性:用戶賬戶資金是否安全、產品提供的內容服務是否有價值、用戶可以順利完成核心任務、產品基礎功能是否健全完備、產品提供的信息內容是否準確完整、用戶查詢信息和提交信息是否能即使響應、產品運行速度是否穩定。


          2.2 第二步

          a 篩選最佳度量模型或者工具

          前面講了很多關于度量模型的知識點,如果你在之前的工作中沒有接觸到度量提醒,那么這里我將講解一些關于“怎么選擇度量模型”的辦法。

          行業界內的體驗度量上的方案,大致可以用“客觀度量、主觀度量、主觀&客觀結合度量”這三個緯度進行區分。

          客觀衡量法:通過數據埋點監測用戶行為數據。比如經典的 PULSE 模型,還有大家熟悉的運營指標,活躍用戶數、留存率、點擊率等等。

          主觀衡量法:就是收集用戶主觀的評分。比如滿意度、費力度,可用性測試量表(如SUS)等等。

          主觀+客觀衡量法:把用戶行為數據和主觀的評分結合起來,多數用歸一化方式得出一個總分,把分數劃分成不同檔次作參考。比如Google 經典的 HEART 模型,PTECH 模型,阿里云UES模型、58同城B-Metric等等。


          *在這里我還是比較推薦使用 HEART 模型(Google),因為他的五個緯度包含了定性和定量兩個數據緯度,也可以從宏觀和微觀兩個角度解析產品。



          b 結合數據驗證模型

          上一篇文章《數據認知篇》簡單的介紹幾種數據測試的方法,比如A&b TASR測試、灰度測試、可用性測試的方法,這里就可以派上用場。通過測試中的訂單量、點擊率,活躍度的數據波動我們可以直觀的對應出我們產品質量、系統性能等的體驗類型的問題。這樣我們的體驗度量體系的雛形就搭建完成。


          2.3 持續監測,不斷優化

          最終我們集合成這樣的表格就可以了。度量體系最重要的就是發現具體的體驗問題以及后續的改進方向。

          明確體驗目標:我們產品目前存在什么體驗問題,他的嚴重程度有多少,是否對產品的盈利造成影響。

          改進方向:我們要改進什么場景,要用什么設計策略怎么提升產品的用戶體驗等。


          總結

          體驗設計是產品的重要一環,除了研發,持續的用戶體驗活動可以使每個人的努力更有效和更有價值。在設計過程的每個階段,不同的用戶體驗方法可以使產品開發工作保持在正確的軌道上,符合用戶的真實需求而不是想象中的需求。

          產品的體驗研究,研究的越早,研究結果對您的產品的影響就越大,而且根據最后的體驗定義,有助于做出現階段或者未來產品的迭代規劃,

          在所有階段進行用戶研究,正如我們在下面展示的,在任何合理的項目計劃的每個階段都有一些有用的東西可以學習,每個研究步驟都會增加你的產品價值。

          一下是我在國外網站搜集到的一篇關于“用戶研究的方法論”,文章地址我輸入到文章末尾處。






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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷 作者:斜杠7濕兄

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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