關(guān)鍵詞：視知覺;奶茶類公眾號;界面設(shè)計;設(shè)計方法

中圖分類號：TP311.1 文獻標識碼：A 文章編號：1004-9436（2021）21-0-03

0 引言

大數(shù)據(jù)時代，數(shù)字技術(shù)給人們提供了全新的生活方式，奶茶類公眾號是以手機為載體的集多功能為一體的平臺，其主要功能為傳播廣告信息，通過圖文形式讓用戶在碎片化時間中快速獲取簡單明確的信息。微信公眾號平臺發(fā)展至今，隨著原創(chuàng)內(nèi)容的質(zhì)量不斷提高，參差不齊的現(xiàn)象即將結(jié)束，去低質(zhì)化成為趨勢?？觳褪降膬?nèi)容已無法滿足用戶需求，設(shè)計師需更加注重原創(chuàng)，通過解析視知覺原理平衡奶茶類公眾號的實用性和藝術(shù)性，用更精良化、合理化的設(shè)計留住用戶。

1 奶茶類公眾號界面設(shè)計現(xiàn)狀及架構(gòu)

文章選取了國內(nèi)50個奶茶品牌的公眾號作為調(diào)研對象，品牌榜名單由CN10排排榜技術(shù)研究部門和CNPP品牌數(shù)據(jù)研究部門通過資料收集整理，基于大數(shù)據(jù)統(tǒng)計及人為根據(jù)市場和參數(shù)條件變化的分析測評得出，按照品牌影響力并綜合了行業(yè)知名度、企業(yè)規(guī)模、經(jīng)濟實力排名。

1.1 奶茶類公眾號界面設(shè)計的問題

第一，功能設(shè)計冗雜模糊。一是目錄功能主次不分，如“線上下單”的入口較深，用戶需要瀏覽全部子菜單后才能找到下單入口，增加了下單時間。二是目錄功能冗雜，有些公眾號的目錄欄包含13個以上的功能，當(dāng)用戶感受到的認知負荷過高以至于超過其工作記憶的承受范圍時，其信息處理能力就會下降，從而導(dǎo)致操作效率下降和失誤率上升[1]。

第二，UI設(shè)計趨向同質(zhì)化。目前，奶茶類公眾號的點單界面布局雷同，均采用底部標簽欄和側(cè)邊導(dǎo)航欄的形式，底部標簽欄為點單小程序的一級導(dǎo)航，左側(cè)抽屜式的二級標簽欄是商品目錄。在底部標簽欄中，icon的選中狀態(tài)和非選中狀態(tài)的設(shè)計是一樣的，都是利用增加色塊的方法凸顯選中狀態(tài)，未選中的icon都呈灰色線型。由于沒有結(jié)合品牌元素和追求過度簡化，UI風(fēng)格同質(zhì)化嚴重。

第三，文字組設(shè)計缺少整體性把控。一是在界面中，精致的插畫和動效圖像往往是吸引視線的主體物，對比之下，正文文字略顯單薄。二是由于奶茶類公眾號很重視內(nèi)容的趣味性，有些正文的排布過于復(fù)雜，過多裝飾元素降低了閱讀的流暢性。三是文字組的整體形態(tài)待優(yōu)化。由于視知覺具有整體性、簡化性的特征，當(dāng)人們看到一組文字時，視覺會優(yōu)先把握其整體形態(tài)，這些文字形態(tài)也充當(dāng)了界面中的一種圖形元素，字重變化、字號大小、字距大小及行距大小是影響文字組整體外形的因素，文字間的分隔形態(tài)也是對界面負空間的設(shè)計，所以這些小段落的文字排列更需要利用視知覺的組織律來優(yōu)化。

第四，色彩設(shè)計混亂失調(diào)。文章總結(jié)了幾個比較典型的問題。一是插畫色彩、背景顏色與攝影圖像的顏色不協(xié)調(diào)，缺少對影像顏色再設(shè)計的階段，忽略界面顏色的整體性就會略顯生硬;二是有些公眾號的色彩調(diào)性不明確，導(dǎo)致消費者把握不了產(chǎn)品屬性，飲品缺少氛圍感，可能會導(dǎo)致購買欲降低，同時在色彩運用上忽略了視知覺具有恒常性，沒有充分考慮選取的色彩意象能否準確傳達出食物的色香味，所以對于味道的色彩意象應(yīng)該進行更深入的探討。

