ویرگول
ورودثبت نام
Iran Web Life
Iran Web Life
خواندن ۹ دقیقه·۵ سال پیش

هف عامل کلیدی در طراحی سایت

عوامل کلیدی طراحی سایت

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

1. سلسله مراتب بصری( Visual Hierarchy)

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


طراحی ظاهری سایت
طراحی ظاهری سایت


در این عکس شما میتوانید، بدون آموزش دایره ها را درک و مرتب کنید. قسمت هایی در سایت وجود دارد که شما باید بیشتر به آنها توجه کنید .این قسمت ها شامل :

فرم ها،منو ها،صفحه محصولات و... می باشد.

فرض میکنیم ۱۰ پارامتر در سایت ما وجود دارد، آیا اهمیت همه این 10 پارامتر به یک اندازه است ؟

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


شرکت آمازون
شرکت آمازون


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

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

برای مقایسه سلسله مراتب سایت خود، دراینترنت سرچ کنید. می توانید در مورد سلسله مراتب بصری اطلاعات بیشتری بدست آورید.

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

2. نسبت طلایی( Divine Proportion)

نسبت طلایی، در اصل یک شماره جادویی(۱٫۶۱۸) است.  این نسبت ، باعث می شود همه چیز در طراحی سایت زیباتر دیده شود. به عنوان مثال، رابطه فیبوناچی ( Fibonacci ) را در نظر بگیرید.

اعداد روبه رو ، مجموعه ای از اعداد سری فیبوناچی است: , …0,1,1,2,3,5,8,13,21

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

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


نسبت طلایی
نسبت طلایی


بنابراین اگر عرض عکس شما ۹۶۰ پیکسل باشد، آن را باید تقسیم بر ۱٫۶۱۸ کنید. به این دلیل که، جواب آن ۵۹۳ پیکسل میشود. الان شما می دانید که عکس شما دارای ابعاد ۵۹۳*۳۶۷ پیکسل است. مثلا اگر ارتفاع سایت شما 760 پیکسل باشد، می توانید آن را به ۱٫۶۱۸ تقسیم کنید. در نتیجه ابعاد مختص سایت شما پیدا می شود.

بنابراین اگر عرض عکس شما ۹۶۰ پیکسل باشد، آن را باید تقسیم بر ۱٫۶۱۸ کنید. به این دلیل که، جواب آن ۵۹۳ پیکسل میشود.

الان شما می دانید که عکس شما دارای ابعاد ۵۹۳*۳۶۷ پیکسل است.

مثلا اگر ارتفاع سایت شما 760 پیکسل باشد، می توانید آن را به ۱٫۶۱۸ تقسیم کنید. در نتیجه ابعاد مختص سایت شما پیدا می شود.

3. قانون هیک(hick’s law)

هیک قانونی برای خود دارد که می گوید هرچیز اضافی که در سایت خود دارید را حذف کنید. حذف مورا اضافی به مشتری کمک می کند، تا سریع تر انتخاب نماید.

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

4. قانون فیت (fitt’s law)

قانون  Fittموارد زیر از جمله :

زمان لازم برای حرکت به یک منطقه هدف (به عنوان مثال، با کلیک بر روی یک دکمه)

  • تابع فاصله از هدف
  • و اندازه هدف را تعیین می کند. به عبارت دیگر،هرچه یک شیء بزرگتر و نزدیکتر به ما باشد، بهتر است که از آن استفاده کنیم. Spotify باعث می شود که دکمه "Play" از دکمه های دیگر راحت تر کار کند.


مدیا پلیر
مدیا پلیر


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

اینکه یک دکمه نیمی از صفحه شما را جذب کند اصلا خوب نیست. این را هم باید بدانید که قانون fitt یک لگاریتم باینری است. در واقع نتایج در آن ، پیش بینی شده است. زمانی را در نظر بگیرید، که از یک دکمه کوچک و ساده استفاده می کنید. سرعت شما نسبت به زمانی که از دکمه بزرگ تر استفاده میکنید ۲۰% بیشتر است .  افزایش اندازه دکمه سرعت اشتراک گذاری کمتر می کند. این مهم است که اندازه دکمه مورد استفاده براساس نیاز باشد. مثلا برای دکمه نمایش آمار ،باید از دکمه بزرگتر استفاده شود، تا در دید بازدید کنندگان باشد. هم­چنین ، اگرد دو دکمه "ثبت" و "انصراف" داشته باشید، مطمئئنا ۹۹٫۹۹۹۹٪ می خواهید ثبت بیشتر به چشم بیاید. در نتیجه دکمه "ثبت" از دکمه "انصراف" باید بزرگتر باشد.

قانون سوم (Rule of Thirds)

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


قانون سوم در طراحی سایت
قانون سوم در طراحی سایت


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

6. قوانین طراحی(Gestalt )

این تئوری در واقع در مغز و فکر ماست. در ابتدا ، چشم ما جسم مورد نظر را می بیند. سپس مغز درک می کند، که چه چیزی را دیده است. عنصر تمرکز در ابتدا وجود نداشته و بعد از تفکر می آید. تصویر زیر را نگاه کنید. بدون هیچ تمرکزی، درابتدا تصویر سگ را می بینید.

طراحی سایت
طراحی سایت


اصل داستان همین است!!!
کاربر مورد نظر،  قبل از تشخیص  header، منو، پاورقی و... ،ابتدا تمام سایت شما را بازبینی می­ کند.  شما می توانید قوانین موجود در Gestaltرا مطالعه نمایید. دراین سایت متوجه می شوید که کاربران در طراحی چه چیزی را درک می کنند. در این مقاله تعدادی از این قوانین را برای شما بیان می کنیم.

1. قانون مجاورت

با طراحی موثر ، شما مطمئن می شوید، گزینه هایی که با هم می آیند کاربرد یکسانی ندارند. برای مثال منوی navigation،پاورقی و... باید کاربرد خود را داشته باشند.


قانون مجاورت
قانون مجاورت


2.  قانون شباهت

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


قانون بسته
قانون بسته


3- قانون بسته


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





همانطور که می بینید مغز شما قسمت بالای عکس را خط فرضی می سازد تا تصویر را بصورت کامل ببینید.


4. فضای سفید و طراحی تمیز در سایت


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

http://iranweblife.com/








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