۱۰ مطلب با کلمه‌ی کلیدی «رابط کاربری uiux» ثبت شده است

طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ

پیش از شروع در مورد موضوع strokes در فتوشاپ چند نکته قابل بیان هست

مورد اول این مطلب هم برای کسانی که میخوان طراحی ui انجام بدن و هم کسانی که اصلا کاری به طراحی ui ندارن مفید هست.

سطح این مطالب پایین هست اما شما باید با ابزار ها و در کل یک آشنایی اولیه با فتوشاپ داشته باشید که متوجه کل مطلب باشید. در صورتی که می بینید میخواهید فتوشاپ رو از اول شروع به یادگیری کنید یا اینکه در بعضی موضوعات قوی تر بشید می تونید از آموزش های فتوشاپ من که در اینجا موجود هست استفاده کنید.

بعضی جاها هم واقعا نمیشه کلمات انگلیسی رو به فارسی ترجمه کرد چون بی معنی میشه و مجبورم همون اصطلاح انگلیسی خودش رو بنویسم.

Strokes در فتوشاپ

دو نوع strokes یا حاشیه در فتوشاپ داریم که یک مورد رو میتونید با layer style (از ورژن 6 موجوده نه از CS6) و مورد دیگه از طریق تنظیمات شکل های وکتور هست.

در ابتدا شاید هر دو شبیه همدیگر باشن اما تفاوت های اساسی با هم دارن.

کیفیت بهتر

زمانی که از سایز بزرگ stroke استفاده می کنید، stroke موجود در layer style بصورت انحنای لبه دار در میاد (شکل سمت چپ)، در صورتی که حاشیه وکتور بصورت خیلی صاف و تمیز ایجاد میشه (شکل سمت راست).

دلیل این اتفاق اینه که حاشیه وکتور از اطلاعات شکل اصلی وکتور بوجود میاد در صورتی که حاشیه موجود در layer style از روی ماسک bitmap شکل موجود ساخته میشه که به طور کلی دو تکنیک کاملا متفاوت هستن.

کیفیت بهتر در Vector stroke

حالا ممکن هست بگید ما یک حاشیه به این بزرگی رو استفاده نمی کنیم، آیا در حاشیه های کوچک هم تاثیری داره؟ جواب خیر هست و تفاوت بسیار اندک هست!

تفاوت حاشیه ای با مقدار کم در layer style و vector

اما به هر حال، حاشیه های وکتور مقدار های نا صحیح یا اعشاری رو می تونن بگیرن، در نتیجه شما می تونید مقدار 0.5 پیکسل رو هم در صفحات غیر رتینا بهش بدید و برای صفحات رتینا طرح رو کشش یا scale کنیم و حاشیه هم براحتی به 1 پیکسل افزایش پیدا میکنه.

در صورتی که حاشیه layer style فقط می تونه مقادیر صحیح رو بگیره و همین باعث میشه زمانی که یک طرح کشش پیدا کنه باعث خطاهای زیادی در گرد گردن حاشیه ها بشه (منظور اینه که اگر حاشیه ای رو به قسمت های خمیده داده باشید در اون قسمت ها بیشتر ارور (پیکسل پیکسل شدن) می بینید تا قسمت های صاف)

تفاوت حاشیه ها در قسمت های خمیده

Mask feathering بهتر Vector Stroke

وقتی که یک Shape رو بوسیله mask feather تار یا blur می کنید، به حاشیه layer style اعمال نمیشه و فقط به خود شکل اصلی اعمال میشه.

البته این ویژگی با توجه به نیاز شما ممکن هست ویژگی ممثبت یا منفی باشه.

Mask feathering بهتر Vector Stroke

گوشه های بهتر

با توجه به ساختارشون، حاشیه layer style همیشه گرد هست. در صورتی که حاشیه وکتور میتونه مربعی، گرد و یا شب دار باشه.

گوشه های بهتر

حاشیه های بزرگتر

حاشیه layer style حداکثر تا 250 پیکسل افزایش پیدا میکنه. حاشیه وکتور مقداری بزرگتر هست با حداکثر اندازه 288 پیکسل.

نکته ای که وجود داره شما می تونید با یک حقه سایز حاشیه وکتور رو افزایش بدید بدین ترتیب که اول حداکثر سایز حاشیه وکتور رو انتخاب کنید بعد سایز کل داکیومنت رو هم افزایش بدید، در نتیجه من تا 1600 پیکسل هم مقدار حاشیه رو زیاد کردم و دیگه ادامه ندادم. (توجه کنید سایز حاشیه layer style حتی در این حقه هم همون مقدار 250 میمونه)

