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

14

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

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

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

 

8-28-2016 10-34-37 PM
رابط کاربری در Apple IOS 7 و Windows Phone 8
تاریخچه

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

سر ریز اطلاعات

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

عاری از بی نظمی: gekoboard برای درک اطلاعات کلیدی با یک نگاه طراحی شده است.
عاری از بی نظمی: gekoboard برای درک اطلاعات کلیدی با یک نگاه طراحی شده است.

سادگی طلایی در طراحی وب سایت

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

زیبا و کوچک: اپلیکیشن پیش بینی آب و هوای بلو طراحی شده توسط Oak Studios
زیبا و کوچک: اپلیکیشن پیش بینی آب و هوای بلو طراحی شده توسط Oak Studios

محتوا پادشاه است

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

سواد فناورانه

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

داشبورد Fitbit یک هویت بصری روشن و قابل دسترس است.
داشبورد Fitbit یک هویت بصری روشن و قابل دسترس است.

نفوذ فناوری

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

نظارت بر فروش با Wallmob: امکان پیگیری آمار و ارقام از هر دستگاهی که یک مرورگر دارد.
نظارت بر فروش با Wallmob: امکان پیگیری آمار و ارقام از هر دستگاهی که یک مرورگر دارد.

طراحی تعاملی و واکنشی

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

حجم کم: (onsite نمایش بزرگتر)
حجم کم: (onsite نمایش بزرگتر)

بهترین تمرینات

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

قبل از شروع

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

شروع عملیات

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

  • هنگام طراحی یک رابط کاربری مینیمال و مسطح، من به دنبال یک الهام و وحی از دوران قبل از ظهور کامپیوتر هستم، زمانی که طراحان و هنرمندان با کمترین امکانات بهترین ها را انجام می دادند. این یک فرصت عالی برای بازدید دوباره از طراحی های فاخر و شگرف طراحانی چون Josef Müller-Brockmann و Wim Crouwel می باشد. همچنین اثر کسانی مانند Ellsworth Kelly نقاش مینیمال، Mies van der Rohe معمار و Dieter Rams طراح صنعتی قابل توجه هستند.
  • دور شدن از کار و کنار گذاشتن آن نیز می تواند مفید واقع شود. طراحی فلت و مینیمال شامل نکات دقیق و ظریف می گردد بنابراین یک استراحت کوچک و برگشتن به کار با ذهن و چشمان بازتر بسیار موثر واقع خواهد شد.
  • مقایسه نسخه های طرح تان را فراموش نکنید. نسخه های طرح خود را ذخیره کرده و کنار هم قرار دهید، همان که بهتر است با یک نگاه مشخص می شود.
  • برای اینکه مطمئن شوید طرح تان روی تمام دستگاه ها کار می کند بهتر است در ابتدا طراحی تان را روی انواع ابزارها تست کنید.
  • همچنان که در حال کار کردن هستید مدام از خود بپرسید: “آیا واقعا به آن نیاز دارم؟” فراموش نکنید که ما همیشه باید به دنبال کاهش المان ها و عناصر در جهت سادگی طرحمان باشیم.
Global closetیک بازی تعاملی طراحی شده برای National Geographic Education توسط the workshop
Global closetیک بازی تعاملی طراحی شده برای National Geographic Education توسط the workshop

شبکه (Grid)

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

  • از شبکه برای مشخص کردن گروه های محتوایی خود استفاده کنید. همیشه برای گروه بندی کردن مجموعه ای از عناصر، نیاز به خط یا باکس نیست، یک تراز ساده و فاصله گذاری مناسب، می تواند به کاربر برای درک ساختار طراحی کمک کند.
  • سعی به شکستن گرید، توسط المان هایی با اهمیت ویژه که توجه کاربر را جلب می کند، نمایید. بدون ترفند ساختگی 3-D، اصول اولیه طرح مانند اندازه و موقعیت به بهترین عناصر برای ایجاد سلسله مراتب بصری تبدیل می شوند.
  • یک شبکه متراکم تر از آن چیزی که تا به حال عادت کرده اید کار کنید را امتحان کنید. هنگامی که به طور چشمگیری نمود بصری را کاهش می دهید، ممکن است متوجه شوید که طراحی، از ساختار پیچیده بیشتری بدون در هم ریختگی پشتیبانی می کند. حالا ببینید چه اطلاعات اضافه ای را تنها از طریق جایگاه و موقعیت می توانید انتقال دهید.
اپلیکیشن آی پد LiveSchool طراحی شده توسط Rossul Design
اپلیکیشن آی پد LiveSchool طراحی شده توسط Rossul Design

رنگ

بدون شک، رنگ همیشه یک جزء کلیدی از طراحی بصری است. حتی رنگ در طراحی های مینیمال، حیاتی تر و مهم تر است.

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

تایپوگرافی

