智能小程序體驗設計指引

從用戶體驗角度出發，如何更好的設計智能小程序。

移動端體驗趨勢演變

智能小程序體驗優點

過去的十年裏，隨着移動互聯網的發展，移動APP已經滲透到用戶生活的方方面面，而浪潮之下，惟有那些體驗更美觀、更流暢、更豐富的產品，最終留在用戶身邊。相對於受到諸多瀏覽器限制的H5，無疑，智能小程序在美觀、流暢、豐富的體驗上更勝一籌，甚至和APP並駕齊驅。智能小程序在打造更加美觀易用的界面的同時，還能支持流暢的交互動效，並開放了豐富多樣的交互組件和能力，幫助開發者用比APP更低的開發成本，達到了更好的、更端化的體驗。

更美觀，提高界面展示的精緻度

智能小程序提高界面展示的美觀度，與傳統的瀏覽器不一樣，智能小程序性沒有頂部地址欄和底部導航欄，從而使用戶更沉浸聚焦於小程序自己內容。基於智能小程序框架，開發者能夠在更大的展示空間中充分發揮能動性，製做更美觀、更高品質的小程序，正如上圖的智能小程序們，它們精心打造的視覺界面效果，已比肩APP。

更流暢，使用體驗更爲平滑順暢

智能小程序在設計轉場時，捨棄傳統瀏覽器走進度條、生硬切換頁面的方式。改而採用了APP頁面轉場效果：新頁面從右往左，平滑覆蓋；同時，咱們爲橫滑切換體驗引入了緩動的效果，使其更符合物體在真實世界中的運動方式，從而橫滑操控手感更好，使用更加溫馨。

更豐富，提供多種交互加強方式

智能小程序還能提供多種交互加強方式。在手勢交互上，智能小程序支持與APP同等體驗級別的手勢，如滑動，拖拽，縮放等。如視頻播放器組件，能經過滑動手勢，精準地完成進度、亮度和音量調節；圖片查看器組件，用戶能經過手勢縮放圖片、下滑快速返回內容瀏覽；開發者還能夠經過使用搖一搖，震動反饋等能力接口，提高智能小程序中的互動趣味性和使用體驗。

30多種交互組件，仍在不斷拓展

智能小程序的設計組件均已整合相應的交互能力，開發者能夠快速調用默認組件，拼裝基礎頁面，提高開發效率；也能夠根據本身的智能小程序使用場景，定義組件的主題樣式、調整相應參數…目前，智能小程序已有30多種經常使用組件，並支持200多種自定義屬性，這個數字還在不斷上升，歡迎你們在智能小程序官方示例中體驗。

設計六部曲

1.選擇合適的信息架構

準備設計小程序時，第一步永遠不是打開電腦啓動設計軟件。咱們有一個經常掛在你們口頭邊的設計訣竅，叫「442」，也就是「4分溝通，4分思考，2分挽起袖子幹」。所謂磨刀不誤砍柴工，咱們應當全面理解小程序的核心定位、產品功能，知其然才能知其因此然，選擇最合適的信息架構。

當小程序內容維度單一時，使用第一種一字型架構信息，從上到下平鋪直敘，最爲直觀和方便瀏覽；而當須要平行架構不一樣維度的內容時，引入頂部標籤欄，使用第二種T字架構，方便用戶在不一樣內容分類中滑動瀏覽。第三種倒T結構與T字結構有類似之處，只是它使用底部標籤欄，用於架構內容差別性較大的功能模塊。而小程序功能和層級較多時，使用第四種工字架構，用底部標籤欄架構一級導航，頂部標籤欄承載二級內容分類。我在線上找了些案例，你們能夠看到：糖豆廣場舞小程序是典型的1字型結構，小紅書小程序使用了T字型結構，貼吧小程序使用了倒T型，汽車之家小程序使用了工字型的結構。

2.鋪設順暢的交互流程

符合認知，便捷高效，減小操做成本

交互順暢，首要原則是須要尊重用戶的使用習慣：用戶已經在使用APP時，習慣了從哪來，回哪去的操做路徑。咱們不建議在小程序設計中忽然改變這一用戶認知。交互流程的優化應創建在在符合用戶習慣和認知的基礎上，咱們應把精力集中在幫助用戶更高效完成信息的獲取或任務的執行：減小使用障礙，縮短用戶步長，下降操做成本。

