‫رياوشىاسی روگ ها در طراحی صفحات يب‬

‫ايلیه همایش تجربه کاربری تهران مهرماه 29‬
‫رئوس مطالة‬
‫‪ ‬همسهِ ای زض ضاتطِ تا ًمص ضًگ ّا زض ططاحی غفحات ٍب‬

‫‪ ‬تطضسی هؼاًی ضًگ ّا‬
‫‪ ‬تطضسی ًمص کٌتطاست ٍ اض...
‫مقذمه‬
‫‪‬ضًگ ّا ًمص تسیاض هْوی زض تؼاهل کاضتطاى تا ٍب سایت ایفا ًوَزُ ٍ تِ ایجاز یا ضکستت‬
‫تجطتِ کاضتطی هٌجط ذَاٌّس ضس...
‫مقذمه‬
‫‪ ‬پاسد تِ سَاالت ظیط زض ططاحی ٍ تِ کاضگیطی هٌاسة ضًگ ّا کوک هتی‬
‫کٌس:‬
‫‪ ‬اّساف اغلی ٍتسایت چیست؟‬
‫‪ ‬هحػَ...
‫مقذمه‬
‫‪ ‬هَلفِ ّای افعایص ذَاًایی سایت ٍ ایجاز تجطتِ کاضتطی هٌاسة‬
‫اًتخاب کٌتراست‬
‫هٌاسة‬
‫اًتخاب رًگ‬
‫هٌاسة ٍ سازگ...
‫معانی رنگ ها‬
‫‪ ‬قرمس: اًطغی، کویاتی، فطٍش، ضطٍضی، ذطط، ضَض ٍ ػطك ٍ تؼػة‬

‫‪ ‬ظهاًی کِ تِ زًثال افعایص تَجِ ٍ اضتماء ...
‫معانی رنگ ها (ادامه)‬
‫‪ ‬زرد: تاظگی، ضازی، گطهی، هْیج، ذَضثیٌی‬

‫‪ ‬هی تَاًس تَجِ تاالیی ضا تِ ذَز جلة کٌس‬
‫زض ػیي ح...
‫معانی رنگ ها (ادامه)‬
‫‪ ‬آتی: سٌتی، لاتل اػتواز، اهٌیت، استاًساضز‬

‫‪ ‬تاًک ّا ٍ هَسسات هالی اظ ایي ضًگ استفازُ‬
‫هی ...
‫معانی رنگ ها (ادامه)‬
‫‪ ‬صًرتی: جَاًی، زذتطاًِ، ظًاًِ، هطثَع‬

‫‪ ‬تْتطیي گعیٌِ تطای ّسف لطاضزازى هراطثاى هًَث‬
‫است. ...
‫معانی رنگ ها (ادامه)‬
‫‪ ‬قهًٌ ای: ذاکی، پایِ ای، لاتل اطویٌاى‬

‫‪ ‬حس فطٍتٌی ٍ تَاضغ ضا الما هی کٌس.‬

‫‪ ‬سفیس: پاک...
‫کنتراست‬
‫‪ ‬کٌتطاست ّواى اذتالف زضجِ زضذطٌسگی یا ضٍضٌی است‬
‫‪ ‬کٌتطاست هٌاسة زض غفحِ ٍب، تجطتِ تػطی هٌاسثی تطای کاضتط...
‫اشثاع‬

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

‫اًتخاب ًَع‬
‫هذف‬

‫هشخ...
‫گام اول : انتخاب نوع هذف‬
‫‪ ‬جتتسٍل ضٍتتتطٍ تْتتتطیي‬
‫ت‬
‫ت‬
‫ت‬
‫تطکیة ضًگ ّا تطای ططاحتی‬
‫ٍتسایت ضا تط هثٌتای ّتسف ...
‫گام دوم: ایجاد حس مورد نظر ترای مشتری‬
‫‪ ‬تا تَجِ تِ ًَع حستی‬
‫کِ هی ذَاّین تِ هطتطی‬
‫المتا کٌتین هتی ت تَاًین اظ‬
‫ت...
‫گام سوم: تنظیم رنگ ها‬
‫‪ ‬هٌظَض هطرع ًوَزى کٌتطاست ٍ اضثاع هٌاسة تطای ضًگ ّای اًتراب ضسُ است‬
‫‪ ‬ػالٍُ تط ایي تطکیة ه...
‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬تَجِ تِ تفاٍت ّای فطٌّگی (‪)Mcdonald‬‬
‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬استفازُ اظ تؼساز ضًگ هحسٍز ٍ تطکیة هٌاسة ضًگ ّا (‪)Walmart‬‬
‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬ػسم تِ کاضگیطی ضًگ لَگَ زض ططاحی سایت (‪)Wells Fargo‬‬
‫مثال هایی از استفاده درست و نادرست رنگ ها‬
‫‪ ‬کٌتطاست ًاهٌاسة ٍ تِ کاضگیطی ضًگ ّای ًاهٌاسة (‪)Gitelink.com‬‬
Upcoming SlideShare
Loading in …5
×

Asgarimehr-esfahani

1,614 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,614
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
123
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Asgarimehr-esfahani

  1. 1. ‫رياوشىاسی روگ ها در طراحی صفحات يب‬ ‫ايلیه همایش تجربه کاربری تهران مهرماه 29‬
  2. 2. ‫رئوس مطالة‬ ‫‪ ‬همسهِ ای زض ضاتطِ تا ًمص ضًگ ّا زض ططاحی غفحات ٍب‬ ‫‪ ‬تطضسی هؼاًی ضًگ ّا‬ ‫‪ ‬تطضسی ًمص کٌتطاست ٍ اضثاع ضًگ ّا‬ ‫‪ ‬هالحظات هیاى فطٌّگی‬ ‫‪ ‬تطضسی گطٍُ ّسف‬ ‫‪ ‬تطضسی ًمص ضًگ ّا زض افعایص فطٍش‬ ‫‪ ‬هثال ّایی اظ استفازُ زضست ٍ ًازضست ضًگ ّا‬
  3. 3. ‫مقذمه‬ ‫‪‬ضًگ ّا ًمص تسیاض هْوی زض تؼاهل کاضتطاى تا ٍب سایت ایفا ًوَزُ ٍ تِ ایجاز یا ضکستت‬ ‫تجطتِ کاضتطی هٌجط ذَاٌّس ضس.‬ ‫‪ ‬لضاٍت ًاذَزآگاُ کاضتطاى اظ یک ٍتسایت زض 09 ثاًیِ اٍل اتفاق افتازُ ٍ 26 تتا 09 زضغتس‬ ‫ایي لضاٍت تطپایِ ضًگ ّا غَضت هی گیطز (‪)The Institute for Color and Research‬‬ ‫افسایش‬ ‫خستگی‬ ‫افسایش‬ ‫استرس‬ ‫صذهه ته‬ ‫تیٌایی‬ ‫تاثیر‬ ‫هٌفی تر‬ ‫توایالت‬ ‫افسایش‬ ‫خطاها‬ ‫ٍ ...‬
  4. 4. ‫مقذمه‬ ‫‪ ‬پاسد تِ سَاالت ظیط زض ططاحی ٍ تِ کاضگیطی هٌاسة ضًگ ّا کوک هتی‬ ‫کٌس:‬ ‫‪ ‬اّساف اغلی ٍتسایت چیست؟‬ ‫‪ ‬هحػَالت ٍ ذسهات ٍتسایت چیست؟‬ ‫‪ ‬کاضتطاى ٍتسایت چِ کساًی ّستٌس؟‬
  5. 5. ‫مقذمه‬ ‫‪ ‬هَلفِ ّای افعایص ذَاًایی سایت ٍ ایجاز تجطتِ کاضتطی هٌاسة‬ ‫اًتخاب کٌتراست‬ ‫هٌاسة‬ ‫اًتخاب رًگ‬ ‫هٌاسة ٍ سازگار‬ ‫تا هذف‬ ‫ترکیة هٌاسة‬ ‫رًگ ها‬ ‫چه تعذاد رًگ‬ ‫افسایش‬ ‫خَاًایی ٍ‬ ‫ایجاد تجرته‬ ‫کارتری‬ ‫در ًظر گرفتي‬ ‫درجه اشثاع‬
  6. 6. ‫معانی رنگ ها‬ ‫‪ ‬قرمس: اًطغی، کویاتی، فطٍش، ضطٍضی، ذطط، ضَض ٍ ػطك ٍ تؼػة‬ ‫‪ ‬ظهاًی کِ تِ زًثال افعایص تَجِ ٍ اضتماء فطٍش یک‬ ‫هحػَل تاضین تِ کاض هی آیس.‬ ‫‪ ‬واروجی: السام، ػول ٍ حطکت، سطظًسگی ٍ تی تاکی، تحطیک کطزى‬ ‫‪ ‬تطای زضذَاست ػولیات اظ ایي ضًگ‬ ‫استفازُ هی ضَز (زکوِ ّای ذطیس،‬ ‫ثثت ًام ٍ...)‬
  7. 7. ‫معانی رنگ ها (ادامه)‬ ‫‪ ‬زرد: تاظگی، ضازی، گطهی، هْیج، ذَضثیٌی‬ ‫‪ ‬هی تَاًس تَجِ تاالیی ضا تِ ذَز جلة کٌس‬ ‫زض ػیي حال کِ حس اضططاب ضًگ لطهع‬ ‫ضا ایجاز ًوی کٌس. تطای ‪submission‬‬ ‫هٌاسة است.‬ ‫‪ ‬سثس: پایساضی، آضاهص ٍ استطاحت، پَل، ًَع زٍستی‬ ‫‪ ‬تْتطیي ضًگ تطای آضام کطزى هطزم است.‬ ‫هؼوَال زض تیواضستاى ّا ٍ تطای آضام کطزى‬ ‫تیواضاى استفازُ هی ضَز. تطای زاًلَز، زػا، ٍ ... تِ کاض هی ضٍز.‬
  8. 8. ‫معانی رنگ ها (ادامه)‬ ‫‪ ‬آتی: سٌتی، لاتل اػتواز، اهٌیت، استاًساضز‬ ‫‪ ‬تاًک ّا ٍ هَسسات هالی اظ ایي ضًگ استفازُ‬ ‫هی کٌٌس. ّوچٌیي زض ططاحی یًَیفطم ّا اظ ایي‬ ‫ضًگ استفازُ هی ضَز. زض تطاکٌص ّای هالی‬ ‫هی تَاى اظ آى استفازُ کطز تِ زلیل حس آضاهطی‬ ‫کِ الما هی کٌس.‬ ‫‪ ‬ارغًاوی: پازضاّی، آضاهص، فطاٍاًی، ذاللیت‬ ‫‪ ‬تطای فطٍش هحػَالت پیططفتِ ٍ‬ ‫گطاى لیوت تِ کاض هی ضٍز.‬
  9. 9. ‫معانی رنگ ها (ادامه)‬ ‫‪ ‬صًرتی: جَاًی، زذتطاًِ، ظًاًِ، هطثَع‬ ‫‪ ‬تْتطیي گعیٌِ تطای ّسف لطاضزازى هراطثاى هًَث‬ ‫است. تِ ذػَظ تطای زذتطاى جَاى تسیاض هٌاسة‬ ‫است. الثتِ ضکل هالین تط آى تطای تاًَاى زض تواهی‬ ‫سٌیي هٌاسة است.‬ ‫‪ ‬سیاٌ: تجول، جسی، لسضت، جسَض ٍ گستاخ‬ ‫‪ ‬تطای تاظاضیاتی هحػَالت لَکس ٍ‬ ‫گطاى لیوت ضًگ هٌاسثی است. تطای‬ ‫تیاى جوالت ٍ افکاض هْن، تِ کاض هیطٍز.‬
  10. 10. ‫معانی رنگ ها (ادامه)‬ ‫‪ ‬قهًٌ ای: ذاکی، پایِ ای، لاتل اطویٌاى‬ ‫‪ ‬حس فطٍتٌی ٍ تَاضغ ضا الما هی کٌس.‬ ‫‪ ‬سفیس: پاکی، لطافت، ذلَظ، سازگی، تی گٌاّی‬ ‫‪ ‬تیطتطیي استفازُ ضا زض غفحات ٍب‬ ‫زاضتِ ٍ تِ ًَػی تا ضًگ ّای زیگط‬ ‫تطکیة هی ضَز.‬
  11. 11. ‫کنتراست‬ ‫‪ ‬کٌتطاست ّواى اذتالف زضجِ زضذطٌسگی یا ضٍضٌی است‬ ‫‪ ‬کٌتطاست هٌاسة زض غفحِ ٍب، تجطتِ تػطی هٌاسثی تطای کاضتط ایجاز هی ًوایس.‬ ‫‪ ‬کٌتطاست هٌاسة تاػث تْثَز ذَاًایی هتي ٍ کاّص ذستگی چطن کاضتطاى ذَاّس ضس.‬ ‫‪ ‬تِ ٍیػُ زض هَضز کاضتطاى تا سٌیي تاالتط ٍ تیٌایی ضؼیفتط، ًمطی اساسی ایفا هی کٌس.‬ ‫“مثالی در راتطٍ تا عذم استفادٌ مىاسة از روگ ي کىتراست مىاسة، پس‬ ‫زمیىٍ سیاٌ تا مته سفیذ تٍ کاررفتٍ درآن است”‬ ‫‪ ‬کٌتطاست تطای زستِ تٌسی ٍ طثمِ تٌسی‬ ‫غفحِ ًیع تِ کاض هی ضٍز (سطغفحِ،‬ ‫پاغفحِ ٍ ...)‬
  12. 12. ‫اشثاع‬ ‫هحرک، پَیا، جلة‬ ‫دٍستاًه ٍ حرفه‬ ‫تَجه ( ترای‬ ‫‪ ‬ػالٍُ تط کٌتطاست زضجِ ای (ترای هٌَها، هی تَاًس تِ ذستگی طراحی دکوه ها، زض‬ ‫چطن تتِ ٍیتػُ‬ ‫اضثاع ضًگ ًیع‬ ‫تیٌایی سرصفحه‬ ‫لیٌک ها، ٍ پیام‬ ‫افطاز تا سٌیي تاالتط ٍ افطاز تاپاًل ها، ضؼیف تط تاثیط گصاضز.‬ ‫ٍ پس زهیٌه ته کار‬ ‫های سیستوی ته‬ ‫هی رٍد)‬ ‫کار هی رٍد)‬ ‫‪ ‬اضثاع تِ هؼٌی هیعاى ذاکستطی تِ کاض گطفتِ ضسُ زض ضًتگ استت. ّطچتِ ایتي‬ ‫هیعاى کوتط تاضس یؼٌی ضًگ زضجِ اضثاع تاالتطی زاضز.‬
  13. 13. ‫چه تعذاد رنگ‬ ‫‪ ‬سایتی کِ تؼساز ضًگ کوتطی زض آى تِ کاض ضفتِ تاضس ضاحت تط تِ ذاطط هی هاًس.‬ ‫‪ ‬اها تایس زض کٌاض ضًگ ّای اغلی تطًس سایت، اظ ضًگ ّای هتفاٍت ًیع استفازُ کتطز تتا‬ ‫ضاّثطی سایت تْثَز یاتس ٍ سایت ططاٍت ٍ پَیایی تْتطی پیسا کٌس.‬ ‫‪ ‬تِ ػٌَاى هثال اگط لَگَی سایت تیطُ است، استفازُ اظ ضًگ ضٍضي زض کٌتاض آى، جاشتتِ‬ ‫سایت ضا افعایص هی زّس.‬
  14. 14. ‫تفاوت های میان فرهنگی‬
  15. 15. ‫تفاوت های میان فرهنگی (ادامه)‬
  16. 16. ‫گروه هذف‬ ‫‪ ‬ػالٍُ تط هَاضز شکط ضسُ، زض اًتراب ضًگ ّای غفحِ ٍب تایس تَجِ ٍیػُ ای تِ‬ ‫هتغیطّایی ظیط زاضت:‬ ‫‪ ‬گريٌ سىی‬ ‫‪ ‬کالس اجتماعی‬ ‫‪ ‬جىسیت‬ ‫‪ ‬جَاًاى ػاللِ تیطتطی تِ ضًگ ّای ضٍضي تط ّوچَى ”قرمس ٍ سبثس ٍ زرد“‬ ‫زاضًس‬ ‫‪ ‬افطاز تالغ تا ضًگ ّای تیطُ تط ّوچَى ”سیاٌ“ اضتثاط تْتطی تطلطاض هی کٌٌس‬ ‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬ ‫‪your sales by choosing The right color”, The‬‬ ‫.‪Creative Nerd‬‬
  17. 17. ‫گروه هذف (ادامه)‬ ‫‪ ‬سِ ضًگ هَضز ػاللِ تاًَاى:‬ ‫‪ ‬آتی‬ ‫‪ ‬ارغًاوی‬ ‫‪ ‬سثس‬ ‫‪ ‬صًرتی ضًگ هَضز ػاللِ تاًَاى تیي سٌیي ”51 تا 52“ است‬ ‫‪ ‬کوتطیي ػاللِ تاًَاى تِ ضًگ ّای واروجی، قهًٌ ای ٍ خاکستری است‬ ‫”تا افسایش سه میسان عالقٍ ي ايلًیت اوتخاب روگ ارغًاوی تیشتر‬ ‫شذٌ ي ایه درحالیست کٍ ایه عالقٍ در مًرد روگ سثس کم می شًد“‬
  18. 18. ‫گروه هذف (ادامه)‬ ‫‪ ‬سِ ضًگ هَضز ػاللِ آلایاى:‬ ‫‪ ‬آتی‬ ‫‪ ‬سثس‬ ‫‪ ‬سیاٌ‬ ‫‪ ‬کوتطیي ػاللِ تاًَاى تِ ضًگ ّای قهًٌ ای، واروجی ٍ ارغًاوی است‬ ‫”تا افسایش سه میسان عالقٍ ي ايلًیت اوتخاب روگ ارغًاوی ي قهًٌ‬ ‫ای تیشتر شذٌ ي ایه درحالیست کٍ عذم عالقٍ تٍ روگ واروجی‬ ‫افسایش می یاتذ“‬
  19. 19. ‫تررسی نقش رنگ ها در افسایش فروش‬ ‫‪ ‬تطای افعایص فطٍش زض ٍتسایت، ضػایت سِ گام حائع اّویت است:‬ ‫اًتخاب ًَع‬ ‫هذف‬ ‫هشخص ًوَدى‬ ‫احساس هَرد‬ ‫ًظر ترای القا ته‬ ‫هشتری‬ ‫تٌظین رًگ ها‬
  20. 20. ‫گام اول : انتخاب نوع هذف‬ ‫‪ ‬جتتسٍل ضٍتتتطٍ تْتتتطیي‬ ‫ت‬ ‫ت‬ ‫ت‬ ‫تطکیة ضًگ ّا تطای ططاحتی‬ ‫ٍتسایت ضا تط هثٌتای ّتسف ٍ‬ ‫ًَع تاظزیس کٌٌسُ، زستِ تٌتسی‬ ‫هی کٌس‬ ‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬ ‫‪your sales by choosing The right color”, The‬‬ ‫.‪Creative Nerd‬‬
  21. 21. ‫گام دوم: ایجاد حس مورد نظر ترای مشتری‬ ‫‪ ‬تا تَجِ تِ ًَع حستی‬ ‫کِ هی ذَاّین تِ هطتطی‬ ‫المتا کٌتین هتی ت تَاًین اظ‬ ‫ت ت ت ت‬ ‫ضًگ ّای جتسٍل ضٍتتطٍ‬ ‫استفازُ کٌین.‬ ‫‪Casparie, C. (2007). “Color Attract: Increasing‬‬ ‫‪your sales by choosing The right color”, The‬‬ ‫.‪Creative Nerd‬‬
  22. 22. ‫گام سوم: تنظیم رنگ ها‬ ‫‪ ‬هٌظَض هطرع ًوَزى کٌتطاست ٍ اضثاع هٌاسة تطای ضًگ ّای اًتراب ضسُ است‬ ‫‪ ‬ػالٍُ تط ایي تطکیة هٌاسة ضًگ ّتا زض کٌتاض ّتن ٍ تَجتِ تتِ هستائلی ّوچتَى‬ ‫کَضضًگی ٍ ... زض ایي گام اًجام هی ضَز.‬ ‫‪ ‬تِ ػٌَاى هثال ػسم استفازُ اظ ضًگ ّای لطهع ٍ سثع زض کٌاض یکسیگط (کَضضًگی).‬
  23. 23. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬ ‫‪ ‬تَجِ تِ تفاٍت ّای فطٌّگی (‪)Mcdonald‬‬
  24. 24. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬ ‫‪ ‬استفازُ اظ تؼساز ضًگ هحسٍز ٍ تطکیة هٌاسة ضًگ ّا (‪)Walmart‬‬
  25. 25. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬ ‫‪ ‬ػسم تِ کاضگیطی ضًگ لَگَ زض ططاحی سایت (‪)Wells Fargo‬‬
  26. 26. ‫مثال هایی از استفاده درست و نادرست رنگ ها‬ ‫‪ ‬کٌتطاست ًاهٌاسة ٍ تِ کاضگیطی ضًگ ّای ًاهٌاسة (‪)Gitelink.com‬‬

×