互聯(lián)網(wǎng)技術(shù)在美食類APP界面中的應(yīng)用

1、摘要：在互聯(lián)網(wǎng)技術(shù)的不斷進(jìn)步的前景下，大眾的生活方式在不停的發(fā)生著改變，信息圖形設(shè)計(jì)被更多人映入眼簾。步入信息時(shí)代，各種電子設(shè)備的不斷興起，時(shí)代的飛速發(fā)展與生活方式的不斷進(jìn)步，人們獲取信息的方式和途徑也越來越多種多樣，信息圖形充斥了我們的生活，地鐵站的指示牌、商品的包裝袋、手機(jī)內(nèi)安裝的各種應(yīng)用軟件等等。在我們身邊日常的學(xué)習(xí)和生活中的各種不同方面，信息圖形都在不斷進(jìn)步，發(fā)揮著不可取代的作用。在互聯(lián)網(wǎng)時(shí)代的進(jìn)程下，科學(xué)技術(shù)飛速發(fā)展，人們對身邊事物的追求不斷提升。食品包裝既要高端大方，彰顯品質(zhì)，又不能脫離大眾化，失去煙火氣。手機(jī)機(jī)身要線條流暢，機(jī)身輕薄，體積重量小，顏色青春跳脫。手機(jī)應(yīng)用要界面的簡潔

2、大方，邏輯感強(qiáng)，使用順暢，注重使用者的交互體驗(yàn)等等。本文分析了現(xiàn)有美食類信息圖形的使用，根據(jù)信息圖形設(shè)計(jì)的理論知識與APP界面設(shè)計(jì)規(guī)范相結(jié)合，通過不斷分析與研究，嘗試設(shè)計(jì)了一個(gè)美食類APP“O&O”的部分界面，并不斷探究信息圖形在APP界面的應(yīng)用。在整個(gè)美食類APP“O&O”界面的信息圖形設(shè)計(jì)和交互研究過程中，對美食類APP的功能有了新的嘗試與突破，使得推薦功能更突出，更精準(zhǔn)分析用戶需求，幫助用戶健康飲食，戳中用戶痛點(diǎn)，從而提高APP使用頻率和知名程度。關(guān)鍵字：信息圖形設(shè)計(jì)；APP界面；健康飲食；美食社交第1章 緒論1.1課題研究的目的與意義在互聯(lián)網(wǎng)迅速發(fā)展的背景下，信息圖形作為傳達(dá)信息的一個(gè)

3、重要的體現(xiàn)工具，表現(xiàn)形式逐漸豐富。在對信息圖形進(jìn)行更深層次的不斷研究的過程中, 它在實(shí)際應(yīng)用中的設(shè)計(jì)方面和用戶體驗(yàn)方面的優(yōu)點(diǎn)也慢慢顯現(xiàn)。本文將當(dāng)下火爆的兩款美食類APP界面中信息圖形設(shè)計(jì)方面進(jìn)行分析，研究信息圖形在APP界面中的優(yōu)缺點(diǎn)，從而提高APP界面使用的容易程度和方便程度。在不斷的對信息圖形的充分理解和分析后，能夠相對準(zhǔn)確的表達(dá)信息內(nèi)容及圖形使用的容易程度,對信息傳遞的效率不斷的提升,使信息圖形的識別度更高，但仍然還沒有出現(xiàn)清晰的風(fēng)格語言和更成熟的理論體系。在不斷的對信息圖形進(jìn)行應(yīng)用和實(shí)踐之后，通過對色彩的把控和對表現(xiàn)手法的明確分類，傳達(dá)給用戶的不再是冗雜又繁密的信息的堆砌，而是條例清晰

4、、方便理解的信息，從而不斷提升用戶體驗(yàn)。本文的研究意義在于，通過互聯(lián)網(wǎng)的不斷發(fā)展，借助手機(jī)網(wǎng)絡(luò)的不斷進(jìn)步，提供給更多用戶更方便的美食類服務(wù)，但由于目前國內(nèi)的信息圖形仍在不斷的發(fā)展中，并沒有完全體現(xiàn)出它的全部作用。所以，本課題在對信息圖形相關(guān)的理論分析了解后，通過研究后對美食類APP界面的設(shè)計(jì)，提升信息圖形的使用效率，讓其更容易被理解和被使用，減少用戶對文字信息的煩躁感，從而達(dá)到用戶對產(chǎn)品的期望。1.2國內(nèi)外研究現(xiàn)狀信息圖形一直是國內(nèi)外藝術(shù)類學(xué)科所關(guān)注的一個(gè)主題。早期的信息圖形是用圖來進(jìn)行交流的，主要功能是輔助人們對文字的理解。在人類文明經(jīng)過一段時(shí)間發(fā)展到一定程度后，這種將文字轉(zhuǎn)化為形象的表現(xiàn)方

