第三章移動端“美食小吃”App交互UI設計

移動端“美食小吃”App交互UI設計知識要點01“美食小吃”App交互UI設計項目背景分析02App交互UI設計項目需求分析03App頁面視覺層次結構與視覺引導04App界面元素構成設計05App界面布局設計風格06移動端平臺界面設計規(guī)范07App交互UI設計流程分析08項目實施-移動端“美食小吃”App交互UI設計“美食小吃”App交互UI設計項目背景分析“美食小吃”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設計項目需求分析App交互UI設計項目需求分析在新的消費時代，外賣的出現(xiàn)完全顛覆了餐飲業(yè)，訂購外賣已經(jīng)成為人們?nèi)粘Ｉ钪谐Ｒ姷氖虑椤鹘y(tǒng)商業(yè)街總是通過多種方式引導傳統(tǒng)店鋪。其中，加入外賣平臺是多數(shù)餐飲企業(yè)的選擇。餐飲店鋪越來越離不開外賣App，消費者也是離不開外賣App，外賣App已經(jīng)成為顧客飲食生活中不可缺少的重要部分。目前市場對外賣App的需求主要體現(xiàn)在以下幾個方面：客戶端：對外賣App用戶最重要的功能是自動找到當前位置，然后展示周圍的商業(yè)街食品，根據(jù)銷售、距離、類別、價格等進行選擇，在線完成支付后，可以查看配送信息來評估產(chǎn)品。后臺管理端：外賣App開發(fā)的后臺管理點。主要功能模塊包括設置營銷入駐系統(tǒng)、營銷支持、基數(shù)部署中心在線、支持各種營銷活動、吸引營銷、商城結算、數(shù)據(jù)統(tǒng)計、信息推送等。商家方面：主要面向入住外賣App的普通商家。核心功能包括店鋪和產(chǎn)品設置、營銷活動設置、結算結算、在線客服、電話短信、店鋪公告、訂單管理、評價管理等。配送方：主要面向配送配送人員，包括實時訂單、轉(zhuǎn)賬幫助、異常訂單、信息通知、歷史訂單、配送收入、地圖定位、導航等。那么，根據(jù)產(chǎn)品的定位和目標用戶以及用戶地域的分布，開發(fā)一款商家自己的外賣App軟件，可以更精準的把握用戶，并有針對性的提供些定制化服務，同時所有用戶的數(shù)據(jù)都在App后臺的數(shù)據(jù)庫里，不需要與其他商家相比，不僅能大大提高商家的利潤，還能給用戶降低價格，提高用戶的訂單率、回收率。還可以舉辦各種營銷活動，建立會員積分系統(tǒng)，促進銷售。從而提升銷售額，并形成一定的知名度。App頁面視覺層次結構與視覺引導App頁面視覺層次結構的構建

視覺是內(nèi)容的構成布局，以便有效地傳達信息和含義。視覺層次結構以及重要性尺寸、顏色、字重、布局依據(jù)重要性順序排列影響人眼感知正在顯示的信息的順序。

02視覺層次結構構建的常用元素尺寸顏色字體布局

App頁面視覺層次結構的構建放大主體內(nèi)容或者標題來突出視覺層次關系，突出主要內(nèi)容

03視覺層次結構構建的常用元素尺寸大小字體布局

App頁面視覺層次結構的構建顏色

04視覺層次結構構建的常用元素尺寸大小顏色布局

App頁面視覺層次結構的構建字體

05視覺層次結構構建的常用元素尺寸大小顏色字體

App頁面視覺層次結構的構建布局

06分組和對齊常用的方式有：色塊劃分、宮格、線框、列表

App頁面視覺層次結構的構建App界面設計的視覺引導視覺引導

用戶通常是以掃描的方式快速獲取頁面的信息。

需要我們更精確的抓住用戶的視線,讓用戶更高效更便捷的掃描要瀏覽的內(nèi)容。

