莫高设计

一个APP或者网站真正进入开发之前，通常需要先解决一个问题：页面应该怎么设计，用户又应该怎么操作？

如果只靠文字描述，很难把一个产品完整表达出来。产品经理、设计师和开发人员也容易因为理解不同而产生沟通偏差。

MasterGo（莫高设计）是一款面向产品和设计团队的在线设计工具，可以用于UI界面设计、产品原型制作以及团队协作等场景。它不仅可以帮助设计师完成页面设计，也可以把产品想法进一步整理成可展示的原型。

对于正在学习UI设计的用户，MasterGo也可以作为练习产品页面和交互设计的工具。

MasterGo是什么？

MasterGo是一款在线产品设计工具，主要用于UI设计、原型设计和团队协作。

简单理解，就是把一个产品从“想法”逐渐变成“看得见的页面”。

例如你准备开发一个电商APP，可以先设计首页、商品列表、商品详情、购物车和个人中心，再按照用户的操作流程将这些页面连接起来。

这样在程序真正开始开发之前，团队就可以提前看到产品页面和基本操作流程。

MasterGo可以用来做什么？

1、制作APP和网站UI

MasterGo可以用于设计网站、APP、小程序以及其他数字产品的用户界面。

设计师可以根据产品需求安排页面中的文字、图片、按钮、图标和其他界面元素，再通过多个页面组成完整的产品界面。

对于初学者来说，可以先从登录页、注册页、个人中心等简单页面开始练习。

2、制作产品原型

UI设计主要解决“页面长什么样”，而原型更关注“用户怎么操作”。

比如一个内容类APP，用户点击首页中的文章卡片后，需要进入文章详情页；点击收藏按钮后，还应该能够在收藏页面找到对应内容。

这些操作流程都可以通过原型进行展示。

在产品开发之前先把流程跑一遍，有助于发现一些页面之间的逻辑问题。

3、进行产品方案沟通

产品经理提出一个新功能时，如果只是写一份文字需求，设计师和开发人员可能需要花很多时间理解。

如果能够直接把页面和操作流程展示出来，沟通会更加直观。

例如一个“会员中心”功能，可以直接展示会员首页、权益页面、购买页面和支付后的状态，让团队围绕具体页面讨论。

4、团队在线协作

互联网产品通常需要产品经理、设计师、开发人员等多个角色共同参与。

在线设计工具可以让团队围绕设计方案进行沟通、修改和评审。

设计师负责调整页面，产品经理可以查看方案并提出修改意见，开发人员也可以根据最终设计了解页面结构。

5、辅助建立设计规范

一个产品的页面越来越多以后，如果每个页面的按钮、字体和间距都不一样，整体体验会比较混乱。

因此在产品设计过程中，需要逐渐建立统一的设计规则。

例如相同功能的按钮尽量保持相似的样式，不同页面使用统一的字体层级和间距逻辑，这些规范可以帮助团队保持产品视觉的一致性。

MasterGo怎么做UI设计？

第一次使用MasterGo时，不建议马上设计一个复杂的APP。可以先完成一个简单页面，通过实际操作熟悉设计流程。

第一步：明确页面用途

设计之前先问自己一个问题：这个页面到底要让用户完成什么？

例如登录页面的目标就是让用户完成登录，因此账号、密码和登录操作应该成为页面的核心内容。

第二步：规划信息结构

确定页面需要哪些内容之后，再安排它们的位置。

例如一个课程详情页，可以把课程名称、课程介绍、课程内容、讲师信息和学习按钮按照重要程度进行排列。

这个阶段主要解决页面“怎么摆”的问题。

第三步：完善视觉设计

页面结构确定以后，再处理字体、颜色、图片、按钮、间距等视觉细节。

设计时不要一味追求复杂效果。

用户能够快速找到自己需要的信息，通常比页面堆积大量装饰元素更加重要。

第四步：连接页面

如果需要制作产品原型，可以把不同页面按照用户操作流程连接起来。

例如：

首页 → 点击课程 → 课程详情 → 开始学习 → 学习页面

这样就可以模拟用户完成一次完整操作。

一个具体的MasterGo产品设计案例

假设你准备设计一个在线课程平台。

先不要急着把所有功能都设计出来，可以从用户最核心的使用流程开始。

比如：

1. 用户进入首页
2. 查看课程分类
3. 选择一门课程
4. 查看课程详情
5. 开始学习
6. 查看学习进度

根据这条流程，可以先设计以下页面：

• 首页
• 课程分类页
• 课程详情页
• 视频学习页
• 学习记录页
• 个人中心

接下来先完成这些页面的基础UI设计。

设计完成以后，再把首页中的课程卡片连接到课程详情页，把课程详情中的“开始学习”连接到学习页面。

