个人小项目原型图设计（主页）
个人小项目原型图设计（主页）
- 一、前言
- 二、了解网站的布局
- 三、前端界面绘制（主页）
- 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。
个人小项目原型图设计（主页）相关推荐
- 软件实训之深刻理解原型图设计的核心
软件实训之深刻理解原型图设计的核心 内容关键词: 原型图设计 知识来源: 网络资源汇总整理.张森鹏讲课视频汇总整理 课程: 软件项目实训 授课老师:张森鹏(新浪ID:sunlifestyle,中 ...
- web原型图设计软件软件_如何在2020年选择最佳的Web设计软件（比较）
web原型图设计软件软件 Are you looking for the best web design software to make beautiful websites? Most exper ...
- Mockplus（摩客）- 简洁高效的原型图设计工具
Mockplus(摩客) 是一款简洁高效的在线原型图设计工具,很好的标题,基本说明了这篇文章的主要内容--! 原型设计是你对设计方案的一种直观的表达.也许你说,着跟你没啥关系.那我说个实际点的场景,小 ...
- 原型图设计软件哪个好用？6款好用软件推荐
原型图软件列表 1.墨刀-极简超快的移动应用原型工具 2.ProcessOn-在线作图工具,你不用装 Visio 了 3.摩客-简洁高效的原型图设计工具 4.xiaopiu-国内优雅高效的在线 APP ...
- 完整数字华容道01：原型图设计
文章目录 1.构思 2.原型设计 2.1 首页 2.2 主页面 2.3 保存记录对话框 2.4 游戏结束对话框 2.5 排行榜页面 前面文字 Python游戏开发:数字华容道 已经介绍了简版数字华容道 ...
- Axure VS Mockplus VS Balsamiq - 原型图设计工具对比
原型图(或线框图)设计工具是创建网站和应用程序的利器,它让设计师和设计团队专注于原型产品的功能以及如何创建更好的用户体验.如今,市场上涌现了各类功能不一的原型工具.然而,从中挑选出一款最合适自己的也不 ...
- Mockplus: 让小白产品经理上手就用的原型图设计工具
近5年来,PC软件和移动软件呈井喷趋势.任何软件应用,都离不开原型设计和原型设计工具.Mockplus应运而生,除用于移动开发,还可以制作PC.网页的原型,它帮助设计师在最短的时间内完成产品原型图的设 ...
- 3款在线网页原型图设计软件推荐
现在能做原型的原型设计工具比较多,像 Axure.即时设计.XD.Framer 等,这些原型图软件既有强大且传统的客户端工具如 Axure.XD,也有轻盈便捷但强大的在线网页版原型图软件如即时设计.F ...
- 非常好的免费开源网站原型图设计工具
这个软件的名字叫Pencil,是一个完全免费开源的网站原型图设计工具,还有手绘风格的元素,可以建立多页,页面之间可通过链接相连,设计 后的结果可以导出为png的图片供美工和开发人员参考. . 下载地址 ...
- 会议OA项目(项目原型图介绍发布会议功能)
目录 一.会议OA项目介绍 为什么要开发OA会议管理 会议OA管理的作用 二.项目原型图介绍 1)会议管理 2)投票管理 3)会议室管理 三.数据库表结构 四.发布会议功能&多功能下拉框 La ...
最新文章
- 华为全新发布开源操作系统欧拉：覆盖数字基础设施全场景
- POJ 3420 Quad Tiling
- CodeWarrior 初探(1) USBDM 芯片检测
- 004_FastDFS分布式添加多个tracker
- Dialog源码分析
- 经典C语言程序100例之二
- 关于Python中迭代器的作用
- React 中 keys 的作用是什么？
- 硬币找零问题，动态规划基础，百度面试题
- 8086寄存器的配合使用
- 免费好用的 PDF 编辑器推荐
- C# 调用Webservice实例
- WPF AvalonDock拖拽布局学习整理
- 项目管理十大知识领域之项目质量管理
- U8采购订单联查采购入库单
- python语音通话_如何优雅的用Python玩转语音聊天机器人
- java学习笔记（22）java输入标签，单选框，复选框，添加文件，文本域，下拉框
- 吐血分享：QQ群霸屏技术教程（接单篇）
- 怎么才算是高级点灯工程师？
- 饥荒插件制作应注意的几个问题