<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
    <title>网站设计 网站怎样设计用户体验才好，用户体验不好的几个例子 | 云图网</title>
    <meta name="keywords" content="https,Web,图像,游戏,网站设计,设计">
<meta name="description" content="UX模式是设计解决方案，可以重复的共同问题。他们的目的是使用户可访问更加容易，从而得到更好的性能转换或保留条款。然而，有时这些模式实际上可以成为相当滋扰为您的用户受益，而不是他们的。这就是为什么我在这里要告诉你哪些UX模式是真正的磨齿轮，以及如何解决这些问题。 1.弹出窗口 我知道你和我在这一个。你点击一个链接通过阅读…">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.ytso.com/tech/pnotes/260767.html">
<meta property="og:site_name" content="云图网">
<meta property="og:title" content="网站设计 网站怎样设计用户体验才好，用户体验不好的几个例子">
<meta property="og:image" content="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052650407.png">
<meta property="og:description" content="UX模式是设计解决方案，可以重复的共同问题。他们的目的是使用户可访问更加容易，从而得到更好的性能转换或保留条款。然而，有时这些模式实际上可以成为相当滋扰为您的用户受益，而不是他们的。这就是为什么我在这里要告诉你哪些UX模式是真正的磨齿轮，以及如何解决这些问题。 1.弹出窗口 我知道你和我在这一个。你点击一个链接通过阅读…">
<link rel="canonical" href="https://blog.ytso.com/tech/pnotes/260767.html">
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform">
<link rel="shortcut icon" href="https://imgcdn.ytso.com/wp-content/uploads/2024/10/20241015181503433.jpg">
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
<style id='wp-img-auto-sizes-contain-inline-css' type='text/css'>
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<link rel='stylesheet' id='stylesheet-css' href='https://blog.ytso.com/wp-content/themes/justnews/css/style.css?ver=6.21.5' type='text/css' media='all' />
<link rel='stylesheet' id='material-icons-css' href='https://blog.ytso.com/wp-content/themes/justnews/themer/assets/css/material-icons.css?ver=6.21.5' type='text/css' media='all' />
<link rel='stylesheet' id='remixicon-css' href='https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css?ver=6.9.4' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://blog.ytso.com/wp-content/themes/justnews/themer/assets/css/font-awesome.css?ver=6.21.5' type='text/css' media='all' />
<style id='wp-block-library-inline-css' type='text/css'>
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*wp_block_styles_on_demand_placeholder:69c63d517d063*/
/*# sourceURL=wp-block-library-inline-css */
</style>
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>
<link rel='stylesheet' id='wpcom-member-css' href='https://blog.ytso.com/wp-content/plugins/wpcom-member/css/style.css?ver=1.7.19' type='text/css' media='all' />
<script type="text/javascript" src="https://blog.ytso.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script type="text/javascript" src="https://blog.ytso.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://blog.ytso.com/xmlrpc.php?rsd" />
<meta name='description' content='UX模式是设计解决方案，可以重复的共同问题。他们的目的是使用户可访问更加容易，从而得到更好的性能转换或保留条款。然而，有时这些模式实际上可以成为相当滋扰为您的用户受益，而不是他们的。这就是为什么我在这…' />
<meta name='keywords' content='https,Web,图像,游戏,网站设计,设计' />
<style>:root{--theme-color: #08c; --theme-hover: #07c; --logo-height: 32px; --logo-height-mobile: 26px; --menu-item-gap: 28px; --member-login-bg: url('https://blog.ytso.com/loginwall.jpg'); --header-bg-color: #fff; --header-bg-image: none; --theme-border-radius-s: 3px; --theme-border-radius-m: 5px; --theme-border-radius-l: 8px; --theme-border-radius-xl: 12px; --thumb-ratio-default: 480 / 300; --thumb-ratio-post: 480 / 300; --post-video-ratio: 860 / 482;}</style>
<link rel="icon" href="https://imgcdn.ytso.com/wp-content/uploads/2024/10/20241015181503433.jpg" sizes="32x32" />
<link rel="icon" href="https://imgcdn.ytso.com/wp-content/uploads/2024/10/20241015181503433.jpg" sizes="192x192" />
<link rel="apple-touch-icon" href="https://imgcdn.ytso.com/wp-content/uploads/2024/10/20241015181503433.jpg" />
<meta name="msapplication-TileImage" content="https://imgcdn.ytso.com/wp-content/uploads/2024/10/20241015181503433.jpg" />
    <!--[if lte IE 11]><script src="https://blog.ytso.com/wp-content/themes/justnews/js/update.js"></script><![endif]-->
</head>
<body class="wp-singular post-template-default single single-post postid-260767 single-format-standard wp-theme-justnews lang-cn el-boxed header-fixed">
<header class="header header-fluid">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-label="menu">
                <span class="icon-bar icon-bar-1"></span>
                <span class="icon-bar icon-bar-2"></span>
                <span class="icon-bar icon-bar-3"></span>
            </button>
                        <div class="logo">
                <a href="https://blog.ytso.com/" rel="home">
                    <img src="https://imgcdn.ytso.com/wp-content/uploads/2021/12/20211207181156143.png" alt="云图网">
                </a>
            </div>
        </div>
        <div class="collapse navbar-collapse mobile-style-0">
            <nav class="primary-menu"><ul id="menu-justnews-footer-menu" class="nav navbar-nav wpcom-adv-menu"><li class="menu-item"><a href="https://blog.ytso.com/category/industrynews">业界资讯</a></li>
<li class="menu-item current-post-ancestor active menu-item-style menu-item-style-1 dropdown"><a target="_blank" href="https://blog.ytso.com/category/tech" class="dropdown-toggle">技术专区</a>
<ul class="dropdown-menu menu-item-wrap menu-item-col-5">
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/cloud">云计算</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/ai">人工智能</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/safety">信息安全</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/bigdata">大数据</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/dev">研发管理</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/webdev">大前端</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/opensource">开源</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/aiops">智能运维</a></li>
	<li class="menu-item current-post-ancestor current-post-parent active"><a href="https://blog.ytso.com/category/tech/pnotes">编程笔记</a></li>
	<li class="menu-item"><a href="https://blog.ytso.com/category/tech/wp">WordPress</a></li>
</ul>
</li>
<li class="menu-item"><a href="https://blog.ytso.com/category/enterprise-strategic-planning">企业战略规划</a></li>
<li class="menu-item"><a href="https://blog.ytso.com/category/download">下载专区</a></li>
<li class="menu-item"><a href="https://blog.ytso.com/category/it%e6%b1%9f%e6%b9%96%e5%8f%b2">江湖史</a></li>
<li class="menu-item"><a href="https://blog.ytso.com/category/notes">随笔记录</a></li>
</ul></nav>            <div class="navbar-action">
                <div class="navbar-search-icon j-navbar-search"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-search"></use></svg></i></div><form class="navbar-search" action="https://blog.ytso.com/" method="get" role="search"><div class="navbar-search-inner"><i class="wpcom-icon wi navbar-search-close"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i><input type="text" name="s" class="navbar-search-input" autocomplete="off" maxlength="100" placeholder="输入关键词搜索..." value=""><button class="navbar-search-btn" type="submit" aria-label="搜索"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-search"></use></svg></i></button></div></form>                    <div id="j-user-wrap">
                        <a class="login" href="https://blog.ytso.com/login">登录</a>
                        <a class="login register" href="https://blog.ytso.com/register">注册</a>
                    </div>
                                            <a class="wpcom-btn btn-primary btn-xs publish" href="https://blog.ytso.com/contribute">
                            <i class="fa fa-edit"></i> 投稿                        </a>
                                </div>
        </div>
    </div><!-- /.container -->
</header>

<div id="wrap">    <div class="wrap container">
        <ol class="breadcrumb" vocab="https://schema.org/" typeof="BreadcrumbList"><li class="home" property="itemListElement" typeof="ListItem"><a href="https://blog.ytso.com" property="item" typeof="WebPage"><span property="name" class="hide">云图网</span>首页</a><meta property="position" content="1"></li><li property="itemListElement" typeof="ListItem"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-3"></use></svg></i><a href="https://blog.ytso.com/category/tech" property="item" typeof="WebPage"><span property="name">技术专区</span></a><meta property="position" content="2"></li><li property="itemListElement" typeof="ListItem"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-3"></use></svg></i><a href="https://blog.ytso.com/category/tech/pnotes" property="item" typeof="WebPage"><span property="name">编程笔记</span></a><meta property="position" content="3"></li></ol>        <main class="main">
                            <article id="post-260767" class="post-260767 post type-post status-publish format-standard hentry category-pnotes tag-https tag-web tag-960 tag-222 tag-22605 tag-12968 entry">
                    <div class="entry-main">
                                                                        <div class="entry-head">
                            <h1 class="entry-title">网站设计 网站怎样设计用户体验才好，用户体验不好的几个例子</h1>
                            <div class="entry-info">
                                                                <time class="entry-date published" datetime="2022-05-24T05:04:07+08:00" pubdate>
                                    2022年5月24日 05:04                                </time>
                                <span class="dot">•</span>
                                <a href="https://blog.ytso.com/category/tech/pnotes" rel="category tag">编程笔记</a>                                                            </div>
                        </div>
                        
                                                <div class="entry-content text-indent text-justify">
                            <div id="toc">
<p class="toc-title"><strong>文章目录</strong><span class="toc-controller toc-controller-show">[隐藏]</span></p>
<ul>
<li class="toc-level2"><a href="#toc_1">1.弹出窗口</a></li>
<li class="toc-level2"><a href="#toc_2">2.内容分享，社交分享</a></li>
<li class="toc-level2"><a href="#toc_3">3.页面预加载</a></li>
<li class="toc-level2"><a href="#toc_4">4.多级菜单</a></li>
<li class="toc-level2"><a href="#toc_5">5.无限滚动</a></li>
<li class="toc-level2"><a href="#toc_6">包起来</a></li>
</ul>
</div>
<p class="single-first-p">UX模式是设计解决方案，可以重复的共同问题。他们的目的是使用户可访问更加容易，从而得到更好的性能转换或保留条款。然而，有时这些模式实际上可以成为相当滋扰为您的用户受益，而不是他们的。这就是为什么我在这里要告诉你哪些UX模式是真正的磨齿轮，以及如何解决这些问题。</p>
<h2 id="toc_1">1.弹出窗口</h2>
<p>我知道你和我在这一个。你点击一个链接通过阅读你突然被巨大的覆盖乞求你的电子邮件地址中断的内容打开一个网页，半路上。我明白他们认为他们有一个很好的通讯会，我可能会喜欢，这就是为什么我点击他们的链接，但他们永远不会被喊了他们的喉咙结交新朋友。</p>
<p>相反，允许用户阅读内容和求回报前结识。给他们自己的决定迫使他们，而不是机会。这既可以是阅读页面后一个微妙的弹出，或弹出模态的用户点击过的页面之前。</p>
<div id="attachment_23957" style="width: 1034px" class="wp-caption alignnone"><noscript><img fetchpriority="high" decoding="async" aria-describedby="caption-attachment-23957" class="size-large wp-image-23957" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052650407.png" alt="网站设计" width="1024" height="488" data-lazy-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-1024x488.png" /></noscript><img fetchpriority="high" decoding="async" aria-describedby="caption-attachment-23957" class="size-large wp-image-23957 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052650407.png" alt="网站设计" width="1024" height="488" data-lazy-data-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/58b9e773242e273e1f5c-1024x488.png" /><noscript><noscript><img decoding="async" aria-describedby="caption-attachment-23957" class="size-large wp-image-23957" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052650407.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript><img decoding="async" aria-describedby="caption-attachment-23957" class="size-large wp-image-23957 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052650407.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></p>
<p id="caption-attachment-23957" class="wp-caption-text">网站设计</p>
</div>
<h2 id="toc_2">2.内容分享，社交分享</h2>
<p>分享共享是很好的。特别是为您的企业，因为它是让客户到您的网站是最经济有效的方法。在另一方面，社会的小部件应谨慎使用。为什么要花费你的时间小时，产生很大一块的内容只与渴望社交按钮歪曲。</p>
<p>社交媒体共享应该是一个有机的经验，而不是强制的。用户会希望分享您的内容更多，如果他们没有光顾到，所以限制你的小部件，并考虑使用一个愉快的消息在内容要求他们年底给它一个快速的鸣叫，如果他们享受工作。</p>
<div id="attachment_23960" style="width: 1034px" class="wp-caption alignnone"><noscript><img decoding="async" aria-describedby="caption-attachment-23960" class="size-large wp-image-23960" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052652499.png" alt="网站设计" width="1024" height="488" data-lazy-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-1024x488.png" /></noscript><img decoding="async" aria-describedby="caption-attachment-23960" class="size-large wp-image-23960 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052652499.png" alt="网站设计" width="1024" height="488" data-lazy-data-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/36fa3a193d737e5ad864-1024x488.png" /><noscript><noscript><img decoding="async" aria-describedby="caption-attachment-23960" class="size-large wp-image-23960" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052652499.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript><img decoding="async" aria-describedby="caption-attachment-23960" class="size-large wp-image-23960 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052652499.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></p>
<p id="caption-attachment-23960" class="wp-caption-text">网站设计</p>
</div>
<h2 id="toc_3">3.页面预加载</h2>
<p>随着科技的进步我们这一代人变得更不耐烦，在2017年，我们不应该看微调负载2MB的网站。我知道这可能只是一个花哨的趋势，我敢肯定，他们有80％实际上没有装载任何东西，但在美学上使用，但建立一个Web应用程序时的速度应该优先考虑。</p>
<p>如果您有在页面的第一类的较轻元素的速度问题，加载导航并使用装载机较重的内容，而非留给用户一个空白的屏幕，可爱的动画59。59。这样，用户不觉得你这些站起来约会，而你还在那里。</p>
<div id="attachment_23958" style="width: 1034px" class="wp-caption alignnone"><noscript><img decoding="async" aria-describedby="caption-attachment-23958" class="size-large wp-image-23958" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052653974.png" alt="网站设计" width="1024" height="488" data-lazy-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-1024x488.png" /></noscript><img decoding="async" aria-describedby="caption-attachment-23958" class="size-large wp-image-23958 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052653974.png" alt="网站设计" width="1024" height="488" data-lazy-data-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/b6677f55f9a35f083939-1024x488.png" /><noscript><noscript><img decoding="async" aria-describedby="caption-attachment-23958" class="size-large wp-image-23958" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052653974.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript><img decoding="async" aria-describedby="caption-attachment-23958" class="size-large wp-image-23958 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052653974.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></p>
<p id="caption-attachment-23958" class="wp-caption-text">网站设计</p>
</div>
<h2 id="toc_4">4.多级菜单</h2>
<p>多级菜单可能看起来像一个网站，有许多网页和部分一个很好的解决方案，但它不是。这个问题的存在是他们为用户创建一个迷宫一样的体验，因为他们试图找到自己所需的页面。它迫使导航到用户的负担，他们会很快变得沮丧或无聊。</p>
<p>如果你不想让你的网站的导航为类似游戏<i>在哪里金都</i>，可以拆分出不同的链接段。你也可以换出一些对图像的文本链接，使其不太平凡。最后，为全人类着想，请远离悬停激活下拉列表得好远。</p>
<div id="attachment_23956" style="width: 1034px" class="wp-caption alignnone"><noscript><img decoding="async" aria-describedby="caption-attachment-23956" class="size-large wp-image-23956" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052654238.png" alt="网站设计" width="1024" height="488" data-lazy-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-1024x488.png" /></noscript><img decoding="async" aria-describedby="caption-attachment-23956" class="size-large wp-image-23956 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052654238.png" alt="网站设计" width="1024" height="488" data-lazy-data-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/81ca0b7c951be89184c1-1024x488.png" /><noscript><noscript><img decoding="async" aria-describedby="caption-attachment-23956" class="size-large wp-image-23956" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052654238.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript><img decoding="async" aria-describedby="caption-attachment-23956" class="size-large wp-image-23956 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052654238.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></p>
<p id="caption-attachment-23956" class="wp-caption-text">网站设计</p>
</div>
<h2 id="toc_5">5.无限滚动</h2>
<p>虽然无限滚动解决保留问题对我们来说，它创造了更多的问题比它固定。如果您需要达到多数民众赞成位于该网站的页脚的重要页面和网站有自动无限滚动激活时，它是一个失败的事业。还有一个问题，当你已经滚动了一段时间，访问其他网页之中。回去的时候了，并从你离开的地方进行？不是一个机会。</p>
<p>就像巨型的菜单，如果正确实施无限滚动潜力巨大。混合与传统分页模式，并允许用户选择继续动作滚动。这将有助于保持你的页脚进入。为了解决用户失去他们在那里最多的问题，有URL变化每当页面加载到另一个部分。</p>
<div id="attachment_23959" style="width: 1034px" class="wp-caption alignnone"><noscript><img decoding="async" aria-describedby="caption-attachment-23959" class="size-large wp-image-23959" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052655279.png" alt="网站设计" width="1024" height="488" data-lazy-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-1024x488.png" /></noscript><img decoding="async" aria-describedby="caption-attachment-23959" class="size-large wp-image-23959 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052655279.png" alt="网站设计" width="1024" height="488" data-lazy-data-srcset="https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-1024x488.png 1024w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-300x143.png 300w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-768x366.png 768w, https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca.png 1856w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.shejiku.net/wp-content/uploads/2017/07/089b0cdd8835d09cb1ca-1024x488.png" /><noscript><noscript><img decoding="async" aria-describedby="caption-attachment-23959" class="size-large wp-image-23959" src="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052655279.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript><img decoding="async" aria-describedby="caption-attachment-23959" class="size-large wp-image-23959 j-lazy" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052655279.png" alt="网站设计" width="1024" height="488" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></p>
<p id="caption-attachment-23959" class="wp-caption-text">网站设计</p>
</div>
<h2 id="toc_6">包起来</h2>
<p>快速免责声明牢记的是，虽然我已经提到，上述UX模式是疯狂烦人，这并不意味着你应该避免使用它们像瘟疫。虽然它们不是最好的选择，其中一些可能会根据您的要求，替你的网站。然而，尝试用你的用户empathising，你使用这些模式时要三思。</p>
<div class="entry-readmore"><div class="entry-readmore-btn"></div></div>                                                        <div class="entry-copyright"><p>原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/260767.html</p></div>                        </div>

                        <div class="entry-tag"><a href="https://blog.ytso.com/tag/https" rel="tag">https</a><a href="https://blog.ytso.com/tag/web" rel="tag">Web</a><a href="https://blog.ytso.com/tag/%e5%9b%be%e5%83%8f" rel="tag">图像</a><a href="https://blog.ytso.com/tag/%e6%b8%b8%e6%88%8f" rel="tag">游戏</a><a href="https://blog.ytso.com/tag/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1" rel="tag">网站设计</a><a href="https://blog.ytso.com/tag/%e8%ae%be%e8%ae%a1" rel="tag">设计</a></div>
                        <div class="entry-action">
                            <div class="btn-zan" data-id="260767"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div>
                                                    </div>

                        <div class="entry-bar">
                            <div class="entry-bar-inner">
                                                                <div class="entry-bar-info entry-bar-info2">
                                    <div class="info-item meta">
                                                                                    <a class="meta-item j-heart" href="javascript:;" data-id="260767"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a>                                        <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a>                                                                            </div>
                                    <div class="info-item share">
                                                                                    <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="260767" data-qrcode="https://blog.ytso.com/tech/pnotes/260767.html">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报                                            </a>
                                                                                    <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item linkedin" data-share="linkedin" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-linkedin"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item facebook" data-share="facebook" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-facebook"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item twitter" data-share="twitter" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-twitter"></use></svg></i>                                            </a>
                                                                            </div>
                                    <div class="info-item act">
                                        <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                                            <div class="entry-page">
                    <div class="entry-page-prev j-lazy" style="background-image: url('https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052637644.jpg">
                <a href="https://blog.ytso.com/tech/pnotes/260766.html" title="SEO与网站建设的关系" rel="prev">
                    <span>SEO与网站建设的关系</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span>
                    <span class="pull-right">2022年5月24日 05:03</span>
                </div>
            </div>
                            <div class="entry-page-next j-lazy" style="background-image: url('https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/23/20220524052714562.jpg">
                <a href="https://blog.ytso.com/tech/pnotes/260768.html" title="网站建设网页开发人员的新资源 &#8211; 2017年7月" rel="next">
                    <span>网站建设网页开发人员的新资源 &#8211; 2017年7月</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span>
                    <span class="pull-left">2022年5月24日 05:04</span>
                </div>
            </div>
            </div>
                                        <error>
    <code>wp_die</code>
    <title><![CDATA[WordPress &amp;rsaquo; Error]]></title>
    <message><![CDATA[&lt;h1&gt;Error establishing a Redis connection&lt;/h1&gt;
&lt;p&gt;To disable Redis, delete the &lt;code&gt;object-cache.php&lt;/code&gt; file in the &lt;code&gt;/wp-content/&lt;/code&gt; directory.&lt;/p&gt;
]]></message>
    <data>
        <status>500</status>
    </data>
</error>
<!--
Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com

Retrieved 1873 objects (403 KB) from Redis using Predis (v2.4.0).
-->
