首頁(yè)

拿捏3種設(shè)計(jì)風(fēng)格!

seo達(dá)人

設(shè)計(jì)的風(fēng)格有很多種,今天給大家?guī)?lái)的是三種設(shè)計(jì)風(fēng)格的海報(bào)案例呈現(xiàn)。

操作很簡(jiǎn)單,大家看完記得練習(xí)哦。直接開(kāi)始今天的教程吧,yeah…

圖片

 

圖片

圖片

● 相信大家小時(shí)候都玩過(guò)超級(jí)馬里奧、魂斗羅等游戲。

下圖是馬賽克像素風(fēng)典型的代表游戲之一?;叵肫饋?lái)那都是童年的歡樂(lè)時(shí)光啊~

圖片

● 下面用文字簡(jiǎn)單的介紹了一些關(guān)于像素畫(huà)的知識(shí)

圖片

● 給大家整理的一些像素風(fēng)格的海報(bào)(案例來(lái)源于互聯(lián)網(wǎng),僅做參考)

圖片

● 除了像素畫(huà)海報(bào)之外還有與之對(duì)應(yīng)的像素字體下圖來(lái)源于互聯(lián)網(wǎng),僅做示意。

圖片

圖片

● 這里我們用到上圖03和06的技法思路,像素的趕腳類似PS的半調(diào)效果,或者是仿色擴(kuò)散,以文字設(shè)計(jì)為基礎(chǔ)使用的仿色擴(kuò)散的效果來(lái)呈現(xiàn)。

圖片

設(shè)計(jì)思路&步驟解析

01:先設(shè)計(jì)完字體部分(這里暫不講字體設(shè)計(jì)部分),不會(huì)字體設(shè)計(jì)的同學(xué),使用一款好看的字庫(kù)字體也是可以的。

圖片

02:合并所有筆畫(huà),在AI中使用路徑偏移,參數(shù)設(shè)置如下,對(duì)象-路徑-偏移路徑。

圖片

03:取消編組,用2種顏色區(qū)分。

圖片

04:勾勒鋼筆連接每個(gè)邊,紅色圓圈標(biāo)注部分為示意。

圖片

05:接著給字體填充黑白漸變,注意白與黑之間的明暗過(guò)度。

圖片

06:最終效果如下,將漸變后的字體在PS中選中,圖像-模式-灰度-拼合。

圖片

07:圖像-模式-位圖-擴(kuò)散仿色。

圖片

大家不要局限于做像素風(fēng)格就非得像我用這種方法去呈現(xiàn),我們只要抓住海報(bào)的主體,呈現(xiàn)是由一個(gè)小的單元格組合拼接而成就可以了。AI同樣也可以做出矢量像素海報(bào)。。。

這是在AI做出的像素化效果,這里給大家拋磚引玉一下。

選中漸變完之后的字體,AI菜單欄-對(duì)象-柵格化,參數(shù)設(shè)置如下,最終位圖再轉(zhuǎn)矢量就可以啦。

圖片

08:最終并為其添加色彩與排版就完成了~

圖片

 

 

圖片

我們先看幾組網(wǎng)上的案例展示吧,大概認(rèn)識(shí)下這類風(fēng)格的一些表現(xiàn)形式,版面的構(gòu)圖元素,以及顏色的一些使用等。

不難發(fā)現(xiàn)我們目前所看到的孟菲斯風(fēng)格是非常潮的,強(qiáng)烈的色彩組合與碰撞,幾何形狀的構(gòu)成,甚至一些海報(bào)當(dāng)中也會(huì)出現(xiàn)潮流的插畫(huà)小元素,非常具有趣味性,以及強(qiáng)一些畫(huà)面視覺(jué)沖擊表現(xiàn)。

圖片

圖片

孟菲斯風(fēng)格版面元素構(gòu)成

孟菲斯平面設(shè)計(jì)特征可以歸納為:

1、高明度的色彩組合;線條、圖案的隨機(jī)排列搭配;幾何元素的大量運(yùn)用和空間填充。

2、各式各樣的幾何圖案是“孟菲斯設(shè)計(jì)”經(jīng)典元素之一,以正方形、圓形或三角形這類規(guī)則圖形為主。

3、與傳統(tǒng)設(shè)計(jì)強(qiáng)調(diào)有序不同,“孟菲斯”的設(shè)計(jì)背景喜用凌亂與自由的組合方式。

不管是細(xì)瘦的直線、粗體的波浪線,還是點(diǎn)狀圖案亦或3D結(jié)構(gòu)圖形,你都能在孟菲斯作品里找到。

圖片

圖片

圖片

圖片

圖片

下圖舉例了孟菲斯在平面中的一些表現(xiàn)!

圖片

圖片

咱們分析完孟菲斯的一些構(gòu)成元素表現(xiàn)形式之后就好開(kāi)始下手了,下圖是以人物為主體的表現(xiàn)形式。

圖片

為了方便大家觀察我將版面中的元素進(jìn)行了拆解,大致分為人物、文字對(duì)話框、一些線條元素和版面中的配色。

圖片

文字對(duì)話框&文字編排:

圖片

版面中的人物主體:

圖片

版面中的色彩搭配、字體&線條:

圖片

以上就是拆解完的樣式,這里我們?yōu)榱嗽黾影婷娴娜の缎?,我使用了手?xiě)字體以及隨意裝飾的線條活躍版面氣氛,色彩的組合上使用了純色與漸變的組合碰撞,圖形構(gòu)成上表現(xiàn)模擬了電腦頁(yè)面對(duì)話框的組合形式搭配上文字編排,以上都是為了盡可能的符合孟菲斯的一些風(fēng)格表現(xiàn)而存在的。

這是我做的另外一張孟菲斯的海報(bào),根據(jù)之前給大家總結(jié)的要素:

*幾何圖形構(gòu)成

*強(qiáng)烈的色彩組合

*簡(jiǎn)單圖形&插圖

圖片

*簡(jiǎn)單圖形&插圖

圖形的制作比較簡(jiǎn)單用 AI 3D工具就可以完成。

圖片

*幾何圖形構(gòu)成

圖片

*幾何圖形構(gòu)成

圖片

*靚麗/怪誕/潮流

當(dāng)時(shí)找素材的時(shí)候找到這只鳥(niǎo)的時(shí)候,發(fā)現(xiàn)嘴非常的有意思,以及鳥(niǎo)本身的顏色也是符合孟菲斯的色彩要求的(一個(gè)巧合罷了),扣完圖之后給鳥(niǎo)加上一個(gè)外描邊增強(qiáng)趣味性。

圖片

*強(qiáng)烈的色彩組合

純色與漸變色(高飽和度&低飽和度)、(明與暗)以及色彩在版面中的一個(gè)過(guò)度關(guān)系。

圖片

最終組合版面中的主體與文字排版&構(gòu)圖,以及配色孟菲斯風(fēng)格的海報(bào)就完成了,只要掌握了他們的元素構(gòu)成風(fēng)格與表現(xiàn)就好做了,希望這2張海報(bào)可以給到大家一個(gè)啟發(fā)。

圖片

 

 

圖片

圖片

所以我們只要能模擬出撕紙的效果差不多就能做了。

圖片

下圖是案例展示部分。

圖片

我們來(lái)看下撕紙效果的一個(gè)具體制作方式,基本上都是在PS中完成的。

圖片

下圖是關(guān)于PS畫(huà)筆的預(yù)設(shè):

常規(guī)畫(huà)筆、干介質(zhì)畫(huà)筆、特殊效果畫(huà)筆、濕介質(zhì)畫(huà)筆。

圖片

給人物添加一個(gè)蒙版,這里我使用的是干介質(zhì)畫(huà)筆,分別給他們換上顏色即可。

圖片

選擇下圖第二種干介質(zhì)畫(huà)筆,以及它們?cè)诓煌J较碌臉邮叫Ч?

圖片

接著在人物的邊緣用干介質(zhì)畫(huà)筆(溶解模式)涂抹邊緣,撕紙的效果就出現(xiàn)了,接著加入黑白相間的素材。

圖片

圖片

為了模擬撕紙的效果,我隨意設(shè)置了一些紋理,讓紋理保持一種不規(guī)則的狀態(tài)。咱們動(dòng)手制作一些素材使用(特殊效果畫(huà)筆),新建一個(gè)畫(huà)布,使用畫(huà)筆涂滿即可,導(dǎo)出圖片當(dāng)做素材就OK了,涂抹的時(shí)候畫(huà)筆的大小折中就行,避免效果不理想(大家多嘗試就行)。

圖片

最終規(guī)劃版面的文字編排就完成了。

圖片

圖片


大家多多練起來(lái)吧,希望對(duì)你有所幫助。


作者:大熊

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》拿捏3種設(shè)計(jì)風(fē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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



只要一個(gè)公式,帶你看懂協(xié)同辦公提效

seo達(dá)人

本篇文章筆者將結(jié)合58的云效項(xiàng)目協(xié)同2.0設(shè)計(jì)方案,分析一下協(xié)同辦公提效的經(jīng)驗(yàn)??靵?lái)看看吧~

圖片

1.優(yōu)化對(duì)象

云效是企業(yè)內(nèi)部的效能研發(fā)平臺(tái),輔助公司員工研發(fā)產(chǎn)品。本項(xiàng)目的優(yōu)化內(nèi)容是針對(duì)它的項(xiàng)目協(xié)同能力,該部分的主要功能是“創(chuàng)建并管理項(xiàng)目”和“線上協(xié)同推動(dòng)項(xiàng)目流轉(zhuǎn)”。

2.設(shè)計(jì)依據(jù)

由于是自用產(chǎn)品,因此缺乏有效的數(shù)據(jù)驗(yàn)證,需要找到合理的設(shè)計(jì)依據(jù)。所以我們聯(lián)系業(yè)務(wù)方開(kāi)展針對(duì)員工的訪談,以職位為基礎(chǔ)分類,梳理他們的工作流程;根據(jù)不同的工作階段,收集各個(gè)用戶角色的使用痛點(diǎn);最后將痛點(diǎn)進(jìn)行了分析和整理,將重點(diǎn)問(wèn)題進(jìn)行了分類匯總,最終總結(jié)出結(jié)論——效率低。因此本期的優(yōu)化目標(biāo)也明確下來(lái)了,就是對(duì)項(xiàng)目協(xié)同進(jìn)行辦公提效。

圖片圖片

3.提效內(nèi)核

在開(kāi)始設(shè)計(jì)前要搞明白一件事,那就是項(xiàng)目協(xié)同的基礎(chǔ)構(gòu)成是什么?它們分別是“流轉(zhuǎn)”和“角色”。

為了方便理解,筆者把項(xiàng)目協(xié)同系統(tǒng)比喻成工廠,把項(xiàng)目推進(jìn)比喻成商品制造,項(xiàng)目從策劃到上線,就如同商品在一條流水線上會(huì)經(jīng)歷多個(gè)加工點(diǎn),從原材料到最終完工上市。這條流水線在項(xiàng)目協(xié)同中可以它稱為“流轉(zhuǎn)”,而在流水線上的加工點(diǎn)們,其實(shí)就是公司員工,我們稱他們?yōu)椤敖巧?,角色需要完成相?yīng)的任務(wù),才能將項(xiàng)目從一個(gè)節(jié)點(diǎn)流轉(zhuǎn)至下一個(gè)節(jié)點(diǎn)。因此“流轉(zhuǎn)”和“角色”共同構(gòu)成了項(xiàng)目協(xié)同系統(tǒng)。

圖片圖片

所以提效的關(guān)鍵就在于“角色能否順利完成任務(wù)”,同時(shí)“項(xiàng)目能否進(jìn)行順利流轉(zhuǎn)”。滿足這兩點(diǎn),項(xiàng)目協(xié)同系統(tǒng)才能高效運(yùn)行,從而到達(dá)辦公提效。

因此我們可以得出一個(gè)公式:“辦公提效=角色完成任務(wù)的效率x流轉(zhuǎn)順暢程度”。即用戶能在順暢的流轉(zhuǎn)過(guò)程中,高效地完成各節(jié)點(diǎn)的任務(wù)。再結(jié)合訪談結(jié)果,本次的設(shè)計(jì)目標(biāo)逐漸清晰:

提升項(xiàng)目流轉(zhuǎn)效率:梳理生命周期,滿足全流程覆蓋;搭建消息體系,提升信息觸達(dá)率

提升任務(wù)完成效率:概念優(yōu)化,降低學(xué)習(xí)成本;搭建高坪效頁(yè)面,提升閱讀和操作效率;多維度展示,提升決策管理能力

圖片

圖片

 

圖片

1.項(xiàng)目流轉(zhuǎn)全覆蓋

舊版云效只覆蓋了產(chǎn)品和開(kāi)發(fā),而本期我們要做全流程角色的覆蓋,因此筆者從角色和工作兩個(gè)層面重新梳理了產(chǎn)品生命周期,角色層面包括了從產(chǎn)品,設(shè)計(jì)師,開(kāi)發(fā)和測(cè)試,即產(chǎn)品研發(fā)的全流程參與的員工;工作層面包括了從需求策劃一直到上線的全工作流程。主要目標(biāo)是梳理出各角色需要完成的任務(wù),同時(shí)確認(rèn)在流程上的流轉(zhuǎn)節(jié)點(diǎn)。

圖片圖片

在本期方案中項(xiàng)目流轉(zhuǎn)還是采用手動(dòng)為主。舉個(gè)例子,如產(chǎn)品在云效上創(chuàng)建了一個(gè)需求,并在線撰寫(xiě)了文檔,此時(shí)他可以將需求流轉(zhuǎn)給設(shè)計(jì)師,設(shè)計(jì)師收到需求后和產(chǎn)品溝通需求細(xì)節(jié)和排期,然后開(kāi)始設(shè)計(jì)介入,此時(shí)產(chǎn)品即可將該需求的狀態(tài)就變?yōu)榱恕冈O(shè)計(jì)中」,以此類推角色持續(xù)推動(dòng)需求流轉(zhuǎn),直至完成上線。

圖片圖片

在未來(lái)我們將會(huì)實(shí)現(xiàn)高度自動(dòng)化的流轉(zhuǎn)方式。比如完成某些任務(wù)后能進(jìn)行自動(dòng)化流轉(zhuǎn),再舉個(gè)例子:設(shè)計(jì)師在云效上直接上傳設(shè)計(jì)終稿,產(chǎn)品確認(rèn)后可自動(dòng)流轉(zhuǎn)到下一流程節(jié)點(diǎn)。

2.打通辦公消息提醒體系

經(jīng)訪談發(fā)現(xiàn),項(xiàng)目流轉(zhuǎn)存在信息傳遞不及時(shí)的卡點(diǎn),需要提升用戶觸達(dá)??紤]到公司現(xiàn)有觸達(dá)方式中,美事和企業(yè)郵箱的普及度較高,依托這兩款產(chǎn)品能做到全公司的消息觸達(dá)。于是筆者與業(yè)務(wù)方梳理了消息提醒的場(chǎng)景,包括了「待辦提醒」和「異常提醒」兩部分。以下可以舉兩個(gè)案例進(jìn)行分享。

自動(dòng)化待辦提醒:需求負(fù)責(zé)人完成創(chuàng)建后會(huì)自動(dòng)流轉(zhuǎn)到參與人,告知對(duì)方被分配了相應(yīng)的事項(xiàng)。

圖片
圖片

自動(dòng)化監(jiān)測(cè)提醒能力:舊版項(xiàng)目流轉(zhuǎn)是由負(fù)責(zé)人全權(quán)監(jiān)測(cè),無(wú)形中增加工作成本。優(yōu)化后方案以系統(tǒng)監(jiān)測(cè)為主,負(fù)責(zé)人為輔。當(dāng)系統(tǒng)監(jiān)測(cè)到異常時(shí)(主要是臨近逾期或已經(jīng)逾期),會(huì)自動(dòng)在美事里推送未完成的內(nèi)容,用戶可點(diǎn)擊查看詳情,并及時(shí)處理。

 

圖片

1.概念提效

舊版的產(chǎn)品概念復(fù)雜,存在重復(fù)性內(nèi)容,如「項(xiàng)目」和「產(chǎn)品」,如“產(chǎn)品”和“項(xiàng)目”這兩個(gè)概念的相似度就很高,很多新用戶難以理解。同時(shí)不符合業(yè)界定義的認(rèn)知,如「迭代」,本應(yīng)該是需求的合集,但是舊版二者卻是并列關(guān)系,造成了理解成本高的問(wèn)題。

在優(yōu)化方案中,我們將概念扁平化,合并相似度較高的概念,放棄部分不常用概念。同時(shí)調(diào)研市面現(xiàn)有平臺(tái)的概念體系,做到盡可能符合業(yè)界認(rèn)知。從而降低理解成本。

圖片

圖片

2.搭建高坪效頁(yè)面

