当前位置:北京微信小程序开发 > 最新动态
在传统微信小程序和手机微信小程序中的设计视觉元素有什么不同呢?
最新动态 2021/05/04

微信小程序是用来给浏览者看信息的,是向受众提供某种信息或服务,因此北京微信小程序设计首要考虑的就是用户的需求。一个成熟、专业的微信小程序,需要设计师对微信小程序的风格、功能模块、内容、交互等进行整体策划。北京微信小程序开发详细介绍下传统微信小程序和手机微信小程序中的设计视觉元素有什么不同呢?

1、风格

一个微信小程序是根据这个企业的形象、性质、内容、功能等因素,甚至对浏览者的预判综合考虑得出的设计风格。Window 8的风格是一个单色块,配上简洁的文字或图标,去掉各种投影、水晶效果等特效,凸显以内容为主。这种以内容为主的简洁化设计风格越来越流行。但是不见得所有的用户或者所有的使用者都适用这种风格。不同性质的微信小程序有不同的需求,科技微信小程序、艺术微信小程序、音乐微信小程序、商业微信小程序等,都会有一些不同的个性。设计师不能因为某种风格流行,或喜欢某种风格,就想尽办法在当前的设计项目中体现出来,最后这种风格的视觉效果往往有点不伦不类。

2、版式

微信小程序的版式设计是受内容限制的。一个微信小程序的内容不是单一的,越是综合类微信小程序,内容分类越是繁杂,那么对于繁杂的内容来讲,哪类内容放在首页?哪类内容放在次要的页面?甚至哪些内容放在首页的首屏?这些内容的分布排列对北京微信小程序设计起着重要的作用。绘制这些内容逻辑分布的过程就是绘制线框图。线框图不仅仅是用来给设计师进一步美化的依据,也是前端开发人员书写浏览器程序的时候参考。一个懂北京微信小程序设计的人,从线框图就能看出这个微信小程序的根本。一个页面的板式设计需要“从内而外的矩形”。从前端技术的角度来分析,北京微信小程序设计其实就是在一个大的矩形(显示器)上用HTML语言切割成各种小矩形。每一个矩形里面切割更精确的矩形用来实现各个内容位置的摆放。从设计的角度来分析,栅格系统设计、栏的概念都是方块的设计,就像做拼图一样,用各种方块按着需求来进行各种大小、位置的排列组合。哪怕是圆形的图片,其根本也是一个矩形,只是圆周围是透明的而已。所以一个微信小程序的基础版式分布,就是规划各种矩形的排列组合。

3、字体

微信小程序的进一步美化过程,其实就是在线框图的布局基础上,用颜色、字体、图片等手段进行画面的装饰过程。一个出色的微信小程序一定有着出色的字体设计。出色的北京微信小程序设计师会用单纯的字体样式排列出非常适于阅读,又能体现出微信小程序风格的视觉效果。微信小程序字体的选择不能随设计师喜好随意运用,要考虑到当不同的用户打开该页面的时候,如果浏览者计算机上没有安装这种字体,用户浏览器默认的字体是否能很好地显示该内容?所以,微信小程序字体都会选择系统必然会有的常规字体。但像按钮、栏目标题等特殊部分,由于不会经常变动更新,可以选择比较特别的字体,但需要转换成图片,前端开发人员以图片的形式来运用这个部分。一个微信小程序页面如果选择宋体字,字体大小不宜小于12像素,因为宋体字中横过于细,太小会影响字体的显示。因为不少字体只专门处理了常用的几个偶数字号,所以为了便于各个浏览器兼容,显示效果一致,微信小程序页面字体大小的选择一般是偶数,例如12、14、16、18像素等。13、15像素等大小的文字,有些浏览器会默认为靠近的偶数字号显示。

4、图片

一个优质的图片能给产品或企业带来好的印象。现在很多微信小程序首屏都是应用越来越大的图片,并且通过手动或自动切换图片显示。这些图片可能是一个优秀的摄影作品,也可能是一个优秀的平面广告等,这些图片都是精心设计过的,拥有良好的品质。为了让用户有更好的微信小程序体验,很多图片都是以小图当预览图,点击之后才显示相应的完整图片,这样的好处是能在不确定用户需要哪个图片的时候尽量快速地让用户看到,有利于微信小程序的优化体验和增加微信小程序浏览速度,有些微信小程序图片提供放大镜效果,当鼠标移动进入到图片的区域时会展示相应的局部大图,这种效果一般在淘宝等购物微信小程序较多,便于用户查看商品细节。另外,现在很多以图片为主的微信小程序都以“瀑布流”的方式展示图片,这种效果在HTML5和Javascript技术普及后越来越多。例如微信搜索引擎、站酷首页都是如此。

5、交互性

一致性的交互方式可以让用户更好理解整个微信小程序的操作,从而提升浏览效率,不能到处都是不同的交互方式,会带给人凌乱的感觉。交互需要提供反馈。例如鼠标移动到一个新闻标题链接按钮的时候,需要一定的反应会带来良好的操作体验。界面要始终保持和用户的沟通。又如一个注册页面,现在常见的交互方式是运用AJAX技术,当输入完用户名的时候会自动和数据库中的信息进行比对,检测是否有人注册,然后在用户输入框旁边直观地显示,这带给人以非常好的交互体验。微信小程序交互设计还要方便使用。实现目标功能的最少操作数、鼠标最短距离移动原则等。交互性的最根本的目的其实就是为了更好地让用户愉悦的体验微信小程序。所以一切设计原则都是以此为标准,从技术和设计的角度去调整。

在传统微信小程序和手机微信小程序中的设计视觉元素有什么不同呢?:http://www.wangyunxing.com/news23750.shtml
北京微信小程序开发www.wangyunxing.com)领先品牌!
微信小程序开发咨询
微信小程序咨询热线 13520390899
请输入正确的手机号
稍后片刻,我们会和您取得联系
微信小程序开发客户中心

售前咨询热线

13520390899

联系我们

领先的微信小程序开发/微信小程序制作/微信公众号开发服务商!

版权所有 © 网云星 All Rights Reserved 总部地址:北京市顺义区

备案号: 京ICP备16050073号-3