يكي از چالش‌هاي هميشگي در طراحي اپليكيشن يا وب‌سايت، انتخاب ميان طراحي تخت (Flat Design) و متريال ديزاين (Material Design) است. به نظر شما كدام سبك طراحي، تجربه كاربري بهتري را ايجاد مي‌كند؟ در اين مقاله با ما همراه باشيد تا با مفهوم Flat Design و Material Design و تفاوت‌هاي آن‌ها آشنا شويد.
مفهوم اسكيومورفيسم (Skeuomorphism)
پيش از آشنايي با مفهوم متريال ديزاين و فلت ديزاين، بايد با مفهوم اسكيومورفيسم آشنا شويد. اسكيومورفيسم در دنياي طراحي به معني به تصوير كشيدن اشيا و عناصر طراحي به شكل واقعي است، درست همان‌گونه كه در ذهن كاربر نقش بسته است. در اين تكنيك براي تقليد از دنياي واقعي، فضا و اشيا به صورت سه‌بعدي طراحي شده و از رنگ‌هاي طبيعي استفاده مي‌شود. از اين تكنيك بيشتر در گذشته و در ابتداي روند رو به رشد استفاده از وب، موبال‌هاي هوشمند و به طور كلي دنياي ديجيتال مورد استفاده قرار مي‌گرفت. اما رفته رفته به علت داشتن جزئيات بسيار زياد و سرعت بارگذاري بالا، محبوبيت خود را از دست داد.
فلت ديزاين (Flat Design)
طراحي تخت يا فلت ديزاين را مي‌توان به عنوان مفهوم مخالف اسكيومورفيسم در نظر گرفت. در طراحي تخت يا فلت ديزاين، از طرح‌هاي دو بعدي به جاي به تصوير كشيدن تصاوير دنياي واقعي به روش اسكيومورفيسم استفاده مي‌شود. در فلت ديزاين هيچ گونه استفاده از سايه‌ها، گراديانت‌ها و تكسچرها به چشم نمي‌خورد. تمركز طراحي تخت بر استفاده از رنگ‌ها و تايپوگرافي است. در طراحي تخت، ظاهر كلي چندان مهم نيست و آنچه بسيار اهميت دارد، عملكرد و در حقيقت ايجاد تجربه كاربري رضايت بخش است.
مزاياي فلت ديزاين
- يك طراحي ساده، مينيمال، بدون عناصر اضافي و شلوغي، كه حواس كاربر را پرت نمي‌كند.
- گاهي يك طرح ساده توانايي بيشتري در انتقال مفاهيم به كاربر دارد.
- تايپوگرافي واضح در فلت ديزاين باعث مي‌شود به راحتي خوانده شود.
- فلت ديزاين مطابقت بسياري با طراحي واكنش‌گرا يا Responsive Design دارد.
- طراحي تخت در مقايسه با ديگر انواع طراحي، سرعت بارگذاري بالاتري در مرورگرها و اپليكيشن‌ها دارد.
معايب فلت ديزاين
- نبود سايه‌ها و عمق عناصر طراحي شده، ممكن است گاهي سبب بروز چالش‌هايي در قابليت استفاده يا Usability شود.
- وجود انتخاب‌هاي محدود از ميان رنگ‌ها، آيكون‌ها و شكل‌هاي ساده و يكنواخت، ممكن است تشخيص دادن تمايز برخي بخش‌ها را از يكديگر سخت كند و باعث شود طراحي‌هاي شما تكراري به نظر برسد.
- گاهي تشخيص قابليت كليك آيتم‌ها براي كاربر مشكل مي‌شود.
- طراحيCTA ها در فلت ديزاين ممكن است چندان جذاب به نظر نرسيده و سبب كاهش نرخ كليك (CTR) شود.
- محدوديت‌هاي فلت ديزاين باعث مي‌شود نتوانيد بسياري از ايده‌هاي خلاقانه‌ي خود را در طراحي پياده‌سازي كنيد.
- طراحي تخت براي تمام وب‌سايت‌ها يا اپليكيشن‌ها با توجه به هدف و نوع فعاليت آن‌ها مناسب نيست.
متريال ديزاين(Material Design)
متريال ديزاين يك سيستم طراحي توسعه داده شده توسط گوگل است. گوگل در سال 2014 متريال ديزاين را در جهت ايجاد يك زبان بصري منسجم، كاربردي و قابل دسترس به وجود آورد. هدف متريال ديزاين خلق تجربه كاربري دلپذير و قابل لمس از وب و اپليكيشن‌ها است. به عبارتي ديگر، در متريال ديزاين تلاش بر اين است كه حس‌هاي واقعي از اجسام مانند طول، عرض، ارتفاع و عمق را به كمك عناصر طراحي، سايه‌ها، حركات، انيميشن‌ها، طيف رنگ‌ها و … به كاربر منتقل كرد. متريال ديزاين سيستمي است كه طراحان رابط كاربري را به سمت يك طراحي يكپارچه و با كمترين ميزان پرتي حواس كاربر هدايت مي‌كند.
از متريال ديزاين بيشتر در طراحي رابط كاربري اپليكيشن‌ها استفاده مي‌شود. متريال ديزاين باعث مي‌شود تعامل بيشتري ميان كاربر و اپليكيشن صورت گيرد، چرا كه اين نوع طراحي كاربرپسندتر است و مي‌تواند با توجه به شناخت شما از كاربران و در راستاي رفع نيازهاي آن‌ها انجام شود. دو هدف اصلي متريال ديزاين عبارتند از:
- خلق يك زبان طراحي كه منعكس كننده‌ي ويژگي‌هاي اصلي طراحي كلاسيك باشد.
- توسعه‌ي يك سيستم يكپارچه كه بتوان آن را در تمام پلت‌فرم‌ها خصوصاً در موبايل پياده‌سازي كرد.
متريال ديزاين از سه بخش اصلي تشكيل شده كه محقق شدن اهداف بالا را امكان پذير ساخته‌اند:
- متريال به عنوان استعاره يا Metaphor: اشياء و عناصر در متريال ديزاين درست مانند اشياء در واقعيت ايجاد شده و باهم مرتبطند. به عبارتي مي‌توان گفت اين عناصر استعاره‌اي از واقعيت هستند.
- وجود عناصر برجسته، گرافيكال و جذابBold) ، Graphic و (Intentional كه از طراحي روي كاغذ (طراحي چاپي) الهام گرفته مي‌گيرند.
- حركت (Motion): حركات در متريال ديزاين به صورت واقعي و با هدف افزايش توجه كاربر طراحي شده‌اند.
دليل اهميت متريال ديزاين
متريال ديزاين يك چارچوب استاندارد براي طراحي رابط كاربري در اختيار طراحان قرار مي‌دهد تا از اشتباهات فاحش در طراحي جلوگيري شود. به عبارتي ديگر، متريال ديزاين همانند يك نقشه راه براي طراحي انيميشن‌ها، استايل‌ها، layouts ، اجزا و الگوها عمل مي‌كند. به همين دليل هنگام كار كردن با محصولات گوگل، يك تجربه كاربري متحدالشكل (يكپارچه) و رضايت بخش براي كاربران پديد مي‌آيد.
مزاياي متريال ديزاين
- ايجاد رابط كاربري ساده و يكپارچه (وب‌سايت و اپليكيشن)
- ثبات رويه به دليل وجود اهداف و دستورالعمل‌هاي مشخص
- استفاده از محور Z (ايجاد عمق در اشيا)
- جنبه‌هاي بصري قوي
- جذابيت بيشتر به دليل استفاده از حركات و Motion
- ترغيب بيشتر كاربران به انجام عمل مورد نظر به دليل طراحي CTA جذاب
- افزايش سرعت در طراحي
معايب متريال ديزاين
- دستورالعمل‌ها و چارچوب‌هاي مشخص و محدود از سوي گوگل
- جلوگيري از بروز خلاقيت و ايجاد طراحي دلخواه خارج از چارچوب‌ها
- آسان نبودن اعمال تغييرات در چارچوب‌هاي متريال ديزاين
- يكسان شدن قالب طراحي‌ها
- مصرف بيشتر باتري موبايل در اپليكيشن‌ها
مقايسه فلت ديزاين و متريال ديزاين
به طور كلي مي‌توان گفت متريال ديزاين و فلت ديزاين خصوصيات مشترك بسياري دارند. در فلت ديزاين تمايل به استفاده از طيف رنگ‌هاي محدودتر بيشتر است تا حواس كاربر پرت نشود. همچنين سادگي طراحي عناصر رابط كاربري، كارايي آن را افزايش مي‌دهد. نكته‌اي كه فلت ديزاين را از ديگر روش‌هاي طراحي متمايز مي‌سازد اين است كه از عناصر واقعي الهام نمي‌گيرد و بسيار مينيمال است.
متريال ديزاين به طور كامل از فلت ديزاين جدا نبوده و به نوعي مكمل آن است. به عبارتي ديگر مي‌توان گفت متريال ديزاين نسخه‌ي بهبود يافته‌ي فلت ديزاين است كه بر برخي عناصر اسكيومورفيسم مانند سايه‌ها، انيميشن‌ها و لايه‌هاي متفاوت تاكيد دارد. سادگي در طراحي و انتخاب رنگ‌ها، در كنار استفاده از اين عناصر كه بر جذابيت بصري طراحي افزوده‌اند، سبب شده تجربه كاربري رضايت بخشي خلق شود.
همچنين مي‌توان از مزاياي عناصر متريال ديزاين در طراحي‌هاي تخت (و بالعكس) بهره برد و اين دو روش را با يكديگر تركيب كرد. در بيشتر مواقع، رابط كاربري متريال ديزاين User-Friendly است و بخش‌هاي قابل كليك و غير قابل كليك را در نگاه كاربر به راحتي از يكديگر قابل تشخيص مي‌كند.
همان‌گونه كه پيش‌تر گفته شد، هر كدام از سبك‌هاي طراحي تخت و متريال ديزاين مزايا و معايب خود را دارند. طراحان وب‌سايت يا اپليكيشن‌ها بايد با توجه به هدف خود از طراحي، سبك مناسب را انتخاب كنند. براي مثال، متريال ديزاين ممكن است براي طراحي بازي‌هاي خلاقانه مناسب نباشد، اما براي طراحي اپليكيشن‌ها و وب‌سايت‌هاي فانتزي گزينه‌ي مناسبي است. يا هنگامي كه سرعت بارگذاري وب‌سايت براي طراح اوليت دارد، استفاده از سبك فلت ديزاين به متريال ديزاين نيز به همان نسبت در اولويت قرار مي‌گيرد.
تيم طراحي و توسعه وب‌سايت آژانس ديجيتال ماركتينگ ماكان بهينه‌ترين روش‌هاي طراحي وب‌سايت را انتخاب كرده و شما را در مسير رسيدن به اهداف كسب و كارتان همراهي مي‌كند.
منبع: آژانس ديجيتال ماركتينگ ماكان
يكي از چالش‌هاي هميشگي در طراحي اپليكيشن يا وب‌سايت، انتخاب ميان طراحي تخت (Flat Design) و متريال ديزاين (Material Design) است. به نظر شما كدام سبك طراحي، تجربه كاربري بهتري را ايجاد مي‌كند؟ در اين مقاله با ما همراه باشيد تا با مفهوم Flat Design و Material Design و تفاوت‌هاي آن‌ها آشنا شويد.
مفهوم اسكيومورفيسم (Skeuomorphism)
پيش از آشنايي با مفهوم متريال ديزاين و فلت ديزاين، بايد با مفهوم اسكيومورفيسم آشنا شويد. اسكيومورفيسم در دنياي طراحي به معني به تصوير كشيدن اشيا و عناصر طراحي به شكل واقعي است، درست همان‌گونه كه در ذهن كاربر نقش بسته است. در اين تكنيك براي تقليد از دنياي واقعي، فضا و اشيا به صورت سه‌بعدي طراحي شده و از رنگ‌هاي طبيعي استفاده مي‌شود. از اين تكنيك بيشتر در گذشته و در ابتداي روند رو به رشد استفاده از وب، موبال‌هاي هوشمند و به طور كلي دنياي ديجيتال مورد استفاده قرار مي‌گرفت. اما رفته رفته به علت داشتن جزئيات بسيار زياد و سرعت بارگذاري بالا، محبوبيت خود را از دست داد.
فلت ديزاين (Flat Design)
طراحي تخت يا فلت ديزاين را مي‌توان به عنوان مفهوم مخالف اسكيومورفيسم در نظر گرفت. در طراحي تخت يا فلت ديزاين، از طرح‌هاي دو بعدي به جاي به تصوير كشيدن تصاوير دنياي واقعي به روش اسكيومورفيسم استفاده مي‌شود. در فلت ديزاين هيچ گونه استفاده از سايه‌ها، گراديانت‌ها و تكسچرها به چشم نمي‌خورد. تمركز طراحي تخت بر استفاده از رنگ‌ها و تايپوگرافي است. در طراحي تخت، ظاهر كلي چندان مهم نيست و آنچه بسيار اهميت دارد، عملكرد و در حقيقت ايجاد تجربه كاربري رضايت بخش است.
مزاياي فلت ديزاين
- يك طراحي ساده، مينيمال، بدون عناصر اضافي و شلوغي، كه حواس كاربر را پرت نمي‌كند.
- گاهي يك طرح ساده توانايي بيشتري در انتقال مفاهيم به كاربر دارد.
- تايپوگرافي واضح در فلت ديزاين باعث مي‌شود به راحتي خوانده شود.
- فلت ديزاين مطابقت بسياري با طراحي واكنش‌گرا يا Responsive Design دارد.
- طراحي تخت در مقايسه با ديگر انواع طراحي، سرعت بارگذاري بالاتري در مرورگرها و اپليكيشن‌ها دارد.
معايب فلت ديزاين
- نبود سايه‌ها و عمق عناصر طراحي شده، ممكن است گاهي سبب بروز چالش‌هايي در قابليت استفاده يا Usability شود.
- وجود انتخاب‌هاي محدود از ميان رنگ‌ها، آيكون‌ها و شكل‌هاي ساده و يكنواخت، ممكن است تشخيص دادن تمايز برخي بخش‌ها را از يكديگر سخت كند و باعث شود طراحي‌هاي شما تكراري به نظر برسد.
- گاهي تشخيص قابليت كليك آيتم‌ها براي كاربر مشكل مي‌شود.
- طراحيCTA ها در فلت ديزاين ممكن است چندان جذاب به نظر نرسيده و سبب كاهش نرخ كليك (CTR) شود.
- محدوديت‌هاي فلت ديزاين باعث مي‌شود نتوانيد بسياري از ايده‌هاي خلاقانه‌ي خود را در طراحي پياده‌سازي كنيد.
- طراحي تخت براي تمام وب‌سايت‌ها يا اپليكيشن‌ها با توجه به هدف و نوع فعاليت آن‌ها مناسب نيست.
متريال ديزاين(Material Design)
متريال ديزاين يك سيستم طراحي توسعه داده شده توسط گوگل است. گوگل در سال 2014 متريال ديزاين را در جهت ايجاد يك زبان بصري منسجم، كاربردي و قابل دسترس به وجود آورد. هدف متريال ديزاين خلق تجربه كاربري دلپذير و قابل لمس از وب و اپليكيشن‌ها است. به عبارتي ديگر، در متريال ديزاين تلاش بر اين است كه حس‌هاي واقعي از اجسام مانند طول، عرض، ارتفاع و عمق را به كمك عناصر طراحي، سايه‌ها، حركات، انيميشن‌ها، طيف رنگ‌ها و … به كاربر منتقل كرد. متريال ديزاين سيستمي است كه طراحان رابط كاربري را به سمت يك طراحي يكپارچه و با كمترين ميزان پرتي حواس كاربر هدايت مي‌كند.
از متريال ديزاين بيشتر در طراحي رابط كاربري اپليكيشن‌ها استفاده مي‌شود. متريال ديزاين باعث مي‌شود تعامل بيشتري ميان كاربر و اپليكيشن صورت گيرد، چرا كه اين نوع طراحي كاربرپسندتر است و مي‌تواند با توجه به شناخت شما از كاربران و در راستاي رفع نيازهاي آن‌ها انجام شود. دو هدف اصلي متريال ديزاين عبارتند از:
- خلق يك زبان طراحي كه منعكس كننده‌ي ويژگي‌هاي اصلي طراحي كلاسيك باشد.
- توسعه‌ي يك سيستم يكپارچه كه بتوان آن را در تمام پلت‌فرم‌ها خصوصاً در موبايل پياده‌سازي كرد.
متريال ديزاين از سه بخش اصلي تشكيل شده كه محقق شدن اهداف بالا را امكان پذير ساخته‌اند:
- متريال به عنوان استعاره يا Metaphor: اشياء و عناصر در متريال ديزاين درست مانند اشياء در واقعيت ايجاد شده و باهم مرتبطند. به عبارتي مي‌توان گفت اين عناصر استعاره‌اي از واقعيت هستند.
- وجود عناصر برجسته، گرافيكال و جذابBold) ، Graphic و (Intentional كه از طراحي روي كاغذ (طراحي چاپي) الهام گرفته مي‌گيرند.
- حركت (Motion): حركات در متريال ديزاين به صورت واقعي و با هدف افزايش توجه كاربر طراحي شده‌اند.
دليل اهميت متريال ديزاين
متريال ديزاين يك چارچوب استاندارد براي طراحي رابط كاربري در اختيار طراحان قرار مي‌دهد تا از اشتباهات فاحش در طراحي جلوگيري شود. به عبارتي ديگر، متريال ديزاين همانند يك نقشه راه براي طراحي انيميشن‌ها، استايل‌ها، layouts ، اجزا و الگوها عمل مي‌كند. به همين دليل هنگام كار كردن با محصولات گوگل، يك تجربه كاربري متحدالشكل (يكپارچه) و رضايت بخش براي كاربران پديد مي‌آيد.
مزاياي متريال ديزاين
- ايجاد رابط كاربري ساده و يكپارچه (وب‌سايت و اپليكيشن)
- ثبات رويه به دليل وجود اهداف و دستورالعمل‌هاي مشخص
- استفاده از محور Z (ايجاد عمق در اشيا)
- جنبه‌هاي بصري قوي
- جذابيت بيشتر به دليل استفاده از حركات و Motion
- ترغيب بيشتر كاربران به انجام عمل مورد نظر به دليل طراحي CTA جذاب
- افزايش سرعت در طراحي
معايب متريال ديزاين
- دستورالعمل‌ها و چارچوب‌هاي مشخص و محدود از سوي گوگل
- جلوگيري از بروز خلاقيت و ايجاد طراحي دلخواه خارج از چارچوب‌ها
- آسان نبودن اعمال تغييرات در چارچوب‌هاي متريال ديزاين
- يكسان شدن قالب طراحي‌ها
- مصرف بيشتر باتري موبايل در اپليكيشن‌ها
مقايسه فلت ديزاين و متريال ديزاين
به طور كلي مي‌توان گفت متريال ديزاين و فلت ديزاين خصوصيات مشترك بسياري دارند. در فلت ديزاين تمايل به استفاده از طيف رنگ‌هاي محدودتر بيشتر است تا حواس كاربر پرت نشود. همچنين سادگي طراحي عناصر رابط كاربري، كارايي آن را افزايش مي‌دهد. نكته‌اي كه فلت ديزاين را از ديگر روش‌هاي طراحي متمايز مي‌سازد اين است كه از عناصر واقعي الهام نمي‌گيرد و بسيار مينيمال است.
متريال ديزاين به طور كامل از فلت ديزاين جدا نبوده و به نوعي مكمل آن است. به عبارتي ديگر مي‌توان گفت متريال ديزاين نسخه‌ي بهبود يافته‌ي فلت ديزاين است كه بر برخي عناصر اسكيومورفيسم مانند سايه‌ها، انيميشن‌ها و لايه‌هاي متفاوت تاكيد دارد. سادگي در طراحي و انتخاب رنگ‌ها، در كنار استفاده از اين عناصر كه بر جذابيت بصري طراحي افزوده‌اند، سبب شده تجربه كاربري رضايت بخشي خلق شود.
همچنين مي‌توان از مزاياي عناصر متريال ديزاين در طراحي‌هاي تخت (و بالعكس) بهره برد و اين دو روش را با يكديگر تركيب كرد. در بيشتر مواقع، رابط كاربري متريال ديزاين User-Friendly است و بخش‌هاي قابل كليك و غير قابل كليك را در نگاه كاربر به راحتي از يكديگر قابل تشخيص مي‌كند.
همان‌گونه كه پيش‌تر گفته شد، هر كدام از سبك‌هاي طراحي تخت و متريال ديزاين مزايا و معايب خود را دارند. طراحان وب‌سايت يا اپليكيشن‌ها بايد با توجه به هدف خود از طراحي، سبك مناسب را انتخاب كنند. براي مثال، متريال ديزاين ممكن است براي طراحي بازي‌هاي خلاقانه مناسب نباشد، اما براي طراحي اپليكيشن‌ها و وب‌سايت‌هاي فانتزي گزينه‌ي مناسبي است. يا هنگامي كه سرعت بارگذاري وب‌سايت براي طراح اوليت دارد، استفاده از سبك فلت ديزاين به متريال ديزاين نيز به همان نسبت در اولويت قرار مي‌گيرد.
تيم طراحي و توسعه وب‌سايت آژانس ديجيتال ماركتينگ ماكان بهينه‌ترين روش‌هاي طراحي وب‌سايت را انتخاب كرده و شما را در مسير رسيدن به اهداف كسب و كارتان همراهي مي‌كند.
همه جيز در مورد بازاريابي عصبي