工作事項(xiàng)作為平臺(tái)最基礎(chǔ)組成部分,主要問(wèn)題是頁(yè)面交互方式老舊,體現(xiàn)在結(jié)構(gòu)分散且層級(jí)復(fù)雜;使用過(guò)程中跳轉(zhuǎn)頻繁,需要重新搭建高坪效的頁(yè)面。同時(shí)在閱讀瀏覽、新增內(nèi)容和語(yǔ)義理解方面都存在設(shè)計(jì)細(xì)節(jié)問(wèn)題。筆者以需求詳情頁(yè)為例,說(shuō)一下搭建高坪效頁(yè)面的方法。

頁(yè)面層級(jí)重構(gòu):筆者采用了卡片分類法將頁(yè)面組件重新歸類組合,重構(gòu)新頁(yè)面,同時(shí)考慮到用戶的快速瀏覽習(xí)慣,將原有跳轉(zhuǎn)新頁(yè)面改為抽屜的展示方式,減少反復(fù)頁(yè)面跳轉(zhuǎn)帶來(lái)的體驗(yàn)不佳。

圖片圖片

看到有用的信息:合理控制信息密度,同時(shí)保證添加內(nèi)容的便捷性。設(shè)計(jì)吸頂?shù)膭?chuàng)建入口,點(diǎn)擊后可跳轉(zhuǎn)到預(yù)設(shè)位置去添加內(nèi)容。頁(yè)面上不會(huì)出現(xiàn)多余信息,有效降低頁(yè)面的信息密度。

圖片

圖片

快速看到想看的:隨著用戶在抽屜內(nèi)新增的內(nèi)容越來(lái)越多,頁(yè)面也會(huì)變的越來(lái)越長(zhǎng),為提升瀏覽效率,在左側(cè)設(shè)計(jì)快捷幀導(dǎo)航欄,點(diǎn)擊后能快速跳轉(zhuǎn)到相應(yīng)位置,提升瀏覽效率。

圖片

圖片

低成本理解文案:本次在語(yǔ)義設(shè)計(jì)上做了調(diào)整,確保用戶低成本理解。以操作日志為例,日志里記錄了所有操作記錄,表達(dá)內(nèi)涵是“哪些用戶在什么時(shí)間進(jìn)行了如何的操作”,因此設(shè)計(jì)由「用戶名」+「行為」+「結(jié)果」+「操作時(shí)間」組成的字段句式,使語(yǔ)義做到標(biāo)準(zhǔn)化且降低理解成本。

圖片圖片

3.多維度展示

在舊版方案中大量使用列表作為展示方式。但單一維度列表僅僅強(qiáng)調(diào)了事項(xiàng)的主題,考慮到在實(shí)地的工作場(chǎng)景中,用戶是需要從多種維度去管理工作事項(xiàng)。

層級(jí)關(guān)系展示:需求存在父子級(jí)關(guān)系(一個(gè)需求可以被拆分成多個(gè)子需求,分期完成),因此需要能表達(dá)清楚層級(jí)關(guān)系的展示方式。筆者使用了樹(shù)形圖的展示方式,明確父子級(jí)關(guān)系。

進(jìn)度展示:因?yàn)槲覀兯鶇⑴c的事項(xiàng)都是有起止日期的,什么時(shí)候開(kāi)始,什么時(shí)候結(jié)束,中間需要干多長(zhǎng)時(shí)間,都需要讓用戶有清晰的感知,從而提升管理效率。筆者采用了甘特圖,以事項(xiàng)進(jìn)度的維度來(lái)管理決策,同時(shí)設(shè)計(jì)了拖拽功能方便用戶及時(shí)編輯進(jìn)度。

流轉(zhuǎn)狀態(tài)展示:工作事項(xiàng)需要流轉(zhuǎn)的,因此需要以流轉(zhuǎn)狀態(tài)的維度去展示事項(xiàng),能更好地幫助用戶感知事項(xiàng)所處的狀態(tài),及時(shí)規(guī)劃流轉(zhuǎn)動(dòng)向,從而提升事項(xiàng)流轉(zhuǎn)效率。筆者采用了看板的展示方式,以事項(xiàng)流轉(zhuǎn)狀態(tài)的維度來(lái)管理決策,用戶可拖拽事項(xiàng),及時(shí)進(jìn)行流轉(zhuǎn)。

圖片圖片

 

圖片

回歸到辦公提效公式:“辦公提效=角色完成任務(wù)的效率x流轉(zhuǎn)順暢程度”。在“流轉(zhuǎn)”和“角色”兩個(gè)方面的優(yōu)化。

通過(guò)梳理產(chǎn)品生命周期將做到全流程覆蓋,同時(shí)搭建信息體系,提升流轉(zhuǎn)信息的觸達(dá),進(jìn)而提升項(xiàng)目流轉(zhuǎn)效率。再通過(guò)優(yōu)化概念,降低學(xué)習(xí)成本;搭建高坪效頁(yè)面,提升閱讀和操作效率;搭建多維度展示方式,提升決策管理能力,保障用戶在各節(jié)點(diǎn)完成任務(wù)的效率。

最終做到精準(zhǔn)的辦公提效。

圖片圖片

 

圖片

本次改版還在繼續(xù)中,我們會(huì)繼續(xù)以提效為目標(biāo)持續(xù)優(yōu)化。B端產(chǎn)品不同于C端,尤其是企業(yè)類辦公產(chǎn)品,會(huì)經(jīng)常缺乏埋點(diǎn)導(dǎo)致缺乏有效的數(shù)據(jù)支持,因此不能像C端產(chǎn)品以數(shù)據(jù)作為設(shè)計(jì)依據(jù)。

需要設(shè)計(jì)師深入產(chǎn)業(yè)了解業(yè)務(wù)背后的運(yùn)行邏輯,訪談目標(biāo)用戶觀察其行為并收集其訴求。由此才能足夠了解業(yè)務(wù),為企業(yè)用戶產(chǎn)出更優(yōu)秀的設(shè)計(jì)方案。

希望這份B端設(shè)計(jì)改版的內(nèi)容能夠?qū)Υ蠹矣兴鶐椭?


作者:58UXD

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》只要一個(gè)公式,帶你看懂協(xié)同辦公提效

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



交互設(shè)計(jì)的價(jià)值是什么?

seo達(dá)人

一、情感升華先談?wù)劷换ピ谧鍪裁矗?/strong>

借用一句傳統(tǒng)設(shè)計(jì)行業(yè)的經(jīng)典語(yǔ)錄,一個(gè)好的產(chǎn)品一定是“有用的、好用的、用過(guò)還想用的”,有用的主要由產(chǎn)品經(jīng)理把控,而好用、用過(guò)是否還想用就是交互設(shè)計(jì)的職責(zé)和價(jià)值了。工作內(nèi)容,交互大概可以總結(jié)為下面這幾點(diǎn):

1、是針對(duì)行為的設(shè)計(jì),讓原本的物理邏輯向用戶行為邏輯轉(zhuǎn)化;

2、平衡業(yè)務(wù)價(jià)值和用戶價(jià)值,腦海中永遠(yuǎn)不要忘記“用戶價(jià)值”這幾個(gè)字;

3、以目標(biāo)為導(dǎo)向,保證產(chǎn)品貼合用戶心智,用戶能更好的理解、使用產(chǎn)品,并獲得愉悅的使用體驗(yàn);

4、是通過(guò)功能架構(gòu)向信息架構(gòu)的重組,提升產(chǎn)品框架的擴(kuò)展性、穩(wěn)定性等,交互更多的考慮到在不同場(chǎng)景下對(duì)可用性的要求,讓產(chǎn)品能長(zhǎng)久持續(xù)的使用下去;

5、是對(duì)使用流程設(shè)計(jì);

6、數(shù)據(jù)分析和用戶研究相關(guān)的工作,這兩者是交互展開(kāi)工作的基礎(chǔ)支撐。

交互的價(jià)值是長(zhǎng)期的和可持續(xù)的,沒(méi)有交互,短期內(nèi)看似不會(huì)出現(xiàn)問(wèn)題,長(zhǎng)期來(lái)看,對(duì)用戶留存、用戶滿意度等會(huì)有重大影響,市場(chǎng)環(huán)境不同于壟斷環(huán)境,功能堆砌過(guò)多后甚至都無(wú)法再動(dòng)搖產(chǎn)品“難用”這個(gè)印象,但凡有類似競(jìng)品,放棄產(chǎn)品可能性較大。

 

 

二、交互設(shè)計(jì)的產(chǎn)出物特點(diǎn)——交互稿與產(chǎn)品原型稿有什么差別

這可能很多人關(guān)心、疑惑的問(wèn)題了,本質(zhì)上這個(gè)也是交互稿專業(yè)度的問(wèn)題。產(chǎn)品經(jīng)理也可以去畫(huà)原型圖,那問(wèn)題在哪兒?下面會(huì)嘗試闡述幾點(diǎn)重要差別。當(dāng)然并不排除極少數(shù)優(yōu)秀、能力全面的產(chǎn)品能內(nèi)外兼修。

1、從內(nèi)到外的邏輯思維差異

行為邏輯是交互設(shè)計(jì)師思考的出發(fā)點(diǎn),也是交互設(shè)計(jì)方式能否取得創(chuàng)新的關(guān)鍵點(diǎn)。物理邏輯或者業(yè)務(wù)邏輯是產(chǎn)品經(jīng)理更關(guān)注的要點(diǎn),交互設(shè)計(jì)需要具備豐富的同理心,產(chǎn)品功能不同、用戶不同、場(chǎng)景不同都會(huì)影響到用戶使用時(shí)的感受和操作行為。簡(jiǎn)單來(lái)說(shuō),交互設(shè)計(jì)師更多的站在用戶角度去思考原型的價(jià)值,是否容易被理解、好用甚至轉(zhuǎn)化,而產(chǎn)品的角度不可避免的會(huì)更多考慮業(yè)務(wù)、技術(shù)實(shí)現(xiàn)等方面,一個(gè)人做到面面俱到,是極其難且思維是很容易固化的,長(zhǎng)期形成的思維差異會(huì)直接在原型圖中表現(xiàn),最終影響到產(chǎn)品可用性。

以QQ音樂(lè)幾年前的版本(2017)和現(xiàn)版本(2021)為例,左側(cè)過(guò)往版本在首頁(yè)的信息組織形式上主要以分類的方式,而右側(cè)現(xiàn)版本中信息的組織形式中首頁(yè)的分類方式已經(jīng)很弱了,基本傾向于按用戶行為、需求去組織,比如根據(jù)用戶過(guò)往聽(tīng)過(guò)的歌曲去推薦歌曲、歌單,每日30曲更是研究了用戶每日習(xí)慣、耐心做的信息整合,30首怎么得來(lái)的?根據(jù)什么樣的歌曲去推薦?這些都是行為研究的范疇,需要對(duì)用戶深度了解后方有最好的解決方案。

圖片

 

2.、設(shè)計(jì)規(guī)范的積累與創(chuàng)新

設(shè)計(jì)范式是交互設(shè)計(jì)師基本功的體現(xiàn),包含設(shè)計(jì)規(guī)范和模塊范式兩個(gè)方面。設(shè)計(jì)規(guī)范是設(shè)計(jì)范式中的基礎(chǔ),對(duì)規(guī)范的理解和創(chuàng)新也是衡量專業(yè)度最基礎(chǔ)的方面,這對(duì)原型稿是否成熟有很大關(guān)系,現(xiàn)有的交互規(guī)范大多基于iOS、Material design、微軟設(shè)計(jì)規(guī)范的基礎(chǔ)上優(yōu)化的,國(guó)內(nèi)比較流行的設(shè)計(jì)規(guī)范還有Ant design等,本文不對(duì)此做過(guò)多討論,這里重點(diǎn)談?wù)勗O(shè)計(jì)范式。

范式,指用戶在長(zhǎng)期對(duì)于互聯(lián)網(wǎng)產(chǎn)品使用過(guò)程中產(chǎn)生的用戶心智,比如用戶對(duì)設(shè)置模塊的預(yù)期、對(duì)個(gè)人信息模塊的預(yù)期等。也可以理解為對(duì)于不同產(chǎn)品功能模塊的記憶,設(shè)計(jì)時(shí)需要非常熟練的從腦海中調(diào)用,這樣做的好處是不容易太偏離用戶長(zhǎng)期積累的心智,熟練應(yīng)用范式是創(chuàng)新的前提。

比如表格編輯器的設(shè)計(jì)范式,不管是現(xiàn)在的飛書(shū)、谷歌文檔、釘釘、石墨等協(xié)同辦公產(chǎn)品,都在20年前微軟office的ribbon設(shè)計(jì)模式中兜兜轉(zhuǎn)轉(zhuǎn),尤其是表格編輯器,在長(zhǎng)期的使用過(guò)程中記類的習(xí)慣是很難輕易被改變的,筆者親身經(jīng)歷過(guò)一款表格編輯器產(chǎn)品的迭代,易用性(易操作、易學(xué)、易見(jiàn))中易學(xué)性指標(biāo)評(píng)分是最高的,現(xiàn)在想起來(lái)也跟行業(yè)范式接近不無(wú)關(guān)系。另外關(guān)于一些編輯器右鍵操作、鍵盤操作快捷鍵是否滿足了用戶需求都是極其重要的。不過(guò)辦公類產(chǎn)品發(fā)展到現(xiàn)在已不再像20年前純工具類屬性了,協(xié)同屬性必將帶來(lái)編輯器再一次的創(chuàng)新。

圖片

設(shè)計(jì)范式需要長(zhǎng)期的積累,對(duì)范式理解不夠深入,通常是要么畫(huà)不出來(lái)可用的原型,要么畫(huà)出來(lái)的原型會(huì)被問(wèn)到一個(gè)問(wèn)題——“這個(gè)…看起來(lái)有點(diǎn)說(shuō)不出來(lái)的奇怪”。在理解了基礎(chǔ)范式之后,我們才能做出真正的創(chuàng)新,雖然近兩年交互形式越來(lái)越穩(wěn)定,但真正理解了范式之后的創(chuàng)新也能幫助產(chǎn)品快速占領(lǐng)用戶心智,形成特定印象,繼而占領(lǐng)市場(chǎng)。設(shè)計(jì)范式并非不可創(chuàng)新,而是在不必要的時(shí)候盡量遵循范式能最大限度去降本增效,減少不必要的用戶誤解或開(kāi)發(fā)成本。

 

3.、多端設(shè)計(jì)交互方式

如果不是潛心研究過(guò)多端設(shè)計(jì)差異,一般很容易出問(wèn)題。比如PC端和Mobile端、小程序與App等,在設(shè)計(jì)方法上都存在巨大差異,我親眼見(jiàn)過(guò)太多的產(chǎn)品原型稿中出現(xiàn)過(guò)Mobile的設(shè)計(jì)方法運(yùn)用到PC,或者PC應(yīng)用到了Mobile。

比如基本的差異點(diǎn)有:

  • Mobile的用戶行為多為單線任務(wù),而PC是多線任務(wù),比如pc可以多窗口很便捷的切換,用戶可以一邊聊天一邊收郵件;
  • Mobile端用戶操作時(shí)間更加碎片化,PC操作時(shí)間更加系統(tǒng)、專一;
  • PC的界面也遠(yuǎn)大于Mobile,導(dǎo)致信息結(jié)構(gòu)差異較大;
  • 兩者交互事件也存在很大差別,PC可以針對(duì)對(duì)象進(jìn)行hover,多上下滾動(dòng),少左右滑動(dòng)(依據(jù)鼠標(biāo)特性)等;
  • 設(shè)計(jì)控件的規(guī)范差異較大。

本文并不詳細(xì)贅述差異點(diǎn),總的來(lái)說(shuō),這些差異點(diǎn)在具體的原型稿設(shè)計(jì)中會(huì)體現(xiàn)的比較明顯,這些也是專業(yè)性的一個(gè)方面。下面將舉2個(gè)例子來(lái)說(shuō)明:

1.樹(shù)狀結(jié)構(gòu)

樹(shù)狀結(jié)構(gòu)是一個(gè)PC端經(jīng)常應(yīng)用的控件,適用于層級(jí)結(jié)構(gòu)的展示、選擇等交互操作,高效而清晰,但其在移動(dòng)端展示時(shí)卻不能照搬,由于屏幕、移動(dòng)端手指交互等限制,在移動(dòng)端該控件既不高效也不清晰。比如常見(jiàn)的將文件移動(dòng)到文件夾的操作,桌面端的交互可以用樹(shù)狀結(jié)構(gòu),而移動(dòng)端更適合層級(jí)結(jié)構(gòu)。

圖片

2.面包屑導(dǎo)航

面包屑在桌面端是一個(gè)非常普遍的控件,可以有效的承載層級(jí)關(guān)系展示、快速導(dǎo)航定位的功能,比如不同層級(jí)的文件夾展示與導(dǎo)航等。但在移動(dòng)端,因?yàn)槠聊淮笮 ⒁苿?dòng)端用戶操作碎片化等原因,導(dǎo)致用戶對(duì)面包屑節(jié)點(diǎn)的記憶、層級(jí)操作上都遠(yuǎn)不如桌面端,甚至?xí)绊懙叫畔⒌恼故拘?,因此移?dòng)端在層級(jí)關(guān)系的展示與切換上通常不會(huì)用面包屑,而是左上角返回按鈕或系統(tǒng)級(jí)別的返回。當(dāng)然面包屑在移動(dòng)端也并非一無(wú)是處,如果面包屑各節(jié)點(diǎn)承載的展示作用具備極強(qiáng)的參考意義,比如這些文件夾節(jié)點(diǎn)同時(shí)承載著組織關(guān)系的顯示,則面包屑也還是可以用的。

