Светлая тема

Graphite 2.1: правила вёрстки, светлая темаТочки перелома 1440, 800, 390, 320, главное действие страницы, шапка на 390, кнопки форм и диалогов, состояние вместо данных, строка флага, подробности, цели касания, перенос слов, честные счётчики, кадры ролей, одно слово на намерение.GRAPHITE 2.1 · ПРАВИЛА ВЁРСТКИАдаптивность, действия, состояния, словаСвод правил с одним образцом на каждое. Образцы нарисованы библиотекой gx из токенов, показаны только хорошие примеры. Правилаприменяются во всех кадрах: в экранах, адаптивных образцах и сценариях. Тема листа: светлая.Точки перелома и что меняетсяКадры рисуются на 1440, 800, 390 и 320. Страница не получает горизонтальной прокрутки ни на одной ширине. Размер цели касания берётся из токенов: 44 px, главное действие на телефоне 48 px.1440от 1280800от 800 до 1279390до 799320наименьшая, без горизонтальной прокруткиНавигацияБоковая панель 232 px с подписями. Крошки вшапке.Один рельс значков, подпись по наведению ифокусу. Второй навигации нет.Меню открывает навигацию, переключательпроектов, тему и учётную запись. Палитракоманд из шапки.Как на 390. Меню на всю ширину экрана.ШапкаЗнак, крошки по дереву навигации,переключатель проектов, поиск, тема, учётнаязапись.Те же части. Крошки сокращаются до двухпоследних звеньев.Корневой экран: знак и меню. Вложенный:назад и заголовок. Главное действие не вшапке.Как на 390.ТаблицыВсе колонки. Плотность 48 или 36. Однакарточка, линии между строками.Второстепенные колонки скрыты, ключ ипроблема остаются. Строка целиком ссылка.Стопкой: имя, пометка проблемы, потом пары«подпись и значение». Ничего не пропадает.Стопкой. Если пара не помещается в строку,подпись над значением.ФильтрыОдна строка: поиск, выпадающие, «Сброситьфильтры». Применяются сразу.Одна строка под заголовком, тот же порядок ито же место.Столбцом, каждый элемент 44 px. Тот жепорядок.Как на 390.ПодробностиПанель справа, список остаётся полным.Ширину панели можно менять.Список слева, подробности справа,320 до 360 px. Проблема флага видна в списке.Отдельный экран с кнопкой назад. Прокрутка ифильтр списка сохраняются.Как на 390.Цель касанияКнопки и поля 36, строки 48 или 36.Как на 1440. На сенсорном вводе 44.Не меньше 44 px. Главное действие 48 px.Между соседними целями не меньше 8 px.Не меньше 44 px.Главное действие страницыОдно главное действие на страницу, одной заливкой лавой.1440: справа в строке заголовка, правый край по краюсодержимого.390: сразу под заголовком, на всю ширину, 48 px. Незакреплено внизу и не в конце прокрутки.Действие не пропадает ни в одном состоянии страницы. Взагрузке оно может быть выключенным.Встроенная форма создания над списком: одна запись вида,главное действие справа в её строке.1440: строка заголовкаВсе проектыНовый проектФильтр по имени, адресу, языкуСтатус индексаОшибкаНет проектов с «shop» среди выбранного статуса390: под заголовкомВсе проектыНовый проектФильтр по имени, адресу, языкуШапка на 390: корневой и вложенный экранКорневой экран вне проекта (Все проекты, Сервер): знак именю. Заголовок страницы идёт ниже шапки.Корневой экран проекта (Обзор, Граф): знак, переключательс именем текущего проекта, меню. Проект всегда виден вшапке.Вложенный экран (карточка, форма, шаг): назад, надзаголовком мелко имя проекта, меню «⋯» длявторостепенных действий.Шапка не повторяет заголовок страницы. В ней нет пометкиредакции и пустых мест.Меню открывает навигацию, переключатель проектов, темуи учётную запись. Те же пункты на всех экранах.Назад ведёт к списку с сохранённой прокруткой и фильтром.Системный жест назад делает то же.Кнопки в шапке 44 px, между ними не меньше 8 px.Корневой экран проектаshop-apiОбзорВложенный экранshop-apicheckout-modeОшибкаТипстрокаКнопки форм и диалогов, опасное действиеРяд в конце формы, выровнен по правому краю. Слева«Отмена», справа главное. Главное одно, в заливке лавой.На 390 кнопки столбцом на всю ширину: главное сверху (48px), «Отмена» под ним (44 px).Кнопка называется действием: «Сохранить», «Создать». Онане заменяется текстом ошибки: пока есть ошибки, онавыключена, число ошибок рядом.Опасное действие не в ряду главного. Оно в своей зонениже формы, слева, отделено линией и отступом не меньше32 px, и не последним перед закреплённой панелью.Диалог: «Отмена» слева, действие справа. Если действиеопасное, оно красной заливкой и называется глаголом:«Удалить окончательно».1440: ряд в конце формы, опасная зона нижеНазваниеОписаниеОтменаСохранитьУдалить390: столбцом, главное сверхуНазваниеОписаниеСохранитьОтмена1440: диалог с опасным действиемПодтвердите действиеПарольПодтверждение действует 5 минутУдалить окончательноОтмена390: диалог столбцомПодтвердите действиеПарольПодтверждение действует 5 минутУдалить окончательноОтменаСостояние заменяет область данныхШапка, заголовок, главное действие, вкладки и фильтрыостаются на месте в каждом состоянии. Меняется толькообласть данных.Пусто, ошибка, загрузка, нет доступа и «ничего не подходит»заменяют таблицу одним блоком. Строк данных над ним ипод ним нет.Состояние слева: заголовок, причина, действие. Один виддля всех экранов.Данные устарели, но показаны: полоса над таблицей, впотоке, с действием «Повторить». Она не закрывает нистроки, ни форму запроса.Счётчик, страницы и «Показать ещё» зависят от состояния ив пустом и ошибочном не рисуются.Честное «ничего нет» говорит почему и что делать дальше.Данные устарели, но показаныВсе проектыНовый проектФильтр по имени, адресу, языкуНе удалось обновить индекс: нет связи срепозиторием. Показан прошлый индекс от09:40.ПовторитьПроектСтатус индексаshop-apiГотово · 2 чОткрытьshop-webГотово · вчераОткрытьПоказано 2 из 38Ошибка заменяет данныеВсе проектыНовый проектФильтр по имени, адресу, языкуНе удалось загрузить список проектовПовторитьЗагружаю…Такого проекта нет или у васнет к нему доступаПод фильтры ничего неподходитСбросить фильтрыСтрока флага: проблема сразу за ключом на всех ширинахПорядок один на всех ширинах: ключ, проблема, тип, места. Проблема сразу за ключом.1440: проблема второй колонкой. 800 с открытой карточкой: в строке списка ключ и проблема. 390 и 320: проблема отдельной строкой сразу под ключом, тип и места ниже.Уровень написан словом и значком: «Ошибка», «Предупреждение», «Сведение». Тон только добавляет. «Факт» без цвета проблемы, «Проверить нельзя» пунктирным контуром.Ключ набран моноширинно цветом основного текста, значок флага тоже. Выбранная строка: полоска 3 px, нейтральный фон, ключ полужирным.checkout-modeОшибкастрока12 местremote-recsПроверить нельзя?3 местаprice-displayПредупреждениевариант5 местsearch-v2вкл/выкл1 место1440: ключ, проблема, тип, местаcheckout-modeОшибкаremote-recsПроверить нельзяprice-displayПредупреждениеsearch-v2Показано 4 из 9checkout-modeОшибкаОткрыть конфигурациюТипстрокаМеста чтения12 мест в 4 файлахОткрыть граф800: список слева, карточка справа, проблема остаётся в спискеcheckout-modeОшибкастрока · 12 местremote-recsПроверить нельзя? · 3 местаprice-displayПредупреждениевариант · 5 мест390payments-providerОшибкастрока ≠ объект · 12 местprice-displayПредупреждениевариант · 1 место320: ключ переносится после точки или дефисаПодробности объекта: один способ, список не теряетсяПодробности открываются без потери контекста: на 1440панель справа, на 800 справа от списка, на 390 отдельнымэкраном поверх списка.Действие одно и в одном месте: на 1440 и 800 подзаголовком панели, на 390 в закреплённой нижней панелина всю ширину.Назад ведёт к списку, прокрутка и фильтр сохранены.Состояние открытой карточки хранится в адресе.Значение, которое не поместилось, усечено многоточием,полное значение есть в карточке и по фокусу.Учётная запись остаётся отдельной страницей: это объектраздела, а не строка списка.Список на 390GRAPHITФлагиcheckout-modeОшибкаТипстрокаМеста12 местremote-recsПроверить нельзяТип?Места3 местаПоказано 2 из 9Подробности на 390shop-apicheckout-modeОшибкаКлючpayments-providerТипстрока ≠ объектМеста чтения12 мест в 4 файлахОткрыть графОткрыть конфигурациюЦели касания не меньше 44Каждая цель на 390 не меньше 44 на 44, главное действие 48высотой. Если значок меньше, область касания дорисованавокруг него (пунктир на образце).Между соседними целями не меньше 8 px. Опасное действиене вплотную к обычному.Вкладки, которые не помещаются, становятся выбором спискомвысотой 44, а не прокручиваемой строкой текста.ПовторитьПеременные12Файлы4Флаги9390: вкладкиФлаги 9320: тот же выбор спискомФильтр по имени, адресу, языкуПеренос слов и длинных кодовПереносы только по словам. Слово не разрывается по буквам ине получает дефиса.Длинный код, путь и ключ переносятся после «/», «.», «-» или«_», без добавленного дефиса. Полное значение в карточке.320 и 390: текст по словамСлишком много запросов.Повторите через 30 секундАудитора назначает только другойАудитор.src/payments/checkout/new_payment_flow.enabled-for-all.pypayments-providerУсечение: полное значение в карточке и по фокусуКлючpayments-providerОткрытьprice-displayОткрытьПоказано 2 из 9Честные счётчикиЕсли показано не всё, сказано сколько всего: «Показано N изM». Счётчик один, внизу карточки слева.Под счётчиком одна кнопка «Показать ещё»: вторичная, 44 px.Число в счётчике, не на кнопке.Для хвоста без кнопки: «и ещё N». Списков «топ-N» безсчётчика нет.Недоступные проекты не называются и не считаются. Однанейтральная строка без числа.390: счётчик, одна кнопка, нейтральная строкаshop-apiСтатусГотово · 2 чРазмер1 840 файлов · 38 МБshop-webОшибкаСтатусОшибка индекса · вчераРазмер2 310 файлов · 54 МБПоказано 2 из 38Показать ещёПоказаны проекты, к которым у вас есть доступКадры ролей и редакций: настоящие, не копииКадр роли или редакции рисуется из таблицы возможностей этой роли, а не копией кадра Владельца. Роль и редакция названы словами в подписи под кадром. Кадры нужны только там, где экран отличается.Экран и рольЧто должно быть в кадреЧего не должно бытьНастройки проекта, ЧитательТолько просмотр: поля недоступны на изменение, причина рядом.Кнопка сохранения, веб-перехватчик, удаление.Настройки проекта, РедакторНастройки без видимости проекта, без веб-перехватчика и без удаления.Пункты Владельца, даже выключенные.Участники, Администратор без членстваТолько метаданные и действие «Добавить себя».Настройки, подключение, токены, код и находки.Карта доступа, ВладелецИстория только по своему проекту.События чужих проектов.Все проекты и системы, любая рольОдна строка: «Показаны проекты, к которым у вас есть доступ».Названия, числа и «скрыто N» для недоступных проектов.Личная и корпоративная редакцииОтдельный кадр там, где экран меняется: шапка, вход, обзор, участники,настройки, сети, компоненты.Подпись редакции как элемент интерфейса. Она только под кадром.Одно намерение, одно словоСлова из списка текстов. Во всех кадрах одно намерение зовётся одним словом.НамерениеОдно словоНе используемСоздать проект, учётную запись, командуСоздатьДобавить проект, ЗавестиВыпустить токен, ссылку, значениеВыпуститьСоздать токен, СгенерироватьОстановить токен или доступОтозватьУдалить токен, АннулироватьУбрать в корзинуУдалитьСтереть, УбратьЗабрать рольСнять рольОтозвать роль, Удалить рольДать роль или правоВыдатьНазначить, ПредоставитьДобавить человека в проектДобавитьВключить, ПригласитьСкопировать в буферСкопироватьКопировать, КопияПринять заявку или правилоПодтвердитьОдобрить, УтвердитьОтклонить заявкуОтклонитьОтказатьВыйти из диалога без действияОтменаНазад, ОтказатьсяОткрыть строку, объект, разделОткрытьПерейти, Подробнее, ПросмотрПовторить неудавшийся запросПовторитьПопробовать снова, Ещё разСохранить формуСохранитьПрименитьПоказать скрытое значениеПоказатьПросмотретьСкачать файлСкачатьЭкспортБез пометок дизайнера и без тиреПометки дизайнера не попадают в интерфейс: номера экранов, вопросы к заказчику, число нажатий,шаги сценария, имена ролей и редакций как подписи элементов, описание приёмов.Они живут под кадром, в README или в слое аннотаций. Ссылка на другой экран в интерфейсеназывается человеческими словами: «Открыть граф».Тире не знак препинания в строках интерфейса. Вместо него двоеточие, точка или запятая. То же вподписях листов.Обзор проекта, 1440, светлая, ВладелецОбзорОбновить индексГотово · 2 чПодпись кадра стоит снаружи и называетэкран, ширину, тему и роль. Внутри кадратолько то, что увидит человек.Прочие правила экрановОшибка ссылки или кода входа, когда повторить нельзя: плашка над формой, поля убраны, вместокнопки действие «Ко входу». Ошибка в поле: под полем, кнопка на месте.Пустое состояние входа: поля пустые, ошибка только у незаполненного поля и со значком.Конфигурация: один шаблон. Общая шапка, заголовок, под ним сегмент «Переменные», «Файлы»,«Флаги» со счётчиками. Содержимое меняется, рамка нет.Ответ «почему такой доступ» объяснение, не проблема: без янтарной плашки, источники текстом, обестроки читаются.Метрики одной строкой чисел с подписями обычным регистром. Чипы обычным регистром. Готовыйиндекс строкой «Готово · 2 ч».Состояние защиты маршрута берётся из одной таблицы данных: граф, список, карточка и обзорпоказывают одно и то же.Подпись «локально» стоит в одном месте каркаса. Подписи редакции под кадром.

