如题所述
互联网产品设计过程中,原型图的常用格式,我见过6种以上。
它们的优点和缺点,介绍如下:
可以在另一台电脑上,阅读和编辑Axure原型图;
在Axure预览模式下,可以在浏览器左侧显示网页的目录;
Axure软件有Mac版本和windows版本。
如果接收文件同事的电脑,没安装Axure,就打不开了;
在手机微信聊天窗口上,不能直接阅读Axure原型图;
Axure低版本,不能打开高版本的Axure文件。
可以在另一台Mac电脑上,阅读和编辑Sketch原型图;
Ui设计师,可以直接在Sketch里面,把原型图,做成高保真的Ui设计稿;
可以导出PDF格式的多页面PDF原型图。
只能在Mac电脑上,阅读和编辑。暂时没有windows版本的Sketch软件,不支持windows电脑编辑;
不能在手机微信聊天窗口上,直接阅读Sketch原型图;
Sketch低版本,不能打开高版本的Sketch文件。
可以在Mac或Windows电脑上,阅读和编辑PPT格式的原型图;
在手机微信App聊天窗口上,直接阅读PPT格式的原型图;
可以通过其它软件,将画好的原型图,导入PPT里面。
ppt页面的面积太小,不支持表达多个页面之间的跳转关系;页面的缩放,难以操作;
PPT里面的画图控件太少,画图工具隐藏的比较深,操作起来,不方便;
可以在任何电脑上,用浏览器打开,直接阅读Html原型图;
不能在手机微信聊天窗口上,直接阅读Html压缩包的原型图;
可以先用Axure设计原型图,然后导出Html网页格式。
不支持网页的再次编辑,不支持在浏览器左侧显示网页的目录;
邮件接收Html原型图的压缩包,需要解压,然后还需要在众多网页文件中,一个个点开查看;
页面之间的跳转关系,难以表达清楚。
可以在任何电脑上,阅读和编辑jpg图片格式的原型图;
邮件发送图片格式的原型图,文件可以很小;
可以在手机微信聊天窗口上,直接阅读jpg格式的原型图;
可以先用其它软件设计原型图,然后导出jpg图片格式。
在电脑上,图片格式,比较难操作:比如:调整到100%大小,并左右移动查看页面跳转关系;
在手机上,微信发送的时候,具有流程关系的一大张图片格式的原型图,会压缩,导致微信接收后不清晰。
可以通过其它软件,将画好的原型图,导出为PDF格式;
可以在Windows或Mac上阅读;支持软件:AdobeReader,福昕pdf,Acrobat;
可以在智能手机上,阅读pdf格式的原型图;支持手机APP软件:WPS,Acrobat,甚至微信app的聊天窗口,直接发送,对方直接打开。
在电脑上,页面容易调整到100%大小,并且左右移动查看页面的跳转关系;
Mac电脑自带的预览pdf软件,可以合并多个pdf,旋转pdf的某一张内页;
电脑版的福昕pdf软件,可以给pdf内页添加标注文本,可以在多页面的pdf左侧添加目录链接。
如果需要重新编辑pdf里面的某一页,那么就要提取多页pdf文件中的某一页,待修改好之后,再合并到多页PDF文件里;
电脑阅读和手机阅读pdf,最好是已经安装了专业的PDF阅读器。
APP产品设计的原型图,重在表达意思,只要意思传达到位了,那么格式可以不必在意。
原型图的格式,属于“道”,“法”,“器”,这3个层次中的“器”。
如果想在用户体验上,走的更远;那么就需要在“道”,“法”,这2个层次上,积累更多的项目经验,以及不同岗位的思维方式和沟通思路。
如何打开axure设计的原型图第一步当然是下载、安装、汉化、激活。这些不再详述,百度一下有很多。笔者以前也谢了一个下载的经验,可以查看。
说一下基本的布局,8.0比7.0有很多的改变:
图示标注区1:菜单栏
图示标注区2:发布区
图示标注区3:元件演示编辑区(对齐排版、大小、颜色等的编辑)
图示标注区4:页面栏目,发布后生成站点地图(可以取消显示)
图示标注区5:元件库(可以创建属于自己的元件库,也可以加载他人的元件库),元件库分类越清晰,内容越丰富,我们制作原型也就越快。
图示标注区6:页面工作区,发布后内容显示区
图示标注区7:为元件或页面添加交互事件,添加备注说明,设置编辑元件样式
图示标注区8:概要,当前页面的元件组织关系图,类似于Ps中的图层面板
图示标注区9:母版(使用DW做过网站应该会很清楚,母版类似于元件,且具备一处编辑多出同时修改的特性)。
下面的步骤,我们来简要说明一下每个标注区的用法:
2
图示标注区4:页面栏目
基本说明:可以将页面栏目理解为目录,为了更清晰的组织管理原型,在发布生成时,页面栏目生成:站点地图。
在页面栏目,我们可以创建文件夹及页面(见图示中的标注1),且可以拖动任意一个页面或文件夹,来改变他的级别(见图示中的标注2):
END
元件库的基本操作说明
1
图示标注区5:元件库
创建元件库(图一),并命名(图二)
2
保存成功后axure会自动打开元件库编辑面板(和原型库基本一致):
3
按照“页面栏目”对库进行组织,说明:文件夹为元件库的分类标题
4
添加:按钮,文件夹。圆角按钮元件,直角按钮元件:
并按图组织:
5
关闭并保存元件库,回到工作区,按图示点击:刷新元件库(创建时默认已经加载)。成功后,见下图所示:1为元件库名。2为命名的文件夹名,3位元件库名
6
以上完成了元件库的创建与编辑。
下面来看一下加载:
本地加载和下载元件库
点击“载入元件库”,会自动打开本地,找到存放元件库的地方既可。
点击“下载元件库”:会自动连接到Axure官网,并手动下载
END
检视
该栏目包含:元件属性、元件备注、元件样式编辑
元件属性:
我们从创建的元件库中拖一个按钮到工作区,会见到下图所示的属性:
标注1:元件名(建议必须写,原因:同一元件使用较多时按钮名称区别)
标注2:交互事件,常用且非常重要,每类元件对应的交互事件略有不同,即元件的属性不一样
标注3:交互样式(鼠标滑过、点击、点击后)
说明栏,是对于元件的备注,可以添加备注,让UI或程序更好的理解你的意图:
3
样式栏:对当前元件的背景、边框、颜色、大小等进行设置:
如何进行web页面原型图设计最后半天心不在焉拖拖拽拽把各个部分都搭建好了,可是做出来的页面惨不忍睹,自己都没勇气打开。晚上回家后和邻居又讨论了三个小时,最后熬夜把原型图完成。虽然最后原型图也没有被采纳,但是这次原型图居然受到了表扬,领导说我的原型图有了提升。今天就写下这篇文章,为这段时间的工作做一个总结。原型设计前:①0202重点突出内容:要清楚明了页面需要突出的内容是什么,这个在前期的讨论中一般就已经确定;②0202第一功能目的:除了内容以外,功能方面需要突出的是什么?如引导注册或像下一级页面引导流量。③0202如果是改版要考虑改版要解决的问题是什么?对于前一版页面存在什么问题画原型图要考虑:④0202内容板块如何划分,页面的内容主要分成几个模块,每个模块内存放的都应该是一些相近的内容;⑤0202模块与模块之间的关联性:每个模块与其相近的模块之间应该有一些逻辑上的关联性,而不能随意的进行拼接;⑥0202页面的流程:模块与模块的上下承接关系,模块与模块应该上下存在某些逻辑上的连接性。页面完成后:完成原型图后一定要进行检查,主要从以下三个方面进行检查:⑦0202内容是否完整:对比框架中的每一部分内容检查是否完整;⑧0202第一屏是否把最重要的内容展现出来:页面第一屏以外的内容基本都是辅助内容,如果不能在第一屏就把内容全部展现,基本上就等于内容不完整;⑨0202功能是否实现:想要表达的功能是否在明显的地方表现出来;⑩0202流程是否顺畅:把相应的流程走一遍,看是否流畅。注意tips:①0202未完成的作品拿出来讨论页面不完整不代表思想不完整,即使是不完整的页面,里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②0202理清自己的思路要有属于自己的清晰思路,对内容、功能和流程自己要先想明白,可以列举一些具体的问题来辅助理清自己的思路。③0202坚持自己的想法每一个人都有自己的想法,只要你理清自己的思路,就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑,形成自己的思路。关于工具和作图:之前花了很多时间去研究axure,是学会了一些作图的技巧,可是渐渐发现这些对页面的提高基本不大,我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法,等到想法成熟之后不妨慢慢的考虑工具的深入,太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓,前期的框架和流程思路想好后,后面的原型图也就水到渠成了。
logo设计
创造品牌价值
¥500元起
APP开发
量身定制,源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场