Faragiri

آموزش طراحی رابط کاربریطراحی

چیدمان برمی‌گردد اما عدد و نام لاتین برنمی‌گردند، و رابطی که فقط آینه شده همان است که ساعت و شماره‌اش هر بار جای دیگری می‌نشینند.

۵بخش
۵دقیقه خواندن
۲عمق

هجده کارت صندلی

مسیر به صفحه اول برمی‌گردد، و این اشتباه نیست

با پای برگشتش کشیده شده، چون مسیری که مستقیم از یک فایل خالی به کتابخانه کامپوننت می‌رود همان است که کیتی می‌سازد که کسی نمی‌تواند توضیحش بدهد.

  1. ۰۱صفحه یک، با دستهر تکه یک مستطیل. درست به نظر می‌رسد و دوباره استفاده نمی‌شود.
  2. ۰۲صفحه دو، باز هم با دستهمان دکمه را دوباره می‌کشید، و کمی متفاوت
  3. ۰۳برگشت به صفحه یکهر دو دکمه را با یک کامپوننت عوض کنید. این همان پایی است که رد می‌شود.
  4. ۰۴حالت‌ها، روی خود کامپوننتعادی، روی آن، فوکوس، غیرفعال، به شکل واریانت و نه یادداشت
  5. ۰۵صفحه سه، و صفحه هجدهمهیچ هزینه‌ای نداشتند، و قالب قیمت در یک جا عوض می‌شود

دو ایستگاه اول دوباره‌کاری نیستند، و مسیری که بدون آن‌ها کشیده شود این را می‌رساند که هستند. همان دو ایستگاه‌اند که ایستگاه سوم را بدیهی می‌کنند به جای نظری.

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

نمونه‌اش را می‌شود در ده ثانیه ساخت. ساعت حرکت را «۰۶:۳۰ - ۱۴:۰۰» بنویسید و در یک خط راست‌به‌چپ برعکس دیده می‌شود، چون خط تیره میان دو عدد جهتش را از پاراگراف می‌گیرد نه از عددها. بازه را با کلمه بنویسید، نه با خط تیره، یا هر مقدار را جدا کنید و unicode-bidi را روی plaintext بگذارید، که همین سایت روی هر عددی که داخل نمودارهایش چاپ می‌شود گذاشته است تا هر کدام جهتش را از حرف اول خودش بگیرد.

یک کامپوننت چهار تکه دارد و سه‌تایش نقاشی نیست

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

چهار قاعده، با عددهایشان

اول چیدمان. چیدمان خودکار افقی، فاصله ۸، حاشیه ۱۲ و ۱۶، اندازه به محتوا: دکمه ادامه همسفر بلندی‌اش را از هیچ عددی نمی‌گیرد، از دوازده پیکسل بالای یک خط بیست پیکسلی و دوازده پیکسل زیرش می‌گیرد، و اگر متنش عوض شود بلندی خودش را دوباره حساب می‌کند. تفاوتش با کارت همان صندلی این است که برای دکمه اندازه به محتوا، برای کارت پر کردن ظرف، چون دکمه به اندازه کلمه‌اش است و کارت به اندازه ستونی که در آن نشسته.

دوم حالت‌ها. هر چهار حالت را بکشید: عادی، روی آن، فوکوس، غیرفعال، به شکل واریانت و نه یادداشت کنار فریم. حالت فوکوس همان است که همیشه جا می‌ماند و همان است که بدون موس تنها راه فهمیدن جای شماست: حلقه فوکوس ۲ پیکسل با ۲ پیکسل فاصله، بیرون از خود دکمه، تا روی زمینه تیره و روشن هر دو دیده شود.