圖片

總結(jié)下來(lái):面包屑在移動(dòng)端盡量別用,但如果其各層級(jí)節(jié)點(diǎn)同時(shí)有極強(qiáng)的參考意義,則可用。

 

4.、方法論的掌握和運(yùn)用

方法論在交互稿中的體現(xiàn)是比較隱晦的,準(zhǔn)確來(lái)說(shuō),這一點(diǎn)是針對(duì)思維差異點(diǎn)的補(bǔ)充,如交互設(shè)計(jì)十原則、“F型”頁(yè)面設(shè)計(jì)理論(近幾年有爭(zhēng)議)等視覺(jué)動(dòng)線,也包含發(fā)現(xiàn)問(wèn)題的一些方法,比如KANO模型、用戶體驗(yàn)地圖、卡片分類等方法論的應(yīng)用,這些對(duì)于用戶行為維度的研究結(jié)果也會(huì)支撐著交互稿的科學(xué)性,這里不做展開(kāi)闡述。比如用戶體驗(yàn)?zāi)P褪疽鈭D如下,用戶體驗(yàn)?zāi)P褪墙⒃谟脩艚巧P椭系?,前提是需要大量的用戶深度訪談資料為基礎(chǔ),用以系統(tǒng)、全面、科學(xué)的研究用戶行為和探索用戶需求。

圖片

用戶體驗(yàn)地圖

除了以上列舉出來(lái)的,還有一項(xiàng)重要的方法是數(shù)據(jù)分析,這一點(diǎn)是容易被輕視的,但確是最具備參考價(jià)值和衡量工作結(jié)果的,交互關(guān)注的數(shù)據(jù)和產(chǎn)品有很多差異,具體一點(diǎn),比如對(duì)于一個(gè)項(xiàng)目中,產(chǎn)品更多關(guān)注的是衡量功能結(jié)果的數(shù)據(jù),通常包含使用數(shù)據(jù)PV/UV、轉(zhuǎn)化率等,而設(shè)計(jì)師更多關(guān)注CTR、停留時(shí)長(zhǎng)、轉(zhuǎn)化漏斗中跟操作行為相關(guān)的數(shù)據(jù),行為是交互研究的對(duì)象,所以行為數(shù)據(jù)結(jié)果能為具體的方案設(shè)計(jì)提供衡量指標(biāo)。

 

5、交互稿中的UI考量

簡(jiǎn)單來(lái)說(shuō),就是不能給UI挖坑,沒(méi)有交互的設(shè)計(jì),UI上與產(chǎn)品之間的溝通會(huì)非常頻繁,也主要會(huì)出現(xiàn)以下幾個(gè)常見(jiàn)問(wèn)題。

1.信息結(jié)構(gòu)與優(yōu)先級(jí)的落地

信息布局既需要考慮功能的業(yè)務(wù)優(yōu)先級(jí),也需要考慮用戶行為優(yōu)先級(jí),同時(shí)還需要考慮到UI排版的難度。這中間基本都會(huì)有矛盾存在,做好平衡是必備技能。有時(shí)候需要逼著產(chǎn)品給出功能優(yōu)先級(jí),排版是有限的,也有一定審美要求的專業(yè)度,交互稿需要為UI規(guī)避一些明顯的坑,比如最典型的例子——功能都很重要、文案過(guò)長(zhǎng)等,當(dāng)產(chǎn)品同學(xué)也不確定自己所畫(huà)功能是否能被用戶理解、操作的時(shí)候,會(huì)喜歡用文案去進(jìn)行解釋,比如button上寫(xiě)10個(gè)字這種,交互需要給UI提前做避坑。

2.規(guī)范

設(shè)計(jì)是一個(gè)系統(tǒng),任何需求在畫(huà)交互稿時(shí)都應(yīng)考慮到對(duì)系統(tǒng)的適應(yīng)或沖擊,這就要求交互設(shè)計(jì)師不僅要非常熟悉設(shè)計(jì)系統(tǒng),而且必須是系統(tǒng)的制作人之一,設(shè)計(jì)系統(tǒng)是一項(xiàng)耗時(shí)耗力的工作,前期耐心打磨,后期適應(yīng)、修改,如此才能把握住用戶體驗(yàn)的一致性。

3.邊界情況

主要包含用戶交互中與前端、服務(wù)端的交互,比如操作事件的定義、反饋;加載的形式與技術(shù)方案;空狀態(tài);弱網(wǎng)、斷網(wǎng)等等,這些邊界頁(yè)面的考慮都定義清楚,能有效避免UI的返工。

4.保真度與實(shí)現(xiàn)效果

交互稿如果保真度較低,會(huì)導(dǎo)致UI在實(shí)際設(shè)計(jì)的時(shí)候?qū)换ジ逍薷妮^大,導(dǎo)致頁(yè)面架構(gòu)、交互注釋等返工修改,造成不必要的時(shí)間資源浪費(fèi),也會(huì)對(duì)項(xiàng)目進(jìn)度造成影響。一般來(lái)說(shuō),成熟的交互稿是比較接近UI稿而又不是UI稿的一種狀態(tài),將UI中的坑避免之后,UI設(shè)計(jì)師需要做的就是更表現(xiàn)層的設(shè)計(jì),比如與前端工程師的實(shí)現(xiàn)匹配、色彩、柵格、間距、字體字號(hào)等等。

 

6、詳盡的Use Case考量

Use Case(用例)指功能、交互的定義和詳細(xì)描述,用例描述的細(xì)節(jié)程度決定開(kāi)發(fā)時(shí)反復(fù)溝通的頻率,具體包含的細(xì)節(jié)很多,大到功能流程的設(shè)計(jì),小到某個(gè)交互事件的定義和枚舉;從前端用戶與系統(tǒng)的交互事件,到服務(wù)端與前端的功能聯(lián)動(dòng)等,都涉及到,總之,只要用戶看到的、點(diǎn)擊/滑動(dòng)/hover等交互行為涵蓋到的,都應(yīng)該被定義,以期減少開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和溝通成本,這里不做過(guò)多闡述。

 

 

三、交互稿背后的價(jià)值——交互設(shè)計(jì)只是畫(huà)稿子的嗎?

顯然不是!如果說(shuō)一個(gè)項(xiàng)目交互階段持續(xù)了3天,那繪制交互稿最多能花費(fèi)1天。

交互是一個(gè)橫向能力比較高的職業(yè),很多交互設(shè)計(jì)師也改行去做了產(chǎn)品、用研或者UI,所以多多少少都會(huì)具備這幾者的一些技能。交互設(shè)計(jì)師通常會(huì)有多重隱藏的技能是必須掌握的。

 

1、項(xiàng)目中堅(jiān)守用戶價(jià)值

用戶價(jià)值在項(xiàng)目中很容易就讓步于業(yè)務(wù)價(jià)值、項(xiàng)目排期、技術(shù)方案等,交互就是在這中間說(shuō)“不”的人,潤(rùn)物細(xì)無(wú)聲,在每個(gè)項(xiàng)目中盡量減少用戶價(jià)值的損耗,最后匯聚而成的產(chǎn)品整體體驗(yàn)還是有很大差別的。

 

2、團(tuán)隊(duì)中承擔(dān)用戶研究、行為數(shù)據(jù)的部分工作

—交互在組織架構(gòu)上,一般是會(huì)歸屬于設(shè)計(jì)部門的,所以在部門中也承擔(dān)了一線跟用戶和數(shù)據(jù)接觸的人,即便有數(shù)據(jù)分析師、用研同學(xué)的幫助,也需要有主動(dòng)跟蹤這些問(wèn)題的意識(shí),不然設(shè)計(jì)出來(lái)的交互稿很難不出問(wèn)題。

 

3、可用性測(cè)試等結(jié)果追蹤

可用性測(cè)試在一些稍大的項(xiàng)目中是體驗(yàn)設(shè)計(jì)環(huán)節(jié)中的定性維度核驗(yàn)步驟,需要結(jié)合用戶反饋對(duì)方案進(jìn)行可用、好用測(cè)試,并不是指在流程上能跑通的技術(shù)測(cè)試,而是校驗(yàn)用戶對(duì)于方案的接受程度、滿意程度,也順便發(fā)現(xiàn)一些問(wèn)題,后續(xù)進(jìn)行優(yōu)化。

更多的結(jié)果追蹤形式,比如還有SUS可用性量表(B端產(chǎn)品可用阿里云UES量表等)、用戶滿意度、NPS跟蹤等等,目的在于定量的給用戶體驗(yàn)打分,確保用戶體驗(yàn)的衡量是有章可循的。

圖片

易用性量表

 

4.、直接驅(qū)動(dòng)業(yè)務(wù)增長(zhǎng)

增長(zhǎng)黑客和用戶增長(zhǎng)設(shè)計(jì)的概念前幾年也已在業(yè)內(nèi)為大家所熟知,AARRR增長(zhǎng)模型(獲客、激活、轉(zhuǎn)化、留存、推薦/傳播)中,交互可依賴對(duì)用戶的了解和用戶行為的洞察,通過(guò)比如文案、微動(dòng)效、轉(zhuǎn)化漏斗優(yōu)化、信息梳理、布局設(shè)計(jì)等,也可以幫助業(yè)務(wù)在各階段直接提升對(duì)應(yīng)的業(yè)務(wù)指標(biāo),甚至將體驗(yàn)設(shè)計(jì)師熟悉的體驗(yàn)地圖轉(zhuǎn)化繪制為用戶增長(zhǎng)地圖,在用戶使用的全鏈路行為節(jié)點(diǎn)做設(shè)計(jì)所擅長(zhǎng)的增長(zhǎng)賦能。

 

5、項(xiàng)目流程管理

交互需要更早的參與到需求中,在需求出現(xiàn)之前的交互參與能讓需求更加合理,而在交互稿畫(huà)完之后,也需要實(shí)時(shí)的去跟進(jìn)UI、開(kāi)發(fā),有一些技術(shù)難題需要跟開(kāi)發(fā)密切合作,開(kāi)發(fā)說(shuō)“”實(shí)現(xiàn)不了”是經(jīng)常碰到的一句話,那是否是真的實(shí)現(xiàn)不了,可能跟不同的團(tuán)隊(duì)、人、項(xiàng)目排期有關(guān)了,有時(shí)候并不是真的實(shí)現(xiàn)不了,或許只是開(kāi)發(fā)不想做或者他之前沒(méi)做過(guò),這個(gè)就需要PK了,當(dāng)然有的真的很難實(shí)現(xiàn)或者性價(jià)比很低的設(shè)計(jì),就需要對(duì)交互稿進(jìn)行調(diào)整了。除此之外,有的公司還要求交互有整體管理能力,這就另說(shuō)了。

 

 

四、沒(méi)有交互會(huì)帶來(lái)什么?

產(chǎn)品團(tuán)隊(duì)或許不都有交互崗位,但不可以沒(méi)有好的交互設(shè)計(jì)!

 

1、短期內(nèi)產(chǎn)品使用體驗(yàn)很奇怪

很多人畫(huà)出來(lái)的原型稿甚至是交互稿都遇到過(guò)“用起來(lái)很奇怪”這個(gè)問(wèn)題,其實(shí)是因?yàn)樵O(shè)計(jì)者對(duì)用戶心智、用戶行為、控件規(guī)范、產(chǎn)品范式等的不熟悉造成的這個(gè)問(wèn)題,一個(gè)“夾生”的東西即便邏輯合理也必然會(huì)帶來(lái)“夾生”的體驗(yàn)。此外,范式和規(guī)范的使用只是執(zhí)行時(shí)的一個(gè)選擇而已,對(duì)某規(guī)范的使用未必真正解決當(dāng)前場(chǎng)景下的問(wèn)題,交互設(shè)計(jì)師更多的是通過(guò)對(duì)業(yè)務(wù)的梳理、用戶的洞察來(lái)做選交互范式和規(guī)范的篩選,找到合適的,才能價(jià)值最大化。

 

2、長(zhǎng)期下產(chǎn)品“難用”印象的形成

任何行業(yè),任何產(chǎn)品,產(chǎn)品研發(fā)者可能都不是實(shí)際使用者,術(shù)業(yè)有專攻,對(duì)用戶的理解是一項(xiàng)長(zhǎng)期經(jīng)驗(yàn)積累的過(guò)程,合乎邏輯的,不一定是易用的,易用的不一定是好用的。筆者的經(jīng)驗(yàn)來(lái)看,用戶的使用行為既是“傻”的,也是孕育著無(wú)窮無(wú)盡智慧的,尤其是B端產(chǎn)品,用戶使用的方式可能超乎想象。因此對(duì)用戶行為理解的深度決定了產(chǎn)品與用戶之間的默契度,圍繞一個(gè)痛點(diǎn)市場(chǎng)上總不至于只有一個(gè)產(chǎn)品,如何讓你的產(chǎn)品成為用戶真正的朋友,需要有專業(yè)的人來(lái)研究用戶行為,交互這個(gè)專業(yè)便也是因此而生的。

如今互聯(lián)網(wǎng)紅利愈發(fā)消失殆盡,或許由于資金原因交互崗位并沒(méi)有存在于所有公司或團(tuán)隊(duì),但交互設(shè)計(jì)的專業(yè)度一定永遠(yuǎn)存在,崗位的橫向兼并融合并不能磨滅交互的專業(yè)度,因?yàn)榻换?jiān)守的是用戶體驗(yàn)的底線,讓產(chǎn)品變得或好用、或高效,最終驅(qū)動(dòng)業(yè)可持續(xù)增長(zhǎng),便是這最大的價(jià)值!


作者:陳悅

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》交互設(shè)計(jì)的價(jià)值是什么?

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




基于智能座艙場(chǎng)景的用戶體驗(yàn)設(shè)計(jì)

seo達(dá)人



一、座艙體驗(yàn)的三要素

用戶體驗(yàn)設(shè)計(jì)首先字面意思是用戶+體驗(yàn)。

圖片

圖片

01 座艙內(nèi)的用戶除了駕駛員還要考慮非駕駛員, 非駕駛員也有多種角色:老人/兒童/青年。

圖片

02 體驗(yàn):用戶發(fā)生使用操作的感受。

但實(shí)際用戶體驗(yàn)一定是脫離不了場(chǎng)景的,場(chǎng)景是用戶發(fā)生行為的一個(gè)大環(huán)境。

03 考慮場(chǎng)景的時(shí)候除了考慮的當(dāng)下現(xiàn)實(shí)場(chǎng)景還有未來(lái)場(chǎng)景。

圖片

場(chǎng)景案例:充電全屏展示充電信息

圖片

場(chǎng)景案例:導(dǎo)航交互體驗(yàn),先展開(kāi)詳細(xì)信息,然后再收起信息

圖片

場(chǎng)景案例:蔚來(lái)的360泊車系統(tǒng)開(kāi)啟時(shí)不能喚醒nomi

圖片

而且產(chǎn)品的研發(fā)和功能創(chuàng)新,用戶的體驗(yàn)都是依據(jù)場(chǎng)景體系建立的。所以HMI設(shè)計(jì)過(guò)程當(dāng)中,場(chǎng)景體系化的建立尤為重要。

 

 

二、智能座艙的場(chǎng)景體系化搭建

1、搭建流程

圖片

01 場(chǎng)景發(fā)掘:競(jìng)品分析、用戶畫(huà)像定位、產(chǎn)品定位、用戶旅程圖

場(chǎng)景發(fā)掘首先要把場(chǎng)景和使用的用戶做定位,結(jié)合實(shí)際項(xiàng)目進(jìn)行用戶畫(huà)像定位,確定場(chǎng)景主題,尋找到目標(biāo)用戶進(jìn)行實(shí)車訪談和拍攝。

圖片

02 場(chǎng)景數(shù)據(jù)細(xì)化:網(wǎng)絡(luò)數(shù)據(jù)、用戶訪談、實(shí)車測(cè)評(píng)數(shù)據(jù)、常見(jiàn)高頻數(shù)據(jù)

這一步主要是把用戶訪談收集上來(lái)的數(shù)據(jù),進(jìn)行拆分和細(xì)化,然后篩選出有價(jià)值的數(shù)據(jù)進(jìn)行錄入。

用戶訪談數(shù)據(jù)錄入到數(shù)據(jù)庫(kù)里,產(chǎn)品經(jīng)理和設(shè)計(jì)師會(huì)針對(duì)收集上來(lái)的用戶反饋,進(jìn)行痛點(diǎn)/和爽點(diǎn)的挖掘。提出需求解決方案。

圖片

03 場(chǎng)景應(yīng)用設(shè)計(jì):原型設(shè)計(jì)、界面設(shè)計(jì)

