首頁

Cs界面設(shè)計之五:B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

博博

經(jīng)常在網(wǎng)上看到「B 端產(chǎn)品 C 端化」的討論。

一開始我以為這個概念是說 B 端產(chǎn)品以前做得太差了,但隨著競爭越來越激烈,以后也要像 C 端產(chǎn)品那樣注重用戶體驗,更加輕量化、趣味性和人文關(guān)懷才行。

當時我還挺不以為然,感覺像是噱頭或者自嗨。

把用戶體驗做好雖然重要,但是這對 B 端公司的實際業(yè)務(wù)(錢)未必有什么直接影響。

因為對于絕大部分客戶來說,功能、效率和價格才是真正的硬指標,而且光是能找到能同時滿足這三點的產(chǎn)品就很不容易了!

然而,我最近剛開始參與一個 B 端項目,為了做競品調(diào)研,我試用了國內(nèi)外十多款產(chǎn)品(國外為主)。

做完之后,我深刻反思了自己過去對「B 端產(chǎn)品 C 端化」的理解還是太膚淺。


為什么要 C 端化?


其實 B 端產(chǎn)品 C 端化,并不是因為傳統(tǒng)的 B 端產(chǎn)品沒 C 端好用(不是這么比的)。

其實關(guān)鍵還是獲客模式的轉(zhuǎn)變。

傳統(tǒng)的 B 端產(chǎn)品是銷售驅(qū)動,銷售人員通過電話、上門拜訪等形式促使客戶下單。

一旦成功賣出,只要后續(xù)的服務(wù)不太差,客戶就沒必要更換遷移。

現(xiàn)在 B 端市場越來越大、行業(yè)信息越來越透明、客戶的判斷能力越來越強,傳統(tǒng)銷售模式開始變?yōu)榛ヂ?lián)網(wǎng)營銷。

B 端產(chǎn)品在網(wǎng)上發(fā)布信息并投放廣告,吸引客戶自己前來試用并購買,只需提供少量客服人員即可。

這與以往的 B 端業(yè)務(wù)模式有很大不同,所以就需要變革。

所謂「B 端產(chǎn)品 C 端化」,表面上是學(xué)習(xí) C 端的用戶體驗,背后的真正意圖是要學(xué)習(xí)人家 C 端的互聯(lián)網(wǎng)獲客能力。

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!


怎樣才是好的 C 端化?


我發(fā)現(xiàn) B 端產(chǎn)品的 C 端化程度,和他們的互聯(lián)網(wǎng)廣告投放力度成正相關(guān)。

例如我在油管上經(jīng)常受到 Monday、GoDaddy 這兩款 B 端產(chǎn)品的輪番轟炸。

先不說好不好用(畢竟我也不是目標客戶),我發(fā)現(xiàn)他們用起來真的很有「C 端感」,和傳統(tǒng)的 B 端產(chǎn)品果真不一樣。

倒不是什么“輕量化、趣味性和人文關(guān)懷”,而是因為他們在我打開網(wǎng)站的那一刻,就開始不斷吸引我探索使用。

我拿 GitLab 和 Monday 的官網(wǎng)首頁對比一下,也許你就能感受到了:

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

前者像是一板一眼的「老實人」,后者則像是對你笑瞇瞇的「綠茶妹」,高下立判。

“輕量化、趣味性和人文關(guān)懷”這些東西,并不足以打動用戶試用和購買,頂多只能算是「低段位」手段。

只有「高段位」手段,才能讓用戶不自主地地被吸引,心甘情愿地掏錢。

可是要做到「高段位」真的很不容易,我今天就總結(jié)幾個技巧吧~

1. 直接坦誠

遇到兩個陌生人:一個打官腔又遮遮掩掩的;另一個說話友善接地氣又誠實,你會更喜歡哪個?

可能大多數(shù)人跟我一樣會喜歡第二個。

C 端化做得好的 B 端產(chǎn)品,會把自己的產(chǎn)品預(yù)覽圖直接放到首頁供人觀看,而不是搞一張概念圖外加一堆高大上的廣告詞。

前面放過的那張案例,這里也可能拿來用:

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

GitLab 的官網(wǎng)畫了一些很抽象的概念圖,寫了一些很抽象的描述,給人感覺很模糊。

Monday 的官網(wǎng)明確把自己的業(yè)務(wù)類型列了出來供用戶選擇,還把每種業(yè)務(wù)對應(yīng)的圖標和展示方式畫了出來,感覺很明確清晰。

2. 有效互動

遇到兩個健身房銷售:一個上來就說一個勁地介紹服務(wù);另一個則先確認你平時的健身習(xí)慣,再根據(jù)你的情況介紹服務(wù),你會更愿意聽誰說話?

我肯定更喜歡第二個。

C 端化做得好的 B 端產(chǎn)品,不是簡單地展示信息,而是先了解用戶,再根據(jù)用戶的需求提供不同的信息甚至服務(wù)。

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

Zendesk 的網(wǎng)站,會把自己的功能列出來給用戶,給的圖像和描述又很抽象,毫無互動感。

而 Asana 會讓用戶選擇自己需要的功能,并直接給出具體案例的界面展示圖。

3. 降低門檻

遇到商場逛街時遇到兩個陌生餐館,一家在二樓;另一家在一樓,你會愿意嘗試哪家?

肯定是第二個。

很多 C 端化做的好的 B 端產(chǎn)品,會把表單用彈窗的樣式放在產(chǎn)品上面,讓用戶感覺只要填寫完就能立即使用了。

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

比起 Trello,Smartsheet 只是在表單展示了一下產(chǎn)品內(nèi)部,就讓用戶感覺門檻低了好多。

即便 Smartsheet 的新用戶后面發(fā)現(xiàn)背后那張圖真的這是一張圖而已,要填的一點不少,但這時都已經(jīng)快填完了……

4. 循序漸進

兩家陌生的兩家餐廳都把菜單擺出來了,一家的菜單寫得密密麻麻;另一家的菜單雖然菜品不多,但是推薦菜品和菜式分類很清晰,你會更愿意嘗試哪家?

我相信很多人都會更愿意嘗試后者。

C 端化做得好的 B 端產(chǎn)品,不會太在意自己的產(chǎn)品是不是看起來功能齊全,而是更在意用戶是否能夠很好的理解產(chǎn)品,不要造成心理負擔。

B端產(chǎn)品C端化是自嗨?對不起我想得太簡單了!

上圖來源:Figma 這些交互細節(jié),B 端設(shè)計也值得借鑒

Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異,但是后者看起來卻清晰簡潔許多,對新用戶更加友好。


總結(jié)


B 端產(chǎn)品 C 端化這個理念其實很好,但如果被誤以為只是向 C 端學(xué)習(xí)用戶體驗?zāi)蔷涂上Я恕?

用戶體驗只是手段,關(guān)鍵目的是在沒有銷售人員參與的情況下,如何從互聯(lián)網(wǎng)獲客。

這次的經(jīng)驗的提醒我,以后如果再看到一些很火概念,不要簡單的從表面理解,而是要站在決策者的角度,多思考背后的真實意圖。

作者:ZoeYZ

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

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

魏華的微信.png

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

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

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



更多精彩文章:

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













Cs界面設(shè)計之四:如何打造一個優(yōu)秀的C端組件庫?來看實戰(zhàn)案例!

博博

“組件”是平臺級產(chǎn)品非常重要的組成部分,設(shè)計組件不僅可以節(jié)約設(shè)計和開發(fā)成本,更是設(shè)計理念的約束性體現(xiàn)。但是,隨著平臺級產(chǎn)品業(yè)務(wù)場景的復(fù)雜度不斷增加,過往沉淀的設(shè)計組件的交互模式和視覺形式,卻跟不上業(yè)務(wù)發(fā)展的訴求。因此,我們思考:如何建立和迭代一個優(yōu)秀的組件庫——不僅能保持良好的普適性,解決全平臺產(chǎn)品的體驗一致性的問題;并且能夠保持各個業(yè)務(wù)線的特色和定制化需求,即所謂平臺級組件的“和而不同”。


升級組件庫的背景和目標


隨著近兩年業(yè)務(wù)的發(fā)展,早期沉淀的組件漸漸無法滿足業(yè)務(wù)訴求,一部分組件的使用率和覆蓋率很低。

因此我們決定對貝殼平臺組件進行一次全新的升級。我們的目標不僅是針對“基礎(chǔ)組件”進行優(yōu)化,保持其良好的通用性,達到“和”的目的;更希望能夠承載業(yè)務(wù)線(二手房、新房和租房)更多體驗場景的需要,做到服務(wù)于業(yè)務(wù)的“不同”。

為了更好的實現(xiàn)升級目標,我們思考了以下幾個問題:

1. 設(shè)計組件庫的使用人員有哪些不同的角色?他們的訴求是否有區(qū)別?

在我們眼里,設(shè)計組件是對設(shè)計工作的一種管理,而設(shè)計工作從產(chǎn)出到落地的完整鏈條上,主要有三種角色的人群:

貝殼平臺設(shè)計師和各個業(yè)務(wù)線設(shè)計師:平臺設(shè)計師窮舉組件使用場景的同時,提煉業(yè)務(wù)訴求,幫助業(yè)務(wù)線設(shè)計師通過組件更省時省力的高效完成設(shè)計工作。

開發(fā)團隊:通過設(shè)計師的輸出,明確組件開發(fā)的具體框架和自由度(例如按鈕顏色是否支持不同業(yè)務(wù)自定義等)

產(chǎn)品團隊:通過設(shè)計組件文檔明確設(shè)計的標準,在各角色有共同標準的認知下,需求中可使用組件搭建的部分無需重復(fù)提需求,節(jié)約各方成本。

因此,設(shè)計師需要產(chǎn)出的并不是一份簡單的組件庫源文件,而是一份以不同角色合作伙伴的視角,都能看得懂的設(shè)計組件表達文檔。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 1 給設(shè)計、產(chǎn)品和開發(fā)不同的文件樣式

2. 組件真的是越多越好嗎?

我們給出的結(jié)論是:面面俱到反而無從下手。在做設(shè)計組件時,大多數(shù)同學(xué)都會有患得患失的心理,認為組件足夠多,就可以應(yīng)對更多的使用場景,規(guī)范也足夠細致和統(tǒng)一。

但是這是一個比較理想的狀態(tài),過于低微的顆粒度下,設(shè)計反而會失衡。這里的失衡是指,創(chuàng)新和規(guī)范之間的平衡被打破,顯然不是我們想要的。并且平臺級組件庫是具備再生和持續(xù)發(fā)展的生長能力的,因此不必一味追求數(shù)量。

3. 采用什么方法可以合理的控制組件的質(zhì)量和數(shù)量,挑選出通用度高的組件呢?

我們優(yōu)先梳理了貝殼平臺流量 TOP30 的核心關(guān)鍵頁面,依據(jù)數(shù)據(jù)圈定范圍,然后進行組件的整理。如下圖,我們發(fā)現(xiàn)使用率最高的前十名組件,按照降序排列依次為:tabs 選擇>Navbar>房源卡片(業(yè)務(wù)通用組件)>經(jīng)紀人展位(業(yè)務(wù)通用組件)>按鈕>通知與提示>彈層>搜索框>操作菜單>標準懸浮球。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 2 貝殼平臺流量 TOP30 頁面組件應(yīng)用情況

這樣,我們就可以按照以上優(yōu)先級,優(yōu)先設(shè)計和代碼化使用頻次較高的組件。

我們將貝殼原有組件庫的全部組件打散,重新定義后分成三大類別:

平臺基礎(chǔ)組件:指不具有業(yè)務(wù)屬性的元件及基礎(chǔ)組件,例如:按鈕/表單/列表/搜索欄/系統(tǒng)反饋彈層/操作欄/Navbar 等。

業(yè)務(wù)通用組件:指橫跨多業(yè)務(wù),但在不同的業(yè)務(wù)場景中略有變化,有公共元件可提煉,例如:經(jīng)紀人展位/房源卡片。

業(yè)務(wù)特性組件:指只屬于某一業(yè)務(wù)應(yīng)用范疇的組件,無公共元件可提煉,但是在單一業(yè)務(wù)線復(fù)用率較高。

組件的明確分類,可以幫助我們在日后每當有新增組件時,以統(tǒng)一的標準和原則進行歸納和整理。


優(yōu)化業(yè)務(wù)通用組件


除了優(yōu)化平臺基礎(chǔ)類型的組件外,我們還對其中使用頻率很高的業(yè)務(wù)通用組件——房源列表進行了優(yōu)化。

房源列表是在貝殼平臺通常以線性結(jié)構(gòu)呈現(xiàn)的。用戶通過縱向掃讀來獲取房源宏觀信息,橫線瀏覽來了解單個房源條目的細節(jié)信息并進行相關(guān)操作。它在二手房、新房、租賃、海外等等業(yè)務(wù)線,都會經(jīng)常被使用到。貝殼平臺原房源列表樣式,由于業(yè)務(wù)的發(fā)展,需要展示的信息逐步增多,依次羅列在列表中,導(dǎo)致展示效率變低,無吸引用戶的亮點,最終導(dǎo)致用戶對房源列表的“決策效率降低”。

而想要提升決策效率,并且優(yōu)化后的列表能夠在各個業(yè)務(wù)線使用,我們先要了解,在不同業(yè)務(wù)場景中,房源卡片都要展示哪些內(nèi)容?這里我們應(yīng)用到了先前研究得出的結(jié)論——用戶瀏覽房源列表的心智模型。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 3 用戶瀏覽房源的心智模型

在心智模型的指導(dǎo)下,我們進行了“元素窮舉”。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 4 元素窮舉

得到了具體展示哪些元素后,我們開始思考,一個包容性強的列表底層結(jié)構(gòu)應(yīng)該是什么樣子?經(jīng)過幾次的反復(fù)推敲和嘗試,我們得出如圖所示的三層結(jié)構(gòu):容器背板層、可交互操作層、內(nèi)容展示層。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 5 房源列表的三層結(jié)構(gòu)

容器背板層:它是承載列表內(nèi)部所有內(nèi)容的盒子,我們在這一層,定義了容器的形狀,圓角等屬性,使它成為一個統(tǒng)一的底層模版。

可交互操作層:這一層放置的是用戶關(guān)于列表可進行的全部操作,例如關(guān)注,查看 VR 圖片等。并且,我們針對具體每一種操作行為,定義了統(tǒng)一的交互方式。

內(nèi)容展示層:這一層涵蓋所有用戶可以查看的具體信息,包含房源標題、樓盤名稱、房源詳細信息和價格的動態(tài)浮動變化信息。

通過三個層次的劃分,我們可以清晰的定義每個層次的具體的職責是什么,這有利于我們后期面對復(fù)雜業(yè)務(wù)場景和海量信息內(nèi)容時,可以更好的去歸納和組織信息的呈現(xiàn)。

在完成了元素窮舉和結(jié)構(gòu)分層之后,我們繪制了一個基礎(chǔ)框架模版,如下圖:

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 6 房源列表基礎(chǔ)框架

然后我們將不同業(yè)務(wù)線的具體細節(jié)信息,嵌入模版中,設(shè)計成各個針對不同業(yè)務(wù)和不同場景使用的房源列表。帶著這樣的設(shè)計結(jié)果,我們與業(yè)務(wù)線的產(chǎn)品經(jīng)理和設(shè)計師同學(xué)進行了一次深入的探討,并且確定可推行迭代的節(jié)奏。


數(shù)據(jù)與結(jié)果


綜合 14 天數(shù)據(jù),二手房改版后,CTR 由原來的 44.65%提升到 51.35%。這對于房源列表來說,是非常難得的。

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 7 改版后的數(shù)據(jù)結(jié)果


總結(jié)


以上就是本文的全部內(nèi)容,相信大家已經(jīng)掌握了 C 端組件庫建立的基本方法,這里我們總結(jié)一下組件庫的創(chuàng)建流程:

如何打造一個優(yōu)秀的C端組件庫?來看貝殼設(shè)計的實戰(zhàn)案例!

△ 圖 8 C 端組件庫的創(chuàng)建流程

組件庫是每一位用戶體驗設(shè)計師,在日常工作中積累的設(shè)計資產(chǎn)。組件要做到“和而不同”,“和”是指用規(guī)范化的底層容器,將抽離出復(fù)用率高的元素包裹起來,形成體驗一致,交互一致的封裝模塊?!安煌笔侵福織l業(yè)務(wù)線可以根據(jù)自身具體的使用場景,去定義各自在內(nèi)容展示層要展示的元素,保證了一定的自由度和各自生長的能力。

房源列表在貝殼平臺首頁已經(jīng)上線有半年左右的時間了,通過改版,用戶使用房源列表時的決策效率有一定程度的提升,業(yè)務(wù)覆蓋也逐步擴大。在研發(fā)老師的協(xié)同下,實現(xiàn)了 Native 和 Flutter 組件的封裝,大大縮短了開發(fā)時長,從而提升了產(chǎn)品整體的研發(fā)效率。

希望能給同樣正在建立組件庫的設(shè)計師同學(xué)們帶來一些啟發(fā),貝殼用戶體驗團隊也會繼續(xù)致力于更多業(yè)務(wù)特性組件的深挖,期待你的關(guān)注。

作者:貝殼KEDC

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

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

魏華的微信.png

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

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

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



更多精彩文章:

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













Cs界面設(shè)計之一:做交互選B端還是C端?來看這篇親歷分析!

博博

前些日子,筆者在知乎上被邀回答該問題,忽然想起了自己在面試設(shè)計師的時候,會問他們:“B 端和 C 端的設(shè)計有哪些區(qū)別?”由此可以發(fā)現(xiàn),B 端和 C 端的比較,從來就是一個熱議的話題,不曾停歇,未來也不會停歇。今天,筆者就“做交互選 B 端還是 C 端”,談?wù)勛约旱目捶ā?


交互設(shè)計是什么


百度百科定義:交互設(shè)計(英文 Interaction Design,縮寫 IXD),是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域,它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系,以“在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析,關(guān)注以人為本的用戶需求 。

國際交互設(shè)計協(xié)會(IXDA)定義:交互設(shè)計師以創(chuàng)造有用且實用的產(chǎn)品及服務(wù)為宗旨。以用戶為中心作為設(shè)計的基本原理,交互設(shè)計的實際操作必須建立在對實際用戶的了解之上:包括他們的目標、任務(wù)、體驗、需求等等。以用戶為中心的角度出發(fā),同時努力平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關(guān)系,交互設(shè)計師為復(fù)雜的設(shè)計挑戰(zhàn)提供解決方法,同時定義和發(fā)展新的交互產(chǎn)品和服務(wù)。

由上可見,交互設(shè)計的關(guān)鍵條目為:創(chuàng)造和建立人與產(chǎn)品及服務(wù)之間有意義的關(guān)系,創(chuàng)造有用且實用的產(chǎn)品及服務(wù),以用戶的目標、任務(wù)、體驗、需求為基礎(chǔ),平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關(guān)系。

由于 B 端和 C 端,交互設(shè)計核心是設(shè)計基于 PC、移動端的用戶界面,解決人機交互的問題,因此,可以說,交互設(shè)計是設(shè)計師在了解產(chǎn)品戰(zhàn)略,目標用戶目的、任務(wù)、體驗、需求,及了解設(shè)備和技術(shù)相關(guān)信息的基礎(chǔ)上,創(chuàng)造有用且實用的產(chǎn)品,若有可能,定義與發(fā)展新的交互模式。

據(jù)上,筆者回憶平日的交互設(shè)計工作,在拿到需求后,主要分為如下:

  • 了解產(chǎn)品目標、業(yè)務(wù)流程,分辨真?zhèn)涡枨?,運用 KANO 模型給需求排序,便于進行界面呈現(xiàn);
  • 了解用戶需求,考慮如何設(shè)計可以符合用戶心智模型;
  • 了解技術(shù)邊界,在技術(shù)可行性范圍內(nèi),進行體驗創(chuàng)新與突破;
  • 了解項目周期與商業(yè)需求,在該目標下,給出合適的交互方案。

交互設(shè)計是串聯(lián)產(chǎn)品戰(zhàn)略、用戶體驗、技術(shù)可行性的關(guān)鍵節(jié)點。它的核心任務(wù)是挖掘符合用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平的用戶體驗。


B 端與 C 端產(chǎn)品設(shè)計上的共同點與差異點


在分析 B 端與 C 端產(chǎn)品設(shè)計上的共同點與差異點前,我們有必要先了解下什么是 B 端,什么是 C 端。B 端產(chǎn)品是為企業(yè)提供服務(wù)、解決企業(yè)痛點的產(chǎn)品,例如財務(wù)系統(tǒng)、項目管理系統(tǒng),B 端產(chǎn)品的決策者是老板,使用者是員工。C 端產(chǎn)品是解決用戶在生活中的需求和痛點的產(chǎn)品,例如餓了么(外賣)、馬蜂窩(旅游)、淘寶(網(wǎng)購),C 端產(chǎn)品的決策者和使用者都是用戶自身。

