原型设计工具介绍

原型的演示视频已经上传至B站
https://www.bilibili.com/video/BV14r421j7Uh?t=5.4
我个人比较推荐的就是Adobe XD

推荐的原因当然是因为Adobe全家桶生态全面而且界面简洁美观好用，而且拥有丰富的生态，各个软件之间配合使用，包含了P图、剪辑、特效、音频处理等等，可以设计出很精美的作品。

Adobe在设计领域深耕了这么多年，很多产品处于了行业垄断地位，就比如大名鼎鼎的Photo shop。

一、界面
1、刚进入软件可以快捷地选择要设计的类型，有各种手机、Web页面、Instagram故事，还可以自定义页面的大小；并配有一些现成的UI套件，可以快速设计自己的UI界面。界面总体上很简洁美观，没有多余的广告和花哨的设计

2、我选择的是Web页面，1920*1080像素的，我直接打开之前创建的.XD文件

下面我将根据我创建的原型逐步介绍该软件

3、编辑界面：

*
左边是常用的一些工具：选择、矩形、椭圆、多边形、直线、钢笔工具、文字工具、画板、缩放。

同时，还有一个库资源，可以直接使用下载的库文件进行设计。

还有一个图层的集中显示界面，有点类似于PowerPoint。

下面是一个插件库，使用插件可以大大简化工作流程。

AdobeXD具有很强的拓展能力，支持拓展很多的插件；
除此之外，如果技术足够的话还可以自行开发插件

二、原型设计时模拟真实的操作逻辑

1、操作的触发条件有点击、拖移、时间、按键和游戏手柄、语音、播放结束，基本涵盖了真实软件的操作逻辑

2、例子：
比如我实现的登录功能的模拟


由图可见，登录按钮连接的是第二个页面，然后触发的条件是“点击”，类型为“过渡”，动画是“左滑”。
这样的话，当我们点击“登录”按钮后，页面向左滑动，进入网站的主页。
这样模拟出真实的操作逻辑，很适合没有软件或网页设计能力的平面设计师。

3、我在我的原型设计里加入了模糊效果，就比如登录界面，个人认为比较美观且现代化。

并且登录界面的背景是动态的，正在展示美丽的海洋水下世界。（核污染会严重危害到海洋，以此来呼吁大家保护海洋）

4、登录后就是主页面

主页面做的很简洁，完全没有多余的文字，给人一种赏心悦目的感觉（我觉得的，哈哈哈哈）

左上角是网站的名字“RadiationNet"，右边是一个搜索框
胶囊状的搜索框实际上就是一个圆角矩形，然后把圆角拉到了90度；
右边的放大镜其实就是一个圆圈和一条短直线组合而成的。

5、轮播图展示
网站最显眼的就是这个轮播图，轮流显示网站的信息和功能，当点击“Learn More”后就会进入详情页面，页面包含了标题相关的内容

6、可以看到主页面最下方有一个“More”,当鼠标滚轮往下滑动时，就进入下一个页面

这个页面是网站的各种功能，呈现一个树形
点击每个方框后会进入对应的页面，进一步进行相应的展示

7、比如“查看历史资料”页面：

网页以时间轴的形式进行相应的展示，时间轴上会依次显示历史事件发生的时间

三、我自己的审美标准

1、我认为这个网页的原型整体都是很简洁的，没有过多的装饰，操作逻辑也很大众

2、在展示上我运用了模糊透明效果，这样的话，我觉得画面会更加有立体感，看起来更加舒服

3、我还大量利用了线性渐变

调整色块和渐变的方向就可以得到很好看的渐变效果

4、使用大量的圆角矩形。不知大家有没有发现，以前的手机屏幕都是尖尖的直角，没有一点弧度，后来几乎都变成圆角了。
这种圆角的设计确实很美观。

5、我认为有一些东西设计的时候不必加入太多的修饰，太多的修饰反而会让界面变得凌乱不堪。
我还记得雷军在一次发布会上说过“没有设计就是最好的设计……”，当时可能很多网友误解了雷军的意思，然而我却对这句话有深刻的体会。
所以我在做一些设计类型的工作时都会努力让界面看起来没那没用心，但是又那么“有心”。

如果大家看过我之前的一些东西，有的表面上就是很简洁的（表面的简洁），应该大多数人看上去都会有种赏心悦目的感觉（我猜的）。
我经常会发现，有一部分人做的设计类的东西，界面上只是东西少，但看起来却很凌乱，这就不算简洁。