小程序和App在設計上存在什么樣的差異呢?
  • 艾特網絡傳媒
  • 日期: 2019-02-15
  • 分類: 艾特新聞
  • 閱讀量: 238


1
)頂部導航欄

App
:可以保留導航欄,也可以去掉,可拓展性強,靈活性高。

小程序:導航欄右側有個無法去除和編輯的膠囊(titlebar),設計時也不能在導航上增加其他功能。所以在 App  轉小程序時,導航欄的功能要換位置或者在放在導航欄下。

實現效果也略欠缺一些,例如微信提供原生和自定義的兩種導航欄:

(一)原生的導航欄支持更改顏色,但字體顏色僅支持黑/白兩種;

(二)雖然自定義的導航欄可以去除原生導航欄,支持圖片通到導航欄上,但是所有頁面都需要重新調整(原先導航欄的高度沒有了,界面元素會跟著上移),而小程序不支持單個頁面修改。

這是目前最麻煩的地方,量級小的應用還可以,量級大的導致工作量大大增加。

同時,自定義導航容易帶來標題無法對齊、頁面機型不同安全區域不同、全局刷新時頁面會被整個下拉等等問題。


建議頁面多、復雜的情況,盡量減少使用自定義導航,也可以使用像馬蜂窩一樣,導航欄背景和圖片背景銜接,效果也不錯。

2)標簽欄

App
:可支持最少2個,最多5個的tab切換,圖標大小以及底部標簽欄高度可自定義。

小程序:也可支持最少2個,最多5個的tab切換,使用原生控件時,要遵從 icon 尺寸81*81px。

使用自定義標簽欄時,可支持加入交互效果,例如提示數量氣泡等,但是體驗相比原生差一點,如果標簽頁是首次進入的頁面,那么標簽欄切換會造成跳動,需要開發做規避。

建議不帶有交互的情況,盡量使用原生控件,就像站酷小程序 一樣。

3
)拖動排序

App
:流暢、體驗佳,例如發朋友圈時拖動照片排序。

小程序:除非必要,否則不建議使用拖動排序。圖片和列表拖動在 Android機型上體驗不夠,會有卡頓的情況。


建議使用上下按鈕替換上下拖動,或者圖片排序使用標記的方式來進行排序。

4)文本省略

App
:可實現日常所需的所有文字、段落效果。

小程序:文本限制行數,加省略號,并且增加全文展開方案實現有問題。無法預估到行尾位置省略。

建議通過換行增加全文展開按鈕,或者控制字數,文本末尾增加全文展開。

5
)原生組件

App
:可以自定義組件庫,對開發設計限制低。

小程序:部分組件是由微信創建的原生組件,有系統相機、輸入框、地圖、文本輸入...等等,原生控件使用有一定的限制,不能在滾動、輪播、選擇器、拖動區域中使用,層級最高無法被覆蓋,可供修改的參數由微信提供。

建議在設計時以原生控件為基礎修改,不要自造控件。同時注意使用場景,以免無法實現。

6
)動畫實現

App
:動畫流暢、無卡頓,想要的基本都能實現。

小程序:動畫能力低于 H5 App ,動畫對性能消耗大,尤其是在 Android 機型上,卡頓有稍顯明顯。當加載代碼包時,當微信認為這個小程序占用過多的內存,會把此小程序強行退出,以保證微信的正常使用。


建議動畫精簡,盡量做減法設計。以上就是關于APP和小程序設計的具體的區別,大家在設計小程序的時候應該注意到他們之間的區別,才能更好的為用戶提供更多的流暢的體驗。