1. 共同點:

對于 B 端與 C 端產(chǎn)品來說,其整體設(shè)計與研發(fā)鏈路是一致的。以用戶體驗五要素模型來說,都需要經(jīng)過戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層(由抽象到具象,由底層到頂層)。交互設(shè)計師涉及到的工作范圍在范圍層、結(jié)構(gòu)層和框架層,核心的工作范圍在結(jié)構(gòu)層和框架層。

2. 差異點:

B 端和 C 端由于業(yè)務(wù)不同、服務(wù)的目標用戶群體不同,在產(chǎn)品設(shè)計的思維上會有差異。

B 端注重決策者思維,C 端注重純用戶思維

對于 B 端產(chǎn)品來說,其付費用戶是企業(yè)的決策者,因此 B 端產(chǎn)品在設(shè)計上不僅要考慮如何讓用戶(即企業(yè)員工)用的滿意,還要考慮決策者的付費思維。C 端則不同,C 端的使用者與決策者身份是同一人,皆為蕓蕓眾生,因此 C 端產(chǎn)品設(shè)計上主要考慮用戶的感受。C 端產(chǎn)品同質(zhì)化嚴重,且用戶的替換成本很低,C 端產(chǎn)品更需要使用各種吸引用戶的方法來留住用戶。

B 端注重效率,C 端注重粘性

在產(chǎn)品設(shè)計初衷上,B 端希望用戶通過使用產(chǎn)品,能快速完成任務(wù),而不是在產(chǎn)品上花費過長的時間。但對于 C 端產(chǎn)品來說,C 端很希望用戶能經(jīng)常打開它們的產(chǎn)品,在產(chǎn)品上多花費時間,因此 C 端的會有用戶活躍度的指標,而 B 端一般沒有。

B 端注重穩(wěn)定,C 端注重多樣性

在用戶體驗上,B 端不會經(jīng)常出奇招,而是追求穩(wěn)為主,通常具有行業(yè)性質(zhì)的軟件會形成一定的行業(yè)特性。當然這也給 B 端交互設(shè)計師帶去了一定的困擾,交互的發(fā)揮余地不大,交互設(shè)計師的價值體驗不出來。C 端在用戶體驗上實際是引領(lǐng)設(shè)計界的,高德、淘寶、餓了么等用戶量較高的 APP,不斷將用戶體驗做到極致,探索和突破用戶體驗的邊界,給用戶帶去多樣性的體驗感受,也在不斷刷新用戶的心智模型。

B 端注重素靜,C 端注重個性

在用戶界面視覺上,B 端以素靜為主,原因在于,B 端是為企業(yè)員工服務(wù)的,員工需要通過軟件快速完成任務(wù)。素靜的界面沒有過多無用的元素干擾,任何色彩和布局的使用,都是為了協(xié)助用戶快速完成任務(wù)服務(wù)的。在 B 端界面設(shè)計上,格式塔原理、排版原則、W3C 原則是設(shè)計師更為看重的。而對于 C 端產(chǎn)品來說,面向的用戶是具有個性化的個體,想要吸引住不同性格不同愛好的用戶,就需要在界面設(shè)計上花費力氣。


做交互選 B 端還是 C 端


從交互設(shè)計本質(zhì)、B 端 C 端的差異點等方面我們可以知道,作為一名交互設(shè)計師,不論服務(wù)于哪個領(lǐng)域,工作職責是一致的,即“挖掘符合用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平的用戶體驗。同時定義和發(fā)展新的交互產(chǎn)品和服務(wù)?!?

但由于 B 端和 C 端業(yè)務(wù)屬性和目標用戶的不同,交互設(shè)計師在這兩個領(lǐng)域的工作也會有差別。服務(wù) B 端的交互設(shè)計師更像帶著腳鐐在跳舞,某種交互形式可能是合理的,但不符合行業(yè)特質(zhì)或用戶習(xí)慣也會被放棄掉。做過 B 端交互的小伙伴有一句話應(yīng)該經(jīng)常從產(chǎn)品經(jīng)理的口中聽到:“我知道這個交互不錯,但原來的交互已經(jīng)成為用戶習(xí)慣了,我們不要隨意更改,有風險?!倍?C 端的交互設(shè)計師是光著腳在跳舞,誰更相對自由,是顯而易見的。C 端的交互設(shè)計師重新定義某種交互方式的空間會大。所以有很多交互設(shè)計師,會更加傾向于服務(wù) C 端的產(chǎn)品。

但是筆者認為,想要成為一名優(yōu)秀的交互設(shè)計師,都最終會在制約下,發(fā)揮其價值,而這種價值會更經(jīng)得起時間的洗禮和推敲。優(yōu)秀的 B 端和 C 端交互設(shè)計師,都是行業(yè)不可獲缺的人才。如果沒有特殊傾向,筆者認為選 B 和選 C 是一樣的,在一個縱深領(lǐng)域帶著思考去沉淀,在哪里都會開花。

筆者服務(wù)于 B 端,筆者想對 B 端交互設(shè)計師說,我們大部分人看到了冰山上的 B 端,但沒有看到冰山下的 B 端,冰山下的 B 端是一片未曾開發(fā)的處女地,它的價值無限大。B 端的交互設(shè)計師們,你們準備好探索和突破了么,未來 B 端的體驗是你們定義的。

作者:小果

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

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

魏華的微信.png

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

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

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



更多精彩文章:

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















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

博博

隨著企業(yè)數(shù)字化轉(zhuǎn)型,B 端產(chǎn)品越來越受到人們的重視,B 端產(chǎn)品也越來越豐富,越來越多的 C 端設(shè)計師轉(zhuǎn)行到 B 端產(chǎn)品的設(shè)計上來。

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

但是,如何區(qū)別 C 端產(chǎn)品與 B 端產(chǎn)品,如何將 C 端產(chǎn)品的設(shè)計經(jīng)驗應(yīng)用到 B 端產(chǎn)品上?這是一個需要思考與研究的問題。

從各個緯度來講,C 端產(chǎn)品與 B 端產(chǎn)品具有一些明顯的差別。接下來,我們就從區(qū)別 B 端與 C 端產(chǎn)品的 26 條上,來對比一下二者的差異。

Let’s gooooooo……

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


基礎(chǔ)


1. 定義

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

B 端產(chǎn)品:為企業(yè)客戶提供商業(yè)價值的產(chǎn)品及服務(wù)。

C 端產(chǎn)品:滿足個體用戶需求的產(chǎn)品與服務(wù)。

2. 獲取途徑

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

B 端產(chǎn)品:公司領(lǐng)導(dǎo)層決策,普通員工使用,需要銷售推廣,通常將線下“大型會議、峰會、行業(yè)展會”作為主要場地,讓客戶近距離了解產(chǎn)品,樹立專業(yè)的行業(yè)形象與行業(yè)口碑,進而吸引企業(yè)客戶的興趣(如作者之前所在的安防企業(yè),就會頻繁的參加展會,展示自己的專業(yè)能力)。

C 端產(chǎn)品:個人主觀意愿下載使用,需要利用拉新、促活等營銷方式,實現(xiàn)不斷的新增、日活來加持自身體量。

3. 產(chǎn)品形態(tài)

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

B 端產(chǎn)品:SaaS 平臺、客戶端,多為 PC 端產(chǎn)品。

C 端產(chǎn)品:APP、小程序多為 Mobile 端產(chǎn)品。

3. 功能聚焦

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

B 端產(chǎn)品:具有多功能模塊及多角色之間的協(xié)作。

C 端產(chǎn)品:以核心功能點為主,以及圍繞核心功能點,完善用戶體驗及增值服務(wù)。

4. 所屬類型

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

B 端產(chǎn)品:產(chǎn)業(yè)互聯(lián)網(wǎng)。

產(chǎn)業(yè)互聯(lián)網(wǎng)是基于互聯(lián)網(wǎng)技術(shù)和生態(tài),對各個垂直產(chǎn)業(yè)的產(chǎn)業(yè)鏈和內(nèi)部的價值鏈進行重塑和改造,從而形成的互聯(lián)網(wǎng)生態(tài)和形態(tài)。(百度百科)

C 端產(chǎn)品:消費互聯(lián)網(wǎng)。

消費互聯(lián)網(wǎng)是以個人為用戶,以日常生活為應(yīng)用場景的應(yīng)用形式,滿足消費者在互聯(lián)網(wǎng)中的消費需求而生的互聯(lián)網(wǎng)類型。(百度百科)

5. 生態(tài)屬性

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

B 端產(chǎn)品:相伴共生,產(chǎn)業(yè)互聯(lián)網(wǎng)每一個行業(yè)的結(jié)構(gòu)、模式各不相同,必須通過整個產(chǎn)業(yè)鏈上的企業(yè)產(chǎn)生降本效應(yīng)、提高效率,形成資源優(yōu)化配置,產(chǎn)生 1+1>2 的效益。

C 端產(chǎn)品:贏家通吃,比如通過燒錢取得規(guī)模優(yōu)勢、利用人性的心理弱點去進行各種產(chǎn)品、用戶數(shù)據(jù)的采集,沒有底線、互聯(lián)網(wǎng)殺熟等行為。


產(chǎn)品維度


1. 產(chǎn)品本質(zhì)

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

B 端產(chǎn)品:本質(zhì)是“進”,是幫用戶(客戶),節(jié)約時間,降低成本,增加收益。

C 端產(chǎn)品:本質(zhì)是“出”,需要用戶消費時間與金錢,滿足個人的情感和生理需求。

2. 商業(yè)模式

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

B 端產(chǎn)品:企業(yè)按需定制付費較多、個人付費較少。

C 端產(chǎn)品:用戶流量和資源的變現(xiàn)實現(xiàn)營收,例如:廣告、導(dǎo)流、增值服務(wù)。

3. 開發(fā)周期

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

B 端產(chǎn)品:由于產(chǎn)品更新迭代有較大的成本,因此,開發(fā)周期相對長,按月或年,大版本迭代。

C 端產(chǎn)品:周期相對短,按周或月,小版本快速迭代。

4. 生命周期

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

B 端產(chǎn)品:由產(chǎn)業(yè)鏈以及商業(yè)模式?jīng)Q定,生命周期往往較長。

C 端產(chǎn)品:一般產(chǎn)品的保鮮期比較短,生命周期較短。

5. 產(chǎn)品關(guān)注點

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