基于場(chǎng)景的應(yīng)用設(shè)計(jì)會(huì)分為兩個(gè)步驟、一個(gè)是原型設(shè)計(jì)、一個(gè)界面設(shè)計(jì)、原型設(shè)計(jì)時(shí)我們更多是組內(nèi)評(píng)估、找專家來(lái)提供指導(dǎo)性意見(jiàn),到了界面設(shè)計(jì)時(shí)候除了專家評(píng)審、可以做出demo給用戶進(jìn)行測(cè)試來(lái)獲得反饋。

圖片

04 場(chǎng)景走查還原場(chǎng)景

在設(shè)計(jì)方案產(chǎn)出完成之后,給用戶還原到我們發(fā)掘的場(chǎng)景去進(jìn)行走查,根據(jù)用戶旅程圖查看有沒(méi)有遺漏的用戶場(chǎng)景和不同的用戶反饋。

圖片

 

2、搭建工具

整個(gè)智能座艙的場(chǎng)景體系化搭建需要幾個(gè)工具,競(jìng)品分析、用戶畫(huà)像定位、產(chǎn)品定位、用戶旅程圖。

用戶調(diào)研方法有很多,我們需要掌握(調(diào)查問(wèn)卷、用戶畫(huà)像、用戶體驗(yàn)地圖、用戶訪談、焦點(diǎn)小組、)

今天核心介紹使用頻率最高的三種用研方法。

2.1 用戶旅程圖

關(guān)注用戶在駕駛階段的行為、方式、心情、痛點(diǎn)、期待。

關(guān)鍵步驟:

① 設(shè)定場(chǎng)景、目標(biāo)、期望(用戶畫(huà)像)

② 確定行為路徑

③ 建立核心地圖

④ 包裝地圖

⑤ 繪制故事板

圖片

2.2 可用性測(cè)試

可用性測(cè)試已經(jīng)成為獲得用戶反饋的流行手段,主要因?yàn)樗麄兩鲜挚欤芸焖俜磻?yīng)出問(wèn)題。

關(guān)鍵步驟:

① 明確測(cè)試目的

② 問(wèn)卷框架的設(shè)計(jì)

③ 投放調(diào)研問(wèn)卷

④ 組織測(cè)試

⑤ 整理輸出結(jié)論

圖片

2.3 5W+1H法則

5W+1H 是選定的項(xiàng)目、工序或操作,可以從原因(Why)、對(duì)象(What)、地點(diǎn)(Where)、人員(Who)、時(shí)間(When)、方法(How)等六個(gè)面進(jìn)行思考。

① 原因—立項(xiàng)背景?

② 對(duì)象—什么功能?

③ 地點(diǎn)— 什么場(chǎng)景下?

④ 人員–駕駛員?/非駕駛員?

⑤ 時(shí)間–什么時(shí)機(jī)?哪個(gè)流程之后?

⑥ 如何–什么方式操作?

圖片

 

 

三、細(xì)化座艙用戶體驗(yàn)的三階段

1、用戶體驗(yàn)的三階段

體驗(yàn)的時(shí)間性有三個(gè)主要組成成分,及熟悉程度、功能依賴和情感依賴。

圖片

1.1 初識(shí)體驗(yàn):

我們?cè)诋a(chǎn)品使用初期的階段,都會(huì)對(duì)產(chǎn)品有個(gè)使用預(yù)期。例如期望產(chǎn)品能提供一個(gè)好的體驗(yàn),或者怕產(chǎn)生不好的體驗(yàn)。

圖片

1.2 使用體驗(yàn):

使用體驗(yàn)分為兩個(gè)階段:使用產(chǎn)品初期和使用產(chǎn)品深度期

進(jìn)入到車內(nèi)試駕或者試乘,試駕員和銷售除了會(huì)讓用戶體驗(yàn)車機(jī)的基礎(chǔ)功能外,主要介紹的就是和競(jìng)品車型的競(jìng)爭(zhēng)功能。

產(chǎn)品深度體驗(yàn)期的時(shí)候,長(zhǎng)期的可用性變得更加重要,而不是最初的易學(xué)性。從而產(chǎn)品的實(shí)用性成為影響我們整體評(píng)估判斷的主要因素。

1.3 獲得體驗(yàn):

最后,當(dāng)我們接受了產(chǎn)品,在我們的日程生活中它參與了我們的社交活動(dòng)。成為了生活當(dāng)中的固定解決問(wèn)題的工具,這個(gè)階段產(chǎn)品體驗(yàn)就具有可識(shí)別性了。

 

2、體驗(yàn)的三條路線

圖片

2.1 體驗(yàn)線路是感官線

我們現(xiàn)在座艙內(nèi)的交互感官有、觸感、聽(tīng)感、視覺(jué)、嗅覺(jué)、語(yǔ)音。用戶在人機(jī)交互的時(shí)候第一時(shí)間獲得直觀感受。

2.2 體驗(yàn)線路是情感線

情感線是諾曼強(qiáng)調(diào)感情在塑造體驗(yàn)中的重要性。比如燈光秀、寵物模式、和擬人化的汽車助手。帶給用戶都是情感上的滿足。這些情感構(gòu)成了與汽車的首次互動(dòng)體驗(yàn)。

圖片

2.3 體驗(yàn)線路的流暢

就像C端和B端一樣,我們交互體驗(yàn)的線路效率和流暢程度,能給用戶增強(qiáng)駕駛樂(lè)趣。或者最大限度減少信息元素的干擾,讓駕駛員沉浸在當(dāng)下。

圖片

 

3、把握用戶體驗(yàn)的多樣性

3.1 個(gè)人價(jià)值觀的差異

首先個(gè)人的因素,因?yàn)槲覀兂砷L(zhǎng)的環(huán)境不同,造成了對(duì)價(jià)值觀的差異,有的人喜歡刺激新穎的產(chǎn)品,有的人喜歡乏善可陳的產(chǎn)品。

圖片

3.2 產(chǎn)品屬性問(wèn)題

第二可能是產(chǎn)品屬性的問(wèn)題,游戲產(chǎn)品帶給用戶就是不斷的快感刺激,工具類型的產(chǎn)品用戶使用流程流暢會(huì)更好。

圖片

3.3 跟隨時(shí)間線的體重心變化

用戶的使用體驗(yàn)對(duì)于時(shí)間的變化,通過(guò)用戶旅程圖,他們對(duì)產(chǎn)品的關(guān)注點(diǎn)會(huì)產(chǎn)生變化,例如用戶剛開(kāi)始對(duì)產(chǎn)品互動(dòng)中更關(guān)注新的功能和刺激的體驗(yàn)。但在使用過(guò)一段時(shí)間后他們可能不會(huì)再關(guān)注他的新穎程度,更關(guān)注產(chǎn)品的實(shí)用性和效率。所以需要我們?cè)诓煌氖褂秒A段重新幫助用戶提升體驗(yàn)。

圖片

 

原文地址:七醬設(shè)計(jì)筆記

作者:郝小七

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》基于智能座艙場(chǎng)景的用戶體驗(yàn)設(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



這10年,我都在這里看全球最頂尖的app產(chǎn)品!

seo達(dá)人

圖片

最關(guān)鍵的是,點(diǎn)進(jìn)去每一個(gè)app,里面有這個(gè)app的所有截圖:

圖片

簡(jiǎn)直就是一個(gè)吸取靈感的天堂,太nice了。(網(wǎng)址在文末)

那我們有了這個(gè)好東西,怎么去參考借鑒呢?

今天菜心就給大家一些啟發(fā),希望能對(duì)大家有所幫助。

 

一、圖標(biāo)雙線條風(fēng)格

比如像下面這個(gè)app,體育競(jìng)技類的:

圖片

我們仔細(xì)觀察底部主圖標(biāo):

圖片

會(huì)發(fā)現(xiàn)他的風(fēng)格是雙線條的,在國(guó)內(nèi)還很少見(jiàn)過(guò),而這種形式我們就可以參考參考,省的來(lái)被別人說(shuō)你得東西太同質(zhì)化!

當(dāng)然,也不能亂參考,一定要說(shuō)清楚理念和原因,比如像人家體育類的app,用雙線條風(fēng)格,把這個(gè)雙線條比喻成跑道,我感覺(jué)沒(méi)毛病,哈哈。

 

二、學(xué)習(xí)人家的一些小創(chuàng)意

比如,像這個(gè)地圖上的小創(chuàng)意點(diǎn),人物拿著一個(gè)巨大的咖啡杯,和人物形成強(qiáng)烈的大小對(duì)比,就很有趣味性:

圖片

放大看,人物還伸出來(lái)個(gè)舌頭,挺饞的感覺(jué):

圖片

這種小創(chuàng)意,當(dāng)你做一些場(chǎng)景的時(shí)候,就可以借鑒,比如一些地圖啊、外賣啊,都可以嘗試參考參考。

 

三、老板說(shuō)你的閃屏太單調(diào)

閃屏是app的重要頁(yè)面之一,我們看到的大部分閃屏都是一個(gè)簡(jiǎn)單的logo,比如:

圖片

咱就是說(shuō),萬(wàn)一哪天你的老板不喜歡這種簡(jiǎn)單的形式,像來(lái)點(diǎn)設(shè)計(jì)感的閃屏,那你就可以去這個(gè)網(wǎng)站上找靈感,你就在主頁(yè)劃拉就完了,你框框一頓劃拉,
就能發(fā)現(xiàn)有很多參考形式,比如這種圖形類的:

圖片

這種插畫(huà)類的:

圖片

這種圖片類的:

圖片

你就咔咔參考唄,靈感老了去了!

 

四、看看別人的插畫(huà)風(fēng)格

也可以看看別人的app里面融入的插畫(huà)風(fēng)格是什么樣的,千萬(wàn)別一畫(huà)插圖就是這樣的:

圖片

看看別人的風(fēng)格和造型,最起碼可以提高一些審美,也可以提高一些對(duì)于差異化的視覺(jué)敏感度:

圖片

當(dāng)然,最好可以自己動(dòng)手練一練,那樣會(huì)吸收的更好!

 

總結(jié)

除了這些,看看差異化的風(fēng)格,也都是可以的,像這些

圖片

說(shuō)不定,后面什么時(shí)候就能夠用到,參考一番。

好啦,以上就是給大家的一些靈感啟發(fā), 主要是告訴大家,拿到一個(gè)優(yōu)秀的網(wǎng)站后,怎么尋找靈感,吸取靈感,好好的把它用起來(lái),而不是放到收藏夾里面吃灰。

網(wǎng)址:https://mobbin.com/

好好用起來(lái),希望可以幫到大家!下期見(jiàn)!


作者:菜心

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》這10年,我都在這里看全球最頂尖的app產(chǎn)品!

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



2022 PANTONE 最美色彩來(lái)啦!

seo達(dá)人

一、全新Post-It®Notes

Post-it 與彩通色彩研究所共同開(kāi)發(fā),推出 11 種全新 Post-it Notes 系列,以令人耳目一新的色調(diào)展現(xiàn)色彩的力量。激發(fā)創(chuàng)意生產(chǎn)力!

圖片

 Post-it Notes 

Post-it 始終提供繽紛的畫(huà)布,為人們的想法增添些許鮮艷的色彩,而在七年沒(méi)有重大的視覺(jué)轉(zhuǎn)變之后,彩通色彩研究所獲選成為 3M 的合作伙伴,在全球推出重新打造的 Post-it Notes 和 Post-it Super Sticky 系列。

 

三種精選調(diào)色板包括:

1、花卉幻想

這個(gè)調(diào)色板充滿新鮮芬芳的春季花卉,陽(yáng)光正面的氣息能帶來(lái)活力與好心情。

2、能量激發(fā)

圖片

這個(gè)系列中活力四射的色彩能點(diǎn)亮您的心情,讓訊息清晰透徹。

鮮艷色彩混搭成組,振奮人心的色調(diào)以充滿活力的配色之姿自然呈現(xiàn)。這些動(dòng)感活潑的色調(diào)使人留下大膽鮮明的印象,傳達(dá)生氣蓬勃的歡樂(lè)訊息,以急迫感和力量激勵(lì)使用者采取實(shí)際行動(dòng)。

3、單純靜謐

圖片

透過(guò)干凈現(xiàn)代的單純靜謐系列,為提醒事項(xiàng)便利貼注入一絲禪意。

和諧混搭干凈俐落的經(jīng)典顏色,呈現(xiàn)簡(jiǎn)潔外觀和平靜狀態(tài),突顯人們對(duì)簡(jiǎn)化、清理和整理的渴望。這幾種獨(dú)特色調(diào)穩(wěn)定可靠且歷久不衰,使用溫柔且老少咸宜的粉紅色來(lái)達(dá)到強(qiáng)調(diào)的目的,傳遞直接而單純的訊息,讓輕柔的氛圍靜靜地?fù)嵛咳诵摹?

 

二、多彩的元宇宙

元宇宙中的色彩:探索色彩在虛擬與現(xiàn)實(shí)之間的關(guān)系。

圖片

1、視覺(jué)語(yǔ)言

許多人幾乎無(wú)法想像生活在眼睛所見(jiàn)只有黑白灰、沒(méi)有其他色彩的世界;我們已經(jīng)習(xí)慣被色彩包圍,色彩更是定義世界的視覺(jué)訊號(hào),讓我們感知與周遭環(huán)境和所愛(ài)事物的連結(jié)。約有 80% 的人生體驗(yàn)會(huì)經(jīng)過(guò)雙眼吸收,因此視覺(jué)訊號(hào)對(duì)于傳達(dá)訊息至關(guān)重要。

圖片

色彩在元宇宙的使用方式與實(shí)體世界大致無(wú)異,唯一的差別在于:

實(shí)體世界中的色彩有其局限。物體自然會(huì)是一種色彩,可以改變,不過(guò)需要資源、時(shí)間和精力。此外數(shù)碼光譜中的某些色彩無(wú)法在實(shí)體世界重現(xiàn)。在元宇宙中,色彩可以立即視需求調(diào)整。

圖片

元宇宙中的色彩沒(méi)有任何限制。從你在 Web 3.0 中的外貌到衣著,或者是你擁有的產(chǎn)品,這些色彩都可以隨你的心情以及你希望在數(shù)碼世界呈現(xiàn)的方式改變,不論它們?cè)趯?shí)體世界呈現(xiàn)的色彩為何。元宇宙將會(huì)帶來(lái)自由。

圖片

三、提契諾的色彩

Ticino Turismo 了解色彩會(huì)喚起我們對(duì)旅游地點(diǎn)的珍藏回憶,并激發(fā)未來(lái)的旅游計(jì)畫(huà)。因此他們與彩通色彩研究所 (Pantone Color Institute) 的全球色彩專家團(tuán)隊(duì)合作,透過(guò)各種色彩描述造訪瑞士著名提契諾地區(qū)的體驗(yàn)。

(點(diǎn)擊圖片前往原文查看視頻)

icino Turismo 與彩通色彩研究所合作精選出五種最能代表提契諾的色彩,用來(lái)傳達(dá)春夏兩季訪客在當(dāng)?shù)厮?jiàn)識(shí)到的美景與快樂(lè)體驗(yàn)。

圖片

彩通色彩研究所以這些色彩為基礎(chǔ)創(chuàng)造出 Ticino Camellia Pink (提契諾山茶花粉紅),用來(lái)代表點(diǎn)綴這片地區(qū)的艷粉色花朵;Bellinzona Fortress Grey (貝林佐納城堡灰),這種帶有灰色調(diào)的暖褐灰色正是當(dāng)?shù)刂惺兰o(jì)城堡呈現(xiàn)的色彩;Brissago Blue (布利薩戈藍(lán)),這是布利薩戈島周圍澄澈湖水的色彩;Lugano Sunset Orange (盧加諾日落橘),呈現(xiàn)當(dāng)?shù)厝章涞拿匀斯獠?;以?nbsp;Valle di Muggio Green (穆吉奧山谷綠),展現(xiàn)郁郁蔥蔥的山谷色彩。

 

四、周大福的色彩

彩通色彩研究所最近與周大福集團(tuán)合作,透過(guò)提供包含三種新色調(diào)的時(shí)尚調(diào)色盤,結(jié)合中國(guó)傳統(tǒng)風(fēng)格和現(xiàn)代審美,借以襯托周大福集團(tuán)標(biāo)志性的招牌紅色。

圖片

全新周大福調(diào)色盤體現(xiàn)了融合傳統(tǒng)色彩與現(xiàn)代風(fēng)格的故事。呈現(xiàn)出精致感觸、完美品質(zhì)和現(xiàn)代雅趣,全新周大福調(diào)色盤既融合了傳統(tǒng)的優(yōu)雅,也繼承了現(xiàn)代風(fēng)格的美感和精神。

圖片

全新調(diào)色板:融合中國(guó)傳統(tǒng)風(fēng)格和現(xiàn)代審美

為強(qiáng)調(diào)大福紅 (Tai Fook Red) 濃郁而充滿活力的強(qiáng)大吸引力,我們透過(guò)暖金色突顯出一系列相容的色調(diào),打造和諧的色彩故事。

