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

          首頁

          用動效創造可用性:動效設計的基本原理

          seo達人


          在用戶界面中,動效不僅僅是一種視覺裝飾,而是一種強大的力量,它可增強產品參與度并擴展設計交流的范圍。

          本文給大家介紹了十二項最基本的動效設計原理,這些都適合用于UX/UI設計項目中,是非常有用的運動原理,建議收藏反復食用。

           

          原理一:緩動 Easing

          緩動效果模擬了現實世界中對象隨時間加速或減速的方式,它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中,物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動,因此在做動畫時,應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適,從而產生更好的總體體驗。

          線性動畫

          沒有任何速度上的變化的的動畫稱為線性動畫,如坐標圖所示,運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬,不自然,讓用戶覺得不協調。一般來說,應避免線性運動。

           

          緩出動畫

          運動的開頭速度很快,結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態,緩出動畫最適合界面里面的動效,快速的入場給人反應很快的感覺。

           

          緩入動畫

          和緩出相反,緩入動畫是開頭慢結尾快,這就像自然落下的球體一樣,速度越來越快。但是,從交互的角度來看,緩入可能讓人感覺有點不自然,因為結尾很突然;在現實中移動的物體往往是減速,而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果,這會對網站或應用的響應速度給人的感覺產生負面影響。

           

          緩入緩出動畫

          把緩入和緩出曲線連接在一起,就是完整的緩入緩出動畫,它的運動過程可以想象一輛汽車從起步到停車的動作,可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢,動畫將有更強的對比,會讓用戶感到愉悅。

          因此,緩動原理實際上是使動畫不再那么尖銳或生硬的過程。

           

          原理二:變形 Transformation

          變形是由一個形態變成另一個形態,這種形變是動畫里最引人注目的。通過元素形態的轉變,告知用戶元素的狀態或作用發生了改變。

          例如這個下載動畫,下載完成后變形為按鈕,其實是符合用戶預期的。這種無縫轉換,可以提高用戶的認知度,提

          升了動畫的連貫性。

          在動效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過物體運動的變形狀態就能很好的體現出來。

           

          原理三:克隆 Cloning

          當元素被克隆時,可表達出元素與元素之間的某種連續性。在此原理中,如何讓物體的出現和離開具有連續性、關系和過渡,是信息準確傳遞的關鍵。

          例如這個發布按鈕,點擊它會創建多個新對象,引導注意力,非常清晰的表達了他們之間的關系。

          還有這個運動健康頁面,在添加練習項目時,從主按鈕克隆生成一系列練習項目,選擇完成后原路返回。

           

          原理四:覆蓋 Overlay

          利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見元素,補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑,通過覆蓋,隱藏相關操作,以減少視覺上的干擾。

          在某種程度上,作為設計師,“層”的概念是顯而易見的,不言而喻。我們用層來設計,層的概念被深深地內化了。但是,我們必須小心區分“制作”和“使用”的過程。

          作為不斷參與“制作”過程的設計師,我們要非常熟悉我們正在設計的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見的部分是根據定義和實踐,在視覺和認知上隱藏的。

           

          原理五:偏移和延遲 Offset & Delay

          偏移和延遲原理是表明元素之間的層級與關系,在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場,定義對象關系和層次結構。

          在上面的示例中,浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現,暗示用戶這里的信息與其他元素之間的區別,吸引用戶注意力。

           

          原理六:遮罩 Masking

          遮罩是決定元素變化的結果是什么,通過暫時使對象顯示和隱藏,以連續無縫的方式轉換,保持了敘事流程的效果。雖然對象本身保持不變,但因為它有了邊界和位置,這兩個因素決定了對象是什么。

          例如這個轉動的咖啡杯,借助遮罩,通過改變logo的位置和吸管的朝向,造成杯子在自轉的假象。

          在上面的例子中,音樂封面改變了邊界形狀和位置,但沒有改變內容。轉換發生在用戶執行操作后激活,是相當巧妙的技巧。

           

          原理七:父子關系 Parenting

          父子關系是將界面元素關聯起來的重要原則,創建出空間和時間層次關系。它最適合作為“實時”互動,例如拖動列表順序時,其他信息會同步跟上。

          回想一下,很多元素屬性都可以創造這種聯動的繼承關系,例如不透明度、位置、旋轉、縮放、形狀、顏色等。

           

          原理八:數值變化 Value Change

          文本和數字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。

          數字和值表示現實中正在發生的事情,既可以發生在實時活動中,也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時,它激活了一種“神經反饋”,用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的,就感覺與現實的聯系會減少。

          數值的變化在各類金融理財和日歷APP中經常出現,數據的動態表達和交流可能會對數據的價值產生影響;如上圖中的數值的動態變化,讓用戶感知到自己可能有能力影響到數據,提升了參與活動的意愿。

           

          原理九:蒙層 Obscuration

          蒙層與原理四的覆蓋類似,只不過蒙層帶有透明屬性,它擋住了后面的信息,但又沒有全擋住。iOS中常見的毛玻璃效果就是如此,它讓用戶意識到正在操作的對象,還有另一個世界。拓展了Z軸的層次結構,補償用戶體驗中的單一視野。

           

          原理十:視差  Parallax

          當用戶滾動時,在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系,移動速度更快的交互式元。對用戶來說顯得更接近,較慢的非交互式元素,會退回到背景顯得更遠,從而更好把內容和環境區分開來 。

          設計師可以利用時間本身來創建這些關系,告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構,而且現在可以利用這種層次結構,讓用戶意識到設計之前掌握用戶體驗內容。

           

          原理十一:多維 Dimensionality

          維度是將界面的元素多維化,使元素看起來像可翻轉的,可折疊的,浮動的??梢允共煌腢I元素實現無縫的過渡銜接,它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。

          此外,維度原理克服了視覺平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現在其他物體的“前面”或“后面”。

          折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象,它由多個元素組合成“折紙”結構,隱藏的物體在空間上仍然可以說是“存在”的,即使它們不可見。

          浮動維度為界面對象提供了空間起源和離開,使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。

          對象維度會產生具有真實深度和形式的維度對象,可以看到,雖然在2D層,元素卻可以3D視角呈現真實的維度。

           

          原理十二:平移與縮放  Dolly & Zoom

          平移與縮放是電影概念,指的是與相機有關的對象的運動,以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭(反之亦然)。

          在某些情況下,無法判斷對象是否正在縮放。可能是在在 3D 空間中向著相機移動,也許是相機在向對象移動,又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。

          鏡頭平移:被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止,而被攝物體進行遠離或接近鏡頭的前后移動。

          鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進行縮放。

          縮放:是指視角和對象都沒有在空間上移動,而是物體本身在縮放(或者我們的視野正在縮小,從而導致圖像放大),這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。

          移動還可以結合維度原則,從而產生更多空間和深度體驗,并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容。縮放允許無縫轉換 – 實時和非實時 – 支持可用性。在創建空間心智模型時,Dolly & Zoom Principle 中采用的這種無縫性非常強大。

          以上,便是有關動效設計的十二條基本原理,希望能給你帶來一些啟發。

           

          參考資料

          https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn

          https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

           

          原文地址:站酷

          作者:印跡_

          轉載請注明:學UI網》用動效創造可用性:動效設計的基本原理

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

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

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

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


          用例驅動設計,讓你的設計更嚴謹

          資深UI設計者

          設計師在業務流程中,若想對整體流程有所把控,推動產品方案的落地實現,則可以借用某種設計思路,達成統籌效果。用例驅動也許是一種不錯的設計思路。本篇文章里,作者就對用戶驅動設計的流程做了整體梳理,一起來看一下。


          一、背景

          產業賦能如火如荼,B端產品因其復雜的業務邏輯令人生畏,再加諸多角色的分層、平臺化技術架構,儼然在構造一個復雜的系統。

          單純基于角色現狀的行為洞察、業務流程的梳理,仍不易完整把控其產品設計。從業務方傳遞到設計方的信息存在斷層,含雜其中的體驗設計則顯得撲朔迷離,設計師較難“從外向內”摸到產品的核心邏輯,遑論其業務邏輯。面對既定的、不完美的“產品結構”愛莫能助,只能試圖在框架層或表現層做緩解,長期下來,將失去對設計邏輯的控制。

          用例驅動設計,讓你的設計更嚴謹!

          復雜的AutoCAD與Inventor工具

          我們需要一種能應對該局面的設計思路,有效地連接業務邏輯、產品邏輯,層層滲入對體驗的考量,最終構造出既契合B端業務,又具有良好體驗的產品服務,設計在此過程中有條不紊的推進和管理。

          用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好幫手,可有效地劃定范圍、錨定用戶、區分關系、定義價值,通過不同顆粒度的抽象層次,不斷瓦解復雜系統,使設計和管理有序化。

          本文基于早已發展成熟的用例驅動設計理念,試圖從中找到一條適合體驗設計師介入的小徑,來應對復雜業務的產品設計(備注:用例、參與者、UML等詳細的內容不在闡述范圍內,本文僅探索一條可行的方式)。

          一、什么是用例

          定義:參與者與系統交互的一系列活動的集合。

          可以發現,一個用例以一組活動集合來表現,集合中包含兩個角色,參與者、系統。參與者是“活的”(不一定是人類),TA的訴求驅動了這一系列活動,此訴求即用例的核心,也是價值的體現。一個參與者可以對系統有多個訴求,詳見如下案例:

          用例驅動設計,讓你的設計更嚴謹!

          由用例驅動的體驗設計過程,著重關注對“行為”的設計。與系統的互動“行為”被協調的、有組織的設計后,為界面表現設計建立堅實基礎,避免因邏輯的變更使界面設計反復推倒重來。試圖通過在界面設計的過程中尋找線索和靈感,反向的去設計背后邏輯是本末倒置的,個中原由在于我們更易于把控具象的視覺感知,較難把控抽象的行為。

          二、系統用例和業務用例的關系

          在劃分用例前,有必要澄清系統用例和業務用例的關系。

          業務用例是從客戶當前的業務邏輯中抽象出的用例,與數字產品無關,即便沒有該產品服務,客戶的業務體系也可以流轉。新的產品服務實際上是對傳統業務體系的替換關系,而系統用例就是從該產品服務中抽象出來的,圖示業務側和產品側的對接關系:

          用例驅動設計,讓你的設計更嚴謹!

          用例驅動設計的案例

          總述:

          為清晰闡釋我們是如何利用“用例”這個概念作為切入口,最終一步步驅動、解構、細化體驗設計的,下面將完整展示一個注冊登陸試用產品的案例進行講解,本案例為虛擬案例,方便設計過程的串連。

          用例驅動設計,讓你的設計更嚴謹!

          step1:整理故事與確定用例

          故事中包含了用戶的行為及其所處情境,將更易于被理解、共情和傳遞,故事情節的內在聯系,上下游的完整性也直指價值的輻射范疇。在開始設計前,我們能從各個渠道收集到相關、相似的訴求,整合這些信息后以“故事”的方式表達出來,非常重要。

          本案例的注冊登陸試用故事從“企業”、“用戶”兩個維度進行描述,能確保在用戶訴求達成的情況下,也能達成商業訴求,和諧統一的以產品服務提供出去。

          1)企業故事

          公司統一了Platform賬號體系,在保證多設備產品端的一鍵暢通體驗的同時,收集用戶行為信息,以提供更精準的售后服務。同時與授權中心合作,通過網上商城定期開展活動,以下放試用天數,獲得試用授權。

          產品經理與銷售部門達成持續的合作,通過試用用戶的手機號進行電話回訪,提高購買轉化率。同時軟件的設計應能最大限度的提升客戶自發購買行為,需要在何時的時機,合適的位置提供購買入口。

          獲取用例的方式:

          • sys_運營人員→獲取用戶信息;
          • sys_運營人員→開展活動。

          2)用戶故事

          新家裝項目開展在即,大量的圖紙設計使張經理感到困難。

          在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網找到軟件信息,并利用現場wifi網絡下載安裝;迫不及待地啟動軟件,雖沒有購買,但軟件提供了試用入口,張經理提交Platform賬號后開始試用軟件。

          連續使用了兩天,后面每次自動登錄提高了試用的體驗過程,產品一鍵自動化生成圖紙初步解決了張經理的煩惱。

          經過和集團溝通后,張經理在界面上找到購買入口,并購買軟件正版。

          他將軟件推薦給朋友劉經理,他是Platform造價產品的老用戶,且已購買過Platform加密鎖,啟動軟件后,界面自動顯示為正式版, 不用登錄試用讓張經理艷羨不已。

          獲取用例的方式:sys_采購經理→試用軟件。

          step2:快速描摹流程圖

          用戶和企業的“故事”是一種情節式的、場景式的描述,它易于想象、理解和整合。

          但為了更清晰地輔助設計,我們需要根據描述,進一步梳理出流程關系,將其具象化。

          在繪制流程圖時,可不用關注角色的職責關系,旨在快速描摹出所涉及到幾個業務點的關系,將企業和客戶的訴求點包含進去,并在反復確認過程中思考、推敲,大體設計出其中的基本結構。

          過程中,可能需要補足新的故事描繪,或對既有的故事描述進行修正,以達成一個訴求與技術實現的平衡點。

          用例驅動設計,讓你的設計更嚴謹!

          step3:泳道角色化

          理清核心業務流程關系后,將進一步繪制其角色泳道圖,每個泳道下對應參與的角色。

          泳道圖仍然是分析過程的一步,它在這里的意義是可清晰地觀察到各個模塊間的協作互動,是細化過程,各個“對象”的職責不同,他們之間的交互關系存在進一步優化的可能,以保證整體行為的和諧,減低系統冗余。

          用例驅動設計,讓你的設計更嚴謹!

          step4:業務實體的獲取

          事實上,帶有角色的泳道圖僅是在很粗的層面描述了業務所參與的對象,是單純從流程圖層面歸納出來的“對象角色”。

          在面對詳細的功能分析時略顯不足,可能缺失實際參與的“對象角色”,如不分析出來,將導致用戶與系統的交互“行為”的缺失。

          我們需要進一步挖掘其中涉及的各個參與“角色”,完整地描繪出其交互行為過程,才能對該封閉系統做完整的設計。

          從哪里可以獲取到全部業務實體呢?當然還是故事。業務實體天然地包含在用戶或企業故事中,才得以支撐故事的完整發生,這與故事描述的程度有關,我們第一步就需要填充完整的故事。

          備注:什么是業務實體——用于達成業務目標的實體與過程中的記錄信息。諸如“點餐”用例中的“打印單”就是一個實體,打印單上的手機號是記錄信息。外賣員之所以能將外賣送到你的手上是通過打印單,查看上面的手機號和地址才能找到你。

          下面是結合“故事”,進一步獲取業務實體的案例,把所涉的可見的業務實體標識出來。

          1)企業故事

          公司統一了Platform賬號體系,在保證多設備產品端的一鍵暢通體驗的同時,收集用戶行為信息,以提供更精準的售后服務。同時與授權中心合作,通過網上商城定期開展活動,以下放試用天數,獲得試用授權。

          產品經理與銷售部門達成持續的合作,通過試用用戶的手機號進行電話回訪,提高購買轉化率。同時軟件的設計應能最大限度的提升客戶自發購買行為,需要在何時的時機,合適的位置提供購買入口。

          用例驅動設計,讓你的設計更嚴謹!

          2)用戶故事

          新家裝項目開展在即,大量的圖紙設計使張經理感到困難。在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網找到軟件信息,并利用現場wifi網絡下載安裝。

          迫不及待地啟動軟件,雖沒有購買,但軟件提供了試用入口,張經理提交Platform賬號后開始試用軟件。

          連續使用了兩天,后面每次自動登錄提高了試用的體驗過程,產品一鍵自動化生成圖紙初步解決了張經理的煩惱。經過和集團溝通后,張經理在界面上找到購買入口,并購買軟件正版。

          他將軟件推薦給朋友劉經理,他是Platform產品的老用戶,且已購買過Platform加密鎖,啟動軟件后,界面自動顯示為正式版, 不用登錄試用讓張經理艷羨不已。

          用例驅動設計,讓你的設計更嚴謹!

          step5:時序圖的繪制

          接下來,我們將進行最重要的一步:基于已明確的核心業務流程和已拆分出的業務實體,構造出一整套完整的系統行為。將使用到UML語言的重要工具——時序圖。

          時序圖能天然地表達多個對象間的復雜行為關系,在產品研發領域應用廣泛(時序圖的繪制有一整套完整的語法,本文不講解該部分內容)。

          時序圖的“對象對話”形式,原生地契合了“交互”這一概念,游戲大師Chris Crawford和設計專家Jon Kolko都對此有所定義:

          發生在兩個或多個活躍主體之間的循環過程,各方在此過程中交替地傾聽、思考和發言,形成某種形式的對話(conversation)

          ——《Chris Crawford on Interactive Storytelling, 2nd Edition》

          所謂交互設計,是指在人與產品、服務或系統之間創建一系列對話(dialogue)

          ——《houghts on Interaction Design, Second Edition》

          時序圖重點強調了“行為”的發生與互動,使整體目標達成。一系列有邊界的行為活動合集,就組成一個完成的、有意義的“用例”。

          讓我們再次回到開頭的“用例”上來,并將該用例系統化。

          用例:

          • sys_運營人員→獲取用戶信息;
          • sys_客戶人員→試用軟件;
          • sys_客戶人員→授權軟件。

          用例驅動設計,讓你的設計更嚴謹!

          除確保能服務于運營人員、客戶外的核心邏輯能達成外,為帶來更好的使用體驗。我們需要從諸多體驗維度考慮各個系統行為。

          “體驗因子”將作為系統行為的一部分目標,使整個交互活動更易于理解和順暢??芍苯咏梃b一些通用的體驗因子來評估,對于不同形態、業務的產品,體驗因子有所偏重,諸如工具類產品對“操作便捷度”、“工具易學性”、“工具幫助引導”有較高要求。

          回到注冊案例上來,考慮到“易學性”和“幫助引導”兩個體驗因子,可以對用戶“輸入手機賬號”的行為進行優化設計,提前或實時對手機賬號進行校驗,避免出錯后再提示,徒增挫敗感。同時提供“獲取驗證碼”的觸發入口,引導用戶執行該操作,很大程度上降低系統的理解負擔。

          在行為設計過程中,存在顆粒度問題,復雜系統涉及到大量互動會話行為,可以有粗細地逐步細化

          用例驅動設計,讓你的設計更嚴謹!

          step6:觸點行為的競品調研

          完成系統互動行為的設計后,可以開始正式的界面信息設計?!靶袨椤钡谋磉_是極度精煉的,行為本身就是價值取向,并暗合用戶的內心想法,由用例行為來驅動界面設計,才能真正做到按需設計。諸如“我感到肚子餓,第一想法是吃飯”、“早上該上班了,第一想法是走路去、打車去或坐地鐵”。

          在面對“輸入手機號碼”行為的界面設計時,除了個人創新外,也可調研市面上有哪些優秀的界面承載方式,作為一種“學習輸入”,或者激發出新的創新行為。這種由內而外的驅動設計,能使設計過程變得更有序,且避免遺漏。

          用例驅動設計,讓你的設計更嚴謹!

          step7:觸點支線、異常、極限情況的排查

          最后一步是對支線、異常、極限情況的排查,得益于時序圖系統行為的可視化表達,我們可以清晰、有序地排查每一個對話過程中可能出現的異常或錯誤,諸如“驗證碼無法到達”、“信息返回錯誤”等異常,都將被有效地排查出來。

          同時,還能從行為對話結構中,洞察到新的設計優化機會點,諸如“提交賬號信息”環節,必然需要網絡的通暢,故斷網環境下需要給出明確的反饋。

          如下示例:信息返回錯誤、異常流程高發地、頁面跳轉……

          用例驅動設計,讓你的設計更嚴謹!

          用例驅動設計,讓你的設計更嚴謹!

          時序圖會話的先后順序也將直接影響到界面的表達,圖示中“輸入手機賬號”與“填寫驗證碼”是有先后時間順序的,如果同時在界面中展示兩個輸入信息,無疑造成并列的誤解(可惜市面上幾乎大多數注冊環節都如此,大家早已習慣)。

          三、找到體驗的最大撬動點

          總結

          所謂用例驅動體驗設計,是借用例的概念來定義問題和范圍,并使用UML來分析問題,使整個設計過程變得有序、系統、嚴謹,在應對復雜系統、多鏈路多角色的業務時較為有效。

          用例在整個設計過程中是核心的存在,一旦模糊就會出現偏差,引入無關內容,同時也會失去對用戶價值的把控。

          用例的獲取很不容易,而精準統一的用例更難,涉及到顆粒度、抽象層次、參與者、受眾等等內容。

          撬動點

          以用例為中心的體驗設計,從業務邏輯出發,轉化為系統邏輯,在構建這個過程時就持續考慮體驗因素,是把控體驗的有效辦法,我們站在結構上思考體驗,將徹底地優化系統的體驗。

          單純從界面表現和框架呈現上做體驗優化,上限明顯,只有扎得更深,才能從結構上找到優化的“最大”杠桿點,帶來體驗提升,并有可能直接對研發程序設計帶來指導。

          而UML的建模語言是有效的輔助工具,兩者的配合使這一切成為可能。

          用例驅動設計,讓你的設計更嚴謹!


          文章來源:人人都是產品經理   作者:酷家樂用戶體驗設計

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

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

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


          如何通過品牌符號打造差異化產品?

          資深UI設計者

          互聯網產品同質化越來越嚴重的情況下,如何打造產品差異化與品牌調性,是每一個設計師都需要去思考的問題去面對的挑戰。


          前言

          最近在做項目的過程中,發現同類競品的同質化非常嚴重,在思考如何做出符合自己產品品牌調性設計方案的過程中,發現運用品牌符號能很好的與競品公司在設計上拉開差異化,提高品牌的辨識度。
          因此對品牌符號進行了的分析學習運用,一方面是對自己學習的總結,另一方面是分享給大家自己學習的心得體會。



          什么是品牌符號?

          品牌符號是區別產品或服務的基本手段,通過視覺、聲音、語言、顏色等各種各樣的符號,與消費者從精神層面上溝通,這些識別元素形成一個有機結構,對用戶施加影響。它是形成品牌概念的基礎,成功的品牌符號是公司的重要資產,對于企業而言是最節省溝通成本的做法。


          品牌符號的作用?

          在當前互聯網產品同質化越來越嚴重的情況下,如何打造產品差異化與自身品牌調性,使產品能夠脫穎而出,成為每一個設計師都需要去思考的問題,也是每個設計師需要去面對的挑戰。
          合理的運用品牌符號能夠幫助設計師打造產品的品牌感和進行差異化的設計,在品牌與用戶的互動中發揮作用。幫助用戶簡化對品牌的判斷;降低用戶對品牌的認知成本,增加用戶信任感。




          品牌符號有哪些類型?

          說起品牌符號,大家第一個反應可能就是認為是logo設計,其實logo只是品牌符號定義中的一小部分。
          品牌符號還包括但不限于:顏色/圖形符號/聲音/slogan/IP形象等,包括可見的、不可見的、無形的、抽象的概念符號。


          品牌符號的種類很多,本篇文章重點來講講品牌圖形符號是如何運用在產品中的。




          如何提煉品牌符號?

          品牌符號通常從 logo 本身提取,根據品牌關鍵詞,或公司愿景與業務訴求,賦予提取的品牌圖形含義,并在公司各個方向設計中進行延伸應用。


          比如:馬蜂窩從 logo 中提取了一個代表微笑的弧度,傳遞友好、溫暖的品牌形象、螞蟻財富logo中提取的自由角、網易考拉海購從logo中提取圓形代表美好世界的含義等等


          再比如,可口可樂的包裝,一個比較重要的品牌符號就是紅色背景之下的白色飄帶,即使包裝上沒有名字,很多人也能通過這兩種搭配識別出可口可樂這個品牌。
          線條符號在設計上各自都有自己獨特的特點,即具有很強的識別性,且易記、易傳播,讓消費者牢牢地烙印在心智中。



          如果品牌處于創立初期,可以根據產品定位與業務背景,與業務方討論定出核心關鍵詞,建立情緒板,提取出符合品牌調性的:圖形、顏色、字體、質感、構成,再提煉出符合產品調性的品牌LOGO,從中提取品牌符號,此處相關內容太多,不展開細說,簡要概括一下。


          品牌符號運用的設計手法:

          通過提取品牌圖形元素,再運用點線底紋、分形、抽象幾何等設計手法形成品牌紋理,在 UI 設計或者運營推廣設計方面都能有很好的運用。




          品牌符號的運用場景?

          品牌符號的運用場景可以包含平臺設計的各個方向,如:線上/線下輔助/插畫/品牌周邊/運營活動 等等,在越多的地方合理融入品牌符號,越多的在用戶面前展示品牌符號,就越能向用戶傳達品牌理念,使品牌深入人心。


          以網易考拉海購在品牌圖形符號的運用場景為例:


          品牌符號在圖標設計的運用


          品牌符號在產品底紋的運用

          點線底紋的設計手法,形成品牌紋理,運用在產品中,使整體頁面更加高級,品牌感更加強烈。




          品牌符號在線下廣告牌等延展


          品牌符號在VI中的應用


          品牌符號在動效的運用

          除了靜態的圖形設計,動效也是品牌基因延續的關鍵要素。一個好的動效能夠幫助企業建立起足夠有效的品牌形象,更高的品牌識別度,讓品牌在競爭中脫穎而出,動態圖形比靜態的圖像更容易為用戶所理解,也更容易被記住,同用戶更好地建立情感聯系。延續品牌基因。


          啟屏頁



          loading狀態


          圖片來源:www.plus-ex


          品牌符號可以運用在產品的方方面面上,以上的案例只是圖形符號的一部分使用案例,還有對外運營推廣的海報、banner等,也可以反復運用品牌符號,加深用戶對品牌的認知度。



          總結

          在當前互聯網產品同質化越來越嚴重的情況下,每一個設計師都需要去思考如何打造產品差異化與自身品牌調性,而不是盲目的跟隨所謂的趨勢,趨勢是一直在變化的,只有符合自己品牌定位的設計語言,使產品在設計上能夠脫穎而出。互聯網產品同質化越來越嚴重的情況下,如何打造產品差異化與品牌調性,是每一個設計師都需要去思考的問題去面對的挑戰。


          前言

          最近在做項目的過程中,發現同類競品的同質化非常嚴重,在思考如何做出符合自己產品品牌調性設計方案的過程中,發現運用品牌符號能很好的與競品公司在設計上拉開差異化,提高品牌的辨識度。
          因此對品牌符號進行了的分析學習運用,一方面是對自己學習的總結,另一方面是分享給大家自己學習的心得體會。



          什么是品牌符號?

          品牌符號是區別產品或服務的基本手段,通過視覺、聲音、語言、顏色等各種各樣的符號,與消費者從精神層面上溝通,這些識別元素形成一個有機結構,對用戶施加影響。它是形成品牌概念的基礎,成功的品牌符號是公司的重要資產,對于企業而言是最節省溝通成本的做法。


          品牌符號的作用?

          在當前互聯網產品同質化越來越嚴重的情況下,如何打造產品差異化與自身品牌調性,使產品能夠脫穎而出,成為每一個設計師都需要去思考的問題,也是每個設計師需要去面對的挑戰。
          合理的運用品牌符號能夠幫助設計師打造產品的品牌感和進行差異化的設計,在品牌與用戶的互動中發揮作用。幫助用戶簡化對品牌的判斷;降低用戶對品牌的認知成本,增加用戶信任感。




          品牌符號有哪些類型?

          說起品牌符號,大家第一個反應可能就是認為是logo設計,其實logo只是品牌符號定義中的一小部分。
          品牌符號還包括但不限于:顏色/圖形符號/聲音/slogan/IP形象等,包括可見的、不可見的、無形的、抽象的概念符號。


          品牌符號的種類很多,本篇文章重點來講講品牌圖形符號是如何運用在產品中的。




          如何提煉品牌符號?

          品牌符號通常從 logo 本身提取,根據品牌關鍵詞,或公司愿景與業務訴求,賦予提取的品牌圖形含義,并在公司各個方向設計中進行延伸應用。


          比如:馬蜂窩從 logo 中提取了一個代表微笑的弧度,傳遞友好、溫暖的品牌形象、螞蟻財富logo中提取的自由角、網易考拉海購從logo中提取圓形代表美好世界的含義等等


          再比如,可口可樂的包裝,一個比較重要的品牌符號就是紅色背景之下的白色飄帶,即使包裝上沒有名字,很多人也能通過這兩種搭配識別出可口可樂這個品牌。
          線條符號在設計上各自都有自己獨特的特點,即具有很強的識別性,且易記、易傳播,讓消費者牢牢地烙印在心智中。



          如果品牌處于創立初期,可以根據產品定位與業務背景,與業務方討論定出核心關鍵詞,建立情緒板,提取出符合品牌調性的:圖形、顏色、字體、質感、構成,再提煉出符合產品調性的品牌LOGO,從中提取品牌符號,此處相關內容太多,不展開細說,簡要概括一下。


          品牌符號運用的設計手法:

          通過提取品牌圖形元素,再運用點線底紋、分形、抽象幾何等設計手法形成品牌紋理,在 UI 設計或者運營推廣設計方面都能有很好的運用。




          品牌符號的運用場景?

          品牌符號的運用場景可以包含平臺設計的各個方向,如:線上/線下輔助/插畫/品牌周邊/運營活動 等等,在越多的地方合理融入品牌符號,越多的在用戶面前展示品牌符號,就越能向用戶傳達品牌理念,使品牌深入人心。


          以網易考拉海購在品牌圖形符號的運用場景為例:


          品牌符號在圖標設計的運用


          品牌符號在產品底紋的運用

          點線底紋的設計手法,形成品牌紋理,運用在產品中,使整體頁面更加高級,品牌感更加強烈。




          品牌符號在線下廣告牌等延展


          品牌符號在VI中的應用


          品牌符號在動效的運用

          除了靜態的圖形設計,動效也是品牌基因延續的關鍵要素。一個好的動效能夠幫助企業建立起足夠有效的品牌形象,更高的品牌識別度,讓品牌在競爭中脫穎而出,動態圖形比靜態的圖像更容易為用戶所理解,也更容易被記住,同用戶更好地建立情感聯系。延續品牌基因。


          啟屏頁



          loading狀態


          圖片來源:www.plus-ex


          品牌符號可以運用在產品的方方面面上,以上的案例只是圖形符號的一部分使用案例,還有對外運營推廣的海報、banner等,也可以反復運用品牌符號,加深用戶對品牌的認知度。



          總結

          在當前互聯網產品同質化越來越嚴重的情況下,每一個設計師都需要去思考如何打造產品差異化與自身品牌調性,而不是盲目的跟隨所謂的趨勢,趨勢是一直在變化的,只有符合自己品牌定位的設計語言,使產品在設計上能夠脫穎而出。


          文章來源:站酷   作者:船長的成長日記 


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

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

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


          如何進行設計走查?

          資深UI設計者

          設計走查是每個設計師的工作之一,我根據自己的日常經驗總結了一些設計走查的要點,內容如有不足的地方還請多包涵~

          引言


          設計稿不僅是設計師設計水平的體現,它同時也體現了公司的設計水平。即使我們設計師使用藍湖這種帶標注功能的軟件給到前端,也阻擋不了他們有自己的想法。如果原設計是100分的話,開發實現是50分,那么在客戶眼里我們公司產品設計能力就只有這50分。所以設計走查在整個產品設計過程中起著很重要的作用。

              

          在講述設計走查前,我想先給說一下盒模型。理解盒模型能更好的做出設計稿,也能更好的和開發進行對接。


          當我們明白前端是如何布局咱們設計稿后,我們設計師在作圖的過程中就會懂得如何從落地的角度思考問題。


          有開發思維的設計稿弄好、待開發實現后,就可以開始設計走查了。


          筆者在做設計走查的時候最常用的就是瀏覽器自帶的“檢查”工具。


          我們從檢查里看它的CSS樣式,如字體、字號、顏色、邊框、背景色、間距等等。如果這個div沒有樣式,也可以去它的父級看看。這里就簡單的拿字體、字號、顏色舉個例子,涉及的元素過多,就不一一展示啦~


          設計師開始走查時,意味著前端框架搭建結束、產品即將定型、用戶即將見到的版本,所以在交付之前設計師需要查驗以下內容:


          一、整體架構


          1.導航是否清晰易理解?

          一般設計走查檢查的是【全局導航】,所謂全局導航指的是它可以覆蓋整個產品的通路,一般情況都是產品的一級分類。用戶可以根據導航快速定位到目標節點。


          2.頁面中信息層級是否清晰合理?

          一般通過設計評審的設計稿在信息層級這里都沒有問題。設計師可以看看公司過往的項目,檢查一下有沒有需要改進的地方。


          3.樣式是否符合高保真?


          4.內容距離上下左右的間距是否統一 、是否符合規范?


          二、視覺走查


          1.文本:

          (1)文字是否使用公司規范字體?

          (2)標題字號、內容字號是否和規范保持一致?需要加粗的字體有無加粗?

          (3)文字顏色是否使用正確?(需要檢查的有普通文本、標題、超鏈接、提示/重點信息等等)

          (4)行間距、段落間距是否正確?


          2.按鈕

          (1)是否根據功能劃分為主按鈕、次按鈕、文字按鈕及特殊按鈕?

          (2)按鈕狀態是否分為以下四種狀態:默認狀態、懸浮狀態、點擊狀態、禁用狀態?

          (3)按鈕各個狀態下樣式是否正確?

                   需要檢查:長度、高度、字號、字體顏色、邊框顏色、圓角、背景顏色。 

                   按鈕寬度如果為自適應,需檢查文字到按鈕兩邊的間距(padding)是否為規范固定值。


          3.頁簽

          (1)是否根據功能劃分為選中態、未選中態和懸浮狀態?三種狀態區分是否明顯?

          (2)頁簽各個狀態下的樣式是否正確:

                   需要檢查:長度、高度、字號、字體顏色、邊框顏色、背景顏色。  

                   頁簽寬度如果為自適應,需檢查文字到按鈕兩邊的間距(padding)是否為規范固定值。


          4.選擇器(單選、多選、日期選擇、開關切換、下拉選擇、 滑塊選擇等)

          (1)單選是否為圓形、多選是否為方形?橫向縱向的間距是否符合規范?

          (2)日期選擇分為標準日期和組合日期,樣式是否統一?使用場景是否正確?

          (3)下拉選擇要區分普通下拉、樹選擇、級聯選擇,需要判斷使用場景是否正確?


          5.表單

          (1)表單狀態是否齊全?樣式是否正確?

                   默認狀態、懸停狀態、激活狀態、只讀狀態、禁用狀態、報錯狀態。

                   需要檢查各個狀態下的樣式:字體顏色、輸入框邊框顏色、長度、寬度、圓角。

          (2)表單是上下結構還是左右結構?如果是左右結構,是否為文本右對齊、輸入框左對齊?

                   文本最長為多少字,超出的文字統一用什么樣的形式體現?

                   輸入框內如果有圖標,圖標樣式是否統一?


          6.表格

          (1)表格樣式是否正確?

                   長度、寬度、文本、邊框、斑馬線、鼠標懸停、選中行。

          (2)對齊方式、間距等是否符合規范?

          (3)分頁器樣式是否符合規范?


          7.其他

          彈窗、提示、缺省狀態、圖表、圖標樣式等是否和高保真保持一致?


          三、交互走查


          1.流程

          (1)是否支持自動保存?退出前是否有保存提示?

          (2)異常流程是否有提示?是否可以恢復?


          2.頁面操作

          (1)是否在1秒內打開新頁面?

          (2)下鉆頁、新開頁場景是否使用正確?

          (3)執行具有破壞性的操作(如刪除、格式化等)是否有彈窗提示?


          3.顯示內容

          (1)語言是否簡潔、易懂、有禮貌?


          (2)文字內容是否無錯別字、無歧義、無語法錯誤?

          (3)數據的極值、排序規則是否考慮周全?

          (4)數據顯示的內容是否涉及權限和隱私?


          4.選擇輸入

          (1)是否選擇了正確的表單形式?

          (2)輸入前是否有提示?

          (3)輸入完成是否需要及時反饋?(填寫正確、填寫錯誤等)

          (4)是否設置默認項和自定義選項?

          (5)是否告知用戶的完成時間及進度展示?(測試、線上考試等)


          5.反饋

          (1)成功操作的反饋,是否需要引導下一步操作?(根據實際業務來定)

          (2)預警類的信息是否存在提示?

          (3)失敗操作的反饋,是否存在解釋與建議?


          6.用戶

          (1)新用戶是否需要新手提示?

          (2)多種用戶之間是否可以角色切換?

          (3)角色變更后用戶是否清楚?



          設計走查插件推薦


          1.Copiexl


          Copixel是字節跳動的一款走查驗收瀏覽器插件,通過在網頁上放置設計稿圖片檢查設計稿與開發結果是否完全重疊來判斷開發的還原精度,精確到像素實現高質量的項目還原效果。

          因為官網里有使用教程,所以這里就不過多講解,大家可以點擊官網查看。官方網址為https://copixel.bytedance.com/。



          2.CSS Peeper


          這是一個設計走查 / 樣式復制 / 資源下載的效率神器,它能夠輕松查看網頁端當中所有元素的 CSS 屬性。如果是作為設計走查工具的話,它的特色主要就是高效,不像“檢查”一樣要在眾多CSS中去找我們需要的,但是弊端就是查看不了全局。查看全局還是需要我們使用瀏覽器自帶的檢查功能哦。

          官網往下翻也有教程哦,官方網址為https://csspeeper.com/


          有些人認為走查是測試工程師的工作,我并不否認,但我也不是很贊同。只能說這種想法太過于理想化,并不是每個測試工程師既懂視覺、又懂開發、又懂業務流程的。畢竟是在我們自己的專業領域里,所以設計師做好走查還是很重要的~


          文章來源:站酷   作者:阿三Ason 

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

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

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


          如何系統化的思考設計改版?

          周周

          如果你已經開始工作了,那么對于設計改版你應該不陌生。改版目的是為了優化產品體驗,增加品牌粘性,提升數據轉化。

          體驗設計師的成本思維

          ui設計分享達人

          為什么設計師要有成本思維,以及成本思維在做我們做設計時對我們有什么幫助。



          不僅僅在工作中我們需要思考成本,在生活中我們也無時無刻都在計算成本。成本總是和收益掛鉤,所以貝克爾在《人類行為的經濟學分析》中提到:人的任何行為都是理性選擇的結果,無利可圖的事人們事不會去做。雖然這句話不能覆蓋所有的人,但是大多數人就是如此。



          在夜深人靜的夜晚你饑腸轆轆想吃夜宵,你可以選擇下樓到周邊小吃店就餐,也可以選擇叫外賣,前者付出的成本是你需要通過身體行動來交換最后的結果,后者則是花費一定的金錢來代替前者的行動。


          那么我們通常會如何選擇呢?如果這兩種成本有很大的差異,比如需要到很遙遠的地方那么除了身體行動成本外,時間成本也會計算其中,所以相比后者成本陡然增大,于是我們就會選擇成本低收益大的方式。但是假如你現在極度想要吃那家的夜宵,外賣點餐會特別影響口感,那么你可能會選擇前者,這里由于外賣口感和主觀意愿影響到了我們理性的選擇?!?



          1.為什么要關注成本


          成本決定了收益的效率、大小和方式,小到你伸手拿一支筆你會選擇最近的,大到我們人生的投資。成本與收益之間并非是直接關系,收益的大小的不取決于成本的大小,還有風險因素。例如我們在對UI界面進行優化,可以選擇的方式有很多:


          1.只調整視覺,替換樣式

          2.對頁面邏輯進行重構

          3.整體功能進行重新分類組合

          ......


          我們的目標是讓用戶獲得更好的體驗并且提升業務價值。3種方式需要的成本高低不同,我們都希望付出最小的成本達到最好的效果,于是我們就會考慮到風險因素,假如新流程用戶不會用怎么辦,假如新版本導致的數據下滑怎么辦,假如行業出了新政策了怎么辦等等。所以除了這些成本外也要考慮應對風險的成本。



          你看為什么有錢人都會坐頭等艙是因為頭等艙可以幫他們節約更多的時間,提供更好的環境與服務,讓他們產出更多的價值。還有假如你的車壞了,你最直接的方法就是花錢找人幫你修而不是自學自修,因為你將花費太高的成本。


          再舉一個例子,我們想提升能力,有的人選擇自學、白嫖,有的人選擇報培訓班,這也只是時間和金錢上的成本選擇,如果你的自學(白嫖)在短時間收益很大那就毫無疑問幫你省了一大筆錢,但是如果自學很久都毫無效果,那么時間就是你花費的成本,時間和金錢不同的是,時間不可逆??雌饋砘ㄥX比花時間更好?不是,花錢也有風險,比如課程質量和服務很差,錢沒了還學不到,甚至賠上了時間。但如果你選對了,那么收益就遠遠會大于自學。




          2.設計師可以關注哪些成本


          1.實現成本


          實現成本指的是想法與落地中間需要付出的行為、時間和其他損耗,例如我們希望提升用戶下單的轉化率,我們可以選擇:1.減少整個流程的步驟 2.將按鈕設計的更明顯 3.給用戶發放優惠券 4.給用戶營造搶購氛圍,在這幾個方案中最低成本是2,因為只需要調整樣式和簡單開發就可以實現,但收益并不是最高的,而其他的方案需要更多的角色花費更多的時間來參與,但是收益也不是顯而易見的。所以如果你的產品比較成熟,那么我們一定選擇成本更低的方案,反之我們會進行更高成本的嘗試。



          還有比如我們找工作,新公司福利待遇比現在公司好50%,平臺也更大,是否不需要思考直接去呢?當然不是,你需要考慮通勤成本、生活成本、自身成長成本等等因素。如果你50%薪資漲幅換來的是996、每天通勤時間3、4個小時,不僅僅是時間精力,還有我們的身體健康的成本,我會覺得遠遠不值,成本太高。




          2.機會成本


          我們先來看一下定義:機會成本是指面臨多方案抉擇時,被舍棄的選項中價值最高的就是本次決策的機會成本。舉個例子,比如當前版本我們有1個開發一個設計一個產品,我們面臨著兩個需求,但是資源和時間只夠我們做一個需求,這時候2選1,那個被拋棄的需求所擁有的價值就是我們所選擇的那個需求的機會成本,相當于我們放棄了那個需求所擁有的價值。


          再通俗一點講,我現在有100萬,面臨著兩個選擇:1.銀行理財,年收益4%,4000. 2.做生意投資,年收益8%,8000,那么就相當于我花費了這4w的潛在成本獲得了8萬的收益。



          3.邊際成本


          邊際成本的理解很簡單,我們可以理解為我們每付出一定的成本收貨的收益或者每收獲1個單位的收益所付出的成本。用一個通俗一點的例子來講,比如你一共學習10天,第一天學完你考了30分,第二天學完你考了50分……第8天學完你考了94分,第9天學完你考了98分第10天學完你考了100分,花費的單位天數一樣但是每次增加的分數卻越來越少,收益也就越來越少。



          在做產品設計的時候,我們往往會有一個板塊叫為你推薦,比如微信閱讀中的這個板塊,它一次提供了用戶6本書,雖然算法可以算出有許多書,但是這里每次只提供給用戶6本,是因為涉及到了邊際成本,少量多次提供能夠讓用戶更聚焦,更快的選擇好書本進行閱讀,每多提供幾本書,用戶選擇閱讀的時間成本就會越大。有同學會問:那我只給1本不就好了,用戶就能馬上讀了,何必要推薦6本?



          我們如何保證那一本剛好是用戶想讀的,沒有辦法做到如此精準,如果每次只推薦一本書,而用戶嘗試了幾次都不喜歡,他們就會放棄,所以這里就會選擇一個臨界值,比如我們可以選擇每次放不同數量的書,根據數據判斷在給用戶幾本書的時候用戶閱讀轉化和選擇時間成本更低。




          4.體驗成本

          體驗成本也是我們設計師需要時刻關注的,俞軍老師在產品方法論中提到,用戶價值=新體驗-舊體驗-替換成本,體驗成本可以包含很多信息,最主要的就是認知與交互的成本。


          4.1認知成本

          如何降低認知成本可以從以下這些點進行優化


          4.1.1.文案

          文案的設計要求是簡單易懂,避免產生歧義,之前給大家舉過的一個高德地圖導航在到達目的地之后給出一個“原路返回”按鈕的分析,大家可以再思考一下,是否會產生歧義。還有確定、確認大家是否知道怎么用呢?


          文案也需要有情感化,避免生硬、帶負面情緒的問題等等


          4.1.2.樣式

          視覺最為直觀,一個按鈕一個控件的樣式是否能滿足用戶的心智和預期,將會影響用戶的認知,例如以下的幾個按鈕,出現在不同場景用戶會出現一系列問題:為什么我點了沒用?為什么還不能點?我到底該點哪里?



          還有你的品牌是否識別度高,也決定了用戶對你的認知,最近小米花了百萬請大師做了新的logo,在視覺上更加圓潤,在圓logo的基礎上做了很多的微調,實際上也是避免了太大的logo變化導致品牌認知成本的提高,認知成本一旦太高,品牌市場的敏感度和曝光度還有各種替換、衍生、配套的隱性成本也會大大增加。所以這一舉動是明智的。



          4.1.3.信息

          比如我們希望新用戶去關注一些大咖、kol獲得更好的推薦,但是如果我們只是將推薦者的頭像和昵稱給新用戶,那么這個策略就是失敗的。因為我們沒有考慮新用戶的認知:1.我為什么要關注她 2.關注她我能獲得什么。所以僅僅依靠頭像和名字在這里對用戶的認知是沒有任何幫助的。




          4.2.行為成本

          我們通過利用肢體來和媒介進行交互,目的是完成某項任務。其實只需要你抬手,那么就是產生了成本,只不過某些成本是固定的無法減少的,比如你要去騎車那就需要去解鎖,如果沒有鎖車可能就會被偷走,這是出于安全考慮。


          行為成本在具體數字產品中我們可以發現很多,例如你只需要將手機拿起,屏幕就會亮,相比于找到解鎖鍵再按一下成本就低了很多。而亮屏后不直接解鎖是為了防止誤觸或者隱私,所以還需要通過指紋或者人臉進行識別。


          例如幾種不同的驗證方式,利用滑動拼圖來解鎖和輸入相關驗證碼解鎖,前者比后者的學習成本和操作成本都低。


          在移動端我總結了幾個減少交互成本的方法,不妨來看下:



          1.利用滑動代替點擊


          soul音頻處理

          日期選擇

          iPhone底部橫條切換窗口




          2.利用點擊代替輸入

          游戲昵稱隨機

          股票買入數量



          這里也有同學會問,既然都可以代替,那滑動能否代替輸入?必須也是可以的,例如iOS自帶的計時器中選擇時間的控制器,還有鬧鐘設置,這里要注意的是,滑動代替輸入是要基于本身該信息是由范圍內并且不需要精細化控制的,比如房價篩選,房價本身量級很大,用戶篩選也不會精確到個位數,在這里用點擊和輸入會比滑動的成本更低。


          反例就是音量、明暗控制,大家可以感受一下輸入在這里的雞肋。你需要精確控制選輸入,需要大致的范圍選點擊,非常模糊的感受選擇滑動。



          3.在必要時利用語音代替輸入

          例如我們在開車進行導航的時候,打字輸入非常不便,于是加入了語音輸入。還有在微信進行賬號切換時,我們可以選擇利用語音輸入數字來驗證身份。



          4.給予詳細的提示

          對于新用戶操作復雜功能和界面的時候,提供更多提示能夠很大程度上減少用戶的操作成本。



          5.盡量不使用二級手勢

          在iOS或者安卓的手勢控制中,我們會發現又一些常用的手勢比如:點擊、拖動、輕掃、雙擊、縮放,這里我們可以定義為一級手勢。還有一些不常用的比如:重按、長按、三指滑動、三指縮放等,這些手勢的認知成本和行為成本都很高,定義為二級手勢,不建議頻繁使用。




          總結

          設計師在日常工作中接到的需求繁多,無論是在做需求之前還是在思考設計方案的時候,成本思維可以幫助我們很好的規避一些問題和風險,我們追求控制成本使收益最大化。所以學會控制成本的設計師不僅僅題可以提高個人工作效率還可以幫助公司創造更多價值。

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

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

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

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


          中后臺加載-被忽略的體驗細節

          ui設計分享達人

          先看目錄,大家按需取用,當然更建議全文閱讀(全文7756字,建議閱讀20分鐘)

          undefined


          undefined

          大部分設計師應該都遇到過這種場景:在做設計前并沒有考慮到加載,但在進行還原度走查或者驗收的時候才發現,由于某些頁面數據請求較慢,導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。

          歸根結底是因為設計師在設計過程中,更多關注頁面本身,而很少去思考頁面在呈現過程中何時會出現白屏狀態,都是后知后覺去補充完善。加載作為必備的一環,卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃,導致系統的加載體驗缺失或者不統一。

          因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則,對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。


          undefined

          加載通俗來講就是用戶從觸發頁面操作,到頁面最終呈現的一個等待過程。這個過程始終存在不可避免,只是時間有快有慢。快的加載只需要幾百毫秒就結束,但慢的加載就可能會達到幾秒甚至十幾秒,讓人產生焦慮。

          而為什么會有如此大的差距,這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址,再到我們看到完整頁面的這個過程,網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認,整體過程可以闡述如下:

          從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段:用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。

          而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型:靜態資源和動態資源。


          靜態資源:前端的固定頁面,這里面包含HTML、CSS、JS、圖片等等,不需要查數據庫也不需要程序處理,直接就能夠顯示的頁面??梢院唵卫斫鉃槟?strong style="outline:0px;margin:0px;padding:0px;">頁面上的固定字段和結構。這種頁面一般加載速度比較快,比如我們看到的展示型官網一般都是前端寫好的靜態資源。


          動態資源:而對于頁面上的動態變化的,需要程序處理或者從數據庫中讀數據,能根據不同的條件在頁面顯示不同的數據,比如表格數據、統計數據等稱為動態資源,這種都需要調用后臺接口來進行返回,因此加載速度相比于靜態資源就會更慢。

          而它們的區分點用下圖可以表示:

          可以看到靜態資源基本是直接返回,而動態資源還需要連接數據庫調取資源,尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題,也基本上更多出現在動態資源的獲取上。


          undefined

          當我們清楚加載形成的原因,接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式:「默認處理」和「使用進度指示器」


          2.1程序默認處理方式:直接顯示

          當我們對加載過程不進行任何處理時,程序就會以默認的方式進行-即根據資源獲取速度一步步呈現。可以看到嘿店后臺的處理過程就是一種默認處理方式:

          但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態,比如上圖切換到概覽時出現了空屏狀態,尤其是當遇到了網絡緩慢的情況,會造成在加載時頁面停留在當前狀態下不動,往往會讓用戶陷入到「系統故障」的錯覺。


          2.2通用處理方式:進度指示器

          這個名詞說起來可能比較陌生,它指代的就是我們平時經??吹降募虞d動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障,而是正在讀取數據。

          通過添加進度指示器來對空屏狀態進行承載,能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡

          但是在體驗過程中很容易發現一個問題,就是在產品的整體加載過程中,某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時,很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋:

          想要更全面的把加載動畫覆蓋到所有頁面,我們就需要弄清頁面在哪些狀態下會出現空屏狀態,從而制定統一的加載動畫規則。這個問題可以先思考一下,后面解答。


          undefined

          在制定統一加載規則之前,我們需要明確一個概念,就是加載的模態與非模態。


          3.1模態加載

          模態加載的含義就是當前加載會中斷用戶其余操作,用戶在這個期間只能等待加載而不能進行其他操作(有的模態會提供取消按鈕)。如果你的頁面涉及到以下2種情況,可以考慮使用:

          1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新,或者工具類的導入導出相關操作,我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載,比如protopie的導入操作;

          2.當用戶進入到一個全新的頁面時,這個時候頁面什么都沒有,我們只能等待頁面加載完成才能進行后續的操作,因此在這種情況下也可以采用模態加載,比如我們剛進入Asanan產品頁面看到的首屏加載動畫:

          除了上述2種情況外,你也可以根據你的業務場景來進行模態加載的選擇,但建議是盡量少用模態加載,其會對用戶的打斷和干擾性比較強。


          3.2非模態加載

          非模態加載的話,這種加載通常只會出現在需要加載的部分,不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。

          非模態加載相比于模態加載會更輕量,因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載,比如飛書的左側欄切換操作:


          undefined

          接下來我們進入正題,在這里我從加載的角度將網頁整體加載過程分為呈現加載規則操作加載規則。

          我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后,我們就可以開始為我們的產品制定統一的加載規則,以保證后續頁面加載的一致性。


          4.1 頁面的加載過程拆解

          在拆解頁面的加載過程前,我們進一步闡述之前提到的渲染原則,從前文中提到最后會經過「解碼」和「渲染」2個步驟,這也是決定了我們看到的頁面的最終呈現順序:


          1.頁面渲染順序

          我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式,JavaScript則是負責頁面中的交互(當然JS也可以控制樣式,這里只描述主要功能)。

          頁面在「解碼」階段,拿到的HTML文檔會被解碼為DOM樹,同時將CSS文件解析成CSSOM,這兩者結合后一起渲染頁面,JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染,最后渲染交互。視覺的角度來講就是先看到元素樣式,然后才能進行對應操作。


          2.頁面呈現的視覺順序

          由于瀏覽器渲染順序一般會根據代碼的順序進行渲染,而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的,因此我們看到的頁面的視覺呈現順序也是遵循從上到下,從左到右。

          所以幾乎所有的產品都是先看到頂欄,然后左側邊欄,然后其他內容。因此我們可以通過這個原則來拆解對應的頁面,我們按照頁面常規結構可以將其分為三個加載部分:頂欄、左側導航欄、內容區域。而其加載順序如圖所示:

          當知道對應頁面的渲染順序后,我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序:

          undefined

          我們的加載動畫需要承載的就是上述這些白屏的地方,從而將加載細化為三種場景的拆分:全局加載+局部加載+內部加載。如圖所示:

          undefined

          通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。


          4.2 全局加載

          如上圖所示,全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景:

          1.通過網址進入到一個新的頁面時;

          2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時;

          3.通過頁面操作需要新開頁面時。

          該全局加載的動畫構成為:

          1:覆蓋整個頁面的加載,由純白色+加載動畫構成;

          2:加載類型為模態加載,因為用戶在這種頁面狀態下并不能進行其它操作。

          undefined

          但在這里我們需要注意全局加載的開始和結束時間:

          開始時間:當進入頁面時立即呈現加載動畫;

          結束時間:當頁面加載出頂欄的時候,此時停止加載。


          為何要這么處理結束時間,原因其實圖中已經給出了。這里再解釋一下原則:只要有頁面資源返回,我們的全局加載動畫就會結束,隨后啟用局部加載來承接后續的狀態,避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的,所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄,可以以左側欄來作為結束標準。


          4.3 局部加載

          局部加載是用在頁面整體框架加載的過程中,承接在全局加載后。局部加載的使用場景可以概括如下:

          1.頂欄加載結束后,用在剩余框架的加載效果(具體體現為左側邊欄和右側內容區域);

          2.對于涉及到局部頁面的切換操作都會進行局部加載(比如左側邊欄的切換);

          光看文字可能不是特別清晰,在這里可以舉一個動態的例子來幫助理解:


          上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的,可以通過程序控制讓這種加載動畫只在初次加載時出現。


          第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間:

          但第二次的時候由于有緩存(緩存會加載我們的靜態資源,能夠讓我們的頁面框架在第二次時更快顯示),這樣在讀取框架時基本不需要加載,我們就可以通過程序來直接去掉其中的局部加載動畫,直接顯示框架來進行呈現。

          undefined

          目前在飛書和釘釘等B端產品后臺均采用了這種處理方式??梢钥吹綀D中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的,而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態,又避免了局部加載動畫的頻繁出現。


          4.4 內部加載

          內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束,但某些數據由于接口比較慢,此時還沒有返回,這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況:

          在進行內部加載的時候,需要注意,內部加載的時候一般標題是存在的,因為標題基本都是固定的,所以能夠很快被拉取。比如Zoho的內部加載,加載時標題已經出現了:

          通過這三種類型的加載,能夠覆蓋從用戶輸入網址,到頁面渲染完成這個頁面呈現過程中的全部加載場景。


          undefined

          說完頁面的呈現規則,再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態,而且需要考慮到控件影響的其他頁面范圍。


          5.1需要考慮控件本身加載

          控件的加載并不是隨時都需要,我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下:

          undefined

          比如圖中的按鈕的加載狀態是必備的,在很多場景下都會用到。但是下拉列表和級聯列表,在一般的場景下都不太需要進行加載,當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。


          5.2當控件操作會影響到頁面其他元素

          這種控件比如日期篩選、表格篩選或者保存等操作,當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法:

          1.被影響元素不可被操作,且該區域有遮罩+加載動畫來覆蓋;

          2.被影響元素可進行操作,無任何動畫,但操作并不會影響之前提交的結果;


          這兩種方案一種是利用遮罩防止用戶無效操作,另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1,我認為被影響的元素是需要有遮罩+動畫的,來避免用戶在加載期間對其進行無效操作,比如示例中方案2后面修改的名稱是沒有被系統保存的。

          需要注意的是如果在產品中使用方案1,我們的遮罩區域只需要覆蓋被影響的元素就可以了(保存這種可以將按鈕一起覆蓋),比如通過篩選導致圖表數據發生變化,這時只需覆蓋圖表區域,而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時,用戶可以通過切換篩選項來打斷當前加載。

          上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時,則整體遵照頁面呈現的規則進行加載。


          undefined

          上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載,但是還是需要提及一下骨架屏和進度條這兩種加載形式。

          undefined

          先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的(骨架屏的加入使用會讓用戶感覺網頁出現的更快)。那么為什么在大部分的B端業務頁面中沒被用到呢,主要有2點原因:

          1.每種骨架屏都需要進行對應的定制開發,需要與加載后的頁面框架保持一致,這會增加了開發成本。

          2.中后臺的業務界面對來說固定結構的頁面會較少,這對于骨架屏的使用機會就相對較少。

          個人認為在前期可以以統一加載體驗為主,在后期業務相對成熟后,可以針對固定結構,通過骨架屏的使用優化加載體驗。


          再說進度條。我理解的進度條的使用條件:對于加載時間較長的規定場景可以考慮用進度條來承載,比如我們常見的游戲加載中進度條就用得比較多,因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。

          進度條在特定場景下能夠緩解用戶焦慮,讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度,這也會導致有時候我們看著加載到99%,那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因,很大程度是沒有那種加載特別長的場景。


          因此這兩種加載場景的使用會更加定制化,如果需要使用請根據具體的業務場景來進行選擇。


          如果把加載動畫等比作頁面加載的外在,那么緩存和加載策略則是頁面加載的內核,合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度,讓用戶更快速地看到頁面。


          7.1 關于頁面的資源緩存

          大家肯定聽過緩存這個概念,前后端都可以使用緩存。緩存就是數據交換的緩沖區(稱作Cache),是存貯數據(使用頻繁的數據)的臨時地方。在這里主要講一下瀏覽器緩存:

          undefined

          從這張圖可以看出,服務器在請求數據時,會進行緩存的判斷,如果有緩存則首先讀取緩存,如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度,縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存,這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。


          但程序其實也可以對動態資源(也就是需要從數據庫等拿到的資源)進行緩存的,并且可以設置緩存的過期時間(比如設置過期時間為1小時,那么1小時過后就會重新拉取新資源)。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略,從而提升整體的頁面加載體驗。


          7.2 加載策略的正確使用

          現階段我們常用的主要有下列6種加載策略:

          加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間,接下來我們詳細看一下每種加載策略的具體使用策略:


          7.2.1懶加載

          懶加載是當內容落入視窗被用戶看到時,才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計,能夠讓用戶更快看到當前屏幕內的內容,減少等待時間。

          比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載,這樣能夠保證用戶在進入網頁第一時間看到首屏內容,并且用戶幾乎感知不到這種加載延遲。


          7.2.2預加載

          預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中,等用戶需要使用時,通過緩存直接調用呈現。比如用戶在看A頁面的時候,就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候,立刻就可以呈現。

          比如某些頁面在實際中加載比較慢,這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態(圖中我將頁面網絡切換為斷開狀態),可以看到依舊可以點擊全文進行查看和視頻的部分預覽。


          7.2.3分步加載

          當頁面中有文字和圖片時,優先加載占用網絡資源小的,比如文字資源,然后再進行占用資源較大的加載,比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。


          7.2.4分頁加載

          分頁加載是我們目前很常見的方式,比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載,分頁適用于數據量比較大的內容,比如表格數據或者大數據搜索場景可以使用。

          分頁加載可以理解為當前獲取到100條數據,但是將100條數據分別拆成5頁每頁20條數據提供給用戶,這樣也可以讓用戶減少等待時間:

          在目前還有一種滾動分頁的加載,就是不提供視覺上的分頁,而是當用戶進行滾動時,自動加載一定數量的內容,這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略,有的也把這種滾動分頁的方式稱為自動加載。


          7.2.5延遲加載

          這里講的延遲加載更多的是一種防護加載機制,一般延遲設置的時間為300ms。這里的延遲加載有2種使用,第一種多用于搜索,通過延遲加載能夠讓用戶更好進行連續輸入,避免搜索結果被高頻率刷新,同時緩解服務器壓力。如下圖,可以看到我在輸入1后會有個延遲才出現加載列表,并且我在連續輸入12306的過程中是沒有對結果進行更新的,當我輸入完后才更新。

          第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時,如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上,防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知:

          延遲加載更多用于上述2種場景,對于其他情況的加載,直接加上就可以了,并不需要刻意設置延遲。


          7.2.6后臺加載

          這里想要表達的含義是當用戶在操作后,客戶端立即反饋操作成功,然后把請求放到后臺與服務器交互,這一過程用戶不需要了解,不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作,即使你在斷網的情況下都能夠立刻發布,但實際上這個時候并沒有發送成功,還需要上傳到服務器后才你的朋友們才能看見。


          這樣的好處是用戶使用起來非常流暢,但是壞處就是,當操作不成功時,用戶并不能及時進行感知,仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作,畢竟很多發布的功能會同時影響很多業務線。


          這里就拿微信的朋友圈發布來進行舉例,下方手機狀態都為斷網狀態,可以看到微信立即發布,而貼吧在這種狀態下提示網絡錯誤。

          通過這些加載策略的選擇性使用,能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識,這樣我們不僅知道加載慢的原因,還可以利用加載策略去提升頁面性能。



          在整體的加載過程中,別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來,這時我們需要考慮對長時間的加載過程進行處理。

          通常做法是我們要對加載狀態有一個最長時間的限制,一般為加載不超過10s,超過最長時間后就進行異常狀態顯示(提示語+刷新按鈕)。這樣用戶可以選擇重新加載或者離開此頁面,而不是一直等待。

          在這里還想到一點,就是對于編輯頁面,我們應當加入網絡連接是否異常的判斷,比如當進入到編輯頁面后,如果遇到網絡斷開,需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】,這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。


          加載在設計中是非常容易被忽略的模塊,因為在大部分情況下網絡速度都較快,人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點:

          1.我們需要明白加載為什么會出現,這個過程是怎么樣的;

          2.加載的通用處理手段是怎么樣的,非通用處理方式有哪些;

          3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。


          這樣當我們在頁面上遇到加載速度慢的問題時,在為其加上動畫承載過渡的同時,還應該思考其加載緩慢背后的原因,是因為數據量太大還是加載策略的相關問題,是否可以將其進行懶加載或者分步加載,這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題,才是后續產品設計過程中的長久思路。

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

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

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

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


          淺談設計中的溫度——如何用互聯網思維幫扶鄉村孤寡老人和留守兒童

          ui設計分享達人

          前言

           _


          提及“設計的溫度”,不得不提我們老生常談的“情感化設計”,提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次:本能層、行為層、反思層,層層遞進。



          1/ 本能層的設計,是視覺的直接反饋,是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣;

          2/ 行為層的設計,注重的是效用,產品功能是否好用,易用,用戶使用產品過程中能否高效解決問題;

          3/ 反思層的設計,是情感化設計的最高層次,指用戶使用產品后,是否建立情感連接和記憶反饋。

          因而,它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。


          如果一款產品在滿足基本功能,對于用戶有用,同時好看并且易用,使用完之后還能產生愉悅以及滿足感的話,那么這將是一款好的情感化設計產品,那必然是一個有“溫度”的設計。


          如果一個項目本身充滿社會使命和責任感,那么“有溫度的設計”將可以助推項目的落地鏈條,讓使用平臺的用戶有“溫度”,更讓項目背后的人員感受到“溫度”。


          因為,接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗,用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童,用有溫度的設計去踐行有溫度的項目。




          項目背景

           _


          隨著我國社會經濟的快速發展,農村青壯年勞動力轉入城市,人口老齡化趨勢加劇和家庭結構的演變,“空心村”越來越多,因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計,在農村獨居和空巢老人超過3000萬人,留守兒童也達到了近2000萬人



          孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題;而留守兒童因為缺少父母監管和陪伴,極易產生很多身體及心理問題,這兩大群體是我國人群結構的重大組成部分,一個是未來的花朵和希望,一個是曾經發過光熱的遲暮老人,他們需要關愛和守護,需要有一座“有溫度”的橋梁,為留守兒童撐起藍天、健康成長;為孤寡老人送達溫暖、安享晚年。



          基于社會現狀,踐行社會責任,騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會,預想搭建一個線上與線下結合的平臺,成立“為村暖心小站”,立足于脫貧地區的農村社區,主要服務農村的一老一小以及其他需要幫助的困難群體,解決日間照料、健康護理及心理關懷等諸多問題。




          設計思路

           _


          1,定義產品形態


          “暖心小站”的整個幫扶路徑是以線上+線下相結合的模式,依據產品需求,在線上可以招募志愿者、發布救助需求、觸達愛心人群;在線下建設實體服務站,開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。



          那在線上的呈現形態上,主要考慮APP和小程序兩種方式,經過對比分析,APP穩定性高、體驗好,但是在鄉村的受眾群體內,互聯網基礎還是很薄弱的,要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣,占有率很高,那么依托于微信的生態、建立小程序,在推廣層面會更加便捷和高效。同時,暖心小站本身結構簡單,是一個非常輕量化的應用,這種特性也更適合以小程序為載體。



          2,確定產品結構


          在線上的產品框架上,設立兩大專區:關愛老人專區和呵護小孩專區,各自創建知識宣導、在線課堂、愛心募捐等版塊內容,同時在線上召集志愿者,在線下成立社區服務站,開展幫扶活動,然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。


          確定框架之后,梳理角色和場景。本項目主要包含線下服務站的站長,工作人員,志愿者以及社會的愛心人士。



          站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采,社會的愛心人士通過線上平臺查看對應信息并參與對應活動,最終幫助農村的一老一小解決各種幫扶問題。


          經過梳理分析,平臺使用人群的年齡跨度較大,30歲到60歲這個群體占到了80%左右,所以在產品的呈現形式上將兼顧青年到老年的年齡跨度,讓設計更友好,讓產品有溫度。



          3,制定設計策略


          定目標


          基于前面分析,在農村現實環境中的孤寡老人和留守兒童,他們生活是灰暗的,情感是封閉的,他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖,讓孤寡老人可以健康生活,讓留守兒童可以健康成長。 




          所以在設計目標的確定上:讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。



          定色


          品牌色的推導,是站在線下的實際場景感受來提煉,鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的,他們需要金燦燦的陽光給生活帶來希望,而我們日常所的見的公益組織通常都是以紅色系為主,似乎已經形成了作為公益組織的標識色,因為這種大紅色傳遞愛心、帶來溫暖。


          這些顏色都很有代表性,黃色代表陽光,紅色代表公益,而暖心小站,將這兩種顏色進行疊加融合,形成陽光橙,再以陽光黃納入輔助色,形成溫暖、友愛、活力、陽光的色彩體系。





          定原則


          在設計原則上,考慮到我們的用戶群體年齡跨度比較大,一些年長用戶互聯網基礎薄弱,為了讓產品更有親和力,讓年長用戶都能輕松上手,所以在策略上制定簡單、易用、溫暖的設計原則,保持框架簡單清晰、交互簡單易用,讓產品有溫度,讓用戶覺得有用、好用、還想用。



          在“簡單”方面,保持產品的頁面框架要簡單,結構要清晰,讓用戶清楚知道自己在哪里,所以在產品形態上只做了內容頁的垂直展示,沒有過多瑣碎的信息入口,讓頁面信息更集中,瀏覽體驗更聚焦,讓年長用戶也可以簡單使用。



          在“易用”方面,簡單的框架和結構是易用的基礎,在視覺元素的排列上,通過加大的圖片、加大的間距、加大的圓角,通透的頁面布局可以讓內容陳列更集中,獲取信息更高效。頁面的間距以4px為基數,分為5個跨度,在統一性的基礎上讓界面更有節奏感,層級更清晰,從而提高產品的易用性。



          在“溫暖”方面,主要體現在在調性、元素、和內容上:

          調性:以“溫暖橙”+“陽光黃”為品牌色系貫穿始終,形成溫暖、陽光的整體基調;

          元素:在常規尺度上進行適當加大,加大的字體,加大的卡片占符,加大的點擊區域,讓產品更照顧年長用戶的操作習慣,讓產品更有溫度;

          內容:在內容及主圖的運營展示上,突出“溫暖”的調性,增強用戶的共鳴,拉近用戶與產品之間的距離。





          整體視覺呈現

           _


          整體以大面積的“溫暖橙”為基調進行鋪設,營造溫暖陽光的質感,頂部展示產品名稱和合作logo,增加產品的權威性和信賴度。


          自上而下,控制大的間距和留白,分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。



          一老一小的入口及詳情:通過大頭圖的形式加強專題感知,引導用戶點擊。詳情內展示相關的關愛資訊和助力入口,讓用戶可以選擇性的進行點對點幫扶。



          小站詳情:分為小站介紹、人員風采、小站活動、和運營概況四個部分,清晰展示線下暖心小站的各項事務,讓線上用戶對線下小站有更全面的了解。



          個人中心:功能簡單,布局簡潔,根據不同身份類型展示不同入口。作為站長的話,擁有志愿者審核、活動管理的權限,整體表現形式以統一的卡片式陳列,讓內容更聚焦。




          秉持“簡單、易用、溫暖”的設計原則,盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖,讓用戶想用,讓產品好用。


          經過多次推導與線下團隊配合,小站1.0在今年5月初上線,第一批試點小站正在使用中,得到了較多正向良好的反饋,為鄉村的一老一小帶去了許多暖心的幫扶行動。



          上線反饋

           _



          產品上線之后,通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動,比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動,在重慶周家寨服務站新建了日間照料室,提升老人的居住生活質量。


          今年5月20號,在中國互聯網公益峰會上,為村暖心小站進行線上交流展示,獲得了很多與會代表的關注和認可。




          截止2021年7月,平臺上線了兩個試點小站,共舉辦了數10次線上+線下結合的活動,活動參與了520人,受到36000人以上的關注。暖心小站的建立和運營,對鄉村的“一老一小”提供了更加有針對性和個性化的服務,同時加強對當地社會組織的培育和孵化,提升了服務對象的生活質量,促進和諧社區建設,助力鄉村振興。


          通過這些試點小站的成果和反饋,讓設計目標也得到一定程度的印證,讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。




          設計反思

           -


          隨著互聯網的發展,人們對于產品不再是簡單的形式服從功能,而是逐步轉向形式服從情感。讓設計回歸情感,讓有溫度的設計去創造有溫度的產品,可以增進人與產品之間的情感連接,讓產品更有生命力。再者,用有“溫度”的設計思維,去捕捉和解決社會問題,通過具有社會責任感的設計,推動社會進步,形成堅實有用的“設計力”。


          那么,如何提升自己的設計力呢?可以概述三個保持一個向善。



          保持熱忱心

          設計需要堅持,而堅持源于熱愛,保持熱忱之心會發現許多美好的事物,同一個需求會自發性地探索很多不同的解決方案,因此會洞察需求背后最本質的東西,切入要點尋找最優解。


          還有一句話:“設計路上,唯有熱愛,方能抵御歲月漫長”。


          保持敏感度

          這里的“敏感”指的是設計師要有好奇心,善于發現新事物,善于追蹤最新行業動態,是一種職業敏感,是一種自覺行為,表現為熱情、興奮、敏銳,對新事物充滿熱情,對于新發現充滿興奮,能夠特別敏銳的捕捉社會痛點解決設計難題。


          保持共情力

          生活中常說,有共情的人往往都特別感性、多愁善感,淚點低笑點也低,因為特別有代入感,而且對事物特別專注。


          設計上所說的共情力則需要保持感性,同時也需要理性加持,不偏不倚。讓設計師自己能切換到項目內的各種角色,不把自己當成局外人,將自己融于產品本身,隨時切換為不同用戶的視角,更能深入地發現、分析和解決問題,讓設計站得住腳、更接地氣,讓設計有依有據。


          讓設計向善

          設計的最終目的是傳遞需求、解決問題,這就意味著設計的初衷不同,那么最終的導向也會截然不同。

          設計向善,保持“善”的初心,主張設計回歸社會、回歸到人心最本質的出發點,做有溫度的設計、有仁心的設計、可持續的設計。


          關注社會問題,保持一顆敏感而善良的心,用“設計向善”解決社會痛點,堅實鞏固自己的設計力。


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

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

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

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


          信息獲取與適老化系統體驗升級

          資深UI設計者


          前言:

          鑒于老年人一次次在“數字圍城”中遭遇的困境,2020年11月,國務院辦公廳印發《關于切實解決老年人運用智能技術困難實施方案》的通知,2021年1月起,工信部將在全國范圍內開展為期一年的“互聯網應用適老化及無障礙改造專項行動”,要求各地區、各部門建立工作臺賬,明確時間表和路線圖,推進互聯網網站和移動互聯網應用(APP)適老化及無障礙改造。



          此政策一出,引發了資管行業針對金融產品適老化改造的積極探索與思考,同時各金融機構研究團隊也相應推出互聯網金融產品適老化改造的改進方向和原則,信息無障礙理念是近年國家推進可持續發展的一項重要工作。在此也引發了我針對互聯網金融產品適老化改造的深入探索。

          本篇調研報告由以下五大部分構成:


          - 行業分析—探討適老化改造趨勢背景

          - 用戶分析—研究用戶對象習慣特征及需求痛點

          - 改造方向—總結改造方向和部分具體措施

          - 信息獲取—以證券交易為例的信息列表優化

          - 完成效果—分析目前各家產品適老化改造成果




          一、適老化改造趨勢背景


          截至2019年年末,我國65周歲及以上人口1.76億人,占總人口12.6%;至2024年,65歲及以上人口將突破2億;若以60歲作為老年標準,至2050年,老年人口將達5億。中高收入老年家庭數持續增加,金融服務需求將顯著增長,2017年家庭月收入逾4000元的老人已超過1.06億人,其中1600萬老人的家庭月收入逾10000元。和許多無房無車年輕人相比,絕大多數老年人擁有一套或多套住房。



          新生事物的發展也潛移默化的影響著老年人的消費思維方式。在如今互聯網不斷發展的今天,老年人的觸網熱情也不斷提高。根據CNNIC發布的《中國互聯網發展狀況統計報告》,截至2019年6月,我國50-59歲網民群體占比達到6.7%,較2016年12月的5.4%提升了1.3個百分點;60歲及以上網民群體占比6.9%,較2016年12月的4.0%上升了2.9個百分點



          二、老年人使用互聯網產品存在的問題


          從根本上分析,為什么老年人“不會用”,最根本的原因就是身體機能的衰弱。這是我們無法抗拒和改變的自然生理現象。



          「適老化及無障礙改造」其實包括2個方面。

          一方面是「適老化」,對老年人的關懷。另一方面是「無障礙改造」,針對殘障人士,比如視力障礙、聽力障礙、肢體障礙人士的關懷。

          這兩方面的改造,也統稱為「信息無障礙改造」,需要過信息化手段彌補身體機能、所處環境等存在的差異,使任何人(無論是健全人還是殘疾人,無論是年輕人還是老年人)都能平等、方便、安全地獲取、交互、使用信息。

          整體來看,當前我國公共服務類網站及移動互聯網應用(APP)無障礙化普及率較低,適老化水平有待提升。比如:

          - 多數存在界面交互復雜、操作不友好等問題,使得老年人不敢用、不會用、不能用

          - 普遍存在圖片缺乏文本描述、驗證碼操作困難、相關功能與設備不兼容等問題,使得殘疾人等群體在使用互聯網過程中遇到多種障礙。

          - 當前互聯網應用中強制廣告較多,容易誤導老年人,特別是有些付款類操作的誘導式按鍵

          目前國內「老年人」相比「殘障人」的用戶群體大很大,并且「適老化」和「無障礙改造」屬于兩個完全不同的改造方向,加上「適老化」改造難度低,普適性更強。所以目前國內的互聯網產品,主要從「適老化」入手進行改造,「無障礙改造」開展的工作還非常有限。



          三、3個方面著手,針對性提出建議


          產品如何進行「適老化」改造?

          首先我們可以看看,老年用戶的幾個特點:

          1、視覺、聽覺能力變差

          2、記憶力、注意力下降

          3、身體機能下降,對互聯網認知不足



          同時,工信部工信部「行動方案」中,對「適老化和無障礙改造」提出了幾個基本要求:

          1、大字體、大圖標、高對比度文字。 2、操作簡單、界面簡潔,實現一鍵操作、文本輸入提示等多種無障礙功能

          3、提升方言識別能力,方便不會普通話的老人使用智能設備   4、 去廣告,禁止誘導

          從老年人的特點、工信部要求、以及當前互聯網產品適老化實踐中,我總結了3大產品「適老化」設計要點。



          3.1視覺、聽覺退化導致信息獲取障礙

          實驗心理學家赤瑞特拉一項關于人類獲取信息的來源顯示,人類獲取信息的83%來自視覺,11%來自聽覺,3.5%來自嗅覺,1.5%來自觸覺,1%來自味覺。


          1. 字體選擇

          那么在獲取信息的來源時文字,是產品界面中最重要的一個元素,當產品中的文本字號很小、文字辨認不清的時候,用戶想閱讀的意愿就會降低。產品的信息傳達的目標就無法完成。所以在標準的文本傳遞信息的時候推薦使用非襯線體


          襯線指的是字母結構筆畫之外的裝飾性筆畫。有襯線的字體叫襯線字體(serif)中文比較常見的如宋體、明體、白體;沒有襯線的字體,則叫做無襯線體(sans-serif)。簡單的理解就是非襯線體(例如黑體等)就是沒有裝飾性筆畫的末尾,無襯線體則更統一、時尚、簡約,中文常見的如黑體、微軟雅黑。這種無襯線體也被廣泛應用網頁端或手機端的產品,所以非襯線字體有醒目而且輪廓清晰的特點,是提升屏幕可讀性的首選。


          *需要注意的是,在常規頁面的設計過程中避免使用多種字體或者精心設計的造型字體,因為這可能會造成用戶混淆。營銷頁面不在此列



          2、字號大小

          根據Ant Design設計語言中講到關于計算最小字體的方法,通過肉眼到物體之間的距離、物體的高度以及人的最小可接受視角,構成的三角函數關系進行計算。

          普通用戶的最小視角為0.3度時閱讀效率最好,一般眼睛距離電腦屏幕為50cm。有學者研究表明,老年人由于視覺能力下降,最小可接受視角為0.75度,視距為43cm,換算之后相當于字高為5.62mm,經過換算為16px。

          在JIS規格對于印刷品等反射原稿中《不同年紀最小可閱讀文字大小》的建議中,60歲以上的老年人,最小可接受的字體大小的絕對高度是4.9mm,經過換算為14px。


          考慮針對老年人的應用使用的文字越大越好,建議最小使用16px字號。為什么文本字號要設計為16像素呢?有研究表明在我們屏幕上 16 像素的文本大小與印刷在書籍或雜志上的文本大小相同,這很符合人的閱讀習慣。但是人閱讀還有一個因素是不能忽視的,就是人和屏幕之間的距離。


          換算網站:https://www.gaitubao.com/tools/pixel2cm.html



          3、顏色選擇

          建議使用相對融合的中性色;使用對比強烈的互補色來突出重要元素信息內容和功能位置。同時要符合WCAG 2.0(Web Content Accessibility Guideline,Web 內容無障礙指南)中對顏色對比度的指導意見:


          - 對比度(AA級):文本的視覺呈現以及文本圖像至少7:1的對比度;大號文本(字重為Bold時大于18px,字重為Regular時大于24px)以及大文本圖像至少有4.5:1的對比度。


          - 對比度(AAA級):文本的視覺呈現以及文本圖像至少要有4.5:1的對比度;大號文本(字重為Bold時大于18px,字重為Regular時大于24px)以及大文本圖像至少有3:1的對比度。


          可以通過WebAIM`s Color Contrast Checker、Contrast-ratio、EightShap es Contrast Grid、等網站點擊進行測試對比查看是否滿足 WCAG 2.0 AA 的「色彩無障礙設計」標準。


          避免使用藍色和紫色

          由于老年人的晶狀體變黃、變渾濁,會選擇性的吸收藍光,從而導致老年人對藍色的鑒別能力比紅、綠色的鑒別能力下降的更明顯,因此頁面中的重要元素要避免使用藍色或不同深淺的紫色。




          4、聽力和身體機能的退化

          聽覺也是我們獲取信息的重要來源,可以考慮使用語音通道獲取信息。但隨著年齡的增長,人的大腦聽覺中樞開始退化,腦皮質逐漸萎縮,耳蝸的基底膜、聽覺細胞及聽神經也開始老化,導致老年人出現聽力下降甚至“老年性耳聾”,主要表現:

          1、聽到聲音,但聽不清內容; 

          2、正常語速的音/視頻無法全部接收;

          3、低頻段聲音聽不到(如鼓聲),高頻段聲音受不了(如尖細的刮擦聲),立體聲成為噪音;


          因此在進行語音通道設計時,需要考慮:

          1、加大音量,老年人聽覺平均感知音量在67.5~75.3分貝之間,因此在視頻開始播放時,我們對低于設定值的音量適當增加到約44%。同時處理掉環境聲音,使內容聲音更清晰。


          2、為了保證老年人有效的接收到聲音信息并進行理解,音/視頻的播放速度也需要適當下降。因此,我們減少了高檔位語速,并提供了高、中、低3檔語速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。同時加入字幕等實時信息,實時播放雙層保障老年人的信息獲取


          3、使用語音交互形式,幫助老年人更方便的進行信息輸入及獲取,如百度大字版的語音搜索功能及“今日要聞”點擊播放功能、酷狗音樂大字版聽歌識曲功能、支付寶關懷版客服語音功能等。



          3.2記憶力、注意力下降


          1、簡化交互操作

          人在手機上的交互手勢會有很多種,根據不同的業務場景,我們使用的交互手勢也不相同。

          大致分為四類:單擊(tap);長按(long press);雙擊(Double Tap);長按&拖拽(long press & Drag)。

          這么多交互手勢,甚至還有組合手勢。老年人在使用過程中會顯的很煩索。所以操作手勢盡量簡單、符合人的常規, 以“點擊、滑動” 為主?;蛘呤且环N切換支持2種手勢切換頁面。

          老年人除了生理上的手指偏大,身體機能退化引起控制能力下降、行動遲緩,動脈硬化、震顫麻痹、帕金森等疾病導致手部抖動,使得老年人無法進行精確、復雜的操作手勢;因此針對老年人應用的操作手勢應該注意:


          - 簡化操作手勢:單指操作的手勢比雙指和多指手勢更易用(比如電腦觸控板的多指手勢);

          - 盡量使用單擊:單擊屏幕比雙擊、多擊更易用。老年人手指不靈活無法在指定時間內完成連續點擊屏幕兩次。

          - 大的點擊熱區:在移動端,按鈕尺寸根據手指觸摸屏幕的最小點觸區域,平均長度在10-14mm之間,指尖的長度為8-10mm,所以10mm x 10mm就是一個最小觸摸目標尺寸。按鈕高度35px-50px之間,字號13pt-17pt,圓角4-8·web端:按鈕高度24px-48px,字號12-18,圓角6-10。



          2、精減功能、減少信息干擾

          內容可以多,內容要做好清晰分類,清晰易懂。信息導航不要多個維度嵌套,不要讓長輩暈頭轉向。信息層級不宜過深,2-3層為宜,不要讓長輩迷路。

          要考慮哪些功能該提供,哪些不該提供?是否要針對老人提供一些專屬的功能或服務?

          如果可以,結合自己的業務,提供老年群體的針對性內容和服務。比如:如果你是做資訊的,內容推薦符合老年人口味,視頻、音頻形式,就很重要。如果你是做醫療健康的,老年人慢病管理,用藥提醒,就比較貼心。


          如高德地圖長輩版:減少了很多不必要的功能,附近、消息、我的、打車等等。只保留首頁而且把長輩會關心的公共廁所、醫院、銀行、公園等目的地列出。方便快速出行。做好了一個地圖工具箱的職責。不去做干擾的信息。美團長輩版也是只保留核心的點餐功能。把更多的頁面空間都留給了餐廳的信息展示。方便長輩點餐。



          3、流程明確化、減少每屏信息密度

          能懂會用,可以有效減少老年人在使用線上產品時焦慮感和挫敗感。讓老年人知道看到的是什么,正在做什么,接下來要這么做,可以達成什么目標,這是在使用線上產品進行一切操作的基礎條件。

          如做一件事情共需要幾步,當前是百分之多少,還需要多少才能完成,在過程中少一些選擇,多一些指引,將容易混淆的內容進行提示,告訴你應該如何操作,減少判斷和操作失誤。在長任務中,給出明確的反饋和最終目標的提醒



          3.3認知能力、身體機能退化


          1、理解能力

          更易辨識的圖標、提供圖標名稱。由于在互聯網時代、年輕人接受的信息非常多,日新月異比如我們現在流行的矢量化圖標、線條極簡風格的圖標,對于老年人來說,存在認知障礙。他們可能并不理解這些圖標代表著什么意思。學習需要過程,因此,在老年人未熟悉我們的常用圖標前,可適當調整圖標的設計方向,更加“擬物化”,符合他們的認知。消除認知水平帶來的差距



          2、提示反饋

          例如在一些需要精確移動的操作,而這個功能又必不可少的情況下。應該怎么解決。可以通過線性的視覺提示,加上每一個顆粒度的移動都給到振動反饋,加強長輩用戶的感知。而不是所有的提示都通過界面單一展示。也是可以在資訊版塊加入語音播放的功能,通過聲音來告知信息。



          四.信息獲取優化—以證券交易為例的信息展示優化



          1、信息展示的重要性

          新聞資訊和行情列表展示的字段很大程度上決定著用戶對行情的了解。是否做出交易的行為。行情列表閱讀的現狀:在一些產品中,基于閱讀模塊的相關設計在關注度和方法論上都有所欠缺。線上的行情列表閱讀版式(參考同花順、東方財富)處理較陳舊,視覺體驗較差,用戶在使用過程中障礙較多。歸根究底,由于整體的設計思路缺失,表面的調整一直是修修補補狀態,沒有根本解決閱讀體驗的問題。


          因此在信息展示上,需要加強邏輯與秩序,在易認性和可讀性上優化信息傳達和記憶質量,最終給用戶打造0干擾的閱讀體驗。

          這里解釋下幾個概念:

          易認性:(Legibility)針對文字,能準確無誤的讓讀者閱讀,不因為過于接近帶來困惑。

          可讀性:(Readability)針對版式,閱讀的容易程度,文字的組合呈現。

          0干擾:能將自己的設計不動聲色的隱藏起來,不以設計本身分散人的注意力,達到閱讀的沉浸狀態。



          2、目前證券交易產品列表存在的問題,總結與分析

          基于此現狀,分析了幾個頭部證券交易產品的頁面,梳理目前存在的一些問題,每個列表的盒子寬度不一致,有的寬有的窄,導致在整體閱讀時跨越度比較大。盒子的寬度不同對字段數據范圍理解不清晰,導致同一頁面數據字體大小不統一。展示的信息過多,密度高、信息過載出現視覺疲勞。又或者間隔太大顯示的太松散



          通過各個維度的對比,總結出這個表格

          一、字體分析

          1、字體iOS端文字基本以蘋方為主,數字字體以din為多數(部分調整)2、字號整體以32-34居多。4個平臺文字與數字字號相同常規狀態下)

          3、字重以中文常規體,數字中黑體為主

          二、盒子分析

          1、固定盒子間距,盒子寬度根據字段調整

          2、固定盒子寬度,間距。字體大?。ㄅE#?

          3、盒子間距不固定,超過盒子部分縮小字體

          三、適老/大號字體調節

          1、牛牛/騰訊自選股/同花順:字體大小5檔,可以全局調整,也可以分區調整,牛牛:行情、交易、資訊、聊天室、其他(同花順有長輩模式)

          2、東方財富/新浪財經:支持全局字號的修改,但是支持的檔位有所不同有2檔3檔5檔

          3、老虎:不支持調整/雪球:只支持調整資訊部分字體



          3、確認展現形式,并驗證可行性

          經過總結各家產品的體驗分析,開始了設計方案的嘗試。首先考慮了字段數據高頻出現的范圍、考慮極限值情況,確定字體大小在32-38之間比較合適。第一屏內僅展示最新價、和漲跌幅即可。同時把對比表中出現的高頻率行高、字號。統一進行對比,產生問卷調研進行盲試,選擇覺得最舒服的列表方式。最終34號字體/104列表高度被最多的人選擇。


          在確定字號大小和列表高度之后,開始設計驗證,把要展示的字段和常規、極限狀態的數據放入盒子模型內。確保在不改變字號大小和盒子間隔的的情況下都能完整展示。最后在適配泛金融交易的,A股、港/美股、期貨、外匯等列表信息。在標題、或者數據達到8個-9個的情況下依然能完整展示。



          最后在進行字號大小的調整,適合長輩用戶使用。在保障展示完整的情況下,同時調整字號和列表高度,字號以2個字號為一檔支持5檔調節,最大支持44號120行高。同時在漲跌幅處用色塊做視覺吸引,增強漲跌感知。詳情頁內也是全局調整,不能像某些產品一樣只是單純的形式上的做“適老化”


          開發實現與落地,在和開發同事了解相關背景后,相當于是皮膚系統對應不同字號擁有不同的UI展示。由于不是時實展示,實現難道不大。全局調整字體,可以實現。但是具體效果不好確定。主要是自適應布局方式產生的問題。面臨部分頁面需要重新編寫。由于目前使用的是frame布局方式需要調整成和Auto Layout(自動)布局才能比較好的適應效果。



          4、文章資訊展示優化與落地

          屏幕閱讀與紙質閱讀不同

          人的閱讀習慣會根據閱讀環境而改變,包括文本的書寫格式、文本的媒介、語言符號等?;谄聊坏拈喿x行為,往往表現了如下特征:很少人會一字一句閱讀頁面,更多的是在瀏覽、關鍵詞確認、非線性閱讀、有選擇性的閱讀。因此文章的間距非常影響閱讀體驗。文字的間距包括兩部分,第一是橫向字與字的間距;其次是縱向行與行的間距。



          1. 頁面版式留白探索(行間距,段落間距等)

          行間距是決定版面中的欄寬是否具有閱讀性的重要因素。許多平面大師都非常注重行距,段落間距的設置。過窄與過寬的行距會有意識或無意識的讓讀者困惑,造成某種心理障礙。


          行距過大會打破文本連續性,每一行會被孤立,缺乏緊湊感,會降慢閱讀速度。行距太小會讓頁面灰度過重,讀者眼睛承受過多的負擔,無法集中閱讀單獨一行,時間久了會增加疲勞感。



          根據當前現狀,再結合行業設計經驗,我們選擇了字號與行高倍數組合的一系列方案,進行了眼動實驗和用戶訪談,確定用戶可接受的行間距為1.50-1.70的范圍,再通過對比不同機型下的屏幕顯示效果,以及不同檔位字體顯示效果、閱讀效率,最后確定了圖文落地頁正文文字,擴大行間距1.65倍行號的設計方案。



          2. 對齊方式研究

          研究完行間距顯示,段落里文字對齊的研究也很重要。

          文字對齊方式有:左對齊,右對齊,左右對齊,居中對齊這幾種,大段落文字閱讀右對齊或者居中對齊幾乎沒有,所以這里我們對比左對齊和左右對齊的優劣。來看下優劣對比:

          左右對齊的優勢較多,主要體現在視覺感受舒服(規規整整的版式),更主要是眼睛在固定位置換行,在易讀性上做得比較好。

          缺點也是有的,文章存在2種字間距,而左對齊優勢在于只有一個固定字間距。好在新聞閱讀文章長度并沒有特別長,篇幅受限,影響也就不會擴大,且2個間距尺寸也是在可接受范圍里。


          綜上對比,我們認為左右對齊的版式在新聞類閱讀里,是明顯優于左對齊版式。



          3.引入概念—「垂直韻律」

          「垂直韻律」是閱讀節奏感的重中之重,打造一切視覺閱讀節奏。行距,是垂直韻律的基礎屬性(同版式中的網格概念接近)。

          版式規范中,中文漢字1.5~2倍的行距是最為適合的。整體來說,字號越小,行間距應該相對越大,反之亦然。

          確定1.65倍行距最符合各項指標行距確定完后,基礎間距就有了數值a,之后頁面相關的元素縱向之間間距都依賴這個數值(a的n倍)。



          倍數間距的引用,整體頁面來看,所有的留白都有規律可循,形成自己的韻律感。

          這么做的好處就是用戶對規律間隔的理解度更高,有節奏的留白除了滿足了它本身需要的功能屬性,用戶閱讀過程中不容易受到來自間隔過多的干擾,這樣易讀性就提升了。同時由于字號大小的不同,行間距相應的調整。展現的效果也不一樣

          來看下我們看看不同字號版式頁面樣子,自帶韻律感~



          4.字體、字重選擇

          我們除了需要選擇無襯線字體,更應該選擇字重更全的字體我們發現目前在一些安卓手機上,一些字體在增加字重后出現沾粘情況,不能保證可讀性。

          字重,即字形的重量,字重的等級用來標明同一字體家族不同粗細筆畫的字形。

          但通常一個特定的字體家族僅會包含少數的可用重量。若一個指定的字重不存在時,CSS會就近匹配其他字重:較重的字重映射到更重的重量、較輕的字重會映射到更輕的重量。

          目前落地頁代碼中字體的設置,安卓使用的第一順位的字體字重僅2檔字重,所以在小字場景和分辨率較低的安卓機型上,會匹配到更粗的字重,出現文字沾粘的情況。




          這里插入一件趣事,當時我走查安卓UI頁面時,發現粗體字體比設計稿上粗很多,又對比了一下ios的粗細,就讓他們改細一點。

          他們表示:“沒問題”啪一下,我一看發現加粗完全沒有了,變成常規體了。就說“在加粗一點啊”。

          開發小哥看了我一眼“行”啪一下,又回到那么粗壯的狀態。

          就問“為什么加粗會這么粗,iOS沒有這么粗啊,不要這么粗,要細一點的那種粗!”

          他白了我一眼說:因為是系統字體不一樣的原因,iOS 用的是Helvetica,安卓字體是Roboto,其字體本身就設計加粗效果就是這么粗。沒有辦法了!

          我:……暫時受挫,退去了!回去之后我越看越不行,就選擇查找解決方案,最終在csdn論壇找到了方法。并且發現了相同遭遇的設計師與開發小哥。果然這個粗細問題都讓設計師無法接受!




          最終通過找到的方案化解了這個問題,不過我們還是調整了font-family中的字體適配順位,在安卓端優先適配字重更全的字體,保證安卓端加粗字體的展現,優化內容可讀性。



          五、各家產品適老化改造成果

          如今已經到2022年的年初,各家app適老化做的怎么樣。是應付要求,還是真的為老年人打造適合他們用的產品呢?接下來我那幾個正反面案例給大家分析一下。誰才在真正用心做產品


          反面教材 :

          支付寶

          辨識度:支付寶僅在辨識度上還比較可觀,字體、圖標的色彩對比度都可以較好的辨識。但是在易懂方面,支付寶做的比較差勁,整體的交互依舊沿用普通版的,沒有對于理解性做調整,對于老人來說操作比較復雜,難以學會。而且支付寶的老年版并沒有很用心的去精簡功能,比如這個個人中心頁面,對于老人來說,支付寶會員、余利寶、螞蟻寶、相互寶這些幾乎沒有用處,存在于頁面中只會讓老人誤觸,支付類軟件對于老人來說核心功能就是支付、收款、查余額、查賬單,類似于工具類的產品。在首頁部分還是保留了螞蟻森林的部分,一方面是基于公益的性至,另外一方面還是需要用戶的活躍度、留存率。理財頁面功能布局上是保留了穩健的、較安全的債券產品,以及保險產品。相對來是比較合理,但是進入到下一級頁面后,又回歸了正常模式。


          而支付寶的口碑頁在老年版中應該直接拿掉,口碑里的每個業務單拿出來,體量都不亞于一個大型APP,而且每個業務的內頁都并沒有去適配老年化,點進去依然是普通版的,這樣的頁面存在于老年版的業務中,只會分散老人的注意力,加大老人的誤觸率與學習成本。在新版本中加入的生活模塊,更是連字體大小都沒有改變,完全沒有適配。如果是沒有時間加入適配,不如在老年版不上這個功能反而更加干爽。


          雖然適老化涉及的頁面可能很多,資源成本很大回報率低,但是作為國內首屈一指的金融產品,立足于全球化的目標。格局也可以大一點,并且未來隨著中國老齡化人口越來越多,老年人掌握的財富會越來越多。針于他們做優化也不一定是“虧本買賣”




          同花順

          作為頭部的證券交易產品,適老化做的可以用災難來形容了。本來主要的用戶人群就是中老年較多,界面風格也偏沉穩,結果在適配上做的像是在應付交作業。首頁上半部分是加大了的圖標,選項欄也是加大字號。但是下面資訊的部分似乎和上半部分圖標分割了一樣毫無關系,依然是正常大小,詳情頁中也是如此。行情列表頁中一級頁面是老年版的放大效果,點擊查看更多時,列表又回到正常狀態。列表頁的適配難度是最小的,并且外面一層已經有了,結果還做的如此糟糕。并且在長輩模式中,字體大小調整也暫停生效了,也無法調節長輩模式效果不好的字號大小。



          正面教材今日頭條大字版 :

          今日頭條

          是國內最具影響力的綜合類資訊平臺,內容五花八門,涵蓋的分類眾多,但是今日頭條的老年版(今日頭條大字模式)卻適配的非常好,進入個人中心,把老人不常用的功能收攏起來,給人感覺就沒有過多的冗余元素,把每個模塊的字號與間距都做了適當的調整,整體非常易于閱讀。首先在圖標顏色上,調整成對比度強的顏色,同時今日頭條的老年版了解老人喜歡熱鬧與分享的心理,將頭條分享做的更加突出,便于老人方便的把喜歡的資訊轉發到“姑舅一家親”中。1、首先在圖標顏色上,調整成對比度強的顏色,增強識別度。

          2、圖形化圖標改成文字按紐,單一的圖標,因為認知方面的差異,老年入無法理解。改用文字形式方便老年人理解涵意。

          3、在交互方面的調整,比如暫停、全屏的調整外置,更加方便操作。

          4、信息布局適應調整,重點需求突出,優化不常用入口。圖標與文字相結合強化提示。

          5、字體變大的同時,行間距離也做了想應的調整。


          綜合來說今日頭條的老年版的適老化是非常成功的,不論從辨識度,易學,易操作上,都針對老年群體做了專門的優化 ,這樣的產品才是更適合老人使用的。而不像某些產品的只是單純的大、大、大而已。




          寫在最后

          其實通過總結經驗 ,結合案例來看,做適老化不只是將一個產品的字體放大了,而是根據老人的生理與心里特性將APP重新設計了一番,做一款更適合老年人使用的產品,讓老人更加容易的學習并使用。


          互聯網產品的適老化之路道阻且長,做適老化可能會影響企業的利益,也可能會增加產品的維護成本,受制于某些原因,推動解決老年人面對智能技術的問題解決也是重中之中。但是設計師也需要運用自己的專業性,來幫助目標人群融入數字化的生活中去。

          因為在不久的將來,我們也會變成這個群體,當我們面對這些束手無策時,那時的設計又會是如何適老的呢?適老化設計是適合所有人的設計,所有的設計師都應該密切關注。我們也應該讓老人群體更好的體驗互聯網帶來的便捷,享受中國科技騰飛所帶來的福利,這也是我門后一代人應盡的責任。


          文章來源:站酷   作者:楓楓楓楓鋒 

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

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

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



          據分析體系構成框架

          資深UI設計者

          數據對于產品的發展起著決定性的指導作用,那么公司在運營的過程中具體需要一個什么樣的數據來支撐服務呢?本文作者列舉了產品經理需要了解的數據分析體系,一起來看看吧。

          本文來自于我的新書《高階產品經理必修課》摘錄。

          一、為什么需要數據分析體系

          在很多不成熟的公司中,雖然也有使用數據去驗證產品的思路,但是他們在實際工作中往往是這樣取用數據的:

          產品部同事找到數據分析師,問他昨天剛上線的版本用戶點擊率是多少。

          運營部同事找到數據分析師,問他前兩天上線的拉新活動是否帶來了用戶量的增加。

          領導找到數據分析師,問他這兩天的訂單量是否有所增長,上月交易額環比增長是多少。

          可見,各個崗位都會有自己的數據需求,所以數據分析師只能逐個地進行數據計算。由于人力資源有限,數據分析師往往無法及時反饋所有的數據需求,這將會導致一些運營活動或產品規劃錯過最佳的時機。例如,在“雙11”前夕想要準備“雙11”促銷活動,卻遲遲拿不到過往的運營活動數據。

          正是基于這樣或那樣的原因,很多企業演化出了一類數據產品——數據儀表盤,如圖1所示。

          ▲圖1 數據儀表盤

          數據儀表盤就是將各個數據需求方常關注的數據匯總在一張報表中,這樣大家可以在這里統一看到整個產品的用戶數、交易數等的變化,能在一定程度上滿足大家對數據的需求。

          但是隨之而來的新問題如下:

          產品部的同事抱怨:雖然看到昨天新上的版本中用戶轉化率下跌了,但是根本看不出來原因是什么,說不定是運營部的活動導致的。

          運營部的同事抱怨:我雖然看到了拉新數,但我有三個用戶拉新渠道,到底哪個拉新渠道的拉新能力最強,帶來的用戶質量最高呢?

          面對這樣的進階需求,就需要一套完整的數據分析體系來做支撐,進而來幫助我們掌握數據變化情況并快速定位變化背后的原因。

          二、數據分析體系概念的常見誤區

          一提到數據分析體系,常見的一個認知誤區就是將數據分析體系等同于單一的某一個數據分析產品,如活動運營監控平臺、用戶畫像平臺等。

          其實這里最大的錯誤就是將一個體系割裂開來,只看到了承載數據的產品而沒有重點關注使用者的使用方法,就好像認為數據分析一定要有一把“利刃”,但是卻不去關心舞劍者的功力一樣。

          最早提出這一認知的是錢學森先生,他在系統工程學中提出了軟系統概念:

          任意一個體系要想發揮正確價值,必須通過產品與使用者這兩部分共同協作,這兩者合二為一稱為軟系統。

          所以數據分析體系的正確定義應該是:

          數據分析體系通常由數據使用者的分析模型和數據分析平臺這兩部分構成。

          這也告訴我們在數據分析學習與搭建數據分析體系的過程中,掌握使用數據的方法,方能以正確的方法去解讀數據。但在部分公司的運營過程中,往往忽視了這一點,導致搭建出的完整數據分析平臺無人使用。

          確切地說,是大家沒有以正確的思維或方式去使用,還是以老式的思維使用新的系統,并沒有在思維與認知上進行升級,從而無法發揮其應有的價值。這就好比我們給數據使用者一輛汽車,但他們還是在尋找韁繩以期駕駛汽車。

          這時數據產品經理就應該化身企業內部的數據分析咨詢師,幫助他們看懂數據背后所反應的價值。所以數據產品經理在一家公司中應該有如圖2所示的雙重身份。

          ▲圖2 數據產品經理的雙重身份

          三、數據分析體系構成框架

          搞清楚了數據分析體系的定義,接下來就是了解如何才能搭建一個完整的數據分析體系。

          筆者曾看到部分數據產品經理候選人的簡歷中經常會寫到自己精通數據分析框架的搭建。而當面試中被問到他們的數據分析體系究竟要怎么落地時,他們給出的回答卻是針對DAU(Daily Active User,日活躍用戶數量)、留存率等進行管理,但是數據分析體系中的平臺建設,就僅僅是對這幾個指標的管理嗎?那么請問,當遇到了以下場景時,這幾個指標要怎么解決我們的問題呢?

          場景1:某天某電商出現了GMV(成交總額)下降,此時應該根據哪一個指標解決問題?

          場景2:某公司擁有3條產品線,A產品線中又細分為商品運營、活動運營等,3條產品線的若干運營團隊都看同一套指標體系嗎?

          坦白地說,單看孤零零的某個或者某些指標是無法解決問題的,此時就需要依靠數據分析框架來解決問題了。

          由前面的數據分析體系可知,數據分析體系落地涉及兩個維度。我在《高階產品經理必修課》書中為大家介紹了兩個維度來看看數據分析體系在工作場景中是如何落地的。

          維度1:通用數據分析模型

          以下是實現通用數據分析模型的方法。

          設置目標:確定當下業務中你的目標及完成現狀。

          問題假說:窮舉現狀是由哪些問題導致的。

          數據證明:通過數據來證明該問題會導致怎樣的結果。

          數據分析:分析該問題的成因并形成解決方案。

          維度2:數據分析平臺

          在數據分析體系中,數據分析平臺的構成包含三大核心要素,分別是北極星指標、數據建模和事件分析。

          數據分析平臺定義中各要素的具體解析如下所示。

          北極星指標:每個階段針對具體業務領域確立的商業/業務目標

          數據建模(又稱指標體系):DAU、GMV、留存率、訂單量等

          事件分析:漏斗模型、海盜模型、杜邦分析等

          注意:北極星指標(North Star Metric)又叫作OMTM(One metric that matters),它是第一重要指標,為產品現階段最為關鍵的指標。之所以叫北極星指標,是因為就像北極星一樣,該指標可以指引全公司所有人員向著同一個方向邁進,是全公司統一的指標。

          數據分析體系其實就是通過一系列的方法量化特定的業務,因為我們如果無法量化一個事物,那么本質上就無法衡量它的好壞,也就無法定位業務發展中的癥結所在。因此好的數據分析框架就是在告訴我們:當下的整體業務是什么樣?為什么會這樣?應該怎么辦?

          回顧前面面試者所說的那幾個指標,我們可以發現其根本無法清晰地反映業務上的這三個問題。

          當然,這里只介紹了數據分析體系的宏觀框架,還未涉及具體的數據分析體系搭建過程,在數據分析實戰中還會涉及相應的方法論。

          在我們知道了指標體系與其對應的作用后,接下來就要來學習如何為自身企業業務量身打造一套數據指標體系了。

          要想搭建一套完整的指標體系,除了對業務有非常熟悉的敏感度之外,擁有一套正確的建設方法論也是必不可少的。

          這里我直接給出一個標準的指標體系的建立方法,共分如下4步:

          1)確定數據分析目標。

          2)縱向指標維度定義(層級設計)。

          3)橫向指標維度定義(指標填空)。這其中,又分為自上而下探尋(業務域驅動指標定義)和自下而上探尋(功能逆推指標定義)。

          4)各維度指標項定義。

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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