過去10年里，隨著移動互聯網的發展，移動APP已經滲透到用戶生活的方方面面；而浪潮之下，唯有那些體驗更美觀、更流暢、更豐富的產品，最終留在用戶的手機里，留在了用戶的身邊。

創新互聯-專業網站定制、快速模板網站建設、高性價比點軍網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式點軍網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋點軍地區。費用合理售后完善，十載實體公司更值得信賴。

智能小程序的體驗優勢

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

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

智能小程序能提升界面展現的美觀度：

與傳統瀏覽器不同，智能小程序沒有頂部地址欄和底部導航欄，用戶能更沉浸聚焦于小程序本身內容。基于智能小程序框架，開發者可以在更大的展現空間中充分發揮創意能動性，制作更美觀、更高品質的小程序。

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

智能小程序提供豐富多樣的交互增強能力：

目前開放的30多種常用組件和200多種接口，覆蓋界面展現、交互流程、多媒體增強、AI能力等方面，提升開發者拼裝基礎頁面的開發效率和用戶使用體驗。

百度智能小程序的200+交互能力中的的部分展示

體驗設計六部曲 1. 選擇合適的信息架構

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

智能小程序內容維度單一時，使用I字型架構信息，從上到下平鋪直敘，瀏覽最為直觀和方便；

當需要平行架構不同維度的內容時，引入頂部標簽欄，使用T字型架構，方便用戶在不同內容分類中滑動瀏覽；

倒T型結構與T字型結構有相似之處，只是它使用底部標簽欄，用于架構內容差異性較大的功能模塊；

當智能小程序功能和層級較多時，可使用工字型架構，用底部標簽欄架構一級導航，頂部標簽欄承載二級內容分類。

智能小程序常見信息架構模型

2. 鋪設順暢的交互流程

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

我們建議在智能小程序的交互流程設計中也層層遞進，在符合用戶習慣和認知的基礎上，順暢的交互流程應當是在幫助用戶更高效完成信息的獲取或任務的執行：減少使用障礙，縮短用戶步長，降低操作成本。

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

降低用戶操作成本。考慮到移動設備的屏幕大小和使用環境，應盡量減少用戶的輸入交互，而改為操作成本更低的選擇型交互；當然，應用百度智能識圖能力，智能語音識別等能力，自動完成信息輸入，能進一步降低用戶操作成本。

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

3. 建立舒適的閱讀體驗

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

內容排版正誤示例

智能小程序設計文檔中有不同場景信息層級的字號使用建議，如標題、正文、摘要等，方便開發者了解閱讀排版節奏。在這基礎上，可以結合自身產品特點再加以發揮創新，定義更優的閱讀節奏。

內容排版字號使用建議

有強弱區分的主次功能。好的閱讀體驗能讓用戶清晰定位并找到所求。

在下圖購買火車票案例中，在去程票的購買完成頁面，兩個操作按鈕展現都使用藍色大按鈕，會導致用戶在選擇過程中可能會遲疑；而在主次功能操作做了區分強調，能引導用戶注意力優先級，降低了用戶選擇和思考的成本。

按鈕排版正誤示例

4. 使用友好的色彩系統

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

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

頂部導航欄選用建議

用色符合用戶理解認知。色彩的表意會對功能引導有影響。

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

按鈕顏色使用正誤示例

5. 打造有識別度的LOGO

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

以智能小程序學院為例：長文字嵌套后LOGO的識別度不好，其次，留白過多，導致欠缺基礎美感。通過視覺創意技巧把它轉化為圖形化設計，從而讓LOGO更構圖飽滿，表達更清晰，更利于小程序的傳播，辨識和記憶。

LOGO設計的正誤示例

映射產品特點。這張LOGO名片應當與界面有所呼應，在用戶打開小程序之前，提前向用戶傳遞小程序的特點。

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

愛說唱小程序的LOGO映射產品年輕娛樂的特點

AI分診助手的LOGO，使用聽診器與心形結合的創意設計，簡潔克制的藍白配色，彰顯了它作為醫療屬性工具小程序的專業和嚴謹。

AI分診助手小程序的LOGO映射產品科學嚴謹的特點

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

建議輸出時，將LOGO的主要圖形控制中間紅色區域，也就是大約占正方形圖片70%左右，這樣能保證logo展現完整，而適當的留白,也讓logo的閱讀更舒適。

LOGO設計和輸出的正誤示例

6. 運用生動的動效設計

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

（1）“減減鴨”智能小程序在設計交互轉場引導時，在放松舒緩的練習結束后，上移的光暈巧妙地將用戶的注意力順應著其運動的方向轉移，自然地引出結果；

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

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

7. 其他：注重設計細節

全面屏適配。隨著全面屏手機的普及，我們也應該注意它們新增的系統特性。

當小程序沒有適配全面屏時，不僅影響頁面美觀，底部操作按鈕過于靠近系統操作區，導致無法正常使用。

全面屏適配的正誤示例

考慮容錯展現。頁面沒有正確展現內容，可能是因為網絡信號突然斷開，或者是用戶的百度APP版本需要升級，適當的引導提示，能大大減少用戶與“困惑的空白”的相遇機會。

數據異常頁面展現的正誤示例

為了減少這些空白，我們總結了一些常見的空態情況，并放在視覺組件庫供大家使用，希望以后智能小程序令人困惑的空白們會越來越少。

百度智能小程序設計組件庫中的空態圖標

智能小程序體驗設計工具

智能小程序體驗設計指南：描述智能小程序的設計原則，提供了交互和視覺層面的設計實踐建議。

本文題目：智能小程序體驗設計指引
標題URL：http://vcdvsql.cn/article9/dghhooh.html

成都網站建設公司_創新互聯，為您提供網站設計、App開發、響應式網站、用戶體驗、營銷型網站建設、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