У меня есть веб-приложение, которое включает файловый браузер. У меня есть небольшая база данных, которая связывает значок FontAwesome с различными типами контента (например, изображениями, файлами word/lowriter, файлами excel/localc, PDF, обычным текстом, архивами и т. д.). Я копирую/вставляю сюда для полноты (это TypeScript для использования с React-FontAwesome):

const iconClasses: { [key: string]: IconDefinition } = {
      // Media
      "image": faFileImage,
      "audio": faFileAudio,
      "video": faFileVideo,
      // Documents
      "application/pdf": faFilePdf,
      "application/msword": faFileWord,
      "application/vnd.ms-word": faFileWord,
      "application/vnd.oasis.opendocument.text": faFileWord,
      "application/vnd.openxmlformats-officedocument.wordprocessingml":
      faFileWord,
      "application/vnd.ms-excel": faFileExcel,
      "application/vnd.openxmlformats-officedocument.spreadsheetml":
      faFileExcel,
      "application/vnd.oasis.opendocument.spreadsheet": faFileExcel,
      "application/vnd.ms-powerpoint": faFilePowerpoint,
      "application/vnd.openxmlformats-officedocument.presentationml":
      faFilePowerpoint,
      "application/vnd.oasis.opendocument.presentation": faFilePowerpoint,
      "text/plain": faFileAlt,
      "text/html": faFileCode,
      "application/json": faFileCode,
      // Archives
      "application/gzip": faFileArchive,
      "application/zip": faFileArchive
    };
    
    export function getFontAwesomeIconFromMIME(mimeType: string): IconDefinition {
      // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
    
      const candidate = Object.entries(iconClasses).find(([k]) =>
        mimeType.startsWith(k)
      )
    
      if (candidate === undefined) {
        return faFile;
      } else {
        return candidate[1];
      }
    
    }

Однако эти значки серые. Я хотел бы связать «знаковый» цвет со значками (в формате RGB). Я не специалист по пользовательскому интерфейсу, но кажется, что эти цвета несколько стандартизированы. Например, значки PDF — красные, значки Word — синие, значки Excel — зеленые, архивы — желтые и т. д.

Есть ли у кого-нибудь такой список знаковых цветов?

0
RockPaperLz- Mask it or Casket 27 Апр 2021 в 01:02
Они не стандартизированы, их выбирают разработчики этих приложений. Если вы хотите сопоставить определенные типы файлов с приложениями, которым они принадлежат, вам следует просмотреть каждый из них и сделать это, но вы также найдете множество типов MIME, которые не привязаны к одному приложению, и вам придется выбрать ваши собственные цвета для тех.
 – 
musefan
21 Апр 2021 в 14:12

1 ответ

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

Как вы заметили, есть несколько популярных приложений, использующих определенные цвета. Например, Adobe использует красный цвет для значков PDF, а Microsoft использует зеленый цвет для документов Excel. Но это произвольные назначения, и они зависят от наличия проприетарных приложений с закрытым исходным кодом. Они также не работают в контексте доступности из-за определенного типа дальтонизма, который не позволяет некоторым пользователям различать такие цвета.

В качестве примера отраслевых вариаций можно привести другое популярное приложение PDF — Sumatra PDF с открытым исходным кодом. Reader использует желтый цвет для значков PDF.

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

< sizesUpdate:

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

В этом случае я бы сделал все очень просто: 1 цвет для папок и другой цвет для файлов. При выборе этих двух цветов помните о правилах доступности.

Если вы добавите произвольные цвета помимо этого, пользователю останется задаться вопросом, имеют ли цвета смысл; скорее всего, у них не будет быстрого и простого способа определить это, кроме чтения документации. Лучше, чтобы вещи были простыми, и не путать их в первую очередь.

1
RockPaperLz- Mask it or Casket 11 Май 2021 в 10:16
Как я писал в своем ответе, я не согласен с тем, что scand1sk должен позволять пользователям указывать цвет значков в файловом браузере. . Однако я согласен с вами по поводу отсутствия стандартного набора цветов.
 – 
Rory O'Kane
3 Май 2021 в 01:43
@RoryO'Kane Привет, Рори! В вашем ответе, на который вы ссылались, говорится: «Для файлового браузера, который является лишь небольшой частью веб-приложения ...», но я не вижу ничего в вопросе OP, в котором говорится, что файловый браузер является лишь небольшой частью веб-приложения. веб приложение. Фактически, это единственная часть их веб-приложения, которую они упомянули.
 – 
RockPaperLz- Mask it or Casket
3 Май 2021 в 12:09
Ну, действительно, файловый браузер — это небольшая часть приложения, и я не хочу позволять пользователям настраивать свои цвета. Это потребовало бы нескольких дней разработки, за которую мой клиент не хотел бы платить. И неуклюжее меню «Настройки», которого в настоящее время не существует как часть приложения. Что касается дальтонизма, то должна помочь сама иконка, имя файла и превью.
 – 
scand1sk
4 Май 2021 в 10:55
Да, в таком случае я бы сделал все очень просто: 1 цвет для папок и другой цвет для файлов. При выборе этих двух цветов помните о правилах доступности. Если вы добавите произвольные цвета помимо этого, пользователю придется задаться вопросом, имеют ли цвета значение, и, вероятно, у них не будет быстрого способа выяснить это.
 – 
RockPaperLz- Mask it or Casket
11 Май 2021 в 10:10