第五章7-App界面版式設(shè)計(jì)規(guī)范及交互設(shè)計(jì)原則-備課筆記

編號(hào)27編號(hào)27-01學(xué)習(xí)任務(wù)七、App界面版式設(shè)計(jì)規(guī)范與交互設(shè)計(jì)原則一、課程說(shuō)明與要求1.課程說(shuō)明本次課主要講解包括App界面版式設(shè)計(jì)規(guī)范、交互設(shè)計(jì)經(jīng)驗(yàn)法則及解析兩方面內(nèi)容；一個(gè)好的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，通過(guò)掌握版式設(shè)計(jì)的規(guī)范，可以幫助我們?cè)O(shè)計(jì)出更符合用戶使用和視覺(jué)體驗(yàn)的產(chǎn)品；同時(shí)通過(guò)對(duì)交互設(shè)計(jì)原則的理解和實(shí)例分析，希望大家能從中學(xué)習(xí)到一些設(shè)計(jì)經(jīng)驗(yàn)和技巧，也為我們自己做app產(chǎn)品時(shí)增加些知識(shí)儲(chǔ)備。二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對(duì)象為藝術(shù)專業(yè)學(xué)生，學(xué)生沒(méi)有接受過(guò)交互設(shè)計(jì)原則等方面的知識(shí)，普遍認(rèn)知不強(qiáng)，為此我們強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場(chǎng)多元化理念。另一方面，學(xué)生對(duì)新興的事物接受比較快，對(duì)所選擇的專業(yè)感興趣，獲取知識(shí)的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入我們講版式設(shè)計(jì)規(guī)范和交互原則，那么什么是版式設(shè)計(jì)，版式設(shè)計(jì)都有哪些規(guī)范，這些規(guī)范在App中是如何體現(xiàn)的，實(shí)際在我們?nèi)粘Ｉ钪惺褂玫纳暇€的App，看到的內(nèi)容布局、對(duì)齊、分組等都是設(shè)計(jì)規(guī)范的體現(xiàn)。三、理論知識(shí)講解（一）App界面版式設(shè)計(jì)規(guī)范………【重點(diǎn)】1.內(nèi)容布局（1）列表式布局特點(diǎn)是能夠在較小的屏幕中顯示多條信息，用戶可以通過(guò)上下滑動(dòng)手勢(shì)來(lái)獲得大量的信息反饋。編號(hào)27編號(hào)27-02特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片來(lái)承載不同的內(nèi)容。而且由于每張卡片都是獨(dú)立存在的，所以它的信息量可以相對(duì)于列表更加豐富些?！舅颊谌耄ㄎ覀兺ㄟ^(guò)戲曲案例分析列表式和卡片式布局的應(yīng)用，戲曲作為我國(guó)優(yōu)秀的傳統(tǒng)藝術(shù),有著廣泛的民眾基礎(chǔ)，戲曲包含的藝術(shù)形式,在娛樂(lè)大眾的同時(shí),也在潛移默化地影響著人們世界觀、人生觀及價(jià)值觀的形成。我國(guó)自古以來(lái)就重視藝術(shù)作品的教育作用,對(duì)于戲曲更是如此，隨著網(wǎng)絡(luò)的廣泛發(fā)展，未來(lái)在交互設(shè)計(jì)領(lǐng)域也會(huì)有更多相應(yīng)類型的產(chǎn)品。）】【互動(dòng)參與討論，不同App中的列表高度帶來(lái)的不同體驗(yàn)分析，教師做總結(jié)】2.界面圖片設(shè)計(jì)比例常見(jiàn)的圖片尺寸有：16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。編號(hào)27編號(hào)27-03對(duì)齊是版式設(shè)計(jì)基礎(chǔ)、重要的原則之一，通過(guò)整齊的外觀，給用戶一種有序一致的瀏覽體驗(yàn)。4.對(duì)稱對(duì)稱設(shè)計(jì)傳達(dá)出頁(yè)面的平衡、安靜和穩(wěn)定，同時(shí)表達(dá)了完整性、專業(yè)性和一致性。5.分組常見(jiàn)的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。編號(hào)27編號(hào)27-04【互動(dòng)參與討論，版式設(shè)計(jì)規(guī)范在不同App中的交互設(shè)計(jì)，教師做總結(jié)】6.設(shè)計(jì)適配（1）顯示分辨率：分辨率是度量位圖圖像內(nèi)數(shù)據(jù)量多少的一個(gè)參數(shù)。通常表示成每英寸像素（Pixelperinch,ppi）和每英寸點(diǎn)（Dotperinch,dpi）。包含的數(shù)據(jù)越多，圖形文件的長(zhǎng)度就越大，也能表現(xiàn)更豐富的細(xì)節(jié)。“分辨率”被表示成每一個(gè)方向上的像素?cái)?shù)量，比如1920X1080等。（2）邏輯分辨率：由于市面上手機(jī)種類比較多，有不同的屏幕尺寸和不同的顯示分辨率，給開(kāi)發(fā)提供了很多不便；為了減少開(kāi)發(fā)人員的工作成本，開(kāi)發(fā)人員需要一套統(tǒng)一的分辨率和尺寸單位，因此衍生出一個(gè)新的分辨率——邏輯分辨率（單位是虛擬尺寸單位)。Android的虛擬尺寸單位是dp（用于元素）和sp（用于字體），iOS的虛擬尺寸單位是pt。（3）設(shè)計(jì)尺寸選擇：計(jì)師需要設(shè)計(jì)一套基準(zhǔn)設(shè)計(jì)圖來(lái)達(dá)到適配多個(gè)分辨率的目的，我們可以選擇中間尺寸750x1134px作為基準(zhǔn)，向下可以適配640x1136px，向上可以適配1242x2208px和750x1624px／1125x2436px。ios切片常見(jiàn)為：@2x切圖（以750px為寬度尺寸為基準(zhǔn)切圖）@3x切圖（以1242px為寬度尺寸為基準(zhǔn)切圖）編號(hào)27編號(hào)27-05（二）App交互設(shè)計(jì)經(jīng)驗(yàn)法則及解析………【難點(diǎn)】1、狀態(tài)可見(jiàn)原則系統(tǒng)應(yīng)該讓用戶快速的了解自己處于何種狀態(tài)、對(duì)過(guò)去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來(lái)去向有所了解；一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答?。編?hào)27編號(hào)27-062、環(huán)境貼切原則軟件系統(tǒng)應(yīng)該使用用戶熟悉的語(yǔ)言、文字、語(yǔ)句，而非系統(tǒng)語(yǔ)言。軟件中的信息應(yīng)該盡量貼近真實(shí)世界，讓信息更自然，邏輯上也更容易被用戶理解。3、用戶可控原則用戶誤觸到某些功能，應(yīng)該讓用戶可以方便的退出。用戶發(fā)送一條消息、總會(huì)有意識(shí)到自己不對(duì)的地方，這個(gè)叫做臨界效應(yīng)；支持撤銷/重做功能。編號(hào)27編號(hào)27-074、一致性原則（1）結(jié)構(gòu)一致性保持一種類似的結(jié)構(gòu)，新的結(jié)構(gòu)變化會(huì)讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān)（2）色彩一致性產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的，而不是換一個(gè)頁(yè)面顏色就不同編號(hào)27編號(hào)27-08（3）操作一致性能讓產(chǎn)品更新?lián)Q代時(shí)仍然讓用戶保持對(duì)原產(chǎn)品的認(rèn)知，減小用戶的學(xué)習(xí)成本（4）反饋一致性用戶在操作按鈕或者條目的時(shí)候，點(diǎn)擊的反饋效果應(yīng)該是一致的比如QQ移動(dòng)端信息列表的打開(kāi)方式：它的信息都是列表式結(jié)構(gòu)，不管你點(diǎn)擊那一行條目，下一級(jí)界面都是由右往左滑出，點(diǎn)擊頂部左上角的返回按鈕會(huì)從左往右滑回，體驗(yàn)上是一致的；這就是反饋一致性的體現(xiàn)。（5）文字一致性產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等都應(yīng)該是一致的編號(hào)27編號(hào)27-095、防錯(cuò)原則在用戶提交之前給他一個(gè)確認(rèn)的選項(xiàng)。需要注意的是：在用戶操作具有不可逆效果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤。6、易取原則通過(guò)把組件、按鈕及選項(xiàng)可見(jiàn)化，來(lái)降低用戶的記憶負(fù)擔(dān)。軟件的使用指南應(yīng)該是可見(jiàn)的，且在合適的時(shí)候可以再次查看。編號(hào)27編號(hào)27-10可以同時(shí)滿足有經(jīng)驗(yàn)和無(wú)經(jīng)驗(yàn)的用戶。允許用戶定制常用功能。8、優(yōu)美簡(jiǎn)約原則展示的內(nèi)容應(yīng)該去除不相關(guān)的信息或幾乎不需要的信息。不相關(guān)的信息都會(huì)讓原本重要的信息更難被用戶察覺(jué)。9、容錯(cuò)原則出現(xiàn)錯(cuò)誤信息應(yīng)該使用簡(jiǎn)潔的文字，指出錯(cuò)誤是什么，并給出解決建議。既要幫助用戶識(shí)別出錯(cuò)誤，分析出錯(cuò)誤的原因，還要幫助用戶回到正確的操作上。編號(hào)27編號(hào)27-1110、人性化原則任何產(chǎn)品都應(yīng)該提供一份幫助文檔。任何幫助信息都應(yīng)該可以方便地搜索到，以用戶的任務(wù)為重心，列出相應(yīng)的步驟，但文字不要太多。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：利用手機(jī)、電腦等工具，搜集各App的界面設(shè)計(jì)，并分析版式設(shè)計(jì)規(guī)范在App中的體現(xiàn)任務(wù)2：從搜集的App中分析交互設(shè)計(jì)原則在App中的用法，加深對(duì)交互設(shè)計(jì)原則的理解（二）實(shí)戰(zhàn)項(xiàng)目案例……………【重點(diǎn)】根據(jù)版式設(shè)計(jì)規(guī)范的講解，使用基本元素設(shè)計(jì)符合用戶體驗(yàn)的內(nèi)容布局（列表式、卡片式）教師重點(diǎn)指導(dǎo)：ps軟件的基本操作；布局內(nèi)容的要點(diǎn)及間距設(shè)置。【實(shí)訓(xùn)指導(dǎo)：學(xué)生初次接觸App版式設(shè)計(jì)規(guī)范理論知識(shí)，并進(jìn)行設(shè)計(jì)制作實(shí)踐，教師應(yīng)多引導(dǎo)，幫助編號(hào)27編號(hào)27-12五、課堂總結(jié)今天，我們主要學(xué)習(xí)并了解了App界面版式設(shè)計(jì)規(guī)范和交互設(shè)計(jì)經(jīng)驗(yàn)法則，也結(jié)合相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過(guò)練習(xí)對(duì)App版式設(shè)計(jì)規(guī)范的標(biāo)準(zhǔn)和應(yīng)用有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對(duì)所接觸到的主流App，從中分析交互設(shè)計(jì)法則中常用的一些原則以及界面設(shè)計(jì)規(guī)范在App設(shè)計(jì)中的應(yīng)用，這樣有助于你們對(duì)知識(shí)點(diǎn)的更深入的理解