سیده آمین ارمان
کاربر نگاه دانلود
هدف اصلی هر طراحی انتقال پیام طراح به مخاطب است. سلسله مراتب بصری به شما این امکان را می دهد تا اطلاعات و عناصر را برای انتقال پیام آسانتر دسته بندی کنید. این سلسله مراتب بصری طراح را قادر می سازد تا برای ایجاد ارتباط، داستان را به مخاطب انتقال بدهد. سلسله مراتب بصری چیست؟ هنگامی که شما اطلاعات را بر اساس اهمیت دسته بندی کنید، به این کار سلسله مراتب می گویند. اما سلسله مراتب بصری به زبان ساده یعنی سازماندهی اطلاعات بصری. برای ایجاد سلسله مراتب، نیاز است تا عناصر به ترتیب اهمیت از زیاد به کم اولویت بندی شوند. در سلسله مرتب بصری اطلاعات فقط از نظر ظاهری تفاوت دارند. از طریق نشانه های بصری، طراح تاکید می کند که یک عنصر نسبت به دیگری برای ایجاد ارتباط اهمیت کمتر با بیشتری دارد.
چه چیزی آن را با اهمیت می کند؟ نشانه های بصری به ما این امکان را می دهند تا مشخص کنیم که این عنصر مهم است یا نیست و با دادن اهمیت بیشتر به عناصر مختلف، آن ها را مهمتر جلوه می دهیم و این در حالی است که با سلسله مراتب، اطلاعات ساده تر بررسی و هضم می شوند. ایجاد سلسله مراتب مناسب باعث می شود که مخاطبان کارهای خود را سریعتر به پایان برسانند چرا که اطلاعات را سریعتر و ساده تر درک می کنند. همچنین این موضوع به شما برای ایجاد طراحی بهتر نیز کمک می کند چون عناصر در صفحه منسجم تر به نظر می رسند. یک سلسله مراتب بصری قوی باعث می شود نکات کلیدی سایت و اطلاعات با اهمیت سایت بیشتر به نظر برسند. یک مثال برای درک بهتر: تگ های Heading زبان HTML مثالی ساده اما قوی برای موضوع سلسله مراتب است. H1 بزرگترین فونت را به خاطر اهمیت خود دارا است تا H6 که کوچکترین فونت را دارا است زیرا کمترین اهمیت را دارد. در ضمن، متون داخل تگ های پاراگرف دارای اهمیت کمتری نسبت به تگ های Heading هستند. همه این عناصر و تاثیرات در پاراگراف ها مانند strong، li یا نقل قول ها و ... همه مثالی فوق العاده برای سلسله مراتب چاپ هستند.
به نظر شما کدام یک از طراحی ها ساده تر خوانده می شوند؟ کدام متن شانس بیشتری برای خوانده شدن دارد؟ کدام طراحی ارتباط موثرتری ایجاد می کند؟ این تگ ها به شما کمک می کنند تا تفاوت های بصری نسبت به متن بدون استایل ایجاد کنید. شما می توانید ببینید که درک متن بدون استایل خیلی مشکل تر است. متن دارای استایل نه تنها درک آسانتری دارد، بلکه عناصر موجود در آن را می توان ساده تر درک کرد.
چگونه می توان سلسله مراتب بصری ایجاد کرد؟ اندازه، کنتراست، رنگ، نزدیکی، تراز بودن و تکرار از اصول ساده طراحی هستند. این ها برخی از اصولی هستند که یک طراح تازه کار باید کار با آن ها را بلد باشد و این اصول همان هایی هستند که برای ایجاد سلسله مراتب از آن ها استفاده می شود. دوباره به مثال بالا نگاهی بیاندازید تا متوجه شوید که سایز تگ H1 با H2 متفاوت است و به همین ترتیب برای تگ های دیگر. اندازه عناصر بزرگتر سریعتر نظرها را به خود جلب می کنند و بنابراین عناصر بزرگتر اهمیت بیشتری دارند. همین طور عناصر کوچکتر کمتر جلب توجه می کنند. اگر همه چیز به یک اندازه باشد به نظر نمی رسد که کدام عنصر مهمتر یا کدام کم اهمیت تر است. اندازه ها چشمان شما را از بزرگ به کوچک راه نمایی می کنند. ایجاد این نوع تمایز در بین عناصر درک را ساده تر می کند.
کنتراست تغییرات چشمگیر مانند تغییر رنگ می تواند اثر قابل توجهی در یک سلسله مراتب ایجاد کند. اگر یک بخش از سایت دارای پس زمینه تیره و دیگری دارای پس زمینه روشن باشد، آن سایت را به دو بخش جدا از هم و دارای اهمیت متفاوت تقسیم می کند که حاکی از اهمیت نسبی آن ها است. کنتراست یک ابزار عالی برای شناسایی اهمیت اطلاعات سلسله مراتب است.
رنگ استفاده از رنگ های مختلف راه حلی جالب برای ایجاد تفاوت در عناصر مختلف سایت است. شما می توانید با استفاده از رنگ در یک بخش از سایت، مخاطب را به بخشی از سایت جذب کنید. برای پیدا کردن رنگ مناسب یک عنصر برای ایجاد سلسله مراتب در سایت باید به بررسی بپردازید تا رنگی را پیدا کنید که برجستگی بیشتری در برابر رنگ های دیگر دارد.
نزدیکی با نزدیک کردن بعضی عناصر به هم می توانید عناصر صفحه را برای ایجاد نوعی سلسله مراتب گروه بندی کنید. به عنوان مثال، در یک پست ساده در قالب یک وبلاگ وردپرس با ستون های فرعی با طراحی ساده را در نظر بگیرید. ستون های فرعی عنوان ها، سر فصل ها و پاراگراف های متن را در خود نگه می دارند. قرار دادن این عناصر کنار هم این حس را ایجاد می کنند که همه آن ها از یک گروه و سلسله مراتب هستند. همین موضوع برای پست وبلاگ نیز صحیح است.
تراز بودن تراز بودن یا محل قرار گرفتن عناصر نیز می تواند نشانه ای برای اهمیت آن عنصر باشد. بهترین مثال برای این موضوع وب سایت های کلیشه ای اند که در آن ها اطلاعات مهم در سمت بالا و راست صفحه هستند (البته در وب فارسی). بنابراین عناصری که در بالا و سمت چپ صفحه قرار دارند از اهمیت ویژه ای برای بازدید کنندگان برخوردارند. به همین دلیل است که همیشه لوگوی سایت را در آن قسمت وب سایت قرار می دهند. شما می توانید از این موضوع به نفع خود استفاده کنید و به گونه ای اطلاعات را در صفحه قرار دهید که از لحاظ تاکیدی بیشترین اهمیت را به خود اختصاص دهند.
تکرار تکرار یک ابزار خوب برای نشان دادن اهمیت نسبی عناصر در صفحه است. پاراگراف ها در طراحی یک مثال مناسب برای این موضوع هستند. در یک روزنامه همه پاراگراف ها دارای رنگ و اندازه مشخص خود هستند که این الگو برابر نشانه اهمیت برابر در محتوا است. این موضوع برای سرفصل ها و عنوان ها نیز صدق می کند. به همین دلیل است که وقتی وارد یک سایت می شوید می توانید لینک ها را از بقیه محتوا تشخیص دهید.
همه موارد همین بود؟ در واقع بسیاری از نکات دیگر نیز هستند که در ایجاد سلسله مراتب بصری تاثیر دارند. اما در این مطلب به نکات پایه ای اشاره شد که هر طراحی باید برای انتقال مفهوم و پیام از این نکات استفاده کند. برای موفقیت در انتقال پیام طراحی های خود، شما ابتدا باید اصول ایجاد سلسله مراتب بصری را بیاموزید سپس به آزمایش درباره در عناصر مختلف برای پیدا کردن بهترین راه برای ایجاد ارتباط با مخاطب نمایید
چه چیزی آن را با اهمیت می کند؟ نشانه های بصری به ما این امکان را می دهند تا مشخص کنیم که این عنصر مهم است یا نیست و با دادن اهمیت بیشتر به عناصر مختلف، آن ها را مهمتر جلوه می دهیم و این در حالی است که با سلسله مراتب، اطلاعات ساده تر بررسی و هضم می شوند. ایجاد سلسله مراتب مناسب باعث می شود که مخاطبان کارهای خود را سریعتر به پایان برسانند چرا که اطلاعات را سریعتر و ساده تر درک می کنند. همچنین این موضوع به شما برای ایجاد طراحی بهتر نیز کمک می کند چون عناصر در صفحه منسجم تر به نظر می رسند. یک سلسله مراتب بصری قوی باعث می شود نکات کلیدی سایت و اطلاعات با اهمیت سایت بیشتر به نظر برسند. یک مثال برای درک بهتر: تگ های Heading زبان HTML مثالی ساده اما قوی برای موضوع سلسله مراتب است. H1 بزرگترین فونت را به خاطر اهمیت خود دارا است تا H6 که کوچکترین فونت را دارا است زیرا کمترین اهمیت را دارد. در ضمن، متون داخل تگ های پاراگرف دارای اهمیت کمتری نسبت به تگ های Heading هستند. همه این عناصر و تاثیرات در پاراگراف ها مانند strong، li یا نقل قول ها و ... همه مثالی فوق العاده برای سلسله مراتب چاپ هستند.
به نظر شما کدام یک از طراحی ها ساده تر خوانده می شوند؟ کدام متن شانس بیشتری برای خوانده شدن دارد؟ کدام طراحی ارتباط موثرتری ایجاد می کند؟ این تگ ها به شما کمک می کنند تا تفاوت های بصری نسبت به متن بدون استایل ایجاد کنید. شما می توانید ببینید که درک متن بدون استایل خیلی مشکل تر است. متن دارای استایل نه تنها درک آسانتری دارد، بلکه عناصر موجود در آن را می توان ساده تر درک کرد.
چگونه می توان سلسله مراتب بصری ایجاد کرد؟ اندازه، کنتراست، رنگ، نزدیکی، تراز بودن و تکرار از اصول ساده طراحی هستند. این ها برخی از اصولی هستند که یک طراح تازه کار باید کار با آن ها را بلد باشد و این اصول همان هایی هستند که برای ایجاد سلسله مراتب از آن ها استفاده می شود. دوباره به مثال بالا نگاهی بیاندازید تا متوجه شوید که سایز تگ H1 با H2 متفاوت است و به همین ترتیب برای تگ های دیگر. اندازه عناصر بزرگتر سریعتر نظرها را به خود جلب می کنند و بنابراین عناصر بزرگتر اهمیت بیشتری دارند. همین طور عناصر کوچکتر کمتر جلب توجه می کنند. اگر همه چیز به یک اندازه باشد به نظر نمی رسد که کدام عنصر مهمتر یا کدام کم اهمیت تر است. اندازه ها چشمان شما را از بزرگ به کوچک راه نمایی می کنند. ایجاد این نوع تمایز در بین عناصر درک را ساده تر می کند.
کنتراست تغییرات چشمگیر مانند تغییر رنگ می تواند اثر قابل توجهی در یک سلسله مراتب ایجاد کند. اگر یک بخش از سایت دارای پس زمینه تیره و دیگری دارای پس زمینه روشن باشد، آن سایت را به دو بخش جدا از هم و دارای اهمیت متفاوت تقسیم می کند که حاکی از اهمیت نسبی آن ها است. کنتراست یک ابزار عالی برای شناسایی اهمیت اطلاعات سلسله مراتب است.
رنگ استفاده از رنگ های مختلف راه حلی جالب برای ایجاد تفاوت در عناصر مختلف سایت است. شما می توانید با استفاده از رنگ در یک بخش از سایت، مخاطب را به بخشی از سایت جذب کنید. برای پیدا کردن رنگ مناسب یک عنصر برای ایجاد سلسله مراتب در سایت باید به بررسی بپردازید تا رنگی را پیدا کنید که برجستگی بیشتری در برابر رنگ های دیگر دارد.
نزدیکی با نزدیک کردن بعضی عناصر به هم می توانید عناصر صفحه را برای ایجاد نوعی سلسله مراتب گروه بندی کنید. به عنوان مثال، در یک پست ساده در قالب یک وبلاگ وردپرس با ستون های فرعی با طراحی ساده را در نظر بگیرید. ستون های فرعی عنوان ها، سر فصل ها و پاراگراف های متن را در خود نگه می دارند. قرار دادن این عناصر کنار هم این حس را ایجاد می کنند که همه آن ها از یک گروه و سلسله مراتب هستند. همین موضوع برای پست وبلاگ نیز صحیح است.
تراز بودن تراز بودن یا محل قرار گرفتن عناصر نیز می تواند نشانه ای برای اهمیت آن عنصر باشد. بهترین مثال برای این موضوع وب سایت های کلیشه ای اند که در آن ها اطلاعات مهم در سمت بالا و راست صفحه هستند (البته در وب فارسی). بنابراین عناصری که در بالا و سمت چپ صفحه قرار دارند از اهمیت ویژه ای برای بازدید کنندگان برخوردارند. به همین دلیل است که همیشه لوگوی سایت را در آن قسمت وب سایت قرار می دهند. شما می توانید از این موضوع به نفع خود استفاده کنید و به گونه ای اطلاعات را در صفحه قرار دهید که از لحاظ تاکیدی بیشترین اهمیت را به خود اختصاص دهند.
تکرار تکرار یک ابزار خوب برای نشان دادن اهمیت نسبی عناصر در صفحه است. پاراگراف ها در طراحی یک مثال مناسب برای این موضوع هستند. در یک روزنامه همه پاراگراف ها دارای رنگ و اندازه مشخص خود هستند که این الگو برابر نشانه اهمیت برابر در محتوا است. این موضوع برای سرفصل ها و عنوان ها نیز صدق می کند. به همین دلیل است که وقتی وارد یک سایت می شوید می توانید لینک ها را از بقیه محتوا تشخیص دهید.
همه موارد همین بود؟ در واقع بسیاری از نکات دیگر نیز هستند که در ایجاد سلسله مراتب بصری تاثیر دارند. اما در این مطلب به نکات پایه ای اشاره شد که هر طراحی باید برای انتقال مفهوم و پیام از این نکات استفاده کند. برای موفقیت در انتقال پیام طراحی های خود، شما ابتدا باید اصول ایجاد سلسله مراتب بصری را بیاموزید سپس به آزمایش درباره در عناصر مختلف برای پیدا کردن بهترین راه برای ایجاد ارتباط با مخاطب نمایید
