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

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

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

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

جاش کلارک ، نویسنده کتاب Tapworthy- Designing Great iPhone Apps ، سه دسته برای دسترسی به موبایل وب را ارائه می دهد:

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

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

ملاحظات اساسی برای طراحی موبایل

صفحه های کوچک

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

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

یک روند خوب برای دنبال کردن این خواهد بود:

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

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

جهت یابی را ساده نگه دارید

صفحه کلیدها و صفحه های لمسی مانند موس ها  جهت یابی دقیق ایجاد نمی کنند، بنابراین سعی کنید:

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

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

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

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

برای بوکمارک‌های مربوطه، توضیحات صفحه را کوتاه و دقیق کنید.

ورودی های مورد نیاز کاربران را کاهش دهید

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

در نظر داشته باشید:

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

به یاد داشته باشید اتصالات با تلفن همراه پایدار نیستند

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

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

تجارب مشابه و یکپارچه

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

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

نگاهی به دور

تلفن همراه با محیط دسکتاپ سنتی متفاوت است و در حالی که استانداردهای  UX و ملاحظاتی درباره ی قابل استفاده بودن در زمینه موبایل مورد توجه است، محیط موبایل ملاحظات جدیدی برای طراحی هم به ارمغان می آورد. برای طراحان موبایل توجه به جزئیات برای ارائه بهترین تجربه های ممکن به کاربر بسیار مهم است.

 

منبع: interaction-design.org

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

    سایز کوچک: فقط شامل اجزای بسیار اصلی و ویژگی های آن است

    قابل تنظیم: برای اجازه دادن به بیان نام تجاری در برنامه های مختلف

    علامت گذاری: چارچوب برای استفاده در هردسته از برنامه ها

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

برخی از آنها دارای ویژگی های زیادی بودند که من نیازی به آنها نداشتم ، برخی از آنها سفارشی سازی کم را مجاز نمی دانند و بیشتر آنها براساس یک چارچوب خاص مانند React ، Vue یا Angular ساخته شده اند.

من ساختن Kor را در 21 نوامبر 2019 آغاز کردم و اولین نسخه 4 روز بعد منتشر شد. از امروز ، 7000+ بارگیری در npm ، 92 ستاره در GitHub و 300 کاربر متوسط ماهانه دارد.

۱- تعریف قوانین پایه سیستم های طراحی

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

ابعاد

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

8px: فاصله بین عناصر یک جز

16px: حاشیه اجزای خارجی

24px: اندازه نمادها و ارتفاع خط

در موارد نادر مانند رابط های کاربری متراکم با اطلاعات ، شبکه 8px را می توان یک بار دیگر تقسیم کرد و در نتیجه 4 مانند 4 ، 12 یا 20 افزایش می یابد.

رنگ ها

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

   پایه: پس زمینه محتوا(مانند نوار برنامه ، کارت ها ، صفحه)

  خنثی: رنگهای مثبت و منفی (مانند متن ، خطوط تقسیم کننده و موارد برجسته شفاف)

  لهجه: رنگهای برجسته حالت فعال و فراخوان

 عملکردی: رنگهای تأیید ، هشدار ، خطا و حالت خنثی

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

تایپوگرافی

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

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

هدر 1: برچسب نوار برنامه و عناوین محتوا

هدر 2: عناوین مولفه ها (به عنوان مثال برگه ها ، کارت ها)

 متن 1: برچسب های مولفه (به عنوان مثال برچسب ها ، کادرهای تأیید)

 متن 2: متن ثانویه مولفه (به عنوان مثال آواتار)

ارتفاع

روش مفید دیگر برای سازماندهی UI و انتقال سلسله مراتب محتوا ، استفاده از ارتفاعات است. در Kor من 4 لایه تعریف کرده ام که با استفاده از رنگ و سایه تنظیم می شوند. مقادیر رنگی برای هر لایه بر اساس تأثیر طبیعی نور بر روی سطوح تعریف شده است، به این معنی که لایه های نزدیکتر به بیننده در هر دو مضمون روشن و تاریک روشن تر از لایه های دیگر هستند.

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

لایه 1: پس زمینه صفحه

