表單設(shè)計(jì)的細(xì)節(jié)分析

GUI實(shí)戰(zhàn)班不忘初心！持續(xù)努力平凡變非凡主講老師：琦琦老師姓名：琦琦QQ：3003183864擁有5年設(shè)計(jì)經(jīng)驗(yàn)1年線下教育經(jīng)驗(yàn)網(wǎng)頁設(shè)計(jì)師UI設(shè)計(jì)師

技能web網(wǎng)頁設(shè)計(jì)、電商設(shè)計(jì)、界面設(shè)計(jì)、APP設(shè)計(jì)微信端設(shè)計(jì)課堂須知1：上課時(shí)間：周一至周五晚上20：00-22：00，潭州課堂（PC客戶端、移動(dòng)APP端、網(wǎng)頁版）2：本期主講琦琦老師：3003183864，主要負(fù)責(zé)專業(yè)授課以及問題答疑，作業(yè)收集/點(diǎn)評(píng)、考勤、回訪等:3：作業(yè)統(tǒng)一發(fā)到指定QQ郵箱：3003183864@，作業(yè)格式：日期+課時(shí)+QQ網(wǎng)名4：如果有事不能來上課，需提前向老師請(qǐng)假。5：按時(shí)提交作業(yè)，不能缺交。（看視頻學(xué)習(xí)的同學(xué)也一樣）如由于工作繁忙不能及時(shí)提交作業(yè)，需向老師說明情況。6：百度網(wǎng)盤鏈接：鏈接：/s/1kv3Yfob9LyE4NCnVwI6gJA提取碼：ct53注：該鏈接是老師課后上傳本節(jié)課高清錄播視頻+素材；錄播視頻也可直接在潭州課堂PC客戶端、APP里面進(jìn)行在線觀看！如有疑問私聊老師！課堂紀(jì)律1：準(zhǔn)時(shí)參加課程，不遲到，不早退，不曠課2：上課時(shí)公屏上不允許刷屏、閑聊等任何影響其他同學(xué)學(xué)習(xí)情況發(fā)生注意：任何講師不會(huì)以任何形式讓任何學(xué)員打錢，如果報(bào)名或者升班補(bǔ)款，請(qǐng)認(rèn)準(zhǔn)官方報(bào)名老師及官方報(bào)名賬號(hào)；并且，同學(xué)之間應(yīng)注意交流空間，不要隨意輕信任何跟錢財(cái)相關(guān)的話題，注意自身財(cái)產(chǎn)安全。課程大綱第一節(jié)

產(chǎn)品思維與需求提起方法

