過(guò)去10年里,隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)APP已經(jīng)滲透到用戶生活的方方面面,而浪潮之下,唯有那些體驗(yàn)更美觀、更流暢、更豐富的產(chǎn)品,最終留在用戶的手機(jī)里,留在了用戶的身邊。AAA教育
相對(duì)于受到諸多瀏覽器限制的H5,智能小程序在美觀、流暢、豐富的體驗(yàn)上更勝一籌,甚至可以和APP并駕齊驅(qū)。智能小程序在打造更加美觀易用的界面的同時(shí),還能支持流暢的交互動(dòng)效,并開(kāi)放了豐富多樣的交互組件和能力,幫助開(kāi)發(fā)者用比APP更低的開(kāi)發(fā)成本,達(dá)到了更好的、更端化的體驗(yàn)。
智能小程序比H5更美觀、流暢和豐富
智能小程序能提升界面展現(xiàn)的美觀度:與傳統(tǒng)瀏覽器不同,智能小程序沒(méi)有頂部地址欄和底部導(dǎo)航欄,用戶能更沉浸聚焦于小程序本身內(nèi)容。基于智能小程序框架,開(kāi)發(fā)者可以在更大的展現(xiàn)空間中充分發(fā)揮創(chuàng)意能動(dòng)性,制作更美觀、更高品質(zhì)的小程序。
使用智能小程序能開(kāi)發(fā)更精致的視覺(jué)效果
智能小程序提供豐富多樣的交互增強(qiáng)能力:目前開(kāi)放的30多種常用組件和200多種接口,覆蓋界面展現(xiàn)、交互流程、多媒體增強(qiáng)、AI能力等方面,提升開(kāi)發(fā)者拼裝基礎(chǔ)頁(yè)面的開(kāi)發(fā)效率和用戶使用體驗(yàn)。
01 選擇合適的信息架構(gòu)
優(yōu)秀體驗(yàn)設(shè)計(jì)的第一步,不是打開(kāi)電腦啟動(dòng)設(shè)計(jì)軟件,而是全面理解所要設(shè)計(jì)的智能小程序的定位、功能,為它選擇最合適的信息架構(gòu)。
智能小程序內(nèi)容維度單一時(shí),使用I字型架構(gòu)信息,從上到下平鋪直敘,瀏覽最為直觀和方便;
當(dāng)需要平行架構(gòu)不同維度的內(nèi)容時(shí),引入頂部標(biāo)簽欄,使用T字型架構(gòu),方便用戶在不同內(nèi)容分類中滑動(dòng)瀏覽;
倒T型結(jié)構(gòu)與T字型結(jié)構(gòu)有相似之處,只是它使用底部標(biāo)簽欄,用于架構(gòu)內(nèi)容差異性較大的功能模塊;
當(dāng)智能小程序功能和層次層級(jí)較多時(shí),可使用工字型架構(gòu),用底部標(biāo)簽欄架構(gòu)一級(jí)導(dǎo)航,頂部標(biāo)簽欄承載二級(jí)內(nèi)容分類。
02 鋪設(shè)順暢的交互流程
尊重用戶的使用習(xí)慣。在用戶完成任務(wù)的流程中,采用“從哪來(lái),回哪去”的導(dǎo)航路徑最符合用戶心理預(yù)期和心智模型的交互方式。
我們建議在智能小程序的交互流程設(shè)計(jì)中也層層遞進(jìn),在符合用戶習(xí)慣和認(rèn)知的基礎(chǔ)上,順暢的交互流程應(yīng)當(dāng)是在幫助用戶更高效完成信息的獲取或任務(wù)的執(zhí)行:減少使用障礙,縮短用戶步長(zhǎng),降低操作成本。
用戶使用路徑:從哪來(lái),回哪去
降低用戶操作成本??紤]到移動(dòng)設(shè)備的屏幕大小和使用環(huán)境,應(yīng)盡量減少用戶的輸入交互,而改為操作成本更低的選擇型交互;當(dāng)然,應(yīng)用百度智能識(shí)圖能力,智能語(yǔ)音識(shí)別等能力,自動(dòng)完成信息輸入,能進(jìn)一步降低用戶操作成本。
智能小程序更多智能能力已陸續(xù)建設(shè)開(kāi)放,未來(lái)將繼續(xù)助力開(kāi)發(fā)者用更智能的方式、更好地減少用戶的操作成本,使智能小程序的交互流程更加順暢。
03 建立舒適的閱讀體驗(yàn)
合理排版,有效傳達(dá)信息。閱讀體驗(yàn)的好壞取決于排版,這考驗(yàn)我們開(kāi)發(fā)者組織和呈現(xiàn)信息的能力。強(qiáng)調(diào)主要內(nèi)容,弱化次要信息,把頁(yè)面間不同的信息層次拉開(kāi),用戶可以快速辨認(rèn)和獲取所需內(nèi)容。
智能小程序設(shè)計(jì)文檔中有不同場(chǎng)景信息層級(jí)的字號(hào)使用建議,如標(biāo)題、正文、摘要等,方便開(kāi)發(fā)者了解閱讀排版節(jié)奏。在這基礎(chǔ)上,可以結(jié)合自身產(chǎn)品特點(diǎn)再加以發(fā)揮創(chuàng)新,定義更優(yōu)的閱讀節(jié)奏。
內(nèi)容排版字號(hào)使用建議
有強(qiáng)弱區(qū)分的主次功能。好的閱讀體驗(yàn)?zāi)茏層脩羟逦ㄎ徊⒄业剿蟆?br />
在下圖購(gòu)買火車票案例中,在去程票的購(gòu)買完成頁(yè)面,兩個(gè)操作按鈕展現(xiàn)都使用藍(lán)色大按鈕,會(huì)導(dǎo)致用戶在選擇過(guò)程中可能會(huì)遲疑;而在主次功能操作做了區(qū)分強(qiáng)調(diào),能引導(dǎo)用戶注意力優(yōu)先級(jí),降低了用戶選擇和思考的成本。
按鈕排版正誤示例
保證清晰易讀。合理的運(yùn)用色彩對(duì)比度關(guān)系,是界面內(nèi)容清晰展現(xiàn)的關(guān)鍵。我們建議開(kāi)發(fā)者選用組件時(shí),選擇與當(dāng)前顏色對(duì)比度更大的樣式。
例如:當(dāng)顏色飽和度較低時(shí),選用左列黑色樣式的頂部導(dǎo)航欄,而當(dāng)顏色飽和度較高時(shí),使用右列反白樣式,使信息可讀性更好。
頂部導(dǎo)航欄選用建議
用色符合用戶理解認(rèn)知。色彩的表意會(huì)對(duì)功能引導(dǎo)有影響。
例如,灰色代表著不可用。因此設(shè)置按鈕的顏色時(shí),如果使用灰色的按鈕文字,用戶可能會(huì)認(rèn)為按鈕是置灰不可用的,從而讓用戶產(chǎn)生額外的理解決策成本。而使用右圖肯定、直接、明了的藍(lán)色,則能有效明示操作可行性。
按鈕顏色使用正誤示例
圖形清晰可辨識(shí)。LOGO就是小程序遞給用戶的第一張名片。這張名片應(yīng)該清晰可辨,這是用戶能在快速一瞥間留下印象的前提。很多開(kāi)發(fā)者會(huì)使用自己的小程序名稱作為L(zhǎng)OGO,但要生硬地把長(zhǎng)長(zhǎng)名稱嵌套成LOGO的方式并不可取。
以智能小程序?qū)W院為例:長(zhǎng)文字嵌套后LOGO的識(shí)別度不好,其次,留白過(guò)多,導(dǎo)致欠缺基礎(chǔ)美感。通過(guò)視覺(jué)創(chuàng)意技巧把它轉(zhuǎn)化為圖形化設(shè)計(jì),從而讓LOGO更構(gòu)圖飽滿,表達(dá)更清晰,更利于小程序的傳播,辨識(shí)和記憶。
LOGO設(shè)計(jì)的正誤示例
映射產(chǎn)品特點(diǎn)。這張LOGO名片應(yīng)當(dāng)與界面有所呼應(yīng),在用戶打開(kāi)小程序之前,提前向用戶傳遞小程序的特點(diǎn)。
愛(ài)說(shuō)唱小程序logo使用鐳射漸變整合了一系列高純度、高明度的色彩,豐富多變的顏色層次配合跳躍的涂鴉字體,預(yù)示它是一個(gè)年輕獨(dú)特,富于娛樂(lè)感的時(shí)髦的潮范小程序。
愛(ài)說(shuō)唱小程序的LOGO映射產(chǎn)品年輕娛樂(lè)的特點(diǎn)
AI分診助手的LOGO,使用聽(tīng)診器與心形結(jié)合的創(chuàng)意設(shè)計(jì),簡(jiǎn)潔克制的藍(lán)白配色,彰顯了它作為醫(yī)療屬性工具小程序的專業(yè)和嚴(yán)謹(jǐn)。
AI分診助手小程序的LOGO映射產(chǎn)品科學(xué)嚴(yán)謹(jǐn)?shù)奶攸c(diǎn)
正確輸出完整展現(xiàn)。想讓自己的品牌LOGO能整整齊齊地展現(xiàn),輸出圖片時(shí)需要注意細(xì)節(jié):由于開(kāi)發(fā)者平臺(tái)提交的LOGO是正方形圖片,但在實(shí)際上頁(yè)面展示小程序時(shí),會(huì)把方形圖片的裁切成圓形,因此我們要特別關(guān)注logo裁切后的效果。
建議輸出時(shí),將LOGO的主要圖形控制中間紅色區(qū)域,也就是大約占正方形圖片70%左右,這樣能保證logo展現(xiàn)完整,而適當(dāng)?shù)牧舭?也讓logo的閱讀更舒適。
06 運(yùn)用生動(dòng)的動(dòng)效設(shè)計(jì)
適時(shí)適度的動(dòng)效,能使流程間的流轉(zhuǎn)過(guò)渡更平滑,并讓小程序富于人情味。
“減減鴨”智能小程序在設(shè)計(jì)交互轉(zhuǎn)場(chǎng)引導(dǎo)時(shí),在放松舒緩的練習(xí)結(jié)束后,上移的光暈巧妙地將用戶的注意力順應(yīng)著其運(yùn)動(dòng)的方向轉(zhuǎn)移,自然地引出結(jié)果;
“春節(jié)搖紅包”智能小程序在搖紅包的交互過(guò)程中,使用撒金幣動(dòng)效,增加用戶搖紅包的真實(shí)互動(dòng)感。
而“星動(dòng)”智能小程序則在解鎖動(dòng)效中使用了類似游戲的技能觸發(fā)特效,為整個(gè)活動(dòng)增加了生動(dòng)感和趣味性。
其他:注重設(shè)計(jì)細(xì)節(jié)
全面屏適配。隨著全面屏手機(jī)的普及,我們也應(yīng)該注意它們新增的系統(tǒng)特性。
當(dāng)小程序沒(méi)有適配全面屏?xí)r,不僅影響頁(yè)面美觀,底部操作按鈕過(guò)于靠近系統(tǒng)操作區(qū),導(dǎo)致無(wú)法正常使用。
全面屏適配的正誤示例
考慮容錯(cuò)展現(xiàn)。頁(yè)面沒(méi)有正確展現(xiàn)內(nèi)容,可能是因?yàn)榫W(wǎng)絡(luò)信號(hào)突然斷開(kāi),或者是用戶的百度APP版本需要升級(jí),適當(dāng)?shù)囊龑?dǎo)提示,能大大減少用戶與“困惑的空白”的相遇機(jī)會(huì)。
為了減少這些空白,我們總結(jié)了一些常見(jiàn)的空態(tài)情況,并放在視覺(jué)組件庫(kù)供大家使用,希望以后智能小程序令人困惑的空白們會(huì)越來(lái)越少。這篇文章的內(nèi)容你學(xué)到了嗎,更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc