«طراحی مسطح» ترند پرطرفدار برای UI و UX در سال ۲۰۲۰

وقتی سبک‌ها و ترندهای پرطرفدار در سال ۲۰۱۹ را مشاهده می‌کردیم متوجه شدیم طراحی با استفاده از عناصر انسانی (استفاده از کاراکتر انسان در طراحی) بیشتر از سایر موضوعات توجه گرافیست‌ها و مخاطبان را توانسته بود به خود جلب کند. البته استفاده از تایپوگرافیِ اصولی و راحت تر کردن دسترسی پذیری نیز در کنار طرح اصلی، بهبود تجربه کاربری را رقم زده است. حال با فرا رسیدن سال ۲۰۲۰ احساس می‌کنیم این سبک از طراحی به اوج خود برسد و از این پس در تصاویر و Illustration‌های بیشتری شاهده استفاده از این سبک باشیم.

طراحی مسطح در واقع نوعی طراحی مینیمال محسوب شده و مانند همیشه شعار «کمتر، بیشتر است» یا (less is more) بهترین توصیف برای این سبک از طراحی محسوب می‌شود. بنابراین دیگر لازم نخواهد بود تصاویر پیچیده طراحی کنید. بدون شک یک پالت رنگی محدود و ساده نیز پاسخگو خواهد بود. اما آیا اهمیت طراحی مسطح و تجربه کاربری حاصل از آن تنها به یک پالت محدود ختم می‌شود؟

چرا طراحی مسطح (Flat) اینقدر محبوب است؟

وقتی شرکت‌های بزرگی مانند Mailchimp و Slack طراحی مسطح را به اینترفیس و رابط کاربری خود وارد کردند، به مرور زمان طراحی فلت تبدیل به یک سبک رایج و پرطرفدار میان گرافیست‌ها شد. سادگی این سبک طراحی و کاراکترهای انسانی استفاده شده در آن به تنهایی کافی بود تا مخاطبان به آن‌ها توجه کنند و آن‌ها را دوست داشته باشند. اما هیچ چیز به اینجا ختم نمی‌شود. دلایل بیشتری وجود دارد که چرا این سبک از طراحی، اینقدر به سرعت محبوب شد و پیشرفت کرد.

انعطاف پذیری و قابلیت ویرایش و شخصی سازی ساده: تصاویر استوک تا ۹۰ درصد غیرقابل ویرایش و شخصی‌سازی هستند. این موضوع باعث می‌شود کسل کننده به نظر برسند. اما وکتورهایی که در طراحی رابط کاربری به کار می‌روند، قابلیت سفارشی‌سازی دارند و طراحان می‌توانند آنها را مطابق با ایده‌های خود در بیاورند و به شکل دلخواه در پروژه‌های خود استفاده کنند.

منحصربفرد بودن: حتی اگر نخواهید یک وکتور جدید و اوریجینال ایجاد کنید و بخواهید از کتابخانه‌های آنلاین نمونه‌های آماده دانلود کنید، می‌توانید آنرا شخصی‌سازی کرده و در آن فردیت ایجاد کنید. اینگونه وکتورها می‌توانند یک هویت بصری زیبا، جذاب و قدرتمند برای شما به ارمغان بیاورند.
هویت: تعداد زیرشاخه‌های زیادی در استایل‌های وکتورها وجود دارد که می‌توانید از بین آنها، هر کدام که بهتر برند شما را توصیف می‌کند، انتخاب کنید. همچنین می‌توانید استایل تصویر مورد استفاده را مناسب با نوع مخاطبان خود انتخاب کنید. در این صورت کاربران شما احساس بهتری هنگام کار با نرم افزار طراحی شده خواهند داشت.

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

وکتور مسطح را از کجا پیدا کنم؟

همانطور که گفتیم وکتورهای طراحی رابط کاربری در تنوع بسیار زیادی و توسط وب‌سایت‌های مختلف ارائه می‌شوند و برای پیدا کردن چنین تصاویری با هیچ کمبود ایده‌ای مواجه نخواهید شد. از آنجا که اکثر این طرح ها به صورت کانسپت طراحی می‌شوند، به صورت رایگان در دسترس قرار دارند و برای استفاده از آنها نیز معمولا با محدودیت کپی رایت مواجه نخواهید شد. در ادامه چند وب‌سایت و ابزار آنلاین برای پیدا کردن وکتورهای مورد استفاده در طراحی UI را به شما معرفی می‌کنیم.

