七日掌握設(shè)計(jì)配色基礎(chǔ)

by Anant Jain

通過(guò)Anant Jain

掌握正確的基礎(chǔ)知識(shí)：如何設(shè)計(jì)網(wǎng)站的導(dǎo)航，搜索和首頁(yè) (Get the basics right: how to design your site’s navigation, search, and homepage)

一個(gè)7分鐘的指南，使這三個(gè)基礎(chǔ)組件正確無(wú)誤。 (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:

如果您想從五金店購(gòu)買一把新錘子，請(qǐng)想象您將如何做：

• 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：您可以瀏覽商店-在過(guò)道上有部門名稱，在一個(gè)部門內(nèi)，每個(gè)過(guò)道的末尾都有標(biāo)牌。

• Option 2: you can find the nearest clerk and just ask them where they keep the hammers.

  選擇2：您可以找到最近的店員，然后問(wèn)他們存放錘子的地方。

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.

如果您考慮一下，這也正是我們使用網(wǎng)站的方式。 我們四處尋找( 導(dǎo)航 )，如果找不到所需的內(nèi)容，請(qǐng)點(diǎn)擊搜索功能。 這是您網(wǎng)站的兩個(gè)關(guān)鍵組成部分。 這里的可用性缺陷可能會(huì)給用戶帶來(lái)很大的煩惱。

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.

該簡(jiǎn)短指南部分基于史蒂夫·克魯格(Steve Krug)的開創(chuàng)性著作“不要讓我思考”， 我將教您如何設(shè)計(jì)網(wǎng)站的導(dǎo)航，搜索和首頁(yè)。 讓我們從導(dǎo)航開始。

正確導(dǎo)航 (Getting the navigation right)

為什么我們需要導(dǎo)航？ (Why do we need Navigation?)

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

與我們的硬件商店示例不同，網(wǎng)站不是物理空間。 它與硬件存儲(chǔ)在三個(gè)方面不同：

A website does not provide the user with a sense of scale

網(wǎng)站無(wú)法為用戶提供規(guī)模感

A website does not provide the user with a sense of direction

一個(gè)網(wǎng)站不方向感提供用戶

A website does not provide the user with a sense of location

網(wǎng)站無(wú)法為用戶提供位置感

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.

當(dāng)我們想返回網(wǎng)站上的某物時(shí)，我們不能依賴于其實(shí)際位置。 相反，我們必須記住它在網(wǎng)站的概念層次結(jié)構(gòu)中的位置，然后追溯我們的步驟。

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.

導(dǎo)航使此概念層次結(jié)構(gòu)處于最前面且處于中心位置。 理想情況下，它應(yīng)該是每個(gè)頁(yè)面的一部分。 它告訴我們網(wǎng)站上的內(nèi)容以及如何使用它，這使其成為您網(wǎng)站用戶體驗(yàn)的重要組成部分。

您應(yīng)該如何設(shè)計(jì)導(dǎo)航？ (How should you design the navigation?)

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:

持久導(dǎo)航是出現(xiàn)在每個(gè)頁(yè)面頂部的一組元素。 它們遵循某些約定，除非我們有充分的理由，否則我們應(yīng)堅(jiān)持以下約定：

• Site ID on the top-left — this tells the user which site they are on (the Apple logo in the screenshot above).

  左上角的站點(diǎn)ID-告訴用戶他們位于哪個(gè)站點(diǎn)(上面的屏幕快照中的Apple徽標(biāo))。

• 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).

  頂部的部分 -一種繞過(guò)網(wǎng)站各個(gè)部分的方法，突出顯示當(dāng)前部分以指示您的位置(例如，上面的屏幕快照中的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.

  選項(xiàng)卡 (可選)-選項(xiàng)卡正確處理后，不言而喻，不易遺漏且光滑。 活動(dòng)的選項(xiàng)卡應(yīng)為不同的顏色，并與它下方的空間物理連接，以便“彈出”到前面。

• 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.

  諸如“我的帳戶”，“跟蹤您的訂單”和“商店”之類的實(shí)用程序 。 請(qǐng)勿將其中的五個(gè)以上放置-其余的可以放在頁(yè)腳導(dǎo)航中。

• 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 > 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).

  面包屑 ：這是另一組“您在這里”指示器，如頂部的突出顯示部分。 將面包屑變小，并在頁(yè)面的頂部，在此處它們不會(huì)干擾主導(dǎo)航。 <最佳方法是使用& gt; 在各個(gè)級(jí)別之間，并用粗體顯示最后一個(gè)項(xiàng)目(您當(dāng)前正在使用的項(xiàng)目，并且-因?yàn)槟谑褂迷擁?xiàng)目-不應(yīng)是鏈接)。

