「感知性模式設(shè)計」是什么?

2021-8-2    資深UI設(shè)計者

總的來說,所謂的感知性模式就是物體或者物件的一種外在的呈現(xiàn)而給人的感覺或者感受。例如同樣的一個電腦桌上都有電腦、鼠標(biāo)、或者其他的物件擺設(shè),但根據(jù)不同人的使用給人的感覺是完全不同的,或是凌亂、或是整潔、或是簡約,而更直觀的差異可能來源于這些物件的樣式、材料、顏色、紋理的不同而傳遞出來的視覺感知,

如果沿用到互聯(lián)網(wǎng)方面的設(shè)計,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插圖、圖標(biāo)、形狀紋理、間距、交互或者動畫等等,這些都作為具體方式來表達(dá)感知性設(shè)計。

說到這里,你可能會認(rèn)為感知性設(shè)計是一個純粹的外在視覺表現(xiàn),但想要完全的得到一些成效,更多需要把這個事情融入到品牌的核心中,隨著產(chǎn)品的發(fā)展而發(fā)展,進(jìn)而在眾多的同類此產(chǎn)品中脫穎而出。

感知性模式較強(qiáng)的產(chǎn)品例子

案例一:微信

微信作為一個超過十億用戶的產(chǎn)品,隨著版本的不斷迭代,功能也越來越強(qiáng)大,因此從產(chǎn)品體驗上來說也可能會給人一種臃腫的感受。但微信整體的感知性模式的設(shè)計是非常清晰的,從桌面 APP 的 logo,再到內(nèi)頁呈現(xiàn)的圖標(biāo)、顏色、按鈕樣式、交互反饋等等的設(shè)計都是統(tǒng)一性很好的設(shè)計。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

案例二:Instagram

Instagram 作為全球熱度最高的圖片分享社區(qū),自始自終都有著非常明顯的感知性,整體 APP 的簡潔性設(shè)計讓用戶更加專注于內(nèi)容本身,似有似無的品牌藍(lán)色似乎已經(jīng)牢牢融入了用戶的大腦中,這種感知性無需被刻意放大,但就在潛移默化中用戶就能感受到。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

案例三:抖音

作為目前國內(nèi)最熱的短視頻平臺,抖音的感知性模式已經(jīng)深入的印在用戶的腦里,我認(rèn)為抖音主要在以下三個方面讓用戶記住了 TA:1.品牌屬性,抖音的品牌屬性就是用最簡單的方式讓用戶記住了 ta,通過 APP圖標(biāo)、閃屏、發(fā)起按鈕的圖形及品牌色的串聯(lián);2.內(nèi)容屬性,具有自己平臺氣質(zhì)的內(nèi)容特性,抖音在最早期主打的“潮酷”類的視頻讓它跟快手做了明確的區(qū)分;3.體驗屬性,大膽的全屏滑動視頻交互很好的結(jié)合了手機(jī)的體驗方式。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

感知性模式的作用

1. 有助于品牌形象傳遞

在同一個領(lǐng)域中的產(chǎn)品,在功能上大多會具有一定的趨同性,而由于這幾年的扁平化風(fēng)格盛行,更把產(chǎn)品之間的類同性推向極致。因此更需要通過感知性模式的設(shè)計來進(jìn)行區(qū)分,這種區(qū)分不僅僅只是視覺上的差異,更多是來自于產(chǎn)品者對于自己產(chǎn)品方向的把控。

書中提到 Spotify 的例子,Spotify 給人感覺是溫暖的、私人的,雖然月活躍量已經(jīng)超過一億,但給用戶的感受仍然是獨特的,除了功能之外,主要在于整體的圖形樣式、顏色搭配(黑綠的品牌色比例把控)、交互中微妙而平靜的感覺,以及排版上傳遞出來的感受。

從上面這個案例來說,基礎(chǔ)體驗是用戶值得參與的一個重要環(huán)節(jié),但感知性模式的設(shè)計更多是來源于產(chǎn)品者想要給用戶傳遞什么樣的品牌性格或品牌核心,Spotify 的靜謐性及沉浸式體驗,這是 Spotify 設(shè)計師想要傳遞出來的品牌核心

2. 感知性模式通過界面?zhèn)鬟f品牌

感性性模式的品牌傳遞主要是通過界面或者運(yùn)營調(diào)性來讓用戶得到感知,并且讓人記住。在界面上想要讓用戶記住我們的產(chǎn)品,更多的是需要思考三個關(guān)鍵點:設(shè)計的獨特性;設(shè)計的辨識性;設(shè)計的區(qū)分度。

設(shè)計的獨特性

設(shè)計的獨特性往往是通過我們界面的排版、圖標(biāo)、圖像、交互體驗方式、交互措辭等等一系列的內(nèi)容來奠定。這些內(nèi)容我們常??梢栽趪獾能浖锌吹胶芏嗖诲e的案例。

還是以 Instagram 作為案例來說,ins 風(fēng)的極簡設(shè)計是一種貫徹始終的獨特性存在,除了設(shè)計界面本身的研究之外,還在內(nèi)容上下足了功夫。以照片瀏覽來說,始終堅持大圖的體驗方式,保證一屏內(nèi)的沉浸度,而非為了效率,這與 Instagram 一直具有較高的照片質(zhì)量密不可分。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

設(shè)計的辨識性

辨識性的可打磨方式有很多種,以圖標(biāo)作為一個基礎(chǔ)的案例來說,我們在設(shè)計圖標(biāo)的時候是否有結(jié)合整體產(chǎn)品的性格去思考并且設(shè)計,并且深入打磨。簡單的區(qū)分,我們可以從風(fēng)格(例如:簡潔的、有趣的、硬朗的、柔軟的等等),更深入的內(nèi)容就是需要思考如何傳遞品牌感,以及將圖形與品牌理念、產(chǎn)品性格進(jìn)行結(jié)合,通過設(shè)計貫徹品牌辨識性。

以 YouTube 這個 APP 的圖標(biāo)作為案例,設(shè)計師在設(shè)計時更多是希望表達(dá)整體 APP 設(shè)計的簡潔性,弱化圖形對于內(nèi)容的影響,因此在整體堅持了三個核心關(guān)鍵點:簡約、細(xì)線、普識。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

設(shè)計的區(qū)分度

在目前趨同性的主潮流之下,如何把握好產(chǎn)品設(shè)計的區(qū)分度變得尤為關(guān)鍵,也就是說,當(dāng)用戶在看我們產(chǎn)品的時候會不會乍一眼認(rèn)為是另一個產(chǎn)品。區(qū)分度的把握往往來源于品牌對于顏色的選擇,我們在定義色調(diào)之前需要對主流競品做一個分析,從中找出屬于我們的區(qū)分度,并且盡量避免重合性。

以現(xiàn)在流行的電商 APP 為案例,很大電商平臺的設(shè)計大多類似,在品牌色的選擇上則尤為重要,因此需要盡量避免具有耦合性。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

讓設(shè)計系統(tǒng)更加連貫

我們在產(chǎn)品設(shè)計中想要把所有的模塊或者組件做得一模一樣幾乎是不可能的,但我們可以利用感知性模式的設(shè)計進(jìn)行內(nèi)容模塊的滲透,讓用戶對于整體的感受感知是一致的。

以 material design 的設(shè)計系統(tǒng)為案例,他所確定的是一個規(guī)則,而并不是任何的模塊或者任何的圖標(biāo)都是一樣的、無差別的,如果都完全長得一樣會讓設(shè)計變得單調(diào)、無差異性,通過設(shè)計準(zhǔn)則來限定整體的圖形風(fēng)格,應(yīng)用在不同的位置讓用戶從視覺角度感知到風(fēng)格的一致性,這樣也可以讓整體的體驗更連貫。

Material design 的設(shè)計準(zhǔn)則