یکی از ابزارهای پرطرفدار در این زمینه Vector Creator وب سایت icons8 می‌باشد. به کمک این ابزار شما می‌توانید وکتور مورد نظر خود را از بین ۱۲ استایل مختلف انتخاب کنید و آنرا به صورت آنلاین شخصی‌سازی کنید. همچنین می‌توانید این وکتورها را در کنار آیکون‌های متنوع و جذابی که وجود دارد میکس کنید و خروجی نهایی را با فرمت دلخواه دریافت کنید.

کتابخانه آنلاین Shape نیز با بیش از ۲۰۰۰ طرح قابل شخصی‌سازی یکی دیگر از وب‌سایت‌هایی است که باید حتما آنرا امتحان کنید. این وکتورها معمولا مناسب طراحی اینترفیس و رابط کاربری در نظر گرفته شده اند.

حال اگر به دنبال یک ابزار آنلاین هستید که مشابه نرم افزارهای Sketch یا Figma عمل کند، Smash Illustrations بهترین گزینه خواهد بود. این وب‌سایت از کتابخانه‌ی گسترده ای برخوردار است و دارای انواع طرح‌های رایگان و پولی است که می‌توانید برای خود انتخاب کنید و آن‌ها را مطابق نیاز خود شخصی‌سازی کنید.

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

ساخت دستی وکتور و تصاویر مورد نیاز

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

با طرح‌های هندسی شروع نکنید: سعی کنید طرح ابتدایی خود را به همراه جزئیات، حرکات و ترکیب‌بندی صورت نقاشی درآورید. کمی با آن بازی کنید و به طور کامل مورد آزمایش قرار دهید تا بتوانید بهترین چشم انداز ممکن را ایجاد کنید. سپس آن را به داخل نرم افزار بیاورید و به صورت برداری طرح نهایی را ایجاد کنید.

طرح خود را تجزیه و تحلیل کنید: همانطور که گفتیم سبک طراحی مسطح دارای چندین زیر شاخه و استایل مختلف است. سعی کنید استایلی را در پیش بگیرید که به بهترین شکل ممکن شما و مخاطبان شما را معرفی می‌کند.

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

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

ترجمه‌ بر اساس

“Flat Illustrations, a Design Trend for 2020 and Beyond” by Ksenia Pedchenko @ TheStartup

منبع: https://bit.ly/2FdiwQG

انواع داده در پایتون

در دنیای برنامه نویسی انواع داده از مسائل پایه ای و بسیار مهم است و تقریبا تمام زبان‌های برنامه نویسی به نوعی از data type استفاده می‌کنند. متغیرها می‌توانند انواع مختلفی از داده را ذخیره کنند و این انواع مختلف می‌توانند کارهای مختلفی انجام دهند. زبان پایتون نیز از دیگر زبان‌های برنامه نویسی جدا نیست و به صورت پیش فرض از نوع داده‌های زیر پشتیبانی می‌کند:

انواع متنی: تنها یک نوع str (یعنی رشته)
انواع عددی: int (عدد صحیح) و float (عدد اعشاری) و complex (بعدا در مورد آن صحبت می‌کنیم)
انواع توالی: list و tuple و range
انواع mapping: تنها یک نوع dict
انواع دسته: set و frozenset
انواع Boolean: تنها مقدار bool
انواع باینری (دودویی): bytes و bytearray و memoryview

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

برای پیدا کردن نوع داده‌ی یک متغیر می‌توانیم از تابع ()type استفاده کنیم:

x = 5
print(type(x))

مقدار خروجی بدین شکل خواهد بود:

class 'int'

در زبان پایتون هنگامی که به متغیری مقدار بدهید، data type آن به صورت خودکار تنظیم می شود. به طور مثال:

x = "Hello World"

#display x:
print(x)

#display the data type of x:
print(type(x))

خروجی این کد عبارت <'class 'str> خواهد بود.

مثال دیگر:

x = 20

#display x:
print(x)

#display the data type of x:
print(type(x))

خروجی این کد نیز <'class 'int> خواهد بود.

ما می‌توانیم این کار را با تمامی انواع داده انجام دهیم:

x = 20.5
x = 1j
x = ["apple", "banana", "cherry"]
x = ("apple", "banana", "cherry")
x = range(6)
x = {"name" : "John", "age" : 36}
x = {"apple", "banana", "cherry"}
x = frozenset({"apple", "banana", "cherry"})
x = True
x = b"Hello"
x = bytearray(5)
x = memoryview(bytes(5))

با این حال اگر نیاز به تعیین نوع داده به صورت دستی داشته باشید، زبان پایتون توابعی با نام data type‌ها را برای شما آماده کرده است. به طور مثال:

