文档章节

如何用浏览器给网站设计原型

asd010709
 asd010709
发布于 2016/07/25 10:55
字数 2306
阅读 7
收藏 0

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

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

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

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

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

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

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

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

·更便于测试和修改的栅格系统

·断点的增删更加随意

·诸如下拉菜单这样的动态效果可以实时测试

·你可以基于一个小型代码库着手,随后再逐步增加

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

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

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

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

原型设计流程

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

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


ZQSxSsj0OuwV5xq8
 

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


02-placehold-it-webapp-images

 

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

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

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

当你的整个布局在浏览器中已经处于崩坏的状况,它是否有色彩和内容都已经不重要了。但是如果仅仅只有布局而不包含具体内容的话,修整起来就方便多了。

一旦你的原型设计搞定了,再填充内容就方便多了。

在这个原型设计阶段,需要考虑的东西也不少。虽然不同的项目需求不同,但是有一些基本的问题几乎所有的项目都需要考虑的:

·这个布局是否能够兼容所有的主流浏览器?

·元素之间的间隙和留白是否足够?

·所有的动态元素是否都能够正常运行?

·是否设定好了所有必要的响应断点?

基于浏览器的原型设计工具

既然都说到这里,一个不需要编写任何代码的浏览器内原型设计工具才是我们真正要的。当然,如果你精通HTML/CSS/JS代码那又是另外一回事,jQuery 甚至拥有一大堆库可以帮你省去许多麻烦。

所以我们今天探讨的是便捷、高适用性的浏览器内的原型设计工具,下面推荐的几款都是免费而易于上手的。

Chrome Workspaces


03-chrome-workspaces-devtools

 

这个内置于寰宇浏览器的开发工具名为Workspaces,它本身就存在于你的本地目录中,可以直接为浏览器调用。 如果你做了一个简单的HTML/CSS 原型,并且在浏览器中打开了,那么你可以在 Chrome Workspaces 编辑和修改它们。目前绝大多数的开发人员都在使用它。

Bootstrap


04-bootstrap-css-open-source

 

每个前端都应当熟悉Bootstrap 的库,其中预制的CSS类和各种元素相当的完备,足以满足你的想象。

各种按钮、布局、标签、下拉菜单、以及各类常见的网站组件与功能。你完全没有必要自己从头开始写某个组件,因为Bootstrap 几乎全覆盖了。

Bootstrap 唯一的不足,大概是使用它的人太多了,许多样式和控件你可能经常会见到。当然,你如果愿意自定义样式的话,那么一定可以让它更加强大。

Foundation


05-zurb-foundation-resource-prototyping

 

另外一个非常流行的选择是来自ZURB的Foundation。相比于 Bootstrap,Foundation 更加清爽简单,原因也很简单,它没有太多的默认样式。

Foundation 的定制性也更强,用户可以轻松地将自己的样式覆盖到默认的控件和元素上。许多项目使用Bootstrap的时候通常只会用到默认的样式,而在使用Foundation的时候,设计师更多倾向于增加自己的样式。

Pure CSS


06-pure-css-open-source-library

 

另外一个值得推荐的纯 CSS/JS 框架 应该是 Pure CSS。它和 前面的 Foundation 与 Bootstrap 一样是免费开源的,它配备了栅格,排版布局,按钮以及其他的动态控件。

Pure CSS 在功能性和美观上做到了很好的统一,它的简单与灵活使得它可以应用到不同的原型设计,而它高度凝聚的库则提供了完备的功能。

Handcraft


07-handcraft-prototyping-tool-extension

 

Handcraft 是一个奇怪的寰宇浏览器插件,它可以让开发者在线存储和共享原型设计。

结语

和所有的设计工具一样,想要用好浏览器内的原型工具,最好的办法就是反复练习。如果你想更快的完成今后的设计项目,使用它们能够有效的帮你提速。

本文转载自:www.ub11.info

共有 人打赏支持
asd010709
粉丝 0
博文 17
码字总数 2417
作品 0
景德镇
私信 提问
加载中

评论(1)

请勿吸烟
请勿吸烟
才用了mockplus感觉用它来做网页原型很快,拖拖拉拉就搞定了
2013 年的 10 个线框图和界面原型工具

创建一个网站或者应用不仅限于决定放什么在主页上或者用什么图片匹配网站的主题。为了吸引用户并且和拥有用户友好的界面,视觉设计是必不可少的。因此,项目开发者必须要先把设计可视化,看看...

oschina
2013/04/01
16.4K
42
如何选择最佳响应式设计框架?

  【IT168 评论】现在有很多框架可供设计师和前端开发人员选择,其中大多数都可进行原型设计和部署。你可以从中找到最佳综合性框架,并且是轻量级框架,让你可以准备好进入下一个项目。目前...

it168网站
2017/06/21
0
0
CSS框架设计器--Thinkin' Tags

CSS框架YAML的开发者Dirk Kesse近日推出了一个在线网页编辑器Thinkin' Tags,目前该编辑器还处alpha阶段。YAML是一个模块化的CSS框架,可帮助开发者创建灵活的、可访问的、响应式网站。而Thi...

匿名
2013/05/17
854
0
原型设计测试—如何在不同设备中,进行可用性测试

从广义上讲,可用性测试是以用户体验为中心的交互设计测试,通过用户测试来进行产品评估。这种测试的好处是,在投入前端开发、写代码之前,能够对移动应用程序或者网站进行前期测试。那么有人...

jongde
2016/09/26
11
0
让你不再恋家的9款小众时尚的酒店网站设计

一场说走就走的旅行少不了一家精挑细选的酒店。出门在外,没有一个舒适的住处,恐怕旅行的记忆也并不是那么美好。大牌酒店住不起,小众酒店性价比高,但哪家最合适?网上攻略必不可少。 作为...

jongde
03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新技术不断涌现,下一代云计算的突破口在哪里?

这是一个IT技术飞速发展的时代,在硬件基础设施的不断升级以及虚拟化网络等技术的日益成熟下,云厂商也正面临着各种新技术带来的巨大挑战。从数据中心的基础建设到云平台的系统构建再到产品底...

UCloudTech
8分钟前
0
0
走进阿里云物联网

课程介绍: 阿里云IoT,致力于实现万物互联的美好世界,为生态合作伙伴提供基于云边端一体化、人工智能、安全的物联网基础平台和内容服务能力平台,通过该平台高效连接、管理设备的同时,开放...

mcy0425
15分钟前
0
0
Kylin2.5.0环境搭建及操作记录

Apache Kylin是一个开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区。它能在亚秒内查询巨大的H...

PeakFang-BOK
25分钟前
2
0
SpringBoot整合es

文档对像 @Document(indexName = "bigdata",type = "tag")public class User { @Idprivate String openid; private List<String> tags;public String getOpenid() ......

魔法王者安琪拉
28分钟前
1
0
windows下让 jar 在后台运行的办法

windows下 运行 java jar 不出现 命令行 窗口 新建一个披处理 run.bat,内容如下 @echo off start javaw -jar xx.jar exit 双击运行即可。...

glen_xu
37分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部