首頁(yè)

深入研究場(chǎng)景化體驗(yàn)設(shè)計(jì)

資深UI設(shè)計(jì)者



一、前言

場(chǎng)景化設(shè)計(jì)一詞第一次看到還是在前年設(shè)計(jì)分享大會(huì)上,當(dāng)時(shí)懵懵懂懂的我第一次看到這么刁鉆的角度,甚是驚訝,后來(lái)我也是在不斷的研究這個(gè)內(nèi)容,上一篇文章《【干貨】設(shè)計(jì)師的發(fā)力點(diǎn)》中,也稍微的提了一些關(guān)于場(chǎng)景化設(shè)計(jì)的內(nèi)容。


本文章的出發(fā)點(diǎn)是因?yàn)槲以趯W(xué)習(xí)的過(guò)程中,但很難找到全面分析的文章,因此我打算寫(xiě)一篇更加深入的分析,一方面是對(duì)自己學(xué)習(xí)的總結(jié),另一方面是分享給大家我的心得。


接下來(lái)會(huì)通過(guò)三個(gè)維度深入研究場(chǎng)景化體驗(yàn)設(shè)計(jì),幫助您快速提升場(chǎng)景設(shè)計(jì)思維,中間也會(huì)并通過(guò)大量案例,帶你真實(shí)感受場(chǎng)景化設(shè)計(jì)思維在產(chǎn)品設(shè)計(jì)中的實(shí)際運(yùn)用。



二、場(chǎng)景與體驗(yàn)

我們看到各種形形色色的產(chǎn)品功能,但不能單一的去看待問(wèn)題,也無(wú)法直接的去評(píng)判這個(gè)功能是否合理,所有的設(shè)計(jì)都是圍繞著某種指定的場(chǎng)景下去完成它的使命,拋開(kāi)場(chǎng)景談設(shè)計(jì),就是耍流氓。例如疫情期間的健康碼,這也是為了響應(yīng)防控疫情的號(hào)召,需要對(duì)每個(gè)人的行程路徑進(jìn)行把控,而這種產(chǎn)品就是為了滿足某種場(chǎng)景下的需求設(shè)計(jì)。

而在面對(duì)產(chǎn)品設(shè)計(jì)有具體場(chǎng)景的情況下,可以根據(jù)場(chǎng)景分析用戶的需求,進(jìn)一步制定設(shè)計(jì)目標(biāo),通過(guò)合理的設(shè)計(jì)方法,提升用戶的產(chǎn)品體驗(yàn)。



三、 遇到的問(wèn)題

在早期的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,大多數(shù)體驗(yàn)優(yōu)化的設(shè)計(jì)流程只是對(duì)需求進(jìn)行單一的分析,并且相同的內(nèi)容采用同一解決方案,整個(gè)設(shè)計(jì)看似基本沒(méi)有問(wèn)題,但隨著互聯(lián)網(wǎng)的高速發(fā)展與完善,用戶群體越來(lái)越多,產(chǎn)品功能越來(lái)越復(fù)雜等一系列的因素,導(dǎo)致出現(xiàn)了一些問(wèn)題。


2.1   產(chǎn)品復(fù)雜化

隨著產(chǎn)品功能的完善,功能復(fù)雜化,單一的解決方案無(wú)法滿足多種場(chǎng)景下的使用,需要合理規(guī)劃,根據(jù)不同的場(chǎng)景進(jìn)行體驗(yàn)設(shè)計(jì),才能更好的發(fā)揮價(jià)值。


2.2   同質(zhì)化嚴(yán)重

大多數(shù)流程可以滿足各種不同分類(lèi)的產(chǎn)品使用,例如傳統(tǒng)的購(gòu)物流程從詳情頁(yè)出發(fā)到訂單頁(yè)流程,雖然能滿足所有的支付流程,但是缺乏行業(yè)設(shè)計(jì)特性,長(zhǎng)期以來(lái)也會(huì)缺乏競(jìng)爭(zhēng)力。


2.3   場(chǎng)景體驗(yàn)欠佳

一套設(shè)計(jì)解決方案、交互流程滿足所有的使用情況,雖然在產(chǎn)品中實(shí)現(xiàn)了一致性,但面臨復(fù)雜的場(chǎng)景很難滿足,并且用戶群體越來(lái)越復(fù)雜的情況下,每個(gè)用戶的訴求也會(huì)存在偏差,因此我們需要根據(jù)不同的場(chǎng)景,制定不同的方案。


四、場(chǎng)景精細(xì)化設(shè)計(jì)

為了更好的理解場(chǎng)景化設(shè)計(jì),我們可以通過(guò)哲學(xué)上著名的三大問(wèn)題,“你是誰(shuí)?”“你從哪里來(lái)?”“你要到哪里去?”,例如唐僧從東土大唐而來(lái),要到西天取經(jīng),從中我們可以發(fā)現(xiàn)三個(gè)關(guān)鍵的內(nèi)容,就是人、地、事,這也是場(chǎng)景化設(shè)計(jì)中必不可少的三個(gè)內(nèi)容。


在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)過(guò)程中,為了進(jìn)一步強(qiáng)化體驗(yàn),我們可以從場(chǎng)景化設(shè)計(jì)中三個(gè)關(guān)鍵內(nèi)容,人、地、事,這三個(gè)角度進(jìn)行更加深入的精細(xì)化設(shè)計(jì),區(qū)分不同的場(chǎng)景采用不同的設(shè)計(jì)方法,從而滿足更多特點(diǎn)場(chǎng)景下的需求。


五、用戶分層設(shè)計(jì)

場(chǎng)景化設(shè)計(jì)中,用戶是最關(guān)鍵的內(nèi)容之一,正所謂以用戶為中心的設(shè)計(jì)思維能更好的服務(wù)用戶。當(dāng)用戶量越來(lái)越龐大后,可以對(duì)用戶進(jìn)行分層處理,這也是用戶運(yùn)營(yíng)中常見(jiàn)的一個(gè)概念,簡(jiǎn)單理解就是指將用戶分為不同類(lèi)型。


用戶分層是根據(jù)不同用戶的行為特征劃分成不同的用戶群,進(jìn)而制定不同的產(chǎn)品策略來(lái)滿足其差異化需求,從而充分發(fā)揮每個(gè)層級(jí)用戶的價(jià)值,達(dá)成產(chǎn)品目標(biāo),通過(guò)用戶分層的思維方式結(jié)合場(chǎng)景化設(shè)計(jì),可以更好的滿足不同類(lèi)型的用戶訴求,還能根據(jù)不同用戶的類(lèi)型提供差異化的內(nèi)容和服務(wù)。

用戶分層的方式是通過(guò)標(biāo)簽的形式快速給用戶進(jìn)行分層,在實(shí)際的運(yùn)用中,主要分為基礎(chǔ)屬性和行為屬性。


5.1  基礎(chǔ)屬性

基礎(chǔ)屬性包含用戶的年齡、性別、身高等,這種用戶分類(lèi)的方式,是最直觀簡(jiǎn)單的。


5.1.1 年齡

大多數(shù)產(chǎn)品中會(huì)通過(guò)年齡來(lái)進(jìn)行用戶分層,這種形式可以快速區(qū)分用戶的基本屬性,因?yàn)橛脩舻哪挲g狀態(tài)對(duì)待事物也會(huì)存在很大的差異。


例如支付寶的電子社保卡服務(wù),根據(jù)用戶不同的年齡階段,展示不同的領(lǐng)卡信息,進(jìn)一步讓用戶更快的獲取到符合不同年齡段所關(guān)注的合適信息,可以直接提升開(kāi)卡率。


5.1.2 老齡化設(shè)計(jì)

隨著我國(guó)即將進(jìn)入中度老齡化社會(huì),也正是因?yàn)槔夏耆说纳砗驼J(rèn)知障礙的限制,他們使用APP的體驗(yàn)并不是很順暢,所以大多數(shù)互聯(lián)網(wǎng)產(chǎn)品逐漸向中老年群體滲透,更多的關(guān)注起老齡化設(shè)計(jì)。


在適老化設(shè)計(jì)中,在不影響老年用戶對(duì)功能使用的情況下,一般都會(huì)采用通過(guò)設(shè)計(jì)降噪的方式,去除所有復(fù)雜的次要信息,保留核心內(nèi)容,并且通過(guò)放大來(lái)強(qiáng)化關(guān)鍵信息,文案的處理上也會(huì)進(jìn)行內(nèi)容簡(jiǎn)化處理,減少老年人的閱讀成本。


適老化設(shè)計(jì)除了視覺(jué)上放大和簡(jiǎn)潔的感知體驗(yàn)外,在交互體驗(yàn)上也會(huì)有很多人性化的設(shè)計(jì),例如在容器內(nèi)容上加入行為按鈕并描述去向,幫助老年人順利完成目標(biāo)行為。


甚至在部分產(chǎn)品中,會(huì)強(qiáng)化聽(tīng)覺(jué)上的功能體驗(yàn),例如語(yǔ)音播報(bào)、語(yǔ)音提問(wèn)、電話叫車(chē)等功能,既能通過(guò)語(yǔ)音的形式彌補(bǔ)老年人視覺(jué)能力上的不足,還能減少操作成本。


5.1.3無(wú)障礙設(shè)計(jì)

隨著互聯(lián)網(wǎng)的發(fā)展,用戶群體逐漸龐大,其中也有部分身體有局限的用戶,對(duì)于他們來(lái)說(shuō)更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息,因此越來(lái)越多大公司注重到這一方向,而這也是我們作為一名設(shè)計(jì)師,更應(yīng)該去優(yōu)化的方向。

可以采用無(wú)障礙色系,以及顏色的色差處理,針對(duì)性的服務(wù)于色盲和色弱群體,使得他們可以在信息閱讀上更符合他們的習(xí)慣,從而進(jìn)一步打造更人性化的產(chǎn)品體驗(yàn)。


5.1.4 用戶身份

而關(guān)于用戶分層的場(chǎng)景設(shè)計(jì)中,我們還可以區(qū)分用戶不同的狀態(tài)、身份來(lái)對(duì)界面進(jìn)行差異化布局,最典型的代表就是用戶的會(huì)員身份。


會(huì)員它分為很多不同的階段,從開(kāi)通到到期,用戶在不同階段對(duì)于內(nèi)容的關(guān)注上也存在很大的差異的,例如未開(kāi)通展示更多的價(jià)格、權(quán)益信息,吸引消費(fèi)決策。我們可以從這個(gè)角度出發(fā),區(qū)分用戶的會(huì)員狀態(tài),進(jìn)一步來(lái)進(jìn)行差異化設(shè)計(jì)。從而有效的提高不同階段用戶的行為決策。



5.2  行為屬性

每一個(gè)用戶在產(chǎn)品體驗(yàn)過(guò)程中,都會(huì)有著各式各樣的行為操作,例如瀏覽記錄、關(guān)注、喜好等,我們也可以通過(guò)這種方式來(lái)進(jìn)行分類(lèi),可以更加直接的聚焦到關(guān)鍵信息上,既可給予用戶驚喜感,也可以達(dá)成業(yè)務(wù)目標(biāo)。


5.2.1 興趣標(biāo)簽

標(biāo)簽和上面描述的基礎(chǔ)信息還是存在一定差異的,標(biāo)簽相當(dāng)于是產(chǎn)品根據(jù)用戶的行為等去定義的不同類(lèi)型的標(biāo)簽,這種方式可以快速給用戶進(jìn)行分類(lèi),常應(yīng)用于內(nèi)容型產(chǎn)品以及電商平臺(tái),給用戶貼上各式各樣的標(biāo)簽,其次再根據(jù)他們的具體需求進(jìn)行個(gè)性化的內(nèi)容設(shè)計(jì),可以更快的實(shí)現(xiàn)千人千面的智能推送。


不同興趣標(biāo)簽的用戶對(duì)待內(nèi)容的訴求也會(huì)不同,因此在頁(yè)面結(jié)構(gòu)設(shè)計(jì)時(shí),我們需要考慮頁(yè)面信息的優(yōu)先級(jí)、瀏覽動(dòng)線、信息內(nèi)容的呈現(xiàn),例如重度用戶和路人用戶的區(qū)別,一個(gè)注重商品展現(xiàn)的效率,一個(gè)注重氛圍和吸引。

除了整體的頁(yè)面結(jié)構(gòu)內(nèi)容外,用戶對(duì)內(nèi)容訴求也不同,例如優(yōu)惠型的用戶更關(guān)注活動(dòng)和折扣信息,通過(guò)用戶標(biāo)簽進(jìn)行分層設(shè)計(jì),能更快的達(dá)到刺激用戶消費(fèi)的目的。


5.2.2 消費(fèi)模型 (RFM模型)

  • R:最近一次的消費(fèi)時(shí)間(Recency)

  • F:一段時(shí)間內(nèi)的消費(fèi)頻次(Frequency)

  • M:一段時(shí)間內(nèi)的消費(fèi)金額(Monetary)


RFM模型是根據(jù)用戶的消費(fèi)行為、頻率、金額3項(xiàng)指標(biāo)對(duì)用戶的價(jià)值狀況進(jìn)行級(jí)別劃分,一共可以分為8種基礎(chǔ)用戶類(lèi)型,然后再根據(jù)用戶的消費(fèi)金額進(jìn)行從上往下排序,最后區(qū)分不同類(lèi)型的用戶,進(jìn)行精細(xì)化運(yùn)營(yíng)。

這也是很多企業(yè)都在使用的模型,價(jià)值級(jí)別較高的用戶可以調(diào)整資源傾斜力度、定制服務(wù),甚至針對(duì)普通用戶也可以進(jìn)行激活消費(fèi)、挽留措施。


在電商產(chǎn)品中這種方式最為常見(jiàn),通過(guò)模型分類(lèi)可以快速了解用戶消費(fèi)情況,一般會(huì)區(qū)分新老用戶,活躍用戶與沉寂用戶,例如創(chuàng)建新人導(dǎo)購(gòu),刺激用戶的首單轉(zhuǎn)化,而長(zhǎng)時(shí)間未進(jìn)行復(fù)購(gòu)的沉寂用戶,也會(huì)采取一系列的措施吸引用戶再次消費(fèi),提升用戶的復(fù)購(gòu)率。



5.2.3 AIPL模型

  • A:認(rèn)知 - 新客或不了解產(chǎn)品的用戶(Awareness)

  • I: 興趣 - 對(duì)產(chǎn)品有興趣且關(guān)注過(guò)的用戶(Interest)

  • P:購(gòu)買(mǎi) - 刺激用戶產(chǎn)生購(gòu)買(mǎi)行為(Purchase)

  • L:忠誠(chéng) - 有過(guò)較高復(fù)購(gòu)行為的用戶(Loyalty)


這個(gè)模型對(duì)應(yīng)的也是用戶的成長(zhǎng)路徑,每個(gè)用戶都是從認(rèn)知開(kāi)始,才慢慢變成購(gòu)買(mǎi)或者忠誠(chéng),所以需要做的,就是引導(dǎo)用戶不斷往更上一層發(fā)展,當(dāng)然,我們也可以對(duì)四種不同類(lèi)型的用戶同時(shí)進(jìn)行,將這四種類(lèi)型分發(fā)到產(chǎn)品中的各個(gè)鏈路中,以下案例來(lái)自于淘寶。

通過(guò)種草的形式給用戶建立認(rèn)知,培養(yǎng)用戶興趣,而面臨消費(fèi)顧慮并遲遲未下單的用戶,可以利用入手分享的方式克服轉(zhuǎn)化阻礙。而對(duì)于購(gòu)買(mǎi)型和忠誠(chéng)型用戶,可以通過(guò)優(yōu)惠、活動(dòng)等方式,刺激下單并建立長(zhǎng)期關(guān)系。


5.2.4  行為路徑

不同行為表現(xiàn)的用戶所觸發(fā)的關(guān)鍵行為不同,所以在設(shè)計(jì)路徑時(shí),要先對(duì)用戶有分層,有定義,再針對(duì)性的實(shí)施,對(duì)路徑進(jìn)行合適的分層布局,確保用戶去完成某件事的各種行為路徑,都能被滿足。


下面的案例從上倒下依次為,想快速申請(qǐng)貸款或者快速完成任務(wù)獲取現(xiàn)金的用戶,我們提供了直接操作區(qū)域,并且置于頭部進(jìn)行業(yè)務(wù)屬性強(qiáng)化,中間融入了更多的分類(lèi)與內(nèi)容引導(dǎo),進(jìn)一步激發(fā)用戶的興趣,最后可以再通過(guò)不同的形式適當(dāng)?shù)臏p少用戶顧慮,例如優(yōu)惠券的福利(強(qiáng)化申請(qǐng)貸款),為新用戶提供發(fā)帖示例(確保社區(qū)的內(nèi)容品質(zhì))。

雖然兩個(gè)界面的內(nèi)容差異較大,但是結(jié)構(gòu)拆分的方式以及行為路徑的規(guī)劃都是大同小異的,主要還是為了滿足不同行為的用戶,進(jìn)一步輔助他們快速完成功能服務(wù)。


六、區(qū)域化設(shè)計(jì)

根據(jù)不同的地點(diǎn)、位置、空間進(jìn)行區(qū)域化設(shè)計(jì),為不同的地域、情景進(jìn)行差異化設(shè)計(jì)。在空間設(shè)計(jì)、園林設(shè)計(jì)中,我們會(huì)常??吹竭@種設(shè)計(jì)方式,規(guī)劃整個(gè)區(qū)域,進(jìn)行合理的場(chǎng)景化設(shè)計(jì),而在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì),主要體現(xiàn)在產(chǎn)品的戰(zhàn)略層面,面向不同的區(qū)域市場(chǎng)。接下來(lái)通過(guò)以下三個(gè)角度進(jìn)一步分析。


6.1  下沉市場(chǎng)

下沉市場(chǎng)是前幾年比較流行的概念,是新鮮流量的代名詞,特別是拼多多的崛起,引起了許多行業(yè)關(guān)注流量的新區(qū)域。簡(jiǎn)單理解就是產(chǎn)品的戰(zhàn)略市場(chǎng)主要面向于3-6線的城市。


下沉市場(chǎng)的用戶特征:

1、簡(jiǎn)單直接,所見(jiàn)即所得;所以在設(shè)計(jì)的時(shí)候應(yīng)該避免操作路徑過(guò)深,展現(xiàn)內(nèi)容太隱晦。

2、對(duì)價(jià)格和收益比較敏感,愿意花費(fèi)時(shí)間獲得金錢(qián)上的獎(jiǎng)勵(lì),例如拼多多其實(shí)是個(gè)游戲電商。

3、愿意下載一些現(xiàn)金獎(jiǎng)勵(lì)的產(chǎn)品,通過(guò)任務(wù)或者閱讀來(lái)獲得獎(jiǎng)勵(lì),例如趣頭條。

4、熟人社交影響力較大,可以通過(guò)微信生態(tài),快速形成裂變。


6.2  全球化設(shè)計(jì)

隨著本地化市場(chǎng)的成熟,越來(lái)越多產(chǎn)品開(kāi)始面向海外市場(chǎng),而海外市場(chǎng)與本地相比也會(huì)有著很多的差異,例如語(yǔ)言、宗教、審美、文化等等都有著諸多差異,所以這也是無(wú)形之中給設(shè)計(jì)帶來(lái)了很多的挑戰(zhàn)。


6.2.1 本土化策略

一個(gè)產(chǎn)品無(wú)法滿足全球市場(chǎng)的使用,因此全球化設(shè)計(jì)最好的方法就是本土化策略,深入挖掘當(dāng)?shù)厥袌?chǎng)的文化、用戶喜好,地域特色等內(nèi)容,進(jìn)一步對(duì)產(chǎn)品進(jìn)行單獨(dú)設(shè)計(jì),例如大家比較熟悉的Tiktok,與抖音分開(kāi)運(yùn)營(yíng),更具有針對(duì)性。


大部分產(chǎn)品在進(jìn)行海外市場(chǎng)的運(yùn)營(yíng)設(shè)計(jì)中,都會(huì)充分融合當(dāng)?shù)厥袌?chǎng)的喜好或元素,進(jìn)一步發(fā)揮當(dāng)?shù)靥厣ぐl(fā)用戶的情感共鳴。


6.2.2 出海規(guī)則

由于不同國(guó)家的文化差異、行為習(xí)慣、認(rèn)知能力都會(huì)存在一定的偏差,因此在產(chǎn)品設(shè)計(jì)的過(guò)程中,我們也有很多規(guī)則需要去注意,例如、地區(qū)禁忌、語(yǔ)言處理等。接下來(lái)我大概列舉幾個(gè)我平時(shí)記錄的注意事項(xiàng)。


單位規(guī)則

度量衡需要滿足不同國(guó)家的要求,例如公斤/磅、英尺/厘米、公里/英里,而在一些運(yùn)動(dòng)產(chǎn)品中如果要表現(xiàn)卡路里,不建議使用一碗米飯作為單位來(lái)描述。


形象禁忌

在一些全球化設(shè)計(jì)中,如果涉及到插畫(huà)以及人物,需要注意一些姿勢(shì)和特征,盡可能避免不必要的麻煩。例如人物的手勢(shì)、 兩手交叉、十字交叉、使用左手等等,甚至在中東地區(qū)女性暴露都要注意避免。


圖形禁忌

圖形的表意也需要契合當(dāng)?shù)匚幕攸c(diǎn),一些比較含蓄的內(nèi)容盡可能避免,例如使用話筒代表娛樂(lè),藥丸代表健康,雖然在國(guó)內(nèi)市場(chǎng)比較常見(jiàn),但針對(duì)于全球化的設(shè)計(jì)可能就不是很適合了。


而對(duì)于這一點(diǎn)每個(gè)國(guó)家的宗教文化也會(huì)有所不同,例如阿拉伯地區(qū),避免使用星星圖標(biāo),科威特、埃及、阿拉伯聯(lián)合酋長(zhǎng)國(guó)、阿富汗等因宗教原因禁酒,中東地區(qū)禁忌女性圖像,甚至我們經(jīng)??吹降膐k都是不好的詞語(yǔ),在個(gè)別國(guó)家里有罵人的意思。


除了圖形外,顏色也需要注意,在一些非洲地區(qū)盡可能避免顏色鮮艷或者紅色。


語(yǔ)言顯示

在界面設(shè)計(jì)過(guò)程中,設(shè)計(jì)師常常會(huì)關(guān)注字符串的顯示寬度,以及換行規(guī)則等,而面臨全球化設(shè)計(jì)時(shí),文字需要適配多種語(yǔ)言,而外語(yǔ)的顯示長(zhǎng)度明顯和中文有著很大的區(qū)別。為了能更好的進(jìn)行極限范圍的確定,我一般會(huì)選用德語(yǔ)進(jìn)行排版,因?yàn)榈抡Z(yǔ)是大部分語(yǔ)言中,長(zhǎng)度最長(zhǎng)的內(nèi)容了。


除此之外,我們還應(yīng)該更加關(guān)注阿拉伯地區(qū)的語(yǔ)言顯示,他與我們傳統(tǒng)的閱讀方式截然不同,用戶的閱讀順序是從右往左,甚至交互方式也是如此,所以在設(shè)計(jì)的過(guò)程中,需要對(duì)阿拉伯地區(qū)的界面設(shè)計(jì),進(jìn)行鏡像處理。


鏡像處理

除了文本內(nèi)容的顯示順序改為從右往左之外,界面中的圖像、圖形、圖標(biāo)也需要進(jìn)行鏡像處理,但需要注意的是,含有明確指示性或方向性的圖標(biāo)需要鏡像,例如返回、查看更多。而像刷新、歷史、鬧鐘等統(tǒng)一標(biāo)準(zhǔn)的圖標(biāo)不需要鏡像。


6.3  空間設(shè)計(jì)

聽(tīng)到空間設(shè)計(jì)這個(gè)詞,我首先聯(lián)想到的就是超市,設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中,會(huì)充分考慮人群的動(dòng)線設(shè)計(jì),商品的分布也會(huì)大有講究,入口一般是單價(jià)較高的電子產(chǎn)品,手扶梯邊和收銀臺(tái)都會(huì)放一些零碎小單品,既要考慮短頭商品的展示,也要考慮長(zhǎng)尾商品的曝光。


6.3.1 線下鏈接

而這一個(gè)特征,在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,也是可以借鑒的,例如支付寶的電子社???,為了能更好的推廣電子服務(wù),設(shè)計(jì)師將線下社保局進(jìn)行空間設(shè)計(jì),用戶在不同位置所看到的海報(bào)均不同,針對(duì)用戶不同階段對(duì)需求的不同,進(jìn)行場(chǎng)景差異化設(shè)計(jì),可以更好的傳播有價(jià)值的信息。


6.3.2 到店體驗(yàn)

到店服務(wù),即用線上互聯(lián)網(wǎng)服務(wù)線下業(yè)務(wù),其出現(xiàn)是為了解決傳統(tǒng)線下消費(fèi)固有的問(wèn)題,為了更好的形成線上和線下的鏈接,我們也可以采用上述的方法,對(duì)整個(gè)線下店面進(jìn)行空間設(shè)計(jì)。


例如店外主要起到引流的效果,可以讓用戶掃碼進(jìn)入店鋪首頁(yè)了解店鋪具體的信息,而在店門(mén)口可以讓用戶進(jìn)行掃碼排隊(duì)預(yù)約等,當(dāng)食客就坐后根據(jù)桌上的二維碼可以進(jìn)入到店鋪的下單頁(yè),最后在收銀臺(tái)布置掃碼買(mǎi)單,整個(gè)流程符合線下體驗(yàn),并可以將不同的頁(yè)面準(zhǔn)確的傳遞給用戶,促進(jìn)用戶快速完成線下消費(fèi)。


七、服務(wù)差異化設(shè)計(jì)

場(chǎng)景化設(shè)計(jì)中第三個(gè)關(guān)鍵內(nèi)容就是事,而在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,所有的事都是為了能更好的服務(wù)用戶,但隨著互聯(lián)網(wǎng)成熟,功能越來(lái)越豐富化,我們需要更加精細(xì)的場(chǎng)景劃分,明確用戶對(duì)于整個(gè)服務(wù)的操作流程,結(jié)合前后場(chǎng)景預(yù)判用戶目標(biāo),通過(guò)設(shè)計(jì)提高用戶效率,給予用戶驚喜與感動(dòng)。接下來(lái)主要通過(guò)目的、行業(yè)、內(nèi)容三個(gè)角度深入分析。


7.1 交互流程 - 服務(wù)目的

如今隨著互聯(lián)網(wǎng)不斷發(fā)展,用戶的時(shí)間被各種產(chǎn)品分割,而面臨著用戶在產(chǎn)品中的所有體驗(yàn),做的每一件事情,都是有目的性的,例如打開(kāi)淘寶的目的是想購(gòu)物,打開(kāi)抖音的目的是想放松娛樂(lè),因此只有挖掘出用戶的目的,才能更好利用服務(wù)完成用戶行為。


為了讓用戶更好的完成任務(wù),可以將操作流程拆分為三步,從開(kāi)始到結(jié)束,結(jié)合前后場(chǎng)景預(yù)判用戶目標(biāo),提升交互體驗(yàn),而關(guān)于這個(gè)內(nèi)容,我之前在《交互流程中的三大重點(diǎn)》一文中有詳細(xì)講解,感興趣的可以自行查看。


7.1.1  操作前 - 行為目的

像我們常見(jiàn)的一些產(chǎn)品結(jié)構(gòu)布局中,其實(shí)有也著簡(jiǎn)單的分層布局,我們可以根據(jù)用戶不同的行為目的結(jié)合頁(yè)面板塊的內(nèi)容呈現(xiàn)來(lái)進(jìn)行結(jié)構(gòu)分層布局。


下面的案例從上到下依次為,目的明確的搜索用戶、分類(lèi)明確的用戶以及只想隨便看看的用戶,這樣的話,可以有效的服務(wù)與不同用戶的目的,也能快速實(shí)現(xiàn)流量分發(fā)的作用。


7.1.2  操作中 - 操作目的

根據(jù)不同的服務(wù)以及用戶操作目的,判斷內(nèi)容的合適性,例如輸入內(nèi)容時(shí),結(jié)合前后場(chǎng)景預(yù)判用戶目標(biāo),針對(duì)不同的內(nèi)容呈現(xiàn)相對(duì)應(yīng)的鍵盤(pán)樣式,通過(guò)設(shè)計(jì)提高用戶效率,滿足用戶的操作目的。


操作減負(fù)

面對(duì)各式各樣的數(shù)據(jù)錄入,表單填寫(xiě)是移動(dòng)端設(shè)計(jì)中最復(fù)雜的一項(xiàng)操作,在設(shè)計(jì)過(guò)程中可以根據(jù)用戶目的進(jìn)行場(chǎng)景區(qū)分。例如下圖的案例,通過(guò)自定義的形式為用戶提供了兼容不同層級(jí)的聯(lián)動(dòng)鍵盤(pán),整個(gè)過(guò)程都在鍵盤(pán)輸入組件中完成,保證了錄入的沉浸和任務(wù)的聚焦。


場(chǎng)景匹配

在操作過(guò)程中,可以針對(duì)內(nèi)容呈現(xiàn)對(duì)應(yīng)的鍵盤(pán)樣式,例如系統(tǒng)自帶鍵盤(pán)的樣式多達(dá)8種,我們可以制定各種場(chǎng)景下的使用,從而進(jìn)行匹配,讓用戶在輸入的過(guò)程中更高效。


7.1.3  操作后 - 結(jié)果呈現(xiàn)

當(dāng)體驗(yàn)流程中用戶操作后,需進(jìn)行合理的內(nèi)容反饋,可以通過(guò)場(chǎng)景化設(shè)計(jì)思維,結(jié)合用戶目標(biāo),呈現(xiàn)合理的內(nèi)容,提升設(shè)計(jì)效率。而在結(jié)果呈現(xiàn)上,主要可以分為兩個(gè)方向,結(jié)構(gòu)與內(nèi)容。


在內(nèi)容建設(shè)方面,主要通過(guò)信息架構(gòu)來(lái)構(gòu)建用戶體驗(yàn),確定各個(gè)將要呈現(xiàn)給用戶的元素的模式和順序,例如淘寶搜索結(jié)果頁(yè),采用了兩種不同的局部方式,根據(jù)搜索內(nèi)容來(lái)進(jìn)行區(qū)分,例如電器類(lèi)的產(chǎn)品外觀大差不差,因此結(jié)構(gòu)上采用小圖模式,主要突出產(chǎn)品信息和賣(mài)點(diǎn),而服裝類(lèi)的商品則采用瀑布流的形式,強(qiáng)化圖片的視覺(jué)表現(xiàn)。


內(nèi)容主要是借助價(jià)值去找用戶,找到用戶建立鏈接,從而產(chǎn)生價(jià)值,簡(jiǎn)單理解互聯(lián)網(wǎng)產(chǎn)品就是一個(gè)鏈接工具,但為了能更好的讓內(nèi)容和用戶進(jìn)行鏈接,我們可以將內(nèi)容進(jìn)行前置處理,根據(jù)服務(wù)目的結(jié)合內(nèi)容的呈現(xiàn),快速建立業(yè)務(wù)鏈接。


下圖案例來(lái)自于百度搜索,用戶在搜索時(shí),不同的關(guān)鍵詞呈現(xiàn)對(duì)應(yīng)的服務(wù)內(nèi)容,合理運(yùn)用場(chǎng)景化設(shè)計(jì)中的服務(wù)差異化設(shè)計(jì),為不同的事進(jìn)行設(shè)計(jì),既能快速匹配相應(yīng)的用戶,還能縮短用戶尋找服務(wù)的操作路徑。


7.2  框架層 - 行業(yè)細(xì)分

隨著互聯(lián)網(wǎng)成熟,產(chǎn)品業(yè)務(wù)形態(tài)逐漸完善化,例如餐飲產(chǎn)品,里面會(huì)涉及到多種餐飲業(yè)態(tài),例如早餐、茶飲、快餐、燒烤等等,而所有銷(xiāo)售類(lèi)的內(nèi)容都會(huì)涉及到人、貨、場(chǎng)。人在上面也大致講過(guò)了,這里就不繼續(xù)贅述,而面臨這種行業(yè)較多的情況時(shí),我們可以采用場(chǎng)景化設(shè)計(jì)思維中的分層思維,將行業(yè)進(jìn)行細(xì)分,進(jìn)一步讓貨物可以對(duì)應(yīng)到符合的場(chǎng)景中。

接下來(lái)也會(huì)繼續(xù)使用餐飲產(chǎn)品作為例子,進(jìn)一步講解行業(yè)細(xì)分后的設(shè)計(jì)細(xì)節(jié)。


7.2.1 行業(yè)特征

餐飲業(yè)態(tài)較為復(fù)雜,但行業(yè)之間的差異還是比較明顯的,可以將行業(yè)特色進(jìn)行提煉,針對(duì)不同的特點(diǎn)進(jìn)行框架設(shè)計(jì)。


例如年輕群體較多的甜品茶飲,功能上除了基礎(chǔ)點(diǎn)餐也有外賣(mài)服務(wù),甚至也會(huì)有周邊商城,這種類(lèi)型的商戶比較注重服務(wù)的呈現(xiàn)。但一些傳統(tǒng)的餐飲行業(yè),由于菜品體量較大,頁(yè)面呈現(xiàn)上可以更偏向于菜品展示。除此之外,還有很多餐飲商戶比較注重用戶身份以及會(huì)員管理,而框架設(shè)計(jì)上也可以將資產(chǎn)內(nèi)容前置化,滿足商業(yè)目的。


7.2.2 導(dǎo)航設(shè)計(jì)

產(chǎn)品框架中最關(guān)鍵的一個(gè)內(nèi)容自然離不開(kāi)導(dǎo)航設(shè)計(jì),它是專(zhuān)門(mén)用于呈現(xiàn)信息的一種界面形式,用戶可以在內(nèi)容結(jié)構(gòu)中自由穿行。在頁(yè)面設(shè)計(jì)的過(guò)程中,也可以通過(guò)不同的導(dǎo)航形式滿足需求,例如在在菜品的展現(xiàn)形式上,菜品體量較大的快餐便當(dāng),可以采用側(cè)導(dǎo)航形式快速進(jìn)行內(nèi)容篩選,而甜品茶飲類(lèi)的菜品較少,可以利用雙行瀑布流的形式強(qiáng)化商品圖片的呈現(xiàn)效果。


7.2.3 菜品布局

框架層的關(guān)注點(diǎn)幾乎全部在組件及相互關(guān)系上??蚣艽_定用什么樣的功能和形式來(lái)實(shí)現(xiàn)。作為餐飲類(lèi)的產(chǎn)品,菜品呈現(xiàn)屬于比較關(guān)鍵的內(nèi)容,而面臨不同類(lèi)型的菜品,也能做出場(chǎng)景差異化的表現(xiàn),這一點(diǎn)比較像上面案例中提到的搜索后的商品結(jié)構(gòu)呈現(xiàn)。


在上面行業(yè)特征分析時(shí),會(huì)發(fā)現(xiàn)如果從餐飲菜品數(shù)量上進(jìn)行區(qū)分的話,布局上可以使用單行列表或雙行瀑布流的形式,來(lái)區(qū)分菜品分發(fā)的權(quán)重。而像一些套餐的菜品,布局上可以將菜品組合擺放,方便用戶對(duì)套餐內(nèi)的單品進(jìn)行對(duì)比與調(diào)整。


7.2.4 分層營(yíng)銷(xiāo)

在營(yíng)銷(xiāo)設(shè)計(jì)中,可以通過(guò)各種營(yíng)銷(xiāo)資源位進(jìn)行宣傳展示,為了讓營(yíng)銷(xiāo)滿足不同商戶的使用,可以利用場(chǎng)景分層的形式,將營(yíng)銷(xiāo)表現(xiàn)力分為強(qiáng)、中、弱,三種形式,并根據(jù)不同的頁(yè)面框架布局去進(jìn)行表現(xiàn)。


7.3  內(nèi)容形式

內(nèi)容型產(chǎn)品比較注重用戶消費(fèi)與互動(dòng),平臺(tái)也會(huì)對(duì)內(nèi)容、流量、用戶進(jìn)行分析,確保合理的消費(fèi)場(chǎng)景。隨著產(chǎn)品逐漸豐富化,內(nèi)容分為多種形式,例如視頻、音頻、直播、資訊,而內(nèi)容形式也分為娛樂(lè)型、工具型、知識(shí)型和社交型,為了能更好的匹配消費(fèi)場(chǎng)景,可以將內(nèi)容形式進(jìn)行分層處理,區(qū)分不同的事物,采用合適框架形式,滿足用戶的消費(fèi)場(chǎng)景。


下圖案例來(lái)自于淘寶內(nèi)容優(yōu)化設(shè)計(jì)方案,通過(guò)場(chǎng)景細(xì)分,主要分為三個(gè)場(chǎng)景,一是以瀏覽圖片視頻為主的富媒體消費(fèi)場(chǎng)景;二是社交關(guān)系為主的消費(fèi)場(chǎng)景;三是以文字消費(fèi)為主的閱讀場(chǎng)景。三種場(chǎng)景的每一種都對(duì)應(yīng)了多個(gè)內(nèi)容框架以及框架之間的流轉(zhuǎn)鏈路,按下圖從上往下逐漸從重分發(fā)到強(qiáng)沉浸的瀏覽體感。


富媒體消費(fèi)場(chǎng)景內(nèi)容的復(fù)雜度和數(shù)量較大,一般常見(jiàn)的方式是采用分發(fā)為主的雙列流,滿足多種類(lèi)型的內(nèi)容合理展示,如果以圖片為主要消費(fèi)內(nèi)容的情況下,可以采用大卡流,突出圖片的展現(xiàn)。甚至也可以利用全屏的形式,強(qiáng)化用戶的沉浸體驗(yàn),這種方式更適合視頻內(nèi)容。


以社交關(guān)系為主的內(nèi)容,可以采用傳統(tǒng)的動(dòng)態(tài)流布局,更適合用戶的習(xí)慣,同時(shí)也可以滿足多種信息的呈現(xiàn)。文字閱讀為主的內(nèi)容,更加注重信息的閱讀,可以使用文本流的形式,通過(guò)簡(jiǎn)單的對(duì)比和結(jié)構(gòu)層級(jí)簡(jiǎn)化處理來(lái)幫助用戶閱讀信息。

為了讓用戶更好的消費(fèi)內(nèi)容,整個(gè)優(yōu)化項(xiàng)目的過(guò)程,首先通過(guò)用戶消費(fèi)內(nèi)容的梳理,然后結(jié)合內(nèi)容的特點(diǎn)進(jìn)行核心框架的鏈路整理、提取抽象化的共性框架,讓各個(gè)具有相似性的場(chǎng)景進(jìn)行拉通,最終確認(rèn)框架形式。


八、總結(jié)

場(chǎng)景化分析可以讓設(shè)計(jì)師以用戶的角度解決用戶痛點(diǎn),發(fā)現(xiàn)問(wèn)題解決問(wèn)題,從而更好地服務(wù)于用戶,不管面臨多復(fù)雜的產(chǎn)品,都可以通過(guò)場(chǎng)景化設(shè)計(jì)方法,將關(guān)鍵的三大內(nèi)容進(jìn)行提煉,進(jìn)一步分析,確保每個(gè)內(nèi)容點(diǎn)都符合具體的場(chǎng)景。


文章來(lái)源:站酷   作者:三石設(shè)計(jì)丶 

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


B端產(chǎn)品設(shè)計(jì)分析方法總結(jié)

資深UI設(shè)計(jì)者


做一個(gè)完整B端系統(tǒng)項(xiàng)目前,從交互設(shè)計(jì)的七大定律,B端產(chǎn)品業(yè)務(wù)調(diào)研,用戶訪談研究方法,精準(zhǔn)推導(dǎo)B端用戶畫(huà)像,到B端產(chǎn)品主風(fēng)格的設(shè)計(jì)定調(diào),深度理解B端主流組件庫(kù)的視覺(jué)規(guī)范,進(jìn)而為B端產(chǎn)品設(shè)計(jì)做充分的準(zhǔn)備工作,以下內(nèi)容較多,大家可以根據(jù)上述目錄來(lái)進(jìn)行選擇性閱讀。

1.1 B端組件庫(kù)的概念及作用


概念:組件庫(kù)的底層邏輯就是原子理論,類(lèi)似于我們?cè)谄礃?lè)高積木的時(shí)候,根據(jù)說(shuō)明書(shū)一個(gè)模塊一個(gè)模塊來(lái)拼湊,先找零件,再拼成部件,然后是成品,這個(gè)過(guò)程和UI中的組件化是一模一樣的,組件化就是原子理論集中得表現(xiàn),原子(圖標(biāo)、按鈕、字體樣式等)——分子(標(biāo)簽欄、導(dǎo)航欄、搜索框等)——有機(jī)體(圖文列表、內(nèi)容卡片、布局模塊、瀑布流圖等)——模板(原子、分子組合排列組成了模板,也就是原型圖)——界面(最后根據(jù)原型圖形成視覺(jué)設(shè)計(jì)稿)


作用:一致性:比如在不同得界面中,如果用樣的按鈕,他的按鈕的展現(xiàn)形式,要保持一致性。

高效性:比如所有的按鈕不用單獨(dú)去設(shè)計(jì)了,從組件庫(kù)里調(diào)用就可以,這樣對(duì)于設(shè)計(jì)師來(lái)說(shuō)就是高效的。對(duì)用戶來(lái)說(shuō),也會(huì)讓用戶的使用效率提升,比如當(dāng)用戶看到藍(lán)色的按鈕就是可以提交的按鈕,看到白色得按鈕就是次要得按鈕,看到不帶邊框的按鈕就是一個(gè)危險(xiǎn)按鈕等等。

組合性:通過(guò)調(diào)用不同的組件來(lái)進(jìn)行組合可以形成不同的頁(yè)面。


1.2 如何正確使用組件庫(kù)


1.2.1 組件庫(kù)的使用前提

一些主流的組件庫(kù),比如AntDesign、Element Design、ZanDesign組件庫(kù)等,這些框架機(jī)構(gòu)本質(zhì)都差不太多, 但他們有自己的特點(diǎn),具體用哪個(gè)組件庫(kù),通常由公司的架構(gòu)師來(lái)進(jìn)行架構(gòu)選型,比如VUE(Element Design)和REACT(Ant Design),這是兩種不同的技術(shù)選型,(VUE和REACT是一種前端框架的技術(shù)架構(gòu)版本,可幫助前端工程師快速進(jìn)行開(kāi)發(fā)的前端框架)。從技術(shù)角度講,大部分公司會(huì)首選AntDesign(React),因?yàn)橛泻芏喟咐峁?,VUE和有贊也可以但用的少。從設(shè)計(jì)角度,Ant Design得設(shè)計(jì)組件形式案例很完善。Element Design做起來(lái)視覺(jué)單一得樣式白白得感覺(jué),沒(méi)有設(shè)計(jì)層次化,Ant Design更好看一點(diǎn)。所以先選擇底層的前端框架,再根據(jù)這個(gè)選擇前端的機(jī)構(gòu)布局。

1.2.2 組件庫(kù)的使用過(guò)程

設(shè)計(jì)師和前端最終目標(biāo)是一樣的,都是快完成保證設(shè)計(jì)質(zhì)量的,原生組件不能達(dá)到要求的時(shí)候,設(shè)計(jì)師可以根據(jù)原生組件庫(kù)修改樣式來(lái)表達(dá)到自己的想法。但對(duì)前端來(lái)說(shuō)最好什么都別改,就用原生組件庫(kù)前端工程師直接復(fù)制就行,這也是因?yàn)槲覀冊(cè)O(shè)計(jì)師的要求和前端的要求是不一樣的。但修改后樣式的組件,底層邏輯還是原來(lái)的組件。從Antdesign等組件庫(kù)里復(fù)制出來(lái),經(jīng)過(guò)figma里的各種功能操作后,比如分離組件、改變組件得形狀、替換內(nèi)容等,但這個(gè)組件仍然是Antdesign里的組件,組件是否改變?nèi)Q于,這個(gè)圖形,這個(gè)組件是不是已經(jīng)代碼化,我們?cè)O(shè)計(jì)師設(shè)計(jì)的組件,只是樣式,需要經(jīng)過(guò)前端來(lái)形成代碼,只有代碼化的組件,才是組件,如果沒(méi)有代碼化,那只是一個(gè)樣式而已。所以,我們用Antdesign里是已經(jīng)實(shí)現(xiàn)代碼化了得組件,組件庫(kù)里有的組件前端一定是可以代碼實(shí)現(xiàn)的。


1.3 如何設(shè)計(jì)組件庫(kù)


1.3.1 每個(gè)項(xiàng)目都會(huì)分這四個(gè)周期


項(xiàng)目初期:在一個(gè)B端項(xiàng)目得初期,大家都會(huì)有疑問(wèn),B端組件庫(kù)應(yīng)該什么時(shí)候開(kāi)始建立?是不是先建組件庫(kù)再開(kāi)始設(shè)計(jì)?答案是,如果不是從0開(kāi)始的項(xiàng)目,組件庫(kù)在設(shè)計(jì)之初就應(yīng)該建立起來(lái),如果項(xiàng)目是從0開(kāi)始,由于沒(méi)有業(yè)務(wù)的案例,組件庫(kù)組件庫(kù)也無(wú)法建立,但可以建立一些最小元素:原子。比如字體(應(yīng)該用什么樣的字體,在正標(biāo)題,副標(biāo)題,大標(biāo)題,正常情況下應(yīng)該怎么樣使用字體的得明度)、色彩(色彩規(guī)范是什么,比如醫(yī)療行業(yè),航空行業(yè),交通行業(yè)應(yīng)該用什么色彩,決定主色不是好不好看,而是由企業(yè)來(lái)決定得,首先了解企業(yè)的VI色,通過(guò)結(jié)合VI色和產(chǎn)品分析出的用戶畫(huà)像特征,來(lái)確定主色,輔主色,確定主色后,相應(yīng)的背景色、深色背景、淺色背景、灰度背景、卡片背景等,也就都可以做出來(lái)了)、按鈕(通常狀態(tài),點(diǎn)擊狀態(tài),當(dāng)前焦點(diǎn)狀態(tài),不可點(diǎn)狀態(tài))、基本控件、布局柵格、圖表(圖標(biāo)icon、文本標(biāo)簽、按鈕、圖表)、圖標(biāo);通過(guò)建立原子組件,完成一些基本典型的頁(yè)面設(shè)計(jì)。

項(xiàng)目中期:繼續(xù)完善基本組件庫(kù),應(yīng)用案例的完善,迭代組件庫(kù)、樣例庫(kù)、最佳實(shí)踐案例。然后再次迭代進(jìn)入基本組件庫(kù)。


項(xiàng)目后期:形成最終組件庫(kù)與設(shè)計(jì)系統(tǒng)的規(guī)范建立,根據(jù)項(xiàng)目不一樣詳細(xì)程度也可以不一樣。


延展期:為項(xiàng)目2.0升級(jí)準(zhǔn)備根據(jù)使用反饋、迭代之前得組件庫(kù)與規(guī)范,預(yù)計(jì)未來(lái)版本中出現(xiàn)的典型案例,并針對(duì)性的設(shè)計(jì)應(yīng)用組件。通常很少有公司進(jìn)行到這一步。


1.3.2 組件庫(kù)的開(kāi)發(fā)流程


1.3.3 B端組件庫(kù)存在的價(jià)值


B端組件庫(kù)的存在是不是意味著不需要設(shè)計(jì)師了?其實(shí)并不是,組件庫(kù)可以幫助設(shè)計(jì)師增進(jìn)設(shè)計(jì)效率和溝通效率,和前端溝通告知按照對(duì)應(yīng)的選型組件庫(kù)規(guī)范使用就可以了,同時(shí)組件庫(kù)得一致性、準(zhǔn)確性、協(xié)同性它的質(zhì)量有保證。但設(shè)計(jì)師做完組件庫(kù)后,繼續(xù)需要關(guān)注的點(diǎn)是:

01、根據(jù)業(yè)務(wù)場(chǎng)景來(lái)優(yōu)化設(shè)計(jì)組件庫(kù):因?yàn)榻M件庫(kù)是一定會(huì)去更新的,如有必要再去更新,那一定會(huì)是很復(fù)雜得業(yè)務(wù)場(chǎng)景下去做更新的,這個(gè)業(yè)務(wù)場(chǎng)景是程序員或者以前的組件不能實(shí)現(xiàn)的,需要很強(qiáng)的設(shè)計(jì)技能去做迭代,所以需要設(shè)計(jì)師繼續(xù)去做一些結(jié)合業(yè)務(wù)場(chǎng)景的組件來(lái)放到組件庫(kù)里。

02、需要設(shè)計(jì)師把更多時(shí)間精力投入更多設(shè)計(jì)體驗(yàn)中,而非搬磚:組件庫(kù)的建立同時(shí)解放了設(shè)計(jì)師的精力,設(shè)計(jì)師可以把時(shí)間投入到設(shè)計(jì)體驗(yàn)中去,而不是做一些搬磚得工作,比如按鈕怎么畫(huà),用圓角還是用什么顏色,這些沒(méi)有技術(shù)含量的工作,這樣一來(lái),可以投入更多時(shí)間來(lái)賦能業(yè)務(wù)更好體驗(yàn)設(shè)計(jì)工作。


1.3.4 B端主流組件庫(kù)有哪些

2.1 B端產(chǎn)品的設(shè)計(jì)過(guò)程


2.1.1 用戶體驗(yàn)五要素


戰(zhàn)略層(屬于產(chǎn)品愿景,滿足用戶的需求,產(chǎn)品的愿景和目標(biāo)


由于用戶有不同的需求進(jìn)而產(chǎn)生了不同的產(chǎn)品,戰(zhàn)略層決定了用戶用干什么樣的產(chǎn)品,比如,用戶需有很多銷(xiāo)售客戶的線索需要進(jìn)行管理,用戶需要管理客戶,那就做一個(gè)CRM系統(tǒng)。比如,用戶想寫(xiě)日?qǐng)?bào),想要一個(gè)打卡的OA系統(tǒng),那么產(chǎn)品目標(biāo)就是要做一個(gè)OA系統(tǒng)。比如,電商里面很多商品,牽扯到很多進(jìn)銷(xiāo)存,那就做一個(gè)ERP系統(tǒng)。這部分跟設(shè)計(jì)師相關(guān)度沒(méi)有那么高。


范圍層(指功能規(guī)劃,功能的規(guī)格、包括內(nèi)容的需求)

