手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

暗色模式在UI設(shè)計(jì)中的優(yōu)勢與應(yīng)用

鶴鶴 系統(tǒng)UI設(shè)計(jì)文章及欣賞

隨著用戶對界面設(shè)計(jì)要求的提高,暗色模式以其減少視覺疲勞和增強(qiáng)內(nèi)容可讀性的優(yōu)勢,在UI設(shè)計(jì)中越來越受歡迎。它不僅為用戶帶來了全新的視覺體驗(yàn),也為設(shè)計(jì)師提供了創(chuàng)新的空間。
? ? 未來,暗色模式有望成為更多應(yīng)用和系統(tǒng)的標(biāo)準(zhǔn)配置,設(shè)計(jì)師們將更加重視其創(chuàng)新和優(yōu)化,以提供更優(yōu)質(zhì)的用戶體驗(yàn)。我們應(yīng)緊跟這一趨勢,探索新的色彩搭配和布局,滿足用戶的需求和偏好。
? ? 總之,暗色模式在UI設(shè)計(jì)中的應(yīng)用和優(yōu)勢已經(jīng)得到了廣泛的認(rèn)可。作為設(shè)計(jì)師,我們應(yīng)該把握這一趨勢,不斷提升自己的設(shè)計(jì)能力,為用戶創(chuàng)造更加美好的數(shù)字生活。

做好UI的卡片設(shè)計(jì),這幾步就夠啦!

鶴鶴 系統(tǒng)UI設(shè)計(jì)文章及欣賞

將現(xiàn)實(shí)中習(xí)以為常的物品轉(zhuǎn)化為卡片,通過不斷的優(yōu)化和改進(jìn),保持良好的顯示效果和可用性,能更好地和用戶產(chǎn)生共情。

醫(yī)療行業(yè)軟件UI設(shè)計(jì)的主要內(nèi)容

藍(lán)藍(lán)設(shè)計(jì)的小編

在快速發(fā)展的數(shù)字醫(yī)療時(shí)代,UI設(shè)計(jì)不僅是提升用戶體驗(yàn)的關(guān)鍵,更是確保醫(yī)療服務(wù)高效、安全、人性化的重要因素。醫(yī)療行業(yè)軟件的UI設(shè)計(jì),作為醫(yī)患交互的橋梁,其設(shè)計(jì)內(nèi)容涵蓋了多個(gè)方面,旨在為用戶提供直觀、便捷、可靠的操作環(huán)境。以下將詳細(xì)探討醫(yī)療行業(yè)軟件UI設(shè)計(jì)的主要內(nèi)容。

提升用戶體驗(yàn)的UI設(shè)計(jì)技巧有哪些

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字化產(chǎn)品的海洋中,優(yōu)秀的用戶體驗(yàn)是產(chǎn)品脫穎而出的關(guān)鍵。而UI設(shè)計(jì)作為用戶體驗(yàn)的直接體現(xiàn),其設(shè)計(jì)技巧對于提升整體體驗(yàn)至關(guān)重要。以下將探討幾種有效提升用戶體驗(yàn)的UI設(shè)計(jì)技巧。

怎么提高UI設(shè)計(jì)的效果

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字化時(shí)代,UI設(shè)計(jì)作為連接用戶與產(chǎn)品的橋梁,其效果的好壞直接影響著用戶的體驗(yàn)與產(chǎn)品的成功與否。提高UI設(shè)計(jì)效果,不僅是美學(xué)上的追求,更是功能性與用戶體驗(yàn)的深度融合。以下將從幾個(gè)關(guān)鍵方面探討如何有效提升UI設(shè)計(jì)效果。

UI設(shè)計(jì)應(yīng)用在哪些方面

藍(lán)藍(lán)設(shè)計(jì)的小編

UI設(shè)計(jì),即用戶界面設(shè)計(jì),是現(xiàn)代數(shù)字化時(shí)代不可或缺的一部分。它廣泛應(yīng)用于各個(gè)行業(yè)和領(lǐng)域,旨在提升用戶體驗(yàn),使產(chǎn)品更加直觀、易用且吸引人。以下將詳細(xì)探討UI設(shè)計(jì)在不同領(lǐng)域的應(yīng)用。

UI設(shè)計(jì)與Web前端的關(guān)系

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字化時(shí)代,UI設(shè)計(jì)與Web前端是構(gòu)建互聯(lián)網(wǎng)產(chǎn)品不可或缺的兩個(gè)關(guān)鍵環(huán)節(jié)。它們之間既相互獨(dú)立,又緊密相連,共同為用戶提供卓越的數(shù)字體驗(yàn)。本文將從多個(gè)維度探討UI設(shè)計(jì)與Web前端之間的關(guān)系。

UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字時(shí)代,設(shè)計(jì)領(lǐng)域日新月異,UI設(shè)計(jì)和平面設(shè)計(jì)作為其中的兩大分支,各自扮演著舉足輕重的角色。盡管它們都屬于設(shè)計(jì)的范疇,但兩者在理念、應(yīng)用、技能需求及工作環(huán)境等方面存在著顯著的差異。本文將從多個(gè)維度深入探討UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別。

一、設(shè)計(jì)理念與應(yīng)用領(lǐng)域的不同
平面設(shè)計(jì),也被稱為視覺傳達(dá)設(shè)計(jì),其核心在于通過視覺元素(如符號、圖片、文字等)的組合與呈現(xiàn),傳達(dá)特定的信息或情感。它廣泛應(yīng)用于廣告、出版、包裝、品牌標(biāo)識等領(lǐng)域,強(qiáng)調(diào)的是視覺上的美感和信息的有效傳達(dá)。平面設(shè)計(jì)作品如海報(bào)、名片、雜志封面等,多以紙張或其他實(shí)體媒介為載體。

而UI設(shè)計(jì),即用戶界面設(shè)計(jì),則專注于軟件或應(yīng)用的人機(jī)交互設(shè)計(jì)。它不僅關(guān)注界面的美觀性,更強(qiáng)調(diào)用戶在使用過程中的操作邏輯、易用性和舒適度。UI設(shè)計(jì)涵蓋了界面布局、圖標(biāo)設(shè)計(jì)、色彩搭配、交互反饋等多個(gè)方面,目的是提升用戶的使用體驗(yàn)。其設(shè)計(jì)成果主要體現(xiàn)在手機(jī)APP、網(wǎng)頁、軟件界面等虛擬環(huán)境中。

UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別

二、技能需求與工作流程的差異
平面設(shè)計(jì)主要依賴于設(shè)計(jì)師的美術(shù)功底和視覺創(chuàng)意能力。設(shè)計(jì)師需要熟練掌握Photoshop、Illustrator等設(shè)計(jì)軟件,通過手繪、排版、色彩搭配等技巧,將創(chuàng)意轉(zhuǎn)化為視覺作品。平面設(shè)計(jì)的工作流程相對獨(dú)立,一個(gè)設(shè)計(jì)師往往可以獨(dú)立完成從創(chuàng)意構(gòu)思到成品輸出的全過程。

相比之下,UI設(shè)計(jì)則更加復(fù)雜和多元化。它不僅要求設(shè)計(jì)師具備扎實(shí)的美術(shù)基礎(chǔ),還需要深入理解人機(jī)交互原理、用戶體驗(yàn)設(shè)計(jì)原則等。UI設(shè)計(jì)往往需要團(tuán)隊(duì)成員的緊密合作,包括產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師和程序員等。在設(shè)計(jì)過程中,UI設(shè)計(jì)師需要與各方緊密溝通,確保設(shè)計(jì)方案的可行性和用戶體驗(yàn)的最優(yōu)化。

UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別

三、設(shè)計(jì)重點(diǎn)與評估標(biāo)準(zhǔn)的區(qū)別
平面設(shè)計(jì)側(cè)重于視覺表現(xiàn)力和信息的有效傳達(dá)。設(shè)計(jì)師需要通過巧妙的構(gòu)圖、色彩搭配和字體選擇,吸引觀眾的注意力并傳達(dá)出設(shè)計(jì)背后的意圖。平面設(shè)計(jì)的評估標(biāo)準(zhǔn)往往包括視覺美感、信息傳達(dá)的準(zhǔn)確性和創(chuàng)意性等。

UI設(shè)計(jì)則更加注重用戶的使用體驗(yàn)和操作邏輯。設(shè)計(jì)師需要確保界面布局合理、操作流暢、反饋及時(shí),以提升用戶的滿意度和忠誠度。UI設(shè)計(jì)的評估標(biāo)準(zhǔn)不僅包括界面的美觀性,更強(qiáng)調(diào)用戶體驗(yàn)的舒適度、易用性和滿意度。

UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別

四、工作環(huán)境與發(fā)展趨勢的不同
平面設(shè)計(jì)師的工作多在傳統(tǒng)企業(yè)或廣告公司進(jìn)行,他們面對的主要是實(shí)體媒介的設(shè)計(jì)需求。隨著數(shù)字媒體的興起,平面設(shè)計(jì)也在逐漸融入數(shù)字化趨勢,但傳統(tǒng)的設(shè)計(jì)理念和技能仍然占據(jù)重要地位。

而UI設(shè)計(jì)師則更多地活躍在互聯(lián)網(wǎng)企業(yè),他們的工作與軟件、應(yīng)用等數(shù)字化產(chǎn)品緊密相連。隨著移動互聯(lián)網(wǎng)和人工智能技術(shù)的快速發(fā)展,UI設(shè)計(jì)的需求不斷增長,對設(shè)計(jì)師的技能要求也越來越高。未來,UI設(shè)計(jì)將更加注重跨平臺設(shè)計(jì)、智能化交互和個(gè)性化定制等方面的創(chuàng)新。

UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別

綜上所述,UI設(shè)計(jì)與平面設(shè)計(jì)在設(shè)計(jì)理念、應(yīng)用領(lǐng)域、技能需求、工作流程、設(shè)計(jì)重點(diǎn)和評估標(biāo)準(zhǔn)等方面存在顯著的差異。了解這些差異有助于我們更好地理解兩種設(shè)計(jì)的本質(zhì)和特點(diǎn),為未來的設(shè)計(jì)實(shí)踐提供有益的參考。

UI元素的尺寸到底該怎么定(上)

純純

- 00.基礎(chǔ)原則

    - 01.控件尺寸





一、官方規(guī)范


對于剛開始思考 UI 元素尺寸的新人,通常第一反應(yīng)都是去看官方規(guī)范,新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置,只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上,這些規(guī)范并不能幫助你們解決這個(gè)問題,因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜,比如我們之前翻譯過的 iOS 規(guī)范。



超人的電話亭獨(dú)家譯制 iOS 系統(tǒng)規(guī)范

規(guī)范鏈接:https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ

密碼:vpkj


我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸,最好的方法就是去下載它們的官方 UI-Kits,如下圖的安卓組件庫所示。