لایه 2: محتوای کناری (صفحه ها ، میله های ناو)

لایه 3: ظروف محتوا (کارت ، آکاردئون)

لایه 4: محتوای پوشانده شده (اعلان ها ، روش ها)

شمایل نگاری (کشیدن ایکون)

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

۳-ساخت کامپوننت‌ها

کامپوننت‌های سیستم طراحی واحدهای UI هستند که عمومی هستند (که می توانند در موارد مختلف استفاده شوند) و با استفاده از ویژگی ها، اسلات ها و رویدادها قابل تنظیم هستند. برنامه ها معمولاً از 80٪ مولفه های رایج مانند دکمه ها یا فرم‌های اینپوت و 20٪ از موارد منحصر به فرد مانند نقشه ها یا تقویم ها تشکیل شده اند.

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

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

۳:کشیدن و رها کردن سندباکس

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

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

۴. مستندات، راهنمایی و پشتیبانی

به موازات طراحی و توسعه سیستم طراحی، من در صفحه اصلی اسناد برای توضیح نحوه تنظیم، مصرف و کمک به Kor کار کرده ام.

کل برنامه وب با خود کتابخانه مولفه ساخته شده است.

منبع: uxplanet.org

احتمالا حدس زده‌اید که این مقاله به رنگ آبی اختصاص داده شده است. بدون شک، رنگ آبی یکی از مهم‌ترین رنگ‌ها در طراحی رابط کاربری است و بیشترین استفاده را دارد. کافی‌ است به اپلیکیشن‌های موبایل خود نگاهی کنید و ببینید که بیشترِ آنها مانند ‌Facebook، Twitter، Shazam، Safari و بسیاری دیگر، آبی هستند.

حالا چرا آبی رنگ منتخب است؟

دلایل مختلفی برای استفاده از این رنگ وجود دارد که به چند مورد آن اشاره می‌کنیم:

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

• 

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

• 

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

• رنگی با حس نوآورانه. شرکت‌ها اغلب از آبی استفاده می‌کنند، چرا که تکنولوژی و نوآوری را به ذهن می‌آورد.

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

• محصول را قابل اعتماد نشان می‌دهد. معمولا سعی بر این است که کاربر قانع شود یک محصول خاص، انتخابی درست است. در این راستا، هدف از اضافه کردن رنگ آبی، قانع کردن کاربر به معتبر بودن محصول است. برند‌های حوزه‌ی فناوری مانند Dell، IBM، Intel، AT&T و PayPal از ویژگی قابل‌اعتماد بودن رنگ آبی استفاده می‌کنند. آنها محصولاتی تولید می‌کنند که هر روز بیشتر مورد اعتماد مردم قرار می‌گیرد.

• کور رنگی. در رایج‌ترین انواع کور ‌رنگی (Protanopia و Deuteranopia) رنگ آبی دیده می‌شود. این موضوع در مورد رنگ‌های سبز و قرمز صدق نمی‌کند.

رنگ غالب Facebook آبی است، چراکه Mark Zuckerberg کور رنگ است. او می‌گوید: «آبی برای من قوی‌ترین رنگ است، من می‌توانم تمام رنگ‌های آبی را ببینم».

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

در نهایت، رنگ مناسب برای طراحی شما، رنگی است که کاربرتان می‌پسندد.
منبع: uxplanet.org

فشرده سازی

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

مدل های آیکون گروه بندی شده

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

دانلود کردن

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

سایر موارد

از آنجایی که این مقاله بین طولانی بودن “متن” و “کسل کننده ” بودن آن تعادل بر قرار کرد، لطفاً اجازه دهید من فقط همه موارد ارتقاء یافته را لیست کنم و حداقل تا حدی به اجرا در آورم.
• حذف منوی بالایی
• طراحی دوباره منوی اکانت
• ایجاد عکس پروفایل
• اضافه کردن پیش‌نمایش مدل در هوم پیج به جای آیکن جدید.
همچنین ما نهایت تلاش خود را در جهت بهبود عملکردمان کردیم و شاید این اولین بار است که من در صفحه تست رتبه AAAA را دیده ام.

پیشرفت‌های آینده

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

نوبت شما

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

منبع: icons8.com