• قسمت اول: مرورکلی
• قسمت دوم: یکپارچگی (همین پست!)
• قسمت چهارم: تعادل
• قسمت سوم: تراز
• قسمت پنجم: سلسه مراتبی
• قسمت ششم: تضاد
• قسمت هفتم: نسبت
• قسمت هشتم: فضای منفی

خانه ای که در برابر خودش تقسیم شده، هرگز پایدار نمی‌ماند.
- آبراهام لینکلن

در اینجا منظور آبراهام لینلکن از «خانه» ایالات متحده آمریکا هست، درست کمی قبل از شروع جنگ های داخلی آمریکا. لینکلن در ادامه میگه، کشورش نصف آزاد و نصف برده هستن. دو پیام بسیار متفاوت درباره آنچه که کشورش درگیرش بود. او کسی بود که ایالات متحده رو یکپارچه کرد و قانون برده داری رو منسوخ کرد.

نکته لینکلن فراتر از وضعیت سیاسی-اجتماعی زمان خودش هست. ایالات متحده وقتی تقسیم بشه پایداریش رو از دست میده. این نکته قابل تعمیمه به طراحی! اگر یک طرح بدون هدف بخش بندی بشه و هر بخش یه ساز بزنه، انسجام کل طراحی زیر سوال میره. هر بخشی باید در راستای یک هدف واحد و یکپارچه باهم کار کنند.

ایده ی یکپارچگی و انسجام طرح در طراحی، همون پیروی تمام اجزاء از یه هدف واحده.[1]

اصول یکپارچگی در طراحی

یکپارچگی معیاری هست برای سنجش میزان پیوستگی عناصر در طراحی شما. دقیق بگیم، کلیت طرح رو توصیف میکنه! مثلا هر مؤلفه (component) چقدر با بقیه مؤلفه ها هماهنگه؟ یکپارچگی مهمترین اصل طراحی هست چرا که تمام طراحی تون رو به عنوان یک واحد منسجم در میاره.

آشنایی با یکپارچگی

در این دوره هر کدوم از اصول طراحی مربوط به یک «بخش» از طراحی شما میشه که اصل یکپارچگی همشون رو در بر میگیره (رو همشون تاثیر داره).

یکپارچگی هدف نهایی طراحی واسط کاربری هست، اما این به این معنی نیست که این اصل رو نگه دارید که آخرسر لحاظش کنید، بلکه برای اینکه طراحی تون به یک حس یک دستی برسه، نیاز دارید که از قبل براش برنامه ریزی کنید و تصمیم بگیرید که قراره چه پیامی رو به مخاطبتون منتقل کنید؟ دوره ی اصول طراحی رو با اصل یکپارچگی شروع کردیم که مطمئن بشیم در هر بخش تمرکز روی انسجام کلیه‌ی قسمت های طراحی حفظ میشه. (با دید تصویر بزرگ یا Big Picture طراحی می‌کنیم)

مثل یک طراح حرفه ای فکر کن!

خبره شدن تو بحث یکپارچگی از همون اول میتونه یکم سخت و چالش برانگیز باشه چراکه ما معمولا بدون در نظر گرفتن چگونگی قرار گرفتن این جزئیات در تصویر بزرگ، مستقیماً به طراحی جزئیات می پردازیم. اگه شما از همون اول کار نتونید به تصویر بزرگ نگاه کنید (کلیت پروژه رو تو ذهنتون مجسم کنید)، احتمالا همه اون سخت کار کردن ها و تلاش هاتون منجر به یه طراحی ضعیف میشه!

برای نشون دادن اینکه ما معمولا این مورد رو نادیده میگیریم، لیست خرید رو مثال میزنیم.

مثال: لیست خرید

ایجاد لیست برای خرید مواد غذایی یک کار ساده است - شما غذاهایی که می خواید در طول هفته درست کنید مشخض میکنید سپس موارد لازم رو یادداشت می کنید که بخرید.

این اولین قدم در «تجربه خرید موارد غذایی» است. برای بیشتر افراد این قدم بعضا حذف میشه. برای مثال لیست خرید مون یه چیزی شبیه عکس زیر میشه:

