زهرا آزادی
زهرا آزادی
خواندن ۷ دقیقه·۱ سال پیش

سبک های طراحی اپلیکیشن موبایل و وب

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

در سال 2020 به بعد محبوب ترین سبک،ترکیبی از طراحی فلت با طراحی متریال با عنوان «طراحی مدرن» است .در اینجا بر روی سبک‌های طراحی اپلیکیشن موبایل تمرکز خواهیم کرد که البته طراحی وب سایت را نیز تحت پوشش قرار می دهد.

سبک های طراحی
سبک های طراحی


  • اسکئومورفی (Skeuomorphism )
    اسکئومورفیسم از مدت ها قبل در اطراف ما وجود داشته است ، حتی استعاره دسکتاپ کامپیوتر (یا سطل زباله) ماهیت اسکئومورفیک دارد. اما در رابط کاربری با عرضه اولین آیفون اهمیت ویژه ای پیدا کرد. این گرایش تماما در مورد استفاده از استعاره اشیا واقعی برای آسان کردن رابط کاربری است.
این سبک دیجیتالی شدن اشیاء دنیای واقعی در مورد کمک به تداعی ذهنی برای کاربران غیرمسلط به فناوری بود و هدف این بود که مردم نباید در استفاده از فناوری جدید بترسند (و آیفون در آن زمان کاملاً جدید بود). به طور کلی، Skeuomorphism هدف کاهش موانع ورود برای کاربران جدید بود.

اما در این میان، کدنویسی این رابط کاربری هم بسیار دشوار بود و همین امر رابط کاربری را رو به ساده تر کردن کشاند.


Skeuomorphism (اسکئومورفیسم)
Skeuomorphism (اسکئومورفیسم)
  • طراحی مسطح (Flat Design)

طراحی مسطح کاملا برعکس اسکئومورفیسم است، مرکز فرض این سبک مینیمالیسم است. بدون تزئینات، بدون جلوه. که شامل نبود سایه روی اشیاء است، از این رو نام "مسطح" برای آن انتخاب شد.

وقتی سه بعدی و اسکئومورفیسم خسته کننده و پیاده سازی آن دشوار شد مردم به دلیل راحتی و متفاوت بودن به این سبک روی آوردند.
Flat Design ( طراحی مسطح)
Flat Design ( طراحی مسطح)
  • متریال دیزاین (Material Design)

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

قاعده کلی طراحی متریال این است که تمام عناصر مهم رابط کاربری "نزدیکتر" به کاربر باشد. روش پیشنهادی برای طراحی در این سبک این است که یک رنگ اصلی، یک رنگ ثانویه را انتخاب کنید و از آنها به طور مداوم در کل محصول استفاده کنید. همچنین فونت مخصوص به خود را با سبک ها و وزن ها داشته باشد. مشکل اصلی این سیستم طراحی این است که استفاده از رنگ‌ها، فونت‌ها و سایه‌های یکسان، در اصل، همه محصولات طراحی متریال را شبیه هم می‌کند. نسخه های جدیدتر سعی کردند این مشکل را برطرف کنند، اما تاکنون ناموفق بوده است.
Material Design ( متریال دیزاین)
Material Design ( متریال دیزاین)
  • طراحی مدرن (Modern design)

طراحی مدرن، ترکیبی از Flat و Material است، اما با تأکید کمی بیشتر بر نقض قوانین، که در طراحی متریال بسیار سختگیرانه هستند. اکنون اکثر اشیا دارای سایه‌های ظریف هستند (نه تنها کارت‌ها، دکمه‌ها و نمادها )، و سایه‌ها نیز رنگارنگ هستند و از رنگ اصلی تیره‌تر به عنوان پایه استفاده می‌کنند. این سایه های رنگی و ملایم از ویژگی های این سبک هستند.

طراحی مدرن پاسخی به مشکل اپلیکیشن‌های Material بود که همگی نسخه های شبیه‌سازی‌ شده رنگی بودند. سایه‌های رنگارنگ و شیب‌های زاویه‌دار به طراح چیزهای بیشتری نسبت به قوانین محدود متریال می‌دهد تا با آنها بازی کند. این سبک همچنین اشکال گرد و ارگانیک را در بر می گیرد. (البته می‌توانید از گوشه‌های تیز هم استفاده کنید) اما اکثر پروژه‌هایی که با «مدرن» انجام می‌شوند از گوشه‌های گرد و دکمه‌های گرد استفاده می‌کنند. درکل تجربه کاربر پسندتر و سفارشی سازی شده می باشد. اشکال گرد نیز توسط کاربران غیر تهدید کننده تلقی می شوند.

قانون اصلی این است: قوانین را خم کنید. محصولات خود را منحصر به فرد کنید. شیب های خود را در یک زاویه قرار دهید و اشکال منحنی و ارگانیک را به پس زمینه اضافه کنید. باز بودن این رویکرد آن را به محبوب ترین سبک برای برنامه ها و وب سایت ها تبدیل کرده است. اگرچه برای برنامه های تجاری بسیار جدی کار نمی کند، اما برای محصولات مصرفی مناسب است.
Modern design (طراحی مدرن )
Modern design (طراحی مدرن )
  • نئومورفیسم (Neumorphism)

نئومورفیسم یک سبک طراحی "جدید" است که اولین بار در اواخر سال 2019 ظاهر شد. جالب اینجاست که Michal (یکی از نویسندگان این کتاب) این نام را مطرح کرد و اولین مقاله طولانی در مورد آن نوشت.

از آن زمان به بعد، توهم پلاستیک نرم و اکسترود شده در UI با نام Neumorphism شروع به گسترش کرد. این سبک با اشیاء غیر فعال و زمانی که بیش از حد از آن استفاده نمی شود بهترین کارکرد را دارد.

از سبک نئومورفیسم برای عناصر فعال مانند دکمه ها یا سوئیچ ها خودداری کنید.به دلیل تضاد لبه کم عمق در حالی که معکوس کردن سایه ها "خوب به نظر می رسد"، قابل استفاده نیست و در دسترس نیست. استفاده از کنتراست کم ،رابط کاربری را هم برای افرادی که مشکل بینایی دارند و هم افرادی که از نمایشگرهای قدیمی تر و با کنتراست کمتر استفاده می کنند مشکل ساز می کند. با طراحی یک دکمه، مطمئن شوید که حالت های عادی و فعال از خط زیر یا وزن فونت برای تمایز استفاده شده است. در غیر این صورت، برای برخی از کاربران، هر دو حالت ممکن است دقیقاً یکسان به نظر برسند.
Neumorphism (نئومورفیسم)
Neumorphism (نئومورفیسم)
  • حالت تاریک (Dark Mode)

حالت تاریک بیشتر با صفحه نمایش های OLED در دستگاه های تلفن همراه محبوب شد. در بیشتر موارد، این سبک رابط دوم یک برنامه یا وب سایت است و کاربر می تواند بین نسخه تاریک و استاندارد یکی را انتخاب کند. داده‌های کافی برای تأیید آسان‌تر بودن رابط‌های تاریک برای چشم‌ها وجود ندارد. با این حال، در برخی موارد می توانند به کاهش مصرف انرژی دستگاه شما کمک کنند.

اپل در سال 2019 حالت تاریک (به عنوان یک گزینه) را به دستگاه های دسکتاپ و تلفن همراه اضافه کرد. در همان زمان، گوگل نسخه تاریک برنامه جیمیل خود را ایجاد کرد و اینستاگرام به کاربر اجازه داد تا رابط را به حالت تاریک تغییر دهد.

شایان ذکر است که بخش صرفه جویی در مصرف انرژی در حالت تاریک فقط روی صفحه‌های OLED (که پیکسل‌های تیره به سادگی نور پس‌زمینه ندارند) کار می‌کند و فقط در صورتی که از مشکی خالص استفاده می‌کنید (000000#) در ترکیب با متن سفید، کنتراست بسیار بالایی ایجاد می کند که ممکن است استفاده راحت از آن را دشوارتر کند.

اگر از حالت تاریک مبتنی بر خاکستری تیره استفاده می کنید، این یک انتخاب صرفاً زیبایی شناختی است و تنها سود کاربر، توانایی سفارشی کردن محصول است. برخی از افراد رابط تاریک را ترجیح می دهند، بنابراین ممکن است ایده خوبی باشد که هر دو را در پروژه های خود طراحی کنید.
Dark Mode (حالت تاریک)
Dark Mode (حالت تاریک)


  • فوق مینیمالیسم (Ultra-minimalism)

مینیمالیسم فوق العاده در صفحه دستگاه های نمایش جوهر الکترونیکی (خواننده های کتاب الکترونیکی، گوشی های هوشمند مینیمال و غیره) رایج است.

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

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

می توانید سعی کنید مینیمالیسم فوق العاده را با عکس های رنگارنگ ترکیب کنید تا به نتایج چشمگیر و مدرنی برسید. اما مشکل اصلی این سبک این است که برای بازار انبوه مناسب نیست. اکثر مصرف کنندگان به تنهایی با استفاده از یک رابط مبتنی بر متن احساس خوبی نخواهند داشت.
Ultra-minimalism (فوق مینیمالیسم )
Ultra-minimalism (فوق مینیمالیسم )


برگرفته از کتاب:

Designing User Interfaces ( Michał Malewicz & Diana Malewicz)

اگر این مقاله مفید بود به نویسنده عشق بدهید و آن را برای کسی که برایش مفید است به اشتراک بگذارید.



طراحی اپلیکیشنطراحی رابط کاربریطراحی وبیوآی
دنبال کننده روانشناسی تصمیمات کاربر
شاید از این پست‌ها خوشتان بیاید