1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

只需浏览器,就能帮你搞定原型设计--九分科技

时间:2020-06-27   分类:交互设计    作者:网络   来源:网络整理   点击:115

只需浏览器,就能帮你搞定原型设计 本文来自九分网络

www.9fen.net

网站设计原型是一个全面系统的过程,在此过程中你需要拿出一套线框图并确保基本的交互功能。单纯的线框图可以是静态的图片,甚至可以是手绘的草稿,但是原型大多是动态的,可交互的,至少主要的页面和功能能基本呈现出来。

copyright 9fen.net

不过,设计师通常会选择使用图像编辑工具来进行原型设计,只不过这样一来,绝大多数的工具很难实现足够的交互,这也催生了不少开发商转向研发基于浏览器的原型设计工具。

内容采集来自9fen.net

浏览器性能的提升和技术支持的逐步完善,使得基于浏览器的原型设计工具不仅具备了可行性,而且确保了可用性。它们更加快速,更加干净清爽,在构建新的项目的时候,上手更加简单。那么,这一切要如何开始呢?

copyright 9fen.net

今天的这篇文章,将会帮你整理一些基于浏览器的原型工具的基础知识,并推荐一系列真正实用、好用的原型设计工具。 本文来自九分网络

浏览器内原型设计的基础知识

可以说网站本身就是在浏览器中所运行的数字化交互界面,这也使得许多设计师也倾向于在编写代码之前,使用PS之类的图像编辑类工具先对界面进行设计。 九分网络

换句话来说,在浏览器中设计网站的原型,反而是更加符合逻辑的思路,无论是测量和规划详细布局,还是设计交互和动效,都更加“原生”。

内容采集来自9fen.net

不过总的来说,对于全新的设计项目而言,并不存在一个统一的最佳原型设计方案。尽管许多设计师仍然倾向于使用PS来开局,但是使用浏览器中的原型设计工具来制作原型,依然有着不可忽略的优势: www.9fen.net

·更便于测试和修改的栅格系统
·断点的增删更加随意
·诸如下拉菜单这样的动态效果可以实时测试
·你可以基于一个小型代码库着手,随后再逐步增加

copyright 9fen.net

Photoshop 目前还不支持制作动态可交互的视觉稿与原型的。那么当你在设计原型的时候,需要为特定的断点和交互而制作单独的图层或者文档。

本文来自九分网络

在浏览器之下所设计出来的原型和最终的界面更为接近,呈现出来的信息也更为进准。相比之下,视觉稿更加扁平,也更加静态。当然,Photoshop 之下呈现出来的视觉稿同样是重要的素材与参考,但是最终还是要提交出可交互的布局设计。所以说,浏览器内的原型设计工具更加省事高效。

九分网络

你可以直接跳过最初绘制草稿的阶段,直接在浏览器中借助工具制作出可交互的网页原型,将你构思中的最终的主要功能都加入进去。这些设计工具本身都很不错,不过你一定要搞清楚这些工具在整个流程中所处的环节。

copyright 9fen.net

你可以在设计原型过程中使用简单的HTML/CSS代码,开源代码库或者浏览器插件,但是最终的目的是一致的:打造一个基本的、可交互、接近网站最终形态(而非细节)的UI界面。 九分网络

原型设计流程

想要完善一个构思,在稿纸上绘制草图总是最佳的方式。同样的,这样的草图同样可以在绘图程序中完成,只是在纸面上完成会更加直接而随性而已。

copyright 9fen.net

对于最初粗糙的设计,你可以通过快速的迭代加入新的想法,逐步完善。你甚至可以在稿纸上画上表格,在其中对不同的控件和元素的属性进行描述,比如宽度、高度、色彩等不同的属性。

内容采集来自9fen.net

只需浏览器,就能帮你搞定原型设计 www.9fen.net

copyright 9fen.net

当草图看起来已经过得去的时候,就可以进入浏览器,打开原型工具,开始设计了。这个时候,你首先要做的是设计一个不带复杂色彩的灰阶布局。有许多不同的工具可以帮你搞定这个问题,比如 Placehold.it 这样的工具就可以帮你快速生成不同尺寸不同灰度的图片。 copyright 9fen.net

只需浏览器,就能帮你搞定原型设计 九分网络

copyright 9fen.net

使用一个纯粹的灰度布局能够让你更加专注于栅格、排版和留白,以及大块的控件诸如轮播图、导航和菜单等。这一阶段的设计应当专注于排版布局,而排除视觉和美学对于整体的影响。 本文来自九分网络

接下来你应该消除所有潜在的缺陷、浏览器Bug和响应断点,让页面能够在所有浏览器中正常的运行。

copyright 9fen.net

搞定这些问题之后,你便可以在其中填充图片、视频和文本内容等等,加入样式和风格,这个时候你再也不用担心整体布局了。专注大区块和重要元素这才是使用浏览器内原型工具的最佳策略。 copyright 9fen.net

标签: 经验分享 线框图 交互设计 原型 原型设计 原型工具 原型图

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----