课程咨询 :18487146383

昆明UI培训

  • 微信小程序的官方设计指南三

    发布:昆明UI培训      来源:优设网      时间:2016-09-27

  • 这篇文章是达内昆明UI培训分享的微信小程序开发指南的最后一个部分:

    从PC时代的物理键盘鼠标到移动端时代手指,虽然输入设备极大精简,但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化,需要开发者在设计过程中充分利用手机特性,让用户便捷优雅的操控界面。

    减少输入

    由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

    减少输入,巧用接口。

    除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要是键盘输入。

    避免误操作

    因为在手机上我们通过手指触摸屏幕来操控界面,手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时,往往就容易出现这样的问题。由于手机屏幕分辨率各不相同,因此最适宜点击像素尺寸也不完全一致,但换算成物理尺寸后大致是在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

上一篇:微信小程序的官方设计指南二

下一篇:写好界面文案的7个小贴士

最新开班日期  |  更多

UID培训免费训练营

UID培训免费训练营

开班日期:7月31

UID培训全日制班

UID培训全日制班

开班日期:7月31

UID培训周末班

UID培训周末班

开班日期:7月31

UID培训高级进阶UED培训

UID培训高级进阶UED培训

开班日期:7月31

  • 网址:http://km.ui.tedu.cn      地址:昆明市五华区五一路如安街如安三号二楼
  • 课程培训电话:18487146383    全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56