A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 绘儿 黑马粉丝团   /  2022-5-3 16:20  /  1336 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文



透彻了解UI设计,从此系列帖开始!

像素和设备调试

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,单位换算相对简单。微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx,即 responsive pixel。

rpx(responsive pixel), 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,

  • 750rpx = 375px = 750物理像素
  • 1rpx = 0.5px = 1物理像素

逻辑像素,在 CSS 中也被称为 CSS 像素 (CSS pixels),是为 Web 开发者创造的,在 CSS 和 JavaScript 中使用的一个抽象的层,每一个 CSS 声明和几乎所有的 Javascript 属性都使用 CSS 像素。

例如我们平时使用 Chrome 的设备调试工具的时候,iPhone6 是高 667px,宽是 375px,与苹果官方的 1334px x 750px,长宽分别少了 2 倍,那么面积就少了 4 倍。这就是经常说的 Retina 屏幕用四个(物理)像素表示一个(逻辑)像素。

三机的rpx

rpx 转换成 px 是需要乘以一个系数的:px = rpx * n

rpx 只是定义一个绝对值 750 宽度,然后简单的根据不同设备的逻辑像素来进行 rpx 到 px 的换算。

小程序视觉规范

1.字体大小

微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt)。
2.字体颜色


蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。


3.列表列表栏之间的行距间隔尺寸要求如下:

4.表单

5.按钮
  • 大按钮

对当前页面整体的即时操作,对于鼓励用户操作的按钮,必须有效且满足用户需求。

按钮的高度固定为94px(47pt),圆角大小固定10px(5pt)。

*主操作按钮在一个页面内只能出现一次

  • 中按钮

该按钮操作在页面层级中的重要程度不高,或者不鼓励用户操作的按钮,抑或者大按钮的使用会扰乱信息浏览时,可用中按钮代替。

中按钮宽度最小360px(180pt)。

文本两边间距最小60px(30pt),最大不限制,不够则拉伸按钮宽度。


按钮最高固定为70px(35pt),圆角大小固定为8px(4pt)。

  • 小按钮

仅对页面某项内容的操作、选择,小按钮是可以重复的。

小按钮宽度最小120px(60pt)。按钮内距离文字间距离最小30px(15pt),不够则拉伸按钮宽度。按钮高度固定为60px(30pt),圆角大小固定为6px(3pt)。


6.图标

尺寸:100*100px

一般用于结果页面状态提示,根据结果的情况选择对应的icon。

小程序Titlebar(标题栏)按钮

使用方法

提供深浅两种配色的按钮选择,以更好适配不同页面风格,注意保持Titlebar各元素保持足够的识别性。





友情提示:若你是对设计不太了解的小萌新,看完这个问题后,却对设计还有太多的疑惑(前途、薪资、技术含量、女生是否好找工作.....),强烈推荐你观看《设计萌新必看:学习UI设计必问的50个问题,从此系列贴开始》,相信能扫除掉你心目中90%以上的常见问题,请狠狠点击下方链接:http://bbs.itheima.com/thread-514779-1-1.html





精华推荐:
UI设计师如何自我介绍最有用!
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路,助你轻松拿下Offer
初级设计师面试失败,大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3


--------------------------------------------------------------------------------------------
如果有用,记得点赞留言哦~
【推荐阅读】:黑马论坛快回帖仅需这简单3步http://bbs.itheima.com/thread-513666-1-1.html
获取【UI设计视频教程资料】加绘儿2168934524
--------------------------------------------------------------------------------------------




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马