官方并不會提供一個(gè)列表,逐一羅列每個(gè)元素的長寬和其它參數(shù),所以想要弄明白參數(shù)的問題,要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個(gè)按鈕,我們就能看見它的各項(xiàng)屬性:寬 359pt、高 57pt、圓角 14pt;右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。



因?yàn)?iOS 組件庫下載下來的都是 dmg 格式的文件,很多 windows 用戶不知道該怎么打開它,這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。


在初期,我們想要設(shè)計(jì)出符合官方規(guī)范的界面,就可以嚴(yán)格照搬官方的元素設(shè)置。但是,即使官方的源文件所包含的元素及字體已經(jīng)非常多了,在實(shí)際設(shè)計(jì)過程中,還是會出現(xiàn)它們無法覆蓋的元素類型,需要依靠我們自己去給出尺寸。


還有如字體的應(yīng)用,官方源文件使用的語言是英文,光是官方應(yīng)用的兩種 SF 字體,就包含了十幾種字重,所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場景下,我們是不可能照搬這種規(guī)范的!



所以每一個(gè)學(xué)習(xí)UI設(shè)計(jì)的新手,都必須要明白,官方的規(guī)范終究只是一種建議,我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容,我們是無法設(shè)計(jì)出有趣個(gè)性化的界面的,比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計(jì) ”的應(yīng)用。



官方的參數(shù)決定我們設(shè)計(jì)的下限,當(dāng)你不知道該怎么做,或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn),那么照搬就行了!后面文章要說的,就是脫離開這些束縛之后,該怎么自定義 UI 元素的尺寸。



二、尺寸設(shè)置原則


UI 和平面不一樣的地方,就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報(bào)或畫冊,使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品,無需緊盯著其中出現(xiàn)的每個(gè)元素的長寬高的數(shù)值。而 UI 的設(shè)計(jì)中,無論字體、圖標(biāo)還是按鈕,都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高,如下圖設(shè)計(jì)一個(gè)按鈕的操作:拖拉出矩形之后,我們依然需要到屬性設(shè)置的對話框中去輸入精確到1pt的數(shù)值。



這么做是因?yàn)樵陔娮悠聊恢?,圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的,像素點(diǎn)是最小的顯示單位,一個(gè)像素只能顯示一個(gè)顏色,所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值,那么這個(gè)元素的邊緣就會虛化。所以為了避免這種情況的出現(xiàn),我們就得用整數(shù)來定義元素的長和寬。



這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題,尤其是和像素倍率相關(guān)的基礎(chǔ)知識,我會在另外的文章里分享。


需要注意的是,文章中出現(xiàn)的所有尺寸數(shù)值的單位,默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn),即 XD 和 Sketch 默認(rèn)畫布的單位,若在 PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以 2。


只有分隔線,是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來會非常粗,一點(diǎn)也不精致,感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔,再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用,也主要使用 0.5pt 的線條做分隔。



無論是在 iOS 還是在 Android 的規(guī)范中,都提到過使用 8 x 8 的網(wǎng)格做輔助,這導(dǎo)致網(wǎng)上有很多片面的文章會反復(fù)強(qiáng)調(diào)對元素的尺寸使用 8 的倍數(shù)。


  • iOS: 使用 8px 網(wǎng)格系統(tǒng):網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰,無需太多的修飾和銳化。將圖形邊界對齊到網(wǎng)格上,減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。

  • Android:所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。


實(shí)際上,我們在真實(shí)的設(shè)計(jì)環(huán)境中,建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可,如 8、12、16、20、24……等,它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要,如:多 4pt 太大,少 4pt 太小,那么我們就可以使用一般的偶數(shù)如18、22、26 等。


以上就是我們一開始要建立的元素尺寸原則,精簡完即:


使用整數(shù),只有分隔線可以使用 0.5 的小數(shù) 

使用 4 的倍數(shù),根據(jù)實(shí)際情況可以切換成一般偶數(shù)。


有了這樣的原則,并養(yǎng)成習(xí)慣,我們就能在每次設(shè)計(jì)前對元素尺寸有個(gè)大致判斷,然后再根據(jù)需要按 4 的倍數(shù)調(diào)整,如下面設(shè)計(jì)注冊登錄頁面的輸入框作為案例。



開始我使用 280pt 寬,44pt 高的尺寸,但是覺得有點(diǎn)僵硬,太正式了!這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的,所以高度上改成 44+(4x2)=52pt 。這時(shí)候又覺得太高了,實(shí)際輸入內(nèi)容也沒那么寬,于是再對高減 4,寬減 40,獲取最終結(jié)果。


所以,因?yàn)檫@樣的操作原則,決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的(拖動效率太低),而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。




這里要聲明,在我的描述體系中,控件指的是:界面中最基本的交互單位,如按鈕、滑塊、開關(guān)、分頁控件等,更復(fù)雜的如動態(tài)卡片,功能快速入口等,就歸入組件中,便于我們理解。


下面,我會根據(jù)前面定義的基礎(chǔ)原則,分別講解控件應(yīng)該使用的尺寸范圍。



一、按鈕 ( Buttons )



按鈕是界面交互操作中使用最頻繁的控件了,當(dāng)然按鈕呈現(xiàn)的形式也多種多樣,比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里,我們只聚焦于矩形的基礎(chǔ)按鈕。


在進(jìn)入具體參數(shù)的講解前,要先理解一點(diǎn),按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)。并不是因?yàn)樵谠O(shè)計(jì)樣式上復(fù)雜,而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求,權(quán)重差異極大,例如看下面的案例。



在上圖里,可以點(diǎn)擊的東西不少,我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕,就有 9 個(gè)。而這里面,權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的,則是前往新品頁。


要定義按鈕尺寸,我們首先需要整理清楚不同的按鈕在界面或整個(gè)應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然,顏色也是對重要性表現(xiàn)的關(guān)鍵因素,不過不在這里展開。



按鈕高度


當(dāng)我們設(shè)計(jì)按鈕時(shí),優(yōu)先從高度入手,再去定義寬。為了便于新手理解,我首先從高度上來匹配權(quán)重,分成高、中、低三類:


    - 高權(quán)重:40-56pt

    - 中權(quán)重:24-40pt

    - 底權(quán)重:12-24pt


高權(quán)重的按鈕,類似登錄頁的注冊、登錄,購物詳情頁的購買,流程頁中的下一步,它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個(gè)數(shù)值,那么按鈕就很難在頁面中起到視覺支撐的作用,因?yàn)闀杏X到它太細(xì)了。



中權(quán)重的按鈕,類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評論按鈕等。這個(gè)層級的按鈕依舊有比較高的交互頻次,所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分,不像層級最高的按鈕常常是處于一個(gè)孤立的空間,所以高度如果超出 40pt,就會對當(dāng)前模塊產(chǎn)生直觀的破壞。



低權(quán)重的按鈕,就類似查看更多、標(biāo)簽、詳情等類型,相對于交互屬性,這類按鈕具備更多的提示屬性,只要讓用戶能看見,又不需要太顯眼。尺寸不大于 24pt,能容納內(nèi)部文字或圖形元素即可。




按鈕寬度


主流的按鈕都是橫向的長方形,正方形的也有,但就是不能變成縱向的矩形。



按鈕的寬度主要和內(nèi)容掛鉤,內(nèi)容數(shù)量越多,按鈕自然也就越寬。唯一的例外,只有高權(quán)重的按鈕,可以無視內(nèi)容的長度。因?yàn)樗鼈冃枰嗟膮^(qū)域,往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的,可以特殊處理。


普通按鈕,左右邊界與內(nèi)容的距離過大,就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小,應(yīng)該小于或等于上下間距的 2 倍。




按鈕圓角


最后,按鈕尺寸還有一個(gè)屬性,就是按鈕的圓角。矩形的四角有三種類型,即直角、圓角和半圓。



為矩形設(shè)置圓角,是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利,這種圓角的數(shù)值要給得更加謹(jǐn)慎,只要超出了一定的范疇,就會對視覺的和諧產(chǎn)生影響,我習(xí)慣稱呼為——半圓不圓,如下圖右側(cè)的錯(cuò)誤案例。



所以,我們在設(shè)計(jì)圓角的過程中,一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍,小于等于高度的 1/4。例如,一個(gè) 24pt 的圓角矩形,圓角的尺寸就應(yīng)該不大于 6pt。


以上就是按鈕相關(guān)尺寸定義的說明,當(dāng)然,在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況,這就需要大家多做嘗試了。



二、輸入框 ( Text Fields )



輸入框也是比較常用的控件之一,它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框,以及首頁上方的搜索欄了。


輸入框的高度,常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會非常擁擠,比如我用下面學(xué)生的案例做個(gè)演示。




三、步進(jìn)器 ( Steppers )



常見的步進(jìn)器,就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕,中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上,它也介于兩者之間,高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示,當(dāng)?shù)陀?28pt 以后,就會發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。



步進(jìn)器中常見的錯(cuò)誤,是在我們在繪制左右兩個(gè)按鈕,設(shè)置外框的圓角時(shí),并沒有合理的去掉內(nèi)側(cè)的圓角,這是絕對不應(yīng)該忽略的細(xì)節(jié)。




四、下拉菜單 ( Dropdown Menus ) 



下拉菜單要注意它具有多種狀態(tài),默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似,主流的高度也使用 36-56pt。但是,當(dāng)菜單展開后,下方多出來的選項(xiàng)菜單,就值得注意了。


菜單的寬度正常情況下與默認(rèn)狀態(tài)相同,而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度,不大于默認(rèn)的選項(xiàng)框。但也不能過小,新手很容易在彈出菜單中設(shè)定過小的高度,使個(gè)控件看起來會非常的別扭。




五、開關(guān) ( Switches )



開關(guān)也是按鈕的一種形式,通常出現(xiàn)在設(shè)置頁的列表中,上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候,要先確定一個(gè)矩形區(qū)域,高度使用 24-32pt,寬度則用 1:2 的比例。如高度使用 28pt,那么寬大致可以使用 56pt,之后再將其他細(xì)節(jié)填入。




六、滑塊 ( Sliders )



滑塊形式接近開關(guān),通常在中間有一個(gè)操作節(jié)點(diǎn),下面有一個(gè)用來表示區(qū)間的線條。實(shí)際上我們該做的就是分別決定它們的尺寸。


節(jié)點(diǎn)如果做的太小,不僅會顯得難看,而且會讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線,寬度由所在內(nèi)容區(qū)域的寬決定,高度一般在1-4pt 之間。



七、頁面指示器 ( Page Controls )



指示器用來展示元素序列,雖然在 APP 中沒有太重要的作用,但既然我們加進(jìn)去,就要讓它看起來和諧。大多數(shù)人在定義指示器時(shí),不是太大,就是太小??梢灾粡暮竺嫣峁┑某叽缰羞x擇,就能保證指示器的尺寸不會出錯(cuò)。