富有表現(xiàn)力

為了突出 Material Theming 必須提供的功能,每個 Material 研究都表達(dá)了一個不同的品牌。

各種各樣的

為確保 material 主題化和組件滿足盡可能多的產(chǎn)品需求,material 研究代表了不同類型的產(chǎn)品。

基于現(xiàn)實

為了盡可能地復(fù)制真實產(chǎn)品,每項研究都會識別用戶、顯示功能用戶流并應(yīng)用現(xiàn)實世界的限制。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

感知性模式的探索與思考

我們在日常設(shè)計功能性模塊更多的是考慮到用戶對于產(chǎn)品的體驗感受,而感知性模塊則是我們想要用戶在這里獲得什么品牌感知,通過品牌結(jié)合視覺設(shè)計系統(tǒng)給用戶帶來產(chǎn)品獨特的性格及個性化氛圍。

對于探索感知性設(shè)計的方法也有很多,目前比較流行的技巧主要有:情緒板、樣式疊片、元素拼貼。無論是哪種方式,都沒有唯一的答案,更多是利用這些方法在不斷的嘗試中探索到屬于自我品牌的感知。

情緒板

情緒板是一種較為輕量的風(fēng)格探索方法,在這個過程中往往不需要花費(fèi)過多的精力,我們需要做的就是把統(tǒng)一或者接近類型的圖片進(jìn)行重新整合,得出我們想要表達(dá)的視覺感受即可。

情緒版屬于比較前期的視覺品牌調(diào)性探索,在整體的顏色、排版上也都可以利用情緒板來獲得初步的答案,如果想要再往深一步,可能則需要樣式疊片的方式。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

樣式疊片

給予情緒板獲得的大致品牌方向之后,便可以利用樣式疊片的方式來進(jìn)行更精細(xì)化的探究,我們可以用一種或多種不同的樣式疊片來表達(dá),但是希望在截取這些內(nèi)容的時候要記得保持控件、組件、顏色、字體等等內(nèi)容的一致性,避免差別性較大,形成不了統(tǒng)一的視覺系統(tǒng)。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

元素拼貼

從書中講到的大體概念是:將界面元素等內(nèi)容拼貼在一起,從而達(dá)到設(shè)計稿初稿的雛形感受。這個方法可以比較敏捷的對需求方進(jìn)行試探,但相比上面 2 種方法需要花費(fèi)更多的時間及精力,同時這個方法出來的內(nèi)容也比較偏向高保真。

騰訊高手都在學(xué)的「感知性模式設(shè)計」是什么?

從表面上來看,這三種方法似乎都可以幫助我們更好的進(jìn)行設(shè)計,沒有太大的差異化,不過從本質(zhì)上來看,這三個方法影響的是我們設(shè)計初期輸出的保真程度,從情緒版到樣式疊片再到元素拼貼似乎是一個越來越保真的方式,我們可以選擇其中一種,或者 2 種結(jié)合來進(jìn)行表現(xiàn)。

平衡品牌性與一致性

過多的個性化設(shè)計,會削弱整體的品牌感,同樣,如果設(shè)計的內(nèi)容需要全部都一模一樣的規(guī)范,也會扼殺設(shè)計的品牌感的創(chuàng)造性。因此,在感知性設(shè)計的概念下,一致性設(shè)計不是一味的復(fù)用,不求變通,而是通過整體統(tǒng)一的理念,允許個性化設(shè)計的存在,這樣既滿足部分模塊的獨特視覺表現(xiàn)又并不影響品牌傳遞。

舉個例子

例如外面在設(shè)計一個完整的 APP 時,我們已經(jīng)規(guī)范好了大體的基礎(chǔ)視覺規(guī)范,在不影響這個規(guī)范的前提下,我們針對部分模塊,例如福利類、游戲類,這種比較偏運(yùn)營的設(shè)計界面,我們可以考慮有更豐富的顏色、圖形等視覺表現(xiàn),但前提在于是否符合基礎(chǔ)規(guī)范的設(shè)定,如果符合那我們完全可以對這些類型進(jìn)行個性化設(shè)計。