把握文字和組件的排版布局，來引導用戶的視線，讓App看起來更加舒適，用戶使用起來更加方便！App界面設計的視覺引導視覺引導-圖標圖標設計引導性強、與內(nèi)容貼合；讓內(nèi)容顯得謹慎、專業(yè)；App界面設計的視覺引導視覺引導-圖標遵循圖標尺寸一致性的原則，可以盡量避免產(chǎn)品從視覺上看起來不統(tǒng)一。學習實訓出行主要問題在于元素尺寸差異比較大，視覺上顯得不統(tǒng)一、專業(yè)度差些App界面設計的視覺引導視覺引導-圖標對比市場成熟的App產(chǎn)品，對圖標進行簡單的分析；分析圖標元素的設計方法、以及遵循的規(guī)則；圖標在顏色的構成、元素的形狀、豐富的程度等細節(jié)方面遵循一致性的原則，圖標可以顯得更加專業(yè)App界面設計的視覺反饋設計

確定恰當?shù)哪Ｊ皆O計清晰的內(nèi)容反饋響應及時告知用戶選擇模態(tài)反饋還是非模態(tài)反饋。信息內(nèi)容符合大眾的認知原理要選擇恰當?shù)臅r機出現(xiàn)或者消失。App界面設計的視覺反饋設計模態(tài)反饋：強調(diào)反饋信息的重要性非模態(tài)反饋：反饋信息干擾度最小化的傳達給用戶一、確定合適的模式非模態(tài)（按鈕灰度顯示）模態(tài)反饋（彈窗提示）App界面設計的視覺反饋設計反饋設計要遵循人的認知心理過程；反饋的內(nèi)容要符合用戶的認知結果。二、設計清晰的內(nèi)容App界面設計的視覺反饋設計反饋信息的及時性；不能脫離用戶的操作場景；三、反饋響應及時告知用戶App界面元素構成設計App界面元素構成設計AppUI交互界面設計其中的一個要點是要選擇正確的界面元素。界面元素既要能幫助用戶完成操作反饋的任務，還要容易被理解和使用；某個功能要在某個或某些界面上完成，這些在交互設計中就已經(jīng)決定了的；而這些功能在界面上如何被用戶認知到，就屬于UI交互設計的范疇。設計復雜系統(tǒng)的界面首先要面臨的一個挑戰(zhàn)，就是弄清楚用戶不需要知道哪些內(nèi)容，并且減少它們的可發(fā)現(xiàn)性。我們可以采用一些技巧，使用戶完成目標的過程變得容易些。比如：當我們把界面第一次呈現(xiàn)給用戶的時候，仔細考慮每一個選項的默認值，如圖；App界面元素構成設計AppUI交互界面設計其中的一個要點是要選擇正確的界面元素。界面元素既要能幫助用戶完成操作反饋的任務，還要容易被理解和使用；某個功能要在某個或某些界面上完成，這些在交互設計中就已經(jīng)決定了的；而這些功能在界面上如何被用戶認知到，就屬于UI交互設計的范疇。設計復雜系統(tǒng)的界面首先要面臨的一個挑戰(zhàn)，就是弄清楚用戶不需要知道哪些內(nèi)容，并且減少它們的可發(fā)現(xiàn)性。我們可以采用一些技巧，使用戶完成目標的過程變得容易些。比如：當我們把界面第一次呈現(xiàn)給用戶的時候，仔細考慮每一個選項的默認值，如圖；一個設計良好的界面是要組織好用戶最常采用的行為；同時讓這些界面元素用最容易的方式獲取和使用。App交互界面的構成概念App的頁面構成包括啟動頁、引導頁、登錄注冊、首頁等頁面。1.啟動頁啟動頁是開啟App時的初始頁面，一般由logo、slogan、版本號、產(chǎn)品名、公司名、Copyright等信息簡單組合而成，出現(xiàn)時長一般在3s內(nèi)，如圖App交互界面的構成概念2.引導頁引導頁一般作為產(chǎn)品的功能性引導，使用戶能快速了解產(chǎn)品特性；頁面數(shù)通常為1-5個，3個最為常見；內(nèi)容由主題、圖/文簡介、頁面指示器、跳過按鈕等構成，如圖3-18和圖3-19所示。設計時需要注意的是文字信息不宜過多，主題內(nèi)容要突出，圖片要符合品牌調(diào)性，同時頁數(shù)也不宜太多。App交互界面的構成概念3.登錄注冊一般有三種方式，通常會幾種方式組合使用。第三方賬號登錄，用戶不需要輸入信息直接第三方賬號登錄即可，流程簡化。手機號注冊，一般會結合密碼或是動態(tài)驗證碼。郵箱注冊，這種登錄方式較早，設計之初是基于網(wǎng)頁版注冊時使用的。4.App交互界面內(nèi)容的構成，通常分為幾個標準的信息區(qū)域：公共導航區(qū)：包括導航欄、狀態(tài)欄；它是對軟件操作進行宏觀操控的區(qū)域狀態(tài)欄：也叫狀態(tài)指示器，在iOS7以后，已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導航欄組合在了一起。通常導航欄高度為：88～132px，分別對應iPhoneSE～iPhoneX的尺寸，iOS嚴格規(guī)定了標準信息區(qū)域的高度，我們需要嚴格遵守，如圖App交互界面的構成概念主菜單欄，也叫標簽欄，承載的內(nèi)容包括軟件LOGO、軟件版本、以及相關圖文信息；或者是信息框架。底部標簽欄具有很強的包容性，可以形成最基本的信息框架，然后用其他的導航模式來承載具體的功能和內(nèi)容。展現(xiàn)形式有文字+圖標、純圖標形式，常用的是文字+圖標，可以減少用戶記憶負擔，如圖功能操作區(qū)，也叫內(nèi)容區(qū)域，它是軟件的核心部分，也是版面上面積最寬的部分，如圖所示。同時需要注意的是：iPhoneX及之后版本底部要預留68px的主頁指示器的位置01、顯著性元素顯著性要素主要分為感覺和認知兩大類。App界面元素設計的構成方法感覺類的主要體現(xiàn)顏色、位置、大小等物理特征;認知類反映出物體與人的關系。注意：元素不要過多，會造成視覺的復雜感。02視覺和心理需求在瀏覽頁面時，我們會根據(jù)自己的興趣對視覺刺激強的事物首先分配注意力；在app界面設計時要考慮視覺的需求和心理的需求，隨著界面的即時性改變設計。App界面元素設計的構成方法03用戶的定勢和期望定勢指的是某種活動前的心理預備狀態(tài);期望是指對某個事物發(fā)展的預設。在交互設計中，用戶更期待高效和降低認知負荷，扁平化風格應勢而起。App界面元素設計的構成方法App界面布局風格設計App界面設計風格的重要性統(tǒng)一設計風格能給用戶呈現(xiàn)整體一致的視覺體驗；APPUI界面設計布局風格App界面設計風格通過顏色搭配、頁面布局和品牌形象等，給用戶呈現(xiàn)出的整體視覺感受有利于傳達產(chǎn)品整體的品牌形象；方便設計團隊制定設計規(guī)范；減少設計風格不一致帶來的溝通成本。App界面設計風格傳達的信息整體基調(diào)目標人群APPUI界面設計布局風格主流的設計風格扁平化設計APPUI界面設計布局風格界面美觀、簡約大方、條理清晰；設計元素上強調(diào)抽象、極簡、符號化，去除冗余的裝飾效果；兼容pc網(wǎng)站、安卓、ios等不同系統(tǒng)的平臺，適應性強。主流的設計風格APPUI界面設計布局風格參考來自面向企業(yè)分析服務公司（KISSmetrics）的調(diào)查報告圖表色調(diào)冷暖及明暗亮度通過冷暖色彩+明暗亮度搭配傳遞給用戶的印象和心理感受APPUI界面設計布局風格綠色：天然、健康、好運、穩(wěn)定等紫色：靈性、神秘、智慧、啟迪等移動端平臺界面設計規(guī)范移動端平臺界面設計規(guī)范Android平臺Android的設計規(guī)范不同于iOS，Android是一個開源的系統(tǒng)，國內(nèi)外有很多的手機廠商，這就導致了有非常多的Android機型，比如國內(nèi)的小米、OPPO、vivo、魅族等。1.基礎概念DPI屏幕密度（DotsPerInch）：每英寸點數(shù)，表示屏幕密度，它是測量空間點密度的單位，最初應用于打印技術中，表示每英寸能打印上的墨滴數(shù)量。后來DPI的概念也被應用到了計算機屏幕上，計算機屏幕一般采用PPI（PixelsPerInch）來表示一英寸屏幕上顯示的像素點的數(shù)量。屏幕密度計算公式為，如圖那么，屏幕分辨率為1080*1920設備的屏幕密度，如圖移動端平臺界面設計規(guī)范Android平臺2.屏幕密度劃分安卓硬件設備尺寸多且不統(tǒng)一，這就給頁面適配帶來了很大的工作量，為了解決這個問題，安卓手機屏幕有自己初始的固定密度，根據(jù)這些屏幕不同的密度會自己進行適配，這就涉及到設計稿的尺寸和切圖的內(nèi)容，這點需要我們掌握，為后面的設計的工作做基礎，以下是Android的密度劃分以及代表的分辨率，如圖移動端平臺界面設計規(guī)范Android平臺3.界面設計尺寸及欄高度（1）界面設計尺寸我們根據(jù)目前市場占比大的主流設備尺寸來看，建議使用1080x1920px來做安卓設計稿尺寸，如圖以1080x1920px作為設計稿標準尺寸的理由：從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配。大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。用主流尺寸來做設計稿尺寸，極大的提高了視覺還原和其他機型適配。（2）界面設計控件尺寸我們以主流設備的尺寸來看，界面中各控件的尺寸設計，如圖移動端平臺界面設計規(guī)范Android平臺4.圖標規(guī)范對于分辨率眾多的Android設備，為了方便界面適配，Google按照dpi大小將它們分成了4種模式（MDPI、HDPI、XHDPI和XXHDPI），如圖5.字體規(guī)范在Android平臺中使用的英文字體為Roboto字體，中文字體為思源黑體；在Android5.0之后，使用的是思源黑體，字體文件有兩個名稱，即“SourceHanSans”和“NotoSansCJK”。移動端平臺界面設計規(guī)范iOS平臺iOS平臺在界面設計中制定了常用的一些尺寸規(guī)范和方法，如界面布局尺寸、間距、文字、圖標、適配等，設計師在設計時要嚴格遵守，并融會貫通。1.基礎概念物理像素：屏幕的實際分辨率，例如iPhone6/7/8的750*1334px、iPhone6/7/8plus的1242*2208px。邏輯像素：物理分辨率是硬件所支持的，邏輯分辨率是軟件可以達到的像素。例如iPhone6/7/8的375*667pt、iPhone6/7/8plus的414*736pt等，如圖移動端平臺界面設計規(guī)范iOS平臺單位pt：iOS開發(fā)單位，即point，絕對長度，1pt=1/72英寸，pt=px*72/DPI。在視網(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)混亂，因為在不同像素密度的屏幕里面，像素本身大小是不一樣的。如果界面設計師提供的是2倍圖，要先轉(zhuǎn)成邏輯像素，即px/2。然后算出的pt就是邏輯像素下的字號大小。Photoshop默認的DPI（分辨率）就是72，也就是說，通常界面設計師提供的設計圖，如果字體大小單位是px，2倍圖，則iOS中的字號pt=px/2。需要注意的一點是，我們需要確認下界面設計師提供設計圖的DPI，再進行轉(zhuǎn)換，如圖移動端平臺界面設計規(guī)范iOS平臺2.界面設計尺寸及欄高度