指示器主要是圓形和矩形兩種形式:


    - 圓形:8、10、12pt ( 直徑 )

    - 矩形:14×2 pt、16×2 pt、20×3 pt



八、提示紅點(diǎn) ( Badges )



提示紅點(diǎn)也是大多數(shù)應(yīng)用會使用的一個(gè)控件,它的大小應(yīng)該在 24-32 pt 之間。作為一個(gè)圓形,這個(gè)控件設(shè)計(jì)起來很容易,但設(shè)計(jì)師往往忽略一件事,那就是如果中間的數(shù)值超過 10 變成 2 位以后,要怎么處理。


在設(shè)計(jì)這樣的元素時(shí),我們要用一個(gè)矩形元素來表現(xiàn),即畫一個(gè)正方形,然后將圓角設(shè)成最大,那它看上去就是一個(gè)圓形。那么每增加一位字符,我們就需要為這個(gè)矩形增加該字符的寬度,可以用左右間距判斷。


因?yàn)橄嗤痔栂?,不同英文、?shù)字的寬度都是不一樣的,所以我們要根據(jù)實(shí)際輸入的字段長度去決定圓角矩形的寬度。




九、分頁控件 ( Tabs )



后一個(gè)控件,就是分頁控件了,安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響。較為寬松的排版風(fēng)格,高度就比較大,若擁擠則反之。下面是高度的取值:


    - 高權(quán)重:40-48pt

    - 低權(quán)重:28-36pt


分頁控件主要應(yīng)用在頭部和頁面中部的組件中,如下方的案例:



雖然很多時(shí)候分頁器沒有背景色,但是背景的矩形框是必須畫出來的,即隱藏填充和描邊,這樣我們就可以通過垂直居中的方式,來確定中間文字的位置。



一個(gè)完整的分頁控件,里面會包含兩個(gè)或以上的選項(xiàng),所以定義每個(gè)選項(xiàng)的寬是必要的。通常,我們有兩種定義方法,一種是選項(xiàng)少時(shí),直接進(jìn)行均分顯示,另一種是選項(xiàng)較多,采取定寬模式,寬度最小建議在 64pt以上,才不會顯得過度擁擠。



分頁控件選項(xiàng)處于選中狀態(tài)時(shí),有的設(shè)計(jì)是修改背景色,有的是修改文字屬性,但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好,會讓整個(gè)控件看起來非常粗糙,它需要在樣式中能起到畫龍點(diǎn)睛的作用。



下劃線分為兩種,一種是貼在控件底部的,另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話,前者和每個(gè)選項(xiàng)背景區(qū)域相等,后者則可以在 8-16pt 間(小于文字總寬)。下面是正確設(shè)計(jì)效果:




十、尾聲


前面說到了不少控件的尺寸,那么真實(shí)應(yīng)用的效果會如何呢?下面我就用原型的方式,不考慮樣式與色彩將它們組合到完整的頁面中去。



可以看到,模塊大小很均衡,看上去不會覺得哪些地方太大或太小,只要稍加填充樣式,那么就可以變成完整的設(shè)計(jì)稿了。


這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求,但至少可以保證這些控件不會被設(shè)計(jì)得很奇怪。當(dāng)設(shè)計(jì)師沒有對于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí),就先學(xué)會正確的使用上面的這些參數(shù)吧。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系

作者:酸梅干超人  來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



Cs界面設(shè)計(jì)之八:超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

博博

近年來,互聯(lián)網(wǎng)進(jìn)入下半場,C 端流量紅利逐漸消退,很多企業(yè)轉(zhuǎn)向了 B 端服務(wù),隨之而來的是產(chǎn)品設(shè)計(jì)者的轉(zhuǎn)型,現(xiàn)在越來越多的 C 端產(chǎn)品設(shè)計(jì)師開始涉足到 B 端產(chǎn)品的設(shè)計(jì),這是一個(gè)知識遷移的過程,需要認(rèn)識到這 2 類產(chǎn)品的特點(diǎn)和區(qū)別,你才能夠快速適應(yīng)這個(gè)遷移的過程。

在互聯(lián)網(wǎng)和信息化高度發(fā)達(dá)的今天,我們都是 B 端和 C 端產(chǎn)品的用戶,能切身體會到產(chǎn)品的好壞,那么兩個(gè)完全不同類別的產(chǎn)品放在一起時(shí),會有什么新發(fā)現(xiàn)呢?今天想通過自己的設(shè)計(jì)歷程,來梳理這 2 種產(chǎn)品的區(qū)別和價(jià)值。

C 全稱是 Customer,即消費(fèi)者(泛指用戶)的產(chǎn)品,個(gè)人用戶或終端用戶,使用的是客戶端。例如:微信、網(wǎng)易新聞、網(wǎng)易云音樂、有道翻譯官、網(wǎng)易考拉等等。

B 全稱是 Business,即商家(泛指企業(yè))的產(chǎn)品,通常是企業(yè)或商家,為工作或商業(yè)目的而使用的系統(tǒng)型軟件、工具或平臺。例如:京東云、阿里云、網(wǎng)易云、網(wǎng)易有數(shù)或企業(yè)內(nèi)部的 ERP 系統(tǒng)等等。


相同點(diǎn)


1. 都要給人使用

小到打車、外賣和購物軟件,大到邏輯復(fù)雜連產(chǎn)品經(jīng)理有時(shí)候都犯糊涂的企業(yè)級業(yè)務(wù)系統(tǒng),無論個(gè)人用戶,還是企業(yè)用戶,本質(zhì)都是由人來使用,只不過產(chǎn)品類型不同。

2. 都要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡

既然是給人來使用的產(chǎn)品,就要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡。無論是 C 端或 B 端,誰都不愿意使用一個(gè)不好用且耽誤效率的產(chǎn)品,當(dāng)然還是會有一些用戶體驗(yàn)較差,用戶又不得不使用的產(chǎn)品存在,因?yàn)樗赡芫哂幸欢ǖ膲艛嘈再|(zhì),或者在某些場景下被強(qiáng)迫使用,用戶本身是別無選擇的。但不能說用戶體驗(yàn)就不重要,只能說對于業(yè)務(wù)更復(fù)雜、為工作而生的 B 端產(chǎn)品來說,想要做好這一點(diǎn)會比 C 端更困難。

3. 都要堅(jiān)守做產(chǎn)品設(shè)計(jì)的核心思想

對于每一個(gè)產(chǎn)品設(shè)計(jì)者來說,「在什么場景下為怎樣的用戶(客戶)采取什么方法解決哪些問題」,這句話是再熟悉不過了,也是經(jīng)常討論或掛在嘴邊的話??墒敲鎸ぷ髦蟹鋼矶?、突如其來的事情時(shí),卻又常常容易忽略掉。就像是一個(gè)人如果太餓了,只顧著吃飯?zhí)铒柖亲?,卻忘記了吃了什么。

不同點(diǎn)


超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

1. 目標(biāo)用戶

首先,我們明確一下 C 端產(chǎn)品和 B 端產(chǎn)品的用戶是誰,產(chǎn)品給哪些人用?

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

C端

產(chǎn)品是面向個(gè)人用戶,服務(wù)于每個(gè)脫離「企業(yè)」場景之外的人,也就是生活場景。他需要做更細(xì)致的用戶畫像,比如:用戶的年齡、職業(yè)、文化程度、收入水平、工作單位、個(gè)人喜好等都會影響到功能設(shè)計(jì),每個(gè)人都可以對產(chǎn)品提出優(yōu)化意見,這個(gè)意見只代表個(gè)人,而不是任何社會群體,但這些意見只要被產(chǎn)品經(jīng)理驗(yàn)證是可以提升產(chǎn)品價(jià)值的,就可能會排進(jìn)迭代周期內(nèi)。

相對來說,C 端產(chǎn)品不管從服務(wù)范圍、滲透力、密度都遠(yuǎn)遠(yuǎn)超過 B 端,原因是因?yàn)樗嫦虻挠脩羧后w更廣泛,用一個(gè)核心功能解決大多數(shù)人的一個(gè)主要訴求,我們每個(gè)人隨時(shí)隨地都可以成為 C 端用戶,可選用的產(chǎn)品也非常多,產(chǎn)品團(tuán)隊(duì)更多的思考是讓我們更長時(shí)間的停留在產(chǎn)品上面,讓用戶有更高的粘性和活躍度,需要利用產(chǎn)品的特色功能和優(yōu)質(zhì)體驗(yàn)來吸引我們,并解決我們在生活便利和情緒方面的問題,讓我們享受這些服務(wù)并為此買單。

B端

產(chǎn)品則是服務(wù)于企業(yè)用戶,這個(gè)「企業(yè)」可以是一個(gè)組織、商家、團(tuán)隊(duì),是某種經(jīng)營的主體,當(dāng)然使用者也是個(gè)人,不過這個(gè)「個(gè)人」是代表了組織中的某個(gè)角色而已。這類人無論性別、年齡、地區(qū)有何差異,他們都是一類角色,比如企業(yè)中的項(xiàng)目總監(jiān)、項(xiàng)目經(jīng)理、項(xiàng)目顧問,我們的產(chǎn)品要提供給這類角色使用,而不是某個(gè)人使用。假設(shè)我們做一個(gè)項(xiàng)目管理系統(tǒng),主要提供給項(xiàng)目經(jīng)理使用,張三和李四都是產(chǎn)品的用戶,也許張三在工作之外是個(gè)活潑少女,喜歡刷短視頻、購物、旅游,被簡約的界面風(fēng)格所折服;李四卻是個(gè)內(nèi)向宅男,喜歡宅在家里打游戲、看書,喜歡炫酷的界面風(fēng)格,但他們的個(gè)人喜好都無法影響系統(tǒng)功能的設(shè)計(jì)。這里說的功能設(shè)計(jì)的主要依據(jù)就是企業(yè)對項(xiàng)目經(jīng)理這個(gè)角色的業(yè)務(wù)定位和考核目標(biāo),他們共同的角色都是項(xiàng)目經(jīng)理,所以系統(tǒng)只需要提供項(xiàng)目經(jīng)理相應(yīng)的功能和體驗(yàn)即可。

所以功能設(shè)計(jì)需要是多個(gè)業(yè)務(wù)功能滿足特定人群的多個(gè)需求、多個(gè)場景,他所面對的用戶具有特定的職業(yè)屬性,也就是說他的用戶只會在「工作」的場景下使用他,有些還是強(qiáng)制使用,個(gè)人沒有選擇余地,因?yàn)楦顿M(fèi)者是企業(yè)領(lǐng)導(dǎo),而不是基層員工,而使用最多的反而是基層員工,所以 B 端產(chǎn)品的用戶關(guān)系會比 C 端更集中、更垂直,做功能設(shè)計(jì)時(shí),要權(quán)衡付費(fèi)者和使用者之間的利弊,他們要求產(chǎn)品的時(shí)效性,注重如何滿足企業(yè)用戶的既定目標(biāo)。