功能規(guī)劃:比如要做一個(gè)OA系統(tǒng),其中就包含了打卡、日?qǐng)?bào)、項(xiàng)目管理、報(bào)銷(xiāo)、人事流轉(zhuǎn)等等都是跟辦公相關(guān)聯(lián)的,需要把規(guī)格和功能畫(huà)出來(lái),畫(huà)成簡(jiǎn)單的表格并且將它們分類(lèi),這里所有的功能都不是詳細(xì)的,就是簡(jiǎn)單的分類(lèi),將功能簡(jiǎn)單描述一下,同時(shí)做一個(gè)簡(jiǎn)單的用戶畫(huà)像。這部分設(shè)計(jì)師只需要閱讀產(chǎn)品經(jīng)理給到得PRD需求文檔即可,整體看還是偏愿景,沒(méi)有形成具體的產(chǎn)出。比如OA系統(tǒng)中就總結(jié)出重點(diǎn)做一個(gè)審批得功能,并不知道什么樣的界面,只知道一個(gè)大概的范圍。


結(jié)構(gòu)層(指原型設(shè)計(jì))

這部分,設(shè)計(jì)師通常就需要參與進(jìn)來(lái),如果設(shè)計(jì)師只按產(chǎn)品給的設(shè)計(jì)好的原型來(lái)設(shè)計(jì),就顯得很被動(dòng),這樣只能叫做視覺(jué)美化,被稱之為美工,設(shè)計(jì)師應(yīng)該從沒(méi)有形成原型的時(shí)候,可能只是一個(gè)簡(jiǎn)單的PRD需求文檔或者草圖,設(shè)計(jì)師就應(yīng)該參與進(jìn)去。


設(shè)計(jì)師對(duì)原型進(jìn)行優(yōu)化設(shè)計(jì),優(yōu)化的不是業(yè)務(wù),因?yàn)楹芏鄻I(yè)務(wù)內(nèi)容肯定沒(méi)有產(chǎn)品經(jīng)理了解得深刻入,這時(shí),設(shè)計(jì)師需要優(yōu)化的其實(shí)是它的交互邏輯、交互內(nèi)容,一旦原型里里產(chǎn)生點(diǎn)擊,一旦產(chǎn)生多種狀態(tài),那就要去了解它,每種狀態(tài)產(chǎn)生不一樣的界面結(jié)果,其實(shí)對(duì)標(biāo)的就是設(shè)計(jì)師設(shè)計(jì)的界面將產(chǎn)生什么樣的變化,換句話說(shuō),如果有界面的變化,內(nèi)容得變化,設(shè)計(jì)師就需要參與到其中。目前來(lái)看,很少公司有專(zhuān)門(mén)的交互設(shè)計(jì)師,要么這部分工作由UI設(shè)計(jì)師來(lái)完成,要么由產(chǎn)品經(jīng)理來(lái)完成,很多企業(yè)已經(jīng)把設(shè)計(jì)進(jìn)行前置化,由UI設(shè)計(jì)師來(lái)完成交互的工作。


其中交互設(shè)計(jì)+信息架構(gòu)設(shè)計(jì)是設(shè)計(jì)原型圖的關(guān)鍵,這兩個(gè)是密不可分的,如何制作原型圖,如何在原型圖里設(shè)置一些交互事件,給大家推薦《信息架構(gòu)設(shè)計(jì)》這本書(shū)里有專(zhuān)門(mén)講到。再了解原型設(shè)計(jì)之前,不得不提到一個(gè)通用知識(shí)點(diǎn),交互設(shè)計(jì)的七大定律。(后文有介紹)


框架層(指界面設(shè)計(jì)、組件設(shè)計(jì))

框架層這部分有一些爭(zhēng)議,有的設(shè)計(jì)師認(rèn)為就直接做界面設(shè)計(jì)了,其實(shí)框架層還不能把它理解成是界面設(shè)計(jì),它僅僅是做了一些業(yè)務(wù)的模塊兒的框架而已,更多的其實(shí)是將它組件化: 將原型組件化、模塊兒化,類(lèi)似我們直接從Antdesign組件庫(kù)復(fù)制來(lái)內(nèi)容簡(jiǎn)單改改之類(lèi)得操作,完成的是組件和界面的設(shè)計(jì),這些界面并不是最終完整的交付樣式。


表現(xiàn)層(可視化呈現(xiàn),UI視覺(jué)呈現(xiàn))

這部分和設(shè)計(jì)師關(guān)聯(lián)度最大的一部分,就是界面中的配色、配色、圖標(biāo)、樣式、結(jié)構(gòu)、布局、排版等設(shè)計(jì),但是我們?cè)O(shè)計(jì)師需要從范圍層了解業(yè)務(wù)熟悉最初PRD產(chǎn)品需求文檔去一點(diǎn)點(diǎn)做起,其中設(shè)計(jì)師在戰(zhàn)略層參與度可能只有2%左右,范圍層參與度5%左右,從結(jié)構(gòu)層開(kāi)始逐步往上參與度越來(lái)越高,至少結(jié)構(gòu)層,框架層和表現(xiàn)層的參與度是很深得。



2.1.2 B端產(chǎn)品的設(shè)計(jì)過(guò)程是什么

所以,通過(guò)梳理用戶體驗(yàn)五要素,不難看出B端UI設(shè)計(jì)師的工作流程就是,01. 接到項(xiàng)目后,設(shè)計(jì)師主要閱讀產(chǎn)品經(jīng)理給到的PRD需求文檔,同時(shí)去參與原型設(shè)計(jì),根據(jù)最初版PRD輸出一份低保真原型圖,和其他部門(mén)進(jìn)行初次評(píng)審;02. 經(jīng)過(guò)初次評(píng)審討論過(guò)后,完善后的功能和頁(yè)面文案,產(chǎn)品經(jīng)理補(bǔ)全和輸出完善后的產(chǎn)品PRD需求文檔,由設(shè)計(jì)師根據(jù)完善后得PRD需求文檔經(jīng)過(guò)規(guī)范設(shè)計(jì)輸出高保真原型圖 ,與其他部門(mén)帶著初次評(píng)審討論后的問(wèn)題,進(jìn)行二次評(píng)審。03. 最終再由設(shè)計(jì)師經(jīng)過(guò)組件化形成視覺(jué)圖。04. 同時(shí)設(shè)計(jì)師提供切圖,與前端緊密溝通,上線前制作設(shè)計(jì)走查表,進(jìn)行設(shè)計(jì)走查。05、最后上線后根據(jù)數(shù)據(jù)、用戶反饋等提出交互和視覺(jué)可優(yōu)化得方案建議,進(jìn)行版本迭代。


2.2 交互設(shè)計(jì)七大定律


01. 菲茨定律:當(dāng)設(shè)計(jì)師需要讓用戶重點(diǎn)去看到頁(yè)面中某一個(gè)突出點(diǎn),點(diǎn)擊到一個(gè)區(qū)域時(shí),設(shè)計(jì)師就需要做到適合的大小,適合的區(qū)域,適合的位置,適合的形狀,適合的顏色。也就是你想讓用戶點(diǎn)擊的時(shí)候就突出重點(diǎn)想顯示的,不想讓用戶點(diǎn)擊退出的,就把它設(shè)計(jì)的的足夠小。比如按鈕得退出和付款,實(shí)心付款按鈕為主要按鈕,虛線置灰退出按鈕為次要按鈕,比如常說(shuō)的海報(bào)中字要大,logo要大,這些都屬于菲茨定律。


02. 席克定律:用戶面對(duì)的刺激(或選擇)越多,他們做出決定的時(shí)間就越長(zhǎng),由于用戶的時(shí)間很寶貴 ,用戶沒(méi)有義務(wù)花更多留在我們的網(wǎng)站上,所以我們需要有選擇的地方對(duì)選擇進(jìn)行分類(lèi)。


03. 7土2法則(米勒定律):比如圓周率3.1415926,一般都能記住,而如果再往后加幾個(gè)數(shù)字,大家往往很難記住,原因就是經(jīng)過(guò)大量測(cè)試,人腦容易記憶7位數(shù)字前后得數(shù)字,比如設(shè)計(jì)銀行輸入密碼的時(shí)候就用到了7土2 法則,設(shè)置密碼過(guò)多人腦不易記憶。


04. 接近法則:格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。


05. 防錯(cuò)原則:當(dāng)用戶在使用產(chǎn)品中,預(yù)判用戶本身或產(chǎn)品一定會(huì)出錯(cuò)時(shí)候,可以告訴用戶怎么可以不犯錯(cuò),或者將風(fēng)險(xiǎn)降低。比如電腦的關(guān)閉電源鍵,就允許電腦司機(jī)時(shí)允許系統(tǒng)犯錯(cuò),讓用戶使用關(guān)閉電腦電源鍵進(jìn)行重啟。比如銀行取出錢(qián)后,銀行卡有忘拔現(xiàn)象,銀行完全可以做到像光大銀行那樣去再取錢(qián)流程中改成先拔卡再出鈔得交互流程,就可以避免忘記拔卡,但其他銀行都沒(méi)有這么改進(jìn),仍然是先出鈔后拔卡得原因是允許用戶犯錯(cuò)。


06. 奧卡姆剃刀原理:化繁為簡(jiǎn),如無(wú)必要,勿增實(shí)體。比如小米電視遙控器的設(shè)計(jì),由原來(lái)傳統(tǒng)的很多遙控器按鍵只優(yōu)化成了保留上下左右為數(shù)不多的幾個(gè)重要按鍵,原來(lái)的遙控器數(shù)字按鈕如果真正要輸入數(shù)字的時(shí)候通過(guò)功能性,調(diào)出數(shù)字來(lái),這樣在遙控器得設(shè)計(jì)中基本只保留20%主要功能按鍵。這就是交互上的優(yōu)化。比如在UI界面中,也會(huì)用到這個(gè)問(wèn)題,簡(jiǎn)化文字,把文字用圖標(biāo)替換,還有各種流程得優(yōu)化等等。


07. 雅克布定律:以用戶習(xí)慣的使用模式去設(shè)計(jì)產(chǎn)品,降低用戶學(xué)習(xí)成本,遵從用戶使用習(xí)慣。 利用現(xiàn)有的思維模型,用戶習(xí)慣,我們可以創(chuàng)建出色的用戶體驗(yàn),使用戶可以專(zhuān)注于自己的任務(wù)而不是學(xué)習(xí)新的模型習(xí)慣。



2.3 B端產(chǎn)品用戶畫(huà)像


2.3.1用戶畫(huà)像概念

用戶畫(huà)像又稱用戶角色,作為一種勾畫(huà)目標(biāo)用戶、聯(lián)系用戶訴求與設(shè)計(jì)方向的有效工具,用戶畫(huà)像在各領(lǐng)域得到了廣泛應(yīng)用。用戶畫(huà)像分為兩種,不論C端和B端都會(huì)做這樣的用戶畫(huà)像??偣部煞譃閮刹糠?,基本信息數(shù)據(jù)和行為數(shù)據(jù)。


基本信息數(shù)據(jù):當(dāng)我們?nèi)チ私庥脩舻幕拘畔⒌囊恍?shù)據(jù)時(shí),職業(yè),收入,年齡等等,這些和功能有很多的關(guān)聯(lián)度,比如唯品會(huì)用戶畫(huà)像關(guān)鍵詞是:女性、折扣、白領(lǐng) ,唯品會(huì)產(chǎn)品定位聚焦女性,這些基礎(chǔ)信息數(shù)據(jù),就能給產(chǎn)品帶來(lái)很好的結(jié)果,當(dāng)我們要做一個(gè)女性的購(gòu)物平臺(tái)的時(shí)候,可以先把男性用戶拋除掉去考慮設(shè)計(jì)方向,再比如收入就知道了,大概產(chǎn)品面向的收入群體將是什么收入群體的人,那么我賣(mài)貨的價(jià)格區(qū)間、包括設(shè)計(jì)的風(fēng)格就是一個(gè)什么樣群體的設(shè)計(jì)風(fēng)格。那些賣(mài)奢侈品的不是黑色就是灰色,要不就是棕色,但未必是適合唯品會(huì)產(chǎn)品的風(fēng)格,需要找出這些基本信息去和產(chǎn)品進(jìn)行關(guān)聯(lián)度,把基本信息放到設(shè)計(jì)結(jié)果中去考慮。


行為數(shù)據(jù):指用戶的愛(ài)好,這部分群體有哪些愛(ài)好,是喜歡購(gòu)物,還是喜歡運(yùn)動(dòng),他/她的消費(fèi)情況是什么,喜歡旅游還是美食,他/她經(jīng)常用哪些APP,他常用的設(shè)備,是蘋(píng)果手機(jī)呢還是安卓,小米還是華為,等等得到這些數(shù)據(jù),也能得到一些用戶喜歡什么樣的競(jìng)品,這些數(shù)據(jù)就能側(cè)面的在我們的產(chǎn)品中得到反饋,得到功能和設(shè)計(jì)上的指導(dǎo)和其他產(chǎn)品的區(qū)別。這些行為數(shù)據(jù),不管我們做C端還是B端,都要獲取到,但C端和B端獲取到這些行為數(shù)據(jù)的結(jié)論是不一樣的。因?yàn)镃端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個(gè)人,給他帶來(lái)的很多屬性,這些等等都會(huì)成為他的用戶畫(huà)像。

進(jìn)而找到這個(gè)人,將他的社會(huì)屬性,從抽象的角度慢慢變得具象,C端是他/她的社會(huì)屬性,把他做成一個(gè)普通的人,這個(gè)人有他的社會(huì)屬性,有他的社會(huì)價(jià)值,有他的社會(huì)行為。比如一個(gè)女性,一定喜歡美食,一定會(huì)買(mǎi)化妝品。


2.3.2 B端用戶畫(huà)像本質(zhì)

比如做一個(gè)和電影相關(guān)的管理系統(tǒng),電影行業(yè)包括很多人員管理,設(shè)備管理等,這里不能把用戶畫(huà)像抽象成一個(gè)男性或者女性了,而應(yīng)該把它抽象成一個(gè)職業(yè),比如抽象成一個(gè)導(dǎo)演,導(dǎo)演需要去管理什么東西,它需要哪些資源去整合。導(dǎo)演就又叫做行業(yè)屬性坐標(biāo)。B端不以社會(huì)屬性去做用戶畫(huà)像,一定以行業(yè)坐標(biāo)去做用戶畫(huà)像,我們?cè)谡碜髌芳臅r(shí)候需注意不要與C端畫(huà)像整理混淆。


我們要做一個(gè)行業(yè)可以不用管他/她是誰(shuí),也可以不用管他/她有什么樣的社會(huì)屬性,比如做CRM最重要的在里面起到作用的是,客戶關(guān)系管理和銷(xiāo)售等; 比如做OA系統(tǒng),就是一般的員工,等級(jí),職能等等,可以看出行業(yè)屬性(職業(yè)屬性)決定了他的用戶畫(huà)像的精準(zhǔn)度,一定把這個(gè)人拉到行業(yè)里去研究,研究社會(huì)屬性沒(méi)有價(jià)值。這是C端和B端做用戶研究最大的區(qū)別。


2.4 B端產(chǎn)品用戶調(diào)研


2.4.1用戶調(diào)研的作用/目的/重要性


01. 了解產(chǎn)品業(yè)務(wù)需求定位:可以幫助了解目標(biāo)用戶的信息,從用戶的角度:未來(lái)使用你產(chǎn)品的用戶,他理不理解你的產(chǎn)品想要表達(dá)什么,你的產(chǎn)品講了哪些功能。因?yàn)楹芏嗪玫漠a(chǎn)品我們打開(kāi)它第一眼就知道要干什么,是給我們做什么的。同時(shí)站在設(shè)計(jì)者的角度:怎么可以把這個(gè)產(chǎn)品設(shè)計(jì)清楚,比如做一個(gè)CRM客戶關(guān)系管理系統(tǒng),具體管理什么我們是不清晰的,想要清晰就需要通過(guò)用戶調(diào)研這個(gè)過(guò)程給它展開(kāi)。


02.解決功能信息架構(gòu)問(wèn)題:可以幫助設(shè)計(jì)師更明確需求功能得合理性和優(yōu)先級(jí),比如頁(yè)面標(biāo)題的使用、標(biāo)題的層級(jí)、需要在信息層級(jí)清晰得情況下體現(xiàn)出來(lái),而明確信息層級(jí)同樣需要通過(guò)用戶研究體現(xiàn)出來(lái)。


03.讓可用性測(cè)試更加準(zhǔn)確:可以幫助鎖定合適的測(cè)試用戶,來(lái)測(cè)試我們的產(chǎn)品使用程度,使用體驗(yàn)是不是好,這時(shí)需要要找目標(biāo)用戶去測(cè)試,比如小米有品針對(duì)群體是米粉,唯品會(huì)針對(duì)的群體是職場(chǎng)女性,而不像C端找所有的人去測(cè)試。


04.解決團(tuán)隊(duì)協(xié)作溝通問(wèn)題:確定用研目標(biāo)可以有理有據(jù)的把設(shè)計(jì)目標(biāo)和產(chǎn)品經(jīng)理的意見(jiàn)達(dá)成共識(shí),因?yàn)槲磥?lái)一定會(huì)多次和產(chǎn)品進(jìn)行PK,像諸如設(shè)計(jì)師組件化沒(méi)用好這些理由也不會(huì)是pk點(diǎn),確定用研護(hù)鏢可以更好的深度去理解原型圖,可以把團(tuán)隊(duì)協(xié)作溝通的問(wèn)題解決好。


2.4.2 用戶調(diào)研的方法


01. 確定研究對(duì)象:首先拿到一個(gè)產(chǎn)品,拿到一個(gè)需求的時(shí)候,這個(gè)需求通常很模糊,比如只告訴做一款CRM客戶關(guān)系管理系統(tǒng),但汽車(chē)行業(yè),服裝電商行業(yè),保險(xiǎn)行業(yè),銀行金融等等,都有CRM客戶管理系統(tǒng),不同行業(yè)的CRM肯定是不一樣的,這時(shí)候,比如要做金融的CRM,那研究方向就已經(jīng)確定了,金融CRM就可以確定去研究金融行業(yè)的業(yè)務(wù)鏈,業(yè)務(wù)流程,具體找哪些用戶群體,可以根據(jù)以往的驚經(jīng)驗(yàn)和產(chǎn)品的目標(biāo)去確認(rèn)。


02. 找研究方法 : 研究方法分主動(dòng)和被動(dòng),我們通常用的方法是被動(dòng)方法,比如自我報(bào)告法:當(dāng)這個(gè)產(chǎn)品產(chǎn)生了一些數(shù)據(jù),我們從后臺(tái)可以拉取這些數(shù)據(jù)的時(shí)候,通過(guò)這些數(shù)據(jù)去分析,這是被動(dòng)的方法,這個(gè)被動(dòng)的方法所有項(xiàng)目都可以用。而主動(dòng)的方法,就是觀察和采訪,主動(dòng)去找用戶去找關(guān)聯(lián)度。


03. 獲取到數(shù)據(jù) : B端和C端區(qū)別之一是提高效率,它要產(chǎn)生的結(jié)果只有一個(gè)結(jié)果,就是減少成本,任何B端的系統(tǒng)都是為了實(shí)現(xiàn)這個(gè)目標(biāo),提高效率和減少成本。所以獲取數(shù)據(jù),研究數(shù)據(jù)的方向不能偏離搞錯(cuò),用戶研究的方向不要搞錯(cuò)。比如我們以用戶為中心來(lái)設(shè)計(jì),就會(huì)認(rèn)為用戶的操作體驗(yàn)感是第一位的,其實(shí)不對(duì),放在第一位去考慮的應(yīng)該是以系統(tǒng)的最優(yōu)化,提升效率為第一位,而用戶也可以為這件事情做一些改變而找到平衡點(diǎn),數(shù)據(jù)導(dǎo)向得提高效率,減少成本有時(shí)會(huì)大于用戶的操作體驗(yàn)。


04. 用研行為: 剛才前面提到的這些注意事項(xiàng),到底應(yīng)該找什么方法去得到這些數(shù)據(jù)呢?第一我們可以通過(guò)后臺(tái)數(shù)據(jù)比如通過(guò)百度統(tǒng)計(jì)等系統(tǒng)來(lái)獲得;第二通過(guò)問(wèn)卷法發(fā)出一些問(wèn)卷,用戶可能散落在全國(guó)不同位置;第三可以通過(guò)用戶定性訪談來(lái)獲得;第四可以通過(guò)用戶旅程圖來(lái)決定用研行為。


05. 分析調(diào)研結(jié)果: 研究結(jié)果不是為了放到我們的B端作品集里的,而研究結(jié)果一定是為了去定性、定量、讓數(shù)據(jù)回歸到產(chǎn)品功能本身。同時(shí)經(jīng)常問(wèn)自己這些問(wèn)題,去根據(jù)研究結(jié)果和問(wèn)題進(jìn)行匹配思考,比如研究了那么多,用到了用戶畫(huà)像得出的結(jié)論了么,用到了哪里?在項(xiàng)目中能舉個(gè)例子嗎?采用什么樣的視覺(jué)去實(shí)現(xiàn)了用戶體驗(yàn)要素?


2.4.3 B端用戶訪談模板


2.4.3.1 用戶訪談概念:


01.確定訪談目標(biāo):了解目標(biāo)用戶群體,通過(guò)訪談信息來(lái)進(jìn)一步構(gòu)建所需要的用戶畫(huà)像,從而確定設(shè)計(jì)方案與功能優(yōu)先級(jí)。02. 定性/定量訪談目標(biāo):將這些目標(biāo)定量、定性,選擇不同的訪問(wèn)對(duì)象,構(gòu)建不同的角色畫(huà)像。比如問(wèn)銷(xiāo)售的用戶畫(huà)像,要找不同的訪問(wèn)對(duì)象,銷(xiāo)售總監(jiān),普通實(shí)習(xí)生等等,三到四個(gè)角色,樣本越多,用戶畫(huà)像越準(zhǔn)確。03. 訪談過(guò)程:提前把問(wèn)題寫(xiě)出來(lái),拿著問(wèn)題去聊,用錄音設(shè)備,記錄表格,一個(gè)提問(wèn),一個(gè)記錄,分開(kāi)后記錄比較準(zhǔn)確。04.訪談結(jié)束:要做信息匯總,要做分析建模。分析建模就是將信息最終變得有意義。


B端用戶訪談模板有30個(gè)問(wèn)題,這30個(gè)問(wèn)題決定了我們的用戶畫(huà)像的精準(zhǔn)度和產(chǎn)品的用戶畫(huà)像的價(jià)值。用戶訪談會(huì)問(wèn)些什么問(wèn)題呢?當(dāng)我們調(diào)研的時(shí)候把問(wèn)題寫(xiě)出來(lái)的時(shí)候,就已經(jīng)解決了一半的問(wèn)題了。


2.4.3.2 B端用戶訪談30問(wèn)


01、基礎(chǔ)特征


崗位:你是從事什么崗位的?是總監(jiān)還是普通職員?目的是為了知道不同的權(quán)限的使用者,進(jìn)而就可以在系統(tǒng)中設(shè)置這些權(quán)限。

職責(zé):需要獲取到用戶不同的需求,因?yàn)槊恳粋€(gè)崗位有不同的職責(zé),他們的需求點(diǎn)也是不一樣的。根據(jù)這些不同的需求,我們?cè)诮缑嬷械脛?dòng)態(tài)儀表盤(pán)部分,就可以根據(jù)不同職責(zé)來(lái)顯示不同的內(nèi)容。

姓名:可以讓訪談?dòng)涗浀玫礁诱鎸?shí)的體現(xiàn),目的是可以獲得產(chǎn)品的一些真實(shí)的基礎(chǔ)字段。

年齡:是用戶認(rèn)知和經(jīng)驗(yàn)度的體現(xiàn),用戶的年齡可以代表他們對(duì)行業(yè)的認(rèn)知,和整個(gè)企業(yè)流程的認(rèn)知程度,一般性理解,用戶的年齡越大,那么他的經(jīng)驗(yàn)越豐富。

教育:指用戶是什么學(xué)歷,目的是為了了解用戶的經(jīng)歷與熟練程度,通常認(rèn)為,用戶的教育越高的人,他們往往使用軟件操作的熟練度會(huì)越好。

位置:指用戶在什么地方來(lái)使用,目的是知道了場(chǎng)景與優(yōu)先級(jí),用戶是在寫(xiě)字樓里還是精英場(chǎng)所來(lái)使用我們的產(chǎn)品。因此得出基礎(chǔ)特征是要得出這些結(jié)論,得出這些結(jié)論進(jìn)而反饋到產(chǎn)品中去。


02、行為接觸點(diǎn)


使用頻次:不同的崗位用戶使用功能的優(yōu)先級(jí)是不一樣的,用戶使用頻次越高的功能,這個(gè)功能的優(yōu)先級(jí)就越高。了解之后,那在下次迭代的時(shí)候就需要把重要級(jí)別的功能放在易操作的區(qū)域去體現(xiàn)。比如這個(gè)重要功能就是一個(gè)icon,那么把它放一個(gè)快捷入口。

使用時(shí)長(zhǎng):也能代表功能的優(yōu)先級(jí),用戶使用時(shí)間最長(zhǎng)的功能,代表可這個(gè)功能優(yōu)先級(jí)很高。

時(shí)間段:用戶在什么時(shí)間段使用的是最多的,我們就知道了這個(gè)功能的活躍度,這個(gè)數(shù)據(jù)指標(biāo),主要和技術(shù)有關(guān),我們可以從后臺(tái)數(shù)據(jù)去獲得。

使用設(shè)備:用戶使用設(shè)備兼容的優(yōu)先級(jí),平時(shí)用戶用什么設(shè)備,再訪談過(guò)程中,需要問(wèn)具體使用電腦的分辨率,屏幕的尺寸,屏幕的比例,都可以去實(shí)際的調(diào)研一下。在我們做B端界面選擇屏幕尺寸的時(shí)候,可以采用結(jié)合實(shí)際情況用戶使用的屏幕分辨率尺寸來(lái)設(shè)計(jì)界面。