iOS應用中的界面布局，包括狀態(tài)欄、標簽欄、導航欄等，它們的高度iOS嚴格規(guī)定了各個欄的高度，需要我們嚴格遵守，如圖3.標準色規(guī)范字體的顏色設置一般很少用純黑色，一般用深灰色和淺灰色、細體和粗體來區(qū)分重要信息和次要信息，從而進行信息層級的劃分。標準色規(guī)范分為：重要、一般、弱。標準色-重要：重要顏色中一般不超過3種，紅色需要小面積使用,用于特別需要強調(diào)和突出的文字、按鈕和圖標；而黑色用于重要級文字信息比如標題、正文等。標準色-一般：都是相近的顏色，而且要比重要顏色弱，普遍用于普通級信息、引導詞比如提示性文案或者次要的文字信息。標準色-較弱：普遍用于背景色和不需要顯眼的邊角信息，如圖移動端平臺界面設計規(guī)范iOS平臺4.文字規(guī)范App內(nèi)的文字大小設置與所在頁面、所在層級、所表達內(nèi)容屬性密切相關；App中字號范圍一般在20-36之間（@2x），所有的字號設置都必須為偶數(shù)，上下級內(nèi)容字號極差關系為2-4號。百度曾經(jīng)做過一個調(diào)查，對于App字體大小調(diào)查結果如圖（1）標準字規(guī)范分為：重要、一般、弱。這里主要規(guī)范標準字的大小，標準字要注意跟上面講的標準色進行組合，來突出App重要的信息和弱化次要的信息。標準字-重要：大字號普遍用于大標題、top導航，較小字號用在分割模塊的標題上。標準字-一般：主要用在大多數(shù)文字，比如正文。標準字-弱：普遍與標準色-一般，組合用于輔助性文字如一些次要的文案說明，如圖iOS制定了不同界面區(qū)域下對應不同功能字體大小，如圖移動端平臺界面設計規(guī)范iOS平臺（2）字體在iOS系統(tǒng)中，中文方面默認使用蘋方字體，字形纖細中宮飽滿，利于閱讀，并且還提供6個字重供設計開發(fā)者使用所以后面的設計趨勢中，字重的使用變的開始多元化了起來，使用semibold中粗體、大字號作為界面的標題變的更為流行起來，如圖而在英文方面，iOS系統(tǒng)使用了SanFrancisco的字體。5.圖標規(guī)范在PS中繪制AppUI界面設計里的圖標時盡可能用形狀來繪制，這樣可以保證圖標和按鈕是矢量圖，切圖的時候的格式都是Png；同時圖標和按鈕的尺寸大小必須為偶數(shù)。圖標還應該根據(jù)不同的功能需求設計不同的狀態(tài)：如常態(tài)、選中態(tài)、點擊態(tài)等，如圖App交互UI設計流程分析

