广告公司之一个负责任的设计工作流程
来源：广告公司 作者：鱼光 日期：2012-2-14 10:53:56 TAG:设计,广告公司
A Responsive Design Workflow 一个负责任的设计工作流程
响应网站的设计可以采取习惯于一会儿，因为一些布局技术和我们多年来创建的版面编排方式不再实用。 If you are accustomed to using Photoshop or Fireworks to build layouts you may quickly realize that responsive designs can take three or more times the work to create mockups in this fashion.如果您习惯于使用Photoshop或Fireworks建立布局，您可以快速实现响应的设计可以采取3次或更多的工作，以这种方式创建的样机。 Especially, for those designers who don't code, responsive design will be difficult to adjust to. ，特别是对那些设计师，谁做不是代码，反应灵敏的设计将是难以适应。
But with any new technique a process will develop.但与任何新技术的过程发展。 So here are some tips for creating a better workflow and some other useful information about responsive design I've found around the web.因此，这里是为创造一个更好的工作流程及其他一些有用的信息，我发现各地的网络响应设计的一些技巧。
The most important thing to remember is responsive design is a process.最重要的事情要记住的是响应设计是一个过程。 You won't be building a pixel perfect layout and then developing it exactly as is.您将不能建立一个像素的完美布局，然后它的发展完全是。 Get it roughly how you want it in Photoshop then move into the browser or simply start out in the browser.大致如何你想在Photoshop然后移动到浏览器，或者干脆在浏览器中启动。 Make a change, test, repeat.做出改变，测试，重复。
If you are completely in the dark about responsive design, here is a list of resources to get started with: Responsive Design Roundup and I have more strune throught the post.如果你是在完全黑暗的有关反应设计，这里是一个资源列表上手： 设计综述响应 ，我有更多strune透过后。
Define Your Break Points定义你的破发点
Before doing anything, figure out where your breakpoints are going to be.做任何事情之前，弄清楚您的断点将要。 The most common breakpoints are:最常见的断点：
320 pixels - smartphone portrait 320像素 - 智能人像
480 pixels - smartphone landscape 480像素 - 智能景观
600 pixels - small tablets(think Kindle Fire) in portrait 600像素 - 小片的画像（觉得烧火）
768 pixels - small tablet in landscape 768像素 - 小片景观
1024 pixels - some tablets, notebooks, desktop monitors 1024像素 - 一些药片，笔记本电脑，台式电脑显示器
1200 pixels - widescreen display monitors 1200像素 - 宽屏显示器
1600 pixels - rich people with their ginormous monitors. 1600像素 - 丰富人民用自己的ginormous一词显示器。
Obviously you won't be designing for all of them.显然，你不会被设计为他们所有。 A typical responsive design tends to have 3-4 break points that cover a small range of viewport dimensions.一个典型的反应设计往往有3-4个破发点，涵盖了小范围的视口尺寸。 As a general example, you may choose one break point for smartphones (less than 480 pixels), another for the smaller viewports (768 pixels or less for tablets), common desktop sizes 1024 pixels, and maybe above 1200 pixels for large monitors.作为一个普通的例子，你可以选择一个智能手机的破发点（小于480像素），另一个较小的视口（片剂768像素或以下），常见的桌面大小1024像素，并可能超过1200像素的大型显示器。
Getting Started入门
With your break points defined, now you can begin to consider the design layout.定义你的破发点，现在你可以开始考虑设计布局。 If you haven't already, familiarize yourself with what other people are doing (what layouts work).如果你还没有其他人在做什么（什么布局工作），熟悉自己。
Check out Media Queries a css gallery specifically for responsive layouts that shows all four break points side-by-side.退房媒体查询显示所有4个破发点端侧响应布局的CSS画廊。
There are a few schools of thought about which layout to start with.有思想的几所学校的布局开始。 Personally I like taking a priority based approach.我个人更喜欢基于优先级的方法。 Make a list of all the content that will need to be displayed on the homepage.做一个清单，将需要在主页上显示的所有内容。 Next, order the list from most to least important.下一步，责令从最不重要的名单。 Then, take this same list and reorder the items from most to least important for each break point.然后，采取同样的列表，并重新排列从最不重要的项目，每一个破发点。 Each layout has it's own priorities and design considerations to take into consideration.每个布局有它自己的优先事项和设计考虑考虑。
Less important items may have to be removed from smaller layouts and you may need to reorganize items based on what users are doing on the site at different browser dimensions.不太重要的项目可能从较小的布局，您可能需要重组项目的基础上，用户对网站在不同浏览器的尺寸做什么。 Google Analytics or similar software is your best friend for this.的Google Analytics（分析）或类似的软件是你最好的朋友。 For example, if 90% of your smart phone users are looking for contact information or store locations, you will want to make your 480 pixel layout reflect that.例如，如果您的智能手机用户的90％正在寻找联系信息或商店位置，你会想要让您的480布局反映。
Using this technique will help when you have to make important decisions about what content to emphasize and what if any, content to remove.使用这种技术将帮助时，你必须做出重要决定删除哪些内容强调，如果有的话，内容。
As an example lets make a design portfolio website, something we are all somewhat familiar with.作为一个例子，让设计组合网站，我们都有点熟悉的东西。
Our responsive design layout will have these priorities at 1024 pixels:我们响应的设计布局，将有1024像素这些优先事项：
Title标题
Tagline标语
Contact Us Call-to-Action联系我们号召行动
Work Samples工作样本
Primary Navigation主导航
Condensed About blurb浓缩关于Blurb的
Contact information联系信息
Testimonials见证
New Client Survey Form新的客户调查表
Condensed Services list简明服务列表
Social Media links社会化媒体链接
Latest Blog Entry最新博客条目
Copyright Information版权信息
At 480 pixels or less, the priority list may look like this:在480像素或以下，优先列表可能看起来像这样：
Title标题
Tagline标语
Contact Information联系信息
Condensed About blurb浓缩关于Blurb的
Primary Navigation主导航
Work Samples (reduced to 1 sample)工作样本（减少到1个样本）
Condensed Services list简明服务列表
Social Media links社会化媒体链接
Copyright Information版权信息
Contact Us Call-to-Action联系我们号召行动
Testimonials见证
New Client Survey Form新的客户调查表
Latest Blog Entry最新博客条目
You might not be used to designing website layouts based on priority but it is important because with so many differently layouts it becomes a challenge to find room for, and promote your most important content in each.你可能不被用来设计基于优先级的网站布局，但它是重要的，因为有这么多不同的布局，它成为一个挑战，找房，你最重要的内容，并促进各。
Once you have the list you can start knocking out sketches.一旦你的列表，你就可以开始淘汰草图。 Remember these don't have to be perfect.请记住这些并不一定是完美的。 I like sketching because it is super fast, easy to change and allows you to see a couple of differnt layouts laid out on a table next to each other for quick comparisons.我喜欢素描，因为它是超级快，很容易改变，让你看到了几个放在一张桌子旁边其他各快速比较出不同的充布局。
To get started I like to sketch all 3-4 viewports on the same piece of paper.上手我喜欢3-4视口中绘制在同一张纸上。 Less looking back and forth and you don't get too focused on one viewport.少来回，你不要太集中在一个视口中。 Start each sketch with the most important element, say your logo.每个草图开始最重要的元素，比如您的标志。 Create a box for it in each viewport sketch.创建一个框，在每个视口中草图。 Then just keep moving down the list, adding navigation, primary and secondary content, footer and so on.然后就继续向下移动列表，添加导航，小学和中学的内容，页脚等。 Focusing on one viewport get you in trouble when you move to the other ones so I like to do all four at the same time, element by element.围绕一个视口，当你遇到麻烦移动到其他的人，所以我喜欢在同一时间做所有四个元素的元素。
For personal projects I don't wireframe but if you are working with others and your stetchs aren't ledgible enough, now would be the time to do that.对于个人项目，我不知道线框，但如果你正在与他人和您的stetchs是不ledgible足够的，现在是时间做。
Getting to the Browser前往浏览器
As soon as you can, build a prototype off of your sketches/wireframes.只要你能建立一个原型草图/线框。 You no longer have or want to wait until the design is completely finished to begin building the website.你不再有，或要等到设计完全结束，开始建设网站。 In fact a lot of people start here before opening Photoshop and add design elements later on.其实有很多人从这里开始，然后打开Photoshop和后来添加的设计元素。 Personally I have to see at least one of the layouts in Photoshop first but if you don't, just skip it.我个人有看到至少先在Photoshop中的布局之一，但如果你不这样做，只是跳过它。 Testing and tweaking various elements are going to take up a large amount of time, so the sooner you can get going the better.测试和调整各种元素要占用大量的时间，所以越早，您可以得到更好的。
If you happen to be working on a live server use this to quickly check your viewports: http://mattkersley.com/responsive/ , just type in your URL.如果你恰好在现场服务器上使用此快速检查你的视口： http://mattkersley.com/responsive/ ，只需键入您的网址。
What About Client Work关于客户工作
If you are working for a client you will have to show them something.如果您正在为一个客户工作，你将不得不向他们展示的东西。 I recommend showing them a desktop mockup and the smartphone mockup, the rest they can use their imagination on.我建议他们展示台式机样机和智能手机的样机，休息，他们可以使用自己的想象力。
When Working on Mockups In Photoshop当工作在Photoshop中样机
Don't really worry about kerning, tracking, leading or font sizes too much.真的不担心字距，跟踪，领导或字体大小太多。 We all know text in Photoshop is imposible to get right, so don't bother unless a client needs to see it.我们都知道，在Photoshop中的文字是imposible得到正确的，所以不要理会，除非客户需要看到它。 For more on fonts, keep reading below.有关字体，请继续阅读下面的。
The Markup标记
With a responsive design I like to code my homepage completely first before touching the css.一个负责任的设计，我想完全先代码之前，我接触CSS的网页。 I do this so I have all the content there and don't forget anything.我这样做，所以我有所有的内容有，不要忘记什么。 When that is done I start on the universal styles like basic colors, background and anything that will remain consistent throughout.当做到这一点，我开始像基本颜色，背景和什么将保持一致，在整个通用的样式。 Basically, the stuff that is already defined in the HTML5 Boilerplate along with A tags, paragraph, blockquote, list styles, etc. Then I set up the different media queries and the coresponding layouts, without saving images or doing to much design styling. HTML5的样板中已定义的东西，连同标签，段，BLOCKQUOTE，列表样式等基本上然后我设置了不同媒体的查询和coresponding的的布局，而不保存图像或做太多的设计造型。 Just to be able to see if the layout is going to work or not.只是为了能看到如果布局工作或没有。 And once I've seen that it works, save background images, non-placeholder images, and do all the design styles.有一次我见过，它的作品，背景图片，非占位符图像保存，做所有的设计风格。
Conversions转换
Depending on how you are setting up your layout you are probably going to be using ems or percents.这取决于你如何设置你的布局，你可能会使用EMS或百分比。 So here are some conversion tools.因此，这里有一些转换工具。
For type use http://pxtoem.com/类型使用http://pxtoem.com/的Creating Fluid Grids us http://csswizardry.com/fluid-grids/创建流体网格我们http://csswizardry.com/fluid-grids/的
Responsive Images响应图片
Images can be another pain in the ass.图像可以是另一个痛苦的屁股。 Here is some good reading to keep you busy:下面是一些良好的阅读，让你忙：
Fluid Images 流体图片
Adaptive Images at 24Ways. 自适应图像在24Ways。
Adaptive Images Again and yet another from 24Ways 自适应数字图像再次和尚未另一个从24Ways
Frameworks框架
One way to save development time is to use a CSS framework.一种方法是使用一个CSS框架，以节省开发时间。 They do take a bit of time to get the hang of.他们确实需要一点时间来得到挂起。 But a site or two down the road you will be working a whole lot faster than if you are coding it all from scratch.但是，两个站点或在道路上你会被一大堆工作速度比，如果你是从头编码这一切。 There are tons out there.有吨那里。 Here are a few:这里有几个：
http://fluidbaselinegrid.com/ http://fluidbaselinegrid.com/
http://designinfluences.com/fluid960gs/ http://designinfluences.com/fluid960gs/
http://thatcoolguy.github.com/gridless-boilerplate/ http://thatcoolguy.github.com/gridless-boilerplate/
http://html5boilerplate.com/mobile http://html5boilerplate.com/mobile
Other Stuff to Look At其他的东西，看看
And if you don't have enought to read, here are some other good articles about responsive design from around the web.如果你没有足够多的阅读，这里有一些其他来自各地的网络响应设计的好文章。
Responsive Web Design . 响应性的Web设计 。 One of the original articles about responsive design by Ethan Marcottes on A List Apart.一个约由Ethan响应设计的原创文章Marcottes除了名单上。
Ethan Marcotte's notes from his Event Apart Speech “The Responsive Designer's Workflow”. 伊桑Marcotte的音符从他的事件，除了语音“敏感的设计师的工作流程”。
http://trentwalton.com/2011/05/10/fit-to-scale/ Trent Walton's take on doing responsive design. http://trentwalton.com/2011/05/10/fit-to-scale/特伦特·沃尔顿就做响应设计。 A short one.短短一。
Responsive Web Design Toolbox - 50 Tools A whole bunch of stuff to get you working. 响应性的Web设计工具箱- 50工具的一大堆东西，让你的工作。
In Search of a Responsive Workflow by A. Craig Williams. A.克雷格·威廉姆斯在搜索响应流 。 A good read.很好看的。
源文地址: 转载请保留!
|