基于蒙德里安風格的書城閱讀APP界面交互設計研究

郗彩蓮 陳明江 吳澤曼

關鍵詞：書城APP 界面設計 蒙德里安風格 交互設計 用戶體驗

引言

古往今來，閱讀是人類認識知識的窗口，是文化交流與傳播的重要方式?；ヂ摼W時代的到來，手機成為人類不可或缺的閱讀工具。傳統的紙質閱讀已漸漸被數字化閱讀方式所替代[1] 。通過手機的閱讀方式極大地滿足了人類隨時隨地進行閱讀的需求，從而有效地提高了閱讀效率。這個時候，閱讀類APP應運而生。然而目前市場上閱讀類APP其產品本身的缺點：如界面設計簡單粗糙、交互體驗不佳等問題導致了廣大用戶在試用期間產生的各種不滿。文章在分析現有的閱讀類APP界面與交互設計諸多缺點的基礎上，提出了基于蒙德里安藝術風格的書城閱讀APP的設計開發，可解決上述存在的問題，并提出新型閱讀APP在視覺與交互方面的創新設計。

一、閱讀類APP界面交互設計現狀分析

閱讀類APP作為用戶“移動閱讀”的主要媒介，已成為大部分手機用戶的必備應用。在國內，一些互聯網公司憑借品牌優勢和活躍的用戶群體進入移動閱讀市場，研發出了不同類型的移動閱讀平臺[2] 。例如：網易蝸牛讀書、QQ閱讀、掌閱、百度閱讀、微信讀書、豆瓣網等都是市面上常見的閱讀平臺。它們的出現，推動了移動閱讀市場的發展。然而由于閱讀類APP數量眾多，各開發商為了最大限度地搶奪用戶資源，導致其將大量精力投入到市場運營方面，而忽略了APP產品本身的界面交互設計的合理性，久而久之，用戶已習慣了千篇一律的界面和雜亂無章的交互設計，對閱讀體驗期望度不高。其產品在界面交互設計方面的問題，具體表現為設計風格同質化嚴重、界面的信息層級混亂、缺乏用戶情感體驗，問題研究由此展開。

（一）設計風格同質化嚴重。一款APP的界面設計主要用于將各種信息、視覺元素進行分組和排列，合理化地呈現給用戶。在手機應用商城中可搜索到大量的閱讀類APP，它們在內容和風格方面，相互借鑒、彼此模仿。當前大部分閱讀類APP缺乏對用戶行為上的洞察與理解，缺少自身獨特的賣點，呈現“同質化”特征。將嚴重降低用戶們對這些閱讀類APP的品牌識別度。

（二）界面的信息層級混亂。界面中的“信息層級”指圖片、文字信息集的秩序感，正確的視覺設計層級可以使用戶迅速捕獲圖片文字間的相對重要性[3] 。界面的信息層級在閱讀類APP 中起到了引導閱讀順序、體現APP品牌個性的作用。用戶習慣于“任務式”的進行交互行為，當用戶搜索相關書籍時，往往需要同時識別多個圖形來進行信息定位。當前眾多閱讀類APP的界面信息層級主要以開發商主觀感知為標準，進行隨意混搭，使得用戶體驗不理想。如QQ閱讀的各個模塊信息缺少合理分類，無明顯層級區分，導致用戶尋找信息的時間成本增加。再如微信讀書，當書架模塊的書較多時，無自動分類，容易使用戶產生視覺疲憊之感。

（三）缺乏用戶情感體驗。用戶習慣通過視覺感官來獲取信息，在生活中早已形成了固定的認知思維模式。無論是視覺還是交互行為，通過用戶對閱讀類APP的交互反饋，我們不難發現，用戶的情感體現會影響閱讀質量。然而當前大部分閱讀類APP界面、圖形等的色彩搭配雜亂，無法在用戶閱讀時，起到引導用戶情感與情緒的作用，缺乏獨特的閱讀氛圍營造。且忽視用戶在閱讀時的趣味性，APP內功能種類已成固定化，無新模塊的添加，也沒有動效、音效等的設計，無法滿足用戶多元化的閱讀方式、還包括交流溝通、購買書籍等需求，忽視了用戶在使用閱讀APP期間的情感反饋。

