iOS开发转产品-工具篇

前言

作为一名iOS开发一直有一个做产品的心，但是迟迟没有往前走，新的一年，值得去展望一下，2022年给自己定下一个小目标，学习掌握墨刀和Sketch的使用，先踏出一小步，再去下载学习一下App Store各个模块比较好的产品，借鉴思考，想想为什么这些产品可以成功，帮助人们解决了哪些问题，最后再去沉淀一下，这两天刚好有时间就用墨刀写了一个原型和sketch画了一张设计图，记录一下

为什么选择学习墨刀？

最开始对产品文档的工具没有什么了解，查了一下目前用的比较多的有Axure和墨刀，经过对比，Axture更适合比较进阶、全面的学习，墨刀相对入门比较简单，再就是Axure破解版没有找到资源，另外现在公司产品原型也是用墨刀来制作的，所以就确定使用墨刀作为学习对象

墨刀的使用

我使用的是墨刀的web版本，直接在线制作，有一个月的免费试用期，注册登录完成后就可以新建一个项目，先直接按照新手引导操作一遍，然后就可以新建一个页面，修改为你的标题，添加画板，往里面添加控件和元素就可以，非常简单，就和xib布局一样，也可以添加事件，进行跳转或状态变化，有些复杂的交互或者逻辑，可以通过标注进行说明，感觉最重要的就是这个标注，怎么简洁、清晰的向开发阐述你所要的，再画原型的过程中，右上角有一个预览按钮，点击可以选择真机进行实时预览看原型效果，这里附上我练习的产品文档（有点简陋，练习了一天），需要勤练习，孰能生巧，有好多功能需要慢慢学习，提升效率

旅行地图原型

为什么选择学习sketch？

制作UI比较常用的有ps和sketch，经过了解，ps更侧重于图片的处理，相对sketch功能也更全面，sketch更偏向于UI图的绘制，上手相对要简单一些，所以就开始学习sketch了

sketch的使用

sketch本来打算也是安装破解版，找了许久没有找到，于是就去官网下载了，也是一个月的使用期，下载完成后就可以新建一个文档进行开发，这里没有新手引导，一进去会很懵，网上查了一下教程，都不详细，最后发现sketch自己的教程就非常清晰，左上角点击帮助，进入帮助中心，这里好像只有英文文档，英文不太好的可以和我一样，选择科学上网，Google翻译成中文，先对着文档学习一遍，就大概了解到sketch界面的布局，每个按钮是用来做什么的，过了一遍后我们就开始进行UI的制作了，可以随便找一个APP页面进行模仿

建立画板，添加iOS组件

还是一样先建一个画板，这里我是准备制作iOS的设计稿，所以选择iPhone11为画板，下一步就是添加状态栏，这时sketch并没有组件，我们需要去Apple Design Resources下载组件，下载完成后添加到组件库，这时就可以添加状态栏、导航栏、label等iOS组件，临摹别人的页面，突然会发现人家的页面上有icon图片，这我们该怎么弄，破解APP砸壳，拿到对应的图片资源，不不不，你现在是一名UI设计师，哈哈，不要慌，这时我们开始学习制作icon，基本上这些icon都是通过三角形、圆形、矩形等一些基础图形进行组合形成的

制作icon

这里我们再新建一个页面，起名为icons，添加一个矩形画板，添加一些基础图形，拼接成你要的样在图形的拼接过程中，右上角有四个矩形拼接的按钮分别可以进行合并或者取交集进行裁剪等等操作，这个功能需要自己去试一下，有些icon会用到，最后将所有子元素进行创建一个新的控件就可以了，还有一些icon本身就用到一些素材icon，比如删除、问号等icon，我们可以去素材网站进行下载，贴过来，但是不是很麻烦，这时Sketch Iconfont就派上了用场，非常轻松管理自己的图标字体，具体操作可以看 Sketch Iconfont

设计稿上传到蓝湖

icon制作完用图像进行布局，这里需要通过右侧面板进行导出，不然上传蓝湖，开发下载不到icon，其它布局就是xib一样，设计稿完成后就需要上传到蓝湖交给开发了，于是我们需要先去下载对应的sketch插件，下载安装完成后，我们就可以在插件中看到蓝湖，可以进行设计图的上传，我们上传间可以先对设计图进行走查，看还需不需要修改，确定后可以进行单页或全部进行上传，上传完可以自己再核对一下，看布局有没有问题，icon有没有漏切（这里很重要，本人开发过程中经常会遇到icon漏掉的情况，需要再去向UI要icon），这里也附上练习的UI设计图

旅行地图首页

经过两天的练习，对墨刀和sketch有了一个简单、初步的了解，墨刀制作原型相对sketch要简单一些，做产品原型更重要的是产品思维，UI更重要的是细节的把控，但是都有一个共性，需要熟练的掌握他们的工具，才能把东西做出来，所以后期有时间需要继续去学习更多的功能，熟练的掌握，加油