常常 会有人问:“我是UI计划 的零底子 ,但是 我要学UI计划 ,想学UI计划 ,你能不能给我一个大纲?”这个题目 已经磨破嘴皮子了,本日 这一篇 ,告诉你学习UI计划 第一阶段到底要把握 哪一些知识和技能。假如 你是新手的,对峙 看完每个知识点而且 搞懂你就不要再说你是个新手了,积极 学习 ,然后去和别人说我有底子 ,我想进阶。
入门阶段的你就像一张白纸,最重要 的特性 就是迷茫 ,不知道从何学起,知道网上有海量的信息,满是 教程 ,但是不知道先看什么,后学什么,怎么学习 。
本日 重要 摆列 大概学习大纲,在末了 再答复 一个常常 有人问的题目 “我是报班还是 自学? ”
第一:学习工具
工欲善其事 ,必先利其器。
对于入门阶段的童鞋,你就不要总是 纠结怎么学。先玩透Photoshop,UI计划 的工作中最重要 的工具就是PS ,比方在做一些图标和界面的时间 ,PS都是必不可少的 。
但是Photoshop有那么多功能必要 每一个都学吗?固然 不消 ,这个背面 我们专门找一节渐渐 说 ,在UI计划 中ps重要 学习那几个工具。
怎样 下载?
网页链接
即可跳转到下载链接。附相干 破解及安装教程
第二:学习UI计划 规范
重要 有安卓版的和iOS版本的,下面整理了两篇 。
【安卓版】
如今 市场上有很多 种的体系 、比如 我们的安卓,苹果、黑莓 、windows phone等 ,身为一个ui计划 师,我们都应该对这些体系 有所相识 ,相识 完之后再去做APP界面就会更加的得心应手。上表是一张安卓版本的计划 参考规范表 ,起首 相识 市场上用得最多安卓的分辨率种类:LDPI、MDPI、HDPI 、XHDPI、XXHDPI。
起首 我们从上往下来分析上表:
第一行就是我们的手机分辨率,这个是肯定 要记取 的,比力 紧张 的,我们去做计划 图的时间 就是利用 它的这个分辨率作为尺寸的 。
第二行是密度值 ,这个是手机出厂的时间 手机厂商给的,就是一个英寸内里 有的颜色点,比如 LDPI这个分辨率的 ,它每一个英寸内里 就有120个颜色点,以是 密度值越高,屏幕越清楚 ,接下来的比例就只是一个相对应的比例了,没什么好说,接下来看一下下面的倍率关系。
以MDPI为基准 ,也就是说MDPI是一个一倍的分辨率,那么别的 的都给出了它们相应的倍率,去适配的时间 就是通过记取 这个倍率去举行 巨细 尺寸的转换。那么我们有这么多的分辨率 ,对应的就有这么多的尺寸,我们去计划 的时间 应该拿哪一个的尺寸来作为计划 稿呢?一样平常 去选择计划 稿的时间 有两种方法:
方法1:以一个根本 的尺寸(MDPI=320*480大概 XHDPI=720*1280) 开始,之后将其缩放到差别 的屏幕尺寸 。
方法2:从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。
由于 MDPI是一倍的 ,而XHDPI是两倍,都是整数倍,轻易 去适配别的 的分辨率 ,假如 以XHDPI为计划 稿,计划 的全部 数值都要求是双数的,去转换的时间 才华 包管 不出现小数点 ,第二种方法的话就比力 难去控制,以是 一样平常 还是 发起 用第一种,固然 最好的方式天然 是每一个分辨率都单独去做一套界面图。
相识 完这些分辨率和用什么尺寸做标准 之后 ,接下来让我们直接看一下界面计划 要留意 的一些规范。起首 先从界面的布局 尺寸开始
布局 规范表
上表就是我们在界面上最根本 的一些控件尺寸的巨细 规范,比如 状态栏、导航栏 、和菜单栏,这些都是比力 死的数据 ,多去看反复 就记了,固然 数据还是 挺多的,你也可以用MDPI的尺寸标准 当作 DP然后再去适配别的 的尺寸,如许 做的话必要 记取 的数据就少了很多 了 ,这就是DP的法,比如 ,MDPI的状态栏高度是25px ,你就把它等同成25dp,然后再去举行 相应的转换 。
哪些底子 控件的巨细 就不说了,记取 就行 ,宽度的话是满屏,接下来看一下最细画笔巨细 ,指的是一些分割线 ,大概 一些线性图标,这些我们要包管 做出来之后,用户去利用 的时间 可以看的清楚 。
图标尺寸
在一个分辨率里 ,一张界面图上有太多的图标,不大概 每一个图标的巨细 都是一样的,全部 图标会根据所处的位置的差别 ,用处的差别 ,图标的巨细 也会不一样,图标的巨细 也不是我们想给多大就给多大,安卓体系 有一套本身 的规范。接下来我们看一下上面的这些图标指的是哪些 。
第一个是启动图标 ,就是我们手机桌面上的图标。操纵 栏图标就是一个应用上操纵 栏上面的图标,上下文图标就是放在正文内里 的一些图标,体系 关照 栏图标也就是状态栏上面的图标 ,市肆 启动图标是当我们去网页上下载的时间 出现的谁人 图标,相识 一下就行了。
看完了分辨率、控件巨细 和图标的规范,接下来再看一下字体的规范 。
字体规范
字体的巨细 安卓内里 也有相应的规范 ,比如 最小字体是多大,文本是多大,按照规范来计划 的话就可以包管 我们的界面图团体 看起来更加的雅观 ,而且在利用 的字体方面,也是有一个严格 的规定,英文在安卓内里 利用 的是Roboto,中笔墨 体利用 的是droid sans fallback ,固然 如今 随着安卓手机分辨率的增长 , 中文,字体的选择也多了几种 ,比如 中文也可以利用 思源黑体等。
【iOS版】
起首 我们要知道怎么去用它,就必须 先相识 它的一些尺寸的巨细 和各种的版本,通过一个表格来简单 认识 一下I苹果手机。
从上面的表格上可以看出 ,如今 市场上的苹果手机有这么多种,每一代都有本身 的屏幕巨细 ,导致了很多 几种分辨率的出现 ,苹果手机的分辨率有@1、@2x和@3x三种分辨率,也就是我们常常 说的一倍 、两倍和三倍 。
苹果三代是一倍分辨率,4到6s是两倍 ,6p开始就是三倍了。那么有三种分辨率,我们去计划 的时间 该怎么做呢?每一种都计划 一遍?但如许 会不会太浪费时间了, 为了进步 计划 的服从 ,我们会选择此中 一个作为我们的计划 搞去做出计划 图 ,别的 的通过适配去得到别的 的分辨率。
一样平常 我们选择计划 稿的时间 会选择苹果5大概 苹果6的巨细 去计划 ,也就是640*1136大概 是750*1334这两种 。由于 这两种尺寸最靠近 androidXHDPI的分辨率,方便之后去适配。
说完了IOS的分辨率 ,接下来我们就可以正式进入怎么计划 的话题了。起首 第一个开始说的就是界面上最常见的控件了,先看一下表:
IOS控件尺寸规范
根据上表来分析:
起首 表明 下什么是PPI?
PPI,英文全称:pixels per inch ,即像素每英寸,也叫像素密度, 我们的屏幕都是由很多 很多 的颜色点构成的 ,而PPI就是一英寸屏幕内里 有多少个颜色点。因此PPI数值越高,即代表表现 屏可以或许 以越高的密度表现 图像 。固然 ,表现 的密度高 ,拟真度就越高。
屏幕巨细 :这个信托 各人 都懂
状态栏:再下来一行就是状态栏的高度了,状态栏就是我们手机屏幕顶部放电池的那块地区 。在分辨率一倍的手机里,高度为20,根据表格查察 别的 规格 。
导航栏:就是状态栏下面那块地区 ,一样平常 放返回键和页面名称,不如设置、个人中心 大概 首页。它再一倍分辨率里的高度为48px,末了 一行就是标签栏 ,也是我们安卓内里 的菜单栏,一样平常 放在屏幕最下方,它的高度为49px ,别的 分辨率的高度用一倍的乘以他们相对应的倍数得到。
IOS图标规范表
在手机应用上, 图标放置的位置和作用差别 ,决定了他们有一些各自的巨细 规范 。我们大概说一下上面的图标指的是哪些图标 ,应用图标、搜刮 结果 图标 、主屏幕快捷方式图标都是一样的,只是出现的位置差别 而已,可以简单 的当作 都是手机桌面上的图标 ,应用市肆 图标是在网页下载的时间 的谁人 图标,大概相识 一下就行,设置界面图标指的是设置页内里 的图标,工具栏、导航栏和标签栏图标这个就不多说了 ,就是刚好对应他们放置的位置。
IOS字体计划 规范
在计划 界面的时间 要留意 控制字体的巨细 ,放置的位置差别 、作用差别 ,它的字体巨细 也不一样 ,而且IOS体系 也限定界面上利用 的字体, 如今 最新的都要求中文利用 苹方、英文利用 San Francisco。
计划 规范还是 那句话, 规范只是一些计划 师去计划 界面时间 的参考 ,不要由于 这些规范去限定你的计划 想法,紧张 的还是 用户体验和界面的雅观 。
盼望 对各人 有效 ,背面 会连续 更新安卓版的计划 规范 ,盼望 对各人 有效 。本文为趣达爱计划 原创,如需转载请私信获取授权,谢谢共同 。
第三:色彩学习
色彩的三要素指的就是色相 、明度和纯度 。这三个分别是什么意思呢?我们可以如许 明白 :
1.色相
色相指色彩的相貌 ,差别 的波长决定差别 的色相,这是各人 最直观感受到的色彩。色相对于色彩是最直接的代表,是色彩的魂魄 。
在光谱中,红、橙、黄 、绿、蓝、紫等由于有着差别 的波长 ,带给我们差别 的色彩感受,它们是最根本 的色相,其他诸如象牙白 、柠檬黄等都是指色彩特定的色相 ,是人们对差别 色相的差别 称呼 。有一个地方要留意 ,玄色 和白色是无色相的 。
2.明度
明度指色彩的明暗程度 。明度可以说是色彩的骨架,明度对色彩的布局 起着关键性的作用。明度具有定的独立性 ,它可以离开 色相和纯度单独存在,而色彩的色相和纯度总是陪伴 着明度一起出现的,以是 明度是色彩的骨架 。
普通 点表明 就是通过色相的加白加黑的一个变革 ,任何色彩都存在明暗变革 的,从明度光谱上可以看到最豁亮 的颜色是黄色,处于光谱的中心 位置。最暗的是紫色 ,处于光谱的边沿 。
3.纯度
纯度指色彩的美丽 程度 ,就是色彩的饱和度、纯净度、彩度 。直观明白 就是指色彩的鲜浊程度 。纯度最高的色彩就是原色,随着纯度的低落 ,色彩就会变的暗 、淡。纯度降到最低就是失去色相 ,变为无彩色,也就是玄色 、白色和灰色 。
4.UI计划 中色彩的利用
那么在UI计划 过程中色彩该怎样 去搭配?重要 通过4部分 来讲授 。在UI界面计划 比例中:用色一样平常 分为主色,次色和辅助色 ,它们的比例是按照20%-30%、5%-10%和5%来举行 配色,通过差别 的配色比例让界面看起来不会出现突兀大概 是主次不分的环境 。
第四:摹仿 阶段
相识 了具体 的知识,最重要 的就是练习 了 ,必要 接洽 摹仿 来加强 你的本领 ,不要想着怎么做,怎么摹仿 ,学啊~直接打开ps就开始操纵 ,假如 不知道怎么摹仿 ,可以多加几个大神群去问 。
这个阶段的就是要:多练和多问
第五:把握 切图
之以是 必要 切图是由于 用户手中看到的产物 界面 ,并非计划 师费尽心血 创作的结果 图,而是一个个单独的切图经过 开辟 同砚 技能 实现。
切图作为计划 师与开辟 者之间的桥梁,它的作用很关键,符合 的切图 、精准的位置可以最大限度的还原结果 图的计划 ,精妙的切图更会有事半功倍的结果 哦!
好了,大概这几点,固然 这个只是学习UI计划 的中的此中 一小部分 ,也是入门的阶层 。假如 你以为 有效 ,就是本日 这一篇最大的目标 。
题目 :自学还是 报班?
学习是一件很枯燥的事变 ,面对 这个的题目 选择 ,你必须客观的认识 你本身 。假如 你是一个自制力很差的,你没办法做到一练习 就是几个小时乃至 一天的人,那么发起 报班 ,跟着老师和小搭档 一起学习。反之亦然。
报班和自学各有优缺点,不要由于 几个钱的事就总是 纠结,假如 是你 ,辛辛劳 苦学了几年的知识,人家一来就说,“你会,你来免费教我” ,人家一拳就已往 。
以是 这个题目 的选择必要 看你本身 是否必要 。你是否可以或许 真的很有毅力的去学习。最紧张 的,不要低估本身 也不要高估本身 ,时间才是款子 。
文章作者:趣达小楠