当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （2） 界面草图与原型设计 > 界面草图与原型设计
这节课我们来介绍
界面草图和数字化原型设计
有了信息结构
就有了界面设计要加工的材料
但是在制作最终的界面前
我们还需要经历从草图到原型设计
这两个步骤
草图是界面的粗略设计
数字化原型是界面的初始工作模型
包括动态界面演示
和具有一定交互功能的产品演示
这两种形式
它有助于对产品的交互设计进行评价
你可能会问为什么要先做草图呢
这是因为草图是一种快速构思
和表达想法的工具
它就像在打草稿
可以让设计师快速的勾勒出
对页面内容 布局和形式的思考
方便做出不同的决策方案
方便对方案进行修改
草图还可以让设计师更关注整体
而不是细节
界面草图要体现出
主要任务和功能如何实现
每个页面的重点是什么
放什么
对形状 图片 色彩 字体等细节
都不用过多的考虑
但是呢我们需要通过草图
来描述和表达界面元素之间怎么样互动
怎样跳转到其他页面等等
那如果草图不能表达的想法呢
还可以采用备注的方式
在图上标注和说明
通过草图
你可以和你的合作者或客户
快速的沟通想法
做界面草图的时候呢
也要兼顾最终的视觉设计
虽然不必太关注细节
但是在整体布局上也不能相差太远
界面草图也可以用电脑软件绘制
这个是Axure工具制作的界面草图
这个工具比较常用
对界面设计和交互原型
都有很好的支持
功能也比较全面
这里推荐三款草图制作的工具
第一款呢是能做出手绘效果的草图工具
第二款功能比较综合
做界面草图
视觉设计和原型设计都用得到
简单易学
推荐大家使用
那第三款Ai呢它是一个矢量绘图工具
也非常有流行
界面呢它不是静止的图片
所以呢为了验证想法
你还需要让界面动起来
我们有几种不同的原型手段
第一种呢是采用指原型进行设计验证
视频演示的是用指原型来收集
用户反馈的验证方法
它可以简易快速的
发现界面设计的问题
可以用pop软件
通过拍摄纸的界面
来快速的模拟交互过程
在进行工程设计前
采用可交互的原型工具
不必编程也可以快速实现方案的演示
这样呢可以有助于早点发现问题
提高效率
那制作可交互原型的工具呢
推荐这几款简单易用的
感兴趣的朋友
可以在网上搜一下相关的教程
图示的这些软件是新出的免费工具
感兴趣的朋友呢
可以到幻灯片下面贴出的网址浏览
总之
做草图和原型的工具很多
选择适合自己的工具就好
采用视频动态演示的方法
也是一个不错的选择
动态演示呢
虽然不如可以交互的原型那样
可以直接让用户使用
但是呢它具有很好的展示效果
可以用来沟通和表达设计思想
动态视频可以用ae来进行制作
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
