項(xiàng)目3 移動(dòng)端“美食小吃”App交互UI設(shè)計(jì)-備課筆記

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