genimi如何出原型图

经常有学生问我，圆形图啊，该怎么画，用什么画，怎么画才算是好的圆形图？实话说真的不能一概而论，今天呢，我来分享一下一个页面圆形图的制作过程，内容呢是支付宝的首页， 所用的工具呢是在线免费工具 process on， 制作视频的总长度呢，大约二十四分钟，我把它分成了上下两集，请同学们参考学习。第一步啊，就是打开 process on 的网站， 很容易啊，可以在搜索引擎当中搜索，也可以直接输入三 w 点 process on 点 com。 第二步呢就是登录这个网站， 登录以后呢，我们可以在左侧的菜单栏看到新建，选择新建圆形图，来到圆形图的界面。 第三步呢，我们需要新建一个矩形的框架，这个框架呢就是支付宝的首页的框架，因为我们选择的是 幺二八零七二零的尺寸，所以呢，我们在举行的尺寸的这个度量的这个这个属性面板上修改它的宽度为七二零 b x b x l， 高能二八零 px， 就是像素了。 第四步呢就是创建状态栏，也就是手机信息最顶部的手机界面最顶部的 新西兰，那他的宽度呢是七二零像素高度呢是这个标准下的五十像素高。然后呢，再把这个状态栏和 底部的这个框架进行一个对齐。第五步呢，我们需要创建工具栏，工具栏呢，也就是状态栏下方的 这个区域，它的尺寸呢给它修改为七二零像素宽， 九十六像素高。第六步呢就是创建标签栏，标签栏是工具栏下方的这个区域， 因为他和工具栏的这个尺寸呢相当很相等，所以我们直接复制他，并且给他对齐就可以了， 可以通过菜单里面的对齐工具。 第七步呢，我们需要创建底部的导航栏啊，导航栏呢，和这个 标签栏的尺寸也是一致，也是九十六像素高，七二零像素宽，所以我们直接复制并拖在他的下方就可以了， 当然也要对他进行一个对齐的操作。第七步呢，我们来创建手交海报，这个区域也是拖拽矩形，并且给他的尺寸修改为七二零像素宽， 高度呢是两百八十像素，再对它进行一个对齐操作。第八步呢，我们需要创建 app 的通知栏啊，这个通知栏呢是支付宝自行设计的，位于。呃，他 的尺寸呢高是六十像素宽呢是七二零，和手机的宽度一致，再对它进行对齐操作。第九步呢是创建间隔距离，间隔距离呢就是不同的功能区之间的这个距离。 呃，这里的规规范呢是十六个像素，所以我这里来再演示一下 y 轴向上，原来如果在幺二幺三，那么加十六呢，加起来就是幺二二九像素。 设置好以后呢，你会发现两个区域有一个十六像素的间隔。第十步呢，我们需要创建系统图标的区域，所谓系统图标的区域呢，也就是支付宝首页上，首页上一个重要的 一个系统图标导航区，它的宽度七二零，高度呢是三六零像素。创建好矩形区以后呢，再对它进行一个间隔和对齐的操作。第十一步呢，我们需要创建未读消息栏， 物资消息栏呢，也是创建一个剧情，然后呢把它拖拽到主页面的框架当中，再对它进行一个尺寸的修改，现在人像素宽高度呢是一百二十像素。 第十二步呢，我们需要创建图标，也是同样，我们不是绘制原来的或者说真实的图标，只是用句型来去代替，那么 这里的图标呢，之所以给他设置为幺八零乘幺二零的这个区域呢，是因为这个系统图标区啊，是分为三行四列， 那么这也就意味着呢，他要对七百二十的宽度进行一个四等分，在水平这个这个轴向上进行四等分啊，每一个自然是这个 幺八零啊， 然后呢对它进行一个对齐操作，为什么这样做呢？实际上是未来的把图标系统图标 这个图标进行便于对齐。第十三步呢，我们来创建图标也是用矩形工具去拖拽，并且呢尺寸设置为四十八像素乘四十八像素，然后呢给这个图标拖拽一个文本， 修改这个这个图标的文本为二十四像素。答案，为了在文件图上看起来更清晰呢，你可以给他加粗啊，最好不要加粗。 把它框选以后呢，拖到应该对齐的图标区的这个系统图标区的一个区域，做相应的对齐，然后呢 把它进行复制服用。因为系统图标区呢有很有四啊，四列三排这样十四步呢，我们完成整个这个系统图标区的所有图标的创建， 直接复制框选复制复用就可以，然后把它调整相相应的位置再对齐 在服用。 第十五步呢，我们选择清理系统图标的线框，也就是刚才所绘制的这个外框，这是没用的， 刚才绘制它呢就是为了对齐这些图标，现在呢可以把它直接选中，然后删除清除。 第十六步呢我们绘制导航栏的图标，导航栏呢就是在整个主页面的最下方，这个区域也是拖拽矩形， 并且呢对它进行复用，这个尺寸呢是三十二乘三十二像素，哦不对也是四十八乘四十八， 我们会发现啊，幺二八零七二零这个界面当中啊，很多的尺寸呢都是偶数啊，没有出现单数的这样情况， 这是大家需要注意的一个问题， 包括字体的大小也是偶数，二十四，二十八，三十二，这样去设置好，然后把这个文本拖到导航栏的图标的下方，并且对它进行一个对齐， 对其分布。这些操作在圆形图的制作过程当中啊，是会经常的用到， 可以用快捷键 ctrl d 来去复制它， 那就现在就在用一个排列图形分布的工具，让它在水平方向进行等距的排列分分布，然后呢再对它进行一个对齐。 第十七步呢是绘制搜索框，搜索搜索框呢也就是在 这个主页顶部状态栏下方的工具栏当中一块区域，搜索区呢，我是用矩形、圆角，圆角矩形来去绘制，高度是五十六像素，他的规范是五十六到六十像素的高都可以。 然后呢我们把它进行一个宽度的这个调整， 它的宽度呢是五百四十像素的宽， 在搜索框当中创建文本给他二十像素的尺寸。 好，二十四啊，二十四像素 先给他加粗，哎，为什么要加粗呢？因为实际上支付宝搜索框当中的字体的 style 就是这种。第十八步呢，会是工具栏的小图标。工具栏的小图标呢，我们可以通过在左侧搜索栏当中， 比如说搜索这个通讯录就可以输入英文 contact。 然后呢得到左侧这些图标，我们可以选择可以拿来使用答案。尺寸需要对它进行一个修改， 求开位四十八乘四十八像素，并且把它拖到相应的位置。 那我们还可以继续去搜索说加法号 cross。 搜到以后呢，我们可以选择相应合适的图标，拓展到相应的位置，并且对它呢进行一个对齐和尺寸的修改。 当然也可以将你提前准备好的素材导入导进来。 第十九步呢，我们来绘制标签栏的图标。

