مقالات طراحی سایت

در هندسه، به فضای بالا و پایین محورهای x و y محور z می گویند. ترجمه این جمله برای ما که سر کلاس هندسه چرت میزدیم به این صورت است: با این شیوه ما میتوانیم پنل هایی که بالا و پایین یکدیگر حرکت کنند را ایجاد کنیم.

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

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

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

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

استفاده ازمحور z برای حل مشکل طراحی

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

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

ایجاد اینترفیسی که با محور z کار کند دو المان خیلی مهم میخواهد: لایه ها و جابجایی (ترانزیشن).

1.لایه ها

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

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

منوها

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

دکمه ها

دکمه های اصلی، مانند چک کردن یا افزودن پست جدید، معمولا در محور z بالاتر از بقیه قرار میگیرند. با قرار دادن این دکمه ها بالاتر از بقیه اجزای سایت به راحتی میتوان به کاربران این حس را القاء کرد که چه چیزی در app از بقیه مهم تر است.

مفهوم CTA در طراحی سایت یعنی چه؟

داستان گویی

اشیاء در لایه های مختلف محور z میتوانند با سرعت ناهمگام در موقع اسکرول حرکت کنند. این افکت – عموما پارالکس (اختلاف منظر) نامیده میشود – ابتدا در بازی های رایانه ای بوجود آمد، اما در طراحی های تعاملی امری عادی شده است. وقتی اشیاء با سرعت متفاوت حرکت میکنند، عمق را بوجود می آورد و گذر زمان را شبیه سازی میکند و باعث میشود که پارالاکس برای داستانگویی آنلاین تبدیل به ابزاری قوی شود.

استفاده بی مورد از پارالکس بعنوان یک شیوه ای که مد روز شده است بدرستی مورد نقد قرار گرفته است، اما توانایی حرکت دادن جداگانه لایه ها بر روی یکدیگر به شما اجازه میدهد تا برای قصه گویی متحرک و بدون استفاده از ویدئو از این شیوه استفاده کنید. سایتهایی مانند Let’s Free Congress و Inception Explained از اسکرول ناهمگام استفاده میکند تا اینفوگرافیک فلت را به روایتی تصویری بازگو کنند. با آوردن المانهای سایت در قالب لایه ها، هر رشته، میتواند با سرعت خودش آشکار شود و کاربر سرعت حرکت را تنظیم کند.

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

اصول طراحی فلت

2.جابجایی ها

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

اسلاید

اسلاید یکی از مرسوم ترین جابجایی های انیمیشنی است زیرا اجرای آن نسبتا آسان و درک آن راحت است. منوها و پنل های مخفی به سرعت هرجایی که نیاز دارید اسلاید میشوند. اما مثل هر چیز "ساده"، اسلاید کردن نیاز به نکاتی بیش از انتظار شما دارد.

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

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

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

زوم کردن

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

بزرگنمایی یا کوچک نمایی آبجکت در دنیای اپل از انتشار Mac OS X انیمیشنی رایج بوده است. این انیمیشن از طریق آیفون به دنیای موبایل راه پیدا میکند، و کاربران خیلی زود به کلیک بر روی عکس و زوم شدن آن عادت میکنند.

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

این تفاوت –زوم کردن دوربین به جای یک المان باعث میشود دید کاربر به یک سطح جدید از محور z جابجا میکند. به نوعی فیزیک دنیای واقعی را شبیه سازی میکند. هیچ جای تعجبی وجود ندارد که طراحان برای استفاده از این امکان با وجود تاثیرات جانبی که میتواند داشته باشد مشتاق شده اند.

دیگر جابجایی ها

اسلاید و زوم دوتا از بیشترین جابجایی هایی هستند که امروزه مورد استفاده قرار میگیرند، اما دیگر امکانات نظیر فلیپ یا فولد نیز وجود دارند.

آبجکت ها یک (یا چند) طرف دارند، اما اکثر اینترفیس کاربر مانند ماه است: یک سمت "روشن" که همیشه دیده میشود و یک سمت "تاریک" که هرگز دیده نمیشود. فلیپ کردن یک آبجکت یک فضای بصری ایجاد میکند که درک آن برای کاربران آسان است.

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

ورن لانیر هشتم آپریل 2014