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://material.io

http://mrmaterial.ir/

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/

!بیشتر بخوانید