B 端產(chǎn)品:專注業(yè)務(wù)及行業(yè)化的解決方案。

C 端產(chǎn)品:專注對人性的滿足。

6. 產(chǎn)品需求來源

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

B 端產(chǎn)品:來源公司戰(zhàn)略或業(yè)務(wù)線調(diào)整,甚至客戶預(yù)期。

C 端產(chǎn)品:產(chǎn)品經(jīng)理的市場洞察力和敏銳度,主動發(fā)現(xiàn)。

7. 產(chǎn)品思維

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

B 端產(chǎn)品:往往以工具化思維服務(wù)行業(yè)客戶,更理性。

C 端產(chǎn)品:往往以游戲化思維增強用戶的體驗,滿足用戶,更感性。

8. 行業(yè)壁壘

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

B 端產(chǎn)品:由于業(yè)務(wù)、場景屬性,容易建立行業(yè)壁壘,客戶的切換成本比較大。

C 端產(chǎn)品:行業(yè)壁壘比較難以建立,往往以體量優(yōu)勢及價格優(yōu)勢擠壓對手,同時,同時用戶的切換成本較低。


用戶維度


1. 用戶類型

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

B 端產(chǎn)品:用戶通常是一個團體或組織,用戶的社會屬性比較明顯。

C 端產(chǎn)品:目標用戶通常是具有某些特質(zhì)的人群,具有明顯的自然屬性,且沒有組織架構(gòu)。

2. 用戶體量

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

B 端產(chǎn)品:作為工具屬性的產(chǎn)品,用戶體量比較小,甚至有些定制化產(chǎn)品的用戶只有幾人。

C 端產(chǎn)品:相對而言,用戶體量較大或非常大,才可以形成規(guī)模效應(yīng),進行流量變現(xiàn)。

3. 使用時機

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

B 端產(chǎn)品:往往僅工作日工作時間使用,用戶在節(jié)假日,非必要不使用。

C 端產(chǎn)品:用戶會在任意時間。

4. 使用時長

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

B 端產(chǎn)品:相對固定,且希望越短越好。

C 端產(chǎn)品:彈性較大,且希望越長越好。

5. 使用意愿

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

B 端產(chǎn)品:根據(jù)公司決策進行采購,用戶被動使用,且沒有太大的決定權(quán)。

C 端產(chǎn)品:根據(jù)自己的需求主動選擇使用。

6. 使用場景

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

B 端產(chǎn)品:場景固定,多為辦公室。

C 端產(chǎn)品:場景不定,用戶可以在辦公室、臥室、廁所、地鐵上等多種場所使用,姿勢可能是坐著、躺著、蹲著、斜靠著等等。

7. 用戶粘性圖片

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

B 端產(chǎn)品:由于用戶的被動使用限制,用戶對產(chǎn)品的可選性不高。因此,為了工作需要,用戶粘性相對高。

C 端產(chǎn)品:用戶可以根據(jù)自己的喜好,隨時隨地改變自己的選擇,用戶粘性相對低。

8. 用戶容忍度

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

B 端產(chǎn)品:用戶容忍度大,不好用也要用。

C 端產(chǎn)品:用戶容忍度小,不爽就換。


設(shè)計維度


1. 設(shè)計側(cè)重

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

B 端產(chǎn)品:關(guān)注業(yè)務(wù)功能和使用場景。

C 端產(chǎn)品:關(guān)注用戶體驗及感受。

2. 視覺風格

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

B 端產(chǎn)品:界面簡潔、布局清晰,追求信息的有效表達和操作的便捷性。

C 端產(chǎn)品:風格多變,強調(diào)產(chǎn)品的視覺沖擊力。

3. 情感體驗

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

B 端產(chǎn)品:強調(diào)免打擾、高效,多關(guān)注業(yè)務(wù)解決方案本身的順暢。

C 端產(chǎn)品:強調(diào)產(chǎn)品的趣味性,處處考慮用戶的情感體驗。


總結(jié)


明確 B 端產(chǎn)品與 C 端產(chǎn)品的區(qū)別,有利于設(shè)計師在設(shè)計過程中的設(shè)計經(jīng)驗轉(zhuǎn)換。在設(shè)計過程中,做到有的放矢,而不是一味的生搬硬套,用解決 C 端產(chǎn)品的方法與思路,去解決 B 端產(chǎn)品的問題,從而讓 B 端產(chǎn)品的解決方案更加貼近業(yè)務(wù)與場景。

作者:弘毅

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

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

魏華的微信.png

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

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

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



更多精彩文章:

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












Cs界面設(shè)計之三:從3個方面,詳細分析B端和C端的差異化

博博

眾所周知,無論是在用戶群體、產(chǎn)品定位,還是使用場景等方面,B 端產(chǎn)品與 C 端產(chǎn)品都有比較明顯的差異。但是兩者的基本設(shè)計理念是趨同的,例如提高效率、降低學(xué)習(xí)成本等等。

不過 C 端產(chǎn)品更加注重運營,所以設(shè)計師不單單要考慮設(shè)計側(cè)的用戶體驗,還要顧及商業(yè)目標的達成。B 端產(chǎn)品重點在于提升用戶效率,這本身就是體驗?zāi)繕酥?,因?B 端產(chǎn)品的設(shè)計策略更加純粹。

兩者在具體的設(shè)計表現(xiàn)上還是存在一定的差異性。今天我們就來總結(jié)一下,主要包括 3 個方面:

  1. 內(nèi)容的差異化
  2. 交互形式的差異化
  3. 展現(xiàn)形式的差異化


內(nèi)容的差異化


1. 圖文結(jié)合 VS 數(shù)據(jù)表格

C 端產(chǎn)品重運營,通過流量的轉(zhuǎn)化獲得收益。B 端產(chǎn)品重功能,通過功能定制向客戶收費。

C 端產(chǎn)品想要達到商業(yè)目標,獲得充足的流量,必然要內(nèi)容化。內(nèi)容想要吸引用戶就必須要足夠豐富,所以 C 端產(chǎn)品基本是用圖說話,而短視頻和直播的興起,進一步增強了對用戶不同層次的感官刺激??傊?C 端產(chǎn)品需要讓用戶看得爽、玩得爽、逛得爽,不知不覺的沉浸在其中,并逐漸產(chǎn)生依賴感。

從3個方面,詳細分析B端和C端的差異化

B 端產(chǎn)品聚焦功能,更強調(diào)幫助用戶解決問題,特別是中后臺的管理系統(tǒng),主要是幫助用戶完成數(shù)據(jù)監(jiān)控、統(tǒng)計和查詢。因此頁面中充斥著大量的圖表、表格和數(shù)據(jù)信息。

從3個方面,詳細分析B端和C端的差異化

內(nèi)容的差異也帶來了體驗方面的差異。圖片相對數(shù)據(jù)或者文字更加直觀感性、富有親和力,更容易引發(fā)用戶的閱讀興趣,精美的圖片更容易引導(dǎo)用戶建立對內(nèi)容的好感。

而 B 端產(chǎn)品則是客觀反映數(shù)據(jù)信息內(nèi)容,相對更加理性,不會帶有太多的情感體驗。

2. 個性化與標準化

C 端產(chǎn)品服務(wù)于個人,更加注重用戶的個性化體驗,例如千人千面推薦機制,定制化的興趣范圍設(shè)定等等,希望能夠通過精準的內(nèi)容推薦,獲得用戶、留住用戶。

C 端產(chǎn)品功能服務(wù)于整體的商業(yè)目標,今天主推 A 功能用來拉新,明天可能就強調(diào) B 功能的運營活動。另外版本迭代也比較快,功能玩法變化較為頻繁,內(nèi)容也會做出相應(yīng)的變化。例如天貓最近首頁也在不斷變化。

從3個方面,詳細分析B端和C端的差異化

B 端產(chǎn)品服務(wù)于組織,每個用戶不再是單獨的個體,而是組織中的角色,更強調(diào)業(yè)務(wù)流程和組織協(xié)同,因此需要建立標準化的流程,或者相對有限的個性化。另外復(fù)雜和高門檻的業(yè)務(wù)內(nèi)容,更加強調(diào)設(shè)計的一致性,從而減少用戶的學(xué)習(xí)成本。

同時 B 端產(chǎn)品的信息架構(gòu)、業(yè)務(wù)流程一旦確定了,不會輕易改變。避免打破用戶已經(jīng)形成的認知和行為習(xí)慣,對用戶的使用造成不便。


交互形式差異化


C 端更強調(diào)便捷性,希望可以隨時隨地觸達用戶,更多的是移動端產(chǎn)品。B 端產(chǎn)品以工作辦公為主,更多的應(yīng)用在 PC 領(lǐng)域。因此兩者在交互形式上有很大的區(qū)別。

1. C 端:全面體驗、兼顧商業(yè)

C 端產(chǎn)品在保證用戶體驗的同時,更講求商業(yè)價值。交互體驗上我個人覺得主要講求少操作、短路徑、沉浸式。

特別是電商平臺,例如淘寶,雖然首頁中增加了各種頻道入口和商品分類,但是并不希望用戶按部就班,逐級操作。因為用戶行為路徑越長,造成的用戶流失也就越大。搜索功能被放置在頁面頭部位置,頁面滾動時也常駐在頂部,方便用戶快速查找產(chǎn)品。

同時運營活動會通過彈窗、浮窗、懸浮按鈕,前置廣告資源位等形式增加曝光,縮短用戶的操作路徑,實現(xiàn)內(nèi)容的快速直達。而為了增加內(nèi)容對用戶的吸引力,讓用戶沉浸其中,淘寶、拼多多等都專門打造了專屬頻道,主打短視頻和圖文。

2. B 端:業(yè)務(wù)為主,效率至上

B 端產(chǎn)品最主要的價值在于優(yōu)化業(yè)務(wù)流程,提升用戶操作效率。

除了常見的基礎(chǔ)交互形式,在細節(jié)設(shè)計上也越來越 C 端化了。通過監(jiān)測用戶行為,或者信息內(nèi)容實現(xiàn)智能提醒。例如飛書文檔在用戶首次使用場景下刪除內(nèi)容時,會主動提示快捷鍵功能,幫助用戶了解學(xué)習(xí)相關(guān)功能。

從3個方面,詳細分析B端和C端的差異化

而公眾號壹伴插件會檢測文章中的關(guān)鍵字,文章中出現(xiàn)“原文鏈接”時,而用戶未進行選項設(shè)置時,會主動提示相關(guān)信息,避免用戶遺忘。

從3個方面,詳細分析B端和C端的差異化