2. 使用場景

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

C端

它會存在于生活中的各種場景下,而且自由度非常高,當(dāng)然也包含工作場景,比如我在坐地鐵時(shí)刷一下朋友圈、在睡前打開網(wǎng)易云聽歌、在工作間隙上點(diǎn)了一份外賣、周末變身肥宅吃了一天雞等等,所以 C 端產(chǎn)品的使用場景是碎片化的,用戶并不會連續(xù)幾個(gè)小時(shí)一直盯著同一個(gè) APP,而是在多個(gè)應(yīng)用之間隨意切換。比如落地成盒了會打開微信回復(fù)消息,歌聽乏了去看看電子書等等,所以我們看到一些比較優(yōu)秀的產(chǎn)品,他們都在內(nèi)容和用戶體驗(yàn)上下足了功夫,目的就是為了留存用戶,減少跳出率。因此 C 端產(chǎn)品更講究操作直接,信息簡潔,有娛樂性、社交性、可傾訴性,是為了解決生活上的問題而生,寄生于我們的情緒之中,被產(chǎn)品的情感化設(shè)計(jì)所折服。

B端

與 C 端正好相反,他們是為了工作而使用這個(gè)產(chǎn)品,因此他們必然要長時(shí)間使用產(chǎn)品,而且是沉浸式使用,同時(shí)使用頻率是可預(yù)測的,他們并不能帶著個(gè)人喜好去使用,不能說這個(gè)產(chǎn)品太難用了,我就可以不用了。比如上下班打卡,公司要求用 A 產(chǎn)品,你覺得不好用,就推薦大家使用 B 產(chǎn)品,對不起,雖然你是產(chǎn)品真正的使用者,但決策權(quán)和付費(fèi)者是高層領(lǐng)導(dǎo)。個(gè)人的情緒左右不了使用場景。所以 B 端產(chǎn)品更講究嚴(yán)謹(jǐn)?shù)牧鞒淘O(shè)計(jì)、貼近現(xiàn)實(shí)的場景面積、低風(fēng)險(xiǎn)、高效率、數(shù)據(jù)精準(zhǔn)。它是為了解決工作上的問題而生,寄生于企業(yè)制度之中,被產(chǎn)品的用戶體驗(yàn)影響著工作效率。

3. 業(yè)務(wù)和本質(zhì)

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

C端

滿足自我情緒。

比如社交類產(chǎn)品就是構(gòu)建「聊天」方式,這個(gè)聊天可以是語音、文字、圖片、分享等形式,解決個(gè)人在情感、空間、工作、虛榮、欲望等情緒問題。在核心功能之外還可以附加一些「增值功能」,比如設(shè)置好友查看權(quán)限、購買 VIP 等,這都是為了提高產(chǎn)品的使用價(jià)值和盈利口徑。

因此 C 端產(chǎn)品通常只有一個(gè)核心功能(比如音樂類 app 的核心功能就是聽音樂,閱讀類 app 的核心功能就是閱讀,游戲類 app 的核心功能就是游戲),多個(gè)輔助功能,核心功能影響著產(chǎn)品的特色、定位、調(diào)性,而合理的輔助功能則會讓產(chǎn)品保值增值、增強(qiáng)產(chǎn)品與產(chǎn)品之間的差異化,如果去除這些附加功能,產(chǎn)品的體驗(yàn)會受到一定影響,但實(shí)際上并不會阻礙用戶使用核心功能。例如:去除了評論功能,但用戶依舊可以聽音樂;去除了打賞功能,同樣也不影響用戶閱讀文章和作者寫文章;去除了分享,用戶還是可以愉快地吃雞。

所以 C 端產(chǎn)品的特性可以歸納為「分享」,前面所提到的「評論」、「打賞」其實(shí)都基于「分享」的場景下,即:讓他人聽見「我」的聲音、看見「我」的想法、贊同「我」的觀點(diǎn),滿足雙方的情緒設(shè)定。

盈利方式:內(nèi)容付費(fèi)、廣告付費(fèi)、平臺抽成、增值服務(wù)(VIP、卡券、權(quán)限等)。

B端

共同完成一個(gè)目標(biāo)。

日常使用產(chǎn)品工作的人,自己是無法獨(dú)立完成一個(gè)任務(wù)的,他需要和周圍的人協(xié)同完成一個(gè)任務(wù)流程的閉環(huán),比如我發(fā)起一個(gè)請假申請,以「完成」和「打回」作為流程結(jié)點(diǎn),根據(jù)企業(yè)制度設(shè)定,這個(gè)流程中會涉及到 3 種角色:發(fā)起人(我)、審核人(上級)、歸檔人(人事或行政)。

B 端產(chǎn)品的業(yè)務(wù)邏輯是復(fù)雜和多變的,尤其是權(quán)限系統(tǒng),往往每個(gè)人都是流程中一個(gè)非常小的部分,就如上段所說,需要進(jìn)行協(xié)作使用,這里不能窮舉出每個(gè)業(yè)務(wù),因?yàn)椴煌墓緲I(yè)務(wù)則完全不一樣,公司可以對該產(chǎn)品當(dāng)中的功能選擇性購買或租賃。而對實(shí)際用戶來說,這個(gè)產(chǎn)品沒有功能的層級,自己負(fù)責(zé)哪一塊,哪一塊就是他的主要任務(wù)、經(jīng)常使用的功能。也就是說,從功能架構(gòu)上看,這些核心功能都是扁平的,他們分配到各種使用角色的手中,沒有先后排名。

而 B 端產(chǎn)品的本質(zhì)則是滿足用戶的工作需要,但這從來不是單一的功能就可以滿足的,這里一定包括了多項(xiàng)功能的組合及嵌套應(yīng)用支持。當(dāng)用戶需要繪制多種不同類型的圖表時(shí),產(chǎn)品就絕不能只提供單項(xiàng)類型的圖表功能。比如:甲公司的產(chǎn)品只能畫柱狀圖,而乙公司的產(chǎn)品卻能畫 10 種甚至更多不同類型的圖表,以適應(yīng)不同需求場景,若你是客戶,你會選擇購買哪個(gè)產(chǎn)品呢?

盈利方式:按功能模塊付費(fèi)、按使用人數(shù)付費(fèi)、需求付費(fèi)、后期維護(hù)費(fèi)用。

4. 產(chǎn)品需求

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

C端

更多滿足使用者的日常生活需求,所以需求來源會多樣化一些,因?yàn)槟康亩际抢?、促活、留存、轉(zhuǎn)化、裂變。像競品分析、數(shù)據(jù)分析、用戶行為分析都可能幫助挖掘出有價(jià)值的需求。我們也有很多時(shí)候因?yàn)榕笥言谟眠@個(gè)產(chǎn)品,或者看到產(chǎn)品的廣告才下載這個(gè)應(yīng)用,但下載以后用來干什么,那只有等我們有訴求的時(shí)候才會再次打開應(yīng)用,這個(gè)訴求可能是空虛、無聊、想購物了等等。所以很多普通用戶根本不知道自己的真實(shí)需求是什么,甚至有時(shí)陰差陽錯(cuò)打開某應(yīng)用,然后被里面的買家秀、活動促銷等運(yùn)營模塊所吸引,最后產(chǎn)生購買欲望。

因此,C 端產(chǎn)品就是站在上帝的視角,需求直接來源于用戶的行為和反饋,從用戶這里獲取最真實(shí)的訴求。產(chǎn)品設(shè)計(jì)者則需要關(guān)注市場流行趨勢,關(guān)注用戶偏好及意見,將有效的分析結(jié)果轉(zhuǎn)化為產(chǎn)品需求,再輸出功能,引導(dǎo)用戶產(chǎn)生共鳴,并通過一些運(yùn)營手段,增加轉(zhuǎn)化(變現(xiàn))概率和裂變的輻射面積。

B端

B 端產(chǎn)品更多是基于已有的「業(yè)務(wù)」形態(tài),把傳統(tǒng)線下工作,通過程序化、系統(tǒng)化、信息化轉(zhuǎn)換為線上行為,使業(yè)務(wù)的流轉(zhuǎn)效率更高,辦公成本更低。所以更要求產(chǎn)品設(shè)計(jì)者能熟練掌握相應(yīng)的行業(yè)知識、捋清業(yè)務(wù)邏輯。

需求一般來源于產(chǎn)品戰(zhàn)略定位、各部門對接、租戶(客戶、外部付費(fèi)者)的個(gè)性需求,有些靠銷售企業(yè)軟件盈利的公司為了把職責(zé)再細(xì)分,通常會配置指定的一線顧問來對接租戶的需求及跟進(jìn)服務(wù),然后再將需求反饋到負(fù)責(zé)這個(gè)產(chǎn)品的產(chǎn)品經(jīng)理,產(chǎn)品經(jīng)理在這里就是負(fù)責(zé)收集需求、分析、規(guī)劃、設(shè)定開發(fā)優(yōu)先級,然后交由開發(fā)團(tuán)隊(duì)進(jìn)行接下來的產(chǎn)品設(shè)計(jì)等工作。

B 端產(chǎn)品的客戶可能不在網(wǎng)上,而是在全國各地的企業(yè)里,往往需要通過老板和銷售才能接觸到客戶,這會造成不能獲取真實(shí)的客戶需求,我把這種現(xiàn)象叫做「需求斷層」。所以最好的調(diào)研方式就是做一個(gè)「面對面」的用戶訪談,可以真實(shí)的面對面、也可以是視頻或者電話溝通,這能容易把復(fù)制的需求溝通清楚,而不是通過郵件和文字。因?yàn)槟繕?biāo)用戶有固定的職業(yè)領(lǐng)域,有時(shí)候你所設(shè)計(jì)的流程你認(rèn)為最合理,但和他們實(shí)際使用起來卻有很大的差異,所以和真實(shí)用戶面對面聊聊他們的工作習(xí)慣和業(yè)務(wù)規(guī)則,這一定能夠幫助到你設(shè)計(jì)產(chǎn)品。

很多時(shí)候,做的產(chǎn)品只是為了滿足付費(fèi)者(即高層領(lǐng)導(dǎo))的需求,而不是實(shí)際用戶(即基層工作者),導(dǎo)致實(shí)際用戶吐槽產(chǎn)品易用性差,其實(shí)是改變了他們的工作習(xí)慣而引發(fā)的抱怨,然而領(lǐng)導(dǎo)卻達(dá)到了監(jiān)控和實(shí)時(shí)獲取數(shù)據(jù)的目的。因此在收集這些需求時(shí),會受到來自付費(fèi)者和真實(shí)用戶 2 種角色聲音的影響,這就需要產(chǎn)品設(shè)計(jì)者具有更理性的思考方式和處理手段。

5. 產(chǎn)品思維

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

C端-流量思維

