Loading...این روزها طراحی وب‌سایت‌های واکنش‌گرا به امری رایج تبدیل‌شده است. البته هر وب‌سایتی نیاز به طراحی واکنش‌گرا ندارد، اما درصورتی‌که طراحی وب‌سایت واکنش‌گرا باشد، بازدیدکنندگانی که با موبایل وارد سایت می‌شوند می‌توانند به‌درستی وب‌سایتشان را مشاهده کنند.
اما چطور باید یک وب‌سایت واکنش‌گرا را مدل‌سازی کرد؟
برنامه Sketch
sketchapp توسط Bohemian coding برای سیستم‌عامل مک طراحی‌شده است. این نرم‌افزار برای طراحان رابط کاربری طراحی‌شده و یک ویرایشگر کد در نرم‌افزار تعبیه‌شده تا طراحان در صورت لزوم از آن استفاده کنند. در این برنامه می‌توانید روی یک‌لایه کلیک کرده و کدهای css آن را مشاهده کنید.
به همین دلیل می‌توان گفت نرم‌افزار Sketch یک برنامه کامل برای طراحی رابط کاربری واکنش‌گرا است.
ساخت قالب موبایل
در این آموزش از یک قالب sketch که قبلاً طراحی شده، استفاده می‌شود.
این قالب قبلاً برای مدل‌سازی یک وب‌سایت طراحی شده است. یک‌لایه خالی به‌اندازه صفحه‌نمایش موبایل ایجاد می‌کنیم و عناصر موجود در قالب سایت را روی این لایه خالی قرار می‌دهیم. برنامه Sketch قابلیت‌هایی دارد که با کمک آن می‌توانیم به‌راحتی از عناصر و استایل‌های یک قالب طراحی‌شده در پروژه‌های بعدی استفاده مجدد کنیم.
مقاله مرتبط: بهترین کیت های رایگان برای طراحی رابط کاربری (UI) در موبایل و وب
این قابلیت‌ها برای مدل‌سازی طراحی‌های واکنش‌گرا بسیار مفید هستند. آیا می‌توان عناصر طراحی‌شده در برنامه را مستقیم در قالب موبایل کپی کرد؟
بله می‌شود، می‌توانید این کار را انجام دهید. اما ما می‌خواهیم در این پروژه از استایل‌های اشتراکی، متنی، و Symbol ها استفاده کنیم.
دکمه A را برای ایجاد یک قالب جدید فشار دهید و Responsive web design -> Desktop HD را انتخاب کنید، سپس یک‌بار دیگر این مرحله را تکرار کنید و این بار Responsive web design -> Mobile Portrait را انتخاب کنید.
استایل‌های اشتراکی
قصد نداریم در این مقاله مدل‌سازی طراحی واکنش گرا را از صفرتا صد آموزش دهیم؛ بنابراین از یک مدل .sketch آماده برای این کار استفاده می‌کنیم. برای شروع می‌توانید یک‌لایه خالی ایجاد کنید و آن را مطابق سلیقه خود استایل دهی کنید. در اینجا کار را با استایل دهی اشتراکی شروع می‌کنیم. از این استایل در مواقعی که قصد دارید از یک‌لایه در چند قسمت مختلف برنامه‌تان بکار ببرید، استفاده کنید.
ابتدا لایه‌ای که می‌خواهید از آن کپی بگیرید را انتخاب کنید. یک آیتم خط افقی که در قسمت بالای فایل مدلم قرارگرفته را انتخاب می‌کنیم.
میزان شفافیت آن ۷۵ درصد بوده و با یک رنگ گرادینت خطی پر شده است.
مقاله مرتبط: اجزا و ساختار صفحه اول سایت [اینفوگرافیک]
ظاهر این لایه در قالب‌های مختلف پروژه یکسان خواهد بود، اما عرض آن را باید طوری تنظیم کنید که با عرض قالب موبایل‌مان مطابقت داشته باشد.
استایل‌های اشتراکی یکی از پرکاربردترین روش‌ها در مدل‌سازی واکنش‌گرا است. چون می‌توانید یک استایل را طراحی کنید و در هر پروژه‌ای که مایل بودید از آن استایل استفاده کنید و نیازی به طراحی استایل برای هر پروژه جدید ندارید و تنها باید اندازه استایل را در پروژه‌های جدید تغییر دهید، که این قابلیت به ما امکان طراحی برنامه‌های واکنش‌گرا می‌دهد.
در ساید بار سمت راست ( قسمت inspector) یک منوی آبشاری وجود دارد که یک گزینه دیگر تحت عنوان “No Shared Style” وجود دارد، یعنی هنوز هیچ استایل اشتراکی ایجاد نشده است.
سپس گزینه create New Shared Style را انتخاب و یک نام برای استایل اشتراکی جدید تایپ کنید. اگر با css آشنایی داشته باشید، باید بدانید که نامی که برای استایل انتخاب می‌کنید همانند نام کلاس‌های عناصر html است که می‌خواهید به آن‌ها استایل بدهید.
حال روی Mobile artboard (قالب موبایل) تان کلیک کنید و دکمه R را فشار دهید تا یک مستطیل ساخته شود، سپس دوباره روی یک منوی آبشاری shared Styles کلیک کنید و استایل جدیدی که ساختید را انتخاب کنید.
با این کار یک مستطیل با ابعاد کاملاً متفاوت خواهید داشت ( اندازه آن ۳۲۰px * 5px است) اما ظاهر آن هیچ تغییری نکرده است.
درصورتی‌که بخواهیم رنگ پس‌زمینه این عنصر افقی را تغییر دهیم، می‌توانیم به‌راحتی این کار را انجام دهیم، چون هر دوی آن‌ها استایل های خودشان را به اشتراک می‌گذارند.
Symbol ها
Symbol ها تقریباً مانند استایل‌های اشتراکی هستند با این تفاوت که symbol ها به گروهی از لایه‌ها اعمال می‌شوند و نمی‌توانند طول و عرض مستقلی داشته باشند. درصورتی‌که ابعاد یک‌لایه داخل Symbol Group را تغییر دهید، آن لایه در همه symbolهای دیگر هم تغییر پیدا خواهد کرد.
اجازه بدهید یک مثال را در این رابطه بزنیم.
قصد داریم یک کپی از تمام قسمت‌های هدر مربوط به قالب دسکتاپ را در قالب موبایلی کپی کنیم.
سپس باید یک group در قالب موبایل قرار داده و تمام لایه‌های موردنیاز را در آن قرار دهیم. سپس یک Symbol ایجاد می‌کنیم( طبق همان روش ساخت استایل‌های اشتراکی که در بخش قبل دیدید) و با زدن CMD+D یک کپی از Symbol می‌گیریم. بعدازآن CMD+opt+UP را فشار داده و آن را داخل قالب موبایل قرار می‌دهیم.
همان‌طور که در تصویر زیر می‌بینید، همه‌ی استایل‌های اشتراکی و Symbolها با رنگ بنفش در پنل لایه‌ها (سمت چپ) نشان داده می‌شوند.
حال در قسمت پیش‌نمایش موبایل یک آواتار (دایره آبی) می‌بینیم و می‌خواهیم کمی آن را کوچک‌تر کنیم که این کار را هم برای قسمت موبایل و هم قسمت دسکتاپ باید انجام دهیم.
نمی‌خواهیم بعدها موقع طراحی سایت به‌طور مرتب از مدیا کوئری‌ها استفاده کنیم، چون طراحی به‌صورت واکنش‌گرا انجام‌شده و می‌توان از یک قالب برای اندازه‌های مختلف صفحه‌نمایش استفاده کنیم.
مقاله مرتبط: انتقال سایت از نسخه موبایل به طراحی واکنش گرا
ابتدا دکمه CMD را نگه‌دارید و سپس یک‌لایه را از گروه Header انتخاب کنید. بعدازآن در پنجره inspector می‌توانید طول و عرض این لایه را تغییر دهید. اطمینان حاصل کنید که آیکن قفل کوچک فعال باشد، چون می‌خواهیم با تغییر ابعاد این لایه، بقیه مقادیر هم به همان نسبت به این ابعاد جدید تغییر کنند.
در این مثال آواتار هر دو قالب موبایل و دسکتاپ با هم تغییر اندازه می‌دهند، چون هر دوی آن‌ها به یک symbol متصل شده‌اند.
استایل‌های متنی
در مثال آخر، استایل‌های متنی را بررسی می‌کنیم. این نوع استایل‌ها تقریباً مانند استایل‌های اشتراکی هستند با این تفاوت که تنها به لایه‌های متنی اعمال می‌شود. نکته‌ای که باید به خاطر داشته باشید این است که هر بلوک متن باید لایه خودش را داشته باشد چون به هرکدام از آن‌ها استایل‌های متنی منحصربه‌فردی اعمال می‌شود. این کار در مواقعی مناسب است که می‌خواهیم یک طرح ابتدایی یا چهارچوب کلی را در قالب مشخص کرده و بعدها تمام قالب را طراحی کنیم. بعدازآن به‌راحتی می‌توانیم استایل متنی که ایجاد کرده‌ایم را به لایه‌های متنی تازه ایجادشده اعمال کنیم.
طراحانی که آیکن‌ها، کیت‌های رابط کاربری و منابع گرافیکی دیگر را طراحی می‌کنند اغلب از symbolها و استایل‌های متنی در برنامه sketch استفاده می‌کنند چون این کار به آن‌ها اجازه می‌دهد که از منابع گرافیکی که طراحی کرده‌اند در پروژه‌های مختلف استفاده کنند.
و با این کار دیگر مجبور نیستیم هنگام نیاز به یک‌لایه، آن را در برنامه copy/patse کنیم.
بعد از تعریف استایل‌های متنی و استفاده از دکمه T برای درج متن داخل قالب موبایل، با دو مسئله مواجه خواهیم شد.
آیا می‌توانید حدس بزنید این دو مسئله چه چیزهایی هستند؟
۱- شاید قسمت هدر خیلی بزرگ باشد و اندازه فونت کاهش پیدا کند.
۲- همچنین فاصله بین خط‌ها باید زیاد شود.
حل مسئله ۲ خیلی راحت است. کافی است که از قسمت inspector فاصله بین خطوط (line spacing) را افزایش دهیم و این کار تأثیری روی قالب و دسکتاپ نخواهد داشت. چون این فاصله به هرکدام از خط‌های قالب دسکتاپ اعمال می‌شود و تا زمانی که متن‌ها در قالب موبایل فشرده نشده بود، متوجه مناسب نبودن فاصله بین خطوط نشده بودم.به‌این‌ترتیب این مسئله حل شد.
حل مسئله کمی پیچیده است. بدیهی است که اندازه فونت در قالب موبایل بزرگ است، اما اگر اندازه را تغییر دهیم، اندازه فونت در قالب دسکتاپ هم تغییر می‌کند، و ما نمی‌خواهیم این اتفاق بیفتد.
در قسمت inspector منوی آبشاری که مشخص کرده کدام استایل متنی به آن اعمال‌شده را انتخاب کرده و گزینه “No Text Style” را انتخاب کنید، می‌بینید که خود متن تغییر نمی‌کند. سپس در inspector استایل‌های متنی را تغییر می‌دهیم ( اندازه فونت را کاهش می‌دهیم تا برای صفحات موبایل بهینه‌تر شود) و یک استایل جدید ایجاد می‌کنیم. شما می‌توانید این تکنیک را به استایل‌های اشتراکی در symbolها اعمال کنید.
نتیجه نهایی به دست آمده مطابق تصویر زیر است:
نتیجه‌گیری
طرح‌ریزی و مدل‌سازی یکی از مراحل مهم در چرخه کاری هر نوع طراحی محسوب می‌شوند، اما نباید این کار وقت‌گیر و ناکارآمد باشد.
استایل‌های اشتراکی، استایل‌های متنی و symbolها صرفاً برای زیبایی به نرم‌افزار sketch اضافه نشده‌اند، بلکه ابزارهای بسیار مفیدی هستند که توسط آن‌ها می‌توانید صرفه‌جویی زیادی در زمان داشته باشید و به‌راحتی هر نوع استایلی را طراحی کنید.
همیشه عناصری که بیشترین استفاده در مدل‌سازی‌تان دارد را ذخیره کنید، چون از آن‌ها بارها در پروژه‌هایتان استفاده خواهید کرد، با این کار صرفه‌جویی زیادی در زمان تان خواهید کرد.
صحبت‌های پایانی
۱- مدلسازی‌هایتان را سازمان‌دهی کنید.
هنگامی‌که یک قالب جدیدی ایجاد و یا از قالب جدید کپی بگیرید، ۱۰۰پیکسل به سمت راست می‌آید و بعد از ایجاد چند قالب، تعداد زیادی قالب می‌بینید که بدون هرگونه نظم و ترتیبی در کنار یکدیگر قرارگرفته‌اند.
شما باید این قالب‌ها را در کنار یکدیگر قرار دهید، چون هنگامی‌که یک استایل اشتراکی یا symbol ویرایش کنید، می‌توانید نتیجه این تغییر را روی هر دو قالب دسکتاپ و موبایل به‌صورت هم‌زمان ببینید.
و با این کار مجبور نیستید که برای دیدن نتیجه این تغییرات صفحه را به چپ، راست، بالا، یا پایین اسکرول کنید.
روش‌های بهتری برای سازمان‌دهی آن‌ها وجود دارد، به این صورت که باید روی یک قالب کلیک کنید و از قسمت inspector واحدهای x و y را تغییر دهید و به‌این‌ترتیب می‌توانید آن را مانند یک‌لایه دیگر جابجا کنید.
با این کار می‌توانیم مدل‌های برنامه را به‌طور مرتب و منظم نگه‌داریم.
بهترین روش این است که مدل‌سازی قالب دسکتاپ پروژه را در سمت چپ و قالب موبایل را در سمت راست انجام دهیم.
به‌عنوان یک تمرین می‌توانید یک صفحه وب را به‌طور کامل با استایل های اشتراکی و symbol طراحی کنید. خواهید دید که در این صورت هم این استایل ها می‌توانند باعث صرفه‌جویی در کارتان شود.
برای حذف و ایجاد صفحات از پنل لایه‌ها در سمت چپ استفاده می‌شود.
معمولاً برای طراحی هر صفحه وب مجزا یک page ایجاد می‌شود تا بتواند به‌عنوان مدل‌سازی یک مقاله وبلاگ، مدل‌سازی صفحه خانگی، صفحه sign up و یا هر چیز دیگری باشد.
۲- از استایل‌ها و Symbolها درست و بجا استفاده کنید.
استایل‌ها و Symbolها یکی از امکانات بی‌نظیر برنامه sketchاست. اما بهتر است آن‌ها را فقط برای عناصری که می‌خواهید به‌طور مکرر در پروژه‌هایتان استفاده کنید، بکار ببرید، در غیر این صورت نمی‌توانید از مزیت‌های آن به‌طور کامل استفاده کنید.
برای مثال نیازی نیست برای متن قوانین کپی‌رایت از استایل‌های اشتراکی استفاده کنید. نکته مهم که باید به خاطر داشته باشید این است که اطمینان حاصل کنید که همواره بهترین تجربه کاربری ممکن را برای کاربرانتان فراهم کنید.
۳– از استایل و Symbol ها برای مزیت بخشیدن به کارتان استفاده کنید.
معمولاً مدل‌سازی با آزمایش همراه است. هنگام ساخت اولین قالب توجه داشته باشید که همه‌چیز را تبدیل به استایل و symbol نکنید. در عوض سعی کنید طراحی برای قالب دسکتاپ و موبایل را در کنار هم انجام دهید و همچنین اندازه فونت را طوری تغییر دهید تا به بقیه عناصر قالب همخوانی داشته باشد.
از استایل های اشتراکی، متنی، و symbolها برای بهتر شدن کارتان استفاده کنید. و توسط آن‌ها می‌توانید به‌راحتی و در کمترین زمان تغییرات گسترده‌ای را در قالبتان بدهید.
درصورتی‌که در ابتدای کار با برنامه ، نتیجه دلخواهتان را نگرفته‌اید ناراحت نشوید، چون تکرار بیشتر یک کار در یک چهارچوب زمانی مشخص نهایتاً منجر به تجربه بیشتر و نتایج بهتر در بازه زمانی کوتاه‌تر خواهد شد.
۴- دانلود Sketch mirror و آزمایش روی یک دستگاه موبایل واقعی
Sketch Mirror یک برنامه کمکی برای سازنده نرم‌افزار sketch است که به قیمت ۴.۹۹دلار روی ios App Store قابل‌دسترسی است و به شما اجازه می‌دهد که مدل‌هایی که با برنامه Sketch ساخته‌اید را روی هر نوع دستگاه با سیستم‌عامل ios اجرا کنید و ببینید که آن مدل روی یک دستگاه واقعی چطور به نظر می‌رسد.
شما هر تعداد دستگاه که دوست داشته باشید می‌توانید به این برنامه متصل کنید و به‌محض اینکه فایل مدلتان را در برنامه Sketch تغییر دهید، این تغییر در تمام این ابزارها به‌طور آنی به‌روزرسانی می‌شود.
حتی می‌توانید برای دسترسی به قالب‌های مجاور آن صفحه را اسکرول کنید که این امر باعث می‌شود قالب‌ها سازمان‌دهی شوند.
سپس درصورتی‌که دستگاه‌ها و مکینتاش از یک شبکه wi-fi یکسان استفاده می‌کنند، روی آیکن Sketch Mirror در نوار منوی نرم‌افزار Sketch کلیک کنید، و در پنجره باز شده می‌توانید همه تنظیمات را برای آزمایش طراحی‌های زیبایی‌تان روی دستگاه‌های موبایل تست کنید.
افزودن دیدگاه