今天呢我来带大家画一下文化是女装圆形，也就是第一代女装圆形啊，这个是女装圆形里边最基础的那一款啊，大家经常看一些裁剪书呢，上面也经常会引用啊，用 女装圆形来变换一些款式。那现在呢，我来带大家画一下。画之前呢，我们先要了解一下女装圆形的尺寸，那我们画的是 m 码，他的背长呢是八，他的胸围是八十四，背长是三十七。那可能大家用的不同的书，它里边的这个尺寸会有一点差别， 比如有的书里边呢，他会设置一个 ml 码，就是 b 呢取八十八，然后被长取三十八，甚至有的取到三十九，他这个呢是因为他这个书的版本啊不一样，然后他那个有一些嗯， 这个尺寸上的调整，但是其实比较经典呢，是比较经典的呢，是这个尺寸哈，就是 b 是八十四，就是 b 是胸围，背长呢是三十七。那我今天用的呢就是这个尺寸，这个尺寸呢偏重于一些骨架偏大的北方人，那这个呢就是比较通用的啊，身材要稍微啊，就是比较通用的一些身材。那有一些书的说法呢，是说这个 更适合南方人的体型，这个适合北方人的体型，但其实大多数呢都是用的这个尺寸啊。那现在呢，我们来开始画一下，首先呢我们先画一个啊直线，这个直线的长度呢是二分之 b 加五，这个直线的长度是 二分之 b 加五， b 呢就带入这个数据就可以了。然后呢我们在这个直线的基础上呢做一个垂线，这个垂线的长度呢是被长， 这个呢是背长啊，背长呢取一个三十七公分，同样的呢我们把这边呢也做这样一个垂线，然后也取一个背长的尺寸， 那这样呢我们把这边连起来就得到了一个长方形， 这样呢我就得到了一个长方形，然后我们做一个选一个长度是六分之一加七， 这个是胸围线的尺寸，六分之 b 加七。然后呢我们从这个点往这个点取一个长度是六分之 b 加七。然后呢我们做这个点呢做垂线 一直连到这边，我们在这个线这个线段呢就是我们说的胸围线，这个是胸围线，然后我们找到这个终点，找到他的终点，然后过这个终点呢做垂线 做一个垂线，然后这个呢我们就这边呢就是后片，这边呢是前片，现在呢我们先来画后片，后片呢我们先画他的领子，他的横开领是多大？然后他的横开领呢是二十分之 b 加上二点九，二十分之 b 加上二点九，他这个横开领呢是二十分之 b 加二十二点九。然后这个数值呢我们用这个圆圈加一个小黑点来代替，因为一会呢我们还要用这个数，然后我们把这个点，把这个线段呢 给他三等分，给他平均分成三份，然后他的三分之一的长度呢，我们给他三等分，然后他的三分之一长度呢，我们用这个小圆圈来代替，用一个小圆圈来代替。现在呢我们要过这个点做一个垂线，然后这个垂线的长度就是小圆圈， 这个呢就是一个小圆圈的长度，然后我们找一个背宽线，就是在这个胸围线的这个长度上呢，找一个背宽线，他是六分之 b 加上四点五，这个呢是他的背宽线。然后我们找到之后呢做一个垂线， 做一个垂线，然后这块又分成了这样一个块，然后我从这个点往这个方向找一个小圆圈的长度，然后过这个点呢做垂线，取一个两公分， 这呢是一个二，现在我可以把这两个点呢连起来了，这个就是接线， 我们用这个字母 l 来代替。那现在呢我把这个背宽线这个长度啊给他二等分，找到他的终点， 然后把这个线段呢二等分， 然后他的这个二等分的这个长度呢用黑色的小圆圈来代替，然后我给这个直角做一个角平分线， 这就是四十五度角，然后这个长度呢这个线段的长度呢就是这个黑色的小圆圈加一个零点三。 那现在呢我可以把这个点，这个点，这个点和这个点用弧线给他连起来，这是厚片的修容弧线， 也就是我经常跟大家说的后 ah。 同样的这个领子呢，我在三分之一的这个位置呢，用弧线给他连起来，那这个就是后领口弧线，这个呢就是后领口弧线。那这个后片的大致呢我们就画完了，现在呢我们来说他的前片， 首先呢我这个前片这个横开领开多大呢？开这个后片的横开领减去一个零点二，我们说后片横开领的尺寸呢，是这个后片横开领的尺寸，是这个大圆加一个小黑点，后片横开领的尺寸减去一个零点二啊，是前片横开领的尺寸。然后呢我过这个点啊做一个垂线， 这个垂线的长度呢是这个尺寸加一个一，然后我给他把这个长方形的画出来， 画出来之后我们把这个线段呢给他二等分， 他的一半呢 我们用一个小三角来代替，然后我给这个长，给这个直角呢做一个角平分线，然后在这呢取一个小三角的长度，现在我可以从这个点呢往这个方向往下移动一个零点五， 然后我们找一下前片的胸宽线，也是我们找一下这个线，这个线的长度呢是六分之 b 加三，这个长度，从这个点呢到这个点他的长度是六分之一加三，然后我做垂线， 在这个线段上从这个点往这个方向取两个小圆圈的长度。 大家还记得这个小圆圈是谁吧？这个小圆圈就是这个小圆圈，对吧？小圆圈有这的垂线，这个垂线的长度呢是在这个的三分之一，我在这边呢给我在这边呢给大家写了一下，这个小圆圈等于三分之一，括号里边的二十分之一加二点九啊，这边呢给大家标注了一下哈，然后我找到这个点之后呢从过这个点呢做这个线段的垂线， 这个垂线我们暂时不知道他有多长啊，就先做一个垂线，然后这个肩线前面的肩线我们怎么确定呢？就是后面的这个肩线，我们要量一下他的长度， 我们量一下这个后间线的长度，也就是 l 是多少，然后用 l 减去一点八，就是前面间线的长度，然后我们用这个长度呢来确定这个啊，这个点呢在哪里？我们要从这开始是起点哈，然后中点呢落在这个线段上，这个线段的长度呢是 l 减去一点八， 这是前片的这个尖线，现在我们把这个线段呢给他二等分， 找到这个中点，然后呢我们过这个点呢做这个直角的角平分线， 然后这个线段的长度呢是一个小黑点的长度，小黑点的长度是多长？ 是这个线段的一半。现在呢我们把这个点，把这个点，这个点和这个点呢用弧线连起来，这是前 a h， 这个就是咱们经常说的钱，然后我们可以把领口弧线给他连起来了， 那这个上面呢就画完了，我们说一下这个下面我们把这个前中心线呀给他往下延长一个三角的长度， 这是三角的长度，这个三角大家还记得在哪吗？是这个的一半啊，然后在这给大家标了三角等于二分之一这个括号里边的这个值，也就说这个三角是他的一半，对吧？然后我们画到这个以后呢，我们找一下这个 bp 点，也就是我们女性的这个胸高点，那我们先把这个胸这个前片的 胸宽线呢找到他的终点， 终点找到之后呢往这个方向找一个零点七， 然后过这个点呢做垂线一直画下来啊，这块呢也是三角，然后从这个点往这个方向去一个四公分呢，找到这个 bp 点，也就是这个胸高点， 这是 bp 点，然后把这两个点呢连起来， 然后把这个点往这个方向移动一个两公分，这样呢给他连起来。好，这边呢连起来， 那这个就是啊圆形的，这个上身的圆形的画法，那我们画完了之后呢，还要在这个基础上去画他的绳啊，他有几个绳，一个是尖绳，一个是后片的这个腰腰结绳啊，前片呢，这还有个腰结绳，因为这因为我们女性的身体呢，他是有一些曲线在里边，所以我们要去收这个绳啊，但这个呢啊，我们这一个， 我们这一次呢先讲这个啊，圆形的一些这样积累的画法。然后下一次呢我再给大家讲这个绳是怎么画的，还有这个绣圆形怎么画？