相關(guān)軟件:用戶平時(shí)的操作習(xí)慣和流程是什么,還會(huì)使用其他軟件嗎?比如他們還用什么其他的競(jìng)品,可以繼續(xù)問(wèn)用戶其他的競(jìng)品哪里比較好,哪里是亮點(diǎn),那最終得到的目標(biāo)就是用戶的操作習(xí)慣和流程,這些也可都可以反饋在我們產(chǎn)品中。


03. 使用環(huán)境


碎片化時(shí)間:主要解決用戶場(chǎng)景的問(wèn)題,比如汽車(chē)4S店銷(xiāo)售,當(dāng)你去買(mǎi)車(chē)時(shí),銷(xiāo)售人員會(huì)問(wèn),你會(huì)買(mǎi)什么樣的車(chē),會(huì)記錄你的年齡,用車(chē)習(xí)慣,用車(chē)時(shí)間,姓名,預(yù)算,都會(huì)記錄,銷(xiāo)售通常會(huì)用一些碎片化的時(shí)間去記錄。此時(shí)就可以得出兩個(gè)結(jié)論:1.我們?cè)谠O(shè)計(jì)的時(shí)候是否可以考慮讓銷(xiāo)售充分利用碎片化來(lái)進(jìn)行這些信息的錄入,而且方便他的錄入,比如他本來(lái)只有電腦端,電腦端是一個(gè)完整版的功能,我們能不能給他設(shè)計(jì)出一個(gè)移動(dòng)端來(lái),讓銷(xiāo)售不用回到電腦屏幕中就可以去記錄這些內(nèi)容。2. 記錄時(shí)也有兩種記錄方式,是客戶講話的時(shí)候銷(xiāo)售去記錄還是這些事情做完之后銷(xiāo)售再去記錄。通過(guò)這樣的行為會(huì)得到這樣不同的設(shè)計(jì)結(jié)果,比如有人問(wèn)你們公司為什么要做B端的移動(dòng)端設(shè)計(jì)?以上就可以有理有據(jù)去解決銷(xiāo)售的場(chǎng)景問(wèn)題。


用戶的操作環(huán)境是什么:主要解決視覺(jué)體驗(yàn)問(wèn)題,用戶是白天操作還是晚上操作,是在強(qiáng)光環(huán)境操作還是弱光環(huán)境操作。這些都應(yīng)該是考的點(diǎn)。比如B端使用的ATM機(jī),應(yīng)該設(shè)計(jì)成白色還是深色模式,我們知道一般都是深色模式,是因?yàn)橥ǔJ鞘覂?nèi),它和光線有關(guān)系,如果是室外的取款機(jī),四周又沒(méi)有遮擋,如果還設(shè)計(jì)成深色,肯定是看不清楚的。比如HMI車(chē)載系統(tǒng),白天模式開(kāi)了深色,一定會(huì)看不清楚。所以要提前判斷使用深色模式還是淺色模式,也需要考慮在設(shè)計(jì)的時(shí)候使用什么樣的色彩和色調(diào),在室外使用還是室內(nèi)使用,如果對(duì)色彩不怎么挑,那也可以使用VI色,這樣一來(lái)視覺(jué)的保障色就確定了。還可以確定在使用周期時(shí)間,要多長(zhǎng)時(shí)間完成一個(gè)操作,應(yīng)該使用什么樣的方法可以盡快完成一個(gè)操作。通過(guò)用戶的操作環(huán)境可以得到以上信息。


是否有平行事件:用戶在做這件事情的同時(shí),他是不是需要做其他的事情,要得出至少兩種平行事件,得到的結(jié)論是,我們的界面是不是需要把某些功能整合在一起,因?yàn)橛脩艚?jīng)常是需要同時(shí)做這兩種事情,同時(shí)去打開(kāi)這兩個(gè)功能,通過(guò)這樣的反饋可以把同時(shí)使用的這兩個(gè)功能結(jié)合到一起,通過(guò)訪談可以得到這樣的依據(jù),來(lái)進(jìn)行功能的整合。


04. 主動(dòng)詢問(wèn)用戶觀點(diǎn)


用戶的驅(qū)動(dòng)力: 去了解激勵(lì)因素,就知道了什么功能應(yīng)該做完善,什么功能并沒(méi)有那么重要。比如汽車(chē)銷(xiāo)售為什么要錄入信息,因?yàn)榭梢栽黾悠?chē)的銷(xiāo)量,錄入越準(zhǔn)確的用戶信息,他的銷(xiāo)售量越高。也就是用戶做這件事情,他的原因是什么。


用戶遇到最難事件: 在工作中或者用戶使用過(guò)程中遇見(jiàn)了什么樣難的事情,這件難的事情,就是產(chǎn)品的痛點(diǎn),就明白了當(dāng)前產(chǎn)品迫切需要什么樣的功能去幫我們?cè)O(shè)計(jì)師來(lái)解決當(dāng)前產(chǎn)品痛點(diǎn)的問(wèn)題。


用戶遇到最颯事件:他在使用過(guò)程中最滿意的是什么事情,就是爽點(diǎn)是什么事情,那些產(chǎn)品中解決了用戶很好的問(wèn)題的部分,去把產(chǎn)品更好的放大,讓用戶繼續(xù)使用。也就是通過(guò)訪談我們知道了產(chǎn)品的爽點(diǎn)是什么。


用戶擔(dān)心事件:在他們使用過(guò)程中擔(dān)心的是什么,我們也要要了解這些隱藏的問(wèn)題.


用戶期望事件: 用戶希望得到什么樣的改善,最終的目標(biāo)是想解決什么樣的問(wèn)題,到這一步其實(shí)所有問(wèn)題目前都沒(méi)有答案,我們可以繼續(xù)訪問(wèn),先做記錄,不做最終的答案.


問(wèn)用戶目前狀態(tài): 我們可以了解待解決的問(wèn)題,通過(guò)產(chǎn)品想解決什么問(wèn)題,進(jìn)行收集需求;用戶對(duì)于產(chǎn)品升級(jí)有什么小期待,進(jìn)行收集需求;通過(guò)用戶的反饋目前產(chǎn)品的哪些問(wèn)題,收集到目前反饋的問(wèn)題;以往問(wèn)題是否有效解決;進(jìn)行收集反饋。覺(jué)得不錯(cuò)的同類(lèi)型產(chǎn)品有哪些,通過(guò)了解競(jìng)品情報(bào),我們可以競(jìng)量多問(wèn)一些 覺(jué)得不錯(cuò)的競(jìng)品有哪些;目前產(chǎn)品有哪些地方很好,很好的地方要保持,有的產(chǎn)品升級(jí)后,以前特別好的功能突然消失了,改了沒(méi)必要,好的功能保持就可以;前產(chǎn)品有哪些地方不好,我們?nèi)?yōu)化不好的地方;以往問(wèn)題是否有效解決,當(dāng)有問(wèn)題需要解決的時(shí)候,用戶的問(wèn)題是否是通暢的。通過(guò)看用戶如何反饋,我們可以了解功能傾向,了解整個(gè)流程是否通暢


05. 聊生活

發(fā)覺(jué)人性閃光點(diǎn),提升產(chǎn)品差異競(jìng)爭(zhēng)力,1、問(wèn)目前的生活狀態(tài),婚姻狀態(tài),有沒(méi)有孩子,接送孩子的時(shí)間,平時(shí)有什么愛(ài)好?什么愛(ài)好不錯(cuò)?發(fā)覺(jué)人人性的閃光點(diǎn),好的不好的產(chǎn)品都有共性,B端產(chǎn)品中視覺(jué)的傾向是什么?比如有插畫(huà),溫馨的語(yǔ)言提示,通過(guò)什么樣的情感設(shè)計(jì)可以照顧到每個(gè)人的生活。


2.4.4 B端用戶訪談得出結(jié)論


如何判斷功能在用戶那里好還是不好?前面所有的都只是在記錄,現(xiàn)在才是在做判斷,判斷的第一件事,是做定量的整理,所有的問(wèn)題都收集到了,也記錄到了,至少需要有兩個(gè)樣本,去做定量整理。

2.4.4.1定量整理:行為


第一步是行為的總結(jié),量級(jí)的總結(jié),把記錄的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞放到表格里面,經(jīng)常出現(xiàn),迫切需要解決的是什么問(wèn)題,較少的問(wèn)題是什么,偶爾的行為問(wèn)題是什么,因此偶爾的優(yōu)先級(jí)就不高了,主要關(guān)注經(jīng)常遇到的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞。


2.4.4.2 定量整理:特征


把每個(gè)角色按照以下表格里的的特征進(jìn)行定量的描述,這時(shí)候仍然不能找出它的共性點(diǎn),但已經(jīng)把用戶的特征進(jìn)行分類(lèi)整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


這個(gè)角色名稱是一個(gè)具體的名字,比如王某某。以下這張表:可以看到在我們的系統(tǒng)中有哪些的權(quán)限,有哪些的角色,他們的需求是怎么樣的,這是一個(gè)完整的用戶畫(huà)像。用戶畫(huà)像是一個(gè)結(jié)果,是通過(guò)用戶訪談的形式完成了用戶畫(huà)像,并不是被動(dòng)的接受數(shù)據(jù)信息得出的,所以通過(guò)用戶訪談的形式進(jìn)行定量定性分析得到的結(jié)果是最準(zhǔn)確的。


3.1 建立情緒版


3.1.1 情緒版的概念及作用

本質(zhì)是將情緒視覺(jué)化,情緒版并不是玄學(xué)的東西,它確實(shí)可以通過(guò)圖片找到對(duì)應(yīng)的圖形元素,因?yàn)閳D形(照片)是可以表達(dá)情緒的,比如看到一張照片會(huì)感受什么什么情緒:熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關(guān)的關(guān)鍵詞。


情緒版是一個(gè)特別快速能和產(chǎn)品,我們的團(tuán)隊(duì)包括設(shè)計(jì)團(tuán)隊(duì)進(jìn)行溝通的一種方式,比如要設(shè)計(jì)一個(gè)界面,需要幾天才能設(shè)計(jì)出來(lái),但我想提前知道一下未來(lái)界面設(shè)計(jì)成什么樣子,那就先做一個(gè)情緒版,讓大家知道,找的方向是什么,這樣適合與大家及時(shí)的溝通,大家也會(huì)明白產(chǎn)品將會(huì)做成什么樣子,達(dá)成產(chǎn)品的最終設(shè)計(jì)定調(diào)。


3.1.2 怎么建立情緒版


01. 提煉關(guān)鍵詞:獲取本次產(chǎn)品設(shè)計(jì)中所要實(shí)現(xiàn)的產(chǎn)品3-5個(gè)必要的關(guān)鍵字詞組,其中包括交互或視覺(jué)目標(biāo),通常由一些比較抽象的形容詞組成。比如:在做的產(chǎn)品是醫(yī)療行業(yè),那么醫(yī)療相關(guān)關(guān)鍵字詞組是:生命/健康/安全等。


02.關(guān)鍵詞發(fā)散:通過(guò)獲取到的關(guān)鍵詞的基礎(chǔ)上,發(fā)散出來(lái)一些新的詞語(yǔ),這種發(fā)散詞匯,不是簡(jiǎn)單頭腦風(fēng)暴產(chǎn)生的,而是要有目的性的進(jìn)行提取,要更加的具體。比如剛才舉例醫(yī)療行業(yè),生命可以繼續(xù)發(fā)散出血液、器官等衍生關(guān)鍵詞。


03. 搜索圖形: 對(duì)之前總結(jié)出的幾個(gè)關(guān)鍵詞在圖庫(kù)中進(jìn)行查找,也可以在直接在behance里找別人收藏好的情緒版圖片直接用,效率可能更高一點(diǎn)。


04. 制作情緒版: 搜索大量圖片后,挑出我們需要的進(jìn)行整理,采用一種拼貼方式進(jìn)行設(shè)計(jì)排版,拼貼出來(lái)需要得到需要得到的色彩,構(gòu)圖,質(zhì)感和字體。


05. 得出結(jié)論: 在圖形、色彩、字體、質(zhì)感、構(gòu)圖,以上五點(diǎn),得到合適的設(shè)計(jì)方案,快速與團(tuán)隊(duì)進(jìn)行溝通,直觀表達(dá)產(chǎn)品清徐,達(dá)成產(chǎn)品的設(shè)計(jì)定調(diào)。產(chǎn)品調(diào)性(企業(yè)調(diào)性)其實(shí)就是用企業(yè)的方式把故事講述出來(lái),是一種通過(guò)情緒版方法來(lái)講故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法為什么逐漸替代情緒版


品牌三元法是通過(guò)品牌三板斧模型得出的一個(gè)確定設(shè)計(jì)主風(fēng)格的一種新得方法,品牌三板斧模型可以總概為用戶調(diào)研關(guān)鍵的三個(gè)維度,一目標(biāo)用戶是誰(shuí)?二產(chǎn)品服務(wù)是什么?三對(duì)于目標(biāo)用戶來(lái)說(shuō),你的產(chǎn)品服務(wù)有什么核心價(jià)值。當(dāng)在回答完這三個(gè)問(wèn)題以后,我們其實(shí)就已經(jīng)清楚我們的品牌定位是什么了,因?yàn)樗暮诵膬?yōu)勢(shì)是比較明顯的,這樣我們就知道我們將來(lái)會(huì)面對(duì)什么樣的人群,去怎樣去宣傳它的賣(mài)點(diǎn),同時(shí)做出產(chǎn)品的差異化。


通過(guò)這幾年得工作案例設(shè)計(jì)實(shí)踐,在確定設(shè)計(jì)主風(fēng)格時(shí),情緒版方法逐漸有被品牌三元法替代得趨勢(shì),因?yàn)榍榫w版這種把抽象的詞不太好表現(xiàn)的詞,翻譯成圖片的方式,比如剛才提到醫(yī)療行業(yè)的關(guān)鍵詞是生命,健康,安全的,設(shè)計(jì)師找到很多這種相關(guān)的圖片,挑出來(lái)后從這些圖片里面找到一個(gè)共同的規(guī)律,最后去設(shè)計(jì)。這里面就有兩個(gè)問(wèn)題,一個(gè)原因是關(guān)鍵詞非常的平,生面,安全,健康,很難更準(zhǔn)確的表達(dá)衍生關(guān)鍵詞。另外一個(gè)問(wèn)題是它非常局限設(shè)計(jì)師的創(chuàng)意,因?yàn)樗菑囊恍┈F(xiàn)有的圖片里面然后去挑,所以很多設(shè)計(jì)師就反饋現(xiàn)有的方法不是很好用,比如當(dāng)我們想到安全這個(gè)詞,可能所有人想到都是特別綠的感覺(jué),或者干凈這個(gè)詞,就會(huì)統(tǒng)一聯(lián)想到白色這個(gè)畫(huà)面,大家從一開(kāi)始想法就差不多,所以它很難體現(xiàn)出創(chuàng)意。所以由于情緒版嚴(yán)重限制了自己的想象力,沒(méi)辦法把產(chǎn)品核心的氣質(zhì)表現(xiàn)出來(lái),雖然情緒版正確但是是一個(gè)平庸的結(jié)果,大家沒(méi)辦法記住的結(jié)果。


3.2.2 如何應(yīng)用品牌三元法


01. 理性層面(業(yè)務(wù)層面),傳遞產(chǎn)品理念:獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)業(yè)務(wù)層面,可以傳達(dá)產(chǎn)品理念得5-10個(gè)關(guān)鍵詞,對(duì)應(yīng)的放在左邊。


02. 感性層面(人文層面),營(yíng)造產(chǎn)品氛圍:主要體現(xiàn)這個(gè)產(chǎn)品給用戶帶來(lái)什么好處,宣傳的角度是什么。獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)人文層面,可以傳達(dá)產(chǎn)品氛圍的5-10個(gè)關(guān)鍵詞,對(duì)應(yīng)的放在右邊。


03. 個(gè)性層面(氣質(zhì)靈魂),創(chuàng)造獨(dú)特風(fēng)格:結(jié)合理性的業(yè)務(wù)層面和感性的人文層面,來(lái)創(chuàng)作出什么樣的畫(huà)面,和獨(dú)特風(fēng)格的感覺(jué)。同樣總結(jié)出5個(gè)左右的關(guān)鍵詞,放在下邊。


04. 結(jié)合以上三個(gè)維度,提煉主視覺(jué)畫(huà)面:當(dāng)出現(xiàn)這三部分詞的時(shí)候,經(jīng)過(guò)思考或者大家一起頭腦風(fēng)暴,可能一開(kāi)始想到的比較淺,但最終一定能想到一個(gè)最終關(guān)鍵詞或者特別符合我們這個(gè)產(chǎn)品氣質(zhì)的畫(huà)面,因?yàn)橐陨先糠值贸鲫P(guān)鍵詞也都是經(jīng)過(guò)品牌三板斧模型推演出有關(guān)聯(lián)的關(guān)鍵詞,想到一個(gè)符合產(chǎn)品氣質(zhì)的畫(huà)面并不難,再得出這個(gè)主視覺(jué)畫(huà)面后,這就是最終產(chǎn)品調(diào)性的主視覺(jué),既符合產(chǎn)品定位,又具有獨(dú)特的差異性。


05. 傳達(dá)產(chǎn)品,用視覺(jué)語(yǔ)言講故事:接下來(lái),當(dāng)這個(gè)主題、主視覺(jué)確定了以后,在看怎么樣用具體的視覺(jué)設(shè)計(jì)技能,去傳達(dá)我們的產(chǎn)品,也就是用視覺(jué)語(yǔ)言來(lái)講故事,具體注意三個(gè)方面,一是表像,元素要符合這個(gè)視覺(jué)主題,二是關(guān)聯(lián),元素之間要具有關(guān)聯(lián)。三是隱喻,用視覺(jué)的手段含蓄的表達(dá)產(chǎn)品的一些特性。比如云計(jì)算的一些產(chǎn)品,做得比較復(fù)雜每一個(gè)圖標(biāo)上都有一些曲線切割的畫(huà)面,這樣做的原因其實(shí)不是為了炫技,它是為了表達(dá)云計(jì)算彈性可擴(kuò)展的特性,好比拍電影,中國(guó)人講究隱晦。


4.1 色彩規(guī)范


4.1.1 選色

在系統(tǒng)色彩中,以Antdedign為例,系統(tǒng)色彩里包含了很多不同的色調(diào),但不可能用到這么多顏色,這時(shí)要應(yīng)用選擇幾個(gè)顏色,選幾個(gè)我們應(yīng)用的顏色。第一步要做的就是選色,選出應(yīng)用色彩,這個(gè)應(yīng)用色彩也就是我們建立得視覺(jué)規(guī)范中的基礎(chǔ)色板,在選色時(shí)候需注意,要有有明確的心理預(yù)期,比如醫(yī)療行業(yè)中常用藍(lán)色和綠色,就是符合預(yù)期的顏色。在基礎(chǔ)色板里選擇調(diào)色,應(yīng)選擇兩個(gè)相同級(jí)別的藍(lán)色和綠色;基礎(chǔ)色板里選不同顏色時(shí)不要超過(guò)三個(gè)級(jí)別的跳躍;當(dāng)選擇一個(gè)確定的顏色時(shí),可以選擇草綠或者青綠色來(lái)作為輔助色;在基礎(chǔ)色板里,最頂部的顏色最適合做背景色,中間的顏色適合做按鈕色,底部的顏色適合做狀態(tài)色,或者小面積文字的填充色,其余就是搭配過(guò)度的作用。再比如零售、比如金融行業(yè)的產(chǎn)品,會(huì)選擇不同的顏色,那這些顏色代表了什么,是不是會(huì)和企業(yè)的VI色是有相符之處,這些都是我們?nèi)ヒ紤]的。


4.1.2 注意色彩的兩個(gè)特性


01. 注意品牌性:體現(xiàn)特性和傳播理念、價(jià)值觀:比如宜家,我們立刻會(huì)想到的是黃色和藍(lán)色。比如京東,我們會(huì)想到紅色。如果是餓了么,我們會(huì)想到藍(lán)色。這些都是標(biāo)識(shí)性的色彩,體現(xiàn)和傳遞的就是品牌理念和價(jià)值觀。這些顏色一定不是隨便選的,比如,宜家的黃色和藍(lán)色,其實(shí)是瑞典的國(guó)旗的顏色,代表著宜家的來(lái)源地來(lái)源于瑞典,因?yàn)槿鸬涫且粋€(gè)很強(qiáng)調(diào)簡(jiǎn)約設(shè)計(jì)的國(guó)家,貫穿始終是在強(qiáng)調(diào)它的的價(jià)值觀。一些關(guān)鍵行動(dòng)點(diǎn):比如選中的狀態(tài),按鈕的顏色,在很重要的地方用主色表達(dá),這就是在體現(xiàn)B端的產(chǎn)品的色彩價(jià)值觀和企業(yè)價(jià)值觀的地方


02. 注意色彩的功能性:色彩需要體現(xiàn)功能有明確的信息以及狀態(tài)含義,色彩代表它獨(dú)特的含義,比如成功色,通常會(huì)選擇綠色,再系統(tǒng)色板里,青綠草綠都可以選。比如出錯(cuò)/刪除/失敗用紅色,表示警告警示。比如鏈接要用藍(lán)色。


4.2 圖標(biāo)規(guī)范

畫(huà)圖標(biāo)要注意圖標(biāo)的識(shí)別性、統(tǒng)一性和獨(dú)特性。圖標(biāo)首先要一眼看出來(lái)表達(dá)的含義,其次是圖標(biāo)設(shè)計(jì)圖標(biāo)的大小,線寬粗細(xì),圓角大小,圖標(biāo)風(fēng)格等這些都需要統(tǒng)一,最后最好可以體現(xiàn)出圖標(biāo)的獨(dú)特性,獨(dú)特性就是差異化,這也是品牌三遠(yuǎn)法得核心,塑造產(chǎn)品的差異化,具體分析方法也可應(yīng)用在圖表設(shè)計(jì)當(dāng)中,比如根據(jù)品牌基因進(jìn)行延展,也可根據(jù)主風(fēng)格主視覺(jué)設(shè)計(jì)定調(diào),設(shè)計(jì)出獨(dú)特風(fēng)格且符合產(chǎn)品定位得圖標(biāo)應(yīng)用在產(chǎn)品當(dāng)中。


4.3 文字規(guī)范


4.3.1 字體家族

在B端頁(yè)面中字體的顯示順序,有固定的一套代碼模式,可以理解為,比如有的用戶電腦沒(méi)有平方字體,所以會(huì)顯示出冬青黑體,來(lái)替代平方字體的設(shè)計(jì)稿,如果沒(méi)有冬青黑體,就用微軟雅黑替代顯示,字體家族中,從左到右代表了字體顯示的有限順序,平方、冬青黑體、微軟雅黑、黑體、宋體,中英文都是。


4.3.2 主字體

在系統(tǒng)中有中文常用PingFangSC、微軟雅黑、思源黑體;英文常用San FranciscoUI(SF字體)、Helvetica Neue、Arial


4.3.3 大小與行高


方法一:在Antdesign中規(guī)定的,比如字體大小是14px,行高就是22px。規(guī)范里最小字體是14px,但可能有注釋字體,字號(hào)最小是12px。表格里的內(nèi)容是按照表格里的行高來(lái)約定的,與字體行高無(wú)關(guān),這個(gè)前提是,不在表格里內(nèi)。當(dāng)沒(méi)有出現(xiàn)文本字體,表格里的字體的時(shí)候就需要去設(shè)置字體的行高,F(xiàn)igma里默認(rèn)行高是140%,比如14px字體,行高就設(shè)置成22。這是Antdesign里的規(guī)范,但不是唯一的規(guī)范。需要注意的是,如果使用一個(gè)標(biāo)準(zhǔn)就全部使用一個(gè)標(biāo)準(zhǔn),這個(gè)需要把選中文字段落進(jìn)行調(diào)整行高。


方法二:是當(dāng)按倍率去算的行高規(guī)范,方法步驟是先調(diào)整好行高,去改變字體大小,比如無(wú)行高時(shí),1/100%/1倍行高,注意加上%號(hào);緊湊行高,1.3行高/130%;常規(guī)行高1.5行高/150%;寬松行高,1.7行高/170%。


4.3.4 文字的層級(jí)關(guān)系

輔助文字12px、正文(?。?3px、正文(常規(guī))14px、小標(biāo)題(16px,小標(biāo)題是相對(duì)于14號(hào)字出現(xiàn)的)、標(biāo)題18px、主標(biāo)題20px


4.3.5 字重

比如常用的蘋(píng)方有6個(gè)字重,但在平時(shí)的設(shè)計(jì)中根本用不上。中文環(huán)境6個(gè)字重在實(shí)際顯示并沒(méi)那么好,常用兩個(gè)字體,萍方常規(guī)體400(常規(guī)),蘋(píng)方中黑體500(粗體)。而英文可以用粗體600。


4.3.6 字體顏色

在深色背景下、和淺色背景下不同內(nèi)容的色彩透明度不同,具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下,字體應(yīng)該使用白色還是黑色,應(yīng)該按著規(guī)范嚴(yán)格使用,難點(diǎn)在顏色相近的時(shí)候選擇白色還是黑色,也需按照規(guī)范執(zhí)行。


4.3.7 文字對(duì)齊關(guān)系


文案類(lèi)對(duì)齊:頁(yè)面的字段、段落較短標(biāo)題、需正文左對(duì)齊


表單類(lèi)對(duì)齊:保證整齊適合閱讀,冒號(hào)對(duì)齊法找到中間的冒號(hào),(左右對(duì)齊),如果全部使用左對(duì)齊或者右對(duì)齊會(huì)更亂。左邊一般最長(zhǎng)字段六個(gè)字。前提是中文環(huán)境,不是國(guó)際化。冒號(hào)左右要留多少像素:8px的倍數(shù)相關(guān)值,4(窄點(diǎn))、8(正常)、12、16(寬一點(diǎn))都可以。


數(shù)字類(lèi)對(duì)齊:日期,居中對(duì)齊;年齡,居中對(duì)齊/左對(duì)齊;非固定的數(shù)字:價(jià)格,采用右對(duì)齊,因?yàn)橛覍?duì)齊很容易看到價(jià)格的多少,哪個(gè)超出的更多,就越貴的,更容易區(qū)分?jǐn)?shù)字的多少。


