用Power Point画界面设计图——在Web原型设计工具上“另辟蹊径”

毕业设计选了一个开发类的题，老师要我先做原型设计。

四处搜罗工具，无奈专业工具用起来繁琐，简单的工具又功能不行。不想在界面设计上花费太多时间，最后发现Power Point很不错。由于平时用得也比较熟悉，做起来很是得心应手。

一、确定大体结构

前期已经明确，这是一个后台管理系统，老师也很中意vue-element-admin的界面风格，于是就决定套用其中的导航菜单也页面布局。

首先：按照自己的需求修改vue-element-admin中的router部分的代码，完成基本的导航栏部分。

然后：运行，截图，将截图放置在PPT新建的页面上。如下图所示：

很多原型设计软件，零基础去画，光这个导航菜单就要花费大半天的时间。如此，利用代码生成导航栏，免除了重新画的烦恼、对程序员的审美要求也不高。

同理，后面很多图表也可以采用这种编码再截图的方式。毕竟，比起画图和设计，写代码还是更熟悉一些。

二、逐个完成页面

有了菜单导航栏，剩下的部分就是往页面里面加东西了。

比如，在这个“概览页面”，按照老师的需求，我需要将它分成四个部分，每个部分包含一个图表，类似于控制台，总揽全局，系统中众多数据以统计图的形式呈现在这里。

观察很多现有的网站设计发现，一个网页看起来是否精美舒适（虽然这不是程序员关心的东西），主要体现在一些小细节方面，比如加一点边框，加不同深浅的背景色，体现一些层次感，加一些小图表。下面就说说控制台首页的绘制步骤：

（1）画出四个分区。

用灰色画一个大矩形作为背景，用四个白色矩形分割出四个部分，同时设置边框为1px,浅灰色。至于用什么样的灰色，也有讲究。个人觉得，用拾色器去现有的网站上去找最好看也最方便。我不是专业的UI设计，临时做设计还是得多借鉴的。

完成后如下图所示：

（2）小标题

在标题上，有一些小细节。首先，网页的文字不是纯黑色的，大概是不美观的缘故吧，总之都是带一点灰色的。其次，在标题前面加一个蓝色小矩形会给人感觉精致许多。

用PPT画一个小矩形，矩形设置蓝色（同样从别的网站上用拾色器搬来的，不过，整个设计尽量从同一个网站上取，保证配色的和谐统一）；后面紧跟文本框，如前所属，文本颜色带一点点灰；再者，整个页面的字体一定要小，不能够大，大了就会给人一种很假的感觉。

如下图所示：

（3）分割线

在标题下加一条灰色分割线，高1px，两端可以留10px左右空隙。用PPT直线画出即可。

（4）统计图

仪表盘页面主要组成就是一些图表，用来展现一些统计数据。若是要用原型设计工具画工具，很是麻烦。

这里依然采用，编码+截图的方式完成。

首先，Echart是VUE中很好的一个图表组件，对于这种快速完成的界面设计图，直接找现有的组件最方便。在Echart社区物色一个合适的条形统计图，简单改一下参数、数据，截图，搬过来。

这样做出来效果不错：

为方便后面调整位置，这样一个模块可以选中-点击“组合”，整体移动。

（5）数据展示

对于需要一些文字描述的场景，同样借鉴参照了很多其他网站，也结合自己的浏览经验。设置文字颜色、字体，适当加一些分割线。

另外一个分区做出来如下图所示：

（6）Tab标签页

tab标签页直接使用PPT中的线条和文字组成：蓝色线条、灰色线条、小号字。如下图所示：

（7）按钮

根据不同的按钮样式，这里采用文本框加边框，改颜色，来画一个按钮。如下图所示：

三、完成效果图

按照上面的几个部件绘制方法，最终完成的设计图如下图所示：

对于像我这种临时的UI设计，简单，快速的同时，还能保证美观，那自然是再好不过了。

四、其他页面

其他的页面多为表格，在我之前使用过的原型设计软件中，绘制表格十分麻烦。这里便继续采用编码+截图的方式，既完成了简单的编码，又快速绘制界面原型图。

使用element UI组件敲了一个表格，顺便也做了几个按钮和输入框。截图搬过来，效果如下：

五、小结

这种方法只适用于对于设计零基础、并且不想在此花费过多时间的情况。对于满足师生交流讨论，这种简易原型图还是足够了。

在平时的学习交流中，总是需要这样的原型图方便交流讨论。在尝试众多原型设计软件后，才发现PPT最好用。将方法分享给同样为原型设计头脑的人，希望有帮助。

用Power Point画界面设计图——在Web原型设计工具上“另辟蹊径”相关推荐

web 原型设计工具_适用于Web设计人员的7种原型设计工具
您知道线框 , 模型和原型之间的区别吗? 这三个术语经常互换使用,表示同一事物. 问题是,您不应该这样做. 线框是设计的静态,低保真描述 . 它提供了拟议设计的外观或形状的轮廓,但未提供其功能或感觉. ...
界面原型设计工具Balsamiq、墨刀、Axure、Mockplus
Balsamiq的体验这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件.其提供了丰富的手绘风格的web常用元件, ...
工具推荐 10款移动界面原型设计工具
首先,一款优秀的移动APP界面原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用 ...
软件界面原型设计工具(Web)：Axure RP
Axure RP 如果你觉得Balsamiq Mockups卖79美元还贵的话,那Axure就更显得色差奢侈了,很多Axure的培训费都远高于这个价! Axure的发音是"Ack-sure& ...
软件界面原型设计工具 Web Axure RP
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Axur ...
推荐两个界面原型设计工具--GUIDesignStudio 和 Mockups For Desktop
前段时间,有幸参加一次高级软件架构师的培训,授课老师介绍了两个很好玩的界面原型设计工具:GUIDesignStudio 和 Mockups For Desktop,现分享一下,截图说明,洗洗眼球,权当 ...
界面原型设计工具(2)
1.WireframeSketcher是一个Eclipse 插件,用于创建线框图,界面模型和UI原型. 项目正式开发前创建原型可以帮助用户和开发者理解系统,使用WireframeSketcher在Ec ...
界面原型设计工具开源软件
界面原型图绘制工具 Pencil Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样.Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击 ...
原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架
前言什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...

用Power Point画界面设计图——在Web原型设计工具上“另辟蹊径”

用Power Point画界面设计图——在Web原型设计工具上“另辟蹊径”相关推荐

最新文章

热门文章