Только что запущенный официальный сайт Alibaba Dharma Academy, внешний вид

внешний интерфейс Алибаба Chrome

Пишите впереди:

В октябре прошлого года Джек Ма основал Академию Дхармы Алибаба, а 28 сентября этого года был официально запущен официальный сайт Академии Дхармы Алибаба. Как человек, занимающийся интернет-индустрией, большинство из них зайдет на официальный сайт Академии Дхармы.Эта статья является моим личным обзором официального сайта Академии Дхармы с точки зрения внешнего интерфейса.Простая и грубая оценка, подсчитайте круги и извлеките некоторые навыки работы с кодом, которые можно изучить и рассматривать как интерфейс. Это первый раз, когда вы пишете статью с отчетом об опыте, что писать о том, что приходит на ум, личная точка зрения или односторонняя, недостатки, или, если у вас есть лучшее понимание, добро пожаловать на обмен в сообщении.Конечно, я надеюсь, что студенты Академии Али Дхарма увидят мою простую оценочную статью и смогут исправить места, которые я лично считаю ошибками и оптимизациями на официальном сайте Академии Дхармы, описанные в статье..

1. Первый опыт

1.1 Доменное имя

Сторона ПК: https://damo.alibaba.com/

Мобильный: https://m.damo.alibaba.com/

1.2 Макет страницы (непосредственно выше)

ПК сторона


мобильный


Общий стиль дизайна-китайский стиль и простое чувство технологии.Китайский стиль в основном выполнен из чернил (горы), а фоновое изображение четкое.Смысл технологии использует много сплошных цветов (темно-синий с небольшим градиентом) .


2. Маленький мерный нож

2.1 Время загрузки страницы

Очистите кеш браузера, откройте консоль, обновите страницу и получите следующую информацию (окружение: личная домашняя сеть, браузер Google Chrome), видно, что веб-сайт обрабатывается сервером.

1、请求数(requests)：0/42
2、转移资源大小（transferred）：15.8M
3、所有请求（finish）:3.09S
4、DOM树构建完成(DOMContentLoaded)：558ms
5、页面加载完毕（Load）：3.09s

Смотри дальше вниз,В консоли есть console.log(), который не был удален, что смущает., Я не буду заниматься конкретными печатными данными, кому интересно, могут сами посмотреть~


2.2 Структура кода страницы

После прочтения консоли обязательно присмотрюсь и к Elements.В целом вполне удовлетворительно,и не сильно зависит от сторонних библиотек.Конечно посмотрел целиком и наверное использовал компонент swiper в новости.Конечно, я добавил [друга] в конце. League+] статистика cnzz для веб-мастеров


2.2 Кэширование страниц

1. CNZZDATA, UM_distinctid, sca: статистика, возвращаемая cnzz.

2. Cna: каждый веб-сайт Ali будет иметь файл cookie cna, и это имя перекрестного домена верхнего уровня Лично я думаю, что эта штука используется для идентификации устройства.

3, client_lang, конечно, только при нажатии на переключатель языка он появится

......




В-третьих, передняя точка круга

Вот и кульминация этой статьи,Волна рутины «сначала подавление, а потом-вверх»Давайте поговорим об «ошибке» официального веб-сайта Академии Дхармы и о местах, где, как мне кажется, дизайн может быть оптимизирован с точки зрения человека как внешнего интерфейса.

Примечание: время тестирования 2018/09/29.

3.1 Обнаружение ошибок и оптимизация дизайна

3.1.1 (баг) При наведении указателя мыши на событие под столбцом «Лаборатория» появляется белая рамка в один пиксель.(Вы должны сами испытать это на официальном сайте, чтобы знать)


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


3.1.2 (оптимизация) Логотип в середине навигации,Лично я считаю, что нужно добавить событие клика. То же самое относится и к мобильному терминалу. Вы можете перейти на домашнюю страницу. В настоящее время нет события клика, будь то на ПК или мобильном терминале. Текущий код нравится

<div class="middle"><img class="top-logo" src="/_pc/css/img/top-logo-en.png"></div>