سوم اندازه‌ای که انگشت می‌خواهد: ۴۴ در ۴۴ برای انگشت، ۲۴ در ۲۴ کف مطلق. ناحیه لمسی می‌تواند بزرگ‌تر از چیزی باشد که دیده می‌شود، و روی صفحه انتخاب صندلی همین یک تصمیم شش شکایت را برداشت: مربع‌های صندلی روی طرح بیست و هشت پیکسل بودند و ناحیه لمسشان چهل و چهار شد بی‌آنکه چیزی روی صفحه بزرگ‌تر شود. چهارم نام: توکن را به نام کارش بنامید، نه به نام رنگش. توکنی به اسم آبی وقتی پوسته تیره اضافه شود دروغ می‌شود؛ توکنی به اسم surface-raised همان کار را می‌کند و اسمش درست می‌ماند. اسم توکن‌ها لاتین می‌ماند چون کد است؛ برچسب‌ها فارسی‌اند چون متن‌اند، و کیت مشترک، و قاعده‌های به کار بردنش همین دو ورق را از هم جدا نگه می‌دارد.

جایی که کار می‌ایستد: بوم یاد گرفته می‌شود، سامانه نه

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

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

بلندترین رشته فارسی را داخلش بچسبانید

دکمه‌ای که اندازه‌اش از محتوا می‌آید فقط به اندازه بدترین محتوایش امن است. در فارسی این آزمون سخت‌تر است چون کوتاه‌نویسی جواب نمی‌دهد: انگلیسی «Confirm order» را به «Confirm» کوتاه می‌کند و فارسی «ثبت سفارش» را به «ثبت» کوتاه می‌کند و معنی عوض می‌شود. پس بلندترین چیزی را که واقعا در پایگاه داده هست بردارید و داخل کامپوننت بگذارید، نه یک نمونه سه کلمه‌ای. اگر شکست، همان‌جا شکسته و نه روی گوشی کسی. یک رابط، هر اندازه صفحه همین آزمون است در سه عرض به جای یکی.

یک دکمه

چهار تکه، و سه‌تایشان در بیشتر کیت‌ها نیستند

کامپوننت یک نقاشی بایگانی‌شده نیست. یک نقاشی است به اضافه سه چیزی که تعیین می‌کنند وقتی فایل را ماشین باز کرد چه اتفاقی بیفتد.

  • قاعده چیدمانچیدمان خودکار افقی، فاصله ۸، حاشیه ۱۲ و ۱۶، اندازه به محتوا
  • حالت‌هاعادی، روی آن، فوکوس و غیرفعال، کشیده‌شده به شکل واریانت نه توضیح‌داده‌شده
  • مقدارهایی که می‌خواندتوکن‌های نام‌دار، تا پوسته تیره معنی surface-raised را عوض کند و نه چیز دیگری را
  • نامی که زیرش بایگانی می‌شودکاری که می‌کند، با همان کلمه‌ای که تیم موقع درخواست به کار می‌برد

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

دو بار با دست بسازید، بعد یک بار درست

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

با چه چیزی، و از ایران چه چیزی باز می‌شود

فیگما از حدود ۲۰۱۹ پیش‌فرض این کار است و جای Sketch را گرفت که فقط روی مک اجرا می‌شد و یک نفر را داخل فایل راه می‌داد. نسخه رایگانش برای تمام آنچه اینجا آمد کافی است و رسیدنش از ایران واسطه می‌خواهد. راست‌به‌چپ در آن یک تنظیم روی متن است و نه یک حالت برای کل فایل، پس چیدمان را خودتان باید برگردانید؛ این را از قبل بدانید تا نصف روز دنبال گزینه‌ای که وجود ندارد نگردید.

Penpot متن‌باز است، روی سرور خودتان بالا می‌آید و از ایران بدون واسطه باز می‌شود، و چون فایل‌هایش SVG است خروجی‌اش را هر کسی می‌تواند بخواند. برای بخش‌هایی که باید در مرورگر آزموده شوند، ابزار توسعه‌دهنده مرورگر تنها جایی است که رفتار واقعی direction و bidi را نشان می‌دهد؛ فایل طراحی این را نشان نمی‌دهد چون خودش موتور متن مرورگر را ندارد. نرم‌افزارها، و آن بخش‌هایی که واقعا استفاده می‌شوند این تقسیم کار را جدی‌تر می‌گیرد.

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

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

کنار این

بالای این