做 C 端產(chǎn)品設(shè)計(jì),我們一切行為的出發(fā)點(diǎn),都是流量,流量直接影響著變現(xiàn),無論是外部的流量引入、各環(huán)節(jié)的轉(zhuǎn)化、留存策略,還是產(chǎn)品體驗(yàn)的提升、流程的優(yōu)化、資源的投入,我們都是在為提升流量、轉(zhuǎn)化流量服務(wù)。我們經(jīng)常做的各種活動專題、分析各類數(shù)據(jù),去追求所謂的情懷、情感化設(shè)計(jì),其根本還是為了引流,想方設(shè)法從全網(wǎng)獲取流量,從而來提升產(chǎn)品的轉(zhuǎn)化率,這是一切 C 端產(chǎn)品的宗旨,沒有流量的產(chǎn)品只是一個(gè)花瓶。

B端-效率思維

對于 B 端產(chǎn)品,我們更多關(guān)注的是效率,不管是面向外部客戶,還是服務(wù)于公司內(nèi)部各業(yè)務(wù)角色/部門,B 端產(chǎn)品要解決的始終都是如何提升企業(yè)的運(yùn)營效率(即工作效率),解決的是「開源節(jié)流」中的節(jié)流部分。所以我們會通過流程優(yōu)化、工具打磨、策略調(diào)整,去提升各個(gè)環(huán)節(jié)的人效,降低各方面成本,從根本上提升企業(yè)效率,這點(diǎn)從我們做流程設(shè)計(jì)的時(shí)候能清晰的反應(yīng)出來,設(shè)計(jì)目標(biāo)都是在合理且效率的基礎(chǔ)上,讓用戶舒適的完成這個(gè)流程,并不是說企業(yè)投入資金購買了一款數(shù)據(jù)統(tǒng)計(jì)軟件,結(jié)果數(shù)據(jù)統(tǒng)計(jì)還沒有人工來的精準(zhǔn)、方便。

6. 設(shè)計(jì)原則

C端

在 C 端產(chǎn)品設(shè)計(jì)的過程中,我們首先要明確核心功能是給哪些目標(biāo)用戶使用的,也就是我們最初的設(shè)計(jì)目標(biāo)是什么,需要保持產(chǎn)品的場景多樣化,突出核心功能,因?yàn)?C 端產(chǎn)品的同質(zhì)化現(xiàn)象非常嚴(yán)重,因此我們要好好思考,如何將我們的產(chǎn)品在眾多產(chǎn)品中脫穎而出,如何讓產(chǎn)品的品牌設(shè)計(jì)輻射到更多的地方,如何在功能和體驗(yàn)上尋找新的亮點(diǎn)。

再者就是要保持良好運(yùn)營手段,因?yàn)?C 端的用戶是自由的(忠誠度低,隨時(shí)可以換產(chǎn)品使用),所以需要通過一些運(yùn)營手段來綁定用戶的留存。C 端產(chǎn)品的本質(zhì)都是一個(gè)核心功能,所以設(shè)計(jì)師在產(chǎn)品初期時(shí)就需要全盤考慮,哪個(gè)功能是產(chǎn)品最核心、最不可丟棄的,哪個(gè)功能是錦上添花,為了提升產(chǎn)品的附加價(jià)值的。因此,我們拋開這些基本原則,還需要對用戶行為進(jìn)行塑造,塑造用戶行為就是「綁架」用戶。

把握關(guān)鍵時(shí)機(jī):把握用戶在使用 C 端產(chǎn)品過程中注意力的關(guān)鍵時(shí)機(jī),用戶在使用產(chǎn)品的過程中,注意力的分配是不均等的,比如同類產(chǎn)品太多,先下載 2、3 個(gè)試用,進(jìn)到產(chǎn)品里不知道干什么,隨便逛逛,逛著逛著就刪除 APP 了,這就是典型的沒有把握用戶關(guān)鍵時(shí)機(jī),沒有提供給用戶有用的東西,敗在了產(chǎn)品策略和本能層次。沒有在第一時(shí)間讓用戶知道產(chǎn)品是干什么的?能從中得到什么?亮點(diǎn)內(nèi)容在哪里?是如何引導(dǎo)我使用的?那么作為產(chǎn)品的界面設(shè)計(jì)師就需要知道在哪些關(guān)鍵節(jié)點(diǎn)上,用戶的注意力是集中的,哪些節(jié)點(diǎn)是分散的,如何引導(dǎo)用戶關(guān)注這個(gè)點(diǎn)。

所以通過研究這些用戶在使用過程中的關(guān)鍵節(jié)點(diǎn),可以抓住關(guān)鍵時(shí)機(jī),來達(dá)到塑造用戶行為的目的。那么,這些所謂的「關(guān)鍵」時(shí)機(jī)反映在注意力理論下,對應(yīng)的就是注意的「中心點(diǎn)」,反之為「分散點(diǎn)」。用戶在使用產(chǎn)品的時(shí)候,注意力總是從中心和邊緣來回切換。

舉個(gè)例子:讓交互設(shè)計(jì)師在信息流頁面做一個(gè)閱讀提示,用于用戶在更新消息流之后的場景,目的是能讓用戶發(fā)現(xiàn)更新之前的閱讀位置,并在此處刷新,不讓重復(fù)信息出現(xiàn),不影響用戶體驗(yàn)。那么下圖中哪個(gè)方案更合適?

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

中心點(diǎn):「上次看到這里,點(diǎn)擊刷新」的提示消息出現(xiàn)在此位置和時(shí)機(jī)是有講究的,由于它們出現(xiàn)在舊消息之前,新刷新的消息之后,用戶的閱讀注意力正在從新的信息流轉(zhuǎn)到舊的信息流,中間會出現(xiàn)注意力斷層的中心點(diǎn)。所以在此出現(xiàn)的提示更容易被用戶察覺,提示內(nèi)容才能發(fā)揮更大的價(jià)值,因此 A 方案最合適。

分散點(diǎn):B方案中消息提示在用戶刷新之后出現(xiàn)在底部,雖然該方式在 toast 的層級里,干擾性是最低的,因?yàn)樗奈恢迷诘撞?,會適當(dāng)減少用戶瀏覽內(nèi)容時(shí)所產(chǎn)生的干擾,但是從用戶行為路徑上看,顯然不合適,用戶的行為是要翻閱信息流,而它的出現(xiàn)方式與「翻閱」的行為是相違背的,反觀還是會阻礙用戶的瀏覽,雖然它的感知程度很強(qiáng),能讓用戶第一眼發(fā)現(xiàn)這個(gè)貼心的功能,但是出現(xiàn)的時(shí)機(jī)不對,這就影響了用戶體驗(yàn)。

增加趣味性:所謂趣味性,是指能引發(fā)用戶的正面情緒,比如使人感到愉悅、有意思,能感染人、打動人、教育人,這是能夠引起用戶注意力的重要因素。

增加產(chǎn)品趣味性的途徑有很多種,就拿微信 H5 為例:

隨著 H5 頁面技術(shù)上的突破和微信推廣程序井噴式的發(fā)展,微信 H5 推廣領(lǐng)域已經(jīng)成為各大 C 端產(chǎn)品的必爭之地。推廣的形式可以基于 H5 的框架進(jìn)行多種形式的拓展,比如:小游戲、邀請好友贏紅包、小程序等等。微信端 H5 推廣的優(yōu)點(diǎn)就是將推廣的趣味性融入產(chǎn)品當(dāng)中,將營銷手段運(yùn)用在用戶使用過程中。這樣做的好處顯而易見,通過趣味的游戲程序打開市場的缺口,用戶基于推廣程序的趣味性,有很強(qiáng)的分享動機(jī)。

說到分享動機(jī),就不得不說最近刷爆朋友圈的《能進(jìn)***的個(gè)個(gè)都是人才》,這個(gè)長圖就很有意思,每段內(nèi)容都能讓用戶產(chǎn)生共鳴,根本想不到這是篇廣告推文,直到最后一小段內(nèi)容才曝光了品牌和產(chǎn)品,但效果顯而易見(短短幾天閱讀量10萬+),所以這種趣味性的運(yùn)營方式很容易帶動用戶去分享,分享即裂變式傳播,而 C 端產(chǎn)品的運(yùn)營目的就是引流、裂變。

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

增加創(chuàng)意性:王者榮耀無疑是近年來受眾最廣、用戶最多、盈利最大的線上手游。我們通過分析這樣一個(gè)標(biāo)桿級的產(chǎn)品,可以得出創(chuàng)意對一個(gè)產(chǎn)品的成功與否到底起了什么作用?這款游戲火到咖啡廳一群人坐在那里玩一中午的原因在哪里?我想用我設(shè)計(jì)的眼光去審視一下王者榮耀,它到底為廣大玩家提供了一種怎樣的體驗(yàn)?

「容易上手」幾乎是王者榮耀玩家的共同感覺,而這種直觀感覺決定了一款手游能在多大程度上流行。一方面,王者榮耀采用了雙輪盤(左右兩邊一個(gè)操控區(qū)域)的操控方式,玩家通過左右兩邊的虛擬按鈕進(jìn)行控制,同時(shí)可以控制自動攻擊。新手玩家默認(rèn)自動攻擊,從可玩性角度很大程度上減少了用戶的學(xué)習(xí)成本。

雙輪盤的操作方式并不是王者榮耀首創(chuàng),但是他卻成就了這種經(jīng)典的交互方式,為后來產(chǎn)品樹立了一個(gè)成功的典范。操作方式的創(chuàng)新點(diǎn)還在于取消技能施法的方式。區(qū)別于 PC 端游戲,移動終端沒有鼠標(biāo)來控制技能釋放與否,王者榮耀采用技能滑至右上取消的方式,創(chuàng)新性地解決了小屏幕交互上存在的問題。

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

除了以上幾個(gè)設(shè)計(jì)點(diǎn)外,C 端產(chǎn)品的設(shè)計(jì)手段還有很多,主要包括:推送提醒、各種紅點(diǎn)提示、彈窗提示、嵌入廣告、分享刺激、打賞刺激等。無論采用任何設(shè)計(jì)方法,其核心的目標(biāo)始終是落在用戶的注意力上,通過吸引用戶注意的方式,達(dá)到塑造用戶行為的目的。

B端

產(chǎn)品設(shè)計(jì)者對于用戶的需求在一定程度上是可知的,所以 B 端產(chǎn)品是輔助用戶行為,比如我們要做一個(gè)企業(yè)報(bào)銷系統(tǒng),這些流程和工作行為已經(jīng)有一套標(biāo)準(zhǔn)的流程了,我們只需要將這些場景轉(zhuǎn)化為流程設(shè)計(jì)。那這個(gè)系統(tǒng)會存在哪些場景,只需要找到相應(yīng)的使用角色一聊就能挖掘出來,而且場景相對較固定,不用考慮用戶是不是喜歡這個(gè)功能,因?yàn)檫@是公司制度要求,不喜歡也得用。因此在設(shè)計(jì)初期,我們要做的就是充分挖掘相應(yīng)的功能需求,盡量把流程做到完善,而在設(shè)計(jì)上要有:合理的功能與模塊劃分、嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)、一致性的操作體驗(yàn)、干凈簡潔的界面設(shè)計(jì)。

合理的功能與模塊劃分:即在做產(chǎn)品信息架構(gòu)時(shí),就需要仔細(xì)考慮功能、模塊的劃分,客戶常用功能模塊有哪些,模塊與模塊之間的關(guān)系是怎樣的,當(dāng)然有些產(chǎn)品版本是通過客戶需求進(jìn)行個(gè)性化設(shè)計(jì)的,比如有的客戶要求為他們企業(yè)單獨(dú)設(shè)計(jì)一套工作流程,那么怎樣組合該客戶的功能模塊呢,這也是做 B 端產(chǎn)品經(jīng)常遇到的需求。而對于不同崗位的人員,他們的權(quán)限劃分也是不同的,比如在不同權(quán)限人員登錄時(shí)顯示的頁面有哪些不同?能查看到的模塊有哪些,里面的界面狀態(tài)是怎樣的?如果某崗位人員擁有不同的權(quán)限范圍,怎么設(shè)置他的功能可見性?不同權(quán)限的人員怎么協(xié)同工作?需要多人協(xié)作辦公時(shí),如何進(jìn)行業(yè)務(wù)上的移交、提醒、工作流的顯示?這些都是設(shè)計(jì)師需要仔細(xì)考慮的點(diǎn)。

都說 B 端產(chǎn)品業(yè)務(wù)復(fù)雜,細(xì)分下來,權(quán)限設(shè)計(jì)就是最要花心思的,因?yàn)樗婕暗讲煌挠脩艚巧?、崗位、場景,不能?C 端那樣常規(guī)化。

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì):B 端產(chǎn)品不用揣測客戶打開產(chǎn)品會干什么、引導(dǎo)他干什么,因?yàn)樗枪ぷ鬈浖?,在使用時(shí),客戶必然有明確的目的,需要什么他自己會打開,因?yàn)槎际撬麄冏约鹤钍煜さ臉I(yè)務(wù)范圍??偛豢赡芾盟槠臅r(shí)間在工作軟件上休閑一下吧,這個(gè)場景明顯不成立。同時(shí),設(shè)計(jì)師需要對產(chǎn)品的行業(yè)和業(yè)務(wù)具有一定的了解,如果產(chǎn)品只針對單一行業(yè),設(shè)計(jì)師只需要了解對應(yīng)行業(yè)的特性和需求即可,若是平臺類產(chǎn)品,需要面向多元行業(yè),那設(shè)計(jì)師就需要了解所有的目標(biāo)行業(yè)特性,找到他們的異同點(diǎn),針對不同使用場景,分析客戶的具體需求,最后產(chǎn)出合理且專業(yè)的流程方案。如果你不了解客戶的工作業(yè)務(wù),你就不能有質(zhì)量的產(chǎn)出他們滿意的流程方案,所以做 B 端產(chǎn)品不光要學(xué)習(xí)本職崗位的技能,還要了解目標(biāo)客戶他們的工作流程、業(yè)務(wù)知識。

一致性的用戶體驗(yàn):無論是 B 端還是 C 端產(chǎn)品都應(yīng)該遵循這一點(diǎn),這是互聯(lián)網(wǎng)產(chǎn)品最基本的素養(yǎng)。保持交互和視覺的一致性,讓用戶在使用時(shí),能感到熟悉、親切,能直觀地了解到操作會帶來怎樣的結(jié)果。在用戶疑惑時(shí),及時(shí)給予反饋,在遇到困難時(shí),給予幫助。在用戶迷茫時(shí),有效引導(dǎo)用戶,這就是一款聰明的產(chǎn)品,它能夠提前預(yù)知到用戶的所想所需。同時(shí),B 端產(chǎn)品的界面元素復(fù)用面積會比 C 端廣而大,因此 B 端產(chǎn)品更應(yīng)該注重交互的一致性。做過后臺的都應(yīng)該知道,一個(gè)提醒方式、一個(gè)表單控件,它們能覆蓋到 80% 的頁面。

干凈簡潔的界面設(shè)計(jì):B 端產(chǎn)品是為了工作而生,界面里往往都是「內(nèi)容為王」,不宜使用過于強(qiáng)烈的色彩對比,也不需要過于浮夸的設(shè)計(jì),整體產(chǎn)品調(diào)性都應(yīng)該盡量簡潔,不要讓視覺效果喧賓奪主,而應(yīng)該減少干擾用戶的「多余設(shè)計(jì)」。這里不是說炫酷的設(shè)計(jì)不實(shí)用,而是 B 端產(chǎn)品的目標(biāo)用戶不同于 C 端用戶,B 端用戶主要是通過產(chǎn)品來完成枯燥的工作,即便視覺效果做的再吸引用戶,他們也不會給你的產(chǎn)品帶來流量和黏度,因?yàn)橘I單者是高層,使用時(shí)間也相對固定。所以還不如把開發(fā)、設(shè)計(jì)的成本放在提升產(chǎn)品性能和流程體驗(yàn)上。

雖然我一名設(shè)計(jì)師,但毫無疑問,做 B 端產(chǎn)品必須要維持:功能為主的設(shè)計(jì)原則、視覺服務(wù)于功能的產(chǎn)品素養(yǎng)。這也是為什么很多 B 端產(chǎn)品喜歡用藍(lán)色系的原因,因?yàn)榕c藍(lán)色相關(guān)的負(fù)面信息很少,同時(shí)色彩上也不會過于強(qiáng)烈、刺激,一般人都不會排斥它,并且色彩含義也為理性、商務(wù)、科技,這就更適合 B 端產(chǎn)品的特性。

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性


關(guān)注點(diǎn)


1. C端關(guān)注人性

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

產(chǎn)品強(qiáng)調(diào):剛需、痛點(diǎn)、高頻、體驗(yàn)。

剛需

在 B 端產(chǎn)品設(shè)計(jì)中,我們往往面對的是剛需。用戶會非常明確的告訴你,幾乎無需挖掘,「我想要什么功能,我線下是怎么完成這個(gè)任務(wù)流程的,有這個(gè)功能我就付費(fèi),沒有這個(gè)功能我就不買單」。當(dāng)然,用戶所講并非用戶所需,需求仍需要梳理和驗(yàn)證。

而為什么 C 端產(chǎn)品卻要刻意強(qiáng)調(diào)「剛需」?因?yàn)?C 端產(chǎn)品的需求不同于 B 端產(chǎn)品,C 端產(chǎn)品的用戶量大、散、廣,缺乏組織性,需求具有模糊性,所以需要刻意去挖掘。經(jīng)??吹揭恍┊a(chǎn)品 YY 出一些客戶需求(「我」認(rèn)為的設(shè)計(jì)),其實(shí)這些需求用戶根本不需要。

痛點(diǎn)

在 B 端產(chǎn)品中,用戶選擇產(chǎn)品的決策過程中,有足夠的說服時(shí)間和機(jī)會,另外價(jià)格也會是一個(gè)非常重要的參考因素。

而在 C 端產(chǎn)品中,用戶喜歡更換成本較低(QQ和微信等社交類C端產(chǎn)品的更換成本很高,不在此列)、決策時(shí)間短,所以能否在極端的時(shí)間內(nèi),抓住用戶痛點(diǎn),就非常關(guān)鍵,比如通過運(yùn)營活動和情感化的視覺設(shè)計(jì),在短時(shí)間內(nèi)引起用戶的共鳴,形成熱點(diǎn)式引流。如果不能抓住用戶痛點(diǎn),產(chǎn)品很可能不會被下載,即使被下載,使用頻率也會非常低,漸漸的就藏在手機(jī)某個(gè)角落幾個(gè)月不更新,從隱藏逐漸走向了刪除,這樣的產(chǎn)品就會喪失競爭力。所以很多 C 端產(chǎn)品經(jīng)常推送一些運(yùn)營消息,文案還特別吸引人,目的都是為了讓用戶回歸,告訴你它還很想你。

高頻

在 B 端產(chǎn)品中,用戶使用頻率是由業(yè)務(wù)和工作量決定的,所以提高 B 端產(chǎn)品用戶使用頻率的機(jī)會并不多,總不能節(jié)假日的時(shí)候推送一條消息「少年,快回來工作吧,加薪升職就是現(xiàn)在」,這樣做毫無意義,也違背了它本身的商業(yè)價(jià)值。

而在 C 端產(chǎn)品中,用戶粘性、付費(fèi)率、轉(zhuǎn)化率、活躍度等往往跟用戶使用的頻率緊密相連。C 端產(chǎn)品很多都是免費(fèi)使用,通過增值服務(wù)收費(fèi),比如充值 VIP 享受更多特權(quán)等,只有通過免費(fèi)的方式,讓用戶先使用,從而培養(yǎng)了使用頻率,這才是增值服務(wù)收費(fèi)的基礎(chǔ)。所以高頻和流量就成為了能否實(shí)現(xiàn)增值收費(fèi)的關(guān)鍵點(diǎn)。

體驗(yàn)

C 端產(chǎn)品由于用戶缺乏組織的壓力,并且更換產(chǎn)品的成本低到?jīng)]有,刪除你就是幾個(gè)交互手勢而已,所以 C 端產(chǎn)品必須極其重視用戶體驗(yàn),想盡一切辦法留住用戶、鎖住用戶、讓用戶把產(chǎn)品當(dāng)成生活中不可分割的一部分。

用戶體驗(yàn)對 B 端產(chǎn)品也非常重要,但通常客戶更重視功能、流程和效率,而用戶體驗(yàn)則更多的體現(xiàn)在產(chǎn)品性能方面,試想你使用一款軟件工作,由于產(chǎn)品性能響應(yīng)非常遲鈍,而且數(shù)據(jù)不精準(zhǔn),你一定會很抓狂,很有可能一天的工作計(jì)劃被這款「該死」的產(chǎn)品所耽誤,所以在用戶體驗(yàn)上,性能要比界面更重要。

2. B端關(guān)注組織與業(yè)務(wù)

超全基礎(chǔ)科普!全方位解析 C 端和 B 端的產(chǎn)品特性

產(chǎn)品核心訴求:功能、流程、效率。

功能

不同于 C 端產(chǎn)品需要深入挖掘用戶的需求,B 端產(chǎn)品的需求往往是非常明確的,在功能的場景覆蓋面積上,和 C 端產(chǎn)品恰恰相反,功能多、大而全,這代表了一個(gè) B 端產(chǎn)品的完整性。但這里所謂的「功能多」,并不是一些雜七雜八的錦上添花的功能,而是為了覆蓋到更多業(yè)務(wù)場景的主要功能,這樣才能拿去賣錢,才能給客戶選擇性使用,才有了更多的商業(yè)競爭機(jī)會。

