欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

UI设计12讲!NO.03 App常用设计规范

时间:2022-08-26
B站视频:av302428836
类别:UI设计
水平:入门
观众:1.4w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

UI设计12讲!NO.03 App常用设计规范

本集讲师:@格尔

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

获取课程课件及演示案例源文件,请访问👉 教程文件

本集教程内容概要

本集视频是 UI 设计基础入门自学手册系列教程「UI 设计12讲」的第三集,这一集将会给大家讲讲有关 APP 设计规范方面的内容,常用的作图尺寸,以及了解一下尺寸单位,最后带大家快速搭建一个聊天界面。

即时设计是一款在线可协作的UI设计工具,目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

如果想要了解即时设计的基本功能和操作用法,可以观看即时设计入门系列教程:

编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程。

1、什么是设计规范?

简单来说设计规范其实是一套标准,用来指导整个产品团队,让大家在设计、开发的过程中,都能让产品呈现的风格始终保持统一。

UI设计12讲!NO.03 App常用设计规范

设计规范作为一套系统,由非常多的部分组成,以谷歌的设计规范 Material design 为例,在他们的官方网站上,就分为了设计、组件、开发、资源、博客这几个版块。

UI设计12讲!NO.03 App常用设计规范

作为 UI 设计师,我们平时接触到最多的呢,就是跟交互设计、视觉设计方面相关的版块,这些版块中又包括样式指南、组件库还有模板库。

UI设计12讲!NO.03 App常用设计规范

另外的版块,像是开发代码啊,平面物料等设计规范内容并不是今天的重点,就不赘述了,感兴趣的小伙伴可以去自行探索。

2、设计规范的使用

在界面的设计过程中,常常碰到排版方面的问题,如果你拿不定注意,这些现成的设计规范就是你很好的参考对象。

UI设计12讲!NO.03 App常用设计规范

好比,字号。打开这些规范的“字体”那一栏,你就可以清晰地看到这些规范的设计师制定出的字号规则。再比如图标,我要在导航栏上放置图标,但我不知道多大,这个时候打开我们的规范找找里面的准则参考参考。

UI设计12讲!NO.03 App常用设计规范

多参考这些成熟的设计规范,熟悉之后你对界面元素排版的把控能力就会变得更好~

3、选择合适的作图尺寸

设计稿画布尺寸的确定重点在宽度的选择上。一般会采用一倍稿,宽 375×812,也就是 iPhone X 的尺寸。

UI设计12讲!NO.03 App常用设计规范

不过随着时代的发展,375 这个宽度也从中间尺寸变成最小尺寸了,取而代之的是 390 这个宽度,并且在 iOS15 也就是最新版本的苹果系统官方组件库里呢,也把组件尺寸调整到 390 这个宽度了。

UI设计12讲!NO.03 App常用设计规范

估计以后随着旧机型不断被淘汰,新机型不断推出,我们的设计稿也要顺应变化,从 375 慢慢过渡到 390 这个宽度。这就是在一般情况下设计师默认选择 375×812 这个尺寸作为设计稿画布大小的原因。

需要注意的是,具体情况还是得跟你所在的团队进行沟通,选择一个大家都接受的尺寸。只有充分沟通,整个团队确定统一的尺寸,才能高效地合作完成任务。

4、关于单位

px 是像素,指的是屏幕显示图像的最小颜色方块。单位面积里面的像素越多,那图片看起来就越清晰,也就是我们所说的分辨率。

UI设计12讲!NO.03 App常用设计规范

为了达到无论在哪种设备上都有同样的视觉体验,苹果引入了 pt (点)这个概念,并且规定在非视网膜屏幕上的 1px 就等于 1pt 这个比例尺,在视网膜屏幕上 1pt 等于 2px。安卓里面的 dp 其实也是谷歌采用同样的原理设定的,只是叫法不同而已。

UI设计12讲!NO.03 App常用设计规范

由于种种原因设计软件依然是用 px 作为单位的,在 1 倍图情况下 1px 等于 1pt,绘制完后,可以再因应需求让软件帮你换算导出 2 倍图和 3 倍图的像素尺寸。

5、实际案例

为了方便大家使用官方组件,即时设计已经把常见平台的设计规范整合到资源库里面了,大家只需要登录即时设计账号,然后在左下角找到资源广场,在这里直接搜索自己想要的设计规范,又或者下拉找到设计规范这个分类标签,点击进入后找到自己想要的设计规范文件后,引用或是复制到自己的资源库就行。

UI设计12讲!NO.03 App常用设计规范

这一次我们做的是 iOS 系统的界面,我们就选择这个 iOS15 官方设计资源,点击引用就好了。

UI设计12讲!NO.03 App常用设计规范

接着创建一个新的文件,建立新的画布,这个案例里面用到了两个官方的组件元素,一个是上面的 Status bar 状态栏,一个是 home 键,到对应的组件库里面,找到自己要的 UI 组件,点一下就会出现在工作区域内了,然后把它们移动到合适的地方,先摆好,就可以开始进行页面内的创作了。

UI设计12讲!NO.03 App常用设计规范

UI设计12讲!NO.03 App常用设计规范

UI设计12讲!NO.03 App常用设计规范

UI设计12讲!NO.03 App常用设计规范

UI设计12讲!NO.03 App常用设计规范

给大家总结一下这节课的内容,我们先是知道了设计规范是一套标准,用来指导整个产品团队进行产品设计和开发的;其次呢,我们知道了手机界面设计稿的画布尺寸,默认情况下会优先选择 375 宽度的原因;最后,通过即时设计软件,结合 iOS 系统的设计规范,我们可以非常方便快捷地设计搭建一个自己想要的页面。

以上就是我们这节课的全部内容啦,下一集将会给大家带来有关短视频界面设计方面的信息,请持续关注我们的教程噢~

2 收藏 15

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片