Оформление
Расширенное руководство по оптимизации бизнес-окон - FineReport Справочная документация|Разработка отчетов|Использование отчетов|Учебные пособия
Расширенное руководство по оптимизации делового стиля
предисловие
Ниже представлен учебник по украшению приборной панели в розничной торговле, который в полной мере использует недавно появившуюся группировку компонентов и другие возможности в finebi 6.0.15, а также ловко адаптируется к эффектам ПК и мобильных устройств, обеспечивая мощную поддержку для украшения приборной панели.
Общий учебник состоит из трех частей:
- Теоретический анализ: общий анализ того, что делает непривлекательную приборную панель уродливой и что можно сделать для ее улучшения.
- Практика: пошаговое руководство по улучшению приборной панели и настройке ее для мобильных устройств.
- Мобильный макет: использование новых возможностей для обновления мобильных устройств
Ссылка на вид приборной панели (можно сохранить и затем редактировать):
https://pcdemo.finebi.com/webroot/decision\#/directory?activeTab\=5ed77de9\-9a61\-448d\-8103\-ecc677110f6bpc端效果截图: & nbsp;   ; & & nbsp;   nbsp; & nbsp; & nbsp; & nbsp nbsp;   nbsp ; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp
Скриншот мобильного телефона: & nbsp;   nbsp ;   ;   nbsp ;   ;   nbsp;   ;   nbsp;   nbsp;  
1. Теоретический анализ оптимизации стиля
1.1 Анализ проблемы оригинального шаблона
- Переполненные, захламленные страницы, содержание которых не позволяет с первого взгляда понять суть и не доставляет читателю приятных ощущений
- Выделение подзаголовков зеленым фоном делает страницу загроможденной. Следует выбрать альтернативные способы выделения подзаголовков, например жирный текст, шрифт другого размера или цвета. Держите страницу аккуратной и четкой.
- Сопоставление диаграмм и стилей содержимого не очень эстетично.
- Каждая часть контента отдельна и не перекликается друг с другом. Например, первый раздел должен представлять собой цельную обзорную область, но внутри он разделен на более мелкие части, которые стилистически не связаны между собой
1.2 Общие улучшения стиля
Чтобы выделить ключевое содержимое на общей панели, мы можем увеличить общую высоту первого раздела, чтобы добиться эффекта обложки
- Исходя из особенностей чтения человеческого глаза, рекомендуется размещать более темную аналитическую информацию с левой стороны, чтобы обеспечить порядок чтения слева направо. Таким образом, читатель может сначала получить доступ к общей аналитической информации в левой части, а затем продолжить изучение источников анализа в правой части.
- Темные и светлые цвета делятся по горизонтали по принципу золотого сечения (0,618), и так как у нас дашборд светлого цвета, то темные цвета составляют небольшую часть - около 38 %. Доля светлых цветов составляет 62 %.
- В темных частях цветовой гаммы рекомендуется избегать использования чистого черного цвета, а добавить немного синих компонентов. Это позволит избежать слишком мрачного эффекта и сохранить деловой настрой.
- Учитывая, что с левой стороны находится большой темный фон, рекомендуется использовать несколько резких и светлых цветов, чтобы выделить информацию на левой стороне. Чтобы сохранить баланс, лучше использовать однотонный фон и в крайней правой части. Поэтому в конце статьи приведены некоторые фоновые материалы для KPI, которые вы можете выбрать и использовать
Во второй и третьей частях нужно уменьшить ощущение линии и добавить визуальные слои, обогатив цвета.
- Удалите линии подзаголовков и замените их голубоватым светло-серым фоном, а также расположите заголовки на китайском и английском языках слева и справа так, чтобы они были сбалансированы слева и справа;
- Чтобы подчеркнуть иерархию, нам следует уменьшить цветовую нагрузку заголовка таблицы, чтобы он не перехватывал видение подзаголовка, расположенного над ним;
- Чтобы усилить ощущение воздушности между диаграммами, можно увеличить белое пространство, чтобы придать картине эффект чередования компактности и рыхлости;
- Насыщенные цвета графики для непринужденного и премиального образа
2. Практическое обучение
2.1 Адаптивная дашборд
- Во-первых, измените параметр "Редактировать как базовый размер" на фиксированный размер в Адаптивном и используйте "Универсальный браузер для настольных компьютеров" для размера.
Причина в том, что в этом шаблоне много компонентов "hover", и изменение адаптивного размера на фиксированный гарантирует, что компоненты hover не будут смещаться. - Если вам нужен эффект заполнения экрана при предварительном просмотре, измените следующее "Правило адаптации при предварительном просмотре" на "Адаптация к экрану", чтобы при предварительном просмотре экран заполнялся.
2.2 Заголовок и аналитический текст
- 2.2.1 Сначала проанализируйте структуру этого большого текста, представив его в виде сегментов в соответствии с их различными ролями, а затем расставьте их по отдельности.
| стиль письма | контексты | Скриншот эффекта | |
|---|---|---|---|
| Заголовок страницы | Euclid Title Black.;64(b) #ffffff.;Выравнивание влево; выравнивание по вертикали вниз | открытый (несекретный) |  |
| Заголовок вопроса 1 | Superior title черный; 16; #918cba;Выравнивание по левому краю; вертикальное центрирование | открытый (несекретный) |  |
| Заявление о состоянии вопроса 1 | Предпочитаемый заголовок: черный; 16; #ffffff;Выравнивание по левому краю; вертикальное центрирование | #494471 |  |
| Анализ и выводы по вопросу 1 | **Подзаголовок :По умолчанию; 14; жирный; #cecce1;Выровнено по левому краю ; выровнено по верхнему краюПроанализируйте текст :По умолчанию; 14; #918cba;Левый выровненный ; Вертикальный верхний выровненныйТекст для заметок 😗*По умолчанию; 14; #cecce1;Левый выровненный ; Вертикальный верхний выровненный | открытый (несекретный) |  |
- 2.2.2 Размещение элементов, используемых в панели анализа, и группировка компонентов
- 2.2.3 Выберите сгруппированные компоненты и задайте стиль.
- Установите фоновый рисунок на #1c1551;
- Зазор между компонентами установлен на 20px
2.3 индикаторные карты kpi
В комплект входят три фона для индикаторных карт, которые можно скачать, нажав на вложения ниже.
Карточка индикатора Фоновый рисунок.zip
- 2.3.1 Карточки-индикаторы категоризации
- "Динамика валовой прибыли" в сравнении с "Суммой валовой прибыли"
- "Годовая валовая маржа" против "Валовой маржи за тот же период"
- "Себестоимость продаж" в сравнении с "выручкой от продаж"
- 2.3.2 Установка и группировка индикаторных карт (последующие панели устанавливаются на свои места и группируются вместе)
| Настройки заголовков (с помощью текстовых компонентов) | Настройки карты индикации | Другие настройки диаграммы | Поместите их в указанные ниже позиции и соберите вместе.Затем загрузите фон в портфолио | |
|---|---|---|---|---|
| "Динамика валовой прибыли" в сравнении с "Суммой валовой прибыли" | По умолчанию;16; жирный;#38526b; фон прозрачный;Выравнивание по левому краю; Выравнивание по вертикали снизу | Удалите название индикатора;Poppins Bold; 40;#38526b;Выравнивание по центру; | **Цвета диаграмм:**Цвет #d5e3f1;эффектна;Граница #79a7d3;Выпадающее поле (Установить ось):Оси значений: метки осей/заголовки осей не отображаютсяКатегоризированные оси: метки осей/заголовки осей не отображаютсяКомпонент😗***Фон компонента прозрачный; внутренние поля компонента равны 0 сверху, снизу, слева и справа. |  |
| "Годовая валовая маржа" против "Валовой маржи за тот же период" | #326053; остальное как указано выше | **Годовая****валовая маржа :Удалите название индикатора;Poppins Bold; 40;#488977;Выравнивание по центру;Валовая маржа за тот же период😗*Название индикатора стоит на первом месте, рядом с индикатором;По умолчанию; 14;#326053;Выравнивание по центру; | **Цвета диаграмм:**Цвет #488977;непрозрачность76%;Масштабный слот #ffffff;Компонент😗***Фон компонента прозрачный;Внутренние поля компонента сверху 18, снизу слева и справа равны 0 |  |
| "Себестоимость продаж" в сравнении с "выручкой от продаж" | #ffffff; остальное как выше | **Себестоимость продаж:**Удалить название индикатора;Poppins Bold; 38;#ffffff;Выравнивание по центру; Входы продаж устанавливаются так же, как и себестоимость продаж | - |  |
2.4 Настройки компонентов
2.4.1 Именование компонентов
Совет: если вы хотите добавить текст к компоненту, не меняя его стандартный стиль заголовка, вы можете дважды щелкнуть по заголовку компонента прямо на панели инструментов и добавить новый текст после названия компонента.
Мы добавили сюда немного английского языка, чтобы придать ему более международный характер.
Есливы хотите изменить содержимое поля имени компонента, вам нужно переименовать его, выбрав соответствующий компонент на нижней вкладке.
2.4.2 Расстояние между компонентами
Если расстояние между двумя вертикально расположенными компонентами кажется вам слишком узким, вы можете скорректировать его, добавив пустой текстовый компонент, чтобы усилить иерархию между компонентами.
Добавляя или убирая пробелы, вы можете оптимизировать макет страницы, сделав содержимое более четким, удобным для чтения и улучшив общий визуальный эффект.
2.5 Обзор ежемесячной валовой прибыли
- Графически изобразите: выручка - затраты = валовая прибыль (синим цветом).
Свойства графики→Все→Размер→Изменить на 100
- элемент стиля
| цвет | рама | Размер/соединение | Скриншот эффекта | |
|---|---|---|---|---|
| Выручка от продаж (гистограмма) | #bfe3f0 | #545073 | Ширина колонки:100;Скругленные углы: 8px; |  |
| Себестоимость продаж (гистограмма) | #ffffff | #545073 | Ширина колонки:100;Скругленные углы: 8px; | |
| Валовая маржа (линейный график) | #5b85ae | # Прозрачный | Кривые линии; линейныесплошные линии;Ширина линии6px; маркерные точкиотсутствуют; | |
| Валовая рентабельность за тот же период (линейный график) | #f9b44f | # Прозрачный | Стилизованныескладчатые линии; линейныепунктирные линии;Ширина линии9px; маркерные точкиотсутствуют; |
2.6 Региональные рубрики
| стиль письма | контексты | Скриншот эффекта | |
|---|---|---|---|
| Китайский | Euclid Title Black.;30(b) #1c1551.;Выравнивание по левому краю; вертикальное центрирование | #f2f4f8 |  |
| Английский (язык) | Poppins Bold.;28(b) #1c1551.;Выравнивание по правому краю; вертикальное центрирование |  |
2.7 Обзор валовой прибыли продукции
| каллиграфический стиль | ваш рост (почетный) | прическа | Настройки панели данных | |
|---|---|---|---|---|
| заголовок | По умолчанию; 12;полужирный;выравнивание по центру; | 40px | Стиль 3;Цвет темы: #f2f4f8 | Положительное значение: #d8dbfd;Отрицательное значение: #fad399; |
| корпус часов | По умолчанию; 12;размеры слева;индикаторы справа; | 30px |
Вернитесь в панель управления после настройки формы, загрузите соответствующий клип со стилем заголовка и наведите его под заголовком, чтобы создать минималистичную атмосферу делового стиля.
Оформление заголовка таблицы.png.zip
2.8 Изменение волатильности цен
| цвет | Размер/соединение | рендеринг (визуальное представление того, как все будет выглядеть) | |
|---|---|---|---|
| Выручка от продаж [новая] (гистограмма) | #d8dbfd;90 процентов непрозрачности; | Ширина колонки 55;Закругленные углы 2px; |  |
| Фактор волатильности цен (линейный график) | #5b85ae;Непрозрачность 90 процентов; | Ширина линии 6;Стиль вертикальный;Маркерные точки -полые квадраты; |
2.9 Изменения в ассортименте продукции
| цвет | рама | величина | Стили компонентов | рендеринг (визуальное представление того, как все будет выглядеть) | |
|---|---|---|---|---|---|
| Доход за предыдущий месяц | #bfe3f0; | #1c1551; | Ширина колонки 50;Скругленные углы 0px; | Сетчатые линии не отображаются;Отображение осей;Линия раздела: заменена на пунктирную; цвет изменен на #51649a; |  |
| выручка от продаж | #ffd89f; | ||||
| Изменение по сравнению с предыдущим месяцем | #aeceee; |
2.10 Сравнение фактических данных по плану расходов
| цвет | рама | сюр, обозначающий лега (в музыке) | Скриншот эффекта | |
|---|---|---|---|---|
| Производственные затраты - планирование (сложенная диаграмма) | #e8f3f8; | #c7e1e1; | Кривая стиля; |  |
| Себестоимость продукции - фактическая (линейный график) | #5b85ae; | автоматизация | Криваястиля;Маркернеуказывает; |
2.11 Валовая прибыль по компаниям
| цвет | рама | радиус | вкладка (окна) (вычислительная техника) | Скриншот эффекта (стандартный стиль карты индикатора, парящей внутри круговой диаграммы) |
|---|---|---|---|---|
| #bfe3f0; #bee8f2;#d8dbfd;#a8e5d4;#ffd89f;#aeceee; | #1c1551; | Размер радиуса 75;I.D. процент пустоты; 80 процентов; | По умолчанию;12;#545073; |  |
2.12 Сравнение распределения затрат в разбивке
| цвет | рама | величина | Скриншот эффекта | ||
|---|---|---|---|---|---|
| #bfe3f0;#ffd89f; | #1c1551; | Ширина колонки 45; Скругленные углы 0px;Большое расстояние между колонками; |  |
2.13 Сравнение распределения статей затрат
| цвет | рама | Скриншот эффекта |
|---|---|---|
| #aeceee;#bfe3f0;#d8dbfd;#a8e5d4; | #1c1551; |  |
3.Мобильный макет
- Нажмите на кнопку в правом верхнем углу приборной панели, чтобы переключиться на мобильный макет
- При переключении макетов на мобильных устройствах отображение может быть испорчено из-за использования большого количества hover-компонентов. Не волнуйтесь, мы можем сначала скрыть эти непонятные компоненты.
- Затем создайте страницу:
- Расстояние между компонентами 6px;
- Фон #ffffff;
- Шрифты диаграмм адаптивны;
- Затем мы проделаем то же самое, что и с аналитической доской: сначала расставим используемые элементы, затем сгруппируем компоненты и, наконец, зададим фон для комбинации.
- Установите фоновый рисунок на #1c1551;
- Зазор между компонентами установлен на 10px;
- В последующих панелях мы можем использовать компоненты в группах, чтобы объединить их и добавить фоновые эффекты.
- Если необходим больший промежуток, используйте в качестве разделителя пустой текстовый компонент с предыдущей страницы. Это эффективно разделит панели и создаст ощущение визуального пространства на странице.