【UI设计】零基础带你入门UI设计


前言: 在一线城市分工比较明确,但在二线城市,对于前端工程师可能多少也要求点设计,比如:设计一个界面等等。一个 项目主要分为四个流程:策划—— 设计 —— 开发 —— 运营, 然而前端开发与设计紧密联系,可能会多少要求懂一点。

下载并安装PS

工具:PS (可到官方版本去下载,图标如下)
1.png

关于PS的基础知识

智能图片: 一般把编辑好的图片都要转换成智能图片,以保证此图片不能进行修改

界面大小: 当需要设计手机页面的时候,选用宽度:1125 像素 高度:2456 分辨率: 72

在这里插入图片描述
不透明度: 降低了整体的透明度,若不适用透明度,填充改为百分之一百

透明: 填充从百分之百降到百分之三十四,只降低内部的透明度 ,不降低外面的

抠图: 选用钢笔工具 —— 形状 —— 曲线 (左键按着不动进行移动)

PS相关的工具以及快捷键

图像的原始大小查看:crl + 1
移动工具:V
缩放: crl + t
显示所有画面:crl + o
图片放大 : crl + +
图片缩小 crl - -
路径转换为选区 : crl + 回车
选取颜色之后 填充前景色 : alt + delete
重合:钢笔工具 + crl + 拖着周围的小圆圈进行移动
角处理 : 钢笔工具 + 双击 + 点最后一个 + 点锚点
多出来的部分调整 : alt + 左键 变成箭头向下的符号
渲染:画笔 + 像素200 + 选择颜色
周围出现刻度: crl + r

制作界面的思想以及步骤

做界面这方面,需要一定的鉴赏能力和长期积累的经验以及训练。

可以看一下面这个界面,说一说具体的操作步骤吧!

在这里插入图片描述

关于导航栏的制作:

在这里插入图片描述
这部分也可以选取我们手机里的导航栏,进行截屏或者在网上找!

步骤:
1,显示刻度: crl + R 键 显示刻度(一定选择像素不是厘米等)

2,对图片进行划分:点击 视图 —— 新建参考线 —— 选择水平 )0px —— 从上面的参考线划出一条参考线与之对齐

3,填充背景色: 点击 最左边形状自定义工具 —— 矩形工具 —— 画出上面的区域 —— 最上边填充双击选择颜色 描边 : 选择中间夹着红色的白图片

4, 把我们事先找到的图片拖拽到这里来,点击右上角的锚点拖拽进行放大和缩小,按回车键 图片进行固定,点击最左边的工具的第一个(有四个方向的箭头),进行拖拽到固定的位置

5,补充如果你找的导航栏背景色是黑色的话,需要最右边的含有把正常改完滤色

关于去哪儿网制作

1

步骤:
1,肯据上述,你可以完成后面的背景色

2,填充文字 :选择最左边的文字工具 —— 最上面选择你喜欢的字形 —— 输入 去哪儿旅游会员日 —— 改颜色(上面第三步)

3,客服图标和转发图标 : 图片(下面会发图标下载并保存)—— 缩放 —— 回车 —— 移动到对应的位置(同上面步骤四)

2
步骤:
1,皇冠角标:最上面是一个皇冠的图片(给图标)—— 缩放——回车 —— 移动相应的位置 —— 点击最右边皇冠的图层的后面空白处双击 —— 颜色叠加打对勾 —— 双击打开 —— 选择颜色即可

2,会员日 以及 去哪儿旅行 文字同上述

3,白色的六边形:选择最左边的自定义工具 —— 选择多边形定义工具 —— 最上面的边数改为6 —— 画图——填充白色

4,六边形的外边的形状:选择最左边的自定义工具 —— 选择多边形工具——最上面的边数改为6 —— 画图 —— 选择钢笔工具 —— 点击最上面的锚点删掉 —— 填充颜色 —— 改为渐变色 紫色

7

步骤:

1,海豚:里面的海豚 可以找一些网上的海豚的图进行抠图 —— 点击钢笔工具进行画锚点 —— 勾画出海豚的曲线 —— 填充颜色 —— 海豚中间弯曲的线同钢笔工具进行勾画 —— 填充颜色—— 最上面选择渐变色 以及蓝色 描边:选择渐变

2,光环:上网找黑色背景的光环下载下来(下面发) —— 拖拽进来 —— 最右边把正常改为滤色即可

3,10.1:输入10.1后—— 按着 crl + shift + 点着这个图片 —— 点击上下左右锚点对进行向左倾斜 右倾斜 变矮 拉长

4,旅游会员日:按着上面的方式 —— 选择钢笔工具 —— 显示出锚点后—— 进行添加锚点连线 —— 字体会变厚

5,添加背景色以及周围的小圆圈 —— 最左边的自定义形状工具 ——— 椭圆工具 —— 画圆圈 —— 填充颜色

在这里插入图片描8述
对于这部分的操作:和上述类似 画矩形方块 填充背景 填字等

9

这些是五个图标

步骤:

划分区域 —— 填充背景色 —— 放图标 —— 填字(和上述同)

补充:当填充了旅行的图标被后面的背景色遮住了改动方法:只需要把 最后边旅行的图层双击拖住移动背景色的图层上面,这样就可以看见了!

关于上面界面的图标

kefu
fenxiang
qiqiu
guanghuan
feiji
jianzhu
huangguan
lvyou
piaobuxing

自己动手去做一做

希望可以多多实践哦

更好的应用,更少的代码! SwiftUI是苹果主推的下一代用户界面搭建技术,具有声明式语法、实时生成界面预览等特性,可以为苹果手机、苹果平板、苹果电脑、苹果电视、苹果手表五个平台搭建统一的用户界面。 SwiftUI是一种创新、简单的iOS开发中的界面布局方案,可以通过Swift语言的强大功能,在所有的Apple平台上快速构建用户界面。 仅使用一组工具和API为任何Apple设备构建用户界面。 SwiftUI具有易于阅读和自然编写的声明式Swift语法,可与新的Xcode设计工具无缝协作,使您的代码和设计**同步。自动支持动态类型、暗黑模式、本地化和可访问性,意味着您的**行SwiftUI代码已经是您编写过的非常强大的UI代码了。 【课程特点】 1、196节大容量课程:包含了SwiftUI的大部分知识点,详细讲解SwiftUI的方方面面; 2、15个超级精彩的实例:包含美食、理财、健身、教育、电子商务等各行业的App实例; 3、创新的教学模式:手把手教您SwiftUI用户界面开发技术,一看就懂,一学就会; 4、贴心的操作提示:让您的眼睛始终处于操作的焦点位置,不用再满屏找光标; 5、语言简洁精练:瞄准问题的核心所在,减少对思维的干扰,并节省您宝贵的时间; 6、视频短小精悍:即方便于您的学习和记忆,也方便日后对功能的检索; 7、齐全的学习资料:提供所有课程的源码,在Xcode 11 + iOS 13环境下测试通过;
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页