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

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

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



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

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

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

نوع محتوا


وبلاگ‌ها

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

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

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

  • انجمن‌های آی او استریم
    • اخبار و اعلامیه‌های سایت
    • اسناد و قوانین مرجع
    • رویداد‌ها و جلسات
    • معرفی محصولات نوشته شده‌ بومی
    • مرکز نظرسنجی جامعه‌ی برنامه‌نویسان
    • مقالات و اسناد مشاوره‌ای
    • مرکز چالش برانگیز برنامه‌نویسان
    • رمز‌های موفقیت
    • ابزار‌ها و نرم‌افزارهای کاربردی برنامه‌نویسان حرفه‌ای
  • استارتاپی و کسب‌و‌کار
    • استارتاپ‌ها
    • سرمایه گذاری
    • شتاب دهنده‌ها
    • پارک‌های علم و فناوری و مراکز رشد
    • مصاحبه با استارت‌آپ‌ها
    • قوانین حقوقی
    • داستان‌های موفقیت
    • کارآفرینان و متخصصین
    • مشاوره اجرای کسب‌وکار
    • اخبار حوزه‌ی استارتا‌پی
    • آگهی‌های استخدامی
  • زبان‌های برنامه نویسی
    • برنامه نویسی در C و ‏++C
    • برنامه نویسی با Java
    • برنامه نویسی با JavaScript
    • برنامه نویسی با Go
    • برنامه نویسی با Python
    • برنامه نویسی با Delphi
    • برنامه نویسی با Ruby
    • برنامه نویسی با VB6
  • طراحی و توسعه وب
    • برنامه نویسی در PHP
    • برنامه نویسی با Node.JS
  • طراحی و توسعه وب اپلیکیشن‌ها
    • طراحی و توسعه در Angular
    • طراحی و توسعه در React.JS
    • طراحی و توسعه در Vue.JS
  • طراحی و توسعه موبایل و اِمبِد‌ها و تلوزیون‌ها
    • برنامه نویسی تحت محصولات اپل
    • برنامه نویسی تحت محصولات گوگل
    • طراحی و توسعه تحت محصولات دیگر
  • برنامه‌نویسی سطح پایین و سیستم عامل‌ها
    • سیستم عامل‌های آزاد
    • سیستم عامل‌های تجاری
    • مباحث آموزشی مرتبط با سیستم‌عامل
  • بانک‌های اطلاعاتی
    • پایگاه داده MySQL
    • پایگاه داده PostgreSQL
    • پایگاه داده SQLite
    • پایگاه داده MongoDB
    • پایگاه داده SQL Server
    • دیگر پایگاه‌های داده
  • برنامه نویسی تحت محصولات اپل
    • محیط توسعه Xcode
    • برنامه نویسی با Objective-C
    • برنامه نویسی با Swift
  • برنامه نویسی تحت محصولات مایکروسافت
    • محیط توسعه Visual Studio
    • برنامه نویسی در ASP.NET MVC
    • برنامه نویسی با #C
    • برنامه نویسی با Visual Basic.Net
    • طراحی و توسعه تحت Wpf
    • طراحی و توسعه تحت Universal و Fluent
  • طراحی و توسعه تجربه کاربری (UX) و رابط کاربری (UI)
    • طراحی رابط کاربری (UI)
    • طراحی تجربه کاربری (UX)
  • درخواست انجام پروژه (ویژه)
    • پروژه‌های منبع‌باز
  • سوالات و مباحث عامیانه
    • سوالات دانشجویی
    • فناوری و سخت افزار
    • سوالات مشاوره‌ای و تخصصی مرتبط با حوزه‌ی برنامه‌نویسی
  • سطل آشغال
    • سطل آشغال

Product Groups

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

دسته ها

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

دسته ها

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

دسته ها

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

جستجو در ...

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


تاریخ ایجاد

  • شروع

    پایان


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

  • شروع

    پایان


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

تاریخ عضویت

  • شروع

    پایان


گروه


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


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


