رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

نمودارهای مفهومی

وضعیت: در حال بازبینی

نمودار مفهومی ایده را نشان می‌دهد، نه عدد را: چطور یک مساله شکسته می‌شود، گزینه‌ها کجا می‌نشینند، کار به چه ترتیبی جلو می‌رود. این صفحه قواعد فصل نمودار برندبوک برای چارچوب‌ها را با کامپوننت‌های وب اجرا می‌کند؛ هر کدام قالب اسلاید هم‌نامی در قالب اسلاید دارد.

قاعده‌های مشترک (از برندبوک)

Section titled “قاعده‌های مشترک (از برندبوک)”
  • مجاز: ماتریس ۲×۲ (هر خانه یک اقدام)، نقشهٔ جایگاه، درخت مساله (MECE)، نقشهٔ فرایند و swimlane، بوم‌های کسب‌وکار، فرایند و چرخه.
  • جهت: فرایند و چرخه از راست به چپ؛ گام فعلی با accent.
  • رنگ: خانوادهٔ Cyan برای ساختار (خط‌ها Cyan 40، حلقه‌ها Cyan 20)، ink برای هسته یا ریشه، و accent فقط برای جایی که باید دیده شود.
  • ممنوع: SmartArt، پیکان سه‌بعدی، شِورون‌های رنگین‌کمانی، سایه و گرادیان.
  • چارچوب دیگران نام خودش را نگه می‌دارد و منبعش نوشته می‌شود: «ماتریس BCG (Boston Consulting Group)».
  • عنوان نتیجه را می‌گوید، مثل نمودارهای داده.

ماتریس ۲×۲

Section titled “ماتریس ۲×۲”

برای اولویت‌بندی و جایگاه. هر خانه یک اقدام است، نه یک برچسب؛ خانه‌ای که باید اول دیده شود (بالا و راست، مثل اسلاید P04، جایی که هر دو محور بیشترند) accent-subtle می‌گیرد. محور افقی از چپ به راست زیاد می‌شود و محور عمودی از پایین به بالا؛ برچسب محورها پیکان دارند.

↑
فوریت
برنامه‌ریزی کنیدفوری اما کم‌اثر: به مالک مشخص بسپارید.
همین حالا اقدام کنیدفوری و پراثر: سه پروژهٔ اول نقشهٔ راه.
کنار بگذاریدنه فوری، نه پراثر.
سرمایه‌گذاری کنیدپراثر اما نه فوری: توانمندی‌های سال دوم.
→ اثر بر سود
<figure class="hq-matrix" style="inline-size:100%">
  <div class="hq-matrix__y">↑<br />فوریت</div>
  <div class="hq-matrix__grid">
    <div class="hq-matrix__cell"><strong>برنامه‌ریزی کنید</strong><span>فوری اما کم‌اثر: به مالک مشخص بسپارید.</span></div>
    <div class="hq-matrix__cell hq-matrix__cell--focus"><strong>همین حالا اقدام کنید</strong><span>فوری و پراثر: سه پروژهٔ اول نقشهٔ راه.</span></div>
    <div class="hq-matrix__cell"><strong>کنار بگذارید</strong><span>نه فوری، نه پراثر.</span></div>
    <div class="hq-matrix__cell"><strong>سرمایه‌گذاری کنید</strong><span>پراثر اما نه فوری: توانمندی‌های سال دوم.</span></div>
  </div>
  <div class="hq-matrix__x">→ اثر بر سود</div>
</figure>

درخت مساله

Section titled “درخت مساله”

برای شکستن یک پرسش به اجزای MECE (بی‌هم‌پوشانی و کامل). ریشه پرسش است، با ink؛ شاخه‌ای که فرضیهٔ اصلی است accent می‌گیرد. ریشه در راست و شاخه‌ها به سمت چپ باز می‌شوند. بیشتر از سه سطح در یک صفحه نه.

چرا حاشیهٔ سود ۵ واحد کم شده؟
  • درآمد هر واحد کم شده
    • تخفیف بیشتر
    • ترکیب محصول ارزان‌تر
  • هزینهٔ هر واحد زیاد شده
    • مواد اولیه
    • دستمزد و سربار
<figure class="hq-tree" style="inline-size:100%;overflow-x:auto">
  <div class="hq-tree__node hq-tree__node--root">چرا حاشیهٔ سود ۵ واحد کم شده؟</div>
  <ul>
    <li><div class="hq-tree__node">درآمد هر واحد کم شده</div>
      <ul>
        <li><div class="hq-tree__node">تخفیف بیشتر</div></li>
        <li><div class="hq-tree__node">ترکیب محصول ارزان‌تر</div></li>
      </ul>
    </li>
    <li><div class="hq-tree__node hq-tree__node--focus">هزینهٔ هر واحد زیاد شده</div>
      <ul>
        <li><div class="hq-tree__node hq-tree__node--focus">مواد اولیه</div></li>
        <li><div class="hq-tree__node">دستمزد و سربار</div></li>
      </ul>
    </li>
  </ul>