二、蒙德里安風格在設計界的應用分析

20世紀幾何抽象大師蒙德里安的風格，是以幾何圖形為基本元素，以表現抽象精神為目的，追求抽象化的藝術境界，具有獨特的設計風格，多年來深受各大藝術大師的喜愛和追捧。最大的特點就是色彩使用紅黃藍三原色、構圖使用直線以及直角等，它是極具個性、特色以及前衛的藝術風格[4] 。蒙德里安用其極度簡潔的方式，前衛的構圖理念，嚴謹的比例與固定的色彩將藝術脫離自然的外在形式，用抽象的形式表現出來，這種極富魅力的藝術思想，使其作品的影響力延續到現代藝術設計中。表現在室內設計、家具設計、服裝設計等方面。

1965年，來自法國的服裝設計師伊夫-圣-羅蘭，以蒙德里安的作品《紅、黃、藍的構成》為創作靈感，創作了著名的蒙德里安裙，它們的色彩清新明快，外形簡單、極富張力，在當時引起了極大轟動。另外，里特維德1917年設計的“紅藍椅”，用方形、長方形木條和木板進行組合，單純明亮的色彩來強化結構，不加掩飾的純粹色彩，是極簡風的象征。近些年來，蒙德里安風格在室內空間設計方面也有著深遠影響，相對于時尚和產品設計，可謂數不勝數，幾何樣式的設計讓空間變得線條利落簡單，極富特色，如圖1。多年來，蒙德里安風格深受廣大民眾的喜愛，但其風格在UI界面設計領域卻鮮有應用，這一領域是值得我們去探索的。

三、基于蒙德里安風格的書城閱讀APP界面交互設計的創新之處

界面交互設計包括視覺方面的設計以及交互、動效、音效等方面的設計?！队脩趔w驗要素》一書中，Jesse James Garrett 將交互設計定義為用戶體驗的結構層，界面視覺設計定義為用戶體驗的表現層[5] 。一款受歡迎的閱讀類APP，首先界面視覺設計要符合用戶的審美，且對用戶有足夠的吸引力;其次，交互設計必須符合用戶習慣，操作方便;再次，添加一些新功能，使APP更富有趣味性。書城APP是一款美觀與實用并存，集購書、閱讀、社交、導入TXT等功能為一體的綜合性手機閱讀APP。針對前面講到的市面上大部分閱讀類APP設計風格同質化嚴重、界面的信息層級混亂、缺乏用戶情感體驗的問題，分以下三個部分進行創新性的闡述。

（一）個性化的界面視覺元素設計，增加品牌識別度：針對市面上閱讀類APP的視覺風格同質化這一問題，書城APP延續了蒙德里安的美學手法，將蒙德里安的繪畫元素進行提取和拆分，并延伸為界面設計的形態。根據APP的功能性與需求，進行重組構建，注重氛圍的營造，體現界面的秩序美。圖形設計方面，采用蒙德里安風格的極簡線條，結合純粹的三原色與黑白，達到與同類閱讀APP在視覺上較大的區別，且容易讓用戶印象深刻。點、線、面的交錯，以三原色、黑白色為主的色彩搭配，減少漸變等復雜紋理，給人清爽的視覺體驗。在按鈕的設計方面，采用功能性的圖形符號進行引導，增加APP的品牌識別度。

（二）清晰的層級分類，提升用戶交互效率：用戶在應用市場中選擇閱讀類APP時，美觀與實用并存是其永恒不變的標準。針對市面上眾多閱讀類APP的信息層級混亂問題，避免一次性的任務信息層級，根據用戶需求合理規劃與設計、準確引導界面交互;運用蒙德里安藝術風格中的直線、直角布局，簡潔、美觀地將那個信息進行分類、整合。同時，呈現給用戶的視覺元素需合理化，也要考慮用戶“任務式”的操作習慣，界面的視覺畫面還需注意主次與順序的呈現，層級分明，突出視覺中心，從而達到舒適的交互體驗，提高用戶的交互效率，提升體驗好感度。

