عناصر اصلی طراحی رابط کاربری و دیزاین رابط کاربری (UI) نمایش بصری یک محصول است که با استفاده از عناصر مختلفی مانند تایپوگرافی، رنگ، متنهای کوتاه (Microcopy)، تصاویر، و چیدمانها (Layouts) ایجاد میشود. رابط کاربری و تجربه کاربری خوب هر دو برای موفقیت یک محصول ضروری هستند. اگر بخواهیم یک مقایسه ساده ارائه دهیم، تجربه کاربری مانند پایه و محل قرارگیری یک ساختمان است، در حالی که رابط کاربری مانند دیوارها، مبلمان و دکوراسیون داخلی آن ساختمان است. درک عناصر رابط کاربری بسیار مهم است، زیرا به شما کمک میکند تا یک رابط کاربری منسجم، کاربرپسند و زیبا ایجاد کنید.
رنگ (Color)
رنگ یکی از ابزارهای قدرتمندی است که انسانها از آن برای برقراری ارتباط، تحریک به اقدام، تأثیرگذاری بر احساسات و حتی تغییر رفتار استفاده میکنند. برخی از تداعیهای رنگها جهانی هستند، اما افراد ممکن است به دلیل خاطرات، فرهنگ و محیط کنونیشان واکنشهای متفاوتی نسبت به رنگها نشان دهند.
دیزاینرهای مبتدی ممکن است اشتباهاً فکر کنند که رنگ فقط یک عنصر تزئینی است. در حالی که در واقعیت، رنگ یکی از مهمترین عناصر برندسازی است.
برخی از تأثیراتی که رنگ در دیزاین دارد شامل موارد زیر است:
- نمایش شخصیت محصول
- انتقال پیامها
- تأثیر بر رفتار کاربران
- تأثیر بر احساسات کاربران
- جلب توجه کاربران به عناصر خاص
درک نظریه رنگ برای هر دیزاینر ضروری است. این دانش به شما کمک میکند تا پالتهای رنگی مناسبی ایجاد کنید که با محصولی که در حال طراحی آن هستید هماهنگ باشند.
فضای مثبت و منفی (Positive and negative space)
در دیزاین، فضای مثبت به ناحیهای از دیزاین گفته میشود که شامل عناصر مورد توجه است. هر فضایی که توسط عناصر دیزاین اشغال میشود، به عنوان فضای مثبت شناخته میشود. از سوی دیگر، فضای منفی یا فضای سفید، همان ناحیههای خالی بین، اطراف و حتی داخل عناصر دیزاین است.
فضای منفی به خوانایی کمک میکند و اسکن و کشف عناصر کلیدی را آسانتر میکند. این فضا باعث ایجاد فضایی برای نفس کشیدن عناصر و گروههای محتوایی میشود و به دیزاین ظاهری منظم و بدون ازدحام میبخشد. همچنین، فضای منفی میتواند به ایجاد حس کلی یک وبسایت یا اپلیکیشن کمک کند. وبسایتهایی که از فضای سفید زیادی (ماکرو) استفاده میکنند، مینیمالیستی، شیک و لوکس به نظر میرسند.
تایپوگرافی (Typography)
تایپوگرافی را میتوان از دو زاویه بررسی کرد. اول، سبک و ظاهر متنی که به چاپ رسیده است و دوم، هنر و فرآیند چیدمان متن به گونهای که خوانا و قابل درک باشد، چه برای چاپ و چه برای دیزاین دیجیتال.
تایپوگرافی شامل انتخاب و تنظیم موارد زیر است:
- تایپفیسها
- اندازه حروف
- طول خطوط
- فاصله بین خطوط
- فاصله بین حروف
- فاصله بین پاراگرافها
- تنظیم کرنینگ (فاصله بین حروف خاص)
- ترازبندی متن
تایپوگرافی خوب چندین مزیت دارد. این نوع تایپوگرافی به ایجاد سلسله مراتب بصری قوی کمک میکند که کاربران را در مرور محتوا راهنمایی میکند. انتخاب درست تایپفیسها همچنین باعث افزایش خوانایی و دسترسیپذیری میشود و استفاده از محصول را آسانتر میکند. تایپوگرافی منحصر به فرد و سازگار به کاربران کمک میکند تا با تایپفیس خاصی که با برند مرتبط است، آن را به یاد بیاورند.
میکروکانتنت (Microcontent)
نوعی از محتوای تجربه کاربری است که به صورت قطعات متنی یا عبارات کوتاه ارائه میشود. محتوای ظریف معمولاً پیامهای کلیدی را به صورت مختصر و مفید منتقل میکند. به عنوان مثال، میتواند یک مقاله یا پست طولانی در وبلاگ را توصیف کند، به رابط کاربری وضوح ببخشد یا رفتار مورد نظر را تشویق کند.
نمونههایی از محتوای کوتاه شامل موارد زیر است:
- عناوین صفحات
- سرصفحهها (Headings)
- تگلاینها (Taglines)
- عناوین ایمیلها
- خلاصهها
- توضیحات مختصر (Decks)
- نکات و ترفندها (Hints,Tips)
- توضیح دهنده (Explainers)
محتوای کوتاه با میکروکپی (Microcopy) متفاوت است. میکروکپی نیز شامل متون کوتاه میشود، اما هدف آن کمک به کاربران در ناوبری رابط کاربری است. نمونههایی از میکروکپی شامل پیامهای خطا، تولتیپها (Tooltips)، برچسب دکمهها، لینکها، منوهای ناوبری (Navigational menus) و عناصر متنی مشابه است.
میکروکپی (Microcopy)
Microcopy متنهای کوتاهی هستند که کاربران را در رابط کاربری راهنمایی میکنند.
نمونهها:
- متن دکمهها
- پیامهای خطا
- راهنمای فرمها
- Tooltip
- لینکها
- منوهای ناوبری
این متنهای کوچک نقش بزرگی دارند؛ زیرا تعیین میکنند کاربر:
- موفق به انجام کار میشود
- یا محصول را رها میکند.
نمونههای Microcopy مؤثر:
- “Save as draft”
- “Password needs 8+ characters”
- “No results? Try different keywords”
ویژگیهای Microcopy خوب:
- ساده
- کوتاه
- انسانی
- متناسب با موقعیت
نکته حرفهای: متن microcopy را با صدای بلند بخوانید. اگر رباتیک یا مبهم به نظر میرسد، آن را بازنویسی کنید.
حرکت (Motion)
در موشن (Motion) به انیمیشنها و سایر جلوههای بصری متحرکی اشاره دارد که طراحان به رابط کاربری اضافه میکنند.
موشن چندین کارکرد کلیدی در طراحی دارد:
- و البته، موشن باعث ماندگار شدن برند و لذتبخشتر و سرگرمکنندهتر شدن تجربه کاربری میشود.[4] مطلوبیت (Desirability) یکی از اصول بنیادین طراحی UX است که احساسات را برمیانگیزد و کاربران را به اقدام ترغیب میکند.
- ارائه بازخورد برای ریزتعاملها (Microinteractions). برای مثال، یک نشانگر چرخان (Spinner) متحرک نشان میدهد صفحه در حال بارگذاری است یا انیمیشن موفقیت (Success State Animation).
- جلب توجه کاربر، زیرا چشم انسان به سمت اشیای متحرک کشیده میشود. برای مثال، افزودن هالهای تابان به یک دکمه کاربران را به کلیک کردن ترغیب میکند.
- هدایت کاربران در صفحه. برای مثال، انیمیشن نرم آکاردئونها (Accordions) و لینکهای لنگر (Anchor Links) به کاربران کمک میکند موقعیت خود را در صفحه درک کنند.
- نشان دادن امکان تعامل، بهویژه در موبایل. برای مثال، یک انیمیشن کوتاه میتواند نشان دهد کاربر با کشیدن (Swipe) میتواند یک چت را حذف یا بایگانی کند.
- و البته، موشن باعث ماندگار شدن برند و لذتبخشتر و سرگرمکنندهتر شدن تجربه کاربری میشود. مطلوبیت (Desirability) یکی از اصول بنیادین طراحی UX است که احساسات را برمیانگیزد و کاربران را به اقدام ترغیب میکند.
ارتفاع بصری (Elevation)
در رابطهای دیجیتال، دیزاینرها از سایهها برای ایجاد جلوههای طبیعی در عناصر استفاده میکنند. سایهها به عناصر عمق میبخشند و آنها را از پسزمینه متمایز میسازند.
رابطهای مدرن بهصورت لایهای طراحی شدهاند و از سایهها برای نشان دادن فاصله بین سطوح (ارتفاع) و ایجاد سلسلهمراتب استفاده میشود. هرچه فاصله یک عنصر (مانند دکمه شناور) از سطح بیشتر باشد، ارتفاع آن بیشتر است و سایه آن بیشتر محو میشود. این روابط فضایی بین عناصر به کاربران کمک میکند تا در رابط کاربری حرکت کنند و قابلیت کلیک بر روی عناصر را تشخیص دهند.
سایهها همچنین قابلیت اسکنپذیری را افزایش میدهند، بنابراین کاربران میتوانند راحتتر عناصر موجود در یک صفحه را تشخیص دهند.
نکته حرفهای: استفاده بیش از حد یا نادرست از سایهها میتواند باعث ایجاد ابهام بصری در دیزاین شود و به کاربردپذیری (Usability) آسیب برساند.
تصاویر (Imagery)
تصاویر به استفاده از عکسها، تصاویر گرافیکی / ایلاستریشنها (Illustrations)، انیمیشنها و ویدیوها در رابط کاربری اشاره دارد. این فرصت شماست تا اولین تأثیرگذاری را ایجاد کرده و هویت بصری محصول را تثبیت کنید. تصاویر بهخوبی انتخابشده میتوانند بر احساسات کاربران تأثیر مثبت بگذارند و جذابیت محصول را افزایش دهند. تصاویر نامناسب، حواسپرتکننده، یا با کیفیت پایین میتوانند به تجربه کاربر صدمه بزنند.
تصمیمگیری درباره استفاده از تصاویر در دیزاین شما به اهداف شما بستگی دارد :
- عکسها و ویدیوها زمانی مؤثرترند که شما چیزی خاص یا واقعی را در نظر دارید. عکسهای محصول به کاربران کمک میکنند تا سریعتر تصمیم بگیرند و برای خرید ترغیب شوند.
- تصاویر گرافیکی برای نمایش مفاهیم و موضوعات انتزاعی مناسبتر هستند. این تصاویر به ایجاد ارتباط احساسی با کاربران، روایت یک داستان و اضافه کردن شخصیت به محصول کمک میکنند.
نکته حرفهای: از منظر دسترسیپذیری، تصاویر باید نسبت تضاد رنگی مناسبی داشته باشند، شامل متن جایگزین (Alt text) باشند و هدفی فراتر از یک عنصر تزئینی را دنبال کنند.
نمادها / آیکونها (Icons)
آیکونها پیکتوگرامهایی هستند که بهطور گسترده در رابطهای وب و موبایل مشاهده میشوند. آنها بهصورت بصری ایدهها، اشیا یا عملکردها را نمایش میدهند و به کاربران کمک میکنند بفهمند که چگونه میتوانند از یک عنصر (مثل دکمه یا آیتم منو) استفاده کنند.
اگر بهدرستی دیزاین شوند، آیکونها به کاربران در انجام وظایف کمک میکنند. برای استفاده صحیح از آیکونها، بهترین روشها را دنبال کنید :
- استفاده از آیکونهای جهانی : این کار باعث کاهش بار شناختی میشود. بهعنوان مثال، از آیکون ذرهبین برای عملکرد جستجو استفاده کنید.
- دیزاینهای یکدست / یکپارچه : دیزاینهای یکدست باعث افزایش شناخت کاربر میشوند. اگر از آیکونهایی با گوشههای گرد در یک صفحه استفاده میکنید، این سبک را در تمام صفحات حفظ کنید.
- از پیچیدگی در دیزاین آیکونها خودداری کنید : آیکونها باید ساده و کاربردی باشند. آیکونهای پیچیده تفسیر را برای کاربران، بهویژه افراد دارای اختلالات بینایی، دشوار میکنند. همچنین از زیادهروی در سبک آیکون خودداری کنید.
نکته حرفهای: همراه با آیکونها از برچسبهای متنی استفاده کنید تا هرگونه ابهام در مورد معنای موردنظر را برطرف کنید.
اجزاء / کامپوننتها (Components)
کامپوننتهای رابط کاربری بلوکهای سازنده تعاملی مستقلی هستند. این کامپوننتها میتوانند با سایر کامپوننتها ترکیب شوند تا رابطهای کاربری پیچیده و کارکردی برای اپلیکیشنها، وبسایتها یا دیگر محصولات دیجیتال ایجاد کنند. برخی از مثالهای کامپوننتهای رابط کاربری شامل دکمهها، فیلدهای ورودی (Inputs)، کارتها، کنترلهای انتخاب (Selection controls)، انتخابکنندهها (Pickers)، مودالها (Modals)، لیستها (Lists) و تبها (Tabs) هستند.
یک کامپوننت ممکن است شامل کامپوننتهای دیگر باشد یا بخشی از یک کامپوننت پیچیدهتر باشد. برای مثال، یک هدر میتواند شامل دکمه و نوار جستجو باشد.
دیزاین سیستم ها معمولاً شامل یک کتابخانه کامپوننت (Component library) هستند. این بدان معناست که دیزاینرها میتوانند از این بلوکهای سازنده بهصورت مکرر استفاده کنند، بهجای اینکه هر بار آنها را از نو ایجاد کنند.
چیدمان / طرحبندی (Layout)
چیدمان (Layout) یک قاب است که عناصر بصری مانند تصاویر، متن و کامپوننتهای رابط کاربری را در یک شبکه (Grid) قرار میدهد. شبکهها خطوط عمودی و افقی نامرئیای هستند که صفحه را به بخشهایی تقسیم میکنند.
ساختار چیدمان به اهداف پروژه شما بستگی دارد. دیزاینرها از اصول ترکیببندی و ویژگیهای مختلف دیزاین برای قرار دادن عناصر استفاده میکنند تا چشمهای کاربران را به نقاط مورد نظر هدایت کنند.
دیزاین چیدمان با استفاده از شبکه به سازماندهی محتوا کمک کرده و آن را متعادل میکند. شبکهها باعث میشوند که هر چیدمانی بهطور ریاضی هماهنگ و از نظر بصری جذاب باشد. شبکههای ستونی رایجترین، انعطافپذیرترین و کاربردیترین راهحل برای تنظیم محتوا هستند.
یکی از عناصر اصلی طراحی رابط کاربری چیدمانها میتوانند بدون استفاده از شبکه نیز ساخته شوند. این نوع چیدمانها تضاد بیشتری ایجاد کرده و میتوانند وبسایتهای منحصربهفرد و هنری را ایجاد کنند. با این حال، این سبک بهندرت برای محصولات هدفمحور کار میکند.
