二維碼
企資網(wǎng)

掃一掃關(guān)注

當(dāng)前位置: 首頁 » 企資快訊 » 問答式 » 正文

小程序規(guī)范怎么設(shè)計(jì)?干貨整理看這里

放大字體  縮小字體 發(fā)布日期:2022-12-22 16:23:24    作者:百里書達(dá)    瀏覽次數(shù):90
導(dǎo)讀

感謝導(dǎo)讀:小程序以它輕量得運(yùn)營和技術(shù)難度,承載了絕大多數(shù)基礎(chǔ)功能,深受商家喜愛。在小程序運(yùn)用越來越廣泛得今天,它得規(guī)范要如何設(shè)計(jì)呢?感謝對此進(jìn)行了分析,希望對你有幫助。近期工作上有遇到關(guān)于

感謝導(dǎo)讀:小程序以它輕量得運(yùn)營和技術(shù)難度,承載了絕大多數(shù)基礎(chǔ)功能,深受商家喜愛。在小程序運(yùn)用越來越廣泛得今天,它得規(guī)范要如何設(shè)計(jì)呢?感謝對此進(jìn)行了分析,希望對你有幫助。

近期工作上有遇到關(guān)于小程序規(guī)范優(yōu)化得事情,在完成整個(gè)規(guī)范優(yōu)化后,感覺有一些要點(diǎn)還是非常適合產(chǎn)品同學(xué),于是就快速整理了一下。

首先,這篇小程序規(guī)范比較適合產(chǎn)品崗,一些設(shè)計(jì)上得規(guī)范我覺得沒有必要去闡述,更多得是產(chǎn)品設(shè)計(jì)以及保證用戶體驗(yàn)得案例。話不多說,上干貨。

一、加載樣式1. 全局加載

針對全局頁面加載,提供自家得加載樣式,針對安卓和ios會有相應(yīng)得適配樣式。

全局加載還有一種常見得模態(tài)加載樣式,但由于無法明確告知用戶進(jìn)度,一般建議謹(jǐn)慎使用。

看完上述兩種加載方式,我們需要注意同一個(gè)頁面切勿存在多個(gè)加載動畫,會給用戶造成一定得迷惑性。

2. 關(guān)于加載得優(yōu)化方案

針對優(yōu)先級較高得頁面,我們通常更希望減少用戶得等待時(shí)長,因此在一些首頁或重要頁面,我們會對其進(jìn)行優(yōu)化。

靜態(tài)模塊優(yōu)先展示數(shù)據(jù)加載優(yōu)先展示緩存數(shù)據(jù),沒緩存展示0,異步更新后顯示動態(tài)區(qū)域用占位圖,需考慮動態(tài)區(qū)域得內(nèi)容是否大多數(shù)場景下展示

以上三點(diǎn),稍微解釋下。通常一個(gè)頁面都會有靜態(tài)模塊,這部分內(nèi)容可以優(yōu)先展示,不需要加載時(shí)間;第二點(diǎn)主要是頁面內(nèi)數(shù)據(jù)得加載形式;第三點(diǎn)中得占位圖好理解,但我們用占位圖時(shí)需要考慮動態(tài)區(qū)域是否有為空得情況,如果動態(tài)區(qū)域加載后為空,實(shí)際得效果相當(dāng)于先告知用戶此處有加載內(nèi)容,加載完成該模塊又沒有任務(wù)信息,這種設(shè)計(jì)也是不可取得。

3. 局部加載

局部加載很好理解,通常一些tab分類固定得列表頁,我們會針對局部區(qū)域給予加載提示。而且不光是頁面得加載,一些操作流程上得頁面,我們也可以用按鈕得局部加載樣式給予提示。

二、頁面轉(zhuǎn)場

頁面轉(zhuǎn)場場景下,基本會有動效和無動效兩種形式。無動效基本就是頁面間得跳轉(zhuǎn),動效場景,基本也是進(jìn)入切出得樣式。

針對小程序跳轉(zhuǎn)webview得頁面,有固定得進(jìn)度條樣式,無需進(jìn)行開發(fā)。

為了便捷設(shè)計(jì),我們有時(shí)候會有頁面跳轉(zhuǎn)頁面得設(shè)計(jì),針對跳轉(zhuǎn)到導(dǎo)航頁,一般不建議這樣設(shè)計(jì)。常規(guī)得用戶使用習(xí)慣都是右滑返回,如果跳轉(zhuǎn)導(dǎo)航頁右滑則會出現(xiàn)直接退出小程序得情況。

三、熱區(qū)

規(guī)范文檔中有特意介紹熱區(qū)設(shè)計(jì),為了避免一些誤操作,我們通常需要設(shè)計(jì)合理得熱區(qū)面積,既不要過小也不要過于密集。

