رفتن به مطلب
جامعهٔ برنامه‌نویسان مُدرن ایران

جستجو در تالارهای گفتگو

در حال نمایش نتایج برای برچسب های 'ux'.



تنظیمات بیشتر جستجو

  • جستجو بر اساس برچسب

    برچسب ها را با , از یکدیگر جدا نمایید.
  • جستجو بر اساس نویسنده

نوع محتوا


وبلاگ‌ها

چیزی برای نمایش وجود ندارد

چیزی برای نمایش وجود ندارد

تالارهای گفتگو

  • انجمن‌های آی او استریم
    • اخبار و اعلامیه‌های سایت
    • اسناد و قوانین مرجع
    • رویداد‌ها و جلسات
    • معرفی محصولات نوشته شده‌ بومی
    • مرکز نظرسنجی جامعه‌ی برنامه‌نویسان
    • مقالات و اسناد مشاوره‌ای
    • مرکز چالش برانگیز برنامه‌نویسان
    • رمز‌های موفقیت
    • ابزار‌ها و نرم‌افزارهای کاربردی برنامه‌نویسان حرفه‌ای
  • استارتاپی و کسب‌و‌کار
    • استارتاپ‌ها
    • سرمایه گذاری
    • شتاب دهنده‌ها
    • پارک‌های علم و فناوری و مراکز رشد
    • مصاحبه با استارت‌آپ‌ها
    • قوانین حقوقی
    • داستان‌های موفقیت
    • کارآفرینان و متخصصین
    • مشاوره اجرای کسب‌وکار
    • اخبار حوزه‌ی استارتا‌پی
    • آگهی‌های استخدامی
  • زبان‌های برنامه نویسی
    • برنامه نویسی در C و ‏++C
    • برنامه نویسی با Java
    • برنامه نویسی با JavaScript
    • برنامه نویسی با Go
    • برنامه نویسی با Python
    • برنامه نویسی با Delphi
    • برنامه نویسی با Ruby
    • برنامه نویسی با VB6
  • ابزار‌های ساخت و ساز
    • ابزار CMake
    • ابزار QMake
    • ابزار Qbs
    • ابزار Make و Autotools
  • طراحی و توسعه وب
  • طراحی و توسعه وب اپلیکیشن‌ها
    • طراحی و توسعه در Angular
    • طراحی و توسعه در React.JS
    • طراحی و توسعه در Vue.JS
  • طراحی و توسعه موبایل و اِمبِد‌ها و تلوزیون‌ها
    • برنامه نویسی تحت محصولات اپل
    • برنامه نویسی تحت محصولات گوگل
    • طراحی و توسعه تحت محصولات دیگر
  • برنامه‌نویسی سطح پایین و سیستم عامل‌ها
    • سیستم عامل‌های آزاد
    • سیستم عامل‌های تجاری
    • مباحث آموزشی مرتبط با سیستم‌عامل
  • شبکه و اینترنت
  • بانک‌های اطلاعاتی
  • برنامه نویسی تحت محصولات اپل
  • برنامه نویسی تحت محصولات مایکروسافت
  • طراحی و توسعه تجربه کاربری (UX) و رابط کاربری (UI)
  • درخواست انجام پروژه (ویژه)
  • سوالات و مباحث عامیانه
  • سطل آشغال

Product Groups

  • کتاب‌ها و مقالات آموزشی

دسته ها

  • علمی
  • استارتاپی
  • برنامه‌نویسی
    • زبان‌های برنامه نویسی
    • معماری‌ها
  • کامپایلر و مفسر
  • محیط‌های توسعه
  • طراحی و توسعه‌ی وب
  • مجوز‌های نرم‌افزاری
  • فناوری‌ها
    • پردازش تصویر
    • اینترنت اشیاء
    • پردازش ابری (Cloud Computing)
    • چند سکویی (Cross-Platform)
    • بیگ دیتا (Big Data)
    • هوش مصنوعی (AI)
    • سخت افزار
    • نرم‌افزار و اپلیکیشن
    • اینترنت و شبکه
    • رمزنگاری
    • امبد‌ها (Embedded)
  • طراحی
    • تجربه کاربری
    • رابط کاربری

دسته ها

  • عمومی
  • گرافیکی
  • شبکه و ارتباطات

دسته ها

  • کامپایلر‌ها
  • محیط‌های توسعه
  • کتابخانه‌ها
  • ماژول‌ها و پلاگین‌ها
  • محصولات بومی
  • کتاب‌ها و مقالات
  • زبان‌ها و ابزار‌ها
  • طراحی و گرافیک

جستجو در ...

نمایش نتایجی که شامل ...


تاریخ ایجاد

  • شروع

    پایان


آخرین بروزرسانی

  • شروع

    پایان


فیلتر بر اساس تعداد ...

تاریخ عضویت

  • شروع

    پایان


گروه


درباره من


شماره تلفن همراه


شناسه گیت‌هاب


شناسه لینکدین


شناسه پیام رسان


شهر


آدرس پستی