1.2 奶茶類公眾號界面設(shè)計的架構(gòu)及元素

奶茶類公眾號大體擁有相似的框架，主要包含以下三個界面層級。

第一層級為公眾號的主頁界面，在微信搜索框檢索某個公眾號后就能看到主頁界面。主頁界面內(nèi)容包括頂部導(dǎo)航欄、公眾號基本信息、自定義分段式標簽欄、歷史信息列表。頂部導(dǎo)航欄包括返回、搜索框和更多按鍵，點擊更多按鍵可彈出底部的行動面板。導(dǎo)航欄下方為公眾號的基本信息，包含頭像、公眾號名稱、簡介、消息按鍵、關(guān)注按鍵、好友關(guān)注信息、視頻號信息，中部為自定義分段式標簽欄，界面下方是對應(yīng)標簽欄的歷史信息列表。

第二層級為目錄界面，點擊發(fā)消息按鍵后會自動跳轉(zhuǎn)到第二層級頁面。目錄界面包括導(dǎo)航欄、信息推送、自定義分段式標簽欄。頂部導(dǎo)航欄包括返回按鍵、公眾號名稱、主頁按鈕;中部會顯示推送的信息，用戶關(guān)注公眾號后會自動推送歡迎語、點單小程序或者最新咨詢的文章，用戶可以依據(jù)推送提示，輸入相應(yīng)的數(shù)字或文字看到更多的信息反饋;底部是自定義分段式標簽欄，最大能設(shè)置成3*5的矩陣式子菜單，通過這些子菜單目錄可跳轉(zhuǎn)到各類第三層級界面，標簽欄左側(cè)帶有切換按鈕，可切換為消息輸入框發(fā)送語音或文字信息進行一系列反饋操作。

第三層級界面種類較多，主要包括推文界面、線上點單小程序界面、話題標簽界面及其他第三方平臺界面。推文界面一般包括首圖、長圖文部分、尾圖，這是最常用的界面類型。小程序通常為線上點單界面，包括頂部的滾動廣告圖、底部標簽導(dǎo)航欄、左側(cè)抽屜式菜單和中部商品列表圖。話題標簽界面的功能是展示公眾號內(nèi)部文章的分類。

2 視知覺理論與奶茶類公眾號界面設(shè)計的關(guān)聯(lián)性

2.1 視覺信息傳達性

用戶瀏覽推文的過程也是公眾號傳播視覺信息的過程，視覺信息設(shè)計強調(diào)的是信息，即視覺傳達設(shè)計中的內(nèi)容實體，是視覺傳達設(shè)計中直接面對的核心對象[2]。視知覺是用戶最直接的接觸和解讀信息的方式，受眾通過眼睛讀取客體信息，從而進行下一步行動[3]。用戶與奶茶類公眾號的交流方式還在于看，并通過視覺引導(dǎo)產(chǎn)生交互行為，接收公眾號傳達的理念。

2.2 界面布局整體性

平衡的美感能使人愉悅，這是人的本能所致。版面的穩(wěn)定感與動感的產(chǎn)生在很大程度上都依賴畫面元素編排的平衡與均衡 ，若版面設(shè)計中各個元素達到了平衡狀態(tài) ，那么畫面就會相對穩(wěn)定[4]。設(shè)計時必須遵從整體性原則，即無論是公眾號的結(jié)構(gòu)框架還是視覺表現(xiàn)都要進行系統(tǒng)性的規(guī)劃，綜合考慮界面中的元素分布、材質(zhì)使用與顏色搭配，兼顧形式美與內(nèi)容美，使其具有完整性。

3 基于視知覺理論的奶茶類公眾號界面設(shè)計的用戶調(diào)研

3.1 調(diào)研對象與內(nèi)容

調(diào)研對象的范圍鎖定在30歲以下的年輕群體，一共搜集了140份問卷，其中有效問卷為127份，調(diào)查對象中男性為42人，女性為85人。問卷調(diào)研分為四個部分：第一部分為用戶基本信息調(diào)研，包括性別、年齡、收入;第二部分為用戶行為調(diào)研，包括對橫屏閱讀的態(tài)度、能接受的閱讀時長、觀看視頻的頻率以及常用功能;第三部分為用戶視知覺調(diào)研，結(jié)合了奶茶類公眾號的設(shè)計現(xiàn)狀，對圖文布局方式、表現(xiàn)手法、設(shè)計風(fēng)格等內(nèi)容展開調(diào)研;第四部分為色彩意象感知調(diào)研，研究用戶對五種基本味覺的色彩意象。

