联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

微信小程序商城ui界面设计包括哪些方面?

Time: 2021-08-04

我们都知道,微信的功能是十分强大的,不仅可以通话联系,还可以收付款,而且微信上还有很多小程序。那在设计小程序界面时,大家知道微信小程序商城ui界面设计包括哪些方面吗?一起跟faceui小编来了解一下吧。

  什么是ui界面设计

  UI界面设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。

微信小程序商城ui界面设计

  微信小程序商城ui界面设计(图片来自网络)


  好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。国内大部分UI工作者都是从事这个行业,是了解软件产品、致力于提高软件用户体验的产品外形设计师。

  这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背景,例如工业外形设计,装潢设计,信息多媒体设计等。

  微信小程序商城ui界面设计

  1.字号大小

  一个好的小程序UI界面,首先映入眼帘的就是页面字号大小,下面是眼睛距离与常用的字号大小关系:

  视距近:30cm以内

  字号使用:9pt(点)--12pt(点)

  网页中会稍微大些为12pt/14pt,在应用响应式网页布局的情况下在手机里显示会按照百分比进行放大的,手机APP(2倍手机)里正文字号大小为20px/24px。

  视距中:300cm以内

  字号使用:2cm以上,当然是越大越能看清楚但需要符合版式美感。建议童鞋们自己带个格尺到显示中找寻需要制作的物品进行实际测量看在3米以内是否能够看清楚以及是否得当。

  视距远:300cm以外

  字号使用:正文字比较少根据版式需要一定设计的非常大。

  2.色彩

  设计中讲究形与色的组合,具体用什么主色调,要根据小程序的类型来选择,比如美妆、女装类可用比较温暖的色调;数码、电子类可用冷硬的蓝、黑色调。但千万不可太多颜色混搭在一起,用色过多会导致访客眼花缭乱,页面没有主次之分。

  3.布局排版

  布局,就是小程序内各版块、图标、文字的排列。通过合理的布局,我们能让访客分清主次,抓住重点。比如哪个商品是小程序中的“主角”,那就把它放在显眼的位置;哪些比较次要,那就放在底部。

  布局设计尤其要遵循CRAP原则:

  C--Contrast(对比),通过图标大小和位置等的对比,区分出谁是主角,谁是配角,谁是群演。

  R--Repetition(重复),一个级别的信息尽量使用一种设计来保持用户的认知,避免用户认为是另一种信息分类。

  A--Alignment(对齐),你的图标、海报、列表等应该对齐,不可随意摆放、

  P--Proximity(亲密性),有关系的两个图标尽量放在一起,比如衣服,你的“短袖”、“长袖”分类最好相邻,这样的排列会更具逻辑性。

微信小程序商城ui界面设计

  微信小程序商城ui界面设计(图片来自网络)


  运用网格系统排版可以让画面更加统一,在平衡的基础上可以变换层次感,让画面更加有条理,让内容更易读,体验度更强

  平面:尊重常用分栏进行划分,尺寸可以有小数点但需要达到均衡感。

  网页:为了符合程序员开发代码,一般按2的倍数进行栏与间距的划分,不要出现奇数与小数点,小数点不好书写,奇数不好对齐。

  看完了上文faceui小编的介绍,大家应该对什么是ui界面设计以及微信小程序商城ui界面设计包括哪些方面的相关内容有所了解了吧。微信上有很多商场小程序,使用十分方便,用户可以随时点进去选购商品。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开