圖片

這個(gè)全新調(diào)色板展現(xiàn)了對(duì)傳承、幸福和信念的現(xiàn)代詮釋,襯托出大福紅 (Tai Fook Red) 優(yōu)雅、現(xiàn)代且具備寧?kù)o力量的特點(diǎn),透過(guò)現(xiàn)代化且積極的態(tài)度展現(xiàn)集團(tuán)對(duì)品質(zhì)的承諾。

 

五、西派金銅  City Park Golden Brass

彩通色彩研究所最近與中國(guó)鐵建房地產(chǎn)集團(tuán)有限公司 (CRCCRE) 合作,提供宏觀色彩趨勢(shì)指引并建立招牌色彩,做為該公司的主要品牌視覺(jué)形象,用于公司旗下不同的重慶西派城住宅。

圖片

這個(gè)全新色彩能夠向潛在買主傳達(dá)出重慶西派城的居住環(huán)境和生活風(fēng)格,以及CRCCRE 的愿景:成為具價(jià)值的房產(chǎn)開(kāi)發(fā)、工程設(shè)計(jì)及資產(chǎn)管理商,借此提升中國(guó)生活水準(zhǔn),同時(shí)解決人們?nèi)找嬖鲩L(zhǎng)的需求,滿足他們追求自然景觀環(huán)繞,以及求取身心靈平衡的愿望。

圖片

在考量中國(guó)生活風(fēng)格趨勢(shì)的美學(xué),以及中國(guó)居民未來(lái)的追求后,我們創(chuàng)造出「西派金銅 (City Park Golden Brass) 」來(lái)代表重慶西派城的品牌定位:拘謹(jǐn)、優(yōu)雅、穩(wěn)定發(fā)展、現(xiàn)代化、年輕且時(shí)尚,同時(shí)仍支持及推廣積極進(jìn)取的哲學(xué)。


作者:劉濤

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》2022 PANTONE 最美色彩來(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



客戶關(guān)系管理(CRM)產(chǎn)品解析

seo達(dá)人


圖片

不同的產(chǎn)品,對(duì)于頁(yè)面的模式、表現(xiàn)上都會(huì)有明顯的差異,今天我們就來(lái)聊聊 客戶關(guān)系管理系統(tǒng)

 

 

一、定義

CRM 的全稱為客戶關(guān)系管理系統(tǒng),是 Customer Relationship Management 的縮寫(xiě),顧名思義就是提供給銷售人員進(jìn)行使用的管理系統(tǒng),來(lái)幫助銷售人員管理他手下的客戶。從產(chǎn)品類型來(lái)看,CRM產(chǎn)品是屬于垂直業(yè)務(wù)型的產(chǎn)品,主要是為各行各業(yè)的企業(yè),提供管理銷售的服務(wù)

 

當(dāng)然在CRM產(chǎn)品當(dāng)中目前主要分為兩個(gè)賽道,分別是以:Salesforce、紛享銷客、銷售易、悟空CRM 為首的管理型CRM,它們最為主要的功能是管理客戶,也就是將銷售人員手中的客戶,通過(guò)公司的CRM系統(tǒng)進(jìn)行統(tǒng)一的管理,能夠保證企業(yè)的權(quán)益不會(huì)受到傷害

而另一個(gè)賽道則是SCRM,這應(yīng)該算是國(guó)內(nèi)比較火的新名詞(其實(shí)也出現(xiàn)了很長(zhǎng)一段時(shí)間了),它的全稱是 Social Customer Relationship Management 也就是社交化客戶關(guān)系管理系統(tǒng)。主要典型的產(chǎn)品包含:EC、塵鋒、探馬、微盛 等等…

圖片

如何去理解SCRM?

比如我們現(xiàn)在日常溝通、獲取信息,會(huì)從以前的傳統(tǒng)媒體像是 “電視、報(bào)紙、收音機(jī)” ,逐漸遷移到 微信、知乎、小紅書(shū)、抖音 等等,而這些社交媒體上我們的各種喜好、最近發(fā)生的事情,都能夠在SCRM當(dāng)中展示,并且他可以根據(jù)你的喜好,來(lái)與你進(jìn)行溝通進(jìn)而幫助它進(jìn)行獲客、成單

比如今天我想買 Figma ,然后我又在微信朋友圈當(dāng)中吐槽 Sketch 很卡,那作為銷售的你肯定會(huì)給我推銷說(shuō),咱們 Figma 一點(diǎn)也不卡。當(dāng)然SCRM的功能還會(huì)有很多,由于篇幅有限,我們目前分析還是以CRM為主,再加上SCRM篇幅太大,后面在做分析?;蛘呤怯性谶@些行業(yè)工作的小伙伴,可以在評(píng)論區(qū)進(jìn)行補(bǔ)充

 

 

二、作用

想要了解CRM產(chǎn)品究竟能夠給用戶帶來(lái)什么作用,我們今天換一個(gè)視角,來(lái)說(shuō)說(shuō)如果企業(yè)不使用CRM,會(huì)有哪些后果

 

1、客戶安全性很難保證

因?yàn)樵趥鹘y(tǒng)的銷售業(yè)務(wù)模式當(dāng)中,銷售人員可以與客戶直接進(jìn)行對(duì)接,企業(yè)無(wú)法對(duì)銷售進(jìn)行合理的管控,所以經(jīng)常會(huì)發(fā)生客戶跟著銷售“跑了”,也就是銷售離職,帶走了之前他負(fù)責(zé)的客戶。這個(gè)時(shí)候你作為企業(yè)老板即沒(méi)有掌握客戶的基本信息,同時(shí)對(duì)于這位客戶的經(jīng)歷也不了解,這樣很容易就會(huì)流失一個(gè)客戶。而客戶對(duì)于企業(yè)來(lái)說(shuō)至關(guān)重要,因?yàn)槊恳粋€(gè)客戶都是企業(yè)通過(guò)運(yùn)營(yíng)人員溝通獲取來(lái)的,因此企業(yè)的客戶安全性無(wú)法得到保證(這也是為什么很多企業(yè)選擇使用企業(yè)微信而不是個(gè)人微信的原因)

 

2、數(shù)據(jù)信息不夠統(tǒng)一

一個(gè)銷售獲客的渠道有很多,其中包含名片、微信推薦、電話分享 等,而這些客戶信息,如果不統(tǒng)一管理,就會(huì)變成一個(gè)個(gè)孤島,對(duì)于企業(yè)的日常管理是非常麻煩,無(wú)法全局監(jiān)控
當(dāng)然企業(yè)也可以將數(shù)據(jù)統(tǒng)一放在傳統(tǒng)的Excel表格當(dāng)中,但是表格傳播過(guò)于簡(jiǎn)單,風(fēng)險(xiǎn)太大,并且無(wú)法去做協(xié)同,一旦后續(xù)數(shù)據(jù)增多也會(huì)導(dǎo)致整個(gè)管理非常的混亂,不能分權(quán)限將企業(yè)的所有客戶統(tǒng)一進(jìn)行查看

圖片

 

3、難以建立良好的客戶關(guān)系

傳統(tǒng)方式管理客戶的時(shí)候,銷售人員對(duì)于客戶印象主要來(lái)自 之前的微信聊天記錄以及朋友圈,而想要深入了解這位客戶的具體信息、具體對(duì)接的聯(lián)系人、以及公司的具體規(guī)模,就可能會(huì)因?yàn)闀r(shí)間的關(guān)系而忘記,因此傳統(tǒng)的方式無(wú)法追蹤客戶,將客戶的資料統(tǒng)一整理

圖片

 

4.銷售難以管理

對(duì)于企業(yè)的銷售人員來(lái)說(shuō),他們的工作常年在外,因此企業(yè)很難對(duì)手下的銷售進(jìn)行管理,比如想了解員工今天的工作情況,又或者是員工的后續(xù)工作安排。之前企業(yè)都是通過(guò)收集員工每日工作匯報(bào)來(lái)判斷,依舊很低效率
CRM系統(tǒng)可以連接日常工作和業(yè)務(wù),在輔助銷售人員完成工作的同時(shí),也完成了對(duì)信息的收集,管理者可以清晰地看到該客戶的跟進(jìn)記錄,以及重點(diǎn)客戶員工是如何跟進(jìn)的,提高了管理團(tuán)隊(duì)的洞察力

圖片

其實(shí)了解CRM產(chǎn)品的作用,最終的目的就是為了了解這款產(chǎn)品能夠給企業(yè)帶來(lái)什么價(jià)值,什么核心的能力能夠驅(qū)動(dòng)客戶進(jìn)行購(gòu)買,了解了過(guò)后你才能知道這個(gè)功能帶來(lái)的價(jià)值是什么

三、業(yè)務(wù)

關(guān)于CRM的業(yè)務(wù),我們主要會(huì)分為 專業(yè)詞匯、關(guān)鍵角色、流程 三個(gè)維度進(jìn)行分析,我們先來(lái)了解一下常見(jiàn)的專業(yè)詞匯

 

1、專業(yè)詞匯

銷售線索:銷售線索是與客戶初次接觸獲得的原始信息, 可以是從展會(huì)中獲得的名片,通過(guò)推廣活動(dòng)獲得的電話號(hào)碼 ,或是會(huì)議、廣告、外部購(gòu)買等渠道獲得的客戶簡(jiǎn)單信息,然后通過(guò)管理和跟進(jìn)可以轉(zhuǎn)化為客戶

線索池:將線索通過(guò)按不同行業(yè)不同地區(qū)或是其它的方式組合一起,即成為線索池,如上海區(qū)線索池、北京區(qū)線索池、教育行業(yè)線索池、金融行業(yè)線索池等

客戶:客戶是指有業(yè)務(wù)往來(lái)企業(yè)、團(tuán)體或個(gè)人,是企業(yè)的重要資源,可以通過(guò)線索轉(zhuǎn)化而來(lái),或是銷售挖掘等多種渠道獲取

公海:按不同行業(yè)不同地區(qū)或是按某種相同特性組合一起的客戶分組,即成為公海,如上海區(qū)公海、北京區(qū)公海、教育行業(yè)公海等

聯(lián)系人:即與企業(yè)直接聯(lián)系的客戶方相關(guān)人員。如果是企業(yè)客戶,聯(lián)系人是您與企業(yè)聯(lián)系溝通的人。如果是個(gè)人客戶,聯(lián)系人可以是與客戶有關(guān)系的溝通聯(lián)系人

商機(jī):商機(jī)是與客戶做一筆生意的跟進(jìn)過(guò)程,如果是企業(yè)客戶,一個(gè)完整的銷售周期大概包括產(chǎn)品咨詢、報(bào)價(jià)、方案評(píng)估及最后的贏單或輸單

圖片

 

2、關(guān)鍵角色

在CRM產(chǎn)品里面,會(huì)涉及到形形色色不同的人員,其中最主要的角色包含:市場(chǎng)、銷售、銷售主管、老板

市場(chǎng):主要負(fù)責(zé)整個(gè)產(chǎn)品的營(yíng)銷以及線索的分配,與CRM產(chǎn)品相關(guān)的就是會(huì)安排市場(chǎng)人員來(lái)與銷售進(jìn)行對(duì)接,將他們?cè)?官網(wǎng)、內(nèi)部推薦 得到的線索流轉(zhuǎn)給銷售

銷售:銷售人員對(duì)于企業(yè)來(lái)說(shuō)非常關(guān)鍵,他主要是企業(yè)與客戶對(duì)接的重要人員,是這份訂單是否成功的關(guān)鍵角色
雖然都叫銷售,但是會(huì)根據(jù)工作性質(zhì)的不同,將銷售分為:電話銷售、產(chǎn)品銷售與大客戶銷售

電話銷售:電銷通常是銷售當(dāng)中最基礎(chǔ)的,通常就是拿著通訊錄不停地?fù)艽蚩蛻綦娫?,算是一個(gè)重復(fù)性非常高的職位

產(chǎn)品銷售:產(chǎn)品銷售更多就是自有產(chǎn)品,當(dāng)線索來(lái)了過(guò)后,銷售人員也會(huì)與客戶去電話溝通,但是溝通的目的是了解你公司的具體情況,分析是否有潛在的購(gòu)買需求,后續(xù)主要任務(wù)便是促成訂單的成交
比如你們每次去試用別人的B端產(chǎn)品的時(shí)候,都是產(chǎn)品銷售來(lái)與你對(duì)接(別以為我不知道你們每天在做什么~)

大客戶銷售:大客戶銷售顧名思義,主要針對(duì)的是企業(yè)較為重要的客戶,他們?cè)谡w的決策層面鏈路較長(zhǎng)、金額較大,因此會(huì)安排經(jīng)驗(yàn)豐富的人員進(jìn)行對(duì)接

軟件實(shí)施:負(fù)責(zé)現(xiàn)場(chǎng)培訓(xùn)、協(xié)助項(xiàng)目驗(yàn)收、負(fù)責(zé)需求的初步確認(rèn)、把控項(xiàng)目進(jìn)度、與客戶溝通個(gè)性化需求、負(fù)責(zé)項(xiàng)目維護(hù)??傊褪悄阗?gòu)買了產(chǎn)品過(guò)后,需要實(shí)施人員來(lái)進(jìn)行項(xiàng)目落地(有的公司沒(méi)有實(shí)施會(huì)讓銷售人員負(fù)責(zé))

客戶成功:客戶成功扮演主要是提升客戶的認(rèn)同感,讓客戶感受到使用這款產(chǎn)品能夠給他帶來(lái)價(jià)值。簡(jiǎn)單來(lái)說(shuō)客戶成功就是要找出客戶的問(wèn)題,并制定相應(yīng)的解決方案,然后基于不同的產(chǎn)品,把解決方案落進(jìn)系統(tǒng)??蛻粲袉?wèn)題反饋,就需要與客戶成功進(jìn)行對(duì)接,評(píng)判客戶成功好壞的標(biāo)準(zhǔn)就是看產(chǎn)品的續(xù)費(fèi)率

 

3、流程

要了解一款B端產(chǎn)品的業(yè)務(wù),那業(yè)務(wù)流程自然是十分重要,因?yàn)檫@樣能夠最快的了解清楚整個(gè)產(chǎn)品的流轉(zhuǎn)方式(當(dāng)然不同公司對(duì)于產(chǎn)品的流程不同,只是作為參考)

圖片

在CRM產(chǎn)品當(dāng)中,所有的客戶都是從線索開(kāi)始,因此線索是作為整個(gè)CRM產(chǎn)品的起點(diǎn),也是業(yè)務(wù)流程當(dāng)中的最主要一步。當(dāng)然針對(duì)于線索,他最主要的特點(diǎn)便是線索來(lái)源,一般分為:官網(wǎng)、展會(huì)、朋友推薦、以及新媒體渠道當(dāng)中獲取到的線索(這可能就是SCRM存在原因)
而在線索這里,通常系統(tǒng)會(huì)去自動(dòng)對(duì)接 官網(wǎng) 當(dāng)中的提交的表單線索,同時(shí)也會(huì)給各個(gè)員工開(kāi)放自己新建線索的入口(有的企業(yè),新增一個(gè)有效線索是有對(duì)應(yīng)的提成)

當(dāng)然線索在類型上主要分為:線索池、有效線索、培育線索

線索池:就是將所有的線索都放在一個(gè)地方,方便銷售人員進(jìn)行選擇

有效線索:有真正購(gòu)買意愿的線索,通常敏銳的市場(chǎng)人員會(huì)從 規(guī)模、電話、行業(yè) 等綜合信息進(jìn)行判斷

培育線索:也就是客戶對(duì)于這個(gè)產(chǎn)品比較猶豫,對(duì)于產(chǎn)品購(gòu)買意愿不太明確,因此可以通過(guò)培育線索,讓他了解到產(chǎn)品過(guò)后,轉(zhuǎn)化為有效線索

當(dāng)你完成線索流轉(zhuǎn)過(guò)后,你就會(huì)是一個(gè)商機(jī),這也就代表著你對(duì)咱們的產(chǎn)品非常感興趣,開(kāi)始詢問(wèn)報(bào)價(jià),銷售人員就會(huì)給你去做各種各樣的演示與溝通
而在每一次銷售與客戶的溝通情況,企業(yè)都會(huì)要求他去錄入跟進(jìn)信息,如果不填寫(xiě)可能會(huì)面臨罰款的風(fēng)險(xiǎn)

然后就是銷售人員一次又一次的和客戶溝通,商討價(jià)格直到客戶簽單,在此過(guò)程當(dāng)中就會(huì)涉及到商務(wù),然后就是 訂單、合同、回款、開(kāi)票 等流程階段 來(lái)對(duì)整個(gè)過(guò)程進(jìn)行統(tǒng)一管理,并且所有的過(guò)程都會(huì)在系統(tǒng)當(dāng)中進(jìn)行記錄,直到最后的贏單

有得必有失,那后續(xù)輸單也是同樣,便是沒(méi)有取得進(jìn)展,最后以失敗告終

 

我們來(lái)整理一下,舉一個(gè)實(shí)際例子,比如現(xiàn)在想要去了解一款人事管理系統(tǒng),你打開(kāi)了薪人薪事的官網(wǎng),在他們的官網(wǎng)當(dāng)中經(jīng)過(guò)簡(jiǎn)單的了解,填寫(xiě)了你的企業(yè)信息與表單

圖片

緊接著,你的信息就會(huì)給到市場(chǎng)人員,他們會(huì)根據(jù)你的 表單信息、所在城市、公司規(guī)模 給你安排更為合適的銷售人員來(lái)對(duì)你進(jìn)行跟進(jìn)

在跟進(jìn)的過(guò)程當(dāng)中就會(huì)根據(jù)你的各種 “反饋與表現(xiàn)” ,將你定義為各種名稱 線索、商機(jī)、客戶
并且目的只有一個(gè),就是讓你購(gòu)買產(chǎn)品,后續(xù)涉及到 訂單、合同、打款 等,都屬于正常流程當(dāng)中非常重要的一環(huán),直到最終的贏單與輸單

 

 

四、頁(yè)面

CRM產(chǎn)品當(dāng)中較為重要的頁(yè)面,因?yàn)樽鳛樵O(shè)計(jì)師,我們最終的設(shè)計(jì)思考一定是通過(guò)頁(yè)面來(lái)去呈現(xiàn),而前面的整體業(yè)務(wù)模塊則更多是為了理解它們之間的關(guān)系,將問(wèn)題講清楚

1、客戶詳情頁(yè)

客戶詳情頁(yè)面作為CRM里面最為重要的一個(gè)頁(yè)面,它主要是呈現(xiàn)這個(gè)客戶當(dāng)中的所有完整信息。比如銷售人員,他高頻進(jìn)入的頁(yè)面一定是客戶的詳情頁(yè)面,因?yàn)樗胍私膺@個(gè)客戶,在整個(gè)過(guò)程當(dāng)中了解哪些信息、想要得到什么內(nèi)容都可以通過(guò)客戶想以企業(yè)快速的找到
但是由于客戶詳情頁(yè) 頁(yè)面的整體設(shè)計(jì)難度較大,會(huì)存在大量信息以及關(guān)聯(lián)的內(nèi)容,因此客戶詳情頁(yè)更加考驗(yàn)設(shè)計(jì)師的信息處理能力。這里分享了 Hubspot、Salesforce、紛享銷客、銷售易、悟空CRM 的客戶詳情頁(yè)

圖片

 

2、客戶列表頁(yè)

客戶列表頁(yè)更多就是呈現(xiàn)數(shù)據(jù),和普通B端產(chǎn)品的列表頁(yè)基本相同,只是說(shuō)會(huì)根據(jù)不同的產(chǎn)品類型有所調(diào)整。比如CRM產(chǎn)品,它更加強(qiáng)調(diào)的就是客戶信息的快速檢索以及快速尋找,因此你會(huì)發(fā)現(xiàn)在產(chǎn)品里面它的篩選功能做的非常強(qiáng)大

圖片

當(dāng)然關(guān)于表格的內(nèi)容我們這里就不做過(guò)多的贅述,因?yàn)橹皫灼谕ㄓ玫谋砀裎恼隆R呀?jīng)寫(xiě)得非常詳細(xì),感興趣的話可以去看一下咱們之前的表格文章

3、跟進(jìn)記錄的填寫(xiě)

跟進(jìn)記錄在CRM產(chǎn)品里面是非常重要的板塊,因?yàn)楦M(jìn)記錄也就意味著銷售人員需要去反復(fù)的填寫(xiě)。有點(diǎn)像一個(gè)快速的表單讓我需要把每一次我們具體聊的內(nèi)容寫(xiě)到整個(gè)系統(tǒng)里面來(lái)
通常一個(gè)銷售非常規(guī)范的公司,會(huì)要求銷售人員把和顧客每一次的數(shù)據(jù)都記錄到跟進(jìn)記錄里面,因此在跟進(jìn)記錄當(dāng)中,我們要去考慮他如何頻繁去呈現(xiàn),以及如何快速的去閱讀

圖片

 

 

五、CRM產(chǎn)品對(duì)于設(shè)計(jì)師的影響

聊完了CRM產(chǎn)品過(guò)后,我們來(lái)說(shuō)說(shuō)整個(gè)產(chǎn)品會(huì)對(duì)設(shè)計(jì)師造成哪些影響
因?yàn)樵谡麄€(gè)的數(shù)據(jù)過(guò)程當(dāng)中,我們需要去關(guān)注的點(diǎn)非常的多

1、了解用戶習(xí)慣

簡(jiǎn)單來(lái)說(shuō),其實(shí)CRM產(chǎn)品本身就是為銷售人員服務(wù)的一種產(chǎn)品類型,那作為設(shè)計(jì)師了解 銷售的日常習(xí)慣就顯得尤為重要。雖然在文章當(dāng)中已經(jīng)講的過(guò)于詳細(xì),但是你會(huì)發(fā)現(xiàn),用戶的習(xí)慣當(dāng)中,不同的產(chǎn)品類型,它的日常習(xí)慣本身就會(huì)有所不同,像是 電話銷售、產(chǎn)品銷售、大客戶銷售、傳統(tǒng)業(yè)務(wù)銷售,其實(shí)這對(duì)于我們來(lái)說(shuō),更需要了解用戶的習(xí)慣才能更好的去做設(shè)計(jì)

 

2、懂得業(yè)務(wù)

因?yàn)镃RM產(chǎn)品本身是難以理解的你,也就導(dǎo)致了我們作為設(shè)計(jì)師需要快速的了解業(yè)務(wù),去懂業(yè)務(wù)究竟應(yīng)該怎么去實(shí)現(xiàn)
比如和同事快速的溝通,進(jìn)而快速掌握業(yè)務(wù)信息,又或者是尋找各種資料幫助你了解業(yè)務(wù)。那關(guān)于這些內(nèi)容我們之前也有講過(guò),可以翻一翻,這里就不展開(kāi)去贅述

 

3、快速轉(zhuǎn)換

CRM本質(zhì)上是一個(gè)針對(duì)于多行業(yè)的產(chǎn)品類型,也就導(dǎo)致了我們需要在設(shè)計(jì)的過(guò)程當(dāng)中快速的進(jìn)行切換。需要我們將用戶多行業(yè)的需求進(jìn)行整合,因?yàn)樵诠ぷ鳟?dāng)中你確實(shí)會(huì)發(fā)現(xiàn)不同的企業(yè),他的關(guān)注點(diǎn)是不太一樣的。那如何把這不同的關(guān)注點(diǎn)進(jìn)行融合整理,就需要設(shè)計(jì)師充分的參與才行

 

作者:CE青年

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》客戶關(guān)系管理(CRM)產(chǎn)品解析

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



設(shè)計(jì)師能力建設(shè)(3):管理能力

seo達(dá)人


圖片

 

 

一、自我管理

每個(gè)公司都有設(shè)計(jì)師的成長(zhǎng)路徑,不同的職級(jí)對(duì)設(shè)計(jì)師能力要求不一樣。初入職場(chǎng)的設(shè)計(jì)新人,需要對(duì)接好工作需求,輸出合理的設(shè)計(jì)方案。而工作多年的設(shè)計(jì)師,則要從設(shè)計(jì)角度考慮如何為產(chǎn)品帶來(lái)正向業(yè)務(wù)價(jià)值,建立設(shè)計(jì)影響力、推動(dòng)設(shè)計(jì)工作效率提升、帶動(dòng)新人成長(zhǎng)等等。

因此設(shè)計(jì)師需要參考崗位標(biāo)準(zhǔn),有意識(shí)地做好設(shè)計(jì)能力提升。

 

1、擴(kuò)展知識(shí)儲(chǔ)備

雖然設(shè)計(jì)師的輸出成果以界面設(shè)計(jì)為主,實(shí)際上設(shè)計(jì)師是復(fù)合型的崗位。

例如C端產(chǎn)品中常見(jiàn)的Banner設(shè)計(jì),設(shè)計(jì)師要明白業(yè)務(wù)的核心利益點(diǎn)是什么,或者業(yè)務(wù)方希望傳遞給用戶怎樣的信息,也要知道什么樣的信息對(duì)用戶更有吸引力。在此基礎(chǔ)上,結(jié)合設(shè)計(jì)趨勢(shì),考慮色彩、動(dòng)效、信息層級(jí)等細(xì)節(jié)因素,才能更好地完成方案設(shè)計(jì)。

在B端產(chǎn)品中更是如此,很多時(shí)候產(chǎn)品經(jīng)理的PRD表達(dá)的是功能設(shè)計(jì),并沒(méi)有足夠的用戶場(chǎng)景信息,設(shè)計(jì)師要從用戶場(chǎng)景出發(fā),充分地理解業(yè)務(wù)需求,才能做出有價(jià)值的設(shè)計(jì)方案,否則設(shè)計(jì)方案很可能只是將產(chǎn)品功能翻譯成為了系統(tǒng)界面。

所以設(shè)計(jì)師需要橫向擴(kuò)展業(yè)務(wù)領(lǐng)域,縱向提升設(shè)計(jì)能力,擴(kuò)展個(gè)人的知識(shí)儲(chǔ)備,并能夠在產(chǎn)品需求中快速應(yīng)用。

圖片

設(shè)計(jì)師的知識(shí)儲(chǔ)備更多地依靠平時(shí)積累。例如可以通過(guò)行業(yè)研究報(bào)告、競(jìng)品分析,更宏觀地理解整個(gè)行業(yè)的發(fā)展變化,幫助自己更好地理解產(chǎn)品需求;通過(guò)設(shè)計(jì)理論、行業(yè)展會(huì)學(xué)習(xí)用戶心理、設(shè)計(jì)方法、提升個(gè)人的設(shè)計(jì)思維;通過(guò)團(tuán)隊(duì)或者業(yè)內(nèi)設(shè)計(jì)師交流,解決工作中的設(shè)計(jì)難題。

 

2、從輸入到輸出

除了基礎(chǔ)的能力提升,設(shè)計(jì)師還要注重設(shè)計(jì)思維提升。

在工作中,設(shè)計(jì)師會(huì)有各種思考、總結(jié)復(fù)盤,這些都是設(shè)計(jì)師快速成長(zhǎng)的助推器。但是這些思考和復(fù)盤通常是散點(diǎn)式、碎片化的,設(shè)計(jì)師可以嘗試著將這些內(nèi)容體系化,內(nèi)化為更加深刻的設(shè)計(jì)思維。

例如現(xiàn)在很多大廠都有設(shè)計(jì)公眾號(hào),要求設(shè)計(jì)師定期輸出設(shè)計(jì)文章。不僅僅是為了打造設(shè)計(jì)團(tuán)隊(duì)的影響力,設(shè)計(jì)師在文章寫(xiě)作中也會(huì)有全新的收獲和提升。

所以設(shè)計(jì)師可以借助各種工具,例如公眾號(hào)、語(yǔ)雀、設(shè)計(jì)網(wǎng)站等建立和輸出自己的知識(shí)體系。

 

 

二、設(shè)計(jì)過(guò)程管理

設(shè)計(jì)師的日常工作大概可劃分為3個(gè)階段:需求溝通、設(shè)計(jì)執(zhí)行和設(shè)計(jì)輸出。最關(guān)鍵的就是需求管理和項(xiàng)目管理。搞定這兩項(xiàng),設(shè)計(jì)師基本可以保證高效地完成設(shè)計(jì)工作。

 

1、需求管理

在我看來(lái),需求溝通是最重要的一步。因?yàn)橹挥袦?zhǔn)確的需求輸入才能保證設(shè)計(jì)輸出的準(zhǔn)確性。

1)需求的合理性判斷

很多時(shí)候,即使是產(chǎn)品經(jīng)理也無(wú)法保證需求是真實(shí)準(zhǔn)確的,有些需求可能只是為了驗(yàn)證可行性。或者需求過(guò)于偏重功能設(shè)計(jì),沒(méi)有從實(shí)際的用戶場(chǎng)景出發(fā),存在一些問(wèn)題點(diǎn)。所以設(shè)計(jì)師要有一定的方法,對(duì)需求做出合理性判斷。

首先要了解需求來(lái)源,確認(rèn)需求目標(biāo),了解需求背景;然后從設(shè)計(jì)的角度,從用戶角色、場(chǎng)景的角度重新審視需求,為產(chǎn)品經(jīng)理提供一些建議,彌補(bǔ)需求的不足,推動(dòng)產(chǎn)品優(yōu)化方案。

2)需求內(nèi)容的確認(rèn)

PRD是最重要的需求材料,決定了設(shè)計(jì)師應(yīng)該做什么。但是有些時(shí)候產(chǎn)品經(jīng)理沒(méi)時(shí)間提供完備的PRD;有時(shí)候產(chǎn)品經(jīng)理只是向設(shè)計(jì)師口頭傳達(dá)需求,設(shè)計(jì)師產(chǎn)出原型方案完成評(píng)審后,產(chǎn)品經(jīng)理將原型圖插入到PRD中輸出給開(kāi)發(fā)人員,這樣的PRD主要是面向開(kāi)發(fā)人員的。

因此設(shè)計(jì)師需要發(fā)揮主觀能動(dòng)性,有能力理解和分析需求,主動(dòng)與產(chǎn)品經(jīng)理確認(rèn)相關(guān)問(wèn)題。為了提高溝通效率,可以逐條記錄問(wèn)題點(diǎn),并備注自己的分析和思考。保證設(shè)計(jì)執(zhí)行前,能夠解決掉80%的需求疑問(wèn)點(diǎn),從而減少設(shè)計(jì)方案的無(wú)效返工。

 

2、項(xiàng)目管理

1)需求排期管理

產(chǎn)品需求提交給設(shè)計(jì)師后,設(shè)計(jì)師需要主動(dòng)確認(rèn)交付時(shí)間點(diǎn),避免信息不對(duì)稱造成設(shè)計(jì)延期風(fēng)險(xiǎn)。另一方面,產(chǎn)品經(jīng)理可能會(huì)要求設(shè)計(jì)師預(yù)估工作量,給出設(shè)計(jì)排期。此時(shí)設(shè)計(jì)師要充分考慮多方面的因素,例如需求溝通、方案評(píng)審及修改時(shí)間等。

有些時(shí)候,設(shè)計(jì)師并不是負(fù)責(zé)單一產(chǎn)品線的設(shè)計(jì)工作,可能會(huì)面臨多任務(wù)并行的場(chǎng)景。設(shè)計(jì)師需要與產(chǎn)品經(jīng)理明確優(yōu)先級(jí)排序,合理安排設(shè)計(jì)任務(wù)排期。如果無(wú)法協(xié)調(diào)時(shí),需要積極向上反饋,爭(zhēng)取團(tuán)隊(duì)內(nèi)、外部的設(shè)計(jì)資源配合。

如果需求發(fā)生變更存在延期風(fēng)險(xiǎn),也需要在項(xiàng)目組內(nèi)部及時(shí)反饋,同步給所有相關(guān)人員。

2)設(shè)計(jì)完整性

在大廠中,工作流程比較完善,設(shè)計(jì)師的工作職責(zé)也比較明確。但是轉(zhuǎn)型中的傳統(tǒng)公司,或者規(guī)模較小的企業(yè),對(duì)設(shè)計(jì)師的工作內(nèi)容并沒(méi)有明確的流程規(guī)范,甚至沒(méi)有設(shè)計(jì)評(píng)審流程,設(shè)計(jì)師只要完成方案設(shè)計(jì)就結(jié)束了。

短期來(lái)看,設(shè)計(jì)師工作確實(shí)比較輕松,只要專心完成設(shè)計(jì)任務(wù)就可以了。長(zhǎng)期來(lái)看,設(shè)計(jì)方案無(wú)法很好落地,產(chǎn)品體驗(yàn)無(wú)法保證、甚至失控,最終影響最大的必然是設(shè)計(jì)師。

所以設(shè)計(jì)師需要主動(dòng)完成工作閉環(huán),跟進(jìn)開(kāi)發(fā),做好上線前的設(shè)計(jì)測(cè)試驗(yàn)證,以及上線后的用戶反饋,或者定期開(kāi)展設(shè)計(jì)走查。某些產(chǎn)品還要收集上線后的數(shù)據(jù),驗(yàn)證和改進(jìn)設(shè)計(jì)方案。

3)設(shè)計(jì)平衡性

設(shè)計(jì)師首先要保證用戶體驗(yàn),這是毋庸置疑的。但是設(shè)計(jì)方案也不能只考慮用戶體驗(yàn),還要兼顧業(yè)務(wù)需求的商業(yè)目標(biāo)。只有做到兩者間的平衡才是有價(jià)值的設(shè)計(jì)方案。

圖片

