新闻中心
0

基准文化传播浅析微信小程序界面设计心得

2018-1-10 16:36:41浏览次数:

微信小程序界面设计1.jpg

自2017年1月9日正式对外推出到现在,小程序强势地向我们展示出它惊人的发展速度,也让使用微信的用户更加依赖它的便捷性,所以小程序的推出对于用户和开发者都是一件好事。

 

基准文化传播事业部品牌设计部为不同行业的客户提从过微信小程序界面设计的方案,以此为基础,分享一下小程序界面设计的心得。

 

对于用户来说,小程序有着加载快、体验好、易发现、可传播、可沉淀的特征,尤其是在体验上,能够通过扫码就实现与app相类似的使用体验。对于小程序的开发者来说,小程序的开发又具备易学习、成本低、能力多、迭代快、跨平台等特征,能够大幅度方便开发者。但真正吸引人的小程序,在操作界面设计上就必须做到做到以下几点:

 

第一、友好礼貌在小程序中显得尤为重要。

在进入小程序中,首先为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。使用者在烦躁或者比较忙碌的时候,听到一句舒心的友好问候语会增加使用者对该程序的好感。

 

第二、界面重点的突出。

太多的颜色会使页面杂乱无章,干扰主要信息。

微信小程序界面设计2.jpg

▲上图是12306的网站,颜色用的数量过多,无法得知重点在哪里,想要凸显的信息让使用者无从下手,还带着多余的闪动。如果处处是焦点,那就是没有焦点。用户最主要的目的是买票,扫来扫去地满页面地找,这不是好的用户体验,所以这个界面的设计风格是不合理的!!


微信小程序界面设计3.jpg

▲而这是携程旅游的小程序界面。第一感觉,打开非常流程,第二感受就是,很清爽,可能是刚刚开始的缘故,不排除以后还是满满的广告。

界面设计有主色彩配色,色相构成是统一的配色,由蓝色为色相支配、统一了画面的配色。

相对于其他的小程序界面,携程的界面除了颜色上留下好的印象外,重点十分突出。可以根据自己的选择来点击所需的购买业务,进入购买业务的界面后也简单明了的显示出您想订的航班时间或者酒店的入住时间等等。整个操作和app的操作无太大出别,节省了使用者重新适应操作的时间。

 

第二、界面中图标的设计不可忽视。

微信小程序界面设计4.jpg

▲图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定的提示作用。图标风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

微信小程序界面设计5.jpg

▲同一个界面出现多个图标时,我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡也不相同,例如相同尺寸的正方形会比圆形显得大。因此,我们需要根据图标的体量对其大小做出相应的调整。

做好图标和文字的排版与比例一样可以设计出好看的界面。

 

第二、合理的内容归纳

微信小程序界面设计6.jpg

微信小程序界面设计7.jpg

▲应该善用色块和分割线对页面的内容进行合理的归纳和整理。线条通常用于分割同一类别或拥有相同属性的元素;而色块更多的是用于分割不同类别或者区分不同属性的元 素,以达到层次清晰,归类明确的目的。但是所有的一切都应该服务于信息的准确表达,切忌不可为了视觉上的协调而强行的合并或折叠。

 

第二、尊重 App 用户的使用习惯

微信小程序界面设计8.jpg

▲许多界面的设计师都是由网页设计师转行而来的,但是手机界面有其特殊性。它界面小,过小的按钮无法像鼠标一样能够精确点击。因为有一些网页的设计习惯不应该带到手机软件的设计中来,这也是交互设计师在手机界面的设计过程中需要去把关和注意的。

 

第二、界面的文案要与使用者产生共鸣

微信小程序界面设计9.jpg

▲上下班途中打开网易云音乐或虾米音乐来听歌,若正好听到一首自己中意的歌,想学会它这时你就要去浏览歌词尝试记住,也会出现另一种情况你喜欢的这首歌可能太过于小众了,还没有歌词你就会看到下面的提示:

微信小程序界面设计10.jpg

▲这两个文案,符合我们之前说过的几点,是个合格的文案。那么更加高级能够产生共鸣的文案,会如何去描述这样一个提示文案呢?专业歌词浏览应用 Musixmatch是这样去表达的。

这样的文案不仅更贴切一款和音乐相关的应用,自然且容易使用户产生更进一步情感上的共鸣,提升对应用的认同感。


微信小程序界面设计11.jpg

传统的小小屏幕将人们的注意力锁定,路上都是低着头的“低头族”。但随着物与物之间的联系越来越紧密,我们对日常物品有了新的美学定义。而这种新美学不再局限于普通的屏幕范围,而是向着新的设计界面发展。

生活中,符合用户审美,操作习惯的优秀小程序强势入侵我们的小圈子,您的微信沦陷了吗?

 

文章来源:基准设计机构(www.cnjizhun.com)文化传播事业部

备案号:湘ICP备16001434号