در نگاه اول، متوجه چیز اشتباهی در این لیست نمیشید. دقیقا برای هدف مد نظرمون، خرید اقلام مورد نیاز، ساخته شده. با این حال، بیاید از دید طراحی بهش نگاه کنیم و و مسئله را مورد توجه قرار دهیم.

اصول طراحی

در این لیست ساده اینطور به نظر میرسه که همه ی بخش های درست رو داره تا هم ارتباط خوبی با شما برقرار کنه و هم باعث بشه هرچی که لازم دارید رو از فروشگاه بخرید! در نهایت یه خرید راحت. حتی ما می تونیم تمام اصول طراحی رو در این لیست ساده ببینیم.

• تعادل — وزن بصری به شکل یکسانی در پایین صفحه توزیع شده
• چیدمان — لیست به شکلی چیده شده که به راحتی بشه اسکنش کرد
• تضاد — فونت بزرگ تر در سرتیتر انتخاب شده
• تناسب — فونت کوچکتر برای هر کالا
• فضای سفید — فضای بین و دور متن
• تکرار — سایز و رنگ هر کالا
• حرکت — چشم به شکل طبیعی از بالا به پایین حرکت میکنه
• تضاد — متن مشکی روی پس زمینه سفید

اما در مورد یکپارچگی چی؟

خب یکی می تونه بگه که این لیست طراحیش یکپارچه هست، چرا که تمام اصول طراحی رو رعایت کرده. و کل لیست هم اینو بهمون میرسونه که همه موارد لیست شده، موادغذایی هستن.

با این حال، اگه ما بیایم رابطه بین هر کالا رو بررسی کنیم، ممکنه که به فکر فرو بریم و از خودمون بپرسیم، خیار و شیر چه چیز مشترکی باهم دارن؟! ?

نگاهی نزدیک تر

یکپارچگی معیاری ست برای سنجش اینکه چقدر عملکرد هر یک از عناصر طراحی شما با هم خوب هست. بر اساس این تعریف میتونیم بگیم که یک طراحی میتونه بسیار یکپارچه، تقریبا یکپارچه باشه یا اینکه اصلا یکپارچگی نداشته باشه. لیست مواد غذایی ما الان تقریبا یکپارچه هست. کارمونو راه می ندازه، اما هنوز اون تاثیری که باید رو نداره!

باوجود اینکه تمام اصول طراحی در لیست موادغذایی مون رعایت شدن، نتیجه نهایی یک طراحی ضعیفه چرا ما از اول تصویر بزرگ رو در نظر نگرفتیم. حالا بریم ببنیم که تصویر بزرگ چی هست؟

تصویر بزرگ

قبل اینکه ما بزنیم بیرون برای خرید مواد غذایی مون، بهتر که قبلش وایسیم و از خودمون چند تا سوال بپرسیم:

• این لیست موارد غذایی چه نقشی رو در کل تجربه خرید من بازی میکنن؟
• دوست دارم در نهایت چجور تجربه ای از خریدم داشته باشم؟
• چطوری می تونم ارتباطی که این اطلاعات با من میسازن رو بهتر کنم؟

با فکر کردن به این موارد گسترده تر، ما از شروع کار میتونیم به یکپارچگی برسیم. شما دیگه یک لیست ساده خرید رو طراحی نمی کنید، بلکه شما دارید تجربه خریدتون رو به شکل کلی بهبود میدین!

با نگاه کردن به طرح از نقطه نظر تصویر بزرگ، شما میتونید چیدمان مغازه رو در نظر بگیرید، که بخش هایی که نیازه ببینید و بر اساس ترتیب چیدمان محصولات اون ها رو دسته بندی کنید. با این اطلاعات جدید، شما می تونید لیست خرید تون رو باز طراحی کنید که یه چیزی شبیه عکس زیر میشه:

در انتها نتیجه ای که به دست میاد حس بهتری از یکپارچگی و تجربه ی خرید رو القا میکنه. با گذاشتن یه کم وقت و انرژی بیشتر برای «طراحی» لیست خریدتون با این روش، شما در نهایت زمان و انرژی بیشتری رو برای خودتون صرفه جویی میکنید چرا که با بهره وری بالاتری خرید کرده و از مغازه خارج میشین.

درست از همونجایی که شروع میکنید به در نظر گرفتن کلیت ماجرا و تصویر بزرگ، طراحی خوب شروع میشه!

یکپارچگی در طراحی رابط کاربری

در مثال بالا ما به تسک ساده تهیه خرید از دید تصویر بزرگ نگاهی انداختیم. این رویکرد بهتره که برای طراحی رابط کاربری هم در نظر گرفته بشه.

اگه شما یک محصول کاملا جدید رو میخواید از صفر طراحی کنید، از این دست سوالات رو از خودتون بپرسید:

• این محصول چه مشکلی رو حل میکنه؟
• من مشکل رو برای چه کاربری حل میکنم؟
• پیام کلی که تو ذهن مخاطبان این محصول می مونه چی هست؟
• چطوری من می تونم محصول رو به قسمت های کوچکتر بشکونم و سازماندهی شون کنم؟

قبل از شروع طراحی مهمه که به این نوع سوالات جواب بدین.با این روش اطلاعات بیشتری جمع آوری میکنین، در نهایت خیلی آسون تر می تونید اونا رو سازماندهی کنید و به یک حس یکپارچگی برسید.

راهنمای استایل برند (Brand Style Guide) رو ایجاد کنید

برند شما شامل عناصر طراحی هست که باید جهت ثبات محصول ازش استفاده بشه. این عناصر شامل نام محصول، لوگو، مجموعه رنگ ها و تایپوگرافی هست. برندینگ همچنین شامل موارد نا محسوسی مثل، حالت Hover، صدا و تن نوشته هاتون، همون تجربه کاربر نوشتار یا یواکس رایتینگ (دوره رایگان بعدی مون?) — و جملاتی که اغلب تکرار میشن نیز میشه.

یکی از راه های بسیار موثر که مطمئن بشید که شما به یکپارچگی میتونید برسید ساخت راهنمای استایل برند، هست. برای نمونه Shopify مثال خوبیه.

راهنمای استایل برند به عنوان یک منبع برای رسیدن به یک ثبات دیداری و احساسی در تمام محصول عمل میکنه. این راهنما میتونه همه چیز رو شامل بشه از رنگ هایی که شما می تونید یا نمی تونید باهم استفاده کنید تا نحوه پیاده سازی دقیق وب سایت.

یکپارچگی در ارتباط

پیام کلی که می خواید در ذهن مخاطبانتون بمونه چیه؟ در ادامه سه نقش اصلی این پیغام رو براتون میگیم:

• بشه فهمید که دقیقا شما کی هستید؟
• چه مشکلی رو حل می کنید؟
• این مشکل رو می تونید برای چه کسانی حل کنید؟

وب سایت Optimizely، این کار رو خیلی بهینه در صفحه اولش انجام داده. پیام کلی شون اینه:

جواب پس داده. بهتر شده. اپتیمازلی پلفرم پیشتاز جهت آزمایش کردن، که به تیم های بازاریابی و محصول کمک میکنه تا تست، یادگیری و استقرار تجربه دیجیتالی موفق تری داشته باشن.

همونجور که فصل های یک کتاب یک موضوع رو در کل کتاب دنبال میکنن، برای رسیدن به یکپارچگی در ارتباط با کاربر، همه چیز باید به حول پیام اصلی بچرخه. ر بخش از صفحه اول اپتیمازلی دقیقا با این شروط مطابقت دارن.

تجربه دیجیتالی تون رو بهینه کنید و به بالاترین نرخ بازگشت سرمایه در SaaS برسید

یا یه جا دیگه میگه:

فقط Optimizely هست که بهتون اجازه این رو میده که آزمایشی در هر دو تیم بازاریابی و محصول داشته باشید.

و در جایی دیگه:

به جمع 26تا از 100 کسب و کار برتر جهانی بپیوندید که مبنتی بر آزمایش های روزانه تصمیم های هوشمندانه تری رو میگیرن.

تمام ارتباطات دیگر طراحی صفحه اول شون کمک می کنه که مفهوم اصلی رو تقویت بشه، و یک حس یکدستی و یکپارچگی در ذهن مخاطب شکل بگیره.

به فراتر از محصول تون فکر کنید