4.4 層級(jí)規(guī)范


層級(jí)規(guī)范得核心是對(duì)信息的間隔和區(qū)分,信息的區(qū)分間隔要用偶數(shù)8的倍數(shù)。具體可分為同層級(jí)的區(qū)分,用色塊(比如氣泡)、邊框(欄目之間抖索狂等)、線段來(lái)進(jìn)行區(qū)分。錯(cuò)層區(qū)分,用彈窗(背景變暗)、邊框陰影(陰影的出現(xiàn)是擬物化的出現(xiàn),當(dāng)物體離它的光源越近,比如高度越高,它的陰影就越大越寬。離它的底部越近,陰影就越小,比如下拉框、搜索框、日歷控件、彈出窗口來(lái)區(qū)分)。


這里需注意,關(guān)于投影,再前端角度考慮盡量不要用太多的特效濾鏡來(lái)設(shè)計(jì),因?yàn)樵贐端網(wǎng)頁(yè)中,瀏覽器的兼容性不好,比如用ie瀏覽器就根本看不到這樣的效果,如果用谷歌瀏覽器能看到,用safri瀏覽器能看到,但在火狐下等又會(huì)看不到,想要都看到就需要兼容很多代碼,需要前端加很多代碼實(shí)現(xiàn)兼容性的效果,很增加前端的工作量,所以在B端很少用非標(biāo)準(zhǔn)型的濾鏡代碼使用,雖然可以實(shí)現(xiàn),但一般不太用,一般就是變灰、變深、變透明度最簡(jiǎn)單的方法實(shí)現(xiàn)。不同于移動(dòng)端,因?yàn)镮OS用的是原生的開(kāi)發(fā),所以不存在這個(gè)問(wèn)題。


文章來(lái)源:站酷   作者:morning_c

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)




定量研究進(jìn)階:客戶滿意度模型與卡諾模型

ui設(shè)計(jì)分享達(dá)人

如何提高“數(shù)據(jù)修養(yǎng)”?

定量研究指的是對(duì)用戶的某些特性進(jìn)行數(shù)字化測(cè)量并進(jìn)行統(tǒng)計(jì)研究。對(duì)于定量研究來(lái)說(shuō),數(shù)據(jù)的統(tǒng)計(jì)以及數(shù)據(jù)的分析是尤為重要的。

首先,需要說(shuō)明數(shù)據(jù)修養(yǎng),與統(tǒng)計(jì)技術(shù)的水平無(wú)關(guān)。

數(shù)據(jù)修養(yǎng)指的是培養(yǎng)科學(xué)的、正確的對(duì)待數(shù)據(jù)的態(tài)度,在收集、分析和解讀數(shù)據(jù)的過(guò)程中做到求真務(wù)實(shí)。


1、在研究設(shè)計(jì)時(shí)就考慮到數(shù)據(jù)分析方法

良好完善的研究設(shè)計(jì)是正確進(jìn)行數(shù)據(jù)分析的前提,如果沒(méi)有科學(xué)的設(shè)計(jì),良好的數(shù)據(jù)質(zhì)量,那么無(wú)論用什么方法和軟件都無(wú)法獲得真實(shí)的結(jié)果,統(tǒng)計(jì)就變成了“數(shù)字游戲”。


從預(yù)期的研究結(jié)果出發(fā),向前逆推數(shù)據(jù)分析方法和研究設(shè)計(jì)

Step1 · 要解決什么問(wèn)題

Step2 · 期望得到的研究結(jié)果

Step3 · 需要的統(tǒng)計(jì)分析方法

Step4 · 需要的數(shù)據(jù)類(lèi)型

Step5 · 對(duì)應(yīng)的調(diào)查方法

Step6 · 研究的設(shè)計(jì)


2、在研究設(shè)計(jì)時(shí)就考慮到數(shù)據(jù)分析方法

在問(wèn)卷開(kāi)始前將問(wèn)卷框架設(shè)計(jì)做好


3、數(shù)據(jù)收集時(shí)的注意事項(xiàng)

線上問(wèn)卷調(diào)查是目前我們所用到最主要的調(diào)查形式,進(jìn)行線上問(wèn)卷調(diào)查時(shí),誤差的主要來(lái)源包括抽樣誤差和非抽樣誤差兩類(lèi)。

抽樣框誤差:抽樣框誤差產(chǎn)生于目標(biāo)總體與抽樣框的不一致,因抽樣框引起的誤差主要有樣本的代表性問(wèn)題(如是否能代表網(wǎng)民、是否能代表某類(lèi)用戶總體等)以及抽樣框重復(fù)(用戶重復(fù)回答)以及抽樣遺漏(如無(wú)法包括競(jìng)品用戶等)。

解決方案:正確界定網(wǎng)絡(luò)調(diào)查的適用范圍,網(wǎng)絡(luò)調(diào)查應(yīng)主要針對(duì)以網(wǎng)民為對(duì)象的項(xiàng)目。


無(wú)回答誤差:樣本中的部分個(gè)體不愿意或是無(wú)法完成調(diào)查問(wèn)卷而產(chǎn)生的誤差,原因:

(1)激勵(lì)手段不夠,缺乏交流。

(2)技術(shù)障礙,如網(wǎng)速不穩(wěn),瀏覽器不兼容。

(3)對(duì)隱私的顧慮。

解決方案:網(wǎng)絡(luò)調(diào)查與抽樣技術(shù)相結(jié)合,進(jìn)行問(wèn)卷投放跟蹤(如提醒用戶填寫(xiě)),或者結(jié)合有一定激勵(lì)性質(zhì)的產(chǎn)品運(yùn)營(yíng)手段。


計(jì)量誤差:計(jì)量誤差又稱登記誤差,是指由于各種原因使得調(diào)查和計(jì)量的結(jié)果與真實(shí)情況不符而引起的誤差,如,問(wèn)卷歧義,被調(diào)查者對(duì)調(diào)查內(nèi)容定義和概念誤解所造成的誤差。

解決方案:科學(xué)設(shè)計(jì)調(diào)查問(wèn)卷,要求調(diào)查問(wèn)卷更易于理解、更加完整、更具有親和力,保證被調(diào)查者做出準(zhǔn)確而真實(shí)的回答。



顧客滿意度模型

是指用戶對(duì)一種產(chǎn)品或服務(wù)進(jìn)行消費(fèi)體驗(yàn)后的感知,與其期望值進(jìn)行比較后,所產(chǎn)生的的一種心理狀態(tài)。

用戶滿意度理論的發(fā)展

1974年,本田公司就進(jìn)行了有關(guān)客戶對(duì)汽車(chē)評(píng)價(jià)的調(diào)查,但是當(dāng)時(shí)沒(méi)有“顧客滿意”的概念。

1989年,美國(guó)密歇根大學(xué)商學(xué)院質(zhì)量研究中心的費(fèi)耐爾博士將計(jì)量經(jīng)濟(jì)模型引入顧客滿意度測(cè)評(píng)建立了費(fèi)耐爾邏輯模型,得到廣泛的應(yīng)用。

20世紀(jì)90年代后期,CS(顧客滿意度)理論已成為在全球工商界開(kāi)始盛行的一種新型的企業(yè)文化和管理哲學(xué)。

與此同時(shí),許多國(guó)家(地區(qū))先后對(duì)顧客滿意度指數(shù)測(cè)評(píng)的理論、模型和方法開(kāi)展了全面深入的研究。


以美國(guó)顧客滿意度的模型 - 費(fèi)耐爾模型為例,各模型元素的構(gòu)成元素參考:


美國(guó)顧客滿意指數(shù)模型主要內(nèi)容框架:


測(cè)評(píng)指標(biāo)體系的量化:李克特量表

對(duì)事物的特性變量可以用不同的規(guī)則賦值,因此形成了不同測(cè)量水平的測(cè)量量表?;镜臏y(cè)量量表有四種:類(lèi)別量表、順序量表、等距量表和等比量表。顧客滿意度指數(shù)測(cè)評(píng)中應(yīng)用的五級(jí)李克特量表就屬于其中的順序量表。一般采用的五級(jí)態(tài)度是:滿意、較滿意、一般、較不滿意和不滿意,相應(yīng)賦值為5、4、3、2、1。也可為相反的順序,將五級(jí)態(tài)度在題目開(kāi)頭給出,然后讓被訪者根據(jù)對(duì)每個(gè)測(cè)評(píng)指標(biāo)滿意程度直接在相應(yīng)的方框上打鉤或者畫(huà)圈。

顧客滿意度研究除了通過(guò)李克特量表將測(cè)評(píng)指標(biāo)體系量化以外,還有一個(gè)非常大的特點(diǎn),即測(cè)評(píng)指標(biāo)的權(quán)重。

顧客滿意度指數(shù)測(cè)評(píng)體系反映測(cè)試對(duì)象的質(zhì)量水平狀況和特征,而每一測(cè)評(píng)指標(biāo)的變化對(duì)顧客滿意度指數(shù)變化的影響程度是有所不同的。反映影響程度的重要尺度是權(quán)重,權(quán)重的確定與分配是測(cè)評(píng)指標(biāo)體系設(shè)計(jì)中非常關(guān)鍵的一個(gè)步驟,對(duì)于能否客觀、真實(shí)的反映顧客滿意度起著至關(guān)重要的作用。



測(cè)評(píng)指標(biāo)權(quán)重的賦值方法:

(1)主觀賦權(quán)法

(2)客觀賦權(quán)法

(3)直接比較法

即以同級(jí)指標(biāo)集內(nèi)重要程度最小的指標(biāo)為基礎(chǔ),其他指標(biāo)與之比較,作出是其多少倍的重要程度的判斷,然后逐一分析,得出各指標(biāo)的權(quán)重。

(4)對(duì)偶比較法

我們將重要程度分為非常重要、重要、比較重要和不重要四個(gè)等級(jí),把所要比較的指標(biāo)配成對(duì),然后一對(duì)一地對(duì)指標(biāo)的某一特征進(jìn)行比較,做出重要程度判斷:

a、當(dāng)A與B比較時(shí),A非常重要,B不重要,則A=4,B=0;

b、當(dāng)A與B比較時(shí),A重要,B比較重要,A=3,B=1;

c、當(dāng)A與B一樣重要,則A與B分別記為2。

(5)德?tīng)柗品?

(6)層次分析法

是美國(guó)著名運(yùn)籌學(xué)家賽迪給出的1~9標(biāo)度法,它根據(jù)各測(cè)評(píng)指標(biāo)的相對(duì)重要性來(lái)確定權(quán)重。層次分析法可以通過(guò)測(cè)評(píng)指標(biāo)兩兩比較,使復(fù)雜的無(wú)序的定性問(wèn)題能夠進(jìn)行量化處理。

(7)相關(guān)分析

(8)回歸分析

(9)線性結(jié)構(gòu)方程模型(LISREL)

(10)部分最小二乘法(PLS)

(11)路徑系數(shù)分析

主要作用是分析顧客滿意度指數(shù)模型中各結(jié)構(gòu)變量之間的關(guān)系,分析顧客滿意度指數(shù)主要受什么影響,從宏觀上如何進(jìn)行調(diào)控才能更有效提升CSI。具體來(lái)講,就是在百分制的計(jì)分方式中,因變量變動(dòng)1分,直接影響到后面結(jié)果變量變化的分值。


如圖中所示,產(chǎn)品質(zhì)量提高1分,將直接影響顧客滿意度提高0.36分,結(jié)構(gòu)變量除了這種直接影響外,還可以再模型中箭頭所指的方向上產(chǎn)生間接的影響。如圖中顧客期望除了對(duì)顧客滿意度的直接影響是-0.11外,還通過(guò)顧客對(duì)質(zhì)量的感知和顧客對(duì)價(jià)值的感知對(duì)顧客滿意度產(chǎn)生間接影響,間接影響系數(shù)的大小可以由所有從顧客期望到顧客滿意度的路徑上的系數(shù)乘積的累加和表示,計(jì)算方法為:

(-0.41)x0.94x0.26+(-0.41)x0.36+(-0.01)x0.26=-0.25

顧客期望對(duì)顧客滿意度的直接影響系數(shù)和間接影響系數(shù)相加可以得到全部影響系數(shù),即(-0.11)+(-0.25)=-0.36

同理,可以計(jì)算出其他結(jié)構(gòu)變量對(duì)顧客滿意度的直接影響系數(shù)、間接影響系數(shù)和全部影響系數(shù)。

如果能將競(jìng)爭(zhēng)對(duì)手的指標(biāo)分值也進(jìn)行路徑系數(shù)分析,那么多企業(yè)的戰(zhàn)略決策制定,為推進(jìn)企業(yè)發(fā)展將會(huì)更具有實(shí)際指導(dǎo)意義。


關(guān)于路徑系數(shù)分析結(jié)果的應(yīng)用:

可用于分析顧客特征的類(lèi)型,例如(1)價(jià)值取向型。(2)質(zhì)量取向型。根據(jù)不同顧客的需求和體驗(yàn),提升其滿意程度。更有利于精細(xì)化運(yùn)營(yíng)。


 “顧客凈推介值”理論(NPS理論)

進(jìn)行顧客滿意度研究,其主要目的,就是要不斷提升顧客的滿意度,從而建立更多的忠誠(chéng)顧客群,為企業(yè)帶來(lái)更大的利潤(rùn)和收益。通過(guò)“顧客凈推介值”分析,我們可以進(jìn)行顧客忠誠(chéng)度的深入分析、研究,以在這方面能提供更多的數(shù)據(jù)給企業(yè)作為經(jīng)營(yíng)的決策參考。


“顧客凈推介值”(NPS:Net Promoter Score),顧名思義,“顧客凈推介值”指的就是公司現(xiàn)有顧客將公司的產(chǎn)品或服務(wù)向其他人推薦的程度如何的測(cè)量。這也是預(yù)測(cè)企業(yè)有機(jī)增長(zhǎng)和區(qū)分公司“利潤(rùn)良性”和“不良利潤(rùn)”的一種手段。

分析假設(shè):我們可以把企業(yè)的利潤(rùn)分為“不良利潤(rùn)”和“良性利潤(rùn)”兩種。


“不良利潤(rùn)”是以損害客戶關(guān)系為代價(jià)換來(lái)的利潤(rùn)。如果客戶覺(jué)得所受到的待遇不周,則產(chǎn)生的利潤(rùn)就是不良的。即不良利潤(rùn)是通過(guò)降低客戶體驗(yàn)的質(zhì)量來(lái)省錢(qián),是向顧客榨取價(jià)值而非創(chuàng)造價(jià)值。


“良性利潤(rùn)”則截然不同,如果客戶自愿回頭購(gòu)買(mǎi)更多產(chǎn)品與服務(wù),而且還建議其他人購(gòu)買(mǎi),這樣公司便實(shí)現(xiàn)了良性利潤(rùn)。實(shí)際上,滿意的顧客變成了公司營(yíng)銷(xiāo)部門(mén)的一部分,即他們成為了推介型客戶,是公司的最佳營(yíng)銷(xiāo)員。


例如:

根據(jù)本次調(diào)查,我們的問(wèn)題是“您有多大的可能推薦此產(chǎn)品呢?”這個(gè)問(wèn)題作出評(píng)價(jià),并把被訪者分成三類(lèi),即“推介者”(90分~100分)、“消極滿意者”(60分~90分)和“貶低者”(0分~60分)。用推介者所占百分比減去貶低者所占百分比,就得到顧客凈推介值。



卡諾模型—理論篇

一、卡諾模型的由來(lái)

KANO模型簡(jiǎn)介

受行為科學(xué)家赫茨伯格的雙因素理論的啟發(fā),東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)和他的同事Fumio Takahashi于1979年10月發(fā)表了《質(zhì)量的保健因素和激勵(lì)因素》一文,第一次將滿意與不滿意標(biāo)準(zhǔn)引入質(zhì)量管理領(lǐng)域,并于1982年日本質(zhì)量管理大會(huì)第12屆年會(huì)上宣讀了《魅力質(zhì)量與必備質(zhì)量》的研究報(bào)告。該論文于1984年1月18日正式發(fā)表在日本質(zhì)量管理學(xué)會(huì)的雜志《質(zhì)量》上,標(biāo)志著狩野模式(Kano model)的確立和魅力質(zhì)量理論的成熟。


雙因素理論

雙因素理論又稱激勵(lì) — 保健理論,是美國(guó)的行為科學(xué)家弗雷德里克·赫茨伯格提出來(lái)的。雙因素理論認(rèn)為引起人們工作動(dòng)機(jī)的因素主要有兩個(gè):一是保健因素,二是激勵(lì)因素。只有激勵(lì)因素才能夠給人們帶來(lái)滿意感,而保健因素只能消除人們的不滿,但不會(huì)帶來(lái)滿意感。

其理論根據(jù)是:

第一,不是所有的需要得到滿足就能激勵(lì)起人們的積極性,只有那些被稱為激勵(lì)因素的需要得到滿足才能調(diào)動(dòng)人們的積極性。

第二,不具備保健因素時(shí)將引起強(qiáng)烈的不滿,但具備時(shí)并不一定會(huì)調(diào)動(dòng)強(qiáng)烈的積極性。

第三,激勵(lì)因素是以工作為核心的,主要是在職工進(jìn)行工作時(shí)發(fā)生的。


保健因素 - 是指造成員工不滿的因素。保健因素不能得到滿足,則使員工產(chǎn)生不滿情緒、消極怠工,甚至引起罷工等對(duì)抗行為;但在保健因素得到一定程度改善以后,無(wú)論再如何進(jìn)行改善的努力往往也很難使員工感到滿意,因此也就難以再由此激發(fā)員工的工作積極性,所以就保健因素來(lái)說(shuō):“不滿意”的對(duì)立面應(yīng)該是“沒(méi)有不滿意”。


激勵(lì)因素 - 是指能造成員工感到滿意的因素。激勵(lì)因素的改善而使員工感到滿意的結(jié)果,能夠極大地激發(fā)員工工作的熱情,提高勞動(dòng)生產(chǎn)效率;但激勵(lì)因素即使管理層不給予滿意滿足,往往也不會(huì)因此使員工感到不滿意,所以就激勵(lì)因素來(lái)說(shuō):“滿意”的對(duì)立面應(yīng)該是“沒(méi)有滿意”。

二、什么是卡諾模型

 (1)A—魅力質(zhì)量要素:此質(zhì)量要素具備時(shí),會(huì)讓顧客感到滿意;反之未具備時(shí),顧客也能接受,同時(shí)不會(huì)感到不滿意。

例如說(shuō),海底撈等桌做美甲。

(2)O—一維質(zhì)量要素:此質(zhì)量要素具備時(shí),會(huì)讓顧客感到滿意,反之未具備時(shí),則會(huì)導(dǎo)致顧客不滿意。

例如,火鍋店羊肉越便宜越爽,上網(wǎng)的速度越快越爽。

(3)M—必備質(zhì)量要素:此質(zhì)量要素具備時(shí),顧客認(rèn)為這是應(yīng)該的,反之未具備時(shí),會(huì)導(dǎo)致顧客不滿意。

例如,火鍋店要有牛肉,手機(jī)能打電話。

(4)I—無(wú)關(guān)質(zhì)量要素:此質(zhì)量要素?zé)o論具備與否,對(duì)于顧客,都不會(huì)有任何滿意或者不滿意的感覺(jué)。

例如,山寨機(jī)可以刮胡子。

(5)R—反向質(zhì)量要素:此質(zhì)量要素具備時(shí),會(huì)導(dǎo)致顧客不滿意,反之不具備時(shí),顧客反而會(huì)感到滿意。


卡諾模型—實(shí)操篇

卡諾模型的兩種用途:

1、判斷產(chǎn)品的某一質(zhì)量特性對(duì)于顧客而言,屬于何種質(zhì)量要素

“顧客就是上帝,但是用戶往往需要的不多,想要的卻太多,為了讓他們更滿意,我們是不是要一一滿足他們?”

2、通過(guò)滿意的敏感性分析來(lái)篩選顧客滿意度的改進(jìn)因素

“用戶可能根本不知道他們想要什么,而我們能提供的東西很多,但是資源卻是有限的,應(yīng)該怎么利用有限的資源來(lái)使用戶更加滿意”


卡諾模型的研究步驟:總的來(lái)說(shuō),可以分成以下五個(gè)步驟:

Step1,定義質(zhì)量要素

Step2,構(gòu)建卡諾問(wèn)卷

Step3,進(jìn)行問(wèn)卷調(diào)查

Step4,分析調(diào)查結(jié)果

Step5,篩選改進(jìn)因素


Step1,定義和選擇質(zhì)量要素

列出需要使用卡諾模型問(wèn)卷進(jìn)行調(diào)查的指標(biāo),這些指標(biāo)可以是滿意度所涉及的系統(tǒng)指標(biāo)體系中的所有指標(biāo),也可以是關(guān)注的部分指標(biāo)。

“官網(wǎng)中xxx方面的信息”

“產(chǎn)品中的xxx功能”

“線下戶外廣告宣傳”

“......”


Step2,構(gòu)建卡諾問(wèn)卷

卡諾問(wèn)卷的設(shè)計(jì)思想是從正反兩方面進(jìn)行提問(wèn),以便了解顧客對(duì)某一改進(jìn)因素的看法,然后將這些改進(jìn)因素區(qū)分為“魅力質(zhì)量要素”、“一維質(zhì)量要素”、“必備質(zhì)量要素”、“無(wú)關(guān)質(zhì)量要素”和“反向質(zhì)量要素”.


在卡諾問(wèn)卷中,每個(gè)改進(jìn)因素都由正向和負(fù)向兩個(gè)問(wèn)題構(gòu)成。正向問(wèn)題是測(cè)量顧客在具有某項(xiàng)因素時(shí)的反應(yīng);負(fù)向問(wèn)題則是測(cè)量顧客不具有該項(xiàng)改進(jìn)因素時(shí)的反應(yīng)??ㄖZ問(wèn)卷中的問(wèn)題答案采用五種程度選項(xiàng),他們分別是“我喜歡這樣”、“它必須這樣”、“我無(wú)所謂”、“我能夠忍受”、“我討厭這樣”。無(wú)論是正向還是負(fù)向問(wèn)題,都是同樣的答案選項(xiàng)。

Step3,進(jìn)行問(wèn)卷調(diào)查

問(wèn)卷調(diào)查的方法有很多,卡諾問(wèn)卷并沒(méi)有限定必須要什么方法調(diào)查,例如,入戶訪問(wèn)法、攔截訪問(wèn)法、傳統(tǒng)訪問(wèn)法、計(jì)算機(jī)輔助等等。


Step4,分析調(diào)查結(jié)果

在獲得了每個(gè)改進(jìn)因素的卡諾需求分類(lèi)數(shù)據(jù)之后,分析調(diào)查結(jié)果,分析調(diào)查結(jié)果的目的是為了了解每個(gè)改進(jìn)因素的顧客需求分類(lèi)狀況。需求分類(lèi)最簡(jiǎn)單有效的方式是計(jì)算每個(gè)改進(jìn)因素在不同需求類(lèi)型中出現(xiàn)的頻率。

將顧客對(duì)某項(xiàng)改進(jìn)因素的正向和負(fù)向問(wèn)題的答案填入卡諾評(píng)價(jià)表,就可以得到顧客此項(xiàng)因素的需求分類(lèi):

如果顧客對(duì)正向問(wèn)題的回答是“我喜歡這樣”,對(duì)負(fù)向問(wèn)題的回答是“我討厭這樣”,那么在卡諾評(píng)價(jià)表中,這項(xiàng)改進(jìn)因素就被分類(lèi)為“O”,即“一維質(zhì)量要素”。


如果顧客對(duì)某項(xiàng)因素正負(fù)向問(wèn)題的回答結(jié)合后,分類(lèi)是M、A、I或者R,那么該因素就被分別分類(lèi)為“必備質(zhì)量要素”、“魅力質(zhì)量要素”、“無(wú)關(guān)質(zhì)量要素”或者“反向質(zhì)量要素”


另外,卡諾評(píng)價(jià)表中的分類(lèi)“Q”,是指有疑問(wèn)的(questionable)結(jié)果,顧客的回答一般不會(huì)進(jìn)入到這個(gè)類(lèi)別,除非這個(gè)問(wèn)題的問(wèn)法不合理,或者是顧客沒(méi)有很好的理解這個(gè)問(wèn)題,或者是顧客在填寫(xiě)問(wèn)卷時(shí)出現(xiàn)錯(cuò)誤。


Step5,篩選改進(jìn)因素