另外在 B 端產(chǎn)品中信息架構(gòu)非常重要,用戶主要是依據(jù)導(dǎo)航菜單按圖索驥,首先定位到功能頁面,再次查找相應(yīng)表格,最終定位自己所需的內(nèi)容。所以信息層級的優(yōu)化,可以較好的減少用戶的操作成本和記憶成本。


視覺表現(xiàn)的差異化


視覺設(shè)計層面,C 端產(chǎn)品的要求遠高于 B 端產(chǎn)品。

1. C 端:場景化、豐富性

C 端視覺設(shè)計師要求越來越高,基礎(chǔ)的設(shè)計技能不用說了,動效、C4D 建模都逐漸成為了設(shè)計師的必備技能。界面風格也是多種多樣,酸性風格、賽博朋克等等,希望能夠通過提高界面設(shè)計的豐富性,增強頁面氛圍,保證對用戶足夠的吸引力,例如大促會場頁面的頭圖設(shè)計。

從3個方面,詳細分析B端和C端的差異化

2. B 端:簡潔化、統(tǒng)一性

作為工具型產(chǎn)品,幫助用戶提高工作效率是 B 端產(chǎn)品設(shè)計的核心價值。因此 B 端產(chǎn)品中視覺元素強調(diào)簡潔高效,除了色彩相對豐富的圖表外,主體風格基本是灰白色調(diào),再加點主題色點綴基本就可以了,過多的顏色和背景信息反而會影響核心內(nèi)容的瀏覽。

從3個方面,詳細分析B端和C端的差異化


寫在最后


雖然在設(shè)計理念上,C 端和 B 端產(chǎn)品具有一定的相似性。但是受到各種因素的影響,有時候 B 端的產(chǎn)品經(jīng)理對用戶體驗重視不足,更多強調(diào)產(chǎn)品功能的強大,考慮如何實現(xiàn)產(chǎn)品功能,很少考慮用戶是否真正的需要此功能,以及在使用過程中的操作體驗。

所以 B 端交互設(shè)計師需要在業(yè)務(wù)分析基礎(chǔ)上,積極尋找產(chǎn)品設(shè)計中的體驗突破口,不斷提升產(chǎn)品的用戶體驗。

作者:子牧先生

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

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

魏華的微信.png

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

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

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



更多精彩文章:

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














UI設(shè)計、交互設(shè)計、UI交互設(shè)計的聯(lián)系和區(qū)別是什么?

seo達人


三者關(guān)系圖:

Image title

從上圖來看,似乎UI交互設(shè)計還真是UI設(shè)計和交互設(shè)計的結(jié)合。不過具體區(qū)別如何,還是讓我們來看看三者的對比吧!

 

1. UI交互設(shè)計vs UI設(shè)計vs交互設(shè)計對比之概念

Image title

 

UI設(shè)計

UI設(shè)計或稱界面設(shè)計(英文UserInterface Design, 縮寫為UID),它是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計主要分為實體UI和虛擬UI兩種,互聯(lián)網(wǎng)行業(yè)常見的UI設(shè)計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

 

交互設(shè)計

交互設(shè)計(英文Interaction Design, 縮寫IXD),它主要指的是兩個或多個個體之間交流和互動方式的設(shè)計,以達成某種設(shè)計產(chǎn)品的目的。交互設(shè)計的目標一般從“可用性”和”用戶體驗“兩個層面出發(fā),以幫助解決用戶需求。

 

UI交互設(shè)計

其實小編從多方查找資料發(fā)現(xiàn),UI交互設(shè)計這個術(shù)語是非常模糊的。在小編不斷對比整理下,終于得出了它的基本概念。從廣義上來說,UI設(shè)計是可以包含交互設(shè)計的,在這樣的情況下。簡單來說,把交互設(shè)計的理念體現(xiàn)在UI界面上,就是UI交互設(shè)計。

從設(shè)計重心方面來看,UI設(shè)計的重心是色彩和視覺,以界面美觀設(shè)計為主,主要考慮產(chǎn)品看起來怎么樣。而交互設(shè)計則是以用戶為中心進行人機互動部分的設(shè)計,主要考慮產(chǎn)品用起來怎么樣。而UI交互設(shè)計則需要兼顧UI與交互兩個方面進行設(shè)計,將交互的理念體現(xiàn)在UI界面上。

 

2. UI交互設(shè)計vs UI設(shè)計vs交互設(shè)計對比之工作人群

Image title

UI設(shè)計相關(guān)人群:

UI設(shè)計師,界面設(shè)計師,網(wǎng)頁設(shè)計師。

 

交互設(shè)計相關(guān)人群:

UX設(shè)計師,交互設(shè)計師,UE設(shè)計師,產(chǎn)品經(jīng)理,網(wǎng)頁設(shè)計師,產(chǎn)品經(jīng)理。

 

UI交互設(shè)計相關(guān)人群:

UI設(shè)計師,界面設(shè)計師,交互設(shè)計師,網(wǎng)頁設(shè)計師,UX設(shè)計師,產(chǎn)品經(jīng)理。

從相關(guān)的工作人群來看,不同的設(shè)計工作類型,涉及的人群也盡不相同。UI設(shè)計的相關(guān)人群主要是工作中包涵該部分的人,除了專業(yè)的UI設(shè)計師,界面設(shè)計師,網(wǎng)頁設(shè)計師等也是它的工作人群。而交互設(shè)計涉及的人群更廣,交互設(shè)計師、UX設(shè)計師自然不在話下。另外,需要表達設(shè)計想法的產(chǎn)品經(jīng)理運營人員也是其中一員。最后,UI交互設(shè)計所涉及的范圍比兩者稍廣,包含了UI設(shè)計人群和大部分交互設(shè)計人群。

 

3. UI交互設(shè)計vs UI設(shè)計vs交互設(shè)計對比之例子

UI設(shè)計案例:

Image title

如上圖所示,UI設(shè)計主要在于通過對用戶界面的色彩,布局,文字排版等方面進行設(shè)計,以保證整體界面的美觀。

 

UI交互設(shè)計案例:

Image title

小編這邊選取了一個簡單的UI交互作為案例,這個交互的效果是通過點擊UI界面中按鈕出現(xiàn)不同的圖片。這種將交互體現(xiàn)在UI界面上的設(shè)計,就是UI交互設(shè)計。UI交互設(shè)計包含了各式各樣的交互效果,如下列刷新、進度條、圖片輪播等,小編就不再一一例舉了。

 

交互設(shè)計案例:

Image title

而這種以人機互動為目的,注重用戶體驗的設(shè)計則稱為交互設(shè)計。

從以上的案例不難看出,UI設(shè)計主要以界面美觀為主,以靜態(tài)的方式呈現(xiàn)居多(也有以動圖動畫形進行呈現(xiàn))。交互方式是靜態(tài)的。UI交互設(shè)計是在UI的基礎(chǔ)上進行交互設(shè)計,以偏動態(tài)的形式存在。交互設(shè)計則以用戶體驗為主,以動態(tài)的形式存在。

 

4. UI交互設(shè)計vs UI設(shè)計vs交互設(shè)計對比之工具

UI設(shè)計工具:

PS(Photoshop):適用于界面設(shè)計,圖標設(shè)計,手繪等。

AI (Illustration):適合創(chuàng)建徽標、圖標、草圖、排版和其他矢量圖。

Sketch:適合圖標、界面設(shè)計,支持多文件分層,切片等插件。

Image title

交互設(shè)計工具

Axure:老牌原型設(shè)計工具,適用于制作中高保真交互原型。

Mockplus:適合創(chuàng)建快速交互原型,簡單高效,同時支持團隊協(xié)作。

摹客:適合一鍵切圖,生成智能標注,生成圖層代碼,交互演示,設(shè)計協(xié)作。

Image title

 

UI交互設(shè)計工具:

PS,AI,Sketch,Mockplus、摹客原型設(shè)計工具。

Image title

從使用的工具來看,UI設(shè)計主要以圖形、圖標、界面設(shè)計工具為主;交互設(shè)計主要以原型設(shè)計,交互設(shè)計工具為主;而UI交互設(shè)計則囊括了前兩者使用的所有工具。

看完本文后,小編相信大家對UI交互設(shè)計,UI設(shè)計,交互設(shè)計三者的關(guān)系已經(jīng)有所了解了。簡單來說:UI是為了好看,交互設(shè)計是為了好用,UI交互設(shè)計就是好看又好用。如果想從事UI交互設(shè)計相關(guān)的工作,小編建議不妨在了解它們的基本定義后,開始學(xué)習(xí)一些技能知識,著手開始練習(xí)設(shè)計。這樣可以幫助大家在UI交互設(shè)計的路上快速成長!

 

原文地址:慕客

作者:慕客產(chǎn)品協(xié)作設(shè)計

 轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》UI設(shè)計、交互設(shè)計、UI交互設(shè)計的聯(lián)系和區(qū)別是什么?

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

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

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

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司




用信息架構(gòu),來落地產(chǎn)品架構(gòu)

純純

讓信息架構(gòu),和產(chǎn)品架構(gòu),產(chǎn)生“化學(xué)反應(yīng)”

這個信息架構(gòu)的角度,具體而言,就是只包含一級頻道的交互設(shè)計。


核心功能、輔助功能、重大功能,作為產(chǎn)品的三大類功能,更多是從發(fā)展的角度來劃分。


除此之外,大部分 App 都還有一些非常基礎(chǔ)的功能,比如“個人資料”、“我的收藏”、“設(shè)置”、“搜索”等,此類功能,我們稱其為通用功能。


核心功能、輔助功能、重大功能和通用功能,是產(chǎn)品的四大類功能。


總的來說,本文主要以底部 tab 導(dǎo)航的 App 為例,探討一下,如何在一級頻道來落地產(chǎn)品的四大類功能。



01 宏觀上講,怎樣更好的擺放四大類功能?


網(wǎng)易云音樂是我個人很喜歡的一款產(chǎn)品,日常用的也比較多。不過,它的新版(6.0 系列)給我的直觀感受是,有點復(fù)雜了,我甚至在很長時間里找不到“私人 FM”這個以前常用的功能。


給我類似感受的產(chǎn)品,還有 Keep 和知乎。


究竟是什么,讓我覺得,這些產(chǎn)品變得有點復(fù)雜了?


個人簡單總結(jié)了一下,最直接的一個原因,是這些 App 都新增了重大功能,并給這個重大功能單獨加了一個一級頻道。


比如 Keep 的“計劃”頻道、知乎的“會員”頻道、網(wǎng)易云音樂的“視頻”和“云村”頻道,都分別占用一個一級頻道。



