智能小程序給予豐富多彩繁多的交互提高能力：

現階段對外開放的30多種多樣常見部件和200多種多樣插口，遮蓋頁面呈現，交互步驟，多媒體系統提高，AI能力等層面，提高開發人員組裝基本網頁頁面的開發設計高效率和用戶應用感受。

百度搜索智能小程序的200 交互能力中的的一部分展现

體驗設計六部曲

1. 挑选适宜的信息构架

出色體驗設計的**步，並不是開啓電腦啓動制圖軟件，反而是全方位了解所要設計方案的智能小程序的精准定位，作用，爲它挑選**的信息構架。

智能小程序內容層面單一時，應用I字形構架信息，從上向下以偏概全，訪問更爲形象化和便捷；

當必須平行面構架不一樣層面的內容時，引進頂端標識欄，應用T字形構架，便捷用戶在不一樣內容歸類中滾動訪問；

倒T型構造與T字形構造有共同之處，僅僅它應用底端標識欄，用以構架內容差異比較大的程序模塊；

當智能小程序作用和等級較多時，可應用工字形構架，用底端標識欄構架一級導航欄，頂端標識欄安裝二級內容歸類。

智能小程序普遍信息構架實體模型

2. 铺装畅顺的交互步骤

重視用戶的應用習慣性。在用戶達到目標的步驟中，選用“從哪來，回哪去”的導航欄途徑最合乎用戶心理狀態預計和心智模型的交互方法。

大家提議在智能小程序的交互步驟設計方案中也層層遞進，在合乎用戶習慣性和認識的根基上，暢順的交互步驟理應是在協助用戶更高效率進行信息的獲得或目的的實行：降低應用阻礙，減少用戶步幅，減少實際操作成本費。

用戶應用途徑：從哪來，回哪去

減少用戶實際操作成本費。充分考慮移動設備的屏幕大小和應用自然環境，應盡量避免用戶的鍵入交互，而改成實際操作成本費更低的挑選型交互；自然，運用百度搜索智能識圖能力，智能語音系統鑒別等能力，全自動進行信息鍵入，能進一步減少用戶實際操作成本費。

智能小程序大量智能化能力已相繼基本建設對外開放，將來將再次助推開發人員用更智能化的方法，能夠更好地降低用戶的實際操作成本費，使智能小程序的交互步驟更爲暢順。

3. 创建舒服的读书感受

有效排版設計，合理傳遞信息。閱讀文章感受的優劣在于排版設計，這磨練大家開發人員機構和展現信息的能力。注重具體內容，減弱主次信息，把網頁頁面間不一樣的信息層級打開，用戶能夠迅速分辨和獲得所需內容。

內容排版設計正誤實例

智能小程序設計文檔中有不一樣情景信息等級的字體大小應用提議，如文章標題，文章正文，引言等，便捷開發人員掌握閱讀文章排版設計節奏感。在這裏基本上，能夠融合本身商品特性再進行充分發揮自主創新，界定更優質的閱讀文章節奏感。

內容排版設計字體大小應用提議

有高低區別的次序作用。好的讀書感受能讓用戶清楚精准定位並尋找所願。

在下面的圖買火車票實例中，在去程票的選購進行網頁頁面，2個實際操作按鍵呈現都應用深藍色大按鍵，會造成用戶在挑選流程中可能會猶豫；而在次序作用實際操作幹了區別注重，能正確引導用戶專注力優先，減少了用戶挑選和考慮的成本費。

按鍵排版設計正誤實例

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版本必須升級，適度的正確引導提醒，能大大減少用戶與“疑惑的空缺”的相逢機遇。

數據信息出現異常網頁頁面呈現的正誤實例

爲了更好地降低這種空缺，大家彙總了一些常用的空態狀況，並放到視覺效果組件庫供大夥兒應用，期待之後智能小程序令人費解的空缺們會越來越低。

百度搜索智能小程序設計方案組件庫中的空態標志

智能小程序體驗設計專用工具

智能小程序體驗設計手冊：敘述智能小程序的設計原理，給予了交互和視覺效果方向的設計方案實踐活動提議。

百度搜索智能小程序官方網站中的體驗設計手冊

智能小程序設計方案組件庫，適用sketch版本和Photoshop版本。

設計方案走查詢表：適用網上版本，Excel版本和PDF版本，便捷項目管理流程的各環節查缺補漏。

智能小程序設計方案小故事：詳細介紹設計方案六部曲的設計方法在新項目中的實踐活動。

智能小程序官方網實例：立即應用體會百度搜索智能小程序的交互部件和能力。