Руководство для начинающих, которое я узнал от славы короля

WeChat ищет «Записки Осеннего Ветра». Следуйте за мной, не заблудитесь в начальном обучении.

В царском мире есть не только счастье, но и обучение, делающее вас счастливым и знающим человеком. Герой этого, должен сказать, его начинающий проводник.

Почему ты это сказал? Давайте сначала посмотрим на некоторые фотографии.

WechatIMG11731

Правильно, это руководство для новичков King's Glory, практическое обучение и прекрасный голос Даджи.

Весь процесс примерно2 минуты. Он использует различные методы Bootstrap,Руководство по монгольскому языку, пузырьковое руководство, видеогид, руководство по эксплуатации, а также запланированное задание, можно сказать, что с точки зрения руководства для новичков он действительно «прекрасен» и использует различные приемы. Но для быстрого ознакомления со всем продуктом требуется всего 2 минуты обучения, и вы почувствуете, что победить врага так приятно, а выиграть игру так просто. Вы получаете много радости и становитесь зависимыми от нее.

А если нет проводника-новичка, пусть новичок, никогда не игравший в такую игру, начнет битву 5 на 5, а начнёт настоящий бой до того, как разберётся в операции, то новичка точно сильно побьют.Не говоря уже о жалобах товарищей по команде. , вы скоро проиграете игру, что приведет к разочарованию и ощущению, что игра - мусор, не говоря уже о том, чтобы испытать острые ощущения от игры.

WechatIMG11761

Таким образом, руководство для начинающих позволяет пользователям быстро понять функции продукта и способы его использования за короткий период времени.

Это очень важная и очень нужная функция для изучения! Этому также посвящена данная статья. Ниже приводится практическое объяснение принципа

Позвольте мне сначала представить несколько распространенных типов рендеринга руководств для новичков.

1. Вводная страница

Загрузочная страница обычно появляется при первом открытии приложения и состоит из 3-5 страниц.

8种引导方式，7个设计要点，让你全面了解新手引导！

2. Руководство по маске

Замаскируйте весь интерфейс продукта черной полупрозрачной маской, которая поможет пользователю сосредоточиться на обведенной функциональной точке или описании жеста.

3. Пузырьковая/всплывающая подсказка

Рядом с кнопкой действия появится всплывающее окно с подсказкой, или всплывающее окно появится непосредственно.

4. Анимация/видеогид

Пользователи могут быстро понять весь продукт на основе динамической демонстрации.

5. Оперативное руководство

Он направляет вас шаг за шагом и побуждает пользователей принимать участие и учиться по ходу дела.

6. Предустановленные задачи

Предустановленная задача означает, что после того, как пользователь войдет в продукт, некоторые примеры, связанные с формой продукта, будут автоматически созданы для пользователя, вместо того, чтобы оставить пользователя с пустой страницей.

Люди будут возлагать большие обязанности на людей, поэтому я недавно столкнулся с такой потребностью. Однако то, чего мне нужно достичь, относительно просто, и мне нужно только реализовать руководство по маске.

Сегодня мы реализуем эту функцию. Давайте посмотрим, как выглядит наша цель. Для изучения основного кода требуется всего около 5 минут, всего 9 строк кода js и 60 строк кода css. Итак, давайте посмотрим вниз~ В выделенной части будут разные урожаи~

В основном он состоит из трех частей: маска, пузырь, подсветка.

Маски и пузыри действительно знакомы многим школьникам. Здесь размещен только код, объяснять особо нечего, в основном используется абсолютное позиционирование.

// 蒙层实现
<style>
.guide-mask {
  z-index: 999999;
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0.8;
}
</style>
<div class="guide-mask"></div>

// 气泡实现
<style>
.tooltip-box:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -10px;
  left: 20%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid white;
}
</style>
<div class='tooltip-box'>
  秋风的技能
</div>

Сшивание слоев

И как добиться этой изюминки? Как сделать пустое поле посередине маски? Я знаю, что в свойствах CSS нет связанного свойства для реализации этой функции, если нет. Это означает, что мне нужно очистить этот выделенный блок самостоятельно и сделать это путем сплайсинга. Как показано ниже, это первое решение, которое пришло мне в голову.

Этот способ более глупый, но и более сложный.

z-index

z-indexСвойство задает z-порядок позиционируемого элемента и его потомков или гибких элементов. Когда элементы перекрываются, элементы с большими z-индексами будут накладываться на меньшие элементы, которые будут отображаться сверху.

потому что мы можем использоватьz-indexЭта функция, пока мы нацелены на элементz-indexПросто установите его выше, чем наша маска.

1604418064799