企業(yè)為什么這么設(shè)計?個人的猜測,這些重大功能于企業(yè)而言,很重要,要么肩負商業(yè)化使命,要么被寄予厚望,所以企業(yè)就單獨給了一個一級頻道。


這是一個相對簡單的邏輯。但如果想要更好的去平衡用戶體驗和商業(yè)化之間的關(guān)系,那我們就需要考慮更多的因素。


之前在信息架構(gòu)那篇文章里,個人的建議是,如果想讓 App 始終保持簡單,那就只保留 4 個 tab,也即只有 4 個一級頻道。


如何將產(chǎn)品的四大類功能、以及未來很大概率會不斷出現(xiàn)的重大功能,以接近最優(yōu)的方式,安置在寸土寸金的 4 個一級頻道上?


我想,這中間一定有一些原則,值得我們探討和參考。


1 和重要程度保持一致


通常而言,重要程度越高,分配到的空間就越多。這是一個比較普世的道理。


也就是說,這條原則,主要會影響到,四大類功能,各自占用多少空間比較合適。


我們有 4 個一級頻道,每個一級頻道代表了 25% 的空間。


再來看四大類功能,按其大概的重要程度,簡單的分析一下。


先說核心功能,這個最重要。


核心功能是立足之本和護城河。先換個角度看這個問題,假設(shè)有三種可能,即核心功能可以占用一個、兩個或三個一級頻道。


先用下排除法。三個一級頻道難免顯得過多,剩余的三種功能擠在一個一級頻道里也會顯得過分擁擠;一個一級頻道的話,倒也可以,但是平分四分之一的空間很難體現(xiàn)出核心功能的重要性。


相比之下,兩個一級頻道就顯得較為合適。


綜合考慮到有四大類功能,通常兩個一級頻道也不會完全給核心功能所用。


所以,核心功能,大概占用一個半一級頻道,也即 40% 左右的空間即可。


再說通用功能,這個比較容易。


此類功能通常比較多,重要程度可能不及重大功能,但是又不能沒有,所以通常我們也會單獨給一個一級頻道,就是“我”或者“設(shè)置”之類的一級頻道,大概占用 25% 的空間即可。


第三,說下重大功能,這個比較重要。


通常而言,重大功能的重要性僅次于核心功能,而且重大功能可以有多個,再考慮到通用功能一般單獨占用一個一級頻道。


那么,相對而言,重大功能,完全可以單獨占用一個一級頻道,甚至更多,大概占用 30% 左右的空間即可。


最后,說下輔助功能,這個比較特殊。


首先,很多產(chǎn)品是沒有輔助功能的;其次,輔助功能是個小功能;最后,輔助功能的數(shù)量一般也不多。


總的來說,輔助功能是沒有必要單獨給一個一級頻道的。再考慮到 4 個一級頻道所??臻g已經(jīng)不多,所以,輔助功能一般和重大功能共用一個一級頻道即可,大概占用 5% 左右的空間。



2 和使用頻率保持一致


通常而言,用戶用的越多的功能,就排的越靠前。


也就是說,這條原則主要決定四大類功能的排序問題。


具體而言,用戶用的最多的是核心功能,所以核心功能最靠前。


重大功能和通用功能,有時候很難說哪個使用頻率更高,比如微信里的“搜一搜”和“收藏”。但是比較明確的是,很多 App 在誕生之初,并沒有重大功能,只有核心功能和通用功能。


所以自然而然,通用功能排在了核心功能后面。


個人有個猜測,一方面,有時候很難說清重大功能和通用功能,哪個使用頻率更高;另一方面,通用功能起初是排在最后的。


所以,當重大功能出現(xiàn)時,就延續(xù)了舊傳統(tǒng):通用功能依然排在最后。最終結(jié)果就是,重大功能和輔助功能排在中間。


值得一提的是,現(xiàn)在市面上開始出現(xiàn)兩類現(xiàn)象。


其一是,有一些擁有 5 個一級頻道的 App,開始把核心功能放到中間那個頻道,比如 Keep 的“運動”頻道。


其二是,企業(yè)開始人為的控制打開 App 時默認展示哪一個頻道,而且默認顯示哪一個頻道,存在多種情況,例子依然包括 Keep:以前默認顯示中間的“運動”頻道,現(xiàn)在默認顯示“計劃”頻道。


個人覺得,對企業(yè)而言,這兩類做法,都是得不償失的。


因為這樣做,會讓 “從左起,1、2、3、4”這個排序失去價值。沒有這個前提,也就談不上“和用戶的使用頻率保持一致。


而且,這種默認不顯示左邊第一個頻道的做法,有時候會讓用戶產(chǎn)生一種被綁架的感覺(默認顯示收費頻道),有時會讓用戶感覺企業(yè)在自作聰明(默認沒顯示收費頻道,但也沒顯示核心頻道)。



3 符合用戶預(yù)期


主要有兩個預(yù)期,邏輯預(yù)期和習(xí)慣預(yù)期。


3.1 邏輯預(yù)期


用戶確實很懶,但不代表用戶不會思考。


比如前文提到的,網(wǎng)易云音樂的“私人 FM“功能,在我的認知里面,”私人 FM“和”每日推薦“一樣,都是個性化推薦,性質(zhì)極其相似,應(yīng)該放在一起。


所以,當我在新版里的“每日推薦”旁邊找不到“私人 FM”時,心里就覺得很奇怪很不解,心想這么好的功能不會是給刪了吧。


后來某一天,當我在第三個一級頻道“我的”里面發(fā)現(xiàn)“私人 FM“的時候,我又覺很別扭,不好用。


另外一個例子,Keep 的動作訓(xùn)練。 


在新版里面,一開始我是去“發(fā)現(xiàn)”頻道的“動作庫”找的,怎么找都找不到,跟找不到網(wǎng)易云音樂的“私人 FM“是一樣的心情。


因為我覺得,“動作訓(xùn)練”和“動作庫”,是很接近的一對事物,從邏輯上來講,用戶會覺得這倆事物挨在一起,或者會猜他們是不是挨在一起。


3.2 習(xí)慣預(yù)期


這里的用戶習(xí)慣,主要有兩類。一類是自家產(chǎn)品培養(yǎng)出來的,一類是市面上的產(chǎn)品培養(yǎng)出來的。


通常情況,一級頻道的設(shè)計,是要符合用戶習(xí)慣的。


最忌諱的情況是,自己一手培養(yǎng)的用戶習(xí)慣,到最后自己再一手去打破,這樣很容易引起用戶的煩躁、不滿和失望等負面情緒。


比如 3.1 段的兩個例子,同樣也沒有符合用戶的習(xí)慣預(yù)期。因為在最開始,網(wǎng)易云音樂的“每日推薦”和“私人 FM“是挨在一切的,Keep 的“動作訓(xùn)練”和“動作庫”也是融合在一起的。


4 良好的擴展性


就一級頻道而言,重大功能和通用功能是最有可能擴展出更多子功能的。所以,就擴展性而言,需要重點照顧到這兩類功能。


通用功能大部分都收納在“我”這個一級頻道,通常也是一個列表的樣式,天然自帶良好的擴展性。所以,擴展性的難點和重點,最后是落在了重大功能這里。


在一級頻道,重大功能的展現(xiàn)形式,通常有兩種。


一種是像核心功能一樣,直接把重大功能的內(nèi)容鋪陳出來,典型代表是網(wǎng)易云音樂的“云村”。另外一種是把各個重大功能都收納起來,只展示一個入口,典型代表是微信的“發(fā)現(xiàn)”頻道。


對企業(yè)而言,現(xiàn)實問題是,當重大功能的數(shù)量上升到兩個、三個甚至更多時,如何展示他們?


市面上的常規(guī)做法,也是兩種。


一種是像網(wǎng)易云音樂和 Keep 這樣的,直接開辟一個新的一級頻道,供重大功能使用。還有一種是微信這種,把所有重大功能都收納起來,有新的重大功能出現(xiàn)時,新增一行列表即可。



個人推薦微信這種做法,因為這種做法的擴展性最好,可以應(yīng)對無窮盡的重大功能。


至此,我們簡單總結(jié)一下。個人看法,四大類功能,具體咋擺放,并沒有標準答案,但是可以參考以上 4 個原則。




02 微觀上講,有沒有補充和例外?


有。借這個話題,聊兩個比較特殊的問題。


1 頂部標題欄的兩側(cè),適合放什么功能?


先來分析一下這個位置,頂部標題欄的兩側(cè),位于屏幕的左上角或右上角,是個很顯眼的位置。


個人認為,有三類功能比較適合這個位置。


第一類,是和當前頁面內(nèi)容有密切關(guān)系的功能。比如“編輯”型功能,可參考微信讀書“書架”頻道的“編輯”。再比如“新增”型功能,可參考 Twitter 首頁信息流的發(fā)推圖標。此類功能,最適合這個位置,而且一般也沒有更合適的位置來擺放他們。


第二類,是比較高頻的通用功能或重大功能,比如搜索、消息、設(shè)置等。


第三類,是某些高頻功能的快捷入口,比如微信的掃一掃和收付款。



除此之外,如果是一個比較低頻的功能,不管是通用功能、重大功能還是輔助功能,放在這里,都不合適,因為會對用戶形成打擾。


2 一個功能,最多可以出現(xiàn)幾次?


大部分功能,在 App 里只會出現(xiàn)一次。但在日常使用各種 App 的時候,我們也會多次看到同一個功能,在不同的地方。


有時候,能看到三次,比如搜索,在微信、知乎和網(wǎng)易云音樂都出現(xiàn)了三次,我們也不會覺得哪里不對勁兒。實際上,搜索雖然出現(xiàn)了三次,但也沒有引起我們的特別注意。


還有一些功能,是出現(xiàn)了兩次。我們在第二次看到的時候,會有點煩躁,心想怎么又來了;有時候會有點困惑,心想下次我該用哪一個,哪一個最快捷。


這中間有什么原則可以參考嗎?


先來看下搜索,在微信、知乎和網(wǎng)易云音樂,都是比較高頻的功能。換句話說,用戶在不同的一級頻道,都有可能需要搜索一下,所以搜索出現(xiàn)三次,在不同的一級頻道,是有這個需求存在的。


搜索以外的功能,個人認為,只有一類適合出現(xiàn)多次,通常兩次足矣。


那就是,此類功能確實比較高頻,同時路徑又比較長,使用起來不夠方便。這時候,就適合給此類功能一個快捷入口。這個快捷入口,一般是出現(xiàn)在標題欄。



