جستجو در تالارهای گفتگو
در حال نمایش نتایج برای برچسب های 'فونت'.
6 نتیجه پیدا شد
-
معرفی مناسب‌ترین فونت‌ها و اصول استفاده در طراحی UI
کامبیز اسدزاده نوشته وبلاگ را ارسال کرد در طراحی و توسعه
به نظر شما قلم یا هما فونت در طراحی رابط کاربری چقدر اهمیت دارد؟ ممکن است با خود بگویید طراحی و حل مشکلات نرم‌افزاری و در نهایت اجرای درست کد‌های نوشته شده اولویت بسیار بیشتری دارد و از این نظر برای مشتری کافی است! من تأکید میکنم این تفکر کاملاً اشتباه و بر خلاف قوانین UX خواهد بود. چرا که اولین واکنشی که کاربر شما با محصول خواهد داشت بازخورد‌های مربوط به ظاهر، مکان‌ها، چیدمان، قلم و در کل رابط کاربری آن خواهد بود. اگر شما به این فکر کنید که تنها با یک ظاهر عادی و کد‌های بک‌اندی بسیار عالی یک محصول را به بالا‌ترین درجهٔ فروش خود برسانید، سخت در اشتباه هستید. تمامی محصولاتی که کاربران آنها وفادار هستند و ترجیح می‌دهند آنها را برای دیگران هم پیشنهاد بدهند، از قوانین UX و UI به درستی تبعیت کرده‌اند. حتی در محیط‌های توسعه که کاملاً تخصصی هستند، یک رابط کاربری در‌دسترس، قابل درک و راحت بسیار پرطرفدار‌تر از یک محیط سخت و خُشک خواهد بود. قبل از هر چیز این نکته را یادآوری میکنم، فونت (قلم) در ظاهر برنامه یک اصل اساسی است و می‌تواند به اندازهٔ بسیار چشم‌گیری در زیبا بودن و برعکس بی‌ریخت بودن ظاهر برنامهٔ شما موثر باشد. اینکه شما با یک قلم پیشفرض مانند Tahoma یا Arial محصول خود را نهایی کنید نشان‌دهندهٔ آن است که هیچ اطلاعی در مورد طراحی رابط کاربری ندارید و صرفاً با معلومات فنی و کد‌نویسی خود سعی در توسعهٔ محصول و انتشار آن داشته‌اید! از نظر من این یکی از ناشیانه‌ترین رفتار‌هایی است که باعث می‌شود محصولات و یا همان نمونه‌کار‌های شما بیشتر از آنچه که باید دیده نشوند. بنابراین، پیشنهاد میکنم قبل از انتشار محصول نهایی حتماً به ظاهر آن توجه کنید که در این مقاله صرفاً به یکی از گزینه‌های بسیار مهم در طراحی رابط کاربری اشاره میکنم. فونت‌هایی که پیشنهاد میکنم به دو دستهٔ تجاری و آزاد خواهند بود که بر اساس شرایط توسعهٔ خودتون می‌توانید از آنها استفاده کنید. فونت‌های آزاد (طراحی و توسعه توسط دوستمون صابر راستی‌کردار) وزیر صمیم شبنم تنها گندم پرستو ساحل ناهید جهت مقایسهٔ این فونت‌ها به این لینک مراجعه کنید. فونت‌های تجاری (طراحی و توسعه توسط دوستمون مسلم ابراهیمی) ایران یکان ایران سنس دانا فرهنگ انجمن دماوند پیدا کتیبه مانلی و ... جهت بررسی و مقایسه به این لینک مراجعه کنید. درضمن، در رابطه با فونت‌های لاتین تمامی این فونت‌ها شامل نوع لاتین مثل Roboto می‌باشند که در زمان استفاده خودتون باید انتخاب کنید اعداد و نشانه‌گذاری‌ها به سبک لاتین باشند یا فارسی و عربی. در انتخاب فونت نسبت به هدف پروژه دقت کنید، برای مثال در اپلیکیشن‌های کسبوکار نباید از فونتی مثل تحریر، تاهوما، مانلی یا چنین سبک‌ها استفاده کنید. این کار بسیار اشتباهیه! وزن‌ها تنوع وزن‌ها به طراح این امکان را می‌دهد تا نزدیکترین ضخامت به ایدآل خود را انتخاب کند. در نظر داشته باشید انتخاب وزن‌های مناسب در جای مناسب خود بسیار مهم است. برای مثال، انتخاب یک وزن سبک برای عنوان مناسب نیست! همچنین انتخاب یک وزن Bold, Ex Bold, Black و ضخیم‌تر هم برای توضیحات و متن‌های طولانی مناسب نمی‌باشد. انتخاب صحیح برای عنوان نوع Bold یا Black و انتخاب صحیح برای متن‌های طولانی، توضیحات و غیره نوع Light و یا Regular است. بنابراین، در انتخاب نوع قلم با وزن مناسب باید دقت کرد تا بخش‌های پر اهمیت با بخش‌های کم اهمیت بر اساس اولویت در خوانده شدن متمایز شوند. هایرآرکی (سلسله مراتب) در تایپوگرافی چیست؟ هایرآرکی (Hierarchy) در تایپوگرافی یعنی اینکه نوشته‌ها را طوری کنار هم قرار دهیم که مهمترین جمله اول خونده شود و به ترتیب، نوشته‌های کم اهمیت‌تر به ترتیب اهمیت خوانده شوند. این یک قانون است که وقتی همه چیز را مهم کنیم در واقع هیچ چیز مهم نیست! وقتی به همهٔ دانشجویان کلاس نمرهٔ ۲۰ بدهید یعنی هیچ‌کدام از آنها بهترین نیستند. در طراحی اگر چند گزینه را بر روی صفحه قرار دهید لازم است جذاب‌ترین قسمت را برجسته‌تر از بقیه نشان بدهید. با این کار ما یک دروازهٔ زیبا برای ورود ساخته‌ایم. کاربر با دیدن این جملهٔ جذاب که شما طوری آن را طراحی کرده‌اید که زودتر از بقیه دیده و وارد ماجرا شود. اما اگر فکر کرده‌اید کار تمام است اشتباه کرده‌اید. باز هم به همین ترتیب باید ادامه بدهید. یعنی با ترفند‌های تایپوگرافیک کاری کنید که دومین جمله مورد نظرتان واقعاً در اولویت دوم دیده شود. از طرفی ممکن است ترتیب ارائه اطلاعات مهم باشد، عنوان اصلی، زیر عنوان، تیتر‌ها، متن اصلی و توضیحات پاورقی و … این مثال تصویری به خوبی موضوع سلسه مراتب در تایپوگرافی را نشان می‌دهد: در تایپوگرافی چندتا سلسله مرتبه داشته باشیم؟ عنوان اصلی (تیتر) عنوان فرعی (زیر تیتر) متن (بدنه مطلب) اطلاعات جزئی (توضیح عکس، ارجاع به منابع) چطور طراحی متن از نوع سلسله مراتبی ایجاد کنیم؟ شاید این راه حل در ذهن شماست که هرچه مهم‌تر و مقدم‌تر است را بزرگتر می‌نویسیم. اما باید بگوییم که اینطور نیست. برای برجسته کردن یک متن از دیگری باید تضاد ایجاد کنیم و تضاد فقط با تغییر اندازه ایجاد نمی‌شود. مواردی از قبیل: تغییر نوع فونت، وزن فونت، رنگ فونت، ایتالیک یا ایرانیک بودن، کشیدگی حروف و فضا همه مواردی هستند که به کمک آنها می‌توان تضاد ایجاد کرد. همینطور که در مثال بالا می‌بینید اولین جمله کوچکتر و نازک از جمله دوم است اما در مرتبه اول قرار دارد. در اینجا نوع رنگ و فضا باعث برجستگی جمله اول است. در طراحی وب عمومی‌ترین روش برای انجام طراحی سلسله‌مراتبی در تایپوگرافی استفاده از برچسب های هدینگ در HTML است. از H1 تا H6 مهمترین عنوان‌ها تا کم اهمیت‌ترین نوشته‌ها را طبقه بندی کنید. قواعد سلسله‌مراتبی به جز تایپوگرافی در هر نوع طراحی دیگر نیز وجود دارد و می‌توان با رعایت آن قدرت تاثیر‌گذاری بخش‌های مختلف را کنترل و نظم دهی کرد. اگر آیتم‌های طراحی شما خیلی زیاد هست درست نیست که تعداد تقسیم بندی و سلسله مراتب را زیاد کنید. این کار باعث آشفتگی خواهد شد. در برخی از محصولات که مذهبی هستند فونت‌ها می‌توانند اختصاصی باشند مثل فونت کتیبه، رهروان. اینکه فونت‌های آزاد نیازی به هزینه ندارند و برعکس فونت‌های تجاری اغلب در اوج راه‌اندازی کسب‌و‌کار‌ها نیاز به مجوز‌های گران قیمتی هستند شکی نیست! پیشنهاد من این است ابتدا از نسخه‌های رایگان مثل فونت صمیم استفاده کنید این خیلی بهتر از فونت پیشفرضی مثل Tahoma یا Arial خواهد بود، در طراحی نرم‌افزار این مسائل بسیار مهم هستند. چه موقع باید از فونت‌های تجاری استفاده کرد؟ پیشنهاد من این است زمانی که کسبوکار شما با جدیت وارد بازار کار شد می‌توانید از مجموعهٔ فونت‌ایران درخواست فونت‌های تجاری کنید، معمولاً به آدرس هر وب‌سایت و برای هر پروژه یک مجوز ارائه می‌کند. بعد از راه‌اندازی کسب‌و‌کارتان، فونت را در قالب مجوز‌های غیر‌تجاری و یا کسب‌و‌کار‌های کوچک سفارش بدهید تا بتوانید با هزینه‌های بسیار پایین‌تر و تا زمانی که پروژهٔ شما درآمد میلیونی نداشته باشد از آن مجوز‌ها استفاده کنید. -
سلام بر دوستان گرامی و اساتید ارجمند. چه طوری در QML/Qt Quick میشه در یک TextArea یا دیگر اشیا مرتبط با تایپ متن، جوری تعریف شن تا وقتی کیبورد روی فارسی هست از فونت مثلا بی‌نازنین استفاده شه برای تایپ و وقتی کیبورد به زبان انگلیسی تغییر پیدا کرد از فونت مثلا تایمز نیو رومن استفاده شه؟ آیا اصلا QML یک همچین مکانیزمی رو در اختیار ما در سمت رابط کاربری قرار میده یا باید از خود C++ کمک گرفت؟ سپاس گزارم.
-
سلام و درود بر کاربران عزیز مرجع، جهت راحتی و مشاهده‌ی محتوای مرجع بر اساس سلیقه‌ی شما کاربران عزیز افزونه‌‌ی تغییر فونت با بسته‌های ویژه‌ی فونت فارسی بر روی وب‌سایت اعمال شد. ? برای استفاده از آن می‌توانید بر روی گزینه‌ی A در عنوان صفحه کلیک و فونت مورد نظر خود را انتخاب نمایید.
-
نگارش 5.0.13
23 دریافت
فایل Font Awesome یک پروژه رایگان است و می‌توان در هر نوع وب سایت و نرم‌افزاری از آن استفاده نمود. جهت استفاده از این فونت-آیکون کافی است فایل حاوی فونت و استایل آن را دریافت نموده و به وب سایت، پروژه‌های موبایل و دسکتاپ خود الحاق نمایید.رایگان
-
در کتابخانهی SFML فونت‌ها می‌توانند از طریق فایل، حافظه و یا جریان ورودی مشخصی بارگذاری شوند و توسط رایج‌ترین فونت‌ها پشتیبانی می‌شوند. جهت اعلان یک فونت جدید در این کتابخانه کافی است کُد زیر را در نظر داشته باشید: sf::Font font; در ادامه برای بارگذاری یک فونت به صورت زیر عمل می‌کنیم: font.loadFromFile("arial.ttf"); در قالب یک دستور شرطی: // Load it from a file if (!font.loadFromFile("arial.ttf")) { // error... } برای استفاده از فونت و قالب‌های سفارشی نیاز است تا از کلاس sf::Text نمونه گیری شود، بنابراین در ادامه مثال زیر نشان می‌دهد که نمونه‌ای از کلاس Text ایجاد و با فونت مربوطه ترکیب شده است. sf::Text MyText; کلاس sf::Text دارای توابع عضوی مانند setFont، setCharacterSize، setStyle و موارد مشابه دیگری می‌باشد که در تولید ظاهر سفارشی بر روی یک متن اعمال می‌شوند. در ادامه مثال فوق نمونه‌ای از نحوه‌ی ترکیب این کلاس می‌باشد. sf::Text MyText; MyText.setFont(font); MyText.setString("Hello, My name is Kambiz :)"); MyText.setCharacterSize(14); MyText.setStyle(sf::Text::Regular); MyText.setColor(sf::Color::White); توجه داشته باشید که برای رسم محتوای مورد نظر باید توسط متُد draw آن را به کلاس RenderWindow ارسال کنید. برای این کار کافی است از تابع draw استفاده شود به صورت زیر: window.draw(MyText); کد نهایی این مثال به صورت زیر است: #include <SFML/Window.hpp> #include <SFML/Graphics.hpp> #include <iostream> int main() { sf::RenderWindow window(sf::VideoMode(640, 480), "Hello world!"); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (sf::Keyboard::isKeyPressed(sf::Keyboard::Escape)) window.close(); } sf::Font font; font.loadFromFile("arial.ttf"); // Create a text sf::Text MyText; MyText.setFont(font); MyText.setString("Hello, My name is Kambiz :)"); MyText.setCharacterSize(14); MyText.setStyle(sf::Text::Regular); MyText.setColor(sf::Color::White); window.clear(sf::Color::Black); window.draw(MyText); window.display(); } return 0; } برنامه را کامپایل و اجرا کنید، پیغام شما در سطر اول پنجره‌ی تولید شده نمایش داده خواهد شد.
-
کامبیز اسدزاده یک موضوع را ارسال کرد در <span class="ipsBadge ipsBadge_pill" style="background-color: #38ff7a; color: #000000;" >کتابخانه کیوت (Qt)</span>
معمولاً برای استفاده از آیکون‌ها در برنامه از تصاویر با فرمت‌های png, svg, gif استقبال می‌شود، اما بعضاً نیاز است نسبت به دستگاه‌ها و صفحه‌های نمایشی با کیفیت بسیار بالا تصاویر با تعداد پیکسل متناسب با صفحه مورد استفاده قرار گیرند. اما روشی وجود دارد که می‌توان با حجم کمتر و کیفیت بسیار بالاتری از تصاویر برداری مانند SVG و یا فونت‌های آیکونیک استفاده کرد. این فناوری در وب، موبایل و دسکتاپ مورد استقبال قرار می‌گیرد و ما در این بخش قرار است راجع به نحوه‌ی استفاده از فونت‌های آیکونی در پروژه‌های تحت فناوری کیوت کوئیک و QML صحبت کنیم. قبل از هر چیز لازم است فونت آیکونیک مورد نظر خود را دریافت و بر روی پروژه خود اعمال کنید. برای این منظور ما FontAwesome را پیشنهاد می‌کنیم. جهت دریافت نسخه به روز آن را از این بخش دریافت کنید. وارد محیط Qt Creator شوید و پروژه‌ی خود را از نوع Qt Quick ایجاد کنید، در بخش qrc فونت‌های دسکتاپ را به پروژه اضافه کنید. سپس وارد فایل main.qml شده و نوع تعریف فونت را اعلان کنید. به صورت زیر: FontLoader { id:fontAwesomeStandard source: "qrc:/font/Font Awesome 5 Free-Regular-400.otf" } FontLoader { id:fontAwesomeBrand source: "qrc:/font/Font Awesome 5 Brands-Regular-400.otf" } FontLoader { id:fontAwesomeSolid source: "qrc:/font/Font Awesome 5 Free-Solid-900.otf" } توجه داشته باشید که کُد‌های یونیک را با کاراکتر u ترکیب کنید. برای مثال کد f007 شناسه آیکون کاربری می‌باشد که در اینجا باید به صورت u\f007 نوشته شود. Text { text: "\uf007" font.family: fontAwesomeSolid.name verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.pixelSize: 128 anchors.centerIn: parent } کُد‌های مختص آیکون‌ها نسبت به نوع فایل فونت متفاوت هستند، کد مرتبط با آیکون کاربر در داخل فایل Free-Solid می‌باشد که باید به آنها توجه کنید. برای به دست آوردن کد‌های آیکونیک از طریق این آدرس اقدام کنید. برای مثال فایل Brand دارای آیکون‌های برندیگ است که کد آن به صورت زیر خواهد بود. Text { text: "\uf369" font.family: fontAwesomeBrand.name verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.pixelSize: 128 anchors.centerIn: parent } در ادامه می‌توانید فایل ضمیمه شده پروژه را دریافت نمایید. FontAwesome.zip
