رسم شکل ها (Shape) یکی از رایج ترین انواع لایه ها در طراحی های رابط کاربری در نرم افزار Sketch هستند. می توانید اشکال از پیش ساخته شده را به محیط Sketch اضافه و ویرایش کنید، یا با استفاده از ابزار Vector، شکل های خود را ایجاد کنید. در این مرحله از آموزش کار با نرم افزار طراحی رابط کاربری Sketch به شما خواهیم گفت که چگونه شکل ها را به طراحی خود اضافه کنید و روی آن ها تغییرات انجام دهید.
اضافه کردن اشکال
یکی از رایج ترین کارهایی که در طراحی رابط کاربری پیش می آید، اضافه کردن Shape جدید به محیط sketch شماست.
نحوه اضافه کردن اشکال از پیش ساخته شده
برای افزودن یک Shape جدید، روی دکمه Insert در نوار ابزار Sketch یا درج آیتم در نوار منو کلیک کنید، گزینه Shape را انتخاب کنید و سپس نوع شکلی را که می خواهید به رابط کاربری خود در Sketch اضافه کنید انتخاب کنید. همچنین می توانید از میانبر های صفحه کلید زیر برای اضافه کردن برخی از اشکال از پیش ساخته استفاده کنید:
برای افزودن شکل خود، روی هر جایی از بوم یا تابلوی هنری خود کلیک کرده و بکشید. در حین کشیدن، ابعاد شکل را در کنار مکان نما خواهید دید. ⇧ را در حالی که روی shape کلیک کرده اید و آن را می کشید نگه دارید تا ارتفاع و عرض شکل شما برابر شود.
هنگام کلیک کردن، ⌥ را نگه دارید تا شکل خود را از مرکز آن بکشید (به جای بالا سمت چپ).
هنگامی که روی شکل کلیک می کنید، نوار Space را نگه دارید و بکشید تا مبدا شکل خود را بر خلاف اندازه آن تغییر دهید (اگر از جای اشتباه شروع کرده اید برای شما مفید است).
نحوه اضافه کردن اشکال با ابزار Pencil
کلید P را فشار دهید یا ابزار Pencil را از منوی Insert انتخاب کنید تا ابزار Pencil فعال شود. از آنجا می توانید هر شکلی را که دوست دارید بکشید. وقتی طراحی shape خود را در رابط کاربری مورد نظر تمام کردید، برنامه Sketch منحنی ها را صاف می کند و مسیری که ایجاد کرده اید را ساده می کند.
نحوه اضافه کردن اشکال از طریق کد SVG
میتوانید با کپی و چسباندن کد SVG در هر جایی از بوم رابط کاربری Sketch خود، لایههای شکل جدیدی ایجاد کنید.
ویرایش Shapes
هر شکلی که به طراحی ما اضافه می شود نیاز به ادیت کردن و سفارشی سازی ارد که در ادامه به بررسی کامل آن خواهیم پرداخت.
نحوه ویرایش اشکال در Inspector
هنگامی که یک شکل را انتخاب می کنید، گزینه هایی برای ویرایش آن شکل در Inspector خواهید دید. برای مثال، ابزار ستاره به شما امکان می دهد شعاع و تعداد نقاط آن را تنظیم کنید.
نحوه ویرایش گوشه های shape
روی یک مستطیل گرد کلیک کنید تا شعاع گوشه های آن در Inspector تنظیم شود.
شما می توانید بین گوشه های گرد و صاف انتخاب کنید و نحوه ترسیم گوشه های لایه را تغییر دهید. گوشه های صاف دارای تداوم انحنا هستند و به شما امکان می دهند “squircles” ایجاد کنید، شکلی که اپل در رابط های خود استفاده می کند.
نکته: وقتی در حالت ویرایش برداری هستید، میتوانید یک نقطه گوشه جداگانه را برای تنظیم شعاع یک گوشه انتخاب کنید.
نحوه flip کردن اشکال
با استفاده از دو دکمه در Inspector می توانید اشکال را به صورت افقی برگردانید. این دکمهها انتخاب میشوند (بنابراین میتوانید دوباره کلیک کنید تا تغییر را معکوس کنید) مگر اینکه شکل را صاف کنید و تغییرات را با استفاده از Layer > Combine > Flatten انجام دهید.
نحوه چرخش اشکال
چند راه برای چرخاندن Shape های رابط کاربری شما در برنامه Sketch وجود دارد. می توانید مقداری را بر حسب درجه در Inspector وارد کنید. این می تواند یک مقدار مثبت یا منفی برای چرخش به ترتیب در جهت عقربه های ساعت یا خلاف جهت عقربه های ساعت باشد.
یا می توانید شکل خود را انتخاب کنید و روی دکمه Rotate در نوار ابزار کلیک کنید. سپس روی هر جایی خارج از شکل خود کلیک کرده و بکشید تا آن را بچرخانید. برای تغییر محوری که شکل شما بر روی آن میچرخد، کافی است روی نقطهای که میخواهید به دور آن بچرخید، بر روی آن کلیک کنید و آن را در مرکز آن بکشید. برای تنظیم مجدد این، به سادگی شکل خود را دوباره انتخاب کنید.
در نهایت، با نگه داشتن ⌘ و کشیدن یکی از دستگیرههای انتخاب آن، میتوانید به سرعت هر شکلی را که انتخاب کردهاید بچرخانید.
نگه داشتن ⇧ هنگامی که یک شکل را می چرخانید، این کار را با افزایش 15 درجه انجام می دهد. شما می توانید این تغییرات را انجام دهید و با صاف کردن شکل (Layer > Combine > Flatten) مقدار چرخش را به 0 درجه تنظیم کنید.
نحوه ویرایش اشکال در حالت برداری
برای ویرایش یک شکل در حالت ویرایش برداری، روی آن دوبار کلیک کنید یا آن را انتخاب کنید و کلید Enter را فشار دهید. وقتی وارد حالت ویرایش برداری میشوید، نقاط دایرهای را میبینید که توسط مسیرهایی به هم متصل شدهاند. روی هر یک از نقاط دایره ای کلیک کنید و آنها را بکشید تا شکل یک لایه تغییر کند.
برای افزودن یک نقطه جدید، ماوس را روی مسیری بین دو نقطه ببرید و برای درج نقطه جدید کلیک کنید. برای حذف یک نقطه، آن را انتخاب کرده و کلید Backspace را فشار دهید.
بسته به نوع نقطه ای که آن ها را به هم متصل می کند، مسیرهای بین نقاط مختلف شکل شما می تواند خطوط مستقیم یا منحنی باشد. روی نقطه ای که مسیرهای مستقیم را به هم متصل می کند دوبار کلیک کنید تا آن را به یک مسیر منحنی تغییر دهید.
هنگامی که یک نقطه را برای ایجاد یک مسیر منحنی تغییر می دهید، می توانید از دو نقطه کنترل دسته که به نظر می رسد برای ویرایش خود منحنی استفاده کنید.
صاف کردن شکل خود (با انتخاب ابزار Layer > Combine > Flatten Flatten) نقاطی را در هر انتهای منحنی ایجاد می کند.
نحوه ویرایش اشکال با استفاده از ابزار Transform
برای استفاده از ابزار Transform، یک یا چند شکل را انتخاب کنید و به Layer > Transform > Transform بروید. یا می توانید از میانبر صفحه کلید ⌘ ⇧ T استفاده کنید. شما همچنین می توانید ابزار Transform را از طریق View > Customize Toolbar به نوار ابزار خود اضافه کنید.
ابزار Transform نقاطی را به هر گوشه از Shape شما و همچنین نقاط بین هر گوشه رابط کاربری شما در برنامه Sketch اضافه می کند. روی یک نقطه کلیک کنید و آن را بکشید تا Shape شما تغییر شکل دهد و کج شود.
اگر روی نقطه ای بین دو گوشه کلیک کرده و بکشید، هر دو گوشه را همزمان جابه جا می کنید.
هنگامی که روی یک نقطه گوشه کلیک کرده و بکشید، گوشه مقابل به طور همزمان در جهت مخالف حرکت می کند. برای کنترل فقط یک گوشه، ⌘ را نگه دارید.
نحوه ویرایش اشکال با استفاده از ابزار Scissor
می توانید از ابزار Scissor برای جدا کردن مسیرها از اشکال استفاده کنید. برای انجام این کار، شکل مورد نظر برای ویرایش را انتخاب کنید، ابزار را از طریق Layer > Path > Scissors فعال کنید (همچنین می توانید آن را از طریق View > Customize Toolbar… به نوار ابزار خود اضافه کنید) و روی هر یک از مسیرهایی که شکل شما را تشکیل می دهند کلیک کنید. آن ها را حذف کنید.
وقتی کارتان تمام شد، خارج از شکل کلیک کنید یا Enter یا Esc را فشار دهید.
نحوه ویرایش اشکال با ابزار Rotate Copies
ابزار Rotate Copies یک Shape را می گیرد و کپی هایی از آن را حول یک نقطه از رابط کاربری شما در برنامه Sketch می چرخاند. برای استفاده از آن، یک شکل را انتخاب کنید و به Layer > Path > Rotate Copies بروید (همچنین می توانید یک دکمه برای آن از طریق View > Customize Toolbar…) به نوار ابزار خود اضافه کنید. از آنجا، تعداد کپی هایی را که می خواهید ایجاد کنید انتخاب کنید و روی OK کلیک کنید.
از دسته ای که به نظر می رسد برای تنظیم دقیق نحوه قرارگیری کپی ها استفاده کنید. وقتی کارتان تمام شد، Esc یا Enter را فشار دهید.
توجه: در نسخه 53.1 برنامه Sketch و نسخه های قبلی، Rotate Copies شکل ترکیبی از کپی های شما ایجاد می کند (مانند عملیات بولی). برای تبدیل آن به لایه های جداگانه، از Layer > Combine > Break Apart استفاده کنید.
شاید در ابتدا که وارد محیط نرم افزار طراحی رابط کاربری Sketch می شوید، کمی سردرگم باشید زیرا پنل های آن خالی از لایه ها و عناصر طراحی هستند و کار با آن ها در ابتدا کمی گیج کننده است. ما در سری آموزش های اسکچ به شما می آموزیم که چگونه از تمام قابلیت های آن به نحو احسن استفاده کنید. در پنل لایه ها، تمام صفحات، تابلو های هنری و لایه های رابط کاربری خود را خواهید یافت. از این پنل می توانید همه این ها را دوباره سفارشی کنید و نام آن ها را تغییر دهید.
برای مخفی کردن یک لایه، نشانگر ماوس را روی نام آن لایه در لیست لایه ها نگه دارید و روی نماد چشمی که ظاهر می شود کلیک کنید. اگر قبل از اینکه ماوس را نگه دارید نماد چشمی در کنار یک لایه پنهان شود، لایه از قبل پنهان شده است. همچنین میتوانید از ⌘ ⇧ H برای تغییر حالت پنهان کردن و نمایش لایهها استفاده کنید.
برای قفل کردن یک لایه، کلید ⌥ را نگه دارید، نشانگر را روی یک لایه نگه دارید و روی نماد قفل کردن/باز کردن خطکش هایی که ظاهر میشود کلیک کنید. روی قفل کلیک کنید تا قفل آن باز شود. یا از کلید های ⌘ ⇧ L برای روشن و خاموش کردن قفل لایه استفاده کنید. وقتی یک لایه را قفل می کنید، نمی توانید آن را ویرایش یا جابجا کنید. از کلیدهای میانبر استفاده های بسیاری در بخش کار با لایه های Sketch برای طراحی رابط کاربری می شود.
نحوه جستجو در پنل لایه ها
اگر طراحی رابط کاربری شما شامل لایههای زیادی است و کار با لایه ها در نرم افزار Sketch برایتان دشوار شده، میتوانید از نوار جستجو Search Layer List در بالای فهرست لایهها برای پیدا کردن یک نوع لایه خاص استفاده کنید. همچنین می توانید از نوار جستجو برای پیدا کردن یک لایه با نام آن استفاده کنید.
نکته: لایه هایی با نام طولانی در لیست لایه ها کوتاه می شوند. ماوس را روی هر نام لایه کوتاه شده نگه دارید تا آن را به طور کامل در یک راهنمای ابزار ببینید.
نحوه پیمایش در لیست لایه های رابط کاربری
در بخش کار با لایه ها در فایل رابط کاربری خود در نرم افزار Sketch برای پیمایش در پنل لایه ها از میانبر های زیر استفاده کنید:
⏎: وارد یک گروه شوید
Esc: از یک گروه خارج شوید
⇥: لایه یا گروه بعدی را انتخاب کنید
⇧⇥: لایه یا گروه قبلی را انتخاب کنید
توجه: هنگام پیمایش لایههای درون یک گروه، ⇥و⇧⇥ فقط لایههای درون آن گروه را انتخاب میکنند.
در مقاله قبل درباره قابلیت های بوم Sketch برای طراحی رابط کاربری به شما آموزش دادیم. در این مقاله به بررسی جعبه ابزار و نوار بررسی عناصر می پردازیم. جعبه ابزار جایی است که میانبر های سریع ابزار ها و اقدامات مهمی را که در نرم افزار Sketch از آن ها استفاده می کنید، پیدا خواهید کرد. شما می توانید نوار ابزار را با دکمه های مختلف مطابق با نیاز خود سفارشی کنید. به سادگی روی آن کنترل هایی اعمال کنید و با گزینه View > Customize Toolbar آن را سفارشی کنید. در ادامه خلاصه ای از نوار ابزار پیش فرض آمده است.
عناصر جعبه ابزار Sketch
سوئیچ بوم و عناصر به شما امکان می دهد به سرعت بین برگه View Components و بوم رابط کاربری خود جابه جا شوید.
گزینه Insert یا افزودن به شما امکان دسترسی سریع به لایه های مختلفی را می دهد که می توانید به Canvas خود اضافه کنید.
Create Symbol یا ایجاد نماد در جعبه ابزار Sketch شما، گروه یا لایه ای را که انتخاب کرده اید به یک نماد قابل استفاده مجدد تبدیل می کند. هنگام ایجاد یک نماد، می توانید نام و گزینه های صفحه بندی را برای آن انتخاب کنید.
گزینه های تعبیه شده در این بخش یعنی Forward (فرستادن لایه به جلو)، Backward (فرستادن لایه به پشت)، Group (گروه بندی کردن لایه ها) و Ungroup (از حالت گروه خارج کردن لایه ها) به شما کمک می کند لایه های خود را سازماندهی کنید و آن ها را در لیست لایه ها جابجا کنید.
ابزار ویرایش به شما امکان دسترسی سریع به اقدامات رایج برای ادیت لایه ها را می دهد.
جمع، تفریق، ضرب و تقسیم در جعبه ابزار به شما امکان دسترسی سریع به چهار عملیات محاسباتی نرم افزار Sketch را می دهد.
با این عنصر می توانید تغییراتی را مشاهده کنید که چگونگی نمایش طراحی های شما روی بوم و اینکه روی چه چیزی تمرکز میکنید را در بر دارد.
این بخش پیش نمایش طرح یا نمونه اولیه شما را در پنجره preview نشان می دهد.
ویژگی Collaborate به شما امکان می دهد یک سند را در یک محیط کاری یا Workspace آپلود کنید.
نوتیفیکیشن ها به شما اطلاع میدهند که بهروزرسانیهای کتابخانه یا عناصر مفقود در سندتان را پیدا کنید. نماد notification تا زمانی که اعلان های جدیدی دریافت نکنید ناپدید می شود.
شما همچنین می توانید با فشار دادن ⌘ ⌥ T یا با انتخاب View > Show/Hide Toolbar در نوار منو، بین پنهان کردن و نمایش جعبه ابزار Sketch جابه جا شوید. استفاده از جعبه ابزار در هر نرم افزار طراحی بسیار ضروری است و باعث راحتی کار در محیط آن نرم افزار می شود. در واقع نرم افزار های طراحی رابط کاربری برای سرعت بخشیدن به کار طراحان، جعبه ابزار ها را در بهینه ترین حالت ممکن ارائه می دهند.
حال که آموختید هر عنصر در جعبه ابزار Sketch چه ویژگی هایی دارد و قابلیت های آن چگونه است، بیایید به بررسی نوار ابزار Inspector که مختص نظارت بر عناصر قابل استفاده در بوم رابط کاربری شماست، بپردازیم.
نوار نظارت بر عناصر Sketch
در نوار Inspector، تنظیمات هر لایه ای را که انتخاب کرده اید، یا کنترل های ابزاری که استفاده می کنید را پیدا خواهید کرد. Inspector این کنترل ها و تنظیمات را بر اساس آنچه انتخاب کرده اید یا انجام می دهید، پنهان کرده و یا نشان می دهد. تقریبا هر مقدار دهی که بخواهید را می توانید به عنصر مورد نظر خود در نوار ابزار inspector بدهید و طراحی خود را انجام دهید.
گزینه های ترازبندی وقتی دو یا چند لایه را انتخاب می کنید، فعال می شوند.
ویژگی های مربوط به لایه این کنترلها به شما امکان میدهند که موقعیت، اندازه و چرخش لایهها را تغییر دهید و آن ها را برگردانید.
Radius: می توانید گوشه های عناصر خود را گرد یا صاف به صورت مستطیل یا مربع انتخاب کنید.
تنظیمات بخش تغییر اندازه: اگر لایه ای را در یک گروه یا Artboard انتخاب کرده باشید، این کنترل ها را خواهید دید.
نمونه سازی اولیه (prototyping): این کنترلها به شما امکان میدهند Artboard را به نمونههای اولیه خود اضافه کنید، تعاملات خود را متحرک کنید و موقعیت یک لایه را هنگام پیمایش ثابت کنید.
ظاهر: میتوانید از کنترلهای Appearance در جعبه ابزار Sketch برای ایجاد، بهروزرسانی یا جدا کردن استایل های لایه خود استفاده کنید.
استایل دادن: ابزار Styling به شما امکان میدهد تا نحوه نمایش لایههای خود را کنترل کنید. برای افزودن یک استایل جدید، روی دکمه افزودن در کنار عنوان بخش برای سبکی که میخواهید استفاده کنید کلیک کنید. وقتی استایل ها را اضافه کردید، می توانید با لغو انتخاب کادر کنار آن ها، آن ها را پنهان کنید. برای حذف کلی یک استایل، کادر انتخاب آن را بردارید و روی نماد سطل زباله که ظاهر میشود کلیک کنید.
خروجی گرفتن: سریع ترین راه برای Export کار خود از نرم افزار Sketch این است که گزینه Share > Export… را از جعبه ابزار یا منوی بالا انتخاب کنید، یا ⌘⇧E را فشار دهید تا کادر Export ظاهر شود. مواردی را که می خواهید از آن ها خروجی بگیرید، انتخاب کنید سپس روی Export کلیک کنید تا کادر ذخیره MacOS باز شود.
امیدواریم این آموزش برای شما مفید واقع شود. اگر طراحی رابط کاربری را شروع نکرده اید از همین امروز اصول طراحی را یاد بگیرید و شروع به خلق UI های فوق العاده کنید و روز به روز به تجربه های طراحی خود اضافه کنید.
دیگر وقت آن رسیده که ایده های خود را زنده کنید. ایده هایی که برای رابط کاربری (UI) در نظر دارید همیشه در ذهن نمی مانند و امکان فراموش کردن آن ها بسیار زیاد است. با پیاده سازی و ایجاد نمونه اولیه از ایده خود در نرم افزار های رابط کاربری می توانید از فراموش شدن آن ها جلوگیری کنید و ایده های خود را به مراتب گسترش دهید. نرم افزار طراحی رابط کاربری اسکچ (Sketch) برای سیستم عامل Mac است. با مطالعه این مقاله ویژگیهای بوم در نرم افزار اسکچ (Sketch) را برای طراحی رابط کاربری بیاموزید.
بوم (Canvas) جایی است که شما طرح های خود را ایجاد می کنید. بوم ها در طراحی رابط کاربری بی نهایت انعطاف پذیر هستند، بنابراین می توانید هر طور که دوست دارید المان ها را تنظیم کنید و مستقیماً روی خود Canvas کار کنید بدون اینکه نگران کمبود فضا در Sketch باشید. اگر ترجیح می دهید در یک قاب ثابت کار کنید، می توانید Artboards را به بوم خود اضافه کنید.
نحوه زوم و پیمایش کردن در بوم Sketch
میتوانید دکمه فاصله را نگه دارید و برای حرکت در اطراف بوم کلیک کنید و بکشید، یا اگر هیچ لایهای را انتخاب نکردهاید، از کلید های جهتنما استفاده کنید. چند راه برای بزرگنمایی و کوچکنمایی بوم در طراحی رابط کاربری در نرم افزار Sketch وجود دارد:
کلید ⌘ را نگه دارید و از اسکرول ماوس خود استفاده کنید. وقتی به سمت بالا اسکرول میکنید، بهطور پیشفرض وارد آن میشوید، اما میتوانید در هر زمانی با علامت زدن کادر انتخابی Invert scroll direction در برگه Canvas در تنظیمات خود، این مورد را تغییر دهید.
از ژست زوم کردن با انگشتان روی صفحه نمایش یا تاچ پد استفاده کنید یا از منوی زوم در نوار ابزار استفاده کنید.
از ابزار Zoom با فشار دادن کلید Z استفاده کنید و یا برای بزرگنمایی کلیک کنید یا ⌥ را نگه دارید و برای بزرگنمایی کلیک کنید. با فعال بودن ابزار Zoom، میتوانید روی یک المان انتخاب شده کلیک کرده و بکشید تا در یک منطقه خاص بزرگنمایی کنید.
همچنین چند میانبر زوم در این نرم افزار وجود دارد:
بزرگنمایی: ⌘ و +
کوچکنمایی: ⌘ و –
زوم تا 100%: ⌘ و 0
بزرگنمایی کنید تا کل بوم را ببینید: ⌘ و 1
بزرگنمایی در لایه(های) انتخاب شده: ⌘ و 2
در مرکز قرار دادن لایه(های) انتخاب شده روی بوم: ⌘ و 3
نحوه نمایش پیکسل ها روی بوم
در طراحی رابط کاربری در نرم افزار Sketch به طور پیش فرض، بوم را در حالت برداری مشاهده خواهید کرد. رزولوشن آن مستقل است و می توانید برای کار در هر سطحی از جزئیات، بی نهایت زوم کنید. این اپلیکیشن مخصوص مک بوک لایهها را در نقاطی اندازهگیری میکند که در آن یک نقطه برابر با یک پیکسل در بوم است و زمانی که شما فایل را Export میکنید، میتوانید المان های به کار برده شده را با وضوحهای مختلف مقیاس کنید.
اگر روی طراحی رابط کاربری کار میکنید که در آن دیدن تک تک پیکسلها در بوم Sketch مهم است، به مسیر View > Canvas > Show Pixels on Zoom بروید یا ⌃P را فشار دهید تا Pixel Zoom فعال شود و وقتی 100% بزرگنمایی میکنید، پیکسلهای جداگانه را مشاهده می کنید.
نحوه نمایش گرید پیکسلی
به مسیر View > Canvas Canvas > Show Pixel Grid on Zoom بروید، یا ⌃X را فشار دهید تا هر لبه لایههای خود را که با Pixel Grid همسو نمیشوند، پس از بزرگنمایی 600 درصدی، آن نقاط را پیدا کنید.
نحوه استفاده از خط کش ها در بوم Sketch
بوم Sketch خط کش ها را به طور پیش فرض برای طراحی رابط کاربری پنهان می کند، اما می توانید با انتخاب View > Canvas > Show Rulers یا فشار دادن ⌃R، آن ها را نشان دهید. شما می توانید روی خط کش های خود کلیک کرده و بکشید تا مبدا صفر آن ها را در هر جایی که دوست دارید روی بوم تنظیم کنید. برای قفل کردن آن ها در جای خود، روی آیکون قفل در گوشه سمت چپ کلیک کنید. برای بازنشانی مبدا خطکش ها، View > Canvas > Reset Ruler Origin را انتخاب کنید.
نحوه ایجاد راهنما (Guidelines)
برای ایجاد راهنما و توضیح طراحی رابط کاربری خود در بوم Sketch می توانید روی هر جایی از خط کش کلیک کنید. راهنماها زمانی قابل مشاهده خواهند بود که خطکشهای شما در صفحه باشند و اگر لایهای را روی بوم خود حرکت دهید، به نزدیکترین راهنما میچسبد.
با کلیک کردن و کشیدن یک راهنما در داخل یک خط کش می توانید راهنما را حرکت دهید. برای حذف کامل آن، آن را به سمت راست به سمت لیست لایه یا Inspector بکشید تا مکان نما تغییر کند. خواهید دید که راهنما ناپدید می شود.
برای حذف همه راهنماهای خود با هم، روی یکی از خط کش ها Control را فشار داده و کلیک کنید و به ترتیب Remove All Vertical Guides یا Remove All Horizontal Guides را انتخاب کنید.
نحوه ایجاد گرید در بوم Sketch
برنامه طراحی رابط کاربری Sketch از دو نوع شبکه در بوم خود پشتیبانی می کند. یک شبکه منظم (مربع) و یک شبکه طرح بندی یا لی اوت. در صورت نیاز می توانید هر دو را همزمان مشاهده کنید.
برای تنظیم یک شبکه مربعی، مسیر View > Canvas > Show Grid را انتخاب کنید یا ⌃G را فشار دهید. برای تغییر تنظیمات آن (اندازه سلولها، تعداد دفعات ظاهر شدن خطوط ضخیمتر و رنگ خطوط)، View > Canvas > Grid Settings را انتخاب کنید یا ⌃⌘G را فشار دهید.
نکته: برای پنهان کردن و نمایش شبکههای معمولی، ⌃G را روی صفحهکلید فشار دهید
شبکه های لی اوت
برای راهاندازی یک شبکه طرحبندی، مسیر View > Canvas > Layout Settings را انتخاب کنید یا ⌃⌘L را فشار دهید و از گزینههای ظاهر شده برای انتخاب تعداد ستونها و ردیفها، عرض، عرض حفره ها و رنگ مناسب استفاده کنید.
نکته: برای پنهان کردن و نمایش شبکههای لی اوت، ⌃L را روی صفحهکلید فشار دهید.
شما فقط میتوانید گرید ها را در Artboards یا در Canvas اعمال کنید، اگر هیچ Artboard روی آن وجود نداشته باشد. میتوانید گزینههای طرحبندی را برای چندین Artboard به طور همزمان ویرایش کنید. هنگامی که یک گرید لی اوت مانند را تنظیم میکنید، لایهها روی آن میچسبند و راهنمای هوشمند برنامه Mac را نادیده میگیرند.
نحوه عملکرد Snapping و Smart Guides در نرم افزار Sketch
همانطور که لایهها و آیکون ها را روی بوم رابط کاربری خود جابهجا میکنید یا درج میکنید، برنامه Sketch بهطور خودکار اندازهگیریها را در برابر لایههای مجاور به شما نشان میدهد، و همچنین راهنما های هوشمندی را که به شما کمک میکنند به مرکز یا لبههای لایه نزدیک بچسبید، در اختیارتان قرار می دهد.
اگر دو یا چند لایه در کنار یکدیگر دارید، و یکی دیگر را به آن ها نزدیک می کنید، Sketch فاصله آن ها را هایلایت می کند و به طور خودکار آن لایه را متوازن می کند تا همه آن ها به طور مساوی توزیع شوند.
وقتی اندازه یک لایه را تغییر میدهید، اگر لایههای مشابهی در این نزدیکی وجود داشته باشد، Sketch به شما نشان میدهد که آیا آن ها عرض یا ارتفاع مشابهی دارند یا خیر. این همچنین زمانی کار میکند که اندازه لایهای را تغییر میدهید که روی لایه دیگری همپوشانی دارد.
در نهایت، وقتی لایههای متنی را وارد یا جابهجا میکنید، به ارتفاع یا عرض لایههای مجاور میچسبند. با تنظیم ارتفاع یک لایه متن، کادر محدود کننده ای که ایجاد شده است به آخرین خط متن میچسبد.
نحوه استفاده از صفحات در بوم Sketch
شما می توانید هر تعداد صفحاتی را که دوست دارید در فایل Sketch خود استفاده کنید. آن ها برای سازماندهی کار شما مفید هستند، به عنوان مثال کاربرد آن برای ایجاد یک صفحه جدید برای هر بخش از تحویل پروژه رابط کاربری یا تقسیم طراحی های پیچیده به چندین صفحه با اختصاص دادن ویژگی های یک صفحه به هر منطقه و موارد دیگر کاربرد دارد. استفاده از چندین صفحه همچنین می تواند به بهبود عملکرد برنامه Sketch با اسناد طراحی UI پیچیده کمک کند.
برای ایجاد یک صفحه جدید، روی دکمه افزودن (به شکل مثبت) در بالای لیست لایه کلیک کنید و به صفحه جدید خود یک نام بدهید.
روی صفحه ای که می خواهید در لیست لایه ها پیمایش کنید، کلیک کنید تا به آن بروید یا Fn↑ یا Fn↓ را فشار دهید تا بین آن ها پرش کنید. همچنین میتوانید فهرست صفحات خود را با استفاده از chevron جمع کنید و به جای آن از یک منوی کشویی برای پیمایش بین آن ها استفاده کنید.
شما همچنین میتوانید صفحات را بکشید تا ترتیب آن ها را تغییر دهید، یا روی یک صفحه کلیک کنید تا آن را کپی یا حذف کنید. پس از ایجاد صفحات، می توانید آرت بورد ها یا لایه های موجود در لیست لایه ها را از یک صفحه به صفحه دیگر در پنل طراحی رابط کاربری صفحات بکشید.
نحوه استفاده از Artboards برای طراحی UI در Sketch
استفاده از Artboard کاملاً اختیاری است، اما برای ایجاد قابهای ثابت روی بوم خود برای طراحی رابط کاربری در Sketch مفید است. اگر برای دستگاه یا اندازه صفحهنمایش خاصی طراحی میکنید این بخش بسیار مفید هستند.
برای ایجاد آرت بورد مسیر Insert > Artboard را از نوار ابزار یا نوار منو بالا انتخاب کنید، یا A را فشار دهید. میتوانید روی Canvas کلیک کرده و بکشید تا یک Artboard با اندازه سفارشی ایجاد کنید، یا یک آرت بورد از پیش تنظیم شده از Inspector انتخاب کنید.
برای تنظیم یا تغییر جهت Artboard، آن را در Canvas یا در Layer List انتخاب کنید، سپس نماد افقی یا نماد عمودی را در کنار ابعاد آن در Inspector انتخاب کنید. همچنین میتوانید هنگام انتخاب پیشتنظیم Artboard، جهتگیری را با استفاده از همان نمادها انتخاب کنید.
برای ذخیره یک Artboard با اندازه سفارشی به عنوان یک قالب از پیش تنظیم شده، روی دکمه Add در پایین Inspector کلیک کنید و نامی برای آن بگذارید. پس از ایجاد یک Artboard، میتوانید ⌘D را فشار دهید تا آن را کپی کنید.
در این آموزش برنامه طراحی رابط کاربری یا UI به نام Sketch راجع به قابلیت هایی که در بوم این برنامه قابل اجرا بود، صحبت کردیم. امیدواریم این آموزش برای شما مفید واقع شده باشد.
گرید یک سیستم برای سازماندهی محتوای صفحه و ایجاد هماهنگی و نظم است. طراحی گرید، ساختار اساسی یا اسکلت رابط کاربری شما را تشکیل می دهد. طراحان از گرید های وب سایت برای تصمیم گیری در طراحی و ایجاد تجربه کاربری خوب استفاده می کنند. یادگیری شبکه یا گرید ها در طراحی وب، از جمله انواع مختلف لی اوت ها و در نهایت نحوه و زمان استفاده از آن ها، مجموعه مهارت های ما را به عنوان طراح وب سایت تقویت می کند و بر هر طراحی سایت موبایل یا دسکتاپی که ایجاد می کنیم تأثیر می گذارد.
هنگامی که فرایند استاندارد طراحی وب سایت را به چند مرحله تقسیم می کنید، که در بیشتر موارد شامل لی اوت ها و وایر فریم ها و نمونه سازی اولیه است، در واقع متوجه شوید که هر صفحه وب از مربع و مستطیل ساخته شده است. در نهایت صرف نظر از شکل فردی هر عنصر، آن ها در یک گرید گسترده قرار گرفته اند و در واقع انواع متعددی از طرح بندی گرید وجود دارد که به زودی آن ها را بررسی کرده و بهتر می شناسیم.
در طراحی وب از گرید ها برای راهنمایی طراحان در مورد نحوه و مکان قرار دادن عناصر در صفحه استفاده می شود. این دستورالعمل ها margin ها، فاصله ها و ستون ها را به طور جمعی ترکیب می کنند و یک چارچوب جامع و سازگار برای محتوای صفحه ارائه می دهند. این که آیا خطوط گرید در خود وب سایت واقعی قابل مشاهده هستند یا خیر، ساختار و چارچوب زیرین آن ها به طراحان کمک می کند تا نه تنها کل لی اوت صفحه، بلکه نسبت ها و تناسب های بین هر عنصر را نیز مدیریت کنند.
اهمیت گرید ها در طراحی
از نظر نحوه استفاده از آن در فرایند طراحی وب، سیستم گرید به تراز کردن عناصر صفحه بر اساس ستون ها و ردیف های متوالی کمک می کند. هنگامی که این چارچوب ساختار یافته را در اختیار داشتیم، می توانیم متن، تصاویر و در واقع هر عنصر قابل طراحی را به طور منظم در سایت قرار دهیم.
هنگام طراحی برای وب و تلفن همراه، هدف صفحات یا رابط هایی که با آن ها طراحی می کنیم ایجاد مسیر های مختلف کاربر است. از آنجا که مسیر های کاربر اغلب دارای چندین صفحه یا پنجره هستند که ترکیب ها و لی اوت های مشابهی را تکرار می کنند، گرید ها روند توسعه وایر فریم ها، قالب ها یا طرح بندی های استاندارد شده برای صفحات مشابه را آسان می کنند.
شبکه ها به تقسیم صفحات به صورت افقی و عمودی، با استفاده از سطر ها و ستون ها کمک می کنند. سیستم های گرید به عنوان یک رویکرد سیستماتیک عمل می کنند که به طراحان اجازه می دهد تا عناصر را به صورت سازماندهی شده طراحی کنند و یک رویکرد ماژولار برای طراحی اجزای سایت برای چندین صفحه یا لی اوت ارائه می دهند. گرید ها همچنین مجموعه ای ثابت از واحد های اندازه گیری را تعیین می کنند که اندازه، فاصله و تنظیمات را تعیین می کند که هر عنصر طراحی باید از آن ها پیروی کند.
مفهوم لی اوت گرید زمانی به وجود می آید که از طرح های چاپی در زمینه تایپوگرافی با هدف تنظیم دست خط روی کاغذ، به ویژه کتاب ها و روزنامه ها استفاده می شود. با توجه به آنچه گفته شد، بسیاری از طراحی های مدرن وجود دارد که به یک لی اوت مبتنی بر گرید بستگی دارد و طبق آن پیشرفت می کند. این شامل طراحی وب، طراحی روابط و به ویژه طراحی ریسپانسیو است.
قبل از اینکه دریابیم چگونه و چرا لی اوت مبتنی بر گرید به عنوان یک دارایی ارزشمند برای فرایند طراحی ما به عنوان سازندگان وب است، بیایید بیشتر به اجزای ملموس که یک سیستم گرید را تشکیل می دهند، بپردازیم.
بهترین روش های استفاده از گرید در طراحی وب
اصطلاحات و مفاهیم زیادی برای آشنایی و درک در زمینه طراحی وب وجود دارد، مخصوصا هنگامی که صحبت از نقش گرید ها در طراحی وب می شود. بین هر یک از اجزای متعددی که یک ساختار گرید را تشکیل می دهند، تنوع زیادی در انواع گرید ها و فرایند های فکری که برای انتخاب نوع شبکه بندی مناسب محتوا و طراحی شما پیش می رود و… چیز های زیادی برای استفاده وجود دارد.
1. آناتومی گرید خود را بشناسید
همه گرید های طراحی وب سایت، مهم نیست کوچک یا بزرگ یا ساده و یا پیچیده باشند، اجزای مشترکی دارند که آن ها را به عنوان لی اوت گرید تعریف می کند:
ستون ها
ستون ها بخش های عمودی هستند که ارتفاع محتوا را شامل می شوند و “بلوک های سازنده” گرید ها محسوب می شوند. ویژگی منحصر به فرد ستون ها این است که هرچه تعداد ستون ها در یک گرید بیشتر باشد، گرید شما انعطاف پذیر تر است. ما به زودی در این مورد عمیق تر بحث خواهیم کرد. عرض ستون ها همیشه به عهده طراح است، اما از نظر شیوه های استاندارد، تعداد ستون ها برای استفاده 12 ستون روی دسکتاپ، 8 ستون در تبلت و 4 ستون در تلفن همراه است. بیشتر گرید ها دارای عرض ستون 60-80 پیکسل هستند. عرض ستون یک عامل تأثیرگذار کلیدی بر عرض محتوای واقعی شما خواهد بود.
ردیف ها
همانطور که احتمالاً حدس زده اید، ردیف ها بخش های افقی یک گرید هستند. جالب است بدانید که طراحی وب اغلب نقش سطر ها در یک گرید را نادیده می گیرد.
ماژول ها
ماژول ها واحد های فضایی هستند که از تقاطع سطرها و ستون ها ایجاد می شوند. ماژول های محتوا، همانطور که اغلب به آن ها اشاره می شود، عناصر سازنده یک صفحه محسوب می شوند، زیرا هر عنصر طراحی (متن، تصاویر، دکمه ها و غیره) در ماژول های ایجاد شده توسط الگو های مستطیلی در یک گرید قرار می گیرد.
حفره ها
حفره ها خطوط بین ستون ها و ردیف ها هستند که هر یک از این واحد ها را از هم جدا می کند. اندازه حفره معمولی 20 پیکسل است. نقش حفره ها این است که بین ستون ها و ردیف ها فضای منفی (مهم نیست کوچک یا بزرگ) ایجاد کند. در ساده ترین حالت، حفره ها فضای بین ستون ها و فضای بین ردیف ها هستند. همچنین برای چیدمان masonry (جایی که عرض حفره یکی از مهم ترین جزئیات چیدمان است) بسیار مهم هستند.
مارجین ها
مارجین ها فضای منفی بین فرمت و لبه بیرونی محتوا هستند که می توانید آن را “حفره های بیرونی” نیز در نظر بگیرید. اندازه حاشیه ها معمولاً در 20-30 پیکسل در تلفن همراه است و بین دسکتاپ و تلفن همراه بسیار متفاوت است.
ممکن است کلمه مارجین (حاشیه) را از اصطلاحات HTML & CSS تشخیص دهید، وقتی که از حاشیه به عنوان یک ویژگی برای ایجاد فضای اطراف یک عنصر طراحی استفاده می شود. به خاطر داشته باشید که اندازه حاشیه بر اندازه محتوای کنار آن تأثیر نمی گذارد. این مورد به سادگی مقدار فضای اطراف عنصر را مشخص می کند که در زمینه گرید ها، به طور خاص به فضای بین فرمت و لبه بیرونی محتوا اشاره می کند.
2. لی اوت مناسب گرید را انتخاب کنید
گرچه طبق تعریف، اصطلاح گرید به معنای ساختاری کاملاً مربعی است، اما انواع فرعی گرید نیز وجود دارد که هر کدام موارد منحصر به فردی در طراحی وب دارند. بدون اینکه خودتان متوجه شده باشید انتخاب های طراحی شما تا کنون، مانند قرار گرفتن یا عرض محتوای وب سایت شما، می تواند به راحتی از طرز فکر شبکه بندی شما پیروی کند. همانطور که انواع مختلف گرید ها را مرور می کنیم، نمونه های طراحی گرید را که انواع گرید هایی را که در مورد آن ها بحث می کنیم، نشان خواهیم داد.
Block Grid: یک گزینه کلاسیک برای پست ها و مقالات تکی
گرید های بلوک همچنین می توانند به عنوان گرید های تک ستونی یا گرید های خطی نامیده شوند و ساده ترین ساختار گرید محسوب می شوند. گرید های بلوک از یک ستون واحد تشکیل شده اند و می توانند شامل یک عنصر واحد یا چند عنصر به صورت عمودی باشند که با حاشیه احاطه شده اند. با استفاده از اصطلاحاتی که قبلاً تعریف کردیم (“آناتومی یک گرید”) ، گرید های بلوک در اصل یک منطقه مستطیلی بزرگ هستند که بیشتر فضای داخل یک قالب را اشغال می کنند.
گرید های بلوک اغلب برای گرید های متن گسترده یا مداوم استفاده می شوند و اغلب می توانند در صفحات وبلاگ یا پست ها یافت شوند. نمونه دیگری که ممکن است با گرید های بلوک روبرو شوید، تصاویر بزرگ و عرض کامل، مانند تصاویر کاور یا تصاویر گرد شده است.
یکی از رایج ترین موارد استفاده ای که برای لی اوت گرید بلوک دیده ایم، صفحات تک پستی، در درجه اول برای مقاله یا پست های وبلاگ تکی است. همانطور که در تصویر بالا نشان داده شده است. الگوی تک پستی Elementor که در بالا نشان داده شده است با اعمال چندین عرض، فونت، همراه با عناصر بصری کلاسیک مانند تصاویر گرد و تقسیم کننده های شکل، همه این ها علیرغم وجود آن در “فقط” یک ستون، راهی پیدا می کند که یک صفحه تک ستونی را به همان اندازه متنوع و جالب جلوه دهد.
از منظری که ما آن را می بینیم، یکی از دلایل کلیدی که گرید های بلوک برای صفحات مقاله و پست های عمومی واحد بسیار مناسب هستند، این است که آن ها حالت خطی بودن برای خواندن یک داستان را در بر می گیرند. هنگامی که هدف شما این است که بازدیدکنندگان وب سایت از محتوای وب سایت شما یا صفحه درباره ما لذت ببرند، هر چه بیشتر تجربه کاربری برای خواندن عمودی و متمرکز را فراهم کنید، احتمال اینکه محتوای شما را بپذیرند بیشتر است.
Column Grid: تقسیم شده اما مساوی
گرید های ستونی از چندین ستون تشکیل شده اند که بیشتر برای سازماندهی عناصر متعدد استفاده می شوند. گرید های ستونی می توانند به اندازه دو ستون باشند، بدون محدودیت واقعی تعداد ستون ها. گفته می شود لی اوت استاندارد گرید در طراحی وب شامل شش، نه یا 12 ستون است. اما واقعاً این به عهده طراح است که تصمیم بگیرد چه تعداد ستون برای خود لازم می داند.
متن و تصاویر پس از قرار گرفتن در داخل یک ستون از خطوط جریان و خطوط عمودی ستون ها پیروی می کنند. عناصر طراحی را می توان در داخل یک ستون یا در دو یا چند ستون قرار داد تا تنوع لی اوت بصری ایجاد شود. فاصله بین ستون ها (حفره ها) باید متناسب و یکپارچه در کل صفحه باشد. در یک گرید ستونی متقارن همه ستون ها دارای عرض یکسانی است، در حالی که یک گرید نامتقارن دارای برخی از ستون های نسبتاً نازک تر یا گسترده تر از بقیه ستون ها است.
مثال بالا الگوی Elementor برای صفحه قیمت گذاری است. در حالی که صفحات قیمت گذاری را می توان به طرق بیشماری طراحی کرد، بسیار رایج است (مخصوصاً برای محصولات دیجیتال) دیدن یک جدول سه یا چهار ستونی در جایی در وسط صفحه که نشان دهنده گزینه های مختلف اشتراک محصول یا خدمات است.
از نظر منطقی این جداول مبتنی بر ستون نتیجه مستقیم زیر ساخت های سازگار و مبتنی بر گرید است که 3-4 ستون واضح و مختصر با حداقل مقدار متن را پوشش می دهد. یک گرید مبتنی بر ستون در اینجا مناسب ترین انتخاب است، زیرا وقتی صحبت از نوشتن یک صفحه قیمت گذاری می شود، در واقع می خواهید به هر برنامه ای که در حال پیاده سازی آن هستید، تا حد امکان وضوح بدهید. نباید حواس پرتی باشد، هیچ دخالتی وجود نداشته باشد، چیزی که چشم خواننده را از اطلاعات ضروری دور کند.
Modular Grid: تقارن کامل
شبکه های ماژولار از ستون ها و همچنین ردیف ها تشکیل شده است. آن ها اغلب با یک تخته شطرنجی مقایسه یا توصیف می شوند و می توانند برای ارائه بسیاری از موارد به طور همزمان برای دسترسی آسان بسیار موثر باشند. به طور معمول گرید های ماژولار در طراحی وب زمانی استفاده می شوند که چندین عنصر برای سازماندهی وجود داشته باشد و یک گرید ستونی که فقط بر ترازبندی/چینش عمودی تمرکز می کند، کافی نیست.
گرید های ماژولار نام خود را از داشتن ماژول هایی با اندازه یکسان (که قبلاً در مورد آن ها بحث کردیم) گرفته اند. موارد استفاده رایج از شبکه های ماژولار صفحه اصلی تلفن همراه است که مجموعه کامل برنامه ها را نشان می دهد یا وب سایت های تجارت الکترونیک که مجموعه ای از موجودی محصولات را در صفحات دسته بندی خود نمایش می دهند.
همانطور که در بالا نشان داده شد، شبکه های ماژولار به طور گسترده ای برای گالری های تصویر و لی اوت کارت ها استفاده می شوند، مانند یک گرید تصویر که انواع مختلفی از گزینه های کف سازی را که یک شرکت کفپوش می تواند ارائه دهد، به نمایش می گذارد. ویژگی منحصر به فرد این گالری تصاویر این است که با ویجت Elementor Pro Gallery ساخته شده است که منحصراً با طراحی مبتنی بر گرید کار می کند.
نوع گالری می تواند یک گرید توجیه شده (کاملاً ماژولار)، یا یک گرید masonry، یا یک گرید سلسله مراتبی باشد که به زودی در مورد آن بحث خواهیم کرد. علاوه بر گزینه های مختلف لی اوت گرید، ویژگی Pro Gallery دارای گالری چندگانه است که نما های مختلف گالری را امکان پذیر می کند. بازدیدکنندگان وب سایت می توانند کل گالری تصاویر را به طور همزمان مشاهده کنند یا بر اساس دسته بندی ها آن را فیلتر کنند. در هر صورت لی اوت گرید مبتنی بر هسته است.
یک گزینه دیگر برای یک گرید ماژولار می تواند یک صفحه بایگانی باشد که تصاویر کوچک پست های وبلاگ (یا مقالات) را نمایش می دهد. این امر با استفاده از ویجت Posts امکان نمایش کارت، تصاویر کوچک، عناوین، گزیده ها و تاریخ ها را ممکن می سازد. به خاطر داشته باشید که حتی اگر خود مربع های تصویر چندین خط متن در زیر خود داشته باشند، این یک شبکه ماژولار است زیرا هر کارت به طور کامل (تصویر کوچک، عنوان، توضیحات و تاریخ) همه در یک مستطیل با اندازه یکنواخت قرار می گیرند.
Hierarchical Grid: سازماندهی شده اما آزاد
گرید های سلسله مراتبی که می توان آن ها را “آزاد” نیز نامید، شبکه هایی هستند که عناصر آن ها “خود به خود” در بین ستون ها و ردیف های گرید قرار می گیرند. این بدان معناست که عرض ستون و ارتفاع ردیف در سراسر گرید متفاوت است. مثال بالا از سایت نمونه کارهای عکاسان مد، برای نشان دادن آثار خود یک گرید کامل را طراحی می کند: یک گرید آزاد که از تصاویر در هر ارتفاع استقبال می کند.
به این ترتیب نیازی به ادیت و برش تصاویر نیست تا از ارتفاع یکنواختی پیروی کنند. همچنین با گشت و گذار در گالری، همه چیز را جالب نگه می دارد، زیرا تنوع اشکال دارای روحیه ای پویا و جریان کاربر است. ناگفته نماند که اگر تصاویر خاصی وجود داشته باشد که عکاس می خواهد بیشتر از دیگران در گالری برجسته باشد، می تواند اندازه آن ها را بزرگ تر از سایرین انتخاب کند و کاربران را ترغیب می کند تا به عکس هایی که او بیشتر دوست دارد توجه بیشتری داشته باشند.
در این تمپلیت برای یک صفحه درباره ما، کل صفحه از یک گرید آزاد استفاده می کند که این نام برای لی اوت صفحه بسیار مناسب است، زیرا اندازه های مربع و مستطیل متعدد آزادانه هنگام پایین رفتن از صفحه قرار می گیرند. آنچه منحصر به فرد است این است که محتوای بالای صفحه کاملاً آزاد است، اما بخش های زیر صفحه به یک طرح سه ستونی به طور مساوی تقسیم می شود و در نهایت با یک لی اوت حتی دو ستونی ختم می شود. گرید های سلسله مراتبی قطعاً بهترین راه برای جالب نگه داشتن عناصر هستند.
3. حفظ اصول طراحی ریسپانسیو
هنگامی که یک صفحه یا سایت به صورت ریسپانسیو طراحی می شود، به این معنی است که لی اوت صفحه و محتوا با دستگاه ها و عرض مرورگر های مختلف سازگار است. از نظر لی اوت گرید، این بدان معناست که با تغییر اندازه صفحه، تعداد ستون ها و البته عرض آن ها نیز تغییر می کند.
اما یک تفاوت ذاتی بین گرید های معمول طراحی شده و گرید های ریسپانسیو وجود دارد: گرید های طراحی شده بر روی یک گرید پایه، ثابت می شوند، در حالی که گرید های ریسپانسیو سیال هستند، یعنی ستون های گرید می توانند مطابق با دید کاربر، مقیاس بندی و تغییر جهت دهند. با یک گرید ثابت، کوچک شدن اندازه صفحه نمایش شما را به نقطه شکست بعدی می رساند و حاشیه های جانبی به طور خودکار تا نقطه شکست بعدی کوچک می شوند.
یک گرید ریسپانسیو یا گرید سیال همانطور که انتظار می رود، چیزی است که عناصر در آن به طور پویا با کوچک شدن مرورگر/صفحه تغییر می کنند. گرید های ریسپانسیو به طور سیستماتیک محتوای شما را طوری تراز کرده و مرتب می کنند که سلسله مراتب اطلاعات آن ها را به صورت منطقی نشان دهد. این بدان معناست که با کوچک شدن viewport، بخش ها و محتوای گرید بر این اساس مقیاس بندی می شوند.
سال 2020 بسیار غیرقابل پیش بینی بود زیرا کووید جهان را فرا گرفت و بدون استثنا، هر صنعتی به هر طریقی تحت تأثیر آن قرار گرفت. اما ما از طراحان برتر در استودیو های UX پرسیدیم که انتظار دارند ترند های طراحی رابط کاربری در سال 2021 چگونه باشد. امسال ظاهراً مردم در زمینه ارائه چیزی که کاملاً بر جنبه های بصری تمرکز دارد، کند شده اند. در بسیاری از مقالات مرتبط مواردی ذکر شده است که در حال حاضر سه سال است که رواج داشته است. قصه گویی، dark mode، طراحی اصولی، تصاویر منحصر به فرد و تایپوگرافی جسورانه، عناصر تعیین کننده در پلتفرم های دیجیتال باقی خواهند ماند.
اما از آنجا که این عناصر چند سالی است در روند کار هستند، دیگر نمی توان گفت که آن ها ترند طراحی رابط کاربری هستند، بلکه به نوعی دانش عمومی هستند. به همین ترتیب ما از دکمه ها به عنوان ترند های مداوم در سیستم عامل ها یاد نمی کنیم. بنابراین بیایید خلاصه ای از محبوب ترین ترند های رابط کاربری 2020 را بررسی کنیم.
1. تصویرسازی و انیمیشن منحصر به فرد
تصاویر دیجیتال، دو بعدی یا سه بعدی و سفارشی و فرم های رایگان، عناصر بدون تراز، اجزاء و عدم تقارن گسترده نه تنها به پلتفرم ها کمک می کند تا از حالت کلی متمایز شوند، بلکه محیطی دوستانه و دعوت کننده را ایجاد می کنند که تجربه بهتری را برای کاربران تضمین می کند. علاوه بر این برای زیبا تر جلوه دادن این صفحات، این تصاویر اغلب با طراحی موشن پیچیده زنده می شوند.
این پویایی باعث جلب توجه کاربران و توضیح آنچه که شرکت یا برند در یک نگاه ارائه می دهد، می شود. یک تصویر لذت بخش می تواند به وب سایت ها یا برنامه های تلفن همراه شخصیت خاص خود را بدهد و آن ها را به یاد ماندنی تر کند. علاوه بر این بازخورد چنین پویایی را نیز باید در نظر داشت. پس از وقوع یک رویداد باید بازخورد داده شود تا اطمینان حاصل شود که اقدام مورد نظر واقعاً اتفاق افتاده است.
حرکت عناصر متحرک و انیمیشن های غیر منتظره کاربران را کنجکاو می کند و آن ها را وادار به حرکت بیشتر می کند تا ببیند در آینده چه اتفاقی می افتد. با این وجود ما باید به این راه حل های جسورانه توجه داشته باشیم و صنعت مورد نظر وب سایت را در نظر بگیریم. هر زمان که تغییری ایجاد می شود، باید نرخ تبدیل را در نظر بگیرید. اما در صورت استفاده صحیح، طراحی رابط کاربری مینیمال به همراه تصاویر زیبا و سه بعدی، یک وب سایت خدمات همچنان می تواند حرفه ای به نظر برسد، در حالی که ترند نیز هست.
توانایی بیان داستان های عالی در مورد یک تجربه دیجیتالی همچنان در بین بهترین ها رواج خواهد یافت. تایپوگرافی به خودی خود می تواند سلسله مراتب بصری قوی ایجاد کند. به عنوان یک عنصر بسیار مهم UI، نقش مهمی در ایجاد یک تجربه کاربری عالی ایفا می کند. طراحی متن به خودی خود کافی نخواهد بود زیرا کپی رایتینگ به یکی از مهم ترین عناصر برای ایجاد یک تجربه کاربری عالی تبدیل شده است و در سال آینده جایگاه خود را حفظ خواهد کرد.
در حالی که این سبک طراحی توجه کاربران را به خود جلب می کند، روایت های یک کسب و کار، کاربران را با یک برند تجاری درگیر می کند زیرا به آن ها این احساس را می دهد که بخشی از داستان هستند. این به نوبه خود کاربران را از اسکن محتوا باز می دارد. بنابراین قدرت نوشتن UX را دست کم نگیرید.
3. هوش مصنوعی
هوش مصنوعی تقریباً در هر محصولی که امکان ادغام را داشته باشد، اجرا می شود. بسیار شک و تردید هایی در زمینه جایگزینی هوش مصنوعی با طراحان با تجربه وجود دارد. اما ادغام هوش مصنوعی در این زمینه به نفع ما خواهد بود و کار ما را آسان می کند. با تشکر از قابلیت جمع آوری داده های هوش مصنوعی (جمع آوری حجم عظیمی از داده ها)، ما متوجه محصولات شخصی تر می شویم که متناسب با نیاز های هر فرد طراحی شده باشند.
یک مثال عالی ابزار Generated Photos است که از هوش مصنوعی برای تولید عکس های مصنوعی انسان استفاده می کند. این نشان می دهد که چگونه می توان از هوش مصنوعی برای ایجاد هویت مصنوعی درخواستی یا حتی عکس های دیجیتالی بدون نگرانی در مورد مسائل مربوط به حق چاپ، حقوق توزیع یا حق امتیاز استفاده کرد. ابزار های هوشمند پاسخگوئی و نوشتن هوشمند گوگل در Gmail که با ایجاد پاسخ های دقیق، کار را به خوبی انجام می دهند تا در زمان بسیار صرفه جویی کند، به ویژه اگر انگلیسی زبان دوم شما باشد.
شاید متوجه شده باشید که راهکار های طولانی و گاهی خسته کننده که برای آشنایی با کاربر طراحی شده اند، به دلیل جایگزینی آن ها با یادگیری ماشین کمتر ظاهر می شوند. محصولات بر اساس رفتار کاربران درباره آن ها اطلاعات بیشتری کسب خواهند کرد که به ایجاد تجربه کاربری شخصی سازی شده بهتر کمک می کند. این در نهایت می تواند به نرخ تبدیل بالاتری منجر شود. علاوه بر این به جای طراحی صد ها صفحه وبسایت، می توانیم بر ارائه تجربه های روان تر تمرکز کنیم.
4. واقعیت افزوده
در سال 2021 ترند های طراحی رابط کاربری شامل تفکر خارج از چارچوب، یا بهتر است بگوییم پایبندی به شبکه است. رابط کاربری محدود به صفحه نمایش را فراموش کنید. در عوض باید بر تعاملاتی تأکید کنید که احساس می کنند در محیط واقعی رخ می دهند. گوگل و اپل در حال حاضر سیستم عامل های توسعه AR خود ARCore و AEKit را معرفی کرده اند که دنیای فیزیکی و دیجیتالی را با هم ترکیب می کند. رابط کاربری AR می تواند رویکرد های متفاوتی داشته باشد:
اشیاء مرتبط: در واقع همان اشیاء در دنیای واقعی که دارای تعامل متقابل هستند.
ثابت در فضای صفحه نمایش: جایی که کاربر باید دوربین را به روشی خاص قرار دهد.
مرتبط با دنیای واقعی: که از دنیای فیزیکی اطراف استفاده می کند.
علاوه بر هدست، اپل روی AR سرمایه گذاری می کند و هیجان زیادی در مورد عینک های اپل وجود دارد. بنابراین به عنوان یک طراح، اگر قبلاً این کار را نکرده اید، باید اطلاعات خود را با کیت های رابط کاربری AR آینده گسترش دهید. علاوه بر این ممکن است بخواهید در زمینه AR به دقت فکر کنید. به عنوان طراح باید این واقعیت را در نظر بگیریم که باید آماده شویم و یادگیری ابزار های جدید را آغاز کنیم. توانایی ایجاد رابط های واقعیت افزوده و عناصر سه بعدی ممکن است در سال های آینده به یک مهارت بسیار مفید تبدیل شود و دیگر به صورت دائمی در ترند های طراحی کاربری باقی بماند.
5. واقعیت مجازی
سال 2020 سالی برای پیشرفت واقعیت مجازی بود. ما می توانیم آن را اینترنت تجربیات بنامیم، زیرا تأثیر آن مستقیما بر روی کاربران است. هدست های واقعیت مجازی در حال حاضر بیشترین هیجان را برای گیمر های حرفه ای به ارمغان می آورد. علاوه بر پیشرفت های آهسته، فکر نمی کنم سال آینده چیز های بیشتری را به VR اضافه کند، اما ممکن است فرصت هایی برای صنایع دیگر باز شود. به عنوان مثال این امکان بسیار خوبی برای افزایش تعامل در آموزش و پرورش، به ویژه در دوران قرنطینه است.
طراحان باید به دنبال فرصت هایی برای ایجاد فضا های مجازی برای همکاری باشند. در حین انجام این کار، باید توجه داشته باشیم که همه کاربران هدست واقعیت مجازی ندارند، بنابراین باید به فکر راه حل پلتفرم ترکیب شده ای باشیم.
6. سال جلسات مجازی
ابزار های ارتباطی مجازی پیشرفت بزرگی داشتند. با توجه به وضعیت جهانی کنونی ما، این منطقه ای است که احتمالاً از منظر طراحی بیشتر مورد بررسی قرار می گیرد. فرصت های زیادی در این زمینه وجود دارد. به عنوان مثال: باز اندیشی درباره یک محصول پیچیده ارتباطی و همچنین طراحی یک نسخه تمیز تر و سبک تر برای جلوگیری از قطع ارتباط برای کسانی که ممکن است دسترسی به اینترنت کند یا محدود داشته باشند.
پلتفرم Wonder از رابط سنتی و خسته کننده چت ویدئویی خود خارج شده است. تقریباً یک MVP است، اما یک مورد جالب UX/interaction است. از آنجایی که امسال بسیاری از افراد در خانه کار می کنند، اگر برنامه های بیشتری ویژگی هایی را مشخص کنند که تماس های ویدئویی آنلاین را روان تر کند، بسیار عالی خواهد بود. به عنوان مثال RingCentral به شما این امکان را می دهد که برنامه های دیگر مانند Slack را برای برنامه ریزی و شروع مستقیم تماس ها از طریق سیستم عامل های شخص ثالث ادغام کنید.
همچنین ویژگی های حفظ حریم خصوصی مانند بی صدا کردن یک فرد پس از نقض قوانین توسط او یا قفل کردن صفحه کلید آن ها به طوری که بچه ها یا حیوانات خانگی نتوانند به طور تصادفی چیزی را در آن مدت تایپ یا حذف کنند، در ایجاد تجربیات ساده و در عین حال کاربر محور، یک مزیت بزرگ محسوب می شود.
7. قابلیت استفاده
قابلیت استفاده به ترند جدید طراحی رابط کاربری تبدیل شده است. احتمالاً تاکنون در مورد اعلامیه گوگل شنیده اید که در سال 2021، آن ها سه معیار جدید تجربه کاربری را برای اندازه گیری سرعت بارگذاری، تعامل و ثبات بصری وب سایت معرفی می کنند. آن ها به طور کلی Core Web Vitals نامیده می شوند. اشتباهات تجربه کاربری یک روش اثبات شده برای شناسایی اشکالات قابلیت استفاده در محصول شما و بهبود عملکرد آنلاین آن است. همچنین می توانید با کاربران واقعی قابلیت استفاده وبسایت خود را تست کنید تا با انگیزه ها و نیاز های آن ها بیشتر آشنا شوید.
همه گیری کرونا می تواند دلیل دیگری باشد که تمرکز از طراحی رابط کاربری زیبا به سمت ترند طراحی بصری تر و کاربر پسند تر هدایت شده است. خوب است مردم را تشویق کنیم تا چیزی منحصر به فرد خلق کنند، اگر می خواهند نشان دهند که برندشان چگونه منحصر به فرد است. اگر برندی از جمعیت رقبا متمایز شود، مطمئناً توجه بازدیدکنندگان را به خود جلب می کند. اما در بیشتر مواقع، ذکر نشده است که این را نمی توان برای همه انواع وب سایت ها اعمال کرد.
بله اگر شما یک آژانس طراحی هستید یا می خواهید نمونه کار ها را به صورت فردی ارائه دهید یا می خواهید نمایشگاه خود را تبلیغ کنید، برای بدست آوردن آن فاکتور عالی، به کار بردن تنوع و ایجاد یک طراحی برجسته و غیر معمول بسیار مفید است، اما اگر شما یک پلتفرم بیزینسی فروشگاهی دارید احتمالاً بهترین ایده این نیست که مسیریابی اصلی خود را در زیر نمادی ناآشنا که در قسمتی غیر متعارف از صفحه قرار گرفته پنهان کنید.
شما باید انواع وب سایت های موجود را متمایز کنید. حتی اگر مشتری نمونه هایی از وب سایت های نمونه کارها با ساختار غیر متعارف و انیمیشن سنگین ارسال کند، این لزوماً به این معنی نیست که می تواند در وب سایت تجاری آن ها اعمال شود. طراحان باید توجه داشته باشند کهترند های طراحی رابط کاربری به گونه است که وب سایت برای همه افراد بسیار قابل استفاده باشد. با در نظر گرفتن آن ها باید مراقب نحوه استفاده از عناصر UI خاصی باشیم که ممکن است در آن لحظه رواج داشته باشد.
8. معجزه استفاده از تصاویر 3D
تصاویر و انیمیشن های 3D چند سالی است که ترند هستند، اما زمان درخشش آن سال 2021 است. خوشبختانه ما در دورانی زندگی می کنیم که تلاش ها و دستاورد های فنی، مانند بهبود سریع تولیدات و بهینه سازی نرم افزار در دهه گذشته، حتی دستگاه های رده پایین را برای مقابله با تصاویر پیچیده در زمان واقعی به اندازه کافی قدرتمند ساخته است. بنابراین ترند طراحی رابط کاربری با استفاده از انیمیشن سه بعدی دیگر دردسری برای استفاده نخواهد داشت.
در سال 2021 عناصر متحرک مانند لوگو ها، تصاویر و متون نیز در صفحات وب رشد می کنند و به کاربران در تشخیص قسمت هایی که می توانند با آن ها تعامل داشته باشند، کمک می کند. Adobe XD همچنین ممکن است بر عناصر سه بعدی آینده در طرح ها تأثیر بگذارد. این پلتفرم ویژگی جدیدی به نام 3D Transforms را معرفی کرد که اکنون می تواند چشم انداز کاملاً جدیدی را به طرح های آینده اضافه کند.
همانطور که آن ها توضیح دادند “یک تبدیل سه بعدی اجازه می دهد تا یک شیء در فضای سه بعدی دستکاری شود و باعث ایجاد شیب و چرخش و همچنین تغییر عمق یک شی بر روی بوم می شود. به بیان ساده تر طراحان می توانند خارج از محور سنتی X و Y هنگام ایجاد مفاهیم فکر کنند. همچنین می تواند راه را برای طراحی تجربیات AR یا VR باز کند.
در این مقاله قصد داریم به توضیح اینکه طراحی رابط کاربری چیست و نکاتی که برای آن باید رعایت کنیم را به شما خواهیم گفت. ایجاد یک وب سایت برای موفقیت هر شرکت یا سازمانی لازم است. امروزه، اگر کسب و کاری وب سایت نداشته باشد، به دلایلی مردم در اعتماد به آن ها مردد هستند. یا به نظر نمی رسد که آن ها یک شرکت قابل اعتماد باشند، تماس با آن ها دشوارتر است و شما نمی توانید درک کنید که این شرکت چه اهدافی دارد.
به همین دلیل وب سایت ها بسیار مهم هستند. اما همان طور که همه ما می دانیم، فقط داشتن یک وب سایت کافی نیست. شما باید وب سایتی داشته باشید که زیبایی های سایت تان مخاطب را جذب کند تا به مشتری تبدیل شود و درآمدتان افزایش یابد. برای این کار باید روی طراحی وب سایت و عملکرد آن تمرکز کنید.
اگر می خواهید وب سایتی ایجاد کنید که باعث شود مخاطبانتان افزایش یابند، باید اهمیت طراحی رابط کاربر را درک کنید.
تعریف رابط کاربری تعریفی است که بسیاری از مردم با آن دست و پنجه نرم می کنند و خیلی ها تفاوت این دو را نمی دانند و آن ها را با هم اشتباه می گیرند. برای اینکه این دو را بتوانید از هم تفکیک کنید، باید معنی هر یک را بدانید.
رابط کاربری یا (user interface (UI: به مجموعه ظاهری صفحات، تصاویر و المان های بصری- مثل دکمه ها و آیکون و … گفته می شود که کاربر برای تعامل با یک دستگاه یا برنامه از آن ها استفاده می کند.
تجربه کاربری (user Experience (UX: شامل تجربه و احساسی است که کاربر در هنگام تعامل با بخش های مختلف از محصولات و خدمات یک شرکت (قبل از استفاده، هنگام استفاده و بعد از آن) دارد.
در واقع طراحی UI روی تجربه بصری کاربر تمرکز دارد و نشان می دهد که کاربر چگونه از طریق یک رابط با اپلیکیشن، بازی نرم افزاری یا سایت شما ارتباط برقرار می کند.
همچنین مهمترین اصل در ایجاد یک تجربه کاربری خوب، فراهم کردن بهترین راه حل، بدون هر گونه پیچیدگی یا دشواری، پیش روی کاربر است.
چرا طراحی رابط کاربری مهم است؟
هنگامی که تعریف رابط کاربری را درک کردید، مشخص می شود که چرا طراحی رابط کاربر بسیار مهم است. طراحی رابط کاربر یکی از اصلی ترین راه ها برای افزایش بازدید وب سایت شما و بنابراین حرکت به سمت نرخ تبدیل بالاتر است. طراحی UI مخاطبان شما را مجذوب خود می کند و آن ها را ترغیب می کند تا در سایت شما بمانند و نگاه عمیق تری داشته باشند.
از آن جا که افراد معمولا تحت تاثیر ظاهر خوب یک وب سایت قرار می گیرند و جذب می شوند، می توانند در آینده به مشتری تبدیل شوند و شما را به دوستان و اعضای خانواده نیز معرفی کنند. بدون رابط کاربر پسند، احتمال موفقیتتان بسیار کم است.
چند مورد مهم برای طراحی رابط کاربری که باید در نظر گرفته شود!
1. کاربران خود را بشناسید
در مرحله اول شما باید کاربر خود را بشناسید. دریابید که کاربران شما در چه حد مهارت و تجربه دارند و به چه امکاناتی نیاز دارند. شما علاوه بر شناسایی اهداف کاربران، باید بدانید که چه چیزی رسیدن این افراد به هدفشان را سریع تر می کند. درواقع باید مواردی که باعث می شود، وب سایت به این افراد کمک کند تا به هدفشان برسند را شناسایی کنید.
می توانید با تمرکز بر روی مخاطبان خود رابطی طراحی کنید که پاسخگوی نیازهای کاربران باشد. شناخت مخاطب در دنیای مجازی، سخت اما مهم است.
2. رعایت سلسله مراتب بصری
مهمترین موارد در طراحی رابط کاربری باید به صورت کاملا ویژه ای مشخص شوند. به طوری که توجه کاربران را به خود جلب کنند.
مواردی که بیشتر از همه برایتان مهم هستند را مشخص کنید. به عنوان مثال از فونت های درشت و با رنگ متفاوت در صفحه اول وب سایت تان استفاده کنید. سپس به سراغ مواردی که از اهمیت کمتری برخوردار هستند بروید. این را نیز باید در نظر بگیرید که وب سایت تان از نظر گرافیکی و طرح کلی باید همخوانی داشته باشند.
3. ارائه بازخورد سریع
رابط شما در هر شرایط و زمانی باید در اختیار کاربران باشد. باید کاربران را از تغییرات، مراحل و یا استثنائاتی که ممکن است پیش بیاید آگاه کنید. راهنما های بصری یا حتی یک پیام ساده به کاربران این امکان را می دهد که از انجام صحیح مراحل و دستیابی به نتیجه مورد نظر آگاه شوند.
4. سادگی و ثبات را حفظ کنید
سادگی را در نماد یک رابط کاربری رعایت کنید. البته منظور سادگی در طراحی نیست، بلکه سادگی در درک و مفهوم آن می باشد.
درواقع وظیفه طراح رابط کاربر این است که المان ها را به گونه ای هماهنگ و ساده تولید کند که کاربر هیچ سوالی در بخش های مختلف سایت نداشته باشد. به گونه ای که کاربر با ورود به آن متوجه هدف اصلی شود.
سخن آخر
در زمان توسعه و طراحی رابط کاربری ، امکان شکست و اشتباه وجود دارد. سعی کنید در مراحل طراحی خود پیشرفت داشته باشید و به یاد داشته باشید که رابطی را طراحی کنید که کاربران در زمان استفاده از آن لذت ببرند. استودیو های طراحی زیادی در سطح کشور وجود دارند که قادر به طراحی رابط کاربری برای شما عزیزان می باشند. استودیو ممتاز دیزاین در تلاش است برای جلب رضایت بیشتر شمتریان خود، خدمات رابط کاربری و طراحی سایت خود را روز به روز ارتقا دهد و طبق ترند های طراحی و مطابق با سلیقه شما خدمات رضایت بخشی را ارائه دهد.
