Facebook Pixel
Searching...
فارسی
EnglishEnglish
EspañolSpanish
简体中文Chinese
FrançaisFrench
DeutschGerman
日本語Japanese
PortuguêsPortuguese
ItalianoItalian
한국어Korean
РусскийRussian
NederlandsDutch
العربيةArabic
PolskiPolish
हिन्दीHindi
Tiếng ViệtVietnamese
SvenskaSwedish
ΕλληνικάGreek
TürkçeTurkish
ไทยThai
ČeštinaCzech
RomânăRomanian
MagyarHungarian
УкраїнськаUkrainian
Bahasa IndonesiaIndonesian
DanskDanish
SuomiFinnish
БългарскиBulgarian
עבריתHebrew
NorskNorwegian
HrvatskiCroatian
CatalàCatalan
SlovenčinaSlovak
LietuviųLithuanian
SlovenščinaSlovenian
СрпскиSerbian
EestiEstonian
LatviešuLatvian
فارسیPersian
മലയാളംMalayalam
தமிழ்Tamil
اردوUrdu
Mobile First

Mobile First

توسط Luke Wroblewski 2011 130 صفحات
3.91
2k+ امتیازها
گوش دادن

نکات کلیدی

1. اولویت با موبایل: پذیرش انقلاب موبایل برای رشد و نوآوری

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

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

  • گوشی‌های هوشمند دو سال زودتر از پیش‌بینی‌ها از کامپیوترهای شخصی پیشی گرفتند
  • ترافیک وب موبایل در یک سال 600% رشد کرد
  • تا سال 2013، انتظار می‌رود که تلفن‌های همراه به رایج‌ترین دستگاه‌های دسترسی به وب در سراسر جهان تبدیل شوند

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

2. محدودیت‌ها تمرکز را هدایت می‌کنند: محدودیت‌های موبایل به طراحی بهتر منجر می‌شوند

"پذیرش محدودیت‌ها (به‌جای مبارزه با آن‌ها) در نهایت شما را به طراحی‌های بهتری می‌رساند."

اندازه صفحه‌نمایش مهم است. دستگاه‌های موبایل معمولاً 80% فضای صفحه‌نمایش کمتری نسبت به دسکتاپ‌ها دارند. این محدودیت طراحان را مجبور می‌کند تا محتوا و ویژگی‌ها را اولویت‌بندی کنند و به تجربیات متمرکزتر و کاربرمحورتر منجر می‌شود. برای مثال:

  • برنامه موبایل Southwest Airlines بر روی عملکردهای اصلی تمرکز دارد: رزرو سفر، چک‌این و وضعیت پرواز
  • تجربه موبایل Flickr بیش از 60 گزینه ناوبری را به شش اقدام کلیدی کاهش می‌دهد

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

3. استفاده از قابلیت‌های موبایل: نوآوری با ویژگی‌های خاص دستگاه

"قابلیت‌های موبایل به شما اجازه می‌دهند تا راه‌های جدیدی برای برآورده کردن نیازهای مردم با ابزارهای هیجان‌انگیز جدیدی که اکنون در اختیار دارید، اختراع کنید."

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

  • تشخیص مکان
  • جهت‌گیری دستگاه/شتاب‌سنج
  • رابط‌های لمسی
  • دوربین‌ها و میکروفون‌ها
  • ارتباط نزدیک میدان (NFC)

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

4. محتوا بر ناوبری: اولویت‌بندی اطلاعات در رابط‌های موبایل

"به‌عنوان یک قاعده کلی، محتوا بر ناوبری در موبایل اولویت دارد."

کاربران موبایل به دنبال پاسخ‌های فوری هستند. رابط‌های موبایل را طراحی کنید که محتوا را بر گزینه‌های گسترده ناوبری اولویت‌بندی کنند. نمونه‌هایی از طراحی‌های مؤثر با اولویت محتوا:

  • سایت‌های موبایل YouTube و ESPN محتوای به‌موقع را به‌طور برجسته نمایش می‌دهند
  • نوارها و منوهای ناوبری را به یک اقدام یا دکمه کاهش دهید

امکان کاوش بدون شلوغی. راه‌هایی برای کاربران فراهم کنید تا محتوای اضافی را بدون شلوغ کردن رابط کشف کنند:

  • از لینک‌های لنگر برای پرش به گزینه‌های ناوبری در پایین صفحه استفاده کنید
  • ناوبری متنی برای محتوای مرتبط پیاده‌سازی کنید
  • از منوهای "همبرگری" پاسخگو برای گزینه‌های اضافی استفاده کنید

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

"انگشتان انسان ابزارهای اشاره‌گر دقیقی نیستند: آن‌ها دقت پیکسلی نشانگر ماوس را ندارند؛ در اندازه‌های مختلفی هستند؛ و معمولاً هنگام تعامل با دستگاه‌های ما حرکت می‌کنند یا می‌لغزند."

اندازه برای اهداف لمسی مهم است. این دستورالعمل‌ها را برای رابط‌های دوستانه با لمس دنبال کنید:

  • حداقل اندازه هدف لمسی: 7-10 میلی‌متر (حدود 44-57 پیکسل)
  • فاصله ایده‌آل بین اهداف: 2 میلی‌متر (حدود 11 پیکسل)
  • نمایش‌های بصری را 50-100% اندازه واقعی هدف لمسی بسازید

دسترسی انگشت شست را در نظر بگیرید. طرح‌بندی‌هایی طراحی کنید که استفاده با یک دست را ممکن سازند:

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

6. بازنگری روش‌های ورودی: ساده‌سازی ورود داده‌ها در دستگاه‌های موبایل

"دستگاه‌های موبایل همیشه با ما هستند. بنابراین هر زمان یا هر کجا که الهام به ما دست دهد، می‌توانیم نظر خود را بیان کنیم، به اشتراک بگذاریم یا به‌سادگی آنلاین مشارکت کنیم."

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

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

از قابلیت‌های دستگاه استفاده کنید. فراتر از ورودی‌های فرم سنتی بروید:

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

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

"از طریق استفاده از طرح‌بندی‌های سیال، رسانه‌های انعطاف‌پذیر، پرس‌وجوهای رسانه‌ای CSS3 و (گاهی) کمی جاوااسکریپت، طراحی وب پاسخگو به شما اجازه می‌دهد تا به‌طور قابل‌توجهی با دستگاه‌ها تطبیق پیدا کنید."

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

  • از طرح‌بندی‌های سیال با عرض‌های مبتنی بر درصد استفاده کنید
  • تصاویر و رسانه‌های انعطاف‌پذیر را پیاده‌سازی کنید
  • از پرس‌وجوهای رسانه‌ای CSS3 برای اعمال سبک‌های مختلف بر اساس ویژگی‌های دستگاه استفاده کنید

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

  • عرض‌های رایج دستگاه‌ها را در نظر بگیرید (مثلاً 320px، 768px، 1024px)
  • طرح‌بندی، تایپوگرافی و عملکرد را در هر نقطه شکست تنظیم کنید

8. تجربیات خاص دستگاه: سفارشی‌سازی رابط‌ها برای زمینه‌های استفاده منحصر به فرد

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

ویژگی‌های منحصر به فرد دستگاه را در نظر بگیرید. هر کلاس دستگاه ویژگی‌های متمایزی دارد:

  • وضعیت کاربر (مثلاً تماشای تلویزیون در حالت لمیده در مقابل استفاده در حال حرکت موبایل)
  • روش ورودی اصلی (مثلاً کنترل از راه دور، لمس، صفحه‌کلید)
  • اندازه نمایشگر متوسط

برای زمینه بهینه‌سازی کنید. رابط‌هایی طراحی کنید که به تجربیات خاص دستگاه‌ها پاسخ دهند:

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

9. کاهش به‌عنوان یک استراتژی: ساده‌سازی برای بهبود تجربه کاربری موبایل

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

کمتر در موبایل بیشتر است. رابط‌های موبایل خود را با:

  • تمرکز بر عملکرد اصلی و مهم‌ترین محتوا
  • حذف گزینه‌های ناوبری غیرضروری
  • ساده‌سازی فرم‌ها و روش‌های ورودی

مزایای کاهش:

  • توسعه و نگهداری آسان‌تر
  • تمرکز و تکمیل وظایف بهتر کاربران
  • عملکرد بهبود یافته در شبکه‌های موبایل

10. آماده برای تغییر مداوم: در چشم‌انداز همیشه در حال تغییر موبایل چابک بمانید

"به موبایل خوش آمدید، جایی که تنها چیزی که می‌توانید روی آن حساب کنید تغییر است."

عدم قطعیت را بپذیرید. چشم‌انداز موبایل به‌طور مداوم در حال تغییر است:

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

قابلیت انطباق را حفظ کنید. استراتژی‌هایی برای باقی ماندن انعطاف‌پذیر توسعه دهید:

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

آخرین به‌روزرسانی::

نقد و بررسی

3.91 از 5
میانگین از 2k+ امتیازات از Goodreads و Amazon.

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

درباره نویسنده

لوک وروبلوسکی یک رهبر برجسته در حوزه محصولات دیجیتال است که تجربه‌ی گسترده‌ای در طراحی نرم‌افزار دارد. او بنیان‌گذار Bagcheck است که توسط توییتر خریداری شد و در موقعیت‌های رهبری در Benchmark Capital و یاهو! فعالیت کرده است. وروبلوسکی نویسنده‌ی چندین کتاب در زمینه طراحی وب است، از جمله "موبایل اول"، "طراحی فرم وب" و "سایت‌نگری: رویکرد بصری به قابلیت استفاده وب". او سخنران مورد توجهی در کنفرانس‌های جهانی است و به نرم‌افزاری که توسط بیش از ۷۰۰ میلیون نفر استفاده می‌شود، کمک کرده است. تخصص وروبلوسکی شامل هم‌راستایی محصولات، تجربیات یکپارچه مشتری و طراحی پیشرو در پلتفرم‌های مختلف است. او همچنین بنیان‌گذار انجمن طراحی تعامل (IxDA) بوده و در هیئت مدیره آن خدمت کرده است.

0:00
-0:00
1x
Dan
Andrew
Michelle
Lauren
Select Speed
1.0×
+
200 words per minute
Create a free account to unlock:
Bookmarks – save your favorite books
History – revisit books later
Ratings – rate books & see your ratings
Unlock unlimited listening
Your first week's on us!
Today: Get Instant Access
Listen to full summaries of 73,530 books. That's 12,000+ hours of audio!
Day 4: Trial Reminder
We'll send you a notification that your trial is ending soon.
Day 7: Your subscription begins
You'll be charged on Dec 1,
cancel anytime before.
Compare Features Free Pro
Read full text summaries
Summaries are free to read for everyone
Listen to summaries
12,000+ hours of audio
Unlimited Bookmarks
Free users are limited to 10
Unlimited History
Free users are limited to 10
What our users say
30,000+ readers
“...I can 10x the number of books I can read...”
“...exceptionally accurate, engaging, and beautifully presented...”
“...better than any amazon review when I'm making a book-buying decision...”
Save 62%
Yearly
$119.88 $44.99/yr
$3.75/mo
Monthly
$9.99/mo
Try Free & Unlock
7 days free, then $44.99/year. Cancel anytime.
Settings
Appearance