یربراک طبار / ui · aesthetics ui usability :یربرکا طبار یحارط فده...
TRANSCRIPT
UI /رابط کاربری
UI Logic
HumanInterface
Machine
Form and Function
4
Form
Content
Function
Look and Feel
5
Aesthetics and Usability
6
Aesthetics UsabilityUI
:اکربریهدف طراحی رابط
لنشین و زیبااکربر در کنار ایجاد فضایی د« راحتی استفاده»کمک به
Userاکربریتجربهاصولرعایتاکربری،رابططراحیدر Experienceنسبت
.دارداولویتتزئینیوشناختیزیباییمباحثبه
UI & UX
8
• Mental Model
• Affordance
• Design Pattern
• Visual Metaphor
• Onboarding
• Cognitive Load
فونت،تصویرسازی،،بندیرنگبندی،ترکیبنظیرطراحیبصریعناصر
اجزایعنوانبه...وفرمهاحرکتها،وهاانیمیت،Patternsهابافتها،آیکن
غیردر.دباشننیزتعاملیواکرامالاکخالقیت،وزیباییبرعالوهبایداکربریرابططراحی
!شویمواجهموبطراحیجایبهپوسترطراحیبااستممکناینصورت
Design Thinking
UI/UXتفاوت
ازایمجموعهکاربر،تجربهکهحالیدر
رایبمحصولسازیبهینهبرمتمرکزوظایف
افزایشوکاربرلذتباهمراهاستفاده
نآمکملکاربریرابططراحیاست،کارایی
جذابیتوحسظاهر،وشکلواست
تجربهاصولوگیردمیبردررامحصول
.میکندسازیپیادهراکاربری
UI/UXتفاوت
UIوUXهر.شوندمیشناختهیکدیگرمکمل
ایتجربهایجادبرایمحصولدرهاآندوی
کییتواننمیواندضروریکاربربرایدلنشین
.دانستارجحدیگریبررا
نآباکردنکارامارسدمینظربهعالیکهچیزی
واست،ضعیفUXوخوبUIنمایانگراستدشوار
واستسادهآنباکارکردنکهچیزیآنبرخالف
ضعیفUIوخوبUXنمایانگردارد،بدظاهری
.است
Design Process
13
sketch wireframe mockup prototype code
1. Sketch (Useful)
2. Wireframe (Usable)
3. Visual / Mockup (desirable)
Interface Anatomy
15
• Information / Content
• Function
• Navigation
• Form (Layout , Graphics , Colors)
• Copy
یسماسکیومورف
یهمانند سازی با دنیای فیزیک
عیشبیه سازی فضای سه بعدی، استفاده از رنگ های نزدیک به طبیعت، بافت دهی واق
نهاییو سرعت محصول ظاهری، کاهش کارایی شباهت توجه به تنها
سماسکیومورفی
Flat Design
.اشدطراحی تخت را یک روش ساده گرا می نامند که بیشتر روی کارآمدی تاکید دارد تا این که به واقعیت نزدیک ب
ی ها یا رنگ هاگردیانت مخالف استفاده از رنگ های پیچیده، ها و ترین المنت استفاده از کم
تدریجی، هایالیت ها، رنگ های براق، تکستچر ها یا طرح های بر آمده و سایه زدن
ها پویا تر، سریع و آسان برای استفاده سادگی عناصر، طرح در عین
طراحی تخت
Metro Designطراحی مترو مایکروسافت
اپلiOS 7طراحی
گوگل فلتطراحی
UX جدانشدنی از طراحی فلتجز
در طراحی سایت CSSیکی از سبک های طراحی فول
ویژگی و هدف اصلی در استفاده از سبک طراحی فلت ، پیاده سازی و رعایت دقیق اصول
ایداراستپکاربردپذیری ، دسترسی پذیری و معماری محتوا و اطالعات به شکلی کامال بهینه و
...بایدها و نبایدها...سادگی، سادگی و سادگی
سایه بجز سایه بلنداستفاده از هرنوع عدم
عدم برجسته یا تورفته کردن هرچیزی مانند متن
out fillیا strokeاستفاده از فونت های ساده ، و ترجیحا باریک بدون
با رنگ طرحهایی فلت و هماهنگ استفاده از آیکون
استفاده از رنگ هایی نزدیک به هم ، به طوری که رنگ ها ناگهان عوض نشوند
از رنگ های تخت%۱۰۰و استفاده Gradientعدم استفاده از
استفاده نامحدود از رنگ های تخت و عدم استفاده از رنگ های جیق و براق
عدم استفاده از بافت و پترن ها
ت هاعدم پرکردن فضا، استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المن
Flatاز تصاویر گرافیکی تخت یا استفاده
استفاده از فونت های زیبا و عموما رسمی با ابعاد بزرگ و قابل دید
های ضخیم Borderعدم استفاده از
منابع
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/
Material Design
دیزایننسخه مکتوب علمی و پیشرفته فلت
عمق در صفحه، انیمیشن های پیچیده ولی سبک و بکارگیریو Zاستفاده از سایه ها، محور
مختلفترکیب رنگ های مشخص و واکنش گرا بودن و یکپارچگی در دستگاههای
ل کلیک بعدی به نظر برسند تا کاربر بتواند عناصر قابل کلیک و غیر قاب3ها آبجکت گوگل کاری کرد که
م به را راحتتر تشخیص دهد و همچنین تالش میکند با اضافه کردن برخی ویژگی های اسکیومورفیس
.طراحی مسطح آن را کاربر پسندتر نماید
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/
One Page Design
اطالعات در یک صفحهنمایش تمامی
نیازمند توجه بیشتر به مباحث تجربه کاربری
معرفی خالصه کسب و کار، معرفی شرکت ها و خدمات مانند یک کاتالوگ آنالینو سایت های شخصی کوچک
...بایدها و نبایدها
دهیدمحتوای اصلی را در ابتدای صفحه قرار
کنیدبا المان های گرافیکی مسیر حرکت کاربر را مشخص
سایتنمایش به عنوان صفحه صفحه
Jump–toو Sticky Navigationازاستفاده
Scroll–triggered Animations
نکنیداستفاده Scroll Hijackingاز
به حجم صفحه و مدت بارگذاری آن نیز دقت کنید
...بایدها و نبایدها
ازاستفادهجایبهاستبهتردارندکمیصفحاتکههاییسایتبرای
long–scrollازscroll–activated navigationروشایندرکهکننداستفاده
مشاهدهرابعدیصفحاتکردناسکرولکردن،باکلیکجایبهکاربران
حاتصفبیندرحرکتبرایهوشمندانههایافکتوانیمیشناز.کردخواهند
.کنیدایجادمخاطببرایبیشتریجذابیتتاکنیداستفاده
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/#
Paralax Design
ر میدان کاربر با اسکرول یا حرکت نشانگر موس اتفاق خاصی مانند جابجایی، تغیی
دید، حرکت پس زمینه و افکت های دیگر مشاهده می کند
طراحییکی از قدرتمندترین و شگفت انگیزترین شیوه های
اغلب به صورت تک صفحه
...بایدها و نبایدها
oفقط در تعداد محدودی از صفحات خود از این تکنیک استفاده نمایید.
o (داستان گونه)استفاده از بخش های به هم پیوسته در طراحی پاراالکس
oجذابیت موضوع
o (…ه ودانلود، خرید، عضویت در خبرنام)تأکید بر هدایت کاربران در صفحه برای انجام عمل موردنظر
oدر نظر گرفتن مرورگرهای قدیمی
o استفادهساده بودن
o ،نگردداثربخشی وبسایت، قربانی ظاهری زیبا و جذاب
http://everylastdrop.co.uk/
http://www.mitchlana.com/
http://melanie-f.com/en/
http://hotdot.pro/#digitaltrip
http://www.ahk-prod.com/charte/
3D Design
بعدی تغییر صفحات3تصویر و افکت های ترکیب حرکت،نورپردازی و رنگهای مختلف
ز حس القای حرفه ایی بودن وبسایت و کسب و کار در کنار جذابیت ا
صفات بارز آن است
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/
Design Solution
44
• Intitution
• Patterns
• Principles
• Brand Identity / Assets
UI Patterns
45
• Google Material
• IOS (Human Interface Guideline)
• UI-Patterns.com
• UI Kits
الگوهای طراحی
46
Gutenberg Diagram
ریطوبه.میکندتوصیفراکلیطرحیکالگواین
وشدهتوزیعاطالعاترویبربیشترهاچشم
ارایدهایسایتبرایالگواین.میکنندنگاهیکجور
بهرمانیاوهاروزنامهمانندسنگینمتنمحتوای
.میروندکار
الگوهای طراحی
47
Z-Pattern
دیکلیعناصروباسادههایطراحیبرایالگویاین
داریدانتظارکههمانطورومیباشدمناسبکماصلی
میکندپیرویzحرفشکلازالگواینبندیطرح
الگوهای طراحی
48
F-Pattern
تمامومیشودشاملرااصلیمطالبتنهاFطراحیالگوی
.نمیدهدپوششرامطالب
Visual Design
49
Visual
Usability
USER
UI Designer
Visual Design Principles
50
• Balance
• Alignment
• White Space
• Similarity & Contrast
• Proportion / Scale
• Visual Hierarchy
• Consistency
• Simplicity
تعادل
تراز
فضای سفید
تشابه و تضاد
تناسب و مقیاس
سلسله مراتب بصری
یکپارچگی
سادگی
• Balance
• Alignment
• White Space
• Similarity & Contrast
• Proportion / Scale
• Visual Hierarchy
• Consistency
• SimplicitySignal vs Noise
Visual Design Tools
59
• Sketch
• Adobe XD
• Figma
• Invision Studio
ودآاگه در مورد یک ثانیه طول می کشد تا افراد به قضاوت ناخ90که تنها میدهد نشان تحقیقات
!درصد این قضاوت بر اساس رنگ است60که تقریبا یابندمحصول دست
رنگ در طراحی وب
HSBسیستم رنگ
HSLسیستم رنگ
HSB & HSL
RGB & CMYKسیستم رنگ
HEXسیستم رنگ
یک پالت تیره و روشن از یک رنگ مشخص داشته باشید
Single-Hue Color (Monochromatic)
ریدبرای انتخاب رنگ از دنیای واقعی الهام بگی•
استفاده کنیدHSBاز سیستم رنگ •
Darker color variation = higher saturation + lower brightness
Lighter Color Variation = lower saturation + higher brightness
برای مثال میتوان از پالت میوه ها و گل ها الهام گرفت
Multi-Hue Palettes
اما ترجیحا تنوع رنگی را باال نبرید
Multi-Hue Palettes
Multi-Hue Palettes
استفاده از گرادیان در طراحی سایت
Divergent (Two-Hue) Color Scales
Divergent Color Scales
انتخاب رنگ
الهام بگیرید•
جسارت داشته باشید•
خالق باشید•
برندسازی کنید•
دسترس پذیری را فراموش نکنید•
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/
o و تناسب آنهاسایز مناسب فونت های فارسی
o دقت در کوچک یا بزرگ بودن فونت وب سایت
o انتخاب فونت مناسب و زیبا
o گرافیکیاستفاده از فونت های
o هااهمیت تیتر
یتایپوگراف
Text-Heavy Pages Text-Heavy Pages
Interaction-Heavy PagesInteraction-Heavy Pages
oکمترین تنوع فونت را داشته باشید
oفونت ها باید بایکدیگر و محتوا همخوانی داشته باشند
oفونت های استاندارد را به کار گیرید
oبا کاهش تعداد کاراکترهای موجود در یک خط خوانایی را افزایش دهید
oفونتی را انتخاب کنید که در همه سایزها جلوه مناسبی داشته باشد
o دهداز فونت های ضخیم می تواند جذابیت بصری وب سایت شمارا کاهش استفاده
oفونتی با حروف های قابل تشخیص استفاده کنید
تایپوگرافی
oفاصله بین خطوط را کاهش ندهید
o کنتراست بین متن و بکگراند اطمینان حاصل کنیداز
o از متن های چشمک زن و سه بعدی پرهیز کنید
oفونت های فلت و ساده را در اولویت بگذارید
oهای ساده تایپوگرافی تاثیرگذار را با تایپوگرافی زرق و برق دار اشتباه نگیرید،فونت
کنندحس اعتماد و شفافیت را القا می
oSuperimposed/Shared Space را جهت جذابیت بخشیدن به تایپوگرافی استفاده
کنید
تایپوگرافی
خوانایی، قابلیت بهینه سازی تایپوگرافی بهینه سازی
.ی استتعادل گرافیکی لکاکرایی و دسترسی،
https://css-tricks.com/almanac/properties/f/font-size/
ی سایت اونا زمان! است ناراضی نخواهند بود 1pxاکربران از اینکه سایز فونت شما
.دشما را ترک میکنند که نتوانند محتوای شما را بخوانن
!ف واقعی بررسی کنیدپس فونت و تایپوگرافی خود را حتما در دستاگه های مختل
آیکون ها در طراحی وب
چرا آیکون؟
انتقال داده با سرعت باالتر
قابلیت فهم باالتر
به یاد سپاری بیشتر با استفاده از حافظه تصویری
متمایز شدن
امکان هدایت بهتر کاربر
استفاده از زبان مشترک
استفاده کمتر از کلمات
oآیکون شفاف، ساده و معنی دار و هم خانواده استفاده کنید
o هر ایکون را به تنهایی بررسی نکنید آیکون های شما باید باUI DESIGNشما هماهنگ باشد
oنتراست کنتراست رنگ آیکون و بکگراند، کنتراست حالت فوکوس، ک) کنتراست مناسب را فراموش نکنید
...(حالت فعال و
oآیکون تزئینی ممنوع
oآیکون ها مانند کلمات هستند به زبان آشنای مخاطب صحبت کنید!
oوکتور ترجیحا از آیکون های ) حواستان به سایز و رزولوشن مناسب باشدSVGاستفاده کنید(
oآیکون ها را از نظر بصری تراز کنید نه از نظر ریاضی!
o در تمام محصول آیکون های ثابت استفاده کنید
آیکونگرافی
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/
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
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/
!هر روز سر بزنید
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/
!بیشتر بخوانید