5、式出現(xiàn)在人們的視野中。西方的一些國家對信息圖形的重視遠(yuǎn)遠(yuǎn)早于國內(nèi)，并且在不斷嘗試改良的過程中，逐漸形成了鑒于自己國家文化、針對自己國家社會(huì)的獨(dú)立的信息圖形理論體系和許多作品。相對國外來說，國內(nèi)對信息圖形設(shè)計(jì)學(xué)科的接觸是從20世紀(jì)90年代開始的，在公共場所和物品包裝上都有體現(xiàn)，這也意味著國內(nèi)信息圖形進(jìn)入萌芽階段。由于起步時(shí)間不夠早，在我們國內(nèi)信息圖形方面不斷發(fā)展的過程中，有大部分作品是參考、模仿國外的信息圖形作品，但由于國內(nèi)外的生活環(huán)境、社會(huì)因素等不盡相同，故而需要對信息圖形有更進(jìn)一步的了解與深入的研究，并根據(jù)我們國內(nèi)的情況進(jìn)行調(diào)整與適應(yīng)。隨著互聯(lián)網(wǎng)的不斷發(fā)展，信息圖形設(shè)計(jì)被更多的主流媒體所意識

6、到，在信息圖形更廣泛的應(yīng)用后，越來越多的出現(xiàn)在我們身邊。1.3主要研究內(nèi)容本文在對信息圖形的充分學(xué)習(xí)和鉆研后，將信息圖形作為一種表達(dá)方式運(yùn)用在美食類APP界面中，并對流程設(shè)計(jì)進(jìn)行了規(guī)劃，得出所要進(jìn)行的過程，具體如下：（1）對市面上美食類APP中的信息圖形分析針對市面上流行的美食類APP，通過對界面中信息圖形部分的分析與深入研究，仔細(xì)思考每一種信息圖形所代表的含義，是否能讓使用者直觀的理解其中的含義。（2）關(guān)于“O&O” APP構(gòu)想“O&O”多是使用信息圖形設(shè)計(jì)，通過圖形在視覺上產(chǎn)生引導(dǎo)，來代替文字的繁雜，增加訂單分析功能，通過圖表的形式將需要傳達(dá)的信息傳遞給用戶。界面中運(yùn)用簡潔易懂的信息圖形來

7、代替文字，減少用戶的使用和學(xué)習(xí)成本，方便用戶操作，從而提高使用效率。（3）界面設(shè)計(jì) 在對APP的構(gòu)想反復(fù)整理，對可行性進(jìn)行分析之后，進(jìn)行流程圖、線框圖的確定，進(jìn)一步設(shè)計(jì)APP主要功能界面及其他必要功能界面，通過模擬流程，對界面進(jìn)行審查，查缺補(bǔ)漏。第2章 信息圖形2.1信息圖形的概念德國信息圖形學(xué)教授馬庫斯斯洛普曾說過：“信息圖形是一種集合信息、數(shù)據(jù)和知識的視覺表現(xiàn)手段，討論它的發(fā)展過程就像討論人類的發(fā)展過程?！毙畔D形就是通過對圖形的再設(shè)計(jì)將要表達(dá)的文字以信息圖形的方式表現(xiàn)出來，從而簡化人們的理解過程，便于溝通。簡單來說就是，信息圖形減短了人們在接收到信息之后理解、消化的時(shí)間，從而提高信息的使

8、用效率，如圖1所示。圖1 信息圖形舉例2.2信息圖形的發(fā)展趨勢隨著社會(huì)的發(fā)展和進(jìn)步，人類文明主要分為三大時(shí)期。圖2 原始文明時(shí)期原始文明時(shí)期（圖2）：在人類文明出現(xiàn)后，在考古學(xué)家對研究結(jié)果的不斷分析中發(fā)現(xiàn)，遠(yuǎn)古人類通過在樹枝、石頭上留下劃痕來記錄數(shù)量，在越來越多的生活場景中，開始用繩子系扣的方式來記錄信息。經(jīng)過考古學(xué)家一段時(shí)間的研討，發(fā)現(xiàn)了巖壁上的狩獵等場景，將這種在巖壁上相互摩擦而留下的痕跡稱為巖畫，這就是目前發(fā)現(xiàn)的信息圖形最早期的表現(xiàn)形式，如圖，在許多文化遺址中，不斷的發(fā)現(xiàn)了巖畫，這為考古學(xué)家對當(dāng)時(shí)環(huán)境的研究提供了必要的基礎(chǔ)和證據(jù)。圖3 工業(yè)文明時(shí)期工業(yè)文明時(shí)期（圖3）：隨著人們生活方式和

9、社會(huì)生產(chǎn)力的不斷提升，在人類進(jìn)入英國工業(yè)時(shí)代以來，逐漸由機(jī)器代替生產(chǎn)，慢慢的發(fā)展到機(jī)器工業(yè)文明時(shí)代。隨著文字的出現(xiàn)，它的精簡、準(zhǔn)確、穩(wěn)定等優(yōu)點(diǎn)迅速被人類發(fā)現(xiàn)并開始使用。而由于每個(gè)人的社會(huì)文化背景、對事物的理解力不同，文字的缺點(diǎn)也逐漸顯露。同一段文字可以表達(dá)不同的含義，這使得人們在理解上出現(xiàn)偏差。而運(yùn)用信息圖形來代替文字表達(dá)數(shù)據(jù)的表現(xiàn)方式，解決了文字的缺點(diǎn)，圖形、圖表的表達(dá)更加清晰明了，促使信息圖形得到了普遍的應(yīng)用。而這其中最突出的表現(xiàn)形式就是地圖，運(yùn)用輪廓清晰的線條來代替“想左走1000米，右轉(zhuǎn)，再走800米”的表述，配以簡潔的文字，從而輕易的達(dá)到指引的作用。信息文明時(shí)期：在獲取信息手段越來越