شهر

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

  1. سلام و خسته نباشید. من یه رشته ای رو برای اطلاع به کاربر در برنامه میخواستم نمایش بدم. این رشته باید پشت سرهم و با اختلاف 1 ثانیه ای نمایش داده بشه. بعد این نمایش میخواستم تایمر متوقف شه . با کلاس تایمر تونستم با اتصال سیگنال timeout به اسلاتی از برنامه این کار رو انجام بدم اما اسلات بعد زمان تعیین شده مرتبا تکرار میشد. طبق مثال زیر عمل کردم. لطفا راهنمایی کنید ممنون. #include <QTimer> class ShowString: public QObject { Q_OBJECT private: QTimer *timer; public: public slots: void show(); }; #include "showstring.h" ShowString::ShowString() { timer = new QTimer(this); connect(timer,SIGNAL(timeout()),this,SLOT(show())); timer->start(1000); } void ShowString::show() { //my 3 line strings }
  2. الهه انصاری

    اصول طراحی: رنگ

    از سری مقالات اصول طراحی رابط کاربری با موضوع مهم و کلیدی رنگ در خدمت شما هستیم. در این مقاله، نگاهی به نحوه‌ی استفاده از طرح‌های رنگی در ایجاد بازخورد مطلوب برای طراحی شما خواهیم داشت. رنگ بخش جدایی ناپذیر از زندگی ما است. طبیعت از رنگ برای هشدار دادن به شکارچیان بالقوه، جذب گرده افشان‌ها، جذب همسران و نشان دادن میوه‌ی آماده برای خوردن استفاده می‌کند. هر کسی که ماشینی را در یک شهر رانندگی می‌کند، قوانین ترافیکی را که توسط قرمز، سبز و نارنجی تعریف شده است دنبال می‌کند. همین رنگ ها کافی هستند و نیازی به نوشته‌ی متنی نیست. در تبلیغات و طراحی، رنگ برای جلب توجه و تحریک علاقه استفاده می‌شود که گرفتن همین نتیجه از طریق روش‌های دیگر سخت‌تر است. طی تاریخ نیز از رنگ برای نشان دادن موقعیت اجتماعی و اقتصادی استفاده شده است. به عنوان مثال، اشراف و افراد سلطنتی بیشتر از رنگ بنفش بهره می‌بردند. رنگ در بسیاری از کشورها یک منبع مهم نمادگرایی است. همان طور که در شکل بالا می‌بینیم یک حالت غیر طبیعی از تصویر حس می‌شود که بخاطر استفاده‌ی رنگ غیر معمول در علامت ایست است. پس چگونه از رنگ‌ها در طراحی خود بهترین استفاده را ببریم؟ هیچ قاعده‌ی سفت و سختی وجود ندارد اما چرخ رنگ نقطه‌ی مناسبی برای شروع یادگیری نحو‌ه‌ی استفاده‌ی صحیح از رنگ‌ها است. طیف رنگ‌های گرم و سرد سه رنگ اصلی اولیه قرمز، آبی و زرد هستند. هنگامی که شما این‌ها را ترکیب می‌کنید، سه رنگ ثانویه حاصل می‌شوند: نارنجی، بنفش و سبز. اگر هر رنگ ثانویه را با رنگ اصلی همسایه‌ی خود ترکیب کنید، سومین دسته از رنگ‌ها را ایجاد می‌کنید: (زرد، نارنجی)، (زرد، سبز)، (آبی، سبز)، (بنفش، آبی)، (قرمز، بنفش)، (قرمز، نارنجی). چرخ رنگ بدین روش بدست می‌آید. تصویر بالا نشان می‌دهد که رنگ‌ها به ترتیب طیف مرتب شده‌اند: قرمز، نارنجی، زرد، سبز، آبی و بنفش (در خلاف جهت عقربه‌های ساعت). قرمز گرمترین و آبی سردترین رنگ در این چرخ است. رنگ‌ های گرم در قسمت طیف‌های قرمز، نارنجی و زرد ظاهر می‌شوند و رنگ‌های سرد در طرف مقابل چرخ رنگ ظاهر می‌شوند. طرح‌های رنگی تک رنگ (monochromatic) طرح رنگی تک رنگ از تغییرات در نور و اشباع یک رنگ استفاده می‌کند. این طرح رنگ علاوه‌ بر تمیز و ظریف بودن یک اثر آرامش بخشی ایجاد می‌کند. رنگ اولیه می‌تواند با رنگ‌های خنثی مانند سیاه، سفید یا خاکستری یکپارچه شود. ناکامی در طرح‌های تک رنگ این است که گاهی اوقات می‌تواند تضاد داشته باشد و به نظر می‌رسد جنب و جوش کمتری از سایر طرح‌های رنگ داشته باشد. طرح تک رنگ با پایه‌ی آبی طرح تک رنگ با پایه‌ی قرمز طرح‌های رنگی مشابه (Analogous Color Schemes) طرح رنگی مشابه با رنگ‌هایی که در چرخ رنگی مجاور هستند، استفاده می‌شود. یک رنگ به عنوان رنگ غالب تنظیم شده است و رنگ دیگر وظیفه‌ی غنی سازی را دارد. ضعف این مورد مانند طرح قبل این است که گاهی اوقات ممکن است حالت عدم تضاد به وجود بیاید. طرح رنگی مشابه با پایه‌ی آبی طرح رنگی مکمل (Complimentary Color Scheme) طرح رنگ مکمل یا متقارن از دو رنگ ساخته شده است که در چرخ رنگ مقابل یکدیگر قرار دارند. این طرح جهت ایجاد تضاد قوی و برای جلب توجه بسیار موفق است. طرح رنگی مکمل با پایه‌ی سبز روشن طرح مکمل تقسیم شده (Split Complementary Scheme) طرح مکمل تقسیم نوعی از طرح مکمل استاندارد است. این طرح از اجتماع یک رنگ بر روی چرخ و دو رنگ مجاور آن تشکیل می‌شود. مزیت این طرح بیش از یک طرح مجرب این است که میتواند کمی پیچیدهتر باشد در حالی که هنوز هم یک تضاد تصویری قوی وجود دارد. در تصاویر زیر نمونه‌ای از این مورد می‌بینیم. طرح‌های رنگ سه‌گانه این طرح از سه رنگ به طور یکنواخت در اطراف چرخ رنگ استفاده می‌کند. این روش برای ایجاد تعادل، غنی سازی و تضاد بسیار مناسب است؛ اگرچه تضاد در این طرح به اندازه‌ی طرح مکمل مشهود نیست. طرح سه‌گانه‌ با پایه‌ی آبی نکاتی برای استفاده از این طرح‌های رنگی یک رنگ را انتخاب کنید که بیشتر از رنگ‌های دیگر استفاده می‌شود. اگر سعی می‌کنید از مقادیر برابر هر رنگ استفاده کنید، یک محصول وحشتناک دریافت خواهید کرد. ابتدا در مورد رنگ اصلی یا پایه‌ی خود تصمیم بگیرید و سپس از رنگ‌های دیگر برای جذب علاقه استفاده کنید. سایت The Pond با استفاده از یک خاکستری با پایه‌ی آبی تیره با متن خردلی طراحی شده است که بسیار دلنشین است. اگر رنگ‌ها خیلی قاطی هم شده باشند، میزان استفاده‌ی خود را از رنگ‌ها کاهش دهید. برای ایجاد طرح‌های رنگی چندین ابزار آنلاین وجود دارد، Kuler یکی از ابزار‌های پر طرفدار است. این ابزار امکان بازی با چرخ رنگی را به شما می‌دهد و می‌توانید طرح‌های رنگی مورد نظر خود را با یک کلیک انتخاب کنید. انواع تناژهای مختلف رنگ سیاه و خاکستری می‌توانند در تمام طرح‌های رنگی مذکور استفاده شوند. این رنگ‌ها در واقع به عنوان رنگ‌های خنثی استفاده می‌شوند که با هر رنگ دیگری سازگاری دارند. تمام رنگ‌ها تحت تاثیر رنگ‌های قرار گرفته در اطراف آن‌ها هستند. نماد زیر همان سایه‌‌ی قرمز در سمت چپ و راست است، اما رنگ پس زمینه تغییر چشمگیری می‌دهد. طرح رنگی در سمت چپ چشم را اذیت می‌کند، در حالی که در تصویر سمت راست، رنگ‌ها به خوبی با یکدیگر همخوانی دارند و احساس بیننده را برانگیخته می‌کنند. الهام از طبیعت اگر شما به دنبال الهام و راهنمایی برای انتخاب رنگ هستید، کامپیوتر را خاموش کنید و به خارج از منزل بروید. طبیعت بهترین ترکیب رنگ را برای شما فراهم می‌کند. به حیوانات، گیاهان، پرندگان نگاه کنید و از طرح‌ها و رنگ‌های شگفت انگیز الهام و ایده بگیرید. از آن‌ها عکس گرفته و آن‌ها را در یک فایل ذخیره کنید. مواردی که هنگام استفاده از رنگ در طرحهای خود مد نظر می‌گیریم به قرار زیر است: آیا رنگ‌ها در طراحی شما به خوبی با هم هماهنگ هستند و یا زیبایی چندانی در کنار هم ندارند؟ آیا خواندن متن در پس زمینه دشوار است؟ آیا طراحی شما برای آنچه که میخواهید انتقال دهید بیش از حد سرد و یا بیش از حد گرم است؟ شما می‌توانید طرح‌های بیش از حد گرم را با نکات کوچک رنگ‌های سرد (و بالعکس) را خنک کنید. آیا طراحی شما فقط شامل رنگ‌های سیاه و سفید است؟ اگر اینطور است افزودن کمی رنگ واقعا می‌تواند طرح شما را به پتانسیل کامل خودش برساند. اگر شما برای وب یا برنامه‌های خود طراحی انجام می‌دهید، آیا در مورد اثر رنگ‌ها بر روی میزان قابلیت استفاده محصول تحقیق کرده‌اید؟ تئوری رنگ‌ها شامل حوزه‌ی بسیار بزرگی است که در این مقاله سعی کردیم به طور مختصر و مفید اطلاعاتی را در این مورد خدمت شما عرض کنیم. جهت تمرین و آشنایی کامل با انواع طرح‌های رنگی مشاهده‌ی این چرخ توصیه می‌شود. با تشکر از همراهی شما دوستان.
  3. زمان همیشه به عنوان یک فاکتور اساسی و حساس در پروژه‌ها به حساب می‌آید. در این مقاله قصد داریم ببینیم که چگونه می‌توانیم 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 بررسی و استخراج کنند. همچنین توسعه‌دهندگان می‌توانند هر گونه سوال مستقیمی که از نمونه‌ی اولیه دارند بپرسند. اضافه کردن نظر در نمونه‌‌ی اولیه شما همچنین می‌توانید یک لینک عمومی برای تست نمونه‌ی اولیه‌ی خود با دیگر کاربران به اشتراک بگذارید و یک بازخورد کلی به دست آورید. امیدوارم به کمک این ابزار بتوانید با سرعت بیشتری فرآیند طراحی را خود را پیش ببرید.
  4. یه سوال داشتم که خیلی وقت هست درگیرش هستم. من خودم به صورت عادی از win32 در ++C استفاده میکنم و برای ساختن حتی یه button کلی زور میزنم و کد مینویسم برای رویداد ها و لوکیشن و ... حالا بماند که برای تنظیم یک رنگ برای یک button یا text چقدرر دردسر دارم. من قبلا با زبان #C کار میکردم و با رابط گرافیکی و طراحی رابط گرافیکی اون به خوبی آشنا هستم . البته میدونم که امنیت برنامه های .net کلا ضعیف هست اما از لحاظ گرافیکی به راحتی میشه هر نوعی که بخوایم در کمترین زمان طراحی کنیم. البته اگر بخوایم باز کد ها و دستورات رو با .net بنویسیم چیز جالبی نمیشه. البته نا گفته نماند که به Qt ام برای طراحی فکر کردم اما چند تا مشکل دارد . اولی اینکه حجم برنامه رو به شدت میبره بالا . دوم تعداد فایل های برنامه رو میبره بالا . سوم من در کل IDE برنامه نویسیم در Visual studio هست و به اون بیشتر عادت دارم چون خیلی ساده تر هست نسبت به Qt و اگر بخوام پلاگین های qt رو بریزم توی vs باز هم باید به صورت کد و لوکیشن و ... انجام بدم که تقریبا مثل win32 میشه فکر کنم. من خودم شخصا برای این مشکل به این فکر افتادم که رابط گرافیکی رو با c# بنویسم و همه کد ها رو توی یه قالب dll که به زبان c++ نوشته شده از #C فراخانی کنم. نظر شما چیه؟ راه حل بهتری سراغ دارید؟
  5. GornerLabo

    سلام و وقت بخیر. میخواستم در Qt Widget برای ویندوز نرم افزاری بسازم . اما در طراحی ui باید پنجره برنامه ( دکمه های close و minimize , restore down ) حذف بشن ودکمه هایی با طراحی جدید جایگزین بشن. مانند شکل زیر (گزینه 1 در تصویر) لینک تصویر و یک سوال دیگری در مورد همین تصویر داشتم. با توجه به گزینه 2 در تصویر به جز QTabWidget آیا کلاس دیگری هست برای طراحی ui به این سبک؟
  6. الهه انصاری

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

    «بخش دوم» در پست ۷ گام برای تبدیل شدن به یک طراح موفق 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) میکنیم. در عین حال توصیه می‌شود که در وب سایت‌های مختلف تعادل قوی، تقارن و عدم تقارن را بررسی کنید.
  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 نمونه مثال‌های خود را ارائه دهید که برخی از مثال‌های استاندارد در زیر آمده اند.
  8. سلام و درود برای اپلیکیشنی که دارم توسعه میدم برای صفحه اول یک همچین ترتیب طراحی لازم دارم. (عناصر به ترتیب زیر است) Header image به صورت بنر که عرض صفحه رو کامل بگیره ( و با ارتفاعی مشخص یا قابل ارتجاع نسبت به نمایشگر ) سه ستون ( ایجاد سه rectangle) لیستی از موضوعات footer * مشکل من سایز image یا همون بنر هست که باید چه استانداردی رو رعایت کنم، اپ مورد نظر برای موبایل است.
×