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

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

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

          首頁

          【設計理論】UI設計體驗如何提升?

          ui設計分享達人

          前言

          SaaS 產品體驗要求越來越高,用戶體驗已經成為產品競爭力的重要組成部分,怎樣在多業務線的產品環境中做好體驗設計,本文從貼合業務線的設計規范、敏捷易用的前端組件庫、產品研發協作流程保障、UI體驗文化打造、UI設計質量品控5個方面闡述項目快速、規?;嵘喈a品線整體體驗過程中方法論和實踐經驗。



          關鍵詞: 

          用戶體驗設計;UI設計規范;多產品線;體驗文化;UI設計落地



          面對多產品體系,多產品線,需要積極尋找和探索適合我們客觀情況的最佳實踐,我們面臨的問題有:

          1.過往以功能堆砌為主、基本“能用”,缺乏平臺規范和一致性,體驗不足。

          2.產品線多、體量大。

          3.客戶對產品體驗要求越來越高。

          4.產品歷史包袱、修復改動困難。

          5.對用戶體驗認知不一,協同、溝通成本高。

          6.重復的開發成本。

          7.第三方組件與業務的匹配度不佳。



          解決以上幾大難題,我們啟動了UI 設計規范的搭建、UI組件庫的開發等,讓規范和組件庫成為各產品線堅實底座的一部分,使用戶體驗文化賦能前端和產品經理,協同 QA 力量一起推動產品體驗升級,以下整理分享的實踐方法適用于中小型UED團隊支撐復雜、多業務線的企業,本文嘗試從以下幾個方面總結和提煉實踐經驗,跟業界同行探討。

          貼合業務線的UI設計規范

          設計規范體系的搭建對于新的團隊,如何從復雜海量的業務場景中制定出一套適用于自己產品的UI設計規范,是第一道待翻越的高墻,完整的設計規范應該是包含視覺規范與交互規范,本文主要針對設計規范實踐過程進行闡述。

          貼合場景的設計規范: 

          雖然市面上已經有眾多成熟的設計規范體系可供使用,但是當前我們所處的產品階段、多業務 線以及復雜的業務場景等綜合因素,決定了需要重新搭建一套符合我們自己業務場景的設計規 范體系。



          UI規范效益最大化:

          一旦我們決定制作規范,就要把規范當成一個產品去做。去梳理一套高效合理、可復用的制作流 程,去分析產出什么樣的「規范產品」才能產生最大的價值。 依據規范效益模型,在規范的制定中盡可能的提高規范的通用性至90%,先解決統一性,再解決場景細分,打造高質量通用的模式庫以提高質量和效率,并力求讓更多人從這套設計體系中獲益, 從而讓規范體系發揮更大的價值。



          UI規范制定的策略: 

          明確用戶對設計規范的訴求,構建適合產品的UI設計規范,首先,需要明確規范體系的用戶群體經過設計團隊多輪調研,確定設計規范面向的目標用戶群、基于核心用戶的訴求,為后續規范內容框架的制定提供依據。



          確定UI設計價值觀: 

          產品歷史包袱重,系統結構復雜,在提升用戶體驗時,內容表達「清晰明確」是第一要務,例如尊重已經形成的用戶習慣,優化改造時,注意版本之間的銜接,讓用戶「清晰明確」,這也是為什么將「清晰明確」作為價值觀之首,另外提升效率是企業級產品用戶體驗的永恒主題,同時兼顧系統的簡潔與一致。



          梳理UI規范框架: 

          UI設計規范包括設計價值觀、全局規則、組件庫、模式庫、典型頁面、移動端規范和設計資源框架整理主要從以下3個方面進行:

          1.梳理現有組件,剔除不使用的部分 。? 

          2.同類競品的框架借鑒,查漏補缺。 ? 

          3.場景驗證,與業務場景深度結合經過充分論證和梳理,對規范框架做了重新定義,增補了業務缺少的內容。

          如上圖所示,例如對高頻的工具欄組件的補充,典型頁面的補充,增加模式庫以及全局規則,當前第一個版本的規范框架是基于業務場景優先級最高的內容進行制定,更多的規范內容的增加依托于不斷的迭代,逐漸完善規范框架。



          規范內容的制定及評審: 

          組件規范包含:變更記錄、組件定義、何時使用、組件的類型、組件的響應。



          規范內容制定的原則: ? 

          1.有明確場景可依。? 

          2.精簡不必要的分支 例如在定義表單規范時,對于表單標簽的對齊方式做了統一的約束,標簽右對齊,輸入框左對齊全局保持統一。



          邏輯正確、規則明確易懂: ? 

          例如常見的alert (警告提示)名稱調整為常駐提示,語義更貼合場景,便于理解。



          規則的可拓展性,多場景的兼容性: ? 

          產品架構是PC端到移動端的自動適配,因此在組件設計的時候需同時考慮PC端與移動端的對應關系以及兩端場景的兼容性。



          協作及敏捷迭代: ? 

          規范發布后,伴隨著實際項目的檢驗,業務場景的擴充變化,如何高效的對設計規范進行迭代,決定了設計系統能否持續的走得更遠,規范內容定期評審,必須通過業務、技術、設計評審,確保規范是可用的、可落地并且易于使用的規范后期不同的規范模塊專屬人負責,同時有backup,可以幫助走查復盤雙重保障規范的質量。



          敏捷易用的前端組件庫: ? 

          復雜的業務場景和多產品線特點,快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫,是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。

          敏捷易用的前端組件庫

          復雜的業務場景和多產品線特點,快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫,是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。 

          前端組件庫建立目標: ? 

          1.提高開發效率,對高頻使用、通用組件進行代碼化封裝,避免重復開發工作。 ? 

          2.提高開發質量,通過各類業務場景和業務線的錘煉,沉淀組件代碼最佳實踐。 ? 

          3.提高產品體驗,組件封裝代碼化,減少在多角色協同中因為理解偏差、信息傳遞問題等導致的不確定性和結果不可控性,不同業務線、不行項目、共用一套基礎代碼,保證體驗的一致性,組件的組織形式: 結合實際業務場景和原子設計理論,將組件劃分為不同顆粒度:基礎組件、業務組件、典型頁面 組件,以適用于不同研發場景使用。



          1.基礎組件,基礎組件為組件庫最小顆粒度,構成系統界面的基本構件。 ? 

          2.業務組件,在基礎組件的基礎上,結合具有共性業務特征的業務場景,梳理出具有業務特征的 業務組件。 ? 3.典型頁面組件,梳理具有業務特點的典型頁面,相比基礎組件和業務組件,典型頁面更加具體, 為用戶提供具有代表性的內容和框架,并準確描述用戶最終看到的內容。如列表和左樹右表典型 頁面組件,作為最為常見的頁面結構,各業務場景可復用頁面組件,保證了頁面組件內各基礎組 件的一致性,最大程度的實現不同產品線產品中頁面體驗的一致性。



          推進前端組件庫落地執行: ? 

          前期設計規范落地到組件庫過程中,面臨諸多問題和阻礙,比如開發落地質量不高、內容遺漏、 各方理解不一致、驗收及修復問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗, 通過總結復盤前期組件庫落地時的經驗和教訓,梳理落地執行流程,在新的協作流程下,新一 批的組件開發不論在協作效率和開發質量上都有質的提升。

          分層推進: ? 

          組件庫開發是一個持續迭代的過程,考慮到組件庫開發資源極為有限且無專職負責人員,在跟組 件庫開發團隊協同過程中,我們通過分步開發來解決組件庫更新優化的問題并通過不斷優化協作流程來助力組件庫高效落地。 

          前端組件庫分步開發原則: ? 

          1.優先級原則,優先開發適用于業務線普適場景的組件。 ? 

          2.緊急性原則,對于急需的業務線所需組件優先開發。 ? 

          3.快速可實現原則,開發實現成本高的組件暫緩處理。



          自查走查驗收: ? 

          組件UI責任人梳理出下屬組件需開發落地的細節點,整理為文檔,待開發人員完成組件開發后,自行參照UI提供的自查文檔,查漏補缺,保障進入UI驗收環節的前端組件不會出現較多的缺陷,降低后期走查和溝通修改的工作量,同時監督開發人員提高組件落地還原度和質量。



          組件庫的持續迭代: ? 

          UI團隊通過一套標準的流程來把控組件庫迭代的質量,在日常工作中經常會收到產品經理或項目 方提出新的組件需求或對現有組件的優化。UI部門作為推動組件庫搭建的核心環節,需要以全局 和更深入的視角加以判斷把關,保證前端組件庫內容的普適性和高質量,避免組件庫內容冗余, 降低研發維護成本。



          產品研發協作流程保障: ? 

          好的過程是好的結果的有力保障,一個業務需求從產生到開發落地需要經過多角色協同、一系 列環節。必須依靠規范的研發協作流程,確保各角色清楚自己職責以及如何跟上下游銜接,同 時我們也希望協作流程能夠確保設計資源可以向重點業務模塊傾斜,以及發揮各個角色可以發 揮的作用去共同提升產品體驗。

          UI角色需融入規范化的研發流程

          UED團隊建立之初,我們面臨的首要問題是:需求隨機,完全取決于各產品線和產品經理 個人,為了解決這個問題,我們制定了UI融入研發體系的流程以解決合理、有效利用UI資 源的問題。 

          企業級產品特點、多業務線、大量面向管理員用戶的具有相似頁面結構和交互模式的業務 模塊、產品經理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉到UI團隊進 行設計,在判斷哪些需求需要流轉至UI團隊設計時,我們給出了如下指導性方向: ? 

          1.用戶量角度,大量終端用戶使用的場景,例如訂票、報銷、采購頁面 。 ? 

          2.用戶重要程度角度,核心、重要用戶使用的場景 eg.公司領導、決策層。 ? 

          3.通用性角度,通用組件或框架,需要UI通盤考慮各個業務線場景需求進行設計。 其他需求則主要由產品經理進行設計,UX以評審方式輕度參與。



          協作流程迭代,UI驗收成為必要一環: 隨后我們又面臨新的問題:設計還原度差,被公司老板生動的形容為:看設計稿是“精裝修”, 開發落地后就成了“毛坯房”了。為盡可能確保設計還原質量,我們在研發流程中明確了所有涉 及前端頁面的功能需求都需要在研發協同工具中流轉到UI負責人驗收,在產品團隊TAPD中記 錄UI缺陷、標明嚴重程度,對于 “嚴重” 級別以上UI缺陷,禁止發版。



          UI工期評估合理化: 

          為了既能盡力配合各產品線迭代計劃又要爭取合理UI設計時間、保證產出質量,合理評估設計周期對UI人力管理尤其重要。對此,我們對設計需求分成了ABC三級進行評估。 對于A和B級需求,通常模塊較大,先有UI設計方案再去分期迭代開發,對于這兩類需求,在評估 模型中給出了大致工期概念,比如以月為單位,大于1個月或2個月。 

          對于C級需求,通常為產品經理先排進某個迭代再來提UI設計需求,設計范圍相對明確,我們則結合典型頁面數量因子和設計難度因子給出了UI工期大概評估公式,以天為單位。 ? 

          1.設計難度因子:根據業務線的復雜程度而定,范圍為(0.8~1.5)。 ? 

          2.典型頁面數量因子:評估需求范圍規模(N)。



          設計體驗文化打造

          UI設計團隊在協作過程中面臨諸多挑戰:產品線多、產品邏輯復雜、研發鏈路長、各級人員對產品認知及重視程度不一、好的體驗設計難落地、溝通成本高等問題,想要解決這些問題,若僅靠UI團隊自身力量是不夠的,需要動員公司各個環節和人員重視用戶體驗,共同促進產 品體驗提升。

          搭建體驗文化灌溉機制: 

          UI部門通過多維度的體驗知識內容矩陣、多渠道多場景全員覆蓋,普及和加深各級對產品體驗 價值的認識,提升產品體驗思考力和洞察力,幫助企業以新的視角思考業務、產品研發和用戶 體驗的關系,賦能產品經理及研發人員高質量的輸出,“以用戶為中心”和“打造產品極致體驗” 的價值觀根植與企業文化中,指導研發流程中各項工作最終影響到產品的戰略層、范圍層、結 構層、框架層和表現層這5個產品體驗維度,以實現企業產品的“極致產品體驗”目標。 通過搭建體驗文化灌溉機制,提升全員體驗意識,能為產品研發帶來長久的價值: ? 

          1.提高設計還原度 ? 

          2.減少培訓成本 ? 

          3.提升跨部門溝通效率 ? 

          4.提升UI團隊影響力 ? 

          5.提升客戶滿意度



          體驗文化落地實踐: 

          針對不同類型的體驗知識,我們采取不同的傳播渠道進行透,以期達到最好的效果,避免形式化, 將體驗文化滲透、學習落到實處,最終影響產品研發的各個環節。

          以下為UI團隊在企業體驗文化 推廣的主要渠道和方法: ? 

          極致體驗公眾號主要發布產品體驗的基礎原理,體驗價值、項目復盤、常見體驗問題等深度長文。讓公司各級人 員認識用戶體驗及價值,讓用戶體驗理念深入人心。 ? 

          體驗知識小卡片整理產品體驗小的知識點,閱讀學習成本低。利用員工碎片時間,對細小體驗知識點的學習,積 跬步,至千里。 ? 

          直播宣講針對重點且復雜的產品體驗內容,如交互規范宣講、重點問題復盤、產品經理及開發人員應知應 會的知識點,采用宣講直播的方式,更好的對內容進行詳細解說和疑難問題溝通。 ? 

          體驗調研分享UI部門成員對核心競品進行體驗調研,整理分析后對產品經理及相關人員進行分享,賦能產品經 理,為產品的體驗設計提供新的思路。



          UI設計質量品控

          UI團隊專業水平一定程度上決定了公司產品體驗的上限,持續提升UI自身專業輸出能力可以從源頭提升公司產品體驗。 

          設計自查: 

          企業級產品的大量體驗問題都是設計基礎問題。因此需要設計師不論在內審前,還是內審過程中都要牢記設計原則,查漏補缺,守住底線。我們在部門內部制定了一套適合企業產品的UI自查表來檢查設計方案,通過這些自查點來避免產品中出現基礎體驗問題,從UI設計師自己這里 把好第一道關。



          在日常工作中,UI自查表始終占據工區的醒目位置。在評審過程中,大家也會通過線上文檔的形 式來對設計原則的條目進行逐一檢查。



          做好UI內部評審: 

          設計團隊內評審(Design critique)是幾乎所有國內外設計團隊的普遍、經典做法,可以有效提 高設計產出水平、保證團隊對外輸出質量。方法是普適的,但具體執行時如何做才能有更好的效果卻各有各異。 在如何做好內部評審上,我們進行了如下嘗試。 從“全員參與” 到 “組成內部評審委員會” 團隊內評審時邀請全員參加,但發現只有少數同事發言,另外一些同事因資歷淺、不了解評審產品或者積極性不高給不出建議。同時隨著團隊成員數量從幾個增加到十幾個,評審會議的時間成 本大大增加。 

          選取團隊內相對資深和積極提出問題、建議的同事組成內部評審委員會,以月為周期輪流進行, 可以有效分散評審委員在團隊內部評審上的工作負荷,并明確一次UI內部評審除了內部評審委員 會還有哪些關聯同事需要參加。 關于邀請評審內容關聯同事,比如“消息中心” UI評審跟另外一位同事負責的“討論消息”有關聯,則需要邀請這位同事一起評審,以便發現關聯問題,整體考慮設計方案。 

          以上參與評審機制明確在團隊內部協作工具上,做到人人清楚。另外,對于評審建議,要做到有 記錄、有回應、有跟蹤,確保有效發揮了內部評審的價值。 



          UI設計師的能力模型:不言而喻,UI設計師自身能力的培養是UI品控的重要一環。因此對于設計師能力培養通道上,我 們引入了以下模型。



          我們將UI設計師能力歸納成了3x3能力矩陣。這可以設計師在工作中也可以有目的提升自身薄弱環節,同時也讓企業對UI設計師的要求更加清晰,除此之外,我們要求UI設計師也需要多了解業務和前端知識,往前多走一步,跟上下游角色更好的銜接,一方面,UI設計師需要理解業務,要能夠有半個產品經理的業務知識儲備, 如果能站在更高的行業視角對自己所服務的業務領域(向 業務產品經理再邁進一點)有一定的理解是更好的了,另外一方面,UI設計師跟自己的下游-前端 開發工程師也需要很好的銜接上,知道相關前端技術概念、基本頁面布局和交互實現邏輯、方法,能夠無縫地將界面和交互設計翻譯成前端可理解的語言。



          產品體驗提升關鍵取決于兩個重要因素:一是設計團隊的專業能力水平;二是結合企業實際情況,將“不斷提升產品體驗”融入到每個相關角色的具體工作中。在企業中,小規模UED團隊支撐復雜、多產品線產品體驗快速規?;嵘沃氐肋h,我們會持續在未來的實踐中積極探索切 實有效的方法。


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

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

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

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

          【設計理論】UX交互設計中的文案規范

          ui設計分享達人

          文案的重要性:


          說到文案在交互設計中,我們需要通過對話的方式和用戶產生共鳴,精準、清晰的語言會更容易讓用戶理解,合適的語氣更容易讓用戶建立信任感,因此在界面設計時,文案運用也應當被重視,在使用和書寫文案時有以下幾點需要注意:

          1. 從用戶或角色的角度出發,角色換位思考一下,所謂的「同理心」理論;

          2. 表述一致;

          3. 重要的內容放在顯著的位置;

          4. 專業、精準、完整;

          5. 精簡、友好、正能量;

          在界面中,文案是我們與用戶或角色溝通的基礎,語言文字的表述也需要精心推敲,仔細設計;清晰、準確、簡潔的文案設計能夠讓界面擁有更好的可用性,同時讓用戶體驗更加友好;

          接下來就是要明確表述立足點,這個很重要,在表述內容時,關注點應該是用戶和他們能用你的產品做什么,而不是你和你的產品在為他們做什么,所以內容表述立足點很重要;(當用戶向后臺反饋問題、提出建議或申訴時,使用「我們」是合理的語境,例如「我們將會審核你的申訴」);


          舉個例子:






          精簡語句:



          省略無用詞匯,不重復用戶已知事實;在絕大多數交互場景下,都無需界面描述出全部細節,盡量提供簡短、易于快速獲取的內容;

          例如:







          使用用戶熟悉的語言:



          使用簡單、直接、易于理解的詞匯,讓內容和指示更容易被用戶接受和理解,間接、曖昧模糊的說法,生僻和過于“文雅”的用詞,會增加用戶的認知成本,所以應當盡量避免使用這類用戶無法識別的詞匯;

          例如:





          表述一致:



          描述同一個事物的詞匯要保持統一;上下文的語法、語種、語序要保持統一;操作的名稱和目標頁面標題的名稱保持統一;

          例如:








          重要的信息放在顯著位置:



          讓用戶第一眼看到最重要的內容,不用到段落中尋找;(如果考慮安全性問題時,隱私信息也可調整為「點擊后可見」的方式)

          例如:





          完整、直接得闡述信息:



          當我們希望用戶進一步操作時,要專注于用戶能得到什么,以及用戶的感受;在操作前引導告知用戶操作的目的或重要性,能促進用戶更愿意去執行;

          例如:




          報錯是 UI 中常見的功能,它同樣是用戶體驗中不可小視的組成部分,當用戶填寫的內容出錯的時候,你的報錯信息應當符合用戶的認知,用易于理解的方式表述出來;




          用詞精準完整:



          通用基本用語,要規范,不能出現錯別字,詞語表達完整;專業用語要精準,并且是所屬行業認可的通用語言;時間的表述必須要明確;

          例如:




          這邊列出一個語言模度的表單給小伙伴們參考:





          語氣運用規范:

          語言定義的是內容,而情緒和氣氛更多的是通過語氣來表達,并且同樣的內容面對不同的用戶我們可以使用不同的語氣來表達;例如,我們對應專業的運維人員和小白用戶應該有不同的表達方式;



          拉近彼此的距離:



          直接使用「你」、「我」來和用戶對話,與用戶建立親密感,避免使用「您」,讓用戶感覺太過疏遠;

          例如:





          不要在同一個句式中混用「你」和「我」,交互中指代混亂會讓用戶產生疑惑,增加用戶認知負擔;

          例如:




          友好、尊重用戶:



          多給用戶支持與鼓勵,不要命令和強迫用戶;如果你想留住你的用戶,當出錯的時候就不要責怪用戶,專注解決問題而不是指責;

          例如:





          表述不能過于極端:



          不要使用過于絕對的表述,這樣會讓用戶感覺不適;

          例如:




          大小寫和標點符號:



          英文名詞大小寫規范:產品名稱全稱,首字母大寫;產品名稱縮寫要全部大寫,例如:SEO、SAP等;整個單詞都大寫不利于閱讀和識別,應盡量避免這種用法;

          例如:




          正確使用專有名詞的大小寫規范

          例如:




          全英文的標題,標簽,菜單項等等都要遵循英文句式中首字母大寫的規范

          例如:




          統計數據使用阿拉伯數字:


          這是常見問題,用戶對于數字的感知速度更快,使用數字而非文字表述會更加有效;

          例如:




          省略不必要的標點:


          為了幫助用戶更加高效的掃視文本內容,可以省略不必要的斷句點;

          以下元素單獨出現時可以省略標點:

          A. 標簽

          B. 標題

          C. 輸入框下的提示

          D. 懸停文本中的提示

          E. 表格中的句子





          以下元素單獨出現時需要加上標點:

          A. 多句或多段的文案和列表內容

          B. 任何文字鏈前的句子





          感嘆號使用規則:


          感嘆號會讓文案顯得過于激動,容易讓氣氛變的緊張,功能類少用;但是向用戶表達問候或祝賀時,使用「!」是合理的的語境,例如:「歡迎回到社區!」

          例如:




          基本標點規范:


          正確使用標點符號會讓句子看起來更加清晰和具有可讀性;具體使用可以看一下 1995 年中國標準出版社出版的《標點符號用法》,以下展示設計中需要注意的部分;




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

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

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

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

          探索“B+C”,為B端體驗加Buff

          ui設計分享達人

          在如今用戶為王的時代,用戶體驗成為一種新的品牌競爭力。隨著技術進步和體驗意識的普及,習慣了C端產品流暢愉悅的體驗,用戶對B端產品體驗的期望也越來越高。

          B端C化的概念也由此產生,但B、C端有著本質區別,C端的設計思維無法完全復用到B端,那是否可以基于B端產品特征,融合C端體驗設計思維,即“B+C”來幫助提升B端產品體驗呢?本文聚焦在探索如何通過“B+C”的設計思維,提升B端產品體驗。

          一、B、C端產品定義與差異

          我們先簡單了解下B、C端產品各自的定義。B、C端其實是以使用對象的類型,來代指的產品類型,C指個人消費者 (Customer) ,B指組織 (Business) ,這個組織可以是個人、公司、政府或機構,因此B端模式也是多樣的,除了B2B,還有B2C、B2G等。
          C端產品幫助個人解決生活場景中的需求痛點,提供人們消費的物質、信息和情感。常見產品類型有工具類、內容類、社交類、游戲類等,如滴滴、知乎、微信、王者榮耀等。
          B端產品幫助組織實現其商業目的,提供商業的工具、方法和服務。常見的產品類型有:CRM 客戶關系管理、ERP 企業資源計劃、OA辦公等,如企業微信、金蝶、釘釘等。
          下面我將從產品設計的角度,分析B、C端的差異化。

          1、設計原則的差異

          C端產品主要通過流量轉化獲得收益,因此人的注意力和使用頻率是關鍵,所以設計原則為“UCD”(User Center Design)以用戶為中心的設計。
          B端產品主要是為了能高效解決行業業務問題而存在的,所以其設計原則是以效率為中心。

          2、功能流程的差異

          C端產品主打一個滿足用戶核心痛點的功能,通過這個核心功能明確產品的特性和定位,附加N個增值功能,提高用戶粘性,加之創新和趣味性,保持與競品之間的差異化。
          B端產品功能重全面,為的是能滿足組織的各種業務需求,組織的業務邏輯通常就是產品邏輯,功能流程也由業務場景轉化而來。

          3、交互邏輯的差異

          C端產品是單線程操作,完成一項任務后才能進行另一項。碎片化的使用場景和廣泛的用戶群體,使得C端產品必須信息簡潔、容易上手、操作路徑短,否則將會導致用戶流失影響收益。

          B端產品是多線程操作,支持多個任務并行。交互以優化業務流程,提升用戶操作效率為主,關注信息架構,清晰的信息架構能幫助用戶在呈網狀的功能和交織的流程中,定位到自己所在功能頁面,找到所需的有效信息。

          4、視覺表現的差異

          C端產品視覺設計風格多樣,如賽博朋克、孟菲斯、3D、酸性設計等,注重情感化表達和氛圍的渲染,加上短視頻和直播,讓用戶沉浸其中。
          B端產品視覺服務于功能和信息的傳遞,視覺元素較為簡潔,常用色彩對比的形式,建立內容邊界和視覺層次。

          二、如何用“B+C”思維提升B端產品體驗

          無論是在設計原則、功能流程、交互和視覺方面,B端產品與C端產品都有比較明顯的差異。基于以上差異,結合B端產品特征和C端體驗設計思維,我們可以從以下三個方面提升B端體驗:

          視覺—降低認知負荷

          B端產品講究屏效,看得多通常比看的美重要,信息密度高,則屏效高,卻也相應的會增加用戶的認知負荷,因此我們需要為用戶認知減負。
          交互—以用戶效率為中心

          從用戶的行為和感知出發,本著以用戶為中心的原則提升操作效率。

          情感—關注情緒感受

          關注體驗過程的“峰”與“終”,提升用戶整體的體驗感受。
          下面我將結合實際工作案例,講述如何用“B+C”的設計思維,提升B端產品體驗。

          【案例分享】

          Speedshop Omnichannel(下面簡稱為Omnichannel)是款針對國內及東南亞中小商家,統一管理多渠道商品、訂單、交易、會員的ERP系統。
          目前共支持Lazada、Shopee、Tokopedia、抖音等7個渠道,最多可管理100個線上店,集訂單管理、產品管理、會員管理、聊天、導入導出等功能為一體,服務超40,000商家。

          視覺 — 降低認知負荷

          對信息的識別和處理是認知負荷的主要來源,在視覺層,我們主要解決的是信息識別帶來的負荷,信息識別就是用戶看到內容并選擇的過程,B端產品有信息量大,選擇多的特點,降低認知負荷也將圍繞這兩點進行。

          1、優化信息展示

          / 符合用戶訴求

          B端產品根據用戶規模的大小,可以分為大B (一定規模的中大型企業) 和小B (小微企業、個人創業),兩者對信息的關注點和訴求不同。

          表格是B端產品最常用的信息展現形式,且能將信息有序、高效、直觀的傳達給用戶,避免信息堆砌帶來的認知負荷。

          比如同樣是訂單頁,大B用戶的訂單數據量龐大,且訂單通常是自動流轉的,無需手工操作,所以針對大B用戶,表格信息展示有兩個側重點,一是增加信息密度,二是幫助用戶能夠快速精準過濾信息。

          小B用戶的訂單數據量相對較小,且以手工處理為主,所以在展示訂單時,可以將關鍵信息整合,通過將信息進行分層、分組的展示形式,降低單頁面信息的復雜度,還可以通過各模塊之間字體大小、顏色、圖標、間距等手段將信息層次區分開。

          / 豐富信息展示維度

          還可以通過圖形化、可視化和視頻的形式,豐富信息的內容維度,化抽象為具象,讓信息能更高效的傳達。

          在Omnichannel中,用戶需要完成新手配置后才能使用產品,進入首頁看到的是任務型的引導,通過圖形輔助任務說明,豐富畫面的同時還能增加產品的親和力。

          B端產品由于業務的復雜性和技術的局限性,通常操作沒有那么靈活,需要遵守一定的使用規則,傳統的做法會通過文字說明的方式傳達給用戶,面對一長段的規則說明,讀幾遍還不一定能理解。

          比如在導入產品時,規則內容多且邏輯復雜,可以將內容可視化,使其易于傳達和理解。

          視頻比文字的畫面感更豐富,傳播的內容也更加具體,在幫助中心,圖文的基礎上增加視頻,幫助用戶更高效的獲取幫助信息。

          2、提供個性化配置

          B端產品通常包含多種用戶角色,每個角色的需求關注點不同,為了滿足各角色的需求,單頁面信息往往會出現超負荷的情況。
          我們可以借鑒C端的個性化,對于非業務性的功能,允許用戶根據自己的需求和工作習慣進行自定義。
          比如下圖,在列表頁,我們為用戶提供了自定義篩選條件和表格字段的設置。

          3、提供有效決策信息

          由于業務復雜,保障功能的全面,帶來的結果通常是操作和選項較多,如果沒有任何指引,B端產品的用戶通常無法做出合適的選擇。
          比如下圖的添加商品,根據不同的使用場景,產品為用戶提供了三種添加商品的方式:

          只有三個選擇,看似沒有任何操作難度,但用戶面對未知功能時,通常會根據自己過往的工作經驗,選擇熟悉的功能,這樣一來,可能會誤增了工作量,因此在設計上,要提供輔助介紹說明,幫助用戶決策。

          我們在此基礎上,為第一次使用該功能的用戶又做了優化,除了消息提示框,還通過標簽強化視覺重點,推薦最適合新用戶的選擇,添加商品的文案也改的更通俗易懂。

          交互 — 以用戶效率為中心

          1、  提升用戶行為效率

          無論B端還是C端產品,都有一個共同的體驗目標:提升操作效率,高效率意味著用戶通過更少的操作,更少的時間完成任務,實現降低成本的目標。在C端產品中,常見的提升效率的方式有:1、根據用戶行為的流程分析,推薦相應功能;2、聚合用戶行為,縮短操作路徑;3、轉移用戶操作成本,讓產品承擔更多的用戶引導、行為判斷和行為記憶,我們可以從以上幾點切入優化B端操作效率。

          引導用戶操作

          在C端產品中,經常會有根據用戶的操作行為,產品給出相應的推薦操作,如截屏后,在用微信發信息時,系統會提示是否要發送截圖,這種在操作過程中增加相關功能的曝光或引導,提高用戶操作效率的同時也不影響流程的順暢進行。
          下圖是商品管理頁,用戶首次進入時,可以根據用戶觸發的操作推薦相關的幫助引導。

          手動創建商品時,需要完善很多商品信息,可以為經常出錯的內容預設提示,先發的避免用戶出現錯誤。

          在收起/展開菜單欄時,提示快捷鍵功能。

          / 優化任務路徑

          B端產品中通常會有一個任務關聯一些子任務,如果用戶在子任務中遇到困難,往往會造成整個任務效率的降低甚至任務中斷。

          比如在手動創建商品的流程中,需要將商品信息推送到渠道線上店才算創建成功,所以在創建商品前,需要完成渠道線上店的創建。針對這種關鍵子任務,我們可以嘗試并行任務,在選擇線上店時,增加創建線上店的入口,將任務連貫起來。還可以通過操作的合并,比如保存和添加同步進行,提升整體的任務效率。

          2、弱化低效感知

          好的產品體驗,不止強調功能,還會在意體驗中的感受,設計也可以左右用戶感知產品效率的快與慢。

          / 等待時間可感知

          用戶對等待的耐受度是有限的,等待時間在2s內是相對愉悅的,在時間不可控或時間較長的情況下,我們應盡可能縮短用戶的感知時間。

          比如在下圖中,用戶完成新手配置后,產品有個加載的過程,通過加載動畫和加載步驟的分解,告知用戶系統在運行中,縮短感知時間的同時消除用戶的負面情緒。

          / 容錯性設計

          在產品使用過程中,經常會出現因用戶“犯錯”而導致的任務中斷或失敗,這里的“犯錯”,通常是因為用戶操作偏離產品的使用要求,但這并不是用戶的錯,人不是精密的儀器,好的體驗應該包含這部分“錯誤”。

          比如錄入數據時,應給予實時的提醒,讓用戶可以及時更正,而不是等到提交時才拋出錯誤提示,還有比如在數字輸入框中誤輸入其他字符時,自動幫用戶清除等。

          在涉及對用戶影響較大、重要且不可挽回的操作時,給出提示。

          情感 — 關注情緒感受

          在整段體驗感受中,情緒最強烈和結束時的感受影響著用戶對整個體驗好與壞的判斷,這個現象就是峰終定律,因此我們可以通過關注這些關鍵時刻,來確保用戶對整段體驗是感到愉悅的。


          1、減少負峰

          消極的情緒,不僅影響用戶對產品的體驗感受,最終還會落到降低效率上,因此在設計時,我們要考慮減少用戶的消極情緒。

          / 提供明確反饋

          用戶使用產品的過程就像是與產品進行“對話”,良好明確的反饋能幫助用戶理解和使用產品,在工作完成時,應告知用戶已完成,出錯時,告知用戶哪個環節錯了,如何改進或提供幫助,不要讓用戶去猜,而是主動為用戶提供解決方案,提供確定感。

          比如在創建商品的流程中,商品創建完成后要推送到渠道線上店,中間有一段較長時間的等待,在設計時,根據推送中、推送完成、推送失敗,分別提供了3種對應場景的提示,讓用戶知道當前任務進展,以及展示相關對應的操作,即使任務失敗,用戶也知該如何處理,增加用戶的控制感。

          / 任務中斷可回溯

          在B端產品中,經常會出現決策信息多,處理鏈路長,需反復多次進入任務流程的情況,當任務被迫中斷時,用戶情緒會受到影響,且用戶對未完成或中斷的任務往往比已完成的記憶更深刻,針對這類情況,我們需提供可回溯的設計,幫助用戶順利完成任務。

          比如在將商品推送到渠道線上店時,同步過程中,用戶可以離開當前頁面進行其他操作,系統會將推送結果展示在列表頁,用戶可以通過列表頁,重新推送或者編輯修改后再推送,直至完成任務。

          2、結束于正峰

          在完成任務后,可以觸發氛圍動效反饋成就,給用戶積極的結尾。

          寫在最后

          以上就是我基于B端產品特征,和C端產品的體驗思維,用“B+C”的設計思維嘗試探索優化B端產品體驗的一些方案嘗試?!癇+C”的設計思維,其本質是想找到業務與體驗的平衡,作為B端設計師,好的用戶體驗一定是與業務緊密結合的,與業務匹配的體驗優化才有其意義和價值。


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

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

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

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

          產品優化-怎么做競品分析更有價值

          ui設計分享達人

          一.競品分析目的

          相信每一個設計師,在工作中或多或少都做過一些競品分析的工作,正所謂知彼知己百戰不殆,做競品分析可以幫助我們快速了解競對產品的優劣和核心競爭力。目前網上的很多競品分析主要都做的大而空,好多都是偏行業分析,對于設計師而言,看完之后無法得到有用的信息,對于產品本身的設計體驗而言,幫助意義不大。
          在開展競品分析之前應該想清楚兩件事,弄清楚自家產品的基本情況,如產品定位,基本功能,目標用戶等,另外要確定分析的目的是什么,最終要拿到什么成果賦能產品。如果想要提高用戶活躍度,那就圍繞競爭對手拉新促活方案進行研究;如果是要優化產品的用戶體驗,那就圍繞影響用戶體驗的交互流程及功能操作去研究。



          產品發展的階段不一樣競品分析的目的也會不一樣,可結合互聯網產品發展周期輔助確定分析目標。一般產品引入階段,功能架構還沒有完全確定,需要了解市場行業現狀、目標客戶特點、商業模式、盈利模式等,從而更好為為后期發展指明方向;而產品成長階段,需要占領用戶心智及市場份額,所以要分析了解競爭對手的產品功能、推廣路徑、營銷策略、體驗設計等,優化核心功能及經營策略,實現用戶增長及促活。 產品成熟期要考慮怎樣維護市場份額,怎樣跟競品拉開距離,怎樣創收增效,需要及時了解競對產品的動向及用戶經營數據。結合產品發展的階段性目標及業務產品部門的相關規劃才能更好地確定出比較有價值的分析目標。 



          二.競品的選擇

          選擇競品先要明確產品所在行業和細分領域、產品屬性、用戶群體,找競品時需要找這些元素相同或者相似的產品?;驹瓌t是選擇行業第一梯隊中,1.產品的定位及目標人群比較明確且有重合性,2.是否穩定且迭代成熟,3.是否具有獨特亮點有參考價值。

          直接競品:功能和用戶群體基本一致,有直接的競爭關系,可以考慮借鑒相似的功能設計。
          間接競品:產品用戶相同屬性相似,但是功能需求匹配度不是特別高,在細分的領域中做的比較優秀,在運營策略、操作流程、視覺設計等方面有借鑒參考的價值。
          標桿競品:目前互聯網同類的產品同質化情況相對比較嚴重,如果只對直接競品、間接競品進行分析,忽略當下比較熱門、比較具有先進性的產品,有可能會缺乏創新性,所以需要在用戶重合度或者產品屬性、營銷策略等方面做得優秀的產品中選擇1-2個作為標桿產品進行分析。將其優秀的部分深入轉化應用到自家的產品中。
          通過七麥數據、IT桔子、易觀分析、比達網等第三方平臺,找到類別排行榜,艾瑞網等可以查詢相應的行業報告,有利于分析產品目標及功能范圍。另外,如果是移動端APP,可以通過應用商店進行搜索。
          七麥數據:https://www.qimai.cn/
          IT桔子:https://www.itjuzi.com/
          易觀分析:https://www.analysys.cn/
          比達網:http://www.bigdata-research.cn/
          艾瑞網:https://report.iresearch.cn/

          三.競品分析方法

          競品分析的目的不一樣側重點不一樣,但用戶體驗五要素給我們提供了一種通用的分析思路,從五個層次去逐步分析。但實際分析過程中還是會根據分析者的身份,產出不同,側重點不一樣。



          戰略層

          了解競品的產品定位,產品目標,目標,多平臺等方面。做這些分析的主要目的是確定自家產品定位,產產品定位包括產品定義及用戶需求:產品定義包括使用群體/主要功能和產品特色,使用群體幫你明確產品的主要為誰服務,所有的功能/內容/設計風格的設定都是圍繞這類群體來進行的,主要功能劃定了功能的范圍和限制,產品特色使產品有別于同類的競爭對手。用戶需求包括目標用戶/使用場景和用戶目標,一個用戶需求可以看作是“目標用戶”在“使用場景”下的“用戶目標”,在做某一個功能的競品分析時,需要對比分析真實場景下產品怎么解決用戶的問題。相對而言產品經理會作戰略層的深度分析,作為設計師需要明確這方面的內容,但在競品分析階段不用深究,需要重點分析的還是結構層,框架層和表現層。



          范圍層

          我們需要思考的是產品需要什么功能實現產品需求,需要分析相同業務和場景下競品的功能,例如同為電商產品,競品在購物場景下的基礎功能及衍生功能,相同的功能競品的特點及優勢。在競品功能進行梳理時,可以通過表格對比功能有無,這樣可以清晰地看到不同競品之間的差異。功能對比并不是簡單的功能羅列,要進一步思考功能設定背后的原因,可以從用戶對功能的依賴程度/使用頻率以及公司為實現這一功能要付出的成本,結合自身產品定位老考量自己的產品是否也需要這個功能,從而明確分析主要功能及次要功能進行分析

          結構層

          產品的整體架構包括功能結構/信息架構分析,首先需要理解什么是信息架構,很多人將思維導圖理解為信息架構,其實思維導圖只是信息架構的一種表現形式 。而功能結構是指功能的闡述,一般是動詞+名詞。功能結構則更側重整體邏輯,各個功能之間獨立或者關聯關系,明確主要功能次要功能。功能結構就是按照功能的邏輯性及用戶的操作習慣組織起來,更適合用流程圖來梳理,通過優化功能與用戶的每個觸點優化體驗。信息架構中信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。信息架構就是將信息通過一定的形式組織起來,然后呈現出來。從本質上講是信息的表達和傳遞,從而降低認知成本,提升使用效率。良好的信息架構是高效用戶體驗的基礎,分析競品的信息架構是分析競品分類組織邏輯。隨著互聯網產品的同質化,其實競品的很多功能都相似,但信息的組織往往會有所不同。相對而言資訊類,信息類產品需要著重對比信息架構。



          框架層

          任務流程分析,界面設計、導航設計、信息設計,頁面的布局內容信息,頁面之間的跳轉方式,頁面內部的交互邏輯等方面,工具類的產品如出行/外賣/購物等用戶有明確目的的,這類產品需要著重對比競品間任務流程的差異,從而尋找哪些步驟可以優化,哪些步驟可以借鑒。

          在這個過程中輸出使用體驗即用戶在使用過程中的整體感受,包含用戶操作過程中的效率,對信息的呈現和布局的理解。是否存在干擾信息導致用戶認知和操作出錯,使用起來是否存在壓力的情況,簡單來說包括:操作效率/信息布局/使用成本/信息干擾/等

          而交互體驗更加具象,需要在使用反饋/防錯/可見性/一致性/流暢度等細節方面需找設計的差異點和亮點。

          表現層

          最容易被用戶直觀感受的層面,可以從視覺風格,配色,圖形,排版布局,情感化設計,動效等方面和競品進行詳細的分析對比,競品分析并不是羅列細節,而是需要分析出操作體驗的優劣,以及這樣設計的原因。 


          四.分析報告

          產品概況、功能、流程和交互等方面進行全方位的分析后,還有非常重要的一步,即給出結論,且這才是最重要的,結論將其復用到我們產品中,這也是競品分析的意義所在。在做最終的分析報告時不要只做分析沒有結論。任何一個功能點都可以思考出一個結論,競品為什么這么做,那我可以模仿或超越嗎?或是我覺得不好,那么我改怎么避免;不要只有結論沒有權威的分析過程。在任何分析中帶著主觀性的結論是最不好的,有時候會誤導大家,所以得出的結論的因果條件要是合理的,分清楚充分條件和必要條件,寫明這個結論的必然原因以及分析過程和可能的原因等;要帶著目的性的去做分析,避免作數據及內容的拼湊。



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

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


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


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


          面對項目中的不確定性,設計師如何決策?

          ui設計分享達人

          最近看到了一個很有用的知識,它是項目管理中的一個概念,叫做Stacey矩陣模型


          這個模型我看完之后,對應到設計行業上,

          發現它對于“設計師面對不同類型項目,應該如何做決策”,很有啟發和幫助。


          而我自己最近也剛好離開了熟悉的環境,要面對一些新的挑戰,

          這個模型也給我提供了一些可借鑒的思路。


          所以決定整理下自己的心得,給大家分享一下。

          這個模型將項目分為“技術”和“需求”兩個維度,建立了一個坐標系:

          橫軸是“技術”層面,判斷技術的確定性和不確定性,可以理解為技術是否成熟。

          縱軸是“需求”層面,判斷需求是明確的還是不明確的。


          根據這兩個維度,可以將項目劃分為五種類型:


          1. 簡單型(Simple):技術確定,需求也明確

          2. 燒腦型(Complex):技術確定,但需求不明確

          3. 棘手型(Complicated):需求明確,但技術不確定

          4. 混亂型(Chaotic):技術不確定,需求也不明確

          5. 模糊型(Hazy):并非完全不確定,介于混亂型與其它類型之間


          而針對不同區域的項目,這個模型給出了相對應更適合的開發方式、解決方案。

          “技術”的確定與否,與“需求”的確定與否,基本上就涵蓋了所有的項目情況。

          我們可以將目前的項目情況對應到這個模型里,判斷它是處于哪個區域的,

          再根據它所在區域,選擇性使用這個區域所對應的解決方案。

          相比沒有任何方法原則,僅憑經驗做事,

          借助一個成熟的方法論模型框架,來輔助自己做決策,

          條理會更清晰,做決策的效率也更高,

          這就是建立思維模型的好處。

          思考一下,你目前的項目是處于什么樣的區域呢?

          一、不同項目類型的應對思路


          在具體介紹不同項目類型對應的解決方案之前,

          我們要先從大方向上來看一下這個模型。

          從模型整體來看,最理想的項目類型,必然是處于區域1的簡單型項目:

          技術確定,需求也確定。


          所以在大方向上,

          我們應先采取一種向下的“簡化思路”:

          也就是盡可能將項目引導向最簡單、最可控、最穩定的“簡單型”區域,


          需求維度上,引導客戶明確需求,達成共識。

          技術維度上,盡可能選擇更可控、更成熟的技術。



          所以項目的前期階段很重要,這個階段決定了項目最后的導向。

          前期多花點時間溝通討論,可以為后續執行減輕很多負擔,

          目的是為了在這個過程中盡量減少不確定性,

          讓項目類型流向更簡單的區域。

          接下來介紹下不同項目類型對應的應對方案:

          1. 簡單型(Simple):預測型,做好計劃,按計劃執行。

          2. 燒腦型(Complex):增量型:逐步構建,每次增量一部分。

          3. 棘手型(Complicated):迭代型:先搭建基礎框架,再逐漸迭代改進細化。

          4. 混亂型(Chaotic):避免掉,很難成功

          5. 模糊型(Hazy):敏捷開發(更多是對于產品層面了,對設計領域的借鑒意義可能不大,所以這里不做引申。)


          01 預測型:

          適合需求明確,技術也成熟的項目。

          這種通常是比較簡單的項目,或者是已經做過多次的很成熟的項目。

          對于這種可控性高的項目,可以提前制定好完善的計劃,

          之后執行就按之前的計劃,按部就班完成即可。



          02 迭代型:

          適合需求明確,但技術不成熟的項目。

          對于處于初期階段的設計師,通常面對的都是這樣的項目,缺少經驗,技術還未成熟。

          這時候應該先去做一個比較簡略的粗稿,明確大方向,再去逐漸細化完善。

          而錯誤的做法是:先去摳細節,在一個局部的小細節上磨半天。

          結果就是,細節也不對,大方向更不對,

          不僅效率低,做的還全是錯的。

          我自己以前就犯過這樣的錯誤,非要把東西做的差不多了,調了很多細節,再拿給主管看。

          結果整個方向都是錯的,而且因為已經做了很多細節,改起來還很麻煩。


          實際上我應該在做好大方向的粗稿后,就拿去給主管看,

          確定了大方向,再去打磨細節。


          因為當你經驗成熟后就會發現,只要大方向出來了,之后能細化成什么樣,基本可以預見了,剩下的只是時間問題而已。


          03增量型

          較適合技術成熟,但需求不明確的項目。

          這種類型的項目很普遍,比如客戶需求不明確,不知道自己具體想要什么。

          還有可能是項目體量比較大,要考慮好所有細節,需要很長的時間。



          這時候就可以嘗試用“增量開發”的模式,

          也就是先做好確定的那部分,然后交付給客戶,

          客戶提出了新的需求,再增量進去。

          像堆積木一樣,想到一點做一點,每次完成一部分,

          而不是等全部想好再動手。


          這樣做的好處是:


          1. 可以在執行上先做起來,避免因為需求還未確定,導致執行無法推進。

          比如在項目前期,雖然腳本還有很多東西沒有完善,但一些已經確定要做的東西,就可以先進執行,或者做技術上的測試等等。


          2.交付客戶的部分模塊,通常是已經比較完善的,客戶能盡早看到一個直觀的結果,減少理解偏差。

          比如有時候明明草圖階段已經確定了,

          結果等成品出來,客戶又不滿意了。

          因為每個人想象出來的東西是不一樣的。

          很多設計師還會遇到這樣的問題:難以理解領導者的想法。

          無論是自身經驗的原因,還是溝通上的問題,

          總之,對于需求的理解是模糊的,

          不清楚領導想要的到底是什么樣的。

          這時候其實就可以采用“增量”的設計思路:

          先完成自己能理解,能確定的部分,然后拿給領導看,

          這時候他可能會提出一些新的反饋,告訴你接下來應該做些什么。

          再根據反饋,繼續往下做。

          這樣可以快速產出一個可見的結果,加快溝通頻率。

          而不太好的做法是:

          自己在那死磕,自己在那猜,非要做完再交。

          最后,這個過程消耗了很多時間,得到的結果卻根本不是對方想要的。

          小步快跑,多次更新,這種“增量”的設計思路,

          對于需求不清晰的情況,執行效率很高。

           如何運用到其它方面?


          除了項目上,Stacey模型對于設計師遇到的一些其它問題,同樣有借鑒價值。

          接下來我們看看在職業成長和技能學習上,可以如何借鑒:


          職業成長上如何借鑒:

          根據Stacey矩陣模型圖,我們不難推演:

          對于處于初期階段的設計師,由于能力不成熟,技術上是不確定的。

          如果再加上客戶需求也不確定,

          項目類型就會變為“技術不確定,需求也不確定”的混亂和模糊類型,難度很高。

          這就像是,剛出新手村,就要去打BOSS一樣。


          所以在職業生涯的初期,應盡量去一些大公司,或比較成熟的公司。

          因為這樣的公司,往往需求到你手里時,基本已經是確定的了,

          只要專心去打磨你的技術就好。


          如果去一些本身不夠成熟的公司,需求也不確定,自身的技術也不確定,

          無疑進入了困難模式,導致很難提升,一團亂麻,還會打擊自己的信心。

          技能學習上如何借鑒:


          如果我們想要掌握一個新的技能,它是處于什么樣的區域呢?

          需求是確定的,而技術不成熟,

          所以屬于“棘手型”項目。


          那就可以用“迭代”的方法。


          比如你要學動效,那就可以先去找一個簡單但完整的動畫小案例,

          先去把整個流程、一些最基礎的知識點弄明白。

          學完之后,就已經可以做一點簡單的小動畫了。

          然后再逐漸加大難度,不斷完善和迭代你的技能。


          這種方法的好處顯而易見,在很短的時間,就能把技能運用起來,

          而不必等到學的差不多了,才能開始運用。


          我最早學軟件時,用的就是一種很低效的方法:對著一本工具書,一點一點學軟件的每個功能。

          結果整本書看完了,都還不知道要怎么用。

          這也跟當時的教學資源環境不成熟有關?,F在很多教程都是基于具體、完整的案例教學了,學習起來效率很高。

          所以在選擇教程時,應優先選擇案例型的教學,而避免單純功能模塊的講解。


          小結一下:

          面對需求的不確定,或技術的不確定性,無論是迭代開發的思路,還是增量開發的思路,方向上其實都是在逐漸減小不確定性。


          面對技術的不確定、不成熟,那就先大致完成一個粗略的版本,再去逐漸細化、優化、迭代。


          面對需求的不確定,那就先完成確定的部分,做一步看一步,隨著想法、需求的逐漸完整,不斷填充完善設計。


          而對于技術也不確定,需求也不確定的混亂和模糊項目,但又無法避免的,可以嘗試多種方法混合使用。

          整體來說,這是一種向下簡化,減小不確定性的思路。

          拓展:逆向應用的“挑戰模式”

          而根據這個模型推演,逆向思考,

          會發現其實還有一種向上復雜化的思路。

          我把它稱為“挑戰模式”。

          顧名思義,就是將處于區域1的簡單項目,向復雜的方向演變。

          一般是在技術的軸向上,將確定性變為不確定。


          為什么要把它變復雜?找虐嗎?

          當然不是。

          處于區域1的簡單項目,因為它簡單可控,容錯率高,

          所以恰好是用來嘗試新技術的最佳實驗對象。

          在這樣一個非常穩妥的環境里,你可以放手大膽去嘗試新的技術,新的想法。

          失敗了也問題不大,大不了還是換回老方法唄。

          比如我們有一些日常的EP項目,每個月都有一兩條的產出,技術上和需求上都已經很成熟。


          這類項目就是我們的快樂實驗場,可以大膽嘗試一些新的技術,新的想法。


          而且,適當給自己加點挑戰,也可以消除重復性工作帶來的無聊感。

          嘗試下這種“挑戰模式”,非常有利于設計師能力的成長。

          在簡單的項目里,將新的技術打磨成熟,

          之后就可以在復雜的項目中去應用了。

          可以不斷拓寬自己在技術軸上的確定性范圍。

          避免陷入技術和需求雙雙不確定的混亂情況。

          結語

          最后,出于嚴謹考慮,要說一下,

          我對這個模型的一些理解,不一定絕對準確。

          畢竟它是另一個領域的知識。


          但我們學習借鑒其它領域的知識,

          本來就不是為了照搬過來。

          而是為了從中吸取能夠借鑒的部分,

          最終目的,是要為自己所用。

          最后留給大家一個思考題,可以按照步驟依次進行,

          1. 你目前的項目是處于什么樣的區域?

          2. 如果處于較復雜的區域,能否引導向更簡單的區域?

          3. 根據Stacey模型,使用什么樣的方式更合適?預測型、迭代開發、增量開發還是混合使用?

          4. 具體可以如何做?

          作者:崔小俊

          轉載請注明:站酷

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


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


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




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

          ui設計分享達人

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


          // 為什么要數據可視化


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



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


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


          一、選擇適合的圖表


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


          1. 分析數據關系

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



          構成關系

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

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

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



          比較關系

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

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

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



          分布關系

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

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

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



          關聯與流轉

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

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

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



          2. 分析數據特征

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


          變量特征

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

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


          維度特征

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

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


          層級特征

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

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


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

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


          流程特征

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



          二、強化視覺層次


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


          1. 強化數據特性

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

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


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


          2. 色彩視覺傳達

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



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

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

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


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

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

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


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


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

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

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


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


          三、圖表中的響應式設計


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


          1. 布局框架適配

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



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

          2. 圖表元素適配

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

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


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


          3. 極值適配

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

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


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


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


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


          // 結語


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


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

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


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


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


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

          ui設計分享達人

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

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

          本文主要內容:

          刪除,實現表單輕量化

          組織,讓表單更加有層次

          隱藏,讓表單更加靈活

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


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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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



          1、順序表單

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

          1)平鋪表單



          2)卡片表單



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

          2、錨點表單

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

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






          3、標簽表單

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



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



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

          4、步驟表單

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



          步驟表單有幾個特點:

          1)過程串聯

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

          2)業務引導性

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

          3)逆向操作

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

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

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

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

          4)節點的平衡性

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

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

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

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

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

          1、模塊隱藏

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

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



          2、信息隱藏

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



          3、合理的組件形式

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

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

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

          1、信息轉移

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

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



          2、記憶轉移

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

          3、行為轉移

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



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

          重復一遍:

          刪除,實現表單輕量化

          組織,讓表單更加有層次

          隱藏,讓表單更加靈活

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

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

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


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

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

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

          ui設計分享達人

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



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

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


          為什么產品需要趣味性


          1.符合本能需求

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

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



          2.影響用戶行為

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

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



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

          3.緩解負面情緒

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

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

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



          4.實現情感鏈接

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

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

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



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


          趣味性是什么

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

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

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

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

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

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


          趣味性背后的情緒


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

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

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



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

          關于愉悅感

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

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

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

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

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

          4.會動的、解壓的



          關于期待感

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

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

          1.未知的、神秘的;

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

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

          4.隨機的正向獎賞;

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



          關于驚喜感

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

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

          1.超出原有預期的;

          2.未提前告知的;

          3.正向結果的;

          4.產生共鳴的



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

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


          如何制造愉悅感

          1.關于擬人化

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

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



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

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



          1.1擬人化的語言

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

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

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

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



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



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

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

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

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



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

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





          1.2擬人化的形象

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



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



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



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



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



          1.3擬人化的表情

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

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

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

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



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



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


          2.動畫反饋

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

          2.1貼近現實

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



          2.2結合擬人化

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




          如何制造期待感

          隨機給與內容

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

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

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



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



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



          隨機性游戲

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




          如何制造驚喜感

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



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

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

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



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



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



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



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


          最后

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

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

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

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


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

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


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


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

          如何提升設計價值

          ui設計分享達人

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

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

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

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

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

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

          一.如何理解設計的價值

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

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



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

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

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

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

          - 實現了哪些業務目標

          - 解決了哪些業務問題

          - 創造了哪些業務價值

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

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

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

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

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

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

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

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

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



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

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

          1、業務視角:明確定位

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

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

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

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

          - 業務價值可量化指標

          我們需要注意一下兩點:

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

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

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

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

          - 目標用戶特征;

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

          - 關鍵行為可量化指標

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

          - 角色:如B端/C端;

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

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

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

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

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

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

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

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

          - 產品目標和策略;

          - 功能范圍和核心流程;

          - 中后臺能力支持;

          - 實現成本和風險點;

          我們需要注意一下兩點:

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

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



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

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

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



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

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

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

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

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

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

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

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

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

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

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

          結語

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


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

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


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


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

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

          ui設計分享達人

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

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

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

          一、 UX文案的重要性

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

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

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

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

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

          二、 重新認識UX文案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          1. 流程——更早地加入

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          四、結語

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

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

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


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


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

          日歷

          鏈接

          個人資料

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

          存檔

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