10、多的情況下，信息圖形開始走進(jìn)民眾的視野。怎么能讓界面的信息圖形被更多的用戶注意到？怎么能輕松的被看懂？變成了人們對信息圖形的新一輪挑戰(zhàn)。通過將文字盡可能多的轉(zhuǎn)化成信息圖形的方式，方便大眾更直觀的獲得信息，減少文字的閱讀量，緩解人們的“文字焦慮”，使用戶從“看字操作”向“看圖操作”的方向轉(zhuǎn)化，減少過度信息帶來的壓力，從而使用戶的整個(gè)操作過程更加簡短便捷。2.3信息圖形的作用2.3.1直觀、準(zhǔn)確文字本身是抽象的，是需要接受主體通過視覺或者聽覺感受，通過大腦進(jìn)一步的分析，最后轉(zhuǎn)化成形象的一種表達(dá)方式。在這個(gè)過程中，不同的人會(huì)有不同的分析，從而形成不同的理解方式，導(dǎo)致結(jié)果產(chǎn)生分歧。而信息圖形是具象的，

11、它可以準(zhǔn)確生動(dòng)的表現(xiàn)出需要表達(dá)的信息，可以直觀的將需要傳達(dá)的信息以形象的方式傳遞給使用者，從而加快對信息的識別度，使用戶更容易相信。畢竟“耳聽為虛，眼見為實(shí)”，視覺系統(tǒng)所傳達(dá)的信息遠(yuǎn)比文字傳達(dá)的信息更容易讓用戶相信。2.3.2記憶深刻隨著時(shí)代的發(fā)展，各個(gè)學(xué)科之間都有一些很難理解的專業(yè)術(shù)語，而信息圖形可以在中間代替文字，起到紐帶的作用，通過將復(fù)雜的信息轉(zhuǎn)化成信息圖形的方式，幫助需要的學(xué)生理解、接收信息。并且，與文字相比，信息圖形對大腦更有記憶點(diǎn)，不需要逐字理解、傳達(dá)再進(jìn)行記憶，關(guān)聯(lián)性強(qiáng)，使學(xué)生印象深刻。2.3.3加強(qiáng)統(tǒng)一性經(jīng)過時(shí)間的沉淀和歷史的變遷，每個(gè)國家、民族都有自己的獨(dú)一無二的風(fēng)土人情和特

12、殊的生活習(xí)慣，由此產(chǎn)生了獨(dú)特的語言文字。這也導(dǎo)致同樣的內(nèi)容，卻有不同的表達(dá)方式，而信息圖形的使用就會(huì)減少這類問題發(fā)生的機(jī)會(huì)，運(yùn)用統(tǒng)一的標(biāo)識設(shè)計(jì)來進(jìn)行表達(dá)，方便各種用戶獲得消息，使得信息傳達(dá)的誤差率大大降低。2.4信息圖形的設(shè)計(jì)原則美國設(shè)計(jì)學(xué)理論家維克多.帕帕奈克在為真實(shí)世界設(shè)計(jì)書中說過：在設(shè)計(jì)之前，設(shè)計(jì)師需要：深入洞察用戶的真實(shí)需求，而不是波動(dòng)需求；考慮到使用者的社會(huì)地位、文化背景等方面的情況不同，越簡易越方便操作理解；考慮不同的使用場景和環(huán)境，加深下沉市場程度；為所有人設(shè)計(jì)，面向全部群體，而不是因人而異，只針對某部分情況的人進(jìn)行設(shè)計(jì)，更普遍化。因此得出結(jié)論，設(shè)計(jì)師在設(shè)計(jì)美食類APP中的信息圖

13、形前，應(yīng)注意界面的信息圖形簡單大方，容易理解，表達(dá)含義準(zhǔn)確，操作邏輯順暢，從而使得應(yīng)用的產(chǎn)品用戶體驗(yàn)升級。2.4.2簡單易懂原則由于用戶文化程度、生活習(xí)慣等的差異性，用信息圖形的表達(dá)方式來代替文字，減少不同用戶在看到相同文字時(shí)所引起歧義。優(yōu)秀的信息圖形設(shè)計(jì)，一定是用戶第一眼看到能夠快速理解出其中的含義，不需要進(jìn)行反復(fù)的思考與理解，或詢問他人等操作，所以在設(shè)計(jì)時(shí)，要把握簡單易懂的原則，用簡單的信息圖形輕而易舉的表達(dá)出想要表達(dá)的有一定復(fù)雜程度的文本信息。2.4.2準(zhǔn)確原則文字具有復(fù)雜性，設(shè)計(jì)師在制作信息圖形時(shí)，要想準(zhǔn)確的傳達(dá)信息，就一定要在制作之前，充分了解每一個(gè)信息的內(nèi)容以及他們背后的邏輯聯(lián)系，

14、深入理解想要傳達(dá)的信息，從而保證用戶接收到的信息不是錯(cuò)誤的。2.4.3易用原則在互聯(lián)網(wǎng)的發(fā)展下，用戶越來越在意對產(chǎn)品使用后的自我感受，根據(jù)用戶心理分析，檢測用戶在產(chǎn)品使用過程中的交互是否順暢，是否需要增加一些趣味性的互動(dòng)，在用戶等待時(shí)，緩解無聊的情緒，從而方便用戶的使用。第3章 信息圖形在美食類APP界面中的應(yīng)用分析3.1美食類APP界面中的信息圖形在美食類APP中，信息圖形主要指的是圖形和圖表兩個(gè)部分。而圖形主要指界面圖標(biāo)，是為了讓用戶在挑選口味時(shí)，更加簡單易懂的查看，簡潔的做出選擇，避免對口味的描述不準(zhǔn)確。將繁雜的文字信息簡單化，減少大量的文字，從而避免不必要的誤解出現(xiàn)。在互聯(lián)網(wǎng)越來越發(fā)達(dá)