（三）新模塊的添加、動效結合音效，營造趣味性的交互體驗：交互設計是對用戶行為響應的設計[6] 。比如點擊彈出下拉菜單，瀏覽過的部分會變色，提示用戶無需重復進行無效操作等。雖然這些都是很細微的交互呈現方式，但卻處處體現著用戶交互體驗的重要性。然而毫無驚喜的內容、枯燥的閱讀界面，無論讀什么內容的書籍，都是千篇一律的視覺感受，這樣的交互體驗無疑是失敗的。APP的主界面、分界面之間，除了要確保它們之間切換的流暢性、觸覺交互的合理性，還需要增加閱讀體驗的趣味性，讓閱讀不再索然無味。運用紅黃藍、黑白對用戶情感的引導作用，針對不同功能、圖形、書籍內容主題等進行分類應用。購書、社交、導入文案等功能的導入，與其他市面上已有的閱讀APP相比，可以增加其可玩性和趣味性，不再只有單一的閱讀功能，還可以聽書、買書、交流，給予用戶新的體驗。

四、基于蒙德里安風格的書城閱讀APP界面交互設計實踐

由于閱讀類APP的使用并沒有固定的使用場景和時間限制。書城閱讀APP也不例外，從場景來看，碎片化時間利用率較高，用戶在使用該APP時，可能站在擁擠的地鐵里、也可能躺在床上、還有可能在食堂排隊打飯;從時間來看，白天與晚上的閱讀需求也是截然不同的。因此，APP的界面視覺設計除了美觀性，實用性也是需要考慮的重要因素。此項目是筆者主持并與團隊一起開發的，在設計過程中，成功地將蒙德里安風格融入該APP的視覺元素中，并增加了許多閱讀類APP沒有的新功能模塊，達到了預期的效果，為同類閱讀類APP的設計與開發提供了有利經驗。

（一）界面視覺設計：該閱讀APP的界面視覺設計，將蒙德里安風格中紅黃藍的配色與幾何極簡風構圖融入到設計中，巧妙地將UI界面的美觀與實用性結合起來。讓用戶在交互過程中得到了視覺上和心理上的滿足。

1.極簡的圖形與圖像設計：圖形也稱圖標，極簡的設計風格，將會降低長時間閱讀給用戶帶來的疲倦感，同時也是廣受用戶喜愛的風格。少即是多，就是我們通常所說的極簡風格，該APP啟動圖標是在視覺方面最先反饋給用戶的部分，所以其設計既要美觀，也要需要符合書城閱讀APP特性、便于識別。啟動圖標以極簡風格進行設計，采用藍色、淡藍色、白色搭配，帶給用戶理性、清爽、時尚的視覺感受，扁平風的筆畫組合成一個“書”字，下方是翻開的一本書的形狀，體現了APP屬性;在實用方面，可將圖形放大或縮小放置在不同規格、環境中進行應用，如圖2。導航欄圖形的設計，需要用戶在沒有任何外界指引的情況下，也能高效地進行操作。因此，應該使用最適合的、最明確的、最簡約的視覺元素作為標簽欄圖形的構成元素，將信息直截了當地傳達給用戶。運用蒙德里安藝術風格的幾何圖形進行組合，根據不同功能屬性進行色彩搭配，簡潔明快、易于識別。字體采用“微軟雅黑”字體，粗細均勻、便于閱讀與識別，如圖3。

相關圖像的繪制，采用了扁平風的插畫，如起始頁內容圖案的設計，共分為四個頁面，以介紹書城閱讀APP的“海量圖書”、“優質書圈”、“豐富功能”為主要畫面內容的插畫，最后一個為進入主界面的頁面，讓用戶直觀地了解該APP的產品特色。繪畫用筆干凈、簡單，沒有過多的裝飾，居中構圖的方式，虛實結合，富有層次感;一頁一頁地翻閱，到最后一頁的時候，點擊按鈕“立即體驗”直接可進入登錄界面，如圖4。

