小程序UI设计（2）-符合视觉规范-字体规范

最新推荐文章于 2023-11-29 17:06:06 发布

SYY18012524183

最新推荐文章于 2023-11-29 17:06:06 发布

阅读量1k

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/myloveblogs/p/6169536.html

版权

下图是微信小程序官方要求字体规范

根据此要求小程序设计工具定制了符合规范的组件。如下图

工具使用时，将左侧组件拖拽到设计区域即可。字体大小和颜色都是按照规范设置的。在使用时根据微信要求在不同位置摆放即可。
以下截图是text组件使用范例

转载于:https://www.cnblogs.com/myloveblogs/p/6169536.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SYY18012524183

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小程序字体规范、颜色参考（单位/px）

little_White_why的博客

10-14

1479

小程序字体颜色参考

对于设计字体大小规范

m0_59910554的博客

12-07

579

面对于设置页面没有规范，界面样式不统一；导致页面交互性差；

参与评论您还未登录，请先登录后发表或查看评论

小程序自定义字体

Hello

01-07

3981

一.制作小程序能够引用的字体文件：打开网站 https://transfonter.org/ Add fonts 添加字体文件选中base64 encode 选中ttf Convert 转换下载转换后的字体文件压缩包二、解压刚刚下载的字体文件压缩包，复制***.css文件内容到小程序中的***.wxss文件（文件名称位置自定义）三、在引用改字体的wxss文件中导入字体文件@impo...

微信小程序UI设计规范及文档模版

HIES

06-30

2万+

UI设计者整理一下，为方便UI设计师和交互设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便我们的移动端安卓和iOS开发者调用的资源。还没有UI设计基础的同学，可以暂时不用学习此规范，等学完UI设计基本规范后再学习小程序的设计规范。基础样式库预览地址：https://weui.io 下面附：规范文档PSD和sketch源文件下载。 小程序...

微信小程序字体样式font

m0_72168336的博客

11-29

2567

微信小程序字体常用样式

电脑配件商城小程序computer-accesories-mobile-apps UI设计素材XD格式Skecth和PSD下载

05-17

这些素材可以帮助设计师快速创建符合小程序规范的界面，提升用户体验。 6. H5设计素材：H5（HTML5）是网页制作的新标准，其设计素材通常包括互动元素和动画，能够增强网页的吸引力。这些素材可用于创建响应式的网页...

微信小程序ui库合集-pdf

03-25

微信小程序UI库合集是一个非常实用的资源集合，它提供了众多开发者用于构建微信小程序界面的UI组件库。这些库不仅提供了丰富的预设样式和组件，还可以帮助开发者快速、高效地打造出美观且一致的用户界面。以下是一些...

超强干货|APP规范实例-详细的UI设计规范

02-26

本篇文档将深入探讨关于APP UI设计规范的核心内容，包括界面布局、颜色使用、文字排版、按钮设计、图标风格、图片应用、列表构建、控件设计以及弹出浮层的处理方法。界面布局是APP设计中最为基础和重要的部分，它...

滴滴乘客端UI设计规范.pdf

05-15

UI设计规范是指为应用程序设计的一系列视觉和交互规范，这些规范确保用户在使用产品时具有统一、直观且一致的体验。以下是可能包含在滴滴乘客端UI设计规范中的一些具体知识点： 1. 设计原则：包括设计的目标、风格...

黄金珠宝店小程序e-commerce-luxury-store-appUI设计素材XD格式Skecth和PSD下载

最新发布

05-17

在IT行业中，UI设计是构建用户界面的关键环节，它涵盖了应用程序、网站以及各种软件的视觉呈现和交互体验。本资源“黄金珠宝店小程序e-commerce-luxury-store-app UI设计素材XD格式Sketch和PSD下载”提供了高质量的...

【微信小程序开发】字体样式设置

fbzhl的博客

12-03

1万+

本篇文章将介绍在设计微信小程序时，利用style和class两种方式来设置字体样式的方法。我们的目标是做出以下效果。在实现上图效果之前，首先要掌握一些基本知识。代码中使用了view组件的style和class属性来设置字体样式。其中，style是直接在标签内部进行设置，而class需要在wxss文件中定义样式类，然后在wxml中引用。（可以理解为这里编写了一个函数，而函数的具体定义需要到另一个文件当中编写）.box和.title分别是用来设置边框和标题样式的，在app.wxss中定义，是全局样式，可以在项目

小程序使用别样字体

weixin_43840320的博客

01-27

1824

小程序使用font-family字体不够好看，用自己下载的字体或ui规定字体在js的onLoad中使用loadFontFace onLoad(){ //YSHaoShenTi.ttf为ui指定字体文件 wx.loadFontFace({ family: 'webfont', source: 'url("../../utils/YSHaoShenTi.ttf")', success: function (res) { console.lo

微信小程序——使用阿里巴巴UI字体库

weixin_44710964的博客

03-01

1220

对于只有一个ui的当然可以直接从阿里巴巴ui库上把UI直接下载下来使用可是对于比较多的ui使用，我还是推荐用UI的字体引用来使用，这样方便灵活，可以更加便捷地修改icon的颜色和大小首先进入阿里巴巴ui库，找到想要的ui，加入购物车收集完自己想要的UI后点击右上角的购物车按钮弹出这个，然后可以新建一个项目名，把收集到的UI放入这个项目中然后跳转到了我的项目的网页，点击下载字体库到本...

小程序设计规范（一）

苏木力格的博客

06-06

4万+

小程序设计规范 标签；相比APP而言，开发一款小程序的开发成本更低、周期更短，同时开发难度和维护成本也相对降低，因此越来越多的开发者开始入坑小程序。正好最近我也要开发小程序，所以今天我就从设计方面聊一聊微信小程序设计规范，埋上设计中可能会出现的坑，让你能更好的完成你的小程序～设计尺寸微信小程序的设计只需要以iPhone6屏幕尺寸750x1334px为视觉稿进行设计即可，因为微信小程序以rp...

CSS 文本省略

RGSNbiubiubiu的博客

10-16

621

想让溢出的文本变成....... 形成想要的效果使用下面三个元素配合实现 overflow: hidden; 隐藏溢出的文本。 white-space:nowarp; 让文本不会自动换行就可以让第一个属性去隐藏文本了 text-overflow:ellipsis; 让隐藏的文本变成.... overflow 的属性： visible 默认值。...

微信小程序界面设计-样式入门到精通

01-10

讲解微信小程序中样式的入门使用，如何使用传统的css知识点来开发wxss的样式

微信官方发布的微信应用号（小程序）设计规范

cluzax的专栏

09-23

3万+

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。一、有好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序哎设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户

微信小程序css篇----字体(Font)