300多個能力接口

違章查詢智能小程序就作得挺好，經過選擇器組件，它使用戶免於逐字輸入車型，只需簡單滑動便可完成選擇；更優秀的是，它應用了百度智能識圖能力，掃描行駛證便可自動填寫全部信息，進一步下降了用戶操做成本。除了百度智能識圖能力，咱們還開放了300多個能力接口，好比獲取當前位置、獲取手機網絡狀態等。此外，智能語音識別、語音合成等能力等都也正在陸續建設開放，開發者能夠調用這些能力，從而用更智能的方式、更好地減小用戶的操做成本，使小程序的交互流程更加順暢。

3.創建溫馨的閱讀體驗

• 合理排版，有效傳達信息
• 不一樣場景的排版字號建議
• 功能展示區分主次強弱

閱讀體驗的好壞取決於排版，就也就是小程序組織和處理信息的能力。左圖就是一個反面例子：這篇示例中，全部文字大小都同樣，一眼望去，信息沒有重點。而右圖使用不一樣大小的字號，強調主要內容，弱化次要信息，把頁面間不一樣的信息層次拉開，用戶能夠快速辨認和獲取所需內容，完成了從小程序到用戶的一次信息的有效傳達。

在智能小程序設計文檔中，咱們也給出了排版字號的基礎使用建議，如標題、正文、摘要等，方便開發者爲頁面賦予初步的閱讀排版節奏 ，在這基礎上，能夠結合自身產品特色再加以發揮創新，定義更優的閱讀節奏。

好的閱讀體驗能讓用戶清晰定位並找到所求。在上面買火車票案例中，當用戶完成去程票的購買後，左圖兩個操做按鈕展示都使用藍色大按鈕，同等的展示強度，會致使用戶在選擇過程當中可能會遲疑；而右圖很好地將主次功能操做作了區分強調，優先把注意力聚焦到「購買回程」的按鈕上，從而下降了用戶選擇和思考的成本。

4.使用友好的色彩系統

• 選對組件，保證清晰易讀
• 正確用色，下降理解成本

選用顏色時，首要考慮保證界面清晰展示和信息可讀性。合理的運用色彩對比度關係，是界面內容清晰展示的關鍵。咱們建議開發者選用與當前顏色對比度更大的組件樣式。例如：當顏色飽和度較低時，選用左列黑色樣式的頂部導航欄，而當顏色飽和度較高時，使用右列反白樣式，使信息可讀性更好。

在信息可讀性良好的基礎上，還須要重點注意色彩的表意和對功能引導的影響。好比在設計彈窗按鈕時，若是使用灰色的按鈕文字，用戶可能會覺得按鈕是置灰不可用的，從而讓用戶產生額外的理解決策成本。而使用右圖確定、直接、明瞭的藍色，則能有效明示操做可行性。

5.打造有識別度的LOGO

• 圖形清晰可辨識
• 映射產品特色
• 正確輸出完整展示

LOGO就是小程序遞給用戶的第一張名片，這張名片應該清晰可辨，這是用戶能快速一瞥留下印象的前提。舉個例子，不少開發者會使用本身的小程序名稱做爲LOGO，但像左圖這樣，把長長名稱一昧生硬地嵌套成LOGO的方式並不可取：首先，它的識別度很差，其次因爲留白過多致使欠缺基礎的美感。 當須要使用文字名稱做爲LOGO時，能夠像右圖同樣，經過視覺創意技巧把它轉化爲圖形化設計，從而讓LOGO更構圖飽滿，表達更清晰，利於小程序傳播和記憶強化。

這張LOGO名片應當與界面有所呼應，在用戶打開小程序以前，提早向用戶傳遞小程序的特色，例如：愛說唱小程序logo使用鐳射漸變色整合了一系列高純度、高明度的色彩，豐富多變的顏色層次配合跳躍的塗鴉字體，預示它是一個年輕獨特，富於趣味和娛樂感的時髦的潮範小程序；而右邊AI分診助手的LOGO，使用聽診器與心形結合的創意設計，簡潔剋制的藍白配色，彰顯了它做爲醫療屬性工具小程序的專業和嚴謹。

