交互学堂
专注分享专业知识

Justinmind权威指南:​基础-Justinmind基本元件的使用-2

​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注

矩形

062

这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,

很明显的例子是Apple Watch 的软件界面与 Apple IOS 上的软件界面上的对比。

061

在软件设计上方的元素应用远远多于圆的使用,所以文章开头才会说矩形才算最常使用的元件而没有之一。

矩形的使用场景很灵活很多时候我几乎只用一个元件可完成一个简单的项目演示,要不要先看看视频一个手机外壳的设计只用矩形元件。

004

上面的这个手机外壳制作完成后你可以顺手把它存到自己的自定义元件库,这样的话可以重复使用下次就不用这么麻烦了。可看出自定义元件的用处还是非常大的。

长宽等基础的属性略过,我们看一下矩形的特色属性

自动适应文本

063

图片填充矩形

你可能需要给你的矩形设计做一个矩形图像背景,这时候下面这个功能就派上用场了。

064

色彩填充矩形

矩形还支持各种单色与渐变色填充,方面你创作出更炫的设计方案。

065

使用渐变色填充需要单独设计一下渐变效果,可以根据实际视觉效果进行不断修改直至完成你的方案。

066

填充文字

在填充了图片或颜色背景之后,矩形还可以在这些层上面填充文字。

067

图片中的文字位置是根据设置中的顶部0底部0左0右0这个填充参数来控制的。

068

矩形的使用是非常方便和常见,大家可以深入理解一下矩形的设计初衷就是为了帮助用户去快速创建你的想法,不要一味追求保真的元件图标库,而是利用矩形等基本元件帮你理清产品思路和设计方案。

未经允许不得转载:IAMUE_专业交互设计平台 » Justinmind权威指南:​基础-Justinmind基本元件的使用-2

交互设计问答社区

寻找答案发起提问