7 نتیجه پیدا شد

  1. الهه انصاری

    اصول طراحی: ثبات و سازگاری

    ثبات یک اصل اساسی در زندگی و طراحی است. بدون آن نمی‌توانیم ادامه دهیم. اگر از عهده‌ی اعمال آن برآیید، حتی سخت‌ترین مشکلات نیز از بین خواهند رفت! ثبات یکی از اصول طراحی است که دوست داریم به طور مرتب آن را نقض کنیم. من نیز در انجام این کار مقصر هستم و به آن افتخار نمیکنم. پیش بردن کامل کارها به صورت خلاقانه می‌تواند به راحتی این اصل طراحی را زیر پا بگذارد. موضوع مورد مطالعه پیرامون اصل ثبات در طراحی بسیار زیاد است. من تمام تلاش خود را برای بیان مهم‌ترین نکات آن خواهم کرد. در ادامه می‌توانیم یاد بگیریم که چگونه از ثبات استفاده کنیم و چگونه آن را در طرح‌های خود حفظ کنیم بدون اینکه این اصل را نقض کنیم. اصل ثبات در طراحی چیست؟ ثبات یکی از مولکول‌های دی ان ای طراحی است. طراحی سازگار، طراحی بصری است. بسیار مفید است و جهان را به مکانی بهتر تبدیل میکند. به طور خلاصه، هنگامی که عناصر مشابه ظاهر و عملکرد یکسانی داشته باشند، قابلیت استفاده و یادگیری بهبود می‌یابد. وقتی سازگاری و ثبات در طراحی شما وجود داشته باشد، افراد می‌توانند دانش را به زمینه‌های جدید منتقل کنند و موضوعات جدید را به سرعت و بدون دردسر بیاموزند. به این ترتیب آن‌ها می‌توانند بر اجرای کار تمرکز کنند و نیازی به تمرکز بر یادگیری این که چگونه هر بار رابط کاربری محصول تغییر زمینه می‌دهد ندارند. ما انسان‌ها به طور پیش فرض ثبات را دوست داریم! بدن‌های جسمانی ما به طور دائم در تلاش برای کسب تعادلی مداوم هستند؛ بنابراین می‌توانیم سالم باشیم. ما باید احساس کنیم که شرایط برای احساس امنیت و ایمنی سازگار است. مزایای ثبات و یکپارچگی کاربران، نحوهٔ استفاده از طرح شما را سریع‌تر یاد می‌گیرند. فرض کنید که عناصر سازگار در طراحی شما همان حروف الفبا هستند. وقتی کاربر الفبای شما را یاد گرفت، می‌تواند به هر قسمتی از محصول برود و بتواند بدون هیچ مشکلی با رابط ارتباط برقرار کند. داشتن رابط متناقض همانند تلاش برای برقراری ارتباط با کاربر به چندین زبان است. در این حالت فقط کاربران پیشرفته و حرفه‌ای قادر به انجام کارهای خود خواهند بود؛ بنابراین باید رابط ساده و سازگاری داشته باشید. ثبات و سازگاری، سردرگمی را از بین می‌برد! وقتی کاربر احساس سردرگمی کند، مرحلهٔ بعدی احساس ناامیدی است. ما نمی‌خواهیم کاربر عزیز ما این گونه احساس کند، نه؟ ثبات باعث صرفه جویی در هزینه و زمان می‌شود! طراحی سازگار اغلب توسط اجزای از پیش تعریف شده ساخته می‌شود. این امر به طراحان و ذینفعان اجازه می‌دهد تا بدون صرف وقت با ارزش برای استدلال، سریع تصمیم بگیرند. این مورد باعث صرفه جویی در وقت میشود که میتواند برای ساخت محصول و پیشرفتهای چشمگیر و افزایشی به کار گرفته شود. چهار نوع مختلف ثبات و سازگاری بیایید چهار نوع سازگاری را بررسی کنیم که مهم است که هنگام طراحی از آن آگاه باشید. سازگاری بصری عناصر مشابه که به همان شیوه درک می شوند ، قوام بصری را تشکیل می دهند. این باعث افزایش یادگیری محصول می شود. برای حفظ قوام بینایی ، قلم ها ، اندازه ها ، دکمه ها ، برچسب زدن و موارد مشابه باید در سراسر محصول باشند. سازگاری عملکردی کنترلهای مشابه که به همان روش کار میکنند ، قوام عملکردی را تشکیل میدهند. قابلیت پیش بینی محصول را افزایش میدهد. پیش بینی پذیری موجب میشود تا کاربران احساس امنیت و امنیت کنند. به عنوان مثال، راه برگشت به یک مرحله در جریان باید به همان روش در سراسر محصول کار کند. سازگاری داخلی این ترکیبی از هماهنگی بصری و عملکردی در طراحی محصول شما است. این قابلیت استفاده و یادگیری محصول را بهبود میبخشد. حتی هنگامی که ویژگی ها یا صفحات جدید را معرفی میکنید، کاربران تا زمانی که قوام داخلی را حفظ کنید، از آن‌ها آسان استفاده خواهند کرد. سازگاری خارجی این نوع سازگاری زمانی حاصل میشود که ثبات طراحی در چندین سیستم یا محصول وجود داشته باشد. به این ترتیب میتوان از دانش کاربر برای یک محصول در محصول دیگر استفاده مجدد کرد. بله، این به از بین بردن بسیاری از اصطکاکها کمک می کند و تجربه‌ٔ کاربری خوبی را ارائه میدهد. مثال خوب سازگاری خارجی رابط کاربری محصولات Adobe است. هنگامی که کار با فتوشاپ را میدانید استفاده‌ٔ‌ مجدد از همان دانش برای استفاده از Illustrator و غیره بسیار سادهتر است. دستیابی به این چهار نوع سازگاری به طراحی شما کمک میکند تا از قابلیت استفادهٔ بهتر و استفاده کنندگان خوشحالتری برخوردار شود. چگونه سازگاری را فراهم کنیم؟ ماهیت سازگاری این گونه است که بتوانید یک عمل یا عنصر مشابه را چندین بار تکرار کنید و همچنان با دستیابی به کار از کاربر پشتیبانی کنید. عوامل بصری تایپوگرافی، رنگ‌ها، فضا، شبکه (grid)، اندازه و موقعیت‌ها؛ این عناصر باید در یک مکان مرکزی تعریف شده و سپس در کل سیستمی که طراحی می‌کنید استفاده شوند. سلسله مراتب بصری قوی تعریف کنید؛ به طوری که مهم‌ترین موارد، بزرگ‌تر از موارد کم اهمیت‌تر باشند. از همان پالت رنگی در سراسر محصول استفاده کنید. حاشیه‌ٔ داخلی (padding) و حاشیه‌ٔ خارجی (margin) باید در تمام عناصر مشابه (دکمه‌ها، کارت‌ها و غیره) سازگار باشند. همه چیز را باید در یک شبکه به انتخاب خود مرتب کنید که امکان چیدمان همه‌ٔ اجزا را به روشی زیبا و ظریف فراهم کند. داشتن عوامل بصری سازگار به کاربر این امکان را می‌دهد تا سیستم را سریع یاد بگیرد و تجربه‌ای روان و دلنشین داشته باشد. وقتی از عوامل بصری سازگار استفاده می‌کنید، طراحی شما از فنگ شویی خوبی بهره خواهد برد. در این لینک نمونه‌های مناسبی با دستورالعمل‌هایی از این سبک آورده شده است. صدا و لحن زبان و لحنی که شما در کل جریان کاربر استفاده می‌کنید، بر نحوه‌ٔ درک کاربر از محصول تاثیر می‌گذارد. صدا و لحن را در حالت ثبات و سازگاری حفظ کنید تا ارتباط گیرا، مختصر و مفیدی با کاربر شکل بگیرد. ما نمی‌خواهیم ذهن کاربر خیلی درگیر و شلوغ شود، مگر نه؟ اگر می‌خواهید صدایی بامزه و دوستانه در طراحی محصول خود داشته باشید، این کار را تا دریافت پیام‌های خطا ادامه دهید. MailChimp نمونه‌ی خوبی از صدا و لحن سازگار است. از الگوهای آشنا استفاده کنید افرادی که از طرح‌های ما استفاده می‌کنند ،خواه دیجیتال باشد یا نباشد، از مدتی قبل با آ‌ن‌ها درگیر بوده‌اند. این بدان معنی است که آن‌ها طراحی‌های دیگری را تجربه کرده و یاد گرفته‌اند و کار با الگوهای به کار رفته در آن‌ها را به خوبی می‌دانند. http://www.mobile-patterns.com ما باید از این مورد استفاده کنیم و الگوهای آشنا را در طراحی‌های خود بگنجانیم. در این صورت سفر کاربر بسیار روان‌تر خواهد بود و افراد حتی فکر نمی‌کنند که «هوم، چگونه از این استفاده کنم؟»؛ آن‌ها مستقیما بدون درنگ از آن بهره می‌برند. در این دو منبع، موارد خوبی برای بررسی الگوهای مختلف وجود دارد: Mobile Patterns و Design Patterns. ثبات را به دست آورید، آن‌ها را بر هم نزنید ممکن است تصور کنید که سازگاری می‌تواند کاربر را خسته کند. اگر اجزا را همیشه در حالت ثبات نگه داریم تقریبا دیگر هیچ نوآوری وجود نخواهد داشت. قبل از این‌که بخواهیم از قوانین بهره‌ای ببریم ابتدا باید آن‌ها را یاد بگیریم. بله، سعی کنید آن‌ها را دور نزنید! سازگاری شکسته شده و زیر پا گذاشته شده برابر است با یک طراحی و تجربه‌ٔ کاربری خراب. این مسئله هم برای کاربر و هم برای سازمان یک درد است. روند طراحی کند می‌شود. کلی سرمایه‌ٔ اضافی صرف می‌شود تا افراد در اتاق جلسات بر سر این که بهترین رنگ برای آن دکمه چیست، بحث کنند. هر کسی زمان ارزشمند خود را از دست می‌دهد تا تصمیماتی بگیرد که پیش از این باید اتخاذ شده و اکنون دوباره مورد استفادهٔ مجدد قرار گیرد. طراحان باید تا حد امکان ثبات را حفظ و ایجاد کنند. ثابت نگه داشتن امور به معنای کند شدن تغییر است. ما هنوز هم نیاز داریم که محصولمان لذت بخش و جذاب باشد. ما به آن‌ها نیاز داریم تا به نسخه‌ی بهتری تبدیل شوند. بنابراین، چگونه باید ثابت قدم بمانیم و همچنان به موقعیتی که می‌خواهیم برسیم و تغییر کنیم؟ «راز» این کار در درک کاربران است. تمام تصمیمات طراحی شما باید از همین درک حاصل شود. فقط درصورتی که سیستم مورد نظر شما از نیاز کاربر مطلع شده باشد، تنظیمات را اعمال کنید. انجام این تغییرات کوچک، محصول را به نسخهٔ بهتری مبدل ساخته و ثبات آن را حفظ می‌کند. افکار نهایی طراحی خود را با انتظارات کاربران هماهنگ کنید. کاربران خود را بشناسید دقیقا همان طور که شریک زندگی خود را می‌شناسید. قادر باشید از زاویه‌ٔ دید آن‌ها نگاه کنید و از طریق قلب آن‌ها احساس کنید. با آن‌ها یکی شوید. آن را با درک کامل از اصول طراحی مانند سلسله مراتب بصری، تایپوگرافی، الگوهای کاربردی و غیره ترکیب کنید. به یاد داشته باشید که تغییرات اندک خوب است اما تغییر بیشتر لزوما بهتر نیست! ثبات را ایجاد کنید تا قابلیت استفاده را بهبود بخشید و با کاهش اجزای غیر منتظره، لذت وصف ناپذیری در تجربه‌ٔ کاربر ایجاد نمایید. منبع امیدوارم مطالب برای شما همراهان عزیز مفید واقع شوند. با نظرات ارزنده‌ٔ خود ما را در این مسیر یاری کنید
  2. کامبیز اسدزاده

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

    به نظر شما قلم یا هما فونت در طراحی رابط کاربری چقدر اهمیت دارد؟ ممکن است با خود بگویید طراحی و حل مشکلات نرم‌افزاری و در نهایت اجرای درست کد‌های نوشته شده اولویت بسیار بیشتری دارد و از این نظر برای مشتری کافی است! من تأکید می‌کنم این تفکر کاملاً اشتباه و بر خلاف قوانین UX خواهد بود. چرا که اولین واکنشی که کاربر شما با محصول خواهد داشت بازخورد‌های مربوط به ظاهر، مکان‌ها، چیدمان، قلم و در کل رابط کاربری آن خواهد بود. اگر شما به این فکر کنید که تنها با یک ظاهر عادی و کد‌های بک‌اندی بسیار عالی یک محصول را به بالا‌ترین درجهٔ فروش خود برسانید، سخت در اشتباه هستید. تمامی محصولاتی که کاربران آن‌ها وفادار هستند و ترجیح می‌دهند آن‌ها را برای دیگران هم پیشنهاد بدهند، از قوانین UX و UI به درستی تبعیت کرده‌اند. حتی در محیط‌های توسعه که کاملاً تخصصی هستند، یک رابط کاربری در‌دسترس، قابل درک و راحت بسیار پرطرفدار‌تر از یک محیط سخت و خُشک خواهد بود. قبل از هر چیز این نکته را یادآوری می‌کنم، فونت (قلم) در ظاهر برنامه یک اصل اساسی است و می‌تواند به اندازهٔ بسیار چشم‌گیری در زیبا بودن و برعکس بی‌ریخت بودن ظاهر برنامهٔ شما موثر باشد. اینکه شما با یک قلم پیشفرض مانند Tahoma یا Arial محصول خود را نهایی کنید نشان‌دهندهٔ آن است که هیچ اطلاعی در مورد طراحی رابط کاربری ندارید و صرفاً با معلومات فنی و کد‌نویسی خود سعی در توسعهٔ محصول و انتشار آن داشته‌اید! از نظر من این یکی از ناشیانه‌ترین رفتار‌هایی است که باعث می‌شود محصولات و یا همان نمونه‌کار‌های شما بیشتر از آنچه که باید دیده نشوند. بنابراین، پیشنهاد می‌کنم قبل از انتشار محصول نهایی حتماً به ظاهر آن توجه کنید که در این مقاله صرفاً به یکی از گزینه‌های بسیار مهم در طراحی رابط کاربری اشاره می‌کنم. فونت‌هایی که پیشنهاد می‌کنم به دو دستهٔ تجاری و آزاد خواهند بود که بر اساس شرایط توسعهٔ خودتون می‌توانید از آن‌ها استفاده کنید. فونت‌های آزاد (طراحی و توسعه توسط دوستمون صابر راستی‌کردار) وزیر صمیم شبنم تنها گندم پرستو ساحل ناهید جهت مقایسهٔ این فونت‌ها به این لینک مراجعه کنید. فونت‌های تجاری (طراحی و توسعه توسط دوستمون مسلم ابراهیمی) ایران یکان ایران سنس دانا فرهنگ انجمن دماوند پیدا کتیبه مانلی و ... جهت بررسی و مقایسه‌ به این لینک مراجعه کنید. درضمن، در رابطه با فونت‌های لاتین تمامی این فونت‌ها شامل نوع لاتین مثل Roboto می‌باشند که در زمان استفاده خودتون باید انتخاب کنید اعداد و نشانه‌گذاری‌ها به سبک لاتین باشند یا فارسی و عربی. در انتخاب فونت نسبت به هدف پروژه دقت کنید، برای مثال در اپلیکیشن‌های کسب‌و‌کار نباید از فونتی مثل تحریر، تاهوما، مانلی یا چنین سبک‌ها استفاده کنید. این کار بسیار اشتباهیه! وزن‌ها تنوع وزن‌ها به طراح این امکان را می‌دهد تا نزدیکترین ضخامت به ایدآل خود را انتخاب کند. در نظر داشته باشید انتخاب وزن‌های مناسب در جای مناسب خود بسیار مهم است. برای مثال، انتخاب یک وزن سبک برای عنوان مناسب نیست! همچنین انتخاب یک وزن Bold, Ex Bold, Black و ضخیم‌تر هم برای توضیحات و متن‌های طولانی مناسب نمی‌باشد. انتخاب صحیح برای عنوان نوع Bold یا Black و انتخاب صحیح برای متن‌های طولانی، توضیحات و غیره نوع Light و یا Regular است. بنابراین، در انتخاب نوع قلم با وزن مناسب باید دقت کرد تا بخش‌های پر اهمیت با بخش‌های کم اهمیت بر اساس اولویت در خوانده شدن متمایز شوند. هایرآرکی (سلسله مراتب) در تایپوگرافی چیست؟ هایرآرکی (Hierarchy) در تایپوگرافی یعنی اینکه نوشته‌ها را طوری کنار هم قرار دهیم که مهم‌ترین جمله اول خونده شود و به ترتیب، نوشته‌های کم اهمیت‌تر به ترتیب اهمیت خوانده شوند. این یک قانون است که وقتی همه چیز را مهم کنیم در واقع هیچ چیز مهم نیست! وقتی به همهٔ دانشجویان کلاس نمرهٔ ۲۰ بدهید یعنی هیچ‌کدام از آن‌ها بهترین نیستند. در طراحی اگر چند گزینه را بر روی صفحه قرار دهید لازم است جذاب‌ترین قسمت را برجسته‌تر از بقیه نشان بدهید. با این کار ما یک دروازهٔ زیبا برای ورود ساخته‌ایم. کاربر با دیدن این جملهٔ جذاب که شما طوری آن را طراحی کرده‌اید که زودتر از بقیه دیده و وارد ماجرا شود. اما اگر فکر کرده‌اید کار تمام است اشتباه کرده‌اید. باز هم به همین ترتیب باید ادامه بدهید. یعنی با ترفند‌های تایپوگرافیک کاری کنید که دومین جمله مورد نظرتان واقعاً در اولویت دوم دیده شود. از طرفی ممکن است ترتیب ارائه اطلاعات مهم باشد، عنوان اصلی، زیر عنوان، تیتر‌ها، متن اصلی و توضیحات پاورقی و … این مثال تصویری به خوبی موضوع سلسه مراتب در تایپوگرافی را نشان می‌دهد: در تایپوگرافی چندتا سلسله مرتبه داشته باشیم؟ عنوان اصلی (تیتر) عنوان فرعی (زیر تیتر) متن (بدنه مطلب) اطلاعات جزئی (توضیح عکس، ارجاع به منابع) چطور طراحی متن از نوع سلسله مراتبی ایجاد کنیم؟ شاید این راه‌ حل در ذهن شماست که هرچه مهم‌تر و مقدم‌تر است را بزرگتر می‌نویسیم. اما باید بگوییم که اینطور نیست. برای برجسته کردن یک متن از دیگری باید تضاد ایجاد کنیم و تضاد فقط با تغییر اندازه ایجاد نمی‌شود. مواردی از قبیل: تغییر نوع فونت، وزن فونت، رنگ فونت، ایتالیک یا ایرانیک بودن، کشیدگی حروف و فضا همه مواردی هستند که به کمک آنها می‌توان تضاد ایجاد کرد. همینطور که در مثال بالا می‌بینید اولین جمله کوچکتر و نازک از جمله دوم است اما در مرتبه اول قرار دارد. در اینجا نوع رنگ و فضا باعث برجستگی جمله اول است. در طراحی وب عمومی‌ترین روش برای انجام طراحی سلسله‌مراتبی در تایپوگرافی استفاده از برچسب های هدینگ در HTML است. از H1 تا H6 مهمترین عنوان‌ها تا کم اهمیت‌ترین نوشته‌ها را طبقه بندی کنید. قواعد سلسله‌مراتبی به جز تایپوگرافی در هر نوع طراحی دیگر نیز وجود دارد و می‌توان با رعایت آن قدرت تاثیر‌گذاری بخش‌های مختلف را کنترل و نظم دهی کرد. اگر آیتم‌های طراحی شما خیلی زیاد هست درست نیست که تعداد تقسیم بندی و سلسله مراتب را زیاد کنید. این کار باعث آشفتگی خواهد شد. در برخی از محصولات که مذهبی هستند فونت‌ها می‌توانند اختصاصی باشند مثل فونت کتیبه، رهروان. اینکه فونت‌های آزاد نیازی به هزینه ندارند و برعکس فونت‌های تجاری اغلب در اوج راه‌اندازی کسب‌و‌کار‌ها نیاز به مجوز‌های گران قیمتی هستند شکی نیست! پیشنهاد من این است ابتدا از نسخه‌های رایگان مثل فونت صمیم استفاده کنید این خیلی بهتر از فونت پیشفرضی مثل Tahoma یا Arial خواهد بود، در طراحی نرم‌افزار این مسائل بسیار مهم هستند. چه موقع باید از فونت‌های تجاری استفاده کرد؟ پیشنهاد من این است زمانی که کسب‌و‌کار شما با جدیت وارد بازار کار شد می‌توانید از مجموعهٔ فونت‌ایران درخواست فونت‌های تجاری کنید، معمولاً به آدرس هر وب‌سایت و برای هر پروژه یک مجوز ارائه می‌کند. بعد از راه‌اندازی کسب‌و‌کارتان، فونت را در قالب مجوز‌های غیر‌تجاری و یا کسب‌و‌کار‌های کوچک سفارش بدهید تا بتوانید با هزینه‌های بسیار پایین‌تر و تا زمانی که پروژهٔ شما درآمد میلیونی نداشته باشد از آن مجوز‌ها استفاده کنید.
  3. یه سوال داشتم که خیلی وقت هست درگیرش هستم. من خودم به صورت عادی از win32 در ++C استفاده میکنم و برای ساختن حتی یه button کلی زور میزنم و کد مینویسم برای رویداد ها و لوکیشن و ... حالا بماند که برای تنظیم یک رنگ برای یک button یا text چقدرر دردسر دارم. من قبلا با زبان #C کار میکردم و با رابط گرافیکی و طراحی رابط گرافیکی اون به خوبی آشنا هستم . البته میدونم که امنیت برنامه های .net کلا ضعیف هست اما از لحاظ گرافیکی به راحتی میشه هر نوعی که بخوایم در کمترین زمان طراحی کنیم. البته اگر بخوایم باز کد ها و دستورات رو با .net بنویسیم چیز جالبی نمیشه. البته نا گفته نماند که به Qt ام برای طراحی فکر کردم اما چند تا مشکل دارد . اولی اینکه حجم برنامه رو به شدت میبره بالا . دوم تعداد فایل های برنامه رو میبره بالا . سوم من در کل IDE برنامه نویسیم در Visual studio هست و به اون بیشتر عادت دارم چون خیلی ساده تر هست نسبت به Qt و اگر بخوام پلاگین های qt رو بریزم توی vs باز هم باید به صورت کد و لوکیشن و ... انجام بدم که تقریبا مثل win32 میشه فکر کنم. من خودم شخصا برای این مشکل به این فکر افتادم که رابط گرافیکی رو با c# بنویسم و همه کد ها رو توی یه قالب dll که به زبان c++ نوشته شده از #C فراخانی کنم. نظر شما چیه؟ راه حل بهتری سراغ دارید؟
  4. الهه انصاری

    فرایند UX: این فرایند چیست و چرا مهم است؟

    در این مقاله، ما یک فرایند طراحی UX و همچنین ترتیبی را که در آن مراحل خاص این فرایند باید انجام شود، تعریف می‌کنیم و خواهیم دید که چه روش‌هایی می‌تواند توسط طراحان UX در هر فاز استفاده شود. فرایند UX چگونه فرایندی است؟ پاسخ این سوال به برخی مسائل بستگی دارد. فرایند طراحی UX چیزی است که تمام فعالان حوزه‌ی طراحی آن را انجام می‌دهند البته هر کسی به شیوه‌ی متفاوت! چراکه فرایند UX به شدت به خود پروژه بستگی دارد. پروژه‌های مختلف نیاز به رویکرد‌های متفاوت دارند؛ رویکرد یک وبسایت شرکتی متفاوت از شیوه‌ی طراحی یک چت‌ روم است. علاوه‌بر برخی شیوه‌ها (مانند تحقیق محصول قبل از آماده شدن نمونه‌ی اولیه) که طراحان UX برای هر پروژه دنبال می‌کنند، اصولی نیز در هر بخش از این فرایند وجود دارد که باید به صورت سفارشی برای هر پروژه به طور خاص طراحی شوند. مرور کلی بر فرایند UX هر فرایند UX باید شامل ۵ مرحله‌ی کلیدی زیر باشد: ۱. تعریف محصول (Product Definition) یکی از مهم‌ترین مراحل طراحی UX در واقع قبل از آغاز طراحی انجام می‌شود. قبل از این‌ که بتوانید یک محصول بسازید، باید زمینه را برای وجودش درک کنید. مرحله‌ی تعریف محصول، زمینه‌ی موفقیت آن را مهیا می‌کند. در این مرحله، طراحان UX محصول را در بالاترین سطح انتزاع (اساسا مفهوم محصول) با ذینفعان به اشتراک می‌گذارند. این مرحله معمولا شامل موارد زیر است: مصاحبه با ذینفعان: مصاحبه با ذینفعان کلیدی در یک پروژه برای جمع آوری اطلاعات در مورد اهداف آن انجام می‌شود. تعریف اهداف و ارزشهای محصولی که می‌خواهید ایجاد کنید، یک عامل کلیدی برای فرایند هدایت یافته است. ایجاد گزاره‌ی ارزش: گزاره‌ی ارزش، جنبه‌های کلیدی محصول را مشخص می‌کند؛ چیست، برای چه کسی طراحی شده‌است، چه زمانی و چه جایی از آن استفاده خواهد شد. گزاره ارزش به تیم و ذینفعان کمک می‌کند که در مورد محصول توافق حاصل شود. طرح مفهومی: ایجاد یک مدل اولیه از آنچه که تیم به دنبال ساخت آن است. جلسه ی kick-off پروژه: این نشست همه‌ی عاملان و بازیکنان کلیدی را جهت تعیین انتظارات مناسب برای تیم و سهامداران گرد هم می‌آورد. نتایج این جلسه شامل طرح سطح بالایی از هدف محصول، افراد دخیل در طراحی و توسعه‌ی محصول، چگونگی مشارکت و انتظارات ذینفعان (مانند KPI و چگونگی اندازه گیری موفقیت محصول) است. ۲. تحقیقات محصول (Product Research) هنگامی که ایده‌ی محصول تعریف شد، تحقیقات محصول (که به طور طبیعی شامل تحقیقات کاربر و بازار است) نیمه‌ی دیگر پایه و اساس کار را برای طراحی عالی فراهم می‌کند. تحقیقات خوب، اطلاعات مفید و ارزنده‌ای جهت آینده ی هر چه بهتر محصول شما می‌دهد و صرفه جویی زیادی در استفاده از منابع مالی و زمانی می‌شود. فاز تحقیق محصول در بین بیش‌تر پروژه‌ها متغیر است و به عوامل مختلفی از جمله پیچیدگی محصول، زمان بندی، منابع موجود و بسیاری از موارد دیگر بستگی دارد. این مرحله می‌تواند شامل موارد زیر باشد: مصاحبه‌های عمیق فردی (Individual in-depth Interviews, IDI) : تجربه‌ی تولید یک محصول عالی با درک درست از کاربران میسر می‌شود. طراحان UX نه تنها می‌خواهند بدانند که کاربران چه کسانی هستند، بلکه می‌خواهند عمیق‌تر به نیازها، ترس‌ها، انگیزه‌ها و رفتار آن‌ها واقف باشند.. تحقیقات رقابتی: تجزیه و تحلیل جامع محصولات رقیب، ویژگی‌های موجود در آن‌ها را با روش قابل مقایسه‌ای در ذهن طراحان ترسیم می‌کند. تحقیق به طراحان UX کمک می‌کند تا استانداردهای صنعت را درک کنند و فرصت‌های محصول را در حوزه‌ی مشخصی شناسایی کنند. ۳.‌ آنالیز هدف از مرحله‌ی تحلیل این است که دیدگاه‌های حاصل از اطلاعات جمع آوری شده در طول مرحله‌ی تحقیق را به دست آوریم. نگهداری، سازمان دهی و نتیجه گیری از آنچه که کاربران می‌خواهند، فکر می‌کنند و نیاز دارند می‌تواند به طراحان UX کمک کند تا شروع به درک "چرایی" این سوال‌ها کنند. در طی این مرحله، طراحان قرارداد می‌کنند که مهم‌ترین فرض‌هایی که انجام شده‌اند معتبر هستند. این مرحله معمولا شامل موارد زیر است: ایجاد شخصیت‌های فرضی: این کاراکترهای تخیلی برای نشان دادن انواع مختلف کاربرانی هستند که می‌توانند از یک محصول به همان شیوه‌ی مشابه استفاده کنند. هدف از این شخصیت‌های فرضی ایجاد بازخوردهای قابل اعتماد و واقع بینانه از بخش‌های اصلی مخاطبان برای مرجع است. ایجاد نقشه‌های تجربه (Experience maps) : این نقشه یک ابزار طراحی مهم برای درک تعاملات محصول یا سرویس از دیدگاه کاربران است. نقشه‌ی تجربه، اساسا یک نمایش بصری است که جریان کاربری را در یک محصول یا سرویس نشان می‌دهد. یک نقشه‌ی تجربه‌ی پایه‌ای مسیر واحدی (یک کاربر، یک هدف، یک سناریو) را دنبال می‌کند حتی زمانی که محصول یا سرویس اجازه‌ی تغییرات مسیر را می‌دهد. ۴. طراحی هنگامی که انتظارات کاربر از محصول ایجاد شد (که اهداف آن‌ها چیست و چگونه می‌خواهند با محصول کار کنند)، طراحان UX به سمت مرحله‌ی طراحی حرکت می‌کنند. فاز طراحی موثر، همکاری زیاد و تکرار شونده‌ای می‌طلبد بدین صورت که نیاز است تا از تمامی عاملان و تیم درگیر در توسعه‌ی محصول ورودی بگیریم و به صورت عقب گرد به ابتدا برگردیم تا ایده‌ها و مفروضات خود را اعتبار سنجی کنیم. مرحله‌ی طراحی شامل موارد زیر است: طرح بندی (Sketching) : طرح بندی ساده‌ترین راه برای تجسم ایده‌های ما است. رسم دستی نیز سریع‌ترین راه برای تجسم یک مفهوم است. طرح بندی به طراح اجازه می‌دهد تا طیف گسترده‌ای از راه حل‌های طراحی را قبل از تصمیم گیری نهایی تصور کند. ایجاد Wireframeها: وایرفریم راهنمای بصری است که نشان دهنده‌ی ساختار صفحه (سلسله مراتب و عناصر کلیدی) است. این کار به عنوان ستون فقرات محصول عمل می‌کند و طراحان اغلب از آن‌ها به عنوان اسکلت برای مدل سازی استفاده می‌کنند. ایجاد نمونه‌های اولیه: همان طور که گفتیم وایرفریم‌ها بیش‌تر مربوط به ساختار و سلسله مراتب بصری هستند و نمونه‌های اولیه نتیجه‌ای از تجربه‌ی متقابل حس و نمایش بصری (Feel and Look) به صورت همزمان هستند. نمونه‌ی اولیه در واقع شبیه سازی محصول است و معمولا با استفاده از وایرفریم‌های قابل کلیک (Clickable Wireframe) پیاده سازی می‌شود. ایجاد مشخصات طراحی: مشخصات طراحی معمولا شامل نمودار جریان کاربری (User Flow Diagram) و نمودار جریان کار (Task Flow Diagram) است که ویژگی‌های عملکردی و الزامات سبک محصول را مشخص می‌کند. مشخصات طراحی، فرایندها و ابزارهای مورد نیاز گرافیکی را برای ایجاد یک محصول قابل اجرای موفق توصیف می‌کند. ۵. اعتبار سنجی (تست) مرحله‌ی اعتبارسنجی معمولا زمانی شروع می‌شود که طراحی با جزییات و وضوح بالایی انجام شده باشد و محصول توسط سهامداران و کاربران نهایی طی مجموعه ای از جلسات آزمون کاربر تایید شده باشد. همانند مرحله‌ی تحقیق محصول، این مرحله نیز بین پروژه‌های مختلف متغیر است. مرحله‌ی اعتبار سنجی می‌تواند شامل موارد زیر باشد: اصطلاح «Eat your own dogfood»: این اصطلاح زمانی به کار می‌رود که تیم طراحی کار را تا زمان رسیدن به یک محصول قابل استفاده تکرار کند و آن کمپانی محصولش را آماده اعلام کند. آزمایش محصول با تیم یک روش خوب کم هزینه برای اعتبارسنجی به حساب می‌رود. جلسات تست کاربر: جلسات تست کاربر، به عنوان اعتبار طراحی، مانند انجام آزمایش با کاربران واقعی عمل می‌کند. جلسات آزمون کاربر روش‌های زیادی دارد. برخی از محبوب‌ترین این تست‌ها شامل تست‌های قابلیت استفاده، گروه‌های تمرکز (Focus Groups)، آزمایش بتا، تست A / B و نظرسنجی‌ها است. ایجاد خاطرات کاربری: خاطرات کاربری در جمع‌ آوری اطلاعات از دنیای واقعی کاربران بسیار مفید هستند. با استفاده از Google Docs، طراحان UX می‌توانند یک قالب ساده ایجاد کرده و پس از آن سوالات پایان بازی ( Open-ended) مانند موارد زیر بپرسند: هنگام استفاده از محصول کجا بودید؟ چه کارهابی انتظار داشتید که انجام دهید؟ آیا موردی باعث ناراحتی شما شده است؟ آنالیز معیار‌ها: تجزیه و تحلیل اعداد ارائه شده توسط یک ابزار تحلیلی در مورد چگونگی تعامل کاربر با محصول شما است از جمله کلیک‌ها، زمان ناوبری (Navigation)، نمایش‌ها، جستجو و غیره. همچنین آنالیز این معیارها می‌تواند رفتار غیر منتظره‌ای را کشف کند که در آزمون کاربر به صورت صریح یافت نشده است. کار بر روی بازخوردهای دریافت شده از کاربران: اطلاعات بازخوردی از قبیل اطلاعات سیستمSupport Ticket، گزارش‌ باگ‌ها و دیگر تحلیل‌ها می‌توانند به رفع مشکلات محصول کمک شایانی کنند. چگونه فرایند طراحی UX را بهبود بخشیم؟ تا این جا متوجه شدیم که چگونه هر مرحله به یکدیگر متصل است. حال برخی نکات مفید برای بهبود فرایند طراحی UX را ذکر می‌کنیم: همپوشانی بین فازها و تکرارها (Iterations) را در نظر بگیرید. مهم است که بدانیم طراحی UX یک فرایند خطی نیست. فازهای فرایند UX اغلب دارای همپوشانی قابل ملاحظه‌ای هستند. چنانچه که طراح UX اطلاعات بیش‌تری درباره‌ی مشکل حل شده، کاربران و جزییات پروژه (به ویژه محدودیت‌ها) کسب کند، ممکن است لازم باشد بعضی از تحقیقات انجام شده را بازنگری کرده یا آزمایش‌های جدیدی را طراحی کند. اهمیت ارتباطات ارتباطات مهارت کلیدی طراحی UX است. همان طور که طراحی فوق العاده به خودی خود یک مسئله‌ی بزرگ است، وجود مهارت ارتباطات قوی نیز به همان اندازه مهم است، زیرا حتی بهترین ایده‌ها و راهکارها در صورتی که مورد قبول تیم یا سهامداران نباشند شکست خواهند خورد. به همین دلیل بهترین طراحان UX دارای مهارت ارتباطات عالی هستند. فرایند‌های متناسب با پروژه‌ها طراحان UX باید با هر پروژه انعطاف پذیر باشند و فرایند مورد استفاده‌ی کسب و کار و عملکردی باید متناسب با نیازهای خاص پروژه باشد. این فرایند باید به توانایی‌های کسب و کار متکی بوده و مشتریان به طور کلی در آن موثر باشند. نتیجه‌گیری وقتی که وارد فرایند طراحی UX می‌شویم، همه‌ی راه حل‌های یافت شده الزاما مناسب پروژه نیستند. ساده یا پیچیده بودن پروژه فرقی در هدف فرایند طراحی که ایجاد یک محصول عالی برای کاربران است، ندارد. بنابراین عاقلانه است که از بهترین گزینه برای پروژه‌ی خود بهره ببریم و بقیه‌ی موارد را نادیده بگیریم تا بدین ترتیب فرایند طراحی خود را تا رسیدن به یک محصول موفق تکامل بخشیم.
  5. الهه انصاری

    اصول طراحی: تعادل

    «بخش دوم» در پست ۷ گام برای تبدیل شدن به یک طراح موفق UI/UX به طور خلاصه به اصول طراحی رابطه‌ی کاربری اشاره کردیم. در این بخش قصد داریم در مورد اصل تعادل (Balance) صحبت کنیم. هر طرح با یک صفحه‌ی خالی یا فضای خالی آغاز میشود. هنگامی که یک عنصر اضافه میکنیم، قرار دادن آن میتواند تعیین کند که طراحی تا چه حد موفق خواهد بود. طراحی موثر ارتباطات و علاقه‌ی بیننده را بنا میکند؛ خواه این طراحی به صورت چاپ شده و یا به صورت صفحات وب باشد. در یک طرح وب معمولی، طراح باید لوگو، متن، عکس یا تصویر را جایگزین کند. با یک تلاش آگاهانه برای ایجاد ارتباط بین این عناصر می‌توان یک طراحی چشم نواز به وجود آورد. تعادل در طراحی بسیار شبیه به تعادل در زندگی است. نمونه ای که اغلب از تعادل در دنیای واقعی یاد می‌شود، الاکنگ است. وقتی فقط یک نفر روی آن نشسته است، تجربه‌ی بسیار سرگرم کننده‌ای نیست. تعادل زمانی حاصل میشود که دو نفر از افراد با وزن مشابه در هر طرف قرار گیرند. نمونه‌ای دیگر از تعادل را هنگامی می‌توان به دست آورد که یکی از افراد سنگین در یک طرف و دو نفر سبکتر در طرف دیگر نشسته اند. اگر یک فرد سنگینتر به مرکز الاکلنگ نزدیکتر شود تعادل میتواند حاصل شود، در حالی که یک فرد سبکتر در انتهای طرف دیگر نشسته است. ما به عنوان انسان از لحاظ جسمی یک دست و پای در هر طرف ستون فقرات و سر داریم و قادر به ایستادن و حرکت با وجود اندازه و وزنهای مختلف هستیم. در طراحی سعی میکنیم به توازنی میان عناصر دست یابیم، زیرا در چشم نواز است. اما تعادل همیشه از طریق تقارن بدست نمیآید. نگاهی به جعبههای زیر کنید. خط سفید در جعبه‌ی 1 و 2 به طور متقارن متعادل است در حالی که در جعبه‌ی 3 و 4 خط به طور نامتقارن متعادل است. تقارن تعادلِ متقارن تعادلِ تصویر آینه است. اگر یک خط را از طریق مرکز صفحه بکشید، عناصر در یک طرف خط در سمت دیگر نیز به صورت آینه دیده میشوند. ما میتوانیم آن را با قرار دادن عناصر به طور نسبتا مساوی در طراحی دست یابیم. تقارن در طبیعت یک مثال معمول که در وب اتفاق میافتد، جایی است که بلوک های متن در سطر یا ستون به صورت آینه نگاشته می‌شوند. همچنین میتواند با استفاده از رنگ و تایپوگرافی به دست آید. برای مثال در وب سایت Mobile Web Book تصویر تلفن همراه این صفحه به دو بخش تقسیم می‌شود که با بلوکهای متن در هر طرف به صورت متعادل در مقابل هم قرار گرفته اند. در پوستر فیلم «The Day I Became A Woman»، بلوک متن سفید بزرگ در گوشه‌ی سمت راست بالا در گوشه‌ی پایین سمت چپ هم از لحاظ رنگ و هم از نظر شکل متقارن هستند. سایت پر طرفدار Florida Flourish تقریبا میتواند به نصف مرکز برسد که یک حس بسیار قوی از تعادلِ متقارن دارد. پوستر Havco که در زیر آورده شده است، قسمت چپ و راست پوستر با استفاده از اشکال مشابه و قطعات بدن متعادل است . متن قرمز در بالا و پایین عنوان در رنگ و اندازه‌ی متعادل قرار دارد. عدم تقارن طرح بندیهای متعادلِ نامتقارن دارای عناصری هستند که در یک خط مرکزی به صورت آینه‌ای جدا نمی‌شوند. این طرح بندی‌ها میتوانند طراحی را دشوارتر کنند، اما سبب جذابیت برای بیننده می‌شوند. میتوانیم با ایجاد چندین آیتم کوچک در یک طرف و یک آیتم بزرگ در طرف دیگر یک طرح متضاد نامتقارن ایجاد کنیم. اگر یک آیتم تیره در یک طرف دارید، میتوانید چندین آیتم روشن رنگی را در طرف دیگر قرار دهید. یک طراحی متعادلِ نامتقارن میتواند تنش ایجاد کند و بیننده را جذب کند. وب سایت MattWeb یک گرافیک بزرگ دارد که سمت چپ صفحه‌ی اصلی را پر کرده است. حس توازن نامتقارن در اینجا با استفاده از رنگهای تطبیق و یک فونت بدون سرصفحه مطابق با مارپیچ‌ها به دست می‌آید. سایت Dann Whitaker دارای چندین عنصر است که به صورت متقارن نیستند، اما از نظر رنگ، بافت و محتوا یکدیگر را متعادل میکنند. عدم تعادل (Off-Balance) خوب، پس اگر تمام کارهای طراحی شما در تعادل باشند، خسته کننده میشود. اگر قوانین را میدانید، میتوانید آن‌ها را قطع کنید، و عدم تعادل میتواند جنبش و حرکت را به بیننده منتقل کند. البته این مسئله میتواند بیننده را به کمی ناراحت و آشفته کند. طراحی غیر متعادل میتواند مخاطب را به فکر کردن وادار کند. فقط اجازه ندهید که به طور تصادفی این اتفاق بیفتد. در مقاله‌ی آینده نگاهی به اصل مجاورت (Proximity) میکنیم. در عین حال توصیه می‌شود که در وب سایت‌های مختلف تعادل قوی، تقارن و عدم تقارن را بررسی کنید.
  6. زمان همیشه به عنوان یک فاکتور اساسی و حساس در پروژه‌ها به حساب می‌آید. در این مقاله قصد داریم ببینیم که چگونه می‌توانیم 90 درصد از وقت خود را طی جریان پروژه صرفه جویی کنیم. یکی از ابزارهایی که برای این منظور وجود دارد، Figma است. با استفاده از این ابزار در طول فرآیند طراحی UI/UX می‌توانیم چندین ساعت در کارمان صرفه‌جویی داشته باشیم و جریان طراحی را عمیقا متحول کنیم. Figma علاوه بر بصری بودن، یک پکیج کامل است که قابلیت کار بر روی تمامی مراحل فرآیند طراحی را برای ما فراهم می‌سازد: رسم وایرفریم‌ها، طراحی، طراحی سیستم‌ها، نمونه‌سازی و طراحی مشارکتی. هدف از این مقاله آموزش نحوه‌ی استفاده از Figma نیست؛ بلکه می‌خواهیم به شما نشان دهیم که چگونه می‌توانید چندین ساعت زمان را در پروژه‌ی بعدی خود با یک ترفند ساده ذخیره کنید. این امر به خاطر وجود ویژگی‌ای از Figma به نام اجزا یا مولفه‌ها (Components) تحقق می پذیرد. components in Figma اجزا در Figma شباهت زیادی به نمادها (Symbols) در Sketch دارد. اما اجزای موجود در ابزار Figma بسیار انعطاف پذیر و استفاده از آن‌ها آسان‌تر است. اگر در مورد اجزا اطلاعات زیادی ندارید، توصیه می‌کنم این مقاله را با دقت مطالعه کنید. Figma‌ چگونه به ما در صرفه‌جویی زمان کمک می‌کند؟ حال ببینیم فرآیند طراحی سنتی در مقایسه با فرآیند طراحی در Figma چگونه به نظر می‌رسد. فرآیند فرآیند سنتی یا کلاسیک ساده‌ترین فرآیند کلاسیک، ساخت یک وایرفریم در برنامه‌ای مانند Balsamiq است. سپس می‌توان طرح را در یک برنامه‌ی دیگری مانند Sketch ساخت و در برنامه‌ای چون InVision نمونه‌‌ی اولیه را ایجاد کرد. این روند یک روند تعاملی نیست، زیرا علاوه‌ بر اتلاف وقت زیاد، باعث به وجود آمدن شکاف بزرگی بین وایرفریم و نمونه‌سازی می‌شود. فرآیند طراحی در Figma با استفاده از Figma، شما از 2 مرحله پرش کرده، وایرفریم‌های تعاملی خود را رسم و هم زمان یک کتابخانه‌ی رابط کاربری ایجاد می‌کنید. سپس اجزا رIبط کاربری را به‌روز می‌کنید که قبلا وقت ارزشمندتان را برای ایجاد یک نمونه اولیه هدر می‌کردید! در واقع شما وایرفریم‌های خود را با استفاده از اجزا از ابتدا می‌سازید. پس از تایید وایرفریم‌ها، تنها چیزی که نیاز دارید به‌روز کردن اجزا است. این کار اشکال سفید و سیاه پایه‌ای شما را به اجزای طراحی شده‌ی دقیق تبدیل می‌کند. به بیان دیگر وایرفریم‌های شما به یک نمونه‌ی اولیه با وضوح و جزییات بیشتر تبدیل می‌شوند. چگونه کار می‌کند؟ این کار در ۴ مرحله انجام می‌شود که در زیر آورده شده است. مرحله‌ی۱. وایرفریم‌های خود را بسازید. قبل از این مرحله، شما باید طرح خود را روی کاغذ کشیده باشید. حال زمان آن فرا رسیده که آن‌ها را ب‌‌‌ م‌های دیجیتال منتقل کنید. پیش از شروع طراحی، اولین کاری که باید انجام دهید ایجاد یک قالب کتابخانه‌ی رابط کاربری (UI library frame) است. تمام اجزای رابط کاربری قابل استفاده‌ی مجدد و دستورالعمل های شما در این قالب قرار می‌گیرند. اولین مولفه‌هایی (Components) که باید ایجاد کنید سبکهای متن شماست. برای هر سبک (H1، H2، H3، H4، P، کوچک، و غیره) یک جز ایجاد کنید. از فونت‌ها همان گونه که هستند استفاده کنید و فعلا در مورد طراحی فکر نکنید. هر سبک متن یک جز است حال، هر زمان که می‌خواهید متنی را به صفحه اضافه کنید، یک نمونه از مولفه‌ی متن در کتابخانه‌ی رابط کاربری را می‌گیرید. چرا؟ هنگامی که شما به مرحله‌ی طراحی ‌‌‌‌‌می‌روید و می‌خواهید سبک فونت را برای تمامی صفحه‌های خود تغییر دهید، آن را یک بار از همین جا تغییر می‌دهید و در همه جا به‌روز می‌شود. کمی بعد کاملا متوجه خواهید شد. این مفهوم به تمامی مولفه‌های دیگر شما قابل تعمیم است. یک نمونه کتابخانه‌ی رابط کاربری تمامی اشیا (Objects) از جمله Buttons، Inputs، Dropdowns، Navbars، Cards، Labels، Footers را هم دقیقا مانند اجزا ایجاد کنید. همچنین می‌توانید ابتدا شی را روی صفحه‌ی نمایش ایجاد کنید سپس آن را به کتابخانه‌ی خود بکشید و به یک جز تبدیل کنید و سپس دوباره در صفحه کپی کنید. نمونه‌ای از وایرفریم‌ها در پایان پروژه، تقریبا هر شی‌ای که در طرح‌ها‌ ایجاد می‌کنید، باید یک جز باشد. این کار نه تنها در صرفه‌جویی زمان به شما کمک می‌کند، بلکه هماهنگی را در محصول شما حفظ می‌کند که یک نکته‌ی کلیدی مهم در طراحی رابط کاربری و تجربه‌ی کاربری است. مرحله‌ی۲. وایرفریم‌های خود را تعاملی کنید. پس از رسم وایرفریم‌ها و ایجاد کتابخانه، زمان تعاملی کردن وایرفریم‌ها رسیده است. خوشبختانه، وجود Figma انجام این کار را بسیار ساده کرده است. تمام چیزی که نیاز دارید کشیدن هر شی به صفحه مرتبط با خود در حالت نمونه‌ی اولیه است. همان طور که در زیر می‌بینید، اتصال مولفه‌های اصلی همان لینک را به تمام نمونه های آن اعمال می‌کند. تعاملی ساختن وایرفریم‌ها گام بعدی این است که وایرفریم‌های تعاملی خود را با ذینفعان به اشتراک بگذارید و نظرات خود را با اضافه کردن در نمونه‌ی اولیه به طور مستقیم دریافت کنید. پس از چندین دوره‌ی تکرار، وایرفریم‌های شما باید تایید شوند. مرحله‌ی 3. سبک سیستم طراحی خود مشخص کنید. هنگامی که وایرفریم‌های تعاملی شما تایید شدند، اکنون می‌توانید سبک سیستم طراحی خود را تعیین کنید. در این مرحله، شما دستورالعمل طراحی برند، رنگ و جزییات طراحی را به اجزای ساخته شده در کتابخانه اضافه می‌کنید. این مرحله به طور کامل وایرفریم‌های شما را به یک نمونه‌ی اولیه‌ی طراحی با وضوح و جزییات بالا تبدیل می‌کند. تغییر سبک در یک جز در همه‌ی نمونه های آن اعمال میشود بهتر است ابتدا راهنمای سبک را به ذینفعان نشان دهیم تا بازخوردی در مورد حالت و سبک طراحی قبل از نمایش همه‌ی صفحات به دست آوریم. اضافه کردن تعدادی مولفه در حضور آن‌ها می‌تواند به درکشان از چگونگی طراحی هر مولفه کمک کند. یک کتابخانه‌ی رابط کاربری پایه‌ای مرحله‌ی 4. نمونه‌ی اولیه‌ی خود را نهایی کنید. هنگامی که راهنمای سبک تایید شد، تنها چیزی که باقی می‌ماند، بهتر کردن نمونه‌ی اولیه است. در این مرحله می‌توانید مطمئن شوید که همه چیز در جای خود قرار دارد. ممکن است اشیایی وجود داشته باشند که اجزایی نیستند که باید طراحی شوند یا اجزا مورد نیاز باشند. حتما نمونه‌ی اولیه را اجرا کرده و لینک‌ها را امتحان کنید تا مطمئن شوید که تمامی پیوندها به درستی کار می‌کنند. نمونه‌ی اولیه نمونه‌ی اولیه آماده است! اکنون می‌توانید یک لینک را با سهام‌دار برای گرفتن تایید نهایی به اشتراک بگذارید. سپس، این نمونه‌ی اولیه را به توسعه‌دهندگان ارسال کنید و به آن‌ها نشان دهید که چگونه می‌توانند تصاویر را در Figma بررسی و استخراج کنند. همچنین توسعه‌دهندگان می‌توانند هر گونه سوال مستقیمی که از نمونه‌ی اولیه دارند بپرسند. اضافه کردن نظر در نمونه‌‌ی اولیه شما همچنین می‌توانید یک لینک عمومی برای تست نمونه‌ی اولیه‌ی خود با دیگر کاربران به اشتراک بگذارید و یک بازخورد کلی به دست آورید. امیدوارم به کمک این ابزار بتوانید با سرعت بیشتری فرآیند طراحی را خود را پیش ببرید.
  7. این تاپیک مخصوص نمونه مثال‌هایی از پروژه‌ها، ماژول‌ها، کامپوننت‌ها و افزونه‌هایی می‌باشد که به صورت استاندارد و مدرن توسط سی‌پلاس‌پلاس و جاوا‌اسکریپت تحت فناوری Qt Quick طراحی می‌شوند. بدون هیچگونه تعارفی باید بگوییم هر نرم‌افزار (اپلیکیشن) و یا محصولی که ساخته می‌شود باید مطابق استاندارد‌هایی که مهندسین طراحی بر روی آن تاکید دارند توسعه یابد. این استاندارد‌ها ممکن است شامل اصول کُدنویسی، الگو‌های کد‌نویسی و یا قوانین روانشناسی رنگ‌ها، چیدمان اشیاء و هر موردی که می‌تواند در نتیجه‌ی آن تاثیر مثبت داشته باشد مهم هستند. با هدف اینکه می‌خواهیم نمونه مثال‌هایی را برای تازه واردین قرار دهیم تا بتوانند به درستی ونحوه‌ی صحیح طراحی و پیاده سازی دو بخش بک‌اِند و فرانت‌اِند آشنا شوند، نمونه مثال‌های شما باید دارای شرایط زیر باشند ساختار استاندارد کلاس‌ها و توابع در سمت سی‌پلاس‌پلاس استفاده از اشاره گر‌های هوشمند و یا رعایت اصول مدیریت حافظه استفاده از ماکرو‌های سفارشی iOS، Android، Windows، macOS و لینوکس جهت مدیریت بهتر بعضی از ویژگی‌های منحصربفرد سیستم‌عامل‌ها تا جایی که می‌توانید سعی کنید از ابزار‌های qmake و qbs در این نمونه مثال‌ها استفاده کنید رعایت رنگ‌بندی و همچنین اصول UX درست مهم است مثال شما باید برگرفته و بر اساس استاندارد‌های توصیه شده‌ی doc.qt.io باشد. استفاده‌ی بهینه از لنگر‌ها و همچنین ترازبندی صحیح لایه‌ها و نگه‌دارنده‌ها در سمت QML استفاده از تصاویر و یا قالب‌های استاندارد و سبک مانند SVG, PNG و base64 استفاده از فونت آیکونیک‌ها مانند (FontAwesome) این پست ممکن است ویرایش و یا به روز‌رسانی شود. در ادامه شما می‌توانید بر اساس شرایطی که ذکر شده است و با توجه به استاندارد‌های Google Material، Microsoft Fluent و همچنین Apple Human Interface نمونه مثال‌های خود را ارائه دهید که برخی از مثال‌های استاندارد در زیر آمده اند.
×
×
  • جدید...