15、、手機(jī)越來越普及的情況下，市場上美食類APP也逐漸出現(xiàn)了競爭。怎樣的信息圖形能獲取到更多的用戶的好感度？怎樣能讓用戶一眼就明白這個(gè)圖形的含義？這都是現(xiàn)階段需要設(shè)計(jì)方面思考和深入研究的部分。圖表在美食類APP中，主要應(yīng)用在對用戶過往訂單數(shù)據(jù)的剖析，通過圖表的形式展現(xiàn)可以更直觀的讓用戶了解自己的飲食習(xí)慣，進(jìn)而進(jìn)行分析與調(diào)整。隨著人們對健康重視程度的不斷增高，美食類APP的發(fā)展勢頭迅猛。相對于自己在家動(dòng)手下廚，年輕人更偏向于采取外賣的形式，等外賣小哥把做好的飯菜送過來，這既大大解決了不會(huì)做飯的痛苦，又減少了買菜、炒菜等繁瑣的步驟，是當(dāng)下年輕人的普遍選擇。而當(dāng)下大眾最常用的美食類APP主要有：美團(tuán)外賣

16、和餓了么，本文將嘗試對其進(jìn)行分析。3.2美團(tuán)外賣界面分析美團(tuán)外賣logo延續(xù)美團(tuán)的黃色，將一只狗狗的頭放在logo上，體現(xiàn)出美團(tuán)外賣的口號，“美團(tuán)外賣，送啥都快”。美團(tuán)外賣APP主界面下有四個(gè)一級界面，分別是首頁、會(huì)員、訂單、我的。界面如圖4，根據(jù)界面的信息圖形分析如下。3.2.1風(fēng)格不統(tǒng)一根據(jù)截圖，可看出此款美食類APP界面的圖形風(fēng)格并沒有完全統(tǒng)一。功能區(qū)上半部分，采用卡通擬物的風(fēng)格，立體感強(qiáng)，并配有強(qiáng)烈的投影。功能區(qū)下半部分，采用扁平的風(fēng)格，配以不同的顏色和文字，而顏色上又采取漸變色，上淺下深。底部金剛區(qū)部分，圖標(biāo)采用線框的風(fēng)格，配以深灰色輔助。這三個(gè)部分的信息圖形風(fēng)格各不相同，并都配有文

17、字解釋，無法體現(xiàn)信息圖形的功能。3.2.2界面版式過于復(fù)雜界面功能區(qū)中分類區(qū)有兩個(gè)部分，而每個(gè)分類又有5-10個(gè)分支。個(gè)人覺得整體分類混亂，導(dǎo)致界面版式過于復(fù)雜，并沒有發(fā)揮出信息圖形的簡單易懂性，反而使界面混亂，用戶無法理解這樣做的目的以及背后的邏輯關(guān)系，無法體現(xiàn)出信息圖形表達(dá)準(zhǔn)確的優(yōu)點(diǎn)。3.2.3用戶體驗(yàn)不足在互聯(lián)網(wǎng)的發(fā)展下，各類APP市場競爭激烈，但商業(yè)氣息過重會(huì)直接導(dǎo)致用戶體驗(yàn)受到影響。界面上方的絲芙蘭廣告，只是一個(gè)宣傳推廣的物料，與外賣毫無關(guān)系，卻由于商業(yè)價(jià)值放在界面醒目的位置，吸引用戶眼球，會(huì)使用戶產(chǎn)生厭煩的心理，導(dǎo)致商業(yè)氣息過重，降低用戶對產(chǎn)品的使用體驗(yàn)，用戶在使用的過程中，很容易

18、因?yàn)榻缑娴膹?fù)雜而選擇其他產(chǎn)品。應(yīng)通過柔和的方式，讓用戶主動(dòng)體驗(yàn)，而不是在用戶點(diǎn)餐的場景中出現(xiàn)。圖4 美團(tuán)外賣主界面3.3餓了么界面分析餓了么logo采用藍(lán)色，logo上只有一個(gè)英文字母“e”，明顯的記憶點(diǎn)，便于用戶記憶。餓了么APP與美團(tuán)外賣相似，界面信息圖形風(fēng)格不統(tǒng)一，功能過于復(fù)雜的現(xiàn)象同樣存在，界面如圖5。3.3.1界面內(nèi)容重復(fù)從餓了么APP的主界面可以看出，除了界面信息圖形風(fēng)格不統(tǒng)一之外，功能區(qū)上半部分的五個(gè)圖形內(nèi)，有文字的出現(xiàn)，而這五個(gè)圖形的下方又有相同的圖形出現(xiàn)。圖形相關(guān)文字重復(fù)出現(xiàn)兩次，且距離很近，這種表現(xiàn)方式，既重復(fù)冗雜，使產(chǎn)品邏輯混亂，、又無法體現(xiàn)出信息圖形簡潔的作用。3.3.

