توی این مطلب قصد دارم چندتا از تجربههای عملی خودم در طراحی UI رو با شما به اشتراک بگذارم.
این‌ها تجربههای کوچیک و نکات ریزی هستن که صرفا فقط موقع کار کردن و تجربه‌ی عملی به دست میان و انقدر جزئی هستن که معمولا در دوره‌ها و مقاله‌های آموزشی بهشون اشاره‌ای نمیشه.
اما همین نکات جزئی و کوچیک در کنار هم که جمع میشن، باعث بهتر و منظم‌تر شدن کار میشن.
مطمئنا افراد حرفه‌ای و مجرب روش‌ها و سبک کاری خودشون رو دارن. اما تازه‌کارها می‌تونن از این مطلب استفاده کنن و نظم بیشتری به کارشون بدن.
پوشه‌بندی یک پروژه UI
وقتی که یه پروژه جدید رو شروع میکنم، داخل پوشه‌ای که به اسم اون پروژه میسازم، همون ابتدای کار ۳ تا پوشه میسازم. یکی برای آیکن‌ها، یکی برای تصاویری که داخل اون پروژه استفاده میکنم و یکی هم برای خروجی‌هام (png، jpg، svg و pdf) از اون پروژه.
با یه مثال پیش میرم. فرضا پروژه‌ی ما، طراحی رابط کاربری یه سایت، برای یه برند لباس، به اسم Zuha (ژوها) هست.
پوشه‌ای اصلی: Zuha
پوشه‌های داخلی: Zuha-Icons، Zuha-Exports و Zuha-Pics
بعد از شروع و پیش‌بردن پروژه ممکنه به پوشه‌های داخلی، پوشه‌های Zuha-Graphics برای وقتی که از ایلاستریشن‌ها و المان‌های گرافیکی استفاده میکنم و پوشه‌ی Zuha-Documents در صورتی که داکیومنت‌های مربوط به پروژه روی پلتفرم‌های آنلاین نباشن، نیاز بشه.
در نهایت هم بعد از لانچ شدن پروژه، پوشه‌ی Zuha-Test به جمع پوشه‌ها اضافه میشه تا نتایج و عکس‌های تست پروژه رو در اون ذخیره کنم.
نام‌گذاری آرتبردها
برای نام گذاری آرتبردها بهتره که یه فرمت یکسان برای خودتون داشته باشید، تا داخل همه‌ی پروژه‌هاتون یه روش یکسان و هماهنگ برای نام‌گذاری داشته باشید.
فرمتی که من برای خودم ساختم به این شکل هست که اول حالت مخفف اسم پروژه رو در حد دو الی سه حرف مینویسم. برای مثال ما، میشه مثلا Zu. بعد از اون، بخش کلی‌ای که صفحه بهش مربوط میشه رو مینویسم.
برای مثال وقتی دارم صفحات مختلف مربوط به سبد خرید رو دیزاین میکنم، کلمه‌ی Basket رو بعد از Zu اضافه میکنم. پس تا اینجای کار چی داریم؟ Zu-Basket
و این کار رو برای بخش‌های مختلف، که هر کدوم شامل صفحات خودشون هستند انجام میدم.
بنابراین در انتهای پروژه ردیف‌هایی از آرتبردها دارم که هر ردیف پیشوند جداگونه داره.
Zu-Register، Zu-SearchResult، Zu-Product و ...
در آخر هم نوبت میرسه به اسم منحصر به فرد اون صفحه که در این مورد نمیترسم اگر اسمش طولانی بشه.
ملاکم اینه که به هدف اصلی اون صفحه اشاره کنم. و نگران نباشید؛ هیچوقت اونقدری که فکرش رو می‌کنید طولانی نمیشن.
فرضا اگر دارم داخل یک صفحه، حالت تایپ اینپوت‌ها و حالت هاور و سلکت دکمه‌ها رو نمایش میدم، اسم صفحه میشه این:
Zu-Register-InputType/btnHover&Select
نام‌گذاری فایل‌های پروژه
معمولا کم و بیش بین طراح‌ها این عادت هست که ویرایش‌های مختلف از یک فایل رو با پسوند‌هایی مثل final edit final، final edit، final final و از این دست موارد ذخیره کنن :)
روشی که من ویرایش‌های مختلف رو ذخیره میکنم به این شکله که بعد از اسم پروژه، تاریخ اون روز رو به شکل عددی مینویسم. برای مثال 991013 که یعنی 13 دی 99. و برای اینکه بدونم فرق این نسخه با نسخه‌های بعدی چیه یه اشاره کوچیک هم به تغییراتی که ایجاد کردم میکنم.
که در نهایت مثلا میشه:
Zuha-BasketEdit-991013
اشتراک گذاری فایل بین هم‌تیمی‌ها
وقتی که دارید به صورت تیمی دیزاین انجام می‌دید، بدون شک فایل‌ها مدام بین شما و هم‌تیمی‌هاتون رد و بدل میشن.
توی این فایل‌ها بعضی صفحات جدیدا اضافه شدن، بعضی‌ها صفحات قبلی هستن که ویرایش شدن و بعضی‌ها هم دیزاین‌هایی هستن که هنوز به صورت قطعی تایید نشدن و در حال بررسی‌ان و داریم چیزهای مختلف رو امتحان میکنیم.
برای اینکه این صفحات به طور واضحی از همدیگه تفکیک بشن و مرتب باشن، کاری که من انجام میدم اینه که هر دسته از دیزاین‌هایی که اشاره شد، یعنی جدید، ویرایش شده و در حال بررسی رو، توی یه ردیف قرار میدم و بعد یه نوار رنگی بالای اون ردیف میذارم؛ که رنگ متفاوتی داره. و چون از قبل بین هم‌تیمی‌ها توافق کردیم که هر رنگی به چه معناست همه میدونیم که کجا باید دنبال چه چیزی باشیم و این کار رو خیلی راحت میکنه.
رنگ‌هایی که من استفاده میکنم: سبز برای دیزاین جدید، آبی برای دیزاین ویرایش شده، نارنجی برای دیزاین در حال بررسی.
انجام دادن مواردی که داخل این مطلب گفته شد زمان خیلی کمی از شما می‌گیره اما نتیجه‌ی بزرگی داره و علاوه بر منظم کردن فایل‌ها و کارتون، کمک میکنه تا ذهنتون هم مرتب بشه.
