زمانی که بر روی یک طراحی کار می‌کنید، با تمامی حالت‌های ممکن، مانند بزرگ‌تر کردن و کوچکتر کردن بعضی از بلوک‌های متن، یا کاهش (و یا افزایش) مقدار فاصله سفید در حاشیه یک عنصر دست و پنجه نرم می‌کنید؟ درمورد رنگ چطور؟ آیا باید تیره‌تر باشد و یا شایدم روشن‌تر؟ در این مقاله من چند نکته درمورد نحوه رفع این دسته مشکلات معمول و این امر که چگونه طراحی‌تان ظاهری پایدارتر و سازگارتر با کاربر داشته باشد، با شما به اشتراک خواهم گذاشت.
این مقاله درمورد ایجاد محدودیت‌ها و قوانین است، تا تمام طول فرآیند طراحی در چهارچوب آن‌ها پیش برود. روش‌های نامحدود زیادی جهت ترکیب عناصر در یک اینترفیس کاربر وجود دارد – و به همین دلیل شما باید تعدادی قانون و محدودیت اعمال کنید، در غیر این صورت جریان کار بسیار ناخوشایند خواهد شد. شما ممکن است با تمامی این گزینه‌ها در جدال باشید و در تلاش برای انتخاب بهترین گزینه در میان تعداد زیادی گزینه «درست» باشید. با اعمال (و دنبال کردن) چند قانون پایه‌ای، میتوانید ظاهر طراحی خود را پایدارتر نیز کنید.
این مقاله مختص طراحان مبتدی UI است. شما برای دنبال کردن نکات و میانبرهایی که در آن به اشتراک گذاشته شده است، نیاز به تجربه زیادی ندارید.
اهمیت پایدار کردن طراحی اینترفیس کاربرتان
بیاید از ابتدای داستان شروع کنیم. اگر می‌خواهید طراحی‌تان خوب و قابل اعتماد به نظر بیاید، پس باید از هرج و مرج و بی‌نظمی به هر قیمتی پرهیز کنید. برای این امر، داشتن نظم به خصوص برای کار طراحی‌تان بسیار بااهمیت است.
توسعه‌دهندگان‌تان نیز قدردان این کارتان خواهند بود – آن‌ها عاشق این مطلب که طراحی‌تان منظم است و کار آن‌ها را راحت‌تر می‌کنید، خواهند شد.
یک سیستم و نظم مبتنی بر یک سایز از پیش تعیین شده
مهم نیست اگر می‌خواهید سایز یک بلوک متن یا تصویر را تغییر دهید و یا حاشیه سفید را تنظیم کنید، در هر صورت باید اندازه هر عنصر را تعیین کنید. و من حاضرم شرط ببندم که شما حتما در این موقعیت قرار گرفته‌اید: تا کنون شده است سایز یک عنصر را انتخاب کرده و سپس بعد پنج دقیقه آن را تغییر دهید، و سپس دوباره و شاید دوباره و دوباره آن را تغییر دهید؟
کدام سایز مناسب است؟ ممکن است یکی از همان سایزهایی که امتحان کردید بوده باشد، مگه نه؟ شما باید از این تله اتلاف کننده زمان بی پایان، پرهیز کنید.
با انتخاب واحدهای پایه شروع کنید: Grid (هشت-پیسکله)
برای اینکه کل این طراحی ظاهری مرتب‌تر داشته باشد، تنظیم مقادیر اندازه‌گیری در ابتدای امر و سپس تعیین سایزها بسیار به شما کمک خواهد کرد. انتخاب میزان مقادیر کاملا به عهده خودتان است، اما معمولا، بهترین گزینه این است که به چند قانون تثبیت شده، پایبند بمانید. یکی از این قواعد، تغییر سایز و جا‌به‌جایی عناصربه میزان هشت پیکسل است. این قاعده، تصمیم‌گیری‌های شما را ساده خواهد کرد.
dp در مقابل px: در کنار پیکسل‌ها(px) ، ممکن است عبارت dp که در طراحی صفحه و نسخه اولیه به کار رفته است را دیده باشید. dp مخفف "پیکسل با تراکم کامل" و یا “density-independent pixel” است. این واحد متناسب با یک صفحه 160-dpi است، به این ترتیب یک dp با یک پیکسل در یک صفحه 160-dpi، و با دو پیکسل در صفحه 320-dpi و به همین ترتیب برابر است. فرمول مقادیر عددی آن به صورت px = dp * (dpi/160) است.
نکته: اگر شما با عناصر کوچکتر کار می‌کنید، گهگاهی استفاده از مقدار افزایشی چهار پیکسل به جای هشت پیکسل، امکان پذیر بوده و مشکلی ندارد (در صورت نیاز، میتوانید تغییرات بیشتری نیز ایجاد کنید).
اما چرا باید دقیقا هشت پیکسل باشد؟
چند دلیل وجود دارد که چرا عدد هشت معمولا مانند "عدد جادویی" عمل می‌کند:
- هشت پیکسل حداقل "پرش" موثر است.
- هشت عدد بسیار خوبی است زیرا هم بر چهار و هم بر دو بخش‌پذیر است.
- اگر از هشت استفاده کنید، به سادگی میتوانید اندازه تمامی عناصر را بدون اینکه با اعشار و نیم مواجه شوید تغییر دهید چرا که 8 / 2 = 4، 4 / 2 = 2و 2 / 2 = 1است. از طرف دیگر، اگر با عدد ده شروع کنید، شما به پنج پیکسل، سپس 2.5 پیکسل و 1.25 پیکسل می‌‌رسید. زمانی که برای صفحات طراحی می‌کنید، تمایل دارید از این نیم پیسکل‌ها تا حد امکان پرهیز کنید. با استفاده کردن از پیکسل‌های کامل، عناصر طراحی با محدودیت‌های دقیق پیکسل هم‌تراز شده و دیگر ظاهری ماسوره مانند نخواهند داشت.
- ضرایب عدد هشت (8,16,24,32,40,48,56,64,72,80,…) با مقادیر دودویی یا باینری (1,2,4,8,16,32,64,128,256,512,…) در هم تنیده است.
- و در نهایت، به سادگی می‌توان اعداد را به یاد سپرد.
مزایای استفاده از گرید هشت پیکسله چیست؟
- به عنوان یک طراح، زمان تصمیم‌گیری شما ارزشمند است. این مساله سرعت کار شما را افزایش داده و اثرگذارتر خواهید بود.
- اگر شما با یک توسعه‌دهنده کار می‌کنید، شما خواهید توانست نظم و سیستمی ایجاد کنید که به شما و تیم شما کمک کند. اگر توسعه‌دهنده نیاز دارد تغییراتی سریع ایجاد کند، می‌تواند مقادیر را بر اساس افزایش هشت پیکلسلی تنظیم کند. این کار پایداری و نظم کارتان را تحکیم می‌کند.
- کسانی که از وبسایت شما استفاده می‌کنند، هنگام بازدید از آن، احساس راحتی خواهند کرد. آن‌ها به وبسایت شما اعتماد خواهند کرد و استفاده از اینترفیس برای آن‌ها راحت‌تر خواهد بود.
یک روش موثر استفاده از گرید هشت پیکسله
نتیجه استفاده از گرید هشت پیکسله
با گریدی کار کنید که تمام عناصر را lay out کند
هارمونی افقی
من مطمئنم شما از پیش هنگام طراحی یک وبسایت از گرید استفاده کرده‌اید. استفاده از یک گرید به شما کمک می‌کند تا تمامی عناصر را بر روی بوم دیجیتال خود دقیق جایگذاری کنید.
گرید اسکلت‌بندی اینترفیس شما را تشکیل داده و تعیین می‌کند که هر عنصر را در کجا میتوانید قرار دهید. قالب ترکییب‌بندی را نگه می‌دارد و محدودیت‌های واضحی جهت پایداری بیشتر طراحی‌تان تعیین می‌کند. اکنون کار شما جهت تصمیم‌گیری درمورد اینکه عناصر را در کجا قرار دهید راحت‌تر خواهد بود. همانطور که تجربه بیشتری کسب می‌کنید، میتوانید محدودیت‌ها را بسته به نیازتان به‌روزرسانی کنید.
اما چگونه این گرید را می‌سازید؟ ما این موضوع را در این قسمت بررسی خواهیم کرد. اصولا، تعداد و اندازه ستون‌ها ممکن است بسته به نیاز شما متغیر باشد. هرچه طراحی شما جزئیات بیشتری داشته باشد، گرید شما ستون‌های بیشتری نیاز خواهد داشت. اگر در این مورد اطمینان ندارید، از یک همکار باتجربه خود درخواست کمک کنید.
همچنین، من توصیه می‌کنم مقاله «راهنمایی جامع به طراحی UI»، که باید به شما در درک عمیق‌تر اینترفیس کاربر کمک کند، را بخوانید.
هارمونی افقی
هارمونی عمودی
همانند هارمونی افقی، حفظ پایداری فاصله عمودی در یک طراحی نیز مهم است. مانند سطرها در یک صفحه گسترده یا Spreadsheet، این کار به شما کمک می‌کند متن را در فواصل منظم نگه‌دارید.
بزرگی این سطرها باید به چه اندازه باشد؟ دوباره می‌گویم، به خودتان بستگی دارد. هرچند من استفاده از هشت پیکسل یا ضرایب هشت (مانند ۱۶) را توصیه می‌کنم. محدودیت‌ها را در جایی که قرار است عناصر یا متن تراز شود، دوباره تعریف کنید.
هارمونی افقی
روش صحیح انتخاب سایزهای فونت
اگر نگاهی به تعدادی از طراحی‌های خوش ساخت نگاه کنید، تداوم سایزهای فونت را خواهید دید. این امر دلیل مشخصی دارد.
نکته: به یاد داشته باشید که شما تنها به دو و شاید سه فونت در طراحی خود نیاز دارید. هرچند، انتخاب ویژگی‌های تایپ مناسب و استفاده از آن‌ها در کنار هم فراتر از گنجایش این مقاله آموزشی است.
با تعریف تعدادی سایز فونت کلیدی برای استفاده در تمام طول پروژه شروع کنید.(به عنوان مثال، استفاده از ۳۰، ۳۱ و ۳۲ پیکسل احمقانه خواهد بود و بهتر است این سه سایز بسیار مشابه را به صورت یک سایز واحد ترکیب کنیم.)
سایز استاندارد فونت دو مزیت به دنبال دارد:
- طراحی شما پایدارتر و ساده‌تر خواهد بود.
- سرعت طراحی را افزایش داده و شما را تاثیرگذارتر می‌كند.
سایزهای فونت
زمانی كه سایز فونت‌ها را تعریف می‌كنید، مطمئن شوید كه سایزها را با مقیاسی یكسان ندهید. زمانی كه متن را بزرگ‌تر می‌كنید، این تغییر باید غیر خطی و چشم‌گیر باشد. این امر بدین معنا است كه هرچه متنی كه می‌سازید بزرگ‌تر باشد، این تغییر باید مقیاس بزرگ‌تری داشته باشد.
داشتن نظم و ترتیب در اندازه فونت
بیایید فرض كنیم بلوك متنی با سایز فونت 12 پیكسل دارید و می‌خواهید آن را بزرگ‌تر كنید. شما 14 پیكسل را انتخاب كرده و راضی می‌شوید. اما تصور كنید كه یك عنوان بزرگ (چهل پیكسل) دارید و می‌خواهید آن را بزرگ‌تر كنید. شما سایز را تنها با دو پیكسل و از 40 به 42 تغییر خواهید داد؟ البته كه نه. از نظر بصری، این متن نیازمند تغییر بسیار بزرگ‌تری است. ممكن است نیاز داشته باشید كه آن را به اندازه 24 پیكسل افزایش داده و به شما یك عنوان بزرگ‌تر 64 پیكسلی می‌دهد.
به صورت خلاصه، این امر بدین معنی است كه متن موردنظرتان هرچه بزرگ‌تر باشد، این تغییر نیز باید شدیدتر باشد. این قانون بسیار ساده نه تنها بر روی متن بلكه بر روی سایز كلیدها، حاشیه سفید و همه چیز، صدق می‌كند.
اصولا این تغییرات بسته بر یك تساعد هندسی است. این یك نمودار كاربردی برای نشان دادن مقیاس تغییر فونت است:
تساعد هندسی
هرچند برای تایپوگرافی، یك مقیاس اثبات شده برای سایزهای فونتی كه بخواهید همیشه مورد استفاده قرار دهید، به كار می‌رود. این مقیاس 12، 14، 16، 18، 20، 24، 30، 36، 48، 60 و 72 پیكسل است.
مقیاس‌های اثبات شده تایپوگرافی برای سایزها
فاصله خط متن
زمانی كه تمامی سایزهای فونت را تعریف كردید، نیاز خواهید داشت به فواصل بین خطوط نیز توجه كنید. برای فاصله خط‌ها مجددا از تغییرات چهار پیكسلی استفاده كنید. به عنوان مثال، برای یك متن 16 پیكسلی، بیایید فاصله بین خطوط را 24 پیكسل قرار دهیم. اگر می‌خواهید متن شما فاصله بیشتری داشته باشد این مقدار را چهار پیكسل اضافه و به 28 پیكسل تغییر دهید.
رنگ پروژه خود را تعریف كنید
آیا می‌دانید چند تركیب رنگی وجود دارد؟ بسیار زیاد! اگر از پیش طیف رنگ‌ها را تعیین نكنید، زمان زیادی را تلف خواهید كرد. شما نمی‌توانید خودتان را تنها به سیاه، سفید، و یا آبی محدود كنید. برای هر رنگ شما به طیفی از آن رنگ نیاز خواهید داشت، و تنظیم آن‌ها از پیش، مهم است، تا طیف رنگی در تمام طول پروژه طراحی‌تان یكسان و ثابت باشد. ما نمی‌خواهیم در طراحی خود بی‌نظمی ایجاد كنیم. برای هر رنگ از پنج طیف مختلف استفاده كنید. من ترجیح می‌دهم ۹ طیف رنگ را برای هر رنگی تعریف كنم.
بیایید نگاهی نزدیك‌تر به طیف‌های رنگ بیاندازیم.
چرا نه طیف رنگ برای هر كدام از رنگ‌ها؟
- اولین مزیت، اسم رنگ‌ها است. چه از ویرایشگرهای گرافیك، چه كدهای CSSاستفاده كنید، شما قطعا از این نكته سود خواهید برد. هر طیف، با یك شماره مشخص خواهد شد، مانند 100، 200، 300، 400، 500، 600، 700، 800 و 900. (چرا صدتایی؟ اصولا، اینگونه انواع تایپ‌فیس‌ها، سازمان‌یابی می‌شوند.)
- دوما، 9 یك عدد كاربردی برای تعریف رنگ‌ها است. بهترین راه برای آماده كردن این طیف‌‌ها ساختن یك ردیف از نه عدد مربع و پر كردن این مربعها با رنگ است. رنگ وسطی، رنگ پایه خواهد بود. سپس، شما روشن‌ترین رنگ (آخرین مربع از سمت چپ) و تیره ترین رنگ (آخرین مربع از سمت راست) را تعریف خواهید كرد. قدم بعدی انتخاب رنگ‌های میان این مربعها است.
نه طیف برای هر رنگ
size، type و حالات عناصر متفاوتی آماده كنید
زمانی كه بر روی یك طراحی كار می‌كنید، معمولا با تعداد بی‌شماری آیكون، دكمه، و سایر مولفه‌ها سر و كار خواهید داشت. مجددا، از پیش آماده كردن چندین سایز برای آن‌ها و محدود كردن گزینه‌ها به كم‌ترین تعداد ممكن، فكر بسیار خوبی است. طی فرآیند طراحی، سایزهای دیگری اضافه نكنید و سعی نكنید سایز مولفه‌ها را بر اساس نیازهای خود تنظیم كنید. در عوض، از آن‌هایی كه از پیش تعریف كردید، استفاد كنید و تمام طراحی یكپارچه‌تر و یك‌دست‌تر خواهد بود.
بیایید به عنوان مثال به دكمه‌ها توجه كنیم. زمان شروع كار، شما باید ساختار مراتبی آن‌ها را تعریف كنید. برای این كار، یك دكمه با یك عملكرد اولیه، یكی دیگر با عملكرد ثانویه و شاید یكی دیگر با عملكردی نه چندان مهم تعریف كنید. برای هر كدام، وضعیت (فعال وغیرفعال) و تنوع رنگش را مشخص كنید. همیشه سعی كنید تعداد عناصر را به مهم‌ترین‌ها محدود نگه‌دارید.
یك مثال برای انواع دكمه‌ها
اینترفیس كاربر معمولا از سایه‌ها در كار طراحی خود استفاده می‌كنند. هرچند برای طراحان كم‌تجربه‌تر، استفاده از سایه‌ها گاهی دشوار خواهد بود. زمانی كه یك سایه ایجاد می‌كنید، شما باید فاصله سایه را بر اساس محور x و y، و همچنین بر اساس شعاع مات كردن، رنگ و محو بودن آن، تنظم كنید. ساختن سایه ممكن است زمان زیادی صرف یافتن تن مناسب ببرد، و برای همین دلیل است كه شما پیش از آغاز پروژه‌تان، باید آن‌ها را تعریف كنید. از پیش تعریف كردن یك مجموعه سایه (با استفاده از همان متد رنگ‌ها) و سپس اعمال آن‌ها در تمام فرآیند طراحی، بسیار مفید خواهد بود.
یك مثال از انواع سایه
حاشیه سفید
تنظیم مناسب حاشیه سفید بسیار مهم است. چه عناصر را از كادر خارجی دور كنید (مارجین، margin) و یا از كادر درونی (پدینگ،padding )، واقعا باید مجددا بر روی عدد جادویی هشت، متكی باشید. این انحراف و فاصله‌ها را به میزان هشت پیكسل (و چهار برای عناصر كوچك‌تر) افزایش دهید. همانند سایز فونت‌ها، هرچه بخواهید فاصله و حاشیه سفید بیشتر باشد، این تغییر نیز باید بیشتر باشد (مجددا شما باید این تغییرات را از پیش تعریف كنید).
حاشیه سفید
نتیجه‌گیری
برای دادن ظاهری پایدار و تمیز به طراحی‌هایتان، چند محدودیت و مسیری واضح برای تمام طول فرآیند تعریف كنید.
زمان كار بر روی هر عنصر طراحی‌تان موارد زیر را در نظر داشته باشید:
- بررسی كنید كه آیا از پیش در بخشی از طراحی‌تان از آن استفاده كرده‌اید یا خیر. اگر استفاده كرده‌اید به سادگی این عنصر را كپی كنید.
- یك ریتم افقی و عمودی را دنبال كرده و اندازه عناصر را با استفاده از قدم‌هایی كه در همان ابتدای كار تعریف كردید، تنظیم كنید.
- از تصمیمات پیچیده و نزاعی بی‌پایان با پیكسل‌ها دست بكشید. از یك نظم خاصی پیروی كنید.
- از یك عنصر یكسان دوبار استفاده نكنید. اگر در طراحی شما نظم وجود دارد، كار شما بهتر و موثرتر خواهد بود، و شما خواهید توانست آن را سریع‌تر تكرار كنید، و با توسعه‌دهندگان راحت‌تر میتوانید ارتباط برقرار كنید. توسعه‌دهندگان متغییرهایی را كه مطابق با سبك شما است، تنظیم خواهند كرد، پس آن‌ها را واضح تعریف كنید. شما، طراحی تمیزی خواهید داشت و توسعه‌دهندگان خواهند توانست كدهای بهتر و پایدارتری بسازند. اینگونه همه خوشحال خواهند بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید