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

          首頁

          設計要知道-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 應用,來設計界面元素,并提供熟悉、直觀的體驗。

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

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

          • 語音?;赟iri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。


          全新的電子車鑰匙,加上 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 提供的業務模板,總結了以下常見的消息通知組件和模板:

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

          消息通知設計指南圖

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

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

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

          高注意力的使用場景

          【警報】需立即關注

          【錯誤】需立即采取措施

          【異常】系統等異常情況

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


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

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


          使用示例:


          中注意力的使用場景

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

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


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

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


          使用示例:


          低注意力的使用場景

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

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


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

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


          使用示例:


          觸發通知的業務場景

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

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


          通知設計原則

          提供明確指引

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

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

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


          簡單高效

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

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

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

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

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

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



          文章來源:站酷    作者:Ant_Design

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

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

          藍藍設計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 體驗設計是迭代的原因之一

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

          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          UI&UE實用方法論 | 「美即好用效應」就是UI存在的價值嗎?

          ui設計分享達人

          有研究表明,人們會自然地認為外表更漂亮的人擁有更加優秀的品質特質。即我們對一個人的外表印象會影響對他品質的感受和思考,心理學上將這種行為稱為「光環效應」。


          同樣有人認為,這樣的光環效應作用于人機交互設計領域也一樣是奏效的。好看的設計,會讓用戶認為產品更好用,外觀會影響用戶對產品可用性的感受,這就是所謂的「美即好用效應」



          一、關于該定律的實驗


          前面我在談「費茨定律」或是「恐懼留白」的時候,大多數方法論都可以溯源到真實的科學實驗或心理學文獻記錄。


          但在查找「美即好用效應」資料的時候,所有內容對初始實驗都是一筆帶過:


          1995年,日立設計中心的研究員 Massaki Kurosu 和 Kaori Kashimura 通過26種不同的 ATM 交互界面對 252 位參與者進行詳細的用戶體驗測試。結果發現,這些因素中很大一部分對真實可用性的影響微乎其微,反而界面美觀度對真實可用性的影響出乎預料的大。


          表現可用性的決定因素對真實可用性的影響系數大多在 0.000-0.310 之間,而界面美觀度這個數據達到了 0.589。



          我試著到很多地方去搜索更多關于該實驗的記錄,卻都沒有找到相關論文。所以對于這個實驗的結果,我只能保持觀望態度。(也可能是我檢索資料的能力還有待提升...)


          首先是我無法確定所有參與者在這個實驗中的需求目標是否發生變化,概述中既沒有闡明對照組,也沒有告知實驗對比過程的細節。


          其次在「美觀度對可用性的影響較大」的實驗結論中,科研人員是如何定義「美觀度」的標準的?審美是一種主觀意識,那么「美觀度」應該如何被定義,科研人員究竟是從配色、排版、統一性,還是動態和諧的交互流程定義了實驗界面的「美觀度」?我們也不得而知。


          所以「美即好用效應」在人機交互領域的可用性,究竟是一條科學實驗結論,還是屬于用戶心理研究,抑或只是人傳人傳出來的自然規律,作為筆者,我本著對我讀者負責的前提下,也只能畫個問號。


          二、「美」在商業產品中的價值層級


          在人們追求基本生理需求的時代,「美即好用效應」的作用力必然不會比溫飽時代的大。


          為什么這么說?從馬斯洛需求層次理論模型中就可以看到,對于用戶而言,“審美需求”是在保證了一系列缺失性基礎需求之后,才會追求的需求層次。



          馬斯洛需求層次理論映射到用戶體驗五層理論也是異曲同工,從戰略層到表現層,越是重要的層級掛靠的馬斯洛需求層次就越基礎。擁有巨大商業價值的產品,往往影響其在商業市場中走向的,都是基礎需求,而非高層級需求。


          這就為什么我前文說道,很多人抽離前提來談「美」的重要性。用戶對「美」的追求是在滿足了基礎需求的前提之下,如果一個產品的戰略、范圍層難以落地,空談「美即好用效應」便是空中樓閣罷了。


          表現層在沒有可靠的戰略前提之下,是毫無商業價值的個人狂歡。


          三、UI到底該關注什么


          UI是一項純藝術性創作的職業嗎?在我剛接觸UI行業的時候,我是這么單純地認為的,但現在已經不再是了。


          我前一陣子看了像素范泡泡老師的直播,其觀點我非常贊同,也在社群里和大家進行過了交流。在此我引用兩個泡泡老師舉到的 iOS UI 的案例,來闡述 UI 探索的「美」,究竟是在探索什么。


            1.iOS為什么激勵大部分APP適配暗黑模式?  


          大概在去年,網傳蘋果將強制要求 APP Store 中的應用程序要適配暗黑模式。暗黑模式也掀起了一輪新的視覺設計潮流,暗調的設計語言讓產品在視覺上看上去更酷更年輕。


          但蘋果激勵大部分應用程序適配暗黑模式,只是單純的為了視覺上的好看嗎?其實并不是。


          是因為后期的蘋果硬件設備多采用OLED屏幕技術,比起其他廠商的LCD屏幕技術,有其優點,但也有其缺點。OLED采用低頻PWM調光模式,也就是通過低頻頻閃的方式控制屏幕亮度(一亮一暗、一亮一暗如此反復)。在調低屏幕白光亮度的情況下,頻閃很容易造成用戶視覺疲勞。這一點極可能成為蘋果設備的銷售弱點。


          于是蘋果希望在用戶需要調低屏幕亮度的場景中,通過暗黑模式的視覺手法,大量運用黑色,這樣OLED屏幕的光源就可以直接關閉,而不需要采用頻閃的方式來控制屏幕亮度,從而減輕用戶視覺疲勞的現象。



          (ps.看不懂的朋友莫急,文末我放了B站up主硬件茶談的《全網最簡潔易懂的OLED與LCD屏幕工作原理與優劣科普》視頻,感興趣的小伙伴可以查看)


          蘋果主動落地暗黑模式的開發,并且激勵在應用市場上架的其他應用也適配暗黑模式,實際上是與其商業目的掛鉤的一種行為,只是將解決方案落實到了表現層。


            2.iOS從擬物風格向扁平風格的轉換  


          iOS7掀起的扁平設計風潮,至今還在影響著UI設計趨勢以及用戶的審美。但你硬要從個人審美角度去評判曾經的擬物風格與現在的扁平風格究竟哪個更好,只能說仁者見仁。


          泡泡老師認為,iOS 擬物風格向扁平風格的轉換,也不僅僅是基于視覺「美」的考慮。因為曾經的蘋果在全球移動品牌廠商中,擁有更加優質的屏幕硬件,他們的屏幕可以高清顯示更多的設計細節,于是仿真的擬物風格在蘋果設備上通過其光影、陰影的展示,可以突出蘋果的屏幕優勢,從而成為其商業賣點。


          但后來隨著移動設備品牌商的硬件差距不斷縮小,高清顯示已不再成為蘋果獨家的亮點,蘋果也就不需要再花費更多的設計成本在擬物設計上了。此時的擬物設計成本并不能再持續帶來高效的商業回報,從而轉向扁平風格,一方面可以提高設計效率、降低設計成本,同時對其周邊設計的延展性更高。



          從這兩個案例中可以看到,UI雖然做的是表現層的工作,但實際上也是在為用戶、為商業、為戰略而服務。除了視覺的「美」,我們也應該關注產品背后的數據、商業價值,我想這就是UI與純藝術性創作型設計崗位的區別吧。


          四、總結


          說了一堆,感覺我好像一個「美即好用效應」的ANTI份子...其實也不全是。我清楚「美即好用」在一些商業案例中的運用,我不否定該定律存在的價值,只是想表達一些看法。


          首先我認為不應該在產品還沒有扎根市場,擁有產品自身的商業價值之前,過分拘泥于視覺表現層的內容。在腥風血雨的互聯網商業市場,迅速小跑迭代,做好用戶數據分析,增強產品自身留存實力、激活市場潛在用戶,比把目光放在視覺表現上可能更有價值。當產品在一個領域或市場積累了一定忠實度較高的用戶之后,「美即好用效應」可能才會發揮其功效。


          其次我想對話同行的UI設計師,我一年前在《UI如何提升個人價值?UGD思維了解一下》中已經說到過,UI設計不應只停留在視覺表現層,想提升自我價值,一定要培養超脫表現層的思維能力。


          我們不應該一味地信奉「美即好用」。作為UI設計師,我們要通過避免「美但不好用」或「不美但好用」的極端來平衡視覺表現與功能的體驗。

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

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



          文章來源:站酷  作者:UCD耍家

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

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

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


          深度解析螞蟻Ant Design的設計原則

          ui設計分享達人



          『 Ant Design是什么 』


          眾所周知螞蟻集團的B端產品是一個龐大的系統,數量多且功能復雜,而且變動頻繁,常常需要設計師和開發人員能快速做出工作上的配合。同時這類產品中有存在很多類似的頁面以及組件,根據原子設計理論可以得到一些穩定且高復用性的內容。

          隨著這兩年B端產品的逐漸白熱化,越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標,螞蟻集團體經過大量項目實踐和總結,逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design。通過組件化設計規范,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。



          『 Ant Design設計原則是什么 』


          針對B端產品反復出現的一些設計體驗等問題, Ant Design 給出標準的設計原則,實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面,既減少了不必要的認知成本,又能夠提升設計的效率??紤]到需要適應各種定制化的業務場景,設計原則具有一定的靈活性,萬變不離其宗,通過了解設計原則的構建邏輯,高效組織信息、幫助建立用戶與界面的互動等原則性要求,可以衍生出更具場景特性的設計方案。


          ① Ant Design設計原則的由來

          可以說 Ant design的設計規范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則,并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充,我在看書的過程結合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明,這也是為什么國內的企業一直以來都很喜歡使用這套組件的原因。


          ② Ant Design設計原則的適用范圍

          1. 我們先說說『Ant Design 』的適用范圍:

          稍微了解 Ant Design 的小伙伴都知道,本系統是針對B端后臺系統,承載媒介是PC端的瀏覽器。使用的人員主要包括:用戶體驗設計師、交互設計師、UI設計師、前端程序員等。

          2. 再說說 『 Ant Design 設計原則 』的適用范圍:

          顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分,但是前文已經提到,此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華,所以設計師可以把這些原則運用到任何的設計領域,并不要局限于企業后臺系統的PC端產品。

          為了方便大家理解,講一個小故事。故事來自于《寫給大家看的設計書》,作者有一年圣誕節收到一份禮物——一本關于植物的百科全書。作者翻閱之后,發現其中有一顆叫約書亞樹的樹,造型奇特,自己從未見過。于是決定出門轉轉,然而發現外面到處都是這種樹。故事到這里就完了。

          可能大家會想,這個故事要講一個什么道理呢?簡單來說就是,當你手中有個錘子,滿世界都是釘子。當你了解到下面要講的十個設計原則后,你會發現它們處處都適用。


          ③ Ant Design設計原則的內容

          十大原則如下:

          • 親密原則(Proximity)

          • 對齊原則 (Alignment)

          • 對比原則 (Contrast)

          • 重復原則 (Repetition)

          • 直截了當 (Make it Direct)

          • 簡化交互 (Keep it Lightweight)

          • 足不出戶 (Stay on the Page)

          • 提供邀請 (Provide Invitation)

          • 即時反應 (React Immediately)

          • 巧用過渡 (Use Transition)



          『 如何運用Ant Design的設計原則 』


          對于一個初級設計師而言,想要了解UI用戶體驗等知識,學習 Ant Design 的設計原則算是比較快能上道的,因為 Ant Design 是吸取了很多前輩的精華,提煉而成的系統。打個簡單的比喻,對于設計師而言 Ant Design 就是設計師學習『 視覺規范 』,掌握『 設計原則 』最好的字典。

          接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。

          Ant Design 定義了10條設計原則,根據『 席克定律 』選項太多不易記憶,于是我找到了這些設計原則的共通性,將其歸為4類,也就是大家只需記住四類設計原則,在工作中適當延展即可。


          ① 視覺層級清晰

          包含 Ant Design 的設計原則有:『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。

          「視覺層級清晰」的重要性體現在 交互前 用戶看到的內容結構是清晰明確的 。一個層級混亂的界面,任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎。


          1. 親密

          如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。


          1.1 縱向間距關系

          • 縱向間距:在 Ant Design 中,通過「小號間距」「中號間距」「大號間距」這三種規格來劃分信息層次結構。這三種規格分別為:8px(小號間距)、16px(中號間距)、24px(大號間距)。


          • 增加元素:通過增加「分割線」來拉開層次。在這三種規格不適用的情況下,可以通過加減「基礎間距」的倍數,或者增加元素來拉開信息層次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是縱向間距,8 是「基礎間距」。


          1.2 橫向間距關系

          • 組合排布:為了適用不同尺寸的屏幕,在橫向采用柵格布局來排布組件,從而保證布局的靈活性。(注:柵格是另外一個模塊的內容,這里不贅述。)


          • 復選框內:在一個組件內部,元素的橫向間距也應該有所不同。


          2. 對齊

          正如「格式塔學派」中的連續律(Law of Continuity)所描述的,人類的視覺系統往往傾向于將看到對象的直線繼續成為直線,曲線繼續成為曲線。在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。

          格式塔學派(德語:Gestalttheorie):是心理學重要流派之一,興起于 20 世紀初的德國,又稱為完形心理學;主張人腦的運作原理是整體的,「整體不同于其部件的總和」?!浴妇S基百科」


          2.1 文案類對齊

          如果頁面的字段或段落較短、較散時,需要確定一個統一的視覺起點。


          • 推薦使用:標題和正文左對齊,使用了一個視覺起點。

          • 不推薦使用:標題和正文使用了兩個視覺起點,不推薦該種對齊方式,除非刻意強調兩者區別。


          2.2 表單類對齊

          • 冒號對齊:冒號對齊(右對齊)能讓內容鎖定在一定范圍內,讓用戶眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。


          2.3 數字類對齊

          為了快速對比數值大小,建議所有數值取相同有效位數,并且右對齊。


          3. 對比

          對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。

          注:要實現有效的對比,對比就必須強烈,切不可畏畏縮縮。


          3.1 主次關系對比

          為了讓用戶能在操作上(類似表單、彈出框等場景)快速做出判斷, 來突出其中一項相對更重要或者更高頻的操作。

          注意:突出的方法,不局限于強化重點項,也可以是弱化其他項。


          • 需要區分主次場景:


          • 不需要區分主次的場景:「通過」和「駁回」都使用次按鈕,系統保持中立。在一些需要用戶慎重決策的場景中,系統應該保持中立,不能替用戶或者誘導用戶做出判斷。


          3.2 總分關系對比

          • 總分關系:通過調整排版、字體、大小等方式來突出層次感,區分總分關系,使得頁面更具張力和節奏感。


          3.3 狀態關系對比

          常見類型有「靜態對比」、「動態對比」。


          • 靜態對比示例:用不同顏色的點,來表明不同狀態。


          • 動態對比:鼠標懸停時,該項和其他項呈現出明顯不同的視覺效果,響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比,以便用戶更好的區分信息。


          4.重復

          相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。


          4.1 重復元素

          重復元素可以是一條粗線、一種線框,某種相同的顏色、設計要素、設計風格,某種格式、空間關系等。


          • 線框重復:


          • 設計要素重復:


          • 文案格式重復:


          ② 交互操作高效

          包含 Ant Design 的設計原則有:『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。

          「交互操作高效」的重要性體現在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題,卻忽略用戶能否理解流程如何操作,那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短,而是用戶的心理時間是否太長的問題,就像我們打游戲往往會覺得時間過的很快,但是在等待頁面加載時卻不耐煩。


          1. 減少打斷

          能在這個頁面解決的問題,就不要去其它頁面解決,因為任何頁面刷新和跳轉都會引起變化盲視(Change Blindness),導致用戶心流(Flow)被打斷。頻繁的頁面刷新和跳轉,就像在看戲時,演員說完一行臺詞就安排一次謝幕一樣。

          變化盲視(Change Blindness):指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物,眼球運動、地點的變化,或者是缺乏注意力等?!浴毒S基百科》

          心流(Flow):也有別名以化境 (Zone) 表示,亦有人翻譯為神馳狀態,定義是一種將個人精神力完全投注在某種活動上的感覺;心流產生時同時會有高度的興奮及充實感。——摘自《維基百科》


          • 氣泡提示:對于操作的反饋是必要的,下文會提到,但是為了減少打斷用戶,輕量級的反饋氣泡提示即可。


          • 輸入覆蓋層:鼠標「點擊」圖標觸發;鼠標「點擊」懸浮層以外的其他區塊后,直接保存輸入結果并退出。不用彈窗或跳轉的形式編輯,只需要在觸發圖標附近彈出浮層即可,這樣避免用戶視動線的混亂,減少打斷用戶操作的心流。

          2.縮短步驟

          正如 Alan Cooper 所言:「需要在哪里輸出,就要允許在哪里輸入」。這就是直接操作的原理。eg:不要為了編輯內容而打開另一個頁面,應該直接在上下文中實現編輯。


          常規的編輯模式,界面都會跳出一個彈窗或者是一個頁面跳轉,無形之中用戶走了更多的流程路徑,如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。

          • 文字鏈/圖標編輯:

          狀態一:在可編輯行附近出現文字鏈/圖標;

          狀態二:鼠標點擊「編輯」后,出現「輸入框」、「確定」、「取消」表單元素,同時光標定位在「輸入框」中。


          • 多字段行內編輯:編輯模式在不破壞整體性的前提下,可擴大空間,以便放下「輸入框」等表單元素;其中,在 Table 中進行編輯模式切換時,需要保證每列的不跳動。


          • 拖放圖片/文件:在早前很多產品在上傳功能上,都是跳出彈窗再選擇文件上傳,現在基本都可以實現拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。


          • 模糊搜索:系統根據用戶所查詢的關鍵詞,智能匹配可能的結果。


          • 定時自動更新:新增的列表項「高亮」,持續幾秒后恢復正常。不需要用戶手動刷新,減少不冗余的操作。


          3.避免回憶

          人們在思考的時候,是需要依靠大腦神經元之間相互傳遞信號,而回憶是需要調用更多的的神經元傳遞信號,簡單地說就是非常費腦子。


          • 搜索歷史:搜索歷史的功能,可以減少用戶的回憶,使得整個體驗更加輕松愉悅。


          4.信息降噪

          根據費茨法則(Fitts's Law)所描述的,如果用戶鼠標移動距離越少、對象相對目標越大,那么用戶越容易操作。通過運用上下文工具(即:放在內容中的操作工具),使內容和操作融合,從而簡化交互,起到信息降噪的作用。

          費茨法則 :到達目標的時間是到達目標的距離與目標大小的函數,具體:。其中:1.設備當前位置和目標位置的距離(D);2.目標的大小(W)。距離越長,所用時間越長;目標越大,所用時間越短。


          • 列表嵌入層:將列表為多層級時,隱藏弱層級列表內容,可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內容,鼠標懸浮即可展開。


          • 標簽頁:標簽也換可以將信息內容進行分類,讓用戶更易理解。


          • 漸進式展現:用戶在填寫表單時,會根據當前錄入的數據,展現下一項需要填寫的內容,這樣的展現方式可以屏蔽掉無關緊要的內容。


          • 懸停即現工具:鼠標懸停時,出現操作項。這樣將不重要信息或者操作隱藏起來,不會干擾到用戶瀏覽其他重要內容。


          ③ 系統反饋即時


          包含 Ant Design 的設計原則有:『 簡化交互 』『 巧用過渡 』『 即時反應 』。

          「系統反饋及時」的重要性體現在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣,用戶進行了操作或者內部數據發生了變化,系統就應該立即有一個對應的反饋,同時輸入量級越大、重要性越高,那么反饋量級越大、重要性越高。


          1.實時反饋

          雖然反饋太多(準確的說,錯誤的反饋太多)是一個問題,但是反饋太少甚至沒有反饋的系統,則讓人感覺遲鈍和笨拙,用戶體驗更差。

          牛頓第三定律 :當兩個物體互相作用時,彼此施加于對方的力,其大小相等、方向相反。——摘自《維基百科》


          • 實時預覽:根據用戶的輸入,提供關于密碼強度和有效性的實時反饋提示。


          • 文字鏈熱區:當懸浮在 ID 所在的文字鏈單元格時,鼠標「指針」隨即變為「手型」,單擊即可跳轉。


          2.過渡反饋

          人腦灰質(Gray Matter)會對動態的事物(eg:移動、形變、色變等)保持敏感。在界面中,適當的加入一些過渡效果,能讓界面保持生動,同時也能增強用戶和界面的溝通。

          Adding: 新加入的信息元素應被告知如何使用,從頁面轉變的信息元素需被重新識別。

          Receding:  與當前頁無關的信息元素應采用適當方式移除。

          Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。


          • 表格加載:網絡不好或者表格數據過多,都有可能導致加載緩慢,這時有一個小動畫可以緩解用戶的焦慮感。


          • 富列表加載:用戶在打開列表時,頁面無法做到一次性加載所有的數據,同時有為了減少翻頁的繁瑣操作,就有了下拉自動加載的。


          • 頁面加載:當用戶訪問的頁面體量過大時,系統會通過給出倒計時或完成百分比,來緩解用戶焦慮,并且給用戶友好可控的感覺。


          • 滑入與滑出:可以有效構建虛擬空間。  


          • 折疊窗口:在視圖切換時,有助于保持上下文,同時也能拓展虛擬空間。


          • 對象增加:在列表/表格中,新增了一個對象。


          • 對象刪除:在列表/表格中,刪除了一個對象。


          • 對象更改:在列表/表格中,更改了一個對象。

            • 狀態一:用戶更改了「詳情」中的值;

            • 狀態二:用戶點擊「保存」后,詳情所在的網格出現「黃底」,表明該對象發生了更改;

            • 狀態三:底色持續幾秒后,恢復正常。


          • 對象呼出:點擊頁面中元素,呼出一個新對象。


          3.結果反饋

          用戶常常會疑惑自己的操作是否成功了,哪怕是失敗了也是需要系統反饋,這樣才能安心進行下一步的操作。


          • 頁面反饋結果:


          • 氣泡反饋結果:


          ④ 用戶自由可控


          包含 Ant Design 的設計原則有:『 提供邀請 』『 足不出戶 』『 即時反應 』。

          「用戶自由可控」的重要性體現在 交互前對下一步操作的預判;交互時 不論操作后的結果多嚴重都要允許用戶自主決策;以及交互后 能否對自己的操作結果反悔。


          1.未來預判

          很多富交互模式(eg:「拖放」、「行內編輯」、「上下文工具」)都有一個共同問題,就是缺少易發現性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示,以表明在下一個界面可以做什么。  這樣人機交互的過程往往更加自然、順暢。



          • 點擊刷新:對于設計師而言,最常見的例子要屬花瓣了,我們時長會沉浸在我們瀏覽的瀑布流卡片中,如果系統強行刷新當前頁面,用戶很有可能迷失。邀請用戶主動更新,既不會錯過新的消息,又不會導致我們的心流被打斷。


          • 未完成邀請:用戶在當前頁面無法完成登錄操作,為了減少用戶迷茫的焦慮感,系統告知用戶點擊“更改”鏈接,可以去向何處。


          • 懸停邀請:鼠標「懸停」時,出現「選擇此模板」的按鈕。


          2.自主決策

          雖然系統中缺少不了一些危險操作或者不可逆操作(eg:刪除、重置、重裝系統等),但是仍然要用戶自主決定是否繼續,我們能做的就是讓用戶再三確認。


          • 彈窗提示:雖然彈窗打斷用戶心流,但是對于重要的操作,這樣是最保險的方式。


          • 刪除知識庫提示:是釘釘中,刪除「知識庫」這一重要內容,是不可逆的,系統需要用戶謹慎操作。


          3.準許反悔

          如果說「自主決策」中提到的案例都是不可逆的,那「準許反悔」的后果嚴重性會弱一些,系統對用戶的操作沒有那么強的阻斷性,所以要準許用戶反悔的,


          • 刪除撤銷:用戶點擊「刪除」后,直接操作;出現 Message 告知用戶操作成功,并提供用戶「撤銷」的按鈕;用戶進行下一個操作或者 1 分鐘內不進行任何操作, Message 消失,用戶無法再「撤銷」。



          『 Ant Design的優點與缺點 』


          ① 優點


          1.助初創團隊快速產品快速上線

          Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功,但是能幫助業務產品『正確的成功』或者『正確的失敗』。”

          如果團隊有一個產品idea,我們需要通過最少的資源開發此產品并投入到市場中,通過聽取用戶反饋,驗證idea是否可行,快速迭代最終做出更完善的產品。但理想是美好的,但現實是骨感的,在前期研發的過程中通常會出現兩個情況。創業團隊沒有足夠的設計資源和時間,前幾個版本的產品通常用戶體驗非常差,這種情況體驗差有可能讓用戶放棄這款產品。創業團隊沒有好的方法論和協作模式,需要磨合,設計和開發進度一延再延,結果錯過了風口,市場被競品搶占,還沒上線就倒閉了。

          Ant Design提供了一套完整的界面實現方案,即有代碼框架能直接拿來提高開發效率,每個界面組件都經過螞蟻金服多個項目的考驗,具備優秀的用戶體驗。用Ant Design來做0-1,能快速發布用戶體驗優秀的產品,聽取用戶反饋,快速迭代。


          當然,創業是九死一生,市場和用戶口味都充滿了不確定性,誰也沒有能力保證產品是否成功,但是只要你能高效的產出質量優秀的產品,不斷試錯,說不定以后就能成功。


          2.減少設計和開發的不確定性。

          用 Ant Design 就能高效的產出高質量的產品,減少設計和開發的不確定性。

          因為我們公司就使用了 Ant Design 的系統,所以時常會與前端小伙伴溝通,以下都是他們在使用過程的感想。

          Ant Design 提供的大量功能比較全面且UI風格統一的組件,能幫助開發者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業務線上極為廣泛的應用場景,驅動了 Ant Design 團隊通過對使用情況的觀察匯總,整理出來了這么一個組件庫。他們的經驗積累如此之豐富,足以讓這個庫支持大部分其他前端開發者的需要。

          其設計團隊給出的設計規范相當詳細且經得起推敲,令許多其他團隊獲益匪淺。


          3.節省設計與開發的人力成本

          我見過太多宣稱自己在乎用戶體驗的公司,給用戶的產品質量確實比較高,但是自己員工內部使用的系統和管理一團糟。種種不便讓員工經常加班,情緒消極,這樣的團隊抄抄競品達到行業標準體驗還行。要想突破是不可能了,因為創新需要員工有充沛的精力和主動性,天天加班誰還有這精神。

          用 Ant Design 系統提供的設計工具和組件框架能給設計師和開發者減少負擔,能用更少的時間呈現給用戶體驗好的產品。這樣帶來的好處不僅僅是設計師和開發者覺得少加班成就感高而幸福,他們重新恢復活力和激情能做出更有創意和競爭力的產品,給公司帶來更大的收益,這是一個三贏的結局。


          ② 缺點


          1.無法根據業務場景定制組件,靈活度不夠

          一定有小伙伴會有這樣的疑問,目前市面上有這么多的第三方設計規范,例如 Ant Design ,Element UI,有必要自己造輪子做一遍嗎?

          這里要視情況而定,如果公司產品是初創期,而且研發人手不足,那確實沒有必要自己造輪子。反之在資源足夠的情況下,是有必要設計團隊重新做一套屬于自己產品的規范組件庫的,因為B端自身的業務性決定了市場上沒有萬能的設計規范,那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范,在此基礎上進行修改,效率很低,適配的復雜度和重新開發相差無幾。


          2.組件細節深入度不夠,只能“將就”使用

          對于比較普通的設計解決方案是可以的,但是 Ant Design 包含的組件細節仍有不足,畢竟 Ant Design 沒必要投入過多的精力在組件細節深入度上,規范定義的越是精細,對于產品組件而言可延展性就越差,限制也會越多。而 Ant Design 只需要解決80%企業,80%的通用問題即可。


          3.競品同質化嚴重,視覺上無法脫穎而出

          當市場大部分產品都在使用 Ant Design 設計系統時,產品的同質化就會很嚴重。為了避免這種情況發生,我們就有必要從設計語言、設計原則、設計組件三個部分開始,設計自己的規范。那些大廠的成熟的組件庫該如何用呢?我認為應該把它當成一個字典,有不會的地方,可以去參考人家的成熟的解決方案。



          『 總結 』


          這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優缺點。當然也重點總結了一下,設計師如何運用 Ant Design 的設計原則,可以將這些原則分為四類:視覺層級清晰、交互操作高效、系統反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則,并將其靈活運用到設計工作中。




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

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


          文章來源:人人都是產品經理    作者:菜菜不甜

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

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

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


          體驗度量深度實踐

          ui設計分享達人

          前言


          體驗目標的達成,需要合理且客觀的度量方法,體驗度量的實踐,需要度量框架的有力支撐。提高競爭優勢,提升客戶態度,保障產品可以即時的響應客戶的需求。本篇文章的實踐方法全部來源于酷家樂B端產品業務中的實踐案例,重點在于度量框架的深度實踐,如果我們的經驗能夠幫助到您,歡迎交流討論。 


          一、體驗度量怎么做?


          “體驗”是用戶純主觀的感受,從這個情況來看是很難被度量的?!绑w驗”同時也是一個比較抽象的概念,如果把一個抽象的概念拆解成一個可執行的策略,拆解的過程如何保證策略的有效性,是我們一直在思考的。面對酷家樂工具型、SaaS型、平臺型并存的產品體系,且存在錯綜復雜的用戶需求和業務訴求。在這樣的前提下對方法的確立需要更加的冷靜。 

          如何確定方法?我們需要的是一個完整的度量框架,以及能夠聚焦用戶體驗層為驅動,分解并有力的去解決問題。經過大量的實踐和驗證得到,抓住一個擊破點作為產品體驗提升的目標,并一種合理的方式進行推導和驗證,這是一種最直接度量體驗的標準流程性方式,這里的目標必須是:


          • 體現用戶主觀感受或者具有行為驅動的目標。

          • 基于業務目標定義+用戶訴求了解后,得到的以用戶為中心驅動的用戶行為。



          二、度量模型怎么選?


          面對設計圈內已經存在的和部分大廠創造的度量模型,評估優劣后最終我們選取了HEART模型。因為HEART是個比較全面和具備更多擴展性的分析框架,同時足夠的權威和標準,而且市面上的模型基本都被HEART的五維囊括。除了這些考慮因素外,再給出以下幾個明顯的優勢點:


          • 1、HEART同時涵蓋了定性和定量的不同數據維度。

          • 2、HEART框架同時包含了:宏觀和微觀的層面

          • 3、HEART模型并不單純的再定義體驗質量,同時也鏈接了商業價值。把用戶體驗的原則和收益驅動的指標關聯在了一起。


          undefined


          三、HEART模型簡介


          1.什么是HEART模型?


          多個大廠利用HEART模型拆解框架得到了深度結合業務的度量框架。是個比較全面和具備更多擴展性的分析框架。HEART是GOOGLE公司在實踐中提出,基于產出更好產品為目的,用來衡量產品整體體驗的度量評估模型。 

          它包含五個維度Happiness(愉悅度)、Engagement(參與度)、Adoption(接受度)、Retention(留存度)、Task success(任務完成度)組成,是Google用戶體驗研究團隊在實踐中為了準確的度量用戶體驗而總結提煉出的一個框架。 


          2.HEART模型的特性與應用場景


          目前市面上還存在PTECH、TEENS等體驗度量模型,而HEART模型的特性在于它”以用戶為中心“進行度量,同時度量維度全面,既包含宏觀的愉悅度,也有微觀的任務完成率,同時關注產品上的留存率,與業務目標保持緊密。在評估方式上,既有定性評估的愉悅度,也有定量評估的參與度、留存率等,可對用戶使用產品情況做一個完整的評估。 

          undefined



          四、HEART模型的詳細拆解指南


          undefined


          第一步:確定體驗目標

          體驗目標是體驗度量的開始,準確的目標決定了度量的質量。要提煉出準確而有效的體驗目標并不容易,通常會引入產品功能等業務因素,使體驗目標不夠單純,拆解出來的指標所反映的數據也很難歸因到體驗。故復雜項目可提煉多個體驗目標相互補齊,但每個都必須準確而具體。 

          那么如何確定體驗目標呢?

          體驗無法脫離于具體的產品服務存在,用戶的整體體驗感知積累于每一個接觸觸點,大多觸點常規而平庸影響不大,必須識別出達成業務的關鍵觸點進行深入分析,已提煉出體驗目標。 

          整體的思路是:首先分析業務目標,并就業務目標所落地的產品服務的鏈路進行拆解,分析鏈路后,找到其中對體驗有決定性影響的因素,提取其因素后,即形成體驗目標。


          undefined
          1.確定業務目標
          業務目標是整個產品服務的最終目的,體驗作為產品服務的重要評估維度,需要與之對齊。業務目標與所選取項目范圍有關,從整個產品到特定功能模塊,或者某個行為鏈路都可作為參與項目。根據選取的項目來確定業務目標,如“保持產品新舊改版的平穩過渡,降低改版造成的斷約率”、“提升用戶自主解決問題的能力,降低運營服務的壓力”等。注意業務目標與產品目標的差異,后者是對前者的產品化闡釋,可以具體到某項產品服務目標上。產品目標和體驗目標可以共同服務于業務目標,實現價值的達成。 

          ?示例:
          業務目標:在設計工具中商品素材的查找效率,輔助家裝設計師快速構建方案,提升其簽單率 
          產品目標:優化現有商品素材的查找邏輯,降低家裝設計師查找商品素材的成本 

          2.拆解產品鏈路
          產品目標需借助于功能鏈路來達成,將該目標達成過程的邏輯呈現出來,并分析其跳轉路徑、操作觸點,就是鏈路拆解過程。整個鏈路過程是用戶價值的直接承載,任何一個觸點的失效都將影響到整條鏈路順暢和效率。就鏈路整體而言,觸點越多、鏈路越長,操作成本越大;就某個具體觸點而言,其效率、易用性、易理解度也將影響整體的價值傳達。 

          為完整的拆解出整個產品鏈路,需要從“用戶側”、“系統側”進行分析,用戶側代表用戶視角下的功能使用流程,是主要考慮的維度,體現了以用戶為中心的設計思路;系統側代表系統在用戶交互過程中的需要執行的行為,是系統邏輯的直接體現。兩者的交互作用,將完整表達“信息”的流轉過程,最終作用到產出物上。 

          ?示例:商品素材搜索鏈路




          3.分析觸點并提取決定性因素

          選取對整個鏈路有重要影響的觸點進行設計維度上的分析,以找出決定觸點目標達成的決定性因素,這個決定性因素就是我們體驗上需要著重優化的點。在尋找“決定性因素”的過程中,避免將系統性能、業務功能、業務信息因素篩選出來,需要聚焦在設計維度上,諸如交互行為、界面布局、信息呈現、系統反饋等。 

          ?示例: 
          “確認輸入行為”、“搜索結果分類”、“不同分類的區塊劃分”、“結果數量”等。 

          對已拆分出來的各種設計因素來說,哪些算是決定性因素呢?一個很簡單的判斷方式是:反向判斷,即假設缺失這個設計因素,或不完整是否會對該觸點有“阻塞性”影響。 

          如有嚴重阻塞影響,則證明該設計因素很大程度上決定了觸點的目的達成,屬于決定性因素;若設計因素有中等的、輕微的影響,則可能不是本次優化的重點,不作為決定性因素。如“搜索結果的分類”影響用戶對搜索結果的信息獲取,是決定性因素。“確認輸入行為”是常規設計行為,不算決定性因素。 
          當然,具體問題具體分析,在不同的功能場景下,同一種行為的影響程度可能不同。 

          需要注意的是,決定性因素的選取必須在具體的觸點中才有意義,脫離后無法判斷是否有阻塞性影響。另外,某些設計因素是否是決定性可能在跨觸點中體現出來,需要聯系整個鏈路進行交叉分析確定。




          4.體驗目標的提取與表述

          找到決定性因素及其為什么決定性的原因后,需要為其設定一個設計目標,來指示應向什么方面優化這個決定性因素。決定性因素只是現有功能的一種解法,可能存在其他更優解法或優化方向,我們需要基于決定性因素概括出“設計目標”,以新的設計目標來指引我們的優化設計。 

          ?示例: 

          決定性因素“搜索結果的分類”,引申出的設計目標為“更清晰的信息層級”、“更完整的信息”。



          通過鏈路觸點的分析,決定性因素的提取,設計目標的匹配,我們已對設計優化方向有了準確的了解。這個時候需要從設計師視角做一個完善而精準的”體驗目標“的表述。


          一個體驗目標需要與具體設計場景關聯后,才能產生具體而明確的價值,即設計目標落地到場景中后產生價值,表述思路是:在某個具體的鏈路觸點中,我們期望怎么達成這件事。可通過格式進行填寫: 
          使/什么用戶/用什么  做什么事/設計目標/完成什么事 

          ?示例: 
          家裝設計師  使用搜索功能  搜索素材時  對結果展示清晰的信息層級  來快速找到需要的商品 


          第二步:確定度量維度

          引入HEART模型的重要原因,正在于它的度量維度。由于它的度量維度多方位的表述了產品的使用情況,度量緯度不是一種標準,是一種分析框架和角度,決定了體驗目標應該被如何度量,進而影響信號的確定和指標的拆解,因此度量維度的選取至關重要。 

          HEART提供了豐富的五個維度,根據其定義,提供了你幾個可以衡量的視角。在實踐過程中,因每個體驗目標所對應的觸點的場景、交互、產品目的不同,我們只需要找到符合定義的維度即可。反過來看,一個與體驗目標不相關、不匹配的度量維度不能很好地度量體驗。 

          需要注意的是,HEART模型因其維度的廣泛定義,不僅僅可用于體驗目標的度量,也可以對產品目標、業務結果進行度量,對體驗目標的度量因要從產品因素中剝離出體驗問題,相對來說較為復雜,是本次敘述的重點。



          第三步:確定信號

          首先信號可以被定義為是一種信息的載體,其承載的信息往往反映的是用戶對體驗目標的成功或是失敗的結果,對信號的準確獲取將直接影響到對下游指標的確立。 

          信號的確定需以上游度量維度為標準范圍并引用體驗目標為重要判斷依據,避免過度發散,保證精準規范的同時,去結合當前有無體驗變量基準值作為條件,并使用成功或者失敗的結果來評估體驗目標的達成情況,最終提煉出信號。 


          以度量維度為標準并引用體驗目標確定信號

          通過逐一對度量維度進行體驗變量提取,有基礎值則進行對比的方式,無基礎值則使用趨勢的表述方式,結合業務目標的情況下,去概念性假設體驗目標的正向或反向結果,最終通過標準的格式提煉出信號,信號的提煉的可以用固定的格式進行書寫: 格式:用戶   用什么   做什么   體驗變量   趨勢&數值


          尋找體驗變量
          基于HEART模型的整個分析框架,拆解出最高頻和貼合體驗目標的常見體驗變量庫。在此框架的指導下,可以快速尋找需要的體驗變量。 

          ?示例: 
          (體驗變量:易操作度;有基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 達到4.2
          (體驗變量:易操作度;無基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 上升

          確定信號的注意事項
          ①信號的成功或失敗要能在行為或態度上準確的體現出來,失敗信號可能比成功更容易定義; 
          ②信號要易于被追蹤; 
          ③信號的敏感度要高,易于被檢測; 
          ④信號應與目標有高的相關度,同時避免被其他因素影響; 
          ⑤一個目標可能對應多個信號; 

          第四步:確定指標

          指標是衡量目標的參數,用于準確的描述目標。但通常很難直接從目標中確定出指標,需要借助于對信號的分析。信號是信息的載體,其中包含著變量信息,提取其中變量信息,即可獲得一個初始指標。 
          初始指標反映了客觀的原生數據,需要對原生數據做處理后,可得到一個能精準描述體驗目標的指標。 



          對數據進行處理

          體驗變量所直接產生的屬于原生數據,而一組數據通過某種分析加工后,可以成為一個更有價值的信息,如均值、中位值。選擇對數據進行哪種方式處理,受目標的影響較大,每一種數據處理方式,都有指向特征,通過與目標的匹配,可以選取出合適的數據處理方式。




          確定指標的注意事項

          ①指標應與目標和信號密切相關,指標越明確越清晰越好; 
          ②標應方便被持續追蹤,對信號的描述更敏感,方便做A/B測試。 


          五、總結


          看似復雜的體驗度量監控指標的拆解,可以概括為“體驗的問題定位”——“體驗的目標度量”——“體驗的客觀追蹤”。 

          1.“問題定位”是監控目標的根據,必須來源于具體的業務鏈路才有被分析和量化的可能,它是體驗問題在業務鏈路中被抽取出來的關鍵,并轉化為可度量的指標來進行監控,最終為后續數據洞察和可視化提供準確的數據來源,否則流于主觀,監控體系建立在不可靠的體驗目標之上,當然也就不可能有助于解決體驗問題。 

          2.而“目標度量”所運用的HEART模型作為度量維度,相當于一種體驗的定義標準,闡釋了什么是它所定義的用戶體驗。HEART模型以其全面的度量維度,能很好地實踐這一點。必須注意的是,對HEART模型下的五個度量維度的細化闡釋可能受不同產品特性、產品階段影響而不同,最終轉化出不同的客觀指標。 

          3.“客觀追蹤”是對在度量標準下的客觀變化的捕捉,捕捉其變量特征,建立常態指標,成為可靠的可監控的指標。 

          4.另外,除了準確的定位、度量、轉化的邏輯推導外,參考業務目標進行范圍收斂,也是非常重要的工作,它影響著每一個推導環節,以避免偏離產品方向,有效的過濾弱關聯或無關聯的因素。

          文章來源:站酷    作者:酷家樂UED

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

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

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



          從前端數字化到后端數字化,數字化的路到底該怎么走?

          ui設計分享達人

          從去年到今年,眾多行業都遭受到疫情這只黑天鵝的沖擊,然而,中國經濟也最快的從疫情中恢復到常態,其實這一過程,離不開數字化。從今天來看,數字化幾乎是各行各業都在試圖接受的一個進化路徑。

          早前YC中國創始人及首席執行官陸奇認為,數字化是把人們需要的信息獲取后存在一個特定的介質上,使得信息本身與這些信息所描述的實體分離開來,進而被大規模、高效地處理后又被傳遞回人們所使用的終端,被進一步利用的過程。

          他指出,在今天的知識經濟時代,它是由大規模的信息、數字化來驅動的。

          在過去60多年的歷史上,從第一代IBM為代表的單板個人電腦;第二代微軟、蘋果再到第三代、第四代的PC與移動與云,再到即將進入的第五代AI/5G +邊緣計算的早期,數字化進程一直是由計算平臺來驅動的。

          從陸奇的觀點來看,任何一代計算平臺,都有前端和后端。前端永遠由交互的模式來驅動。

          包含鼠標、鍵盤到手指等交互入口。其次,包含數字化的終端設備,比如個人電腦到智能手機等移動終端。前端永遠由交互的模式來驅動。

          而驅動后端演進的是計算資源規模的擴大提高,具體而言是運算信息、存儲信息和傳輸信息(網絡)的能力水平的提高。計算資源規模的提高也意味著數字化廣度和深度的擴展。

          一、前端數字化:從產業痛點入手,從體驗改善突圍

          從今天來看,借助計算平臺的發展,交互入口的演進,前端數字化與后端數字化已經在各行業演進。

          比如房產市場貝殼等玩家的VR看房、互聯網家裝市場的VR裝修、服務機器人市場的AI機器人、新能源汽車市場的換電模式(體驗交互終端)、手機廠商的智慧大屏等就是典型的前端數字化的案例。

          在今天,后端大規模的云計算開始把計算、存儲作為一種服務形式,讓每個企業在門檻很低的情況下,充分享用數字化所帶來的能力。

          后端的數字化創新更多是計算資源規模帶來的數據化驅動。

          比如說,各行各業與互聯網大平臺結合建立的數據化、以及互聯網巨頭借助自身的云計算資源平臺布局,帶動千行百業上云, 解決流程與業務創新。

          從前端與后端的數字化,或能窺視數字化轉型的趨勢性方向。

          互聯網平臺結合VR技術的應用在今天已經非常普遍,比如VR購物、VR看房以及互聯網家裝行業的VR裝修等玩法都相對成熟了。

          當前從國美打扮家到土巴兔、齊家網等互聯網家裝平臺,都加入了VR技術,能讓用戶有直觀獨特的3D全息家居體驗,用戶除了能全方位查看全息影像,觀看戶型展示,更能與全息影像展開交互。

          而VR看房也應用到了租房市場。傳統的線上看房,都是采用圖片和視頻的方式,但線下看房要花費大量的精力體力。從行業痛點來看,房地產互聯網廣告平臺模式最大的弊病就是滋生假房源,真實性難以判定。

          而互聯網房產與VR整合在一起,通過三維實景重建,建立3D化的體驗,帶來了多重體驗改善——它首先是讓消費者獲得沉浸式的看房體驗,自由行走在VR場景內,查看每一處細節。

          其二是,無需親自到現場體驗,就可以獲得所見即所得的現場體驗。其三,基于空間三維數據,以AI生成一種更具交互性的VR視頻,解決了房源的真實性的問題。

          這其實是一種典型的前端數字化創新,它通過VR這種新型的數字化終端與房地產、裝修等行業結合,一改過往看房不便利、假房源眾多、信息隱私泄漏等眾多短板。

          再看AI機器人市場。

          我們知道,工業機器人可以代替一部分人進行重復性的勞動,然而由于指令循環式的機械化,無法應用于家庭、商場、醫院等復雜環境中。

          2021年央視春晚上,紅色機身搭配祥云圖案的「拓荒牛四足機器人」亮相,讓服務型機器人進入大眾視野。

          這類AI機器人關鍵是解決了兩個核心的技術難題:其一就是賦予機器人感知的能力。其二是給機器人做好整個任務的長鏈條規劃。具備對指令進行解析,進行分層任務分解的能力。

          通過這兩個能力的完善,它就有機會針對行業的痛點改善交互模式服務于眾多的行業之中。比如在機場、銀行、購物中心等商業場景中,機器人能夠幫助企業減少人力資源支出,幫助人們快速獲得咨詢回應。

          某種程度上,這類探索更多是聚焦于如何更好的服務于人的問題,但如何利用機器人來更好地服務到社會更多細分群體,是它未來的考驗。

          此外,在新能源汽車行業,蔚來的換電布局是基于行業的電動車充電痛點而挖掘出來的新模式,在今天,電動汽車的電池電量焦慮無疑是當前消費者購買電動車的最大的焦慮與痛點。

          對此,蔚來提出了車電分離、電池租用的商業模式,背后的核心是蔚來把換電站、充電樁、電池、專員通過數字化搬到了云端,實現線上線下同步。它本質上是在電池技術短時期內難有突破的現實條件下,拿出的一種基于解決車電分離的問題、快速換電的新解決方案。

          再看電視行業。

          在今天,手機與PC已經搶奪了太多時間,人們正在形成用手機、平板看電視的習慣,電視的發展前景在哪里?

          從整個行業來看,電視行業經歷了一輪曲線發展,在2014年左右,中國智能電視行業的發展達到頂峰。隨后在2016年進入低谷。

          但2019年華為智慧屏之后,小米、海信、TCL等相繼發布首款智慧屏。智慧屏的出現,讓電視行業進入到家庭互聯網的時代。

          在雷鳥科技CEO李宏偉看來,電視行業發展經歷三個階段,第一階段是以顯示技術為主的傳統電視,第二階段是以觀看在線內容為主的智能電視,第三階段則是成為一部55英寸手機的智慧屏。

          雷鳥科技的智慧屏玩法是融合在大屏電視上建立了一個短視頻頻道,即當用戶想看短視頻或其他場景的時候,它可以旋轉成一個豎屏。

          某種程度上,智慧屏是在傳統電視的基礎上,為用戶提供更豐富、更個性化的使用體驗(如視頻通話、AI健身、實時互動教育等),重構了人機交互。

          綜上從VR看房、AI服務機器人、VR裝修,智慧屏、蔚來換電站等案例中,其實都能看到前端數字化重做的理念。

          它們都是看到了行業的痛點與短板,以及新階段的消費需求(比如貝殼看到了平面圖片的假房源問題,智慧屏玩家們看到了大屏需求與消費形態的轉變),然后借助了新的終端技術,新的計算平臺玩法嫁接,推動行業游戲規則的改變。

          前端數字化更傾向于從一個產業原本存在的痛點與問題入手,通過終端交互的創新,帶動用戶體驗的升級,試圖打破原本產品業務增長的瓶頸,通過體驗創新帶動新需求。

          二、后端數字化:借助數字中臺、云計算、SaaS等實現B端生意突圍

          如果說前端數字化更多面向消費互聯網賽道,而后端數字化創新則更多是面向B端產業互聯網賽道。

          在今天來看,從國外亞馬遜微軟,到國內BAT、華為、字節跳動,它們當前的戰略是集體To B,爭奪云計算賽道蛋糕,這是平臺型巨頭帶動后端數字化的一個側面。

          在當下這些巨頭玩家們的布局戰略來看,存在諸多共性:

          首先是巨頭們To B都是主打技術輸出,賦能各行各業。亞馬遜、阿里云,騰訊云、百度云、字節跳動火山引擎等都在以技術輸出、賦能各行各業的方式在To B市場跑馬圈地。

          其次,都基于自身業務發展特色提出了相關的服務與解決方案——當前,一方面,騰訊云有 “數據驅動” 解決方案、阿里云有 “推薦算法” 解決方案,火山引擎有“智能增長技術” 。

          另一方面,BAT字節跳動等眾多大廠開放了比如釘釘、企業微信、飛書、如流這些工具,可以免費被中小企業使用。

          其三是大廠憑借C端業務的巨大體量,都在輸出數據中臺。

          而從平臺商業模式的演變來看,字節跳動與騰訊、阿里等巨頭型玩家的商業化路徑有類似之處,即首先是通過入口級流量型產品聚集起規?;牧髁颗c用戶進行流量變現,然后切入B端市場,開始進一步輸出技術價值(大數據、人工智能、云服務等)。

          綜上來看,從BAT到字節跳動來看,它們就是借助了數字中臺、云計算等底層基礎設施的能力,來推動平臺數字化賦能模式與用戶增長模式。

          在目前,基于強大的數據分析能力來實現用戶精準定位,最直觀的例子是電商行業,無論是基于消費者偏好的廣告投放,還是基于對用戶群體需求行為數據分析,結合在線人群識別技術,電商APP總能精準卡準你的偏好與需求。

          此外,在技術價值輸出層面,百度騰訊等玩家也帶動了自身的云服務能力在營銷、工業、金融等多個行業成功落地。

          而傳統企業后端數字化的本質就是把人工、線下的經營模式搬到線上去,通過互聯網軟件技術來實現獲客與增長。比如傳統的企業增加了ERP系統、CRM等。

          而SaaS是后端數字化的典型。所謂SaaS,也就是軟件及服務,很多中小企業都會選擇SaaS提供企業服務。

          早在2016年知識付費興起,作為創投的一個新風口,當時的互聯網行業里紛紛涌現了像得到、喜馬拉雅、千聊、荔枝微課等知識付費平臺。

          但發展到后來,教育培訓與知識付費費行業越來越傾向于需要一個專業化的工具來實現內容的獲客引流。而知識服務SaaS平臺就這樣應需求而生。小鵝通、千聊、荔枝微課是其中的典型玩家。

          小鵝通是基于微信生態的SaaS服務工具,客戶可以基于這個工具在微信里運營私域流量,打造自己獨立的知識店鋪,圍繞著教育與知識付費業務,實現引流獲客、線上用戶運營,幫助商家打造完整的業務閉環。

          同類型的還有千聊和荔枝微課,它們作為知識支付平臺工具,可以通過SaaS系統,幫助創業者建立自己的知識商店。

          在SaaS服務工具中,CRM的普及化程度相對較高。從字面意義來看,企業用CRM來管理與客戶之間的關系,從而支持有效的市場營銷、銷售與服務流程。

          它的本質是把企業的組織架構,業務流程,運營模式等通過軟件系統的形式固化下來,是一種創新的企業管理模式和運營機制。

          由于CRM是企業面向外部銷售、客戶服務的部分,在數字化過程中,它與業務增長具備直接關聯性,也因此最快被企業接受。

          國內企業服務領域機構T研究發布了《2021中國CRM數字化全景實踐研究報告》,報告指出,在經歷了“疫情”黑天鵝事件后,中國市場中的CRM品牌反而逆增長趨勢。

          特別是在大量業務必須線上化、數字化加劇的雙重驅策下,CRM成為了企業抵御風險、保持增長、以客戶為中心的轉型必要選項。

          SaaS服務工具是數字化轉型的大勢下一股代表性的力量,他們為企業提供一種獲客引流的數字化工具,增加了與客戶接觸的觸點。

          有業內觀點認為,傳統企業軟件之所以到了規?;鲩L的天花板,是因為沒有解決服務產能問題,而SaaS的運營本質是服務的管理,即通過高效的工具系統來支撐,圍繞獲客、留存、增長的全鏈條的服務。

          因此,SaaS服務作為數字化轉型中的一股重要力量,它試圖幫助增加客戶接觸機會,實現更高的銷售額,說到底,企業的數字化轉型,其中一個重要驅動力還是利益驅動。

          如果說前端數字化創新更多偏向于消費互聯網賽道,通過終端交互創新發力行業的痛點,那么后端數字化其實更偏向產業互聯網,更多借助了數字中臺、云計算、SaaS等底層基礎設施的變革,來實現了產業化B端生意的突圍。

          三、數字化轉型的難題、痛點以及未來

          也就是說,從計算平臺交互模式的不同,各行業企業有了前端數字化與后端數字化不同發展與創新模式。

          從趨勢來看,未來所有的企業都將成為數字型企業。如前所述,對于眾多傳統企業而言,它首先是利益驅動,這決定了它關注降本增效,但更關注投入產出比的問題。

          從業務模式來看,前端數字化更多是聚焦通過產品層面的技術創新來實現業務與產品體驗破局,而后端數字化更多是基于數字化技術(如大數據、云計算、人工智能等)來推動企業組織轉變業務模式,組織架構。

          前端數字化它更多聚焦于解決客戶的現存痛點,比如:

          • 家裝、房產相關市場可以利用虛擬現實和三維建模技術為顧客提供仿真體驗;
          • 酒店行業、汽車行業提供基于智能手機的無鑰匙產品化體驗;
          • 餐飲行業已經實現了掃碼排隊、點菜服務等。

          而后端數字化更講究從數字渠道有效觸達目標顧客的能力,目前圍繞微信、抖音快手、頭條、淘系等各個內容平臺,出現了非常多的營銷獲客的解決方案,這本質是借助后端數字化的模式來實現業務的線上化營銷突圍與創新。

          而“上云”也已成為后端數字化轉型的基礎,從產品、業務再到運營和服務等各種轉型層面,通過“上云”獲取算力資源實現對用戶需求的精準定位都變得必不可少。

          來自全球知名數據機構IDC的報告顯示,疫情加速了全球以云為中心的IT轉換,預計到2024年,全球整體云計算產業規模(包括云服務、云相關服務和云基礎設施建設)將達1萬億美元以上,而在中國將達到1000億美元以上。

          有業內人士指出,為什么傳統商超干不過電商?因為傳統商超是憑經驗來判斷市場平均需求,而電商則是精確量身定制,當前C2M、社交電商等新模式開始進一步升級了這種精準定位能力。

          對于中小企業來說,數字化轉型無疑也面臨著眾多難題,一方面是面向內部,數字化轉型需要企業運營體系、組織架構、技術開發等各種力量的配合,打破部門之間的數據壁壘與業務流通壁壘。

          盡管不少企業內部有管理升級和業務創新的需要,但在成熟的、利益機制板結的傳統大企業內部,實現起來并不容易。

          另一方面是面向外部,挑選哪家廠商的服務,平臺的解決方案是否與自己的業務適配等等,這些顧慮無形之中給企業增加了采購風險與相應的損失與誤差。

          這事實上也是對提供云服務的巨頭的一大考驗,在云市場,你給客戶提供的能力是否有助于幫助企業建立壁壘,形成差異化的競爭能力,這是關鍵。

          在今天,從工業、金融到地產、零售等都行業都已經實現不同程度的數字化轉型,實現了對業務的局部改善。但從未來趨勢看,企業到底應該走向哪一條路,其實關鍵是看其本身的模式是產品創新驅動還是服務、業務創新驅動,或者說是兩種情況的融合。

          這往往都是由企業的商業模式或生意模式決定的——產品創新驅動為主的商業模式對應的更多是以前端數字化為主,而業務銷售創新驅動的則更多是以后端數字化為核心。

          從前端數字化發展趨勢來看,它在電商、零售領域中已經應用得相對成熟了,在互聯網平臺經濟模式中,融合AR與VR技術等新一代交互終端帶來前端用戶體驗創新方面還存在巨大的機會。

          而前端數字化程度越高,沉淀的后臺數據就往往越豐富,這往往對于后端數字化的改造與升級的推動作用就更明顯。

          因此,這兩種數字化模式之間也沒有明顯的界限,在多數情況下,企業需要融合這兩種數字化模式的創新,實現前后端數字化的雙向升級,在此基礎上,再考慮投入產出比的問題。

          美國學者尼葛洛龐帝在其1996年出版的《數字化生存》一書中提到對未來的暢想:人類生存于一個虛擬的、數字化的生存活動空間,在這個空間里人們應用數字、信息等技術從事信息傳播、交流、學習、工作等活動。時至今日,尼葛洛·龐帝的很多描述已經成為現實。

          在今天,每個人手機里小小健康碼的背后,其實就是“數字化”城市治理的一種表征。

          綜合來看今天的數字化轉型,我們發現,前端數字化講究技術和需求掛鉤,與投入產出比結合,從解決實際的需求與痛點出發拉動技術與市場的創新進度。

          而后端數字化更多是基于對業務數據充分而高效的運用,實現組織經營的完全數字化,從而提升企業運營效率。

          四、結語

          數字化的大潮正在到來。

          在這個大時代下面,誰能站到浪潮之巔,就看是否能找到合適的突破口,實現從前端數字化層面的用戶體驗的突圍與升級,到后端的數據化基礎設施的指導結合起來形成綜合性的競爭力,繼而順應時代潮水流動的方向,成為潮水的一部分。

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

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



          文章來源:人人都是產品經理    作者:王新喜

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

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

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


          快來溫習!2021年占據主導的8個UI和UX趨勢

          ui設計分享達人

          今天和大家一起溫習下2021年占據主導的8個UI和UX趨勢,干貨建議提前收藏!

          沒人能夠預測未來會發生什么,但是在數字世界中,趨勢確實存在于設計師的圈子中,并且在有規律的演化中。大家可以已經看膩了不少趨勢研判文章,但是,適當總結一下當年的趨勢,把這個時間線拉長,你會覺得非常好玩。從移動端設計剛開始流行的時代,到現在,設計趨勢都發生了哪些變化呢?它們是不是又會返祖,復古?周而復始?咱們不得而知。

          雖然2021年已經過去一半,不過,今天咱們還是先Review一下2021年正在流行的幾個設計趨勢,加深一下印象吧!

          當然,各位設計師,趨勢僅僅是一種現象,想要做的出圈,與眾不同,我們必須站在趨勢之上,做出自己的創新,這樣才能在千篇一律的設計中獨當一面。

          一、UI中的3D元素

          3D 圖形越來越多地出現在 Web 和移動界面中。毫無疑問,將各種 3d 圖形應用到移動和 Web 界面是一項相當大的挑戰,需要良好的技能和藝術眼光才行。在我們的 UI/UX 設計中添加 3D 元素有很多好處:

          • 讓用戶更好的理解設計意圖和元素
          • 讓用戶流程的設計更加輕松有趣
          • 可以實現360 度的演示
          • 3d 元素看起來對用戶更具吸引力,從而觸發他們的長期參與

          ByMako Tsereteli

          二、玻璃擬態(Glass Morphism)

          玻璃擬態是大多人更喜歡的最新UI設計趨勢,它引人注目且色彩繽紛,這種趨勢兼顧透明度和層次感。玻璃擬態設計給人以磨砂玻璃的感覺,近一段最受歡迎的趨勢。這種風格深受蘋果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的類似概念的影響。在許多情況下,如果使用得當,Glassmorphism 可以使網站和應用程序對用戶更具吸引力。

          ByMahmudul Hasan Manik

          三、暗黑模式(Dark Mode)

          深色主題現在已經成為應用必備的界面了。手機的白色界面可能對我們的眼睛造成更多的刺激,這就是所有應用程序和網站都加入了暗黑模式設計的原因。暗模式有一些我們應該遵循的特定規則。深色主題的主要優點是在弱光環境中具有更好的可讀性。作為 UI 和 UX 設計師,我們應該明白它的主要作用,它主要是減少了用戶的眼睛疲勞并提高了夜間的可讀性。

          ByJulius

          四、無色界面(原詞Colorless)

          色彩理論知識在每個 UI 和 UX 設計中都至關重要。正確使用顏色對于為您的客戶創造正面形象很重要,這就是顏色在 UI 和 UX 設計中扮演重要角色的原因。大多數 UI 設計師都使用鮮艷的色彩來將用戶的注意力集中在重要元素上,并使我們的設計令人難忘。下圖分別為單色調和雙色調界面。

          By Resuscitation

          五、包豪斯風格

          包豪斯的風格通常被描述為藝術和手工藝運動與現代主義的結合。包豪斯設計幾乎沒有裝飾,注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計,也可以理解為包豪斯的復興。包豪斯設計在UI設計上的核心,就是將設計簡化為必要的功能,使其美觀和輕松,以及精心制作每一個小細節。

          包豪斯設計幾乎沒有裝飾,注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計也是包豪斯風格的復興表現之一。

          By Beto Garza “Helbetico”

          六、白背景及顏色

          在當今的設計中,白色背景越來越受到大家的歡迎。了解色彩心理學是創建配色的一個關鍵方面,這在數字設計中效果很好。吸引用戶的最佳方式是通過“色塊”平衡單色背景色與亮色,以突出數據中的重要內容或者異常提示部分。少即是多,當您在 UI設計中使用較少的顏色時,這將對用戶更具吸引力和亮點。

          By Resuscitation

          七、UI中的動畫插圖

          插圖是用戶界面中更直觀的視覺闡述,也一直是UI設計中長盛不衰的“趨勢”之一。動畫插圖,在與用戶交互過程中為UI注入了強大的生命力。它幫助用戶獲得更立體的反饋,為創建更生動的微交互創造了條件。

          By Rachelizmarvel

          八、極簡主義

          極簡主義是 UI 設計中使用最多的“風格”之一,它有助于改善用戶體驗。在我們的 UI 設計開始極簡設計之前,有必要了解術語“極簡”的含義以及為什么極簡在 ui 中很重要。下面是極簡主義的特征:

          • 簡單
          • 清晰度高
          • 富有表現力的視覺層次結構
          • 凸顯每個元素的功能

          By Shakib

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

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



          文章來源:人人都是產品經理    作者:Tzw_n

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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