طراحی سایت با اصول و استانداردهای طراحی فلت

irani_online

New Member
پزشکی، سینما ,اخبار تكنولوژی ،دنیای فناوری،اخبار فناوری اطلاعات،موبایل های هوشمند،گجت ها،اسمارت فون،اندروید،کامپیوتر
تکنولوژی | پارس دی ال

طراحی سایت با اصول و استانداردهای طراحی فلت
به نقل از پارس دی ال
این مقاله توسط پارس دی ال به فارسی ترجمه شده است:

در چند سال اخیر، شاهد یک تغییر سریع در طراحی سایت ها و طراحی رابط کاربری نرم افزارها و اپلیکیشن ها، از ۳D و اسکیومورفیک (skeuomorphic) به مسطح و مینیمال بوده ایم.

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



8-28-2016-10-34-37-PM.jpg

رابط کاربری در Apple IOS 7 و Windows Phone 8


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

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

8-28-2016-10-36-24-PM.jpg

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

8-28-2016-10-37-29-PM.jpg

زیبا و کوچک: اپلیکیشن پیش بینی آب و هوای بلو طراحی شده توسط Oak Studios
محتوا پادشاه است
همانطور که اغلب اتفاق می افتد هنگامی که ابزارها و تکنولوژی های جدید وارد بازار می شوند، برای ما کاربرد آن تکنولوژی و اینکه چگونه کار می کند و چطور می توانیم با آن ارتباط برقرار کنیم، بسیار جالب و هیچان انگیز است. معمولا رابط کاربری با تمرکز بر محتوا بهتر درک می شود. فعالیت هایی که ما اغلب در دستگاه ها و ابزارهایمان درگیر آن می شویم، استفاده از مدیا، از جمله متن، صدا و ویدئو است و انجام این فعالیت ها از طریق رابط کاربری امکان پذیر می باشد.

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

8-28-2016-10-38-43-PM.jpg

داشبورد Fitbit یک هویت بصری روشن و قابل دسترس است.
نفوذ فناوری
اکثر نرم افزارها به پلتفرمی که در آن اجرا می شوند، محدود شده اند. ابعاد صفحه نمایش و تراکم پیکسلی فاکتورهای محدود کننده سخت افزاری می باشند. یک رابط مینیمال به یک زمینه طراحی خیلی کوچک نیاز دارد. تناسب تایپوگرافیک و ضخامت فونت (font-weight) عمدتا هم زیبایی شناسی و هم قابلیت استفاده از یک طراحی مسطح و فلت را تعیین می کنند.
اگر دستگاه های هدف شما نمی توانند نکات دقیق و ظریف را اجرا کنند، جزء افراد بدشانس محسوب می شوید. همچنان که سایز صفحه نمایش و تراکم پیکسلی روی موبایل ها افزایش پیدا می کند، نوع باریک تر و کوچکتر با وضوح بهتری ارائه می شود. همچنین پشتیبانی از @font-face جذابیت طرح های مینیمال متمرکز بر تایپوگرافی را افزایش داده است.

8-28-2016-10-39-54-PM.jpg

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

8-28-2016-10-40-52-PM.jpg

حجم کم: (onsite نمایش بزرگتر)
بهترین تمرینات
خب تئوری کافیست. بهتر است برای درک بهتر به تمرینات عملی بپردازیم. خلق یک طراحی مینیمال تاثیرگذار در فرایند طراحی سایت، بسیار چالش برانگیز خواهد بود. همچنان که شما ترفندهای رایج طراحی رابط کاربری (مانند سایه ها، عناصر بافت دار و اریب وار المان ها و …) را حذف می کنید، به سرعت متوجه می شوید که عناصر باقیمانده تا چه حد مهم و حیاتی هستند.
در حالی که نکات زیر عمدتا قابل اجرا هستند، به طور ویژه به رابط کاربری مسطح و فلت وابسته می باشند.

قبل از شروع
اولین قدم برای شروع یک پروژه این است که مطمئن شوید سبک انتخابی شما برای طراحی، مفهوم و حس موردنظر شما را خواهد رساند. قبل از غرق شدن در طراحی سایت به صورت فلت، اطمینان حاصل کنید که این نوع طراحی با احساسات کاربران هدف، پلتفرم هدف و ابزارها و انواع برنامه ها همراستا خواهد بود. دنباله روی از یک گرایش در صورتی که راه حل اشتباهی برای پروژه شما باشد، بی ارزش و بیهوده بوده و باعث از دست رفتن زمان می شود.

شروع عملیات
فارغ از سبک انتخابی شما، روندی که دنبال می کنید بسیار اهمیت دارد. نکات زیر را برای طراحی وب سایت ساده در ذهن خود داشته باشید:

  • هنگام طراحی یک رابط کاربری مینیمال و مسطح، من به دنبال یک الهام و وحی از دوران قبل از ظهور کامپیوتر هستم، زمانی که طراحان و هنرمندان با کمترین امکانات بهترین ها را انجام می دادند. این یک فرصت عالی برای بازدید دوباره از طراحی های فاخر و شگرف طراحانی چون Josef Müller-Brockmann و Wim Crouwel می باشد. همچنین اثر کسانی مانند Ellsworth Kelly نقاش مینیمال، Mies van der Rohe معمار و Dieter Rams طراح صنعتی قابل توجه هستند.
  • دور شدن از کار و کنار گذاشتن آن نیز می تواند مفید واقع شود. طراحی فلت و مینیمال شامل نکات دقیق و ظریف می گردد بنابراین یک استراحت کوچک و برگشتن به کار با ذهن و چشمان بازتر بسیار موثر واقع خواهد شد.
  • مقایسه نسخه های طرح تان را فراموش نکنید. نسخه های طرح خود را ذخیره کرده و کنار هم قرار دهید، همان که بهتر است با یک نگاه مشخص می شود.
  • برای اینکه مطمئن شوید طرح تان روی تمام دستگاه ها کار می کند بهتر است در ابتدا طراحی تان را روی انواع ابزارها تست کنید.
  • همچنان که در حال کار کردن هستید مدام از خود بپرسید: “آیا واقعا به آن نیاز دارم؟” فراموش نکنید که ما همیشه باید به دنبال کاهش المان ها و عناصر در جهت سادگی طرحمان باشیم.
8-28-2016-10-41-55-PM.jpg

Global closetیک بازی تعاملی طراحی شده برای National Geographic Education توسط the workshop

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



منابع:
تکنولوژی | پارس دی ال
تي اس تي پلن
 

جدیدترین ارسال ها

بالا