智慧小程式體驗設計指引
過去的十年裡，隨著移動網際網路的發展，移動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搜尋“智慧小程式官方示例”，或者直接掃碼體驗一下。
不知不覺，本次分享已經接近尾聲，後續想繼續深入更多設計內容，可以查閱開放者文件平臺中《智慧小程式設計指南》，裡面整理總結了智慧小程式的設計原則，提供了互動和視覺和層面的設計實踐建議，沉澱了智慧小程式設計探索故事，也放置了上述設計工具的下載地址。 歡迎大家在開發者論壇中提出設計相關的問題、意見建議，期待聽到你們更多關於智慧小程式設計的聲音。
總結
以上就是今天我與大家分享的《智慧小程式體驗設計指引》，從智慧小程式的美觀、流暢、豐富的體驗優勢為起點，再闡述了智慧小程式的設計六部曲，最後為大家準備了設計工具。希望這次分享對各位開發者有所幫助，謝謝各位。