項目3 移動端“美食小吃”App交互UI設(shè)計-備課筆記

項目三：移動端“美食小吃”App交互UI設(shè)計一、課程說明與要求1.課程性質(zhì)與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時成績和期末成績各占總成績的50%，平時成績主要通過平時作業(yè)（作品）的形式評定，還要兼顧考核出勤、學(xué)習(xí)態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時命題創(chuàng)作的形式，全面考核課程知識的綜合運用。2.課程說明《數(shù)字媒體交互設(shè)計》共分為網(wǎng)頁交互設(shè)計、App交互設(shè)計、VR交互設(shè)計三方面的內(nèi)容。本課程是以理論為基礎(chǔ)的實踐導(dǎo)向型課程,所傳達的課程內(nèi)容圍繞“以人為本”的設(shè)計原則，重點講述人機交互的基本概念和重要意義以及發(fā)展歷程、軟件系統(tǒng)的人機交互設(shè)計原則和方法、網(wǎng)絡(luò)系統(tǒng)的人機交互設(shè)計原則和方法、移動端應(yīng)用人機交互技術(shù)、人機交互開發(fā)工具與環(huán)境等理論內(nèi)容；簡要介紹人機交互的認知心理學(xué)、計算機硬件的人機交互設(shè)計、人機交互技術(shù)的發(fā)展趨勢,并培養(yǎng)學(xué)生利用交互設(shè)計工具制作做實際交互作品原型的能力。3.組織簽到及建立班級課程微信群組織學(xué)生使用學(xué)習(xí)通進行簽到。然后使用微信面對面建群，說明本群作為課程的相關(guān)通知發(fā)布、知識答疑和作品交流使用，同時歡迎同學(xué)們及時在群里反饋對課程教學(xué)方面的意見和學(xué)習(xí)感想，提醒老師及時調(diào)整適合同學(xué)們的授課方式。4.工具材料準(zhǔn)備說明本課的實踐技能訓(xùn)練階段，需要同學(xué)在手機或者是計算機中下載好行業(yè)需求分析文檔，教師將所需準(zhǔn)備資料發(fā)到微信群中。資料類型與名稱備注行業(yè)需求分析報告文檔每個小組一份二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，是在藝術(shù)專業(yè)中設(shè)立的一門邏輯思維較強的設(shè)計類課程，需要學(xué)生在學(xué)習(xí)過程中，對美術(shù)設(shè)計與邏輯設(shè)計內(nèi)容進行一定程度上的融通。作為一門實踐性較強的課程，針對學(xué)生對當(dāng)前市場應(yīng)用需求普遍認知不強，或有較多偏差的情況，強調(diào)進行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對未來的市場應(yīng)用有信心，對所選擇的專業(yè)感興趣，獲取知識的主動性較強。2.課程導(dǎo)入本項目主要介紹App交互UI設(shè)計的視覺層次結(jié)構(gòu)的相關(guān)理論知識，包括視覺引導(dǎo)和反饋、App界面設(shè)計的風(fēng)格、版式設(shè)計和App平臺的界面設(shè)計規(guī)范，通過這些理論的組合使用，提升讀者在視覺層次結(jié)構(gòu)設(shè)計這方面的認知。三、理論知識講解（一）移動端“美食小吃”App交互UI設(shè)計背景分析在互聯(lián)網(wǎng)浪潮的沖擊下，餐飲行業(yè)的互聯(lián)網(wǎng)化飛速發(fā)展。從最初的點評模式開始，團購、外賣等諸多形式不斷涌現(xiàn)，當(dāng)前，餐飲行業(yè)已成為本地生活服務(wù)行業(yè)中互聯(lián)網(wǎng)化程度最高的行業(yè)之一，訂外賣、在線預(yù)訂、團購都已經(jīng)成為消費者就餐的常規(guī)選擇。外賣App已成為一種常規(guī)訂餐方式。借助外賣，餐廳可擺脫位置、營業(yè)面積的制約，擴大服務(wù)范圍，提高銷量。早期的訂餐服務(wù)平臺有百度外賣、餓了么、美團外賣，從2017年餓了么收購百度外賣后，餓了么和美團占據(jù)主要市場，形成雙雄爭霸的格局。餓了么定位從學(xué)生群體著手，瞄準(zhǔn)外賣市場，專注成為餐飲服務(wù)界巨頭。而美團外賣是美團集團T型戰(zhàn)略的重要一環(huán)，一直在積極搭建O2O平臺，擴大O2O平臺的可能性，因此生鮮水果藥品配送服務(wù)應(yīng)運而生。面對如此規(guī)模的市場環(huán)境，利用網(wǎng)絡(luò)宣傳美食是現(xiàn)今最有效的方法。設(shè)計一款地方或特色美食的App不僅可以長期宣傳美食文化，還可以提高商戶或企業(yè)的知名度，中國歷來有“民以食為天”的傳統(tǒng)，餐飲業(yè)一直在社會發(fā)展與人民生活中發(fā)揮著重要作用，經(jīng)營檔次和企業(yè)管理水平不斷提高，經(jīng)營業(yè)態(tài)日趨豐富，投資主題和消費需求多元化的發(fā)展步伐加快，設(shè)計一款自己的App或虛擬店面，需要摒棄傳統(tǒng)餐飲業(yè)低層次的服務(wù)方式，走特色美食文化之路，提高餐飲業(yè)的文化品位。同時要突出App的深層次服務(wù)，如企業(yè)精神、特色菜肴、休閑、文化娛樂、在同行業(yè)中的特色優(yōu)勢、投訴處理、意見反饋甚至互動交流，培養(yǎng)各階層顧客對品牌的忠誠度。（二）移動端“美食小吃”App交互UI設(shè)計需求分析在新的消費時代，外賣的出現(xiàn)完全顛覆了餐飲業(yè)，訂購?fù)赓u已經(jīng)成為人們?nèi)粘Ｉ钪谐Ｒ姷氖虑?。傳統(tǒng)商業(yè)街總是通過多種方式引導(dǎo)傳統(tǒng)店鋪。其中，加入外賣平臺是多數(shù)餐飲企業(yè)的選擇。餐飲店鋪越來越離不開外賣App，消費者也是離不開外賣App，外賣App已經(jīng)成為顧客飲食生活中不可缺少的重要部分。根據(jù)產(chǎn)品的定位和目標(biāo)用戶以及用戶地域的分布，開發(fā)一款商家自己的外賣App軟件，可以更精準(zhǔn)的把握用戶，并有針對性的提供些定制化服務(wù)，同時所有用戶的數(shù)據(jù)都在App后臺的數(shù)據(jù)庫里，不需要與其他商家相比，不僅能大大提高商家的利潤，還能給用戶降低價格，提高用戶的訂單率、回收率。還可以舉辦各種營銷活動，建立會員積分系統(tǒng)，促進銷售。從而提升銷售額，并形成一定的知名度。（三）視覺層次結(jié)構(gòu)與視覺引導(dǎo)1.視覺層次結(jié)構(gòu)的構(gòu)建（1）尺寸大小和比例對一些重要的操作內(nèi)容進行放大顯示，通過放大主體內(nèi)容或者標(biāo)題來突出視覺層次關(guān)系，來突出主要內(nèi)容。（2）顏色更鮮艷的顏色更吸引人們的注意力；每種色彩對應(yīng)的認知是不一樣的，如圖3-2所示，UI界面設(shè)計中，藍色文字代表可點擊，紅色代表是出錯或警示，輕量色彩就沒有那么強吸引力，比如圖中的灰色或淡黃色等。（3）字體使用粗細來創(chuàng)建視覺層次結(jié)構(gòu)，這樣信息結(jié)構(gòu)更加清晰，在設(shè)計時候運用加粗加大字體形成強烈的視覺層次，使更重要的文字信息突出展示出來，如圖3-3所示。（4）布局通過使用參考線和網(wǎng)格來布局設(shè)計，可以使每組元素都可以緊密關(guān)聯(lián)。在App頁面中，內(nèi)容都會顯示在中間的內(nèi)容區(qū)域里，那么內(nèi)容區(qū)域與屏幕的左右兩端所留出的空間，稱為外邊距，如圖3-4所示。外邊距數(shù)值越大，頁面顯得越寬松，數(shù)值越小越顯得比較滿，因此需要我們根據(jù)自己實際的情況去確定具體數(shù)值。（5）分組、對齊分組和對齊在一定程度上可以引導(dǎo)視覺流，可以運用格式塔原理中的相似、接近、連續(xù)、封閉性原理進行布局。2.視覺引導(dǎo)和反饋在快節(jié)奏的生活方式下，用戶通常是以掃描的方式快速獲取頁面的信息，那么我們需要知道，如何讓我們的App更加高效、快速的使用戶能夠輕松的瀏覽到所需要的信息，移動端設(shè)備大多數(shù)是碎片時間，所以，要讓用戶更高效更便捷的掃描要瀏覽的內(nèi)容，這就需要進行視覺引導(dǎo)和反饋設(shè)計。（四）App界面元素構(gòu)成設(shè)計AppUI交互界面設(shè)計其中的一個要點是要選擇正確的界面元素。界面元素既要能幫助用戶完成操作反饋的任務(wù)，還要容易被理解和使用；某個功能要在某個或某些界面上完成，這些在交互設(shè)計中就已經(jīng)決定了的；而這些功能在界面上如何被用戶認知到，就屬于UI交互設(shè)計的范疇。設(shè)計復(fù)雜系統(tǒng)的界面首先要面臨的一個挑戰(zhàn)，就是弄清楚用戶不需要知道哪些內(nèi)容，并且減少它們的可發(fā)現(xiàn)性。App界面元素設(shè)計風(fēng)格網(wǎng)頁App界面設(shè)計風(fēng)格是指App通過主要的幾種顏色搭配、頁面布局和品牌形象等給用戶呈現(xiàn)出的整體視覺感受。一個App項目開始啟動設(shè)計時，首先要做的應(yīng)該就是根據(jù)主要頁面指定整個App的設(shè)計風(fēng)格，其他頁面按照統(tǒng)一的設(shè)計風(fēng)格進行細化以及美化設(shè)計。統(tǒng)一設(shè)計風(fēng)格能給用戶呈現(xiàn)整體一致的視覺體驗，有利于傳達產(chǎn)品整體的品牌形象，也便于設(shè)計團隊制定設(shè)計規(guī)范，從而減少設(shè)計風(fēng)格不一致帶來的溝通成本。（1）App設(shè)計風(fēng)格從視覺效果上至少給用戶傳達了兩個信息：App的整體基調(diào)與App的目標(biāo)人群（2）現(xiàn)行主流的設(shè)計風(fēng)格是扁平化設(shè)計，它的優(yōu)點是：界面美觀、簡約大方、條理清晰；設(shè)計元素上強調(diào)抽象、極簡、符號化，去除冗余的裝飾效果，突顯App的文字圖片等信息內(nèi)容；完美兼容PC網(wǎng)站、安卓、iOS等不同系統(tǒng)的平臺和不同屏幕分辨率的設(shè)備，適應(yīng)性強。（3）在設(shè)計風(fēng)格表現(xiàn)上，顏色占據(jù)了大部分的視覺體驗，要做好設(shè)計風(fēng)格，首先要做好界面的顏色搭配和分布。設(shè)計風(fēng)格的配色除了要注意男女性的喜好差別之外，還應(yīng)該重視通過冷暖色彩加明暗亮度搭配傳遞給用戶的印象和心理感受。移動端平臺的界面設(shè)計規(guī)范（1）Android平臺Android的設(shè)計規(guī)范不同于iOS，Android是一個開源的系統(tǒng)，國內(nèi)外有很多的手機廠商，這就導(dǎo)致了有非常多的Android機型，比如國內(nèi)的華為、小米、OPPO、vivo、魅族等。1.基礎(chǔ)概念DPI屏幕密度（DotsPerInch）：每英寸點數(shù)，表示屏幕密度，它是測量空間點密度的單位，最初應(yīng)用于打印技術(shù)中，表示每英寸能打印上的墨滴數(shù)量。后來DPI的概念也被應(yīng)用到了計算機屏幕上，計算機屏幕一般采用PPI（PixelsPerInch）來表示一英寸屏幕上顯示的像素點的數(shù)量。屏幕密度計算公式為：那么，屏幕分辨率為1080*1920設(shè)備的屏幕密度：我們根據(jù)目前市場占比大的主流設(shè)備尺寸來看，建議使用1080x1920px來做安卓設(shè)計稿尺寸：（2）iOS平臺iOS平臺在界面設(shè)計中制定了常用的一些尺寸規(guī)范和方法，如界面布局尺寸、間距、文字、圖標(biāo)、適配等，設(shè)計師在設(shè)計時要嚴格遵守，并融會貫通。在視網(wǎng)膜屏出現(xiàn)之前，蘋果規(guī)定1px=1pt，也就是說pt和像素點是一一對應(yīng)的。但隨著iPhone4型號出現(xiàn)以后，高分屏出現(xiàn)了，也就是視網(wǎng)膜屏，這個時候1pt對應(yīng)2px。所以用固定長度pt作為開發(fā)單位，優(yōu)勢是可以統(tǒng)一圖形在同一種類不同型號設(shè)備上圖形的大小，而如果用像素作為單位的話，就會出現(xiàn)混亂，因為在不同像素密度的屏幕里面，像素本身大小是不一樣的。App交互UI設(shè)計流程分析版式設(shè)計版式設(shè)計也叫版面編輯，也就是在有限的版面空間里，將版面的構(gòu)成要素，如文字、圖片、控件等元素根據(jù)特定的內(nèi)容進行組合排列，設(shè)計時要考慮內(nèi)容布局、比例、分組、對齊等形式。項目實施——移動端“美食小吃”App交互UI設(shè)計設(shè)計“美食小吃”App界面UI在“美食小吃”App進行設(shè)計之前，我們需要思考，界面如何設(shè)計才能留住用戶，首先方便快捷的操作界面是重要基礎(chǔ)，能夠讓用戶快速了解到自己需要的信息十分重要，其次精致美觀的界面設(shè)計必不可少，要最大程度的呈現(xiàn)食物的美味，這就需要我們在分析的角度上遵循一切從用戶角度出發(fā)。確定了設(shè)計風(fēng)格及設(shè)計規(guī)范后，設(shè)計師根據(jù)風(fēng)格進行細化的設(shè)計，根據(jù)外賣App的特點，我們設(shè)定美食小吃AppUI設(shè)計由引導(dǎo)頁、登錄頁、首頁、會員、訂單、我的頁面等內(nèi)容構(gòu)成。引導(dǎo)頁：進行設(shè)計時主要突出美食主題，頁數(shù)為1-2頁即可。登錄頁：摒棄了郵箱注冊，設(shè)計采用主流的手機號登錄及第三方賬號登錄，這樣可以簡化登錄流程。首頁：設(shè)計了幾個標(biāo)準(zhǔn)信息區(qū)域，包括公共導(dǎo)航區(qū)（狀態(tài)欄、導(dǎo)航欄）、標(biāo)簽欄、內(nèi)容區(qū)域、主頁指示器，同時根據(jù)平臺設(shè)計規(guī)范設(shè)計了各欄目的高度。會員頁：主要展示優(yōu)惠、跨店紅包領(lǐng)取、開通會員等信息。訂單頁：展示配送、評價、取消訂單等信息，如圖3-70所示。我的頁面：展示個人信息設(shè)置、常用功能分類、購物車、評價等信息，如圖3-71所示。界面適配在瀏覽App的時候，我們會遇到過在部分機型中圖片變形、頁面不協(xié)調(diào)、文案被裁剪的問題。這就需要我們頁面進行適配，適配是為了使頁面在不同手機設(shè)備上,相對保持統(tǒng)一的展示效果。在頁面適配前，我們先了解什么是@2x、@3x，如圖3-76所示。實現(xiàn)美食App界面素材切片輸出當(dāng)界面設(shè)計定稿之后，設(shè)計師需要對圖標(biāo)進行切片提供給原型交互設(shè)計師，把設(shè)計稿中有用的部分剪切下來作為網(wǎng)頁或移動端制作時的素材，這個過程就是切圖。通常我們只需要對圖標(biāo)進行切圖就可以，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實現(xiàn)這種效果，如圖3-79和圖3-80示。使用Pxcook標(biāo)注美食App界面“創(chuàng)建”項目，命名為如圖3-95所示，平臺選擇“iOS”，點擊“創(chuàng)建項目”后，就可以將我們需要標(biāo)注的psd設(shè)計稿導(dǎo)入到軟件中，如圖3-96所示。導(dǎo)入設(shè)計稿后，進入到操作界面，如圖3-97所示，軟件的標(biāo)注分為“設(shè)計”和“開發(fā)”模式（5）美食App動態(tài)加載畫面優(yōu)化App交互設(shè)計中，很多設(shè)計師都會采用動態(tài)效果來吸引用戶的注意，相對于靜態(tài)的頁面，動態(tài)效果更能生動的傳達出想要傳達的思想，同時也更能感染用戶的情緒，吸引眼球。但是動態(tài)效果相對于靜態(tài)來說，在設(shè)計中也需要注意很多問題，因為一不小心如果動態(tài)設(shè)計過度，不僅會影響頁面加載的進程，更會影響用戶的體驗。那么一般App動態(tài)元素設(shè)計可以從以下幾種方式進行優(yōu)化：①減小圖像大小打開PS軟件，選擇菜單欄的“圖像>圖像大小”，快捷鍵是Ctrl+Alt+I，即可打開如下圖所示的修改面板，輸入我們需要的大小尺寸數(shù)即可。②減少幀數(shù)刪掉重復(fù)幀只留關(guān)鍵幀，通過增加關(guān)鍵幀的延遲時間，保持動畫的節(jié)奏，因為每一幀都占用著gif動圖的大小，所以幀越少自然體積就越小。③顏色數(shù)打開“文件”>“導(dǎo)出”>“存儲為Web所用格式…”面板，如圖3-113所示，點擊下拉菜單，有多個位數(shù)選擇，對于顏色不是太鮮艷的gif動圖來說，可以先嘗試選擇64種顏色來查看效果，這將有效減小大??；除了預(yù)設(shè)的幾個數(shù)值外，還可以手動直接輸入自己想要的顏色數(shù)，如圖3-114所示。④色彩損耗值通過調(diào)整的色彩損耗量來縮小GIF文件的大小，如圖3-115所示，調(diào)整損耗值后，該GIF文件大小的前后對比。⑤保存預(yù)設(shè)和優(yōu)化文件大小點擊“存儲為Web