以下是一些可以让 AI 生成好看的移动端 UI 界面设计的工具及相关方法:
Clippp Clip设计夹2023-04-24 09:02发表于北京原文:https://mp.weixin.qq.com/s/P6Ltktqx0W6JSFbMJTM1xw今天为大家分享的是「AI工具Midjourney」。目前国内外有很多热门的AI绘图工具,其中Midjourney是目前我觉得最容易上手的工具,对于完全不懂AI绘图、想试试看的新手来说,是很不错的入门选择。而且现阶段的AI已经能辅助进行设计,视觉效果相当吸睛。那么UI/UX设计师能用Midjourney加快哪些设计流程呢?我们一起来通过具体的实操,从主体、配色、风格等方向探索AI在设计中的应用![heading2]AI设计指令[content]Midjourney中没有固定的Prompt(指令)来生成某种APP,具体想要什么样的效果要多多尝试。如果没想好要输入哪些指令,可以先用这个指令模板:「ui design for[类型]application,mobile app,iPhone,iOS,Apple Design Award,screenshot,single screen,high resolution,dribbble」把里面的「类型」替换成你想设计的产品的关键词描述(英文),就能生成想要的UI设计图。来看看几个示例~出行类关键词:「距离、车费、费用结算、优惠金额、地图」等。餐饮类关键词:「介绍咖啡的特色、口味、咖啡豆产地、价格」等。运动类关键词:「卡路里、步数、距离、某种运动」等描述。
完成这个搭建,你就可以拥有一个本地小应用了!如果你还会应用发布/代码兼容适配,还能上架到网页/小程序中。方法一:直接使用Coze的API对接前端UI框架,将工作流逻辑集中在工程模板端,实现前后端分离的处理方式。方法二:直接调用大模型API,并通过前端代码实现提示词处理和逻辑控制,将交互流程完全放入前端代码中。如何实现文件上传通过Coze的[上传文件接口](https://www.coze.cn/docs/developer_guides/retrieve_files),用户可将本地文件上传至Coze的云存储。在消息或对话中,文件上传成功后可通过指定file_id来直接引用该文件。Coze的API与工作流执行关于API的使用及工作流执行流程可以参考[相关文档](https://www.coze.cn/docs/developer_guides/workflow_run)。若用户需要通过前端展示文件或流程结果,可以通过以下两种方式实现:[heading3]2.2.1我是如何设计界面[content]搭建Demo最简单的方式是首先绘制草图,然后借助多模态AI工具(如GPT/Claude)生成初步的前端结构代码。前端开发语言简要说明HTML:用于构建网页的基础框架,定义整体的页面结构。CSS:负责网页的布局样式美化,使页面视觉效果更优美。JavaScript:实现交互逻辑,如信息处理、网络请求及动态交互功能。
如果想指定AI生成某个页面(首页、登录页等),只需要再加一段页面指令描述就可以,例如「landing page、Profile Page」。社交平台关键词:「landing page」,一个社交平台的登录页设计就出来了。信息类关键词:「Profile Page」,生成人力资源类产品的个人资料页,里面包含照片、自我介绍、基本信息等内容。最后通过一系列的AI出图操作能发现,Midjourney产出的设计图视觉效果都很不错,更适合在APP设计的初始阶段,例如头脑风暴和风格探索等过程中,为设计师提供更多灵感和创意。如果想让Midjourney产出的UI设计图直接落地开发,目前来看仍有一段距离,但按照AI现在的技术迭代速度,这个距离应该也不会太远…