• 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.

  頁(yè)面名稱：您在哪個(gè)頁(yè)面上？ 理想情況下，每個(gè)網(wǎng)頁(yè)都應(yīng)具有一個(gè)與單擊該單詞所對(duì)應(yīng)的名稱相匹配的名稱。 它需要突出并且在正確的位置。 在頁(yè)面的可視層次結(jié)構(gòu)中，它應(yīng)該看起來(lái)像是在構(gòu)架此頁(yè)面唯一的內(nèi)容。

• Local navigation on left sidebar (optional): these are the options available at the current level.

  左側(cè)邊欄上的本地導(dǎo)航 (可選)：這些是當(dāng)前級(jí)別上可用的選項(xiàng)。

• Footer Navigation: this is where all other utilities go.

  頁(yè)腳導(dǎo)航 ：這是所有其他實(shí)用程序的去向。

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.

導(dǎo)航中最關(guān)鍵的元素之一是指向首頁(yè)的鏈接，通常由站點(diǎn)ID(徽標(biāo))提供服務(wù)。 如果用戶迷路，這就是用戶單擊的東西–錨點(diǎn)使用戶可以從頭開始回到起點(diǎn)。

使搜索變得容易 (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.

那么我們應(yīng)該如何設(shè)計(jì)搜索功能呢？ 非常簡(jiǎn)單，使搜索框成為沒(méi)有選項(xiàng)的簡(jiǎn)單框，但可以限制結(jié)果頁(yè)面上的搜索范圍。

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:

另外，如果確定搜索范圍，請(qǐng)?zhí)砑印?for”一詞，使其看起來(lái)像一個(gè)句子：“在___中搜索___。” 這是一個(gè)很好的替代示例，其中的占位符文本指示搜索范圍僅限于發(fā)布：

您怎么知道您在導(dǎo)航方面做得好嗎？ (How do you know if you did a good job with the navigation?)

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:

這是對(duì)您的朋友進(jìn)行的一項(xiàng)很好的測(cè)試，以查看您是否在導(dǎo)航方面做得很好。 將它們放在您網(wǎng)站深處的隨機(jī)頁(yè)面上，并確保他們能夠毫不猶豫地Swift回答以下問(wèn)題：

• what site is this? (Site ID)
  這是什么網(wǎng)站？ (網(wǎng)站ID)
• what page am I on?
  我在哪一頁(yè)上？
• what are the major sections of this site?
  該網(wǎng)站的主要部分是什么？
• what are my options at this level?
  在這個(gè)級(jí)別上我有什么選擇？
• where am I in the scheme of things?
  我在哪里計(jì)劃？
• how can I search?
  我該如何搜尋？

設(shè)計(jì)首頁(yè) (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:

對(duì)于大多數(shù)網(wǎng)站，主頁(yè)是用戶登陸的第一頁(yè)。 如果用戶迷路了，它也是固定的北極星。 您的首頁(yè)必須回答每個(gè)用戶首??次進(jìn)入網(wǎng)站時(shí)都會(huì)想到的以下五個(gè)問(wèn)題：

What is this?

這是什么？

What do they have here?

他們?cè)谶@里有什么？

