199-0592-6370 0592-5785590
当前位置: 首页 /互联网百科 /如何设计小程序好看又实用?来看这份保姆级UI设计千字规范!

互联网百科

行业资讯

企业动态

如何设计小程序好看又实用?来看这份保姆级UI设计千字规范!

来源:原创时间:2020-08-26 15:33:37

摘要:

微信小程序工具+UI设计素材+行业解决方案。可视化的小程序制作工具+丰富的UI设计素材+建设性的行业解决方案,这整一个小程序的行业生态体系也是一个方向。

一、小程序UI规范的官方设计规则只支持选中一个链接时生效

这是官网上的内容,以下是我总结是对小程序UI规范一些重点及解释。

1.友好礼貌

做小程序时,我们要做用户体验友好型的设计。可能以往我们会去追求张扬独特的UI界面,因为它们特别扎眼,仿佛在众多同类中脱颖而出。但是在轻量的小程序UI设计体系中,我们需要的往往是简单的,易读的页面去引导客户操作。我们设计的的小程序UI需要做一个近人的朋友而不是遥远的花瓶。

而以下的页面很简单,甚至可能会把它们误认为是上个世纪还未迭代的页面,但是这并不妨碍它们能造成每日数百万的访问量!

德拉吉报告(新闻聚合网站http://www.drudgereport.com/

用户体验友好型小程序开发案例

2.重点突出

每个小程序的UI页面应该有要突出的重点,如果百花齐放可能会让用户在页面中迷失,难以聚焦,全是重点等于没有重点,能隐藏的功能可以尽量隐藏。

小程序重点突出.jpg

3.减少等待,反馈及时

小程序UI页面的过长时间的等待会引起用户的不良情绪,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪,以免让用户产生死机的错觉。预加载模块和结果反馈的设置是减少用户焦虑的重要因素。

小程序加载、反馈图.jpg

二、视觉规范

1.整体框架

以iphoneX为例,状态栏高度:44px

导航栏高度:44px,文字大小:18px

标签栏高度:49px,文字11px,icon:48*48px

home条高度:34px,页边距15px(一般为偶数 )

2.文字规范

小程序UI界面中一般用思源黑体,因为他是免费商用,一般不会侵权,而且有粗,中,细等等选择。

正文/普通文字            思源黑体 Normal

标题                          思源黑体 Medium

特殊文字                    思源黑体 Bold

辅助文字/最小文字     11px (字号不要太小,一般移动端最小字号为12px)

描述文字                    12px

正文文字                    13/14px

标题                           15/16/17px

3.颜色规范

 

UI颜色规范图.jpg

4.图标大小要统一

可以放在一个24*24的框内衡量,做的太大可能会缺少精致感。如果图标是第一个图标是线的,那应该整体风格的图标都是线的,如果是 面、线面结合的应都如是统一。在UI小程序中包括圆角、风格类的也要整体。

5.亲密性原则

在小程序UI界面中的每行的文字或块面之间不要若即若离,要能够让用户一眼望去,明白UI界面中哪些内容之间有联系,这样能减少负担,提升用户体验,逐渐形成UI设计规范。

以上规范只是建议,并不是绝对的铁律,可根据实际需求灵活改变。

制图软件推荐:Adobe XD or Skeach

图片搜集软件推荐:Eagle

三、切图的规范

在导出的时候,有一倍二倍三倍的设置。设计稿用二倍图做的(750*1334),只需给一倍的切片;如果是按一倍图设计的(375*667),只要给二倍的切图。不用每个机型都去适配,这样不管是什么屏的手机适配都方便。

推荐软件:蓝湖、像素大厨、Cutterman

四、弹窗不遮导航栏和标签栏

小程序中标签栏和导航栏是信息层级最高的,即使弹窗也不能遮住它们,不然会影响用户体验,滞后操作。这是小程序UI界面规范中的重要原则之一。

小程序弹窗图.jpg

五、统一稳定

APP内的交互流程及UI界面,  到了小程序上流程也要不变。因为过大的变动会增加用户的学习成本。公司内部也可以做个小程序界面常用的控件库,便于设计师的运用。小程序也可用微信提供的标准控件,也可达到统一稳定。以上就是关于小程序UI界面规范的全部内容。

微信小程序工具+UI设计素材+行业解决方案

相关推荐
龙岩官网建设
福建龙岩地质公园官网建设_龙岩网站案例分享
小程序开发的成本
小程序开发的成本大概是多少?
搜索引擎工作原理流程图
一文读懂搜索引擎是如何工作的
  • 中远方舟小程序二维码
    中远方舟微信客服 微信客服
  • 中远方舟小程序二维码
    中远方舟公众号二维码 公司公众号
  • 站点顶部定位