设计师的设计日记
Every week I receive an overwhelming number of emails from people who ask me to critique their Websites for design and usability flaws. Hopefully though, if you use a sound process to develop your site, you won’t need a critique.
每周我都会收到大量要求我批评他们的网站有关设计和可用性缺陷的人的电子邮件。 不过，希望您可以使用完善的流程来开发自己的网站，而无需进行评论。
Here are the basic elements I consider each time I design a site — using these as a checklist, I can be sure I’ve covered all the Web design essentials in each design I complete. Try these tips, and check off each point in the list when you create your next site!
这是我每次设计站点时都会考虑的基本元素-使用这些作为清单，我可以确定自己完成的每个设计都涵盖了所有Web设计要点。 尝试这些技巧，并在创建下一个站点时检查列表中的每个点！
One day while surfing around, you decide to check out a new link. When it loads in your browser, you notice that the home page is colored in red, black and gray. Then you click on a link to, for instance, the About Us page, and you’re greeted with a yellow and green page adorned by blue text.
一日游时，您决定签出一个新链接。 当它加载到浏览器中时，您会注意到主页以红色，黑色和灰色着色。 然后，单击指向“关于我们”页面的链接，然后会看到带有黄色和绿色页面的蓝色文字装饰。
This sort of inconsistent coloring is enough to deter visitors from ever coming back to a site — not only is it hard on the eyes, but it screams a lack of professionalism.
这种不一致的颜色足以阻止访问者再次访问该站点-不仅使人眼花乱，而且还尖叫着缺乏专业性。
Before you even start to code your site, choose two or three complementary colors and stick with them. If the organization for which you’re building the site has a logo or brand that uses particular colors, you might consider using those. If you take a look at any site of a large or successful company (try www.coca-cola.com or www.ford.com), you’ll see that, even when different sub-sections of a site are color-coded, the brand colors are carried across every page of the site.
在甚至开始为网站编码之前，请选择两种或三种互补色并坚持使用。 如果您要为其构建网站的组织的徽标或品牌使用特定的颜色，则可以考虑使用这些颜色。 如果您查看大型或成功公司的任何站点(请尝试www.coca-cola.com或www.ford.com )，即使站点的不同子区域都用颜色编码，您也会看到这一点。 ，品牌色彩遍布网站的每个页面。
Take a look at other sites that you like: what colors do they use and how do they use them? Do they gradually introduce the colors or are they all smack bang in the middle of the screen when you load their home page? I’ve come up with a list of the five most used color combinations around the Web:
看一下您喜欢的其他站点：它们使用什么颜色以及如何使用它们？ 它们是逐渐引入颜色还是在加载主页时它们全部出现在屏幕中间？ 我提出了Web上五个最常用的颜色组合的列表：
Red, yellow and white 红色，黄色和白色 Blue and white 蓝色和白色 Red, gray and white 红色，灰色和白色 Blue, orange and white 蓝色，橙色和白色 Yellow, gray and white 黄色，灰色和白色This is one of the most important aspects for a designer to master. Never, ever implement either an Internet Explorer- or Netscape-specific function into a site unless it will only be used by a closed user group (e.g. a company Intranet).
这是设计师要掌握的最重要方面之一。 永远不要在站点中实现Internet Explorer或Netscape特定的功能，除非该功能仅由封闭的用户组(例如公司Intranet)使用。
Sure, it can be tempting to implement super-dooper DHTML effects such as automated iFrame scrolling, but be warned: those who don’t have the latest browser installed won’t take to kindly to your ignorance of their needs. If you’re desperate to implement flying pigs or falling snowflakes on your site but still want cross-browser compatibility, then take a look at BrowserHawk from Cyscape. BrowserHawk is a nifty set of COMs that allows you to detect all sorts of things about the client’s browser, including whether or not they have JavaScript enabled, and the version and name of their browser, to name a few.
当然，实现超级dooper DHTML效果(例如自动iFrame滚动)可能很诱人，但是要警告：未安装最新浏览器的人不会对您的需求感到无聊。 如果您迫切希望在站点上实现飞猪或飘落的雪花，但仍希望跨浏览器兼容，那么请查看Cyscape的 BrowserHawk。 BrowserHawk是一组精美的COM，使您能够检测到有关客户端浏览器的各种信息，包括它们是否启用了JavaScript以及浏览器的版本和名称，仅举几例。
Have you ever been to a site and wondered where in the world the links to the rest of its pages are? Menu accessibility is one of the key elements in creating a positive experience for your site’s visitors.
您是否曾经去过某个网站，并想知道指向该网站其他页面的链接在哪里？ 菜单可访问性是为您的网站访问者创造良好体验的关键要素之一。
Most Websites either display a left-aligned, vertically orientated menu, or a top-aligned, horizontally orientated menu system. Surveys have shown that using either of these menu styles (or both together, if you lay them out in a complementary format) is guaranteed to provide your visitors with a positive site experience. Using these familiar styles will make your users feel comfortable moving from page to page, and means they won’t have to hit the back button every time they want to return to the home page.
大多数网站要么显示左对齐的垂直方向菜单，要么显示顶部对齐的水平方向菜单系统。 调查显示，使用这两种菜单样式中的一种(或同时使用两种菜单样式，如果以补充格式进行布局)可以确保为访问者提供良好的网站体验。 使用这些熟悉的样式将使您的用户在页面之间切换时感到自在，这意味着他们不必每次想要返回主页时都按下后退按钮。
To see what I mean, spend a couple of minutes moving around Amazon.com. Now, spend the same amount of time at the site at www.isonsw.com.au. Which site’s menu system did you feel comfortable with? I’m sure you answered Amazon’s, because it was consistent, easy to use, and made it blatantly obvious which page you were on, no matter where you were on the site. When you develop a new site, you should prototype at least three menu systems and ask friends, family and work colleagues which one they would prefer to use and why.
要了解我的意思，请花几分钟时间在Amazon.com上移动。 现在，在网站www.isonsw.com.au上花费相同的时间。 您对哪个站点的菜单系统感到满意？ 我敢肯定，您回答了亚马逊的问题，因为它是一致的，易于使用的，并且无论您在站点上的什么位置，都可以清楚地看到您在哪个页面上。 当您开发一个新站点时，您应该至少建立三个菜单系统的原型，并询问朋友，家人和同事，他们希望使用哪个菜单系统以及原因。
Cascading Style Sheets (CSS) allow you to develop a specific set of style classes, which you can implement throughout your site. Style sheets can also be used to change certain style attributes of the built-in HTML tags, such as making the color of a <H1> tag red, or making the background color of a <td> cell yellow, etc.
级联样式表(CSS)允许您开发一组特定的样式类，您可以在整个站点中实施这些样式类。 样式表还可用于更改内置HTML标记的某些样式属性，例如将<H1>标记的颜色设置为红色，或将<td>单元格的背景颜色设置为黄色等。
Use the color scheme you identified in tip #1 to create a variety of styles including a bold headline, an "important points" style, and a default text style. You may also want to change the default style of the anchor tag so that your links match the color scheme of your site.
使用技巧1中确定的配色方案可以创建各种样式，包括粗体标题，“重要点”样式和默认文本样式。 您可能还需要更改锚标记的默认样式，以使您的链接与网站的配色方案匹配。
If you’ve never used Cascading Style Sheets before, then here are some great articles to help get you started:
如果您以前从未使用过层叠样式表，那么以下是一些很棒的文章可帮助您入门：
An Introduction to Cascading Style Sheets
级联样式表简介
Adding a Touch of Style at W3.org
在W3.org上增添时尚气息
One easily implemented tip that’s often overlooked is this: make sure that any links that don’t take the visitor directly to a page on your site should be opened in a new window by default.
一个容易实现且经常被忽略的技巧是：确保默认情况下，应在新窗口中打开所有不会将访问者直接带到您网站页面的链接。
When you think about it, this approach benefits the visitor as much as it does yourself: they’re given free reign to browse the external link, with the option to return to your site simply by closing the external site’s browser window.
当您考虑它时，这种方法给访问者带来的好处与您自己一样多：他们可以自由支配浏览外部链接，并且可以选择关闭外部站点的浏览器窗口来返回您的站点。
To open a link in a new window, you simply need to specify the value "_blank" for the target attribute of the link’s anchor tag. For example, you’d use this…
要在新窗口中打开链接，您只需为链接的定位标记的目标属性指定值“ _blank”。 例如，您将使用此…
<a target="_blank" href="http://www.sitepoint.com">Click here</a>…to open SitePoint.com in a new browser window.
…在新的浏览器窗口中打开SitePoint.com。
The majority of Web users is in a hurry and pressed for time in some way or another. Our eyes only pickup on certain things, and these don’t include hyper links that look like they’re part of the body of a document. When you’re developing a new site, always make sure that your hyper links are underlined, preferably in a different color to the text that surrounds them.
大多数Web用户都急于以某种方式争取时间。 我们只关注某些事物，而其中不包含看起来像是文档正文一部分的超链接。 在开发新网站时，请务必确保您的超级链接带有下划线，最好使用与其周围的文本不同的颜色。
Here’s an extract from a page I received when I signed up for an affiliate program a couple of days ago:
这是几天前我注册会员计划时收到的页面的摘录：
Registration Successful!
注册成功！
Thanks for becoming a member of our site. The details of your account have been email to name@site.com. To return to our site please click here. If you would like to recommend our site to someone else you know, then please click here.
感谢您成为我们网站的成员。 您的帐户详细信息已通过电子邮件发送至name@site.com。 要返回我们的网站，请单击此处。 如果您想将我们的网站推荐给您认识的其他人，请单击此处。
Quickly glancing over the text shown in the example above, how many links did you spot? If you answered none, then you wouldn’t be alone.
快速浏览以上示例中显示的文本，您发现了多少个链接？ 如果您没有回答，那么您将不会孤单。
Each "click here" was actually a link, but the Web designer didn’t even bother to make the link stand out from the rest of the text around it. Look how much easier it is to spot the links when they’re both underlined and colored:
每个“单击此处”实际上都是一个链接，但是Web设计人员甚至没有费心使该链接从其周围的其余文本中脱颖而出。 看看在带有下划线和颜色的链接中查找链接有多容易：
Registration Successful!
注册成功！
Thanks for becoming a member of our site. The details of your account have been email to name@site.com. To return to our site please click here. If you would like to recommend our site to someone else you know, then please click here.
感谢您成为我们网站的成员。 您的帐户详细信息已通过电子邮件发送至name@site.com。 要返回我们的网站，请单击此处 。 如果您想将我们的网站推荐给您认识的其他人，请单击此处 。
One of the main reasons why so many Websites are slow is because their images are not fully optimized. Optimizing images will decrease their file size, which means that less data will need to be downloaded from a site before it can be displayed. Here are three ways to optimize your images:
这么多网站运行缓慢的主要原因之一是因为它们的图像没有得到完全优化。 优化图像将减小其文件大小，这意味着可以从站点下载较少的数据，然后才能显示它们。 以下是优化图像的三种方法：
1. Reduce the image size:
1.缩小图像尺寸：
Make sure your images are as small as possible. Crop any "white space" around the edges – this increases the file size of the image.
确保图像尽可能小。 在边缘周围裁切任何“空白” –这会增加图像的文件大小。
2. Reduce the number of colors:
2.减少颜色数量：
Many image formats including the graphical interchange format (GIF) allow you to reduce the color depth of an image without noticeably decreasing its visual quality. If you have an image such as a logo, then try using a program such as PhotoShop to decrease its color depth down from 16 bit to 8 bit. Save the image and view it in your browser. If it still looks crisp and clean, then save the image. Notice the difference in file size compared to the 16-bit version?
包括图形交换格式(GIF)在内的许多图像格式都可以减少图像的色深，而不会明显降低其视觉质量。 如果您有徽标之类的图像，请尝试使用PhotoShop之类的程序将其颜色深度从16位降低到8位。 保存图像并在浏览器中查看。 如果看起来仍然清晰而干净，则保存图像。 请注意，与16位版本相比，文件大小有所不同吗？
3. Reduce image quality:
3.降低图像质量：
If you’re working with a Joint Photographic Experts Group (JPEG) image, then you can reduce its file size by reducing its quality. Using a program such as PhotoShop, you can specify the amount of "loss" for the image, which in turn reduces its size.
如果使用的是联合图像专家组(JPEG)图像，则可以通过降低图像质量来减小其文件大小。 使用PhotoShop之类的程序，您可以为图像指定“丢失”的数量，从而减少图像的大小。
This is probably the simplest tip to implement. When a new visitor comes to your site for the first time, they want to know who you are and what you do straight up, especially if you sell products.
这可能是最简单的实现技巧。 当新访客首次进入您的网站时，他们想知道您是谁，以及您的业务直截了当，特别是如果您销售产品。
On your home page, you should have a small paragraph that tells them exactly who you are and what you do. This will increase their confidence in your company and if you have what they’re after then there’s a better chance that they’ll stick around. Here’s an example for a fictional site, Fred-Smith-Tools.com, which sells gardening tools:
在您的主页上，您应该有一小段文字，准确地告诉他们您是谁，做什么。 这将增加他们对您公司的信心，如果您对他们的想法有所了解，那么他们很有可能会留下来。 这是一个虚构的网站Fred-Smith-Tools.com的示例，该网站销售园艺工具：
"Hi, thanks for stopping by Fred-Smith-Tools.com. We’re based in Los Angeles, USA and sell a wide range of gardening tools including spades, pruning tools, clippers, spray guns and shovels. Please scroll down this page to take a look at our list of daily specials!"
“您好，谢谢您在Fred-Smith-Tools.com的驻足。我们的总部位于美国洛杉矶，并出售各种园艺工具，包括锹，修枝工具，剪刀，喷枪和铁锹。请向下滚动此页面看看我们的每日特价清单！”
A customer testimonial is simply a comment from one of your site’s visitors that includes some positive details of their dealings with your organization, such as:
客户推荐只是您网站访问者之一的评论，其中包括与您的组织打交道的一些积极细节，例如：
"I found your site last week from Google.com and I must say, I’m really impressed with its layout and your HUGE range of products. I ordered a CD from your on Thursday and it arrived right at my door the next day. If only there were more sites like yours on the Net. Great work!"
“上周我从Google.com找到了您的网站，我必须说，它的布局和庞大的产品系列给我留下了深刻的印象。我从周四订购了一张CD，第二天就到了我家。如果网上有更多像您这样的网站，那就太好了！”
By displaying customer testimonials on your site, visitors can see that other people have used your site or products, and found them to be useful and valuable. Customer testimonials are also one of the best ways to increase visitor confidence in your business.
通过在您的网站上显示客户推荐，访问者可以看到其他人使用了您的网站或产品，并发现它们有用和有价值。 客户推荐也是增加访客对您业务信心的最佳方法之一。
To display customer testimonials on your site, add a link to your menu system named "Customer Testimonials". Link this to a page where you display all the testimonials you’ve received from your customers. Or display the testimonials in a sidebar, which links to the page that lists them all. To actually collect testimonials, either ask some of your customers for them directly, or set up a feed back form on your site.
要在您的站点上显示客户推荐，请向您的菜单系统添加一个名为“客户推荐”的链接。 将此链接链接到一个页面，您可以在其中显示从客户那里收到的所有推荐信。 或在侧栏中显示推荐，这些推荐链接到列出所有推荐的页面。 要实际收集推荐，请直接向您的一些客户询问，或者在您的站点上设置反馈表。
One of the main sources of frustration for many Web surfers is the lack of contact details on many sites. If you run a Website that sells products, then many of your potential customers might prefer placing a phone order to ordering on the Internet. So be sure to display either a sales email address, or the phone number for your sales hotline, in the top right hand corner of every page.
许多网络冲浪者感到沮丧的主要原因之一是许多站点上缺少联系方式。 如果您经营一个销售产品的网站，那么您的许多潜在客户可能更喜欢在网上订购电话。 因此，请确保在每个页面的右上角显示销售电子邮件地址或销售热线的电话号码。
If you’re a Web developer, then try to check off these tips as you prototype each and every site you design — but keep in mind that these pointers are just as easily applied to existing sites.
如果您是Web开发人员，则在为您设计的每个网站制作原型时，请尝试检查这些技巧-但请记住，这些指针也很容易应用于现有网站。
No doubt as you design more Websites over time, you’ll come up with a list of your own design tips and guidelines. Use them whenever you can, and share them with newbie Web developers so they don’t make the same mistakes that you may have!
毫无疑问，随着时间的推移，您将设计更多的网站，您将获得自己的设计技巧和指南列表。 尽可能使用它们，并与新手Web开发人员共享它们，以免他们犯同样的错误！
翻译自: https://www.sitepoint.com/site-design-checklist/
设计师的设计日记
相关资源：jdk-8u281-windows-x64.exe