Через декомпозицию слоя мы видим, что линия целевого элемента秋风的技能находится на высшем уровне, не с秋风的笔记Текст находится на том же слое. Таким образом, решение состоит в том, что мы не можем сделать маску пустой посередине, но можем передатьz-indexПусть наш целевой элемент будет размещен поверх маски, а затем добавьте белую фоновую рамку между маской и целевым элементом, чтобы добиться эффекта подсветки. Если вы все еще не понимаете, вы можете увидеть картинку ниже.

С вышеуказанными знаниями позиционирование плохое, мы проходимgetBoundingClientRectproperties, чтобы получить размер целевого элемента и его положение относительно области просмотра. Затем используйте абсолютное позиционирование для макета. Ниже приведена основная логика этой реализации (код относительно грубый, в основном для выражения смысла

<style>
  ...
  .guide-helper-layer {
    position: absolute;
    z-index: 9999998;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 4px;
  }
  .guide-content {
    position: absolute;
    z-index: 10000000;
    background-color: transparent;
  }
  .guide-mark-relative {
    position: relative;
    z-index: 9999999 !important;
  }
  ...
</style>
</head>
<body>
    <h2>秋风的笔记</h2>
    <div class="skill guide-mark-relative">
        ...
    </div>
    <div class="guide-mask"></div>
    <div class="guide-helper-layer" style="width: 472px; height:58px; top:55px;left: 36px;">
        <div class='tooltip-box'>
            秋风的技能
        </div>
    </div>
    <script>
        const guideTarget = document.querySelector('.skill')
        const tooltip = document.querySelector('.tooltip-box')
        var rect = guideTarget.getBoundingClientRect()
        const helperLayer = document.querySelector('.guide-helper-layer')
        helperLayer.style.left = rect.left - 3 + 'px'
        helperLayer.style.top = rect.top - 3 + 'px'
        helperLayer.style.width = rect.width + 3 * 2 + 'px'
        helperLayer.style.height = rect.height + 3 * 2 + 'px'
        tooltip.style.top = rect.height + 3 * 2 + 10 + 5 + 'px'
</script>

Выше приведена реализация замаскированного руководства. Конечно, такой изысканный дизайн также неотделим от большого проекта с открытым исходным кодом.Выше приведена ссылка на проект с открытым исходным кодом.introjsбыть реализованным.

box-shadow

Помимо проблем совместимости (несовместимость с более низкими версиями ie8 и предыдущими версиями), это решение также является относительно простым методом. Давайте взглянем на введение метода box-shadow.

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Основная идея заключается в том, что мы можем добиться этого, установив относительно большой радиус диффузии тени, а затем установив цвет полупрозрачного фона.

box-shadow: 0 0 0 2000px rgba(0,0,0,.5);

canvas

Сначала нарисуйте полноэкранную полупрозрачную маску через холст, а затем нарисуйте выделенную часть, черезglobalCompositeOperationсерединаxorвозможность сделать перекрывающуюся часть прозрачной.

const canvas = document.getElementById('guide-mask')
const width = window.innerWidth;
const height = window.innerHeight;
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
ctx.fillRect(0, 0, width, height);
ctx.fill();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.globalCompositeOperation = "xor";
ctx.fillRect(rect.left - 3, rect.top - 3, rect.width + 3 * 2 + 10 + 5, rect.height + 3 * 2);

	Сшивание слоев	z-index	Box-shadow	Canvas
совместимость	очень хороший	очень хороший	в целом	в целом
Степень сложности	немного сложно	Простой	Простой	немного сложно
Общий рейтинг	⭐️⭐️⭐️	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️

Полный репозиторий кода:GitHub.com/flower1995116/…

Кстати, я представлю несколько проектов с открытым исходным кодом, которые я видел лучше для начинающих.

jquery-pagewalkthrough

Преимущества: Нарисованный от руки стиль, подходящий для определенных стилей сайта.

Минусы: требуется jQuery.

intro.js

Преимущества: Богатые примеры начальной загрузки маски, настраиваемые темы.

Недостатки: Бесплатно для физических лиц, платно для бизнеса.

driver.js

Преимущества: исходный код MIT с открытым исходным кодом, функции аналогичны intro.js.

Минусы: примеры не такие богатые, как intro.js.

Пока что эта статья заканчивается здесь.

Ссылаться на

zhuanlan.zhihu.com/p/33508501

Ууху. Call.com/question/20…

Уууу, я гражданский.com/UC's/3506054…

nuggets.capable/post/684490…

developer.Mozilla.org/this-cn/docs/…

Добро пожаловать, чтобы обратить внимание на «Заметки осеннего ветра», не заблудиться в интерфейсе обучения или добавить WeChat qiufengblue, чтобы общаться и учиться вместе.