中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應用服務商
請輸入搜索關鍵詞
知識庫 知識庫

優(yōu)網(wǎng)知識庫

探索行業(yè)前沿,共享知識寶庫

小程序設計規(guī)范及經(jīng)驗分享

發(fā)布日期:2024-12-12 11:44:16 瀏覽次數(shù): 1253 來源:拒絕被招安
随着2018年小程序的迅猛发展,小程序现已为各大企业广泛采用,“触手可及、用完即走”的用户体验备受青睐,随之小程序设计也成为设计师的必备技能,那在进行小程序界面设计时,应该如何快速做设计?过程中又要注意哪些问题呢?

一、小程序设计区域
小程序的“所有页面”右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。




二、Nav Bar设计
1、小程序菜单固定样式
微信提供了深浅两种配色样式,以便更好的融合到各种风格的页面中,需注意保持小程序菜单清晰的辨识度。



2、交互注意事项
如果要在小程序菜单附近放置交互元素,要考虑是否有交互冲突,应尽量避免误触的可能。



建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异,以便区分。



如上图,小红书的自有导航样式个人不推崇,理由如下:
1)样式与官方菜单样式未区分开,容易产生疑惑
2)NavBar栏两端对称在顶部,视觉上显得过于呆板
微信读书既有微信线条外框的DNA, 又区别于官方样式,是不错的综合。以上仅限个人观点,还需用户数据来客观验证。
3、搜索框常见的几种表现形式



三、Toolbar设计
1、小程序设计规范
顶部标签分页栏颜色可自定义,一般会沿用App的设计风格,以保证两个平台的视觉统一性。



2、常见的几种表现形式
四、Tab Bar设计
1、小程序设计规范
微信有提供小程序的底部标签样式,建议标签数量在2-4个适宜。



也可根据产品需要选择或者去掉底部标签栏功能



2、常见的几种表现形式




五、启动页图标
启动页除品牌Logo外,其他元素都由微信统一提供,且不能更改,设计师需要提供2倍和3倍尺寸的Logo即可。



六、加载样式
1、小程序设计规范
全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,建议谨慎使用。



2、常用的加载样式
需告知用户具体加载的位置形状,减轻用户焦虑情绪。



七、没有App如何设计
对于没有开发App来说,可依据官方推出的《微信小程序设计指南》来设计,以确保快速设计出符合规范的小程序。
小程序设计应遵循友好、高效、一致的设计原则,每个页面都应有明确的重点,清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路。
八、推荐几个常用的平台设计网站
1、BAT各平台小程序设计规范网站
1)微信小程序设计指南:
https://developers.weixin.qq.com/miniprogram/design/



2)支付宝小程序设计规范:
https://docs.alipay.com/mini/design



3)百度-智能小程序设计规范:
https://smartprogram.baidu.com/docs/design/overview/introduction/



2、其他常用的设计规范网站:
1)苹果-人机界面指南
详细介绍了ios设计规范,同时还提供了Ui设计资源下载
https://developer.apple.com/design/human-interface-guidelines/



2、安卓-MD设计指南
https://material.io/design/



3、蚂蚁设计
提供移动和Web端的设计组建,还有设计案例和心得的文章供学习
https://design.alipay.com/#ds



4、微信样式库
提供微信内的网页和小程序设计规范
https://weui.io/




優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應服務商

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質服務" 的經(jīng)營理念,誠信務實的服務了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應用服務。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個人信息保護聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
聯(lián)系專屬顧問
聯(lián)系專屬顧問
聯(lián)系專屬顧問
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢

和我們在線交談!