در وب سایت های فلت و مسطح، تایپوگرافی حرف اول را می زند.

  • برای انتخاب فونت در وب سایت های فلت، به دنبال خانواده ای از فونت ها باشید که طیف گسترده ای از استایل ها و وزن(weight)های متفاوت را شامل می شوند. مطمئنا به همه آنها نیازی نخواهید داشت اما انتخاب این نوع خانواده فونت به شما به عنوان طراح برای تعیین سلسله مراتب اجزاء طراحی کمک خواهد کرد.
  • فونت هایی متضاد انتخاب کنید. فونت هایی با تفاوت زیاد در اندازه و وزن به نظم بصری طراحی شما کمک می کند. اندازه فونت بزرگتر را برای سرتیتر و اندازه متوسط را برای بدنه طرح انتخاب نمایید.
  • توجه نمایید که فونت انتخابی شما خوانا باشد. مطمئن شوید که فونت در هر سایزی قابل خواندن باشد.
تایپوگرافی تمیز و خوانا در Siteleaf
تایپوگرافی تمیز و خوانا در Siteleaf

طراحی تعاملی

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

  • کنتراست و تضاد در طراحی های تعاملی نکته کلیدی می باشد. اگر اکثر ترکیب رنگی طرح شما سفید است، پس می توانید برای عناصر تعاملی طرح تان از رنگ های دیگر استفاده نمایید. اگر طراحی شما متن محور است، پس از آیکون های زیبا برای هر چه تعاملی کردن طرح تان استفاده نمایید. اگر فونت سرتیترهای طرح تان بزرگ و lowercase می باشد، پس لینک ها را با سایز کوچک ولی uppercase انتخاب نمایید.
  • جایگذاری های متعارف و مرسوم می توانند به خوبی کمک کننده باشند. به عنوان مثال اگر می خواهید فلش کوچکی را به منظور برگشت به صفحه قبل در طراحی تان تعبیه نمایید، حتما آن را در گوشه بالا سمت چپ قرار دهید، مکانی که کاربران انتظار دارند دکمه back را بیابند.
  • هنگامی که عناصر مختلفی در صفحه وب سایت قرار می دهید، هر المان تعاملی مشابه یک دکمه، نمی تواند حس خوبی به کاربر منتقل نماید. طراحی صفحه تا حد امکان باید حسی و طبیعی باشد. در نتیجه در مواردی که تعاملی کردن صفحه باعث پیچیدگی زیاد می شود، از آن پرهیز نمایید.
  • در نظر داشته باشید که لیست های Drop-down، پنجره های پاپ آپ و سایر عناصر لایه ای در پیاده سازی یک وب سایت فلت باعث ایراد و اشکال می شوند.
Taasky: المان های طراحی شده در یک طرح ساده با کنتراست عالی
Taasky: المان های طراحی شده در یک طرح ساده با کنتراست عالی

و در پایان

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

منبع: شرکت طراحی سایت هوشمند؛ مقاله: اصول طراحی سایت با استانداردهای طراحی فلت


اگر خواننده جدید سایت «یک پزشک»  هستید!
شما در حال خواندن سایت یک پزشک (یک پزشک دات کام) به نشانی اینترنتی www.1pezeshk.com هستید. سایتی با 18 سال سابقه که برخلاف اسمش سرشار از مطالب متنوع است!
ما را رها نکنید. بسیار ممنون می‌شویم اگر:
- سایت یک پزشک رو در مرورگر خود بوک‌مارک کنید.
-مشترک فید یا RSS یک پزشک شوید.
- شبکه‌های اجتماعی ما را دنبال کنید: صفحه تلگرام - صفحه اینستاگرام ما
- برای سفارش تبلیغات ایمیل alirezamajidi در جی میل یا تلگرام تماس بگیرید.
و دیگر مطالب ما را بخوانید. مثلا:

این عکس‌ها راهنما و ایده‌ای برای شما برای تبدیل اشیای کهنه و دورریز به چیزهای جدید هستند

صرفه جویی «واقعا» یک هنر است. خیلی وقت‌ها ما به بهانه تغییر دکوراسیون یا قدیمی شدن چیزی یا نامتناسب شدن چیزی با وسایل تازه به سادگی دورش می‌اندازیم یا باقیمتی بسیاری نازل به سمساری می‌دهیم.البته این سال‌ها به خاطر فشارهای اقتصادی -چنان…

دو اینفلوئنسر سفر در واقع با یک تلویزیون ساده، سفر جعل می‌کردند و هیچ خبری از عکس واقعی در محیط…

دو عکاس به نام مانوئل بختر و و مانوئل رومز رام تصاویر خیره کننده‌ای خلق کردند که آنها را در حال پیاده‌روی در برف، کمپینگ در کوه‌ها و پرواز با هواپیما به سوی مقصدی دور نشان می‌دهد. اما در واقع آنها از در هنگام ثبت همه این عکس‌ها از اتاق…

حومه‌نشینی چرا شکل می‌گیرد و چه مشکلاتی ایجاد می‌کند؟ + گالری عکس‌هایی از زشتی‌های این پدیده