對(duì)改進(jìn)因素的顧客需求進(jìn)行分類(lèi),還不能完全說(shuō)準(zhǔn)確的說(shuō)明這些因素的改進(jìn)次序,因此,還需要通過(guò)滿意的敏感性分析來(lái)篩選改進(jìn)因素。

滿意敏感性分析是指通過(guò)對(duì)各種改進(jìn)因素的滿意影響力和不滿意影響力的分析,來(lái)判斷顧客對(duì)這些因素滿意水平變化的敏感程度,其目的是確定改進(jìn)哪些因素會(huì)更有利于提升顧客滿意度。

滿意敏感性分析是通過(guò)滿意影響力(SI)和不滿意影響力(DSI)兩個(gè)方面來(lái)測(cè)量的,他們的測(cè)量公式如下:

滿意影響力(SI)

滿意影響力SI是以魅力質(zhì)量要素A與一維質(zhì)量要素O的頻率之和為分子,以魅力質(zhì)量要素A、一維質(zhì)量要素O、必備質(zhì)量要素M、無(wú)關(guān)質(zhì)量要素I的評(píng)率之和為分母計(jì)算得到的,滿意影響力的大小顯示,如果某項(xiàng)因素得到改進(jìn),顧客滿意強(qiáng)度會(huì)有多大的提升。


不滿意影響力(DSI)

不滿意影響力DSI是以一維質(zhì)量要素O與必備質(zhì)量要素M的頻率之和為分子,以魅力質(zhì)量要素A、一維質(zhì)量要素O、必備質(zhì)量要素M、無(wú)關(guān)質(zhì)量要素I之和為分母,并乘以(-1)計(jì)算得到的,不滿意影響力的大小顯示,如果某項(xiàng)因素未滿足顧客的需求,會(huì)對(duì)顧客滿意的降低產(chǎn)生多大的影響。


例如,對(duì)于如下的“改進(jìn)因素滿意敏感性分析表”統(tǒng)計(jì)結(jié)果:


將各因素以SI值為橫坐標(biāo)、DSI值為縱坐標(biāo)納入改進(jìn)滿意因素敏感性比較矩陣中,同時(shí)以左上原點(diǎn)為圓點(diǎn),用半徑為0.707的四分之一圓弧將不同的改進(jìn)因素進(jìn)行分割,如下圖:


在因素選擇線右側(cè)的因素就是需要實(shí)施改進(jìn)的因素,并且離圓心越遠(yuǎn)的因素,顧客的滿意敏感性越大。從圖中可以看出,A和D因素暫時(shí)不需要改進(jìn),需要改進(jìn)的因素為B、C、E和F方面,按照重點(diǎn)次序排列為F、E、B、C。








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

文章來(lái)源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)




用研方法論:眼動(dòng)與腦電研究

ui設(shè)計(jì)分享達(dá)人

眼動(dòng)研究


眼動(dòng)原理:

眼動(dòng)追蹤

是指通過(guò)測(cè)量眼睛的注視點(diǎn)的位置或者眼球相對(duì)頭部的運(yùn)動(dòng)而實(shí)現(xiàn)對(duì)眼球運(yùn)動(dòng)的追蹤。

眼動(dòng)儀

是一種能夠跟蹤測(cè)量眼球位置及眼球運(yùn)動(dòng)信息的一種設(shè)備,在視覺(jué)系統(tǒng)、心理學(xué)、認(rèn)知語(yǔ)言學(xué)的研究中有廣泛的應(yīng)用。PC/IPHONE/CAR都可使用。


常用指標(biāo):

注視

在獲取信息時(shí),眼睛停留在所加工的物體上,稱之為“注視”,超過(guò)100毫秒,認(rèn)知加工。

眼跳

在轉(zhuǎn)移加工對(duì)象時(shí),人眼在兩個(gè)注視點(diǎn)之間的快速動(dòng),稱之為“眼跳”,注視點(diǎn)或注視方向發(fā)生改變,獲取時(shí)空信息,無(wú)認(rèn)知加工。

跟隨運(yùn)動(dòng)

當(dāng)測(cè)試者與眼睛存在相對(duì)運(yùn)動(dòng)時(shí),為了保證眼睛總注視這個(gè)物體,眼球會(huì)追隨物體移動(dòng)。眼球追隨物體移動(dòng),有認(rèn)知加工。

眼動(dòng)的本質(zhì) = 人注意力資源的主動(dòng)或被動(dòng)分配,選擇更有用或更有吸引力的信息。


常用分析:

注視軌跡

記錄測(cè)試者在整個(gè)體驗(yàn)過(guò)程中的注視軌跡,從而可知測(cè)試者首先注視的區(qū)域、注視的先后順序、注視停留時(shí)間的長(zhǎng)短以及視覺(jué)是否流暢等。  

注視熱點(diǎn)圖

用不同顏色來(lái)表示測(cè)試者對(duì)界面各處的不同關(guān)注度,從而可以直觀的看到測(cè)試者最關(guān)注的區(qū)域和忽略的區(qū)域等。

興趣區(qū)分析

考察測(cè)試者在每個(gè)興趣區(qū)里的平均注視時(shí)間和注視點(diǎn)的個(gè)數(shù),以及在各興趣區(qū)之間的注視順序。

例如:用戶視覺(jué)順序


問(wèn)題:確認(rèn)按鈕位置不符合玩家瀏覽路徑。

分析:圖中是玩家的視覺(jué)動(dòng)線,玩家先看見(jiàn)確認(rèn)按鈕再看見(jiàn)選擇角色區(qū)域,這不符合操作順序,很可能導(dǎo)致有些玩家忽略了選擇角色。

建議:調(diào)整一下角色選擇的版面布局,可以考慮將確定按鈕放在選擇角色之下。


例如:眼動(dòng)注視時(shí)間及頻率分析(客戶管理軟件的導(dǎo)航可用性評(píng)估)

測(cè)試用戶的注視時(shí)間統(tǒng)計(jì)見(jiàn)表1,可以明顯發(fā)現(xiàn)兩個(gè)版本在眼動(dòng)注視時(shí)間區(qū)別:用戶在使用舊版的系統(tǒng)時(shí),注視的時(shí)間比較長(zhǎng);

測(cè)試用戶的注視頻率統(tǒng)計(jì)見(jiàn)表2,兩個(gè)版本在眼動(dòng)注視頻率有明顯區(qū)別:用戶在使用舊版系統(tǒng)時(shí),注視次數(shù)頻率比較高,無(wú)規(guī)律性;

通過(guò)注視時(shí)間、注視頻率和方案評(píng)價(jià)等級(jí)的對(duì)比分析,可以得出評(píng)估等級(jí)越低(數(shù)值越低表示滿意度越高),用戶眼動(dòng)注視時(shí)間越短,用戶在頁(yè)面搜尋的頻率相對(duì)越少,用戶在較短的時(shí)間內(nèi)能找到想要的功能,頁(yè)面影響用戶的干擾越小。


例如:網(wǎng)站的可用性對(duì)比測(cè)試

對(duì)某網(wǎng)站改版前(圖7)和改版后的主頁(yè)(圖8)進(jìn)行可用性對(duì)比測(cè)試,通過(guò)讓用戶瀏覽首頁(yè)(不做任何點(diǎn)擊)判定網(wǎng)站的主旨和類(lèi)型,來(lái)捕捉用戶注視點(diǎn)的軌跡圖和記錄用戶在不同位置注視時(shí)間,對(duì)比網(wǎng)站主頁(yè)改版前和改版后信息傳達(dá)的有效性。

經(jīng)過(guò)對(duì)采集到的數(shù)據(jù)進(jìn)行分析,可發(fā)現(xiàn)用戶在瀏覽改版前的頁(yè)面時(shí),眼動(dòng)軌跡混亂,掃描路徑長(zhǎng)且很多相互交叉,注視點(diǎn)序列分散排布,用戶注視點(diǎn)變換快,無(wú)明顯的興趣點(diǎn),如圖這些數(shù)據(jù)表明改版前的網(wǎng)站首頁(yè)布局不夠合理,沒(méi)有重點(diǎn)。

 

眼動(dòng)研究的局限性:

1、可以讓用研工作變得越來(lái)越有技術(shù)含量,將會(huì)在用研工作中扮演越來(lái)越重要的角色。

2、但是需要加以輔助測(cè)試(如定性訪談)來(lái)收集更多的實(shí)驗(yàn)數(shù)據(jù),并通過(guò)結(jié)合分析來(lái)得出更多、更有效的結(jié)論。


眼動(dòng)研究的價(jià)值:

1、眼動(dòng)研究是可用性測(cè)試、問(wèn)卷調(diào)查、后臺(tái)數(shù)據(jù)挖掘等研究手段難以企及的,因?yàn)槭亲钪苯拥姆答佊脩羰褂们闆r的手段。

2、通過(guò)眼動(dòng)研究,不但可以完整地還原測(cè)試者在各個(gè)頁(yè)面的注視軌跡,還可以通過(guò)劃分興趣分析測(cè)試者在各區(qū)域內(nèi)容的關(guān)注度。

3、眼動(dòng)研究提供的信息不只是人們是怎樣“看”東西這么簡(jiǎn)單,眼動(dòng)反映了人腦的信息處理過(guò)程,眼動(dòng)模式的特點(diǎn)與腦部的信息處理都有密切的關(guān)系。


 眼動(dòng)研究的具體價(jià)值的體現(xiàn):

獲取用戶瀏覽的行為和習(xí)慣

當(dāng)用戶打開(kāi)一個(gè)頁(yè)面,用戶看了些什么,沒(méi)有看什么。什么東西最先獲得用戶的關(guān)注?這些信息是很重要的,因?yàn)楹芏鄷r(shí)候用戶關(guān)注的東西與設(shè)計(jì)希望用戶看到的是不一樣的,這種差別會(huì)通過(guò)眼動(dòng)數(shù)據(jù)直接顯示出來(lái)。


幫助研究人員分析和澄清問(wèn)題

在可用性測(cè)試中,遇到用戶既無(wú)動(dòng)作也不說(shuō)話時(shí),研究人員是最為迷惑的。此時(shí)用戶很可能執(zhí)行任務(wù)受阻,而通過(guò)實(shí)時(shí)的眼動(dòng)記錄觀測(cè),研究人員可以間接地了解用戶的處境 - 用戶是在尋找什么東西,還是有什么東西令用戶困惑(來(lái)回注視),還是用戶忽視了相關(guān)的重要元素?研究人員可以帶著觀點(diǎn)假設(shè),開(kāi)展眼動(dòng)研究來(lái)驗(yàn)證或否決,發(fā)現(xiàn)導(dǎo)致問(wèn)題的真正原因。


 實(shí)現(xiàn)研究結(jié)果的可視化

呈現(xiàn)眼動(dòng)研究結(jié)果最常用到的是熱點(diǎn)圖,顧名思義,熱點(diǎn)圖呈現(xiàn)的是人們視線的熱點(diǎn),顏色越紅代表被聚集的越多。作為可視化手段起到了良好的信息傳達(dá)的作用。



腦電研究


腦電研究基于腦電波,腦電波是大腦在活動(dòng)時(shí),大量神經(jīng)元同步發(fā)生的突觸后電位經(jīng)總和后形成的,即由腦內(nèi)億萬(wàn)神經(jīng)元引起的頭皮表面的電位變化。含有大量的心理信息,測(cè)量腦電信號(hào)可繪制成腦電圖,以不同的波形反映出來(lái)。


不同的波形代表著不同的心理信息,比如:

α波

頻率為8~13Hz(平均數(shù)為10Hz),幅度為20~100μV。它是正常人腦電波的基本節(jié)律,如果沒(méi)有外加的刺激,其頻率是相當(dāng)恒定的。是大腦皮質(zhì)處于清醒、安靜、閉目狀態(tài)時(shí)腦電活動(dòng)的主要表現(xiàn),睜開(kāi)眼睛(受到光刺激)或接受其它刺激時(shí),α波即刻消失。

β波

頻率為14~30Hz,幅度為100~150μV。是大腦皮質(zhì)興奮的表現(xiàn),當(dāng)精神緊張和情緒激動(dòng)或亢奮時(shí)在額葉出現(xiàn)此波,當(dāng)人從噩夢(mèng)中驚醒時(shí),原來(lái)的慢波節(jié)律可立即被該節(jié)律所替代。

θ波

頻率為4~7Hz,幅度為5~20μV。在成年人意愿受挫、困倦、失望、抑郁等情緒刺激時(shí)以及精神病患者中這種波極為顯著。但此波為少年(10-17歲)的腦電圖中的主要成分。

這些不同的波形反映了測(cè)試者所處的心理狀態(tài)。


腦電研究是什么?

一般來(lái)說(shuō),原始的腦電波需要一些技術(shù)處理才能讀懂,借助腦電數(shù)據(jù)分析工具,我們可以把復(fù)雜的大腦波形整理成有一個(gè)起點(diǎn),然后是不同波形分布的雜合:


經(jīng)過(guò)更復(fù)雜的技術(shù)處理,我們甚至可以得到一條總體的波形圖:


腦電波(EEG)在醫(yī)學(xué)領(lǐng)域已經(jīng)應(yīng)用了幾十年,通過(guò)對(duì)腦電信號(hào)的處理與分析,我們能了解對(duì)象的認(rèn)知過(guò)程和情緒反應(yīng),目前已經(jīng)逐步商用化。

近些年,神經(jīng)營(yíng)銷(xiāo)學(xué)、神經(jīng)電影學(xué)楷書(shū)走進(jìn)人們的視野。前者通過(guò)腦電波等手段測(cè)量消費(fèi)者觀看廣告、描述產(chǎn)品時(shí)的腦電情況,以此來(lái)解釋、預(yù)測(cè)他們的消費(fèi)行為。后者采用腦成像技術(shù)等手段量化恐怖電影的效果,甚至考察觀眾們神經(jīng)活動(dòng)的同步性(群體卷入性)來(lái)檢查電影控制人們思維和情緒變化的能力。


腦電研究的應(yīng)用:

360度游戲研究


基于認(rèn)知神經(jīng)科學(xué),無(wú)需語(yǔ)言,獲知他們對(duì)產(chǎn)品的情緒、喜好、關(guān)注點(diǎn)、興奮度...因?yàn)樗芯康氖谴竽X的源頭。

除了學(xué)術(shù)界,全球眾多頂尖的游戲公司公認(rèn)情緒在游戲中的重要性,并致力于打造更加Emotional(情緒化的)游戲。

  • 并不是越積極越好

  • 必須能夠喚起強(qiáng)烈的情緒反應(yīng)

  • 讓玩家情緒不斷波動(dòng),正負(fù)情緒互相轉(zhuǎn)化


 一款成功的游戲:必須要讓玩家達(dá)到沉浸和心流情緒狀態(tài)。有三種衡量指標(biāo):


沉浸感(IMMERSION)

定義:參與、融入、代入感的程度

游戲體現(xiàn):故事性、技巧性、策略性、畫(huà)面效果、音效、風(fēng)格

心理體驗(yàn):強(qiáng)參與感、脫離現(xiàn)實(shí)、忘記時(shí)間、很上癮

情緒體現(xiàn):強(qiáng)烈的正負(fù)情緒的交替


情緒指數(shù)EMO.I

游戲引起玩家的情緒反應(yīng)。積極的情緒反應(yīng)體現(xiàn)玩家玩的非常開(kāi)心,而消極情緒反應(yīng)可能提示游戲讓玩家產(chǎn)生了受挫感。

 

心流體驗(yàn)(FLOW)

定義:非常專(zhuān)注,非常有動(dòng)力的全身投入,并非常享受的精神狀態(tài)。

游戲體現(xiàn):游戲機(jī)制、難易度平衡、目標(biāo)性、反饋。

心理體驗(yàn):持續(xù)專(zhuān)注、忘我投入、成就感。

情緒體現(xiàn):正向情緒為主,正負(fù)形撥動(dòng);緊張感積累,完成挑戰(zhàn)的成就感。


生理指標(biāo)

游戲帶給玩家生理上的緊張程度,SCL值越大,表示游戲越刺激,玩家玩的越緊張,而SCL越低,表示游戲可能給玩家?guī)?lái)了相對(duì)無(wú)聊的體驗(yàn)。


腦電波和生理指標(biāo)告訴你玩家的情緒狀態(tài)




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

文章來(lái)源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)




干貨預(yù)警 | 什么樣的設(shè)計(jì)是潮設(shè)計(jì)?

seo達(dá)人


圖片

 

這個(gè)主題其實(shí)我很早就想講了,因?yàn)槲野l(fā)現(xiàn)很多設(shè)計(jì)師的慣性,經(jīng)常會(huì)去X瓣X站里面找找當(dāng)下流行的風(fēng)格直接拿來(lái)使用,但卻并不了解這些風(fēng)格的本質(zhì)和設(shè)計(jì)含義,抄到最后就是四不像,它不能成為你思維和能力提升,反而會(huì)讓你對(duì)很多設(shè)計(jì)的見(jiàn)解處在表面停滯不前。

所以這次用時(shí)代來(lái)切分所有關(guān)于潮的風(fēng)格,一次性全部講給你們。今天的文章內(nèi)容較多,記得點(diǎn)贊收藏本篇文章,以后你們會(huì)感謝我的。

 

圖片

圖片圖片

 


我們先來(lái)講第一階段,國(guó)風(fēng)與民族文化

圖片

圖片

 

其實(shí)國(guó)風(fēng)不僅僅是我們中國(guó)人對(duì)本國(guó)民族文化的一種解釋?zhuān)總€(gè)國(guó)家都有著自己的國(guó)風(fēng),比如希臘文化、羅馬文化、瑪雅文化等等。國(guó)風(fēng)我們分為傳統(tǒng)、古典、現(xiàn)代。傳統(tǒng)對(duì)應(yīng)的是水墨丹青類(lèi)型,古典對(duì)應(yīng)的是中國(guó)歷代的朝代與民俗類(lèi)文化,現(xiàn)代對(duì)應(yīng)的是線條描邊和色塊涂抹等方式的畫(huà)面展現(xiàn)。

圖片

 

中國(guó)傳統(tǒng)繪畫(huà)以筆法為主導(dǎo),充分發(fā)揮墨法的功能。墨的濃淡變化就是色的層次變化,其潑墨與揮灑的筆墨之間流淌著豪邁和情緒化的特質(zhì),并且百試不爽,你可以把今年電影海報(bào)拿出來(lái)看下,10張有5張都是毛筆字體或者水墨類(lèi)型的。

而丹青,在現(xiàn)代設(shè)計(jì)時(shí)可以使用顏色的透明度的變化來(lái)增加畫(huà)面層次,讓整個(gè)作品清淡、素雅,更適合展現(xiàn)出一個(gè)畫(huà)面的優(yōu)雅和細(xì)節(jié)特質(zhì)。相比之下水墨粗狂豪邁,丹青更顯雅致飄逸。這點(diǎn)你在眾多古裝劇里看畫(huà)風(fēng)、看服飾顏色很容易能感受到其中的意思。

圖片

水墨丹青所需組成的部分,毛筆字、水墨、山水、彩繪等。

 

圖片

 

在中國(guó)傳統(tǒng)文化中,國(guó)風(fēng)也是有很多不同領(lǐng)域的范疇,比如中國(guó)傳統(tǒng)文化+古典+唯美=古風(fēng),武俠劇風(fēng)格和服飾居中,也有江湖快意恩仇!

而中國(guó)傳統(tǒng)文化+古典+小雅=雅致,更突出中國(guó)特有很多元素,被現(xiàn)在大量用到電商和產(chǎn)品包裝的設(shè)計(jì)中。

中國(guó)傳統(tǒng)文化+古典+大氣=國(guó)風(fēng),大氣磅礴,雄渾有力,電影或者大畫(huà)面毛筆字使用,張藝謀之前的很多古裝電影就大量使用的這種。

圖片

 

朝代組成的部分,如壁畫(huà)、宮廷建筑、服侍、花鳥(niǎo)、動(dòng)物(比如龍、鳳、鶴)、祥云等等。這里我要補(bǔ)充的是很多人一說(shuō)這個(gè)宮廷風(fēng),就聯(lián)想到了清朝的紫禁城,這其實(shí)不是完全的,只是說(shuō)清朝整個(gè)建筑和圖案性的顏色比較鮮艷,更適合現(xiàn)代化的融合,但其實(shí)如果你想展現(xiàn)不一樣國(guó)風(fēng)的話,應(yīng)該是將朝代的特質(zhì)多去了解。

圖片

比如我們?yōu)槭裁床挥锰瞥脑貋?lái)做一個(gè)唐朝的風(fēng)格呢,例如還有漢朝的、明朝的、宋朝的等等,這些都是代表著中國(guó)不同時(shí)期的朝代。

圖片

 

當(dāng)你去設(shè)計(jì)不同朝代的風(fēng)格時(shí),搜集他們朝代的服飾、建筑、器具上的圖案花紋,然后臨摹出來(lái),這些就是最好的素材和設(shè)計(jì)參考圖。

比如我們看上張?zhí)瞥瘓D的左右對(duì)比下,色彩、服飾上的元素幾乎就是直接挪用的。當(dāng)你參考這些圖案時(shí),最好先去了解下這些本身圖案的意思,古代的設(shè)計(jì)圖案時(shí)就跟我們現(xiàn)在設(shè)計(jì)LOGO是有故事和含意的。

圖片

比如上面的清代文官官服九品練雀,下面的是清代武官九品海馬,代表著不同的官品階位。

 

 

圖片

 

除了朝代其實(shí)還有各民族的文化都可以為我們的設(shè)計(jì)吸收出更好的創(chuàng)意來(lái)源,而這些圖案的設(shè)計(jì)大部分都是來(lái)自于他們的民族象征的圖騰、服飾圖案、頭冠花紋等等,比如之前花西子就有一款產(chǎn)品就是用的民族的文化去設(shè)計(jì)的,就非常有特征性。

這里我補(bǔ)了小知識(shí),其實(shí)這些民族在很早的時(shí)候都是國(guó)家,只是后來(lái)衰落經(jīng)過(guò)遷徙后變成了民族部落,比如傣族,公元1180年左右,現(xiàn)今西雙版納一帶的傣族領(lǐng)袖建立了景龍金殿國(guó),簡(jiǎn)稱景龍國(guó), 比如苗族的歷史可以追溯到5000年前的蚩尤九黎部落。光一個(gè)圖案有的時(shí)候就能追溯到很多的故事和歷史文化中,可見(jiàn)中華民族的瑰寶是一個(gè)可以可以源源不斷發(fā)掘的歷史。

圖片

 

國(guó)風(fēng)的現(xiàn)代風(fēng)是舍棄了其他風(fēng)格中煩瑣的圖案和形式,因?yàn)樽⒅鼐€條和色塊拼合的使用,勾描形象而不藻修飾與渲染烘托的畫(huà)法,配以古樸配色和紋理,呈現(xiàn)出最具中國(guó)傳統(tǒng)特色的國(guó)潮,大量被用到插畫(huà)與設(shè)計(jì)融合的海報(bào)中。

圖片

當(dāng)然國(guó)風(fēng)里面還有一些民俗文化,比如戲劇、剪紙等等豐富的民俗帶來(lái)了大量獨(dú)特的文化象征:中國(guó)紅、燈籠、福字、年畫(huà)、錦鯉、紅包等等。

圖片

新現(xiàn)代是將國(guó)風(fēng)其中的某單個(gè)元素放大化,表現(xiàn)極為現(xiàn)代手法,國(guó)風(fēng)中商用化的最常用的風(fēng)格。

圖片

有沒(méi)有發(fā)現(xiàn)國(guó)風(fēng)比你想象中更復(fù)雜,也比你想象中有更多文化和元素的挖掘,這些隨便融合到現(xiàn)在的設(shè)計(jì)中都是潮的代表。

 

第二階段黃金年代

圖片

 

黃金年代,其實(shí)就是對(duì)過(guò)去一種懷舊情節(jié)與形式主義運(yùn)動(dòng)的一種復(fù)古文化。但可別小看這個(gè)黃金年代,你去各大設(shè)計(jì)網(wǎng)站上搜索下,就知道沒(méi)有黃金年代,就沒(méi)有我們現(xiàn)在的市面上那么多的先鋒設(shè)計(jì)。

圖片

 

賽博朋克早80年代中期發(fā)展成為的亞文化,甚至一躍成為了主流文化的一部分,包括現(xiàn)在X音經(jīng)常教調(diào)色賽博朋克、或者AE后期做成賽博朋克街道,前段時(shí)間賽博朋克2077游戲的流行等。

圖片

賽博朋克給人一種虛擬、科技、扭曲、智能的感覺(jué),是因?yàn)樵谏鲜兰o(jì)60、70年代,二戰(zhàn)后期的冷戰(zhàn)和中東戰(zhàn)爭(zhēng)集中爆發(fā)加上工業(yè)后科技時(shí)代的帶來(lái),導(dǎo)致整個(gè)世界處在一個(gè)黑暗壓抑,科技爆炸,環(huán)保污染嚴(yán)重、人情社會(huì)冷漠的時(shí)候,所以這個(gè)時(shí)候人們渴望科技未來(lái)的發(fā)展,又對(duì)整個(gè)世界恐懼,當(dāng)矛盾和沖突不斷是創(chuàng)作科幻藝術(shù)絕佳的一個(gè)形成因素。

你看到的很多風(fēng)格,就像每一幅藝術(shù)家留下來(lái)的遺作,都有著代表那個(gè)時(shí)代的悲涼和無(wú)奈,人們只能通過(guò)某種形式是展現(xiàn)出來(lái),于是繪畫(huà),音樂(lè)、電影成為了人們最主要的情緒宣泄方式。

 

圖片

 

