طراحی موبایل ساده شده است: استراتژی هایی برای UX بدون درز

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

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

ایجاد سلسله مراتب بصری قوی در موبایل

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

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

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

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

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

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

اصول اصلی طراحی موبایل-اول

منبع: فری پیک

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

اهداف لمسی باید حداقل 44 پیکسل ارتفاع داشته باشند. دکمه ها یا پیوندها باید دارای بالشتک کافی برای فشار دادن دقیق باشند.

طرح های رنگی از الف استفاده می کنند 60-30-10 نسبت رنگ های غالب، ثانویه و تاکیدی. بالا کنتراست بین متن و پس‌زمینه، خوانایی را در شرایط مختلف نور بهبود می‌بخشد.

روندهای اصلی طراحی بصری در تلفن همراه UX

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

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

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

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

استفاده از قلم عمدتاً sans-serif با ارتفاع خط سخاوتمندانه است. اندازه‌ها و ویژگی‌های قلم با انتخاب‌های کاربر سازگار است، نه با تنظیمات بزرگ‌نمایی صفحه.

بهترین روش های ناوبری موبایل

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

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

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

بهینه سازی عملکرد و سرعت برای موبایل

منبع: فری پیک

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

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

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

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

ابزارها می توانند موارد حیاتی وب اصلی مانند بزرگترین رنگ محتوا و تغییر چیدمان تجمعی.

اصول دسترسی برای تلفن همراه UX

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

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

تنظیمات حرکت کاهش یافته به کاربرانی که ممکن است به حرکت حساس باشند احترام می گذارد.

حداقل کنتراست نسبت‌ها برآورده می‌شوند و توسط ابزارهایی برای بررسی نحوه نمایش متن در پس‌زمینه ارزیابی می‌شوند. اندازه متن را می توان تا 200% بدون تغییر طرح بندی تغییر داد.

ریز تعامل هایی که تعامل را افزایش می دهند

منبع: فری پیک

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

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

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

ساخت سیستم های طراحی موبایل مقیاس پذیر

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

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

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

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

تست و تکرار کاربر

منبع: فری پیک

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

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

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

شخصی سازی و تجارب تطبیقی ​​موبایل

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

اجزای تطبیقی ​​برای صفحه نمایش های تاشو و بزرگ تغییر اندازه می دهند و پروفایل های ترجیحی همچنان باقی می مانند تاریک حالت و انتخاب فونت

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

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

سازگاری طراحی موبایل در چند پلتفرم

پلت فرم احترام تجربیات یکپارچه اصطلاحات (شورون‌های پشتی iOS، موج‌های مواد Android، و غیره) و در تراکم‌ها و طرح‌بندی‌های صفحه نمایش مقیاس شوند.

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

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

طراحی UX موبایل با قابلیت آتی

مدولار معماری ها اجازه ورودی‌های اضافی مانند حرکات AR را می‌دهد و مؤلفه‌های صدا اول اجازه ورودی به سبک مکالمه را می‌دهند.

پایدار بهینه سازی تقاضای داده را پایین نگه می دارد و به طور موثر ارائه می شود. یادگیری مداوم به طور معمول فعالیت های کاربران را بهینه می کند.

چنین استراتژی هایی طراحی های موبایل را به سمت متعادل کردن هنر با ماندگاری هدایت کرده است تابع.

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