网站原型图怎么做?保姆级教程! |
您所在的位置:网站首页 › 甜品网页设计图怎么做好看 › 网站原型图怎么做?保姆级教程! |
原型图是一款产品的缩影,网站原型图承载了大部分UI设计和交互测试的工作,它可以帮助产品经理和UX设计师以最小的代价测试产品的逻辑框架、交互体验、创意表达等等,不仅节省时间和费用,还缩短了各部门之间的沟通成本。虽然网站原型图听起来很高大上,但实际上网页原型设计并不复杂,今天Pixso就教大家如何快速绘制PC端和移动端网站原型图,话不多说,上干货~ 1.1 纸质网站原型图 在绘制网站原型图前,一般会和产品经理和客户进行充分的沟通,明确产品逻辑和产品需求。这一步一般会拿着纸笔边绘制边沟通,最终讨论出逻辑合理、思路清晰的原型草图。 1.2 进入在线协同设计工具Pixso,绘制网站PC端网站原型图 进入Pixso工作台,选择【新建文件夹】,开始创作。 1.3 绘制网站原型图框架 现在网站框架尺寸大致分为两种,一种是 PC 端全尺寸 1920X1080 的,另一种是可适应笔记本的 1440X900 的。这次设计的属于后者,我们先用矩形工具创建一个 1440X900 的深色矩形作为网站框架,RGB色值为 18.18.18 。 1.4 绘制导航栏 再用矩形工具在网站框架顶部绘制一个 1440X72 的深色矩形,定出网站的导航栏的位置,RGB色值为 39.39.42 。 1.5 细化导航栏 用矩形工具在导航栏中绘制出几个矩形框,RGB色值为 63.63.70 。定下企业logo、导航文字、用户头像、登录登出按钮的位置。这里一般会选择和导航栏横向居中对齐,保持视觉上在一条水平线上。logo和用户头像相对重要,所以需要放大一些和其他元素做出区分。 1.6 绘制banner栏 用矩形工具在网站上部绘制出 1120X124 的矩形,圆角为 8 ,RGB色值为 39.39.42 。作为网站 banner 位置,左右各空出160 像素,一般网站左右两边都不会顶边处理,会留一定的容错边距,用以保证在各种分辨率的情况下都可以展示全网站内容。 1.7 绘制组件 用矩形工具绘制出 352X310 的矩形框,圆角为 8 ,RGB色值为 39.39.42 ,作为网站组件。形成瀑布流的信息框。 1.8 绘制反馈按钮 最后用矩形工具绘制出一个圆形放在网站的右下角,RGB色值为 130.87.229,然后可以在Pixso的图标库中选择一个对话图标,作为网站的反馈按钮。 1.9 绘制反馈按钮状态 用矩形工具在网站右上角绘制出一个 260X80 的按钮,RGB色值为 130.87.229 ,加入反馈文案,作为反馈按钮的激活状态。在 Pixso 的图标库中选择合适的图标填入即可。这样一个网站的原型图就完成了。 再用矩形绘制出一个 500X400 的矩形框,作为反馈问题的弹窗。细化反馈类型,分为问题、想法、意外三个模块. 随着移动设备的普及。大部分网站除了会有 PC 端还有移动端。下面我们在 PC 端原型稿的文件中继续创建移动端原型。 2.1 创建移动端网站原型图框架 用钢笔工具绘制出一个 375X812 的网站框架,RGB色值为 18.18.18 。 2.2 创建页眉页脚 在 Pixso 的插件中找到产品组件库,拖拽出移动端的页眉页脚并调整到合适尺寸。 2.3 绘制头像栏 用矩形工具在框架顶部绘制出一个 375X107 的矩形,RGB色值为 39.39.42 ,作为头像栏的框。然后在导航框中绘制出抽屉图标和头像图标,RGB色值为 63.63.70 。与 PC 端不同的是,移动端由于控件有限,尽量合并图标做成抽屉形式,以免图标过多影响用户体验。 2.4 绘制导航栏 用矩形工具在框架底部绘制出 375X106 的导航栏,RGB色值为 39.39.42 。然后再绘制出四个 40X40 的圆角矩形,圆角为 8 ,RGB色值为 63.63.70 ,这样一个导航栏的原型就好了。与PC端不同的是,移动端导航栏一般放在底部,方便用户点击操作。 2.5 绘制banner栏 用矩形工具在网站上部绘制出 327X124 的矩形,圆角为 8 ,RGB色值为 39.39.42。作为网站 banner 位置,左右各空出 24 像素,做出一点视觉层次。 2.6 绘制组件 用矩形工具绘制出 327X310 的矩形框,圆角为8,RGB色值为39.39.42,作为网站组件。形成瀑布流的信息框。需要注意的是下面的组件需要放在导航栏图层的下面,避免穿帮。 2.7 绘制反馈按钮 最后用矩形工具绘制出一个圆形放在网站的右下角,RGB色值为 130.87.229 ,然后可以在Pixso的图标库中选择一个对话图标,作为网站的反馈按钮,移动端原型就完成了。 原型界面创造好了之后需要制定网站规范,包括颜色规范和组件规范,方便后期做高保真原型时调用。 在 Pixso 中可以合并组件做成控件,选中组件点击右键创建组件即可。 以上就是绘制PC端和移动端网站原型图的详细教程,原型图设计作为UI设计中最重要阶段之一,所起到的作用也是非常重要:上接需求文档,下接UI视觉设计和开发。可以说是UI设计中的主心骨,串联了整个UI设计。 4. 原型设计工具Pixso,开创协作新模式Pixso具备一站式原型、设计、交付能力,是新一代在线原型设计协作工具。有了Pixso,设计师无需在工具之间切换,需求梳理、ui设计、原型设计、收集反馈、原型交付在Pixso就能全部搞定! 原型:Pixso支持建立流畅的原型框架流程,将产品整体方案进行具象化演示,以便产品经理、设计师、开发共同探索分析用户核心需求。 设计:借助Pixso内置设计系统和社区资源,产品经理、UI/UX设计师可获得海量原型模板、页面、组件及图标素材 ,开启敏捷高效工作。 交互:在跳转、弹窗、切换、关闭等情景下,提供丰富的转场交互动画自定义设置,可组合实现上百种转场形式。 体验反馈:提供宏观和微观双重视角,即可完整地向外界演示产品全貌和交互细节,也可预览GIF来微调动作、动画设计,与团队在协作中不断优化体验。 团队协作:通过浏览器进入Pixso,实时获取所有原型设计信息,一个工具替代多种传统原型设计和项目管理工具,真正提升产设研团队的沟通协作效率。 如果想学好原型设计除了需要不断练习外,最好的方式就是多研究优秀产品或网站,学习它们的逻辑框架、设计思路,在Pixso资源社区里,给大家准备好了各种主流平台的原型设计和UI设计稿,以便让小伙伴们更好的学习。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |