huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise September 2022 mobile UX articles
Build and deploy / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 13:58:05 +03:00
parent a7c2991b49
commit 36c4810179
7 changed files with 432 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2022/mobile-ux-2022-contract.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="560" viewBox="0 0 960 560" role="img" aria-labelledby="title desc">
<title id="title">Граница контракта мобильного маршрута</title>
<desc id="desc">Четыре слоя: input environment, component route, product decision и research. Учебная модель получает заданный профиль и проверяет только маршрут компонента.</desc>
<rect width="960" height="560" fill="#111827" rx="24"/>
<text x="54" y="68" fill="#f9fafb" font-family="Arial, sans-serif" font-size="30" font-weight="700">Не склеивать среду, маршрут и исследование</text>
<g font-family="Arial, sans-serif" font-size="18">
<rect x="55" y="120" width="360" height="104" rx="16" fill="#172554" stroke="#60a5fa" stroke-width="3"/><text x="80" y="160" fill="#bfdbfe" font-weight="700">1. Input environment</text><text x="80" y="194" fill="#fff">pointer / hover capability</text>
<rect x="545" y="120" width="360" height="104" rx="16" fill="#164e63" stroke="#67e8f9" stroke-width="3"/><text x="570" y="160" fill="#a5f3fc" font-weight="700">2. Component route</text><text x="570" y="194" fill="#fff">summary → details → confirm</text>
<rect x="55" y="330" width="360" height="104" rx="16" fill="#365314" stroke="#bef264" stroke-width="3"/><text x="80" y="370" fill="#d9f99d" font-weight="700">3. Product decision</text><text x="80" y="404" fill="#fff">main action ≠ hover-only</text>
<rect x="545" y="330" width="360" height="104" rx="16" fill="#4c1d95" stroke="#c4b5fd" stroke-width="3"/><text x="570" y="370" fill="#ddd6fe" font-weight="700">4. Research</text><text x="570" y="404" fill="#fff">отдельный метод и данные</text>
<path d="M415 172h118m-20-16 20 16-20 16M720 224v94m-16-20 16 20 16-20M415 382h118m-20-16 20 16-20 16" fill="none" stroke="#94a3b8" stroke-width="4"/>
<rect x="265" y="468" width="430" height="48" rx="12" fill="#0f172a" stroke="#fbbf24" stroke-width="2"/><text x="292" y="499" fill="#fde68a">fixture: profile задан вручную; platform/usability не измерены</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

web/public/assets/editorial/2022/mobile-ux-2022-diagnosis-rollback.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="560" viewBox="0 0 960 560" role="img" aria-labelledby="title desc">
<title id="title">Диагностика скрытого действия и граница отката</title>
<desc id="desc">Наблюдение о скрытом действии проверяется в DOM и контракте. Hover-only блокируется для учебного профиля; явный control идёт в отдельную browser-проверку. При неизвестности сохраняется текущий путь.</desc>
<rect width="960" height="560" fill="#0b1220" rx="24"/>
<text x="52" y="66" fill="#f8fafc" font-family="Arial, sans-serif" font-size="30" font-weight="700">Скрытое действие: сначала факт, затем исправление</text>
<g font-family="Arial, sans-serif" font-size="18">
<rect x="54" y="130" width="250" height="92" rx="16" fill="#3f1d2e" stroke="#fb7185" stroke-width="3"/><text x="78" y="169" fill="#fecdd3" font-weight="700">Симптом</text><text x="78" y="199" fill="#fff">нет видимого confirm</text>
<rect x="356" y="130" width="250" height="92" rx="16" fill="#1e293b" stroke="#94a3b8" stroke-width="3"/><text x="380" y="169" fill="#cbd5e1" font-weight="700">Проверить</text><text x="380" y="199" fill="#fff">DOM + route contract</text>
<rect x="658" y="130" width="250" height="92" rx="16" fill="#164e63" stroke="#67e8f9" stroke-width="3"/><text x="682" y="169" fill="#a5f3fc" font-weight="700">Действие</text><text x="682" y="199" fill="#fff">явный labelled control</text>
<path d="M304 176h42m-13-13 13 13-13 13M606 176h42m-13-13 13 13-13 13" fill="none" stroke="#94a3b8" stroke-width="4"/>
<rect x="105" y="325" width="300" height="100" rx="16" fill="#4c1d95" stroke="#c4b5fd" stroke-width="3"/><text x="130" y="365" fill="#ddd6fe" font-weight="700">hover-only?</text><text x="130" y="398" fill="#fff">teaching profile blocks route</text>
<rect x="555" y="325" width="300" height="100" rx="16" fill="#365314" stroke="#bef264" stroke-width="3"/><text x="580" y="365" fill="#d9f99d" font-weight="700">явный control</text><text x="580" y="398" fill="#fff">отдельная browser-check</text>
<path d="M455 222v72c0 25-32 31-49 31M505 222v72c0 25 33 31 49 31" fill="none" stroke="#94a3b8" stroke-width="4"/>
<rect x="286" y="472" width="388" height="46" rx="12" fill="#3f1d2e" stroke="#fb7185" stroke-width="2"/><text x="316" y="502" fill="#fecdd3">неизвестность → rollback: current path</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

web/public/assets/editorial/2022/mobile-ux-2022-route.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="560" viewBox="0 0 960 560" role="img" aria-labelledby="title desc">
<title id="title">Учебный маршрут мобильного действия</title>
<desc id="desc">Три шага summary, details и confirm образуют явный маршрут. Ветка hover-only на профиле narrow, coarse, unavailable блокируется и сохраняет текущий путь.</desc>
<rect width="960" height="560" fill="#0f172a" rx="24"/>
<text x="56" y="70" fill="#f8fafc" font-family="Arial, sans-serif" font-size="30" font-weight="700">Один путь: context → details → action</text>
<text x="56" y="105" fill="#cbd5e1" font-family="Arial, sans-serif" font-size="19">Учебный contract: не рендер браузера и не usability-тест</text>
<g font-family="Arial, sans-serif">
<rect x="56" y="180" width="220" height="150" rx="18" fill="#1e293b" stroke="#38bdf8" stroke-width="3"/>
<text x="82" y="225" fill="#7dd3fc" font-size="18" font-weight="700">01 · summary</text><text x="82" y="262" fill="#fff" font-size="24">Контекст</text><text x="82" y="294" fill="#cbd5e1" font-size="17">что подтверждаем</text>
<rect x="370" y="180" width="220" height="150" rx="18" fill="#1e293b" stroke="#38bdf8" stroke-width="3"/>
<text x="396" y="225" fill="#7dd3fc" font-size="18" font-weight="700">02 · details</text><text x="396" y="262" fill="#fff" font-size="24">Проверить</text><text x="396" y="294" fill="#cbd5e1" font-size="17">данные перед действием</text>
<rect x="684" y="180" width="220" height="150" rx="18" fill="#0c4a6e" stroke="#67e8f9" stroke-width="3"/>
<text x="710" y="225" fill="#a5f3fc" font-size="18" font-weight="700">03 · confirm</text><text x="710" y="262" fill="#fff" font-size="24">Продолжить</text><text x="710" y="294" fill="#cffafe" font-size="17">явный labelled control</text>
<path d="M280 255h76m-16-16 16 16-16 16M594 255h76m-16-16 16 16-16 16" stroke="#7dd3fc" stroke-width="5" fill="none"/>
<rect x="56" y="405" width="540" height="96" rx="16" fill="#3f1d2e" stroke="#fb7185" stroke-width="3"/>
<text x="82" y="445" fill="#fecdd3" font-size="20" font-weight="700">hover-only + narrow/coarse/unavailable</text><text x="82" y="478" fill="#fff" font-size="19">blocked → rollback: keep-current-path</text>
<path d="M694 410c-25 44-52 62-92 70" stroke="#fb7185" stroke-width="5" fill="none"/><path d="M612 461l-15 19 24 1" fill="none" stroke="#fb7185" stroke-width="5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB