01-樂動云課程項目-教育類iOS手機(jī)App設(shè)計-1

樂動云課程項目-教育類

iOS手機(jī)App設(shè)計-1課程目標(biāo)了解教育類App設(shè)計理論掌握iOS標(biāo)注規(guī)范與技巧掌握教育類iOS手機(jī)App設(shè)計技巧了解側(cè)邊欄導(dǎo)航與TAB導(dǎo)航2/39本章任務(wù)復(fù)習(xí)iOS系統(tǒng)界面設(shè)計規(guī)范了解樂動云課程項目需求樂動云課程首頁界面設(shè)計樂動云課程課程詳情頁界面設(shè)計3/39目錄教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機(jī)App首頁設(shè)計樂動云課程詳情頁的設(shè)計4/39教育類App相關(guān)理論教育類App常見分類從用戶人群的年齡來進(jìn)行分類：5/39教育類App相關(guān)理論教育類App常見分類按照學(xué)習(xí)內(nèi)容分類：視頻類、文檔類、泛學(xué)習(xí)類等按照平臺分類：C2C（個人對個人）、B2C（機(jī)構(gòu)對個人）、B2B2C（供應(yīng)商到品牌商，品牌商再到用戶）、C2C+O2O（個人對個人，線上到線下）、B2C+O2O（機(jī)構(gòu)到個人，線上到線下）等6/39教育類App相關(guān)理論教育類App的常見視覺風(fēng)格低幼兒童教育類

App界面視覺風(fēng)格7/39教育類App相關(guān)理論教育類App的常見視覺風(fēng)格中小學(xué)生教育類App界面視覺風(fēng)格8/39教育類App相關(guān)理論教育類App的常見視覺風(fēng)格青年教育類App界面視覺風(fēng)格9/39教育類App相關(guān)理論教育類App的常見視覺風(fēng)格青年教育類App界面視覺風(fēng)格10/39教育類App相關(guān)理論教育類App的常見功能社交得用戶者，得天下！口碑相傳是傳播App