</figure>

فرایند

Section titled “فرایند”

گام‌های پشت سر هم، از راست به چپ، با شِورون‌های تک‌رنگ از Cyan 20 تا Cyan 80 (اسلاید P02). بیشتر از شش گام نه؛ در موبایل زیر هم می‌روند.

  1. کشفمساله و داده
  2. طراحیگزینه‌ها و انتخاب
  3. تحویلنقشهٔ راه
  4. استقراراجرا و سنجش
<ol class="hq-process" style="inline-size:100%">
  <li class="hq-process__step"><strong>کشف</strong><span>مساله و داده</span></li>
  <li class="hq-process__step"><strong>طراحی</strong><span>گزینه‌ها و انتخاب</span></li>
  <li class="hq-process__step"><strong>تحویل</strong><span>نقشهٔ راه</span></li>
  <li class="hq-process__step"><strong>استقرار</strong><span>اجرا و سنجش</span></li>
</ol>

خط زمانی

Section titled “خط زمانی”

برای برنامهٔ پروژه و نقطه‌های عطف (اسلاید P01). گام‌های گذشته Cyan 40 پر، گام فعلی accent، گام‌های آینده سفید با خط Cyan 40. برای برنامهٔ دقیق با هم‌پوشانی، گانت درست است.

  1. مهرشروعجلسهٔ آغاز
  2. آبانتشخیص۲۰ مصاحبه
  3. آذرطراحیکارگاه گزینه‌ها
  4. دینقشهٔ راهتایید هیئت‌مدیره
  5. بهمناجراسه پروژهٔ اول
<ol class="hq-timeline" style="--hq-steps:5;inline-size:100%">
  <li class="hq-timeline__item hq-timeline__item--done"><span class="hq-timeline__when">مهر</span><strong>شروع</strong><span>جلسهٔ آغاز</span></li>
  <li class="hq-timeline__item hq-timeline__item--done"><span class="hq-timeline__when">آبان</span><strong>تشخیص</strong><span>۲۰ مصاحبه</span></li>
  <li class="hq-timeline__item hq-timeline__item--current"><span class="hq-timeline__when">آذر</span><strong>طراحی</strong><span>کارگاه گزینه‌ها</span></li>
  <li class="hq-timeline__item"><span class="hq-timeline__when">دی</span><strong>نقشهٔ راه</strong><span>تایید هیئت‌مدیره</span></li>
  <li class="hq-timeline__item"><span class="hq-timeline__when">بهمن</span><strong>اجرا</strong><span>سه پروژهٔ اول</span></li>
</ol>

نمودار هسته‌ای

Section titled “نمودار هسته‌ای”

برای یک مفهوم مرکزی و اجزای هم‌ارز آن (اسلاید P07): هسته ink، اجزا سفید با خط Cyan 40، حلقهٔ پیوند Cyan 20. بین چهار تا هشت جزء؛ ترتیب از بالا و در جهت ساعت.

  • مشتری
  • محصول
  • قیمت
  • کانال
  • خدمت
  • داده
  • تیم
<ul class="hq-hub" style="--_n:6">
  <li class="hq-hub__core">مشتری</li>
  <li class="hq-hub__part" style="--i:0">محصول</li>
  <li class="hq-hub__part" style="--i:1">قیمت</li>
  <li class="hq-hub__part" style="--i:2">کانال</li>
  <li class="hq-hub__part" style="--i:3">خدمت</li>
  <li class="hq-hub__part" style="--i:4">داده</li>
  <li class="hq-hub__part" style="--i:5">تیم</li>
</ul>
انجام بدهشورون‌های تک‌رنگ Cyan با گام فعلی در accent.
انجام ندهSmartArt با پیکان‌های سه‌بعدی و هر گام یک رنگ.

کد

Section titled “کد”
کلاس توضیح
hq-matrix ماتریس؛ __y و __x برچسب محورها، __cell--focus خانهٔ برجسته
hq-tree درخت؛ ul تودرتو، __node--root و __node--focus
hq-process فرایند؛ ol با __step
hq-timeline خط زمانی؛ --hq-steps تعداد گام‌ها، __item--done و __item--current
hq-hub هسته‌ای؛ --_n تعداد اجزا و --i جای هر جزء