个人小项目原型图设计（主页）

一、前言二、了解网站的布局三、前端界面绘制（主页）1、“T”字形2、“口”字形3、“同”字形4、“三”字形5、“川”字形 四、总结

一、前言

在我制作个人项目的时候，经常会要自己独立去完成一个界面原型设计图。因为原型设计图在项目中起到一个先导作用，所以画好原型设计图还是很重要的。那么，今天我就来给大家讲解一下原型图设计的绘制，因为一个项目中界面多的原因，我主要拿主页做示范。

二、了解网站的布局

首先我们要想清楚我们要的是什么样的网页样式，也就是先来了解一下各个网页的界面展示：

名称解释简图理解网站示例“T”字形页面顶部为横条广告+广告条，下方左面为主菜单，右面显示内容为布局。因为菜单条背景颜色深，整体效果类似英文字母“T”，所以称之为T字形布局。有妖气漫画：https://www.u17.com/."口"字形页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。苏宁易购:https://www.suning.com/.“同”字形就是整个布局类似“同”字，页面顶部是主导航栏，下面左右两侧是二级导航条、登陆区、搜索区，中间是主内容区。当当网: http://www.dangdang.com/.“三”字形采用简单的图形和线条代替拥挤的文字，给浏览者以强烈的视觉冲突。快看漫画：https://www.kuaikanmanhua.com/.“川”字形整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度突出主页的所引功能，一般适合栏目比较多的网站。聚划算：https://ju.taobao.com/.

三、前端界面绘制（主页）

那么既然了解了这些类型，那我就按照这个类型来绘制主页图吧。 我的演示项目是一个看漫画网站。 我使用的软件是电脑自带的画图。

步骤：

1、了解排版的各个位置放什么 2、按照由上到下、由里到外的顺序插入文字和图片

1、“T”字形

首先我们知道“T”字形的排版大概是这个亚子的： 首先我先放上我最开始的一个最简单的设计图: 在这个里面，它有一个顶部登录显示、轮播图、分类目录、主内容显示、榜单显示。当然一个网站所具备的东西不仅仅这么点，只是个人项目的话，需要考虑到各个学习阶段人群学习的程度。也就是说：

在做原型图设计的时候，我们加入的版块一定要是我们最终可以用代码做出来的。

那么了解我们需要什么功能之后，就可以开始放模块了。 顶部登录显示、轮播图、分类目录、主内容显示、榜单显示这些东西我们要如何放呢？ 步骤如下： 类似这种的： 然后继续放东西： 然后自己根据需求加东西就可以了。“T”字形排版完成！！！

2、“口”字形

“口”字形的排版大概是这个亚子的： 一样的，同一个漫画网站燥起来。 然后自己根据需求加东西就可以了。“口”字形排版完成！！！

3、“同”字形

“同”字形的排版大概是这个亚子的： 步骤如下： 然后自己根据需求加东西就可以了。“同”字形排版完成！！！

4、“三”字形

“三”字形的排版大概是这个亚子的： “三”字形布局步骤演示如下： 然后自己根据需求加东西就可以了。“三”字形排版完成！！！

5、“川”字形

“川”字形的排版大概是这个亚子的： 最后就是讲到“川”字形的界界面排版了，步骤如下： 然后自己根据需求加东西就可以了。“川”字形排版完成！！！

四、总结

一、版型图大纲 二、知识点

设计步骤： 1、了解排版的各个位置放什么 2、按照由上到下、由里到外的顺序插入文字和图片 考虑程度： 在做原型图设计的时候，我们加入的版块一定要是我们最终可以用代码做出来的。 拓展考虑 在能力允许的情况下，可以在往界面下框加东西，比如网商项目里面的年度好货、新品上市之类的。

我是南橙，一个逐渐秃头的橙子Orange。