另一方面,設(shè)計(jì)師主要的任務(wù)是基于對(duì)需求的充分思考,盡可能地為產(chǎn)品提供有價(jià)值的解決方案,而不是追求完美的設(shè)計(jì)方案。因?yàn)榻换ァ⒁曈X(jué)設(shè)計(jì)方案多種多樣,需要根據(jù)產(chǎn)品資源、執(zhí)行效率、投入產(chǎn)出比、版本迭代計(jì)劃等因素綜合考慮,選擇當(dāng)前用戶場(chǎng)景下更加合理有效的方案,而不僅僅是為了追求完美的用戶體驗(yàn)。

適當(dāng)?shù)耐讌f(xié)讓步是設(shè)計(jì)平衡性的必然選擇。即使設(shè)計(jì)方案無(wú)法完全落地,深入的分析思考過(guò)程也會(huì)讓設(shè)計(jì)師受益匪淺。

 

三、對(duì)上管理

我個(gè)人認(rèn)為這是比較難的,甚至是最難的。如果企業(yè)設(shè)置了專門的設(shè)計(jì)團(tuán)隊(duì),設(shè)計(jì)師的日常工作都會(huì)經(jīng)過(guò)內(nèi)審、外審等,整個(gè)過(guò)程有比較好的流程規(guī)范保證。在評(píng)審匯報(bào)中,設(shè)計(jì)師的工作亮點(diǎn)、設(shè)計(jì)成果就能夠得到顯現(xiàn)和認(rèn)可。

評(píng)審時(shí),設(shè)計(jì)團(tuán)隊(duì)領(lǐng)導(dǎo)作為直接領(lǐng)導(dǎo),雙方有共同的對(duì)話基礎(chǔ),有些內(nèi)容點(diǎn)到即可。并且團(tuán)隊(duì)領(lǐng)導(dǎo)也有意愿、有時(shí)間聽(tīng)取設(shè)計(jì)師的工作匯報(bào),這也是領(lǐng)導(dǎo)的管理職責(zé)所在。

而對(duì)于沒(méi)有團(tuán)隊(duì)的設(shè)計(jì)師而言,本該順暢的對(duì)上管理會(huì)碰到更大的困難。

 

1、時(shí)間不充分

作為名義上的領(lǐng)導(dǎo),只是代管角色,本身有其他核心工作任務(wù),對(duì)設(shè)計(jì)工作可能并不積極。當(dāng)設(shè)計(jì)師主動(dòng)做些設(shè)計(jì)推動(dòng),需要向上匯報(bào)時(shí),可能需要提前排隊(duì)預(yù)約,甚至?xí)灰笞屛黄渌ぷ魇马?xiàng)。

如果設(shè)計(jì)師不做匯報(bào),代管領(lǐng)導(dǎo)根本不知道設(shè)計(jì)師為產(chǎn)品做了什么貢獻(xiàn)。設(shè)計(jì)師的調(diào)研、分析、思考就都成了空談,最終的價(jià)值不過(guò)是界面上的按鈕和表格。辛苦到頭,個(gè)人績(jī)效根本就沒(méi)有保障。

 

2、專業(yè)度不夠

設(shè)計(jì)師可能會(huì)被劃分在開(kāi)發(fā)團(tuán)隊(duì)或者產(chǎn)品團(tuán)隊(duì),負(fù)責(zé)人在設(shè)計(jì)方面并不專業(yè)。在他們看來(lái),一些設(shè)計(jì)優(yōu)化可能就是在浪費(fèi)時(shí)間,或者完全沒(méi)有必要。沒(méi)有上面的領(lǐng)導(dǎo)支持,設(shè)計(jì)師的工作就難以開(kāi)展。

 

3、通不暢

領(lǐng)導(dǎo)比較忙的時(shí)候,如果遇到一些設(shè)計(jì)問(wèn)題,不會(huì)親自找設(shè)計(jì)師,而是隨口對(duì)身邊人員一提,接著信息被層層轉(zhuǎn)發(fā),容易造成理解偏差、信息缺失等問(wèn)題。設(shè)計(jì)師需要二次確認(rèn),但是由于時(shí)間、空間等多重因素影響,很可能導(dǎo)致后續(xù)的溝通不暢。

 

4、政出多門

沒(méi)有設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)師,往往會(huì)受到來(lái)自不同崗位領(lǐng)導(dǎo)的節(jié)制。每個(gè)領(lǐng)導(dǎo)會(huì)有自己的主觀想法,設(shè)計(jì)師就會(huì)無(wú)所適從。

所以在小公司中,設(shè)計(jì)師不能單打獨(dú)斗,要團(tuán)結(jié)一切可以團(tuán)結(jié)的力量。

首先要打動(dòng)身邊的產(chǎn)品經(jīng)理,讓他能夠感受到設(shè)計(jì)的力量和價(jià)值。如果當(dāng)產(chǎn)品經(jīng)理遇到設(shè)計(jì)問(wèn)題,總是來(lái)找設(shè)計(jì)師商量,說(shuō)明設(shè)計(jì)師已經(jīng)獲得了認(rèn)可。

其次就是爭(zhēng)取更多的合作機(jī)會(huì),例如參加產(chǎn)品經(jīng)理的需求評(píng)審會(huì)。利用設(shè)計(jì)評(píng)審會(huì)建立自己的設(shè)計(jì)影響力,深度參與研發(fā)流程,與更多項(xiàng)目人員產(chǎn)生工作聯(lián)系等等。

而在向上匯報(bào)的關(guān)鍵環(huán)節(jié),設(shè)計(jì)師可以拉上產(chǎn)品經(jīng)理一起,加重報(bào)告整體的分量,更容易獲得領(lǐng)導(dǎo)的認(rèn)可。

 

 

總結(jié)

最近這幾年,企業(yè)面臨的困難越來(lái)越大,更加注重員工產(chǎn)生的個(gè)人價(jià)值。最大的感受就是只做純粹的設(shè)計(jì)師,發(fā)展之路會(huì)越來(lái)越窄。

未來(lái),設(shè)計(jì)師做好個(gè)人管理將至關(guān)重要。


作者:子牧先生

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》設(shè)計(jì)師能力建設(shè)(3):管理能力

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



品牌定位,搶占用戶心智第一步

seo達(dá)人


一、什么是品牌定位?

品牌是如何做到家喻戶曉的?舉個(gè)例子,當(dāng)有些用戶產(chǎn)生搜索需求時(shí),他們的第一想法是“百度一下”,而不是“我要搜索”。百度作為一個(gè)品牌,在中國(guó)市場(chǎng)已經(jīng)成為搜索的替代詞,反應(yīng)出品牌對(duì)用戶心智強(qiáng)大的作用力。

打造強(qiáng)品牌的第一步就是品牌定位。不管是創(chuàng)建新品牌還是更新現(xiàn)有品牌,品牌定位策略會(huì)影響業(yè)務(wù)發(fā)展的方方面面,不僅是營(yíng)銷策略,還包括產(chǎn)品開(kāi)發(fā)、用戶體驗(yàn)等。

那么,什么是品牌定位?簡(jiǎn)單講,品牌定位就是決定企業(yè)希望在用戶心目中是什么形象的過(guò)程。以蘋果公司為例。蘋果作為一家科技企業(yè),在全球范圍內(nèi)被熟知,并在諸多同類科技公司中獨(dú)具魅力,受到用戶的喜愛(ài)與追捧,這不得不得益于成功的品牌定位。

蘋果賦予品牌三大內(nèi)涵:Think Different,Tech that works以及Your privacy is safe with us。這些品牌內(nèi)涵成功讓蘋果與其他科技公司形成區(qū)隔度,在用戶心智中占據(jù)獨(dú)特位置。在用戶看來(lái),蘋果是與眾不同的、走在科技前沿的、創(chuàng)新突破的、隱私安全受保護(hù)的,這些品牌形象正是成功定位的結(jié)果,必將成為公司強(qiáng)大的品牌資產(chǎn)。

圖片

除了能夠讓用戶快速識(shí)別、在眾多競(jìng)品中脫穎而出外,品牌定位還會(huì)對(duì)定價(jià)策略和銷量產(chǎn)生影響。如果產(chǎn)品定價(jià)更多依據(jù)高質(zhì)量、高品質(zhì),同時(shí)品牌也將高質(zhì)量、高品質(zhì)作為定位點(diǎn),那么在用戶心目中,產(chǎn)品價(jià)位會(huì)很自然地被合理化。當(dāng)做購(gòu)買決策時(shí),用戶會(huì)被品牌獨(dú)特內(nèi)涵吸引,快速促成購(gòu)買,幫助企業(yè)提升市場(chǎng)份額,同時(shí)增強(qiáng)用戶忠誠(chéng)度。

 

 

二、品牌定位如何做?

品牌定位的基本思路是STP(Segmentation市場(chǎng)細(xì)分,Targeting確定目標(biāo)用戶群,Positioning定位),即將整個(gè)品類市場(chǎng)中的消費(fèi)者劃分為不同細(xì)分人群,識(shí)別各類細(xì)分人群的特征和需求,并結(jié)合競(jìng)爭(zhēng)情況、企業(yè)戰(zhàn)略等因素,選擇其中一個(gè)或多個(gè)細(xì)分市場(chǎng)進(jìn)入,形成品牌定位,對(duì)每個(gè)目標(biāo)細(xì)分市場(chǎng)進(jìn)行品牌營(yíng)銷。

圖片

從中可以看到,市場(chǎng)細(xì)分只是手段,定位才是目的,即S+T=P。

 

Step 1:Segmentation 市場(chǎng)細(xì)分

市場(chǎng)細(xì)分本質(zhì)上是根據(jù)消費(fèi)者的差異,將整個(gè)市場(chǎng)切分成不同部分。用于細(xì)分的維度/標(biāo)準(zhǔn)主要有四方面:地理因素、人口學(xué)因素、心理因素和行為因素。

圖片

其中,市場(chǎng)細(xì)分普遍使用的維度是人口學(xué)因素,比如女性消費(fèi)力、銀發(fā)經(jīng)濟(jì)等,就是按照性別、年齡等維度進(jìn)行的細(xì)分。這一方法簡(jiǎn)單高效,實(shí)用性強(qiáng),但也存在一個(gè)很大的問(wèn)題,即使用戶在這些方面很相似,但內(nèi)心的訴求可能是完全不同的,導(dǎo)致細(xì)分市場(chǎng)內(nèi)部差異很大,這就違背了細(xì)分的初始目的。

為了解決這一問(wèn)題,市場(chǎng)細(xì)分會(huì)使用心理因素,從最深層的情感需求出發(fā),確保每一細(xì)分群體內(nèi)部高度相似,而不同群體之間高度區(qū)隔。

圖片

細(xì)分用戶情感需求的常用解決方案有Needscope、Censydiam等,通過(guò)“個(gè)人-歸屬”和“釋放-壓抑”兩個(gè)維度,相互作用,將用戶情感需求劃分為6個(gè)或8個(gè)類型,從而實(shí)現(xiàn)對(duì)某個(gè)市場(chǎng)的人群細(xì)分。

以Needscope為例。Needscope的心理學(xué)基礎(chǔ)是榮格的原型理論。榮格認(rèn)為,原型是天生的傾向,在影響人類行為方面發(fā)揮作用?;诖耍瑢⑷祟惽楦行枨髣澐譃榱箢悾河谢盍Φ?、充分自信的、有能力的、關(guān)懷的、被動(dòng)的、無(wú)憂無(wú)慮的。應(yīng)用于不同品類時(shí),對(duì)類型的描述可做調(diào)整。

圖片

在用Needscope做市場(chǎng)細(xì)分時(shí),通常會(huì)使用投射工具挖掘用戶對(duì)品類的需求,形成該品類下用戶的情感需求細(xì)分。以資訊類APP為例,通過(guò)投射工具,挖掘到用戶對(duì)資訊類產(chǎn)品的情感訴求,可分為:新熱/前沿的、權(quán)威/信服的、智慧/有思想的、全面/可依賴的、輕松/實(shí)用的、愉悅/釋放的。

圖片

  • 新熱/前沿的:這類用戶希望獲得最新、最熱的資訊信息,第一時(shí)間快速獲取,給自己帶來(lái)“走在前沿的”“領(lǐng)先的”的感受,他們對(duì)資訊產(chǎn)品品牌形象的需求中強(qiáng)調(diào)“新熱”“前沿”“領(lǐng)先”等。
  • 權(quán)威/公正的:這類用戶對(duì)資訊的訴求集中在立場(chǎng)上,希望獲得客觀公正的權(quán)威信息,給自己帶來(lái)“公正的”“客觀的”感受,具備這些內(nèi)涵的品牌形象對(duì)他們來(lái)說(shuō)更有吸引力。
  • 智慧/有思想的:這類用戶的核心情感訴求是“高端”“格調(diào)”,希望使用資訊產(chǎn)品帶給自己“有思想的”“有智慧的”感受,品牌形象突出“高品質(zhì)”“有深度”會(huì)對(duì)他們產(chǎn)生吸引力。
  • 全面/可依賴的:這類用戶的情感需求強(qiáng)調(diào)“安全”“可依賴”“平和”,使用資訊產(chǎn)品與他們較固定的日常生活相匹配,獲取“全面”“安全”的信息以便更好融入周邊環(huán)境,獲取內(nèi)心的平和。
  • 輕松/實(shí)用的:這類用戶看重資訊產(chǎn)品的“實(shí)用”價(jià)值,希望在“輕松”的狀態(tài)下獲取實(shí)用信息,解決問(wèn)題,帶給自己“物有所值”“得力助手”的感受。
  • 愉悅/釋放的:這類用戶追求“無(wú)憂無(wú)慮”“趣味釋放”,希望看資訊讓自己感到“有趣”“快樂(lè)”“釋放”,對(duì)于品牌來(lái)說(shuō),強(qiáng)調(diào)“娛樂(lè)”“輕松”“釋放自我”“有料有趣”對(duì)他們來(lái)說(shuō)更有吸引力。

到此,我們便用Needscope對(duì)資訊類產(chǎn)品市場(chǎng)做了細(xì)分。

 

Step 2:Targeting 確定目標(biāo)用戶群

在對(duì)市場(chǎng)做了細(xì)分后,接下來(lái)需要確定哪個(gè)/哪些細(xì)分市場(chǎng)可作為目標(biāo)人群,主要考慮兩個(gè)因素:市場(chǎng)份額和競(jìng)爭(zhēng)環(huán)境。

在進(jìn)行情感需求細(xì)分時(shí),通過(guò)量化方式可得到每一類細(xì)分人群的占比,代表著市場(chǎng)上有多大比例的用戶有這一類情感訴求,這就反應(yīng)了市場(chǎng)份額的大小。還是以資訊產(chǎn)品為例,“輕松/實(shí)用的”這一細(xì)分市場(chǎng)占比最大,達(dá)到22%,說(shuō)明在目前市場(chǎng)上,大多數(shù)用戶對(duì)資訊產(chǎn)品的訴求是讀完有輕松感,內(nèi)容實(shí)用有幫助。

圖片

但僅考慮市場(chǎng)份額是不夠的,各品牌可能都看到了大的市場(chǎng)份額而紛紛進(jìn)入,經(jīng)過(guò)時(shí)間沉淀還會(huì)形成難以撼動(dòng)的頭部品牌,競(jìng)爭(zhēng)會(huì)異常激烈。因此,在選擇細(xì)分市場(chǎng)時(shí)還需考慮競(jìng)爭(zhēng)環(huán)境,這一點(diǎn)可通過(guò)Brand Map來(lái)直觀體現(xiàn)。

在使用Needscope獲取用戶對(duì)品類情感需求的同時(shí),還會(huì)了解目前市場(chǎng)上的資訊品牌滿足了用戶哪些訴求,因此形成每個(gè)品牌在不同情感細(xì)分領(lǐng)域的得分,得到品牌地圖。

圖片

通過(guò)品牌地圖,很容易看到市場(chǎng)份額最大的“輕松/實(shí)用的”領(lǐng)域競(jìng)品數(shù)量多,且有今日頭條、騰訊新聞等頭部競(jìng)品,對(duì)于新品牌或者小品牌來(lái)說(shuō),不再建議切入該領(lǐng)域。對(duì)于“愉悅/釋放的”這一領(lǐng)域,現(xiàn)有品牌數(shù)量適中,并且靠近圓心位置,意味著還未形成極具該特色的品牌,單從競(jìng)爭(zhēng)角度來(lái)說(shuō),該細(xì)分市場(chǎng)值得考慮。

綜合市場(chǎng)份額與品牌地圖,便可確定目標(biāo)細(xì)分領(lǐng)域。對(duì)于新品牌/小品牌,可以考慮“愉悅/釋放的”這一領(lǐng)域,因?yàn)槭袌?chǎng)份額可觀(20%),市場(chǎng)還未形成滿足程度高的競(jìng)品;對(duì)于打算更新定位的大品牌來(lái)說(shuō),品牌本身具備與頭部競(jìng)品對(duì)抗的實(shí)力,可以優(yōu)先選擇市場(chǎng)份額大的市場(chǎng),但需注意定位的跨度,建議選擇與現(xiàn)有定位臨近的區(qū)間。

確定好細(xì)分領(lǐng)域也就意味著鎖定了目標(biāo)人群。在做情感需求細(xì)分時(shí),會(huì)一并了解該用戶的人口學(xué)特征、產(chǎn)品使用行為等信息,因此,每一細(xì)分情感訴求都可以還原到對(duì)應(yīng)的人群。

還是以資訊產(chǎn)品為例,“愉悅/釋放的”這一細(xì)分市場(chǎng)對(duì)應(yīng)的人群在某些特征上顯著高于其他人群,這些明顯特征就是品牌后期要去營(yíng)銷的目標(biāo)群體,如以男性為主,偏年輕,年齡集中在18-24歲,更多分布在一二線城市,偏好B站、知乎等產(chǎn)品。

圖片

 

Step 3:Positioning 定位

按照S+T=P的公式,完成市場(chǎng)細(xì)分以及鎖定目標(biāo)人群后,就得到了品牌定位。但這個(gè)階段的定位只是明確了方向,具體到細(xì)分領(lǐng)域內(nèi)部該如何定位,還需進(jìn)一步深探。

結(jié)合資訊產(chǎn)品品牌定位的例子,新品牌確定了“愉悅/釋放的”這一細(xì)分市場(chǎng),接下來(lái)需要對(duì)該細(xì)分領(lǐng)域的目標(biāo)人群和競(jìng)品表現(xiàn)做深入挖掘,找到用戶未被滿足或滿足狀況不佳的需求,明確本競(jìng)品之間的差距與不同,從而獲得更精準(zhǔn)的定位點(diǎn)。

在了解目標(biāo)人群時(shí),不再局限于他們使用資訊產(chǎn)品的習(xí)慣,還需走進(jìn)日常,挖掘指導(dǎo)行為的價(jià)值觀念和態(tài)度。

  • 畫(huà)像及態(tài)度:人口學(xué)特征(性別、年齡、城市級(jí)別、家庭月收入等)、生活態(tài)度、價(jià)值觀、品牌觀,真實(shí)立體地還原品牌營(yíng)銷對(duì)象
  • 資訊產(chǎn)品使用行為:使用場(chǎng)景、需求、使用產(chǎn)品、頻次、時(shí)長(zhǎng)、路徑、滿足點(diǎn)及痛點(diǎn),發(fā)現(xiàn)本品在產(chǎn)品力上與競(jìng)品的差距,挖掘產(chǎn)品賣點(diǎn)
  • 資訊產(chǎn)品品牌態(tài)度:對(duì)各品牌的認(rèn)知度、喜愛(ài)度、品牌形象認(rèn)知,發(fā)現(xiàn)本品在品牌力上與競(jìng)品的差距,挖掘品牌利益點(diǎn)
  • 觸媒特點(diǎn):偏愛(ài)的觸媒渠道、品牌溝通方式/內(nèi)容、轉(zhuǎn)化效果,幫助品牌找到有效營(yíng)銷渠道和傳播形式

到這個(gè)階段,就完成了品牌定位全流程。這些定位理念可以作為品牌發(fā)展的牽引思路,指引產(chǎn)品和設(shè)計(jì)圍繞定位的方向深入發(fā)展,為目標(biāo)人群帶去更好的使用體驗(yàn)。

 

 

三、品牌再定位

市場(chǎng)環(huán)境時(shí)刻在發(fā)生變化,品牌必須通過(guò)不斷變革來(lái)永葆青春,品牌再定位就是實(shí)現(xiàn)品牌變革的一種重要方式。

通常來(lái)說(shuō),品牌再定位有幾種可能情況。一是原本定位錯(cuò)誤,品牌定位時(shí)可能找錯(cuò)了目標(biāo)人群,也可能沒(méi)有挖掘到精準(zhǔn)需求,導(dǎo)致在后續(xù)對(duì)品牌監(jiān)測(cè)時(shí),發(fā)現(xiàn)品牌健康度、銷售情況等與預(yù)期差距太大,比如著名的萬(wàn)寶路香煙,最初定位是針對(duì)女性,市場(chǎng)業(yè)績(jī)表現(xiàn)一般,后來(lái)更改策略重新定位為男士香煙,并使用了具有男子漢氣概的西部牛仔形象,使得品牌脫穎而出。

定位優(yōu)勢(shì)不復(fù)存在也是促使品牌再定位的一個(gè)因素,這主要因?yàn)楦?jìng)爭(zhēng)環(huán)境發(fā)生了較大變化,新的競(jìng)品出現(xiàn),甚至成長(zhǎng)成強(qiáng)勁品牌,這就削弱了本品品牌原有的優(yōu)勢(shì)和競(jìng)爭(zhēng)力,如果堅(jiān)守原有定位,勢(shì)必會(huì)處于被動(dòng)挨打的地位。

此外,目標(biāo)客戶群消費(fèi)動(dòng)機(jī)和需求的改變,也是促使品牌再定位升級(jí)的重要?jiǎng)恿Α?

總體來(lái)說(shuō),品牌定位是一個(gè)長(zhǎng)期動(dòng)態(tài)的過(guò)程,它既是品牌策略的起點(diǎn),也是最終目的,即精準(zhǔn)把握目標(biāo)用戶需求,基于此推動(dòng)產(chǎn)品和設(shè)計(jì)迭代,從而牢牢占據(jù)用戶心智,在與競(jìng)品的競(jìng)爭(zhēng)中脫穎而出,縮短用戶決策使用/購(gòu)買產(chǎn)品路徑,促進(jìn)用戶數(shù)量/銷量等產(chǎn)品核心指標(biāo)的提升。


作者:設(shè)計(jì)中臺(tái)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎ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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



卡片式設(shè)計(jì) | 掌握這些技法,快速提升界面效果!

seo達(dá)人


一、卡片式設(shè)計(jì)的定義

1、什么是卡片?

早在互聯(lián)網(wǎng)時(shí)代之前,卡片就出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡…等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息。

圖片

卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨(dú)立的個(gè)體,以至于后續(xù)被引用到線上界面中,同樣具有非常不錯(cuò)的信息歸納效果。

 

2、互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)

卡片本身就是一個(gè)完整的信息區(qū)塊、并同時(shí)承載豐富的互動(dòng)方式。在UI設(shè)計(jì)中,個(gè)性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性,它是一個(gè)UI設(shè)計(jì)組件,將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化,讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢(shì),是因?yàn)樗茏尳缑嫘畔⒏袑哟胃?,從設(shè)計(jì)、交互、視覺(jué)以及用戶體驗(yàn)等各方面來(lái)看,都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對(duì)來(lái)說(shuō),學(xué)習(xí)成本也是極低的。

圖片

 

 

二、卡片式設(shè)計(jì)價(jià)值

1、結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進(jìn)行分組呈現(xiàn),使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線,卡片不僅對(duì)信息作出了分割,其本身還是一個(gè)獨(dú)立的容器,讓歸納組合后的信息能快速突出重點(diǎn),將復(fù)雜內(nèi)容簡(jiǎn)單化處理。

卡片式布局整齊簡(jiǎn)練,清晰的信息結(jié)構(gòu)有助于用戶瀏覽,方便快速找到自己感興趣的內(nèi)容,避免用戶產(chǎn)生一種費(fèi)時(shí)或感覺(jué)內(nèi)容超長(zhǎng)的恐懼感,還能節(jié)省更多的時(shí)間成本。最常見(jiàn)的就是信息列表、圖文混排等,不僅做到了視覺(jué)上的美觀,也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。

圖片

 

2、場(chǎng)景拓展

卡片式設(shè)計(jì)有利于場(chǎng)景拓展,他能在信息不斷增/減的情況下、頁(yè)面依然能組成一個(gè)連貫的整體,在視覺(jué)上毫無(wú)違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

圖片

 

3、空間擴(kuò)展

卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局,在空間有限的移動(dòng)端設(shè)備中,還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分(若隱若現(xiàn)才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴(kuò)展,在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

圖片

 

4、突出重點(diǎn)

卡片式設(shè)計(jì)能很好的通過(guò)邊界襯托出內(nèi)容的整體性,特別是在電商類產(chǎn)品中的首頁(yè)頭部、瓷片區(qū)、營(yíng)銷引流區(qū)將其應(yīng)用到了極致,即便在卡片數(shù)量較多的情況下,用戶依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。

圖片

 

5、兼容多端

卡片作為一個(gè)容器,它可以自由無(wú)限的等比縮放,非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下,通過(guò)放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì),讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺(jué)體驗(yàn)。

圖片

 

6、易于操作

卡片給人最直觀的感覺(jué)就是可以操作,它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺(jué)元素提醒,節(jié)省了一定的頁(yè)面空間,還有著更大的操作熱區(qū),無(wú)需做到精準(zhǔn)點(diǎn)擊。卡片式設(shè)計(jì)很容易融入各種交出手勢(shì),如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等,為用戶提供更多便捷的操作。

 

7、跳轉(zhuǎn)流暢

卡片可通過(guò)縮放的形式充分利用動(dòng)畫(huà)進(jìn)行頁(yè)面跳轉(zhuǎn),例如App Store“Today”頻道,點(diǎn)擊卡片后直接等比放大至全屏,給用戶一種還停留在當(dāng)前頁(yè)面的錯(cuò)覺(jué),避免了傳統(tǒng)的跳轉(zhuǎn)頁(yè)面而造成的信息割裂感,流暢絲滑的過(guò)渡,給用戶更自然的交互體驗(yàn)。

 

 

三、常見(jiàn)的卡片式設(shè)計(jì)樣式

1、四周留白

這種類型的卡片在UI設(shè)計(jì)中最為常見(jiàn),柔和的圓角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強(qiáng)烈,整個(gè)頁(yè)面信息的層級(jí)也更加清晰。

圖片

 

2、懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗,與其相比,懸浮卡片不需要主動(dòng)操作觸發(fā),可作為臨時(shí)控件或長(zhǎng)期固定顯示,并且比模態(tài)彈窗能承載更多信息內(nèi)容,可通過(guò)伸縮來(lái)定義卡片中的信息數(shù)量,或多、或少、或展示、或隱藏,在頁(yè)面中非常靈活。

例如高德地圖首頁(yè),搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上,而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量,非常實(shí)用。

圖片

 

3、通欄類型

通欄類型的卡片具有更強(qiáng)的視覺(jué)阻斷,對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果,不過(guò)這種類型只通過(guò)頁(yè)面背景色保留上下邊間、且不會(huì)過(guò)多,不然頁(yè)面會(huì)顯得零散、雜亂。

圖片

 

 

四、卡片適用場(chǎng)景介紹

1、瀑布流

瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì),它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度,最大限度的還原原始圖片效果。

卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng),不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容,同時(shí)又將每組信息組合作出了明確的劃分,在不破壞頁(yè)面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立,如花瓣、Pinterest就是最好的例子。

圖片

 

2、信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主,是一種較長(zhǎng)內(nèi)容的媒介,不管哪種展現(xiàn)方式,其都需要用戶耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來(lái)篩查對(duì)自己有用的信息。

卡片式設(shè)計(jì)將信息進(jìn)行分塊處理,通過(guò)阻隔的方式快速告知用戶每個(gè)卡片的核心內(nèi)容,便于用戶在長(zhǎng)時(shí)間的滑動(dòng)過(guò)程中也能快速識(shí)別重要信息。

圖片

 

3、左/右滑動(dòng)

卡片式左右滑動(dòng)組合在音樂(lè)、視頻類產(chǎn)品中用最為廣泛,因內(nèi)容本身就圖片居多,也更適合卡片式設(shè)計(jì),相比平鋪具有更強(qiáng)的層次感,對(duì)用戶的吸引力較強(qiáng),尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺(jué),用戶會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。

圖片

 

4、優(yōu)惠卡/券

卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中,通過(guò)模擬實(shí)物造型設(shè)計(jì)成卡片樣式,有效降低用戶的理解成本,并對(duì)其有了更直觀的感知,真實(shí)感尤為強(qiáng)烈。

圖片

 

5、突發(fā)事件/臨時(shí)提醒

對(duì)于用戶主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性內(nèi)容,利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺(jué)更突出,在不影響用戶使用的前提下,可出現(xiàn)在任何位置。

圖片

 

6、部分頁(yè)面頭圖

卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁(yè)、會(huì)員等頁(yè)面中的關(guān)鍵信息進(jìn)行概括,并在頭部位置進(jìn)行重點(diǎn)突出,不僅讓原本單個(gè)的內(nèi)容形成整體,還能營(yíng)造出沉浸式的氛圍。

圖片

 

 

五、卡片式設(shè)計(jì)原則及小技巧

1、一致性原則

為了保持界面設(shè)計(jì)的一致性,需要將卡片樣式納入設(shè)計(jì)規(guī)范,例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場(chǎng)景中卡片大小的劃分界限以及圓角數(shù)值的確定等,大部分情況下都需要遵循設(shè)計(jì)規(guī)范。

圖片

 

2、功能定位決定卡片形式

在同一產(chǎn)品中,雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺(jué)效果,但并非所有頁(yè)面都適合卡片式設(shè)計(jì)。

那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據(jù)頁(yè)面內(nèi)容屬性及目標(biāo)定位來(lái)決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式,很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”,用分隔線或間距留白來(lái)區(qū)分信息組顯然更合適;但對(duì)于電商類型的產(chǎn)品,利用卡片將不同的商品分隔后又進(jìn)行歸納,會(huì)更容易識(shí)別,信息的可讀性也會(huì)更強(qiáng)。

圖片

 

3、避免過(guò)多卡片嵌套

卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn),為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn),避免在卡片中嵌套多層卡片,以免信息層級(jí)雜/亂而增加用戶的視覺(jué)負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個(gè)信息組,可利用間距留白、分割線或淺色背景等元素屬性來(lái)區(qū)分,依然能達(dá)到想要的效果。

圖片

 

4、合理利用橫向空間

因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白,在空間有限的移動(dòng)端設(shè)備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當(dāng)利用左右滑動(dòng)來(lái)擴(kuò)充橫向隱性空間。

例如淘票票首頁(yè),在1.5屏的范圍內(nèi),幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容,從用戶體驗(yàn)角度出發(fā),這是縱向空間無(wú)法比擬的。

圖片

 

5、降低縱向空間的浪費(fèi)

卡片式設(shè)計(jì)不是目的,其主要是用來(lái)更好的區(qū)分信息層級(jí)、提升用戶瀏覽體驗(yàn),因?yàn)榭ㄆ鳛楠?dú)立空間的存在,必定會(huì)增加上下間距而導(dǎo)致頁(yè)面拉長(zhǎng),因此,如無(wú)必要,不必盲目采用卡片式設(shè)計(jì)。

例如美團(tuán)APP的「首頁(yè)、電商、購(gòu)物車、我的」4大主功能頁(yè)面都使用了卡片形式,而「消息」頁(yè)則采用分割線進(jìn)行信息分組,試想一下,如果為了統(tǒng)一規(guī)范而使用卡片,不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。

圖片

 

6、長(zhǎng)文表達(dá)不適合卡片

這點(diǎn)不用多說(shuō),新聞資訊類產(chǎn)品的內(nèi)容詳情頁(yè)就是最好的證明,不管其他頁(yè)面是否采用卡片形式,但詳情頁(yè)并不會(huì)跟隨形式,一方面可以讓同屏展示更多內(nèi)容、增加空間利用率,另一方面可減少無(wú)關(guān)元素對(duì)用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。

圖片

 

7、突出一個(gè)核心內(nèi)容

很多時(shí)候,我們總會(huì)聽(tīng)到PM說(shuō)這個(gè)很重要、那個(gè)也很重要,都需要突出一點(diǎn),殊不知當(dāng)什么都突出了也說(shuō)明什么都沒(méi)有突出。在單個(gè)卡片中,組始終牢記這個(gè)準(zhǔn)則:一次只突出一個(gè)核心信息,以便于用戶快速、精準(zhǔn)捕捉,切記不可貪多。

 

六、結(jié)語(yǔ)

卡片式設(shè)計(jì)之所有能快速流行起來(lái)且經(jīng)久不衰, 其主要得益于自身的靈活性,尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì),能忽略設(shè)備的差異給用戶提供更好的服務(wù)??ㄆ⒉皇呛?jiǎn)單的樣式設(shè)計(jì),它是一種自由布局的設(shè)計(jì)語(yǔ)言,通過(guò)多種方式的信息組合、結(jié)合豐富的交互操作,給用戶創(chuàng)造出極致的使用體驗(yàn)。

信息的呈現(xiàn)方式雖有不同,但最終的目的都是為了服務(wù)于內(nèi)容,卡片式設(shè)計(jì)只是其中的一種形式而已,在設(shè)計(jì)過(guò)程中,我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷,切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史,卡片式設(shè)計(jì)也不會(huì)例外,但絕對(duì)不是這么快就結(jié)束,它依然值得我們?nèi)ド罹?,力求打造更好的信息布局、更舒適的用戶體驗(yàn)。

 

原文地址:能量眼球

作者:大漠飛鷹CYSJ

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》卡片式設(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



日歷

鏈接

個(gè)人資料

存檔