2.個性鮮明的色彩搭配：整體色彩搭配和諧而統一，不同模塊根據信息的重要程度所占面積不同，所安排的位置也有著一定的區別。頭像下的背景圖，由于面積較大，考慮到用戶的閱讀舒適度，并沒有使用容易引起視覺疲勞的紅色，也沒有使用過于刺眼的黃色，而使用了比較護眼的藍色，且藍色代表冷靜、科技，符合閱讀需求。色彩的明度、純度方面的人性化、細節化設計，可以很好地引導用戶的交互順序。點擊相應按鈕，可準確找到相關功能，且其他部分界面會做降低明度處理，突出視覺主體，讓用戶明確自己所處位置，從而降低交互時間成本，告別“東奔西跑”，如圖5。

色彩作為界面視覺設計的主要元素之一，對整個產品的基調和氛圍營造有著重要的作用[7] 。采用蒙德里安這一獨特風格，在這三個頁面之間的風格有所區別的同時，也需要在設計風格的整體上達到統一，最大限度地體現該APP的品牌辨識度。比如：登錄頁是最常見的、也是最重要的頁面之一，是每位用戶必用的界面。各種登錄方式和注冊輸入框的排版主次分明、比例適合。色彩方面不宜太刺眼、也不宜太亮，仍然使用藍色。當需要注冊時，點擊右上方的注冊按鈕，即可進入注冊頁面，注冊頁面為黃色;若已有賬號而忘記了密碼，還可以點擊忘記密碼，進入找回密碼頁面，此頁面運用富有警告、提醒作用的紅色。注冊和找回密碼頁面的左上角，設有返回按鈕，點擊可回到登錄界面，實現頁面之間的跳轉。最終完成的書城APP 界面設計一部分視覺效果如圖6、7、8，從產品的各個層面提升了用戶體驗。蒙德里安藝術風格最大限度地統一了不同頁面模塊的風格，給用戶營造了不同的閱讀氣氛，有利于交互的引導，同時提高了用戶的交互效率，讓用戶獲得舒適的交互體驗。

3. 清晰的界面層級設置：該APP共有五個主界面，每個主要界面內又由多個界面組成，要確保界面之間可以相互切換，需進行原型設計。為了提高層級秩序，每個主要界面最多只向下延伸三個切換界面，不做過多分界面，以免層級太多太長，否則用戶容易忘記操作路徑，而降低交互效率。無論哪種APP產品都需要遵循用戶的操作行為習慣，在此基礎上進行交互設計，在書城閱讀APP中以高保真原型圖進行全部UI界面設計中的交互設計操作。第一部分為引導頁、起始頁、登錄頁、注冊頁、修改密碼頁之間的交互設計，另一部分為書架界面的交互設計，連接兩個部分交互的是登錄按鈕，而書架界面與社區界面、書城界面、購物車界面與用戶中心頁界面的交互以標簽欄按鈕進行切換，便于用戶操作。

（二）新功能模塊的交互設計：蒙德里安風格的視覺設計，是書城閱讀APP提高辨識度的重要條件。而提高用戶交互效率，營造趣味性交互體驗是其不可忽視的最大優勢[8] 。刪減與用戶任務無關的非功能性元素，只保留重要的信息，減輕用戶的認知負荷。增加一些方便用戶使用的功能模塊：增加購書與社區頁面。這兩個頁面是市面上已有的閱讀類APP所沒有的，屬于新加的功能。購書頁面，用戶如果在閱讀過程中遇到自己喜歡的書籍還可以進行購買，無需切換另外的購書APP再進行購買，快捷方便。購書頁面中，由于很多書籍封面的色彩較雜亂，因此背景主色調采用白色，結賬采用了黃色，刪減書籍采用了蒙德里安主色調中的紅色，用來警示用戶是否確定刪掉這本書。點擊垃圾桶按鈕，便可以刪除相應的書籍，放在用戶常用的右側，面積比較大，適合手指操作。刪除相應書籍后，會有漸隱的直觀交互效果，如圖9。當購書頁面需要選擇購買并付款的書籍時，點擊相應黃色對勾，即可看到總結，并付款。另外，新增的社區頁面，是用來供用戶們在該平臺進行交流的，增加了閱讀APP的趣味性，可以發布動態、編輯書單、搜索好友、還可以找到自己的社區和熱門的社區，書友們可以各抒己見，互相推薦喜歡看的書籍，還能看看其他閱讀圈的熱門話題等。當下拉列菜單出現時，頁面其他部分會進行半透明暗調處理，突出主體，方便選擇，如圖10。

