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

移動(dòng)端“美食小吃”App交互UI設(shè)計(jì)知識(shí)要點(diǎn)01“美食小吃”App交互UI設(shè)計(jì)項(xiàng)目背景分析02App交互UI設(shè)計(jì)項(xiàng)目需求分析03App頁(yè)面視覺(jué)層次結(jié)構(gòu)與視覺(jué)引導(dǎo)04App界面元素構(gòu)成設(shè)計(jì)05App界面布局設(shè)計(jì)風(fēng)格06移動(dòng)端平臺(tái)界面設(shè)計(jì)規(guī)范07App交互UI設(shè)計(jì)流程分析08項(xiàng)目實(shí)施-移動(dòng)端“美食小吃”App交互UI設(shè)計(jì)“美食小吃”App交互UI設(shè)計(jì)項(xiàng)目背景分析“美食小吃”App交互UI設(shè)計(jì)項(xiàng)目背景分析在互聯(lián)網(wǎng)浪潮的沖擊下，餐飲行業(yè)的互聯(lián)網(wǎng)化飛速發(fā)展。從最初的點(diǎn)評(píng)模式開(kāi)始，團(tuán)購(gòu)、外賣等諸多形式不斷涌現(xiàn)，當(dāng)前，餐飲行業(yè)已成為本地生活服務(wù)行業(yè)中互聯(lián)網(wǎng)化程度最高的行業(yè)之一，訂外賣、在線預(yù)訂、團(tuán)購(gòu)都已經(jīng)成為消費(fèi)者就餐的常規(guī)選擇。外賣App已成為一種常規(guī)訂餐方式。借助外賣，餐廳可擺脫位置、營(yíng)業(yè)面積的制約，擴(kuò)大服務(wù)范圍，提高銷量。早期的訂餐服務(wù)平臺(tái)有百度外賣、餓了么、美團(tuán)外賣，從2017年餓了么收購(gòu)百度外賣后，餓了么和美團(tuán)占據(jù)主要市場(chǎng)，形成雙雄爭(zhēng)霸的格局。餓了么定位從學(xué)生群體著手，瞄準(zhǔn)外賣市場(chǎng)，專注成為餐飲服務(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ī)模的市場(chǎng)環(huán)境，利用網(wǎng)絡(luò)宣傳美食是現(xiàn)今最有效的方法。設(shè)計(jì)一款地方或特色美食的App不僅可以長(zhǎng)期宣傳美食文化，還可以提高商戶或企業(yè)的知名度，中國(guó)歷來(lái)有“民以食為天”的傳統(tǒng)，餐飲業(yè)一直在社會(huì)發(fā)展與人民生活中發(fā)揮著重要作用，經(jīng)營(yíng)檔次和企業(yè)管理水平不斷提高，經(jīng)營(yíng)業(yè)態(tài)日趨豐富，投資主題和消費(fèi)需求多元化的發(fā)展步伐加快，設(shè)計(jì)一款自己的App或虛擬店面，需要摒棄傳統(tǒng)餐飲業(yè)低層次的服務(wù)方式，走特色美食文化之路，提高餐飲業(yè)的文化品位。同時(shí)要突出App的深層次服務(wù)，如企業(yè)精神、特色菜肴、休閑、文化娛樂(lè)、在同行業(yè)中的特色優(yōu)勢(shì)、投訴處理、意見(jiàn)反饋甚至互動(dòng)交流，培養(yǎng)各階層顧客對(duì)品牌的忠誠(chéng)度。App交互UI設(shè)計(jì)項(xiàng)目需求分析App交互UI設(shè)計(jì)項(xiàng)目需求分析在新的消費(fèi)時(shí)代，外賣的出現(xiàn)完全顛覆了餐飲業(yè)，訂購(gòu)?fù)赓u已經(jīng)成為人們?nèi)粘Ｉ钪谐Ｒ?jiàn)的事情。傳統(tǒng)商業(yè)街總是通過(guò)多種方式引導(dǎo)傳統(tǒng)店鋪。其中，加入外賣平臺(tái)是多數(shù)餐飲企業(yè)的選擇。餐飲店鋪越來(lái)越離不開(kāi)外賣App，消費(fèi)者也是離不開(kāi)外賣App，外賣App已經(jīng)成為顧客飲食生活中不可缺少的重要部分。目前市場(chǎng)對(duì)外賣App的需求主要體現(xiàn)在以下幾個(gè)方面：客戶端：對(duì)外賣App用戶最重要的功能是自動(dòng)找到當(dāng)前位置，然后展示周圍的商業(yè)街食品，根據(jù)銷售、距離、類別、價(jià)格等進(jìn)行選擇，在線完成支付后，可以查看配送信息來(lái)評(píng)估產(chǎn)品。后臺(tái)管理端：外賣App開(kāi)發(fā)的后臺(tái)管理點(diǎn)。主要功能模塊包括設(shè)置營(yíng)銷入駐系統(tǒng)、營(yíng)銷支持、基數(shù)部署中心在線、支持各種營(yíng)銷活動(dòng)、吸引營(yíng)銷、商城結(jié)算、數(shù)據(jù)統(tǒng)計(jì)、信息推送等。商家方面：主要面向入住外賣App的普通商家。核心功能包括店鋪和產(chǎn)品設(shè)置、營(yíng)銷活動(dòng)設(shè)置、結(jié)算結(jié)算、在線客服、電話短信、店鋪公告、訂單管理、評(píng)價(jià)管理等。配送方：主要面向配送配送人員，包括實(shí)時(shí)訂單、轉(zhuǎn)賬幫助、異常訂單、信息通知、歷史訂單、配送收入、地圖定位、導(dǎo)航等。那么，根據(jù)產(chǎn)品的定位和目標(biāo)用戶以及用戶地域的分布，開(kāi)發(fā)一款商家自己的外賣App軟件，可以更精準(zhǔn)的把握用戶，并有針對(duì)性的提供些定制化服務(wù)，同時(shí)所有用戶的數(shù)據(jù)都在App后臺(tái)的數(shù)據(jù)庫(kù)里，不需要與其他商家相比，不僅能大大提高商家的利潤(rùn)，還能給用戶降低價(jià)格，提高用戶的訂單率、回收率。還可以舉辦各種營(yíng)銷活動(dòng)，建立會(huì)員積分系統(tǒng)，促進(jìn)銷售。從而提升銷售額，并形成一定的知名度。App頁(yè)面視覺(jué)層次結(jié)構(gòu)與視覺(jué)引導(dǎo)App頁(yè)面視覺(jué)層次結(jié)構(gòu)的構(gòu)建

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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