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

          首頁

          交互B端,設計前期8大設計規范制定

          周周

          在做設計前我們都會提前了解清楚設計的需求目的,作為基礎的設計規范也是需要提前做好制定,并且清楚設計規范規則,不然到后期就會為設計工作以及開發人員帶來很多不便之處,無論是平面設計還是UI設計,都需要提前明確設計規范,這一期主要分享關于B端UI設計的前期規范制定。

          交互設計:頁面轉化率低?從 2 方面入手改善!

          周周

          講述了交互設計師在面對重要的轉化頁時應該要著重將價值簡單高效的傳達給用戶,加強用戶的感知,可以通過貼標簽、緊迫感文案、動態化、對比化、平鋪直述、亮數據內容展示,更好的將產品價值傳達給到用戶,在具體內容布局上建議準尋線性的框架搭配顏色、動效、引導性文案的方式引導用戶操作。

          為了活動快速上線,交互設計師是如何“排雷”的?

          seo達人


          背景

          活動類項目由于具有玩法時效性強的特點,經常需要快速上線,但是需求變更頻繁、方案難以達成共識、上線物料被忽略等“地雷”遍布項目進程之中,如果不幸“踩到引爆”,必然嚴重影響上線速度。交互設計師作為項目鏈條中承上啟下的重要一環,可以通過提前介入、專業支撐等“排雷”策略對項目高效準時上線起到十分重要的促進作用。

          筆者從2019年全面負責網易云音樂會員營收活動的交互設計工作,對從交互側保證活動類項目高效協作和快速上線有一些思考。現按照一般活動類項目必經的項目立項階段、項目執行階段、項目收尾階段來梳理出影響活動快速上線的“地雷”,并且輸出對應的策略,希望對其他做活動類項目的交互設計同學有所幫助。

           

          一、項目立項階段

          項目立項階段主要有兩個“地雷”,一個是運營玩法和策劃需求變更,一個是業務細節和熟識度不足導致的設計返工。交互設計師可以通過提前介入、整體活動邏輯可視化的梳理來避開“踩雷”,下面將分別闡述。

          1.排除“運營玩法和策劃需求變更”的地雷

          提前介入,從用戶體驗和開發成本角度管理運營玩法和策劃需求。眾所周知,一個活動從發起到下線流程如下圖, 筆者一般是在運營立項階段就開始介入項目,這個階段運營往往會有很多玩法的腦爆idea,且開發資源尚未介入,交互設計師一定要站好這個節點的“崗”,防止有紕漏的玩法方案溜進需求池。

          提前參與玩法需求討論可以讓我們更全面地了解活動目標、針對人群,以及運營想推的活動玩法,在想法產生之初通過交互設計師的專業建議使活動玩法更加落地可行、體驗優雅、帶來更多轉化,降低返工可能性,提升上線效率。此時交互設計師一方面要站在用戶體驗角度上跟運營說明哪些idea會增加用戶認知和操作成本,降低活動轉化率,以及優化建議;另一方面站在開發角度跟運營說明哪些想法開發成本高,可能在限定的日期無法上線,如果堅持要做的話,需要與開發同學確認技術方案或申請更多研發資源;第三方面是基于交互設計師對用戶心理學天然的了解,建議運營同學如何在活動中利用誘餌效應、從眾效應、目標階梯效應等方法提升用戶的轉化。

          大家一定要謹記“提前介入”,否則等idea經過運營策劃立項后推進到交互階段發現問題要修正的話,會浪費極多的項目時間和團隊精力。一方面是因為重新組織各方討論的協調難度很大;另一方面是因為運營和策劃已為玩法需求付出很多時間和精力,過程中必定相互洗腦要推的方案是可行且完美的,說服他們接受新修改意見的溝通難度和耗費的時間成本可想而知。

           

          2.排除“業務玩法、技術方案等理解不足導致設計返工”的地雷

          活動立項之后,盡可能地梳理完整的業務流程圖、功能流程圖。對于一些復雜的活動,業務流程圖一定要輸出(也可以和策劃協作一起輸出,或者規定讓策劃同學輸出)。梳理業務流程圖的過程就是理解活動玩法的過程,將運營用文案表達的玩法規則進行可視化。業務流程圖可以讓各方對活動玩法、流程、功能狀態流轉一目了然,便于讓各方發現新的問題點,及時修訂。梳理功能流程圖是促使策劃和開發將項目中所應用功能的技術方案一一確認,減少后續設計階段的變數,增加輸出設計文檔的確定性。

          如果對規則和玩法復雜的活動沒有清晰的理解就盲目開始設計,很容易囿于細節而失去全局概念,后期如果規則玩法、活動流程或技術方案稍改就會被推倒重來,做很多無用功,耽誤上線時間。

           

          二、項目執行階段

          項目執行階段主要有三個“地雷”,一個是設計方案輸出效率低,二是各方信息沒有對齊,三是開發過程中各方溝通不順暢。交互設計師可以通過模塊化的組件設計、組織交互評審會和及時跟進開發測試中的突發問題來避開,下面將分別闡述。

          1.排除“設計文檔輸出效率低”的地雷

          在以往的活動中,我們搭建的活動配置后臺里已經沉淀了很多復用性高的組件,可以用組件像樂高積木一樣快速搭建普通活動,這種方式可以極大的提高活動上線效率。

          一些新玩法活動現有組件無法滿足,需要梳理后設計控件的樣式(采用按鍵、熱區、上下結構、左右結構等)。組件交互設計的優先級是:穩定性-易用性-拓展性。所謂穩定性是活動組件設計的第一大原則,需要交互設計師盡量保證組件邏輯簡單、開發難度低且能承受活動短時間高并發環境的壓力,這樣才能保證開發同學在較短時間內快速上線且bug少。所謂易用性是易于用戶理解和操作,這直接關系到用戶在此組件觸點的轉化率。所謂拓展性是兩方面:一是后續可以應用到其他活動中,二是為活動的視覺設計階段保留了更多樣式發揮的可能性;拓展性強的組件可以在后續活動配置中持續使用,長期來看可提升活動上線效率。

           

          2.排除“各方信息沒有對齊”的地雷

          交互評審是促進各方信息對齊的最最重要的掃雷秘訣。因為交互設計師需要將運營玩法、產品需求、業務邏輯,以及用戶體驗相結合,轉化為各方可見可理解的低保真模型,所以交互評審十分重要,即使時間再緊也不可或缺。

          交互評審的目的是讓運營、策劃、視覺、前后端開發、測試同學更加直觀和形象的了解活動上線的大致呈現效果。運營和策劃可以據此判斷方案是否符合他們的需求,視覺可以構思活動頁面的裝飾元素和視覺風格,研發可以據此確定前后端接口、評估開發工作量和預估工時,測試同學可以以此來進行測試用例的輸出。

          評審方案的時候有兩個技巧可以提升評審效率。一是按照活動前中后三個階段來給大家進行講解,這樣會讓各方更易理解。二是前端組件樣式和對應的后臺配置一起講,這樣不僅可以方便運營同學知道如何配置,和各配置項在前端如何展示,也方便開發同學快速梳理數據接口和核對參數。

          交互設計師針對會上的功能點實現問題、前后端配置問題等暫時不能確定的,會后一定要拉各方核對定稿。即使活動上線周期十分緊急,也一定要進行交互評審,磨刀不誤砍柴工,千萬不能為了省時間而省略該步驟,否則各方在信息沒有對齊的情況下按自己的想法推進,一旦出現執行偏差,必將需要更多的時間來彌補。

           

          3.排除“視覺、開發和測試過程中各方溝通不順暢”的地雷

          視覺設計過程中,視覺同學對活動控件有新的想法或做了方案調整,需要及時溝通確認調整后的方案僅僅是樣式的變更還是修改了控件的邏輯或字段,一方面需要確定視覺改動是否可接受,另一方面如果改動控件邏輯或字段的話需要找對應開發同學溝通,看是否增加開發難度和工作量,是否會影響上線時間。

          開發過程中,開發、測試同學中對于交互文檔中的細節有疑問時,交互設計師需要及時答疑。部分功能或流程因為技術實現問題或開發周期問題,需要組織各方溝通討論出新的替代方案時,交互設計師要對設計方案進行及時修訂并將修訂記錄同步全組。

          測試驗收過程中,測試同學完成第一輪冒煙測試后,交互設計師就可以進行交互走查驗收。第一,將走查發現的問題創建驗收清單,采用有道云協作來創建截圖、問題、終端、備注的表格,將走查過程中發現的問題整理進去,便于測試、開發同學查看和跟進。第二,確定修bug的優先級,按照普通用戶參與活動路徑設立優先級,及時跟進和更新修bug的結果,上線前一定要再走查一遍,防止一些修好的bug復發和一些修bug過程中新產生的bug。第三,關注高并發壓測環境下可能出現的問題,如果時間緊急沒法變更技術方案,就需要通過采用用戶體驗的方法來進行引導或補救。

          為了保證各方溝通順暢,除了及時跟進處理各方遇到的問題外,交互設計師需將每日跟進的溝通結果和修訂記錄在項目組里同步。這樣一方面讓運營、策劃、開發、項目管理等各方了解項目最新變動和進度;另一方面營造一種大家共同推進活動的感覺,讓項目組同事更愿意相互協作配合工作。

           

          三、項目收尾階段

          項目收尾階段主要是物料準備不充分的“地雷”,交互設計師可以通過走查物料準備情況來避開。

          排除“物料準備不充分”的地雷

          活動項目中有很多物料需要準備,在線上活動項目中設計師需要重點關注的是活動冷啟動階段前置假寫數據的準備和上線預演。假寫數據的益處顯而易見,例如在某些活動中前置假寫的彈幕數據可以在冷啟動階段很好的營造場面熱烈的氛圍,激勵用戶“從眾心理”參與活動,但在真實數據進入后要立即清理掉假數據避免造成用戶信任危機。

          活動上線前各方聯調時,由于大家都忙于走查功能、合并代碼、準備預發等,經常會出現假寫數據準備不充分或者遺漏的情況,這個階段交互設計師一定要檢查到位,并且確定假寫數據的上下線策略。

           

          總結

          交互設計師也可以在整個項目過程中實時收集各方從項目立項到項目收尾過程中對活動項目的想法和建議,包括玩法策略、業務邏輯、交互視覺設計、開發過程等,一些好的建議可以在后續開發中推行,讓項目協作更加順暢,項目上線更加快速高效。

          以上是我在近兩年時間參與活動類項目過程中,交互設計師促進活動類項目快速上線的一些經驗沉淀。雖然不同公司、項目在活動流程、團隊協作中有所差異,但交互設計師在項目前、中、后階段遇到的“地雷”大致相似,希望對大家有所幫助。

           

          原文地址:網易UEDC (公眾號)
          作者:于康康

          轉載請注明:學UI網》為了活動快速上線,交互設計師是如何“排雷”的?

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

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

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

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

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



          交互設計從入門到精通的5個途徑

          seo達人

          一、練習原型 

          練習原型是培養流程意識和全局意識的過程,以及對設計的深度思考。
          圖片
          練習一套完整的產品原型后,嘗試不斷補充遺漏的交互場景和狀態。重復做幾套產品的交互原型后,這對于ui設計師來說,已經入門了。
          部分UI會覺得平時都是做的高保真視覺稿,畫原型應該是一件很簡單的事情。
          其實不然,UI設計師沒有訓練交互原型的話,那么前期從事交互工作會比較吃力。會容易關注于視覺細節,對于交互流程的全局思路掌握不夠。導致原型主流程和分支流程容易出問題。
          所以平時沒事多練練原型,畫完原型后把自己當作用戶來審視原型稿。找出其中的問題,并不斷完善,提升原型的質量。

           

          二、看優秀的交互文檔 

          看一些優秀的交互文檔,看看別人對各個狀態的標注和說明,以及流程的設計思考。
          看看別人原型中包含那些結構,是否值得借鑒并學習。找到優秀的交互輸出模板,并根據自身設計團隊情況,優化交互文檔結構,提升交互文檔質量
          一套完整且比較優秀的移動端交互文檔,我認為可以包含:業務背景、設計目標、業務規則定義、用戶流程圖、設計原則、交互流程標注以及交互各種狀態異常場景。
          1、業務背景
          業務背景通常是我們為什么要做這個功能。通過做這個功能,對業務有什么幫助。通過業務背景,我們可以推演出業務訴求,并得到對應的產品目標。

           

          2、設計目標
          設計目標是通過設計得到什么樣的結果,對產品來說可以獲得什么樣的好處。所以在交互文檔的設計中要重點體現出設計目標。通過明確設計目標,可以清晰的指導我們做交互方案。

           

          3、業務規則定義
          關于產品的業務規則,可能需要同產品經理、業務方和運營一起溝通討論。這個里面涉及到整個產品業務的規則。在實際工作中,我們交互會碰到兩種情況:
          情況1:產品經理會和業務或運營溝通,然后輸出一份業務規則,這時候我們交互可以認真閱讀并梳理業務規則,如果覺得不合理的話,可以和產品經理討論溝通,并修改業務規則使之變得更合理,并輸出在交互文檔中。
          情況2:產品經理只是簡單的有個業務規則想法,這時候需要我們交互設計師幫忙一起溝通并細化其業務規則,并輸出在交互文檔中。

           

          4、用戶流程圖
          用戶流程即我們設計師要梳理用戶在使用過程中的各種場景流程,通過用戶流程圖可避免遺漏場景,避免交互方案遺漏。

           

          5、設計原則
          這里的設計原則非平時看到的一些交互或者視覺設計原則,而是在設計這個需求交互方案中需要遵守的原則。這里的設計原則和業務強掛鉤。

           

          6、交互流程標注
          基于上面的用戶流程圖,可以得到用戶操作流程,即交互流程標注。

          目前我覺得交互流程標注比較好的展示方式,是按照一個主流程在一個站點地圖/畫板的形式展示。當一個主流程中存在幾個支線操作流程時,可以分別在一個站點地圖/畫板中,展示出來。同時用標題區分說明分支流程的操作名字。如下圖所示:

          圖片
          在涉及到異常場景,且可以全局性復用的情況,則只需要全局性組件說明即可,不用每個流程都展示其異常場景組件或者頁面。
          全局組件指的是整個產品通用的組件,例如全局斷網,操作成功、操作失敗、加載、空數據界面,404等

          全局斷網:一般是在首頁使用tips提示。用戶在其他界面點擊操作時,也會出現toast反饋提示用戶。也有一些app在用戶進入出現對話框提示用戶網絡異常。相對于對話框,使用tips對用戶的干擾更小。

          操作成功:一般操作成功都是根據具體的使用場景對出對應的提示。

          操作失?。?/strong>異常情況導致操作失敗,這時需要統一的提示,通常使用toast,也有一些使用對話框強提示用戶。

          圖片

          加載:涉及到全局加載和局部加載,全局加載在設計中要統一說明,例如上一個界面點擊進入下一個界面,使用的全局加載就需要說明。如果是一些小場景的加載,那么需要特殊說明。例如上拉加載,下拉加載,局部小區域加載等。

          空數據類型一共有三類:

          1.初始狀態的定義:初始化狀態,沒有任何內容,需要用戶進行某種操作才能產生內容的界面。

          2.清空狀態的定義:通過刪除或其他用戶操作,清空當前的頁面內容,產生了空界面,這時候需要有明確的提示,且告知用戶該如何處理。

          3.出錯狀態的定義:由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容,產生了空界面,這時候需要有明確的提示,且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

           

          三、思考設計背后的邏輯 

          平時在使用產品時,學會思考設計背后的邏輯。以一個美團設計的為例:
          美團首頁改版將用戶下單的狀態顯示在首頁。

          這樣的改版,作為設計師或者產品經理,應該從兩方面來看待這個事情,即從產品訴求和用戶訴求雙方面來看待,從兩個方面看待得到的結果是迥然不同的。圖片

          產品訴求角度:新版將用戶下單的狀態顯示在首頁可提升首頁訪問深度和曝光率。

          個人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。

          以前用戶查看訂單狀態都是只能去訂單頁面,路徑較長,且訂單頁面沒有產品曝光,無法進行其他轉化,流量無法被多次利用。

          所以將用戶的訂單狀態這種高頻操作放置于首頁,可利于其他業務的曝光。

          美團的吃喝玩樂,其他業務被用戶查看的概率提升。對產品來說是有巨大的好處。

          用戶訴求視角:將用戶訂單狀態放于首頁,用戶的使用場景,會不時的查看訂單狀態,放置于首頁可方面快捷的提供用戶查看訂單狀態,對用戶來說體驗好。

          從用戶訴求和產品的訴求來看,這次改版應該是很優秀的。

          但是脫離于個體業務,從產品全局來看,這種設計的邏輯方式,會讓用戶對于app的信息的尋找邏輯進行顛覆和破壞。

          以后是不是重要的東西都可以放置于首頁?如果這個改版開了個頭,以后其他業務也都有這個訴求,整個產品的生態都會失去控制。

           

          四、總結設計方法 

          在工作中可以嘗試總結一些設計方法,提升設計能力。
          之前我總結了以下5個方法,可以助力設計師做出優秀甚至驚艷的設計方案。分別為:
          1、拆解設計需求
          2、分析線上數據
          3、窮舉設計方案
          4、切換用戶視角
          5、競品方案對比

           

          1、拆解設計需求

          設計師接到的設計需求,大部分情況下是通過產品經理那里獲得的。而產品經理的原始需求來源于:業務方、用戶和老板。

          圖片

          產品經理會將原始需求進行整理,從而轉化成產品需求,在這一過程中產品經理可能會出現對原始需求的理解出現偏差(范圍擴大、范圍縮小或者是方向錯誤)。

          設計師如果直接拿著產品需求就開始做設計,可能會導致設計方案不符合業務需求。所以設計師進行設計前,最好也了解原始需求是怎么樣產生的,這樣才能做到心中有數。

          圖片

          掌握原始需求和產品需求后,接下來就要對需求進行拆解。
          舉個小例子:設計這邊接到了一個產品需求,需求為:為降低產品占用用戶手機存儲空間。優化線上清理緩存功能,提升用戶完成清理緩存的成功率。
          通過這個產品需求可以看出,設計師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出,真正核心需要解決的則是如何降低產品占用用戶手機存儲空間。
          所以設計師的方案可以從4方面入手:
          • 提升清理緩存的成功率;
          • 和開發溝通,是否有更好的更改緩存機制;
          • 通過設計的手段引導用戶清理緩存垃圾等。
          • 是否可以增加自動清理功能。
          這樣的話,設計方案才能更好的服務于產品和用戶。

           

          2、分析線上數據
          當我們拆解了設計需求后,接下來就需要分析線上數據,看這個業務相關的數據情況怎么樣?
          分析數據情況,然后思考線上布局的合理性,然后進行布局設計和流程設計。
          舉個例子,在某個操作流程中,發現有一個步驟,用戶操作流失率很高,這時候我們就要分析為什么這一步操作流失率高。

          例如注冊流程/綁定銀行卡的過程中,總的轉化率只有0.06%,用戶完成率過低,如果要優化整個用戶注冊操作流程,那么需要找出流失過大的節點進行優化。

          圖片

          從數據可以看出有兩個失敗率最高,分別為:注冊流程和綁定銀行卡流程。

          這時候設計師就要分析整個注冊流程和綁定銀行卡流程。哪些設計因素導致成功率低。并針對成功率低進行針對性的布局優化和流程優化。

           

          3、窮舉方案方式
          當設計出一個方案時,則需要對完成的方案進行窮舉,發散出更多的方案,最后從眾多方案中找到一個更完美的方案。

          以表單設計為例。常見的設計方案,是將所有的表單內容按照分組的方式,進行排列,如下圖所示:

          圖片

          但是這種方案存在一個問題,用戶進來之后,發現有大量的信息需要填寫,填寫壓力大,導致用戶的填寫意愿變弱,導致提交成功率降低。

          接下來就要嘗試其他方向的設計思路,通過窮舉法可以想到的有分步設計和將表單填寫內容隱藏到下一級界面,從而降低用戶填寫壓力提升用戶的操作成功率。

          下圖左邊為分步設計,右圖為表單信息隱藏到下一級頁面。

          圖片

           

          4、切換用戶視角

          設計方案確認之后,這時候有一步很關鍵,就是我們要將自己想像成小白用戶。
          我們以小白用戶的視角去審視方案??纯从袥]有不理解的地方。
          為什么要有這一步呢?
          因為我們設計師在設計方案的過程中,會默認一些設計規則邏輯,而這些規則邏輯用戶是不知道的。
          這就導致了我們設計師覺得這個方案可行。但是普通用戶卻不知道這個規則邏輯,導致我們的方案用戶看不懂。
          當我們切換用戶視角發現方案存在的問題后,再嘗試如何讓用戶更好的理解的前提下去優化方案。

           

          5、競品方案對比
          為什么我將競品方案放在后面呢?
          如果做設計之前就參考競品,那么就容易默認為競品的方案是標準的,是優秀的方案。
          會不由自主的按照競品的思路去做設計,最終導致的后果就是和競品方案相似。
          由于我們和競品的人群,業務背景等方面都不相同。
          競品的設計方案基于開發或者老板等業務背景,才不得已使用非優秀的方案,我們如果參考競品的話,最后的結果也可能難以做出優秀的方案。
          當我們的設計方案做好之后,這時候我們就可以分析我們的設計和競品的區別和差異性,從而得到靈感, 優化出更好的設計。

           

          五、項目復盤 

          項目復盤的意義:

          1、提升設計師多種設計方法能力

          2、提升設計師整體設計思維推導能力

          3、提升設計師整體匯報、述職和晉升答辯能力

          所以在工作中,每做完一個重要項目都要做好項目復盤。這樣的話,既是是階段性工作的總結,也是為下一次做項目提供更好的經驗。

          復盤的方法有多種,可以結合設計方法來做總結,在復盤的過程中,要體現最終的結果,即通過數據或用戶反饋對我們設計驗證。

          也要總結其中的不足,為之后工作中避免踩坑,并更好的為以后的工作提供服務。

          以上就是交互設計從入門到精通的5個途徑,如果你有其他想法,歡迎在評論區留言。

           

          原文地址:Echo的設計筆記(公眾號)
          作者:Echo
          轉載請注明:學UI網》交互設計從入門到精通的5個途徑

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

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

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

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

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


          譯文|交互設計不只是流程圖與點擊

          seo達人

          如何評估交互成本并改善用戶體驗?

           

          圖片

           

          交互設計技能

          每位產品設計師都必須掌握三項核心技能:產品思維,視覺設計和交互設計。

          圖片

           

          通常,設計師應該在所有三個方面都很擅長,且至少要精通兩個。大多數設計師可以通過在線資源學習和項目實操來掌握視覺設計和產品思維。然而交互設計卻是設計師最難自學的核心技能。

          本文提供了學習和提高交互設計技能的基礎和框架。

           

          定義交互成本

          交互設計背后的理念基礎是“交互成本”,這經常用來衡量一個產品的可用性。尼爾森·諾曼(Nielsen Norman)將“交互成本”定義為用戶為實現其目標而必須付出的身心努力的總和。

          通常,我們希望將交互成本保持在盡可能低的水平。但是這很困難,因為產品涉及的用戶場景越多,難度就越大。支持更多用戶場景和功能會增加產品信息架構(IA)和導航的復雜性。用戶場景是一系列步驟,是從用戶的目標開始到該目標完成的整個流程。

          復雜的信息架構會增加用戶所需的點擊次數。例如,iOS時鐘應用程序具有以下用戶場景目標:打開鬧鐘,添加鬧鐘和編輯鬧鐘。

          大體原則是重點放在降低用戶主要使用場景的交互成本。當產品容納太多場景時,就變得更難使用。當創建新產品設計時,應當選擇一個特定的用戶和使用場景。

           

          物理和心理交互成本

          大多數初級設計人員都有這樣的誤解,即交互成本等于用戶完成任務所需的點擊次數。但是,它遠不止于此。交互成本可以分為物理交互成本(PIC) 和心理交互成本(MIC)。

           

          圖片

           

           首先找到關鍵用戶使用流程

          最佳實踐是識別主要用戶使用場景(即紅色路線,見下圖紅色區域),并在必要時以犧牲次要用戶使用場景為代價來減少其交互成本。

          可以使用紅色路由分析(RRA)來評估哪些用例交互流程對主要用戶最重要。紅色路線往往很關鍵,涵蓋了具有多個步驟的端到端任務:經常被使用,為大量使用而構建,提供最大價值,具有明確的成功標準以及與產品指標掛鉤。

           

          圖片

           

          例如,在Uber app里(打車出行應用),用戶的主要使用場景(紅色路線)應該是打車,但是他們的常規路線是添加付款方式。

           

          復雜性守恒定律

          根據Tesler的“復雜性守恒定律”,所有系統都具有無法刪除或隱藏的固有復雜性。良好的設計可確保由系統而不是用戶承擔盡可能多的復雜性。

           

          圖片

           

          首先減少主要用戶場景中的交互成本,然后將復雜性負擔轉移到最不重要的場景上。Tesler認為,寧可讓設計師和工程師多花費一周左右的時間來降低應用程序的復雜性,也不要讓數百萬的用戶多花哪怕一分鐘。

          注意,不要將界面簡化到過于抽象。一個常見的陷阱是降低物理交互成本(PIC),卻以心理交互成本(MIC)為代價-我在看你呢,蘋果公司。

          當系統處理了盡可能多的固有復雜性時,應當將其余復雜性從主要場景轉移到次要場景中去。因此,大多數字產品的設置都很復雜。在大多數情況下,設置通常是次要使用場景,很少使用。

           

          心理交互成本(MIC)

          初級設計師通常會忽略心理交互成本(MIC),他們只關注物理交互成本(PIC)。

          你可能會在可用性差的產品中注意到的心理交互成本(MIC)。初級設計師通常會忽略心理交互成本(MIC),他們只關注物理交互成本(PIC),包括復雜的導航、密集的指令、非常規的思維模型和交互模式等。

           

          注意和記憶

          心理交互成本(MIC)的兩個最重要的組成部分是注意力和記憶力。

          當一項任務需要過多的注意力或記憶才能完成時,它將具有較高的心理交互成本(MIC),從而降低了可用性。

          一些增加注意力成本或轉移注意力的常見元素包括小彈窗,內容模塊劃分,引人注目的視覺效果以及與用戶當前任務無關的動畫效果。用戶很容易被這些元素分心。確保當他們嘗試完成任務時,不要將他們的注意力吸引到其他地方。

           

          評估注意力

          如果要評估界面對心理交互成本(MIC)的關注程度,可考慮進行眼動追蹤研究(ETS)。使用ETS不僅推斷用戶的位置,還可以推斷他們的想法。

          ETS的兩個和眼睛相關的運動指標:“注視”和“掃視”。當用戶的瞳孔在界面元素上停留足夠長時間時,就會發生注視。眼球運動時會發生“掃視”運動-在界面內的各個區域之間飛梭。

          如果ETS揭示了許多與任務無關的跳躍式運動軌跡,可能是因為界面分散了注意力。ETS結果可以幫助您了解有什么干擾和不必要的東西導致用戶錯過了界面中的關鍵信息。

           

          工作記憶

          對于不同類型的記憶都有廣泛的分類。就設計師的角色和責任而言,工作記憶(短期記憶的一部分)是最相關的。最短的記憶類型稱為工作記憶,通常在任務過程中僅持續幾秒鐘。換句話說,當我們參與其他認知過程時,我們的工作記憶負責我們可以掌握的信息。

          米勒定律指出,普通人一次只能在他們的工作記憶中保留5-11件物品。完成產品中的任務所需的工作記憶與強加給用戶的心理互動成本(MIC)負擔成正比。

          相反,任務不應要求用戶隨時在其工作記憶中保留七個以上的項目。在極少數情況下,要求用戶在其記憶中保存11個以上的項目,請使用“區塊”減輕其精神負擔。區塊化是指將信息分組。

          例如,我們記住電話號碼為XXX-XXXX而不是XXXXXXX。記住兩個部分的數字要容易得多,而不要記住一系列七個單獨的單元。

          與注意力和記憶有關的另一個考慮因素是“??硕伞?。此條定律指出,“做出決定所需的時間會隨著選擇的數量和復雜性而增加。

           

          圖片

           

          過多選擇讓用戶不知所措,應盡可能突出顯示最佳選擇。將復雜的任務分解為較小的步驟,即在適當的時候使用漸進式披露(例如過長的表單采用分區塊,分步驟的形式進行設計)。

           

          物理交互成本(PIC)

          常見的物理交互成本(PIC)因素包括到達距離和目標寬度(費茨定律),用戶輸入的數量以及完成任務所需的操作等。

          費茨定律指出,擊中目標的時間(例如,單擊按鈕)是距輸入設備的距離和目標的擊中框寬度的函數。

           

          圖片

           

          例如,如果鼠標光標很遠且按鈕很小,則單擊桌面上的按鈕將花費更長的時間。

          評估物理交互成本(PIC)的最佳方法是“任務分析”和檢查可用性指標,例如“任務時間”。任務分析的在于完成用戶目標所需的任務數量,這些任務的頻率,物理要求和任務時間。

           

          交互路徑和動機

          在某些情況下,用戶可能采取多種路徑來實現其目標。用戶根據“預期效用”的概念來決定采用哪種路徑。

          定義為:預期效用=預期收益-預期的交互成本。

          換句話說,用戶權衡每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的路徑。用戶趨向于具有最低的估計交互成本的路徑。即使存在成本較低的路徑,如果該路徑不直觀或不熟悉,由于心理交互成本(MIC)較低,他們最終也會選擇他們更熟悉的路徑。

          具有較高動力(例如,由于品牌運營)的用戶更有可能承擔較高的互動成本以實現其目標。假如蘋果公司的網站的交互成本很高,那么用戶可能仍有足夠的動力去完成他們的任務。然而,如果用戶購買常規產品時付款流程的交互成本很高的話,那么他們很可能去其它網站購買。

           

          結論

          理解和評估交互成本對于任何現代產品設計師來說都是重要的技能。期望設計師們能超越通常的交互設計考量,更多的研究和運用心理交互成本(MIC)和物理交互成本(PIC)的分析。

          我們應盡可能減少交互成本,但是,當必須做出權衡時,要保證首要基礎用戶使用場景的交互成本足夠低。

          第一步就是創建一套規則和框架,測試和評估用戶的交互成本。

          注:

          原文作者Richard Yang,

          Interaction design is more than just user flows and clicks

          譯文中有部分內容刪減。

           

          原文地址:百度MEUX(公眾號)

          作者:搜索用戶體驗

           轉載請注明:學UI網》譯文|交互設計不只是流程圖與點擊

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

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

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

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

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




          B端交互設計過程中的思考

          seo達人


          前言

          寫這篇文章的初衷是由于工作中帶新人發現他們從拿到一個需求不知道如何下手開展自己的工作,即使開展了也是丟三落四,需要反復回爐重造。希望通過這篇文章可以對他們有一些幫助的同時也是對自己工作的一個思考總結。有什么不足之處還請各位見諒,也可以和我一起探討一下。
           
          由于我的工作內容基本都是設計一些B端產品,并且團隊項目中沒有產品經理的崗位,經常的情況就是直接對接客戶,接觸最原始的需求,這些需求很可能是客戶的一段話,也可能是一個需求文檔,所以對于我們設計人員理解需求的要求就比較高了。我常常跟別人說,一定要多思考。因為設計師所有的產出物都依賴于我們的思維。在動手之前一定要多動腦。

           

          01.B端產品設計原則  

          B端產品最重要的價值應該就是降本增效了。那么我們設計師如何通過專業的角度,去發現問題,解決問題,實現企業通過產品達到降本增效的目的呢?
           
          我總結了十個設計原則:可用性、易用性、可見性、明確性、一致性、合理性、習慣性、便捷性、高效性、擴展性。
           
          可用性:我們做的任何產品和需求都是給人使用,解決某人在某種場景下的某個問題的,那就要可實現可用。舉個例子:小明是個光頭,你走過去跟他說,洗剪吹了解一下。那他一定不會搭理你。對他來說當下你的建議沒有可用性。
           
          易用性:我們經常會說這個東西太好用了,這個東西設計的反人類,太難用了。這就是易用性的價值。直接影響用戶體驗的問題。
           
          可見性:我認為可見性的問題就是信息結構分類分層的問題,重要的信息是否清晰可見,可以快速引導用戶當前在什么場景能做什么事。
           
          圖片
           
          明確性:產品信息內容的準確表達,用詞明確。
          圖片
           
          一致性:產品的跳轉邏輯,交互方式,結構布局,語言體系都要保持統一,并且和品牌形象保持一致,創建用戶的認知和使用習慣。減少用戶的學習成本。
          圖片
           
          合理性:業務流程符合操作邏輯,交互設計和視覺設計層符合規范,遵循一定的現實物理特性。
           
          習慣性 : B端產品很大一部分需求是將一些線下流程的線上化處理,所以在設計業務流程的時候要考慮用戶處理流程的習慣性問題以及用戶使用平臺操作的習慣性問題。比如我們習慣把五角星的圖標識別為收藏功能。就不要打破用戶的這種認知習慣。
           
          便捷性:基于B端產品的業務復雜性,我們要適當的在某些地方提供快捷操作,提高用戶的操作便捷性。比如導航的快捷搜索功能。
           
          高效性:B端產品里用戶的使用目標就是高效處理任務。所以平臺在功能設計上要盡量簡化操作,能一步完成的事一定不用二步,提高用戶的工作效率。
          圖片
           
          擴展性:在設計框架和內容的過程中要考慮后續擴展的可能性,有些框架內容如果有增加或者修改要怎么處理和展現。
           
          接下來我們就結合B端產品的特點圍繞這十個原則,講述一下交互設計過程中的思考總結。
           
           

          02.設計目的和業務邏輯的理解  

          積極有效的溝通貫穿整個設計過程!一定要溝通!溝通!溝通!我們設計的過程要與項目組的很多角色對接,客戶,需求,開發,測試,每個角色站的角度不同,考慮問題的方向就不同,積極有效的溝通可以避免走很多彎路。一定不要自己悶頭想當然,你以為的并不是你以為的!簡單說就是有疑問就找相關負責人溝通。“打破沙鍋問到底”在這里非常適用。
           
          首先我們要了解需求(也可能是產品,這里就拿需求來講)的背景,結構和內容。

           

          1.為什么做這個需求?

          這個需求從何而來?這個問題有助于我們了解它產生的原因,挖掘真實的需求。它是為解決什么問題而產生的,跟它所關聯的內容有哪些?這個需求是屬于新增的還是優化的,還是bug修復?如果是優化的需求,是什么原因要做這個優化?方便我們快速找到問題,做出優化方案。比如我們發現有一些需求是隸屬于某一個系統下的,那么我們設計的時候就要遵循一下以往的設計規范與原則。保留用戶的操作習慣等等一些繼承的問題。

           

          2.這個需求有什么功能?

          大概了解一下這個需求要實現哪些功能?這些功能的復雜程度是怎樣的?(這里需要跟開發人員也溝通一下大概實現的難度和周期。)實現的周期是多少(我們要根據周期制定我們設計的方案)?要在哪些終端上展現?權限是怎樣劃分的?用戶角色有哪些?

           

          3.怎么實現這些功能?

          這些功能要通過哪些技術手段實現?實現的方法有很多,我們要判斷在資源,時間,成本,實現難度,用戶體驗等等的各種因素下用那種實現方案更優?這個階段需要跟各方人員共同商議出一個解決方案。當然這是一個比較概括的方案。我們往往會制定幾套方案,在實際執行的過程中隨時調整這個方案。

           

          結構梳理

          這里就需要用到思維導圖了。我們要對整個需求的信息架構做梳理。包括功能結構,業務流程,跳轉邏輯。

           

          1.功能結構

          功能結構其實就是對整個需求的框架結構的呈現。根據需求功能劃分框架結構。主要分為樹形結構,矩形結構,線性結構,信息結構。
           
          樹形結構:從上到下的信息架構完整地容納需求的所有內容。基本單位是節點。比如個人設置是一個大的模塊單元,里面包含基本信息設置/賬號密碼設置等。適用于層級較深,每個單元模塊之間保持一定的獨立性,呈樹形結構的信息內容系統。
          矩形結構:這種結構用戶可以帶著不同的需求快速找到自己想要的內容。不同分類下的內容相互穿插。適用于內容的標簽分類篩選系統。例如表格頁面的標簽分類篩選功能。
           
          線性結構:單向流程結構。適用于專注度高,業務流程單一的結構,用戶在當前頁要么返回,要么下一步,只能沿著一條線往下進行。例如注冊,新建內容等場景。
          信息結構:適合簡單的信息呈現,按照信息的重要程度做分層處理,劃分出結構。

           

          2.業務流程

          這一步需要畫出業務流程圖。
          業務處理的每一步過程去向,下一步的處理邏輯和反饋結果,返回路徑,業務角色權限劃分,操作流程路徑是否一致?異常情況,例如中斷的處理與提示。
          圖片

           

          3.跳轉邏輯

          在分析跳轉邏輯之前要明確業務功能之間的關聯,是上下級關聯關系,還是分屬同級模塊?或者是頁面操作的新增,修改,編輯,詳情等內容?頁面層級關系決定跳轉邏輯,同樣層級關系的跳轉邏輯&跳轉方式要保持一致。業務流程如何跳轉才能清晰引導用戶?一個頁面中操作會不會有關聯或沖突?這些問題都要在這一步考慮清楚。
           
          常見的跳轉方式有直接跳轉、左右跳轉、上下跳轉,側滑,彈窗等,在設計時需要考慮好其中的關聯性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設計。具體的跳轉方式的使用這里就不詳細講解了。網上有很多相關的教程。

           

           03.交互設計  

          這一步我們需要交付交互設計文檔和線框圖。這一步一邊做一邊也要及時跟開發和需求去溝通,一方面確認自己的業務理解和展現形式符合業務邏輯和客戶的要求。一方面確認你的設計方案開發可以有效高效地實現(很多設計小伙伴說我的設計方案很好呀,只是開發沒能力實現。emmm….)。每個公司的開發團隊能力都不一樣,要根據團隊里的實際情況去做設計推動項目的落地。畢竟我們做的設計還是要讓人用起來的呀。所以懂一些開發知識是很有必要的,到底真的是開發哥哥想偷懶,還是真的有難度,豈能躲過我們的火眼金睛??!
           
          交互設計這件事如果展開說恐怕要說三天三夜也說不完。我這里只給大家提供一個設計思路,大致需要注意的一些關鍵點。詳細的交互設計知識,還需要大家慢慢了解學習。尤其是想專注做交互設計的伙伴們。
           
          我們在輸出交互設計的過程,大致要從信息載體,信息設計,導航設計,權限設計,圖表設計,組件設計,反饋機制,語言設計,特殊場景,動效設計這幾個方面去考慮。
           
          注意設計過程中交互時的操作狀態是否明確合理,交互效果是否可以實現以及不同終端的設計規范和原則。

           

          1.信息載體

          我們要清楚我們做的需求是要在哪些終端上展現?不同的終端有不同的交互方式。是pc端還是移動端或者是車載設備,電子屏幕?是ios系統還是安卓系統?我們的設計要符合不同系統和平臺的設計規范。橫豎屏幕要如何展現?分辨率都有哪些?如何適配不同分辨率下的展現效果?是否需要版本適配?是否需要硬件交互:話筒,藍牙,定位,相機等。是否需要硬件聯動:打印機,出票機等。

           

          2.信息設計

          B端的信息設計包括信息來源,信息分類,信息狀態,信息顯示等。
          信息來源:我們要明確信息的來源是哪里?后臺傳輸還是前臺展示還是用戶錄入。
          信息獲取的方式是什么?自動更新還是操作觸發?刷新的方式是手動還是自動?
          信息分類:根據業務需求,劃分信息類型,顯示層級,由高到低,按照設計原則規劃信息展現的比重和方式,把數據結構化。
          圖片
           
          信息狀態:要考慮信息的默認狀態,為空狀態,常規狀態,內容過期狀態下應該怎么顯示和布局。
           
          信息顯示:信息的顯示要考慮信息的極限值,非最優展示效果,重復或短缺(顯示不全怎么辦)情況,異常顯示:敏感詞,內容違規,數據獲取異常,加載時間過長等情況。

           

          3.導航設計

          導航的結構決定了整個需求的架構系統,頁面層級。簡單清晰的導航可以讓用戶快速清晰地獲取整個需求的功能和內容概覽。一般根據導航層級和內容的不同,我們會分為橫向導航,豎向導航,標簽導航,組合導航等方式去安排布局。功能復雜的導航應提供搜索與快捷菜單。

           

          4.權限設計

          角色權限影響功能和數據的展現。要注意角色類型的清晰劃分。角色能不能轉變?怎么創建角色轉變的系統感知?

           

          5.圖表設計

          圖表的內容分為:標題,指標,指標值。我們要根據業務需要選擇合適的圖表形式展現圖表的內容。比如柱狀圖一般適合表示各個指標之間的對比關系,折線圖一般適合一段時間內的指標變化趨勢。還要根據頁面布局空間大小選擇合適的展現形式。確定指標的枚舉值,指標值的范圍。圖表之間的關聯性等。

           

          6.組件設計

          這里就不一一列舉了,具體的分類和使用方法可以在ANTD的官網查看一下就知道了。
          https://ant.design/docs/spec/overview-cn
          組件的交互形式按照使用場景,保證功能的全面性,避免漏掉組件交互狀態。
          這部分我會在以后的文章里詳細總結。

           

          7.反饋機制

          反饋分為系統反饋給用戶的,用戶對系統的主動反饋,系統通知。
          用戶反饋要設置好入口與方式。防止反饋對用戶的干擾,簡化反饋流程。
          系統的通知要確認好方式,是郵件,信息還是其他。通知時間,內容格式的統一規范。
           
          操作后的結果反饋時間,方式,位置的設定。操作異常的提示,公告引導的提示,錯誤糾正。
           
          反饋機制要做到簡單明確,輕重得當,前后統一。既防止用戶的誤操作,又做到人性化的提醒作用。

           

          8.語言設計

          平臺的語言表述要統一,提示用語,稱謂,菜單與命令用語,標點格式,產品和功能名稱要保持一致性,符合操作場景,能明確引導下一步操作,要有一定的人性化表達。以人為本,風格恰當。B端產品的語言體系要區別于其他產品,大眾化詞語難以達到業務術語的精煉效果,強制大眾化反而不易理解。

           

          9.特殊場景

          注意一些極端情況下的設計,比如惡意使用的場景考慮,我們的使用場景和規則都是基于正常的使用場景去做設計,但是不能排除就是有些人想跟你唱反調,我就是要這么做,系統該怎么反應?如何處理這種操作?內容缺省異常狀態該怎么設計?中斷情況,比如硬件故障,斷網,用戶退出,系統該如何處理當前的場景?設計的過程中不要漏掉這部分的容錯和防錯機制。
           
          還有一些其他因素的考慮,比如一些情感趣味性,品牌傳達,商業性的融合設計。

           

          10.動效設計

          在設計這部分內容的時候主要考慮轉場過渡方式的選擇以及節奏的把控。具體的設計方法筆者會在以后的分享里跟大家碎碎念,一起來探討。也會出一部分動效的作品給大家。希望大家到時候能關注。筆芯~

           

           04.視覺設計  

          這部分想聊一個問題:總是會有非設計人員對你的界面指指點點,我相信幾乎每個設計師都會遇到這個問題。我們要用專業的視角去告訴別人,你為什么這么做?而不是憑感覺做設計,哪怕是界面上的一根線,也要做到有理有據。給予別人專業的建議,一個圓和一個方形,那個更適合放在界面當中,為什么?會讓人更理解你的設計。我們要具有解釋設計作品的能力。
           
          視覺設計要運用到很多相關的知識體系。
          比如人的視覺焦點:會沿著f曲線運動,人的大腦處理圖形的速度遠大于文字。
          注意設計過程中的對比和一致性,配色,排版,文字,間距,圖形的運用。
          比如柵格系統,可以使你的界面布局保持一致,整潔和規范。
           
          B端系統的配色要注意紅綠色的使用。因為一般會用這種顏色區分一些業務等級,隨便的使用可能會造成一定的誤解。整套的配色方案應該和品牌形象結合在一起,根據顏色的性格,明確主色,輔色,點綴色,注意不同色塊體積的運用。
          排版要做適當的留白,對齊。文字的顏色、大小,字重區分層級,間距。
          整個系統的視覺表達風格統一。 

           

          原文地址:墨染動效(公眾號)

          作者:喬公子

          轉載請注明:學UI網》B端交互設計過程中的思考

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

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

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

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

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



          從微信朋友驗證功能迭代,看交互設計對產品的價值

          seo達人


          一、功能背景

          隨著社交網絡的擴大,用戶網絡好友越來越多,但是這些好友并不是真正的朋友。久而久之用戶開始陷入社交恐慌,不愿意發朋友圈或者發朋友圈時反復斟酌。
          于是微信在添加朋友和朋友驗證時增加了關系分級設置,有利于減少用戶發圈的心理壓力,提高發圈積極性。
          其實該功能并不是新功能,微信7.0.9版本已經上線了,只不過功能并沒有植入在朋友驗證頁面,信息層級比較深,導致用戶可能不知道或者懶得設置。
          圖片
          從8.0版本開始,該功能添加到了朋友和朋友驗證頁面,強化了曝光展示,方便用戶快速完成朋友權限設置。

           

          二、設計迭代

          1、初始版本
          最初上線時,“朋友權限”功能需要用戶手動選擇,并將“僅聊天”作為了首選項。用戶選擇了“朋友圈”選項,會展示關聯信息設置。
          “完成”按鈕延續了7.0版本的布局,放置在右上角,根據選項是否選擇,增加了按鈕狀態區分。
          圖片

           

          但是無論組件形式還是視覺表現,用戶都不太容易感知到朋友權限是可操作項和必選項。加之7.0版本培養的行為習慣,用戶不會主動瀏覽完所有內容后再進行操作,而是直接點擊右上角“完成”按鈕。
          用戶的行為過程就變成了“點擊按鈕>>發現錯誤提示信息>>完成權限選擇>>二次點擊按鈕“,無形之中增加了用戶交互成本。
          圖片

           

          對于好友數量少的用戶,或許沒有切身體會。但是對于一些引流號,每天都要添加好友時,則增加了操作步驟,影響了行為效率。
          下面是我從網絡上找到的一些用戶反饋,雖然用戶數量不多,但是代表了部分用戶的心聲。
          圖片

           

          2、版本迭代記錄
          緊接著朋友驗證頁面開始了密集更新,粗略估計已經迭代了3~4個版本。

           

          版本迭代1
          圖片

           

          1)增加標簽功能,提高用戶效率
          為了更好的管理好友關系,朋友驗證頁面增加了“標簽”功能,并將標簽平鋪展示開來,方便用戶快速選擇。

           

          2)優化布局
          “完成”按鈕從右上角轉移到了頁面下方,用戶視覺動線更加順暢,有利于引導用戶完成內容瀏覽,操作更加便捷。
          從產品角度出發,朋友友權限首選項調整為了“朋友圈”。因為作為一款社交產品,還是希望用戶更多的交流互動。

           

          版本迭代2
          圖片

           

          1)精簡頁面信息
          或許是數據顯示設置標簽的用戶數量并不多,平鋪展示反而增加了頁面的信息量?;蛟S是考慮到小屏幕手機空間有限,標簽平鋪影響到“完成”按鈕在一屏內露出,需要上下滾動才能完全查看屏幕內容,增加了用戶的行為成本。
          于是標簽功能弱化為入口和選擇結果展示,引導用戶跳轉二級頁面操作,減少了頁面的信息負荷。

           

          2)統一展示樣式,強化功能引導
          朋友權限調整了視覺樣式,背景色與其他可操作項統一,增加必選說明和操作選擇框,引導用戶做出選擇。但是必選功能還是讓用戶無法理解,為什么聯系人較多,就要手動設定權限呢?

           

          3)增加防錯設計,減少用戶錯誤幾率
          用戶未進行出朋友權限選擇時,“完成”按鈕處于不可用狀態,有效防止用戶直接點擊的錯誤。

           

          版本迭代3
          圖片
          經過一段時間的學習,用戶已經形成了功能認知。最終微信將“手動設置”調整為了“默認選擇”。既保留了用戶的選擇權,又簡化用戶操作,并且精簡了選項信息內容,與朋友權限頁面文案保持一致,便于用戶瀏覽和理解。

           

          三、設計總結

          1)產品設計不一定必須一步到位
          為什么微信在初始版本中不采用系統默認選擇,提高用戶效率呢?是設計師沒想到嗎?
          我個人認為“系統默認選擇”必然是最初的設計方案之一,之所以初始版本強制用戶做出選擇,或許是產品為了收集用戶真實行為數據、培養用戶對新功能的認知而制定的發展策略。所以交互設計需要服務于整個產品發展策略和目標。

           

          2)用戶是懶的
          大多數用戶喜歡簡單,對于某些信息會“視而不見”。因此某些場景下,需要增加一定的行為障礙點,引起用戶的關注,培養用戶認知。當然前提是用戶對你的產品有足夠的依賴性,否則就可能放棄你的產品了。

           

          3)設計是不斷試錯迭代的
          設計師可以通過各種設計策略去影響用戶行為,但是需要充分考慮用戶認知、行為習慣、操作效率、學習成本等多方面的因素。只有通過不斷地迭代,才能找到真正滿足用戶需求的設計方案,即使是一個小功能。

           

          寫在最后
          說到功能本身,對于我個人而言確實挺雞肋的。我不是朋友圈的重度用戶,也不會去設置朋友圈的權限。但是每次通過好友驗證時,都要面對著一行行的內容信息,忍不住會多看幾眼,生怕出現什么設置項變動,影響到好友關系。
          大家是怎么這個功能的呢?歡迎留言評論交流~

           

          原文地址:子牧UXD(公眾號)
          作者:子牧先生
             

          轉載請注明:學UI網》從微信朋友驗證功能迭代,看交互設計對產品的價值

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

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

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

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

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




          詳解|交互設計中的色彩搭配,這樣更有效!

          seo達人

          圖片

          △ 豆瓣 App 電影榜單卡片

           

          顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多,本文會告訴你,顏色如何挑選會更有規律,并保證基本和諧。

           

          1. 色彩學概念淺談

          想要做好色彩的搭配,需了解一些色彩學概念。色彩學將顏色分為:同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色,如下圖所示:

          圖片

          任意顏色都可以作為基色,每一個基色都有其相對應的同類色、對比色、互補色等等。

          通常情況下,相鄰的兩個顏色,選擇基色和鄰近色之間的顏色,也就是與基色之間的角度 ≤ 60° 的顏色,會讓頁面的顏色顯得和諧統一。

          圖片

          △ 得到 App 服務內容卡片

           

          圖片

          △ QQ 音樂 App 榜單卡片

           

          如果選用對比色和互補色,則需要控制顏色的面積,比如以紅色為主的頁面中可以出現藍色,但藍色的面積占比最好不要超過 20%。

          除了色相上的變化,顏色還有明度純度上的變化,對于顏色的影響也至關重要。這三個詞匯的概念如下:

          • 色相 Hue:也稱色調,是指色彩的相貌
          • 純度 Saturation:也稱飽和度,是指色彩的鮮艷程度
          • 明度 Brightness:也稱亮度,是指顏色的明暗程度

          色相、純度、明度三者構成了色立體的概念,讓色相環由二維變成了三維的概念。

          圖片

           

          2. HSB 色彩模式

          RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念,在實際工作中我們也可以借鑒 HSB 色彩模式進行調色和選擇顏色。

          在 sketch 和 PS 的 HSB 色板界面如下圖:

          圖片

          其中:

          • 色相 Hue (H):取值在 0-360 度之間
          • 純度 Saturation (S):取值在 0-100 之間,數值越高色彩就越純艷
          • 明度 Brightness (B):取值在 0-100 之間,數值越高色彩就越明亮

          圖片

          由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間,因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。

          具體怎么使用這些數值,我們用案例來說明:

           

          案例  

          某 PC 端產品功能卡片需要做配色設計:

          圖片

          已知產品的品牌色是以下兩個顏色,其 HSB 色值如下圖所示:

          – 顏色 A:H=233,S=74,B=100(主色)

          – 顏色 B:H=267,S=79,B=100(輔色)

          圖片

          因此卡片的衍生色我們可以使用:藍色調 + 臨近色,且臨近色的顏色最好介于藍色和紫色之間,會使產品頁面顏色的搭配更加和諧統一。

          于是我們可以先根據品牌主色:

          – 顏色 A:H=233,S=74,B=100

          來確定初步顏色,我們只改變色相(H)的數值,分別在 233 的基礎上進行 +10 和 -10,由此可以得到三個顏色 A1、A2、A3,呈現效果如下圖:

          – 顏色 A1:H=253,S=74,B=100

          – 顏色 A2:H=243,S=74,B=100

          – 顏色 A3:H=223,S=74,B=100

          圖片

          現在的卡片顏色略顯單薄,我們可以再給每一張卡片加一個顏色,做出過渡色效果。于是我們在數值 A1、A2、A3的基礎上,保持色相(H)不變,只改變這三個數值的明度(B)和純度(S)的數值。以顏色 A1 為例:

          – 顏色 A1:H=253,S=74,B=100

          現在,我們想要得到一個比 A1 更深一點的顏色 A1-1,根據色彩學理論,我們可以降低明度(B)的數值,這樣顏色會變深,同時增加純度(S)的數值,這樣顏色會更沉穩純正,為了保證數值可控,我們將明度(B)降低 26,將純度(S)提高 26,所以可以得到顏色 A1-1 的色值:

          – 顏色 A1-1:H=253,S=100,B=74

          A1 和 A1-1 的顏色效果如下圖:

           

          圖片

          按照此方法,我們可以得到兩組顏色和其數值:

          圖片

          所以我們的卡片可以使用漸變色:

          圖片

          這樣卡片的顏色就基本確定下來了,我們可以再調整下卡片的細節,比如增加相關的背景插圖,調整卡片上的文字排版等等,這組 PC 端卡片最后的效果如下圖:

          圖片

           

          3. 補充說明

          一個頁面中元素的色彩選擇有很多影響因素,比如:產品的品牌色、頁面的功能、頁面的內容、氛圍等等,所以還是要具體情況具體分析,綜合考慮選擇顏色。

          當然,以上提出的這些數值只是參考,為的是給你的顏色選擇提供理論支撐。在實際應用中,也還是需要設計師根據具體情況,以及人眼視覺感知的效果,酌情做顏色上的優化處理。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》詳解|交互設計中的色彩搭配,這樣更有效!

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

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

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

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

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



          漸進式披露!交互設計領域獨有的設計方法論

          seo達人


          一、什么是漸進式披露?      

          在產品設計中常常能聽到這樣的說法:把控制權給用戶,確保用戶明白一切都在自己的掌控之中。

          雖然更多的選擇會讓用戶興奮,但問題是過多的選擇也會讓用戶無法輕易的作出決定,反而造成體驗上的負擔。

          圖片

          漸進式披露不再是簡單地給用戶提供大量的信息和選擇,而是將這個過程分解成幾部分,讓用戶集中注意力在當前的事件上,從易到難地引導用戶。

          這樣不僅可以確保用戶不會被新信息淹沒,還可以分解用戶不想做的任務。例如將一個特別長的表單分成三或四個步驟,分步進行填寫,同時還能單獨查看每個步驟的內容。

          圖片

           

          二、漸進式披露的優勢

          想象一下這樣的場景,我們剛下載了一款新游戲,進入游戲后發現里面有各種各樣的游戲規則和操作細節,如果只是簡單地將所有游戲信息推送出來,那么我們可能就會淹沒在各種規則和細節里,根本記不下這么多規則,甚至會影響游戲體驗。

          產品設計也是如此,以一種漸進的方式呈現信息,可以讓用戶在深入了解產品細節前就投入到產品的使用中。

          圖片

          對新用戶來說,漸進式披露讓他們有足夠的時間熟悉產品的基本知識,然后再進行更復雜的功能或任務,這樣可以讓整個產品更易于探索并提升可用性。

          漸進式披露可以讓用戶的整個體驗更加高效,改善用戶對設計的第一印象,并幫助他們克服學習曲線。

           

          三、漸進式披露設計準則

          劃分主次和優先級

          漸進式披露主要的目的是將用戶注意力集中在重要的事情上,尤其是在一開始的時候。

          在設計時,我們要考慮導航菜單以及選項的優先級,信息和功能的呈現也必須如此,通過漸進式披露能讓用戶首先體驗產品最核心的功能和信息。

          圖片

          將注意力集中在關鍵功能上。比如進入電商App,重點是引導用戶如何完成從看到買的整個過程,至于用戶是從主頁購買、搜索購買,還是從直播購買,這些等待用戶慢慢去發現。

           

          從主要內容向次要內容過渡

          對于想要了解產品中每個功能的用戶來說,除了明顯的主要內容,次要內容的呈現也變得很重要。

          通過好的按鈕設計或可點擊的鏈接來實現從主要內容向次要內容過渡。

          圖片

           

          四、漸進式披露案例分析

          Noom

          Noom不會一上來就向新用戶介紹眾多的功能,而是隨著用戶不斷滑動查看產品,一次推出一個功能。

          圖片

          Noom通過這種讓人感覺比較自然的方式來完成信息的呈現,從整體上提升了用戶體驗。

           

          谷歌瀏覽器

          谷歌瀏覽器的導航支持個性化設置,這樣用戶就可以把常用的內容設置到上面,通過點擊主導航欄上的更改就可以輕松定義內容。

          圖片

          谷歌瀏覽器的高級設置包含了大多數用戶不需要觸摸的內容。這些內容不是立即可見的,但在用戶需要的時候仍然很容易就可以找到。

           

          刺客信條

          在《刺客信條》創建的游戲世界中,玩家不會從一開始就被各種信息轟炸,而是隨著他們深入游戲時,在動畫和對話框中獲得更多的游戲信息。

          圖片

          游戲中信息披露的一個好處是,玩家只會收到與當前玩游戲時相關的信息。這讓玩家盡情享受當前的游戲,不用擔心會忘掉各種規則。

           

          多鄰國

          學習一門全新的語言多少有點困難,需要在開始的時候記住太多的細節和信息。多鄰國可以幫助用戶掌握每節課上的一些關鍵概念,不會給人們帶來大量的細節或復雜的短語。

          圖片

          渡過新手期后,多鄰國會在主頁逐步披露課程內容,因此用戶調整自己的學習節奏慢慢來,避免產生畏懼心理。

           

          最后

          漸進式披露在體驗設計中扮演著重要角色,可以有效改善用戶的初次體驗,縮短學習曲線,并幫助用戶通過產品實現目標。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》漸進式披露!交互設計領域獨有的設計方法論

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

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

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

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

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




          干貨|交互設計中的「有效反饋」7大準則!

          seo達人


          準則 1.  Timely —— 找準時機,即時反饋

          在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣,或糾正用戶的不當操作。

          如果反饋內容需要較長時間的加載,也可以給用戶設計一些有特點的 / 情感化的加載狀態,緩解用戶等待的不耐煩,又可以傳達一定的品牌調性。

          例如:知乎 App 在加載內容的過程中,增加了 IP 形象的動態效果:

          圖片

           

          準則 2.  Specific —— 具體分析,差異對待

          在設計交互反饋時,不僅僅要給出正確或錯誤的判斷結果,同時也應該考慮到用戶的個性化需求,針對不同類型、場景、地區的用戶提供差異性引導和服務。

          例如:大眾點評、高德地圖可以根據用戶的位置,在用戶開始使用產品時就推送個性化信息:

          圖片

           

          準則 3.  Balanced —— 正負反饋,穿插結合

          通常來說,正面的反饋會激發用戶的自信等積極情緒,因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候,我們可以在其中穿插一些正面的消息,減少或緩解用戶的因負面反饋帶來的消極情緒。

          這就好像是別人跟你說:“ 壞消息是……,但是,這樣做的好處是…… ”,壞消息不可避免,但加上一點轉折,就會讓他人心里稍微舒服一些。

          例如:美團單車在你騎完車之后,需要支付費用時提示你可以購買單車套餐,雖然是在勸用戶花錢,但看上去依舊很友善,其中的話術包括:“本次騎行免費”,“當前已是最優價格”:

          圖片

           

          準則 4.  Instructive —— 提示下步,指引行動

          有效的反饋會主動多引導一步,對用戶的下一步行動給出清晰的、正確的、指導性的意見,有助于驅動用戶繼續做出有效操作。

          很多 App 在截屏之后都會給出下一步分享的路徑引導:

          圖片

           

          準則 5.  Emotional —— 情感屬性,引起共鳴

          有科學依據證實,人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋,從而也更有可能改變其行為方式。

          例如:雖然只是一個提醒彈窗,QQ 音樂會員到期的續費提醒文案卻經過精心的設計,由各類歌名組成的一句話,每天的到期提醒都不同:

          圖片

           

          準則 6.  Traceable —— 可被溯源,可供反饋

          一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因,可以提供給用戶進行申訴和詢問的渠道,供用戶進行反饋。

          例如:電商平臺和外賣平臺都會在用戶下單或退單之后,提供商品物流的詳細信息,在查看購買的商品的當前狀態時,并可以追溯到商品所在的各個歷史環節:

          圖片

          再比如,高德打車如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道:

          圖片

           

          準則 7.  Less is more —— 質量優先,減少數量

          在這個信息過載而注意力稀缺的時代,好的反饋在于質量,不在于數量。有時數量越多,反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品,而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

          以上這 7 大準則,來源于我們日常工作中的積累和沉淀,對于設計產品的交互反饋具備較高的指導意義,希望對你有啟發。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》干貨|交互設計中的「有效反饋」7大準則!

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

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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