19、2分類標(biāo)簽?zāi)：缑鎯?nèi)的“全城必吃”和“星選好店”采用相類似的信息圖形，文字內(nèi)容也相似，兩個(gè)分類標(biāo)簽重復(fù)度很高。界面內(nèi)“夜宵”、“買菜”、“福利中心”等標(biāo)簽在同一層級，而這幾個(gè)標(biāo)簽詞語在內(nèi)容上并不屬于同一層級，從而導(dǎo)致頁面內(nèi)標(biāo)簽分類奇怪，用戶無法理解內(nèi)部邏輯，降低使用體驗(yàn)。訂單的區(qū)域分配：按照不同的省市，或地區(qū)查找匹配符合條件的訂單信息。圖5 餓了么主界面3.4小結(jié)綜上所述，目前市面上的美食APP存在以下幾點(diǎn)缺點(diǎn)，界面內(nèi)圖標(biāo)風(fēng)格不夠統(tǒng)一，分類出現(xiàn)重復(fù)，版式過于復(fù)雜。但同時(shí)也存在許多的優(yōu)點(diǎn)，相關(guān)信息的資源手段豐富、有許多合作渠道相互配合等等。在信息圖形方面，簡單易懂，界面中部分信息圖形與大眾常用的

20、APP中的信息圖形相類似，減少用戶的學(xué)習(xí)成本，讓用戶容易上手，在不能簡化功能的前提下，通過簡化圖形的方式，讓用戶減少選擇。第4章 美食類APP“O&O”中的信息圖形4.1美食類APP“O&O”設(shè)計(jì)構(gòu)想“O&O”是Order和Original的縮寫，意思是所設(shè)計(jì)的APP主要針對預(yù)定即外賣，并注重所使用的原材料，即營養(yǎng)成分上的分析與研究。目前外賣市場越來越復(fù)雜多變，大家更在乎食品的口味與原材料?！癘&O”是基于IOS系統(tǒng)設(shè)計(jì)的美食類APP，隨著美食行業(yè)的興起，各種測評、打卡、推薦在微博、小紅書上不斷延續(xù)，人們對美食的了解不斷深入，對口味的追求也隨之越來越高。在不斷追尋口味的過程中，對均衡飲食逐漸忽

21、視。飲食口味過于油膩，口味偏好明顯，經(jīng)常性食用宵夜，飲食不規(guī)律，對身體健康造成了嚴(yán)重的影響?！癘&O”APP擁有對訂餐記錄的分析與建議，根據(jù)用戶近日的飲食情況，對營養(yǎng)成分進(jìn)行分析，對應(yīng)推薦用戶缺少的成分。在APP界面中通過信息圖形的呈現(xiàn)方式，為用戶提供更多選擇，且操作簡便，準(zhǔn)確的將想傳達(dá)的信息傳達(dá)給用戶。4.2“O&O”APP設(shè)計(jì)功能完善的APP界面設(shè)計(jì)，不僅要求界面圖標(biāo)設(shè)計(jì)的簡單易懂，界面的布局也是合理清晰的。4.2.1主圖標(biāo)設(shè)計(jì)主圖標(biāo)根據(jù)APP的命名而來，希望凸顯“O”的元素，簡潔明了，方便用戶記憶。運(yùn)用黃金分割比例的兩個(gè)圓形和矩形，經(jīng)過多次調(diào)整修改，組合成字母“O”的樣式，而外圈的“O”

22、比例又與手機(jī)APP界面相似，體現(xiàn)出此款A(yù)PP的使用載體，如圖6所示。圖6 “O&O”主圖標(biāo)設(shè)計(jì)4.2.2信息圖形設(shè)計(jì)“O&O” APP，所有界面的圖形部分都采用線框的表現(xiàn)形式，風(fēng)格更加統(tǒng)一，并在圖形上進(jìn)行不同的設(shè)計(jì)。通過調(diào)查市面上現(xiàn)有的APP中的信息圖設(shè)計(jì)，對表現(xiàn)形式統(tǒng)一的部分進(jìn)行沿用，從而減少用戶的學(xué)習(xí)成本，提高使用率。而針對市場上還沒有的信息圖形部分，進(jìn)行分析研究與設(shè)計(jì)制作。通過資料收集分析文字是否為象形文字，并根據(jù)表達(dá)的含義，總結(jié)出相應(yīng)的特點(diǎn)，運(yùn)用信息圖形的形式表達(dá)。圖7為“O&O”APP界面中的信息圖形元素。金剛區(qū)的四個(gè)圖標(biāo)區(qū)分為選中與未選中的狀態(tài)，選中狀態(tài)下，對應(yīng)的圖標(biāo)會(huì)呈現(xiàn)深色，而

23、未選中狀態(tài)下，則顯示描邊狀態(tài)，以便于用戶知道目前所在的界面是屬于哪一個(gè)板塊。圖7 “O&O”APP中的信息圖形信息圖形設(shè)計(jì)不止包括圖形部分，也包括圖表部分，圖8為APP界面內(nèi)的圖表展示。在“O&O”APP中，會(huì)根據(jù)用戶的訂單分析用戶的飲食營養(yǎng)，也可仔細(xì)分析其中的營養(yǎng)元素。運(yùn)用柱狀圖、折線圖等形式，和整個(gè)APP界面的顏色統(tǒng)一、風(fēng)格相近，且可以更加直觀的向用戶傳遞出所想要表達(dá)的信息內(nèi)容。圖8 “O&O”APP中的信息圖表4.2.3 交互布局設(shè)計(jì)如圖，在界面的布局上，整體采用宮格的分布形式，每個(gè)層級的界面之間都存在包含關(guān)系，這樣使得整個(gè)APP的界面層級結(jié)構(gòu)統(tǒng)一化。產(chǎn)品主界面頂部采用抽屜式導(dǎo)航設(shè)計(jì)，通

