界面原型的设计

前言

实验准备

• 选取一个界面原型的工具，熟悉其操作界面

• 墨刀：https://modao.cc/

• pencil：https://pencil.evolus.vn/

• 其他的工具http://next.36kr.com/posts/collections/1

实验内容

• 采用“以用户为中心”、迭代式的方法进行设计；用原型工具快速画出草图（查看界面www.xmu.edu.cn）

环境

• 墨刀：https://modao.cc/

• pencil：https://pencil.evolus.vn/

• 其他的工具：

http://next.36kr.com/posts/collections/1

下载墨刀

• 下载地址： https://modao.cc/

具体流程

原型界面

• 我们以厦门大学首页为例，讲解原型界面设计。

  
  
  厦大原型.png

操作步骤

1. 创建项目

我们选择创建web项目，填写名称，可以上传图标，最后点击创建。

创建项目.png

2.操作界面

墨刀界面.png

3.以厦门大学首页为原型制作界面

• 我们从上到下制作：

1.插入厦大图标，输入厦门大学以及XIAMEN UNIVERSITY的文字

插入图片.png

2.输入厦门大学以及XIAMEN UNIVERSITY的文字

插入文字.png

3.插入蓝色背景

插入背景.png

前三步骤效果如下图

效果1.png

4.制作导航栏并加入链接

• 首先按照第二步插入文本
  -接着制作链接

  
  
  链接.png

5.制作轮播图

轮播图制作.png

6.插入图标

插入图标.png

通过上述六个基本操作，就可以制作出来厦门大学首页啦
大家可以自己研究其他一些组件以及图标的运用等等，制作出更加精美的界面啦！