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

          首頁

          必讀!用戶體驗設計指南 - KIT組件庫一站式體驗搭建

          ui設計分享達人

          本文將從理論到實踐,從軟件到插件,再到不同應用場景拆解和團隊協同的重構,一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程,組件化設計的必備插件,目前國內還比較少有文章講到。手把手!嘴對嘴!堪稱全網最細保姆級教程!




          01. 什么是KIT組件庫?


          一個成熟的設計團隊,都會為產品制定設計規范,搭建產品KIT組件庫,組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致,讓團隊成員專注于深耕體驗和細節,實現設計向產品賦能。極大的節省設計和開發成本,優化用戶在界面流轉間的感知差異體驗。


          KIT組件庫本質上是一個集合的Sketch文件,由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。


          由Google推出的當時媲美蘋果全新設計語言的Material Design,Material Design也是最為經典組件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。



          02. 原子設計理論


          原子設計是將界面設計中最小元素——原子,組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。




          1.  原子 Atoms

          原子Atoms,我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割,但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成,所以原子是構成物質的最小粒子這就不對了。


          但在界面設計中我們所說的原子是構成界面的最小顆粒度元素,在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。

          2. 分子 Molecules

          由原子按照一定的規律和目的組成的部分為分子,在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等,可以理解為比較簡單的小組件。

          3. 組織 Organisms

          將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


          4. 模板 Templates

          將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖,產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。


          5. 頁面 Pages

          最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容,就得到了高保真設計界面。


          03. KIT組件庫搭建過程詳解


          以最近做的一個NFT項目為例子,展示具體搭建細節的全過程。




          1.  命名規范


          命名按照:一級分類 / 二級分類 / 三級分類 。例如:一級標題樣式/蘋方/常規/灰階0


          其中 “/” 為層級結構分隔符,Sketch會自動識別。組件庫的搭建需要按照層級規范命名,從最外層到最內層,就像一個抽屜,每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。




          2. 樣式


          (1)顏色樣式

          我們設計一般都需要定義顏色樣式,一般有主色調(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要創建樣式的顏色,點擊「外觀 - 創建」,在輸入框內輸入層級規范命名。



          (2)文字樣式

          定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點擊【外觀-新建】,在輸入框內輸入層級規范命名。




          (3)樣式切換

          當我們需要切換一個定義好的文字樣式時,比如從“閱讀文本樣式”更換為“一級標題樣式”,只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。




          (4)樣式修改 - 解綁與更新

          當我們需要對定義好的文字樣式進行修改時,比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點,為了優化閱讀體驗需要增大字號。


          1. 單個修改 - 解綁

          將文字調整更改為你需要的大小或字重,此時只對單個文本修改,不對其他文本產生影響,點擊解綁,便可與定義好的樣式分離。


          2. 整體同步 - 更新

          將文字調整更改為你需要的大小或字重,樣式名稱后會出現 "*" 星號,此時代表未保存,且更新按鈕激活,點擊更新按鈕則所有使用該樣式的字段都會更改,整體同步更新。




          3. 組件

          組件是將元素定義為標準化可復用的集合體,對組件進行規范的命名,形成高效設計的KIT組件庫。


          (1)文本組件

          選中我們需要定義的文本字段,注意!根據實際應用場景選擇合適的文本對齊方式,否則修改字段信息是會出錯。這里文本選擇左對齊,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。




          (2)標簽組件


          1. 單個標簽

          當設計完標簽后,對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對齊,步驟同上。將整個標簽打組,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局(這里注意!從左往右布局表示標簽在更改字段信息后,便簽左邊固定不動,從左往右自適應) - 在覆蓋層修改文本字段信息,庫存標簽組件自適應。




          2. 標簽修改           
                   

          如果我們覺得這個庫存標簽設計的不滿意,或者還需新增倒計時標簽、已售標簽,那怎樣又該怎么做的?


          第一步:這時我們新建一個Sketch文件,命名為「 *** KIT 組件庫」。選中標簽圖標復制,將圖標粘貼到新建文件內,注意!此時需要給圖標添加合適的畫板,并按規范命名。

          第二步:將Sketch文件保存到桌面,拖動到「首選項-組件庫」內。

          第三步:選中組件,回車可進入控件(組件)頁面,可直接調用定義好的控件,進行修改。





          Tips:這里畫板的作用是

          (1)畫板是用來規范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

          (2)畫板組件在創建后,調用時只固定大小和邊界。

          (2)如果只是做較少的界面,較少的復用的樣式,就可以不用做畫板。




          3. 多個標簽

          當頁面需要不止一個標簽時,就需要新增標簽,通常為左右或上下布局。若直接增加一個標簽修改字段,文本標簽不會自適應。 和之前操作一致,將新建的標簽新建組件后,可實現標簽文本自適應。




          4. Sketch素材調用

          繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。




          (3)容器組件整合

          將前面定義好的所有組件整合到容器中,形成可直接復用的商品信息容器組件。


          第一步:調用定義好的閱讀文本樣式,注意!直接拖過來即可,文本框的長度左右拉到合適的左右間距,這里不需要動文本框的高度,否則會出錯。將底部容器(卡片)的收起到合適的高度


          第二步:選中整體打組,創建組件。注意! 此時選擇從上向下布局。


          第三步:選中整體,在右側覆蓋層可對文本進行編輯,輸入文本字段,此時容器高度實現自適應。




          (4)組件的拆解與重構


          頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。




          (5)Anima插件


          如果上下同時有卡片的情況該怎么呢? 當然,我們完全可以將它們一起定義組件,但有沒有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會使得大家在搭建組件庫時變得更加靈活高效。


          Anima插件為一款在線自動響應式的插件,其中的STACK與PADDING功能簡直是Sketch設計必備,簡直逆天。




          1. PADDING功能

          新建一個文本,當點擊PADDING后,會自動生成一個底板,選中底板可對其進行編輯,更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式,左對齊一般適合標簽使用較多,而居中對齊適合一般的居中按鈕,如立即支付、立即報名等。




          2. STACK功能

          將三個標簽分別打組,再全選整體打一個組,點擊STACK,選擇左右排版和居中對齊,輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽,拖拽可改變排列順序,松手后還可以自適應。




          04. 為什么要搭建組件庫?


          (1)統一(Unified)


          1. 團隊不同成員或新來設計師之間協同配合,保證輸出的一致性和穩定性。


          2. 統一的組件庫樣式,會減輕用戶在頁面流轉間的疑惑感和理解成本,使用戶體驗得到了提高。



          (2)效率(Efficientcy)


          1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下,如果每一個都重新設計將是一個巨大的時間成本浪費。


          2. 如果從產品的全生命周期來看,搭建好設計中臺KIT組件庫,并與開發進行溝通,能減少前端開發樣式,將時間更多的放在功能交互體驗和項目推動上,極大提高了效率。



          (3)協同(Together)


          1. 建立完善的設計規范和KIT組件庫,提高組件庫優化迭代效率。組件庫團隊協同自動更新。


          2. KIT組件庫一鍵修改,也可通過組件分離功能(解綁)單獨對樣式進行修改,工作中需要對設計反復調整打磨,可進行批量一鍵更改,單個模塊的單獨修改。




          05. 什么時候搭建組件庫?


          什么時候時候搭建組件庫?先定義規范都是扯淡!所謂實踐才是檢驗真理的唯一標準,“在設計開始之前就制定設計規范,是不切實際的做法,你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。


















          并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情,如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。



          06. 團隊協同


          將組件都定義在新建的Sketch文件中,將文件發給你的團隊其他成員。步驟同上。


          第一步:新建一個Sketch文件,命名為「 *** KIT組件庫」,將組件都創建在新建文件內。

          第二步:將Sketch文件發送給團隊其他成員,拖動到Sketch「首選項-組件庫」內。

          第三步:直接調用定義好的組件。


          共享組件庫個人使用 Sketch Cloud,但組件庫有更新Sketch右上角會有提示,及時溝通更新即可。



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

          文章來源:站酷  作者:JI_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          情感化設計心理學:用戶心理定律及優秀案例分析

          ui設計分享達人

          將普遍存在的人性用戶心理規律運用于設計,增加設計的溫度。

          近來對用戶心理比較感興趣,去看相關設計資料的時候發現相關內容重復性較高,多方搜集資料結合自己的一些分析總結出一篇補充。

          定律是鑰匙,在遇到讓我們上癮,持續付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續的設計吸收。










          undefined

          undefined

          undefined

          undefined

          undefined

          最后想說,設計師的價值不僅僅在視覺,好的設計必是好用好看好懂用戶的。跨領域學習補充自己的視野,多思多想,掌握鑰匙,開啟用戶不同的心門。

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

          文章來源:站酷  作者:唐小蔥

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

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

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


          案例分享 PM/UX 必看 [用戶體驗]

          ui設計分享達人


           

          講User Research | 用戶研究 之前,有必要先介紹下“用戶體驗”。這兩者是密切關聯的。

           


          作為一枚互聯網老兵,先說一下歷史吧。

           

          N年前,UX Designer還不怎么流行。

           

          隨著喬幫主iphone4的橫空出世,驚為天人,徹底改變了整個手機生態。于是在中國市場,各種熱錢涌入,到處都是創業公司(start-up),各類APP紛紛孵出(我在上海)。這是整個移動互聯網行業野蠻生長的年代。公司那么多了,那么UI,iOS開發,Android 開發等等都是供不應求的。

           

           

          當然,那么多創業公司,90%都會在一年內,在天使輪的階段死掉。能活下來的,都是壯士!現在你看看你手機上裝的啥耳熟能詳的APP,基本也就是那些了。

           

          題外話:我當時的公司樓上是一家知名網游公司。某天我很快樂(KU B)的去上班(Make Money),結果就看到新聞說那家創始人CEO昨天半夜心臟病發,人沒了。隔天就看到他家公司門口貼訃告了。(此處默哀?。﹦摌I不易,真心能活下來的都是壯士!

           

          野蠻生長的年代,對于崗位要求不會那么精細。做UI的,最好你什么都會,十項全能。平面/手繪/App UI/ Web UI/H5/交互/動效/前端最好也懂一些/其他。。。


          那時候少有交互崗,因為交互崗通常會被產品崗,或者UI崗兼了。但隨著這些年WEB/APP越來越成熟,用戶對于體驗的要求越來越高。另外,隨著各類海歸人才帶回來的國外先進設計理念。各路大中小廠對于UX交互也就越來越重視。

           

          于是,就有了UX Design | 交互設計的專門崗位,有些也叫User Experience Design | 用戶體驗設計,在互聯網行業,兩者基本一個意思。

          (我們這里不討論用戶體驗的五個層次,戰略層、結構層、表現層之類的。這些太理論,大概知道就行了,多說我也困。真要硬掰,那交互設計實際算是用戶體驗中的結構層。但在國外專業文獻中,UX Design=User Experience Design。不要硬剛。 :P)

           

          人類總是情緒化的,總是對他們世界里的產品做出情緒化的反應

          -艾倫·庫珀,Cooper公司總裁,Visual Basic之父

           

           

          一.什么是 User Experience | 用戶體驗?


          通常來說,“用戶體驗”就是人們在使用產品時候的感受。用戶體驗并不僅限于互聯網行業,各行各業都有。


          用戶體驗更關注的是人和物的交互(Human-Objects Interaction)之間的聯系。


          “物”在互聯網產品中的應用可以是Web,APP,System等。

           

          舉個生活中的例子,迪斯尼。

          迪斯尼,娛樂行業吧?但它更是一家徹徹底底的體驗公司,極其注重體驗管理。


          迪斯尼樂園為小朋友們,大朋友們筑造了一個夢。迪斯尼的體驗管理,就是從造夢這個目的出發的。


          對于服務人員、演職人員的要求,干凈、禮貌都是最基本的。


          迪斯尼對演員的要求是,你不是演米老鼠,你就是米老鼠。用戶體驗細致到如下:

          只要有賓客在,演員就不能把頭套摘下。之前有新聞說演員中暑了,也堅持不取下頭套。(這里我們不討論勞工權益之類的問題)因為不能毀滅孩子們的夢。

          在同一個視野里,不能有兩個同樣的米老鼠。因為對于孩子來說,米老鼠只有一個!

          全世界演米老鼠的演員,都要苦練簽名。因為對于孩子來說,全世界只有一個米老鼠,簽名當然是一摸一樣的。


          這只是演員,還有其他工作人員,還有工作以外的服務。此處不再延申討論了。


           

          二.什么是 User Experience Design | 用戶體驗設計(即UX Design | 交互設計)?


          用戶體驗設計,顧名思義,就是為產品/服務設計一個良好的體驗。用戶體驗設計同樣并不僅限于互聯網行業,各行各業都有。

           

          舉個生活中的例子,麥當勞的打包袋設計。


          傳統設計是這樣的。

          漢堡薯條什么的全部裝紙袋,沒有提手,每次都捏到我手指抽筋。飲料再另外裝個塑料袋。

          一個捏,一個提。其實是不舒服也不方便的。

           

          用戶體驗好的設計可以是這樣的。方便快捷,節約資源,解放手指。

          (gif動圖,刷新頁面重播)

           

          我們這里想說的用戶體驗設計,特指互聯網行業。


          早期的Web頁,幾乎就是個靜態網頁,就提供些信息展示。那時候用的還是asp, php, .net技術,快捷點的話有個模板套套,新聞/產品就能后臺維護了。


          從大概2010年以后,Web就開始越來越復雜了,APP也開始越來越精細和規范了。這對于交互的要求就越來越高,需要有一個良好的用戶體驗設計。

           

          舉個APP的例子。

          淘寶最近對“確認收貨方式”做了優化(大致在2021.9),不知道你發現了嗎?


          淘寶購物時,首先,在買東西付款的時候,就需要輸入第1次支付密碼。


          最后,在收貨確認時,

          Before: 原來,還需要再輸入第2次支付密碼。

          Now: 現在,只需要點擊“確認”就行了,不需要再輸入一次支付密碼了。此次優化,就是簡化用戶的操作,提升用戶體驗。

           

          如下圖為最新優化后的截圖:


           

          如圖,

          Before: 原來,在Step 3中,原來還需要再輸入第2次密碼。

          Now:現在,在Setp3中,直接從Setp3——>Setp4.


          三.為什么UX Design | 交互設計很重要呢?

           

          產品成功與否,涉及到太多方面了。戰略決策、產品、內容、用戶體驗、技術、運營、服務、競品情況,資金投入、運氣等等,缺一不可。而用戶體驗/交互是其中重要的一環。


          專注于用戶的交互設計,大大增加了項目成功的機會。因為產品是給人用的,尤其是互聯網產品,用戶不會因為產品是知名品牌,就堅定不移的支持它,買它,用它。


          要是產品不好用,那放棄它,也是遲早的事情了。


          畢竟,能讓大家都喜愛的,還不管怎么樣都愛到死的,也只有RMB人民幣了。

           

           

          四.什么是 UX Designer | 交互設計師?


           

          交互設計師,需要通過調查和分析等用戶研究方法來設計產品,或者對產品做優化改進,以保證用戶能有一個良好的用戶體驗。


           

          五.UX 和UI的區別?


          UI,純粹的UI,通俗來說,就是負責好看。把產品做好看了,做精致了,讓用戶看得賞心悅目,心情舒暢。這是美學意義上的工作。

           

          UX,通俗來說,就是負責好用。讓整個產品流程簡單又便利,用戶使用產品不會有停頓和疑問,讓用戶使用產品的感受非常好。最終目的是為了增加用戶的粘性,提高產品的流量,促進產品的轉化率,為公司帶來直接或間接的收益增長。

           

          UX是產品中的重要一環。

           

          當然,在實際工作中,如果產品——長得好看+體驗好。那就是王者~

          這也應該是做產品的要求和標準,也應該是設計師對自己的要求和標準。

           

           

          舉個兩者結合的例子,摩拜單車。

          (雖然他欠用戶押金,雖然他已經沒了,成為了美團單車。但是他的故事還是可以講一講的)

           

          設計方面,

          摩拜單車的聯合創始人王曉峰(負責具體的研發、運營及市場工作)回憶當年做摩拜單車的時候,首先考慮的是產品和服務要讓消費者有面子。


          前期他做了很多市場調研(看,用戶研究),當年在校園外騎車的只有三種:除了專業騎賽車的,就是藍領工人和老年人。


          想讓白領階層都愿意騎自行車,就必須要讓他們覺得有面子。如果讓一個白領,騎著五花八門,甚至還叮當帶響的自行車上路,那是很沒面子的,這種生意一定會失敗。


          于是,摩拜就設計出一輛金屬感十足的橙色自行車,好看又酷炫。

           

          用戶體驗方面,

          摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑,比如車身結實、開鎖方便、損壞率低。但是,在夸贊的后面,用戶們往往會補刀:「好是好,就是太重了?!梗ǖ谝淮亓繛?5公斤,是普通自行車重量的2倍。)


          于是,為了改善用戶體驗(看,基于用戶反饋。又是用戶研究。),第二代摩拜單車在確保安全和耐用的前提下對每個零件減重,整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。


          這還僅僅是車身重量,其他各方面,輪胎,鎖,鏈條,車座等等,全部做了優化改進。此處不再延申討論。

           

           


          回到做WEB或者APP的設計上。


          中國的互聯網行業并不羞于抄襲對手,現在產品同質化這么嚴重,靠單純的產品創意早已經無法取勝了。


          現在產品更多的核心優勢是ABC——人工智能(AI)、大數據(BIG DATA)和云計算(CLOUD)。我們頂尖的算法工程師們(Data Scientist)好不容易對數據做了識別、分析和精準有效的輸出。


          結果在交互這一環沒做好,用戶找不到,看不懂,不會用這些產品/內容。你做設計的良心會不會痛?


           

          六.用戶體驗設計就是需要“以用戶為中心”(user-centered)而設計


          不要拍腦袋決定,不要自己YY。

          不然只能設計出一個你自己想要的,或者是你老板想要的產品。

           

          舉個反面案例:生活中的例子,廁所標識。

           

          用戶體驗—— 正常

          這張圖,好理解吧,廁所標志。就算右邊那個清朝的個性了點,那也是設計得不錯,能看懂。


           

          用戶體驗—— 差

          這張圖,額。雞?讓我想想,哪個是公雞,哪個是母雞?只要我努力辨認,我還是有機會成功上廁所的。


           

          用戶體驗—— 極品差

          這就是設計師自己YY的結果。


          這張圖,這都是什么玩意兒?大象?長頸鹿?什么意思?設計師,你給我出來,你信不信我打不死你?


          這樣的廁所標志,我猜都猜不出來,我只能跑到廁所門口張望,當個女流氓,看看廁所里的坑位是什么樣的,我才有指望上廁所。

           

          好了,那位設計師現身說法了,他的靈感源于動物習慣,大家弄不清楚的原因是他們不了解動物的具體習性。


          長頸鹿在噓噓時會張開雙腿,這標志著女廁所,而大象則用象鼻噴水,這標志著男廁所。他的靈感在大部分人看來太牽強,因為一般人對于這些動物習慣一無所知,用大象和長頸鹿來分辨廁所之間的區別是不是很無語?


          這設計師就光顧自己玩創意了,自己YY。廁所是為了給大家帶來方便的,好的設計創意是一回事,但最大的問題也是要方便眾人使用的。

           



          舉個正面案例:APP的例子, AR(增強現實)。


          現在AR技術已經相對成熟了,導航,家居,翻譯,試妝,試鞋,地球儀都有AR。

           

          拿AR試鞋舉例子。

          Before: N年前,AR試鞋還是把鞋子投到地面上,看個大致效果。(左側Before截圖大概是我3年前截的)

          Now: 現在,AR技術做強了,AR試鞋就直接投到腳上,能夠看到鞋子上腳的效果。對用戶而言,體驗更好。對商家而言,轉化率會更高。

           

          好了,用戶體驗就講到這了,是不是很輕松,看看故事就有些體會了?


           

          最后,

          今年是喬幫主逝世10周年,緬懷下!原來,他已經離開這么久了。

           

          I skate to where the puck is going to be, not where it has been. 

          - Wayne Douglas Gretzky

          這句話簡單來說,就是預判形勢,提前準備。

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

          文章來源:站酷  作者:Lu傾傾
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          B端產品界面高屏效初探

          ui設計分享達人

          背景

          在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。


          undefined


          「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。


          為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐?!钙列А箤n}探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確??梢蚤_箱即用。


          undefined


          探索階段-為誰在何時何地設計

          用戶聲音|不同的故事相似的訴求

          面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。


          undefined


          外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。


          undefined


          通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:


          undefined



          案例收集|發現問題,大膽假設

          縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:


          undefined


          視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

          綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決

          視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。

          基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。


          競品分析|尋找實踐證據,謹慎驗證

          我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大?。┒亲痔柣蜃中懈撸瑳Q定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。


          undefined


          以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。

          直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)


          undefined


          通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。


          緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。


          除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。


          文字陷阱:中英文字高不等于字號


          舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。


          undefined


          原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。


          論文查閱|尋找理論證據,謹慎驗證

          研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好

          參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

          對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。


          認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒?,輸出效率是客觀的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。


          假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。


          undefined


          面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。


          undefined



          實踐階段-如何設計

          通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。


          undefined


          基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。


          如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。


          undefined


          下面以視覺、交互、信息三個層次解剖設計過程背后的思考。


          視覺層|高密度-克制的留白

          眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》


          undefined


          如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。


          undefined



          交互層|低跳轉-高頻信息前置

          理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大??;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律


          undefined


          表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。


          undefined



          信息層|有效性-信息重組織

          理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》


          undefined


          用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。


          undefined


          結語

          設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。

          文章來源:站酷  作者:An t_design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          從體驗層面出發,分析App搜索框設計的要點

          ui設計分享達人

          搜索動作在App中依靠搜索框來完成,好用的搜索框很大程度上決定了產品的搜索體驗如何。大多數搜索框存在相似性,但真正好的搜索框會在細節上為用戶帶來差異化的反饋,帶來很暖很貼心的感覺。


          1、搜索框結構分析 

          從體驗層面上看,一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為:

          使用前-找到搜索框入口;使用中-點擊輸入內容;使用后-展示搜索結果。

          其中使用中會涉及到跳轉和輸入兩種不同的狀態,在下面的文章里我會展開來分析。


          2、搜索框的常見類型 

          回想常用App的搜索框,好像它們的樣式看起來差別并不是很大,但其實每個搜索框的細節都是經過精心設計的,下面總結了幾種常見的搜索框類型。

          搜索圖標

          頁面上只提供一個放大鏡圖標,通常需要用戶點擊圖標后才能跳轉到搜索頁面,例如小紅書就將搜索圖標放置在頁面右上角。

          基本搜索框

          基本的搜索框組成包括放大鏡圖標、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式,文字提示為搜索,簡潔清晰。

          文字提示類搜索框

          和基本搜索框的唯一不同的地方在于,這類搜索框中的文字提示部分不再是搜索兩個字,而是根據產品需求支持預置多組文字提示并在搜索框內循環展示。

          ▲ 在大眾點評的頂部搜索框中,文字提示部分循環展示了三組不同的內容,引導用戶快速檢索到好吃和好玩的。

          功能類搜索框

          之所以叫做功能類搜索框,是在文字提示類搜索框的基礎上根據產品功能的需要額外添加了常用的功能性圖標,如掃碼圖標、拍照圖標、語音圖標等,賦予搜索框更多的功能屬性。

          ▲ 經常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標,點擊之后可以快速掃描圖書條碼或二維碼,快速識別書的內容,省去檢索的麻煩。

          ▲ 淘寶搜索框的組成更復雜,除了支持掃碼外還有相機圖標,方便用戶拍照識別商品。 


          3、搜索框設計狀態分析 

          使用搜索框搜索的過程總體可以分為四部分:搜索前、點擊搜索框、輸入中、搜索后。設計分析過程中我們要先理清整體的搜索流程,再考慮每個狀態對應的交互細節及反饋,這樣才能保持邏輯清晰。

          搜索前-默認狀態

          位置

          大多數搜索框出現在頁面頂部,作為一個大的觸摸目標更符合用戶的認知習慣,更容易被用戶發現和使用。

          ▲ 在蘋果自帶的地圖應用中,搜索框放在頁面中部偏下的位置,相比于頂部搜索框,這樣的位置分布更方便用戶單手操作。

          樣式

          搜索前的狀態除了前面講的幾種常見的搜索框樣式外,有些產品會直接在搜索框增加“搜索”按鈕。

          ▲ 阿里系產品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕,相比于點擊搜索框再點擊鍵盤搜索內容推薦,直接點擊按鈕簡化了搜索流程。

          點擊后-獲取焦點

          搜索框

          點擊搜索框后,框內的放大鏡圖標會消失,出現閃爍的光標引導用戶輸入,搜索框右側會出現“取消”按鈕。

          ▲ 點擊大眾點評的搜索框后,搜索頁會出現三個選項,點擊每一個選項,搜索框內的文字提示都會改變,有效幫助用戶提升搜索準確度,雖然是很小的點但做的很用心。

          鍵盤

          點擊搜索框后會彈起鍵盤,在不輸入內容的情況下,點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內容。

          搜索頁

          搜索頁的內容通常包括歷史搜索、搜索發現、熱門推薦等版塊,記錄用戶的搜索行為,推薦目標商品或服務,提高轉化率。

          ▲ 豆瓣將最熱門的內容都展現在搜索頁中,包括實時更新的熱門書影音榜單、熱門小組、熱門話題等,為用戶提供有效的引導。

          關于歷史搜索我們還可以繼續深入分析,思考這些記錄怎么排序、最多顯示幾條記錄……

          ▲ 網易云音樂的歷史搜索最多可以保留10條,采用橫向滑動的手勢交互可以節省屏幕空間。根據內容長短一屏一次可以顯示2-3條記錄,這會導致排在后面的歷史記錄不容易被用戶快速發現。

          ▲ 淘寶的歷史搜索可以容納更多的數量,當搜索記錄超過兩行時會有一個小的展開按鈕,點擊按鈕可以查看早期的記錄,這樣既能節省屏幕空間也能最大化容納歷史記錄。

          搜索中-輸入內容

          刪除/取消

          當開始輸入內容時,在搜索框的右側會出現刪除圖標,方便用戶一鍵刪除輸入的內容,這里要注意區分刪除和取消的區別。

          ▲ 在淘寶中點擊“刪除”圖標,頁面會返回到上一級也就是搜索頁;

          ▲ 點擊“取消”按鈕,頁面會直接返回到主頁也就是搜索前的狀態。

          搜索提示

          在用戶輸入內容時,產品會根據用戶輸入的內容提供相對應的搜索推薦,這是搜索框的必備的交互反饋。

          通過合理的詞條推薦能極大降低用戶的思考時間,提高搜索效率,同時省去再次點擊搜索按鈕的流程,降低用戶的操作步驟。

          字數限制

          目前我所知道的大多數App在搜索時都沒有字數限制問題。

          回顧一下搜索使用場景會發現用戶在搜索框內輸入任何內容都是有可能的,盡量不要約束用戶的輸入內容。無論用戶輸入多少內容,點擊都可以完成基本的搜索操作,這樣整個流程才完整。

          ▲ 在百度中輸入過多字符時,會提示查詢限制在38個漢字以內,多的字符會被忽略,雖然給出了提示但并未打斷用戶的操作流程,可以讓用戶繼續完成搜索。

          搜索后-展示結果

          符合預期

          搜索的理想狀態是搜索到的結果符合用戶的預期,滿足用戶的搜索需求,并把最吻合的搜索結果排在前面,為用戶帶來清晰的結果展示。

          智能提示

          智能提示是對用戶輸入內容上的一種提示或糾正,如果用戶輸入的內容有問題或不夠標準,在搜索結果中會能給最貼切的搜索結果。

          ▲ 在淘寶中輸入“shouji”或“souji”,淘寶會根據拼音給出“手機”的搜索結果,但仍保留原標簽,方便用戶再次點擊搜索;輸入“手ji”時,會直接給出“手機”標簽,這種差異化的反饋能更好的為用戶服務。

          無結果提示

          如果沒有搜索到用戶輸入的內容,搜索頁會顯示一個空狀態,提示用戶沒有搜索結果。關于空狀態如何設計可以看我之前寫的一篇文章——如何做好「空狀態」設計?來看資深設計師的總結!詳細分析了空狀態的設計方法。

          ▲ 相比于直接顯示搜索無結果的狀態,拼多多的搜索結果首先會標明相關商品較少,然后將搜索內容拆分成不同的標簽進一步引導用戶來發現內容。

          文章來源:站酷  作者:Clippp
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          掌握這20條用戶體驗設計原則,助力設計成長!

          ui設計分享達人

          文章整理了20條用戶體驗設計原則,希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領域有一個初步的概覽和了解。

          1.以用戶為中心 

          這是最常被提及的用戶體驗設計基礎,當涉及到產品設計決策時,提醒我們要學會使用同理心,而不是僅憑個人的想法或意見。

          真正好的用戶體驗設計是為用戶量身打造的,用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要,所以在項目初始階段需要投入大量的時間和精力去了解用戶。

          用戶體驗研究重點是了解用戶,為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求,區分了設計任何人都可以使用的產品和為目標用戶設計的產品。


          一款特定的產品需要面對不同的目標群體,前期研究中需要了解目標人群需要什么并在產品中反映出來,這是針對性很強的設計研究。 


          2.了解信息架構

          可能很多人對信息架構的定義很模糊,這里舉個例子來具象說明一下信息架構的含義。

          例如在一款產品中,如果把所有內容都堆到一個列表或頁面中,可能我們將無法使用這款產品,所以我們看到大多數的App和網站都包含很多的導航和頁面結構,按照內容重要程度有序地來組織內容。

          信息體系結構的最終目標是幫助用戶理解他們在看什么,并幫助他們找到需要尋找的內容。

          信息架構在制作線框圖或原型之前完成,因為它是產品的基礎,有助于設計師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

          這種結構與產品的導航設計密切相關,有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。


          信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容,點擊任何元素都沒有反應,會給用戶帶來很糟糕的使用體驗。 


          3.考慮使用場景

          沒有場景,任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。


          這條原則有助于設計師考慮還有哪些因素會影響用戶和產品,很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。 
          例如在設計表單時,會盡可能的添加 輸入提示,最大程度地減少用戶出錯的機會。 


          4.了解一致性及其重要性

          保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受,因為用戶不需要再次學習如何操作,他們會回憶起之前的操作習慣并將其作為指導,這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

          保持一致意味著在需要時可以重復使用某些UI組件,并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時,所以按鈕的狀態應該是一致的。


          從邏輯上講,產品越大,這種一致性會變得越來越有挑戰性,這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡,放棄的用戶就會越多,在市場營銷中,這通常被稱為銷售漏斗中的漏洞。 


          5.給予用戶適當的控制權

          這條原則意味著用戶希望能控制產品,無論是完成任務還是定制滿足他們需求的內容。

          在設計過程中一直試圖給用戶盡可能多的控制權,例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等中。


          需要注意的是,當提供太多選項或用戶太依賴于自己的選擇時,用戶可能會不知所措,造成所謂的 選擇悖論。所以在設計時要了解用戶樂于掌控的余地,不能讓用戶感到使用壓力。 


          6.把可用性放在首位

          在整體上看,建立高標準的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。


          可用性的重要之處在于要理解可用性的靈活性和重要性。 


          7.了解用戶測試

          結合可用性的概念,我們還要進行用戶測試,這是設計師對工作進行測試的方式,對新的產品來說至關重要。

          當設計思想和理念被轉化為有形的原型時,設計師要觀察真實的用戶是如何與之交互的,可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。


          測試通常分幾輪進行,團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現,設計也隨之發生了變化。 
          如果發生更改,將會進行新一輪的測試,通過這個過程,設計團隊可以改進他們的工作,直到達到可用性標準。 


          8.少即是多

          在創造力和創造獨特事物的渴望中,很多設計師很容易無意中弄亂產品界面甚至產品本身。

          功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊,但也會給用戶帶來負面體驗,在設計時要學會克制并優先考慮真正關鍵的部分很重要。


          另外手機端的屏幕空間非常小,創建一個有效的布局,想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。 


          9.視覺層次

          視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動,并立即了解最重要的內容以及這些內容與其他部分的關系。

          視覺層次結構與布局設計緊密相連,幫助用戶消化所接觸到的信息。


          創建層次結構從概念的草圖開始,一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色,而次要按鈕會顯示為灰色或與背景混合,并顯示“撤消”或“返回”。 


          10.了解用戶的心智模型

          為用戶創建心智模型是嘗試使用同理心的一種方式,是幫助設計師從用戶的角度看待問題的工具。

          正確使用意味著用戶無需投入精力就可以使用的直觀產品,而錯誤的思維模型會導致一些問題,例如界面混亂、高昂的交互成本。


          為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見的方法包括 卡片分類、決策樹、對用戶行為的密切觀察,或者使用大量的數據來建立關鍵用戶的心理模型。 


          11.設計中的講故事

          講故事的方式更加直觀,利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感,給用戶留下持久的印象。


          想出一種可視化的方式來傳達復雜的內容具有挑戰性,但同時也是有益的,可以更好地接近用戶并將其作為提高產品可學習性的方法。 


          12.不要直接跳到高保真原型上

          高保真原型是設計項目的最終目標,但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。


          避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下,一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。 


          13.可訪問性測試很重要

          不僅要檢查關鍵用戶是否可以流暢地使用產品,還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。


          事實上,殘疾人和其他用戶一樣需要數字產品,但很多產品在設計時并沒有考慮到這些群體,但這也提供了一個機會,為所有用戶提供一個可以依賴的好產品。 


          14.熟悉并在用戶體驗設計中使用

          我們知道為用戶提供一致的設計有助于克服學習曲線,同時為用戶提供熟悉的東西也有助于縮短學習曲線。

          例如,大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

          使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失,有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計,同時也是直觀的,不需要太多努力就可以使用。


          設計一個完全不依賴熟悉度的產品可能是具有風險的行為,因為它很容易讓那些不熟悉產品的用戶超負荷,形成巨大的學習曲線,增加用戶負擔。 


          15.了解交付成果的力量

          可交付成果是可以在整個團隊中交付的內容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現。

          可交付成果是用戶體驗設計原則,可以幫助設計團隊和其他利益相關者理解和交流概念。

          ▲ 用戶畫像可以捕捉理想用戶,并提供可以相關聯的真實面孔,是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟,有助于確保這些步驟確實可以輕松執行,并且整個過程很流暢。


          這些交付成果服務于關鍵功能,設計師需要在整個項目中都依賴它們,不斷轉換為用戶可以與之交互的真實有形的設計。 


          16.專業的原型設計工具

          用戶體驗設計的過程不是線性的,而是一個循環。無論創建什么樣的產品,都需要專業的原型工具,將基本框架放在一起,然后添加可能需要的所有細節。


          從邏輯上講,設計團隊的具體需求會因團隊而異,但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等,對于大多數團隊來說是必要的。 


          17.精心管理產品需求

          一切都從收集需求開始,然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易,但隨著項目的進展,要保持列表的條理性確實是一個挑戰。


          除了創建需求和檢查復選框之外,還有一個問題就是調整需求,需要從 設計、技術和業務各個方面來處理各種需求,還要確保這些需求之間沒有相互矛盾。  


          18.了解移動和網絡產品之間的差異

          網頁端和移動端產品最明顯的區別是屏幕尺寸,這意味著所有的視覺層次結構和信息架構都將將從Web到App發生變化。


          移動端產品會有更多影響設計決策的因素,例如設備的操作系統、使用產品的環境等。了解移動端產品在 導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。 


          19.利用UX設計模式

          幾乎所有的產品都專注于設計模式,它們可靠、易于查找并通過減少設計時間來為項目增加實用性。


          ▲ 當用戶在谷歌搜索中輸入的內容有問題時,谷歌會提供一個相關的搜索提示,輔助用戶進行精確地搜索,解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。 


          20.使用合適的工具才能有效

          擁有單一的內容來源可以為團隊帶來清晰性和高效性,如果線框和原型分散在多個渠道中,這種內容的集合就會變得很難達成。


          通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題,防止產品細節沒有表現出來或者被忽略。 


          最后

          通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

          沒有人知道用戶體驗設計在未來會引領我們走向哪里,不過我們可以確定,無論它帶給我們什么,肯定都會很有趣。

          慢慢來比較快,希望對你有所幫助~

          文章來源:站酷  作者:Clippp
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          5個方面改善用戶體驗

          ui設計分享達人

          當你在一個既定的服務領域工作,但想要進行革新時


          1.詳細研究當前的用戶體驗


          分析當前的服務體驗,解讀用戶旅程中涉及到的行為,接觸點,出現的痛點。構建現有的體驗旅程圖可以捕捉到服務體驗的全貌,立即發現需要重新設計的關鍵問題,促進組織內部的一致性。對于這種復雜的服務,根據分析結果建立服務藍圖也大有好處,可以捕捉到流程中的關鍵問題還有不同接觸點的關系中的重要方面。

          建議:
          自己進行嘗試,能夠有效地發現細節,涵蓋分析中的所有步驟。


          2.分析服務構建


          體驗和過程只是服務的一部分:在分析現有服務時,我們也要考慮底層系統是如何搭建組件和動態結構的。只有對系統進行全面理解,我們才能發現連接缺失,精力和資源的潛在浪費和重復。創建一個系統地圖有助于讓團隊成員明確這些問題,討論潛在的改善機會。

          建議:
          我們需要將系統中的所有行為者聯系在一起,全面理解系統過程,減少重復,彌補差距。


          3.設定具體的目標,指導設想


          在開始構思之前,花些時間來思考系統和體驗的分析結果,并通過重新設計確定自己達到的關鍵目標。目標可以是橫向的(比如 “優化整個旅程中的信息流”),也可以是非常具體的(比如 “入職:從填寫表格到熱情的歡迎會”)。最重要的是,我們首先要詳細了解現狀,才能設定目標,制定正確的方法,同時意識到急需解決的潛在局限性和障礙。

          建議:
          我們也可以將期待體驗設定為目標旅程,為體驗中的每一步設定一個具體目標。


          4.創造新點子和解決辦法


          提出新的想法,解決旅程中所有已知痛點或系統中的差距,以及抓住有趣的機會。這些想法包括既稍微改進一些特定功能,也可以影響整個服務模式的寬泛概念。在這個階段,不要限制自己的想法數量,更不用考慮可行性:捕捉每一個想法,與其他團隊成員分享,并在彼此的思考之上建立一個新想法。

          建議:
          快速構思是一種頭腦風暴的練習,團隊中的每個人都寫下他們心中的每一個想法,然后再進行小組討論。


          5.確定最有可能實現的概念


          收集所有想法,確定下一步的行動計劃。如果項目很簡單,我們可以簡單地將所有的想法整合成一個重新設計方案,逐步發展。在其他情況下,你可能最終得到50多個想法,對當前的服務體驗進行創新,但顯然我們不能訴諸于每個想法,那么……從哪著手呢?我們可以建立一個評估矩陣,確定標準,分析每個概念(例如,對用戶的價值,實施成本,獨特性等),并對它們進行相應的評分。這樣我們就可以篩選出最有可能實現的想法,創造較大的價值(這些想法可能是最先開發的)。簡略的概念可以很好地改善部分服務,但不會產生較大的影響(容易實現的目標);而較復雜的概念從長遠來看會對服務體驗產生更積極影響,但需要投入大量的時間和精力。

          建議:
          我們需要考慮的最核心內容是新概念給用戶和組織帶來的價值,而不是實施的可行性或復雜性-但這可以根據具體環境而改變。

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

          文章來源:站酷  作者:馬克筆設計留學

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

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

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

          你常常忽略的7個具有破壞性的體驗鴻溝

          資深UI設計者

          若想戰勝競爭對手,產品無疑需要在設計上做好提前規劃,并時刻樹立優化意識,盡量滿足用戶的體驗期望。然而研發團隊有時總容易陷入誤區,本篇文章里,作者就產品研發過程中可能忽略的、對用戶體驗具有破壞性的因素做了總結,一起來看一下。

          毫無疑問,要想獲得出色的用戶體驗 (UX) 需要在數字世界中保持競爭優勢。盡管如此,由于某些關鍵盲點,改善用戶體驗的努力并不總能取得成功。如果忽略這些盲點,那么無論預算大小和團隊的努力如何,失敗都會預先留存在項目中。事實上,如果實施不準確,可能會導致所謂的“經驗差距”造成的設計上的損失。

          你常常忽略的 7 個具有破壞性的體驗鴻溝

          上圖所示的具體案例:某銀行投資了近 50 萬美元改進其手機銀行應用程序,卻導致整體客戶滿意度下降。其根本原因是金融公司未能發現和預防不同級別的內部經驗差距。那么,該如何及時識別和避開這些盲點,以保障耗資巨大的大規模數字化項目的成功呢?

          一、即使預算龐大,用戶體驗工作也可能失敗 UX efforts can fail even with huge budgets

          在過去十年中,大量研究證實,用戶體驗對公司市場效率存在優先影響。根據甲骨文的一份報告,如果糟糕的用戶體驗導致多個業務問題,那么積極的用戶體驗會增加推薦、保留率和收入,因為 86% 的客戶愿意為更好的用戶體驗支付更多費用。

          看起來一切都很簡單——只要增加預算和成本,就足以提供最好的體驗?但在實際操作中,這并不容易。根據貝恩公司的研究,80% 的 CEO 認為他們提供了卓越的體驗,而只有 8% 的客戶同意這一點。

          其主要原因可以用“經驗鴻溝”來解釋——這是客戶期望的體驗與他們從數字服務中獲得的體驗之間的負面差異。如果體驗比預期的差很多,就會產生許多令人不快的后果,比如客戶忠誠度下降、大量負面評論,甚至客戶決定離開品牌。

          在大多數情況下,人們往往無法認識到真正的經驗鴻溝。

          即使公司的領導和員工覺得有些地方不對勁,他們也往往不明白“要改進什么”以及“為什么要改進”。如果沒有意識到某件事,就不可能管理它。

          二、現實生活中的例子:行動中的經驗鴻溝 Real-life example: Experience gap in action

          為了解釋“經驗鴻溝”可能導致麻煩的基本原理,我想分享一個現實生活中的例子。

          幾年前,一家知名且受人尊敬的中歐銀行開始了大規模的數字化轉型之旅。當時,該銀行的應用程序的評級為 3.5,并且已經過時。所以,為了實現數字化、提升銀行形象,并在不斷增長的數字市場中獲得競爭機會,管理層打算緊急創建并推出一款現代化的銀行應用程序。因此,最初的設計和開發周期為 6 個月。

          盡管如此,銀行還是花了三倍時間(1 年零八個月)自主構建新應用程序。無論從時間來說,還是從投資預算來說,這都可以稱得上是一個重要項目。從項目的范圍、所做改進和時間表來看,總成本估計在 50 萬左右。

          然而,結果完全沒有達到預期。新應用發布后,它從之前的 3.5 下降到 2.4,并且因為它沒有改進,以至一年后,其評分仍在下降,其用戶體驗也日漸惡化。

          銀行盡一切努力改善用戶體驗,整個團隊努力工作近兩年,怎么會發生這種情況?

          這種情況的產生,正是由于“經驗鴻溝”的存在。盡管該銀行啟動數十名頂級專業人士花費了 20 個月和 50 萬來改良產品,但它仍未滿足用戶的期望。

          雖然客戶不滿意的真正原因是無意識的“體驗鴻溝”,但公司往往傾向于通過指責外部環境來解釋它。例如市場的變化、競爭對手的活動、創新的出現、消費模式的變化。當然,這也是客觀事實,但一家適應性強的公司應該考慮將這些因素用于其增長,而不是作為“替罪羊”。

          但衡量適應效果的最重要方式是公司服務在多大程度上滿足甚至超過了消費者的期望。沒有意識到他們服務和客戶期望之間存在差距的公司注定無法適應外部環境的變化。

          在某些情況下,公司的行為甚至會導致經驗鴻溝擴大到臨界水平。這通常會導致目標客戶對公司產品和服務的需求急劇下降。

          如果我們回到這個例子,似乎管理層對重大改進是否可以成功充滿信心,并投入了大量資金和精力進行廣告宣傳。同時,那些宣傳此應用程序現代、創新和友好的廣告,激發了消費者的高期望,以至于大大超出了其服務的實際質量。

          結果,當產品最終發布時,客戶驚訝地發現他們的期望落空了,新應用程序比改良前更糟糕。并且相關的負面評論不僅出現在 App Store 和 Google Play 上,也在社交媒體上大量涌現,人們在推特上不斷諷刺該銀行失敗的數字化項目。

          三、對鴻溝的不了解是主要威脅 Unawareness of the Gap is the main threat

          接下來,讓我們探討一下數字服務和用戶期望之間的鴻溝是如何形成的,以及為什么沒有人能夠阻止它。

          事實上,最大的挑戰是大家往往很難注意到這些差距。他們的原因并不明顯,并且可以同時存在于各個組織架構之上。此外,它們的影響令人難以察覺,以至于最終會導致意想不到的破壞性后果。最終,直到團隊面對產品在市場上的失敗,才有人明白原因是什么。

          彌合鴻溝的主要困難在于,級別越高對經驗鴻溝的不了解程度越高。實際上,在組織架構的頂部,通常會找到造成鴻溝的根源。級別越低,離用戶越近,員工越能覺察到問題和差距,但他們往往沒有權力和能力去消除它們,他們受制于文化。

          在這種特殊情況下,售后部門每天都會接到數千個關于產品問題的電話,但由于業務流程分散,他們對此也無能為力。

          客戶的挫敗感變得更加強烈。即使是最簡單的日常場景,他們面臨的問題也難以執行,但他們從銀行員工那里得到的反饋是,他們并不是唯一產生困惑的人,而且目前銀行正忙于交付新功能,而不是修復當前問題。

          使事情變得復雜的是,經驗鴻溝背后的內部流程,是由過去促進公司生存和增長的相同機制引起的。該公司受制于過去的成功。就像諾基亞一樣,這家全球最大的以硬件為中心的手機工廠,在蘋果智能手機引領的軟件革命中被徹底擊敗。

          由于任何組織都有惰性,這些機制受到內在信念和價值觀的影響,對適應市場和彌合經驗鴻溝造成了阻礙。

          首先,應該在管理層面解決鴻溝。因此,級別越低,離領導層越遠,離客戶越近,就越能感受和認識到鴻溝的存在。自然,一線員工將擁有從那些期望沒有得到滿足的客戶那里得到最多的數據。

          四、7 種體驗鴻溝盲點 The 7 types of experience gap blind spots

          主要的體驗鴻溝可能是由組織中七個層次(文化、反饋、執行、設計、價值、品牌承諾、情感聯系)中的一個或幾個盲點造成的。

          你常常忽略的 7 個具有破壞性的體驗鴻溝

          1. 文化鴻溝

          在文化層面缺乏以顧客為中心的理念,員工無法使服務更接近客戶期望,導致了“文化鴻溝”。在具有“文化鴻溝”的公司中,有助于以客戶為中心的流程和活動都是處于低優先級的,相應的,它們也不會得到相關的資源。

          2. 反饋鴻溝

          缺乏關于客戶期望和他們對產品或服務的體驗數據會造成“反饋鴻溝”。在這種情況下,公司可能經常收集數據,但沒有對其進行分析,也沒有采取任何措施來改善這種情況。

          3. 設計鴻溝

          即使優先考慮以客戶為中心的方法,并且收集了大量有關客戶期望的數據,但在設計能力和方法上仍可能存在鴻溝。擁有合適的專業知識,就可以構建高質量的數字產品生態系統,從而根據客戶需求提供最佳服務。

          4. 執行鴻溝

          這種鴻溝與糟糕的設計執行有關。如果不優先以用戶為中心的來設計產品,那么創建最終產品和服務的決策和努力將注定是低質量和低效率的。這決定了公司在數字時代創造有競爭力的服務和產品的能力。

          5. 價值鴻溝

          如果設計生態系統在 價值金字塔的五個層次(功能、可用性、美學、地位、使命)上不符合用戶的期望,就會形成價值鴻溝。

          6. 過度承諾的鴻溝

          正如我在上述銀行案例中所表明的那樣,如果一家公司只顧著積極推廣其服務,承諾一些產品無法提供的東西,它會導致用戶對期望的更大失望。因此,由于廣告承諾與現實不符,對該服務的負面評價可能會翻倍。

          7. 情感鴻溝

          如果品牌傳播是純粹的信息傳播專注于功能特征,那么就無法與用戶形成情感聯系。由于人類基于情感做出決策,因此基于情感構建服務價值會對客戶期望和最終用戶體驗產生積極影響。

          五、彌合經驗鴻溝 Bridging the experience gap

          每個客戶都會不知不覺地根據自己的期望來評估他們所接受的服務。用戶體驗質量所引發的情感將形成品牌的聲譽。

          在現代世界,數字渠道已成為品牌的主要“營銷”和公關渠道。

          一個應用程序,即使有一百年的服務客戶歷史和其他渠道的優質服務,負面體驗也會破壞品牌推廣的所有努力。

          這僅僅是因為在數字時代,移動渠道占主導地位,對于某些人來說,它正在成為與品牌互動的唯一途徑。這就是為什么了解如何彌合數字產品出現的七個體驗鴻溝的方法如此重要。

          1. 彌合文化鴻溝

          在文化方面,轉型基于高層心態的改變,并將這種影響滲透到整個的公司文化和內部價值觀。特別是,可形成“以客戶為中心”的體驗思維模式。

          2. 彌合反饋鴻溝

          在銀行案例中,開始彌合反饋鴻溝的第一步,是深入了解社交媒體上的負面評論以及致電售后部門的電話。接近這些客戶才容易消除反饋鴻溝。事實上,他們比管理層更了解應解決哪些問題,并且往往渴望積極分享自己的情緒并希望得到傾聽。如果一家公司足夠開放并準備好接受批評,它可以使用這些數據來彌合鴻溝并提高產品迭代的敏捷性。

          3. 彌合設計鴻溝

          通過整合設計方法和設計思維來制定彌合鴻溝的策略,可以使用設計金字塔。該框架從五個層次(流程、團隊、行動、結果和價值)確定了能夠提高公司整體效率的設計集成。

          4. 彌合執行鴻溝

          組織必須將經過驗證的設計執行方法(例如設計思維、HCD 或 UX 設計方法)與分步系統相結合,以設計符合客戶期望并能夠彌合執行鴻溝的數字產品。

          5. 彌合價值鴻溝

          產品的功能級別為客戶創造真正的價值和利益并通過提供卓越的可用性進行功能擴展;美學 ——令人驚嘆的視覺識別;狀態 —— 針對產品特定受眾的個性化,最后是建立產品的價值觀與使命。

          6. 彌補過度承諾的鴻溝

          數字時代的客戶要求透明、關懷、誠實和開放的溝通。由于網絡效應,幾乎不可能銷售劣質產品,因為每個人都可以在社交媒體上發布負面反饋,而這些負面反饋將深深地損害客戶的信任。因此,做出不僅可以兌現,甚至可以超額兌現的承諾至關重要。

          7. 彌合情感鴻溝

          對客戶的同情和關懷比以往任何時候都更加重要。在品牌與客戶之間建立情感聯系對于確保長期忠誠度和需求至關重要。這種聯系是通過之前涵蓋的所有階段建立的——將客戶放在第一位的正確心態;收集反饋并在此基礎上進行改進;使用正確的工具和方法來創建產品設計和生態系統;創造真正的價值和利益,最后,通過誠實和超額兌現承諾。

          六、成為深受喜愛品牌的途徑 The pathway toward becoming a beloved brand

          該途徑涵蓋了可能破壞數字產品創造的 7 個主要體驗鴻溝以及可以幫助避免和解決這些鴻溝的 7 個橋梁。如果一個品牌能意識到這些盲點,它可以立即獲得比仍處于盲點的競爭對手的顯著市場優勢。

          僅憑意識就可以產生巨大的差異,但將意識與行動相結合會導致長期成功,成為一個需求量很大和深受喜愛的品牌。

          本文翻譯已獲得作者的正式授權(授權截圖如下)

          你常常忽略的 7 個具有破壞性的體驗鴻溝

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

          文章來源:人人都是產品經理  作者:TCC翻譯情報局

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

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

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


          如何從用戶角度出發打造產品體驗

          ui設計分享達人

          文章定位:

          好的產品能為用戶帶來高效的解決方案,在迭代升級中實現用戶價值。

          以下文章主要探討設計師 如何從用戶角度出發打造產品體驗,通過設計幫助產品帶來高溢價。

           

          01、用戶思維

          用戶思維最基本就是 圍繞用戶 去設計,幫助他們 解決實際問題。

          Q:為什么要圍繞用戶做設計?

          A:想將自己產品打造成為好產品,最終留住用戶。

          Q:什么是好產品?

          A:“讓產品自然生長,不要去碰用戶,不要去打擾他們,讓他們自然形成一種互動關系”。不要強塞東西給用戶,切切實實的在用戶需要的時候能快速給到他們價值,解決某個問題,或滿足他們的情感,情緒。

          即:幫助用戶解決實際問題,并提供解決該問題的優秀設計。

          所以設計師產出設計方案前需思考的是:

          1. 解決什么實際問題?

          2. 應該提供怎樣的設計?




          02、確定用戶面臨的問題點

          解決哪些實際問題是每個案子的核心,在該階段設計師常容易陷入誤區

          如:我要做 一個…東西、我要怎么怎么做……下意識的就去研究怎么做,而不是首要思考具體解決什么問題,該誤區到后期往往會造成設計偏離。

          為了避免該情況,首要需確定問題,并將問題清晰表述出來,表述的越清晰解決起來就越容易。

          那我們應該怎么去確定這個問題呢?


          – 利用同理性圖譜構建用戶認知

          好的設計需要與用戶心智相符合,貼合用戶當時情境下的訴求。

          為了讓優化方案更有依據,在發現問題的時候,需要從用戶視角出發,結合當前產品的頁面去分析是否符合當前用戶的訴求。

          ——可以采用 同理心圖譜 的方式:

          從 說了什么、做了什么、想了什么、感覺到什么 四個維度去勾勒用戶真實的想法感受。


          以下以優化案為例:

          在實際優化案中,可結合需改版頁面按照四個維度走一遍,可讓設計師更了解當前頁面幫助用戶做什么,后續有哪些優化方向。

          如:QQ支付頁面整體流程優化設計

          ① 用戶需給好友發紅包,在輸入完紅包金額點擊支付時,向上滑出了支付面板,用戶看到這個面板時候,其心理活動可能是怎樣的呢?

          ② 用戶想要更換支付方式,點擊更換后看到下方頁面,用戶對該頁面的的感受會是怎樣的呢?

          ③ 用戶輸入密碼后,以為馬上就成功了,卻發現卡里沒錢了,這時候用戶更加迫切的是什么呢?

          通過以上這樣 【移情】的方式,使我們更能了解用戶,在沒有用戶訪談的情況下對他們的 愿望、需求、訴求點 有個概念,當有了這個 共鳴 在后續就可以將這個共鳴變成一個有著明確優化方向的 問題陳述。


          – 自問自答式推理逐漸確定問題

          在挖掘用戶需求點過程中,可以采用不斷詢問不斷回答的方式,將自己腦子里想的直接寫出來,通過這樣的方式構建自己思考的邏輯。

          如:“在下單頁轉化率太低 > 在下單頁用戶無法快速驗證信息 > 在下單頁重點信息不集中,其余信息太顯眼 >…..”

          在這個過程其實就是刨根問底的過程,在反復的試錯過程中也會離真相更近。

          類似下面這張Julie Zhuo的自我審視圖:


          03、問題陳述(POV)


          – 什么是問題陳述

          通過陳述句將產品當前狀態(問題)和期望狀態(目標)的差距描述出來。POV有助于我們強調用戶痛點,保證自己將重點始終放在用戶身上。


          – 問題陳述怎么寫

          那怎么陳述才能更好的將問題及規劃表達好呢?以下有兩個方式:

          • 基于用戶角度來說:我看QQ群里搶紅包很熱鬧,我也想快速參與進去,但是輪到我發的時候,我因為我不是非常熟悉整個流程,導致我反應慢了,這讓群里的人以為我故意這么慢才發,影響大家氛圍,這讓我有點沮喪。

          • 基于用戶研究來說(4W):我們的初中生因為特別活躍,喜歡在群里踴躍發言參與活動,所以一旦群里有好玩的消息總是想第一時間參與進去。我們的解決方案應該 為他們 提供快速能夠完成紅包發送的鏈路與方式,不掃他們的興。

          以上兩種陳述方式都是針對同一個問題,只是表述方式不同。所以只要你足夠專注用戶,理解他們需要什么以及為什么需要,就可以快速構建你后續的設計方案。


          – 問題陳述注意點

          ① 用戶與他們的需求是問題陳述的核心,避免:我們應該怎么做、產品應該…作為開頭。

          ② 保持陳述的寬泛性,不要過早拋出細致的解決方案、技術限制等內容,避免團隊發散受限。

          ③ 專注一點,不要讓用戶的需求和目標過于寬泛,導致自己很難找到一個合適解決方案。所以不要視圖在一個問題陳述中解決太多用戶需求,一次解決一個就很好了。


          04、如何打磨設計方案

          在經過問題陳述我們對要解決的問題了然于胸,在解決方案上,設計師需要考慮 易用性、易理解性、及著力提升用戶任務效率,給用戶一個更好的體驗。面對不同的項目,可考慮以下幾點:


          – 結構簡潔,重點突出

          例1:


          該例子非常能體現出 訴求 與 解決方案 的契合。

          首先工作人員唯一的目的性就是 篩查 有問題的人,所以在眾多人中需 快速判斷,這個轉化到設計上解決方式:

          通過大面積的 色塊直觀反饋;

          通過實時的 滾動時間+滾動背景反饋真實性;

          在結合下方核酸與疫苗輔助判斷,整體非常貼合實際訴求,重點突出,有節奏感。


          例2:

          通過體驗核心信息,將內容合理布局,重點突出,操作劃分明確,有助于信息獲取與確定。


          – 管理復雜(滿足不同訴求)

          人的認知資源有限,天生不善于處理復雜信息,所以在面對復雜信息時設計師需將復雜的內容以一定秩序邏輯管理,分而治之,減少用戶的選擇,讓正確的行為變得自然和明顯。


          例1:

          在58二手車頁面的改版中,可以看出在面對不同用戶訴求的情況下在 模塊化結構 與 坪效 找到了平衡:

          頂部按鈕直接 分流 不同目的用戶;

          中間模塊展示用戶 最關心的維度:價格、品牌、車類型;

          下方 透出推薦內容 吸引用戶往下逛。


          – 注重情感化

          情感化不一定都是很精美的插畫、動效等表現層面上的,有時候 貼心的記錄、舒緩的內容、小游戲…… 也可以起到 情緒調節 的作用,提高用戶看到復雜信息的 忍耐度


          – 場景化設計(預判你的預判)

          多考慮用戶使用場景,挖掘一些場景是可以通過我們的設計 幫助用戶多走一步,幫他們排除障礙,減少負擔。


          例1:

          打車軟件在特定時間點自動浮出目的地,以及截圖后立刻打開微信聊天窗,圖片自動在對話框中浮出的方式都是通過用戶的行為預判了用戶下一步的行為,


          例2:

          用戶輸入密碼后下意識認為操作成功,但卻被告知失敗,對用戶而言是一次打擊,若這時直接前置化用戶后續可能會的操作,將條路徑重新接上,可以讓整個過程更加高效。


          所以在具體設計方案上,設計師需要不斷的去思考打磨設計方案,讓自己的設計:

          ① 顯而易見的,讓用戶體驗后覺得「沒錯,就應該是這樣」;

          ② 有價值的,它為用戶解決實際的問題;

          ③ 與用戶的心理模型相符,它不意味著更多的設計。



          05、驗證體系

          驗證方式有很多,目前市場上有幾大比較成熟的體驗度量體系,針對不同的關注點進行 定性+定量 檢測。

          除去性能表現外,主要都是圍繞用戶行為數據及使用感受來進行度量

          在行為數據上,主要關注:訪問頻率、留存率、頁面訪問次數…

          在用戶感受上,主要關注:滿意度、用戶評價、推薦度…



          – 設計師怎么確定自己設計方案的驗證指標

          對于設計師而言,不需要做的這么全面,我們只需要針對我們 具體優化頁面、場景 找到可以直接驗證的指標即可。

          例:

          在上述的發紅包支付頁面的優化設計中,由于主要優化的方向是為了讓用戶更聚焦,提升整體支付體驗,所以基于這個目的,我們可以以 整體的支付成功率 來驗證大致優化效果;

          其次,可以從 每個觸點的轉化漏斗、和 各頁面停留時長 上分析具體頁面改版效果。


          – 面向真實用戶驗證設計

          除去行為數據上的驗證,用戶真實反饋同樣重要,我們可以采用用戶調研的方式了解用戶對產品體驗的反饋,主要可以從下面三個方面執行:

          ① 可用性測試:可針對核心優化的功能點設定測評任務,來觀察用戶的完成情況,如:如果你余額不足,你會怎么做?

          ② 滿意度測試:采用界面可用性問卷調研,可以采用SUS問卷收集反饋

          ③ 推薦度測試:通過NPS量表來衡量,通過將分值劃分為:0~6分為貶損者,7~8分為被動者,分值高于8分為推薦者,帶入計算公式(NPS值=推薦者% – 貶損者%)算出推薦度數值,數值越高,說明用戶滿意度越好,用戶的推薦意向越高。


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

          文章來源:站酷   作者:小發歌

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

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

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


          正態分布模型在體驗設計中的分析及應用舉例

          ui設計分享達人

          B端產品往往都具有較長的業務流程和操作步驟,需要用戶循規蹈矩、通過較多的步驟找到相應的頁面,來觸達相應的用戶目標。落實到體驗設計中,需要設計師充分考慮用戶在操作路徑中的操作權重(頻率&停留時長),進一步以核心步驟為中心向路徑兩端延伸,完成頁面布局。


          如何分析和評估用戶在操作路徑中的權重呢?今天介紹一下,本人從統計學中借用的一個概念——正態分布模型,并將其應用到體驗設計的流程中。


          1 首先,什么是正態分布模型呢?


          正態分布,也稱“常態分布”,或高斯分布,是一個在數學、物理及工程等領域都非常重要的概率分布,在統計學的許多方面有著重大的影響力。


          如果一個指標受到若干獨立因素共同影響,且每個因素不能產生支配性的影響,不管每個因素本身是什么分布,它們疊加后影響的這個指標平均值就是正態分布。


          如圖:

          標準正態分布模型


          正態曲線呈鐘型,兩頭低,中間高,左右對稱因其曲線呈鐘形,因此,人們又經常稱之為鐘形曲線。


          標準的正態分布模型包含了中心極限定理的三要素,影響因素獨立,因素影響程度隨機但無法支配,各個因素之間是相加的關系。

          中心極限定理三要素


          當然,在體驗設計中正態分布模型就沒有那么復雜,而且用戶的操作也不是隨機分布。那如何在體驗設計中如何應用呢?


          接下來,介紹一下基于用戶體驗,提煉的正態分布模型。


          如圖:

          體驗設計中標準正態分布模型


          總的來說,體驗設計中的正態分布模型,是一種用來探討用戶在某一功能的操作過程(或產品的整個生命周期)中,操作頻率(權重)所集中的區間與頁面布局、信息架構之間關系的方法與思維。


          這個模型涉及兩個維度:

          一是帶有指向性的操作路徑(步驟/功能模塊),可以是一個功能的詳細、單一的操作路徑,也可以是一個產品從使用到停止使用的生命周期中,用戶對整體功能使用流程;


          二是頻率,操作路徑中的步驟或者核心功能被使用的頻率,即權重。這個維度可以直觀的反應出用戶的關注重點和高頻操作,便于后續的用戶引導及頁面布局等。


          將用戶的操作頻率按流程順序放置到坐標中,即可得到類似于正態曲線的圖形,直觀的反映出用戶在功能步驟(模塊)上的關注度。


          2 體驗設計中正態模型的類型


          根據分析功能的顆粒度不同,得到正態分布模型的驗證結果也不相同。


          由此,體驗設計中的正態模型,大體上可分為兩類:

          第一類是具體的功能(功能型),通過該功能的起始到完成,獲得該功能高頻操作及核心頁面,可有助于功能路徑優化及頁面布局、功能排布,讓用戶更方便的獲取高頻操作。


          第二是產品整體功能(產品型),通過用戶從使用到停止使用該產品的全部路徑,獲取用戶在使用產品時關注的功能,有利于明確產品定位、優化功能架構,在B端產品上還可以進行角色和權限的管理。


          接下來,我們就詳細探討一下兩種類型的正態分布模型。


          2.1 功能型的正態分布模型

          功能型的正態分布模型多用于優化產品功能及路徑。這種類型的模型關注更加聚焦,結論也更加直接,甚至可以直接應用到設計方案上。因此在分析功能路徑時,要簡化相關聯的分支路徑,避免其對聚焦問題的干擾,使分析結論更加精準。


          例如,一個手機TB的購物流程,如果要研究用戶購買行為,就需要更多的關注用戶對商品的選擇、比較等操作,同時簡化用戶的支付操作路徑;如果研究的是購物流程中用戶的支付行為,就應該相應的簡化用戶選擇產品的路徑。


          如圖:

          舉例:淘寶購物流程分析


          另外,這種類型分析結果的落地,需要格外關注功能操作路徑的入口及其他功能的銜接,保證在更大層級上的操作不會出現斷點,保證使用流暢。


          2.2、產品型的正態分布模型

          產品型的正態分布模型,可以看作眾多功能型路徑的簡化提煉版本,忽略操作細節,著眼于業務在功能模塊之間的流轉,多用于產品定位升級或架構調整。這種類型的模型是將產品的拓撲圖,按照用戶從開始使用到停止使用的的操作路徑(產品的生命周期),將其映射到坐標軸上,來直觀表現出產品的核心功能。


          如圖:

          產品型&功能型


          其結果屬于定性結論,在設計方案時更多的是參考意義,只有在進行產品定位迭代及架構調整時,才具有指導意義。因此,在不同場景下用合適的模型才能更具有說服力。


          正態分布模型的可以應用到B/C/G等多種類型的產品上,根據不同類型的產品,該模型還會有其他功能的擴展。


          例如,B/G端產品往往都具有長流程、多角色、多模塊的特點,當正態分布模型在B/G端產品上應用時,還可以清晰凸顯角色、權限的結構,有利于對用戶權限和角色的定義與管理。


          3 案例分析


          在本人所從事的安防行業中,實時報警的處理是較為高頻、且重要的業務功能。本文僅對功能型模型進行案例分析,希望該方法(思維)的表達更加清晰明確,也能夠幫到大家。


          3.1 業務概述:

          實時報警的業務流程大致是這樣的:在監控中心或崗亭,保安人員對園區的安防狀態進行警戒時,如果有異常狀況觸發了報警,系統會反饋推送給安保人員,安保人員通過錄像抓圖等信息判斷報警的緊急程度以及處理方式。


          3.2 業務定性

          該功能是典型的“海島事件”,具有偶然性和急迫性的特點。所謂海島事件,是本人對具有偶然性與急迫性特點業務的概括統稱,后續可以寫文章專門探討該問題。


          3.3  場景推演

          安保人員每時每刻都全神貫注監管整個區域的安全狀態,是不可能的,更何況這類海島事件呢?所以,在發生報警時安保人員大概率處在“摸魚”狀態。



          當有報警進入時,安保人員第一時間需要確認的是報警的類型以及位置,從而快速判斷如何處理。只有當報警信息不明確時,安保人員才會進一步通過錄像、抓圖、關聯的監控來進一步判斷報警信息。


          實時報警場景推演


          3.4  報警業務處理的正態模型分析

          在整個場景推演過程中,用戶的關注重點是報警詳情以及報警信息的確認過程,會有較少的概率查看輔助信息,因此需要保留輔助信息的入口。


          如圖:


          3.5  方案展示

          方案采用瀑布流式,高權重的關鍵信息擁有更高的頁面權重,用戶可以快速獲取信息,以判斷處理方式。同時,漸進式展示確認信、輔助信息,如抓圖、錄像、關聯視頻等,一方面可以減少對用戶決策的干擾,同時能夠快速獲取這些信息,輔助用戶做出判斷。


          由于方案涉及到公司項目,所以方案不方便直接展示,這里只展示頁面信息布局。



          我們都知道,在頁面縱向布局上,隨著視覺流的下移,用戶的關注度會逐步降低,因此,在實時報警處理頁面布局上,將從上到下信息的重要性逐級降低。


          首先是實時報警處理的核心區,分為兩個部分基本信息區與視頻輔助區,這兩部分信息是判斷實時報警性質以及處理方式的主要依據。其中,基本信息區是最重要的,用戶可以根據報警的基本信息,來確定如何處理報警。對于大部分的報警信息,用戶可直接判斷報警是否需要處理,或是進一步的確認及驗證,盡可能的減少用戶的操作;因此,報警的處理入口,緊隨基本信息。


          而視頻輔助區是對部分報警的回放確認,是在查看基本信息后的進一步操作,頻率相對較低,因此雖然屬于核心區,但是層級卻低于基本信息的展示。


          輔助驗證區放置的報警期間的連續抓圖,可以滿足用戶的放大查看,進行報警輔助確認,隨著用戶視覺流下移,其重要程度迅速降低,相應的操作的步驟也較為復雜,頁面視覺權重也有較大的壓縮。


          最后,對于極少的報警信息,用戶需要通過關聯視頻的信息進行驗證,可通過頁面底部的關聯視頻入口,點擊展開關聯視頻浮層,進行報警信息驗證。這是整個實時報警的最后一個層級信息展示。



          4 寫在最后


          正態分布模型不僅僅是一個工具、方法,同時,也是一種設計思維。


          在設計之初,充分理解功能的定位,完善功能入口,讓用戶更容易觸達產品的核心功能。然后通過核心功能向業務兩側進行延伸,進而覆蓋整個業務,完成產品的框架與流程的構建。


          在設計之中,關注高頻的核心步驟,讓用戶的高頻操作具有更簡便的操作空間,把用戶更想知道、更想操作的內容推送到用戶面前,讓用戶在整個操作流程中的操作頻率與頁面布局的權重分布相匹配,而不是想當然。


          只有這樣,設計才更具價值,才能培養更忠誠的用戶。

          文章來源:站酷  作者:體驗設計思

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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