24、過減少界面中非核心功能部分的占比，也就是增加核心部分的比例，從而使APP主界面設(shè)計(jì)更簡潔，功能更突出。中央是地址信息，根據(jù)用戶手機(jī)的定位確定，左側(cè)為消息欄，可快速獲取店家、聯(lián)系人等發(fā)來的消息，右側(cè)為搜索欄，可看到歷史記錄和相關(guān)推薦。主界面底部金剛區(qū)共有四個(gè)部分，只保留信息圖形，減少文字描述，緩解文字所帶來的視覺壓力。整體主界面根據(jù)層級關(guān)系，采用卡片式結(jié)構(gòu)，使界面層級感豐富，規(guī)整化，從而減少用戶在APP中的學(xué)習(xí)成本，方便使用。經(jīng)過合理的對APP界面進(jìn)行布局設(shè)計(jì)，提高用戶的整體使用體驗(yàn)，從而提高用戶對APP的滿意度，帶來良好的口碑。如圖9所示。圖9 界面布局4.3界面展示根據(jù)前期工作所收集到的信息

25、與自身對信息圖形的理解，在準(zhǔn)確定位目標(biāo)人群后，對APP界面進(jìn)行構(gòu)思與設(shè)計(jì)迭代。4.3.1“O&O”美食類APP界面設(shè)計(jì)框架基于前期對同品類APP的分析，通過紙面流程分析，確定信息框架，制定設(shè)計(jì)規(guī)范，從而方便其他界面的視覺設(shè)計(jì)工作。根據(jù)此款美食類APP是功能構(gòu)想以及設(shè)計(jì)思路，將“O&O”APP的主要界面流程進(jìn)行梳理，分為一級界面、二級界面以及其他輔助性功能界面，如圖10。一級界面主要包括：首頁、朋友、訂單以及個(gè)人信息，每一界面又有相對應(yīng)的二級界面。圖10 界面設(shè)計(jì)框架4.3.2“O&O”美食類APP交互布局展示根據(jù)“O&O”美食類APP的設(shè)計(jì)構(gòu)想和現(xiàn)實(shí)中APP界面的使用流程，對整體的交互布局進(jìn)行

26、設(shè)計(jì)，如圖11。用戶第一次通過桌面logo進(jìn)入APP，會(huì)通過三頁引導(dǎo)界面進(jìn)入到賬號注冊登錄界面，在賬號登錄界面中可跳轉(zhuǎn)到界面注冊和忘記密碼界面，用戶登錄后可通過微信和QQ等方式尋找好友，也可跳過此步驟。若用戶并不是第一次進(jìn)入APP，則直接進(jìn)入一級主界面。進(jìn)入APP主界面后，可通過金剛區(qū)進(jìn)入其他三個(gè)一級界面，每個(gè)一級界面之間都可以互相跳轉(zhuǎn)。用戶進(jìn)入一級界面后可繼續(xù)點(diǎn)擊進(jìn)入對應(yīng)二級界面，各二級界面之間不可跳轉(zhuǎn)。消息和查找界面在每一個(gè)一級界面中均可直接進(jìn)入，返回則跳轉(zhuǎn)到原一級界面。圖11 交互布局展示4.3.3“O&O”一級界面展示主頁（圖12）：在主頁上部有將食物進(jìn)行簡單分類，主食、蔬菜、甜品和飲

27、品，而在每一項(xiàng)分類之后，又對其進(jìn)行了劃分，如將主食分為米飯、面條、餃子和其他，配以一句話的描述和典型的圖片。頁面頂部的圖標(biāo)分別代表消息、地址和搜索，在消息界面可以與商家或者朋友聊天，搜索界面可以幫助你快速找到你想要的食物。這三個(gè)圖標(biāo)和底部金剛區(qū)圖標(biāo)風(fēng)格統(tǒng)一，使整個(gè)APP的各個(gè)界面清晰易懂，方便操作。口味分組（圖13）：在這里可以看到口味相似的朋友，并通過簡短的描述選擇用戶，點(diǎn)擊獲取他所推薦或常吃的食物。后臺(tái)根據(jù)用戶的口味（經(jīng)用戶選擇允許操作后進(jìn)行口味數(shù)據(jù)的公開），進(jìn)行用戶分組。比如不吃香菜的分組中，選擇Kris，則會(huì)對應(yīng)推薦他所嘗試的不加香菜食物、以及他推薦的可以不加香菜餐廳等。口味分類可自由