x = str("Hello World")
x = int(20)
x = float(20.5)
x = complex(1j)
x = list(("apple", "banana", "cherry"))
x = tuple(("apple", "banana", "cherry"))
x = range(6)
x = dict(name="John", age=36)
x = set(("apple", "banana", "cherry"))
x = frozenset(("apple", "banana", "cherry"))
x = bool(5)
x = bytes(5)
x = bytearray(5)
x = memoryview(bytes(5))

اگر روی هر کدام از مثال‌های بالا از تابع ((print(type(x استفاده کنیم حتما نتیجه همان نوع داده‌ای خواهد بود برایش تعیین کرده ایم.

اعداد در پایتون

در زبان پایتون سه نوع عدد وجود داریم:

int
float
complex

با int شروع می‌کنیم؛ int مخفف integer و به معنای عدد صحیح است، یعنی عدد مثبت یا منفی و بدون اعشار تا بی‌نهایت. چند مثال را در کد زیر می‌بینید:

x = 1
y = 35656222554887711
z = -3255522
print(type(x))
print(type(y))
print(type(z))

خروجی این کد به صورت زیر خواهد بود:

class 'int'
class 'int'
class 'int'

نوع دوم اعداد float است که با نام floating point number هم شناخته می‌شوند و در فارسی معادل اعداد اعشاری هستند؛ بنابراین اعداد منفی یا مثبت با اعشار و تا بی‌نهایت. چند مثال را در کد زیر مشاهده می‌کنید:

x = 1.10
y = 1.0
z = -35.59
print(type(x))
print(type(y))
print(type(z))

خروجی این کد به شکل زیر خواهد بود:

class 'float'
class 'float'
class 'float'

نکته: اعداد float می‌توانند نماد e را نیز قبول کنند (به معنای «به توان ۱۰»):

x = 35e3
y = 12E4
z = -87.7e100
print(type(x))
print(type(y))
print(type(z))

خروجی این کد ها به شکل زیر است:

class 'float'
class 'float'
class 'float'

نوع سوم اعداد complex می‌باشد. complex در لغت به معنی «پیچیده» یا «چند وجهی» است. به این نوع اعداد در ریاضیات «عدد مختلط» یا «عدد هم‌تافت» گفته می‌شود. چنانچه با این مبحث آشنایی ندارید می توانید به صفحه ی ویکی پدیای آن مراجعه کنید اما به زبان ساده:

“عدد مختلط یا عدد هم‌تافت عددی به شکل a + bi است که a و b اعداد حقیقی‌اند و i یکهٔ موهومی با خصوصیت i2 = -1 است. عدد a قسمت حقیقی و عدد b قسمت موهومی نامیده و نوشته می‌شود. اعداد حقیقی را می‌توان به عنوان اعداد مختلط با قسمت موهومی صفر در نظر گرفت، یعنی عدد حقیقی a معادل است با عدد مختلط a+0i.” منبع: ویکی پدیا

در زبان پایتون حرف j به عنوان قسمت فرضی عدد در نظر گرفته می‌شود. چند مثال را مشاهده کنید:

x = 3+5j
y = 5j
z = -5j
print(type(x))
print(type(y))
print(type(z))

خروجی:

class 'complex'
class 'complex'
class 'complex'

تبدیل نوع (type conversion)

شما می‌توانید اعداد را با استفاده از توابع ()int و ()float و ()complex به نوع داده‌ی مورد نظر خود تبدیل کنید:

#convert integer to float
x = float(1)
#convert float to integer
y = int(2.8)
#convert integer to complex
z = complex(x)
print(x)
print(y)
print(z)

خروجی:

۱.۰
۲
(۱+0j)
تولید عدد تصادفی

زبان پایتون تابعی به نام ()random برای تولید اعداد تصادفی ندارد اما module ای به نام random دارد که می‌ از آن برای تولید اعداد تصادفی استفاده کنیم. ابتدا باید این module را import کرده و سپس از آن استفاده کنیم. در کد زیر می‌خواهیم یک عدد تصادفی بین ۱ و ۹ تولید کنیم:

import random
print(random.randrange(1,10))

خروجی این عدد در هر بار یک مقدار تصادفی بین ۱ و ۹ خواهد بود. در جلسات پایانی این دوره در مورد این module توضیحات بیشتری خواهیم داد.

منبع: https://bit.ly/2YRj3kl

اشتباهات رایج در توسعه وب

روی سخن نویسنده این مقاله با برنامه نویسان full stack است که در فرآیند توسعه نزم افزارهای وب با هر دو فرآیند back-end و front-end روبرو هستند. اکثر این برنامه نویسان برای چگونگی مدیریت برنامه نویسی هم زمان back-end و front-end هیچ برنامه مشخصی ندارند که در نهایت وقت زیادی را برای انجام کارهای تکراری ناخواسته تلف می‌کنند.
صحبت در مورد شناخت و توانایی انجام هر دو طرف فناوری نیست، بلکه مربوط به نحوه مدیریت کارهای توسعه پروژه توسط شماست. در مورد داشتن یک رویکرد متعادل و منظم برای هماهنگی کارهای back-end و front-end و رهایی از امور اضافی و استرس زا.

اول طراحی کنید

“اگر به من شش ساعت فرصت دهید تا یک درخت را خرد کنم، چهار ساعت اول را برای تیز کردن تبر صرف خواهم کرد.” آبراهام لینکولن
مهم نیست که برنامه شما چقدر ساده یا پیچیده باشد، یک صفحه یا چند صفحه، همیشه اول برای UI و تعامل سطح بالای برنامه خود یک طرح آماده کنید. اگر قبل از شروع پروژه، طرح را تهیه نکنید، خود را مرتبا درگیر رنگ و پیکسل هر یک از مؤلفه‌های UI می‌کنید تا به یک احساس رضایت برسید و واقعیت این است که شما هرگز از رابط کاربری خود راضی نخواهید شد! این کار سرعت برنامه نویسی شما را به شدت کاهش می‌دهد و همچنین ذهن شما را دچار استرس می‌کند.
برای طراحی UI و درک تعامل بین مؤلفه‌های مختلف آن می‌توانید از ابزارهایی مانند Adobe XD یا Sketch استفاده کنید.

بپرسید بپرسید بپرسید!

می‌خواهید برای مشتریان خود پروژه بنویسید؟ با آنها جلسه کاملی داشته باشید، در مورد علایق، برنامه‌ها، الگوی‌های طراحی مختلفی که باید انجام شود. درباره لوگو، رنگها و … بحث کنید. سعی کنید نیازهای کاربر نهایی را کاملا درک کنید تا در ذهنتان شخصیتی از کاربرتان طراحی کنید.
تا زمان تصویب طراح اولیه توسط مشتری، برنامه نویسی front-end را شروع نکنید.
پروژه را بر این اساس برنامه ریزی کرده و به آن بچسبید و در نقاط عطف، ارتباط مستقیمی با مشتری خود داشته باشید.

رویکرد افزایشی داشته باشید

فرض کنید می‌خواهید یک برنامه مدیریت کتابخانه بر روی وب بسازید، برنامه اصلی را به تعدادی زیر برنامه تقسیم کنید. ابتدا آن زیر برنامه‌ها را پیاده سازی کنید، UI آنها را بسازید و قبل از انتقال به برنامه اصلی، آن را کاملاً تست کنید.
بیایید فرض کنیم ثبت نام و ورود کاربر، یکی از زیر برنامه‌ها است. ابتدا با استفاده از تمام اجزای لازم HTML مانند فرم‌ها یا برچسب‌های ورودی، که برای ورودی کاربران لازم است، بدون هیچگونه Style CSS فرم خود را ایجاد کنید. اکنون عملکردهای برنامه‌های میانی و توابع back-end را پیاده سازی کنید و این برنامه را برای ورودی‌ها و پاسخ‎های مربوطه آزمایش کنید. در آخر، کامپوننت‌های UI خود را کاملاً با استفاده از مثلا CSS طراحی کنید. حال این کار را برای هر زیر برنامه به صورت پایین به بالا تکرار کنید (در ادغام این کارها با پروژه اصلی بسیار دقت کنید) تا زمانی که یک برنامه کامل بسازید.

از ابزارها استفاده کنید

اگر به عنوان مثال در حال ساختن API هستید، از ابزار تست پروژه مانند Postman برای بررسی request/response HTTP‌ها استفاده کنید تا بتوانید به جای سایر کارها، اول بر صحت API خود تمرکز کنید.
اگر اول بخش front-end را توسعه می‌دهید، می‌توانید برای استفاده از داده‌های ساختگی به جای داده‌های واقعی، از داده‌های متنی ساختگی مانند “lorem ipsum” استفاده کنید، که بعدا هنگام شروع کار با back-end این داده‌ها را با بانک اطلاعاتی واقعی خود تعویض کنید.

ترجمه بر اساس:

“Common mistakes in web development” by Neel Vikmani @ Codeburst

منبع: https://bit.ly/2NP90rY

Create A product first!

Create a product first please!