如何创建圆形事件？圆形事件由四个内容组成，触发操作目标动画。我们简单给画板里的这个按钮创建一个圆形事件，触发条件设置为鼠标，单机操作为跳转道， 目标是画板二。动画，选择一入动画的参数就默认这样，然后点击上方演示按钮，我们点击按钮画板二从右边一入，就是这样圆形实现了真实软件界面切换的交互效果。

今天呢，讲一下 ios 系统原型怎么画？首先呢是打开 pose 啊，先拖拽一个剧情到工作区， 把它的页面尺寸修改为七五零幺三三四像素，然后呢把视图缩小，便于这个制作的过程当中观察。第一步呢，我们先 利用这个主页的完整的尺寸框架复制一个，并且把它的高度修改为四十像素，用来呢制作状态栏的这个框架，并且呢对他进行一个对齐， 然后呢再把状态栏再复制一遍，给他一个高度为八十八，主要是用来制作导航栏啊， 苹果系统的导航栏就是状态栏下方这个位置，再对他进行一个对齐操作，再把导航栏的这个线框呢复用一遍，复制到下面， 然后给他修改尺寸为九十八像素高，这个呢就是他的标签栏，然后再对他进行一个对齐。 接下来呢还是复制这个导航栏的框架，把它修改为高度两百二十二，这是属于 呃主功能区，就是因为我们做的是支付宝的首页的原型，所以 呃基本上是严格按照支付宝 ios 版的这个圆形的功能界面去制作， 也同样要对他进行对齐操作。 然后呢再把这个区域进行复用， 修改它的尺寸高度为三百四十六啊，你们会发现这里的所有的尺寸的都是偶数，因为单数的这个基数的这个图形 在导出的时候会出现虚化的这个边缘的现象， 也不符合这个 ios 的设计规范。好，接下来继续复制他制作一个这个他的 功能图标，下方啊有一个通知栏，这里呢呃，主要是调整他们之间的一个距离，就是线框之间的距离， ios 的线框的距离之间呢，有两个标准，一个是近距离，就是两二十个像素， 远距离的就是三十个像素。然后就是制作这个通知栏下方的一块内容区域，当然这一块 也和这个下方这个比较窄的通知区域呢，有一个二十像素的间隔。接下来做这个导航栏当中的图标，图标的标准是在四十四像素之内， 四十四乘四十四像素啊，再拖拽文本，这个文本呢，我们是给他啊，应该是二十四个像素大小， 三十四， 给他一个搜索框，搜索框在这里呢，呃，是五十八像素高， 然后对他进行一个对齐的间隔，对齐啊， 就是居中，在垂直方向上的居中，由于这个 pcsr 呢，他在线编辑呢，其实他对齐功能啊，好像还是有很多 bug， 虽然总体来上来讲比较方便，但是有些地方还不尽这个好用，不是特别的好用。然后再 搜索框搜索这个十字交叉的这个加法号，这个图形搜到以后呢，再把它拖拽到这个相应的位置， 当然大小也要对他进行一个调节，修改是按照四十四乘四十四去修改， 当然这个呢，你也可以事先在其他的软件图形软件当中准备好，然后直接导入，或者能下载 ios 的这个，呃， gy 的这个 ui 的 cat， 还有这个包从中呢去导入。接下来做这个功能区图标的就是内容区啊，内容区， 呃，支付宝内容区的一个图标，和他相应的这个内部啊，就是文本标签， 然后对他进行一个复制，并且呢最后也要把他们对齐，然后我们会发现在 制作这个圆形过程当中啊，对齐啊，尺寸啊这个概念始终都要非常强调，很重视才行， 包括这个编剧啊，你像 i s 的这个设计的编剧，他也有相应的规范要求， 那后面呢，我们会专门针对间距呢？嗯，做一个单独的视频 好底部标签栏图标文本 复制完成，再对他进行一个操作。底部标签栏图标的尺寸是五十乘五十像素， 当然他不一定是方的，但是不管他是什么样的形状，他的大小只能在这个五十乘五十的尺寸空间里去设计， 而不能超出上方的这几个。最大的这个图标呢，我给他七十八乘七十八的尺寸，像素的尺寸 啊，文本也是最大的，应该是在呃这里面最大的一个，呃二十八像素， 顺带呢直接把它修改为，嗯，他真实的这个功能， 或者说真实的标签， 同样也是要复制对齐 还有间隔这些工具呢，在做 ui 设计的过程当中啊，你是无法逃避的， 而且呢要一定要掌握，仅仅靠肉眼去分辨的话，这个太难了，这个是也是不合乎，呃，不合乎规范的， 他很多这个圆形工具，他都默认对这块有一个很好的支持， 然后做一个复制一个四十四像素长宽的 图标到这个系统通知栏当中，再做相应的文本去模拟。 当然我们说这个支付宝啊，也已经先后这个迭代了很多的版本啊，目前的这个阿尔卑斯的支付宝的，呃 页面的，呃，可能不是这样子，因为我在做这个圆形的过程当中啊，并没有去对照现在支付宝的 ios 版的这个页面，我是找了一个，呃，大概是 ios 就是 iphone 八推出时候，那个时候的支付宝的页面，然后根据那个时候的页面设计做这样的一个圆形。 当然呢，这个设计规范呢，是根据 iphone 八所支持的这个呃 标准来去做的。那我们知道，当这个 iphone 十 ios 十一推出以后呢， 不仅有这种普通屏的设计规范，又出现了一个全面屏的设计规范，其中包括一些对刘海区呃等等相应间隔间隔的一些标准。 在本奖当中呢，我就不在此做一个坠数， 这里呢，再录入新文本去 模拟真实的这个 app 发布以后这个功能区要完成的一个内容。 最后呢，我们上传这个图片去导入一个状态栏，当然一开始呢，不去做上房状态栏的这个线框也是可以的，一开始去导入状态栏也没问题，但是一定要注意，导入的这个状态栏的 图片，他一定是严格按照七五零乘四十 px 这个标准。接下来呢， 在做一些细节，比如说搜索框当中的放大镜投标啊，这里所有的圆形当中的这个巨型啊，实际上如果你要做的更进一步的话，那是需要把它呃 这个改变成什么呢？改变成就是真实的就是最终版的这种图标的形状啊，当然不一定是彩色啊，黑白也可以， 毕竟我们呃我在演示这个版，演示这个原型制作呢，他主要是以这种低保证为标准的， 所以很多东西可以去用一些这个线框啊，简单的形状去替代， 当然这样做出来的视觉效果肯定不如你用真实的图标来去制作啊，这就是最终的结果。这里提醒大家一些尺寸啊，会在 这里标注出来，你们注意查看，来对照一下，包括文本图标的尺寸字号。 哎，基本上 这个支付宝 ios 版的首页的圆形制作呢，就讲到这里。