如果沒有打破常規(guī)的設(shè)計方式,固化的追求一致性的設(shè)計,那么它就會變得普通、僵化,感知性設(shè)計的存在就是讓我們在允許的范圍內(nèi)追求更不一樣的設(shè)計,鼓勵設(shè)計師積極探索更多的可能性,好的設(shè)計體系既能體現(xiàn)品牌的一致性也能表達(dá)出創(chuàng)造性。

由于感知性模式的相關(guān)設(shè)計,容易被當(dāng)作只是樣式或者主題化皮膚設(shè)計,很多人會認(rèn)為這方面的設(shè)計比優(yōu)化交互流程更容易些。在這種狀況下,臨時的業(yè)務(wù)經(jīng)常會去挑戰(zhàn)產(chǎn)品的品牌性和規(guī)范性,綜合這 2 方面的原因,我們需要隨時調(diào)整我們對于感知性模式的策略。

好數(shù)據(jù)不代表感知性設(shè)計的好壞

數(shù)據(jù)的好壞往往來自各種原因,優(yōu)化設(shè)計后得到好的數(shù)據(jù),但并不能說我們的感知性設(shè)計是好的,首先刺激數(shù)據(jù)的手段有很多,例如加重內(nèi)容的表現(xiàn)、利用顏色對比突出想要突出的模塊,這些方式都是與感知性設(shè)計背道而馳的。

基于上面這個問題,我們在日常設(shè)計中有幾個基本原則是需要我們?nèi)プ袷氐?,盡量避免為了滿足短時間的產(chǎn)品需求而影響整體的設(shè)計感知性。

1. 不挑戰(zhàn)基礎(chǔ)規(guī)范原則

基礎(chǔ)規(guī)范作為整體設(shè)計的基本標(biāo)準(zhǔn),整體的制定肯定經(jīng)過多種嘗試之后的結(jié)果,如果輕易推翻的話,其中產(chǎn)生的設(shè)計成本是巨大的,往往需要重新輸出、多方對齊、最終輸出、再落地形成開放組件,在我日常的工作中也常遇到。往往是因為一個極小的模塊而產(chǎn)生了巨大的設(shè)計成本。

2. 不改變用戶的普識習(xí)慣

這里說的不是不去優(yōu)化或迭代體驗設(shè)計,而是我們應(yīng)該盡量避免因為一個很小的內(nèi)容而調(diào)整全局的體驗方式。

舉個例子:早前很多 APP 在設(shè)計表單選擇器時都喜歡進(jìn)行 UI 定制,從這個問題分析,用戶在使用這種表單選擇器的時候是用的系統(tǒng)多一點還是我們的 APP 多一點,如果是系統(tǒng)的多一點,我們何不直接調(diào)用系統(tǒng)?因為組件的 UI 改造,往往會帶來一定的開發(fā)成本,但其造成的感知卻并不夠大,反而會讓用戶覺得很奇怪,為啥這些選擇權(quán)在不同 APP 的不一致。

3. 一致性最大化

任何的設(shè)計都應(yīng)該以一致性作為最大的前提,這樣才能更加完整體現(xiàn)感知性模式,在各個模塊、顏色、圖形等等內(nèi)容都具有完整的呈現(xiàn),無時無刻影響著用戶,讓用戶對于整體具有潛移默化的感知。

最后

感知性模式不是一個原則,而是一種工作方式、設(shè)計模式,除了個人的堅持之外,還需要有團(tuán)隊的意識才能讓我們的設(shè)計更加具有品牌性,自上而下的調(diào)性、方向的確定,在團(tuán)隊中形成共識,這樣設(shè)計語言才能形成。

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



文章來源:優(yōu)設(shè)    作者:ID設(shè)計站

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

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

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


分享本文至:

日歷

鏈接

個人資料

存檔