28、發(fā)揮，建立標(biāo)簽后，若有相同口味的人或想嘗試新口味的人，自然會(huì)選擇加入，繼而壯大該口味的隊(duì)伍。這樣不僅增加了此APP的交互性，也擁有一點(diǎn)社交的性質(zhì)，從而方便用戶了解更多餐廳的不同口味，品嘗到適合自己的菜品或進(jìn)行新發(fā)地嘗試與挑戰(zhàn)。圖 12 一級界面-主頁 圖13 一級界面-口味分組訂單（圖14）：用戶可在APP內(nèi)隨時(shí)查看自己的訂單記錄，通過展示店鋪圖片以及名稱、等級配送時(shí)間、距離等信息，繼而方便用戶進(jìn)行進(jìn)一步操作，“再來一單”、“評價(jià)”等等。模擬用戶有可能出現(xiàn)的忘記店鋪信息、找不到店鋪等情況，以減少用戶在APP內(nèi)的使用成本，為用戶節(jié)省時(shí)間，并提高使用效率。個(gè)人信息（圖15）：對用戶個(gè)人方面的信息和

29、數(shù)據(jù)，相當(dāng)于個(gè)人資料卡，包括用戶常用地址、飲食喜好、錢包、訂單評價(jià)等等。每一層級對應(yīng)的信息都可進(jìn)行記錄和更改，并保護(hù)用戶隱私，在未獲取用戶同意前，只對用戶自己開放，用戶允許后可對朋友開放。圖14 一級界面-訂單 圖15 一級界面-個(gè)人信息4.3.4“O&O”二級界面展示訂單分析界面（圖16)，根據(jù)用戶近期在APP內(nèi)訂餐的數(shù)據(jù)進(jìn)行分析，在營養(yǎng)成分上，分為四個(gè)板塊碳水化合物、脂肪、蛋白質(zhì)和維生素；在時(shí)間維度上，有近三天、近七天和近一個(gè)月三個(gè)評判標(biāo)準(zhǔn)。根據(jù)每種食物中營養(yǎng)成分的占比，粗略的進(jìn)行分析，以柱狀圖的形式展示，方便用戶輕易的看出每種成分占比的差別。用戶可通過中間的“More Details”跳

30、轉(zhuǎn)到下一界面，進(jìn)一步仔細(xì)的了解自己飲食中營養(yǎng)元素的情況。在界面下方以卡片的形式，推薦均衡飲食的對應(yīng)推薦菜品。根據(jù)粗略分析中的營養(yǎng)成分，仔細(xì)分析其中的營養(yǎng)元素，包括能量、脂肪、蛋白質(zhì)、糖分、醇類等等，以折線圖的形式展現(xiàn)，顯示元素含量的變化走向，下方以條狀的形式明確具體數(shù)據(jù)，便于用戶對自己的飲食習(xí)慣和其中營養(yǎng)成分的含量有一些基礎(chǔ)的概念，來代替一些枯燥無味的文字信息。圖16 訂單下的二級界面主頁面下的食物分類界面（圖17），包括主食、蔬菜、甜品、飲品四個(gè)模塊，每個(gè)模塊對應(yīng)不同的商家和店鋪。用戶可根據(jù)店鋪展示的信息內(nèi)容進(jìn)入店鋪頁面，進(jìn)行挑選，懸浮圖標(biāo)購物車可由用戶在界面內(nèi)隨意調(diào)整位置，可直接點(diǎn)擊進(jìn)入購

31、物車界面并進(jìn)行快速結(jié)算。圖17 主頁下的二級界面口味分組下的朋友界面（圖18），通過口味分組與界面顯示的朋友簡要信息介紹（需獲取用戶同意）進(jìn)行匹配，添加朋友，也可自己搜索或設(shè)置新的口味分組，繼而邀請其他朋友?？谖端阉鹘缑婵娠@示最近搜索記錄，分為兩類，“不添加”和“口味”，用戶在不想打字時(shí)，界面支持語音輸入。圖18 口味分組下面的二級界面用戶具體信息界面（圖19、圖20），用戶個(gè)人信息共有五個(gè)層級，其中每個(gè)層級又有3-6個(gè)不同分支，用戶可對每個(gè)具體分支的信息內(nèi)容進(jìn)行查看和修改。個(gè)人信息層級包括頭像、名稱、密碼、手機(jī)號以及其他綁定賬號，頁面下方可退出當(dāng)前賬號。評級即是對餐廳以及食物的評價(jià)。喜歡層級

32、可收藏喜歡的食物或店鋪，方便下一次進(jìn)行訂餐操作。地址頁面會(huì)智能收集使用過的地址信息并顯示，也可進(jìn)行語音輸入操作。圖19 個(gè)人信息分組下的二級界面1圖20 個(gè)人信息分組下的二級界面24.3.5“O&O”其他頁面Loading界面：引導(dǎo)頁采用強(qiáng)視覺的美食圖片進(jìn)行形式展示，歡迎并引導(dǎo)用戶進(jìn)入。注冊界面：用戶通過輸入名字、郵箱、密碼以及確認(rèn)密碼四個(gè)步驟進(jìn)行簡單的注冊。登錄界面：用戶通過輸入郵箱及密碼登陸賬號，也可通過其他社交方式微信或QQ對賬號進(jìn)行綁定并登陸。忘記密碼：用戶通過輸入郵箱，以郵件的方式重新設(shè)置密碼。圖21 其他界面尋找朋友（圖21-左）：默認(rèn)推薦活躍度較高的朋友代表，用戶可通過綁定微信或