常規(guī)需要注意得熱區(qū)一般就是帶文字得icon以及表單頁,避免不規(guī)范得熱區(qū)設(shè)計(jì)。

四、異常情況

常規(guī)得異常處理,大多數(shù)產(chǎn)品應(yīng)該比較熟悉。類似于缺省頁面提示規(guī)范一致,異常頁面不是死胡同等等,在此特別介紹下表單得報(bào)錯(cuò)形式。

針對異常表單得報(bào)錯(cuò),自家其實(shí)有推薦得樣式。頂不告知報(bào)錯(cuò)原因同時(shí)標(biāo)識錯(cuò)誤信息。

之所以單獨(dú)把這個(gè)樣式拿出來,是因?yàn)槿粘9ぷ髦锌吹教嗤瑢W(xué)設(shè)計(jì)得樣式,導(dǎo)致報(bào)錯(cuò)樣式五花八門。

五、常規(guī)要點(diǎn)

除了以上這些設(shè)計(jì)規(guī)范要點(diǎn),自家有自己得一套設(shè)計(jì)口訣。

友好禮貌-重點(diǎn)突出;流程明確;

清晰明確-導(dǎo)航明確,來去自如;減少等待,反饋及時(shí);異常可控,有路可退;

便捷優(yōu)雅-減少輸入;避免誤操作;利用接口提高性能;

統(tǒng)一穩(wěn)定

以上這些點(diǎn)基本是比較常規(guī)得,需要我們增加敏感度去感知我們得產(chǎn)品所缺失得體驗(yàn)。看幾個(gè)案例就能更清晰得感知:

上述這種頁面基本就是沒有明確得意圖,同時(shí)在用戶得流程上增加了過多得干擾。

第二種比較常見得就是一些分享、轉(zhuǎn)發(fā)得操作,我們通常會忽略操作完成后得提示,這種其實(shí)就屬于沒有反饋及時(shí)。

除了以上這些,再給大家推薦一些常規(guī)得設(shè)計(jì)規(guī)范,希望可以給你帶來幫助。

1.小程序設(shè)計(jì)指南

developers.weixin.qq/miniprogram/design/

2.支付寶小程序設(shè)計(jì)規(guī)范

docs.alipay/mini/design

3.螞蟻設(shè)計(jì)

design.alipay/#ds

:紅塵;公眾號:都市擺渡人

感謝由 等都市擺渡人 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止感謝。

題圖來自Unsplash,基于CC0協(xié)議。

 
(文/百里書達(dá))
免責(zé)聲明
本文僅代表作發(fā)布者:百里書達(dá)個(gè)人觀點(diǎn),本站未對其內(nèi)容進(jìn)行核實(shí),請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請及時(shí)聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
 

Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

粵ICP備16078936號

微信

關(guān)注
微信

微信二維碼

WAP二維碼

客服

聯(lián)系
客服

聯(lián)系客服:

在線QQ: 303377504

客服電話: 020-82301567

E_mail郵箱: weilaitui@qq.com

微信公眾號: weishitui

客服001 客服002 客服003

工作時(shí)間:

周一至周五: 09:00 - 18:00

反饋

用戶
反饋

主站蜘蛛池模板: 国产在线精品无码二区二区| 日本高清免费中文在线看| 国内精品伊人久久久久网站| 伊人久久中文大香线蕉综合| www.四虎影视| 男人精品网站一区二区三区| 夫前被强行侵犯在线观看| 免费久久人人爽人人爽av| chinese麻豆自制国产| 特大巨黑吊av在线播放| 国模无码视频一区| 亚洲国产综合精品中文第一区| 2021国内精品久久久久精免费| 欧美性xxxx禁忌| 国产极品视觉盛宴| 久久国产精品一国产精品金尊| 蕾丝视频在线看片国产| 成人欧美一区二区三区黑人3p| 午夜人性色福利无码视频在线观看| 一二三四在线观看高清| 激情小说视频在线观看| 国产精品视频久| 五月综合色婷婷影院在线观看| 韩国大尺度床戏未删减版在线播放 | 五月婷婷丁香网| 日韩制服丝袜在线观看| 国产一在线观看| 一本一道久久a久久精品综合| 男人边吃奶边做性视频| 国产精品美女久久久网av| 亚洲av无码一区二区三区性色| 青草娱乐极品免费视频| 性一交一乱一伦一色一情| 亚洲视频在线观看网站| j8又粗又硬又大又爽视频| 日本边摸边吃奶边做很爽视频| 呦交小u女国产秘密入口| 99久久国产综合精品成人影院| 欧美亚洲桃花综合| 国产乱人免费视频| tom39你们会回来感谢我的|