دانستنی ها

مجموعه ای از دانستنی های حوزه های مختلف

دانستنی ها

مجموعه ای از دانستنی های حوزه های مختلف

۲ مطلب با کلمه‌ی کلیدی «رابط کاربری ui» ثبت شده است

  • ۰
  • ۰

اصول تایپوگرافی در طراحی UI

بهتر میباشد قبل از آغاز آموزش تایپوگرافی، کمی درباره‌ی تاریخچه آن بدانیم.

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

رابرت برینگهورست، یک تالیف کننده کانادایی، در کتاب خویش با تیتر “عناصر سبک تایپوگرافیک” تایپوگرافی را تحت عنوان یک مهارت انتقال زبان انسان با یک مدل بصری تعریف می کند.

ضمن این، تایپوگرافی زبان را به یک عنصر بصری تزیینی تبدیل می نماید.

تایپوگرافی تاریخ بسیار طولانی تری نسبت به پیاده سازی یا وب دارد. تایپوگرافی حدودیدر قرن ۱۱ تا ۱۲ که مردم سیستم تایپ متحرک را نوآوری کردند، تولید شد.

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

سبک تایپ استفاده شده در کتاب مقدس گوتنبرگ امروزه با تیتر (Textualis (Textura و Schwabacher شناخته می‌گردد.

امروزه، تایپوگرافی چیزی بیشتراز چاپ و سازماندهی متن ها و تعیین فونت آن میباشد.

معمولاً، تایپوگرافی تحت عنوان هنر و دانشسبک، ظاهر و ساختار فونت تعریف میشود که مقصود آن ارائه ورژن های خوشگل و خوانا به خوانند‌گان میباشد.

در واقع تایپوگرافی به همه تغییراتی اتلاق می‌شود که روی فونت انجام می‌گردد تا خوشگل و خوانا باشد و کلیه مورد های این حوزه را شامل می‌گردد.

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

در این مقاله قصد داریم اصول تایپوگرافی در طراحی UI را برای شما یه صورت کامل بیان کنیم.

نقش تایپوگرافی در پیاده سازی

اهمیت یادگرفتن تایپوگرافی در UI را با یک پیشگفتار آغاز می‌کنیم.

آیا می‌توانید یک مثال از طراحی وب سایت یا این که نرم افزار گوشی را اسم ببرید که فاقد متن است ؟

فکر میکنم یافتن همچین چیزی حقیقتا دشوار میباشد. با این وجود، صرفا وجود متن در رابط کاربری برای یک UI کارآمد و UX قابل قبول کفایت نمیکند.

می بایست به خوبی درباره متن و ظاهر آن در کنار هم اندیشید، در غیر این صورت ممکن است طرح را خراب نماید.

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

با این حالا، تایپوگرافی قسمت مهمی از یک پیاده سازی مؤثر میباشد. به نظر شما چرا؟ پاسخش اینجاست…

مردم به دریافت اکثر داده ها در پوسته متن عادت کرده اند و طراحان بایستی این مراحل را سهل و آسان و کارآمد نمایند.

علم پایه تایپوگرافی می‌تواند به درک ویژگی های ارائه بصری فونت و تأثیر آن بر درک مخاطبان کمک کند.

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

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

با کمک این شیوه تایپوگرافی به برقراری ارتباط یک طرح با اشخاص کمک می نماید.

کارایی بصری و خوانایی متن‌ها در تولیدات دیجیتال تأثیر زیادی در تجربیات استفاده کننده دارد.

در‌حالتی که فونت ها به راحتی خوانده نشوند، ممکن میباشد اشخاص در زمینه نویگیشن دچار مشکل گردیده و یا این که حتی نتوانند از آن به کار گیری نمایند.

امروزه تجربیات کاربری ضعیف در تولیدهای دیجیتال غیرقابل قبول میباشد، چراکه کاربران به راحتی می‌توانند جایگزین بهتری را پیدا نمایند.

ضمن این، تایپوگرافی بد به صورت قابل توجهی بر تأثیر اولیه اثر میگذارد؛ چراکه حتی در صورتیکه کاربران متن را نخوانند، آن را کپی خواهند کرد.

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

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

عنصرهای ضروری تایپوگرافی

اولین گام در یادگرفتن اصول تایپوگرافی در طراحی UI آشنایی با ارکان تشکیل دهنده تایپوگرافی میباشد.

در‌این بخش با این موادسازنده آشنا میشوید.

فونت و تایپ فیس

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

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

از طرف دیگر، یک فونت نمایش گرافیکی متن میباشد که معمولاً با یک تایپ فیس، اندازه و وزن خاص معرفی می‌گردد.

به عبارت دیگر، تایپ فیس چیزی مشابه به یک خانواده میباشد و فونت جزئی از آن به حساب آورده می شود.

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

Mean line ​​و Baseline

معمولا، کاراکترهای متن در یک خط مستقیم قرار گرفته و یک نمایش تصویری شسته و رفته را تولید می نمایند.

ابزار اصلی کمک به طراحان در‌این فرآیند عبارتند از Mean line ​​و baseline. اولی نشانگر بالا و دیگری بخش زیر یک کاراکتر میباشد.

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

اندازه ، وزن و ارتفاع

از مهم‌ترین مواردی که بایستی در یادگرفتن تایپوگرافی بهتر به آن توجه فرمایید کنترل مختصات فونت میباشد.

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

وزن فونت، اندازه ضخامت آن میباشد. این اندازه ها معمولاً با اینچ، میلی متر یا پیکسل اندازه گیری میگردند.

طول کاراکتر x-height” ” نیز نامیده میشود( چون بدنه هر کاراکتر اندازه ای بر پایه ی حرفX دارد). این روش سبب یکنواخت به نظر آمدن آن‌ها می‌شود.

تفکیک عنصرها متنی از قبیل تیتر اصلی، تیتر فرعی و بدنه متن با تغییر این پارامترها سهل وآسان میباشد.

Ascender و Fallender

ascender بخشی از حروف میباشد که بالاتر از خط میانی قرار میگیرد، مثلا در b” ” یا d” ” بخش های فراتر از دایره از Ascender می‌باشند. descender بر عکس آن میباشد؛ یعنی بخشی که در زیر بیس لاین قرارمی گیرد، مانند q” ” یا g” “.

فضای سفید

فضای سفید که تحت عنوان فضای منفی نیز شناخته میشود، فضای در بین عنصرهای موجود در یک پیاده سازی میباشد.

خوا‌نندگان معمولاً از نقش عظیم این اطراف آگاهی ندارند، ولی طراحان دقت زیادی به آن می نمایند.

در صورت عدم تعادل در فضای سفید، خواندن متن سخت خواهد بود. به همین دلیل فضای منفی به اندازه هر عنصر دیگری در تایپوگرافی اساسی میباشد.

هم ترازی (Alignment)

ساخت تایپوگرافی مؤثر چندان آسوده نیست و دربرگیرنده فرایندهای زیادی می‌گردد. از جمله، هم ترازی، عمل مرتب کردن یک متن میباشد.

در حین این مرحله، طراحان قطعاتی را که به طور تصادفی قرار گرفته اند را به یک ترکیب واحد تبدیل می نمایند.

در واقع در حالتی‌که متن شما یک‌سری خط میباشد، تک تک خطوط بایستی از یک خط عمودی مستقیم آغاز شوند.

ردیابی (Tracking)

در‌این قدم از فراگیری اصول تایپوگرافی در طراحی UI با ردیابی آشنا میشوید.

فرآیند ردیابی دربرگیرنده تهیه و تنظیم فضای گروهی از کاراکتر های متنی میباشد، که یک واژه و یا بلوک متنی را تشکیل میدهند.

یک طراح فاصله مناسب تمام حروف را تنظیم کرده و سبب میگردد متن خوشگل و دلپذیر به نظر رسد.

ردیابی مؤثر سبب میگردد تا حروف یک کلمه به راحتی قابل خواندن باشند.

کرنینگ (Kerning)

کرنینگ تا حدودی شبیه ردیابی میباشد، البته این دو به طور کامل یکسان نیستند.

ردیابی به معنی فاصله میان مجموع کاراکترهای فونت میباشد، در حالی که کرنینگ پروسه تهیه فضای میان دو کاراکتر در متن میباشد.

این اصطلاح معمولا در موردهای خاصی، زمانی که یک طراح تصمیم میگیرد برای طبیعی تر به نظر رسیدن، فاصله میان دو حرف خاص را تغییر‌و تحول دهد، به عمل می رود.

هدایت (Leading)

Leading فاصله میان بیس لاین ها در متن میباشد. یک Leading مطلوب به خوا‌نندگان کمک می نماید تا به راحتی از یک خط از متن به خط دیگر بروند و متن های بزرگ را خوانا می نماید.اصول تایپوگرافی در طراحی UI

در پیاده سازی، اندازه استاندارد Leading 120٪ اندازه point size فونت میباشد، ولی ممکن میباشد با دقت به مختصات نوع تایپ متفاوت باشد.

سلسله مراتب تایپوگرافی

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

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

مقصود این کار تولید تضاد دربین متن های بخش های متعدد میباشد.

به عنوان مثال تیتر و متن یک خبر را در نظر بگیرید. تیتر برای ما مهمتر میباشد پس می بایست آن را با فونتی با وزن بالاتر و اندازه درشت تر بنویسیم.

سلسله مراتب تایپوگرافی با تنظیم عنصرهای تایپوگرافی برای مثال تایپ فیس ها، فونت ها، اندازه، رنگ و همینطور تراز بندی آنان تولید می‌گردد.

سلسله مراتب تایپوگرافی از روش انواع متداول تایپ های محتوای متن مورد استفاده در پیاده سازی UI ایجاد می‌گردد.

آن‌ها مشتمل بر عنوان های اساسی، عنوان های فرعی، بدنه متن، عنصرهای فراخوان عمل، کپشن ها و موردهای دیگر می‌باشند.

این ارکان متنی لایه های متمایزی در پیاده سازی تولید می نمایند: سطح اول ، سطح دوم و سطح سوم.

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

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

و سطح سوم تایپوگرافی شامل بدنه متن و بقیه داده ها میباشد.

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

نکات تایپوگرافی برای طراحان UI

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

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

۱. هنگام استفاده از چند فونت مراقب باشید

در زمان پیاده سازی تایپوگرافی ، ممکن میباشد بخواهید خانواده های مختلف قلم را با هم مخلوط فرمائید.

از جمله ، از یک خانواده قلم برای تیتر و دیگری برای بدنه به کارگیری فرمائید.

در اینجا یک سری نکته قابل توجه وجود دارد که بایستی هنگام تعیین خانواده قلم به خاطر بسپارید:

بیشتر از سه خانواده قلم استفاده نکنید. به کار گیری هم‌زمان از بیش تر از سه خانواده قلم میتواند دکورا سیون شمارا به هم ریخته نشان دهد.

برای مبتدیان ، پیشنهاد می شود تا‌هنگامیکه به آن اشراف پیدا نکنید ، از یک خانواده خودکار به کارگیری فرمایید.

نوع حروف انتخابی شما برای متن ، بر تصمیم‌گیری برای هر نوع سخن دیگر در طرح شما تأثیر میگذارد.

بعداز آن، ازقلم مناسب برای تیتر و بند ها به کار گیری فرمایید.

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

خانواده مداد هایی که گزینش می‌کنید بایستی تکمیل کننده یکدیگر باشند.

ابزارهایی مانند FontPair یا TypeWolf میتوانند پروسه یافتن ترکیب قلم مطلوب را ساده نمایند.

۲. سلسله مراتب بصری خوب تولید فرمایید

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

طراحان می بایست با دقت به اولویت ، محتوا را سازماندهی نمایند. مهم ترین متن می بایست پر رنگ‌ترین باشد.

هنگام پیاده سازی یک شیت ، شما می بایست با h1

شروع فرمایید. حق تقدم را می توان با به کار گیری از اندازه ، وزن و رنگ فونت ایجاد کرد.

۳. اندازه قلم مطلوب را تعیین نمایید

اندازه متن شما تأثیر مهمی در خواندن مطلب روی کاغذ دارد. جلوه کوچک متن دام مشترک طراحی میباشد. متن کوچک میتواند به راحتی سبب آزار خواننده گردد.

در نتیجه، کاربران از اکثر داد ه ها ارائه شد ه چشم پوشی می نمایند. این امر مخصوصاً درباره ی تلفن همراه صدق می‌نماید.

البته متن زیاد نیز می‌تواند مشکلاتی ایجاد نماید. متن بزرگ ممکن میباشد سبب حواس پرتی گردد.

برای دسک تاپ از قلم ۱۶ پیکسل یا بالاتر برای  متن استعمال کنید. خیلی بزرگ نیست و خواندنش راحت میباشد.

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

برای Androidحداقل اندازه قلم قابل خواندن ۱۲ sp میباشد ، ولی به کار گیری از حداقل ۱۴ sp برای متن اصلی بسیار پیشنهاد می شود.

گرچه ارائه یک راه‌حل همه جانبه برای اندازه قلم ناممکن میباشد، ولی یک قانون کلی این میباشد mفاصله میان خطوط را کم نکنید.

 

جمع‌بندی و نتیجه‌گیری اصول تایپوگرافی در طراحی UI

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

شما تنها واقعابه یادگیری چیزی از روش تکرار ادامه می دهید.

هرچه مدل های نوشتاری را بیشتر آزمون نمایید ، ایده بهتری در مورد نحوه کار و ظاهر آن برای کاربران خواهید داشت.

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

به‌همین‌دلیل، از سرفصل‌های اساسی آموزش ui بحث در مورد رنگ‌ها و تایپوگرافی میباشد.

امیدواریم مطلب اصول تایپوگرافی در طراحی UI از گروه سه سوت برای شما مفید باشد.

  • علی رئیسی
  • ۰
  • ۰

طراحی رابط کاربری UI

بدون‌شک با شنیدن اسم UI، این سوال به ذهن بسیاری از اشخاص خطور می‌نماید که‌ طراحی رابط کاربری UI چیست؟

این روز ها کسب و کار و مجموعاَ زندگی به صورت فزاینده‌ای به وب، نرم‌افزار‌های اینترنتی و نرم‌افزار‌های موبایلی وابسته شد‌ه‌است.

در نتیجه، شرکت‌ها دریافته‌اند که بهترین روش برای رقابت در دنیای اینترنت، ایجاد یک رابط کاربری جذاب و کارآمد میباشد.

رابطی که تجربه مخاطب (UX) را بهینه می‌نماید.

دراین مقاله، بررسی می کنیم که UI چیست؟

و در باب عناصر UI گفت و گو میکنیم.

در پایان نکاتی را برای ایجاد رابط کاربری مطلوب بیان خوا‌هیم کرد.

طراحی رابط کاربری UI

طراحی UI چیست؟

رابط کاربری (UI) نقطه تعامل و ارتباط انسان و کامپیوتر در یک دستگاه می باشد.

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

طراحی رابط کاربری (UI)

طراحی رابط کاربری (UI) فرآیند ساخت رابط ها در اپ یا دستگاه های رایانه ای با تمرکز بر ظواهر یا سبک میباشد.

سفارش ui یا user interface یکی‌از وسیع ترین فرآیند طراحی و ساخت یک وبسایت یا نرم افزار یا این که برنامه حرفه ایست.
بی دلیل نیست که استخدام طراح UI در سالهای اخیر اهمیت فراوانی پیدا نموده است.
هدف طراحان رابط کاربری ایجاد طرح هایی میباشد که دسترسی راحت و لذت بخشی برای استفاده مخاطب فراهم میکنند.

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

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

 

تاریخچه UI

برای فهم بهتر UI و جواب UI‌ چیست می بایست اول تاریخچه رابط کاربری را بدانیم.

با ظهور ویندوز ۱٫۰ در دهه ۱۹۸۰ به زودی مشخص شد که داشتن یک اینترفیس دیجیتال که خوشایند مخاطب باشد، جهت خلق تجارب کاربری به‌یادماندنی و لذت‌قسمت، ‌جزئی ضروری محسوب میشود.
با این هم اکنون علی‌رغم این انقلاب بلندمرتبه، همچنان تا سال ۲۰۰۷ یعنی سالی که شرکت اپل با معرفی نخستین موبایل iPhone این حوزه از فناوری را دگرگون ساخت، هنوز عمق دگرگونی در طراحی UI معین نشده بود.

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

امروزه اغلب کسب‌وکارها، تأثیر این رابط کاربری بهتر را برای ساخت حس وفاداری مشتری و شناسایی برند درک کرده‌اند.

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

UI از کجا آمد؟

 
پیش از سال ۱۹۷۰، درصورتی که شما میخواستید از کامپیوترها استفاده نمائید، ناچار بودید از رابط کاربری خط فرمان (command line) کمک بگیرید.
هیچ رابط گرافیکی وجود نداشت و کاربر برای کار با کامپیوتر مجبور بود در یک صفحه سیاه دستور خویش را به زبان برنامه‌نویسی تایپ نماید تا بتواند یک کار معمولی انجام دهد.

همین کار معمولی، الان شغل سختی میباشد نه؟

در دهه ۱۹۸۰ اولین رابط کاربری گرافیکی بوسیله شرکت زیراکس (Xerox) گسترش پیدا کرد؛

با به کار گیری از این تغییر‌و تحول، کاربران می‌توانستند دستورها را از طریق آیکون‌ها، دکمه‌ها، منوها و باکس‌ها بفرستند و با کامپیوتر کار کنند.

 این به معنی بود که دیگر کدنویسی نیاز نبود و انقلاب در UI از همین مجال به بعد صورت گرفت.

در سال ۱۹۹۴ شرکت اپل کامپیوتر شخصی مکینتاش را به بازار وارد کرد؛

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

طراحی رابط کاربری UI

مولفه های یک رابط کاربری خوب

  • وضوح و سادگی استفاده ui
  • همگام با دیوایس های مختلف و داشتن طراحی ریسپانسیو
  • جلوگیری از خطاها
  • سازگاری رابط کاربری
  • ایجاد مسیر حرکت مناسب برای کاربر

برای استخدام بهترین طراحان رابط کاربری سایت و اپلیکیشن می توانید یک پروژه رایگان روی کارلنسر ثبت کنید.

پس ار مدت کوتاهی از ثبت پروژه فزیلنسرهای طراح UI پیشنهادات خود را برای سفارش شما ارایه می دهند.

با بررسی و مقایسه فریلنسرها و نمونه کارهای آنها می توانید بهترین طراح UI را برای پروژه خود انتخاب نمایید.

 

انواع رابط کاربری

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

به لوازمی که‌با حواس تعامل دارند “رابط کاربری چندین رسانه‌ای” می گویند.
به عنوان مثال، رابط کاربری روزانه، شامل ترکیبی از ورودی لمسی (کیبورد و ماوس) و خروجی بصری و شنیداری (مانیتور و بلندگوها) میباشد.

انواع دیگر رابط‌های کاربری میتواند مشتمل بر موارد ذیل باشد:

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

 

 

 

 

 

Ui چیست ؟

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

Ui در فضای مجازی

با نگاهی کلی به شبکه های اجتماعی نظیر اینستاگرام می بینیم که هشتگ #Ui در حدود ۳٫۲ میلیون فیلم و عکس در ارتباط با این مسئله طراحی گردیده‌است و این میزان نشان دهنده مهم بودن موضوع طراحی رابط کاربری است.
اثر ui بر بازدید وبسایت
تصور کنید شما به‌دنبال مقاله آموزشی می‌باشید و با سرچ در گوگل وارد دو وب سایت می‌گردید .

وبسایت اول رنگ زمینه وبسایت سفید و رنگ متن وبسایت هم زرد رنگ میباشد.
مسلما با خواندن ۳ خط نخستین چشم شما خسته می‌گردد و مسلما هیچوقت وارد اون وبسایت نمیشوید .
اکنون وارد وبسایت دوم می‌شوید رنگ زمینه وب سایت سفید و فونت وبسایت مشکی با سایز تقریبا درشت و مطلوب می‌باشد.
خب شما شروع به خواندن آن می کنید و ظاهر عالی این وب سایت با ارتباط کاربری مطلوب به یاد شما می‌ماند و به طبع در سرچ های بعدی هم او‌لین انتخاب وبسایت شما است.
سایتی که ui خوبی داشته باشد استفاده از آن ساده‌ تر میباشد و به همین دلیل، کاربران تمایل بیشتری به وبسایت نشان می ‌دهند.
هر چه تعداد کاربران وبسایت فراتر رود، رتبه وب سایت نیز بهبود بیشتری پیدا خواهد کرد و این روی بهینه سازی وبسایت نیز اثر گذار خواهد بود.
 
 

به عنوان یک طراح UI، چه چیزهایی باید بلد باشید؟

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

رنگ شناسی در رابط کاربری

مسلما رنگ ها می‌توانند به بیننده وبسایت انواع حس ها را مانند استرس ، هیجان ، انرژی و ... بدهد.

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

تاثیر فونت روی رابط کاربری

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

اندازه المان ها برای رابط کاربری

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

 

 

Sketch نرم افزاری مشتمل بر ابزارهای طراحی وکتور میباشد که مارا قادر می سازد تا کار با لایه های متعدد را انجام دهیم

به‌ عنوان یک ابزار طراحی Ui و Ux برای اکثر طراحان اینترنت جایگزین فتوشاپ گردیده‌است.
قیمت سالیانه این نرم‌افزار به گفته وبسایت سازنده چیزی حدود ۹۹ دلار می باشد.
ادوبی XD
با‌یقین نام شرکت ادوب (adobe) تا به حال بارها شنیده اید و شاید هم نام برنامه های این شرکت را شنیدید.
مانند فتوشاپ ، ایلوستریتور adobe XD یک ابزار طراحی وب سایتمیباشد که حریف اسکچ میباشد و میتوان اظهار کرد که جای نرم افزار فتوشاپ را در صنعت طراحی رابط کاربری و همینطور طراحی تجربه کاربری پر کرده است.
قیمت ماهانه این نرم افزار به گفته وبسایت سازنده چیزی حدود ۹٫۹۹ دلار می باشد
فیگما

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

فتوشاپ
همانگونه که پیش تر گفته شد جای این اپ را ادوب اکس دی گرفته میباشد.
البته همچنان بسیاری از طراحان Ui و گرافیست ها از این نرم افزار استفاده میکنند و قصد مهاجرت به برنامه های مدرن تر و راحتر را ندارند.
اکشر
برنامه Axure یک ابزار چندکاره برای ساخت و طراحی وایرفریم (wireframe) ، نمونه‌های اولیه، انواع دیاگرام، نقشه سفر مشتری (Customer Journey) و مهم‌تر از همه رابط کاربری وبسایت ها و نرم افزار‌ ها می‌باشد.
 

این اپ طراحی UI با بقیه ابزارهای معروف مثل ادوبی اکس دی و اسکچ به طور کاملً سازگار میباشد.

فایل‌های خروجی را می ‌توانید در هرکدام از این دو نرم ‌افزار بهره برد.
برنامه اکشر برای کار تیمی روی پروژه‌ها بهینه‌سازی گردیده‌است.

امکان اتصال به پلتفرم‌هایی مثل اسلک امداد می‌نماید تا راحت‌تر و سریع‌تر بتوانید هماهنگی‌های لازم را روی پروژه اعمال دهید.

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

  • علی رئیسی