前端自给自足UI规划稿?(Midjourney+MasterGo)
前语
最近在自己做一个可能有意思的项目。关于公司的项目，一般都是有对应的UI规划稿作为参照开发的，而关于自己之前的一些小项目，更多则是套用模板，想到哪写到哪这种方法写的前端页面。
后者这种方法肯定是不对的，就好比咱们写代码要先写技术文档，再来写代码相同。
笔者在做现在这个项目的时候，就吃了“想到到哪，写到哪”的亏，一个是没有一致的色彩，别的一个便是页面款式调来调去，而这个调来调去是基于代码改来改去，本钱较大；就好比DOM更新时一种是直接挑选DOM进行比较，别的一种是运用虚拟DOM这种蓝图进行比较相同。
接下来就用十分火的Midjourney + 一个国产规划软件MasterGo来尝试规划一个页面，希望对你有所帮助…
运用Midjourney
首要，Midjourney运用十分简略，在官网注册并加入discord讨论区就能够了，这儿就不过多赘述了，究竟这个现已火了很久了，相关教程也比较丰富…
值得注意的是，咱们一般能够在newbies新手区创立属于自己的子区，这样咱们发出的消息就不会被很快改写掉。然后就笔者自己的感受，晚上比较拥堵，早上比较流通。
创立子区的入口：
目前，咱们能够运用该AI服务满足如下UI规划需求：
- 做UI规划稿供参阅
- 做icon
- 做logo
- 做插图
下面笔者仅以做UI稿为例进行演示…
提示Midjourney
然后咱们就能够输入/imagine [提示词]运用该服务器AI绘画的服务，比方：
/imagine icon for iOS app in high resolution, burger, high quality, HQ — q2
咱们一般能够按照关键词，关键词，关键词...这样也能够生成比较好的作用，这样其实就不必太注意英语语法了，只需要翻译一下关键词就能够了。
如下是笔者的一个生成进程：
1）开端
由于是需要生成UI图，为了让AI更清楚的理解这个需求，所以笔者在这儿增加了Figma关键词
输入community study and discuss app, mobile app, user interface, Figma, HQ, 4K, clean UI — q2
2）改写一下
似乎不太满足，这儿点击右下角的改写按钮，从头生成：
3）增加many pages关键词
然后发现其实笔者需要比较多的页面进行参阅规划，所以下一条指令又增加的many pages的关键词：
community study and discuss app, mobile app, user interface, many pages, Figma, HQ, 4K, clean UI — q2
4）挑选比较满足的版别
这儿笔者觉得上述生成的第四个版别比较不错，所以挑选V4，让AI基于此图生成风格相似的图片：
5）运用其中的图片
这儿笔者觉得图一不错，想要其中的大图，所以挑选上述选项中的U1按钮，生成如下图片：
到此为止，根本上有一个能够供规划参阅的UI规划稿了，全体风格咱们就能够参阅这些不同的页面。可是，假如咱们想要规划其中一个页面的概况呢，比方一个个人主页这些页面中就没有包括，所以咱们假如想持续规划，就仍是得持续去问AI
6）规划个人主页
这儿，咱们在原有关键词的基础上增加了single profile page来生成咱们预期的界面：
community study and discuss app, mobile app, user interface, single profile page, Figma, HQ, 4K, clean UI — q 2
如下是生成的作用图：
运用MasterGo
此刻，咱们根本上有一定的规划灵感了，然后就能够开端画图了。至于为什么挑选MasterGo：个人免费，该有的功能都有，国产对国人友好，上手简略…
关于我这种非深度运用规划软件的人来说，这个软件刚刚好
关于一个程序员来说，各种软件运用的数量应该十分之多，乃至便是做这些软件的开发者。所以关于这款软件的根本运用，由于篇幅有限，我这儿就不详细介绍了，相信你自己去多点点就啥都会了
B站也有他们出的官方教程，也能够自己去看看，不过该教程更多是讲解软件的运用，一些UI规划的基础知识并没有详细讲解
接下来咱们就依据参阅图来规划一个UI稿
1）标准主题
咱们能够依据参阅图先标准咱们的主题色彩，比方背景色彩，前景色等等；标准咱们的文字款式，比方标题、正文、注释都可能有不同的巨细、字体，乃至于色彩等等，然后能够在MasterGo里面设置为模板，模板功能仍是十分常用的：
无论是色彩，描边，特效（暗影、含糊这些）都能够设置为模板便利后续运用：
然后咱们就能够增加和办理相应的模板了。
2）根本概念介绍
假如你学过PS、AI这类软件，这一小部分你能够跳过
- 页面：相当于便是一个分组
- 容器：容纳咱们规划图形的地方
- 图层：相似于前端的z-index
- 钢笔东西：能够制作简直你能想到的一切曲线
根本便利操作：
- 空格拖动
- ALT点按复制
- ctrl+滚轮缩放
根本上都是其他规划软件通用的一些便利键，所以我们能够自己按照所想试试就知道了，反正便是ctrl、alt、shift这几个键按着试呗，比方正方形咱们能够按住shift拖动，从中心出发的正方形咱们就能够再按住alt就能够了…
3）导入根本库
咱们能够导入一些模板，比方uni-app的uni-ui的sketch文件，或者一些其他的社区资源等等，便利咱们直接运用…
4）开端制作
然后咱们就能够开端制作了，制作进程十分简略，根本上给出的三个图形：
- 矩形
- 圆
- 直线
就能处理大部分的图形制作需求，略微杂乱一点的用钢笔也能容易制作，这儿也不详细演示了，我们作为前端程序员略微上上手应该就能容易运用该软件
最后
东西的运用总的来说都是十分简略的，可是UI规划师的重要本质是审美才能，这一部分并不是容易能获得和提高的，如下是我在方才演示进程中规划出来的两个页面：
感觉仍是不是很满足，话不多说了，我持续去调排版和款式了