一個功能,如果只是單純的重復(fù)出現(xiàn)兩次,兩次都沒出現(xiàn)在標題欄。那給用戶的感覺,就是,App 并不是在給我提供快捷入口,而可能只是通過重復(fù)的方式來強推這個功能,就容易產(chǎn)生煩躁和困惑的負面情緒。



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

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

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

交互體驗思考|產(chǎn)品體驗

周周


本文大綱

一、好的收藏體驗這么做

二、互動信息隱私的保護

三、確定按鈕放左邊or右邊?

四、手機實體鍵分布的合理性

五、靜音鍵存在的必要性

六、經(jīng)典的旋鈕式交互



iOS界面設(shè)計:12個優(yōu)秀案例激發(fā)你的靈感

seo達人


那么,如何設(shè)計出一款界面精美的移動端App呢?

如果你是為iOS設(shè)計應(yīng)用程序,那么此文你可以好好看一看。我們都知道用戶界面會直接影響到用戶體驗。所以本文中,我首先精心挑選了12款最佳iOS移動應(yīng)用程序模板和案例,它們都有著優(yōu)秀的iOS用戶界面設(shè)計(iOS設(shè)計模式)和良好的用戶體驗,涵蓋生活類,雜志類,體育類,天氣類,網(wǎng)上購物類等等。此外,本文還提供了一些iOS人機界面設(shè)計指南。希望能對您有所幫助。

1. City App

類別:導(dǎo)航

系統(tǒng)要求:支持iOS 9.0以上

City App是一個iOS應(yīng)用程序模板,也是一款以用戶為中心的信息類集合軟件。City App用于提供城市指南解決方案,并可以顯示你所在城市的有趣地點,并加以描述性介紹。

用戶還可以直接通過相機照片搜索圖片所在定位,一張圖片就是一個數(shù)據(jù)的集合。Admin后臺可集中管理地點數(shù)據(jù),但您可以對其編輯,更新或刪除。來自世界各地的風景優(yōu)美的圖片是界面色彩的主要構(gòu)成,非常美觀。

 

2. Triibe

類別:生活方式

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

Triibe是一個引領(lǐng)全新的社區(qū)類iOS應(yīng)用程序,它是專門為制作達人設(shè)計的一款產(chǎn)品。它提供一種最簡潔、直觀的方式展示你的手工創(chuàng)作和學(xué)習(xí)創(chuàng)意。任何題材設(shè)計,包括工藝,烹飪,家居,時尚等等,都可以得到展示。該App的一大特色使其精美的界面,用戶在這里上傳和展示其手工作品,搭配純凈的淺色背景,幾乎和任何的設(shè)計作品都能呼應(yīng)。

 

3. Design Events near you

類別:活動

系統(tǒng)要求:沒有限制

Design Events,顧名思義,就給人一種充滿設(shè)計感的印象。它是由來自印度的一位才華橫溢的設(shè)計師Johny vino設(shè)計的。它一款典型的iOS應(yīng)用程序,主要用于發(fā)現(xiàn)你身邊的各種設(shè)計活動以及您所在城市和附近地區(qū)的各種戶外活動。它可以智能的進行有趣的活動推薦。該App的動畫交互和過渡都非常簡潔流暢,搭配明快的配色,讓人覺得眼前一亮。

 

4. Trove

類別:播客和時尚

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

這是一個非??犰艜r尚的iOS應(yīng)用程序。借助Trove,您可以隨時隨地找到自己喜歡的風格,獲取來自世界頂級風格影響者的無盡靈感和建議,追隨頂級時尚博主。瀏覽“精選”服裝,可以發(fā)現(xiàn)并關(guān)注與您風格一致的博客。此外,“My feed”選項卡,可以讓您隨時查看收藏夾,并將物品添加到您的收藏夾中,以便稍后再購買或可以選擇立即購買,你的所有選擇都是自由的。

 

5. Nowait Guest

類別:食品和飲料

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

Nowait Guest是一個簡化生活的iOS App。使用該應(yīng)用程序,可以為您節(jié)約大量的訂餐等待時間,很餐廳都已經(jīng)開始投入使用該App,以方便其顧客可以提早了解其訂餐情況,包括Chili’s,Buffalo Wild Wings,F(xiàn)irst Watch等。用戶在家時,就可以隨時查看附件餐廳的當前等待時間,然后做出決定是否前往。餐廳的圖片使用非常吸睛,整個界面看起來讓人覺得“垂涎三尺”。

 

6. The New York Times

類別:雜志和報紙

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

這是一款家喻戶曉的應(yīng)用程序,幫助您隨時隨地掌握最新信息,對于新聞愛好者和喜歡閱讀的用戶而言,這是一款比書美觀,但和書一樣能用文字傳達信息的程序。該程序與iPhone,iPad和Apple Watch的NYT應(yīng)用程序一起獲得過聞類應(yīng)用程序獎項。它具有新聞快訊,多任務(wù)處理,晨報和晚報,播客,保存文章以供日后在任何設(shè)備上閱讀等功能。

 

7. iPhone X – Todo Concept

類別:雜志和報紙

系統(tǒng)要求:iOS 9.0或更高版本。與iPhone,iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong為Norde設(shè)計。它是基于iPhone X概念而制作的一個新原型。該原型的草圖和psd模型都可以免費下載。它是設(shè)計師特別為iPhone X的發(fā)布而設(shè)計的。它的動畫過度和轉(zhuǎn)換都非常流利,其色彩選擇鮮明大膽,極富感染力。留白的界面設(shè)計模式,和各種純色背景都能形成鮮明對比,突出了重要信息,又美化了界面。

 

8. Cloud Music Offline MP3 Music

類別:音樂

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

對于喜歡聽音樂的人來說,這是一款不容錯過的音樂應(yīng)用程序。您可以輕松地將音樂從云端下載到您的設(shè)備并脫機播放。您的設(shè)備上就是一個無限量的音樂庫。其音樂播放列表非常有趣,設(shè)置了動畫多樣的操作按鈕。整個界面白色純背景,干凈而簡潔,用戶的注意力會停留在其喜歡的音樂上,不會分散。該程序支持所有最流行的音樂文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

 

9. KicksOnFire: Buy Sneakers

類別:運動

系統(tǒng)要求:iOS 8.0或更高版本,與iPhone,iPad和iPod touch兼容

這個應(yīng)用程序是是專為運動鞋發(fā)燒友設(shè)計的,主要是推送新款運動鞋的特別發(fā)布日期及其相關(guān)新聞。該程序是App Store下載量最大的運動鞋發(fā)布日歷類應(yīng)用程序,不僅是獲得第一手運動鞋咨詢,您還可以在這里購買您最喜愛的運動鞋。其推送會基于您的個人資料智能進行個性化的發(fā)布和價格估算。

 

10. Airbnb

類別:旅行

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

家喻戶曉的一款A(yù)pp,風靡全球。當您準備旅行,從Airbnb開始享受難忘的旅行體驗吧。這里,所有關(guān)于旅行的事情都變得更加美好,比如尋找旅行冒險,遠游或找到一個全新的地方。游客可以獲得度假屋租賃,體驗一種新體驗,并在世界各地參觀的地方。如果您有房屋待租,Airbnb也是一個最佳平臺,在這里,你絕對會當一個優(yōu)秀的“房東”。

 

11. Local Weather Radar & Forecast

類別:天氣

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

該程序是一個當?shù)赝黄菩缘奶鞖庑侣劜驛pp,也是一個美國本地,乃至世界各地的交通應(yīng)用程序。只需一個點擊,就可以來回切換地位,以便隨時查看您的朋友和家人所在地的天氣情況。該程序還可以以小時來記錄您所在地區(qū)的氣溫變化情況,形成以個獨特的“氣溫變化”列表。

 

12. Sofa

類別:電影,電視和書籍

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

這是一款iPhone應(yīng)用程序,是可以讓您沉浸在書籍,電影或電視節(jié)目中度過美好時光的一款A(yù)pp。您可以自定義創(chuàng)建電影,電視節(jié)目,書籍等列表,也可以將電影,電視節(jié)目和書籍添加到任何列表中。當您需要搜索某一條目時,可以通過向下滑動操作來直接解鎖。

以上是2018年12個非常棒的iOS移動應(yīng)用程序,它們中的大部分都位于App Store排行榜的首位,下載次數(shù)和使用人數(shù)都幾位可觀。看了這么多成功的iOS應(yīng)用程序,作為設(shè)計師,你有沒有思考過,這些App成功的秘訣的是什么?

不難發(fā)現(xiàn),出色的用戶界面和用戶體驗至關(guān)重要。iOS設(shè)計主題將就明晰、尊重和深度,這意味著,在整個iOS系統(tǒng)中,文字在任何尺寸的設(shè)備上都是清晰易讀的,圖標是精確而清晰的,并且需要流暢的動畫和交互,有序的視覺層次等等??傊?,您設(shè)計出來的App需要滿足用戶對質(zhì)量和功能的高期望值,才有可能成功。

 

那么,設(shè)計一個美觀精細的iOS移動界面都有哪些必須注意的點呢?

1. 排版

1)字體

字體選擇不宜多,多則雜亂。只需使用單個字體并使用幾種字體變體即可。蘋果公司使用San Francisco,并根據(jù)產(chǎn)品功能選擇字體。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,舊金山變體是SF UI Text和SF UI Display。你只需按照規(guī)則即可。但為了達到文字的易讀性和可讀性俱佳,關(guān)于字體選擇和字體布局,你還是要根據(jù)具體情況仔細斟酌。

 

2)字體大小

iOS的字體大小有其比較明確的規(guī)范,具體查看下表:

 

2. UI設(shè)計中的顏色

色彩的魔力不言而喻,人都是視覺性的動物。顏色可以傳達活力和信息,提供視覺連續(xù)性,響應(yīng)用戶行為提供反饋、幫助人們可視化數(shù)據(jù)。自iOS 7以來,Apple一直在為其操作系統(tǒng)界面和預(yù)設(shè)應(yīng)用程序設(shè)置色彩明朗鮮艷的調(diào)色板。關(guān)于顏色的選擇比較自由,你可以使用下面列出的默認iOS調(diào)色板,也可以自己定制,以便在同類App中可以脫穎而出。

了解更多:如何在UI設(shè)計中明智地使用顏色來創(chuàng)建完美的UI界面?

 

3. 圖標

iOS的圖標風格是簡單易懂,并且專注于某個功能點或者信息點。通常情況下,iOS應(yīng)用程序需要使用到不同尺寸的圖標。比如,用戶在安裝某一App后,在主屏幕可能需要使用較小的圖標,但該程序在App Store里又需要更大的圖標。關(guān)于iOS圖標大小,也有比較明確的規(guī)范:

 

4. iOS 11中的更新

1)加粗的導(dǎo)航設(shè)置

這幾乎是iOS 11中最令人印象深刻的變化。使用粗體標題可以讓用戶快速了解其當前位置,并進行快速標簽切換。

 

2)界面布局中的空白區(qū)域

iOS 11的標題文本包含一組元素,其中包含圖片和描述,這些元素可以保持組元素之間的較大間距。在這種情況下,設(shè)計元素保持足夠的間距并且可以用于區(qū)分不必要的裝飾元素之間的層次關(guān)系。

 

地址:Mockplus

作者:jongde

 轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》iOS界面設(shè)計:12個優(yōu)秀案例激發(fā)你的靈感

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

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

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

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



如何在界面設(shè)計中使用留白

seo達人


  01 .認識留白 

在介紹如何使用留白提升用戶體驗之前,我們需要先明確留白的意義。

留白是頁面元素與元素之間,以及元素周圍的空間。當設(shè)計師談?wù)摿舭讜r,實際上說的是負空間,術(shù)語“負空間”起源于傳統(tǒng)藝術(shù)形式,它讓我們更準確地捕獲物體的形狀。

“Suprematism: Self Portrait in two dimensions”

負空間就是元素之間的部分  by Kasimir Malevich

 

雖然我們稱之為留白,但并不意味著就是白色的。只要該空間沒有任何的文字和圖像,即使被填充了任何顏色,這也算是一個留白。所以留白與實際的白色并沒有關(guān)聯(lián),“留白”就是“負空間”。

 

 02 . 為什么留白很重要 

留白是一個好設(shè)計的基本要素,與傳統(tǒng)藝術(shù)一樣,物體在GUI里也需要負空間,文字,Button,Logo,和其他元素需要空間去呼吸,所有優(yōu)秀的用戶界面里,從頂部到底部,頁面中所有的元素都有適當?shù)牧舭住?

空白可分為兩種類型:大留白和小留白。

大留白

 

小留白

 

Note
小留白:文本和網(wǎng)格之間的空白,它有助于內(nèi)容的可讀性。
大留白:頁面上主要元素之間的空白,與小留白不同,大留白是整體設(shè)計的容器。

 

 03.七種影響用戶體驗的留白 

留白是平衡設(shè)計元素的好工具,幫助我們更好得組織內(nèi)容,提升視覺信息傳達的體驗。

— 1 強調(diào)特定元素 —

強調(diào)某種元素,是設(shè)計師最常見的任務(wù)之一,雖然設(shè)計師可以用許多視覺方法讓用戶聚焦在某些特定元素上,在焦點的周圍運用留白往往都能獲得比較好的效果。

距離和注意力之間有特定的聯(lián)系,較大的距離能吸引人的注意,周圍的缺失使現(xiàn)有的元素更佳突出。設(shè)計師會運用合適的留白去強調(diào)重要的元素,例如一段內(nèi)容,較大的Padding值會加強這個區(qū)域的吸引力,因為屏幕上沒有其它元素可關(guān)注。

物體周圍的留白越多,就越容易吸引眼球。

在下面的例子里,Google在設(shè)計中大力倡導(dǎo)留白,留白很好地傳達了設(shè)計的意圖,我們的注意力在頁面的主要目標上,不會分散給其他區(qū)域。

MailChimp的主頁運用了相同的方法,來突出操作按鈕(call to action),你會注意到“Sign Up Free”這個按鈕立刻吸引了人的注意。

 

— 2 鏈接相關(guān)元素 —

當我們在檢查元素布局時,通常把它看做是一些對象的組合,這是因為我們的大腦會根據(jù)物體之間的相對位置,來創(chuàng)造一個關(guān)系模型。格式塔的法則解釋了,臨近的物體會被看做是一個整體。留白也提供了一種視覺線索,看一下這張圖:

很可能你看到的是兩組點陣,而不是12個原點,這是12個相同的點,唯一不同的是他們的間距不同。

這個法則也可以用于交互設(shè)計,我們來看下面的Web表單。

  • 相關(guān)元素成組:我們知道,一組元素靠在一起時,看上去是有關(guān)系的,所以相關(guān)的標簽要靠得近。左圖較難傳達出標簽與輸入框的關(guān)系,而通過調(diào)整間距,如右圖,表單的可瀏覽性提高了。

  • 相關(guān)信息成組:眾所周知,長的表單讓人感到壓迫。用戶在填這些表格的時候會變得猶豫。把相關(guān)的字段組合在一起,能幫助用戶了解他們必須填寫的信息。以下的形式中,兩種表格都有相同數(shù)量的字段。不同的是右邊劃分了三個組,內(nèi)容的數(shù)量是相同的,但是給用戶的印象大不相同。

 

— 3 防止視覺雜亂 —

許多的App和網(wǎng)站承載著太多的信息和元素,沒有足夠的呼吸空間。這通常由于產(chǎn)品創(chuàng)造者希望傳遞太多的信息,不幸的是,用戶的關(guān)注度有限,越多的元素爭搶著注意力,用戶能夠關(guān)注到的就越少。

可以看下面的例子,這是一個元素太多引起的極端案例。

當每個看上去都一樣的時候,用戶選不出重要的那一個

 

許多網(wǎng)站有著相同的問題,缺乏留白會給用戶的眼睛和耐心帶來壓力,充斥著文字和圖片的網(wǎng)站使用戶產(chǎn)生挫敗感,使他們逃離。

雜亂的頁面沒有吸引力,并且不會讓用戶想要閱讀內(nèi)容,尤其是當沒有視覺層次時。

過多的信息負載讓界面變得混亂,那么減少混亂就能提高界面的可理解性:通過消除干擾,你可以強制用戶只關(guān)注即時可見的內(nèi)容,你可以用留白來減少壓迫性,留白可以減少噪音,讓用戶更能聚焦。當布局達到了留白平衡,各個元素更容易被解讀時,就會帶來更好的用戶體驗。

Tip
請嘗試“5秒測試”,觀察一個頁面5秒鐘,然后回憶你記得的內(nèi)容,是否是你想要強調(diào)的元素,這將幫你了解頁面中是否有合適的留白。

 

— 4 通過互動內(nèi)容引導(dǎo)用戶 —

如果你希望用戶的視線從一個點流向另一個點,你需要給他一個這么做的線索,這個線索就是留白,留白運用的得當時,能為頁面創(chuàng)造自然的視線流動。

特定的留白可以實現(xiàn)有效引導(dǎo)、保持讀者的興趣,如下圖所見,Dropbox通過鋸齒模型引導(dǎo)用戶瀏覽一系列產(chǎn)品的關(guān)鍵特征。

空白可以幫助設(shè)計師講故事

 

不對稱是另一種留白技巧,可以用來引導(dǎo)用戶對某一部分的注意,當一個元素運用了不對稱留白,它會立馬就會從周圍的元素中跳脫出來,看起來更有活力。如果你要在頁面中設(shè)計一個鏈接或者按鈕,這種方法可以有效引起別人的注意。

非對稱留白非常適合聚焦頁面上的特殊區(qū)域

 

— 5 提高可讀性 —

內(nèi)容為王,內(nèi)容是大多數(shù)應(yīng)用程序和網(wǎng)站的價值,這就是為什么良好的可用性的一個關(guān)鍵方面是內(nèi)容的可讀性,很多因素可以提高可讀性,比如字體的大小和顏色,或使用標題,留白是其中一個重要因素,因為它對內(nèi)容的可讀性有直接的影響:

行間距可以大大提高一段文本的可讀性,一般來說,行間距越大,用戶閱讀時候的體驗就越好,但是太大會破壞統(tǒng)一性,使得設(shè)計中斷。

段落和文字塊之間的留白有助于幫助人們更好地理解閱讀的內(nèi)容,根據(jù)2004年的研究,這種空白增加了近20%的可理解性

 

— 6 運用視覺分隔線 —

設(shè)計師經(jīng)常使用橫向或縱向的線去創(chuàng)造分隔線,雖然這樣的分隔線在大多數(shù)情況下是可以的,有一個主要的缺點,大量分隔線的使用會導(dǎo)致視覺的噪音,造成密集擁擠的頁面。

隨著用戶的偏好向更簡潔的界面轉(zhuǎn)移,對UI中的基本元素進行解構(gòu)是成功的關(guān)鍵??梢杂秘摽臻g來布局,而不是線,更少的分隔線能營造清爽、現(xiàn)代和更實用的感受,大方地使用留白可使一些復(fù)雜的界面看起來更簡潔友好。這一變化背后的真正意義在于,在關(guān)注內(nèi)容和功能同時消除冗余的元素。

 

— 7 創(chuàng)造成熟優(yōu)雅的感受 —

雖然留白經(jīng)常被看作是改善用戶體驗的技巧,但它也可以被用于純粹的審美目的,大量留白的網(wǎng)站能反映出極簡和奢華感。

留白有助于提高整體設(shè)計的基調(diào)——通過把更多的焦點放在產(chǎn)品本身,使產(chǎn)品看上去更奢華。

 

04. 關(guān)于利益相關(guān)者的幾句話 

現(xiàn)在你可能知道了留白的重要性,而另一方面,留白可能引起設(shè)計師和利益相關(guān)者的矛盾。“留白太多了,我們可以用來做什么?”是我們經(jīng)常從利益相關(guān)者(客戶或經(jīng)理)那里聽到的。

把這種要求作為一個機會去教育利益相關(guān)者,作為設(shè)計師,我們的工作就是幫助他人理解為什么留白是用戶體驗重要的組成部分,宣揚并解釋你的思考過程,如果這不起作用,你可以采用A/B測試,測試一個設(shè)計的兩個版本,一個由設(shè)計師提出,一個由客戶提出,用戶可能會喜歡那個不那么混亂的版本。

 

05.結(jié)論 

留白不是一個空白的畫布,而是一個強大的設(shè)計工具,但是這個工具很難掌握:現(xiàn)實應(yīng)用中的留白既是藝術(shù)也是科學(xué),掌握如何使用留白來創(chuàng)建良好的布局需要實踐。你實踐的越多,學(xué)到的也就越多。

 

原文地址:medium

譯文地址:51UXC(公眾號)

譯者:51UXC 翻譯社

 轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何在界面設(shè)計中使用留白

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

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

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

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