使用AI进行网页UI设计，附关键词描述案例！

关注▲Clip设计夹后台回复“进群”加入设计成长群

设计夹的第148篇文章分享

Halo，这里是设计夹，今天分享的是「用AI做网页设计」。

在之前的文章中，陆续分享过用AI进行APP界面设计、B端设计、组件设计等内容，接下来继续分享在网页设计中，AI能够发挥出怎样的作用，有哪些必备的关键词描述。

AI中有哪些针对网页UI设计需要特别注意的描述规范呢，结合实际的应用案例，一步步生成网页设计。

使用否定描述

在Midjourney中，生成网页设计通用的关键词描述包括「web design for…」、「beautiful website for…」

其中描述指令「--no」指令功能很强大，但很多人可能对这个指令不熟悉。「--no」能告诉Midjourney你不想让图像中出现哪些内容。

例如设计一个航班网站，想在网站中使用简单的图形和插画，可以使用关键词：「web design for a flight discount service」

Midjourney出图的的默认风格更倾向于写实，不加否定提示，生成的网页会带很多细节和阴影。

我们使用同样的描述，再加上否定提示，生成的图片会更符合要求：

「web design for a flight discount service –no shading realism photo details」

注意比例

进行网页设计时，还需要考虑网页的比例，可以使用「--ar」参数来控制生成的图像的比例。

例如使用「--ar 3:2」或者「--ar 16:9」的宽高比，会让生成的图更像网页比例。

对比使用相同的关键词提示，会发现正方形的构图看起来更像是信息图表。当宽高比增加时，图像的内容也会发生变化。

关键词：「web design for a plant database, minimal vector flat –no photo detail realistic」

关键词：「web design for a plant database, minimal vector flat –no photo detail realistic –ar 3:2」

使用电脑样机

为了让生成的网页效果更好，我们往往会使用样机对页面进行包装，在Midjourney中可以使用描述：「行业或网站样机样式 + 网站样机+描述」

例如输入酒店网站描述时，默认不带样机：

「web design for a hotel website –no shading realism details –seed 1024912」

如果想要一个带有样机的酒店网站网站，需要输入关键词描述：

「web design for a hotel website MacBook m1 mockup –no shading realism details –seed 1024912」

AI网页设计应用案例

本次实操案例以球鞋类电商网站为主题，探究AI能够为网页设计带来的创意灵感。

⬇️关键词：「beautiful website for shoes,ui, ux, ui/ux, nike, website –v 4 –stylize 750」

⬇️关键词：「beautiful website for shoes, ui, ux, ui/ux, nike, red, blue, teal, yellow, running person, website –v 4 –stylize 750」

⬇️关键词：「beautiful website for shoes ,ui,ux,ui/ux,red,blue,yellow」

⬇️关键词：「beautiful website for shoes, ui, ux, ui/ux, nike, blue, white, website –v 4 –stylize 500」

⬇️关键词：「beautiful website for shoes, ui, ux, ui/ux, nike, light pink, white, website –v 4 –stylize 1000」

⬇️关键词：「webapplication for nike jordan stock maret type interface for trading shoes, ui,ux,ui/ux, app like robinhood but for shoes」

⬇️关键词：「beatiful website for shoes, ui, ux, ui/ux, nike, orange, green, running person website –v 4 –stylize 500」

最后

以上是利用Midjourney进行网页UI设计的方法和实操，希望借助这些关键词描述能帮助你提升灵感，更快更好地输出设计！

为了能让大家更精准掌握AI关键词的运用，设计夹推出了一本150页的《AI绘画关键词教程》电子书，这本书主要面向刚入门，对关键词描述不够准确的AI用户。

⬇️点击查看详情⬇️

整本PDF电子书包含12类AI绘画方向，1000+绘画关键词，图词一体，方便快速预览/复制，后期会持续免费更新内容。

通过查阅关键词清单，能有效避免反复尝试关键词产生废稿，系统、规范地掌握AI创作方法。

后续会分享更多「AI创作」相关的文章，记得星标关注推送哦～

慢慢来比较快，如觉得有帮助，

请点个赞&在看，谢谢！

添加微信,邀你进设计成长群⭐️

---

Tips:这里有1对1设计辅导，持续更新AIGC干货、设计规范、作品集、答疑解惑…感兴趣可扫码加入，一起成长！⬇️