▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長

轉(zhuǎn)自：ID設(shè)計(jì)站

編輯：章欣怡

共 4870 字，預(yù)計(jì)閱讀 13 分鐘

         

最近看了一本書，里面講到一個(gè)比較有趣的內(nèi)容，就是感知性模式。那么何為感知性模式呢？

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

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

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

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

案例一：微信

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

      

案例二：Instagram

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

       

案例三：抖音

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

      

02 感知性模式的作用

2.1 有助于品牌形象傳遞

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

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

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

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

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

1) 設(shè)計(jì)的獨(dú)特性

設(shè)計(jì)的獨(dú)特性往往是通過我們界面的排版、圖標(biāo)、圖像、交互體驗(yàn)方式、交互措辭等等一系列的內(nèi)容來奠定。這些內(nèi)容我們常常可以在國外的軟件中看到很多不錯(cuò)的案例，而國內(nèi)的案例相對(duì)較少或者說沒有那么極致。

還是以 Instagram 作為案例來說，ins 風(fēng)的極簡設(shè)計(jì)是一種貫徹始終的獨(dú)特性存在，除了設(shè)計(jì)界面本身的研究之外，還在內(nèi)容上下足了功夫。以照片瀏覽來說，始終堅(jiān)持大圖的體驗(yàn)方式，保證一屏內(nèi)的沉浸度，而非為了效率，這與 Instagram 一直具有較高的照片質(zhì)量密不可分，如果國內(nèi)的社交網(wǎng)站想要采用同樣的方式或許比較難達(dá)到，更深入的分析可能還涉及到用戶質(zhì)量的問題，這里就不展開闡述了。（以上論點(diǎn)并非認(rèn)為國內(nèi)產(chǎn)品沒有優(yōu)點(diǎn)，而是相對(duì)比而言的缺點(diǎn)。）

      

2) 設(shè)計(jì)的辨識(shí)性

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

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

                

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

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

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

        

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

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

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

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

1.富有表現(xiàn)力:為了突出 Material Theming 必須提供的功能，每個(gè) Material 研究都表達(dá)了一個(gè)不同的品牌;

2.各種各樣的:為確保 Material 主題化和組件滿足盡可能多的產(chǎn)品需求，material 研究代表了不同類型的產(chǎn)品;

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

                

03 感知性模式的探索與思考

我們?cè)谌粘ＴO(shè)計(jì)功能性模塊更多的是考慮到用戶對(duì)于產(chǎn)品的體驗(yàn)感受，而感知性模塊則是我們想要用戶在這里獲得什么品牌感知，通過品牌結(jié)合視覺設(shè)計(jì)系統(tǒng)給用戶帶來產(chǎn)品獨(dú)特的性格及個(gè)性化氛圍。

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

3.1 情緒板

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

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

               

3.2 樣式疊片

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

            

3.3 元素拼貼

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

       

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

3.4 平衡品牌性與一致性

過多的個(gè)性化設(shè)計(jì)，會(huì)削弱整體的品牌感，同樣，如果設(shè)計(jì)的內(nèi)容需要全部都一模一樣的規(guī)范，也會(huì)扼殺設(shè)計(jì)的品牌感的創(chuàng)造性。

因此，在感知性設(shè)計(jì)的概念下，一致性設(shè)計(jì)不是一味的復(fù)用，不求變通，而是通過整體統(tǒng)一的理念，允許個(gè)性化設(shè)計(jì)的存在，這樣既滿足部分模塊的獨(dú)特視覺表現(xiàn)又并不影響品牌傳遞。

舉個(gè)例子:

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

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

3.5 設(shè)計(jì)與業(yè)務(wù)需求的平衡

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

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

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

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

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

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

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

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

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

3.一致性最大化

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

最后

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

---

?? 我們一起聊設(shè)計(jì) ???♂?

微信行業(yè)交流群

期待與更多優(yōu)秀設(shè)計(jì)師一起成長

??

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）

---

推 薦 課 程

星標(biāo)公眾號(hào)方法

點(diǎn)開下方公眾號(hào) ??  點(diǎn)擊右上角【...】 ??   設(shè)為星標(biāo)