یربراک طبار / ui · aesthetics ui usability :یربرکا طبار یحارط فده...
TRANSCRIPT
![Page 1: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/1.jpg)
![Page 2: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/2.jpg)
UI /رابط کاربری
![Page 3: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/3.jpg)
UI Logic
HumanInterface
Machine
![Page 4: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/4.jpg)
Form and Function
4
Form
Content
Function
![Page 5: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/5.jpg)
Look and Feel
5
![Page 6: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/6.jpg)
Aesthetics and Usability
6
Aesthetics UsabilityUI
![Page 7: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/7.jpg)
:اکربریهدف طراحی رابط
لنشین و زیبااکربر در کنار ایجاد فضایی د« راحتی استفاده»کمک به
Userاکربریتجربهاصولرعایتاکربری،رابططراحیدر Experienceنسبت
.دارداولویتتزئینیوشناختیزیباییمباحثبه
![Page 8: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/8.jpg)
UI & UX
8
• Mental Model
• Affordance
• Design Pattern
• Visual Metaphor
• Onboarding
• Cognitive Load
![Page 9: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/9.jpg)
فونت،تصویرسازی،،بندیرنگبندی،ترکیبنظیرطراحیبصریعناصر
اجزایعنوانبه...وفرمهاحرکتها،وهاانیمیت،Patternsهابافتها،آیکن
غیردر.دباشننیزتعاملیواکرامالاکخالقیت،وزیباییبرعالوهبایداکربریرابططراحی
!شویمواجهموبطراحیجایبهپوسترطراحیبااستممکناینصورت
![Page 10: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/10.jpg)
Design Thinking
![Page 11: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/11.jpg)
UI/UXتفاوت
ازایمجموعهکاربر،تجربهکهحالیدر
رایبمحصولسازیبهینهبرمتمرکزوظایف
افزایشوکاربرلذتباهمراهاستفاده
نآمکملکاربریرابططراحیاست،کارایی
جذابیتوحسظاهر،وشکلواست
تجربهاصولوگیردمیبردررامحصول
.میکندسازیپیادهراکاربری
![Page 12: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/12.jpg)
UI/UXتفاوت
UIوUXهر.شوندمیشناختهیکدیگرمکمل
ایتجربهایجادبرایمحصولدرهاآندوی
کییتواننمیواندضروریکاربربرایدلنشین
.دانستارجحدیگریبررا
نآباکردنکارامارسدمینظربهعالیکهچیزی
واست،ضعیفUXوخوبUIنمایانگراستدشوار
واستسادهآنباکارکردنکهچیزیآنبرخالف
ضعیفUIوخوبUXنمایانگردارد،بدظاهری
.است
![Page 13: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/13.jpg)
Design Process
13
sketch wireframe mockup prototype code
1. Sketch (Useful)
2. Wireframe (Usable)
3. Visual / Mockup (desirable)
![Page 14: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/14.jpg)
![Page 15: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/15.jpg)
Interface Anatomy
15
• Information / Content
• Function
• Navigation
• Form (Layout , Graphics , Colors)
• Copy
![Page 16: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/16.jpg)
یسماسکیومورف
یهمانند سازی با دنیای فیزیک
عیشبیه سازی فضای سه بعدی، استفاده از رنگ های نزدیک به طبیعت، بافت دهی واق
نهاییو سرعت محصول ظاهری، کاهش کارایی شباهت توجه به تنها
![Page 17: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/17.jpg)
سماسکیومورفی
![Page 18: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/18.jpg)
Flat Design
.اشدطراحی تخت را یک روش ساده گرا می نامند که بیشتر روی کارآمدی تاکید دارد تا این که به واقعیت نزدیک ب
ی ها یا رنگ هاگردیانت مخالف استفاده از رنگ های پیچیده، ها و ترین المنت استفاده از کم
تدریجی، هایالیت ها، رنگ های براق، تکستچر ها یا طرح های بر آمده و سایه زدن
ها پویا تر، سریع و آسان برای استفاده سادگی عناصر، طرح در عین
![Page 19: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/19.jpg)
طراحی تخت
Metro Designطراحی مترو مایکروسافت
اپلiOS 7طراحی
گوگل فلتطراحی
![Page 20: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/20.jpg)
UX جدانشدنی از طراحی فلتجز
در طراحی سایت CSSیکی از سبک های طراحی فول
ویژگی و هدف اصلی در استفاده از سبک طراحی فلت ، پیاده سازی و رعایت دقیق اصول
ایداراستپکاربردپذیری ، دسترسی پذیری و معماری محتوا و اطالعات به شکلی کامال بهینه و
![Page 21: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/21.jpg)
...بایدها و نبایدها...سادگی، سادگی و سادگی
سایه بجز سایه بلنداستفاده از هرنوع عدم
عدم برجسته یا تورفته کردن هرچیزی مانند متن
out fillیا strokeاستفاده از فونت های ساده ، و ترجیحا باریک بدون
با رنگ طرحهایی فلت و هماهنگ استفاده از آیکون
استفاده از رنگ هایی نزدیک به هم ، به طوری که رنگ ها ناگهان عوض نشوند
از رنگ های تخت%۱۰۰و استفاده Gradientعدم استفاده از
استفاده نامحدود از رنگ های تخت و عدم استفاده از رنگ های جیق و براق
عدم استفاده از بافت و پترن ها
ت هاعدم پرکردن فضا، استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المن
Flatاز تصاویر گرافیکی تخت یا استفاده
استفاده از فونت های زیبا و عموما رسمی با ابعاد بزرگ و قابل دید
های ضخیم Borderعدم استفاده از
![Page 22: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/22.jpg)
![Page 23: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/23.jpg)
![Page 24: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/24.jpg)
منابع
www.flaticon.com
www.iconfinder.com
www.flatcolorsui.com
https://graphicriver.net/item/set-of-flat-design-
icons/11203539?_ga=2.47802407.1627178299.1532935736-88925528.1498167083
https://color.adobe.com/
https://designmodo.com/flat-free/
![Page 25: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/25.jpg)
Material Design
دیزایننسخه مکتوب علمی و پیشرفته فلت
عمق در صفحه، انیمیشن های پیچیده ولی سبک و بکارگیریو Zاستفاده از سایه ها، محور
مختلفترکیب رنگ های مشخص و واکنش گرا بودن و یکپارچگی در دستگاههای
ل کلیک بعدی به نظر برسند تا کاربر بتواند عناصر قابل کلیک و غیر قاب3ها آبجکت گوگل کاری کرد که
م به را راحتتر تشخیص دهد و همچنین تالش میکند با اضافه کردن برخی ویژگی های اسکیومورفیس
.طراحی مسطح آن را کاربر پسندتر نماید
![Page 26: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/26.jpg)
![Page 27: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/27.jpg)
![Page 29: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/29.jpg)
https://avocode.com/design-report-2017
www.websima.com
https://www.supremo.co.uk/
https://waaark.com/
https://www.juicymo.cz/
https://www.honestfox.com.au/
![Page 30: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/30.jpg)
One Page Design
اطالعات در یک صفحهنمایش تمامی
نیازمند توجه بیشتر به مباحث تجربه کاربری
معرفی خالصه کسب و کار، معرفی شرکت ها و خدمات مانند یک کاتالوگ آنالینو سایت های شخصی کوچک
![Page 31: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/31.jpg)
![Page 32: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/32.jpg)
![Page 33: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/33.jpg)
...بایدها و نبایدها
دهیدمحتوای اصلی را در ابتدای صفحه قرار
کنیدبا المان های گرافیکی مسیر حرکت کاربر را مشخص
سایتنمایش به عنوان صفحه صفحه
Jump–toو Sticky Navigationازاستفاده
Scroll–triggered Animations
نکنیداستفاده Scroll Hijackingاز
به حجم صفحه و مدت بارگذاری آن نیز دقت کنید
![Page 34: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/34.jpg)
...بایدها و نبایدها
ازاستفادهجایبهاستبهتردارندکمیصفحاتکههاییسایتبرای
long–scrollازscroll–activated navigationروشایندرکهکننداستفاده
مشاهدهرابعدیصفحاتکردناسکرولکردن،باکلیکجایبهکاربران
حاتصفبیندرحرکتبرایهوشمندانههایافکتوانیمیشناز.کردخواهند
.کنیدایجادمخاطببرایبیشتریجذابیتتاکنیداستفاده
![Page 35: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/35.jpg)
https://www.kitkat.com/android/#/home
https://ddt.jelvix.com/contact
http://www.mdmoch.com/index.php
https://www.martens.be/en/brewery
https://millionhearts.live/eng/#
![Page 36: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/36.jpg)
Paralax Design
ر میدان کاربر با اسکرول یا حرکت نشانگر موس اتفاق خاصی مانند جابجایی، تغیی
دید، حرکت پس زمینه و افکت های دیگر مشاهده می کند
طراحییکی از قدرتمندترین و شگفت انگیزترین شیوه های
اغلب به صورت تک صفحه
![Page 37: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/37.jpg)
![Page 38: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/38.jpg)
![Page 39: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/39.jpg)
...بایدها و نبایدها
oفقط در تعداد محدودی از صفحات خود از این تکنیک استفاده نمایید.
o (داستان گونه)استفاده از بخش های به هم پیوسته در طراحی پاراالکس
oجذابیت موضوع
o (…ه ودانلود، خرید، عضویت در خبرنام)تأکید بر هدایت کاربران در صفحه برای انجام عمل موردنظر
oدر نظر گرفتن مرورگرهای قدیمی
o استفادهساده بودن
o ،نگردداثربخشی وبسایت، قربانی ظاهری زیبا و جذاب
![Page 40: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/40.jpg)
http://everylastdrop.co.uk/
http://www.mitchlana.com/
http://melanie-f.com/en/
http://hotdot.pro/#digitaltrip
http://www.ahk-prod.com/charte/
![Page 41: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/41.jpg)
3D Design
بعدی تغییر صفحات3تصویر و افکت های ترکیب حرکت،نورپردازی و رنگهای مختلف
ز حس القای حرفه ایی بودن وبسایت و کسب و کار در کنار جذابیت ا
صفات بارز آن است
![Page 42: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/42.jpg)
![Page 43: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/43.jpg)
https://dreamarena2018.ru/demo/#stadium
http://paul.octane.mx/
https://www.royalcaribbean.com/cococay-bahamas-perfect-day-island/explore/arrivals
www.googlemed.org
https://loaded.gg/
![Page 44: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/44.jpg)
Design Solution
44
• Intitution
• Patterns
• Principles
• Brand Identity / Assets
![Page 45: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/45.jpg)
UI Patterns
45
• Google Material
• IOS (Human Interface Guideline)
• UI-Patterns.com
• UI Kits
![Page 46: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/46.jpg)
الگوهای طراحی
46
Gutenberg Diagram
ریطوبه.میکندتوصیفراکلیطرحیکالگواین
وشدهتوزیعاطالعاترویبربیشترهاچشم
ارایدهایسایتبرایالگواین.میکنندنگاهیکجور
بهرمانیاوهاروزنامهمانندسنگینمتنمحتوای
.میروندکار
![Page 47: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/47.jpg)
الگوهای طراحی
47
Z-Pattern
دیکلیعناصروباسادههایطراحیبرایالگویاین
داریدانتظارکههمانطورومیباشدمناسبکماصلی
میکندپیرویzحرفشکلازالگواینبندیطرح
![Page 48: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/48.jpg)
الگوهای طراحی
48
F-Pattern
تمامومیشودشاملرااصلیمطالبتنهاFطراحیالگوی
.نمیدهدپوششرامطالب
![Page 49: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/49.jpg)
Visual Design
49
Visual
Usability
USER
UI Designer
![Page 50: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/50.jpg)
Visual Design Principles
50
• Balance
• Alignment
• White Space
• Similarity & Contrast
• Proportion / Scale
• Visual Hierarchy
• Consistency
• Simplicity
تعادل
تراز
فضای سفید
تشابه و تضاد
تناسب و مقیاس
سلسله مراتب بصری
یکپارچگی
سادگی
![Page 51: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/51.jpg)
• Balance
![Page 52: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/52.jpg)
• Alignment
![Page 53: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/53.jpg)
• White Space
![Page 54: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/54.jpg)
• Similarity & Contrast
![Page 55: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/55.jpg)
• Proportion / Scale
![Page 56: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/56.jpg)
• Visual Hierarchy
![Page 57: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/57.jpg)
• Consistency
![Page 58: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/58.jpg)
• SimplicitySignal vs Noise
![Page 59: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/59.jpg)
Visual Design Tools
59
• Sketch
• Adobe XD
• Figma
• Invision Studio
![Page 60: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/60.jpg)
ودآاگه در مورد یک ثانیه طول می کشد تا افراد به قضاوت ناخ90که تنها میدهد نشان تحقیقات
!درصد این قضاوت بر اساس رنگ است60که تقریبا یابندمحصول دست
![Page 61: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/61.jpg)
رنگ در طراحی وب
![Page 62: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/62.jpg)
HSBسیستم رنگ
![Page 63: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/63.jpg)
HSLسیستم رنگ
![Page 64: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/64.jpg)
HSB & HSL
![Page 65: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/65.jpg)
RGB & CMYKسیستم رنگ
![Page 66: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/66.jpg)
HEXسیستم رنگ
![Page 67: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/67.jpg)
یک پالت تیره و روشن از یک رنگ مشخص داشته باشید
Single-Hue Color (Monochromatic)
![Page 68: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/68.jpg)
ریدبرای انتخاب رنگ از دنیای واقعی الهام بگی•
استفاده کنیدHSBاز سیستم رنگ •
![Page 69: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/69.jpg)
Darker color variation = higher saturation + lower brightness
Lighter Color Variation = lower saturation + higher brightness
![Page 70: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/70.jpg)
برای مثال میتوان از پالت میوه ها و گل ها الهام گرفت
Multi-Hue Palettes
اما ترجیحا تنوع رنگی را باال نبرید
![Page 71: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/71.jpg)
Multi-Hue Palettes
![Page 72: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/72.jpg)
Multi-Hue Palettes
![Page 73: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/73.jpg)
استفاده از گرادیان در طراحی سایت
Divergent (Two-Hue) Color Scales
![Page 74: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/74.jpg)
Divergent Color Scales
![Page 75: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/75.jpg)
انتخاب رنگ
الهام بگیرید•
جسارت داشته باشید•
خالق باشید•
برندسازی کنید•
دسترس پذیری را فراموش نکنید•
![Page 76: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/76.jpg)
http://paletton.com/#uid=73x2k0kllllaFw0g0qFqFg0w0aF
https://color.adobe.com/
http://colorfilter.wickline.org/
http://www.colourlovers.com/
http://www.ficml.org/jemimap/style/color/wheel.html
http://www.colorhunter.com/
http://paletton.com/#uid=73x2k0kllllaFw0g0qFqFg0w0aF
https://colourco.de/
http://colorizer.org/
https://learnui.design/tools/data-color-picker.html#palette
https://webgradients.com/
https://codepen.io/supah/pen/prVVOx%20
https://gradientbuttons.colorion.co/
![Page 77: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/77.jpg)
o و تناسب آنهاسایز مناسب فونت های فارسی
o دقت در کوچک یا بزرگ بودن فونت وب سایت
o انتخاب فونت مناسب و زیبا
o گرافیکیاستفاده از فونت های
o هااهمیت تیتر
یتایپوگراف
![Page 78: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/78.jpg)
Text-Heavy Pages Text-Heavy Pages
![Page 79: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/79.jpg)
Interaction-Heavy PagesInteraction-Heavy Pages
![Page 80: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/80.jpg)
oکمترین تنوع فونت را داشته باشید
oفونت ها باید بایکدیگر و محتوا همخوانی داشته باشند
oفونت های استاندارد را به کار گیرید
oبا کاهش تعداد کاراکترهای موجود در یک خط خوانایی را افزایش دهید
oفونتی را انتخاب کنید که در همه سایزها جلوه مناسبی داشته باشد
o دهداز فونت های ضخیم می تواند جذابیت بصری وب سایت شمارا کاهش استفاده
oفونتی با حروف های قابل تشخیص استفاده کنید
تایپوگرافی
![Page 81: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/81.jpg)
oفاصله بین خطوط را کاهش ندهید
o کنتراست بین متن و بکگراند اطمینان حاصل کنیداز
o از متن های چشمک زن و سه بعدی پرهیز کنید
oفونت های فلت و ساده را در اولویت بگذارید
oهای ساده تایپوگرافی تاثیرگذار را با تایپوگرافی زرق و برق دار اشتباه نگیرید،فونت
کنندحس اعتماد و شفافیت را القا می
oSuperimposed/Shared Space را جهت جذابیت بخشیدن به تایپوگرافی استفاده
کنید
تایپوگرافی
![Page 82: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/82.jpg)
![Page 83: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/83.jpg)
خوانایی، قابلیت بهینه سازی تایپوگرافی بهینه سازی
.ی استتعادل گرافیکی لکاکرایی و دسترسی،
https://css-tricks.com/almanac/properties/f/font-size/
![Page 84: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/84.jpg)
ی سایت اونا زمان! است ناراضی نخواهند بود 1pxاکربران از اینکه سایز فونت شما
.دشما را ترک میکنند که نتوانند محتوای شما را بخوانن
!ف واقعی بررسی کنیدپس فونت و تایپوگرافی خود را حتما در دستاگه های مختل
![Page 85: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/85.jpg)
آیکون ها در طراحی وب
چرا آیکون؟
انتقال داده با سرعت باالتر
قابلیت فهم باالتر
به یاد سپاری بیشتر با استفاده از حافظه تصویری
متمایز شدن
امکان هدایت بهتر کاربر
استفاده از زبان مشترک
استفاده کمتر از کلمات
![Page 86: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/86.jpg)
oآیکون شفاف، ساده و معنی دار و هم خانواده استفاده کنید
o هر ایکون را به تنهایی بررسی نکنید آیکون های شما باید باUI DESIGNشما هماهنگ باشد
oنتراست کنتراست رنگ آیکون و بکگراند، کنتراست حالت فوکوس، ک) کنتراست مناسب را فراموش نکنید
...(حالت فعال و
oآیکون تزئینی ممنوع
oآیکون ها مانند کلمات هستند به زبان آشنای مخاطب صحبت کنید!
oوکتور ترجیحا از آیکون های ) حواستان به سایز و رزولوشن مناسب باشدSVGاستفاده کنید(
oآیکون ها را از نظر بصری تراز کنید نه از نظر ریاضی!
o در تمام محصول آیکون های ثابت استفاده کنید
آیکونگرافی
![Page 87: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/87.jpg)
https://buddhapizza.com/
https://kinsta.com/#
https://htmlburger.com/
https://dribbble.com/search?q=icon
https://developer.apple.com/design/human-interface-guidelines/ios/visual-
design/adaptivity-and-layout/
https://blog.prototypr.io/https-medium-com-internetarchitects-the-10-commandments-
of-sketch-exports-for-ios-and-android-b1dd8578a5dc
https://ionicons.com/
https://thenounproject.com/
![Page 88: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/88.jpg)
oPrototype
oMockup
oAssets
• Colors • Graphics • Metrics / Scales • Component
oDesign System
• Tools • Principles • Brand Identity • Pattern Library
oTools
• Zeplin • Sympli • Invision Inspect • Sketch Cloud • XD Link • Avocode
Hands Off
![Page 89: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/89.jpg)
ohttps://www.siteinspire.com/
ohttps://www.webdesign-inspiration.com/
ohttps://www.thebestdesigns.com/
ohttps://niice.co/search/ux
ohttps://www.behance.net/
ohttps://dribbble.com/
ohttps://www.awwwards.com/
ohttps://usepanda.com/app
ohttps://www.ui8.net/
ohttps://www.pinterest.com/
!هر روز سر بزنید
![Page 90: یربراک طبار / UI · Aesthetics UI Usability :یربرکا طبار یحارط فده ابیز و نیشنل ییاضف اجیا رانک ر ربرکا »هافتسا یتحار«](https://reader034.vdocuments.net/reader034/viewer/2022052519/5f1272e09a2d8867685781f0/html5/thumbnails/90.jpg)
ohttp://thehipperelement.com/
ohttps://medium.com/topic/design
ohttps://www.uxbeginner.com/
ohttp://52weeksofux.com/
ohttps://uxmastery.com/
ohttp://www.dailyui.co/
ohttps://hackdesign.org/
ohttps://nngroup.com/
!بیشتر بخوانید