UI智能小程序體驗設(shè)計指引

　　過去10年里，隨著移動互聯(lián)網(wǎng)的發(fā)展，移動APP已經(jīng)滲透到用戶生活的方方面面，而浪潮之下，唯有那些體驗更美觀、更流暢、更豐富的產(chǎn)品，最終留在用戶的手機(jī)里，留在了用戶的身邊。AAA教育
 

　　智能小程序的體驗優(yōu)勢
 

　　相對于受到諸多瀏覽器限制的H5，智能小程序在美觀、流暢、豐富的體驗上更勝一籌，甚至可以和APP并駕齊驅(qū)。智能小程序在打造更加美觀易用的界面的同時，還能支持流暢的交互動效，并開放了豐富多樣的交互組件和能力，幫助開發(fā)者用比APP更低的開發(fā)成本，達(dá)到了更好的、更端化的體驗。
 

　　智能小程序比H5更美觀、流暢和豐富
 

　　智能小程序能提升界面展現(xiàn)的美觀度：與傳統(tǒng)瀏覽器不同，智能小程序沒有頂部地址欄和底部導(dǎo)航欄，用戶能更沉浸聚焦于小程序本身內(nèi)容?；谥悄苄〕绦蚩蚣?，開發(fā)者可以在更大的展現(xiàn)空間中充分發(fā)揮創(chuàng)意能動性，制作更美觀、更高品質(zhì)的小程序。
 

　　使用智能小程序能開發(fā)更精致的視覺效果
 

　　智能小程序提供豐富多樣的交互增強能力：目前開放的30多種常用組件和200多種接口，覆蓋界面展現(xiàn)、交互流程、多媒體增強、AI能力等方面，提升開發(fā)者拼裝基礎(chǔ)頁面的開發(fā)效率和用戶使用體驗。
 

　　體驗設(shè)計六部曲
 

　　01 選擇合適的信息架構(gòu)
 

　　優(yōu)秀體驗設(shè)計的第一步，不是打開電腦啟動設(shè)計軟件，而是全面理解所要設(shè)計的智能小程序的定位、功能，為它選擇最合適的信息架構(gòu)。
 

　　智能小程序內(nèi)容維度單一時，使用I字型架構(gòu)信息，從上到下平鋪直敘，瀏覽最為直觀和方便;
 

　　當(dāng)需要平行架構(gòu)不同維度的內(nèi)容時，引入頂部標(biāo)簽欄，使用T字型架構(gòu)，方便用戶在不同內(nèi)容分類中滑動瀏覽;
 

　　倒T型結(jié)構(gòu)與T字型結(jié)構(gòu)有相似之處，只是它使用底部標(biāo)簽欄，用于架構(gòu)內(nèi)容差異性較大的功能模塊;
 

　　當(dāng)智能小程序功能和層次層級較多時，可使用工字型架構(gòu)，用底部標(biāo)簽欄架構(gòu)一級導(dǎo)航，頂部標(biāo)簽欄承載二級內(nèi)容分類。
 

　　智能小程序常見信息架構(gòu)模型
 

　　02 鋪設(shè)順暢的交互流程
 

　　尊重用戶的使用習(xí)慣。在用戶完成任務(wù)的流程中，采用“從哪來，回哪去”的導(dǎo)航路徑最符合用戶心理預(yù)期和心智模型的交互方式。
 

　　我們建議在智能小程序的交互流程設(shè)計中也層層遞進(jìn)，在符合用戶習(xí)慣和認(rèn)知的基礎(chǔ)上，順暢的交互流程應(yīng)當(dāng)是在幫助用戶更高效完成信息的獲取或任務(wù)的執(zhí)行：減少使用障礙，縮短用戶步長，降低操作成本。
 

　　用戶使用路徑：從哪來，回哪去
 

　　降低用戶操作成本?？紤]到移動設(shè)備的屏幕大小和使用環(huán)境，應(yīng)盡量減少用戶的輸入交互，而改為操作成本更低的選擇型交互;當(dāng)然，應(yīng)用百度智能識圖能力，智能語音識別等能力，自動完成信息輸入，能進(jìn)一步降低用戶操作成本。
 

　　智能小程序更多智能能力已陸續(xù)建設(shè)開放，未來將繼續(xù)助力開發(fā)者用更智能的方式、更好地減少用戶的操作成本，使智能小程序的交互流程更加順暢。
 

　　03 建立舒適的閱讀體驗
 

　　合理排版，有效傳達(dá)信息。閱讀體驗的好壞取決于排版，這考驗我們開發(fā)者組織和呈現(xiàn)信息的能力。強調(diào)主要內(nèi)容，弱化次要信息，把頁面間不同的信息層次拉開，用戶可以快速辨認(rèn)和獲取所需內(nèi)容。
 

　　智能小程序設(shè)計文檔中有不同場景信息層級的字號使用建議，如標(biāo)題、正文、摘要等，方便開發(fā)者了解閱讀排版節(jié)奏。在這基礎(chǔ)上，可以結(jié)合自身產(chǎn)品特點再加以發(fā)揮創(chuàng)新，定義更優(yōu)的閱讀節(jié)奏。
 

　　內(nèi)容排版字號使用建議
 

　　有強弱區(qū)分的主次功能。好的閱讀體驗?zāi)茏層脩羟逦ㄎ徊⒄业剿蟆?br />  

　　在下圖購買火車票案例中，在去程票的購買完成頁面，兩個操作按鈕展現(xiàn)都使用藍(lán)色大按鈕，會導(dǎo)致用戶在選擇過程中可能會遲疑;而在主次功能操作做了區(qū)分強調(diào)，能引導(dǎo)用戶注意力優(yōu)先級，降低了用戶選擇和思考的成本。
 

