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

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

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

02視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸顏色字體布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建放大主體內(nèi)容或者標(biāo)題來突出視覺層次關(guān)系，突出主要內(nèi)容

03視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小字體布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建顏色

04視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小顏色布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建字體

05視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小顏色字體

App頁面視覺層次結(jié)構(gòu)的構(gòu)建布局

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

App頁面視覺層次結(jié)構(gòu)的構(gòu)建App界面設(shè)計的視覺引導(dǎo)視覺引導(dǎo)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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