What can I do here?

我在這里可以做什么？

Why should I be here — and not somewhere else?

我為什么要在這里-而不是其他地方？

Where do I start…

我從哪說(shuō)起呢…

…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.

回答這些問(wèn)題是主頁(yè)的工作。

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

用戶希望在主頁(yè)上的三個(gè)關(guān)鍵位置找到有關(guān)該站點(diǎn)的明確聲明：

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.

口號(hào)：好的口號(hào)清晰，內(nèi)容豐富，并說(shuō)明您的網(wǎng)站或組織的工作。 它們足夠長(zhǎng)，但又不會(huì)太長(zhǎng)，可以傳達(dá)差異化-聽起來(lái)不通用。 如果他們風(fēng)度翩翩，活潑且(有時(shí))機(jī)智，這會(huì)有所幫助。

The welcome blurb: make sure it’s something that conveys what the site does.

受歡迎的內(nèi)容：確保它傳達(dá)了網(wǎng)站的功能。

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.

“了解更多”：創(chuàng)新產(chǎn)品往往需要大量解釋。 人們已經(jīng)習(xí)慣于在計(jì)算機(jī)和移動(dòng)設(shè)備上觀看短片，并且經(jīng)常愿意在首頁(yè)上觀看短片。

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

NN Group發(fā)布了以下10條關(guān)于首頁(yè)可用性的準(zhǔn)則 ，在您啟動(dòng)之前，它可以作為一個(gè)很好的清單使用：

Include a one-sentence tagline

包含一句標(biāo)語(yǔ)

Write a page title with good visibility in search engines and bookmark lists

撰寫在搜索引擎和書簽列表中具有較高可見(jiàn)度的頁(yè)面標(biāo)題

Group all corporate information in one distinct area

將所有公司信息分組到一個(gè)不同的區(qū)域

Emphasize the site’s top high-priority tasks

強(qiáng)調(diào)網(wǎng)站的頭等高優(yōu)先級(jí)任務(wù)

Include a search input box

包括搜索輸入框

Show examples of real site content

顯示真實(shí)網(wǎng)站內(nèi)容的示例

Begin link names with the most important keyword

以最重要的關(guān)鍵字開頭鏈接名稱

Offer easy access to recent homepage features

輕松訪問(wèn)最近的首頁(yè)功能

Don’t over-format critical content, such as navigation areas

不要過(guò)度格式化關(guān)鍵內(nèi)容，例如導(dǎo)航區(qū)域

Use meaningful graphics

使用有意義的圖形

This is the list in action on their own site:

這是他們自己網(wǎng)站上正在執(zhí)行的列表：

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.

請(qǐng)記住，主頁(yè)是公司內(nèi)所有部門之間共享的資源-至少在首先顯示的內(nèi)容上。 主頁(yè)頂部的所有內(nèi)容得到的提升最大，因此，作為一個(gè)團(tuán)隊(duì)，您必須集中精力并確定需要在頂部顯示的內(nèi)容。

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設(shè)計(jì)課程中發(fā)布的 。 它是一個(gè)平臺(tái)，其中包含一些小課程，這些課程涉及從項(xiàng)目管理到機(jī)器學(xué)習(xí)等主題，可為您投入的時(shí)間帶來(lái)最大的價(jià)值。

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

您可以通過(guò)從事實(shí)際項(xiàng)目并從行業(yè)顧問(wèn)那里獲得反饋來(lái)學(xué)習(xí)。 您應(yīng)該在這里查看 ！

翻譯自: https://www.freecodecamp.org/news/get-the-basics-right-how-to-design-your-sites-navigation-search-and-homepage-adeb57a881f4/

七日掌握設(shè)計(jì)配色基礎(chǔ)

總結(jié)

以上是生活随笔為你收集整理的七日掌握设计配色基础_掌握正确的基础知识：如何设计网站的导航，搜索和首页...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。