爲了認真打造的logo能整整齊齊地展示，輸出圖片時須要注意細節：因爲開發者平臺提交logo的文件是正方形圖片，但在百度APP各入口界面中展現小程序時，會把方形圖片的裁切成圓形，所以咱們要特別關注logo裁切後的效果：像左圖，長隆AR動物園在正方形圖片中顯示完整的，可是在圓形的展現容器中就會被裁切和遮擋。因此，最好的輸出方式是和右圖同樣，將LOGO的主要圖形控制中間紅色區域，也就是大約佔正方形圖片的70%左右，這樣能保證logo展示完整，而適當的留白,也讓logo的閱讀更溫馨。

6.運用生動的動效設計

• 適時適度，增長趣味
• 動效製做工具和方法
• 注重設計細節：適配，空態

適時適度的動效，能使流程間的過渡更平滑，並讓小程序富於人情味。當動效用於交互轉場引導時，如左圖，在放鬆舒緩的練習結束後，上移的光暈巧妙地將用戶的注意力順應着其運動的方向轉移，天然地引出結果；當動效用於交互互動加強時，如中間的減壓練習，用戶手指觸碰屏幕的同時，也會觸發「漣漪」動效，增長用戶互動的趣味性。當動效用於流程銜接時，如右圖的愛說唱小程序，在等待歌曲合成完成的過程當中，引入導師點評動效，不但緩解用戶在等待流程中的焦慮心情，還帶用戶一些小驚喜。咱們今天分享兩種經常使用的動效設計方法：第一種，製做交互型動效，使用PRINCIPLE軟件，它能提供準確的動效參數，輔助開發精準實現；第二種，製做展示型動效時，咱們推薦After Effects搭配Lottie插件，輸出Json文件後，開發者直接調用，即可快速精準實現動效。

此外，還有兩個在咱們在平常設計工做也容易經常被忽略的細節經驗： 第一個，隨着全面屏手機的普及，咱們也應該注意它們新增的系統特性。能夠看到左圖，當小程序沒有適配全面屏時，不只影響頁面美觀，底部操做按鈕過於靠近系統操做區，致使沒法正常使用。要解決這個問題很是簡單，只需像右圖同樣，引用全面屏適配參數，保證功能可用性和界面的美觀度。

另外一個細節，不知道你們在使用小程序時是否遇到過，我稱之「困惑的空白」——頁面白茫茫真乾淨，使人不由困惑：「我在哪，我要幹什麼」。空白的出現多是由於網絡信號忽然斷開，或者是用戶的百度APP版本須要升級…… 爲了填補這些空白，咱們總結了一些常見的空態狀況，並放在視覺組件庫供你們使用，但願之後智能小程序使人困惑的空白們會愈來愈少。

設計工具

第一個是智能小程序的設計組件庫，爲方便使用，咱們提供了sketch版本和Photoshop版本，裏面除了設計組件外，還有剛剛提到的，空態等經常使用頁面，幫助智能小程序設計師節省設計成本。 第二個是智能小程序的設計走查表。雖然說是設計走查，但咱們鼓勵團隊各角色都下載收藏一份，在項目流程的各階段中，經常用此進行工做審視，查漏補缺。第三個是智能小程序的官方示例，它展現了智能小程序經常使用交互組件及能力的使用方法，你們能夠經過百度APP搜索「智能小程序官方示例」，或者直接掃碼體驗一下。

不知不覺，本次分享已經接近尾聲，後續想繼續深刻更多設計內容，能夠查閱開放者文檔平臺中《智能小程序設計指南》，裏面整理總結了智能小程序的設計原則，提供了交互和視覺和層面的設計實踐建議，沉澱了智能小程序設計探索故事，也放置了上述設計工具的下載地址。 歡迎你們在開發者論壇中提出設計相關的問題、意見建議，期待聽到大家更多關於智能小程序設計的聲音。

總結

以上就是今天我與你們分享的《智能小程序體驗設計指引》，從智能小程序的美觀、流暢、豐富的體驗優點爲起點，再闡述了智能小程序的設計六部曲，最後爲你們準備了設計工具。但願此次分享對各位開發者有所幫助，謝謝各位。