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

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