user-interface-a.jpg
۲۱/مرداد/۱۳۹۷

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

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

۱- «شما» را محوریت قرار دهید

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

هدف‌تان ایجاد تجربه کاربری فریبنده و جذابی است، درست است؟ تجربه‌ای که باعث می‌شود مردم فکر کنند بخشی از کار شما هستند. این دقیقا قدرت کلمه «شما» است.

بسیاری از اوقات وبسایت‌ها قدرت این کلمه ساده را نادیده می‌گیرند. به عنوان مثال آن‌ها می‌نویسند: «بروزرسانی‌ها را می‌توان از طریق پنل رویدادها مشاهده کرد»

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

چنین تغییرات کوچک ولی معناداری می‌توانند تاثیر بسیار زیادی روی محصول شما داشته باشند.

۲. «ما» را محوریت قرار ندهید

برخی اوقات یک شرکت یا تجارت محصول جدیدی را معرفی می‌کنند و در معرفی آن با جمله «ما هیجان زده هستیم که می‌خواهیم …» یا جملات مشابه کار را شروع می‌کنند.

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

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

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

۳. شبیه به هوشمندها نباشید، هوشمند باشید!

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

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

کلمات بزرگ و پیچیده باعث می‌شوند که کاربران سرخورده شوند و سرگیجه بگیرند. بیگانگی و گیجی مطمئنا در نهایت تجربه کاربری خوبی را از خود بجای نمی‌گذارند.

برای مثال من می‌توانم بگویم که من یک disestablishmentarian هستم، با این حال می‌توانم به صورت ساده‌تر بگویم که من وظیفه تفکیک کلیساها و مکان‌ آن‌ها از همدیگرم.

پس همواره سعی کنید از چیزی که نشان می‌دهید و می‌گویید هوشمندانه‌تر رفتار کنید.

۴. محتوای‌تان را با صدای بلند بخوانید

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

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

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

۵. موارد اضافی را حذف کنید

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

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

بنابراین کلمات و جملاتی را که لازم نیستند، حذف کنید.

۶. ابتدا بنویسید سپس ویرایش کنید

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

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

۷. به صورت آزادانه برچسب گذاری کنید

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

برای مثال به تصویر زیر نگاه کنید:

9 راه برای بهبود تجربه کاربری محتوای وبسایت

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

9 راه برای بهبود تجربه کاربری محتوای وبسایت

عناوین سر جای‌شان آمده‌اند و از این رو همه چیز به خوبی قابل مشاهده است.

۸. به صورت واضح لینک‌دهی کنید

اگر تا به حال یک وبلاگ را با سیستمی مانند وردپرس مدیریت کرده باشید، با آن لینک‌هایی که عبارت Read More یا مواردی مشابه را برای‌تان ظاهر می‌کنند آشنایی دارید.

بهتر است از انجام چنین کاری دست بردارید! چرا؟ به این دلیل که چنین لینک‌هایی برای سئو، استفاده‌پذیری و دسترسی‌پذیری مناسب نیستند.

بجای اینکه روی کلمه Read More در تمام مقالات تمرکز کنید، روی کلمه کلیدی مربوط به هر مقاله تمرکز نمایید. این کار می‌تواند تاثیر بسیار خوب و عمیقی را روی سئو شما بگذارد.

تصور کنید که یک کاربر از طریق Screen Reader وارد صفحه وبسایت شما می‌شود و تمام لینک‌های برای وی تنها یک چیز را می‌گویند: Read More … چنین موضوعی نمی‌تواند برای یک فرد با اختلالات بینایی معنی و مفهومی داشته باشد.

۹. طراحی برای محتوا

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

محتوای بهتری بنویسید

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

تمام این کارها را با محتوای‌تان انجام دهید و منتظر موفقیت باشید.

منبع راکت


4.jpg
۰۶/اردیبهشت/۱۳۹۷

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

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

مورد دیگری که جالب است بدانید این است که تا سال ۲۰۱۰ طراحی واکنشگرا ادامه پیدا نکرد، تا اینکه در آن سال Ethan Marcotte به صورت رسمی آن را ابداع نمود.

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

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

هسته اصلی طراحی وب واکنشگرا

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

‍‍۱. Fluid Grids

Fluid Grids

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

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

امروزه سیستم گریدبندی محلی در سی‌اس‌اس نیز پدید آمده که ما آن‌ را با «CSS Grid Layout Module» می‌شناسیم. میزان پشتیبانی مرورگرها از آن هر روز بهتر می‌شود و این موضوع باعث شده که طراحان بتوانند به صورت بسیار بهتری مشغول به طراحی گرید‌ها و ساختار‌های واکنشگرا شوند.

۲. Media Queries

Media Queries از سال ۲۰۰۰ به بعد وجود داشت و می‌شد از آن استفاده کرد، اما این موضوع تا سال ۲۰۱۲ نتوانست از سمت W۳C به یک استاندارد پیشنهادی تبدیل شود. مشابه با fluid grids، مدیا کوئری‌‌ها نیز یک تکنولوژی بنیادی را در پس طراحی واکنشگرا نشان می‌دهند. به لطف Media Queries طراح می‌تواند یکسری داده‌ها را از کاربر جمع‌آوری کند که این موضوع باعث می‌شود بهتر اندازه صفحه نمایش کاربر و حالت آن را مشخص کند. بعد از اینکه اطلاعات جمع‌آوری شد، فایل CSS براساس تنظیمات کاربر نمایش پیدا می‌کند.

۳. تصاویر و رسانه‌های واکنشگرا

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

یک راه بسیار مناسب و عالی برای کار کردن در جهت واکنشگرا نمودن تصاویر و… استفاده کردن از max-width است. یک مثال ساده از این مورد شبیه به زیر است:

img {
    max-width: 100%;
    height: auto; 
}

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

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 20%;
    height: 0;
}
 
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

در پایان

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


3.jpg
۰۱/اردیبهشت/۱۳۹۷

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

۱- تست سازگاری موبایل با ابزار گوگل

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

۲. Screenfly

چگونه واکنشگرا بودن وبسایت را بهتر آزمایش کنیم

Screenfly ابزاری است که توسط QuirkTools عرضه شده است و می‌تواند وبسایت شما را روی صفحات مختلفی نشان دهد. این ابزار مانند ابزار گوگل موارد کمک کننده‌ای برای درست کردن و تست بهتر وبسایت واکنشگرا را نمی‌دهد، با این حال می‌تواند وبسایت شما را روی دستگاه‌های مختلفی مانند دسکتاپ، موبایل، تی‌وی و… به خوبی نمایش دهد.

۳. MobileTest.me

چگونه واکنشگرا بودن وبسایت را بهتر آزمایش کنیم

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

در پایان

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

منبع راکت


Responsive-Themes.jpg
۳۰/فروردین/۱۳۹۷

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

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

چگونه طراحی واکنشگرا را پیاده‌سازی کنیم

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

۱. بیاموزید که بازدیدکنندگان‌تان چگونه از موبایل استفاده می‌کنند

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

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

۲. برای طراحی‌تان برنامه‌‌ریزی کنید

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

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

  • Adobe Edge Reflow: محصولات ادوبی این قابلیت را می‌دهند تا بتوانیم طراحی بصری یک وبسایت واکنشگرا را از طریق فوتوشاپ و تبدیل آن‌ها به HTML و CSS انجام دهیم. همچنین قابلیت اضافه کردن breakpointها را نیز می‌دهد.
  • InVision: با تشکر از InVision شما می‌توانید نمونه‌های اولیه تعاملی از وبسایت را ارائه کنید. کاربران با استفاده از یک لینک می‌توانند منوها، دکمه‌ها، حالت اسکرول و… را امتحان کنند و برای‌تان فییدبک قرار دهند. این ابزاری مناسب برای مشاهده کردن حالت وبسایت با داشتن محتوای مختلف است.
  • Wirefy: این مورد برای زمانی که می‌خواهید طراحی‌تان را براساس محتوا ایجاد کنید بسیار مناسب است. این مورد به شما اجازه می‌دهد تا گرید‌های واکنشگرا و نمونه‌های اولیه‌ای را بدون اینکه به صورت دستی اندازه‌ها را محاسبه کنید داشته باشید.

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

۳. در رابطه با فهرست ناوبری دقیق باشید

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

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

۴. تصاویر را بهینه‌سازی کنید

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

این بدان معناست که تصاویر باید در قالب‌بندی مناسبی ذخیره شوند – JPG برای تصاویر و عکاسی و PNG-۸ برای آیکون‌ها و لوگوهایی که نیاز به پس‌زمینه شفاف دارند. براساس این موارد شما باید اندازه تصاویر را با استفاده از ابزارهایی مانند TinyJPG فشرده‌سازی نمایید. همچنین این موضوع که باید تصاویر را برای breakpointهای مختلف موبایل بهینه‌ نمایید را در نظر بگیرید.

بهینه‌سازی تصاویر

۵. رویکردی سازگار با موبایل را در نظر داشته باشید

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

۶. یاد بگیرید که چگونه از Media Querieها استفاده کنید

Media querieها اولین مواردی بودند که در سی‌اس‌اس پیاده‌سازی شدند، اما عملا به دلیل اینکه در ابتدا مرورگرها از آن پشتیبانی نمی‌کرد، قابل استفاده نبودند، تا اینکه در سال ۲۰۱۲ به صورت رسمی توسط مرورگرها پشتیبانی شد و استفاده از آن توسط طراحان وب شروع گشت. هدف اصلی Media querieها این است که لایه‌بندی وبسایت را با عرض‌های مختلفی از صفحه نمایش بهینه کنند.

وقتی از این media querieها استفاده کنید، محتوا به اندازه‌های متفاوت از صفحه دستگاه جواب و به آن‌ها واکنش نشان می‌دهد. به صورت مختصر، یک مدیا کوئری وضوح، عرض و جهت دستگاه را بررسی می‌کند و CSSهای تعیین شده برای آن وضعیت را اجرا می‌نماید. یک مثال از این حالت را در زیر مشاهده می‌کنید:

@media screen and (min-width:500px) {
     
    your CSS rules here
 
}

۷. از کیبورد مناسب در فرم‌ها استفاده کنید

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

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

۸. مطمئن شوید که دکمه‌ها در صفحات کوچک قابلیت دسترسی‌پذیری آسان‌تری دارند

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

مطمئن شوید که با استفاده از این دو نکته، دکمه‌های‌تان به سادگی تشخیص داده می‌شود:

  • از رنگ‌ها برای اینکه آن‌ها را از بقیه صفحه جدا سازد استفاده کنید.
  • از یک مربع یا دایره برای نمایش آن‌ها استفاده نمایید.

همانگونه که اندازه بزرگ‌تر می‌شود سعی کنید که میزان padding را نیز افزایش دهید تا ناحیه کلیک‌پذیر بزرگ‌تر شود.

۹. تایپوگرافی را بهینه کنید

وقتی موضوع به متن در وبسایت می‌رسد، شما باید مطمئن شوید که متن در صفحاتی با اندازه کوچک قابلیت خواندن بالایی دارد. یک اندازه خوب و منطقی برای متون در وبسایت ۱۶ پیکسل یا ۱em است. بعد از این باید مطمئن شوید که ارتفاع خطوط در وبسایت مناسب است، برای مثال میزان ۱.۵em می‌تواند ارتفاق بسیار درستی باشد.

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

۱۰. از ریزتعاملات استفاده کنید

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

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

برای خواندن اطلاعات بیشتر در رابطه با ریزتعاملات می‌توانید مطلب «استفاده از متدهای ریز تعاملات در وبسایت» را مطالعه کنید.

۱۱. از فریمورک‌ها استفاده کنید

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

بوت استرپ

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

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

۱۲. به طراحی مینیمالیستی ملحق شوید

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

۱۳. مطمئن شوید که دکمه‌های به اشتراک گذاری محتوا را مسدود نمی‌کنند.

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

در پایان

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

منبع : راکت


layout_units_dp-800x547.png
۲۵/فروردین/۱۳۹۷

طراحی متریال به‌تدریج در حال گسترش است و طراحان و شرکت‌ها در حال بازطراحی اپلیکیشن های خود بر پایه متدها و الگوی متریال هستند. گوگل سرمایه‌گذاری معنوی و زمانی بسیاری بر روی این زبان طراحی کرده است. از این‌رو به نظر می‌رسدطراحان نیز با تمایل به سمت این متد یکپارچه و حساب‌شده در حرکت‌اند. در این نوشته قصد دارم در مورد واحدها واندازه‌گیری در طراحی متریال مطالبی را عنوان کنم. واحدها در زمینه‌های مختلف دارای معانی متفاوتی هستند. در اینجا بهپیکسل‌های مستقل از دستگاه (device-independent pixels) پیکسل‌های مقیاس‌پذیر (scaleable pixels) و همین‌طور تراکم پیکسل (pixel density) خواهیم پرداخت.

 

– تراکم پیکسل (DPI)

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

DPI = عرض صفحه‌نمایش (یا ارتفاع) در مقیاس پیکسل (تقسیم‌بر) عرض صفحه‌نمایش (یا ارتفاع) در مقیاس اینچ.

برای آشنایی و اطلاع بیشتر با فرمولاسیون تراکم پیکسل به این مطلب و برای یافتن سریع DPI به سایتpixeldensitycalculator مراجعه کنید.

 

– پیکسل مستقل از تراکم (DP)

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

پیکسل مستقل از تراکم

وضوح صفحه عرض صفحه نمایش در پیکسل
(DPI * عرض در مقیاس اینچ)
عرض صفحه نمایش در پیکسل مستقل از تراکم
120dpi 180px 240dp
160dpi 240px 240dp
240dpi 360px 240dp

یک DP برابر است با یک پیکسل فیزیکی بر روی صفحه نمایشی با تراکم ۱۶۰DPI. فرمول محاسبه DP برابر است با:

DP = (عرض در مقیاس پیکسل (ضربدر) ۱۶۰) (تقسیم بر) DPI

بعنوان مثال در طراحی یک آیکون: ۳۲×۳۲ پیکسل با ۳۲۰dpi برابر است با ۱۶×۱۶ DP.

در استایل نویسی به زبان CSS جائیکه از DP یا SP استفاده شده است فقط باید از پیکسل استفاده نمود. واحد DP فقط در برنامه نویسی و توسعه اندروید بکار می‌رود.

 

– پیکسل مقیاس پذیر (SP)

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

 

– مقیاس تصاویر

مقیاس تصاویر در وضوع صفحه نمایش‌های مختلف را می‌توانید از جدول زیر استخراج نمایید.

مقیاس تصاویر

وضوح تصویر DPI نسبت پیکسل اندازه تصویر (پیکسل)
xxxhdpi 640 4.0 400×400
xxhdpi 480 3.0 300×300
xhdpi 320 2.0 200×200
hdpi 240 1.5 150×150
mdpi 160 1.0 100×100

 

– مقایسه واحدها

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

تراکم شرح واحد در هر اینچ فیزیکی وابستگی به تراکم اندازه مشابه در هر نوع صفحه نمایش
px پیکسل متفاوت خیر خیر
in اینچ 1 بله بله
mm میلیمتر 24.5 بله بله
pt نقطه 72 بله بله
dp تراکم مستقل از پیکسل حدود 160 بله خیر
sp مقیاس مستقل از پیکسل حدود 160 بله خیر

 

در مطالب بعدی به موضوعات دیگری از طراحی متریال خواهیم پرداخت.

منابع: google


357727-1200x750.jpg
۲۵/فروردین/۱۳۹۷

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

– بخش رابط کاربری (UI regions)

ساختار موبایل و تبلت شامل یک نوار برنامه (app bar) و دکمه شناور اکشن بصورت دائمی است. بخش داخلی (content area) محتوای اصلی اپ را در بر می‌گیرد. یک نوار اختیاری می‌تواند برای قابلیت‌های اضافی پایین دکمه اکشن افزوده شود. ناوبری کناری (side nav) بطور کلی بخشی از محوطه اپ را پوشش خواهد داد.

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

دوری از مناطق L شکل در طراحی متریال

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

20150809172740

لبه‌ها را با کارت (card) و یا دکمه شناور اکشن از هم جداسازی کنید.

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


– نوار ابزار (Toolbars)

نوار ابزار دسترسی‌های متنوعی ایجاد می‌کند و می‌تواند شامل ابزارآلات و اکشن‌های مختلف بسته به نیاز برنامه باشد. مثلا یک منوی ثانویه را باز کند. دکمه بازگشت یا به اشتراک گذاری را شامل شود. ابزار جستجو یا ابزارهای ویرایشگر متن مثل انتخاب متن، کپی و … را شامل شود. در زیر نمونه ای از کاربرد نوار ابزار را مشاهده می‌کنید:


– نوار برنامه (App bar)

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

  • بعنوان یک دکمه کنترل برای باز کردن کشوی ناوبری بکار رود.
  • بعنوان یک آیکون فلِش رو به بالا برای سریع طی کردن طولی برنامه به سمت بالا (همانند دکمه برو به بالا در طراحی سایت) بکار رود.
  • اگر نیازی به ناوبری در نمایش فعلی نیست بطور کامل حذف شود.

layout_structure_appbar_structure1

عنوان (title) بکار رفته در نوار برنامه نشان دهنده عنوان صفحه جاری است که می‌تواند بعنوان عنوان برنامه، عنوان صفحه و یا فیلتر صفحه، بسته به موقعیت صفحه بکار رود.

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

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

20150809181028

ارتفاع پیش فرض نوار برنامه به شرح زیر است:

  • موبایل: ۴۸dp
  • موبایل در حال عریض: ۵۶dp
  • تبلت و دسکتاپ: ۶۴dp

منو شبیه یک برگه کوچک یادداشت است که بصورت موقت برای اکشن‌های اضافی ظاهر می‌شود. منو می‌تواند همچنین شامل آیکون یا آواتار باشد.


– نوار سیستمی (System bar)

نوار وضعیت (status bar) شامل آیکون‌های اطلاع‌رسانی و سیستمی پیش فرض اندروید مانند وضعیت آنتن، باطری، ساعت و … است. نوار پنجره (window bar) در برنامه‌هایی مانند گوگل کروم شامل اکشن‌های مربوط به یک پنجره نظیر کوچک کردن، بستن و … است. نوار وضعیت در برنامه‌های عادی نمایش داده می‌شود اما در برنامه کروم، مخفی شده و جای خود را به نوار پنجره می‌دهد. در این صورت از فضای صفحه استفاده کافی شده و تمرکز روی برنامه و محتوای آن بیشتر می‌شود. ارتفاع نوار وضعیت ۲۴dp و نوار پنجره ۳۲dp پیشنهاد شده است.

20150810121956

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

نوار ناوبری اندروید (android navigation bar) محل قرار گرفتن کنترل‌های سیستمی اندروید یعنی بازگشت، خانه و اپ‌های اخیر، است. همچنین در اندروید ۲.۳ به پایین نمایش دهنده منوی اپ می‌باشد. ارتفاع پیشنهادی برای این نوار ۴۸dp بوده و رنگ آن می‌تواند تیره، روشن و یا شفاف باشد.


– ناوبری کناری (Side nav)

ناوبری کناری می‌تواند به صورت ثابت یا موقتی در صفحه نمایش داده شود. این نوار می‌تواند در سمت چپ یا راست قرار گیرد. نمایش محتوا از سمت چپ به راست پیشنهاد شده به صورت اولیه است. بهتر است از ناوبری سمت راست بصورت ثانویه و برای محتوای اضافی‌تر استفاده کنید. در آینده در مورد محتوا و ساختار این ناوبری صحبت خواهیم کرد. برای بدست آوردن عرض این بخش باید عرض صفحه نمایش را از ۵۶dp کم کنیم. یعنی حداقل ۵۶dp از صفحه زیر نمایش داده شود. حداکثر عرض ناوبری ۳۲۰dp می‌باشد. این حداکثر عرض در ناوبری چپ کاربرد دارد. این مقدار برای لی‌اوت دسکتاپ ۴۰۰dp است. در صورتیکه از ناوبری راست استفاده کنیم می‌شود از کل عرض صفحه استفاده کرد.

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

– چارچوب سفید (Whiteframes)

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

دانلود وایت فریم متریال دیزاین

 

*منبع: Google


ux-design-benefits.png
۲۵/فروردین/۱۳۹۷

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

 

۱٫

Don’t Make Me Think, Revisited
Steve Krug
یکی از بهترین کتاب ها در زمینه کاربردپذیری در وب و تجربه کاربری است که خواندنش بشدت توصیه شده. کتاب بطور کلی حاوی گفتمان: طرح نباید مخاطب را وادار به تفکر و درگیری کند، است. ویرایش سوم این کتاب حاوی مطالب جدید و بروزی است که بهتر است آن را مطالعه کنیم. / لینک دانلود

۲٫

The Design of Everyday Things
Norman, D. A
اگر به طراحی علاقه خاصی دارید کتاب طراحی همه چیز، کتابی کلاسیک و اساسی در زمینه طراحی است که به تعبیری سنگ بنای طرح های امروزی را بنا نهاده. این کتاب به بررسی تاثیرات احساسی و رابطه بین محصول و کاربر می پردازد. مفاهیم پایه ای چون تصویر ذهنی، خطا، کارایی و … در این کتاب ارائه شده است. / لینک دانلود

۳٫

Designing Interfaces: Patterns for Effective Interaction Design
Jenifer Tidwell
یکی از کتاب های مطرح در زمینه طراحی رابط کاربری که اصول و نکات بسیاری در زمینه بهبود طراحی تعاملی ارائه می دهد. / لینک دانلود یافت نشد

۴٫

About Face 3: The Essentials of Interaction Design
Alan Cooper
این کتاب نیز در مورد طراحی تعاملی سخن بسیار دارد. این کتاب با موضوعاتی چون فهم طراحی هدفمند، طراحی رفتار و فرم، طراحی جزئیات سیستم ها و روابط تعاملی و … به سراغ کلیه طراحان اعم از رابط کاربری و طراحان محصول رفته است. حتی طراحان صنعتی نیز مشتری این کتاب هستند. / لینک دانلود

۵٫

Web Form Design: Filling in the Blanks
Luke Wroblewski
فرم ها یکی از بخش های مهم در طراحی وب سایت ها و اپلیکیشن ها هستند. توجه به رابط کاربری و تجربه کاربری در طراحی فرم ها بسیار مهم و ضروری است. از این رو نویسنده مطرح Wroblewski این کتاب را به رشته تحریر درآورده و از تجارب کاربردی خود در طراحی فرم ها نوشته است. / لینک دانلود

۶٫

Rocket Surgery Made Easy
Steve Krug
کتابی دیگر از نویسنده اولین کتابی که معرفی کردیم یعنی آقای Kurg. این کتاب هم به تجربه کاربری، تمرکز روی مشکلات کاربردپذیری و ارائه راهکارها برای حل‌شان می پردازد. این کتاب یک راهنمای خودمحور است و نیای نیست برای تست و بررسی کاربردپذیری محصول‌تان تیم تشکیل دهید.

۷٫

The Principles of Beautiful Web Design
Jason Beaird and James George
این کتاب بصورت تخصصی در حوزه طراحی وب نوشته شده است. چگونگی استفاده از رنگ ها، لایه بندی ها، تایپوگرافی، استفاده از فضاهای خالی و گریدها، آشنایی و کار با فریم ورک ها و … از مباحث ذکر شده در این کتاب هستند. این کتاب توسط سایت sitepoint منتشر شده است. / لینک دانلود

۸٫

Designing Web Interfaces: Principles and Patterns for Rich Interactions
Bill Scott
یکی از بهترین کتاب ها برای آشنایی با مبانی و مفاهیم طراحی رابط کاربری زیبا و موثر در حیطه وب است. این کتاب توسط طراح رابط کاربری باسابقه یعنی بیل اسکات نگارش شده و حاوی نکات و اصول مهمی برای علاقمندان و طراحان وب است. / لینک دانلود یافت نشد

۹٫

The Humane Interface: New Directions for Designing Interactive Systems
Jef Raskin
مثل سایر کتاب ها با موضوع طراحی رابط کاربری و تعامل کاربر با سیستم این کتاب نیز که با نام رابط کاربری انسانی منتشر شده است به اصول و قواعد طراحی محصول بر پایه تعامل با انسان می پردازد. این کتاب در سال ۲۰۰۰ چاپ شده و از کتاب های مطرح در این زمینه بشمار می رود. / لینک دانلود

۱۰٫

The Elements of User Experience: User-Centered Design for the Web
Jesse James Garrett
کتابی است کم حجم اما مفید در زمینه طراحی وب کاربر محور. در این کتاب به اصول طراحی رابط کاربری که کاربر را مجذوب و شیفته خود نماید پرداخته شده است. / لینک دانلود

۱۱٫

۱۰۰Things Every Designer Needs to Know About People
Susan Weinschenk
این کتاب سعی دارد طبق تحقیقات صورت گرفته و اصول کلی نگاه و دید کاربر به محصول ما را برای طراح روشن سازد. اینکه کاربر چگونه فکر می کند، چگونه می بیند، چگونه تمرکز می کند و … از این رو مطالعه این کتاب برای طراحان محصول و رابط کاربری از جهت شناخت رفتار کاربر می تواند مفید باشد. / لینک دانلود

۱۲٫

Designing with the Mind in Mind
Jeff Johnson
یکی از کتاب های بسیار کاربردی در زمینه درک اصول و مفاهیم طراحی رابط کاربری که همراه با تصاویر و مثال های واقعی از فضای وب است. همچنین به ابعاد روانشناختی و تعاملات محصول و کاربر در این کتاب پرداخته شده. / لینک دانلود

۱۳٫

Simple and Usable Web, Mobile, and Interaction Design
Giles Colborne
همانطور که از نام کتاب پیداست در این نوشتار به دو اصل سادگی و کاربردپذیری در طراحی تعاملی وب و موبایل پرداخته شده. مثلا کاربران ترجیح می دهند در مواجه با محصول انتخاب های محدودی داشته باشند تا با گزینه های متعدد و گمراه کننده مواجه شوند. / لینک دانلود

۱۴٫

The Laws of Simplicity
John Maeda
نویسنده در ابتدای کتاب می گوید سادگی برابر عاقلی است و بعبارتی طراح عاقل و خوشفکر کسی است که طرحی ساده ولی همراه با اصول و قواعد آن ارائه دهد. در این کتاب سادگی در طراحی و حد و مرز آن بررسی و تعریف شده است. / لینک دانلود

۱۵٫

UX Design Knowledge
UXPing
مجموعه کتابچه های کاربردی و مفید سایت uxpin که در زمینه طراحی رابط کاربری و تجربه کاربری است. عناوین متعددی از این کتابچه ها تاکنون منتشر و به رایگان ارائه شده است. سادگی نگارش و توجه به ترندهای روز و موضوعات گوناگون و تخصصی از مزایای این کتابچه هاست. / لینک دانلود

۱۶٫

Smashing’s Books
Smashing
وبلاگ smashing یکی از منابع با ارزش برای طراحان است. چند سالی است این وبلاگ مطالب خود را در قالب کتاب هایی به چاپ می رساند که در میان طراحان معتبر و کاربردی است و خواندن آنها جزء اولیت های ما محسوب می شود. / لینک دانلود
لطفا در صورت تمایل برای تکمیل این لیست کتاب ها و منابعی که مطالعه و یا قصد آن را دارید در بخش نظرات ارسال کنید تا این مطلب به روز رسانی شود و سایر دوستان و علاقمندان نیز از آنها مطلع شوند.

357860-1200x675.jpg
۱۵/فروردین/۱۳۹۷

بررسی ما رابط کاربری در طراحی وب و اندکی طراحی نرم‌افزارهای تلفن همراه است. تعریف راحت و کوتاه رابط کاربری را می‌توان «رابطه میان کامپیوتر و انسان» دانست. که دو دسته اصلی و مهم آن: Interaction-desig و Visual-design هستند. تعریف رابط کاربری از نگاه ویکی‌پدیا:

واسط کاربر(به انگلیسی: User Interface و به اختصار: UI) یک میانجی بین انسان و ماشین (دستگاه) است که امکان استفاده از ماشین را برای انسان فراهم می‌کند. واسط کاربر، بخش دیدنی و قابل لمس یک ابزار است که کاربر مستقیماً با آن سر و کار دارد. این اصطلاح را میانای کاربر، میانجی کاربر و رابط کاربرهم ترجمه کرده‌اند.

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

رابطه UI و UX

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

 مبانی طراحی رابط کاربری

یک رابط کاربری خوب راز بزرگ و پیچیده ای ندارد! بلکه تنها باید روی رابط کاربری برای یک بار مهندسی انجام شود. منبع(۱۰ user Interface Design Fundamentals)

۱- کاربرتان را بشناسید

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

۲- به نمونه های مشابه توجه کنید!

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

۳- استوار باشید!

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

۴- استفاده درست و مناسب از اجزا و اشیا

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

۵- نظرات را دریافت کنید

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

۶- بخشنده باشید!

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

 

۷- به کاربرتان قدرت دهید!

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

۸- زبان شما، زبان کاربر

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

۹- ساده باشید

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

ده ویژگی یک طراحی خوب

  1. طراحی خوب کاملاً ابتکاری است: برای نو آوری و ابتکار، امکاناتی وجود دارد. پیشرفت‌های تکنولوژیکی همیشه فرصت‌های جدیدی برای طراحی خلاقانه ایجاد می‌کند. ولی طراحی ابتکاری همیشه با تکنولوژی ابتکاری در ارتباط است و نمی‌تواند پایان راه باشد.
  2. طراحی خوب باعث مفیدتر شدن محصول می‌شود: هر محصولی خریداری می‌شود تا مورد استفاده قرار گیرد. این محصول باید از نظر عملکردی، زیبایی‌شناختی و روانی رضایت مشتریان خاصی را جلب کند. طراحی خوب با نادیده گرفتن هرچیزی که می‌تواند از سود محصول کم کند، بر فایده یک محصول تأکید می‌نماید.
  3. طراحی خوب، زیبایی‌شناختی است: کیفیت زیبایی‌شناختی محصول، از مفید بودن آن جدا نیست؛ زیرا محصولات همه روزه مورد استفاده قرار گرفته و بر مردم و رفاه آن‌ها تأثیر می‌گذارند. تنها اشیائی می‌توانند زیبا باشند که به خوبی طراحی شده‌اند.
  4. طراحی خوب، یک محصول را قابل درک می‌کند: این مورد، ساختار محصول را توضیح می‌دهد. یک طراحی خوب می‌تواند باعث شود محصول، عملکرد خود را تشریح نموده و کاربر، درک درستی از آن پیدا کند. در بهترین حالت می‌توان گفت طراحی خوب، واضح و بدون نیاز به تفسیر است.
  5. طراحی خوب مزاحمتی ایجاد نمی‌کند: محصولاتی که اهدافی را برآورده می‌کنند، مانند ابزار هستند. آن‌ها نه نمایشی هستند و نه آثار هنری. از این رو طراحی آن‌ها باید هم خنثی و بیطرف و هم مهار شده باشد تا از داوری‌های کاربران در امان بمانند.
  6. طراحی خوب، صادق و درستکار است: طراحی خوب، یک محصول را ابتکاری‌تر، قدرتمندتر یا ارزشمندتر از چیزی که هست نمی‌کند و هیچ‌وقت سعی ندارد به مشتری قولی بدهد که از پس عمل به آن برنمی‌آید.
  7. طراحی خوب، پایدار و ماندگار است: طراحی خوب، از مد روز بودن اجتناب می‌کند و از این رو هرگز قدیمی و کهنه نخواهد شد. برخلاف طراحی مد روز، یک طراحی خوب، سال های زیادی پایدار می‌ماند؛ حتی در جامعه امروزی.
  8. طراحی خوب به جزئیات هم کاملاً دقت می‌کند: هیچ چیز نباید خودسرانه بوده و به شانس واگذار شود. دقت و صحّت در فرایند طراحی، احترام به مشتری را نشان می‌دهد.
  9. طراحی خوب، دوستدار محیط زیست است: طراحی، نقش مهمی در حفاظت از محیط زیست دارد؛ منابع را حفظ کرده و آلودگی‌های فیزیکی محصول را به حداقل ممکن می‌رساند.
  10. طراحی خوب تا حدّ ممکن مینیمال است: این ویژگی خوبیست؛ زیرا طراحی خوب بر جنبه‌های اساسی تمرکز دارد و محصولات زیر بار جنبه‌های غیرضروری نمی روند. این یعنی بازگشت به سادگی و خلوص.

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


تمامی حقوق این وب سایت نزد عباسعلی بهرامی محفوظ است.