界面设计|入门必看 | UI界面设计基础知识!( 二 )
所以当前的UI设计工具都是通过操纵一些矢量的形状来进行工作 。 这意味着你所看到的一切都是由定义形状的数值来完成的 , 不管他是放大还是拉伸他就也只是变化了一个数值而已不会有任何的质量损失 。
如果你将计划设计界面 , 那么你的做好准备 , 因为在大部分时间你就是个没有感情的移动矩形机器人 。 (矩形是一个在界面设计中很流行的形状(在椭圆之前))
UI设计的基本思想就是通过一些恰当的手段来改变矩形
UI design is about moving rectangles around. And the skill is all in knowing HOW to move them WHERE and most importantly WHY. 盒子模型
盒模型是在设计和代码中定义的数字接口对象的最基本方法 。 我们所做的大多数设计都是根据盒子模型来设计的 , 所以很有必要了解它 。
- Fill 填充
- Border 边框
- Outer margin 外边距
- Inner margin 内边距
边框:就是包裹我们对象的轮廓(描边) 。
在下个章节我们会深入的探讨这个东西
外边距:就是对象之外的区域 , 他使我们的对象周围拥有足够的安全空间
内边距:区域越大 , 我们物体的安全区域就远大
定义属性
大小
宽度和和高度(以点为单位)定义了对象的大小 。 在大多数情况下我们使用W和H来简称 。 因为是二维空间 , 宽度就是水平轴上的刻度 , 高就是垂直轴上的刻度 。
简而言之 , 点和像素是不一样的 。 分辨率和像素密度是另一篇文章的主题 , 所以为了简短起见:点是像素的向量表示 , 它依赖于分辨率 。
在现代 , 像素密度非常高的显示器上 , 1个点可以是4个像素或更多 。 这样做的原因是要有足够大的元素 , 但也要给它们足够的清晰度和精确度 。
宽度和高度是一个可以容纳最小矩形(包括对象本身是一个不规则的形状)的容器 。 位置
对象的位置是X、Y轴上的一组数值 , 这个由包含它的画板来定义 。 X表示水平轴上的位置 , Y表示垂直轴上的位置 。
对于矩形和一些规则的图形来说这就很容易了 , 但是对于一些不规则的图形来说 , 那么他的位置就是包含的矩形的位置 。 角度角度定义了对象顺时针旋转的角度 , 一般默认0° , 旋转当然也是可以是负数 。 值得记住的是 , 比如-15° , 他其实是360-15°(345°)
为了的到一个一直的效果 , 请不要手动的旋转对象 , 而是从键盘输入数值 , 因为这比手动旋转精确的多 。
边界半径
研究表明 , 圆形比尖锐的形状更友好 。 为了定义圆度的等级 , 我们使用了一个词叫边界半径(即圆角度数)来定义它的属性 。
边界半径只是一个数值 , 就像宽度和高度一样 , 它也是用点表示 , 数值越大 , 形状的圆角就越圆 。 你可以单独对一个地方使用 , 也可以多个地方使用 。 一般来说2到6p也比0p来的更友好 。
如何你决定用这种方式设计按钮记得保存一致性哦!第二章:填充与边框
填充
正如我们前面所表述的 , 大多数UI设计都是关于移动矩形 。 那么让我们从一个矩形开始吧!
当你创建一个新的矩形 , 他会默认自带一个填充 , 大多数情况下他是灰色的 , 所以你要记得自己改变颜色 , 有时候他还会有个边界 。
为啥是灰色呢 , 因为灰色足够中性 , 你添加新的形状也不会搞坏你之前做的界面 , 而且你可以很容易看见他 。简单的填充是对象背景的另一个名字 , 它可以是纯色、渐变、或者是照片 , 他们还可以有不同程度的透明度 。
提示
大多数现代设计工具都允许使用键盘上的数字来控制透明度 。 只需选择对象后按1、2等等就会改变透明度 。 0是在百分之百和百分之0间进行切换 。
推荐阅读
- 苹果两款新iPad齐曝光:性能提高、入门款更轻薄、售价便宜
- RHEL 9提升了x86_64处理器的入门要求
- 入门HiFi享好声,这几款耳机绝对值得入手
- DIY从入门到放弃:电源挑贵的买就靠谱吗?
- 新人必看,一个接触币圈2年的人花钱买来的教训
- 腾讯数据工程师推荐的Python新手入门书籍,还是首发电子版
- 电脑常识新手快速入门的基础操作电脑新手快速入门的基础
- 缠论的中心思想是什么?如何正确的学习缠论?怎么知道自己入门?
- GTC DLI 实战培训第一课:理论与实践入门
- Scala隐式转换入门实践
