01 از 07
جریان بصری چیست؟
جریان بصری چشم انداز بیننده را از طریق سند منتقل می کند به این ترتیب که تمام عناصر مهم دریافت کننده برجسته می شوند و هیچ چیز چشمگیر نیست و باعث می شود که بیننده از این قطعه از دست برود. با استفاده از عناصر جریان آشکار مانند فلش یا اعداد رایج ترین روش طراحان وب از جریان استفاده می کنند، اما انواع دیگری از عناصر وجود دارد که می تواند مورد استفاده قرار گیرد و استفاده نادرست برای هدایت خوانندگان به حرکت در مسیر خاص. مراحل این آموزش به شما نمونه هایی از جریان خوب و بد را نشان می دهد و به شما کمک می کند تا واژگان جریان بصری را در طراحی یاد بگیرید.
جریان بصری را می توان به روش های مختلفی بدست آورد:
- فلش ها
- تصاویر پیوسته یا عناصر متن
- چشم انداز
- گرادیان ها
- تغییر اندازه
- منحنی ها
- حرکت در تصاویر
- چهره - به خصوص چشم
تصاویر زیر به شما برخی از اشتباهات رایج در جریان در صفحات وب و نحوه اصلاح آنها را نشان می دهد.
02 از 07
جریان متن غرب از چپ به راست
اگر شما خواندن یک زبان غربی را بزرگ کردید، شما فکر می کنید که متن باید از چپ به راست حرکت کند. بنابراین، به عنوان چشم در سراسر یک خط از متن حرکت می کند، از سمت چپ به راست حرکت می کند.
در تصویر بالا، آبشار در سمت راست به سمت چپ جریان دارد و متن آبشار است. از آنجا که همه ما می دانیم که آبشارها سقوط می کنند، در جریان جریان آب با جریان متن قطع می شود. بیننده چشم را به جهت اشتباه حرکت می کند تا متن را بخواند.
03 از 07
متن شما باید با تصاویر جریان یابد
در این مورد، تصویر متوقف شده است به طوری که متن در جهت همان جریان آب است. همه عناصر چشم چشم انداز را با جریان آب و جریان متن هدایت می کند.
04 از 07
چپ به راست برابر سریع
اسب در این عکس از راست به چپ در می آید، اما متن انگلیسی است و از طرف راست به سمت چپ است. تاثیر بصری اسب مسابقه در یک جهت سرعت کل اسناد را کاهش می دهد، زیرا مسیر متفاوت از متن است.
در فرهنگ های غربی، به دلیل اینکه زبان های ما از چپ به راست حرکت می کنند، ما به دنبال یک جهت بصری از سمت چپ به راست به سمت جلو و سریع است، در حالی که سمت راست به سمت چپ عقب تر و کندتر است. هنگامی که شما یک طرح با یک اشاره گر سرعت ایجاد می کنید، باید این را به خاطر بسپارید - و تصاویر خود را در مسیر همانند متن حرکت دهید.
05 از 07
چشم های بیننده را خاموش نکنید
هنگامی که اسب و متن هر دو به همان مسیر می روند، سرعت ضمنی افزایش می یابد.
06 از 07
چشم ها را در عکس های وب تماشا کنید
بسیاری از وب سایت ها با عکس ها این اشتباه را مرتکب می شوند - آنها یک عکس از یک فرد را در صفحه قرار می دهند و شخص از محتوای دور نگاه می کند. این حتی می تواند در وب سایت Design.de طراحی وب در طراحی قدیمی دیده می شود.
همانطور که می بینید، عکس من در کنار برخی از متن قرار می گیرد. اما من از این متن دور نگاه می کنم، تقریبا برگشتم به آن. اگر این زبان بدن را بین دو نفر در یک گروه مشاهده کردید، آسان است فرض کنیم که شخص دیگری را که کنار من هست (در این صورت بلوک متن) را دوست ندارم.
بسیاری از مطالعات ردیابی چشم نشان داده اند که افراد در صفحات وب چهره می بینند. مطالعات مربوطه نشان داده است که هنگام تماشای تصاویر، مردم پس از ناخودآگاه چشم ها را دنبال می کنند تا ببینند که تصویر چه چیزی را دنبال می کند. اگر یک عکس در سایت شما از لبه مرورگر است، این جایی است که مشتریان شما نگاه می کنند و سپس دکمه برگشت را فشار می دهند.
07 از 07
چشم ها در هر عکس بایستی با محتوا مواجه شوند
در طراحی جدید برای About.com، عکس کمی بهتر است. حالا چشمان من بیشتر به جلو نگاه می کنند و اشاره ای کوچک است که به چپ من نگاه می کنم - جایی که متن است.
یک عکس حتی بهتر برای این موقعیت، جایی است که شانه هایم نیز به سمت متن حرکت می کنند. اما این یک راه بسیار بهتر از اولین عکس است. و برای شرایطی که تصویر در سمت راست محتوا و سمت چپ باشد، این می تواند یک سازش خوب باشد.
همچنین به یاد داشته باشید که در حالی که تصاویری از چهره های مردم بیشترین توجه را به خود جلب می کند، همین امر برای عکس های حیوانات نیز صادق است. به عنوان مثال، در این طرح نمونه، سگ های من به سمت چپ نگاه می کنند، اما تصویر درست است. بنابراین آنها به دنبال صفحه می روند. این طرح اگر من تغییر جهت سگ ها را تغییر دهم، به گونه ای که آنها به مرکز صفحه نگاه می کنند بهبود پیدا می کنند.