微信小程序怎么设计图文步骤( 五 )


微信小程序怎么设计图文步骤


微信
避免误操作
因为在手机上我们通过手指触摸屏幕来操控界面 , 手指的点击精确度远不如鼠标 , 因此在设计页面上需点击的控件时 , 需要充分考虑到其热区面积 , 避免由于可点击区域过小或过于密集而造成误操作 。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时 , 往往就容易出现这样的问题 。由于手机屏幕分辨率各不相同 , 因此最适宜点击像素尺寸也不完全一致 , 但换算成物理尺寸后大致是在7mm-9mm之间 。在微信提供的标准组件库中 , 各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配 , 因此再次推荐使用或模仿标准控件尺寸进行设计 。
利用接口提升性能
微信设计中心已推出了一套网页标准控件库 , 包括sketch设计控件库和photoshop设计控件库 , 后续还将完善小程序组件 , 这些控件都已充分考虑了移动端页面的特点 , 能够保证其在移动端页面上的可用性和操作性能;同时微信开发团队也在不断完善和扩充微信小程序接口 , 并提供微信公共库 , 利用这些资源不但能够为用户提供更加快捷的服务 , 而且对页面性能的提高有极大作用 , 无形之中提升了用户体验 。
统一稳定
除了以上所提到的种种原则 , 建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性 , 在不同的页面尽量使用一致的控件和交互方式 。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标 , 减轻页面跳动所造成的不适感 。正因如此 , 小程序可根据需要使用微信提供的标准控件 , 以达到统一稳定的目的 。
视觉规范
为方便设计师进行设计 , 微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源 。
字体规范
微信内字体的使用与所运行的系统字体保持一致 , 常用字号为20 , 18 , 17 , 16 , 14 13 , 11(pt) , 使用场景具体如下:
微信小程序怎么设计图文步骤


微信
字体颜色
微信小程序怎么设计图文步骤


微信
主内容 Black 黑色 , 次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;
微信小程序怎么设计图文步骤


微信
蓝色为链接用色 , 绿色为完成字样色 , 红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%;
微信小程序怎么设计图文步骤


微信
 列表视觉规范
微信小程序怎么设计图文步骤


微信
表单输入视觉规范
微信小程序怎么设计图文步骤


微信
按钮使用原则
列表外按钮上文字标准
按钮高度为44px下使用: 颜色 #000000 / #353535 字号 18pt
可点状态下文字调整透明度为60%
不可点状态下文字调整透明度为30%
微信小程序怎么设计图文步骤


微信
列表外按钮上文字标准
按钮高度为25px下使用: 颜色 #000000 / #353535 字号 14pt
页面线性按钮上文字标准
按钮高度为35px下使用: 颜色 #09BB07 / #353535 字号 16pt
微信小程序怎么设计图文步骤

推荐阅读