محتوا
- مرحله 01
- مرحله 02
- مرحله 03
- مرحله 04
- مرحله 05
- مرحله 06
- مرحله 07
- مرحله 08
- مرحله 09
- مرحله 10
- مرحله 11
- مرحله 12
- مرحله 13
- مرحله 14
- مرحله 15
- مرحله 16
- مرحله 17
- مرحله 18
آیا تاکنون با سازگاری در طراحی وب دست و پنجه نرم کرده اید؟ این اتفاق خیلی زیاد اتفاق می افتد ، خصوصاً هنگام کار در مقیاس. خوشبختانه برای ما ، کتابخانه های الگو برای کمک به اینجا هستند!
کتابخانه الگو مجموعه ای از عناصر طراحی رابط کاربر است که می تواند برای ساخت صفحات مورد استفاده مجدد قرار گیرد. به عنوان مثال می توان به پیمایش ها ، دکمه ها ، پاراگراف ها ، عنوان ها و فرم ها اشاره کرد. با طراحی عناصر جداگانه به جای صفحات کامل ، ما فعالانه استفاده مجدد را ترغیب می کنیم ، در نتیجه طراحی هایی سازگار و آسان برای نگهداری انجام می شود.
قبل از اجرای کتابخانه الگو ، باید اطمینان حاصل کنیم که ابزار طراحی ما می تواند عناصر قابل استفاده مجدد را مدیریت کند. طی دو سال گذشته ابزار طراحی من Sketch بوده است: ابزاری سبک ، بردار و مناسب برای رابط ها و کتابخانه های الگو. چرا کامل است؟ من یک مثال می زنم
بگذارید بگوییم شما یک عنصر دکمه دارید که چندین بار در سراسر وب سایت استفاده می شود ، سپس تصمیم به تغییر آن می گیرید. به طور معمول باید هر نمونه از آن دکمه را مرور کرده و به صورت دستی تغییر دهید. با Sketch نیست. این نرم افزار شامل یک ویژگی به نام Symbols است: نوع خاصی از گروه لایه ، که در آن هر تغییری که در یک نماد ایجاد می کنید به طور خودکار در تمام موارد دیگر آن اعمال می شود. برای کار با عناصر قابل استفاده مجدد عالی است.
خوب ، کافی است من ستایش Sketch را بخوانم. بیایید در آموزش غوطه ور شویم! کپی Sketch ندارید؟ برای بارگیری نسخه آزمایشی به سادگی به اینجا مراجعه کنید.
مرحله 01
قبل از شروع ، اطمینان حاصل کنید که فونت Google Source Sans Pro رایگان را نصب کرده اید. یک سند جدید ایجاد کنید ، سپس با رفتن به Insert> Artboard (میانبر صفحه کلید: A) یک صفحه هنری جدید وارد کنید. artboard یک بوم ثابت است که ما از آن به عنوان اندازه صفحه استفاده خواهیم کرد. خواهید دید که «Artboard 1» به لیست لایه های سمت چپ اضافه شده است. در صفحه Inspector در سمت راست ، Width را روی 1280px و Height را روی 2000px تنظیم کنید.
مرحله 02
اکنون شبکه خود را ایجاد کنید. با انتخاب Artboard 1 به View> Canvas> Show Layout بروید (میانبر صفحه کلید: Ctrl + L). مشاهده خواهید کرد که یک شبکه پیش فرض ظاهر می شود. اکنون فقط باید آن را ویرایش کنیم. در حالی که Artboard 1 هنوز انتخاب شده است ، به View> Canvas> Layout Settings بروید. عرض کل را روی 1080px ، تعداد ستونها را روی 12 ، عرض Gutter را روی 30px و عرض ستون را 60px قرار دهید. مطمئن شوید که ناودان در بیرون علامت گذاری شده باشد. روی دکمه Center کلیک کنید.
مرحله 03
اکنون صفحه هنری و شبکه خود را تنظیم کرده ایم ، وقت آن است که برخی از مطالب را اضافه کنیم. برای این آموزش ، ما قصد داریم چهار نوع مختلف از عناصر کتابخانه الگو ایجاد کنیم. بیایید با دکمه ها شروع کنیم. برای ایجاد پس زمینه دکمه ، به Insert> Shape> Rectangle (میانبر صفحه کلید: R) بروید. در Inspector ، عرض را روی 280px و Height را روی 44px تنظیم کنید. Radius را روی 3px و رنگ fill را روی # 1A9DD3 تنظیم کنید.
مرحله 04
اکنون برای افزودن متن. به Insert> Text (میانبر: T) بروید. Typeface را به Source Sans Pro ، Weight به Bold ، Color به #FFFFFF ، Size را به 16pt تغییر دهید و روی نماد تراز وسط کلیک کنید. متن را طوری قرار دهید که در پس زمینه متمرکز شود. هر دو لایه را انتخاب کرده و به Arrange> Group Layers (میانبر صفحه کلید: Cmd + G) بروید. با انتخاب گروه ، به Layer> Create Symbol بروید. متوجه خواهید شد که Sketch شما را وادار به نامگذاری نماد می کند ، بنابراین دکمه را وارد کنید. نمادها را می توان با یک نماد لایه بنفش تشخیص داد.
مرحله 05
هر تغییری که در یک نماد ایجاد شود ، مانند آن که ما اخیراً ایجاد کردیم ، در سایر موارد آن نماد اعمال خواهد شد. تنها مشکل این است که اگر متن دکمه را در داخل Symbol تغییر دهیم ، متن همه دکمه های دیگر را تغییر می دهد. برای جلوگیری از این اتفاق ، لایه متن را انتخاب کنید و کادر Exclude Text Value from Symbol in the Inspector را علامت بزنید. حالا بیایید یک دکمه تکراری ایجاد کنیم. به دکمه Insert> Symbols> بروید.
مرحله 06
برای دیدن نمادها در حال کار ، رنگ پس زمینه یک دکمه را تغییر دهید. توجه کنید که چگونه رنگ برای هر دو تغییر می کند. اما اگر متن یک دکمه را تغییر دهید ، متن دکمه دیگر تغییر نمی کند. فقط سبک ها هماهنگ هستند ، نه رشته های متن. این بدان معناست که به عنوان مثال ، ما می توانیم دکمه های ثبت نام ، خرید اکنون و تماس با من را ایجاد کنیم که همه از یک سبک برخوردار هستند.
مرحله 07
قبل از حرکت ، مهم است که از نحوه کار اندازه گیری در Sketch آگاه باشید. یک دکمه را انتخاب کنید ، Alt را پایین نگه دارید و روی دکمه دوم قرار دهید تا فاصله بین آنها نشان داده شود. این تنها ویژگی نیست که طراحان همیشه از آن استفاده می کنند بلکه برای توسعه دهندگانی که مرتباً باید اندازه گیری دقیق پیکسل ها را محاسبه کنند بسیار مناسب است.
مرحله 08
بعدی ، عناوین. از آنجا که عناوین عناصر متنی قابل استفاده مجدد هستند ، استفاده از ویژگی Text Style به جای Symbols بسیار مهم است. یک لایه متن وارد کرده و عنوان صفحه را تایپ کنید 1. Typeface را به Source Sans Pro ، Weight to Bold ، Color را به شماره 3A4654 و Size را به 37pt تغییر دهید. به Layer> Create Shared Style بروید. در Inspector ، متوجه خواهید شد که متن برجسته شده است. Sketch از شما می خواهد سبک متن را نامگذاری کنید ، بنابراین H1 را وارد کنید.
مرحله 09
آخرین مرحله را برای ایجاد عناصر H1 تا H6 تکرار کنید. اندازه قلم عنوان من H1: 37pt ، H2: 31pt ، H3: 25pt ، H4: 21pt ، H5: 18pt و H6: 15pt است. از آنجا که هر عنوان یک سبک متن است ، هرگونه تغییر در سایر موارد آن اعمال خواهد شد. من از ابزار Jeremy Church’s Type Scale برای تعیین اندازه عناوین خود استفاده کرده ام. مقیاس Type از مقیاس مدولار برای انتخاب اندازه متن متن استفاده می کند ، بسته به نسبتی که انتخاب می کنید.
مرحله 10
برای سازماندهی سبک های متنی که به تازگی ایجاد کرده ایم ، به Insert> Styled Text> Organize Text Styles بروید. در اینجا می توانید سبک های متنی را حذف و تغییر نام دهید اما مرتب سازی مجدد آنها نشوید. همانطور که سبک های متنی به ترتیب حروف الفبا مرتب می شوند ، عناصر مشابه را با همان کلمه اول نامگذاری می کنم: به عنوان مثال ، لیست غیر مرتب و لیست مرتب. برای ساماندهی نمادها نیز همین روند را دنبال کنید. خوب ، ما دکمه ها و عناوین را حل کرده ایم! اما تصاویر چطور؟
مرحله 11
برای آواتارها ، یک تصویر و مستطیل را وارد کنید که هر دو دارای عرض و ارتفاع 130px باشند. به مستطیل شعاع 65 پیکسل بدهید. هر دو لایه را دسته بندی کرده و مستطیل را در پشت تصویر قرار دهید. روی لایه مستطیل کلیک راست کرده و Use as Mask را انتخاب کنید. اکنون یک آواتار دایره ای داریم. ما به جای دایره واقعی از یک مستطیل با تنظیم شعاع استفاده کرده ایم زیرا اگر می خواهید آواتار را مربع کنید ، می توانید شعاع را به جای درج شکل جدید ویرایش کنید.
مرحله 12
اما اگر بخواهم تصویری را جایگزین کنم ، می شنوم که از شما می پرسد؟ خوب ، شاید شما این را نمی پرسیدید ، اما این امر من را به سمت یک ویژگی زیبا و مناسب با نام Image Replace سوق می دهد. نماد خود را انتخاب کنید و به لایه> تصویر> جایگزینی بروید. عکس متفاوتی انتخاب کنید. Sketch به طور خودکار تصویر جدید را تغییر اندازه می دهد و آن را با تصویر موجود تغییر می دهد. این کار را بیشتر از آنچه فکر می کنید استفاده خواهید کرد: این یکی دیگر از صرفه جویی های بزرگ در وقت است!
مرحله 13
یک گزینه جایگزین برای درج تصاویر خود استفاده از پلاگین Content Generator for Sketch توسط تیمور کارپایف است. به سادگی یک شکل ایجاد کنید و به Plugins> Content Generator Sketch Plugin> Persona> Photos بروید. این عکسهای کاربر را از User Inter Faces بیرون می کشد و آنها را به عنوان یک فرم پر می کند. انجمن افزونه Sketch بسیار عالی است.
مرحله 14
بعدی ، نمونه های رنگی! مهم است که رنگ های معمول استفاده شده را در کتابخانه الگوی خود ثبت کنید. یک مستطیل با عرض و ارتفاع 120px وارد کنید و یک رنگ پر از # 1A9DD3 به آن بدهید. این مرحله را با رنگ های # 3A4654 ، # 475361 ، # 8793A1 و # EFF0F1 تکرار کنید. همچنین یک پلاگین برای ایجاد نمونه های رنگی توسط Jody Heavener وجود دارد. به Plugins> Swatches بروید و پنج مقدار hex بالا را وارد کنید.
مرحله 15
یک نمونه را انتخاب کنید و روی رنگ پر کردن در Inspector کلیک کنید. در پایین انتخابگر رنگ ، دو بخش را مشاهده خواهید کرد: Global Colors و Document Colors. رنگ های جهانی برای تمام اسناد Sketch که ایجاد می کنید ذخیره می شوند ، در حالی که رنگ های سند منحصر به فرد هر سند است. با افزودن رنگ به قسمت رنگ سند ، شما کتابخانه رنگ خود را ایجاد می کنید.
مرحله 16
جدا از رنگ سند ، Sketch همچنین به طور خودکار رنگ های رایج را در سند شما انتخاب می کند و نشان می دهد که چند بار استفاده شده است! این ویژگی از دید پنهان است اما از طریق انتخابگر رنگ قابل دسترسی است. بر روی قسمت سمت راست لغزنده های رنگ و opacity کلیک کنید. شما یک پنجره بازشو را مشاهده خواهید کرد با عنوان Frequent Colors در ....
مرحله 17
برای مراحل آخر ، لطفاً منبعی را که با این آموزش همراه است بارگیری کنید و مطمئن شوید که فونت Source Code Pro را نصب کرده اید. در منبع ، HTML در کنار هر عنصر گنجانده شده است. این تضمین می کند که از برچسب های HTML صحیح و نام کلاس برای توسعه استفاده می شود. یادداشت های استفاده را می توان در صورت لزوم ارائه کرد. یک مثال عالی در این مورد در سیستم شبکه است ، جایی که داشتن اطلاعات در مورد کلاس های ستون ، ستون های جبران کننده و غیره مفید است.
مرحله 18
در منبع ، همچنین متوجه خواهید شد که عنوان دارای انتخابگر Jump to است. کتابخانه های الگو می توانند طولانی باشند ، بنابراین مهم است که اعضای تیم شما بدون نیاز به پیمایش در کل صفحه ، بتوانند به سرعت به یک عنصر بپردازند. نمونه ای از این را می توان در کتابخانه الگوی A List Apart و کتابخانه الگوی آنا دبنهام یافت.
خودشه! اکنون می دانید که چگونه با کتابخانه های الگو کار کنید: تمام کاری که اکنون باید انجام دهید این است که از کتابخانه خود الهام بگیرید.من به شدت توصیه می کنم از منابع راهنمای سبک وب سایت توسط آنا دبنهام و برد فراست دیدن کنید ، جایی که می توانید مقالات ، ابزارها و مثالهای عالی را پیدا کنید.
کلمات: ریچارد چایلد
ریچارد چایلد مشاور طراحی است. این مقاله در اصل در شماره 272 مجله نت منتشر شده است.
این را دوست داشتید؟ اینها رو بخون!
- چرا شما باید CSS خود را با کتابخانه های الگو مدیریت کنید
- نحوه ساخت برنامه: این آموزش های عالی را امتحان کنید
- نرم افزار رایگان طراحی گرافیک در حال حاضر در دسترس شماست!