第二節(jié)圖標(biāo)設(shè)計(jì)理論與設(shè)計(jì)風(fēng)格第三節(jié)應(yīng)用icon創(chuàng)意思維表現(xiàn)第四節(jié)圖標(biāo)設(shè)計(jì)的品牌基因法則第五節(jié)金剛區(qū)圖標(biāo)風(fēng)格解剖第六節(jié)整體圖標(biāo)輸出點(diǎn)評(píng)第七節(jié)顏色與風(fēng)格規(guī)范擬定第八節(jié)界面設(shè)計(jì)規(guī)范與組件的認(rèn)識(shí)第九節(jié)視覺設(shè)計(jì)必備表現(xiàn)形式第十節(jié)界面設(shè)計(jì)中的排版方式第十一節(jié)整體界面輸出點(diǎn)評(píng)第十二節(jié)團(tuán)隊(duì)合作方式與IOS項(xiàng)目重建第十三節(jié)界面設(shè)計(jì)細(xì)節(jié)樣式表現(xiàn)第十四節(jié)表單設(shè)計(jì)的細(xì)節(jié)分析第十五節(jié)MaterialDesign設(shè)計(jì)規(guī)范第十六節(jié)整體界面輸出點(diǎn)評(píng)第十七節(jié)視覺版本迭代詳解（視覺）第十八節(jié)系統(tǒng)適配與界面標(biāo)注、切圖第十九節(jié)整體界面輸出點(diǎn)評(píng)第十五節(jié)表單設(shè)計(jì)的細(xì)節(jié)分析Designidea什么是表單HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言表單在網(wǎng)頁或app中主要負(fù)責(zé)數(shù)據(jù)采集的功能。表單本身只是一個(gè)數(shù)據(jù)采集的工具，本身不具有屬性，它可以被靈活運(yùn)用于多種功能模塊中，例如用于登錄注冊(cè)模塊的信息采集，評(píng)論的編輯頁，朋友圈的發(fā)布頁等。什么是表單HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言1.盡可能減少不必要的表單項(xiàng)目如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言2.盡可能減少表單中的多余字段如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言3.選擇最簡(jiǎn)單的輸入方式為了讓用戶少動(dòng)，可以將多數(shù)用戶都會(huì)選擇的選項(xiàng)設(shè)置成默認(rèn)項(xiàng)。如：選擇城市時(shí)默認(rèn)當(dāng)前定位城市。如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言4.內(nèi)容展示(1)一頁只做一件事，不要一次性展示全部?jī)?nèi)容（內(nèi)容較多）如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言4.內(nèi)容展示(2)較少頁面跳轉(zhuǎn)知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言5.選擇合理的標(biāo)簽對(duì)齊方式頂對(duì)齊vs左對(duì)齊vs右對(duì)齊。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言6.選擇合適的按鈕位置（1）.右上角文字按鈕優(yōu)勢(shì)：不影響用戶對(duì)表單內(nèi)容的注意力；用戶在完成表單時(shí)，視線會(huì)從下向上轉(zhuǎn)移，有助于用戶作進(jìn)一步檢查。適用于：表單項(xiàng)目少，在一屏內(nèi)完全展示；內(nèi)容復(fù)雜且重要，需要用戶專注于表單本身，認(rèn)證填寫。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言6.選擇合適的按鈕位置（2）.固定在屏幕底部?jī)?yōu)勢(shì)：用戶在任何時(shí)間都可以點(diǎn)擊；強(qiáng)烈吸引用戶的注意力，引導(dǎo)用戶點(diǎn)擊。缺點(diǎn)：可能會(huì)被鍵盤阻擋。適用于：表單內(nèi)容重要性不高，不需要全部完成，也不需要過于仔細(xì)，需要促進(jìn)用戶快速完成提交。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言6.選擇合適的按鈕位置（3）.隨鍵盤移動(dòng)優(yōu)勢(shì)：距離鍵盤位置最近，方便輸入完立即提交；不會(huì)被鍵盤阻擋。適用于：表單內(nèi)容以輸入為主，簡(jiǎn)單不易出錯(cuò)，輸入后需要快速提交。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言6.選擇合適的按鈕位置（4）.置于表單底部?jī)?yōu)勢(shì)：符合用戶從上至下的閱讀方向；可以促進(jìn)用戶完成整個(gè)表單。適用于：表單內(nèi)容少于一頁，按鈕最靠近表單；表單內(nèi)容很長(zhǎng)，需要引導(dǎo)用戶全部填寫。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言7.信息分組表單的設(shè)計(jì)不是簡(jiǎn)單地從上到下的羅列信息。將同類信息進(jìn)行分組，可以更好的喚起用戶記憶。將不同組的信息進(jìn)行打包分類，用卡片形式展現(xiàn)出來，既能給用戶更好的視覺效果，也更能將用戶注意力集中到某一分類上，更好的填寫表單。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言8.輸入前給指導(dǎo)如對(duì)填寫信息有格式、內(nèi)容上的要求，在輸入前就應(yīng)該清晰提示出來，避免事后錯(cuò)誤提示造成用戶反感。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言9.及時(shí)反饋如對(duì)填寫信息有格式、內(nèi)容上的要求，在輸入前就應(yīng)該清晰提示出來，避免事后錯(cuò)誤提示造成用戶反感。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言10.用好鍵盤合理的自動(dòng)彈出輸入法，根據(jù)信息內(nèi)容自動(dòng)匹配鍵盤類型。同時(shí)根據(jù)填寫步驟，合理的定義鍵盤右下角的功能鍵，省去收回鍵盤。根據(jù)不同的操作類型，可以在鍵盤上增加匹配的操作欄，幫助用戶收起鍵盤或進(jìn)行上下項(xiàng)切換。知識(shí)點(diǎn)一：如何提升表單體驗(yàn)HUMANINTERFACEGUIDELINES谷歌MaterialDesign設(shè)計(jì)交互語言11.二次確認(rèn)