3.2 用戶行為調(diào)研分析

關(guān)于閱讀奶茶類推文的時長，44%的用戶認為應(yīng)該控制在3～5分鐘，43%的用戶認為應(yīng)該控制在3分鐘內(nèi)，12%的用戶接受6～10分鐘。關(guān)于對橫屏和豎屏閱讀的態(tài)度，56%的用戶更喜歡豎屏閱讀，37%的用戶持中立態(tài)度，只有6%的用戶喜歡橫屏閱讀。對于“奶茶類公眾號中的小視頻功能”，62%的用戶偶爾點擊觀看，29%的用戶從不點擊觀看，只有9%的用戶經(jīng)常點擊觀看。

調(diào)研分析發(fā)現(xiàn)，用戶更喜歡豎屏閱讀，希望在短時間內(nèi)通過圖文的方式快速獲取信息，不太關(guān)注視頻信息。公眾號中確實設(shè)置了許多不常用的功能，用戶瀏覽得最多的是線上點單界面和各種推文界面。綜上，公眾號內(nèi)部功能冗雜，用戶更偏向簡約、精煉的內(nèi)容。

3.3 用戶視知覺調(diào)研分析

有72%的用戶認為奶茶類公眾號的設(shè)計風(fēng)格應(yīng)該基于原有的品牌形象進行延展。59%的用戶更喜歡呈倍率變化關(guān)系的文字組，71%不喜歡排版裝飾感過強的正文文字。對于“以下哪種視覺手法更能表現(xiàn)食物的色香味”，有85%的用戶選擇了攝影圖像，64%的用戶喜歡拼貼風(fēng)格，39%的用戶喜歡插畫風(fēng)格，21%的用戶喜歡3D風(fēng)格。在喜歡的插畫風(fēng)格中，用戶最喜歡國潮插畫風(fēng)格，其次喜歡肌理插畫風(fēng)格，喜歡平扁漸變和平扁描邊風(fēng)格的占比較少。

調(diào)研分析發(fā)現(xiàn)，奶茶類公眾號的視覺風(fēng)格需要保持趣味性，應(yīng)該加強攝影圖像、插畫方面的設(shè)計。裝飾元素的使用應(yīng)適度，不能干擾正文文字的可讀性。

3.4 用戶色彩意象感知

產(chǎn)品色彩意象產(chǎn)生于用戶的產(chǎn)品色彩認知過程，是通過視覺感官通道對色彩感性需求獲取與再創(chuàng)造的結(jié)果。它能充分表達用戶的色彩感性需求，是設(shè)計師理解用戶色彩情感的重要媒介[5]。這部分調(diào)研了用戶對酸、甜、苦、辣、咸幾種基本味的色彩意象，一共提供了12項色系涵蓋了所有色相。從整體趨勢來看，甜味、辣味的意象選擇暖色系多，酸味、苦味和咸味的意象選擇冷色系多。

結(jié)合交叉分析的數(shù)據(jù)來看，性別與年齡因素對于色彩意向的選擇沒有明顯影響，用戶認為5、6號色系意象酸味，2、3號色系意象甜味，11、10號色系意象苦味，3、2號色系意象辣味，10、9色系意象咸味。用戶對于色系的選擇范圍跨度較小，這部分用戶對于色彩的意象感知較為統(tǒng)一。

4 視知覺理論應(yīng)用于奶茶類界面設(shè)計的具體方法

4.1 整合目錄功能，提高決策效率。

依據(jù)調(diào)研結(jié)果可以將用戶最常用的線上點單功能單獨設(shè)置為一欄，不常用的品牌加盟、品牌招聘、品牌資訊等功能就可以進行整合或刪減。同時，注意功能的重復(fù)設(shè)置，盡量呈現(xiàn)數(shù)量少、多方位的功能。有些功能是屬于包含關(guān)系就可以合二為一，如“會員中心”和“會員積分”，減少展示選項和不必要任務(wù)就是減少用戶的選擇時間，提高其決策效率。企業(yè)可以將這些功能、入口進行重要性排序，目錄命名應(yīng)該清晰準確，避免增加用戶的短期記憶負擔(dān)，使用戶想到所要做的操作時，能馬上找到界面中的任務(wù)區(qū)域[6]。

4.2 簡化界面信息，減輕認知負荷。

精簡文章內(nèi)容，控制閱讀時長。盡量將閱讀時長控制在3分鐘左右，圖片與相關(guān)文字信息的排布不宜過密，不適宜采用雙欄的形式進行排列，因為過于密集的信息加上較小的頁邊距會呈現(xiàn)出視覺壓迫感、緊張感。最好采用圖片在上文字在下的形式，長度控制在一屏左右為佳，這樣不僅用戶可以在一屏距離內(nèi)瀏覽完相關(guān)圖文，文字與圖片之間還可以保持合適的空間感。若圖文排布超過一屏距離，圖片與文字的間距就會過大，會缺少閱讀連續(xù)性，同時還會增加文章的整體篇幅以及用戶滑動手勢的頻率。要注意適用裝飾元素，奶茶類公眾號雖然需要帶有趣味性，但正文文字的編排不宜復(fù)雜多變，應(yīng)該降低裝飾元素對重要文字的干擾，確保文字的可讀性與易讀性。

4.3 把握知覺相似性，優(yōu)化界面秩序感。

調(diào)整信息倍率關(guān)系、元素大小比例?？梢岳米痔柋堵首兓⒆种乇堵首兓蛐芯啾堵首兓茉鞂哟胃小Ｗ痔柋堵示褪怯帽稊?shù)關(guān)系設(shè)置的字號的大小變化，注釋、正文、小標題、主標題的字號可以1.5的倍率增長，讓字符面積有規(guī)律地變化。字重倍率變化就是控制字體的描邊粗細、黑度變化。行距倍率變化是指以基礎(chǔ)行距為單位進行倍數(shù)遞增，通過控制行距調(diào)整文字之間的負空間形態(tài)。在設(shè)計時應(yīng)綜合運用這三種倍率關(guān)系調(diào)整文字之間的關(guān)系，使文字組之間的變化富有規(guī)律性。

4.4 利用色彩意象，提升用戶購買欲。

顏色知覺是視覺中一種有效的區(qū)分維度，對于事物而言色彩能起到識別作用。味道偏向酸味的茶飲可多采用檸檬黃或者黃綠色系，偏甜味的奶茶可以多采用桃紅色系、紫紅色系，苦澀的茶飲則適用青色系、紫色系。飽和度越高的暖色系往往會給人飲品甜度高、香味濃郁的感覺，飽和度較低的顏色適合運用于味道清淡或苦澀的茶飲。根據(jù)奶茶飲品的不同類別選擇合適的色彩意象，把控好色彩運用的比例才可以準確傳達出食物的色香味，增強用戶的食欲及購買欲。此外，還要注意攝影圖像的色彩不宜過于繁雜，版面的色彩要與圖像色彩協(xié)調(diào)統(tǒng)一。

5 結(jié)語

隨著信息時代的進步，媒介不斷變革和影響著人們的生活方式，年輕人的審美需求逐漸提高。視知覺原理在奶茶類公眾號中的作用不容忽視，設(shè)計師需要用視知覺的特性影響觀者的心智，遵循視知覺運作原則對公眾號進行設(shè)計，使其視覺內(nèi)容更加出彩且兼具實用性，從而提升用戶的閱讀質(zhì)量和體驗。

參考文獻：

[1] 賀孝梅，李劍鈺.人機交互中認知負荷的成因分析與設(shè)計策略研究[J].包裝工程，2020，41（10）：24-30.

[2] 齊志鵬.視知覺下通用信息設(shè)計研究：由字到圖的思考[J].湖南包裝，2020，35（6）：22-24.

[3] 盧建洲.論版式設(shè)計中的平衡[J].大舞臺，2012（9）：164-165.

[4] 張燕.奶茶綁架Z世代[J].中國食品工業(yè)，2021（15）：108-109.

[5] 張新新，楊明剛，張書濤，等.基于本體的產(chǎn)品色彩意象知識表達[J].包裝工程，2019，40（8）：41-46.

[6] 熊英，張明利.基于用戶體驗的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計分析[J].包裝工程，2016，37（4）：88-91.

作者簡介：魏暢（1996—），女，四川成都人，碩士在讀，研究方向：設(shè)計學(xué)。