文档章节

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

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

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

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

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

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

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

可以说网站本身就是在浏览器中所运行的数字化交互界面,这也使得许多设计师也倾向于在编写代码之前,使用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感觉用它来做网页原型很快,拖拖拉拉就搞定了
如何选择最佳响应式设计框架?

  【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
2018年,成功的创业公司网站是怎么设计的?

创业公司往往意味着活力、惊喜,其别开生面的商业运营模式和独具风格的产品服务,都是其在市场中立足的根本。而创业公司的网站,则是凝聚公司产品、形象、企业文化和核心价值的橱窗,也是承载...

mo311
01/23
0
0
20 款云端 web 开发工具

来自slodive网站博主Sunalini Rana 的文章,其总结了20款为web开发准备的云端应用,希望你能喜欢。 iPlotz iPlotz允许您快速创建可点击的,导航原型图和线框图,针对网站和软件应用的原型设计...

小卒过河
2011/08/05
6.7K
8
设计师们书签里的设计素材精品网站

每每看到别人的好作品,作为设计小白的你,是不是两眼放光、垂涎三尺?[仰慕的意思*(~ ̄▽ ̄)~)] 仰慕归仰慕,想必你一定也和我一样,对他们的作品不仅仅是想欣赏而已,更多的是想学习一下...

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

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

jongde
03/19
0
0
正在创业或准备创业的你如何组建技术团队?

深夜,一个人独自在公司听着音乐看着文章的标题在发呆,一个从来没有写过文章的我不知道怎么把文章写得更简单明了让大家看了所有收获及原意看完,很多人会有疑问,都不知道怎么写为什么要写呢...

程序员客栈
2016/05/23
50
0
9款流行的 HTML5/CSS3 框架推荐

HTML5 和 CSS3 框架越来越流行,紧跟潮流,本文推荐9款不错的HTML5 和 CSS3 框架。 Gridless Gridless 是个很棒的HTML5 和CSS3 框架,制作跨平台网站排版、布局等。 Inuit.css 作者 Harry Ro...

小卒过河
2011/06/27
35K
1
必选项:你的网站易于阅读吗?

  当我们设计网站时,我们在想什么?——设计引人注目吗?便于理解吗?有品牌关联吗?……其实最先需要思考的是,文字可以被容易阅读吗?   微软估值高达340亿美元,拥有着一支由设计师、...

程序员客栈
2016/06/27
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
9分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
23分钟前
0
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 #!/usr/bin/expectset passwd "123456"spawn rsync -av root@192.168.133.132:/tmp/12.txt /tmp/expect {"yes...

lyy549745
24分钟前
0
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
32分钟前
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
36分钟前
0
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0
nginx负载均衡

一、nginx 负载均衡 拓扑图: 主机信息: 1、负载均衡器1(lb1):192.168.10.205 RHEL7.5 2、负载均衡器2(lb2):192.168.10.206 RHEL7.5 3、web服务器1(web01):192.168.10.207 Centos...

人在艹木中
昨天
0
0
做了一个小网站

做了一个小网站 www.kanxs123.com

叶落花开
昨天
0
0
继社会佩奇之后,又尝试了可爱的蓝胖子,有趣 Python

#哆啦A梦# !/usr/bin/env python3# -*- coding: utf-8 -*-# @Author: dong dong# @Env: python 3.6from turtle import *# 无轨迹跳跃def my_goto(x, y): penup(...

Py爱好
昨天
0
0
shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部