طرزفکر تصویر بزرگ شما رو محدود به محصول خودتون نمیکنه. کاربران شما با انتظار خاصی وارد وب سایت یا اپ تون میشن. چطوری مطمئن بشید که محصول تون همراستا با انتظارات کاربران هست؟

استانداردهای وب، قراردادها و روش های خوب به شما کمک میکنند که نتنها در داخل سایت خودتون به یکپارچگی برسید، بلکه باعث رسیدن بیرون از اون هم میشین. محصول شما یکی از چندین محصولی است که کاربر در طول روزش تجربه‌ش می کنه. با در نظر گرفتن چند نکته اضافی هنگام طراحی می تونید انتظارات اونا را برآورده کنید.

محک زدن (Benchmark) یک راه عالیه برای فهم اینکه کاربران ممکنه چه نوع انتظاراتی از طراحی داشته باشن. شما می تونید این کار را با مقایسه وب سایت هایی که کاربران شما بازدید می کنند و بررسی الگوهای طراحی که استفاده کردن، انجام دهید.

برای مثال، وقتی که دارید یک فروشگاه آنلاین که لوازم تخت و خواب می فروشه طراحی میکنید، بهتره که قبل از شروع طراحی نگاهی بندازید به نظرات و تجربه‌ی خرید مشتری ها در وبسایت رقباتون.

در مثال بالا ، ما لیست محصولات از 5 فروشگاه عمده را داریم که لوازم تخت خواب رو می فروشند. چند نکته جالب وجود داره که می توانیم انجام شون بدیم:

• تصاویر محصول همیشه بالاتر از جزئیات محصول هستن.
• نمادهای قلب همیشه برای اضافه کردن محصولات به لیست مورد علاقه های شما استفاده می شن.
• اطلاعات مربوط به محصول همیشه شامل عنوان، رتبه بندی و قیمت محصول هست.
• گزینه های رنگ یا بافت اغلب در لیست محصولات موجود است.
• ارسال رایگان اغلب با اطلاعات مربوط به محصول می باشد.

با استفاده از این نوع مشاهدات، می توانید انتظارات کاربر خود را پیش بینی کرده و حوالی اونا طراحی کنید. با فکر کردن درباره اینکه چگونه محصول شما در تصویر بزرگ اینترنت قرار می گیرد ، میتونید طراحی منسجم محصول و رعایت اصل یکپارچگی رو در مقیاس جهانی مدنظر قرار بدید.

جمع بندی

یکپارچگی هدف نهایی طراحی رابط کاربری هست. برای رسیدن به یک حس یکپارچگی در سراسر طراحی تون شما نیاز دارید که بزرگ فکر کنید حتی قبل اینکه شروع کنید به طراحی عناصر صفحه تون. قبل از شروع طراحی جزئیات به سوالات در مقیاس بزرگ تر جواب بدین. تمرین این درس از دوره کمک تون میکنه که از ابتدا به شروع کنید که چطوری میشه به یک حس یک دستی برسیم.

در درس های بعدی، ما می بنیم که چطور سایر اصول طراحی باهم جهت رسیدن به حس یکپارچگی در طراحی تون کمک تون میکنن.[2]

پ. ن. 1: برای یادگیری بیشتر می‌تونید به لینک های زیر مراجعه کنید.

https://www.invisionapp.com/design-defined/unity-principle-design

https://vanseodesign.com/web-design/design-unity/

پ. ن. 2: داستان مقدمه این پست و ادامه ش در کل برای رسوندن یک پیغام به شما بود و اون اینکه مفهوم یکپاچگی در طراحی چی هست؟ امیدوارم این مطلب هم یکپارچه بوده باشه، اینطور بود آیا؟ ?

پ. ن. 3: از هم تیمی گرامیم که در تهیه و ترجمه این مقاله خیلی کمک کردن تشکر میکنم، تو ویرگول میتونید گلناز شهشهانی رو دنبال کنید!

مثل همیشه خیلی خوشحال میشیم، که این مقاله رو لایک کنید، نظرات باارزشتون رو بهمون بگید و چن ثانیه وقت بزارید و این مطلبی که ساعت ها براش زحمت کشیده رو به اشتراک بزارید! ممنونم :)