彩票走势图

UML工具Visual Paradigm教程:如何为Android应用绘制线框?

翻译|使用教程|编辑:杨鹏连|2021-01-12 10:22:42.863|阅读 340 次

概述:一个线框是应用程序,网站或系统的草图,你要建立。与许多其他屏幕设计或屏幕模拟技术不同,线框以黑白方式创建,带有简单的占位符,框和线。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Visual Paradigm是包含设计共享、线框图和数据库设计新特性的企业项目设计工具。现在你只需要这样单独的一款模型软件 Visual Paradigm就可以完成用UML设计软件,用BPMN去执行业务流程分析,用ERD企业设计数据库的任务。Visual Paradigm年终钜惠来袭,Visual Paradigm Modeler 订阅1年只需666元,现在抢购立享优惠!

点击下载Visual Paradigm最新试用版

一个线框是应用程序,网站或系统的草图,你要建立。与许多其他屏幕设计或屏幕模拟技术不同,线框以黑白方式创建,带有简单的占位符,框和线。线框没有显示细节,而是提供了有关最终产品(即应用程序)的外观,屏幕如何流动以及事物在屏幕上的布局或外观的大致概念。

什么是Android Wireframe?

Android线框是一种线框,可让您设计Android移动应用程序。Android线框是您移动应用程序视觉设计的起点。由于线框简单易懂,因此您可以将其作为业务需求文档的一部分,以便为客户提供将要开发的产品的图片。


android线框示例

本教程是关于什么的?

这是一个Android线框教程,旨在演示如何在创建Android线框时使用线框工具。


我们需要一个例子来说明这些想法。让我们打开手机,然后打开Google Play商店。您将为Google Play商店创建线框。

制备

为了完成本教程,请确保已下载并安装了Visual Paradigm。如果您没有安装Visual Paradigm。

第一部分-创建Android线框

1.通过从应用程序工具栏中选择“项目”>“新建”来创建一个新项目。在“新建项目”窗口中,输入“教程”作为项目名称,然后单击“创建空白项目”。

2.从应用程序工具栏中选择图>新建。

3.在“新建图”窗口中,选择“ Android手机线框”,然后单击“下一步”。 

创建Android手机线框

4.输入Google Play商店作为线框名称(图),然后单击确定。这将创建一个空白的Android Phone线框。 

命名Android线框

第二部分-绘制Android线框

在本部分中,您将使用Android线框工具绘制Android线框的线框内容。

1.让我们首先显示操作栏。右键单击手机顶部,然后从弹出菜单中选择“操作栏”>“显示”。


显示Android操作栏

2.这会在手机顶部显示操作栏。栏的左侧有一个后退按钮。让我们将其更改为“抽屉”按钮。右键单击它,然后从弹出菜单中选择“ Android ... ”。

更改android图标

3.在弹出窗口中,向下滚动并选择Drawer图标,这是倒数第二个图标。单击确定。

选择抽屉图标

4.抽屉图标旁边应有一个Play商店图标。让我们为该图标添加一个占位符。从图工具栏中选择图像。

选择图片

5.单击抽屉图标旁边的以创建图像。

在Android手机中创建图片

6.通过拖动其右下角的调整大小处理程序来使其更小。

在线框中调整图像大小

7.释放鼠标按钮,直到图像占位符适合操作栏。 

调整图片大小

拖动以调整图像占位符的位置。拖动时,您会看到虚线的对齐指南。该指南可帮助您将拖动内容重新放置在相邻的形状上。



重新定位线框形状
线框很简单。它包含很少甚至没有关于图形和文本内容的详细信息。您无需显示Play商店图标的实际图形内容(除非它具有重要的功能重要性)。


8.图标旁边应有一个标题“ Play Store”。为其创建标签。让我们尝试不同的方法,而不是使用图表工具栏。单击您刚刚创建的图像形状旁边的一次。这将显示一个绿色图标,称为智能资源。


使用智能资源

9.按下智能资源并按住鼠标按钮。向右下方拖动以形成标签形状。

