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

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