<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端Dashboard設計指南系列

          資深UI設計者

          Dashboard的含義

          前言

          Dashboard在B端設計的工作中是一個繞不開的話題,在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。


          什么是Dashboard?

          Dashboard的中文直譯是儀表盤,最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序,用作稱為“widget”的小型應用程序之運行基礎。



          B端常見Dashboard

          2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達,對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據,功能和控件。



          Dashboard設計案例

          以下是Dashboard常見4點設計不是很好的案例,現在帶大家一個個看下怎么才是更為合理。


          案例一:右邊Dashboard上的信息做了層級的區分,相對左邊更加直觀。


          案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。


          案例三:設計方案時沒有采用格柵格化解決適配對不齊等等問題


          案例四:dashboard模塊之間間距沒有呼吸感。



          B端Dashboard的功能分類

          設計師需要了解的功能分類

          B端設計中,設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出:“業務整體狀況如何?有哪些關鍵指標?各指標的運行情況分別如何?哪些指標出現異常?需要用戶做些什么?”。由此可知,B端Dashboard產品中大多數都以看為主,輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時,可以用戰略概覽場景提供快速入口。



          1.監控操作:

          使用戶可以一目了然地檢查其狀態,提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。


          2.分析處理:

          通過數據圖表,配合控件進行不同維度的數據分析。以數據為中心,并顯示盡可能多的相關數據視圖。


          數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度,更好分析決策。


          綜合性Dashboard,既有提供數據全局概覽可視化,同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求


          3.戰略概覽:

          在復雜的業務中,可以呈現業務分散的重點信息,用戶可以通過提供入口快速跳轉至相關模塊。



          設計前分析

          了解Dashboard的用戶

          B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應充值數據概覽:賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮,可以做到幫助設計師更清晰設計dashboard布局以及設計自查。

          因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。



          信息處理

          當弄清楚需要呈現信息內容后,需要進一步對信息做處理。從用戶的角度,舉個例子在FMS財務系統記賬中,財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求,準確且高效。具體可以從以下四個維度來做進一步處理:覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個,確定核心指標的聯系及優先級。

          合理的信息結構能夠幫助用戶高效閱讀,理解內容。如何將信息碎片有邏輯地組合在一起,合理呈現和布局,選擇使用什么結構視內容而定。


          舉個例子:

          對于管理者的角色來說使用Dashboard的訴求是:及時把控業務情況

          信息處理內容:

          1.掌握重要業務數據:經營數據,訂單數據,客戶數據;

          2.了解員工工作進度;

          3.處理急需解決的工作任務。

          對于執行者的角色來說使用Dashboard的訴求是:高效完成工作任務

          信息處理內容:

          1.急需解決的工作任務:待發貨訂單,待退款,待跟進客戶

          2.了解自己的工作進度

          3.經常使用的功能:發布商品,添加客戶,開單

          4.查看重要通知公告:公司發布的公告


          了解Dashboard的表現設計類型

          Dashboard表現結構常見兩種類型:卡片型、流程型。


          卡片型

          最常見就是卡片型。即將有相關聯的內容進行分組呈現,讓Dashboard內容歸類而不雜亂無章。


          流程型

          內容相互之間具有一定的邏輯關系,如地理位置關系、數字包含關系、對象父子關系等,這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。



          Dashboard的設計

          Dashboard的表現構成

          國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。


          1.全局導航

          在B端Dashboard中,全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。


          1.1平臺LOGO

          一般這里都會放LOGO,對于一些壁壘標準化B端服務,這里通常是給好標準規則,后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務,那么就可以直接定制設計。


          1.2功能入口導航

          就是菜單導航,在B端Dashboard一般都是在側邊。建議最多不要超過9個,遵循7±2原則。盡量將同類型歸類,好好利用下二級分類。另外入口不要太深,用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。


          在國內B端產品中,最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統

          優點:

          拓展性,一級導航的數目可以展示更多;

          層級清晰,一二三級導航都可以流暢展示;

          操作效率高,用戶在操作和瀏覽中可以快速定位和切換當前位置。

          缺點:

          視覺動線左右折回,比頂部導航更易疲勞,

          內容區的排版空間更小,需要考慮適配問題。


          在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。

          優點:

          層級拓展性強,可達四、五級導航。

          缺點:

          操作難度上升、視覺動線更復雜。



          還有一種模式:頂部模式,這種模式在國外產品中較多,在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式,在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航:saleforces、hubspot、zoho。

          優點:

          沉浸感比側邊以及混合都要強,幾乎不會對于用戶的閱讀行為有干擾,因為Web也有頂部瀏覽器菜單。

          缺點:

          一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式



          1.3快捷功能導航

          一般包含:消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角







          2.數據概覽

          在B端Dashboard中,數據概覽通常都是選取最關注的數據指標來展示,而不是全部數據;選取最關注的時間段,而非全部時間段。

          構成:數據名稱+數字

          這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點,甚至可以采用特殊的數字字體,例如DIN系列,來加強對比。



          3.待辦事項

          待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間,避免遺漏任務。

          構成:待辦事項名稱+數字+可點擊跳轉的鏈接

          待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點,數據必須是要能夠點擊的,因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來,平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



          4.常用功能

          用戶高頻操作快捷入口,點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣,需要仔細反復斟酌是否是用戶需要的高頻功能。



          5.任務進展

          用戶當前最關心的任務,常用進度條或者時間軸的形式表示。



          6.平臺推送

          平臺用來觸達企業的信息,一般有產品更新動態,學習培訓,客服,廣告推送,活動消息(這個一般比較常出現在平臺類的b端產品中)



          7.卡片式數據圖表

          卡片式數據圖表可以拆分成圖表+輔助兩種組成部分


          7.1圖表

          B端設計師需要準確通過圖表來表達出用戶需要的維度信息。

          7.1.1折線圖

          隨時間(連續內容)而變化的連續數據,適合表現趨勢。Y 軸刻度值選擇要合理,以數據波動要最大化的顯示


          7.1.2面積圖

          面積圖和折線圖比較類似,針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個,有2個數據類型時,注意調整面積區域的透明度以及色系保持統一



          7.1.3柱狀圖

          通常用來統計累積疊加數據,數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴謹,太活潑。最多使用兩種顏色,一種默認,一種hover或tap,保持界面統一性



          7.1.4扇形圖

          有共同的上一級層級作為統計總合,數據之間平級且有占比。數據必須是正整數,至少兩個以上數據,且用不同顏色表示




          7.1.5環形圖

          與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗,控制好留白呼吸感




          以上是常用的圖形圖表,絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習

          EChart:

          https://echarts.apache.org/examples/zh/index.html

          AntV:

          https://antv.gitee.io/zh](https://antv.gitee.io/zh




          7.2輔助元素

          卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成:標題、軸、提示信息、標簽、氣泡信息、功能(篩選、導出、保存)。當然在實際設計中,會根據場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達成目標,在最少的時間內獲取更多的信息。



          7.2.1標題

          標題是區分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復,簡潔概括。



          7.2.2軸

          軸上最重要的內容就是單位,將每個數據在同一軸上都是維持同種基準。便于進行數據測量。



          7.2.2.1軸的細節

          現在知道了軸由哪幾部分構成,那么接著了解細節



          軸線

          軸線細節一般只考慮是否顯示,在有網格線的情況下,可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏,突出視覺重點,減少不必要的線條。


          軸刻度

          軸刻度是軸線上的間距不宜過密,確保信息可讀性以及呼吸感,根據 7±2 法則,在可見的卡片內盡量保持這個規則,可以利用抽樣顯示的手段來優化軸標簽重疊的問題,這種一般是在連續性內容上可以使用。若軸上單位信息確實過多,雖然是連續性內容例如展示30天單位,由于本身卡片信息不是過于最重要層級,設計在相對狹小空間尺寸中,那么建議考慮在軸線上安排滾動條,并將重看單位放置前位。設計特別注意點,將滾動條設計作為輔助元素不宜搶視覺。


          網格線

          網格線是用來輔助圖表數據直觀對比的,增加數據更快速的閱讀性。舉個例子:數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。




          7.2.3提示信息

          以對照的方式來理解可視化對象的項目歸類信息,總結圖形形狀和文本組成內容。



          7.2.4標簽

          在圖表中,標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。



          7.2.5氣泡信息

          當標簽默認不顯示,氣泡信息一般是鼠標tap或者hover時,顯示該位置的數據。在簡潔的頁面中,也能讓用戶直觀看到信息對應數據結果



          7.2.6功能

          這個模塊涉及的內容偏多,在表單頁面更常出現,以后有機會可以單獨說。一般常用功能如篩選、導出、保存。可以讓用戶控制和友好的體驗



          確定B端產品的設計風格

          首先tob的產品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息,還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業產品特性。那么關鍵詞:服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。



          色彩

          常說色彩是一種情緒版,在Dashboard設計中,色彩也是映射關鍵詞的非常重要一個環節



          字體

          B端產品一般都是以數據為主要信息源,針對一些關鍵信息指標時,可以采用特殊的數字字體。由于本身數字字體包內存不大,所以也方便調用。例如DIN系列等等



          設計稿尺寸

          本篇內容都是針對pc端內容,具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計,但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。



          設計原則

          上面的內容更多是闡述每個部分的內容,實際工作中設計Dashboard時不一定按照那個順序進行,因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景,確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設計執行。


          同時在設計執行上也要特別注意幾個點:

          1.突出核心指標(7個左右)

          2.信息層級區分

          3.減少用戶選擇,盡可能默認給到用戶需要的數據維度

          4.界面簡潔嚴謹

          5.避免過多顏色與不統一

          6.數據維度正確圖表選擇



          設計的注意事項以及建議

          1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建,以便與研發團隊一起為業務助力。更好更快的發展。

          2.在tob的dashboard設計中,設計師要特別注意數據表現的落地效果

          3.當dashboard只在設計層面改版,并且改版內容過大時,推薦保留舊版入口,提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計,以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章:《B端必看的引導設計(一)》

          4.允許用戶定制和共享dashboard,雖然不適用于所有的B端產品,如果類似于團隊協作中多種角色共用一套的dashboard平臺,可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率

          5.dashboard關鍵信息數據盡量設計在一屏以內,作為數據可視化,內容快速瀏覽獲知全局,并且完成任務是比較重要的。

          6. 突出統計數據的變化并對異常情況作出反應

          7.數字設置不一定要設置為右對齊,但是單位是金額,那么要將金額設置為右對齊,為了使用用戶識別方便,快速比較。

          8.設計完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準確的地方。



          最后

          為什么b端設計師要懂得Dashboard,在很多b端業務場景中,有個特點,設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關緊要的指標,這就是失去了Dashboard存在的意義。另一方面在b端產品中,Dashboard往往是以首頁的形式出現的,是非常重要的。


          文章來源:站酷   作者:一九互七

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

          深度解析產品從0到1設計思路

          資深UI設計者

          前言


          相信每個用戶體驗設計師都非常期望自己全程參與從0-1的產品設計,這樣可以更有參與感,掌握業務的整個上下文,非常鍛煉個人的設計能力,還可以提升對產品的sence。



          當然實際工作中不是每個人都有這樣的機會,也可能是某個已經非常成熟的產品做一些持續優化迭代的新需求。在不了解業務全貌的情況下就直接開始設計,其實非常被動。這個時候就需要花更多的efforts去熟悉業務背景、使用場景、操作流程、常用術語和設計規范等等。 一般面試中專業面試官都會讓你描述一下你之前的項目案例,如果一直做的都是一些非常零碎沒有體系的優化迭代需求,被cue到這個問題的時候就會一臉蒙蔽不知怎么回答。如果你正在迷?;蛘呦M麑で蟠鸢福M铱梢詭偷侥恪?


          今天主要分享下——用戶體驗設計師面對下面不同階段的設計思路:

          1 . 立項前探索期的發散收斂(由于篇幅有限,本文重點介紹這部分)

          2. 交付階段的水深火熱(下期見~)

          3. 上線后的迭代優化(下期見~)


          一、立項前的探索期


          如果你現在處于產品意識形態還不清晰,立項前的摸索階段,就需要重點關注下Inception這個階段作為用戶體驗設計師所需要做那些事情,簡單來說就是5W(why?who?when?where?what?)+2H(how?how much?)。在項目啟動前期,通常需要制定一個簡單有效的行管計劃。不管你的角色是PM、BA還是UX,都需要迅速、主動的去推動整個項目的進展。在競爭激烈千變萬化的時代,行動和計劃都必須快速而敏捷,否則就會被人搶先一步措失良機。




          有人就會問,你只是一個設計師,干嘛要做產品/BA的事情?有他們在你干嘛要搶他們飯碗啊?我覺得,如果你的能力允許的話,和產品/BA一起合作會達到1+1>2的結果。不要過分強調角色和分工,最主要的結果。最理想的工作模式其實就是這個項目中的每個角色都可以講清楚正在做的事情,更可能多的理解業務和上下文。


          言歸正傳,在項目初期,沒有任何輸入的情況下,只有模糊且抽象的idea,應該怎么推動?


          1.1 市場分析

          首先要了解行業背景,站在宏觀角度上來思考,對整個行業有一個大致的、粗顆粒度的判斷。其次分析產品所在行業的市場現狀,判斷目前所在的階段和規模。最后分析產品可能的商業模式以及競爭對手對商業模式。在了解產品所在的市場業現狀、行業趨勢這個大背景后,可以通過整個大環境判斷評估未來發展規律和洞察機會點。


          在討論策略走向時,最重要的無非就是找出我們自己產品的競爭優勢。這里的優勢是指別的產品無法代替或模仿并可以靈活運用的資源。為了創造競爭優勢,我們必須思考要提供什么樣的服務,用什么方法提供策略方向。


          市場分析是對行業供需變化對各種因素及其動態和趨勢對分析,主要用途有3點:

          · 在紛雜的行業中找到和合適的發力點;

          · 在眾多競爭對手中找到普遍發展規律和優劣勢;

          · 建立商業模型,形成可持續的產業。


           市場分析常用的方法:

          · PEST(宏觀經濟法:基于公司戰略的眼光來分析企業外部宏觀環境)



          · 波特五力模型(競爭態勢分析:于競爭戰略的分析,可以有效的分析客戶的競爭環境)



          · SWOT分析(優劣勢分析:幫助企業找出自身優勢,整合資源,從而形成企業的戰略規劃)



          1.2 競品分析

          了解了行業的大背景后,就要開始有針對性的挑選幾個在市場上非常成功有競爭力的產品去研究分析,學習他們的優點以及思考背后的原因,最后可以作為非常有說服力的設計依據或者啟發靈感。



          競品分析的主要目的是通過研究競品,找到適合自己產品可執行的方向。

          一般都分析競品的哪些地方呢?通常分析下面幾點:

          · 產品主要目的是什么?(一般講項目背景、大環境)

          · 產品定位是什么?(產品屬性)

          · 特色是什么?(優勢、值得借鑒或深受啟發的地方)

          · 主要用途有哪些?(核心功能都及應用場景)

          · 產品設計風格是什么?


          競品分析最常用的方法是用戶體驗五要素,將產品設計的過程抽象分為5個層次,將復雜的事物抽象成分層的模型,可以更直觀、清晰的獲取其內在邏輯。



          具體的競品分析案例可以去我之前做的項目里面去看,采用用戶體驗五要素的方法來分析的。



          1.3 用戶調研


          用戶調研目的是用于決策參考和創意啟發,是周期性的一個活動,應該貫穿于整個設計過程,根據用戶調研結果提出假設并上線驗證。進行任何的產品設計,都應該是有數據支持、有理論依據、有正確的邏輯推導的,絕不該是憑空瞎想,或者拍大腿武斷的做決定。帶著問題去思考,通過調研驗證產品的合理并給出最優方案這也是用戶體驗設計師存在的價值和意義所在。


          · 定性研究

          定性研究是探索性的研究,致力于定性地確定用戶需求,它有助于設計師在設計初期構建想法,然后再用定量方法完善和測試。主要方法有:用戶訪談(最常用)、情境訪談和卡片分類法(最簡單)。


          在產品探索階段,還沒有用戶找誰調研呢?有個好辦法就是分析完競品后,我們可以篩選使用這些競品的重度使用者或者發燒友去進行訪談,這樣能得到最精準最有價值的用戶信息。用戶訪談是真正了解用戶核心需求的一種方法,通過引導用戶聊天去收取用戶的反饋和挖掘用戶的核心需求以及潛在訴求。


          當然這是針對市面上已有且業界有很成功的案例而言,對于沒有直接競品的產品,訪談的用戶可以為這個項目的發起人或者直接干系人、利益相關者。用戶訪談之前,需要有一個明確的計劃和大綱,把需要訪談的關鍵問題都羅列出來,可以細化到:訪談時間、地點和參與訪談人員分工背景介紹、受訪者的基本信息、使用場景、操作習慣、偏好、痛點和建議。通常訪談3-5位典型用戶,每位可以代表一類。  用戶訪談的之前一定要想清楚幾個問題:

          · 用戶想做什么?(使用目標)

          · 用戶的目標是什么?(拆分具體的ac)

          · 用戶想達到什么目的?(渴望的訴求)


          文章來源:站酷   作者:BridgeQ

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



          社區團購的優點和缺點

          資深UI設計者

          編輯導語:社區團購作為2020年的一大風口,雖然伴隨其火熱程度,社區團購基本上是人盡皆知,但是真正深入了解這個行業的人還是占少數的。本文作者從團長、產業模式和業務競爭關系三個方面出發,對社區團購的優缺點展開了分析討論,與大家分享。

          整個大零售產業至今沒有誰站出來,對于社區團購市場的影響力和跨界沖擊力做過很系統的闡述。少數幾個產業知名人物給出過零散的意見,步步高超市的王填在兩會提案中直接表態,有關部門必須嚴格監管社區團購的擴張,嚴格落實市場總局“九不得”規定,禁止社區團購互聯網大公司通過價格手段傾銷。

          當然,步步高自己一年前就在長沙做著社區團購。名創優品的葉國富說社區團購再干一兩年的話,500平方以上的超市基本沒戲了。盒馬的侯毅說社區團購是電商真正意義上,可以讓全品類進入了中國所有地方,尤其是下沉市場。但是目前社區團購的交易形態和業務模式還很早期,整個賽道的模式還有很長的演變可能性。

          整個賽道少數幾個站出來發言的玩家,基本上都對社區團購的存在,以及三大互聯網公司過去半年高舉高打的重視,來自傳統零售的防御心尤其重。

          不過,按照此前相關部門監管互聯網新業務的慣例來看,只要一個創新消費互聯網業務的最終價值倒向于消費者,而且能夠優化原來賽道的產業效率,監管在逐步觀測和意見調整的總體態勢,一向都是開放和支持的。

          基于實體店業務的傳統零售行業,對于社區團購的防御心應該是遠超過此前傳統電商和數字化零售跨界物種。社區團購提供批發式零售的家庭購買的成本和效率優化,顯而易見的具備模式優勢,代表著家庭場景購買的更先進生產力。

          家庭購買一直是此前電商并未完全占領,或是僅有部分占領的一塊最大零售陣地。就像以3C&家電起家的京東,會在財報分析師會議上,明確喊出京東未來第一品類是快消品——通過電商解決方案滿足家庭購買一站式需求。

          家庭購買的場景優質性和解決難點在于,它是需求和供給在履約層面最具確定性的零售流通方案。簡單的說,它只是庫存和房屋之間的確定性流通關系。

          我們通常以為,一個人去沃爾瑪為家里采買日常即時用品,是他自己和沃爾瑪的買賣關系。其實對于沃爾瑪來說,它的門店周邊三公里內所有房屋里住著哪個人,其實沒有差別意義。張三搬出去李四住進來,沃爾瑪的來客邏輯都是一樣的,這也是傳統零售極度講究門店選址的原因(除了美國Costco)。如果新搬來的李四不去沃爾瑪,不是門店和李四房子的流通關系有變,而是李四認為沃爾瑪在三公里覆蓋圈的有效條件下,都不能替代沃爾瑪逐步喪失家庭購買的一站式價值(假如沃爾瑪確實不能滿足的話)。

          社區團購的出現,帶來門店和房屋之間的確定流通關系,升級為門店和社區(多個房屋)的確定關系。購買場景的量變擴充,帶來這種確定關系的規?;?,很好的優化了單一訂單(無論是到店、到家、電商)的成本與效率。自此,多個有利條件開始匯集到社區團購業務場景:家庭購買的商品普遍類同確保單品量相對集中、家庭品類價格空間微薄下還能創造價格優勢、社區級集約化履約的成本優勢、預售制集單的備貨確定性(完全平臺化作業的話,甚至可以做到零庫存)等。

          社區團購屬于真正意義上第一次,實現了業務模式的先進性、平臺組織機制先進性、前端體驗價格的先進性,三位一體的同步進行。美團優選這種完全平臺化組織業務鏈路的社區團購,甚至能在零庫存的條件下,短時間內快速提高訂單量規模。這讓美團優選的主要平臺任務,就是擴展入駐城市。而據我們36氪-未來消費 通過各種信息來源了解到的是,美團優選目前確實是訂單量整體相對最高的社區團購平臺。

          與之相比,社區團購帶來直接競爭關系的業務,應該主要發生在跨界但有交叉的其他提供購買的零售流通渠道。這種跨界又交叉的跨界關系,類似便利店的主要競爭者,其實發生在門店周邊跨界的餐飲、烘培、茶飲等業態。彼此業態模式很不相同,但都是提供社區級的家庭日常購買。

          01 團長的鏈路樞紐價值

          社區團購的模式創新很大一部分確實在團長,脫離了團長的社區團購,很容易和社區門店自提業務混淆,即很類似此前破產的合肥呆蘿卜做的社區店隔日自提業務。有了團長,平臺才徹底放開手腳,專注做好平臺特有且主導整條鏈路議價權的幾個事情。

          第一,不用直面終端用戶的營銷拉新和履約服務,全部交給團長。但是,2020年美團,滴滴,拼多多三大互聯網巨頭大規模砸錢投入,打破了此前由興盛優選這種小公司創新才有的行業默契,直接把補貼給到終端用戶。目的是短期內快速結束這個賽道的競爭和地盤劃分。總的來說,社區團購搶不了小菜販的賣菜生意,但是確實很傷興盛優選的心,也很影響社區超市、百果園、錢大媽這些渠道商的業務。

          第二,平臺可以專注打造一套以團長為交互節點,以平臺-團長-終端為交互關系(類似傳統零售的經銷商-小店-終端消費者),以社區級為履約交付單位,形成一套基于社區級場景的家庭日常購買生意。這樣,平臺就可以像一個傳統零售的批發經銷商,專注做好三個事情:小店拓展、品牌貨源、供應鏈物流。

          第三,簡單地說,就是平臺和團長,分工程度變深,彼此有限的資源和精力,更好的專注一個業務節點,做出更深度的能力。有了深度能力,效率自然就會變得更高。有了這些綜合特性的驅動,分工優化彼此的效率,這個生意的魅力就形成:有了互聯網的信息流效率及規?;?,但是走的又是傳統批發生意的成熟商流模式。

          第四,社區團購主打的是家庭日常穩固購買,因為家庭購買與個人購買的最大區別,就是家庭購買是根據物流地址決定供給流通。簡單地說,個人購買:服飾,手機,美妝,餐飲,一個人去全國任何地方的體驗,其實都是一樣。但是家庭購買:快銷、食品、糧油、生鮮、清潔洗護,那就必須是在家里用。家庭購買的需求起點,也是圍繞著家庭和住址發起。

          平臺的供給,自然圍繞著家庭設計整個供給路線和效率公式。這也是為什么,傳統零售辣么講究開店選址的重要性。

          社區團購更升級三步:

          1. 它不自營,大量已有的社區店,就是經過驗證的優質選址店;
          2. 大量社區店及店主,已經與社區建立一套穩固可信賴的交易和信任關系。這些店主就是最好的團長(興盛優選和美團優選都是這么認為);
          3. 家庭購買非常統一,家家使用的快消糧油清潔商品都差不多,家庭購買的確定性太高:付錢的是個人,使用的是家庭,位置都在社區。零售業講究規模出效率,社區天然聚集了很多家庭湊成規模,因此社區的購買,最好統一集中購買。零售生意非常高級的流通形態:社區場景的家庭購買,統一的團購下單和履約。簡稱:社區團購。

          第五,這種生意集中下來,就成為零售業很理想的一種生意:批發式零售,美國Costco就是批發零售的集大成者。這種生意還有一個優勢,就是所有的競爭力全在商品和價格。因為批發式零售,價格即使沒有補貼,也比一般零售渠道便宜。

          只要再做到東西品質很好,那簡直就是零售最硬朗的實力:好貨低價。做到這種程度的零售業,競爭力是空前的,互聯網都打不贏的優質商業模式。美國Costco在全球第一消費互聯網大國的中國開店,生意比所有線下店和電商都好,人家就沒有互聯網。

          02 社區團購模式還在早期

          社區團購的問題也有,而且目前暫時還不好輕易解決,導致這個生意的現狀和服務力,并沒有發展的太成熟,業務鏈路上還有很多服務細節、品控和效率優化存在問題。

          第一,暫時無法解決出貨規模和品類豐富的函數關系。即規模是社區團購這種批發式零售的獨特特性,但是一旦單品和品類走了豐富路線,鐵定會稀釋單一商品的規模。沒有規模,就沒有價格優勢,就會反過來反噬社區團購這個商業模式的很有優勢。

          第二,暫時無法提供完整的一整套解決方案,這點生鮮最為典型。因為一盤菜的烹飪,中餐需要至少5-15種主料、輔料、配料、佐料。導致一盤菜的烹制,傳統生鮮提供的購買體驗,都是少量而多種的購買。這種購買是菜市場這種低門檻做生意,分散化的攤位設置又豐富配置菜品的線下場景強項,超市和電商直到今天都搞不贏菜市場。社區團購沒那么大本事,搶不了小菜飯的生意。擔心會搶小菜飯生意的人,骨子里還是看不起農民工。生鮮電商和社區團購,目前的產業能力還要大大的進化。

          第三,對于三巨頭、京東、阿里來說,各家企業也很清楚,生鮮只是當前快速積聚訂單的起步手段。社區團購不能等于生鮮零售,這是大家心里揣著明白嘴里不說的共識。但是社區團購如果專注賣家庭高易耗的品牌快消品,它的價值也不高,利潤率也很低。這里面的未來方向之一,還是要加強自建供應鏈,堅持走自有商品,或是品牌專供的路子。

          第四,社區團購目前還有一個具備但沒有很強發揮的模式能力,就是深入到村鎮一級做下沉最徹底的團購。城市小區是社區,村鎮也是社區。目前中國電商最下沉的地方,還只是到鄉鎮,還不能到鄉鎮下面的村子。因為電商一個訂單一個物流包裹的履約模式,絕對玩不起深入到廣袤分散,訂單又不是很集中的村子??墒寝r村家庭除了極端貧困戶,哪家不是完整意義上的家庭購買需求?社區團購的價值,在于它首次用最效率和經濟的方案,讓人看到了信心,可以做農村家庭一站式購買的渠道商,而且還可以深入到村落這個最下沉最末端單位。

          03 跨界影響力的進攻與防御

          生鮮前置倉、到家即時零售、到店購物、社區自提……這些圍繞著社區場景做的家庭購買,社區團購與他們在模式也不具有可比性,但是業務方面未來的競爭關系會越來越強。

          第一,前置倉和社區團購,模式很不一樣,但是在生鮮品類、家庭客群單位、社區場景的履約線路設計三個方面,高度重合,導致雙方在城市社區家庭的生鮮購買,確實存在直接的競爭關系。

          2020年社區團購主要在二、三線城市作戰,現在開始往北上廣深一線城市拓展(上海還是最少)。這些一線城市都是前置倉重點布局的城市,兩者的訂單競爭短期內會有一定的直接關系。美團同時押寶了前置倉的美團買菜,社區團購的美團優選。而且美團的社區團購走的是更徹底的平臺化模式,整個庫存管理和拓城速度都做的很不錯,外界確實對美團未來發展很看好。

          反過來說,今天阿里社區團購,即盒馬集市整合了零售通小店資源,反而堅持在供應鏈和物流方面走類自營的強控模式。加上盒馬本身也在自營模式下做了社區到店和即時到家零售,以及還有手機淘寶流量扶持,阿里生態的潛在可用資源。預計美團和阿里,加上京東(如果京喜也有一個亮點模式),三家在社區級零售的競爭,在社區團購賽道的競爭,未來會非常好看。

          第二,前置倉和社區團購的競爭力對比,兩者現在有差異,但是對比的不公平。

          因為前置倉所有能力都是圍繞著品類——生鮮展開的。社區團購的所有能力是圍繞著鏈路——團長展開的。當前階段社區團購有了大投入而很火爆,才顯得盤子很大。就好比自己家里今天結婚辦喜事吃得好,就說自己可以過上一貫大魚大肉的好生活。

          因此,兩者不在一個投入高潮期,不能代表社區團購可以替代前置倉,或是優越于前置倉的生鮮流通的模式,或是綜合能力兩者孰強孰弱(效率方面,目前來看前置倉的成本履約偏貴,但是綜合體驗更好)。

          第三,即時到家零售背后,還有一個類似的平臺化模式——同城零售。

          他們這個玩家是用電商平臺的規模效應,也在做著前置倉的生鮮生意,而且旱澇保收的只賺傭金。相比自營類且專注生鮮的前置倉,對于商品的操盤風險承擔的更少一些。當然,這種平臺天然要龐大,目前市面上也只有京東到家、美團(又有美團)、餓了么、天貓超市淘鮮達、淘寶買菜。

          第四,即時零售天然是個大生意,也就是說,誰做前置倉,哪怕是創業公司,一開始就是正規大公司的規模來建構生意。

          同城零售的規模更大,剛才提到,市面上就幾家在玩。但是社區團購可以很小,只要團長搞定一個社區,再搞定貨源,就能玩起社區團購生意。還是那句話,團長是社區團購生意的關鍵,而團長又是一個門檻極低且個體化的角色。

          這也是為什么,武漢疫情封城期間,大量有貨源的小菜販,搞定一兩個社區的物業公司或居委會,就能在各個小區玩起社區團購。畢竟,要說社區團購還需要什么互聯網工具,微信群聊+微信支付,老人小孩都會用。

          但是,團長既不屬于平臺的員工,也與平臺沒有強綁定的合作關系,導致團長的能力建設與長期成長都很有風險,團長的流動性(流失率)也非常頻繁。團長角色的價值定義,興盛優選此前并沒有為行業提供一個成熟版本,這是擺在所有社區團購玩家面前的一個很復雜的問題。

          文章來源:人人都是產品經理   作者:aria在這里

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


          新項目設計時一定會遇到的5個盲區

          資深UI設計者

          最近負責的新項目快上線了(感覺我好像一直在做 0-1),給大家總結了5個一定會遇到的新項目盲區及最新的解法,希望能幫助大家在交付開發前就順利完成設計輸出。


          關于蘋果賬戶登錄的硬性規定

          2020 年 4 月后,我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕,但關于這個按鈕的設計規范其實有比較硬性的規定,沒有注意的話到了開發還原的時候就容易踩坑。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”,手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的,其中就包含將其弱化為一個圓形的圖標按鈕,只是圖標與圓形按鈕的大小比例是官方固定的比例(這個大家直接下載官方提供的圖標,它是自帶留白的區域的,保持圖標與高寬一致就符合要求了)。

          而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存,主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          這個時候需要特別注意的是,蘋果官方對于這種大按鈕的限制主要在于 3 個部分:

          • 按鈕的高度需要等于圖標的寬高(圖標官方有提供下載,已經是自帶留白區域的)
          • 按鈕的高度需要與中間的文案成一定比例(字體是按鈕高度的 43%,比如 44 的高度配 19 的字)
          • 圖標離左側最小間距需要超過按鈕高度的 10%

          剩下的按鈕樣式,比如顏色和描邊也非常有限,只可以使用白色填充黑色描邊與純黑色底這 2 種。

          關于安卓啟動圖標可帶動效了

          還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的,基本就是尺寸換換。這次輸出啟動圖標,被安卓的開發大大告知,安卓可以出這種帶動效效果的啟動圖標了,它的原理和效果,如下圖:

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          實現這個效果的設計配合輸出也很簡單,只需要整理一下的具體啟動圖標輸出就可以:

          1. 啟動圖標(前景,不帶背景的)-108dp(324px)

          當然以上僅針對純色背景,可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下:

          • 啟動圖標(前景,不帶背景的)-108dp(324px)
          • 啟動圖標(背景)-108dp(324px)

          關于全屏切圖的壓縮限制

          這次新項目又遇到了開發中改稿的問題,大部分都因為全屏的背景圖切圖大小問題。

          個別全屏視覺的界面,比如閃屏、登錄頁、音視頻語音等等,我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。

          但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右,就算把壓縮率提到 80%+(市面上大部分壓縮軟件的壓縮率都很有限,比如大家常用的 tinypng、pp 鴨等),就算你重復壓縮,也有至少 200 多 KB,遠遠超出開發 100k 以內的切圖大小限制。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          所以不得不要求我們在輸出格式的時候拋棄 png 格式,啟用 JPG。

          不過實際設計時候我們可能仍然會遇到不能用 JPG,必須用 PNG 格式的情況(透明度蒙層),那么建議大家可以嘗試以下 2 個小技巧:

          • 盡量使用純色背景設計,這樣背景圖可以用代碼來寫,主體切圖大小可以想對控制小一些。
          • 如果還是需要使用花色背景,建議可以嘗試高斯模糊的花色背景,這樣開發可以直接用 1 倍圖進行拉伸,也可以有效控制切圖大小。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          最后不想屈服于樣式限制的鐵汁,一定記得提前輸出格式大小康康會不會超標嚴重(盡量控制在 100k 以內),不然無法落地再好看也沒有用咯。

          關于動效到底導出什么格式不坑爹

          目前關于移動端界面里個別小動效的導出比較主流的幾種格式是:Gif、逐幀圖、Lottie(Jason)、Webp、Apng。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了,這里稍微科普 2 個陌生一點的格式:

          • Apng:一個 PNG 格式的位圖動畫格式圖片
          • Webp:2010 年 Google 推出的全部通吃的圖片格式(可代替 Jpg、gif、png)

          目前我覺得性價比最高的就是 webp,它的優勢主要在于:

          • 壓縮率極大提升,同分辨率的 webp 比 gif 要小很多
          • 支持位圖、支持支持 Alpha 透明和 24-bit 顏色數、支持 3D 翻轉(這些 GIf 和 Lottie 都有限制),也就是不會出現毛邊啦、變色一類的坑爹情況
          • iOS、安卓都支持(比如同樣高性價比的 Apng 只能用于 iOS 端)

          唯一的 2 個問題在于:

          • webp 目前只兼容 Chrome 和 Opera 瀏覽器,其它瀏覽器不支持。不過基本我們都應用于移動端應用,所以瀏覽器兼容對這個影響應該還好
          • AE、PS 等各類動效設計的軟件無法直接導出 webp 格式,需要通過插件或其他第三方軟件轉換。

          我度娘過一些導出 webp 的方式都不是很好用,問了我司的動效設計師,推薦一個比較簡單靠譜的方式分享給大家:

          1. 先從 AE 導出逐幀圖(記得需要循環的動效做好循環)

          不知道如何到逐幀圖的看這里:渲染→渲染設置→格式→選擇“PNG”序列→導出即可

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          2.下載 isparta

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式(可選)

          關于切圖標注協作方式誰家強

          設計交付的協同平臺現在市面上很多,很多大廠也有自己內部的協同平臺來承載設計交付,俺們豬廠用的叫 dbox(非常滴不好用),在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺,把交付的協同平臺都做了一番調研,這里給大家直接看表格吧。

          新項目設計時一定會遇到的5個盲區,提前替你總結好了!

          看完圖大家就會發現除了 Figma 大家的使用情況不會差很多,差的主要還是錢。總的來說的建議就是,如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。

          如果還在用 sketch 和 XD 的鐵汁,交付型的協同平臺我個人比較推薦 Zeplin,雖然有的人會說它服務器在國外很卡,我覺得其實還好吧,同時 Zeplin 近幾年還解決了 Win 系統適配的問題。

          然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的,因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺,也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件,瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能,到底是企鵝的社交基因太強大還是怎么肥四?

          文章來源:優設   作者:Nana的設計錦囊

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


          創意設計如何增加粘性?

          資深UI設計者

          要讓創意產生粘性,有效而又持久,你必須有目的性提升對用戶的吸引力。如何提升?

          「讓創意產生粘性」

          這篇文章將梳理《行為設計學中的讓創意更有粘性》中的經驗,思考設計背后的六大原則,目的是要幫你把創意變得更有“粘性”。

          這里黏性是針對創意而言的,黏性是指你的創意與觀點能讓人聽懂,能被人記住,并形成持久的影響,關注點在聽懂—記住—影響。而我們平常談到創意,想到的是創意的巧精妙。

          給設計增加粘性

          那么我將用一句話,開啟我的分享“萬物皆可設計,創意設計也不例外?!?

          所謂“黏性”,是指你的創意或觀點能夠讓人聽懂,能被人記住,并形成持久的影響(換言之,他們能夠改變受眾的思想或行為)。

          創意設計如何增加粘性?我總結了這6個方面

          黏性創意的六大原則:

          簡單(simplicity):如何才能找到觀念的根本核心?表達必須簡短且深刻。簡單=核心+精煉,找到創意的核心,并用精煉的話語將它表達出來,那么你的創意將擁有強大的影響力,舉例:王老吉涼茶廣告:怕上火,喝王老吉。

          意外(Unexpectedness):如何才能吸引聽眾注意我們的想法?必須打破人們的期待,違反直覺,利用對方的驚訝來提升警覺度和關注度,激發他人的興趣和好奇。粘性創意最忌諱的是平淡無奇,最基本的吸引力是引起別人的注意力,打破固有思維,最能抓住大家的吸引力,如海底撈各種出乎意料的個性化服務。

          具體(Concreteness):如何才能把自己的觀點表達清楚?必須借用身體行為和感官信息來加以闡釋,因為我們的大腦總是樂于記住具體的事物。實驗得出,人們更擅長于記憶具體化的詞,而不是抽象的,形成一個長期的記憶力,如:香飄飄一年賣出七億杯奶茶,連起來可繞地球兩圈。

          可信(Credibility):如何才能讓別人相信我們的創意?必須具備相應的信用背景。我們必須設法幫助他人親自證實這些構想,也就是觀念世界中的“先試再買”的行事哲學。如現在的老爸測評,先進行專業權威的測評報告,得到消費者的信任,最后進行流量轉化最后形成賣貨的電商渠道。

          情感(Emotions):如何才能讓別人關注我們的創意?必須得讓他人有所感覺。人們更有感覺的往往是人,而不是抽象的事物。很多創意都采用創意本身與情感的聯系,如互聯網大廠都在進行動物的 IP 設定,其實也是通過故事性的包裝增加與消費者情感聯系紐帶。

          故事(Stories):如何才能讓別人依照我們的創意行動?我們可以講故事。故事往往有鼓舞人的力量,我們并不需要創意來激發這些力量。我們只需要準備好生活中每天產生的好東西,通過故事的情節進行吸引粉絲,如快手、抖音很商家都會通過自己的故事情節進行吸引,樹立自己的人設形象。

          打造成功觀點的六項檢查表:簡、奇、具、信、情、事。合起來的英文首字母為(SUCCES)。

          在營銷設計中如何提升用戶感受

          以上是體驗設計學的一些理論,我們經常會在實際商業項目中思考,如何把商業目標與設計做結合?

          創意設計如何增加粘性?我總結了這6個方面

          我們進行設計時候首先應該關注三點:

          • 商業思維,你做的這個設計為公司/社會創造了什么價值。
          • 用戶思維,在做設計之前大量的學習并了解用戶環境,了解用戶場景,了解你所做的設計是不是會有技術限制。
          • 設計思維,在一個成熟的品牌和設計團隊中一定要遵循設計語言的規范、把握市場和行業的設計趨勢、并且對于你自己做的設計的結果負責。

          設計師針對這三點我們應該怎么提升思考?

          創意設計如何增加粘性?我總結了這6個方面

          1. 了解商業目標

          詢問你的產品經理或者運營,從他們那邊了解產品想要達成的商業目的是什么?

          2. 設計上的支持

          從中思考設計該如何支持商業目的,產生商業價值。

          3. 監視市場反饋

          關注目標完成后的商業價值指標,理解當初的設計思考是否吻合市場的思路。

          商業目標可能是:引起市場關注

          市場中有很多好的商業案例都在,如增加用戶(拼多多砍一刀“簡單”)、提高轉化率(網易考拉會員卡片“具體”)

          創意設計如何增加粘性?我總結了這6個方面

          提高客戶貢獻度(iCloud 升級儲存空間,多種選擇“具體”)、留住用戶(刪除軟件后哭泣的形象“情感”)

          創意設計如何增加粘性?我總結了這6個方面

          在這些營銷設計中,他們是如何使用打造成功觀點并且運用體驗設計法則,使用原則后,我們可以通過數據化的監視市場反饋上,如轉化率、點擊率、UV/PV 增長,如果你所在的公司沒有數據怎么辦,其實我們可以做問卷、電話回復、App 評價,微博/公眾號評價獲得反饋。


          文章來源:優設   作者:土撥鼠

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

          適老化設計怎么做?

          資深UI設計者

          前陣子回老家的時候,在老人家里看到這樣一個機器,這個機器的功能主要為家庭教育、視頻通話與監控等等。


          如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難,更別說老人了。



          當然了,這個機器最后只被家里的老人當成,一個只會定點報時的“擺設”。


          除了把字號放大,適老化設計還需要做什么?以下分享京東直播在適老化設計上的幾點探索。



          強化對比——看清信息


          直到近幾年才知道,家里的長輩喜歡發微信語音,其實是因為老花眼打字不方便。


          在適老化設計中,需要注意界面中的信息與背景的對比度,是否足以讓老年人清楚識別,這涉及到對色域跨度的調整。


          我們通過 H(色相)S(飽和度)B(明度)的數值來劃分色域。如下圖,在統一H值的情況下,規定了10個標準的S、B值,從而形成一個色帶。所以我們在前后景的顏色選擇上,需要滿足跨度至少為5 ,才能讓老齡用戶清晰地識別到前景信息。



          比如在京東直播的老年版界面中,不僅加深了原標準版中的淺灰色文字信息,同時對一些暗文設計也進行了調整,如搜索框暗文“點擊搜索主播名/商品”等內容,提升暗文明度以確保與其背景間的色域跨度大于5。


          所以在適老化設計中,需要讓界面中的信息與其背景間的色域跨度至少為5,才能足以讓老年人看清信息。



          傳達共識——看懂內容


          90前的人想要表示“打電話”,會用手比出6的姿勢貼在耳邊;而現在的00后,會用手掌當作手機的樣子貼在耳邊來表示…


          在讓老年人能夠看清界面中的信息之后,我們的設計還需要有更清晰的表意信息,讓他們能夠看懂。其中的關鍵在于,這些信息是否能夠“傳達共識”。


          無法傳達共識的設計,就像00后的小孩突然擺出用手掌貼在耳邊的姿勢,家里的老人看了可能也無法領會到,這表示的是“打電話”的意思。


          在設計中想要”傳達共識”,需要盡量避免圖形icon的單獨出現,用純文字或圖+文的形式表達。不過除了給圖標加上文字,其實我們在圖標本身的設計上也可以進行適當調整。



          比如同樣表達“話費充值”,是用手機還是座機,哪個更能讓那個年代的長輩理解?哪些事物是那個年代慣用的,哪些事物是在那之后才誕生的?哪些是我們日常生活中就存在的東西,哪些又是專屬于互聯網世界的產物呢?


          所以在適老化設計中,除了幫界面里的所有圖標加上文字以外,在圖標的設計上也可以結合年代、群體環境的因素,讓圖形表現的是老齡年代慣用的、日常生活中固有的內容,讓老年人也能輕松領會到,這表示的是什么。



          聯系認知——找到點擊區


          就算沒使用過手機的人,在生活中看到凸起的事物也會忍不住按一按;但如果他們看到的是一個圓圈,就不太可能有這種反應了。


          在適老化界面中,需要代入更多能夠聯系生活經驗的認知錨點,幫助老年人順利在界面中找到點擊區域。其實不妨回想一下,即使是現在熟練使用手機的我們,也是從當時iOS4的擬物化界面,開始慢慢地培養心智,才能到如今就算看到一個線框、甚至只有純文字,也能輕松分辨出哪里是可點擊的按鈕。


          而當下的老人,也正像當時一開始接觸智能手機的我們,需要在界面中找到與自己生活經驗的對照,才能利用熟悉的事物作為認知錨點,幫助自己理解聯系上一些陌生的概念。


          比如將界面中可點擊的區域強化投影或高光,幫助老人們聯系起生活中對凹凸的認知試著去點一點。除此之外,我們還需要把一些會對點擊認知產生干擾的內容進行弱化。



          比如在標準版的京東直播中,存在像紅包雨、獎券這種運營標簽,其樣式看起來與按鈕很像,但實際為不可點區域,所以在老年版界面中弱化了這些標簽,將他們與所在的列表內容作為一個整體背景,讓視覺重心聚焦在可點擊的按鈕上。


          所以在適老化設計中,除了需要對可點擊區域強化投影以聯系認知,也需要將一些不可點擊的干擾項進行弱化,保證視覺重心最終落在可點擊區域上



          行為指引——完成點擊


          美國新澤西北部一家電影院做了一個潛意識實驗:在電影中每隔5秒就插入0.03秒的字幕,寫著“吃爆米花”和“喝可樂”,雖然人的肉眼無法捕捉到0.03秒出現的事物但它們可以堆積成潛意識,隨后當天影院的可樂銷量增加15%,而爆米花則增加了58%。


          在適老化設計中,我們還可以運用潛意識作為界面中的隱形向導,幫助老年人順利完成目標行為。


          比如在按鈕的文案中包含行為動作、結果去向的內容,像“點擊領券”中的“點擊”——對當下需要完成的動作描述,“領券”——動作完成后的結果去向,讓每個一眼晃過的引導效果堆積,成為界面中的隱形向導,幫助老年人了解如何完成操作。


          像在京東直播的老年版界面中,也同樣設計了這些隱形向導。比如在列表上加入“點擊進入直播間”的按鈕,引導老年人順利了解到“我當下可以進行點擊”以及“我點擊后可以進入直播間”的信息。



          除了對按鈕文案的調整,我們還可以為一些非明確的可點擊區域加上行為指引。比如在主播力薦中,每個商品圖片都可點擊看對應的主播講解,因此為每個商品加上帶明確行為意圖的點擊按鈕,避免讓人以為這只是一些展示圖而并不知道這其實都是可以點擊的。


          所以在適老化設計中,可以在按鈕文案中加入行為動作、結果去向的內容,同時對一些非明確的可點擊區域加上行為按鈕,發揮潛意識的隱形引導作用,幫助老年人順利地完成目標行為。



          以上僅展示階段性成果,設計方式、設計理念等,我們的探索遠沒有結束,期待下一次分享中與你們的交流。


          文章來源:站酷   作者:SDL藝術實驗室

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



          如何建立價值思維?

          資深UI設計者

          用戶體驗設計就像是一場直面自我的修行,無論是從認知提升、工作能力等維度,都在時間和實踐中不斷去促進自我對事物的探索,在過程中不斷獲取對世界的感知和成就感。在學校里所接觸的關于交互設計的認知,大部分局限于產品領域與基礎交互,而后逐漸過渡到交互體驗與設計的結合并且作用于商業,成長過程中也會不斷思考,這次想聊聊設計價值,大概分為三點:價值思維、價值判斷、價值體現。

          建立價值思維

          我的設計能夠給用戶/產品產生什么價值?如何體現設計的價值?可能很多朋友也會和我一樣有這樣的疑惑,假如能夠在接觸需求后便思考該需求背后的價值,那對應的行動也會有很大差異性。

          1. 設計的困境

          可能對于大部分的設計師而言,作為主要的執行力,需要肩負起項目的責任,所以會把大部分時間都投身在項目需求和日常溝通來提升自身能力,很少有剩余時間去沉淀已做完的設計,只有在產品體驗會或者其他渠道的反饋中獲取最后的問題,久而久之就像是打補丁,既無法體現設計價值,自身能力也無法得到完整的提高。然而促使設計師進步的往往不是技能的熟練,而是對業務需求思考的廣度和深度。因此需要樹立起價值的概念,價值可以驅使行動產生改變。

          2. 價值驅使行動

          價值觀因人而異,而價值觀會影響一個人的行為引導其做出選擇,對價值的思考取決于思維上升空間有多大。因此需要有一個思維模型能夠幫助我們更好的建立起價值思維,可以幫到我們更加有邏輯的思考。相信許多朋友都聽過「Why-How-What」即黃金圈法則,個人認為可以從日常需求中幫助設計師建立起一套價值思維。黃金圈解析:

          • Why:為什么做一件事,基于什么樣的目標
          • How:怎么做,是實現目標的途徑
          • What:具體的行為

          設計師進階知識點:如何建立價值思維?

          △ 圖片來自網上

          3. 黃金圈法則實踐

          了解黃金法則后,我們看看如何把黃金圈的思維模型運用到工作中。

          假設我們接到一個「商城系統」的設計需求,可以嘗試這樣拆分:

          WHY:我為什么做

          • 商城是產品重要的盈利渠道,能夠為產品帶來核心收益
          • 設計賦能商業化,是設計的價值體現
          • 能夠幫助設計師更好理解產品的商業化結構

          關注點:站在產品角度,對產品真正的幫助和提升

          HOW:我要怎么做:

          • 梳理玩家的購物場景和細分需求
          • 整理同類競品的優缺點,挖掘機遇點
          • 明確設計目標,突出商品展示特點

          關注點:需求做的更好,超出玩家預期

          WHAT:需要做什么

          • 高效便捷的購買流程
          • 兼顧玩家的情感訴求(炫耀、儀式感)等細分場景設計

          關注點:讓玩家使用更加高效,滿足多種場景

          綜上所述,設計師處于不同的階段,所關注的價值層面對應的行動也會不同,不僅要求設計師在需求之外還需要全局思維的思考延伸,了解當前產品階段最需要的是什么,更多需要設計師自我審視,建立價值思維的思考模型,不僅僅停留在行動層的思考。

          (我為什么要做)價值觀——(我要怎么做)能力——(我要做什么)行動

          形成價值判斷

          「黃金圈」法則可以幫助我們建立起價值思維,然而每個設計師有各自的價值衡量,以下是我認為的一些價值維度:

          1. 層次與目標

          日常我們總會接受到大大小小的需求,簡單和復雜會摻雜混合,從工作角度而言需求是都要做的,但是從設計價值的角度而言,需求是有輕重緩急之分。那如何進行價值判斷呢,一般的設計需求從目標上可分為三個層次:

          • 基礎目標:滿足「可用性」
          • 體驗目標:滿足「易用性」
          • 驚喜目標:滿足前兩者基礎,讓用戶感受「愉悅感」并且超出預期

          設計師進階知識點:如何建立價值思維?

          2. 二八法則分配

          當有了一個基礎劃分后,就可以對需求進行合理評估,考慮到現實情況下通常會面臨這些情況:

          時間緊迫:日常需要大量的時間進行協作溝通和跟進

          精力有限:任務重加班多,無法長時間保持高效的工作狀態

          所以可嘗試根據二八法則對時間精力進行分配,對于一些價值較低的需求,可以和需求方充分溝通,過濾無效信息后快速處理;對于價值較高的需求,投入大量時間與精力設計與打磨。對于初中級的設計師來說,滿足「可用性」和「易用性」是仍需要多加錘煉的基礎能力,對于高級以上的設計師來說,有了一定的經驗下達成前兩者較為容易,可以把更多的時間精力投入在「愉悅感」的設計上。

          體現設計價值

          前面講了價值與判斷,但設計無論是賦能或者是驅動,還是需要明確最終目標是什么,我的理解是最終服務于產品解決問題。那如何體現設計價值就顯得尤為重要,以下簡單拋出兩點:

          1. 提升體驗和口碑

          雖然不能直接為產品帶來實際收益,但是帶來體驗提升,而口碑的增長相當于為長線運營打下基礎,也為后續進入的產品矩陣留下增長空間,例如最近大火的《天地劫》,相信后續的出品也會讓玩家更加期待。

          像這類的例子有許多,例如《王者榮耀》的公眾號還有專門的 UI 迭代日記,即便是運營多年的產品仍然在不斷的打磨和提升體驗,為產品帶來正面影響。

          設計師進階知識點:如何建立價值思維?

          △ 圖片來自王者榮耀公眾號

          2. 帶來商業利潤,促進社交、消費增長

          這類體現通常是商業化/社交相關,《陰陽師》眾所周知的抽卡系統和「畫符咒」的交互方式也帶來了大量的社交互動和用戶增長,還有《Pokémon GO》捕捉寶可夢和「投擲精靈球」,促進了玩家大量的線下的互動場景,我認為這些都是設計價值的體現。

          設計師進階知識點:如何建立價值思維?

          這些設計相對于大部分玩家是一種「隱形」的存在,不像角色、場景設計等容易被感知,對于設計的價值體現一定不只是給產品錦上添花,是能夠通過對用戶/玩家群體的理解去塑造和滿足需求。

          文章來源:優設   作者:阿澤與設計

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

          會員中心該怎么設計

          資深UI設計者

          越來越多的產品引入會員系統,如何做好一個會員系統,是當下設計師需要解答的一個命題。




          01/

          會員體系分析


          會員系統的定義:

          會員的本質是建立用戶分層,便于形成用戶的差異化營銷,通過這種差異化的營銷達到以下四種目的:

          1. 提高用戶留存率(增加用戶粘性);

          2. 提升用戶價值;

          3. 得到會費收益;

          4. 建立流量橋梁;


          用戶分層:將全體用戶細分為會員用戶和普通用戶

          目的:篩選出高價值用戶(高留存+消費力強),精細化運營

          手段:收會員費,建立用戶層之間的壁壘

          結果:用戶自發分層,愿意掏錢的那批人成為會員用戶

          原則:給會員用戶提供卓越的服務,給普通用戶提供好用的服務(反例:某網盤限速機制,約等于強賣會員,嚴重傷害普通用戶的使用體驗)


          會員機制對用戶的價值

          價格優勢:會員專享低價(電商產品有會員專享價、外賣產品有會員紅包)

          資源優勢:增值內容(影視、音樂版權)

          體驗優勢:更好的服務(更快響應、專屬客服、無廣告等)

          心理優勢:身份認同(尊貴感標識,與普通用戶形成差異。對社交、游戲尤其關鍵)



          會員機制對產品的價值

          短期價值:通過收取會員費,提高營收

          長期價值:增加用戶粘性、鞏固并提升市場占比


          會員系統如何增加用戶粘性?

          體驗角度:更好的服務、專屬福利

          心理層面:身份認同、沉沒成本(已經花了會員費,越多使用越合算,不然就虧了)





          02/

          界面拆解


          UI界面設計環節,一般的會員體系會涉及到的界面、視覺元素有:

          1. 會員觸點/前置曝光

          2. 會員中心

          3. 會員身份等級


          2.1 會員觸點/前置曝光

          所有將用戶引導至會員中心頁面的入口都可以算作會員觸點,觸點越多,用戶被引入會員中心的可能性越大。但觸點也不是越多越好,過多觸點會引起用戶反感,將觸點置于合適位置,能更自然高效地提高轉化率。


          2.1.1 個人中心:露出會員板塊,通常是視覺強調中心。

          個人中心是曝光率較高的頁面,其中整合了許多重要和必要功能入口。利用個人中心頁面,可以很好增加會員信息的曝光。該方式也是最常見且最通用的觸點形式,不局限于產品類型。


          2.1.2 內容卡點:體驗完免費部分之后,會員內容收費,觸點卡于兩者之間。

          1. 增加用戶沉沒成本:用戶已經在早期投入大量時間和精力閱讀免費內容;

          2. 利用用戶好奇心:有前文做鋪墊,用戶行至卡點處,對剩余內容的好奇遠超過一般內容;

          3. 需求明確(制造問題):用戶開會員就是為了解決剩余內容無法觀看這一具體問題,用戶總是傾向于解決問題而不是在原有基礎上提高要求。


          2.1.3 會員專區:建立專享感,將會員內容與普通內容進行區隔。

          將付費內容集中在一個區塊內,制造差異化,不論是內容質量或者商品價位,本質都是讓用戶形成會員價值很高的感覺。


          2.1.4 會員頻道

          常見于電商產品,同樣是起到區分內容,建立壁壘的作用。


          2.1.5 底部提示

          使用較為輕量的底部提示,引導用戶關注會員信息。該視覺樣式還常被用作登錄提醒。


          2.1.6 小banner

          見縫插針式的視覺提示,占用流量最大的首頁空間,此時文案的利益刺激尤其重要。


          2.1.7 會員專頁

          使用一個底部tab的權重來承載會員相關信息,可見會員體系的重要性。



          2.2 會員中心

          會員中心是展示會員權益,以吸引用戶開通會員的頁面。是用戶全面了解會員相關信息的窗口,氛圍營造、權益展示、行動點突出,是設計會員中心需要考慮的要點。


          2.2.1 會員中心的常見頁面結構

          不同產品有不同的會員中心布局,有差異性也有共性。

          氛圍感、套餐選擇(多套餐情況)、行動點、會員權益,是多數會員中心頁面共有的模塊,模塊之間位置并不固定。


          本質上越重要的模塊,應該被分配越醒目的視覺表達方式。通過調整位置、面積、視覺對比度等,都可以調整不同模塊之間的權重,達到產品想要呈現的優先級效果。



          2.2.2 會員中心_氛圍感

          打造氛圍感的方式多樣,常見的有以下幾種方式:



          2.2.3 會員中心_套餐選擇

          部分產品不存在套餐選擇,只有一種套餐,如盒馬。在用戶體系中,將用戶分為兩層,用戶會員與非用戶會員。部分產品在會員中又進一步分類,推出了多種會員套餐。

          常見套餐以時間區分,如包月會員、季度會員、包年會員、連續包年會員等。除此之外,也有以權限范圍為區分,如百度網盤的會員VIP和超級會員SVIP,超級會員享受更多特權。還有垂類會員,如視頻產品中單獨開辟出體育分類,對應設立專門的體育VIP卡。


          上方案例中的套餐選擇均以卡片的樣式展示,除了該種方式,還有可以以列表形式展示。

          列表形式的好處在于,套餐在垂直方向鋪開,延展性強,當套餐數量改變時,不會影響展示效率,而卡片式的展示形式會造成部分套餐被擠出屏幕,用戶需要左右滑動才能瀏覽全部,交互成本略高。同時,卡片式套餐需要點擊選中套餐,再點擊行動點,才能觸發支付,而列表式模型,直接點擊對應套餐項上的按鈕即可呼出支付,交互更加簡潔。


          多套餐模型下,產品往往會重點突出一到兩項套餐,從商業層面講,通常希望用戶選擇價格更高的套餐,從體驗層面講,將附加值最高的套餐用角標突出,輔助用戶決策。



          2.2.4 會員中心_行動點

          行動點是一個頁面中最醒目的元素,往往是由按鈕充當。按鈕的點擊數據也可以直接反映頁面的設計是否合理。對于會員中心頁面來說,提升關鍵性按鈕點擊,往往是改版的目標和方向。


          最常見的行動點布局方式有4種:

          1. 購買按鈕常駐于底部工具欄

          2. 購買按鈕緊鄰套餐選擇模塊,位于頁面中部

          3. 頁面同時有多個購買按鈕

          4. 界面始終存在一個購買按鈕


          符合一般操作習慣,關鍵行動點常駐于頁面底部,已經被普遍接受。


          購買按鈕緊鄰套餐選擇模塊,從操作的角度上來說,更加合理,套餐選擇完畢之后,購買按鈕含義類似“確定”,兩個步驟緊密相關,符合格式塔的遠近親疏原則。同時,頁面中心相比于頁面底部更加容易視覺聚焦,用戶能更加容易注意到。這也解釋了,為什么居中的對話框常用于警示,需要引起用戶高度關注,而底部半彈窗往往承載不那么關鍵的內容,一般承載無破壞性的操作。


          購買按鈕意味著支付入口,頭部卡片上增加支付入口,不妨通過數據觀察,測試不同位置的點擊效果如何。


          隨著頁面上劃,界面中第一個行動點(頁面中部)被推出視圖,此時底部工具欄浮出,保證頁面不管在何位置,始終可見至少一個行動點,讓用戶隨時可以進行支付。



          2.2.5 會員中心_權益

          會員權益是決定用戶是否購買會員的重要因素。有些權益相當實在,如會員折扣、專屬紅包等,而有些權益的誘惑力相對較弱,不同的權益強度決定了不同的視覺呈現方式。


          會員權益細節介紹

          會員權益從交互上,可分為兩類,可點擊和不可點擊。不可點擊的權益往往在會員中心頁面是以宮格圖標的形式呈現。而可點擊的權益,往往內容詳實,需要更多的空間來解釋和說明權益的具體內容。

          從視覺形式上,也可以分為兩類:

          1. 彈窗呈現

          2. 子頁面呈現



          2.3 會員身份等級

          除了購買會員之外,部分產品引入了“身份等級”的概念來將用戶進行分層。劃分的維度可以是用戶的活躍度、裂變能力等,可以依此,設計一系列的會員任務。會員身份等級機制利用了用戶的攀比、自我實現等心理,進一步增加用戶與產品之間的粘性。

          會員身份等級一般集中在4-7個之間,其中梯度理論上呈遞增趨勢。作為設計師,需要將低等級到高等級這種“越來越高端”的氛圍烘托出來。不同類型的產品有自己的特色和局限,金融類產品在整體視覺屬性上趨于穩定內斂,而娛樂性強的產品則在視覺上限制較少。


          隨著梯度的增加,設計難度也在增加,如何在不同等級之間拉開合適的視覺感知差距,是一個難點。如上圖中的“黑金會員”和“黑金PLUS會員”在視覺上比較雷同,差異較小。當靜態視覺發揮空間有限時,可以考慮加入動態元素,增加區分。



          徽章系統

          與會員等級的本質一樣,徽章系統將用戶分層,制造不同的用戶群,擁有更多、更高級徽章的用戶對于產品來說,自然是價值更高的用戶,這類用戶是產品需要重點關注的對象。他們是產品的深度體驗者,他們的意見反饋相比于普通用戶更加準確和反映問題。




          03/

          小結


          隨著產品本身的日漸成熟,越來越多的產品選擇加入會員體系。會員體系無論對產品的短期或者長期利益都至關重要,從短期來講,直接增加營收,從長期規劃來講,對于增加用戶粘性、提高市場份額也有著重要意義。作為設計師,如何把用戶對于會員期待的“價值感”、“尊享感”用體驗的形式呈現出來,至關重要。


          會員體系涉及到的相關設計細節很多,小到一個會員標簽,大到一級頁面,其中的設計細節更是不勝枚舉。將龐大的概念不斷拆解為一個個細小的可控的模塊,加以分析和總結,始終是沉淀設計經驗的方法之一。高大上的觀念理論,需要一個個見微知著的細節支撐。

          文章來源:站酷   作者:doo_W

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

          B 端設計稿尺寸究竟是多少?

          資深UI設計者

          設計尺寸一直都是設計師最熱衷討論的問題,討論到最后結論總是一個死板的尺寸,很少有人去講也真正明白背后的邏輯。今天的設計雜談就帶大家來了解一下,設計尺寸背后的邏輯以及設計尺寸如何去定義。希望之后在大家的交流中不要再去糾結我的設計尺寸究竟應該是多少?還是那句老話,耐心看完,你一定有所收獲~

          我先說結論,常見 B 端設計稿尺寸建議采用 1440×820,因為去除瀏覽器頂部頁簽以及地址欄高度 80px,因此高度上為 820px 而不是大家常見的 900px

          設計尺寸從何而來

          相信很多 B 端產品設計師都是從 C 端產品中轉型而來。想要搞懂設計尺寸的基本邏輯,我們先搞清楚大家熟悉 C 端產品的情況。在移動端設計尺寸上的定義,我們只需要考慮 iOS 設備與安卓設備之間分辨率的區別。而在目前,大多數移動端設計稿都是采取 iPhone 12 尺寸即:375 x 812 的分辨率

          (這里就不討論什么物理分辨率以及設計分辨率等內容)

          B 端設計稿尺寸究竟是多少? 看完這篇你就懂了!

          因為移動端也會存在多個分辨率的情況,我們針對其他不同的尺寸,通常采取簡單頁面一稿適配多端,只針對核心頁面進行多分辨率的適配。上面我們算是理解了作為移動端的分辨率的基本情況。而設計稿的尺寸是從何而來?大家想想,為什么我們在移動端設計稿的尺寸會從以前的 iPhone 8(375×667)轉移到 iPhone 12(375×812)呢?

          我個人認為會有以下幾點:

          1. 主流性

          由于 iPhone 12 類的手機尺寸占比逐年增高,早期的 iPhone 8 的分辨率已經不再合適現如今手機的屏幕尺寸。因此決定分辨率尺寸的第一個因素便是這個分辨率的市場占有率。由于手機全面屏時代的到來大多數手機的屏幕比例都演化成類 16:9 的尺寸,因此參照 iOS 的生態下,我們的設計稿就會有如此的轉變

          2. 兼容性

          作為移動端最為基準的設計尺寸,它一定要具備兼容性才能成為基準的尺寸。兼容性即能夠通過該尺寸進行向上、向下的拓展,方便在一些主要頁面中多尺寸的設計,比如:iPhone X 的尺寸,可以進行拓展成為 iPhone 8、iPhone 12 Pro Max 以及各類安卓端產品。減少設計稿因分辨率所帶來的差異性

          設備數據推導設計尺寸

          搞清楚了移動端的邏輯,我們再去思考一下桌面 WEB 端的情況呢?

          B 端設計稿尺寸究竟是多少? 看完這篇你就懂了!

          因為 B 端產品的特殊性,在互聯網中的分辨率數據只能作為一個輔助的參考(比如百度瀏覽研究院的數據),更多對于尺寸的定義還是來自你用戶使用的設備。比如我們在一個針對銷售的 CRM 系統中,銷售使用的場景有兩種:

          • 一種是銷售需要經常外出拜訪客戶,移動辦公場景為主
          • 另一種是在公司辦公,通過電話的方式對客戶進行辦公,主要是固定位置進行辦公

          首先通過用戶訪談了解到大多數銷售都是采取移動辦公的形式,因為銷售需要對不同的企業進行登門拜訪,拜訪完成會跟進一些銷售記錄。因此對于電腦分辨率會相對較小。對其分辨率的數據埋點得知,分辨率以:1440×900、1366×768 兩種為主。第二種場景下,用戶以 1920×1080 分辨率為主,主要是市面上的辦公顯示器多為 24 寸即 1920×1080然后想要去尋找作為設計稿的尺寸也與移動端一樣,需要滿足:主流性、兼容性兩種不同特性的需求。因此在我的設計稿中,會采用 1440×900 的尺寸,因為它更容易兼容且更為主流

          OK,我再舉一個反例,在我之前做過的一個線下診所系統中,通過走訪我們了解到,幾乎所有的醫生都是配備的 24 寸顯示器,分辨率也都為 1920×1080。

          因此在尺寸的選擇上就沒有必要去一味的選擇 1440 這一尺寸。

          對于瀏覽器的適配

          首先顯示器的分辨率并不能代表我們的實際設計尺寸,就像在 iPhone 的設計稿中,會有 StatusBar 的存在,會預留上半部分空間

          因為目前,大多數 B 端產品都是通過瀏覽器的方式進行呈現,大家也都知道電腦的瀏覽器中(Chrome 瀏覽器為主),還會存在頁簽高度以及當前網址、書簽欄(書簽欄大多數是隱藏的,因此不算進內),而想要真實了解設備中一屏的高度,就還需要對上面的分辨率尺寸進行處理:

          電腦分辨率 – 頁簽高度 – 網址欄 – 書簽欄 = 設計稿真實高度,即:1440×820 尺寸進行設計

          因此想要讓自己的設計稿被前端進行完整還原,就必須將瀏覽器頁面當中的很多因素考慮進去。類似于我們去設計移動端的小程序,他也會有頂部固定的區域進行展示。

          文章來源:優設   作者:CE青年

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

          有用性,可用性,實用性:為什么對設計師如此重要

          資深UI設計者

          今天,我們來談談有關使用的三個概念的含義:有用性,可用性和實用性。前兩個術語,:有用性,可用性,在用戶體驗和設計方面被廣泛使用,而第三個術語,實用性,很少被提及。然而,我們將會提到,在三個術語中,實用性可能是對設計師和企業來說最重要的一個。

          Author/Copyright holder: MsSaraKelly.


          有用性


          一個有用的產品能讓用戶完成一個任務或目標。這些任務或目標只有在一些情景中才是明確且意義重大的,其他情境中則不行。


          例如,用戶使用文字處理程序包,如微軟的Word或者LibreOffice中的Writer能夠制作文字文件,包括信件、報告、整本書等等,但任務是明確的,結果是看得到的。我能用這個工具寫信嗎? 是的,你可以。對于任何想使用文字處理程序包的人來說都可以。


          另一方面,一件藝術品可能對某個人是“有用的”,可以照亮他們的工作室,但可能對另一個人就沒用了。藝術具有主觀性,這意味著不同的人對“點亮工作室”這個任務有著不同的要求,可能需要極為不同的產品來達到這個“有用的”標準。


          然而,無論提到哪種有用的形式,重要的是有許多潛在用戶認為產品有用。(從商業角度來看,至少要有足夠的用戶才能讓產品盈利)。


          任何用戶都不可能接受沒用的東西。

          Author/Copyright holder: Alastair Cook.


          可用性


          可用性針對的是某個特定產品??捎眯哉f明產品不僅具有有用性,它還要仔細考慮產品的使用方式,以及確保用戶愉快、簡單(或盡可能簡單)且有效地使用產品。


          大衛·麥奎琳曾在《達爾文》雜志中發表文章《可用性》,里面提到;“可用性與人類行為有關。它承認人類是懶惰,情緒化的,不愿投入大量的精力做事,比如,獲得一張信用卡,他們通常更喜歡做容易的事,逃避難做的事情。”


          許多“有用的”產品并不具有可用性。想象一下,有一扇門,外面有個把手,上面寫著“只能推”。門肯定是一種有用的產品——它把里外分開,可以確保人們有效地使用空調和暖氣,還能降噪,等等……


          但是一個需要指示的門可用性有多大呢? 其實,一扇門也就只能推或者拉。從用戶的角度來看,當他們看到門時,他們應該清楚地知道需要采取什么行動——如果不能而且需要一個標志來解釋; 那么這個門的可用性太小。


          值得注意的是,對于一個產品來說,即使可用性小也沒關系,但要不具備有用性才是真的糟糕。你看當今世界上有很多帶有“推”或“拉”標志的門,這就說明了這一點。可用性較低通常只是一個小麻煩(你可能會抱怨那扇門有多不靈活,但你可能不會去修——因為付出太多回報甚微),而不會影響全局。


          然而,許多品牌(如蘋果)已經建立了整個產品線,設備比他們的競爭對手更具可用性,即使用途實際上是一樣的。例如,iPod并不是世界上第一個MP3播放器。然而,從用戶的角度來看,這是當時最好用的MP3播放器。正是良好的可用性讓iPod從一眾MP3里脫穎而出,成為世界上最暢銷、最受歡迎的播放器。

          Author/Copyright holder: Aido2002.


          實用性


          一個產品既具備有用性又具備可用性,但仍然不能被使用。設計的最終目標不是讓產品具備這兩種性能,而是讓用戶能用上這個設計。如果沒有用戶使用,這個產品就是失敗的,不管它的設計有多好——它仍然是個敗筆。


          在個人交通領域有兩個有名的案例。第一個例子可能對于大多數讀者來說非常陌生遙遠—辛克萊C5。克萊夫?辛克萊爵士(Sir Clive Sinclair)是計算機行業的一位領軍人物,他普及了計算機并使千家萬戶都用上了這款產品。他旗下的ZX Sinclair系列電腦賣出了數百萬臺,全世界的家庭里都傳出磁帶游戲的嗡嗡聲,十分快樂。


          成功后,克萊夫爵士決定公布他的酷愛的一個項目—單人電池供電的環保汽車。(盡管它在營銷文獻中被稱為“輔助踏板自行車”)??巳R夫在C5產品的投放市場時投入了數百萬英鎊。這款產品既具備有用性,也具備可用性,但遺憾的是,人們討厭它。沒有人使用C5,英國電視和媒體經常嗤之以鼻。該產品最初的產量為14000臺,結果直到公司破產前,只售出了5000臺。


          第二件事就比較新?!百惛裢笔且环N個人交通工具,可以讓用戶用兩個輪子去(幾乎)任何地方,它于2001年推出,2002年投放市場。它的發明者迪安·卡門(Dean Kamen)預測在世界各地銷售上百萬臺。事實上,在投放市場后的6年里,它的銷量還不到3萬部。該公司已經出售和轉售多次,自從它推出,雖然賽格威滿足了少數人的需求,取得了些成功。但事實卻是,人們不使用這種工具。


          為什么這兩個具備有用性和可用性的產品沒有得到使用?在Sinclair C5的案例中,產品未能滿足特定的需求。正如BBC最近提到的,如今公眾的環保意識十分強烈,Sinclair C5產品可能非常受歡迎,但在C5發布的時候,環保問題還沒有這么迫切。

          Author/Copyright holder: Aido2002.


          以賽格威為例,《連線》雜志說:“但這根本沒用: 賽格威在技術方面無人能及??上н@毫無意義?!霸摴疚茨艽_保產品在發布時通過過相關法律規定(在許多地方在公共場合使用它們不是合法的,現在仍然是不合法的)。”早期的使用者也報告說,他們因為使用賽格威電動車而遭到嘲笑,形象受到詆毀那么銷量肯定無望。


          一個成功的產品肯定要得以應用。就算生產了一個具備有用性和實用性的產品,但用戶仍可能不想使用它。


          如果要使用一個產品,它必須是有用的。但如果沒有得到使用,它就沒有意義,這意味著它永遠不會成功。一個產品也應該具備可用性,以增加使用的機會——一個產品的可用性越大,用戶用起來就越舒心,也會更容易說服別人使用它。然而,就算具備可用性和有用性,也不能保證一個設計得以使用。除了可用性和有用性之外,還有其他的考慮因素會影響產品的市場普及度。

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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