تجربه‌های شخصی باران در طراحی UI - یک

نکات ریز طراحی رابط کاربریتوی این مطلب قصد دارم چندتا از تجربه‌‌های عملی خودم در طراحی 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اشتراک گذاری فایل بین هم‌تیمی‌هاوقتی که دارید به صورت تیمی دیزاین انجام می‌دید، بدون شک فایل‌ها مدام بین شما و هم‌تیمی‌هاتون رد و بدل میشن.توی این فایل‌ها بعضی صفحات جدیدا اضافه شدن، بعضی‌ها صفحات قبلی هستن که ویرایش شدن و بعضی‌ها هم دیزاین‌هایی هستن که هنوز به صورت قطعی تایید نشدن و در حال بررسی‌ان و داریم چیزهای مختلف رو امتحان میکنیم.برای اینکه این صفحات به طور واضحی از همدیگه تفکیک بشن و مرتب باشن، کاری که من انجام میدم اینه که هر دسته از دیزاین‌هایی که اشاره شد، یعنی جدید، ویرایش شده و در حال بررسی رو، توی یه ردیف قرار میدم و بعد یه نوار رنگی بالای اون ردیف میذارم؛ که رنگ متفاوتی داره. و چون از قبل بین هم‌تیمی‌ها توافق کردیم که هر رنگی به چه معناست همه میدونیم که کجا باید دنبال چه چیزی باشیم و این کار رو خیلی راحت میکنه.رنگ‌هایی که من استفاده میکنم: سبز برای دیزاین جدید، آبی برای دیزاین ویرایش شده، نارنجی برای دیزاین در حال بررسی.اشتراک فایل UI Design بین هم‌تیمی‌هاانجام دادن مواردی که داخل این مطلب گفته شد زمان خیلی کمی از شما می‌گیره اما نتیجه‌ی بزرگی داره و علاوه بر منظم کردن فایل‌ها و کارتون، کمک میکنه تا ذهنتون هم مرتب بشه.