قوانین طراحی، نوزده اصل برای رسیدن به یک طراحی عالی

با رویکرد طراحی رابط کاربری

طراحی طراحی است

طراحی طراحی است
طراحی طراحی است

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

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




مشکل شما را دیگران حل نمی‌کنند

قانون شماره دو، راه حل مشکل و مسئله شما با راه حل مشکلات دیگران متفاوت است.

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



فرم از عملکرد پیروی نمی کند

فرم از عملکرد پیروی نمی کند
فرم از عملکرد پیروی نمی کند

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


فرم از عملکرد پیروی نمی کند
فرم از عملکرد پیروی نمی کند


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

فرم از عملکرد پیروی نمی کند
فرم از عملکرد پیروی نمی کند



هر نیرویی منجر به تکامل شکل و فرم می شود

هر نیرویی منجر به تکامل شکل و فرم می شود
هر نیرویی منجر به تکامل شکل و فرم می شود


قانون شماره چهار، روش کار شما در سازمان و سیاست‌های کاری سازمان شما نیرویی است که مشخص کننده شکل نهایی طراحی شماست.

این بدان معناست که شما در پروسه طراحی باید راه متناسب برای کار کردن در کنار این فشارها را بیابید و این دو را با هم تنظیم کنید.



در صفحات نمایش کوچک « کم زیاد است » (Less is more)

less is more
less is more

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

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



«تعادل» (Balance) باعث ایجاد نظم بصری و درک روابط می شود

تعادل
تعادل

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

تعادل
تعادل
تعادل
تعادل

ریتم بصری (Visual Rhythm) ، درک و استفاده از عناصر را سرعت می بخشد

ریتم
ریتم

قانون هفتم، استفاده از ریتم و تکرار آن.

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

ریتم
ریتم



یک طراحی خوب یک طراحی « هماهنگ » است (Harmony)

قانون هشتم، روابط عناصر در طراحی‌ رابط کاربری مانند روابط انسانی در یک رابطه دوستانه و یا روابط در محیط کار باید دارای هماهنگی باشند و تمام عناصر با یکدیگر و هماهنگ با هم کار کنند و نه بر ضد هم.

هماهنگی
هماهنگی
هارمونی
هارمونی



«تسلط»، عنصر غالب در صحفه تمرکز کاربر را هدایت میکند (Dominance)

تسلط
تسلط

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

تسلط
تسلط



همه چیز در «تراز» با یکدیگر باشند (Align)

تراز
تراز

قانون دهم، قدرت تراز بودن عناصر با هم و مرتب بودن آنها، یک قدرت فوق العاده عظیم است، به طوری می توانید از آن به عنوان یک ابزار بسیار قدرتمند در ایجاد یک رابط کاربری عالی و همچنین ایجاد یک تجربه مثبت در کاربر بهره ببرید.

تراز
تراز



مطالب مرتبط را با «مجاورت» گروه بندی و سازماندهی کنید (Proximity)

مجاورت
مجاورت

قانون یازدهم، مجاورت. این مسئله بسیار مهم است، درست مانند هم‌ترازی، باید مطالب مربوط به هم را با مجاورت گروه‌بندی کنید .بعضی مواقع تنها لازم است به فضای منفی (فضای خالی) میان عناصر توجه کنید که با کم کردن این فضا آنها را در ارتباط با هم نشان می دهید و با زیاد کردن آن آنها را در دو گروه متفاوت ترسیم می کنید، به آسونی روشن کردن یک فشفشه.

مجاورت
مجاورت

با رعایت این اصل (مجاورت) و توجه به فضای سفید، حتی بدون در نظر گرفتن ظاهر رابط کاربری، تجربه کاربری بینهایت مثبت خواهد شد.



از «رنگ» در جهت برقراری ارتباط و تاثیر متقابل استفاده کنید

نمونه استفاده نادرست از رنگ
نمونه استفاده نادرست از رنگ

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

نمونه استفاده نادرست از رنگ
نمونه استفاده نادرست از رنگ

بله می‌شود! به :)) به تصویر بالا نگاه کنید.

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

استفاهده از رنگ در طراحی
استفاهده از رنگ در طراحی



رنگ ها را بر اساس معانی، احساسات و برند انتخاب کنید

استفاده از رنگ بر اساس احساسات برند
استفاده از رنگ بر اساس احساسات برند

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

رنگ
رنگ



«تضاد» همیشه برنده است (Contrast)

تضاد
تضاد

قانون چهاردهم، در مقابل استفاده از رنگ این استفاده از تضاد و کنتراست است که جنگ را تمام می کند و هیچ چیز قدرتمند دیگری وجود ندارد.



«تایپوگرافی» همیشه باید به صورت هدفمند طراحی شود (Typography)

تایپوگرافی
تایپوگرافی

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

تایپوگرافی
تایپوگرافی



«آیکون» ها باید قابل شناسایی و به یادآوری باشند

انتخاب آیکون
انتخاب آیکون

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

انتخاب آیکون
انتخاب آیکون



«زمینه و موضوع استفاده» شکل ظاهری را مشخص میکند (Context of use)

موضوع طراحی
موضوع طراحی

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

موضوع طراحی
موضوع طراحی



ساده‌تر بهتر است

سادگی
سادگی

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

ساده تر بهتر است
ساده تر بهتر است



بر روی جدا کردن «محتوا» از «کنترل ها» کار کنید

جدا کردن محتوا از کنترل
جدا کردن محتوا از کنترل

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

جدا کردن محتوا از اکشن و کنترل
جدا کردن محتوا از اکشن و کنترل



در آخر پیشنهاد می کنم به اصل اول توجه ویژه ای داشته باشید و همیشه طراحی را طراحی بدونیم، همیشه به حل مساله فکر کنیم ، انواع راه ها و متدولوژی ها برای حل مساله رو مطالعه کنیم و هر کاری که میکنیم طراح باشیم.