七日掌握设计配色基础_掌握正确的基础知识：如何设计网站的导航，搜索和首页...
七日掌握設計配色基礎
by Anant Jain
通過Anant Jain
掌握正確的基礎知識：如何設計網站的導航，搜索和首頁 (Get the basics right: how to design your site’s navigation, search, and homepage)
一個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)的開創性著作“不要讓我思考”， 我將教您如何設計網站的導航，搜索和首頁。 讓我們從導航開始。
正確導航 (Getting the navigation right)
為什么我們需要導航？ (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:
與我們的硬件商店示例不同，網站不是物理空間。 它與硬件存儲在三個方面不同：
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.
導航使此概念層次結構處于最前面且處于中心位置。 理想情況下，它應該是每個頁面的一部分。 它告訴我們網站上的內容以及如何使用它，這使其成為您網站用戶體驗的重要組成部分。
您應該如何設計導航？ (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:
持久導航是出現在每個頁面頂部的一組元素。 它們遵循某些約定，除非我們有充分的理由，否則我們應堅持以下約定：
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 > 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”一詞，使其看起來像一個句子：“在___中搜索___。” 這是一個很好的替代示例，其中的占位符文本指示搜索范圍僅限于發布：
您怎么知道您在導航方面做得好嗎？ (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:
這是對您的朋友進行的一項很好的測試，以查看您是否在導航方面做得很好。 將它們放在您網站深處的隨機頁面上，并確保他們能夠毫不猶豫地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:
對于大多數網站，主頁是用戶登陸的第一頁。 如果用戶迷路了，它也是固定的北極星。 您的首頁必須回答每個用戶首??次進入網站時都會想到的以下五個問題：
…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條關于首頁可用性的準則 ，在您啟動之前，它可以作為一個很好的清單使用：
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!
您可以通過從事實際項目并從行業顧問那里獲得反饋來學習。 您應該在這里查看 ！
翻譯自: https://www.freecodecamp.org/news/get-the-basics-right-how-to-design-your-sites-navigation-search-and-homepage-adeb57a881f4/
七日掌握設計配色基礎
總結
以上是生活随笔為你收集整理的七日掌握设计配色基础_掌握正确的基础知识：如何设计网站的导航，搜索和首页...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 女人梦到好多水啥意思
- 下一篇： react数据从本地读取_如何将从Goo