強(qiáng)大有效的途徑11/39教育類App相關(guān)理論教育類App的常見功能工具12/39教育類App相關(guān)理論教育類App的常見功能標(biāo)注學(xué)習(xí)進(jìn)程13/39目錄教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機(jī)App首頁設(shè)計樂動云課程詳情頁的設(shè)計14/39樂動云課程項目需求分析項目名稱樂動云課程-教育類手機(jī)App設(shè)計樂動云課程項目需求分析樂動云課程已經(jīng)有了成熟的網(wǎng)頁端產(chǎn)品，為拓展市場、提高知名度、為用戶提供更便攜式的教育產(chǎn)品，現(xiàn)階段要設(shè)計并制作課工場手機(jī)端App15/39樂動云課程項目需求分析樂動云課程主要目標(biāo)用戶分析目標(biāo)用戶：即將大學(xué)畢業(yè)的學(xué)生、初入職場的新人、希望拓展工作技能的職場人士，需要學(xué)習(xí)實用技能的人群年輕、有活力、樂于接受新興事物有主動學(xué)習(xí)、樂于學(xué)習(xí)的思想專注力差、專注時間短16/39樂動云課程項目設(shè)計規(guī)劃整合樂動云課程web端產(chǎn)品的核心功能樂動云課程從網(wǎng)頁到手機(jī)的功能如何進(jìn)行篩選?視覺表達(dá)如何進(jìn)行統(tǒng)一?17/39樂動云課程項目設(shè)計規(guī)劃整合樂動云課程web端產(chǎn)品的核心功能18/39樂動云課程項目設(shè)計規(guī)劃確立設(shè)計風(fēng)格界面以扁平化風(fēng)格為主，簡潔大方，容易適配到多終端，也利于用戶沉浸在學(xué)習(xí)當(dāng)中。間接的引導(dǎo)流程，令新用戶也能很容易找到自己想學(xué)習(xí)的課程主體顏色采用藍(lán)色（#178bff），視覺風(fēng)格保持與網(wǎng)頁端產(chǎn)品相統(tǒng)一使用默認(rèn)字體、強(qiáng)調(diào)規(guī)范下的美學(xué)圖標(biāo)：極簡主義線條圖標(biāo)、簡單、秀氣、時尚。且文件體積較小，有利于用戶下載安裝19/39樂動云課程項目設(shè)計規(guī)劃確立結(jié)構(gòu)布局繪制原型圖，確立界面的布局原型圖一般由產(chǎn)品經(jīng)理提供20/39目錄教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機(jī)App首頁設(shè)計樂動云課程詳情頁的設(shè)計21/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)界面尺寸和分辨率在實際工作中，可以使用750x1334px進(jìn)行設(shè)計ptiOS開發(fā)中用到的長度單位，是獨立像素的意思不隨屏幕密度PPI發(fā)生變化，是固定單位iPhone型號設(shè)計尺寸px屏幕像素密度ppi與px的換算關(guān)系iPhone6，6s，7，8750×1334326@2X分辨率1pt=2px22/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)中的欄狀態(tài)欄導(dǎo)航欄標(biāo)簽欄工具欄iPhone型號設(shè)計尺寸px狀態(tài)欄導(dǎo)航欄標(biāo)簽欄iPhone6，6s，7，8750×133440889823/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)中的欄工具欄和標(biāo)簽欄的區(qū)別：工具欄關(guān)注的是當(dāng)前界面的操作，它的操作按鈕中不能有屏幕的切換標(biāo)簽欄關(guān)注的是整體導(dǎo)航，有屏幕的切換在iOS系統(tǒng)中，如果同時需要工具欄和標(biāo)簽欄，那么受屏幕大小的限制最好適時地隱藏標(biāo)簽欄24/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)的按鈕與可點擊區(qū)域最小22×22pt~24×24pt在兩倍屏中，即44×44px~48×48px為最小可點擊區(qū)域的尺寸如果確實由于空間有限，必須要縮小按鈕或可點擊區(qū)域的尺寸，可以在增大可點擊區(qū)域其中一條邊長的前提下適當(dāng)縮減另一條邊的尺寸，以方便用戶更容易的進(jìn)行操作25/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)字體與字號蘋方在設(shè)計時中文可以使用蘋方、冬青黑體、蘋果麗黑英文可以使用SanFrancisco、Helvetial由于系統(tǒng)更新，所使用的字體也會有所變化，因此以官方發(fā)布為主26/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧iOS系統(tǒng)字體與字號界面中使用文字的時候，要保證文字極易被識別一款A(yù)pp中一般只使用一種或兩種字體為了保證適配方便，盡量使用雙數(shù)字號設(shè)計師可以通過文字的顏色、大小、所占比重、行間距來進(jìn)行強(qiáng)調(diào)和區(qū)分27/39iOS系統(tǒng)界面設(shè)計規(guī)范回顧文本輸入、輸出控件按鈕、滑塊、選擇控件對話框、活動指示器、進(jìn)度條28/39目錄教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機(jī)App首頁設(shè)計樂動云課程詳情頁的設(shè)計29/39演示案例：

樂動云課程手機(jī)App首頁設(shè)計需求描述界面設(shè)計尺寸：750×1334px或按照測試機(jī)實際尺寸進(jìn)行設(shè)計分辨率：72ppi字體：華文細(xì)黑或蘋方實現(xiàn)思路30/39樂動云課程手機(jī)App首頁設(shè)計案例重點解析：使用750×1334px這個尺寸進(jìn)行設(shè)計是為了能夠更好的進(jìn)行雙系統(tǒng)適配標(biāo)題圖片的選擇來自網(wǎng)頁端產(chǎn)品31/39樂動云課程手機(jī)App首頁設(shè)計案例重點解析：當(dāng)頁面較長時，可以將畫布的高度拉伸，這樣可以很方便的將本頁所有內(nèi)容設(shè)計進(jìn)去。需要同時提供一個標(biāo)準(zhǔn)高度的尺寸，方便導(dǎo)入測試手機(jī)進(jìn)行預(yù)覽和測試32/39樂動云課程手機(jī)App首頁設(shè)計案例重點解析：設(shè)計師在界面設(shè)計中，如果使用同一張占位圖片，界面往往看起來太生硬，不夠美觀，所以建議不要只使用一張占位圖片33/39目錄教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機(jī)App首頁設(shè)計樂動云課程詳情頁的設(shè)計34/39演示案例：樂動云課程詳情頁的設(shè)計需求描述界面設(shè)計尺寸：750×1334px或按照測試機(jī)實際尺寸進(jìn)行設(shè)計分辨率：72ppi字體：華文細(xì)黑或蘋方實現(xiàn)思路35/39課工場手機(jī)App首頁設(shè)計案例重點解析：不同權(quán)重的文字選用不同的字號和顏色對齊和平分成套小圖標(biāo)的繪