زبان‌های طراحی سبک‌هایی فراگیر هستند که می‌توانند راهنمای طراحی یک محصول باشد. در طراحی UI اپلیکیشن‌های موبایل نیز مانند هر محصول دیگری، بیش از یک الگو و یا سبک طراحی وجود دارد. این زبان‌های طراحی با راهنمایی در انتخاب رنگ‌ها، شکل‌ها، الگوها، بافت‌ها، ترکیب‌بندی و حتی فونت‌ها می‌توانند در هر اپلیکیشن ظاهر و احساس خاص خود را القا کنند.
در ادامه این مطلب، مهم‌ترین و پرطرفدارترین سبک‌های طراحی رابط کاربری اپلیکیشن‌های موبایل در طی سال‌های اخیر را با ویژگی‌ها و شاخص‌های هر یک، شرح داده‌ایم.
سکیومورفیسم (Skeuomorphism)
سکیومورفیسم (یا اسکیومورفیسم) از دو واژه یونانی «سکیوس – Skéuos» (وسیله، ابزار) و «مورف – Morph» (شکل) تشکیل شده است و در طراحی رابط کاربری موبایل، به معنای تقلید از اشیا و وسایل واقعی است.
این شیوه طراحی شاید قدیمی‌ترین سبک طراحی است که با قوانین و اسم مشخص شناخته می‌شود. اپلیکیشن‌هایی که از شیوه سکیومورف بهره می‌گیرند، با استفاده از ترفندهای بصری به گونه‌ای طراحی می‌شوند که ظاهر و رفتاری مشابه همتاهای خود در دنیاهای واقعی داشته باشند (در ادامه با توضیحات بیشتر و مثال‌هایی این مفهوم توضیح داده شده است.)
این ترفندهای بصری می‌توانند شامل نوع استفاده از رنگ‌ها، نورها، سایه‌ها، بافت‌ها و جزییات باشند که باعث می‌شوند در فضای دو بعدی، حسی سه بعدی ایجاد شود.
برای مثال طراحی اپلیکیشن تقویم با این سبک، به گونه‌ای است که کاربر احساس کند با تقویمی کاغذی سر و کار دارد و حتی برای جلد این تقویم از بافتی مشابه چرم واقعی استفاده می‌شود.
از مزایای سبک سکیومورف می‌توان به موارد زیر اشاره کرد:
- رابط کاربری‌های سکیوموف در نظر کاربر آشنا هستند و این حس آشنایی هنگام روبه‌رویی با یک رابط کاربری جدید معمولا مورد استقبال قرار می‌گیرد. همچنین به آنها کمک می‌کند تا تقریبا به سرعت به هدف اپلیکیشن و چگونگی کارکرد آن پی ببرند.
- از نظر بصری، غنی‌تر و گیراتر از یک طرح مینیمال هستند و می‌توانند تجربه کاربری را نیز برای کاربران جذاب‌تر کنند.
- توجه به طراحی جزییات در آنها، باعث می‌شود طرح واقعی و ملموس به نظر برسد.
- بیشتر طراحان عاشق استفاده از بافت در طراحی خود هستند، و در طراحی سکیومورف انگیزه و دلایل کافی برای استفاده از بافت‌ها به میزان زیاد وجود دارد.
اما درکنار این مزایا، باید معایب شیوه طراحی سکیومورف را نیز مد نظر داشت:
- رابط‌های کاربری سکیومورف، گاهی باعث کاهش کاربردپذیری اپلیکیشن می‌شوند. ظاهر جذاب همیشه به کارآمدتر شدن یک اپلیکیشن منجر نمی‌شود.
- اصرار به تقلید از نمونه‌های واقعی، زمینه خلاقیت و نوآوری در طراحی را کاهش می‌دهد.
- در این نوع طراحی، استفاده از عکس‌ها و تزیینات غیر ضروری علاوه بر افزودن بر حجم اپلیکیشن، از استفاده بهینه از فضا جلوگیری می‌کند. همچنین زمان‌بر بودن فرایند تصویرسازی و طراحی جزییات باعث کاهش سرعت روند کلی طراحی و توسعه اپلیکیشن می‌شود.
- همراه با پیشرفت جهان، اشیا همراه با ظاهر و تکنولوژی جدیدتر به بازار می‌آیند. به همین دلیل، اپلیکیشن‌هایی که به تقلید از نسخه‌های پیشین آنها طراحی شده‌اند، از نظر ظاهر قدیمی به نظر می‌آیند.
کمپانی اپل طی سال‌ها به استفاده از سبک سکیومورفیسم در طراحی رابط کاربری محصولات خود پایبند و معتقد بود، اما سرانجام در مقابل فراگیر شدن و محبوبیت طراحی تخت یا فلت (Flat) تسلیم شد و در سال ۲۰۱۳ همزمان با انتشار نسخه iOS7، شیوه طراحی جدیدی را برای رابط کاربری اپل معرفی کرد.
زبان طراحی اپل برای iOS
همانطور که گفتیم این سبک از طراحی توسط اپل در سال ۲۰۱۳ معرفی شد و به خاطر مخالفت نسبتا سرسختانه سابق اپل با طراحی تخت، تعجب و واکنش‌های زیادی را برانگیخت. البته با توجه به این که طراحی سکیومورفیسم پتانسیل کمتری برای خلاقیت دارد، می‌توان گفت که شیوه جدید طراحی اپل با شعار همیشگی‌اش « متفاوت بیاندیشید» (Think Different) همخوانی بیشتری دارد.
در این سبک طراحی اصول زیر اهمیت دارند:
- تعامل. رابط کاربری به کاربران در فهم و تعامل با محتوا کمک می‌کند، اما با آن وارد رقابت نمی‌شود. یعنی محتوا از هرچیز مهم‌تر است.
- وضوح. نوشته‌ها در تمامی ابعاد خوانا هستند، آیکن‌ها دقیق و شفاف‌اند و تزیینات ظریف و متناسب طراحی شده‌اند و بر کارآمد بودن این سبک طراحی به عنوان انگیزه اصلی تمرکز شده است.
- عمق. لایه‌های بصری و سرزندگی تحرکات آنها باعث بالابردن سطح لذت و فهم کاربران می‌شود.
در این نوع طراحی مانند طراحی تخت بر اهمیت محتوا تاکید زیادی شده است و هرچند که رابط کاربری زیبا و تحرکات سیال از خصوصیات بارز این سبک هستند، محتوا قلب آن است.
پالت رنگی پیشنهاد شده در این سبک طراحی رنگ‌های خالص، تمیز و شفاف هستند که هم به تنهایی و هم به صورت ترکیبی روی هر دو قالب تاریک و روشن نتیجه‌بخش به نظر می‌رسند.
طراحی تخت یا فلت (Flat Design)
در طراحی تخت محتوا مهم‌ترین بخش است و درنتیجه در آن از گرافیک‌ها، متن‌ها و یا افکت‌های غیر ضروری اجتناب می‌شود. همچنین طراحی تخت استفاده از فضاهای بزرگ تعاملی را به دکمه‌های کوچک ترجیح می‌دهد و گوشه تمامی عناصر قائم (عمود) و تیز هستند.
متن‌ها نقش مهمی را در طراحی تخت ایفا می‌کنند (البته کماکان محتوا مهم‌ترین بخش است). اما متون نیز باید تمیز، برازنده و به جا باشند. معمولا تفاوت در اندازه فونت، نشانگر تفاوت اهمیت بین متون مختلف است.
در طراحی تخت از عناصری که به طرح حس عمق و یا سه بعدی بودن می‌دهند، مانند سایه‌های افتاده، گرادیانت‌ها و بافت‌ها تا حد ممکن اجتناب می‌شود. پالت رنگی در این سبک طراحی، از رنگ‌های شاد، روشن و تخت تشکیل شده است.
سبک طراحی فلت نیز مانند سکیومورفیسم دارای مزایا و معایب مختص به خود است. از مزایای آن می‌توان به موارد زیر اشاره کرد:
- در طراحی تخت از تصویرسازی به میزان کم استفاده می‌شود (یا ممکن است فاقد تصویرسازی باشد).
- زمان بارگذاری این طرح‌ها معمولا کوتاه است.
- محتوا به خوبی نمایش داده می‌شود.
- ساده، تمیز، رنگارنگ، مدرن و به روز است.
- استفاده از آن راحت است.
- قابل اعتمادتر به نظر می‌رسد.
- در طراحی ریسپانسیو (واکنش‌گرا) کارامد است.
معایب طراحی تخت:
- با آنچه که کاربران به طور معمول به آن عادت دارند متفاوت است.
- گاهی نامشخص است که چه چیزی قابل کلیک کردن است.
- گاهی طرح دچار فقدان هویت می‌شود.
- ممکن است طرح کسل کننده شود.
- روابط میان عناصر طراحی تنها از طریق رنگ، شکل و فواصل مشخص می‌شود.
- ایجاد حس ظرافت و زیبایی در طرح سخت‌تر است.
گوگل متریال دیزاین (Google Material Design)
متریال دیزاین نوعی زبان بصری است که در سال ۲۰۱۴ توسط کمپانی گوگل برای طراحی وب و رابط کاربری سیستم عامل اندروید منتشر شد. در این سبک طراحی که آن را نسخه تکمیل شده و جامع‌تری از طراحی تخت می‌دانند، اصول کلاسیک طراحی با خلاقیت و تکنولوژی همراه شده است و طبق گفته گوگل، به روز نگه داشته می‌شود.
هدف از تدوین این زبان، ایجاد یک سیستم طراحی اصولمند به منظور یکپارچه‌سازی رابط کاربری تمامی دستگاه‌ها است و در آن حتی برای جزیی‌ترین بخش‌های طراحی رابط کاربری، راهکار و اصول مکتوب ارائه شده است.
متریال به معنی ماده و مصالح است. متریال دیزاین را محیطی سه بعدی شامل نورِ، سایه و مواد (کاغذ) تشکیل می‌دهد. مواد دارای ویژگی‌های تغییرناپذیر مشخص و رفتارهای ذاتی مخصوص به خود هستند. برای طراحی به این سبک، باید با کیفیت و ذات رفتار مواد آشنا باشید تا بتوانید اپلیکیشن‌ها را سازگار با محیط متریال دیزاین طراحی کنید.
این مواد عموما دارای ویژگی‌های زیر هستند:
- جامدند.
- در فضا نقاط منحصر به فرد خود را اشغال می‌کنند و مختصات خاص خود دارند.
- نفوذ ناپذیرند.
- شکل و اندازه آنها تغییرپذیر است.
- ابعاد آنها تنها در طول صفحه قابل تغییر است.
- خم و تا نمی‌شوند.
- می‌توانند به سایر مواد متصل شده و با آنها یکی شوند.
- می‌توانند جدا شوند، شکاف بردارند یا ترمیم شوند.
- می‌توانند ظاهر و یا ناپدید شوند.
- می‌توانند در طول تمامی محورها حرکت کنند.
همانطور که هر ماده در دنیای واقعی قابل لمس و دارای طول، عرض و ارتفاع است، در این سبک طراحی نیز باید همین ویژگی‌ها و حس‌ها منتقل شود.
مواد اصلی که در سبک طراحی متریال دیزاین از آنها الهام گرفته شده‌است، کاغذ و جوهر است. اما رفتار آنها با چیزی که در دنیای واقعی می‌شناسیم، اندکی متفاوت است. همانطور که در بالا به ویژگی‌های مواد در متریال‌دیزاین اشاره شد، برخی خصوصیات همچون تا خوردن و خم شدن که می‌توان در مورد کاغذ در دنیای واقعی انجام داد، در متریال دیزاین جایی ندارند. همچنین در دنیای واقعی هم چسبیدن دو کاغذ به هم یا کشیده شدن کاغذ ممکن نیست، اما این مورد در متریال دیزاین گنجانده شده است.
رنگ‌ها در گوگل متریال دیزاین ترکیب‌هایی جسورانه در محیط‌های خنثی، همراه با سایه‌های عمیق و نورهای روشن هستند.
آخرین تفییرات و بهبودهای این زبان طراحی از طرف گوگل -تا این لحظه- در سال ۲۰۱۶ صورت گرفته است.
سبک طراحی خلاقانه
محمدحسین نیرومند در کتاب خود «دستورعمل‌های فیل آبی برای ایده‌یابی» از زبان یک نظریه‌پرداز معروف سینما در مورد خلاقیت اینگونه نقل‌قول کرده است:
طراحی رابط کاربری اپلیکیشن‌های موبایل نیز از این قاعده پیروی می‌کند. احتمال این که شما بدون دانش کافی از سبک‌ها و ترندهای شناخته شده و اصولمند طراحی بتوانید طرحی خلاقانه و «قوی» ارائه دهید بسیار کم است. این قواعد وحی منزل نیستند؛ می‌توان آنها را شکست اما باید به این نکته توجه داشت: کسی می‌تواند این کار را انجام دهد که اولا بر این قواعد کاملا مسلط باشد و ثانیا جایگزین مناسبی برای آنها داشته باشد، هرچند که همیشه استثنا نیز می‌تواند وجود داشته باشد.
سلام واقعا عالی بود ، خیلی هم ممنون… خوندن این مقاله رو پیشنهاد می کنم.
واقعا مطلب خوب و کاملی بود
ممنون
مرسی بابت زحماتتون
ممنونم از نویسنده این متن، جای چنین مطالبی بسیار خالی است ، امیدوارم که مستدام باشه