Тёмная тема

Graphite 2.1: правила вёрстки, тёмная темаТочки перелома 1440, 800, 390, 320, главное действие страницы, шапка на 390, кнопки форм и диалогов, состояние вместо данных, строка флага, подробности, цели касания, перенос слов, честные счётчики, кадры ролей, одно слово на намерение.GRAPHITE 2.1 · ПРАВИЛА ВЁРСТКИАдаптивность, действия, состояния, словаСвод правил с одним образцом на каждое. Образцы нарисованы библиотекой gx из токенов, показаны только хорошие примеры. Правилаприменяются во всех кадрах: в экранах, адаптивных образцах и сценариях. Тема листа: тёмная.Точки перелома и что меняетсяКадры рисуются на 1440, 800, 390 и 320. Страница не получает горизонтальной прокрутки ни на одной ширине. Размер цели касания берётся из токенов: 44 px, главное действие на телефоне 48 px.1440от 1280800от 800 до 1279390до 799320наименьшая, без горизонтальной прокруткиНавигацияБоковая панель 232 px с подписями. Крошки вшапке.Один рельс значков, подпись по наведению ифокусу. Второй навигации нет.Меню открывает навигацию, переключательпроектов, тему и учётную запись. Палитракоманд из шапки.Как на 390. Меню на всю ширину экрана.ШапкаЗнак, крошки по дереву навигации,переключатель проектов, поиск, тема, учётнаязапись.Те же части. Крошки сокращаются до двухпоследних звеньев.Корневой экран: знак и меню. Вложенный:назад и заголовок. Главное действие не вшапке.Как на 390.ТаблицыВсе колонки. Плотность 48 или 36. Однакарточка, линии между строками.Второстепенные колонки скрыты, ключ ипроблема остаются. Строка целиком ссылка.Стопкой: имя, пометка проблемы, потом пары«подпись и значение». Ничего не пропадает.Стопкой. Если пара не помещается в строку,подпись над значением.ФильтрыОдна строка: поиск, выпадающие, «Сброситьфильтры». Применяются сразу.Одна строка под заголовком, тот же порядок ито же место.Столбцом, каждый элемент 44 px. Тот жепорядок.Как на 390.ПодробностиПанель справа, список остаётся полным.Ширину панели можно менять.Список слева, подробности справа,320 до 360 px. Проблема флага видна в списке.Отдельный экран с кнопкой назад. Прокрутка ифильтр списка сохраняются.Как на 390.Цель касанияКнопки и поля 36, строки 48 или 36.Как на 1440. На сенсорном вводе 44.Не меньше 44 px. Главное действие 48 px.Между соседними целями не меньше 8 px.Не меньше 44 px.Главное действие страницыОдно главное действие на страницу, одной заливкой лавой.1440: справа в строке заголовка, правый край по краюсодержимого.390: сразу под заголовком, на всю ширину, 48 px. Незакреплено внизу и не в конце прокрутки.Действие не пропадает ни в одном состоянии страницы. Взагрузке оно может быть выключенным.Встроенная форма создания над списком: одна запись вида,главное действие справа в её строке.1440: строка заголовкаВсе проектыНовый проектФильтр по имени, адресу, языкуСтатус индексаОшибкаНет проектов с «shop» среди выбранного статуса390: под заголовкомВсе проектыНовый проектФильтр по имени, адресу, языкуШапка на 390: корневой и вложенный экранКорневой экран вне проекта (Все проекты, Сервер): знак именю. Заголовок страницы идёт ниже шапки.Корневой экран проекта (Обзор, Граф): знак, переключательс именем текущего проекта, меню. Проект всегда виден вшапке.Вложенный экран (карточка, форма, шаг): назад, надзаголовком мелко имя проекта, меню «⋯» длявторостепенных действий.Шапка не повторяет заголовок страницы. В ней нет пометкиредакции и пустых мест.Меню открывает навигацию, переключатель проектов, темуи учётную запись. Те же пункты на всех экранах.Назад ведёт к списку с сохранённой прокруткой и фильтром.Системный жест назад делает то же.Кнопки в шапке 44 px, между ними не меньше 8 px.Корневой экран проектаshop-apiОбзорВложенный экранshop-apicheckout-modeОшибкаТипстрокаКнопки форм и диалогов, опасное действиеРяд в конце формы, выровнен по правому краю. Слева«Отмена», справа главное. Главное одно, в заливке лавой.На 390 кнопки столбцом на всю ширину: главное сверху (48px), «Отмена» под ним (44 px).Кнопка называется действием: «Сохранить», «Создать». Онане заменяется текстом ошибки: пока есть ошибки, онавыключена, число ошибок рядом.Опасное действие не в ряду главного. Оно в своей зонениже формы, слева, отделено линией и отступом не меньше32 px, и не последним перед закреплённой панелью.Диалог: «Отмена» слева, действие справа. Если действиеопасное, оно красной заливкой и называется глаголом:«Удалить окончательно».1440: ряд в конце формы, опасная зона нижеНазваниеОписаниеОтменаСохранитьУдалить390: столбцом, главное сверхуНазваниеОписаниеСохранитьОтмена1440: диалог с опасным действиемПодтвердите действиеПарольПодтверждение действует 5 минутУдалить окончательноОтмена390: диалог столбцомПодтвердите действиеПарольПодтверждение действует 5 минутУдалить окончательноОтменаСостояние заменяет область данныхШапка, заголовок, главное действие, вкладки и фильтрыостаются на месте в каждом состоянии. Меняется толькообласть данных.Пусто, ошибка, загрузка, нет доступа и «ничего не подходит»заменяют таблицу одним блоком. Строк данных над ним ипод ним нет.Состояние слева: заголовок, причина, действие. Один виддля всех экранов.Данные устарели, но показаны: полоса над таблицей, впотоке, с действием «Повторить». Она не закрывает нистроки, ни форму запроса.Счётчик, страницы и «Показать ещё» зависят от состояния ив пустом и ошибочном не рисуются.Честное «ничего нет» говорит почему и что делать дальше.Данные устарели, но показаныВсе проектыНовый проектФильтр по имени, адресу, языкуНе удалось обновить индекс: нет связи срепозиторием. Показан прошлый индекс от09:40.ПовторитьПроектСтатус индексаshop-apiГотово · 2 чОткрытьshop-webГотово · вчераОткрытьПоказано 2 из 38Ошибка заменяет данныеВсе проектыНовый проектФильтр по имени, адресу, языкуНе удалось загрузить список проектовПовторитьЗагружаю…Такого проекта нет или у васнет к нему доступаПод фильтры ничего неподходитСбросить фильтрыСтрока флага: проблема сразу за ключом на всех ширинахПорядок один на всех ширинах: ключ, проблема, тип, места. Проблема сразу за ключом.1440: проблема второй колонкой. 800 с открытой карточкой: в строке списка ключ и проблема. 390 и 320: проблема отдельной строкой сразу под ключом, тип и места ниже.Уровень написан словом и значком: «Ошибка», «Предупреждение», «Сведение». Тон только добавляет. «Факт» без цвета проблемы, «Проверить нельзя» пунктирным контуром.Ключ набран моноширинно цветом основного текста, значок флага тоже. Выбранная строка: полоска 3 px, нейтральный фон, ключ полужирным.checkout-modeОшибкастрока12 местremote-recsПроверить нельзя?3 местаprice-displayПредупреждениевариант5 местsearch-v2вкл/выкл1 место1440: ключ, проблема, тип, местаcheckout-modeОшибкаremote-recsПроверить нельзяprice-displayПредупреждениеsearch-v2Показано 4 из 9checkout-modeОшибкаОткрыть конфигурациюТипстрокаМеста чтения12 мест в 4 файлахОткрыть граф800: список слева, карточка справа, проблема остаётся в спискеcheckout-modeОшибкастрока · 12 местremote-recsПроверить нельзя? · 3 местаprice-displayПредупреждениевариант · 5 мест390payments-providerОшибкастрока ≠ объект · 12 местprice-displayПредупреждениевариант · 1 место320: ключ переносится после точки или дефисаПодробности объекта: один способ, список не теряетсяПодробности открываются без потери контекста: на 1440панель справа, на 800 справа от списка, на 390 отдельнымэкраном поверх списка.Действие одно и в одном месте: на 1440 и 800 подзаголовком панели, на 390 в закреплённой нижней панелина всю ширину.Назад ведёт к списку, прокрутка и фильтр сохранены.Состояние открытой карточки хранится в адресе.Значение, которое не поместилось, усечено многоточием,полное значение есть в карточке и по фокусу.Учётная запись остаётся отдельной страницей: это объектраздела, а не строка списка.Список на 390GRAPHITФлагиcheckout-modeОшибкаТипстрокаМеста12 местremote-recsПроверить нельзяТип?Места3 местаПоказано 2 из 9Подробности на 390shop-apicheckout-modeОшибкаКлючpayments-providerТипстрока ≠ объектМеста чтения12 мест в 4 файлахОткрыть графОткрыть конфигурациюЦели касания не меньше 44Каждая цель на 390 не меньше 44 на 44, главное действие 48высотой. Если значок меньше, область касания дорисованавокруг него (пунктир на образце).Между соседними целями не меньше 8 px. Опасное действиене вплотную к обычному.Вкладки, которые не помещаются, становятся выбором спискомвысотой 44, а не прокручиваемой строкой текста.ПовторитьПеременные12Файлы4Флаги9390: вкладкиФлаги 9320: тот же выбор спискомФильтр по имени, адресу, языкуПеренос слов и длинных кодовПереносы только по словам. Слово не разрывается по буквам ине получает дефиса.Длинный код, путь и ключ переносятся после «/», «.», «-» или«_», без добавленного дефиса. Полное значение в карточке.320 и 390: текст по словамСлишком много запросов.Повторите через 30 секундАудитора назначает только другойАудитор.src/payments/checkout/new_payment_flow.enabled-for-all.pypayments-providerУсечение: полное значение в карточке и по фокусуКлючpayments-providerОткрытьprice-displayОткрытьПоказано 2 из 9Честные счётчикиЕсли показано не всё, сказано сколько всего: «Показано N изM». Счётчик один, внизу карточки слева.Под счётчиком одна кнопка «Показать ещё»: вторичная, 44 px.Число в счётчике, не на кнопке.Для хвоста без кнопки: «и ещё N». Списков «топ-N» безсчётчика нет.Недоступные проекты не называются и не считаются. Однанейтральная строка без числа.390: счётчик, одна кнопка, нейтральная строкаshop-apiСтатусГотово · 2 чРазмер1 840 файлов · 38 МБshop-webОшибкаСтатусОшибка индекса · вчераРазмер2 310 файлов · 54 МБПоказано 2 из 38Показать ещёПоказаны проекты, к которым у вас есть доступКадры ролей и редакций: настоящие, не копииКадр роли или редакции рисуется из таблицы возможностей этой роли, а не копией кадра Владельца. Роль и редакция названы словами в подписи под кадром. Кадры нужны только там, где экран отличается.Экран и рольЧто должно быть в кадреЧего не должно бытьНастройки проекта, ЧитательТолько просмотр: поля недоступны на изменение, причина рядом.Кнопка сохранения, веб-перехватчик, удаление.Настройки проекта, РедакторНастройки без видимости проекта, без веб-перехватчика и без удаления.Пункты Владельца, даже выключенные.Участники, Администратор без членстваТолько метаданные и действие «Добавить себя».Настройки, подключение, токены, код и находки.Карта доступа, ВладелецИстория только по своему проекту.События чужих проектов.Все проекты и системы, любая рольОдна строка: «Показаны проекты, к которым у вас есть доступ».Названия, числа и «скрыто N» для недоступных проектов.Личная и корпоративная редакцииОтдельный кадр там, где экран меняется: шапка, вход, обзор, участники,настройки, сети, компоненты.Подпись редакции как элемент интерфейса. Она только под кадром.Одно намерение, одно словоСлова из списка текстов. Во всех кадрах одно намерение зовётся одним словом.НамерениеОдно словоНе используемСоздать проект, учётную запись, командуСоздатьДобавить проект, ЗавестиВыпустить токен, ссылку, значениеВыпуститьСоздать токен, СгенерироватьОстановить токен или доступОтозватьУдалить токен, АннулироватьУбрать в корзинуУдалитьСтереть, УбратьЗабрать рольСнять рольОтозвать роль, Удалить рольДать роль или правоВыдатьНазначить, ПредоставитьДобавить человека в проектДобавитьВключить, ПригласитьСкопировать в буферСкопироватьКопировать, КопияПринять заявку или правилоПодтвердитьОдобрить, УтвердитьОтклонить заявкуОтклонитьОтказатьВыйти из диалога без действияОтменаНазад, ОтказатьсяОткрыть строку, объект, разделОткрытьПерейти, Подробнее, ПросмотрПовторить неудавшийся запросПовторитьПопробовать снова, Ещё разСохранить формуСохранитьПрименитьПоказать скрытое значениеПоказатьПросмотретьСкачать файлСкачатьЭкспортБез пометок дизайнера и без тиреПометки дизайнера не попадают в интерфейс: номера экранов, вопросы к заказчику, число нажатий,шаги сценария, имена ролей и редакций как подписи элементов, описание приёмов.Они живут под кадром, в README или в слое аннотаций. Ссылка на другой экран в интерфейсеназывается человеческими словами: «Открыть граф».Тире не знак препинания в строках интерфейса. Вместо него двоеточие, точка или запятая. То же вподписях листов.Обзор проекта, 1440, светлая, ВладелецОбзорОбновить индексГотово · 2 чПодпись кадра стоит снаружи и называетэкран, ширину, тему и роль. Внутри кадратолько то, что увидит человек.Прочие правила экрановОшибка ссылки или кода входа, когда повторить нельзя: плашка над формой, поля убраны, вместокнопки действие «Ко входу». Ошибка в поле: под полем, кнопка на месте.Пустое состояние входа: поля пустые, ошибка только у незаполненного поля и со значком.Конфигурация: один шаблон. Общая шапка, заголовок, под ним сегмент «Переменные», «Файлы»,«Флаги» со счётчиками. Содержимое меняется, рамка нет.Ответ «почему такой доступ» объяснение, не проблема: без янтарной плашки, источники текстом, обестроки читаются.Метрики одной строкой чисел с подписями обычным регистром. Чипы обычным регистром. Готовыйиндекс строкой «Готово · 2 ч».Состояние защиты маршрута берётся из одной таблицы данных: граф, список, карточка и обзорпоказывают одно и то же.Подпись «локально» стоит в одном месте каркаса. Подписи редакции под кадром.