اصول طراحی رابط کاربری در سال 2019

9 قانون طراحی رابط کاربری که در سال 2019 هر طراح سایت باید آن ها را بداند و به کار ببرد. با ما همراه باشید تا با قواعد و اصول اولیهطراحی رابط کاربری سایت و اپلیکیشن UI/UX آشنا شوید.

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

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

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

نه قانون طراحی رابط کاربری در سال 2019

1. طراحی رابط کاربری جدا از UX نمی باشد و باید دارای ارتباط باشند

ارتباط بین طراحی رابط کاربری و طراحی تجربه کاربری

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

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

2. کاربران سایت خود را بشناسید

فیدبک مناسب از کاربران خود دریافت کنید

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

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

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

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

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

3. المان ها را ساده و باثبات نگه دارید

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

4. اجرای سلسله مراتب بصری

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

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

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

5. از تایپوگرافی مناسب استفاده کنید

از تایپوگرافی مناسب استفاده کنید گاهی استفاده از فونت های مناسب با سایز بهینه و وزن های متفاوت تاثیر بسیار زیادی در بهینه سازی رابط کاربری و بهترین تجربه کاربر دارد.

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

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

6. از تضاد رنگی مناسبی استفاده کنید

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

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

7. فرم ها را ساده کنید

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

فرم ها یکی از مهمترین روش ها و راه هایی است که کاربران می توانند با سایت شما ارتباط برقرار کنند. همچنین مالکان سایت می توانند از طریق فرم ها اطلاعات مهم و ارزشمندی را برای دریافت کنند.

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

8. برای موفقیت در طراحی رابط کاربری(UI)، همکاری کنید

اشتراک تجربیات و ایده های تیم تاثیر به سزایی در موفقیت یک پروژه دارد.

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

9. همه موارد را باهم در نظر بگیرید

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

Linecons - دانلود بسته رایگان آیکون برداری

Linecons مجموعه ای از آیکون های برداری رایگان است. این مجموعه شامل 48 آیکون بردار مقیاس پذیر با سبک های نمایشی است. شما می توانید از این آیکون ها هنگام ایجاد رابط های وب و تلفن همراه استفاده کنید. آنها به هر موضوع طراحی سایت  مناسب خواهند بود.

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

دانلود رایگان مجموعه

شروع کار با طراحی تخت

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

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

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



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

عمق در طراحی

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



یک نمونه خوب  مقایسه iOS6 طراحی  و نسخه های قبلی iOS  است. طراحی های اولیه یک تقلید از شیء واقعی هستند. استفاده از تصاویر کامپیوتری 3d، استفاده از شیب، بافت،  bevels و embosses برای به حداکثر رساندن  ظاهر تصویر به  دنیای واقعی است.

سادگی هنوز زیبا است

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


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

تایپوگرافی در طرح های تخت

رنگ در طراحی تخت 

مینیمالیسم

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

SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو

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

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

شروع با کاربر

در شروع هر  پروژه  شما باید کاربر را در نظر بگیرید. بدون کاربر، هر چقدر سعی  کنید، حرکتی نمی کنید. احتمالا قبلا از Term User Experience (یا UX) شنیده اید، اما برای محصول شما چه معنایی دارد؟ کاملا بستگی دارد به کاربران شما. پیدا کردن آنچه که مخاطبان شما به  آن پاسخ مثبت دهند، یک موضوع پیچیده است که باید مقاله خاصی در این مورد مطالعه کنید؛ بنابراین، ما در مورد آنچه که در ذهن کاربران شما ست، بیش از حد غرق نخواهیم شد. با این حال، در هر کسب و کار ی، عدم سرمایه گذاری در تجربه کاربر همیشه سبب    شکست خواهد شد. 

طراحی واکنشگرا

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

طراحی تایپوگرافی پاسخگو

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

هنر فضای منفی

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

فرم تماس و عضویت کارا  طراحی کنید

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

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

از SVG بیشتر استفاده کنید

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

مقالات مرتبط

طراحی سایت وردپرس با H-code

بهینه سازی طراحی UI در موبایل برای تجربه تاچینگ بهتر

چگونگی طراحی فرم ها و اشکال در CSS