賽博朋克在設(shè)計(jì)上的表現(xiàn)形式往往以藍(lán)紫的暗冷色調(diào)為主,搭配霓虹光感的對(duì)比色,用錯(cuò)位,拉伸,扭曲等故障感圖形體現(xiàn)電子科技的未來(lái)感,加街道大廈建筑等,很符合現(xiàn)在年輕人標(biāo)榜自我的價(jià)值觀。

圖片

 

蒸汽波是賽博朋克文化的一種衍生,風(fēng)格中充滿了故障、古典雕塑、80年代動(dòng)畫(huà)形象、馬賽克、電子、光碟拼合的一種無(wú)實(shí)物感形式、蒸汽波平面設(shè)計(jì)風(fēng)格,是在網(wǎng)絡(luò)誕生的流派。

圖片

 

蒸汽波的圖像,在2010年代初在分享網(wǎng)站已經(jīng)普遍散播。它宣揚(yáng)對(duì)復(fù)古文化,懷舊文物和批量生產(chǎn)的懷念,當(dāng)然還有對(duì)消費(fèi)資本主義和流行文化的技術(shù),上世紀(jì)80年代嬉皮士文化的批評(píng)和諷刺。

圖片

在商用上,娛樂(lè)性產(chǎn)業(yè)在這種風(fēng)格上的使用上尤為明顯。

圖片

 

Y2K 就是 2000年,俗稱千禧風(fēng)。人們?cè)诋?dāng)時(shí)把未來(lái)的世界幻想成了一個(gè)信息科技極為發(fā)達(dá)的夢(mèng)中烏托邦。

圖片

 

風(fēng)格經(jīng)常出現(xiàn)技術(shù)不成熟的科幻場(chǎng)景、復(fù)古與未來(lái)感。圍繞未來(lái)元素、夸張亮色、金屬、科技、透明、PVC。但是你可以找找2000年的畫(huà)風(fēng),純畫(huà)風(fēng)放到現(xiàn)在其實(shí)是不夠商業(yè)化的,需要我們用現(xiàn)代化的設(shè)計(jì)和其他風(fēng)格進(jìn)行一定的融合才可以。

圖片

設(shè)計(jì)是藝術(shù)化的商用呈現(xiàn),所以涉及領(lǐng)域不能片面化,應(yīng)該廣泛化和吸取百家之長(zhǎng),任何設(shè)計(jì)的成功都不是一個(gè)領(lǐng)域造成的,一定是融合。

圖片

 

哥特式(Goth)最早是文藝復(fù)興時(shí)期被用來(lái)區(qū)分中世紀(jì)時(shí)期(公元5-15世紀(jì))的藝術(shù)風(fēng)格。

圖片

 

以死亡、頹廢、古堡、吸血鬼、蝙蝠、紅玫瑰、十字架、建筑、哥特式等為標(biāo)志性元素,由于本身存在的黑暗特質(zhì),色彩及元素不便于商業(yè)化,但其哥特的字體卻被大量使用。

圖片

哥特式的來(lái)源在于禁欲與死亡。人類(lèi)認(rèn)為以自由精神來(lái)超越對(duì)死亡的恐懼和困擾,通過(guò)藝術(shù)的表現(xiàn)可以將死亡的恐怖轉(zhuǎn)化為美感。蝙蝠俠三部曲就是典型的哥特式風(fēng)格代表,重金屬搖滾人最?lèi)?ài)的風(fēng)格。

 

圖片

 

像素風(fēng)格屬于一種形式的數(shù)碼藝術(shù) ,像素是組成電腦數(shù)位影像的最小單位。放大后的這些小方塊稱之為像素(Pixel),核心在于早期游戲機(jī)的畫(huà)面,是一種圖標(biāo)風(fēng)格的圖像,更強(qiáng)調(diào)清晰的輪廓、明快的色彩,幾乎不用混疊方法來(lái)繪制光滑的線條,同時(shí)它的造型比較卡通。

圖片

組成部分:像素化,輪廓清晰,卡通,剛結(jié)束不久的創(chuàng)造營(yíng)綜藝節(jié)目就是用的這樣的風(fēng)格。

圖片

 

波普風(fēng)格是發(fā)源于反對(duì)高端藝術(shù)和精英主義階層的藝術(shù)運(yùn)動(dòng),采用大眾更容易接觸的信息和畫(huà)面體現(xiàn),招貼畫(huà)風(fēng)格的一種。

圖片

 

比如波點(diǎn)元素、漫畫(huà)風(fēng)格、重復(fù)圖像、手寫(xiě)體、夸張明亮的色塊碰撞等。

圖片

 

早期奇葩說(shuō)就是用的這個(gè)風(fēng)格,順便推薦幾個(gè)綜藝節(jié)目的視覺(jué)設(shè)計(jì),一定要去看看里面不管節(jié)目場(chǎng)景還有一些物料和展示的設(shè)計(jì),對(duì)你真的有幫助《熱血街舞團(tuán)》《奇葩說(shuō)》《即刻電音》《樂(lè)隊(duì)的夏天》《哈哈哈哈哈哈》等。

圖片

 

拼貼風(fēng)格的英文其實(shí)就是膠水的意思,藝術(shù)的起源是立體主義繪畫(huà)運(yùn)動(dòng)的創(chuàng)作。

圖片

 

模糊了藝術(shù)中真實(shí)與幻象的區(qū)別,企圖打破二度平面的繪畫(huà),制造空間虛實(shí)的視覺(jué)效果。拼貼是一種比較隨性的一種表現(xiàn),它可以是不具任何意義的,自己覺(jué)得不錯(cuò)就行了。

圖片

 

民國(guó)風(fēng)格,20世紀(jì)30年代是民國(guó)設(shè)計(jì)最輝煌的時(shí)代,商業(yè)與文化劇烈碰撞,漢文化與西方文化融匯,創(chuàng)意、美學(xué)表現(xiàn)極其豐富。

圖片

 

品牌名和產(chǎn)品比例最大,信息類(lèi)文字較小,文字包圍在圖案四周;也有一些廣告將文字置于畫(huà)面四周的框框里,色彩不會(huì)使用亮色和過(guò)飽和性,其版式編排與維多利亞風(fēng)格非常相似。

圖片

第三階段黃金年代。

圖片

 

時(shí)代驅(qū)使現(xiàn)代,時(shí)代變化最大的特征是在于審美與認(rèn)知的改變,還有一個(gè)更重要的原因就是,越來(lái)越商業(yè)化。

圖片

 

極簡(jiǎn)化平面設(shè)計(jì)風(fēng)格的核心是圍繞信息內(nèi)容本身而呈現(xiàn)的,去風(fēng)格化設(shè)計(jì)。

圖片

 

設(shè)計(jì)不再作為獨(dú)立于內(nèi)容之外的元素存在,而將著眼于內(nèi)容本身,為用戶打造直觀的視覺(jué)體驗(yàn)。

圖片

 

減少干擾,讓信息有效傳達(dá)給用戶正是極簡(jiǎn)化設(shè)計(jì)所推崇的,負(fù)空間、增加留白,極簡(jiǎn)線條、減少顏色以及不必要的裝飾等手段在設(shè)計(jì)中體現(xiàn)。

圖片

 

孟菲斯風(fēng)格打破正常的配色規(guī)律,使用多種鮮艷明亮的色彩,構(gòu)圖上大量運(yùn)用集合線條圖案,運(yùn)用黑色的描邊結(jié)合直線、波浪、3D圖形。

圖片

草莓音樂(lè)節(jié)連續(xù)好幾年都是用的這樣的風(fēng)格,其實(shí)跟更重要的原因是輕量化,因?yàn)楝F(xiàn)代碎片化的信息,人們?cè)絹?lái)越?jīng)]有時(shí)間或者不想再去看太復(fù)雜太有深度的東西,導(dǎo)致了當(dāng)下輕量化設(shè)計(jì)的流行。

 

圖片

 

還有關(guān)于倍速播放、輕量化設(shè)計(jì)、圖像設(shè)計(jì)更娛樂(lè)化更是折射了當(dāng)下經(jīng)濟(jì)結(jié)構(gòu)、年輕人生活方式、高速互聯(lián)的普遍、碎片信息,躺平原因等社會(huì)時(shí)代因素的縮影。

圖片

 

MBE風(fēng)格,標(biāo)志性的人物就是來(lái)自法國(guó)巴黎的設(shè)計(jì)師MBE。

圖片

一般是以粗而圓的線條勾勒輪廓,這一點(diǎn)類(lèi)似于簡(jiǎn)筆畫(huà),也類(lèi)似于單線條畫(huà)。越粗的線條在表現(xiàn)力方面會(huì)越接近可愛(ài)感,線條的轉(zhuǎn)折過(guò)渡很圓潤(rùn),幾乎看不到尖銳的直角。

圖片

 

填色方面的特點(diǎn)非常明顯,填色的色塊要偏移原有輪廓一些,以此來(lái)塑造高光和陰影效果,其實(shí)這個(gè)風(fēng)格跟孟菲斯的手法是非常接近的。

圖片

 

立體主義,將物體以不同角度置于同一個(gè)畫(huà)面之中,表現(xiàn)出對(duì)象完整的形象。

圖片

立體主義創(chuàng)作的主要特征,即在畫(huà)面上將一切物體形象破壞和肢解,然后再加以主觀的拼湊、組合,以求所謂立體地表現(xiàn)出物體的不同側(cè)面。就是在平面上表現(xiàn)出二度和三度空間。

圖片

 

畢加索和布拉克就是立體主義的代表性人物。

圖片

 

歐普藝術(shù)是利用人類(lèi)視覺(jué)上的錯(cuò)視所繪制而成的繪畫(huà)藝術(shù)。因此歐普藝術(shù)又被稱作“視覺(jué)效應(yīng)藝術(shù)”或者“光效應(yīng)藝術(shù)”。

圖片

 

是利用人類(lèi)視覺(jué)上的錯(cuò)視所繪制而成的繪畫(huà)藝術(shù)。它主要采用黑白或者彩色幾何形體的復(fù)雜排列、對(duì)比、交錯(cuò)和重疊等手法造成各種形狀和色彩的騷動(dòng),有節(jié)奏的或變化不定的活動(dòng)的感覺(jué),給人以視覺(jué)錯(cuò)亂的印象。

圖片

 

歐普平面設(shè)計(jì)風(fēng)格就是要通過(guò)設(shè)計(jì)達(dá)到一種視知覺(jué)的運(yùn)動(dòng)感和閃爍感,使視神經(jīng)在與畫(huà)面圖形的接觸過(guò)程中產(chǎn)生令人眩暈的光效應(yīng)現(xiàn)象與視幻效果。

圖片

 

極繁主義,平面設(shè)計(jì)風(fēng)格繁瑣、華麗的設(shè)計(jì)風(fēng)格,運(yùn)用大膽的顏色,嘗試各種復(fù)雜的圖案,構(gòu)建迷幻主題。

圖片

“有序的混亂”是一個(gè)絕妙的極繁設(shè)計(jì)手法。各種色彩和圖案的重復(fù)組合能夠有效吸引觀眾注意并傳達(dá)設(shè)計(jì)信息。但由于極繁設(shè)計(jì)的前期整理、耗時(shí)過(guò)長(zhǎng),畫(huà)面極其雜,商業(yè)操作復(fù)雜一些,很多設(shè)計(jì)師都不愿意去做這樣的設(shè)計(jì)。

 

圖片

 

新丑風(fēng),能在當(dāng)今浮躁的社會(huì)還能堅(jiān)持去打破設(shè)計(jì)規(guī)則的設(shè)計(jì)師高田唯。

圖片有沖突感的顏色、強(qiáng)制變形的字體,還有故意的印刷偏差和奇怪的排版。

 

圖片

這個(gè)現(xiàn)在被廣泛以及大量的使用,內(nèi)行看門(mén)道,與其他設(shè)計(jì)技法和設(shè)計(jì)模式相比,其省時(shí)省事的設(shè)計(jì)方法也迎合這個(gè)更加浮躁求速的時(shí)代。

 

圖片

第四階段,多樣跨界和未來(lái)

圖片

 

以薩爾瓦多·達(dá)利為超現(xiàn)實(shí)主義代表,將現(xiàn)實(shí)觀念與潛意識(shí)及夢(mèng)的經(jīng)驗(yàn)相融合展現(xiàn)人類(lèi)深層心理中的形象世界。

圖片

可以說(shuō)夢(mèng)中的世界,也可以說(shuō)是一種他認(rèn)為的心理真實(shí)的彼岸世界。這個(gè)正是最近想做的一件事情,把夢(mèng)中的場(chǎng)景繪制或者通過(guò)合成的方式放到海報(bào)展現(xiàn)出來(lái),生活應(yīng)該是讓設(shè)計(jì)變得有趣。

 

圖片

隨著計(jì)算機(jī)技術(shù)的發(fā)展推動(dòng),C4D的普及帶給了廣大設(shè)計(jì)師新的思路,無(wú)論是色彩、光影還是質(zhì)感都更加絲滑。

 

圖片酸性視覺(jué)的特征就是大雜燴風(fēng)格,混合了蒸汽波、賽博朋克、超現(xiàn)實(shí)主義、科幻未來(lái)主義、電子復(fù)古、歐普藝術(shù)等等的一種融合性設(shè)計(jì),組合部分就是鐳射金屬、霓虹色彩、玻璃質(zhì)感、哥特字體、鋒利的幾何圖形。

 

圖片

由復(fù)古迷幻融合到超現(xiàn)實(shí)主義的風(fēng)格,融入了更多“虛無(wú)縹緲”和“先進(jìn)新潮”的超現(xiàn)實(shí)主義元素,也是一個(gè)在現(xiàn)實(shí)中得不到追求的,從夢(mèng)中獲取精神安慰的風(fēng)格。

 

我們將所有關(guān)于潮的時(shí)代和風(fēng)格特征全部講完,目的不是講歷史和展現(xiàn)風(fēng)格技巧,而是要明白我們需要學(xué)習(xí)的其實(shí)有很多,未來(lái)的設(shè)計(jì)一定是集風(fēng)格與領(lǐng)域精華所長(zhǎng)融合下的就是潮的設(shè)計(jì)。

 

原文地址:修先森撩設(shè)計(jì)(公眾號(hào))

作者:修先森

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》干貨預(yù)警 | 什么樣的設(shè)計(jì)是潮設(shè)計(jì)?

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


撕開(kāi)B端封印,數(shù)字時(shí)代下的可視化構(gòu)建

seo達(dá)人


圖片

接下來(lái)我會(huì)從三個(gè)方面來(lái)講解如何構(gòu)建可視化:

  • 靈感需要迸發(fā),更需要積累
  • 從零到一設(shè)計(jì)驅(qū)動(dòng)
  • 設(shè)計(jì)度量

圖片

 

一、靈感需要迸發(fā),更需要積累

1.1  數(shù)字時(shí)代下,99%的問(wèn)題都是舊問(wèn)題

數(shù)字時(shí)代下仍有信息不對(duì)稱的情況,尤其是關(guān)鍵技術(shù)和設(shè)計(jì)上的問(wèn)題,但是如果你用心尋找,就會(huì)發(fā)現(xiàn)你的新問(wèn)題則是別人很久之前的舊問(wèn)題了。所以要做個(gè)有心人。

圖片

但是問(wèn)題又來(lái)了,有時(shí)候真的不知道該怎么找、去哪找?這是個(gè)很常見(jiàn)的問(wèn)題。因?yàn)榭梢暬槐炔瀹?huà)、平面等這些成熟的領(lǐng)域,他是比較小眾的,所以靈感以及素材的搜尋是一個(gè)令新手設(shè)計(jì)師頭疼的事情,再加上對(duì)關(guān)鍵詞的熟悉程度不夠,導(dǎo)致很多設(shè)計(jì)師只停留在【可視化】這個(gè)關(guān)鍵詞里,最后感覺(jué)搜來(lái)搜去都是見(jiàn)過(guò)的圖,沒(méi)有新意。

圖片

 

1.2  明確目標(biāo),知道自己想要找什么
互聯(lián)網(wǎng)信息太多了,漫無(wú)目的的找靈感,只會(huì)浪費(fèi)時(shí)間,一會(huì)看到這張圖好看,一會(huì)看到那張圖好看。不知不覺(jué)幾個(gè)小時(shí)就過(guò)去了。

 

1.3  建立關(guān)鍵詞詞庫(kù)

確定目標(biāo)后,就要細(xì)化關(guān)鍵詞了。怎么建立關(guān)鍵詞詞庫(kù)呢?

關(guān)鍵詞詞庫(kù)由3部分組成:終端、設(shè)計(jì)類(lèi)型、業(yè)務(wù)類(lèi)型。

圖片

  • 終端:大屏、移動(dòng)端、web 等等。
  • 設(shè)計(jì)類(lèi)型:每個(gè)細(xì)分的數(shù)據(jù)可視化類(lèi)別都是有一些專(zhuān)有名詞的,比如最近比較熱門(mén)的車(chē)載HMI系統(tǒng),那他的類(lèi)型關(guān)鍵詞就是 HMI。通過(guò)這些關(guān)鍵詞,你會(huì)搜到更精準(zhǔn)的結(jié)果。設(shè)計(jì)類(lèi)型關(guān)鍵詞比如:AR/VR、HUD、HMI、FUI等等,你要了解你們公司相關(guān)類(lèi)型的關(guān)鍵詞,記錄下來(lái)。以及跟你們有關(guān)聯(lián)的,都記下來(lái),補(bǔ)充自己的詞庫(kù)。
  • 業(yè)務(wù)類(lèi)型:智慧城市、生物醫(yī)療、監(jiān)控部署等等。

這三類(lèi)單獨(dú)或組合進(jìn)行搜索,就會(huì)看到更多可視化產(chǎn)品了。把關(guān)鍵詞詞庫(kù)建立起來(lái)后,就可以去常用的網(wǎng)站上搜索了,最好用的還是 behance 和 Pinterest。

 

1.4  除了常用的設(shè)計(jì)網(wǎng)站,還有哪里可以看?

企業(yè)官網(wǎng):很多做數(shù)據(jù)可視化的公司,會(huì)在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點(diǎn)、業(yè)務(wù)實(shí)力的案例,而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計(jì)作品了, 所以但凡有案例展示的官網(wǎng),案列基本都是最典型最好的設(shè)計(jì),所以從這些案例中找靈感,也是一個(gè)有意思且有效的方法和途徑。

 

1.5  你看到了別人看不到的,設(shè)計(jì)才能有所不同

總結(jié)一句話:你看到了別人看不到的,設(shè)計(jì)才能有所不同。如果你和別人看到的是一樣的,你怎么比別人做的更優(yōu)秀?

圖片

 

1.6  興趣推送

經(jīng)常刷短視頻/新聞網(wǎng)站的應(yīng)該知道,系統(tǒng)會(huì)根據(jù)你的點(diǎn)贊、收藏、瀏覽等數(shù)據(jù)來(lái)給你安排后面的內(nèi)容推送,以保證給你推送更精準(zhǔn)的內(nèi)容。設(shè)計(jì)網(wǎng)站亦是如此,behance 等網(wǎng)站上也都是千人千面,它會(huì)根據(jù)你的點(diǎn)贊收藏等來(lái)讀取你的喜好,進(jìn)而推送更精準(zhǔn)的作品。所以假設(shè)你是一個(gè)B端數(shù)據(jù)可視化方向的,你就經(jīng)常搜、點(diǎn)贊收藏相關(guān)作品,之后你的首頁(yè)出現(xiàn)相關(guān)內(nèi)容的幾率也會(huì)變大。

圖片

 

1.7  定期清理,更新迭代

最后一點(diǎn),這個(gè)也是好多設(shè)計(jì)師的通病,收藏即學(xué)到。

圖片

