صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از شماره 1 تا 10 , از مجموع 14

موضوع: 8 اصل تاثیرگذار درباره طراحی سایت که باید بدانید

  1. #1

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    8 اصل تاثیرگذار درباره طراحی سایت که باید بدانید

    طرح مسئله

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

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

    تمرین . لطفا دایره ها داخل عکس زیر را بر اساس اهمیت طبقه بندی کنید.



    بدون اینکه چیزی در مورد این دایره ها بدانید نیز به راحتی می توانید آنها را رده بندی کنید . به این اصل ، سلسله مراتب بصری می گویند.قسمت هایی از وب سایتتان از بقیه بخش ها مهم تر هستند ( فرم ها ، دکمه " همین حالا تماس بگیرید " ، بخش "مزیت های ما" و ... ) ، طبیعتا خواسته شما اینست که این بخش ها بیشتر مورد توجه قرار گیرند . اگر بخش منو سایت شما ، 10 آیتم دارد ، آیا اهمیت تمام آنها یکسان است ؟ بیشتر می خواهید کاربر کجا را کلیک کند ؟ لینک های مهم را برجسته تر کنید.سلسله مراتب فقط به اندازه عنصر مورد نظر مربوط نیست . مثلا Amazon دکمه “add to cart” را با استفاده از رنگ ، برجسته کرده :

    ادامه دارد ...

    منبع :
    appzweb.ir

  2. #2

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    از هدف کسب و کارتان آغاز کنید

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

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

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



    تمرین. وب گردی کنید و با دقت سلسله مراتب بصری در وب سایت ها را بیابید. سپس به سراغ وب سایت خود بروید و ببینید آیا چیزی مهم ( عناصر کلیدی که بینندگان عمدتا بدنبال آنند ) وجود دارد که در بالای سلسله مراتب بصری نباشد ؟ تغییرش دهید.

    ادامه دارد ...

    منبع : appzweb.ir


  3. #3

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست
    اصل 2 : نسبت جادویی

    " نسبت طلایی " عدد 1.618 ( عدد فی (ϕ)) است که تمامی عناصر بصری که با این تناسب طراحی شوند زیبایی خاصی پیدا می کنند ( یا حداقل اینطور می گویند ! ) .

    از سوی دیگر ،" دنباله فیبوناچی " را داریم که که هر عدد در این دنباله بصورت مجموع دو عدد قبلی تعریف می شود : ...0،1،1،2،3،5،8،13،21 . نکته جالب اینجاست که این دو مقوله به ظاهر بی ربط ، عددی یکسان تولید می کند.

    تصویر زیر ، تجسم بصری نسبت طلایی را نشان میدهد :



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



    آیا می توان این نسبت را برای طراحی وب بکار برد ؟ بله ، چرا که نه . بیایید نگاهی به توییتر بیندازیم :



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

    بنابراین اگر عرض محتوی وب سایت شما 960پیکسل است آن را به 1.618 تقسیم کرده که به عدد 593 پیکسل می رسید . در نتیجه عرض قسمت محتوی شما باید 593 پیکسل و عرض سایدبارتان 367 پیکسل باشد . اگر ارتفاع صفحه 760 پیکسل است ، می توانید برای زیبایی بیشتر آن را به دو زیرمجموعه 470 پیکسلی و 290 پیکسلی تقسیم کنید ( 760 تقسیم بر 1.618 برابر است با 470 ) .

    ادامه دارد ...

    منبع : appzweb.ir
    ویرایش توسط hooman_the1 : 2018-06-12 در ساعت 16:29

  4. #4

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    اصل 3 : قانون هیک
    اصل هیک می گوید که با اضافه کردن هر انتخاب جدید ، زمان برای اخذ تصمیم افزایش می یابد.

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

    ( **** به شدت به همه دوستان توصیه می کنم به سراغ کتاب The paradox of choice از دکتر Barry Schwartz مراجعه کنید . هم برای توضیح این اصل و هم برای بهداشت روانی در این عصر **** )

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

    در زمانه ای با انتخاب های نامحدود ، افراد نیاز به فیلترهای بهتری دارند ! اگر سبد کالاهایی که عرضه می کنید خیلی پر و پیمان است ، برای راحتی کاربران در انتخاب از فیلترهای بهتر استفاده کنید.

    Wine Library وب سایتی است که تعداد زیادی انواع نوشیدنی می فروشد. آنها در استفاده از فیلتر ها بسیار خوب عمل می کنند ( در قسمت چپ ) :



    ادامه دارد ...

    منبع : appzweb.ir



  5. #5

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    اصل 4 : قانون فیت

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

    Spotify دکمه play را بصورتی طراحی کرده که استفاده از آن برای کاربران از دیگر دکمه ها آسانتر است :



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

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

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

    این موضوع شبیه به قانون اندازه هدف است .

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

    تصور کنید که یک فرم طراحی کرده اید که کاربر باید آن را پر کند ، در پایان فرم دو دکمه “submit “ و “reset” تعبیه کرده اید



    99.99999% از کاربران دکمه submit را می زنند . بنابراین باید آن را بزرگتر طراحی کنید.

    ادامه دارد ...

    منبع : appzweb.ir



  6. کاربر زیر به خاطر این پست از hooman_the1 تشکر کرده است :


  7. #6

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    اصل 5 : قانون سومی ها

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

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

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

    ادامه دارد ...

    منبع : appzweb.ir


  8. #7

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    اصل 6 : قوانین طراحی گشتالت
    گشتالت ، تئوری ذهن و فکر است و بر این اساس است که چشم انسان قبل از دیدن جزییات به نمای کلی توجه می کند. منظور من شکل زیر است :


    توجه کنید که در نگاه اول یک سگ را دیدید بدون اینکه بر روی نواحی سیاه رنگی که سگ از آنان تشکیل شده تمرکز کنید.
    نکته کلیدی این نظریه اینست که افراد ، کلیت آبجکت را قبل از اجزاء می بینند . کاربران ابتدا نمای کلی وب سایت شما را می بینند قبل از اینکه هدر ، منو ، فوتر و چیزهای دیگر را تمایز دهند . Kurt Koffka یکی از بزرگان و پایه گذاران گشتالیسم می گوید : " کلیت آبجکت مستقل از اجزائش ، وجود دارد " .
    تئوری گشتالت با 8 قانون ، چگونگی درک افراد از چیزی که می بینند را توضیح می دهد . این قوانین عبارتند از :

    ادامه دارد ...

    منبع : appzweb.ir



  9. #8

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست


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

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

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



    سایت Craiglist از این قانون برای برای راحت کردن کاربینندگان در تشخیص ساب منو های مربوط به منو For sale استفاده کرده.



    ادامه دارد ...

    منبع : appzweb.ir


  10. #9

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

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

    افراد آبجکت های شبیه به هم را در یک گروه قرار می دهند . این شباهت می تواند در زمینه شکل ، رنگ ، سایه و چیزهای دیگر باشد .
    در شکل زیر ، ذهن بیننده نقاط سفید را در یک گروه و سیاه ها را نیز بدلیل شباهت ظاهری در گروهی دیگر قرار می دهد :



    سایت Codeschool تمامی متن های گواهی (testimonial box) را شبیه به هم ساخته ، تا بتوان آنها را یک گروه دانست :



    ادامه دارد ...

    منبع : appzweb.ir



  11. #10

    تاریخ عضویت
    Feb 2016
    نوشته ها
    54
    تشکر
    0
    4 بار تشکر شده در 4 پست

    3.قانون بسته شدن

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



    استفاده از قانون بسته شدن باعث می شود لوگو ها یا عناصر طراحی خیلی جذاب شوند . مثالی جالب در این رابطه توسط Sir Peter Scott برای صندوق جهانی طبیعت در سال 1961 طراحی شده :




    ادامه دارد ...

    منبع : appzweb.ir



صفحه 1 از 2 12 آخرینآخرین

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید
  • شما نمیتوانید پست های خود را ویرایش کنید
  •