美文网首页
第二周 原型图制作

第二周 原型图制作

作者: Dimples宇 | 来源:发表于2018-03-12 14:35 被阅读47次

界面设计需要了解不少的规范,但是我们以激发大家学习的热情为首要前提,所以先了解一些简单的知识。

01 苹果手机更新换代,所以有很多不同的尺寸,一般以750*1334px为设计原型进行制作,之后会根据不同的需求来进行切图。

如上图,px是像素的单位,在750*1334px的界面图中,状态栏高40px,导航栏高88px,标签栏高98px。所以我们在设计的时候一般会用辅助线把规范的高度标注出来。

安卓英文字体选用Roboto,中文用思源黑体

IOS系统英文字体使用San Fransico,中文用苹方体

我们先简单了解到这里,现在开始我们这周的任务教程。

01 打开PS原型图后,先文件——另存为——新江湖积分原型图(这么做的目的是把源文件保留,在制作的过程中要养成每隔一段时间,ctrl+s保存一下文件,防止程序崩溃)

02 用裁剪工具将画布拉大;

解锁背景图层,选中背景图层,单击前景色,会出现一个吸管工具,将吸管工具点一下背景,即可吸取背景颜色,alt+back键盘填充前景色

03 选择矩形工具,在画布上随机单击一下,会出现创建矩形的窗口,分别绘制出750*1334、40*40、88*88、98*98像素的方形。

04 视图——标尺,将标尺调用出来;将鼠标移动到标尺上,长按拖拉即可出现参考线,对图形添加参考线。

模板中没有按照使用的尺寸来设计,所以需要我们自己绘制出标准的画布,正好学习一下矩形工具和参考线。

06根据草图,从模板中寻找到相似的元素,复制到刚建立的方形中。选择移动工具,确保自动选择打勾并选择右边的图层。(这样在画布上点选图形,就会自动跳转到该图层了)。用移动工具框选所需要的元素,按住alt键的同时拖动图层,即可复制出元素,移动到合适位置,ctrl+T调整大小。

07 同时也可以自行绘制图形,如插入圆形图,选择圆形工具,在合适位置按住shift键画出圆形,ctrl+T调整图形大小。

06 其他圆形可以直接按住alt键拖动图层,即可复制出同样的圆形。将其放置在合适位置。最后用对齐工具进行对齐调整。

将所有对齐的圆形全部选中(按住shift键点选),运用对齐工具,进行对齐。有水平居中对齐、靠左靠右对齐、水平均匀分布和垂直均匀分布,大家都可以点选尝试一下。

07 有文字的地方可以拖动模板中的文字进行填充,也可以用文字工具输入合适的文字,如果有些字体没有安装的,都选用苹方或思源黑体;

字体大小设置

标题栏中间字号:36px

标题栏侧边字号:32px

商品名称的字号:28px

店铺名称的字号:24px

08 图层移动的快捷键:

选中后Ctrl+]向上移动一层

Ctrl+[ 向下移动一层

Ctrl+Shift+]移动到顶层

Ctrl+Shift+]移动到底层

总结:这次运用到移动工具、矩形圆形工具、截图工具、填充工具、尺寸放大、对齐工具、参考线绘制的知识点,有点小多,大家一定要坚持下去哦,操作多了就熟练啦!

相关文章

  • 第二周 原型图制作

    界面设计需要了解不少的规范,但是我们以激发大家学习的热情为首要前提,所以先了解一些简单的知识。 01 苹果手机更新...

  • 项目开发-原型图与建表

    项目需求文档过后以其为依据开始制作原型图,构建原型图采用了在线原型图制作网站xiaopiu。 关于原型图制...

  • 如我所知——Axure

    如我所知,axure是一款制作原型图的软件,或许还可以制作其他的东西。我所知的,就是给移动端做原型图的。 ...

  • Axure原型设计——轮播图

    轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或移动端的原型都非常实用...

  • 原型图和流程图

    原型图和流程图是在产品小白成长过程中必不可少的伴侣,需要对流程图、低保真、高保真原型的基本制作要求有所了解,...

  • Sketch常用快捷键总结

    作为原型dog,经常需要使用Sketch制作原型,以便设计大大可以理解我们的意(you)图(zhi)和(de)想法...

  • 产品开发流程

    一般情况下是: 产品经理(PM)整理需求,制作需求文档,原型图。 设计师在需求文档和原型图的基础上,出设计稿。 程...

  • Axure神奇操作系列 - 循环(第一讲)

    Axure神奇操作系列 - 循环(第一讲) 众所周知,我们使用Axure不仅仅能够制作原型图,也能在原型图中实现一...

  • Axure骚操作系列(1) - 循环

    Axure骚操作系列(1) - 循环 众所周知,我们使用Axure不仅仅能够制作原型图,也能在原型图中实现一些复杂...

  • 25组-174-杨毛一 第8天作业 #裂变增长实验室#

    我是杨毛一,今天是10月28日,是裂变增长训练营3期第8天。 今日作业:制作3个海报原型图 海报原型1: 海报原型...

网友评论

      本文标题:第二周 原型图制作

      本文链接:https://www.haomeiwen.com/subject/nkmnfftx.html