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

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

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

          首頁

          想讓視覺層次更加清晰?來看這篇視覺間隔方法完全梳理!

          資深UI設計者

          在網頁和移動端界面中,內容和信息是否能夠經過系統性、有效的整理和組織,對于內容的可用性和實用性,都是意義巨大的。而在呈現信息的時候,視覺間隔是組織信息的關鍵因素。它說起來并不難理解,但是在實際的運用當中,卻是千變萬化,今天我們來梳理一下流行的視覺間隔的方法。

          什么是視覺間隔

          視覺間隔是一種布局元素,它有助于將內容分隔成為清晰的分組、選項和部分。它可以讓設計師更好地組織內容的視覺體驗,處理信息的層級,也有助于用戶理解內容,明白內容之間的關系。

          視覺間隔和頁面上的其他內容在一起,構成視覺層級,這是它最重要的作用。在視覺間隔的幫助之下,用戶可以輕松地感知內容之間的關系,明白各個信息片段之間的關系是相似,并列,承襲,從屬,還是其他。

          視覺間隔的可用性也同樣重要:在很多時候,有的視覺間隔元素看起來是可點擊,可交互的,這在移動端界面上,是非常重要的。

          視覺間隔的種類

          談到視覺間隔,我們可以從兩方面來進行拆解分析:視覺間隔的外觀和功能。按照視覺特征,視覺間隔有5種基本的類型:

          • 線條
          • 色彩
          • 負空間
          • 陰影/體積
          • 圖片

          下面我們分別針對這5種類型進行說明。

          線條

          很長時間以來,在排版印刷領域,線條就一直是一種用來分隔內容的方法。線條的分隔功能是認可度最高的一種間隔方式,用戶幾乎不用思考,就能夠理解和感知它,并且發揮作用。

          另一方面,這種間隔方式也很容易顯得過于簡單,并且和應有的形態相去甚遠。這也是為什么設計師在想盡辦法去尋求別的視覺間隔形態。太多的線條間隔會讓屏幕上的視覺干擾太多,并且帶來不必要的視覺噪音。

          所以,能夠將線條間隔用得微妙、恰到好處、出神入化,是設計師功力的一個重要體現。

          在這個網站產品頁面中,使用深色的線條間隔來分割產品信息,用來組織和間隔信息內容。

          在這個頁面當中,線條分隔了不同的內容區塊,讓頁面的結構更易于被掃讀。

          這個電商網站將不同級別的視覺內容進行了分離,借助簡單的水平線將價格、CTA按鈕以及承載相關信息的表單分隔到不同的區域。

          負空間

          負空間,也就是留白,也是最為常見的一種視覺分隔元素。留白絕不是對空間的浪費,和屏幕上其他的元素一樣,它同樣發揮著重要的作用,拱衛支撐著整個用戶體驗。負空間是最為流行的視覺分隔之一,尤其是在極簡主義風格為主導的設計當中。負空間本身遵循著格式塔原理,尤其是其中「接近原理」和「相似原理」是負空間在設計中,發揮分隔作用的核心所在。合理地運用負空間,還能強化頁面的呼吸感。

          上面這款旅行規劃 APP當中,使用留白將不同的條目分開,沒有使用額外的具體視覺元素,僅僅只靠留白。

          Health Blog 的列表的排版層次是基于負空間來實現的,看起來清晰又充滿呼吸感。

          色彩對比

          高對比度的色彩,同樣能夠帶來清晰的視覺間隔效果。在 UI 界面中高對比度的色彩有著極為明顯視覺表現潛質,它們能夠增強網站的信息和內容的表現力,分割區塊,營造氛圍。對比度是影響頁面和屏幕可讀性的關鍵因素之一。在具體的應用當中,不同的色彩會有效地分離不同的選項、條目和區域,這意味著它作為視覺分隔的作用非常強。這也是近年來分屏式設計如此流行的原因所在。

          這是一套移動端菜單的概念設計,強烈的色彩對比讓信息清晰可見。

          即使是在這樣的柔和的設計當中,色彩的對比度也發揮了相當的作用:一方面,強烈的色彩對比讓CTA按鈕和輸入框之間有了明顯的區分,另一方面,右側的主視覺元素的背景也同樣借由不同色彩的對比,做到了突出的效果。

          在 GNO Blankets 這個網站當中,強烈的明暗對比將網站元素分隔成為精美而清晰的區塊。

          陰影和體積

          陰影和體積也是一種非常常見的視覺間隔方式,通過營造在「高度」或者說高程上的視覺差異,從而達到分層的效果,而這種設計也是符合人類一直以來的認知習慣。這種方法有利于保持整個設計的平衡和易讀性,另一方面,它又能保持足夠的微妙和自然,不會那么引人矚目從而讓人覺得出戲或者受到干擾。

          這個APP的目錄頁面所有元素都采用了白色的背景,而陰影讓布局呈現出了縱深層次,讓內容足以展現又不顯突兀。

          這款提供定制化花束服務的APP也采用了類似的陰影元素,讓整體看起來清晰又通透。

          圖片

          圖片在 UI 界面當中,同樣也是一種非常有效的視覺間隔,尤其是在包含大量文本內容的界面中。無論是博客、在線媒體網站還是其他類型的網站當中,圖片的間隔作用都非常明顯。無論是照片、插畫、3D圖形,它們作為圖片都可以很好的平衡文本內容,提高內容的識別度和可讀性,有效地劃分層級,并且提高情感吸引力。

          這個比特幣網站的著陸頁就使用了帶有3D效果「了解更多」動態圖片,圖片和文本在內容和功能上都清晰地分隔開來。

          在這個餐廳 APP 當中,圖片作為劃分內容的關鍵元素而存在。

          按照功能劃分

          如果從功能的角度上來劃分視覺間隔,可以根據它所處的層次來進行劃分。

          全出血間隔

          使用線條作為全出血間隔是最為常見的,它會很跨整個屏幕布局來作為信息層級的劃分。

          這個畫廊圖庫 APP 的藝術家目錄當中,使用線條作為全出血間隔,來區分藝術家。

          這個名為完美食譜的APP也使用了全出血間隔線來區分內容。

          在這個財務APP當中,也使用了全出血間隔線來區分條目。

          在這個電影APP的結帳頁面當中,也使用了線條來作為全出血間隔。

          嵌入式間隔

          嵌入式間隔的功能是將相關性較高的內容分割開,并且它通常會和標題或者其他的特定元素保持對齊或者對應,它們通常是進行某個大區塊內不同組件的分隔,或者將多個同類的元素分隔開。

          這個網站當中,使用橫向的短分隔線來區分表單中的參數條目。

          中間分隔

          這種分割線通常會置于布局的中間某處,同樣是分隔相關的內容,但是通常它們在屬性上不一定是一致的,但是層級近似。

          在這個出售草藥的電商網站的右側,使用中間分隔線將文本和可交互的區域清晰地分隔開。

          值得思考的問題

          上面對于不同類型的視覺分隔方式都有描述,在此之外,還有兩個問題需要注意:

          • 保持微妙:視覺分隔不應該醒目、太過引人矚目,它們不應該分散用戶的注意力,它們應該支撐布局的同時,微妙而不那么抓人眼球。

          • 中等頻率:這和上一點是相輔相承的,過多的分隔線會變成視覺噪音,讓用戶瀏覽的時候感到疲倦。因此,應該仔細考慮使用頻率,盡可能使用負空間,而不是線條。不要過度使用太多色彩,應該盡量保持整體的協調一致。

          文章來源:站酷

          視覺設計師應該掌握的五類交互邏輯

          資深UI設計者

          日常工作中,經常聽到交互和視覺同學有著如下對話:

          • 視覺同學:「這個內容我想換個位置,可以嗎?」「我可以用另外一種布局方式嘛?」…
          • 交互同學:「你這里的表達有些歧義,用戶容易誤解,需要修改?!埂高@里層級關系不太對,應該更強調XX內容?!埂?

          可以看到,無論交互還是視覺同學的提問,其實都是圍繞「信息」表達的邏輯。視覺同學設計過程中,應該如何理解交互稿件,并進一步體現交互的層級邏輯?是否可以對交互稿的布局進行調整發揮?我們通過案例來一起看看。

          目前,頁面類設計一般分為運營型和平臺型。

          運營型

          關注重點:「活動利益點」「模塊內容順序」「視覺發揮空間大」

          活動頁設計中,信息的層級表達相對簡單,一般分為主氛圍圖-體現活動主題、內容展示區-直接轉化、尾部兜底區-相關擴展。這類型需求,重點在理解交互稿中主題的表達、內容區的分類及重點元素體現。視覺設計師在該類型的設計中,發揮度是很大的。

          平臺型

          關注重點:「層級結構」「瀏覽順序」「視覺在信息邏輯之上發揮」

          平臺類設計項目,交互設計師通過頁面框架、模塊設計來表達產品/運營的策劃思路,涉及內容及模塊更多,且包含著復雜的邏輯關系。一個優秀的平臺視覺設計師,應當是通過好的視覺表達,按照交互信息層級關系,將信息內容傳遞給用戶。這里視覺同學要避免兩個誤區:完全按照交互框架和排布,只是純粹填色;從「好看」的角度重新布局,忽略交互層級關系。

          案例

          下圖是美妝頻道的一次改版,通過觀察交互稿和視覺稿可以看到,這位視覺設計師在交互稿的基礎上,采用了更靈活的視覺引導方式。這些改變是否有效傳遞了交互邏輯?視覺階段的這些調整是否都合適呢?看完本文,你就能有一個清晰的答案了。

          1. 元素位置及表意

          瀏覽順序 元素表意

          這是一個新品速遞模塊的設計方案。交互稿表達的信息是:這個區塊是用來介紹新品的,首先希望用戶知道模塊屬性是什么,然后讓用戶快速了解推薦商品是什么,及為什么值得買。視覺稿較好的傳遞了交互層級及信息表達,首先突出了欄目名稱讓用戶能一眼看到,其次是商品及商品特性展示;而稿件中的欄目名稱位置和樣式則在視覺上做了自由的發揮。

          小結:模塊中各元素的瀏覽引導(眼睛瀏覽路徑)需要嚴格按照交互邏輯,元素的表達和位置可以根據邏輯發揮。

          2. 模塊比重及樣式

          下面這組案例,在信息層級上,視覺稿是否完整傳遞了交互邏輯?先自己思考一下吧~

          模塊比重 內容布局

          交互層級來看,整個區域有2個模塊「正在進行」和「品牌精選」,每個模塊有4個等大的展示單元格。而視覺稿中,「正在進行」模塊的單元格變成了兩大兩小。嚴格來說,這個調整是不符合交互邏輯的。

          但是,視覺稿的輸出效果明顯更靈活,瀏覽層次更佳!那,能不能這么改呢?

          這需要回到,為什么交互輸出時,畫成了等大樣式。在交互環節,運營側提出四個專題希望是相同層級,無優先級的差異。

          這種情況下,視覺同學如果仍然堅持有層級差異的視覺感官更好,可以先和交互同學一起商量,從用戶體驗的角度來看,這個改變是否有嚴重影響,如果團隊內部也都認為改動后的效果更佳,可以一起找到對應的運營同學,說明原因,建議他們進行調整;同時去了解這樣的調整對業務方的業務表達是否有影響。

          小結:視覺表達要關注信息模塊的比重,視覺側好的想法也要直接提出和交互及業務方討論

          上面這個案例也是關于模塊比重的,最大的差異在于欄目名稱及入口的調整。從不強調樓層名稱變成樓層名稱成為模塊的視覺焦點,因涉及到模塊比重,類似的改動也建議和交互設計師進行討論。同樣,該案例的改動,豐富了樓層樣式,并通過標題模塊強調了樓層的調性氛圍,同時并未對用戶閱讀體驗造成不好的影響,因此是個視覺提升交互表達的優秀案例。

          對于同層級關系的單元格,我們也可以采用不同的操作方式,比如上面案例中,視覺環節使用了疊起的展示樣式。相對于交互,優點在于增加了一種互動形式,而缺點則在于會對部分信息進行遮蓋,不能直觀呈現全部內容。這個案例的處理方式是,我們將兩種方案的優劣告知運營方,運營方認為可以犧牲部分信息的呈現,而選擇互動方式的不同呈現。

          3. 控件樣式

          我們以TAB來舉例,TAB形式體現的是并列關系的多個模塊呈現,視覺設計師可以根據不同場景用不同視覺方案來呈現。

          常規的視覺展示

          場景化表達-日歷

          下面案例中,交互傳達的是一周七天的食物推薦,在視覺階段可以把TAB樣式設計得更貼近日歷,更貼合模塊的主題表達。

          場景化表達-餐桌

          這個案例視覺側在模塊面積上進行擴大,影響到原首屏內展示內容的信息量。這種情況則需要與業務同學進行溝通,信息后置是否會影響他們在首屏信息的展示需求。一般活動類頁面,首屏內容和頁面長度的要求,相對寬松;如果是工具類/綜合性展示頁面,信息是否能在首屏出現,對頁面點擊和使用效率會有很大影響。

          TAB的引導位置

          下面案例中,因為TAB的位置發生了調整,用戶的閱讀順序發生了變化。交互稿中,我們希望用戶先看到TAB分類以了解推薦手機的不同緯度;而視覺稿中,優先讓用戶看到推薦商品,如果首輪推薦無興趣,再通過TAB切換查看其它維度內容。

          4. 元素順序

          元素的不同呈現順序會體現不同的交互邏輯。

          下圖中的推薦區模塊,交互上的順序是圖→人物→具體商品描述,首先強調的是商品,其次是用戶的評價;而視覺稿上的順序是人物→圖→具體商品描述,首先調的是評價的人,再說商品是什么。兩種邏輯其實都符合「食鮮者說」的邏輯,但從屬關系是不同的。這里的邏輯決策是,如果評價用戶是知名度較高的,可以通過人物為食物加分,則我們選擇視覺稿邏輯;而如果我們是靠商品圖本身致勝,評論者只是輔助決策元素,則選擇交互稿邏輯。

          5. 模塊層級關系

          模塊間的層級關系,可以通過去色來快速判斷,是否符合交互瀏覽要求。去除顏色和元素對界面視覺優先級的影響,更聚焦邏輯本身。

          對比下面案例,去色后可以更容易看到,優化后方案更加整體,視覺引導也更加順暢。

          小結

          交互稿中體現的邏輯,涉及到樣式/位置調整的,我們應遵循原則:「在保證信息順序、層級關系、信息占比邏輯正確的前提下,視覺可以進行專業的各種發揮」。

          文章來源:優設

          2B SaaS 產品用戶系統設計

          資深UI設計者

          無論是2B產品,還是2C產品,用戶系統都是基礎。對于非互聯網產品從業者,2C用戶系統的場景和功能通過日常各類APP的使用,大家都非常熟悉。因此,筆者通過和2C產品的對比,談談2B SaaS產品的用戶系統設計。

          一、商業的本質差異,決定了產品的核心目標

          2C產品面向的用戶是個人,用戶系統的核心是獲客,因此大多2C產品的用戶系統設計重點在于方便用戶注冊、登錄,能夠建立精準的用戶畫像,從而達到流量變現的目標。

          2B產品面向的用戶是企業,用戶系統的核心是組織、員工精細化管理,提升人效,從而實現節約成本的目標。

          二、業務場景的需求差異,決定了產品的細節功能

          1. 注冊場景

          2C產品的注冊主要用于個人用戶注冊場景,重點在于提供多種渠道的注冊方式,如賬號、手機、第三方社交應用(微信、微博等),其核心目標是既能方便用戶注冊,又能多渠道多平臺賬號打通。

          2B產品的注冊分為兩部分:企業管理員代表企業注冊和企業員工注冊。

          2B平臺型SaaS產品,和2C最大的區別在于產品需要用戶付費。因此,平臺方為企業(平臺租戶)提供了注冊入口,一方面需要方便租戶能夠通過其他渠道快速注冊試用產品,一方面需要驗證企業相關信息,識別該用戶確實為潛在用戶。

          1)企業注冊:

          當企業管理員代表企業注冊時,需要提供的注冊信息:管理員昵稱、手機號、郵箱、企業工商信息(名稱、組織機構代碼、地址、法人信息等)。

          其中工商信息的完整度,不同的產品要求不一樣,需要根據具體產品而定。如果方便注冊拉新,盡量減少工商信息填寫要求,如果產品安全性要求較高,可以盡量要求工商信息填寫完整。

          2)企業工商信息認證:

          這部分并非強需求場景,取決于產品的安全性要求。一般安全性要求較高的平臺產品,會在企業注冊后,進入到企業工商信息認證環節。此環節要么是平臺管理員人工審核,要么通過第三方認證驗證企業工商信息是否合規。企業完成認證后,即可試用產品。

          如非安全性要求較高的產品,可以直接跳過該環節,租戶通過注冊頁信息填寫完整后既注冊成功。

          3)企業員工注冊:

          • 注冊信息:昵稱、手機號、郵箱、其他個人信息;
          • 被動邀請:一般B端產品多作為企業員工日常作業工具,因此多采用管理員開通賬號制,管理員通過后臺將員工信息注冊至系統,員工即可登錄。被動邀請制員工和公司屬于強綁定關系,員工賬號不可以獨立存在;
          • 主動注冊:員工主動注冊場景中,員工主動注冊產品賬號,然后再申請加入企業,由企業管理員審核通過后,和企業進行關聯。該方式個人用戶既可以獨立作為平臺產品用戶,又能夠以某公司員工的身份作為平臺用戶。釘釘即為典型代表,該類產品,一個員工可同時加入多個企業;
          • 個人資料:員工注冊后,該員工信息注冊至系統,并能夠在系統中展示、查詢、完善個人信息資料。

          2. 登錄場景

          登錄場景比較容易理解,目前B端產品相較C端產品仍然比較傳統,多采用郵箱/手機進行登錄。

          未來也希望可以實現,B端產品能夠和更多C端產品平臺打通,可通過通用的第三方賬號進行登錄,實現業務與社交的連接。

          3. 用戶畫像

          用戶畫像是2C產品至關重要的內容,只有精準的用戶畫像,才能更精準的服務好用戶。無論是電商,還是資訊平臺,基于用戶畫像的精準營銷投放才是產品的核心。

          2B的產品很少有講用戶畫像相關的內容,事實上對于2B產品而言,用戶畫像也至關重要。

          筆者目前從事CRM產品相關工作,CRM核心要解決的問題就是幫助你的客戶獲客,那么如何去建立客戶的企業標簽,去按照企業標簽屬性,借助大數據分析,幫你的客戶找到他的客戶群,是筆者近期在研究的課題。

          • 建立企業屬性維度標簽:如行業、規模、業務范圍、客群范圍。
          • 競爭企業標簽關聯性模型分析:便于了解市場環境、分析競爭企業,及時調整公司戰略。
          • 潛在客群(企業)標簽關聯性模型分析:利用數據分析模型,幫助企業識別潛在客戶,提高企業獲客率。

          4. 組織結構

          2C的產品從本質上來講不存在組織結構,個人用戶即為產品主體,但會存在群組/社群的概念。

          2B產品的應用主體是企業,而組織結構是企業運營管理的必要手段和方式。因此組織結構管理是用戶系統的重要組成部分。

          1)建立組織結構

          組織的單元是部門,因此管理員需要能夠按照企業組織結構建立、調整(編輯、合并)、刪除部門。

          2)部門樹結構

          部門作為組織結構的單元,只是組織結構的分子,而要形成組織,就要按照企業的業務形態要求形成一定的層級體系。因此部門不僅僅只是簡單的信息描述,還需要有層級描述,這就需要我們在建立部門時按照層級結構建立部門,定義清楚所建立的部門是上級部門、下級部門。

          3)通訊錄展示

          管理員通過后臺創建完組織結構后,企業員工可通過前臺查詢按照部門結構展示的通訊錄。

          5. 角色管理(該部分是2B用戶系統設計的重點和難點)

          角色管理是B端產品的特有功能,企業員工按其所負責的業務模塊劃分不同的崗位職責。

          由于企業數據具有較高的安全性和私密性要求,按照崗位職責的不同,不同崗位的員工對于業務數據的操作/查看權限不同。

          因此,我們設計了角色管理,該角色并非嚴格意義上的崗位職能角色,而為了區分不同的員工不同的系統權限所設計的系統角色,這就是RBAC設計。

          1)建立角色

          建立角色的主要目標即為建立一個用戶權限組,該權限組內的用戶具有相同的權限。

          2)分配角色權限

          基于角色分配系統權限,以實現不同的角色下的用戶擁有不同的權限。

          • 功能權限:用于設定該角色能夠使用哪些產品功能,如果不屬于該角色業務范疇內的功能可以直接對該用戶屏蔽,避免過多的功能菜單干擾用戶對產品的使用。
          • 功能操作權限:企業管理越精細,員工負責的工作越具體,一個功能內,不同的人按照其職責進行不同的操作劃分,為了保證數據的正確性和安全性,需要給不同的角色分配同一功能下不同的操作權限。
          • 功能內的描述字段權限:一個業務功能中有不同的屬性描述字段,但不同的角色關心的屬性不一樣,為了能夠進行區分,需要給不同的角色去設定不同字段的讀/寫權限。
          • 數據權限:企業數據本質上是企業資源,既具有私密性又具有共享性。一個角色具有該功能的一定操作權限,但是他能操作該功能下哪些數據?只能操作他本人創建的數據,還是能操作其他員工創建的數據需要通過數據?這就需要用數據權限來控制。這就要求當數據被創建,該條數據也需要相應的字段來描述該條數據的所屬關系,該數據屬于哪個用戶,屬于哪個部門,最終才可實現人和數據的關聯,以實現基于員工角色的權限管理。

          6. 員工管理

          員工管理是B端產品的特有功能,員工是企業組織的重要組成部分,員工也是產品真正的終端用戶。

          B端產品從本質上是要能夠幫助企業員工提升工作效率,提高企業人效,以實現企業管理者降低運營成本的目標。

          1)新建員工

          前面提到的用戶注冊即為新建員工的過程。包括被動邀請主動注冊兩種形態,主要目標是將員工信息注冊至系統,并建立員工和企業的關聯關系。

          2)建立員工匯報關系結構

          為了實現精細化管理,企業內部一般按照組織結構設定員工的匯報關系,因此從CEO到基層員工會形成組織關系樹,該結構可以和組織結構完全一一對應,即該部門下的所有員工均匯報給部門負責人,但也有部門內部分不同的小組,不同的人匯報給不同的小組負責人。

          因此匯報關系和組織結構關系有一定關聯,但并不是完全一一對應,所以我們需要設計員工匯報關系功能。

          3)員工離職設定

          為了保證企業數據的安全,員工離職后,需凍結員工賬號,離職員工將不能以該企業員工的身份登錄系統,以確保企業數據的安全性。

          • 設定離職將員工賬號設定為離職狀態,員工賬號被凍結;
          • 數據轉移:員工離職后,其業務需要其他員工來接替,因此該員工在職時負責的業務數據需要被轉移給新的用戶,此部分功能需要在數據轉移功能中進行規劃。

          至此,2B用戶系統的功能基本設計完整,其重難點在于組織結構、權限控制,需要重點關注。

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

          當我們在談 SaaS 的時候,在談什么?

          資深UI設計者

          當我們在談 SaaS 的時候,在談什么?

          ● 什么是 SaaS

          ● SaaS 產品的優缺點

          ● SaaS 產品的銷售模式

          ● SaaS 產品指標

          ● SaaS 業務指標

          ● SaaS 收入計算



          一、什么是 SaaS


          這個模式讓軟件變得和水電氣很相似,只需要每月繳納固定的費用即可享受服務。

          ——馬克·貝尼奧夫(salesforce 創始人)


          Image title


          訂閱模式


          SaaS(software as a service),軟件即服務,是一種軟件交付和銷售方式——訂閱許可模式。 

          它基于云, 運行在遠程服務器上,集中托管。因此不需要獨立部署甚至物理分發來完成交付和使用,這意味著用戶通過網絡即可使用。

          例如,過去你使用 office,需要買一張光盤或者在線下載,輸入序列號(一次性付費),進行本地使用。如果要更新你需要重新購買和下載版本。而 SaaS 只需在線登錄即可使用服務,無需安裝和手動升級,并根據使用時間付費(按月/年)。



          規?;蛷屠?/strong>


          SaaS 采取訂閱付費(按月/年)模式,良好留存的情況下,當月/年的收入就是下個月/年的基礎,不斷累加下去(復合累積收益),形成良好的現金流。


          也因此,SaaS 產品的收入具有了經常性、可預測性的特點。這使得,企業可以根據現金流進行規劃,甚至通過融資,提前獲取未來的收入,來進行產品的增長和擴張。


          同時,對于訂閱者而言,無需購買硬件和中間件(前期成本),以及實施、維護、更新、運維和管理成本(后期持續投入成本),只需要連接網絡即可使用,致使決策和投入成本得到了大幅降低。同時,后期可根據業務的發展,升級套餐或增加數量,這些優勢致使 SaaS 軟件更容易擁有大量客戶,形成規模。


          從復利性角度,SaaS 產品的估值是經常性收入的若干倍。因此,SaaS 產品的改進,不僅僅是提高下個月的或者長期的收入,而是整個企業的市值,可謂“一本萬利”。



          開放和靈活


          SaaS 會針對不同組織的訴求,提供多種套餐方案,通常在付錢前,用戶可以進行免費試用,從而更好的判斷是否滿足自身需求。


          同時,SaaS 會開放自己的接口(API),方便與其他軟件集成,從而更好的滿足客戶業務。SaaS 廠商也會對接市場上跟產品業務相關的主流軟件,從而提供更加完善的解決方案。


          例如,你使用 53KF 云客服進行在線服務,同時打通 CRM 和訂單系統,以及百度、騰訊、頭條、360 等流量渠道,從而提供更好的客戶支持和流量轉化。



          先進生產力


          SaaS 產品的發展,是不斷驗證市場需求(PMF)、優勝劣汰的過程,其成功就代表著某種先進生產力(工具、流程或方法)。


          從更大價值角度考慮,SaaS 賣的不僅僅只是工具,而是解決方案,融入到生產制造中去,協助客戶獲取成功。同時,對于廠商而言,也是更有價值、更有競爭力、更長久存在的經營方式。


          從市場而言,SaaS 是一種眾包模式,廠商覺得市場有大量的同類需求且長期存在,開發成產品進行運作。也真正有效的節省了同類訴求其社會資源的多次投入。


          由于 SaaS 產品的有利可圖,促使市場的激烈競爭,也鍛造了廠商在其領域的專業化,提供更加有效的解決方案。



          二、SaaS 產品的優缺點


          優點/優勢


          ● 易于訪問。SaaS 通過網絡提供服務,用戶可隨時訪問,且數據儲存在云端,實時同步。

          ● 免費試用??梢栽诟犊钋埃M行免費試用,進行多家對比,選擇最合適的。

          ● 費用便宜。使用訂閱模式,價格取決于用戶數量,訂閱者無需一次性支付大量費用,降低前期購置成本。

          ● 支付靈活。按月/年進行支付,此外,訂閱者可根據業務發展,增加或升級套餐,減少或降低套餐,甚至隨時停止使用。

          ● 良好支持。服務的好壞決定了客戶的訂閱,所以 SaaS 廠商會提供更加友好、高質量的客戶服務。

          ●  開放集成。開放的接口(API)可以與其他產品進行數據打通。

          ● 立即使用。無需安裝和部署,有網絡的地方即可使用。

          ● 無需維護。SaaS 統一運行在廠商的服務器上,由廠商統一維護、更新。



          缺點/風險


          ● 數據安全。所有數據儲存在云端和軟件廠商的服務器上,可能會引發泄露等安全問題。SaaS 軟件廠商,通常非常注重數據的安全性,因為數據泄露對于 SaaS 廠商的企業經營而言是致命打擊。有些 SaaS 廠商也提供混合云服務,將敏感性數據儲存在客戶自己的服務器上。

          ● 網絡連接。沒有網絡,將無法使用 SaaS 產品。同時,網速深刻影響 SaaS 產品的運行速度。

          ● 服務中斷。軟件廠商的硬件故障、網絡攻擊等造成的服務中斷,會致使產品無法使用。



          三、SaaS 產品的銷售模式


          通常來說,SaaS 的銷售模式分為三種:

          1、非接觸(no-touch):自助服務

          1、低接觸(low-touch):交易型銷售

          2、高接觸(high-touch):顧問式銷售


          Image title



          非接觸(no-touch):自助服務


          理想的 SaaS 銷售模式是客戶自助完成整個服務,沒有銷售人員的介入。


          這需要產品簡單、價值明顯、支付容易甚至售價便宜。同時,產品本身提供良好的支持(操作引導、使用說明、幫助中心以及反饋入口),從而允許客戶自助完成服務。


          非接觸的 SaaS 產品,通過省去銷售團隊和支持性投入,采用低價,獲取大量客戶。同時,也因為價格便宜,無法支持銷售和支持性團隊的組建。


          例如,某 SaaS 產品,10 月/月,一個銷售人員的底薪 4000 元/月 + 五險一金和辦公等費用,那么至少需要銷售 600 個客戶才能抵消成本,這是很難完成的。



          低接觸(low-touch):交易型銷售


          低接觸的 SaaS 產品,通常采用免費試用的方式,進行獲客。然后,銷售人員通過在線咨詢服務(53KF 云客服)或者電話進行銷售轉化。


          同時,產品在 onboarding 上需要投入大量的資源,從而降低用戶使用摩擦,使得用戶能夠成功的上手并獲取價值。


          低接觸的 SaaS 產品通常采用按月訂閱的模式,其滿意度決定了持續收入。因此,低接觸的 SaaS 產品的銷售,需要同時兼任“客戶成功”的職能,提供良好的客戶支持,從而保證客戶持續的獲取產品價值而不斷續費。



          高接觸(high-touch):顧問式銷售


          高接觸的 SaaS,通常需要大量的人力投入,招標、拜訪、出解決方案、商務談判等等。


          高接觸的 SaaS 更多采用年度收費的模式。強銷售決定了年收入的上限。因此,高接觸的 SaaS 產品幾乎是圍繞銷售團隊的,市場營銷的主要工作是為銷售團隊獲得足夠多且合格的銷售線索;產品、開發更多的配合銷售團隊滿足客戶需求;客戶成功團隊接收后期服務、產品支持、關系維護以保證客戶續費。


          從我個人接觸到的,低接觸、高接觸對于產品設計而言,在于主導權方面。


          低接觸會考慮更多的價值面(通用的最大化價值),從而會拒接沒有未來(可能性和想象力)的單體訴求。


          而高接觸,更多來自客戶傳導給銷售,銷售傳導給公司,公司傳導給產品的業績壓力。所以,高接觸一定是高單價,低單價的高接觸在一定層面掙得是辛苦錢,無競爭力的勞動輸出,而不是方案輸出。



          四、SaaS 產品指標(SaaS Product Metrics)


          PMF(Product-market fit) 產品市場匹配


          SaaS 產品的早期,更多的是驗證產品與市場的匹配(Product-market fit,PMF),直白的說就是生產的產品是否具有市場價值,是否有人愿意花錢購買。


          所以 PMF 是不斷確認這三點的過程:

          1、目標客戶是誰

          2、目標客戶的需求(痛點、爽點、癢點)

          3、提供的解決方案是否能掙到錢


          Image title


          PMF 通過早期付費客戶來確定有利可圖的細分市場。和他們不斷交談,收集反饋來迭代產品。

          并根據付費客戶特征,尋找客戶共性,從而更緊密的圍繞最佳客戶打造產品、從而更明確的找到目標客戶接觸途徑、從而更有效的設計市場營銷宣傳策略。



          NPS(net promoter score) 凈推薦值


          通過 NPS 進行客戶滿意度調查,衡量客戶體驗,預測未來業務增長以及預防客戶流失風險。


          NPS 采用 10 分制,讓客戶進行打分。


          Image title


          打分者分類:

          ● 推薦者(dpromoter):9-10 分,對服務非常滿意,愿意持續使用并向他人推薦,從而推動產品增長

          ● 中立者(passive):7-8 分,對服務滿意,但忠誠度低不會主動對產品宣傳,容易受競爭對手影響

          ● 貶低者(detractor):0-6 分,對服務不滿意,會對產品進行負面評價和傳播,從而阻礙產品增長


          NPS=(推薦者數/總樣本數)×100%-(貶損者數/總樣本數)×100%


          例如,有 100 客戶打了分,結果如下:

          ● 10 分:15 人

          ● 9 分:20 人

          ● 8 分:20 人

          ● 7 分:20 人

          ● 6 分:10 人

          ● 5 分: 10 人

          ● 4 分:5 人


          忽略打 7-8 分的人數,9-10 分人數 35,6 分及以下 25 人,NPS=35%-25%=+10%


          如果 NPS 是負值,那么業務收入可能將會減少,因為客戶在不斷流失。正值的 NPS,表明客戶滿意度高,未來具有可持續增長的潛力。



          五、SaaS 業務指標(SaaS Sales Metrics)


          單位經濟收益:CAC:LTV


          SaaS 產品的成功與 PMF 高度匹配之外,還需要一個切實可行的商業模式,即客戶價值(LTV)大于獲取成本(CAC),健康的增長意味有效平衡兩者,從而確定這是一個有利可圖的市場。


          CAC(Customer Acquisition Cost)

          獲得客戶的平均成本。

          CAC= 銷售和營銷費用之和 ÷ 新增客戶數量


          LTV(Customer Lifetime Value)

          客戶生命周期內(從注冊到流失)平均總價值。

          LTV=(ARPA*毛利率%)÷ 客戶流失率


          ROI(Return on investment)
          客戶獲取的投資回報率。

          ROI=LTV:CAC



          Months to recover CAC

          CAC 通過 MRR 收回的平均月份。

          Months to recover CAC=CAC÷(ARPA*毛利率%)

          ARPA:每個帳戶的平均收入,你的 MRR 除以客戶數量,即所有客戶的平均 MRR

          毛利率=[(營收-成本)÷ 營收]×100%


          David 在《SaaS Metrics 2.0–衡量和改進重要內容的指南》一文中指出,LTV:CAC ≥3,Months to recover CAC ≤12 月,通常被認為是良好的 SaaS 項目。同時也指出,很多健康 SaaS 在初期可能并不符合,但會在一段時間內通過改善業務逐漸接近這兩條準則。


          Image title


          Image title


          經常性收入:MRR 和 ARR


          經常性收入(Recurring Revenue)是未來持續可獲得的收入,就 SaaS 而言,經常性收入來自客戶的訂閱,具有穩定、可預測、高度確定的特點。


          在 SaaS 業務中通常采用按月或按年合同:

          ● 主要按月合同及少量的年度合同,采用 MRR(Month Recurring Revenue 月度經常性收入)。MRR 用于衡量每月訂閱收入,如果有一些年度訂閱,除以 12,再分攤到每月來計算 MRR

          ● 按年合同及少量的多年合同 ,采用 ARR(Annual Recurring Revenue 年度經常性收入)。多年合同除以合同年限,再分攤到每年來計算 ARR


          在 MRR/ARR 統計中,并不會計算一次性的收入。例如,定制功能費用。


          經常性收入會不斷推動這 SaaS 廠商的發展,也是驗證產品是否具有可持續增長的指標。



          流失(Churn)


          SaaS 是訂閱模式,在高留存率下,隨著時間的推移,意味著更多的客戶、更多的訂閱,持續收入不斷復合累積。所以,流失率對 SaaS 廠商是非常重要的指標。


          在 SaaS 中有兩種計算流失的角度:

          ● 客戶流失(Customer Churn),取消訂閱的客戶數量

          ● 收入流失(MRR/ARR Churn),取消訂閱的收入損失


          Image title


          那為什么會有兩種計算方式?


          例如,53KF 云客服的業務,是按照坐席收費,50 元/月。假如我們有 200 個客戶,100 個大客戶(每個大客戶擁有 100 個坐席),100 個小客戶(每個小客戶擁有 10 個坐席)。


          當月,我們流失了 10 個客戶,那么月客戶流失率為 5%。


          如果,流失的客戶中,有 8 個是大客戶,2 個是小客戶,那么 MRR 流失 45000 元,MRR 流失率為 7.45%。


          如果,流失的客戶中,有 2 個是大客戶,8 個是小客戶,那么 MRR 流失 14000 元,MRR 流失率為 2.55%。


          所以,通過不同的計算方式,使得我們更加全面、準確的了解到業務中所發生的事情。


          Customer Churn Rate

          客戶流失率,客戶取消訂閱的比率。

          Customer Churn Rate= 期間流失客戶數 ÷ 期初客戶數    


          MRR Churn Rate

          月度經常性收入流失率,通過降級、取消而損失的 MRR 比率

          MRR Churn Rate= 期間流失 MRR ÷ 期初 MRR 


          Net MRR/ARR Churn

          凈 MRR/ARR 流失。

          Net MRR/ARR=期間新增 MRR/ARR 之和 - 期間流失和收縮 MRR/ARR 之和


          Net MRR/ARR Churn Rate

          凈 MRR/ARR 流失率。

          Net MRR/ARR Churn Rate=(期間流失和收縮 MRR/ARR 之和-期間新增 MRR/ARR 之和)÷ 期初 MRR/ARR


          當收入增長超過流失的損失,在這種情況下,凈 MRR/ARR 流失則為負值,稱之為負流失(Negative Churn),表現在財務表上的就是收入的不斷增長。


          記住,在計算流失時,總是在特定的時間范圍內,例如上月客戶流失率是 5%。



          六、SaaS 收入計算


          確認收入(revenue recognition)


          對于 SaaS 而言,確認收入是非常重要的財務知識,確認收入與合同金額、收款金額有很大的區別。


          例如,按年收費的 SaaS 產品,年費 1200 元,那么:

          ● 合同金額是 1200 元

          ● 客戶一次性支付年費,收款金額是 1200 元

          ● 在合同期間的每個月的確認收入則為 100 元。剩下的 1100 元則為遞延收益

          ● 從企業資產負債表而言,剩下的 1100 元均為負債。因為服務還未完成,還需要投入 11 個月資源履行服務義務,甚至合同可能發生中止等情況,所以還不是確定的收入,需要通過后期的確認收入(損益表中的利潤)來減少資產負債表上的負債

           

          * 遞延收益:指尚待確認的收入或收益。凡在期間內完成的服務所產生的收入,則為確認收入;反之,即使款項提前預收,但未在期間內完成服務,則不作為確認收入。


          * 資產負債表:反映企業經營在一定時期內(月份、年度)財務狀況(兩個方面,一方資產、另一方負債和權益)的報表。


          * 損益表:反映企業經營在一定時期內(月份、年度)利潤(收入)或虧損(支出)的報表



          總結


          通過梳理總結,談了談 SaaS,這是在我當前知識體系范圍內的總結,SaaS 是的龐大的體系,關乎個個層面:產品、營銷、銷售、客戶成功、增長、定價、渠道等等。


          WEB端控件規范——導航類

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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

          電商設計都應遵循的最佳實踐

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          在電子商務界,你的網站設計就是一張在線名片。

          它能幫助你從擁擠不堪的海量信息中脫穎而出,同時也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的,幾乎80%的人都會選擇離開你的網站。

          這就是為什么在構建和設計網站時,永遠不要低估用戶滿意度帶來的影響。

          接下來要講的是如何設計一個無可挑剔的、以用戶為中心的網站,來使你的網站轉化率飛速上漲。

           

          1. 提供直觀的導航

          如果不能引導用戶完成最終購買,那么設計再精美的網站都是毫無意義的。用戶沒有選擇在你這里購買的一個主要原因是復雜的網站導航。記住,用戶不希望無休止的點擊和滑動鼠標后才能找到他們想要的產品。如果他們發現自己正將時間浪費在不必要的操作上,就會棄你而去,到你的競爭對手那里。

          這也是你想要阻止發生的事情。

          • 創建具有描述性的菜單標簽
            使用“產品”或“解決方案”之類的通用選項,無法給用戶帶來任何價值。除了用戶體驗不佳,這樣的標簽也不利于你網站的SEO(搜索引擎排名優化)。在搜索電商品牌時,沒人會搜“產品”或“我們能做什么”。
          • 簡化導航菜單
            菜單項越少,你的潛在客戶就越容易找到他們想要的東西。這也有利于你網站對于搜索引擎排名的優化工作,因為更簡單的菜單,會將你主頁的頁面權威度(Page Authority,該指標由Moz軟件公司開發出,用來預測單個頁面在搜索引擎中排名的打分系統,分數為0-100。單個頁面所獲分數越高,則表示有越高能力在搜索引擎中獲得靠前的排名)賦權給你網站中權威度稍低的頁面。
          • 讓用戶在頁面間的跳轉更方便
            添加內鏈,強化行為召喚,最重要的是,確保從你的主頁進入任意子頁面均不超過4次點擊。不管用戶處在哪個頁面,他們都需要知道自己在哪里,菜單欄或搜索欄在哪里,如何回到主頁,以及如何篩選出想要的結果,等等。

           

          2. 設計一個令人驚艷的主頁

          人們常說不能以貌取人,但我們卻一直都在這么做。在電商的世界中,你的主頁就是顏值。

          研究表明,只需0.05秒,一個用戶就能判斷出你的網站是否能夠滿足他們的需求。而且,如果你不能讓他們相信你的網站是可靠的、安全的或足夠有價值的,他們就會在眨眼之間拋棄你的網站。

          那么,一個令人驚艷的主頁包含哪些要素呢?

          • 一個可靠的產品價值定義,而非只是一句簡單的口號。
            它可以向用戶表明選擇你而非你的對手的主要原因。它由強有力的標題、子標題、功能列表和視覺要素組成。它傳達了你的品牌優勢,展示了用戶將得到的收獲,且簡潔易懂。
          • 展示你的可信度。
            在主頁底部展示用戶評價、合作伙伴、核心產品的特點和優勢,或者一些動向。
          • 網站頁腳應是一個可以讓用戶找到所有你最重要網頁頁面的地方。
            請始終保持鏈接到公司信息頁、用戶幫助頁、社交媒體帳戶頁、聯系方式和社交媒體詳細信息,以及核心產品和其余產品種類。
          • 讓這一切鏈接通暢無阻。
            不論用戶是想購買產品還是只想了解更多,他們都會想要和你進行直接交流。這也就是為什么你需要加一個聊天機器人、電子郵件地址、點擊呼叫按鈕和社交媒體鏈接,以便于這些潛在客戶找到你。

           

          3. 讓產品詳情頁更易轉化

          主頁是用來吸引用戶并與他們建立關系的。但當你想把一位訪客變成付費用戶時,體現產品詳情頁重要價值的時刻就到了。它們需要為用戶深度展示你的產品,激發他們的興趣,并讓他們產生點擊“立即購買”按鈕的欲望。那么,讓我們來一起看看產品詳情頁中最重要的元素都有哪些吧。

          • 產品圖片
            有的時候,即便是像“光線不好”這樣的細微因素也會影響人們對你照片的感覺,并導致他們離開你的網站。確保你的圖片和網站的色調很好地融合在一起,并保持合理。你拍攝的產品圖片應增強你的品牌透明度和信任度,因此展示“正在使用中”的產品是個好主意。不管你賣的是衣服還是健身器材,你的用戶都希望可以輕松想象他們使用產品的樣子。
          • 產品信息
            告訴用戶關于產品他想知的一切信息,以便幫助他做出明智的決定。例如,如果要賣衣服,請列出具體的尺寸、尺碼、面料等。用簡單易懂的語言來解釋產品的特點,以及它是如何解決用戶問題的。如果產品有不同的尺寸或顏色,應明確說明。
          • 個性化的用戶體驗
            這是所有大型電商品牌都會做的事情。他們會觀察用戶的偏好和購買記錄,為他們提供一個流暢的購買旅程。例如,添加“相關產品”或“其他用戶也購買了”這樣的選項,可以幫助用戶更快地找到理想產品,并完成購買。你還應為用戶展示產品瀏覽歷史,方便他們更便捷地加入購物車。
          • 關聯銷售
            簡單地說,關聯銷售的意思就是說服用戶從你這里購買更多的商品。一旦用戶購買了某款產品,你的網站就展示與其相關的產品。舉例來說,如果一位用戶購買了無線鼠標,你也可以為其展示鼠標墊或電池產品。

           

          4. 提供常見問題頁面(FAQ)

          如果有用戶不確定是否要從你這里購買產品,那他很可能會在深思熟慮前就離開你的網站。你需要向他們證明這是一個錯誤的選擇,而這正是“常見問題“的切入點。

          創建一個頁面去回答用戶最常問的問題,會讓用戶感到高興,將他們的購買焦慮降到,也能夠更快引導他們完成購買。這就是為什么,你需要積極地構建FAQ頁面,提供可操作和有用的技巧,甚至通過截圖和圖片的形式來讓答案容易被更多人理解。

          一個可靠的FAQ頁面還可以提升SEO(搜索引擎排名優化),特別是在語音搜索SEO和本地化SEO盛行的時代。數據顯示,22%的搜索者會使用語音搜索在網上查找本地企業。因此,綜合考慮電商SEO實踐與本地化SEO服務,對你的電商網站至關重要。

          這就是FAQ頁發揮首要作用的地方。也就是說,在不損害用戶體驗的情況下,它使你有機會針對搜索時高頻出現,及具有地區特征的關鍵詞,來優化FAQ頁面的問題和答案。此外,這也有助于提升你的網站在語音搜索中的排名,因為谷歌經常使用FAQ頁面作為語音搜索結果。

           

          5. 讓訂單流程更友好

          你已經通過種種努力讓令人驚艷的主頁贏得了用戶的信任,用產品詳情頁頁的優質文案提升了他們對產品的興趣,現在是時候激發他們去完成最后的購買流程了。你千萬不能搞砸了這個關鍵環節,因為購買流程是購物流程閉環的最后一步。

          • 不要強迫用戶注冊
            不是所有人都想出現在你的收件人列表中。那么,面對這些希望不注冊就能從你這里購買的用戶時,要怎么做呢?顯然,你應該允許用戶自由選擇是否要跳過這一步。這也是你如何減少用戶放棄后的流失,并激發他們完成購買的一個方法。
          • 精簡注冊表單
            如果用戶決定注冊,那么讓他們的體驗盡可能順暢。請去掉所有無關緊要的表單字段,專注于那些對你來說真正重要的信息,例如手機號,電子郵件地址,信用卡信息以及收貨地址。要測試表單在移動終端上填寫的友好性,確保用戶可以很容易地在這些設備上填寫。
          • 運費透明
            用戶并不喜歡討人厭的“驚喜”,而運費就是其中一種。這就是為什么你需要在產品頁上突出運費選項,并且告訴用戶產品總價和運費,以及預期送達時間。
          • 建立用戶信任
            用戶早已對愈演愈烈的網絡攻擊有所防備。令人不快的購買經歷,以及他們每天看到的關于數據泄露相關的消息,都迫使他們變得小心翼翼。所以,當用戶在你網站下單之前,他們都想檢驗你到底有多值得信任。
            1)首先,你需要從HTTP切換到HTTPS(加密的網絡傳輸協議)。Google用一個綠色掛鎖和“安全”標簽,來標記帶有SSL證書的站點。而只有HTTP的站點會被標記為“不安全”。這也適用于那些擁有復雜的數據加密手段和存儲用戶數據的有效方式但仍未購買SSL證書電商網站。當用戶看到“不安全”的警告時,他們可能會離開你的網站。
            2)在購買頁面上,另一個重要元素就是安全徽章。這展示了你網站的權威性,并且告訴用戶,他們的敏感數據將會被安全地保存在你這里。
            3)最后,寫出一個詳細的隱私政策,并為它提供一個方便用戶找到的鏈接入口。

           

          總結

          對于電商而言,用戶體驗至關重要。她會為你積累忠實的老用戶,激勵新訪客轉換為付費用戶,并有助于他們向親朋好友傳播關于你的正面口碑。Jeff Bezos對此有很好的詮釋:

          “如果你的確建立了很好的體驗,用戶就會口口相傳??诒牧α渴菬o比強大的。”

          我希望以上的這些秘訣將可以成為你的堅實基礎,助力你在在電商領域取得成功。

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

          B端產品設計的6大挑戰

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          B端產品設計的6大挑戰

          翻譯: alina Wong  審校:華姐  |  UXRen翻譯組 #297 譯文

           

          在VWO工作初期,我遇到的許多情況促使我想弄明白:企業類應用(B2B,后文中統稱為B端應用)真的和消費類應用(B2C)不一樣嗎?對于設計師和設計流程來說,這種區別有多重要?

          這篇文章是我在過去幾年里的一些經驗梳理,希望能夠幫助那些想去或者已經在B端團隊工作的設計師們。

           

          什么是B端應用?

          維基百科中的定義:B端應用是一種用來滿足企業而非個人用戶需求的計算機軟件系統。

          這是一些大家可能用過或者見過的B端應用。

          在現代社會,大多數B端應用都是復雜的任務關鍵型應用,具有可拓展、分布式和模塊化等特征。B端應用對大量復雜的數據進行展示、處理和存儲,并利用這些數據實現對業務流程的支撐及其自動化。

          B端工具可以幫助構件你的產品,從而幫助企業和員工更好地完成工作。

          注:雖然B2B和B端應用在定義上略有不同,在目前的軟件生態中,這些差別幾乎無關緊要,所以本文將它們視為一類。

           

          在設計方面,B2B與B2C有什么區別?

          為B端設計并無特殊之處,優秀設計的一切準則,在這里都適用。不過,設計B2B產品和B2C產品,確實存在一些差別。

          試想一下,汽車制造vs.商用飛機制造。它們都是非凡的工業設計,把人們從A點運輸到B點。顯而易見,它們有很多的不同之處,比如使用場景、制造時間、測試&安全規范、用戶預期、購買以及所有權。所有這些不同之處都會影響設計及流程。

          同樣對于B2B應用來說,不同之處在于其獨特挑戰和應對方法。

           

          六大設計挑戰

          聲明:任何一款軟件設計都會面臨以下一些挑戰,但為B端設計時,這些挑戰更加突出。

          1. 功能復雜

          由于數據多態、可視化選項多、管理操作、多用戶協作以及和其他軟件集成等諸多因素,B2B應用的復雜度普遍高于B2C應用。為了滿足一個需求而做出的一項設計決策,往往會影響其他許多需求,而其方式有時會難以預測。一項看似簡單的功能添加,都要進行全面檢查,考慮到各種極端情況。

          Atlassian公司的Jira軟件界面:功能復雜的軟件案例。

          解決方法:

          解決復雜性的方法是什么?

          當然是簡化。不要將這誤認為是簡化界面,或者現下流行的極簡UI。這是通過恰當的規劃和流程達到的簡化。無論項目周期多么緊張,都必須在設計開始之前投入時間思考,將收集到的需求和規范進行整理。實際上,這些是設計中非常重要的工作。

          當你對設計方案確認無誤時,會直接進入Sketch、Figma或者PS階段,但這往往為時過早。抽點時間來厘清你將要設計的產品的背景和含義。通過研究和規劃,找出所有的可能性,處理所有的極端情況。確保準備萬無一失時,再進入界面設計階段。

          “如果我有60分鐘來砍斷一棵樹,我會花40分鐘先磨好斧子, 20分鐘砍倒它?!薄獊喞?林肯

          恰當的規劃和流程會在長期運行中展露優勢,帶來流暢無阻的產品體驗。

           

          2. 基于員工心理的設計

          B端用戶的心理和行為模式與B2C的用戶的截然不同。B端用戶除了要完成本職工作之外,還要兼顧在組織內的其他方面,如職業發展,職業學習,職業成功。為在職人士設計時,需要充分了解清楚他們的工作背景、流程、環境、期望、問題以及當前的解決方案。

          如何做:

          設計B端應用時,理解用戶需求非常重要。不僅要了解產品相關的需求,還要了解用戶工作和職業相關的需求。與最終用戶深入交流,研究他們的領域,嘗試用他們當前的方法,這些都非常有助于培養對用戶的同理心。

          此外,用戶太過于習慣現有的工作流程,這導致他們很難想像自己真正想要什么。他們可能會告訴你功能和選項,但卻無法提供產品創新之道。

          用戶可能認為自己想要的只是更多的功能。

          B端產品設計團隊的設計指導原則,是知道用戶目前遇到的困難是什么,然后設計出方案來解決這些困難。一旦真正理解用戶的長期目標是什么,設計師就可以有很多發揮的空間了。

          “用戶購買產品是希望變成更好的自己?!薄?JTBD理論

          與其關注用戶說什么,不如關注他們實際做什么,并以此為創新的基點,構建精益原型,并與用戶一起進行測試。

           

          3. 降低軟件切換成本

          一般來說,B端用戶習慣且滿意現有的工作流程,并沒有切換到另一種產品的需要。而且即便他們想換一個,也要層層審批。更不要說,現有數據的遷移對于公司和員工來說都是非常難的事情。所以同大眾消費者應用不同,B端應用的切換成本顯然要高得多。

          解決方法:

          說服企業換用你的軟件的兩大方法:

          1. 比競品提供更多的功能。
          2. 重新定義現有工作流程,使其用戶體驗有明顯的提升,更快,更好,更有效率。

          第二點才是設計中真正閃光之處。生產效率、工作流程是企業最關注的事情。仔細研究它們現在的方案,找到需要提升的地方。考慮如何設計出更快的工作流程,如何提升效率并降低成本。在這幾方面上創新,往往會帶來可以說服企業作出改變的解決方案。

          “衡量創新的唯一標準,就是看它是否改變了人們的行為”——Stewart Butterfield, Slack聯合創始人

          不斷尋找機會,改變傳統的方法,使之更有效,更。

           

          4.  優先增加新功能

          對于B端產品,新增功能幾乎總是比提升現有功能的體驗更優先。在產品啟動時,通常會有專門的設計沖刺階段。而一旦產品發布出去,用戶需求就開始涌入進來。付費客戶會不斷要求增加新的功能,產品團隊也制定繁忙的開發計劃。在這種情況下,設計師尤其很難說服有關人士投入時間和資源來提升設計和用戶體驗。

          避免方法:

          嘗試從這些相關人士的角度看待問題。他們經常認為,任何一段開發時間,無論是一周還是一個月,如果沒有用來開發新功能就基本等于舍棄了潛在的收入。這時,讓他們明白優化產品所帶來的好處就很重要了,要讓他們懂得優化遠比增加新功能可以帶來更多的收入。重點講講成功故事。直接和高管聊這件事,讓他們接受這種觀念。優化設計總是需要仔細分析痛點,檢驗新的想法,而這些都需要時間和創新。

          “電燈不是通過不斷優化蠟燭發明出來的。”—奧倫·哈拉里(Oren Harari)

          一旦你獲得了公司的信任,就要在有限的時間內取得一些小勝利,并且一直努力度量其影響。逐步建立起公司對設計團隊的信心,繼續嘗試更大的改進方案。

          讓產品和開發團隊成員承諾確保優秀的用戶體驗,并幫助他們主認識到這不僅僅是設計團隊的任務。

           

          5.體驗的一致性

          來源:B端用戶體驗行業報告 2017-2018

          最近,一項對3000多名B端產品設計師的調查顯示,對B端設計團隊來說,最大的挑戰是提高產品的用戶體驗一致性。不同于消費類應用,B2B產品通常有更長的產品周期且異步運行,很多時候都是分布式團隊合作設計。

          每一名設計師都面對著與其他團隊類似的問題,很容易導致產品設計不一致,比如更改設計組件、更新樣式,甚至像顏色這樣的細節都會產生不同。這些問題隨著團隊的擴大或者產品的體量增加而變得更加嚴重。

          解決方法:

          許多公司開始建立設計規范來保持產品的一致性和可拓展性。設計規范包含可復用的組件集合、清晰的設計指導,可以幫助構建任何數量的產品。設計規范通常包括:

          • 設計指南(設計原則、范例、編輯指南)
          • 視覺元素(顏色、排版層級、圖標等等)
          • UI組件(表格、按鈕、頁面樣式)
          • 使用和維護方法

          當B端設計團隊被問到是否建立了設計規范時,約55%的團隊回答是或正在創建中。這是很好的現象。需要指出的是,設計規范永遠不會100%完成,它著眼于長期,會隨著時間的推移不斷更新。

          “設計每個元素時都應該考慮到其是否易于制作和修復?!?—Leo Fender

          設計規范對于保證用戶體驗一致性具有里程碑意義。

          以下是一些B端設計規范,可以給你一些靈感:Salesforce的Lightning設計規范, Intuit的Harmony設計規范。

           

          6. 并非每一位設計師都喜歡B端產品設計

          不少設計師在做過一段時間B端應用設計后,發現它無聊單調。許多來自咨詢公司或者有B2C經驗的設計師覺得B端設計缺乏激情和多樣性。做那種酷炫的微交互和動畫(就是會發在dribbble上那種)的機會并常有。這樣,工作就變得乏味無趣,設計師們感受不到成就感,提不起勁來。

          避免方法:

          B端應用的用戶體驗旨在幫助用戶更好地完成工作。設計一個迷人的界面來吸引用戶,(盡管并無害處,卻)總是在被排在低優先級。標準化的、可預知的、所見即所得的用戶界面,最適合目標用戶。

          我們的目標是讓用戶發出“哇!”的感嘆,不是因為絢麗的界面,而是因為產品能夠幫助他地完成工作。

          組建B端應用設計團隊時,選擇目的和動機一致的設計師最為關鍵。設計師的動機,應該大量來自于解決復雜的問題,看到自己的設計如何幫助用戶完成他們的工作。

          所以,在設計師加入團隊之前,評估他們的想法并設定正確的期望是非常必要的。

           

          B端設計的一般性建議

          企業本身是在逐步發展的。B端應用不再是難用、無聊的產品,用戶期望B端用戶像消費類應用一樣有著優秀的體驗。他們喜歡漂亮的界面,不希望在使用前看說明文檔。下一代技術,例如VR、AI和聲音已經進入了我們的生活,也很快會應用到工作中。對B端應用來說,這令人興奮,而設計師所能做的,則是無限的。

          做B端應用設計的三個指導原則:

          1. 擁抱靈活性和模塊化。
            設計任何東西的時候,都要考慮到它是會發展變化。不僅僅要為當前的需求定制設計組件,更要考慮它對未來需求的適應性和可擴展性。
          2. 建立條理和流程。
            優秀的合作,定期的用戶調研,可執行的問題報告,有側重點的設計迭代,這些往往都是我們所期待的,但卻又難以每次都得以實現。最好建立一個可重復的流程,并在每一個周期都予以改進。
          3. 全局思考。
            時刻關注你的設計和添加會如何影響整個產品以及公司愿景。當你關注整體時,你設計出的產品,你所做的升級,增加的功能,都會自然而然地帶來流暢一致的用戶體驗。

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

             

          FY品牌官網/移動端視覺設計

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Fucking Young(簡稱 FY) 是一家專注于男性半球的年輕美學,我們自由使用和支配模特及藝術家合作,從而幫助自己與合作方達到合理的業務需求,建立一個擁有創造力的社區,贊助和發布這些驚艷的作品在我們的官網甚至手機產品上。

          帶來的作品有FY品牌官網與移動端設計,展示部分界面與交互動效,Gif輸出存在色差,實際情況以高保真視覺界面為準。

          FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計FY品牌官網/移動端視覺設計

          文章來源:UI中國

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

          日歷

          鏈接

          個人資料

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

          存檔

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