3.1.3 (Оптимизация) Навигация по последнему CN, домашняя страницаЯ надеюсь, что вы можете нажать, чтобы переключить язык каждой страны.Конечно, все подстраницы в порядке, вы можете переключить язык (исправлено)


3.1.4 (оптимизированная) карусельная карта, по этому кусочку мыши можно щелкнуть, но он может отображаться в небольшом диапазоне для обсессивно-компульсивного расстройства


3.1.5 (оптимизация) о проблемах совместимости,Открываю IE (по умолчанию 11), кхм, кажется, что шрифт сбился, о-о-о, там карусель, что происходит?


Конечно, продолжайте тестировать, IE9 будет холодным (как показано ниже), вероятно, совместим с IE10 и выше.


3.1.6 (оптимизированное) карусельное изображение главной страницы и подстраницы, большое изображение 2M, время загрузки (3 с+) подождите, пока вы немного задохнетесь




3.2 Майнинг фронтенда, который стоит изучить


3.2.1 Навигация

Основные моменты: логотип расположен по центру, столбцы навигации расположены с обеих сторон, прокрутка мыши сокращает навигацию, подходит для мобильных терминалов.

В официальной навигации сайта навигация урезана пополам, слева, посередине и справа по три дива, а логотип размещен в среднем диве.Лично, если можно определить количество навигаций, можно использоватьnth-childПустое место зарезервировано для логотипа, а ниже приведены части, связанные с макетом и стилем, которые я примерно написал (без настройки конкретного стиля,полный код)

<template>
  <div class="header_bg">
      <div class="header">
        <div class="logo">
          <a href="/"><img src="../assets/top-logo-en.png" alt=" " /></a>
        </div>
        <nav class="navbar-default">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
            </button>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav">
              <li class="act" v-for="item in navdata"><a><p class="c-title">{{item.cTitle}}</p><p class="e-title">{{item.eTitle}}</p></a></li>
              <li><a>CN</a></li>
            </ul>
          </div>
        </nav>
      </div>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        navdata:[
          {"cTitle":"首页","eTitle":"HOME"},
          {"cTitle":"实验室","eTitle":"Laboratories"},
          {"cTitle":"合作生态","eTitle":"Collaboration"},
          {"cTitle":"新闻动态","eTitle":"Events"},
          {"cTitle":"加入我们","eTitle":"Careers"},
          {"cTitle":"关于我们","eTitle":"About Us"}
        ]
      }
    },
    methods: {}
  }
</script>

&:nth-child(1) {
   margin-left: 1/18 * 100%;
 }

&:nth-child(4) {
   margin-left: 3/18 * 100%;
 }

Примерный эффект("Пиндуодуо издание")


3.2.2 Эффект фильтра фона карусели

Атрибут фильтра используется


.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: 100% 100%;
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -o-filter: blur(70px);
    -ms-filter: blur(70px);
    filter: blur(70px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='70');
}

3.2.3 Список новостей

Плагин swiper может понять



3.2.4 Эффекты расширения и сжатия панели аккордеона

Атрибут перехода в основном используется


.item-active {
    background-image: none!important;
    width: 278px;
    padding: 0 22px;
    transition: width .8s,padding-left .2s,padding-right .2s;
    -ms-transition: width .8s,padding-left .2s,padding-right .2s;
    -moz-transition: width .8s,padding-left .2s,padding-right .2s;
    -webkit-transition: width .8s,padding-left .2s,padding-right .2s;
    -o-transition: width .8s,padding-left .2s,padding-right .2s;
}

Не по теме:Поскольку Али - это большая фабрика, к которой стремятся многие программисты, мы будем уделять больше внимания и заботиться о небольших проблемах в вашей технологии.Конечно, я пишу статью в отношении общения и обмена, а не в беспорядке, а как было написано ранее в статью, конечно, я надеюсь, что студенты из Академии Дхармы Али увидят мою простую оценочную статью, и они смогут исправить те места, которые я лично считаю ошибками, и оптимизации на официальном сайте Академии Дхармы, описанные в статье. Надеюсь, это поможет другие передовые студенты~


Категории