رفتار حاشیه ها در مسیر های باز (Path)

با استفاده از Path cap options، حاشیه وکتور می تونه به مسیر های باز هم اعمال بشه.

حاشیه در layer style این امکان رو ندارد.

Vector's Path cap options

Dashing

حاشیه های Vector می تونن حالت dash مانند به خودشن بگیرند. و حتی حاشیه های وکتور میتونن با mask feathering هم ترکیب بشن (شکل Blur dash ).

Vector's dashing stroke

شفافیت Stroke

حاشیه های وکتور ویژگی opacity یا شفافیت رو ندارن اما با یک ترفند میشه حدودا شفافیت رو براش بوجود آورد.

روش کار به اینصورت هست که با استفاده از حالت گرادیانت که یک طرف شفاف داره اما با این تفاوت که هر دو قسمت پایانی گردیانت باید از یک رنگ یکسان برخوردار باشن! ممکن هست اما پیچیده!

لطفا با ذکر منبع کپی کنید!

طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ

۰ نظر

حسین محمودی

نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt)

#نمونه_کار

نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt)

نوع: فاکتور خرید (Email Receipt)
طراح: حسین محمودی (@iHMahmoodi)

نکته ای که قابل ذکر هست اینه که این نمونه طراحی رابط کاربری هست و من دوربینی خریداری نکردم!!

برای دیدن نمونه کار های بیشتر به اکانت اینستاگرام AsteriXarts@ و یا به اینجا مراجعه کنید.

برای سفارش طراحی حرفه ای می توانید به شماره 09387374487 و یا اکانت تلگرام iHMahmoodi@ تماس بگیرید.

#طراحی #گرافیک #فتوشاپ #اَستریکس_آرتس #حسین_محمودی #AsteriXarts #iHMahmoodi
#illustrator #designer #graphikart #designed #design #modern #artist

#typography #dribbble #photoshop #graphicdesigner #graphicdesign

#vector #professional #designs #adobe #visualdesign

#interfacedesign #ui #behance #graphic #userinterface

AsteriXarts - فتوشاپ - Photoshop iHMahmoodi - AsteriXarts

artwork - Design - ui ux - graphic design - - - portofolio - ui - user experience - user interface - ux - تجربه کاربری - حسین محمودی - رابط کاربری - رابط کاربری اپلیکیشن - رابط کاربری موبایل - رابط کاربری وب - رابط کاربری وبسایت - رابط کاربی نرم افزار - نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt) - طراحی - طراحی رابط کاربری حرفه ای - طراحی رابط کاربری در اصفهان - طراحی رابط کاربری در تبریز - طراحی رابط کاربری در تهران - طراحی رابط کاربری در شیراز - طراحی گرافیکی - - نمونه کار - نمونه کارها - یو آی

نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt) نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt) نمونه کار: طراحی رابط کاربری فاکتور خرید (Email Receipt)

۰ نظر

حسین محمودی

طراحی رابط کاربری موبایل 101: pixels, points و resolutions

تفاوت بین Pixels, Points و resolutions می تونه حتی برای طراح های با تجربه ای که قصد ورود به طراحی رابط کاربری موبایل رو دارند یا کسانی که با صفحه نمایش و نحوه کارکرد اون آشنا نیستن گیج کننده باشه.

در این مقاله درباره ی موارد بالا و کلماتی که بیشتر در طراحی موبایل به کار میرن بیشتر صحبت میکنیم و به یک سری سوال های مرتبط باهاشون هم جواب میدیم.

چه مواردی رو باید بدونم؟

زمانی که شما در مورد سایز های صفحه نمایش و تصاویر صحبت میکنید 6 مورد رو باید بدونید که عبارت اند از:

Pixels (یک عنصر تصویر: یک تک نقطه رنگی روی صفحه یا کوچکترین عنصر که ما می تونیم رو یک صفحه نمایش اون رو کنترل کنیم )
Screen sizes ( به اینچ=Inches هست)
Resolutions (یک عرض x ارتفاع - مثال: 1920w x 1080h)
DPI ( Dots per inch or pixels per inch )
Points (یک کمیت اندازه گیری مستقل از رزولوشن که بیشتر برای iOS در موردش می شنویم)
Density Independent Pixels ( یک کمیت اندازه گیری مستقل از رزولوشن که بیشتر برای Android در موردش می شنویم)

از موارد بالا Screen size, pixels, resolution و DPI در مورد خاصیت های فیزیکی یک صفحه نمایش صحبت میکنه، در صورتی که points به یک سیستم مختصات مستقل از دیوایسی که داره روی آن اجرا میشه اشاره میکنه.

نگران نباشید همینطور که به ادامه مطلب می پردازیم این مفاهیم بیشتر برای شما روشن میشن.

خوب بریم سراغ خاصیت های فیزیکی! (به قول خارجی ها shall we )

پیکسل چیه؟

یک پیکسل شامل یک گروه از نقطه های رنگی هست (بصورت نرمال: قرمز، سبز و آبی) رو یک صفحه نمایش. با خاموش و روشن کردن اونا در شدت های مختلف، میشه تعداد زیادی رنگ و روشنایی رو درست کرد.

رنگ سیاه زمانی ساخته میشه که همه نقطه ها خاموش باشن (در اصلاح مقدارشون 0 باشه یا 000# )، و رنگ سفید زمانی ساخته میشه که همزمان هر سه رنگ اصلی یعنی قرمز و سبز و آبی با هم روشن باشن (در اصطلاح مقدارشون 1 باشه یا FFF# ).

به طور خلاصه، همه این نقاط فیزیکی که نور از خودشون تششع میکنن به شما اجازه میدن که یک تصویر رو رو رو صفحه نمایش ببینید اما اینقدر ریز هستن که با چشم غیر مسلح به سختی دیده میشن (روی گوشی های جدید که البته همونا هم اگر یک قطره آب بندازید روی صفحه موبایل میتونید پیکسل ها رو ببینید!)

پیکسل ها و 3 رنگ اصلی قرمز سبز آبی (RGB)

سایز صفحه نمایش (گوشی موبایل) چیه؟

سایز صفحه نمایش عبارت است از طول صفحه از یک گوشه صفحه به سمت گوشه دیگر صفحه بصورت مورب.

سایز صفحه نمایش

رزولوشن گوشی چیه؟

تعداد پیکسل ها در طول صفحه (افقی) X تعداد پیکسل ها در ارتفاع صفحه (عمودی)

برای مثالی آیفونی که استیو جابز در سال 2007 نسخه یک اون رو معرفی کرد 320 پیکسل در طول و 480 پیکسل در ارتفاع داره که نوشته میشه 320x480.

اما حالا بعضی گوشی ها صفحه نمایش هایی با رزولوشن تلویزیون های HD دارن، 1920x1080 سری از رنگ های اصلی در یک صفحه نمایش به اندازه 5 اینچ!

رزولوشن های معمول در گوشی های موبایل

DPI (نقاط در هر اینچ)

dpi تعداد پیکسل های موجود بصورت عمودی یا افقی در 1 اینچ رو بیان میکنه

DPI همچنین به PPI (pixels per inch) هم اشاره میکنه و بوسیله تقسیم عرض یا ارتفاع صفحه بر تعداد پیکسل های موجود در اون سمت بدست میاد. یک DPI بالا معنیش این میشه که هر پیکسلی باید کوچک و کوچکتر بشه تا در اون فضای موجود جا بشه، معنیش یک صفحه نمایش واضح هست که می تونه جزییات یک محتوای تصویری رو نشون بده.

(نقاط در هر اینچ)

چطور تصاویر تشکیل می شوند

خوب تا اینجا درر مورد pixels, تراکم، سایز صفحه و رزولوشن صحبت کردیم، حالا میخوایم در مورد points و (Density independent pixels) DPs صحبت کنیم. خوشبختانه اونا خیلی شبیه همدیگه هستن و در نتیجه معنی یکی از ان ها رو که متوجه بشیم براحتی میشه معنی و مفهوم دیگری رو متوجه شد. (shall we)

Point - iOS چی هست؟

برای اینکه بدونیم point چی هست باید مقداری در مورد تاریخچه ی آیفون بدونیم!

یک زمانی آیفون 1 که در سال 2007 معرفی شد صفحه نمایشی با رزولوشن 320x480 داشت. بعدها آیفون 4 معرفی شد و شاخص ترین ویژگیش صفحه نمایش رتینا بود. صفحه نمایش رتینا دو برابر dpi داشت در صورتی که سایز صفحه نمایش همون سایز قدیمی بود - معنیش اینه که تعداد پیکسل هایی که در یک فضای مشابه قرار داشتن 4 برابر شده بود (دو برابر در عرض و دو برابر در ارتفاع).

صفحه نمایش اولین آیفون با صفحه نمایش رتینا رزولوشن 640x960 داشت.

اما همه گرافیک ها (منظور المنت های گرافیکی نمایش داده شده روی صفحه نمایش هست) با همون سایز قبلی اما روی صفحه نمایشی با تراکم پیکسل بالا نمایش داده می شدند. اگر گوشی همه المنت های گرافیکی رو با نسبت 1:1 رندر می کرد (مثل ایفون اولیه)، همه عناصر به مقدار یک/چهارم رو صفحه نمایش نشون داده میشدن (و در واقع اپلیکیشن به فنا می رفت!)

برای جلوگیری از به فنا رفتن اَپ ها، اپل روی آورد به استفاده از points که در نتیجه ترسیم گرافیک ها رو از تراکم صفحه جدا میکرد ( در واقع منظورش اینه که با استفاده از این کمیت مستقل دیگه مهم نبود تراکم پیکسل صفحه چقدر باشه و اپلیکیشن بدرستی روی هر تراکم پیکسل نمایش داده می شد)

Point - iOS چی هست؟

Point به عنوان کمیتی ساخته شده که به گرافیک ها اجازه میده مستقل از زرولوشن صفحه نمایش گوشی بدرستی کشش (scale) پیدا کنن و نمایش داده بشن.

هر point در iOS برابر با 1/163 اینچ هست.

این سایز همیشه همینه و مستقل از رزولوشن هست، و این مقدار از 163dpi آیفون اولیه گرفته شده (1x)

تبدیل بین pixels و points

پیکسل و پوینت کمیت های ثابتی هستن و بر اساس فاکتورهای دیگر تغییر نمی کنن

پیکسل همیشه 1 پیکسل هست و اون کوچکترین قسمت یک صفحه نمایشه که می تونه رنگهای مختلف رو نمایش بده
پوینت همیشه 1 پوینت هست و یک واحد ثابت و مستقل هست

ponits با pixels متفاوت هستن چون اونا بر اساس dpi تغییر می کنن:

در آیفون، 1 پوینت = 1 پیکسل اونم زمانی که رزولوشن 163dpi باشه (آیفون 1 رو به عنوان رفرنس بگیرید)
در 326dpi، مشابه آیفون های 4،5 و 6، 1 پوینت برابر با 2 پیکسل افقی در 2 پیکسل عمودی هست که برابر با 4 پیکسل هست. یعنی یک تصویر 100x100 در دیوایس های با صفحه نمایش رتینا با 1/4 سایزش رندر میشه (اگر بخوایم رندر رو بر اساس شمارش پیکسل بیان کنیم)
در 401dpi مثل آیفون 6+، 1 پوینت برابر با 3 پیکسل افقی در 3 پیکسل عمودی هست که مجموعا 9 پیکسل رو شامل میشه

تبدیل بین pixels و points

Dps چیه؟

اندرویید یک کمیت اندازه گیری دیگه داره که مشابه points در آیفون هست. این واحد تراکم مستقل پیکسل (density independent pixel) نامیده میشه. به این معنی که حدودا 160 پیکسل در 1 اینچ صفحه جا بشه و در مقایسه با 163 پیکسل iOS زیاد تفاوتی نداره.

چه زمانی و چرا باید از این واحد ها استفاده کنیم؟

خوب مشخصه که زمانی که میخواید صفحه آرایی یک اپلیکیشن اندرویید بکنید باید از DP استفاده کنید و برای iOS هم از Point. از هر دو این واحدها برای تعریف UI باید از اونا استفاده کنید و مثلا برای سایز و مکان Layout با استفاده از فرمول زیر پیکسل ها رو از این واحدهای مستقل بدست بیارید.

فرمول تبدیل DPs , Points به پیکسل

این مطلب اولین بار در وبلاگ من در آدرس blog.iHMahmoodi.ir منتشر شده است.

۰ نظر

حسین محمودی

تفاوت pt و px در طراحی رابط کاربری

[

تفاوت pt و px در صفحه نمایش آیفون

تفاوت pt و px در طراحی رابط کاربری

در طراحی رابط کاربری ممکن هست این سوال براتون پیش بیاد که اندازه صفحه رو بر اساس چه کمیت طراحی کنیم!؟

و معمولا به دو مورد که بیشترین استفاده رو داره بر میخورید یعنی پیکسل (Pixel = px) و یا (Point = pt)

پیکسل ها به معنای کوچکترین عنصر که ما می تونیم رو یک صفحه نمایش اون رو کنترل کنیم. و هر تعداد پیسکل هایی که درون یک سایز به خصوص صفحه نمایش قرار داشته باشن به معنای مقدار بیشتری از PPI (pixels per inch) هست که باعث میشه محتوا درون صفحه نمایش خیلی تمیز و شفاف رندر بشن.

همونطور که متوجه شدید در واقع پیسکل به رزولوشن وابسته هست.

اما Point یک کمیت اندازه گیری مستقل از رزولوشن هست. با توجه به تراکم پیسکل های صفحه نمایش، یک پوینت می تونه شامل چندتا پیکسل بشه ( به عنوان مثال و با توجه به تصویر بالا 1pt در صفحه نمایش رتینا شامل 2x2 پیکسل میشه!)

زمانی که میخواهید برای صفحه نمایش های مختلف طراحی کنید، باید اندازه رو با Point حساب کنید، اما با pixels طراحی کنید! این به این معنی هست که شما باید همه عناصر را در 3 رزولوشن مختلف خروجی بگیرید و هیچ اهمیتی نداره که در چه رزولوشنی در اپلیکیشن شروع به طراحی میکنید.

تفاوت pt و px در طراحی رابط کاربری تفاوت pt و px در طراحی رابط کاربری تفاوت pt و px در طراحی رابط کاربری تفاوت pt و px در طراحی رابط کاربری تفاوت pt و px در طراحی رابط کاربری

۰ نظر

حسین محمودی

نمونه کار: طراحی رابط کاربری E-Commerce Shop

#نمونه_کار

نمونه کار: طراحی رابط کاربری E-Commerce Shop

نوع: فروشگاه الکترونیکی (خرید یک محصول)
طراح: حسین محمودی (@iHMahmoodi)

برای دیدن نمونه کار های بیشتر به اکانت اینستاگرام AsteriXarts@ مراجعه کنید.

برای سفارش طراحی حرفه ای می توانید به شماره 09387374487 و یا اکانت تلگرام iHMahmoodi@ تماس بگیرید.

#طراحی #گرافیک #فتوشاپ #اَستریکس_آرتس #حسین_محمودی #AsteriXarts #iHMahmoodi
#illustrator #designer #graphikart #designed #design #modern #artist

#typography #dribbble #photoshop #graphicdesigner #graphicdesign

#vector #professional #designs #adobe #visualdesign

#interfacedesign #ui #behance #graphic #userinterface

نمونه کار: طراحی رابط کاربری E-Commerce Shop نمونه کار: طراحی رابط کاربری E-Commerce Shop نمونه کار: طراحی رابط کاربری E-Commerce Shop نمونه کار: طراحی رابط کاربری E-Commerce Shop

۰ نظر

حسین محمودی

نمونه کار: طراحی رابط کاربری Music Player

نمونه کار: طراحی رابط کاربری موزیک پلایر (صفحه اصلی پخش کننده)

#نمونه_کار

نمونه کار: طراحی رابط کاربری Music Player

نوع: صفحه اصلی پخش موزیک، صفحه لیست پخش (Playlist), صفحه متن آهنگ (Lyric)
طراح: حسین محمودی (@iHMahmoodi)

[

نمونه کار: طراحی رابط کاربری موزیک پلایر (صفحه لیست پخش)

[

نمونه کار: طراحی رابط کاربری موزیک پلایر (صفحه متن آهنگ)

برای دیدن نمونه کار های بیشتر به اکانت اینستاگرام AsteriXarts@ مراجعه کنید.

برای سفارش طراحی حرفه ای می توانید به شماره 09387374487 و یا اکانت تلگرام iHMahmoodi@ تماس بگیرید.

#طراحی #گرافیک #فتوشاپ #اَستریکس_آرتس #حسین_محمودی #AsteriXarts #iHMahmoodi
#illustrator #designer #graphikart #designed #design #modern #artist

#typography #dribbble #photoshop #graphicdesigner #graphicdesign

#vector #professional #designs #adobe #visualdesign

#interfacedesign #ui #behance #graphic #userinterface

نمونه کار: طراحی رابط کاربری موزیک پلایر نمونه کار: طراحی رابط کاربری موزیک پلایر نمونه کار: طراحی رابط کاربری موزیک پلایر نمونه کار: طراحی رابط کاربری موزیک پلایر

۰ نظر

حسین محمودی