Интерфейсы пользователя: различия между версиями

Материал из Artem Aleksashkin's Wiki
Перейти к навигации Перейти к поиску
 
(не показана 41 промежуточная версия этого же участника)
Строка 2: Строка 2:


[[Файл:Interface.jpg|400px]]
[[Файл:Interface.jpg|400px]]
= Design =
== Colors ==
* [https://www.youtube.com/watch?v=oAAacfCfRaA Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ]
* [https://www.youtube.com/watch?v=uRR5V-6-HTM ТЕОРИЯ ЦВЕТА В ВЕБ-ДИЗАЙНЕ | ЦВЕТОВОЙ КРУГ]
* [https://www.youtube.com/watch?v=s5EnCKIDg80 ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА]
== Fonts ==
* [https://www.youtube.com/watch?v=1dSjHlQTzw8 КАК ВЫБРАТЬ ПРАВИЛЬНЫЙ ШРИФТ? правила хорошей типографики]
== Logos ==
* https://logo.com/
* https://www.brandcrowd.com/logo-maker
* https://www.designhill.com/tools/logo-maker
== Icons ==
== Spacings ==
== Workflows ==
* Web as
** Documents (wiki)
** Spreadsheets (tables, numbers..)
** Presentations (landings)
* Selectors
* Tabs
* Wizard
* Split screen (Norton Commander)
* Windowed
* Dashboards
* Check engine
* Tree (comments, folders)
* Files (Icons, List, Table)
* Side panels (menu, top, right, bottom, left)
* Panel
* Start menu
* Notifications
* Header / Footer
* Unlimited Scroll
* Pinterest images


= Learn & Docs =
= Learn & Docs =
Строка 18: Строка 63:
* https://chromium.github.io/octane/
* https://chromium.github.io/octane/
* https://webkit.org/perf/sunspider/sunspider.html
* https://webkit.org/perf/sunspider/sunspider.html
* https://webglsamples.org/aquarium/aquarium.html


= Node.js =
= Node.js =
<pre>
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2
</pre>
<pre>
<pre>
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
Строка 58: Строка 108:
* [https://www.youtube.com/watch?v=ydZK53Vmzf0 The easy way to handle ASYNC PIPE errors reactively]
* [https://www.youtube.com/watch?v=ydZK53Vmzf0 The easy way to handle ASYNC PIPE errors reactively]
* [https://buddy.works/tutorials/building-web-components-with-angular Web Standalone Components]
* [https://buddy.works/tutorials/building-web-components-with-angular Web Standalone Components]
* [https://mokkapps.de/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments How To Build An Angular App Once And Deploy It To Multiple Environments]


<pre>
ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select
</pre>
== Libs ==
== Libs ==


Строка 79: Строка 143:
* https://aurelia.io/
* https://aurelia.io/
* https://tochoromero.github.io/aurelia-bootstrap/
* https://tochoromero.github.io/aurelia-bootstrap/
= WebPack =
* https://www.youtube.com/watch?v=GNEyY70Zl30


= Typography Grid =
= Typography Grid =
Строка 88: Строка 156:
* http://grid.mindplay.dk
* http://grid.mindplay.dk
* https://www.gridlover.net/try
* https://www.gridlover.net/try
= CSS tricks =
* https://cssgradient.io/
* https://animate.style/
* https://animista.net/
* https://css-tricks.com/almanac/properties/f/filter/
* [https://www.youtube.com/watch?v=ezP4kbOvs_E Learn CSS Border Animations in 6 Minutes]


= CSS processors =
= CSS processors =
Строка 104: Строка 180:
** https://www.creative-tim.com/bootstrap-themes/free
** https://www.creative-tim.com/bootstrap-themes/free
** https://themewagon.com/theme-price/free/
** https://themewagon.com/theme-price/free/
* https://bulma.io/
* https://get.foundation/
* https://ant.design/
* https://ant.design/
* https://material.io/design/
* https://material.io/design/
Строка 117: Строка 195:
* https://html5boilerplate.com/
* https://html5boilerplate.com/
* https://mdbootstrap.com/
* https://mdbootstrap.com/
* https://jdan.github.io/98.css/


= favicon =
= favicon =
Строка 130: Строка 209:
* https://thenounproject.com/
* https://thenounproject.com/
* https://useiconic.com/
* https://useiconic.com/
* https://feathericons.com/
* https://primer.style/foundations/icons/
* https://github.com/danklammer/bytesize-icons
* https://coreui.io/icons/
* https://fonts.google.com/icons
* http://demo.amitjakhu.com/dripicons/
* https://ikons.piotrkwiatkowski.co.uk/
* https://icons8.com/
* https://icofont.com/
* https://tabler.io/icons


= Fonts =
= Fonts =
Строка 136: Строка 225:
** sudo npm install -g goog-webfont-dl
** sudo npm install -g goog-webfont-dl
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
* https://fonts.adobe.com/fonts
* https://www.1001freefonts.com/
* https://www.1001freefonts.com/
* https://www.myfonts.com/
* https://www.myfonts.com/
Строка 152: Строка 243:
* https://www.axsoft.co/?ref=producthunt
* https://www.axsoft.co/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://quilljs.com/


= Landing page editors =
= Landing page editors =
Строка 230: Строка 322:
* https://apexcharts.com/
* https://apexcharts.com/
* https://visjs.org/
* https://visjs.org/
* Finance
** https://d3fc.io/
** https://techanjs.org/
** https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html
** https://colineberhardt.github.io/yahoo-finance-d3fc/


= Maps =
= Maps =
Строка 297: Строка 394:
* https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
* https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
* https://threejs.org/examples/
* https://threejs.org/examples/
= Glass Effect =
* https://wpdean.com/css-glassmorphism/
* https://hype4.academy/tools/glassmorphism-generator
* https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
* https://css.glass/


= Globe =
= Globe =

Текущая версия от 02:45, 18 ноября 2024

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

Interface.jpg

Design

Colors

Fonts

Logos

Icons

Spacings

Workflows

  • Web as
    • Documents (wiki)
    • Spreadsheets (tables, numbers..)
    • Presentations (landings)
  • Selectors
  • Tabs
  • Wizard
  • Split screen (Norton Commander)
  • Windowed
  • Dashboards
  • Check engine
  • Tree (comments, folders)
  • Files (Icons, List, Table)
  • Side panels (menu, top, right, bottom, left)
  • Panel
  • Start menu
  • Notifications
  • Header / Footer
  • Unlimited Scroll
  • Pinterest images

Learn & Docs

Загрузить видео
YouTube

Browser tests

Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i

jQuery

Angular

sudo npm install -g @angular/cli

ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select

Libs

Vue.js

ReactJS

Aurelia

WebPack

Typography Grid

CSS tricks

CSS processors

Design Systems

favicon

Icons

Fonts

WYSIWYG editors

What You See Is What You Get

Landing page editors

Tables & Spreadsheets

Music Notes & ABC notaton

Math & formulas

Grids & Blocks

Croppers

Charts & Graphs

Maps

Image Viewers & Sliders

Players

См. также: Видео и аудио кодирование

Pinterest blocks

Super Select

Visual Effects

Parallax, dots, globes, etc..

Glass Effect

Globe

3D & WebGL

Custom Scrollbars

Date & Time pickers

Emoji

Drawers

ASCII

Источник — http://wiki.aleksashkin.net/index.php?title=Интерфейсы_пользователя&oldid=3279