web在线原型设计是什么-web端及移动端原型设计规范

最后半天心不在焉拖拖拽拽把各个部分都搭建好了,可是做出来的页面惨不忍睹,自己都没勇气打开。晚上回家后和邻居又讨论了三个小时,最后熬夜把原型图完成。虽然最后原型图也没有被采纳,但是这次原型图居然受到了表扬,领导说我的原型图有了提升。今天就写下这篇文章,为这段时间的工作做一个总结。原型设计前:①0202 重点突出内容:要清楚明了页面需要突出的内容是什么,这个在前期的讨论中一般就已经确定;②0202 第一功能目的:除了内容以外,功能方面需要突出的是什么?如引导注册或像下一级页面引导流量。③0202 如果是改版要考虑改版要解决的问题是什么?对于前一版页面存在什么问题 画原型图要考虑:④0202 内容板块如何划分,页面的内容主要分成几个模块,每个模块内存放的都应该是一些相近的内容;⑤0202 模块与模块之间的关联性:每个模块与其相近的模块之间应该有一些逻辑上的关联性,而不能随意的进行拼接;⑥0202 页面的流程:模块与模块的上下承接关系,模块与模块应该上下存在某些逻辑上的连接性。 页面完成后:完成原型图后一定要进行检查,主要从以下三个方面进行检查:⑦0202 内容是否完整:对比框架中的每一部分内容检查是否完整;⑧0202 第一屏是否把最重要的内容展现出来:页面第一屏以外的内容基本都是辅助内容,如果不能在第一屏就把内容全部展现,基本上就等于内容不完整;⑨0202 功能是否实现:想要表达的功能是否在明显的地方表现出来;⑩0202 流程是否顺畅:把相应的流程走一遍,看是否流畅。 注意tips:①0202 未完成的作品拿出来讨论页面不完整不代表思想不完整,即使是不完整的页面,里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②0202 理清自己的思路要有属于自己的清晰思路,对内容、功能和流程自己要先想明白,可以列举一些具体的问题来辅助理清自己的思路。③0202 坚持自己的想法每一个人都有自己的想法,只要你理清自己的思路,就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑,形成自己的思路。 关于工具和作图:之前花了很多时间去研究axure,是学会了一些作图的技巧,可是渐渐发现这些对页面的提高基本不大,我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法,等到想法成熟之后不妨慢慢的考虑工具的深入,太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓,前期的框架和流程思路想好后,后面的原型图也就水到渠成了。

第一次绘制原型图的时候觉得主要功能表达清晰即可,尺寸大小、元件间距全凭感觉,因此一开始也挨了不少骂。后来慢慢摸索出规律,大概总结如下:

端口类型:

目前长需设计的端口分为:web段(即网页)、移动端(APP、小程序等移动设备)、IPAD(IPAD是一种移动设备,但也有自己特定的尺寸),智能设备(例如智能电视、智能手表等等)

由于我更多接触的是网页端已经小程序端口,后面会以这两个为主。

网页端:

目前市面上显示器屏幕尺寸为19-21寸,屏幕分辨率大概在1280px*800px―1440px*900px之间,前端工程师在写页面的时候,宽度一般设为1180px―1220px(当然,这个宽度也不是绝对固定的)。

因此在做产品设计的时候,设计web端产品,宽度会设为1400px作为容器,位于容器上方再画一个1200px的矩形,内容区域的容器。(PS:内容区域的矩形需与底部容器左右间隔10px,作为留白)

可能有人会问,为什么要底部容器上面划出一块内容区域?

首先,我们要知道, 容器决定产品的边界 :

我的理解是:

按照市面上显示器的分辨率,前端页面可展示的内容区域,平均宽度在1200px,预留出来的空白部分,是为显示器较大的人群考虑的:屏幕越大,可展示的区域也越大,超过产品本身内容可展示区域的话,会自动留白。

另一方面,为保证开发团队的成员可查看完整的原型图,我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。

稍稍总结下,就是跟随大多数人的屏幕尺寸大小,以及方便开发团队查看。

给大家看我电脑上查看大的原型图大小,是不是很清晰的看到内容呢?当然,这也是我个人的看法,如果有别的看法的,可以互相交流交流 (我算是个野路子的产品) 。

至于高度的问题,这个是没有要求的,一般都是根据需要展示的内容来决定的,也就是高度自适应。

讲完容器的宽度,接下来讲讲字体。正常情况下,字体大小都是14px,最小字体12px(字体太小可能就不方便查看)。

字体上,我所在的企业并没有太多要求,只要求能看懂主要功能就行,所以上面的字体是来自一位B站的up总结的。

移动端:

说明之前,给大家感受下刚入门时候,画的线框图,话不多说,先上图。

(OS:简直惨不忍睹,当然这并不是给开发的图纸,而是草稿。由于各种问题,我需要兼顾产品跟UI设计,所以都是输入高保真原型图的)

虽然最终效果跟第一版草稿的差距特别大,但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了,可以了。有这样的想法,那你离被开发揍一顿就不远了。

以自己一开始的惨痛经历说了这么多,接下来聊一聊移动端的设计规范。

常见的移动端多是手机,基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px,最小字体一般是12px(你懂的,手机屏幕小,字体太小用户也很难看清的)

上图是我个人画线框图的习惯,并不是标准,只是提供个参考给大家。各个区域的底色,也只是为了便于自己区分,实际上底色并没有什么特别多的要求。至于字体,一般都是使用14px的字体。

产品在原型设计上还是有很多规范的,只不过我就职的企业并没有太多要求,但基本也算通用了,具体情况还是看看自己企业内部有没有什么特别的要求。

上述的设计规范仅限于个人习惯,也是非常基础的部分。如果有别的见解也可以一起分享。像容器内,各类原件的一些规范,后续也会慢慢整理出来。

web原型设计工具有Pixso协同设计等。

1、Pixso协同设计灵活的钢笔工具,不同于Sketch只能在线上增加点或移动单个点,Pixso可以通过移动矢量的线,所有连接的点也可以自动跟随。另外还可以支持对矢量线组成的不同区域进行填充颜色。

2、Pixso协同设计的布尔工具、蒙版工具,径向渐变,可以满足不同的设计场景。画板工具,可以轻松对齐调整复杂图形。

传统的沟通设计研发交付,需要借助3款以上的软件。零散式交付,无有效的版本控制,切图和标注繁琐且容易出错。使用Pixso只需要一个链接,就可以同时完成预览、评审、标注查看和切图。

想要了解更多关于原型设计的相关信息推荐选择Pixso协同设计。利用Pixso设计资源,快速开启原型制作,模拟最终产品形态和交互效果,实现了模拟画笔的特色,提供精细化矢量设计,自由切割线段,连点成面。基于云端协同编辑,Pixso将产品经理、设计师、开发的日常工作连接起来,实现协作更高效,设计更流畅。