۱۲ ابزار ضروری برای طراحی ریسپانسیو

سه شنبه ۱۳ آبان ۹۳ • اشتراک گذاری در توییتر و فیسبوک

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

ماک‌آپ،نمونه‌سازی و ابزارهای Wireframe

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

InterfaceSketch : 1

InterfaceSketch

هنوز هستند کسانی (از جمله خودِ من) که طرح اولیه سایت یا سکتچ (Sketch) رو روی کاغذ و با مداد و خودکار میکشن و به نوعی قدیمی عمل میکنن و برای کشیدن طرح اولیه از نرم‌افزارهای کامپیوتری استفاده نمیکنن.سایت InterfaceSketch یک سری برگه ساده و رایگان در قالب PDF که شکلی از گجت‌های گوناگون هست رو در اختیار ما میزاره که بتونیم با تجسمی بهتر طرح دستی خودمون رو برای صفحه‌نمایش‌های مختلف ترسیم کنیم.

StyleTiles : 2

StyleTiles

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

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

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

Responsive Wireframes : 3

ResponsiveWireframes

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

Wirefy : 4

Wirefy

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

تولید HTML و CSS ریسپانسیو

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

Pure CSS : 5

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

Responsive Web CSS : 6

ResponsiveCSS

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

Macaw : 7

Macaw

Macaw (در فارسی به معنای طوطی) با شعار “کد نوشتن را متوقف کنید و شروع کنید به کشیدن آن” متولد شد،طوطی یک ابزار قدرتمنده که شما باید اون رو دانلود و نصب کنید،کار طوطی به این صورتِ که شما با کشیدن و رها کردن سایت خودتون رو که دارای قابلیت ریسپانسیو هم هست طراحی میکنید،طوطی قابلیت‌های ایجاد طرح‌بندی،مجموعه‌ی تایپوگرافی‌های وب و… رو در اختیارتون قرار میده موتور ریسپانسیو این نرم‌افزار به نام Stream (جریان) و موتور طراحی به کد Alchemy (کیمیاگری) نام داره،زمانی که شما طرح خود را در این برنامه کشیدید میتونید کدهای HTML و CSS اون رو دریافت کنید،هم اکنون میتونید از نسخه Trial برنامه استفاده و امتحانش کنید.

فونت‌ها،تصاویر و فیلم

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

FlowType : 8

FlowType

خواندن متن همیشه قسمتی از سایته که در طراحی ریسپانسیو اغلب نادیده گرفته میشه،در صفحه نمایش‌های تلفن همراه بزرگی و فاصله متن باید به طور استاندارد رعایت بشه که در هنگام مطالعه باعث خستگی چشم کاربر نشه،به طور استاندارد در هر خط باید ۴۵ تا ۷۵ کاراکتر وجود داشته باشه،کاری که FlowType برای شما انجام میده این هستش که باعث تغییر اندازه فونت بر اساس عرض یک عنصر خاص میشه و نیازی نیست که شما برای هر صفحه نمایش اندازه و فواصل خطوط رو تنظیم کنید.

Adaptive Images : 9

AdaptiveImages

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

FitVids.js : 10

FitVids

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

ابزارهای تست طراحی‌های ریسپانسیو

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

DesignModo’s Responsive Test : 11

respnsiveTest

به جرات میشه گفت که DesignModo’s Responsive Test یکی از قدرتمندترین ابزارهای تست ریسپانسیوه،فقط کافیه آدرس سایت خودتون رو در بالا وارد کنید سپس میتونید با انتخاب انواع گجت‌هایی که این سایت در اختیارتون میزاره و یا با کشیدن پنجره‌ها و تغییر اندازشون سایتتون رو تست و ارزیابی کنید و در رزولوشن‌های مختلف تماشا کنید.

Brad Frost’s Ish : 12

ish

Brad Frost’s Ish به شما این اجازه رو میده که به آرومی تغییر رزولوشن صفحه رو ببینید و راحت بتونید نقاط شکست سایتتون رو پیدا کنید.

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

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

نوشته شده در رابط کاربری ، یادداشت‌ها

مرتبط با برچسب‌های ، ،

برداشتی آزاد از سایت‌پوینت