创造形状

10.释放鼠标按钮。应该为您创建一个按钮。通过从下拉菜单中选择更多>标签,将其更改为标签。

创建标签

11.这将创建一个“灰色阴影”,作为标签的占位符。双击它。

编辑线框标签

12.输入Play商店作为标题,然后按Ctrl-Enter确认编辑。

线框标签创建

13.在操作栏的右侧,应该有一个由放大镜表示的搜索按钮。让我们用放大镜替换原始的“溢出”图标。右键单击该图标,然后从弹出菜单中选择“ Android ... ”。

替换图标

14.选择搜索图标,然后单击确定进行确认。

更改为搜索图标

15.调整图标大小以使其适合操作栏。到目前为止,操作栏应如下所示:

动作栏已完成

16.让我们继续绘制主要内容。屏幕顶部应该有六个按钮-应用程序,游戏,影视,音乐,书籍和杂志。让我们为每个按钮创建一个按钮。从图工具栏中选择“按钮”。

选择线框按钮
17.单击手机的左上方以创建一个按钮。



按钮创建

18.将其尺寸调整为大约屏幕宽度的一半。同样,您可以通过拖动调整大小处理程序来调整大小。

调整按钮大小

19.双击按钮并将其重命名为Apps。

按钮已重命名

20.按钮的左侧应有一个图标。应用步骤4至7中描述的技术在按钮内创建图像。

线框图像添加到按钮

21.共有六个按钮。您可以使用“复制”功能从“应用程序”按钮进行复制,而不必一个接一个地创建它们。单击应用程序按钮将其选中。

选择按钮

22.复制资源显示在选择下方。按住它并按住鼠标按钮。将其拖到右侧。

重复的线框内容

23.释放鼠标按钮。这将创建一个看起来与源相同的新按钮。

复制创建的新按钮

24.将Apps重命名为Games。

25.让我们创建其他按钮。首先选择两个按钮。您可以通过按背景并在目标形状上拖动来选择形状范围。

执行范围选择

26.复制它们以产生两个新按钮。

复制线框形状

27.重复这些步骤以创建所有六个按钮。

按钮创建

28.让我们在按钮下创建一个“新电影发行”部分。在按钮下添加标签。双击并将其标题设置为“新电影发行”。

创建的线框标签

29.让我们放大文本。单击以选中标签。单击字体大小资源,然后在滑块上拖动以增加字体大小。

增加线框标签字体大小

30.在右侧添加“查看更多”按钮。调整大小以使其更小。

添加查看更多按钮

31.本节应包含三个“推荐选择”列。让我们创建第一个项目。为列创建面板。再次,从图工具栏中选择“面板”,然后单击线框以创建它。

面板创建

32.面板的上部应为预览图像。在其中添加图像形状。

面板中的图像

33.在图片下方,应有商品名称以及简短说明。用两个标签表示。

推荐选择已创建

34.在右侧,应该有一个溢出图标和价格信息。用图像形状和标签表示。

推荐选择已创建

35.利用“复制”功能创建另外两个面板。

面板重复

36.通过复制“新电影发行”部分,创建“推荐给您”部分。选择相关的线框元素并复制它们。
重复元素

37.释放鼠标按钮,并将“新电影发行”重命名为“推荐给您”。

元素重复

38.此部分下仅应有两列。因此,让我们删除第三个面板,然后调整其余两个面板的大小,使其看起来像: 

线框元素已调整大小

这就是绘制线框的全部。您的最终结果应如下所示:

完成的线框

第三部分-将Android Wireframe导出到图像文件

您现在可以将您的作品导出到图像文件中。导出图像:
  1. 从主菜单中选择文件>导出>活动图作为图像...。
  2. 在“保存”窗口中,调整保存选项,例如文件类型和输出质量。
  3. 点击保存。现在,您将获得出色的Android线框的图像文件!:-)
png中的线框



想要购买Visual Paradigm正版授权请点击【商城购买】,想了解更多产品信息请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP