1. ‫رياوشىاسی روگ ها در طراحی صفحات يب‬
‫ايلیه همایش تجربه کاربری تهران مهرماه 29‬

2. ‫رئوس مطالة‬
‫‪ ‬همسهِ ای زض ضاتطِ تا ًمص ضًگ ّا زض ططاحی غفحات ٍب‬
‫‪ ‬تطضسی هؼاًی ضًگ ّا‬
‫‪ ‬تطضسی ًمص کٌتطاست ٍ اضثاع ضًگ ّا‬
‫‪ ‬هالحظات هیاى فطٌّگی‬
‫‪ ‬تطضسی گطٍُ ّسف‬
‫‪ ‬تطضسی ًمص ضًگ ّا زض افعایص فطٍش‬
‫‪ ‬هثال ّایی اظ استفازُ زضست ٍ ًازضست ضًگ ّا‬

3. ‫مقذمه‬
‫‪‬ضًگ ّا ًمص تسیاض هْوی زض تؼاهل کاضتطاى تا ٍب سایت ایفا ًوَزُ ٍ تِ ایجاز یا ضکستت‬
‫تجطتِ کاضتطی هٌجط ذَاٌّس ضس.‬
‫‪ ‬لضاٍت ًاذَزآگاُ کاضتطاى اظ یک ٍتسایت زض 09 ثاًیِ اٍل اتفاق افتازُ ٍ 26 تتا 09 زضغتس‬
‫ایي لضاٍت تطپایِ ضًگ ّا غَضت هی گیطز (‪)The Institute for Color and Research‬‬
‫افسایش‬
‫خستگی‬
‫افسایش‬
‫استرس‬
‫صذهه ته‬
‫تیٌایی‬
‫تاثیر‬
‫هٌفی تر‬
‫توایالت‬
‫افسایش‬
‫خطاها‬
‫ٍ ...‬

4. ‫مقذمه‬
‫‪ ‬پاسد تِ سَاالت ظیط زض ططاحی ٍ تِ کاضگیطی هٌاسة ضًگ ّا کوک هتی‬
‫کٌس:‬
‫‪ ‬اّساف اغلی ٍتسایت چیست؟‬
‫‪ ‬هحػَالت ٍ ذسهات ٍتسایت چیست؟‬
‫‪ ‬کاضتطاى ٍتسایت چِ کساًی ّستٌس؟‬

5. ‫مقذمه‬
‫‪ ‬هَلفِ ّای افعایص ذَاًایی سایت ٍ ایجاز تجطتِ کاضتطی هٌاسة‬
‫اًتخاب کٌتراست‬
‫هٌاسة‬
‫اًتخاب رًگ‬
‫هٌاسة ٍ سازگار‬
‫تا هذف‬
‫ترکیة هٌاسة‬
‫رًگ ها‬
‫چه تعذاد رًگ‬
‫افسایش‬
‫خَاًایی ٍ‬
‫ایجاد تجرته‬
‫کارتری‬
‫در ًظر گرفتي‬
‫درجه اشثاع‬

6. ‫معانی رنگ ها‬
‫‪ ‬قرمس: اًطغی، کویاتی، فطٍش، ضطٍضی، ذطط، ضَض ٍ ػطك ٍ تؼػة‬
‫‪ ‬ظهاًی کِ تِ زًثال افعایص تَجِ ٍ اضتماء فطٍش یک‬
‫هحػَل تاضین تِ کاض هی آیس.‬
‫‪ ‬واروجی: السام، ػول ٍ حطکت، سطظًسگی ٍ تی تاکی، تحطیک کطزى‬
‫‪ ‬تطای زضذَاست ػولیات اظ ایي ضًگ‬
‫استفازُ هی ضَز (زکوِ ّای ذطیس،‬
‫ثثت ًام ٍ...)‬

7. ‫معانی رنگ ها (ادامه)‬
‫‪ ‬زرد: تاظگی، ضازی، گطهی، هْیج، ذَضثیٌی‬
‫‪ ‬هی تَاًس تَجِ تاالیی ضا تِ ذَز جلة کٌس‬
‫زض ػیي حال کِ حس اضططاب ضًگ لطهع‬
‫ضا ایجاز ًوی کٌس. تطای ‪submission‬‬
‫هٌاسة است.‬
‫‪ ‬سثس: پایساضی، آضاهص ٍ استطاحت، پَل، ًَع زٍستی‬
‫‪ ‬تْتطیي ضًگ تطای آضام کطزى هطزم است.‬
‫هؼوَال زض تیواضستاى ّا ٍ تطای آضام کطزى‬
‫تیواضاى استفازُ هی ضَز. تطای زاًلَز، زػا، ٍ ... تِ کاض هی ضٍز.‬

8. ‫معانی رنگ ها (ادامه)‬
‫‪ ‬آتی: سٌتی، لاتل اػتواز، اهٌیت، استاًساضز‬
‫‪ ‬تاًک ّا ٍ هَسسات هالی اظ ایي ضًگ استفازُ‬
‫هی کٌٌس. ّوچٌیي زض ططاحی یًَیفطم ّا اظ ایي‬
‫ضًگ استفازُ هی ضَز. زض تطاکٌص ّای هالی‬
‫هی تَاى اظ آى استفازُ کطز تِ زلیل حس آضاهطی‬
‫کِ الما هی کٌس.‬
‫‪ ‬ارغًاوی: پازضاّی، آضاهص، فطاٍاًی، ذاللیت‬
‫‪ ‬تطای فطٍش هحػَالت پیططفتِ ٍ‬
‫گطاى لیوت تِ کاض هی ضٍز.‬

9. ‫معانی رنگ ها (ادامه)‬
‫‪ ‬صًرتی: جَاًی، زذتطاًِ، ظًاًِ، هطثَع‬
‫‪ ‬تْتطیي گعیٌِ تطای ّسف لطاضزازى هراطثاى هًَث‬
‫است. تِ ذػَظ تطای زذتطاى جَاى تسیاض هٌاسة‬
‫است. الثتِ ضکل هالین تط آى تطای تاًَاى زض تواهی‬
‫سٌیي هٌاسة است.‬
‫‪ ‬سیاٌ: تجول، جسی، لسضت، جسَض ٍ گستاخ‬
‫‪ ‬تطای تاظاضیاتی هحػَالت لَکس ٍ‬
‫گطاى لیوت ضًگ هٌاسثی است. تطای‬
‫تیاى جوالت ٍ افکاض هْن، تِ کاض هیطٍز.‬

10. ‫معانی رنگ ها (ادامه)‬
‫‪ ‬قهًٌ ای: ذاکی، پایِ ای، لاتل اطویٌاى‬
‫‪ ‬حس فطٍتٌی ٍ تَاضغ ضا الما هی کٌس.‬
‫‪ ‬سفیس: پاکی، لطافت، ذلَظ، سازگی، تی گٌاّی‬
‫‪ ‬تیطتطیي استفازُ ضا زض غفحات ٍب‬
‫زاضتِ ٍ تِ ًَػی تا ضًگ ّای زیگط‬
‫تطکیة هی ضَز.‬

11. ‫کنتراست‬
‫‪ ‬کٌتطاست ّواى اذتالف زضجِ زضذطٌسگی یا ضٍضٌی است‬
‫‪ ‬کٌتطاست هٌاسة زض غفحِ ٍب، تجطتِ تػطی هٌاسثی تطای کاضتط ایجاز هی ًوایس.‬
‫‪ ‬کٌتطاست هٌاسة تاػث تْثَز ذَاًایی هتي ٍ کاّص ذستگی چطن کاضتطاى ذَاّس ضس.‬
‫‪ ‬تِ ٍیػُ زض هَضز کاضتطاى تا سٌیي تاالتط ٍ تیٌایی ضؼیفتط، ًمطی اساسی ایفا هی کٌس.‬
‫“مثالی در راتطٍ تا عذم استفادٌ مىاسة از روگ ي کىتراست مىاسة، پس‬
‫زمیىٍ سیاٌ تا مته سفیذ تٍ کاررفتٍ درآن است”‬
‫‪ ‬کٌتطاست تطای زستِ تٌسی ٍ طثمِ تٌسی‬
‫غفحِ ًیع تِ کاض هی ضٍز (سطغفحِ،‬
‫پاغفحِ ٍ ...)‬