至于功能過多而產(chǎn)生的學(xué)習(xí)成本過高現(xiàn)象,在 B 端領(lǐng)域也不是一個(gè)大問題,因?yàn)?B 端領(lǐng)域的客戶往往需要專業(yè)的學(xué)習(xí),客戶也通常不會認(rèn)為是負(fù)擔(dān),反而因?yàn)檎莆樟诉@些技能而實(shí)現(xiàn)了自身價(jià)值的增值,因?yàn)?B 端產(chǎn)品是公司主動要求員工使用的。其次我們作為 B 端產(chǎn)品的開發(fā)者,很多公司也會提供相應(yīng)的業(yè)務(wù)培訓(xùn)和售后服務(wù)。

當(dāng)然,SAAS 類產(chǎn)品(B端產(chǎn)品之一)由于免實(shí)施的特點(diǎn),決定了功能要全面、又要容易上手的特點(diǎn),所以 SAAS 產(chǎn)品是 B 端產(chǎn)品中最難設(shè)計(jì)的一種,需要在商業(yè)和體驗(yàn)之間權(quán)衡。

流程

既然 B 端產(chǎn)品要滿足業(yè)務(wù)信息化的需求,那就必然涉及到流程設(shè)計(jì)。B 端系統(tǒng)必須要能貼合企業(yè)用戶的業(yè)務(wù)流程才能正常運(yùn)行,而不同企業(yè)的流程是不一樣的,所以 B 端產(chǎn)品的流程設(shè)計(jì)是一個(gè)非常大的挑戰(zhàn)。

因?yàn)楹芏鄷r(shí)候 B 端產(chǎn)品是將線下的流程轉(zhuǎn)移到線上,實(shí)現(xiàn)無紙化辦公、敏捷辦公,所以功能流程已經(jīng)在線下有一套完善的流程了,只需要在現(xiàn)有的流程上做簡化和整合即可,甚至一些線下的紙質(zhì)文件在線上變成電子檔時(shí),客戶都要求貼近原始文件,只有這樣才能順從之前的使用場景,降低學(xué)習(xí)成本,所以前面為什么說做 B 端產(chǎn)品設(shè)計(jì)要懂業(yè)務(wù),就是因?yàn)楫a(chǎn)品里的功能流程是線下轉(zhuǎn)移到線上,了解線下業(yè)務(wù)能幫助你更嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)線上流程。

效率

B 端的產(chǎn)品的業(yè)務(wù)經(jīng)常涉及到海量的數(shù)據(jù),所以在 B 端產(chǎn)品中,效率遠(yuǎn)遠(yuǎn)比用戶體驗(yàn)更重要,客戶不是在休閑時(shí)刻把玩你的產(chǎn)品,而是通過你的產(chǎn)品完成工作任務(wù)。比如要上傳 1000 條數(shù)據(jù),那么批量上傳等高效率的功能設(shè)計(jì)和性能保障,就比優(yōu)化上傳界面的用戶體驗(yàn)要重要得多。

至今我們?nèi)匀豢梢钥吹接行┥坛€在用一些 DOS 平臺上開發(fā)的收銀系統(tǒng),雖然這些系統(tǒng)已經(jīng)非常陳舊、用戶體驗(yàn)已經(jīng)很差了。但是由于使用時(shí)間很長,而且效率非常高,所以依然保持著旺盛的生命力。


產(chǎn)品特性對比


1. 客戶VS用戶

客戶

使用 B 端產(chǎn)品的人或組織。說白了就是給錢的合作方,它們通常是一個(gè)企業(yè),以企業(yè)或部門的名義,購買或租賃了你們公司所開發(fā)的產(chǎn)品。

用戶

使用 C 端產(chǎn)品的人。而個(gè)人使用者則是不受工作場景限制的每個(gè)人,拿起一個(gè)產(chǎn)品就可以注冊登錄,并直接上手把玩。

客戶是理性的,用戶是感性的??蛻絷P(guān)心 ROI(投入產(chǎn)出比),用戶關(guān)心過程(滿足人性的某個(gè)弱點(diǎn))。

舉個(gè)例子:雙十一基本上成為一個(gè)全民狂歡節(jié),很多人吃土也要剁手,為什么?因?yàn)楸阋?,很多人趁著氛圍一沖動就各種買買買了。

但我們很少聽說有 B 端產(chǎn)品在搞促銷,一是因?yàn)槠髽I(yè)的采購?fù)ǔS杏?jì)劃安排,可能還需要財(cái)務(wù)的各種審批,不太可能剛好就在你促銷的時(shí)候企業(yè)就需要采購;二是企業(yè)的采購要考慮投入產(chǎn)出比,而不會因?yàn)槟愦騻€(gè)折扣就決定買你家的商品,這關(guān)乎到企業(yè)利益和你自己的利益。

但個(gè)人用戶不一樣,購物車存了好長時(shí)間的商品,總是嫌貴舍不得買,可是看到雙十一突然打5折,這下便有了沖動的借口,畢竟錯(cuò)過再等一年。

客戶有級別之分,用戶則基本一樣

企業(yè)有大小之分,10 個(gè)人的微企業(yè)和 100 個(gè)人的小型企業(yè)是不一樣的,同樣 1000 個(gè)人的中型企業(yè)和 10000 個(gè)人的大型企業(yè)也不一樣。更準(zhǔn)確地說,對于同類產(chǎn)品不同大小的企業(yè)它們的需求是不一樣的,可能因?yàn)槠髽I(yè)的管理方式不一樣,有些企業(yè)會提出一些個(gè)性化的需求。

比如同樣需要內(nèi)部溝通產(chǎn)品,10 個(gè)人的企業(yè)大家都坐在一個(gè)辦公室里,需要找誰討論問題,吼一嗓子隔壁公司都能聽見,隨時(shí)隨意可以開會,需要的只是傳播聲音的載體──空氣。

但如果是 100 個(gè)人的小型企業(yè),可能吼一嗓子就沒那么好用了,因?yàn)椴皇敲總€(gè)人都熟悉,并且座位可能會離的很遠(yuǎn),這時(shí)候就需要一個(gè)微信群方便大家溝通,這時(shí)的傳播載體是──微信群。

如果是 1000 人的中型企業(yè),跨部門協(xié)作的場景就非常多,很多時(shí)候要找的人是不認(rèn)識的,還有可能對方故意潛水半天不回信息,這個(gè)時(shí)候提高溝通效率就顯得特別重要,所以「釘釘」和「企業(yè)微信」的「已讀、未讀」功能就很受這種場景的歡迎,對方是否在故意潛水,就看是不是已讀,如果長時(shí)間未讀那就可以通過語音或電話找,所以中型企業(yè)就很適合用這類產(chǎn)品。

那 10000 人以上的企業(yè),可能「釘釘」和「企業(yè)微信」他們的原生功能也不一定能滿足復(fù)雜的協(xié)同需求,需要更多人性化的功能,這種情況一般是自己開發(fā)相應(yīng)功能,或外包給第三方開發(fā),然后接入「釘釘」或「企業(yè)微信」。

上面說的是 B 端產(chǎn)品面向的客戶有大小之分,下面我們來看看 C 端產(chǎn)品面向的用戶是怎么基本一樣的。

再拿微信舉個(gè)例子,從身份地位、收入上看微信的用戶也是千差萬別,但是從微信滿足的人性弱點(diǎn)角度來看(懶惰、窺竊、色欲、存在感、虛榮、貪婪、沖動、從眾、分享、嫉妒等),用戶與用戶之間并沒有什么區(qū)別。一位成功人士和一位無業(yè)游民都有懶惰、虛榮等缺點(diǎn)。只是嚴(yán)重程度可能有所差別,他們都有通過朋友圈各種「炫耀」的需求,只是炫耀的內(nèi)容可能不一樣而已。所以作為 C 端產(chǎn)品,理論上是能滿足所有用戶的需求的,當(dāng)然有極少部分是不看不發(fā)朋友圈的,這種小概率群體可以不計(jì)算在內(nèi)。所以 C 端產(chǎn)品留下來的用戶,他們的需求都是被該產(chǎn)品所解決過的,因?yàn)檫@些用戶都有相同的需求,雖然他們的身份都不一樣。

2. 工具VS「玩具」

工具的目標(biāo)是性價(jià)比,玩具目標(biāo)是休閑

性價(jià)比包含了兩個(gè)指標(biāo),性能(效率)和價(jià)格。不難理解的是,企業(yè)之間的競爭本質(zhì)上就是生產(chǎn)效率的競爭。所以企業(yè)采購的工具(B端產(chǎn)品)肯定是為了提高生產(chǎn)效率,比如各種管理系統(tǒng)是為了提高客戶管理的效率,數(shù)據(jù)庫系統(tǒng)是為了提高記錄和運(yùn)算的效率,在此基礎(chǔ)上再橫向?qū)Ρ葍r(jià)格,性價(jià)比最高的當(dāng)然最適合。要吸引企業(yè)來購買產(chǎn)品,B 端產(chǎn)品不得不考慮產(chǎn)品效率和價(jià)格。

「玩具」的主要目標(biāo)是好玩、休閑,這里指的都是用戶體驗(yàn),可以理解為用戶通過碎片化的時(shí)間去享受產(chǎn)品給他帶來的愉悅感、歸屬感、放松感,而用戶體驗(yàn)則是吸引用戶的重點(diǎn)。而滿足人性弱點(diǎn)的體驗(yàn)就是好的體驗(yàn),好的體驗(yàn)都出現(xiàn)在「聰明」的產(chǎn)品上,即「眼色活」、幫助用戶思考、做到用戶行為的前面去,講的就是要滿足用戶「懶得思考」的弱點(diǎn)。比如我們都知道國民產(chǎn)品微信的用戶體驗(yàn)做得很棒,其中有一點(diǎn)就是易用性,老年人都可以用的產(chǎn)品,滿足了「懶」這一人性弱點(diǎn),再加上其它的一些功能滿足「虛榮(炫耀)」、「偷窺(看過去的朋友圈)」等弱點(diǎn),就能讓產(chǎn)品變得好玩,只有好玩才能引流,這正是 C 端產(chǎn)品追逐的目標(biāo),因?yàn)楹芏?C 端產(chǎn)品的商業(yè)模式都是建立在巨大的用戶群體之上,有了流量,金錢也正在路上。

工具的生命周期比「玩具」的生命周期更長久

