關鍵詞：視知覺;奶茶類公眾號;界面設計;設計方法

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

0 引言

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

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

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

1.1 奶茶類公眾號界面設計的問題

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

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

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

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

1.2 奶茶類公眾號界面設計的架構及元素

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

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

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

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

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

2.1 視覺信息傳達性

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

2.2 界面布局整體性

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

3 基于視知覺理論的奶茶類公眾號界面設計的用戶調研

3.1 調研對象與內容

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

3.2 用戶行為調研分析

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

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

3.3 用戶視知覺調研分析

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

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

3.4 用戶色彩意象感知

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

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

4 視知覺理論應用于奶茶類界面設計的具體方法

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

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

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

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

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

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

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

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

5 結語

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

參考文獻：

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

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

[3] 盧建洲.論版式設計中的平衡[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)品界面設計分析[J].包裝工程，2016，37（4）：88-91.

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