…………App交互UI設計流程分析版式界面設計的概念梳理在進行UI設計時，除了要考慮界面層次結構的構建、確定界面的構成及設計風格，還要考慮版式設計的布局，當界面設計完成后，為了便于和原型交互設計師進行銜接，同時為了原型交互設計師可以高度還原我們的UI設計稿，還需要平面設計師對UI進行切圖、標注以及元素的優(yōu)化存儲。

…………版式界面設計的概念梳理內(nèi)容布局列表式布局卡片式布局

…………內(nèi)容布局列表式布局卡片式布局版式界面設計的概念梳理

…………界面圖片設計比例常見圖片尺寸比例：16:94:33:21:1版式界面設計的概念梳理

…………對齊對齊是版式設計基礎、重要的原則之一，通過整齊的外觀，給用戶一種有序一致的瀏覽體驗。版式界面設計的概念梳理

…………對稱對稱設計傳達出頁面的平衡、安靜和穩(wěn)定，同時表達了完整性、專業(yè)性和一致性。版式界面設計的概念梳理

…………分組常見的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗。版式界面設計的概念梳理

…………切圖的重要性設計切圖輸出的目的是跟前端的工程師團隊協(xié)同工作，那么在團隊協(xié)作過程中，首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原需求。其次，切圖輸出應該盡可能降低工程師的開發(fā)工作量，避免因切圖輸出而導致不必要的工作。最后，輸出的切圖應當盡可能的壓縮大小，以降低App或Web的總大小，提升用戶使用時的加載速度。所以切圖輸出應當做到切圖精準，便于團隊協(xié)同工作。切圖的重要性界面標注的注意事項界面標注的作用是給開發(fā)工程師提供參考，因此在標注之前需要和原型開發(fā)工程師進行溝通，了解他們的工作方式，以更快捷高效的完成工作，并且最大限度的完成平面設計稿的高度還原。標注注意事項：合理劃分，再復雜的頁面，信息也不要擠在一起，如圖每一個標注本身也要注意對齊方式，干凈整潔的標注能讓開發(fā)一眼找到所需，如圖任何細節(jié)和要求都寫清楚，要做到有據(jù)可查。需要標注的內(nèi)容整理如下：①文字：字體、大小、字體顏色②圖標：大小、區(qū)域③列表：列表高度、顏色、列表內(nèi)內(nèi)容上下間距④布局控件屬性：控件寬高、填充顏色、圓角大?、蓍g距：控件之間的距離、左右邊距⑥段落文字：字體大小、字體顏色、行距，如圖1.不要提供多余無效的內(nèi)容用戶在觀看動態(tài)圖的時候，很容易被過多的內(nèi)容所分散注意力，尤其是當你想要借助動態(tài)圖來傳達特定的引導，多余的色彩和內(nèi)容很容易弱化它們。告知用戶正在運行用戶想知道在每一步中發(fā)生了什么，如果超過3秒沒有反饋，使用戶在不確定性等待中極易關閉應用。

告知用戶進度通常只是讓用戶知道程序正在運行是不夠的，還要能夠看到載入速度和加載時長，進度條的作用得以突顯PS動態(tài)元素的優(yōu)化存儲設置2.在動態(tài)圖中建立一致的視覺在設計的時候使用品牌的配色來對動態(tài)圖進行設計，將品牌的形象、LOGO和其他元素在Gif圖中呈現(xiàn)，讓品牌、企業(yè)和產(chǎn)品以更加富有活力的方式呈現(xiàn)出來。PS動態(tài)元素的優(yōu)化存儲設置3.顏色越少越好這不僅影響最終文件的大小，而且使用的顏色越少，單位體積內(nèi)可容納的動畫就越多，同時又可以把文件控制在很小的范圍。PS動態(tài)元素的優(yōu)化存儲設置4.Gif圖要盡可能小不同平臺的圖片規(guī)格不同，使用場景也不一樣，因此，Gif圖需要足夠小才能兼容不同的需求。縮小Gif圖尺寸的方法：

精簡動畫特效；丟掉重復的幀；減少顏色值；調(diào)整損耗值等等；PS動態(tài)元素的優(yōu)化存儲設置1.設計“美食小吃”App界面UI在“美食小吃”App進行設計之前，我們需要思考，界面如何設計才能留住用戶，首先方便快捷的操作界面是重要基礎，能夠讓用戶快速了解到自己需要的信息十分重要，其次精致美觀的界面設計必不可少，要最大程度的呈現(xiàn)食物的美味，這就需要我們在分析的角度上遵循一切從用戶角度出發(fā)。在產(chǎn)品功能類似的情況下，用戶體驗最大程度上影響用戶的忠誠度，因為是主流的外賣App產(chǎn)品，在產(chǎn)品的易用性和基本用戶體驗上，很值得我們借鑒，優(yōu)秀的交互設計，不能只注重產(chǎn)品體驗的易用性，在設計用戶行為、幫助用戶完成目標的同時，還應該給用戶帶來愉快、有意義的體驗。項目實施-移動端“美食小吃”App交互UI設計1.設計“美食小吃”App界面UI1.確定界面設計風格在進行App界面設計時，首先要做的就是確定整個界面的風格，通過顏色和布局的搭配給用戶呈現(xiàn)整體的視覺感受，我們采用現(xiàn)行主流的扁平化設計風格，優(yōu)點是可以兼容不同系統(tǒng)平臺和不同分辨率、設計元素極簡，突出圖文信息等。2.使用設計規(guī)范正確的使用設計規(guī)范可以對我們的App界面設計進行風格統(tǒng)一，同時減少界面元素的重復設計，控制設計素材的大小，設計規(guī)范參考Android、iOS平臺設計規(guī)范。3.確定頁面內(nèi)容的構成確定了設計風格及設計規(guī)范后，設計師根據(jù)風格進行細化的設計，根據(jù)外賣App的特點，我們設定美食小吃AppUI設計由引導頁、登錄頁、首頁、會員、訂單、我的頁面等內(nèi)容構成，如圖項目實施-移動端“美食小吃”App交互UI設計1.設計“美食小吃”App界面UI4.設計頁面層次我們通過視覺語言的基本元素，尺寸、顏色、字體、版式、布局來對美食小吃App進行視覺層次的設計。通過以上的流程講解，我們實現(xiàn)了App風格的確定、遵循App平臺的設計規(guī)范、確定頁面內(nèi)容的構成、以及頁面視覺層次的構建和布局設計，基本完成了美食小吃AppUI的設計工作。項目實施-移動端“美食小吃”App交互UI設計2.頁面適配在瀏覽App的時候，我們會遇到過在部分機型中圖片變形、頁面不協(xié)調(diào)、文案被裁剪的問題。這就需要我們頁面進行適配，適配是為了使頁面在不同手機設備上,相對保持統(tǒng)一的展示效果。在頁面適配前，我們先了解什么是@2x、@3x，如圖可以簡單的理解為倍數(shù)關系，如果使用750x1334px（iPhone6/7/8）尺寸做設計稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x，如圖項目實施-移動端“美食小吃”App交互UI設計3.實現(xiàn)美食App界面素材切片輸出當界面設計定稿之后，設計師需要對圖標進行切片提供給原型交互設計師，把設計稿中有用的部分剪切下來作為網(wǎng)頁或移動端制作時的素材，這個過程就是切圖。通常我們只需要對圖標進行切圖就可以，文字、線條和