کشف رابطه عمق و رنگ

با شروع محو شدن سخت افزارها و ظهور تجربه‌های نرم افزاری، تمرکز بر نحوه طراحی رابط هایی که کاربران با آن ها روبرو می شوند، ضروری خواهد بود. در طی دهه گذشته، طراحی رابط به نوبه خود از تکثیر فیزیکی/مادی (به اسکیومورفیسم (skeuomorphism) اشاره دارد که دقیقاً نقطه مقابل طراحی فلت است و در آن سایه ها، رنگ ها و نور از دنیای واقعی شبیه سازی شده اند.) به سمت زیبایی انتزاعی و یکنواخت تر رفته است. با این که این سبک بصری جدید جذاب تر به نظر می رسد اما به نظر می رسد که حس شهود و قابلیت در دسترس بودن با چشم پوشی از برخی ویژگی های اسکومورفیک از بین رفته است. به منظور بررسی بیشتر این مشاهدات، در این مقاله سعی شده است یک رابط کاربری به تصویر کشیده شود که بین مینیمالیسم و محتوای فیزیکی تعادل پیدا می‌کند.

هدف این مقاله، تلفیق رابط مدرن با سه تغییر بصری عمده است:

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

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

عمق های جدید

در ادامه با بررسی یک برنامه، پتانسیل استفاده از سایه در رابط های کاربری را به نمایش گذاشته ایم.

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

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

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

یک امتیاز افزوده: ضربه زدن بر روی یکی از این لیست ها (همانطور که ما به خاطر اثر سایه ها خیلی مشتاقانه انجامش می دهیم) منجر به یکپارچگی بیشتر در نمای دوم می شود که نشان دهنده تمام یادآوری های مناسب است. این صفحه در مورد چگونگی ارتباط واسط با نماد «+» و فلش پایین، دستورالعمل های بسیار دقیقی را ارائه می دهد.

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

یک سایت خلاقانه و با تمامی امکانات می‌خوام!

خوب جای درستی اومدی تخصص ما همینه

طراحی سایت

شفاف مثل شیشه

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

در تصویر سمت چپ می توانید ببینید که صفحه اصلی شخص به چه شکل است. تصویر زمینه ای (Wallpaper) که آن ها می بینند و تغییر می دهند، اغلب منبعی برای راحتی و آشنایی با رابط می شوند. استفاده از شفافیت باعث بیشتر شدن این آشنایی شده و در پس زمینه هر برنامه سرنخی از این تصویر زمینه می دهد. شما می توانید گرادیانت آبی موجود در بوم سفید هر دو قسمت Messages و Reminders و همچنین برنامه های دیگر در این مقاله را ببینید. البته، این مفهوم شفافیت، وقتی بیشتر معنا پیدا می کند که صحبت از مولتی تسک بودن (multitasking) باشد. در طول فرآیند توسعه، بسیاری از تغییرات این مفهوم، شفافیت بوم را بیشتر می کنند (۸۵٪ یا حتی ۹۰٪ در مقابل opacity (کدری) ۹۵٪ کنونی)، اما رنگ پس زمینه شروع به تداخل با ظاهر محتوای برنامه در این موارد کرد.

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

به سایه ظریف و انحنای دکمه که صدا را بالا و پایین می کند توجه کنید، همچنین به سایه معکوس آیکون Airplay. این سایه معکوس نشان می دهد که Airplay از قبل فعال شده است و در Control Center هم می تواند دیده شود.

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

ثابت و استوار

همان طور که در لیست کارهای فوق ذکر شد، «ثبات»، اولویت هر دو نمای بصری و تعاملات بود. همان طور که می بینید، صفحه “splash page” هر برنامه دارای یک طرح مشابه با عنوان و یک نوار تقسیم بزرگ قبل از محتوای زیرین آن است. آن چه که بعد ازsplash page می آید، مربوط به محتوای آن برنامه است. به فرمت این صفحه به عنوان یک توقف آسان برای فضایی که جلوتر قرار گرفته است نگاه کنید.

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

بهترین قسمت؟ این حرکت با هر برنامه ای که نوار تقسیم را نشان می دهد، کار خواهد کرد.

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

لینک منبع: سایت مدیوم