靈感庫(kù)要求精而不是多,每隔一段時(shí)間,回來(lái)翻一翻自己之前收藏的作品,會(huì)發(fā)現(xiàn)有些作品自己已經(jīng)看不上了,因?yàn)樵谧鲮`感收集的過(guò)程中,我們的審美會(huì)自然有所提高,當(dāng)輸入的作品樣本越來(lái)越多,我們對(duì)作品評(píng)價(jià)的維度也會(huì)更多,之前那些覺(jué)得好的作品,現(xiàn)在看來(lái)也就會(huì)有缺陷和不滿,這是一個(gè)很正向的結(jié)果,成長(zhǎng)就是一個(gè)不斷剔除的過(guò)程。刪掉那些自己覺(jué)得不滿意的作品,添加更符合自己當(dāng)前審美的作品到靈感庫(kù)里。

這樣慢慢完善你的地基,才能更高的向上走。

 

二、從零到一  設(shè)計(jì)驅(qū)動(dòng)

講完第一部分,我們開(kāi)始搭建產(chǎn)品。

我負(fù)責(zé)從零到一的項(xiàng)目大大小小的得有10來(lái)個(gè)了,我認(rèn)為在產(chǎn)品整個(gè)產(chǎn)品周期中設(shè)計(jì)師的話語(yǔ)權(quán)最高的時(shí)候就是項(xiàng)目初期,是可以做到設(shè)計(jì)驅(qū)動(dòng)的。既然設(shè)計(jì)可以有足夠的的話語(yǔ)權(quán),你就得規(guī)劃好未來(lái)的設(shè)計(jì)走向。

產(chǎn)品初期,經(jīng)常會(huì)有幾個(gè)爭(zhēng)議比較大的問(wèn)題,我們來(lái)聊一下。

 

2.1  設(shè)計(jì)先行還是調(diào)研先行?

這是新項(xiàng)目必須要做的選擇題,再講之前你先想一下,如果是你,你會(huì)如何選擇?

圖片

我的觀點(diǎn)是設(shè)計(jì)先行。(當(dāng)然設(shè)計(jì)先行是建立在你至少對(duì)這個(gè)項(xiàng)目的行業(yè)有個(gè)簡(jiǎn)單的了解之后,先設(shè)計(jì)再用戶調(diào)研),為什么呢?因?yàn)槿绻脩粽{(diào)研先行的話,用戶只會(huì)反饋當(dāng)下最想要的東西,從而有可能給你帶來(lái)誤導(dǎo)。就比如我們經(jīng)常舉的一個(gè)例子:汽車(chē)出來(lái)之前,人們只想要一匹更快的馬。

我們要解決的不是用戶當(dāng)下想要的東西,而是痛點(diǎn)背后用戶真正需要的東西是什么。在 0-1 的這種創(chuàng)造性的項(xiàng)目,往往設(shè)計(jì)者才是當(dāng)下最懂產(chǎn)品的人,你把決策權(quán)交給一些不懂產(chǎn)品的人,做到最后只能是迷失了方向,鍋還是設(shè)計(jì)來(lái)背。所以一開(kāi)始設(shè)計(jì)師要把決策權(quán)拿在手中,掌握航向。

 

2.2  設(shè)計(jì)先行還是規(guī)范先行?

這個(gè)問(wèn)題在現(xiàn)在看來(lái)相對(duì)比較統(tǒng)一,但有的同學(xué)還是有疑惑,所以我拿出來(lái)再跟大家聊一下。

圖片

首先我的觀點(diǎn)是設(shè)計(jì)先行,在設(shè)計(jì)之前就定好規(guī)范的基本都是自己YY的,返工率極高。等你在做具體設(shè)計(jì)的時(shí)候就知道之前做的規(guī)范都是白費(fèi)力氣了。一般都會(huì)選用在項(xiàng)目完成之后或者主風(fēng)格及主要頁(yè)面完成后再輸出規(guī)范,這樣既可以減少規(guī)范的改動(dòng),也可以保證后面功能延用規(guī)范,一舉兩得。

當(dāng)然了,設(shè)計(jì)規(guī)范不是所有項(xiàng)目都要有的,它是為了減少工作而不是增加工作,如果是一次性項(xiàng)目,就不需要再額外花費(fèi)精力去輸出規(guī)范了,浪費(fèi)資源~

 

2.3  完成和完美那個(gè)更重要?

現(xiàn)在都是爭(zhēng)分奪秒的時(shí)代,任務(wù)是無(wú)止境的,沒(méi)有做完的時(shí)候。造成這個(gè)局面的無(wú)非就是一個(gè)問(wèn)題:時(shí)間不夠用。通常的做法就是先完成再迭代,做產(chǎn)品久了你就會(huì)發(fā)現(xiàn),完成比完美更重要,不完美你還可以再迭代,完不成就有可能錯(cuò)過(guò)一個(gè)風(fēng)口,從而失去了變完美的可能~

圖片

聊完這三個(gè)問(wèn)題,我們?cè)谠O(shè)計(jì)的時(shí)候也要有一些注意項(xiàng),真正的做到設(shè)計(jì)驅(qū)動(dòng)。

 

2.4  把復(fù)雜變得清晰簡(jiǎn)單而且美

對(duì)于設(shè)計(jì)師來(lái)說(shuō),我們的任務(wù)就是把復(fù)雜問(wèn)題變得清晰簡(jiǎn)單而且美,所以我們應(yīng)該成為企業(yè)和客戶之間溝通的“架橋人”。通過(guò)設(shè)計(jì)的方法,把無(wú)形的、復(fù)雜的技術(shù),通過(guò)有形的、可視化的方式展示出來(lái),讓客戶更直觀、清晰的感受到產(chǎn)品的功能,看得懂其在業(yè)務(wù)場(chǎng)景中產(chǎn)生的價(jià)值。

 

2.5  轉(zhuǎn)換視角,建立共鳴

站在客戶視角,聚焦客戶關(guān)注的核心問(wèn)題,通過(guò)情景把內(nèi)容有序組織起來(lái),快速與客戶建立共鳴,有效降低內(nèi)容理解難度。

 

2.6  產(chǎn)品架構(gòu)可以不那么復(fù)雜

把復(fù)雜的業(yè)務(wù)/功能簡(jiǎn)單化、傻瓜化,最大的降低學(xué)習(xí)成本,能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內(nèi)了解你的產(chǎn)品是做什么的、有什么功能,你就成功了。

圖片

 

2.7  大膽隱藏冗余內(nèi)容

B 端項(xiàng)目中內(nèi)容量是巨大的,面對(duì)龐雜的信息,去粗取精,提煉各場(chǎng)景的核心內(nèi)容,避免冗余信息阻礙內(nèi)容有效傳達(dá)。話術(shù)語(yǔ)言不單要簡(jiǎn)單易懂,還要嚴(yán)格控制文字長(zhǎng)度,保證內(nèi)容可以被快速掃描和理解。

 

2.8  尊重用戶習(xí)慣

不要妄想改變用戶養(yǎng)成的慣性思維,你要記住慣性思維大于設(shè)計(jì)思維,他的閱讀習(xí)慣、操作習(xí)慣都是不易改變的,不要為了個(gè)性化而嘗試去改變,大部分情況下結(jié)果不會(huì)是那么的理想,除非你有極大的把握。

圖片

 

2.9  選用合適的圖表

這個(gè)是常提到的,我就在這里簡(jiǎn)單給大家提個(gè)醒。比如做數(shù)據(jù)對(duì)比,柱狀圖更能清晰表達(dá)出用戶想要的結(jié)果,你卻非要放個(gè)酷炫的雷達(dá)圖,他的本質(zhì)目的都沒(méi)達(dá)到,要美觀有何用?

每個(gè)圖表都適合哪些場(chǎng)景使用,像 antv、hicharts 等都有介紹,我就不一一贅述了,我之前也寫(xiě)過(guò)一篇關(guān)于如何合理利用圖表的文章,大家有興趣的可以去看一下。

 

三、設(shè)計(jì)度量

產(chǎn)品設(shè)計(jì)的好與壞我們需要去驗(yàn)證、去度量。我們?cè)趺慈ヲ?yàn)證可視化的好與壞呢?

美與丑也是主觀的,沒(méi)有絕對(duì)的美,也沒(méi)有絕對(duì)的丑。一個(gè)產(chǎn)品,總會(huì)有人喜歡有人不喜歡,但是我們要迎合大多數(shù)人的審美。

所以就需要一個(gè)方法論來(lái)驗(yàn)證產(chǎn)品的好與壞,現(xiàn)在各大廠都在做自己的一套產(chǎn)品驗(yàn)證的方法論,阿里在這方便算是國(guó)內(nèi)做的不錯(cuò)的,我舉幾個(gè)常用的度量模型。

  • 阿里云:UES
  • 螞蟻金服:PTECH與易用度
  • 1688:五度模型
  • 優(yōu)酷:DES

圖片

UES 目前是國(guó)內(nèi)最好的,在 5 月份的阿里設(shè)計(jì)周上也正式對(duì)外講解了 UES 模型。我拿阿里云的 UES 簡(jiǎn)單講一下吧,這么多度量模型,無(wú)論他的方法、維度有多不同,但他們的目的是相同的:通過(guò)模型來(lái)度量設(shè)計(jì)成果。

  • 易用性:易操作性、易學(xué)性、易見(jiàn)性 …
  • 一致性:整體樣式、通用框架、常用場(chǎng)景及組件 …
  • 任務(wù)效率:任務(wù)完成率、任務(wù)完成時(shí)間、功能使用率 …
  • 性能:首屏渲染時(shí)間、API 請(qǐng)求響應(yīng)時(shí)間、頁(yè)面請(qǐng)求響應(yīng)時(shí)間 …
  • 滿意度:產(chǎn)品滿意度 …

UES 分為 5 個(gè)模塊,這 5 項(xiàng)是整個(gè)產(chǎn)品生命周期需要驗(yàn)證的。

關(guān)于 UES 我就介紹到這里吧,UES 模型要是展開(kāi)講的話,半天都講不完,感興趣的話可以去阿里云官方發(fā)布的 UES 模型的相關(guān)資料中深度研究一下,看看適不適合自己的產(chǎn)品。

上面是度量產(chǎn)品的模型,接下來(lái)針對(duì)我們 B 端設(shè)計(jì)師,我們也要有一些指標(biāo)來(lái)度量自己是否合格。

 

3.1  設(shè)計(jì)效率

現(xiàn)在內(nèi)卷盛行的時(shí)代,各大廠都在講人效,畢竟時(shí)間才是最珍貴的,所以現(xiàn)在都在想方設(shè)法的提高人效。而且 B 端相對(duì) C 端來(lái)說(shuō),可以有更多自動(dòng)化的工具。

舉個(gè)我公司的例子,我剛?cè)サ臅r(shí)候基本沒(méi)有自動(dòng)化工具,每個(gè)設(shè)計(jì)師每天也都在忙碌,誰(shuí)也沒(méi)偷懶閑著。但是我發(fā)現(xiàn)有很多重復(fù)性的體力勞動(dòng)是不需要多少思考就能完成的,但是卻耗費(fèi)了將近 1/3 的時(shí)間。所以我就在想如何提高人效,把一些體力勞動(dòng)用一些工具來(lái)代替,這樣就能釋放設(shè)計(jì)資產(chǎn),去做更重要的事情。

當(dāng)時(shí)就做了第一個(gè)自動(dòng)化的工具:設(shè)計(jì)系統(tǒng),現(xiàn)在大家對(duì)這個(gè)詞應(yīng)該不陌生,但是我們剛開(kāi)始做的時(shí)候比較早,還沒(méi)有一些比較完善的設(shè)計(jì)系統(tǒng)供我們參考,所以我們也算是前幾批摸索設(shè)計(jì)系統(tǒng)的團(tuán)隊(duì)。設(shè)計(jì)系統(tǒng)做好后是可以把這1/3 的設(shè)計(jì)時(shí)間節(jié)省了下來(lái),而且團(tuán)隊(duì)的規(guī)范性更加統(tǒng)一。

后面的話我們也是做了一些其他的自動(dòng)化工具,比如結(jié)合一些插件做到 icon、組件等發(fā)布的自動(dòng)化,并且與研發(fā)同學(xué)打通,有相應(yīng)的自動(dòng)化提醒工具,這樣也節(jié)省了與研發(fā)的溝通成本。

在工作中,流程上能減少一步就是成功,慢慢來(lái),萬(wàn)里長(zhǎng)征就是一步一步走出來(lái)的。

 

3.2  增長(zhǎng)設(shè)計(jì)

增長(zhǎng)這個(gè)詞來(lái)源于【增長(zhǎng)黑客】這本書(shū),顧名思義這個(gè)詞的就是通過(guò)設(shè)計(jì)來(lái)促進(jìn)產(chǎn)品增長(zhǎng)。

這個(gè)詞用在 C 端上比較多,因?yàn)?C 端可驗(yàn)證的方法比較多,見(jiàn)效快,所以我們常見(jiàn)的一些增長(zhǎng)設(shè)計(jì)的案例都是關(guān)于 C 端的,而 B 端的話,受限制的因素較多,設(shè)計(jì)只是影響增長(zhǎng)的一部分,而且見(jiàn)效慢。

但是雖說(shuō)影響因素多、見(jiàn)效慢,我們還是可以抓住機(jī)會(huì)、多去嘗試一些方法來(lái)做到設(shè)計(jì)增長(zhǎng)。我這個(gè)方法不行,我就換一種嘗試。大家都是在摸索中過(guò)河~

 

3.3  為業(yè)務(wù)賦能

所有的設(shè)計(jì)都是要為業(yè)務(wù)賦能、為商業(yè)買(mǎi)單。我們?cè)O(shè)計(jì)的本質(zhì)就是為用戶解決問(wèn)題,讓用戶以最直觀的方式理解產(chǎn)品。不要為了所謂“我認(rèn)為很美”而與業(yè)務(wù)背道而馳。

 

3.4  體驗(yàn)創(chuàng)新

用戶體驗(yàn)設(shè)計(jì)師會(huì)越來(lái)越重要,近兩年逐步被重視,而且未來(lái)幾年會(huì)越來(lái)越重視。行業(yè)內(nèi)需要更多動(dòng)腦的人而不是僅僅會(huì)動(dòng)手的人。

現(xiàn)在到了互聯(lián)網(wǎng)下半場(chǎng),拼的不僅是功能,用戶體驗(yàn)的重視程度已經(jīng)被提升了上來(lái),在工作中的占比也越來(lái)越重。

再加上現(xiàn)在這個(gè)超級(jí)內(nèi)卷的時(shí)代,你不提升,你的競(jìng)爭(zhēng)對(duì)手就把你干掉了。而且你如果只是一成不變的維護(hù)老版本,你去下家面試的時(shí)候都沒(méi)有拿得出手的產(chǎn)品。

 

3.5  善用工具

現(xiàn)在各種辦公類(lèi)工具、軟件層出不窮,而且很多工具是比較類(lèi)似的,有的設(shè)計(jì)師再選工具的時(shí)候就很糾結(jié),我認(rèn)為完全沒(méi)必要糾結(jié),首先你要明確我想要達(dá)到什么目的,只要某個(gè)軟件滿足著你的需求就可以用。

工具是為人服務(wù)的,我們的設(shè)計(jì)軟件從 PS – Sketch – Figma,無(wú)論怎么變化總要圍繞一個(gè)目的:更高效的完成工作。

尤其是一些自動(dòng)化工具,現(xiàn)在人工智能升級(jí)很快,要多關(guān)注設(shè)計(jì)自動(dòng)化方面的工具,讓他來(lái)解放我們的雙手。

 

總結(jié)

最后送給大家一句話:

這時(shí)代唯一不變的,就是變化。

圖片

無(wú)論你現(xiàn)在多么厲害,不變就被淘汰。

 

原文地址:友設(shè)青年(公眾號(hào))

作者:Luckgg

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》撕開(kāi)B端封印,數(shù)字時(shí)代下的可視化構(gòu)建

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


配色驛站-粉色靈感海報(bào)

seo達(dá)人


誰(shuí)心里還沒(méi)有那一抹粉紅呢!

粉紅色是暖色系,溫暖沒(méi)有攻擊力,比正紅稚嫩青澀,比黃橘綠更具女人味,又沒(méi)有藍(lán)紫的冷峻,是這么多顏色中最溫和友好的。對(duì)小女孩來(lái)說(shuō)是童真嬌柔的,對(duì)少女是溫婉可愛(ài),情人之間也是一種甜蜜蜜最放松最舒適的狀態(tài)。
馬里蘭大學(xué)的社會(huì)學(xué)家Philip Cohen調(diào)查了1974個(gè)人,男女比例均衡。結(jié)果發(fā)現(xiàn),男性和女性都很偏愛(ài)藍(lán)色,紫紅色系,尤其是粉紅色,女性則更偏愛(ài)。粉色的確是女性偏愛(ài)的顏色。  
 
圖片  
 
粉色在中世紀(jì)是男人的專(zhuān)屬顏色,就像高跟鞋本來(lái)是給矮個(gè)子國(guó)王穿的一樣。之前認(rèn)為紅色是血的顏色,而粉色便是稀釋的血的顏色,所以粉色在曾經(jīng)是受男人喜歡的,并且認(rèn)為粉色高貴。  
 

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

原文地址:修先森撩設(shè)計(jì)(公眾號(hào))

作者:修先森

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》配色驛站-粉色靈感海報(bào)

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)



輕奢格調(diào)|構(gòu)建百度直播平臺(tái)設(shè)計(jì)語(yǔ)言系統(tǒng)

seo達(dá)人


什么是設(shè)計(jì)語(yǔ)言?

設(shè)計(jì)語(yǔ)言是把設(shè)計(jì)作為一種“溝通的方式”,在特定的場(chǎng)景中進(jìn)行內(nèi)容與信息的傳達(dá)。設(shè)計(jì)是介于科學(xué)與美學(xué)之間的一種藝術(shù),是需要理性的去解決感性的問(wèn)題。它和藝術(shù)之間的差別就在于“解決問(wèn)題”。

 

設(shè)計(jì)語(yǔ)言有哪些?

設(shè)計(jì)語(yǔ)言最底層是項(xiàng)目設(shè)計(jì)語(yǔ)言,具有典型特征和主題,比如醫(yī)療項(xiàng)目凸顯專(zhuān)業(yè)冷靜,節(jié)日項(xiàng)目凸顯熱鬧氛圍。往上一層是產(chǎn)品設(shè)計(jì)語(yǔ)言,強(qiáng)調(diào)個(gè)性品牌,比如小視頻的設(shè)計(jì)深色更沉浸,電商從結(jié)構(gòu)到色彩都凸顯熱鬧。很多產(chǎn)品隨著發(fā)展,形成一些系列平臺(tái)服務(wù),平臺(tái)設(shè)計(jì)語(yǔ)言確保服務(wù)“統(tǒng)一規(guī)范”。最頂層是生態(tài)設(shè)計(jì)語(yǔ)言,跨設(shè)備跨平臺(tái)和硬件呈現(xiàn)的設(shè)計(jì)語(yǔ)言。

 

百度直播業(yè)務(wù),從單一業(yè)務(wù)形成系列平臺(tái)服務(wù),囊括的不只是B端和C端用戶產(chǎn)品,還有8大垂類(lèi)蓬勃發(fā)展,以及跨業(yè)務(wù)多宿主的呈現(xiàn)。龐大的平臺(tái)業(yè)務(wù),特別需要建設(shè)平臺(tái)設(shè)計(jì)語(yǔ)言。

圖片

 

如何構(gòu)建設(shè)計(jì)語(yǔ)言?

所有的設(shè)計(jì)語(yǔ)言,都是服務(wù)于業(yè)務(wù)頂層戰(zhàn)略發(fā)展。制定設(shè)計(jì)策略前,需對(duì)業(yè)務(wù)所在的行業(yè)背景、品牌戰(zhàn)略、用戶群體、流行趨勢(shì)有充足的認(rèn)知。當(dāng)返工無(wú)數(shù)次還是沒(méi)方向時(shí),說(shuō)明以下前四點(diǎn)需要再深入明確。

圖片

 

建立設(shè)計(jì)原則時(shí)(設(shè)計(jì)語(yǔ)言的標(biāo)準(zhǔn)),不妨嘗試把品牌戰(zhàn)略人格化,由所有人解決所有人問(wèn)題的愿景,得出產(chǎn)品是一個(gè)解決問(wèn)題的行業(yè)專(zhuān)家的身份,Ta傳達(dá)的氣質(zhì)是簡(jiǎn)潔大方的儀表,親和有力的儀態(tài),和專(zhuān)業(yè)權(quán)威的素養(yǎng)。

圖片

 

設(shè)計(jì)語(yǔ)言以現(xiàn)代輕奢風(fēng)格為基調(diào),它大簡(jiǎn)至美、配色和諧、材質(zhì)考究,以獨(dú)具特色的現(xiàn)代格調(diào),構(gòu)筑起一個(gè)充滿質(zhì)感又十分舒適的直播間,給用戶一致、友好、有品的體驗(yàn)。

圖片

 

設(shè)計(jì)動(dòng)手前,按照風(fēng)格基調(diào)具象化拆解分析必不可少,每一個(gè)元素的表達(dá)手法都要定位清晰。

 

圖片

 

01 至簡(jiǎn) 光影藝術(shù)圖標(biāo)體系

在圖標(biāo)的設(shè)計(jì)中,我們基于專(zhuān)業(yè)親和的品牌理念延展出2個(gè)不同的方向。方案一以直線折紙與光影為視覺(jué)元素,呈現(xiàn)一個(gè)用心專(zhuān)業(yè)的態(tài)度。方案二以曲線雕刻藝術(shù)展現(xiàn)專(zhuān)業(yè)親和的魅力。

圖片

 

圖標(biāo)體系化,多場(chǎng)景驗(yàn)證一致性,發(fā)現(xiàn)方案一不夠極致,造型復(fù)雜;方案二具備良好的一致性,但破壞了物體固有的結(jié)構(gòu),影響識(shí)別度。

圖片

 

在一致性的前提下,嘗試簡(jiǎn)化、提高識(shí)別度。巧妙的將光影和結(jié)構(gòu)交匯,極簡(jiǎn)到2個(gè)圖層呈現(xiàn)主體;語(yǔ)義清晰識(shí)別度高;角度漸變光影帶來(lái)舒適親和感,15°x角度的精準(zhǔn)把控傳達(dá)專(zhuān)業(yè)的品牌特性。因此總結(jié)出圖標(biāo)繪制要遵循的法則為識(shí)別性、品牌性、愉悅性、一致性。

圖片

圖片

圖片

圖片

圖片

 

 

02 和諧 家族感的色彩體系 

 

a)標(biāo)準(zhǔn)色

初期直播品牌色繼承百度App品牌色,隨著業(yè)務(wù)逐漸中臺(tái)化,需要專(zhuān)屬直播色。運(yùn)用色彩心理學(xué)傳遞給人不同的情緒及心理感受,尋找直播的專(zhuān)屬色相,而活力、溫暖的紅色色調(diào),更能體現(xiàn)親和有力的產(chǎn)品氣質(zhì)。

圖片

紅色也有冷暖之分,此時(shí)提高色相、飽和度的顆粒度,H色相以350°為起點(diǎn),以2°遞增或遞減,S飽和度以5°為階梯,生成更多色階(保持相同B明度100),在多界面和真機(jī)驗(yàn)證,得出直播專(zhuān)屬紅(H350 S80 B100),冷暖適中符合平臺(tái)屬性。

 

圖片

圖片

 

b)協(xié)調(diào)的輔助色
同時(shí),運(yùn)用色環(huán)建立輔助色彩體系。H色相以350°為起點(diǎn),以15°遞增或遞減標(biāo)準(zhǔn),創(chuàng)建24色相色板(保持相同B明度100、S飽和度80);選取柔和與協(xié)調(diào)的類(lèi)似色和鄰近色作為家族色彩主體,調(diào)和互補(bǔ)色與對(duì)比色,平衡整體色調(diào)。因?yàn)椴煌嗟母泄倜鞫炔⒉幌嗤U恳粋€(gè)輔助色的HSB,達(dá)到色彩感官上一致。

圖片

 

C)調(diào)色版
一般會(huì)有2種方法,一種是使用明度差獲得統(tǒng)一性佳的調(diào)色板,優(yōu)點(diǎn)是落地成本低,代碼可直接實(shí)現(xiàn);另一種則是微調(diào)飽和度和色相,獲得鮮明的色板,可使用在插圖繪制上。

 

圖片

圖片

 

03 考究 新穎獨(dú)特材質(zhì)

亞克力,這種具有透明質(zhì)感、光學(xué)品質(zhì)的材質(zhì),在設(shè)計(jì)領(lǐng)域最早應(yīng)用在家居設(shè)計(jì)上,被互聯(lián)網(wǎng)設(shè)計(jì)師熟知是在微軟的概念視頻里,隨之逐漸應(yīng)用到icon繪制上,亞克力1.0版本背景和主體層次沒(méi)拉開(kāi),2.0版本更趨向加大不透明度和模糊值,達(dá)到清晰舒適又兼具藝術(shù)美感。

圖片

 

這種量身打造的稀缺材質(zhì)運(yùn)用在運(yùn)營(yíng)玩法上,如紅包雨玩法,即能凸顯平臺(tái)專(zhuān)業(yè)用心的態(tài)度,又能強(qiáng)化用戶消費(fèi)行為轉(zhuǎn)化,助力變現(xiàn)增長(zhǎng)。 

圖片

 

用戶激勵(lì)體系,采用3D玉石潤(rùn)澤質(zhì)感+動(dòng)態(tài)折射光影,體現(xiàn)有內(nèi)涵不張揚(yáng)的泛知識(shí)調(diào)性,凸顯用戶獨(dú)特身份感 
圖片 

[優(yōu)化輸出圖像]

 

寫(xiě)在最后

在每一個(gè)小元素的創(chuàng)作中,我們都時(shí)刻謹(jǐn)記,無(wú)論是項(xiàng)目的主題語(yǔ)言、還是產(chǎn)品的設(shè)計(jì)語(yǔ)言、甚至是生態(tài)的,終點(diǎn)都是傳達(dá)企業(yè)文化以及價(jià)值觀。從戰(zhàn)略層重構(gòu)業(yè)務(wù)的認(rèn)知體系,再將品牌戰(zhàn)略人格化,才能夠在茫然期產(chǎn)生真正的篤定感,逐步拆解設(shè)計(jì)目標(biāo)和構(gòu)建符合業(yè)務(wù)氣質(zhì)的設(shè)計(jì)語(yǔ)言,達(dá)到最愉悅的體驗(yàn)。

 

原文地址:百度MEUX(公眾號(hào))

作者:文娛平臺(tái)用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》輕奢格調(diào)|構(gòu)建百度直播平臺(tái)設(shè)計(jì)語(yǔ)言系統(tǒng)

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


2021趨勢(shì),Behance大神都在用的彌散光感教程來(lái)了!

seo達(dá)人


彌散光感也是今年突然間興起一種流行趨勢(shì),國(guó)內(nèi)外很多設(shè)計(jì)師在項(xiàng)目上運(yùn)用這種處理手法,下面我們先來(lái)回顧一些網(wǎng)上案例。
圖片

上面這種是單色彌散效果,而且還帶有一些噪點(diǎn)紋理。

圖片

這種思路是通過(guò)一邊往外延伸,然后慢慢消失的過(guò)程。

圖片
這種是彌散漸變上面疊加點(diǎn)陣紋理,效果細(xì)節(jié)也很豐富。
圖片
多色混色彌散光感,細(xì)節(jié)非常豐富,不過(guò)對(duì)色彩把控要求高,稍不留神就會(huì)顯臟。
圖片
雜志卡片應(yīng)用彌散光感,起到點(diǎn)綴作用,還能形成亮點(diǎn)設(shè)計(jì)。好了,下面到了案例實(shí)操部分,為大家準(zhǔn)備了3個(gè)案例,尤其是最后一個(gè),我個(gè)人最喜歡。

 

案例實(shí)操#1

這里快速給大家演示幾種思路,基本上實(shí)操一次就會(huì)了。

第1步:先準(zhǔn)備一個(gè)基礎(chǔ)的版式,因?yàn)閺浬⒐飧幸话愣际且员尘暗男问匠霈F(xiàn)在畫(huà)面中,能起到氛圍渲染作用。

圖片

第2步:準(zhǔn)備制作彌散漸變,這里以單色來(lái)舉例。首先制作第一層漸變,具體參數(shù)值,大家領(lǐng)取源文件慢慢查看。

圖片

第3步:制作第二層泛白漸變效果,目的起到綜合的作用,顏色過(guò)渡自然。

圖片
第4步:基本兩層就OK了,最后再疊加一層噪點(diǎn)紋理,效果看起來(lái)會(huì)更豐富細(xì)膩。這里的噪點(diǎn)肌理我在sketch 里面完成的,也是非常方便簡(jiǎn)單(大家可以拿著源文件去研究下,一看就會(huì))。
圖片

 

案例實(shí)操#2

第1步:先準(zhǔn)備一個(gè)基礎(chǔ)的版式

圖片
第2步:開(kāi)始制作彌散漸變
圖片

由于這里所需要的彌散效果較大一些,因此這里模糊值需要在ps里面處理,首先畫(huà)一個(gè)圓形,然后使用高斯模糊;然后將其復(fù)制一層,然后添加雜色,最后兩層疊加起來(lái),就得到如下效果。

圖片

 

案例實(shí)操#3

第1步:先在ps里面繪制兩個(gè)基礎(chǔ)的圓形,一個(gè)大圓和一個(gè)小圓。

圖片

第2步:然后分別將大圓和小圓使用ps模糊畫(huà)廊里面的移軸模糊效果,再將兩者疊加起來(lái),就得到如下效果。

圖片

當(dāng)然還可以疊加很多層,效果也很細(xì)膩。

圖片

除了圓形,我們還可以玩出其他花樣。

圖片

今天分享就先到這里,大家下去可以拿著源文件 自己在玩一下 彌散光感,可以研究出不同的效果。


原文地址:功夫UX(公眾號(hào))
作者: 功夫UX
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》2021趨勢(shì),Behance大神都在用的彌散光感教程來(lái)了!

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

這套圣誕節(jié)字體,寫(xiě)得實(shí)在太好看了

seo達(dá)人


01.  字體素材 

圖片

圖片

圖片

@叁月,適合圣誕使用的手寫(xiě)英文字體

f

02.  圣誕素材 

圖片

圖片

圖片

@叁月圣誕節(jié)設(shè)計(jì)素材大合集

f

03.  樣機(jī)素材 

圖片

圖片

圖片

@是瑩瑩啊~,海報(bào)拍攝場(chǎng)景樣機(jī)

w

04.  樣機(jī)素材 

圖片

圖片

圖片

@耳東,VI場(chǎng)景樣機(jī)

e

05.  字體素材 

圖片

圖片

圖片

@耳東,圣誕節(jié)字體素材

t

06.  海報(bào)素材 

圖片

圖片

圖片

@素箋書(shū)酸性漸變?cè)┛缒?天倒計(jì)時(shí)海報(bào)

e


原文地址:我們的設(shè)計(jì)日記(公眾號(hào))

作者:叮當(dāng)貓

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》這套圣誕節(jié)字體,寫(xiě)得實(shí)在太好看了

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

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

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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


日歷

鏈接

個(gè)人資料

存檔