（三）動效與音效交互設計：該APP中的動效設計豐富、合理、便捷，對于用戶來說，可以帶來一定的閱讀趣味性和舒適度。多處運用到了動效的交互設計，點擊標簽欄的圖標進行頁面切換時主要以過渡為主，為了用戶在切換界面時不會感到遲緩故無多余動效。界面所涉及的所有動效，主要有在每個主要功能下界面切換時的動效與圖標變換動效，直觀、簡約。以社區界面為例，點擊右上角的功能鍵，將按鈕旋轉45°，變成關閉的按鈕樣式，且附加功能在右上角逐漸向左延伸，既增加了趣味性，又方便了用戶找到相應功能。再以購書界面為例，在購物車頁面點擊右上角的管理按鈕后，購物車內的書向左邊移動，隨之滑動出現的是每本書籍的刪除按鈕。點擊刪除按鈕，被點擊的書籍向左滑動消失，0.5秒之內顏色由深到淺漸變直到消失。底部書籍向上滑動，由模糊變清晰，這種類型的動效設計，可以讓用戶更容易找到所需功能、快捷操作。

在音效設計中，針對一些小說提供有聲書的服務，還包括書籍內容的其他語音播放、語音提示音、動效的音效、背景音樂等都可以使用戶讀者感受到趣味性和豐富的閱讀體驗。語音播放可以使用戶在閱讀時解放雙眼，讓眼睛休息片刻，傾聽書籍內容;閱讀聲音還可以根據不同的閱讀內容與背景切換不同的人物角色設定，如著名藝術家、演員等的聲音，讓用戶可以聽到專業的、有趣的聲音。除此之外，交互時的滑動、翻頁、點擊、刪除等操作都會有不同的富有特色的音效來區分。除此之外，在閱讀頁面，會根據不同的書籍內容，播放相應的音樂，帶用戶進入書中的世界，營造不同的閱讀氛圍?？傊?，搭配合理、有趣化的音效設計，讓“閱讀”方式變得更加多元，讓閱讀更加有趣。

結語

近幾年，各式各樣手機APP的開發與使用，呈現出了迅猛增長的態勢，這也從側面反映出了APP市場競爭日益激烈，其發展前景十分廣闊。隨著 kindle（電子閱讀器）、微信閱讀、豆瓣閱讀和掌閱iReader等品牌的閱讀應用不斷涌現，越來越多的同類型閱讀APP紛紛上市。面對眾多琳瑯滿目、同質化的閱讀APP產品，企業在開發與設計時，個性化的凸顯、美觀與實用并存的界面交互設計是多么重要，對以上幾方面的改善、以及新功能的創新，可以大大改善用戶體驗感。文章通過以蒙德里安藝術風格在書城閱讀APP界面交互的個性化設計為例，驗證了這個研究結論的可行性，不僅對該APP界面交互設計做了一定的探索，同時也為其他閱讀類APP產品界面交互設計提供了一定的參考。本項目的階段性研究成果“書城閱讀APP”在2020年全國大學生“互聯網+”創新大賽暨第七屆“發現杯”全國大學生互聯網軟件設計大獎賽中獲得了華南賽區二等獎的成績，同時也為課題今后的深入研究奠定了一定的基礎。