相對于 C 端產(chǎn)品,B 端產(chǎn)品的生命周期更長,一是因?yàn)?B 端產(chǎn)品作為業(yè)務(wù)工具,本身就比較復(fù)雜,開發(fā)這樣的產(chǎn)品是需要大量的行業(yè)經(jīng)驗(yàn)積累和技術(shù)積累,因此一款 B 端產(chǎn)品一旦贏得市場認(rèn)可,就能建立經(jīng)驗(yàn)和技術(shù)壁壘。二是 B 端產(chǎn)品基本都是要花錢購買的,一旦企業(yè)采購了該產(chǎn)品,員工也熟悉了如何使用,再換新的產(chǎn)品成本就比較大,所以更換的意愿會比較低。

C 端產(chǎn)品為好玩而存在,當(dāng)新推出的產(chǎn)品更好玩的時(shí)候,那老產(chǎn)品的生命周期和地位可能要面臨著挑戰(zhàn)。比如 QQ 和微信推出后,短信就被替代了,同樣是通訊類產(chǎn)品,微信和 QQ 就好玩很多??赡苡腥藭f因?yàn)槎绦攀召M(fèi),這并不是最重要的原因,即便短信現(xiàn)在完全免費(fèi),估計(jì)也沒幾個(gè)人用了,因?yàn)槲⑿挪恢鼓馨l(fā)消息,還能發(fā)各種表情、圖片、語音、視頻、支付等,自然前者就被后者所替代了。同理,當(dāng)微信被玩膩,人們發(fā)現(xiàn)下一個(gè)產(chǎn)品更好玩時(shí),微信也同樣會受到挑戰(zhàn),可以對比下三年前和現(xiàn)在的朋友圈、訂閱號原創(chuàng)文章的質(zhì)量就明白了。對了,還有「曇花一現(xiàn)的子彈短信」。所有說產(chǎn)品都是有周期性的,只不過 C 端產(chǎn)品要比 B 端產(chǎn)品的生命周期更短。

工具復(fù)雜難用,玩具簡單易用

B 端產(chǎn)品復(fù)雜難用這是眾所周知的,而 C 端產(chǎn)品老人都可以用得很溜。為什么?一方面,B 端產(chǎn)品是工具類,用于生產(chǎn),而不是我們的日常生活,使用工具很多時(shí)候不是人的本能行為,而是為了達(dá)到某一目的而學(xué)會的技能,因此一般是要經(jīng)過培訓(xùn)學(xué)習(xí)才會使用,所以很多 B 端產(chǎn)品有售前/售后方案、使用手冊、業(yè)務(wù)培訓(xùn)等等。

另一方面,這和 B 端產(chǎn)品的目標(biāo)有關(guān)(效率、準(zhǔn)確、安全),當(dāng)開發(fā)資源都用在打造產(chǎn)品性能的時(shí)候,用在用戶體驗(yàn)方面的開發(fā)資源難免會不足,所謂「功能先行」,就是這個(gè)道理。

而 C 端產(chǎn)品的目標(biāo)就是易用性、易通性,只有用戶體驗(yàn)做的比競品好,才能贏得用戶和流量。假如 C 端產(chǎn)品需要拿著產(chǎn)品說明書才能玩下去,那這種產(chǎn)品一定會被淘汰。

3. 「賣軟件」VS「秀軟件」

B端產(chǎn)品「賣軟件」

之所以說 B 端產(chǎn)品的商業(yè)模式是「賣軟件」,是因?yàn)?B 端產(chǎn)品實(shí)實(shí)在在的一手交錢一手交貨,也就是說 B 端產(chǎn)品開發(fā)出來是要直接賣錢的。即 B 端產(chǎn)品從誕生第一天起就要考慮如何銷售,甚至有些開發(fā)團(tuán)隊(duì)直接用原型 demo 去談客戶,最后還成交了。

通常來說一款 B 端產(chǎn)品如果能有幾十萬客戶已經(jīng)是用戶量特別大的產(chǎn)品了,不像 C 端產(chǎn)品動不動就是上千萬、上億,甚至上十億用戶量。因此通過流量變現(xiàn)的方法是行不通的??梢韵胂笕绻粋€(gè)企業(yè)工具里面插入各種雜七雜八的廣告,這得受到多少企業(yè)用戶的吐槽,關(guān)鍵是這些廣告還不能直接變現(xiàn),這里最基本的口碑就沒了。另一方面,對于性價(jià)比高的 B 端產(chǎn)品,企業(yè)是愿意自主付費(fèi)的。自然而然就形成了垂直變現(xiàn)的商業(yè)模式。

C端產(chǎn)品「秀軟件」

C 端產(chǎn)品的商業(yè)模式通常是間接變現(xiàn)。通過開發(fā)出用戶需要的產(chǎn)品,把產(chǎn)品的體驗(yàn)做好,內(nèi)容形式有針對性,從而吸引更多的用戶來使用。產(chǎn)品本身是免費(fèi)的,比如百度,支付寶,微信等產(chǎn)品。在用戶量足夠大的前提下,通過廣告、推廣等方式變現(xiàn),本質(zhì)上就是流量間接變現(xiàn)的商業(yè)模式。之所以 C 端產(chǎn)品這么做,是因?yàn)橛脩羧后w足夠龐大,當(dāng)用戶量足夠大的時(shí)候,廣告產(chǎn)生的收入就很可觀,同時(shí)還能實(shí)現(xiàn)同類產(chǎn)品引流,把用戶引導(dǎo)到各種「同父異母」的應(yīng)用上,創(chuàng)造二次流量。比如「手機(jī)百度」看短視頻必須要打開「全民小視頻」和「好看視頻」。


設(shè)計(jì)師從C轉(zhuǎn)向B是什么感受?


不少設(shè)計(jì)師在做過一段時(shí)間 B 端產(chǎn)品設(shè)計(jì)后會感覺缺乏激情和多樣性,因?yàn)樽隹犰诺囊曈X效果和時(shí)尚的微交互的機(jī)會并非常有。時(shí)間一長就會發(fā)現(xiàn)它既無聊又單調(diào),整天面對一些表單、可視化數(shù)據(jù),何時(shí)才能出頭?時(shí)間一長會懷疑人生。

正因如此,設(shè)計(jì)師們感受不到設(shè)計(jì)帶來的成就感,如果不重新認(rèn)清自我、調(diào)整好心態(tài)、設(shè)立工作計(jì)劃,很容易原地踏步。這里不是說設(shè)計(jì)師不利于做 B 端產(chǎn)品,而是要結(jié)合自己的職業(yè)規(guī)劃做選擇。

我從 C 端轉(zhuǎn)戰(zhàn) B 端之后,發(fā)現(xiàn) B 端產(chǎn)品吸引我的有以下幾點(diǎn)。

1. 更有挑戰(zhàn)性

B 端產(chǎn)品相對而言,場景、功能、業(yè)務(wù)流程、信息架構(gòu)要比 C 端更復(fù)雜,面對的異常情況也比較多,一些專業(yè)性強(qiáng)的行業(yè),甚至還需要一定的背景門檻,比如一些互金公司會幫助 PM 和設(shè)計(jì)師考取金融行業(yè)相關(guān)資格證。正因難度更大,設(shè)計(jì) B 端產(chǎn)品才更具挑戰(zhàn)性。

而C端產(chǎn)品目前各行業(yè)基本成熟,產(chǎn)品同質(zhì)化相當(dāng)嚴(yán)重,競品中有大部分都差不多,設(shè)計(jì)師很多時(shí)候的工作就是在做領(lǐng)導(dǎo)和產(chǎn)品經(jīng)理的需求,「借鑒、學(xué)習(xí)」成熟競品的設(shè)計(jì)。而 B 端市場還處在發(fā)展中狀態(tài),現(xiàn)在正是市場紅利的時(shí)候,競品雖少,但商業(yè)競爭殘酷,即便下載了競品,你沒有體驗(yàn)賬號還是進(jìn)不去的,所以從一定意義上講,做 B 端產(chǎn)品的設(shè)計(jì),很多時(shí)候都需要自己去調(diào)研用戶需求,去摸索設(shè)計(jì)方法,并做出方案去驗(yàn)證它。對 UI 和交互設(shè)計(jì)師來說,復(fù)雜的業(yè)務(wù)場景和產(chǎn)品邏輯能讓你養(yǎng)成嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)習(xí)慣(思維),以后 UI 轉(zhuǎn)交互,或轉(zhuǎn)產(chǎn)品經(jīng)理,B 端的設(shè)計(jì)經(jīng)驗(yàn)都是一個(gè)非常牢固的基礎(chǔ)。

2. 更能體現(xiàn)設(shè)計(jì)師的價(jià)值

上面也說了,C 端的成熟產(chǎn)品很多,產(chǎn)品也經(jīng)過市場檢驗(yàn)了,優(yōu)秀的產(chǎn)品站在更高的角度,去除設(shè)計(jì)師自己的情懷來看,在一段時(shí)間內(nèi)很難再有突破性的創(chuàng)新,只能在細(xì)節(jié)和體驗(yàn)上微創(chuàng)新,主要還是靠產(chǎn)品經(jīng)理發(fā)現(xiàn)功能痛點(diǎn)或運(yùn)營的手段,設(shè)計(jì)師在這種情況下發(fā)揮的價(jià)值有限,往往地位也很低下。一般的互聯(lián)網(wǎng)公司,很多設(shè)計(jì)師都是執(zhí)行者,很難參與到產(chǎn)品層面的工作,在開發(fā)眼里覺得設(shè)計(jì)師就是畫圖的。

3. 更能進(jìn)行行業(yè)深耕

B 端設(shè)計(jì)師對行業(yè)、業(yè)務(wù)的了解遠(yuǎn)遠(yuǎn)深得多,他們做的不止是框架層和表現(xiàn)層的東西,每設(shè)計(jì)一個(gè)功能,必須要了解該功能在整個(gè)產(chǎn)業(yè)鏈的位置、功能目的,對其他業(yè)務(wù)環(huán)節(jié)有什么影響等等,只有對行業(yè)了解得更深入,才有更多的機(jī)會享受行業(yè)帶來的紅利。

以上是我的個(gè)人看法,當(dāng)然設(shè)計(jì)師如何選擇 C 端和 B 端,這和自己的興趣、職業(yè)方向有非常大的關(guān)聯(lián)。偏視覺的設(shè)計(jì)師做B端產(chǎn)品時(shí)肯定會有一些局限性,偏交互的設(shè)計(jì)師在你經(jīng)歷完 B 端的產(chǎn)品設(shè)計(jì)之后,你會發(fā)現(xiàn) C 端的邏輯真的很簡單。所以無論怎么選,請先考慮好自己的個(gè)人因素,并不能因?yàn)楝F(xiàn)在 B 端火,你就跟風(fēng),喜不喜歡、適不適合、能不能在 B 端領(lǐng)域生存下去,還是要看你自己。

作者:UXD筆記

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




更多精彩文章:

Cs界面設(shè)計(jì)之二:如何區(qū)別B端與C端的產(chǎn)品設(shè)計(jì)差異?我總結(jié)了26條對比!






日歷

鏈接

個(gè)人資料

存檔