完成原型后，可以从首页开始模拟整个过程。

如果发现用户找不到课程入口，或者某个页面需要返回很多次才能完成任务，就可以提前调整设计。

这样做的好处是，很多产品流程问题可以在开发之前被发现，而不需要等到程序做出来以后才修改。

MasterGo适合怎样学习UI设计？

如果你刚开始学习UI设计，建议不要只学习工具按钮，而是结合实际页面进行练习。

先练习简单页面

可以选择登录页、注册页或者个人中心。

重点学习文字、按钮、输入框、图片以及不同元素之间的排列关系。

再练习常见产品页面

熟悉基础操作后，可以尝试设计首页、商品详情页、文章详情页等比较常见的页面。

这时候开始关注信息层级、页面留白和视觉重点。

再尝试完整产品

当单个页面已经比较熟悉，可以把几个页面组合起来。

例如从一个电商APP开始，完成首页、商品列表、商品详情、购物车和订单页面。

这样能够同时练习UI设计和产品页面之间的关系。

最后练习交互原型

把页面连接起来，按照真实用户的操作路径进行体验。

如果操作过程中发现问题，再回到页面设计阶段进行调整。

这种方法比单纯临摹一张漂亮的UI图，更接近实际产品设计。

MasterGo适合产品经理使用吗？

产品经理在工作中经常需要表达产品需求，而产品原型是一种比较直观的表达方式。

例如准备增加一个“订单管理”功能，可以先把订单列表、订单详情以及相关操作页面整理出来。

这样设计师可以根据原型理解页面需求，开发人员也可以更直观地了解产品流程。

产品经理不一定需要把页面设计得非常精细，但应该把用户流程和功能关系表达清楚。

MasterGo和普通图片设计工具有什么区别？

普通图片编辑工具更加关注图片本身的视觉处理，而MasterGo更偏向数字产品设计。

比如制作一张活动海报，主要考虑的是图片最终呈现出来的效果。

但设计一个APP首页，还需要考虑按钮怎么操作、页面之间如何跳转以及用户完成任务需要经过哪些步骤。

因此，产品设计工具除了视觉设计，还需要关注页面结构和交互逻辑。

MasterGo适合哪些人？

UI设计师：可以用于网站、APP和其他数字产品的界面设计。

产品经理：可以用于整理产品页面、制作原型和沟通产品方案。

交互设计师：可以围绕用户操作流程进行页面和交互设计。

创业者和产品团队：在开发产品之前，可以先把产品想法制作成页面和原型。

UI设计初学者：可以通过临摹和实际项目练习页面布局、视觉设计以及原型制作。

使用MasterGo设计产品时需要注意什么？

设计产品时，不要把所有精力都放在页面是否“漂亮”上。

真正用于产品的设计，还需要考虑用户能不能快速理解页面内容，操作路径是不是清楚，以及不同页面之间是否保持统一。

如果是多人参与的项目，建议尽早统一页面命名、组件使用和设计规范。随着项目规模增加，统一规范会让后续修改和维护更加方便。

如果项目中使用了第三方图片、字体、图标或其他设计素材，也要确认相应的授权和使用范围，尤其是用于商业项目时。

常见问题

MasterGo主要是做什么的？

MasterGo主要用于UI设计、产品原型设计和团队协作，可以应用于APP、网站、小程序等数字产品设计。

MasterGo适合新手学习UI设计吗？

可以。新手可以从登录页、个人中心等简单页面开始练习，再逐步学习完整产品页面和交互原型。

MasterGo可以制作APP原型吗？

可以用于APP产品原型设计。可以先完成多个页面，再按照用户操作流程连接起来，用于展示产品交互过程。

MasterGo可以做网页UI设计吗？

可以用于网站界面设计。可以先规划网页结构，再完成视觉设计，并根据实际需求制作交互原型。

MasterGo适合产品经理吗？

适合产品设计和原型沟通场景。产品经理可以使用它整理页面结构、展示产品流程，并与设计和开发人员沟通具体方案。

MasterGo和UI设计是什么关系？

UI设计是MasterGo的主要应用场景之一。设计师可以利用它完成数字产品界面设计，并进一步制作产品原型。

总结

MasterGo（莫高设计）是一款面向产品和设计团队的在线设计工具，可以用于UI设计、产品原型和团队协作。

对于UI设计师来说，它可以用于完成网站和APP页面；对于产品经理来说，可以通过原型把产品需求具体化；对于团队项目，则可以围绕设计方案进行沟通和修改。

如果你刚开始学习MasterGo，不妨从一个真实的小项目开始，例如设计一个课程APP或者电商APP。先规划用户流程，再设计页面，最后通过原型把页面连接起来。

掌握这套产品设计思路以后，再逐渐深入学习具体工具，会比单纯记住各种功能更加有用。