33、QQ賬號的方式，同步通訊錄好友。朋友主頁（圖21-中）：在用戶允許公開個(gè)人口味等信息的情況下，對用戶口味進(jìn)行展示。店鋪分類（圖21-右）：部分店鋪會(huì)按食材原料進(jìn)行分類，方便用戶選擇。圖22 其他界面店鋪主頁（圖22-左）：按照分類，對菜品進(jìn)行簡單的展示。菜品展示（圖22-中）：通過店家對一種菜品圖片、名字、選用食材、價(jià)格、評價(jià)等信息展示，方便用戶了解菜品并進(jìn)行選擇。訂單結(jié)算（圖22-右）：展示用戶在某家店鋪的所有選擇商品，對地址、截個(gè)數(shù)量等信息的再確認(rèn)。搜索界面：展示用戶的歷史搜索關(guān)鍵詞，且按食物種類與店鋪名稱劃分為兩列。也支持用戶語音輸入。消息界面：分為系統(tǒng)通知、紅包提醒、店家消息和騎手消息

34、四個(gè)板塊。第5章 心得與總結(jié)在整個(gè)APP界面信息圖形的研究與設(shè)計(jì)過程中，通過對信息圖形的了解，結(jié)合對市面上現(xiàn)有美食類APP的分析，使用不同的信息圖形來體現(xiàn)對應(yīng)的文字，將文字圖形化，大大降低了理解的難度，從而方便用戶操作與使用。運(yùn)用圖標(biāo)的形式體現(xiàn)對用戶訂單內(nèi)營養(yǎng)成分的分析，并推出對應(yīng)的均衡飲食推薦，希望能夠帶給用戶更優(yōu)越的使用體驗(yàn)。在互聯(lián)網(wǎng)時(shí)代的迅猛發(fā)展下，手機(jī)逐漸滲透進(jìn)人們的生活，成了必不可少的生活必備品。面對快餐式的文化和碎片化的時(shí)間，APP的界面設(shè)計(jì)的易用性逐漸被凸出顯現(xiàn)。在如此復(fù)雜、疲憊的環(huán)境下，效率是越來越多人在乎的問題。對信息圖形進(jìn)行怎樣的設(shè)計(jì)才能幫助用戶減少對APP操作的學(xué)習(xí)成本？

35、如何將APP需要傳達(dá)的信息、數(shù)據(jù)直觀簡約的呈現(xiàn)在使用者面前并引起用戶的思考和重視？這些問題都是當(dāng)下APP設(shè)計(jì)師們需要思考的問題。當(dāng)然，在對APP界面信息圖形的研究和APP界面信息圖形的設(shè)計(jì)過程中，也發(fā)現(xiàn)了一些需要處理解決的問題。第一：若用戶不愿公開他的口味，該如何進(jìn)行推薦以及尋找相似口味的朋友。第二：若用戶飲食足夠均衡，但并未全部在訂單的記錄內(nèi)，數(shù)據(jù)分析就不夠準(zhǔn)確，不能涵蓋用戶的全部飲食情況。根據(jù)對所發(fā)現(xiàn)的問題不斷的進(jìn)行分析與探討，得出結(jié)論，若想設(shè)計(jì)出一款有一定用戶口味的APP，還需要大量的前期鋪墊工作，尋找一些樂于分享的用戶內(nèi)部測評，在積累一定的用戶飲食數(shù)據(jù)的基礎(chǔ)上，進(jìn)行不斷迭代升級，希望在

36、之后的時(shí)間里，可以對APP界面進(jìn)行不斷的完善。參考文獻(xiàn)：1 美維克多帕帕奈克.周博譯.高等教育系統(tǒng)為真實(shí)世界設(shè)計(jì)M北京：中信出版社，2012：43-692 賈森蘭蔻.信息圖表的力量M.北京：人民郵電出版社，2016：54-803 馬庫斯斯洛普，吳瓊.論信息圖形J.裝飾，2007，No.172(08)：37-45.4 姜婷婷.淺談信息圖形設(shè)計(jì)在手機(jī)界面中的應(yīng)用J.工業(yè)設(shè)計(jì)，2016（08）：:127-1285 方婧.論信息圖形在手機(jī)界面中的應(yīng)用J.藝術(shù)科技，2016（4）：946 蔡順興.純化、達(dá)意、秩序、愉悅J.藝術(shù)科技，2019（4）：338-3397 付倩倩.信息圖形設(shè)計(jì)在網(wǎng)頁界面中的應(yīng)用

37、D.山東工藝美術(shù)學(xué)院，2012：7-118 于書芹.野外生存網(wǎng)頁界面設(shè)計(jì)中信息圖形化的應(yīng)用研究D.西南交通大學(xué)，2017：13-159 郝儉儉.基于營養(yǎng)學(xué)膳食平衡的信息圖形化設(shè)計(jì)研究D.西南交通大學(xué)，2019：22-2510 謝丹.信息圖形設(shè)計(jì)在健身類APP界面中的應(yīng)用以“N.T”為例D.湖南美術(shù)學(xué)院，2018：5-911 朱冬玥.交互式信息圖形設(shè)計(jì)應(yīng)用研究D.青島理工大學(xué)，2019：22-3312 徐怡雯.美食類APP用戶社交體驗(yàn)設(shè)計(jì)研究D.江南大學(xué)，2017：53-62The Application of Information Graphic Design in Interface of

38、 Food APP WANG Ya-NingAbstract：With the constant development of the Internet, constantly changing peoples lifestyle, information image design by more people greeted us into the information age, the constant popularity of mobile phones and other electronic equipment, the progress and development of The Times, more and more people access to information media, information graphics filled with our life, subway station sign the packing bag o