　　按鈕排版正誤示例
 

　　04 使用友好的色彩系統(tǒng)
 

　　保證清晰易讀。合理的運用色彩對比度關(guān)系，是界面內(nèi)容清晰展現(xiàn)的關(guān)鍵。我們建議開發(fā)者選用組件時，選擇與當(dāng)前顏色對比度更大的樣式。
 

　　例如：當(dāng)顏色飽和度較低時，選用左列黑色樣式的頂部導(dǎo)航欄，而當(dāng)顏色飽和度較高時，使用右列反白樣式，使信息可讀性更好。
 

　　頂部導(dǎo)航欄選用建議
 

　　用色符合用戶理解認(rèn)知。色彩的表意會對功能引導(dǎo)有影響。
 

　　例如，灰色代表著不可用。因此設(shè)置按鈕的顏色時，如果使用灰色的按鈕文字，用戶可能會認(rèn)為按鈕是置灰不可用的，從而讓用戶產(chǎn)生額外的理解決策成本。而使用右圖肯定、直接、明了的藍(lán)色，則能有效明示操作可行性。
 

　　按鈕顏色使用正誤示例
 

　　05 打造有識別度的LOGO
 

　　圖形清晰可辨識。LOGO就是小程序遞給用戶的第一張名片。這張名片應(yīng)該清晰可辨，這是用戶能在快速一瞥間留下印象的前提。很多開發(fā)者會使用自己的小程序名稱作為LOGO，但要生硬地把長長名稱嵌套成LOGO的方式并不可取。
 

　　以智能小程序?qū)W院為例：長文字嵌套后LOGO的識別度不好，其次，留白過多，導(dǎo)致欠缺基礎(chǔ)美感。通過視覺創(chuàng)意技巧把它轉(zhuǎn)化為圖形化設(shè)計，從而讓LOGO更構(gòu)圖飽滿，表達(dá)更清晰，更利于小程序的傳播，辨識和記憶。
 

　　LOGO設(shè)計的正誤示例
 

　　映射產(chǎn)品特點。這張LOGO名片應(yīng)當(dāng)與界面有所呼應(yīng)，在用戶打開小程序之前，提前向用戶傳遞小程序的特點。
 

　　愛說唱小程序logo使用鐳射漸變整合了一系列高純度、高明度的色彩，豐富多變的顏色層次配合跳躍的涂鴉字體，預(yù)示它是一個年輕獨特，富于娛樂感的時髦的潮范小程序。
 

　　愛說唱小程序的LOGO映射產(chǎn)品年輕娛樂的特點
 

　　AI分診助手的LOGO，使用聽診器與心形結(jié)合的創(chuàng)意設(shè)計，簡潔克制的藍(lán)白配色，彰顯了它作為醫(yī)療屬性工具小程序的專業(yè)和嚴(yán)謹(jǐn)。
 

　　AI分診助手小程序的LOGO映射產(chǎn)品科學(xué)嚴(yán)謹(jǐn)?shù)奶攸c
 

　　正確輸出完整展現(xiàn)。想讓自己的品牌LOGO能整整齊齊地展現(xiàn)，輸出圖片時需要注意細(xì)節(jié)：由于開發(fā)者平臺提交的LOGO是正方形圖片，但在實際上頁面展示小程序時，會把方形圖片的裁切成圓形，因此我們要特別關(guān)注logo裁切后的效果。
 

　　建議輸出時，將LOGO的主要圖形控制中間紅色區(qū)域，也就是大約占正方形圖片70%左右，這樣能保證logo展現(xiàn)完整，而適當(dāng)?shù)牧舭?也讓logo的閱讀更舒適。
 

　　LOGO設(shè)計和輸出的正誤示例
 

　　06 運用生動的動效設(shè)計
 

　　適時適度的動效，能使流程間的流轉(zhuǎn)過渡更平滑，并讓小程序富于人情味。
 

　　“減減鴨”智能小程序在設(shè)計交互轉(zhuǎn)場引導(dǎo)時，在放松舒緩的練習(xí)結(jié)束后，上移的光暈巧妙地將用戶的注意力順應(yīng)著其運動的方向轉(zhuǎn)移，自然地引出結(jié)果;
 

　　“春節(jié)搖紅包”智能小程序在搖紅包的交互過程中，使用撒金幣動效，增加用戶搖紅包的真實互動感。
 

　　而“星動”智能小程序則在解鎖動效中使用了類似游戲的技能觸發(fā)特效，為整個活動增加了生動感和趣味性。
 

　　其他：注重設(shè)計細(xì)節(jié)
 

　　全面屏適配。隨著全面屏手機(jī)的普及，我們也應(yīng)該注意它們新增的系統(tǒng)特性。
 

　　當(dāng)小程序沒有適配全面屏?xí)r，不僅影響頁面美觀，底部操作按鈕過于靠近系統(tǒng)操作區(qū)，導(dǎo)致無法正常使用。
 

　　全面屏適配的正誤示例
 

　　考慮容錯展現(xiàn)。頁面沒有正確展現(xiàn)內(nèi)容，可能是因為網(wǎng)絡(luò)信號突然斷開，或者是用戶的百度APP版本需要升級，適當(dāng)?shù)囊龑?dǎo)提示，能大大減少用戶與“困惑的空白”的相遇機(jī)會。
 

　　為了減少這些空白，我們總結(jié)了一些常見的空態(tài)情況，并放在視覺組件庫供大家使用，希望以后智能小程序令人困惑的空白們會越來越少。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請持續(xù)關(guān)注AAA教育~