七日掌握设计配色基础_掌握正确的基础知识：如何设计网站的导航，搜索和首页...

七日掌握设计配色基础

by Anant Jain

通过Anant Jain

一个7分钟的指南，使这三个基础组件正确无误。 (A 7-minute guide to getting these three foundational components just right.)

If you wanted to buy a new hammer from a hardware store, imagine how you would go about doing this:

如果您想从五金店购买一把新锤子，请想象您将如何做：

Option 1: you can either look through the store — there are aisles with department names on top and, within a department, there are signs at the end of each aisle.
选择1：您可以浏览商店-在过道上有部门名称，在一个部门内，每个过道的末尾都有标牌。
Option 2: you can find the nearest clerk and just ask them where they keep the hammers.
选择2：您可以找到最近的店员，然后问他们存放锤子的地方。

It could be a mixture of the two as well — you may try to navigate a bit to see how easy it is. If you don’t find what you’re looking for, you may ask a clerk.

它也可能是两者的混合-您可以尝试浏览一下以了解它是多么容易。如果找不到您想要的东西，您可以咨询店员。

If you think about it, this is exactly how we use websites as well. We go looking around for a bit (Navigation) and, if we cannot find what we came looking for, we hit the Search functionality. These are the two critical components of your site. Minor usability flaws here can cause major annoyance to your users.

如果您考虑一下，这也正是我们使用网站的方式。我们四处寻找( 导航 )，如果找不到所需的内容，请点击搜索功能。这是您网站的两个关键组成部分。这里的可用性缺陷可能会给用户带来很大的烦恼。

This short guide, in part based on Steve Krug’s seminal book “Don’t Make Me Think,” I will teach you how to design your website’s Navigation, Search, and Homepage. Let’s start with the Navigation.

该简短指南部分基于史蒂夫·克鲁格(Steve Krug)的开创性著作“不要让我思考”，我将教您如何设计网站的导航，搜索和首页。让我们从导航开始。

Unlike our hardware store example, a website is not a physical space. It is different from a hardware store in three ways:

与我们的硬件商店示例不同，网站不是物理空间。它与硬件存储在三个方面不同：

A website does not provide the user with a sense of scale
网站无法为用户提供规模感
A website does not provide the user with a sense of direction
一个网站不方向感提供用户
A website does not provide the user with a sense of location
网站无法为用户提供位置感

When we want to return to something on a website, we can’t rely on a physical sense of where it is. Instead, we have to remember where it is in the conceptual hierarchy of the website, and then retrace our steps.

当我们想返回网站上的某物时，我们不能依赖于其实际位置。相反，我们必须记住它在网站的概念层次结构中的位置，然后追溯我们的步骤。

Navigation puts this conceptual hierarchy up-front and center. It should ideally be a part of every page. It tells us what’s on the website and how to use it, making it a critical part of the user experience of your site.

导航使此概念层次结构处于最前面且处于中心位置。理想情况下，它应该是每个页面的一部分。它告诉我们网站上的内容以及如何使用它，这使其成为您网站用户体验的重要组成部分。

Persistent navigation is the set of elements that appear on top of every page. They follow certain conventions and, unless we have a substantial reason, we should stick to them:

持久导航是出现在每个页面顶部的一组元素。它们遵循某些约定，除非我们有充分的理由，否则我们应坚持以下约定：

Site ID on the top-left — this tells the user which site they are on (the Apple logo in the screenshot above).
左上角的站点ID-告诉用户他们位于哪个站点(上面的屏幕快照中的Apple徽标)。
Sections on top — a way to get around various parts of the site, with the current section highlighted to indicate where you are (for example, the Mac, iPad, and iPhon sections in the screenshot above).
顶部的部分 -一种绕过网站各个部分的方法，突出显示当前部分以指示您的位置(例如，上面的屏幕快照中的Mac，iPad和iPhon部分)。
Tabs (optional) — tabs, when done right, are self-evident, hard to miss, and slick. An active tab should be a different color and physically connect with the space below it so it “pops” to the front.
选项卡 (可选)-选项卡正确处理后，不言而喻，不易遗漏且光滑。活动的选项卡应为不同的颜色，并与它下方的空间物理连接，以便“弹出”到前面。
Utilities like “My Account”, “Track Your Order”, and “Stores.” Don’t put more than five of these — the rest can go in the footer navigation.
诸如“我的帐户”，“跟踪您的订单”和“商店”之类的实用程序 。请勿将其中的五个以上放置-其余的可以放在页脚导航中。
Breadcrumbs: this is another set of “You are here” indicators, like the highlighted section on top. Make breadcrumbs small and at the very top of a page, where they don’t interfere with the primary navigation. The best way to go about it is to use &gt; between levels, and boldface the last item (the item you’re currently on and — since you’re on it — it should not be a link).
面包屑 ：这是另一组“您在这里”指示器，如顶部的突出显示部分。将面包屑变小，并在页面的顶部，在此处它们不会干扰主导航。 <最佳方法是使用& gt; 在各个级别之间，并用粗体显示最后一个项目(您当前正在使用的项目，并且-因为您正在使用该项目-不应是链接)。

A page name: which page are you on? Every web page should ideally have a name that matches the words clicked to get there. It needs to be prominent and in the right place. In the visual hierarchy of the page, it should appear to be framing the content that is unique to this page.
页面名称：您在哪个页面上？理想情况下，每个网页都应具有一个与单击该单词所对应的名称相匹配的名称。它需要突出并且在正确的位置。在页面的可视层次结构中，它应该看起来像是在构架此页面唯一的内容。
Local navigation on left sidebar (optional): these are the options available at the current level.
左侧边栏上的本地导航 (可选)：这些是当前级别上可用的选项。
Footer Navigation: this is where all other utilities go.
页脚导航 ：这是所有其他实用程序的去向。

One of the most critical elements of navigation is a link to the Homepage, usually served by the Site ID (logo). It’s what the users click if they get lost — it’s the anchor that lets them return to the starting point if they want to start over.

导航中最关键的元素之一是指向首页的链接，通常由站点ID(徽标)提供服务。如果用户迷路，这就是用户单击的东西–锚点使用户可以从头开始回到起点。

使搜索变得容易 (Making search easy)

So how should we design the search functionality? Very simply, make the search box a simple box with no options, but allow limiting the scope of the search on the page of results.

那么我们应该如何设计搜索功能呢？非常简单，使搜索框成为没有选项的简单框，但可以限制结果页面上的搜索范围。

Also, if scoping a search, add the word “for” so it reads like a sentence: “Search ___ for ___.” Here is a good alternative example where the placeholder text indicates that the search is scoped to just the publication:

另外，如果确定搜索范围，请添加“ for”一词，使其看起来像一个句子：“在___中搜索___。” 这是一个很好的替代示例，其中的占位符文本指示搜索范围仅限于发布：

Here’s a great test to run on your friends to see if you did a good job with the navigation. Leave them on a random page somewhere deep in your website and make sure they are able to answer these questions quickly, and without hesitation:

这是对您的朋友进行的一项很好的测试，以查看您是否在导航方面做得很好。将它们放在您网站深处的随机页面上，并确保他们能够毫不犹豫地Swift回答以下问题：

what site is this? (Site ID)
这是什么网站？ (网站ID)
what page am I on?
我在哪一页上？
what are the major sections of this site?
该网站的主要部分是什么？
what are my options at this level?
在这个级别上我有什么选择？
where am I in the scheme of things?
我在哪里计划？
how can I search?
我该如何搜寻？

设计首页 (Designing the homepage)

For most websites, the homepage is the first page that the users land on. It is also the fixed north star that the users can return to if they get lost. Your Homepage has to answer these five questions that every user has in their head when they enter the site for the first time:

对于大多数网站，主页是用户登陆的第一页。如果用户迷路了，它也是固定的北极星。您的首页必须回答每个用户首次进入网站时都会想到的以下五个问题：

What is this?
这是什么？
What do they have here?
他们在这里有什么？
What can I do here?
我在这里可以做什么？
Why should I be here — and not somewhere else?
我为什么要在这里-而不是其他地方？
Where do I start…
我从哪说起呢…

…if I want to search?

…如果我想搜索？

…if I want to browse?

…如果我想浏览？

…if I want to sample their best stuff?

…如果我想品尝他们最好的东西？

It’s the job of the homepage to answer these questions.

回答这些问题是主页的工作。

There are three crucial places on the homepage where users expect to find explicit statements about the site:

用户希望在主页上的三个关键位置找到有关该站点的明确声明：

The tagline: good taglines are clear and informative, and explain what your site or organization does. They are just long enough, but not too long, and convey differentiation — they don’t sound generic. It helps if they are personable, lively, and (sometimes) witty.
口号：好的口号清晰，内容丰富，并说明您的网站或组织的工作。它们足够长，但又不会太长，可以传达差异化-听起来不通用。如果他们风度翩翩，活泼且(有时)机智，这会有所帮助。
The welcome blurb: make sure it’s something that conveys what the site does.
受欢迎的内容：确保它传达了网站的功能。
The “Learn More”: innovative products tend to require a fair amount of explanation. People have become accustomed to watching short videos on their computers and mobile devices, and are often willing to watch one on the Homepage.
“了解更多”：创新产品往往需要大量解释。人们已经习惯于在计算机和移动设备上观看短片，并且经常愿意在首页上观看短片。

NN Group published the following list of 10 guidelines for homepage usability, which doubles up as a great checklist before you launch:

NN Group发布了以下10条关于首页可用性的准则，在您启动之前，它可以作为一个很好的清单使用：

Include a one-sentence tagline
包含一句标语
Write a page title with good visibility in search engines and bookmark lists
撰写在搜索引擎和书签列表中具有较高可见度的页面标题
Group all corporate information in one distinct area
将所有公司信息分组到一个不同的区域
Emphasize the site’s top high-priority tasks
强调网站的头等高优先级任务
Include a search input box
包括搜索输入框
Show examples of real site content
显示真实网站内容的示例
Begin link names with the most important keyword
以最重要的关键字开头链接名称
Offer easy access to recent homepage features
轻松访问最近的首页功能
Don’t over-format critical content, such as navigation areas
不要过度格式化关键内容，例如导航区域
Use meaningful graphics
使用有意义的图形

This is the list in action on their own site:

这是他们自己网站上正在执行的列表：

Remember that the homepage is a shared resource between all departments within a company — at least when it comes to what’s displayed first. Anything on top of the homepage gets promoted the most, so as a team you will have to focus and decide what needs to surface at the top.

请记住，主页是公司内所有部门之间共享的资源-至少在首先显示的内容上。主页顶部的所有内容得到的提升最大，因此，作为一个团队，您必须集中精力并确定需要在顶部显示的内容。

Thanks for reading this quick guide. This was originally published as part of the UX Design course on Commonlounge. It’s a platform that has courses with small bite-sized lessons like these on topics ranging from Project Management to Machine Learning that deliver the most value for the time you put in.

感谢您阅读此快速指南。它最初是在Commonlounge的UX设计课程中发布的。它是一个平台，其中包含一些小课程，这些课程涉及从项目管理到机器学习等主题，可为您投入的时间带来最大的价值。

You learn by working on real-world projects and getting feedback from industry mentors. You should check it out here!

您可以通过从事实际项目并从行业顾问那里获得反馈来学习。您应该在这里查看！