12. ‫اشثاع‬
‫هحرک، پَیا، جلة‬
‫دٍستاًه ٍ حرفه‬
‫تَجه ( ترای‬
‫‪ ‬ػالٍُ تط کٌتطاست زضجِ ای (ترای هٌَها، هی تَاًس تِ ذستگی طراحی دکوه ها، زض‬
‫چطن تتِ ٍیتػُ‬
‫اضثاع ضًگ ًیع‬
‫تیٌایی سرصفحه‬
‫لیٌک ها، ٍ پیام‬
‫افطاز تا سٌیي تاالتط ٍ افطاز تاپاًل ها، ضؼیف تط تاثیط گصاضز.‬
‫ٍ پس زهیٌه ته کار‬
‫های سیستوی ته‬
‫هی رٍد)‬
‫کار هی رٍد)‬
‫‪ ‬اضثاع تِ هؼٌی هیعاى ذاکستطی تِ کاض گطفتِ ضسُ زض ضًتگ استت. ّطچتِ ایتي‬
‫هیعاى کوتط تاضس یؼٌی ضًگ زضجِ اضثاع تاالتطی زاضز.‬

13. ‫چه تعذاد رنگ‬
‫‪ ‬سایتی کِ تؼساز ضًگ کوتطی زض آى تِ کاض ضفتِ تاضس ضاحت تط تِ ذاطط هی هاًس.‬
‫‪ ‬اها تایس زض کٌاض ضًگ ّای اغلی تطًس سایت، اظ ضًگ ّای هتفاٍت ًیع استفازُ کتطز تتا‬
‫ضاّثطی سایت تْثَز یاتس ٍ سایت ططاٍت ٍ پَیایی تْتطی پیسا کٌس.‬
‫‪ ‬تِ ػٌَاى هثال اگط لَگَی سایت تیطُ است، استفازُ اظ ضًگ ضٍضي زض کٌتاض آى، جاشتتِ‬
‫سایت ضا افعایص هی زّس.‬

14. ‫تفاوت های میان فرهنگی‬

15. ‫تفاوت های میان فرهنگی (ادامه)‬

16. ‫گروه هذف‬
‫‪ ‬ػالٍُ تط هَاضز شکط ضسُ، زض اًتراب ضًگ ّای غفحِ ٍب تایس تَجِ ٍیػُ ای تِ‬
‫هتغیطّایی ظیط زاضت:‬
‫‪ ‬گريٌ سىی‬
‫‪ ‬کالس اجتماعی‬
‫‪ ‬جىسیت‬
‫‪ ‬جَاًاى ػاللِ تیطتطی تِ ضًگ ّای ضٍضي تط ّوچَى ”قرمس ٍ سبثس ٍ زرد“‬
‫زاضًس‬
‫‪ ‬افطاز تالغ تا ضًگ ّای تیطُ تط ّوچَى ”سیاٌ“ اضتثاط تْتطی تطلطاض هی کٌٌس‬
‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬
‫‪your sales by choosing The right color”, The‬‬
‫.‪Creative Nerd‬‬

17. ‫گروه هذف (ادامه)‬
‫‪ ‬سِ ضًگ هَضز ػاللِ تاًَاى:‬
‫‪ ‬آتی‬
‫‪ ‬ارغًاوی‬
‫‪ ‬سثس‬
‫‪ ‬صًرتی ضًگ هَضز ػاللِ تاًَاى تیي سٌیي ”51 تا 52“ است‬
‫‪ ‬کوتطیي ػاللِ تاًَاى تِ ضًگ ّای واروجی، قهًٌ ای ٍ خاکستری است‬
‫”تا افسایش سه میسان عالقٍ ي ايلًیت اوتخاب روگ ارغًاوی تیشتر‬
‫شذٌ ي ایه درحالیست کٍ ایه عالقٍ در مًرد روگ سثس کم می شًد“‬

18. ‫گروه هذف (ادامه)‬
‫‪ ‬سِ ضًگ هَضز ػاللِ آلایاى:‬
‫‪ ‬آتی‬
‫‪ ‬سثس‬
‫‪ ‬سیاٌ‬
‫‪ ‬کوتطیي ػاللِ تاًَاى تِ ضًگ ّای قهًٌ ای، واروجی ٍ ارغًاوی است‬
‫”تا افسایش سه میسان عالقٍ ي ايلًیت اوتخاب روگ ارغًاوی ي قهًٌ‬
‫ای تیشتر شذٌ ي ایه درحالیست کٍ عذم عالقٍ تٍ روگ واروجی‬
‫افسایش می یاتذ“‬

19. ‫تررسی نقش رنگ ها در افسایش فروش‬
‫‪ ‬تطای افعایص فطٍش زض ٍتسایت، ضػایت سِ گام حائع اّویت است:‬
‫اًتخاب ًَع‬
‫هذف‬
‫هشخص ًوَدى‬
‫احساس هَرد‬
‫ًظر ترای القا ته‬
‫هشتری‬
‫تٌظین رًگ ها‬

20. ‫گام اول : انتخاب نوع هذف‬
‫‪ ‬جتتسٍل ضٍتتتطٍ تْتتتطیي‬
‫ت‬
‫ت‬
‫ت‬
‫تطکیة ضًگ ّا تطای ططاحتی‬
‫ٍتسایت ضا تط هثٌتای ّتسف ٍ‬
‫ًَع تاظزیس کٌٌسُ، زستِ تٌتسی‬
‫هی کٌس‬
‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬
‫‪your sales by choosing The right color”, The‬‬
‫.‪Creative Nerd‬‬

21. ‫گام دوم: ایجاد حس مورد نظر ترای مشتری‬
‫‪ ‬تا تَجِ تِ ًَع حستی‬
‫کِ هی ذَاّین تِ هطتطی‬
‫المتا کٌتین هتی ت تَاًین اظ‬
‫ت ت ت ت‬
‫ضًگ ّای جتسٍل ضٍتتطٍ‬
‫استفازُ کٌین.‬
‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬
‫‪your sales by choosing The right color”, The‬‬
‫.‪Creative Nerd‬‬

22. ‫گام سوم: تنظیم رنگ ها‬
‫‪ ‬هٌظَض هطرع ًوَزى کٌتطاست ٍ اضثاع هٌاسة تطای ضًگ ّای اًتراب ضسُ است‬
‫‪ ‬ػالٍُ تط ایي تطکیة هٌاسة ضًگ ّتا زض کٌتاض ّتن ٍ تَجتِ تتِ هستائلی ّوچتَى‬
‫کَضضًگی ٍ ... زض ایي گام اًجام هی ضَز.‬
‫‪ ‬تِ ػٌَاى هثال ػسم استفازُ اظ ضًگ ّای لطهع ٍ سثع زض کٌاض یکسیگط (کَضضًگی).‬

23. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬تَجِ تِ تفاٍت ّای فطٌّگی (‪)Mcdonald‬‬

24. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬استفازُ اظ تؼساز ضًگ هحسٍز ٍ تطکیة هٌاسة ضًگ ّا (‪)Walmart‬‬

25. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬ػسم تِ کاضگیطی ضًگ لَگَ زض ططاحی سایت (‪)Wells Fargo‬‬

26. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬کٌتطاست ًاهٌاسة ٍ تِ کاضگیطی ضًگ ّای ًاهٌاسة (‪)Gitelink.com‬‬