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

Материал из Artem Aleksashkin's Wiki
Перейти к навигации Перейти к поиску
 
(не показано 30 промежуточных версий этого же участника)
Строка 40: Строка 40:
* Tree (comments, folders)
* Tree (comments, folders)
* Files (Icons, List, Table)
* Files (Icons, List, Table)
* Side panels (menu, top, right, bottom, left)
* Panel
* Start menu
* Notifications
* Header / Footer
* Unlimited Scroll
* Pinterest images
* Bulk
** Creation
** Edit
*** Multiple value
*** Change value +/-/*/div
** Delete
** Restore


= Learn & Docs =
= Learn & Docs =
Строка 101: Строка 115:
* [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>
<pre>
Строка 135: Строка 150:
* 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 =
Строка 144: Строка 163:
* 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 =
Строка 175: Строка 202:
* https://html5boilerplate.com/
* https://html5boilerplate.com/
* https://mdbootstrap.com/
* https://mdbootstrap.com/
* https://jdan.github.io/98.css/
* https://fusetheme.com/
* https://eui.elastic.co/


= favicon =
= favicon =
Строка 188: Строка 218:
* 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 =
Строка 195: Строка 235:
** 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
** 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/
Строка 201: Строка 242:
* https://www.dafont.com/
* https://www.dafont.com/
* https://www.urbanfonts.com/free-fonts.htm
* https://www.urbanfonts.com/free-fonts.htm
* https://www.fontshare.com/
* https://www.freefaces.gallery/
* https://www.dafont.com/
* https://velvetyne.fr/
* https://dirtylinestudio.com/
* https://schultzschultz.com/tools/
= Patterns =
* https://patternico.com/
* https://www.canva.com/features/pattern-generator/
* https://www.freepik.com/free-photos-vectors/background-pattern
* https://unsplash.com/s/photos/pattern-background
* https://heropatterns.com/
* https://pixabay.com/vectors/search/pattern/
* https://www.pexels.com/search/pattern%20background/


= WYSIWYG editors =
= WYSIWYG editors =
Строка 211: Строка 268:
* 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/
* https://draftjs.org/
* https://trix-editor.org/
* https://prosemirror.net/
* https://codemirror.net/
* https://habr.com/ru/companies/oleg-bunin/articles/350252/


= Landing page editors =
= Landing page editors =
Строка 289: Строка 352:
* 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/
** https://www.trading view.com/


= Maps =
= Maps =
Строка 356: Строка 425:
* 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 =
Строка 409: Строка 485:
* http://marklodato.github.io/js-boxdrawing/
* http://marklodato.github.io/js-boxdrawing/
* https://patorjk.com/software/taag/
* https://patorjk.com/software/taag/
* https://www.asciiart.eu/

Текущая версия от 19:34, 4 апреля 2025

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

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
  • Bulk
    • Creation
    • Edit
      • Multiple value
      • Change value +/-/*/div
    • Delete
    • Restore

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

Patterns

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=3644