櫻花課程產(chǎn)品原型設(shè)計(jì)

產(chǎn)品原型設(shè)計(jì)能夠設(shè)計(jì)產(chǎn)品原型能夠?qū)崿F(xiàn)常見的交互設(shè)計(jì)常見原型類型原型設(shè)計(jì)規(guī)范原型設(shè)計(jì)實(shí)踐常見交互類型交互設(shè)計(jì)實(shí)踐常見原型類型01原型的定義及分類用線條、圖形描繪出的產(chǎn)品框架，也稱線框圖，是需求和功能的具體化表象；原型的定義及分類原型的分類草圖原型低保真原型高保真原型

原型的定義及分類草圖原型原型的定義及分類低保真原型原型的定義及分類高保真原型原型的定義及分類-

不同類型的原型特點(diǎn)手繪圖稿，修改方便，規(guī)劃的早期使用草圖原型低保真原型高保真原型010203簡單交互，無設(shè)計(jì)圖，無需配色，黑白灰即可，產(chǎn)品經(jīng)理做產(chǎn)品規(guī)劃及評審的階段使用復(fù)雜交互，有設(shè)計(jì)圖，需要有圖片設(shè)計(jì)功底，做公開演示時(shí)候常用產(chǎn)品的分類移動端產(chǎn)品PC端產(chǎn)品包括APP端、小程序、H5等；包括PC客戶端和Web網(wǎng)頁端等；區(qū)別：不同的交互思想、不同的設(shè)計(jì)規(guī)范；注意：移動端產(chǎn)品中，APP端、小程序、H5等，在原型制作層面或者產(chǎn)品設(shè)計(jì)層面類似，我們課程以APP為例進(jìn)行講解；PC端產(chǎn)品中，客戶端和web網(wǎng)頁端的也是比較類似，我們以web網(wǎng)頁端為例進(jìn)行講解；低保真原型設(shè)計(jì)兩種類型的原型移動端原型；PC端原型；講解方式兩種類型原型的設(shè)計(jì)規(guī)范；典型原型頁面的設(shè)計(jì)；相關(guān)注意事項(xiàng)；原型設(shè)計(jì)規(guī)范02原型設(shè)計(jì)規(guī)范頁面規(guī)范信息規(guī)范控件規(guī)范前面我們提到了，移動端原型，我們以APP端為例進(jìn)行講解，APP端會繼續(xù)分為iOS端和安卓端；頁面規(guī)范-移動端多數(shù)企業(yè)中，都要求制作的是iOS端的原型注意事項(xiàng)頁面尺寸及區(qū)域說明移動端的頁面尺寸及區(qū)域：原型尺寸：375*667px；如果頁面較長，可以忽略667的要求；頂部的狀態(tài)欄高度：20px；狀態(tài)欄下方的導(dǎo)航欄高度：44px；二級導(dǎo)航欄，高度40px；底部標(biāo)簽欄高度：49px，文字10號字，圖標(biāo)25*25px；頁面中一級按鈕的高度：44px；原型制作從（0,0）的位置開始；移動端頁面布局及細(xì)節(jié)規(guī)范頁面細(xì)節(jié)處理及布局要求：不要使用圖標(biāo)或者icon（會對UI的工作產(chǎn)生干擾）；不要使用圖片元件（提升視覺體驗(yàn)）；使用合理的字號、顏色等，將內(nèi)容進(jìn)行權(quán)重的區(qū)分；注意對齊（左對齊、右對齊、居中對齊）；注意安全距離（不會產(chǎn)生誤解）；使用真實(shí)內(nèi)容填充原型（提升用戶體驗(yàn)）；注意中劃線使用；頁面溢出時(shí)的處理方式；原型中的字號不建議過小，最小8號字（實(shí)際產(chǎn)品中的字號，由UI決定）；頁面規(guī)范-PC端PC客戶端產(chǎn)品設(shè)計(jì)Web網(wǎng)頁端產(chǎn)品設(shè)計(jì)多數(shù)企業(yè)中，產(chǎn)品經(jīng)理要面對的是Web端的產(chǎn)品設(shè)計(jì)，所以我們以Web端為主進(jìn)行講解，PC端產(chǎn)品設(shè)計(jì)規(guī)范跟Web端幾乎相同；注意事項(xiàng)頁面規(guī)范-web端版心分辨率比例版心主流15寸1920*10801336*7681600*90016:9960-120024寸1920*120016:10960-1200CRT（顯像管）17寸1024*7684:376017寸、19寸普屏1280*10245:4960目前，市場上的主流電腦分辨率是1920*1080，版心為960-1200px（默認(rèn)安全區(qū)1200px即可）；Web端頁面尺寸：建議寬度1200px，高度不限。頁面規(guī)范-常用字體字號字號12PX字號14PX字號16PX字號18PX字號20PX字號36PX制作原型時(shí)，不需要額外修改其字體，使用默認(rèn)字體即可；最終產(chǎn)品的字體使用，需要由UI決定；12px是網(wǎng)頁設(shè)計(jì)的最小字號，適用于突出性的日期，版權(quán)等注釋性內(nèi)容；14px則適用于非突出性的普通正文內(nèi)容；16px或18px適用于突出性的標(biāo)題內(nèi)容；網(wǎng)站的字體大小沒有硬性規(guī)定，根據(jù)實(shí)際情況可以酌情考慮，但是要使用偶數(shù)字號；頁面規(guī)范-間距和透明度字體間距舒適范圍字體間距舒適范圍，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距：行間距，字號大小的1.5-2倍；段間距，字號大小的2-2.5倍；比如：當(dāng)選用14px字號時(shí)，行間距：21-28px；段間距：28px-35px；透明度：100%87%54%26%12%透明度：87%為正文標(biāo)題；54%為二級標(biāo)題；26%禁用狀態(tài)和提示文字；12%分割線；字重也需要注意頁面規(guī)范-web端其他注意事項(xiàng)web端頁面其他細(xì)節(jié)：原型建議從（0,0）位置開始制作，保持統(tǒng)一；列表類頁面，盡量避免出現(xiàn)橫向滾動條；表單類頁面，要做好信息分類；頁面中的控件樣式，需要保持統(tǒng)一；信息規(guī)范內(nèi)容的默認(rèn)值和極值；空內(nèi)容的顯示方式（比如空購物車）；內(nèi)容的最大寬度（換行）；部分內(nèi)容的顯示要求（比如時(shí)間、金錢）；控件認(rèn)知及控件規(guī)則編輯菜單（內(nèi)容頁面出現(xiàn)）分段控件/范圍欄如果在導(dǎo)航欄中，就是分段控件如果在導(dǎo)航欄下方，就是范圍欄按鈕（帶底色）聊天氣泡（限制長度）徽標(biāo)/角標(biāo)（左）浮出層（右）排列按鈕（左）開關(guān)按鈕（右）不能折行；不能顯示不盡；不能圖文混排；默認(rèn)狀態(tài)，不能字號大小不統(tǒng)一；輸入框（線型輸入框）滑塊控件認(rèn)知及控件規(guī)則系統(tǒng)與常用icon集容器視圖控制器支持自定義的字母鍵盤不要使用圖標(biāo)，也不要嘗試去制作圖標(biāo)；控件認(rèn)知及控件規(guī)則帶展開入口表格視圖日期選擇器（最多4列，奇數(shù)排）時(shí)間選擇器操作列表一個(gè)控件下產(chǎn)生了多個(gè)功能或操作；操作列表不要超過7項(xiàng)，盡量使用文字；模態(tài)視圖導(dǎo)航欄單列選擇器帶輸入框的警告框警告框數(shù)字鍵盤控件規(guī)范控件使用的注意事項(xiàng)：控件是否符合用戶認(rèn)知；控件樣式是否具有一致性；控件交互行為是否具有一致性；控件的不可用狀態(tài)如何呈現(xiàn)；原型設(shè)計(jì)實(shí)踐03移動端原型設(shè)計(jì)-典型頁面產(chǎn)品設(shè)計(jì)的建議：多體驗(yàn)產(chǎn)品，了解不同的產(chǎn)品設(shè)計(jì)方式；嘗試去分析不同設(shè)計(jì)方式的優(yōu)缺點(diǎn)；針對特定的需求，選擇最合適的產(chǎn)品設(shè)計(jì)方案；移動端原型設(shè)計(jì)-典型頁面登錄/注冊頁面：該頁面屬于二級頁面，沒有底部導(dǎo)航；二級頁面需要有返回或者退出按鈕；注意添加頁面標(biāo)題；注意頁面中不同級別內(nèi)容的權(quán)重區(qū)分（一級按鈕、文字按鈕等）；建議對照著實(shí)際頁面進(jìn)行制作；移動端原型設(shè)計(jì)-典型頁面APP首頁：弱化頁面中的線條效果；注意內(nèi)容之間的安全距離；使用中繼器快速實(shí)現(xiàn)頁面布局；頁面過長時(shí)，忽略667的高度限制，必須將所有的內(nèi)容都進(jìn)行呈現(xiàn)；底部標(biāo)簽欄在最下方；Tips：如果同一個(gè)內(nèi)容，既可以使用占位符，又可以使用矩形，建議使用矩形；注意元件的邊框是否保留；注意不同級別文字的字號區(qū)分和顏色；移動端原型設(shè)計(jì)-典型頁面詳情頁：先梳理出有哪些信息模塊，做好信息分類；注意頁面的布局和細(xì)節(jié)處理；注意模塊之間的先后順序；使用真實(shí)內(nèi)容進(jìn)行填充；PC端產(chǎn)品設(shè)計(jì)-前臺網(wǎng)站首頁：注意首屏的內(nèi)容設(shè)置；注意導(dǎo)航的跳轉(zhuǎn)方式（當(dāng)前窗口打開，還是新窗口打開）；降低線條感、注意頁面布局；PC端產(chǎn)品設(shè)計(jì)-后臺列表頁：先制作母版；不要出現(xiàn)橫向的滾動條；列表中的字段和查詢區(qū)的字段，要跟需求方進(jìn)行確認(rèn)；如果有不同類型的數(shù)據(jù)狀態(tài)和操作，都要列舉出來；PC端產(chǎn)品設(shè)計(jì)-后臺表單頁：注意做好信息分類；不同信息的先后順序及字段內(nèi)容，要跟需求方進(jìn)行確認(rèn)；從(0,0)的位置開始畫原型；常見的錯(cuò)誤示例頁面線條感太重；缺乏必要的內(nèi)容；移動端建議使用黑白灰的配色；頁面整體布局需要協(xié)調(diào)；注意使用合適的字號；列表中，建議填充示例數(shù)據(jù)；常見交互類型04常見交互類型頁面交互元件交互系統(tǒng)交互手勢交互頁面交互新窗口打開；當(dāng)前窗口打開；窗口大小自動調(diào)整（縮放、橫屏豎屏）；打開方式及窗口調(diào)整自動刷新/更新（考慮如何觸發(fā)）；點(diǎn)擊跳轉(zhuǎn)（需要提示）；頁面載入元件交互按鈕：鼠標(biāo)移入、點(diǎn)擊的效果；吐司：如何觸發(fā)、吐司樣式；文字：文字鏈接、錯(cuò)誤提示；元件交互系統(tǒng)交互警告框（注意按鈕擺放）；Push消息；指紋/面容識別提示；系統(tǒng)反饋內(nèi)容類型：數(shù)字鍵盤、字母鍵盤、自定義鍵盤；觸發(fā)哪類鍵盤；鍵盤類型及調(diào)用音視頻是否自動播放；如果自動播放，有什么條件；自動播放音視頻弱網(wǎng)、斷網(wǎng)的提示；網(wǎng)絡(luò)切換的提示和交互；網(wǎng)絡(luò)環(huán)境變化系統(tǒng)反饋鍵盤調(diào)用自動播放網(wǎng)絡(luò)變化手勢交互頁面頂部下拉，加載更多內(nèi)容（比如微博），或者呼出新頁面（比如微信）；下拉01瀏覽器、閱讀類APP，或者某些類型手機(jī)的系統(tǒng)性交互（在頁面邊緣左右滑動）；左右滑動02頁面底部上劃，加載更多內(nèi)容（比如微博）；上劃03內(nèi)容型頁面（比如公眾號文章），長按呼出編輯菜單；長按04交互設(shè)計(jì)實(shí)踐05移動端的常見交互案例-呼出鍵盤案例：呼出鍵盤點(diǎn)擊輸入框，從底部呼出鍵盤，開始編輯內(nèi)容；輸入內(nèi)容后，在右側(cè)出現(xiàn)“×”；點(diǎn)擊“×”，可以清空輸入的內(nèi)容；點(diǎn)擊頁面空白處，可以隱藏鍵盤；呼出鍵盤-注意事項(xiàng)動態(tài)面板需要有一個(gè)空白狀態(tài)，且置頂；“×”一開始是隱藏的，需要設(shè)置出現(xiàn)的條件；移動端的常見交互案例-獲取驗(yàn)證碼案例：獲取驗(yàn)證碼點(diǎn)擊獲取驗(yàn)證碼，按鈕禁用，文字變?yōu)閿?shù)字，同時(shí)進(jìn)入倒計(jì)時(shí)；倒計(jì)時(shí)結(jié)束，按鈕啟用，同時(shí)文字變?yōu)椤矮@取驗(yàn)證碼”；獲取驗(yàn)證碼-注意事項(xiàng)需要有一個(gè)空白的動態(tài)面板，且狀態(tài)數(shù)量≥2；利用動態(tài)面板狀態(tài)改變時(shí)涉及到的時(shí)間，實(shí)現(xiàn)倒計(jì)時(shí)的效果；移動端的常見交互案例-省市三級聯(lián)動案例：省市三級聯(lián)動頁面剛加載出來，三個(gè)下拉框都顯示的是請選擇；如果沒有選擇省份，城市和區(qū)縣都無法選擇；如果沒有選擇城市，區(qū)縣無法選擇；當(dāng)選擇對應(yīng)的省份時(shí)，城市下拉框變?yōu)閷?yīng)省份的城市，當(dāng)選擇城市時(shí)，區(qū)縣下拉框變?yōu)閷?yīng)的區(qū)縣；移動端的常見交互案例-吐司效果案例：吐司效果頁面下拉時(shí)出現(xiàn)吐司；吐司可以自動切換狀態(tài)、自動消失；移動端的常見交互案例-導(dǎo)航欄吸附、下拉上劃彈回案例：導(dǎo)航欄吸附、下拉上劃彈回頁面滾動時(shí)，導(dǎo)航欄吸附在頂部；在頁面頂部下拉，頁面會彈回；在頁面底部上劃，頁面會彈回；移動端的常見交互案例-步進(jìn)器效果案例：步進(jìn)器效果點(diǎn)擊+號，也可以讓商品數(shù)量的文字+1；點(diǎn)擊–號，可以讓文字-1；最多減到1，此時(shí)減號按鈕禁用；移動端的常見交互案例-抽獎(jiǎng)效果案例：抽獎(jiǎng)效果頁面轉(zhuǎn)盤，指針開始旋轉(zhuǎn)，至少旋轉(zhuǎn)三圈；旋轉(zhuǎn)三圈后，隨機(jī)指到頁面中的某個(gè)模塊；PC端的常見交互案例-首頁內(nèi)容切換案例：內(nèi)容切換使用動態(tài)面板和熱區(qū)實(shí)現(xiàn)內(nèi)容的切換；如果是導(dǎo)航，注意窗口打開方式；PC端的常見交互案例-輪播圖效果案例：輪播圖效果頁面打開時(shí)，自動開始輪播；輪播圖切換時(shí)，下方的頁碼控