مناطق حومه شهر، جوامع مسکونی هستند که در حومه مناطق بزرگتر شهری قرار دارند. آن‌ها ویژگی‌های متمایزی دارند که آن‌ها را ازمحیط روستایی و شهری متمایز می‌کند. شکل‌گیری حومه‌ها و مشکلاتی که با آن‌ها مواجه هستند را می‌توان به عوامل متعددی نسبت…

به نظرتان کدام شغل‌ها بیش از آنچه که لایقشان است، درآمد دارند؟!

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

این دانشجوی 18 ساله با هوش مصنوعی 19 شخصیت سیمپسون‌ها را به صورت شخصیت‌های واقعی درآورد!

برودی هالبروک دست به کار جالبی زده و جان تازه‌ای به شخصیت‌های محبوب سریال سیمپسون‌ها داده است. او در این مورد نوشته:«من از Midjourney برای تبدیل شخصیت‌های مورد علاقه‌‌ان از انیمیشن‌ها به قالب انسان استفاده کردم. البته برخی از اعضای…

اگر در این لحظات تاریخی حساس، شخصیت‌های مهم عکس سلفی می‌گرفتند

عکس سلفی به مفهوم کنونی آن مدت یک دهه است که مرسوم شده و به مفهوم گرفتن عکس آینه‌ای یا تکنیک‌های گرفتن عکس با شاتر زمان‌دار قدمت آن به زمان عکاسی برمی‌گردد.اما تصور کنید که در این لحظات مهم تاریخی، شخصیت‌ها دست به دوربین می‌شدند و به…
آگهی متنی در همه صفحات
دکتر فارمو / شیشه اتومبیل / نرم افزار حسابداری / خرید سیلوسایبین / هوش مصنوعی / قیمت وازلین ساج / مقاله بازار / شیشه اتومبیل / قیمت ایمپلنت دندان با بیمه /سپتیک تانک /بهترین دکتر لیپوماتیک در تهران /بهترین جراح بینی در تهران / آموزش تزریق ژل و بوتاکس / دوره های زیبایی برای مامایی / آموزش مزوتراپی، PRP و PRF /کاشت مو / مجتمع فنی تهران /قیمت روکش دندان /خدمات پرداخت ارزی نوین پرداخت / درمان طب / لیست قیمت تجهیزات پزشکی / دانلود آهنگ / سریال ایرانی کول دانلود / دانلود فیلم دوبله فارسی /داروخانه اینترنتی آرتان /اشتراك دايت /فروشگاه لوازم بهداشتی /داروخانه تینا /لیفت صورت در تهران /فروش‌ دوربین مداربسته هایک ویژن /سرور مجازی ایران /مرکز خدمات پزشکی و پرستاری در منزل درمان نو /توانی نو / ثبت برند /حمل بار دریایی از چین /سایت نوید /پزشک زنان سعادت آباد /کلاه کاسکت / لمینت متحرک دندان /فروشگاه اینترنتی زنبیل /ساعت تبلیغاتی /تجهیزات پزشکی /چاپ لیوان /خرید از آمازون /بهترین سریال های ایرانی /کاشت مو /قیمت ساک پارچه ای /تولید محتوا /دانلود نرم افزار /
14 نظرات
  1. فربد می گوید

    بسیار عالی! این تقابل رو به وضوح میشه در طراحی اندروید و آی او اس دید. جایی که اندروید (البته در نسخه اصلی) بیشتر روی طراحی فلت و آی او اس روی طراحی اسکیومورفیک تمرکز داره

  2. علی می گوید

    بسیار مفید بود، ممنونم

  3. کمپ ترک اعتیاد می گوید

    تشکر از اطلاعات خوبتون

  4. حسن می گوید

    طراحی فلت دیگه کهنه شده … الان طراحی متریال به روز هست.

  5. کمپ ترک اعتیاد می گوید

    با سلام
    سایت خوب و جالبی دارید
    اطلاعات مفیدی را در اختیار کاربران قرار داده اید
    با تشکر

  6. محمد می گوید

    مطالب مفیدی بود بسیار سپاسگزارم.

  7. تولیدی مانتو می گوید

    خیلی ممنونم از اطلاعات خوبتون

  8. عروس می گوید

    جالب بود ممنون

  9. میثم می گوید

    جالبه سایتی که براش تبلیغ کرده‌اید از فقدان طراحی مناسب و زیبا رنج می‌بره

  10. بهینه سازی سایت می گوید

    با تشکر

  11. saeed می گوید

    سایت فارسی طراحی می‌کنه و از مواردی که تو مطلب تبلیغیش آورده، استفاده از حروف uppercase و lowercaseئه؟((:

    1. حمید رضا می گوید

      برادر من اگر دقت میکردید می دیدید گه اولش نوشته ترجمه!

  12. لینتون می گوید

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

  13. شیراز بزرگ می گوید

    ما هم وقتی سبک طراحی سایتمون رو به فلت تغییر دادیم واقعا تفاوت رو در رفتار کاربران حس کردیم. به دوستان پیشنهاد میشه.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.

••4 5