Как должны думать люди, работающие с интерфейсом, когда они получают пользовательский интерфейс?

CSS

Добавить Автора Переводчик: Front-end Xiaozhi Источник: ishadeed

Ставь лайк и смотри, поиск в WeChat **【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Недавно компонент Vue был с открытым исходным кодом, но он не идеален. Добро пожаловать, чтобы улучшить его вместе. Я также надеюсь, что вы можете поставить звезду, чтобы поддержать его. Спасибо.

адрес гитхаба:GitHub.com/QQ449245884…

Люди часто присылают мне личные сообщения, как мне использовать CSS для компоновки схемы дизайна Xiaozhi и как нарисовать эту кнопку. Итак, сегодня в этой статье мы представим несколько новых методов компоновки, которые надеются быть полезными для Smartmi.

Отложите детали дизайна

Первое, что я обычно делаю, — откладываю в сторону детали дизайна. Я хочу сначала узнать, какие части в основном включены в этот дизайн, а затем обратить внимание на детали каждой части. Рассмотрим следующий пользовательский интерфейс:

В приведенном выше пользовательском интерфейсе есть следующие функции:

  • Header/Navigation
  • средний раздел контента
  • Как это работает раздел внизу

Далее мы сначала абстрагируемся от этих трех основных частей:

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

Я так думаю:

  • Full-width header: панель навигации в шапке
  • Centered Content: среднее содержимое располагается по центру по горизонтали, обратите внимание, что обычно для этого требуется установить максимальную ширину.max-width.
  • How it works: это макет из 4 столбцов, и весь раздел заключен в оболочку.

Затем выразите указанные выше три части в коде:

<header></header>

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content"></div>
</section>

<div class="wrapper">
  <!-- 4-columns layout -->
  <section class="grid-4"></section>
</div>

Поскольку у нас есть раздел с 4 столбцами, здесь я использую сетку CSS:

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1140px;
}

.hero__content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

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

Страница статьи

В этом примере у нас есть макет страницы статьи. Вот пользовательский интерфейс, он содержит:

  • голова
  • картина
  • название статьи
  • Содержание статьи
  • боковая панель (рядом с)

Снова абстрагируем его на основные части:

Абстракция в основном включает в себя несколько частей:

  • Ширина шапки сайта100%

  • Заголовок: содержит заголовок и описание статьи, его содержимое выравнивается по левому краю, и должна быть установлена ​​максимальная ширина.

  • Двухколоночный макет, содержащийmainа такжеsidebarэлемент.

  • Содержание статьи, центрированное по горизонтали и с максимальной шириной.

Статья - Название страницы

Здесь не нужен метод компоновки. Простойmax-widthВот и все, конечно, вам нужно добавить большеpadding, добавьте немного комфортного расстояния.

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}

Статья - Главная и боковая панель

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

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}

Для внутреннего содержания статьи оно должно быть ограничено оболочкой.

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

После некоторого общего макета давайте посмотрим на конкретные детали.

Подробная информация

Раздел «Как это работает»

В первом примере этой статьи рассмотримHow It Works 部分детали реализации.

Список

  • Шаги 1, 2 и 3 здесь, есть ли ситуации, которые могут увеличиться или уменьшиться, и если да, то как мы должны с ними справиться?

  • Нужно ли, чтобы столбцы были одинаковой высоты, особенно если на карточке длинный текст?

заглавие

Нам нужно, чтобы этот заголовок раздела был оставлен в стороне? Или в некоторых случаях следует использовать полную ширину?

Отзывчивый дизайн

Нужно ли реагировать, когда ширина веб-страницы уменьшается? Если да, то каково условие срабатывания?

Это проблемы, с которыми мы можем столкнуться в нашей разработке, как вы думаете?Как front-end разработчик, мы должны учитывать такие крайние случаи, а не просто следовать простому, как кошка и тигр, пользовательскому интерфейсу.

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

В первой и третьей версиях вышеуказанной модели количество шагов равно3а также2. Можем ли мы сделать CSS динамическим, чтобы справиться с этим? Могу.

HTML

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>
</div>

CSS

.steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: 250px 1fr;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 200px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Я использовал сетку CSSminmax()а такжеauto-fitключевые слова. Это полезно в ситуациях, когда количество карт может быть увеличено или уменьшено.

Раздел контента

картина

  • Как должен быть представлен образ? Он меняется ежедневно или его нужно обновлять из CMS?

  • это использовать HTML<img>или CSSbackground?

  • Каково ожидаемое соотношение сторон изображения?

  • Нужно ли нам использовать несколько размеров изображения в зависимости от размера области просмотра?

  • Возможно ли, что часть картинки будет заменена видео?

высоко

Какова минимальная высота контента?

длина контента

Нужно ли устанавливать максимальную длину для заголовка и описания?Если да, то каковы минимальные и максимальные значения, которые должен обрабатывать дизайн?

расстояние между элементами

Как работать с вертикальным интервалом?

Центр содержимого

Как центрировать контент по горизонтали и вертикали, зная, что мы знаем только ширину, а не высоту.

контент с ограниченным доступом

Чтобы улучшить читаемость, лучше ограничить содержание. Какая идеальная ширина?

Отзывчивый дизайн

Нужно ли нам менять размер шрифта в зависимости от ширины окна просмотра? Если да, то мы должны использоватьpxединицы измерения, единицы области просмотра или CSSclamp()функция?

В зависимости от характера проектов, которые мы делаем, мы должны найти ответы на эти вопросы, которые помогут нам определить, как создаются компоненты.

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

В этом разделе я рассмотрю расстояние между дочерними элементами. мне нравится использоватьflow-spaceполезность. Я узнал об этом из блога Энди Белла Piccalil. Цель состоит в том, чтобы обеспечить интервал между непосредственными одноуровневыми элементами.

html

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content flow">
    <h2>Food is amazing</h2>
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p>
    <a href="/learn">Learn now</a>
  </div>
</section>

css

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

последние мысли

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

Я Сяо Чжи, увидимся в следующий раз!

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

оригинал:Ishadeed.com/article/T Привет…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории