APP界面设计<手把手教你用Inkscape绘制结构切片图

2017-07-19 本文已影响91人 MindBrewer

前言

大家平时给老板做产品设计稿的时候，是不是经常需要用到许多原型工具呢？而这时候，一个美观的UI展示原型，或许在会议上给你的设计大大增加说服力噢，今天给大家带来的是作者菌在学习Inkscape过程中做的一个小练习，通过复刻<简书>的基本界面，与大家分享如何绘制美观的APP UI 切片结构图，让你的界面层次一目了然。

appdesign53.png

逐步教程

Step 0

首先，给大家介绍一下我们今天使用的工具Inkscape [下载链接请戳这里(https://inkscape.org/en/) ]，Inkscape是一款开源社区支持的矢量图绘制工具，支持包括png,jpg等格式的导入导出，支持贝塞尔曲线工具，并提供强大的文本工具支持，更重要的是，Inkscape完全来自开源社区，是免费的噢！比起为了Illustrator 高昂的版权费而愁眉苦脸，还是让我们张开双臂，一起拥抱开源吧，手动斜眼。

Inkscape_Logo.png

Step 1

好了，工具就位，大家首先打开Inkscape，可以看到左边是类似PS和AI提供的一系列绘制工具，右边则是自定义窗口，中间那块画布就是我们接下来工作的地方啦，具体工具的用途大家可以自行百度，或者在评论下面留言，作者菌一定知无不言言无不尽～

appdesign0.png

我们在绘制移动端界面时，首先给自己找一个参考，作者菌作为一个忠实的米粉，在这里当然是给大家推荐小米六啦～图片有很多大家可以在网上自行选择，或者直接下载作者菌提供的资源噢 ↓

小米六渲染图(http://www.guphotos.com/images/P/4/PZ0041B-US-64/PZ0041B-US-64-1-cc0f-2UeN.jpg)

点击菜单栏的File -> Document Property (或者直接按快捷键Ctrl + Shift + D)呼出文档属性设置，在 <Page> 分栏内，我们暂时设置如下:

appdesign4.png

Step 2

导入参考图片，点击图片，把透明度设置成50%左右。

appdesign5.png

如果设置透明度的面板没有出现，可以点击最左边那个按钮呼出。

appdesign2.png

Step 3

在左边面板上选择矩形工具，根据图片的尺寸画一个一模一样的矩形覆盖在参考图上面，保持矩形工具选中状态下，拖动矩形右上角的那个小圈圈，给它加一个圆角。

appdesign6.png

Step 4

同样使用矩形工具，给我们的手机加上屏幕，注意这次可以暂时把屏幕设为黑色，不透明度100%。

appdesign7.png

点击最右边那个按钮恢复直角。

appdesign8.png

Step 5

将黑色屏幕复制多几分备用。

appdesign9.png

Step 6

按住Shift，使用左边的选择工具(光标)依次选中手机面板和屏幕，然后再在屏幕上点一下鼠标左键，进入旋转模式。

appdesign10.png

这时按住Ctrl，拖动上边界中央箭头向右旋转两个角度，然后再拖动上边界右侧箭头向右旋转两个角度，旋转后我们的图片是这个样子的：

appdesign11.png

Step 7

选中两个矩形，按Ctrl+D复制一份副本，按住Ctrl将其拖到下面一点点的位置，变成这样：

appdesign12.png

然后到左边面板选中贝塞尔曲线工具

appdesign13.png

Step 8

滚动鼠标滚轮，放大至手机的边角处，沿着边界的缝隙绘制一个三角形:

appdesign14.png

保持贝塞尔轨迹选中状态，按住Shift，点击选中手机下方颜色较深的矩形面板

appdesign15.png

到菜单选择 Path -> Union

appdesign16.png

两张屏幕间的边角现在应该合上了

appdesign17.png

Step 9

另一边同样处理:

appdesign18.png

Step 10

拖一个选框，选中绘制好的手机模型，为他们创建分组:

appdesign19.png

appdesign20.png

Step 11

这时候我们如果还想给手机加一个Home键该怎么办呢？别急，切回选择工具，用同样的方法逆时针旋转４次，恢复原来的样子：

appdesign21.png

继续用矩形工具画出Home键:

appdesign22.png

重复操作，恢复视角:

appdesign22.png

Step 12

打开对齐面板，在Align -> Relative to 一栏选择 <Last selected>

appdesign24.png

找到其中一个之前准备好的黑色屏幕，在上面随便画出几个矩形:

appdesign25.png

逐个选中这些小矩形，到对齐面板的 Distribute 点击 <Make vertical gaps between objects equal>

appdesign26.png

这时候，我们的矩形就被均匀地分布在屏幕上啦:

appdesign27.png

Step 13

稍微调整上下两侧的矩形高度，作为导航栏:

appdesign28.png

Step 14

根据应用界面布局，导入图标文件(最好是svg格式，方便后续处理)平铺在屏幕界面上，作者菌使用的图标库是阿里巴巴的 IconFont，大家可以根据偏好自行选择。

appdesign29.png

全选，合并为组

appdesign30.png

Step 15

同样方法完成<发现>页面的元素填充:

appdesign31.png

appdesign32.png

现在画面看起来应该是这样子：

appdesign33.png

Step 16

选中手机屏幕背景，按Ctrl+D复制一份副本，点击图层切换按钮将其移动到四个彩色小矩形下方:

appdesign1.png

按住Shift选中背景和最右边的小矩形，点击 Path -> Intersection

appdesign34.png

裁边之后，看起来应该是这样子:

appdesign35.png

Step 17

同样方法完成消息页面:

appdesign36.png

Step 18

进入最后一个页面，导入自己的形象图片，按住Ctrl用椭圆工具在上面画一个圆:

appdesign37.png

选中绘制的圆形和图片，点击Path -> Intersection，将其裁成圆形头像。

appdesign38.png

点击填充面板，切换到 Stroke paint，给图像描边:

appdesign40.png

Step 19

完成剩下部分:

appdesign43.png

滚轮缩放返回原视角：

appdesign44.png

Step 20

选中四个子页面，在对齐面板中选则Align -> Rrelative to -> Page，然后分别点击垂直居中、水平居中对齐按钮将它们对齐到屏幕中心。

将页面分别旋转四次，变为立体视角，同时按住Ctrl拖动把它们分开一点点：

appdesign45.png

Step 21

这时候参考背景图已经完成了它的使命，让我们把它移出画布区域:

appdesign47.png

Step 22

点击File -> Document properties 为图片选择一个合适的背景色:

appdesign48.png

Step 23

回到画布中央，选中最上层的页面，Ctrl+D复制一份副本，将副本向下拖动一点点，到上方面板点击Ungroup按钮，可以多点几次，保证所有分组都被解绑:

appdesign49.png

保证组件元素选中，点击Path -> Union，将组件合并成一个大矩形色块:

appdesign50.png

Step 24

稍微调整颜色和透明度，使其呈阴影状：

appdesign51.png

Ctrl+D复制阴影，令阴影副本与下方的页面正好重叠，然后选中两个阴影块，点击Path -> Intersection:

appdesign52.png

这样一层漂亮的阴影就裁出来啦！

Step 25

微调一下整体细节，收工！